/* =========================================================================
   Poolfunnel Demo — "Flight" · bespoke, kein Framework, Anti-AI-Slop.

   Gestalt-Disziplin:
     · Der Flug traegt die Farbe. Das UI bleibt near-monochrom + EIN warmer Akzent.
     · KEIN Tuerkis-Button-Reflex — Teal ist nur das Wasser im Bild.
     · Weich statt kantig: Manrope (offene, gerundete Formen), grosse Radien,
       gestapelte Sheets mit ueberlappender Rundung statt harter Blockkanten.
     · Bewegung cinematisch und sparsam, nie zappelig. reduced-motion-sicher.
   ========================================================================= */

/* ---- Fonts (self-hosted, WOFF2) ---------------------------------------- */
/* Schrift: MANROPE, self-hosted, eine variable Datei fuer alles.
   Tim, 08.08.2026: "ich möchte, dass die Schrift auch Manrope auf der Seite
   ist, also allgemein auch auf der Demo." Dieselbe Schrift traegt die
   Agentur-Seite. Manrope hat KEINEN echten Italic — Kursives rendert als
   synthetische Schraeglage, deshalb wird es hier nicht eingesetzt.
   Display und Fliesstext trennen sich nur ueber Gewicht und Laufweite. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --ink:        #06161a;
  --ink-2:      #0a1f25;
  --deep:       #0d2a31;
  --deep-2:     #133840;

  --bone:       #f3ede3;
  --bone-2:     #e9e0d1;
  --paper:      #fcfaf5;

  --text:       #16272c;
  --text-soft:  #4d5d5e;   /* AA auch auf der getoenten bone-2-Flaeche */

  --bronze:     #7e5b1d;   /* AA auf bone (5.30) UND auf bone-2 (4.72) */
  --bronze-2:   #8d6834;   /* helles Ende des Button-Verlaufs — paper darauf 4.84 */
  --sand:       #e4cba6;   /* Akzent auf dunkel */
  --sand-soft:  #f0dcbd;
  --teal:       #2f9c94;   /* NUR Wasser/Bild, nie ein Button */

  --r1: 16px;
  --r2: 26px;
  --r3: clamp(28px, 4.6vw, 52px);
  --pill: 999px;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --bay:    clamp(4.5rem, 11vh, 9rem);

  /* fluide Typo-Skala */
  --t-xs:  clamp(.74rem, .68rem + .18vw, .82rem);
  --t-sm:  clamp(.88rem, .84rem + .2vw,  .97rem);
  --t-base:clamp(1rem, .95rem + .28vw,   1.14rem);
  --t-lg:  clamp(1.14rem, 1.03rem + .5vw, 1.4rem);
  --t-h3:  clamp(1.28rem, 1.1rem + .8vw,  1.72rem);
  --t-h2:  clamp(2rem, 1.42rem + 2.6vw,  3.5rem);

  --ease: cubic-bezier(.22, .61, .27, 1);
  --sh-1: 0 1px 2px rgba(6,22,26,.05), 0 8px 24px -12px rgba(6,22,26,.14);
  --sh-2: 0 2px 6px rgba(6,22,26,.06), 0 26px 60px -28px rgba(6,22,26,.32);
  --sh-3: 0 40px 90px -40px rgba(6,22,26,.5);
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Scroll-Anchoring aus: Die Seite scrubbt den Flug an window.scrollY. Laedt unten
   noch etwas nach und der Browser korrigiert die Scroll-Position, um die Ansicht zu
   halten, springt sonst die Scrub-Position mitten im Flug. Fuer eine scroll-gescrubbte
   Seite ist Anchoring nie erwuenscht. */
html { overflow-anchor: none; }
* { overflow-anchor: none; }
html, body {
  margin: 0; padding: 0;
  background: var(--ink);
  color: var(--text);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 4px;
}
.world :focus-visible, .area :focus-visible, .foot :focus-visible,
.dock :focus-visible, .work :focus-visible { outline-color: var(--sand); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--bone); color: var(--text);
  padding: .8rem 1.3rem; border-radius: 0 0 var(--r1) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* Weiche Serifen-Displayschrift — die SOFT-Achse nimmt die Kanten raus. */
.h2, .fstep__q, .step h3, .quote p, .fdone h3, .nojs h1 {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 750; letter-spacing: -.028em;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 100;
  font-weight: 400;
  letter-spacing: -.012em;
}

/* =========================================================================
   scroll-world — Theming der Engine (ihre Regeln liegen in @layer sw,
   diese hier gewinnen deshalb ohne Spezifitaets-Tricks).
   ========================================================================= */
.world { position: relative; }
.sw-root {
  --sw-bg: var(--ink);
  --sw-ink: var(--bone);
  --sw-ink-soft: rgba(243,237,227,.62);
  --sw-accent: var(--sand);
  --sw-font-display: Manrope, ui-sans-serif, system-ui, sans-serif;
  --sw-font-body: Manrope, ui-sans-serif, system-ui, sans-serif;
}
/* Der Film traegt die Farbe — der dekorative Himmelsverlauf der Engine muss weg. */
.sw-sky__grad, .sw-sky__glow { display: none; }
.sw-sky { background: var(--ink); }

/* Der globale img-Reset (height:auto) schlaegt die height:100% der Engine, weil
   deren Regeln in @layer sw liegen. Das Still muss den Viewport fuellen. */
.sw-scene__still { width: 100%; height: 100%; object-fit: cover; }

/* Die Engine schreibt in read() ein eigenes transform auf .sw-copy und loescht
   damit ihre eigene translateY(-50%)-Zentrierung. translate ist eine getrennte
   Property und komponiert sauber daneben. */
.sw-copy { translate: 0 -50%; }

.sw-copy__title {
  font-size: clamp(1.9rem, 3.5vw, 3.05rem);
  line-height: 1.06;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 100;
  font-weight: 400; letter-spacing: -.015em;
  text-shadow: 0 2px 40px rgba(6,22,26,.75);
}
.sw-copy__title em { font-style: normal; color: var(--sand); }
.sw-copy__eyebrow {
  font-family: Manrope, sans-serif; font-weight: 600;
  font-size: var(--t-xs); letter-spacing: .2em; color: var(--sand);
  /* Als einzige Zeile der Copy hatte die Kopfzeile keinen Schatten. Ueber dem
     hellen ersten Frame der Anfahrt lag sie damit bei 4.25:1 statt 4.5
     (a11y-gate, 09.08.2026) — knapp, aber knapp ist durchgefallen. Der
     Schatten hebt sie, ohne Farbe oder Wortlaut anzufassen. */
  text-shadow: 0 1px 22px rgba(6,22,26,.92), 0 0 3px rgba(6,22,26,.55);
}
.sw-copy__num { color: rgba(243,237,227,.45); }
.sw-copy__body { text-shadow: 0 1px 26px rgba(6,22,26,.8); }
.sw-copy__tags li {
  border: 1px solid rgba(243,237,227,.22);
  background: rgba(6,22,26,.28);
  backdrop-filter: blur(8px);
  color: rgba(243,237,227,.9);
  border-radius: var(--pill); padding: 7px 15px; font-size: var(--t-xs);
}
/* Der Copy-Scrim. Ein linearer Verlauf endet an der Boxkante und hinterlaesst
   eine sichtbare Linie — deshalb radial: der laeuft randlos aus. */
.sw-copylayer::before {
  width: min(82vw, 1180px);
  background: radial-gradient(115% 92% at 0% 56%,
    rgba(6,22,26,.93) 0%, rgba(6,22,26,.76) 26%, rgba(6,22,26,.44) 48%,
    rgba(6,22,26,.16) 68%, rgba(6,22,26,0) 84%);
}
/* Bodenvignette: traegt den Scroll-Hinweis und faengt die Copy mobil ab. */
.sw-stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%;
  z-index: 130; pointer-events: none;
  background: linear-gradient(0deg, rgba(6,22,26,.58) 0%, rgba(6,22,26,.2) 44%, rgba(6,22,26,0) 100%);
}

.sw-topbar {
  padding: clamp(14px, 2.2vw, 24px) var(--gutter);
  transition: background .45s var(--ease), backdrop-filter .45s var(--ease), padding .45s var(--ease);
}
body.is-scrolled .sw-topbar {
  background: rgba(6,22,26,.62);
  backdrop-filter: blur(16px) saturate(1.2);
  padding-top: clamp(9px, 1.4vw, 14px); padding-bottom: clamp(9px, 1.4vw, 14px);
}
.sw-brand__mark {
  width: 30px; height: 30px; border-radius: 11px;
  /* Beide Enden hell: das dunkle Bronze-Ende trug den Ink-Text nur mit 3.66. */
  background: linear-gradient(150deg, var(--sand-soft), var(--sand));
  box-shadow: 0 6px 20px rgba(228,203,166,.28);
  display: grid; place-items: center;
}
.sw-brand__name {
  font-family: Manrope, sans-serif; font-weight: 780; letter-spacing: -.03em;
  font-weight: 500; font-size: 1.06rem; letter-spacing: -.01em; color: var(--bone);
}
.sw-nav {
  background: rgba(243,237,227,.07);
  border: 1px solid rgba(243,237,227,.13);
  backdrop-filter: blur(14px);
}
.sw-nav__item { color: rgba(243,237,227,.66); font-size: var(--t-xs); letter-spacing: .01em; }
.sw-nav__item:hover { color: var(--bone); background: rgba(243,237,227,.08); }
.sw-nav__item.is-active { color: var(--ink); background: var(--sand); }
.sw-topcta {
  background: var(--bone); color: var(--ink);
  font-size: var(--t-sm); padding: 11px 22px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sw-topcta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(243,237,227,.5); }

.sw-btn { transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; }
.sw-btn--primary { background: var(--bone); color: var(--ink); }
.sw-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -14px rgba(243,237,227,.55); }
.sw-btn--ghost { color: var(--bone); border-color: rgba(243,237,227,.32); }
.sw-btn--ghost:hover { background: rgba(243,237,227,.09); transform: translateY(-2px); }

.sw-scrollbar { background: rgba(243,237,227,.1); }
.sw-route__label { background: rgba(6,22,26,.8); color: var(--bone); border-color: rgba(243,237,227,.18); }
.sw-hint { color: rgba(243,237,227,.55); }
.sw-hint i { border-color: rgba(243,237,227,.34); }

/* Am Ende der Spur haelt die letzte Szene stehen, statt ins Schwarze zu faden,
   waehrend die CTA-Copy noch sichtbar ist (siehe holdLastScene in app.js).
   !important, weil die Engine ihre Deckkraft inline schreibt. */
body.flight-tail .sw-scene--last { opacity: 1 !important; z-index: 120 !important; }

/* Nach dem Flug verschwindet die Flug-Chrome — sie gehoert nicht ueber den Rest. */
.sw-route, .sw-scrollbar, .sw-copylayer, .sw-hint {
  transition: opacity .5s var(--ease);
}
body.past-flight .sw-route,
body.past-flight .sw-scrollbar,
body.past-flight .sw-hint { opacity: 0; pointer-events: none; }
/* Die Deckkraft der Copy-Ebene faehrt holdLastScene() in app.js scrollgenau —
   eine Klassen-Umschaltung waere hier zu grob und wuerde die Headline in die
   heranfahrende Sheet-Kante laufen lassen. */
body.past-flight .sw-copylayer { pointer-events: none; }

/* =========================================================================
   Seiten-Layout — gestapelte Sheets
   ========================================================================= */
#main { position: relative; z-index: 25; }

.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - 2 * var(--gutter)); }

.sheet {
  position: relative;
  padding: var(--bay) 0;
  border-radius: var(--r3) var(--r3) 0 0;
  margin-top: calc(-1 * var(--r3));
}
.sheet:first-of-type { margin-top: 0; }

.work    { background: var(--ink-2); color: var(--bone); padding-top: calc(var(--bay) + 1rem); }
.process { background: var(--bone); color: var(--text); }
.funnel  { background: var(--bone); color: var(--text); margin-top: 0; border-radius: 0; padding-top: 0; }
.proof   { background: var(--bone-2); color: var(--text); }
.area    { background: var(--deep); color: var(--bone); }

/* weiche Uebergaenge statt Kanten */
.work::before, .process::before, .proof::before, .area::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 45%;
  border-radius: inherit; pointer-events: none;
}
.work::before   { background: radial-gradient(120% 100% at 50% 0%, rgba(228,203,166,.07), transparent 70%); }
.process::before{ background: radial-gradient(120% 100% at 50% 0%, rgba(154,111,46,.07), transparent 70%); }
.area::before   { background: radial-gradient(120% 100% at 50% 0%, rgba(47,156,148,.1), transparent 70%); }

/* ---- Lede -------------------------------------------------------------- */
.lede { max-width: 46ch; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.lede--center { margin-inline: auto; text-align: center; max-width: 40ch; }
/* Zentriert braucht die Zeile weniger Groesse — sonst kippt sie ins Feierliche. */
.lede--center .h2 { font-size: clamp(1.8rem, 1.35rem + 1.9vw, 2.65rem); }
.lede--center .lede__p { font-size: var(--t-base); max-width: 52ch; margin-inline: auto; }
.eyebrow {
  display: block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bronze);
  margin-bottom: 1rem;
}
.work .eyebrow, .area .eyebrow { color: var(--sand); }
.h2 { font-size: var(--t-h2); line-height: 1.04; margin: 0; }
.h2 em { font-style: normal; color: var(--bronze); }
.work .h2 em, .area .h2 em { color: var(--sand); }
.lede__p { margin: 1.25rem 0 0; color: var(--text-soft); font-size: var(--t-lg); line-height: 1.55; }
.work .lede__p, .area .lede__p { color: rgba(243,237,227,.68); }

/* ---- Mosaik (die echten Projektfotos des Leads) ------------------------ */
.mosaic { display: grid; gap: clamp(.7rem, 1.5vw, 1.15rem); grid-template-columns: repeat(2, 1fr); }
.tile {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r2); background: var(--deep);
  box-shadow: var(--sh-3);
}
.tile img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
  filter: saturate(.96);
}
.tile:hover img { transform: scale(1.045); filter: saturate(1.04); }
.tile figcaption {
  position: absolute; inset: auto 0 0 0;
  /* Oben viel Luft, damit der Verlauf ausblenden kann statt an einer Kante zu
     enden. Gemessen (a11y-gate, 08.08.2026): mit dem alten Verlauf stand die
     Bildunterschrift auf den hellen Fotos bei 2.55:1 — der Titel sitzt im
     oberen Drittel des Kastens, und dort war die Deckung erst bei ~.5.
     Der Text braucht rund .80, damit helle Wasser- und Himmelsflaechen
     darunter noch 4.5:1 tragen. Kein Kasten, nur ein hoeher gezogener Verlauf. */
  padding: clamp(3rem, 7vw, 4.4rem) clamp(1rem, 2.4vw, 1.7rem) clamp(1rem, 2.4vw, 1.7rem);
  display: flex; flex-direction: column; gap: .18rem;
  background: linear-gradient(0deg,
    rgba(6,22,26,.94) 0%, rgba(6,22,26,.89) 40%, rgba(6,22,26,.64) 64%,
    rgba(6,22,26,.26) 84%, transparent 100%);
  color: var(--bone);
}
.tile figcaption strong { font-size: var(--t-base); font-weight: 600; letter-spacing: -.005em; }
.tile figcaption span { font-size: var(--t-xs); color: rgba(243,237,227,.66); letter-spacing: .04em; }

@media (min-width: 760px) {
  .mosaic { grid-template-columns: repeat(6, 1fr); }
  .tile { grid-column: span 2; }
  .tile--wide { grid-column: span 6; }
  .tile--wide img { aspect-ratio: 21/9; }
  .tile--half { grid-column: span 3; }
  .tile--half img { aspect-ratio: 2/1; }
}

/* ---- Prozess ----------------------------------------------------------- */
/* Zwei mal zwei statt vier nebeneinander: bei vier Spalten bleiben ~270 px
   uebrig und der Text bricht nach drei Woertern. */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 2.2vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) { .steps { grid-template-columns: repeat(2, 1fr); } }
.step {
  position: relative;
  background: var(--paper);
  border-radius: var(--r2);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--sh-1);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.step__n {
  display: inline-block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; color: var(--bronze); margin-bottom: 1.1rem;
}
.step h3 { font-size: var(--t-h3); line-height: 1.15; margin: 0 0 .6rem; }
.step p { margin: 0; color: var(--text-soft); font-size: var(--t-sm); line-height: 1.62; }

/* ---- Funnel ------------------------------------------------------------ */
.fcard {
  position: relative;
  background: var(--paper);
  border-radius: var(--r3);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
/* Eingerueckt statt buendig: eine 3-px-Leiste an der Kante wird vom grossen
   Karten-Radius abgeschnitten und sieht aus wie ein Rendering-Fehler. */
.fcard__rail {
  height: 4px; border-radius: var(--pill); overflow: hidden;
  margin: clamp(1.6rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3rem) 0;
  background: rgba(22,39,44,.1);
}
.fcard__rail span {
  display: block; height: 100%; width: 33.33%;
  background: linear-gradient(90deg, var(--bronze), var(--sand));
  border-radius: var(--pill);
  transition: width .6s var(--ease);
}
.fform { padding: clamp(1.3rem, 3vw, 2rem) clamp(1.6rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3rem); margin: 0; }
.fform__count {
  margin: 0 0 1.6rem; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; color: var(--text-soft);
}
.fform__count i { font-style: normal; opacity: .4; margin: 0 .25rem; }
.fform__count span { color: var(--bronze); }

.fstep { border: 0; margin: 0; padding: 0; min-width: 0; }
.fstep[hidden] { display: none; }
.fstep.is-anim { animation: fslide .5s var(--ease) both; }
@keyframes fslide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fstep__q { font-size: var(--t-h3); line-height: 1.2; padding: 0; margin: 0 0 1.5rem; }

.picks { display: grid; gap: .7rem; }
.picks--row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick__body {
  display: flex; flex-direction: column; gap: .18rem;
  border-radius: var(--r1);
  padding: clamp(.9rem, 2vw, 1.15rem) 1.2rem;
  background: rgba(22,39,44,.035);
  box-shadow: inset 0 0 0 1.5px rgba(22,39,44,.09);
  transition: box-shadow .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.pick:hover .pick__body { background: rgba(22,39,44,.06); transform: translateY(-2px); }
.pick input:checked + .pick__body {
  background: rgba(154,111,46,.09);
  box-shadow: inset 0 0 0 2px var(--bronze), 0 10px 28px -16px rgba(154,111,46,.7);
}
.pick input:focus-visible + .pick__body { outline: 2px solid var(--bronze); outline-offset: 3px; }
.pick__body strong { font-weight: 600; font-size: var(--t-sm); }
.pick__body em { font-style: normal; font-size: var(--t-xs); color: var(--text-soft); }
.pick--sm .pick__body { padding: .8rem 1rem; text-align: center; align-items: center; }

.field { display: block; margin-bottom: 1.1rem; }
.field__label {
  display: block; font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft);
  margin-bottom: .5rem;
}
.field__label--group { margin-top: 1.6rem; }
.field input {
  width: 100%; border: 0; border-radius: var(--r1);
  padding: .95rem 1.15rem;
  background: rgba(22,39,44,.045);
  box-shadow: inset 0 0 0 1.5px rgba(22,39,44,.1);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.field input::placeholder { color: rgba(91,107,108,.6); }
.field input:focus { outline: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--bronze); }
.field-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fine { font-size: var(--t-xs); color: var(--text-soft); margin: 1.2rem 0 0; }

.fform__nav { display: flex; gap: .7rem; align-items: center; margin-top: 2rem; }
.fform__err { margin: 1rem 0 0; font-size: var(--t-sm); color: #a3401f; }

.fdone { padding: clamp(2rem, 5vw, 3.4rem); text-align: center; }
.fdone__mark {
  display: block; width: 54px; height: 54px; margin: 0 auto 1.4rem;
  border-radius: 50%; background: linear-gradient(150deg, var(--bronze-2), var(--bronze));
  position: relative; box-shadow: 0 14px 34px -14px rgba(154,111,46,.8);
}
.fdone__mark::after {
  content: ""; position: absolute; left: 19px; top: 15px;
  width: 12px; height: 22px; border: solid var(--paper);
  border-width: 0 2.5px 2.5px 0; transform: rotate(43deg);
}
.fdone h3 { font-size: var(--t-h3); margin: 0 0 .7rem; }
.fdone p { color: var(--text-soft); margin: 0 auto 1.8rem; max-width: 46ch; font-size: var(--t-sm); }
.fdone__cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; text-decoration: none; cursor: pointer;
  border: 0; border-radius: var(--pill);
  padding: .95rem 1.7rem; font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .005em; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.btn--primary {
  background: linear-gradient(150deg, var(--bronze-2), var(--bronze));
  color: var(--paper);
  box-shadow: 0 12px 30px -14px rgba(154,111,46,.85);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(154,111,46,.95); }
.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(22,39,44,.18); }
.btn--ghost:hover { background: rgba(22,39,44,.05); transform: translateY(-2px); }
.btn[hidden] { display: none; }

/* ---- Proof ------------------------------------------------------------- */
.quotes { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.quote {
  margin: 0; background: var(--paper); border-radius: var(--r2);
  padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.quote p { margin: 0; font-size: var(--t-lg); line-height: 1.45; }
.quote cite { font-style: normal; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze); }
.quotes__note { margin: 1.4rem 0 0; font-size: var(--t-xs); color: var(--text-soft); }

.creds {
  list-style: none; margin: clamp(2.5rem, 6vh, 4rem) 0 0; padding: 0;
  display: grid; gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.creds li { display: flex; flex-direction: column; gap: .3rem; padding-top: 1.2rem; position: relative; }
.creds li::before {
  content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 2px;
  border-radius: var(--pill); background: var(--bronze); opacity: .55;
}
.creds strong { font-size: var(--t-sm); font-weight: 600; }
.creds span { font-size: var(--t-xs); color: var(--text-soft); line-height: 1.5; }

/* ---- Area -------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.chip {
  border-radius: var(--pill); padding: .5rem 1.15rem; font-size: var(--t-xs);
  color: rgba(243,237,227,.88);
  background: rgba(243,237,227,.06);
  box-shadow: inset 0 0 0 1px rgba(243,237,227,.15);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.chip:hover { background: rgba(243,237,227,.12); transform: translateY(-2px); }

/* ---- Footer ------------------------------------------------------------ */
.foot { background: var(--ink); color: rgba(243,237,227,.7); padding: var(--bay) 0 clamp(5rem, 8vh, 3rem); position: relative; z-index: 25; }
.foot__in { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .foot__in { grid-template-columns: 1fr 1.4fr; } }
.foot__brand { display: flex; gap: 1rem; align-items: center; }
.mark {
  width: 46px; height: 46px; flex: none; border-radius: 15px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--sand-soft), var(--sand));
  color: var(--ink); font-weight: 700; font-size: .85rem; letter-spacing: .04em;
}
.foot__brand strong { display: block; color: var(--bone); font-size: var(--t-base); font-weight: 600; }
.foot__brand span { font-size: var(--t-xs); }
.foot__cols { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.foot__cols > div { display: flex; flex-direction: column; gap: .35rem; font-size: var(--t-sm); }
.foot__h { font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sand); margin-bottom: .45rem; }
.foot__cols a { text-decoration: none; transition: color .3s; }
.foot__cols a:hover { color: var(--bone); }
.foot__legal {
  margin-top: clamp(2.5rem, 6vh, 4rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(243,237,227,.1);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--t-xs);
}
.foot__legal a { text-decoration: none; }
.foot__legal a:hover { color: var(--bone); }

/* ---- Mobile Dock ------------------------------------------------------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: .6rem; padding: .7rem var(--gutter);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(6,22,26,.82); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 -1px 0 rgba(243,237,227,.12);
  transform: translateY(110%); transition: transform .5s var(--ease);
}
.dock a { text-align: center; text-decoration: none; border-radius: var(--pill); padding: .85rem 1rem; font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
/* Die Nummer bekommt genau ihre Breite, der Rest gehoert dem CTA — sonst
   bricht "Call (737) 349-2581" auf schmalen Geraeten um. */
.dock__call { flex: 0 1 auto; font-size: var(--t-xs); color: var(--bone); box-shadow: inset 0 0 0 1.5px rgba(243,237,227,.28); }
.dock__cta { flex: 1 1 auto; background: linear-gradient(150deg, var(--sand-soft), var(--sand)); color: var(--ink); }
/* ---------------------------------------------------------------------------
   Mobil-Feinschliff (09.08.2026, gemessen bei 393 px)
   Zwei Befunde, beide echt:
   (a) --t-xs faellt am unteren Ende der clamp() auf 12,1 px — das tragen
       Kopfzeilen und Chips auf einem Handy nicht mehr. Untergrenze deshalb
       auf 13,5 px angehoben; auf dem Desktop aendert sich nichts, weil dort
       ohnehin der obere Wert greift.
   (b) Mehrere Tap-Ziele lagen unter 44 px Hoehe (Top-CTA 37, Fusszeilen-
       Links 23, "Back to the top" 19). Getroffen wird mit dem Daumen, nicht
       mit der Maus.
--------------------------------------------------------------------------- */
@media (max-width: 860px) {
  :root { --t-xs: clamp(.845rem, .80rem + .18vw, .88rem); }

  .sw-topcta { min-height: 44px; display: inline-flex; align-items: center; }
  .foot__cols a,
  .foot__legal a { min-height: 44px; display: inline-flex; align-items: center; }
  .dock__call, .dock__cta { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .sw-brand { min-height: 44px; }
}

@media (max-width: 860px) {
  .dock { display: flex; }
  /* Marke und CTA teilen sich oben eine schmale Zeile. */
  .sw-topcta { font-size: var(--t-xs); padding: 9px 15px; }
  .sw-brand__name { font-size: .95rem; }
  body.past-flight .dock { transform: none; }
  body { padding-bottom: 0; }
  .foot { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* ---- noscript ---------------------------------------------------------- */
.nojs { padding: 6rem var(--gutter); color: var(--bone); text-align: center; }
.nojs h1 { font-size: var(--t-h2); margin: 0 0 1rem; }
.nojs p { color: rgba(243,237,227,.7); margin: 0 0 2rem; }

/* ---- Reveals ----------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: var(--d, 0ms);
}

/* ---- Film-Korn: nimmt der Flaeche das Digitale ------------------------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .035; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* Mobil ankert die Engine die Copy unten (top:auto) — dort darf die
   Zentrierungs-Verschiebung nicht mehr greifen. */
@media (max-width: 860px) {
  .sw-copy { translate: 0 0; }
  .sw-copy__title { font-size: clamp(1.85rem, 7.2vw, 2.5rem); }
  /* Mobil ankert die Engine die Copy UNTEN und legt einen Verlauf von unten
     nach oben. Die Kopfzeile sitzt am oberen Rand des Textblocks, also im
     duennsten Teil davon — gemessen 2.24:1 (a11y-gate mobil, 09.08.2026).
     Der Verlauf wird deshalb hoeher gezogen und traegt bis ueber die
     Kopfzeile hinaus. Kein Kasten: er laeuft nach oben aus. */
  .sw-copylayer::before {
    width: 100%; height: 78%; top: auto; bottom: 0;
    background: linear-gradient(0deg,
      rgba(6,22,26,.95) 0%, rgba(6,22,26,.90) 34%, rgba(6,22,26,.78) 54%,
      rgba(6,22,26,.46) 72%, rgba(6,22,26,.14) 88%, rgba(6,22,26,0) 100%);
  }
  /* Die Punkt-Leiste der Engine liegt am Handy mitten im Bild — auf dem
     schmalen Viewport ist der Fortschrittsbalken oben Navigation genug. */
  .sw-route { display: none; }
  /* Hochformat zeigt von einer 16:9-Szene nur einen schmalen Mittelstreifen —
     die Hoehe passt exakt, beschnitten wird ausschliesslich horizontal. Deshalb
     hilft object-position hier nichts; sauber waere die native 9:16-Kette
     (scroll-world §6b). Solange die fehlt, faengt ein hoeherer Scrim die Copy ab.
     Die Szenen sind mittig komponiert, der Streifen traegt also das Motiv. */
  .sw-stage::after { height: 46%; }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .tile:hover img { transform: none; }
  .dock { transform: none; }
}