:root {
      color-scheme: light;
      --tinte: #1b2d27;
      --leise: #68766f;
      --hintergrund: #eef2ee;
      --weiss: #ffffff;
      --linie: #d9e1db;
      --gruen: #337838;
      --gruen-hell: #dcece4;
      --koralle: #e17d5c;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--hintergrund);
      color: var(--tinte);
      font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    main {
      width: min(1440px, 100%);
      margin: 0 auto;
      padding: 10px 28px 40px;
    }

    .bereich-kopf,
    .viewer-kopf {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .logo_mobile {
      display: none;
    }

    .bereich-kopf {
      margin-bottom: 2px;
    }

    .bereich-kopf .logo img {
      display: block;
      max-height: 110px;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    h2 {
      margin: 0;
      font-size: 15px;
      font-weight: 650;
    }

    .anzahl {
      color: var(--leise);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .streifen {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      padding: 3px 2px 13px;
      scrollbar-color: #aab8af transparent;
      scrollbar-width: thin;
      scroll-snap-type: x proximity;
    }

    .aufnahme {
      display: block;
      flex: 0 0 174px;
      color: inherit;
      text-decoration: none;
      scroll-snap-align: start;
    }

    .miniatur {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 10;
      border: 2px solid transparent;
      border-radius: 5px;
      background: #d7dfd9;
      object-fit: cover;
      object-position: center bottom;
      transition: border-color 150ms ease, filter 150ms ease;
    }

    .aufnahme:hover .miniatur {
      filter: brightness(1.06);
    }

    .aufnahme[aria-current="true"] .miniatur {
      border-color: var(--gruen);
      box-shadow: 0 0 0 2px var(--gruen-hell);
    }

    .aufnahme:focus-visible {
      outline: 3px solid var(--koralle);
      outline-offset: 3px;
    }

    .bildzeit {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 2px 0;
      color: var(--leise);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .bildzeit-uhr {
      color: var(--tinte);
      font-weight: 650;
    }

    .viewer {
      margin-top: 8px;
    }

    .viewer-kopf {
      align-items: flex-end;
      margin-bottom: 2px;
    }

    .viewer-label {
      margin: 0 0 4px;
      color: var(--leise);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    #aufnahmeZeit {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 18px;
    }

    .bildrahmen {
      overflow: hidden;
      border: 1px solid #263b34;
      border-radius: 6px;
      background: #337838;
    }

    #grossesBild {
      display: block;
      width: 100%;
      height: min(68vh, 760px);
      min-height: 260px;
      object-fit: contain;
    }

    #grossesBild[hidden],
    #grosseVorhersage[hidden] {
      display: none;
    }

    .leerstand {
      padding: 42px 20px;
      border: 1px dashed #b9c7bd;
      border-radius: 5px;
      color: var(--leise);
      text-align: center;
    }

    .d-desktop {
      display: none;
    }

    .seitenfuss {
      padding: 1px 2px;
      background: var(--hintergrund);
    }

    .seitenfuss .menu--footer {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px 24px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .seitenfuss a {
      color: var(--tinte);
      text-decoration: none;
    }

    .seitenfuss a:hover,
    .seitenfuss a:focus-visible {
      text-decoration: underline;
    }

    #grossesBild[hidden],
    #grosseVorhersage[hidden] { display: none; }

    #grosseVorhersage { background: #fff; padding: 14px 0 8px; }

.vorhersage-scroll { overflow-x: auto; scrollbar-width: thin; }

.vorhersage-tabelle {
  border-collapse: separate;
  border-spacing: 3px;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
}
.vorhersage-tabelle th,
.vorhersage-tabelle td {
  min-width: 52px;
  padding: 7px 4px;
  text-align: center;
  font-size: 14px;
  border-radius: 4px;
}
.vorhersage-tabelle th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 92px;
  background: #fff;
  color: var(--leise);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.v-zeit { font-weight: 700; color: var(--tinte); }
.v-zeit small { display: block; font-size: 10px; font-weight: 500; color: var(--leise); }
.v-symbol td { font-size: 26px; padding: 2px 4px; }
.v-pfeil { display: inline-block; font-size: 18px; color: #4b6a8a; }
.vorhersage-quelle { margin: 8px 12px 0; font-size: 11px; color: var(--leise); text-align: center; }
.vorhersage-headline { margin: 8px 12px 0; font-family: Georgia, "Times New Roman", serif; font-size: 18px; color: var(--tinte); text-align: center; }

@media (max-width: 600px) {
  .vorhersage-tabelle th { min-width: 78px; font-size: 12px; }
  .vorhersage-tabelle td { min-width: 46px; font-size: 13px; }
}

    @media (min-width: 992px) {
      .d-desktop {
        display: block;
      }

      .d-desktop .contactblock {
        display: flex;
        flex-direction: row-reverse;
        position: fixed;
        z-index: 20;
        top: 0;
        right: 0;
        width: 50px;
        height: 200px;
        margin: 0;
        padding: 1rem 0 1rem 2rem;
        transition: width .5s ease, background-color .5s ease;
      }

      .d-desktop .contact-icons {
        display: flex;
        flex: 0 0 50px;
        flex-direction: column;
        justify-content: space-between;
        gap: 1.5rem;
        z-index: 101;
      }

      .d-desktop .contact-icons>div {
        padding: 10px 5px 10px 15px;
        background: #fff;
        border-radius: 50% 0 0 50%;
      }

      .d-desktop .contact-icons a {
        display: block;
        width: 30px;
        height: 30px;
        color: #575756;
      }

      .d-desktop .contact-icons svg {
        width: auto;
        height: 100%;
      }

      .d-desktop .contact-body {
        display: flex;
        flex: 0 0 220px;
        flex-direction: column;
        justify-content: center;
        visibility: hidden;
        color: #fff;
        opacity: 0;
        transition: opacity 1s ease-in-out;
      }

      .d-desktop .contact-body p {
        margin: 0 0 8px;
        font-size: 14px;
        line-height: 1.45;
      }

      .d-desktop .contact-body a {
        color: #fff;
      }

      .d-desktop .contactblock:hover,
      .d-desktop .contactblock:focus-within {
        width: 300px;
        background: #575756;
      }

      .d-desktop .contactblock:hover .contact-body,
      .d-desktop .contactblock:focus-within .contact-body {
        visibility: visible;
        opacity: 1;
      }
    }

    @media (max-width: 600px) {
      .logo_mobile img {
        display: block;
        height: 60px;
        width: auto;
        object-fit: contain;
      }
    }


    @media (max-width: 600px) {
      .logo_mobile {
        display: block;
        ;
        max-width: 100%;
        max-height: 100%;
      }

      main {
        padding: 10px 18px 30px;
      }

      .aufnahme {
        flex-basis: 148px;
      }

      #grossesBild {
        height: 56vh;
        min-height: 210px;
      }

      #aufnahmeZeit {
        font-size: 16px;
      }

      .bereich-kopf .logo {
        display: none;
      }
    }
    .zurueck {
  position: fixed;
  z-index: 20;
  left: 0;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 44px;
  height: 44px;
  padding: 0 12px;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  background: #575756;
  border-radius: 0 22px 22px 0;
  text-decoration: none;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: max-width .4s ease;
}
.zurueck svg { flex: 0 0 20px; }
.zurueck:hover,
.zurueck:focus-visible { max-width: 200px; }

@media (min-width: 992px) {
  .zurueck { top: 70px; bottom: auto; }
  main { padding-left: 56px; }
}

.v-icon { width: 44px; height: 44px; display: block; margin: 0 auto; }