/*Style für Seite NEC. Texte linke Spalte werden bei kleinen Seiten im footer angezeigt*/
/*************** Main Spalte**********************/
/*****************Grundlage Verbrennung*****************/
/*Liste Bilder links Text nicht umfließend*/
  .item-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  .item-container img {
    width: 200px;
    height: auto;
    flex-shrink: 0;
  }
  .item-container div {
    flex: 1;
    min-width: 250px; /* Sicherstellen, dass der Text genügend Platz hat */
  }
/****************Ende Grundlage Verbrennung************/

 /********************Grid Ex-Zonen********************/
    .gridExZone {
      display: grid;
      grid-template-columns: 2fr 1fr 4fr; /* Drei Spalten */
      grid-template-rows: auto auto auto auto; /* 4 Reihen */
      /*gap: 10px; /* Abstand zwischen den Zellen */
      width: 100%;
      max-width: 1200px;
      margin: 0 auto; /* Zentriert das Grid */
    }
    /* Die Kopfzeile */
    .gridExZoneHeader {
      grid-column: 2 3; /* Kopfzeile in Spalte 2 */
      grid-row: 1; /* Kopfzeile in der ersten Reihe */
      text-align: center;
      font-weight: bold;
      /*padding: 20px;*/
      font-size: 1.2em;
      border: black 1px solid;
    }
    /* Styling für die restlichen Zellen */
    .gridExZone div:not(.gridExZoneBild):not(.gridExZoneHeader) {
      padding: 10px;
      border: 1px solid #ccc;
      /*background-color: #f9f9f9;*/
      text-align: center;
      border: black 1px solid;
    }
    .gridEx2SpBreit{
      grid-column: span 2;
      border: black 1px solid;
      padding: 5px 5px 5px 5px;
      box-sizing: border-box;
      font-weight: bold;
      font-size: 1em;
      text-align: left;
      }
    /* Bild in der ersten Spalte (über 4 Reihen) */
    .gridExZoneBild {
      grid-column: 1; /* Bild in der ersten Spalte */
      grid-row: 1 / span 4; /* Das Bild spannt sich über alle 4 Reihen */
      text-align: center;
      padding-right: 10px;  
      /*background-color: #ccc; /* Zum Testen */
    }
    .gridExZoneBild img {
      max-width: 100%; /* Bild füllt die Zelle aus */
      height: auto;
      display: block;
      margin: 0 auto; /* Bild zentrieren */
    }


/*************** Responsives Design für kleine Bildschirme **************/
/*************Ex-Zone*******************/
@media (max-width: 768px) {
  /* Das Grid wird auf eine Spalte umgestellt */
  .gridExZone {
    grid-template-columns: 1fr; /* Eine Spalte für kleine Bildschirme */
    grid-template-rows: auto auto auto auto auto auto auto; /* Jede Reihe wird automatisch angepasst */
    box-sizing: border-box;
    max-width: 100%;
    }

    .gridExZoneSp2 {
      margin-bottom: 10px; /* Erhält den Abstand zwischen den Zellen */
    }

    /* Bild in die erste Reihe verschieben und über alle Spalten ausdehnen */
  .gridExZoneBild {
    grid-column: 1 / -1; /* Bild über alle Spalten */
    grid-row: 1; /* Bild in die erste Reihe verschieben */
    width: 100%; /* Bild passt sich der Breite der Spalte an */
    max-width: 100%; /* Verhindert Überschreiten der Bildschirmbreite */
    height: auto; /* Bewahrt das Seitenverhältnis des Bildes */  
    }
  /* Kopfzeile auf kleinen Bildschirmen ausblenden */
  .gridExZoneHeader {
    display: none; /* Kopfzeile ausblenden */
  }
  /* Alle Text-Zellen in einer einzigen Spalte unter dem Bild anzeigen */
  .gridExZone div:not(.gridExZoneBild):not(.gridExZoneHeader) {
    grid-column: 1; /* Alle Text-Zellen in einer Spalte */
  }
}
/*************Ende responsivesGrid EX-Zone 3 Spalten**************/

/*********Grid Beispiel Kennzeichnung***********/
.gridcontainer4Sp /*NEC500*/
{display: grid;
  grid-template-columns: max-content max-content max-content  max-content;
  max-width: 80%;
  /*max-width: 800px;*/
  border: none;
  padding: 20px;
}
.gridcontainer6Sp /*NEC505_506*/
{display: grid;
  grid-template-columns:max-content max-content max-content max-content max-content  max-content;
  max-width: 80%;
  /*max-width: 800px;*/
  border: none;
  padding: 20px;
}
.gridAusrNoFrame{
  display: flex; /* Aktiviert Flexbox */
  justify-content: center; /* Horizontale Zentrierung */
  align-items: center; /* Vertikale Zentrierung */
  border: none; 
  text-align: center; 
  gap: 10px; 
  white-space: pre-wrap; 
}
/******************Ende Beispiel Kennzeichnung******************/

/************Grid Kennzeichnung************************/
/*Grid Gerätekennzeichnung 4 Spalten*/
.gridcontainer3Sp {
  display: grid;
  grid-template-columns: auto auto auto/*60px max-content 50px 400px*/;
  justify-content: center;
  /*border: black 1px solid;*/
 padding: 5px 5px 5px 5px;
  max-width: 100%;
  text-align: center;  
  z-index: 2;
}
/*****erste Spalte gedreht********/
    .grid3rows /*class*/
    {grid-row: span 3;
      align-content: center;
      border: black 1px solid;
      text-align: center;
      font-weight: bold;
      font-size: 1.3em; 
      padding: 5px 5px 5px 5px;
      writing-mode: vertical-rl; /*Text gedreht*/
      transform: rotate(180deg); /*Text gedreht*/ 
    }
    .grid2rows /*division*/
    {grid-row: span 2;
      align-content: center;
      border: black 1px solid;
      text-align: center;
      font-weight: bold;
      font-size: 1.3em; 
      padding: 5px 5px 5px 5px;
      writing-mode: vertical-rl; /*Text gedreht*/
      transform: rotate(180deg); /*Text gedreht*/ 
    }
    .grid8rows /*Group*/
    {grid-row: span 8;
      align-content: center;
      border: black 1px solid;
      text-align: center;
      font-weight: bold;
      font-size: 1.3em; 
      padding: 5px 5px 5px 5px;
      writing-mode: vertical-rl; /*Text gedreht*/
      transform: rotate(180deg); /*Text gedreht*/  
    }
    .grid14rows/*Temp-Klasse*/ 
    {grid-row: span 14;
      align-content: center;
      border: black 1px solid;
      text-align: center;  
      font-weight: bold;
      font-size: 1.3em; 
      padding: 5px 5px 5px 5px;
      writing-mode: vertical-rl; /*Text gedreht*/
      transform: rotate(180deg); /*Text gedreht*/
    }
    .gridAusr /*weitere Spalten*/
    {align-items: center;
      border: black 1px solid;
      text-align: center;  
      align-content: center;
      box-sizing: border-box;
    }
     .grid3Sp  /*Spalte Bemerkung*/
    {grid-column: span 3;
    border: black 1px solid;
    font-size: 0.8em; 
    text-align: left;
    padding: 5px 5px 5px 5px;
    box-sizing: border-box;
    }
    /*responsivesGrid EX-Zone 3 Spalten*/


  /* Globales Box-Modell für bessere Layout-Berechnung */
  *,
  *::before,
  *::after {
    box-sizing: border-box; /* Verhindert das Überlaufen von Padding/Breite */
  }

  body {
    margin: 0;
    padding: 0;
  }

    /* Media Query für kleinere Bildschirme Grid Kennzeichnung 
    @media (max-width: 768px) {
      /* Grid nur noch 2 Spaltig und Spalte 1 Waagrecht und über Spalten 2-3 
    .gridcontainer3Sp {  
      grid-template-columns: repeat(2, minmax(0, auto));
      box-sizing: border-box;
      max-width: 100%;
      justify-content: center; 
      box-sizing: border-box;
      padding-left: 5px;
      padding-right: 0px;
    }
    .grid14rows, .grid8rows, .grid3rows, .grid2rows{
      grid-column: span 2 !important; /* Sicherstellen, dass Regel greift */
     /* grid-row: 1 !important; /* In die erste Zeile 
      writing-mode: horizontal-tb !important; /* Waagrecht 
      transform: none !important; /* Keine Drehung 
      text-align: left;
      box-sizing: border-box;
    }
    */

  

/*****Ende erste Spalte- gedreht*****/
/************Ende Grid Kennzeichnung********************/