body {
color: #1d412a;  /* schrift farbe */
color: maroon ;

background-color: burlywood;
background-color: #bda282;
background-color: maroon;

/* 
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
 */
 /* background-color: #990900;  = dieses rot 
 color: maroon 
 color: #1d412a;   
 bgcolor="#bda282" */

font-family: Verdana, Geneva, Tahoma, sans-serif; 
}

/* shift + alt + a */


.grid-container-uberschrift {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* verhindert Überlauf */
  gap: 10px;
  max-width: 900px;
  margin: 2px auto;
  padding: 1px;
  border: 2px solid #333;
  text-align: center;
  background-color: burlywood;     /* Hintergrindfarbe   !!!! */
}

.grid-container-doppelspalte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* verhindert Überlauf */
  gap: 10px;
  max-width: 900px;
  margin: 20px auto;
  padding: 10px;
  border: 3px solid #333;
  background-color: burlywood;     /* Hintergrindfarbe   !!!! */
}


.grid-container-diagramme {
  display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr)); /* verhindert Überlauf */
  gap: 10px;
  max-width: 900px;
  margin: 20px auto;
  padding: 10px;
  border: 3px solid #333;
  background-color: burlywood;     /* Hintergrindfarbe   !!!! */
}

.feld {
  border: 1px solid #666;
  padding: 10px;
  text-align: center;
}



/* ❗ KEIN position:absolute hier */
.bildfeld {
  display: flex;
  flex-direction: column;   /* Bild → Tabelle untereinander */
  gap: 1px;
}

/* Bild responsive */
/*.bildfeld img {
  max-width: 100%;
  height: auto;
  display: block;
}    */

/* 🔑 Bild korrekt skalieren */
.bildfeld img {
  width: 100%;        /* passt sich dem Grid-Feld an */
  max-width: 800px;   /* Originalgröße nicht überschreiten */
  height: auto;       /* Seitenverhältnis 800x600 */
  align-self: center; /* zentriert, wenn kleiner */
  display: block;
}

/* Tabelle unter dem Bild */
.info-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.info-tabelle td {
  border: 1px solid #666;
  padding: 6px;
  font-weight: bold;
}


@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

