/* =========================================================================
   Neugier-Masterclass — Landingpage
   Eine Datei für alles Gestalterische. Reihenfolge: Tokens, Grundlagen,
   Bausteine, Abschnitte (in Seitenreihenfolge), Bewegung.
   ========================================================================= */

/* --- 0. Schriften ------------------------------------------------------- */
/* Selbst gehostet, kein Aufruf bei Google. Beide stehen unter der
   SIL Open Font License 1.1 und dürfen so ausgeliefert werden.
   Archivo © Omnibus-Type — Grotesk aus der Tradition amerikanischer
   Anzeigenschriften. Latin-Schnitt, deckt Umlaute und ß ab.

   Kniff: Archivo Black wird unter demselben Familiennamen als Gewicht 800–900
   eingetragen. Dadurch greift jede Regel mit font-weight: 800 automatisch zur
   schwarzen Datei, alles bei 400 bis 700 zur variablen. Eine Familie, zwei
   Dateien, keine Sonderregeln im restlichen Stylesheet. */

@font-face {
  font-family: "Archivo";
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/archivo-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Archivo";
  font-style: normal; font-weight: 800 900; font-display: swap;
  src: url("fonts/archivo-black.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Farbrollen. Grundlage ist die CLAUDE.md im Projektordner. Abweichung, mit
     Tim abgestimmt: Der Grund ist von warmem Creme auf neutrales Papier gedreht
     und der Zündfunke von Terrakotta auf ein satteres Zinnober. Warmes Creme
     plus Terrakotta ist die Standardpalette KI-generierter Oberflächen; die
     Rollen bleiben dieselben, nur die Werte sind entwärmt. */
  --zuendfunke: #E03A26;   /* Neugier: Fragen, Akzente, Flächen */
  --zuendfunke-tief: #C22A18; /* dieselbe Rolle, kontraststark für Buttons und Kleintext (5,2:1) */
  --zuendfunke-feld: #A61F10; /* dieselbe Rolle als ganze Fläche, trägt weissen Text (7,4:1) */
  --bernstein: #E9A03B;    /* Hervorhebungen, Markierungen */
  --tinte: #17181A;        /* Text, Grafiken — neutral statt schwarzbraun */
  --tinte-weich: #55585C;  /* Nebentext, 7:1 auf Papier */
  --papier: #F5F5F4;       /* Grundfläche, neutral */
  --papier-tief: #E7E7E4;  /* abgesetzte Bahnen */
  /* Bernstein als heller Wasch, ergänzt am 17.08.2026 für die Bahn #wirkung.
     Keine neue Farbrolle, sondern die Rolle Bernstein als Fläche: Der Abschnitt
     mit dem Nutzen soll warm wirken, ohne Bernstein grossflächig zu sättigen. */
  --bernstein-hell: #F7EFE1;
  --routine: #6E8798;      /* die alte Welt, nur Grafik und Große Flächen */
  --routine-tief: #4A5F6E; /* dieselbe Rolle, kontraststark hinter weißem Text */
  --wirkung: #2F7D6B;      /* ausschliesslich belegte Ergebnisse */

  /* Sticky-Töne — ausschliesslich im Formen-Raster */
  --sticky-1: #FFF6B6;
  --sticky-2: #FFD9CC;
  --sticky-3: #D6F0DE;
  --sticky-4: #E3DDFB;
  --sticky-5: #FFE7C2;

  /* Angehoben am 07.08.2026 von #DBDBD6. Der alte Wert kam auf Papier nur auf
     1,27:1 und war praktisch unsichtbar — die Zitatkarten in #beleg stehen auf
     Papier und hatten damit keine Kante. */
  --linie: #BFBFB9;
  --tape: rgba(233, 160, 59, .38);

  --display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --text: "Archivo", "Segoe UI", system-ui, sans-serif;

  /* Ein einziger Abstandsrhythmus */
  --s1: .5rem;  --s2: .875rem; --s3: 1.25rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4.5rem;  --s7: 7rem;
  --bahn: min(1180px, 100% - 2.5rem);
  --schmal: min(64ch, 100% - 2.5rem);
}

/* --- 2. Grundlagen ------------------------------------------------------ */

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

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

body {
  margin: 0;
  background-color: var(--papier);
  /* Papierfaser: winziges Rauschen, inline erzeugt, keine Bilddatei */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  color: var(--tinte);
  font-family: var(--text);
  font-size: clamp(1.02rem, .96rem + .3vw, 1.15rem);
  line-height: 1.62;
  overflow-x: hidden;
  /* Die mitlaufende Leiste steht fest am unteren Rand und verdeckte auf kurzen
     Bildschirmen den letzten Inhalt. */
  padding-bottom: 4.5rem;
}

img, svg { max-width: 100%; }

/* iOS-Safari rundet Textfelder und Knöpfe von sich aus ab und legt eigene
   Innenschatten darüber. Beide Formulare dieser Seite sind eckig gedacht,
   deshalb hier einmal zurückgesetzt statt an jeder einzelnen Regel. */
input, textarea, button { -webkit-appearance: none; appearance: none; border-radius: 0; }

/* Gewicht 800 greift zu Archivo Black. Die Schrift läuft kompakter als eine
   Displayschrift mit Eigenwilligkeiten, deshalb können die Grade gross sein:
   Der Mut kommt hier aus Gewicht und Grösse, nicht aus schrägen Buchstaben. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0 0 var(--s3);
}

h1 { font-size: clamp(2.1rem, 1.2rem + 4.2vw, 4.4rem); }
h2 { font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.4rem); line-height: 1.06; }
h3 { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); letter-spacing: -.02em; line-height: 1.12; }

/* Eine Größe je Ebene, festgelegt am 17.08.2026. Bis dahin liefen #formen und
   #tag-eins auf einer eigenen, deutlich größeren H2-Staffel, und H3 trat in vier
   verschiedenen Graden auf. Die Betonung eines Abschnitts kommt jetzt aus der
   Fläche — Tinte, Papier-tief, Zündfunke —, nicht mehr aus dem Schriftgrad.
   Wer einem Abschnitt wieder eine eigene Größe geben will, hebelt damit die
   Einheitlichkeit aus; dann bitte für alle gleichrangigen Abschnitte mitmachen. */

p { margin: 0 0 var(--s3); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--zuendfunke-tief); }

:focus-visible {
  outline: 3px solid var(--zuendfunke-tief);
  outline-offset: 3px;
  border-radius: 2px;
}

.nur-screenreader {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Der Sprunglink muss sichtbar werden, sobald er den Fokus hat. */
a.nur-screenreader:focus {
  position: fixed; top: .75rem; left: .75rem;
  width: auto; height: auto; clip: auto; z-index: 60;
  background: var(--tinte); color: var(--papier);
  font-family: var(--display); font-weight: 700;
  padding: .8rem 1.2rem; border-radius: 2px;
}

.bahn { width: var(--bahn); margin-inline: auto; }
.schmal { width: var(--schmal); margin-inline: auto; }
/* Textspalte innerhalb einer Bahn: linksbündig, begrenzte Zeilenlänge */
.spalte { width: 100%; max-width: 62ch; }
.spalte--luft { margin-top: var(--s5); }

section { padding-block: var(--s6); position: relative; }
@media (min-width: 900px) { section { padding-block: var(--s7); } }

/* Brücke: der letzte Satz eines Abschnitts, der zum nächsten übergibt.
   Trägt die Leserin durch die Seite, statt sie am Abschnittsende abzusetzen. */
.bruecke {
  margin: var(--s5) 0 0;
  padding-top: var(--s3);
  border-top: 2px solid var(--zuendfunke);
  max-width: 46ch;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.05rem, 1rem + .45vw, 1.35rem);
  letter-spacing: -.02em; line-height: 1.25;
  color: inherit;
}

.sektionsfrage { margin-bottom: var(--s5); }
.sektionsfrage p { color: var(--tinte-weich); }

/* --- 2b. Mitlaufende Leiste --------------------------------------------- */

.leiste {
  position: fixed; inset: auto 0 0 0;
  z-index: 40;
  background: var(--tinte);
  color: var(--papier);
  padding-block: .7rem;
  box-shadow: 0 -8px 24px -14px rgba(0,0,0,.8);
}
.js .leiste { transform: translateY(110%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.js .leiste[data-sichtbar="ja"] { transform: none; }

.leiste-inhalt {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .6rem var(--s4);
}
.leiste-fakten {
  margin: 0; max-width: none;
  display: grid; gap: .1rem;
}
.leiste-nutzen {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(.95rem, .9rem + .3vw, 1.15rem); letter-spacing: -.02em;
  color: var(--papier);
}
.leiste-daten { font-size: .88rem; color: #A69C90; }
.leiste .knopf { padding: .7rem 1.2rem; font-size: 1rem; box-shadow: none; }

@media (max-width: 560px) {
  /* Auf dem Handy zählt der Knopf. Der Nutzensatz kürzt sich, die Daten fallen weg. */
  .leiste-inhalt { flex-wrap: nowrap; gap: .8rem; }
  .leiste-nutzen { font-size: .9rem; }
  .leiste-daten { display: none; }
  .leiste .knopf { flex: none; padding: .65rem 1rem; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .leiste { transition: none; }
}
@media print { .leiste { display: none; } }

/* --- 3. Bausteine ------------------------------------------------------- */

/* Knopf */
.knopf {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--zuendfunke-tief);
  color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 1.08rem;
  letter-spacing: -.01em;
  padding: .95rem 1.6rem;
  border: 0; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(23,24,26, .55);
  transition: background-color .18s ease, transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
}
.knopf:hover { background: #9E3715; transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(23,24,26,.5); }
.knopf:active { transform: translateY(0); }
.knopf svg { width: 1.1em; height: 1.1em; flex: none; }

/* Zweite Aktion: gleiche Form, ruhige Farbe. Orange bleibt der Anmeldung
   vorbehalten, damit im Kopf nicht zwei Hauptknöpfe konkurrieren. */
.knopf--dunkel {
  background: var(--tinte);
  box-shadow: 0 6px 18px -8px rgba(23,24,26,.5);
}
.knopf--dunkel:hover { background: #34302C; }

.knopf--leise {
  background: transparent; color: var(--tinte);
  box-shadow: none;
  border-bottom: 2px solid var(--zuendfunke);
  border-radius: 0; padding: .5rem .1rem;
}
.knopf--leise:hover { background: transparent; color: var(--zuendfunke-tief); transform: translateY(-2px); }


/* Bildplatz — überall gleich, damit die Fotos später nur eingesetzt werden */
.bildplatz {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--papier-tief);
  border: 1px dashed var(--linie);
  padding: var(--s3);
  overflow: hidden;
}
.bildplatz::before {
  /* Tesafilm-Streifen */
  content: ""; position: absolute; top: -.6rem; left: 50%;
  width: 5.5rem; height: 1.5rem; transform: translateX(-50%) rotate(-2deg);
  background: var(--tape);
  border-inline: 1px solid rgba(233,160,59,.55);
}
.bildplatz span {
  font-family: var(--display); font-weight: 600;
  font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinte-weich); text-align: center; line-height: 1.4;
}
.bildplatz--breit { aspect-ratio: 16 / 10; }

/* Sobald ein Foto drin liegt: kein gestrichelter Rahmen, kein Tesafilm.
   Der Klebestreifen gehört zum Platzhalter, nicht zum fertigen Bild. */
.bildplatz--gefuellt { background: none; border: 0; padding: 0; }
.bildplatz--gefuellt::before { display: none; }
.bildplatz--gefuellt img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Kleine gezeichnete Marke, die eine Zahl oder ein Wort umkringelt */
.kringel { position: relative; display: inline-block; }
.kringel svg {
  position: absolute; inset: -30% -12%; width: 124%; height: 160%;
  pointer-events: none; overflow: visible;
}

/* --- 4.1 Hero ----------------------------------------------------------- */

#hero { padding-top: var(--s6); padding-bottom: var(--s7); }
@media (min-width: 900px) { #hero { padding-top: var(--s7); } }

/* Marker-Hervorhebung wie auf einem Whiteboard. Der Strich ist eine gezeichnete
   SVG-Form mit unruhigen Kanten, kein Rechteck — ein glatter Balken sähe nach
   Textmarker-Icon aus, nicht nach Hand. Er wischt beim Laden von links nach
   rechts durch. Tinte auf Bernstein trägt 7,6:1. */
/* Der Strich liegt auf dem gepolsterten Kasten, nicht auf geschätzten Prozenten.
   Nur so deckt er Oberlängen und das g von „abgewöhnen" sicher ab — sonst steht
   weisse Schrift auf hellem Papier. */
.marker {
  position: relative;
  display: inline-block;
  color: #fff;
  /* Reichlich Polsterung: Der Strich muss Umlautpunkte und Unterlängen sicher
     überdecken, sonst steht weisse Schrift auf hellem Papier. */
  padding: .12em .18em .16em;
}
.marker::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Flache Welle. Die frühere Fassung schwankte um ein Viertel der Höhe und hat
     dabei die Punkte über dem ü abgeschnitten. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M2,55 C70,59 150,52 220,56 C290,59 355,51 398,55 L398,5 C355,1 290,8 220,4 C150,1 70,9 2,5 Z' fill='%23E03A26'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.marker > span { position: relative; z-index: 1; }

/* Erst wischt der Strich durch, dann kommt das Wort darauf. Ohne JavaScript und
   ohne Bewegungswunsch steht beides sofort da — der Text ist nie unlesbar. */
/* Stufe eins: Der Strich wischt durch die noch leere Stelle. Bis zum 07.08.2026
   startete er erst nach einer vollen Sekunde. */
.js .marker::before {
  animation: markerZug .55s cubic-bezier(.22,1,.32,1) .2s both;
}
@keyframes markerZug {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Ist das Wort zerlegt, animieren die Buchstaben. Ohne Zerlegung — also ohne
   JavaScript — steht das ganze Wort sofort da. */
.js .marker > span { animation: wortAuf .55s cubic-bezier(.16,1,.3,1) .95s both; }
.wort-zerlegt .marker > span { animation: none; opacity: 1; }

@keyframes wortAuf {
  from { opacity: 0; transform: translateY(.14em); }
  to   { opacity: 1; transform: none; }
}

.buchstabe {
  display: inline-block;
  white-space: pre;
  animation: buchstabeAuf .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes buchstabeAuf {
  from { opacity: 0; transform: translateY(.22em) scale(.86); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Der Kopf läuft in vier Stufen, festgelegt am 07.08.2026. Die Reihenfolge ist der
   Punkt, nicht die Dauer: Erst steht die Frage bis auf das letzte Wort da, dann
   wischt der rote Strich durch die Leerstelle, dann setzt sich das Wort hinein,
   und erst danach kommt der Rest. Die ganze Folge ist nach rund zwei Sekunden
   durch. Wer eine Stufe verschiebt, verschiebt die anderen mit.

   0,20 s  der Strich wischt durch          (markerZug, weiter oben)
   0,70 s  die Buchstaben setzen sich       (Verzögerung steht in app.js)
   1,30 s  "Fällt dir spontan nichts ein? Lange her?"
   1,60 s  "Dann braucht ihr Treibstoff: Neugier"
   1,90 s  Schlusssatz, Knopf, Bild und Einordnung
   Die Absenderzeile steht ohne Verzögerung sofort da: Sie sagt, worum es geht,
   und darf auf nichts warten. */
.js .kopfstand {
  animation: heroAuf .4s cubic-bezier(.16,1,.3,1) 1.3s both;
}
.js .treibstoff { animation: heroAuf .45s cubic-bezier(.16,1,.3,1) 1.6s both; }
.js .ueberleitung,
.js .hero-cta,
.js .zettelstapel,
.js #einordnung { animation: heroAuf .5s cubic-bezier(.16,1,.3,1) 1.9s both; }
@keyframes heroAuf {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Sicherheitsnetz. Greift, sobald die Animationen durch sein müssten, und macht
   alles sichtbar, auch dann, wenn sie nie gelaufen sind. Ohne diese Regel bleibt
   die Überschrift leer, falls der Browser die Animation nicht ausführt. */
.auftritt-fertig .marker::before,
.auftritt-fertig .buchstabe,
.auftritt-fertig .kopfstand,
.auftritt-fertig .treibstoff,
.auftritt-fertig .ueberleitung,
.auftritt-fertig .hero-cta,
.auftritt-fertig .zettelstapel,
.auftritt-fertig #einordnung {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js .marker::before, .js .marker > span, .buchstabe,
  .js .kopfstand, .js .treibstoff,
  .js .ueberleitung, .js .hero-cta, .js .zettelstapel, .js #einordnung {
    animation: none; opacity: 1; transform: none; filter: none; clip-path: none;
  }
}

/* Mehr Luft im Kopf, festgelegt am 07.08.2026. Der Abstand unter der Frage ist
   danach wieder auf --s6 zurückgenommen worden, damit "Fällt dir spontan nichts
   ein?" näher an der Frage sitzt, auf die es sich bezieht. Die gewonnene Luft
   steht jetzt unter dieser Zeile und vor dem Schlusssatz. */
#hero h1 { margin-bottom: var(--s6); max-width: 22ch; }
@media (min-width: 980px) { #hero h1 { max-width: 26ch; } }

.hero-raster { display: grid; gap: var(--s5); }

/* Formular und Zettel stehen nebeneinander. Vorher lag der Zettelstapel allein
   in einer Spalte, während links nichts stand — er wirkte dadurch verloren. */
@media (min-width: 900px) {
  .hero-raster {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s5);
  }
  .hero-spalte { min-width: 0; }
}

/* Der gezeichnete Zettelstapel im Cover. Ersetzt das Foto: kleiner, eigener,
   und er zeigt genau das, worum es geht — eine Frage auf einem Zettel. */
.zettelstapel {
  width: 100%;
  max-width: 26rem;
  height: auto;
  display: block;
  margin-inline: auto;
  overflow: visible;
}
.zettelstapel .zs-blatt { filter: drop-shadow(0 14px 22px rgba(23,24,26,.18)); }
.zettelstapel .zs-frage {
  font-family: var(--display); font-weight: 800; font-size: 190px;
  letter-spacing: -.04em; fill: var(--zuendfunke);
}
@media (min-width: 900px) {
  /* Begrenzt, damit der Kopf nicht durch die Zeichnung in die Länge gezogen wird. */
  .zettelstapel { max-width: 19rem; margin-inline: 0; align-self: center; justify-self: start; }
}
/* Der oberste Zettel richtet sich beim Überfahren auf. Ein einziger kleiner
   Moment, kein Dauerwackeln. */
@media (hover: hover) {
  .zettelstapel .zs-vorn {
    transition: transform .4s cubic-bezier(.2,.8,.3,1);
    transform-origin: 238px 244px;
  }
  .zettelstapel:hover .zs-vorn { transform: rotate(1deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .zettelstapel .zs-vorn, .zettelstapel:hover .zs-vorn { transition: none; transform: rotate(-2deg); }
}

/* Der Namenszettel. Bis zum 17.08.2026 klebte er auf der Kante zwischen Kopf und
   dunklem Band unter dem Kopf; seither steht er als Absenderzeile über der Frage,
   damit im ersten Bildschirm dasteht, worum es geht. Angeklebter Zettel statt
   Logoleiste: dieselbe Bürowelt wie der Rest der Seite. */
.hero-marke {
  margin: 0 0 var(--s5);
  max-width: none;
}
.hero-marke span {
  position: relative;
  display: inline-block;
  background: var(--sticky-1);
  color: var(--tinte);
  font-family: var(--display); font-weight: 800;
  font-size: clamp(.9rem, .84rem + .25vw, 1.05rem);
  letter-spacing: -.02em;
  padding: .5rem .9rem;
  transform: rotate(-1.4deg);
  box-shadow: 0 8px 16px -12px rgba(23,24,26,.8);
}
.hero-marke span::before {
  content: ""; position: absolute; top: -.45rem; left: 50%;
  width: 2.6rem; height: .9rem; transform: translateX(-50%) rotate(3deg);
  background: var(--tape);
}


/* Die Frage, die zurückfragt. Sie steht seit dem 17.08.2026 im Abschnitt
   #selbsttest, direkt unter der umgedrehten Frage und über den drei Karten. */
.frageform { margin: 0 0 var(--s5); max-width: 46rem; }

/* Das Nachhaken im Kopf, direkt unter der grossen Frage. Zwei kurze Fragen, die
   zweite unter der ersten. Der Umbruch ist gesetzt und nicht dem Zufall der
   Zeilenlänge überlassen. */
.kopfstand {
  margin: 0 0 var(--s5);
  max-width: 46ch;
  font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem);
  line-height: 1.35;
  color: var(--tinte-weich);
}
.kopfstand span { display: block; }

/* Die Diagnose. Der lauteste Satz im Kopf nach der Überschrift, und die Stelle,
   an der das Wort "Neugier" zum ersten Mal fällt. Ergänzt am 17.08.2026. */
.treibstoff {
  margin: 0 0 var(--s5);
  max-width: 26ch;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.4rem);
  letter-spacing: -.035em; line-height: 1.08;
  color: var(--tinte);
}
.treibstoff span { color: var(--zuendfunke-tief); }
.frageform label {
  display: block; position: relative;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.1rem, .98rem + .6vw, 1.5rem);
  letter-spacing: -.03em; line-height: 1.15;
  margin-bottom: var(--s3);
  max-width: 30ch;
}
/* Die Aufforderung unter der umgedrehten Frage. Ruhiger als die Frage, damit die
   Reihenfolge stimmt: erst die Frage lesen, dann wissen, wohin damit. Seit die
   Label-Überschrift raus ist, trägt der Hinweis das Label allein — dann fällt der
   obere Abstand weg, sonst reißt es die Lücke zur Abschnittsfrage auf. */
.feld-hinweis {
  display: block;
  margin-top: var(--s2);
  font-family: var(--text); font-weight: 400;
  font-size: .98rem; letter-spacing: 0;
  color: var(--tinte-weich);
}
.frageform label > .feld-hinweis:first-child { margin-top: 0; }
/* Der Pfeil sitzt inline direkt hinter dem Label-Text und zeigt von dort nach
   unten ins Eingabefeld. Absolut positioniert zeigte er ins Leere, weil das
   Label als Block die volle Breite einnimmt. Auf schmalen Schirmen weg. */
.kritzel {
  display: none;
  width: 4.4rem; height: 2.2rem;
  margin-left: .5rem;
  vertical-align: -1.5rem;
  color: var(--zuendfunke);
  overflow: visible;
}
@media (min-width: 1100px) { .kritzel { display: inline-block; } }
.js .kritzel path {
  stroke-dasharray: 130; stroke-dashoffset: 130;
  animation: kritzelZug .9s cubic-bezier(.22,1,.32,1) 1.1s forwards;
}
.js .kritzel path:last-child { animation-delay: 1.7s; }
@keyframes kritzelZug { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js .kritzel path { stroke-dashoffset: 0; animation: none; }
}

.frageform-zeile { display: grid; gap: var(--s2); }
@media (min-width: 640px) { .frageform-zeile { grid-template-columns: 1fr auto; align-items: stretch; } }

.frageform input {
  font: inherit;
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
  padding: .75rem .9rem;
  background: #fff;
  color: var(--tinte);
  border: 0;
  border-bottom: 4px solid var(--zuendfunke);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.frageform input::placeholder { color: #5F6266; }
.frageform input:hover { box-shadow: 0 4px 12px -8px rgba(23,24,26,.6); }
/* Der globale 3-px-Rahmen bleibt stehen. Bis zum 07.08.2026 hob ein outline:none
   ihn hier auf und liess nur einen weichen Schlagschatten übrig — ausgerechnet am
   wichtigsten Bedienelement der Seite. */
.frageform input:focus-visible {
  outline: 3px solid var(--zuendfunke-tief);
  outline-offset: 3px;
  background: var(--sticky-1);
}
.frageform input:focus { background: var(--sticky-1); }
.frageform .knopf { justify-content: center; }

/* Die Antwort deckt sich auf wie eine umgedrehte Karte. */
.antwort {
  max-width: 46rem;
  margin: 0 0 var(--s5);
  padding: var(--s4);
  background: var(--tinte);
  color: var(--papier);
  border-radius: 2px;
  box-shadow: 0 18px 34px -24px rgba(23,24,26,.9);
}
.js .antwort[data-sichtbar="ja"] {
  animation: aufdecken .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes aufdecken {
  from { opacity: 0; transform: translateY(-10px) scaleY(.94); transform-origin: top; }
  to   { opacity: 1; transform: none; }
}
.antwort-titel {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.65rem);
  letter-spacing: -.04em; line-height: 1.12;
  color: var(--bernstein);
  margin-bottom: var(--s2);
}
.antwort-text { color: #D5D5D2; margin-bottom: var(--s3); }
.antwort-fuss {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
.antwort-fuss a { color: var(--papier); }
.antwort-zu {
  font: inherit; font-size: .95rem;
  background: none; border: 0;
  color: #B8AFA4; cursor: pointer;
  padding: .2rem 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.antwort-zu:hover { color: var(--papier); }

/* Wer die Frage beantwortet hat, findet seine Karte im Selbsttest wieder. */
.killer[data-treffer="ja"] .killer-seite {
  box-shadow: 0 0 0 3px var(--bernstein), 0 12px 26px -14px rgba(23,24,26,.7);
}
/* Die beiden anderen Karten wurden bis zum 07.08.2026 auf 72 % abgedunkelt. Weisser
   Text auf --routine-tief fiel damit auf 3,58:1 und blieb unter den geforderten
   4,5:1 — und zwar im wahrscheinlichsten Pfad, sobald jemand die Frage beantwortet.
   Der Bernstein-Ring auf der Trefferkarte leistet die Hervorhebung allein. */


/* Der Satz, der aus der Diagnose das Angebot macht. Er nimmt den Treibstoff aus
   der Zeile darüber auf und nennt zum zweiten Mal den Namen des Formats.
   Ruhiger gesetzt als die Diagnose, damit die Reihenfolge im Auge stimmt. */
.ueberleitung {
  margin: 0 0 var(--s5); max-width: 42ch;
  font-family: var(--text); font-weight: 400;
  font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem);
  line-height: 1.5;
  color: var(--tinte-weich);
}

/* Der einzige Knopf im Kopf. Er ist am 17.08.2026 zurückgekommen: Seit die
   Eingabe-Interaktion unten steht, hat der Kopf sonst keine einzige Handlung. */
.hero-cta { margin: 0; max-width: none; }

/* Anmelde-Aufruf mitten auf der Seite */
.zwischen-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4);
  margin-top: var(--s4); max-width: none;
}
.zwischen-cta span { font-size: .95rem; color: var(--tinte-weich); }

.eckdaten {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--linie);
  font-size: .95rem; color: var(--tinte-weich);
}
.eckdaten b { color: var(--tinte); font-family: var(--display); font-weight: 700; }

/* --- 4.2 Selbsttest ----------------------------------------------------- */

#selbsttest { background: var(--papier-tief); }

/* Die drei Karten bekommen seit dem 17.08.2026 eine eigene Zeile über sich. Die
   Abschnittsüberschrift ist jetzt die umgedrehte Frage, und ohne diese Zeile
   stünden die Karten ohne Ansage da. */
.killer-titel-gruppe {
  margin: var(--s6) 0 var(--s2);
}
.killer-vorspann {
  margin: 0 0 var(--s4);
  color: var(--tinte-weich);
}

.killer-raster { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .killer-raster { grid-template-columns: repeat(3, 1fr); } }

.killer { perspective: 1400px; }

.killer-karte {
  position: relative; width: 100%; min-height: 20rem;
  display: block; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.25,1);
}
.killer-karte[aria-expanded="true"] { transform: rotateY(180deg); }

.killer-seite {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s4);
  backface-visibility: hidden;
  border-radius: 2px;
  /* Die überstehende Ablagenummer wird an der Kartenkante beschnitten. */
  overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(23,24,26,.6);
}
/* Karteikarten aus der alten Welt: liniert wie Aktenpapier, graublau, mit einer
   grossen ausgestanzten Nummer. Das Gegenstück zu den bunten Zetteln weiter
   unten — dieselbe Papierwelt, anderer Pol. */
.killer-vorn {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 2.45rem,
      rgba(255,255,255,.085) 2.45rem 2.5rem
    ),
    var(--routine-tief);
  color: #fff;
}
.killer-hinten {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 2.45rem,
      rgba(23,24,26,.06) 2.45rem 2.5rem
    ),
    var(--papier);
  color: var(--tinte);
  border: 1px solid var(--linie);
  transform: rotateY(180deg);
}
/* Im Knopf sind nur Spans erlaubt, die Titel sind deshalb gestaltet statt ausgezeichnet. */
.killer-titel {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
  letter-spacing: -.015em; line-height: 1.08;
  margin-bottom: var(--s2);
}
.killer-text { display: block; font-size: .98rem; line-height: 1.55; }
.killer-hinweis {
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .45rem;
}
.killer-vorn .killer-hinweis { color: rgba(255,255,255,.82); }
.killer-hinten .killer-hinweis { color: var(--zuendfunke-tief); }
/* Die Nummer als grosse ausgestanzte Kontur unten rechts. Sie füllt genau die
   Fläche, die zwischen Text und Umdreh-Marke frei bleibt, und läuft dabei
   leicht über den Rand — wie eine Ablagenummer auf einer Karteikarte. */
.killer-nummer {
  position: absolute; bottom: -1.4rem; right: .5rem;
  font-family: var(--display); font-weight: 800; font-size: 8rem;
  line-height: 1; letter-spacing: -.07em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.28);
  pointer-events: none;
}
.killer-hinten .killer-nummer { -webkit-text-stroke-color: rgba(23,24,26,.16); }

/* Der Umdreh-Hinweis als Marke, damit klar ist, dass die Karte etwas verbirgt. */
.killer-hinweis {
  align-self: flex-start;
  padding: .4rem .7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.killer-schluss {
  margin-top: var(--s4);
  max-width: none;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  letter-spacing: -.025em;
}
.killer-schluss em { font-style: normal; color: var(--zuendfunke); }

/* Ohne 3D-Animation: sauberes Umblenden statt Drehung */
@media (prefers-reduced-motion: reduce) {
  .killer-karte, .killer-karte[aria-expanded="true"] { transform: none; transition: none; }
  .killer-seite { position: relative; inset: auto; }
  .killer-hinten { transform: none; display: none; }
  .killer-karte[aria-expanded="true"] .killer-vorn { display: none; }
  .killer-karte[aria-expanded="true"] .killer-hinten { display: flex; }
}

/* Der Abschnitt #warum und die Lücken-Grafik sind am 07.08.2026 entfallen. Sie
   waren der einzige Teil der Seite ohne ein belegtes Beispiel und der einzige, den
   jede andere Beratung unverändert hätte übernehmen können. Der Satz über die
   Superpower ist in die Brücke am Ende von #selbsttest gewandert.
   Die Reihenfolge über die Abschnitte lautet seit dem 17.08.2026, als #wirkung
   als eigene Bahn dazukam:
   Papier · Tinte · Papier-tief · TINTE · Papier · TINTE · Papier-tief · Papier ·
   ZÜNDFUNKE. Wer einen Abschnitt verschiebt, prüft diese Folge mit. */

/* --- 4.4 Tag eins ------------------------------------------------------- */

#tag-eins { background: var(--tinte); color: var(--papier); }
/* :where() hält die Spezifität bei null, damit jede Klasse darunter gewinnt. */
:where(#tag-eins) :where(h2) { color: var(--papier); }
:where(#tag-eins) :where(p) { color: #D5D5D2; }

/* Die Auszeichnung über der Überschrift. Nur hier, nur einmal auf der Seite. */
.augenbraue {
  margin: 0 0 var(--s2);
  font-family: var(--display); font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bernstein);
}

/* Etwas kleiner gesetzt seit dem 07.08.2026. Bei 3,6 rem lief das Zitat der
   Überschrift darüber den Rang ab. */
.tag-eins-frage {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.8rem);
  letter-spacing: -.035em; line-height: 1.1;
  color: var(--papier);
  max-width: 26ch;
  margin: var(--s5) 0;
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 1px solid rgba(250,248,245,.28);
  text-wrap: balance;
}
/* Nur die direkten Kinder, also die beiden Anführungszeichen. Bis zum 07.08.2026
   stand hier ein Nachfahren-Selektor; er färbte auch den Text im Marker
   bernsteinfarben — #E9A03B auf #E03A26 sind 1,99:1, gefordert sind 3:1 für
   Displaytext. Weiss auf dem Marker erreicht 4,37:1. */
.tag-eins-frage > span { color: var(--bernstein); }

.tag-eins-ergebnis {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: var(--s4);
  padding: .6rem 1.1rem .6rem .9rem;
  background: var(--wirkung); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  border-radius: 2px;
}
.tag-eins-ergebnis svg { width: 1.15em; height: 1.15em; flex: none; }

/* --- 4.6 Die Formen ----------------------------------------------------- */

.formen-raster { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .formen-raster { grid-template-columns: repeat(2, 1fr); } }

/* Eine Zettelwand, kein Raster. Die Karten sitzen unterschiedlich hoch, kippen
   verschieden stark und überlappen sich leicht — so wie Zettel an einer Wand
   eben hängen. Ein sauberes 4×2-Gitter nimmt der Idee genau das weg. */
@media (min-width: 1000px) {
  .formen-raster {
    /* Drei Spalten seit dem 07.08.2026. Vorher vier, für sechs Zettel. */
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5) 1rem;
    align-items: start;
    padding-block: var(--s3);
  }
  /* Die Karten füllen die Lücke genau aus. Überlappen dürfen nur die Ecken,
     die durch die Drehung entstehen — sonst deckt ein Zettel den Text des
     Nachbarn zu, und das Raster wird unlesbar statt lebendig. */
  .formen-raster > * { width: calc(100% + 1rem); }
  .form-karte:nth-child(1)  { transform: rotate(-1.6deg); margin-top: 1.5rem; }
  .form-karte:nth-child(2)  { transform: rotate(1.1deg);  margin-top: 0;      z-index: 2; }
  .form-karte:nth-child(3)  { transform: rotate(-.7deg);  margin-top: 2.6rem; }
  /* Drei Zettel seit dem 07.08.2026. Die Regeln für Karte 4 und 5 sind mit den
     beiden unbelegten Formen entfallen. */
  /* Fünf Zettel seit dem 07.08.2026 — "Tag eins" steht jetzt als eigener
     Abschnitt weiter oben. Die Regeln für Karte 6 bis 8 sind damit weg. */
  /* Beim Überfahren kommt der Zettel nach vorn und richtet sich auf. Die höhere
     Spezifität ist nötig, damit er die nth-child-Drehungen oben schlägt. */
  .formen-raster .form-karte:hover {
    transform: rotate(0deg) translateY(-6px);
    z-index: 5;
  }
}

.form-karte {
  position: relative;
  padding: var(--s3) var(--s3) var(--s4);
  background: var(--sticky-1);
  color: var(--tinte);
  border-radius: 1px;
  box-shadow: 0 12px 22px -16px rgba(23,24,26,.75);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
.form-karte::before {
  content: ""; position: absolute; top: -.55rem; left: 1.6rem;
  width: 4.2rem; height: 1.35rem; transform: rotate(-3deg);
  background: var(--tape);
}
.form-karte:nth-child(5n+2) { background: var(--sticky-2); }
.form-karte:nth-child(5n+3) { background: var(--sticky-3); }
.form-karte:nth-child(5n+4) { background: var(--sticky-4); }
.form-karte:nth-child(5n+5) { background: var(--sticky-5); }
.form-karte:nth-child(odd)  { transform: rotate(-.5deg); }
.form-karte:nth-child(even) { transform: rotate(.6deg); }
.form-karte:hover { transform: rotate(0deg) translateY(-5px); box-shadow: 0 20px 32px -18px rgba(23,24,26,.7); }

.form-karte .bildplatz {
  background: rgba(255,255,255,.55);
  border-color: rgba(23,24,26,.18);
  margin-bottom: var(--s3);
  aspect-ratio: 3 / 2;
}
.form-karte .bildplatz::before { display: none; }
.form-karte .bildplatz span { color: rgba(23,24,26,.62); font-size: .72rem; }
.form-karte h3 { margin-bottom: .45rem; }
.form-karte p { font-size: .95rem; margin: 0; }
.form-karte a { color: var(--tinte); text-underline-offset: 3px; }

/* Die Devise. Drei kurze Sätze, gross gesetzt, treppenartig eingerückt. */
.devise {
  margin: 0 0 var(--s5);
  max-width: none;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem);
  letter-spacing: -.04em; line-height: 1.02;
}
.devise span { display: block; }
.devise span:nth-child(2) { padding-left: 1.2em; }
.devise span:nth-child(3) { padding-left: 2.4em; color: var(--zuendfunke-tief); }
@media (max-width: 640px) {
  .devise span:nth-child(2) { padding-left: .6em; }
  .devise span:nth-child(3) { padding-left: 1.2em; }
}
/* Im Raster schliesst der Devise-Block die zweite Reihe: drei Zettel oben, die
   Devise mit ihrer Erklärung darunter über die volle Breite. Seit dem 07.08.2026
   steht sie nicht mehr als blosser Schriftzug da, sondern erklärt sich. */
.formen-raster .devise-block { grid-column: 1 / -1; margin: var(--s4) 0 0; }
.formen-raster .devise-block .devise { margin-bottom: var(--s3); }
@media (min-width: 1000px) {
  .formen-raster .devise-block {
    display: grid; grid-template-columns: auto 1fr;
    gap: var(--s5); align-items: center;
    width: auto; margin: var(--s3) 0 0;
  }
  .formen-raster .devise-block .devise {
    margin: 0;
    font-size: clamp(2rem, 1rem + 2.8vw, 3.2rem);
  }
}
.devise-erklaerung { max-width: 46ch; margin: 0; color: var(--tinte-weich); }

/* Die Ansage über der Devise, ergänzt am 17.08.2026. Sie sagt, wessen Motto das
   ist — ohne sie stand ein englischer Dreisatz ohne Absender im Raum. */
.devise-marke {
  margin: 0 0 var(--s2);
  font-family: var(--display); font-weight: 700;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte-weich);
}
@media (min-width: 1000px) {
  /* Im zweispaltigen Devise-Block gehört die Ansage über die Devise, nicht in
     eine eigene Rasterzelle. */
  /* Kleiner Zeilenabstand zwischen Ansage und Devise, der grosse Spaltenabstand
     bleibt. Mit dem einheitlichen gap stand "Unser Motto" drei Zeilen über der
     Devise und sah aus wie eine eigene Zeile. */
  .formen-raster .devise-block {
    grid-template-areas: "marke text" "devise text";
    row-gap: var(--s1);
  }
  .formen-raster .devise-block .devise-marke { grid-area: marke; align-self: end; }
  .formen-raster .devise-block .devise { grid-area: devise; }
  .formen-raster .devise-block .devise-erklaerung { grid-area: text; }
}

/* Die Mondmission zum Motto. Bild links, Geschichte rechts. Sie ist die einzige
   Stelle der Seite mit einer Referenz von aussen und bleibt deshalb ruhig
   gesetzt: kein Kasten, keine Farbe, nur eine Trennlinie nach oben. */
.mond-block {
  display: grid; gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--linie);
}
@media (min-width: 820px) {
  .mond-block { grid-template-columns: minmax(0, 22rem) 1fr; gap: var(--s5); align-items: center; }
}
/* Die NASA-Aufnahme ist quadratisch. Im 4:3-Standardplatz würde object-fit
   Helm und Stiefel abschneiden, also bekommt dieser eine Platz 1:1. */
.mond-block .bildplatz { aspect-ratio: 1 / 1; }
.mond-block h3 { margin-bottom: var(--s2); }
.mond-block p { max-width: 54ch; margin-bottom: var(--s3); }
.mond-block p:last-child { margin-bottom: 0; }

/* --- 4.6 Wirkung -------------------------------------------------------- */

/* Am 17.08.2026 von Tinte auf eine helle, warme Bahn gedreht. Der Abschnitt
   trägt den Nutzen, und eine schwarze Fläche hat das Gegenteil davon erzählt.
   Bernstein ist in CLAUDE.md die Rolle für Hervorhebungen; als sehr heller Wasch
   gibt sie dem Abschnitt Wärme, ohne die 70/20/8/2-Mischung zu kippen. Die Bahn
   grenzt sich sauber gegen beide Nachbarn ab: #formen ist Papier, #weg ist
   Papier-tief. */
#wirkung { background: var(--bernstein-hell); }
/* Kein Farbwechsel für Text nötig: Tinte auf --bernstein-hell trägt 15,4:1,
   --tinte-weich noch 6,6:1. Die früheren Aufhellungen für die dunkle Fläche
   sind deshalb ersatzlos entfallen. */

/* Die vier Wirkungen. Kein Häkchen davor: Grün bleibt den belegten Ergebnissen
   vorbehalten, und ein Aufzählungshaken hätte hier nichts zu bestätigen. */
.wirkungen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.wirkungen li {
  position: relative;
  padding-top: var(--s3);
  border-top: 2px solid rgba(233,160,59,.55);
  color: var(--tinte-weich);
}
.wirkungen b {
  display: block; margin-bottom: .4rem;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.15rem, 1.02rem + .55vw, 1.45rem);
  letter-spacing: -.02em; line-height: 1.15;
  color: var(--tinte);
}
.wirkung-nr {
  display: block; margin-bottom: var(--s2);
  font-family: var(--display); font-weight: 800;
  font-size: .95rem; letter-spacing: .06em;
  color: var(--zuendfunke-tief);
}
@media (min-width: 780px) {
  .wirkungen { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s4); }
}
@media (min-width: 1040px) {
  .wirkungen { gap: var(--s5); }
}

/* Das Schlussbild aus Session 2, im Wortlaut sinngleich übernommen. */
.wirkung-schluss {
  margin: var(--s6) 0 0;
  max-width: 34ch;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  letter-spacing: -.03em; line-height: 1.12;
  color: var(--zuendfunke-tief);
}

/* --- Einordnungsband direkt unter dem Cover ----------------------------- */

#einordnung {
  position: relative;
  background: var(--tinte);
  color: var(--papier);
  padding-block: var(--s5) var(--s4);
}
@media (min-width: 900px) { #einordnung { padding-block: var(--s5) var(--s4); } }
.einordnung-raster { display: grid; gap: var(--s4); align-items: start; }
.band-titel {
  margin: 0 0 var(--s2);
  font-family: var(--display); font-weight: 800;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bernstein);
}
@media (min-width: 900px) {
  .einordnung-raster { grid-template-columns: 1.35fr 1fr; gap: var(--s5); }
}
.einordnung-satz {
  margin: 0; max-width: 58ch;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  color: var(--papier);
}
.einordnung-satz p { margin: 0 0 var(--s3); color: inherit; }
.einordnung-satz p:last-child { margin-bottom: 0; }
/* Der erste Satz sagt, was es ist. Er trägt deshalb die Displayschrift und steht
   für sich, der zweite erklärt darunter. */
.einordnung-was {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  letter-spacing: -.03em; line-height: 1.15;
}
/* Die drei Eckdaten als feste Dreierreihe mit Trennstrichen. Vorher liefen sie
   als Fliesstext um und brachen nach dem zweiten Wert unschön um. */
#einordnung .eckdaten {
  margin: 0; padding: 0; border: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
#einordnung .eckdaten span {
  display: grid; gap: .1rem;
  padding-left: var(--s3);
  border-left: 1px solid rgba(250,248,245,.2);
  font-size: .85rem; line-height: 1.35; color: #C9C1B7;
}
#einordnung .eckdaten span:first-child { padding-left: 0; border-left: 0; }
#einordnung .eckdaten b {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1; letter-spacing: -.04em;
  color: var(--bernstein);
}
@media (max-width: 620px) {
  #einordnung .eckdaten span { padding-left: .7rem; font-size: .78rem; }
  #einordnung .eckdaten b { font-size: 1.5rem; }
}

/* --- Das Arbeitsboard aus dem Testlauf ---------------------------------- */

.board { margin: 0; max-width: none; }
.board img {
  width: 100%; height: auto; display: block;
  background: #fff;
  border: 1px solid var(--linie);
  box-shadow: 0 18px 34px -24px rgba(23,24,26,.8);
}
.board figcaption {
  margin-top: var(--s2);
  font-size: .9rem; color: var(--tinte-weich);
  max-width: 46ch;
}

/* --- Die zwei Menschen hinter dem Format -------------------------------- */
.leute-raster { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .leute-raster { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

/* Der eigene Abschnitt #wir ist am 07.08.2026 in #beleg aufgegangen. Die
   Post-It-Bahn entfällt damit — der Wechsel der Grundflächen über die neun
   Abschnitte trägt den Rhythmus allein, und die Sticky-Töne bleiben wieder
   dem Formen-Raster vorbehalten.
   Die Zwischenüberschrift setzt die beiden Menschen vom Beleg darüber ab. */
/* Der Kasten mit den beiden Menschen. Leicht abgesetzt, wie von Tim am
   17.08.2026 gewünscht: eine Fläche in Papier-tief auf dem Papier-Grund und eine
   Bernstein-Kante oben. Kein eigener Bahnwechsel — der Bereich gehört weiter zu
   #beleg und beantwortet dieselbe Frage. */
.beleg-wir {
  margin-top: var(--s6);
  padding: var(--s5) var(--s4);
  background: var(--papier-tief);
  /* Kante ohne Radius: Der 3-px-Streifen läuft an einer abgerundeten Ecke aus
     und franst dort aus. Eine scharfe Kante passt ohnehin besser zur Papierwelt
     als eine gerundete Karte. */
  border-top: 3px solid var(--bernstein);
}
@media (min-width: 760px) { .beleg-wir { padding: var(--s5); } }
.beleg-wir-titel {
  margin-top: 0;
  margin-bottom: var(--s4);
}

.person img {
  width: 9rem; height: 9rem;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin-bottom: var(--s3);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.6);
}
.person-name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  letter-spacing: -.03em;
  margin-bottom: .1rem;
}
.person-firma {
  font-size: .92rem; letter-spacing: .02em;
  color: var(--tinte-weich);
  margin-bottom: var(--s2);
}
.person p:last-child { font-size: .98rem; max-width: 42ch; }

/* Für wen / eher nicht */
/* Nur noch eine Fläche seit dem 07.08.2026: "Gemacht für". Die beiden Nachbarn
   sind von der Seite genommen worden, der Abschnitt war zu voll. Der Kasten steht
   jetzt in der linken Spalte neben dem Formular, wo vorher Leere war. Die Fläche
   ist dunkler als der Grund, weil eine hellere dem Formular daneben die
   Aufmerksamkeit ziehen würde. */
.fuerwen {
  margin-top: var(--s4);
  padding: var(--s4);
  background: rgba(0, 0, 0, .16);
  border-radius: 2px;
}
.fuerwen h3 {
  margin-bottom: var(--s3);
}
.fuerwen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.fuerwen li {
  padding-left: var(--s3);
  border-left: 1px solid #fff;
  font-size: .95rem; color: #FBE9E5; line-height: 1.5;
}

/* --- 4.7 Der Weg -------------------------------------------------------- */

#weg { background: var(--papier-tief); }
/* Einspaltig: Der Kreis steht mittig und für sich, seit die Liste auf dem Desktop
   nicht mehr daneben liegt. */
.weg-raster { display: grid; gap: var(--s5); justify-items: center; }
.weg-raster > * { width: 100%; max-width: 34rem; }

/* Sechs Beschriftungen im Kreis werden unter 760 Pixeln unleserlich.
   Dort trägt die nummerierte Liste darunter denselben Inhalt vollständig. */
.weg-svg { width: 100%; height: auto; display: block; }
@media (max-width: 759px) { .weg-svg { display: none; } }
.weg-svg .knoten { fill: var(--papier); stroke: var(--tinte); stroke-width: 1.5; }
.weg-svg .knoten-nr { font-family: var(--display); font-weight: 800; font-size: 26px; fill: var(--zuendfunke); text-anchor: middle; }
.weg-svg .knoten-txt { font-family: var(--display); font-weight: 700; font-size: 17px; fill: var(--tinte); text-anchor: middle; }
.weg-svg .kern-txt { font-family: var(--text); font-size: 16px; fill: var(--tinte); text-anchor: middle; }
.weg-svg .kern-label { font-family: var(--display); font-weight: 700; font-size: 15px; fill: var(--zuendfunke); }
.weg-svg .kern-kreis { fill: none; stroke: var(--zuendfunke); stroke-width: 1.5; stroke-dasharray: 5 6; }
.weg-svg .bogen { fill: none; stroke: var(--tinte); stroke-width: 1.5; }

/* Der Kreislauf zeichnet sich einmal durch, sobald er ins Bild kommt: erst die
   Bögen der Reihe nach, dann die Stationen. Läuft genau einmal, kein Dauerlauf. */
.js .weg-svg .bogen path { stroke-dasharray: 160; stroke-dashoffset: 160; }
.js .weg-svg[data-sichtbar="ja"] .bogen path {
  animation: bogenZug .55s ease-out forwards;
}
.js .weg-svg[data-sichtbar="ja"] .bogen path:nth-child(1) { animation-delay: .15s; }
.js .weg-svg[data-sichtbar="ja"] .bogen path:nth-child(2) { animation-delay: .45s; }
.js .weg-svg[data-sichtbar="ja"] .bogen path:nth-child(3) { animation-delay: .75s; }
.js .weg-svg[data-sichtbar="ja"] .bogen path:nth-child(4) { animation-delay: 1.05s; }
.js .weg-svg[data-sichtbar="ja"] .bogen path:nth-child(5) { animation-delay: 1.35s; }
@keyframes bogenZug { to { stroke-dashoffset: 0; } }

.js .weg-svg .knoten, .js .weg-svg .knoten-nr, .js .weg-svg .knoten-txt { opacity: 0; }
.js .weg-svg[data-sichtbar="ja"] .knoten,
.js .weg-svg[data-sichtbar="ja"] .knoten-nr,
.js .weg-svg[data-sichtbar="ja"] .knoten-txt {
  animation: knotenAuf .4s ease-out forwards;
}
@keyframes knotenAuf { to { opacity: 1; } }

.js .weg-svg .kern-kreis, .js .weg-svg .kern-txt, .js .weg-svg .kern-label { opacity: 0; }
.js .weg-svg[data-sichtbar="ja"] .kern-kreis,
.js .weg-svg[data-sichtbar="ja"] .kern-txt,
.js .weg-svg[data-sichtbar="ja"] .kern-label {
  animation: knotenAuf .5s ease-out 1.7s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .js .weg-svg .bogen path { stroke-dashoffset: 0; animation: none; }
  .js .weg-svg .knoten, .js .weg-svg .knoten-nr, .js .weg-svg .knoten-txt,
  .js .weg-svg .kern-kreis, .js .weg-svg .kern-txt, .js .weg-svg .kern-label {
    opacity: 1; animation: none;
  }
}

/* Reine Mobilfassung seit dem 07.08.2026. Oberhalb von 760 px trägt der Kreis den
   Abschnitt allein — dieselbe Information zweimal untereinander war der Hauptgrund,
   warum #weg zu voll wirkte. */
@media (min-width: 760px) { .weg-liste { display: none; } }
.weg-liste { list-style: none; margin: 0; padding: 0; counter-reset: station; }
.weg-liste li {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--s2);
  padding: var(--s3) 0; border-top: 1px solid var(--linie);
}
.weg-liste li:last-child { border-bottom: 1px solid var(--linie); }
.weg-liste li::before {
  counter-increment: station; content: counter(station);
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  color: var(--zuendfunke); line-height: 1;
}
.weg-liste b { font-family: var(--display); font-weight: 700; display: block; }
.weg-liste span { color: var(--tinte-weich); font-size: .96rem; }

/* --- 4.8 Stimmen -------------------------------------------------------- */

.beleg-raster { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) {
  .beleg-raster { grid-template-columns: 1.05fr .95fr; gap: var(--s6); }
}
/* Die drei Stimmen stehen jetzt gestapelt neben dem Board statt in einer Reihe
   darunter. Das bricht den immer gleichen Aufbau aus Überschrift und Block. */
.stimmen-raster { display: grid; gap: var(--s3); }

.stimme {
  margin: 0; padding: var(--s4);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 2px;
  display: flex; flex-direction: column; gap: var(--s3);
}
.stimme blockquote {
  margin: 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  letter-spacing: -.02em; line-height: 1.25;
}
.stimme figcaption { font-size: .88rem; color: var(--tinte-weich); margin-top: auto; }

/* Die gezeichneten Köpfe sind am 07.08.2026 entfallen. Die Rückmeldungen aus dem
   Testlauf sind anonym; ein erfundenes Gesicht dazu erfindet eine Person, die es
   nicht gibt. Das Anführungszeichen trägt die Karte allein. */
.stimme .anfuehrung { color: var(--zuendfunke); font-size: 2.2rem; line-height: .6; font-family: var(--display); }

/* --- 4.9 Anmeldung ------------------------------------------------------ */

/* Die Seite endet nicht in Schwarz, sondern in der Farbe, die für Neugier steht.
   Der tiefe Ton trägt weissen Text mit 6,5:1. */
#vormerkung { background: var(--zuendfunke-feld); color: #fff; }
:where(#vormerkung) :where(h2, h3) { color: #fff; }
:where(#vormerkung) :where(p) { color: #FBE9E5; }

/* Links steht seit dem 07.08.2026 nur noch die Überschrift mit einem Absatz, weil
   die Erwartungen nach oben gewandert sind. Die schmalere linke Spalte hält den
   Text bei angenehmer Zeilenlänge und gibt dem Formular mehr Platz. */
.anmeldung-raster { display: grid; gap: var(--s5); }
@media (min-width: 980px) { .anmeldung-raster { grid-template-columns: .8fr 1.2fr; gap: var(--s6); align-items: start; } }

/* Termine und Preis stehen seit dem 07.08.2026 in #weg auf heller Fläche.
   Vorher lagen sie im roten Anmeldefeld — daher die Umstellung von weissen auf
   dunkle Töne. Alle Werte hier sind gegen --papier-tief gerechnet. */
.termine { list-style: none; margin: 0; padding: 0; }
.termine li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem;
  padding: .7rem 0; border-bottom: 1px solid var(--linie);
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
}
.termine li span { font-family: var(--text); font-weight: 400; font-size: .92rem; color: var(--tinte-weich); }

.uhrzeit-offen {
  display: inline-block; margin: 0 0 var(--s3);
  padding: .45rem .8rem;
  border: 1px dashed var(--bernstein);
  color: var(--tinte-weich);
  font-size: .9rem; border-radius: 2px;
}

.preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .9rem; margin-bottom: var(--s1); }
.preis .alt { color: var(--tinte-weich); text-decoration: line-through; font-size: 1.2rem; font-family: var(--display); }
.preis .neu { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4.2rem); letter-spacing: -.04em; color: var(--zuendfunke-tief); }
.preis .netto { color: var(--tinte-weich); font-size: .95rem; }
.klein-hell { font-size: .95rem; color: var(--tinte-weich); }

/* Termine links, Preis und Aufruf rechts. Erst wenn Datum, Aufwand und Preis
   beisammen sind, lässt sich die Frage beantworten, auf die der Knopf wartet. */
.weg-fakten { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 860px) {
  .weg-fakten { grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
}
.weg-preis .zwischen-cta { margin-top: var(--s4); }

/* Die Regeln für .gewinn-block und .gewinn sind am 17.08.2026 entfallen. Der
   breite Nutzen-Block über der ganzen Spalte ist auf Tims Wunsch weg; die vier
   Punkte stehen jetzt gekürzt als zweiter .fuerwen-Kasten neben dem Formular.
   Damit hat der Abschnitt genau eine Listenform statt zweier ähnlicher.
   Die Regeln für .erwartung sind schon am 07.08.2026 entfallen. */

/* Formular */
.formular {
  background: var(--papier); color: var(--tinte);
  padding: var(--s4); border-radius: 2px;
  box-shadow: 0 24px 48px -30px rgba(0,0,0,.9);
}
@media (min-width: 620px) { .formular { padding: var(--s5); } }
.formular h3 { margin-bottom: var(--s3); color: var(--tinte); }
.formular-intro { color: var(--tinte-weich); font-size: .95rem; }

.feld { display: grid; gap: .4rem; margin-bottom: var(--s3); }
.feld label { font-family: var(--display); font-weight: 700; font-size: .95rem; }
.feld input, .feld textarea {
  font: inherit; font-size: 1rem;
  padding: .75rem .85rem;
  background: #fff;
  border: 1px solid #C8BFB2; border-radius: 2px;
  color: var(--tinte);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.feld input::placeholder, .feld textarea::placeholder { color: #5F6266; }
.feld input:hover, .feld textarea:hover { border-color: #9E948A; }
/* Sichtbarer Rahmen statt outline:none. Der frühere Schatten benutzte ausserdem
   noch den alten Zündfunke-Wert #B8431C. */
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: 3px solid var(--zuendfunke-tief);
  outline-offset: 2px;
  border-color: var(--zuendfunke-tief);
}
.feld input:focus, .feld textarea:focus { border-color: var(--zuendfunke-tief); }
.feld textarea { min-height: 6.5rem; resize: vertical; }
.feld .hilfe { font-size: .85rem; color: var(--tinte-weich); }
.feld .fehler { font-size: .88rem; color: #A3231A; min-height: 0; }
.feld[data-fehler="ja"] input, .feld[data-fehler="ja"] textarea { border-color: #A3231A; }

.formular .knopf { width: 100%; justify-content: center; margin-top: var(--s2); }
.formular .knopf[disabled] { opacity: .6; cursor: progress; }
.formular .klein { font-size: .85rem; color: var(--tinte-weich); margin-top: var(--s3); }

/* Ein Bereich für beide Ausgänge, direkt über dem Formular. PHP füllt ihn beim
   Neuladen, JavaScript ohne Neuladen. */
.erfolg {
  display: none;
  margin-bottom: var(--s3);
  padding: var(--s4);
  background: var(--sticky-3);
  border: 1px solid var(--wirkung);
  border-radius: 2px;
}
.erfolg[data-sichtbar="ja"] { display: block; }
.erfolg[data-art="schlecht"] { background: var(--sticky-2); border-color: #A3231A; }
.erfolg[data-art="schlecht"] h3 { color: #8E1E16; }

/* Honigtopf: für Menschen unsichtbar, für Bots ein offenes Feld. Bewusst nicht
   display:none — manche Bots überspringen ausgeblendete Felder. */
.honigtopf {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.erfolg h3 { color: var(--wirkung); }
.erfolg p { color: var(--tinte); }

.abschluss {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.3);
  text-align: center;
}
.abschluss strong {
  display: block;
  font-family: var(--display); font-weight: 800;
  /* Gedeckelt am 07.08.2026. Der Schlusssatz lief bis 6 rem und übertraf damit
     das H1 mit 4,4 rem — die grösste Schrift der Seite trug die kleinste
     Information. Jetzt bleibt er unter der Überschrift. */
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.2rem);
  letter-spacing: -.04em; line-height: 1;
  color: #fff;
}
.abschluss p { margin: var(--s3) auto 0; max-width: 44ch; }

/* Nachweisseite */
.nachweis { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.nachweis li {
  padding-left: var(--s3);
  border-left: 1px solid var(--linie);
  font-size: .98rem;
}
.nachweis b { font-family: var(--display); font-weight: 700; }

/* Fusszeile */
footer {
  padding-block: var(--s4);
  font-size: .9rem; color: var(--tinte-weich);
}
footer .bahn { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between; align-items: center; }
/* Mindestens 24 px hohe Trefferfläche, sonst greift WCAG 2.5.8 nicht. */
footer a {
  display: inline-block;
  color: var(--tinte-weich);
  padding-block: .3rem;
  min-height: 24px;
}

/* --- 5. Bewegung -------------------------------------------------------- */

/* Ein einziger Auftritt: Inhalt steht, wenn JavaScript schweigt. */
.js [data-auftritt] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.js [data-auftritt][data-sichtbar="ja"] { opacity: 1; transform: none; }

/* Die Lücke hatte bis zum 07.08.2026 einen eigenen inszenierten Auftritt: Die
   Linien zeichneten sich über 1,6 s, danach blendeten Keil und Jahreszahlen
   nacheinander ein. Damit hatte die Seite zwei Höhepunkte — dieser und die
   aufklappende Antwort im Hero. Zwei heben sich gegenseitig auf. Die Antwort im
   Hero ist die Signatur und behält ihren Auftritt; die Lücke bekommt seither
   denselben ruhigen Auftritt wie jeder andere Abschnitt. */

@media (prefers-reduced-motion: reduce) {
  .js [data-auftritt] { opacity: 1; transform: none; transition: none; }
  .knopf, .form-karte, .killer-karte { transition: none; }
}

@media print {
  body { background: #fff; }
  .js [data-auftritt] { opacity: 1 !important; transform: none !important; }
  section { padding-block: 1.5rem; page-break-inside: avoid; }
}