/* ============================================================
   Hotelempfehlungen — eigenes Stylesheet, Präfix ho-

   Die Seite läuft vom Abend in den Morgen: dunkler Hero, dunkler
   Nullpunkt, dunkle Abfahrtsachse — dann hell für die Häuser, ein
   randloses Sonnenaufgangsbild als Pause und ein heller Abschluss.
   Die Grundfläche wechselt also genau einmal, an der Stelle, an der
   aus der Erzählung eine Liste wird.

   Die Skalenspitze der Seite ist die Zahl: die „1" des Ferienhauses,
   die Minuten auf der Achse, die Fahrzeit je Haus. Alle Ziffern
   tabular, damit beim Umschalten der Startzeit nichts springt.
   ============================================================ */

/* ---------- Typo-Bausteine, die seite.css nicht mitbringt ----------
   Die .t-*-Klassen des Design-Systems liegen in site/tokens.css, das
   keine Seite einbindet (siehe kontakt.css, mannschaften.css). Diese
   Seite setzt die Stufen, die sie braucht, selbst. */
.t-zahl{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.t-display{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,4.6vw,68px);letter-spacing:-.045em;line-height:1.06;color:var(--tinte);
  text-wrap:balance}
.t-text{font-size:17px;font-weight:300;line-height:1.6;color:var(--text);max-width:64ch}
.t-klein{font-size:14.5px;font-weight:300;line-height:1.55;color:var(--sekundaer)}
.t-mikro{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* `hidden` muss gewinnen — .btn bringt einen eigenen display-Wert mit
   (siehe PROMPT_Register, „hidden verliert gegen jede Klassenregel"). */
[hidden]{display:none !important}

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

/* ================= 00 · HERO — der Abend ================= */
/* Der Hero nutzt .hero.seitenhero aus seite.css (Bühne, Parallax, Typo);
   hier steht nur, was diese Seite anders macht: ein wärmerer Schleier,
   weil das Herbstbild schon warm ist und die weiße Schrift sonst im
   Laub steht. */
/* Der Schleier bleibt der aus seite.css (Stufe „stark" im Backend) — hier
   kommt nur eine zweite, gleichmäßige Lage dazu. Das Herbstbild ist ein
   Nachmittagsbild mit blauem Himmel; ohne diese Lage steht die weiße
   Schlagzeile oben im hellen Grün. Kein neuer Farbwert: dieselbe Tanne,
   nur mit Deckung. */
.ho-hero .hero-buehne::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,17,.62) 0%,rgba(7,48,31,.34) 46%,rgba(6,26,17,.5) 100%)}

/* .sh-zahl steht nicht in seite.css, sondern nur in tokens.css — wie bei
   kontakt.css und mannschaften.css kommt die Kennzahl deshalb hierher. */
.sh-zahl{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;
  padding-bottom:.3em}
.sh-zahl .t-zahl{font-size:clamp(52px,6.4vw,96px);line-height:.9;color:var(--lime)}
.sh-zahl em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);max-width:20ch;
  line-height:1.4}

/* ================= 00b · DER NULLPUNKT ================= */
/* Randlos und zweigeteilt: links das Bild bis an den Fensterrand,
   rechts die Aussage auf --pine. Kein Kapitelkopf — die Zahl trägt. */
.ho-null{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--pine);color:#fff}
.ho-null-bild{position:relative;overflow:hidden;min-height:clamp(320px,46svh,560px)}
.ho-null-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  /* Aufdecken statt Einblenden: Die Maske fährt auf, das Bild fährt aus
     1,04 auf 1,0 zurück (Bewegungsregie). */
  clip-path:inset(0 0 100% 0);transform:scale(1.04);
  transition:clip-path .7s var(--ease),transform .7s var(--ease)}
.ho-null-bild.sichtbar img{clip-path:inset(0);transform:none}
.ho-null-text{padding:clamp(40px,5vw,72px) var(--inset);
  display:flex;flex-direction:column;justify-content:center;gap:18px}
.ho-null-zahl{display:flex;align-items:baseline;gap:14px}
.ho-null-zahl .t-zahl{font-size:clamp(84px,11vw,168px);line-height:.82;color:var(--lime)}
.ho-null-zahl em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:12px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.66);
  max-width:12ch;line-height:1.35}
.ho-null-text h2{color:#fff;font-size:clamp(28px,3.4vw,48px);line-height:1.06}
.ho-null-text .t-text{color:rgba(255,255,255,.82)}
.ho-null-liste{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--hairline-dunkel)}
.ho-null-liste li{padding:12px 0 12px 26px;border-bottom:1px solid var(--hairline-dunkel);
  font-size:15px;font-weight:300;color:rgba(255,255,255,.86);position:relative}
.ho-null-liste li::before{content:"";position:absolute;left:2px;top:1.05em;width:10px;height:1px;
  background:var(--lime)}
/* Das Greenfee-Paket: eine abgesetzte Fläche, kein zweiter Hero. Der Preis
   steht rechts in derselben Zahlenschrift wie die große Eins, nur klein —
   die Karte soll die Aussage stützen, nicht mit ihr konkurrieren. */
.ho-paket{margin-top:6px;padding:16px 18px 18px;border:1px solid var(--hairline-dunkel);
  border-left:3px solid var(--lime);background:rgba(255,255,255,.045)}
.ho-paket-marke{color:rgba(204,255,0,.85)}
.ho-paket-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 18px;margin-top:8px}
.ho-paket-titel{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.01em;color:#fff}
.ho-paket-preis{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.ho-paket-preis b{font-size:26px;color:var(--lime);font-weight:700}
.ho-paket-preis em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:10.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ho-paket-text{margin-top:10px;font-size:14.5px;font-weight:300;line-height:1.55;
  color:rgba(255,255,255,.72)}

.ho-null-cta{margin-top:6px}
.ho-null-hinweis{color:rgba(255,255,255,.5)}

/* ================= 01 · WANN MUSST DU LOS? ================= */
.ho-los{background:var(--tanne);padding-top:var(--luft);padding-bottom:var(--luft)}
.ho-los .kapitel-marke{border-top-color:var(--hairline-dunkel)}
.ho-los .kapitel-marke .nr{color:var(--lime)}
.ho-los .kapitel-marke .was{color:rgba(255,255,255,.55)}
.ho-los .kapitel-kopf h2{color:#fff;line-height:1.06}
.ho-los .kapitel-kopf .lead{color:rgba(255,255,255,.72)}

/* Die Steuerzeile: eigene Zeit-Chips statt eines nativen Auswahlfelds.
   Ohne JavaScript ist jeder Chip ein Link (?start=…), mit JavaScript
   rechnet die Seite ohne Neuladen. */
.ho-steuer{border-top:1px solid var(--hairline-dunkel);padding-top:22px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.ho-steuer-frage{color:rgba(255,255,255,.6)}
.ho-zeiten{display:flex;gap:8px;flex-wrap:wrap}
.ho-zeit{display:inline-flex;align-items:center;font-family:'Space Grotesk',sans-serif;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:rgba(255,255,255,.78);border:1px solid var(--hairline-dunkel);border-radius:999px;
  padding:8px 16px;transition:color .2s ease-out,border-color .2s ease-out,background .2s ease-out}
.ho-zeit:hover{color:#fff;border-color:rgba(255,255,255,.42)}
.ho-zeit-aktiv,.ho-zeit-aktiv:hover{background:var(--lime);border-color:var(--lime);color:var(--pine)}
.ho-steuer-hinweis{color:rgba(255,255,255,.55);display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
.ho-steuer-hinweis b{color:var(--lime);font-variant-numeric:tabular-nums}
.ho-steuer-trenner{color:rgba(255,255,255,.3)}

/* Die Achse: eine Beschriftungszeile über den Balken. */
.ho-achse{display:flex;justify-content:space-between;margin-top:34px;padding-bottom:8px;
  border-bottom:1px solid var(--hairline-dunkel)}
.ho-achse-marke{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.42)}

/* Acht Balken, alle rechts bündig. Die Länge IST die Fahrzeit — deshalb
   sitzt der Anfang bei --ho-links und das Ende immer am rechten Rand. */
.ho-balken{display:flex;flex-direction:column}
.ho-balken-zeile{display:grid;grid-template-columns:62px minmax(140px,200px) minmax(0,1fr) 120px;
  align-items:center;gap:18px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ho-balken-ab{font-size:15px;color:#fff;text-align:right}
.ho-balken-name{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.01em;color:rgba(255,255,255,.9);line-height:1.25}
.ho-balken-spur{position:relative;height:22px;display:flex;align-items:center}
/* Der Balken beginnt bei --ho-links und endet immer rechts: Rechts ist die
   Ankunft auf der Anlage, für alle dieselbe. Die Länge IST die Fahrzeit. */
.ho-balken-strich{position:absolute;left:var(--ho-links,0);right:0;height:3px;
  background:linear-gradient(90deg,rgba(204,255,0,.3),var(--lime));
  transition:left .35s var(--ease)}
.ho-balken-strich::before{content:"";position:absolute;left:0;top:-4px;width:1px;height:11px;
  background:rgba(204,255,0,.55)}
.ho-balken-strich::after{content:"";position:absolute;right:0;top:-4px;width:1px;height:11px;
  background:var(--lime)}
.ho-balken-fahrt{color:rgba(255,255,255,.5);display:flex;align-items:baseline;gap:8px;
  justify-content:flex-end;text-align:right}
.ho-balken-fahrt b{font-size:19px;color:#fff;font-weight:700}
.ho-balken-fahrt em{font-style:normal;letter-spacing:.1em;color:rgba(255,255,255,.34)}
/* Hover zeigt Information, nicht Farbe: die Kilometer treten hervor,
   der Balken bekommt seine volle Deckung. */
.ho-balken-zeile:hover .ho-balken-fahrt em{color:rgba(255,255,255,.8)}
.ho-balken-zeile:hover .ho-balken-strich{background:var(--lime)}
/* Der Nullpunkt: null Minuten Fahrt heißt kein Balken. Statt eines Strichs
   von null Länge steht nur die Marke dort, wo alle anderen ankommen — das
   Bild sagt damit selbst, dass hier nichts zurückzulegen ist. */
.ho-balken-null .ho-balken-strich{background:none}
.ho-balken-null .ho-balken-strich::before{display:none}
.ho-balken-null .ho-balken-strich::after{width:9px;height:9px;border-radius:50%;
  top:-3px;right:-4px;background:var(--lime);box-shadow:0 0 0 4px rgba(204,255,0,.18)}
.ho-balken-null .ho-balken-name{color:#fff}
.ho-balken-null .ho-balken-fahrt em{color:rgba(204,255,0,.8)}
.ho-balken-null:hover .ho-balken-strich{background:none}

.ho-quelle{color:rgba(255,255,255,.42);margin-top:26px;max-width:72ch;letter-spacing:.1em;
  line-height:1.7;text-transform:none;font-size:11px;font-weight:400;font-family:'Hanken Grotesk',sans-serif}

/* ================= 02 · DIE HÄUSER ================= */
/* Hier wird es hell. Links steht der Titel und bleibt stehen, rechts
   laufen die Häuser vorbei — die einzige zweispaltige Stelle der Seite. */
.ho-haeuser{padding:var(--luft) var(--inset);display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,12fr);gap:clamp(28px,4vw,64px);
  background:var(--weiss)}
.ho-haeuser-kopf{position:sticky;top:120px;align-self:start;display:flex;flex-direction:column;gap:16px}
.ho-haeuser-kopf .t-text{color:var(--sekundaer);max-width:34ch}

.ho-liste{border-top:1px solid var(--hairline)}
.ho-haus{display:grid;grid-template-columns:92px minmax(0,1fr);gap:clamp(16px,2.2vw,34px);
  padding:26px 0;border-bottom:1px solid var(--hairline)}
.ho-haus-zeit{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px;
  padding-top:2px}
.ho-haus-zeit .t-zahl{font-size:clamp(34px,3.6vw,52px);line-height:.9;color:var(--gruen)}
.ho-haus-zeit .ho-haus-ohne{color:var(--muted);opacity:.5}
.ho-haus-zeit em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:10px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ho-haus-text{display:flex;flex-direction:column;gap:9px;min-width:0}
.ho-haus-text h3{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,1.9vw,27px);letter-spacing:-.02em;line-height:1.14;color:var(--tinte)}
.ho-haus-ort{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;color:var(--muted)}
/* Die Kilometer sind die zweite Ebene — leiser als der Ort, aber lesbar:
   --muted ist die Untergrenze des Systems, nicht --linie-karte (das ist
   eine Linienfarbe und als Schrift unlesbar). */
.ho-haus-km{font-variant-numeric:tabular-nums;color:var(--muted);opacity:.75}
.ho-haus:hover .ho-haus-km{opacity:1}
.ho-haus-merkmale{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:2px}
.ho-haus-merkmale li{position:relative;padding:0 14px 0 0;margin-right:14px;color:var(--sekundaer)}
.ho-haus-merkmale li:not(:last-child)::after{content:"";position:absolute;right:0;top:.55em;
  width:1px;height:1em;background:var(--hairline)}
.ho-haus-kontakt{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:6px;align-items:baseline}
.ho-haus-adresse{color:var(--muted)}
.ho-haus-fehlt{font-style:italic}
/* Ränder reagieren: die Unterlinie läuft von links auf — dieselbe Geste
   wie überall auf der Seite. */
.ho-haus-link{position:relative;color:var(--gruen);font-weight:400}
.ho-haus-link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:currentColor;transition:right .25s var(--ease)}
.ho-haus-link:hover::after,.ho-haus-link:focus-visible::after{right:0}
.ho-haus-angebot{color:var(--tanne);font-weight:600}
.ho-fussnote{grid-column:1 / -1;color:var(--muted);text-transform:none;letter-spacing:.02em;
  font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:300;max-width:70ch;
  padding-top:22px}

/* ================= 03 · DIE PAUSE ================= */
/* Randlos, eine Bildschirmhöhe, fast nichts darin. */
/* Randlos heißt hier wirklich randlos: Diese Sektionen liegen direkt im
   .fluss, der selbst kein --inset hat. Ein negativer Rand (wie ihn Bauteile
   INNERHALB eines .kapitel brauchen) schöbe sie aus dem Fenster — der
   Textrand säße dann bei null. */
.ho-pause{position:relative;
  min-height:clamp(420px,78svh,760px);display:flex;align-items:flex-end;overflow:hidden;
  background:var(--pine)}
.ho-pause-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 58%}
.ho-pause::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,17,.05) 0%,rgba(6,26,17,.34) 58%,rgba(5,22,14,.86) 100%)}
.ho-pause-inhalt{position:relative;z-index:2;padding:clamp(32px,5vw,72px) var(--inset);
  display:flex;flex-direction:column;gap:14px;max-width:44ch}
/* Das Echo: dieselbe Konturschrift wie in der Hero-Schlagzeile — einmal
   auf der Seite, hier als Uhrzeit und viel größer. */
.ho-pause-zeit{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(72px,13vw,190px);line-height:.82;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums}
.ho-pause-satz{font-size:clamp(19px,2vw,27px);font-weight:300;line-height:1.4;color:#fff;
  text-wrap:balance}
.ho-pause-klein{color:rgba(255,255,255,.62);text-transform:none;letter-spacing:.02em;
  font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:300}

/* ================= 04 · ABSCHLUSS ================= */
.ho-cta{position:relative;padding:clamp(56px,7vw,110px) var(--inset);
  overflow:hidden;background:var(--mint)}
/* Das Bild ist hier Fläche, nicht Motiv: Es liegt so weit zurück, dass die
   Konturschrift darauf noch trägt. Der Verlauf hält die linke Hälfte ruhig,
   dort steht der Text. */
.ho-cta-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 62%;opacity:.2}
.ho-cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--mint) 0%,rgba(232,239,232,.82) 42%,rgba(232,239,232,.25) 100%)}
.ho-cta-inhalt{position:relative;z-index:2;display:flex;flex-direction:column;gap:18px;
  max-width:62ch}
.ho-cta-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,5.4vw,86px);letter-spacing:-.05em;line-height:1.06;color:var(--tinte);
  display:flex;flex-direction:column}
/* Die zweite Zeile als Konturschrift — die Marke der Startseite, hier auf
   Hell: dieselbe Geste, andere Farbe. */
.ho-cta-outline{color:transparent;-webkit-text-stroke:2px var(--tanne)}
.ho-cta .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.ho-cta-hinweis{color:var(--sekundaer);text-transform:none;letter-spacing:.02em;
  font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:300}

/* ================= Schmale Fenster ================= */
@media (max-width:1000px){
  .ho-null{grid-template-columns:1fr}
  .ho-null-bild{min-height:clamp(240px,34svh,380px)}
  .ho-haeuser{grid-template-columns:1fr;padding-top:var(--luft-s)}
  .ho-haeuser-kopf{position:static}
}

@media (max-width:700px){
  /* Die Zeit-Chips klebt die Steuerzeile nicht — sie scrollen in ihrem
     eigenen Container, die Seite selbst nie waagrecht. */
  .ho-zeiten{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ho-zeiten::-webkit-scrollbar{display:none}
  .ho-zeit{flex:0 0 auto}
  /* Die Balken bleiben Balken — sie sind das Bild dieser Seite. Nur die
     Kilometerspalte weicht unter den Balken. */
  .ho-balken-zeile{grid-template-columns:52px minmax(0,1fr);gap:4px 12px;
    grid-template-areas:"ab name" "ab spur" ". fahrt";align-items:center;padding:14px 0}
  .ho-balken-ab{grid-area:ab;align-self:start;padding-top:2px}
  .ho-balken-name{grid-area:name;font-size:12px}
  .ho-balken-spur{grid-area:spur;height:16px}
  .ho-balken-fahrt{grid-area:fahrt;justify-content:flex-start;text-align:left}
  .ho-haus{grid-template-columns:64px minmax(0,1fr);gap:14px}
  .ho-haus-zeit .t-zahl{font-size:30px}
}

/* ================= Bewegung aus ================= */
@media (prefers-reduced-motion:reduce){
  .ho-null-bild img{clip-path:none;transform:none;transition:none}
  .ho-balken-strich,.ho-balken-name{transition:none}
}