/* ═══════════════════════════════════════════════════════════════════
   FADEN, gemeinsame Grundlage für Lerche und Amsel.

   Tokens und Signaturelemente aus faden-brand-concept.html übernommen,
   nicht nacherfunden. Die Struktur von DESIGN-1Q1T bleibt darüber
   gültig: 560px Spalte, eine Frage je Ansicht, ein stiller Ausweg,
   kein Rot, kein Serienzähler, 44px Klickflächen, Kontrastgrenzen,
   Bewegung nur mit Ursache.

   Die Akzentfarbwahl aus dem Konzept liegt im GERÜST, nicht in der
   Oberfläche: die Verbotsliste streicht tiefe Konfigurierbarkeit, "eine
   Voreinstellung, die trägt, plus Hell/Dunkel". Zum Entwerfen ist der
   Wähler richtig, im ausgelieferten Werkzeug steht ein Schema fest.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ein Schema besteht aus EINEM Wert, dem Grundton. Alles andere wird
      daraus abgeleitet, und weil die Ableitung über --paper und --ink
      läuft, stimmt sie in hell und dunkel von selbst. Zehn Paletten von
      Hand zu pflegen wäre zehnmal die Gelegenheit, einen Kontrast zu
      verfehlen. ── */
/* Der Grundton MUSS auf demselben Element sitzen wie die Ableitung,
   also auf html. Stand er auf body, wurden --paper und die anderen
   abgeleiteten Werte weiter auf :root berechnet, mit dem dortigen
   Grundton, und body erbte nur das fertige Ergebnis. Der Wähler klickte
   dann, ohne dass sich eine Farbe änderte. */
html[data-schema="salbei"]  {--grundton:#A9C9AE}
html[data-schema="himmel"]  {--grundton:#AFC8D9}
html[data-schema="flieder"] {--grundton:#CBB9DD}
html[data-schema="pfirsich"]{--grundton:#F0C7B0}
html[data-schema="sand"]    {--grundton:#E9D9A6}
html[data-schema="rose"]    {--grundton:#E7C3CB}

:root{
  --grundton:   #A9C9AE;
  --paper:      color-mix(in srgb, #F1F0E7, var(--grundton) 16%);
  --paper-warm: color-mix(in srgb, #FBF8EF, var(--grundton) 5%);
  --ink:        #2B2E28;
  /* Mit dem Faden bei 24% steht Nebentext teilweise AUF dem Strich, und
     bei #62665A ergab das 4,38 bis 4,45 in drei Schemata, also unter
     4,5. Zwei Stufen dunkler haelt den Boden in allen sechs. */
  --ink-soft:   #5A5E52;
  /* Der begleitende Ton des Schemas. Tief für Text und Linien, hell als
     Fläche. Aus dem Grundton abgeleitet, damit kein Schema mit sich
     selbst streitet. Der Tokenname bleibt sage-*, weil er überall
     verwendet wird, gemeint ist aber "der Ton des Schemas". */
  /* Die beiden müssen weit auseinander liegen: der tiefe Ton trägt Text
     auf der hellen Fläche. Mit 58% und 38% kamen sie auf 3,77:1,
     verlangt sind 4,5. Gemessen nachjustiert, nicht geschätzt. */
  --sage-deep:  color-mix(in srgb, var(--grundton), var(--ink) 72%);
  --sage-tint:  color-mix(in srgb, var(--paper-warm), var(--grundton) 20%);
  --sage:       color-mix(in srgb, var(--grundton), var(--ink) 34%);
  --sand:       #D9C9A3;
  /* Der Strich der Schraffur. Sand auf Sand ergibt im Hellen 1,37:1, also
     ein Muster, das man nicht sieht. Richtung Tinte gemischt wird es im
     Hellen dunkler und im Dunkeln heller, weil --ink dort kippt. */
  --sand-strich: color-mix(in srgb, var(--sand), var(--ink) 45%);
  --line:       rgba(43,46,40,.12);
  --line-strong:rgba(43,46,40,.24);

  /* Eine Akzentfarbe, sparsam. Pastell mit dunkler Tinte darauf, nicht
     Weiß auf Dunkel. Das ist der Unterschied, der Faden warm macht. */
  --accent:      var(--grundton);
  --accent-tint: color-mix(in srgb, var(--paper-warm), var(--accent) 34%);
  --accent-deep: color-mix(in srgb, var(--accent), var(--ink) 18%);
  /* Blass. Bei 24% war der Strich ein Fleck mit sichtbarer Kante quer
     ueber die Seite, gegen die eigene Regel "unter 4% Unterschied, keine
     Kante". 8% traegt Atmosphaere, ohne zu behaupten. */
  /* 24% wie im Markenkonzept. Ich hatte auf 8% heruntergedreht, weil der
     Faden ueber dem Text lag — das lag aber am z-index, nicht an der
     Farbe. Mit dem behobenen z-index ist 24% genau richtig und der
     Strich ist das, was er sein soll: sichtbar. */
  --faden:       color-mix(in srgb, var(--paper), var(--accent) 24%);
  /* Schrift AUF dem Akzent. Eigenes Token, weil der Akzent in beiden
     Modi pastell bleibt: das ist Fadens tragendes Merkmal. Würde hier
     --ink stehen, kippte die Schrift im dunklen Modus auf hell und
     stünde mit 1,56:1 auf hellem Pastell, also unlesbar. Gemessen. */
  --auf-akzent:  #20231B;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* Asymmetrische Radien. Das auffälligste Merkmal des Konzepts:
     nichts ist ganz gerade, nichts ganz gleich. */
  --r-card:  26px 8px 26px 8px;
  --r-inner: 18px 6px 18px 6px;
  --r-field: 16px;
  --r-pill:  999px;

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --ui:'Figtree',system-ui,sans-serif;

  --col:560px;
  --e-out:cubic-bezier(.22,.9,.3,1);
  --e-soft:cubic-bezier(.45,0,.15,1);
  --t-answer:140ms; --t-leave:150ms; --t-enter:260ms; --t-arrive:420ms;
}

/* Das Konzept hat keinen dunklen Modus, die Vorgabe verlangt einen.
   Abgeleitet, nicht erfunden: derselbe Grünstich, nur invertierte
   Helligkeit, und der Akzent bleibt pastell, weil dunkle Tinte darauf
   das tragende Merkmal ist. */
[data-theme="dark"]{
  --paper:      color-mix(in srgb, #22251E, var(--grundton) 9%);
  --paper-warm: color-mix(in srgb, #2B2E26, var(--grundton) 7%);
  --ink:        #EDF0E4;
  /* Heller als naheliegend. Die gedaempfte Schrift steht im Dunkeln auf
     Flaechen, die je Schema unterschiedlich hell ausfallen: bei den
     warmen Grundtoenen (Pfirsich, Sand, Rose) kam --ink-soft auf
     --sage-tint nur auf 4,25 bis 4,43, verlangt sind 4,5. Anheben wirkt
     gegen alle Flaechen gleichzeitig, ein Flaechenwert nur gegen eine. */
  --ink-soft:   #BAC0AF;
  /* Dieselbe Ableitung, nur dass --ink jetzt hell ist: der tiefe Ton
     wird dadurch automatisch der helle. Ein Schemawechsel braucht im
     dunklen Modus keine eigene Pflege. */
  --sage:       color-mix(in srgb, var(--grundton), var(--ink) 26%);
  --sage-deep:  color-mix(in srgb, var(--grundton), var(--ink) 34%);
  --sage-tint:  color-mix(in srgb, var(--paper), var(--grundton) 10%);
  /* Heller als die naheliegende Abdunklung. Sand trägt im Dunkeln
     dunkle Tinte (Anhang-Abzeichen, "wartet auf"), und #8A7B58 ergab
     dafür nur 3,84:1. Mit #C4B183 sind es 7,97:1. Als Fläche im
     Zeitband ist der hellere Ton ohnehin besser sichtbar. Gemessen. */
  --sand:       #C4B183;
  --line:       rgba(237,240,228,.14);
  --line-strong:rgba(237,240,228,.26);
  --accent:      var(--grundton);
  --accent-tint: color-mix(in srgb, var(--paper-warm), var(--accent) 22%);
  --accent-deep: color-mix(in srgb, var(--accent), white 14%);
  --auf-akzent:  #20231B;
  --faden:       color-mix(in srgb, var(--paper), var(--accent) 14%);
}

/* ── Zurück. Bewusst KEIN dritter Knopf in der Handlungszeile: dort
      stehen eine Hauptaktion und ein stiller Ausweg, ein Drittes wäre
      laut 1Q1T eine verdeckte Priorisierungsaufgabe. Zurück ist keine
      Entscheidung, sondern Navigation, deshalb sitzt es beim
      Fortschritt und sieht aus wie Chrom, nicht wie eine Antwort.
      Rückschritt-Taste tut dasselbe. ── */
.zurueck{
  width:32px;height:32px;flex:none;display:grid;place-items:center;
  border:none;background:transparent;cursor:pointer;border-radius:50%;
  color:var(--ink-soft);
  transition:background var(--t-answer) var(--e-out), color var(--t-answer) var(--e-out);
}
.zurueck:hover{background:var(--sage-tint);color:var(--ink)}
.zurueck svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zurueck[hidden]{display:none}

/* Stimme an oder aus. Ein Schalter, keine Einstellungsseite: die
   Verbotsliste streicht tiefe Konfigurierbarkeit, aber eine Stimme, die
   man nicht abstellen kann, ist auf Dauer zudringlich. */
.tonschalter{
  margin-left:auto;background:none;border:none;cursor:pointer;
  font-family:var(--ui);font-size:13px;font-weight:500;color:var(--ink-soft);
  min-height:32px;padding:0 var(--s2);border-radius:var(--r-pill);
}
.tonschalter:hover{color:var(--ink);background:var(--sage-tint)}

*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden;
  transition:background 320ms var(--e-out), color 320ms var(--e-out);
}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sage-deep);outline-offset:3px;border-radius:3px}

/* Handgezeichnet, nicht glatt. Kleine Unregelmäßigkeiten wirken
   menschlich, nicht generiert. */
svg[data-wobble]{filter:url(#wobble)}

/* ── Der Faden im Hintergrund. Wird einmal gezeichnet und getragen,
      nicht bei jedem Blattwechsel neu. Liegt neben und hinter der
      Karte, die Karte selbst ist deckend.

      Zwei Fassungen, nicht eine skalierte: breit liegt fest über dem
      Fenster (1400x460, 34px Strich), hoch liegt im Telefonrahmen
      (340x640, 16px Strich, senkrecht mäandernd). Ein auf Telefonbreite
      gestauchter Querpfad ergibt keine Linie, sondern Flecken. ── */
/* z-index MUSS negativ sein. Mit 0 malt ein position:fixed-Element ueber
   nicht positionierten Text: auf der Designsystem-Seite lag der Faden
   quer ueber Ueberschriften und Absaetzen. Negativ liegt er ueber dem
   Seitenhintergrund und unter allem Inhalt. */
.faden-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* z-index MUSS hier positiv sein, anders als bei der seitenweiten
   Fassung. Der hohe Faden liegt IM Geraet, und .geraet hat einen
   deckenden Hintergrund: mit -1 malte der Strich HINTER diesen
   Hintergrund und war im Telefonmodus vollstaendig unsichtbar. 1 liegt
   ueber dem Rahmenhintergrund und unter der Spalte (z-index 2). */
.faden-bg.hoch{position:absolute;inset:0;display:none;z-index:1}
body.handy .faden-bg.breit{display:none}
body.handy .faden-bg.hoch{display:block}
.faden-bg.hoch svg{
  position:absolute;inset:0;width:100%;height:100%;transform:none;
  /* Kein Wobble auf dem Hintergrundstrich. Das Vorbild hat keinen: die
     glatten S-Kurven sind der Punkt, und feDisplacementMap mit scale 4
     frisst bei 16 bis 34px Strichbreite genau die Kanten weg, die den
     Faden zu einem Band machen. */
  filter:none;animation:none;
}
.faden-bg.hoch path{stroke-width:16}
.faden-bg svg{
  position:absolute;left:50%;top:50%;width:1800px;height:auto;
  transform:translate(-50%,-50%);
  filter:none;
  /* Die fortlaufende Hintergrundbewegung. 164s Zyklus, weit über den
     90s, die die Vorgabe als Untergrenze setzt, und die Verschiebung
     ist so klein, dass keine Kante entsteht. Bewegung ohne Kante und
     ohne Tempo löst keine Orientierungsreaktion aus. */
  animation:faden-driften 164s var(--e-soft) infinite;
}
@keyframes faden-driften{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%    {transform:translate(-48.5%,-51.5%) scale(1.06)}
}
.faden-bg path{
  fill:none;stroke:var(--faden);stroke-width:34;
  stroke-linecap:round;stroke-linejoin:round;
  /* Mit pathLength="1" am Pfad meint dasharray 1 die ganze Länge, und
     der Strich wird wirklich gezeichnet. Ohne pathLength bedeutet
     dasharray:1 einen 1px-Strich mit 1px-Lücke, also eine gepunktete
     Linie, die sich beim Animieren nur um einen Pixel verschiebt. Genau
     das war vorher der Fall: keine Zeichenbewegung, dafür Lücken. */
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:faden-ziehen 4.6s var(--e-soft) forwards;
}
@keyframes faden-ziehen{to{stroke-dashoffset:0}}

/* ── Die Spalte. 560px und nie breiter, auf keinem Bildschirm. ── */
/* Die Buehne war min-height:100vh HOCH ZUSAETZLICH zur Leiste darueber,
   also rollte die Seite immer um die Leistenhoehe, und im
   Telefonmodus wurde der Rahmen unten abgeschnitten. Body als Spalte,
   Buehne nimmt den Rest: kein Rollen, wenn der Inhalt passt. */
body:has(> .buehne){display:flex;flex-direction:column;min-height:100vh}
.buehne{
  /* KEIN min-height:0 hier. Damit durfte die Buehne unter ihren Inhalt
     schrumpfen, und weil sie zentriert, lief der Ueberschuss nach OBEN
     aus dem Bild: der Kartenkopf war nicht mehr erreichbar. Ohne die
     Zeile ist die automatische Mindestgroesse der Inhalt selbst. */
  position:relative;z-index:2;flex:1 1 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--s7) var(--s5) var(--s8);
}
.spalte{width:100%;max-width:var(--col)}

.marke{
  display:flex;align-items:center;gap:var(--s2);
  margin-bottom:var(--s4);padding-left:var(--s2);
}
.marke svg{width:26px;height:26px;flex:none}
.marke span{
  font-family:var(--display);font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:var(--ink-soft);
}
.marke b{font-weight:500;color:var(--ink-soft);font-family:var(--ui);font-size:14.5px;margin-left:var(--s2)}

/* ── Das Blatt. Warmes Creme, asymmetrische Ecken. ── */
.blatt{
  background:var(--paper-warm);
  border:1.5px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:0 14px 30px -14px rgba(43,46,40,.18);
  overflow:hidden;
}
[data-theme="dark"] .blatt{box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.blatt-pad{padding:var(--s6) var(--s6) var(--s5)}
@media(max-width:560px){.blatt-pad{padding:var(--s5) var(--s4)}}

/* Zeitband. Die einzige Bewegung ohne Zutun, deshalb tut es nichts
   sonst: kein Pulsieren, kein Farbwechsel, kein Rot. Es wird kürzer,
   verbraucht ist es still. */
.band{
  height:4px;background:var(--sage-tint);
  /* Randlos an der Kartenoberkante wurde das Band von der 26px-Ecke
     angeschnitten und endete mitten im Nichts mit einer harten Kante:
     es las sich als kaputter Rahmen, nicht als Zeit. Eingerückt auf
     die Inhaltsspalte und mit runden Enden ist es absichtlich. */
  margin:var(--s4) var(--s6) 0;border-radius:999px;overflow:hidden}
.band + .punkte{padding-top:var(--s4)}
.band i{display:block;height:100%;border-radius:999px;transition:width 1s linear;
  /* Reines --sand war auf dem hellen Gleis der einzige warme Ton der
     Oberflaeche und las sich als versehener orangener Strich,
     --sand-strich dagegen als schwere Linie. Dazwischen liegt ein Ton,
     der sichtbar ist und nichts behauptet. */
  background:color-mix(in srgb, var(--sand), var(--ink) 20%)}
.band i.leer{background:var(--line-strong)}
.band[data-pause="ja"] i{opacity:.5}

/* Fortschritt. Punkte, kein Zähler, keine Prozente. */
/* [hidden] muss hier ausdrücklich stehen: eine Klassenregel mit
   display schlägt die Browser-Regel für das hidden-Attribut. Sonst
   bleibt die Schrittzeile auf Blättern stehen, die keine Schritte
   sind, und zeigt den Stand des vorigen Blattes. */
.punkte[hidden]{display:none}
.punkte{display:flex;gap:7px;align-items:center;padding:var(--s5) var(--s6) 0}
@media(max-width:560px){.punkte{padding-left:var(--s4);padding-right:var(--s4)}}
.punkte span{margin-left:auto;font-size:13.5px;color:var(--ink-soft);font-weight:500}

/* Der Fortschritt als kleiner Faden mit Knoten. Gleicher Platzbedarf
   wie die abstrakten Punkte vorher, aber dieselbe Metapher wie überall
   sonst, und der gezogene Teil wächst beim Weitergehen mit. */
.spur-klein{width:100px;height:18px;flex:none;overflow:visible}
.spur-klein .bahn{fill:none;stroke:var(--line-strong);stroke-width:3;stroke-linecap:round}
/* Tiefton, nicht Akzent: der Akzent ist laut Vorgabe fuer die eine
   Hauptaktion reserviert, und gemessen lag Akzent auf der Bahn bei 1,2
   bis 1,5 zu 1, man sah also nicht, wie weit der Faden gesponnen ist. */
.spur-klein .gezogen{
  fill:none;stroke:var(--sage-deep);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1;transition:stroke-dashoffset 620ms var(--e-out);
}
.spur-klein .kn{fill:var(--paper-warm);stroke:var(--line-strong);stroke-width:2}
.spur-klein .kn.war{fill:var(--sage-deep);stroke:var(--sage-deep)}
/* Rand in --auf-akzent, dem Token fuer "etwas AUF dem Akzent". Mit
   --sage-deep war der Rand im dunklen Modus hell auf hellem Pastell,
   gemessen 1,07 bis 1,18 zu 1, also unsichtbar. */
.spur-klein .kn.hier{fill:var(--accent);stroke:var(--auf-akzent);stroke-width:2.5}

/* ── Die Frage. Bricolage Grotesque, leicht eigenwillig. ── */
.frage{
  font-family:var(--display);font-weight:600;
  font-size:clamp(27px,3.9vw,36px);line-height:1.1;letter-spacing:-.018em;
  hanging-punctuation:first;max-width:22ch;margin-bottom:var(--s3);
}
/* Der handgezeichnete Strich unter der Frage. Wird bei jedem
   Blattwechsel neu gezogen, das ist die Moderation des Übergangs. */
.strich{display:block;width:190px;height:20px;margin-bottom:var(--s3)}
.strich path{
  stroke:var(--accent);stroke-width:4.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;   /* pathLength="1" am Pfad */
  animation:strich-ziehen 820ms var(--e-out) 60ms forwards;
}
@keyframes strich-ziehen{to{stroke-dashoffset:0}}

.dazu{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:46ch;margin-bottom:var(--s5)}

/* ── Der Geleitkasten. Anatomie von Aksels GuidePanel geborgt, die Haut
      nicht: dort institutionelles Blau und eine eigene
      Illustrationsfamilie, hier Fadens Pastell und ein Federstrich.

      Aksels Regeln, die ich übernehme:
      genau einer pro Blatt, oben, Text kurz und klar,
      und ausdrücklich NICHT für Meldungen. Deshalb hat er Akzentton,
      während Meldungen Salbeiton haben: zwei Bedeutungen, zwei Töne.

      Und ihr poster-Verhalten: unter 480px steht die Figur über dem
      Text statt daneben. ── */
.geleit{
  display:flex;gap:var(--s4);align-items:flex-start;
  background:var(--accent-tint);border-radius:var(--r-inner);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5);
}
/* Die Zeichenregeln gehoeren an .figur selbst, nicht an .geleit .figur.
   Solange sie am Behaelter hingen, war eine Figur ausserhalb eines
   Geleitkastens ein SCHWARZ GEFUELLTER Klumpen: ohne fill:none faellt
   SVG auf schwarze Fuellung zurueck, und aus dem Vogel wurde eine
   Birne mit Kugelkopf und einem Strich als Schnabel. Genau so stand er
   auf der Designsystem-Seite. */
.figur{width:46px;height:46px;flex:none}
.figur path,.figur circle{
  fill:none;stroke:var(--sage-deep);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.figur .auge{fill:var(--sage-deep);stroke:none}
.geleit .figur{margin-top:-2px}
.geleit p{font-size:15.5px;line-height:1.5;color:var(--ink)}
@media(max-width:480px){.geleit{flex-direction:column;gap:var(--s3)}}
body.handy .geleit{flex-direction:column;gap:var(--s3)}

/* ── Mehr, bei Bedarf. Anatomie von Aksels ReadMore geborgt.

      Zwei ihrer Regeln übernommen, eine davon gegen meinen Instinkt:
      das Etikett ist KEINE Frage. Ihre Nutzertests zeigen, dass "Warum
      fragen wir das?" verwirrt. Ich hätte "Was passiert dort?"
      geschrieben. Also eine Aussage, eine Zeile.
      Und der Inhalt ist ein Absatz, nicht mehr: viel Inhalt hinter einer
      Klappe desorientiert.

      Damit ist die Karte ruhig und die Hilfe trotzdem da. Das löst den
      Widerspruch zwischen "zu textlastig" und "ich brauche Kontext für
      die Wechselschritte". ── */
.mehr{margin-bottom:var(--s5)}
.mehr summary{
  display:inline-flex;align-items:center;gap:var(--s2);
  cursor:pointer;list-style:none;min-height:44px;
  font-size:15px;font-weight:500;color:var(--sage-deep);
  text-decoration:underline;text-decoration-color:var(--line-strong);
  text-underline-offset:4px;
}
.mehr summary::-webkit-details-marker{display:none}
.mehr summary::before{
  content:"";width:9px;height:9px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-answer) var(--e-out);
}
.mehr[open] summary::before{transform:rotate(-135deg) translateY(-2px)}
.mehr p{
  font-size:15.5px;line-height:1.6;color:var(--ink-soft);
  margin-top:var(--s2);max-width:52ch;
}

/* ── Antworten. Ein Klick ist die Antwort, kein Bestätigen danach. ── */
.antworten{display:grid;gap:var(--s3)}
.antwort{
  display:flex;align-items:center;gap:var(--s4);width:100%;text-align:left;
  min-height:52px;padding:var(--s3) var(--s5);cursor:pointer;
  /* Kein #fff: in einem System, in dem jede Flaeche aus --grundton
     abgeleitet ist, war Reinweiss der einzige Ton, der dem Schema nicht
     folgte, und es stand kaelter da als die creme Karte darunter. */
  background:color-mix(in srgb, var(--paper-warm), white 55%);
  border:1.5px solid var(--line);
  border-radius:var(--r-field);
  transition:border-color var(--t-answer) var(--e-out),
             background var(--t-answer) var(--e-out),
             transform var(--t-answer) var(--e-out);
}
[data-theme="dark"] .antwort{background:color-mix(in srgb,var(--paper-warm),white 5%)}
.antwort:hover{border-color:var(--accent-deep);background:var(--accent-tint)}
.antwort:active{transform:translateY(1px)}
.antwort.gewaehlt{border-color:var(--accent-deep);background:var(--accent-tint)}
/* Die gewählte Antwort bleibt kurz stehen, während die anderen weichen.
   Vorher verschwand alles gleichzeitig, das las sich als Abbruch statt
   als Antwort, die angekommen ist. */
.antworten.entscheidet .antwort{opacity:.26;transition:opacity var(--t-answer) var(--e-out)}
.antworten.entscheidet .antwort.gewaehlt{opacity:1}
.antwort .wort{font-size:17.5px;font-weight:500;letter-spacing:-.005em}
.antwort .wohin{display:block;font-size:14px;font-weight:400;color:var(--ink-soft);margin-top:2px}
.antwort .taste{
  margin-left:auto;flex:none;min-width:26px;height:26px;
  display:grid;place-items:center;border-radius:8px 3px 8px 3px;
  background:var(--sage-tint);color:var(--sage-deep);
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
}

/* ── Die Sache, über die entschieden wird. ── */
.sache{
  background:var(--sage-tint);border-radius:var(--r-inner);
  padding:var(--s4) var(--s5);margin-bottom:var(--s5);
}
.sache .oben{
  display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  font-size:14px;color:var(--ink-soft);margin-bottom:var(--s2);
}
.sache .titel{font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
/* Der Textanfang bleibt inline, aber auf zwei Zeilen gedeckelt.
   Eine Klappe kostet 44px Klickfläche, um 54px Text zu verbergen, das
   rechnet sich für einen Absatz nicht. Gedeckelt ist der Gewinn ein
   anderer: die Blatthöhe steht fest, egal wie lang die Mail ist. */
.sache .text{
  font-size:15px;line-height:1.55;color:var(--ink-soft);margin-top:var(--s2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sache .unten{font-size:15px;color:var(--ink-soft);margin-top:var(--s2)}

/* Marker, etwa für einen Anhang. Bedeutung nie allein in der Farbe:
   immer Wort plus Zeichen. */
.marker{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--sand);color:var(--ink);
  border-radius:var(--r-pill);padding:3px 11px 3px 8px;
  font-size:13px;font-weight:600;
}
[data-theme="dark"] .marker{background:var(--sand);color:#20231B}
.marker svg{width:14px;height:14px;flex:none}

/* ── Linkknopf in ein Fachwerkzeug. Sekundär, nicht die Hauptaktion:
      die Arbeit passiert dort, Lerche hält nur den Takt. ── */
.linkknopf{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:48px;padding:var(--s3) var(--s5);
  background:#fff;border:1.5px solid var(--line-strong);
  border-radius:var(--r-pill);color:var(--ink);
  font-size:15.5px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:border-color var(--t-answer) var(--e-out), background var(--t-answer) var(--e-out);
}
[data-theme="dark"] .linkknopf{background:color-mix(in srgb,var(--paper-warm),white 5%)}
.linkknopf:hover{border-color:var(--sage-deep);background:var(--sage-tint)}
.linkknopf svg{width:16px;height:16px;flex:none;stroke:var(--sage-deep)}

/* ── Zahlenreihe, etwa in der Übersicht. ── */
.reihe{display:grid;gap:var(--s2);margin-bottom:var(--s5)}
.reihe div{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
  font-size:16.5px;
}
.reihe div:last-child{border-bottom:none}
.reihe b{
  font-family:var(--display);font-weight:700;font-size:23px;
  font-variant-numeric:tabular-nums;min-width:1.6rem;letter-spacing:-.02em;
}
.reihe .was{flex:1}
.reihe .fertig{color:var(--ink-soft)}
.reihe .fertig b{color:var(--sage-deep)}
.reihe .haken{width:20px;height:20px;flex:none;stroke:var(--sage-deep)}

/* ── Handlung und Ausweg. Nie zwei gleich gewichtete Knöpfe. ── */
.fuss{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s5)}
.haupt{
  background:var(--accent);color:var(--auf-akzent);border:none;
  border-radius:var(--r-pill);padding:15px var(--s6);min-height:52px;
  font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;
  transition:background var(--t-answer) var(--e-out), transform var(--t-answer) var(--e-out);
}
.haupt:hover{background:var(--accent-deep)}
.haupt:active{transform:translateY(1px)}
.ausweg{
  margin-left:auto;background:none;border:none;cursor:pointer;
  color:var(--ink-soft);font-size:15px;font-weight:500;min-height:44px;
  text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;
}
.ausweg:hover{color:var(--ink)}
@media(max-width:560px){
  .fuss{flex-direction:column;align-items:stretch}
  .haupt{width:100%}
  .ausweg{margin:var(--s2) 0 0}
}

/* Der Ausklang. Kursiv, genau eine Stelle je Werkzeug. */
.ausklang{
  font-family:var(--display);font-style:italic;font-weight:500;
  font-size:25px;line-height:1.2;letter-spacing:-.015em;margin-top:var(--s5);
}

/* ── Blattwechsel. Ausatmen, einatmen. Kein Sprung, kein Blitzen. ── */
.blatt-pad.geht{animation:blatt-raus var(--t-leave) var(--e-out) forwards}
.blatt-pad.kommt{animation:blatt-rein var(--t-enter) var(--e-out)}
/* Seitlich statt aufwärts: es soll wie Blättern aussehen, nicht wie
   Einblenden. Aufwärts las sich als Sprung, weil die Blätter
   unterschiedlich hoch sind und die Höhe gleichzeitig mitwandert. */
@keyframes blatt-raus{to{opacity:0;transform:translateX(-16px)}}
@keyframes blatt-rein{from{opacity:0;transform:translateX(20px)}}
/* Das Blatt selbst atmet die Höhenänderung mit, damit der Sprung
   zwischen unterschiedlich hohen Ansichten nicht ruckt. min-height, nicht
   height: ein haengengebliebener Mindestwert kann nie abschneiden, er
   laesst hoechstens Luft. Mit height wuerde ein zu kleiner Restwert bei
   overflow:hidden Inhalt verschlucken. */
.blatt{transition:min-height var(--t-enter) var(--e-out)}

/* ── Gerüst zum Durchklicken. Nicht Teil der Oberfläche.

      Steht als Leiste OBEN, nicht als schwebende Knöpfe in den Ecken.
      Gemessen war das der größte Teil des "wirkt fehlerhaft": auf drei
      von sieben Blättern lag ein Gerüstknopf über der Fußzeile, auf
      vier reichte die Karte unten aus dem Fenster. Eine Leiste im Fluss
      kann nichts verdecken. ── */
.geruest-leiste{
  position:relative;z-index:30;
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s3) var(--s5);
  background:color-mix(in srgb, var(--paper), var(--ink) 5%);
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.geruest-leiste .marker-geruest{
  font-size:11.5px;font-weight:600;letter-spacing:.06em;
  color:var(--ink-soft);text-transform:uppercase;
}
.geruest-leiste .rechts{margin-left:auto;display:flex;gap:var(--s3);align-items:center}

/* Segmentregler, wie im Markenkonzept: Pillenschiene, aktives Feld
   hell und leicht erhoben. */
.segment{display:inline-flex;background:color-mix(in srgb,var(--paper),var(--ink) 10%);border-radius:var(--r-pill);padding:4px}
.segment button{
  border:none;background:transparent;cursor:pointer;
  padding:7px var(--s4);border-radius:var(--r-pill);min-height:44px;
  font-family:var(--ui);font-size:13px;font-weight:600;color:var(--ink-soft);
}
/* Schemawähler. Gehört ins Gerüst, nicht in die Oberfläche: die
   Verbotsliste streicht tiefe Konfigurierbarkeit. Hier dient er dem
   Auswählen beim Entwerfen, genau wie im Markenkonzept. */
.schemen{display:inline-flex;gap:6px}
.schemen button{
  /* 28x28 war die kleinste Klickflaeche der ganzen Oberflaeche und lag
     unter den geforderten 44x44. Der Punkt bleibt 28px sichtbar, die
     Flaeche wird 44px. Die Farbe kommt aus --punkt und wird auf einem
     Pseudoelement gemalt: als Inline-"background" hat die
     Kurzschreibweise background-clip zurueckgesetzt, und der Punkt war
     doch 44px gross. */
  position:relative;width:44px;height:44px;min-height:44px;
  border:none;background:transparent;padding:0;cursor:pointer;
  border-radius:50%;
}
.schemen button::before{
  content:"";position:absolute;inset:8px;border-radius:50%;
  background:var(--punkt, var(--accent));
}
.schemen button.an::after{
  content:"";position:absolute;inset:4px;border-radius:50%;
  border:2px solid var(--ink);
}
.segment button.an{
  background:var(--paper-warm);color:var(--ink);
  box-shadow:0 2px 6px rgba(43,46,40,.12);
}
[data-theme="dark"] .segment button.an{box-shadow:0 2px 6px rgba(0,0,0,.4)}

.gknopf,.gwechsel{
  background:var(--paper-warm);border:1.5px solid var(--line-strong);color:var(--ink-soft);
  border-radius:var(--r-pill);padding:9px var(--s4);cursor:pointer;
  font-size:13px;font-weight:500;min-height:44px;
  text-decoration:none;display:inline-flex;align-items:center;
}
.geruest{position:relative}
.gpanel{
  display:none;position:absolute;left:0;top:46px;width:290px;
  background:var(--paper-warm);border:1.5px solid var(--line-strong);
  border-radius:var(--r-card);padding:var(--s4);
  box-shadow:0 14px 34px -12px rgba(43,46,40,.32);
}
.gpanel.auf{display:block}
.gpanel p{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:var(--s3)}
.gpanel a{
  display:block;padding:8px var(--s3);color:var(--ink-soft);text-decoration:none;
  border-radius:10px 3px 10px 3px;font-size:14px;cursor:pointer;
}
.gpanel a:hover{background:var(--sage-tint);color:var(--ink)}
.gpanel a.jetzt{background:var(--accent-tint);color:var(--ink);font-weight:600}
/* ── Handy-Blick. Gerüst, nicht Teil der Oberfläche.

      Nach dem Vorbild aus dem Markenkonzept: ein leichter Rahmen mit
      28px Radius und Papierhintergrund, feste 340x640, Inhalt oben
      ausgerichtet. Kein schwerer Tinte-Bezel, der war Selbstzweck und
      hat den Inhalt zusammengedrückt. Der Faden liegt IM Rahmen, nicht
      dahinter, und ist die hohe Fassung. Innen wird gescrollt, so wie
      ein Telefon eben scrollt.

      Die 560px-Regel bleibt unberührt, sie ist eine Obergrenze. ── */
.geraet{width:100%;max-width:var(--col);position:relative}
body.handy .buehne{padding:var(--s4);justify-content:flex-start}
/* ── Echte Geraetemasse ───────────────────────────────────────────────
   Vorher 340 mal 640, und die Hoehe rechnete gegen das Fenster: bei
   knappem Fenster wurde daraus ein gestauchter Kasten, also kein
   Telefon. Jetzt 390 mal 844 Punkte, das Verhaeltnis eines heutigen
   Geraets (2,16 zu 1), und zwar FEST. Passt es nicht ins Fenster, wird
   das ganze Geraet maszstaeblich verkleinert (--zoom vom Skript). Die
   Seite rollt im Handymodus nicht, gerollt wird innen. ── */
body.handy{height:100dvh;overflow:hidden}
body.handy .geraet{
  width:390px;max-width:390px;height:844px;flex:none;
  transform:scale(var(--zoom,1));transform-origin:top center;
  border-radius:38px;overflow:hidden;
  background:var(--paper-warm);
  box-shadow:0 24px 50px -18px rgba(43,46,40,.22);
}
[data-theme="dark"] body.handy .geraet{box-shadow:0 20px 44px rgba(0,0,0,.5)}
body.handy .geraet .spalte{
  position:relative;z-index:2;max-width:none;height:100%;
  overflow-y:auto;padding:var(--s4) var(--s4) var(--s5);
  /* Ein Desktop-Rollbalken samt Pfeilen mitten im Telefonrahmen war
     das Erste, was an der Smartphone-Ansicht falsch aussah. */
  scrollbar-width:thin;
  /* Kein durchsichtiges Gemisch: der Browser hat daraus einen fast
     schwarzen Daumen gemacht. Deckender heller Ton. */
  scrollbar-color:color-mix(in srgb, var(--paper-warm), var(--ink) 24%) transparent;
}
body.handy .marke{padding-left:0}
body.handy .blatt{border-radius:20px 6px 20px 6px}
body.handy .blatt-pad{padding:var(--s4) var(--s4) var(--s4)}
body.handy .punkte{padding:var(--s4) var(--s4) 0}
body.handy .frage{font-size:25px;letter-spacing:-.015em}
body.handy .antwort{padding:var(--s3) var(--s4)}
body.handy .fuss{flex-direction:column;align-items:stretch;gap:var(--s3)}
body.handy .haupt{width:100%}
body.handy .ausweg{margin:0;text-align:center}
body.handy .strich{width:140px}

/* ── Checkliste. Ein Marker für alle Zeilen, nicht ein Haken neben
      Zahlen: ein Haken und eine Zahl sind keine vergleichbaren
      Zustände. Offen ist ein leerer Kreis, erledigt ein gefüllter mit
      Haken. Keine Trennlinien, das war Datenblatt-Sprache. Und kein
      Fragezeichen als Wert, das liest sich als Fehler. ── */
.liste{display:grid;gap:var(--s1);margin-bottom:var(--s5)}
.liste .zeile{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s2) 0;font-size:16.5px;
}
.liste .kreis{
  width:24px;height:24px;flex:none;border-radius:50%;
  border:2px solid var(--line-strong);position:relative;
  transition:background var(--t-answer) var(--e-out), border-color var(--t-answer) var(--e-out);
}
.liste .zeile.durch .kreis{background:var(--accent);border-color:var(--accent-deep)}

/* ── Das Häkchen. Kein Rahmen-Trick mit zwei Borders, sondern ein
      gezeichneter Strich: derselbe Federzug wie überall, mit
      Wobble-Filter, und er schwingt bewusst über den Kreisrand hinaus.
      Ein Haken, der brav im Kreis bleibt, sieht gesetzt aus, einer der
      übersteht sieht geschrieben aus.

      Gezeichnet wird er beim ersten Erscheinen, 420ms, mit kleiner
      Staffelung je Zeile, damit eine Liste nacheinander abgehakt wirkt
      und nicht auf einen Schlag. Der Kreis muss dafür overflow sichtbar
      lassen. ── */
.liste .kreis{overflow:visible}
.haken-strich{
  position:absolute;left:-5px;top:-7px;width:36px;height:32px;
  overflow:visible;pointer-events:none;
}
.haken-strich path{
  fill:none;stroke:var(--auf-akzent);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:haken-schreiben 420ms var(--e-out) forwards;
  animation-delay:var(--verzug,0ms);
}
@keyframes haken-schreiben{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .haken-strich path{animation:none;stroke-dashoffset:0}
}
.liste .was{flex:1;line-height:1.35}
.liste .zeile.durch .was{color:var(--ink-soft)}
.liste .zahl{
  font-family:var(--display);font-weight:600;font-size:15.5px;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;
}

/* Zum Abhaken. Nicht jede Liste ist anklickbar: nur wo man mitzählt,
   während man woanders arbeitet. Das Abhaken ist kein Entschluss,
   sondern Mitschreiben, deshalb bleibt die Hauptaktion daneben immer
   erreichbar und wird nicht davon abhängig gemacht. */
button.zeile{
  width:100%;text-align:left;background:transparent;border:none;
  cursor:pointer;font:inherit;min-height:44px;
  border-radius:var(--r-field);padding:var(--s2) var(--s3);
  transition:background var(--t-answer) var(--e-out);
}
button.zeile:hover{background:var(--sage-tint)}
button.zeile .was{font-size:16.5px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .faden-bg path,.strich path{stroke-dashoffset:0}
}

/* ── Eine einzige Antwort IST die Hauptaktion ──────────────────────────
   Auf Blättern wie "Kurz nach Personio?" stand genau eine Antwortkarte
   im Antwortbereich und kein Akzentknopf daneben. Die Karte sah damit
   aus wie ein leeres Eingabefeld: das schwächste Element des Blattes
   war das, das weitergeht. 1Q1T verlangt eine Hauptaktion, also trägt
   die einzige Antwort den Akzent. Die Zifferntaste entfällt, wo es
   nichts zu wählen gibt. ── */
.antworten > .antwort:only-child{
  justify-content:center;
  background:var(--accent);border-color:var(--accent-deep);
  color:var(--auf-akzent);font-weight:600;min-height:52px;
  border-radius:var(--r-pill);
}
.antworten > .antwort:only-child:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.antworten > .antwort:only-child .taste{display:none}
.antworten > .antwort:only-child .wohin{color:var(--auf-akzent);opacity:.72}

/* ── Die Gerüstleiste bei knapper Breite ──────────────────────────────
   margin-left:auto auf .rechts drückt die beiden rechten Knöpfe beim
   Umbruch in eine eigene Zeile und lässt deren linke Hälfte leer: aus
   68px Leiste wurden 127px, und das über einer Oberfläche, deren ganzer
   Zweck Ruhe ist. Unter 1040px fällt die Gerüst-Marke weg, unter 900px
   der automatische Rand, damit die zweite Zeile links anschließt. ── */
@media(max-width:1040px){
  .geruest-leiste{gap:var(--s3);padding:var(--s3) var(--s4)}
  .geruest-leiste .marker-geruest{display:none}
}
@media(max-width:900px){
  .geruest-leiste .rechts{margin-left:0}
}

/* ── Was im Telefonrahmen unter die Falz gerutscht war ────────────────
   Gemessen: der Inhalt war 186px höher als der Rahmen, also stand die
   Hauptaktion auf jedem Blatt unter der Falz. 1Q1T verlangt eine
   sichtbare Hauptaktion. Der Geleitkasten stapelte Vogel über Text und
   kostete allein rund 46px, ohne dass die Zeile bei 340px zu eng wäre.
   Der Rollbalken bleibt für die langen Blätter, aber schmal. ── */
body.handy .geraet .spalte::-webkit-scrollbar{width:6px}
body.handy .geraet .spalte::-webkit-scrollbar-track{background:transparent}
body.handy .geraet .spalte::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--paper-warm), var(--ink) 24%);border-radius:999px;
}
body.handy .geleit{flex-direction:row;align-items:flex-start;gap:var(--s3)}
body.handy .geleit .figur{width:38px;height:38px;flex:none}
body.handy .geleit p{font-size:15px;line-height:1.45}
body.handy .band{margin:var(--s3) var(--s4) 0}
body.handy .band + .punkte{padding-top:var(--s3)}
body.handy .liste{gap:2px;margin-bottom:var(--s4)}

/* ── Programmatischer Fokus auf der Frage ─────────────────────────────
   Beim Blattwechsel wandert der Fokus auf die h1, damit Screenreader
   und Tastatur am neuen Anfang stehen. Sichtbar war das ein 2,4px
   dunkler Kasten um die Frage: das lauteste Element des Blattes, und es
   sah nach Fehlermeldung aus. Die Frage ist nichts, was man bedient,
   also braucht sie auch keinen Fokusring. Der Fokus selbst bleibt. ── */
.frage[tabindex="-1"]:focus{outline:none}

/* ── Der Telefonrahmen IST die Karte ──────────────────────────────────
   Im Handymodus lag im Rahmen noch eine zweite creme Karte. Zwei
   geschachtelte creme Kaesten: der Faden im Rahmen war komplett
   verdeckt, und der Rahmen war als Gerät nicht zu erkennen, weil man
   seine Kante gar nicht sah. Im Vorbild traegt das Gerät selbst die
   Flaeche und der Strich liegt darauf. Also nimmt das Blatt im
   Telefonmodus seinen Hintergrund, seine Kante und seinen Schatten
   zurueck. ── */
body.handy .blatt{
  background:transparent;border:none;box-shadow:none;border-radius:0;
}
body.handy .blatt-pad{padding:var(--s4) var(--s2) var(--s4)}
body.handy .punkte{padding:var(--s3) 0 0}
body.handy .band{margin:var(--s2) 0 0}
/* Der Rahmen selbst bekommt die Kante, die das Blatt abgibt, sonst
   verschwimmt er im Seitengrund. */
body.handy .geraet{border:1.5px solid var(--line)}