/* =========================
   MOBILE / TABLET (<=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;
  }

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

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

  /* Mobile-Menü */
  details#mobil_nav {
      display: block;
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 99999;
      pointer-events: auto;
      background: rgba(0,0,0,0.85);
      border-radius: 8px;
      padding: 6px;
  }

  details#mobil_nav summary {
      cursor: pointer;
      list-style: none;
      pointer-events: auto;
      font-weight: bold;
      font-size: 16px;
      padding: 10px 14px;
      background: #222;
      color: #fff;
      border-radius: 6px;
      text-align: center;
  }

  details#mobil_nav summary::-webkit-details-marker {
      display: none;
  }

  details#mobil_nav[open] {
      min-width: 180px;
  }

  details#mobil_nav a {
      display: block;
      padding: 10px;
      margin-top: 6px;
      background: #333;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      text-align: center;
  }

  details#mobil_nav a:hover {
      background: #005555;
      color: #00ffff;
  }

  /* Medien */
  img {
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto 20px auto;
  }

  iframe {
      display: block;
      width: 100%;
      min-height: 500px;
      height: 65vw;
      max-height: 700px;
      margin-top: 20px;
      border: 0;
  }

  /* Sicherheit bei Layern */
  .train-stage {
      pointer-events: none;
      z-index: 1;
  }

  header,
  main,
  section,
  article,
  table,
  form,
  #pagination,
  footer {
      position: relative;
      z-index: 5;
  }
}


/* =========================
   MOBILE SMALL (<=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;
  }

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

  iframe {
      min-height: 420px;
      height: 75vw;
      max-height: 620px;
  }

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

  details#mobil_nav {
      top: 8px;
      right: 8px;
  }

  details#mobil_nav summary {
      font-size: 15px;
      padding: 9px 12px;
  }
}


/* =========================
   VERY SMALL (<=425px)
========================= */
@media screen and (max-width: 425px) {

  .container,
  .grid_4,
  .grid_5 {
      grid-template-columns: repeat(2, auto);
  }

  iframe {
      min-height: 360px;
      height: 85vw;
      max-height: 520px;
  }

  img {
      margin: 0 auto 15px auto;
  }

  details#mobil_nav {
      top: 6px;
      right: 6px;
      padding: 4px;
  }

  details#mobil_nav summary {
      font-size: 14px;
      padding: 8px 10px;
  }

  details#mobil_nav a {
      font-size: 14px;
      padding: 8px;
  }
}