/* ============================================================================
   heute im Harz — Stil
   Hell, ruhig, fürs Handy gebaut. Gäste stehen damit im Flur und suchen
   ein Ziel für den Nachmittag.
   ============================================================================ */

:root {
  --wald:      #2f5344;
  --wald-hell: #eaf1ed;
  --sand:      #f7f4ee;
  --papier:    #ffffff;
  --tinte:     #1f2a26;
  --grau:      #6b7671;
  --linie:     #e2e0d9;
  --akzent:    #c2703a;
  --radius:    14px;
  --schatten:  0 1px 2px rgba(31,42,38,.05), 0 6px 20px rgba(31,42,38,.06);
}

* { box-sizing: border-box; }

/* Eigene display-Regeln überstimmen sonst das hidden-Attribut — dann steht
   die Ortswahl beim Laden offen und die Terminliste zusätzlich zur Liste. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--tinte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.innen { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 18px; }

/* ---------------------------------------------------------------- Kopf --- */

.kopf {
  position: relative;
  background: var(--wald);          /* Rückfall, falls das Bild nicht lädt */
  background-size: cover;
  background-position: center 60%;
  color: #fff;
  padding: 54px 0 40px;
  isolation: isolate;
}
.kopf.hat-bild::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(24,42,34,.52) 0%, rgba(24,42,34,.30) 45%, rgba(24,42,34,.66) 100%);
}
/* Weniger Schleier heißt: die Schrift muss selbst tragen. */
.kopf.hat-bild h1     { text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.45); }
.kopf.hat-bild .unter,
.kopf.hat-bild .datum { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.kopf.hat-bild .unter { opacity: .95; }

.marke {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  opacity: .78;
}
.kopf h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 6vw, 38px);
  line-height: 1.15; font-weight: 700; letter-spacing: -.015em;
}
.kopf .unter { margin: 0; opacity: .88; max-width: 34em; }

.kopf-nachweis {
  margin: 24px 0 0; padding: 0 18px;
  font-size: 10.5px; line-height: 1.4;
  color: rgba(255,255,255,.72);
}
.kopf-nachweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kopf-nachweis a:hover { color: #fff; }
.kopf-nachweis:empty { display: none; }

/* -------------------------------------------------------------- Leiste --- */

.leiste {
  position: sticky; top: 0; z-index: 500;
  background: rgba(247,244,238,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
  padding: 12px 0;
}

.suche {
  display: flex; align-items: center; gap: 8px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0 14px;
  box-shadow: var(--schatten);
}
.suche:focus-within { border-color: var(--wald); }
.lupe { color: var(--grau); font-size: 19px; line-height: 1; }
.suche input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; color: inherit; padding: 12px 0; min-width: 0;
}
.suche input::-webkit-search-cancel-button { display: none; }
.leeren {
  border: 0; background: transparent; cursor: pointer;
  color: var(--grau); font-size: 22px; line-height: 1; padding: 0 2px;
}
.leeren:hover { color: var(--tinte); }

.filter { margin-top: 10px; }

.f-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Umschalter Alle / Draußen / Drinnen */
.segment {
  display: inline-flex; flex: 0 0 auto;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 999px; padding: 3px;
  box-shadow: var(--schatten);
}
.seg {
  border: 0; background: transparent; color: var(--grau);
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; transition: background .16s, color .16s;
}
.seg:hover { color: var(--tinte); }
.seg[aria-pressed="true"] { background: var(--wald); color: #fff; }

/* Auswahlliste fürs Alter */
.f-wahl {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 999px; padding: 0 6px 0 14px;
  box-shadow: var(--schatten);
}
.f-wahl-titel {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grau); white-space: nowrap;
}
.f-wahl select {
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 14px; color: inherit;
  padding: 9px 8px 9px 0; cursor: pointer; max-width: 11em;
}
.f-wahl select.aktiv { font-weight: 600; color: var(--wald); }

.f-reset {
  border: 0; background: transparent; color: var(--grau);
  font: inherit; font-size: 13.5px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px;
}
.f-reset:hover { color: var(--tinte); }

/* „Überrasch mich“ steht als eigene Pille hinter den Filtern — gleiche Form,
   aber leiser: es filtert nichts, es sucht nur etwas aus. */
.f-zufall {
  flex: 0 0 auto;
  background: var(--papier);
  border: 1px dashed var(--linie);
  border-radius: 999px; padding: 9px 16px;
  font: inherit; font-size: 14px; color: var(--grau);
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--schatten);
  transition: border-color .15s, color .15s;
}
.f-zufall:hover { border-color: var(--wald); color: var(--wald); }
.chip {
  flex: 0 0 auto;
  border: 1px solid var(--linie); background: var(--papier); color: var(--tinte);
  border-radius: 999px; padding: 7px 13px;
  font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--wald); }
.chip[aria-pressed="true"] { background: var(--wald); border-color: var(--wald); color: #fff; }


/* ------------------------------------------------------------ Landkarte --- */

.kartenbereich { margin: 4px 0 22px; }
.landkarte {
  height: 62vh; min-height: 340px; max-height: 620px;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
  background: var(--wald-hell);
  z-index: 1;                      /* unter der klebenden Suchleiste */
}
.karte-hinweis {
  margin: 9px 2px 0;
  font-size: 11.5px; line-height: 1.45; color: var(--grau);
}

/* --------------------------------------------------------------- Liste --- */

main { padding-bottom: 40px; }

.anzahl { margin: 20px 0 12px; font-size: 14px; color: var(--grau); }

.liste { display: grid; gap: 16px; }

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
  transition: box-shadow .3s, border-color .3s;
}
.karte.gezogen {
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(194,112,58,.22), var(--schatten);
}

/* Bild mit Nachweis — die Nennung gehört sichtbar ans Bild */
.bild { margin: 0; background: var(--wald-hell); }
.bild img { display: block; width: 100%; height: 190px; object-fit: cover; }
.bild figcaption {
  padding: 7px 18px 0;
  font-size: 11px; line-height: 1.45; color: var(--grau);
}
.bild .motiv { color: var(--tinte); }
.bild a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bild a:hover { color: var(--wald); }
/* Titel über dem Bild — nur auf dem Handy sichtbar, dort ist das Bild die
   erste Wischseite und braucht eine Beschriftung. */
.bild-ueber { display: none; }

.bild-leer {
  position: relative;
  background: linear-gradient(160deg, var(--wald-hell), #dde7e1);
  min-height: 190px;
}

/* Sicherheitsnetz: sehr lange Namen dürfen die Kartenhöhe nicht sprengen */
.bild-titel {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------- Wischen (Handy) --- */
/* Die Karte wird zum waagerechten Wischbereich mit zwei Seiten:
   links Bild mit Titel, rechts alles Weitere. Reines CSS, kein Skript —
   das Wischen macht der Browser selbst und fühlt sich deshalb richtig an. */

@media (max-width: 639px) {
  /* Alle Karten gleich hoch — sonst hüpft die Liste beim Scrollen, und beim
     Wischen wechselt die Höhe mitten in der Bewegung. */
  .karte:not(.laden):not(.termin) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    height: clamp(440px, 68vh, 560px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .karte:not(.laden):not(.termin)::-webkit-scrollbar { display: none; }

  .karte:not(.laden):not(.termin) > .bild,
  .karte:not(.laden):not(.termin) > .inhalt {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100%;
    min-height: 0;
  }

  /* Bildseite füllt die ganze Karte */
  .bild { position: relative; overflow: hidden; }
  .bild img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }

  /* Der Nachweis muss sichtbar bleiben — auf dem Bild oben, mit Schleier */
  .bild figcaption {
    position: absolute; top: 0; left: 0; right: 0;
    padding: 9px 16px 16px;
    background: linear-gradient(180deg, rgba(24,42,34,.72) 0%, rgba(24,42,34,0) 100%);
    color: rgba(255,255,255,.9);
    font-size: 10.5px;
  }
  .bild figcaption .motiv { color: #fff; }
  .bild figcaption a { color: inherit; }
  .bild figcaption a:hover { color: #fff; }

  /* Textseite scrollt notfalls in sich — die meisten Karten passen ohne.
     Gilt nur für die Wischkarten; Läden und Termine wachsen mit dem Text. */
  .karte:not(.laden):not(.termin) > .inhalt {
    display: flex; flex-direction: column;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  .karte:not(.laden):not(.termin) .mehr { margin-top: auto; }

  .bild-ueber {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 48px 16px 16px;
    background: linear-gradient(180deg, rgba(24,42,34,0) 0%, rgba(24,42,34,.85) 62%);
    color: #fff;
  }
  .bild-leer .bild-ueber {
    background: linear-gradient(180deg, rgba(24,42,34,0) 0%, rgba(47,83,68,.9) 62%);
  }
  .bild-titel {
    font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
  }
  .wisch-hinweis {
    font-size: 12px; font-weight: 600; opacity: .85;
    animation: winken 2.6s ease-in-out 1.2s 3;
  }
  @keyframes winken {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .wisch-hinweis { animation: none; }
  }

  /* Der Titel steht schon über dem Bild — auf der zweiten Seite reicht er klein */
  .karte-kopf h2 { font-size: 17px; color: var(--grau); font-weight: 600; }
}

.karte-kopf { padding: 14px 18px 0; }
.karte h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.kurz { margin: 0 0 12px; }

.marken { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.marke-chip {
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  background: var(--wald-hell); color: var(--wald);
  border-radius: 999px; padding: 4px 10px;
}
.marke-chip.neutral { background: #f1efe9; color: var(--grau); }
.marke-chip.weit    { background: rgba(194,112,58,.12); color: var(--akzent); }

.fakten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 18px; padding: 14px 18px;
  border-top: 1px solid var(--linie); background: #fcfbf8;
  font-size: 14px; margin: 0;
}
.fakt dt {
  margin: 0; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grau);
}
.fakt dd { margin: 2px 0 0; }

.knoepfe {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 18px; border-top: 1px solid var(--linie);
}
.knopf {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--linie); border-radius: 10px;
  padding: 10px 14px; font-size: 14px; font-weight: 600;
  text-decoration: none; color: var(--tinte); background: var(--papier);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.knopf:hover { background: #f5f2ec; border-color: #cfccc3; }
.knopf.haupt { background: var(--wald); border-color: var(--wald); color: #fff; }
.knopf.haupt:hover { background: #26443a; }

/* Wohin die Navigation tatsächlich führt — steht unter den Knöpfen, damit
   niemand am falschen Ende des Geländes ankommt. */
.park {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 12.5px; line-height: 1.45; color: var(--grau);
}
.park strong { color: var(--tinte); font-weight: 600; }

.mehr { border-top: 1px solid var(--linie); }
.mehr summary {
  list-style: none; cursor: pointer;
  padding: 13px 18px; font-size: 14px; font-weight: 600; color: var(--wald);
  display: flex; align-items: center; gap: 7px;
}
.mehr summary::-webkit-details-marker { display: none; }
.mehr summary::after { content: "▾"; font-size: 12px; transition: transform .15s; }
.mehr[open] summary::after { transform: rotate(180deg); }
.mehr-inhalt { padding: 0 18px 18px; }
.mehr-inhalt p { margin: 0 0 12px; }
.mehr-inhalt h3 {
  margin: 16px 0 6px; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--grau);
}
.mehr-inhalt ul { margin: 0; padding-left: 20px; }
.mehr-inhalt li { margin-bottom: 5px; }

.leermeldung { text-align: center; color: var(--grau); padding: 40px 10px; }

/* ----------------------------------------------------------------- Fuß --- */

.fuss {
  border-top: 1px solid var(--linie);
  padding: 24px 0 34px; font-size: 13px; color: var(--grau);
}
.fuss p { margin: 0 0 6px; }
.stand { opacity: .75; }

/* ------------------------------------------------------- ab Tablet/Desk --- */
/* Bild links ein Drittel, Text rechts zwei Drittel. Darunter bleibt es
   gestapelt — auf dem Handy ist ein Drittel Breite zu wenig für ein Bild. */

@media (min-width: 640px) {
  .karte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: stretch;
  }
  /* Das Bild bekommt ein festes Querformat statt sich über die ganze
     Kartenhöhe zu strecken. Vorher wurde ein Querfoto in einen hochkanten
     Rahmen gezwungen — bei der Brockenbahn waren nur 40 % der Bildbreite zu
     sehen. Jetzt bleibt fast das ganze Bild erhalten. */
  .bild {
    display: flex; flex-direction: column;
    justify-content: flex-start;
    border-right: 1px solid var(--linie);
    background: var(--papier);      /* Rest der Spalte bleibt unsichtbar */
    min-height: 100%;
  }
  .bild img {
    flex: 0 0 auto;
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--wald-hell);   /* Platzhalter, solange es lädt */
  }
  .bild figcaption { padding: 7px 12px 11px; }
  .bild-leer {
    display: block;
    background: linear-gradient(160deg, var(--wald-hell), #dde7e1);
  }
  .inhalt { display: flex; flex-direction: column; min-width: 0; }
  .karte-kopf { padding-top: 18px; }
  .mehr { margin-top: auto; }
  .karte h2 { font-size: 22px; }
}

/* ============================================================================
   Wetter-Ortswahl, Termine und das Aufklappmenü fürs Handy
   ============================================================================ */

/* Hebt den Regentag-Knopf hervor, wenn es tatsächlich regnet */
.m-knopf.empfohlen {
  border-color: var(--akzent);
  box-shadow: 0 0 0 2px rgba(194,112,58,.28);
}

/* --- Ortswahl ------------------------------------------------------------ */

.ort-schicht {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(24,42,34,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ort-feld {
  background: var(--papier);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(18,38,84,.28);
  padding: 20px; width: 100%; max-width: 380px;
}
.ort-kopf { margin: 0 0 14px; font-weight: 700; font-size: 17px; }
.ort-liste { display: grid; gap: 7px; margin-bottom: 16px; }
.ort-knopf {
  border: 1px solid var(--linie); background: var(--papier); color: var(--tinte);
  border-radius: 10px; padding: 11px 14px;
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ort-knopf:hover { background: #f5f2ec; border-color: #cfccc3; }
.ort-knopf.aktiv { background: var(--wald); border-color: var(--wald); color: #fff; }
.ort-zu { width: 100%; justify-content: center; }

/* --- Termine ------------------------------------------------------------- */

.karte.termin { display: block; height: auto; overflow: visible; }
.termin-wann {
  margin: 0 0 4px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--akzent);
}
.ungefaehr {
  font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--grau); font-size: 11.5px;
}





/* ============================================================================
   Pillenleiste, Sprachumschalter und Vollbildmenü
   ----------------------------------------------------------------------------
   Die Pille schwebt oben und bleibt beim Scrollen stehen. Auf großen Schirmen
   trägt sie das Menü, auf dem Handy nur den Burger.
   ============================================================================ */

:root { --pille-hoehe: 76px; }

.pille-halter {
  position: sticky; top: 0; z-index: 900;
  padding: 14px 16px;
  pointer-events: none;              /* nur die Pille selbst fängt Klicks */
}
.pille {
  pointer-events: auto;
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 1120px; margin: 0 auto;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(31,42,38,.06);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(31,42,38,.06), 0 10px 30px rgba(31,42,38,.10);
  padding: 9px 12px 9px 22px;
}
.pille-marke {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: inherit;
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--wald); white-space: nowrap;
}
.pille-rechts { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* --- Sprachumschalter ---------------------------------------------------- */

.sprache {
  display: inline-flex; align-items: center;
  background: #f1efe9; border-radius: 999px; padding: 3px;
}
.sp-knopf {
  border: 0; background: transparent; color: var(--grau);
  border-radius: 999px; padding: 5px 11px;
  font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; transition: background .15s, color .15s;
}
.sp-knopf:hover { color: var(--tinte); }
.sp-knopf[aria-pressed="true"] { background: var(--wald); color: #fff; }

/* --- Wetter in der Pille ------------------------------------------------- */

.wetter {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--linie); background: var(--papier); color: var(--tinte);
  border-radius: 999px; padding: 7px 13px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.wetter:hover { background: #f5f2ec; border-color: #cfccc3; }
.w-zeichen { font-size: 15px; line-height: 1; }
.w-ort     { color: var(--grau); font-weight: 500; }
.w-morgen  { color: var(--grau); font-weight: 500; border-left: 1px solid var(--linie); padding-left: 7px; }
.wetter-lade { color: var(--grau); font-weight: 500; }

/* --- Menü in der Pille (große Schirme) ----------------------------------- */

.menue-schicht { display: flex; min-width: 0; }
.menue-inhalt  { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.m-gruppe      { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.m-gruppe + .m-gruppe {
  margin-left: 4px; padding-left: 12px;
  border-left: 1px solid var(--linie);
}
.m-titel { display: none; }          /* in der Pille wäre die Beschriftung zu viel */

.m-knopf {
  border: 1px solid transparent; background: transparent; color: var(--tinte);
  border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.m-knopf:hover { background: #f5f2ec; }
.m-knopf[aria-pressed="true"] { background: var(--wald); color: #fff; }
.m-knopf.laedt { opacity: .6; cursor: progress; }
.m-knopf.empfohlen { border-color: var(--akzent); }
.menue-fuss { display: none; }

.burger { display: none; }

/* Der Kopf beginnt unter der Pille */
.kopf { padding-top: calc(var(--pille-hoehe) + 26px); margin-top: calc(var(--pille-hoehe) * -1); }
/* Die Suchleiste klebt unter der Pille, nicht darunter durch */
.leiste { top: var(--pille-hoehe); z-index: 500; }

@media (prefers-reduced-motion: reduce) {
  .burger-strich, .burger-strich::before, .burger-strich::after,
  .menue-schicht, .menue-schicht .m-gruppe { transition: none; }
}

/* Die Pille darf nie überlaufen — sonst wird auf schmalen Geräten der Burger
   nach rechts aus dem Bild geschoben. Die Marke und das Wetter geben nach,
   der Burger nie. */
.pille { flex-wrap: nowrap; min-width: 0; }
.pille-marke { min-width: 0; }
.pille-rechts { flex-shrink: 0; min-width: 0; }
.wetter {
  min-width: 0; flex-shrink: 1;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.burger { flex-shrink: 0; }

@media (max-width: 767px) {
  /* Auf dem Handy zeigt das Wetter nur Zeichen und Grad — mehr passt nicht,
     und bei einer Fehlermeldung würde der Text die Leiste sprengen. */
  .wetter { max-width: 88px; }
  .wetter-lade { display: inline-block; max-width: 62px; overflow: hidden; text-overflow: ellipsis; }
  .pille-marke { max-width: 48vw; }
}

/* Die Pille muss undurchsichtig sein — bei 96 % schimmerten beim Scrollen
   die Bilder darunter durch. */
.pille { background: #fff; }


/* ------------------------------------------------------------- Logo ------ */

.logo { width: 28px; height: 28px; flex: 0 0 auto; color: var(--wald); display: block; }
.marke-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------- Rechtliches im Fuß --- */

/* Rechtliches und Stand teilen sich eine Zeile: Links außen, Datum rechts. */
.fuss-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 18px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.fuss-links { display: flex; flex-wrap: wrap; gap: 18px; }
.fuss-zeile .stand { margin: 0; text-align: right; }
.fuss-links a {
  color: var(--tinte); font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px;
}
.fuss-links a:hover { color: var(--wald); }

/* --------------------------------------------- Impressum / Datenschutz --- */

.recht-kopf { background: var(--wald); color: #fff; padding: 26px 0 22px; }
.recht-kopf h1 { margin: 10px 0 0; font-size: clamp(24px, 5vw, 32px); line-height: 1.2; }
.zurueck { color: rgba(255,255,255,.85); font-size: 14px; text-decoration: none; }
.zurueck:hover { color: #fff; text-decoration: underline; }

.recht { padding-top: 26px; padding-bottom: 48px; max-width: 720px; }
.recht h2 { margin: 34px 0 8px; font-size: 20px; }
.recht h3 { margin: 22px 0 6px; font-size: 16px; }
.recht p  { margin: 0 0 12px; }
.recht a  { color: var(--wald); }

.anleitung {
  background: #fff6ec;
  border: 1px solid #eccfae;
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.anleitung p:last-child { margin-bottom: 0; }


/* ============================================================================
   Pille auf großen Schirmen — strikt einreihig
   Vorher brach das Menü um und machte die Pille doppelt hoch; die Marke wurde
   dabei abgeschnitten. Jetzt trägt sie nur noch die drei Ansichten.
   ============================================================================ */

@media (min-width: 768px) {
  .pille { flex-wrap: nowrap; }
  .menue-schicht { flex: 0 0 auto; }
  .menue-inhalt  { flex-wrap: nowrap; }
  .m-gruppe      { display: flex; align-items: center; gap: 2px; }
  .m-titel       { display: none; }        /* „Ansicht“ erklärt sich von selbst */
  .pille-marke   { flex: 0 0 auto; }
  .marke-text    { max-width: none; }
}

.install {
  border: 1px solid var(--wald); background: var(--wald); color: #fff;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.install:hover { background: #26443a; }

/* ============================================================================
   Handy: untere Leiste wie in einer App, Filter im Blatt
   ============================================================================ */

.tableiste { display: none; }
.blatt, .blatt-grund { display: none; }

@media (max-width: 767px) {
  :root { --tab-hoehe: 60px; }

  /* Die Pille trägt nur noch Marke, Sprache und Wetter. */
  .menue-schicht { display: none; }
  .pille { padding: 8px 10px 8px 16px; }
  .pille-marke { font-size: 14px; gap: 8px; max-width: 52vw; }
  .logo { width: 26px; height: 26px; }
  .w-ort, .w-morgen { display: none; }
  .wetter { padding: 7px 11px; max-width: 88px; }
  .install { display: none; }        /* Installation läuft übers Blatt-Menü */

  /* Suchleiste: nur noch die Suche. Der Filter sitzt unten. */
  .filter { margin-top: 0; }
  .leiste { padding: 10px 0; }

  main { padding-bottom: calc(var(--tab-hoehe) + 28px); }

  .tableiste {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: #fff;
    border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 14px rgba(31,42,38,.07);
  }
  .tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: var(--tab-hoehe);
    border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: 11px; font-weight: 500;
    color: var(--grau); -webkit-tap-highlight-color: transparent;
  }
  .tab-bild {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .tab[aria-pressed="true"], .tab[aria-expanded="true"] { color: var(--wald); }
  .tab[aria-pressed="true"] .tab-bild { stroke-width: 2.2; }
  .tab-punkt {
    position: absolute; top: 9px; right: 50%; margin-right: -16px;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--akzent);
  }

  /* Filterblatt */
  .blatt-grund {
    display: block; position: fixed; inset: 0; z-index: 1300;
    background: rgba(20,28,25,.42);
  }
  .blatt {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400;
    background: var(--papier);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(31,42,38,.22);
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    max-height: 78vh; overflow-y: auto;
    transform: translateY(100%);
    transition: transform .24s cubic-bezier(.25,1,.5,1);
  }
  .blatt.offen { transform: none; }
  .blatt-griff {
    width: 38px; height: 4px; border-radius: 2px;
    background: var(--linie); margin: 4px auto 10px;
  }
  .blatt-kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
  }
  .blatt-kopf h2 { margin: 0; font-size: 17px; }
  .blatt-zu {
    border: 0; background: transparent; color: var(--wald);
    font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 6px 2px;
  }
  body.blatt-offen { overflow: hidden; }

  /* Im Blatt steht alles untereinander und großzügig antippbar. */
  .blatt .f-zeile { display: grid; gap: 12px; }
  .blatt .segment { width: 100%; }
  .blatt .seg { flex: 1; text-align: center; padding: 10px 8px; }
  .blatt .f-wahl { width: 100%; justify-content: space-between; padding: 0 10px 0 16px; }
  .blatt .f-wahl select { flex: 1; max-width: none; text-align: right; padding: 13px 4px; }
  .blatt .f-zufall {
    width: 100%; padding: 14px 12px; font-size: 15px;
    margin-top: 4px;
  }
  .blatt .f-reset { justify-self: center; }
}

@media (display-mode: standalone) {
  /* Installiert: die Seite ist die App, ein Installationsknopf wäre unsinnig. */
  .install { display: none !important; }
}

/* ============================================================================
   Kopfzeile — auf dem Handy tragen Datum, Wetter und Sprache sie gemeinsam
   ============================================================================ */

.kopf-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kopf-zeile .datum { margin: 0; }

@media (max-width: 767px) {
  /* Die Pille entfällt vollständig: Ansichten stehen unten in der Leiste,
     Wetter und Sprache sind in den Kopf gezogen. Das Bild beginnt dadurch
     ganz oben, wie in einer App. */
  .pille-halter { display: none; }
  .kopf { margin-top: 0; padding-top: 34px; }

  /* Das Datum stand über der Überschrift und hat nur Platz gekostet — welcher
     Tag heute ist, weiß der, der davorsteht. */
  .kopf-zeile { display: none; }
  .kopf { padding-top: 58px; }        /* Luft für die Wetterecke darüber */

  /* Wetter in die obere rechte Ecke, über dem Bild. */
  .kopf-ecke {
    position: absolute; z-index: 2;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 14px;
  }
  .kopf-ecke .wetter {
    max-width: none;
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.32);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: none;
  }
  /* Der Ortsname ist sonst Grau auf Papier — hier steht er auf dem Foto. */
  .kopf-ecke .w-ort { display: inline; color: rgba(255,255,255,.85); }
  .kopf-ecke .wetter-lade { max-width: none; color: #fff; }

  /* Die Sprachwahl steht im Mehr-Blatt: einmal umgestellt, dann nie wieder
     gebraucht — dafür muss sie nicht dauerhaft Platz belegen. */
  .mehr-sprache .sprache { width: 100%; padding: 4px; }
  .mehr-sprache .sp-knopf { flex: 1; padding: 11px 0; font-size: 15px; }
}

/* ============================================================================
   Einladung zur Installation
   Nur auf dem Handy, nur solange die Seite nicht schon als App läuft.
   Auf Android steht dort ein Knopf, auf iOS die Anleitung — dort gibt es
   keinen Weg, den eine Seite selbst auslösen könnte.
   ============================================================================ */

.einladung { display: none; }
.blatt-install { display: none; }

@media (max-width: 767px) {
  .einladung {
    position: fixed; left: 10px; right: 10px;
    bottom: calc(var(--tab-hoehe) + env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 1250;
    display: flex; align-items: center; gap: 12px;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: 16px;
    padding: 11px 12px;
    box-shadow: 0 6px 26px rgba(31,42,38,.18);
  }
  .einladung[hidden] { display: none !important; }
  .einladung-bild { border-radius: 10px; flex: 0 0 auto; }
  .einladung-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
  .einladung-text strong { font-size: 14px; line-height: 1.25; }
  .einladung-text span   { font-size: 12.5px; line-height: 1.35; color: var(--grau); }
  .einladung-knoepfe { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
  .einladung-ja {
    border: 0; background: var(--wald); color: #fff;
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 9px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  }
  .einladung-weg {
    border: 0; background: transparent; color: var(--grau);
    font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px;
  }
  /* Kurz hervorheben, wenn die Anleitung aus dem Menü heraus gerufen wurde */
  .einladung.hebt { animation: einladungHebt 2.2s ease; }
  @keyframes einladungHebt {
    0%, 100% { box-shadow: 0 6px 26px rgba(31,42,38,.18); }
    18%, 60% { box-shadow: 0 0 0 3px rgba(194,112,58,.35), 0 6px 26px rgba(31,42,38,.18); }
  }

  /* Steht die Einladung, braucht die Liste unten mehr Luft */
  body.hat-einladung main { padding-bottom: calc(var(--tab-hoehe) + 104px); }

  .blatt-install {
    display: block; width: 100%;
    margin-top: 14px; padding: 13px 12px;
    border: 1px solid var(--wald); background: var(--wald); color: #fff;
    border-radius: 12px; font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer;
  }
  .blatt-install[hidden] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .einladung.hebt { animation: none; }
}

/* ============================================================================
   Mehr-Blatt — Rechtliches, Installation, später die Anmeldung
   ============================================================================ */

.mehr-gruppe, .mehr-fuss, .mehr-stand { display: none; }

@media (max-width: 767px) {
  /* Fünf Reiter: die Beschriftung braucht etwas weniger Platz. */
  .tab { font-size: 10.5px; gap: 2px; }
  .tab-bild { width: 21px; height: 21px; }

  .mehr-gruppe { display: grid; gap: 2px; margin-top: 18px; }
  .mehr-titel {
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--grau); margin-bottom: 4px;
  }
  .mehr-zeile {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px;
    border-bottom: 1px solid var(--linie);
    color: var(--tinte); text-decoration: none; font-size: 16px;
  }
  .mehr-zeile:last-child { border-bottom: 0; }
  .mehr-pfeil { color: var(--grau); font-size: 20px; line-height: 1; }

  .mehr-fuss {
    display: block; margin: 20px 0 0;
    font-size: 12.5px; line-height: 1.5; color: var(--grau);
  }
  .mehr-stand {
    display: block; margin: 6px 0 0;
    font-size: 12px; color: var(--grau); opacity: .8;
  }

  /* Auf dem Handy stehen Hinweise und Stand im Mehr-Blatt — im Fuß wären
     sie doppelt, und der Fuß liegt hinter 26 Karten. */
  .fuss-zeile .stand { display: none; }
  .fuss-text { display: none; }
  .fuss { padding-top: 4px; }

  .mehr-gruppe .mehr-fuss { margin: 0 0 10px; }
  .mehr-gruppe .mehr-fuss:last-child { margin-bottom: 0; }
}

/* Die Ecke oben rechts gibt es nur auf dem Handy — auf großen Schirmen sitzt
   das Wetter in der Pille. */
.kopf-ecke:empty { display: none; }


/* Die Wetterecke gibt es nur auf dem Handy — sonst sitzt das Wetter in der Pille. */
.kopf-ecke:empty { display: none; }

/* Die Textfassung für Crawler ohne JavaScript — schlicht, aber lesbar, falls
   sie doch einmal jemand zu Gesicht bekommt. */
.ohne-js { padding-top: 24px; padding-bottom: 40px; }
.ohne-js h2 { margin: 0 0 6px; font-size: 20px; }
.ohne-js h3 { margin: 26px 0 4px; font-size: 17px; }
.ohne-js p  { margin: 0 0 6px; }
.ohne-js a  { color: var(--wald); }

/* Kopf der Rechtsseiten: Zurück-Link links, Sprachumschalter rechts. */
.recht-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.recht-zeile .sprache {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.30);
}
.recht-zeile .sp-knopf { color: rgba(255,255,255,.78); }
.recht-zeile .sp-knopf[aria-pressed="true"] { background: #fff; color: var(--wald); }

/* ============================================================================
   Einkaufen und einheitlicher Kopf auf allen Seiten
   ============================================================================ */

/* Filterknopf neben der Suche — ersetzt den früheren Reiter unten. */
.such-filter { display: none; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.quelle-hinweis {
  margin: 18px 2px 0; font-size: 12px; line-height: 1.5; color: var(--grau);
}
.quelle-hinweis[hidden] { display: none !important; }

/* Der aktive Reiter — früher aria-pressed, jetzt sind es Links. */
.m-knopf[aria-current="page"] { background: var(--wald); color: #fff; }
.tab[aria-current="page"] { color: var(--wald); }
.tab[aria-current="page"] .tab-bild { stroke-width: 2.2; }
.tab { text-decoration: none; }

/* Die Rechtsseiten tragen jetzt dieselbe Pille wie die Startseite. */
.recht-kopf { padding-top: calc(var(--pille-hoehe) + 18px); margin-top: calc(var(--pille-hoehe) * -1); }

@media (max-width: 767px) {
  .such-filter {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 46px; height: 46px;
    border: 1px solid var(--linie); background: var(--papier);
    border-radius: 50%; cursor: pointer; color: var(--wald);
    box-shadow: var(--schatten);
  }
  .such-filter svg {
    width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round;
  }
  .such-filter[aria-expanded="true"] { background: var(--wald); color: #fff; border-color: var(--wald); }
  .such-filter .tab-punkt { top: 6px; right: 6px; margin-right: 0; }

  /* Suche und Filterknopf teilen sich eine Zeile. */
  .leiste .innen { display: flex; align-items: center; gap: 10px; }
  .leiste .suche { flex: 1; min-width: 0; }

  /* Auf dem Handy gibt es keine Pille — der Kopf beginnt am oberen Rand. */
  .recht-kopf { padding-top: 42px; margin-top: 0; padding-bottom: 22px; }
  .recht { padding-bottom: calc(var(--tab-hoehe) + 40px); }
  main { padding-bottom: calc(var(--tab-hoehe) + 28px); }
}

/* Einkaufskarten sind schlichter als Ausflugsziele — kein Bild, kein Parkplatz. */
.karte.laden .karte-kopf { padding-top: 18px; }

/* Überschrift und Text der Rechtsseiten stehen auf derselben Kante — der Kopf
   nutzte die volle Breite, der Text nur 720 px, das sah verrutscht aus. */
.recht-kopf .innen { max-width: 720px; }

/* ============================================================================
   Einkaufskarten: kompakter als Ausflugsziele
   Kein Bild, kurzer Text — auf breiten Schirmen passen zwei nebeneinander,
   sonst steht eine einzelne Karte allein auf 940 Pixeln Breite.
   ============================================================================ */

.karte.laden .karte-kopf { padding: 16px 18px 0; }
.karte.laden h2 { font-size: 18px; }
.karte.laden .kurz { margin-bottom: 10px; font-size: 15px; }
.karte.laden .fakten { padding: 12px 18px; }
.karte.laden .knoepfe { padding-top: 12px; }

@media (min-width: 768px) {
  #einkaufsliste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  /* Auf zwei Spalten ist weniger Platz — die Knöpfe brechen sonst hässlich um. */
  .karte.laden .knopf { font-size: 13.5px; padding: 8px 12px; }
  .karte.laden .fakten { grid-template-columns: 1fr; }
}

/* ============================================================================
   Kopf der Unterseiten trägt dasselbe Bild wie die Startseite
   ============================================================================ */

.recht-kopf {
  position: relative;
  background: var(--wald);
  background-size: cover;
  background-position: center 55%;
  color: #fff;
  isolation: isolate;
  padding-bottom: 26px;
}
.recht-kopf.hat-bild::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(24,42,34,.58) 0%, rgba(24,42,34,.38) 45%, rgba(24,42,34,.72) 100%);
}
.recht-kopf.hat-bild h1 { text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.45); }
.recht-kopf .kopf-nachweis { max-width: 940px; margin: 18px auto 0; }


/* ============================================================================
   Einkaufskarten: gleiche Höhe, Text bleibt drin
   Sie hatten die Wischkarten-Regeln der Ausflugsziele geerbt — feste Höhe und
   waagerechtes Wischen. Ohne Bild hieß das: abgeschnittener Text und kein
   Scrollen. Läden und Termine sind davon jetzt ausgenommen.
   ============================================================================ */

.karte.laden {
  display: flex; flex-direction: column;
  height: auto; overflow: visible;
}
.karte.laden > .inhalt {
  display: flex; flex-direction: column; flex: 1;
  overflow: visible;
}
/* Die Knöpfe stehen unten bündig, egal wie lang der Text darüber ist. */
.karte.laden .knoepfe { margin-top: auto; }
.karte.laden .mehr { margin-top: 0; }

@media (min-width: 768px) {
  /* stretch statt start: beide Kacheln einer Reihe werden gleich hoch. */
  #einkaufsliste { align-items: stretch; }
}