/* ==========================================================================
   cosymo.komp64.de

   Ein Stylesheet fuer alle Seiten: Startseite, Impressum, Datenschutz und die
   Antwortseiten der Formularverarbeitung.

   HALTUNG DIESER FASSUNG (17.08.2026, zweiter Anlauf)

   Die erste Fassung war ein Stapel abgerundeter Karten mit Verlaeufen — die
   Form, die jede zweite Seite im Netz hat. Diese Fassung arbeitet stattdessen
   mit:

     · EINER Komposition auf dem ersten Bildschirm statt einer Reihe Bloecke
     · Haarlinien statt Kartenraendern
     · einer Serife fuer die Ueberschriften, Groteske fuer alles andere
     · Weiss und Papier als Grundflaeche; die Markenfarben leben nur noch
       im ersten Bildschirm, dort als radiales Licht statt als Verlauf
     · genau EINEM Glaselement (dem Zahlenstreifen ueber der App)
     · keinen Eyebrow-Labeln ueber Ueberschriften und keinen
       Abschnittsnummern, wo die Reihenfolge nichts bedeutet

   Die Token sind dieselben wie in der iOS-App (Theme/AppTheme.swift). Wer
   hier eine Farbe aendert, aendert sie dort NICHT mit.
   ========================================================================== */

/* --- Schriften -------------------------------------------------------------
   Selbst gehostet, nicht ueber fonts.googleapis.com: ein Aufruf des
   Google-CDN uebertraegt die IP des Besuchers in die USA.

   Newsreader ist auf einen festen Schnitt eingedampft (Regular, optische
   Groesse 40) und auf die Zeichen beschraenkt, die deutsche Ueberschriften
   brauchen — 131 KB als variable Schrift, 19 KB so.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ⚠️ Gewichtsachse 400-600, nicht ein fester Schnitt. Mit nur Regular hat die
   Display-Stimme keinen Schritt: die 4,2-rem-Ueberschrift und die
   Kennzahlen im Streifen liefen im selben Gewicht, und die Zahlen sahen aus
   wie vergroesserter Fliesstext statt wie Zahlen. 19 -> 33 KB, gut angelegt. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-display.woff2') format('woff2');
}

/* --- Token ---------------------------------------------------------------- */
:root {
  --papier: #FFFFFF;
  --papier-2: #FAF9F7;
  --papier-3: #F3F2EF;

  --tinte: #1E2A26;
  --tinte-2: #55635D;
  /* 4,6:1 auch auf der hellsten Papierflaeche. Der Wert aus der Vorlage
     (#8A968F) kam nur auf 3,07:1 — zu hell fuer 11-px-Marken. */
  --tinte-3: #656F69;

  --linie: #E4E2DC;
  --linie-stark: #D3D0C8;

  --marke: #3FBE95;
  --marke-hell: #8FDCBE;
  /* Linkfarbe, nicht Markenfarbe: #2A9E7A kam auf Weiss nur auf 3,35:1.
     Fuer Flaechen und Symbole bleibt --marke (#3FBE95) — Grafik braucht
     nur 3:1, Text 4,5:1. */
  --marke-text: #217B5F;
  --marke-tief: #22876A;
  --on-accent: #0F3729;
  --koralle: #F4906B;
  --koralle-text: #C6603A;

  --dunkel: #12241E;

  --breite: 1180px;
  --tafel-breite: 1100px;
  --luft: clamp(20px, 4.5vw, 40px);

  /* --- Schriftstaffel ------------------------------------------------------
     Sechs Stufen, mehr nicht. Vorher standen DREIZEHN verschiedene Groessen
     unter 20 px im Blatt — 9,5 · 10,5 · 11 · 12 · 12,5 · 13 · 13,5 · 14 · 14,5
     · 15 · 15,5 · 16 · 19 —, die meisten einen halben Pixel auseinander. Solche
     Abstaende sieht niemand als Unterschied; sie wirken nur als Unruhe, und bei
     jeder neuen Zeile raet man neu.

     ⚠️ `--t-basis` ist 16 px und darf es bleiben: Safari auf dem iPhone zoomt
     beim Hineintippen in ein Eingabefeld, sobald dessen Schrift kleiner als
     16 px ist. Das faellt am Schreibtisch nie auf.

     Eine begruendete Ausnahme gibt es: die Marken im Zahlenstreifen gehen
     unter 480 px auf 9,5 px herunter — 14 Versalien mit Sperrung passen sonst
     nicht in eine Drittelspalte. Steht dort im Blatt. */
  --t-mikro: 11px;      /* Versal-Marken */
  --t-meta: 12.5px;     /* Fussnoten, Rechtstext, Zaehlnummern */
  --t-klein: 14px;      /* Sekundaertext, Navigation, Listen */
  --t-basis: 16px;      /* Fliesstext, Knoepfe, Eingaben */
  --t-fliess: clamp(16px, 1.7vw, 17.5px);   /* laufender Text in Abschnitten */
  --t-lead: 19px;       /* Hervorhebung */

  /* Die eingebauten CSS-Kurven sind zu weich; diese haben Druck. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* --- Grundlagen ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--t-basis);
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Nimmt die 300-ms-Wartezeit, mit der Safari auf einen Doppeltipp lauert. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
img, svg, video { display: block; max-width: 100%; }

a { color: var(--marke-text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--marke-tief); }
}

:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
  border-radius: 3px;
}
main:focus { outline: none; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.zum-inhalt {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--tinte); color: #fff;
  padding: 12px 18px; font-size: var(--t-klein); font-weight: 600;
  transition: top 180ms var(--ease-out);
}
.zum-inhalt:focus { top: 12px; color: #fff; }

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding-inline:
    max(var(--luft), env(safe-area-inset-left))
    max(var(--luft), env(safe-area-inset-right));
}

/* --- Typografische Bausteine ---------------------------------------------- */

/* Serife nur fuer Ueberschriften. Sie traegt den Charakter der Seite; alles
   Funktionale (Navigation, Knoepfe, Listen, Formular) bleibt Groteske. */
.serife {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -.02em;
}


.gross {
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.mittel {
  font-size: clamp(1.7rem, 3.8vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -.028em;
}
.klein-ueber {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.fliess {
  font-size: var(--t-fliess);
  line-height: 1.65;
  color: var(--tinte-2);
}

/* ==========================================================================
   Kopfzeile — schwebt ueber dem ersten Bildschirm, ohne Flaeche
   ========================================================================== */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
}
.kopf > .huelle {
  display: flex; align-items: center; gap: 28px;
  padding-block: clamp(14px, 2vw, 20px);
}

.marke { display: flex; align-items: center; gap: 10px; color: var(--tinte); }
.marke__kachel {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  color: var(--tinte);
}
.marke__wort {
  font-size: var(--t-basis); font-weight: 600; letter-spacing: -.01em;
}

.kopf__nav { display: flex; gap: 12px; margin-left: auto; }
.kopf__nav a {
  font-size: var(--t-klein); font-weight: 500; color: rgba(30, 42, 38, .68);
  padding: 11px 8px;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .kopf__nav a:hover { color: var(--tinte); }
}

/* Wenn die Seite gescrollt ist, braucht die Leiste doch einen Grund —
   sonst steht sie auf weissem Text-Inhalt ohne Halt. */
.kopf::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
  opacity: 0; transition: opacity 240ms ease;
  pointer-events: none;
}
.kopf.haftet::before { opacity: 1; }

/* ==========================================================================
   Schaltflaechen
   Druckzustand ausschliesslich ueber :active — kein JavaScript, keine
   eigene Geste. Nur transform bewegt sich, das laeuft auf der GPU.
   ========================================================================== */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--t-basis); font-weight: 500;
  letter-spacing: -.01em;
  padding: 0 26px; height: 52px;
  background: var(--tinte); color: #fff;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
  text-align: center;
}
.knopf:active { transform: scale(.98); }
/* app.js schaltet den Knopf waehrend des Sendens ab. Ohne diese Regel sah er
   danach genauso aus wie vorher, Zeigefinger inklusive. */
.knopf:disabled {
  opacity: .55; cursor: default; transform: none;
}
.knopf:hover { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { background: #2C3B36; }
}

.knopf--klein { height: 44px; padding: 0 20px; font-size: var(--t-klein); }
.knopf--breit { width: 100%; }

@media (hover: hover) and (pointer: fine) {
}

@media (hover: hover) and (pointer: fine) {
}

/* ==========================================================================
   Erster Bildschirm — eine Komposition, volle Hoehe
   Drei Zeilen: Text · laufende App · angedockte Tafel.
   ========================================================================== */
.buehne {
  position: relative;
  /* Streifenmasse als Variablen, damit die Ausblendung der Aufnahme sie
     kennt — sonst laufen beide auseinander. */
  --streifen-abstand: clamp(8px, 1.2vh, 14px);
  --streifen-hoehe: 84px;
  min-height: 100svh;
  /* Flexbox statt Grid: nur hier laesst sich ein Element wirklich stauchen
     (`flex-shrink` + `min-height: 0`). In einer `fr`-Zeile loest `height: 100%`
     gegen eine unbestimmte Groesse auf und faellt still auf `auto` zurueck —
     die Buehne wurde dadurch 1257 px hoch bei 800 px Fenster, und die Tafel
     rutschte unter die Fensterkante. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* ⚠️ Ein LICHT, kein Verlauf. Ein linearer Farbwechsel laesst die
     Ueberschrift irgendwo im Farbfeld stehen; eine radiale Quelle setzt sie
     in den hellsten Punkt. Genau daran haengt, dass die Typografie hier ohne
     jede Abdunklung traegt. Der hellste Punkt liegt bei 26 % der Hoehe — die
     H1 beginnt bei ca. 21 % und endet bei ca. 38 %.

     Zwei Grenzen, damit der Kontrast haelt: der aeusserste Halt nicht dunkler
     als #F0C0A0, der Mint-Ring nicht dunkler als #DCEFE5. Sonst rutscht die
     Navigation unter 4,5:1. */
  background:
    radial-gradient(125% 85% at 50% 26%,
      #FFFFFF 0%, #FCFBF8 20%, #F0F7F3 42%, #DCEFE5 64%,
      #F6DECD 86%, #F2C4A6 100%),
    #E7F3EC;
}

/* Stauchen darf ausschliesslich der Bildschirm. Der Textblock behaelt seine
   Groesse — an ihm zu sparen macht die Seite kleinlich. */
.buehne__kopf { flex: none; }

.buehne__kopf {
  text-align: center;
  padding-top: clamp(88px, 10vh, 128px);
  padding-bottom: clamp(16px, 2.6vh, 32px);
}
.buehne__kopf h1 { color: var(--tinte); }
.buehne__satz {
  max-width: 34rem; margin: clamp(16px, 2.4vh, 26px) auto 0;
  font-size: var(--t-fliess); line-height: 1.6;
  /* Fest statt Deckkraft: auf dem helleren Licht kam rgba(30,42,38,.66) nur
     noch auf 4,90:1 — jede spaetere Aufhellung haette es gekippt. */
  color: var(--tinte-2);
}

/* --- Anmeldung im ersten Bildschirm ----------------------------------------
   Nearos Vorlage macht daraus eine Pille. Uebernommen wird die Struktur (ein
   Feld, ein Knopf, eine Zeile), nicht die Form: diese Seite arbeitet
   durchgehend mit rechten Winkeln, und eine einzelne runde Pille waere die
   Haut der Vorlage statt ihres Skeletts.
--------------------------------------------------------------------------- */
.buehne__form { margin-top: clamp(20px, 3vh, 32px); }

.buehne__meldung { max-width: 30rem; margin: 0 auto; text-align: left; }
.buehne__meldung:empty { display: none; }

.buehne__leiste {
  display: flex; align-items: stretch;
  max-width: 30rem; margin: 0 auto;
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  box-shadow: 0 14px 34px -22px rgba(30, 42, 38, .5);
}
.buehne__leiste input {
  flex: 1; min-width: 0;
  height: 54px; padding: 0 16px;
  border: 0; background: transparent;
  font-family: inherit; font-size: var(--t-basis); color: var(--tinte);
}
.buehne__leiste input::placeholder { color: var(--tinte-3); }
/* Das Feld hat keinen eigenen Rahmen, also kann `.feld input:focus` hier nicht
   greifen. Ohne diese Regel haette die Leiste gar keine Fokusanzeige. */
.buehne__leiste input:focus { outline: none; }
.buehne__leiste:focus-within { outline: 2px solid var(--tinte); outline-offset: 3px; }
@media (forced-colors: active) {
  .buehne__leiste:focus-within { outline: 3px solid; outline-offset: 2px; }
}
.buehne__leiste .knopf { flex: none; height: 54px; padding: 0 24px; }

.buehne__einwilligung {
  max-width: 30rem; margin: 14px auto 0;
  text-align: left; font-size: var(--t-meta);
}

/* --- Der Zahlenstreifen ----------------------------------------------------
   Wo die Vorlage einen Countdown auf ein erfundenes Datum setzt, stehen hier
   vier Zahlen, die stimmen.

   ⚠️ Absolut, nicht im Fluss. Im Fluss naehme der Streifen der Aufnahme den
   Platz (sie faellt von 347 auf 176 px), und bei `overflow: hidden` waere er
   das Erste, was verschwindet, sobald oben eine Fehlermeldung erscheint.
--------------------------------------------------------------------------- */
.streifen {
  position: absolute; z-index: 2;
  /* Dicht an die Unterkante: Jeder Millimeter darunter zeigt einen
     angeschnittenen Rest der App-Oberflaeche, und ein halbes Kaertchen am
     Seitenrand liest sich als Fehler, nicht als Schnitt. */
  left: 0; right: 0; bottom: var(--streifen-abstand);
  width: min(var(--tafel-breite), 100%);
  margin-inline: auto;
  padding-inline:
    max(var(--luft), env(safe-area-inset-left))
    max(var(--luft), env(safe-area-inset-right));
  /* Keine Fuge. Schon 2 px zeigten das Video dahinter — und dort sass
     ausgerechnet der gruene Knopf der App, was wie ein Versehen aussah.
     Ohne Fuge bilden die vier Felder eine durchgehende Glasleiste, geteilt
     nur durch ihre eigenen Raender. */
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  list-style: none; margin-block: 0;   /* ⚠️ sonst 16 px Eigenleben der <ul> */
}
/* Glas mit Grund, nicht als Zierrat: darunter laeuft das Video, und die
   Durchsicht ist der Punkt. */
.streifen__feld {
  /* Weniger Deckkraft, dafuer eine sichtbare Kante: bei .64 ueber einem fast
     weissen Grund war das Glas ein weisser Balken, durch den nichts zu sehen
     war — und Glas, durch das man nichts sieht, ist Zierrat. */
  background: rgba(255, 255, 255, .46);
  border: 1px solid rgba(255, 255, 255, .72);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  padding: clamp(10px, 1.5vh, 16px) clamp(8px, 1.2vw, 16px);
  text-align: center;
}
.streifen__feld b {
  display: block;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  font-weight: 560;            /* Kennzahl, nicht Fliesstext */
  line-height: 1.05; letter-spacing: -.025em;
  color: var(--tinte);
}
.streifen__feld span {
  display: block; margin-top: 5px;
  font-size: var(--t-mikro); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-2);
}

/* Der laufende Bildschirm. Kein Handy-Rahmen: die Attrappe mit Rand,
   Insel und Schatten ist selbst ein abgegriffenes Muster. Was hier steht,
   ist eine Flaeche mit echter App darauf — von der Tafel unten angeschnitten. */
.buehne__schirm {
  --schirm-breite: min(330px, 74vw);
  align-self: center;
  /* Darf schrumpfen, bis nur noch ein Streifen der App ueber der Tafel steht.
     Genau das ist die Absicht: die laufende App steigt hinter dem Milchglas
     auf. min-height:0 ist Pflicht — ohne sie schrumpft ein Flex-Element
     nie unter seinen Inhalt. */
  flex: 0 1 auto;
  min-height: 0;
  margin-top: auto;
  position: relative;
  width: var(--schirm-breite);
  /* Gibt dem Kasten seine natuerliche Groesse (= Ausgangswert fuers
     Stauchen), ohne dass der Inhalt sie liefern muss. */
  aspect-ratio: 640 / 944;
  overflow: hidden;
  border-radius: 26px 26px 0 0;
  background: #EDF5F0;
  /* Ohne Kante loest sich die Flaeche auf: die Radiale liefert an dieser
     Stelle fast denselben Wert, und „GANZKÖRPER-KRAFT" schwebte ohne
     Untergrund in der Seite. Kein Rahmen — eine Haarlinie. */
  border: 1px solid rgba(255, 255, 255, .92);
  border-bottom: 0;
  box-shadow: 0 -1px 30px -12px rgba(30, 42, 38, .28);
  /* ⚠️ Die Ausblendung MUSS die Streifenkante erreichen. Vorher endete sie
     48 px ueber der Buehnenunterkante, der Streifen sass aber nur 10 px
     darueber — dazwischen blieb ein lesbarer Rest der App stehen, und die
     Streifenkante halbierte ausgerechnet den gruenen Knopf. Jetzt ist die
     Ausblendzone so hoch wie der Streifen plus sein Abstand, sodass unter
     dem Glas nichts Erkennbares mehr steht. */
  /* Der Vorlauf von 72 px ist der Punkt: Ohne ihn beginnt die Ausblendung
     exakt an der Streifenkante, und die Bedienknoepfe werden dort noch bei
     voller Deckkraft halbiert — sichtbar als Schnitt, nicht als Uebergang.
     Mit Vorlauf ist die Aufnahme an der Kante schon halb aufgeloest. */
  /* ⚠️ Der Halt bei 12 % an der Streifen-Oberkante ist eine
     Barrierefreiheits-Bedingung, keine Geschmacksfrage: Hinter dem Glas
     laeuft Video. Bei 55 % Deckkraft kommt das Label im dunkelsten Einzelbild
     auf 3,18:1 statt der geforderten 4,5 — gerechnet gegen den dunkelsten
     Text der Aufnahme ueber dem Koralle-Ende des Verlaufs. Bei 12 % sind es
     4,91:1. Eine Messung gegen ein Standbild haette das nie gezeigt. */
  --streifen-oben: calc(var(--streifen-hoehe, 84px) + var(--streifen-abstand, 12px));
  --auslauf: calc(var(--streifen-oben) + 72px);
  -webkit-mask-image: linear-gradient(to bottom,
    #000 calc(100% - var(--auslauf)),
    rgba(0,0,0,.45) calc(100% - var(--streifen-oben) - 34px),
    rgba(0,0,0,.12) calc(100% - var(--streifen-oben)),
    transparent 100%);
          mask-image: linear-gradient(to bottom,
    #000 calc(100% - var(--auslauf)),
    rgba(0,0,0,.45) calc(100% - var(--streifen-oben) - 34px),
    rgba(0,0,0,.12) calc(100% - var(--streifen-oben)),
    transparent 100%);
}
.buehne__schirm video,
.buehne__schirm img {
  /* Absolut, damit die Aufnahme jede gestauchte Hoehe fuellt — mit
     `height: 100%` im Fluss bliebe sie an ihrer eigenen Groesse haengen. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* ⚠️ Oben buendig, nicht versetzt. Jeder Versatz schneidet die obere Kante
     mitten durch eine Textzeile der App („Übung 1 von 4“) — das sieht nach
     Fehler aus. So beginnt die Aufnahme an ihrer eigenen Oberkante, und
     beschnitten wird nur unten, wo die Tafel darueberliegt. */
  object-position: 50% 0;
}

/* Der Ausgleich funktioniert nur gegen eine BESTIMMTE Hoehe — `min-height`
   allein laesst den Kasten einfach mitwachsen. Unterhalb dieser Fenstergroesse
   waere ein erzwungener Bildschirm falsch: dort darf die Buehne laenger sein
   als das Fenster, und man scrollt.

   ⚠️ 780 statt 720: Mit der Anmeldeleiste im Kopfblock bleiben bei 720 px
   Fensterhoehe nur noch rund 100 px fuer die Aufnahme. Kommt dann eine
   Fehlermeldung dazu, reicht der Platz nicht, und `overflow: hidden`
   schneidet unten ab — ohne Scrollbalken, ohne Fehler, einfach weg. */
@media (min-height: 780px) and (min-width: 760px) {
  .buehne { height: 100svh; }
}

/* --- Was Cosymo macht ----------------------------------------------------
   Stand frueher als Glastafel im Hero. Dort nahm sie der App-Aufnahme 219 px
   weg — auf einem 1280x800-Fenster blieben davon 180 px uebrig, also ein
   Streifen statt eines Produkts. Jetzt ein eigener, ruhiger Abschnitt.

   Die Sprungmarken haben ihre Nummern verloren: 01/02/03 taugen nur, wenn die
   Reihenfolge etwas bedeutet. „Fuer Trainer" vor „Fuer Kunden" bedeutet nichts.
--------------------------------------------------------------------------- */
.was { max-width: 46rem; }
.was h2 { color: var(--tinte); }
.was p { margin-top: 18px; }

.wege {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 40px);
  margin-top: clamp(30px, 4vw, 48px);
}
.weg {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--linie-stark);
  color: var(--tinte); font-size: var(--t-basis); font-weight: 500;
  transition: border-color 200ms ease;
}
.weg svg {
  flex: none; color: var(--tinte-3);
  transition: transform 200ms var(--ease-out), color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .weg:hover { color: var(--tinte); border-top-color: var(--tinte); }
  .weg:hover svg { transform: translateX(3px); color: var(--tinte); }
}

/* ==========================================================================
   Abschnitte darunter
   ========================================================================== */
.abschnitt { padding-block: clamp(64px, 10vw, 128px); }
.abschnitt--knapp { padding-block: clamp(48px, 7vw, 88px); }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }

.kopfzeile { max-width: 46rem; }
/* Das Zeilenmass gehoert ins Stylesheet, nicht in sieben style-Attribute.
   46 rem ergaben rund 90 Zeichen je Zeile — 15 ueber der Lesbarkeitsgrenze. */
.kopfzeile p, .was p, .paar p.fliess { max-width: 36rem; }
/* Die Abstaende standen als style-Attribute im Markup und schlugen damit
   jede Regel hier. Ein Zeilenmass, das sich nur inline durchsetzen laesst,
   ist keins. */
.paar > div > h2 { margin-top: 14px; }
.paar > div > p.fliess { margin-top: 18px; }
.kopfzeile h2 { margin-top: 14px; }
.kopfzeile p { margin-top: 18px; }

/* Zwei Spalten: Text und ein echter Bildschirm der App */
.paar {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.paar--gedreht > .paar__bild { order: -1; }

.paar__bild {
  justify-self: center;
  width: min(320px, 78vw);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--linie);
  box-shadow: 0 22px 60px -28px rgba(30, 42, 38, .4);
}
.paar__bild img { width: 100%; height: auto; }

/* Nutzenpunkte als Haarlinien-Liste, nicht als Kacheln */
.punkte { list-style: none; padding: 0; margin: clamp(26px, 3vw, 38px) 0 0; }
.punkte li {
  padding-block: 18px;
  border-top: 1px solid var(--linie);
}
.punkte li:last-child { border-bottom: 1px solid var(--linie); }
.punkte b {
  display: block; font-size: var(--t-basis); font-weight: 600; letter-spacing: -.015em;
}
.punkte span {
  display: block; margin-top: 5px;
  font-size: var(--t-klein); line-height: 1.55; color: var(--tinte-2);
  max-width: 44ch;
}

/* ==========================================================================
   Dunkles Band — randlos ueber die volle Breite, keine Karte
   ========================================================================== */
.band-dunkel {
  background: var(--dunkel); color: #E7EFEB;
  padding-block: clamp(64px, 10vw, 120px);
}
.band-dunkel h2 { color: #fff; max-width: 18ch; margin-top: 16px; }

.band-dunkel__liste {
  list-style: none; padding: 0; margin: clamp(34px, 5vw, 56px) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.band-dunkel__liste li {
  padding: 24px clamp(16px, 2vw, 32px) 0 0;
  border-top: 1px solid rgba(231, 239, 235, .18);
}
.band-dunkel__liste b {
  display: block; font-size: var(--t-basis); font-weight: 600; color: #fff;
  letter-spacing: -.015em;
}
.band-dunkel__liste span {
  display: block; margin-top: 7px;
  font-size: var(--t-klein); line-height: 1.6; color: rgba(231, 239, 235, .62);
}
.band-dunkel__schluss {
  margin-top: clamp(38px, 5vw, 60px);
  color: #fff;
}
.band-dunkel__schluss em { font-style: normal; color: var(--marke-hell); }

/* ==========================================================================
   Ehrlicher Zwischenstand — zwei Listen, keine Kaesten
   ========================================================================== */
.stand {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  margin-top: clamp(38px, 5vw, 56px);
}
.stand h3 {
  font-size: var(--t-basis); font-weight: 600; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 16px; border-bottom: 1px solid var(--linie);
}
.stand ul { list-style: none; padding: 0; margin: 0; }
.stand li {
  display: flex; gap: 12px; align-items: flex-start;
  padding-block: 15px;
  border-bottom: 1px solid var(--linie);
  font-size: var(--t-klein); line-height: 1.55; color: var(--tinte-2);
}
.stand li svg { flex: none; margin-top: 3px; }
.stand--offen li { color: var(--tinte-3); }
.stand__hinweis {
  margin-top: 22px; font-size: var(--t-klein); line-height: 1.6; color: var(--tinte-3);
}

/* Drei pruefbare Aussagen, in einer Zeile, ohne Kacheln */
.aussagen {
  list-style: none; padding: 0;
  margin: clamp(40px, 6vw, 64px) 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  padding-top: 26px; border-top: 1px solid var(--linie);
}
.aussagen li {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--t-klein); font-weight: 500; color: var(--tinte-2);
}

/* ==========================================================================
   Peters Absatz
   ========================================================================== */
.stimme { max-width: 44rem; }
.stimme blockquote {
  margin: 18px 0 0;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem);
  line-height: 1.45; letter-spacing: -.02em;
  color: var(--tinte);
}
.stimme__wer {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--linie);
  font-size: var(--t-klein); color: var(--tinte-2);
}
.stimme__wer b { color: var(--tinte); font-weight: 600; }

/* ==========================================================================
   Fragen
   ========================================================================== */
.fragen { max-width: 46rem; margin-top: clamp(34px, 5vw, 48px); }
.frage { border-top: 1px solid var(--linie); }
.frage:last-of-type { border-bottom: 1px solid var(--linie); }
.frage summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 2px;
  font-size: var(--t-fliess); font-weight: 500; letter-spacing: -.015em;
  transition: color 200ms ease;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; flex: none;
  width: 11px; height: 11px;
  border-right: 1.6px solid var(--tinte-3);
  border-bottom: 1.6px solid var(--tinte-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 220ms var(--ease-out);
}
.frage[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
@media (hover: hover) and (pointer: fine) {
  .frage summary:hover { color: var(--marke-text); }
}
.frage__text {
  padding: 0 2px 26px; font-size: var(--t-basis); line-height: 1.68;
  color: var(--tinte-2); max-width: 62ch;
}

/* ==========================================================================
   Vormerken
   ========================================================================== */
/* ==========================================================================
   Schlussabschnitt — hier kehrt das Licht zurueck

   ⚠️ Der Befund, der dahintersteht: ab Abschnitt zwei kamen Licht, Koralle und
   Maske nie wieder. Die ersten 900 px waren unverwechselbar, alles danach war
   weisses Papier mit Haarlinien — technisch sauber und austauschbar.

   Die Antwort ist bewusst KEINE Wiederholung ueberall. Die Seite oeffnet und
   schliesst mit derselben Geste, dazwischen bleibt es bei Papier. Zweimal ist
   eine Klammer; fuenfmal waere ein Muster.

   ⚠️ Und das Licht ist hier viel schwaecher als in der Buehne. Das ist kein
   Zoegern, sondern gerechnet: oben traegt es eine 4,2-rem-Ueberschrift in
   #1E2A26 (9,9:1 selbst am dunkelsten Rand), hier steht kleiner grauer Text.
   Der aeusserste Halt #FBEFE6 haelt --tinte-3 (#656F69) noch auf 4,61:1;
   ein Schritt dunkler (#F7DFCE) faellt auf 4,07:1 und damit durch.
   ========================================================================== */
.schluss-band {
  position: relative;
  background:
    radial-gradient(130% 95% at 50% 22%,
      #FFFFFF 0%, #FDFCFA 26%, #F7FBF8 50%, #EAF4EE 74%, #FBEFE6 100%),
    var(--papier-2);
}

/* Die Lichtkante: Koralle nach Mint, zwei Pixel, an genau dieser einen Stelle.
   Dasselbe Farbpaar wie im Zahlenstreifen oben — und der einzige Ort auf der
   Seite, an dem eine Linie Farbe traegt. Als Flaeche braucht sie 3:1, nicht
   4,5:1; beide Toene liegen deutlich darueber. */
.schluss-band::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--koralle) 0%, var(--marke) 100%);
}

/* Der Fuss steht auf Weiss. Ohne diese Zeile bricht die Farbe des
   Schlussabschnitts an seiner Oberkante hart ab. */
.fuss { background: var(--papier); }

.schritte {
  list-style: none; padding: 0;
  margin: clamp(30px, 4vw, 44px) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 40px);
}
.schritte li { border-top: 1px solid var(--linie-stark); padding-top: 18px; }
.schritte b {
  display: block; font-size: var(--t-basis); font-weight: 600; letter-spacing: -.015em;
}
.schritte span {
  display: block; margin-top: 6px;
  font-size: var(--t-klein); line-height: 1.55; color: var(--tinte-2);
}
.schritte .nr {
  display: block; font-size: var(--t-meta); font-weight: 600; color: var(--marke-text);
  font-variant-numeric: tabular-nums; margin-bottom: 8px;
  letter-spacing: .08em;
}

.formular {
  margin-top: clamp(34px, 5vw, 52px);
  max-width: 30rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  padding: clamp(22px, 3vw, 32px);
}
.feld { display: block; margin-bottom: 16px; }
.feld > span {
  display: block; font-size: var(--t-meta); font-weight: 600; margin-bottom: 7px;
  color: var(--tinte);
}
.feld input[type="text"],
.feld input[type="email"] {
  width: 100%; height: 50px; padding: 0 15px;
  font-family: inherit; font-size: var(--t-basis); color: var(--tinte);
  background: var(--papier); border: 1px solid var(--linie-stark);
  border-radius: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.feld input::placeholder { color: var(--tinte-3); }
.feld input:focus {
  outline: none;
  border-color: var(--tinte);
  box-shadow: 0 0 0 3px rgba(30, 42, 38, .1);
}
.feld input[aria-invalid="true"] {
  border-color: var(--koralle-text);
  box-shadow: 0 0 0 3px rgba(198, 96, 58, .12);
}
/* Im Kontrastmodus von Windows werden Schatten und eigene Farben verworfen.
   Ohne diese Regel haette das Feld dort gar keine sichtbare Fokusanzeige. */
@media (forced-colors: active) {
  .feld input:focus { outline: 3px solid; outline-offset: 2px; }
}

/* Rollenwahl als Segment. Echte Radios darunter, damit Tastatur und
   Vorlesesoftware den Zustand kennen. */
.rolle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--linie-stark);
}
.rolle label {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 44px; cursor: pointer;
  font-size: var(--t-klein); font-weight: 500; color: var(--tinte-2);
  transition: background-color 180ms ease, color 180ms ease;
}
.rolle label + label { border-left: 1px solid var(--linie-stark); }
.rolle input { position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer; }
.rolle label:has(input:checked) { background: var(--tinte); color: #fff; }
.rolle input:focus-visible + span {
  outline: 2px solid var(--tinte); outline-offset: 4px;
}

.einwilligung {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: var(--t-meta); line-height: 1.5; color: var(--tinte-2);
  margin-top: 4px;
}
.einwilligung input {
  width: 20px; height: 20px; flex: none; margin: 1px 0 0;
  accent-color: var(--tinte); cursor: pointer;
}

/* Honigtopf: fuer Menschen unsichtbar, fuer einfache Skripte verlockend.
   display:none waere zu offensichtlich und wird von Bots uebersprungen. */
.honigtopf {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.formular .knopf { margin-top: 20px; }
.formular__fuss {
  font-size: var(--t-meta); color: var(--tinte-3); margin-top: 14px; line-height: 1.55;
}

/* Voller 1-px-Rahmen statt einer 3-px-Farbkante links: Die einseitige dicke
   Kante an Hinweisen ist eines der bekanntesten Muster generierter
   Oberflaechen — und der Detektor meldet sie zu Recht. */
.meldung {
  padding: 13px 15px; font-size: var(--t-klein); line-height: 1.5;
  margin-bottom: 18px; border: 1px solid;
}
.meldung--fehler { background: rgba(198, 96, 58, .08); color: #8E3F1E; border-color: var(--koralle-text); }
.meldung--gut { background: rgba(63, 190, 149, .1); color: #1B6B53; border-color: var(--marke); }

.geschafft { padding: 8px 0; }
.geschafft__zeichen {
  width: 44px; height: 44px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: var(--marke); color: #fff;
}
.geschafft b {
  display: block; font-size: var(--t-lead); font-weight: 600; letter-spacing: -.02em;
}
.geschafft p {
  font-size: var(--t-klein); color: var(--tinte-2); margin-top: 9px; line-height: 1.6;
}

/* Schmale Fassung fuer den ersten Bildschirm. Der normale Block ist rund
   140 px hoch, das Formular dort 135 — waechst er, waechst die Buehne, und
   `overflow: hidden` schneidet den Zahlenstreifen unten ab. */
.geschafft--schmal {
  display: grid; grid-template-columns: auto 1fr; gap: 0 14px;
  align-items: center; text-align: left;
  max-width: 30rem; margin-inline: auto;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .9);
  padding: 14px 16px;
}
.geschafft--schmal .geschafft__zeichen {
  grid-row: span 2; margin-bottom: 0; width: 36px; height: 36px;
}
.geschafft--schmal b { font-size: var(--t-basis); }
.geschafft--schmal p { margin-top: 2px; font-size: var(--t-meta); }

/* ==========================================================================
   Fusszeile
   ========================================================================== */
.fuss {
  border-top: 1px solid var(--linie);
  padding-block: clamp(44px, 6vw, 64px) 40px;
}
.fuss__oben {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 44px; flex-wrap: wrap;
}
.fuss__wort { max-width: 20rem; }
.fuss__wort p { font-size: var(--t-klein); line-height: 1.6; color: var(--tinte-2); margin-top: 14px; }
.fuss__spalten { display: flex; gap: clamp(32px, 5vw, 64px); flex-wrap: wrap; }
.fuss__spalte h3 {
  font-size: var(--t-mikro); font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinte-3);
}
.fuss__spalte ul {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: flex; flex-direction: column; gap: 2px;
}
/* Abstand als Innenabstand statt als Luecke: der sichtbare Rhythmus bleibt,
   das Tippziel waechst von 18 auf 26 px. */
.fuss__spalte a {
  font-size: var(--t-klein); color: var(--tinte-2); font-weight: 400;
  display: inline-block; padding-block: 4px;
}
.fuss__unten {
  margin-top: clamp(36px, 5vw, 52px); padding-top: 24px;
  border-top: 1px solid var(--linie);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--t-meta); color: var(--tinte-3);
}
.fuss__unten a { color: var(--tinte-3); }

/* ==========================================================================
   Textseiten (Impressum, Datenschutz) und Antwortseiten der PHP-Dateien
   ========================================================================== */
.text-seite { max-width: 46rem; margin: 0 auto; padding-block: 120px 96px; }
.text-seite h1 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.03em; line-height: 1.1;
}
.text-seite h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.3rem, 2.6vw, 1.65rem); letter-spacing: -.02em;
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--linie);
}
.text-seite h3 {
  font-size: var(--t-basis); font-weight: 600; letter-spacing: -.01em; margin-top: 28px;
}
.text-seite p, .text-seite li {
  font-size: var(--t-basis); line-height: 1.72; color: var(--tinte-2); margin-top: 12px;
}
.text-seite ul { padding-left: 20px; margin: 0; }
.text-seite li { margin-top: 8px; }
.text-seite address { font-style: normal; }
.text-seite .zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-klein); font-weight: 500; margin-bottom: 32px; color: var(--tinte-2);
}

/* Einzelne Antwortseite (Bestaetigung, Fehler) — mittig, ruhig */
.mittig-seite {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--papier-2);
}
.mittig-seite .karte {
  width: 100%; max-width: 27rem;
  background: var(--papier); border: 1px solid var(--linie);
  padding: 36px 30px;
}
.mittig-seite .karte h1 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 1.7rem; letter-spacing: -.025em; line-height: 1.2;
}
.mittig-seite .karte p {
  font-size: var(--t-basis); line-height: 1.65; color: var(--tinte-2); margin-top: 12px;
}

/* ==========================================================================
   Einblenden beim Scrollen

   ⚠️ DIE REGEL: `.zeigen` steht an JEDER Abschnitts-Ueberschrift unterhalb des
   ersten Bildschirms — und sonst nirgends. Vorher trugen es zwei von sieben,
   ohne dass ein Unterschied dahinterstand: mal fuhr eine Ueberschrift herein,
   mal stand sie schon da. Das liest sich nicht als Zurueckhaltung, sondern als
   Versehen.

   Die H1 im ersten Bildschirm bekommt es bewusst NICHT. Sie ist beim Laden
   schon sichtbar; sie einzublenden hiesse, den ersten Eindruck zu verzoegern.

   Ohne JavaScript ist alles sichtbar — die Klasse `.js` setzt erst das Skript.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .zeigen {
    opacity: 0; transform: translateY(12px);
    transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  }
  .js .zeigen.da { opacity: 1; transform: none; }
}

/* ⚠️ Beim Drucken loest kein IntersectionObserver aus. Ohne diese Zeile fehlen
   auf dem Papier genau die Ueberschriften — und das sieht niemand, bevor er
   druckt. */
@media print {
  .js .zeigen { opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .knopf, .frage summary::after, .weg { transition: none; }
}

/* ==========================================================================
   Schmalere Bildschirme
   ========================================================================== */
@media (max-width: 900px) {
  .wege { grid-template-columns: 1fr; gap: 0; }
  .paar, .paar--gedreht { grid-template-columns: 1fr; }
  .paar--gedreht > .paar__bild { order: 0; }
  .band-dunkel__liste { grid-template-columns: 1fr; }
  .band-dunkel__liste li { padding-right: 0; }
  .stand { grid-template-columns: 1fr; }
  .schritte { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* 14 Versalien mit 0,12 em Sperrung passen bei 320 px nicht in eine
     Drittelspalte. Enger setzen, und das weiche Trennzeichen im Markup
     erlaubt zusaetzlich den Umbruch. */
  .streifen__feld span { font-size: 9.5px; letter-spacing: .06em; }
  .streifen__feld { padding-inline: 6px; }
}

@media (max-width: 720px) {
  .kopf__nav { display: none; }
  .kopf > .huelle { gap: 14px; justify-content: space-between; }
  /* Auf dem Handy ist der erste Bildschirm hoeher als das Fenster — das ist
     richtig so: Ueberschrift, Satz und Anmeldung stehen oben, die App
     darunter. */
  .buehne { min-height: 0; }
  /* Der Hero ist hier ueber 1300 px hoch. Eine Radiale mit 85 % Radius legte
     das Koralle-Ende dann ueber die halbe Buehne — also flacher und hoeher
     ansetzen, damit das Licht wieder hinter der Ueberschrift steht. */
  .buehne {
    background:
      radial-gradient(150% 46% at 50% 15%,
        #FFFFFF 0%, #FCFBF8 22%, #F0F7F3 46%, #DCEFE5 68%,
        #F6DECD 88%, #F2C4A6 100%),
      #E7F3EC;
  }
  .buehne__schirm { height: auto; aspect-ratio: 640 / 760; margin-top: 10px; }
  /* ⚠️ Der lange Auslauf gehoert zum ueberlappenden Streifen. Hier steht der
     Streifen UNTER der Aufnahme und verdeckt nichts — die weiche Aufloesung
     waere reiner Verlust an Produkt, und der Kontrastgrund entfaellt. */
  .buehne__schirm {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
  }
  /* Feld und Knopf untereinander: nebeneinander bleiben von der Adresse auf
     einem 320er-Schirm noch acht Zeichen sichtbar. */
  .buehne__leiste { flex-direction: column; }
  .buehne__leiste input { height: 52px; }
  .buehne__leiste .knopf { width: 100%; border-top: 1px solid var(--linie-stark); }
  /* Der Hero flieszt hier ueber die Fensterhoehe hinaus. Ein absolut
     verankerter Streifen laege dann irgendwo im Bild — also zurueck in den
     Fluss, direkt unter die Aufnahme. */
  .streifen {
    position: static; width: auto; margin: 10px 0 0;
    padding-inline: 0; bottom: auto;
  }
  .buehne > .streifen { margin-inline: var(--luft); }
}

/* ==========================================================================
   Coming-Soon-Seite (`body.bald`)

   Portiert aus dem Entwurf `Coming Soon.dc.html` (Claude-Design-Projekt) —
   aber Vanilla statt Komponentensprache, und mit drei bewussten Abweichungen:

   1. **Keine Google Fonts.** Der Entwurf laedt Figtree und Newsreader ueber
      fonts.googleapis.com. Das uebertraegt die IP jedes Besuchers in die USA.
      Hier stehen die beiden selbst gehosteten Schnitte, die es ohnehin gibt.
   2. **Keine erfundenen Profile.** Der Entwurf zeigt drei Sozial-Symbole und
      „@deinprofil" — es gibt keine. Links, die auf `#` zeigen, sind
      Sackgassen; sie sind ersatzlos raus.
   3. **Rechtslinks ergaenzt.** Impressum und Datenschutz muessen von jeder
      Seite aus erreichbar sein. Im Entwurf fehlen sie.

   ⚠️ Und die Farben sind nicht die des Entwurfs. Dort steht der Absatz in
   #5D6C64 auf einem Verlauf, der bis #F7C7AA laeuft — das sind **3,61:1**.
   Der Eyebrow in #2A9E7A kommt selbst auf der hellsten Stelle nur auf 3,14:1
   und faellt damit ueberall durch. Gerechnet, nicht geschaetzt: die Toene hier
   stammen aus den Token, und der Verlauf haelt die Koralle in der Ecke, wo das
   Geraet liegt und kein Text steht.
   ========================================================================== */

body.bald { background: var(--papier-2); }

.bald__buehne {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  /* Der Verlauf des Entwurfs, aber am Koralle-Ende deutlich aufgehellt und
     nach hinten geschoben: der Text sitzt links in der oberen Haelfte, die
     Farbe gehoert in die Ecke unten rechts. */
  background:
    linear-gradient(158deg,
      #E4F2EA 0%, #F1F7F3 18%, #FCFAF6 44%, #FBF2EA 72%, #F6DCC8 100%),
    var(--papier-2);
}

/* --- Licht und Baender ---------------------------------------------------- */

.bald__licht {
  position: absolute; border-radius: 50%;
  filter: blur(30px); pointer-events: none;
}
.bald__licht--mint {
  width: 760px; height: 760px; left: -16%; top: -26%;
  background: radial-gradient(circle, rgba(150, 226, 196, .34), transparent 66%);
  animation: baldTreiben 26s ease-in-out infinite;
}
.bald__licht--koralle {
  width: 700px; height: 700px; right: -14%; bottom: -24%;
  background: radial-gradient(circle, rgba(249, 168, 130, .26), transparent 66%);
  animation: baldTreiben 32s ease-in-out infinite reverse;
}
.bald__band {
  position: absolute; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 62%);
  filter: blur(18px);
}
.bald__band--1 { left: -14%; top: -8%; width: 46%; height: 78%; animation: baldSchleife 18s ease-in-out infinite; }
.bald__band--2 { left: -10%; top: 2%; width: 34%; height: 70%; filter: blur(22px); animation: baldSchleife 24s ease-in-out infinite reverse; }

@keyframes baldTreiben {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(44px, -38px, 0) scale(1.12); }
}
@keyframes baldSchleife {
  0%, 100% { opacity: .5; transform: translateX(0) skewX(-18deg); }
  50%      { opacity: .85; transform: translateX(38px) skewX(-18deg); }
}
@keyframes baldSchweben {
  0%, 100% { transform: rotate(-31deg) translate3d(0, 0, 0); }
  50%      { transform: rotate(-31deg) translate3d(-10px, -16px, 0); }
}
@keyframes baldGlanz {
  0%        { transform: translateY(-60%); }
  55%, 100% { transform: translateY(320%); }
}
@keyframes baldAuf {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes baldWort {
  from { opacity: 0; transform: translateY(24px) rotate(1.6deg); }
  to   { opacity: 1; transform: none; }
}

/* --- Das Geraet ----------------------------------------------------------- */

.bald__geraet {
  position: absolute; right: -7%; bottom: -18%;
  /* ⚠️ Der Entwurf setzt bottom: -30%. Bei 900 px Fensterhoehe schneidet der
     untere Rand dann genau durch Symbol und App-Namen — es sieht aus, als
     waere das Bild abgerutscht, nicht als waere das Geraet angeschnitten.
     -18 % laesst den Block ganz stehen und schneidet dort, wo nichts ist. */
  width: 400px; height: 780px;
  animation: baldSchweben 11s ease-in-out infinite;
  pointer-events: none;
}
.bald__rahmen {
  width: 100%; height: 100%; border-radius: 74px; padding: 10px;
  background: linear-gradient(150deg, #FFFFFF 0%, #EAF6F0 26%, #CFEFE0 48%, #FBE0CB 76%, #FFFFFF 100%);
  box-shadow: 0 46px 110px rgba(20, 35, 28, .26);
}
.bald__schirm {
  position: relative; width: 100%; height: 100%; border-radius: 64px;
  background: linear-gradient(168deg, #F3FAF6, #FCFBF9 46%, #FDF1E8);
  overflow: hidden; padding: 44px 40px 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.bald__insel {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 32px; border-radius: 999px; background: var(--tinte);
}
.bald__glanz {
  position: absolute; left: -40%; top: 0; width: 180%; height: 130px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: baldGlanz 9s ease-in-out infinite;
}
.bald__uhr {
  position: relative; text-align: center; margin-top: 60px;
  font-size: 44px; font-weight: 500; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--tinte);
}
.bald__app {
  position: relative; display: flex; flex-direction: column;
  align-items: center; margin-top: 96px;
}
.bald__symbol {
  position: relative;
  width: 124px; height: 124px; border-radius: 30px;
  background: linear-gradient(150deg, #BEE9D5, #8FDCBE 46%, #FBD3B6);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 38px rgba(20, 35, 28, .18);
}
.bald__punkt {
  position: absolute; top: -12px; right: -12px;
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px;
  background: var(--koralle); border: 4px solid #FCFBF9;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.bald__appname {
  margin-top: 16px; font-size: var(--t-lead); font-weight: 500;
  color: var(--tinte-2); letter-spacing: .01em;
}

/* --- Inhalt --------------------------------------------------------------- */

.bald__inhalt {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column;
  width: 100%; padding: clamp(28px, 4vw, 44px) var(--luft);
}

.bald__marke {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  animation: baldAuf .6s both;
}
.bald__zeichen {
  width: 40px; height: 40px; border-radius: 13px;
  background: linear-gradient(140deg, #A9E5CC, #3FBE95 58%, #F4A177);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.bald__wort {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(24px, 3vw, 29px); font-weight: 400;
  letter-spacing: -.015em; color: var(--tinte);
}

.bald__mitte {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  max-width: 40rem; padding: clamp(32px, 6vw, 56px) 0 0;
}

.bald__ueber {
  margin: 0;
  font-size: var(--t-klein); font-weight: 600; letter-spacing: .32em;
  text-transform: uppercase;
  /* ⚠️ --marke-text, nicht --marke. #2A9E7A aus dem Entwurf kommt hier auf
     3,14:1 und ist als Text zu hell. */
  color: var(--marke-text);
  animation: baldAuf .7s .1s both;
}

.bald__titel {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(52px, 8.4vw, 116px);
  line-height: .94; font-weight: 400; letter-spacing: -.035em;
  color: var(--tinte);
  margin: 16px 0 0;
  animation: baldWort .9s var(--ease-out) .12s both;
}
.bald__titel em {
  font-style: italic; color: var(--marke-text);
}

.bald__satz {
  font-size: var(--t-fliess); line-height: 1.6; color: var(--tinte-2);
  margin: 24px 0 0; max-width: 32rem; text-wrap: pretty;
  animation: baldAuf .8s .34s both;
}

/* --- Formular ------------------------------------------------------------- */

.bald__form {
  max-width: 30rem; margin-top: clamp(26px, 4vw, 34px);
  animation: baldAuf .8s .44s both;
}
.bald__leiste {
  display: flex; align-items: stretch;
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  box-shadow: 0 14px 34px -22px rgba(30, 42, 38, .5);
}
.bald__leiste input {
  flex: 1; min-width: 0; height: 56px; padding: 0 18px;
  border: 0; background: transparent;
  font-family: inherit; font-size: var(--t-basis); color: var(--tinte);
}
.bald__leiste input::placeholder { color: var(--tinte-3); }
.bald__leiste input:focus { outline: none; }
.bald__leiste:focus-within { outline: 2px solid var(--tinte); outline-offset: 3px; }
@media (forced-colors: active) {
  .bald__leiste:focus-within { outline: 3px solid; outline-offset: 2px; }
}
.bald__leiste .knopf { flex: none; height: 56px; padding: 0 26px; }
.bald__einwilligung { margin-top: 14px; }

/* --- Fuss ----------------------------------------------------------------- */

.bald__fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 28px; flex-wrap: wrap;
  padding-top: clamp(24px, 4vw, 36px);
  animation: baldAuf .8s .56s both;
}
.bald__fuss-text, .bald__ort { margin: 0; font-size: var(--t-klein); }
/* ⚠️ Kein Mint. Auf schmalen Schirmen rutscht der Fuss auf das
   Koralle-Licht, und --marke-text kommt dort nur auf 4,07:1. Gemessen am
   gerenderten Bild, nicht am Verlaufs-Halt. Der wichtigste Link der Seite
   traegt sein Gewicht deshalb ueber Schrift und Unterstrich, nicht ueber
   Farbe — das haelt ueberall. */
.bald__fuss-text a {
  color: var(--tinte); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.bald__fuss-text a:hover { color: var(--marke-text); }
.bald__recht { display: flex; gap: 20px; font-size: var(--t-klein); }
.bald__recht a { color: var(--tinte-2); text-decoration: underline; text-underline-offset: 3px; }
.bald__recht a:hover { color: var(--marke-text); }
.bald__ort {
  font-family: 'Newsreader', Georgia, serif; font-style: italic;
  color: var(--tinte-2);
}

/* --- Schmale Bildschirme -------------------------------------------------- */

@media (max-width: 900px) {
  /* Das Geraet ist hier kein Motiv mehr, sondern ein Fleck hinter dem Text. */
  .bald__geraet { display: none; }
  .bald__mitte { max-width: none; }
}
@media (max-width: 560px) {
  .bald__leiste { flex-direction: column; }
  .bald__leiste .knopf { width: 100%; }
  .bald__fuss { flex-direction: column; align-items: flex-start; }
}

/* --- Bewegung reduzieren -------------------------------------------------- */

/* ⚠️ Fuenf Endlos-Animationen. Ohne diesen Block laufen sie auch dort weiter,
   wo jemand ausdruecklich Ruhe eingestellt hat — und das ist die eine
   Einstellung, bei der es um Uebelkeit geht, nicht um Geschmack. */
@media (prefers-reduced-motion: reduce) {
  .bald__licht, .bald__band, .bald__geraet, .bald__glanz,
  .bald__marke, .bald__mitte > *, .bald__form, .bald__fuss {
    animation: none !important;
  }
}