/* Styles for screen widths up to 1024px */
@media screen and (max-width: 1024px) {

  body {
      width: auto;
      display: grid;
      grid-template-areas:
          'header'
          'left'
          'main'
          'error'
          'right'
          'footer';
      grid-template-columns: 100%;
      justify-content: left;  
      background-size: cover; /* more modern approach */
  }

  header, footer {
      background-size: cover;
      width: 100%;
      height: 100px;
  }

  header ul, footer ul, nav, aside {
      display: none;
  }    

  img {
            display: block; /* Stellt sicher, dass das Bild als Block-Element angezeigt wird */
            max-width: 100%; /* Verhindert, dass das Bild die Breite seines Containers überschreitet */
            margin-bottom: 20px; /* Abstand nach unten */
            margin: auto;
        }

        iframe {
            display: block; /* Stellt sicher, dass das iframe als Block-Element angezeigt wird */
            width: 100%; /* Setzt die Breite des iframes auf 100% des Containers */
            height: 400px; /* Setzt eine feste Höhe für das iframe */
            margin-top: 20px; /* Abstand nach oben */
        }
  details#mobil_nav {
      display: block;
  }
}

/* Styles for screen widths up to 740px */
@media screen and (max-width: 740px) {

  section article[name]::before, main article[name]::before {
      width: 100%;
  }

  .scrolling_text, .buttons_sn, #notice {
      display: none;
  }

  table {
      width: 100%;
      border: 0; /* Use shorthand */
  }

  table th {
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
  }

  table tr {
      display: block;
      margin-bottom: .625em;
  }

  table td {
      width: 98%;
      display: block;
      font-size: 12px;
      text-align: right;
      border: 0;
  }

  table td::before {
      content: attr(data-label);
      float: left;
      font-size: 12px;
      color: gold;
      font-weight: bold; 
  }

  table td:last-child {
      border-bottom: none;
  }

  .grid_4, .grid_5 {
      grid-template-columns: repeat(3, auto); /* Simplified grid layout */
  }
}

/* Styles for screen widths up to 425px */
@media screen and (max-width: 425px) {

  .container, .grid_4, .grid_5 {
      grid-template-columns: repeat(2, auto); /* Two columns for smaller screens */
  }
}