/* ============================================================
   IRMAS FERIENHÄUSL — "Salbei & Handschrift"
   Eigenständiges Stylesheet (hell · frisch · familiär · grünlich)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --c-bg:        #FAFBF6;
  --c-bg-soft:   #F1F4EA;
  --c-bg-warm:   #F6F1E7;
  --c-bg-dark:   #2E3A33;
  --c-surface:   #FFFFFF;
  --c-surface-2: #F4F6EF;
  --c-line:      #E3DDD0;
  --c-line-soft: rgba(46,58,51,.10);

  --c-ink:       #2E3A33;
  --c-ink-soft:  #55615A;
  --c-muted:     #5C6760;
  --c-faint:     #8A938D;

  --c-sage:      #6F9266;
  --c-sage-dark: #4F7248;
  --c-sage-mist: #C7D6BC;
  --c-oak:       #DCC9A8;
  --c-gold:      #C39B5A;

  --c-on-video:  #FFFDF8;

  --c-error:     #A3402B;   /* Formular-Fehler: warmes Ziegelrot, 6,1 : 1 auf dem Seitengrund */

  --f-display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --f-sans:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --f-serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  /* Zierschrift: Calligraffitti (Apache 2.0), dem Logo-Schriftzug nachempfunden. Ihre Linie ist
     dünner als im Logo; --script-strich verstärkt sie (-webkit-text-stroke) auf dieselbe
     Strichstärke im Verhältnis zur Buchstabenhöhe. */
  --f-script:  "Calligraffitti", cursive;   /* ohne Hanken dazwischen: sonst Doppeltausch beim Laden */
  --script-strich: .031em;

  --container: 1200px;
  --radius:    12px;
  --radius-lg: 18px;
  --pad-section: clamp(4rem, 8vw, 7rem);
  --header-h: 76px;

  /* ---------- Motion-System: 3 Kurven, 4 Dauern ----------
     Signaturen bleiben eigen und unangetastet: Hero-Schrift, Brücken-Schrift, alle
     scroll-gesteuerten Kurven (Film, Lichtportal, Chronik, Kapitel), Endlos-Schleifen. */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);    /* ANKOMMEN: Einblenden, Hover, Auffächern */
  --ease-move: cubic-bezier(.45, .05, .2, 1);  /* ORTSWECHSEL A -> B: Kamera, Panel, Akkordeon */
  --ease-in:   cubic-bezier(.3, 0, 1, 1);      /* GEHEN: Ausblenden, Einsammeln, zuklappen (zieht früh an,
                                                 sonst wirkt das Schließen verzögert); Exits mit --t-1 */
  --t-1: .2s;    /* Rückmeldung: Farbe, Druck, kleine Hover */
  --t-2: .4s;    /* UI-Zustand: Menü, Knopf, Karte, Label, Inhalt */
  --t-3: .7s;    /* Auftritt & Überblendung: Reveal, Hero-Zeilen, Beats, Fotowechsel */
  --t-4: 1.1s;   /* große Bewegung: Kamera, Panel, Raum-Titel, Linien */
  --stagger: 70ms;
  --rise: 16px;      /* Einblend-Weg kleiner Elemente */
  --rise-lg: 24px;   /* Einblend-Weg ganzer Blöcke */
}

/* Zierschrift-Elemente: Linie auf Logo-Stärke verstärkt (siehe --script-strich), immer normaler Schnitt
   (Calligraffitti hat keinen fetten Schnitt -> kein künstliches Fett vom Browser) */
.ih-stapel__etikett, .ih-album__titel, .ih-wer__tag, .ih-story__kicker, .ih-story__tuertext,
.ih-chronik__since, .ih-chronik__kicker, .ih-bruecke__frage {
  font-weight: 400; font-synthesis: none; -webkit-text-stroke: var(--script-strich) currentColor;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--c-bg); }
/* Querscrollen/„weißer Balken" am Handy zuverlässig verhindern (auch iOS Safari).
   overflow-x:clip erzeugt KEINEN Scroll-Container -> position:sticky bleibt heil
   (NICHT overflow:hidden verwenden, das würde das gepinnte Storytelling zerstören). */
body { overflow-x: clip; }
body {
  font-family: var(--f-sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
/* <picture> ist nur die Hülle für die Bildquellen (AVIF/WebP, Art-Direction): das <img> darin
   verhält sich im Layout genau wie ohne Hülle (Maße, object-fit, Raster, absolute Lage) */
picture { display: contents; }
source { display: none; }   /* sonst würden die <source> zu leeren Raster-/Flex-Kindern (Zusatzzeilen im Raster) */
a { color: var(--c-sage-dark); text-underline-offset: .18em; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; }
/* Keine Einzelwörter in der letzten Zeile („ruhig.", „wird.", „Haus.") — Browser ohne Unterstützung ignorieren es */
h1, h2, h3, h4, .ih-h2, .ih-hero__sub, .ih-story__line, .ih-season__title { text-wrap: balance; }
p, li, figcaption, dd { text-wrap: pretty; }
.ih-container {
  max-width: var(--container); margin-inline: auto;
  padding-inline:
    calc(clamp(1.25rem, 5vw, 4rem) + env(safe-area-inset-left, 0px))
    calc(clamp(1.25rem, 5vw, 4rem) + env(safe-area-inset-right, 0px));
}

/* ---------- Tastatur-Fokus (A11y) ---------- */
:focus-visible { outline: 3px solid var(--c-sage-dark); outline-offset: 2px; border-radius: 4px; }
.ih-section--dark :focus-visible, .ih-hero :focus-visible, .ih-header:not(.is-scrolled) :focus-visible,
.ih-lightbox :focus-visible, .ih-footer :focus-visible { outline-color: #fff; }

/* Skip-Link */
.ih-skip {
  position: fixed; left: 1rem; top: -100px; z-index: 200;
  background: var(--c-sage-dark); color: #fff; padding: .7em 1.2em; border-radius: var(--radius);
  font-weight: 600; text-decoration: none; transition: top var(--t-1) var(--ease-out);
}
.ih-skip:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.ih-btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-sans); font-weight: 600; font-size: 1rem;
  padding: .85em 1.5em; border-radius: var(--radius); border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform var(--t-1) var(--ease-out), background-color var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out);
}
.ih-btn--primary { background: var(--c-sage-dark); color: #fff; }
.ih-btn--primary:hover { background: #44643E; transform: translateY(-2px); }
.ih-btn--ghost { background: transparent; color: var(--c-on-video); border-color: rgba(255,255,255,.55); }
.ih-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.ih-link-underline { color: var(--c-on-video); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--c-sage-mist); padding-bottom: 2px; transition: border-color var(--t-1) var(--ease-out); }
.ih-link-underline:hover { border-color: #fff; }

/* „Route planen" (Google Maps, extern): Stil wie der unterstrichene Link, auf hellem Grund,
   mit kleinem Ortsmarker. Eigene Zeile (auch vor einem Knopf), Abstand nach oben. */
.ih-route {
  display: flex; width: fit-content; align-items: center; gap: .45em; margin-top: 1.1rem;
  color: var(--c-sage-dark); font-weight: 600; font-size: .98rem; line-height: 1.3; text-decoration: none;
  border-bottom: 1.5px solid var(--c-sage-mist); padding-bottom: 2px;
  transition: border-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
}
.ih-route::before {
  content: ""; flex: none; width: 1.05em; height: 1.05em; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ih-route:hover { border-color: var(--c-sage-dark); }
.ih-route:focus-visible { outline-offset: 4px; }

/* ---------- Header ---------- */
/* Safe Area: Wir setzen viewport-fit=cover, der Inhalt reicht also bis unter
   Dynamic Island / Notch / Home-Indikator. env(...) ist auf allen Geräten OHNE
   Aussparung exakt 0px — dort ändert sich dadurch nichts. */
.ih-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-inline:
    calc(clamp(1.25rem, 5vw, 4rem) + env(safe-area-inset-left, 0px))
    calc(clamp(1.25rem, 5vw, 4rem) + env(safe-area-inset-right, 0px));
  transition: transform var(--t-2) var(--ease-out), background-color var(--t-2) var(--ease-out),
              box-shadow var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Während der Film klebt: nach oben weg (main.js setzt .is-weg), beim Hochscrollen zurück.
   Tastaturfokus im Kopf und offenes Menü holen ihn immer zurück. */
.ih-header.is-weg {
  transform: translateY(-100%); box-shadow: none;
  transition: transform var(--t-2) var(--ease-in), background-color var(--t-2) var(--ease-out),
              box-shadow var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out);
}
.ih-header.is-weg:focus-within, body.ih-menu-open .ih-header.is-weg { transform: none; }
/* Ohne JS: Kopf nur oben über dem Hero (absolut) — fest blieb er transparent mit weißer Schrift
   über der ganzen hellen Seite. Seiten mit statisch hellem Kopf (.is-scrolled) bleiben fest. */
html:not(.has-js) .ih-header:not(.is-scrolled) { position: absolute; }
.ih-header__brand { --marke-w: clamp(10.5rem, 9rem + 3vw, 12.75rem); display: block; color: var(--c-on-video); text-decoration: none; transition: color var(--t-2) var(--ease-out), filter var(--t-2) var(--ease-out); }
/* Logo-Schriftzug links oben: dasselbe Bild wie im Hero,
   hier als Maske über der Textfarbe -> färbt sich wie vorher die Schrift (hell über dem Video, dunkel im
   festen Kopf und im offenen Menü). Bild ist schon vom Hero im Cache. */
.ih-marke {
  display: block; width: var(--marke-w, 12rem); aspect-ratio: 1812 / 290;
  background-color: currentColor;
  -webkit-mask: url("../assets/images/logo/wortmarke.webp") center / contain no-repeat;
          mask: url("../assets/images/logo/wortmarke.webp") center / contain no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;   /* druckt sonst als leere Fläche */
}
@media (forced-colors: active) { .ih-marke { forced-color-adjust: none; background-color: CanvasText; } }
.ih-header__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.ih-header__nav a { color: var(--c-on-video); text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap; transition: opacity var(--t-1) var(--ease-out), color var(--t-2) var(--ease-out); }
.ih-header__nav a:hover { opacity: .8; }
/* Sprachwahl: über dem Video hell wie das Menü (vorher erbte sie dunkle Tinte -> auf dem Video unsichtbar).
   Aktive Sprache fett, die andere unterstrichen statt halbtransparent. */
.ih-header__lang { font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--c-on-video); white-space: nowrap; transition: color var(--t-2) var(--ease-out); }
.ih-header__lang a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; transition: opacity var(--t-1) var(--ease-out); }
.ih-header__lang a:hover { opacity: .8; }
/* Über dem Startvideo: leichter Schatten hinter Menü + Marke (zusätzlich zum Verlauf oben im Hero-Schleier).
   Die Marke ist ein Bild (Maske) -> Schatten per drop-shadow am Link, nicht per text-shadow. */
.ih-header:not(.is-scrolled) .ih-header__nav a,
.ih-header:not(.is-scrolled) .ih-header__lang { text-shadow: 0 1px 12px rgba(20,28,23,.45); }
.ih-header:not(.is-scrolled) .ih-header__brand { filter: drop-shadow(0 1px 6px rgba(20,28,23,.45)); }
.ih-header.is-scrolled {
  background: rgba(250,251,246,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom-color: var(--c-line); box-shadow: 0 6px 24px -18px rgba(46,58,51,.5);
}
.ih-header.is-scrolled .ih-header__brand,
.ih-header.is-scrolled .ih-header__nav a { color: var(--c-ink); }
.ih-header.is-scrolled .ih-header__lang { color: var(--c-ink-soft); }
.ih-header__navlinks { display: contents; }
/* „Anfragen" als kleine Pille: die Hauptaktion hebt sich ab (über dem Video wie im festen Kopf gleich) */
.ih-header .ih-header__nav a.ih-header__cta {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 1.05rem; border-radius: 999px;
  background: var(--c-sage-dark); color: #fff; text-shadow: none;
  transition: background-color var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
}
.ih-header .ih-header__nav a.ih-header__cta:hover { opacity: 1; background: #44643E; transform: translateY(-1px); }

/* ---------- Hamburger + Mobile-Menü ---------- */
.ih-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; margin-right: -10px;
  border: 0; background: transparent; cursor: pointer;
}
.ih-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--c-on-video); transition: transform var(--t-2) var(--ease-out), opacity var(--t-1) var(--ease-out), background-color var(--t-2) var(--ease-out); }
.ih-header.is-scrolled .ih-burger span { background: var(--c-ink); }
.ih-burger.is-active span { background: var(--c-ink); }
.ih-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ih-burger.is-active span:nth-child(2) { opacity: 0; }
.ih-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ih-mobilemenu {
  position: fixed; inset: 0; z-index: 56; background: var(--c-bg);
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;
  padding:
    calc(var(--header-h) + env(safe-area-inset-top, 0px))
    calc(clamp(1.5rem, 9vw, 4rem) + env(safe-area-inset-right, 0px))
    calc(clamp(2rem, 9vw, 4rem) + env(safe-area-inset-bottom, 0px))
    calc(clamp(1.5rem, 9vw, 4rem) + env(safe-area-inset-left, 0px));
  /* Fläche blendet nur (schließen: --t-1 + --ease-in), die Links kommen gestaffelt nach */
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-1) var(--ease-in), visibility 0s linear var(--t-1);
}
.ih-mobilemenu.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-2) var(--ease-out), visibility 0s; }
/* Schließen per Link-Tipp (main.js): die Seite scrollt schon -> Fläche in .1 s weg */
.ih-mobilemenu.is-sprung:not(.is-open) { transition: opacity .1s var(--ease-in), visibility 0s linear .1s; }
.ih-mobilemenu__nav { display: flex; flex-direction: column; gap: 1.05rem; }
.ih-mobilemenu__nav a {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.7rem, 8vw, 2.6rem);
  line-height: 1.08; color: var(--c-ink); text-decoration: none; width: max-content;
}
.ih-mobilemenu__nav a:hover { color: var(--c-sage-dark); }
.ih-mobilemenu__lang { margin-top: 1.4rem; font-size: 1rem; font-weight: 600; letter-spacing: .05em; color: var(--c-ink-soft); }
/* EN/DE-Link im Menü als Link erkennbar (wie im Kopf unterstrichen) */
.ih-mobilemenu__lang a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.ih-mobilemenu__lang a:hover { color: var(--c-sage-dark); }
/* Schließen: Links sind nach .12 s weg (vor der Fläche) — sonst stand Menütext über der schon
   scrollenden Seite; nur Ausblenden, die Startposition für das nächste Öffnen springt danach */
.ih-mobilemenu__nav a, .ih-mobilemenu__lang {
  opacity: 0; transform: translateY(var(--rise));
  transition: opacity .12s var(--ease-in), transform 0s linear .12s;
}
.ih-mobilemenu.is-sprung:not(.is-open) .ih-mobilemenu__nav a,
.ih-mobilemenu.is-sprung:not(.is-open) .ih-mobilemenu__lang { transition: opacity .08s var(--ease-in), transform 0s linear .08s; }
.ih-mobilemenu.is-open .ih-mobilemenu__nav a,
.ih-mobilemenu.is-open .ih-mobilemenu__lang {
  opacity: 1; transform: none;
  transition: opacity var(--t-2) var(--ease-out) var(--d, 0s), transform var(--t-3) var(--ease-out) var(--d, 0s);
}
.ih-mobilemenu.is-open .ih-mobilemenu__nav a:nth-child(1) { --d: .06s; }
.ih-mobilemenu.is-open .ih-mobilemenu__nav a:nth-child(2) { --d: .1s; }
.ih-mobilemenu.is-open .ih-mobilemenu__nav a:nth-child(3) { --d: .14s; }
.ih-mobilemenu.is-open .ih-mobilemenu__nav a:nth-child(4) { --d: .18s; }
.ih-mobilemenu.is-open .ih-mobilemenu__nav a:nth-child(5) { --d: .22s; }
.ih-mobilemenu.is-open .ih-mobilemenu__nav a:nth-child(6) { --d: .26s; }
.ih-mobilemenu.is-open .ih-mobilemenu__nav a:nth-child(n+7) { --d: .3s; }
.ih-mobilemenu.is-open .ih-mobilemenu__lang { --d: .36s; }

body.ih-menu-open { overflow: hidden; }
/* offenes Menü: Marke dunkel, ohne den Schatten-Halo des Video-Zustands */
body.ih-menu-open .ih-header__brand { color: var(--c-ink); filter: none; }

/* Burger-Menü bis 900 px: dazwischen (iPad hochkant, 768–834 px) brach die volle
   Navigation sonst um („Irmas / Ferienhäusl", „Das / Haus") */
@media (max-width: 900px) {
  /* Kopf immer über dem Menü (56): beim Schließen verschwand er sonst kurz darunter */
  .ih-header { z-index: 60; }
  .ih-header__navlinks { display: none; }
  .ih-header__lang { display: none; }
  .ih-burger { display: flex; }
}
@media (min-width: 901px) { .ih-mobilemenu { display: none; } }

/* ---------- Schwebender Anfrage-Knopf (Handy/Tablet bis 900 px) ----------
   Dort ist die Navigation im Burger versteckt. Erscheint erst nach dem Anflug und
   verschwindet ab den Preisen (dort stehen die echten Knöpfe) — Klasse .is-on setzt
   main.js (bindFab). Ohne JS nie sichtbar. Unter Kopf (Handy 60) + Menü (56) + Großansicht (100). */
.ih-fab { display: none; }
@media (max-width: 900px) {
  .ih-fab {
    position: fixed; z-index: 45;
    right: calc(1rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: .6rem;
    opacity: 0; visibility: hidden; transform: translateY(1.2rem);
    transition: opacity var(--t-1) var(--ease-in), transform var(--t-1) var(--ease-in), visibility 0s linear var(--t-1);
  }
  .ih-fab.is-on {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out), visibility 0s;
  }
}
.ih-fab__cta,
.ih-fab__call {
  box-shadow: 0 12px 28px -12px rgba(20,28,23,.55), 0 2px 6px rgba(20,28,23,.16);
  -webkit-tap-highlight-color: transparent; transition: transform var(--t-1) var(--ease-out);
}
.ih-fab__cta {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 1.55rem; border-radius: 999px;
  background: var(--c-sage-dark); color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: .01em; text-decoration: none;
}
.ih-fab__call {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-surface); color: var(--c-sage-dark); border: 1px solid var(--c-line);
}
.ih-fab__call svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ih-fab__cta:active, .ih-fab__call:active { transform: scale(.96); }

/* ---------- Hero ---------- */
.ih-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden;
  background-color: #4a6259; }   /* Mittelton des Posters: bis es geladen ist (langsames Netz) keine graue/weiße Fläche */
.ih-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ih-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* oben: Verlauf hinter Kopfzeile (Menü war weiß auf weißen Wolken) · links: hinter dem Text · unten: Übergang */
  background:
    linear-gradient(180deg, rgba(24,30,26,.70) 0, rgba(24,30,26,.52) 76px, rgba(24,30,26,.16) 150px, rgba(24,30,26,0) 220px),
    linear-gradient(100deg, rgba(36,46,40,.72) 0%, rgba(36,46,40,.48) 45%, rgba(36,46,40,0) 75%),
    linear-gradient(to top, rgba(36,46,40,.48) 0%, rgba(36,46,40,0) 42%);
}
/* Handy: Text läuft über die ganze Breite -> Schleier senkrecht, am stärksten dort, wo der Text steht */
@media (max-width: 720px) {
  .ih-hero__scrim {
    background:
      linear-gradient(180deg, rgba(24,30,26,.62) 0, rgba(24,30,26,.34) 86px, rgba(24,30,26,0) 170px),
      linear-gradient(180deg, rgba(24,30,26,.08) 0%, rgba(24,30,26,.52) 27%, rgba(24,30,26,.58) 60%, rgba(24,30,26,.52) 84%, rgba(24,30,26,.34) 100%);
  }
}
.ih-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin-inline: auto; padding: var(--header-h) clamp(1.25rem, 5vw, 4rem) 0; color: var(--c-on-video); }
.ih-hero__eyebrow {
  font-family: var(--f-sans); font-weight: 600; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-on-video); opacity: 0; margin-bottom: 1.1rem;
  animation: ih-up var(--t-3) var(--ease-out) .2s forwards;
}
.ih-hero__icon { width: 58px; height: auto; margin-bottom: .55rem; opacity: 0; animation: ih-up var(--t-3) var(--ease-out) .1s forwards; }
.ih-hero__icon-house { fill: var(--c-sage-mist); }
.ih-hero__icon-roof { fill: none; stroke: var(--c-sage-mist); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.ih-hero__name {
  font-family: var(--f-script); font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 8rem); line-height: .82; letter-spacing: .005em;
  color: var(--c-on-video); margin-bottom: 1.5rem;
  clip-path: inset(-40% 100% -16% 0);
  animation: ih-write 1.5s var(--ease-out) .55s forwards;
  text-shadow: 0 2px 30px rgba(36,46,40,.35);
}
/* Wortmarke = Schriftzug aus dem Logo als Bild; die Font-Regeln am h1 bleiben nur als Fallback, falls das Bild nicht lädt (Alt-Text). */
.ih-hero__name-img {
  display: block; width: min(100%, 700px); height: auto;
  filter: drop-shadow(0 2px 22px rgba(36,46,40,.38));
}
/* Unterzeile + Knöpfe setzen schon ein, während die letzten Buchstaben noch „geschrieben"
   werden (vorher 1 s Stillstand, Knopf erst nach 2,6 s lesbar — jetzt ≈ 1,5 s) */
.ih-hero__sub {
  font-family: var(--f-display); font-weight: 500; font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  max-width: 22ch; margin-bottom: 1.8rem; color: var(--c-on-video);
  opacity: 0; animation: ih-up var(--t-3) var(--ease-out) 1.05s forwards;
}
html[lang="en"] .ih-hero__sub { max-width: 26ch; }   /* EN-Zeile ist länger: „newly renovated" bleibt zusammen */
.ih-hero__ctas { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; opacity: 0; animation: ih-up var(--t-3) var(--ease-out) 1.2s forwards; }
/* Leichter Schatten hinter den kleinen Hero-Texten (Video kann hell werden) */
.ih-hero__eyebrow, .ih-hero__sub, .ih-hero__ctas .ih-link-underline { text-shadow: 0 1px 14px rgba(20,28,23,.5); }
/* Pfeil ohne transform mittig (sprang sonst bei 3 s um 13 px, weil ih-up das
   translateX(-50%) überschrieb; bei reduced-motion stand er dauerhaft daneben) */
.ih-hero__cue {
  position: absolute; left: 0; right: 0; bottom: 1.4rem; z-index: 2; width: 26px; margin-inline: auto;
  color: var(--c-on-video); opacity: 0;
  animation: ih-up var(--t-3) var(--ease-out) 1.6s forwards, ih-bob 2.4s ease-in-out 2.4s infinite;
}
.ih-hero__cue svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2; fill: none; }

@keyframes ih-write { to { clip-path: inset(-40% 0 -16% 0); } }
@keyframes ih-up { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes ih-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------- Eckdaten-Band ---------- */
.ih-band { background: var(--c-bg-soft); border-block: 1px solid var(--c-line); }
.ih-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ih-band__item { padding: clamp(1.8rem, 4vw, 3rem) 1rem; text-align: center; border-left: 1px solid var(--c-line); }
.ih-band__item:first-child { border-left: 0; }
.ih-band__num { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--c-sage-dark); line-height: 1; }
/* „m²" klein neben der Zahl, nicht versal (das Label darunter ist versal gesetzt) */
.ih-band__unit { margin-left: .1em; font-size: .46em; font-weight: 700; letter-spacing: 0; text-transform: none; }
.ih-band__label { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-soft); margin-top: .5rem; }
@media (max-width: 620px) {
  .ih-band__grid { grid-template-columns: repeat(2, 1fr); }
  .ih-band__item:nth-child(3) { border-left: 0; }
  .ih-band__item:nth-child(n+3) { border-top: 1px solid var(--c-line); }
}

/* ---------- Intro ---------- */
.ih-intro { padding-block: var(--pad-section); }
.ih-intro__eyebrow { font-weight: 600; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-sage-dark); }
.ih-intro h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: .6rem 0 1.1rem; max-width: 20ch; }
.ih-intro p { color: var(--c-ink-soft); max-width: 60ch; font-size: 1.1rem; }
/* „Willkommen" wie alle anderen Kicker (die p-Regel darüber war spezifischer: 17,6 px grau) */
.ih-intro .ih-intro__eyebrow { font-size: .8rem; color: var(--c-sage-dark); max-width: none; }

/* ============================================================
   SEKTIONEN (ab „Das Haus") — gemeinsame Bausteine
   ============================================================ */

/* ---------- Section-Grundgerüst ---------- */
.ih-section, .ih-intro, [id] { scroll-margin-top: calc(var(--header-h) + 12px); }
.ih-section { padding-block: var(--pad-section); }
.ih-section--soft { background: var(--c-bg-soft); }
.ih-section--warm { background: var(--c-bg-warm); }
.ih-section--dark { background: var(--c-bg-dark); color: var(--c-on-video); }
.ih-section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.ih-eyebrow {
  font-weight: 600; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-sage-dark); margin-bottom: .7rem;
}
.ih-section--dark .ih-eyebrow { color: var(--c-sage-mist); }
.ih-h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); max-width: 22ch; }
.ih-h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.18rem; }
.ih-lead { color: var(--c-ink-soft); max-width: 62ch; font-size: 1.1rem; margin-top: 1rem; }
.ih-section--dark .ih-lead { color: rgba(255,253,248,.82); }
.ih-section__head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }

/* Scroll-Reveal (per IntersectionObserver -> .is-in) */
.ih-reveal { opacity: 0; transform: translateY(var(--rise-lg)); transition: opacity var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out); }
.ih-reveal.is-in { opacity: 1; transform: none; }
.ih-reveal[data-delay="1"] { transition-delay: .08s; }
.ih-reveal[data-delay="2"] { transition-delay: .16s; }
.ih-reveal[data-delay="3"] { transition-delay: .24s; }
.ih-reveal[data-delay="4"] { transition-delay: .32s; }
.ih-reveal[data-delay="5"] { transition-delay: .40s; }

/* ---------- Galerie: Der Fototisch (Stapel & Fächer) ----------
   Fünf beschriftete Fotostapel statt Filter-Pillen; Klick fächert die
   Kategorie ins Album-Raster (FLIP/WAAPI in main.js). Grid mit festen
   Seitenverhältnissen statt columns-Masonry — behebt den Lazy-Load-Bug
   (leere Spalte unten rechts). */
.ih-section--tisch { background: var(--c-bg-warm); }

.ih-tisch__stapeln { display: flex; flex-wrap: wrap; gap: clamp(1.1rem, 2.6vw, 2rem); align-items: flex-start; justify-content: center; }
.ih-stapel {
  flex: 1 1 150px; max-width: 224px; padding: .5rem .2rem .6rem;
  border: 0; background: transparent; cursor: pointer; text-align: center;
  border-radius: var(--radius); font-family: var(--f-sans);
}
.ih-stapel__deck { position: relative; display: block; transform: rotate(var(--tilt, 0deg)); transition: transform var(--t-2) var(--ease-out); }
.ih-stapel__blatt {
  position: absolute; inset: 0; border-radius: 6px; background: #FFFDF8;
  border: 1px solid var(--c-line); box-shadow: 0 10px 22px -16px rgba(46,58,51,.4);
  transition: transform var(--t-2) var(--ease-out);
}
.ih-stapel__blatt--a { transform: rotate(-4.5deg) translate(-3px, 4px); }
.ih-stapel__blatt--b { transform: rotate(3deg) translate(4px, -2px); }
.ih-stapel__abzug {
  position: relative; display: block; aspect-ratio: 3 / 2; padding: 6px;
  background: #fff; border-radius: 6px; box-shadow: 0 16px 30px -20px rgba(46,58,51,.5);
}
.ih-stapel__abzug img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.ih-stapel__etikett {
  display: block; margin-top: .7rem; font-family: var(--f-script); font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.1; color: var(--c-sage-dark);
  transform: rotate(-2deg);
}
.ih-stapel__anzahl { display: block; margin-top: .15rem; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--c-muted); }
@media (hover: hover) {
  .ih-stapel:hover .ih-stapel__deck { transform: rotate(var(--tilt, 0deg)) translateY(-6px); }
  .ih-stapel:hover .ih-stapel__blatt--a { transform: rotate(-6.5deg) translate(-5px, 5px); }
  .ih-stapel:hover .ih-stapel__blatt--b { transform: rotate(4.5deg) translate(6px, -3px); }
}
@media (max-width: 640px) {
  .ih-galerie:not(.is-open) .ih-tisch__stapeln { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1rem; }
  .ih-galerie:not(.is-open) .ih-stapel { max-width: none; }
  .ih-galerie:not(.is-open) .ih-stapel:last-child { grid-column: 1 / -1; width: min(52%, 220px); margin-inline: auto; }
}

/* Aufgeschlagen: die übrigen Stapel docken als Mini-Leiste an.
   Gedimmt wird nur das Foto-Deck, nicht das Etikett (Kontrast, WCAG AA) */
.ih-galerie.is-open .ih-tisch__stapeln { flex-wrap: nowrap; justify-content: flex-start; gap: 1rem; overflow-x: auto; padding: .3rem .2rem .5rem; scrollbar-width: thin; }
/* Während der Stapel-FLIP-Flüge darf die Leiste nicht clippen (main.js setzt .is-flug) */
.ih-galerie.is-flug .ih-tisch__stapeln { overflow: visible; }
.ih-galerie.is-open .ih-stapel { flex: 0 0 auto; width: 96px; max-width: none; padding: .2rem .1rem .3rem; }
.ih-galerie.is-open .ih-stapel .ih-stapel__deck { opacity: .72; transition: transform var(--t-2) var(--ease-out), opacity var(--t-1) var(--ease-out); }
.ih-galerie.is-open .ih-stapel:hover .ih-stapel__deck,
.ih-galerie.is-open .ih-stapel:focus-visible .ih-stapel__deck,
.ih-galerie.is-open .ih-stapel.is-active .ih-stapel__deck { opacity: 1; }
.ih-galerie.is-open .ih-stapel__blatt--b { display: none; }
.ih-galerie.is-open .ih-stapel__etikett { font-size: 1.2rem; margin-top: .45rem; }
.ih-galerie.is-open .ih-stapel__anzahl { display: none; }
.ih-galerie.is-open .ih-stapel.is-active .ih-stapel__abzug { outline: 2px solid var(--c-sage-dark); outline-offset: 2px; }

/* Kopfzeile des offenen Albums */
.ih-album__bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; margin: 1.7rem 0 1.2rem; }
.ih-album__kopf { display: flex; align-items: baseline; gap: .7rem; }
.ih-album__titel { font-family: var(--f-script); font-weight: 400; font-size: clamp(1.6rem, 2.9vw, 2.05rem); line-height: 1.1; letter-spacing: 0; color: var(--c-sage-dark); }
.ih-album__anzahl { font-size: .9rem; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.ih-album__zurueck {
  font-family: var(--f-sans); font-size: .92rem; font-weight: 600; cursor: pointer;
  color: var(--c-ink-soft); background: transparent; border: 1.5px solid var(--c-line);
  border-radius: 999px; padding: .5em 1.1em; transition: color var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out);
}
.ih-album__zurueck:hover { border-color: var(--c-sage); color: var(--c-sage-dark); }

/* Album-Raster: erstes Foto der Kategorie groß (is-lead), Rest 3:2-Kacheln */
.ih-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ih-gallery__item {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden; background: var(--c-surface-2);
  aspect-ratio: 3 / 2;
}
.ih-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-2) var(--ease-out), filter var(--t-2) var(--ease-out); }
.ih-gallery__item:hover img { transform: scale(1.04); filter: brightness(1.03); }
.ih-gallery__item.is-hidden { display: none; }
.ih-gallery__item.is-lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* is-breit füllt die letzte Zeile auf, damit unten rechts keine Lücke klafft (main.js).
   Höhe = Zeilenhöhe der 3:2-Nachbarin (festes 3:1 war wegen der Lücke 4,7 px höher -> Unterkanten
   nicht bündig); das Bild liegt absolut, sonst bläht seine eigene Höhe die Zeile auf.
   is-voll: bei 4 Fotos steht das letzte allein in der Zeile -> volle Breite, eigenes 3:1 */
.ih-gallery__item.is-breit { grid-column: span 2; aspect-ratio: auto; }
.ih-gallery__item.is-breit img { position: absolute; inset: 0; }
.ih-gallery__item.is-voll { grid-column: 1 / -1; aspect-ratio: 3 / 1; }
.ih-gallery__item.is-arriving { opacity: 0; }
@media (max-width: 640px) {
  .ih-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .ih-gallery__item.is-lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .ih-gallery__item.is-breit, .ih-gallery__item.is-voll { grid-column: auto; aspect-ratio: 3 / 2; }
  /* 2 Spalten: bleibt nach dem Leitfoto eine ungerade Zahl, füllt das letzte Foto die Zeile (main.js) */
  .ih-gallery__item.is-breit-m { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}

/* Fliegender Klon des Deckfotos (FLIP, main.js) — absolut im Dokument,
   damit er beim Mitscrollen nicht von den Zielkoordinaten wegdriftet */
.ih-galerie__klon { position: absolute; z-index: 40; overflow: hidden; border-radius: var(--radius); pointer-events: none; }
.ih-galerie__klon img { width: 100%; height: 100%; object-fit: cover; }

/* Sichtbarkeits-Zustände: mit JS ist das Raster erst nach dem Aufschlagen da */
html.has-js .ih-galerie:not(.is-open) .ih-album__bar,
html.has-js .ih-galerie:not(.is-open) .ih-gallery__grid { display: none; }
.ih-galerie[data-open="all"] .ih-galerie__alle { display: none; }
.ih-galerie__alle { margin-top: 1.5rem; text-align: center; }
.ih-galerie__allebtn {
  font-family: var(--f-sans); font-size: .95rem; font-weight: 600; cursor: pointer;
  color: var(--c-sage-dark); background: transparent; border: 0;
  border-bottom: 1.5px solid var(--c-sage-mist); padding: 0 0 2px;
}
.ih-galerie__allebtn:hover { border-color: var(--c-sage-dark); }
/* Ohne JS: Stapel/Bar/Knöpfe weg, alle Fotos ruhig im Raster (erstes groß) */
html:not(.has-js) .ih-tisch,
html:not(.has-js) .ih-album__bar,
html:not(.has-js) .ih-galerie__alle { display: none; }
html:not(.has-js) .ih-gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* Lightbox: blendet weich auf/zu (vorher harter Schnitt), das Foto wächst leicht an;
   beim Blättern blendet es aus, bis das nächste geladen ist (.is-wechsel, main.js).
   Geschlossen: unsichtbar + nicht bedienbar (visibility), aber messbar (für sizes). */
.ih-lightbox {
  position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(24,30,26,.92); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-1) var(--ease-in), visibility 0s linear var(--t-1);
}
.ih-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-2) var(--ease-out), visibility 0s; }
.ih-lightbox__img {
  max-width: 100%; max-height: 86vh; border-radius: var(--radius); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8);
  transform: scale(.97);
  transition: transform var(--t-3) var(--ease-out), opacity var(--t-2) var(--ease-out);
}
.ih-lightbox.is-open .ih-lightbox__img { transform: none; }
.ih-lightbox__img.is-wechsel { opacity: 0; transition: transform var(--t-3) var(--ease-out), opacity var(--t-1) var(--ease-in); }
.ih-lightbox__cap { position: absolute; left: 0; right: 0; bottom: calc(clamp(.6rem, 3vw, 1.6rem) + env(safe-area-inset-bottom, 0px)); text-align: center; color: rgba(255,255,255,.85); font-size: .95rem; }
/* Bildzähler „3 / 8" (legt main.js an) — oben links, auf Höhe des Schließen-Knopfs */
.ih-lightbox__count {
  position: absolute; left: calc(clamp(.8rem, 3vw, 1.6rem) + env(safe-area-inset-left, 0px));
  top: calc(clamp(.8rem, 3vw, 1.6rem) + env(safe-area-inset-top, 0px));
  height: 44px; display: flex; align-items: center; margin: 0;
  color: rgba(255,255,255,.78); font-size: .9rem; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ih-lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background-color var(--t-1) var(--ease-out);
}
.ih-lightbox__btn:hover { background: rgba(255,255,255,.25); }
.ih-lightbox__prev { left: calc(clamp(.5rem, 3vw, 2rem) + env(safe-area-inset-left, 0px)); }
.ih-lightbox__next { right: calc(clamp(.5rem, 3vw, 2rem) + env(safe-area-inset-right, 0px)); }
.ih-lightbox__close {
  top: calc(clamp(.8rem, 3vw, 1.6rem) + env(safe-area-inset-top, 0px));
  right: calc(clamp(.8rem, 3vw, 1.6rem) + env(safe-area-inset-right, 0px));
  transform: none; width: 44px; height: 44px; font-size: 1.3rem;
}
@media (max-width: 640px) {
  .ih-lightbox__prev { left: calc(.4rem + env(safe-area-inset-left, 0px)); }
  .ih-lightbox__next { right: calc(.4rem + env(safe-area-inset-right, 0px)); }
  .ih-lightbox__btn { width: 48px; height: 48px; }
}

/* ---------- Lage & Umgebung ---------- */
.ih-lage__video {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16 / 9; margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
  box-shadow: 0 40px 80px -50px rgba(46,58,51,.7);
}
.ih-lage__video video { width: 100%; height: 100%; object-fit: cover; }
/* Schleier nur sichtbar, wenn ein Beat eingeblendet ist (sonst Video brillant) */
.ih-lage__video::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 100% 85% at center, rgba(18,26,20,.74), rgba(18,26,20,.32) 55%, transparent 85%);
  opacity: 0; transition: opacity var(--t-3) var(--ease-out);
}
.ih-lage__video.beat-active::after { opacity: 1; }
/* Ohne JS: das Poster setzt sonst main.js (data-poster) -> Standbild als Hintergrund, das leere
   Video samt erzwungener Steuerleiste aus. 100 % auto oben = genau die 16:9-Videofläche (auch in
   der reduzierten Ansicht, wo die Beats als Liste darunter stehen) */
html:not(.has-js) .ih-lage__video { background: url("../assets/images/umgebung-poster.webp") center top / 100% auto no-repeat; }
html:not(.has-js) .ih-lage__vid { visibility: hidden; }

/* Erzähl-Beats über dem Video (A6 · Editorial-Serif · Line-Mask-Reveal) */
.ih-lage__beats { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; place-items: center; padding: clamp(1.2rem, 5vw, 3.5rem); }
/* max-width in rem statt ch: ch rechnete mit der 16-px-Grundschrift -> die 67-px-Zeile brach Wort für Wort um */
.ih-lage__beat { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: .75rem; max-width: min(92%, 36rem); text-align: center; }
.ih-beat__kicker {
  font-family: var(--f-sans); font-weight: 600; font-size: clamp(.8rem, 1.5vw, .9rem);
  text-transform: uppercase; letter-spacing: .2em; color: var(--c-on-video);
  text-shadow: 0 1px 18px rgba(18,26,20,.55);
  /* eigene Glas-Pille wie das 360°-Etikett: das Video ist hinter dem kleinen Wort oft hell */
  padding: .5em 1em .5em 1.2em; border-radius: 999px;
  background: rgba(18,26,20,.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-3) var(--ease-out) .06s, transform var(--t-3) var(--ease-out) .06s;
}
.ih-beat__line { display: block; padding-block: .04em .14em; }
.ih-beat__inner {
  display: block; font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(1.9rem, 6vw, 4.2rem); line-height: 1.08; letter-spacing: 0;
  color: var(--c-on-video); text-shadow: 0 2px 42px rgba(18,26,20,.6); text-wrap: balance;
  opacity: 0; transform: translateY(var(--rise));
  transition: opacity var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out);
}
.ih-beat__inner em { font-style: italic; color: var(--c-sage-mist); }
.ih-lage__beat.is-on .ih-beat__kicker { opacity: .95; transform: none; }
.ih-lage__beat.is-on .ih-beat__inner { opacity: 1; transform: none; }
.ih-lage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ih-dist { list-style: none; padding: 0; display: grid; gap: 0; }
.ih-dist li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--c-line); }
.ih-dist li:last-child { border-bottom: 0; }
.ih-dist__place { font-weight: 500; color: var(--c-ink); }
.ih-dist__val { color: var(--c-sage-dark); font-weight: 600; white-space: nowrap; }
.ih-incl { display: grid; gap: 1rem; }
.ih-incl__card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.3rem 1.4rem; }
.ih-incl__card .ih-h3 { margin-bottom: .4rem; display: flex; align-items: center; gap: .5rem; }
.ih-incl__card .ih-h3 svg { width: 20px; height: 20px; flex: none; color: var(--c-sage-dark); stroke: currentColor; stroke-width: 1.8; fill: none; }
.ih-incl__card p { color: var(--c-ink-soft); font-size: .96rem; }
@media (max-width: 820px) { .ih-lage__grid { grid-template-columns: 1fr; } }

/* ---- 360°-Rundblick (Pannellum-Kugelpanorama) ---- */
.ih-pano { margin: clamp(2.2rem, 5vw, 3.5rem) 0 0; }  /* steht jetzt UNTER dem Text-Grid -> Abstand nach oben statt unten */
.ih-pano__stage {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--c-bg-dark);
  box-shadow: 0 40px 80px -50px rgba(46,58,51,.7);
}
.ih-pano__preview { position: absolute; inset: 0; }
.ih-pano__preview img,
.ih-pano__still { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Vorschaubild gleitet ganz langsam seitwärts — deutet die 360°-Drehung an.
   Basis-Zoom 1.045 deckt den Versatz, damit nie ein Rand aufreißt. */
.ih-pano__preview img { animation: ih-pano-drift 22s ease-in-out infinite alternate; }
@keyframes ih-pano-drift {
  from { transform: scale(1.045) translateX(-.7%); }
  to   { transform: scale(1.045) translateX(.7%); }
}
/* Feine Innenlinie wie ein Passepartout — liegt über dem Bild (z-index nötig,
   sonst rutscht das ::before in der Malreihenfolge UNTER das img) */
.ih-pano__preview::before {
  content: ""; position: absolute; inset: 12px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: calc(var(--radius-lg) - 10px);
}
/* Nur Rand-Vignette + leichte Verankerung unten — die Bildmitte bleibt klar */
.ih-pano__preview::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(16,24,18,.42), rgba(16,24,18,0) 36%),
    radial-gradient(ellipse at center, rgba(16,24,18,0) 55%, rgba(16,24,18,.30) 100%);
}
.ih-pano__badge {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: var(--f-display); font-weight: 600; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  color: var(--c-on-video); padding: .55em 1.05em; border-radius: 999px;
  background: rgba(20,28,22,.38); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ih-pano__btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  width: max-content;  /* absolut + left:50% lässt sonst nur die halbe Bühne zu -> Label bräche um */
  cursor: pointer; background: none; border: 0; padding: 1rem;
  color: var(--c-on-video);
}
.ih-pano__ring {
  display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%;
  background: rgba(20,28,22,.34); border: 1.5px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px -18px rgba(0,0,0,.65);
  transition: transform var(--t-2) var(--ease-out), background var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out);
}
.ih-pano__ring svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ih-pano__label {
  font-family: var(--f-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  text-shadow: 0 1px 18px rgba(0,0,0,.55);
  /* eigene Glasfläche: stand vorher frei auf dem hellen Himmel */
  padding: .6em 1.1em; border-radius: 999px;
  background: rgba(20,28,22,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ih-pano__btn:hover .ih-pano__ring { transform: scale(1.08); background: rgba(255,255,255,.22); border-color: #fff; }
.ih-pano__btn:focus-visible { outline: 3px solid var(--c-sage-mist); outline-offset: 3px; border-radius: 16px; }
.ih-pano__cap { margin-top: .9rem; text-align: center; font-size: .92rem; color: var(--c-muted); }
/* Pannellum baut seinen Canvas in die Bühne — Rundungen/Hintergrund übernehmen */
.ih-pano__stage .pnlm-container { border-radius: var(--radius-lg); background: var(--c-bg-dark); }
/* Ladeanzeige: Text + Balken reichen; die MB-Zahlen des Viewers wären englisch formatiert („0.04 / 1.55 MB“) */
#pano-360 .pnlm-lmsg { display: none; }
#pano-360 .pnlm-load-box { height: 92px; margin-top: -46px; }   /* Box ohne die Zahlenzeile wieder ausgewogen */
@media (max-width: 640px) {
  .ih-pano__stage { aspect-ratio: 4 / 3; }
  .ih-pano__preview::before { inset: 9px; border-radius: calc(var(--radius-lg) - 7px); }
  .ih-pano__badge { top: 12px; left: 13px; font-size: .68rem; }
  .ih-pano__ring { width: 66px; height: 66px; }
  .ih-pano__ring svg { width: 26px; height: 26px; }
  .ih-pano__label { font-size: .74rem; letter-spacing: .13em; }
}
@media (prefers-reduced-motion: reduce) { .ih-pano__preview img { animation: none; } }

/* Lage-Beats: NUR bei reduzierter Bewegung ruhige Liste UNTER dem Video (Barrierefreiheit;
   normales Handy bekommt jetzt wie der Desktop den eingeblendeten Text AUF dem Video). */
@media (prefers-reduced-motion: reduce) {
  .ih-lage__video { aspect-ratio: auto; overflow: visible; box-shadow: none; background: transparent; }
  .ih-lage__video video { aspect-ratio: 16 / 9; height: auto; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -45px rgba(46,58,51,.7); }
  .ih-lage__video::after { display: none; }
  .ih-lage__beats { position: static; inset: auto; display: flex; flex-direction: column; align-items: stretch; gap: 1.15rem; padding: 1.6rem .15rem 0; }
  .ih-lage__beat { grid-area: auto; position: static; max-width: none; align-items: flex-start; text-align: left; gap: .25rem; }
  .ih-beat__line { padding-block: 0; }
  .ih-beat__inner { opacity: 1; transform: none; color: var(--c-ink); text-shadow: none;
    font-size: clamp(1.5rem, 6.4vw, 2.1rem); line-height: 1.12; }
  .ih-beat__inner em { color: var(--c-sage-dark); }
  .ih-beat__kicker { opacity: 1; transform: none; color: var(--c-sage-dark); text-shadow: none; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Für wen: Foto-Medaillons ----------
   Sechs Karten, alle Texte sofort lesbar. Jede Karte zeigt ihr Foto als Miniatur im runden
   Fenster (feiner Ring wie beim „Welcome"-Kranz an der Haustür). Aufblühen (.is-on): das
   Fenster öffnet sich (clip-path-Kreis wächst), das Foto wächst aus dem Kreis zur ganzen
   Karte, die Schrift wird weiß. Das Foto wächst schneller als der Kreis (und schrumpft
   langsamer) -> im Fenster ist immer Bild, nie Kartengrund.
   main.js (bindWer) misst --mx/--my (Kreismitte), --r0/--r1 (Kreis zu/offen) und --s0
   (Miniatur-Größe) und setzt .is-on: Maus = Karte unter dem Zeiger, Handy = Karte in der
   Bildschirmmitte. Die Werte hier sind nur der Zustand ohne JS (dann öffnet reines Hovern).
   --fx = Bildausschnitt (object-position), --ux/--uy = was im Kreis zu sehen ist (Anteil der Karte). */
.ih-wer {
  list-style: none; margin: 0; padding: 0 0 3rem;     /* unten Platz für die versetzte Mittelspalte */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem);
}
.ih-wer > li { display: flex; }
.ih-wer > li:nth-child(3n + 2) { translate: 0 3rem; }   /* Mittelspalte versetzt: wirkt gesetzt statt gerastert */
.ih-wer__karte {
  --pad: clamp(1.3rem, 2vw, 1.65rem); --d: clamp(8.75rem, 12.5vw, 10.25rem);
  --r0: calc(var(--d) / 2); --mx: calc(var(--pad) + var(--r0)); --my: calc(var(--pad) + var(--r0));
  --r1: 150%; --s0: .55;
  position: relative; isolation: isolate; overflow: hidden; flex: 1;
  display: flex; flex-direction: column; min-height: 28rem;
  padding: var(--pad); border-radius: var(--radius-lg);
  background: var(--c-surface); border: 1px solid rgba(46, 58, 51, .08);
  box-shadow: 0 1px 0 rgba(46, 58, 51, .03), 0 26px 50px -38px rgba(46, 58, 51, .42);
  transition: box-shadow var(--t-3) var(--ease-out);
}
/* Foto: füllt die Karte, ist aber per Kreis-Maske nur im Fenster zu sehen */
.ih-wer__bild {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--c-bg-soft);
  clip-path: circle(var(--r0) at var(--mx) var(--my));
  transition: clip-path .6s cubic-bezier(.3, 0, .15, 1);              /* zu: zügig */
}
.ih-wer__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--fx, 50%) 50%;
  /* Miniatur: Ausschnitt um (--ux, --uy) verkleinert genau ins Fenster geschoben */
  transform-origin: calc(var(--ux, .5) * 100%) calc(var(--uy, .5) * 100%);
  transform: translate(calc(var(--mx) - var(--ux, .5) * 100%), calc(var(--my) - var(--uy, .5) * 100%)) scale(var(--s0));
  transition: transform .85s cubic-bezier(.45, .05, .2, 1);
}
/* Schleier für die weiße Schrift (liegt im Fenster, wird mit ihm aufgedeckt) */
.ih-wer__bild::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(to top, rgba(17, 23, 19, .86), rgba(17, 23, 19, .55) 38%, rgba(17, 23, 19, .12) 70%, rgba(17, 23, 19, 0));
  transition: opacity .3s var(--ease-in);
}
/* Feiner Ring mit Abstand ums Fenster (Passepartout); der weiße Innenrand ist auf weißer Karte unsichtbar */
.ih-wer__ring {
  position: absolute; z-index: 1; left: var(--pad); top: var(--pad); width: var(--d); height: var(--d);
  border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 7px var(--c-surface), 0 0 0 8px rgba(79, 114, 72, .32);
  transition: opacity .35s var(--ease-out) .42s, transform .55s var(--ease-out) .3s;   /* erst wenn das Fenster fast zu ist */
}
.ih-wer__nr {
  position: absolute; z-index: 2; top: var(--pad); right: var(--pad);
  font-family: var(--f-display); font-weight: 600; font-size: .85rem; letter-spacing: .08em; line-height: 1;
  color: var(--c-sage-dark);
}
.ih-wer__text { position: relative; z-index: 2; margin-top: auto; padding-top: 1.6rem; display: flex; flex-direction: column; }
.ih-wer__tag {
  order: -1; margin: 0 0 .15rem; text-wrap: balance;   /* passt sie nicht in eine Zeile: zwei gleich lange */
  font-family: var(--f-script); font-weight: 400; line-height: 1.15;
  font-size: clamp(1.45rem, 1rem + .65vw, 1.7rem);   /* Calligraffitti: x-Höhe doppelt so groß wie bei Sacramento */
  color: var(--c-sage-dark); transform: rotate(-2deg); transform-origin: 0 60%;
}
.ih-wer__name { margin: 0; font-size: clamp(1.35rem, 1.12rem + .65vw, 1.62rem); line-height: 1.14; color: var(--c-ink); }
.ih-wer__info { margin: .65rem 0 0; max-width: 36ch; font-size: .97rem; line-height: 1.55; color: var(--c-ink-soft); }
.ih-wer__nr, .ih-wer__tag, .ih-wer__name, .ih-wer__info { transition: color .3s var(--ease-in) .12s, text-shadow .3s var(--ease-in) .12s; }

/* ----- Aufgeblüht ----- */
.ih-wer__karte.is-on { box-shadow: 0 1px 0 rgba(46, 58, 51, .03), 0 42px 70px -40px rgba(46, 58, 51, .62); }
.ih-wer__karte.is-on .ih-wer__bild { clip-path: circle(var(--r1) at var(--mx) var(--my)); transition: clip-path .95s cubic-bezier(.55, 0, .25, 1); }
.ih-wer__karte.is-on .ih-wer__bild img { transform: translate(0, 0) scale(1.03); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.ih-wer__karte.is-on .ih-wer__bild::after { opacity: 1; transition: opacity .6s var(--ease-out) .2s; }
.ih-wer__karte.is-on .ih-wer__ring { opacity: 0; transform: scale(1.25); transition: opacity .2s var(--ease-out), transform .6s var(--ease-out); }
.ih-wer__karte.is-on .ih-wer__nr   { color: rgba(255, 253, 248, .9); transition: color .3s var(--ease-out) .12s; }
.ih-wer__karte.is-on .ih-wer__tag  { color: var(--c-sage-mist); transition: color .35s var(--ease-out) .38s; }
.ih-wer__karte.is-on .ih-wer__name { color: var(--c-on-video); text-shadow: 0 1px 16px rgba(0, 0, 0, .28); transition: color .35s var(--ease-out) .42s, text-shadow .35s var(--ease-out) .42s; }
.ih-wer__karte.is-on .ih-wer__info { color: rgba(255, 253, 248, .88); text-shadow: 0 1px 12px rgba(0, 0, 0, .3); transition: color .35s var(--ease-out) .46s, text-shadow .35s var(--ease-out) .46s; }
/* Ohne JS: Maus darüber öffnet trotzdem (mit JS bleibt die zuletzt gezeigte Karte offen) */
@media (hover: hover) {
  .ih-wer:not(.is-js) .ih-wer__karte:hover .ih-wer__bild { clip-path: circle(150% at var(--mx) var(--my)); transition: clip-path .95s cubic-bezier(.55, 0, .25, 1); }
  .ih-wer:not(.is-js) .ih-wer__karte:hover .ih-wer__bild img { transform: translate(0, 0) scale(1.03); transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
  .ih-wer:not(.is-js) .ih-wer__karte:hover .ih-wer__bild::after { opacity: 1; }
  .ih-wer:not(.is-js) .ih-wer__karte:hover .ih-wer__ring { opacity: 0; }
  .ih-wer:not(.is-js) .ih-wer__karte:hover :is(.ih-wer__nr, .ih-wer__name, .ih-wer__info) { color: var(--c-on-video); }
  .ih-wer:not(.is-js) .ih-wer__karte:hover .ih-wer__tag { color: var(--c-sage-mist); }
}

/* Auftritt: die Fenster öffnen sich nacheinander, wenn die Karten hereinkommen */
.ih-wer.is-js > li:not(.is-in) .ih-wer__bild { clip-path: circle(0px at var(--mx) var(--my)); }
.ih-wer.is-js > li:not(.is-in) .ih-wer__ring { opacity: 0; transform: scale(.6); }
.ih-wer.is-js > li.is-in .ih-wer__karte:not(.is-on) .ih-wer__bild { transition: clip-path .9s var(--ease-out) var(--auf, .25s); }
.ih-wer.is-js > li.is-in .ih-wer__karte:not(.is-on) .ih-wer__ring { transition: opacity .6s var(--ease-out) var(--auf, .25s), transform .9s var(--ease-out) var(--auf, .25s); }
.ih-wer.is-js.is-gesehen > li.is-in .ih-wer__karte:not(.is-on) .ih-wer__bild { transition: clip-path .6s cubic-bezier(.3, 0, .15, 1); }
.ih-wer.is-js.is-gesehen > li.is-in .ih-wer__karte:not(.is-on) .ih-wer__ring { transition: opacity .35s var(--ease-out) .42s, transform .55s var(--ease-out) .3s; }
.ih-wer > li:nth-child(2) { --auf: .33s; }
.ih-wer > li:nth-child(3) { --auf: .41s; }
.ih-wer > li:nth-child(4) { --auf: .49s; }
.ih-wer > li:nth-child(5) { --auf: .57s; }
.ih-wer > li:nth-child(6) { --auf: .65s; }

/* Tablet: zwei Spalten, rechte Spalte versetzt */
@media (max-width: 1023px) {
  .ih-wer { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 2.5rem; }
  .ih-wer > li:nth-child(3n + 2) { translate: none; }
  .ih-wer > li:nth-child(2n) { translate: 0 2.5rem; }
  .ih-wer__karte { min-height: 26rem; }
}
/* Handy: Karten untereinander, Fenster links neben dem Text, kompakt */
@media (max-width: 639px) {
  .ih-wer { grid-template-columns: minmax(0, 1fr); gap: .85rem; padding-bottom: 0; }
  .ih-wer > li:nth-child(2n) { translate: none; }
  .ih-wer__karte {
    --pad: 1.1rem; --d: 5.6rem;
    min-height: calc(var(--d) + 2 * var(--pad)); padding-left: calc(var(--pad) + var(--d) + 1.15rem);
  }
  .ih-wer__text { margin-top: 0; padding-top: 0; }
  .ih-wer__tag { font-size: 1.45rem; line-height: 1.05; padding: .1rem 0 .2rem; }
  .ih-wer__name { font-size: 1.28rem; }
  /* Nummer unter das Fenster: die Notiz hat oben die volle Breite */
  .ih-wer__nr { top: calc(var(--pad) + var(--d) + .75rem); right: auto; left: var(--pad); width: var(--d); text-align: center; }
  .ih-wer__info { margin-top: .45rem; font-size: .94rem; }
  .ih-wer__bild::after { background: linear-gradient(90deg, rgba(17, 23, 19, .3), rgba(17, 23, 19, .64) 45%, rgba(17, 23, 19, .72)); }
}

@media (prefers-reduced-motion: reduce) {
  .ih-wer__karte, .ih-wer__bild, .ih-wer__bild img, .ih-wer__bild::after, .ih-wer__ring,
  .ih-wer__nr, .ih-wer__tag, .ih-wer__name, .ih-wer__info,
  .ih-wer__karte.is-on .ih-wer__bild, .ih-wer__karte.is-on .ih-wer__bild img, .ih-wer__karte.is-on .ih-wer__bild::after,
  .ih-wer__karte.is-on .ih-wer__ring, .ih-wer__karte.is-on :is(.ih-wer__nr, .ih-wer__tag, .ih-wer__name, .ih-wer__info),
  .ih-wer.is-js > li.is-in .ih-wer__karte .ih-wer__bild, .ih-wer.is-js > li.is-in .ih-wer__karte .ih-wer__ring { transition: none !important; }
}

/* ---------- Aktivitäten (Saison-Split „Magazin-Drift") ---------- */
/* Saison-Bühne: aktive Saison groß, inaktive als schmaler Foto-Streifen.
   --inhalt-verz: Inhalt + Kacheln der neuen Saison kommen erst, wenn das Panel fast
   seine Breite hat (sonst ordnen sich die Kacheln während des Aufziehens um). */
.ih-season {
  --inhalt-verz: .5s;
  display: flex; align-items: stretch; gap: clamp(.4rem, 1vw, .9rem);
  height: clamp(440px, 66vh, 660px);
  margin-bottom: clamp(1.2rem, 2.5vw, 2rem);
  overflow-x: clip; /* skalierte/driftende Saison-Fotos bleiben am Rand (kein Querscrollen) */
}
.ih-season__panel {
  position: relative; flex: 1 1 0%; min-width: clamp(56px, 8vw, 92px); overflow: hidden;
  border-radius: var(--radius-lg); background: var(--c-surface-2); color: var(--c-on-video);
  box-shadow: 0 24px 50px -40px rgba(46,58,51,.5);
  transition: flex-grow var(--t-4) var(--ease-move);
}
.ih-season__panel.is-active { flex-grow: 7; }
.ih-season__panel.is-active { outline: 2px solid rgba(199,214,188,.5); outline-offset: -2px; }

.ih-season__media { position: absolute; inset: 0; }
.ih-season__media picture { display: block; width: 100%; height: 100%; }
.ih-season__media img {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.05);
  transition: transform var(--t-4) var(--ease-out), filter var(--t-3) var(--ease-out);
}
.ih-season__panel--sommer img { object-position: 50% 60%; }
.ih-season__panel--winter img { object-position: 50% 42%; }
.ih-season__panel:not(.is-active) img { filter: saturate(.94) brightness(.9); }
.ih-season__panel.is-active .ih-season__media img {
  transform: scale(1.06) translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px));
}

/* Lese-Scrim */
.ih-season__panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(20,28,23,.84) 0%, rgba(20,28,23,.44) 34%, rgba(20,28,23,.08) 64%, rgba(20,28,23,0) 100%);
  opacity: 0; transition: opacity var(--t-3) var(--ease-out);
}
.ih-season__panel.is-active::after { opacity: 1; }
/* Winterfoto ist oben hell (Wolken, Schnee): Verlauf reicht höher, sonst verschwinden Kicker + Titel im Weiß */
.ih-season__panel--winter::after {
  background: linear-gradient(to top, rgba(20,28,23,.86) 0%, rgba(20,28,23,.7) 38%, rgba(20,28,23,.62) 60%, rgba(20,28,23,.3) 80%, rgba(20,28,23,0) 100%);
}
/* Inaktiver Streifen: dunkler, damit das Saison-Label lesbar bleibt */
.ih-season__panel:not(.is-active)::after { opacity: 1; background: linear-gradient(to top, rgba(20,28,23,.62), rgba(20,28,23,.46)); }

/* Klick-Fläche (deckt das ganze Panel); die offene Saison bleibt offen -> dort kein Hand-Zeiger */
.ih-season__tab {
  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0;
  background: transparent; cursor: pointer; border-radius: inherit; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ih-season__panel.is-active .ih-season__tab { cursor: default; }
.ih-season__tab:focus-visible { outline: 3px solid var(--c-sage-mist); outline-offset: -3px; border-radius: var(--radius-lg); }

/* Vertikales Label auf dem schmalen Streifen */
.ih-season__edge {
  position: absolute; z-index: 3; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--f-display); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  letter-spacing: .02em; color: #fff; white-space: nowrap; pointer-events: none;
  text-shadow: 0 2px 16px rgba(16,22,18,.65); opacity: 0;
  transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out);
}
.ih-season__panel:not(.is-active) .ih-season__edge { opacity: 1; }
/* Startzustand (keine Saison gewählt, beide gleich groß): Label waagerecht statt am „Buchrücken" */
.ih-season:not(.has-active) .ih-season__edge {
  writing-mode: horizontal-tb;
  transform: translate(-50%, -50%);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
}
/* Während des Saison-Wechsels (main.js: .is-wechsel) ist die Beschriftung aus — sie drehte
   sich sonst schräg durchs Bild bzw. lag am Handy über den Kacheln */
.ih-season.is-wechsel .ih-season__edge { opacity: 0; transition: opacity .1s linear; }

/* Inhalt der aktiven Saison — über dem Foto. Raus schnell (--ease-in), rein nach dem Aufziehen */
.ih-season__content {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: clamp(1.3rem, 3vw, 2.4rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-1) var(--ease-in), visibility 0s linear var(--t-1);
}
.ih-season__panel.is-active .ih-season__content {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--t-2) var(--ease-out) var(--inhalt-verz), visibility 0s;
}
.ih-season__kicker {
  display: inline-block; color: var(--c-on-video); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; margin-bottom: .3rem;
  text-shadow: 0 1px 10px rgba(16,22,18,.55);
}
.ih-season__title {
  font-family: var(--f-display); font-weight: 700; color: #fff; line-height: 1.05; letter-spacing: -.01em;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: clamp(1rem, 2vw, 1.5rem);
  text-shadow: 0 2px 24px rgba(16,22,18,.55);
}
.ih-season__acts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(.6rem, 1.2vw, .9rem); max-width: 780px;
}
/* Glas-Kacheln (Links auf die offiziellen Seiten) */
.ih-season__chip {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .85rem 1rem; border-radius: 14px;
  color: inherit; text-decoration: none;
  background: rgba(22,30,25,.32);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.22);
  transition: transform var(--t-2) var(--ease-out), background-color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out);
}
/* Pfeil rechts oben = „führt auf eine externe Seite" */
.ih-season__chip::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-left: auto; margin-top: .3rem;
  background-color: rgba(255,255,255,.55);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-2) var(--ease-out), background-color var(--t-2) var(--ease-out);
}
.ih-season__chip:focus-visible { outline: 3px solid var(--c-sage-mist); outline-offset: 2px; }
.ih-season__chip svg {
  flex: none; width: 22px; height: 22px; margin-top: .1rem;
  stroke: var(--c-sage-mist); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-2) var(--ease-out);
}
.ih-season__chip h4 { font-family: var(--f-display); font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: .14rem; }
.ih-season__chip p { font-size: .85rem; line-height: 1.45; color: rgba(255,255,255,.84); }

/* Kacheln staffeln sich ein, sobald die Bühne im Blick ist (ohne Unschärfe-Filter:
   blur auf Glas mit backdrop-filter kostete auf schwachen Handys Malzeit) */
.ih-season.is-in .ih-season__panel.is-active .ih-season__chip {
  animation: ih-chip-rise var(--t-3) var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger) + var(--inhalt-verz));
}
@keyframes ih-chip-rise { from { opacity: 0; transform: translateY(var(--rise)) scale(.98); } to { opacity: 1; transform: none; } }

/* Hover/Drift nur mit echtem Zeiger */
@media (hover: hover) and (pointer: fine) {
  .ih-season__chip:hover { transform: translateY(-3px); background: rgba(22,30,25,.5); border-color: rgba(199,214,188,.6); }
  .ih-season__chip:hover svg { transform: translateY(-2px) scale(1.08); }
  .ih-season__chip:hover::after { background-color: var(--c-sage-mist); transform: translate(2px, -2px); }
  .ih-season__panel:not(.is-active):hover { flex-grow: 1.5; }
  .ih-season__panel:not(.is-active):hover img { filter: saturate(1) brightness(1); }
  .ih-season__panel:not(.is-active):hover .ih-season__edge { transform: translate(-50%, -50%) rotate(180deg) scale(1.05); }
  .ih-season:not(.has-active) .ih-season__panel:hover .ih-season__edge { transform: translate(-50%, -50%) scale(1.05); }
}

/* Mobil: aktive Saison groß oben, inaktive als flacher Streifen.
   Das offene Panel wächst mit seinem Inhalt (--inhalt-h misst main.js) — auf kleinen Handys
   war die 6. Kachel sonst nur durch Scrollen IM Panel erreichbar. */
@media (max-width: 760px) {
  .ih-season { --inhalt-verz: .2s; flex-direction: column; height: auto; gap: .6rem; }
  .ih-season__panel { flex: none; height: 84px; min-width: 0; transition: height var(--t-3) var(--ease-move); }
  .ih-season__panel.is-active {
    height: min(94vh, 724px);   /* Fallback für alte Browser */
    height: max(min(94svh, 724px), var(--inhalt-h, 0px));   /* svh: rechnet die mobile Adressleiste mit */
  }
  .ih-season__edge { writing-mode: horizontal-tb; transform: translate(-50%, -50%); }
  .ih-season__acts { grid-template-columns: 1fr; gap: .55rem; }
  .ih-season__chip { padding: .7rem .85rem; background: rgba(22,30,25,.5); }
  /* Mobil stehen Kicker + Titel oben im Foto (6 Kacheln füllen das Panel) -> gleichmäßiger Schleier */
  .ih-season__panel.is-active::after { background: linear-gradient(to top, rgba(20,28,23,.82) 0%, rgba(20,28,23,.6) 50%, rgba(20,28,23,.56) 100%); }
  .ih-season__chip p { font-size: .82rem; }
  /* Inhalt immer als Spalte (auch beim Ausblenden) — sonst rutschte er beim Wechsel um ein paar px */
  .ih-season__content { display: flex; flex-direction: column; align-items: flex-start; }
  .ih-season__acts { align-self: stretch; }
  .ih-season__panel.is-active .ih-season__content { top: 0; }
  .ih-season__panel.is-active .ih-season__kicker { margin-top: auto; }
}

/* Ohne JS: beide Saisonen untereinander, Inhalt sichtbar (sonst waren alle 12 Kacheln unsichtbar) */
html:not(.has-js) .ih-season { flex-direction: column; height: auto; }
html:not(.has-js) .ih-season__panel { flex: none; display: flex; align-items: flex-end; height: auto; min-height: 520px; }
html:not(.has-js) .ih-season__panel::after { opacity: 1; }
html:not(.has-js) .ih-season__content { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }
html:not(.has-js) .ih-season__edge { display: none; }

/* ---------- Preise & Konditionen ---------- */
.ih-prices { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ih-prices__card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.6rem); box-shadow: 0 30px 60px -45px rgba(46,58,51,.5);
}
.ih-prices__onreq { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; color: var(--c-sage-dark); margin-bottom: .4rem; }
.ih-cond { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; gap: 0; }
.ih-cond li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--c-line); }
.ih-cond li:last-child { border-bottom: 0; }
.ih-cond__k { color: var(--c-ink-soft); }
.ih-cond__v { font-weight: 600; color: var(--c-ink); text-align: right; }
@media (max-width: 820px) { .ih-prices { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.ih-faq { max-width: 800px; }
.ih-faq__item { border-bottom: 1px solid var(--c-line); }
.ih-faq__item summary {
  list-style: none; cursor: pointer; padding: 1.15rem 0; display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; color: var(--c-ink);
}
.ih-faq__item summary::-webkit-details-marker { display: none; }
.ih-faq__item summary::after { content: "+"; flex: none; font-weight: 400; font-size: 1.5rem; color: var(--c-sage-dark); transition: transform var(--t-1) var(--ease-out); line-height: 1; }
.ih-faq__item[open] summary::after { transform: rotate(45deg); }
.ih-faq__answer { padding: 0 0 1.2rem; color: var(--c-ink-soft); max-width: 70ch; }

/* ---------- Anfrage / Formular ---------- */
.ih-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ih-form { position: relative; display: grid; gap: 1.1rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); }   /* klebte vorher am Einleitungstext */
/* align-items/-content start: bekam nur ein Feld der Zweierzeile eine Meldung (oder den Hinweis
   „Mindestaufenthalt“), zog das Raster das Nachbarfeld mit auf Zeilenhöhe (22 px tiefer, 70 statt 48 px hoch) */
.ih-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.ih-field { display: grid; gap: .4rem; align-content: start; }
.ih-field label { font-size: .9rem; font-weight: 600; color: var(--c-ink); }
.ih-field input, .ih-field textarea {
  font-family: var(--f-sans); font-size: 1rem; color: var(--c-ink);
  background: var(--c-surface); border: 1.5px solid var(--c-faint); border-radius: var(--radius);
  padding: .8em 1em; width: 100%; transition: border-color var(--t-1) var(--ease-out), box-shadow var(--t-1) var(--ease-out);
}
/* Rahmen vorher #E3DDD0 (1,3 : 1) -> Felder waren kaum als Felder erkennbar; jetzt ≥ 3 : 1 */
.ih-field input::placeholder, .ih-field textarea::placeholder { color: var(--c-muted); opacity: 1; }
.ih-field input:focus, .ih-field textarea:focus { outline: none; border-color: var(--c-sage-dark); box-shadow: 0 0 0 3px rgba(79,114,72,.28); }
.ih-field textarea { resize: vertical; min-height: 120px; }
/* iPhone-Safari zeichnet das native Datumsfeld breiter als width:100% (ragte 35 px über die
   Spalte und rechts über den Bildschirmrand). Ohne native Darstellung passt es exakt, der
   Datums-Picker öffnet sich weiter beim Antippen. Leer hätte das Feld dann keine Textzeile
   mehr (28 statt 49 px hoch) -> Mindesthöhe eine Zeile. In Chrome pixelgleich wie vorher. */
.ih-field input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; }
.ih-field input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.3em; min-height: 1lh; }
.ih-form__note { font-size: .88rem; color: var(--c-muted); margin-top: .2rem; }
/* Fehlerzustand: main.js setzt aria-invalid am Feld + Meldung .ih-field__err darunter
   (…--hinweis = neutraler Hinweis, z. B. Mindestaufenthalt, blockiert nicht) */
.ih-field [aria-invalid="true"] { border-color: var(--c-error); }
.ih-field [aria-invalid="true"]:focus { border-color: var(--c-error); box-shadow: 0 0 0 3px rgba(163,64,43,.22); }
.ih-field__err { margin: 0; font-size: .86rem; font-weight: 600; line-height: 1.4; color: var(--c-error); }
.ih-field__err--hinweis { font-weight: 500; color: var(--c-ink-soft); }
/* Honeypot gegen Spam-Bots: für Menschen unsichtbar, aber nicht display:none */
.ih-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Datenschutz-Satz unter dem Absende-Knopf */
.ih-form__privacy { margin-top: -.35rem; max-width: 62ch; font-size: .84rem; line-height: 1.5; color: var(--c-muted); }
.ih-form__privacy a { color: var(--c-sage-dark); text-decoration: underline; text-underline-offset: .18em; }
/* Rückmeldung nach dem Absenden (#formNote, role=status). Leer: kein Leerraum im Raster,
   bleibt aber als Live-Region erhalten (deshalb nicht display:none) */
.ih-form .ih-form__note { margin-top: 0; font-size: .95rem; font-weight: 600; line-height: 1.5; }
.ih-form .ih-form__note:empty { position: absolute; }
.ih-form .ih-form__note.is-ok { color: var(--c-sage-dark); }
.ih-form .ih-form__note.is-fehler { color: var(--c-error); }
.ih-form .ih-form__note a { color: inherit; text-decoration: underline; text-underline-offset: .18em; white-space: nowrap; }   /* Adresse/Nummer nie zerteilen */
.ih-contact__aside { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.2rem); }
.ih-contact__lines { list-style: none; padding: 0; display: grid; gap: 1rem; margin-top: 1.2rem; }
.ih-contact__lines li { display: flex; gap: .8rem; align-items: flex-start; }
.ih-contact__lines svg { flex: none; width: 22px; height: 22px; color: var(--c-sage-dark); stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-top: .1rem; }
.ih-contact__lines a { color: var(--c-ink); text-decoration: none; font-weight: 500; }
.ih-contact__lines a:hover { color: var(--c-sage-dark); }
.ih-form .ih-btn--primary { justify-self: start; }
/* Tablet hochkant (bis 1000 px): Formular über die volle Breite, Kontaktkasten darunter
   (zweispaltig waren die Felder bei 834 px nur 160 px breit) */
@media (max-width: 1000px) { .ih-contact { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .ih-form__row { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.ih-footer { background: var(--c-bg-dark); color: rgba(255,253,248,.8); padding-block: clamp(3rem, 6vw, 4.5rem) calc(2rem + env(safe-area-inset-bottom, 0px)); }
.ih-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.ih-footer__brand { --marke-w: 13.5rem; color: var(--c-on-video); }   /* Logo-Schriftzug (.ih-marke) wie im Kopf */
.ih-footer__tag { margin-top: .8rem; max-width: 32ch; font-size: .95rem; color: rgba(255,253,248,.7); }
.ih-footer h3 { font-family: var(--f-display); font-weight: 600; font-size: .95rem; color: var(--c-on-video); margin-bottom: 1rem; letter-spacing: .02em; }
.ih-footer__list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.ih-footer__list a, .ih-footer__list span { color: rgba(255,253,248,.75); text-decoration: none; font-size: .95rem; }
.ih-footer__list a:hover { color: var(--c-on-video); }
.ih-footer__bottom { margin-top: clamp(2.2rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; color: rgba(255,253,248,.55); }
@media (max-width: 900px) { .ih-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 720px) { .ih-footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ============================================================
   ANKOMMEN — gepinntes Storytelling ("Filmische Ankunft")
   Bühne bleibt beim Scrollen stehen, Scroll spielt die Bild-
   Zeitachse ab (Tal → Anflug → Landung an der Haustür → „Lichtportal").
   Engine: js/main.js -> bindStory(). Hohe Bühne erst, wenn JS
   die Klasse .is-live setzt -> ohne JS / reduced-motion bleibt
   ein ruhiges Standbild stehen.
   ============================================================ */
.ih-story { position: relative; background: var(--c-bg); }

.ih-story__stage { position: relative; height: clamp(420px, 72vh, 640px); overflow: hidden; background: #1c241f; }
.ih-story__frame { position: absolute; inset: 0; }
.ih-story__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  /* KEIN will-change hier: 5 Großflächen als Dauer-Ebenen sprengen auf
     Retina-Displays den Grafikspeicher -> Chrome lässt Ebenen schwarz fallen. */
}
.ih-story__frame img[data-i="1"] { opacity: 1; transform: scale(1.04); }   /* Standbild = Landung vor der Haustür */

/* Drohnen-Anflug: scroll-gesteuertes Video (Scroll setzt die Videostelle).
   Liegt zwischen Tal-Bild (0) und Landungs-Standbild (1) — gleiches
   object-fit wie die Standbilder, damit die Übergabe deckungsgleich ist.
   Sichtbarkeit + Videostelle steuert main.js — ohne JS/Flug bleibt es aus. */
.ih-story__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; display: none; pointer-events: none;
  background: transparent;
}

.ih-story__scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* unten kräftiger: die Texte stehen auch auf hellen Innenräumen (weißes Bettzeug, helle Küche) */
  background:
    linear-gradient(180deg, rgba(20,28,23,.28) 0%, rgba(20,28,23,0) 24%),
    linear-gradient(0deg, rgba(20,28,23,.80) 0%, rgba(20,28,23,.46) 40%, rgba(20,28,23,0) 68%);
}

.ih-story__caps { position: absolute; left: 0; right: 0; bottom: clamp(2rem, 8vh, 5rem); padding-inline: clamp(1.5rem, 7vw, 6rem); z-index: 3; pointer-events: none; }
.ih-story__cap { position: absolute; left: clamp(1.5rem, 7vw, 6rem); right: clamp(1.5rem, 7vw, 6rem); bottom: 0; opacity: 0; will-change: opacity, transform; }
.ih-story__cap[data-i="1"] { opacity: 1; }   /* Fallback-Text zum Standbild */
.ih-story__kicker { display: block; font-family: var(--f-script); color: var(--c-on-video); font-size: clamp(1.6rem, 4.4vw, 2.7rem); line-height: 1.1; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.ih-story__line { display: block; margin-top: .35rem; max-width: 18ch; font-family: var(--f-display); font-weight: 700; letter-spacing: -.01em; font-size: clamp(1.5rem, 4.2vw, 2.9rem); line-height: 1.12; color: var(--c-on-video); text-shadow: 0 2px 30px rgba(0,0,0,.5); }

.ih-story__dots { position: absolute; right: clamp(1.1rem, 4vw, 2.6rem); top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: .7rem; z-index: 4; }
.ih-story__dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,253,248,.35); transition: background var(--t-2) var(--ease-out), height var(--t-2) var(--ease-out); }
.ih-story__dot.is-on { background: var(--c-sage-mist); height: 22px; }

/* „Lichtportal" (Schluss des Films): Die Kamera fährt auf die Haustür zu und stellt sie
   mittig, die echte Tür (__fluegel = Türausschnitt aus dem Landungsbild, Angel links)
   schwingt nach innen auf, dahinter warmes Licht (__oeffnung). __schein legt den
   Lichtschein auf Fassade, Stufe und Fußmatte. Dann fliegt die Kamera durch die Tür ins
   Licht, das zur Fläche von „Das Haus" darunter wird. Tür und Schein bekommen exakt die
   Kamera-Bewegung des Landungsbildes (deckungsgleich); Maße + Bewegung setzt bindStory.
   Ohne JS / reduced-motion nie sichtbar. */
.ih-story__tuerrahmen,
.ih-story__schein,
.ih-story__daemmer { position: absolute; inset: 0; display: none; pointer-events: none; }
.ih-story__oeffnung,
.ih-story__fluegel,
.ih-story__laibung,
.ih-story__glut,
.ih-story__hof,
.ih-story__boden { position: absolute; }
/* Belichtung: geht die Tür auf, regelt die „Kamera" auf das helle Licht ab — draußen wird es
   etwas dunkler (zum Rand mehr), nur so leuchtet die Tür gegen die sonnige weiße Wand.
   Bildschirmfest, liegt unter Tür + Lichtschein; Deckkraft setzt bindStory. */
.ih-story__daemmer {
  background: radial-gradient(62% 68% at 50% 50%, rgba(22, 16, 10, .36), rgba(22, 16, 10, .56) 58%, rgba(22, 16, 10, .74));
  opacity: 0;
}
/* Die Türöffnung ist eine echte kleine 3D-Bühne: Perspektive aus der Kamera (setzt bindStory),
   der Hintergrund ist das Innenlicht (oben mittig fast weiß, nach unten golden), davor die
   Laibung = Mauertiefe links/rechts/oben/Schwelle (--tiefe) und der Türflügel. overflow:hidden:
   ins Haus sieht man nur durch die Tür (der weit offene Flügel verschwindet hinter der Mauer). */
.ih-story__oeffnung {
  overflow: hidden;
  background:
    radial-gradient(70% 48% at 50% 30%, rgba(255, 253, 245, 1), rgba(255, 246, 226, 0) 100%),
    linear-gradient(0deg, rgba(214, 150, 74, .5), rgba(214, 150, 74, 0) 34%),
    linear-gradient(180deg, #FFF0D2, #F6D7A2);
}
/* Laibung: außen (Fassadenkante) im Schatten, nach innen vom Licht warm angestrahlt */
.ih-story__laibung { z-index: 1; }
.ih-story__laibung--l { left: 0; top: 0; bottom: 0; width: var(--tiefe, 20px); transform-origin: 0 50%; transform: rotateY(90deg);
  background: linear-gradient(90deg, #5E4C39, #A88B63 45%, #EDD3A2); }
.ih-story__laibung--r { right: 0; top: 0; bottom: 0; width: var(--tiefe, 20px); transform-origin: 100% 50%; transform: rotateY(-90deg);
  background: linear-gradient(90deg, #F1DAAB, #B0946C 55%, #6A5641); }
.ih-story__laibung--o { left: 0; right: 0; top: 0; height: var(--tiefe, 20px); transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(180deg, #4F3F2F, #9C805B 50%, #E8CD99); }
.ih-story__laibung--u { left: 0; right: 0; bottom: 0; height: var(--tiefe, 20px); transform-origin: 50% 100%; transform: rotateX(90deg);
  background: linear-gradient(180deg, #F6E1B6, #C9AD82 60%, #8E7656); }
/* Flügel: dreht aus dem Tageslicht ins Haus -> dunkler (Helligkeit setzt bindStory, inkl. der
   Belichtung oben); ::after = Schatten zur Angel hin, ::before = an der freien Kante streift
   das Innenlicht vorbei (schmaler warmer Lichtrand, --rand). Steht vor der Laibung, bis er
   weiter als 90° offen ist — dann liegt er hinter der Mauer (z-index setzt bindStory). */
.ih-story__fluegel { inset: 0; z-index: 2; background-repeat: no-repeat; transform-origin: 0 50%; }
.ih-story__fluegel::before,
.ih-story__fluegel::after { content: ""; position: absolute; top: 0; bottom: 0; }
.ih-story__fluegel::after {
  left: 0; right: 0;
  background: linear-gradient(90deg, rgba(30, 19, 9, .55), rgba(30, 19, 9, .12) 60%, rgba(30, 19, 9, .2));
  opacity: var(--dunkel, 0);
}
.ih-story__fluegel::before {
  right: 0; width: 8%; z-index: 1;
  background: linear-gradient(90deg, rgba(255, 228, 176, 0), rgba(255, 240, 208, .95));
  opacity: var(--rand, 0);
}
/* Lichtschein als Gruppe mit „screen" gemischt: hellt auf wie echtes Licht (Weißes bleibt
   weiß, Dunkles wird warm), statt das Foto milchig zu verschleiern. Liegt unter der Tür.
   __glut = weiter Schein auf der Wand, __hof = Lichthof direkt um die Öffnung,
   __boden = weicher Lichtfleck auf Stufe und Fußmatte. */
.ih-story__schein { mix-blend-mode: screen; }
.ih-story__glut {
  background: radial-gradient(closest-side, rgba(255, 196, 124, .58), rgba(255, 186, 110, .24) 45%, rgba(255, 180, 100, .06) 78%, rgba(255, 180, 100, 0));
}
.ih-story__hof {
  background: radial-gradient(closest-side, rgba(255, 228, 178, .9), rgba(255, 214, 150, .42) 55%, rgba(255, 206, 140, 0));
}
.ih-story__boden {
  /* Ellipse mit der Mitte auf der Schwelle: weich nach allen Seiten, keine harte Kante */
  background: radial-gradient(closest-side, rgba(255, 214, 148, .9), rgba(255, 204, 136, .38) 48%, rgba(255, 198, 128, 0));
}

/* Schluss: das Licht deckt die Bühne in der Farbe von „Das Haus" (nahtloser Übergang),
   darauf schreibt sich „Griaß enk!" wie von Hand (Maske von links nach rechts, setzt bindStory).
   Liegt über Texten + Punkten. */
.ih-story__tuer { position: absolute; inset: 0; z-index: 5; display: none; pointer-events: none; }
/* Restlicht: mittig ein Hauch wärmer, ab 70 % exakt die Farbe von „Das Haus" -> Ränder nahtlos */
.ih-story__tuerlicht { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 50%, #F9F6EA, var(--c-bg-soft) 70%); opacity: 0; }
/* Feines Filmkorn während der Fahrt ins Licht: bricht die Farbstufen großer, stark vergrößerter
   Verläufe (sonst sichtbare Ringe) und wirkt filmisch. Bildschirmfest (wird nie mitvergrößert),
   verschwindet vor dem Ende, damit die Fläche nahtlos in „Das Haus" übergeht. */
.ih-story__korn {
  position: absolute; inset: 0; z-index: 6; display: none; pointer-events: none; opacity: 0;
  mix-blend-mode: overlay;   /* graues Rauschen um 50 % -> im Mittel keine Helligkeitsänderung */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.ih-story__tuertext {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  padding-inline: 1.5rem; text-align: center; opacity: 0;
  font-family: var(--f-script); font-weight: 400; color: var(--c-sage-dark);
  font-size: clamp(3.1rem, 8.6vw, 6.4rem); line-height: 1.15;
}

/* Aktiv (JS geladen): hohe Bühne, gepinnt, Punkte sichtbar.
   Die Geschichte endet an der Haustür: Foto-Fassung Tal -> Landung -> „Lichtportal";
   mit Drohnen-Anflug hat der Flug eine feste Strecke (Tempo unverändert).
   --story-h = Höhe der Flug-Strecke (vh), --story-tuer = zusätzliche Strecke NUR für das Lichtportal:
   main.js (bindStory -> anteil) rechnet sie allein der Tür-Phase zu — alles davor läuft
   unverändert, und die Kamerafahrt durch die Tür hat Zeit zum Atmen. */
.ih-story.is-live { --story-h: 355; --story-tuer: 70; height: calc((var(--story-h) + var(--story-tuer)) * 1vh); }
.ih-story.is-live.is-flug { --story-h: 570; }
.ih-story.is-live .ih-story__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; }
/* lvh statt svh: auf dem iPhone füllt die Bühne auch bei eingefahrener Adressleiste den ganzen
   Schirm (sonst heller Streifen unten); Texte + Punkte bleiben im stets sichtbaren Bereich (svh). */
@supports (height: 100lvh) {
  .ih-story.is-live .ih-story__caps { bottom: calc(clamp(2rem, 8svh, 5rem) + (100lvh - 100svh)); }
  .ih-story.is-live .ih-story__dots { top: 50svh; }
}
.ih-story.is-live .ih-story__dots { display: flex; }
/* Die hell gewordene Bühne ist schon der obere Rand von „Das Haus" -> weniger Luft davor */
.ih-story.is-live + .ih-section { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* Mobil: kürzere gepinnte Strecke, damit es nicht zäh wird (Flug-Tempo unverändert);
   die Tür-Phase behält ihre eigene Strecke — ein einzelner Wisch überspringt den Höhepunkt nicht. */
@media (max-width: 720px) {
  .ih-story.is-live { --story-h: 290; --story-tuer: 60; }
  .ih-story.is-live.is-flug { --story-h: 448; }
  .ih-story__dots { right: .7rem; }
}
@media (max-width: 480px) {
  .ih-story.is-live { --story-h: 270; }
  .ih-story.is-live.is-flug { --story-h: 413; }
}

/* Ohne Film (reduced-motion, ohne JS, Skriptfehler): ruhiges Standbild, darunter alle drei
   Bildtexte als kleine Liste — vorher war nur „Sanft gelandet" zu lesen */
.ih-story:not(.is-live) .ih-story__stage { height: auto; overflow: visible; background: none; }
.ih-story:not(.is-live) .ih-story__frame { position: relative; height: clamp(420px, 72vh, 640px); overflow: hidden; background: #1c241f; }
.ih-story:not(.is-live) .ih-story__scrim { display: none; }
.ih-story:not(.is-live) .ih-story__caps {
  position: static; display: grid; gap: 1.3rem; max-width: var(--container); margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.25rem, 5vw, 4rem) 0;
}
.ih-story:not(.is-live) .ih-story__cap { position: static; opacity: 1; transform: none; will-change: auto; }
.ih-story:not(.is-live) .ih-story__kicker { color: var(--c-sage-dark); text-shadow: none; font-size: clamp(1.5rem, 2.7vw, 1.95rem); }
.ih-story:not(.is-live) .ih-story__line { max-width: 32ch; color: var(--c-ink); text-shadow: none; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }

/* ---------- Die Geschichte — „Stein für Stein" (scrollgezeichnete Chronik) ----------
   Grundzustand (ohne JS / reduced-motion): fertig gezeichnetes Haus + alle vier
   Kapitel untereinander lesbar. Mit .is-live (JS) fließen die Kapitel weiter als
   normaler Text, die Hauszeichnung bleibt daneben stehen (Handy: klein oben) und
   entsteht im Lesetempo Linie für Linie — keine gepinnte Scroll-Strecke mehr.  */
.ih-chronik { background: var(--c-bg-warm); }
.ih-chronik__intro { padding-block: var(--pad-section) clamp(1rem, 2.5vw, 2rem); }

.ih-chronik__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.ih-chronik__art { margin: 0; text-align: center; }
.ih-chronik__svg { width: min(100%, 500px); height: auto; margin-inline: auto; }
.ih-chronik__svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ih-chronik__ground { stroke: var(--c-oak); stroke-width: 3.5; }
.ih-chronik__walls  { stroke: var(--c-ink); stroke-width: 3.5; }
.ih-chronik__bricks { stroke: var(--c-sage); stroke-width: 3.5; }
.ih-chronik__roof   { stroke: var(--c-sage-dark); stroke-width: 6; }
.ih-chronik__wins   { stroke: var(--c-ink); stroke-width: 3; }
.ih-chronik__svg .ih-chronik__heart { stroke: var(--c-sage-dark); stroke-width: 3.5; fill: var(--c-sage-mist); }  /* Spezifität > „path { fill:none }" */
.ih-chronik__since {
  display: inline-block; margin-top: .9rem;
  font-family: var(--f-script); color: var(--c-sage-dark);
  font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.1;
}

.ih-chronik__chap + .ih-chronik__chap { margin-top: clamp(2.2rem, 5vw, 3.2rem); }  /* nur im statischen Fluss */
.ih-chronik__kicker { display: block; font-family: var(--f-script); font-weight: 400; color: var(--c-sage-dark); font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; }
.ih-chronik__years  { display: block; margin-top: .35rem; font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1; color: var(--c-ink); }
.ih-chronik__text   { margin-top: 1rem; max-width: 48ch; color: var(--c-ink-soft); font-size: clamp(1rem, .96rem + .3vw, 1.15rem); }

/* Live (JS): Kapitel fließen als Text, die Zeichnung klebt senkrecht mittig daneben.
   Innenabstand oben/unten der Kapitelspalte setzt bindChronik: erstes und letztes
   Kapitel stehen dann jeweils mittig neben der Zeichnung (--art-h = Zeichnungshöhe). */
.ih-chronik__scroll.is-live .ih-chronik__grid { align-items: start; }
.ih-chronik__scroll.is-live .ih-chronik__art {
  position: sticky;
  top: max(calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1rem), calc(50svh - var(--art-h, 28rem) / 2));
}
.ih-chronik__scroll.is-live .ih-chronik__svg { width: min(100%, 500px, calc((100svh - var(--header-h) - 8rem) / .875)); }
.ih-chronik__scroll.is-live .ih-chronik__chaps { position: relative; }   /* Bezug für offsetTop der Kapitel */
.ih-chronik__scroll.is-live .ih-chronik__chap + .ih-chronik__chap { margin-top: clamp(4rem, 16svh, 10rem); }
.ih-chronik__scroll.is-live .ih-chronik__since { opacity: 0; }

@media (max-width: 780px) {
  .ih-chronik__grid { grid-template-columns: 1fr; gap: 1.4rem; align-items: start; justify-items: center; }
  .ih-chronik__svg { width: min(52vw, 260px); }
  .ih-chronik__since { font-size: 1.3rem; margin-top: .5rem; }
  .ih-chronik__chaps { justify-self: stretch; }
  .ih-chronik__kicker { font-size: 1.25rem; }
  .ih-chronik__years { font-size: 1.9rem; }
  .ih-chronik__text { font-size: .97rem; }
  /* Handy: Zeichnung klein oben mitlaufend (unter dem Kopf), der Text scrollt darunter
     durch und verschwindet weich hinter ihr (Verlauf am unteren Rand). */
  .ih-chronik__scroll.is-live .ih-chronik__art {
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    z-index: 2; justify-self: stretch;
    padding-block: .5rem .35rem; background: var(--c-bg-warm);
  }
  .ih-chronik__scroll.is-live .ih-chronik__art::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.75rem; pointer-events: none;
    background: linear-gradient(var(--c-bg-warm), rgba(246, 241, 231, 0));
  }
  .ih-chronik__scroll.is-live .ih-chronik__svg { width: min(34vw, 150px); }
  .ih-chronik__scroll.is-live .ih-chronik__since { font-size: 1.1rem; margin-top: .1rem; }
  .ih-chronik__scroll.is-live .ih-chronik__chap + .ih-chronik__chap { margin-top: clamp(3rem, 10svh, 5rem); }
}

/* Flache Viewports (Handy quer, Split-Screen): mitlaufende Zeichnung nähme zu viel
   Platz -> statische Fassung wie ohne JS. main.js entfernt .is-live + Inline-Styles
   über denselben Media-Query-Wert (bindChronik, max-height 520px); das hier ist nur
   das Sicherheitsnetz, falls das Umschalten ausbleibt. */
@media (max-height: 520px) {
  .ih-chronik__scroll.is-live .ih-chronik__art { position: static; }
  .ih-chronik__scroll.is-live .ih-chronik__art::after { content: none; }
  .ih-chronik__scroll.is-live .ih-chronik__chaps { padding: 0 !important; }
  .ih-chronik__scroll.is-live .ih-chronik__chap + .ih-chronik__chap { margin-top: clamp(2.2rem, 5vw, 3.2rem); }
  .ih-chronik__scroll.is-live .ih-chronik__since { opacity: 1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ih-hero__eyebrow, .ih-hero__sub, .ih-hero__ctas, .ih-hero__cue { opacity: 1; animation: none; transform: none; }
  .ih-hero__name { clip-path: none; animation: none; }
  .ih-hero__icon { opacity: 1; animation: none; }
  .ih-reveal { opacity: 1; transform: none; transition: none; }
  /* Kopf weicht nie aus; Menü-Links ohne Gleiten; Großansicht ohne Anwachsen */
  .ih-header.is-weg { transform: none; }
  .ih-mobilemenu__nav a, .ih-mobilemenu__lang { transform: none; transition: none; }
  .ih-lightbox__img { transform: none; }
  .ih-season__panel, .ih-season__media img, .ih-season__content, .ih-season__edge { transition: none; }
  .ih-season__media img, .ih-season__panel.is-active .ih-season__media img { transform: scale(1.05); }
  .ih-season__panel:not(.is-active):hover { flex-grow: 1; }
  .ih-season.is-in .ih-season__panel.is-active .ih-season__chip { animation: none; }
  .ih-season__chip, .ih-season__chip:hover { transform: none; }
  /* Fototisch: kein Anheben/Rascheln der Stapel (Auffächern regelt main.js) */
  .ih-stapel__deck, .ih-stapel__blatt { transition: none; }
  .ih-stapel:hover .ih-stapel__deck { transform: rotate(var(--tilt, 0deg)); }
  /* Lage-Beats nicht mehr verstecken — statische Liste unter dem Video (siehe kombinierte Media-Query oben) */
  /* Storytelling: kein Pinnen/Animieren -> ruhiges Standbild */
  .ih-story.is-live, .ih-story.is-live.is-flug { height: auto; }
  .ih-story.is-live .ih-story__stage { position: relative; height: clamp(420px, 72vh, 640px); }
  .ih-story__frame img { transition: none; }
  .ih-story__video { display: none !important; }
  .ih-story__dots { display: none !important; }
  .ih-story__tuer, .ih-story__tuerrahmen, .ih-story__schein, .ih-story__daemmer, .ih-story__korn { display: none !important; }
  /* Anfrage-Knopf: nur ein-/ausblenden, nicht gleiten */
  .ih-fab, .ih-fab.is-on { transform: none; }
  .ih-fab__cta:active, .ih-fab__call:active { transform: none; }
  /* Chronik: nichts klebt/zeichnet -> fertiges Haus + Kapitel als ruhige Liste */
  .ih-chronik__scroll.is-live .ih-chronik__art { position: static; }
  .ih-chronik__scroll.is-live .ih-chronik__art::after { content: none; }
  .ih-chronik__scroll.is-live .ih-chronik__chaps { padding: 0 !important; }
  .ih-chronik__scroll.is-live .ih-chronik__chap + .ih-chronik__chap { margin-top: clamp(2.2rem, 5vw, 3.2rem); }
  .ih-chronik__scroll.is-live .ih-chronik__since { opacity: 1; }
}

/* ============================================================
   DAS HAUS — Luftbild-Kamerafahrt (.ih-luft), Raum-Kapitel
   (.ih-kapitel/.ih-kapnav/.ih-kap) und Überleitung zur Geschichte
   (.ih-bruecke).
   Eigener Namespace — .ih-season gehört den Aktivitäten!
   ============================================================ */

/* Nur-Screenreader-Text */
.ih-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Ohne JS dürfen Reveal-Elemente nie unsichtbar bleiben */
html:not(.has-js) .ih-reveal { opacity: 1; transform: none; }

/* ---------- Luftbild mit Klick-Kamerafahrt ---------- */
.ih-luft { margin-top: clamp(1rem, 2vw, 1.6rem); }
.ih-luft__stage {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9; background: #1c241f;
  box-shadow: 0 30px 60px -40px rgba(46,58,51,.55);
}
.ih-luft__stage.is-zoomed { cursor: zoom-out; }
.ih-luft__cam { position: absolute; inset: 0; transition: transform var(--t-4) var(--ease-move); will-change: transform; }
.ih-luft__cam img { width: 100%; height: 100%; object-fit: cover; }
/* Nahbild: raus schnell (keine Doppelbelichtung mit der fliegenden Draufsicht), rein erst nach
   dem Anflug — die Wartezeit setzt main.js (erst wenn das Bild dekodiert ist) */
.ih-luft__near {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity var(--t-1) var(--ease-in); pointer-events: none;
}
.ih-luft__stage.is-near .ih-luft__near.is-on { opacity: 1; transition: opacity var(--t-3) var(--ease-out) 1.05s; }

/* Pulsierende Punkte auf dem Foto (verschwinden im Zoom) */
.ih-luft__spot {
  position: absolute; left: var(--x); top: var(--y);
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-2) var(--ease-out), visibility 0s linear var(--t-2);
}
/* Punkte erst nach der Rückfahrt zur Übersicht (standen sonst ~1 s an falschen Stellen) */
.ih-luft.is-live .ih-luft__spot {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--t-2) var(--ease-out) .95s, visibility 0s linear .95s;
}
.ih-luft__spot::before {
  content: ""; position: absolute; inset: 15px; border-radius: 50%;
  background: rgba(250,251,246,.95); box-shadow: 0 1px 6px rgba(20,28,22,.45), 0 0 0 3px rgba(46,58,51,.22);
}
.ih-luft__spot::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 2px solid rgba(250,251,246,.85);
  animation: ih-spot-puls 2.6s ease-out infinite;
}
@keyframes ih-spot-puls {
  0% { transform: scale(.55); opacity: .9; }
  70% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}
.ih-luft__spot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ih-luft.is-live .ih-luft__stage.is-zoomed .ih-luft__spot { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s linear, visibility 0s linear .12s; }

/* Hinweiszeile + Glas-Infokarte */
.ih-luft__hint {
  position: absolute; right: 1rem; bottom: .9rem; margin: 0;
  font-size: .86rem; color: #fff;
  background: rgba(22,30,25,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .35em .95em;
  opacity: 0; transition: opacity var(--t-2) var(--ease-out); pointer-events: none;
}
.ih-luft.is-live .ih-luft__hint { opacity: 1; }
.ih-luft.is-live .ih-luft__stage.is-zoomed .ih-luft__hint { opacity: 0; }
.ih-luft__card {
  position: absolute; left: 1rem; bottom: 1rem;
  max-width: min(360px, calc(100% - 2rem));
  display: grid; gap: .15rem; padding: .9rem 1.15rem; border-radius: 14px;
  background: rgba(22,30,25,.45);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.22); color: #fff;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out);
  pointer-events: none;
}
.ih-luft__stage.is-zoomed .ih-luft__card { opacity: 1; transform: none; transition-delay: .65s; pointer-events: auto; }
/* Station -> Station: Karte kurz aus, Text tauschen, nach dem Anflug wieder ein (main.js: .is-tausch) */
.ih-luft__stage.is-zoomed .ih-luft__card.is-tausch {
  opacity: 0; transform: translateY(6px);
  transition: opacity .15s var(--ease-in), transform .15s var(--ease-in);
}
.ih-luft__cardtitle { font-family: var(--f-display); font-size: 1.05rem; line-height: 1.25; }
.ih-luft__cardtext { font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.88); }
.ih-luft__cardfacts {
  list-style: none; margin: .45rem 0 0; padding: .55rem 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  display: grid; gap: .28rem;
}
.ih-luft__cardfacts[hidden] { display: none; }
.ih-luft__cardfacts li {
  position: relative; padding-left: 1.05em;
  font-size: .84rem; line-height: 1.35; color: rgba(255,255,255,.92);
}
.ih-luft__cardfacts li::before {
  content: ""; position: absolute; left: .1em; top: .5em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-sage-mist);
}

/* Stations-Pillen unter dem Bild (nur mit JS sichtbar) */
.ih-luft__chips { display: none; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.ih-luft.is-live .ih-luft__chips { display: flex; }
.ih-luft__chip {
  font: inherit; font-size: .92rem; font-weight: 600; color: var(--c-sage-dark);
  background: var(--c-surface); border: 1px solid var(--c-sage-mist); border-radius: 999px;
  padding: .5em 1.1em; cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: background-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out), border-color var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out);
}
.ih-luft__chip:hover { transform: translateY(-2px); }
.ih-luft__chip.is-active { background: var(--c-sage-dark); border-color: var(--c-sage-dark); color: #fff; }
.ih-luft__chip:focus-visible { outline: 2px solid var(--c-sage-dark); outline-offset: 2px; }

/* ============================================================
   DAS HAUS — Raum-Kapitel
   01 Wohnküche · 02 Schlafzimmer · 03 Bäder · 04 Ausstattung.
   EIN Raster für alle Räume: Nummer + Raumname, Raumbild, Text mit
   Ausstattungsliste, zwei Detailfotos (A hoch 4:5, B quer 4:3).
   Bewegung (bindKapitel in main.js): das Raumbild zieht sich beim
   Scrollen auf, die Detailfotos schweben mit eigener Tiefe, die
   Kapitel-Leiste klebt unter dem Header (Raum + Fortschritt).
   Verdeckte Startzustände NUR unter html.has-js — ohne JS steht alles da.
   ============================================================ */
.ih-kapitel { margin-top: clamp(4.5rem, 9vw, 7.5rem); }

/* ---------- Kapitel-Leiste ---------- */
.ih-kapnav {
  position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 30;
  margin-inline: calc(50% - 50vw);                    /* randlos wie der Header */
  background: rgba(241, 244, 234, .9);
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  transition: background-color var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out);
}
.ih-kapnav.is-stuck { background: rgba(250, 251, 246, .94); box-shadow: 0 12px 30px -24px rgba(46, 58, 51, .6); }
/* Header + Leiste wirken zusammen wie EIN Balken: keine Doppellinie, kein Schatten dazwischen */
html.kapnav-klebt .ih-header.is-scrolled { border-bottom-color: transparent; box-shadow: none; }
.ih-kapnav__list {
  list-style: none; margin: 0 auto; max-width: var(--container);
  padding: 0 calc(clamp(1.25rem, 5vw, 4rem) + env(safe-area-inset-right, 0px)) 0 calc(clamp(1.25rem, 5vw, 4rem) + env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.ih-kapnav__link {
  display: flex; align-items: center; gap: .7rem; height: 56px;
  color: var(--c-muted); text-decoration: none; font-size: .94rem; font-weight: 500; white-space: nowrap;
  transition: color var(--t-1) var(--ease-out);
}
.ih-kapnav__link:hover { color: var(--c-ink); }
.ih-kapnav__link:focus-visible { outline-offset: -3px; }
.ih-kapnav__no { font-size: .72rem; font-weight: 600; letter-spacing: .14em; color: var(--c-muted); font-variant-numeric: tabular-nums; transition: color var(--t-1) var(--ease-out); }
.ih-kapnav__link[aria-current="true"] { color: var(--c-ink); }
.ih-kapnav__link[aria-current="true"] .ih-kapnav__no { color: var(--c-sage-dark); }
.ih-kapnav__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.ih-kapnav__bar span { display: block; height: 100%; background: var(--c-sage-dark); transform: scaleX(0); transform-origin: 0 50%; }
html:not(.has-js) .ih-kapnav__bar { display: none; }
/* Ohne JS steht der Kopf nicht fest (scrollt weg) -> Leiste klebt ganz oben statt 76 px darunter */
html:not(.has-js) .ih-kapnav { top: env(safe-area-inset-top, 0px); }

/* ---------- Kapitel ---------- */
.ih-kap { position: relative; margin-top: clamp(5.5rem, 12vw, 10rem); scroll-margin-top: calc(var(--header-h) + 5.5rem); }
.ih-kapnav + .ih-kap { margin-top: clamp(3rem, 6vw, 5rem); }

/* Nummer mit Linie + großer Raumname (steht auf der Bildkante) */
.ih-kap__head { position: relative; z-index: 3; }
.ih-kap__head.ih-reveal { opacity: 1; transform: none; }      /* der Kopf animiert seine Teile selbst */
.ih-kap__no {
  display: flex; align-items: center; gap: 1.1rem;
  margin-bottom: clamp(.8rem, 1.8vw, 1.3rem);
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; line-height: 1;
  color: var(--c-sage-dark); font-variant-numeric: tabular-nums;
}
.ih-kap__no::after { content: ""; flex: 1; height: 1px; background: var(--c-line); transform-origin: 0 50%; }
.ih-kap__title {
  font-size: clamp(1.9rem, 10.2vw, 8rem); font-weight: 700; line-height: .92; letter-spacing: -.035em;
  color: var(--c-ink);
  overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em;   /* Maske darf Unterlängen nicht kappen */
  /* Notfall (Klapphandy-Außendisplay, große Systemschrift, starker Zoom): lieber trennen als abschneiden */
  -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
}
.ih-kap__title > span { display: inline-block; }
.ih-kap__title:focus { outline: none; }
.ih-kap__title:focus-visible { outline: 3px solid var(--c-sage-dark); outline-offset: 6px; }
html.has-js .ih-kap__no::after { transform: scaleX(0); transition: transform var(--t-4) var(--ease-out) .1s; }
html.has-js .ih-kap__title > span { transform: translate3d(0, 105%, 0); transition: transform var(--t-4) var(--ease-out) .05s; }
html.has-js .ih-kap__head.is-in .ih-kap__no::after,
html.has-js .ih-kap__head.is-in .ih-kap__title > span { transform: none; }

/* Raumbild — Fenster (clip-path) + leichter Rück-Zoom kommen aus main.js */
.ih-kap__stage { position: relative; z-index: 1; }
/* width:100% ist Pflicht: bei width:auto überträgt der Browser die max-height über
   das Seitenverhältnis auf die Breite -> auf niedrigen Laptop-Fenstern (1280×720)
   wurde das Bild schmaler und klebte links. So wird nur oben/unten beschnitten. */
.ih-kap__frame {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  width: 100%; aspect-ratio: 3 / 2; max-height: calc(100svh - 12rem); min-height: 260px;
  background: #E2E0D5;
}
.ih-kap__frame img { width: 100%; height: 100%; object-fit: cover; }

/* Text + Details im 12er-Raster; Detailfotos ragen ins Raumbild hinein */
.ih-kap__body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2rem); align-items: start;
  margin-top: clamp(2.2rem, 4.2vw, 3.4rem);
}
.ih-kap__text { grid-column: 1 / span 5; grid-row: 1; }
.ih-kap__detail { position: relative; margin: 0; grid-row: 1; }
.ih-kap__detail--a { grid-column: 7 / span 3; margin-top: calc(-1 * clamp(4.5rem, 10.5vw, 9.5rem)); }
.ih-kap__detail--b { grid-column: 10 / span 3; margin-top: calc(-1 * clamp(3rem, 6vw, 5rem)); }
.ih-kap--flip .ih-kap__text { grid-column: 8 / span 5; }
.ih-kap--flip .ih-kap__detail--a { grid-column: 4 / span 3; }
.ih-kap--flip .ih-kap__detail--b { grid-column: 1 / span 3; }

.ih-kap__float { position: relative; }
.ih-kap__pic {
  position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 4 / 5;
  background: #E2E0D5;
  box-shadow: 0 36px 64px -36px rgba(30, 40, 34, .62), 0 3px 10px -4px rgba(30, 40, 34, .18), 0 0 0 1px rgba(46, 58, 51, .05);
}
.ih-kap__detail--b .ih-kap__pic { aspect-ratio: 4 / 3; }
.ih-kap__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-4) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ih-kap__detail:hover .ih-kap__pic img { transform: scale(1.045); }
}
.ih-kap__detail figcaption {
  display: flex; align-items: center; gap: .6rem; padding-top: .8rem;
  font-size: .84rem; line-height: 1.4; color: var(--c-muted);
}
.ih-kap__detail figcaption::before { content: ""; flex: 0 0 1.1rem; height: 1px; background: var(--c-sage); }

/* Text + Ausstattungsliste mit feinen Linien (zeichnen sich nacheinander) */
.ih-kap__lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.32rem); line-height: 1.6; color: var(--c-ink-soft); max-width: 34ch; text-wrap: pretty; }
.ih-kap__label {
  margin: clamp(1.7rem, 3.2vw, 2.4rem) 0 .55rem;
  font-family: var(--f-sans); font-size: .74rem; font-weight: 600; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-sage-dark);
}
.ih-kap__list { list-style: none; margin: 0; padding: 0; }
.ih-kap__list li {
  position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .8rem 0; font-size: 1rem; line-height: 1.45; font-weight: 500; color: var(--c-ink);
}
.ih-kap__list li::before,
.ih-kap__list li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--c-line); transform-origin: 0 50%;
}
.ih-kap__list li::before { top: 0; }
.ih-kap__list li:last-child::after { bottom: 0; }
.ih-kap__val { flex: 0 0 auto; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--c-sage-dark); }
html.has-js .ih-kap__list li::before,
html.has-js .ih-kap__list li:last-child::after { transform: scaleX(0); transition: transform var(--t-4) var(--ease-out) .15s; }
html.has-js .ih-kap__list li:nth-child(2)::before { transition-delay: .25s; }
html.has-js .ih-kap__list li:nth-child(3)::before { transition-delay: .35s; }
html.has-js .ih-kap__list li:nth-child(4)::before { transition-delay: .45s; }
html.has-js .ih-kap__list li:last-child::after { transition-delay: .55s; }
html.has-js .is-in .ih-kap__list li::before,
html.has-js .is-in .ih-kap__list li:last-child::after { transform: none; }

/* 04 Ausstattung: Foto + Übersicht in vier Gruppen */
.ih-kap--specs .ih-kap__body { margin-top: clamp(2rem, 4vw, 3.2rem); }
.ih-kap--specs .ih-kap__detail--a { grid-column: 1 / span 4; margin-top: 0; }
.ih-kap--specs .ih-kap__text { grid-column: 6 / span 7; }
.ih-kap--specs .ih-kap__lead { max-width: none; }
.ih-specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 3.4vw, 2.8rem) clamp(1.6rem, 3.2vw, 2.8rem);
  margin-top: clamp(1.4rem, 2.8vw, 2.2rem);
}
.ih-spec .ih-kap__label { margin-top: 0; }

/* ---------- Überleitung zur Geschichte ----------
   Die Frage schreibt sich (wie der Name im Hero), danach Link + eine
   feine Leitlinie, die bis an den Rand zur Geschichte hinunterläuft. */
.ih-bruecke {
  position: relative; display: grid; justify-items: center; text-align: center;
  margin-top: clamp(6rem, 13vw, 10.5rem);
  margin-bottom: calc(-1 * var(--pad-section));
}
.ih-bruecke.ih-reveal { opacity: 1; transform: none; }
.ih-bruecke__frage {
  /* Mindestgröße 2rem: am Handy steht die Frage in EINER Zeile (vorher schrieben sich zwei Zeilen gleichzeitig) */
  font-family: var(--f-script); font-weight: 400; font-size: clamp(1.75rem, 5.8vw, 4.6rem); line-height: 1.15;
  color: var(--c-ink);
}
.ih-bruecke__frage span { display: inline-block; padding-inline: .15em; }
.ih-bruecke__link {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem;
  font-weight: 600; font-size: .98rem; color: var(--c-sage-dark); text-decoration: none;
  border-bottom: 1.5px solid var(--c-sage-mist); padding-bottom: 3px;
  transition: border-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out);
}
.ih-bruecke__link svg { width: 18px; height: 18px; transition: transform var(--t-2) var(--ease-out); }
.ih-bruecke__link:hover { border-color: var(--c-sage-dark); }
.ih-bruecke__link:hover svg { transform: translateY(3px); }
.ih-bruecke::after {
  content: ""; width: 1px; height: calc(var(--pad-section) - 1.2rem); margin-top: 1.2rem;
  background: linear-gradient(to bottom, var(--c-sage), rgba(111, 146, 102, 0));
  transform-origin: 50% 0;
}
html.has-js .ih-bruecke__frage span { clip-path: inset(-30% 100% -30% 0); transition: clip-path 2.1s cubic-bezier(.55, .08, .3, 1) .1s; }
html.has-js .ih-bruecke__link { opacity: 0; transform: translateY(8px); transition: opacity var(--t-3) var(--ease-out) 1.6s, transform var(--t-3) var(--ease-out) 1.6s, border-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out); }
html.has-js .ih-bruecke::after { transform: scaleY(0); transition: transform var(--t-4) var(--ease-out) 2s; }
html.has-js .ih-bruecke.is-in .ih-bruecke__frage span { clip-path: inset(-30% -6% -30% -6%); }
html.has-js .ih-bruecke.is-in .ih-bruecke__link,
html.has-js .ih-bruecke__link:focus-visible { opacity: 1; transform: none; }
html.has-js .ih-bruecke__link:focus-visible { transition: opacity var(--t-1) var(--ease-out), transform var(--t-1) var(--ease-out); }
html.has-js .ih-bruecke.is-in::after { transform: none; }

/* ---------- Responsiv ---------- */
@media (max-width: 820px) {
  .ih-kapnav__list {
    display: flex; justify-content: space-between; gap: 1.2rem; overflow-x: auto; scrollbar-width: none;
    /* sehr schmale Handys: Leiste scrollt seitlich — Wörter laufen weich aus statt hart abgeschnitten */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
            mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
  }
  .ih-kapnav__list::-webkit-scrollbar { display: none; }
  .ih-kapnav__link { height: 48px; font-size: .86rem; gap: .45rem; }
  .ih-kap { margin-top: clamp(4.5rem, 14vw, 6rem); }
  .ih-kap__frame { aspect-ratio: 4 / 3; max-height: none; min-height: 0; }
  .ih-kap__body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .9rem; margin-top: 0; }
  .ih-kap__detail--a, .ih-kap--flip .ih-kap__detail--a { grid-column: 1; margin-top: -2.4rem; }
  .ih-kap__detail--b, .ih-kap--flip .ih-kap__detail--b { grid-column: 2; margin-top: 1.4rem; }
  .ih-kap__text, .ih-kap--flip .ih-kap__text { grid-column: 1 / -1; grid-row: 2; margin-top: 2rem; }
  .ih-kap__lead { max-width: 44ch; }
  .ih-kap--specs .ih-kap__detail--a { grid-column: 1 / -1; margin-top: 0; }
  .ih-kap--specs .ih-kap__pic { aspect-ratio: 16 / 10; }
  .ih-kap--specs .ih-kap__text { grid-column: 1 / -1; grid-row: 2; margin-top: 1.8rem; }
}
@media (max-width: 640px) {
  .ih-luft__spot { display: none; }
  /* Mehr Bildhöhe am Handy: 4:3 statt 16:9 (bindLuft rechnet die Zoom-Ziele um) */
  .ih-luft__stage { aspect-ratio: 4 / 3; }
  /* Karte kompakt und OBEN, damit das Zoom-Ziel in der Bildmitte frei bleibt */
  .ih-luft__card { left: .6rem; right: .6rem; top: .6rem; bottom: auto; max-width: none; padding: .6rem .8rem; gap: .05rem; }
  .ih-luft__cardtitle { font-size: .95rem; }
  .ih-luft__cardtext { font-size: .8rem; line-height: 1.4; }
  /* Fakten-Zeile weg: die Karte verdeckte bei „Das Haus" sonst Dach, Balkon und Schriftzug
     (dieselben Fakten stehen im Band unter dem Hero) */
  .ih-luft__cardfacts { display: none; }
  .ih-luft__hint { display: none; }
}
@media (max-height: 500px) {
  /* Handy quer: Header + klebende Leiste würden ein Drittel der Höhe fressen */
  .ih-kapnav { position: relative; top: auto; }
}
@media (max-width: 560px) {
  .ih-kapnav__no { display: none; }
  .ih-specs { grid-template-columns: 1fr; }
}

/* Reduzierte Bewegung: alles sofort sichtbar, keine Fahrten/Puls */
@media (prefers-reduced-motion: reduce) {
  .ih-luft__cam { transition: none; }
  .ih-luft__near { transition: none; }
  .ih-luft__spot::after { animation: none; opacity: 0; }
  .ih-luft__chip, .ih-luft__chip:hover { transform: none; transition: none; }
  .ih-luft__card { transition: none; }
  html.has-js .ih-kap__no::after,
  html.has-js .ih-kap__title > span,
  html.has-js .ih-kap__list li::before,
  html.has-js .ih-kap__list li:last-child::after,
  html.has-js .ih-bruecke::after { transform: none; transition: none; }
  html.has-js .ih-bruecke__frage span { clip-path: none; transition: none; }
  html.has-js .ih-bruecke__link { opacity: 1; transform: none; transition: none; }
  .ih-kap__pic img { transition: none; }
  .ih-kapnav, .ih-kapnav__link, .ih-kapnav__no { transition: none; }
}

/* ---------- Tipp-Feedback (Handy/Tablet) ----------
   Statt des grau/blau aufblitzenden System-Kastens ein eigener Druck-Zustand — nur Farbe/Helligkeit,
   keine Bewegung; der Fokusring (:focus-visible) bleibt. FAB und Saison-Fläche haben das schon. */
.ih-stapel, .ih-luft__chip, .ih-gallery__item, .ih-album__zurueck, .ih-galerie__allebtn,
.ih-burger, .ih-lightbox__btn, .ih-kapnav__link, .ih-season__chip, .ih-wer__karte { -webkit-tap-highlight-color: transparent; }
.ih-kapnav__link:active { color: var(--c-ink); }
.ih-stapel:active .ih-stapel__abzug img, .ih-gallery__item:active img { filter: brightness(.88); }
.ih-luft__chip:active { background-color: var(--c-sage-mist); }
.ih-luft__chip.is-active:active { background-color: #44643E; border-color: #44643E; }
.ih-album__zurueck:active { border-color: var(--c-sage); color: var(--c-sage-dark); background-color: var(--c-surface-2); }
.ih-galerie__allebtn:active { border-color: var(--c-sage-dark); color: #44643E; }
.ih-burger:active { opacity: .6; }
.ih-lightbox__btn:active { background: rgba(255,255,255,.32); }
.ih-season__chip:active { background-color: rgba(22,30,25,.62); border-color: rgba(255,255,255,.42); }

/* ---------- Druck: kompakt und lesbar ----------
   Ohne Kopf, schwebenden Knopf, Film, Videos, Rundblick, Fototisch und Formular; alles, was
   sonst erst beim Scrollen erscheint, steht fertig da; dunkle Flächen werden hell. */
@media print {
  .ih-header, .ih-mobilemenu, .ih-fab, .ih-skip, .ih-lightbox, .ih-story,
  .ih-hero__video, .ih-hero__scrim, .ih-hero__cue, .ih-hero__ctas,
  .ih-lage__video, .ih-pano, .ih-kapnav, .ih-luft__chips, .ih-luft__hint, .ih-luft__spot, .ih-luft__card,
  .ih-section--tisch, .ih-form, .ih-bruecke, .ih-season__media, .ih-season__edge, .ih-season__tab,
  .ih-luft, .ih-wer__bild, .ih-wer__ring { display: none !important; }
  /* „Für wen": nur Text, als ruhige Liste */
  .ih-wer { display: block; padding: 0; }
  .ih-wer > li { translate: none !important; break-inside: avoid; }
  .ih-wer__karte { min-height: 0; padding: .6rem 0; border: 0; box-shadow: none; }
  .ih-wer__text { margin: 0; padding: 0; }
  .ih-wer__nr { display: none; }
  .ih-wer__tag, .ih-wer__name, .ih-wer__info { color: var(--c-ink) !important; text-shadow: none !important; }
  html, body { background: #fff; }
  .ih-section, .ih-intro, .ih-chronik__intro { padding-block: 1.4rem; }
  .ih-hero { min-height: 0; background: none; padding-block: 1rem 0; }
  .ih-hero__inner { padding-top: 0; color: var(--c-ink); }
  .ih-hero__eyebrow, .ih-hero__sub, .ih-hero__icon { opacity: 1 !important; animation: none !important; color: var(--c-ink); text-shadow: none; }
  .ih-hero__name { clip-path: none !important; animation: none !important; }
  .ih-hero__name-img { filter: brightness(0) opacity(.8); }   /* helle Wortmarke dunkel drucken */
  .ih-reveal, .ih-kap__title > span, .ih-kap__float, .ih-kap__frame img,
  .ih-kap__no::after, .ih-kap__list li::before, .ih-kap__list li:last-child::after { opacity: 1 !important; transform: none !important; }
  .ih-kap__frame { clip-path: none !important; }
  .ih-chronik__scroll .ih-chronik__art { position: static !important; }
  .ih-chronik__svg path { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .ih-chronik__svg .ih-chronik__heart { fill-opacity: 1 !important; }
  .ih-chronik__since { opacity: 1 !important; transform: none !important; }
  .ih-season { display: block; height: auto; }
  .ih-season__panel { height: auto !important; background: none; box-shadow: none; outline: 0; color: var(--c-ink); }
  .ih-season__panel::after { content: none; }
  .ih-season__content { position: static; opacity: 1 !important; visibility: visible !important; padding: 0 0 1rem; }
  .ih-season__kicker, .ih-season__title, .ih-season__chip h4, .ih-season__chip p { color: var(--c-ink); text-shadow: none; }
  .ih-season__chip { background: none; border-color: var(--c-line); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none !important; }
  .ih-season__chip svg { stroke: var(--c-sage-dark); }
  .ih-section--dark, .ih-footer { background: #fff; color: var(--c-ink); }
  .ih-section--dark .ih-eyebrow, .ih-section--dark .ih-lead, .ih-footer__tag, .ih-footer__list a,
  .ih-footer__list span, .ih-footer__bottom, .ih-footer h3, .ih-footer__brand { color: var(--c-ink-soft); }
  .ih-kap, .ih-chronik__chap, .ih-incl__card, .ih-prices__card, .ih-faq__item, .ih-contact__aside { break-inside: avoid; }
  /* Knöpfe: ohne Hintergrundgrafik (Standard beim Drucken) blieb von der weißen Schrift nichts */
  .ih-btn { background: none !important; color: var(--c-sage-dark) !important; border-color: currentColor !important; box-shadow: none !important; }
}