/* ═══════════════════════════════════════════════════════════════════
   BAUMBESTATTUNG — Startseite
   Heller Header mit rotierendem Wege-Karussell. Nur hier geladen.

   Formensprache: helle Galerie. Ruhige Papierfläche, whisper-leichte
   Display-Schrift, Mono-Versalien als Label, flache Flächen ohne Schatten.
   Die vier Wege unterscheiden sich ausschließlich über die Farbe, so wie
   Kategorien in der Vorlage. Rundung 30 px, Innenabstand 28 px.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════ Navigation über hellem Header ═══════════════
   Pflicht aus der Kontrast-Garantie: Über einer hellen Fläche wäre die
   weiße Standard-Navigation unlesbar. Deshalb bekommt die Startseite eine
   helle Glasvariante. `:not(.scrolled)` sorgt dafür, dass der gescrollte
   Zustand aus base.css unverändert gewinnt. */
.nav.nav-hell:not(.scrolled) {
  background: rgba(248,244,239,.66);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--line-2);
}
.nav.nav-hell:not(.scrolled) .nav-logo { color: var(--ink); }
.nav.nav-hell:not(.scrolled) .nav-links a { color: var(--ink-2); }
.nav.nav-hell:not(.scrolled) .nav-links a:hover,
.nav.nav-hell:not(.scrolled) .nav-links a.active { color: var(--accent); }
.nav.nav-hell:not(.scrolled) .nav-cta {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.nav.nav-hell:not(.scrolled) .nav-cta:hover {
  background: var(--accent-deep); border-color: var(--accent-deep);
}
.nav.nav-hell:not(.scrolled) .nav-burger span { background: var(--ink); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.nav-hell:not(.scrolled) { background: rgba(248,244,239,.95); }
}

/* ═══════════════ Header ═══════════════ */
.wh {
  position: relative; overflow: hidden;
  background: var(--paper);
  padding: calc(var(--nav-h) + 46px) 0 72px;
}

/* Das Foto trägt die Stimmung und bleibt sichtbar. Aufgehellt wird nur
   dort, wo Text steht: Der radiale Verlauf legt eine weiche Lichtfläche
   hinter Eyebrow und Überschrift, an den Rändern bleibt der Wald stehen.
   Der lineare Verlauf blendet nach unten sauber auf Papier aus. */
.wh-media { position: absolute; inset: 0; z-index: 0; }
.wh-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  opacity: .42; filter: saturate(.84);
}
.wh-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 72% 44% at 50% 22%,
      rgba(248,244,239,.94) 0%,
      rgba(248,244,239,.66) 50%,
      rgba(248,244,239,0) 80%),
    linear-gradient(180deg,
      rgba(248,244,239,.24) 0%,
      rgba(248,244,239,.12) 38%,
      rgba(248,244,239,.66) 84%,
      var(--paper) 100%);
}
.wh .wrap { position: relative; z-index: 1; }

 /* Zentriert wie in der Vorlage: Der Kopf sitzt über der Mitte der Bühne,
   sonst steht der Text links und die Karten schweben rechts daneben.
   Auf schmalen Geräten wieder linksbündig, dort liest sich Fließtext besser. */
.wh-kopf { max-width: 780px; margin: 0 auto; text-align: center; }

.wh-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.wh-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-soft); flex-shrink: 0;
}

.wh h1 {
  /* Kleiner als die globale h1-Stufe: Direkt darunter steht das Karussell,
     sonst rutschen die Karten unter die Bildschirmkante. */
  font-size: clamp(33px, 4.3vw, 55px);
  color: var(--ink);
  line-height: .98;
  margin-bottom: 0;
  text-wrap: balance;
}
.wh h1 em { color: var(--accent); }

/* Steht jetzt unter dem Karussell: erst die vier Wege, dann die Einordnung. */
.wh-sub {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  /* Nicht --muted: Der Satz steht jetzt über dem Foto, dort reicht der
     helle Grauton nicht mehr für einen sicheren Kontrast. */
  color: var(--ink-2);
  max-width: 54ch; margin: 0 auto; text-align: center;
}

/* ═══════════════ Bühne ═══════════════ */
/* --wk-breite steuert die Kartenbreite, das Skript liest sie über
   offsetWidth aus und leitet daraus den Radius ab. */
.wh-buehne {
  --wk-breite: 292px;
  position: relative;
  width: 100%; max-width: 1000px; height: 396px;
  margin: 34px auto 0;
}

.wk {
  position: absolute; left: 50%; top: 50%;
  width: var(--wk-breite);
  /* Alle vier gleich hoch: Die Texte sind unterschiedlich lang, ohne
     Mindesthöhe stünden die Karten im Kreis unterschiedlich hoch. */
  min-height: 362px;
  transform: translate(-50%, -50%);
  border-radius: 30px;
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
  will-change: transform;
  transition: box-shadow .3s var(--ease-out);
}

/* Papierschleier für die Tiefenwirkung. Das Skript setzt --wk-schleier
   zwischen 0 (vorn) und 0.64 (hinten). Deckende Karte statt Transparenz:
   sonst schiene das Hintergrundfoto durch das Bildband der Karte. */
.wk::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: var(--paper);
  opacity: var(--wk-schleier, 0);
  pointer-events: none;
}

/* Bildband oben. Die Bilder sind auf 600 px vorbereitet, also doppelte
   Kartenbreite. Kein Alt-Text: Der Kartentext benennt den Weg bereits,
   ein zweites Mal wäre für Screenreader nur Lärm. */
.wk-bild { display: block; height: 142px; background: var(--warm-2); flex-shrink: 0; overflow: hidden; }
.wk-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.92);
  transition: transform .7s var(--ease-out);
}
.wk:hover .wk-bild img { transform: scale(1.05); }

.wk-koerper {
  padding: 22px 24px 21px;
  display: flex; flex-direction: column; gap: 9px; flex: 1;
}
.wk-1 { background: var(--weg-1); color: #fff;       --wk-linie: rgba(255,255,255,.26); }
.wk-2 { background: var(--weg-2); color: #fff;       --wk-linie: rgba(255,255,255,.30); }
.wk-3 { background: var(--weg-3); color: var(--ink); --wk-linie: rgba(30,22,16,.20); }
.wk-4 { background: var(--weg-4); color: #fff;       --wk-linie: rgba(255,255,255,.30); }

.wk:hover { box-shadow: inset 0 0 0 2px var(--wk-linie); }

.wk-nr {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; opacity: .72;
}
.wk-titel {
  font-family: var(--font-display); font-weight: 300;
  font-size: 26px; line-height: 1.1; letter-spacing: -.02em;
}
.wk-titel em { font-family: var(--font-accent); font-style: italic; }
.wk-text { font-size: 14.5px; line-height: 1.58; opacity: .88; flex: 1; }
.wk-preis {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--wk-linie);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wk-preis .arr { transition: transform .25s var(--ease-out); flex-shrink: 0; }
.wk:hover .wk-preis .arr { transform: translateX(3px); }

/* ─── Fuß des Headers ─── */
.wh-fuss { margin-top: 34px; display: grid; gap: 20px; justify-items: center; }
.wh-fuss .btn-row { justify-content: center; }
.wh-trust { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wh-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 1px solid var(--line-2);
  color: var(--ink-2); border-radius: 999px;
  padding: 9px 16px; font-size: 13px; line-height: 1.3;
}
.wh-pill b { color: var(--ink); font-weight: 500; }

/* Sprungziele aus dem Karussell: der feste Kopf darf die Karte nicht verdecken */
.card[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ═══════════════ Statische Fassung ═══════════════
   Gilt auf schmalen Geräten und bei reduzierter Bewegung. Dieselben
   Karten, nur als Raster. Nichts dreht sich, nichts überlappt. */
.wh-buehne.wb-statisch {
  height: auto; max-width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px; margin-top: 40px;
}
.wb-statisch .wk {
  position: static; transform: none;
  width: auto; min-height: 0; z-index: auto;
}
.wb-statisch { height: auto; }
.wb-statisch .wk::after { opacity: 0; }

/* ═══════════════ Mobil ═══════════════
   Das Karussell dreht auch hier. Damit der Kreis nicht auf null schrumpft,
   werden die Karten schmaler und die seitlichen dürfen über den Rand
   hinausragen. `.wh` hat `overflow: hidden` und schneidet sie sauber ab. */
@media (max-width: 899px) {
  .wh { padding: calc(var(--nav-h) + 34px) 0 62px; }
  .wh-buehne { --wk-breite: 244px; height: 384px; margin-top: 32px; }
  .wh-fuss { margin-top: 32px; }
  .wk { min-height: 336px; }
  .wk-koerper { padding: 20px 20px 19px; }
  .wk-bild { height: 126px; }
  .wk-titel { font-size: 22px; }
  .wk-text { font-size: 14px; }
}
@media (max-width: 620px) {
  .wh-buehne { --wk-breite: 206px; height: 372px; }
  .wk { min-height: 324px; }
  .wk-bild { height: 112px; }
  .wk-koerper { padding: 18px 18px 17px; gap: 8px; }
  .wk-titel { font-size: 20px; }
  .wk-text { font-size: 13.5px; }
  .wk-preis { font-size: 12px; }
  .wh-kopf { text-align: left; }
  .wh-sub { margin-left: 0; text-align: left; }
  .wh-fuss { justify-items: stretch; }
  .wh-fuss .btn-row { justify-content: stretch; }
  .wh-fuss .btn-row .btn { width: 100%; justify-content: center; }
  .wh-trust { justify-content: flex-start; }
  /* Raster nur noch bei reduzierter Bewegung, dann einspaltig */
  .wh-buehne.wb-statisch { grid-template-columns: 1fr; gap: 12px; height: auto; }
}
@media (max-width: 400px) {
  .wh-buehne { --wk-breite: 194px; height: 372px; }
  .wk { min-height: 334px; }
}

/* ═══════════════ Bewegung aus ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  .wk, .wk-preis .arr, .wk-bild img { transition: none; }
  .wk:hover .wk-bild img { transform: none; }
}