/* ==========================================================================
   Camping an der Rudelsburg – Gäste-App · Design-System 2027
   Mobile first · Standard „Saale Day“: Weiß und kühles Off-White mit Cyan-Akzenten (wie campingbadkoesen.de),
   Dunkelmodus „Forest Night“ (Waldgrün) nur auf Wunsch
   Große Schrift & Tippflächen (ab 48 px) · Text-Kontraste nach WCAG AAA (≥ 7 : 1)
   Animationen je nach Gerät: html[data-motion="full" | "lite" | "off"] (motion.js)
   ========================================================================== */

/* ---------- Schrift: Fraunces (SIL OFL) für Überschriften, Systemschrift für Text ---------- */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design-Tokens ----------
   Drei Ebenen:
   1. Rohwerte – feste Farben, in beiden Modi gleich (Titelbild, Lageplan, Themen-Verläufe, Footer, Ampel).
   2. Rollen – je Modus eigener Wert: „Saale Day“ (hell, Standard, auf :root) und „Forest Night“
      (<html data-theme="dark">, nur bei ausdrücklicher Wahl). Das Kopf-Skript in index.html setzt data-theme vor dem
      ersten Bild (Profil: Hell / Dunkel / Automatisch; ohne Wahl immer Hell).
   3. Brücke – die bisherigen Namen (--ink, --line, --green-100 …) zeigen auf Rollen; die Bausteine bleiben gleich.
   Bausteine nutzen nur Rollen bzw. Brücken-Namen, feste Werte nur auf festen Flächen (Titelbild, Lageplan, Footer). */

:root {
  /* 1 · Rohwerte (fest) */
  --forest-900: #1e3f20;       /* Tiefes Waldgrün – Footer, Schilder auf dem Lageplan */
  --forest-700: #2d5a27;       /* Naturgrün – Lageplan-Punkte, Bild-Platzhalter */
  --saale-blue: #2a7b9b;       /* Flussblau – Termine, Service-Punkte im Lageplan */
  --accent-amber: #e07a5f;     /* Terrakotta (dekorativ) */
  --amber-600: #b84f35;
  --amber-700: #a9472e;
  --gold: #d4a373;             /* Sterne, Akzente */
  --map-paper: #ffffff;        /* Lageplan bleibt in beiden Modi im Original */
  --soot-900: #161a17;         /* Symbol auf gelber Ampel */
  /* Ampel-Flächen (Punkte, Zeitstrahl, Ampel) – immer zusätzlich mit Symbol oder Text */
  --ok: #2e8540;
  --warn: #e3a008;
  --stop: #c8372d;
  --info: #2a7b9b;
  --stop-fill: #8f2219;        /* Notfall-Taste, rote Notruf-Karte, mit weißer Schrift (8,7 : 1) */
  --stop-fill-hover: #75190f;
  /* Referenz campingbadkoesen.de (UiCore-Tokens) – Grundlage von „Saale Day“ */
  --ref-primary: #10b1b6;      /* Cyan: Buttons, Symbole, aktive Zustände, Hervorhebungen */
  --ref-light: #f8fcfc;        /* kühles Off-White für Flächen */
  --ref-headline: #151515;
  --ref-body: #6e7a84;         /* Schiefergrau: auf Weiß nur 4,4 : 1 – hier für Kanten, nicht für Text */
  --ref-secondary: #43555f;    /* dunkles Schiefergrau: Sekundärtext (7,5 : 1) */
  --ref-accent: #d18d34;       /* Ocker/Gold: warmer Akzent */

  /* 2 · Rollen – Saale Day (Standard): weiße Seite, Kästchen in sanftem Blau als Kontrast, gezielte Cyan-Akzente,
     Schiefer statt Grün. In den blauen Kästchen sind Symbol-Kacheln und Eingabefelder weiß.
     Cyan #10b1b6 erreicht mit weißer Schrift nur 2,6 : 1 – Flächen in Cyan tragen deshalb fast schwarze Schrift
     (7,2 : 1); Schrift in Cyan-Tönen nutzt das tiefe Cyan --accent. Kontrast gegen --bg in Klammern */
  color-scheme: light;
  --bg: #ffffff;               /* Seitenhintergrund: Weiß wie die Website */
  --surface: #ffffff;          /* Kopfzeile, Dock, Sheets, Bedienelemente (Chips, Felder, Buttons) */
  --card: #e3f3f5;             /* Kästchen: Karten, Kacheln, Listen, Status-Leiste – sanftes Blau */
  --tile: #ffffff;             /* Symbol-Kacheln in den Kästchen */
  --tile-soft: #ffffff;
  --tile-blue: #ffffff;
  --tile-gold: #ffffff;
  --tile-amber: #ffffff;
  --surface-2: #d2e9ec;        /* Umschalter, Schließen-Tasten */
  --surface-3: #bddde1;
  --surface-raised: #ffffff;   /* gewählte Taste im Umschalter */
  --surface-inverse: #2f3e46;  /* Toast, Preis-Leiste, „Mein Platz“: tiefes Schiefer, weiße Schrift (11 : 1) */
  --on-inverse: #ffffff;
  --on-inverse-muted: rgb(255 255 255 / .85);
  --inverse-accent: #f3c27e;   /* helles Ocker */
  --surface-deep: var(--card); /* Footer: sanftes Blau wie die Kästchen */
  --selected: var(--ref-primary);  /* gewählte Chips (Filter, aktuelles Thema) */
  --on-selected: #0b1314;      /* (7,2 : 1) */
  --on-selected-muted: var(--on-selected); /* auf Cyan keine Abstufung – sonst unter 7 : 1 */

  --text: #23323a;             /* dunkles Schiefer – Fließtext (12,8 : 1) */
  --text-muted: #384850;       /* Schiefergrau – Teaser, Beschriftungen (9,5 : 1; auf Kästchen 8,3 : 1) */
  --heading: #151515;          /* Headline-Farbe der Website (18,3 : 1) */
  --accent: #064a4c;           /* tiefes Cyan: Links, Text-Akzente, Fokus-Rahmen von Feldern (10 : 1) */
  --accent-bright: #0b8a8e;    /* Symbole, Fortschritt, Hervorhebungs-Ringe – nur Grafik, nie Schrift (≥ 3,6 : 1) */
  --accent-fill: var(--ref-primary);   /* Primär-Buttons, Badges */
  --accent-fill-hover: #2fc0c4;  /* heller statt dunkler: die dunkle Schrift behält ihren Kontrast */
  --on-accent: #0b1314;        /* (7,2 : 1 auf Cyan) */
  --accent-line: rgb(16 177 182 / .6);
  --accent-shadow: rgb(16 177 182 / .3);
  --accent-wash: rgb(16 177 182 / .14);
  --accent-halo: 0 0 0 6px rgb(16 177 182 / .3), 0 0 28px 8px rgb(16 177 182 / .45);
  --nav-active: var(--accent); /* gewählter Bereich im Dock */
  --text-blue: #34444c;        /* Schiefer-Ton (Entfernungen, Termine, Tags) */
  --text-amber: #7a311b;
  --text-gold: #b0701c;        /* Ocker – nur für Symbole (4 : 1) */
  --blue-fill: var(--ref-primary);  /* Symbol-Kreis der Hinweiskarten */
  --on-blue-fill: #0b1314;
  --feature-ring: rgb(16 177 182 / .4);
  --date-fill: var(--ref-primary);  /* Termin-Badge */
  --on-date-fill: #0b1314;
  --cta-top: #dc9a45;          /* Ocker-Button (warmer Akzent), fast schwarze Schrift ab 7,1 : 1 */
  --cta: var(--ref-accent);
  --on-cta: #0a0a0a;
  --cta-glow: rgb(209 141 52 / .32);

  --border: #a7cdd2;           /* 1-px-Kante der Kästchen, Chips und Tasten: kühles Blaugrau */
  --border-strong: var(--ref-body); /* Eingabefelder, Kontrast-Modus (4,3 : 1) */
  --border-soft: rgb(67 85 95 / .08);
  --divider: rgb(67 85 95 / .16);
  --border-brand: rgb(16 177 182 / .45);
  --grab: rgb(67 85 95 / .25);
  --disabled-ink: rgb(67 85 95 / .35);
  --focus: #0a7275;

  /* „green“ in den Brücken-Namen steht seit „Saale Day“ für das Cyan der Marke, „blue“ für Schiefer */
  --tint-green: #d3edef;
  --tint-green-2: #bfe6e9;
  --tint-green-ring: #7fcdd1;
  --tint-blue: #dbe4e8;        /* Schiefer-Fläche (Tags) */
  --tint-blue-soft: #d3edef;   /* Hinweiskarten, Termine: kräftigere Cyan-Fläche als Hervorhebung */
  --tint-blue-hover: #cdd9de;
  --tint-amber: #fbe9e2;
  --tint-gold: #fbf2e5;

  --ok-ink: #165528;
  --ok-bg: #e7f3e9;
  --warn-ink: #6b4000;
  --warn-bg: #fff4db;
  --stop-ink: #8f2219;
  --stop-bg: #fcecea;
  --stop-bg-hover: #f9e1dd;
  --info-ink: #13536b;
  --info-bg: #eaf4f7;
  /* Hinweis-Box (notice, z. B. Saison des Brötchenservice) im Stil der Website: Türkis nur für Kante und Symbol */
  --callout-line: #10b1b6;
  --callout-bg: #f8fcfc;
  --callout-ink: #0b5457;     /* Überschrift (8,4 : 1 auf --callout-bg) */

  /* Kante statt Schattenwolke: 1-px-Ring (belegt keinen Platz) plus knapper Kontaktschatten – bleibt in der Sonne sichtbar */
  --shadow-tint: rgb(21 38 45 / .08);
  --ring: 0 0 0 1px var(--border);
  --shadow-card: var(--ring), 0 1px 2px var(--shadow-tint);
  --shadow-sm: 0 1px 2px var(--shadow-tint);
  --shadow-lift: 0 0 0 1px var(--border-strong), 0 6px 18px var(--shadow-tint);
  --shadow-float: var(--ring), 0 12px 32px rgb(21 38 45 / .14);
  --glass: rgb(255 255 255 / .92);       /* nur auf Stufe „full“ mit Unschärfe */
  --glass-solid: #ffffff;                /* Dock und Kopfzeile: deckend, nichts scheint durch */
  --glass-edge: rgb(255 255 255 / .7);
  --scrim: rgb(17 30 36 / .48);

  /* 3 · Brücke: bisherige Namen → Rollen */
  --bg-warm: var(--bg);
  --surface-card: var(--surface);
  --sand-200: var(--surface-2);
  --sand-300: var(--surface-3);
  --ink: var(--text);
  --muted: var(--text-muted);
  --line: var(--border);
  --line-soft: var(--border-soft);
  --brand-green: var(--accent);
  --green-900: var(--heading);
  --green-300: var(--tint-green-ring);
  --green-100: var(--tint-green-2);
  --green-50: var(--tint-green);
  --saale-700: var(--text-blue);
  --saale-100: var(--tint-blue);
  --saale-50: var(--tint-blue-soft);
  --amber-ink: var(--text-amber);
  --amber-100: var(--tint-amber);
  --gold-100: var(--tint-gold);

  /* Formen: Kapsel (999px) = Aktion (Buttons, Chips) · Feld (--r-sm) = Eingabe · Karte = Inhalt · Kreis = Status.
     Verschachtelt gilt: innen = außen − Abstand (z. B. Dock, Umschalter, Lageplan). */
  --r-xl: 24px;                /* Sheets, Lageplan-Karte, Footer */
  --r-lg: 20px;                /* große Karten: Status-Leiste, Themen, Ampel */
  --r-md: 16px;                /* Kacheln und Listen-Karten */
  --r-sm: 12px;                /* Eingabefelder, Hinweis-Kästen */
  --r-xs: 8px;
  --r-icon: 12px;              /* Symbol-Kacheln (44–52 px) */
  --r-icon-sm: 10px;           /* kleine Symbol-Kacheln (40 px) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  --gutter: max(1rem, env(safe-area-inset-left));
  --appbar-h: 4.25rem;
  --dock-h: 4.5rem;
  --dock-space: calc(var(--dock-h) + 1.25rem + env(safe-area-inset-bottom));
  /* Platz für alles, was über dem Dock schwebt – inklusive Hinweis-Banner (install.js setzt --banner-h) */
  --float-space: calc(var(--dock-space) + var(--banner-h, 0px));
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
}

/* 2 · Rollen – Forest Night: Waldnacht statt Schwarz, Creme statt Weiß (blendfrei im Zelt).
   Nur Rollen werden neu belegt; Kontrast gegen --bg in Klammern. */
:root[data-theme="dark"] {
  color-scheme: dark;
  /* Ampel-Flächen etwas heller, damit Punkte und Zeitstrahl sich vom dunklen Grund abheben */
  --ok: #3a9a4f;
  --stop: #e04a3f;
  --info: #3a8fb0;

  --bg: #121a15;               /* Waldnacht */
  --surface: #1a241e;          /* Karten: eine Stufe heller */
  --surface-2: #26332a;
  --surface-3: #2f3d33;
  --surface-raised: #34443a;
  --surface-inverse: #e8e1cf;  /* gewählte Chips, Toast: hell auf dunkel */
  --on-inverse: #121a15;
  --on-inverse-muted: #3a443c;
  --inverse-accent: #7a311b;
  --surface-deep: #0c120e;     /* Footer: eine Stufe dunkler als die Seite */
  --card: #1a241e;             /* Kästchen wie bisher: Karten-Fläche */
  --tile: var(--tint-green-2);
  --tile-soft: var(--tint-green);
  --tile-blue: var(--tint-blue);
  --tile-gold: var(--tint-gold);
  --tile-amber: var(--tint-amber);
  --selected: #e8e1cf;         /* gewählte Chips wie Toast: hell auf dunkel */
  --on-selected: #121a15;
  --on-selected-muted: #3a443c;

  --text: #f3eee2;             /* Creme-Weiß (15,3 : 1) */
  --text-muted: #c8c2b3;       /* (10,0 : 1) */
  --heading: #e8e1cf;          /* (13,6 : 1) */
  --accent: #a9d293;           /* Salbei (10,4 : 1) */
  --accent-fill: #a9d293;
  --accent-fill-hover: #c2e0b1;
  --on-accent: #10200f;
  --accent-bright: var(--accent);
  --accent-line: rgb(169 210 147 / .5);
  --accent-shadow: rgb(45 90 39 / .22);
  --accent-wash: rgb(45 90 39 / .12);
  --accent-halo: 0 0 0 6px rgb(169 210 147 / .35), 0 0 28px 8px rgb(169 210 147 / .55);
  --nav-active: var(--heading);
  --text-blue: #8fcde6;
  --text-amber: #f0a58c;
  --text-gold: #e0b98a;
  --blue-fill: #8fcde6;
  --on-blue-fill: #0f2530;
  --feature-ring: rgb(42 123 155 / .22);
  --date-fill: #1b5e78;        /* weiße Schrift (7,2 : 1) */
  --on-date-fill: #ffffff;
  --cta-top: #f0a58c;
  --cta: #e8937a;
  --on-cta: #2a0f07;
  --cta-glow: rgb(0 0 0 / .3);

  --border: #2e3b32;
  --border-strong: #6e7b71;    /* (4,0 : 1) */
  --border-soft: rgb(243 238 226 / .08);
  --divider: rgb(243 238 226 / .12);
  --border-brand: rgb(243 238 226 / .2);
  --grab: rgb(243 238 226 / .28);
  --disabled-ink: rgb(243 238 226 / .3);
  --focus: #8fcde6;

  --tint-green: #1d2a21;
  --tint-green-2: #243328;
  --tint-green-ring: #4d6b45;
  --tint-blue: #1b3039;
  --tint-blue-soft: #16262d;
  --tint-blue-hover: #22404b;
  --tint-amber: #3a2620;
  --tint-gold: #33291c;

  --ok-ink: #8fd6a0;
  --ok-bg: #183323;
  --warn-ink: #f3c76e;
  --warn-bg: #3a2e14;
  --stop-ink: #ffa197;
  --stop-bg: #3a1e1b;
  --stop-bg-hover: #43231f;
  --info-ink: #8fcde6;
  --info-bg: #13303a;
  --callout-bg: #112a2c;      /* Kante #10b1b6 (5,7 : 1), Fließtext (13,0 : 1) */
  --callout-ink: #8fe3e6;     /* (10,3 : 1) */

  --shadow-tint: rgb(0 0 0 / .35);
  --shadow-float: var(--ring), 0 12px 32px rgb(0 0 0 / .45);
  --glass: rgb(26 36 30 / .92);
  --glass-solid: #1a241e;
  --glass-edge: rgb(243 238 226 / .06);
  --scrim: rgb(0 0 0 / .6);
}

/* Forest Night: was über die Rollen hinausgeht */
:root[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }
:root[data-theme="dark"] .brand__logo { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .tool-btn--sos { box-shadow: 0 0 0 1px rgb(255 161 151 / .45); }
:root[data-theme="dark"] .cat-card { box-shadow: 0 0 0 1px rgb(243 238 226 / .1); }

/* Schriftgrößen-Stufen (Taste A+ / Profil) */
html { font-size: 100%; }
html[data-font-scale="1"] { font-size: 112.5%; }
html[data-font-scale="2"] { font-size: 125%; }

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg-warm);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overflow-wrap: anywhere; /* lange Wörter (z. B. „Достопримечательности“) laufen nie aus dem Bild */
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; }
h1, h2, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.012em; font-optical-sizing: auto; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--brand-green); text-underline-offset: .18em; text-decoration-thickness: .08em; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[role="list"] { list-style: none; margin: 0; padding: 0; }
small { font-size: .875em; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus:not(:focus-visible),
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, .block[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: var(--surface-inverse); color: var(--on-inverse); padding: .75rem 1.125rem; border-radius: 999px; font-weight: 700;
}
.skip-link:focus { top: calc(1rem + env(safe-area-inset-top)); }

.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  width: 1.5rem; height: 1.5rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon--lg { width: 2.25rem; height: 2.25rem; }


/* ==========================================================================
   Bewegung & Haptik
   ========================================================================== */

/* Antippen: Eindrücken (nur transform – läuft auf der Grafikkarte). Hinein schnell, zurück weich.
   Farben, Ränder und Schatten wechseln ohne Übergang: das spart Neuzeichnen auf schwachen Geräten. */
:is(.btn, .chip, .quickfact, .status-card, .status-cell, .service, .cat-card, .hub-item, .rail-card, .place,
    .tool-btn, .link-chip, .tabbar a, .weather-chip, .call, .az-item, .rule, .pager__link, .letter, .segmented button,
    .copy-btn, .back, .sheet__back, .sheet__close, .sheet__more, .lang-option, .section-head__more, .map-pill, .map-preview,
    .map-launch) {
  transition: transform .22s var(--ease-out);
}
html:not([data-motion="off"]) :is(.btn, .chip, .quickfact, .status-card, .status-cell, .service, .cat-card, .hub-item,
    .rail-card, .place, .tool-btn, .link-chip, .tabbar a, .weather-chip, .call, .az-item, .rule, .pager__link, .letter,
    .segmented button, .copy-btn, .back, .sheet__back, .sheet__close, .sheet__more, .lang-option, .section-head__more,
    .map-pill, .map-preview, .map-launch):active {
  transform: scale(.96); transition-duration: .09s;
}
/* Große Karten und Listenzeilen geben weniger nach */
html:not([data-motion="off"]) :is(.quickfact, .status-card, .service, .cat-card, .hub-item, .rail-card, .place, .call, .az-item,
    .rule, .pager__link, .lang-option, .map-preview, .map-launch):active {
  transform: scale(.98);
}

/* Wechsel Hell ↔ Dunkel (theme.js): für einen Frame ohne Übergänge */
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* Ripple beim Antippen (motion.js) */
:is(.btn, .chip, .link-chip, .tabbar a, .quickfact, .status-card, .status-cell, .service, .cat-card, .place,
    .hub-item, .tool-btn, .segmented button, .rail-card) { position: relative; overflow: hidden; isolation: isolate; }
.ripple {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .14; transform: scale(0);
  animation: ripple .65s var(--ease-out) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* Einblenden beim Scrollen – Variante "lite" (CSS). Variante "full" macht GSAP. */
html:not([data-motion="off"]) .reveal {
  transition: opacity .6s ease, transform .7s var(--ease-out);
  will-change: opacity, transform;
}
html:not([data-motion="off"]) .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
.reveal.is-done { will-change: auto; }

@keyframes ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes float-x { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes shimmer { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -120; } }

/* ==========================================================================
   App-Leiste (Glas) & Werkzeug-Tasten
   ========================================================================== */

.appbar {
  position: fixed; inset: 0 0 auto 0; z-index: 25;
  padding-top: env(safe-area-inset-top);
}
/* Hintergrund als eigene Schicht: über dem Titelbild unsichtbar, beim Scrollen per opacity eingeblendet */
.appbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glass-solid); box-shadow: 0 1px 0 var(--border);
  transition: opacity .3s ease;
}
.appbar__inner { display: flex; align-items: center; gap: .625rem; min-height: var(--appbar-h); }

.brand {
  display: flex; align-items: center; gap: .5rem; margin-right: auto; min-width: 0;
  min-height: 3rem; text-decoration: none; color: var(--muted);
}
.brand__logo { flex: none; width: 3rem; height: 3rem; }
/* App-Titel neben dem Logo: „Gäste-Guide“, auf Unterseiten beim Scrollen der Seitentitel (wie in nativen Apps).
   Passt der Titel nicht ganz neben das Logo, blendet app.js ihn aus (.is-hidden). */
.brand__title {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; height: 2.25rem; overflow: hidden;
  padding-left: .625rem; border-left: 1.5px solid var(--border-brand);
}
.brand__title.is-hidden { display: none; }
/* Schmale Handys: „Gäste-/Guide“ zweizeilig als kleiner Schriftzug */
.brand__title.is-stacked .brand__app { overflow: visible; white-space: normal; overflow-wrap: normal; font-size: .9375rem; line-height: 1.05; }
.brand__app, .brand__page {
  grid-area: 1 / 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--green-900);
  transition: opacity .25s ease, transform .4s var(--ease-out);
}
.brand__app { font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em; }
/* Seitentitel: höchstens zwei Zeilen („Hausordnung &“ / „Platzregeln“), danach „…“ */
.brand__page {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  white-space: normal; overflow-wrap: normal; font-size: .9375rem; font-weight: 750; line-height: 1.12;
  opacity: 0; visibility: hidden; transform: translateY(80%);
}
.appbar.show-page-title .brand__app { opacity: 0; transform: translateY(-80%); }
.appbar.show-page-title .brand__page { opacity: 1; visibility: visible; transform: none; }

.appbar__tools { display: flex; gap: .375rem; flex: none; }

.tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3125rem;
  min-width: 3rem; min-height: 3rem; padding: 0 .625rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface-card);
  color: var(--green-900); font-weight: 750; line-height: 1; text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.tool-btn .icon { width: 1.3rem; height: 1.3rem; }
.tool-btn__code { font-size: .875rem; letter-spacing: .04em; }
.tool-btn__glyph { font-family: var(--font-display); font-size: 1.25rem; font-weight: 650; }
.tool-btn__label { display: none; font-size: .9375rem; }
.tool-btn--sos { background: var(--stop-fill); border-color: var(--stop-fill); color: #fff; padding: 0 .8rem; }
.tool-btn--sos[aria-current="page"] { box-shadow: 0 0 0 3px var(--stop-bg); }
.tool-btn--plain { box-shadow: none; }
.tool-btn:disabled { opacity: .4; cursor: default; }
@media (hover: hover) {
  .tool-btn:not(.tool-btn--sos):hover { border-color: var(--brand-green); }
  .tool-btn--sos:hover { background: var(--stop-fill-hover); }
}

/* Startseite: über dem Titelbild durchsichtig, erst beim Scrollen Glas */
body[data-route="home"] .appbar:not(.is-scrolled) { color: #fff; }
body[data-route="home"] .appbar:not(.is-scrolled)::before { opacity: 0; }
body[data-route="home"] .appbar:not(.is-scrolled) .brand__logo { filter: brightness(0) invert(1); }
body[data-route="home"] .appbar:not(.is-scrolled) .brand__app { color: #fff; }
body[data-route="home"] .appbar:not(.is-scrolled) .brand__title { border-left-color: rgb(255 255 255 / .4); }
body[data-route="home"] .appbar:not(.is-scrolled) .tool-btn:not(.tool-btn--sos) {
  background: rgb(14 30 18 / .28); border-color: rgb(255 255 255 / .35); color: #fff; box-shadow: none;
}

/* ==========================================================================
   Untere Navigation: schwebendes Dock
   ========================================================================== */

.tabbar {
  position: fixed; z-index: 30; left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + .625rem);
  width: min(calc(100% - 1.25rem), 34rem);
  transform: translateX(-50%);
}
.tabbar__inner {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: .375rem; border-radius: var(--r-xl);
  background: var(--glass-solid);
  box-shadow: var(--shadow-float), inset 0 0 0 1px var(--glass-edge);
}
.tabbar__indicator {
  position: absolute; top: .375rem; bottom: .375rem; left: .375rem; z-index: 0;
  width: calc((100% - .75rem) / 5); border-radius: calc(var(--r-xl) - .375rem);
  background: var(--green-100); opacity: 0;
  transform: translateX(calc(var(--active, 0) * 100%));
  transition: transform .5s var(--ease-out), opacity .25s ease;
}
.tabbar.has-active .tabbar__indicator { opacity: 1; }
.tabbar a {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-width: 0; min-height: var(--dock-h); padding: .375rem .125rem;
  border-radius: calc(var(--r-xl) - .375rem); color: var(--muted); text-decoration: none;
  font-size: .875rem; font-weight: 700; line-height: 1.1; text-align: center;
}
.tabbar a > span { white-space: nowrap; overflow-wrap: normal; letter-spacing: -.005em; }
.tabbar.tab-s0 a { font-size: .8125rem; }
.tabbar.tab-s1 a { font-size: .75rem; }
.tabbar.tab-s2 a { font-size: .6875rem; }
/* nie unter 11 px: bei normaler Schrift wären .625rem nur 10 px */
.tabbar.tab-s3 a { font-size: max(.625rem, 11px); letter-spacing: -.01em; padding-inline: 0; }
/* engste Stufe: Dock fast randlos, damit z. B. „Entdecken“ auch bei großer Schrift einzeilig bleibt */
.tabbar.tab-s3 { width: min(calc(100% - .5rem), 34rem); }
.tabbar.tab-s3 .tabbar__inner { padding: .25rem; }
.tabbar.tab-s3 .tabbar__indicator { top: .25rem; bottom: .25rem; left: .25rem; width: calc((100% - .5rem) / 5); }
.tabbar.tab-s3 :is(.tabbar__indicator, a) { border-radius: calc(var(--r-xl) - .25rem); }
/* letzte Stufe: lieber zweizeilig als abgeschnitten („anywhere“ lässt die Beschriftung schmaler werden).
   Weiche Trennstriche in den Beschriftungen (U+00AD, z. B. in „Entdecken“) gehen dem Notbehelf „anywhere“ vor. */
.tabbar.tab-wrap a > span { max-width: 100%; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.tabbar a .icon { width: 1.5rem; height: 1.5rem; transition: transform .35s var(--ease-out); }
.tabbar a[aria-current="page"] { color: var(--nav-active); font-weight: 800; }
.tabbar a[aria-current="page"] .icon { transform: translateY(-1px) scale(1.08); stroke-width: 2.3; }

/* ==========================================================================
   Glas – nur auf leistungsstarken Geräten (Unschärfe kostet Rechenzeit)
   ========================================================================== */

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  html[data-motion="full"] .appbar::before, html[data-motion="full"] .tabbar__inner {
    background: var(--glass);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    backdrop-filter: blur(20px) saturate(1.7);
  }
  html[data-motion="full"] body[data-route="home"] .appbar:not(.is-scrolled)::before {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html[data-motion="full"] :is(.weather-chip, body[data-route="home"] .appbar:not(.is-scrolled) .tool-btn:not(.tool-btn--sos)) {
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
  html[data-motion="full"] .sheet.is-open::backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
}

/* ==========================================================================
   Bottom Sheets (sheet.js) – auch für die Sprachauswahl
   ========================================================================== */

html:has(dialog[open]) { overflow: hidden; }

.sheet {
  position: fixed; inset: auto 0 0 0;
  width: 100%; max-width: 40rem; height: auto; max-height: 100dvh;
  margin: 0 auto; padding: 0; border: 0;
  background: transparent; color: var(--ink); overflow: visible;
}
.sheet::backdrop { background: var(--scrim); opacity: 0; transition: opacity .3s ease; }
.sheet.is-open::backdrop { opacity: 1; }
.sheet__panel {
  display: flex; flex-direction: column;
  max-height: min(90dvh, 54rem);
  background: var(--surface-card);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -12px 44px rgb(0 0 0 / .2);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translate3d(0, 100%, 0);
  transition: transform .45s var(--ease-out);
  will-change: transform;
}
.sheet.is-open .sheet__panel { transform: none; }
.sheet.is-closing .sheet__panel { transition-duration: .26s; transition-timing-function: cubic-bezier(.4, 0, 1, 1); }
.sheet.is-dragging .sheet__panel { transition: none; }
.sheet__grab { display: grid; place-items: center; height: 1.625rem; flex: none; cursor: grab; touch-action: none; }
.sheet__grab span { width: 2.75rem; height: .3125rem; border-radius: 999px; background: var(--grab); }
.sheet__head {
  display: flex; align-items: center; gap: .75rem; flex: none;
  padding: 0 1rem .75rem 1.25rem; touch-action: none;
}
.sheet__title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: 1.5rem; color: var(--green-900); }
/* Passt das längste Wort nicht neben das Symbol, steht der Titel darunter (statt mitten im Wort umzubrechen) */
.sheet__title > span:last-child { flex: 1 1 0; max-width: 100%; overflow-wrap: break-word; }
.sheet__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r-icon); }
.sheet__close {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem;
  border: 0; border-radius: 999px; background: var(--sand-200); color: var(--ink);
}
.sheet__close:hover { background: var(--sand-300); }
/* Allgemeines Sheet: oben „Zurück“ und „Schließen“, darunter der Titel */
.sheet__head--nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .375rem; }
.sheet__head--nav .sheet__title { grid-column: 1 / -1; }
.sheet__back {
  justify-self: start; display: inline-flex; align-items: center; gap: .5rem; max-width: 100%;
  min-height: 3rem; padding: .5rem 1.125rem .5rem .75rem; margin-left: -.25rem;
  border: 0; border-radius: 999px; background: var(--green-50); color: var(--green-900);
  font-size: 1rem; font-weight: 750; line-height: 1.2; text-align: start;
}
.sheet__back .icon { width: 1.25rem; height: 1.25rem; }
.sheet__back:hover { background: var(--green-100); }
.sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: .25rem 1.25rem 1.5rem; }
.sheet__body > * + * { margin-top: 1rem; }
.sheet__body > .btn-row { margin-top: 1.25rem; }
.sheet__lead { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-weight: 650; font-size: 1rem; }
.sheet__lead .icon { width: 1.25rem; height: 1.25rem; }
.sheet__sub { font-size: 1.0625rem; font-weight: 750; color: var(--muted); margin-top: 1.5rem; }
.sheet__more {
  display: flex; align-items: center; gap: .75rem;
  min-height: 3.5rem; padding: .75rem 1rem; margin-top: 1rem;
  border-radius: var(--r-sm); background: var(--green-50); color: var(--green-900);
  font-weight: 700; text-decoration: none;
}
.sheet__more > span { flex: 1; }
.sheet__more .icon:last-child { width: 1.25rem; height: 1.25rem; color: var(--accent-bright); }
.sheet__more:hover { background: var(--green-100); }

@media (min-width: 48em) {
  .sheet { inset: 0; margin: auto; max-width: 38rem; height: fit-content; }
  .sheet--wide { max-width: 48rem; }
  .sheet__panel {
    border-radius: var(--r-xl); padding-bottom: 0; max-height: min(86dvh, 52rem);
    transform: translate3d(0, 1.5rem, 0) scale(.97); opacity: 0;
    transition: transform .4s var(--ease-out), opacity .25s ease;
  }
  .sheet.is-open .sheet__panel { transform: none; opacity: 1; }
  .sheet__grab { display: none; }
  .sheet__head { padding-top: 1.25rem; }
}

/* Sprachauswahl */
.lang-dialog__en { margin: 0 1.25rem .5rem; color: var(--muted); font-size: 1rem; }
.lang-dialog__search { margin: .25rem 1.25rem .75rem; flex: none; }
.lang-dialog__search input {
  width: 100%; min-height: 3.25rem; padding: .625rem 1rem .625rem 3.25rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-warm); font-size: 1.125rem;
  text-overflow: ellipsis;
}
.lang-dialog__search input:focus { border-color: var(--brand-green); outline: none; box-shadow: 0 0 0 4px var(--green-100); background: var(--surface); }
.lang-dialog__body { overflow-y: auto; overscroll-behavior: contain; padding: 0 1.25rem 1.5rem; }
.lang-dialog__group { font-family: var(--font); font-size: .9375rem; color: var(--muted); font-weight: 700; margin: .75rem 0 .5rem; }
.lang-dialog__count { font-weight: 600; }
.lang-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .5rem; }
.lang-option {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem;
  padding: .5rem .75rem; text-align: left;
  background: var(--surface-card); border: 1.5px solid var(--line); border-radius: var(--r-sm); color: var(--ink);
}
.lang-option:hover { border-color: var(--brand-green); background: var(--green-50); }
.lang-option[aria-current="true"] { border-color: var(--brand-green); background: var(--green-50); }
.lang-option[aria-busy="true"] { opacity: .6; }
.lang-option__code {
  display: grid; place-items: center; flex: none; min-width: 2.75rem; height: 2.25rem; padding: 0 .375rem;
  border-radius: var(--r-xs); background: var(--surface-inverse); color: var(--on-inverse); font-size: .875rem; font-weight: 800; letter-spacing: .04em;
}
.lang-option__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.lang-option__name { font-weight: 700; font-size: 1.125rem; }
.lang-option__local { color: var(--muted); font-size: .9375rem; }
.lang-option__check { color: var(--accent-bright); }
.lang-dialog__empty { color: var(--muted); margin-top: 1rem; }

/* ==========================================================================
   Offline-Hinweis & Toast
   ========================================================================== */

.offline {
  position: fixed; z-index: 24; left: 50%; transform: translateX(-50%);
  top: calc(var(--appbar-h) + env(safe-area-inset-top) + .5rem);
  display: flex; align-items: center; gap: .5rem; width: max-content; max-width: calc(100% - 2rem);
  background: var(--warn-bg); color: var(--warn-ink); border-radius: 999px; box-shadow: var(--shadow-sm);
  padding: .5rem 1rem; font-size: .9375rem; font-weight: 650;
}
.offline .icon { width: 1.25rem; height: 1.25rem; }

.toast {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--float-space) + .5rem);
  display: flex; align-items: center; gap: 1rem;
  width: max-content; max-width: calc(100% - 2rem);
  background: var(--surface-inverse); color: var(--on-inverse); border-radius: var(--r-md);
  padding: .875rem 1.125rem; font-size: 1rem; box-shadow: var(--shadow-float);
  animation: toast-in .35s var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
.toast button {
  background: var(--on-inverse); color: var(--surface-inverse); border: 0; border-radius: 999px;
  padding: .5rem 1rem; font-weight: 750; min-height: 3rem; white-space: nowrap;
}

/* ==========================================================================
   Seitenaufbau
   ========================================================================== */

main {
  display: block; min-height: 60vh;
  padding-top: calc(var(--appbar-h) + env(safe-area-inset-top) + 1.25rem);
  padding-bottom: 2.5rem;
}
main[aria-busy="true"] { opacity: .55; transition: opacity .2s; }
/* ul[role="list"] zusätzlich, weil die Listen-Grundregel (margin: 0) sonst stärker ist;
   [data-status-cards] umschließt die Status-Karten der Services (minütliche Aktualisierung) */
main > section, main > nav, main > .blocks > *, main > .card, main > ul, main > ul[role="list"], main > .btn-row,
main > [data-status-cards] { margin-bottom: 1.75rem; }
body[data-route="home"] main { padding-top: 0; }

.page-head { margin-bottom: 1.5rem; }
/* Passt das längste Wort nicht neben das Symbol, steht der Titel darunter (statt mitten im Wort umzubrechen) */
.page-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; font-size: min(2rem, 10vw); color: var(--green-900); }
.page-head h1 > span:last-child { flex: 1 1 0; overflow-wrap: break-word; }
.head-icon {
  display: grid; place-items: center; flex: none;
  width: 3.25rem; height: 3.25rem; border-radius: var(--r-icon);
  background: var(--card); color: var(--accent-bright); box-shadow: var(--shadow-card);
}
.lead { font-size: 1.1875rem; color: var(--muted); margin-top: .75rem; max-width: 46rem; }

.back {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3rem; padding: .5rem 1.125rem .5rem .75rem; margin: 0 0 1rem -.125rem;
  border-radius: 999px; background: var(--surface-card); box-shadow: var(--ring), var(--shadow-sm);
  color: var(--green-900); font-weight: 700; text-decoration: none;
}
.back .icon { width: 1.25rem; height: 1.25rem; }
.back:hover { box-shadow: var(--shadow-lift); }

/* Wird es eng, rutscht „Alle anzeigen“ unter die Überschrift, statt sie mitten im Wort zu brechen */
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1rem; margin-bottom: .875rem; }
.section-head .section-title { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: break-word; }
.section-title { font-size: 1.5rem; color: var(--green-900); margin: 0 0 .875rem; }
/* allein in der Zeile darf der Link an Leerzeichen umbrechen (lange Übersetzungen) */
.section-head__more {
  display: inline-flex; align-items: center; gap: .25rem; flex: 0 1 auto; min-width: 0;
  min-height: 3rem; padding: 0 .25rem; color: var(--brand-green); font-weight: 700; font-size: 1rem; text-decoration: none;
}
.section-head__more .icon { width: 1.125rem; height: 1.125rem; }

.card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
}
.card__title { display: flex; align-items: center; gap: .625rem; font-size: 1.375rem; color: var(--green-900); margin-bottom: 1rem; }
.card__title .icon { color: var(--accent-bright); }

.note { color: var(--muted); font-size: 1rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.btn-row .btn { flex: 1 1 14rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 3.25rem; padding: .75rem 1.375rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 750; font-size: 1.0625rem; line-height: 1.2; text-align: center; text-decoration: none;
}
.btn .icon { width: 1.3rem; height: 1.3rem; }
.btn--primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 8px 20px var(--accent-shadow); }
.btn--primary:hover { background: var(--accent-fill-hover); }
.btn--accent {
  background: linear-gradient(180deg, var(--cta-top) 0%, var(--cta) 100%); color: var(--on-cta);
  box-shadow: 0 10px 24px var(--cta-glow), inset 0 1px 0 rgb(255 255 255 / .18);
}
.btn--accent:hover { background: var(--cta); }
.btn--secondary { background: var(--surface-card); color: var(--brand-green); border-color: var(--accent-line); }
.btn--secondary:hover { background: var(--green-50); border-color: var(--brand-green); }
.btn--ghost { background: var(--green-50); color: var(--green-900); }
.btn--ghost:hover { background: var(--green-100); }
.btn--danger { background: var(--stop-fill); color: #fff; }
.btn--danger:hover { background: var(--stop-fill-hover); }
.btn--sm { min-height: 3rem; padding: .5rem 1rem; font-size: 1rem; flex: none; }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
/* Website eines Ausflugsziels: Bezeichnung und darunter die Adresse */
.btn--site { padding-block: .5rem; }
.btn__text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.btn__text small { color: var(--muted); font-size: .9375rem; font-weight: 650; overflow-wrap: anywhere; }

.more-link {
  display: inline-flex; align-items: center; gap: .25rem; margin-top: .75rem;
  min-height: 3rem; font-weight: 700; text-decoration: none;
}
.more-link .icon { width: 1.25rem; height: 1.25rem; }

/* ==========================================================================
   Chips
   ========================================================================== */

.chip {
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  min-height: 3rem; padding: .5rem 1.125rem;
  background: var(--surface-card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.chip .icon { width: 1.25rem; height: 1.25rem; color: var(--accent-bright); }
.chip:hover { border-color: var(--brand-green); }
/* Gewählter Filter (aria-pressed) und aktuelle Themen-Seite (aria-current) sehen gleich aus */
.chip:is([aria-pressed="true"], [aria-current="page"]) { background: var(--selected); border-color: var(--selected); color: var(--on-selected); }
.chip:is([aria-pressed="true"], [aria-current="page"]) .icon { color: var(--on-selected); }
.chip--blue .icon { color: var(--saale-700); }
.chip--amber .icon { color: var(--amber-ink); }
.chip--gold .icon { color: var(--text-gold); }

/* Horizontal scrollbare Chip-Leiste (randlos auf dem Smartphone) */
.chip-scroll ul {
  display: flex; gap: .625rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter)); padding: .375rem var(--gutter) .875rem;
  scrollbar-width: none;
}
.chip-scroll ul::-webkit-scrollbar { display: none; }
.chip-scroll li { scroll-snap-align: start; }
/* Aktuelles Thema rastet mittig ein – passend zu centerCurrentChip() in views/umgebung.js */
.chip-scroll li:has(> .chip[aria-current="page"]) { scroll-snap-align: center; }
.chip-scroll--filter { margin-bottom: .75rem !important; }

/* Alte Chip-Gruppe (Umgebung) – hier umbrechend: ein zu langer Chip bricht an Leerzeichen um, statt über den Rand zu ragen */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.chips .chip { max-width: 100%; white-space: normal; text-align: start; }

/* ==========================================================================
   Startseite: Titelbild (Hero)
   ========================================================================== */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw);
  min-height: clamp(35rem, 84svh, 46rem);
  display: flex; flex-direction: column;
  padding: calc(var(--appbar-h) + env(safe-area-inset-top) + 1.5rem) 0 8.5rem;
  color: #fff;
}
.hero__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: -1; height: 26%;
  background: linear-gradient(to bottom, transparent, var(--bg-warm) 92%);
  pointer-events: none;
}
.hero__content { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); text-shadow: 0 1px 14px rgb(0 0 0 / .18); }
.hero__greet { color: #ffe2b8; font-weight: 750; font-size: 1.125rem; margin-bottom: .375rem; letter-spacing: .01em; }
.hero h1 { font-size: clamp(2.125rem, 8.4vw, 3.5rem); line-height: 1.06; max-width: 15ch; color: #fff; font-weight: 600; }
.hero__date { margin: .75rem 0 0; font-size: 1.0625rem; opacity: .92; }
.hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-top: 1.125rem; text-shadow: none; }
.hero__chips > span { display: contents; }
.hero :focus-visible { outline-color: #fff; }

/* Kompakter Willkommens-Kopf: kurz, damit Status und Platz-Services sofort sichtbar sind.
   Unten bleibt Platz, den die Status-Leiste überlappt (.status-wrap). */
.hero--compact {
  min-height: clamp(15rem, 34svh, 20rem);
  padding: calc(var(--appbar-h) + env(safe-area-inset-top) + .75rem) 0 4.75rem;
  margin-bottom: 0;
}
/* Abdunklung oben: weiße Schrift bleibt auch über hellem Himmel gut lesbar */
.hero--compact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(10 24 14 / .58) 0%, rgb(10 24 14 / .52) 60%, rgb(10 24 14 / .34) 82%, rgb(10 24 14 / 0) 100%);
}
.hero--compact::after { height: 34%; }
.hero--compact .hero__greet { font-size: 1rem; margin-bottom: .25rem; }
.hero--compact h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.12; max-width: 22ch; }
.hero--compact .hero__date { margin-top: .375rem; font-size: 1rem; opacity: 1; }
.hero--compact .hero__chips { margin-top: .875rem; }

.weather-chip {
  display: inline-flex; align-items: center; gap: .625rem;
  min-height: 3rem; padding: .375rem 1rem .375rem .75rem;
  border-radius: 999px; border: 1px solid rgb(255 255 255 / .38);
  background: rgb(14 30 18 / .55); color: #fff;
  font-weight: 700; font-size: 1rem; line-height: 1.25; text-align: left; text-decoration: none;
}
.weather-chip .icon { width: 1.375rem; height: 1.375rem; }
.weather-chip__temp { font-size: 1.125rem; font-weight: 800; white-space: nowrap; }
.weather-chip__text { font-weight: 600; }
@media (hover: hover) {
  .weather-chip:hover { background: rgb(14 30 18 / .68); }
}

/* Landschaft: Farben je Tageszeit */
/* .tour-art: Titelbild im Kleinen in der Einführung (tour-slides.js), immer mit den Farben am Tag */
.hero, .tour-art { --sky1: #2a7b9b; --sky2: #79b4c6; --sky3: #efe2c4; --glow: #fff6d8; --sun: #fff3cf;
  --far: #8fb3a2; --hill: #4f7e47; --hill-shade: #3f6a3a; --castle: #eadcc3; --castle-shade: #cdb999; --castle-win: #6b5a3e;
  --vine: #5c8a4a; --vine-row: #44703a; --bank: #6f9a52; --tree-far: #4c7a43; --river1: #3d8db0; --river2: #2a7b9b;
  --meadow: #6c9a4c; --tree: #2d5a27; --trunk: #5b4630; --tent: #e07a5f; --tent-side: #b84f35; --van: #f6efe1; --van-roof: #d4a373;
  --cloud: rgb(255 255 255 / .75); --stars: 0; --fire: 0; }
.hero[data-daytime="morning"] { --sky1: #3e6f8e; --sky2: #d9a07d; --sky3: #f7ddb0; --glow: #ffe2b0; --sun: #ffe7b0;
  --far: #9db7a8; --hill: #5e8c55; --castle: #f0dcc0; --vine: #678f50; --bank: #79a259; --meadow: #74a052; --river1: #6aa7c0; }
.hero[data-daytime="evening"] { --sky1: #263a66; --sky2: #b65e4a; --sky3: #efb27a; --glow: #ffc98a; --sun: #ffc58a;
  --far: #6d7f86; --hill: #3c5b3e; --hill-shade: #2f4a33; --castle: #d9b994; --castle-shade: #b8936c; --vine: #4c6e40; --vine-row: #3a5a33;
  --bank: #557a43; --tree-far: #3b5e36; --river1: #4f6f8f; --river2: #34506e; --meadow: #4f7a3d; --tree: #22421f; --cloud: rgb(255 214 190 / .55); --fire: 1; }
.hero[data-daytime="night"] { --sky1: #0d1a31; --sky2: #1b3556; --sky3: #2e4a63; --glow: #b8c6e0; --sun: #f2ebd8;
  --far: #2d4051; --hill: #22382a; --hill-shade: #1a2d22; --castle: #8e939c; --castle-shade: #6e737c; --castle-win: #f5c46b;
  --vine: #24402c; --vine-row: #1b3322; --bank: #213a28; --tree-far: #1b3122; --river1: #284a68; --river2: #1f3d57;
  --meadow: #1f3825; --tree: #142619; --trunk: #2d241a; --tent: #a85a46; --tent-side: #7e3f2f; --van: #b9b4a8; --van-roof: #8a7458;
  --cloud: rgb(160 180 210 / .25); --stars: 1; --fire: 1; }

.h-sky-1 { stop-color: var(--sky1); } .h-sky-2 { stop-color: var(--sky2); } .h-sky-3 { stop-color: var(--sky3); }
.h-glow-1 { stop-color: var(--glow); stop-opacity: .55; } .h-glow-2 { stop-color: var(--glow); stop-opacity: 0; }
.h-river-1 { stop-color: var(--river1); } .h-river-2 { stop-color: var(--river2); }
.h-sun { fill: var(--sun); }
.h-stars { fill: #fff; opacity: var(--stars); }
.hero-cloud { fill: var(--cloud); }
.h-bird { fill: none; stroke: rgb(30 40 40 / .45); stroke-width: 2.5; stroke-linecap: round; opacity: calc(1 - var(--stars)); }
.h-far { fill: var(--far); }
.h-hill { fill: var(--hill); }
.h-hill-shade { fill: var(--hill-shade); opacity: .7; }
.h-castle { fill: var(--castle); }
.h-castle-shade { fill: var(--castle-shade); }
.h-castle-win { fill: var(--castle-win); }
.h-vineyard { fill: var(--vine); }
.h-vine-row { stroke: var(--vine-row); stroke-width: 5; stroke-dasharray: 3 6; stroke-linecap: round; }
.h-bank { fill: var(--bank); }
.h-tree-far { fill: var(--tree-far); }
.h-shimmer path { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 40 80; }
.h-meadow { fill: var(--meadow); }
.h-tree { fill: var(--tree); }
.h-trunk { fill: var(--trunk); }
.h-tent-body { fill: var(--tent); } .h-tent-side { fill: var(--tent-side); } .h-tent-door { fill: rgb(0 0 0 / .28); }
.h-van-body { fill: var(--van); } .h-van-roof { fill: var(--van-roof); } .h-van-win { fill: #3b4b55; opacity: .75; } .h-wheel { fill: #2b2b2b; }
.h-fire { fill: #ffb347; opacity: var(--fire); }
html[data-motion="full"] .hero-cloud--a { animation: float-x 26s ease-in-out infinite alternate; }
html[data-motion="full"] .hero-cloud--b { animation: float-x 34s ease-in-out infinite alternate-reverse; }
html[data-motion="full"] .h-shimmer path { animation: shimmer 6s linear infinite; }

/* ==========================================================================
   Status: Leiste, Karten, Punkte, Sheet-Kopf
   ========================================================================== */

.status-dot { position: relative; display: inline-block; flex: none; width: .75rem; height: .75rem; border-radius: 50%; background: var(--muted); }
.status-dot--open { background: var(--ok); }
.status-dot--soon { background: var(--warn); }
.status-dot--closed { background: var(--stop); }
.status-dot--info { background: var(--info); }
.status-dot--open::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; }
html:not([data-motion="off"]) .status-dot--open::after { animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite; }

/* Status-Leiste (Startseite): Schranke, Rezeption, Notfall-Hotline – überlappt den Willkommens-Kopf.
   Drei gleich breite Spalten; auf dem Smartphone siehe „Status-Leiste auf dem Smartphone“ unten.
   Trennlinien entstehen aus dem 1-px-Abstand über der Linienfarbe der Leiste. */
.status-wrap { position: relative; z-index: 2; margin-top: -3.25rem; margin-bottom: 1.75rem; }
.status-bar {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px;
  overflow: hidden; border-radius: var(--r-lg);
  background: var(--line); box-shadow: var(--ring), 0 10px 28px var(--shadow-tint);
}
.status-bar > li { display: flex; min-width: 0; background: var(--card); }
.status-cell {
  display: flex; flex-direction: column; justify-content: center; gap: .25rem;
  width: 100%; min-width: 0; min-height: 4.5rem; padding: .75rem; margin: 0;
  border: 0; border-radius: 0; background: transparent;
  color: var(--ink); font: inherit; text-align: start; text-decoration: none;
}
.status-cell:focus-visible { outline-offset: -3px; border-radius: var(--r-sm); }
.status-cell__label {
  display: flex; align-items: center; gap: .375rem;
  font-size: .9375rem; font-weight: 750; line-height: 1.2; color: var(--muted);
  overflow-wrap: break-word; hyphens: auto;
}
.status-cell__label .icon { width: 1rem; height: 1rem; }
.status-cell__label .status-dot { width: .625rem; height: .625rem; }
.status-cell__value { font-size: 1rem; font-weight: 750; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.status-cell--open .status-cell__value { color: var(--ok-ink); }
.status-cell--soon .status-cell__value { color: var(--warn-ink); }
.status-cell--closed .status-cell__value { color: var(--stop-ink); }
.status-cell--info .status-cell__value { color: var(--info-ink); }
.status-cell--hotline { background: var(--stop-bg); color: var(--stop-ink); }
.status-cell--hotline .status-cell__label { color: var(--stop-ink); }
.status-cell--hotline .status-cell__value { font-size: 1.0625rem; font-weight: 800; }
@media (hover: hover) {
  .status-cell:hover { background: var(--green-50); }
  .status-cell--hotline:hover { background: var(--stop-bg-hover); }
}

.status-cards {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11.5rem, 47%);
  gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter)); padding: .25rem var(--gutter) 1rem; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.status-cards::-webkit-scrollbar { display: none; }
.status-cards > li { scroll-snap-align: start; min-width: 0; }
.status-cards--grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; }
.status-card {
  display: flex; flex-direction: column; gap: .375rem; width: 100%; height: 100%;
  min-height: 9.5rem; padding: 1rem; text-align: left;
  background: var(--card); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-card); color: var(--ink);
}
.status-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.status-card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-icon); background: var(--ok-bg); color: var(--ok-ink); }
.status-card--soon .status-card__icon { background: var(--warn-bg); color: var(--warn-ink); }
.status-card--closed .status-card__icon { background: var(--stop-bg); color: var(--stop-ink); }
.status-card--info .status-card__icon { background: var(--info-bg); color: var(--info-ink); }
.status-card__title { font-size: .9375rem; font-weight: 700; color: var(--muted); }
.status-card__state { font-weight: 750; line-height: 1.3; }
.status-card--open .status-card__state { color: var(--ok-ink); }
.status-card--soon .status-card__state { color: var(--warn-ink); }
.status-card--closed .status-card__state { color: var(--stop-ink); }
.status-card--info .status-card__state { color: var(--info-ink); }
@media (hover: hover) { .status-card:hover { box-shadow: var(--shadow-lift); } }

.status-hero {
  display: flex; align-items: center; gap: .875rem; padding: 1rem 1.125rem;
  border-radius: var(--r-sm); background: var(--ok-bg); color: var(--ok-ink); font-size: 1.125rem;
}
.status-hero p { margin: 0; }
.status-hero--soon { background: var(--warn-bg); color: var(--warn-ink); }
.status-hero--closed { background: var(--stop-bg); color: var(--stop-ink); }
.status-hero--info { background: var(--info-bg); color: var(--info-ink); }
.status-hero .status-dot { width: .875rem; height: .875rem; }
.status-text--open { color: var(--ok-ink); } .status-text--soon { color: var(--warn-ink); }
.status-text--closed { color: var(--stop-ink); } .status-text--info { color: var(--info-ink); }

.season-hours { display: grid; gap: .5rem; margin: 0; }
.season-hours__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .75rem 1rem; border-radius: var(--r-sm); background: var(--bg-warm); }
.season-hours__row.is-current { background: var(--green-50); box-shadow: inset 0 0 0 1.5px var(--green-300); }
.season-hours dt { font-weight: 700; }
.season-hours dd { margin: 0; font-weight: 750; color: var(--green-900); }
/* Zeiten je Wochentag-Gruppe untereinander („Mo.–Sa. 9:00 – 11:30 …“, „So. …“) */
.season-hours__line { display: block; }
.season-hours__line > span { color: var(--muted); font-weight: 650; }
.badge--now { background: var(--accent-fill); color: var(--on-accent); margin-left: .25rem; }

/* ==========================================================================
   Startseite: Platz-Services, Kacheln, Auf einen Blick, Ausflugsziele
   ========================================================================== */

/* Platz-Services: 2 Spalten auf dem Smartphone, 3 ab Tablet, 6 auf großen Bildschirmen */
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.service-grid > li { min-width: 0; }
.service {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  width: 100%; height: 100%; min-height: 7.5rem; padding: 1.125rem; margin: 0;
  background: var(--card); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-card);
  color: var(--ink); font: inherit; text-align: start; text-decoration: none;
}
.service__icon {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; margin-bottom: .375rem;
  border-radius: var(--r-icon); background: var(--tile); color: var(--accent-bright);
}
.service-grid > li:nth-child(4n + 2) .service__icon { background: var(--tile-blue); color: var(--saale-700); }
.service-grid > li:nth-child(4n + 3) .service__icon { background: var(--tile-gold); color: var(--text-gold); }
.service-grid > li:nth-child(4n + 4) .service__icon { background: var(--tile-amber); color: var(--amber-ink); }
.service__title { font-weight: 750; font-size: 1.0625rem; line-height: 1.25; overflow-wrap: break-word; }
.service__teaser { display: flex; align-items: flex-start; gap: .375rem; color: var(--muted); font-size: 1rem; font-weight: 500; line-height: 1.35; }
/* Punkt oben rechts wie bei den Status-Karten: der Status-Text bekommt die volle Breite */
.service__teaser .status-dot { position: absolute; top: 2.3125rem; inset-inline-end: 1.25rem; }
.service__teaser.status-text--open { color: var(--ok-ink); } .service__teaser.status-text--soon { color: var(--warn-ink); }
.service__teaser.status-text--closed { color: var(--stop-ink); } .service__teaser.status-text--info { color: var(--info-ink); }
.service__teaser[class*="status-text--"] { font-weight: 700; }
.service__ext { position: absolute; top: 1.125rem; inset-inline-end: 1.125rem; width: 1.125rem; height: 1.125rem; color: var(--muted); }
@media (hover: hover) { .service:hover { box-shadow: var(--shadow-lift); } }

/* Deutsch nutzt gezielte weiche Trennstriche, andere Sprachen die automatische Silbentrennung. */
html:not([lang="de"]) :is(.service__title, .cat-card__text strong, .page-head h1, .section-title, .block__title, .place__title) { hyphens: auto; }

.quickfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.quickfact {
  display: flex; flex-direction: column; align-items: flex-start; gap: .125rem;
  height: 100%; padding: .875rem 1rem 1rem; text-decoration: none; color: var(--ink);
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-card);
  overflow-wrap: break-word; hyphens: auto;
}
.quickfact__icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-icon); margin-bottom: .5rem;
  background: var(--tile-soft); color: var(--accent-bright);
}
.quickfact__label { font-size: .9375rem; color: var(--muted); font-weight: 700; line-height: 1.3; }
.quickfact__value { font-weight: 750; line-height: 1.3; }
/* Spalten-Flexbox mit align-items: flex-start: ohne Höchstbreite bricht overflow-wrap lange Wörter nicht um */
.quickfact > *, .service > * { max-width: 100%; }
@media (hover: hover) { .quickfact:hover { box-shadow: var(--shadow-lift); } }

/* Ausflugsziele als horizontale Leiste */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 72%);
  gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter)); padding: .25rem var(--gutter) 1rem; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { scroll-snap-align: start; min-width: 0; }
.rail-card {
  display: flex; flex-direction: column; height: 100%; padding: .5rem .5rem .875rem;
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none;
}
.rail-card .art { aspect-ratio: 16 / 10; border-radius: calc(var(--r-lg) - .5rem); }
.rail-card__body { display: flex; flex-direction: column; gap: .25rem; padding: .625rem .5rem 0; }
.rail-card__body strong { font-size: 1.0625rem; line-height: 1.3; }
.rail-card__body small { display: flex; align-items: center; gap: .3rem; color: var(--saale-700); font-weight: 700; font-size: .9375rem; }
.rail-card__body small .icon { width: 1rem; height: 1rem; }

/* ==========================================================================
   Inhalts-Bausteine: Fakten, Listen, Badges, Link-Chips
   ========================================================================== */

.facts {
  display: grid; gap: .125rem; margin: 0 0 1rem;
  background: var(--green-50); border-radius: var(--r-sm);
  padding: .625rem 1.125rem;
}
.fact { padding: .5rem 0; }
.fact + .fact { border-top: 1px solid var(--divider); }
.fact dt { font-size: .9375rem; color: var(--muted); font-weight: 700; }
.fact dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: 1.25rem; font-weight: 750; line-height: 1.3; color: var(--green-900); }
/* Stand der Angaben unter „Auf einen Blick“ (Ausflugsziele) */
.facts + .facts-note { margin: -.375rem 0 1.25rem; font-size: .9375rem; }

.copy-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 3rem; padding: .375rem .9375rem;
  background: var(--surface-card); border: 1.5px solid var(--accent-line); border-radius: 999px;
  color: var(--brand-green); font-size: .9375rem; font-weight: 750;
}
.copy-btn .icon { width: 1.125rem; height: 1.125rem; }

.keylist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .625rem; }
.keylist li { display: flex; align-items: center; gap: .75rem; }
.keylist__value { display: block; color: var(--muted); }
.swatch { width: 2.125rem; height: 2.125rem; border-radius: var(--r-xs); flex: none; border: 2px solid rgb(0 0 0 / .08); }

.badge {
  display: inline-block; vertical-align: middle;
  font-family: var(--font); font-size: .9375rem; font-weight: 800; letter-spacing: .02em;
  padding: .1875rem .625rem; border-radius: 999px; white-space: nowrap; line-height: 1.3;
}
.badge--draft { background: var(--warn-bg); color: var(--warn-ink); border: 1px dashed var(--warn-ink); }

.link-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.link-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 3rem; padding: .5rem 1.125rem .5rem .875rem;
  background: var(--surface-card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--green-900); font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: var(--shadow-sm);
  max-width: 100%; /* nie breiter als die Zeile – lange Bezeichnungen brechen an Leerzeichen um */
}
.link-chip:hover { border-color: var(--brand-green); }
.link-chip .icon { width: 1.25rem; height: 1.25rem; color: var(--accent-bright); }

/* ==========================================================================
   A bis Z
   ========================================================================== */

.search { margin-bottom: 1rem; }
.search__label { display: block; font-weight: 750; margin-bottom: .5rem; }
.search__field { position: relative; display: flex; align-items: center; }
.search__field > .icon { position: absolute; left: 1.125rem; color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; min-height: 3.75rem; padding: .75rem 3.5rem .75rem 3.375rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-card);
  box-shadow: var(--shadow-sm); font-size: 1.125rem;
}
.search input:focus { border-color: var(--brand-green); outline: none; box-shadow: 0 0 0 4px var(--green-100), var(--shadow-sm); }
.search input::-webkit-search-cancel-button { display: none; }
/* Leeres Feld: die Löschen-Taste ist ausgeblendet – der Platzhalter bekommt ihren Platz, zu Langes endet mit „…“ */
.search input:placeholder-shown { padding-right: 1.25rem; text-overflow: ellipsis; }
.search__clear {
  position: absolute; right: .5rem; display: grid; place-items: center;
  width: 3rem; height: 3rem; border: 0; border-radius: 999px; background: var(--sand-200); color: var(--ink);
}

.letters { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1.5rem; }
.letter {
  width: 3rem; height: 3rem; border-radius: var(--r-sm);
  background: var(--surface-card); border: 0; box-shadow: var(--ring), var(--shadow-sm); color: var(--green-900);
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 650;
}
.letter:hover { background: var(--surface-inverse); color: var(--on-inverse); }

.az-count, .result-count { font-weight: 650; color: var(--muted); }
.az-count:empty, .result-count:empty { display: none; }

.az-group { margin-bottom: 1.5rem; }
.az-letter {
  scroll-margin-top: calc(var(--appbar-h) + env(safe-area-inset-top) + 1rem);
  font-size: 1.625rem; color: var(--green-900);
  display: flex; align-items: center; gap: .75rem; margin-bottom: .625rem;
}
.az-letter::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.az-list { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-card); overflow: hidden; }
.az-list li + li { border-top: 1px solid var(--line); }
.az-item {
  display: flex; align-items: center; gap: .875rem;
  min-height: 4.5rem; padding: .75rem 1rem;
  color: var(--ink); text-decoration: none;
}
.az-item:hover { background: var(--green-50); }
.az-item__icon {
  display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-icon); background: var(--tile-soft); color: var(--accent-bright);
}
.az-item__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.az-item__title { font-weight: 750; font-size: 1.125rem; }
.az-item__teaser {
  color: var(--muted); font-size: .9375rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.az-item__chev { color: var(--muted); width: 1.25rem; height: 1.25rem; }

.empty { text-align: left; }

/* Detailansicht */
.detail__body { padding: 1.375rem; }
.detail__body--flush { padding: 0; overflow: hidden; }
.detail__inner { padding: 1.375rem; }
.detail__text { font-size: 1.25rem; line-height: 1.6; }
.detail .page-head h1 { font-size: 2.125rem; }
.related { margin-top: 1.75rem; }

.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.75rem; }
.pager__link {
  display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 4.25rem; padding: .75rem 1rem; overflow-wrap: break-word; hyphens: auto;
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-card);
  color: var(--green-900); font-weight: 750; text-decoration: none; line-height: 1.25;
}
.pager__link:hover { box-shadow: var(--shadow-lift); }
/* min-width: 0 – sonst behält der Text sein längstes Wort und läuft aus der Karte */
.pager__link > span { min-width: 0; }
.pager__link small { display: block; color: var(--muted); font-weight: 650; font-size: .9375rem; }
.pager__link--next { justify-content: flex-end; text-align: right; }
/* Smartphone (bei größerer Schrift bis 40em): Vor und Zurück untereinander, leere Platzhalter weg */
@media (max-width: 29.99em) {
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager > span:empty { display: none; }
}
@media (max-width: 39.99em) {
  html:is([data-font-scale="1"], [data-font-scale="2"]) .pager { grid-template-columns: minmax(0, 1fr); }
  html:is([data-font-scale="1"], [data-font-scale="2"]) .pager > span:empty { display: none; }
}

/* ==========================================================================
   Umgebung (Ausflugsziele)
   ========================================================================== */

.places { display: grid; gap: 1rem; margin-block: 1rem 1.5rem; }
.places > li { min-width: 0; }
.place {
  display: flex; flex-direction: row; height: 100%; overflow: hidden;
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none;
}
.place:hover { box-shadow: var(--shadow-lift); }
.place__body { display: flex; flex-direction: column; gap: .25rem; padding: .875rem 1rem; min-width: 0; }
.place > .art { width: 6.25rem; aspect-ratio: auto; min-height: 100%; flex: none; }
.place > .art .icon { width: 2.5rem; height: 2.5rem; }
.place__title { font-weight: 750; font-size: 1.1875rem; line-height: 1.3; }
.place__distance { display: flex; align-items: center; gap: .375rem; color: var(--saale-700); font-weight: 750; font-size: 1rem; }
.place__distance .icon { width: 1.125rem; height: 1.125rem; }
.place__distance--lg { font-size: 1.125rem; margin: .75rem 0 1rem; }
.place__teaser { color: var(--muted); font-size: 1rem; }

/* Bild-Platzhalter: Verlauf in der Kategoriefarbe mit Symbol */
.art {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  color: rgb(255 255 255 / .92);
  background-color: var(--forest-700);
  background-image: radial-gradient(circle at 78% 18%, rgb(255 255 255 / .28), transparent 46%), linear-gradient(135deg, var(--a1, #2d5a27), var(--a2, #6e9a4f));
}
.art .icon { width: 3.5rem; height: 3.5rem; stroke-width: 1.5; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .15)); }
.art--hero { aspect-ratio: 16 / 7; }
.art--hero .icon { width: 5rem; height: 5rem; }
.art--kultur { --a1: #7c6143; --a2: #d4a373; }
.art--schlechtwetter { --a1: #44576a; --a2: #91a7b8; }
.art--wein { --a1: #5b2a43; --a2: #a35c7a; }
.art--aktiv { --a1: #1e3f20; --a2: #2a7b9b; }
.art--wasser { --a1: #1f6a87; --a2: #5fa8c4; }

/* Fotos (content/img/ziele/): Bis das Bild geladen ist, bleibt der Verlauf als Hintergrund sichtbar. */
img.art { display: block; height: auto; }
.art-figure { position: relative; margin: 0; }
.art-credit {
  position: absolute; right: 0; bottom: 0; max-width: 100%;
  padding: .25rem .625rem; border-top-left-radius: var(--r-sm);
  background: rgb(0 0 0 / .62); color: #fff; font-size: .9375rem; line-height: 1.35;
}
.art-credit a { color: inherit; }
.art-credit :focus-visible { outline-color: #fff; }

/* Bildnachweise aller Fotos einer Liste (aufklappbar) */
.credits { margin-top: 1.5rem; color: var(--muted); font-size: .9375rem; }
.credits summary {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; cursor: pointer;
  color: var(--brand-green); font-weight: 750; font-size: 1rem;
}
.credits summary .icon { width: 1.125rem; height: 1.125rem; }
.credits ul { display: grid; gap: .375rem; margin-top: .5rem; }
.credits strong { color: var(--ink); font-weight: 650; }

.tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .25rem; }
.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6875rem; border-radius: 999px; background: var(--saale-100); color: var(--saale-700);
  font-size: .9375rem; font-weight: 750;
}
.tag .icon { width: 1rem; height: 1rem; }
/* Themen-Tags verlinken auf die Themen-Seite: volle Tippfläche */
a.tag { min-height: 3rem; padding: .375rem .9375rem; font-size: .9375rem; text-decoration: none; }
@media (hover: hover) { a.tag:hover { background: var(--tint-blue-hover); } }

/* ==========================================================================
   Entdecken: Themen-Karten, Hinweis-Karte, Veranstaltungen
   ========================================================================== */

/* Themen-Karten: Verlauf je Thema – weiße Schrift erreicht an jeder Stelle mind. 7 : 1 */
.cat-cards { display: grid; gap: .75rem; }
.cat-cards > li { min-width: 0; }
.cat-card {
  display: flex; align-items: center; gap: 1rem; height: 100%;
  min-height: 5.5rem; padding: 1rem 1.125rem;
  border-radius: var(--r-lg); color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--c1, #1e3f20), var(--c2, #3e7a35));
  box-shadow: 0 10px 26px rgb(20 40 22 / .16);
}
.cat-card--wasser { --c1: #164f66; --c2: #1b5e78; }
.cat-card--kultur { --c1: #4f3b28; --c2: #6a4f33; }
.cat-card--aktiv { --c1: #1e3f20; --c2: #2f6129; }
.cat-card--wein { --c1: #5b2a43; --c2: #6a3150; }
.cat-card--schlechtwetter { --c1: #33414f; --c2: #45576a; }
.cat-card__icon {
  display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem;
  border-radius: 50%; background: rgb(255 255 255 / .18);
}
.cat-card__icon .icon { width: 1.625rem; height: 1.625rem; }
.cat-card__text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: .125rem; line-height: 1.3; }
.cat-card__text strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; }
/* volles Weiß: auf dem hellen Ende der Verläufe reicht weniger Deckkraft nicht für 7 : 1 */
.cat-card__text small { font-size: 1rem; color: #fff; }
.cat-card__chev { width: 1.25rem; height: 1.25rem; opacity: .85; transition: transform .3s var(--ease-out); }
@media (hover: hover) {
  .cat-card:hover { box-shadow: var(--shadow-lift); }
  .cat-card:hover .cat-card__chev { transform: translateX(3px); }
}

/* Hinweis-Karte auf der Themen-Seite (z. B. Saalekanucamp, Fahrradverleih) */
.feature-card {
  padding: 1.25rem; margin-bottom: 1.75rem;
  border-radius: var(--r-lg); background: var(--saale-50);
  box-shadow: inset 0 0 0 1.5px var(--feature-ring);
}
.feature-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.feature-card__icon {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem;
  border-radius: 50%; background: var(--blue-fill); color: var(--on-blue-fill);
}
/* passt der Titel nicht neben das Symbol, steht er darunter (statt mitten im Wort umzubrechen) */
.feature-card__title { flex: 1 1 0; font-size: 1.375rem; color: var(--green-900); overflow-wrap: break-word; }
.feature-card p { font-size: 1.0625rem; }
.feature-card .btn { width: 100%; margin-top: .5rem; }

/* Veranstaltungen (Entdecken) */
.event-list { display: grid; gap: .5rem; }
.event-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding: .75rem 1rem;
  background: var(--card); border-radius: var(--r-sm); box-shadow: var(--shadow-card);
}
.event-list li > span:last-child { display: flex; flex-direction: column; flex: 1 1 0; line-height: 1.3; overflow-wrap: break-word; }
.event-list strong { font-size: 1.0625rem; }
.event-list li > span:last-child small { color: var(--muted); font-size: .9375rem; }
/* wird nur bei langen Monatsnamen breiter (Estnisch „detsember“ auch bei month: "short") */
.date-badge {
  display: grid; place-items: center; align-content: center; flex: none; width: auto; min-width: 3.25rem; height: 3.25rem;
  padding-inline: .25rem; border-radius: var(--r-sm);
  background: var(--date-fill); color: var(--on-date-fill); line-height: 1;
}
.date-badge span { font-size: 1.25rem; font-weight: 800; }
/* Monat in der Schrift des Badges (≥ 7 : 1), nie in der grauen Listen-Farbe */
.date-badge small { margin-top: .125rem; font-size: .875rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; color: var(--on-date-fill); }

/* ==========================================================================
   Lageplan
   ========================================================================== */

/* Kopf: Titel, daneben „Mein Platz“ */
.map-view { margin-bottom: 1.75rem; }
.map-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.map-head .page-head { flex: 1 1 0; min-width: min(100%, 16rem); margin-bottom: 0; }
.chip--mine { background: var(--surface-inverse); border-color: var(--surface-inverse); color: var(--on-inverse); }
.chip--mine .icon { color: var(--inverse-accent); }

/* Suche nach Stellplatz oder Ort über dem Plan. Die Schließen-Taste davor und die Lupe in „Zeigen“
   gibt es nur im Vollbild (Smartphone). */
.map-top__row { display: flex; align-items: flex-start; gap: .5rem; }
.map-top__row .pitch-search { flex: 1; min-width: 0; }
.map-close, .pitch-search .btn .icon { display: none; }
.pitch-search { margin-bottom: 1rem; }
.pitch-search__row { display: flex; gap: .5rem; }
.pitch-search__row .search__field { flex: 1; min-width: 0; }
.pitch-search input {
  width: 100%; min-height: 3.25rem; padding: .75rem 3.25rem .75rem 3rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface-card);
  font: inherit; font-weight: 650; color: var(--ink); box-shadow: var(--shadow-sm); text-overflow: ellipsis;
}
.pitch-search input:focus { border-color: var(--brand-green); outline: none; box-shadow: 0 0 0 4px var(--green-100), var(--shadow-sm); }
.pitch-search input::-webkit-search-cancel-button, .pitch-search input::-webkit-calendar-picker-indicator { display: none !important; }
/* Leeres Feld: keine Löschen-Taste – der Platzhalter bekommt ihren Platz */
.pitch-search input:placeholder-shown { padding-right: 1rem; }
.pitch-search .search__clear { right: .25rem; }
.pitch-search .btn { min-height: 3.25rem; }

/* Der Plan: Original-Platzplan als Bild, Hotspots und Stellplatz-Markierung in Prozent darüber.
   Zoom, „Ansicht zurücksetzen“ und Hinweise schweben über dem Plan (.map-frame). */
.map-card { background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-card); padding: .5rem; }
.map-frame { position: relative; border-radius: calc(var(--r-xl) - .5rem); }
/* Höhe begrenzt: vergrößert scrollt der Plan in beide Richtungen in seinem Rahmen; am oberen bzw.
   unteren Rand geht das Wischen an die Seite weiter (nur seitlich „contain“ gegen Zurück-Wischen) */
.map-scroller {
  position: relative; /* Bezug für offsetLeft/offsetTop des Plans (lageplan.js) */
  max-height: min(68svh, 36rem); overflow: auto; overscroll-behavior-x: contain; border-radius: calc(var(--r-xl) - .5rem);
  background: var(--map-paper); scrollbar-width: thin; touch-action: pan-x pan-y;
  isolation: isolate; /* gewählte Punkte (z-index) bleiben unter den schwebenden Tasten */
}
/* Zoom per JavaScript (lageplan.js): Die Breite setzt das Ziel; Tasten, „zurücksetzen“ und zwei Finger bewegen
   dabei nur die Ebene darüber (transform, auf der Grafikkarte) – will-change nur während der Bewegung */
.map { position: relative; width: max(100%, calc(64rem * var(--zoom, 1))); aspect-ratio: 3201 / 1261; }
.map__layer { position: absolute; inset: 0; transform-origin: 0 0; }
.map__layer.is-moving { will-change: transform; }
.map__img { width: 100%; height: 100%; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* „Nicht gefunden“ oben im Plan, Hinweis und Sheet-Tasten unten links, Werkzeuge unten rechts */
.map-note {
  position: absolute; z-index: 2; top: .625rem; left: .625rem; max-width: calc(100% - 1.25rem);
  margin: 0; padding: .5rem .875rem; border-radius: var(--r-md); pointer-events: none;
  background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1.5px currentColor, var(--shadow-float);
  font-size: .9375rem; font-weight: 750; line-height: 1.3;
}
.map-corner { position: absolute; z-index: 2; bottom: .625rem; display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.map-corner > * { pointer-events: auto; }
.map-corner--start { left: .625rem; align-items: flex-start; max-width: calc(100% - 5rem); }
.map-corner--end { right: .75rem; }
.map-tools .tool-btn { border-color: transparent; box-shadow: var(--shadow-float); }
.map-tools .tool-btn:disabled { opacity: 1; color: var(--disabled-ink); }
.map-hint {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .375rem .875rem .375rem .75rem;
  border-radius: 999px; background: var(--glass-solid); color: var(--muted); box-shadow: var(--shadow-sm);
  font-size: .9375rem; font-weight: 650; line-height: 1.25;
}
.map-corner > .map-hint { pointer-events: none; }
.map-hint .icon { width: 1.125rem; height: 1.125rem; }
.map-frame.is-used .map-hint { display: none; }
.map-more { display: none; flex-wrap: wrap; gap: .5rem; }
.map-pill {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 3rem; padding: .375rem 1rem .375rem .75rem;
  border: 0; border-radius: 999px; background: var(--surface-card); color: var(--green-900); box-shadow: var(--shadow-float);
  font-size: .9375rem; font-weight: 750; line-height: 1.2; text-align: start;
}
.map-pill .icon { width: 1.25rem; height: 1.25rem; color: var(--accent-bright); }
.map-pill--mine { background: var(--surface-inverse); color: var(--on-inverse); }
.map-pill--mine .icon { color: var(--inverse-accent); }

/* Hotspot genau über dem gedruckten Symbol bzw. der Beschriftung: feiner Ring in der Bereichsfarbe
   zeigt, was sich antippen lässt; die Tippfläche ist größer als der Ring (::before).
   Schräg gedruckte Beschriftungen (Pfeile) bekommen einen gedrehten Rahmen (--r), der sie umschließt. */
.spot {
  position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  padding: 0; border: 0; border-radius: 7px; background: none; cursor: pointer;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--spot, var(--forest-700));
}
.spot--round { aspect-ratio: 1; border-radius: 50%; }
.spot::before { content: ""; position: absolute; inset: -.5rem; border-radius: inherit; }
.spot--blue { --spot: var(--saale-blue); }
.spot--amber { --spot: var(--amber-600); }
.spot--gold { --spot: #9a6c3c; }
.spot--green { --spot: var(--forest-700); }
.spot:focus-visible { outline: 3px solid var(--forest-900); outline-offset: 6px; }
/* Gewählter Punkt samt Namensschild liegt über allen anderen Punkten und der Stellplatz-Markierung */
.spot:is(.is-active, .is-found, :focus-visible) { z-index: 3; }
.spot.is-active, .spot.is-found, .map.is-filtered .spot {
  background: rgb(255 255 255 / .2);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--spot, var(--forest-700)), 0 6px 18px rgb(20 40 22 / .3);
}
html:not([data-motion="off"]) .spot:is(.is-active, .is-found)::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  box-shadow: 0 0 0 4px var(--spot, var(--forest-700)); animation: spot-pulse 1.6s var(--ease-out) 3;
}
/* Gesuchter Punkt: pulsiert dezent, bis neu gesucht oder die Ansicht zurückgesetzt wird */
html:not([data-motion="off"]) .spot.is-found::after { animation: map-pulse 2s var(--ease-out) infinite; }
@keyframes spot-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@keyframes map-pulse { 0% { opacity: .85; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
.spot__live { position: absolute; top: -.375rem; right: -.375rem; width: .875rem; height: .875rem; border: 2px solid #fff; }
/* Namensschild: Anker (--lx/--ly) und Ausrichtung berechnet lageplan.js – unter dem Rahmen, am Rand des
   Plans nach innen bzw. darüber; bei gedrehten Rahmen wieder waagerecht */
.spot__label {
  position: absolute; left: var(--lx, 50%); top: var(--ly, 100%); transform-origin: 0 0;
  transform: rotate(calc(-1 * var(--r, 0deg))) translate(var(--lt, -50%), .5rem);
  display: none; width: max-content; max-width: 10rem; padding: .25rem .5rem; border-radius: 8px;
  background: var(--forest-900); color: #fff; box-shadow: var(--shadow-sm);
  font-size: .8125rem; font-weight: 750; line-height: 1.2; text-align: center; pointer-events: none;
}
.spot--up .spot__label { transform: rotate(calc(-1 * var(--r, 0deg))) translate(var(--lt, -50%), calc(-100% - .5rem)); }
.spot--start { --lt: 0%; }
.spot--end { --lt: -100%; }
.spot:is(.is-active, .is-found, :focus-visible) .spot__label { display: block; }
@media (hover: hover) {
  .spot:hover { z-index: 3; background: rgb(255 255 255 / .25); }
  .spot:hover .spot__label { display: block; }
}

/* Gefundener bzw. eigener Stellplatz: Rahmen in der Farbe der Stellplatz-Art, Schild mit der Nummer.
   Gesuchte Plätze pulsieren dezent, bis neu gesucht oder die Ansicht zurückgesetzt wird. */
.pitch-marker {
  position: absolute; z-index: 1; transform: translate(-50%, -50%); border-radius: 4px; pointer-events: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--pitch, var(--forest-900)), 0 0 0 9px rgb(255 255 255 / .85), 0 8px 22px rgb(20 40 22 / .35);
}
html:not([data-motion="off"]) .pitch-marker.is-pulsing::after {
  content: ""; position: absolute; inset: -8px; border-radius: 6px;
  box-shadow: 0 0 0 4px var(--pitch, var(--forest-900)); animation: map-pulse 2s var(--ease-out) infinite;
}
.pitch-marker__tag {
  position: absolute; bottom: calc(100% + .75rem); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  width: max-content; max-width: 13rem; padding: .25rem .75rem; border-radius: var(--r-sm);
  background: var(--forest-900); color: #fff; box-shadow: var(--shadow-sm);
  font-size: .875rem; font-weight: 800; line-height: 1.25; text-align: center;
}
.pitch-marker__tag strong { white-space: nowrap; }
.pitch-marker__tag small { font-size: .75rem; font-weight: 650; opacity: .9; }
.pitch-marker__tag small:empty { display: none; }
.pitch-marker__tag::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -.375rem;
  border: .375rem solid transparent; border-top-color: var(--forest-900);
}

/* Legende der Stellplatz-Arten (Farben wie im gedruckten Plan) */
.pitch-types { display: grid; gap: .5rem 1.25rem; margin-bottom: 1.75rem; }
.pitch-types li { display: flex; align-items: center; gap: .75rem; }
.pitch-types li > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pitch-types small { color: var(--muted); font-size: .9375rem; }
.pitch-types__swatch {
  flex: none; width: 2.25rem; height: 1.375rem; border-radius: 6px;
  background: #fff; box-shadow: inset 0 0 0 3px var(--pitch);
}
.sheet__body > .pitch-types { margin-bottom: 0; }

.map-extra > :is(section, .btn-row) { margin-bottom: 1.75rem; }

/* ---------- Smartphone: Vorschau auf der Seite, Plan im Vollbild ----------
   Die Seite zeigt statt des Plans eine Vorschau (Ausschnitt um den eigenen Stellplatz bzw. die Rezeption)
   mit „Karte im Vollbild öffnen“ und einer Such-Taste; Legende und alle Orte stehen darunter. Der Plan
   (.map-stage) öffnet sich als Vollbild über Kopfzeile und Leiste (lageplan.js, html.map-full). Darüber
   schweben oben Schließen, Suche und Filter, unten links „Alle Orte“, Legende und „Mein Platz“ (Sheets),
   unten rechts Zoom und „Ansicht zurücksetzen“. Bedingung wie PHONE in lageplan.js. */

.map-teaser { display: none; margin-bottom: 1.75rem; }

/* Such-Taste im Look des Suchfelds: öffnet das Vollbild mit Tastatur im Suchfeld */
.map-launch {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.25rem; margin-bottom: .875rem;
  padding: .75rem 1rem .75rem 1.125rem; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface-card); color: var(--muted); box-shadow: var(--shadow-sm);
  font-weight: 650; line-height: 1.3; text-align: start;
}
.map-launch:focus-visible { border-radius: var(--r-sm); }

/* Vorschau: eine große Taste. Ausschnitt mit Container-Einheiten um den Punkt (--px/--py) zentriert,
   am Rand des Plans begrenzt; ohne Container-Einheiten mittig zugeschnitten und ohne Schild. */
.map-preview {
  position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: 15rem; height: clamp(14rem, 46svh, 24rem); padding: 1rem; overflow: hidden;
  border: 0; border-radius: var(--r-xl); background: var(--map-paper); box-shadow: var(--shadow-card);
  color: inherit; text-align: center;
}
.map-preview:focus-visible { border-radius: var(--r-xl); }
.map-preview::after {
  content: ""; position: absolute; inset: 45% 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgb(14 30 18 / .55), rgb(14 30 18 / 0));
}
.map-preview__art { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.map-preview__plan { position: absolute; inset: 0; }
.map-preview__plan img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-select: none; }
.map-preview__pin { display: none; }
@supports (width: 1cqh) {
  .map-preview__plan {
    --w: max(100cqw, 100cqh * 3201 / 1261);
    inset: auto; width: var(--w); aspect-ratio: 3201 / 1261;
    left: clamp(100cqw - var(--w), 50cqw - var(--w) * var(--px, .5), 0px);
    top: clamp(100cqh - var(--w) * 1261 / 3201, 50cqh - var(--w) * 1261 / 3201 * var(--py, .5), 0px);
  }
  .map-preview__plan img { object-fit: fill; }
  .map-preview__pin {
    display: block; position: absolute; width: .875rem; height: .875rem; margin: -.4375rem 0 0 -.4375rem;
    border-radius: 50%; background: var(--forest-900); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgb(20 40 22 / .35);
  }
}
/* Punkt nah am oberen Rand: Schild unter dem Punkt */
.map-preview__pin.is-below .pitch-marker__tag { bottom: auto; top: calc(100% + .75rem); }
.map-preview__pin.is-below .pitch-marker__tag::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--forest-900); }
.map-preview__cta {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  max-width: 100%; min-height: 3.5rem; padding: .75rem 1.5rem; border-radius: 999px;
  background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 10px 28px rgb(0 0 0 / .32);
  font-size: 1.0625rem; font-weight: 750; line-height: 1.2;
}
.map-preview__cta .icon { width: 1.3rem; height: 1.3rem; }
@media (hover: hover) {
  .map-preview:hover .map-preview__cta { background: var(--accent-fill-hover); }
}

/* Vollbild: Seite steht still, Kopfzeile, Leiste und Hinweis-Banner treten nach dem Einblenden zurück */
html.map-full { overflow: hidden; }
html.map-full :is(.appbar, .tabbar, .install-banner) { visibility: hidden; transition: visibility 0s .3s; }
.map-stage:focus { outline: none; }
@keyframes map-full-in { from { opacity: 0; transform: scale(.97); } }
@keyframes map-full-out { to { opacity: 0; transform: scale(.98); } }

@media screen and (max-width: 47.99em), screen and (max-height: 29.99em) and (pointer: coarse) {
  /* Kopf kompakt, ohne Einleitung: Vorschau und „Karte im Vollbild öffnen“ stehen weit oben */
  .map-head { align-items: center; margin-bottom: 1rem; }
  .map-head .page-head { flex: 1 1 auto; min-width: 0; }
  .map-head .page-head h1 { font-size: 1.5rem; gap: .375rem .625rem; }
  .map-head .head-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--r-icon-sm); }
  .map-head .head-icon .icon { width: 1.25rem; height: 1.25rem; }
  .map-head .lead { display: none; }
  .map-head .chip { min-height: 3rem; padding: .375rem .875rem; }
  .map-teaser { display: block; }

  /* Die Ebene liegt fertig aufgebaut bereit (unsichtbar, ohne Berührungen) – Öffnen schaltet sie nur sichtbar.
     Sie scrollt selbst nicht: Wischen an den Leisten läuft nicht an die Seite dahinter weiter. */
  .map-stage {
    position: fixed; inset: 0; z-index: 35; overflow: hidden; overscroll-behavior: contain;
    background: var(--bg); visibility: hidden;
  }
  .map-stage.is-open { visibility: visible; }
  html:not([data-motion="off"]) .map-stage.is-open { animation: map-full-in .32s var(--ease-out); }
  html:not([data-motion="off"]) .map-stage.is-closing { animation: map-full-out .22s ease-in forwards; }
  /* Beim Ausblenden fängt das Vollbild keine Berührungen mehr ab – sie gehen an die Seite darunter */
  .map-stage.is-closing { pointer-events: none; }

  /* Plan randlos über den ganzen Bildschirm. Abstandhalter oben und unten (so hoch wie die schwebenden
     Leisten, --map-top/--map-bottom aus lageplan.js) geben Scroll-Raum: Was am Rand unter Suche oder Tasten
     liegt, lässt sich hervorziehen. Ganz herausgezoomt steht der Plan mittig auf dem Seitenhintergrund
     (automatische Ränder in Flexbox: bei größerem Plan bleibt alles erreichbar). */
  .map-stage .map-card { position: absolute; inset: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .map-stage .map-frame { position: absolute; inset: 0; border-radius: 0; container-type: size; }
  .map-stage .map-scroller {
    position: absolute; inset: 0; display: flex; flex-direction: column; max-height: none; border-radius: 0;
    background: var(--bg); overscroll-behavior: contain;
  }
  .map-stage .map-scroller::before, .map-stage .map-scroller::after { content: ""; flex: none; }
  .map-stage .map-scroller::before { height: var(--map-top, 8.5rem); }
  .map-stage .map-scroller::after { height: calc(var(--map-bottom, 5rem) + var(--map-lift, 0px)); }
  .map-stage .map { flex: none; margin: auto; box-shadow: var(--shadow-card); }

  /* Oben: Schließen und Suche in einer Zeile, darunter die Filter – nur die Tasten fangen Berührungen ab */
  .map-top {
    position: absolute; z-index: 4; inset: 0 0 auto;
    padding: calc(env(safe-area-inset-top) + .75rem) var(--gutter) 0;
    pointer-events: none;
  }
  .map-top :is(.map-close, .pitch-search, .chip) { pointer-events: auto; }
  .map-top__row { max-width: 36rem; }
  .map-close { display: inline-flex; flex: none; width: 3.25rem; height: 3.25rem; border-color: transparent; box-shadow: var(--shadow-float); }
  .map-stage .pitch-search { margin: 0; }
  .map-stage .pitch-search .search__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* Suchfeld als schwebende Kapsel; „Zeigen“ wird zur Lupe rechts im Feld, davor (x) zum Löschen */
  .map-stage .pitch-search__row { position: relative; }
  .map-stage .search__field > .icon { display: none; }
  .map-stage .pitch-search input {
    padding: .75rem 6.25rem .75rem 1.125rem; border-color: transparent; box-shadow: var(--shadow-float);
  }
  .map-stage .pitch-search input:placeholder-shown { padding-right: 3.75rem; }
  .map-stage .pitch-search input:focus { border-color: var(--brand-green); box-shadow: 0 0 0 4px var(--green-100), var(--shadow-float); }
  .map-stage .pitch-search .search__clear { right: 3.375rem; width: 2.75rem; height: 2.75rem; }
  .map-stage .pitch-search .btn {
    position: absolute; top: 50%; right: .25rem; width: 2.75rem; min-height: 0; height: 2.75rem; padding: 0;
    transform: translateY(-50%); box-shadow: none;
  }
  html:not([data-motion="off"]) .map-stage .pitch-search .btn:active { transform: translateY(-50%) scale(.92); }
  .map-stage .pitch-search .btn .icon { display: block; }
  .map-stage .pitch-search .btn span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .map-stage .chip-scroll--filter { margin: 0 !important; }
  .map-stage .chip-scroll ul { padding-block: .625rem .75rem; pointer-events: none; }
  .map-stage .chip { border-color: transparent; box-shadow: var(--shadow-float); }

  /* „Nicht gefunden“ unter der schwebenden Leiste (Höhe: --map-top aus lageplan.js) */
  .map-stage .map-note { top: calc(var(--map-top, 8.5rem) + .25rem); left: var(--gutter); max-width: calc(100% - 2 * var(--gutter)); }

  /* Unten: Sheets links, Zoom rechts – als schwebende Tasten über dem Plan */
  .map-stage .map-corner { bottom: calc(env(safe-area-inset-bottom) + 1rem); }
  .map-stage .map-corner--start { left: var(--gutter); max-width: calc(100% - var(--gutter) - 5.5rem); }
  .map-stage .map-corner--end { right: var(--gutter); }
  .map-stage .map-more { display: flex; }
  .map-stage .map-tools .tool-btn { width: 3.5rem; height: 3.5rem; }
  .map-stage .map-tools .tool-btn .icon { width: 1.5rem; height: 1.5rem; }

  .map-extra .btn-row { margin-top: .75rem; }
}
/* Wenig Höhe (Querformat): Zoom-Tasten nebeneinander */
@container (max-height: 26rem) {
  .map-stage .map-tools { flex-direction: row; }
  .map-stage .map-corner--start { max-width: calc(100% - 14rem); }
}
/* Kleiner Rahmen (kleines Handy, große Schrift): der Hinweis „wischen“ würde die Tasten verdecken */
@container (max-width: 21rem) or (max-height: 20rem) {
  .map-hint { display: none; }
}

.spot-list { display: grid; gap: .5rem; }
.spot-list .hub-item__icon.tone--blue { background: var(--tile-blue); color: var(--saale-700); }
.spot-list .hub-item__icon.tone--green { background: var(--tile); color: var(--accent-bright); }
.spot-list .hub-item__icon.tone--amber { background: var(--tile-amber); color: var(--amber-ink); }
.spot-list .hub-item__icon.tone--gold { background: var(--tile-gold); color: var(--text-gold); }

/* ==========================================================================
   Listen-Karten (Services, Profil, Lageplan-Liste)
   ========================================================================== */

.hub-list { display: grid; gap: .625rem; }
.hub-item {
  display: flex; align-items: center; gap: .875rem; width: 100%;
  min-height: 4.5rem; padding: .75rem 1rem;
  background: var(--card); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none; text-align: left; font: inherit;
}
.hub-item__icon {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--r-icon);
  background: var(--tile); color: var(--accent-bright);
}
.hub-list > li:nth-child(3n + 2) .hub-item__icon { background: var(--tile-blue); color: var(--saale-700); }
.hub-list > li:nth-child(3n + 3) .hub-item__icon { background: var(--tile-gold); color: var(--text-gold); }
.hub-list > li .hub-item--danger .hub-item__icon { background: var(--stop-bg); color: var(--stop-ink); }
.hub-item__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.hub-item__text strong { font-size: 1.0625rem; font-weight: 750; }
.hub-item__text small { color: var(--muted); font-size: .9375rem; }
.hub-item__chev { color: var(--muted); width: 1.25rem; height: 1.25rem; }
@media (hover: hover) { .hub-item:hover { box-shadow: var(--shadow-lift); } }

/* ==========================================================================
   Profil
   ========================================================================== */

.stay-card__info {
  display: flex; align-items: center; gap: .625rem; padding: .75rem 1rem; margin-bottom: 1rem;
  border-radius: var(--r-sm); background: var(--amber-100); color: var(--amber-ink); font-weight: 750;
}
.stay-form { display: grid; gap: 1rem; }
.stay-form .btn-row { margin-top: 0; }

.settings { display: grid; gap: .75rem; }
.settings > .section-title { margin-bottom: .125rem; }
.setting { display: grid; gap: .875rem; padding: 1rem 1.125rem; }
.setting__head { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; }
.setting__icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--r-icon); background: var(--tile); color: var(--accent-bright); }
.setting__text { display: flex; flex-direction: column; flex: 1 1 10rem; min-width: 0; line-height: 1.3; }
.setting__text strong { font-size: 1.0625rem; }
.setting__text small { color: var(--muted); font-size: .9375rem; }
.setting__hint { color: var(--muted); font-size: .9375rem; margin: 0; }

.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .25rem;
  padding: .3125rem; border-radius: var(--r-md); background: var(--sand-200);
}
.segmented button {
  min-height: 3rem; padding: .375rem .5rem; border: 0; border-radius: calc(var(--r-md) - .3125rem); background: transparent;
  color: var(--muted); font-weight: 750; font-size: 1rem;
}
.segmented button[aria-pressed="true"] { background: var(--surface-raised); color: var(--green-900); box-shadow: var(--ring), var(--shadow-sm); }
.segmented[aria-labelledby="theme-label"] { display: flex; flex-wrap: wrap; }
.segmented[aria-labelledby="theme-label"] button { flex: 1 1 auto; }
.seg-a { font-family: var(--font-display); font-weight: 650; line-height: 1; }
.seg-a--0 { font-size: 1.0625rem; } .seg-a--1 { font-size: 1.375rem; } .seg-a--2 { font-size: 1.75rem; }

.privacy-note { display: flex; align-items: flex-start; gap: .625rem; }
.privacy-note .icon { color: var(--accent-bright); margin-top: .125rem; }

/* Formularfelder */
.field { display: grid; gap: .375rem; }
.field__label { font-weight: 750; }
.field__label small { font-weight: 400; color: var(--muted); }
.field textarea, .field input, .field select {
  width: 100%; min-height: 3.375rem; padding: .75rem 1.125rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-warm); font-size: 1.125rem;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field textarea:focus, .field input:focus, .field select:focus { border-color: var(--brand-green); outline: none; box-shadow: 0 0 0 4px var(--green-100); background: var(--surface); }
.field__hint { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: var(--muted); font-size: .9375rem; }
.field__hint .icon { width: 1.125rem; height: 1.125rem; margin-top: .125rem; color: var(--accent-bright); }
/* Eigene Fehlermeldungen unter dem Feld (in der Sprache der App statt der des Browsers) */
.field__error { margin: 0; color: var(--stop-ink); font-size: .9375rem; font-weight: 650; }
.field :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--stop); background: var(--surface); }

/* ==========================================================================
   Sauna anfragen
   ========================================================================== */

.sauna-rules { display: flex; align-items: flex-start; gap: .5rem; margin: .875rem 0 1.25rem; color: var(--muted); font-size: 1rem; font-weight: 650; }
.sauna-rules .icon { width: 1.25rem; height: 1.25rem; margin-top: .0625rem; color: var(--accent-bright); }
.sauna-reception__time { display: block; font-size: 1rem; }
/* Aufbau: Schritte 1–3, darunter „Ihre Anfrage“ mit Gesamtpreis und Senden (am Desktop rechts mitlaufend).
   minmax(0, 1fr): die waagerecht scrollende Tages-Leiste darf das Formular nicht verbreitern */
.sauna-form, .sauna-form__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.sauna-form { margin-bottom: 1.75rem; }
.sauna-step, .sauna-checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1.125rem; }
.sauna-step__title {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--font); font-size: 1.1875rem; font-weight: 750; color: var(--green-900);
}
.sauna-step__no {
  display: grid; place-items: center; flex: none; width: 1.875rem; height: 1.875rem; border-radius: 999px;
  background: var(--surface-inverse); color: var(--on-inverse); font-size: .9375rem;
}
.sauna-step__hint { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: var(--muted); font-size: .9375rem; }
.sauna-step__hint .icon { width: 1.125rem; height: 1.125rem; margin-top: .125rem; color: var(--accent-bright); }
.sauna-step .chip-scroll ul { padding-block: .125rem .375rem; }

/* Tage als Chips (Heute · Morgen · Sa. 24.10.; schon angefragte Tage ausgegraut mit „angefragt“) */
.day-chip small { font-size: .9375rem; font-weight: 650; color: var(--muted); }
.day-chip[aria-pressed="true"] small { color: var(--on-selected-muted); }
.chip:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* Personen je Preisgruppe: Bezeichnung und Preis links, − Zahl + rechts */
.sauna-groups { display: grid; gap: .5rem; }
.sauna-group {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .625rem .625rem .625rem 1rem; border-radius: var(--r-sm); background: var(--bg-warm);
}
.sauna-group__text { display: flex; flex-direction: column; flex: 1 1 9rem; min-width: 0; line-height: 1.3; }
.sauna-group__label { font-weight: 750; font-size: 1.0625rem; }
.sauna-group__price { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; gap: .125rem; flex: none; margin-inline-start: auto; }
.stepper__btn {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px;
  border: 1.5px solid var(--border-strong); background: var(--surface-card); color: var(--green-900); box-shadow: var(--shadow-sm);
}
.stepper__btn .icon { width: 1.25rem; height: 1.25rem; }
.stepper__btn[aria-disabled="true"] { opacity: .4; cursor: default; box-shadow: none; }
.stepper__value {
  width: 3rem; min-height: 3rem; padding: 0; border: 0; border-radius: var(--r-xs); background: transparent;
  text-align: center; font-size: 1.3125rem; font-weight: 750; font-variant-numeric: tabular-nums;
  appearance: textfield; -moz-appearance: textfield;
}
.stepper__value::-webkit-inner-spin-button, .stepper__value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sauna-step__problem { margin: 0; color: var(--stop-ink); font-weight: 650; }

.sauna-fields { display: grid; gap: 1rem; }

/* Handy/Tablet: Leiste mit Tag, Personen und Gesamtpreis bleibt über der Navigation sichtbar,
   solange die Schritte 1–3 zu sehen sind; beim Tippen in ein Textfeld ausgeblendet (Tastatur) */
.sauna-bar {
  position: sticky; z-index: 20; bottom: calc(var(--float-space) + .5rem);
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem;
  padding: .5rem .875rem .5rem 1.125rem; border: 0; border-radius: var(--r-md);
  background: var(--surface-inverse); color: var(--on-inverse); box-shadow: var(--shadow-float); text-align: start;
}
.sauna-bar__info { flex: 1; min-width: 0; font-weight: 650; font-size: .9375rem; line-height: 1.3; }
.sauna-bar__total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.sauna-bar__total small { font-size: .9375rem; color: var(--on-inverse-muted); }
.sauna-bar__total strong { font-size: 1.3125rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sauna-bar > .icon { flex: none; width: 1.25rem; height: 1.25rem; }
.sauna-form:has(.sauna-fields :focus) .sauna-bar { visibility: hidden; }

/* Ihre Anfrage: Übersicht, Gesamtpreis, Zahlungshinweis, Spamschutz, Senden */
.sauna-bill { display: grid; gap: .625rem; margin: 0; }
/* Tag und Zeit: Bezeichnung klein darüber; Personen: Bezeichnung links, Preis rechts */
.sauna-bill__row dt { color: var(--muted); font-size: .9375rem; font-weight: 650; }
.sauna-bill__row dd { margin: 0; font-weight: 650; }
.sauna-bill__row dd small { display: block; color: var(--muted); font-size: .9375rem; font-weight: 600; }
.sauna-bill__row--price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sauna-bill__row--price dt { color: var(--ink); font-size: 1rem; font-weight: 400; }
.sauna-bill__row--price dd { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sauna-bill__row--error dd { color: var(--stop-ink); }
.sauna-bill__row--empty dd { color: var(--muted); font-weight: 600; }
.sauna-bill__total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem;
  margin: 0; padding-top: .75rem; border-top: 1.5px solid var(--line);
}
.sauna-bill__total span { font-weight: 750; }
.sauna-bill__total strong {
  margin-inline-start: auto; font-size: 1.875rem; font-weight: 800; line-height: 1.1; color: var(--green-900);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sauna-pay, .sauna-done__pay {
  display: flex; align-items: flex-start; gap: .625rem; margin: 0; padding: .875rem 1rem; border-radius: var(--r-sm);
  background: var(--gold-100); box-shadow: inset 0 0 0 1.5px rgb(212 163 115 / .45); font-weight: 600; line-height: 1.45;
}
.sauna-pay .icon, .sauna-done__pay .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .0625rem; color: var(--amber-ink); }
.sauna-checkout .privacy-note { margin: 0; font-size: .9375rem; }
.sauna-captcha { display: grid; gap: .5rem; }
.sauna-captcha__label { margin: 0; color: var(--muted); font-size: .9375rem; font-weight: 650; }
.sauna-captcha__widget { min-height: 65px; }
.sauna-mine__captcha { margin-top: .75rem; }
.sauna-send__btn { width: 100%; }
.sauna-send__why { margin: 0; color: var(--stop-ink); font-weight: 650; font-size: 1rem; }
.sauna-error p { margin-bottom: .75rem; font-size: 1.0625rem; }
.sauna-error .btn-row { margin-top: 0; }
.sauna-done { margin-bottom: 1.75rem; }
/* Nach dem Senden bzw. Entfernen nicht unter der festen Kopfzeile verschwinden; Felder beim Fokus
   nicht unter der Preis-Leiste und der Navigation */
.sauna-done, .sauna-step__title, #sauna-mine-title, .sauna-form :is(input, textarea, .stepper__btn) { scroll-margin-top: calc(var(--appbar-h) + env(safe-area-inset-top) + 1rem); }
.sauna-form :is(input, textarea, .stepper__btn) { scroll-margin-bottom: calc(var(--float-space) + 4.5rem); }
.sauna-ref { white-space: nowrap; }
.sauna-done .card__title .icon { color: var(--ok-ink); }
.sauna-done__slot { font-size: 1.1875rem; }
.sauna-done__ref, .sauna-request small { color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }

/* Meine Anfragen (auf dem Gerät gespeichert) */
.sauna-mine { display: grid; gap: .625rem; }
.sauna-request {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem;
  padding: .875rem 1rem; border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-card);
}
.sauna-request__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r-icon); background: var(--amber-100); color: var(--amber-ink); }
.sauna-request__text { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; line-height: 1.35; }
.sauna-request__state { color: var(--warn-ink); font-size: .9375rem; font-weight: 650; }
.sauna-request__actions { display: flex; flex-wrap: wrap; gap: .375rem; }
.sauna-request__msg { flex-basis: 100%; margin: 0; font-weight: 650; color: var(--green-900); }
.sauna-mine__hint { margin: .75rem 0 0; color: var(--muted); font-size: .9375rem; }

@media (min-width: 40em) {
  /* Am Tablet/Desktop umbrechen die Tage statt seitlich zu scrollen (Maus ohne Wisch-Geste) */
  .sauna-step .chip-scroll ul { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .sauna-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sauna-fields > .field__hint, .sauna-fields__wide { grid-column: 1 / -1; }
  .sauna-send__btn { width: auto; justify-self: start; min-width: 16rem; }
}

/* Desktop: „Ihre Anfrage“ läuft rechts neben den Schritten mit – die Preis-Leiste entfällt */
@media (min-width: 60em) and (min-height: 46em) {
  .sauna-form { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); align-items: start; }
  .sauna-checkout { position: sticky; top: calc(var(--appbar-h) + env(safe-area-inset-top) + 1rem); }
  .sauna-checkout .sauna-send__btn { width: 100%; min-width: 0; justify-self: stretch; }
  .sauna-bar { display: none; }
}

/* ==========================================================================
   Hausordnung
   ========================================================================== */

.ampel-grid { display: grid; gap: 1rem; }
.ampel {
  position: relative; overflow: hidden;
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  padding: 1.25rem 1.25rem 1.125rem;
}
.ampel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: .3125rem; background: var(--ok); }
.ampel--soon::before { background: var(--warn); }
.ampel--active::before { background: var(--stop); }
.ampel__head { display: flex; align-items: center; gap: 1rem; }
.ampel__title { font-family: var(--font); font-size: 1rem; color: var(--muted); font-weight: 750; }
.ampel__state { font-size: 1.25rem; font-weight: 750; line-height: 1.3; margin: .125rem 0 0; }

.light {
  display: grid; place-items: center; flex: none;
  width: 3.25rem; height: 3.25rem; border-radius: var(--r-icon);
  color: #fff; background: var(--ok);
  box-shadow: 0 6px 16px rgb(46 133 64 / .28);
}
.light .icon { width: 1.75rem; height: 1.75rem; }
.ampel--soon .light { background: var(--warn); color: var(--soot-900); box-shadow: 0 6px 16px rgb(227 160 8 / .3); }
.ampel--active .light { background: var(--stop); box-shadow: 0 6px 16px rgb(200 55 45 / .28); }

.timeline { margin-top: 1.125rem; }
.timeline__bar { position: relative; height: 1rem; }
.timeline__track { position: absolute; inset: 0; border-radius: 999px; background: var(--ok); overflow: hidden; }
.timeline__seg { position: absolute; top: 0; bottom: 0; background: var(--stop); }
.timeline__now {
  position: absolute; top: -.4375rem; bottom: -.4375rem; width: .3125rem; margin-left: -.15625rem;
  background: var(--surface-inverse); border-radius: 3px; box-shadow: 0 0 0 2px var(--surface);
}
.timeline__scale { display: flex; justify-content: space-between; font-size: .9375rem; color: var(--muted); margin-top: .375rem; }
.timeline__legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9375rem; color: var(--muted); margin-top: .25rem; }
.dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 999px; margin-right: .375rem; vertical-align: -.05em; }
.dot--inactive { background: var(--ok); }
.dot--active { background: var(--stop); }
.dot--now { background: var(--surface-inverse); width: .25rem; border-radius: 2px; }

.times { list-style: none; margin: 0; padding: .25rem 1.25rem; }
.times__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .875rem; padding: .875rem 0; }
.times__row + .times__row { border-top: 1px solid var(--line); }
.times__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-icon-sm); background: var(--tile-soft); color: var(--accent-bright); }
.times__icon .icon { width: 1.25rem; height: 1.25rem; }
/* min-width: 0 + break-word: die Bezeichnung bricht nur an Wortgrenzen und schrumpft nicht auf einen Buchstaben */
.times__label { min-width: 0; font-weight: 650; line-height: 1.3; overflow-wrap: break-word; }
.times__label small { display: block; color: var(--muted); font-weight: 400; }
.times__value { font-weight: 750; text-align: right; color: var(--green-900); }
/* Smartphone bis 400 px (bei größerer Schrift bis 30em): Uhrzeit unter der Bezeichnung */
@media (max-width: 25em) {
  .times__row { grid-template-columns: auto minmax(0, 1fr); row-gap: .125rem; }
  .times__icon { grid-row: span 2; align-self: start; }
  .times__value { grid-column: 2; text-align: start; }
}
@media (max-width: 29.99em) {
  html:is([data-font-scale="1"], [data-font-scale="2"]) .times__row { grid-template-columns: auto minmax(0, 1fr); row-gap: .125rem; }
  html:is([data-font-scale="1"], [data-font-scale="2"]) .times__icon { grid-row: span 2; align-self: start; }
  html:is([data-font-scale="1"], [data-font-scale="2"]) .times__value { grid-column: 2; text-align: start; }
}

.rule-group__title {
  display: flex; align-items: center; gap: .625rem; font-size: 1.3125rem; margin-bottom: .75rem;
  padding: .75rem 1.125rem; border-radius: var(--r-sm);
}
.rule-group--allowed .rule-group__title { background: var(--ok-bg); color: var(--ok-ink); }
.rule-group--limited .rule-group__title { background: var(--warn-bg); color: var(--warn-ink); }
.rule-group--forbidden .rule-group__title { background: var(--stop-bg); color: var(--stop-ink); }

.rules { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-card); overflow: hidden; }
.rules li + li { border-top: 1px solid var(--line); }
.rule { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; color: var(--ink); text-decoration: none; min-height: 4.25rem; }
.rule:hover { background: var(--bg-warm); }
.rule__icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--r-icon); }
.rule-group--allowed .rule__icon { background: var(--ok-bg); color: var(--ok-ink); }
.rule-group--limited .rule__icon { background: var(--warn-bg); color: var(--warn-ink); }
.rule-group--forbidden .rule__icon { background: var(--stop-bg); color: var(--stop-ink); }
.rule__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.4; }
.rule__text span { color: var(--muted); font-size: 1rem; }
.rule__chev { color: var(--muted); width: 1.25rem; height: 1.25rem; }

.rules-footer { margin-top: 1.75rem; }

/* ==========================================================================
   Themenseiten
   ========================================================================== */

.toc { margin-bottom: 1.75rem; }
.toc__label { display: block; font-weight: 750; margin-bottom: .5rem; }
.toc .link-chip { color: var(--ink); }

.block { scroll-margin-top: calc(var(--appbar-h) + env(safe-area-inset-top) + 1rem); }
.block__title { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; font-size: 1.4375rem; color: var(--green-900); margin-bottom: 1rem; }
.block__icon {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem;
  border-radius: var(--r-icon); background: var(--tile); color: var(--accent-bright);
}
/* Abschnitt ohne Kästchen (z. B. Notrufnummern): getönte Kachel auf der Seite */
.block:not(.card) .block__icon { background: var(--green-100); }
.az-links { margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.az-links__label { display: block; font-size: .9375rem; color: var(--muted); font-weight: 700; margin-bottom: .5rem; }

/* Notrufnummern */
.calls { display: grid; gap: .75rem; }
.call {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 1rem; row-gap: .125rem;
  min-height: 5.25rem; padding: 1rem 1.125rem;
  background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none;
}
.call:hover { box-shadow: var(--shadow-lift); }
.call__icon {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem;
  border-radius: var(--r-icon); background: var(--tile); color: var(--accent-bright);
}
.call__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.call__label { font-weight: 750; }
.call__note { color: var(--muted); font-size: .9375rem; }
.call__number { font-size: 1.375rem; font-weight: 800; white-space: nowrap; color: var(--green-900); }
.call--danger { background: linear-gradient(135deg, #a3271f, var(--stop-fill)); color: #fff; box-shadow: 0 14px 34px rgb(168 42 33 / .3); }
.call--danger:hover { background: var(--stop-fill-hover); }
.call--danger .call__icon { background: rgb(255 255 255 / .18); color: #fff; }
.call--danger .call__number { color: #fff; font-size: 2.125rem; }
.call--danger .call__note { color: #fff; }
.call--primary { box-shadow: inset 0 0 0 2px var(--brand-green), var(--shadow-card); }
.call--primary .call__icon { background: var(--accent-fill); color: var(--on-accent); }
/* Smartphone: Nummer unter der Bezeichnung – auch bei den roten Notruf-Karten,
   sonst lässt die große „112“ für „Rettungsdienst“ zu wenig Platz */
@media (max-width: 30em) {
  .call { grid-template-columns: auto minmax(0, 1fr); }
  /* Große Schrift: lange Nummern dürfen an den Leerzeichen umbrechen */
  .call .call__number { grid-column: 2; white-space: normal; }
}

.notice { border-radius: var(--r-md); padding: 1.125rem 1.25rem; }
.notice--info { background: var(--info-bg); box-shadow: inset 0 0 0 1.5px rgb(42 123 155 / .25); }
.notice--danger { background: var(--stop-bg); box-shadow: inset 0 0 0 1.5px rgb(200 55 45 / .2); }
.notice__title { display: flex; align-items: center; gap: .625rem; font-size: 1.25rem; margin-bottom: .625rem; }
.notice--info .notice__title { color: var(--info-ink); }
.notice--danger .notice__title { color: var(--stop-ink); }
.notice p { font-size: 1.1875rem; }
.notice__hint { font-weight: 750; }
.notice--compact { display: flex; align-items: flex-start; gap: .625rem; padding: .875rem 1rem; font-size: 1rem; color: var(--info-ink); }
.notice--compact .icon { margin-top: .125rem; }
/* Hinweis-Box vor den Tasten (Feld "notice" in A bis Z, Themenseiten und Platz-Services) */
.notice--callout {
  margin-top: 1rem; padding: 1rem 1.125rem;
  background: var(--callout-bg); color: var(--ink);
  border: 1.5px solid var(--callout-line); border-inline-start-width: 5px; border-radius: var(--r-sm);
}
.notice--callout .notice__title { margin-bottom: .375rem; font-family: var(--font); font-size: 1.1875rem; font-weight: 750; line-height: 1.3; color: var(--callout-ink); }
.notice--callout .notice__title .icon { flex: none; color: var(--callout-line); }
.notice--callout p { font-size: 1.125rem; }

/* Veranstaltungen */
.events { display: grid; gap: .625rem; margin-bottom: .5rem; }
.event { display: flex; flex-direction: column; padding: .875rem 1rem; background: var(--saale-50); border-radius: var(--r-sm); }
.event__date { display: flex; align-items: center; gap: .5rem; color: var(--saale-700); font-weight: 750; font-size: 1rem; }
.event__date .icon { width: 1.25rem; height: 1.25rem; }
.event__title { font-size: 1.1875rem; }
.event__place { color: var(--muted); font-size: 1rem; }

/* Feedback-Formular */
.feedback { display: grid; gap: 1.125rem; margin-top: 1rem; }
.rating { border: 0; margin: 0; padding: 0; min-width: 0; }
.rating legend { font-weight: 750; margin-bottom: .5rem; padding: 0; }
.rating__stars { display: flex; gap: .25rem; }
.rating__star {
  display: grid; place-items: center; flex: 0 1 3.25rem; min-width: 0; aspect-ratio: 1; border-radius: var(--r-sm);
  color: var(--border-strong); cursor: pointer; transition: transform .2s var(--ease-out);
}
.rating__star .icon { width: 72%; height: 72%; }
.rating__star.is-on { color: var(--gold); }
.rating__star.is-on .icon { fill: currentColor; }
html:not([data-motion="off"]) .rating__star:active { transform: scale(.88); }
.rating__star:has(input:focus-visible) { outline: 3px solid var(--saale-blue); outline-offset: 2px; }

/* ==========================================================================
   Footer
   ========================================================================== */

/* Saale Day: hell im Stil der Website – sanftes Blau wie die Kästchen, weiße Kacheln, Cyan-Symbole in Kreisen, oben ein Streifen in den Logo-Farben
   (Beige → Schiefer → Cyan). Forest Night: Dunkelgrün mit leichtem Saale- und Goldschimmer (Werte unten).
   Reicht bis unter das Dock. Handy: Name, drei Schnellaktionen (Anrufen, E-Mail, Route), Adresse, Aufenthalt,
   Rechtliches. Ab 40em mit Logo und in Spalten. Farben als eigene Variablen (--f-…), je Modus belegt. */
.footer {
  --f-glow-1: rgb(16 177 182 / .09);
  --f-glow-2: rgb(209 141 52 / .07);
  --f-edge: var(--ring);
  --f-stripe: linear-gradient(90deg, #cbbba0, var(--ref-secondary) 45%, var(--ref-primary));
  --f-text: var(--text-muted);
  --f-soft: var(--text-muted);
  --f-strong: var(--heading);
  --f-kicker: #6b4512;               /* dunkles Ocker (7,6 : 1) */
  --f-heading: var(--accent);
  --f-icon: var(--ref-primary);
  --f-focus: var(--focus);
  --f-tile: var(--bg);
  --f-tile-hover: var(--tint-green);
  --f-ring: var(--border);
  --f-ring-strong: var(--border);
  --f-badge: #ffffff;
  --f-badge-ring: rgb(16 177 182 / .3);
  --f-badge-text: var(--heading);
  --f-offline: var(--ref-primary);
  --f-action-icon: transparent;
  --f-action-ink: var(--ref-primary);
  --f-action-ring: inset 0 0 0 2px var(--ref-primary);
  --f-underline: rgb(67 85 95 / .4);
  --f-divider: var(--border);
  --f-gold: var(--tint-gold);
  --f-gold-hover: #f7e6cc;
  --f-gold-ring: rgb(209 141 52 / .55);
  --f-gold-text: #6b4512;
  --f-logo-filter: none;
  --f-mark-filter: brightness(0);
  --f-mark-opacity: .05;

  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 1.5rem; border-radius: var(--r-xl) var(--r-xl) 0 0;
  background:
    radial-gradient(120% 70% at 100% 0%, var(--f-glow-1), transparent 62%),
    radial-gradient(90% 60% at 0% 100%, var(--f-glow-2), transparent 60%),
    var(--surface-deep);
  box-shadow: var(--f-edge);
  color: var(--f-text); font-size: 1rem;
}
:root[data-theme="dark"] .footer {
  --f-glow-1: rgb(42 123 155 / .3);
  --f-glow-2: rgb(212 163 115 / .14);
  --f-edge: none;
  --f-stripe: none;
  --f-text: rgb(255 255 255 / .9);
  --f-soft: rgb(255 255 255 / .85);
  --f-strong: #fff;
  --f-kicker: #f3d3a8;
  --f-heading: rgb(255 255 255 / .85);
  --f-icon: #f3d3a8;
  --f-focus: #f3d3a8;
  --f-tile: rgb(255 255 255 / .07);
  --f-tile-hover: rgb(255 255 255 / .13);
  --f-ring: rgb(255 255 255 / .13);
  --f-ring-strong: rgb(255 255 255 / .18);
  --f-badge: rgb(255 255 255 / .08);
  --f-badge-ring: rgb(255 255 255 / .14);
  --f-badge-text: rgb(255 255 255 / .92);
  --f-offline: #a9dca2;
  --f-action-icon: #f3d3a8;
  --f-action-ink: var(--forest-900);
  --f-action-ring: none;
  --f-underline: rgb(255 255 255 / .35);
  --f-divider: rgb(255 255 255 / .12);
  --f-gold: rgb(243 211 168 / .14);
  --f-gold-hover: rgb(243 211 168 / .22);
  --f-gold-ring: rgb(243 211 168 / .45);
  --f-gold-text: #fff3e3;
  --f-logo-filter: brightness(0) invert(1);
  --f-mark-filter: none;
  --f-mark-opacity: .08;
}
/* Burg aus dem Logo als Wasserzeichen */
.footer::before {
  content: ""; position: absolute; z-index: -1; top: 1.25rem; right: -1.25rem;
  width: 10.5rem; aspect-ratio: 170 / 116;
  background: url("../img/mark-white.svg") no-repeat center / contain;
  filter: var(--f-mark-filter); opacity: var(--f-mark-opacity);
}
/* Farbstreifen oben (nur Saale Day), folgt der Rundung */
.footer::after {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 4px;
  background: var(--f-stripe); pointer-events: none;
}
.footer__inner { display: grid; gap: 2rem; padding-block: 2.25rem calc(var(--float-space) + 1.5rem); }
.footer p { margin: 0; }
.footer :focus-visible { outline-color: var(--f-focus); }

.footer__brand { display: grid; justify-items: start; gap: .375rem; }
.footer__logo { display: none; width: 8.5rem; height: auto; margin-bottom: .75rem; filter: var(--f-logo-filter); }
.footer__kicker { font-size: .9375rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--f-kicker); }
.footer__name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.12; letter-spacing: -.01em; color: var(--f-strong); }
.footer__offline {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .875rem .375rem .625rem; border-radius: 999px;
  background: var(--f-badge); box-shadow: inset 0 0 0 1px var(--f-badge-ring);
  font-size: .9375rem; font-weight: 650; color: var(--f-badge-text);
}
.footer__offline .icon { width: 1.125rem; height: 1.125rem; color: var(--f-offline); }
.footer__brand .footer__offline { margin-top: .625rem; }

.footer__col { container: footer-col / inline-size; }
.footer__heading {
  margin: 0 0 .875rem; font-family: var(--font); font-size: .9375rem; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase; color: var(--f-heading);
}

/* Schnellaktionen wie in einer Kontaktkarte */
.footer__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.footer__action {
  display: grid; justify-items: center; align-content: center; gap: .5rem; height: 100%; min-height: 5.75rem;
  padding: .875rem .375rem; border-radius: var(--r-md);
  background: var(--f-tile); box-shadow: inset 0 0 0 1px var(--f-ring);
  color: var(--f-strong); font-size: .9375rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  overflow-wrap: break-word;
}
.footer__action-icon {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--f-action-icon); color: var(--f-action-ink); box-shadow: var(--f-action-ring);
}
.footer__action-icon .icon { width: 1.25rem; height: 1.25rem; }

.footer__address { display: grid; gap: .25rem; margin-top: 1.25rem; font-style: normal; font-size: .9375rem; line-height: 1.45; }
.footer__address p { display: flex; align-items: flex-start; gap: .625rem; }
.footer__address p:has(> a) { align-items: center; }
.footer__address .icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .15rem; color: var(--f-icon); }
/* Telefon und E-Mail: ganze Zeile als Tippfläche (48 px) */
.footer__address a { display: inline-block; min-height: 3rem; padding-block: .8125rem; color: var(--f-strong); text-decoration-color: var(--f-underline); }
/* E-Mail-Adresse rutscht als Ganzes in die nächste Zeile; nur wenn sie selbst zu breit ist, bricht sie an den <wbr> */
.footer__address a[href^="mailto:"] { display: inline-block; max-width: 100%; }

/* Aufenthalt verlängern · Website: ruhige Pill-Buttons */
.footer__buttons { display: grid; gap: .625rem; }
.footer__btn {
  display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .625rem 1.125rem;
  border-radius: 999px; background: var(--f-tile); box-shadow: inset 0 0 0 1px var(--f-ring-strong);
  color: var(--f-strong); font-weight: 700; line-height: 1.25; text-decoration: none;
}
.footer__btn > span:not(.sr-only) { flex: 1; min-width: 0; overflow-wrap: break-word; }
.footer__btn .icon { flex: none; width: 1.25rem; height: 1.25rem; }
.footer__btn .footer__ext { width: 1.125rem; height: 1.125rem; opacity: .7; }
.footer__btn--gold { background: var(--f-gold); box-shadow: inset 0 0 0 1px var(--f-gold-ring); color: var(--f-gold-text); }
@media (hover: hover) {
  .footer__action:hover, .footer__btn:hover { background: var(--f-tile-hover); }
  .footer__btn--gold:hover { background: var(--f-gold-hover); }
}

.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.25rem;
  padding-top: 1rem; border-top: 1px solid var(--f-divider);
  font-size: .9375rem; color: var(--f-soft);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.footer__links a { display: inline-flex; align-items: center; min-height: 3rem; color: var(--f-text); text-decoration-color: var(--f-underline); }
/* Instagram · Facebook: runde Symbol-Tasten direkt neben dem Rechtlichen, Copyright rückt nach rechts.
   [role="list"] zusätzlich, weil die Listen-Grundregel (margin: 0) sonst stärker ist */
.footer__social[role="list"] { display: flex; gap: .5rem; margin-inline-end: auto; padding-block: .375rem; }
.footer__social-link {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--f-tile); box-shadow: inset 0 0 0 1px var(--f-ring-strong); color: var(--f-strong);
}
.footer__social-link .icon { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) { .footer__social-link:hover { background: var(--f-tile-hover); } }

/* Tablet: Logo sichtbar, Kontakt und Aufenthalt nebeneinander */
@media (min-width: 40em) {
  .footer::before { display: none; }
  .footer__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.25rem 2.5rem; padding-top: 2.75rem; }
  .footer__brand { grid-column: 1 / -1; grid-template-columns: auto 1fr; column-gap: 1.5rem; align-items: center; }
  .footer__logo { display: block; grid-row: span 3; width: 6.5rem; margin: 0; }
  .footer__bottom { grid-column: 1 / -1; }
}
/* PC: Logo-Spalte links, daneben Kontakt und Aufenthalt */
@media (min-width: 64em) {
  .footer__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, .9fr); gap: 2.5rem 3.5rem; padding-top: 3.25rem; }
  .footer__brand { grid-column: auto; grid-template-columns: none; align-content: start; }
  .footer__logo { grid-row: auto; width: 8.5rem; margin-bottom: .75rem; }
  .footer__name { font-size: 2rem; }
}
/* Ist die Spalte schmal (320 px, große Schrift, Tablet-Spalte), stehen die Schnellaktionen untereinander
   als Zeilen – lange Wörter wie „Sähköposti“ oder „Directions“ passen sonst nicht in die Kachel.
   rem wächst mit der gewählten Schriftgröße, die Grenze passt sich also an. */
@container footer-col (max-width: 20rem) {
  .footer__actions { grid-template-columns: 1fr; }
  .footer__action { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; min-height: 3.5rem; padding-inline: .75rem; text-align: start; }
}

/* ==========================================================================
   Größere Bildschirme
   ========================================================================== */

/* Notfall-Taste mit Beschriftung („Notfall-Telefonnummern“) erst, wenn der Schriftzug daneben Platz hat */
@media (min-width: 40em) {
  .tool-btn__label { display: inline; }
  .tool-btn--sos { padding: 0 1rem 0 .875rem; }
}

@media (min-width: 40em) {
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ungerade letzte Themen-Karte über die ganze Zeile (wie bei der Status-Leiste) */
  .cat-cards > li:nth-child(odd):last-child { grid-column: 1 / -1; }
  .feature-card .btn { width: auto; }
  .quickfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .status-cards { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); overflow: visible; margin-inline: 0; padding: 0; }
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .place { flex-direction: column; }
  .place > .art { width: 100%; aspect-ratio: 16 / 7; min-height: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
  .place > .art .icon { width: 3.5rem; height: 3.5rem; }
  .place__body { padding: 1rem 1.125rem 1.25rem; gap: .375rem; }
  .ampel-grid { grid-template-columns: 1fr 1fr; }
  /* zwei Notruf-Karten nebeneinander erst, wenn jede mind. 24rem breit ist („Rettungsdienst“ neben „112“) */
  .calls { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
  .rail { grid-auto-columns: minmax(15rem, 42%); }
  .hub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pitch-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-head h1 { font-size: 2.375rem; }
  .stay-form { grid-template-columns: 1fr 1fr; }
  .stay-form .btn-row { grid-column: 1 / -1; }
  .weather { display: inline-flex; }
}

@media (min-width: 48em) {
  .status-cell { padding: 1rem 1.25rem; }
  .status-cell__label { font-size: 1rem; }
  .status-cell__value { font-size: 1.125rem; }
  .status-cell--hotline .status-cell__value { font-size: 1.1875rem; }
}

@media (min-width: 64em) {
  :root { --appbar-h: 4.75rem; }
  .service-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .blocks { columns: 2; column-gap: 1.5rem; }
  .blocks > * { break-inside: avoid; display: inline-block; width: 100%; }
  .blocks > .block--calls { column-span: none; }
  .quickfacts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rail { grid-auto-columns: minmax(15rem, 1fr); grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; }
  .spot-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pitch-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Große Schrift: weniger Spalten, damit nichts gequetscht wird */
html[data-font-scale="2"] .quickfacts,
html[data-font-scale="2"] .service-grid { grid-template-columns: 1fr; }
html[data-font-scale="2"] .service { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0; column-gap: 1rem; }
html[data-font-scale="2"] .service__icon { margin-bottom: 0; }
/* Titel steht hier neben dem Symbol – Platz für Pfeil bzw. Status-Punkt oben rechts lassen */
html[data-font-scale="2"] .service__title { flex: 1 1 10rem; padding-inline-end: 1.25rem; }
html[data-font-scale="2"] .service__teaser { flex-basis: 100%; }
@media (min-width: 40em) {
  html[data-font-scale="2"] .quickfacts, html[data-font-scale="2"] .service-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  html[data-font-scale="1"] :is(.quickfacts, .service-grid),
  html[data-font-scale="2"] :is(.quickfacts, .service-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Lageplan-Liste bei großer Schrift höchstens zweispaltig */
  html[data-font-scale="2"] .spot-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Notruf-Karten stehen hier in der schmalen Spalte (.blocks): bei größerer Schrift Nummer unter der Bezeichnung */
  html:is([data-font-scale="1"], [data-font-scale="2"]) .call { grid-template-columns: auto minmax(0, 1fr); }
  html:is([data-font-scale="1"], [data-font-scale="2"]) .call .call__number { grid-column: 2; white-space: normal; }
}

/* Status-Karten (Services): 2 × 2 statt 3 + 1, bis vier nebeneinander passen */
@media (min-width: 40em) and (max-width: 63.99em) {
  .status-cards--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-cards--grid > li:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (min-width: 64em) and (max-width: 69.99em) {
  html[data-font-scale="2"] .status-cards--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-font-scale="2"] .status-cards--grid > li:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* Status-Leiste auf dem Smartphone: Schranke und Rezeption nebeneinander, die Hotline als ganze
   Zeile darunter – in drei Spalten würden Wörter wie „Geschlossen“ mitten im Wort umbrechen.
   Zeilen-Zellen: Bezeichnung links, Wert rechts daneben – passt er nicht daneben, beginnt er links darunter. */
@media (max-width: 29.99em) {
  .status-bar { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-bar > li:nth-child(odd):last-child { grid-column: 1 / -1; }
  .status-bar > li:nth-child(odd):last-child .status-cell {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; min-height: 3.5rem;
  }
}
/* Ganz untereinander: große Schrift auf dem Smartphone und sehr schmale Bildschirme */
@media (max-width: 39.99em) {
  html[data-font-scale="2"] .status-bar { grid-auto-flow: row; grid-template-columns: 1fr; }
  html[data-font-scale="2"] .status-cell {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; min-height: 3.5rem;
  }
}
@media (max-width: 21em) {
  .status-bar { grid-template-columns: 1fr; }
  .status-cell { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 1rem; min-height: 3.5rem; }
  .service-grid { grid-template-columns: 1fr; }
  .cat-card__icon { display: none; }
  .place { flex-direction: column; }
  .place > .art { width: 100%; aspect-ratio: 16 / 7; min-height: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
}

/* Große Schrift auf dem Smartphone: Schmuck-Symbole kleiner oder ausgeblendet, Karten untereinander –
   so brechen Themen, Listen und Status-Texte nicht mitten im Wort um */
@media (max-width: 39.99em) {
  html[data-font-scale="2"] .cat-card { gap: .75rem; padding-inline: 1rem; }
  html[data-font-scale="2"] .cat-card__icon { width: 2.5rem; height: 2.5rem; }
  html[data-font-scale="2"] .cat-card__icon .icon { width: 1.375rem; height: 1.375rem; }
  html[data-font-scale="2"] .cat-card__text strong { font-size: 1.125rem; }
  html:is([data-font-scale="1"], [data-font-scale="2"]) .status-cards--grid { grid-template-columns: 1fr; }
  html:is([data-font-scale="1"], [data-font-scale="2"]) .status-cards--grid .status-card { min-height: 0; }
}
@media (max-width: 23.99em) {
  .status-cards--grid { grid-template-columns: 1fr; }
  .status-cards--grid .status-card { min-height: 0; }
  /* Mittlere Schrift: Service-Kacheln einspaltig und Ausflugsziele mit Bild oben – wie bei normaler
     Schrift unter 21em (21em × 1,125 ≈ 24em), sonst bricht z. B. „Camperstüble“ bei 375 px mitten im Wort */
  html[data-font-scale="1"] .service-grid { grid-template-columns: 1fr; }
  html[data-font-scale="1"] .service { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0; column-gap: 1rem; }
  html[data-font-scale="1"] .service__icon { margin-bottom: 0; }
  html[data-font-scale="1"] .service__title { flex: 1 1 10rem; }
  html[data-font-scale="1"] .service__teaser { flex-basis: 100%; }
  html[data-font-scale="1"] .place { flex-direction: column; }
  html[data-font-scale="1"] .place > .art { width: 100%; aspect-ratio: 16 / 7; min-height: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
}
@media (max-width: 26em) {
  html[data-font-scale="2"] .place { flex-direction: column; }
  html[data-font-scale="2"] .place > .art { width: 100%; aspect-ratio: 16 / 7; min-height: 0; border-radius: var(--r-md) var(--r-md) 0 0; }
}
:is(.status-cell__value, .status-card__state, .service__teaser, .quickfact__value, .times__value, .season-hours dd,
    .call__number, .timeline__scale, .date-badge) { font-variant-numeric: tabular-nums; }
/* Kurze Titel: ausgeglichene Zeilen – weiche Trennstriche greifen nur, wenn ein Wortumbruch nicht reicht */
:is(.call__label, .hub-item__text strong, .az-item__title, .link-chip) { text-wrap: balance; }
/* Listen-Karten, A–Z, Regeln, Notruf-Karten, Kurzinfos, Status-Karten, Service-Kacheln: auf dem
   Smartphone bei größerer Schrift (bzw. bis 360 px bei jeder Schrift) kleinere Symbole und Abstände –
   lange Wörter wie „Hauptsanitärgebäude“ oder „Kochmöglichkeiten“ passen dann in die Zeile */
@media (max-width: 29.99em) {
  .quickfact { padding-inline: .75rem; }
  .status-card { padding-inline: .75rem; }
  html[data-font-scale="1"] .service { padding-inline: .875rem; }
  html:is([data-font-scale="1"], [data-font-scale="2"]) :is(.az-item, .hub-item, .rule) { gap: .625rem; padding-inline: .875rem; }
  html:is([data-font-scale="1"], [data-font-scale="2"]) :is(.az-item__icon, .hub-item__icon, .rule__icon) { width: 2.5rem; height: 2.5rem; border-radius: var(--r-icon-sm); }
  html:is([data-font-scale="1"], [data-font-scale="2"]) .call { column-gap: .75rem; padding-inline: 1rem; }
  html[data-font-scale="2"] .hub-item__text strong { font-size: 1rem; }
  html[data-font-scale="2"] .btn { padding-inline: 1rem; gap: .5rem; }
}
/* Profil: zweiteiliger Umschalter (Animationen) bis 372 px untereinander – „Automatisch“ bleibt ganz */
@media (max-width: 23.25em) {
  .segmented[aria-labelledby="motion-label"] { grid-auto-flow: row; }
}
@media (max-width: 29.99em) {
  html:is([data-font-scale="1"], [data-font-scale="2"]) .segmented[aria-labelledby="motion-label"] { grid-auto-flow: row; }
}
@media (max-width: 22.5em) {
  :is(.az-item, .hub-item, .rule) { gap: .625rem; padding-inline: .875rem; }
  :is(.az-item__icon, .hub-item__icon, .rule__icon) { width: 2.5rem; height: 2.5rem; border-radius: var(--r-icon-sm); }
  .quickfact { padding-inline: .625rem; }
  html:is([data-font-scale="1"], [data-font-scale="2"]) .cat-card__icon { display: none; }
  html[data-font-scale="2"] .hub-item__icon { display: none; }
  html[data-font-scale="2"] .feature-card { padding: 1rem; }
  html[data-font-scale="2"] .feature-card .btn { padding-inline: .875rem; gap: .5rem; }

  /* Mittlere Schrift: Seitenrand und Karten-Innenabstand 16 px, Kurzinfos untereinander */
  html[data-font-scale="1"] { --gutter: max(.8889rem, env(safe-area-inset-left)); }
  html[data-font-scale="1"] :is(.card, .detail__body, .detail__inner, .ampel):not(.times, .detail__body--flush) { padding: 1rem; }
  html[data-font-scale="1"] .quickfacts { grid-template-columns: 1fr; }
  html[data-font-scale="1"] .btn { padding-inline: 1rem; gap: .5rem; }
  /* Mittlere und große Schrift: Pfeile und Ampel-Abstand etwas kleiner */
  html:is([data-font-scale="1"], [data-font-scale="2"]) :is(.az-item__chev, .hub-item__chev, .rule__chev) { width: 1rem; height: 1rem; }
  html:is([data-font-scale="1"], [data-font-scale="2"]) .ampel__head { gap: .75rem; }

  /* Große Schrift: Seitenrand und Innenabstände 16 px, Schmuck-Symbole aus, Uhrzeiten und Notrufnummern
     unter der Bezeichnung. Schriftgrößen etwas kleiner – aber immer noch größer als bei normaler Schrift. */
  html[data-font-scale="2"] { --gutter: max(.8rem, env(safe-area-inset-left)); }
  html[data-font-scale="2"] :is(.card, .detail__body, .detail__inner, .ampel):not(.times, .detail__body--flush) { padding: 1rem; }
  html[data-font-scale="2"] :is(.times, .facts) { padding-inline: .875rem; }
  html[data-font-scale="2"] :is(.times__icon, .call__icon, .az-item__icon, .rule__icon, .sheet__icon, .btn .icon, .link-chip .icon) { display: none; }
  html[data-font-scale="2"] .times__row { grid-template-columns: minmax(0, 1fr); }
  html[data-font-scale="2"] .times__value { grid-column: 1; }
  html[data-font-scale="2"] .call { grid-template-columns: minmax(0, 1fr); }
  html[data-font-scale="2"] .call .call__number { grid-column: 1; }
  html[data-font-scale="2"] :is(.btn, .event) { padding-inline: .875rem; }
  html[data-font-scale="2"] .link-chip { padding-inline: .75rem; }
  html[data-font-scale="2"] .lang-option { gap: .5rem; padding-inline: .625rem; }
  html[data-font-scale="2"] .rule-group__title { font-size: 1.18125rem; padding-inline: .875rem; }
  html[data-font-scale="2"] :is(.section-title, .block__title) { font-size: 1.35rem; }
  html[data-font-scale="2"] .sheet__title { font-size: 1.3125rem; }
  html[data-font-scale="2"] :is(.fact dd, .detail__text, .ampel__state) { font-size: 1.125rem; }
  html[data-font-scale="2"] :is(.az-item__title, .event__title) { font-size: 1.06875rem; }
  html[data-font-scale="2"] .lang-option__name { font-size: 1rem; }
}
/* Größere Schrift: Themen-Karten, Listen und Ampeln erst ab 50em nebeneinander („Schlechtwetter-Tipps“,
   „Geschlossen“ neben der Ampel brauchen Platz) */
@media (max-width: 49.99em) {
  html:is([data-font-scale="1"], [data-font-scale="2"]) :is(.cat-cards, .hub-list, .spot-list, .ampel-grid) { grid-template-columns: 1fr; }
}
/* Große Schrift: die Lageplan-Liste („Hauptsanitärgebäude“) erst ab 64em zweispaltig */
@media (max-width: 63.99em) {
  html[data-font-scale="2"] .spot-list { grid-template-columns: 1fr; }
}

/* Tonfarben für Symbol-Kreise (am Ende, damit sie die Grundfarben der Bausteine überschreiben) */
.tone--green { background: var(--green-100); color: var(--accent-bright); }
.tone--blue { background: var(--saale-100); color: var(--saale-700); }
.tone--amber { background: var(--amber-100); color: var(--amber-ink); }
.tone--gold { background: var(--gold-100); color: var(--text-gold); }
.tone--red { background: var(--stop-bg); color: var(--stop-ink); }

/* ==========================================================================
   Gäste-Guide installieren (install.js): Anleitungs-Fenster, Hinweis-Banner
   ========================================================================== */

/* Oben in der Leiste nur am PC (Maus, breiter Bildschirm) – am Handy steht der Punkt im Profil.
   Erst sichtbar, wenn install.js weiß, ob der Gäste-Guide schon installiert läuft. */
.tool-btn--install { display: none; }
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  html[data-install-ready]:not([data-installed], [data-play-app]) .tool-btn--install { display: inline-flex; }
}
.tool-btn--install span { font-size: .9375rem; }

/* Kopf: App-Symbol, Titel und die Zeile darunter (je nach Gerät) */
.install-head { align-items: flex-start; gap: .875rem; }
.install-head__icon { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 22%; box-shadow: var(--ring), var(--shadow-sm); background: #fff; }
.install-head__text { flex: 1; min-width: 0; padding-top: .125rem; }
.install-head__title { font-size: 1.375rem; line-height: 1.2; color: var(--green-900); overflow-wrap: break-word; }
.install-head__sub { margin: .25rem 0 0; color: var(--muted); font-size: .9375rem; font-weight: 650; line-height: 1.35; }

.install-guide, .install-manual { display: grid; gap: .875rem; }
.install-manual[hidden] { display: none; }
.install-count { margin: 0 0 -.25rem; color: var(--muted); font-size: .9375rem; font-weight: 750; }

/* Schritte: je eine Karte mit großem Symbol (Nummer als Plakette), einem Satz und klein dem anderen Weg */
.install-steps { display: grid; gap: .625rem; margin: 0; padding: 0; list-style: none; }
.install-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .875rem;
  padding: .875rem 1rem; border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow-card);
}
.install-step__icon {
  position: relative; display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: var(--r-icon); background: var(--tile); color: var(--accent-bright);
}
.install-step__icon > .icon { width: 1.625rem; height: 1.625rem; }
.install-step__num {
  position: absolute; top: -.375rem; left: -.375rem; display: grid; place-items: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .25rem; border-radius: 999px;
  background: var(--surface-inverse); color: var(--on-inverse); box-shadow: 0 0 0 2px var(--card);
  font-size: .8125rem; font-weight: 800; line-height: 1;
}
.install-step__text { min-width: 0; padding-top: .125rem; }
.install-step__text p { margin: 0; font-size: 1.0625rem; line-height: 1.45; overflow-wrap: break-word; }
.install-step__text .install-step__alt { margin-top: .375rem; color: var(--muted); font-size: .9375rem; line-height: 1.4; }
/* Knopfname des Geräts und Symbol mitten im Satz */
.ik { font-weight: 800; color: var(--heading); }
.ii {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; margin: -.25rem .125rem;
  border-radius: .5rem; background: var(--surface-2); color: var(--heading); vertical-align: middle;
}
.ii .icon { width: 1.125rem; height: 1.125rem; }

/* Angedeutete Browser-Leiste: der gesuchte Knopf pulsiert */
.ib-bar {
  display: flex; align-items: center; gap: .25rem; max-width: 19rem; margin-top: .75rem; padding: .3125rem;
  border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border);
}
.ib-bar__btn {
  position: relative; display: grid; place-items: center; flex: none; width: 2rem; height: 2rem;
  border-radius: 999px; color: var(--muted);
}
.ib-bar__btn .icon { width: 1.125rem; height: 1.125rem; }
.ib-bar__url {
  display: flex; align-items: center; gap: .25rem; flex: 1; min-width: 0; height: 2rem; padding-left: .75rem;
  border-radius: 999px; background: var(--surface-card); color: var(--muted); font-size: .8125rem; font-weight: 650;
}
.ib-bar__host { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ib-bar :is(.ib-bar__btn, .ib-bar__menu).is-hot { color: var(--on-accent); background: var(--accent-fill); }
.ib-bar :is(.ib-bar__btn, .ib-bar__menu).is-hot::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--accent);
  animation: ib-ring 1.6s var(--ease-out) infinite;
}
@keyframes ib-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.ib-bar--menu { gap: .5rem; padding: .3125rem .625rem; border-radius: var(--r-xs); }
.ib-bar__menu { position: relative; padding: .25rem .625rem; border-radius: .375rem; font-size: .875rem; font-weight: 650; color: var(--ink); }
.ib-bar__menu--app { font-weight: 800; }

/* Ein Tipp (Chrome, Edge, Samsung Internet) */
.install-onetap { display: grid; justify-items: center; gap: .625rem; text-align: center; }
.install-onetap__btn { width: 100%; min-height: 3.75rem; font-size: 1.1875rem; }
.install-onetap__btn .icon { width: 1.5rem; height: 1.5rem; }
.install-onetap__note { margin: 0; color: var(--muted); font-size: 1rem; }
.install-more {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 3rem; padding: .5rem .75rem;
  border: 0; background: none; color: var(--brand-green); font-size: .9375rem; font-weight: 750;
}
.install-more .icon { width: 1.125rem; height: 1.125rem; transition: transform .25s ease; }
.install-more[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Hinweise, In-App-Browser, Erfolg */
.install-hint, .install-warn, .install-done {
  display: flex; align-items: flex-start; gap: .625rem; margin: 0; padding: .875rem 1rem; border-radius: var(--r-sm);
  font-size: 1rem; line-height: 1.45;
}
:is(.install-hint, .install-warn, .install-done) > .icon { width: 1.375rem; height: 1.375rem; margin-top: .0625rem; }
.install-hint { background: var(--info-bg); color: var(--info-ink); }
.install-warn { background: var(--warn-bg); color: var(--warn-ink); font-weight: 650; box-shadow: inset 0 0 0 1.5px currentColor; }
.install-done { background: var(--ok-bg); color: var(--ok-ink); font-size: 1.125rem; font-weight: 750; padding: 1.125rem 1rem; }
.install-copy { width: 100%; }
.install-copy.is-done { border-color: var(--ok-ink); color: var(--ok-ink); }

/* „Anderes Gerät?“ */
.install-other { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--divider); }
.install-other__title { margin: 0 0 .625rem; color: var(--muted); font-size: .9375rem; font-weight: 750; }
.install-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }

/* Leuchtender Zeiger auf den echten Knopf des Browsers (nur Handy, siehe pointerFor in install.js) */
.install-pointer {
  position: fixed; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 999px; background: var(--accent-fill); color: var(--on-accent); pointer-events: none;
  box-shadow: var(--accent-halo);
  animation: install-bob 1.1s ease-in-out infinite alternate;
}
.install-pointer[hidden] { display: none; }
.install-pointer .icon { width: 1.5rem; height: 1.5rem; stroke-width: 2.5; }
.install-pointer--br { right: .75rem; bottom: calc(env(safe-area-inset-bottom) + .5rem); }
.install-pointer--bc { left: calc(50% - 1.5rem); bottom: calc(env(safe-area-inset-bottom) + .5rem); }
.install-pointer--tr { right: .75rem; top: calc(env(safe-area-inset-top) + .5rem); animation-name: install-bob-up; }
@keyframes install-bob { from { transform: translateY(-6px); } to { transform: translateY(4px); } }
@keyframes install-bob-up { from { transform: translateY(6px); } to { transform: translateY(-4px); } }
.install-sheet.has-pointer-bottom .sheet__panel { padding-bottom: calc(env(safe-area-inset-bottom) + 4.25rem); }
@media (min-width: 37.5em) { .install-pointer { display: none; } }

/* Hinweis-Banner über dem Dock (nur Handy/Tablet, kein Popup) */
.install-banner {
  position: fixed; z-index: 29; left: 50%; bottom: calc(var(--dock-space) + .5rem);
  width: min(calc(100% - 1.25rem), 34rem); transform: translateX(-50%);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "icon text btn close";
  align-items: center; gap: .5rem .75rem; padding: .625rem .375rem .625rem .75rem;
  border-radius: var(--r-lg); background: var(--surface-card); box-shadow: var(--shadow-float);
  animation: install-banner-in .45s var(--ease-out);
}
@keyframes install-banner-in { from { opacity: 0; transform: translate(-50%, 16px); } }
.install-banner__icon { grid-area: icon; width: 2.75rem; height: 2.75rem; border-radius: 22%; box-shadow: var(--ring); background: #fff; }
.install-banner__text { grid-area: text; display: flex; flex-direction: column; margin: 0; line-height: 1.3; }
.install-banner__text strong { font-size: 1rem; color: var(--heading); }
.install-banner__text small { color: var(--muted); font-size: .9375rem; }
.install-banner__btn { grid-area: btn; }
.install-banner__close {
  grid-area: close; display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 0; border-radius: 999px; background: none; color: var(--muted);
}
.install-banner__close:hover { background: var(--sand-200); }
/* Schmale Handys und große Schrift: Knopf unter den Text */
@media (max-width: 29.99em) {
  .install-banner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon text close" "btn btn btn"; }
  .install-banner__btn { width: 100%; }
}
html:is([data-font-scale="1"], [data-font-scale="2"]) .install-banner {
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon text close" "btn btn btn";
}
html:is([data-font-scale="1"], [data-font-scale="2"]) .install-banner__btn { width: 100%; }

/* ==========================================================================
   Startvideo (intro.js) – nur sichtbar, solange <html data-intro> gesetzt ist
   ========================================================================== */

.intro { display: none; }
html[data-intro] .intro {
  position: fixed; inset: 0; z-index: 200; display: block;
  background: var(--bg-warm);   /* App-Hintergrund, bis das Video läuft; dann färbt intro.js die freien Ränder */
  touch-action: none; overscroll-behavior: contain;
  transition: opacity .45s ease;
}
.intro__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0;   /* erst zeigen, wenn es wirklich läuft – nie ein leerer Rahmen */
}
.intro.is-cover .intro__video { object-fit: cover; }
.intro.is-playing .intro__video { opacity: 1; }

/* Feiner Ladebalken – erst, wenn das Warten länger als 600 ms dauert */
.intro__bar {
  position: absolute; inset: auto 0 calc(22% + env(safe-area-inset-bottom)); margin-inline: auto;
  width: min(40vw, 10rem); height: 3px; border-radius: 3px; overflow: hidden;
  background: var(--divider); opacity: 0; transition: opacity .3s ease;
}
.intro__bar span {
  display: block; width: 100%; height: 100%; background: var(--accent-bright);
  transform-origin: left; transform: scaleX(var(--intro-progress, 0)); transition: transform .2s linear;
}
.intro.is-indeterminate .intro__bar span { width: 40%; transform: none; animation: intro-bar 1.2s ease-in-out infinite; }
@keyframes intro-bar { from { translate: -100% 0; } to { translate: 250% 0; } }
.intro.is-loading:not(.is-playing) .intro__bar { opacity: 1; }

html[data-intro] .intro.is-leaving { opacity: 0; pointer-events: none; }

/* ==========================================================================
   Einführung (tour.js, tour-slides.js): „Neu hier?“ und die Anleitung im Story-Stil
   Regeln: docs/EINFUEHRUNG.md. Farben nur über Rollen – Hell und Dunkel stimmen von selbst.
   ========================================================================== */

/* Frage „Neu hier?“: ein Sheet wie alle anderen, ab Tablet-Breite schmaler als die übrigen Fenster */
.tour-ask__head { gap: .875rem; padding-top: .25rem; }
.tour-ask__title { font-size: 1.875rem; line-height: 1.1; color: var(--green-900); overflow-wrap: break-word; }
.tour-ask__body { display: grid; gap: 1.25rem; padding-bottom: 1.25rem; }
.tour-ask__body > * + * { margin-top: 0; }
.tour-ask__text { margin: 0; font-size: 1.125rem; color: var(--muted); }
.tour-ask__buttons { display: grid; gap: .25rem; }
.tour-ask__no { min-height: 3rem; background: transparent; color: var(--muted); box-shadow: none; }
.tour-ask__no:hover { color: var(--green-900); text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 48em) {
  .tour-ask { max-width: 30rem; }
  .tour-ask__head { padding-top: 1.5rem; }
}

/* Anleitung: am Handy Vollbild ohne Rand (Abstand zu Notch und Home-Balken), ab 600 px eine Karte.
   Hintergrund: dezenter Verlauf in der Akzentfarbe von oben. */
.tour { inset: 0; margin: 0; max-width: none; height: 100%; max-height: none; }
.tour .tour__panel {
  display: flex; flex-direction: column; height: 100%; max-height: none; outline: none;
  padding: calc(env(safe-area-inset-top) + .75rem) max(1.25rem, env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + .875rem) max(1.25rem, env(safe-area-inset-left));
  border-radius: 0; box-shadow: none;
  background: linear-gradient(to bottom, var(--green-100) 0%, var(--bg-warm) 46%);
  touch-action: none;   /* Wischen übernimmt tour.js */
}
@media (min-width: 37.5em) {
  .tour { inset: 0; margin: auto; width: min(420px, calc(100% - 2rem)); height: min(700px, 90dvh); }
  .tour .tour__panel {
    padding: 1rem 1.25rem 1.125rem; border-radius: var(--r-xl);
    box-shadow: var(--ring), 0 24px 60px rgb(0 0 0 / .28);
    opacity: 0; transform: translate3d(0, 1.5rem, 0) scale(.97);
    transition: transform .4s var(--ease-out), opacity .25s ease;
  }
  .tour.is-open .tour__panel { opacity: 1; transform: none; }
}

/* Story-Balken: erledigte und aktuelle Karte kräftig, kommende blass */
.tour__bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 3px; flex: none; }
.tour__bars span { border-radius: 2px; background: var(--grab); }
.tour__bars span.is-on { background: var(--green-900); }
.tour__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; margin-top: .25rem; flex: none; }
.tour__count { font-size: 1rem; font-weight: 750; color: var(--muted); font-variant-numeric: tabular-nums; }
.tour__skip {
  min-height: 3rem; padding: 0 .25rem 0 1rem; border: 0; background: none;
  color: var(--brand-green); font-size: 1rem; font-weight: 750;
}
.tour__content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html:not([data-motion="off"]) .tour__content.is-in { animation: tour-in .4s var(--ease-out); }
@keyframes tour-in { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } }
.tour__stage {
  position: relative; flex: 1; min-height: 6rem; overflow: hidden; margin-top: .25rem;
  border-radius: var(--r-xl); background: var(--sand-200); box-shadow: var(--ring);
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.tour__title { margin-top: 1.125rem; font-size: 1.75rem; line-height: 1.15; color: var(--green-900); flex: none; overflow-wrap: break-word; }
.tour__text { margin: .5rem 0 0; min-height: 4.5em; font-size: 1.125rem; line-height: 1.5; color: var(--muted); flex: none; }
.tour__text strong { color: var(--ink); font-weight: 750; }
/* Zurück-Knopf auf Karte 1 unsichtbar, sein Platz bleibt: „Weiter“ steht immer an derselben Stelle */
.tour__nav { display: flex; gap: .75rem; margin-top: 1rem; flex: none; }
.tour__back {
  display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  border: 1.5px solid var(--accent-line); background: var(--surface-card); color: var(--brand-green);
}
.tour__back.is-hidden { visibility: hidden; }
.tour__next { flex: 1; min-width: 0; min-height: 3.5rem; }
.tour__stay {
  display: block; min-height: 3rem; margin-top: .375rem; padding: .625rem 0; flex: none;
  color: var(--brand-green); font-weight: 750; line-height: 1.3; text-align: center; text-decoration: none; text-wrap: balance;
}
.tour__stay .icon { display: inline-block; width: 1.25rem; height: 1.25rem; margin-right: .375rem; vertical-align: -.2em; }
.tour__keys { margin: .625rem 0 0; text-align: center; font-size: .9375rem; color: var(--muted); flex: none; }
/* Niedrige Bildschirme (z. B. 320 × 568): Titel und Text eine Stufe kleiner, der Mini-Screen schrumpft mit */
@media (max-height: 40em) {
  .tour__title { margin-top: .875rem; font-size: 1.5rem; }
  .tour__text { font-size: 1.0625rem; }
  .tour__nav { margin-top: .75rem; }
}

/* ---------- Mini-Screens: feste Größe 25 × 32 rem, tour.js passt sie in den Bildbereich ein (--k) ---------- */

.tour-mini { position: absolute; inset: 0; pointer-events: none; }
.tour-mini ul { list-style: none; margin: 0; padding: 0; }
/* Erfundene, leicht unscharfe Fläche bzw. Karte: sieht nach dem Guide aus, zeigt aber nichts Echtes */
.tour-mini__fx { position: absolute; inset: -12px; z-index: 0; filter: blur(3px); }
.tour-mini__fx--page {
  background:
    linear-gradient(var(--card), var(--card)) 8% 10% / 60% 9% no-repeat,
    linear-gradient(var(--card), var(--card)) 8% 28% / 38% 22% no-repeat,
    linear-gradient(var(--card), var(--card)) 92% 28% / 38% 22% no-repeat,
    linear-gradient(var(--card), var(--card)) 8% 60% / 84% 14% no-repeat,
    linear-gradient(var(--card), var(--card)) 8% 86% / 84% 14% no-repeat,
    radial-gradient(ellipse 60% 40% at 80% 0%, var(--sand-300), transparent 70%),
    var(--sand-200);
  opacity: .9;
}
.tour-mini__fx--map {
  background:
    radial-gradient(circle at 18% 22%, var(--green-300) 0 7%, transparent 7.5%),
    radial-gradient(circle at 30% 70%, var(--green-300) 0 9%, transparent 9.5%),
    radial-gradient(circle at 82% 30%, var(--green-300) 0 8%, transparent 8.5%),
    radial-gradient(circle at 70% 82%, var(--green-300) 0 6%, transparent 6.5%),
    radial-gradient(circle at 55% 12%, var(--green-300) 0 5%, transparent 5.5%),
    linear-gradient(118deg, transparent 44%, var(--surface-card) 44.5% 48%, transparent 48.5%),
    linear-gradient(28deg, transparent 58%, var(--surface-card) 58.5% 61.5%, transparent 62%),
    linear-gradient(170deg, transparent 30%, var(--surface-card) 30.5% 33%, transparent 33.5%),
    var(--green-100);
  opacity: .85;
}
.tour-mini__screen {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 25rem; height: 32rem; padding: 1rem 1rem 0;
  transform: translate(-50%, -50%) scale(var(--k, 1));
}
.tour-mini__screen > * + * { margin-top: .75rem; }
.tour-mini__screen--framed {
  padding: 0; overflow: hidden; border-radius: 1.5rem; background: var(--bg-warm);
  box-shadow: var(--shadow-card), 0 14px 34px var(--shadow-tint);
}
.tour-mini__screen--framed > * + * { margin-top: 0; }
/* Leiste unten im Kleinen: zeigt, wo man das Gezeigte findet */
.tour-mini .tour-mini__dock { position: absolute; z-index: 3; left: .625rem; right: .625rem; bottom: .625rem; width: auto; transform: none; margin: 0; }
.tour-mini .tour-mini__dock a { font-size: .8125rem; }
.tour-mini__dock a > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tour-mini .tour-mini__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tour-mini .service { min-height: 0; }
.tour-mini .tour-mini__status { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tour-mini .tour-mini__status > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tour-mini .status-cell { position: relative; }
.tour-mini .section-head { margin-bottom: 0; }

/* Karte 1: Startseite mit Legende */
.tour-mini__home { position: relative; }
.tour-mini__bar { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .625rem .75rem; }
.tour-mini__bar .brand__logo { filter: brightness(0) invert(1); }
.tour-mini__tools { display: flex; gap: .375rem; }
.tour-mini__tools .tool-btn { position: relative; overflow: visible; }
.tour-mini__tools .tool-btn:not(.tool-btn--sos) { background: rgb(14 30 18 / .28); border-color: rgb(255 255 255 / .35); color: #fff; box-shadow: none; }
.tour-mini__hero { position: relative; isolation: isolate; overflow: hidden; padding: 4.75rem 1rem 4rem; color: #fff; }
.tour-mini__hero .hero__art, .tour-tile__img .hero__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; }
.tour-mini__hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(10 24 14 / .58), rgb(10 24 14 / .45) 70%, rgb(10 24 14 / 0));
}
.tour-mini__hero::after { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 34%; background: linear-gradient(to bottom, transparent, var(--bg-warm) 92%); }
.tour-mini__hero .hero__greet { font-size: 1rem; margin-bottom: .25rem; }
.tour-mini__headline {
  margin: 0; font-family: var(--font-display); font-size: 1.625rem; font-weight: 600; line-height: 1.12;
  color: #fff; text-shadow: 0 1px 14px rgb(0 0 0 / .18); text-wrap: balance;
}
.tour-mini__home .tour-mini__status { position: relative; z-index: 1; margin: -3rem 1rem 1rem; }
.tour-mini__home .tour-mini__grid { padding: 0 1rem; }
.tour-num {
  display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent-fill); color: var(--on-accent); font-family: var(--font); font-size: .8125rem; font-weight: 800; line-height: 1;
}
.tour-mini__tools .tour-num { position: absolute; top: -.5rem; right: -.375rem; background: #fff; color: var(--forest-900); box-shadow: 0 2px 6px rgb(0 0 0 / .3); }
.tour-legend {
  position: absolute; z-index: 3; left: .875rem; right: .875rem; bottom: .875rem; display: grid; gap: .375rem; padding: .75rem .875rem;
  border-radius: var(--r-md); background: var(--surface-card); box-shadow: var(--shadow-card), 0 10px 26px var(--shadow-tint);
}
.tour-legend li { display: flex; align-items: center; gap: .625rem; min-width: 0; font-size: 1rem; }
.tour-legend strong { font-weight: 750; }
.tour-legend span { color: var(--muted); }
.tour-legend span::before { content: "· "; }

/* Karte 2: Mein Aufenthalt und was daraus wird */
.tour-mini__stay { padding: 1rem; }
.tour-mini__stay .card__title { margin-bottom: .625rem; font-size: 1.25rem; }
.tour-mini .stay-form { gap: .625rem; }
.tour-input {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 3rem; padding: .5rem 1rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg-warm); font-size: 1.125rem;
}
.tour-input .icon { width: 1.25rem; height: 1.25rem; }
.tour-mini__stay .tour-ring, .tour-mini__stay .btn { display: flex; width: 100%; }
.tour-mini__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.tour-tile { display: grid; gap: .375rem; min-width: 0; }
.tour-tile__img {
  position: relative; isolation: isolate; display: grid; place-items: center; height: 4.75rem; padding: .5rem; overflow: hidden;
  border-radius: var(--r-md); box-shadow: var(--shadow-card);
}
.tour-tile__img .tour-mini__fx { z-index: -1; inset: -8px; filter: blur(2px); }
.tour-tile__img--hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(10 24 14 / .35); }
.tour-tile :is(.map-pill, .weather-chip) { min-height: 2.5rem; max-width: 100%; padding: .25rem .75rem .25rem .5rem; gap: .375rem; font-size: .8125rem; white-space: nowrap; }
.tour-tile :is(.map-pill, .weather-chip) > span { overflow: hidden; text-overflow: ellipsis; }
.tour-tile .icon { width: 1.125rem; height: 1.125rem; }
.tour-tile__cap { font-size: .875rem; font-weight: 700; color: var(--muted); text-align: center; }

/* Karte 4: Live-Status und das Fenster dazu */
.tour-tap {
  position: absolute; z-index: 1; top: .125rem; right: .125rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent-wash); box-shadow: 0 0 0 2px var(--brand-green), 0 4px 14px rgb(0 0 0 / .18);
}
.tour-mini__sheet {
  position: absolute; z-index: 2; inset: auto 0 0; padding: 0 1.125rem 1.25rem;
  border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface-card); box-shadow: 0 -10px 30px rgb(0 0 0 / .18);
}
.tour-mini__sheet .sheet__grab { height: 1.5rem; }
.tour-mini__sheet-title { display: flex; align-items: center; gap: .75rem; margin: 0 0 .875rem; font-size: 1.375rem; color: var(--green-900); }
.tour-mini__sheet .status-hero { font-size: 1rem; font-weight: 750; }

/* Karte 5: Suche im Lageplan */
.tour-mini__search { position: relative; z-index: 2; margin-bottom: 0; color: var(--ink); border-color: var(--brand-green); box-shadow: 0 0 0 4px var(--green-100), var(--shadow-sm); }
.tour-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--brand-green); }
.tour-suggest {
  position: relative; z-index: 2; padding: .375rem; border-radius: var(--r-sm);
  background: var(--surface-card); box-shadow: var(--shadow-card), 0 10px 24px var(--shadow-tint);
}
.tour-mini__screen > .tour-suggest { margin-top: .375rem; }
.tour-suggest li { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: var(--r-xs); font-weight: 650; line-height: 1.3; }
.tour-suggest li:first-child { background: var(--green-50); }
.tour-suggest .icon { width: 1.125rem; height: 1.125rem; color: var(--accent-bright); }
.tour-mini__spot { position: absolute; z-index: 1; width: 0; height: 0; }
.tour-mini__screen > .tour-mini__spot { margin: 0; }
.tour-mini__spot .spot { left: 0; top: 0; width: 2.25rem; background: rgb(255 255 255 / .55); }
.tour-mini__cta { position: absolute; z-index: 2; inset: auto 0 6.25rem; display: flex; justify-content: center; }
.tour-mini__cta .map-preview__cta { min-height: 3rem; padding: .625rem 1.25rem; font-size: 1rem; }

/* Karte 6: Themen aus „Entdecken“ */
.tour-mini .tour-mini__cats { display: grid; grid-template-columns: 1fr; gap: .625rem; }
.tour-mini .cat-card { min-height: 4.25rem; padding: .625rem 1rem; gap: .875rem; }
.tour-mini .cat-card__icon { width: 2.75rem; height: 2.75rem; }
.tour-mini .cat-card__text strong { font-size: 1.125rem; }
.tour-mini .cat-card__text small { font-size: .875rem; }

/* Karte 7: Logo, Merkmale, wo die Anleitung wieder zu finden ist */
.tour-mini__done { display: grid; justify-items: center; align-content: center; height: 100%; padding-bottom: 1rem; text-align: center; }
.tour-logo { display: grid; place-items: center; width: 7.5rem; height: 7.5rem; border-radius: 1.75rem; background: #fff; box-shadow: var(--shadow-card), 0 14px 30px var(--shadow-tint); }
.tour-logo img { width: 5.5rem; height: 5.5rem; }
.tour-mini__name { margin: .75rem 0 0; font-size: 1.5rem; color: var(--green-900); }
.tour-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem !important; }
.tour-trust .chip { min-height: 2.75rem; padding: .375rem .875rem; }
.tour-mini__help { display: block; width: 100%; margin-top: 1.25rem; text-align: start; }

/* Bewegung: Teile fallen mit Feder-Effekt nacheinander herein (--d), ein Ring pulsiert am wichtigen Knopf,
   der Cursor blinkt. Bei reduzierten Animationen steht alles still, der Ring bleibt sichtbar. */
.tour-ring { position: relative; display: block; border-radius: var(--ring-r, var(--r-md)); }
.tour-ring::after {
  content: ""; position: absolute; inset: -.375rem; border-radius: calc(var(--ring-r, var(--r-md)) + .375rem);
  box-shadow: 0 0 0 3px var(--accent-bright); opacity: .55; pointer-events: none;
}
html:not([data-motion="off"]) .tour-drop { animation: tour-drop .7s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--d, 0) * 110ms + 180ms); }
html:not([data-motion="off"]) .tour-rise { animation: tour-rise .6s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 110ms + 180ms); }
html:not([data-motion="off"]) .tour-ring::after { animation: tour-ring 1.8s ease-out 1.1s infinite; }
html:not([data-motion="off"]) .tour-caret { animation: tour-blink 1s steps(1) infinite; }
html:not([data-motion="off"]) .tour-tap { animation: tour-tap 1.8s ease-in-out 1s infinite; }
@keyframes tour-drop { from { opacity: 0; transform: translate3d(0, -1.5rem, 0) scale(.92); } 55% { opacity: 1; } }
@keyframes tour-rise { from { opacity: 0; transform: translate3d(0, 60%, 0); } }
@keyframes tour-ring { 0% { opacity: .9; transform: scale(.97); } 100% { opacity: 0; transform: scale(1.12); } }
@keyframes tour-blink { 50% { opacity: 0; } }
@keyframes tour-tap { 0%, 100% { transform: scale(1); } 45% { transform: scale(.82); } }

/* ==========================================================================
   Keine Bewegung: System-Einstellung oder Wahl im Profil
   ========================================================================== */

html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after,
html[data-motion="off"] ::backdrop {
  transition-duration: 0s !important; transition-delay: 0s !important;
  animation: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; scroll-behavior: auto !important; }
}

/* System-Einstellung „Mehr Kontrast“: kräftige Kanten, Sekundärtext in voller Schriftfarbe, kein Glas */
@media (prefers-contrast: more) {
  :root, :root[data-theme="dark"] {
    --border: var(--border-strong); --text-muted: var(--text); --glass: var(--surface); --glass-solid: var(--surface);
  }
}

@media (forced-colors: active) {
  .light, .dot, .timeline__bar, .timeline__seg, .status-dot, .spot, .pitch-marker, .pitch-types__swatch { forced-color-adjust: none; }
  .card, .call, .chip, .link-chip, .hub-item, .status-card, .status-bar, .service, .cat-card, .feature-card,
  .event-list li, .sheet__panel { border: 1px solid CanvasText; }
}

@media print {
  .appbar, .tabbar, .footer, .toast, .offline, .back, .tool-btn, .hero__art,
  .map-corner, .map-note, .search__clear, .map-teaser { display: none !important; }
  body { background: #fff; padding: 0; }
  main { padding-top: 0; }
  .hero { color: var(--ink); min-height: 0; padding: 0; width: auto; margin: 0; }
  .card, .call, .service, .status-bar, .cat-card, .hub-item { box-shadow: none; border: 1px solid #ccc; }
}