/* ============================================================
   Sperrfechter — Fundament der zweiten Entwurfsrunde
   Fokus: Feriencamper. Dauercamper nur als Randlink.
   Aufmacher: "Herzlich willkommen im Sperrfechter Freizeitpark"
   Ton: familiär und professionell, nicht brachial.
   ============================================================ */

/* ============================================================
   Schrift — LOKAL gehostet, bewusst nicht von Google.
   Beim Laden vom Google-CDN geht die IP-Adresse jedes Besuchers
   ungefragt an Google (LG München I, 3 O 17493/20). Ein Consent-
   Dialog löst das nicht sauber, lokales Hosting schon. Die beiden
   Dateien wiegen zusammen 48 KB und decken als variable Schrift
   alle Schnitte von 400 bis 800 ab — es lädt also weniger als
   vorher, nicht mehr.
   Erneuern: woff2 von fonts.google.com ziehen, in fonts/
   ablegen, Dateinamen hier anpassen. Sonst nichts.
   ============================================================ */
@font-face{
  font-family:"Onest";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("fonts/onest-latin.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;
}
@font-face{
  font-family:"Onest";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("fonts/onest-latin-ext.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;
}

:root{
  --papier:#FFFDF9;
  --papier-2:#F6F2E9;
  --tinte:#33352F;
  --tinte-2:#6B6D63;
  --linie:#E3DED2;
  --linie-2:#CEC8B9;

  /* Grün — aus dem Stylesheet der Live-Seite gemessen, entspricht der
     Arbeitskleidung und dem SUCHEN-Knopf des Buchungswidgets:
     #8DA876 Salbei · #46543B Oliv dunkel                                   */
  --gruen-tief:#36412D;
  --gruen:#46543B;
  --gruen-mittel:#8DA876;
  --gruen-hell:#B1C5A0;   /* von 88° auf 92° nachgezogen — war der einzige Ausreisser */
  --gruen-tint:#EAEEE6;   /* von 82° auf 92° nachgezogen */
  /* ---- Kühle Achse: EIN Farbton (175°), fünf Stufen ------------------------
     Helligkeit vom Live-Ton übernommen (#A2C4C9 ist genauso hell), der Farbton
     aber bewusst 12° zurück ins Grüne gedreht: rein aquablau lässt die grünen
     Flächen daneben stumpf aussehen, bei 175° bleiben beide Familien lebendig.
     Kopf und Hero liegen bewusst auf zwei verschiedenen Stufen, damit sich die
     Navigation vom Aufmacher darunter absetzt.

     Schrift ist auf allen Stufen WEISS und läuft mit voller Deckkraft — auf so
     hellem Grund kostet jede Abschwächung sofort Lesbarkeit. */
  --mint-tief:#3C6862; /* Fusszeile, tiefste Stufe                            */
  --mint:#4C817C;      /* AUFMACHER-BAND (.auf/.gruss) — die tiefe Stufe.
                          Absichtlich weit weg vom Kopf: zwei fast gleiche
                          helle Flächen übereinander lesen sich als Fehler,
                          nicht als Gestaltung. Erst der klare Sprung macht
                          aus zwei Bändern eine Ordnung.                      */
  --kopf:#9FC6C2;      /* Header/Navigation — die helle Stufe, dicht am
                          Live-Ton. Steht als schmales Band über dem tiefen
                          Aufmacher und setzt sich eindeutig ab.              */
  --mint-hell:#C0D8D6; /* Karten, Hinterlegungen                              */
  --mint-tint:#E3EDEC; /* Badges, zarte Flächen                               */

  /* warme Signalfarbe — nur Buchung.
     --signal bleibt der Markenton für Flächen und Ränder. Für Text gibt es zwei
     abgedunkelte Geschwister, weil #C2691C sowohl mit weisser Schrift darauf als
     auch als Textfarbe auf hell nur 3,9:1 erreicht — knapp unter der Schwelle.
     Der Farbunterschied ist mit blossem Auge nicht auszumachen. */
  --signal:#C2691C;
  --signal-btn:#B15E15;   /* Knopffüllung, weisse Schrift darauf: 4,7:1 */
  --signal-dk:#A15410;    /* Signalfarbe als Text auf hellem Grund: 5,5:1 */

  /* Fokusring. Prüft sich gegen alle Untergründe der Seite: auf --kopf über 5:1,
     auf Papier über 12:1. */
  --fokus:#1F3D39;

  /* Seitenrand UND Inhaltsbegrenzung in einem: auf breiten Monitoren wächst der
     Rand, sodass der Inhalt bei ~78rem (1248px) zentriert stehenbleibt.
     Farbige Bänder (volle Breite) und randlose Bilder bleiben unberührt, weil
     nur ihr Innenabstand mitwächst, nicht ihre Fläche. */
  --mx:max(clamp(1.25rem,5vw,5rem), (100% - 78rem) / 2);
  --tr:.2s cubic-bezier(.2,.6,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--papier);color:var(--tinte);
  font-size:clamp(1.06rem,1rem + .3vw,1.22rem);
  line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{line-height:1.12;letter-spacing:-.015em}

/* Prototyp-Balken — nicht Teil des Designs */
.proto{background:#26251F;color:#B6B2A6;font-size:.72rem;line-height:1.5;
  padding:.55rem var(--mx)}
.proto b{color:#fff;font-weight:600}

/* Wortmarke mit Logo.
   Das Original misst nur 130 × 130 px. Bei 58 px Anzeigehöhe bleibt es auf
   Retina-Displays (2×) gerade noch scharf — grösser darf es erst nach einer
   Vektor-Neuzeichnung werden.                                              */
.marke{display:flex;align-items:center;gap:.75rem}
.marke>img{width:58px;height:58px;flex:none;display:block}
.marke .wort{display:block;line-height:1.22}

/* Kopfzeile umbruchfest — die Navigation darf nie waagerecht überlaufen.
   Höhere Spezifität als die Entwurfs-Stile, damit sie zuverlässig greift.  */
header.kopf{flex-wrap:wrap}
header.kopf nav{flex-wrap:wrap;min-width:0}
header.kopf nav a{white-space:nowrap}

/* Ab hier klappt die Navigation zusammen. 860 px, nicht 620 — eine
   fünfteilige Navigation plus Telefonnummer wird schon auf Tablets zu breit. */
@media(max-width:860px){
  header.kopf nav a:not(.tel):not(.dc){display:none}
  header.kopf .burger{display:block}
}
@media(max-width:620px){
  .marke>img{width:46px;height:46px}
}

/* Kicker — auf hellem Grund das dunkle Oliv, sonst reicht der Kontrast nicht:
   Salbei #8DA876 auf Off-White ergibt nur 2,4:1                            */
.kicker{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gruen)}

/* Formularfelder */
.feld label{display:block;font-size:.7rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinte-2);margin-bottom:.4rem}
.feld input,.feld select{width:100%;min-width:0;padding:.72rem .8rem;
  border:1px solid var(--linie-2);background:#fff;font:inherit;font-size:.95rem;
  color:var(--tinte)}
.feld input:focus,.feld select:focus{outline:2px solid var(--gruen);outline-offset:-2px}

.btn{display:inline-block;background:var(--signal-btn);color:#fff;border:0;cursor:pointer;
  font:inherit;font-size:.95rem;font-weight:600;padding:.8rem 1.6rem;
  text-decoration:none;white-space:nowrap;transition:background var(--tr)}
.btn:hover{background:var(--signal-dk)}
.btn-linie{background:transparent;color:var(--tinte);border:1px solid var(--linie-2)}
.btn-linie:hover{border-color:var(--tinte)}
/* Buttons dürfen nicht von container-eigenen a-Farbregeln (z.B. `.weg a`,
   `.streifen a`) eingefärbt werden — sonst orange Schrift auf orangem Grund.
   `.weg .btn` (0,2,0) schlägt `.weg a` (0,1,1) unabhängig von der Quell-
   reihenfolge. */
.weg .btn,.wege .btn{color:#fff}
.weg .btn-linie,.wege .btn-linie{color:var(--tinte)}

/* Vertrauenszeile */
.trust{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;font-size:.86rem;color:var(--tinte-2)}
.trust b{color:var(--tinte);font-weight:600}

/* Mobile Leiste */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding-bottom:env(safe-area-inset-bottom);background:var(--gruen-tief)}
.bar a{flex:1;text-align:center;padding:1rem .5rem;text-decoration:none;color:#fff;
  font-size:.92rem;font-weight:600}
.bar .b1{background:var(--signal)}

/* Fussbereich */
.fuss{background:var(--gruen-tief);color:#A8AC9E;padding:clamp(2.5rem,5vw,4rem) var(--mx) 6rem;
  font-size:.9rem}
.fuss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr));gap:2rem}
.fuss strong{display:block;color:#fff;margin-bottom:.7rem;font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}
.fuss a{text-decoration:none}
.fuss a:hover{color:#fff}
.siegel{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;opacity:.75}
.siegel img{height:44px;width:auto}

.tab{font-variant-numeric:tabular-nums}
.hinweis{font-size:.8rem;color:var(--tinte-2);font-style:italic}

/* Mobilleiste und Mobilmenü teilen sich jetzt denselben Umbruch. Vorher kam die
   Leiste erst bei 820 px, das Hamburger-Menü aber schon bei 900 — dazwischen hatte
   man ein Mobilmenü, aber keine Buchungsleiste. */
@media(max-width:900px){
  .bar{display:flex}
  .fuss{padding-bottom:5.5rem}
}

/* Entwürfe C und F — Umbrüche extern, weil die Vorschau inline-@media verwirft.
   `body`-Präfix hebt die Spezifität über die inline-Basisregeln, sonst
   gewinnt die später im Quelltext stehende Desktop-Regel. */
/* „Der Platz" — ab hier stapeln die Zweispalter zu einer Spalte. Die Spiegel-
   Zeile wird zurückgedreht, damit auch dort das Bild oben steht (Quellreihenfolge
   ist Bild-zuerst). Extern, weil die Vorschau inline-@media verwirft. */
@media(max-width:760px){
  body .reihe{grid-template-columns:1fr;gap:1rem}
  body .reihe.flip figure{order:0}
  body .reihe.flip .txt{order:0}
}
@media(max-width:900px){
  body .gruss{grid-template-columns:1fr}
  body .gruss .film{min-height:0;aspect-ratio:16/9;order:-1}
  body .buchen .bz{grid-template-columns:1fr 1fr}
  body .buchen .bz .btn{grid-column:1/-1;width:100%}
}
@media(max-width:620px){
  body .buchen .bz{grid-template-columns:1fr}
}

/* Entwurf F1 — Vollbreiten-Seebild mit Text im Bild.
   Je schmaler das Gerät, desto flacher der Hero: Das Bild ist 3:2, und ein
   hoher Kasten auf einem schmalen Schirm schneidet links und rechts genau die
   Weiden weg, die das Motiv ausmachen. Flacher heisst hier also: mehr Bild. */
@media(max-width:900px){
  body .gruss-bild{height:clamp(420px,60vh,600px)}
}
@media(max-width:620px){
  body .gruss-bild{height:clamp(380px,56vh,520px)}
}

/* Entwurf F2 — gestapelt zeigt die Bildspalte das volle 3:2 des Fotos,
   nicht den 16:9-Ausschnitt, der für das Video richtig war. */
@media(max-width:900px){
  body .gruss-see .film{aspect-ratio:3/2}
}

/* ============================================================
   Consent-gestützte Fremd-Einbettung (Planyo, SecureHoliday, Gastronovi …)
   Der externe Dienst wird erst nach aktivem Klick geladen — bis dahin steht
   nur ein erklärender Platzhalter. Das ist der DSGVO-konforme Weg: kein
   Drittanbieter-Skript/Cookie ohne Einwilligung. Steuerung: einbetten.js
   ============================================================ */
.embed{border:1px solid var(--linie-2);background:var(--gruen-tint);
  overflow:hidden;margin-top:1.8rem}
.embed-info{padding:clamp(1.6rem,4vw,2.8rem);text-align:center}
.embed-info h3{font-size:1.25rem;margin-bottom:.5rem}
.embed-info p{color:var(--tinte-2);max-width:48ch;margin:.2rem auto 0}
.embed-info .btn{margin-top:1.3rem;cursor:pointer}
.embed-info .klein{font-size:.8rem;margin-top:1rem;color:var(--tinte-2)}
.embed-info .klein a{color:var(--gruen);font-weight:600}
.embed-frame{width:100%;border:0;display:block;background:#fff}

/* Direkteinbettung OHNE Zwei-Klick-Gate. Nur zulässig für Systeme, die uns selbst
   gehören (Ticketshop auf sperrfechter-freizeit.de) — dabei fließen keine Daten an
   Dritte, die Verarbeitung ist Vertragserfüllung. Echte Drittanbieter (Planyo)
   behalten den Platzhalter oben. */
.embed-kopf{padding:clamp(1.4rem,3.5vw,2.2rem) clamp(1.4rem,4vw,2.8rem) 1.1rem;text-align:center}
.embed-kopf h3{font-size:1.25rem;margin-bottom:.4rem}
.embed-kopf p{color:var(--tinte-2);max-width:48ch;margin:0 auto}
.embed-fuss{font-size:.8rem;color:var(--tinte-2);text-align:center;padding:.9rem 1.2rem;margin:0}
.embed-fuss a{color:var(--gruen);font-weight:600}

/* ============================================================
   Monatsplan der Gaststätte. Die Küchenzeiten wechseln tageweise,
   ein starrer Zeitenkasten wäre ab dem ersten Monat falsch. Statt
   dessen hängt das Monatsblatt des Betriebs. Gepflegt wird es an
   genau einer Stelle: monatsplan.js
   ============================================================ */
.monatsplan{border:1px solid var(--linie-2);background:#fff;margin-top:1.6rem;max-width:74rem}
.monatsplan-kopf{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;
  padding:1.2rem 1.3rem}
.monatsplan-kopf h3{font-size:1.15rem}
.monatsplan-kopf .monat{font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gruen);background:var(--gruen-tint);padding:.25rem .6rem}
.monatsplan-kopf p{flex-basis:100%;margin-top:.2rem;color:var(--tinte-2);
  font-size:.92rem;max-width:62ch}
.monatsplan-rahmen{display:none}
.monatsplan-rahmen.geladen{display:block;background:var(--papier-2);
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.monatsplan-rahmen img{width:100%;height:auto;display:block}
.monatsplan-fuss{display:flex;flex-wrap:wrap;gap:.8rem 1.1rem;align-items:center;
  padding:1.1rem 1.3rem}
.monatsplan-fuss .klein{font-size:.84rem;color:var(--tinte-2)}

/* ============================================================
   Zentrale Navigation (nav.js) — Dropdowns auf Desktop, Vollmenü auf Mobil.
   Höhere Spezifität (header.kopf …) als die alten Inline-Kopfregeln, damit
   diese hier greifen, egal was in den Seiten-<style>-Blöcken steht.
   ============================================================ */
header.kopf{position:relative;flex-wrap:nowrap}
/* Desktop: klebender Kopf. Oben SOLIDE/hell (wie gehabt), erst beim Scrollen
   wird er halbtransparent (Frosted-Glass über dem Inhalt). Klasse .gescrollt
   setzt nav.js abhängig von der Scrollposition. Auf Mobil bleibt der Kopf normal. */
@media(min-width:901px){
  header.kopf{position:sticky;top:0;z-index:100;
    transition:background var(--tr),-webkit-backdrop-filter var(--tr),backdrop-filter var(--tr)}
  header.kopf.gescrollt{background:rgba(159,198,194,.86);
    -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
}
header.kopf .hauptnav{margin-left:auto;display:flex;align-items:center;gap:1.3rem;min-width:0}
header.kopf .nav-liste{display:flex;align-items:center;gap:1.25rem;list-style:none;margin:0;padding:0}
header.kopf .nav-liste > li{position:relative}
header.kopf .nav-top{background:none;border:0;margin:0;padding:.25rem 0;font:inherit;font-size:.9rem;
  font-weight:500;color:#fff;opacity:1;text-decoration:none;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.25em}
header.kopf .nav-top:hover,header.kopf .nav-top:focus-visible{opacity:1}
header.kopf .nav-top.aktiv{opacity:1;font-weight:600;border-bottom:2px solid #fff;padding-bottom:2px}
header.kopf .hat-sub > .nav-top::after{content:"▾";font-size:.8em;opacity:.85}

/* Dropdown */
header.kopf .sub{position:absolute;top:100%;left:-.6rem;min-width:13.5rem;margin:0;padding:.4rem;
  list-style:none;background:#fff;border:1px solid var(--linie);border-radius:4px;
  box-shadow:0 14px 34px rgba(20,30,25,.16);opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity var(--tr),transform var(--tr),visibility var(--tr);z-index:80}
header.kopf .hat-sub:hover > .sub,
header.kopf .hat-sub:focus-within > .sub{opacity:1;visibility:visible;transform:translateY(0)}
header.kopf .sub a{display:block;padding:.5rem .7rem;border-radius:3px;font-size:.9rem;
  color:var(--tinte);text-decoration:none;opacity:1}
header.kopf .sub a:hover{background:var(--gruen-tint);color:var(--gruen-tief)}
header.kopf .sub a.aktiv{color:var(--gruen);font-weight:700}

/* Telefon + Buchen-Knopf rechts */
header.kopf .nav-tel{color:#fff;font-weight:700;text-decoration:none;font-size:.9rem;white-space:nowrap}
header.kopf .nav-buchen{padding:.5rem 1rem;font-size:.85rem;white-space:nowrap}

/* Hamburger */
header.kopf .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:2.4rem;height:2.4rem;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.5);
  border-radius:4px;cursor:pointer;padding:0}
header.kopf .nav-toggle span{display:block;width:1.1rem;height:2px;background:#fff;margin:0 auto;
  transition:transform var(--tr),opacity var(--tr)}

@media(max-width:900px){
  header.kopf .nav-toggle{display:flex}
  /* hebt die alte Seiten-Inline-Regel auf, die nav-Links auf Mobil ausblendet */
  header.kopf .hauptnav a{display:block !important}
  header.kopf .hauptnav{position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--kopf);
    padding:.4rem var(--mx) 1.2rem;border-top:1px solid rgba(255,255,255,.16);
    max-height:82vh;overflow-y:auto;z-index:70;
    display:none;box-shadow:0 16px 30px rgba(0,0,0,.25)}
  header.kopf.offen .hauptnav{display:flex}
  header.kopf .nav-liste{flex-direction:column;align-items:stretch;gap:0;width:100%}
  header.kopf .nav-liste > li{border-bottom:1px solid rgba(255,255,255,.12)}
  header.kopf .nav-top{display:flex;justify-content:space-between;width:100%;padding:.85rem 0;font-size:1.02rem}
  header.kopf .nav-top.aktiv{border-bottom:0}
  header.kopf .sub{position:static;opacity:1;visibility:visible;transform:none;display:none;
    background:transparent;border:0;box-shadow:none;padding:.1rem 0 .6rem .8rem;min-width:0}
  header.kopf .hat-sub.auf > .sub{display:block}
  header.kopf .hat-sub.auf > .nav-top::after{transform:rotate(180deg)}
  header.kopf .sub a{color:rgba(255,255,255,.9);padding:.5rem .3rem}
  header.kopf .sub a:hover{background:rgba(255,255,255,.08);color:#fff}
  header.kopf .sub a.aktiv{color:#fff;text-decoration:underline}
  header.kopf .nav-tel{padding:.85rem 0;font-size:1.02rem;border-bottom:1px solid rgba(255,255,255,.12)}
  header.kopf .nav-buchen{margin-top:.9rem;text-align:center}
}

/* ============================================================
   Consent-Banner (consent.js) + SecureHoliday-Platzhalter
   ============================================================ */
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--gruen-tief);
  color:#fff;padding:1rem var(--mx);box-shadow:0 -8px 30px rgba(0,0,0,.28)}
.consent-in{display:flex;flex-wrap:wrap;gap:.9rem 2rem;align-items:center;
  justify-content:space-between;max-width:78rem;margin:0 auto}
.consent-in p{margin:0;font-size:.9rem;color:rgba(255,255,255,.9);max-width:66ch}
.consent-in a{color:var(--gruen-hell);font-weight:600}
/* Drei Knöpfe passen auf 375 px nicht nebeneinander. Mit flex-shrink:0 am
   Knopfblock konnte dieser nicht schmaler werden als die Summe der Knöpfe —
   „Alle akzeptieren" stand dann ausserhalb des Bildschirms und war auf dem
   Telefon nicht anklickbar. Der Block darf schrumpfen, dann greift der Umbruch. */
.consent-btns{display:flex;flex-wrap:wrap;gap:.7rem;flex:0 1 auto;min-width:0}
.consent-btns .btn,.consent-btns .btn-linie{text-align:center;white-space:nowrap}
@media(max-width:700px){
  .consent-bar .consent-in p{font-size:.85rem}
  .consent-btns{flex:1 1 100%}
  .consent-btns .btn,.consent-btns .btn-linie{flex:1 1 auto;padding-left:1rem;padding-right:1rem}
}
.consent-bar .btn-linie{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.consent-bar .btn-linie:hover{background:rgba(255,255,255,.12);color:#fff}

.sh-platzhalter{background:var(--gruen-tint);border:1px solid var(--linie-2);
  padding:clamp(1.3rem,3vw,2rem);max-width:46rem}
.sh-platzhalter h3{font-size:1.2rem;margin-bottom:.4rem}
.sh-platzhalter p{color:var(--tinte-2);max-width:52ch;margin-top:.3rem}
.sh-platzhalter .btn{margin-top:1.1rem}
.sh-platzhalter .klein{font-size:.8rem;margin-top:.9rem;color:var(--tinte-2)}
.sh-platzhalter .klein a{color:var(--gruen);font-weight:600;text-decoration:none}
.sh-status{color:var(--tinte-2);font-size:.9rem;padding:.6rem 0}

/* ------------------------------------------------------------
   Einstellungs-Dialog (consent.js → sfConsent.oeffnen)
   Erreichbar über „Cookie-Einstellungen" im Fussbereich jeder
   Seite und über den Knopf „Einstellungen" im Hinweisband.
   Art. 7 Abs. 3 DSGVO: Widerruf so einfach wie die Erteilung —
   deshalb ein Schalter je Dienst statt eines Alles-oder-nichts.
   ------------------------------------------------------------ */
html.cbox-offen{overflow:hidden}
.cbox-hinter{position:fixed;inset:0;z-index:300;background:rgba(15,32,25,.55);
  display:flex;align-items:center;justify-content:center;padding:1rem;overflow-y:auto}
.cbox{position:relative;background:var(--papier);width:min(100%,40rem);
  max-height:calc(100vh - 2rem);overflow-y:auto;
  padding:clamp(1.4rem,4vw,2.2rem);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.cbox h2{font-size:1.4rem;max-width:none;padding-right:2.5rem}
.cbox-lead{margin-top:.6rem;color:var(--tinte-2);font-size:.95rem;max-width:60ch}
.cbox-zu{position:absolute;top:.5rem;right:.7rem;background:none;border:0;
  font-size:1.8rem;line-height:1;color:var(--tinte-2);cursor:pointer;padding:.2rem .4rem}
.cbox-zu:hover{color:var(--tinte)}

.cbox-dienst{display:flex;gap:.9rem;align-items:flex-start;margin-top:1rem;
  border:1px solid var(--linie);background:#fff;padding:1rem 1.1rem;cursor:pointer}
.cbox-dienst:hover{border-color:var(--linie-2)}
.cbox-dienst input{margin-top:.25rem;width:1.15rem;height:1.15rem;flex:none;
  accent-color:var(--gruen);cursor:pointer}
.cbox-dienst>span{display:block}
.cbox-dienst b{display:block;font-size:1rem}
.cbox-dienst em{display:block;font-style:normal;font-size:.8rem;color:var(--tinte-2);margin-top:.1rem}
.cbox-zweck{display:block;margin-top:.45rem;font-size:.9rem;color:var(--tinte-2);max-width:56ch}
.cbox-fest{background:var(--gruen-tint);cursor:default}
.cbox-fest input{cursor:not-allowed}

.cbox-btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.cbox-btns .btn,.cbox-btns .btn-linie{flex:1 1 auto;text-align:center;cursor:pointer}
.cbox-fuss{margin-top:1.1rem;font-size:.8rem;color:var(--tinte-2);max-width:64ch}
.cbox-fuss a{color:var(--gruen);font-weight:600}

/* ============================================================
   NACHTRAG aus dem Audit vom 27.07.2026
   ============================================================ */

/* --- Fokus ------------------------------------------------
   Vorher gab es auf der ganzen Website keinen einzigen sicht-
   baren Fokuszustand: wer ohne Maus arbeitet, sah beim Tabben
   nicht, wo er steht. :where() hat Spezifitaet 0 — die Regel
   ueberschreibt nichts und wird von nichts ueberschrieben. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--fokus);outline-offset:2px}
/* Auf dunklen Baendern waere ein dunkler Ring unsichtbar */
:where(.cta,.offen,.fuss,.bar,.consent-bar,.auf,.gruss,.gf,.fakten,.b-tief)
  :where(a,button):focus-visible{outline-color:#fff}
.btn:focus-visible{outline:3px solid var(--fokus);outline-offset:3px}

/* --- Sprungmarken -----------------------------------------
   Der Kopf klebt ab 901 px oben. Ohne scroll-margin schiebt
   jeder Ankerklick das Ziel exakt darunter — betraf u.a. die
   47 Verlinkungen auf #buchen und die Speisekarten-Sprungmarken. */
:where([id]){scroll-margin-top:6.5rem}
@media(max-width:900px){:where([id]){scroll-margin-top:1.5rem}}

/* --- Tabellen ---------------------------------------------
   Breite Tabellen scrollen in sich statt die Seite zu sprengen. */
.tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab-wrap>table{min-width:26rem}

/* --- Sprung zum Inhalt ------------------------------------
   Erster Tabstopp jeder Seite, sonst tabbt man sich jedes Mal
   durch die komplette Navigation. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gruen-tief);
  color:#fff;padding:.7rem 1.1rem;font-weight:600;font-size:.9rem;text-decoration:none}
.skip:focus{left:0}

/* --- Sicherheitsabstand am unteren Bildschirmrand ----------
   iPhones mit Home-Indikator legten die Consent-Knoepfe sonst
   in die Wischgeste. */
.consent-bar{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}

/* --- Prototyp-Balken --------------------------------------
   VOR DEM LIVEGANG: die naechste Zeile einkommentieren. Dann
   verschwinden alle 34 Hinweisbaender auf einen Schlag, ohne
   dass die Notizen im Quelltext verloren gehen. */
/* .proto{display:none} */

/* ============================================================
   Knopfblock „Alles zur Buchung an einer Stelle".
   Auf der Altseite waren das sechs gleich aussehende Kacheln —
   dabei sind zwei davon Kaufhandlungen und vier Hilfsmittel.
   Deshalb hier zwei Stufen: Anfrage und Buchung tragen Farbe,
   der Rest steht als ruhige Karte daneben.
   ============================================================ */
.block-titel{font-size:1.15rem;font-weight:700;margin-top:clamp(2rem,4vw,3rem)}
.knopfblock{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:.8rem;margin-top:1.1rem;max-width:74rem}
.kb{display:flex;flex-direction:column;gap:.25rem;background:#fff;
  border:1px solid var(--linie);padding:1.05rem 1.2rem;text-decoration:none;color:var(--tinte);
  transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr)}
.kb:hover{border-color:var(--gruen-mittel);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(54,65,45,.09)}
.kb .kb-t{font-weight:700;font-size:1rem}
.kb .kb-u{font-size:.86rem;color:var(--tinte-2);line-height:1.4}
.kb-haupt{background:var(--gruen-tint);border-color:var(--gruen-mittel)}
.kb-haupt .kb-t{color:var(--gruen-tief)}
.kb-haupt:hover{background:#fff}

/* Anfrageformular */
.anfrageform{margin-top:1.6rem;max-width:44rem;display:grid;
  grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
.anfrageform .feld-breit{grid-column:1/-1}
.anfrageform textarea{width:100%;padding:.72rem .8rem;border:1px solid var(--linie-2);
  background:#fff;font:inherit;font-size:.95rem;color:var(--tinte);resize:vertical}
.anfrageform textarea:focus{outline:2px solid var(--gruen);outline-offset:-2px}
.feld-aktion{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center}
.feld-aktion .klein{font-size:.86rem;color:var(--tinte-2)}
.feld-aktion .klein a{color:var(--gruen);font-weight:600}
.datenschutz-hinweis{grid-column:1/-1;font-size:.82rem;color:var(--tinte-2);margin-top:-.3rem}
.datenschutz-hinweis a{color:var(--gruen);font-weight:600}
@media(max-width:620px){.anfrageform{grid-template-columns:1fr}}

/* Kategorien-Erklärung unter den Preistabellen */
.kategorien{margin-top:1.4rem;max-width:62rem;background:var(--mint-tint);
  border-left:4px solid var(--kopf);padding:.9rem 1.1rem;font-size:.94rem}

/* Aushang-Abbildung (ParkRun u.a.) — das Plakat als Beleg neben dem Text */
.aushang{margin-top:1.8rem;max-width:44rem;border:1px solid var(--linie);background:#fff;padding:.6rem}
.aushang img{width:100%;height:auto;display:block}
.aushang figcaption{font-size:.84rem;color:var(--tinte-2);padding:.7rem .3rem .2rem}

/* ============================================================
   Formulare (formulare.js). Die Felddefinitionen stehen dort,
   hier nur das Aussehen — ein Satz Regeln für alle Formulare.
   ============================================================ */
.wf{margin-top:1.6rem;max-width:46rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
.wf .feld-breit{grid-column:1/-1}
.wf .form-gruppe{grid-column:1/-1;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gruen);margin-top:.9rem;padding-top:.9rem;
  border-top:1px solid var(--linie)}
.wf .form-gruppe:first-child{margin-top:0;padding-top:0;border-top:0}
.wf textarea,.wf select{width:100%;padding:.72rem .8rem;border:1px solid var(--linie-2);
  background:#fff;font:inherit;font-size:.95rem;color:var(--tinte)}
.wf textarea{resize:vertical}
.wf textarea:focus,.wf select:focus{outline:2px solid var(--gruen);outline-offset:-2px}
.wf .feld-tipp{display:block;font-size:.8rem;color:var(--tinte-2);margin-top:.3rem}
.wf .wahlfeld{display:grid;gap:.45rem;margin-top:.2rem}
.wf .wahl{display:flex;align-items:flex-start;gap:.55rem;font-size:.94rem;
  font-weight:400;letter-spacing:0;text-transform:none;color:var(--tinte);cursor:pointer}
.wf .wahl input{flex:none;margin-top:.28rem;width:auto}
.wf .wahl a{color:var(--gruen);font-weight:600}
.wf .honigtopf{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wf-hinweis{margin-top:.9rem;max-width:56ch;color:var(--tinte-2)}
.wf-meldung{grid-column:1/-1}
.wf-meldung.wf-erfolg{background:var(--gruen-tint);border-left:4px solid var(--gruen-mittel);
  padding:1.1rem 1.3rem;line-height:1.6}
.wf-meldung.wf-fehler{background:#F6E7DA;border-left:4px solid var(--signal);
  padding:1rem 1.2rem;color:var(--signal-dk)}
.wf-meldung a{color:inherit;font-weight:600}
@media(max-width:620px){.wf{grid-template-columns:1fr}}

/* Parzellen-Anzeige beim Zählerstand */
.parzelle-kasten{margin-top:1.4rem;max-width:46rem;background:var(--mint-tint);
  border-left:4px solid var(--kopf);padding:1rem 1.2rem;display:flex;
  flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem}
.parzelle-kasten .pz-label{font-size:.9rem;color:var(--tinte-2)}
.parzelle-kasten .pz-wert{font-size:1.8rem;font-weight:800;color:var(--gruen-tief);
  letter-spacing:.04em;line-height:1}
.parzelle-kasten .pz-tipp{flex-basis:100%;font-size:.84rem;color:var(--tinte-2)}
.parzelle-kasten .pz-eingabe{padding:.6rem .8rem;border:1px solid var(--linie-2);
  background:#fff;font:inherit;font-size:1.05rem;font-weight:700;text-transform:uppercase;
  max-width:9rem}

/* Achtung-Band (z. B. keine freien Jahresstellplätze) */
.achtung-band{display:flex;gap:1rem;align-items:flex-start;background:#F6E7DA;
  border-left:4px solid var(--signal);padding:1.1rem 1.3rem;max-width:64rem}
.achtung-band .ausruf{flex:none;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--signal);padding:.28rem .6rem}
.achtung-band p{font-size:.98rem;line-height:1.55}
@media(max-width:560px){.achtung-band{flex-direction:column;gap:.7rem}}

/* Ticketshop-Verweis (statt fremde Seite im iframe zu spiegeln) */
.ticket-kasten{border:1px solid var(--linie-2);background:var(--gruen-tint);
  padding:clamp(1.4rem,3.5vw,2.2rem);margin-top:1.8rem;max-width:74rem}
.ticket-kasten h3{font-size:1.2rem;margin-bottom:.5rem}
.ticket-kasten p{color:var(--tinte-2);max-width:60ch}
.ticket-aktion{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center}
.ticket-aktion .klein{font-size:.84rem;color:var(--tinte-2);max-width:44ch}
.ticket-aktion .klein a{color:var(--gruen);font-weight:600}

/* Buchbare Preise werden auf der Dauercamper-Seite gestaltet (.buchen-preis) */