/* ══════════════════════════════════════════════════════════════════════
   pw.css — gemeinsames Stylesheet der Vertriebswebsite
   Angelegt 3. August 2026, herausgelöst aus checkout.html und
   email-marketing.html.

   WAS HIER DRIN STEHT: alles, was mehr als eine Seite braucht — Farben,
   Schriften, Raster, Bewegung, Kopf, Fuß, Steckbrief, Abschnittsraster,
   Vergleichstabelle, Zwei-Stränge-Block, Kennzahlenliste, Grenzenliste,
   Fragenliste, Abschlussband.

   WAS NICHT HIER STEHT: die Bauteile, die nur eine Seite hat. Die bleiben
   in der jeweiligen Datei im <style>-Block. Beispiele: der Fall-Abschnitt
   auf checkout.html, die Schrittliste und die Leitfaden-Karten auf
   email-marketing.html.

   REGEL: Wer eine Farbe, einen Abstand oder ein Bauteil ändert, das mehr
   als eine Seite betrifft, ändert es HIER — nicht in der Seite.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Palette, Schriften, Maße ─────────────────────────────────────── */
:root{
  --ink:#0C0C0C; --white:#FFFFFF; --paper:#F5F5F1;
  --text:#3A3A38;
  /* --dim am 3.8. von #77776F auf #6B6B64 gezogen: der alte Wert erreichte
     auf Weiß 4,51:1, auf der hellen Fläche #F5F5F1 aber nur 4,13:1 und lag
     damit unter AA. Neu: 5,37:1 auf Weiß, 4,91:1 auf der Fläche. */
  --dim:#6B6B64; --rule:#E3E3DE; --rule-2:#F0F0EC;
  --accent:#F9B233; --accent-ink:#8A5A05; --accent-soft:#FFF2D9;
  --on-dark:#B9B9B2; --on-dark-2:#7C7C74;
  /* Platzhalter — Hausschrift ist Telegraf. Umstellung sind diese zwei
     Zeilen, sobald die Webfont-Lizenz geklärt ist. */
  --disp:'Bricolage Grotesque','Archivo',system-ui,sans-serif;
  --text-f:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  /* --vw = nutzbare Breite OHNE Scrollbalken, per JS gesetzt (pw.js).
     100vw enthält den Scrollbalken — damit endeten randlose Elemente
     entweder 7 px vor der Kante oder 15 px dahinter. */
  --vw:100vw;
  --maxw:min(1720px,calc(var(--vw) * .94)); --pad:clamp(18px,2.6vw,40px);
  --sec:clamp(56px,6.6vw,104px); --r:14px; --r-s:8px; --pill:100px;
  --bleed:calc((var(--vw) - var(--maxw))/2 + var(--pad));
  --ease:cubic-bezier(.22,.72,.2,1);
}

/* ── 2. Grundlage ───────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{font-family:var(--text-f);background:var(--white);color:var(--text);font-size:16.5px;
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip;font-synthesis-weight:none}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{padding:var(--sec) 0}
.bleed-r{margin-right:calc(-1 * var(--bleed))}

/* ── 3. Typografie ──────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--disp);color:var(--ink);font-weight:700;letter-spacing:-.035em;
  line-height:1.02;text-wrap:balance}
h1{font-size:clamp(34px,5vw,76px);font-weight:800;letter-spacing:-.045em;line-height:.96}
h2{font-size:clamp(25px,3.1vw,46px)}
h3{font-size:clamp(18px,1.8vw,26px);letter-spacing:-.028em;line-height:1.14}
.lead{font-size:clamp(16.5px,1.3vw,19.5px);line-height:1.6;max-width:58ch}
.ey{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.ey::before{content:"";width:24px;height:2px;background:var(--accent);flex-shrink:0}
p+p{margin-top:15px}
.tx{max-width:62ch}
.tx p{font-size:16px;line-height:1.72}
.tx strong{color:var(--ink);font-weight:600}
.mk{background:linear-gradient(transparent 62%,var(--accent-soft) 62%);padding:0 2px}

/* ── 4. Bewegung ────────────────────────────────────────────────────── */
html.js .rv{opacity:0;transform:translateY(20px);
  transition:opacity .66s var(--ease),transform .66s var(--ease);transition-delay:var(--d,0ms)}
html.js .rv.in{opacity:1;transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top}
.w>i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .72s var(--ease);transition-delay:var(--d,0ms)}
html:not(.js) .w>i,.in .w>i{transform:none}
html.js .rvimg{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease)}
html.js .rvimg.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js .rv,html.js .rv.in{opacity:1!important;transform:none!important}
  html.js .rvimg{clip-path:none!important}
  .w>i{transform:none!important}
}

/* ── 5. Knöpfe und Links ────────────────────────────────────────────── */
/* GEÄNDERT 5.8. spätabends auf Marks Vorgabe: „CTA-Buttons würde ich auch im
   pw-amber machen und beim mouse-over schwarz. Nicht andersrum."

   Amber war hier schon die Grundfläche — falsch war die Füllung, die beim
   Überfahren hochlief: **Weiß.** Damit lief der Knopf von Amber ins Nichts,
   und auf `index.html` lief er genau umgekehrt (schwarz → amber). Drei
   Zustände für dieselbe Aufgabe.

   Jetzt einheitlich in beiden Stylesheets: **Amber mit schwarzer Schrift,
   beim Überfahren schwarz mit weißer Schrift.** Vorbild ist der Knopf
   „Anfrage senden" im Kontaktblock der Startseite — er hieß dort `.btn.inv`
   und war die einzige Stelle, die es schon so machte.

   Kontrast gemessen: Schwarz #0C0C0C auf Amber #F9B233 = 10,66:1, Weiß auf
   #0C0C0C = 19,58:1. Beides weit über AA, in beiden Zuständen.              */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;
  border-radius:var(--pill);background:var(--accent);color:var(--ink);font-size:15px;font-weight:600;
  text-decoration:none;overflow:hidden;isolation:isolate;transition:color .3s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .42s var(--ease)}
.btn:hover{color:#fff}
.btn:hover::before{transform:translateY(0)}
.btn .ar{transition:transform .34s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.lnk{position:relative;display:inline-block;font-family:var(--mono);font-size:12.5px;
  color:var(--ink);text-decoration:none;padding-bottom:3px}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--rule)}
.lnk::before{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease);z-index:1}
.lnk:hover::before{transform:scaleX(1)}

/* ── 5b. Amber-Zierelemente ──────────────────────────────────────────────
   Neu am 5. August spätabends. Grundlage ist `_mockup-amberlinien.html` mit
   sieben Varianten; Mark hat **zwei** ausgewählt und die Rollen benannt:
   „am dezentesten sind Variante 5 und 6. 6 sehe ich als Styleelement, 5 als
   Möglichkeit wichtige Textpassagen hervorzuheben."

   WARUM ES ÜBERHAUPT NUR ZWEI SIND: Amber auf Weiß hat einen gerechneten
   Kontrast von **1,84:1**. Als Textfarbe unbrauchbar, als Zierlinie richtig —
   aber nur, solange sie keine Textspalte kreuzt. Variante 07 des Mockups ist
   absichtlich falsch gebaut und zeigt, was ein Raster hinter einem Absatz
   anrichtet. Beide Bauteile hier halten sich daran: `.merkb` steht NEBEN dem
   Text, `.bogen` in der Ecke des Abschnitts.

   SIE STEHEN HIER UND NICHT IN DEN SEITEN. Nach drei Runden lägen sie sonst
   in zwanzig Dateien und wären nicht mehr gemeinsam zu ändern.             */

/* `.merkb` — Variante 5, die BLOCKFORM. Eine Haarlinie links an einer
   wichtigen Textpassage. Von den sieben Varianten die einzige mit einer
   BEDEUTUNG: Sie sagt „hier steht der Gedanke, auf den es ankommt".
   Dekoration mit Funktion hält länger als Dekoration, die schön ist.

   ACHTUNG, UND DAS WAR EIN BEINAHE-FEHLER: Variante 5 gibt es in diesem
   Projekt SCHON — `.merk` in Abschnitt 20, der **Merksatz**. Er hat dieselbe
   Amber-Haarlinie und steht achtmal in den vier Leitfäden. Mein erster Anlauf
   hieß ebenfalls `.merk` und hätte damit zwei Bauteile unter einem Namen
   geführt — aufgefallen ist es erst beim Nachzählen der Klasse über alle
   Dateien, nicht beim Schreiben.

   Der Unterschied, der die zwei Namen rechtfertigt:
   · `.merk`  = EIN Satz, Displayschrift, groß. Verdichtet den Absatz darüber.
   · `.merkb` = ein ganzer ABSATZ oder mehrere, im normalen Fließtext.
   Wer eine wichtige Passage auszeichnen will, nimmt `.merkb`; wer einen Satz
   herausheben will, nimmt weiter `.merk`.                                  */
.merkb{border-left:2px solid var(--accent);padding-left:clamp(18px,2.4vw,34px)}
.merkb > :first-child{margin-top:0}
.merkb > :last-child{margin-bottom:0}

/* `.bogen` — Variante 6. Konzentrische Bögen in der unteren rechten Ecke
   eines Abschnitts, als Inline-SVG (Strichstärke bleibt bei jeder Größe
   dünn). Der Mittelpunkt liegt GENAU in der Ecke, deshalb ragt nichts über
   den Abschnitt hinaus und es braucht kein `overflow:hidden` — das hätte
   `bleed-r` und die mitlaufenden Spalten beschädigt.

   `.bogen > .wrap` bekommt `z-index:1`: Ein absolut positioniertes ::after
   liegt sonst ÜBER dem statischen Inhalt. Mit dieser einen Zeile funktioniert
   das Bauteil auf weißen und auf `.alt`-Abschnitten gleich — ein negativer
   z-index wäre auf `.alt` hinter der Hintergrundfläche verschwunden.

   NICHT auf einem Abschnitt verwenden, der in derselben Ecke eine Grafik
   trägt: Dasselbe Motiv steckt in der Native- und der StoryAds-Grafik unten
   rechts, dann kämpfen zwei Amber-Motive um dieselbe Stelle.               */
.bogen{position:relative}
.bogen > .wrap{position:relative;z-index:1}
.bogen::after{content:"";position:absolute;right:0;bottom:0;
  width:min(300px,26vw);aspect-ratio:1;pointer-events:none;z-index:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g stroke="%23F9B233" stroke-width="0.6" fill="none"><circle cx="100" cy="100" r="30"/><circle cx="100" cy="100" r="48"/><circle cx="100" cy="100" r="66"/><circle cx="100" cy="100" r="84"/></g></svg>') no-repeat;
  background-size:contain}

/* Unter 760 px fällt die Ecke weg statt zu schrumpfen — eine halbe Zierlinie
   sieht aus wie ein Darstellungsfehler. `.merk` bleibt, sie braucht keine
   Freifläche, nur einen linken Rand. */
@media(max-width:760px){
  .bogen::after{display:none}
  .merkb{padding-left:16px}
}
/* Beim Drucken kostet Amber Toner und trägt nichts. */
@media print{
  .bogen::after{display:none}
  .merkb{border-left-color:#000}
}

/* ── 6. Kopf ────────────────────────────────────────────────────────── */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0;z-index:120}
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid transparent;transition:border-color .3s}
header.stuck{border-bottom-color:var(--rule-2)}
.h-in{display:flex;align-items:center;gap:22px;height:clamp(70px,5.4vw,84px)}
.brand img{height:clamp(32px,2.8vw,42px);width:auto;transition:opacity .25s}
.brand:hover img{opacity:.72}
.h-nav{display:flex;gap:clamp(16px,1.6vw,30px);margin-left:auto}
/* nowrap wie auf der Startseite: Ohne diese Angabe brach „Gut zu wissen" unter
   rund 1115 px auf zwei Zeilen und die Leiste wurde 56 px hoch in einer 70 px
   hohen Kopfzeile — gemessen am 6.8. Mit nowrap bricht nichts mehr, dafür
   greift ab 1180 px der Menüknopf darunter. */
.h-nav a{position:relative;font-size:14px;font-weight:500;color:var(--text);text-decoration:none;
  padding:5px 0;white-space:nowrap}
.h-nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .34s var(--ease)}
.h-nav a:hover{color:var(--ink)}
.h-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.h-nav a.on{color:var(--ink)}
.h-nav a.on::after{transform:scaleX(1)}
.h-cta{position:relative;padding:11px 21px;border-radius:var(--pill);background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;overflow:hidden;
  isolation:isolate;transition:color .3s var(--ease)}
.h-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);transition:transform .4s var(--ease)}
.h-cta:hover{color:var(--ink)}
.h-cta:hover::before{transform:translateY(0)}
/* ── 6b. Menüknopf und Klappe ───────────────────────────────────────────
   GELÖST am 6.8., Prüflistenpunkt 61. Vorher verschwand die Navigation unter
   1000 px ersatzlos; einen Menüknopf gab es nur auf der Startseite. Damit war
   jede Unterseite auf dem Telefon nur über das Logo zu verlassen.

   Der Umschaltpunkt ist gemessen, nicht geschätzt: Bis rund 1115 px brach
   „Gut zu wissen" auf zwei Zeilen (Leiste 56 px in einer 70-px-Kopfzeile),
   erst ab rund 1135 px stand sie einzeilig. 1180 px ist deshalb der Wert —
   derselbe wie auf der Startseite, wo er am 5.8. aus genau demselben Grund
   von 1080 dorthin gezogen wurde. Zwischen 1000 und 1180 px war die Leiste
   also nicht weg, sondern kaputt; das ist mit demselben Handgriff erledigt.

   Knopf und Klappe baut `pw.js` Punkt 6 zur Laufzeit aus der vorhandenen
   `.h-nav`. Keine der Seiten musste dafür angefasst werden — die Links stehen
   überall schon im Markup. Ohne JavaScript gibt es kein Menü; das war vorher
   genauso und gilt auf der Startseite ebenfalls. */
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;
  border:1px solid var(--rule);background:none;padding:0;cursor:pointer;
  align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:var(--ink);transition:transform .3s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.m-nav{display:none;border-top:1px solid var(--rule-2);background:#fff;
  /* Abweichung von der Startseite, bewusst: Quer gehaltenes Telefon (390 px
     hoch) trägt die neun Einträge nicht. Ohne diese zwei Zeilen wäre der
     letzte Eintrag dort nicht erreichbar. Die Startseite hat die Lücke
     weiterhin — sie gehört Mark, deshalb dort nicht angefasst. */
  max-height:calc(100vh - 70px);overflow-y:auto;overscroll-behavior:contain}
.m-nav.on{display:block}
.m-nav a{display:block;padding:16px 0;border-bottom:1px solid var(--rule-2);text-decoration:none;
  font-family:var(--disp);font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.02em}
.m-nav a.on{color:var(--accent-ink)}
.m-nav .m-cta{color:var(--accent-ink);border-bottom:none}
@media(max-width:1180px){.h-nav,.h-in>.h-cta{display:none}.burger{display:flex}}
@media(min-width:1181px){.m-nav,.m-nav.on{display:none}}

/* ── 7. Seitenkopf einer Unterseite ─────────────────────────────────── */
.top{position:relative;padding:clamp(30px,3.8vw,64px) 0 clamp(24px,3vw,44px);overflow:hidden}
.top::before{content:"";position:absolute;right:-4%;top:-20%;width:46%;height:120%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 18%,transparent),transparent 72%);
  pointer-events:none}
/* Alles in Spalte 1. Vorher spannte die H1 über beide Spalten und der Text
   saß allein daneben — die quadratische Grafik zog die Zeile auf und der
   Text schwebte in der Mitte, gemessene Lücke knapp 300 px. */
.top-in{position:relative;display:grid;grid-template-columns:minmax(0,6.6fr) minmax(0,5.4fr);
  column-gap:clamp(24px,3vw,60px);row-gap:clamp(20px,3vw,36px);align-items:center}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:18px}
.crumb a{color:var(--dim);text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .3s}
.crumb a:hover{border-bottom-color:var(--accent)}
.top h1{max-width:17ch;margin-bottom:clamp(16px,1.6vw,24px)}
.top-txt{position:relative;z-index:2;min-width:0}
.top-art{min-width:0}
.top-art img{width:100%;height:auto;mix-blend-mode:multiply}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:clamp(18px,2.2vw,28px)}
.quick a{position:relative;padding:9px 17px;border-radius:var(--pill);border:1.5px solid var(--rule);
  font-family:var(--mono);font-size:12.5px;color:var(--ink);text-decoration:none;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.quick a:hover{border-color:var(--ink);background:var(--paper)}

/* `.top-satz` — der Kopf eines Fachartikels OHNE Kopfgrafik ────────────────
   Marks Entscheidung vom 7.8., aus `_mockup-artikelkopf.html` (drei Fassungen,
   Fassung B). Anlass: Mit Artikel 10 ist der Vorrat brauchbarer
   Bestandsgrafiken aufgebraucht — die übrigen tragen fremde Marken, erkennbare
   fremde Personen, englischen Text oder unbelegte Zahlen, und Artikel 11 hat
   gar kein Bild (`og:image` liefert 404). ZWÖLF Artikel brauchen dieselbe
   Antwort, deshalb steht sie hier und nicht in den Seiten.

   WAS AN DIE STELLE DES BILDES TRITT: der Satz, auf den der Artikel
   hinausläuft. Nicht Schmuck, sondern Inhalt — Frage in der H1, Antwort
   daneben. Das ist dieselbe Antwort wie in Runde 38 für die Karten der Spur
   (Abschnitt 21), nur eine Ebene höher, und es ist die Bauweise, die
   `fachartikel-ki-klick.html` in Kapitel 04 als zitierfähig beschreibt.

   DIE HAARLINIE IST DIE VON `.merkb` (Abschnitt 5b), am 5.8. ausgewählt.
   Sie steht NEBEN dem Text, kreuzt also keine Textspalte — die Bedingung, unter
   der Amber auf Weiß mit 1,84:1 überhaupt zulässig ist.

   GEMESSEN am 7.8. bei 1235 px Fensterbreite gegen `fachartikel-ki-klick.html`:
   Kopf 456 px, H1 575 px auf vier Zeilen — punktgleich mit einem Kopf, der eine
   Grafik trägt. DIE BEDINGUNG DAZU IST EINE BAUREGEL: Das gilt nur, solange der
   Titel auf VIER Zeilen bleibt. Fünf Zeilen machen 515 px. Und die Zeilenzahl
   ist zu MESSEN, nicht aus der Zeichenzahl zu schließen — 64 Zeichen können
   fünf Zeilen brauchen und 73 nur vier, weil die Wortlänge entscheidet.

   ⚠ ZWEITE BAUREGEL: Der Satz steht ENTWEDER hier oben ODER als `.merk` im
   Text, nie beides. Sonst liest man ihn zweimal.                            */
.top-satz{border-left:2px solid var(--accent);padding-left:clamp(18px,2.4vw,34px)}
.top-satz p{font-family:var(--disp);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(19px,1.9vw,27px);line-height:1.3;color:var(--ink);max-width:24ch}
.top-satz .tsq{display:block;margin-top:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400}

@media(max-width:980px){
  .top-in{grid-template-columns:1fr}
  .top-art{order:2}.top-txt{order:1}
  /* ⚠ Diese Zeile ist beim MESSEN entstanden, nicht beim Schreiben: Ein Kind
     ohne eigene `order` hat 0 und stünde damit VOR `.top-txt` — gemessen bei
     390 px stand die Tafel über dem Vorspann. Nicht wegkürzen. */
  .top-satz{order:2;margin-top:4px}
}

/* ── 8. Steckbrief-Streifen ─────────────────────────────────────────── */
.fct{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fct>div{padding:20px clamp(14px,1.6vw,26px) 22px;border-left:1px solid var(--rule-2)}
.fct>div:first-child{border-left:none;padding-left:0}
.fct b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:400;margin-bottom:7px}
.fct span{display:block;font-family:var(--disp);font-size:clamp(15px,1.35vw,19px);color:var(--ink);
  font-weight:700;letter-spacing:-.025em;line-height:1.2}
@media(max-width:860px){
  .fct{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fct>div:nth-child(3){border-left:none;padding-left:0;border-top:1px solid var(--rule-2)}
  .fct>div:nth-child(4){border-top:1px solid var(--rule-2)}
}
@media(max-width:480px){
  .fct{grid-template-columns:1fr}
  .fct>div{border-left:none;padding-left:0;border-top:1px solid var(--rule-2)}
  .fct>div:first-child{border-top:none}
}

/* ── 9. Abschnittsraster: Kopf links, Inhalt rechts ─────────────────── */
/* min-width:0 ist nicht kosmetisch: Rasterplätze haben min-width:auto und
   wachsen mit dem Inhalt. Ohne die Zeile schiebt eine breite Tabelle die
   ganze Seite auf — gemessen 161 px. */
.sec-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(22px,3.4vw,72px);align-items:start}
.sec-in>*{min-width:0}
.sec-h{position:sticky;top:118px}
.sec-h h2{margin-bottom:14px}
.sec-h .sub{font-size:14.5px;line-height:1.65;color:var(--dim);max-width:34ch}
@media(max-width:980px){.sec-in{grid-template-columns:1fr}.sec-h{position:static}}
.alt{background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* ── 10. Vergleichstabelle ──────────────────────────────────────────── */
.cmp{width:100%;border-collapse:collapse;margin-top:8px}
.cmp th,.cmp td{text-align:left;padding:15px 18px 15px 0;border-bottom:1px solid var(--rule-2);
  font-size:15px;line-height:1.55;vertical-align:top}
.cmp thead th{border-bottom:2px solid var(--ink);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400;padding-bottom:11px}
.cmp tbody th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-weight:400;width:19%}
.cmp td.on{color:var(--ink);font-weight:500}
.cmp-wrap{overflow-x:auto}
@media(max-width:760px){.cmp th,.cmp td{font-size:14px;padding-right:12px}.cmp tbody th{width:26%}}
/* Grundregel MUSS vor die Media-Query, sonst überschreibt sie sie. */
.cmp-hint{display:none;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:10px}
@media(max-width:620px){
  .cmp{min-width:520px}
  .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp-hint{display:block}
}

/* ── 11. Zwei Stränge nebeneinander ─────────────────────────────────── */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.2vw,56px)}
.strand{border-top:2px solid var(--ink);padding-top:22px}
.strand>.k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:12px}
.strand h3{margin-bottom:12px;max-width:22ch}
.strand>p{font-size:15.5px;line-height:1.7;margin-bottom:18px}
.st-l{list-style:none}
.st-l li{padding:13px 0;border-bottom:1px solid var(--rule-2);font-size:14.5px;line-height:1.6}
.st-l li:last-child{border-bottom:none}
.st-l b{color:var(--ink);font-weight:600}
.mid{margin-top:clamp(26px,3vw,44px);padding-top:24px;border-top:1px solid var(--rule);
  font-size:16px;line-height:1.7;max-width:66ch}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:34px}}

/* ── 12. Kennzahlenliste ────────────────────────────────────────────── */
.kpi{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,3vw,56px);margin-top:6px}
.kpi li{padding:15px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.6}
.kpi li:nth-child(1),.kpi li:nth-child(2){border-top:2px solid var(--ink)}
.kpi b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
@media(max-width:700px){
  .kpi{grid-template-columns:1fr}
  .kpi li:nth-child(2){border-top:1px solid var(--rule)}
}

/* ── 13. Grenzen — „für wen es nicht passt" ─────────────────────────── */
.lim{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(22px,2.8vw,48px);margin-top:10px}
.lim li{padding:18px 0;border-top:1px solid var(--rule);font-size:14.5px;line-height:1.62}
.lim b{display:block;font-family:var(--disp);font-size:16.5px;color:var(--ink);font-weight:700;
  letter-spacing:-.025em;margin-bottom:6px}
@media(max-width:820px){.lim{grid-template-columns:1fr}}

/* ── 14. Fragenliste ────────────────────────────────────────────────── */
.faq{max-width:88ch}
.faq details{border-top:1px solid var(--rule)}
.faq details:first-of-type{border-top:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;padding:17px 44px 17px 0;position:relative;
  font-family:var(--disp);font-size:clamp(16px,1.5vw,19.5px);font-weight:700;color:var(--ink);
  letter-spacing:-.025em;line-height:1.28}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);
  transform:rotate(45deg);transition:transform .34s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--accent-ink)}
/* Die Frage ist eine H3, damit sie in der Überschriftenstruktur steht —
   sonst ist sie für Suchmaschinen und KI nur Fließtext. */
.faq summary h3{font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;display:inline}
.faq .a{padding:0 clamp(0px,4vw,60px) 20px 0;font-size:15.5px;line-height:1.72;max-width:64ch}
.faq .a em{color:var(--dim);font-style:italic}

/* ── 15. Fall aus der Praxis ────────────────────────────────────────── */
/* Am 3.8. aus checkout.html hierher gezogen, weil email-marketing.html
   denselben Abschnitt bekommen hat. Genau der Fall, für den diese Datei
   gedacht ist: ein Bauteil wird von der zweiten Seite gebraucht und wandert
   nach oben, statt kopiert zu werden. */
.case-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,3.4vw,60px);align-items:start}
.case-in>*{min-width:0}
.case-art .g-shot{overflow:hidden;border-radius:var(--r-s);background:var(--white);
  border:1px solid var(--rule-2)}
.case-art img{width:100%;height:auto}
/* Unter 820 px wären die Beschriftungen im Schaubild rund 4 px hoch. Deshalb
   Mindestbreite und seitlich scrollbar. Der Kasten scrollt, die Seite nicht. */
.case-hint{display:none;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:10px}
@media(max-width:820px){
  .case-art .g-shot{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .case-art img{min-width:760px}
  .case-hint{display:block}
}
.case-l{list-style:none;margin-top:4px}
.case-l li{padding:16px 0;border-top:1px solid var(--rule)}
.case-l li:first-child{border-top:2px solid var(--ink)}
.case-l b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:6px}
.case-l span{display:block;font-size:15.5px;line-height:1.65}
/* Die Schritte stehen auch im Schaubild. Sie gehören trotzdem als Text
   daneben — im Bild sind sie für Suchmaschinen und KI nicht vorhanden. */
.case-steps{list-style:none;counter-reset:s;margin:26px 0 0}
.case-steps li{counter-increment:s;position:relative;padding:0 0 16px 38px;font-size:14.5px;line-height:1.6}
.case-steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:24px;height:24px;
  border-radius:50%;background:var(--accent);color:var(--ink);font-family:var(--mono);font-size:11px;
  display:flex;align-items:center;justify-content:center;font-weight:500}
.case-steps b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.case-steps li:last-child{padding-bottom:0}
.src{margin-top:22px;font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.8}
@media(max-width:900px){.case-in{grid-template-columns:1fr}}

/* ── 16. Drei Bauteile, die am 4.8. das dritte Vorkommen erreicht haben ──
   Sie lagen seit dem 3.8. im <style>-Block von video-marketing.html mit dem
   Vermerk „sobald ein drittes Vorkommen dazukommt, gehören sie nach oben".
   lead-generierung.html braucht alle drei — also stehen sie jetzt hier.
   Aus video-marketing.html entfernt, unverändert übernommen.              */

/* Optionsliste — zweispaltig, Titel über der Beschreibung. Gleiche Bauart wie
   `.inv-l` auf ctv.html; die beiden gehören beim nächsten Anlass zusammen. */
.opt{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(22px,2.8vw,48px)}
.opt li{padding:14px 0;border-top:1px solid var(--rule);font-size:14.5px;line-height:1.6}
.opt li:nth-child(1),.opt li:nth-child(2){border-top:2px solid var(--ink)}
.opt b{display:block;font-family:var(--disp);font-size:16.5px;color:var(--ink);
  font-weight:700;letter-spacing:-.025em;margin-bottom:3px}
@media(max-width:700px){
  .opt{grid-template-columns:1fr}
  .opt li:nth-child(2){border-top:1px solid var(--rule)}
}
/* Ein Block, der eine rechtliche Voraussetzung trägt. Bewusst als eigenes
   Bauteil und nicht als normaler Absatz: Wer die Seite später kürzt, soll
   sehen, dass hier eine Bedingung steht und keine Werbebotschaft. */
.bed{margin-top:clamp(24px,2.6vw,36px);padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,28px);
  border:1.5px solid var(--rule);border-radius:var(--r-s);background:var(--white)}
.bed b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);font-weight:400;margin-bottom:10px}
.bed p{font-size:14.5px;line-height:1.68;max-width:64ch}
.bed p + p{margin-top:.8em}
/* Ablauf in vier Schritten, waagerecht. Auf video-marketing.html der TV-Sync,
   auf lead-generierung.html der Weg vom Formular ins CRM. */
.sync{list-style:none;counter-reset:sy;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2vw,32px);margin-top:8px}
.sync li{counter-increment:sy;padding-top:18px;border-top:2px solid var(--ink);font-size:14px;line-height:1.6}
.sync li::before{content:counter(sy,decimal-leading-zero);display:block;font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;color:var(--accent-ink);margin-bottom:9px}
.sync b{display:block;font-family:var(--disp);font-size:16.5px;color:var(--ink);font-weight:700;
  letter-spacing:-.025em;margin-bottom:5px}
@media(max-width:900px){.sync{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.sync{grid-template-columns:1fr}}

/* ── 17. Plattform-Plakette der Ebene-3-Seiten ───────────────────────
   Angelegt 4. August für die fünf Plattformseiten (Netflix, Prime Video,
   Disney+, Sky, DAZN). Die Logos sind Ausschnitte aus unserer eigenen
   Rate Card; ihr Hintergrund ist gemessen R249 G178 B51 — also **exakt**
   --accent. Deshalb sitzt das Logo in einer Fläche derselben Farbe und der
   Übergang ist unsichtbar. `object-fit:contain` ist hier zulässig und kein
   Anschnitt: Es füllt nicht auf, es lässt Luft — und die Luft hat dieselbe
   Farbe wie das Bild.

   Die Logobreite ist mit 195 px so gewählt, dass die 389 px der Datei
   genau die geforderte doppelte Bildreserve ergeben. Größer darstellen
   heißt hochskalieren.                                                   */
.plq{background:var(--accent);border-radius:var(--r);padding:clamp(26px,3vw,44px);
  display:flex;align-items:center;justify-content:center;max-width:460px;min-height:220px;
  margin-inline:auto}
.plq img{width:195px;height:auto;max-width:100%}
.plq-cap{margin-top:12px;font-family:var(--mono);font-size:10.5px;line-height:1.75;
  color:var(--dim);max-width:52ch;margin-inline:auto;text-align:center}
@media(max-width:980px){.plq{min-height:180px}}
/* NACHTRAG 4.8. nachmittags: `.plq` ist aus den fünf Seitenköpfen wieder
   verschwunden — Mark hat je Plattform ein vollständiges Factsheet geliefert,
   und das trägt das Logo selbst. Zwei Markenzeichen übereinander im selben
   Kopf sind Lärm. Die Regel bleibt gültig und die Bauart brauchbar (etwa für
   eine Logozeile in der Plattformliste auf ctv.html), deshalb bleibt sie hier
   stehen — samt der fünf Dateien `ctv-logo-*.jpg`, die derzeit nicht
   eingesetzt sind. Siehe STAND Runde 24. */

/* ── 18. Factsheet je Plattform ──────────────────────────────────────
   Angelegt 4. August für die fünf gelieferten Plattform-Factsheets
   (1536 × 1024). Sie stehen im Seitenkopf rechts, der Text daneben — nicht
   randlos, nicht über die Containerkante.

   Der Kasten ist bewusst ein Kasten: Es ist ein DOKUMENT, keine
   Illustration. Ein Rahmen sagt das.

   Unter 900 px scrollt der Kasten seitlich statt zu schrumpfen — bei einem
   Blatt mit dieser Textdichte wären die Beschriftungen sonst rund 4 px hoch.
   Gleiche Bauart wie `.net-shot` auf video-marketing.html und `.inv-shot`
   auf ctv.html. Im einspaltigen Zustand ist die Breite gedeckelt: sonst
   zieht die Grafik auf die volle Inhaltsbreite auf und wird hochskaliert
   (die Falle aus Abschnitt 5 des Handovers).                           */
.fs{border:1px solid var(--rule-2);border-radius:var(--r-s);background:#fff;overflow:hidden}
.fs img{width:100%;height:auto}
.fs-cap{margin-top:12px;font-family:var(--mono);font-size:10.5px;line-height:1.75;
  color:var(--dim);max-width:66ch}
.fs-hint{display:none;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:10px}
@media(max-width:980px){
  .top-art .fs,.top-art .fs-cap,.top-art .fs-hint{max-width:900px;margin-inline:auto}
}
@media(max-width:900px){
  .fs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fs img{min-width:820px}
  .fs-hint{display:block}
}

/* ── 19. Abschlussband und Fuß ──────────────────────────────────────── */
.end{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.end::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(44% 50% at 90% 6%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 66%)}
.end .wrap{position:relative;z-index:1}
.end .ey{color:var(--on-dark-2)}
.end h2{color:#fff;margin-bottom:16px;max-width:18ch}
.end p{color:var(--on-dark-2);font-size:clamp(15px,1.3vw,17.5px);line-height:1.7;max-width:54ch;margin-bottom:30px}
.end .more{margin-top:clamp(30px,4vw,52px);padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;gap:clamp(18px,3vw,46px);flex-wrap:wrap}
.end .more a{font-family:var(--mono);font-size:12px;color:var(--on-dark);text-decoration:none;
  border-bottom:1.5px solid rgba(255,255,255,.2);padding-bottom:3px;transition:border-color .3s}
.end .more a:hover{border-bottom-color:var(--accent)}

footer{background:var(--ink);color:var(--on-dark-2);padding:clamp(34px,4vw,52px) 0 28px;
  border-top:1px solid rgba(255,255,255,.14)}
.f-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.f-bot p{font-family:var(--mono);font-size:10.5px;line-height:1.9;color:#5B5B54;letter-spacing:.04em}
/* `flex-wrap` und der Zeilenabstand sind am 4.8. abends dazugekommen: Mit dem
   vierten Link (AGB) messen die vier Einträge bei 390 px rund 316 px in einer
   Zeile — das passt, aber ohne Reserve. Ein längerer Linkname oder eine
   größere Schrifteinstellung würde die Zeile aus dem Container schieben.
   Umbrechen ist hier richtig, Abschneiden wäre falsch: Impressum und
   Datenschutz sind Pflichtangaben und dürfen nicht wegrutschen. */
.f-links{display:flex;flex-wrap:wrap;gap:10px 22px}
.f-links a{font-size:12.5px;color:var(--on-dark-2);text-decoration:none}
.f-links a:hover{color:#fff}

/* ── 20. Leitfaden — die Bauteile eines Lesetextes ────────────────────
   Angelegt 4. August 2026 abends für die vier Leitfäden unter
   gut-zu-wissen.html. Sie stehen von Anfang an hier und nicht im
   <style>-Block einer Seite, weil ALLE VIER sie brauchen — die Regel
   „erst beim zweiten Vorkommen nach oben" ist damit schon erfüllt.

   Warum eigene Bauteile: Ein Leitfaden ist ein LESETEXT, keine
   Verkaufsseite. Steckbrief, Zwei-Stränge-Block, Kennzahlenliste und
   Grenzenliste passen nicht. Was ein langer Text braucht, hatte diese
   Datei dagegen noch nicht: ein mitlaufendes Inhaltsverzeichnis (der
   Video-Leitfaden hat 13 Kapitel), einen Rhythmus über mehrere Tausend
   Wörter, Checkliste, Merksatz und eine Stand-Zeile.

   Die Stand-Zeile ist keine Kosmetik: gut-zu-wissen.html sagt zu, jeder
   Leitfaden werde korrigiert, wenn sich etwas ändert. Dann muss man
   auch sehen können, wann das zuletzt geschah.                       */

/* Zwei Spalten: Inhaltsverzeichnis links (mitlaufend), Text rechts. */
.lf{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr);
  gap:clamp(24px,3.6vw,76px);align-items:start}
.lf>*{min-width:0}
@media(max-width:980px){.lf{grid-template-columns:1fr;gap:clamp(26px,3vw,38px)}}

/* Inhaltsverzeichnis. Verwandt mit `.toc` im <style>-Block von
   gut-zu-wissen.html, aber nicht dasselbe: das dort sitzt im Kopfbereich
   und ist einmalig, dieses läuft mit und muss 13 Einträge tragen.
   Beim nächsten Anlass gehören die beiden zusammengelegt.            */
.lfn{position:sticky;top:118px;border-top:2px solid var(--ink);padding-top:16px}
.lfn-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:6px}
.lfn ol{list-style:none;counter-reset:lfk}
.lfn li{counter-increment:lfk;border-bottom:1px solid var(--rule-2)}
.lfn li:last-child{border-bottom:none}
.lfn a{display:flex;gap:11px;padding:10px 0;font-size:14.5px;line-height:1.38;color:var(--ink);
  text-decoration:none;transition:color .3s var(--ease)}
.lfn a::before{content:counter(lfk,decimal-leading-zero);font-family:var(--mono);font-size:10.5px;
  color:var(--accent-ink);flex-shrink:0;padding-top:3px}
.lfn a:hover{color:var(--accent-ink)}
@media(max-width:980px){.lfn{position:static}}

/* Die Textspalte. 681 px ist die Obergrenze, ab der eine Zeile beim Lesen
   den Anschluss verliert — bei 1905 px wären es ohne Deckel über 900 px.

   Die Lesebreite hängt bewusst an den TEXTELEMENTEN und nicht am Container:
   Sonst müssten sich die Tabellen der Leitfäden 01 und 04 (drei Spalten,
   Anforderung plus Begründung) in 680 px quetschen, während rechts daneben
   500 px Spaltenbreite leer stehen. Fließtext wird gedeckelt, Tabellen
   dürfen die ganze Spalte nutzen.

   HIER STAND `72ch`, UND DAS WAR FALSCH (gefunden am 7.8., Runde 61).
   `ch` ist die Breite der Ziffer Null in der Schrift DES ELEMENTS SELBST —
   sie hängt an der Schriftgröße UND an der Schriftart. Gemessen bei 1235 px
   über alle 29 Seiten mit `.art`, Fließtext 680,7 px:

     h2      38,3 px Bricolage  ->  1775 px Deckel  (253×, wirkungslos)
     h3      22,2 px Bricolage  ->  1053 px         ( 65×)
     .merk   16,5 px Bricolage  ->   788 px         ( 35×, GLEICHE Größe,
                                                     nur andere Schriftart)
     .src    16,5 px DM Mono    ->   713 px         (  5×)
     .kap    10,5 px DM Mono    ->   454 px         (253×, zu SCHMAL)

   Deshalb steht die Lesebreite jetzt als absoluter Wert in einer Variablen.
   681 px ist der bisherige Wert des Fließtexts, auf ganze Pixel gerundet —
   die 669 Absätze stehen also unverändert, alles andere kommt auf dieselbe
   Kante. Absolut, nicht relativ: Eine Custom Property mit `ch` oder `em`
   löst den Fehler NICHT, weil Custom Properties beim Verwenden aufgelöst
   werden und nicht beim Setzen. `px` statt `rem`, weil der Lesetext selbst
   mit `font-size:16.5px` hart gesetzt ist und nicht mit der Basisschrift
   mitwächst — ein rem-Deckel wüchse allein.

   NICHT in dieser Liste und bewusst breiter: `.cmp-wrap` (Tabellen, siehe
   oben) und `.faq` (eigene Regel, 88ch = 832 px). */
.art{max-width:none;--lese:681px}
.art>p,.art>h2,.art>h3,.art>span,.art>.pl,.art>.chk,.art>.merk,.art>.zit,
.art>blockquote,.art>.bed,.art>ul,.art>ol{max-width:var(--lese)}
.art>*+*{margin-top:14px}
.art p{font-size:16.5px;line-height:1.75}
.art strong{color:var(--ink);font-weight:600}
.art h2{margin-top:clamp(44px,4.4vw,74px);margin-bottom:16px}
.art h3{margin-top:clamp(26px,2.6vw,40px);margin-bottom:10px}
.art>*:first-child{margin-top:0}
/* Kapitelzahl über der H2. Sie trägt den Abstand, damit die H2 direkt
   darunter sitzt und nicht zweimal Luft entsteht. */
.kap{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink);margin-top:clamp(44px,4.4vw,74px)}
.kap+h2{margin-top:9px}
/* Punkteliste im Lesetext. Bewusst mit Trennlinie statt Aufzählungspunkt —
   dasselbe Muster wie `.st-l` und `.opt`, damit ein Leitfaden nicht wie eine
   andere Website aussieht als die Leistungsseiten. */
.pl{list-style:none}
.pl li{position:relative;padding:12px 0 12px 20px;border-bottom:1px solid var(--rule-2);
  font-size:15.5px;line-height:1.65}
.pl li:first-child{border-top:1px solid var(--ink)}
.pl li:last-child{border-bottom:none}
.pl li::before{content:"";position:absolute;left:0;top:22px;width:8px;height:1.5px;background:var(--accent)}
.pl b{color:var(--ink);font-weight:600}

/* Merksatz — ein Satz, der aus dem Text herausgehoben ist. Er stellt KEINE
   neue Behauptung auf, sondern verdichtet, was im Absatz darüber steht.
   Wer hier etwas Neues hineinschreibt, umgeht die Zahlen-Doktrin. */
.merk{margin:clamp(30px,3.2vw,46px) 0;padding:6px 0 6px clamp(20px,2.2vw,30px);
  border-left:2px solid var(--accent);font-family:var(--disp);font-weight:700;
  font-size:clamp(19px,1.9vw,27px);line-height:1.2;letter-spacing:-.032em;color:var(--ink)}

/* Zitat mit Urheber. */
.zit{margin:clamp(30px,3.4vw,48px) 0;padding:clamp(20px,2.4vw,32px);background:var(--paper);
  border-top:2px solid var(--ink);border-radius:0 0 var(--r-s) var(--r-s)}
.zit p{font-family:var(--disp);font-weight:700;font-size:clamp(17px,1.6vw,22px);line-height:1.3;
  letter-spacing:-.028em;color:var(--ink)}
.zit cite{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;font-style:normal;
  letter-spacing:.06em;color:var(--dim)}

/* Checkliste. Der Haken ist gezeichnet, kein Zeichen aus der Schrift —
   Emoji und Dingbats sehen auf jedem System anders aus. */
.chk{list-style:none;margin-top:18px}
.chk li{position:relative;padding:14px 0 14px 34px;border-top:1px solid var(--rule);
  font-size:15px;line-height:1.62}
.chk li:first-child{border-top:2px solid var(--ink)}
.chk li::before{content:"";position:absolute;left:3px;top:20px;width:11px;height:6px;
  border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);
  transform:rotate(-45deg)}
.chk b{color:var(--ink);font-weight:600}

/* Bildunterschrift. Am 4.8. abends aus dem <style>-Block von
   lead-generierung.html hierher gezogen, weil Leitfaden 03 dieselbe Grafik
   und damit dieselbe Zeile braucht — zweites Vorkommen, also nach oben.
   Sie ist kein Schmuck: `leads-hero.jpg` ist NICHT textfrei. Im Bild stehen
   ein Hauptpreis, drei Wirkungsversprechen und zweimal drei Siegel. Ohne
   diese Zeile liest sich beides wie eine Zusage von uns.
   Prüflistenpunkte 20 und 33. */
.art-cap{margin-top:12px;font-family:var(--mono);font-size:10.5px;line-height:1.75;
  color:var(--dim);max-width:64ch}

/* Stand-Zeile im Seitenkopf. */
.stand{margin-top:clamp(18px,2vw,28px);padding-top:14px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:6px 24px;font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;line-height:1.7;color:var(--dim)}
.stand b{color:var(--ink);font-weight:500}

/* ── 21. Beitragsspur — die Wischreihe der datierten Beiträge ─────────────
   Neu am 5. August, spätnachts (Runde 38). Erstes neues Bauteil seit
   Runde 25. Steht hier und nicht im <style>-Block von gut-zu-wissen.html,
   weil es später auch die WERKSTATT-Ausgaben tragen soll — dieselbe
   Textsorte: datiert, bleibt stehen, wächst nach vorn.

   WARUM SIE KEINE BILDER TRÄGT. Die Bildlage der 28 Bestandsbeiträge ist
   am 5.8. gemessen worden (`bildlage-28-beitraege-2026-08-05.md`): 14 von
   27 sind eingekaufte Symbolbilder in fremden Farbwelten, 13 sind eigene
   Mailing-Header — und alle 13 tragen ihre Überschrift im Bild. Eine Karte
   braucht den Titel als Text; er stünde dann zweimal. Dazu sechs Bilder
   mit fremden Marken und eine unbelegte Kennzahl in der Prime-Video-Grafik.
   Deshalb tragen die Karten Typografie: ein Format für alle 28, der Titel
   genau einmal, Palette unangetastet, keine Rechtsfrage.

   `.rota-f` ist die dafür freigehaltene Bildfläche. Sie wird nur gerendert,
   wenn sie im Markup steht — genauso, wie `ueber-uns.html` die
   Kundenstelle freihält. Kommen Motive, kostet das Nachziehen kein CSS.

   BEWEGUNG: Die Spur läuft NICHT von selbst. Gewischt wird mit Finger,
   Trackpad, Scrollrad oder den zwei Knöpfen — Marks Vorgabe vom 5.8.
   („auf Wisch"). Es gibt deshalb nichts, was `prefers-reduced-motion`
   anhalten müsste; die Regel in Abschnitt 4 setzt `scroll-behavior` global
   auf `auto`, damit auch der Knopfsprung ohne Fahrt auskommt. Unten steht
   sie trotzdem noch einmal ausdrücklich, damit niemand sie wegkürzt.

   Der Scrollbalken ist ABSICHTLICH sichtbar und amberfarben: Er ist die
   einzige Anzeige, wie weit man in 28 Karten gekommen ist. Ausblenden würde
   die Reihe wie eine Reihe zu vier aussehen lassen.

   NAMENSPRÜFUNG vor der Benennung, wie nach der `.merk`-Lehre vom 5.8.
   nötig: `rota`, `karu`, `slide`, `swipe`, `track`, `carousel` kommen als
   Klasse in keiner der 30 Dateien vor. Das Wort „Rotation" gibt es
   allerdings neunmal als Fließtext — dort meint es ein CTV-Bundle, das in
   Rotation ausgeliefert wird. Deshalb heißt der Abschnitt auf der Seite
   NICHT „Rotation"; der Name lebt nur im Bauteil.
   ═══════════════════════════════════════════════════════════════════════ */
.rota{position:relative}

/* Die Spur. `scroll-snap` rastet je Karte ein, `scroll-padding` verhindert,
   dass eine per Tabulator angesprungene Karte am linken Rand klemmt. */
.rota-s{display:flex;gap:clamp(14px,1.5vw,20px);overflow-x:auto;
  scroll-snap-type:x proximity;scroll-padding-inline:2px;scroll-behavior:smooth;
  padding:2px 2px 18px;margin-inline:-2px;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--accent) var(--rule-2)}
.rota-s::-webkit-scrollbar{height:6px}
.rota-s::-webkit-scrollbar-track{background:var(--rule-2);border-radius:3px}
.rota-s::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}

/* Die Karte. Ganze Fläche ist der Link — ein Tabulatorhalt je Beitrag. */
.rota-k{flex:0 0 clamp(242px,24vw,318px);scroll-snap-align:start;
  display:flex;flex-direction:column;gap:9px;min-width:0;
  padding:20px 20px 20px;background:var(--white);border:1px solid var(--rule);
  color:var(--ink);text-decoration:none;position:relative;isolation:isolate;
  transition:border-color .34s var(--ease),transform .34s var(--ease)}
.rota-k::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease)}
.rota-k:hover,.rota-k:focus-visible{border-color:var(--ink);transform:translateY(-2px)}
.rota-k:hover::before,.rota-k:focus-visible::before{transform:scaleX(1)}
.rota-k:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.rota-d{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.rota-t{font-family:var(--disp);font-weight:700;font-size:clamp(15px,1.3vw,17.5px);
  line-height:1.28;letter-spacing:-.022em}
.rota-p{font-size:13.5px;line-height:1.6;color:var(--dim)}
.rota-m{margin-top:auto;padding-top:15px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;color:var(--dim);transition:color .3s var(--ease)}
.rota-k:hover .rota-m,.rota-k:focus-visible .rota-m{color:var(--ink)}

/* Freigehaltene Bildfläche — steht heute in keiner Karte. Wenn Motive
   kommen: <span class="rota-f"><img …></span> als erstes Kind. */
.rota-f{display:block;aspect-ratio:16/9;margin:-20px -20px 3px;overflow:hidden;
  background:var(--paper);border-bottom:1px solid var(--rule)}
.rota-f img{width:100%;height:100%;object-fit:cover;display:block}

/* Steuerung: zwei Knöpfe und die Mengenangabe. Knopffarbe nach der Regel
   aus Abschnitt 5 — Amber mit schwarzem Zeichen, beim Überfahren schwarz. */
.rota-n{display:flex;align-items:center;gap:12px;margin-top:4px}
.rota-b{width:40px;height:40px;flex:0 0 40px;border:0;border-radius:50%;
  background:var(--accent);color:var(--ink);font-size:16px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease)}
.rota-b:hover:not([disabled]){background:var(--ink);color:var(--white)}
.rota-b[disabled]{background:var(--rule-2);color:var(--dim);cursor:default}
.rota-z{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim)}

@media(max-width:700px){
  .rota-k{flex:0 0 76%}
  .rota-n{gap:10px}
}

/* Ausdrücklich, obwohl Abschnitt 4 es global schon tut: Der Knopfsprung
   verzichtet bei reduzierter Bewegung auf die Fahrt. Nichts läuft von
   selbst — es gibt hier keinen Zeitgeber, der angehalten werden könnte. */
@media (prefers-reduced-motion:reduce){
  .rota-s{scroll-behavior:auto}
  .rota-k{transition:none}
}

/* Beim Drucken wird aus der Spur eine Liste — sonst ist alles ab der
   vierten Karte weg. */
@media print{
  .rota-s{display:block;overflow:visible}
  .rota-k{break-inside:avoid;border:0;border-top:1px solid #ccc;padding:8px 0}
  .rota-n,.rota-f{display:none}
}