/* ════════════════════════════════════════════════════════════
   SideQuest — Landing Page, Richtung „Alpenglow"
   Stand 29.08.2026. Werte von Josua im Regler-Panel gefunden.
   Kein Korn in dieser Fassung.
   ════════════════════════════════════════════════════════════ */

:root {
  /* Bild */
  --img-sat: 1.13;
  --img-con: 1.23;
  --img-bright: .81;
  /* Highlight-Dämpfung */
  --damp: .55;
  /* Verlauf nach unten */
  --wash-start: 50%;
  --wash-end: 92%;
  --wash-peak: .82;
  /* Glas */
  --glass-blur: 24px;
  --glass-sat: 2.3;
  --glass-bright: .68;
  --glass-tint: .34;
  --glass-edge: 0;
  /* Palette */
  --kopf: 78px;          /* Hoehe der fixierten Kopfzeile */
  --reel-bar: 95px;      /* Bar belegt 82 (38 Abstand + 44 Hoehe), 13 haengt das
                            Badge unter dem Geraet. Der Rest kommt aus
                            --reel-luft, damit oben und unten gleich viel
                            Abstand steht. */
  --reel-luft: 30px;     /* Mindestabstand des Geraets zu Sektionskopf und Bar */
  --grund: #F4F5F4;
  --tinte: #14181A;
  --schiefer: #3A3F42;
  --alpenglow: #A5655A;   /* nur noch Hero-Foto-Verwandtschaft, keine UI-Akzente mehr */
  --live: #3E7C6B;        /* einziger Farbakzent im Interface: „läuft gerade" */
  --gletscher: #8C9BA5;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-padding-top: calc(var(--kopf) + 10px); }
body { background: var(--grund); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }

.hero { position: relative; width: 100%; min-height: 100vh; overflow: hidden; }

/* ══ Bild ══ */
/* assets/img/hero.jpg — Unsplash photo-1444090542259-0af8fa96557e,
   Unsplash License (kommerziell frei, keine Attributionspflicht).
   Seit SIDE-48 lokal statt per Hotlink — kein Request an images.unsplash.com. */
.shot {
  position: absolute; inset: 0;
  background-image: url("assets/img/hero.jpg");
  background-size: cover; background-position: center;
  filter: saturate(var(--img-sat)) contrast(var(--img-con)) brightness(var(--img-bright));
}

/* Highlight-Dämpfer — multiply zieht nur die Lichter runter, nicht das ganze Bild. */
.damp {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: multiply; opacity: var(--damp);
  background:
    radial-gradient(46% 40% at 82% 12%, #C98A4E 0%, #E2AE79 34%, rgba(255,255,255,0) 72%),
    radial-gradient(38% 30% at 64% 34%, #D9A567 0%, rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(214,168,120,.5) 0%, rgba(255,255,255,0) 44%);
}

/* ══ Naht nach unten ══
   Der Verlauf ging vorher direkt ins kühle Weiß und riss das Bild ab der Headline
   weg. Zwei Änderungen:
   1) Er läuft durch WARME Zwischentöne statt sofort zu entsättigen — das Goldene
      reicht dadurch bis unter den Signup.
   2) Er macht später und flacher zu, sodass die Bergkante bis unter das Formular
      schwach lesbar bleibt und erst am Fuß ganz verschwindet.
   Der radiale Aufheller sitzt nur hinter dem Typo-Block und ist weicher als vorher —
   er trägt die Lesbarkeit, ohne einen weißen Fleck zu setzen. */
.wash {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(66% 26% at 50% 72%, rgba(252,247,240,.26) 0%, rgba(252,247,240,0) 80%),
    linear-gradient(180deg,
      rgba(244,245,244,0)   0%,
      rgba(244,245,244,0)   var(--wash-start),
      rgba(250,239,226,.34) 60%,
      rgba(249,242,233,.62) 66%,
      rgba(248,243,236,.82) 72%,
      rgba(246,245,241,.93) 79%,
      rgba(245,245,243,.98) 86%,
      var(--grund)          var(--wash-end));
}

/* ══ Navigation ══ */
.nav {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0;
  /* Gleiches Raster wie Reel, Footer und Unterseiten. */
  max-width: 1056px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 48px; font-family: Geist, system-ui, sans-serif; color: var(--tinte);
  transition: color .3s ease;
}
.nav > * { position: relative; z-index: 2; }
.nav .mark { color: inherit; text-decoration: none; }

/* Das Glasband laeuft randlos ueber die volle Breite, der Inhalt bleibt im Raster.
   Unten steht KEINE Kante, sondern eine Maske — die Seite laeuft sichtbar darunter
   weg, statt an einer Linie abgeschnitten zu werden. Erst ab dem ersten Scroll da:
   ueber dem Hero soll nichts zwischen Foto und Schrift liegen. */
.nav::before {
  content: ''; position: absolute; top: 0; bottom: -20px;
  left: 50%; transform: translateX(-50%); width: 100vw;
  pointer-events: none; opacity: 0; transition: opacity .3s ease, background .3s ease;
  background: linear-gradient(to bottom, rgba(255,255,255,.46), rgba(255,255,255,.10));
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  -webkit-mask: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.nav[data-glas="true"]::before { opacity: 1; }

/* Ueber der schwarzen Sektion kippt der Kopf auf hell, sonst waere er unsichtbar. */
.nav[data-invers="true"] { color: var(--grund); }
.nav[data-invers="true"]::before {
  background: linear-gradient(to bottom, rgba(10,12,13,.55), rgba(10,12,13,.12));
}
.mark { font-family: 'Instrument Serif', serif; font-size: 22px; font-weight: 400; letter-spacing: .005em; }
.navitem {
  position: relative; display: flex; align-items: center; gap: 5px;
  font-size: 14.5px; color: inherit; cursor: pointer; padding: 8px 0;
}
/* Gefuellt, nicht nur umrandet: ueber dem Foto verschwindet ein reiner Umriss.
   Minimal ist hier die Groesse (34px, enge Laufweite), nicht die Zurueckhaltung. */
.pill {
  display: inline-flex; align-items: center; height: 34px; padding: 0 18px;
  border-radius: 17px; font-size: 13.5px; font-weight: 500; cursor: pointer;
  text-decoration: none;
  background: var(--tinte); color: var(--grund);
  border: 1px solid var(--tinte);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pill:hover { background: #2C3336; border-color: #2C3336; }
/* Ueber Schwarz kehrt sich die Fuellung um, damit der Knopf gleich stark bleibt. */
.nav[data-invers="true"] .pill {
  background: var(--grund); color: var(--tinte); border-color: var(--grund);
}
.nav[data-invers="true"] .pill:hover { background: #E3E5E3; border-color: #E3E5E3; }

/* ══ Dropdown — Duna-Muster, echtes Glas ══
   Drei Schichten: Brechung (feDisplacementMap) · Streuung (blur/saturate) ·
   Spiegelung (inset-Kanten). */
.drop {
  position: absolute; top: calc(100% + 16px); left: 50%; z-index: 30;
  display: flex; gap: 8px; width: 320px; padding: 10px;
  border-radius: 22px; opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-6px) scale(.985);
  transition: opacity .22s cubic-bezier(.32,.72,0,1), transform .22s cubic-bezier(.32,.72,0,1), visibility .22s;
  background: rgba(255,255,255,var(--glass-tint));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright)) url(#lens);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  border: 1px solid rgba(255,255,255,var(--glass-edge));
  box-shadow:
    0 24px 64px rgba(0,0,0,.20),
    inset 0 1px 1px rgba(255,255,255,.62),
    inset 0 -1px 1px rgba(255,255,255,.24);
  isolation: isolate;
}
.navitem:hover .drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); }
.drop::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  backdrop-filter: url(#lensEdge) blur(1px);
  -webkit-mask: radial-gradient(120% 130% at 50% 50%, transparent 52%, #000 88%);
  mask: radial-gradient(120% 130% at 50% 50%, transparent 52%, #000 88%);
}
.drop::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(142deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 46%);
}
.drop > * { position: relative; z-index: 2; }

.drop-list { display: flex; flex-direction: column; flex: 1; }
.drop-list a {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 13px; cursor: pointer;
  /* Die Eintraege sind seit 30.08. echte Links (Sprung ins Feature-Reel);
     ohne diese Zeile faerbt der Browser sie blau und unterstreicht sie. */
  color: inherit; text-decoration: none;
  transition: background .16s ease, transform .16s cubic-bezier(.32,.72,0,1);
}
.drop-list a:hover {
  background: rgba(255,255,255,.20);
  transform: translateX(2px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 1px rgba(255,255,255,.18);
}
.nav[data-invers="true"] .drop { background: rgba(18,21,23,.46); }
.nav[data-invers="true"] .drop-list a:hover { background: rgba(255,255,255,.12); }
.drop-list b { font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; }
.drop-list span { font-size: 12.5px; opacity: .62; }

/* ══ Hero-Inhalt ══ */
.hero-body {
  position: relative; z-index: 10;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 58vh 0 90px; gap: 20px;
}
.eyebrow {
  display: inline-flex; align-items: center; height: 30px; padding: 0 15px;
  border-radius: 15px; color: #2E3B42;
  font-family: 'Geist Mono', monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255,255,255,.42); backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7);
}
h1 {
  margin: 0; font-family: 'Instrument Serif', serif;
  font-size: 96px; font-weight: 400; line-height: .94; letter-spacing: -.022em; color: var(--tinte);
}
.sub { margin: 0; font-family: Geist, system-ui, sans-serif; font-size: 19px; line-height: 30px; color: #46525A; }
/* Signup in Glas — dasselbe Material wie Nav-Pill und Dropdown, damit die Seite
   ein Materialsystem hat statt drei verschiedener Oberflächen. Der Button bleibt
   der einzige gefüllte Farbfleck, sonst hätte der CTA keinen Vorrang mehr. */
.cta { display: flex; gap: 9px; margin-top: 12px; }
.cta input {
  width: 290px; height: 52px; padding: 0 17px; border-radius: 13px;
  outline: none; font-size: 15px; color: var(--tinte);
  background: rgba(255,255,255,.34);
  backdrop-filter: blur(16px) saturate(1.6) url(#lens);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.72), 0 4px 18px rgba(90,66,44,.10);
  transition: background .18s, box-shadow .18s;
}
.cta input:focus {
  background: rgba(255,255,255,.48);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.85), 0 6px 22px rgba(90,66,44,.14);
}
.cta input::placeholder { color: #8A8377; }
.cta button {
  height: 52px; padding: 0 26px; border-radius: 13px; border: 0; cursor: pointer;
  background: var(--tinte); color: var(--grund); font-size: 15px; font-weight: 500;
  box-shadow: 0 4px 18px rgba(20,24,26,.22);
  transition: transform .15s;
}
.cta button:hover { transform: translateY(-1px); }
.micro { font-family: Geist, system-ui, sans-serif; font-size: 12.5px; line-height: 1.7; color: #6E7A82; }
.micro b { font-weight: 500; color: var(--schiefer); }

/* Einwilligung (SIDE-53). Bewusst eine Stufe leiser als .micro: Der Satz muss
   lesbar und auffindbar sein — er ist die Rechtsgrundlage —, aber er ist kein
   Verkaufsargument und soll dem Formular nicht die Aufmerksamkeit nehmen.
   Kein Grau unter #6E7A82, sonst leidet der Kontrast (WCAG AA auf hellem Grund). */
.consent {
  margin: 10px 0 0; max-width: 44ch;
  font-family: Geist, system-ui, sans-serif; font-size: 11.5px; line-height: 1.65;
  color: #6E7A82;
}
.consent-links {
  margin: 6px 0 0;
  font-family: Geist, system-ui, sans-serif; font-size: 11.5px; color: #6E7A82;
}
.consent-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.consent-links a:hover { color: var(--tinte); }

/* ══════════════════════════════════════════════════════════════
   Textur — Canvas für Dither, Filmkorn als Bildfilter
   ══════════════════════════════════════════════════════════════ */
/* Canvas liegt ÜBER Foto und Dämpfer, aber UNTER dem Verlauf (.wash, z-index 3),
   damit die Naht nach unten weiter sauber ausblendet. Foto bleibt sichtbar. */
.dither {
  position: absolute; inset: 0; z-index: 2; display: none; pointer-events: none;
  /* Eigener Fade: das Punktfeld verschwindet mit dem Bild, nicht danach. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--dither-fade-start, 44%), rgba(0,0,0,.26) 62%, rgba(0,0,0,.06) 72%, transparent var(--dither-fade-end, 80%));
  mask-image: linear-gradient(180deg, #000 0%, #000 var(--dither-fade-start, 44%), rgba(0,0,0,.26) 62%, rgba(0,0,0,.06) 72%, transparent var(--dither-fade-end, 80%));
}
body[data-textur="korn"] .shot {
  filter: saturate(var(--img-sat)) contrast(var(--img-con)) brightness(var(--img-bright)) url(#filmgrain);
}

/* ══ Regler-Panel ══ */
#panel {
  position: fixed; z-index: 998; top: 18px; right: 18px; width: 288px;
  max-height: calc(100vh - 36px); overflow-y: auto;
  padding: 14px 16px 16px; border-radius: 16px;
  background: rgba(16,16,18,.88); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 16px 50px rgba(0,0,0,.42);
  font-family: 'Geist Mono', ui-monospace, monospace; color: rgba(255,255,255,.85);
}
#panel.hidden { display: none; }
#panel h4 {
  margin: 15px 0 8px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.38); font-weight: 500;
}
#panel h4:first-child { margin-top: 2px; }
#panel .row { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
#panel .row label { flex: 1; font-size: 10.5px; color: rgba(255,255,255,.62); }
#panel .row output { width: 42px; text-align: right; font-size: 10.5px; color: rgba(255,255,255,.95); }
#panel .row input[type=range] {
  width: 104px; height: 3px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.20); border-radius: 2px; cursor: pointer;
}
#panel .row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 6px; background: #fff; cursor: pointer;
}
#panel .seg { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
#panel .seg button {
  flex: 1; min-width: 52px; padding: 6px 4px; border: 0; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.09); color: rgba(255,255,255,.62);
  font-family: inherit; font-size: 10px;
}
#panel .seg button.on { background: #fff; color: #111; }
#panel .toggle {
  width: 56px; padding: 5px; border: 0; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,.09); color: rgba(255,255,255,.62);
  font-family: inherit; font-size: 10px;
}
#panel .toggle.on { background: #fff; color: #111; }
#panel .hint {
  margin: 12px 0 0; font-size: 9.5px; line-height: 15px; color: rgba(255,255,255,.42);
}
#copy {
  width: 100%; margin-top: 12px; padding: 9px; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.94); color: #111;
  font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: .04em;
}
#copy.done { background: #4A7C6F; color: #fff; }

/* Rückmeldung des Signups — app.js schreibt hier hinein. */
.status {
  margin: 0; min-height: 20px;
  font-family: Geist, system-ui, sans-serif; font-size: 13px; color: #5C6B74;
}
/* Zustandsnamen kommen aus app.js: 'err' · 'busy' · 'ok'.
   Fehler traegt kein Rot mehr, sondern Gewicht — dazu ein schwarzer Feldrahmen. */
.status[data-state="err"]  { color: var(--tinte); font-weight: 500; }
.status[data-state="busy"] { color: #6E7A82; }
.status[data-state="ok"]   { color: var(--live); }
[aria-invalid="true"] { border-color: var(--tinte) !important; }
#reset {
  width: 100%; margin-top: 12px; padding: 8px; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.09); color: rgba(255,255,255,.62);
  font-family: inherit; font-size: 10px; letter-spacing: .04em;
}
#reset:hover { background: rgba(255,255,255,.16); color: rgba(255,255,255,.9); }


/* ════════════════════════════════════════════════════════════
   Body — Feature-Reel + Mission. Stand 30.08.2026.

   SCHRIFT (Josua, 30.08.): Hero bleibt Instrument Serif als Signatur,
   der Body laeuft in Geist. Grundlage: vier Minimal-Referenzen live
   vermessen (Duna, Ramp, Superpower, Flighty) — alle vier Grotesk in
   Weight 400, Headline-Zeilenhoehe 1.0, Fliesstext 1.4-1.5.
   Praezisiert die Serif-Entscheidung vom 29.08., ersetzt sie nicht.
   Desktop zuerst (Josuas Vorgabe). Die Mobile-Fassung ist
   vorbereitet, aber bewusst noch nicht gebaut: siehe Block
   ganz unten.
   ════════════════════════════════════════════════════════════ */

.kicker {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gletscher);
}
.kicker.light { color: rgba(255,255,255,.42); }

/* ══ Reel: 4 Karten × 100vh Scrollstrecke, Buehne klebt ══ */
.reel { position: relative; height: 400vh; background: var(--grund); }
.reel-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  /* Platz fuer die fixierte Kopfzeile, sonst liegt „What you get" darunter. */
  padding-top: var(--kopf);
  font-family: Geist, system-ui, sans-serif;
}

.reel-head {
  flex: none; display: flex; align-items: baseline; gap: 16px;
  width: 100%; max-width: 1056px; margin: 0 auto; padding: 20px 48px 0;
}
.preview-tag, .tag {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .07em; color: #98A2A8;
  padding: 3px 9px; border: 1px solid #DFE2E1; border-radius: 20px;
}

/* Spur — alle Karten uebereinander, nur die aktive steht. */
.reel-track { position: relative; flex: 1 1 auto; }

.card {
  position: absolute;
  /* Der Platz fuer die Bar gehoert HIER hin, nicht als padding-bottom auf
     .reel-track: `inset: 0` misst gegen die Padding-Box, ein Padding dort
     bleibt also wirkungslos. Genau daran lag die Ueberlappung am 31.08. */
  inset: 0 0 var(--reel-bar) 0;
  /* Auf dem 1056er Raster wie Kopfzeile, Value und Footer — bei absoluter
     Position zentriert die Kombination left/right:0 + max-width + margin:auto.
     Die Geraetespalte ist `auto`, nicht 440 fest: Das Geraet schrumpft mit der
     Fensterhoehe (`height: min(690px, ...)` + aspect-ratio), eine feste Spalte
     liess daneben bis zu 116px toten Raum stehen und schob den sichtbaren
     Inhalt um 25-58px nach rechts — gemessen 01.09. Mit `auto` ist die Spalte
     immer so breit wie das Geraet, `space-between` setzt Geraet und Text auf
     die Rasterkanten. Preis: der Abstand dazwischen atmet (142-244px) statt
     fest bei 96 zu stehen. Weissraum zwischen zwei Spalten faellt nicht auf,
     ein um 74px versetzter Sektionskopf schon. */
  max-width: 1056px; margin: 0 auto;
  display: grid; grid-template-columns: auto minmax(0,480px);
  justify-content: space-between; align-items: center; column-gap: 96px;
  padding: 0 48px;
  will-change: transform, opacity;
  transition: transform .78s cubic-bezier(.32,.72,0,1), opacity .44s ease;
}
/* Linear (Josua, 30.08.): reine Seitwaertsbewegung. Kein rotate, kein
   scale — beides liess die Karte nach oben wegkippen statt zur Seite. */
.card[data-state="next"] { transform: translateX(64%);  opacity: 0; pointer-events: none; }
.card[data-state="live"] { transform: translateX(0);    opacity: 1; }
.card[data-state="past"] { transform: translateX(-64%); opacity: 0; pointer-events: none; }

/* stretch, damit `height: 100%` am Geraet eine Bezugsgroesse hat. */
.card-shot { display: flex; justify-content: center; align-items: center;
             align-self: stretch; min-height: 0; }
.card-text { max-width: 480px; }
.card-no {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; color: var(--tinte);
}
.card-text h2 {
  font-family: Geist, system-ui, sans-serif; font-weight: 400;
  font-size: 47px; line-height: 1.04; letter-spacing: -.024em;
  color: var(--tinte); margin: 14px 0 18px;
}
.card-text p {
  font-size: 17px; line-height: 1.5; letter-spacing: -.01em; color: var(--schiefer); margin: 0;
}

/* ══ Phone-Mockup — reines CSS, kein Bild ══ */
.phone {
  /* 690px ist die Wunschhoehe, nicht die Vorschrift. Auf niedrigen Fenstern
     schrumpft das Geraet proportional mit, statt aus der Karte zu laufen und
     unter der Bar zu verschwinden. Innen wird der Fuellsatz beschnitten
     (overflow: hidden), die Chips bleiben durch margin-top:auto stehen. */
  position: relative; width: auto; min-width: 0;
  height: min(690px, calc(100% - 2 * var(--reel-luft)));
  aspect-ratio: 338 / 690; border-radius: 48px;
  padding: 11px; background: linear-gradient(158deg, #2A2F33, #14181A 62%);
  box-shadow: 0 32px 70px rgba(26,20,16,.24), 0 4px 14px rgba(26,20,16,.14),
              inset 0 1px 0 rgba(255,255,255,.16);
}
.phone-screen {
  position: relative; height: 100%; border-radius: 32px; overflow: hidden;
  background: linear-gradient(178deg, #FBF7F2 0%, #F4F5F4 58%);
  padding: 54px 26px 26px; display: flex; flex-direction: column; gap: 16px;
}
.phone-screen.dark {
  background: linear-gradient(168deg, #23282C 0%, #14181A 70%);
}
.phone-screen::before {
  content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 5px; border-radius: 3px; background: rgba(20,24,26,.16);
}
.phone-screen.dark::before { background: rgba(255,255,255,.20); }
.phone-badge {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: #8A949A; background: var(--grund); padding: 3px 10px;
  border: 1px solid #E1E4E3; border-radius: 20px;
}

.scr-date {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: #9AA4AA;
}
.phone-screen.dark .scr-date { color: rgba(255,255,255,.40); }
.scr-prompt {
  font-family: Geist, system-ui, sans-serif; font-weight: 450;
  font-size: 23px; line-height: 1.22; letter-spacing: -.022em; color: var(--tinte);
}
.scr-prompt.tight { font-size: 24px; }

.scr-note { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.l { display: block; height: 7px; border-radius: 4px; background: #E3E6E5; }
.w60 { width: 60%; } .w70 { width: 70%; } .w75 { width: 75%; }
.w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; }

.scr-bar { margin-top: auto; display: flex; gap: 7px; }
.scr-chip {
  font-size: 11.5px; padding: 6px 13px; border-radius: 18px;
  background: var(--tinte); color: #F7F5F2;
}
.scr-chip.ghost { background: transparent; color: #7C868C; border: 1px solid #DDE1E0; }

.scr-affirm {
  font-family: Geist, system-ui, sans-serif; font-weight: 450;
  font-size: 24px; line-height: 1.3; letter-spacing: -.022em;
  color: #F6F1EA; margin: 6px 0 0;
}
.scr-source, .scr-recall {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: rgba(255,255,255,.46);
}
.scr-recall { color: #7F888E; }
.src-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); flex: none; }

.scr-steps { display: flex; flex-direction: column; gap: 13px; margin-top: 6px; }
.step { display: flex; align-items: center; gap: 11px; }
.step-n {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px;
  background: rgba(20,24,26,.09); color: var(--tinte);
}
.step .l { flex: 1 1 auto; }

.scr-picks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.pick {
  font-size: 12px; padding: 7px 12px; border-radius: 18px;
  border: 1px solid #DFE2E1; color: #6E7880;
}
.pick.on {
  background: rgba(20,24,26,.07); border-color: rgba(20,24,26,.32);
  color: var(--tinte);
}

/* ══ Quick-Select-Bar — eckig, minimal, echtes Glas ══
   Sie liegt UEBER der Kartenspur statt darunter: nur so laeuft beim
   Wechsel eine Karte dahinter durch und die Brechung hat etwas zu
   brechen. Auf dem einfarbigen Grund allein waere Glas ein grauer
   Kasten. Material identisch zu Nav-Pill, Dropdown und Signup —
   die Seite hat ein Materialsystem, nicht vier Oberflaechen. */
.reel-bar {
  position: absolute; z-index: 12;
  left: 50%; bottom: 38px; transform: translateX(-50%);
  display: flex; align-items: stretch; padding: 0;
  border-radius: 2px; overflow: hidden;
  background: rgba(255,255,255,.24);
  backdrop-filter: blur(var(--glass-blur, 24px)) saturate(1.7) url(#lens);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(255,255,255,.20),
    0 8px 26px rgba(74,58,44,.10);
}
.reel-bar button {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border: 0; border-radius: 0; cursor: pointer;
  background: transparent; color: #6E787E;
  font-family: Geist, system-ui, sans-serif;
  font-weight: 300; font-size: 12.5px; letter-spacing: .012em;
  transition: color .22s ease, background .22s ease;
}
/* Haarlinie statt Rahmen — die Trennung soll man kaum sehen. */
.reel-bar button + button { box-shadow: inset 1px 0 0 rgba(20,24,26,.075); }
.reel-bar button:hover { color: #333A3E; background: rgba(255,255,255,.20); }
.reel-bar button[aria-current="true"] {
  color: var(--tinte); background: rgba(255,255,255,.40);
}
/* Die aktive Marke ist eine 1px-Linie, kein gefuellter Block. */
.reel-bar button[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--tinte);
}
.bar-n {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 300; font-size: 9.5px; letter-spacing: .09em; color: #B6BDC1;
  transition: color .22s ease;
}
.reel-bar button[aria-current="true"] .bar-n { color: var(--tinte); }

/* ══ Mission — schwarz auf weiss, Dither statt Verlauf ══
   Josua, 30.08.: echtes Schwarz-Weiss statt der warmen Graustufen,
   dazu ein feines Punktraster im Grund. Bewusst KEIN zweites Canvas —
   grain.js haengt am Hero-Foto und dithert ein Bild; hier reicht ein
   getiltes Raster, und die Seite traegt keinen zweiten Canvas-Loop.
   Ladezeit schlaegt auf die Signup-Rate, und die ist die Gate-Metrik. */
/* Der Abschnitt ist die SCROLLSTRECKE, das Panel klebt darin.
   Josua, 30.08.: der Besucher soll laenger im Schwarz bleiben. Nicht
   ueber gebremstes Scrollen — das bricht auf iOS, und der Kanal ist
   mobil —, sondern ueber Laenge. Genau so macht es spacefs: dort ist
   das Panel 4498px hoch bei 897px Fensterhoehe, also fuenf
   Bildschirme. Unseres war 999px, gut einer.

   Die Bewegung laeuft durchgehend (siehe einzug.js): kurzer Einzug,
   danach sofort der Ausgang, kein Plateau. Die Strecke ist keine
   Wartezeit, sondern die Dauer dieser Bewegung — deshalb wird sie
   zusammen mit EIN in einzug.js gerechnet. 200vh mit EIN 0.30 haelt
   den Einzug bei rund 90vh und kuerzt den Ausgang auf 210vh. */
.why {
  position: relative;
  height: 200vh;
  background: var(--grund);
  font-family: Geist, system-ui, sans-serif;
  padding: 0;
}

/* ══ Einzug nach dem Verfahren von spacefs.com ══
   Am 30.08. dort ausgemessen: Das schwarze Panel liegt als abgerundete,
   verkleinerte Karte da und waechst beim Hereinscrollen auf volle
   Groesse, waehrend die Rundung auf 0 laeuft. Verankert an center top.
   Rein linear an der Scrollposition, kein Easing, keine Bibliothek —
   nachgerechnet mit zwei Kontrollpunkten, Abweichung 0,00003 bei scale
   und 0 beim Radius:

     p      = (fensterHoehe - sektionOberkante) / fensterHoehe   (0..1)
     scale  = 0.75 + p * 0.25
     radius = 56 * (1 - p)

   Vorher zog sich hier ein helles Band weg. Das war eine andere
   Bewegung und hat sich deshalb anders angefuehlt.

   Ohne JS stehen --panel-scale 1 und --panel-radius 0: dann ist es
   einfach eine schwarze Flaeche, nichts wirkt kaputt. */
.why-panel {
  --panel-scale: 1;
  --panel-radius: 0px;
  position: sticky; top: 0; isolation: isolate;
  height: 100vh;
  display: flex; align-items: center;     /* Inhalt mittig, nicht oben */
  background: #000; color: #fff;
  padding: 0 48px;
  overflow: hidden;
  border-radius: var(--panel-radius);
  transform-origin: center top;
  transform: scale(var(--panel-scale));
  will-change: transform;
}
/* Die Berglandschaft aus dem Hero, grob gedithert — gezeichnet von
   why-dither.js.

   position:absolute ist hier tragend, nicht kosmetisch: Ohne sie ist die
   Canvas ein Blockelement im Fluss und schiebt den Text unter sich weg
   statt hinter sich. Genau das ist am 30.08. beim Panel-Umbau passiert,
   als diese Regel verlorenging — Panel 2158px hoch, Canvas 1154px, Text
   erst ab 1327px. Der Dither stand dann neben dem Text, nicht dahinter. */
.why-dither {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
/* Der Text steht darueber. */
.why-inner { position: relative; z-index: 1; }
/* Linksbuendig im 960er Raster, nicht im Panel zentriert — dasselbe Muster wie
   `.seite-innen` auf den Unterseiten ("damit die Textspalte auf der Wortmarke
   sitzt"). Zentriert begann der Text bei 340 statt 240: ein 100px-Sprung nach
   rechts gegenueber jeder anderen Sektion, sichtbar beim Durchscrollen.
   Die 760px Lesebreite bleiben — 960 waeren bei 18px Fliesstext zu lang.
   Das max() faengt schmale Fenster ab, dort steht der Text am Panel-Rand. */
.why-inner {
  max-width: 760px; width: 100%;
  margin-left: max(0px, calc((100% - 960px) / 2)); margin-right: auto;
}
.why-lead {
  font-family: Geist, system-ui, sans-serif; font-weight: 400;
  font-size: 36px; line-height: 1.14; letter-spacing: -.024em;
  color: #fff; margin: 26px 0 30px;
}
.why-body {
  font-size: 18px; line-height: 1.55; letter-spacing: -.01em;
  color: rgba(255,255,255,.84);
  margin: 0 0 22px; max-width: 660px;
}

.why-status {
  margin-top: 62px; padding: 30px 32px 32px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 2px;
  /* Muss zweierlei koennen: den Dither dahinter abdecken UND sich vom
     schwarzen Grund abheben. Bei .03 war sie auf der Textur praktisch
     unsichtbar. */
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(6px);
}
.ws-row { display: flex; align-items: center; gap: 9px; }
.ws-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 4px rgba(62,124,107,.22);
  animation: pulsieren 2.4s ease-in-out infinite;
}
.ws-label {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px;
  font-weight: 300; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.ws-text {
  font-size: 15.5px; line-height: 1.55; letter-spacing: -.008em;
  color: rgba(255,255,255,.70); margin: 14px 0 22px;
}
.ws-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 26px;
  border-radius: 2px; background: #fff; color: #000;
  font-size: 14.5px; font-weight: 400; letter-spacing: -.01em; text-decoration: none;
  transition: transform .15s, background .15s;
}
.ws-cta:hover { transform: translateY(-1px); background: rgba(255,255,255,.88); }


/* Wer nicht animiert sehen will, sieht nicht animiert. */
@keyframes pulsieren {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 4px rgba(62,124,107,.22); }
  50%      { opacity: .45; box-shadow: 0 0 0 7px rgba(62,124,107,.06); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-dot { animation: none; }
  .card { transition: opacity .2s ease; }
  .card[data-state="next"], .card[data-state="past"] { transform: none; }
}

/* ══ Mobile — NOCH NICHT GEBAUT (Josuas Entscheidung 30.08.: Desktop zuerst).
   Bis dahin faellt die Sektion auf einen ruhigen Stapel zurueck, damit ein
   Handy-Besucher keine kaputte Seite sieht: Pinning aus, Karten untereinander.
   Die geplante Swipe-Fassung ersetzt spaeter nur diesen Block. ══ */
@media (max-width: 900px) {
  .reel { height: auto; }
  .reel-stage { position: static; height: auto; overflow: visible; }
  .reel-head { padding: 56px 22px 0; }
  .reel-track { display: flex; flex-direction: column; gap: 72px; padding: 34px 0 8px; }
  .card {
    position: static; grid-template-columns: 1fr; gap: 30px;
    padding: 0 22px; transform: none !important; opacity: 1 !important;
    pointer-events: auto !important;
  }
  .card-text h2 { font-size: 34px; }
  /* Gestapelt hat die Karte keine feste Hoehe mehr — `height: 100%` am Geraet
     liefe dort ins Leere. Zurueck auf die Wunschhoehe; die Bar ist hier weg,
     es gibt nichts zu unterlaufen. (Mobile bleibt sonst ungebaut, SIDE-50.) */
  .card-shot { align-self: auto; }
  .phone { height: 690px; width: 338px; max-width: 100%; }
  .reel-bar { display: none; }
  .why { height: 180vh; }
  .why-panel { padding: 0 22px; }
  .why-lead { font-size: 29px; }
  .why-body { font-size: 16.5px; }
}


/* ══ Dither-Regler — Werkzeug, nur mit ?dither ══ */
.ditherpanel {
  position: fixed; z-index: 900; right: 22px; bottom: 22px; width: 300px;
  max-height: calc(100vh - 44px); display: flex; flex-direction: column;
  padding: 14px 15px 13px; border-radius: 2px;
  font-family: Geist, system-ui, sans-serif;
  background: rgba(14,16,18,.94); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 40px rgba(0,0,0,.46);
  color: #E9E6E2;
}
.dp-kopf {
  flex: none;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px;
  font-weight: 300; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  display: flex; justify-content: space-between; align-items: center;
}
.dp-klapp {
  width: 20px; height: 20px; line-height: 1; padding: 0;
  border: 1px solid rgba(255,255,255,.18); border-radius: 2px;
  background: transparent; color: rgba(255,255,255,.7); cursor: pointer;
}
.dp-koerper { overflow-y: auto; margin-top: 10px; }
.ditherpanel.dp-zu .dp-koerper { display: none; }

.dp-gruppe {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.34);
  margin: 14px 0 7px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.09);
}
.dp-gruppe:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.dp-wahl { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.dp-wahl button {
  padding: 5px 9px; border-radius: 2px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.66); font-size: 11px; font-weight: 300;
  transition: background .15s, color .15s, border-color .15s;
}
.dp-wahl button:hover { background: rgba(255,255,255,.11); color: #fff; }
.dp-wahl button[aria-current="true"] {
  background: var(--alpenglow); border-color: var(--alpenglow); color: #FBF7F2;
}

.dp-liste { display: flex; flex-direction: column; gap: 7px; }
.dp-zeile { display: grid; grid-template-columns: 82px 1fr 40px; align-items: center; gap: 8px; }
.dp-name { font-size: 11px; font-weight: 300; color: rgba(255,255,255,.64); }
.dp-zeile input[type="range"] {
  width: 100%; height: 2px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,.20); border-radius: 0; outline: none; cursor: pointer;
}
.dp-zeile input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 9px; height: 14px; border-radius: 1px; background: var(--alpenglow); cursor: grab;
}
.dp-zeile output {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px;
  color: rgba(255,255,255,.5); text-align: right;
}
.dp-hinweis {
  margin: 12px 0 10px; font-size: 10.5px; line-height: 1.5; font-weight: 300;
  color: rgba(255,255,255,.44); min-height: 42px;
}
.dp-kopieren {
  width: 100%; padding: 8px; border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px; background: rgba(255,255,255,.06); color: #EFECE8;
  font-size: 11.5px; font-weight: 300; cursor: pointer; transition: background .16s;
}
.dp-kopieren:hover { background: rgba(255,255,255,.13); }


/* ══ Footer ══ */
.fuss {
  background: var(--grund); color: var(--tinte);
  font-family: Geist, system-ui, sans-serif;
  padding: 96px 48px 34px;
  border-top: 1px solid rgba(20,24,26,.08);
}
.fuss-innen {
  /* 960 = 1056 minus 2x48 Rand: Der Rand sitzt auf .fuss, also muss die
     Innenbreite ihn abziehen, damit die Spalten auf Kopf und Reel fluchten. */
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,2fr);
  gap: 56px; align-items: start;
}
.fuss-marke .mark { font-family: 'Instrument Serif', serif; font-size: 21px; }
.fuss-marke p {
  margin: 12px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.6;
  letter-spacing: -.006em; color: #6E787E;
}
.fuss-spalten { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.fuss-spalte { display: flex; flex-direction: column; gap: 9px; }
.fuss-titel {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 400; letter-spacing: .11em;
  text-transform: uppercase; color: #A6AEB3; margin-bottom: 3px;
}
.fuss-spalte a {
  font-size: 13.5px; font-weight: 300; letter-spacing: -.006em;
  color: #4A5359; text-decoration: none; transition: color .16s;
}
.fuss-spalte a:hover { color: var(--tinte); }
.fuss-zeile {
  max-width: 960px; margin: 64px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(20,24,26,.07);
  display: flex; justify-content: space-between;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 300; letter-spacing: .05em; color: #9AA4AA;
}

/* ══ Unterseiten — Textkoerper ══ */
.seite {
  background: var(--grund); color: var(--tinte);
  font-family: Geist, system-ui, sans-serif;
  /* Gleiches Raster wie Kopf, Reel und Footer: 1056px, 48px Rand. */
  max-width: 1056px; margin: 0 auto; width: 100%;
  padding: 30px 48px 96px;
}
/* Linksbündig im Raster, damit die Textspalte auf der Wortmarke sitzt. */
.seite-innen { max-width: 720px; margin: 0; }
.kopf-zurueck {
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: .08em; color: #8A949A; text-decoration: none;
}
.kopf-zurueck:hover { color: var(--tinte); }
.seite h1 {
  font-family: Geist, system-ui, sans-serif; font-weight: 400;
  font-size: 38px; line-height: 1.08; letter-spacing: -.028em; margin: 26px 0 34px;
}
.seite h2 {
  font-size: 17px; font-weight: 500; letter-spacing: -.014em;
  margin: 38px 0 10px;
}
.seite p, .seite li {
  font-size: 15px; font-weight: 300; line-height: 1.68; letter-spacing: -.006em;
  color: #3E474D; margin: 0 0 12px;
}
.seite ul { margin: 0 0 12px; padding-left: 20px; }
.seite a {
  color: var(--tinte); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: rgba(20,24,26,.32);
}
.seite a:hover { text-decoration-color: var(--tinte); }
.seite .platzhalter {
  background: rgba(20,24,26,.07); color: var(--tinte);
  border: 1px dashed rgba(20,24,26,.34);
  padding: 1px 6px; border-radius: 2px; font-weight: 400;
}
.seite .hinweis {
  margin: 30px 0 0; padding: 16px 18px; border-radius: 2px;
  border: 1px solid rgba(20,24,26,.20); background: rgba(20,24,26,.04);
  font-size: 13.5px; line-height: 1.6; color: var(--schiefer);
}

@media (max-width: 900px) {
  .fuss { padding: 64px 22px 28px; }
  .fuss-innen { grid-template-columns: 1fr; gap: 36px; }
  .fuss-spalten { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fuss-zeile { flex-direction: column; gap: 8px; margin-top: 40px; }
  .seite { padding: 20px 22px 64px; }
  .seite h1 { font-size: 30px; }
}


/* ══ Unterseiten — gemeinsames Gerüst ══
   Kontakt, Impressum, Datenschutz teilen Kopf, Textkörper und Footer.
   Kein Hero, also kein Glas: auf --grund tragen flache Flächen und Haarlinien.
   Alle Maße, Schriften und Farben sind aus Nav, Reel und Footer übernommen. */
body.unterseite { display: flex; flex-direction: column; min-height: 100vh; }
body.unterseite main { flex: 1; }

.seiten-kopf {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1056px; margin: 0 auto; width: 100%;
  padding: 22px 48px;
  font-family: Geist, system-ui, sans-serif; color: var(--tinte);
}
.seiten-kopf > * { position: relative; z-index: 2; }
/* Dasselbe Glasband wie im Hauptkopf. Hier dauerhaft: es gibt kein Foto,
   das freibleiben muesste, und die Unterseiten sind reiner Lesetext. */
.seiten-kopf::before {
  content: ''; position: absolute; top: 0; bottom: -20px;
  left: 50%; transform: translateX(-50%); width: 100vw;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.52), rgba(255,255,255,.12));
  backdrop-filter: blur(18px) saturate(1.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  -webkit-mask: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.seiten-kopf .mark { text-decoration: none; color: inherit; }
.kopf-zurueck {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #8A949A; text-decoration: none; transition: color .16s;
}
.kopf-zurueck:hover { color: var(--tinte); }

/* ══ Kontakt — Formular flach, Maße wie .cta im Hero ══ */
.kf { display: grid; gap: 16px; margin: 30px 0 0; max-width: 480px; }
.kf-feld { display: flex; flex-direction: column; }
.kf label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 400; letter-spacing: .11em;
  text-transform: uppercase; color: #A6AEB3; margin-bottom: 7px;
}
.kf input, .kf textarea {
  width: 100%; height: 52px; padding: 0 17px; border-radius: 13px;
  background: #FFFFFF; border: 1px solid #DFE2E1; color: var(--tinte);
  font-family: Geist, system-ui, sans-serif; font-size: 15px; outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.kf textarea {
  height: auto; min-height: 148px; padding: 15px 17px;
  line-height: 1.6; resize: vertical;
}
.kf input:focus, .kf textarea:focus {
  border-color: #C4CAC8; box-shadow: 0 4px 18px rgba(90,66,44,.09);
}
.kf input::placeholder, .kf textarea::placeholder { color: #A8AEB2; }
.kf button {
  justify-self: start; height: 52px; padding: 0 26px;
  border-radius: 13px; border: 0; cursor: pointer;
  background: var(--tinte); color: var(--grund);
  font-family: Geist, system-ui, sans-serif; font-size: 15px; font-weight: 500;
  box-shadow: 0 4px 18px rgba(20,24,26,.22);
  transition: transform .15s;
}
.kf button:hover { transform: translateY(-1px); }
.kf-hinweis { margin: 4px 0 0; font-size: 12.5px; color: #6E7A82; }

@media (max-width: 900px) {
  .seiten-kopf { padding: 20px 22px; }
  .kf { max-width: none; }
}

/* Spezifität: `.seite p` würde Statuszeile und Hinweis sonst überschreiben. */
.seite .status { font-size: 13px; color: #5C6B74; margin: 0; }
.seite .kf-hinweis { font-size: 12.5px; color: #6E7A82; margin: 14px 0 0; }
.seite .tag { margin-bottom: 4px; }


/* ══ Value — der Sale, vor dem Reel ══
   Muster von I am (nummeriert, kurze Ueberschrift, ein Satz, Zickzack,
   viel Weissraum), aber im 1056er Raster und ohne ihre Strichzeichnungen.
   Kein Glas: die Sektion steht auf --grund, backdrop-filter lebt vom Foto. */
.wert { background: var(--grund); padding: 120px 0 132px; }
.wert-innen {
  max-width: 1056px; margin: 0 auto; padding: 0 48px;
  font-family: Geist, system-ui, sans-serif;
}

.wert-versprechen {
  margin: 14px 0 0; max-width: 15ch;
  font-family: Geist, system-ui, sans-serif; font-weight: 400;
  font-size: 42px; line-height: 1.08; letter-spacing: -.026em; color: var(--tinte);
}
.wert-lead { max-width: 46ch; margin: 26px 0 0; }
.wert-lead p {
  margin: 0 0 12px; font-size: 16.5px; font-weight: 300; line-height: 1.62;
  letter-spacing: -.006em; color: var(--schiefer);
}

/* Zickzack: zwei Spalten, jeder Punkt nimmt abwechselnd links und rechts
   und faellt dabei nach unten — dieselbe Bewegung wie bei I am, nur im Raster. */
.wert-liste {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px; margin-top: 96px;
}
.wert-punkt { max-width: 34ch; }
.wert-punkt:nth-child(1) { grid-column: 1; }
.wert-punkt:nth-child(2) { grid-column: 2; margin-top: 108px; }
.wert-punkt:nth-child(3) { grid-column: 1; margin-top: 96px; }
.wert-nr {
  display: block; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; color: var(--tinte);
}
.wert-punkt h3 {
  margin: 16px 0 10px; font-family: Geist, system-ui, sans-serif;
  font-size: 21px; font-weight: 500; letter-spacing: -.016em; color: var(--tinte);
}
.wert-punkt p {
  margin: 0; font-size: 15px; font-weight: 300; line-height: 1.68;
  letter-spacing: -.006em; color: #3E474D;
}

/* Die Beleg-Karte — der Differenzierer.
   Links eine GUTE generische Affirmation, kein Strohmann. Rechts gewinnt
   nicht der bessere Satz, sondern die Quellzeile darunter. */
/* Volle Rasterbreite: mit max-width 800 endeten die Karten bei 1040, waehrend
   die Zickzack-Liste direkt darueber bis 1200 lief — drei rechte Kanten in
   einer Sektion. */
.wert-karten {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; margin-top: 132px;
}
.karte {
  margin: 0; padding: 22px 24px 24px; border-radius: 13px;
  border: 1px solid rgba(20,24,26,.10); background: #FFFFFF;
  display: flex; flex-direction: column; gap: 12px;
}
.karte-label {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  color: #A6AEB3;
}
.karte blockquote {
  margin: 0; font-size: 18px; font-weight: 400;
  line-height: 1.42; letter-spacing: -.014em; color: var(--tinte);
}
.karte-generisch { background: rgba(20,24,26,.035); border-color: rgba(20,24,26,.07); }
.karte-generisch blockquote { color: #767F85; }
.karte-beleg { box-shadow: 0 6px 24px rgba(20,24,26,.07); }
.karte-quelle {
  margin-top: auto; padding-top: 6px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .06em; color: var(--gletscher);
}
/* Kennzeichnung ist nicht Zierde: ein erfundener Satz mit Datum koennte
   sonst als echte Nutzeraussage gelesen werden. */
.karten-hinweis {
  margin: 14px 0 0; font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .06em; color: #A6AEB3;
}

@media (max-width: 900px) {
  .wert { padding: 76px 0 84px; }
  .wert-innen { padding: 0 22px; }
  .wert-versprechen { font-size: 31px; max-width: none; }
  .wert-liste { grid-template-columns: 1fr; row-gap: 52px; margin-top: 56px; }
  .wert-punkt:nth-child(2), .wert-punkt:nth-child(3) { grid-column: 1; margin-top: 0; }
  .wert-punkt { max-width: none; }
  .wert-karten { grid-template-columns: 1fr; margin-top: 72px; }
}

/* Platzhalter auf der schwarzen Sektion — `.seite .platzhalter` greift dort nicht.
   Unfertige Copy muss sichtbar unfertig sein, sonst geht sie versehentlich live. */
.why .platzhalter {
  display: inline-block;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.62);
  border: 1px dashed rgba(255,255,255,.30);
  padding: 2px 8px; border-radius: 2px; font-weight: 400;
}

/* ══ Echte App-Screens im Geraet ══
   Loest die CSS-gezeichneten Attrappen ab (14.09.). Der Screenshot bringt
   Statusleiste und Dynamic Island selbst mit, deshalb faellt hier sowohl das
   Innenpolster als auch der gezeichnete Notch-Strich weg. */
.phone-screen.shot {
  padding: 0; display: block; background: var(--grund);
}
.phone-screen.shot::before { display: none; }
.phone-screen.shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

/* ══ Das Zeichen im Kopf ══
   Ersetzt die Wortmarke (14.09.). Etwas groesser als die 22px Schrift davor,
   damit es dieselbe optische Praesenz hat — ein Quadrat wirkt bei gleicher
   Hoehe kleiner als eine Versalie. Das Ziel bleibt bei 44px Hoehe, auch wenn
   das Zeichen kleiner ist. */
.mark-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: -9px;
}
.mark-zeichen svg {
  display: block; width: 34px; height: 34px;
  box-shadow: 0 2px 10px rgba(20,24,26,.22);
  border-radius: 7.65px; /* 22.5% von 34 — dieselbe Rundung wie das App-Icon */
  transition: transform .18s ease;
}
.mark-zeichen:hover svg { transform: scale(1.05); }