/* buildwith.enzo Guides, V2. Gemeinsame Grundlage fuer Guide 011 und die
   folgenden. Tokens, Typografie und Komponenten stammen aus dem Stand von
   Guide 008, die Aufteilung ist neu. Doktrin: guide-site/vorlage/v2/LIESMICH.md
   Diese Datei wird von der Seite geladen, nicht eingebettet. Erlaubt ist das,
   weil die Content-Security-Policy fuer style-src bereits 'self' fuehrt. */

/* Schriften */

@font-face { font-family:"Merriweather"; src:url("fonts/merriweather.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face { font-family:"42dot Sans";  src:url("fonts/42dotsans.woff2")  format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Anton";       src:url("fonts/anton.woff2")      format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

/* Tokens, unveraendert aus Guide 008 */

:root {
  --papier:        #f7f4ee;
  --papier-tief:   #eeebe2;
  --papier-karte:  #fdfbf7;

  --tinte:         #14130f;
  --tinte-weich:   #4e4c45;
  --tinte-still:   #6b675e;   /* 15.09.2026: vorher #8a867c, Kontrast 3,5:1 auf Karten, jetzt mind. 4,7:1 */

  --marke:         #57c5fb;
  --marke-tief:    #0771a6;
  --marke-dunkler: #05587f;
  --marke-feld:    #e7f4fd;
  --marke-linie:   rgba(7, 113, 166, 0.22);
  --marke-schleier: rgba(87, 197, 251, 0.30);

  --linie:         rgba(20, 19, 15, 0.13);
  --linie-zart:    rgba(20, 19, 15, 0.07);

  --nacht:         #0f0f0d;
  --nacht-tief:    #0a0a09;
  --nacht-karte:   #171714;
  --nacht-linie:   rgba(255, 255, 255, 0.12);
  --nacht-text:    rgba(255, 255, 255, 0.93);
  --nacht-weich:   rgba(255, 255, 255, 0.62);
  --nacht-still:   rgba(255, 255, 255, 0.58);

  --serif: "Merriweather", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "42dot Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wucht: "Anton", "Arial Narrow", Impact, sans-serif;

  --spalte:   680px;
  --spalte-w: 1200px;
  --rand:     20px;

  --r-klein:   8px;
  --r-karte:   16px;
  --r-gross:   20px;
  --r-sektion: 28px;
  --r-pille:   100vw;

  --kopfhoehe: 88px;

  /* Glas fuer Erklaergrafiken, neu am 12.09.2026. Nur in Schaubildern, nie im Fliesstext. */
  --glas-grund:    rgba(253, 251, 247, 0.62);
  --glas-kante:    rgba(20, 19, 15, 0.10);
  --glas-licht:    rgba(255, 255, 255, 0.90);
  --glas-schatten: 0 1px 2px rgba(20, 19, 15, 0.04), 0 10px 28px rgba(20, 19, 15, 0.07);
  --glas-blur:     14px;
}

@media (min-width: 900px) { :root { --rand: 28px; } }

/* Grundlage */

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

html { -webkit-text-size-adjust:100%; }

/* Zwei Lagen auf dem Grund, beide bewusst unter der Wahrnehmungsschwelle:
   das Punktraster aus Guide 008, hier schwaecher, weil es jetzt die ganze
   Seite traegt statt nur den Hero, darunter eine statische Kornkachel.
   Keine Animation, kein Filterlauf, eine Kachel von 3,3 KB.
   Die Lesekarten haben eigene deckende Flaechen und bleiben dadurch ruhig. */
body {
  margin:0; color: var(--tinte);
  background-color: var(--papier);
  background-image:
    radial-gradient(rgba(20,19,15,0.045) 1px, transparent 1px),
    url("korn.png");
  background-size: 22px 22px, 96px 96px;
  font-family: var(--sans); font-size:16px; line-height:1.62;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

img { max-width:100%; height:auto; }

a { color: var(--marke-tief); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline:3px solid var(--marke-dunkler); outline-offset:3px; border-radius:4px;
}

p { margin:0 0 16px; }
p:last-child { margin-bottom:0; }

code {
  font-family: var(--mono); font-size:0.92em;
  background: var(--papier-tief); border-radius:5px; padding:2px 6px;
  overflow-wrap:anywhere;
}

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.springlink {
  position:absolute; left:-9999px; top:0; z-index:100;
  background: var(--nacht); color:#fff; padding:14px 20px;
  border-radius:0 0 var(--r-klein) 0; text-decoration:none; font-weight:700;
}
.springlink:focus { left:0; }

[id] { scroll-margin-top: calc(var(--kopfhoehe) + 12px); }

.huelle { width:100%; max-width: var(--spalte); margin:0 auto; padding:0 var(--rand); }
.huelle--weit { max-width: var(--spalte-w); }
.mitte { text-align:center; }

/* Kopfbalken, uebernommen aus Guide 001 (13.09.2026): schwarze Insel ueber die
   ganze Breite, ab 900 px die Abschnitts-Navigation, darunter der Schrittzaehler.
   Beim Scrollen wird die Insel schmal (.js-eng, gesetzt von guide-v2.js).
   Der Knopf "Guide starten" aus 001 ist auf Wunsch des Betreibers nicht dabei. */

.seitenkopf { position:sticky; top:0; z-index:49; padding:14px 24px 0; }

.insel {
  position:relative; display:flex; align-items:center; gap:16px;
  max-width:1800px; margin:0 auto; min-height:70px;
  padding:8px 8px 16px 22px; border-radius: var(--r-pille);
  background: var(--nacht); color: var(--nacht-text);
  box-shadow: 0 2px 26px rgba(20,19,15,0.22), 0 0 0 1px rgba(255,255,255,0.06);
  transition: max-width .5s cubic-bezier(.16,1,.3,1), padding .35s ease, box-shadow .35s ease;
}
.js-eng .insel {
  max-width:920px;
  box-shadow: 0 6px 34px rgba(20,19,15,0.3), 0 0 0 1px rgba(255,255,255,0.07);
}

.marke {
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  font-family: var(--sans); font-size:16px; font-weight:700; letter-spacing:-0.01em;
  color:#fff; text-decoration:none; white-space:nowrap;
}
.marke__zeichen { width:34px; height:34px; flex:0 0 auto; border-radius:50%; }
.marke__teil { color: rgba(255,255,255,0.45); font-weight:400; }

.nav { display:none; margin:0 auto; gap:28px; }
.nav a {
  display:inline-flex; align-items:center; min-height:44px;
  font-size:14.5px; color: rgba(255,255,255,0.66); text-decoration:none; white-space:nowrap;
  transition: color .2s ease;
}
.nav a:hover { color:#fff; }

.schrittzaehler {
  margin-left:auto; flex:0 0 auto;
  font-family: var(--mono); font-size:12px; letter-spacing:0.06em;
  color: var(--marke); background: rgba(87,197,251,0.12);
  border:1px solid rgba(87,197,251,0.28); border-radius: var(--r-pille);
  padding:6px 12px; white-space:nowrap;
}

/* Pilot 011, 14.09.2026: unter 900 px ist der Schrittzaehler zugleich der
   Knopf fuer die Abschnittsliste. Vorher zeigte er "Schritt 2/3", liess sich
   aber nicht antippen, und mobil gab es keine Sprungmoeglichkeit. Natives
   details, das Skript schliesst die Liste nur nach einem Sprung. */
.kopfmenue { position:relative; margin-left:auto; flex:0 0 auto; }
.kopfmenue > summary { list-style:none; cursor:pointer; }
.kopfmenue > summary::-webkit-details-marker { display:none; }
.kopfmenue__knopf {
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  padding:6px 14px 6px 14px; margin-left:0;
  transition: background-color .2s ease, border-color .2s ease;
}
.kopfmenue[open] .kopfmenue__knopf,
.kopfmenue__knopf:hover { background: rgba(87,197,251,0.2); border-color: rgba(87,197,251,0.5); }
.kopfmenue__pfeil {
  width:6px; height:6px; margin-top:-3px; flex:0 0 auto;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition: transform .2s ease;
}
.kopfmenue[open] .kopfmenue__pfeil { transform:rotate(225deg); margin-top:3px; }
.kopfmenue__liste {
  position:absolute; right:-2px; top:calc(100% + 14px); z-index:60;
  display:grid; gap:2px; width:min(290px, calc(100vw - 40px)); padding:8px;
  background: var(--nacht); border:1px solid var(--nacht-linie); border-radius:22px;
  box-shadow: 0 22px 50px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.04);
}
.kopfmenue__liste a {
  display:flex; align-items:center; gap:12px; min-height:48px; padding:6px 12px;
  border-radius:14px; color: var(--nacht-text); text-decoration:none;
  font-size:15.5px; font-weight:500;
}
.kopfmenue__liste a:hover, .kopfmenue__liste a:focus-visible { background: rgba(255,255,255,0.08); }
.kopfmenue__nr {
  flex:0 0 24px; text-align:center;
  font-family: var(--mono); font-size:12px; font-weight:700; color: var(--marke);
}
.kopfmenue__ort {
  margin-left:auto; font-family: var(--mono); font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase; color: var(--nacht-still);
}
@media (min-width: 900px) { .nav { display:flex; } .schrittzaehler, .kopfmenue { display:none; } }

/* Wortwoertlich uebernommen aus Guide 001, Block .js-eng: Schiene in
   rgba(255,255,255,0.08), gefuellte Strecke als ::after mit Verlauf von
   durchscheinend ueber Markenblau bis fast weiss, doppelter Schein. */
.fortschritt {
  position:absolute; left:26px; right:26px; bottom:7px; height:3px;
  background: rgba(255,255,255,0.08); border-radius: 999px;
  overflow:hidden; pointer-events:none;
}
.fortschritt::after {
  content:""; position:absolute; left:0; top:0; bottom:0;
  width: var(--anteil, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(87,197,251,0.35), var(--marke) 70%, #bfe9ff);
  box-shadow: 0 0 10px rgba(87,197,251,0.9), 0 0 22px rgba(87,197,251,0.45);
  transition: width .15s linear;
}

@media (max-width: 899px) {
  .seitenkopf { padding-left: var(--rand); padding-right: var(--rand); }
  .insel, .js-eng .insel { max-width:100%; }
}
/* Aus 001 uebernommen, dort gemessen: auf 360 px passen Marke und Status nur
   ohne "/ Guides" nebeneinander. */
@media (max-width: 600px) {
  .insel { gap:10px; padding-left:14px; padding-right:8px; }
  .marke__teil { display:none; }
  .marke { min-width:0; flex:0 1 auto; overflow:hidden; }
  .kopfmenue { flex:0 0 auto; margin-left:auto; }
  .seitenkopf {
    padding-left: max(var(--rand), env(safe-area-inset-left));
    padding-right: max(var(--rand), env(safe-area-inset-right));
  }
}

/* Hero */

/* Der Hero fuehrt das Raster in voller Staerke, wie Guide 008. Abstand oben und
   die weiche Aufhellung zum Rand hin wie in Guide 001. */
.hero {
  /* Waagerecht geklippt, senkrecht offen: sonst schneidet die Hero-Unterkante den Schein
     der Reel-Karte als graue Kante ab (15.09.2026 spaet). */
  position:relative; overflow-x:clip; overflow-y:visible; padding:72px 0 8px;
  background-image:
    radial-gradient(rgba(20,19,15,0.085) 1px, transparent 1px),
    url("korn.png");
  background-size: 22px 22px, 96px 96px;
}
.hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 80% at 50% 18%, transparent 30%, var(--papier) 78%);
}
.hero__innen { position:relative; z-index:2; text-align:center; }

/* Hero-Einstieg, uebernommen aus Guide 001: Aufblenden mit leichtem Hub und
   Unschaerfe, gestaffelt wie dort. Laeuft genau einmal beim Laden. */
@keyframes hero-auf {
  from { opacity:0; transform:translateY(20px); filter:blur(8px); }
  to   { opacity:1; transform:none; filter:blur(0); }
}
.js .hero__innen > * { animation: hero-auf .85s cubic-bezier(.25,1,.5,1) both; }
.js .hero__innen > :nth-child(1) { animation-delay:.05s; }
.js .hero__innen > :nth-child(2) { animation-delay:.18s; }
.js .hero__innen > :nth-child(3) { animation-delay:.30s; }
.js .hero__innen > :nth-child(4) { animation-delay:.40s; }
.js .hero__innen > :nth-child(5) { animation-delay:.48s; }
.js .hero__innen > :nth-child(6) { animation-delay:.55s; }
.js .hero__innen > :nth-child(n+7) { animation-delay:.62s; }

/* Konturschrift statt Wasserzeichen. Dieselbe Sprache wie die Reel-Cover:
   fette Anton-Versalien mit Kontur, am Rand angeschnitten. Der Hero klippt
   mit overflow:hidden, es entsteht kein waagerechter Ueberlauf. */
/* Zyklischer Umlauf. Zwei Abzuege desselben Wortes, und die Luecke dazwischen
   ist genau so breit, dass Fensterbreite = Wortbreite + Luecke gilt. Dadurch
   zeigt der linke Rand exakt den Teil, der rechts aus dem Bild laeuft: das Wort
   laeuft ueber die Bildkante hinaus und kommt links zurueck.

   Die Rechnung: --wort ist die Wortbreite je Schriftgrad, am gesetzten Wort
   gemessen. Fuer NOTIZ in Anton sind das 2.074. Ein anderes Wort braucht einen
   eigenen Wert, sonst stimmt der Umlauf nicht mehr. --f ist der Schriftgrad,
   rechts wird daraus abgeleitet, damit der Anschnitt bei jeder Breite gleich
   gewichtet bleibt. Kein Laufband, alles statisch. */
.schleier {
  --f: clamp(76px, 23.5vw, 184px);
  --wort: 2.074;
  position:absolute; top:120px; z-index:1;
  right: calc(var(--f) * -0.83);
  display:flex; align-items:baseline;
  gap: calc(100vw - var(--f) * var(--wort));
  font-family: var(--wucht); font-size: var(--f);
  line-height:0.8; letter-spacing:0.012em;
  color: transparent; -webkit-text-stroke: 1.4px var(--marke);
  opacity:0.5;
  pointer-events:none; user-select:none; white-space:nowrap;
}
.schleier > span { display:block; }
@media (min-width: 700px) { .schleier { -webkit-text-stroke-width:1.8px; } }
@media (min-width: 900px) { .schleier { -webkit-text-stroke-width:2px; } }
/* Ohne Konturschrift faellt es auf die bisherige blasse Fuellung zurueck. */
@supports not (-webkit-text-stroke: 1px #000) {
  .schleier { color: var(--marke-schleier); opacity:1; }
}

/* Hero-Kopf von der Tag-Pille bis zum Hinweis unter den Knoepfen, uebernommen
   aus Guide 001 (13.09.2026). Eine bewusste Abweichung: der Wortroll-Effekt
   beim Ueberfahren der Knoepfe bleibt aus, wie zuvor fuer 011 entschieden. */

@property --ringwinkel { syntax:'<angle>'; initial-value:0deg; inherits:false; }
:root { --ringwinkel: 0deg; }

@keyframes ring-dreh { to { --ringwinkel: 360deg; } }
@keyframes ring-glimm {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(87,197,251,0.35)); }
  50%      { filter: drop-shadow(0 0 6px rgba(87,197,251,0.60)); }
}
@keyframes tag-lauf {
  0%, 42%  { transform: translateY(0); }
  50%, 92% { transform: translateY(-22px); }
  100%     { transform: translateY(-44px); }
}
@keyframes tag-breite {
  0%, 42%  { width: var(--tag-b1); }
  50%, 92% { width: var(--tag-b2); }
  100%     { width: var(--tag-b1); }
}
@keyframes knopf-glanz {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}
@keyframes pfeil-lauf {
  0%   { transform: translateX(0);     opacity: 1; }
  42%  { transform: translateX(22px);  opacity: 0; }
  43%  { transform: translateX(-22px); opacity: 0; }
  100% { transform: translateX(0);     opacity: 1; }
}
@keyframes hinweis-lauf {
  0%        { opacity: 0; transform: translate3d(0, 70%, 0); }
  4%, 29%   { opacity: 1; transform: translate3d(0, 0, 0); }
  33%, 100% { opacity: 0; transform: translate3d(0, -70%, 0); }
}

.tagpille {
  position:relative; display:inline-flex; isolation:isolate;
  border-radius: var(--r-pille); padding:2px; margin-bottom:26px;
}
.tagpille::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius: var(--r-pille); padding:2px;
  background: conic-gradient(from var(--ringwinkel),
    rgba(87,197,251,0.12)   0deg,
    rgba(87,197,251,0.25)  55deg,
    #bfe9fe               100deg,
    var(--marke)          130deg,
    rgba(87,197,251,0.25) 190deg,
    rgba(87,197,251,0.12) 300deg,
    rgba(87,197,251,0.12) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ring-dreh 4.2s linear infinite, ring-glimm 3.2s ease-in-out infinite;
}
.tagpille__innen {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  padding:5px 20px 5px 5px; border-radius: var(--r-pille);
  background: rgba(255,255,255,0.74);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  color: var(--tinte);
}
.tagpille__zeichen {
  flex:0 0 30px; width:30px; height:30px; border-radius:50%;
  overflow:hidden; background: var(--nacht);
  display:inline-flex; align-items:center; justify-content:center;
}
.tagpille__zeichen img { width:26px; height:26px; }
.tagpille__fenster {
  position:relative; height:22px; overflow:hidden;
  --tag-b1: 176px; --tag-b2: 214px;
  width: var(--tag-b1);
  animation: tag-breite 7s cubic-bezier(0.76, 0, 0.24, 1) infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.tagpille__spur {
  display:flex; flex-direction:column; align-items:center;
  animation: tag-lauf 7s cubic-bezier(0.76, 0, 0.24, 1) infinite;
  will-change: transform;
}
.tagpille__spur > span {
  display:block; width:max-content; height:22px; line-height:22px;
  font-size:14px; font-weight:500; white-space:nowrap; letter-spacing:-0.01em;
  color: var(--tinte-weich);
}
.tagpille__spur b { font-weight:500; color: var(--tinte); }
@media (max-width: 480px) {
  .tagpille__innen { gap:8px; padding:5px 15px 5px 5px; }
  .tagpille__spur > span { font-size:13px; }
}

.h-gross {
  font-family: var(--serif); font-weight:300; margin:0;
  font-size: clamp(32px, 5.4vw, 54px); line-height:1.08; letter-spacing:-0.025em;
}
.h-gross.mitte { margin-left:auto; margin-right:auto; }
.hero__zeile { display:block; }
@media (min-width: 820px) { .hero__zeile { white-space:nowrap; } }
/* Der handgezeichnete Strich aus Guide 008, wortwoertlich uebernommen.
   Der gerade Balken davor war der einzige gerade Strich der Marke. */
.h-gross .unter, .h-sektion .unter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.6C58 4.2 132 2.4 298 5.4' fill='none' stroke='%2357c5fb' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:0 100%; background-size:100% 0.14em;
  padding-bottom:0.06em;
}
.h-gross .punkt { color: var(--marke-tief); }

.hero__text { margin:22px auto 0; max-width:58ch; font-size:18px; color: var(--tinte-weich); }

.knopfreihe { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.knopfreihe--hero { justify-content:center; margin-top:32px; }

.wknopf, .wknopf-s {
  position:relative; isolation:isolate; text-decoration:none;
  display:inline-flex; align-items:center;
  min-height:52px; border-radius: var(--r-pille);
}
.wknopf {
  gap:14px; padding:7px 7px 7px 26px;
  font-size:15.5px; font-weight:600; letter-spacing:-0.005em; color:#06212f;
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.wknopf__grund {
  position:absolute; inset:0; z-index:-1; border-radius: var(--r-pille);
  background-color: var(--marke);
  background-image: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.32) 50%, transparent 66%);
  background-size: 260% 100%;
  animation: knopf-glanz 3.8s ease-in-out infinite;
  transition: background-color 0.6s cubic-bezier(0.16,1,0.3,1);
}
.wknopf__grund::before {
  content:""; position:absolute; inset:-2.5px; padding:2.5px; z-index:-1;
  border-radius: var(--r-pille);
  background: conic-gradient(from var(--ringwinkel),
    rgba(87,197,251,0.22)   0deg,
    rgba(87,197,251,0.40)  55deg,
    #bfe9fe               100deg,
    var(--marke)          130deg,
    rgba(87,197,251,0.40) 190deg,
    rgba(87,197,251,0.22) 300deg,
    rgba(87,197,251,0.22) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ring-dreh 4.2s linear infinite;
}
.wknopf:hover .wknopf__grund { background-color:#7ad3fc; }
/* Hover: der Knopf wird groesser und leuchtet. Pfeil und Kreis bleiben, wie sie sind
   (16.09.2026, Betreiber: kein dunkler Kreis, kein laufender Pfeil). */
@media (hover: hover) {
  .wknopf:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 6px rgba(87,197,251,0.16), 0 0 36px rgba(87,197,251,0.45), 0 22px 44px -14px rgba(87,197,251,0.7);
  }
}
.wknopf:active { transform: scale(1.02); }
.wknopf::after {
  content:""; position:relative; z-index:2; flex:0 0 38px;
  width:38px; height:38px; border-radius:50%;
  background: rgba(6,33,47,0.18);
}
.wknopf::before {
  content:""; position:absolute; z-index:3; right:18px; top:50%;
  width:16px; height:16px; margin-top:-8px; pointer-events:none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.wknopf-s {
  gap:11px; padding:8px 24px;
  font-size:15px; font-weight:500; color: var(--tinte);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), color 0.3s ease;
}
@media (hover: hover) {
  .wknopf-s:hover { transform: translateY(-3px); color: var(--marke-dunkler); }
}
.wknopf-s:active { transform: translateY(-1px); }
.wknopf-s__grund {
  position:absolute; inset:0; z-index:-1; border-radius: var(--r-pille);
  background: rgba(255,255,255,0.80); border:1px solid var(--linie);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.wknopf-s:hover .wknopf-s__grund {
  background:#fff; border-color: var(--marke);
  box-shadow: 0 0 0 5px rgba(87,197,251,0.14), 0 0 28px rgba(87,197,251,0.30), 0 16px 34px -12px rgba(87,197,251,0.5);
}
.wmaske { position:relative; z-index:2; flex:none; height:1.5em; line-height:1.5em; overflow:hidden; }
.wwort  { display:block; white-space:nowrap; }

.hinweis {
  display:inline-flex; align-items:center; gap:8px; margin:14px 0 0;
  font-size:13px; font-weight:500; letter-spacing:-0.005em; color: var(--tinte-still);
}
.hinweis svg { flex:none; color: var(--marke-tief); }
.hinweis__rot { display:none; }
@media (max-width: 640px) {
  .hinweis .hinweis__voll {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .hinweis .hinweis__rot { display:grid; overflow:hidden; line-height:1.35; height:1.35em; }
  .hinweis .hinweis__rot > span {
    grid-area: 1 / 1; white-space:nowrap; opacity:0;
    animation: hinweis-lauf 11.4s cubic-bezier(0.22,1,0.36,1) infinite;
    animation-delay: calc(var(--n, 0) * 3.8s);
  }
}

/* Start-Block "Du brauchst", Pilot 011 vom 15.09.2026. Die Schrittfolge steht seit dem
   15.09.2026 spaet als eigene Sektion davor (.abschnitt--weg), ohne Sprunglinks, damit
   kein Sprung an den Voraussetzungen vorbeifuehrt. */
.abschnitt--start { padding-top:12px; }
.abschnitt--weg + .abschnitt--start { padding-top:40px; }
.start {
  display:grid; gap:22px; padding:22px 20px;
  background: var(--papier-karte); border:1px solid var(--linie); border-radius: var(--r-sektion);
  box-shadow: 0 1px 2px rgba(20,19,15,0.03), 0 18px 44px rgba(20,19,15,0.06);
}
@media (min-width: 640px) {
  .start { padding:26px 28px; }
}
.start__titel {
  margin:0 0 12px; font-family: var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color: var(--tinte-weich);
}
.brauchst { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.brauchst li { display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15.5px; line-height:1.5; color: var(--tinte); }
.brauchst__haken {
  width:22px; height:22px; margin-top:1px; border-radius:50%;
  background: var(--marke-feld) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 8.4 6.5 11 12.2 5.2' fill='none' stroke='%2305587f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow: inset 0 0 0 1px var(--marke-linie);
}
.brauchst b { font-weight:650; }

/* Fahrplan, 15.09.2026 spaet nach der Referenz preview.html: eigene Sektion zwischen Hero
   und "Du brauchst", keine Karte, keine Links. Kreise mit Ziffer, der erste in der
   Akzentfarbe, darunter Titel und ein Satz. Ab 1024 px waagerecht an einer Linie,
   darunter senkrecht an derselben Linie. */
.abschnitt--weg { padding-top:36px; }
/* 🔴 Kein Fortschritt beim Scrollen mehr, Entscheidung vom 16.09.2026. Die Schrittfolge steht
   ganz oben und ist beim Lesen der Schritte aus dem Bild, der Effekt war also nicht zu sehen.
   Sie zeigt wieder ruhig den Weg: erster Kreis in der Akzentfarbe, feste Linie. */
.fahrplan { position:relative; display:grid; gap:18px; margin:0; padding:0; list-style:none; }
.fahrplan li { position:relative; display:grid; grid-template-columns:38px minmax(0, 1fr); gap:14px; align-items:start; }
/* Senkrecht: Kreis 38 px, Mitte bei 19 px. Der naechste Kreis liegt 18 px Luecke tiefer,
   die Linie endet also bei -(18 + 19) = -37 px. 2 px breit ab 18 px. */
.fahrplan li:not(:last-child)::before {
  content:""; position:absolute; left:18px; top:19px; bottom:-37px; width:2px; background: var(--marke-linie);
}
.fahrplan__nr {
  position:relative; z-index:1;
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; background: var(--tinte); color:#fff;
  font-family: var(--mono); font-size:15px; font-weight:700;
}
.fahrplan li:first-child .fahrplan__nr { background: var(--marke); color:#06212f; box-shadow: 0 0 0 5px rgba(87,197,251,0.16); }
/* Titelzeile 16 px x 1,35 = 21,6 px, 8 px oben: Mitte bei 18,8 px, auf Hoehe der Kreismitte 19 px. */
.fahrplan__text { display:flex; flex-direction:column; gap:3px; min-width:0; padding-top:8px; }
.fahrplan__wort { font-size:16px; font-weight:650; line-height:1.35; color: var(--tinte); }
.fahrplan__satz { font-size:14px; line-height:1.5; color: var(--tinte-weich); }

/* Aufklappbare Hilfe, lesbar statt Versal-Mono. Tap-Ziel 44 px. */
.hilfe { margin:14px 0 0; border-top:1px solid var(--linie-zart); }
.hilfe > summary {
  display:flex; align-items:center; gap:10px; min-height:46px; cursor:pointer; list-style:none;
  font-size:14.5px; font-weight:600; color: var(--marke-dunkler);
}
.hilfe > summary::-webkit-details-marker { display:none; }
.hilfe > summary::after {
  content:""; width:7px; height:7px; margin-top:-3px; flex:0 0 auto;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg); transition: transform .2s ease;
}
.hilfe[open] > summary::after { transform:rotate(225deg); margin-top:3px; }
.hilfe > summary code { font-size:0.92em; }
.hilfe p { margin:0 0 10px; font-size:15px; line-height:1.55; color: var(--tinte-weich); }
.hilfe p:last-child { margin-bottom:6px; }

/* Abschnitte */

.abschnitt { padding:44px 0 0; }
.abschnitt:last-of-type { padding-bottom:20px; }
/* Die optionalen Klappbloecke am Ende ruecken zusammen, damit sie als eine
   Gruppe gelesen werden und nicht als drei einzelne Abschnitte. Nur der
   Aussenabstand schrumpft, die Innenabstaende der Karten bleiben. */
.abschnitt--anschluss { padding-top:12px; }
/* "Mehr von mir" nach dem Erfolg. Das Reellauf-Band setzt reellauf-bauen.py
   ans Ende dieser Sektion, ausserhalb der huelle, damit es randlos laeuft. */
.abschnitt--mehr .h-sektion { margin-bottom:0; }
/* Reel-Karte und Folge-Karte stehen seit dem 15.09.2026 spaet im Hero, nicht mehr hier.
   Die Ueberschrift des Bands eroeffnet die Sektion. */
.abschnitt--mehr .reellauf { margin-top:22px; }

.kicker {
  display:inline-flex; align-items:center; gap:9px; margin:0 0 10px;
  font-family: var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color: var(--tinte-still);
}
.kicker__pkt {
  width:6px; height:6px; border-radius:50%; flex:0 0 auto; background: var(--marke);
  box-shadow:0 0 9px rgba(87,197,251,0.85);
}
/* Die Schrittnummer bekommt einen von Hand gezogenen Ring, dieselbe
   Strichsprache wie der Unterstrich. Verbessert die Orientierung: welcher
   Schritt gerade laeuft, sieht man jetzt vor dem Lesen. */
.kicker__nr {
  color: var(--marke-tief); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; min-height:22px; padding:1px 6px 2px; margin-right:2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 40' preserveAspectRatio='none'%3E%3Cpath d='M31 4c14.5 0 26 7.2 26 16s-11.5 16-26 16S5 28.8 5 20 16.5 4 31 4c8.6 0 15.1 2.2 19.4 5.6' fill='none' stroke='%2357c5fb' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
}

.h-sektion {
  font-family: var(--serif); font-weight:400; margin:0 0 14px;
  font-size: clamp(24px, 5.6vw, 34px); line-height:1.2; letter-spacing:-0.005em; word-spacing:0.04em;
}


.vorlauf { font-size:16px; color: var(--tinte-weich); margin:0 0 20px; }

/* Belegabzeichen */

.beleg {
  display:inline-block; vertical-align:baseline; margin-left:6px;
  font-family: var(--mono); font-size:10px; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  border-radius: var(--r-pille); padding:3px 9px; white-space:nowrap;
}
.beleg--dok    { color: var(--marke-dunkler); background: var(--marke-feld); border:1px solid var(--marke-linie); }
.beleg--abl    { color:#6b5a12; background:#faf2d8; border:1px solid rgba(107,90,18,0.22); }
.beleg--praxis { color:#4e4c45; background: var(--papier-tief); border:1px solid var(--linie); }

/* Readiness-Check */

.check { display:grid; gap:10px; margin:0 0 18px; padding:0; list-style:none; }
.check__zeile {
  display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start;
  background: var(--papier-karte); border:1px solid var(--linie);
  border-radius: var(--r-karte); padding:15px 16px;
}
.check__haken {
  width:26px; height:26px; border-radius:50%; flex:0 0 auto; margin-top:1px;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--marke-feld); color: var(--marke-dunkler);
  border:1px solid var(--marke-linie);
}
.check__was { margin:0; font-size:15.5px; line-height:1.5; }
/* Die Hilfe je Punkt ist zugeklappt. Wer alle drei Punkte erfuellt, liest
   keine Fehlerhilfe. Natives details, kein Skript, per Tastatur bedienbar. */
.check__hilfe { margin:0 0 -10px; }
.check__hilfe[open] { margin-bottom:0; }
.check__hilfe > summary {
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  cursor:pointer; list-style:none;
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--tinte-still);
}
.check__hilfe > summary::-webkit-details-marker { display:none; }
.check__hilfe > summary::after {
  content:""; width:6px; height:6px; margin-top:-3px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition: transform .2s ease;
}
.check__hilfe[open] > summary::after { transform:rotate(225deg); margin-top:3px; }
@media (hover: hover) { .check__hilfe > summary:hover { color: var(--marke-tief); } }
.check__hilfe p { margin:0 0 8px; font-size:14px; line-height:1.5; color: var(--tinte-weich); }

/* Aktionskarte, der Kern von V2 */

.tat {
  background: var(--papier-karte); border:1px solid var(--linie);
  border-radius: var(--r-sektion); padding:22px;
  box-shadow: 0 1px 2px rgba(20,19,15,0.03), 0 18px 44px rgba(20,19,15,0.05);
}
.tat + .tat { margin-top:16px; }
.tat__titel { font-size:17px; font-weight:700; margin:0 0 8px; letter-spacing:-0.01em; }
.tat__was { font-size:15.5px; color: var(--tinte-weich); margin:0 0 16px; }

/* Auf schmalen Geraeten steht die Marke ueber dem Satz. Nebeneinander
   bliebe fuer den Satz eine zu schmale Spalte. */
.danach {
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  margin-top:18px; border-top:1px dashed var(--linie); padding-top:15px;
  font-size:15px; line-height:1.5;
}
@media (min-width: 560px) { .danach { flex-direction:row; gap:11px; } }
.danach__marke {
  font-family: var(--mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--marke-dunkler);
  background: var(--marke-feld); border:1px solid var(--marke-linie);
  border-radius: var(--r-pille); padding:4px 9px; flex:0 0 auto; margin-top:2px;
}
.danach p { margin:0; }

/* Kopierkasten, uebernommen aus Guide 001 ("Werkzeug", 13.09.2026): schwarze
   Karte im leuchtenden Rahmen, Kopf mit Nummer, Titel, Zweck und Kopierknopf,
   darunter die Handgriffe als Chips und der Text zum Kopieren. Konfiguration
   bricht nie um, Saetze an Codex schon. */

.tat .flow { margin-top:4px; }
.flow .werkzeug { margin:0; border:0; border-radius:22px; background:transparent; color: var(--nacht-text); }
.werkzeug__kopf { display:flex; align-items:flex-start; gap:14px 18px; padding:20px 20px 16px; flex-wrap:wrap; }
.werkzeug__kopf > div { flex:1 1 200px; min-width:0; }
.werkzeug__titel {
  margin:0 0 6px; display:flex; align-items:baseline; gap:10px;
  font-family: var(--serif); font-weight:400; font-size:19px; line-height:1.25; color:#fff;
}
.werkzeug__nr { font-family: var(--mono); font-weight:500; font-size:14px; letter-spacing:0.02em; color: var(--marke); }
.werkzeug__wozu { margin:0; font-size:14.5px; line-height:1.5; color: var(--nacht-weich); max-width:52ch; }
.werkzeug__wozu code { background: rgba(255,255,255,0.08); color: var(--nacht-text); }

.knopf {
  position:relative; z-index:1; flex:0 0 auto; cursor:pointer;
  display:inline-flex; align-items:center; gap:12px; min-height:46px;
  padding:5px 7px 5px 20px; border:0; border-radius: var(--r-pille);
  background: var(--marke); color:#06212f;
  font-family: var(--sans); font-size:14.5px; font-weight:700; letter-spacing:-0.005em;
  box-shadow: 0 0 0 4px rgba(87,197,251,0.14), 0 6px 18px rgba(87,197,251,0.22);
  transition: box-shadow .28s ease, transform .28s cubic-bezier(.22,.61,.36,1), background .2s ease;
}
.knopf__zeichen {
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:50%; background: rgba(6,33,47,0.16); color:#06212f;
  transition: background .2s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  .knopf:hover {
    background:#7ad3fc; transform: translateY(-2px);
    box-shadow: 0 0 0 7px rgba(87,197,251,0.16), 0 12px 30px rgba(87,197,251,0.38);
  }
  .knopf:hover .knopf__zeichen { background: rgba(6,33,47,0.26); transform: translateX(2px); }
}
.knopf:active { transform: translateY(0); box-shadow: 0 0 0 3px rgba(87,197,251,0.18), 0 4px 12px rgba(87,197,251,0.28); }
/* Kurze Rueckmeldung direkt nach dem Klick, gruen wie in 001. */
.knopf[data-kopiert="jetzt"] {
  background:#3ea36f; color:#fff;
  box-shadow: 0 0 0 5px rgba(62,163,111,0.18), 0 8px 22px rgba(62,163,111,0.3);
}
.knopf[data-kopiert="jetzt"] .knopf__zeichen { background: rgba(255,255,255,0.22); color:#fff; }
/* Bleibt, solange die Seite offen ist: der Knopf tritt zurueck, bleibt bedienbar. */
.knopf[data-kopiert="schon"] {
  background: rgba(87,197,251,0.14); color: var(--marke);
  box-shadow: inset 0 0 0 1.5px rgba(87,197,251,0.45);
}
.knopf[data-kopiert="schon"] .knopf__zeichen { background: rgba(87,197,251,0.18); color: var(--marke); }
/* Kopieren ging nicht: kein Gruen, der Text ist stattdessen markiert. */
.knopf[data-kopiert="nein"] { background:#f2c14e; color:#2b1d00; box-shadow: 0 0 0 5px rgba(242,193,78,0.2); }
.knopf[data-kopiert="nein"] .knopf__zeichen { background: rgba(43,29,0,0.14); color:#2b1d00; }

.schrittfolge { margin:0; padding:0 20px 4px; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.schrittfolge li {
  font-size:13px; line-height:1.4; color: var(--nacht-weich);
  border:1px solid var(--nacht-linie); border-radius: var(--r-pille); padding:6px 14px;
}
.schrittfolge li b { color: var(--marke); font-weight:700; margin-right:3px; }

.prompt {
  margin:16px 0 0; padding:18px 20px 22px; overflow-x:auto;
  font-family: var(--mono); font-size:13px; line-height:1.68;
  color: var(--nacht-text); white-space:pre; tab-size:2;
  border-top:1px solid var(--nacht-linie); background: rgba(255,255,255,0.02);
}
.prompt--satz { white-space:pre-wrap; overflow-wrap:break-word; }
/* Lange Prompts eingeklappt (guide-v2.js setzt die Klassen und den Knopf, 16.09.2026). */
.prompt--gekuerzt:not(.prompt--offen) {
  max-height:240px; overflow:hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.prompt__mehr {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:calc(100% - 40px); min-height:44px; margin:4px 20px 18px; padding:0 16px;
  border-radius: var(--r-pille); border:1px solid rgba(87,197,251,0.45);
  background: rgba(87,197,251,0.08); color:#fff;
  font: inherit; font-size:14px; font-weight:600; cursor:pointer;
}
.prompt__mehr::after { content:""; width:8px; height:8px; border-right:2px solid var(--marke); border-bottom:2px solid var(--marke); transform: translateY(-2px) rotate(45deg); }
.prompt__mehr[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.prompt__mehr:hover { background: rgba(87,197,251,0.16); }
.prompt__mehr:focus-visible { outline:3px solid var(--marke); outline-offset:2px; }

/* Merkkasten */

.merk {
  border-left:3px solid var(--marke); background: var(--marke-feld);
  border-radius:0 var(--r-karte) var(--r-karte) 0;
  padding:14px 16px; margin:20px 0 22px; font-size:15px; line-height:1.55;
}
.merk--warn { border-left-color:#c08a12; background:#faf2d8; }
.merk__marke {
  display:block; font-family: var(--mono); font-size:10px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  color: var(--marke-dunkler); margin-bottom:6px;
}
.merk--warn .merk__marke { color:#8a6200; }
/* Einordnung nach der Aktion statt davor: erst machen, dann wissen. */
.merk--nach { margin:18px 0 0; }
.tat .merk { margin:16px 0 0; }

/* Pilot 011, 14.09.2026: kleine Bausteine innerhalb einer Aktionskarte.
   Bewusst ohne eigene Kaesten, damit die Karte die einzige Flaeche bleibt. */

/* Alternative Wege zum selben Ziel, etwa Windows, VS Code, Mac. */
.wege { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.wege li {
  position:relative; padding-left:18px;
  font-size:15px; line-height:1.5; color: var(--tinte-weich);
}
.wege li::before {
  content:""; position:absolute; left:2px; top:0.62em; width:6px; height:6px;
  border-radius:50%; background: var(--marke-tief);
}
.wege b { color: var(--tinte); font-weight:600; }

/* Nummerierte Kontrollen mit einem beobachtbaren Kriterium je Zeile. */
.pruefliste, .beispielweg {
  margin:0; padding:0; list-style:none; counter-reset: punkt; display:grid; gap:12px;
}
.pruefliste li, .beispielweg li {
  position:relative; counter-increment: punkt; padding-left:36px;
  font-size:15.5px; line-height:1.55; color: var(--tinte-weich);
}
.pruefliste li::before, .beispielweg li::before {
  content: counter(punkt); position:absolute; left:0; top:1px;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono); font-size:12px; font-weight:500;
  color: var(--marke-dunkler); background: var(--marke-feld); border:1px solid var(--marke-linie);
}
.pruefliste b, .beispielweg b { color: var(--tinte); font-weight:600; }
/* Das Beispiel ist eine Zeitfolge: gestrichelte Linie statt Kreisnummern-Liste. */
.beispielweg li + li::after {
  content:""; position:absolute; left:12px; top:-12px; height:12px; border-left:1px dashed var(--marke-linie);
}

/* Zugeklappte Nebenfrage innerhalb einer Aktionskarte, Aussehen wie die Readiness-Hilfe. */
.tat__hilfe { margin:14px 0 0; }
.tat__hilfe + .tat__hilfe { margin-top:-6px; }
.tat__hilfe[open] { margin-bottom:0; }

/* Einordnungsfall mit Aufloesung. Die ganze Zeile ist Tap-Ziel. */
.fall {
  border:1px solid var(--linie); border-radius: var(--r-karte); background: var(--papier);
}
.fall + .fall { margin-top:10px; }
.fall > summary {
  display:flex; align-items:center; gap:12px; min-height:48px; padding:12px 14px;
  cursor:pointer; list-style:none;
}
.fall > summary::-webkit-details-marker { display:none; }
.fall__text { flex:1 1 auto; font-size:15px; line-height:1.45; color: var(--tinte); }
.fall__zeig {
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  font-family: var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--marke-dunkler);
}
.fall__zeig::after {
  content:""; width:6px; height:6px; margin-top:-3px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition: transform .2s ease;
}
.fall[open] .fall__zeig::after { transform:rotate(225deg); margin-top:3px; }
@media (hover: hover) { .fall > summary:hover .fall__zeig { color: var(--marke-tief); } }
.fall > summary:focus-visible { outline:3px solid var(--marke); outline-offset:2px; border-radius: var(--r-karte); }
.fall p {
  margin:0; padding:0 14px 13px; font-size:14.5px; line-height:1.5; color: var(--tinte-weich);
}
.fall p b { color: var(--tinte); }
@media (max-width: 420px) {
  .fall > summary { flex-direction:column; align-items:flex-start; gap:6px; }
}

/* Modul C, Vergleich im Deep Dive: bisher verdichten gegen notieren plus
   Ruecksuche. Fehlte bis zum 14.09.2026 ganz, die Figur stand ungestaltet da. */
.mechanik { margin:16px 0 22px; }
.mechanik__paar { display:grid; gap:12px; }
@media (min-width: 560px) { .mechanik__paar { grid-template-columns:1fr 1fr; } }
.mechanik__seite { padding:14px 14px 13px; display:flex; flex-direction:column; gap:10px; }
.mechanik__titel { margin:0; font-size:14.5px; font-weight:700; color: var(--tinte); }
.mechanik__verlauf { display:flex; gap:4px; }
.mechanik__verlauf i { flex:1 1 0; height:6px; border-radius:3px; background: var(--linie); }
.mechanik__seite--neu .mechanik__verlauf i { background: var(--marke-linie); }
.mechanik__karte {
  display:flex; flex-direction:column; gap:4px; padding:10px 12px;
  border:1px solid var(--linie); border-radius:10px; background: var(--papier-karte);
}
.mechanik__karte--notiz { border-color: var(--marke-linie); background: var(--marke-feld); }
.mechanik__kopf {
  font-family: var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--tinte-still);
}
.mechanik__karte--notiz .mechanik__kopf { color: var(--marke-dunkler); }
.mechanik__zeile { font-size:13.5px; line-height:1.4; color: var(--tinte); }
.mechanik__zeile--fehlt { color: var(--tinte-still); text-decoration: line-through; text-decoration-color: rgba(192,80,77,0.7); }
.mechanik__fazit { margin:0; font-size:13px; line-height:1.45; color: var(--tinte-weich); }
.mechanik__rueck {
  display:inline-block; margin-right:4px;
  font-family: var(--mono); font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--marke-dunkler); background: var(--marke-feld);
  border:1px solid var(--marke-linie); border-radius: var(--r-pille); padding:1px 7px;
}
.mechanik__hinweis { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
.mechanik__hinweis .beleg { margin-left:0; }

/* Glas und Schema. Glas bekommt nur, was etwas erklaert: Knoten, Skalen,
   Vergleichsflaechen. Ohne backdrop-filter faellt es auf die Kartenfarbe
   zurueck und bleibt voll lesbar. */
.glas {
  background: var(--glas-grund); border:1px solid var(--glas-kante); border-radius: var(--r-karte);
  box-shadow: inset 0 1px 0 var(--glas-licht), var(--glas-schatten);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(1.15);
  backdrop-filter: blur(var(--glas-blur)) saturate(1.15);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { background: var(--papier-karte); }
}
.schema-hinweis {
  font-family: var(--mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--tinte-still);
}

/* Schritte, Pilot 011 vom 15.09.2026: eine Nummerierung (1 bis 4), je Schritt
   eine Karte, darin nur funktionale Flaechen (Konsole, Datei, Kopierkasten). */

.schritt { padding-top:40px; }
.schritt__kopf { display:flex; align-items:center; gap:12px; margin:0 0 8px; }
.schritt__nr {
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 36px;
  border-radius:50%; background: var(--marke); color:#06212f;
  font-family: var(--mono); font-size:16px; font-weight:700;
  box-shadow: 0 0 0 5px rgba(87,197,251,0.16);
}
.schritt__von {
  font-family: var(--mono); font-size:12px; font-weight:500; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--tinte-weich);
}
/* Ungefaehre Dauer je Schritt, 15.09.2026 spaet nach der Referenz. Ersetzt in 011 die Zeile
   "Schritt n von 4". Rechnung im Audit, Abschnitt 15. */
.schritt__zeit {
  display:inline-flex; align-items:center; margin:0 0 14px; padding:6px 12px;
  border-radius: var(--r-pille); background: var(--papier-karte); border:1px solid var(--linie);
  font-size:13px; font-weight:650; line-height:1.3; color: var(--tinte-weich); white-space:nowrap;
}
/* Unter 1024 px steht die Dauer neben der Nummer, der Titel darunter: spart eine Zeile. */
@media (max-width: 1023px) {
  .schritt__kopfzeile { display:grid; grid-template-columns:auto auto 1fr; align-items:center; column-gap:12px; }
  .schritt__kopfzeile .schritt__kopf { grid-column:1; grid-row:1; }
  .schritt__kopfzeile .schritt__zeit { grid-column:2; grid-row:1; margin:0 0 8px; }
  .schritt__kopfzeile .h-sektion { grid-column:1 / -1; grid-row:2; }
}
.schritt .tat + .tat { margin-top:14px; }

/* Tasten */
kbd {
  display:inline-block; font-family: var(--sans); font-size:0.84em; font-weight:600; line-height:1.3;
  padding:1px 7px 2px; border-radius:6px; white-space:nowrap; color: var(--tinte);
  background:#fff; border:1px solid var(--linie); box-shadow: 0 2px 0 rgba(20,19,15,0.12);
}
.werkzeug kbd { color:#fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); box-shadow:none; }
.tasten { position:relative; display:grid; gap:12px; margin:4px 0 4px; padding:0; list-style:none; }
.tasten li { position:relative; padding-left:30px; font-size:16px; line-height:1.7; color: var(--tinte); }
.tasten li::before {
  content:""; position:absolute; left:6px; top:0.55em; width:10px; height:10px; border-radius:50%;
  background: var(--papier-karte); border:2px solid var(--marke-tief);
}
.tasten li + li::after {
  content:""; position:absolute; left:11px; top:-12px; height:16px; border-left:2px solid var(--marke-linie);
}

/* Konsole: Eingabe und echte Ausgabe. Bewusst ohne Fensterrahmen. */
.konsole {
  margin:6px 0 16px; padding:13px 16px 14px; border-radius:14px;
  background: var(--nacht-karte); color: var(--nacht-text);
  box-shadow: inset 0 0 0 1px var(--nacht-linie);
}
.konsole__marke {
  display:block; margin-bottom:6px;
  font-family: var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--marke);
}
.konsole__marke--antwort, .konsole__marke--echt {
  margin-top:12px; padding-top:10px; border-top:1px dashed rgba(255,255,255,0.14); color:#f2c14e;
}
.konsole__zeile {
  display:block; padding:0; background:none; color:#fff;
  font-family: var(--mono); font-size:15.5px; overflow-wrap:normal;
}
.konsole__zeile::before { content:"> "; color: var(--nacht-still); }
.konsole__text { margin:0; white-space:pre-wrap; font-family: var(--mono); font-size:14px; line-height:1.55; color: var(--nacht-text); }

/* Ausgabe als Spalten: der Wortlaut je Spalte ist echt, nur der Leerraum ist
   an die Breite angepasst. Mobil rutscht die Stufe unter den Namen. */
.ausgabe { display:grid; gap:6px; }
.ausgabe__zeile {
  display:grid; grid-template-columns: minmax(0,1fr) auto; column-gap:12px; align-items:baseline;
  margin:0; padding:6px 10px; border-radius:8px;
  font-family: var(--mono); font-size:13px; line-height:1.4; color: var(--nacht-weich);
}
.ausgabe__name { overflow-wrap:anywhere; }
.ausgabe__stufe { grid-column:1; grid-row:2; font-size:12px; color: var(--nacht-still); }
.ausgabe__wert { grid-column:2; grid-row:1 / span 2; align-self:center; font-weight:700; }
.ausgabe__zeile--treffer { background: rgba(87,197,251,0.14); box-shadow: inset 0 0 0 1px rgba(87,197,251,0.5); color:#fff; }
.ausgabe__zeile--treffer .ausgabe__wert { color: #7ee2a8; }
@media (min-width: 560px) {
  .ausgabe__zeile { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) auto; }
  .ausgabe__stufe { grid-column:2; grid-row:1; }
  .ausgabe__wert { grid-column:3; grid-row:1; }
}

/* Entscheidung nach einem Ergebnis: gut weiter, oder erst etwas tun. */
.entscheid { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.entscheid__zeile {
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:start;
  padding:13px 14px; border-radius:16px; font-size:15.5px; line-height:1.55; color: var(--tinte);
}
.entscheid__zeile--gut { background: rgba(62,163,111,0.09); box-shadow: inset 0 0 0 1px rgba(62,163,111,0.28); }
.entscheid__zeile--tun { background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.entscheid__zeichen {
  width:26px; height:26px; border-radius:50%; background-position:center; background-repeat:no-repeat; background-size:15px;
}
.entscheid__zeile--gut .entscheid__zeichen { background-color:#3ea36f; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.4 11.3 12.5 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.entscheid__zeile--tun .entscheid__zeichen { background-color: var(--marke-tief); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.entscheid__zeile b { font-weight:700; }
.entscheid__nachsatz { margin:12px 0 0; font-size:14.5px; line-height:1.55; color: var(--tinte-weich); }
/* Befehl zum Kopieren, kompakt: dunkle Flaeche, Knopf im Kopf. */
.befehl {
  margin:12px 0 0; padding:12px 14px 14px; border-radius:16px;
  background: var(--nacht-karte); color: var(--nacht-text); box-shadow: inset 0 0 0 1px rgba(87,197,251,0.35);
}
.befehl__kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.befehl__marke { font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--marke); }
.befehl__text {
  margin:10px 0 0; white-space:pre-wrap; overflow-wrap:normal; word-break:normal;
  font-family: var(--mono); font-size:13.5px; line-height:1.55; color:#fff;
}
.befehl__nachsatz { margin:10px 0 0; font-size:14px; line-height:1.55; color: var(--nacht-weich); }
.befehl__nachsatz code { background: rgba(255,255,255,0.10); color: var(--nacht-text); }
.ausgabe__luecke { margin:-2px 0; padding:0 10px; font-family: var(--mono); font-size:12px; line-height:1; color: var(--nacht-still); }
.befehl--eintrag { margin-top:14px; box-shadow: inset 0 0 0 1.5px rgba(87,197,251,0.55), 0 10px 26px rgba(20,19,15,0.12); }
.befehl__text--toml { white-space:pre; overflow-x:auto; }
.befehl__nachsatz kbd { color:#fff; background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); box-shadow:none; }
.schritt__von { text-transform:none; letter-spacing:0.02em; font-size:14px; }
.knopf--klein { min-height:44px; padding:4px 5px 4px 16px; font-size:14px; }
.knopf--klein .knopf__zeichen { width:32px; height:32px; }

/* Weiche: zwei Antworten, nichts vorgewaehlt. Bis zur Wahl steht nur der Hinweis.
   Ohne :has() stehen beide Faelle beschriftet untereinander, die Knoepfe entfallen. */
.weiche { position:relative; min-width:0; margin:14px 0 0; padding:0; border:0; }
.weiche__frage { display:block; margin:0 0 10px; padding:0; font-size:16.5px; font-weight:700; line-height:1.4; color: var(--tinte); }
.weiche__hinweis { margin:0 0 12px; font-size:14.5px; color: var(--tinte-weich); }
.weiche__wahl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px; }
.weiche__radio { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.weiche__option {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:78px; padding:10px 8px; text-align:center; cursor:pointer;
  border:1.5px solid var(--linie); border-radius:18px; background:#fff;
  box-shadow: 0 2px 0 rgba(20,19,15,0.05);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.weiche__wort { font-family: var(--serif); font-size:22px; line-height:1.1; color: var(--tinte); }
.weiche__tun { font-size:14px; color: var(--tinte-weich); }
@media (hover: hover) { .weiche__option:hover { border-color: var(--marke-tief); } }
.weiche__radio:checked + .weiche__option {
  border-color: var(--marke-tief); background: var(--marke-feld); box-shadow: 0 0 0 3px rgba(87,197,251,0.25);
}
.weiche__radio:checked + .weiche__option::after {
  content:""; position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:50%;
  box-shadow: 0 0 0 2px #fff; /* auf der Ecke statt im Feld: verdeckte bei 390 px das Wortende (Nutzertest 034, 04.10.2026) */
  background: var(--marke-tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3 6.8 10.8 11.8 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.weiche__radio:focus-visible + .weiche__option { outline:3px solid var(--marke-dunkler); outline-offset:3px; }

/* 🔴 --fall-abstand gehoert auf .weiche-karte, nicht auf .weiche: der Fall liegt neben dem
   Fieldset, nicht darin. Bis zum 16.09.2026 stand die Variable auf .weiche, der Fall erbte sie
   nie, und margin/padding fielen auf 0 zurueck. Gemessen klebten Linie, Chip und Titel
   aufeinander (0 px und 1 px). */
.weiche-karte { --fall-abstand:20px; }
.weiche__fall { margin-top: var(--fall-abstand); padding-top: var(--fall-abstand); border-top:1px solid var(--linie); }
.weiche__titel {
  display:block; margin:0 0 16px;
  font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-0.01em; color: var(--tinte);
}
/* Der Chip steht ueber dem Titel, nicht in derselben Zeile. */
.weiche__chip {
  display:block; width:fit-content; margin-bottom:12px;
  font-family: var(--mono); font-size:11px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--marke-dunkler); background: var(--marke-feld); border:1px solid var(--marke-linie);
  border-radius: var(--r-pille); padding:3px 9px;
}
.weiche__text { margin:0 0 16px; font-size:15.5px; line-height:1.55; color: var(--tinte-weich); }
.weiche__text:last-child { margin:20px 0 0; }
/* Der Fall "Gefunden" traegt vier dichte Regeln mit viel Code. Sie brauchen mehr Luft
   untereinander und zu den Datei-Ausschnitten als eine normale Liste (16.09.2026). */
.weiche__fall .regeln { gap:14px; margin-top:16px; }
.weiche__fall .wandel { margin:18px 0 6px; }
.weiche__fall .wandel__tat { margin:12px 0; }
.weiche__fall .flow { margin:14px 0 0; }
/* Der gewaehlte Fall klappt auf, statt zu erscheinen: das Raster faehrt von 0fr auf 1fr,
   der Inhalt liegt in .weiche__innen mit overflow:hidden. Vor der Wahl ist der Fall
   unsichtbar und fuer Vorlesewerkzeuge nicht vorhanden (visibility). */
@supports selector(:has(*)) {
  .weiche-karte .weiche__fall {
    display:grid; grid-template-rows:0fr; opacity:0; visibility:hidden;
    margin-top:0; padding-top:0; border-top-width:0;
    transition: grid-template-rows .38s cubic-bezier(0.22,0.61,0.36,1), opacity .25s ease,
                margin-top .38s cubic-bezier(0.22,0.61,0.36,1), padding-top .38s cubic-bezier(0.22,0.61,0.36,1),
                visibility 0s .38s;
  }
  /* Ruhige Rueckmeldung statt Lichtstreifen: die nicht gewaehlte Karte tritt zurueck. */
  .weiche-karte:has(.weiche__radio:checked) .weiche__radio:not(:checked) + .weiche__option { opacity:.55; }
  .weiche__innen { overflow:hidden; min-height:0; }
  /* 🔴 Seit 16.09.2026 fuer jede Weiche: guide-v2.js setzt .ist-gewaehlt an den Fall, dessen
     data-wahl auf den gewaehlten Radio-Knopf zeigt. Die zwei id-Regeln bleiben fuer 011 ohne
     Skript. Vorher klappten nur die Faelle von 011 auf; Guide 016 blieb in Schritt 5 leer. */
  .weiche-karte .weiche__fall.ist-gewaehlt,
  .weiche-karte:has(#treffer-nein:checked) #fall-nein,
  .weiche-karte:has(#treffer-ja:checked) #fall-ja {
    grid-template-rows:1fr; opacity:1; visibility:visible;
    margin-top: var(--fall-abstand); padding-top: var(--fall-abstand); border-top-width:1px;
    transition-delay:0s;
  }
  .weiche-karte:has(.weiche__radio:checked) .weiche__hinweis { display:none; }
}
@supports not selector(:has(*)) {
  .weiche__wahl, .weiche__hinweis { display:none; }
}

.achtung {
  margin:2px 0 18px; padding:13px 15px; border-radius:12px; font-size:15px; line-height:1.55;
  background:#faf2d8; box-shadow: inset 3px 0 0 #c08a12; color: var(--tinte);
}
.achtung code { background: rgba(20,19,15,0.07); }
.weiter-hinweis { margin:16px 0 0; font-size:14.5px; color: var(--tinte-weich); }

/* Datei-Ausschnitt: Vorher, Nachher, markierte Zeilen. Beispiel, kein Screenshot. */
.datei {
  margin:14px 0 0; border-radius:14px; overflow:hidden;
  background: var(--papier-karte); border:1px solid var(--linie);
}
.datei__kopf {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; border-bottom:1px solid var(--linie-zart); background: var(--papier-tief);
  font-family: var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--tinte-weich);
}
.datei__art {
  flex:0 0 auto; color: var(--tinte-weich); border:1px dashed var(--tinte-still);
  border-radius: var(--r-pille); padding:1px 8px; font-size:10.5px;
}
.datei__text {
  margin:0; padding:8px 0; overflow-x:auto; white-space:pre;
  font-family: var(--mono); font-size:13.5px; line-height:1.65; color: var(--tinte);
}
.datei__zeile { display:block; position:relative; min-height:1.65em; padding:0 14px 0 30px; min-width:max-content; }
.datei__zeile--leise { color: var(--tinte-weich); font-style:italic; }
.datei__zeile--neu { background: rgba(87,197,251,0.18); }
.datei__zeile--neu::before { content:"+"; position:absolute; left:12px; color: var(--marke-tief); font-weight:700; }
.datei__zeile--alt { background: rgba(192,80,77,0.09); color: var(--tinte-weich); text-decoration: line-through; text-decoration-color: rgba(192,80,77,0.75); }
.datei__zeile--alt::before { content:"\2212"; position:absolute; left:12px; color:#b04541; font-weight:700; text-decoration:none; }

.wandel { display:grid; gap:0; }
.wandel .datei { margin:0; }
.wandel__tat {
  justify-self:center; display:inline-flex; align-items:center; gap:8px; margin:8px 0; padding:5px 14px;
  font-size:14px; font-weight:600; line-height:1.4; color: var(--marke-dunkler);
  background: var(--papier-karte); border:1px solid var(--marke-linie); border-radius: var(--r-pille);
}
/* Vorher und Nachher bleiben auch am Desktop untereinander: nebeneinander schnitt
   die 29 Zeichen lange Kopfzeile bei 1440 px ab (Render vom 15.09.2026). */

.regeln { display:grid; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.regeln li { position:relative; padding-left:18px; font-size:15px; line-height:1.55; color: var(--tinte-weich); }
.regeln li::before { content:""; position:absolute; left:3px; top:0.62em; width:6px; height:6px; border-radius:50%; background: var(--marke-tief); }
.regeln b { color: var(--tinte); font-weight:650; }
.regeln--eng { margin-top:8px; }

.grenze-satz {
  margin:14px 0 0; padding:10px 14px; border-radius:12px; font-size:14.5px; line-height:1.55;
  color: var(--tinte-weich); background: var(--papier); box-shadow: inset 3px 0 0 var(--linie);
}

/* Umbrueche am Handy, 15.09.2026: kurze Codestuecke nicht mitten im Stueck teilen, lange
   Eintraege auf eine eigene Zeile, die Fehlermeldung umbrechen statt waagerecht wischen. */
.code-fest, .befehl__nachsatz code { white-space:nowrap; }
/* Kein einzelnes Wort allein in der letzten Zeile, Ueberschriften ausgewogen. Browser ohne
   Unterstuetzung brechen wie bisher um. */
p, li, blockquote { text-wrap: pretty; }
.h-sektion, .tat__titel, .weiche__titel, .diagzeile__kopf, .fahrplan__satz, .heroreel__titel { text-wrap: balance; }
.code-zeile { display:block; width:fit-content; max-width:100%; margin-top:6px; }
.diag-zurueck { display:inline-flex; align-items:center; min-height:44px; font-weight:600; }
.code-klein {
  margin:10px 0 0; padding:10px 12px; border-radius:10px; white-space:pre-wrap; overflow-wrap:anywhere;
  background: var(--papier-tief); font-family: var(--mono); font-size:12.5px; line-height:1.5; color: var(--tinte);
}

.systemband__satz { margin:20px 0 0; font-size:16px; line-height:1.6; color: var(--nacht-text); }
/* Weiterweg nach dem Erfolg, am 15.09.2026 spaet aus der verworfenen Finalisierung behalten. */
.systemband__weiter { margin:14px 0 0; font-size:16px; line-height:1.6; color: var(--nacht-text); }
.systemband__weiter a {
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font-weight:700; color: var(--marke); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color: rgba(87,197,251,0.45);
}
.systemband__weiter a:hover { text-decoration-color: var(--marke); }
.optional-kopf {
  margin:0 0 12px; font-family: var(--mono); font-size:12px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--tinte-weich);
}
#hintergrund .diagramm { margin:18px 0; box-shadow:none; }

/* Tabellen, neu am 13.09.2026: Ablageort in Schritt 01, Auswertung des Tests in
   Schritt 02. Echte Tabellen mit Beschriftung; unter 560 px wird jede Zeile zur
   Karte, die Spaltennamen stehen dann ueber dem Wert. */
.tabelle-rahmen { margin:18px 0 0; }
.tabelle {
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:14.5px; line-height:1.45; text-align:left;
  background: var(--papier-karte); border:1px solid var(--linie); border-radius: var(--r-karte); overflow:hidden;
}
.tabelle__titel { margin:0 0 9px; font-size:15.5px; font-weight:700; line-height:1.4; color: var(--tinte); }
.tabelle__titel .beleg { margin-left:6px; vertical-align:2px; }
.tabelle thead th {
  padding:10px 14px; background: var(--papier-tief); border-bottom:1px solid var(--linie);
  font-family: var(--mono); font-size:10.5px; font-weight:500; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--tinte-weich);
}
.tabelle tbody th, .tabelle td { padding:12px 14px; vertical-align:top; border-top:1px solid var(--linie-zart); }
.tabelle tbody tr:first-child th, .tabelle tbody tr:first-child td { border-top:0; }
.tabelle tbody th { font-weight:600; color: var(--tinte); }
.tabelle td { color: var(--tinte-weich); }
.tabelle code { overflow-wrap:normal; word-break:normal; font-size:0.88em; }
.ampel {
  display:inline-block; width:9px; height:9px; margin:0 9px 1px 0; border-radius:50%;
  box-shadow: 0 0 0 3px rgba(20,19,15,0.05);
}
.ampel--gut { background:#3ea36f; }
.ampel--mittel { background:#c08a12; }
.ampel--schlecht { background:#c0504d; }
@media (max-width: 559px) {
  .tabelle thead {
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle tbody th, .tabelle td { display:block; width:100%; }
  .tabelle tr { padding:4px 0; border-top:1px solid var(--linie); }
  .tabelle tbody tr:first-child { border-top:0; }
  .tabelle tbody th, .tabelle td { border-top:0; padding:6px 14px; }
  .tabelle tbody th { padding-top:10px; }
  .tabelle td::before {
    content: attr(data-label); display:block; margin-bottom:1px;
    font-family: var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color: var(--tinte-still);
  }
  .tabelle td:last-child { padding-bottom:12px; }
}

/* Diagramm in Schritt 03: Fuellstand des Kontextfensters ueber die Sitzung.
   Schema ohne Messwerte. Linien als SVG, alle Worte als HTML, damit sie auch
   auf 360 px lesbar bleiben. */
.diagramm {
  margin:6px 0 24px; padding:16px 16px 14px;
  background: var(--papier-karte); border:1px solid var(--linie); border-radius: var(--r-sektion);
  box-shadow: 0 1px 2px rgba(20,19,15,0.03), 0 14px 34px rgba(20,19,15,0.05);
}
.diagramm__kopf { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; margin:0 0 12px; }
.diagramm__titel { font-size:15.5px; font-weight:700; color: var(--tinte); }
.diagramm__flaeche { position:relative; }
.diagramm__flaeche svg { display:block; width:100%; height:auto; overflow:visible; }
.diagramm__grenze { stroke: var(--tinte-still); stroke-width:1.5; stroke-dasharray:5 5; }
.diagramm__achse { stroke: var(--linie); stroke-width:1.5; }
.diagramm__trenner { stroke: var(--linie-zart); stroke-width:1.5; }
.diagramm__kurz { fill:none; stroke: var(--tinte-still); stroke-width:4; stroke-linecap:round; }
.diagramm__ende { fill: var(--papier-karte); stroke: var(--tinte-still); stroke-width:3; }
.diagramm__lang { fill:none; stroke: var(--marke-tief); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.diagramm__rueck, .diagramm__spitze { fill:none; stroke: var(--marke); stroke-width:3; stroke-linecap:round; }
.diagramm__rueck { stroke-dasharray:8 8; }
.diagramm__notiz { fill: var(--marke-feld); stroke: var(--marke-tief); stroke-width:3.5; }
/* Beschriftung im SVG waechst mit: 18 Einheiten ergeben bei 360 px rund 9,5 px. */
.diagramm__text { font-family: var(--mono); font-size:18px; letter-spacing:0.08em; fill: var(--tinte-still); }
.diagramm__fenster {
  display:grid; grid-template-columns: 6.667% 23.333% 25% 25% 20%; margin-top:4px;
  font-family: var(--mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color: var(--tinte-still);
}
.diagramm__fenster > span { text-align:center; white-space:nowrap; }
.diagramm__zeit {
  display:block; margin-top:2px; text-align:right;
  font-family: var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color: var(--tinte-still);
}
.diagramm__legende { display:grid; gap:8px; margin:14px 0 0; padding:12px 0 0; list-style:none; border-top:1px solid var(--linie-zart); }
.diagramm__legende li { display:flex; align-items:baseline; gap:10px; font-size:14px; line-height:1.45; color: var(--tinte-weich); }
.diagramm__legende b { color: var(--tinte); font-weight:600; }
.schluessel { position:relative; top:-3px; flex:0 0 22px; height:4px; border-radius:2px; }
.schluessel--kurz { background: var(--tinte-still); }
.schluessel--lang { background: var(--marke-tief); }
.schluessel--notiz { flex-basis:14px; margin:0 4px; height:14px; top:1px; border-radius:50%; background: var(--marke-feld); box-shadow: inset 0 0 0 3px var(--marke-tief); }
.schluessel--rueck { height:0; border-top:3px dashed var(--marke); border-radius:0; }
.diagramm__beleg { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:12px 0 0; font-size:12.5px; color: var(--tinte-still); }
.diagramm__beleg .beleg { margin-left:0; }
@media (min-width: 560px) {
  .diagramm { padding:20px 22px 18px; }
  .diagramm__legende { grid-template-columns:1fr 1fr; column-gap:22px; }
}
@media (max-width: 400px) {
  .diagramm__fenster { font-size:9px; letter-spacing:0.02em; }
}

/* Die Faustregel nutzt die Danach-Zeile, mit durchgezogener Linie. */
.danach--regel { border-top-style:solid; }
.danach--regel b { color: var(--tinte); font-weight:600; }

/* Kontextueller Weiterweg, z. B. vom gescheiterten Test in die Diagnose. */
.weiter { margin:12px 0 0; font-size:14.5px; line-height:1.5; color: var(--tinte-weich); }
.weiter__link {
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-weight:600; color: var(--marke-tief); text-decoration:underline; text-underline-offset:3px;
}
.weiter__link::after {
  content:""; width:6px; height:6px; flex:0 0 auto;
  border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg);
}

/* Erfolgsband */

/* Das Erfolgsband traegt dieselbe Kornkachel. Sie enthaelt helle und dunkle
   Koerner und wirkt deshalb auf hellem wie auf dunklem Grund. */
.systemband {
  background-color: var(--nacht); color: var(--nacht-text);
  background-image: url("korn.png"); background-size: 96px 96px;
  border-radius: var(--r-sektion); padding:28px 20px; margin-top:4px;
}

/* Die Handschrift als Abbinder, genau einmal je Seite. Ueber mask-image,
   damit die Farbe aus dem CSS kommt und die Datei fuer jeden weiteren
   V2-Guide dieselbe bleibt, statt als Inline-SVG dupliziert zu werden.
   🔴 Quelle ist die Originalvorlage kanal/marke/cheers-freigestellt.png,
   nicht mehr der Vektor-Nachbau. Der Nachbau verlor die feinen Spritzer
   und die auslaufenden Schwuenge, am grossen Render nachgewiesen. */
.signatur { display:flex; justify-content:flex-end; margin:24px 0 0; padding-right:2px; }
.cheers {
  display:block; width:152px; aspect-ratio: 400 / 157;
  background-color: var(--marke);
  -webkit-mask-image: url("cheers.png"); mask-image: url("cheers.png");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  transform: rotate(-2.5deg); transform-origin: right center;
}
@media (min-width: 560px) { .cheers { width:186px; } }
@supports not ((-webkit-mask-image: url("a.svg")) or (mask-image: url("a.svg"))) {
  .signatur { display:none; }
}
.systemband .h-sektion { color:#fff; }
.systemband .vorlauf { color: var(--nacht-weich); }
.systemband .kicker { color: var(--nacht-still); }
/* Code auf dunklem Grund: sonst hell auf hell, am 12.09.2026 am Render gefunden. */
.systemband code { background: rgba(255,255,255,0.10); color: var(--nacht-text); }

.systemkarte { display:grid; gap:11px; margin:20px 0 0; padding:0; list-style:none; }
.systemkarte__zeile {
  display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start;
  background: var(--nacht-karte); border:1px solid var(--nacht-linie);
  border-radius: var(--r-karte); padding:14px 15px;
}
.systemkarte__haken { color: var(--marke); margin-top:2px; }
.systemkarte__wort { margin:0; font-size:15.5px; line-height:1.5; }
.systemkarte__wo {
  display:block; margin-top:4px; font-family: var(--mono); font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; color: var(--nacht-still);
}

/* Klappbloecke: Tiefe, Diagnose, Quellen */

details.tiefe, details.quellen {
  border:1px solid var(--linie); border-radius: var(--r-sektion);
  background: var(--papier-karte); overflow:hidden;
  transition: border-color .2s ease, box-shadow .25s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  details.tiefe:hover, details.quellen:hover {
    border-color: var(--marke-linie); transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(20,19,15,0.07);
  }
}
details.tiefe + details.tiefe { margin-top:14px; }

details.tiefe > summary, details.quellen > summary {
  display:flex; align-items:center; gap:12px; cursor:pointer;
  min-height:60px; padding:14px 18px; list-style:none;
  font-weight:700; font-size:16.5px; letter-spacing:-0.01em;
}
details.tiefe > summary::-webkit-details-marker,
details.quellen > summary::-webkit-details-marker { display:none; }

.tiefe__optional {
  margin-left:auto; flex:0 0 auto;
  font-family: var(--mono); font-size:10px; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase; color: var(--tinte-still);
  border:1px solid var(--linie); border-radius: var(--r-pille); padding:4px 10px;
}
.tiefe__weg {
  width:11px; height:11px; flex:0 0 auto; border-right:2px solid var(--tinte-still);
  border-bottom:2px solid var(--tinte-still); transform:rotate(45deg); margin-top:-4px;
  transition: transform .2s ease;
}
details[open] > summary .tiefe__weg { transform:rotate(225deg); margin-top:2px; }

.tiefe__leib, .quellen__leib { padding:4px 18px 20px; border-top:1px solid var(--linie-zart); }
.tiefe__leib > :first-child, .quellen__leib > :first-child { margin-top:16px; }

.teil + .teil { margin-top:20px; border-top:1px solid var(--linie-zart); padding-top:18px; }
.teil__titel { font-size:16px; font-weight:700; margin:0 0 7px; }
.teil__text { font-size:15.5px; color: var(--tinte-weich); margin:0; }

.diagzeile + .diagzeile { margin-top:14px; border-top:1px solid var(--linie-zart); padding-top:14px; }
.diagzeile__kopf { font-size:15.5px; font-weight:700; margin:0 0 5px; }
.diagzeile__wert { font-size:15px; color: var(--tinte-weich); margin:0; }

.quellen__vor { font-size:14.5px; color: var(--tinte-weich); }
.quellen__sorte {
  font-family: var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--tinte-still); margin:22px 0 10px;
}
.quelle + .quelle { margin-top:16px; }
.quelle {
  border:1px solid var(--linie-zart); border-radius: var(--r-karte);
  padding:14px 15px; background: var(--papier);
}
.quelle__titel { font-size:15px; font-weight:700; margin:0 0 7px; }
/* Mehrere Zitate einer Quelle als Liste: ohne eigenes Listenzeichen, die Zitatlinie reicht (16.09.2026). */
.quelle__zitate { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.quelle__zitat {
  overflow-wrap:anywhere;
  margin:0 0 8px; padding-left:12px; border-left:2px solid var(--marke-linie);
  font-size:14.5px; color: var(--tinte-weich); font-style:italic;
}
.quelle__was { font-size:14px; color: var(--tinte-still); margin:0 0 6px; }
.quelle__wo { font-size:13.5px; margin:0; overflow-wrap:anywhere; }
/* Quellenlinks sind auf dem Handy echte Tap-Ziele, nicht nur Textzeilen. */
.quelle__wo a {
  display:inline-flex; align-items:center; min-height:44px;
  padding:2px 0; overflow-wrap:anywhere;
}

/* Leuchtender Rahmen, uebernommen aus Guide 001 (.flow): ein Farbverlauf dreht
   hinter der Karte, 2 px sichtbar als Rand, dazu ein langsamer Schein. Traegt
   den Kopierkasten, die Reel-Karte und die Folge-Karte. */

.flow {
  position:relative; padding:2px; border-radius:24px;
  overflow:hidden; isolation:isolate;
  box-shadow: 0 0 44px rgba(87,197,251,0.26), 0 24px 70px rgba(0,0,0,0.42);
  animation: flow-puls 3.4s ease-in-out infinite;
}
.flow::before {
  content:""; position:absolute; left:50%; top:50%;
  width:190%; aspect-ratio:1; translate:-50% -50%; z-index:0;
  background: conic-gradient(
    rgba(255,255,255,0.10)   0deg,
    var(--marke)            45deg,
    rgba(255,255,255,0.90)  95deg,
    rgba(87,197,251,0.35)  150deg,
    rgba(255,255,255,0.06) 240deg,
    rgba(255,255,255,0.06) 360deg);
  animation: flow-dreh 4.8s linear infinite;
}
.flow__innen {
  position:relative; z-index:1; border-radius:22px;
  background: var(--nacht-karte); overflow:hidden;
}
.flow__innen::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(140% 180% at 86% 40%, rgba(87,197,251,0.14), transparent 62%);
}
@keyframes flow-dreh { to { rotate: 360deg; } }
@keyframes flow-puls {
  0%, 100% { box-shadow: 0 0 34px rgba(87,197,251,0.18), 0 24px 70px rgba(0,0,0,0.42); }
  50%      { box-shadow: 0 0 54px rgba(87,197,251,0.36), 0 24px 70px rgba(0,0,0,0.42); }
}
/* In hellen Aktionskarten ist der dunkle Fernschatten aus 001 zu schwer. */
.tat .flow { box-shadow: 0 0 30px rgba(87,197,251,0.20), 0 14px 34px rgba(20,19,15,0.16); animation:none; }

/* Folge-Karte: dieselbe Sprache wie die Reel-Karte, aber als Pille und deutlich
   kleiner. Profilbild, ein Satz, zwei Knoepfe. */
.flow--pille { max-width:640px; margin:22px auto 0; border-radius: var(--r-pille); }
.flow--pille::before { width:260%; }
.flow--pille .flow__innen { border-radius: var(--r-pille); }
.folgen__innen { display:flex; align-items:center; gap:14px; padding:9px 9px 9px 10px; }
.folgen__bild {
  position:relative; z-index:1; flex:0 0 48px; width:48px; height:48px; border-radius:50%;
  box-shadow: 0 0 0 2px rgba(87,197,251,0.55), 0 0 14px rgba(87,197,251,0.35);
}
.folgen__text { position:relative; z-index:1; flex:1 1 auto; min-width:0; text-align:left; }
.folgen__kicker {
  display:block; font-family: var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color: var(--nacht-still);
}
.folgen__titel { margin:1px 0 0; font-family: var(--serif); font-weight:400; font-size:16.5px; line-height:1.25; color:#fff; }
.folgen__knoepfe { position:relative; z-index:1; display:flex; gap:8px; flex:0 0 auto; }
.folgen .folgen__knopf {
  display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:46px;
  padding:0 16px; border-radius: var(--r-pille);
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  color:#fff; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.folgen .folgen__knopf:hover { background: var(--marke); border-color: var(--marke); color:#06212f; }
@media (max-width: 559px) {
  .flow--pille, .flow--pille .flow__innen { border-radius:26px; }
  .flow--pille .flow__innen { border-radius:24px; }
  .folgen__innen { flex-wrap:wrap; gap:12px; padding:12px; }
  .folgen__knoepfe { width:100%; }
  .folgen .folgen__knopf { flex:1 1 0; }
}

/* Fusszeile, uebernommen aus Guide 001: dunkle Flaeche mit runder Oberkante und
   Lichtlinie. Neu gegenueber 001: der TikTok-Link. */

.seitenfuss {
  position:relative; z-index:1; overflow:hidden; margin-top:52px; padding:84px 0 56px;
  background: var(--nacht); color: var(--nacht-weich);
  border-radius: var(--r-sektion) var(--r-sektion) 0 0;
}
.seitenfuss::after {
  content:""; position:absolute; left:0; right:0; top:0; height:1px; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16) 22%, rgba(87,197,251,0.34) 50%, rgba(255,255,255,0.16) 78%, transparent);
}
.seitenfuss .huelle { max-width: var(--spalte-w); }
.seitenfuss__oben { display:flex; flex-wrap:wrap; gap:22px 34px; align-items:center; justify-content:space-between; }
.seitenfuss__links { display:flex; flex-wrap:wrap; gap:6px 24px; }
.seitenfuss a {
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  color: var(--nacht-text); text-decoration:none; font-size:15px;
}
.seitenfuss a:hover { color: var(--marke); }
.seitenfuss__rechts { margin:0; font-size:13.5px; color: var(--nacht-still); max-width:62ch; }

/* Bewegung */

.auf { opacity:0; transform:translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.auf.da { opacity:1; transform:none; }
html:not(.js) .auf { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .auf { opacity:1 !important; transform:none !important; transition:none !important; }
  .wknopf, .wknopf-s, .knopf, .tiefe__weg, .check__hilfe > summary::after, .insel,
  .heroreel__knopf svg, .kopfmenue__pfeil, .kopfmenue__knopf, .weiche__option, .hilfe > summary::after { transition:none !important; }
  .tagpille::before, .tagpille__spur, .wknopf__grund, .wknopf__grund::before, .flow, .flow::before { animation:none !important; }
  .tagpille__fenster { animation:none !important; width: var(--tag-b1); }
  .flow::before { background: linear-gradient(120deg, rgba(255,255,255,0.10), var(--marke), rgba(255,255,255,0.10)); }
  .hinweis .hinweis__voll { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; }
  .hinweis .hinweis__rot { display:none; }
  .wknopf:hover, .wknopf-s:hover, .heroreel:hover { transform:none !important; }
  .konsole::after, .befehl::after, .systemband::after { animation:none !important; }
  .weiche-karte .weiche__fall, .weiche__option { transition:none !important; }
  .fortschritt::after { transition:none !important; }
  .js .hero__innen > * { animation:none !important; opacity:1; transform:none; filter:none; }
  .knopf:hover,
  details.tiefe:hover, details.quellen:hover { transform:none !important; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* Breiten */

@media (min-width: 560px) {
  .tat { padding:26px 26px; }
  .werkzeug__kopf { padding:22px 22px 18px; }
  .schrittfolge { padding:0 22px 6px; }
  .prompt { padding:20px 22px 24px; }
  .check__zeile { padding:17px 20px; }
  .systemband { padding:34px 30px; }
  details.tiefe > summary, details.quellen > summary { padding:16px 22px; }
  .tiefe__leib, .quellen__leib { padding:4px 22px 24px; }
}

@media (min-width: 900px) {
  body { font-size:16.5px; }
  .abschnitt { padding:64px 0 0; }
  .abschnitt--anschluss { padding-top:16px; }
}

/* ================================================================
   Breites Raster, Pilot 011 vom 15.09.2026
   Nach der Designanalyse der Vorlage preview.html (Audit Abschnitt 13):
   am Desktop ab 1024 px ein Rahmen bis 1200 px mit zweispaltigen Flaechen,
   Fliesstext behaelt sein Lesemass. Unter 1024 px bleibt alles einspaltig.
   Steht bewusst am Ende der Datei, damit es fruehere Regeln gleicher
   Spezifitaet ueberschreibt.
   ================================================================ */

:root { --rahmen: 1200px; }

.huelle--breit { max-width: var(--spalte); }
.lesetext { max-width: 70ch; }

/* Typografie: Merriweather bleibt, kraeftiger und mit klarerem Abstand der Groessen. */
.h-gross { font-weight:400; font-size: clamp(34px, 5.6vw, 64px); line-height:1.06; letter-spacing:-0.022em; }
.h-sektion { font-weight:400; font-size: clamp(26px, 4vw, 40px); line-height:1.16; }

/* Meta-Zeile im Hero: belegbare Angaben, keine Zeitschaetzung. */
.hero__meta {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px;
  margin:18px 0 0; padding:0; list-style:none;
  font-size:14.5px; font-weight:600; color: var(--tinte-weich);
}
.hero__meta li { display:inline-flex; align-items:center; gap:7px; }
.hero__meta svg { color: var(--marke-tief); flex:0 0 auto; }

/* Zwei Spalten: mobil eine Flaeche, deren Teile per order in Lesereihenfolge
   stehen; am Desktop echte Spalten. */
.zwei { display:flex; flex-direction:column; }
.zwei__spalte { display:contents; }
.o1 { order:1; } .o2 { order:2; } .o3 { order:3; } .o4 { order:4; } .o5 { order:5; }

/* Social-Module: Folge-Kachel und Community-Karte. */
.sozial { display:grid; gap:12px; text-align:left; }
.sozial--hero { display:none; }
.befehl__kopf { display:grid; grid-template-columns: minmax(0,1fr) auto; }
.sozial--mobil { margin-top:22px; }
/* Seit 15.09.2026 stehen Reel- und Folge-Karte am Anfang von #mehr statt vor Schritt 1,
   seit 16.09.2026 untereinander statt zum Wischen: beide sind ohne Geste zu sehen. */
#mehr .sozial--mobil { margin-top:0; margin-bottom:44px; }
/* Das Academy-Feedback steht dagegen oben, direkt unter den Hero-Knoepfen, mit allen drei
   Stimmen. Unten war es die dritte Kachel einer Wischreihe und wurde nicht gefunden. */
.sozial--stimmen { margin-top:26px; text-align:left; }
.sozial--stimmen .sozial__community { padding:16px 18px 14px; }
/* Eine Stimme je Bild statt aller drei: die Karte bleibt flach, die naechste kommt per Wischen.
   Punkte zeigen, wo man ist; das Skript setzt sie beim Scrollen (16.09.2026). */
.sozial__lauf {
  display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:18px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--linie-zart);
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none;
}
.sozial__lauf::-webkit-scrollbar { display:none; }
.sozial--stimmen .sozial__zitat { display:block; margin:0; padding:0; border:0; scroll-snap-align:start; }
.sozial--stimmen .sozial__zitat p { font-size:14.5px; }
.sozial__punkte { display:flex; justify-content:center; gap:7px; margin-top:12px; }
.sozial__punkte span {
  width:6px; height:6px; border-radius:999px; background: var(--linie);
  transition: background-color .25s ease, width .25s ease;
}
.sozial__punkte span.an { width:18px; background: var(--marke-tief); }
.sozial__folgen {
  display:grid; grid-template-columns:48px minmax(0,1fr) 16px; align-items:center; gap:14px;
  min-height:76px; padding:14px 18px 14px 14px; border-radius:16px;
  background: var(--papier-karte); border:1px solid var(--linie);
  box-shadow: 0 1px 2px rgba(20,19,15,0.03), 0 12px 30px rgba(20,19,15,0.06);
  color: var(--tinte); text-decoration:none;
  transition: border-color .2s ease, transform .22s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) { .sozial__folgen:hover { border-color: var(--marke-linie); transform: translateY(-2px); } }
.sozial__bild { width:48px; height:48px; border-radius:50%; box-shadow: 0 0 0 2px var(--marke), 0 0 12px rgba(87,197,251,0.35); }
.sozial__text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sozial__text b { font-size:15.5px; font-weight:700; }
.sozial__text span { font-size:14px; line-height:1.4; color: var(--tinte-weich); }
.sozial__pfeil {
  width:9px; height:9px; justify-self:center;
  border-right:2px solid var(--marke-tief); border-top:2px solid var(--marke-tief); transform:rotate(45deg);
}
.sozial__community {
  padding:16px 18px; border-radius:16px;
  background: var(--papier-karte); border:1px solid var(--linie);
  box-shadow: 0 1px 2px rgba(20,19,15,0.03), 0 12px 30px rgba(20,19,15,0.06);
}
.sozial__kopf { display:flex; align-items:center; gap:12px; }
.sozial__avatare { display:flex; flex:0 0 auto; }
.sozial__avatare > span {
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; margin-left:-9px;
  border-radius:50%; border:2px solid var(--papier-karte);
  font-family: var(--mono); font-size:12px; font-weight:700; color: var(--marke-dunkler); background: var(--marke-feld);
}
.sozial__avatare > span:first-child { margin-left:0; }
.sozial__avatare > span:nth-child(2) { background:#faf2d8; color:#6b5a12; }
.sozial__avatare > span:nth-child(3) { background: var(--papier-tief); color: var(--tinte); }
.sozial__avatare > span:nth-child(4) { background: rgba(62,163,111,0.16); color:#2a7650; }
.sozial__satz { margin:0; font-size:14.5px; line-height:1.4; font-weight:600; color: var(--tinte); }
.sozial__zitat { margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--linie-zart); }
.sozial__zitat p { margin:0; font-size:15px; line-height:1.55; color: var(--tinte); }
.sozial__zitat footer {
  margin-top:8px; font-family: var(--mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color: var(--tinte-weich);
}
/* Die zweite und dritte Stimme nur am breiten Hero, wo die Spalte die Hoehe hat. Mobil und
   zwischen 1024 und 1279 px bleibt die Karte so hoch wie vorher. */
.sozial__zitat--zwei { display:none; }

/* Reel-Karte im Social-Modul, 15.09.2026 spaet. Ersetzt Reel-Karte und Folge-Karte
   am Seitenende. Rahmen und Schein aus .flow, Radius wie die Social-Karten.
   Kompakt waagerecht, ab 1280 px im Hero senkrecht als eigene Mittelspalte. */
.heroreel.flow { display:grid; border-radius:18px; color:#fff; text-decoration:none; }
.heroreel .flow__innen { border-radius:16px; }
.heroreel__innen {
  display:grid; grid-template-columns: 62px minmax(0, 1fr); align-items:center; gap:14px;
  padding:10px 16px 10px 10px;
}
.heroreel__rahmen {
  position:relative; z-index:1; display:block; overflow:hidden; border-radius:10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}
.heroreel__bild { display:block; width:100%; height:auto; aspect-ratio: 800 / 1433; object-fit:cover; object-position:50% 0; }
.heroreel__schild { display:none; }
.heroreel__text { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.heroreel__kicker {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family: var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color: var(--nacht-still);
}
.heroreel__kicker::before {
  content:""; width:6px; height:6px; border-radius:999px; flex:0 0 auto;
  background: var(--marke); box-shadow:0 0 9px rgba(87,197,251,0.85);
}
.heroreel__titel { font-family: var(--serif); font-weight:400; font-size:18px; line-height:1.2; letter-spacing:-0.015em; color:#fff; }
.heroreel__knopf {
  display:inline-flex; align-items:center; gap:7px; margin-top:2px;
  font-size:14.5px; font-weight:700; color: var(--marke);
}
.heroreel__knopf svg { flex:none; transition: transform .2s ease; }
.heroreel:hover .heroreel__knopf svg { transform: translateX(2px); }

/* In der mobilen Reihe schneidet der Wischbereich den weiten Schein von .flow als Streifen
   ab. Dort deshalb der gedaempfte Schein wie in den hellen Aktionskarten (.tat .flow). */
.sozial--mobil .heroreel { box-shadow: 0 0 18px rgba(87,197,251,0.20), 0 8px 20px rgba(20,19,15,0.12); animation:none; }
/* In der schmalen Karte lief "Reel 011 · 55 Sekunden" rechts aus der Karte (360 px, 15.09.2026). */
.sozial--mobil .heroreel__kicker { white-space:normal; letter-spacing:0.1em; }

@media (min-width: 640px) and (max-width: 1023px) {
  .sozial--mobil { grid-template-columns: 1fr 1fr; align-items:stretch; }
  .sozial--stimmen { max-width:520px; }
}
/* 🔴 Keine Wischreihe mehr, 16.09.2026. Hier standen bis dahin die drei Karten in einer
   waagerecht wischbaren Reihe. Das Academy-Feedback lag als dritte Kachel ausserhalb des
   Bildes und wurde nicht gefunden. Jetzt: Feedback oben (.sozial--stimmen), Reel- und
   Folge-Karte unten untereinander. */
@media (max-width: 639px) {
  /* Mobil bleiben Dauer und Geraet: dass es an den Windows-PC geht, soll der Handy-Leser
     sofort sehen. "4 Schritte" zeigt die Schrittfolge, "Codex im Terminal" sagt "Du brauchst". */
  .hero__meta li:nth-child(2), .hero__meta li:nth-child(n+4) { display:none; }
  .hero { padding-top:52px; }
  .sozial--stimmen .sozial__community { padding:14px 16px; }
}

/* Flachere Ebenen: innere Flaechen ohne eigenen Schatten, einheitliche Radien. */
.weiche__option { box-shadow:none; border-radius:16px; }
.konsole, .befehl, .datei, .entscheid__zeile { border-radius:16px; }
.achtung { border-radius:12px; }

.tat--schmal { max-width: calc(var(--spalte) + 80px); }

@media (min-width: 1024px) {
  .huelle--breit { max-width: calc(var(--rahmen) + var(--rand) * 2); }

  /* Hero: Text links, Social-Spalte rechts */
  .hero { padding-top:64px; }
  .hero__innen { display:grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.8fr); gap:64px; align-items:center; text-align:left; }
  .hero__innen .h-gross.mitte { margin-left:0; margin-right:0; text-align:left; }
  .hero__zeile { white-space:normal; }
  .hero__text { margin-left:0; max-width:56ch; }
  .hero__meta { justify-content:flex-start; }
  .knopfreihe--hero { justify-content:flex-start; margin-top:26px; }
  .sozial--hero { display:grid; }
  .sozial--mobil, .sozial--stimmen { display:none; }

  /* Start: Voraussetzungen als zwei Kacheln */
  .start { grid-template-columns:1fr; gap:0; padding:28px 32px 22px; }
  .start__teil { padding:0; }
  .brauchst { grid-template-columns:1fr 1fr; gap:14px 36px; }
  .start .hilfe { max-width:none; }

  /* Fahrplan waagerecht. Die Kreise stehen links in ihrer Spalte: erste Mitte bei 19 px,
     letzte bei (n - 1) / n + 19 px, rechts bleiben also 100 % / n - 19 px frei. 2 px Linie ab 18 px.
     Seit 16.09.2026 fuer jede Anzahl (Guide 016 hat fuenf Schritte): eine Spalte je Schritt,
     die Linie endet ueber --fahrplan-rest am letzten Kreis. Vier Schritte ergeben 25 % wie vorher. */
  .fahrplan { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap:0; --fahrplan-rest:25%; }
  .fahrplan:has(> li:nth-child(3):last-child) { --fahrplan-rest: calc(100% / 3); }
  .fahrplan:has(> li:nth-child(5):last-child) { --fahrplan-rest: 20%; }
  .fahrplan:has(> li:nth-child(6):last-child) { --fahrplan-rest: calc(100% / 6); }
  .fahrplan::before {
    content:""; position:absolute; left:19px; right: calc(var(--fahrplan-rest) - 19px); top:18px; height:2px;
    background: linear-gradient(90deg, var(--marke), var(--marke-linie) 45%);
  }
  .fahrplan li { grid-template-columns:1fr; gap:16px; padding-right:28px; }
  .fahrplan li:not(:last-child)::before { display:none; }
  .fahrplan__text { padding-top:0; gap:4px; }
  .fahrplan__satz { max-width:26ch; text-wrap:balance; }

  /* Schrittkopf: Nummer und Titel auf derselben linken Kante wie die Karte */
  .schritt { padding-top:72px; }
  .schritt__kopfzeile { display:flex; align-items:center; gap:18px; margin-bottom:20px; }
  .schritt__kopfzeile .schritt__kopf { flex-direction:column; align-items:center; gap:6px; margin:0; flex:0 0 auto; }
  .schritt__kopfzeile .schritt__nr { width:48px; height:48px; flex-basis:48px; font-size:19px; }
  .schritt__kopfzeile .schritt__zeit { margin:0 0 0 auto; flex:0 0 auto; }
  .schritt__kopfzeile .h-sektion { margin:0; }
  .schritt .tat + .tat { margin-top:18px; }

  /* Zweispaltige Flaechen */
  .zwei { display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap:0 36px; align-items:start; }
  .zwei__spalte { display:block; min-width:0; }
  .zwei__spalte > :first-child { margin-top:0; }
  .tat, .tat.zwei { padding:30px 32px; }
  .weiche-kopf { align-items:start; }
  .weiche-kopf .weiche { margin-top:0; }
  .weiche-karte { --fall-abstand:26px; }
  .zwei--gleich { grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin-top:14px; }
  .zwei--gleich .datei { margin-top:0; }

  .hero__innen { align-items:end; }

  /* Kopfinsel beim Scrollen so breit wie der Rahmen */
  .js-eng .insel { max-width: var(--rahmen); }

  /* Fuss an derselben Kante wie der Rahmen */
  .seitenfuss .huelle { max-width: calc(var(--rahmen) + var(--rand) * 2); }

  .weiche__fall .zwei__spalte > .datei:first-child { margin-top:0; }
  .weiche__wahl { max-width:560px; }
  .zwei .ausgabe__zeile { grid-template-columns: minmax(0,1fr) auto; }
  .zwei .ausgabe__stufe { grid-column:1; grid-row:2; }
  .zwei .ausgabe__wert { grid-column:2; grid-row:1 / span 2; }

  /* Abschluss: Text links, Haken rechts */
  .systemband.zwei { align-items:center; gap:0 40px; padding:40px 40px 34px; }
  .systemband .systemkarte { margin:0; }
  .systemband .signatur { justify-content:flex-start; }

  /* Klappbloecke: breiter Rahmen, Inhalt mit Lesemass */
  #diagnose .tiefe__leib > *, .quellen__leib > * { max-width:78ch; }
  #hintergrund .tiefe__leib.zwei { padding:8px 28px 28px; }
  #hintergrund .zwei__spalte:last-child { position:sticky; top: calc(var(--kopfhoehe) + 24px); }
}

/* Hero in drei Spalten ab 1280 px, 15.09.2026 spaet: Inhalt links, Reel mittig,
   Folge-Kachel und Community rechts. Die Social-Spalte wird selbst zweispaltig.
   Rechnung bei vollem Rahmen: 1200 - (236 + 24 + 300) - 40 = 600 px fuer den Inhalt,
   genug fuer "Astra-Notizen in Codex" in einer Zeile bei 64 px (gemessen rund 585 px).
   Den vollen Rahmen gibt es ab 1200 + 2 x 28 Rand = 1256 px; bei 1200 px waeren es nur
   544 px und die Headline braeche dreizeilig. Darunter bleibt die Spalte kompakt.
   Das Wort NOTIZ ueber der Spalte ist seit dem 15.09.2026 spaet entfernt. */
@media (min-width: 1280px) {
  .hero__innen { grid-template-columns: minmax(0, 1fr) 560px; gap:40px; }
  .sozial--hero {
    grid-template-columns: 236px 300px; grid-template-areas: "reel folgen" "reel community";
    grid-template-rows: auto 1fr; gap:12px 24px; align-items:stretch;
  }
  .sozial--hero .heroreel { grid-area: reel; align-self:end; }
  .sozial--hero .sozial__folgen { grid-area: folgen; }
  .sozial--hero .sozial__community { grid-area: community; }
  .sozial--hero .sozial__zitat--zwei { display:block; }
  /* 🔴 16.09.2026, Betreiber: Die rechte Spalte darf nie ueber die Reel-Kachel hinausragen und die
     Kachel bleibt immer gleich gross. Vorher wuchs das Raster mit der Feedback-Karte, die Kachel
     rutschte nach unten und die Folge-Kachel stand oben ueber (gemessen: 011 um 12 px, 013 und 015
     um 105 px). Jetzt zwei Stimmen statt drei, und die Karte zaehlt fuer die Rasterhoehe nicht mit
     (contain: size): die Hoehe gibt die Reel-Kachel vor, die Karte fuellt den Rest. */
  .sozial--hero .sozial__zitat--zwei ~ .sozial__zitat--zwei { display:none; }
  .sozial--hero .sozial__community { contain: size; min-height:0; overflow:hidden; }

  .sozial--hero .heroreel__innen { grid-template-columns: minmax(0, 1fr); gap:14px; padding:10px 10px 16px; align-items:start; }
  .sozial--hero .heroreel__rahmen { border-radius:12px; }
  .sozial--hero .heroreel__bild { aspect-ratio: 4 / 5; }
  .sozial--hero .heroreel__schild {
    position:absolute; left:10px; top:10px; z-index:2;
    display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:20px;
    background-color:#363636ba; border:1px solid var(--marke);
    box-shadow: 0 0 0 1px rgba(87,197,251,0.20), 0 0 14px rgba(87,197,251,0.55), inset 0 0 10px rgba(87,197,251,0.16);
    font-size:10px; line-height:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase; color:#fff;
  }
  .sozial--hero .heroreel__schild svg { color: var(--marke); }
  .sozial--hero .heroreel__text { gap:6px; padding:0 6px; }
  .sozial--hero .heroreel__titel { font-size:21px; line-height:1.18; }
  .sozial--hero .heroreel__knopf {
    align-self:stretch; justify-content:center; min-height:44px; margin-top:8px; padding:0 18px;
    border-radius: var(--r-pille); background: var(--marke); color:#06212f;
    transition: background-color .25s ease, color .25s ease;
  }
  /* Der Schatten des Knopfs wurde vom overflow:hidden der .flow-Karte abgeschnitten, deshalb
     wirkte der Hover wie keiner. Jetzt: Knopf wird weiss, Karte hebt sich (unten). */
  .sozial--hero .heroreel:hover .heroreel__knopf { background:#fff; color:#06212f; }
}

/* Klappblock-Kopf: der Pfeil sitzt rechts, auch ohne Zusatzmarke. */
details.tiefe > summary > span:first-child { flex:1 1 auto; }

/* ================================================================
   Neon und Effekte, 15.09.2026 spaet (Audit 011, Abschnitt 18)
   Die Sprache des grossen Kopierkastens aus Guide 001 (.flow: umlaufendes Licht am Rand,
   blauer Schein) auch fuer die schwarzen Kacheln und den Abschluss. Ohne zusaetzliches
   Markup: der Rand ist ein maskierter Ring als ::after, er dreht ueber --ringwinkel wie
   die Tag-Pille. Fuer lange Prompts steht der volle Kasten weiter bereit:
   .flow > .flow__innen > .werkzeug mit .werkzeug__kopf, .schrittfolge und pre.prompt.
   ================================================================ */

.konsole, .befehl, .systemband { position:relative; isolation:isolate; }
.konsole::after, .befehl::after, .systemband::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit; padding:1.5px;
  background: conic-gradient(from var(--ringwinkel),
    rgba(255,255,255,0.06)   0deg,
    var(--marke)            45deg,
    rgba(255,255,255,0.85)  95deg,
    rgba(87,197,251,0.30)  150deg,
    rgba(255,255,255,0.05) 240deg,
    rgba(255,255,255,0.05) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ring-dreh 4.8s linear infinite;
}
/* Leicht versetzt, damit nicht alle Ringe im Gleichschritt laufen. */
.befehl::after { animation-duration: 5.6s; }
.systemband::after { padding:2px; animation-duration: 7.2s; }

/* Schein wie .tat .flow: auf hellem Papier ohne den schweren Fernschatten aus 001. */
.konsole, .befehl { box-shadow: 0 0 26px rgba(87,197,251,0.18), 0 12px 28px rgba(20,19,15,0.14); }
.befehl--eintrag { box-shadow: 0 0 34px rgba(87,197,251,0.28), 0 14px 34px rgba(20,19,15,0.16); }
.hilfe .befehl { box-shadow: 0 0 22px rgba(87,197,251,0.16), 0 10px 24px rgba(20,19,15,0.12); }

/* Abschluss: derselbe Rand, dazu ein langsam atmender Schein. */
.systemband { animation: band-puls 4.2s ease-in-out infinite; }
@keyframes band-puls {
  0%, 100% { box-shadow: 0 0 40px rgba(87,197,251,0.20), 0 26px 60px rgba(20,19,15,0.22); }
  50%      { box-shadow: 0 0 70px rgba(87,197,251,0.38), 0 26px 60px rgba(20,19,15,0.22); }
}

/* Reel-Karte: hebt sich und leuchtet staerker. Das Cover darin bleibt unveraendert
   (16.09.2026, Betreiber: kein Hineinzoomen). */
.heroreel { transition: transform .35s cubic-bezier(0.16,1,0.3,1); }
@media (hover: hover) {
  .heroreel:hover {
    transform: translateY(-4px); animation:none;
    box-shadow: 0 0 60px rgba(87,197,251,0.50), 0 26px 60px rgba(0,0,0,0.32);
  }
  .heroreel:hover .heroreel__knopf { color:#fff; }
  .heroreel:hover .heroreel__knopf svg { transform: translateX(4px); }
}

/* Guide-Nummer als Konturzahl hinter dem Titel, in der Schrift der Cover-Plakette.
   Unterscheidet Guides auf den ersten Blick, auch am Handy ohne Cover im Sichtfeld.
   Rein dekorativ (aria-hidden), die Nummer steht fuer Vorlesewerkzeuge in der Tag-Pille. */
.hero__haupt { position:relative; }
.hero__haupt > :not(.hero__nr) { position:relative; z-index:1; }
/* Mobil steht die Zahl mittig hinter dem Einleitungstext (16.09.2026). Sie liegt deshalb im
   Absatz selbst: unter 1024 px ist er der Bezugsrahmen, darueber bleibt es der Hero-Kopf, und
   die Desktop-Regel weiter unten greift unveraendert. */
@media (max-width: 1023px) {
  .hero__text { position:relative; }
  /* Der Absatz traegt selbst z-index 1 (Regel oben), die Zahl liegt darin hinter seinem Text. */
  .hero__text .hero__nr { z-index:-1; }
}
.hero__nr {
  position:absolute; z-index:0; left:50%; top:50%; translate:-50% -50%;
  font-family: var(--wucht); font-size: clamp(150px, 50vw, 240px); line-height:0.8;
  letter-spacing:0.01em; color:transparent; -webkit-text-stroke: 1.5px var(--marke);
  opacity:0.3; pointer-events:none; user-select:none; white-space:nowrap;
}
@supports not (-webkit-text-stroke: 1px #000) { .hero__nr { color: var(--marke-schleier); opacity:0.5; } }
@media (min-width: 1024px) {
  /* Ab 1024 px ist .hero__text nicht mehr positioniert, Bezug ist wieder der Hero-Kopf. */
  .hero__nr { left:auto; right:-6px; top:-30px; translate:none; font-size:230px; opacity:0.32; -webkit-text-stroke-width:2px; }
}

/* ================================================================
   Aus den Guides 013 bis 016 zusammengefuehrt, 16.09.2026: Vergleichstabelle, die mobil
   zu beschrifteten Zeilen wird (th = Zeilenkopf, td mit data-spalte), dazu Luft zwischen
   einer Liste und dem Absatz danach und, mit .tiefe__leib--luft, zwischen Teilen einer Vertiefung.
   ================================================================ */
.vergleich { width:100%; border-collapse:collapse; font-size:15px; line-height:1.45; }
.vergleich th, .vergleich td { text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid rgba(20,19,15,0.10); }
.vergleich thead th { font-family: var(--mono); font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color: var(--tinte-still); }
@media (max-width: 599px) {
  .vergleich thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .vergleich tr { display:block; padding:10px 0; border-bottom:1px solid rgba(20,19,15,0.10); }
  .vergleich th, .vergleich td { display:block; border:0; padding:3px 0; }
  .vergleich td::before { content: attr(data-spalte) ": "; font-weight:700; }
}
.tat .abstand-oben { margin-top:18px; }
/* Nur mit Zusatzklasse, damit die abgenommene Vertiefung von 011 unveraendert bleibt. */
.tiefe__leib--luft .teil { margin-bottom:22px; }
/* Luft zwischen Bausteinen in den Schrittkarten, 16.09.2026. Stehen Befehl, Kopierkasten,
   Handgriffe oder Pruefpunkte direkt uebereinander, lagen 0 bis 6 px dazwischen (013, 015,
   016 gemessen; 011 stellt sie nie so). Mobil stapelt .zwei als Flex-Spalte, dort fallen
   Raender nicht zusammen, dort traegt deshalb row-gap die Luft statt der Raender. */
@media (min-width: 1024px) {
  .tat .zwei__spalte > :is(.befehl, .flow, .tasten, .entscheid):not(:last-child) { margin-bottom:14px; }
}
@media (max-width: 1023px) {
  .tat.zwei, .tat .zwei { row-gap:16px; }
  :is(.tat.zwei, .tat .zwei) > .zwei__spalte > * { margin-top:0; margin-bottom:0; }
  :is(.tat.zwei, .tat .zwei) > .zwei__spalte > .abstand-oben { margin-top:4px; }
  :is(.tat.zwei, .tat .zwei) > .zwei__spalte > .tat__titel { margin-bottom:-8px; }
}
/* Schrittfolge ab Desktop: kuerzere Eintraege rutschten nach unten, weil das Raster im
   Eintrag die freie Hoehe auf die Zeilen verteilte (015, 11 px, 16.09.2026). */
@media (min-width: 1024px) { .fahrplan li { align-content:start; } }
/* Hero ohne Feedback-Karte (017, 018): die Folge-Kachel steht unten neben der Reel-Kachel
   statt oben mit leerer Flaeche darunter. Vorher seitenlokal in 018. */
@media (min-width: 1280px) {
  .sozial--hero:not(:has(.sozial__community)) { grid-template-areas: "reel folgen"; grid-template-rows: 1fr; }
  .sozial--hero:not(:has(.sozial__community)) .sozial__folgen { align-self:end; }
}
/* Feedback-Kachel ohne Stimmen (017, 018, 16.09.2026): Aufruf statt erfundener Stimmen. */
.sozial__avatare > span svg { display:block; }
.sozial__aufruf p { font-size:14.5px; }
.sozial__aufruflink { margin-top:8px !important; }
.sozial__aufruflink a { font-weight:700; color: var(--marke-tief); text-decoration:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; }
.sozial__aufruflink a:hover { color: var(--marke-dunkler); text-decoration:underline; }
.sozial--hero .sozial__aufruf { display:block; }
/* angleichung-2026-09-16 */
/* Fußzeile auf dem Handy (16.09.2026, wie die Übersicht): Social als runde Symbole, alles kompakt */
@media (max-width: 700px) {
  .seitenfuss { padding: 40px 0 22px; }
  .seitenfuss__oben { gap: 10px; }
  .seitenfuss__links { display:flex; flex-wrap:wrap; align-items:center; gap: 4px 14px; }
  .seitenfuss__sozial { width:44px; height:44px; justify-content:center; gap:0 !important; font-size:0 !important;
    border-radius:50%; border:1px solid rgba(255,255,255,0.18); }
  .seitenfuss__sozial svg { width:19px; height:19px; }
  .seitenfuss__links a:not(.seitenfuss__sozial) { font-size:14px; }
  .seitenfuss__links a:nth-child(2) { margin-right:6px; }
  /* Guides: oben die Symbole, darunter die Textlinks in einer Reihe */
  .seitenfuss__links::before { content:""; order:1; flex-basis:100%; height:0; }
  .seitenfuss__links a:not(.seitenfuss__sozial) { order:2; }
  .seitenfuss__links a:nth-child(2) { margin-right:0; }
  .seitenfuss__rechts { font-size:12px; line-height:1.5; }
}
/* Achtung-Kasten direkt nach der Liste "Du brauchst" (017, 17.09.2026): vorher 2 px Abstand */
.brauchst + .achtung { margin-top:18px; }
/* Schrittzähler im Kopf unter 900 px (17.09.2026, Entwurf B3): nur Schrift, Punkt rechts wie ein Live-Signal,
   kein Rahmen, kein Ausklappmenü mehr. */
@keyframes zaehler-puls { 0% { box-shadow:0 0 0 0 rgba(87,197,251,0.55); } 70%, 100% { box-shadow:0 0 0 7px rgba(87,197,251,0); } }
@media (max-width: 899.98px) {
  .schrittzaehler {
    display:inline-flex; align-items:center; gap:10px; margin-left:auto; flex:0 0 auto; min-height:44px;
    padding:6px 22px 6px 12px; background:none; border:0; border-radius:0;
    font-family: var(--mono); font-size:11.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
    color: rgba(255,255,255,0.8); white-space:nowrap;
  }
  .schrittzaehler::after {
    content:""; width:8px; height:8px; flex:0 0 auto; border-radius:50%; background: var(--marke);
    animation: zaehler-puls 2.4s ease-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) { .schrittzaehler::after { animation:none; } }

/* ================================================================
   Schnellweg, seit 30.09.2026, erster Einsatz Guide 028 und 030.
   Betreiberfeedback: kuerzer, schneller erster Erfolg, Ein-Klick statt Lesen.
   Nur neue Klassen. Keine bestehende Regel ist hier geaendert, deshalb sehen
   alle anderen Guides aus wie vorher (nachgemessen mit guides-pruefen.py).
   ================================================================ */

/* Download-Knopf: stand in 020 nur seitenlokal, jetzt zentral. */
.knopf--laden { text-decoration:none; }
/* Seit 09.10.2026 (Guide 038): .knopf ist fuer <button> gebaut. Als Link erbte er die Unterstreichung des
   Browsers (Zweitaktion im Hero von 037 und 038). guides-pruefen.py meldet das seitdem. */
a.knopf { text-decoration:none; }

/* Kopierknopf auf heller Flaeche. Der Zustand "schon" war fuer dunkle Bloecke gebaut
   (hellblaue Schrift), auf Papier waere das rund 2:1 Kontrast. */
.knopf--hell[data-kopiert="schon"], .knopf--leise[data-kopiert="schon"] {
  background: var(--marke-feld); color: var(--marke-dunkler);
  box-shadow: inset 0 0 0 1.5px var(--marke-linie);
}
.knopf--hell[data-kopiert="schon"] .knopf__zeichen, .knopf--leise[data-kopiert="schon"] .knopf__zeichen {
  background: rgba(7,113,166,0.12); color: var(--marke-dunkler);
}
/* Zweitaktion neben dem Hauptknopf: gleiche Mechanik wie .knopf, aber zurueckgenommen,
   damit genau ein Knopf fuehrt. */
.knopf--leise {
  background: rgba(255,255,255,0.86); color: var(--tinte);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.knopf--leise .knopf__zeichen { background: var(--marke-feld); color: var(--marke-dunkler); }
@media (hover: hover) {
  .knopf--leise:hover { background:#fff; box-shadow: inset 0 0 0 1px var(--marke), 0 0 0 5px rgba(87,197,251,0.14); }
  .knopf--leise:hover .knopf__zeichen { background: var(--marke-feld); }
}
.knopfreihe--hero .knopf { min-height:52px; }

/* Satz unter den Hero-Knoepfen: der Rueckweg, wenn die Anmeldung scheitert. */
.hero__hilfe { margin:14px auto 0; max-width:52ch; font-size:14px; line-height:1.5; color: var(--tinte-weich); }
/* Der Satz gilt dem Handy und dem Instagram-Browser, am Desktop entfaellt er.
   Ausnahme --immer: gilt ueberall, etwa der Sicherheitshinweis von claude.ai bei Prompts aus
   einem Link (030, vom Betreiber am 30.09.2026 im Handtest gesehen). */
@media (min-width: 1024px) { .hero__hilfe { display:none; margin-left:0; } .hero__hilfe--immer { display:block; } }

/* Schnellweg-Layout, Standard seit 01.10.2026 (Betreiber zu 030: „das gefällt mir beides sehr
   gut“). Gilt fuer jeden Guide mit data-budget am <main>, also fuer alle Schnellweg-Guides;
   der Bestand 001 bis 027 bleibt unveraendert.
   1. Schrittfolge und Startleiste am Desktop zentriert. Die Linie der Schrittfolge laeuft von
      Kreismitte zu Kreismitte: die erste Mitte liegt bei einer halben Spalte, also bei
      --fahrplan-rest / 2, rechts ebenso. Mobil bleibt die senkrechte Folge linksbuendig. */
@media (min-width: 1024px) {
  main[data-budget] .fahrplan:has(> li:nth-child(2):last-child) { --fahrplan-rest: 50%; }
  main[data-budget] .fahrplan::before { left: calc(var(--fahrplan-rest) / 2); right: calc(var(--fahrplan-rest) / 2); }
  main[data-budget] .fahrplan li { justify-items:center; text-align:center; padding-right:0; }
  main[data-budget] .fahrplan__text { align-items:center; }
  main[data-budget] .startleiste__titel { text-align:center; }
  main[data-budget] .startleiste__punkt { justify-items:center; text-align:center; }
  main[data-budget] .startleiste .wegwahl { justify-content:center; }
}
/* 2. Hero mit Beispielzeile: .hero__innen--beispiel. Mobil in der Reihenfolge des Markups
      (Text, Knoepfe, Beispiel, Feedback), 44 px ueber dem Beispiel. Am Desktop oben Text und
      Reel-Karte wie immer, das Beispiel als eigene Zeile darunter, 80 px Abstand, mittig bis
      760 px. Der Modifier sitzt an .hero__innen, nicht an der Sektion: reellauf-bauen.py sucht
      woertlich nach <section class="hero". */
.hero__innen--beispiel > .beispiel { margin-top:44px; }
@media (min-width: 1024px) {
  .hero__innen--beispiel { grid-template-areas: "haupt sozial" "beispiel beispiel"; row-gap:80px; }
  .hero__innen--beispiel > .hero__haupt { grid-area: haupt; }
  .hero__innen--beispiel > .sozial--hero { grid-area: sozial; }
  .hero__innen--beispiel > .beispiel { grid-area: beispiel; justify-self:center; width:100%; max-width:760px; margin:0; }
}

/* Beispiel im Hero: echtes Ergebnis, als Beispiel beschriftet. */
.beispiel { margin:26px auto 0; max-width:560px; text-align:left; }
.beispiel__rahmen {
  position:relative; overflow:hidden; border-radius:18px; background: var(--nacht);
  box-shadow: 0 0 0 1px var(--linie), 0 18px 44px rgba(20,19,15,0.14);
}
.beispiel video, .beispiel img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; }
.beispiel__text { margin:10px 2px 0; font-size:13.5px; line-height:1.45; color: var(--tinte-weich); }
.beispiel__text b { color: var(--tinte); font-weight:650; }
@media (min-width: 1024px) { .beispiel { margin-left:0; } }

/* Startleiste: Wo, Konto, Rueckweg. Steht in #kontext, damit die Reel-Karte ihren Platz behaelt. */
.startleiste {
  display:grid; padding:6px 20px;
  background: var(--papier-karte); border:1px solid var(--linie); border-radius: var(--r-sektion);
  box-shadow: 0 1px 2px rgba(20,19,15,0.03), 0 18px 44px rgba(20,19,15,0.06);
}
.startleiste__titel {
  margin:14px 0 2px; font-family: var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color: var(--tinte-weich);
}
.startleiste__punkt { display:grid; grid-template-columns:32px minmax(0,1fr); gap:12px; padding:14px 0; }
.startleiste__punkt + .startleiste__punkt { border-top:1px solid var(--linie-zart); }
.startleiste__nr {
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  background: var(--nacht); color: var(--marke); font-family: var(--mono); font-size:13px; font-weight:700;
}
.startleiste__kopf { margin:4px 0 4px; font-size:16px; font-weight:700; line-height:1.35; color: var(--tinte); }
.startleiste__text { margin:0; font-size:15px; line-height:1.55; color: var(--tinte-weich); }
.startleiste__text + .startleiste__text { margin-top:8px; }
.startleiste .knopf { margin-top:10px; }
.startleiste code { font-size:0.9em; }
@media (min-width: 1024px) {
  .startleiste { grid-template-columns: repeat(3, minmax(0,1fr)); gap:0 28px; padding:6px 28px 22px; }
  .startleiste__titel { grid-column: 1 / -1; margin:18px 0 8px; }
  .startleiste__punkt { grid-template-columns:1fr; gap:10px; padding:0; align-content:start; }
  .startleiste__punkt + .startleiste__punkt { border-top:0; border-left:1px solid var(--linie-zart); padding-left:28px; }
}

/* Welche Oberflaeche: Chips mit Haken oder Kreuz. Das Zeichen steht im Markup (aria-hidden),
   das Wort dafuer als sr-only. */
.wegwahl { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none; }
.wegwahl li {
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  font-size:13.5px; font-weight:600; line-height:1.3;
}
.wegwahl__ja { background: rgba(62,163,111,0.12); color:#1d6641; box-shadow: inset 0 0 0 1px rgba(62,163,111,0.35); }
.wegwahl__nein { background: var(--papier-tief); color: var(--tinte-weich); }
.wegwahl__zeichen { font-weight:700; }

/* Aktion im Schritt: der Knopf, der die Handlung ausloest, dazu das sichtbare Ergebnis. */
.schnell { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0 0; }
.schnell__ergebnis {
  margin:16px 0 0; padding:12px 14px; border-radius:14px; font-size:15px; line-height:1.5;
  background: rgba(62,163,111,0.09); box-shadow: inset 0 0 0 1px rgba(62,163,111,0.28); color: var(--tinte);
}
.schnell__ergebnis b { font-weight:700; }
.schnell__klein { margin:12px 0 0; font-size:14px; line-height:1.5; color: var(--tinte-weich); }

/* Kopierliste: kurze Folgebefehle, jeder mit eigenem Knopf. */
.kopierliste { display:grid; gap:10px; margin:14px 0 0; padding:0; list-style:none; }
.kopierliste__zeile {
  display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center; gap:12px;
  padding:12px 12px 12px 16px; border-radius:16px; background:#fff;
  box-shadow: inset 0 0 0 1.5px rgba(87,197,251,0.45), 0 8px 20px rgba(20,19,15,0.05);
}
.kopierliste__text { margin:0; font-family: var(--sans); font-size:15.5px; line-height:1.45; color: var(--tinte); white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width: 479px) {
  .kopierliste__zeile { grid-template-columns: minmax(0,1fr); }
  .kopierliste__zeile .knopf { justify-self:start; }
}

/* Namensfeld: fuellt Platzhalter in Kopiervorlagen live aus (guide-v2.js). Ohne Skript
   unsichtbar, dann ersetzt der Leser [DEIN NAME] nach dem Einfuegen. Nichts wird gespeichert. */
.namensfeld { display:none; }
.js .namensfeld { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:14px 0 0; }
.namensfeld__wort { font-size:15px; font-weight:700; color: var(--tinte); }
.namensfeld__eingabe {
  flex:1 1 200px; min-width:0; min-height:46px; padding:10px 14px; border-radius:12px;
  border:1.5px solid rgba(87,197,251,0.7); background:#fff; color: var(--tinte);
  font-family: var(--sans); font-size:16px;
}
.namensfeld__eingabe::placeholder { color: var(--tinte-still); }
.namensfeld__eingabe:focus-visible { outline:3px solid var(--marke-dunkler); outline-offset:2px; }
.nur-js { display:none; }
.js .nur-js { display:inline; }
.platz { border-radius:4px; padding:0 2px; background: rgba(242,193,78,0.30); }
.platz.ist-gefuellt { background: rgba(62,163,111,0.16); }

/* Teilen im Abschluss: Web Share API, sonst wird der Link kopiert (guide-v2.js). */
.teilen {
  display:inline-flex; align-items:center; gap:10px; min-height:48px; margin-top:22px; padding:12px 22px;
  border:0; border-radius: var(--r-pille); cursor:pointer;
  background: var(--marke); color:#06212f; font-family: var(--sans); font-size:15px; font-weight:700;
  transition: transform .25s ease, box-shadow .25s ease, background .2s ease;
}
.teilen svg { flex:none; }
@media (hover: hover) { .teilen:hover { background:#7ad3fc; transform: translateY(-1px); box-shadow: 0 12px 32px rgba(87,197,251,0.32); } }
.teilen[data-geteilt="kopiert"] { background:#3ea36f; color:#fff; }
.teilen__klein { margin:10px 0 0; font-size:14px; color: var(--nacht-weich); }

/* In-App-Browser (Instagram, Facebook, TikTok): Google blockt dort die Anmeldung.
   Ohne Skript und in normalen Browsern unsichtbar, guide-v2.js setzt .ist-inapp. */
.inapp { display:none; }
.ist-inapp .inapp {
  display:block; position:relative; z-index:3; max-width: var(--spalte); margin:16px auto 0;
  padding:0 var(--rand);
}
.inapp__karte {
  padding:14px 16px; border-radius:16px; background: var(--nacht); color: var(--nacht-text);
  box-shadow: 0 0 0 1px rgba(87,197,251,0.45), 0 12px 30px rgba(20,19,15,0.2);
}
.inapp__satz { margin:0; font-size:15px; line-height:1.5; }
.inapp__satz b { color:#fff; }
.inapp__zeile { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px; }
.inapp__zeile code { background: rgba(255,255,255,0.10); color: var(--nacht-text); }
/* Im In-App-Browser steht der Rueckweg schon oben im Hinweis, die Wiederholung entfaellt. */
.ist-inapp .hero__hilfe, .ist-inapp .startleiste__punkt--handy { display:none; }
.ist-inapp .hero__hilfe--immer { display:block; }
@media (min-width: 1024px) {
  .ist-inapp .startleiste:has(.startleiste__punkt--handy) { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .teilen, .knopf--leise { transition:none !important; }
  .teilen:hover { transform:none !important; }
}