/* =========================================================
   Steinbock Ferienwohnung
   Ruhig und aufgeräumt: Tannengrün, warmes Weiß, Sand.
   Ein Raster (1080 px), viel Luft, runde Fotos und Kacheln,
   der Wald im Startbild, im Zwischenband und am Seitenende.
   ========================================================= */

@font-face { font-family: "Lora"; src: url("../fonts/lora.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-italic.woff") format("woff"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Farben */
  --wald-900: #1c2a21;
  --wald-700: #2e4436;
  --wald-600: #3a5544;
  --wald-100: #e4ebe0;
  --papier: #f6f1e8;     /* warmes Papier statt Weiß */
  --sand: #eee7db;
  --karte: #fcf9f3;
  --text: #26241f;
  --text-2: #66625a;
  --linie: #e0d7c8;
  --akzent: #9e4813;      /* Text-Orange auf hellem Grund (mind. 5 : 1 auch auf Sand) */
  --orange: #b8561a;      /* Knöpfe mit weißer Schrift (4,8 : 1) */
  --orange-tief: #9c4813;
  --orange-hell: #f4ad66; /* auf dunklem Grund */
  --hell: #fffdf8;
  --honig: #f5c38e;
  --frei: #e3ebdc;
  --belegt: #d5cab8;

  /* Namen, die die Verwaltungsseite noch benutzt */
  --tanne: var(--wald-700);
  --wald: var(--wald-700);
  --kalk: var(--papier);
  --holz: var(--akzent);
  --knopf: var(--wald-700);
  --leise: var(--text-2);
  --leinen: var(--sand);

  /* Schrift */
  --titel: "Lora", Georgia, "Times New Roman", serif;
  --schrift: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --schrift-text: var(--schrift);
  --schrift-titel: var(--titel);

  /* Raster und Formen */
  --breite: 1080px;
  --rand: max(16px, env(safe-area-inset-left, 0px));
  --rand-r: max(16px, env(safe-area-inset-right, 0px));
  --luft: clamp(4.5rem, 9vw, 7.5rem);
  --r-bild: 18px;
  --r-karte: 24px;
  --r-feld: 12px;
  --schatten: 0 1px 2px rgba(28, 42, 33, .05), 0 8px 24px rgba(28, 42, 33, .07);

  /* Schriftgrößen: eine Skala für die ganze Seite */
  --fs-mini: .8125rem;   /* 13 px Fußnoten, Fußzeile */
  --fs-klein: .9375rem;  /* 15 px Hinweise, Bildunterschriften */
  --fs-text: 1.0625rem;  /* 17 px Fließtext */
  --fs-lead: clamp(1.1875rem, 1.6vw, 1.375rem); /* 19 bis 22 px */
  --fs-h3: 1.5rem;       /* 24 px */
  --fs-h2: clamp(2.125rem, 4.4vw, 3.25rem);     /* 34 bis 52 px */
  --fs-h1: clamp(2.5rem, 6vw, 4.75rem);         /* 40 bis 76 px */
  --fs-zahl: clamp(3.5rem, 6.5vw, 5rem);
  --gewicht-titel: 560;

  /* Liquid Glass: dunkles Glas über dem Wald, helles Glas über hellen Flächen */
  --kopf-h: 52px;
  --kopf-abstand: 10px;
  --kopf-gesamt: calc(var(--kopf-h) + var(--kopf-abstand) + env(safe-area-inset-top, 0px));
}

.glas {
  --g-grund: linear-gradient(155deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .06) 48%, rgba(255, 255, 255, .1) 100%), rgba(20, 31, 24, .2);
  --g-rand: rgba(255, 255, 255, .2);
  --g-licht: rgba(255, 255, 255, .38);
  --g-licht-unten: rgba(255, 255, 255, .07);
  --g-schatten: 0 18px 44px rgba(6, 12, 8, .26);
}
.glas-hell, .kopf--hell {
  --g-grund: linear-gradient(155deg, rgba(253, 250, 244, .8) 0%, rgba(250, 245, 236, .58) 100%);
  --g-rand: rgba(255, 255, 255, .78);
  --g-licht: rgba(255, 255, 255, .95);
  --g-licht-unten: rgba(28, 42, 33, .05);
  --g-schatten: 0 10px 30px rgba(28, 42, 33, .13), 0 1px 3px rgba(28, 42, 33, .08);
}
.glas, .glas-hell, .kopf-innen::before {
  background: var(--g-grund);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--g-rand);
  box-shadow: inset 0 1px 0 var(--g-licht), inset 0 -1px 0 var(--g-licht-unten), var(--g-schatten);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { --g-grund: rgba(30, 44, 35, .86); }
  .glas-hell, .kopf--hell { --g-grund: rgba(248, 244, 236, .96); }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--wald-900); color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 var(--fs-text)/1.55 var(--schrift); color: var(--text); background: var(--wald-900); isolation: isolate; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* Fest im Hintergrund: dieselbe Landschaft wie im Startbild am sonnigen Nachmittag, etwas kräftiger
   als oben, damit weiße Schrift lesbar bleibt. Sichtbar im Band „Auf einen Blick“, bei den Bewertungen,
   am Seitenende und in den Köpfen der Unterseiten. */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: #6f9aa9 url("../bilder/hintergrund/tag-weit.svg") center bottom / cover no-repeat; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 28, 22, .22), rgba(18, 28, 22, .04) 45%, rgba(18, 28, 22, .3)); }
@media (max-aspect-ratio: 4/5) { body::before { background-image: url("../bilder/hintergrund/tag-hoch.svg"); } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }
h1, h2, h3 { font-family: var(--titel); font-weight: var(--gewicht-titel); line-height: 1.12; margin: 0; color: var(--text); text-wrap: balance; }
h3 { font-size: var(--fs-h3); font-weight: var(--gewicht-titel); }
p { margin: 0 0 1rem; }
mark { background: #f3e2bb; padding: 0 .2em; border-radius: 3px; }
:focus-visible { outline: 3px solid rgba(46, 68, 54, .45); outline-offset: 3px; border-radius: 6px; }
.icon { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.leise { color: var(--text-2); }
.klein { font-size: var(--fs-klein); color: var(--text-2); }
sup { font-size: .55em; line-height: 0; vertical-align: super; margin-left: .1em; }
sup a { color: inherit; font-weight: 400; }
sup a:hover { text-decoration: none; opacity: .7; }

/* ---------- Raster ---------- */
.innen { width: 100%; max-width: calc(var(--breite) + 32px); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand-r); }
.abschnitt { padding-block: var(--luft); scroll-margin-top: calc(var(--kopf-gesamt) + 8px); }
.abschnitt--hell { background: var(--papier); }
.abschnitt--sand { background: var(--sand); }
.kopfzeile { text-align: center; max-width: 44rem; margin: 0 auto clamp(2.75rem, 5vw, 3.75rem); }
.kopfzeile--links { text-align: left; margin-left: 0; }
.dach { font: 700 var(--fs-text)/1.3 var(--schrift); color: var(--akzent); margin: 0 0 .75rem; }
.abschnitt h2, .kopfzeile h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.015em; }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--text-2); margin: 1.1rem 0 0; text-wrap: balance; }
.held-text, .rundgang-text, .abschluss p { text-wrap: balance; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.aktionen--mitte { justify-content: center; }
.held .aktionen, .abschluss .aktionen { gap: .75rem; }
@media (max-width: 520px) { .held .aktionen .pille, .abschluss .aktionen .pille { width: min(100%, 17.5rem); } }

/* ---------- Knöpfe und Links ---------- */
.pille {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-align: center;
  font: 700 1rem/1.2 var(--schrift); color: #fff; background: var(--wald-700);
  padding: .78rem 1.45rem; border: 0; border-radius: 980px; cursor: pointer; text-decoration: none;
  transition: background .2s ease;
}
.pille:hover { background: var(--wald-600); color: #fff; text-decoration: none; }
.pille--gross { font-size: 1.06rem; padding: .95rem 1.8rem; }
.pille--klein { font-size: .9rem; padding: .55rem 1rem; }
.pille--breit { width: 100%; }
.pille--hell { background: var(--karte); color: var(--wald-700); box-shadow: inset 0 0 0 1px var(--linie); }
.pille--hell:hover { background: var(--sand); color: var(--wald-700); }
.pille--orange { background: linear-gradient(180deg, #c2601f, var(--orange)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 18px rgba(184, 86, 26, .28); }
.pille--orange:hover { background: linear-gradient(180deg, #b0551a, var(--orange-tief)); color: #fff; }
.pille .icon { width: 1.25em; height: 1.25em; margin-left: -.15em; }
.pille--creme { background: #f6f1e7; color: var(--wald-900); }
.pille--creme:hover { background: var(--karte); color: var(--wald-900); }
.pille--glas {
  color: #fff; background: linear-gradient(155deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 24px rgba(0, 0, 0, .16);
}
.pille--glas:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.pille--leer { background: rgba(255, 255, 255, .7); color: var(--wald-700); box-shadow: inset 0 0 0 1px rgba(28, 42, 33, .08); }
.pille--leer:hover { background: var(--karte); color: var(--wald-700); }
.pille--rahmen { background: transparent; color: var(--wald-700); box-shadow: inset 0 0 0 1.5px var(--wald-700); }
.pille--rahmen:hover { background: var(--wald-700); color: #fff; }
.mehr { font-weight: 700; color: var(--akzent); display: inline-flex; align-items: center; }
.mehr::after { content: "›"; font-size: 1.3em; line-height: 1; margin-left: .3em; transition: transform .2s ease; }
.mehr:hover { text-decoration: none; }
.mehr:hover::after { transform: translateX(3px); }
.mehr--hell { color: var(--honig); }
/* alte Namen für die Verwaltung */
.knopf { display: inline-flex; align-items: center; justify-content: center; font: 700 1rem/1.2 var(--schrift); color: #fff; background: var(--wald-700); padding: .78rem 1.45rem; border: 0; border-radius: 980px; cursor: pointer; text-decoration: none; }
.knopf:hover { background: var(--wald-600); color: #fff; text-decoration: none; }
.knopf--hell { background: var(--karte); color: var(--wald-700); box-shadow: inset 0 0 0 1px var(--linie); }
.knopf--frei { background: #3f7350; }

/* ---------- Kopfzeile: schwebende Glasleiste ---------- */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; pointer-events: none;
  padding: calc(var(--kopf-abstand) + env(safe-area-inset-top, 0px)) var(--rand-r) 0 var(--rand);
  --g-grund: linear-gradient(155deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)), rgba(22, 34, 26, .34);
  --g-rand: rgba(255, 255, 255, .18);
  --g-licht: rgba(255, 255, 255, .3);
  --g-licht-unten: rgba(255, 255, 255, .05);
  --g-schatten: 0 10px 30px rgba(6, 12, 8, .22);
  --g-menue: rgba(22, 34, 26, .9);
  --k-text: #fff;
  --k-text-2: rgba(255, 255, 255, .82);
  --k-linie: rgba(255, 255, 255, .12);
}
.kopf--hell { --g-menue: rgba(248, 244, 236, .95); --k-text: var(--wald-900); --k-text-2: #3e4a40; --k-linie: rgba(28, 42, 33, .09); }
.kopf-innen {
  pointer-events: auto; position: relative; max-width: var(--breite); height: var(--kopf-h); margin: 0 auto;
  padding: 0 7px 0 18px; display: flex; align-items: center; gap: 1.5rem; border-radius: 980px;
}
/* Das Glas liegt auf einer eigenen Ebene, damit das Menü darunter selbst weichzeichnen kann */
.kopf-innen::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
.marke { display: flex; align-items: center; gap: .55rem; color: var(--k-text); flex: none; font: 600 1.15rem/1 var(--titel); letter-spacing: .02em; transition: color .35s ease; }
.marke:hover { text-decoration: none; color: var(--k-text); }
.marke img { width: 26px; height: auto; }
.marke-dunkel, .kopf--hell .marke-hell { display: none; }
.kopf--hell .marke-dunkel { display: block; }
.navi { margin-left: auto; }
.navi ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }
.navi a { color: var(--k-text-2); font-size: .86rem; letter-spacing: .01em; transition: color .35s ease; }
.navi a:hover, .navi a[aria-current="page"] { color: var(--k-text); text-decoration: none; }
.kopf-cta { flex: none; font-size: .82rem; padding: .5rem 1rem; }
.menue-knopf { display: none; }
@media (max-width: 960px) {
  .kopf-innen { padding-left: 16px; }
  .navi {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; display: none;
    background: var(--g-menue); border: 1px solid var(--g-rand); border-radius: 24px; box-shadow: var(--g-schatten);
    -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  }
  .navi.offen { display: block; }
  .navi ul { flex-direction: column; gap: 0; padding: .35rem 1.25rem; }
  .navi li + li { border-top: 1px solid var(--k-linie); }
  .navi a { display: block; padding: .85rem 0; font-size: 1.05rem; color: var(--k-text); }
  .kopf-cta { margin-left: auto; }
  .menue-knopf { display: grid; place-items: center; width: 40px; height: 40px; background: transparent; border: 0; color: var(--k-text); cursor: pointer; }
  .menue-knopf span, .menue-knopf span::before { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform .2s ease; }
  .menue-knopf span::before { content: ""; position: absolute; top: 6px; left: 0; }
  .menue-knopf span { transform: translateY(-3px); }
  .menue-knopf[aria-expanded="true"] span { transform: translateY(0) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] span::before { transform: translateY(-6px) rotate(-90deg); }
}

/* ---------- Startbild ---------- */
.held { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 1000px); display: flex; flex-direction: column; color: var(--wald-900); text-align: center; padding-top: var(--kopf-gesamt); background: #f3e2c8; }
.held-innen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(3rem, 8vh, 6rem) var(--rand-r) 2.5rem var(--rand); }
.held-emblem { width: clamp(64px, 7vw, 84px); margin-bottom: 1.4rem; opacity: .95; }
.held-dach { font: italic 400 clamp(1.05rem, 1.8vw, 1.25rem)/1.3 var(--titel); color: var(--honig); margin: 0 0 .9rem; }
.held .held-dach { color: var(--akzent); }
.held h1 { color: var(--wald-900); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -.015em; max-width: 15em; margin: 0 0 1.25rem; text-shadow: 0 0 34px rgba(255, 248, 236, .95), 0 0 10px rgba(255, 248, 236, .7), 0 1px 2px rgba(255, 248, 236, .8); }
.held-text { font-size: var(--fs-lead); color: var(--wald-900); max-width: 34rem; margin: 0 0 2rem; text-shadow: 0 0 18px rgba(255, 248, 236, .95), 0 0 4px rgba(255, 248, 236, .85); }
.held .pille--glas { color: var(--wald-900); background: linear-gradient(155deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .52)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 8px 24px rgba(120, 60, 20, .14); }
.held .pille--glas:hover { background: rgba(255, 255, 255, .94); color: var(--wald-900); }

/* Hintergrund des Startbilds „Weichzeichner“ (von Tim & Rebecca gewählt, Oktober 2026): Dorfrand mit
   Kirche und eurem Haus, Fichten mit Bank, Rotmilan, Bodensee und Alpen in der goldenen Stunde.
   Die Ferne ist weich gezeichnet und hell verschleiert, damit die Schrift frei steht.
   Vier Ebenen bewegen sich beim Scrollen unterschiedlich schnell: Himmel und Alpen bleiben deutlich
   zurück, die Wiese vorn läuft mit der Seite. Unten, im Bereich der Glasleiste, geht die Wiese in
   Dunkelgrün über. Erzeugt mit werkzeug/landschaft_gold.py (Formate weit und hoch). */
.held-bild { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.held-ebene { position: absolute; inset: 0; background: center bottom / cover no-repeat; }
.held-ebene--himmel { translate: 0 calc(var(--p, 0) * 260px); background-image: url("../bilder/hintergrund/held-weit-himmel.svg"); }
.held-ebene--alpen { translate: 0 calc(var(--p, 0) * 170px); background-image: url("../bilder/hintergrund/held-weit-alpen.svg"); }
.held-ebene--land { translate: 0 calc(var(--p, 0) * 80px); background-image: url("../bilder/hintergrund/held-weit-land.svg"); }
.held-ebene--wiese { background-image: url("../bilder/hintergrund/held-weit-wiese.svg"); }
@media (max-aspect-ratio: 4/5) {
  .held-ebene--himmel { background-image: url("../bilder/hintergrund/held-hoch-himmel.svg"); }
  .held-ebene--alpen { background-image: url("../bilder/hintergrund/held-hoch-alpen.svg"); }
  .held-ebene--land { background-image: url("../bilder/hintergrund/held-hoch-land.svg"); }
  .held-ebene--wiese { background-image: url("../bilder/hintergrund/held-hoch-wiese.svg"); }
}
/* Ruhezone: weiches Licht hinter der Schrift; unten Übergang in Dunkelgrün hinter der Glasleiste */
.held-bild::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 46% 40% at 50% 45%, rgba(255, 249, 238, .38), rgba(255, 249, 238, 0) 75%),
    linear-gradient(180deg, rgba(28, 42, 33, 0) 74%, rgba(28, 42, 33, .5) 85%, rgba(28, 42, 33, .9) 100%); }
@media (max-aspect-ratio: 4/5) {
  .held-bild::before { background: radial-gradient(ellipse 72% 40% at 50% 40%, rgba(255, 247, 232, .6), rgba(255, 247, 232, 0) 78%),
    linear-gradient(180deg, rgba(28, 42, 33, 0) 63%, rgba(28, 42, 33, .55) 77%, rgba(28, 42, 33, .92) 90%); }
}
.held-bild::after { content: ""; position: absolute; inset: 0; z-index: 2; background: url("../bilder/hintergrund/korn.png"); opacity: .4; mix-blend-mode: soft-light; }
.held .fakten { color: #fff; }
.fakten {
  list-style: none; margin: 0 0 2.5rem; padding: 1.15rem 0; position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-karte);
}
.fakten::before, .vorteil::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 50%); }
.fakten li { padding: .2rem 1rem; }
.fakten li + li { border-left: 1px solid rgba(255, 255, 255, .16); }
.fakten strong { display: block; font: 600 1.12rem/1.3 var(--titel); }
.fakten span { font-size: .88rem; color: rgba(255, 255, 255, .72); }
@media (max-width: 480px) { .fakten li { padding: .2rem .7rem; } .fakten strong { font-size: 1rem; } .fakten span { font-size: .8125rem; } }
@media (max-width: 760px) {
  .fakten { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .fakten li:nth-child(3) { border-left: 0; }
}

/* ---------- Fotos ---------- */
.bild { position: relative; display: block; margin: 0; border-radius: var(--r-bild); overflow: hidden; background: var(--sand); }
.bild img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
a.bild:hover img { transform: scale(1.03); }
.bild figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem .9rem; color: #fff; font-size: .95rem; font-weight: 700; background: linear-gradient(0deg, rgba(14, 22, 17, .6), rgba(14, 22, 17, 0)); }
img.platzhalter { object-fit: cover; }

/* ---------- Willkommen ---------- */
.willkommen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.willkommen-text h2 { margin-bottom: 0; }
.willkommen-text .lead { margin-bottom: 1.4rem; color: var(--wald-700); font-family: var(--titel); font-style: italic; }
.willkommen-text p:not(.lead):not(.dach):not(.unterschrift) { color: #47443d; max-width: 34rem; }
.unterschrift { font: italic 500 1.45rem/1.2 var(--titel); color: var(--akzent); margin: 1.75rem 0 0; text-align: center; }
.willkommen-text .unterschrift { max-width: 34rem; }
.gastgeber { margin: 2rem 0 0; max-width: 34rem; display: flex; justify-content: center; }
.gastgeber img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--karte), var(--schatten); }
.gastgeber + .unterschrift { margin-top: 1rem; }
.unterschrift--klein { font-size: 1.2rem; margin-top: 1.5rem; }
.willkommen-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.willkommen-bilder .bild img { aspect-ratio: 1; height: 100%; }
.willkommen-bilder .bild--breit { grid-column: 1 / -1; }
.willkommen-bilder .bild--breit img { aspect-ratio: 4 / 3; }

/* ---------- Auf einen Blick: Glaskacheln über dem Wald ---------- */
.abschnitt--wald { padding-bottom: calc(var(--luft) + 1.5rem); color: #fff; background: radial-gradient(ellipse 50% 40% at 12% 0%, rgba(255, 168, 92, .18), rgba(255, 168, 92, 0) 70%), radial-gradient(ellipse 90% 70% at 50% 50%, rgba(14, 22, 17, .4) 0%, rgba(14, 22, 17, .14) 70%, rgba(14, 22, 17, 0) 100%); }
.abschnitt--wald .dach { color: var(--honig); }
.abschnitt--wald h2 { color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, .35); }
.kachel-dach { font: 700 var(--fs-klein)/1.3 var(--schrift); color: var(--akzent); margin: 0; }
.vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vorteil { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 14rem; padding: 1.6rem 1.75rem 1.75rem; border-radius: 28px; color: rgba(255, 255, 255, .78); }
.vorteil p { margin: 0; }
.vorteil h3 { color: #fff; font-size: var(--fs-h3); margin: auto 0 .45rem; padding-top: 1.75rem; }
.vorteil-icon { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; color: var(--orange-hell); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .32); }
.vorteil-icon .icon { width: 1.4rem; height: 1.4rem; }
.vorteil sup a { color: rgba(255, 255, 255, .8); }
.vorteil--lage { grid-column: span 2; }
.vorteil--lage h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 400; color: rgba(255, 255, 255, .88); }
.vorteil-zahl { display: block; font: var(--gewicht-titel) var(--fs-zahl)/1 var(--titel); color: #fff; letter-spacing: -.02em; margin-bottom: .35rem; }
.ziele { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ziele li { display: flex; align-items: baseline; gap: .4rem; padding: .42rem .85rem; border-radius: 980px; font-size: var(--fs-klein); color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.ziele b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.vorteil--inklusive { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem 3rem; align-items: end; }
.vorteil--inklusive h3 { padding-top: 1.5rem; }
.haken.haken--hell { grid-template-columns: 1fr 1fr; gap: .6rem 1.5rem; color: rgba(255, 255, 255, .88); }
.haken.haken--hell li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23f4ad66' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 760px) {
  .vorteile { grid-template-columns: 1fr 1fr; gap: 12px; }
  .vorteil { min-height: 0; padding: 1.2rem 1.15rem 1.3rem; border-radius: 24px; }
  .vorteil h3 { font-size: 1.1875rem; padding-top: 1.1rem; margin-bottom: .3rem; }
  .vorteil p { font-size: var(--fs-klein); line-height: 1.45; }
  .vorteil-icon { width: 2.4rem; height: 2.4rem; }
  .vorteil-icon .icon { width: 1.25rem; height: 1.25rem; }
  .vorteil--lage h3 { font-size: 1.25rem; }
  .vorteil-zahl { font-size: 3rem; }
  .ziele li { padding: .38rem .75rem; }
  .vorteil--inklusive { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .vorteil--inklusive h3 { padding-top: 1.1rem; }
  .haken.haken--hell { font-size: var(--fs-klein); gap: .5rem 1rem; }
}
@media (max-width: 370px) {
  .vorteile { grid-template-columns: minmax(0, 1fr); }
  .vorteil--lage { grid-column: auto; }
  .haken.haken--hell { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Waldband und Abschluss ---------- */
.waldband, .abschluss { text-align: center; color: #fff; padding: clamp(5rem, 12vw, 9rem) var(--rand-r) clamp(5rem, 12vw, 9rem) var(--rand); background: radial-gradient(ellipse 55% 50% at 50% 100%, rgba(255, 168, 92, .22), rgba(255, 168, 92, 0) 70%), radial-gradient(ellipse 65% 60% at 50% 50%, rgba(14, 22, 17, .55) 0%, rgba(14, 22, 17, .2) 60%, rgba(14, 22, 17, 0) 90%); }
.waldband p { font: italic 400 clamp(1.5rem, 3.4vw, 2.4rem)/1.35 var(--titel); margin: 0 auto; max-width: 30rem; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.abschluss-emblem { width: 52px; margin: 0 auto 1.3rem; opacity: .95; }
.abschluss h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 1rem; text-shadow: 0 2px 18px rgba(0, 0, 0, .4); }
.abschluss p { max-width: 32rem; margin: 0 auto 2rem; color: rgba(255, 255, 255, .85); font-size: 1.15rem; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }

/* ---------- Karussell ---------- */
.karussell { position: relative; }
.karussell-spur { --folie: min(var(--breite), calc(100vw - 2 * var(--rand) - 48px)); display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 calc((100% - var(--folie)) / 2); overscroll-behavior-x: contain; }
.karussell-spur::-webkit-scrollbar { display: none; }
.folie { position: relative; flex: 0 0 var(--folie); margin: 0; scroll-snap-align: center; border-radius: var(--r-karte); overflow: hidden; background: var(--sand); aspect-ratio: 16 / 9; }
.folie img { width: 100%; height: 100%; object-fit: cover; }
.folie figcaption { position: absolute; left: 0; right: 0; top: 0; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3.5vw, 2.5rem) 4.5rem; color: rgba(255, 255, 255, .82); font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.4; text-shadow: 0 1px 14px rgba(10, 16, 12, .45); background: linear-gradient(180deg, rgba(14, 22, 17, .66) 0%, rgba(14, 22, 17, .38) 55%, rgba(14, 22, 17, 0) 100%); }
.folie figcaption strong { color: #fff; }
.karussell-steuerung { position: absolute; left: 0; right: 0; bottom: clamp(.9rem, 2.4vw, 1.4rem); z-index: 2; display: flex; justify-content: center; align-items: center; gap: .6rem; pointer-events: none; }
.karussell-steuerung > * { pointer-events: auto; }
.karussell-punkte { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-radius: 980px; }
.karussell-punkte button { position: relative; overflow: hidden; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 980px; background: rgba(28, 42, 33, .3); cursor: pointer; transition: width .35s ease; }
.karussell-punkte button[aria-selected="true"] { width: 32px; background: rgba(28, 42, 33, .2); }
.karussell-punkte button[aria-selected="true"]::after { content: ""; position: absolute; inset: 0; background: var(--orange); border-radius: inherit; transform-origin: left; }
.karussell.laeuft .karussell-punkte button[aria-selected="true"]::after { animation: fortschritt var(--dauer, 5s) linear forwards; }
@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.karussell-pause { width: 2.75rem; height: 2.75rem; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--wald-700); }
.karussell-pause span { width: 11px; height: 12px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.karussell-pause.angehalten span { width: 0; height: 0; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; border-left: 11px solid currentColor; border-right: 0; margin-left: 3px; }
.karussell-pfeil { position: absolute; top: calc(50% - 1.45rem); width: 2.9rem; height: 2.9rem; border-radius: 50%; color: var(--wald-700); font: 400 1.7rem/1 var(--schrift); cursor: pointer; display: grid; place-items: center; padding: 0 0 3px; transition: opacity .2s ease; }
.karussell-pfeil:disabled { opacity: 0; pointer-events: none; }
.karussell-pfeil--zurueck { left: max(16px, calc((100% - var(--breite)) / 2 - 12px)); }
.karussell-pfeil--weiter { right: max(16px, calc((100% - var(--breite)) / 2 - 12px)); }
@media (hover: none) { .karussell-pfeil { display: none; } }
@media (max-width: 640px) { .karussell-spur { gap: 12px; } .folie { aspect-ratio: 4 / 5; } }

/* ---------- Galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.galerie .bild:nth-child(n+9) { display: none; }
.galerie-mehr { text-align: center; margin: 2rem 0 0; }
@media (max-width: 760px) { .galerie { grid-template-columns: 1fr 1fr; gap: 10px; } .galerie .bild:nth-child(n+5) { display: none; } }

/* ---------- Ausstattung ---------- */
.ausstattung { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ausstattung li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; padding: 1.5rem 1rem 1.35rem; border-radius: 22px; background: rgba(252, 249, 243, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(28, 42, 33, .04); color: var(--text-2); font-size: var(--fs-klein); line-height: 1.35; }
.ausstattung .icon { width: 3.25rem; height: 3.25rem; padding: .78rem; margin-bottom: .55rem; border-radius: 50%; color: var(--wald-700); background: var(--wald-100); stroke-width: 1.6; box-shadow: inset 0 0 0 1px rgba(46, 68, 54, .06); }
.ausstattung strong { color: var(--text); font-size: 1rem; line-height: 1.3; text-wrap: balance; }
@media (max-width: 860px) { .ausstattung { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .ausstattung { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ausstattung li { padding: 1.1rem .6rem 1rem; border-radius: 18px; font-size: .84rem; }
  .ausstattung .icon { width: 2.85rem; height: 2.85rem; padding: .68rem; margin-bottom: .4rem; }
  .ausstattung strong { font-size: .95rem; }
}

/* ---------- Räume genauer ansehen ---------- */
.erkunden { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.erkunden-liste { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.erkunden-liste button { display: block; text-align: left; max-width: 100%; border: 0; cursor: pointer; font: inherit; color: var(--text); background: var(--sand); padding: .8rem 1.25rem .8rem 3rem; border-radius: 28px; position: relative; transition: background .25s ease; }
.erkunden-liste button:hover { background: #e6ddcf; }
.erkunden-liste button::before { content: "+"; position: absolute; left: .85rem; top: .72rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font: 400 1.15rem/1 var(--schrift); color: #fff; background: var(--wald-700); }
.erkunden-liste button[aria-selected="true"] { background: var(--karte); box-shadow: var(--schatten); cursor: default; padding-top: 1.05rem; padding-bottom: 1.1rem; }
.erkunden-liste button[aria-selected="true"]::before { content: ""; width: .55rem; height: .55rem; top: 1.45rem; left: 1.35rem; background: var(--akzent); }
.ek-titel { display: block; font-weight: 700; }
.ek-text { display: none; color: var(--text-2); font-size: .97rem; margin-top: .3rem; }
.erkunden-liste button[aria-selected="true"] .ek-text { display: block; }
.erkunden-liste .mehr { margin: .9rem 0 0 1.25rem; }
.erkunden-bilder { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-karte); overflow: hidden; background: var(--sand); }
.ek-bild { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.02); transition: opacity .55s ease, transform .8s ease; }
.ek-bild.aktiv { opacity: 1; transform: none; }
.ek-bild img { width: 100%; height: 100%; object-fit: cover; }
.ek-bild--plan { background: var(--karte); }
.ek-bild--plan img { object-fit: contain; padding: 1.5rem; }
.ek-beschreibung { display: none; }
@media (max-width: 860px) {
  .erkunden { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .erkunden > * { min-width: 0; }
  .erkunden-bilder { order: 1; }
  .erkunden-liste {
    order: 2; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: .5rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: .9rem calc(-1 * var(--rand-r)) 0 calc(-1 * var(--rand)); padding: .3rem var(--rand-r) .45rem var(--rand);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rand), #000 calc(100% - 2.75rem), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--rand), #000 calc(100% - 2.75rem), transparent);
  }
  .erkunden-liste::-webkit-scrollbar { display: none; }
  .erkunden-liste button, .erkunden-liste button[aria-selected="true"] { flex: none; white-space: nowrap; scroll-snap-align: center; padding: .66rem 1.1rem; font-size: .95rem; box-shadow: inset 0 0 0 1px rgba(28, 42, 33, .05); }
  .erkunden-liste button::before { display: none; }
  .erkunden-liste button[aria-selected="true"] { background: var(--wald-700); color: #fff; cursor: default; }
  .erkunden-liste button[aria-selected="true"] .ek-text { display: none; }
  .ek-beschreibung { display: block; order: 3; margin: .55rem 0 0; min-height: 2.9em; color: var(--text-2); font-size: var(--fs-klein); line-height: 1.45; }
}

/* ---------- 360° Rundgang: große Fläche ---------- */
.rundgang-teaser { position: relative; isolation: isolate; display: block; overflow: hidden; margin-top: clamp(3.5rem, 7vw, 5rem); min-height: clamp(24rem, 48vw, 36rem); border-radius: var(--r-karte); color: #fff; background: var(--wald-700); text-decoration: none; }
.rundgang-teaser:hover { text-decoration: none; color: #fff; }
.rundgang-teaser > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.rundgang-teaser:hover > img { transform: scale(1.05); }
.rundgang-teaser::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 75% 70% at 50% 55%, rgba(14, 22, 17, .62), rgba(14, 22, 17, .3) 75%, rgba(14, 22, 17, .2)); }
.rundgang-inhalt { min-height: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; }
.rundgang-icon { position: relative; width: 5rem; height: 5rem; border-radius: 50%; display: grid; place-items: center; color: #fff; margin-bottom: 1.5rem; }
.rundgang-icon { font: 600 1.3rem/1 var(--titel); letter-spacing: -.01em; padding-left: .15em; }
.rundgang-icon::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); animation: puls 2.6s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes puls { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.65); opacity: 0; } }
.rundgang-dach { font: 700 var(--fs-text)/1.3 var(--schrift); color: var(--honig); margin-bottom: .6rem; }
.rundgang-titel { font: var(--gewicht-titel) var(--fs-h2)/1.08 var(--titel); letter-spacing: -.015em; max-width: 14em; text-wrap: balance; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.rundgang-text { font-size: var(--fs-lead); color: rgba(255, 255, 255, .86); max-width: 30rem; margin: 1rem 0 1.9rem; text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: reduce) { .rundgang-icon::after { animation: none; } }

/* ---------- Grundriss in 3D ---------- */
.modell { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: radial-gradient(ellipse 75% 65% at 50% 42%, #fdfaf4 0%, #f3ede2 62%, #e8dfd0 100%); }
.modell-ersatz { width: 100%; height: 100%; object-fit: contain; }
.modell--bereit .modell-ersatz { display: none; }
.modell-flaeche { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; outline: none; -webkit-tap-highlight-color: transparent; }
.modell-flaeche:active { cursor: grabbing; }
.modell-flaeche:focus-visible { box-shadow: inset 0 0 0 3px rgba(46, 68, 54, .35); }
.modell-schilder { position: absolute; inset: 0; pointer-events: none; }
.modell-schilder span { position: absolute; left: 0; top: 0; white-space: nowrap; font: 700 .75rem/1 var(--schrift); color: var(--wald-900); padding: .36rem .62rem; border-radius: 980px; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); box-shadow: 0 2px 10px rgba(28, 42, 33, .14), inset 0 0 0 1px rgba(255, 255, 255, .8); transition: opacity .2s ease; }
.modell-leiste { position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); z-index: 2; display: flex; gap: 2px; padding: 4px; border-radius: 980px; white-space: nowrap; }
.modell-leiste button { border: 0; background: transparent; color: var(--wald-900); font: 700 .8125rem/1 var(--schrift); min-width: 2.35rem; height: 2.35rem; padding: 0 .8rem; border-radius: 980px; cursor: pointer; display: grid; place-items: center; transition: background .2s ease; }
.modell-leiste button:hover { background: rgba(255, 255, 255, .75); }
.modell-leiste button[aria-pressed="true"] { background: rgba(28, 42, 33, .09); }
.modell-leiste [data-aktion="minus"], .modell-leiste [data-aktion="plus"] { font-size: 1.15rem; padding: 0; }
.modell-leiste svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modell-hinweis { position: absolute; top: .75rem; left: 50%; transform: translateX(-50%); margin: 0; max-width: calc(100% - 1.5rem); font-size: .8125rem; line-height: 1.3; text-align: center; color: var(--text-2); background: rgba(255, 255, 255, .75); padding: .38rem .8rem; border-radius: 980px; pointer-events: none; transition: opacity .6s ease; }
.modell-hinweis.weg { opacity: 0; }
.modell-zu { display: none; position: absolute; z-index: 3; top: calc(.85rem + env(safe-area-inset-top, 0px)); right: calc(.85rem + env(safe-area-inset-right, 0px)); width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; font: 400 1.6rem/1 var(--schrift); color: var(--wald-900); cursor: pointer; }
.modell--voll { position: fixed; inset: 0; z-index: 300; width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
.modell--voll .modell-flaeche { touch-action: none; }
.modell--voll .modell-zu { display: grid; place-items: center; }
.modell--voll .modell-leiste { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.modell--voll .modell-leiste [data-aktion="voll"] { display: none; }
.modell--voll .modell-schilder span { font-size: .8125rem; }
.modell-offen, .modell-offen body { overflow: hidden; }
.ek-bild:not(.aktiv) { pointer-events: none; }
.modell-rahmen { aspect-ratio: 16 / 10; border-radius: var(--r-karte); overflow: hidden; box-shadow: var(--schatten); background: var(--karte); }
@media (max-width: 640px) { .modell-rahmen { aspect-ratio: 4 / 5; } }
.ek-bild--plan .modell-ersatz { padding: 1rem; }
@media (max-width: 560px) { .erkunden-bilder { aspect-ratio: 1; } .modell-schilder span { font-size: .6875rem; padding: .3rem .5rem; } .modell-leiste button { padding: 0 .65rem; } }

/* ---------- Kalender & Preise ---------- */
.karte { background: var(--karte); border-radius: var(--r-karte); box-shadow: var(--schatten); padding: clamp(1.4rem, 3vw, 2.1rem); min-width: 0; }
.termine { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.kal-kopf button { background: var(--sand); border: 0; color: var(--wald-700); border-radius: 980px; padding: .45rem 1rem; font: 700 .9rem var(--schrift); cursor: pointer; }
.kal-kopf button:disabled { opacity: .35; cursor: default; }
.kal-monate { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem 2rem; }
.kal-monat h3 { font-size: 1.15rem; margin: 0 0 .6rem; }
.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal-wt { font-size: .75rem; font-weight: 700; color: var(--text-2); text-align: center; padding-bottom: .2rem; }
.kal-tag { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: .92rem; font-variant-numeric: tabular-nums; border-radius: 8px; background: var(--frei); color: var(--wald-700); border: 0; padding: 0; font-family: inherit; }
.kal-tag.belegt { background: var(--belegt); color: #6d675d; text-decoration: line-through; text-decoration-color: rgba(141, 135, 124, .6); }
.kal-tag.anreise { background: linear-gradient(to bottom right, var(--frei) 50%, var(--belegt) 50%); }
.kal-tag.abreise { background: linear-gradient(to bottom right, var(--belegt) 50%, var(--frei) 50%); }
.kal-tag.anreise span, .kal-tag.abreise span { background: rgba(255, 255, 255, .92); border-radius: 50%; width: 1.75em; height: 1.75em; display: grid; place-items: center; }
.kal-tag.vergangen { background: #efe9de; color: #a8a196; }
.kal-tag.heute { box-shadow: inset 0 0 0 2px var(--wald-700); }
button.kal-tag { cursor: pointer; }
button.kal-tag:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--akzent); }
button.kal-tag:disabled { cursor: default; }
.kal-tag.auswahl, .kal-tag.auswahl-rand { box-shadow: inset 0 0 0 3px var(--wald-700); }
.kal-tag.auswahl-rand { font-weight: 700; }
.kal-legende { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 1.1rem 0 0; font-size: .88rem; color: var(--text-2); padding: 0; list-style: none; }
.kal-legende li { display: flex; align-items: center; gap: .45rem; }
.kal-legende i { width: .95rem; height: .95rem; border-radius: 4px; display: inline-block; }
.kal-hinweis { font-size: .86rem; color: var(--text-2); margin: .7rem 0 0; }
/* ruhige Hinweiszeile unter dem Kalender: sagt, was als Nächstes zu tun ist */
.auswahl-leiste { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
.auswahl-leiste p { margin: 0; color: var(--text-2); display: flex; flex-direction: column; gap: .15rem; }
.auswahl-leiste p::before { content: none; }
.auswahl-leiste p.schritt { color: var(--wald-700); font-weight: 700; }
.auswahl-leiste p.ok { color: var(--wald-700); font-weight: 700; }
.auswahl-leiste p.warnung { color: #8a2f1c; font-weight: 700; }
.auswahl-weg { border: 0; background: none; padding: 0; font: 700 .9rem var(--schrift); color: var(--wald-600); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.auswahl-weg:hover { color: var(--wald-900); }
/* kurzer Lichtschimmer, wenn der Zeitraum im Formular ankommt */
@keyframes zeitraum-neu { 0% { box-shadow: 0 0 0 0 rgba(58, 85, 68, .45); } 100% { box-shadow: 0 0 0 14px rgba(58, 85, 68, 0); } }
.zeitraum--neu { animation: zeitraum-neu 1.1s ease-out .45s 2; }

.preis { display: flex; flex-direction: column; }
.preis-betrag { font: var(--gewicht-titel) var(--fs-zahl)/1 var(--titel); color: var(--wald-700); letter-spacing: -.02em; margin: .9rem 0 .5rem; }
.preis-unter { color: var(--text-2); font-size: var(--fs-klein); padding-bottom: 1.25rem; border-bottom: 1px solid var(--linie); }
.preis h3 { font: 700 var(--fs-text)/1.3 var(--schrift); margin: 1.3rem 0 .6rem; }
.preis .klein { margin: .7rem 0 0; }
.preis .pille--breit { margin-top: auto; }
.preis .regeln { margin-bottom: 1.75rem; }
.haken { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.haken li { padding-left: 1.7rem; position: relative; }
.haken li::before { content: ""; position: absolute; left: 0; top: .32em; width: 1.05rem; height: 1.05rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%232e4436' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.regeln { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; font-size: .96rem; color: var(--text-2); }
@media (max-width: 860px) { .termine { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Termine, Preise & Anfrage in einem Ablauf ---------- */
.buchen { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "preis preis" "kal direkt" "form direkt"; gap: 16px; align-items: start; }
.buchen-kal { grid-area: kal; scroll-margin-top: calc(var(--kopf-gesamt) + 16px); }
.buchen-preis { grid-area: preis; }
.buchen-form { grid-area: form; scroll-margin-top: calc(var(--kopf-gesamt) + 16px); }
.buchen-direkt { grid-area: direkt; position: sticky; top: 6rem; }
/* Wochenpauschale als breites Band oben im Abschnitt */
.buchen-preis { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.5rem 2.25rem; align-items: start; }
.buchen-preis .preis-betrag { margin-bottom: .6rem; }
.buchen-preis .preis-unter { border-bottom: 0; padding-bottom: 0; margin: 0; }
.buchen-preis .preis-spalte { border-left: 1px solid var(--linie); padding-left: 2.25rem; }
.buchen-preis h3 { margin-top: .1rem; }
.buchen-preis .regeln { margin-bottom: 0; grid-template-columns: minmax(0, 1fr); gap: .4rem; font-size: 1rem; }
.buchen-schritt { display: flex; align-items: center; gap: .7rem; font: var(--gewicht-titel) clamp(1.25rem, 2.2vw, 1.5rem)/1.2 var(--titel); margin: 0 0 1.2rem; color: var(--text); }
.buchen-nr { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--akzent); color: #fff; font: 700 1rem/1 var(--schrift); }
/* Gewählter Zeitraum im Formular (kommt aus dem Kalender, nicht eintippbar) */
.zeitraum { background: var(--sand); border-radius: var(--r-feld); padding: 1rem 1.1rem; border: 2px solid transparent; transition: border-color .2s ease, background-color .2s ease; }
.zeitraum--gewaehlt { background: #e7efe6; }
.zeitraum--fehler { border-color: #c4553a; background: #f8e7e1; }
.zeitraum-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.zeitraum-titel { margin: 0; font-weight: 700; font-size: .9rem; }
.zeitraum-link { font-weight: 700; font-size: .9rem; color: var(--wald-700); text-decoration: underline; text-underline-offset: .18em; }
.zeitraum-daten { display: grid; grid-template-columns: repeat(3, minmax(0, auto)) 1fr; justify-content: start; gap: .4rem 2rem; margin: .7rem 0 0; }
.zeitraum-daten[hidden] { display: none; }
.zeitraum-daten dt { font-size: .8rem; color: var(--text-2); margin: 0; }
.zeitraum-daten dd { margin: .1rem 0 0; font-weight: 700; color: var(--wald-700); }
.zeitraum-zeit { display: block; font-weight: 400; font-size: .85rem; color: var(--text-2); }
.zeitraum-leer { margin: .5rem 0 0; color: var(--text-2); font-size: .95rem; }
.zeitraum .datum-hinweis { margin: .7rem 0 0; }
.datum-hinweis.ok { color: var(--wald-600); }
.zeitraum-daten > div[hidden] { display: none; }
#zeitraum-preis-zeile { grid-column: 1 / -1; border-top: 1px solid rgba(46, 68, 54, .14); padding-top: .65rem; margin-top: .15rem; }
#zeitraum-preis { font-size: 1.15rem; }
#zeitraum-preis .zeitraum-zeit { display: inline; margin-left: .6rem; }
.auswahl-leiste .preis-schaetzung { display: block; font-weight: 400; color: var(--text-2); font-size: .92rem; }
.formular details.adresse { border-radius: var(--r-feld); background: var(--sand); padding: .2rem 1rem; }
.formular details.adresse summary { cursor: pointer; font-weight: 700; font-size: .95rem; padding: .7rem 0; color: var(--wald-700); }
.formular details.adresse summary .optional { font-weight: 400; color: var(--text-2); }
.adresse-felder { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; padding: .3rem 0 1rem; }
.adresse-felder .voll { grid-column: 1 / -1; }
.adresse-felder input { background: var(--papier); }
.datum-hinweis.fehler { color: #8a2f1c; background: #f5ddd5; padding: .6rem .8rem; border-radius: var(--r-feld); margin: 0; }
@media (max-width: 960px) {
  .buchen-preis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .buchen-preis .preis-kopf { grid-column: 1 / -1; }
  .buchen-preis .preis-kopf + .preis-spalte { border-left: 0; padding-left: 0; }
}
@media (max-width: 860px) {
  .buchen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "preis" "kal" "form" "direkt"; }
  .buchen-direkt { position: static; }
}
@media (max-width: 600px) {
  .buchen-preis { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .buchen-preis .preis-unter { padding-bottom: 1.25rem; border-bottom: 1px solid var(--linie); }
  .buchen-preis .preis-spalte { border-left: 0; padding-left: 0; }
  .buchen-preis h3 { margin-top: 1.3rem; }
  .buchen-preis .regeln { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem 1rem; font-size: .96rem; }
  .zeitraum-daten { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .zeitraum-daten > div { display: flex; justify-content: space-between; gap: 1rem; }
  .zeitraum-daten dd { margin: 0; text-align: right; }
  #zeitraum-preis .zeitraum-zeit { display: block; margin-left: 0; }
}
@media (max-width: 520px) { .adresse-felder { grid-template-columns: minmax(0, 1fr); } }

/* Bild ganz zeigen (ohne Beschnitt), dahinter dieselbe Aufnahme weich gezeichnet */
.bild-ganz { background: #1e2620; }
.bild-ganz img { position: relative; z-index: 1; object-fit: contain !important; }
.bild-ganz img.bild-ganz-hinten { position: absolute; inset: 0; z-index: 0; object-fit: cover !important; filter: blur(22px) saturate(1.05) brightness(.72); transform: scale(1.18); }
.folie.bild-ganz figcaption { z-index: 2; }

/* ---------- Aktivitäten ---------- */
.geschichte { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); margin-bottom: var(--luft); }
.geschichte-rahmen { position: sticky; top: calc(50vh - min(17vw, 230px)); aspect-ratio: 3 / 2; border-radius: var(--r-karte); overflow: hidden; background: var(--sand); }
.geschichte-rahmen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); opacity: 0; transition: opacity .7s ease; }
.geschichte-rahmen img.aktiv { opacity: 1; }
.schritt { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s ease; }
.schritt.aktiv { opacity: 1; }
.schritt:first-child { min-height: 46vh; }
.schritt:last-child { min-height: 52vh; }
.schritt-zeit { font: 700 1rem/1.3 var(--schrift); color: var(--akzent); margin: 0 0 .5rem; }
.schritt h3 { font-size: clamp(1.875rem, 3vw, 2.5rem); margin: 0 0 .7rem; }
.schritt p:last-child { color: var(--text-2); font-size: var(--fs-lead); margin: 0; max-width: 28rem; }
.schritt p strong { color: var(--text); }
.schritt-bild { display: none; }
@media (max-width: 860px) {
  .geschichte { grid-template-columns: minmax(0, 1fr); }
  .geschichte-buehne { display: none; }
  .geschichte-schritte { display: grid; gap: 2.75rem; }
  .schritt, .schritt:first-child, .schritt:last-child { min-height: 0; opacity: 1; }
  .schritt-bild { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-bild); margin-bottom: 1.2rem; }
}
.lage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.karte-bild { margin: 0; }
.karte-bild a { display: block; border-radius: var(--r-karte); overflow: hidden; background: var(--sand); }
.karte-bild figcaption { font-size: .88rem; color: var(--text-2); text-align: center; margin-top: .8rem; }
.lage-text h3 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.nahbei { list-style: none; padding: 0; margin: 0 0 1.75rem; border-top: 1px solid var(--linie); }
.nahbei li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--linie); }
.nahbei b { color: var(--text-2); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lage-text .klein { margin: 1.25rem 0 0; }
@media (max-width: 860px) { .lage { grid-template-columns: minmax(0, 1fr); } }

.bildband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .bildband { grid-template-columns: 1fr 1fr; } }
.lage-fakten { color: var(--text-2); margin: -.25rem 0 1.4rem; max-width: 34rem; }

/* ---------- Bewertungen: ruhiges Band über dem Wald ---------- */
.bewertungen { position: relative; text-align: center; color: #fff; padding-block: clamp(4.5rem, 9vw, 7rem); scroll-margin-top: calc(var(--kopf-gesamt) + 8px); background: radial-gradient(ellipse 50% 45% at 85% 100%, rgba(255, 168, 92, .16), rgba(255, 168, 92, 0) 70%), radial-gradient(ellipse 70% 65% at 50% 50%, rgba(14, 22, 17, .55) 0%, rgba(14, 22, 17, .22) 65%, rgba(14, 22, 17, 0) 100%); }
.bewertungen .dach { color: var(--honig); }
.bewertungen-titel { color: #fff; font-size: clamp(2rem, 3.8vw, 2.9rem); letter-spacing: -.015em; margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.bewertung-buehne { display: grid; max-width: 46rem; margin: 0 auto; }
.bewertung { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.05rem; padding: clamp(1.7rem, 4vw, 2.6rem) clamp(1.3rem, 4.5vw, 3.2rem); border-radius: 28px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.985); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .9s; }
.bewertung.aktiv { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bewertung-sterne { display: flex; gap: .22rem; color: var(--orange-hell); }
.bewertung-sterne svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.bewertung-text { margin: 0; font: italic 400 clamp(1.125rem, 2vw, 1.375rem)/1.55 var(--titel); color: #fff; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden; }
.bewertung--leer .bewertung-text { font: 400 var(--fs-text)/1.55 var(--schrift); color: rgba(255, 255, 255, .82); }
.bewertung-autor { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .55rem; font-size: var(--fs-klein); color: rgba(255, 255, 255, .78); }
.bewertung-initiale { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem/1 var(--schrift); color: var(--wald-900); background: var(--honig); }
.bewertung-autor a, .bewertung-autor strong { color: #fff; font-weight: 700; }
.bewertung-bild { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; background: rgba(255, 255, 255, .15); }
.bewertung-quelle { margin-top: -.2rem; line-height: 1; }
.bewertung-quelle a { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .2rem .4rem; border-radius: 6px; text-decoration: none; }
.bewertung-quelle a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.google-maps-text { font: 400 .875rem/1 Roboto, Arial, sans-serif; color: #fff; white-space: nowrap; }
.google-maps-logo { height: 18px; width: auto; }
.bewertung-kern { color: var(--honig); }
.bewertung-steuer { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.1rem; }
.bewertung-pfeil { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .26); transition: background .2s ease, border-color .2s ease; }
.bewertung-pfeil:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.bewertungen :focus-visible { outline-color: rgba(245, 195, 142, .85); }
.bewertung-pfeil:focus-visible { border-radius: 50%; }
.bewertung-pfeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bewertung-punkte { display: flex; justify-content: center; gap: .15rem; }
.bewertung-punkte:empty { display: none; }
.bewertung-punkte button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; transition: width .35s ease; }
.bewertung-punkte button::after { content: ""; width: 8px; height: 8px; border-radius: 980px; background: rgba(255, 255, 255, .38); transition: width .35s ease, background .3s ease; }
.bewertung-punkte button[aria-selected="true"] { width: 40px; }
.bewertung-punkte button[aria-selected="true"]::after { width: 28px; background: var(--orange-hell); }
.bewertung-hinweis { max-width: 38rem; margin: 1.1rem auto 0; font-size: var(--fs-mini); line-height: 1.5; color: rgba(255, 255, 255, .7); text-wrap: balance; }
.bewertung-hinweis a { color: var(--honig); font-weight: 700; white-space: nowrap; }
.bewertung-hinweis sup a { color: rgba(255, 255, 255, .75); font-weight: 400; padding-inline: .15em; }
.bewertung-leer { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin: -.5rem auto 0; max-width: 34rem; color: rgba(255, 255, 255, .85); text-wrap: balance; }
.bewertung-leer[hidden], .bewertung-buehne[hidden], .bewertung-steuer[hidden], .bewertung-hinweis[hidden] { display: none; }
@media (max-width: 480px) {
  .bewertung-text { font-size: 1.0625rem; }
  .bewertung-steuer { gap: .35rem; }
  .bewertung-pfeil { width: 40px; height: 40px; }
  .bewertung-punkte { gap: 0; }
  .bewertung-punkte button { width: 17px; }
  .bewertung-punkte button::after { width: 7px; height: 7px; }
  .bewertung-punkte button[aria-selected="true"] { width: 30px; }
  .bewertung-punkte button[aria-selected="true"]::after { width: 22px; }
}
@media (prefers-reduced-motion: reduce) { .bewertung { transition: none; transform: none; } }

/* ---------- Fragen ---------- */
.fragen-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.fragen-raster .kopfzeile { margin-bottom: 0; position: sticky; top: 90px; }
.fragen-raster .kopfzeile h2, .zwei-spalten .kopfzeile h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
.fragen-raster .kopfzeile .mehr { margin-top: 1.25rem; }
.fragen { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; padding: 1.3rem 3rem 1.3rem 0; position: relative; font: 700 var(--fs-text)/1.4 var(--schrift); color: var(--text); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::before, .fragen summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 14px; height: 1.6px; background: var(--wald-700); transition: transform .25s ease; }
.fragen summary::after { transform: rotate(90deg); }
.fragen details[open] summary::after { transform: rotate(0deg); }
.fragen details > div { padding: 0 3rem 1.35rem 0; color: var(--text-2); }
.fragen details > div p { margin: 0; }
@media (max-width: 860px) { .fragen-raster { grid-template-columns: minmax(0, 1fr); } .fragen-raster .kopfzeile { position: static; } }

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hinweis { display: flex; gap: .6rem; align-items: center; background: var(--sand); color: #5b4326; font-size: .95rem; padding: .8rem 1rem; border-radius: var(--r-feld); margin-bottom: 1.4rem; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
.formular > * { min-width: 0; }
.formular .voll { grid-column: 1 / -1; }
.formular label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .35rem; }
.formular label .optional { font-weight: 400; color: var(--text-2); }
.formular input, .formular textarea, .formular select { width: 100%; font: inherit; color: var(--text); padding: .75rem .9rem; border: 1px solid var(--linie); border-radius: var(--r-feld); background: var(--papier); min-height: 3rem; transition: border-color .2s ease, box-shadow .2s ease; }
.formular input:focus, .formular textarea:focus, .formular select:focus { border-color: var(--wald-600); box-shadow: 0 0 0 3px rgba(46, 68, 54, .15); outline: 0; background: var(--karte); }
.formular textarea { min-height: 8rem; resize: vertical; }
.formular .falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular .klein { margin: 0; }
.datum-hinweis { grid-column: 1 / -1; margin: -.25rem 0 0; font-size: .92rem; font-weight: 700; color: var(--wald-600); }
.datum-hinweis.warnung { color: #8a2f1c; }
.meldung { padding: 1rem 1.2rem; border-radius: var(--r-feld); margin-bottom: 1.25rem; }
.meldung--ok { background: var(--frei); color: var(--wald-700); }
.meldung--fehler { background: #f5ddd5; color: #6d2a1e; }
.meldung strong { display: block; }
.danke { padding: 1.25rem 1.3rem; }
.danke strong { font: var(--gewicht-titel) 1.3rem/1.25 var(--titel); margin-bottom: .7rem; }
.danke p { margin: .7rem 0 0; }
.danke .klein { color: inherit; opacity: .8; }
.danke .pille { margin-top: 1rem; }
.danke-daten { display: grid; gap: .35rem; margin: 0; padding: .8rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, .55); }
.danke-daten div { display: flex; flex-wrap: wrap; gap: 0 .8rem; }
.danke-daten dt { min-width: 9.5rem; color: var(--text-2); }
.danke-daten dd { margin: 0; font-weight: 700; }
.formular[hidden] { display: none; }
.direkt h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.direkt > p { color: var(--text-2); }
.direkt ul { list-style: none; padding: 0; margin: 1.1rem 0 0; border-top: 1px solid var(--linie); }
.direkt li { border-bottom: 1px solid var(--linie); }
.direkt a { display: flex; align-items: center; gap: .75rem; color: var(--text); font-weight: 700; padding: .9rem 0; word-break: break-word; }
.direkt a:hover { color: var(--wald-600); text-decoration: none; }
.direkt .icon { color: var(--wald-700); }
.qr { display: flex; gap: 1rem; align-items: center; margin-top: 1.25rem; font-size: .88rem; color: var(--text-2); }
.qr img { width: 92px; height: auto; border-radius: 8px; }
@media (hover: none) { .qr { display: none; } }
@media (max-width: 860px) { .kontakt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .formular { grid-template-columns: minmax(0, 1fr); } }

/* ---------- E-Mail-Adresse als Bild (Schutz vor Spam-Robotern) ---------- */
.mail { display: inline; }
.mail-bild { display: inline-block; flex: none; max-width: 100%; height: 1.2em; width: calc(1.2em * 12.5617); vertical-align: -.213em; background: url("../bilder/email.svg") left center / contain no-repeat; }
.mail-bild--fett { width: calc(1.2em * 12.7792); background-image: url("../bilder/email-fett.svg"); }
.direkt .mail-bild { flex: 0 1 auto; }
@supports (-webkit-mask-size: contain) or (mask-size: contain) {
  .mail-bild { background: currentColor; -webkit-mask: url("../bilder/email.svg") left center / contain no-repeat; mask: url("../bilder/email.svg") left center / contain no-repeat; }
  .mail-bild--fett { -webkit-mask-image: url("../bilder/email-fett.svg"); mask-image: url("../bilder/email-fett.svg"); }
}

/* ---------- Fußzeile: helles Verzeichnis ---------- */
.fuss { background: var(--sand); color: var(--text-2); font-size: var(--fs-mini); line-height: 1.5; padding-block: 2.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.fuss a { color: #4a4740; }
.fuss a:hover { color: var(--text); text-decoration: underline; }
.fussnoten { padding-bottom: 1.25rem; border-bottom: 1px solid var(--linie); }
.fussnoten ol { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.fussnoten li { padding-left: .2rem; max-width: 72rem; }
.verzeichnis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; padding: 1.75rem 0 1.5rem; border-bottom: 1px solid var(--linie); }
.verzeichnis h3 { font: 700 var(--fs-mini)/1.3 var(--schrift); color: var(--text); margin: 0 0 .7rem; }
.verzeichnis ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.fuss-mehr { margin: 1rem 0; }
.fuss-mehr a { color: var(--akzent); }
.fuss-unten { border-top: 1px solid var(--linie); padding-top: 1rem; }
.brotkrumen { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.brotkrumen img { width: 16px; height: auto; }
.brotkrumen span { color: var(--text-2); }
.fuss-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.fuss-zeile p { margin: 0; }
.fuss-recht { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.fuss-recht li + li::before { content: "|"; color: var(--linie); margin: 0 .6rem; }
@media (max-width: 760px) { .verzeichnis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 330px) { .verzeichnis { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Leiste unten auf dem Handy: schwebende Glaskapsel ---------- */
.mobil-leiste { display: none; }
@media (max-width: 760px) {
  .mobil-leiste {
    display: flex; gap: 6px; position: fixed; z-index: 40; padding: 6px; border-radius: 980px;
    left: var(--rand); right: var(--rand-r); bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(calc(100% + 30px)); transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  }
  .mobil-leiste.sichtbar { transform: none; }
  .mobil-leiste .pille { flex: 1; padding: .8rem 1rem; }
}

/* ---------- Großansicht ---------- */
.grossansicht { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.grossansicht::backdrop { background: rgba(14, 18, 15, .94); }
.grossansicht-innen { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 3.5rem; }
.grossansicht img { max-width: 100%; max-height: calc(100vh - 7rem); object-fit: contain; border-radius: var(--r-bild); }
.grossansicht button { position: absolute; background: linear-gradient(155deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07)); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .35); color: #fff; border: 0; cursor: pointer; width: 2.9rem; height: 2.9rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; }
.grossansicht button:hover { background: rgba(255, 255, 255, .26); }
.ga-zu { top: calc(1rem + env(safe-area-inset-top, 0px)); right: calc(1rem + env(safe-area-inset-right, 0px)); }
.ga-zurueck { left: calc(1rem + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.ga-weiter { right: calc(1rem + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
.ga-zaehler { position: absolute; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: .9rem; margin: 0; }

/* ---------- Bewegung beim Scrollen (nur mit JavaScript und wenn erwünscht) ---------- */
.js-bewegung [data-reveal] { opacity: 0; translate: 0 64px; scale: .965; transition: opacity 1s cubic-bezier(.2, .7, .2, 1), translate 1.2s cubic-bezier(.16, 1, .3, 1), scale 1.2s cubic-bezier(.16, 1, .3, 1); }
.js-bewegung [data-reveal].gezeigt { opacity: 1; translate: 0 0; scale: 1; }
.js-bewegung .vorteile [data-reveal] { translate: 0 90px; scale: .92; }
.js-bewegung .vorteile [data-reveal]:nth-child(2) { transition-delay: .08s; }
.js-bewegung .vorteile [data-reveal]:nth-child(3) { transition-delay: .16s; }
.js-bewegung .vorteile [data-reveal]:nth-child(4) { transition-delay: .24s; }
.js-bewegung .vorteile [data-reveal]:nth-child(5) { transition-delay: .32s; }
.js-bewegung .vorteile [data-reveal]:nth-child(6) { transition-delay: .4s; }
.js-bewegung .vorteile [data-reveal].gezeigt { translate: 0 0; scale: 1; }
.js-bewegung .ausstattung li { opacity: 0; translate: 0 24px; transition: opacity .7s ease, translate .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--n, 0) * 50ms); }
.js-bewegung .ausstattung.gezeigt li { opacity: 1; translate: 0 0; }

/* Überschriften erscheinen Wort für Wort */
.js-bewegung [data-reveal].woerter, .js-bewegung .kopfzeile[data-reveal] { opacity: 1; translate: 0 0; scale: 1; }
.js-bewegung .woerter .wort { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(6px); transition: opacity .8s ease, transform 1s cubic-bezier(.16, 1, .3, 1), filter .8s ease; transition-delay: calc(var(--i) * 60ms + 60ms); }
.js-bewegung .gezeigt .woerter .wort, .js-bewegung .woerter.gezeigt .wort { opacity: 1; transform: none; filter: blur(0); }
.js-bewegung .kopfzeile[data-reveal] > :not(h2) { opacity: 0; translate: 0 24px; transition: opacity .9s ease .35s, translate 1s cubic-bezier(.16, 1, .3, 1) .35s; }
.js-bewegung .kopfzeile[data-reveal] > .dach { transition-delay: 0s; }
.js-bewegung .kopfzeile.gezeigt > :not(h2) { opacity: 1; translate: 0 0; }

/* Text leuchtet beim Scrollen Wort für Wort auf */
.leuchten .wort { opacity: .2; transition: opacity .35s ease; }
.leuchten .wort.an { opacity: 1; }

/* Bilder wachsen beim Hineinscrollen, Fotos gleiten unterschiedlich schnell */
.js-bewegung [data-wachsen] { transform: scale(calc(.88 + .12 * var(--w, 1))); transform-origin: 50% 30%; will-change: transform; }
.js-bewegung [data-tiefe] { transform: translateY(var(--t, 0px)); will-change: transform; }
.js-bewegung .geschichte-rahmen img.aktiv { transform: scale(calc(1.12 - .06 * var(--g, 0))); }

/* Startbild: kommt beim Laden nacheinander herein und gleitet beim Scrollen weg */
/* Schrift bleibt beim Anscrollen voll lesbar und blendet erst spät aus */
.held-innen { translate: 0 calc(var(--p, 0) * -140px); scale: calc(1 - var(--p, 0) * .05); opacity: clamp(0, 1.5 - var(--p, 0) * 1.7, 1); }
.js-bewegung .held-emblem { animation: auftauchen 1.1s cubic-bezier(.16, 1, .3, 1) .05s both; }
.js-bewegung .held-dach { animation: auftauchen 1.1s cubic-bezier(.16, 1, .3, 1) .2s both; }
.js-bewegung .held-text { animation: auftauchen 1.1s cubic-bezier(.16, 1, .3, 1) .75s both; }
.js-bewegung .held .aktionen { animation: auftauchen 1.1s cubic-bezier(.16, 1, .3, 1) .9s both; }
.js-bewegung .held .fakten { animation: auftauchen 1.2s cubic-bezier(.16, 1, .3, 1) 1.05s both; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(36px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .js-bewegung [data-reveal], .js-bewegung .ausstattung li, .js-bewegung .woerter .wort { opacity: 1; translate: none; scale: none; transform: none; filter: none; transition: none; }
  .held-innen, .held .fakten, .held-ebene { translate: none; scale: none; opacity: 1; }
  .leuchten .wort { opacity: 1; }
}

/* ---------- Unterseiten ---------- */
.seitenkopf { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; padding: calc(var(--kopf-gesamt) + 4rem) var(--rand-r) 4rem var(--rand); background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(14, 22, 17, .58) 0%, rgba(14, 22, 17, .2) 65%, rgba(14, 22, 17, 0) 95%); }
.seitenkopf h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.2rem); letter-spacing: -.015em; margin: 0 0 1rem; text-shadow: 0 2px 20px rgba(0, 0, 0, .4); }
.seitenkopf p { max-width: 36rem; margin: 0; font-size: 1.15rem; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.seitenkopf .held-dach { margin-bottom: .9rem; color: #ffe6c4; text-shadow: 0 1px 12px rgba(14, 22, 17, .6); }
/* Dachzeilen auf dem hellen Nachmittagshimmel gut lesbar halten */
.abschnitt--wald .dach, .bewertungen .dach, .abschluss .dach { text-shadow: 0 1px 12px rgba(14, 22, 17, .55); }
.seite-oben { height: var(--kopf-gesamt); background: var(--papier); }
.rechtstext { max-width: 72ch; margin: 0 auto; overflow-wrap: anywhere; }
.rechtstext h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); margin: 0 0 1.5rem; }
.rechtstext h2 { font-size: 1.45rem; margin: 2.2rem 0 .6rem; scroll-margin-top: calc(var(--kopf-gesamt) + 16px); }
.rechtstext h3 { font-size: 1.12rem; margin: 1.5rem 0 .4rem; }
.rechtstext p, .rechtstext li { color: #45433d; }
.favoriten { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.favoriten li { background: var(--karte); border-radius: var(--r-karte); box-shadow: var(--schatten); overflow: hidden; display: flex; flex-direction: column; }
.favoriten img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--sand); }
.favoriten li > div { padding: 1.4rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.favoriten h3 { margin: 0 0 .8rem; font-size: 1.2rem; }
.favoriten .zeit { font: 700 .9rem/1.3 var(--schrift); color: var(--akzent); display: block; margin-bottom: .4rem; }
.favoriten a { margin-top: auto; font-weight: 700; }
.favoriten a::after { content: " ›"; }
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.filter button { background: var(--karte); border: 0; box-shadow: inset 0 0 0 1px var(--linie); color: var(--text); padding: .5rem 1.05rem; border-radius: 980px; font: 700 .9rem var(--schrift); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--wald-700); color: #fff; box-shadow: none; }
.ziel-liste { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--linie); }
.ziel-liste li { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: .5rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.ziel-liste .fahrzeit { font-weight: 700; color: var(--akzent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ziel-liste .titel { font-weight: 700; color: var(--text); }
.ziel-liste .zusatz { color: var(--text-2); display: block; font-size: .95rem; }
.ziel-liste a { white-space: nowrap; font-size: .95rem; font-weight: 700; }
.kombis { padding-left: 1.2rem; margin: 0; color: var(--text-2); }
.kombis li { margin-bottom: .5rem; }
.zwei-spalten { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
.zwei-spalten aside { display: grid; gap: 16px; position: sticky; top: 80px; }
.kasten h3 { margin-bottom: .8rem; }
.tour-buehne { position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 340px; background: var(--wald-700); overflow: hidden; border-radius: var(--r-karte); }
.tour-buehne iframe, .tour-buehne #panorama { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-start { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.5rem; color: rgba(255, 255, 255, .85); background: var(--wald-700); }
.tour-start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour-start::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(22, 34, 26, .55); }
.tour-start > div { position: relative; z-index: 2; max-width: 30rem; }
.tour-start h2 { color: #fff; font-size: 1.8rem; margin-bottom: .6rem; }
.tour-start a:not(.pille) { color: #fff; text-decoration: underline; }
.tour-extern { margin: .9rem 0 0; text-align: center; font-size: var(--fs-klein); }
.tour-raeume { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.tour-raeume button { background: var(--karte); border: 0; box-shadow: inset 0 0 0 1px var(--linie); color: var(--text); padding: .5rem 1rem; border-radius: 980px; font: 700 .9rem var(--schrift); cursor: pointer; }
.tour-raeume button[aria-pressed="true"] { background: var(--wald-700); color: #fff; box-shadow: none; }
@media (max-width: 960px) { .favoriten { grid-template-columns: 1fr 1fr; } .zwei-spalten { grid-template-columns: minmax(0, 1fr); } .zwei-spalten aside { position: static; } }
@media (max-width: 600px) { .favoriten { grid-template-columns: minmax(0, 1fr); } .ziel-liste li { grid-template-columns: minmax(0, 1fr) auto; } .ziel-liste .fahrzeit { grid-column: 1 / -1; } .tour-buehne { aspect-ratio: 3 / 4; } }

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 860px) {
  .willkommen { grid-template-columns: minmax(0, 1fr); }
  .willkommen-bilder { order: -1; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .karte { padding: 1.4rem; }
}