/* ==========================================================================
   Weberhof Münster – Camping
   Designsystem "Schwarz & Gold" (gewählt am 20.07.2026)
   Dokumentation im Vault:
   02 Projekte/Weberhof/Camping-Seite Neubau.md
   ========================================================================== */

/* ==========================================================================
   Montserrat, selbst gehostet
   Kein Google-Fonts-Einbau: Beim Abruf von fonts.gstatic.com würde die
   IP-Adresse jedes Besuchers an Google übertragen. Das ist in Deutschland
   abmahnfähig (LG München I, 3 O 17493/20).

   Variable Font, Achse auf 400-700 begrenzt und auf den benötigten
   Zeichenvorrat reduziert: 672 KB TTF -> 28 KB WOFF2.
   Lizenz: SIL Open Font License 1.1, Volltext in font/OFL.txt
   ========================================================================== */
@font-face{
  font-family:"Montserrat";
  src:url("font/montserrat-var.woff2") format("woff2-variations"),
      url("font/montserrat-var.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;   /* Text bleibt sofort lesbar, Schrift tauscht nach */
}

:root{
  /* === Gewählte Fassung: "Schwarz & Gold" (Entscheidung Max, 20.07.2026) ===
     Mattschwarze Flächen, heller Sandgrund, Gold als Handlungsfarbe.
     Nimmt die Linie von Finnis Finest auf; das Gold steckt bereits in den
     fünf Sternen der Wortmarke.
     Die Variablennamen mit "gruen" bleiben aus Kompatibilitätsgründen
     bestehen, tragen jetzt aber Schwarz- und Goldwerte. */
  --wh-gruen-900:#16171a;     /* Text und dunkelste Flächen */
  --wh-gruen-700:#2b2d31;
  /* Abgedunkeltes Gold für kleinen Text. #8f7526 kam nur auf 3,77:1 gegen den
     Sandgrund und verfehlte damit WCAG AA (4,5:1 bei 13 px). #7b611e erreicht
     5,5:1 bzw. 5,0:1 auf beiden Sandtönen. Gemessen am 20.07.2026. */
  --wh-gruen-500:#7b611e;
  --wh-gruen-300:#d9bd6a;

  /* --- Sand: Grundflächen --- */
  --wh-sand-50:#faf7f0;
  --wh-sand-100:#f2ece0;
  --wh-sand-200:#e2d8c4;

  /* --- Akzente --- */
  --wh-holz-600:#6b5a3a;
  --wh-gold-500:#c9a843;      /* identisch mit Finnis Finest */
  --wh-abend-800:#1a1b1e;     /* Hero und Abschluss */
  --wh-abend-900:#0e0f11;

  /* --- Text --- */
  --wh-text:#1c1d1f;
  --wh-text-muted:#63656a;
  --wh-text-invers:#fdfbf6;

  /* --- Form --- */
  --wh-radius-s:10px;
  --wh-radius-m:16px;
  --wh-radius-l:26px;
  --wh-schatten:0 12px 34px rgba(36,48,28,.10);
  --wh-schatten-stark:0 20px 50px rgba(36,48,28,.18);
  --wh-breite:1180px;

  /* Montserrat liegt jetzt lokal vor (siehe @font-face oben).
     Die Systemschriften bleiben als Rückfallebene stehen. */
  --wh-font:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
            "Helvetica Neue",Arial,sans-serif;
}

/* ==========================================================================
   Nicht gewählte Fassungen. Bleiben als Vergleich über ?thema=… erreichbar.
   ========================================================================== */

/* Frühere Fassung "Obstwiese", weiter über ?thema=obstwiese aufrufbar.
   Farben aus den Hof-Fotos gemessen, Grün als Handlungsfarbe. */
body[data-thema="obstwiese"]{
  --wh-gruen-900:#24301c;
  --wh-gruen-700:#3a4f28;
  --wh-gruen-500:#55702f;
  --wh-gruen-300:#8ca85c;
  --wh-sand-50:#faf6ee;
  --wh-sand-100:#f4eddf;
  --wh-sand-200:#e4d8c2;
  --wh-holz-600:#7a5c3a;
  --wh-abend-800:#2f3547;
  --wh-abend-900:#232838;
  --wh-text:#23291f;
  --wh-text-muted:#5f6a58;
}
body[data-thema="obstwiese"] .btn-primaer{
  background:var(--wh-gruen-500);color:#fff;
  box-shadow:0 8px 20px rgba(85,112,47,.28);
}
body[data-thema="obstwiese"] .btn-primaer:hover{
  background:var(--wh-gruen-700);color:#fff;
}
body[data-thema="obstwiese"] .icon-kreis{background:var(--wh-sand-100);color:var(--wh-gruen-500)}
body[data-thema="obstwiese"] .schritt::before{background:var(--wh-gruen-500);color:#fff}
body[data-thema="obstwiese"] .faq summary::after{border-color:var(--wh-gruen-500)}
body[data-thema="obstwiese"] .entf-rad{color:var(--wh-gruen-500)}

/* ==========================================================================
   Variante "Oliv & Gold" – der Kompromiss (20.07.2026)
   ?thema=olivgold

   Gedanke: Grün und Gold sind kein Gegensatz. Grün ist eine Flächenfarbe,
   Gold eine Aktionsfarbe. Die dunklen Flächen bleiben das gemessene Oliv
   des Hofs, handelnde Elemente werden gold. Max behält seine Farbwelt,
   Rieke bekommt ihr Gold an genau den Stellen, wo es auffällt.
   ========================================================================== */
body[data-thema="olivgold"]{
  --wh-gruen-500:#7d6a1f;    /* abgedunkeltes Gold, damit kleiner Text lesbar bleibt */
  --wh-abend-800:#232e1b;    /* Hero und Abschluss: sehr dunkles Oliv statt Abendblau */
  --wh-abend-900:#18200f;
}
body[data-thema="olivgold"] .btn-primaer{
  background:var(--wh-gold-500);color:#1a2113;
  box-shadow:0 8px 20px rgba(201,168,67,.30);
}
body[data-thema="olivgold"] .btn-primaer:hover{
  background:var(--wh-gruen-900);color:var(--wh-gold-500);
}
body[data-thema="olivgold"] .icon-kreis{background:var(--wh-gruen-900);color:var(--wh-gold-500)}
body[data-thema="olivgold"] .schritt::before{background:var(--wh-gruen-900);color:var(--wh-gold-500)}
body[data-thema="olivgold"] .faq summary::after{border-color:var(--wh-gold-500)}
body[data-thema="olivgold"] .entf-rad{color:var(--wh-gruen-700)}

/* ==========================================================================
   Variante "Blaue Stunde" (20.07.2026)
   ?thema=blauestunde

   Gedanke: Die Farben stammen komplett aus dem Hero-Foto. Abendblau des
   Himmels, Gold der Lichterketten, Creme als Grund. Die Seite trägt damit
   exakt die Stimmung, die das beste Bild des Hofs ausstrahlt.
   ========================================================================== */
body[data-thema="blauestunde"]{
  --wh-gruen-900:#232838;
  --wh-gruen-700:#333b52;
  --wh-gruen-500:#7a6520;    /* Gold für Text, abgedunkelt */
  --wh-text:#20242f;
  --wh-text-muted:#5d6373;
  --wh-sand-200:#ded6c6;
}
body[data-thema="blauestunde"] .btn-primaer{
  background:var(--wh-gold-500);color:#1c2030;
  box-shadow:0 8px 20px rgba(201,168,67,.30);
}
body[data-thema="blauestunde"] .btn-primaer:hover{
  background:var(--wh-abend-800);color:var(--wh-gold-500);
}
body[data-thema="blauestunde"] .icon-kreis{background:var(--wh-abend-800);color:var(--wh-gold-500)}
body[data-thema="blauestunde"] .schritt::before{background:var(--wh-abend-800);color:var(--wh-gold-500)}
body[data-thema="blauestunde"] .faq summary::after{border-color:var(--wh-gold-500)}
body[data-thema="blauestunde"] .entf-rad{color:var(--wh-gruen-700)}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  font-family:var(--wh-font);
  font-size:17px;
  line-height:1.65;
  color:var(--wh-text);
  background:var(--wh-sand-50);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;             /* Schutz gegen horizontales Scrollen */
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-family:var(--wh-font);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  color:var(--wh-gruen-900);
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:700}
h3{font-size:clamp(1.1rem,1.7vw,1.32rem);font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em;text-wrap:pretty}

a{color:var(--wh-gruen-700)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--wh-gold-500);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{width:min(var(--wh-breite),calc(100% - 2.6rem));margin-inline:auto}

section{padding:clamp(3.4rem,7vw,6rem) 0}

.kopfzeile{max-width:56ch;margin-bottom:2.6rem}
.kopfzeile.mitte{margin-inline:auto;text-align:center}
.augenbraue{
  display:block;font-size:.79rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--wh-gruen-500);margin-bottom:.7rem;
}
.lead{font-size:1.09rem;color:var(--wh-text-muted);margin-bottom:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.95rem 1.7rem;
  min-height:52px;                /* Fingergröße */
  border:2px solid transparent;border-radius:100px;
  font:inherit;font-weight:600;font-size:1rem;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
/* Handlungsfarbe Gold mit schwarzer Schrift.
   Weiß auf Gold käme nur auf etwa 3:1 und wäre nicht barrierefrei. */
.btn-primaer{background:var(--wh-gold-500);color:#14150f;box-shadow:0 8px 20px rgba(201,168,67,.32)}
.btn-primaer:hover{background:var(--wh-gruen-900);color:var(--wh-gold-500);transform:translateY(-2px);box-shadow:0 12px 26px rgba(22,23,26,.34)}
.btn-sekundaer{background:transparent;color:var(--wh-gruen-900);border-color:var(--wh-gruen-900)}
.btn-sekundaer:hover{background:var(--wh-gruen-900);color:#fff}
.btn-hell{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.btn-hell:hover{background:#fff;color:var(--wh-gruen-900);border-color:#fff}

/* ---------- Kopfleiste ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  background:rgba(250,246,238,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.kopf.gescrollt{border-bottom-color:var(--wh-sand-200);box-shadow:0 2px 18px rgba(36,48,28,.06)}
.kopf-innen{display:flex;align-items:center;gap:1.5rem;padding:.85rem 0}
.marke{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
/* Echte Wortmarke.
   Die Original-SVGs hatten 31 % leeren Rand, davon 131 Einheiten oben und nur
   60 unten. Dadurch hing die Marke tief und wirkte klein und undeutlich.
   Die viewBox ist jetzt auf den tatsächlichen Inhalt zugeschnitten
   (41 119 1135 583), die Höhenangabe entspricht damit der echten Marke. */
/* Kopfzeile: nur die Wortmarke "Weberhof", ohne "MÜNSTER" und Sterne.
   Das ist kein Nachbau in einer Ersatzschrift, sondern derselbe Pfad aus dem
   Original-SVG – die viewBox schneidet die unteren Bänder einfach ab.
   Damit bleibt JS Sunsanee erhalten, ohne die Schriftdatei einzubinden. */
.logo{height:30px;width:auto;display:block}

/* Fußzeile: vollständiges Logo mit Unterzeile und Sternen */
.logo-fuss{height:68px;margin-bottom:.2rem}
.nav{display:flex;gap:1.9rem;margin-left:auto}
.nav a{
  text-decoration:none;font-size:.95rem;font-weight:500;color:var(--wh-text);
  padding:.3rem 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s;
}
.nav a:hover{color:var(--wh-gruen-500);border-bottom-color:var(--wh-gruen-500)}
.kopf .btn{padding:.7rem 1.4rem;min-height:46px;font-size:.94rem}

/* Sprachumschalter */
.sprachen{display:flex;gap:.1rem;align-items:center;flex-shrink:0}
.sprachen button{
  background:none;border:0;cursor:pointer;font:inherit;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  color:var(--wh-text-muted);
  padding:.4rem .45rem;border-radius:6px;line-height:1;
  transition:color .15s ease,background-color .15s ease;
}
.sprachen button:hover{color:var(--wh-gruen-900)}
.sprachen button[aria-current="true"]{color:var(--wh-gruen-900);background:var(--wh-sand-100)}
.sprachen button:focus-visible{outline:2px solid var(--wh-gold-500);outline-offset:1px}

/* ---------- Hero ---------- */
/* Vollflächiges Hero: Bild deckt den ganzen Bereich, Text liegt darüber.
   Ein dunkler Verlauf von links sorgt für Lesbarkeit auf hellen Bildteilen. */
.hero{position:relative;background:var(--wh-abend-900);color:var(--wh-text-invers);overflow:hidden}
.hero-bild{position:absolute;inset:0;z-index:0}
.hero-bild img{width:100%;height:100%;object-fit:cover;object-position:center 65%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,
    rgba(14,15,17,.90) 0%, rgba(14,15,17,.78) 32%,
    rgba(14,15,17,.45) 60%, rgba(14,15,17,.20) 100%);
}
.hero-innen{
  position:relative;z-index:2;
  min-height:clamp(520px,72vh,680px);
  display:flex;align-items:center;
  padding:clamp(3rem,6vw,5rem) 0;
}
.hero-inhalt{max-width:600px}
.hero h1{color:#fff;margin-bottom:1.1rem}
.hero-text{font-size:1.14rem;color:rgba(255,255,255,.9);max-width:46ch;margin-bottom:1.9rem}

/* Faktenzeile im Hero */
.hero-fakten{
  display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:2rem;padding:0;list-style:none;
}
.hero-fakten li{
  display:flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  padding:.5rem 1rem;border-radius:100px;font-size:.9rem;font-weight:500;
}
.hero-fakten strong{font-weight:700;color:var(--wh-gold-500)}
.hero-aktionen{display:flex;flex-wrap:wrap;gap:.85rem}


/* ---------- Schnellfakten ---------- */
.fakten{background:var(--wh-sand-100);border-block:1px solid var(--wh-sand-200);padding:0}
.fakten-gitter{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--wh-sand-200)}
.fakt{background:var(--wh-sand-100);padding:1.7rem 1.3rem;text-align:center}
.fakt-wert{display:block;font-size:1.3rem;font-weight:700;color:var(--wh-gruen-700);margin-bottom:.15rem}
.fakt-label{font-size:.85rem;color:var(--wh-text-muted)}

/* ---------- Karten allgemein ---------- */
.karten{display:grid;gap:1.5rem}
.karten-3{grid-template-columns:repeat(3,1fr)}
.karte{
  background:#fff;border:1px solid var(--wh-sand-200);border-radius:var(--wh-radius-l);
  padding:2rem 1.8rem;box-shadow:var(--wh-schatten);
}
.karte h3{margin-bottom:.55rem}
.karte p:last-child{margin-bottom:0}
.karte-text{color:var(--wh-text-muted);font-size:.98rem}

/* ---------- Icons (von Max geliefert) ----------
   Einbindung als CSS-Maske statt als <img>: Die PNGs sind einfarbig auf
   transparentem Grund, dadurch färbt `background: currentColor` sie in der
   jeweiligen Textfarbe ein. Ein Dateisatz, passt sich jeder Farbvariante an.
   Entspricht dem Prinzip aus dem Icon Design System (Regel #30). */
.ic{
  display:inline-block;flex-shrink:0;
  width:26px;height:26px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.ic-strom{-webkit-mask-image:url("img/ic/strom.png");mask-image:url("img/ic/strom.png")}
.ic-wasser{-webkit-mask-image:url("img/ic/wasser.png");mask-image:url("img/ic/wasser.png")}
.ic-entsorgung{-webkit-mask-image:url("img/ic/entsorgung.png");mask-image:url("img/ic/entsorgung.png")}
.ic-wc{-webkit-mask-image:url("img/ic/wc.png");mask-image:url("img/ic/wc.png")}
.ic-dusche{-webkit-mask-image:url("img/ic/dusche.png");mask-image:url("img/ic/dusche.png")}
.ic-spuelplatz{-webkit-mask-image:url("img/ic/spuelplatz.png");mask-image:url("img/ic/spuelplatz.png")}
.ic-wlan{-webkit-mask-image:url("img/ic/wlan.png");mask-image:url("img/ic/wlan.png")}
.ic-hund{-webkit-mask-image:url("img/ic/hund.png");mask-image:url("img/ic/hund.png")}
.ic-fahrrad{-webkit-mask-image:url("img/ic/fahrrad.png");mask-image:url("img/ic/fahrrad.png")}
.ic-auto{-webkit-mask-image:url("img/ic/auto.png");mask-image:url("img/ic/auto.png")}
/* Das Geh-Piktogramm ist eine Flächenform, die anderen Icons sind Strichzeichnungen.
   Bei gleicher Kastengröße wirkt es dadurch schwerer, deshalb etwas kleiner. */
.ic-fuss{-webkit-mask-image:url("img/ic/fuss.png");mask-image:url("img/ic/fuss.png")}
.entfernungen .ic-fuss{width:16px;height:16px}
.ic-wiese{-webkit-mask-image:url("img/ic/wiese.png");mask-image:url("img/ic/wiese.png")}
.ic-vogel{-webkit-mask-image:url("img/ic/vogel.png");mask-image:url("img/ic/vogel.png")}
.ic-handarbeit{-webkit-mask-image:url("img/ic/handarbeit.png");mask-image:url("img/ic/handarbeit.png")}

/* Icon-Kreis */
.icon-kreis{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:var(--wh-gruen-900);color:var(--wh-gold-500);margin-bottom:1.15rem;
}
.icon-kreis svg{width:27px;height:27px}
.icon-kreis .ic{width:38px;height:38px}

/* ---------- Preiskarten ---------- */
.preis-karte{display:flex;flex-direction:column;text-align:center;align-items:center}
/* Fahrzeug-Illustrationen (von Max geliefert).
   Weiß gefüllte Formen mit schwarzer Kontur, also Rastergrafik statt Vektor.
   Sie lassen sich NICHT über currentColor einfärben und bleiben in beiden
   Farbvarianten schwarz-weiß. Auf hellen Karten ist das gewollt. */
.preis-karte .fahrzeug{
  margin-bottom:1.1rem;height:104px;      /* feste Bühne = gemeinsame Standlinie */
  display:flex;align-items:flex-end;justify-content:center;
}
.preis-karte .fahrzeug img{width:auto;max-width:100%;object-fit:contain}

/* Gestaffelte Darstellung: Das Fahrzeug wird mit der Preisklasse größer.
   Alle stehen auf derselben Linie, weil die Bühne gleich hoch bleibt. */
.fz-klein  img{height:78px}
.fz-mittel img{height:94px}
.fz-gross  img{height:104px}
.preis-laenge{font-size:.8rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--wh-gruen-500);margin-bottom:.5rem}
.preis-wert{font-size:2.9rem;font-weight:700;color:var(--wh-gruen-900);line-height:1}
.preis-einheit{font-size:.92rem;color:var(--wh-text-muted);margin-bottom:1.15rem}
.preis-fuer{font-size:.96rem;color:var(--wh-text-muted);border-top:1px solid var(--wh-sand-200);padding-top:1.15rem;width:100%;margin:0}

/* Preiskarte als Ganzes anklickbar: Deeplink in den Buchungsflow (Fahrzeugtyp vorbelegt) */
.preis-karte{position:relative;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.preis-karte:hover{transform:translateY(-3px);border-color:var(--wh-gold-500);box-shadow:0 12px 30px rgba(0,0,0,.10)}
.preis-link{position:absolute;inset:0;z-index:1;border-radius:inherit;text-decoration:none}
.preis-link:focus-visible{outline:3px solid var(--wh-gold-500);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.inklusive{
  margin-top:1.6rem;background:var(--wh-gruen-900);color:var(--wh-text-invers);
  border-radius:var(--wh-radius-l);padding:2rem 2.2rem;
  display:grid;grid-template-columns:1fr 1fr;gap:1.7rem;align-items:start;
}
.inklusive h3{color:#fff;font-size:1.1rem;margin-bottom:.85rem}
.inkl-liste{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.inkl-liste li{
  background:rgba(255,255,255,.1);border-radius:100px;padding:.4rem .95rem;font-size:.9rem;
}
.zusatz-liste{list-style:none;padding:0;margin:0;font-size:.94rem}
.zusatz-liste li{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border-bottom:1px solid rgba(255,255,255,.13)}
.zusatz-liste li:last-child{border-bottom:0}
.zusatz-liste span:first-child{color:rgba(255,255,255,.82)}
.zusatz-liste span:last-child{font-weight:600;white-space:nowrap}

/* ---------- Ruhe statt Party ----------
   Bewusst kompakter gehalten als die übrigen Abschnitte: Der Inhalt ist
   wichtig, soll die Seite aber nicht dominieren. */
.ruhe{
  background:var(--wh-sand-100);border-block:1px solid var(--wh-sand-200);
  padding-block:clamp(2.4rem,4.5vw,3.6rem);
}
.ruhe .kopfzeile{margin-bottom:1.7rem}
.ruhe-gitter{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.ruhe-karte{
  background:#fff;border:1px solid var(--wh-sand-200);
  border-radius:var(--wh-radius-m);padding:1.35rem 1.5rem;
  box-shadow:var(--wh-schatten);
  border-top:3px solid var(--wh-sand-200);
}
.ruhe-karte.ja{border-top-color:var(--wh-gold-500)}
.ruhe-karte.nein{border-top-color:var(--wh-gruen-700)}
.ruhe-karte h3{margin-bottom:.7rem;font-size:1.02rem}
.ruhe-karte ul{list-style:none;padding:0;margin:0}
.ruhe-karte li{
  position:relative;padding-left:1.75rem;margin-bottom:.42rem;
  font-size:.94rem;line-height:1.5;color:var(--wh-text-muted);
}
.ruhe-karte li:last-child{margin-bottom:0}
/* Häkchen und Strich als reine CSS-Form, damit keine Icon-Datei nötig ist */
.ruhe-karte.ja li::before{
  content:"";position:absolute;left:.25rem;top:.42em;
  width:.55rem;height:.3rem;
  border-left:2.5px solid var(--wh-gold-500);
  border-bottom:2.5px solid var(--wh-gold-500);
  transform:rotate(-45deg);
}
.ruhe-karte.nein li::before{
  content:"";position:absolute;left:.25rem;top:.72em;
  width:.7rem;height:0;border-top:2.5px solid var(--wh-text-muted);
}
.ruhe-schluss{
  margin:1.1rem 0 0;padding:1.05rem 1.5rem;
  background:var(--wh-gruen-900);color:rgba(255,255,255,.82);
  border-radius:var(--wh-radius-m);
  font-size:.95rem;line-height:1.55;text-align:center;
}
.ruhe-schluss strong{color:var(--wh-gold-500)}

/* ---------- Ausstattung ---------- */
.ausstattung-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.aus-punkt{
  display:flex;gap:1rem;align-items:flex-start;
  background:#fff;border:1px solid var(--wh-sand-200);border-radius:var(--wh-radius-m);padding:1.3rem;
}
.aus-punkt svg{width:25px;height:25px;color:var(--wh-gruen-500);flex-shrink:0;margin-top:.2rem}
.aus-punkt .ic{width:30px;height:30px;color:var(--wh-gold-500);margin-top:.1rem}
.aus-punkt h3{font-size:1rem;margin-bottom:.2rem}
.aus-punkt p{font-size:.92rem;color:var(--wh-text-muted);margin:0}

/* ---------- Galerie ---------- */
/* Gleichmäßiges 3×2-Raster für 6 Bilder. Bewusst ohne Zeilenspannung:
   ein hohes Hochformat neben niedrigen Querformaten erzeugt sonst Lücken.
   Alle Kacheln 4:3, Hoch- wie Querformat werden per object-fit beschnitten. */
.galerie{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
.galerie figure{
  margin:0;border-radius:var(--wh-radius-m);overflow:hidden;
  background:var(--wh-sand-200);aspect-ratio:4/3;
}
.galerie img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.galerie figure:hover img{transform:scale(1.04)}
/* Die beiden Hochformate mittig anschneiden, damit der Bildkern erhalten bleibt */
.galerie .gross img{object-position:center 40%}

/* ---------- Lage ---------- */
.lage-innen{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
.lage-bild{border-radius:var(--wh-radius-l);overflow:hidden;box-shadow:var(--wh-schatten)}
.entfernungen{list-style:none;padding:0;margin:1.6rem 0 0}
.entfernungen li{
  display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:baseline;
  padding:.72rem 0;border-bottom:1px solid var(--wh-sand-200);font-size:.97rem;
}
.entfernungen li:last-child{border-bottom:0}
.ziel{font-weight:600}
.ziel em{font-style:normal;font-weight:400;color:var(--wh-text-muted);font-size:.9em;margin-left:.4rem}
.entf,.entf-rad{
  display:inline-flex;align-items:center;gap:.42rem;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.entf{color:var(--wh-text-muted)}
.entf-rad{color:var(--wh-holz-600);font-weight:600}
.entfernungen .ic{width:19px;height:19px}
.entf .ic{color:var(--wh-text-muted)}
.entf-rad .ic{color:var(--wh-gold-500)}

/* ---------- Ablauf ---------- */
.ablauf{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;counter-reset:schritt}
.schritt{position:relative;padding-top:3.1rem}
.schritt::before{
  counter-increment:schritt;content:counter(schritt);
  position:absolute;top:0;left:0;
  width:42px;height:42px;border-radius:50%;
  background:var(--wh-gruen-900);color:var(--wh-gold-500);
  display:grid;place-items:center;font-weight:700;font-size:1.05rem;
}
.schritt h3{font-size:1rem;margin-bottom:.3rem}
.schritt p{font-size:.92rem;color:var(--wh-text-muted);margin:0}

/* ---------- FAQ (ohne JavaScript) ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq details{
  background:#fff;border:1px solid var(--wh-sand-200);border-radius:var(--wh-radius-m);
  margin-bottom:.75rem;overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 1.5rem;
  font-weight:600;font-size:1.02rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:11px;height:11px;flex-shrink:0;
  border-right:2.5px solid var(--wh-gold-500);border-bottom:2.5px solid var(--wh-gold-500);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details[open] summary{background:var(--wh-sand-100)}
.faq .antwort{padding:1.1rem 1.5rem 1.4rem;color:var(--wh-text-muted);font-size:.98rem}
.faq .antwort p:last-child{margin-bottom:0}

/* ---------- Gastgeber ---------- */
.gastgeber{background:var(--wh-sand-100);border-block:1px solid var(--wh-sand-200)}
/* Querformat-Foto, deshalb annähernd gleich breite Spalten. */
.gastgeber-innen{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
.gastgeber-bild{border-radius:var(--wh-radius-l);overflow:hidden;box-shadow:var(--wh-schatten)}
/* width:100% ist Pflicht, nicht Kosmetik.
   max-width:100% verkleinert ein Bild nur, es vergrößert es nie. Ist die Box
   breiter als die Datei (hier 738 px), bleibt rechts eine Lücke stehen und die
   abgerundete Ecke der Box wird sichtbar durchbrochen. */
.gastgeber-bild img,.lage-bild img{width:100%}
/* Die Vorlage ist mit 2,17:1 sehr breit. Auf 16:10 beschnitten wirkt sie
   ruhiger und beide Gesichter bleiben sicher im Bild. */
.gastgeber-bild img{aspect-ratio:16/10;object-fit:cover;object-position:center 42%}
.signatur{font-size:1.02rem;font-weight:600;color:var(--wh-gruen-700);margin-top:.4rem}

/* ---------- Abschluss ---------- */
.abschluss{background:var(--wh-abend-800);color:var(--wh-text-invers);text-align:center}
.abschluss h2{color:#fff}
.abschluss p{color:rgba(255,255,255,.84);max-width:52ch;margin-inline:auto;margin-bottom:2rem}
.abschluss-vorteile{
  list-style:none;padding:0;margin:2.2rem 0 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem 1.7rem;
  font-size:.9rem;color:rgba(255,255,255,.72);
}
.abschluss-vorteile li{display:flex;align-items:center;gap:.45rem}
.abschluss-vorteile svg{width:17px;height:17px;color:var(--wh-gold-500)}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--wh-abend-900);color:rgba(255,255,255,.72);font-size:.93rem;padding:3.4rem 0 6.5rem}
.fuss-innen{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.2rem}
.fuss h3{color:#fff;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:.9rem}
.fuss a{color:rgba(255,255,255,.72);text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.42rem}
.fuss-unten{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:.86rem;color:rgba(255,255,255,.5);
}

/* ---------- Mobile Buchungsleiste ---------- */
.mobil-leiste{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:70;
  background:rgba(250,246,238,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--wh-sand-200);
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  gap:.7rem;align-items:center;
}
.mobil-leiste .ab-preis{font-size:.86rem;line-height:1.25;color:var(--wh-text-muted);flex-shrink:0}
.mobil-leiste .ab-preis strong{display:block;font-size:1.06rem;color:var(--wh-gruen-900)}
.mobil-leiste .btn{flex:1;padding:.85rem 1rem}

/* ---------- Menüknopf ---------- */
.menue-knopf{
  display:none;background:transparent;border:0;cursor:pointer;padding:.55rem;
  margin-left:auto;color:var(--wh-gruen-900);
}
.menue-knopf svg{width:27px;height:27px}

/* ==========================================================================
   Mobile / Tablet
   ========================================================================== */
/* Hero wird zum Vollbild, sobald zwei Spalten nicht mehr tragen.
   Wichtig bereits ab 960px: sonst steht das Hochformat-Foto in voller
   Breite unter dem Text und wird absurd hoch. */
@media (max-width:960px){
  /* Hero ist jetzt auf allen Größen vollflächig. Auf schmalen Geräten
     stärkerer Verlauf von unten und Text am unteren Rand. */
  .hero::after{
    background:linear-gradient(175deg,
      rgba(14,15,17,.55) 0%, rgba(14,15,17,.35) 38%, rgba(14,15,17,.90) 100%);
  }
  .hero-innen{min-height:min(84vh,680px);align-items:flex-end;padding-bottom:2.6rem}
  .hero-bild img{object-position:center 60%}

  .karten-3{grid-template-columns:1fr 1fr}
  .ausstattung-gitter{grid-template-columns:1fr 1fr}
  .ablauf{grid-template-columns:repeat(2,1fr);gap:1.7rem}
  .lage-innen,.gastgeber-innen{grid-template-columns:1fr}
  /* Gestapelt würde das Hochformat-Foto über die volle Breite grotesk hoch
     (bei 768 px waren es 1538 px). Deshalb hier als breites Banner. */
  .gastgeber-bild img{aspect-ratio:16/10;object-fit:cover;object-position:center 32%}
  .fuss-innen{grid-template-columns:1fr 1fr}
  .inklusive{grid-template-columns:1fr}
}

/* Kopfzeile bricht schon vor 900px um, seit Montserrat im Einsatz ist:
   die Schrift läuft breiter als der vorherige Systemschrift-Stack.
   Deshalb wechseln Navigation und Buchungsleiste hier gemeinsam auf die
   mobile Fassung, nicht erst bei 720px. */
@media (max-width:900px){
  .nav{display:none}
  .kopf .btn{display:none}
  .menue-knopf{display:block}
  .mobil-leiste{display:flex}
  .fuss{padding-bottom:7rem}

  /* Kopfzeile ordnen: Logo links, dann Sprachen und Burger rechts.
     Die Sprachwahl bleibt auf dem Handy sichtbar, nicht im Menü versteckt. */
  .kopf-innen{gap:.5rem}
  .sprachen{order:2;margin-left:auto}
  .menue-knopf{order:3;margin-left:.1rem}
  .sprachen button{padding:.4rem .38rem}

  .nav.offen{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--wh-sand-50);border-bottom:1px solid var(--wh-sand-200);
    padding:.5rem 1rem 1rem;box-shadow:0 14px 30px rgba(36,48,28,.1);
  }
  .nav.offen a{padding:.95rem .3rem;border-bottom:1px solid var(--wh-sand-200)}
  .nav.offen a:last-child{border-bottom:0}
}

@media (max-width:720px){
  body{font-size:16px}
  .wrap{width:calc(100% - 2rem)}
  .nav.offen{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--wh-sand-50);border-bottom:1px solid var(--wh-sand-200);
    padding:.5rem 1rem 1rem;box-shadow:0 14px 30px rgba(36,48,28,.1);
  }
  .nav.offen a{padding:.95rem .3rem;border-bottom:1px solid var(--wh-sand-200)}
  .nav.offen a:last-child{border-bottom:0}

  .hero-text{font-size:1.03rem}
  .hero-aktionen .btn{flex:1;min-width:150px}

  /* Zentrierter Fließtext liest sich auf schmalen Displays schlecht.
     Überschriften bleiben mittig, der Absatz wird linksbündig. */
  .kopfzeile.mitte{text-align:left}
  .kopfzeile.mitte .augenbraue,
  .kopfzeile.mitte h2{text-align:center}
  .preis-karte,.preis-fuer{text-align:center}

  .fakten-gitter{grid-template-columns:1fr 1fr}
  .karten-3,.ausstattung-gitter,.ruhe-gitter{grid-template-columns:1fr}
  .ablauf{grid-template-columns:1fr}
  .fuss-innen{grid-template-columns:1fr;gap:1.8rem}
  .fuss{padding-bottom:7rem}
  /* Fußzeilen-Links auf Fingergröße bringen */
  .fuss li{margin-bottom:0}
  .fuss li a{display:inline-block;padding:.62rem 0;min-height:44px}
  .fuss-unten{gap:.2rem 1.5rem}
  .fuss-unten a{padding:.62rem 0;min-height:44px;display:inline-block}

  /* Galerie wird zum Wischstreifen */
  .galerie{
    display:flex;overflow-x:auto;gap:.8rem;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:.6rem;margin-inline:-1rem;padding-inline:1rem;
    scrollbar-width:thin;
  }
  .galerie figure{flex:0 0 78%;scroll-snap-align:center;aspect-ratio:4/3!important}
  .galerie .gross{flex-basis:88%}
  .galerie .gross img{aspect-ratio:4/3}

  .entfernungen li{grid-template-columns:1fr auto;row-gap:.1rem}
  .entfernungen .entf-rad{grid-column:2}

}

@media (max-width:400px){
  .hero-fakten li{font-size:.83rem;padding:.42rem .8rem}
  .preis-wert{font-size:2.5rem}
}