/* Ferienparkradar – Website-Stil nach docs/design/2026-10-24-design-leitfaden.md (Richtung D: Rutschenspaß in Waldgrün).
   Keine Inline-Styles in den Templates (CSP style-src 'self'); Schriften selbst gehostet, nichts von fremden Servern. */

/* ---------- Schriften (SIL Open Font License, Lizenztexte in /fonts/) ---------- */
@font-face { font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/baloo-2-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/nunito-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/nunito-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/nunito-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/nunito-sans-latin-800-normal.woff2) format('woff2'); }

/* ---------- Farben und Maße (Leitfaden §2, §4) ---------- */
:root {
  --green: #1D5E47;        /* Primär: Buttons, Kopf, Logo, Links */
  --green-dark: #14432F;   /* Hover, Text auf Moos */
  --moss: #DCEBE3;         /* Flächen, Hinweise, Badge „aktiv“, Illustrations-Kreise */
  --sand: #F6F1EA;         /* Seitengrund, Text/Buttons auf Grün */
  --sand-2: #EFE8DE;       /* etwas dunklerer Sand: Fußzeile, Flächen auf Sand */
  --sand-line: #E4DCD1;    /* Linien, Rahmen */
  --ink: #1E2B2F;          /* Text */
  --stone: #5C6669;        /* Nebentext */
  --signal: #E2581F;       /* nur Deko/Treffer-Punkt – nie Text, nie Fläche mit weißer Schrift */
  --rust: #C2410C;         /* Preise als Text */
  --signal-soft: #FCE6DB;  /* Badge „unter Wunschpreis“ … */
  --signal-ink: #9A3412;   /* … mit dieser Schrift */
  --on-green: #E4EFE8;     /* Fließtext auf Waldgrün */
  --ok: #2F6B3A; --ok-bg: #E3F0E6;
  --warn: #8A5A00; --warn-bg: #FBF0D9;
  --err: #A32D2D; --err-bg: #F8E4E2;
  --white: #FFFFFF;
  --font-head: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-text: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --r-xl: 28px; --r-lg: 20px; --r-md: 18px; --pill: 999px;
  --gutter: 20px;
  --overlap: 104px;        /* so weit ragt die Wizard-Karte unter den grünen Kopf hinaus */
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--sand); color: var(--ink); font: 400 17px/1.55 var(--font-text); overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--green); text-underline-offset: 2px; }
a:hover { color: var(--green-dark); }
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: 2.1rem; line-height: 1.05; margin: 0 0 .75rem; }
h2 { font-size: 1.75rem; line-height: 1.1; margin: 2.5rem 0 1rem; }
h3 { font-size: 1.25rem; line-height: 1.15; margin: 1.25rem 0 .5rem; }
p { margin: 0 0 .9rem; }
small, .muted { color: var(--stone); font-size: .9rem; }
.hint { display: block; color: var(--stone); font-size: .95rem; line-height: 1.5; margin: .35rem 0 .9rem; }
.lead { font-size: 1.15rem; line-height: 1.55; max-width: 40rem; }
strong { font-weight: 800; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--sand); color: var(--green-dark); font-weight: 800; padding: 10px 16px; border-radius: var(--pill); }
.skip:focus { top: 12px; }

/* ---------- Kopf: Waldgrün mit Logo, Navigation und Wellenkante ---------- */
.site-header { background: var(--green); color: var(--sand); }
.site-header :focus-visible { outline-color: var(--sand); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; min-height: 44px; }
.brand-mark { width: 44px; height: 44px; flex: 0 0 auto; }
.wordmark { font-family: var(--font-head); font-weight: 800; font-size: 1.65rem; line-height: 1; letter-spacing: -0.01em; color: var(--green); padding-top: .12em; }
.wordmark-b { color: var(--ink); }
.site-header .wordmark, .site-header .wordmark-b { color: var(--sand); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sand); font-weight: 700; font-size: 1rem; text-decoration: none; }
.site-header nav a:hover { color: var(--white); text-decoration: underline; text-decoration-thickness: 2px; }
/* Wellenkante (Leitfaden §4): Sinuswelle in Sand auf Waldgrün, feste Wellenlänge, wiederholt */
.wave { height: 22px; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 32' preserveAspectRatio='none'%3E%3Cpath d='M0 16 Q40 0 80 16 T160 16 V32 H0 Z' fill='%23F6F1EA'/%3E%3C/svg%3E") repeat-x left bottom / 120px 22px; }
.wave-hero { height: 40px; background-size: 200px 40px; }

/* ---------- Startseite: Hero mit Wizard-Karte ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 18px; }
.hero-copy { color: var(--sand); }
.hero-copy h1 { color: var(--sand); font-size: 2.75rem; line-height: .98; margin: 14px 0 16px; }
.hero-copy .lead { color: var(--on-green); font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 22px 0 0; }
.hero-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--sand); font-weight: 700; font-size: 1.05rem; }
.hero-link:hover { color: var(--white); }
.card.wizard-card { position: relative; z-index: 1; color: var(--ink); margin: 0; scroll-margin-top: 16px; }
/* Hero-Foto: mobil/Tablet unter der Wizard-Karte (ragt statt der Karte unter den Kopf hinaus), Desktop links unter Text und Knöpfen */
.hero { grid-template-areas: "copy" "card" "photo"; }
.hero-copy { grid-area: copy; }
.card.wizard-card { grid-area: card; }
.hero-photo { grid-area: photo; position: relative; z-index: 1; margin: 0 0 calc(-1 * var(--overlap)); }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-xl); background: var(--green-dark); }
.main-home { padding-top: calc(var(--overlap) - 40px + 24px); }
.eyebrow { font-family: var(--font-text); font-size: .85rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); margin: 0 0 14px; }

/* ---------- Inhalt ---------- */
.main { padding-bottom: 64px; }
.main-page { padding-top: 28px; max-width: 880px; }
.card { background: var(--white); border-radius: var(--r-xl); padding: 24px 20px; margin: 20px 0; }
.card > h2:first-child, .card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-center { text-align: center; }
.card-center .lead { margin-left: auto; margin-right: auto; }
.card-center .notice { text-align: left; }
.illu { display: block; margin: 0 auto 16px; width: 112px; height: 112px; }
/* Fotos auf Unterseiten (Leitfaden §5): breit, abgerundet wie die Karten; Moos als Platzhalter, bis das Bild geladen ist */
.photo { position: relative; margin: 20px 0; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-lg); background: var(--moss); }
@media (min-width: 600px) {
  .photo img { aspect-ratio: 5 / 2; border-radius: var(--r-xl); }
  /* Park-Seiten: flacher, damit die Preise oben bleiben */
  .photo.photo-flat img { aspect-ratio: 3 / 1; }
}
/* Label „Symbolbild“ auf Park-Seiten: klein, aber gut lesbar (Tinte auf Sand, 12,6 : 1) – unabhängig vom Motiv */
.photo-label { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 5px 12px; border-radius: var(--pill); background: var(--sand); color: var(--ink); font: 800 .8rem/1.2 var(--font-text); letter-spacing: .02em; }
/* Foto oben in einer Karte (Danke, Fast fertig): randlos bis an die Kartenkante, die Karte rundet die oberen Ecken */
.card.card-photo { padding-top: 0; overflow: hidden; }
.card-photo > .photo.card-img { margin: 0 -20px 24px; }
.card-img img { border-radius: 0; aspect-ratio: 5 / 2; }
.credits p, .credits li { color: var(--stone); font-size: .95rem; }
.credits ul { margin: 0; padding-left: 20px; }
.credits li + li { margin-top: 6px; }
.card.cta { background: var(--moss); }
.card.cta p { color: var(--green-dark); font-weight: 600; }
.back-link { margin: 0 0 12px; font-weight: 700; font-size: .95rem; }

/* Badges (Leitfaden §4): Pillen */
.badge { display: inline-block; font-family: var(--font-text); font-size: .85rem; font-weight: 800; line-height: 1.3; letter-spacing: 0; padding: 6px 14px; border-radius: var(--pill); margin: 0; vertical-align: middle; }
.badge-moss { background: var(--moss); color: var(--green-dark); }
.badge-signal { background: var(--signal-soft); color: var(--signal-ink); }

/* Hinweise */
.notice { border-radius: var(--r-md); padding: 14px 18px; margin: 0 0 18px; background: var(--moss); color: var(--green-dark); font-weight: 600; }
.notice-ok { background: var(--ok-bg); color: var(--ok); }
.notice-warn { background: var(--warn-bg); color: var(--warn); }
.notice-error { background: var(--err-bg); color: var(--err); }
.notice ul { margin: 0; padding-left: 20px; }
.notice li + li { margin-top: 4px; }
.notice a { color: inherit; }

/* ---------- Buttons (Leitfaden §4): Pillen, mind. 44 px hoch ---------- */
.button, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; background: var(--green); color: var(--white); border: 2px solid var(--green); border-radius: var(--pill); padding: 10px 24px; font: 800 1.02rem/1.2 var(--font-text); text-decoration: none; text-align: center; cursor: pointer; }
.button:hover, button:hover { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }
button.secondary, .button.secondary { background: var(--white); color: var(--ink); border-color: var(--sand-line); }
button.secondary:hover, .button.secondary:hover { background: var(--sand); color: var(--ink); border-color: var(--stone); }
.button-sand { background: var(--sand); color: var(--green-dark); border-color: var(--sand); font-size: 1.08rem; padding: 12px 28px; }
.button-sand:hover { background: var(--white); color: var(--green-dark); border-color: var(--white); }
button.link { display: inline; min-height: 0; background: none; border: 0; color: var(--green); padding: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
button.link:hover { background: none; color: var(--green-dark); }
.actions { display: flex; gap: 12px 16px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.actions > a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); }
.actions-wizard { padding-top: 20px; border-top: 2px solid var(--sand); }
.actions-wizard [data-next], .actions-wizard [data-submit] { margin-left: auto; }

/* ---------- Formulare ---------- */
label { display: block; margin: 0 0 16px; font-weight: 700; font-size: 1rem; }
input[type=text], input[type=email], input[type=number], input[type=date], select {
  display: block; width: 100%; min-height: 50px; margin-top: 6px; padding: 11px 18px; font: 400 1rem/1.3 var(--font-text); color: var(--ink);
  background: var(--white); border: 2px solid var(--sand-line); border-radius: var(--pill); }
input[type=date] { padding-right: 12px; }
select { appearance: none; -webkit-appearance: none; padding-right: 46px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231D5E47' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center / 16px 16px; }
input:hover, select:hover { border-color: #CFC5B8; }
input:focus-visible, select:focus-visible { border-color: var(--green); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--err); }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; margin: 0 8px 0 0; accent-color: var(--green); vertical-align: -3px; }
fieldset { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
legend { padding: 0; font-family: var(--font-head); font-weight: 800; font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--ink); }
legend:focus { outline: none; }
legend:focus-visible, #fehler:focus { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 8px; }
.step[hidden] { display: none; }
.step > .hint:first-of-type { margin-top: 0; }
.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.field-error { color: var(--err); font-weight: 700; font-size: .95rem; margin: -6px 0 14px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Fortschritt im Wizard: vier Pillen-Balken, erledigte und aktueller Schritt Waldgrün */
.progress-bar { display: flex; gap: 8px; margin: 0 0 8px; }
.progress-bar span { flex: 1; height: 8px; border-radius: var(--pill); background: var(--sand-line); }
.progress-bar span.on { background: var(--green); }
.progress { color: var(--stone); font-size: .9rem; font-weight: 700; margin: 0 0 14px; }

/* Parkauswahl „Suche + Land“: Suchfeld, Länder-Chips, gewählte Parks als Chips (Waldgrün/weiß), Liste mit Checkbox-Zeilen im Kasten */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.park-tools { margin: 0 0 12px; }
.park-search { margin: 0; }
input[type=search] { display: block; width: 100%; min-height: 50px; margin: 0 0 12px; padding: 11px 18px 11px 48px; font: 400 1rem/1.3 var(--font-text); color: var(--ink);
  border: 2px solid var(--sand-line); border-radius: var(--pill); -webkit-appearance: none; appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.75' fill='none' stroke='%235C6669' stroke-width='2.2'/%3E%3Cpath d='M13 13l4.5 4.5' stroke='%235C6669' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 18px center / 20px 20px; }
input[type=search]::placeholder { color: var(--stone); opacity: 1; }
input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.filter label { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 6px 16px; border-radius: var(--pill); border: 2px solid var(--sand-line); background: var(--white); font-weight: 700; font-size: .92rem; cursor: pointer; }
.filter label:hover { border-color: #CFC5B8; }
.filter label:has(input:checked) { border-color: var(--green); color: var(--green-dark); background: var(--moss); }
.filter label:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
/* Suche aktiv: sie läuft über alle Länder – der gewählte Länder-Chip tritt zurück, bis die Suche leer ist oder ein Chip geklickt wird */
.is-searching .filter label:has(input:checked) { border-color: var(--sand-line); background: var(--white); color: var(--stone); border-style: dashed; }
.park-count { color: var(--green-dark); font-weight: 800; font-size: .95rem; margin: 0 0 8px; }
.park-count.is-zero { color: var(--stone); font-weight: 700; }
.picked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.picked .chip { min-height: 44px; padding: 6px 10px 6px 16px; gap: 6px; font-size: .92rem; font-weight: 700; }
.chip-x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-dark); color: var(--white); font-size: 1.05rem; line-height: 1; }
.picked .chip:hover .chip-x { background: var(--white); color: var(--green-dark); }
.picked button.link { min-height: 44px; font-size: .92rem; padding: 0 6px; }
.park-hits { color: var(--stone); font-size: .9rem; font-weight: 700; margin: 0 0 6px; }
.park-box { max-height: min(24rem, 62vh); overflow-y: auto; overscroll-behavior: contain; border: 2px solid var(--sand-line); border-radius: var(--r-md); background: var(--white); }
#parks h3 { position: sticky; top: 0; z-index: 1; font-family: var(--font-text); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--stone);
  margin: 0; padding: 10px 16px 8px; background: var(--sand); border-bottom: 2px solid var(--sand-line); }
.parks { list-style: none; margin: 0; padding: 0; }
.parks li + li { border-top: 1px solid var(--sand); }
.parks label { display: flex; align-items: center; gap: 0; min-height: 48px; margin: 0; padding: 8px 16px; font-weight: 600; font-size: 1rem; line-height: 1.25; cursor: pointer; }
.parks label:hover { background: var(--sand); }
.parks input[type=checkbox] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0 12px 0 0; vertical-align: 0; }
.park-name { flex: 1 1 auto; min-width: 0; }
.parks label small { flex: 0 0 auto; margin-left: 12px; font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--stone); }
.parks label:has(input:checked) { background: var(--moss); color: var(--green-dark); font-weight: 700; }
.park-empty { margin: 0; padding: 18px 16px; color: var(--stone); font-weight: 700; }
.step.invalid #parks { border-color: var(--err); }
#parks[aria-invalid="true"] { border-color: var(--err); }
button.park-all { margin: 14px 0 0; min-height: 44px; padding: 8px 20px; font-size: .95rem; }
/* Handy: Länder-Chips als eine wischbare Zeile bis an den Kartenrand (statt vier, fünf Zeilen Chips über der Liste) */
@media (max-width: 599px) {
  .filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 4px 20px 6px; scroll-padding: 0 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filter::-webkit-scrollbar { display: none; }
  .filter label { flex: 0 0 auto; }
  .park-box { max-height: min(24rem, 58vh); }
}

/* Auswahl-Kacheln (Aufenthaltsart, Komfort) */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.option { display: block; margin: 0; padding: 12px 16px; border-radius: var(--r-md); background: var(--sand); border: 2px solid var(--sand); font-weight: 700; line-height: 1.3; cursor: pointer; }
.option:hover { border-color: var(--sand-line); }
.option small { display: block; margin-top: 2px; font-weight: 600; font-size: .85rem; color: var(--stone); }
.option:has(input:checked) { background: var(--green); border-color: var(--green); color: var(--white); }
.option:has(input:checked) small { color: var(--moss); }
.option:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }
fieldset.group { margin: 0 0 8px; }
fieldset.group > legend { font-family: var(--font-text); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin-bottom: 8px; }
fieldset.group .option { border-radius: var(--pill); text-align: center; padding: 10px 14px; }

/* Wo :has() geht, verschwinden die Kästchen – die ganze Pille/Kachel zeigt den Zustand (sonst bleiben sie sichtbar). */
@supports selector(:has(*)) {
  .option input, .filter input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
  .option, .filter label { position: relative; }
}

/* ---------- So funktioniert's, FAQ ---------- */
.how-section h2, .faq-section h2 { margin-top: 8px; }
.how { list-style: none; counter-reset: how; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.how li { counter-increment: how; position: relative; background: var(--white); border-radius: var(--r-xl); padding: 24px; }
.how img { display: block; width: 88px; height: 88px; margin: 0 0 14px; }
.how li::before { content: counter(how); position: absolute; top: 22px; right: 22px; width: 36px; height: 36px; border-radius: 50%; background: var(--sand); color: var(--green-dark); font: 800 1.1rem/36px var(--font-head); text-align: center; }
.how h3 { margin: 0 0 6px; font-size: 1.4rem; }
.how p { margin: 0; color: var(--stone); }
/* Fotostreifen „Wald, See, Rutsche“: mobil erste Kachel breit, darunter zwei halbe; ab Tablet drei Kacheln nebeneinander */
.photo-band { margin: 0 0 48px; }
.photo-band h2 { margin-top: 8px; margin-bottom: .5rem; }
.band-copy p { color: var(--stone); max-width: 42rem; margin-bottom: 20px; }
.band-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.band-photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--moss); }
.band-photos img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.faq { display: grid; gap: 12px; }
details { background: var(--white); border-radius: var(--r-lg); padding: 0 20px; }
details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 0; cursor: pointer; font-weight: 800; font-size: 1.05rem; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--moss); color: var(--green-dark); font: 800 1.3rem/32px var(--font-head); text-align: center; }
details[open] summary::after { content: '–'; }
details p { margin: 0 0 18px; color: var(--stone); }

/* ---------- Watch-Seite ---------- */
.watch-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; }
.watch-head h1 { margin: 0; }
.status { display: inline-block; font: 800 .85rem/1.3 var(--font-text); letter-spacing: 0; border-radius: var(--pill); padding: 6px 14px; background: var(--sand-line); color: var(--ink); vertical-align: middle; }
h1 .status { margin-left: 10px; position: relative; top: -4px; }
.status-active, .status-booked { background: var(--moss); color: var(--green-dark); }
.status-pending, .status-expired { background: var(--warn-bg); color: var(--warn); }
dl.summary { display: grid; grid-template-columns: minmax(0, 1fr); align-items: baseline; gap: 2px 20px; margin: 0; }
dl.summary dt { color: var(--stone); font-size: .9rem; font-weight: 700; margin-top: 10px; }
dl.summary dt:first-child { margin-top: 0; }
dl.summary dd { margin: 0; font-weight: 600; }
.hit { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 20px; background: var(--white); border-radius: var(--r-md); padding: 18px 20px; margin: 0 0 12px; }
.hit-main { flex: 1 1 300px; min-width: 0; }
.hit-main > strong { font-size: 1.12rem; }
.hit-main .muted { display: block; margin-top: 2px; }
.hit-main p.muted { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.hit-main .hint { margin: 6px 0 0; font-size: .85rem; }
.hit-price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; }
.hit-price strong { font: 800 2rem/1 var(--font-head); color: var(--rust); font-variant-numeric: tabular-nums; }
.hit-price small { display: block; margin-bottom: 10px; }
.hit-price .button { min-height: 44px; padding: 8px 18px; font-size: .95rem; }
.spark { color: var(--green); flex: 0 0 auto; }
.share .copy { font-size: .95rem; }

/* ---------- Preis-Seiten ---------- */
.table-card { padding: 8px 20px 12px; overflow-x: auto; }
table.prices { width: 100%; border-collapse: collapse; margin: 0; font-size: .98rem; }
table.prices caption { text-align: left; color: var(--stone); font-size: .9rem; font-weight: 700; padding: 14px 0 8px; }
table.prices th, table.prices td { text-align: left; padding: 12px 10px 12px 0; border-bottom: 2px solid var(--sand); vertical-align: top; }
table.prices tbody tr:last-child th, table.prices tbody tr:last-child td { border-bottom: 0; }
table.prices thead th { font-size: .85rem; color: var(--stone); font-weight: 800; }
table.prices tbody th { font-weight: 700; white-space: nowrap; }
table.prices td strong { font: 800 1.3rem/1.1 var(--font-head); color: var(--rust); font-variant-numeric: tabular-nums; }
table.prices small { display: block; margin-top: 2px; }
.park-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.park-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--white); border-radius: var(--r-lg); padding: 14px 20px; min-height: 64px; }
.park-list a { font-weight: 800; text-decoration: none; color: var(--ink); }
.park-list a:hover { color: var(--green); text-decoration: underline; }
.park-list span { font: 800 1.2rem/1 var(--font-head); color: var(--rust); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Fuß ---------- */
.site-footer { background: var(--sand-2); color: var(--stone); font-size: .92rem; padding: 32px 0 40px; }
.footer-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-bottom: 12px; }
.footer-brand .brand-mark { width: 36px; height: 36px; }
.footer-brand .wordmark { font-size: 1.35rem; }
.footer-brand p { margin: 0; font-weight: 700; }
.footer-note { max-width: 46rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; }

/* ---------- ab Tablet ---------- */
@media (min-width: 600px) {
  :root { --gutter: 28px; }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 2rem; }
  .card { padding: 32px; }
  .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-copy h1 { font-size: 3.6rem; }
  .how { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  dl.summary { grid-template-columns: max-content minmax(0, 1fr); gap: 10px 28px; }
  dl.summary dt, dl.summary dt:first-child { margin-top: 0; }
  .park-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-card { padding: 8px 32px 16px; }
  .hero-photo img { aspect-ratio: 2 / 1; }
  .band-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .band-photos img:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
  .card-photo > .photo.card-img { margin: 0 -32px 28px; }
  .photo-label { left: 18px; bottom: 18px; }
}
/* ---------- Desktop: Hero zweispaltig, Karte rechts ---------- */
@media (min-width: 960px) {
  :root { --overlap: 140px; }
  .bar { padding-top: 22px; padding-bottom: 14px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "copy card" "photo card"; grid-template-rows: auto 1fr;
    gap: 0 56px; align-items: start; padding-top: 36px; }
  .card.wizard-card { margin-bottom: calc(-1 * var(--overlap)); }
  /* Foto links unter den Knöpfen; ragt wie die Karte unter den grünen Kopf hinaus */
  .hero-photo { margin: 36px 0 calc(-1 * var(--overlap)); }
  .hero-photo img { aspect-ratio: 4 / 3; }
  .hero-copy { padding-top: 28px; }
  .hero-copy h1 { font-size: 4.5rem; line-height: .95; }
  .hero-copy .lead { font-size: 1.25rem; }
  .main-home { padding-top: calc(var(--overlap) - 40px + 40px); }
  .card.wizard-card { padding: 32px 36px; }
  .how-section, .faq-section { max-width: none; }
  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Auswahl in der schmalen Wizard-Karte: Aufenthaltsart zweispaltig, Komfort als frei umbrechende Pillen */
.card.wizard-card .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
fieldset.group .options, .card.wizard-card fieldset.group .options { display: flex; flex-wrap: wrap; gap: 10px; }
fieldset.group .option { flex: 0 0 auto; padding: 10px 18px; }
/* Treffer-Karte mobil: Preis und Kurtaxe nebeneinander unter den Fakten, Button volle Breite */
@media (max-width: 599px) {
  .hit-price { flex: 1 1 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 10px; text-align: left; padding-top: 14px; border-top: 2px solid var(--sand); }
  .hit-price small { margin: 0; }
  .hit-price .button { grid-column: 1 / -1; margin-top: 12px; width: 100%; }
}
.card-center form { margin: 6px 0 14px; }