/*Style für Seite Widerstand. Texte linke Spalte werden bei kleinen Seiten im footer angezeigt*/
/*************** Main Spalte**********************/

/*Box Berechnung Widerstand bei index und widerstand*/
    #flexcontainer{
      display: flex;
      background-color: #f9f4c7;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content:space-around;
      height: 60px;
      width: 90%;
      align-items: center;
    }
    #flexitem{
    input {
    text-align: center;
    }}
/*Ende Berechnung*/
/*Format Eingabe Formular Generator*/
    .label {
      display: inline-block;
      width: 100px;
    }
    form{
      border: 2px solid black;
      display: inline-block;
      padding: 10px; /* Optional: Um den Inhalt etwas vom Rahmen abzurücken */
      border-radius: 3%;
    }
    /*Eingabefeld start und end*/
    input[type="number"] {
    width: 77px;
    text-align: center;
    }
    #textForm{
      border-radius: 3%;
      background-color: rgb(230, 228, 228);
      padding: 3px;
      margin: 3px;
    }
    #berechnenButton{
    align: center
    }
/*Ende Format Eingabe Formular Generator*/
/*Grid für Tabellen-Generator*/ 
    .grid-container {
      display: grid;
      grid-template-columns: repeat(11, 1fr);
      gap: 2px;
      margin-top: 20px;
      width: 90%;  /*Breite head, grid-container und Fuss noch anpassen*/
      /*max-width: max-content; /*neu 01.04.2024 GEsamtbreite der Seite noch anpassen*/
    }
    .grid-item {
      border: 1px solid #1f1e1e;
      padding: 1px;
      text-align: center;
    }
    .grid-itemHead {
      border: 1px solid #1f1e1e;
      background-color: #ffc439;;
      text-align: center;
      padding: 3px;
      font-weight: bold;
    }
    .grid-item:nth-child(11n + 1) {
      background-color: #ffc439;
      text-align: center;
      font-weight: bold;
    }
    /*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 Liste*/

    /*Verhindert den Ausdruck der 3 Buttons*/
    @media print {
      #resetButton,
      #printButton,
      #backButton {
          display: none !important;}
    }
/*Ende Grid für Tabellen-Generator*/