/*Style für Seite Atex/IECEX/NEC. Texte linke Spalte werden bei kleinen Seiten im footer angezeigt*/
/*******************************************************************
Liste Bilder links Text nicht umfließend zB Explosionsbedingungen
*******************************************************************/
.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 */
}

/*************************************
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;
  }

  /* Standard Grid Layout */
  .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;
  }

  /* 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;
    /*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 */
    padding-right: 10px;
  }

  /*****************************************
  Grid 8 Spalten für Beispiel Kennzeichnung
  ******************************************/
    .gridcontainer8Sp {
      display: grid;
      grid-template-columns: max-content max-content 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; 
    }

/*****************************************
Grid 4 Spalten für Gerätekennzeichnung
*****************************************/
    .gridcontainer4Sp {
        display: grid;
        grid-template-columns: auto 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*/
    .grid22rows {
        grid-row: span 22;
        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*/
    }
    .grid9rows {
        grid-row: span 9;
        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 {
        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*/  
    }
    .grid6rows {
        grid-row: span 6;
        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*/
    }
    .grid3rows {
        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*/ 
    }
/*Ende erste Spalte- gedreht*/
/*zweite Spalte - nicht gedreht*/
    .gridAusr{
      align-items: center;
      border: black 1px solid;
      text-align: center;  
      align-content: center;
      box-sizing: border-box;
    }
    .gridSp2-8rows {
      grid-row: span 8;
      align-content: center;
      border: black 1px solid;
      text-align: center;
      /*font-weight: bold;*/
      font-size: 1.2em; 
      padding: 5px 5px 5px 5px;
      box-sizing: border-box;
    }
    .gridSp2-7rows {
      grid-row: span 7;
      align-content: center;
      border: black 1px solid;
      text-align: center;
      /*font-weight: bold;*/
      font-size: 1.2em; 
      padding: 5px 5px 5px 5px;
      box-sizing: border-box;
    }
    .gridSp2-3rows {
      grid-row: span 3;
      align-content: center;
      border: black 1px solid;
      text-align: center;
      /*font-weight: bold;*/
      font-size: 1.2em; 
      padding: 5px 5px 5px 5px;
      box-sizing: border-box;
    }
    .gridSp2-2rows {
      grid-row: span 2;
      align-content: center;
      border: black 1px solid;
      text-align: center;  
      /*font-weight: bold;*/
      font-size: 1.2em; 
      padding: 5px 5px 5px 5px;
      box-sizing: border-box;
    }
    .gridSp2-1row {
      grid-row: span 1;
      align-content: center;
      border: black 1px solid;
      text-align: center;  
      /*font-weight: bold;*/
      font-size: 1.2em; 
      padding: 5px 5px 5px 5px;
      box-sizing: border-box;
    }
/*Ende zweite Spalte - nicht gedreht*/
/*Spalte Bemerkung*/
    .grid2Sp{
        grid-column: span 2;
        border: black 1px solid;
        font-size: 0.8em; 
        padding: 5px 5px 5px 5px;
        box-sizing: border-box;
    }
    .grid3Sp{
        grid-column: span 3;
        border: black 1px solid;
        font-size: 0.8em; 
        text-align: left;
        padding: 5px 5px 5px 5px;
        box-sizing: border-box;
    }

    /* Styling für die restlichen Zellen Wird event. nicht bnötigt?*/
    .gridExZone div:not(.gridExZoneBild):not(.gridExZoneHeader) {
        padding: 10px;
        border: 1px solid #ccc;
        /*background-color: #f9f9f9;*/
        text-align: center;
        border: black 1px solid;
    }

/*****************************
     RESPONSIVE BREAKPOINTS
*****************************/

/* Tablet & kleiner → Sidebar weg */
@media screen and (max-width: 768px) {
/*************************************************************
responsivesGrid EX-Zone: 3 Spalten wird auf 1 spalte umgestelt
***************************************************************/
    .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 */
    }
  }

/****************************************************************
 Grid 4 Spalten für Gerätekennzeichnung,
 nur noch 3 Spaltig und Spalte 1 Waagrecht und über Spalten 2-3 
 ****************************************************************/
.gridcontainer4Sp {  
  /* grid-template-columns: auto auto auto;/*60px max-content 50px 400px*/
 grid-template-columns: repeat(3, minmax(0, auto));
  box-sizing: border-box;
  max-width: 100%;
  justify-content: center; 
  box-sizing: border-box;
  padding-left: 5px;
  padding-right: 0px;
}
.grid22rows, .grid9rows, .grid6rows, .grid8rows, .grid3rows{
  grid-column: span 3 !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;
}

/* Smartphone */
/*event noch ergänzen analog styleSchwebe2026All
@media screen and (max-width: 480px) {
}*/
/* =========================
   FULL WIDTH FIX
========================= */
/*event noch ergänzen analog styleSchwebe2026All
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}