/* ═══════════════════════════════════════════════════════════
   HOTELSCALE — Design System
   Alpine Luxury Editorial
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --stone:    #1C1A17;
  --stone-md: #2E2B26;
  --stone-lt: #3D3930;
  --linen:    #F0EAE0;
  --linen-dk: #DDD5C8;
  --fog:      #8C8478;
  --gold:     #BFA06A;
  --gold-lt:  #D4BA8A;
  --pine:     #3B4A3E;
  --snow:     #F7F4EF;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;

  --pad-x: 4vw;
  --section-y: 8rem;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--snow);
  color: var(--stone);
  overflow-x: hidden;
  overflow-x: clip;
  font-weight: 300;
  line-height: 1.75;
  cursor: none;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; line-height: 1.1; }
em { font-style: italic; }

/* ── Cursor ── */
#cursor-dot {
  position: fixed; width: 5px; height: 5px; background: var(--gold); border-radius: 50%;
  pointer-events: none; z-index: 9999; transform: translate(-50%,-50%);
  opacity: 0; transition: opacity .3s, width .2s, height .2s;
}
#cursor-plane {
  position: fixed; width: 28px; height: 28px; pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%) rotate(0deg); opacity: 0;
  transition: opacity .3s, width .2s, height .2s;
}
#cursor-plane svg { width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(191,160,106,.35)); }
body.cursor-ready #cursor-dot, body.cursor-ready #cursor-plane { opacity: 1; }

/* ── Nav ── */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2.2rem var(--pad-x);
  transition: padding .5s, background .5s, transform .38s cubic-bezier(.4,0,.2,1);
}
/* Beim Runterscrollen faehrt die Kopfzeile nach oben aus dem Bild, beim
   Hochscrollen sofort zurueck. Gesetzt von main.js. */
nav.site-nav.nav-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { nav.site-nav { transition: none; } }
nav.site-nav.solid, nav.site-nav.always-solid {
  background: rgba(28,26,23,.96); backdrop-filter: blur(20px);
  padding: 1.4rem var(--pad-x); border-bottom: 1px solid rgba(191,160,106,.12);
}
.nav-logo {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 300;
  letter-spacing: .22em; text-transform: uppercase; color: var(--linen);
  display: inline-flex; align-items: baseline; gap: 0;
}
.nav-logo .logo-scale { color: var(--gold); }
/* Bildmarke links vom Schriftzug: Staebe stehen auf der Schriftgrundlinie,
   hoechster Stab knapp ueber der Versalhoehe. */
.nav-logo .logo-mark { height: .9em; width: auto; fill: var(--gold); margin-right: .55em; flex: 0 0 auto; }
/* Versalhoehe von Cormorant Garamond = .648em (gemessen: 14 px bei 21,6 px). Die Marke steht auf
   der Grundlinie und ragt mit .9em rund 40 % ueber das H hinaus — Marios Vorgabe: hoechstens 50 %. */
.nav-center { display: flex; gap: 2.6rem; list-style: none; align-items: center; }
.nav-center > li { position: relative; }
.nav-center a {
  font-weight: 200; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,234,224,.55); transition: color .3s;
}
.nav-center a:hover, .nav-center a.active { color: var(--linen); }

/* Dropdown */
.nav-dropdown { display: none; position: absolute; top: 100%; left: -1.5rem; padding-top: 1.2rem; min-width: 260px; }
.nav-center > li:hover .nav-dropdown { display: block; }
.nav-dropdown-inner {
  background: rgba(28,26,23,.98); border: 1px solid rgba(191,160,106,.15);
  padding: 1rem 0;
}
.nav-dropdown-inner a {
  display: flex; align-items: baseline; gap: .8rem; padding: .7rem 1.5rem;
  font-size: .7rem; letter-spacing: .15em; color: rgba(240,234,224,.6);
}
.nav-dropdown-inner a:hover { background: rgba(191,160,106,.06); color: var(--linen); }
.nav-dropdown-inner a span.num { color: var(--gold); font-family: var(--font-display); font-size: .8rem; }

.nav-cta-link {
  font-weight: 300; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: .6rem; transition: gap .3s;
}
.nav-cta-link:hover { gap: 1rem; }

/* Mobile burger */
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: .4rem; }
.nav-menu-cta { display: none; }   /* Erstgespraech im Menue: nur im geoeffneten Burger-Menue (s. u.) */
.nav-burger span { display: block; width: 24px; height: 1px; background: var(--linen); margin: 6px 0; transition: .3s; }

/* ── Page hero (subpages) ── */
.page-hero {
  background: var(--stone); color: var(--linen);
  padding: 11rem var(--pad-x) 6rem; position: relative; overflow: hidden;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(191,160,106,.07), transparent 60%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: 1.5rem; }
.page-hero h1 { font-size: clamp(2.1rem, 3.8vw, 3.6rem); max-width: 18ch; letter-spacing: -.01em; line-height: 1.12; }
.page-hero h1 em { color: var(--gold-lt); }
/* text-wrap: pretty verhindert, dass das letzte Wort allein auf einer Zeile landet. */
.page-hero .lead { color: var(--fog); font-size: .92rem; max-width: 52ch; margin-top: 1.8rem;
  line-height: 1.95; text-wrap: pretty; }
/* Foto-Heroes füllen immer den ganzen ersten Bildschirm. */
.page-hero.with-photo { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }

/* Platzierung des Textblocks im Foto-Hero — je Seite so gewählt, dass er
   nicht auf dem Motiv liegt. Vorbild: forsthofgut.at — kleine Schrift, viel Bild. */
.page-hero.hero-mid { justify-content: center; }
.page-hero.hero-top { justify-content: flex-start; padding-top: 11rem; }   /* Text oben — Motiv fuellt die untere Haelfte */
/* Journal-Artikel: Foto-Hero, Inhalt ZENTRIERT (Mario: der Fliesstext beginnt weit innen, die Ueberschrift soll dazu passen),
   72 % Bildschirmhoehe statt volle Hoehe — der Artikel soll schnell beginnen. */
.page-hero.article-hero { min-height: 72vh; min-height: 72svh; justify-content: center; align-items: center; text-align: center; padding-top: 9rem; }
.page-hero.article-hero h1 { max-width: 24ch; margin: 0 auto; }
.page-hero.article-hero .eyebrow { justify-content: center; }
.page-hero.article-hero .article-meta { justify-content: center; }
.page-hero.hero-narrow h1 { max-width: 15ch; }
.page-hero.hero-narrow .lead { max-width: 44ch; }
@media (min-width: 1100px) {
  .page-hero.hero-narrow h1, .page-hero.hero-narrow .lead { max-width: 46%; }
}
.page-hero.hero-right { align-items: flex-end; text-align: right; }
.page-hero.hero-right .eyebrow { flex-direction: row-reverse; }
/* pointer-events: none ist Pflicht. Foto und Verlauf haengen fixiert ueber dem gesamten
   Fenster; ohne das fangen sie Klicks ab, die eigentlich Links weiter unten auf der Seite
   gelten. Genau daran ist der Link „live ansehen" unter dem Booking-Screenshot gescheitert. */
.page-hero.with-photo .photo {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  filter: saturate(.74) brightness(.7);
}
/* Statischer Header: Foto und Verlauf haengen am Viewport — die Berge bleiben
   stehen, Schrift und der folgende Abschnitt schieben sich darueber hinweg.
   Damit das fixierte Bild spaeter nicht durchscheint, bekommt alles nach dem
   Hero einen eigenen Stapelplatz; die fixierten Ebenen liegen darunter. */
.page-hero.with-photo ~ * { position: relative; z-index: 1; }
/* z-index: 1 ist entscheidend — .photo steht im DOM nach ::before und hat
   z-index 0; ohne eigenen z-index läge dieser Verlauf UNTER dem Foto. */
.page-hero.with-photo::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(102deg, rgba(20,18,15,.88) 0%, rgba(20,18,15,.55) 38%, rgba(20,18,15,.14) 68%, rgba(20,18,15,.04) 100%),
    linear-gradient(to bottom, rgba(20,18,15,.5) 0%, rgba(20,18,15,.05) 26%, rgba(20,18,15,.1) 55%, rgba(20,18,15,.62) 100%);
}


/* Vollbild-Hero: Eyebrow oben, Headline einzeilig unten, darunter Lead + Meta */
.page-hero.hero-full { min-height: 100vh; min-height: 100svh; padding: 9rem var(--pad-x) 5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; }
.page-hero.hero-full h1 { max-width: none; font-size: min(4.15vw, 3.9rem); line-height: 1.12; margin: 0; }
/* Vollbild braucht einen kräftigeren Fuß-Verlauf — Lead und Meta liegen sonst auf hellem Wasser */
/* Achtung: .photo steht im DOM nach ::before und hat ebenfalls z-index 0 —
   ohne eigenen z-index liegt der Verlauf UNTER dem Foto und wirkt nicht. */
.page-hero.hero-full::before {
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(20,18,15,.72) 0%, rgba(20,18,15,.34) 42%, rgba(20,18,15,.06) 74%, rgba(20,18,15,0) 100%),
    linear-gradient(to bottom, rgba(20,18,15,.5) 0%, rgba(20,18,15,0) 24%, rgba(20,18,15,.08) 52%, rgba(20,18,15,.8) 100%);
}
/* Der Verlauf übernimmt jetzt die Lesbarkeit — das Foto darf heller bleiben. */
.page-hero.hero-full .photo { filter: saturate(.78) brightness(.74); }
.page-hero.hero-full h1 em { font-size: inherit; }
.page-hero.hero-full .hero-foot { margin-top: 2.6rem; }
.page-hero.hero-full .lead { margin-top: 0; max-width: 52ch; }
.page-hero.hero-full .hero-meta {
  text-align: right; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,234,224,.75); line-height: 2; text-shadow: 0 1px 8px rgba(0,0,0,.55); white-space: nowrap;
}
@media (min-width: 861px) { .page-hero.hero-full h1 { white-space: nowrap; } }
/* schmaler Vollbild-Hero: Text darf umbrechen, damit er nicht ins Motiv läuft */
.page-hero.hero-full.hero-narrow h1 { max-width: 52%; white-space: normal; font-size: min(3.5vw, 3.2rem); }
.page-hero.hero-full.hero-narrow .lead { max-width: 46%; }
@media (max-width: 860px) {
  .page-hero.hero-full { min-height: 88vh; padding-top: 8rem; gap: 2.5rem; }
  .page-hero.hero-full h1 { font-size: clamp(2.3rem, 9vw, 3.6rem); line-height: 1.08; }
  .page-hero.hero-full .hero-foot { grid-template-columns: 1fr; gap: 1.6rem; }
  .page-hero.hero-full .hero-meta { text-align: left; white-space: normal; }
}

.page-hero.with-photo .lead { color: rgba(240,234,224,.9); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.page-hero.with-photo h1 { text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.page-hero.with-photo .eyebrow { text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* ── Bildfenster-Hero (agentur.html) ──
   Links eine Stone-Spalte mit dem Text, rechts das Foto als Panel, dazwischen eine
   Goldlinie. Der Text steht damit auf ruhigem Grund und das Motiv braucht keinen
   Abdunkelungs-Verlauf mehr: statt brightness(.7) reicht .95, der Kamin ist zu sehen.
   Das Foto bleibt fixiert (Parallax wie bei den anderen Foto-Heroes), es beginnt nur
   erst bei 45 % der Fensterbreite. Wer die Spaltenbreite ändert, muss BEIDE Werte
   mitziehen: grid-template-columns und .photo { left }. */
.page-hero.hero-panel { display: grid; grid-template-columns: 45% 55%; padding: 0; align-items: stretch; }
.page-hero.hero-panel::after { display: none; }   /* Goldschimmer entfaellt, der Text steht auf Stone */
/* Vom grossen Diagonalverlauf bleibt nur ein Schleier am oberen Bildrand: ohne ihn
   steht die Navigation (helle Schrift) auf dem hellen Holz und ist nicht zu lesen. */
.page-hero.hero-panel::before {
  left: 45%; right: 0; top: 0; bottom: auto; height: 15rem;
  background: linear-gradient(to bottom, rgba(20,18,15,.75) 0%, rgba(20,18,15,.32) 48%, rgba(20,18,15,0) 100%);
}
.page-hero.hero-panel .photo { left: 45%; filter: saturate(.88) brightness(.95); background-position: 58% center; }
.page-hero.hero-panel .hero-text {
  position: relative; z-index: 2; background: var(--stone);
  padding: 11rem 3.4rem 6rem var(--pad-x);
  display: flex; flex-direction: column; justify-content: flex-end;
  border-right: 1px solid rgba(191,160,106,.35);
}
.page-hero.hero-panel h1 { max-width: none; font-size: clamp(1.9rem, 2.85vw, 2.8rem); }
.page-hero.hero-panel .lead { max-width: 42ch; }
/* Auf Stone braucht nichts davon einen Schatten. */
.page-hero.hero-panel h1,
.page-hero.hero-panel .lead,
.page-hero.hero-panel .eyebrow { text-shadow: none; }
/* Zwischengroessen: die Textspalte bekommt die Haelfte, sonst faellt „Allgemeinen."
   als dritte Zeile allein um. */
@media (min-width: 861px) and (max-width: 1200px) {
  .page-hero.hero-panel { grid-template-columns: 50% 50%; }
  .page-hero.hero-panel .photo,
  .page-hero.hero-panel::before { left: 50%; }
  .page-hero.hero-panel h1 { font-size: clamp(1.7rem, 2.9vw, 2.3rem); }
  .page-hero.hero-panel .hero-text { padding-right: 2.6rem; }
}
@media (max-width: 860px) {
  /* Gestapelt: Foto oben als Band, Text darunter. Fixiert wuerde das Band beim
     Scrollen stehenbleiben und unter dem Text hervorschauen, deshalb absolut. */
  .page-hero.hero-panel { grid-template-columns: 1fr; }
  .page-hero.hero-panel .photo { position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 42vh; }
  .page-hero.hero-panel::before { position: absolute; left: 0; height: 12rem;
    background: linear-gradient(to bottom, rgba(20,18,15,.86) 0%, rgba(20,18,15,.5) 45%, rgba(20,18,15,0) 100%); }
  .page-hero.hero-panel .hero-text {
    margin-top: 42vh; padding: 3.5rem var(--pad-x) 4rem;
    border-right: none; border-top: 1px solid rgba(191,160,106,.35);
  }
}

/* Hero mit Grafik daneben (Rechner) */
.page-hero.hero-split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 6vw; align-items: center; }
.page-hero.hero-split h1 { max-width: 14ch; }
.page-hero.hero-split .lead { max-width: 48ch; }
.lever-sketch { width: 100%; max-width: 560px; margin: 0; }
.lever-sketch svg { width: 100%; height: auto; display: block; overflow: visible; }
.lever-sketch figcaption { font-size: .68rem; letter-spacing: .12em; color: var(--fog); margin-top: 1.6rem; line-height: 1.8; }
@media (max-width: 980px) { .page-hero.hero-split { grid-template-columns: 1fr; gap: 3.5rem; } .page-hero.hero-split h1, .page-hero.hero-split .lead { max-width: none; } }

/* ── Typography helpers ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .65rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--gold); font-weight: 400;
}
.eyebrow::before { content: ''; width: 1.5rem; height: 1px; background: var(--gold); }
.eyebrow.no-line::before { display: none; }

.h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); letter-spacing: -.01em; }
.h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 400; }
.lead { font-size: 1.05rem; line-height: 1.85; }
.muted { color: var(--fog); }
.gold { color: var(--gold); }

/* ── Sections ── */
section { padding: var(--section-y) var(--pad-x); }
.bg-stone { background: var(--stone); color: var(--linen); }
.bg-stone .muted { color: var(--fog); }
.bg-stone-md { background: var(--stone-md); color: var(--linen); }
.bg-linen { background: var(--linen); }
.bg-snow { background: var(--snow); }
.bg-pine { background: var(--pine); color: var(--linen); }

.container { max-width: 1280px; margin: 0 auto; }
.narrow { max-width: 780px; margin: 0 auto; }

.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: end; margin-bottom: 5rem; }
.section-head .h2 { margin-top: 1.2rem; }
.section-head p { font-size: .9rem; line-height: 1.9; max-width: 44ch; }
/* .section-head.narrow gab es fuer das alte, 1020 px schmale Teamraster. Seit das Raster die volle
   Containerbreite nutzt, wuerde die Headline gegenueber den Bildern eingerueckt stehen — Regel raus. */
/* Zentrierter Kopf: Eyebrow, Headline und Lead sind drei Grid-Zeilen — die 4vw
   aus .section-head sind als SPALTENabstand gedacht und rissen die drei Bloecke
   sonst um ~60 px auseinander. Zeilenabstand kommt hier aus den Margins:
   je rund eine Zeile. */
.section-head.center { grid-template-columns: 1fr; row-gap: 0; text-align: center; }
/* Abstaende hier immer TINTE zu TINTE denken, nicht Box zu Box: Cormorant hat sehr
   hohe Ober- und Unterlaengen, dazu kommt der halbe Durchschuss von Eyebrow und Lead.
   Die Boxen liegen deshalb rund 20 px enger beieinander, als es aussieht.
   Gesetzte Staffelung, gemessen bei 1440 px (Zeilenabstand IN der Headline: 17 px):
     Eyebrow -> Headline  27 px  (Luft, aber weniger als der Abstand zum Lead)
     Headline -> Lead     32 px  (deutlich weiter: eigener Block, aber angebunden)
   Beides mal die Haelfte des urspruenglichen 4vw-Gaps. Wer hier schraubt: die Regel ist,
   dass der Lead WEITER weg stehen muss als der Zeilenabstand der Headline — sonst liest
   sich die erste Lead-Zeile wie eine vierte Headline-Zeile. */
.section-head.center .h2 { margin-top: .95rem; }
.section-head.center .eyebrow { justify-content: center; line-height: 1; }
.section-head.center p { margin: 1rem auto 0; line-height: 1.8; max-width: 56ch; text-wrap: balance; }
/* 56ch statt 44ch: kurze Leads passen in eine Zeile. text-wrap:balance verteilt
   laengere gleichmaessig — kein einzelnes Wort mehr allein in der letzten Zeile. */
.section-head.center .eyebrow::before { display: none; }

/* ── Grid / cards ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.grid-gap { gap: 2rem; }

.card {
  padding: 3rem 2.5rem; position: relative; transition: background .4s;
  border: 1px solid rgba(191,160,106,.12);
}
.bg-stone .card:hover, .bg-stone-md .card:hover { background: rgba(191,160,106,.04); }
.bg-linen .card, .bg-snow .card { background: #fff; border-color: var(--linen-dk); }
.bg-linen .card:hover, .bg-snow .card:hover { border-color: var(--gold); }
.card .num {
  font-family: var(--font-display); font-size: 3rem; line-height: 1;
  color: rgba(191,160,106,.25); margin-bottom: 1.5rem; display: block;
}
.card h3 { font-size: 1.35rem; font-weight: 400; margin-bottom: 1rem; }
.card p { font-size: .85rem; line-height: 1.85; }
.bg-stone .card p, .bg-stone-md .card p { color: var(--fog); }
.card .stat { font-family: var(--font-display); font-size: 2.6rem; color: var(--gold-lt); line-height: 1; display: block; margin-bottom: .5rem; }
.card .stat-label { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--fog); }
/* Kundenlogos sind weiss hinterlegt - auf hellen Cards invertieren, sonst unsichtbar */
.case-logo { filter: invert(1); }
.case-result { border-top: 1px solid rgba(191,160,106,.3); margin-top: 1.5rem; padding-top: 1.1rem; }
.case-result .k { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .5rem; }
.case-result p { font-size: .85rem; line-height: 1.75; }
.card-link { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .6rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); transition: gap .3s; }
.card-link:hover { gap: 1rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.chip {
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .7rem;
  color: rgba(191,160,106,.7); border: 1px solid rgba(191,160,106,.25);
}
/* auf hellem Grund braucht das Gold mehr Tiefe, sonst verschwindet der Chip */
.bg-linen .chip, .bg-snow .chip { color: #8a6c3a; border-color: rgba(138,108,58,.4); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 1.1rem 3rem;
  font-family: var(--font-body); font-size: .72rem; font-weight: 300; letter-spacing: .2em;
  text-transform: uppercase; text-align: center;
  /* Reset fuer <button>: ohne das setzt der Browser Rahmen, Rundung und eigene Schrift,
     und der Knopf sieht neben den <a class="btn"> wie ein Fremdkoerper aus. */
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 0;
  transition: background .3s, color .3s, border-color .3s, transform .3s; cursor: none;
}
button.btn { cursor: none; }
.btn-gold:active, .btn-stone:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: var(--stone); }
.btn-gold:hover { background: var(--gold-lt); }
.btn-stone { background: var(--stone); color: var(--linen); }
.btn-stone:hover { background: var(--stone-md); }
.btn-ghost { background: transparent; border: 1px solid rgba(191,160,106,.4); color: var(--linen); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-lt); }
.bg-linen .btn-ghost, .bg-snow .btn-ghost { color: var(--stone); border-color: var(--stone); }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Stats bar ── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.stats .stat-item { padding: 3rem var(--pad-x); text-align: center; border-right: 1px solid rgba(191,160,106,.15); }
.stats .stat-item:last-child { border-right: none; }
.stats .big { font-family: var(--font-display); font-size: clamp(2.4rem, 3.8vw, 3.6rem); color: var(--gold-lt); line-height: 1; display: block; margin-bottom: .75rem; }
.stats .label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(240,234,224,.5); line-height: 1.7; }
.stats .src { display: block; font-size: .6rem; color: rgba(240,234,224,.3); margin-top: .5rem; letter-spacing: .05em; text-transform: none; }

/* ── Foto-Essay (Fotografie-Seite) ── */
/* Bewusst kein gleichmäßiges Raster: wechselnde Breiten, Versätze und viel Luft. */
.essay { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; row-gap: 7rem; align-items: start; }
.essay .item { min-width: 0; }
.essay figure { margin: 0; overflow: hidden; background: var(--stone-lt); }
.essay img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.82) brightness(.96); transition: transform 1.2s ease, filter .7s ease; }
.essay .item:hover img { transform: scale(1.035); filter: saturate(1) brightness(1); }
.essay .cap { display: block; margin-top: 1.1rem; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.essay .note { font-size: .84rem; line-height: 1.95; color: var(--fog); margin-top: .8rem; max-width: 42ch; }

.essay .text { align-self: center; }
.essay .text h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.2vw, 2.1rem); color: var(--linen); line-height: 1.25; }
.essay .text .note { margin-top: 1.2rem; }

.essay .word { align-self: center; }
.essay .word p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 1.85vw, 1.85rem); line-height: 1.55; color: var(--linen); }
.essay .word p em { color: var(--gold-lt); font-style: normal; }
.essay .word .by { display: block; margin-top: 1.5rem; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); }

/* Rechner: Quellenzeile in den „Wie wir rechnen"-Karten und die Markierung „Annahme"
   in der Ergebnisliste. Beides klein und ruhig, es soll belegen, nicht ablenken. */
.card p.src { font-size: .72rem; line-height: 1.8; color: var(--fog); margin-top: 1.2rem;
  padding-top: 1.2rem; border-top: 1px solid rgba(191,160,106,.18); }
.calc-results .row.grau .v, .calc-results .row.grau .k { color: var(--fog); }
.calc-results .row .q {
  font-style: normal; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(191,160,106,.35); padding: .18rem .5rem; margin-left: .7rem;
}

/* ── Fotostrecken-Teaser (referenzen.html) ──
   Fuenf Bilder aus dem Foto-Essay der Fotografie-Seite, als Komposition statt als Reihe.
   Zwei Bahnen nebeneinander, KEIN Raster: im Raster teilen sich beide Spalten dieselben
   Zeilenhoehen, dadurch klaffte rechts unter dem Zimmerbild ein Loch. Als eigene Bahnen
   stapelt jede Seite dicht und beide enden fast gleich tief.
   Links (41 %): Becken hoch, darunter die Gastgeberin quer.
   Rechts: Zimmer quer, darunter das Paar aus Dampf (hoch) und Teller (quer, unten buendig).
   Die Prozentwerte sind so gewaehlt, dass beide Bahnen auf gleiche Hoehe kommen. Wer ein
   Bild oder ein aspect-ratio tauscht, prueft die Unterkanten nach. Die Formate entsprechen
   den Originaldateien, es wird nichts beschnitten. */
.foto-teaser { display: flex; gap: 2rem; align-items: flex-start; }
.foto-teaser .bahn { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.foto-teaser .bahn-l { flex: 0 0 41%; }
.foto-teaser .bahn-r { flex: 1 1 auto; }
.foto-teaser .paar { display: flex; gap: 2rem; align-items: flex-end; }
.foto-teaser .paar .f3 { flex: 0 0 52%; }
/* Die freie Flaeche rechts neben dem Dampfbild traegt den Textlink: er steht direkt ueber
   dem Teller, statt allein unter dem ganzen Block zu haengen. Der Link kommt zweimal im
   Markup vor, weil CSS ihn nicht aus dem Paar herausheben kann: .link-breit steht hier,
   .link-schmal unter dem Block und uebernimmt unter 861 px. Immer nur einer ist sichtbar. */
.foto-teaser .schluss { flex: 1 1 auto; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 1.8rem; min-width: 0; }
.foto-teaser .schluss .f4 { flex: 0 0 auto; }
.foto-teaser .schluss .card-link { margin-top: 0; }
.card-link.link-schmal { display: none; }
.foto-teaser .ft { min-width: 0; }
.foto-teaser figure { margin: 0; overflow: hidden; background: var(--linen-dk); }
.foto-teaser img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.9); transition: transform 1.2s ease, filter .7s ease; }
.foto-teaser .ft:hover img { transform: scale(1.035); filter: saturate(1); }

.foto-teaser .f1 figure { aspect-ratio: 3 / 4; }
.foto-teaser .f2 figure { aspect-ratio: 3 / 2; }
.foto-teaser .f3 figure { aspect-ratio: 2 / 3; }
.foto-teaser .f4 figure { aspect-ratio: 3 / 2; }
.foto-teaser .f5 figure { aspect-ratio: 3 / 2; }
.foto-teaser + .card-link { margin-top: 3.5rem; }

@media (max-width: 860px) {
  /* Untereinander: Becken, Gastgeberin, Zimmer, zum Schluss das Paar nebeneinander. */
  .foto-teaser { flex-direction: column; gap: 1.2rem; }
  .foto-teaser .bahn { gap: 1.2rem; }
  .foto-teaser .bahn-l { flex: 1 1 auto; }
  .foto-teaser .paar { gap: 1.2rem; align-items: flex-start; }
  .foto-teaser .schluss { justify-content: flex-start; margin-top: 3rem; }
  .foto-teaser .schluss .card-link.link-breit { display: none; }
  .card-link.link-schmal { display: inline-flex; }
}

/* Platzierung — bewusst asymmetrisch, Versätze brechen die Reihen auf */
.e-a  { grid-column: 1 / 6;  }   .e-a figure  { aspect-ratio: 3 / 4;  }
.e-w1 { grid-column: 7 / 13; }
.e-t2 { grid-column: 1 / 5;  }
.e-b  { grid-column: 5 / 13; }   .e-b figure  { aspect-ratio: 3 / 2;  }
.e-c  { grid-column: 1 / 13; }   .e-c figure  { aspect-ratio: 16 / 9; }
.e-d  { grid-column: 1 / 8;  }   .e-d figure  { aspect-ratio: 3 / 2;  }
.e-t3 { grid-column: 9 / 13; }
.e-e  { grid-column: 1 / 5; margin-top: 4rem; }   .e-e figure { aspect-ratio: 1 / 1; }
.e-f  { grid-column: 5 / 13; }   .e-f figure  { aspect-ratio: 3 / 2;  }
.e-g  { grid-column: 1 / 5;  }   .e-g figure  { aspect-ratio: 2 / 3;  }
.e-h  { grid-column: 5 / 9; margin-top: 6rem; }   .e-h figure { aspect-ratio: 2 / 3; }
.e-w2 { grid-column: 10 / 13; }
.e-i  { grid-column: 1 / 7; margin-top: 3rem; }   .e-i figure { aspect-ratio: 3 / 2; }
.e-j  { grid-column: 7 / 13; }   .e-j figure  { aspect-ratio: 16 / 9; }

@media (max-width: 900px) {
  .essay { grid-template-columns: 1fr; row-gap: 3.5rem; }
  .essay .item, .essay .word, .essay .text { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .essay .note { max-width: none; }
}

/* ── Hinter der Linse ── */
.lens { display: grid; grid-template-columns: 5fr 6fr; gap: 6vw; align-items: center; }
.lens figure { margin: 0; overflow: hidden; background: var(--linen-dk); aspect-ratio: 3 / 4; }
.lens img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.88); transition: transform 1.1s ease; }
.lens figure:hover img { transform: scale(1.03); }
.lens figcaption { margin-top: 1rem; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.lens .body p { font-size: .92rem; line-height: 1.95; color: #4a4540; }
.lens .body p + p { margin-top: 1.2rem; }
@media (max-width: 860px) { .lens { grid-template-columns: 1fr; gap: 2.8rem; } .lens figure { aspect-ratio: 4 / 5; } }

/* ── Fünfer-Raster: 3 oben, 2 breitere darunter ── */
.grid-5 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
.grid-5.grid-gap { gap: 2rem; }
.grid-5 > :nth-child(-n+3) { grid-column: span 2; }
.grid-5 > :nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1000px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } .grid-5 > * { grid-column: span 1 !important; } }
@media (max-width: 640px)  { .grid-5 { grid-template-columns: 1fr; } }

/* ── Laptop-Mockup (Website & Buchung) ──────────────────────────────────
   Einzige Stelle im Projekt mit border-radius und weichen Schatten: ein
   Notebook hat nun mal gerundete Ecken und steht auf einer Flaeche.
   Bewusste Ausnahme von der Scharfkantigkeit, nicht Schlamperei.

   Vorlage 1:1 MacBook Pro 14" (M-Serie): Breite 312,6 mm, Tiefe 221,2 mm
   (= 0,708 B), Boden 11 mm (0,035 B), Deckel 4,5 mm (0,0145 B), Eckradius
   in der Draufsicht 12 mm (0,038 B), Display 16:10,4 mit Notch. Kein
   Herstellerlogo (Markenrecht).

   Das Geraet wird ueber die Scrollposition gesteuert (siehe main.js):
   geschlossen und weggedreht -> klappt auf und dreht sich zum Betrachter
   -> steht halbschraeg im Raum -> klappt wieder zu und dreht sich weg.

   Echtes 3D als zwei GESCHLOSSENE KOERPER. Ober-/Unterseite sind Flaechen
   mit border-radius; die Seitenwaende (.mac-rim) sind aus _build/services.py
   generierte Segmente, die dem Eckradius folgen (4 gerade + 4x4 Eck-
   Segmente je Koerper). Jede Flaeche zeigt mit backface-visibility:hidden
   nur nach aussen. Alle Masse haengen an --w. */
.mac-scene { position: relative; height: 200vh; }
.mac-section .section-head { margin-bottom: 1rem; }
/* Ausnahme (Marios Wunsch): das MacBook klappt VOR die Menueleiste auf, als
   kaeme es dem Betrachter entgegen. Dafuer darf der Abschnitt keinen eigenen
   Stapelkontext bilden (z-index:auto statt 1 aus der Hero-Regel), und der
   Sticky-Rahmen liegt mit 300 ueber der Nav (200). Der Abschnittshintergrund
   bleibt darunter — nur das Geraet ragt ueber das Menue. */
.page-hero.with-photo ~ .mac-section { z-index: auto; }
/* Der Sticky-Rahmen ist bewusst nur 60vh hoch und haengt bei 20vh: so steht das
   Geraet beim Hereinscrollen direkt unter der Ueberschrift statt eine halbe
   Bildschirmhoehe tiefer, und im Halt ist es trotzdem mittig im Viewport. */
.mac-sticky {
  position: sticky; top: 20vh; height: 60vh; z-index: 300;
  display: flex; align-items: center; justify-content: center;
}
.mac-stage {
  --open: 0; --yaw: -38deg; --tilt: 38deg; --lift: -160px; --scale: .64;
  --w: min(660px, 62vw);
  --d: calc(var(--w) * .708);     /* Tiefe = Deckelhoehe */
  --t: calc(var(--w) * .035);     /* Dicke Bodenplatte */
  --tl: calc(var(--w) * .0145);   /* Dicke Deckel */
  --r: calc(var(--w) * .038);     /* Eckradius Draufsicht */
  position: relative; width: var(--w);
  perspective: 1900px; perspective-origin: 50% 28%;
}
.mac {
  position: relative; width: 100%;
  transform-style: preserve-3d;
  /* --tilt = Blick von oben. rotateX(+) kippt die Oberkante WEG und hebt die
     Bodenplatte zum Betrachter — man sieht die Unterseite. Deshalb negiert. */
  transform: translateY(var(--lift)) scale(var(--scale)) rotateX(calc(-1 * var(--tilt))) rotateY(var(--yaw));
  /* kein will-change: das wuerde die Raster-Aufloesung im Startzustand (klein,
     weggedreht) einfrieren und beim Herandrehen nur hochskalieren -> blockig. */
}
.mac-face { position: absolute; backface-visibility: hidden; }

/* Aluminium (Space Grey) */
.mac-rim  { top: 0; height: var(--t); transform-origin: 0 0;
  background: linear-gradient(180deg, #b9b3a8 0%, #a39c90 14%, #857e72 52%, #635d54 88%, #524d46 100%); }
.mac-lrim { top: 0; height: var(--tl); transform-origin: 0 0;
  background: linear-gradient(180deg, #b4ada2 0%, #8d867a 60%, #6c665d 100%); }

/* ── Deckel: Scharnier an der Unterkante, Koerper bei z in [-tl, 0] ── */
.mac-lid {
  position: relative; transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateX(calc(-90deg + var(--open) * 99deg));
}
.mac-lid-face {
  position: relative; backface-visibility: hidden;
  aspect-ratio: 1 / .708;
  border-radius: var(--r);
  background: #0a0a0a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);   /* Alu-Rand um das schwarze Glas */
}
.mac-lid-back {
  inset: 0;
  transform: translateZ(calc(-1 * var(--tl))) rotateY(180deg);
  border-radius: var(--r);
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, rgba(255,255,255,.14), transparent 70%),
    linear-gradient(196deg, #b6b0a5 0%, #8e877b 26%, #67625a 66%, #4a463f 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18), inset 0 0 14px rgba(0,0,0,.14);   /* gerundete Kante */
}

/* Display: duenner Rahmen, oben gerundete Ecken, Notch mit Kamera */
.mac-screen {
  position: absolute; inset: 3.6% 1.5% 4.1%; overflow: hidden;
  background: #000; border-radius: 9px 9px 3px 3px;
}
.mac-menubar {
  /* beginnt 1,5 px unter der Display-Oberkante: darueber bleibt das Display schwarz (= Rahmen). An der Kante lagen
     sonst helle Menueleiste und schwarze Notch uebereinander, und der Compositor mischte an der Kantenzeile beide
     halbdeckend -> heller Hauch genau ueber der Notch (Mario, 6.9.). .mac-screen clippt (overflow hidden), deshalb
     kann die Notch die Kante nicht von aussen ueberdecken — die Menueleiste muss weichen. */
  position: absolute; inset: 2px 0 auto 0; z-index: 4; height: calc(4.6% - 2px);
  background: rgba(233,231,228,.96); border-bottom: 1px solid rgba(0,0,0,.08);
  font-family: var(--font-body); font-size: 7.5px; letter-spacing: .01em; color: #2a2a2a; white-space: nowrap;
}
/* Menue links endet vor der Notch, Statusbereich rechts beginnt dahinter — wie in macOS */
.mac-menubar .left { position: absolute; left: 1.6%; right: 55%; top: 0; bottom: 0; display: flex; align-items: center; gap: 2.4%; overflow: hidden; }
.mac-menubar .left span:first-child { font-weight: 600; }
.mac-menubar .clock { position: absolute; right: 1.6%; top: 0; bottom: 0; display: flex; align-items: center; }
/* Notch wie beim MacBook Pro 14": ~11 % der Displaybreite, unten gerundet, oben gerade in den schwarzen Rahmen.
   Kamera mittig mit Glanz, rechts daneben die winzige Anzeige-LED (aus). Vorher: 6 % breit, ein 4-px-Punkt. */
.mac-notch {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);   /* bis an die Display-Oberkante, deckt die Menueleisten-Kante von oben */
  width: 11%; height: calc(100% + 2px); background: #000; border-radius: 0 0 7px 7px;
}
/* Keine Hohlkehlen (Mario: "zwei komische schwarze Haken") — die Notch geht sauber gerade in den Rahmen ueber. */
.mac-notch i {   /* Kamera */
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
  width: 5.5px; height: 5.5px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #5a6b78 0%, #1a242c 42%, #04070a 72%, #0b1218 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.mac-notch i::before {   /* Glanzpunkt */
  content: ''; position: absolute; left: 24%; top: 18%; width: 28%; height: 18%; border-radius: 50%; background: rgba(255,255,255,.45);
}
.mac-notch i::after {    /* Anzeige-LED, aus */
  content: ''; position: absolute; left: calc(100% + 4px); top: 34%; width: 1.6px; height: 1.6px; border-radius: 50%; background: #10301b;
}
.mac-screen img {
  position: absolute; left: 0; top: calc(4.6% + 34px); width: 100%; display: block;
  animation: browse 30s ease-in-out infinite alternate;
}
@keyframes browse { from { transform: translateY(0); } to { transform: translateY(-38%); } }
.mac-glass {
  position: absolute; inset: 3px 0 0 0; z-index: 5; pointer-events: none; border-radius: inherit;   /* startet unter der Display-Oberkante: kein Reflex-Hauch auf dem schwarzen Band */
  background:
    linear-gradient(112deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.04) 21%, rgba(255,255,255,0) 41%),
    radial-gradient(ellipse 82% 62% at 50% 112%, rgba(0,0,0,.18), transparent 62%);
}
.mac-off {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: #06070a; opacity: calc((1 - var(--open)) * 2.4);
}
/* Blende: vier schwarze Balken im Rahmenton, die den Display-Rand von aussen um 1,5 px ueberdecken. Grund: das Display
   ist ein geclippter, gerundeter Layer in 3D — an dessen Kante kann die GPU einen hellen Alpha-Saum zeichnen (Mario sah
   ihn zwischen Notch und Rahmen, positionsabhaengig; in SwiftShader nicht reproduzierbar). Was unter der Blende liegt,
   kann nicht mehr durchscheinen. Liegt ausserhalb von .mac-screen, damit sie nicht selbst geclippt wird. */
.mac-matte { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.mac-matte::before, .mac-matte::after { content: ''; position: absolute; background: #0a0a0a; }
.mac-matte::before { left: calc(1.5% - 2px); right: calc(1.5% - 2px); top: calc(3.6% - 2px); height: 3.5px;
}
.mac-matte::after  { left: calc(1.5% - 2px); right: calc(1.5% - 2px); bottom: calc(4.1% - 2px); height: 3.5px; }
.mac-matte i { position: absolute; top: calc(3.6% - 2px); bottom: calc(4.1% - 2px); width: 3.5px; background: #0a0a0a; }
.mac-matte i:first-child { left: calc(1.5% - 2px); }
.mac-matte i:last-child { right: calc(1.5% - 2px); }

/* ── Browserfenster unter der Menueleiste ── */
.browser-bar {
  position: absolute; left: 0; right: 0; top: 4.6%; z-index: 3; height: 34px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: linear-gradient(180deg, #f2f0ee 0%, #e4e1de 100%);
  border-bottom: 1px solid #d1cdc9;
}
.browser-dots { display: flex; gap: 7px; flex: 0 0 auto; }
.browser-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.browser-dots i:nth-child(1) { background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }
.browser-dots i:nth-child(2) { background: #febc2e; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }
.browser-dots i:nth-child(3) { background: #28c840; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.14); }
.browser-url {
  flex: 1 1 auto; max-width: 62%; margin: 0 auto; height: 20px; border-radius: 5px;
  background: #fff; border: 1px solid #dcd8d4; display: flex; align-items: center;
  justify-content: center; gap: 6px;
  font-family: var(--font-body); font-size: 10px; letter-spacing: .02em; color: #8b8781;
}
.browser-url svg { width: 9px; height: 9px; flex: 0 0 auto; }
.browser-spacer { flex: 0 0 44px; }

/* ── Bodenplatte: Oberseite auf der Scharnierlinie (y=0), Tiefe nach vorn ── */
.mac-body { position: absolute; left: 0; top: 100%; width: 100%; height: 0; transform-style: preserve-3d; }
.mac-deck, .mac-bottom { left: 0; top: 0; width: 100%; height: 0; padding-bottom: 70.8%; transform-origin: 50% 0; border-radius: var(--r); }
.mac-deck {
  transform: rotateX(90deg);
  background: linear-gradient(180deg, #4a463f 0%, #57524a 8%, #6c665b 50%, #7e776b 90%, #857e72 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14), inset 0 0 14px rgba(0,0,0,.18);
}
.mac-deck::before {   /* Schatten des Scharniers */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5%;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.mac-bottom {
  transform: translateY(var(--t)) rotateX(90deg) rotateY(180deg);
  background: #3d3934;
}
.mac-rim.f::after {   /* Griffmulde an der Vorderkante */
  content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 14%; height: 55%; border-radius: 0 0 40px 40px;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.1));
}
.mac-rim.k { background: #262421; }   /* Rueckseite = Scharnierband, schwarz */
.mac-lrim.k { background: #262421; }

/* Tastatur, Lautsprecher, Trackpad (Layout MacBook Pro 14").
   Die Oberseite wird stark verkuerzt betrachtet (Tilt 6-9 Grad): 1-px-Linien
   aliasen dann zu gepunkteten, welligen Strichen. Deshalb sind alle Kanten
   hier breiter (senkrecht 3 px, waagrecht 1,5 px) und flach im Kontrast —
   das bleibt in der Verkuerzung eine ruhige, gerade Linie. */
.mac-keys, .mac-pad, .mac-speak { opacity: calc(var(--open) * 3); }
.mac-keys {
  position: absolute; left: 6%; right: 6%; top: 5%; height: 42%;
  border-radius: 6px; background-color: #121110;
  background-image:
    repeating-linear-gradient(90deg,  rgba(255,255,255,0) 0 calc(7.14% - 1.5px), rgba(255,255,255,.07) calc(7.14% - 1.5px) 7.14%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0) 0 calc(16.66% - 3px), rgba(255,255,255,.07) calc(16.66% - 3px) 16.66%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7);
}
.mac-speak {
  position: absolute; top: 5%; height: 42%; width: 3.4%; border-radius: 3px;
  background-image: radial-gradient(circle, rgba(0,0,0,.42) 0 34%, transparent 40%);
  background-size: 5px 5px;
}
.mac-speak.l { left: 1.9%; }
.mac-speak.r { right: 1.9%; }
.mac-pad {
  position: absolute; left: 29%; right: 29%; top: 52%; height: 41%;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.07));
  box-shadow: inset 0 3px 0 -1.5px rgba(0,0,0,.18), inset 0 -3px 0 -1.5px rgba(255,255,255,.14),
              inset 1.5px 0 0 rgba(0,0,0,.14), inset -1.5px 0 0 rgba(0,0,0,.14);
}

.mac-keys {
  position: absolute; left: 6%; right: 6%; top: 5%; height: 42%;
  display: flex; flex-direction: column; gap: 1.4%; padding: 1.2% .7%;
  border-radius: 6px; background: #131211;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.7);
}
.mac-keys .row { display: flex; gap: .5%; flex: 1 1 0; }
.mac-keys .row.fn { flex-grow: .62; }
.mac-keys .k {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; font: 500 8.5px/1 var(--font-body); letter-spacing: .02em;
  /* Modifier-Symbole (⌘ ⌥ ⇧ ⌃ ⇥ ⇪) hat Jost nicht — Systemfonts als Fallback */
  font-family: var(--font-body), 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
  color: rgba(228,223,215,.66); font-style: normal;
  background: linear-gradient(180deg, #242321, #1a1917);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.07), 0 1px 0 rgba(0,0,0,.65);
}
.mac-keys .k.sm { font-size: 6px; color: rgba(228,223,215,.5); }
.mac-keys .k.lo { justify-content: flex-start; align-items: flex-end; padding: 0 0 6% 7%; }
.mac-keys .k.ro { justify-content: flex-end; align-items: flex-end; padding: 0 7% 6% 0; }

/* Schatten: Ebene auf dem Tisch, knapp unter der Bodenplatte. Bewusst OHNE
   filter:blur — ein gefilterter Layer im preserve-3d-Baum wird von Chrome
   falsch einsortiert; die Weichheit kommt aus dem Verlauf. */
.mac-shadow {
  position: absolute; left: -8%; width: 116%; top: calc(var(--d) * -.06); height: 0; padding-bottom: 84%;
  transform-origin: 50% 0; transform: translateY(calc(var(--t) + 1px)) rotateX(90deg);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.6) 0%, rgba(0,0,0,.42) 30%, rgba(0,0,0,.14) 62%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.laptop-note { text-align: center; margin-top: 1.6rem; font-size: .8rem; line-height: 1.9; color: var(--fog); }
.laptop-note a { color: var(--gold); }

@media (max-width: 700px) {
  .mac-scene { height: 170vh; }
  .mac-stage { --w: 80vw; perspective: 2600px; perspective-origin: 50% 30%; }
  .mac-menubar { font-size: 4.5px; }
  .mac-keys .k { font-size: 5px; }
  .mac-keys .k.sm { font-size: 3.5px; }
  .browser-bar { height: 22px; padding: 0 8px; }
  .browser-dots i { width: 7px; height: 7px; }
  .browser-url { height: 14px; font-size: 7px; }
  .mac-screen img { top: calc(4.6% + 22px); }
}
@media (prefers-reduced-motion: reduce) {
  .mac-scene { height: auto; }
  .mac-sticky { position: static; height: auto; padding: 1rem 0 3rem; }
  .mac-stage { --open: 1; --yaw: -10deg; --tilt: 9deg; --lift: -80px; --scale: 1; }
  .mac-screen img { animation: none; }
}

/* ── Geraete-Paar (referenzen.html) ──────────────────────────────────
   Dieselben beiden Geraete wie auf den Leistungsseiten, hier aber ohne die
   Scroll-Inszenierung: fest gestellte Werte fuer --yaw/--tilt/--scale (dieselben,
   die auch bei prefers-reduced-motion greifen), leicht zueinander gedreht, auf
   einer Standlinie. Deshalb steht hier weder .mac-scene noch .phone-scene und
   auch keine ID: das Skript in main.js sucht nach den IDs und laesst das Paar
   dadurch in Ruhe. */
.duo { display: flex; align-items: flex-end; justify-content: center; gap: 3.5vw; margin-top: 3rem; }
.duo .saeule { display: flex; flex-direction: column; align-items: center; }
.duo .mac-stage {
  --open: 1; --yaw: -13deg; --tilt: 10deg; --lift: 0px; --scale: 1;
  --w: min(560px, 45vw);
  margin-bottom: calc(var(--w) * .30);   /* das Geraet steht mit der Tastatur unter seiner Box */
}
.duo .phone-stage { --pw: min(200px, 16.5vw); --yaw: 18deg; --tilt: 6deg; --lift: 0px; --scale: 1; }
.duo .cap {
  margin-top: 2rem; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); display: inline-flex; align-items: center; gap: .6rem; transition: gap .3s;
}
.duo .saeule:hover .cap { gap: 1rem; }
.duo-note { text-align: center; margin-top: 3.5rem; }
@media (max-width: 900px) {
  .duo { flex-direction: column; align-items: center; gap: 3rem; margin-top: 2rem; }
  /* 72vw statt mehr: gedreht ragt das Geraet ueber seine Box hinaus und wuerde sonst
     am rechten Rand abgeschnitten. */
  .duo .mac-stage { --w: 72vw; margin-bottom: calc(var(--w) * .30); }
  .duo .phone-stage { --pw: 44vw; }
}

/* ── Geraete-Paar im Hero (referenzen.html) ──────────────────────────
   Beim Laden fahren beide Geraete von unten herein, das MacBook klappt dabei auf.
   Der Deckelwinkel haengt an --open; damit eine Custom Property animierbar ist,
   muss sie mit @property als Zahl angemeldet sein, sonst springt sie nur von 0 auf 1.
   Browser ohne @property zeigen das Geraet einfach offen, der Rest der Animation
   laeuft trotzdem. */
@property --open { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --scale { syntax: "<number>"; inherits: true; initial-value: 1; }

/* Der Inhalt haengt in einem .container, damit Eyebrow und Headline auf derselben
   Kante beginnen wie jeder Abschnitt darunter (max-width 1280, zentriert). Ohne den
   Container saesse der Text bei 4vw und auf breiten Schirmen deutlich weiter links. */
.page-hero.hero-duo { display: flex; align-items: center; padding: 10rem var(--pad-x) 6rem; background: var(--stone); }
.hero-duo-raster {
  width: 100%; position: relative; z-index: 2;
  display: grid; grid-template-columns: 40% 60%; align-items: center; gap: 2vw;
}
/* Das Foto liegt nur noch als Andeutung hinter allem (5 %), der Rest ist Stone.
   Die Geraete sollen der Vordergrund sein, nicht der gedeckte Tisch. */
.page-hero.hero-duo .photo { opacity: .05; filter: saturate(.7) brightness(.9); }
/* Der kraeftige Diagonalverlauf der anderen Foto-Heroes waere hier zu viel: bei 20 %
   Bild braucht es nur noch etwas Tiefe oben (Navigation) und unten. */
.page-hero.hero-duo::before {
  background: linear-gradient(to bottom, rgba(20,18,15,.55) 0%, rgba(20,18,15,0) 26%,
    rgba(20,18,15,0) 70%, rgba(20,18,15,.45) 100%);
}
.hero-duo .hero-text { position: relative; z-index: 2; }
.hero-duo h1 { max-width: none; }
.hero-duo .lead { max-width: 40ch; }
.hero-duo .duo { margin-top: 0; gap: 2.5vw; }
.hero-duo .mac-stage { --w: min(470px, 33vw); }
.hero-duo .phone-stage { --pw: min(152px, 11vw); }
.hero-duo .cap { margin-top: 1.3rem; }
.hero-duo .saeule { animation: duo-rein 1.15s cubic-bezier(.22,.61,.36,1) both; }
.hero-duo .saeule.a1 { animation-delay: .2s; }
.hero-duo .saeule.a2 { animation-delay: .45s; }
@keyframes duo-rein { from { opacity: 0; transform: translateY(52px); } to { opacity: 1; transform: none; } }
.hero-duo .mac-stage { animation: mac-auf 1.6s cubic-bezier(.22,.61,.36,1) .4s both; }
@keyframes mac-auf { from { --open: 0; --scale: .9; } to { --open: 1; --scale: 1; } }
/* Nach dem Auftritt uebernimmt main.js: eine gefuellte Animation wuerde die per
   JS gesetzten Werte sonst ueberstimmen. */
.hero-duo.intro-fertig .mac-stage, .hero-duo.intro-fertig .saeule { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-duo .saeule, .hero-duo .mac-stage { animation: none; }
}
@media (max-width: 1000px) {
  /* Text oben, Geraete darunter nebeneinander (nicht gestapelt wie im alten Abschnitt). */
  .page-hero.hero-duo { padding-top: 8.5rem; padding-bottom: 4rem; }
  .hero-duo-raster { grid-template-columns: 1fr; gap: 3rem; }
  /* Das gedrehte MacBook ragt links ueber seine Box hinaus. Bei 56vw wurde die Tastatur
     am Bildschirmrand abgeschnitten, deshalb 48vw plus etwas Luft an den Seiten. */
  .hero-duo .duo { flex-direction: row; align-items: flex-end; gap: 4vw; padding: 0 3vw; }
  .hero-duo .mac-stage { --w: 48vw; margin-bottom: calc(var(--w) * .30); }
  .hero-duo .phone-stage { --pw: 18vw; }
  .hero-duo .cap { font-size: .55rem; margin-top: .9rem; }
}

/* ── Smartphone-Mockup (Social Media) ──────────────────────────────────
   Gleiche Bauweise wie das MacBook: ein geschlossener Koerper aus Vorder-
   und Rueckseite plus generierten Seitenwaenden (.phone-rim, 4 gerade +
   4x4 Eck-Segmente), jede Flaeche nur nach aussen sichtbar. Vorlage: iPhone
   17 Pro in Silber — Hoehe 2,077 B, Dicke 0,117 B, Eckradius 0,14 B,
   Rahmen 2,2 % B, Display 19,5:9 mit Pillen-Aussparung, hinten das
   durchgehende Kamera-Plateau (drei Linsen links, Blitz/LiDAR/Mikro rechts),
   Tasten links (Aktion, Lauter, Leiser), rechts (Standby, darunter Kamerataste).
   Kein Herstellerlogo, kein App-Logo — die Menueleiste im Display ist
   generisch. Steuerung ueber die Scrollposition (main.js): liegt
   weggedreht mit Blick auf die Rueckseite, dreht sich zum Betrachter,
   haelt, dreht sich beim Weiterscrollen wieder weg. Gleiche Ausnahme wie
   das MacBook: darf ueber die Menueleiste ragen. */
.phone-scene { position: relative; height: 200vh; }
.page-hero.with-photo ~ .phone-section { z-index: auto; }
.phone-section .section-head { margin-bottom: 1rem; }
.phone-section .laptop-note { margin-top: 5rem; }   /* das Geraet ragt am Ende unter den Sticky-Rahmen — Luft zur Bildunterschrift */
.phone-sticky {
  /* Geraetebreite hier, nicht auf der Stage: die Kennzahlen daneben rechnen damit. */
  --pw: min(270px, 28vw);
  position: sticky; top: 20vh; height: 60vh; z-index: 300;
  display: flex; align-items: center; justify-content: center;
}
.phone-stage {
  --yaw: -150deg; --tilt: 30deg; --lift: 40px; --scale: .8;
  --ph: calc(var(--pw) * 2.077);
  --pt: calc(var(--pw) * .117);
  --pr: calc(var(--pw) * .14);
  --pb: calc(var(--pw) * .022);   /* Rahmen ums Display */
  --pl: calc(var(--pw) * .042);   /* Kamera-Plateau ragt ueber die Rueckseite (~3 mm) */
  --pl2: calc(var(--pw) * .034);  /* Linsenringe ragen ueber das Plateau (~2,4 mm) — vorher .014, kaum sichtbar */
  position: relative; width: var(--pw);
  perspective: 1800px; perspective-origin: 50% 40%;
}
.phone {
  position: relative; width: 100%; transform-style: preserve-3d;
  transform: translateY(var(--lift)) scale(var(--scale)) rotateX(calc(-1 * var(--tilt))) rotateY(var(--yaw));
  /* kein will-change: das wuerde die Raster-Aufloesung im Startzustand (klein,
     weggedreht) einfrieren und beim Herandrehen nur hochskalieren -> blockig. */
}
.phone-face { position: absolute; backface-visibility: hidden; }
.phone-front {
  position: relative; backface-visibility: hidden;
  aspect-ratio: 1 / 2.077; border-radius: var(--pr);
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.phone-back {
  inset: .5px; transform: translateZ(calc(-1 * var(--pt))) rotateY(180deg);
  border-radius: var(--pr);
  background:
    radial-gradient(ellipse 90% 45% at 30% 8%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(165deg, #eeeef0 0%, #d8d9dd 48%, #c3c5ca 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8), inset 0 0 18px rgba(0,0,0,.06);
}
/* Kamera-Plateau (17 Pro) als echter erhabener Koerper: Waende .phone-prim,
   Deckflaeche .phone-plateau (gespiegelt wie die Rueckseite: element-links =
   vom Betrachter hinten links). Blitz und LiDAR als Pseudo-Elemente rechts,
   die drei Linsen sind eigene Zylinder (.phone-lrim + .phone-lens). */
.phone-prim { transform-origin: 0 0;
  background: linear-gradient(180deg, #9ea0a6 0%, #dcdde0 55%, #b9bbc0 100%); }
.phone-plateau {
  border-radius: calc(var(--pw) * .085);
  background: linear-gradient(160deg, #dcdde1 0%, #c6c8cd 55%, #b7b9bf 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -3px 6px rgba(0,0,0,.1);
}
.phone-plateau::before, .phone-plateau::after { content: ''; position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.phone-plateau::before { left: 86%; top: 30%; width: calc(var(--pw) * .06); height: calc(var(--pw) * .06);   /* Blitz */
  background: radial-gradient(circle, #f6efd6 0%, #c9b98a 50%, #6f6754 100%); box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.phone-plateau::after { left: 86%; top: 70%; width: calc(var(--pw) * .05); height: calc(var(--pw) * .05);     /* LiDAR */
  background: radial-gradient(circle, #1a1f27 0%, #05070a 70%); box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
/* Ringwand: oben hell (Kante zum Ring), am Fuss dunkel (Schatten auf dem Plateau). Vorher oben dunkel ->
   die 22 Segmente zeichneten sich von hinten als gestrichelter Rand ab. */
.phone-lrim { transform-origin: 0 0;
  background: linear-gradient(180deg, #d9dbdf 0%, #bfc2c7 45%, #a6a9b0 78%, #7a7d85 100%); }
/* Deckflaeche des Rings: SCHMALE Metallfassung mit offener Mitte (Marios Vorgabe: grosses Glas, duenner Ring).
   Innen dunkle Fuge zum Glas, dann helle Fase, aussen weich in den Ringwand-Ton — kein harter dunkler Rand
   (der wurde auf der gedrehten Flaeche gepunktet gerastert). */
.phone-lens {
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 0 86%, #3b3e46 86.5%, #2f323a 88%,
    #f1f2f4 89.5%, #d8dade 94%, #b8bbc1 98%, #a9acb3 100%);
}
/* Glas: gross, tiefdunkel, mit zwei sanften Linsenringen und kleinem Glanzpunkt */
.phone-lglass {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(255,255,255,.07) 48%, transparent 52%, transparent 70%, rgba(255,255,255,.09) 73%, transparent 77%, rgba(255,255,255,.16) 95%, rgba(255,255,255,.05) 100%),
    radial-gradient(circle at 44% 42%, #1b2532 0%, #0c1218 38%, #04070b 68%, #0e151d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.phone-lglass::after {   /* Glanzpunkt */
  content: ''; position: absolute; left: 26%; top: 17%; width: 17%; height: 9%; border-radius: 50%;
  background: rgba(255,255,255,.4); filter: blur(.4px);
}
/* Rahmen: Titan, leichte Kantenlichtung in der Mitte der Dicke */
.phone-rim { top: 0; height: var(--pt); transform-origin: 0 0;
  background: linear-gradient(180deg, #a5a7ad 0%, #e9eaec 42%, #d3d5d9 58%, #94969c 100%); }
.phone-rim.b::after {   /* Ladebuchse unten */
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 12%; height: 34%; border-radius: 999px; background: #2a2b2e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
/* Tasten: Pille im Rahmenton mit Haarlinie als Fuge. Kamerasteuerung: fast buendig, glasig, kaum gerundet. */
.phone-btn { top: 0; transform-origin: 0 0; border-radius: 999px;
  background: linear-gradient(180deg, #f2f3f5 0%, #cfd1d6 38%, #9a9da4 100%);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.3), inset 0 .6px 0 rgba(255,255,255,.9); }
.phone-btn.cam { border-radius: 1.5px;   /* Kamerasteuerung: glasig, nur einen Hauch dunkler als der Rahmen */
  background: linear-gradient(180deg, #e2e4e8 0%, #c3c6cb 40%, #a9acb3 100%);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.28), inset 0 .6px 0 rgba(255,255,255,.75); }

/* Display */
.phone-screen {
  position: absolute; inset: var(--pb); overflow: hidden;
  border-radius: calc(var(--pr) - var(--pb)); background: #fff;
}
.phone-status {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5; height: calc(var(--pw) * .135);
  display: flex; align-items: center; justify-content: space-between; padding: 0 8% 0 9.5%;
  font: 600 calc(var(--pw) * .042)/1 var(--font-body); color: #000; letter-spacing: .01em;
}
.phone-status .sig { display: flex; align-items: center; gap: calc(var(--pw) * .018); }
.phone-status .bars { display: flex; align-items: flex-end; gap: 1.5px; height: calc(var(--pw) * .032); }
.phone-status .bars i { width: calc(var(--pw) * .01); background: #000; border-radius: 1px; }
.phone-status .bars i:nth-child(1) { height: 40%; } .phone-status .bars i:nth-child(2) { height: 60%; }
.phone-status .bars i:nth-child(3) { height: 80%; } .phone-status .bars i:nth-child(4) { height: 100%; }
.phone-status .bat { width: calc(var(--pw) * .075); height: calc(var(--pw) * .036); border: 1.5px solid rgba(0,0,0,.4);
  border-radius: 3px; position: relative; padding: 1.5px; }
.phone-status .bat::before { content: ''; display: block; width: 78%; height: 100%; background: #000; border-radius: 1px; }
.phone-status .bat::after { content: ''; position: absolute; right: -4px; top: 30%; width: 2px; height: 40%; background: rgba(0,0,0,.4); border-radius: 0 1px 1px 0; }
.phone-island {
  position: absolute; top: calc(var(--pw) * .028); left: 50%; transform: translateX(-50%);
  width: 32%; height: calc(var(--pw) * .094); border-radius: 999px; background: #000; z-index: 6;
}
.phone-island::after {   /* Frontkamera */
  content: ''; position: absolute; right: 12%; top: 50%; transform: translateY(-50%);
  width: calc(var(--pw) * .028); height: calc(var(--pw) * .028); border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #2e3a44 0%, #0b1014 55%, #000 100%);
}
.phone-appbar {
  position: absolute; left: 0; right: 0; top: calc(var(--pw) * .135); height: calc(var(--pw) * .11); z-index: 4;
  background: #fff; border-bottom: 1px solid #e9e9e9;
  display: flex; align-items: center; justify-content: center;
  font: 600 calc(var(--pw) * .042)/1 var(--font-body); color: #111;
}
.phone-appbar::before {   /* Zurueck-Chevron */
  content: ''; position: absolute; left: 6%; top: 50%; width: calc(var(--pw) * .028); height: calc(var(--pw) * .028);
  border-left: 1.5px solid #111; border-bottom: 1.5px solid #111; transform: translateY(-50%) rotate(45deg);
}
.phone-feed { position: absolute; left: 0; right: 0; top: calc(var(--pw) * .245); bottom: 0; overflow: hidden; background: #fff; }
.phone-feed .track { position: absolute; left: 0; top: 0; width: 100%; animation: feedscroll 28s linear infinite; }
.phone-feed img { display: block; width: 100%; }
/* zwei Kopien uebereinander, um genau eine Bildhoehe verschoben -> nahtlose Schleife */
@keyframes feedscroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.phone-home {
  position: absolute; bottom: calc(var(--pw) * .02); left: 50%; transform: translateX(-50%); z-index: 6;
  width: 36%; height: calc(var(--pw) * .012); border-radius: 999px; background: rgba(0,0,0,.85);
}
.phone-glass {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.04) 22%, rgba(255,255,255,0) 42%);
}
.phone-shadow {
  position: absolute; left: 50%; top: 100%; width: 130%; height: 16%;
  transform: translate(-50%, calc(var(--lift) - 30%)) scale(var(--scale));
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);
  filter: blur(12px); opacity: .55; pointer-events: none;
}
/* Kennzahlen links und rechts vom Geraet. Erscheinen, waehrend es sich zum
   Betrachter dreht (--reveal 0..1 aus main.js): sie kommen hinter dem Geraet
   hervor, drehen sich in die Ebene, eine Haarlinie zieht sich zum Geraet, und
   die Zahl zaehlt mit dem Scrollfortschritt hoch. Beim Wegdrehen verschwinden
   sie wieder. Schriftgroesse bleibt unter der Startseiten-Headline (Regel 9n). */
.phone-sticky { --reveal: 0; }
.phone-stat {
  position: absolute; top: 50%; width: min(250px, 22vw); z-index: 1;
  opacity: var(--reveal); pointer-events: none;
}
.phone-stat.l {
  right: calc(50% + var(--pw) * .74); top: 40%; text-align: right;
  transform: translateY(-50%) translateX(calc((1 - var(--reveal)) * 56px)) perspective(900px) rotateY(calc((1 - var(--reveal)) * 32deg));
  transform-origin: right center;
}
.phone-stat.r {
  left: calc(50% + var(--pw) * .74); top: 60%;
  transform: translateY(-50%) translateX(calc((1 - var(--reveal)) * -56px)) perspective(900px) rotateY(calc((1 - var(--reveal)) * -32deg));
  transform-origin: left center;
}
.phone-stat .eyebrow { font-size: .6rem; line-height: 1; }
.phone-stat .eyebrow::before { display: none; }   /* kein Strich neben dem Wort */
.phone-stat .big .sym { font-style: normal; font-size: .46em; margin-right: .2em; vertical-align: .13em; opacity: .8; }   /* Ø = Durchschnitt, direkt vor der Zahl */
.phone-stat .big .num { font-weight: inherit; }
.phone-stat.l .eyebrow { flex-direction: row-reverse; }
.phone-stat .big {
  display: block; font-family: var(--font-display); font-weight: 300; line-height: 1;
  font-size: clamp(2rem, 3vw, 3rem); color: var(--gold-lt); letter-spacing: -.01em;
  margin: -.5rem 0 .4rem; font-variant-numeric: tabular-nums;   /* Wort sitzt unmittelbar ueber der Zahl */
  position: relative;   /* Bezug fuer .line — die haengt an der Zahl, nicht am Block */
}
.phone-stat .label {
  display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(240,234,224,.62); line-height: 1.7;
}
/* Haarlinie zum Geraet, zieht sich mit --reveal aus; Goldpunkt am Geraet-Ende.
   Sie sitzt IN der Zahl: 56 % der Zeilenhoehe treffen bei Cormorant die optische
   Mitte der Ziffern (die Grundlinie liegt tiefer als die Boxmitte). */
.phone-stat .line {
  position: absolute; top: 56%; height: 1px; width: calc(var(--pw) * .26);
  background: linear-gradient(90deg, rgba(191,160,106,0), rgba(191,160,106,.7));
  transform: scaleX(var(--reveal));
}
.phone-stat.l .line { left: 100%; margin-left: 1.2rem; transform-origin: left center; }
.phone-stat.r .line { right: 100%; margin-right: 1.2rem; transform-origin: right center;
  background: linear-gradient(270deg, rgba(191,160,106,0), rgba(191,160,106,.7)); }
.phone-stat .line::after {
  content: ''; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); transform: translateY(-50%);
}
.phone-stat.l .line::after { right: -2px; }
.phone-stat.r .line::after { left: -2px; }

@media (max-width: 700px) {
  .phone-scene { height: 170vh; }
  .phone-sticky { --pw: 50vw; }
  .phone-stage { perspective: 2400px; }
  .phone-stat { width: 40vw; }
  .phone-stat.l { right: auto; left: 4%; top: 6%; text-align: left; transform: translateX(calc((1 - var(--reveal)) * -30px)); }
  .phone-stat.l .eyebrow { flex-direction: row; }
  .phone-stat.r { left: auto; right: 4%; top: auto; bottom: 4%; text-align: right; transform: translateX(calc((1 - var(--reveal)) * 30px)); }
  .phone-stat.r .eyebrow { flex-direction: row-reverse; }
  .phone-stat .line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-scene { height: auto; }
  .phone-sticky { position: static; height: auto; padding: 1rem 0 3rem; }
  .phone-stage { --yaw: -24deg; --tilt: 5deg; --lift: 0px; --scale: 1; }
  .phone-sticky { --reveal: 1; }
  .phone-feed .track { animation: none; }
}

/* ── Standortkarte (agentur.html) ──────────────────────────────────────
   Reliefkarte DE/AT/CH als vorgerendertes 3D-Bild (three.js, _build/render/map.html:
   Hoehenmodell aus ETOPO1-Schummerung, Ueberhoehung 15x, Grenzen eingebacken, Vignette
   im Alpha). Staedte und Standorte sind HTML darueber, an projizierten Positionen
   (Prozent). Interaktion: leichte Neigung mit der Maus (main.js), Standort-Pins zeigen
   bei Hover/Fokus/Tipp die Karte mit Adresse. Papier-Relief-Optik: die Karte liegt
   auf dem Linen-Hintergrund des Abschnitts, ohne eigene Flaeche. */
/* Standort-Abschnitt: Text links (~35 %), Karte rechts (~65 %). Die Karte ist damit
   deutlich schmaler als frueher ueber die volle Containerbreite — Labelgroessen unten
   entsprechend nachgezogen. Unter 860 px untereinander (wie .split). */
.geo-split { display: grid; grid-template-columns: minmax(340px, 27fr) 73fr; gap: 3vw; align-items: center; }   /* 340 px: "& Ludwigsburg" muss in eine Zeile passen */
.geo { position: relative; container-type: inline-size; }
.geo-tilt {
  position: relative; transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d;
}
.geo-map { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.geo-layer { position: absolute; inset: 0; isolation: isolate; }
/* isolation: isolate ist KEIN Stil, sondern die Reparatur eines Hit-Testing-Fehlers (6.9.): .geo-tilt hat preserve-3d,
   und jeder .geo-pin-wrap (z-index 3) wurde damit zu einer eigenen 3D-Ebene, deckungsgleich mit .geo-layer. Sobald die
   Karte kippt, traf Chrome bei deckungsgleichen Ebenen die Ebene statt des Pins -> kein Hover, kein Klick auf den
   Standorten. Als eigener Stapelkontext flacht .geo-layer alle Pins in EINE Ebene -> Treffer auch gekippt. */
.geo-city { position: absolute; width: 0; height: 0; pointer-events: none; }
.geo-city i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; background: var(--stone); transform: rotate(45deg); opacity: .8; }
.geo-city b {
  position: absolute; left: 9px; top: 0; transform: translateY(-50%); white-space: nowrap;
  font-weight: 400; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(28,26,23,.74); line-height: 1;
  /* Schild (Marios Vorgabe): helles Beige mit Goldstich, rechteckig, gleich viel Ueberstand rundum. Rechts ist das
     Padding um das nachlaufende letter-spacing (.16em) reduziert; oben/unten kleiner, weil Versalien nur ~.7em hoch sind. */
  background: rgba(233,222,198,.92); padding: .2em .16em .2em .32em;
}
.geo-city.l b { left: auto; right: 9px; }
.geo-city.bl b { left: auto; right: 5px; top: 11px; }   /* unten links: Stuttgart, unter dem Ludwigsburg-Pin */
/* Standort-Pin: Goldquadrat mit atmendem Ring, Name daneben; Karte darunter */
.geo-pin-wrap { position: absolute; width: 0; height: 0; z-index: 3; }   /* Nullpunkt = exakte Koordinate; die Raute sitzt zentriert darauf, Name rechts daneben */
.geo-pin { position: absolute; left: -5.5px; top: -5.5px; display: flex; align-items: center; gap: .55rem; background: none; border: 0; padding: 0; cursor: pointer; color: var(--gold); }
.geo-pin i { position: relative; display: block; width: 11px; height: 11px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(240,234,224,.9); flex: 0 0 auto; }
.geo-pin i::after { content: ''; position: absolute; inset: -9px; border: 1px solid var(--gold); opacity: .55; animation: geo-pulse 2.6s ease-out infinite; }
@keyframes geo-pulse { 0% { transform: scale(.45); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.geo-pin span { font-family: var(--font-body); font-weight: 500; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #74602f; white-space: nowrap; line-height: 1; background: rgba(233,222,198,.92); padding: .2em .12em .2em .32em; }   /* line-height 1: Schild eng am Wort, wie bei .geo-city b */
.geo-card {
  position: absolute; left: var(--shift, 0px); top: 24px; transform: translate(-50%, 6px); width: 270px; max-width: 70vw;
  background: var(--stone); color: var(--linen); padding: 1.15rem 1.3rem 1.2rem; z-index: 5;
  opacity: 0; visibility: hidden; transition: opacity .35s, transform .35s, visibility 0s .35s; pointer-events: none;
  text-align: left;
}
.geo-card::before { content: ''; position: absolute; left: calc(50% - var(--shift, 0px)); top: -16px; width: 1px; height: 16px; background: var(--gold); }
.geo-card .eyebrow { font-size: .55rem; color: var(--gold); }
.geo-card strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.15; margin-top: .45rem; }
.geo-card .addr { font-size: .8rem; line-height: 1.6; margin-top: .55rem; color: var(--linen); }
.geo-card p:not(.addr) { font-size: .74rem; line-height: 1.65; margin-top: .55rem; color: rgba(240,234,224,.62); }
.geo-pin-wrap:hover .geo-card, .geo-pin-wrap:focus-within .geo-card, .geo-pin-wrap.open .geo-card {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; pointer-events: auto;
}
.geo-pin-wrap.up .geo-card { top: auto; bottom: 24px; transform: translate(-50%, -6px); }
.geo-pin-wrap.up .geo-card::before { top: auto; bottom: -16px; }
.geo-pin-wrap.up:hover .geo-card, .geo-pin-wrap.up:focus-within .geo-card, .geo-pin-wrap.up.open .geo-card { transform: translate(-50%, 0); }
/* Labeldichte nach der tatsaechlichen KARTENBREITE, nicht nach dem Viewport: die Karte
   sitzt jetzt in einer 65-%-Spalte und ist auf mittleren Schirmen schmaler als frueher
   ueber die volle Breite. Unter 660 px Kartenbreite kollidieren sonst Koeln/Duesseldorf
   und Muenchen/Salzburg (Schwelle mit Schildern: 690 px). */
@container (max-width: 690px) {   /* mit Schildern (v4) kollidierten München/Salzburg noch bei 666 px */
  .geo-city b { font-size: .46rem; letter-spacing: .12em; }
  .geo-city.minor { display: none; }
  .geo-pin { left: -4px; top: -4px; }
  .geo-pin i { width: 8px; height: 8px; box-shadow: 0 0 0 2px rgba(240,234,224,.9); }
  .geo-pin i::after { inset: -6px; }
  .geo-pin span { font-size: .5rem; letter-spacing: .14em; }
}
@container (max-width: 420px) {   /* kleine Handys: Pin-Name Ludwigsburg lief sonst in das Schild München (mit Schildern bis 396 px) */
  .geo-city b { font-size: .42rem; letter-spacing: .1em; }
  .geo-pin span { font-size: .44rem; letter-spacing: .1em; }
}
@media (max-width: 700px) {
  .geo-card { width: 220px; padding: .9rem 1rem 1rem; }
  .geo-card p:not(.addr) { display: none; }   /* auf dem Handy nur Adresse — die Karte bleibt sichtbar */
}
@media (prefers-reduced-motion: reduce) { .geo-pin i::after { animation: none; } .geo-tilt { transition: none; } }
@media (max-width: 480px) { .nav-cta-link { display: none; } }   /* Kopfzeile: Logo + Burger genuegen, Erstgespraech steht im Menue */

/* ── Referenz-Karussell (referenzen.html) ──────────────────────────────
   Vorbild: Case-Study-Karussell auf nxtyou.de — hohe Karten, oben das Bild,
   unten Logo-Kachel, Kategorie und ein Satz; darunter Zaehler, Punkte und
   Pfeile. Uebersetzt ins eigene System: keine Rundungen, keine Schatten,
   Haarlinien in Gold, Cormorant/Jost. Die Spur laeuft bis an den Seitenrand
   und ist per Finger, Maus und Pfeilen scrollbar (scroll-snap). Steuerung in
   main.js (#cases). Karten kommen aus CASE_CARDS in _build/pages.py. */
.cases-section .section-head { margin-bottom: 3rem; }
.cases { position: relative; }
.cases-track {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px var(--pad-x) 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-padding-left: var(--pad-x);
}
.cases-track::-webkit-scrollbar { display: none; }
.case {
  flex: 0 0 min(340px, 80vw); scroll-snap-align: start;
  background: var(--stone-md); border: 1px solid rgba(191,160,106,.22);
  display: flex; flex-direction: column;
}
.case-media { position: relative; aspect-ratio: 1 / 1.08; overflow: hidden; background: var(--stone); }
.case-media .photo { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.8) brightness(.92); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.case:hover .case-media .photo { transform: scale(1.04); }
.case-plate {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(191,160,106,.10), transparent 70%),
    linear-gradient(180deg, #2a2722 0%, var(--stone) 100%);
}
.case-plate img { width: 56%; height: auto; opacity: .92; }
.case-media::after {   /* weicher Fuss-Verlauf, damit der Ort auch auf hellem Foto lesbar bleibt */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
  background: linear-gradient(to top, rgba(20,18,15,.72), rgba(20,18,15,0));
}
.case-loc {
  position: absolute; left: 1.1rem; bottom: 1rem; z-index: 1; font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(240,234,224,.85);
}
.case-foot {
  display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem 1.2rem;
  border-top: 1px solid rgba(191,160,106,.18);
}
.case-mark {
  flex: 0 0 54px; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  background: var(--stone); border: 1px solid rgba(191,160,106,.22);
}
.case-mark img { width: 88%; height: 88%; object-fit: contain; }   /* logo-*-tile.png: quadratisch normiert */
.case-cat { display: block; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(191,160,106,.85); line-height: 1.5; }
.case-title { font-size: .88rem; line-height: 1.55; color: var(--linen); margin-top: .3rem; }

/* ── Rechner: Einordnung und naechster Schritt ────────────────────────────────
   Die Summe allein loest nichts aus. Darunter steht jetzt, woraus sie besteht und was als
   Erstes zu tun ist. Im Druck (Ergebnisblatt) bleibt die Einordnung sichtbar, der
   Terminblock nicht — siehe RECHNER_PRINT_CSS in pages.py. */
.calc-einordnung { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(191,160,106,.3); }
.calc-einordnung .hebel { margin-top: .9rem; font-family: var(--font-display); font-size: 1.15rem;
  line-height: 1.5; color: var(--linen); }
.calc-einordnung .hebel b { font-weight: 400; font-style: italic; color: var(--gold-lt); }
.calc-einordnung ul { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.calc-einordnung li { font-size: .82rem; line-height: 1.8; color: var(--fog); padding-left: 1.1rem;
  position: relative; margin-top: .7rem; }
.calc-einordnung li::before { content: '—'; position: absolute; left: 0; color: rgba(191,160,106,.7); }
.calc-einordnung li b { font-weight: 400; color: rgba(240,234,224,.9); }
.calc-schritt { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid rgba(191,160,106,.3); }
.calc-schritt p { margin-top: .9rem; font-size: .84rem; line-height: 1.8; color: var(--fog); }
.calc-schritt .btn { margin-top: 1.2rem; }

/* ── Brief (agentur.html) ─────────────────────────────────────────────────────
   Ein persoenlicher Abschnitt in Ich-Form. Bewusst schmal gesetzt (62 Zeichen), damit er
   wie ein Brief liest und nicht wie ein Website-Absatz. */
.brief { max-width: 62ch; margin: 0 auto; }
.brief p { font-size: 1rem; line-height: 2; color: #4a4540; margin-top: 1.3rem; }
.brief p:first-of-type { margin-top: 0; }
.brief p.auftakt { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-style: italic; line-height: 1.5; color: var(--stone); }
.brief strong { font-weight: 500; color: var(--stone); }
.brief .unterschrift { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(28,26,23,.14); }
/* Echte Schreibschrift statt kursiver Serife. Pinyon Script: feine Kupferstich-Kursive mit hohem
   Strichkontrast — passt zur Cormorant und wirkt wie eine gestochene Briefkopf-Signatur.
   Wird nur auf agentur.html geladen (extra_head in pages.py); faellt sie aus, greift die
   Systemschreibschrift. Alternative aus derselben Runde: 'Mrs Saint Delafield' — noch feiner und
   naeher an einer echten Federunterschrift, dafuer etwas schwerer zu lesen. */
.brief .unterschrift .name { font-family: 'Pinyon Script', 'Snell Roundhand', 'Apple Chancery', cursive;
  font-size: clamp(2.2rem, 3.8vw, 2.9rem); line-height: 1.25; font-weight: 400; color: var(--stone);
  display: block; }
.brief .unterschrift .ort { display: block; margin-top: .4rem; font-size: .64rem; letter-spacing: .18em;
  text-transform: uppercase; color: #8C8478; }

/* ── Tagesachse (automationen.html) ───────────────────────────────────────────
   Ein Modelltag an der Rezeption, links von Hand, rechts mit System. Macht die Zahl
   "bis zu 40 Stunden pro Woche" greifbar — der Guide nennt das Mechanization. */
/* ── Tagesachse als Animation (leistungen/automationen.html) ───────────────────
   Eine Linie von oben nach unten, ein Roboter faehrt sie beim Scrollen ab. Hinter ihm
   faerbt sich die Linie, vor ihm bleibt sie blass. Erreicht er eine Station, klappt die
   Karte auf, das Piktogramm spielt und die gesparten Minuten zaehlen hoch.
   main.js setzt dafuer genau zwei Dinge: --p (0 bis 1, Fortschritt) auf .tagbot und die
   Klasse .an auf die Station. Alles andere ist CSS. Ohne JavaScript stehen alle Stationen
   sichtbar da, nur ohne Bewegung. */
.tagbot { --p: 0; position: relative; margin: 3rem auto 0; max-width: 60rem;
  padding-left: 8.5rem; }
/* Die Linie liegt ueber den Stationen, damit der Roboter den Stationspunkt verdeckt,
   auf dem er gerade steht. Sie ist schmaler als der Abstand zu den Karten, kreuzt also nichts. */
.tb-linie { position: absolute; left: 6.15rem; top: .6rem; bottom: 2.4rem; width: 2px;
  z-index: 2; background: rgba(191,160,106,.16); }
.tb-fuell { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p) * 100%);
  background: linear-gradient(to bottom, rgba(191,160,106,.25), var(--gold));
  box-shadow: 0 0 14px rgba(191,160,106,.5); }
.tb-reiter { position: absolute; left: 50%; top: calc(var(--p) * 100%);
  transform: translate(-50%, -50%); }
/* Der Roboter. Aufbau von hinten nach vorn: Schein, Bodenschatten, Antenne, Ohren,
   Kopfschale, dunkles Visier mit zwei leuchtenden Augen, Rumpf mit Brustring, Fuesse.
   Schale und Visier sind deckend, sonst scheinen Linie und Stationspunkt hindurch. */
.tb-bot { display: block; width: 62px; height: 88px; overflow: visible;
  fill: none; stroke: none;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55));
  animation: bot-wippen 3.6s ease-in-out infinite; }
.tb-bot .bot-schein { fill: url(#botSchein); animation: bot-atem 3.6s ease-in-out infinite; }
.tb-bot .bot-schatten { fill: #000; opacity: .4; }
.tb-bot .bot-schale { fill: url(#botSchale); stroke: rgba(212,186,138,.85); stroke-width: 1.5; }
.tb-bot .bot-ohr { fill: #1D1A16; stroke: rgba(212,186,138,.6); stroke-width: 1.2; }
.tb-bot .bot-visier { fill: #100E0B; stroke: rgba(212,186,138,.35); stroke-width: 1; }
.tb-bot .bot-auge { fill: url(#botGold); transform-box: fill-box; transform-origin: center;
  animation: bot-blinzeln 5.6s ease-in-out infinite; }
.tb-bot .bot-mund { stroke: rgba(212,186,138,.5); stroke-width: 1.2; stroke-linecap: round; }
.tb-bot .bot-linie { stroke: rgba(212,186,138,.75); stroke-width: 1.4; stroke-linecap: round; }
.tb-bot .bot-arm { stroke: rgba(212,186,138,.7); stroke-width: 1.5; stroke-linecap: round; }
.tb-bot .bot-fuss { fill: #1D1A16; stroke: rgba(212,186,138,.6); stroke-width: 1.2; }
.tb-bot .bot-licht { fill: url(#botGold); r: 3.4; animation: bot-puls 2.4s ease-in-out infinite; }
.tb-bot .bot-brust-ring { stroke: rgba(212,186,138,.45); stroke-width: 1.2; }
.tb-bot .bot-brust { fill: var(--gold); animation: bot-puls 2.4s ease-in-out infinite; }
@keyframes bot-wippen { 0%,100% { transform: translateY(-2.5px); } 50% { transform: translateY(2.5px); } }
@keyframes bot-atem { 0%,100% { opacity: .55; transform: scale(.94); transform-origin: 32px 42px; }
  50% { opacity: 1; transform: scale(1.06); transform-origin: 32px 42px; } }
@keyframes bot-blinzeln { 0%,90%,100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes bot-puls { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

.tb-stationen { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.1rem; }
.tb-station { position: relative; }
.tb-zeit { position: absolute; left: -8.5rem; top: 1.35rem; width: 4.2rem; text-align: right;
  font-family: var(--font-display); font-size: 1.05rem; color: rgba(191,160,106,.45);
  transition: color .5s; }
.tb-punkt { position: absolute; left: -2.5rem; top: 1.75rem; width: 9px; height: 9px;
  border-radius: 50%; background: var(--stone-md); border: 1px solid rgba(191,160,106,.4);
  transition: background .5s, border-color .5s, box-shadow .5s, transform .5s; }
.tb-station.an .tb-zeit { color: var(--gold-lt); }
.tb-station.an .tb-punkt { background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 5px rgba(191,160,106,.14); transform: scale(1.15); }

/* Karte im selben Glas wie das Systemarchiv, nur flacher. */
.tb-karte { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  align-items: center; gap: 1.4rem; padding: 1rem 1.4rem;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
    rgba(62,57,49,.42);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 16px 34px -22px rgba(0,0,0,.8);
  /* Noch nicht erreicht: blass UND unscharf. Der Roboter stellt den Tag scharf. */
  opacity: .5; filter: blur(3px); transform: translateY(10px);
  transition: opacity .6s, filter .6s, transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s; }
.tb-station.an .tb-karte { opacity: 1; filter: blur(0); transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 24px 44px -24px rgba(0,0,0,.85); }
.tb-piktogramm svg { display: block; width: 46px; height: 46px;
  fill: none; stroke: var(--gold); stroke-width: 1.3; }
.tb-text { font-size: .92rem; line-height: 1.5; color: rgba(240,234,224,.9); }
.tb-spar { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fog);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .5s .15s; }
.tb-station.an .tb-spar { opacity: 1; }
.tb-spar b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem;
  letter-spacing: 0; text-transform: none; color: var(--gold-lt); margin-right: .25em; }

/* Piktogramme: dieselben drei Bausteine fuer alle Zeichnungen. */
.tb-piktogramm .p1, .tb-piktogramm .p2, .tb-piktogramm .p3 { opacity: 0; }
.tb-piktogramm .zeichnen { stroke-dasharray: 44; stroke-dashoffset: 44; }
.tb-station.an .tb-piktogramm .p1 { animation: teil-rein .5s .05s both; }
.tb-station.an .tb-piktogramm .p2 { animation: teil-rein .5s .22s both; }
.tb-station.an .tb-piktogramm .p3 { animation: teil-rein .5s .4s both; }
.tb-station.an .tb-piktogramm .zeichnen { animation: teil-rein .5s both, strich .7s both; }
.tb-station.an .tb-piktogramm .p2.zeichnen { animation-delay: .22s, .22s; }
.tb-station.an .tb-piktogramm .p3.zeichnen { animation-delay: .4s, .4s; }
@keyframes teil-rein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes strich { to { stroke-dashoffset: 0; } }

/* Erfahrungszahl im Abschnitt „Zwei Welten" (agentur.html). Steht in der linken Spalte
   unter der Ueberschrift, Goldlinie darueber, Zahl im Display-Schnitt. main.js zaehlt sie
   beim Erreichen hoch (Selektor .stats .big, .jahre-zahl). */
.jahre { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(191,160,106,.35);
  max-width: 20rem; }
.jahre-zahl { display: block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1; color: var(--gold);
  font-variant-numeric: tabular-nums; }
.jahre-text { display: block; margin-top: .8rem; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; line-height: 2; color: rgba(28,26,23,.6); }
@media (max-width: 860px) { .jahre { margin-top: 1.8rem; padding-top: 1.2rem; } }

/* ── Ergebniskacheln (leistungen/automationen.html) ────────────────────────────
   Vorher sechs weisse Kaesten mit harter Kante. Jetzt Glaskacheln auf Leinen, in
   derselben Sprache wie die Stapel: runde Ecken, heller Innenrand, weicher Schatten.
   Dynamik kommt aus drei Kleinigkeiten, alle an .reveal gekoppelt (main.js):
   die Zahl faehrt herein, darunter zieht sich eine Goldspur von links auf, und beim
   Zeigen hebt sich die Kachel leicht an. Die Verzoegerung kommt aus --i, dadurch
   laufen die sechs nacheinander an statt gleichzeitig. */
.ergebnisse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem;
  position: relative; }
.erg { position: relative; overflow: hidden; border-radius: 20px;
  padding: 2rem 1.8rem 1.9rem;
  border: 1px solid rgba(28,26,23,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.76)),
    rgba(250,247,242,.6);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 22px 44px -26px rgba(28,26,23,.32);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s, border-color .5s; }
/* Warmer Schimmer, der beim Zeigen aus der linken oberen Ecke aufgeht. */
.erg::before { content: ''; position: absolute; inset: -40% -30% auto -30%; height: 150%;
  pointer-events: none; opacity: 0; transition: opacity 1.1s ease;
  background: radial-gradient(50% 50% at 22% 0%, rgba(191,160,106,.28), transparent 70%);
  filter: blur(26px); }
.erg.in::before { opacity: 1; }
.erg:hover { transform: translateY(-4px); border-color: rgba(191,160,106,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 30px 56px -26px rgba(28,26,23,.4); }
.erg-wert { position: relative; display: block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1; color: var(--gold);
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s, transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i) * .07s + .05s); }
.erg.in .erg-wert { opacity: 1; transform: none; }
.erg-spur { position: relative; display: block; height: 1px; margin: 1.1rem 0 .9rem;
  background: rgba(28,26,23,.10); }
.erg-spur i { position: absolute; inset: 0 auto 0 0; width: 0; display: block;
  background: linear-gradient(to right, var(--gold), rgba(191,160,106,.25));
  transition: width 1.1s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i) * .07s + .25s); }
.erg.in .erg-spur i { width: 100%; }
.erg-label { display: block; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(28,26,23,.55); }
.erg-satz { margin-top: .9rem; font-size: .86rem; line-height: 1.75; color: rgba(28,26,23,.72); }
@media (max-width: 1000px) { .ergebnisse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ergebnisse { grid-template-columns: 1fr; }
  .erg { padding: 1.6rem 1.4rem 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .erg-wert { opacity: 1; transform: none; }
  .erg-spur i { width: 100%; transition: none; }
  .erg::before { opacity: 1; } }

/* Zweispaltiger Kartenkoerper ohne Liste: Ueberschrift links, Absatz rechts. */
.arch-zwei { grid-template-columns: 44% minmax(0, 1fr); align-items: start;
  align-content: center; }
.arch-titel { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem;
  line-height: 1.2; color: var(--linen); }
.arch-absatz { font-size: .88rem; line-height: 1.8; color: var(--fog); }

/* Heller Stapel (Abschnitt „Das Problem"). Dieselbe Mechanik, nur mit Milchglas auf Leinen
   statt auf Stein. Die Toenung ist hier heller als der Grund, sonst sieht man die Karte nicht. */
.archiv.hell::before {
  background:
    radial-gradient(44% 30% at 14% 12%, rgba(191,160,106,.38), transparent 72%),
    radial-gradient(40% 32% at 86% 34%, rgba(59,74,62,.24), transparent 74%),
    radial-gradient(38% 26% at 36% 74%, rgba(191,160,106,.28), transparent 74%); }
/* Gleiche Mindesthoehe fuer alle sechs: erstens fuellen kurze Karten sonst kaum den
   Bildschirm, zweitens haengt der Loslass-Punkt an top + Hoehe. Je aehnlicher die Hoehen,
   desto weniger Ausgleichsabstand muss main.js dazwischenlegen. */
.archiv.hell .arch { min-height: 15rem;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
    rgba(250,247,242,.6);
  border-color: rgba(28,26,23,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(28,26,23,.06),
    0 30px 58px -28px rgba(28,26,23,.42),
    0 8px 20px -12px rgba(28,26,23,.20); }
.archiv.hell .arch::after {
  background: linear-gradient(132deg, rgba(255,255,255,.5), transparent 26%,
    transparent 74%, rgba(28,26,23,.03)); }
.archiv.hell .arch-reiter { background: rgba(28,26,23,.035);
  border-bottom: 1px solid rgba(28,26,23,.09); }
.archiv.hell .arch-nr { color: var(--gold); }
.archiv.hell .arch-name { color: rgba(28,26,23,.68); }
.archiv.hell .arch-titel { color: var(--stone); }
.archiv.hell .arch-absatz { color: rgba(28,26,23,.68); }
/* Die letzte Karte ist die Pointe und dreht die Farben um. */
.archiv.hell .arch.dunkel {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    rgba(28,26,23,.94);
  border-color: rgba(191,160,106,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 34px 62px -28px rgba(28,26,23,.6); }
.archiv.hell .arch.dunkel .arch-reiter { background: rgba(255,255,255,.05);
  border-bottom-color: rgba(191,160,106,.28); }
.archiv.hell .arch.dunkel .arch-nr { color: var(--gold-lt); }
.archiv.hell .arch.dunkel .arch-name { color: rgba(240,234,224,.85); }
.archiv.hell .arch.dunkel .arch-titel { color: var(--linen); }
.archiv.hell .arch.dunkel .arch-absatz { color: var(--fog); }
@media (max-width: 1000px) { .arch-zwei { grid-template-columns: 1fr; } }

/* Abschluss der Tagesachse: die Zahl ist die Aussage, die beiden Nebenzeilen stehen
   darunter statt links und rechts davon. Die Reihenfolge im Markup bleibt Beschriftung,
   Zahl, Hinweis; order: -1 zieht die Zahl im Bild nach oben. */
.ta-summe.tb-summe { flex-direction: column; align-items: center; text-align: center;
  gap: .55rem; margin-top: 3.4rem; padding-top: 2.4rem;
  border-top: 1px solid rgba(191,160,106,.18); }
.ta-summe.tb-summe b { order: -1; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.05; }
.ta-summe.tb-summe span:first-child { font-size: .6rem; letter-spacing: .24em;
  color: rgba(191,160,106,.9); }
.ta-summe.tb-summe span:last-child { font-size: .58rem; letter-spacing: .14em;
  color: rgba(140,132,120,.75); }
@media (max-width: 860px) {
  .tagbot { padding-left: 3.4rem; }
  .tb-linie { left: 1.05rem; }
  .tb-zeit { position: static; display: block; width: auto; text-align: left;
    margin: 0 0 .35rem .2rem; font-size: .95rem; }
  .tb-punkt { left: -2.85rem; top: .35rem; }
  .tb-karte { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; padding: .9rem 1.1rem; }
  .tb-piktogramm svg { width: 32px; height: 32px; }
  .tb-spar { grid-column: 1 / -1; }
  .tb-bot { width: 44px; height: 62px; }
}
/* Ohne Bewegungswunsch steht alles still und sichtbar da. */
@media (prefers-reduced-motion: reduce) {
  .tb-bot, .tb-bot * { animation: none !important; }
  .tb-karte { opacity: 1; filter: none; transform: none; }
  .tb-piktogramm .p1, .tb-piktogramm .p2, .tb-piktogramm .p3 { opacity: 1; }
  .tb-piktogramm .zeichnen { stroke-dashoffset: 0; }
}
/* Falls JavaScript nicht laeuft: keine halbtransparenten Karten stehen lassen. */
.tagbot:not(.bereit) .tb-karte { opacity: 1; filter: none; transform: none; }
.tagbot:not(.bereit) .tb-piktogramm .p1,
.tagbot:not(.bereit) .tb-piktogramm .p2,
.tagbot:not(.bereit) .tb-piktogramm .p3 { opacity: 1; }
.tagbot:not(.bereit) .tb-piktogramm .zeichnen { stroke-dashoffset: 0; }
.tagbot:not(.bereit) .tb-reiter { display: none; }
.tagbot:not(.bereit) .tb-spar { opacity: 1; }

.tagesachse { margin-top: 2.5rem; border-top: 1px solid rgba(191,160,106,.22); }
.ta-kopf, .ta-zeile { display: grid; grid-template-columns: 5.5rem minmax(0,1fr) minmax(0,1fr) 5rem;
  gap: clamp(.8rem, 2vw, 2rem); padding: 1.1rem .4rem; border-bottom: 1px solid rgba(191,160,106,.16); }
.ta-kopf { padding-block: .8rem; }
.ta-kopf span { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(191,160,106,.85); }
.ta-kopf span:last-child, .ta-zeile .spar { text-align: right; }
.ta-zeile .zeit { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); }
.ta-zeile .heute { font-size: .85rem; line-height: 1.75; color: rgba(240,234,224,.82); }
.ta-zeile .system { font-size: .85rem; line-height: 1.75; color: var(--fog); }
.ta-zeile .system b { font-weight: 400; color: var(--gold-lt); }
.ta-zeile .spar { font-size: .72rem; color: var(--fog); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ta-summe { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.4rem .4rem 0; }
.ta-summe span { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fog); }
.ta-summe b { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--gold-lt); line-height: 1; }
@media (max-width: 820px) {
  .ta-kopf { display: none; }
  .ta-zeile { grid-template-columns: 4.5rem minmax(0,1fr); gap: .3rem .9rem; }
  .ta-zeile .system, .ta-zeile .spar { grid-column: 2; text-align: left; }
  .ta-zeile .heute::before { content: 'Heute: '; color: var(--fog); }
  .ta-zeile .system::before { content: 'Mit System: '; color: rgba(191,160,106,.8); }
}

/* ── Einwaende (leistungen.html) ──────────────────────────────────────────────
   Vier Saetze, die in jedem Erstgespraech fallen, und die Antwort darauf. Der Einwand steht
   als Zitat in der Display-Schrift, die Antwort im Fliesstext — damit man beim Scrollen
   zuerst den eigenen Gedanken liest und dann die Entgegnung. */
.einwaende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.ew { padding: clamp(1.6rem, 2.6vw, 2.4rem); border: 1px solid rgba(191,160,106,.14); }
.ew q { display: block; font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.35; color: var(--gold-lt); quotes: '„' '“'; }
.ew p { margin-top: 1.1rem; font-size: .87rem; line-height: 1.9; color: var(--fog); }
.ew p strong { font-weight: 400; color: var(--linen); }
@media (max-width: 780px) { .einwaende { grid-template-columns: 1fr; } }

/* ── Kreislauf (leistungen.html) ──────────────────────────────────────────────
   Der benannte Mechanismus. Vier Stufen als Kette, darunter die Ruecklaufkante — die
   gewonnene Zeit finanziert die naechste Runde. Bewusst als Schema ohne Zahlen, wie die
   Hebel-Grafik auf rechner.html. */
.kreis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 2.5rem; }
.ks { padding: clamp(1.4rem, 2.2vw, 2rem); border: 1px solid rgba(191,160,106,.16); position: relative; }
.ks .st { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(191,160,106,.85); }
.ks h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; margin: .7rem 0 0; color: var(--linen); }
.ks p { margin-top: .7rem; font-size: .82rem; line-height: 1.8; color: var(--fog); }
.ks .disz { margin-top: 1rem; display: block; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(240,234,224,.45); }
.kreis-fuss { margin-top: 2px; border: 1px solid rgba(191,160,106,.16); border-top: 0;
  padding: 1.2rem clamp(1.4rem, 2.2vw, 2rem); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kreis-fuss .pfeil { color: var(--gold); font-size: 1rem; }
.kreis-fuss p { font-size: .84rem; line-height: 1.8; color: var(--fog); margin: 0; }
.kreis-fuss p b { font-weight: 400; color: var(--gold-lt); }
@media (max-width: 980px) { .kreis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kreis { grid-template-columns: 1fr; } }

/* ── Mobile CTA-Leiste (Leistungsseiten) ──────────────────────────────────────
   Die Leistungsseiten sind lang; am Handy ist der naechste Schritt nach dem ersten
   Bildschirm ausser Sicht und kommt erst ganz unten wieder. Die Leiste blendet sich nach
   dem Hero ein und faehrt mit. Gebaut wird sie von main.js, ausgeloest durch
   data-mobil-cta am Hero — nur dort, wo sie gewollt ist. Ab 861 px ist sie aus. */
.mobil-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none;
  padding: .7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(20,18,15,.94); border-top: 1px solid rgba(191,160,106,.35);
  transform: translateY(110%); transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.mobil-cta.an { transform: translateY(0); }
.mobil-cta a { display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 1rem 1.2rem; background: var(--gold); color: #221d15;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.mobil-cta .zweit { display: block; text-align: center; margin-top: .55rem;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); }
.mobil-cta .zweit a { display: inline; background: none; color: var(--gold-lt); padding: 0;
  font-size: inherit; letter-spacing: inherit; border-bottom: 1px solid rgba(191,160,106,.4); }
@media (max-width: 860px) { .mobil-cta { display: block; } }
@media (prefers-reduced-motion: reduce) { .mobil-cta { transition: none; } }

/* ── Disziplinen-Karten (Startseite) ───────────────────────────────────────────
   Gleicher Aufbau wie die Referenzkarten oben (.case): Bildkachel mit Begriff im Fuss des Bildes,
   darunter Nummernfeld, Bausteinzeile in Gold und ein Satz. Nur ohne Schiene — fuenf Karten stehen
   fest nebeneinander. Ab 1100 px bricht es auf drei, dann zwei, dann eine Spalte um; das Nummern-
   feld rutscht dabei nicht, weil der Fuss mit fester Spaltenbreite gesetzt ist. */
/* Gemeinsames Zeilenraster: Bild, Bausteinzeile, Titel und Satz jeder Karte liegen in
   denselben vier Zeilen des Elternrasters (subgrid). Dadurch stehen die Titel aller Karten
   einer Reihe auf einer Linie, auch wenn die Bausteinzeile mal zwei und mal drei Zeilen
   braucht (Beispiel: „Website · Buchungsstrecke · Profile"). Vorher rutschte der Titel
   dieser Karte um eine Zeile nach unten.
   Der Zeilenabstand des Rasters muss dafuer 0 sein, sonst klafft er auch INNERHALB der
   Karte zwischen Bild und Fuss. Die Luft zwischen zwei Kartenreihen kommt deshalb aus
   margin-bottom der Karte, die letzte Reihe holt sie sich unten wieder zurueck.
   Browser ohne subgrid zeigen die Karten wie vorher, nur ohne die gemeinsame Linie. */
.disziplinen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 1.25rem; row-gap: 0; margin-bottom: -1.25rem; }
.dz {
  background: var(--stone-md); border: 1px solid rgba(191,160,106,.22);
  display: grid; grid-template-rows: subgrid; grid-row: span 4; margin-bottom: 1.25rem;
  transition: border-color .4s, background .4s;
}
.dz:hover { border-color: rgba(191,160,106,.5); background: #322e28; }
.dz-media { position: relative; aspect-ratio: 1 / 1.08; overflow: hidden; background: var(--stone); }
.dz-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.72) brightness(.78); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .6s; }
.dz:hover .dz-media img { transform: scale(1.04); filter: saturate(.85) brightness(.88); }
.dz-media::after {   /* Fussverlauf, damit der Begriff auch auf hellen Motiven steht */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
  background: linear-gradient(to top, rgba(20,18,15,.82), rgba(20,18,15,0));
}
.dz-ergebnis {
  position: absolute; left: 1rem; bottom: .9rem; z-index: 1; font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(240,234,224,.9);
}
.dz-foot { grid-row: span 3; display: grid; grid-template-rows: subgrid;
  grid-template-columns: 44px minmax(0, 1fr); column-gap: .9rem;
  padding: 1rem 1rem 1.15rem; border-top: 1px solid rgba(191,160,106,.18); }
.dz-bausteine, .dz-titel, .dz-satz { grid-column: 2; }
.dz-nr {
  grid-column: 1; grid-row: 1 / span 3; align-self: start;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--stone); border: 1px solid rgba(191,160,106,.22);
  font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); line-height: 1;
}
/* Laufweite bewusst enger als sonst (.12em statt .16em): die Bausteinzeile steht in einer
   sehr schmalen Spalte, und jede Zeile mehr schiebt ueber das gemeinsame Raster alle
   fuenf Titel nach unten. Ab 1440 px kommen damit alle Karten mit zwei Zeilen aus. */
.dz-bausteine { display: block; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(191,160,106,.85); line-height: 1.45; }
.dz-titel { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; line-height: 1.3;
  color: var(--linen); margin: .28rem 0 0; }
.dz-satz { font-size: .78rem; line-height: 1.6; color: var(--fog); margin-top: .38rem; }
@media (max-width: 1100px) { .disziplinen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .disziplinen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .disziplinen { grid-template-columns: 1fr; }
  .dz-media { aspect-ratio: 16 / 10; } }

/* ── Systemarchiv (leistungen/automationen.html) ───────────────────────────────
   Die fuenf Bereiche liegen wie Karteikarten uebereinander. Jede Karte bleibt beim
   Scrollen oben stehen (position: sticky), die naechste schiebt sich darueber und
   laesst nur einen Streifen der vorigen sichtbar. Weil der Halt mit dem Index um
   eine Stufe waechst, entsteht ein Stapel: man sieht, wie viel noch kommt und wie
   viel schon durch ist.
   Voraussetzungen, die man beim Aendern nicht kippen darf:
   1. Die Karten muessen Geschwister im selben Container sein. Spaetere Geschwister
      liegen im Stapel oben, deshalb deckt Karte 03 die Karte 02 ab. Ein Wrapper je
      Karte oder eine Reihenfolgeaenderung zerstoert das.
   2. Jede Karte braucht einen deckenden Hintergrund, sonst scheint die darunter durch.
   3. Kein Elternelement mit overflow: hidden oder auto. Der Body traegt bewusst
      overflow-x: clip (nicht hidden), clip erzeugt keinen Scrollcontainer.
   4. Die Karte muss kuerzer sein als das Fenster, sonst wird ihr Fuss abgeschnitten.
      Deshalb die flachere Staffelung bei niedrigen Fenstern weiter unten. */
/* Der Fussraum ist der Halt der letzten Karte. Sticky endet immer am Elternelement:
   ohne diesen Puffer koennte Karte 05 gar nicht stehen bleiben, weil der Container
   genau an ihrer Unterkante endet. Mit dem Puffer bleibt der Stapel eine Weile
   stehen und faehrt danach als Ganzes nach oben aus dem Bild. */
.archiv { --arch-top: 5.2rem; --arch-stufe: 2.62rem;
  position: relative; display: flex; flex-direction: column; gap: 1.3rem; padding-bottom: 20vh; }
/* Lichtstimmung hinter dem Stapel. Milchglas ueber einer glatten Flaeche sieht aus wie
   graues Papier, es braucht etwas zum Brechen. Drei weiche Lichtinseln in Gold und Pine
   reichen; sie liegen hinter den Karten, weil das Pseudoelement vor ihnen im Markup steht. */
/* Die Lichtinseln duerfen an keiner Stelle eine Kante zeigen. Drei Dinge sorgen dafuer:
   der Kasten ragt weit ueber den Stapel hinaus, ein starker Weichzeichner verwischt jede
   Beschnittkante, und eine Maske blendet den Kasten zu allen Seiten aus. Ohne die Maske
   sah man dort, wo ein Verlauf den Kasten verlaesst, eine gerade Linie im Hintergrund. */
.archiv::before { content: ''; position: absolute; inset: -18% -10% -8%; pointer-events: none;
  background:
    radial-gradient(46% 30% at 14% 12%, rgba(191,160,106,.5), transparent 72%),
    radial-gradient(42% 32% at 84% 34%, rgba(59,74,62,.85), transparent 74%),
    radial-gradient(40% 26% at 34% 62%, rgba(191,160,106,.34), transparent 74%),
    radial-gradient(38% 28% at 72% 84%, rgba(59,74,62,.68), transparent 76%);
  filter: blur(52px);
  -webkit-mask-image: radial-gradient(112% 92% at 50% 50%, #000 42%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(112% 92% at 50% 50%, #000 42%, rgba(0,0,0,0) 100%);
}
/* Glaskarte. Abweichung vom Haus-Stil (sonst keine Rundungen, keine Schatten), von Mario
   ausdruecklich fuer diesen Block gewuenscht. Das Milchglas zeigt die darunterliegende
   Karte verwaschen durch, dadurch entsteht die Tiefe im Stapel.
   Die Grundtoenung muss deckend genug bleiben (.62), sonst liest man den Text der Karte
   darunter mit. Wer den Blur senkt, muss die Toenung anheben. */
.arch {
  position: sticky; top: calc(var(--arch-top) + var(--i) * var(--arch-stufe));
  border-radius: 26px; overflow: hidden; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03) 44%, rgba(255,255,255,.014)),
    rgba(62,57,49,.55);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 1px 0 0 rgba(255,255,255,.06),
    inset -1px 0 0 rgba(255,255,255,.06),
    0 34px 64px -28px rgba(0,0,0,.85),
    0 10px 24px -12px rgba(0,0,0,.55);
}
/* Kante und Glanz: oben links faengt die Karte Licht, unten rechts laeuft es aus. */
.arch::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255,255,255,.09), transparent 26%,
    transparent 74%, rgba(255,255,255,.045)); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .arch { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), #26231e; }
}
/* Der Reiter ist genau so hoch wie eine Stapelstufe. Dadurch bleibt von jeder
   abgelegten Karte ihr Reiter stehen, wie die Register in einem Ordner.
   Wer --arch-stufe aendert, aendert auch die Polsterung des Reiters. */
.arch-reiter { position: relative; z-index: 1; display: flex; align-items: baseline; gap: .95rem;
  padding: .72rem 1.5rem; background: rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.11); }
.arch-nr { font-family: var(--font-display); font-size: .95rem; line-height: 1; color: var(--gold); }
.arch-nr i { font-style: normal; font-size: .62em; color: rgba(191,160,106,.55); margin-left: .2em; }
.arch-name { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(240,234,224,.85); }
.arch-body { display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 2.8rem;
  padding: 1.7rem 2.1rem 2.1rem; }
.arch { display: flex; flex-direction: column; }
.arch-body { flex: 1; }
.arch-kopf { display: flex; flex-direction: column; }
.arch-symbol { display: block; margin: .2rem 0 1.2rem; color: var(--gold); }
.arch-symbol svg { display: block; width: 40px; height: 40px;
  fill: none; stroke: currentColor; stroke-width: 1; }
.arch-kopf h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem;
  line-height: 1.2; color: var(--linen); }
.arch-kopf p { font-size: .8rem; line-height: 1.7; color: var(--fog); margin-top: .85rem; }
.arch-liste { list-style: none; margin: 0; padding: 0; }
.arch-body { position: relative; z-index: 1; }
.arch-liste li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 1.5rem;
  padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.09); }
.arch-liste li:first-child { border-top: 0; padding-top: .15rem; }
.arch-liste li:last-child { padding-bottom: 0; }
.as-wert { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; color: var(--gold); }
.as-wert em { display: block; font-family: var(--font-body); font-style: normal; font-size: .54rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fog); margin-top: .35rem; }
.arch-liste h4 { font-family: var(--font-display); font-weight: 400; font-size: 1rem;
  line-height: 1.3; color: var(--linen); }
.arch-liste p { font-size: .77rem; line-height: 1.6; color: var(--fog); margin-top: .25rem; }
/* Flache Fenster: Stapelstufe und Abstand nach oben kleiner, sonst haengt die letzte
   Karte unten aus dem Bild. */
@media (max-height: 800px) { .archiv { --arch-top: 3.4rem; --arch-stufe: 2.22rem; }
  .arch-reiter { padding: .52rem 1.4rem; }
  .arch-body { padding: 1.3rem 1.8rem 1.6rem; gap: 2rem; }
  .arch-symbol { margin: .1rem 0 .8rem; } }
/* Schmal: der Stapel ergibt keinen Sinn mehr, die Karten stehen einfach untereinander. */
@media (max-width: 1000px) {
  .archiv { padding-bottom: 0; }
  .arch { position: static; }
  .arch-body { grid-template-columns: 1fr; gap: 1.5rem; }
  .archiv { gap: 1rem; }
  .arch-symbol { margin: .2rem 0 .9rem; }
}
@media (max-width: 560px) {
  .arch { border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
    0 14px 30px -18px rgba(0,0,0,.7); }
  .arch-reiter { padding: .7rem 1.3rem; }
  .arch-body { padding: 1.4rem 1.3rem 1.6rem; }
  .arch-liste li { grid-template-columns: 1fr; gap: .45rem; }
  .as-wert em { display: inline; margin-left: .6em; }
}
@media (prefers-reduced-motion: reduce) { .arch { position: static; } }

.cases-bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1.8rem; }
.cases-count { font-family: var(--font-display); font-size: 1.15rem; color: var(--fog); letter-spacing: .04em; }
.cases-count b { font-weight: 300; color: var(--linen); }
.cases-dots { display: flex; gap: 9px; flex: 1 1 auto; justify-content: center; }
.cases-dots i { width: 6px; height: 6px; background: rgba(191,160,106,.28); transition: background .3s, transform .3s; }
.cases-dots i.on { background: var(--gold); transform: scale(1.35); }
.cases-nav { display: flex; gap: 8px; }
.cases-nav button {
  width: 46px; height: 46px; border: 1px solid rgba(191,160,106,.4); background: transparent;
  color: var(--linen); font: 300 1.1rem/1 var(--font-body); cursor: pointer; transition: background .3s, border-color .3s;
}
.cases-nav button:hover { background: rgba(191,160,106,.12); border-color: var(--gold); }
.cases-nav button:disabled { opacity: .3; cursor: default; background: transparent; }
@media (max-width: 700px) {
  .cases-bar { flex-wrap: wrap; }
  .cases-dots { order: 3; flex-basis: 100%; justify-content: flex-start; margin-top: 1rem; }
}

/* ── Logo-Orbit (referenzen.html) ──────────────────────────────────────
   Vorbild nxtyou.de ("Diese Partner vertrauen uns bereits"): Logos auf
   Glaswuerfeln, die um die Headline kreisen. Marios Vorgaben: sie bewegen
   sich VON SELBST (nicht scroll-gesteuert), sind IMMER sichtbar (kein
   Einblenden), ueberlappen sich NIE, und die Wuerfel sind GROSS (lesbar).

   Seit 9y: EIN Ring als Ellipse (Viewport ist breiter als hoch — so werden
   die Wuerfel doppelt so gross, ohne dass sich zwei Ringe in die Hoehe
   stapeln muessten). Position jeder Kachel = (rx*sin(phi), -ry*cos(phi)),
   phi = eigener Winkel --a + gemeinsamer Laufwinkel --orbit-t (registrierte
   Custom Property, per Keyframes animiert). Die Wuerfel stehen dadurch von
   selbst aufrecht — keine Gegendrehung noetig.

   Ueberlappung ist geometrisch ausgeschlossen: Nachbarn (Abstand 40 Grad
   bei 9 Kacheln) unterscheiden sich um dx = 2*rx*sin(20deg)*cos(phi),
   dy = 2*ry*sin(20deg)*sin(phi); achsparallele Quadrate ueberlappen nur
   wenn |dx| < s UND |dy| < s — unmoeglich, solange
   (s/ampx)^2 + (s/ampy)^2 < 1. Wird im Test (orb8.js) mit < .8 geprueft.

   AUSNAHME vom System (wie MacBook und Smartphone): die Glaswuerfel haben
   Rundungen, Schatten und backdrop-filter — anders gibt es kein "liquid
   glass". Alles andere im Abschnitt bleibt scharfkantig. */
/* Registrierte Property fuer den Laufwinkel. ACHTUNG: Name muss projektweit eindeutig sein — ein
   @property gilt global; '--t' war schon die Bodenplatten-Dicke des MacBooks (Laenge) und ist damit
   einmal gebrochen. Deshalb '--orbit-t'. */
@property --orbit-t { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.orbit-section { padding: 0; height: 190vh; }   /* Scrollstopper: Abschnitt bleibt ~0,9 Bildschirmhoehen "kleben", bevor es hell weitergeht */
.orbit {
  --n: 9;                                          /* Kacheln (nur Doku; Winkel kommen aus dem HTML) */
  --s: clamp(110px, min(16vh, 11vw), 190px);       /* Kachelkante (144 px bei 1440x900); (s/ampx)^2+(s/ampy)^2 bleibt < .8 */
  --rx: calc(36vw - var(--s) / 2);                 /* Ellipse: Halbachsen — bewusst enger um den Text, nicht bis an den Rand */
  --ry: calc(42vh - var(--s) / 2);
  --t-orbit: 150s;                                 /* eine Umdrehung */
  position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 0 var(--pad-x);
  background: var(--stone);   /* bewusst ruhig: kein Lichtkern, keine Strahlen — nur Text und Logos */
}
.orbit-head { position: relative; z-index: 2; text-align: center; }
.orbit-head .eyebrow { justify-content: center; }
.orbit-head .eyebrow::before { display: none; }
.orbit-head .h2 { margin-top: .7rem; color: var(--linen); font-size: min(2.8rem, 4vh); line-height: 1.12; white-space: nowrap; }

/* Ring und Speichen */
.orbit-field { position: absolute; inset: 0; pointer-events: none; }
.ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; --orbit-t: 0deg;
  animation: orbit-run var(--t-orbit) linear infinite; }
@keyframes orbit-run { to { --orbit-t: 360deg; } }
.spoke { position: absolute; left: 0; top: 0; --phi: calc(var(--a) + var(--orbit-t));
  transform: translate(calc(var(--rx) * sin(var(--phi))), calc(-1 * var(--ry) * cos(var(--phi)))); }

/* Der Glaswuerfel */
.gcube {
  position: absolute; width: var(--s); aspect-ratio: 1; margin-left: calc(var(--s) / -2); margin-top: calc(var(--s) / -2);
  border-radius: 19%; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(145deg, rgba(70,64,56,.55) 0%, rgba(24,22,19,.72) 52%, rgba(52,47,40,.5) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 0 0 7px rgba(255,255,255,.035),
    inset 0 0 22px 8px rgba(255,255,255,.07),
    inset 5px 5px 14px rgba(255,255,255,.16),
    inset -12px -12px 26px rgba(0,0,0,.62),
    0 18px 40px rgba(0,0,0,.4);
}
.gcube::before {   /* Chromkante: Verlauf als Rahmen, per Maske ausgestanzt */
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3;
  background: conic-gradient(from 200deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 10%, rgba(255,255,255,.08) 28%,
    rgba(255,255,255,.55) 52%, rgba(255,255,255,0) 66%, rgba(255,255,255,.4) 86%, rgba(255,255,255,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.gcube::after {    /* Lichtreflex, wandert langsam -> "liquid" */
  content: ''; position: absolute; inset: -30%; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse 30% 16% at 34% 26%, rgba(255,255,255,.34), transparent 70%),
    radial-gradient(ellipse 26% 14% at 72% 78%, rgba(255,255,255,.14), transparent 70%),
    linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 60%);
  animation: sheen 22s ease-in-out infinite alternate;
}
@keyframes sheen { from { transform: rotate(-14deg) translate(-3%, -2%); } to { transform: rotate(14deg) translate(3%, 2%); } }
.gcube img { position: absolute; inset: 17%; width: 66%; height: 66%; object-fit: contain; z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }

/* Lichtwurf IM Glas: das Logo noch einmal als weiche goldene Silhouette hinter dem weissen Logo,
   leicht groesser und nach unten versetzt — als laege der Schriftzug im Wuerfel und wuerfe seinen
   Schatten auf den Boden des Glases. Bleibt durch overflow:hidden immer innerhalb des Wuerfels.
   Atmet langsam, jede Kachel versetzt (--i).
   Maske und Weichzeichner liegen auf zwei Ebenen: der Browser maskiert NACH dem Filter, auf einer
   Ebene wuerde die Maske den Schein wieder scharf beschneiden. */
.cast {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  filter: blur(calc(var(--s) * .028)); opacity: .8;
  transform: translate(0, 9%) scale(1.22);
  animation: cast 8s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.5s);
}
.cast > i {   /* mask-image steht inline im HTML (url() in einer Custom Property wuerde relativ zur CSS-Datei aufgeloest) */
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, var(--gold-lt) 0%, var(--gold) 55%, rgba(191,160,106,.7) 100%);
  -webkit-mask-size: 66%; mask-size: 66%; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
@keyframes cast {
  from { transform: translate(-2%, 7%) scale(1.16);  opacity: .55; }
  to   { transform: translate(2%, 11%) scale(1.28);  opacity: .95; }
}

@media (max-aspect-ratio: 1/1) and (min-width: 701px) {   /* Tablet hochkant: Ellipse braucht die volle Breite */
  .orbit { --rx: calc(50vw - var(--s) / 2 - 24px); }
}
@media (max-width: 700px) {
  /* Hochkant: die Headline passt nicht in die Ellipse -> sie steht oben,
     der Ring kreist darunter in einem hochkant-elliptischen Feld. */
  .orbit-section { height: auto; }
  .orbit { --s: 72px; --rx: calc(50vw - 46px); --ry: calc(75vw - 46px); position: relative;
    height: auto; min-height: 0; flex-direction: column; justify-content: flex-start; gap: 1rem; padding: 5rem 1rem 3rem; }
  .orbit-head { max-width: 86vw; }
  .orbit-head .h2 { font-size: 1.9rem; white-space: normal; }
  .orbit-field { position: relative; inset: auto; width: 100%; height: 150vw; }
}
@media (prefers-reduced-motion: reduce) {
  .ring, .cast, .gcube::after { animation: none; }
}

/* ── Timeline / Steps ── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.steps::before { content: ''; position: absolute; top: 2.2rem; left: 4%; right: 4%; height: 1px; background: rgba(191,160,106,.25); }
.step { padding: 0 2rem; text-align: center; }
.step .circle {
  width: 4.5rem; height: 4.5rem; border: 1px solid rgba(191,160,106,.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 2.5rem;
  background: var(--stone); font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-lt);
  position: relative; z-index: 1; transition: border-color .3s;
}
.bg-snow .step .circle, .bg-linen .step .circle { background: var(--snow); color: var(--stone); border-color: var(--linen-dk); }
.step:hover .circle { border-color: var(--gold); }
.step .week { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .8rem; }
.step h4 { font-size: 1.1rem; font-weight: 400; margin-bottom: .7rem; }
.step p { font-size: .8rem; line-height: 1.8; color: var(--fog); }

/* ── Feature list ── */
.feature-list { list-style: none; }
.feature-list li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem; padding: 1.8rem 0; border-bottom: 1px solid rgba(191,160,106,.15); }
.feature-list li:first-child { border-top: 1px solid rgba(191,160,106,.15); }
.bg-linen .feature-list li, .bg-snow .feature-list li { border-color: var(--linen-dk); }
.feature-list .n { font-family: var(--font-display); color: var(--gold); padding-top: .2rem; }
.feature-list h4 { font-size: 1.1rem; font-weight: 400; margin-bottom: .4rem; }
.feature-list p { font-size: .85rem; line-height: 1.8; color: var(--fog); }

/* ── Split layout ── */
.split { display: grid; grid-template-columns: 5fr 4fr; gap: 8vw; align-items: start; }
.split.reverse { grid-template-columns: 4fr 5fr; }

/* ── Quote / statement ── */
.statement { text-align: center; }
.statement h2 { font-size: clamp(2.2rem, 4.2vw, 4.3rem); max-width: 34ch; margin: 0 auto 2rem; text-wrap: balance; }
.statement h2 em { color: var(--gold); }
.statement p { max-width: 50ch; margin: 0 auto 3rem; color: var(--fog); }

/* ── Team ── */
/* Acht Personen = zwei Viererreihen. Zwischenstufe bei 1180 px auf zwei Spalten, sonst werden die
   Portraits so schmal, dass die Koepfe winzig wirken. */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; max-width: 1360px; margin: 0 auto; }
@media (max-width: 1180px) { .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; } }
.team-card { background: var(--stone-md); padding: 0; overflow: hidden; }
.team-card .portrait {
  aspect-ratio: 4/5; background: linear-gradient(160deg, var(--stone-lt), var(--stone));
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.team-card .portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) contrast(1.05); transition: filter .5s, transform .8s, opacity .5s ease; }
/* Alle Portraits erscheinen gemeinsam, nicht eines nach dem anderen: main.js setzt
   .portraits-laden auf das Raster und nimmt es weg, sobald alle Bilder dekodiert sind.
   Ohne JavaScript wird die Klasse nie gesetzt — dann sind die Bilder sofort sichtbar. */
.team-grid.portraits-laden .portrait img { opacity: 0; }
.team-card:hover .portrait img { filter: saturate(.85); transform: scale(1.03); }
.team-card .initials { font-family: var(--font-display); font-size: 3.6rem; color: rgba(191,160,106,.25); letter-spacing: .05em; }
.team-card .info { padding: 1.6rem 1.7rem 2rem; }
.team-card .name { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; font-family: var(--font-display); font-size: 1.4rem; font-weight: 400;
  color: var(--linen); }
/* LinkedIn als App-Kachel am rechten Rand des Textblocks: gerundetes Quadrat mit Rahmen,
   Symbol in Gold statt im LinkedIn-Blau (das Blau schlaegt in dieser Palette alles tot).
   flex: 0 0 auto, sonst staucht ein langer Name die Kachel. */
.team-card .li { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid rgba(191,160,106,.34); background: rgba(191,160,106,.07);
  color: rgba(191,160,106,.8);
  transition: color .3s, border-color .3s, background .3s, transform .3s, box-shadow .3s; }
.team-card .li svg { display: block; width: 15px; height: 15px; fill: currentColor; }
.team-card .li:hover { color: var(--stone); border-color: var(--gold); background: var(--gold);
  transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(0,0,0,.7); }
.team-card .role { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-top: .4rem; display: block; }
.team-card .bio { font-size: .82rem; color: var(--fog); margin-top: 1rem; line-height: 1.8; }

/* ── Logo strip ── */
.logo-strip { padding: 2rem var(--pad-x); overflow: hidden; position: relative; }
.logo-strip-label { text-align: center; font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(191,160,106,.5); margin-bottom: 1.2rem; }
.logo-track { display: flex; align-items: center; gap: 5rem; width: max-content; animation: logoScroll 40s linear infinite; }
.logo-strip:hover .logo-track { animation-play-state: paused; }
@keyframes logoScroll { from { transform: translateX(0);} to { transform: translateX(-25%);} }
.logo-item { flex-shrink: 0; transition: transform .3s; }
.logo-item:hover { transform: scale(1.12); }
/* 56 px, NICHT 90: die Leiste nutzt seit 9y die normierten -sign.png (Inhalt auf geometrisches
   Mittel 100 gebracht, Canvas 260x120) statt der alten 200x200-Originale mit breitem Rand. Bei 90 px
   waren die Logos dadurch rund 1,6x groesser als vorher. 56 px trifft das alte Bild:
   100 * 56/120 = 47 ~ 46,4 = Mittel der sechs alten Logos bei height:90px auf 200x200-Canvas.
   Diese Groesse gilt NUR fuer die Leiste — Karussell, Orbit und Fallback-Platten haben eigene Masse. */
.logo-item img { height: 56px; width: auto; }
.logo-divider { width: 1px; height: 2rem; background: rgba(191,160,106,.2); flex-shrink: 0; }

/* ── 360 tour blocks ── */
.tour-block { background: var(--stone); position: relative; overflow: hidden; }
.tour-badge { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; padding: 1.5rem; background: linear-gradient(to bottom, rgba(28,26,23,.7), transparent); pointer-events: none; }
.tour-badge span { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.tour-badge .live { border: 1px solid rgba(191,160,106,.3); padding: .25rem .6rem; color: rgba(191,160,106,.7); }
.tour-block iframe { display: block; width: 100%; height: 460px; border: none; }
.tour-footer { padding: 1.5rem 2rem; background: rgba(20,18,16,.7); border-top: 1px solid rgba(191,160,106,.1); }
.tour-footer .t { font-family: var(--font-display); font-size: 1rem; font-weight: 400; color: var(--linen); display: block; }
.tour-footer .s { font-size: .72rem; color: var(--fog); margin-top: .2rem; letter-spacing: .06em; }

/* ── FAQ ── */
.faq-item { border-top: 1px solid rgba(191,160,106,.15); }
.faq-item:last-child { border-bottom: 1px solid rgba(191,160,106,.15); }
.bg-linen .faq-item, .bg-snow .faq-item { border-color: var(--linen-dk); }
.faq-btn {
  width: 100%; background: none; border: none; padding: 1.8rem 0; display: flex; justify-content: space-between;
  align-items: center; gap: 2rem; cursor: none; font-family: var(--font-display); font-size: 1.1rem; font-weight: 400;
  color: inherit; text-align: left; transition: color .3s;
}
.faq-btn:hover { color: var(--gold); }
.faq-plus { font-size: 1.4rem; color: var(--gold); transition: transform .4s; font-family: var(--font-body); font-weight: 200; }
.faq-item.open .faq-plus { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer-inner { padding: 0 4rem 2rem 0; font-size: .88rem; line-height: 1.9; color: var(--fog); }

/* ── CTA banner ── */
.cta-banner { text-align: center; padding: 10rem var(--pad-x); position: relative; overflow: hidden; }
.cta-banner h2 { font-size: clamp(2.4rem, 4.2vw, 4.3rem); line-height: 1; margin-bottom: 2rem; }
.cta-banner h2 em { color: var(--gold); }
.cta-banner p { max-width: 68ch; margin: 0 auto 3rem; color: var(--fog); text-wrap: balance; }
/* 68ch statt 46ch plus balance: bei 46ch fiel in fast jedem Banner das letzte Wort allein
   auf eine dritte Zeile („reden."). Jetzt stehen die Saetze zweizeilig und gleich lang. */

/* ── Footer ── */
footer.site-footer { position: relative; z-index: 1; background: var(--stone); color: var(--linen); padding: 5rem var(--pad-x) 3rem; border-top: 1px solid rgba(191,160,106,.1); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem; }
.footer-brand .nav-logo { font-size: 1.15rem; }
.footer-brand p { font-size: .8rem; color: var(--fog); margin-top: 1rem; line-height: 1.8; max-width: 32ch; }
/* Die 32ch gelten dem Satz darüber. Die Adressen brauchen mehr, sonst bricht jede Zeile
   nach dem Ort um und das Land steht allein darunter. */
.footer-brand p.adresse { max-width: none; }
.footer-col h5 { font-size: .62rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; font-family: var(--font-body); font-weight: 400; }
.footer-col a { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(140,132,120,.7); padding: .35rem 0; transition: color .2s; }
.footer-col a:hover { color: var(--linen); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid rgba(191,160,106,.1); font-size: .65rem; color: rgba(140,132,120,.5); letter-spacing: .1em; flex-wrap: wrap; gap: 1rem; }

/* ── Reveal ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; }

/* ── Cookie banner ── */
#cookie-banner {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 8000; max-width: 340px; width: calc(100vw - 3rem);
  background: var(--stone); border: 1px solid rgba(191,160,106,.25); padding: 1.5rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
}
#cookie-banner p.t { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .75rem; font-weight: 400; }
#cookie-banner p.b { font-size: .8rem; color: var(--fog); line-height: 1.7; margin-bottom: 1.25rem; }
#cookie-banner p.b a { color: var(--gold); text-decoration: underline; }
#cookie-banner .row { display: flex; gap: .75rem; }
#cookie-banner button { flex: 1; padding: .65rem 1rem; font-family: var(--font-body); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; cursor: none; border: 1px solid rgba(191,160,106,.35); background: transparent; color: var(--fog); transition: .2s; }
#cookie-banner button.accept { background: var(--gold); border-color: var(--gold); color: var(--stone); font-weight: 500; }
#cookie-banner button:hover { border-color: var(--gold); color: var(--linen); }
#cookie-banner button.accept:hover { background: var(--gold-lt); color: var(--stone); }

/* ── Journal / Article ── */
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.article-card { background: #fff; border: 1px solid var(--linen-dk); padding: 2.5rem; display: flex; flex-direction: column; transition: border-color .3s; }
.article-card:hover { border-color: var(--gold); }
.article-card .cat { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.article-card h3 { font-size: 1.35rem; font-weight: 400; margin: 1rem 0; line-height: 1.3; }
.article-card p { font-size: .85rem; color: var(--fog); line-height: 1.8; flex: 1; }
.article-card .meta { font-size: .65rem; color: var(--fog); letter-spacing: .1em; margin-top: 1.5rem; }
.article-body { max-width: 720px; margin: 0 auto; }
.article-body h2 { font-size: 1.9rem; margin: 3.5rem 0 1.2rem; font-weight: 400; }
.article-body h3 { font-size: 1.35rem; margin: 2.5rem 0 1rem; font-weight: 400; }
.article-body p { font-size: .98rem; line-height: 1.95; color: #3d3830; margin-bottom: 1.4rem; }
.article-body ul, .article-body ol { margin: 0 0 1.5rem 1.4rem; }
.article-body li { font-size: .95rem; line-height: 1.9; color: #3d3830; margin-bottom: .5rem; }
.article-body strong { font-weight: 500; color: var(--stone); }
.article-body blockquote { border-left: 2px solid var(--gold); padding: 1.2rem 2rem; margin: 2.5rem 0; background: var(--linen); font-family: var(--font-display); font-size: 1.3rem; font-style: italic; line-height: 1.5; }
.article-body .callout { background: var(--stone); color: var(--linen); padding: 2rem 2.5rem; margin: 2.5rem 0; }
.article-body .callout .big { font-family: var(--font-display); font-size: 3rem; color: var(--gold-lt); line-height: 1; display: block; margin-bottom: .5rem; }
.article-body .callout p { color: var(--fog); margin: 0; font-size: .88rem; }
.article-body table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: .88rem; }
.article-body th, .article-body td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--linen-dk); }
.article-body th { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.article-body .sources { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--linen-dk); font-size: .78rem; color: var(--fog); }
.article-body .sources h4 { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-family: var(--font-body); font-weight: 400; }
.article-body .sources li { font-size: .78rem; margin-bottom: .5rem; }
.article-body .sources a { color: var(--gold); word-break: break-all; }
.article-meta { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--fog); display: flex; gap: 1.5rem; margin-top: 1.5rem; }

/* ── Calculator ── */
/* ── Rechner-Hero (rechner.html) ──────────────────────────────────────
   Links die Ansage, rechts eine durchgerechnete Beispielrechnung. Ein abstraktes
   Schaltbild stand hier zuerst und sagte nichts: schoene Linien, keine Aussage.
   Jetzt sieht man sofort, was hinten herauskommt und woraus die Summe besteht.
   Die Zahlen kommen aus `beispiel()` in pages.py, also aus denselben Formeln und
   Vorgabewerten wie der Rechner selbst. Hintergrund ist ein CSS-Raster, kein Foto. */
.page-hero.rechner-hero { background: var(--stone); overflow: hidden; display: flex; align-items: center; padding: 10rem var(--pad-x) 7rem; }
.rechner-hero .raster {
  position: absolute; inset: -60px; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(191,160,106,.13) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(191,160,106,.13) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 62% 68% at 70% 45%, #000 8%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 68% at 70% 45%, #000 8%, transparent 72%);
  animation: raster-drift 32s linear infinite;
}
@keyframes raster-drift { from { background-position: 0 0, 0 0; } to { background-position: 54px 54px, 54px 54px; } }
/* fr statt Prozent: 46 % + 54 % + Abstand ergaeben zusammen mehr als die Breite,
   die Tafel lief dadurch rechts aus dem Raster heraus. */
.rechner-hero-innen { position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: .85fr 1fr; gap: 5vw; align-items: center; }
.rechner-hero h1 { max-width: none; }
.rechner-hero .lead { max-width: 42ch; }
.rechner-hero-cta { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 2.8rem; }
.rechner-hero-cta .dauer { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fog); }

/* Die Beispielrechnung: eine Tafel, kein Bild. Balken zeigen den Anteil jedes Postens. */
.beispiel { margin: 0; background: rgba(46,43,38,.55); border: 1px solid rgba(191,160,106,.28);
  padding: 2.6rem 2.8rem 2.2rem; backdrop-filter: blur(2px); }
.beispiel figcaption { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(191,160,106,.22); }
.beispiel .haus { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fog); }
.beispiel dl { margin: 0; }
.beispiel .zeile { position: relative; display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 1rem; padding: 1.5rem 0 1.1rem; }
.beispiel dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(240,234,224,.72); }
.beispiel dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; color: var(--linen); }
.beispiel .balken { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--gold);
  opacity: .85; animation: balken-auf 1.1s cubic-bezier(.22,.61,.36,1) both; }
.beispiel .zeile:nth-child(2) .balken { animation-delay: .12s; opacity: .6; }
.beispiel .zeile:nth-child(3) .balken { animation-delay: .24s; opacity: .4; }
@keyframes balken-auf { from { transform: scaleX(0); } to { transform: none; } }
.beispiel .balken { transform-origin: left center; }
.beispiel .summe { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(191,160,106,.35); }
.beispiel .summe .k { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.beispiel .summe .v { font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 3.2vw, 2.9rem); color: var(--gold-lt); line-height: 1; }
.beispiel .fuss { font-size: .72rem; line-height: 1.8; color: var(--fog); margin-top: 1.4rem; }
@media (prefers-reduced-motion: reduce) {
  .rechner-hero .raster, .beispiel .balken { animation: none; }
}
@media (max-width: 900px) {
  .page-hero.rechner-hero { padding-top: 8.5rem; }
  .rechner-hero-innen { grid-template-columns: 1fr; gap: 3rem; }
  .beispiel { padding: 2rem 1.6rem 1.6rem; }
  .beispiel dd { font-size: 1.3rem; }
}

/* ── Rechner zum Durchklicken ─────────────────────────────────────────
   Fuenf Schritte statt neun Regler auf einmal. Das Ergebnis ist erst am Ende sichtbar,
   deshalb steht die Eingabe allein und mittig statt in der halben Breite. */
/* zwei Klassen, damit die Regel die zweispaltige .calc-Vorgabe weiter unten schlaegt */
.calc.calc-wizard { grid-template-columns: minmax(0, 780px); justify-content: center; }
.calc.calc-wizard .calc-results { position: static; }
.wz-kopf { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 2.6rem; }
.wz-zaehler { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); white-space: nowrap; }
.wz-zaehler b { color: var(--gold); font-weight: 400; }
.wz-balken { flex: 1 1 auto; height: 2px; background: var(--linen-dk); position: relative; }
.wz-balken i { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; background: var(--gold);
  transition: width .5s cubic-bezier(.22,.61,.36,1); }
.wz-schritt { display: none; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.wz-schritt.an { display: block; animation: wz-rein .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes wz-rein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wz-frage { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.55; color: var(--stone);
  margin: -.4rem 0 2.2rem; max-width: 46ch; }
.wz-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 2.6rem; padding-top: 1.7rem; border-top: 1px solid var(--linen-dk); }
.wz-nav .btn { margin-left: auto; }
.wz-zurueck { background: none; border: 0; font: inherit; font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fog); cursor: none; padding: .6rem 0; transition: color .3s; }
.wz-zurueck:hover { color: var(--stone); }
.wz-aendern { display: block; background: none; border: 0; font: inherit; font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fog); cursor: none; padding: 0 0 1.4rem; transition: color .3s; }
.wz-aendern:hover { color: var(--gold); }
@media (pointer: coarse) { .wz-zurueck, .wz-aendern { cursor: pointer; } }

.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.calc-inputs { background: #fff; border: 1px solid var(--linen-dk); padding: 3rem; }
.calc-group { margin-bottom: 2.2rem; }
.calc-group label { display: flex; justify-content: space-between; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); margin-bottom: .8rem; }
.calc-group label output { color: var(--gold); font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0; text-transform: none; }
.calc-group input[type=range] { width: 100%; accent-color: var(--gold); cursor: none; }
.calc-group .hint { font-size: .7rem; color: var(--fog); margin-top: .4rem; }
.calc-section-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; margin: 2.5rem 0 1.5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--linen-dk); }
.calc-section-title:first-child { margin-top: 0; }
.calc-results { background: var(--stone); color: var(--linen); padding: 3rem; position: sticky; top: 7rem; }
.calc-results .total { font-family: var(--font-display); font-size: clamp(2.4rem, 3.8vw, 3.6rem); color: var(--gold-lt); line-height: 1; margin: .5rem 0 2rem; }
.calc-results .row { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid rgba(191,160,106,.15); }
.calc-results .row .k { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); }
.calc-results .row .v { font-family: var(--font-display); font-size: 1.5rem; color: var(--linen); }
.calc-results .note { font-size: .7rem; color: rgba(140,132,120,.6); margin-top: 1.5rem; line-height: 1.6; }
/* Ergebnis sichern: E-Mail-Formular (POST an rechner-ergebnis.php) + Ergebnisblatt drucken/als PDF.
   Druck-Layout steht page-scoped im <head> von rechner.html (pages.py, RECHNER_PRINT_CSS). */
.calc-mail { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid rgba(191,160,106,.25); position: relative; }
.calc-mail .eyebrow { color: var(--gold); }
.calc-mail-lead { font-size: .8rem; color: rgba(240,234,224,.62); line-height: 1.65; margin-top: .7rem; }
.calc-mail-row { display: flex; gap: .6rem; margin-top: 1.1rem; }
.calc-mail-row input { flex: 1 1 auto; min-width: 0; background: transparent; border: 1px solid rgba(191,160,106,.45); color: var(--linen); padding: .95rem 1.1rem; font: inherit; font-size: .9rem; }
.calc-mail-row input:focus { outline: none; border-color: var(--gold); }
.calc-mail-row input::placeholder { color: rgba(240,234,224,.35); }
.calc-mail-row .btn { padding: .95rem 1.6rem; white-space: nowrap; border-color: var(--gold); color: var(--gold); }
.calc-mail-row .btn:hover { background: var(--gold); color: var(--stone); }
.calc-consent { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; font-size: .72rem; line-height: 1.6; color: rgba(240,234,224,.62); }
.calc-consent input { margin-top: .25em; accent-color: var(--gold); flex: 0 0 auto; }
.calc-consent a { color: var(--gold); }
.calc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.calc-mail-status { font-size: .78rem; margin-top: .9rem; min-height: 1.2em; color: var(--gold-lt); line-height: 1.6; }
.calc-mail-status a { color: var(--gold); text-decoration: underline; }
.calc-print-btn { display: block; margin-top: 1.3rem; background: none; border: 0; padding: 0; font: inherit; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(240,234,224,.55); cursor: none; transition: color .3s; }
.calc-print-btn:hover { color: var(--linen); }
.calc-print-head, .calc-print-inputs { display: none; }
@media (max-width: 560px) { .calc-mail-row { flex-direction: column; } }

/* ── Comparison table ── */
.compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.compare .col { padding: 2.5rem 2rem; border: 1px solid rgba(191,160,106,.12); }
.compare .col.highlight { border-color: var(--gold); background: rgba(191,160,106,.05); }
.compare h4 { font-size: 1.2rem; font-weight: 400; margin-bottom: 1.5rem; }
.compare ul { list-style: none; }
.compare li { font-size: .82rem; padding: .6rem 0; border-bottom: 1px solid rgba(191,160,106,.1); color: var(--fog); display: flex; gap: .7rem; }
.compare li::before { content: '—'; color: rgba(191,160,106,.5); flex-shrink: 0; }
.compare .highlight li { color: var(--linen); }
.compare .highlight li::before { content: '✓'; color: var(--gold); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 3rem 0; }
  .steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  body { cursor: auto; }
  #cursor-dot, #cursor-plane { display: none; }
  .btn, .faq-btn, #cookie-banner button, .calc-print-btn { cursor: pointer; }
  :root { --section-y: 5rem; }
  .nav-center { display: none; }
  .nav-burger { display: block; }
  nav.site-nav.menu-open .nav-center {
    display: flex; flex-direction: column; position: fixed; inset: 0; background: var(--stone);
    padding: 6rem var(--pad-x); gap: 2rem; z-index: -1;
  }
  nav.site-nav.menu-open .nav-center a { font-size: 1rem; }
  nav.site-nav.menu-open .nav-menu-cta { display: block; margin-top: .5rem; }
  nav.site-nav.menu-open .nav-menu-cta a { color: var(--gold); }
  nav.site-nav.menu-open .nav-dropdown { display: block; position: static; padding: .5rem 0 0 1rem; }
  nav.site-nav.menu-open .nav-dropdown-inner { background: none; border: none; padding: 0; }
  .grid-2, .grid-3, .grid-4, .team-grid, .article-grid, .compare, .calc { grid-template-columns: 1fr; }
  .split, .split.reverse, .section-head { grid-template-columns: 1fr; gap: 2rem; }
  .geo-split { grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
  .stats { grid-template-columns: 1fr; }
  .stats .stat-item { border-right: none; border-bottom: 1px solid rgba(191,160,106,.15); }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .calc-results { position: static; }
  .page-hero { padding-top: 8rem; }
  .tour-block iframe { height: 320px; }
}