/*Style für Seite Zeugnis Texte linke Spalte werden bei kleinen Seiten im footer angezeigt*/
/*************** Main Spalte**********************/
/*Grid Zeugnisarten 5 Spalten*/
  /*.gridcontainer5Sp {
    display: grid;
    justify-content: center;
    padding: 5px 5px 5px 5px;
    max-width: 90%;*/
  .gridcontainer5Sp {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      justify-content: center;
      /*padding: 5px;*/
      max-width: 100vw; /* Verhindert, dass das Grid über den Bildschirm hinausgeht*/
      width: 100%;
      text-align: center;
      z-index: 2;
      box-sizing: border-box;
    }
    
  .gridHead{
    align-items: center;
    border: black 1px solid;
    text-align: center;  
    font-weight: bold;
    background-color: #f9f4c7;
    align-content: center;
    box-sizing: border-box;
    padding: 5px;
  }
  .gridSp1{  /*waagrecht große Bildschirme*/
    align-items: center;
    border: black 1px solid;
    text-align: center;  
    font-weight: bold;
    background-color: #f9f4c7;
    align-content: center;
    box-sizing: border-box;
  }
  .gridAusr{
    align-items: center;
    border: black 1px solid;
    text-align: center;  
    align-content: center;
    box-sizing: border-box;
  }
  .grid2SpBreit{
    grid-column: span 2;
    border: black 1px solid;
    font-size: 1em; 
    padding: 5px 5px 5px 5px;
    box-sizing: border-box;
    }
  .grid3SpBreit{
    grid-column: span 3;
    border: black 1px solid;
    font-size: 1em; 
    padding: 5px 5px 5px 5px;
    box-sizing: border-box;
    }
/*ENDE Grid Zeugnisarten 5 Spalten*/

/*Grid Alt-Neu 9 Spalten für große Bildschirme*/
  .gridcontainer9Sp {
    display: grid;
    grid-template-columns: repeat(9, 1fr)/*60px max-content 50px 400px*/;
    justify-content: center;
    /*border: black 1px solid;*/
    padding: 5px 5px 5px 5px;
    max-width: 90%;
    text-align: center;  
    z-index: 2;
  }
  .grid9SpBreit{
    grid-column: span 9;
    border: black 1px solid;
    font-size: 1em; 
    text-align: center;  
    font-weight: bold;
    background-color: #f9f4c7;
    padding: 5px 5px 5px 5px;
    box-sizing: border-box;
  }
  .gridcontainer6Sp {
  display: none;}/*ausblendne Teabelle für kleine Bildschirme*/
/*ENDE Alt-Neu Zeugnisarten 9 Spalten*/

/*Inhalt Checkliste Prüfbescheinigung 5 Spalten unterschiedlich breit*/
  .gridcontainer5SpVerschBreit {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 10fr/*60px max-content 50px 400px*/;
    justify-content: center;
    /*border: black 1px solid;*/
    padding: 5px 5px 5px 5px;
    max-width: 80%;
    text-align: center;  
    z-index: 2;
  }
  .grid4SpBreit{
    grid-column: span 4;
    border: black 1px solid;
    border-bottom: none;
    /*font-size: 0.8em;*/ 
    font-weight: bold;
    background-color: #f9f4c7;
    padding: 5px 5px 5px 5px;
    box-sizing: border-box;
    }
  .gridHeadNoFrameTop{
     align-items: center;
     border: black 1px solid;
     border-top: none;
     text-align: center;  
     font-weight: bold;
     background-color: #f9f4c7;
     align-content: center;
     box-sizing: border-box;
     padding: 5px;
   }
   .gridHead2rowsBreit{
      grid-row: span 2;
      align-items: center;
     border: black 1px solid;
     text-align: center;  
     font-weight: bold;
     background-color: #f9f4c7;
     align-content: center;
     box-sizing: border-box;
     padding: 5px;
   }
/*ENDE Checklistet Prüfbeascheinigung 5 Spalten*/

/************************************************************************************/
/* Anpassung für kleinere Bildschirme */
@media (max-width: 768px) {
  .gridcontainer5Sp {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Kleinere Mindestbreite */
  }
  .gridcontainer9Sp {
  display: none;/*für alt-neu*/
  }

  .gridSp1{  /*gedreht kleine Bildschirme*/
    align-items: center;
    border: black 1px solid;
    text-align: center;  
    font-weight: bold;
    writing-mode: vertical-rl; /*Text gedreht*/
    transform: rotate(180deg); /*Text gedreht*/
    background-color: #f9f4c7;
    align-content: center;
    box-sizing: border-box;
  }

  .grid4SpBreit, .gridHeadNoFrameTop, .gridHead2rowsBreit, .gridSp1,.gridHead, .gridAusr, .grid2SpBreit, .grid3SpBreit {
    font-size: 0.8em; /* Schrift verkleinern */
  }
}



@media (max-width: 480px) {
  .gridcontainer5Sp {
   /* grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); /* Noch kleinere Mindestbreite */
   grid-template-columns: repeat(5, auto);
  }

  .grid4SpBreit, .gridHeadNoFrameTop, .gridHead2rowsBreit, .gridSp1, .gridHead, .gridAusr, .grid2SpBreit, .grid3SpBreit {
    font-size: 0.6em; /* Noch kleinere Schrift auf sehr kleinen Screens */
  }
  /*Grid Alt-Neu 5 Spalten für kleine Bildschirme*/
.gridcontainer6Sp {
  display: grid;
  grid-template-columns: repeat(6, 1fr)/*60px max-content 50px 400px*/;
  justify-content: center;
  /*border: black 1px solid;*/
  padding: 5px 5px 5px 5px;
  max-width: 90%;
  text-align: center;  
  z-index: 2;
}
.grid6SpBreitGelb{
  grid-column: span 6;
  border: black 1px solid;
  font-size: 1em; 
  text-align: center;  
  font-weight: bold;
  background-color: #f9f4c7;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
}
.grid6SpBreit{
  grid-column: span 6;
  border: black 1px solid;
  font-size: 1em; 
  text-align: center;  
  font-weight: bold;
  padding: 5px 5px 5px 5px;
  box-sizing: border-box;
}
/*ENDE Alt-Neu Zeugnisarten 9 Spalten*/
}