/* ============================================================
   Palette — Design System
   Abgeleitet vom E1 "The Broadsheet" Newsletter.
   Eine gemeinsame Stylesheet-Datei fuer alle Seiten.
   Dokumentiert in styleguide.html
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Surfaces */
  --paper:#eeeeec;           /* Inhaltsflaeche hellstes Grau (Mel 14.07., ganze Website grau) */
  --page:#eeeeec;            /* Seiten-Hintergrund hellstes Grau (Mel 14.07.) */
  --band:#eeeeec;            /* Zwischenton: heller als --page (#e9e9e7), dunkler als Weiss */
  --band-dark:#e2e2e0;       /* --band 5% dunkler — Hover/Auswahl grauer Felder (Mel 10.07., korrigiert von 10%) */
  --ink:#141414;             /* Tinte */
  --ink-soft:#2c2c2c;        /* Fliesstext primaer (10% heller als --ink) */
  --ink-hover:#434343;       /* --ink 20% heller — NUR Hover/Auswahl schwarzer Buttons
                                 (Mel 10.07., erhoeht von 10%; eigene Variable, damit der
                                 Fliesstext (--ink-soft) unberuehrt bleibt) */

  /* Grautoene — alle AA-geprueft auf weiss UND auf #e9e9e7 */
  --g-1:#545454;             /* Fliesstext sekundaer */
  --g-2:#595959;             /* Labels / Kicker */
  --g-3:#767676;             /* fein, kleiner Text auf weiss */

  /* Linien */
  --line:#d8d8d8;
  --line-strong:#cfcfcf;
  --line-faint:#ededec;

  /* Eine Druckfarbe — sehr sparsam */
  --press:#3a3a3a;         /* war Druckrot — jetzt Graphit: Website strikt monochrom (Mel, 28.06.2026) */

  /* Schriften */
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; /* war IBM Plex Mono — Website strikt zwei Schriften (Mel, 28.06.2026) */

  /* Layout */
  --sheet:1180px;
  --gut:clamp(20px,4.5vw,64px);
  --radius:0;                /* editorial: keine runden Ecken */
}

/* ---------- Reset / Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
/* Footer-Grau traegt den Canvas (Mel 17.07.): html bekommt --band-dark (= Footer-Farbe), damit
   sie unter dem Inhalt UNENDLICH weiterlaeuft — egal wie hoch das Fenster gezogen wird, und auch
   beim Ueberscrollen unten. body behaelt --page fuer die Inhaltsflaeche: sobald html einen eigenen
   Hintergrund hat, propagiert der von body NICHT mehr auf den Canvas (CSS-Backgrounds-Spec). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light;background:var(--band-dark);transition:background-color .35s ease}
/* Sheet offen (mobil, setzt updateDock in app.js): Canvas auf WEISS — iOS malt Safe-Area/
   Home-Indicator-Zone mit der Canvas-Farbe; grau saehe aus, als ende das Sheet ueber dem
   Bildschirmrand (Mel 17.07. spaet: "als wuerde die Card wirklich von ganz unten kommen"). */
html.sheet-open{background:#fff}
/* PRIMAERE Grau-Deckung (Mel 17.07. nachts VII): Das graue Band unten IST der BODY (--page
   #eeeeec), der VOR html im Canvas-Stack liegt — html.sheet-open{#fff} erreichte es nie, und die
   html::after-Platte ankert auf iOS anders als das fixierte Dock (Layout- statt Visual-Viewport),
   deckte den Streifen also nicht. Bewiesen: Caching aus (advertise.html max-age=0), sheet-open ist
   bei sichtbarem Dock aktiv (dieselbe JS-Zeile schaltet dock-on + sheet-open), html damit weiss —
   das Grau blieb trotzdem, also ist die Quelle body. Geometrie-UNABHAENGIGE Loesung: body selbst
   weiss, solange das Sheet offen ist -> es gibt kein Grau mehr, egal wo Leiste/Dock/Platte liegen.
   sheet-open setzt updateDock nur mobil + Dock offen -> Desktop/andere Seiten unberuehrt. */
html.sheet-open body{background:#fff}
body{
  font-family:var(--sans);color:var(--ink);background:var(--page);
  line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .35s ease;   /* synchron zum html-Canvas (Zeile 51) -> kein Naht-Blitz */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Text-Auswahl (Mel 16.07., ersetzt die invertierten Ink-Bloecke var(--ink)/#fff — die
   waren Absicht, wirkten bei Alles-Auswaehlen aber wie ein Fehlerbild): dezente graue
   Tonung, Textfarben bleiben lesbar erhalten. */
::selection{background:rgba(20,20,20,.14)}

/* ---------- Utilities ---------- */
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--mono);font-size:.69rem;letter-spacing:.22em;text-transform:uppercase;color:var(--g-2);font-weight:500}
.rule{border:0;border-top:1px solid var(--line)}
.sheet{max-width:var(--sheet);margin:0 auto;background:var(--paper)}
/* graue Mittel-Abschnitte: an Ober-/Unterkante extrem weich ins Weiss auslaufen */
.soft-band{background:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Honeypot (Bot-Schild, Mel 08.07.): fuer Menschen unsichtbar, fuer Bots ein normales Feld */
.hp-f{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- iOS-Langdruck (Mel 12.07. nachts) ----------
   Beim Touch-Halten legte iOS Safari seine System-Optik ueber die Elemente: grauer
   Tap-Blitz + weisse "Lift"-Platte mit eigenen Ecken, die nicht zur Pillen-/Textform
   passen ("wirkt falsch"). (a) Tap-Highlight ueberall aus — Feedback geben die eigenen
   Zustaende. (b) Auf UI-Chrome (Logo, Nav, Buttons, Toggles, Dropdowns, FAQ-Zeilen)
   zusaetzlich Lift/Preview + Text-Lupe aus (touch-callout/user-select) — alles interne
   Ziele, dort geht nichts verloren. Inhalts-Links im Fliesstext (z.B. privacy policy)
   behalten den System-Callout bewusst. Desktop unberuehrt (reine Touch-Gesten; die
   Textauswahl-Sperre betrifft nur Bedienelemente, keinen Fliesstext). */
html{-webkit-tap-highlight-color:transparent}
.nav-mark,.nav-links a,.nav-cta,.nav-toggle,.btn,.field button,.signup-field button,
.s2-go,.s3-open,.dd-btn,.dd-list li,.ed-card,.faq summary,.foot-cols a,.foot-mark .m,
.s2-skip,.s3-back a,.s2-who a{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ---------- Flattersatz (Mel 12.07., global erweitert 14.07.) ----------
   Die IG-Satzregeln (projects/newsletter/ig-satzregeln.md) auf die Website-Copy uebertragen —
   aber NUR der regelbasierte Teil, der viewport-unabhaengig funktioniert:
   (a) FLIESSTEXT: kein einzelnes kurzes Wort als letzte Zeile, Flatterrand ruhig
       (text-wrap:pretty) — die IG-Fliesstextregel.
   (b) HEADLINES: ausgewogene Zeilenlaengen, keine Treppe (text-wrap:balance) — die responsive
       Entsprechung der hand-gesetzten <br>-Sinneinheiten der Posts: der Browser waehlt je
       Viewport gleich lange Zeilen, statt dass ein fixer <br> bei anderer Breite falsch sitzt.
   Die manuell gebrochenen Hero-Headlines (.cover-h1 mit <br>) bleiben — balance wirkt je
   <br>-Segment und ueberschreibt sie nicht. NICHT uebertragbar (bewusst weggelassen): das
   hand-platzierte "Satzzeichen zuerst / kein Funktionswort am Zeilenende / feste Nominalphrase
   nie trennen" — das sind Zeile-fuer-Zeile-Entscheidungen, die nur auf festem Canvas gelten;
   im responsiven Layout uebernimmt der Browser die konkreten Bruchstellen.
   Progressive Enhancement — Browser ohne text-wrap rendern exakt wie bisher. Sample-Issue
   (.paper) bewusst ausgenommen: sie spiegelt das ECHTE Mail-Rendering (kein text-wrap). */
p,li,.lede,.desc,.ans-in{text-wrap:pretty}
.paper p,.paper li{text-wrap:wrap}
h1,h2,h3,h4,.lead-statement,.nm{text-wrap:balance}
.paper h1,.paper h2,.paper h3,.paper h4{text-wrap:wrap}
.faq summary{text-wrap:balance}

/* ---------- Focus / a11y ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--press);outline-offset:3px}
#main:focus{outline:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:60;font-size:.85rem}
.skip:focus{left:12px;top:12px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-family:var(--sans);font-weight:400;font-size:.95rem;letter-spacing:0;
  padding:14px 30px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
/* Hover = ECHTES Bold (700), aber ohne Groessenaenderung (Mel 12.07., ersetzt das frueher
   fransende Textschatten-Faux-Bold). Ein unsichtbarer 700er-Zwilling (::after, Text aus
   data-label via app.js) reserviert dauerhaft die breitere Bold-Breite; der sichtbare Text
   wechselt nur das Gewicht in dieser fixen Box. Farbe bleibt exakt der Default-Zustand. */
.btn::after{content:attr(data-label);font-weight:700;height:0;overflow:hidden;visibility:hidden;pointer-events:none;white-space:nowrap}
/* Alle Bold-on-Hover-Regeln hover-gegated (Mel-Bug-Klasse 12.07., mobil): auf Touch klebte
   der fette Zustand nach jedem Tap, der nicht wegnavigiert (Nav-CTA, Kapsel, mailto-Buttons).
   :focus-visible bleibt ungekapselt (Tastatur). In-place gesplittet, Kaskade unveraendert. */
.btn:focus-visible{font-weight:700}
@media (hover:hover){.btn:hover{font-weight:700}}
/* Touch-Pendant (Mel 12.07. abends): :active statt :hover — bold nur solange der Finger
   drauf ist, loest beim Loslassen wieder (kein klebender Zustand wie beim Touch-Hover). */
@media (hover:none){.btn:active{font-weight:700}}
/* Verlaengerte Tap-Quittung (Mel 16.07. nachts): app.js setzt .tap-fb fuer ~320ms beim
   touchstart — der Bold-Blitz von :active ist bei schnellem Tippen sonst zu kurz, um als
   Feedback wahrgenommen zu werden (v. a. vor dem traegen mailto-Mail-Sheet). Breiten-
   Reservierung uebernimmt der data-label-Zwilling wie beim Hover. OHNE Media-Guard:
   die Klasse entsteht nur durch echtes touchstart (deckt auch Hybrid-Geraete ab). */
.tap-fb{font-weight:700}
.btn-solid{background:var(--ink);color:#fff}
/* Ghost-Button ohne Outline (Mel 14.07.): statt Kontur eine weisse Flaeche wie die
   uebrigen Sekundaer-Buttons (btn-grey) — konsistent kantenlos auf dem grauen Canvas. */
.btn-ghost{background:#fff;border-color:transparent}
.btn-grey{background:var(--band);color:var(--ink);border-color:transparent}

/* ---------- Nav ---------- */
/* Untere Abgrenzung: KEINE Linie mehr (Mel 06.07.) — weicher Wurfschatten wie das
   Dropdown-Menue hebt die Bar vom Inhalt darunter ab. */
/* Top-Bar auf Canvas-Grau (Mel 14.07.): war rgba(255,255,255,.85) = weiss. Jetzt das
   hellste Grau (#eeeeec) transluzent — Blur + Wurfschatten (die "Effekte") bleiben, nur die
   Grundfarbe wechselt von Weiss auf Grau, damit die Bar nicht als weisser Balken absteht. */
.nav{position:sticky;top:0;z-index:40;background:rgba(238,238,236,.85);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);box-shadow:0 20px 34px -22px rgba(20,20,20,.18)}
.nav-in{max-width:var(--sheet);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:11px var(--gut)}
.nav-mark{font-family:var(--serif);font-size:1.45rem;line-height:1;letter-spacing:0}
.nav-links{display:flex;gap:26px;align-items:center;margin-left:auto;margin-right:24px;transition:margin-right .34s ease}
.nav-links a{display:inline-flex;flex-direction:column;align-items:center;font-size:.82rem;color:var(--g-1);padding:4px 0}
.nav-links a::after{content:attr(data-label);font-weight:700;height:0;overflow:hidden;visibility:hidden;pointer-events:none;white-space:nowrap}
.nav-links a:focus-visible,.nav-links a[aria-current=page]{color:var(--ink);font-weight:700}
@media (hover:hover){.nav-links a:hover{color:var(--ink);font-weight:700}}
@media (hover:none){.nav-links a:active{color:var(--ink);font-weight:700}}
.nav-cta{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--sans);font-weight:400;font-size:.85rem;letter-spacing:0;background:var(--ink);color:#fff;padding:9px 20px;border:1px solid var(--ink);border-radius:999px;white-space:nowrap;max-width:220px;overflow:hidden;transition:max-width .34s ease,padding .34s ease,opacity .26s ease,visibility 0s}
.nav-cta::after{content:attr(data-label);font-weight:700;height:0;overflow:hidden;visibility:hidden;pointer-events:none;white-space:nowrap}
.nav-cta:focus-visible{font-weight:700}
@media (hover:hover){.nav-cta:hover{font-weight:700}}
@media (hover:none){.nav-cta:active{font-weight:700}}
.nav-toggle{display:none}
.nav-right{display:flex;align-items:center;gap:6px}
/* Top-bar-CTA erscheint erst, wenn das Anmeldeformular aus dem Blick gescrollt ist (Mel 10.07.
   abends, nur Desktop): solange .nav.cta-tucked (Header-Startzustand, JS enttuckt beim Scrollen)
   ist der Button auf 0 eingeklappt und Advertise/About stehen buendig rechts (margin-right:-24px
   hebt den nav-in-gap zur 0-breiten .nav-right auf); scrollt das Formular weg, waechst der Button
   ein und schiebt die Links an ihre normale Position. */
/* Tuck gilt jetzt auch MOBIL (Mel 15.07.): der Button erscheint auf allen Breiten erst,
   wenn das Formular/der Anker aus dem Blick ist — vorher nur Desktop (min-width:760px).
   Der Links-Margin-Ausgleich bleibt Desktop-only (mobil ist .nav-links das Burger-Menue).
   visibility:hidden (Kritiker-Gate 15.07., WCAG 2.4.7): der eingeklappte Link war ein
   unsichtbarer Tab-Stopp. Verzoegert bis zum Ende des Einklappens; das Ausklappen zeigt
   sofort (Basis-Transition visibility 0s ohne Delay). Geometrie bleibt messbar (updateCta). */
.nav.cta-tucked .nav-cta{max-width:0;padding-left:0;padding-right:0;opacity:0;border-color:transparent;pointer-events:none;
  visibility:hidden;transition:max-width .34s ease,padding .34s ease,opacity .26s ease,visibility 0s .34s}
@media (min-width:760px){
  .nav.cta-tucked .nav-links{margin-right:-24px}
}

/* ---------- Section ---------- */
/* EINHEITLICHER Section-Abstand (Mel 17.07. spaet): Luecke zur naechsten Section = ueberall
   padding-bottom (48-92) + padding-top (24-44) — das Mass stammt vom Paar "Why it works" ->
   "What a placement looks like" (frueher nur via #placement-Override, jetzt Basis-Muster;
   vorher 92+92 = sichtbar groessere Luecke z. B. FAQ -> Why it works). Cover regeln ihr
   Padding weiter selbst (.cover-Override, Mel-Masse von heute frueh). */
section{padding:clamp(24px,3.3vw,44px) var(--gut) clamp(48px,7vw,92px)}
.seclabel{display:flex;align-items:center;gap:14px;margin-bottom:30px;position:relative;top:-2px} /* Namen 2px hoeher (Mel 09.07.); top statt transform -> stoert die Reveal-Animation nicht */
.seclabel::after{content:"";flex:1;height:1px;background:var(--line)}
/* Titelloser Voll-Breiten-Trenner (Mel 17.07. nachts II): eine Linie ueber die ganze
   Content-Breite, wo ein Section-Label entfaellt (Home "Questions" ohne Titel) oder als
   Innen-Trenner (Advertise: zwischen "Why it works"-Punkten und Leser-Fragen, .mid). */
.lbl-line{height:1px;background:var(--line)}
.lbl-line.mid{margin-top:clamp(46px,6.5vw,80px)}

/* ---------- Hero / folio ---------- */
.hero{padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(40px,6vw,72px)}
.folio{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.folio .issue{color:var(--press)}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.7rem,7.2vw,5.7rem);line-height:1.0;letter-spacing:0;margin:clamp(26px,4vw,44px) 0 0;max-width:14ch}
.h1.display{font-size:clamp(3.2rem,10.5vw,7.6rem);line-height:.94;letter-spacing:0;max-width:none}
.folio .js-date{font-size:.82rem}
.inkline{font-weight:600;color:inherit}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);line-height:1.5;margin:22px 0 0;max-width:52ch}
/* Inner-page heroes: de-escalated red gesture (recurring stripe ties them to the cover) */
.hero .h1{padding-left:clamp(16px,2vw,26px);border-left:4px solid var(--press)}
.cta-row{margin-top:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- Opt-in form ---------- */
.form{margin:30px 0 0;max-width:560px}
.field{display:flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.field input[type=email]{flex:1;min-width:0;border:0;padding:15px 24px;font-family:var(--sans);font-size:1rem;color:var(--ink);background:transparent}
.field input[type=email]::placeholder{color:var(--g-3)}
.field button{flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;border:0;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:400;font-size:.92rem;letter-spacing:0;padding:15px 30px;cursor:pointer;white-space:nowrap}
.field button::after{content:attr(data-label);font-weight:700;height:0;overflow:hidden;visibility:hidden;pointer-events:none;white-space:nowrap}
.field button:focus-visible{font-weight:700}
@media (hover:hover){.field button:hover{font-weight:700}}
@media (hover:none){.field button:active{font-weight:700}}
.editions-pick{display:flex;gap:22px;margin:16px 2px 0;flex-wrap:wrap;border:0;padding:0}
.editions-pick legend{position:absolute;left:-9999px}
.editions-pick label{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--g-1);cursor:pointer}
.editions-pick input{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}
.reassure{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--g-2);margin:18px 2px 0}
/* Kein Unterstrich mehr bei Hover (Mel 10.07. abends) — stattdessen fett, wie die
   TAG/WOCHE/...-Woerter im Dashboard (.segf button). */
.reassure a{color:var(--ink);text-decoration:none;font-weight:500;transition:font-weight .15s}
.reassure a:focus-visible{font-weight:800}
@media (hover:hover){.reassure a:hover{font-weight:800}}
@media (hover:none){.reassure a:active{font-weight:800}}
.form-err{color:var(--press);font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;margin:12px 2px 0}
.form-err[hidden]{display:none}
.form-done{margin:30px 0 0;max-width:560px;border:1px solid var(--ink);padding:22px 24px;display:none}
.form-done.show{display:block}
.form-done strong{font-family:var(--serif);font-size:1.4rem;font-weight:400;display:block;margin-bottom:4px}
.form-done .eds{font-family:var(--mono);font-size:.74rem;color:var(--g-1);margin-top:8px;letter-spacing:.03em}

/* ---------- Sources bar ---------- */
.sources{padding:0 0 22px;position:relative}
.sources .lab{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-2);margin-bottom:16px;position:relative;z-index:4}
.marquee{position:relative;overflow:hidden}
/* Rand-Unschaerfe ueber das GANZE Band (obere x-Linie beim Label bis untere x-Linie unten);
   voll gradueller Verlauf -> Brands werden langsam unscharf + weiss und verschwinden erst am Rand. */
/* Kanten-Blur (Mel 06.07., justiert): SCHMAL + randnah (Zone 18% statt 30% — dort, wo die
   Linien enden), vertikal verlaengert (top 22px / bottom -14px), damit der Blur-Halo der
   Buchstaben nicht mehr an der Overlay-Kante hart abgeschnitten wird. Weiss nur noch als
   schmaler Streifen direkt vor dem Rand. */
.sources::before,.sources::after{content:"";position:absolute;top:22px;bottom:-14px;width:13%;z-index:3;pointer-events:none}
.sources::before{left:0;background:linear-gradient(to right,#fff 0,#fff 12%,rgba(255,255,255,0) 45%);-webkit-mask:linear-gradient(to right,#000 45%,transparent);mask:linear-gradient(to right,#000 45%,transparent)}
.sources::after{right:0;background:linear-gradient(to left,#fff 0,#fff 12%,rgba(255,255,255,0) 45%);-webkit-mask:linear-gradient(to left,#000 45%,transparent);mask:linear-gradient(to left,#000 45%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 36s linear infinite}
.marquee .src{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.5rem);color:var(--ink);opacity:.82;white-space:nowrap;flex:none;margin-right:clamp(30px,5vw,64px)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .sources::before,.sources::after{display:none}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;row-gap:12px}
  .marquee-track [aria-hidden=true]{display:none}
}

/* (the-no trust band component removed — was unused) */

/* ---------- Statement ---------- */
.statement p{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.1vw,2.45rem);line-height:1.28;letter-spacing:0;max-width:22ch;color:var(--ink)}
.statement p .muted{color:var(--g-3)}
.statement p .key{color:var(--press)}
.statement .note{font-family:var(--sans);font-size:1.02rem;color:var(--g-1);max-width:48ch;margin-top:26px;line-height:1.65}

/* ---------- Editions (2-col) ---------- */
.editions{display:grid;gap:0;grid-template-columns:1fr}
.ed{padding:clamp(30px,4vw,46px) 0;position:relative}
.ed-brand{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-2);margin-bottom:10px}
.ed .name{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);line-height:1.02}
.ed .name b{color:var(--press);font-weight:400}
.ed .pitch{font-size:1.06rem;color:var(--ink-soft);margin:14px 0 0;max-width:42ch;line-height:1.55}
.ed ul{list-style:none;margin:22px 0 0}
.ed li{padding:13px 0;border-top:0;font-size:.96rem;color:var(--g-1);display:flex;gap:12px;align-items:baseline}
.ed li:first-child{border-top:1px solid var(--line-faint)}
.ed li::before{content:attr(data-n);font-family:var(--serif);font-size:1.4rem;line-height:1;color:var(--ink);min-width:30px}
.ed .more{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink);padding-bottom:2px}
.ed-readerline{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--g-2);text-align:left;padding-top:26px;margin-top:22px;border-top:1px solid var(--line)}
/* Editions: die fruehere Regel "#editions .seclabel{margin-bottom:16px}" ist ENTFERNT
   (Kritiker-Gate 13.07.): seit .shad (07.07.) war sie toter Override — nach dem Umzug der
   shad-Regeln in diese Datei haette ihre ID-Spezifitaet die generische
   .seclabel.shad{margin-bottom:0} geschlagen und "The bits" 16px Luecke verpasst. */

/* ---------- Paper (the proof / sample issue) ---------- */
.sample-wrap{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,54px);align-items:start}
/* min-width:0 (Mobile-Audit 14.07.): Grid-Items duerfen unter ihre Min-Content-Breite schrumpfen.
   Ohne das koppelt sich fixPaper (issue width:520px + zoom) mit der 1fr-Spalte zu einem
   Feedback-Loop auf ~467px > Viewport -> 112px Horizontal-Overflow, der auch .std-lead/.std-bits
   mitzieht. Desktop unveraendert (Spalten dort breiter als jede Min-Content-Breite). */
.sample-wrap>*{min-width:0}
.sample-lead h3{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.1rem);line-height:1.06;letter-spacing:0;margin:18px 0 0}
.sample-lead p{color:var(--g-1);margin:18px 0 0;max-width:46ch;line-height:1.6}
/* The standard + sample, plakativ side-by-side (index) */
/* max-width raus (Mel 16.07.): der 3-Zeilen-Umbruch steht jetzt hart im HTML (<br>),
   18ch haette Zeile 1 ("We read the day's news" = 23ch) erneut umbrochen. */
.std-lead .lead-statement{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.18;letter-spacing:0;color:var(--ink);margin:0}
.std-lead .lead-statement .key{color:var(--press)}
.std-lead .note{font-family:var(--sans);font-size:1.02rem;color:var(--g-1);max-width:46ch;margin:22px 0 0;line-height:1.65}
.std-lead .btn{margin-top:30px}
.teaser-note{font-family:var(--mono);font-size:.72rem;color:var(--g-2);letter-spacing:.03em;max-width:28ch}
.paper{background:#fff;box-shadow:0 26px 50px -22px rgba(20,20,20,.30),0 9px 20px -10px rgba(20,20,20,.16),0 0 22px -5px rgba(20,20,20,.11)}
.paper-stack{display:grid}
.paper-stack>.paper{grid-area:1/1}
.paper-stack>.paper[hidden]{display:block;visibility:hidden}
/* Sample-Issue = Spiegel des ECHTEN Newsletter-Designs (Weiss-Redesign 06.07., Mel 07.07.):
   ALLE Trennlinien 1px var(--line) und INSET auf Inhaltsbreite (::after im Padding statt
   randvoller border), Hero mit Ink-Rahmen wie die echten Bildzellen, Quellen klein/gedeckt. */
.paper .ph-mast{padding:14px 22px 0;border-bottom:0}
/* Masthead-Trenner wie im ECHTEN Newsletter (Mel 16.07., nl-ml-send.py SHADOW_MAST):
   schmaler radialer Schatten statt Haarlinie, im Inhalts-Raster, mit Luft unter dem Datum.
   Werte auf Sample-Massstab skaliert (520 vs 660 -> 24px Hoehe ~ 19px, 10px Gap ~ 8px). */
.paper .ph-mast::after{content:"";display:block;height:19px;margin-top:8px;
  background:radial-gradient(ellipse 68% 100% at 50% 0%,rgba(20,20,20,.12),rgba(20,20,20,.05) 45%,rgba(20,20,20,0) 78%)}
.paper .ph-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-2)}
.paper .ph-row .i{color:var(--press)}
.paper .ph-name{font-family:var(--serif);font-size:2.8rem;text-align:center;line-height:1;margin:10px 0 6px}
.paper .ph-date{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-2);text-align:center}
.paper .ph-lead{padding:20px 22px 0;border-bottom:0}
/* ph-lead::after-Hairline ENTFERNT (Mel 16.07. nachts): vor "The Shortlist" steht im
   Original-Newsletter KEINE Linie (Linien-Regel: nur ZWISCHEN Hauptartikeln) — die
   Auslassungs-Punkte sind der einzige Trenner, wie im Advertise-Sample. */
.paper .ph-k{font-family:var(--sans);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-2);font-weight:600;text-align:center}
.paper .ph-h{font-family:var(--serif);font-size:1.85rem;line-height:1.1;text-align:center;margin:9px 0 0}
.paper .ph-body{margin:14px 0 0;font-size:.82rem;line-height:1.55;color:var(--g-1);text-align:left}
/* "Why it matters" wie im ECHTEN Newsletter (Mel 16.07.): fette Label-Zeile + ein Satz
   Einordnung, direkt vor der Quelle — nur Hauptartikel, nicht Shortlist/Sponsored. */
.paper .ph-why{margin:9px 0 0;font-size:.78rem;line-height:1.55;color:var(--g-1);font-weight:700}
.paper .ph-why+.ph-body{margin:2px 0 0;font-size:.78rem}
.paper .ph-hero{width:100%;height:auto;display:block;margin:14px 0 0;border:0}
.paper .ph-hatch{height:96px;margin:16px 0 0;border:1px solid var(--ink);background-image:repeating-linear-gradient(135deg,#eef0ef 0,#eef0ef 9px,#e2e4e2 9px,#e2e4e2 18px)}
/* Explizite Trennlinie (fuer das Advertise-Demo, wo die Slots eigene Boxen sind und
   kein ::after tragen koennen) — identisch zur ph-lead::after-Linie. */
.paper .ph-sepline{height:1px;background:var(--line);margin:6px 22px 0}
/* Hauptartikel 2 (aktuelles Layout seit Nº ~25: zweiter Feature-Artikel ohne Bild,
   linksbuendige Serif-h2; nach dem letzten Hauptartikel NIE eine Linie vor der Shortlist) */
.paper .ph-art2{padding:18px 22px 0}
.paper .ph-h2{font-family:var(--serif);font-size:1.3rem;line-height:1.15;margin:7px 0 0}
.paper .ph-art2 .ph-body{font-size:.78rem;margin:11px 0 0}
/* .ph-end entfernt (13.07.): der fruehere Abschlussstrich ist dem echten Mail-Footer
   (.ph-foot, s. unten) gewichen — kein Verwender mehr im Markup. */
.paper .ph-list{padding:8px 22px 0}
.paper .ph-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.paper .ph-item .ph-eyebrow{margin-bottom:4px}
.paper .ph-item:last-child{border-bottom:0}
.paper .ph-num{font-family:var(--serif);font-size:1.5rem;line-height:1;min-width:24px}
.paper .ph-it-h{font-size:.84rem;font-weight:600;color:var(--ink)}
.paper .ph-it-s{font-size:.76rem;color:var(--g-1);margin-top:2px;line-height:1.45}
/* Full issue preview (Home) */
.issue{max-width:520px;margin:0 auto;max-height:var(--cut);overflow:hidden;position:relative;border-radius:12px 12px 0 0}
/* Home-Sample (Mel 16.07., wie die Advertise-Karte): Default = Canvas-Grau + duenne Outline;
   Hover = VOLL WEISS, Outline weg, Lift + Schatten. Historie: die 15.07.-Weiss-Variante war
   die Reaktion auf ein Hover-Durchschein-Artefakt der alten grau-Variante — Ursache war die
   z-index:-1-Schattenebene, nicht das Grau. Jetzt liegt die Outline als ::after-OVERLAY AUF
   der Karte (adv-issue-Muster): beim Hover opacity:0, darunter ist Kartenweiss — der
   Seitenhintergrund kann konstruktionsbedingt nie durchscheinen.
   Basis-.issue (Cut/overflow) hier ueberschrieben. */
#sample .issue{max-height:none;overflow:visible;border-radius:12px;
  background:var(--page);box-shadow:none;border:0;
  transition:translate .5s cubic-bezier(.3,0,.2,1),scale .5s cubic-bezier(.3,0,.2,1),box-shadow .5s ease,background .5s ease}
#sample .issue::after{content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid var(--line);pointer-events:none;transition:opacity .5s ease}
/* SCROLL-LIT statt Hover (Mel 17.07. abends): das Sample leuchtet nicht mehr beim Hovern,
   sondern sobald seine Oberkante die 62%-Linie des Viewports passiert (.lit setzt app.js,
   reine Funktion der Scrollposition -> beide Richtungen automatisch). Optik unveraendert:
   voll weiss (opak) + Lift + Schatten — wie .ad-slot.lit; Schatten DIREKT auf der Karte
   (Stacking-Lehre 15.07.: nie wieder eine z-index:-1-Ebene fuer den Schatten). */
#sample .issue-hold.lit .issue{background:#fff;translate:0 -2px;scale:1.008;
  box-shadow:0 14px 30px -16px rgba(20,20,20,.32),0 5px 12px -6px rgba(20,20,20,.16),0 0 18px -7px rgba(20,20,20,.12)}
#sample .issue-hold.lit .issue::after{opacity:0}
/* Hover-Lit ZUSAETZLICH zum Scroll-Lit (Mel 24.07.): die ganze Karte leuchtet auch beim
   Hovern — identischer Endzustand wie .issue-hold.lit (weiss + Lift + Schatten + Outline
   weg). Nur echtes Hover (Bug-Klasse klebender Touch-Hover 12.07.); Touch behaelt den
   Scroll-Trigger. Optik/Markup sonst unveraendert. */
@media (hover:hover){
  #sample .issue:hover{background:#fff;translate:0 -2px;scale:1.008;
    box-shadow:0 14px 30px -16px rgba(20,20,20,.32),0 5px 12px -6px rgba(20,20,20,.16),0 0 18px -7px rgba(20,20,20,.12)}
  #sample .issue:hover::after{opacity:0}
}
/* "The bits" kompakt in der LINKEN Spalte unter dem Einleitungstext (Mel 14.07.): je Titel +
   kurzer Pitch, untereinander gestapelt, mit Trennlinie vom Text abgesetzt. */
/* Bits kompakt (Mel 16.07., abends praezisiert): Name serif auf EIGENER Zeile UEBER der
   Beschreibung — gleiches Muster wie die h3-Subtitel auf privacy.html (.prose h3:
   serif 1.35rem, kleiner Abstand zur Zeile darunter). Keine Bloecke, keine Listen. */
.std-bits{margin-top:clamp(26px,3.4vw,38px);padding-top:clamp(24px,3vw,34px);border-top:1px solid var(--line);display:grid;gap:24px}
.std-bits .bit-line{font-family:var(--sans);font-size:1.02rem;color:var(--g-1);margin:0;line-height:1.55;max-width:46ch}
.std-bits .bit-name{display:block;font-family:var(--serif);font-size:1.35rem;line-height:1.2;color:var(--ink);margin:0 0 8px}
.issue-hold{position:relative;padding-bottom:20px}
/* #sample-Sonder-padding-bottom ENTFERNT (Mel 17.07. spaet, einheitlicher Section-Abstand):
   die Luecke Sample -> FAQ folgt jetzt dem Basis-Muster wie alle Section-Paare. */
.issue .ph-name{font-size:2.3rem}
.issue .ph-h{font-size:1.55rem}
.issue .ph-sec{font-size:1.15rem}
.ph-src{display:inline-block;margin-top:8px;font-family:var(--sans);font-size:.68rem;color:var(--g-3);padding-bottom:1px}
.ph-sec{border-bottom:1px solid var(--line);padding-bottom:8px;font-size:1.3rem;color:var(--ink)}
.ph-tag{font-family:var(--sans);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-2);font-weight:600;margin-left:8px}
.ph-two{display:grid;grid-template-columns:1.45fr 1fr;padding:20px 0}
.ph-two .col{padding:0 22px}
.ph-two .left{border-right:1px solid var(--line)}
.ph-eyebrow{font-family:var(--sans);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-2);font-weight:600}
.ph-two h4{font-family:var(--serif);font-weight:400;font-size:1.1rem;margin:8px 0 0;line-height:1.2}
.ph-two .bignum{font-size:2.1rem;line-height:1;margin:6px 0 0;color:var(--ink)}
.ph-two p{font-size:.78rem;color:var(--g-1);line-height:1.5;margin:6px 0 0}
.ph-ad{margin:22px;border:1px solid var(--line-strong);height:90px;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--g-3)}
/* Footer wie in der echten Mail (Mel 13.07., ersetzt .ph-end): Linie + zentrierter
   grauer Adressblock, Zeilen identisch zum Versand-Footer (nl-ml-send.py). */
/* Footer-Zeilen wie im ECHTEN Newsletter (Take-Disclaimer + AI-Disclosure + Adressblock),
   zentriert. IMMER TRANSPARENT — im gehighlighteten Zustand ist das Papier weiss, der
   Footer also ebenfalls weiss.
   ABWEICHUNG VOM ORIGINAL, BEWUSST (Mel 19.07.): der echte Newsletter hat dort ein
   band-dark-Band; im Home-Sample lenkte das graue Band ab. Die Regel dafuer
   (#sample .issue-hold.lit .issue .ph-foot{background:var(--band-dark)}) ist entfernt —
   NICHT vergessen, nicht wieder angleichen. Advertise-Sample war nie betroffen. */
/* margin-top 24 -> 0 (Mel 16.07. nachts): Abstand UNTER den Auslassungs-Punkten = 20px
   Punkte-Padding, symmetrisch zum Abstand darueber — Sample wird kuerzer. */
.ph-foot{margin-top:0;padding:24px 18px 28px;background:transparent;border-radius:0 0 11px 11px;text-align:center;font-family:var(--sans);font-size:.62rem;line-height:1.75;color:var(--g-2);transition:background .5s ease}
/* Shortlist-Block: padding-top 8 -> 0 nur im Home-Sample (Mel 16.07. nachts): unter den
   Punkten sollen exakt die 20px des Punkte-Paddings stehen wie darueber. Advertise-Sample
   (eigene ph-list-Nutzung) bleibt unveraendert. */
#sample .ph-list{padding-top:0}
.ph-foot .u{text-decoration:underline}

/* ---------- Issue switcher (interactive) ---------- */
.switcher{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:26px}
.iss-card{background:transparent;border:0;border-bottom:2px solid transparent;padding:4px 0;cursor:pointer;text-align:left;font-family:var(--sans);transition:border-color .18s,color .18s}
.iss-card .n{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-3)}
.iss-card .t{display:block;font-family:var(--serif);font-size:1rem;line-height:1.12;margin-top:4px;color:var(--g-3)}
.iss-card:hover .t{color:var(--ink)}
.iss-card[aria-pressed=true]{border-bottom-color:var(--ink)}
.iss-card[aria-pressed=true] .n{color:var(--g-2)}
.iss-card[aria-pressed=true] .t{color:var(--ink)}

/* ---------- Value props ---------- */
.vp{display:grid;grid-template-columns:1fr;gap:0}
.vp .cell{padding:30px 0;border-top:1px solid var(--line)}
/* Linie ueber "01" weg (Mel 17.07. nachts V): erste Zelle ohne Oberlinie. Desktop hat ohnehin
   border-top:0 auf allen Zellen -> nur mobil sichtbar. */
.vp .cell:first-child{border-top:0}
/* Fuehrende Null (01/02/03) NUR mobil ausblenden (Mel 17.07. nachts V) -> "1/2/3". */
@media (max-width:759px){ .vp .n .lz{display:none} }
.vp .n{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--ink)}
.vp .n span{color:var(--press)}
.vp h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin:14px 0 0;line-height:1.15}
.vp p{color:var(--g-1);margin:10px 0 0;font-size:.98rem;line-height:1.6;max-width:38ch}

/* ---------- How it works ---------- */
.how{display:grid;grid-template-columns:1fr;gap:0}
.how .step{padding:26px 0;border-top:1px solid var(--line);display:flex;gap:20px;align-items:baseline}
.how .step .s{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--press)}
.how .step p{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.25;color:var(--ink)}

/* ---------- Dark CTA band ---------- */
.band{background:var(--ink);color:#fff}
.band h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.04;max-width:16ch}
.band .sub{color:#c9c9c7;margin:16px 0 0;max-width:46ch;font-size:1.05rem}
.band .field{border-color:#fff;background:transparent;margin-top:30px;max-width:540px}
.band .field input[type=email]{color:#fff}
.band .field input[type=email]::placeholder{color:#9a9a98}
.band .field button{background:#fff;color:var(--ink)}
.band .reassure{color:#9a9a98}
.band .editions-pick label{color:#c9c9c7}
.band .editions-pick input{accent-color:#fff}
.band .form-done{border-color:#fff;color:#fff}
.band .form-done .eds{color:#c9c9c7}
.band .form-err{color:#f0a59a}

/* ---------- Advertise ---------- */
/* Positiv auf Weiss (Mel 06.07., war negativ auf ink); Button = Standard .btn-solid
   (Verhalten wie alle schwarzen Buttons: Hover -> --band, Klick -> 1px Outline). */
.advert{display:flex;justify-content:space-between;align-items:center;gap:clamp(28px,4vw,56px);flex-wrap:wrap}
.advert p{font-family:var(--serif);color:var(--ink);font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.16;letter-spacing:0;max-width:34ch}
.fmt-grid{display:grid;grid-template-columns:1fr;gap:0;margin-top:6px}
.fmt{padding:24px 0;border-top:1px solid var(--line);display:grid;gap:6px}
.fmt .nm{font-family:var(--serif);font-size:1.5rem}
.fmt .meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--g-2);text-transform:uppercase}
.fmt .desc{color:var(--g-1);font-size:.98rem;max-width:52ch;line-height:1.6}
.fmt .ph{font-family:var(--mono);font-size:.7rem;color:var(--press);letter-spacing:.06em}
.aud{display:grid;grid-template-columns:1fr;gap:0}
.aud .row{padding:16px 0;border-top:1px solid var(--line-faint);display:flex;gap:16px;align-items:baseline}
.aud .row .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--g-2);min-width:120px}
.aud .row .v{color:var(--ink-soft);font-size:1rem}

/* ---------- Archive ---------- */
.arc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.arc-filter{display:flex;gap:8px}
.arc-filter button{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 17px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;color:var(--g-1);cursor:pointer;transition:.18s}
.arc-filter button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.arc-month{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g-2);margin:34px 0 4px}
.arc-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:18px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line);border-left:2px solid transparent;transition:border-color .15s}
.arc-row:last-child{border-bottom:1px solid var(--line)}
.arc-row:hover,.arc-row:focus-visible{border-left-color:var(--press)}
.arc-row .date{font-family:var(--mono);font-size:.74rem;color:var(--g-2);white-space:nowrap}
.arc-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-strong);padding:3px 8px;color:var(--g-1);white-space:nowrap}
.arc-tag.ai{border-color:var(--ink);color:var(--ink)}
.arc-row .hl{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.15;color:var(--ink)}
.arc-row .read{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--g-2);white-space:nowrap}
.arc-row:hover .read{color:var(--press)}

/* ---------- Prose (About / Privacy) ---------- */
.prose{max-width:60ch}
.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15;margin:0 0 14px}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:36px 0 10px}
.prose p{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;margin:0 0 16px}
.prose p.small{font-size:.92rem;color:var(--g-1)}
.prose ul{margin:0 0 16px 0;padding-left:0;list-style:none}
.prose li{color:var(--ink-soft);font-size:1.02rem;line-height:1.65;padding:8px 0 8px 22px;position:relative}
.prose li::before{content:"—";position:absolute;left:0;color:var(--press)}

/* ---------- Footer ---------- */
/* Footer optisch abgetrennt (Mel 14.07.): seit dem grauen Canvas war --band = Seiten-Grau
   (#eeeeec), der Footer verschmolz mit dem Inhalt. Der dunklere Grauwert (--band-dark
   #e2e2e0) hebt ihn wieder ab — wie frueher der Grau-gegen-Weiss-Kontrast. */
footer{background:var(--band-dark)}
.foot-in{max-width:var(--sheet);margin:0 auto;padding:clamp(44px,6vw,72px) var(--gut) 30px}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start}
.foot-mark .m{font-family:var(--serif);font-size:2.4rem;line-height:1}
.foot-mark .t{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--g-2);margin-top:10px;text-transform:uppercase}
.foot-cols{display:flex;gap:clamp(34px,6vw,84px);flex-wrap:wrap}
.foot-cols h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-2);margin-bottom:14px;font-weight:500}
.foot-cols a{display:block;font-size:.92rem;color:var(--g-1);padding:5px 0}
@media (hover:hover){.foot-cols a:hover{color:var(--ink)}}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(36px,5vw,60px);padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--g-2)}

/* ---------- Styleguide page ---------- */
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}
.sg-sw{border:1px solid var(--line)}
.sg-sw .chip{height:64px}
.sg-sw .meta{padding:8px 10px;font-family:var(--mono);font-size:.68rem;color:var(--g-1);letter-spacing:.02em}
.sg-sw .meta b{display:block;color:var(--ink);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:.62rem;margin-bottom:2px}
.sg-type div{border-top:1px solid var(--line);padding:18px 0}
.sg-type .meta{font-family:var(--mono);font-size:.68rem;color:var(--g-2);letter-spacing:.06em;margin-bottom:8px;text-transform:uppercase}

/* ---------- Archive featured (latest issue) ---------- */
.arc-featured{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;padding:0 0 30px;border-bottom:1px solid var(--ink);margin-bottom:8px}
.arc-featured .meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g-2);display:flex;gap:12px;align-items:center}
.arc-featured .meta .now{color:var(--press)}
.arc-featured .hl{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.05;margin:10px 0 0;color:var(--ink);display:block}
.arc-featured .read{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--g-2);margin-top:14px;display:inline-block}
.arc-featured:hover .read{color:var(--press)}

/* ---------- Share / referral line ---------- */
.share{font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--g-2);margin-top:16px}
.share a{color:var(--ink);font-weight:600}

/* ---------- Cover (Home hero — type as image) ---------- */
.cover{position:relative;min-height:auto;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(22px,4vh,40px) 0 0}
/* Advertise-Cover braucht unten Luft (Mel 10.07. abends): die Buttons sind das unterste
   Element und sassen mit 0px Puffer auf der Section-Kante — der Reveal-translateY(16px) beim
   Oeffnen schob ihre Unterkante unter die overflow:hidden-Grenze -> abgeschnitten. padding-
   bottom faengt den Reveal ab. Aendert die Button-Hoehe NICHT (die kommt per margin-top von
   oben). Gescoped via :has(.adv-cta) -> Home-Cover unveraendert. */
.cover:has(.adv-cta){padding-bottom:clamp(22px,3vw,34px)}
/* v1 "type as image" cover removed 06.07.2026 — exploration pages archived; live home
   uses the .cover-c hero below. Inner-page de-escalation is handled by `.hero .h1`. */

/* ---------- Cover hero v2 — centered, conversion-first ---------- */
.cover-c{max-width:780px;width:100%;margin:0 auto;padding:0 var(--gut);text-align:center}
/* Formular-Container breiter als die Textspalte (714px Form + 2x64px Gutter = 842): der
   Container kappt die Form-Breite, deshalb muss ER mitwachsen, damit die Form ihre max-width
   714 erreicht. Die Verbreiterung kommt 1:1 dem E-Mail-Feld zugute -> Feld 450px (gerade)
   (Mel 09.07.: nochmal +10px). */
.cover-form{max-width:842px}
/* Advertise-Buttons an der Position/Breite des E-Mail-Feldes (Mel 10.07. abends): nutzen
   dieselbe .cover-c.cover-form-Huelle wie auf der Home-Seite; .cta-row ist sonst
   linksbuendig (andere Seiten) — hier gescoped zentriert. */
.cover-form .cta-row{justify-content:center}
/* Buttons auf EXAKT dieselbe Hoehe wie das E-Mail-Feld auf der Home-Seite (Mel 10.07. abends):
   Floor/Cap gemessen so gesetzt, dass die Button-Reihe ueber den ganzen Desktop-Bereich auf
   Feld-Hoehe landet (850px: 90, 1000px: 96, 1280px: 100 -> jeweils <=1px zur Feld-Hoehe;
   der Advertise-Untertext ist laenger, darum etwas kleinerer Abstand als Home). */
.adv-cta{margin-top:clamp(90px,9.6vw,100px)}
.cover-folio{display:flex;justify-content:center;gap:16px;align-items:baseline}
.cover-h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.02;letter-spacing:0;font-feature-settings:"liga" 1,"calt" 1;margin:clamp(20px,3vw,34px) auto 0;max-width:15ch}
/* Advertise-Titel 25% kleiner als der Startseiten-Hero (Mel 11.07.); Umbruch bleibt (im HTML
   per <br>). Eigene Modifier-Klasse -> die geteilte .cover-h1 (auch auf index.html) unberuehrt.
   Werte = clamp x0.75, auf runde Zahlen gelegt: 2.6->2rem, 6.4->4.8vw, 5.4->4rem. */
.cover-h1.adv-h1{font-size:clamp(2rem,4.8vw,4rem)}
/* Maker-Hero (31.07.2026, Positionierungs-Umstellung): "We watch the feed." ist 18 Zeichen —
   im 15ch-Default + 6.4vw-Font passte die Zeile bei KEINER Breite in den .cover-c-Innenraum
   (665px verfuegbar, 683px noetig, gemessen 1280px) -> text-wrap:balance brach vierzeilig um.
   Werte empirisch am Live-DOM verifiziert (2 Zeilen bei 417/768/1280px). */
.cover-h1.maker-h1{font-size:clamp(2.4rem,6vw,4.8rem);max-width:23ch}
/* Briefing-Hero (04.08.2026, Headline sagt jetzt was es ist): die neuen Zeilen sind 26 bzw.
   32 Zeichen — deutlich laenger als der Maker-Hero (18). Am Live-DOM gemessen (1280px):
   massgeblich ist die H1-Breite von 665px (NICHT die 780px des Elternknotens — der hat
   Innenabstand; dieselbe 665er-Zahl steht schon im Maker-Kommentar darueber). Bei 77px
   Schrift braucht die 32er-Zeile 1108px -> vierzeiliger Umbruch, der zudem "AI and / Tech"
   trennt. Groesste Schrift, bei der BEIDE Saetze je auf eine Zeile passen: 46px ->
   clamp-Maximum 2.8rem (44.8px) mit ~16px Reserve; vw-Wert 3.5 trifft das bei 1280px genau.
   max-width 34ch, damit nicht die ch-Grenze statt der Breite umbricht.
   Preis der Aenderung: der Hero ist rund 30% kleiner als der Maker-Hero. Mobil bricht Satz 2
   weiterhin auf zwei Zeilen — dort ist das der Normalfall.
   text-wrap:wrap ist PFLICHT und kein Beiwerk: .cover-h1 erbt text-wrap:balance, und balance
   teilte Satz 2 selbst dann noch auf zwei Zeilen ("... and the" / "hour."), als er mit 776px
   gegen 780px rechnerisch passte — am DOM nachgemessen. Die Bruchstellen setzen hier die
   <br> im HTML, nicht der Ausgleichsalgorithmus. Deshalb steckt im clamp-Maximum bewusst
   Reserve: 4px sind zu wenig, sobald die Live-Schrift anders rendert als die lokale. */
.cover-h1.brief-h1{font-size:clamp(2.4rem,6vw,4.8rem);max-width:none;text-wrap:wrap}
/* Breiter Hero-Textblock, NUR fuer den Briefing-Hero auf index.html (04.08.2026, Mel:
   "Headline auf alte Groesse waere super"). Rechnung am DOM: .cover-c ist auf 780px
   gedeckelt und verliert 2x57.6px Innenabstand -> 665px fuer die H1. "Your AI and Tech
   briefing." braucht bei der alten Groesse (77px) aber 880px. Das Blatt (.sheet) ist
   1180px breit, der Platz ist also da: 1040px Container -> 925px innen, 45px Reserve.
   Bewusst als eigene Klasse am DIV statt Aenderung an .cover-c — About/Advertise/Legal
   teilen sich diesen Container und sollen schmal bleiben. */
.cover-c.cover-wide{max-width:1040px}
/* About-Cover (Mel 13.07.): "Read everything." ist 16ch — 1ch breiter als das
   15ch-Default, sonst bricht die Zeile in vier statt drei Zeilen. */
.cover-h1.about-h1{max-width:16ch}
.cover-sub{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);line-height:1.55;margin:20px auto 0;max-width:50ch}
/* Maker-Sub (Mel 31.07.): letzter Satz steht per <br> allein auf der Schlusszeile; Satz 1
   misst 719px, der .cover-c-Innenraum nur 652px -> ohne Ausgleich braeche "at work." als
   Witwe um. balance verteilt Satz 1 auf zwei gleichmaessige Zeilen. Nur dieser Hero. */
.maker-h1+.cover-sub,.brief-h1+.cover-sub{text-wrap:balance}
/* Legal-Cover (Mel 16.07.): gleiches Cover-Idiom wie About/Advertise, aber KOMPLETT
   linksbuendig — Container auf Sheet-Breite, Titel/Sub ohne Auto-Zentrierung. */
.cover-c.cover-left{max-width:var(--sheet);text-align:left}
.cover-left .cover-h1{margin-left:0;margin-right:0;max-width:22ch}
.cover-left .cover-sub{margin-left:0;margin-right:0}
.signup{max-width:714px;margin:clamp(30px,4vw,52px) auto 0} /* 660->680->690->704->714: E-Mail-Feld laenger (Mel 09.07.); Abstand zum Text darueber verkleinert (Mel 10.07. abends, war clamp(64,8.5vw,108)) */
/* Untere Kante der Formularflaeche = aufliegendes Blatt; EIN weicher Schatten faellt nach UNTEN.
   Der obere Trenner wurde entfernt (Mel 06.07.). Frueher war das ein box-shadow durch einen nur
   26px hohen Ausschnitt -> sichtbar war nur das dunkle Nahfeld, wirkte hart (Mel 06.07. "zu hart").
   Jetzt ein linearer Verlauf ueber die volle Abklinglaenge (~64px): dunkelste Stelle an der
   Formular-Kante, weich nach unten auslaufend. Seiten wie die Linien maskiert (14/86 %). */
/* EXAKT der Newsletter-Schatten (.paper-Oberkante, Mel 06.07.): ein unsichtbarer, volle Content-
   Breite laufender Block wirft seinen Papier-Box-Shadow in den Streifen; overflow:hidden zeigt nur
   EINE Seite. Default = nach unten; .up spiegelt vertikal -> nach oben. Laenge = Content-Breite
   (wie die Linien der Seite), Enden nur minimal (4%) weich statt frueher 14%. */
.sep-shadow{position:relative;height:44px;margin:0 calc(var(--gut) / 2);overflow:hidden;pointer-events:none;
  -webkit-mask:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);
  mask:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.sep-shadow::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:52px;opacity:.5;
  box-shadow:0 26px 50px -22px rgba(20,20,20,.30),0 9px 20px -10px rgba(20,20,20,.16),0 0 22px -5px rgba(20,20,20,.11)}
.cover .sep-shadow{margin-top:clamp(50px,6.5vw,80px);margin-bottom:26px}
.sep-shadow.up{transform:scaleY(-1)}
/* up-Schatten (advertise-teaser) an die Label-Schatten angeglichen (Mel 07.07.): ::before ueber
   die Kanten hinaus, damit der Ecken-Falloff ausserhalb des Bandes liegt -> gleiche Formsprache
   wie .lbl-shadow, nur weiterhin 180 gedreht. */
.sep-shadow.up::before{left:-60px;right:-60px}
/* Ohne Cover-Bottom-Padding braucht das Step-2-Dropdown Luft nach unten: nur auf der
   Wizard-Cover-Variante overflow freigeben (Steps clippen horizontal selbst; die alte
   .cover-field-Variante der Explorations-Seiten bleibt hidden). z-index 5 hebt das offene
   Dropdown ueber die Read-across-Ebenen (Masken z-3, Label z-4; Nav z-40 bleibt drueber) —
   noetig, weil das .rv-Filter auf dem Formular einen eigenen Stacking-Context erzeugt. */
.cover:has(.steps){overflow:visible;z-index:5}
/* Grid: Zeile1 [Switches | Feld] (Switches vertikal zentriert), Zeile2 [Label | Reassure] —
   beide Labels liegen so garantiert auf gleicher Hoehe und starten am Anfang ihres Elements. */
.signup-row{display:grid;grid-template-columns:auto minmax(0,470px);grid-template-areas:"eds field" "edlabel reassure";justify-content:center;align-items:center;column-gap:clamp(16px,2.6vw,30px);row-gap:11px}
.ed-cards{grid-area:eds;display:flex;gap:12px;justify-self:start}
.signup-field{grid-area:field}
.signup-lbl{grid-area:edlabel;align-self:start;text-align:left;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--g-2);padding-left:4px}
@media (max-width:559px){.signup-row{grid-template-columns:minmax(0,380px);grid-template-areas:"eds" "edlabel" "field" "reassure"}
/* Mel 28.07. spaetabends + nachts ("nochmal mehr"): Luft zwischen "Choose your bits"
   und dem E-Mail-Feld */
.signup-row .signup-field{margin-top:26px}}
.ed-card{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:default;padding:6px 2px}
.ed-card input{position:absolute;opacity:0;width:1px;height:1px}
/* Switch — folgt der Form des E-Mail-Felds (Pille, 1.5px Ink). Knopf gleitet nach rechts,
   schwarze Fuellung waescht von links nach rechts durch; an = ganz schwarz, Knopf wird weiss. */
/* Switch: grauer Track OHNE Outline. Schwarzes Element 4px eingerueckt (Grau ringsum sichtbar).
   Aus = Kreis links; An = das Element waechst nach rechts zur Kapsel (Kreis links + Steg + Kreis rechts). */
/* Switch: heller grauer Track + schwarzer Kreis links (aus). An = Track schwarz, Kreis rechts + weiss.
   Kreis bleibt Kreis; ein Bounce beim Bewegen (Overshoot-Easing). */
/* Track-Layout (Position/Groesse fuer den Kreis) bleibt bei 48x26 UNVERAENDERT (Mel-Korrektur
   10.07. abends: der Kreis soll exakt so gross bleiben und exakt da sitzen, wo er immer war —
   die vorige Fassung hatte ihn faelschlich mitverkleinert+verschoben). Die sichtbare
   Hintergrundflaeche ist jetzt eine SEPARATE Ebene (::after, hinter dem Kreis), NUR links+
   rechts um 4px eingerueckt (40px breit) — die Hoehe bleibt volle Track-Hoehe (26px,
   Mel-Korrektur: war faelschlich auch oben/unten eingerueckt). .ed-box selbst traegt kein
   eigenes background mehr. */
.ed-box{flex:none;width:48px;height:26px;border-radius:999px;position:relative;overflow:visible;cursor:pointer}
/* Track fuellt sich RICHTUNGSABHAENGIG (Mel 14.07.): schwarze Fuellung waechst von LINKS
   (background-size-Breite 0->100%), synchron zum Kreis-Slide (gleiche .42s-Overshoot-Kurve)
   -> der Kreis "zieht" die schwarze Farbe hinter sich her. Aus: Breite schrumpft von rechts
   zurueck nach links, spiegelbildlich. Weisser Grund darunter zeigt sich, wo (noch) kein Schwarz. */
.ed-box::after{content:"";position:absolute;top:0;bottom:0;left:4px;right:4px;border-radius:999px;
  background-color:#fff;background-image:linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;
  transition:background-size .42s cubic-bezier(.34,1.56,.64,1);z-index:0}
/* Knob flush with the track — exakt Track-Hoehe, kein Ueberhang (Mel 09.07.), unveraendert
   26x26 (Mel-Korrektur 10.07. abends). z-index:1 haelt ihn ueber der eingerueckten
   Hintergrundflaeche (::after). */
/* Knopf in BEIDEN Zustaenden Canvas-Grau (Mel 16.07., zurueck zur 14.07.-Regel "Knopf =
   Stueck Canvas"; hebt die kurzlebige Weiss-Fassung vom 15.07. auf): der Kreis ist
   durchgehend grau, sichtbar macht ihn der Ink-Pfeil IN seinem Inneren (.ed-chev, unten) —
   aus: › im Kreis links, an: ‹ im Kreis rechts (Pfeil zeigt die Schaltrichtung). */
.ed-box::before{content:"";position:absolute;top:0;left:0;width:26px;height:26px;border-radius:50%;background:var(--page);transition:transform .42s cubic-bezier(.34,1.56,.64,1),background .3s ease;z-index:1}
.ec-name{font-family:var(--sans);font-weight:500;font-size:1.05rem;line-height:1}
/* Graue Flaeche (Aus-Zustand) verdunkelt bei Hover genau wie das E-Mail-Feld (Mel 10.07.
   abends) — nur solange der Switch aus/grau ist; der An-Zustand (schwarzer Track) ist
   davon nicht betroffen. Faerbt jetzt die eingerueckte Hintergrundebene (::after).
   ALLE Switch-Hover-Regeln nur bei echtem Hover (Mel-Bug 12.07., mobil): auf Touch klebt
   :hover nach dem Tippen — Track blieb faelschlich dunkel (band-dark statt band) und der
   Nudge mischte sich in den Schalt-Bounce -> unruhige Farb-/Bewegungswechsel. Gleiche
   Kapselung wie FAQ-Chevrons und .go-chev; Desktop (hover-faehig) unveraendert. */
@media (hover:hover){
  /* Track-Hintergrund aendert sich bei Hover NICHT mehr (Mel 14.07.) — der bewegte Kreis ist
     die Rueckmeldung genug. (Frueher: ::after -> --band-dark. Auch im Grau-Block unten raus.) */
  /* Kreis bounct bei Hover nur die halbe Strecke nach rechts und HAELT dort (genau wie der
     Pfeil im E-Mail-Feld, eigene schnelle Transition) — beim Klick/Einschalten laeuft weiter
     der volle Bounce-Slide (24px, Overshoot-Easing) von .ed-box::before unveraendert.
     4px statt 5px (Mel 14.07.): der Kreis sitzt bei Hover 1px weiter links (linke Kante buendig
     an der eingerueckten Track-Kante, kein 1px-Sliver mehr).
     .no-nudge (Mel 10.07. abends, JS unten): direkt nach einem Klick/Umschalten bleibt der
     Hover-Nudge kurz aus, solange die Maus liegen bleibt — erst ein neues Hover (Maus raus +
     wieder rein) aktiviert ihn erneut, damit der Rueckweg beim Ausschalten nicht auf halber
     Strecke haengen bleibt. */
  .ed-card:not(.no-nudge):not(:has(input:checked)) .ed-box:hover::before{transform:translateX(4px);transition:transform .2s ease-out}
  /* Umgekehrt/gespiegelt (Mel-Korrektur 10.07. abends): ist der Switch bereits an, bewegt
     sich der Kreis bei Hover nach LINKS (24px Ruheposition - 5px = 19px) statt weiter nach
     rechts — genau spiegelbildlich zur Aus-Richtung (0 -> +5px). Die erste Fassung ging
     weiter nach rechts (29px), was am rechten Rand kaum sichtbar war. HAELT, solange
     gehovert wird; .no-nudge sperrt das ebenso kurz nach einem Klick (beide Richtungen). */
  .ed-card:has(input:checked):not(.no-nudge) .ed-box:hover::before{transform:translateX(19px);transition:transform .2s ease-out}
}
.ed-card:has(input:checked) .ed-box::after{background-size:100% 100%}   /* An: Fuellung ganz durch (Mel 14.07.) */
/* An: Knopf 2px UEBER buendig (24 statt 22) — die weisse Kuppe deckt so den Sub-Pixel-Saum am
   rechten Track-Rand ab, der bei exakt buendigem Stand (26+22=48) durchblitzte (Mel 09.07.). */
/* An-Knopf traegt das Seiten-Grau statt Weiss (Mel 14.07.): der Kreis wirkt wie ein Stueck
   Canvas auf dem schwarzen Track, statt reinweiss zu ploppen. Track bleibt schwarz. */
.ed-card:has(input:checked) .ed-box::before{transform:translateX(24px);background:var(--page)}
.ed-card:has(input:focus-visible) .ed-box{outline:2px solid var(--ink);outline-offset:3px}
/* Track-Fuellung folgt jetzt dem Kreis (richtungsabhaengig, s.o.): der frueher noetige
   verzoegerte Farbwechsel ("erst am Ziel") entfaellt — die Fuellung laeuft synchron mit dem
   Slide (background-size .42s aus Basis-::after, auch mobil). Die ::before-Transition bleibt
   (Kreis-Farbe wechselt ohnehin nicht mehr, Transform-Timing unveraendert). */
@media (hover:none){
  .ed-box::before{transition:transform .42s cubic-bezier(.34,1.56,.64,1),background .18s ease .15s}
  /* Touch-Trefflaeche 48x26 -> ~60x44 (Mobile-Audit 14.07., WCAG 2.2 Target Size komfortabel):
     das ohnehin unsichtbare Input im .ed-box-Label wird zur Trefflaeche aufgezogen (Halo 9px
     oben/unten, 6px seitlich). Der Halo (6px) bleibt unter dem 9px-Gap zum Wort. HINWEIS
     (Design-Gate 14.07.): auf Touch toggelt zusaetzlich der Wort-Tap "AI"/"Tech" (app.js,
     hover:none, seit 12.07. abends live) — Mels "nur Switch klickbar" (12.07. frueh) betraf
     den Desktop-Hover/Cursor; Entscheid-Klaerung liegt bei Mel. Desktop unangetastet. */
  .ed-box input{width:auto;height:auto;inset:-9px -6px}
}
/* Pill-Feld: Button bündig bis an die Outline, Ecken = exakte Halbkreise (overflow clippt an die Pille) */
/* E-Mail-Feld als Toggle (wie die Switches): schwarzer Kreis links + Platzhalter "type your email";
   sobald eine gueltige E-Mail erkannt wird, gleitet der Kreis nach rechts und waechst mit EINEM Bounce
   zur "Start reading"-Kapsel (weisse Schrift). Graue Flaeche unveraendert, Kreis/Button 4px eingerueckt. */
/* Field stays grey at all times — no white/outline on focus (Mel 05.07.); the typed email is
   black and reads clearly against the grey. Focus is shown by the text caret.
   ERGAENZT (Mel 10.07. abends): Hover/Fokus faerbt die Flaeche 5% dunkler (--band-dark) und
   bleibt in dieser Farbe waehrend der Eingabe — keine Outline. */
.signup-field{position:relative;container-type:inline-size;margin-top:0;border:0;border-radius:999px;background:var(--band);overflow:visible;transition:background .18s ease}
/* :hover nur bei echtem Hover (Mel-Bug 12.07., mobil): auf Touch klebte der dunkle Zustand
   nach dem Antippen/Verlassen des Feldes; waehrend der Eingabe traegt :focus-within. */
.signup-field:focus-within{background:var(--band-dark)}
@media (hover:hover){.signup-field:hover{background:var(--band-dark)}}
/* Ruhe-Kreis ist TRANSPARENT (Mel 10.07. abends, endgueltige Entscheidung statt Farb-
   Angleichung) — kein Hover-Faerben mehr noetig, der Pfeil traegt die Reaktion (Bounce
   weiter unten). Nur im Ruhe-Kreis-Zustand (:not(.valid)) — die gewachsene "Start
   reading"-Kapsel hat weiterhin ihre eigene Farb-/Hover-Logik. */
.signup-field input{display:block;width:100%;height:52px;line-height:52px;border:0;outline:0;padding:0 calc(var(--go-d,44px) + 16px) 0 24px;font-family:var(--sans);font-size:1.02rem;background:transparent;color:var(--ink);transition:padding .42s cubic-bezier(.4,.1,.2,1)}
.signup-field input::placeholder{color:var(--g-3)}
.signup-field.valid input{padding-left:24px;padding-right:172px}
/* BLACK circle at the right (Mel 09.07.: Ruhelage wieder Ink — kehrt den 07.07.-Rueckbau um —
   plus ›-Pfeil wie die FAQ-Chevrons), flush mit dem Feld: exakt Feld-Hoehe, kein 1px-Ueberhang
   (Mel 09.07.). On a valid email it grows in place into the BLACK "Start reading" button.
   Width bleibt var(--go-d) — der alte W3-Ink-Kreis-Bug (width:auto ist nicht animierbar,
   Button snappte) kann so nicht zurueckkommen. */
/* Ruhe-Kreis verhaelt sich wie die Datums-Pfeilkreise im Dashboard (Mel 10.07. abends):
   gleiche Farbe wie das Feld (verschmilzt optisch), Pfeil schwarz, kein Hover-Verdunkeln,
   Bounce statt Dauer-Hover-Effekt (Keyframes + Regel weiter unten). */
.signup-field button{position:absolute;top:0;bottom:0;right:0;width:var(--go-d,52px);border:0;border-radius:999px;background:transparent;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;outline:none}
/* One clean transition drives everything: width grows with a soft overshoot (the bounce), while the
   1px overhang smoothly resolves (top/bottom/right -1 -> 0) and the colour flips — no keyframe/
   transition conflict, no instant geometry snap (that was the jank). */
/* background .18s ease (Mel-Bug-Fund 10.07. abends, war .3s): muss EXAKT die Timing des
   Feldes treffen (.signup-field{transition:background .18s ease}) — beim gemeinsamen
   Hover-Faerben (s.o.) faerbte der Kreis sonst sichtbar verzoegert/langsamer nach. */
.signup-field.ready button{transition:width .46s cubic-bezier(.34,1.42,.64,1),top .34s ease,bottom .34s ease,right .34s ease,background .18s ease}
/* Audit 17.07. (WCAG 2.4.7): outline:none oben gewann gegen die globale :focus-visible-Regel
   (gleiche Spezifitaet, spaeter in der Kaskade) — der Submit hatte KEINEN Fokus-Indikator.
   Zustandsabhaengig: Ruhe-Kreis ist feldfarben -> Ink-Ring; valide Kapsel ist schwarz -> weisser Ring. */
.signup-field button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.signup-field.valid button:focus-visible{outline-color:#fff;outline-offset:-4px}
.signup-field button span{opacity:0;color:#fff;font-family:var(--sans);font-weight:400;font-size:.98rem;transition:opacity .15s,font-weight .15s}
.signup-field.valid button{top:0;bottom:0;right:0;width:158px;background:var(--ink)}
.signup-field.valid button span{opacity:1;transition:opacity .22s .16s}
/* ›-Pfeil im Ruhe-Kreis (gleiches Zeichen wie die FAQ-Chevrons, nach rechts); absolut zentriert,
   damit er die "Start reading"-Zeile nicht verschiebt; blendet aus, sobald die Kapsel waechst. */
/* ---------- 90-GRAD-PFEILSPITZE site-weit (Mel 16.07.): der Innenwinkel jeder Pfeilspitze
   ist exakt 90 Grad. Font-Glyphen (›) variieren den Winkel je Font -> die Spitze wird
   GEZEICHNET: Quadrat mit 2 Ink-Borders, -45deg rotiert = exakt 90 Grad, Strichstaerke
   1.6px. Die Richtungs-/Flip-/Nudge-Transforms bleiben auf dem SPAN (Site-Pfeilregel:
   Spiegel-Flip statt Rotation), die Spitze dreht innen mit. Groessen je Kontext unten;
   die ›-Glyphen sind aus dem HTML entfernt. ---------- */
/* ZWEI-SCHENKEL-SPITZE (Mel 17.07., ersetzt "Quadrat mit 2 Borders" + scaleX-Spiegel-Flip):
   der Spiegel-Flip skalierte durch Breite 0 — der Pfeil sah beim Umklappen FLACH aus, die
   Striche wurden duenn. Jetzt zwei Schenkel, Drehpunkte an den AUSSENENDEN: die stehen
   still, nur die SPITZE wandert auf die andere Seite (Mels Bild: "den Pfadpunkt in der
   Mitte in die andere Richtung ziehen"). Strichstaerke bleibt konstant 1.6px, Innenwinkel
   exakt 90 Grad (45+45); in der Mitte der Bewegung ist der Pfeil eine gerade Linie in
   VOLLER Staerke — nie duenn, nie flach.
   Native Richtung: Spitze UNTEN. Rechts-Pfeile (go/ed) drehen den ganzen Span (-90deg) —
   eine KONSTANTE Grundlage in jedem Zustand, keine Zustands-Rotation.
   --half je Kontext = Halb-Spannweite (Aussenpunkt bis Mitte), --hh = halbe Strichstaerke. */
/* GLATT STATT VERPIXELT (Mel 17.07.): Der Winkel laeuft NICHT als transform-Transition,
   sondern ueber die registrierte Winkel-Variable --leg. Grund: eine transform-Transition
   uebernimmt der Compositor — er rastert den Schenkel EINMAL und dreht danach nur noch
   diese Bitmap (bei 1.6px Strich sichtbar treppig/matschig). Eine Custom-Property-
   Transition kann der Compositor NICHT uebernehmen: --leg wird pro Frame im Main Thread
   interpoliert, der Schenkel dadurch jedes Frame NEU gezeichnet — mit vollem Vektor-
   Antialiasing. @property macht --leg ueberhaupt erst interpolierbar (ohne Registrierung
   springt ein Custom Property hart um).
   EIN Wert steuert beide Schenkel: ::after nimmt den negierten Winkel -> immer exakt
   gegengleich, Spitze bleibt zwangslaeufig symmetrisch.

   GEHRUNG STATT UEBERLAPPUNG (Mel 17.07. II, Befund an Animations-Screenshots): zwei sich
   ueberlappende Rechtecke koennen NIE sauber zulaufen — sie bildeten in der Bewegung einen
   Klumpen in der Mitte, im Ruhezustand eine stumpfe Spitze, und ihre Laenge blieb konstant
   (beim Ziehen eines Pfadpunkts werden die Schenkel aber kuerzer/laenger).
   EINE FORM STATT ZWEIER (Mel 17.07. III — Befund "Luecke in der Mitte"): zwei am Mittelriss
   aneinanderstossende Schenkel kantenglaettet der Browser GETRENNT — dazwischen bleibt eine
   Haarlinie (Naht). Ueberlappen laesst sie verschwinden, erzeugt aber Spitzen-Zipfel (der
   Klumpen von vorher). Loesung: der GANZE Pfeil ist EIN Element mit EINEM clip-path-Polygon
   (6 Punkte) — es gibt keine Naht mehr, weil es keine zwei Teile mehr gibt. Die Gehrung ist
   im Polygon exakt ausgerechnet, die Enden sind stumpf (butt), die Schenkellaenge folgt dem
   Winkel (Verhalten eines gezogenen Pfadpunkts).
   GEOMETRIE (Herleitung, --hh = halbe Strichstaerke, A/B = Aussenpunkte auf 50%-Hoehe,
   T = Spitze auf der Mittelsenkrechten; Kappen stehen senkrecht zum Schenkel):
     A_top = (50% - half + hh*sin, 50% - hh*cos)      B_top = (50% + half - hh*sin, 50% - hh*cos)
     A_bot = (50% - half - hh*sin, 50% + hh*cos)      B_bot = (50% + half + hh*sin, 50% + hh*cos)
     T_top = (50%, 50% - hh*cos + (half - hh*sin)*tan)   (Innenecke)
     T_bot = (50%, 50% + hh*cos + (half + hh*sin)*tan)   (Gehrungsspitze)
   Umlauf: A_top -> T_top -> B_top -> B_bot -> T_bot -> A_bot. Negatives --leg spiegelt alles
   automatisch (sin/tan wechseln das Vorzeichen). */
@property --leg{syntax:'<angle>';initial-value:45deg;inherits:true}
.go-chev,.dd-chev,.ed-chev,.faq summary .pm{position:relative;--half:6.36px;--hh:.8px;--leg:45deg}
.dd-chev{--half:5.3px}
.ed-chev{--half:4.6px}
.go-chev::before,.dd-chev::before,.ed-chev::before,.faq summary .pm::before{
  content:"";position:absolute;inset:0;background:currentColor;
  clip-path:polygon(
    calc(50% - var(--half) + var(--hh) * sin(var(--leg))) calc(50% - var(--hh) * cos(var(--leg))),
    50% calc(50% - var(--hh) * cos(var(--leg)) + (var(--half) - var(--hh) * sin(var(--leg))) * tan(var(--leg))),
    calc(50% + var(--half) - var(--hh) * sin(var(--leg))) calc(50% - var(--hh) * cos(var(--leg))),
    calc(50% + var(--half) + var(--hh) * sin(var(--leg))) calc(50% + var(--hh) * cos(var(--leg))),
    50% calc(50% + var(--hh) * cos(var(--leg)) + (var(--half) + var(--hh) * sin(var(--leg))) * tan(var(--leg))),
    calc(50% - var(--half) - var(--hh) * sin(var(--leg))) calc(50% + var(--hh) * cos(var(--leg)))
  )}
/* Umklappen = EIN Vorzeichenwechsel; die Spitze schwenkt durch die Waagrechte, die
   Aussenpunkte stehen still, die Strichstaerke bleibt konstant. */
.faq details[open] summary .pm,
.dd.open .dd-chev,
.ed-card:has(input:checked) .ed-chev{--leg:-45deg}
/* Quellen-Chevron in den Sample-Papieren (ersetzt das › im Text). Strichstaerke an die
   Who-reads-FAQ-Pfeile angeglichen (Mel 16.07.): nominell 1.9px, weil das Papier per
   fixPaper auf 85% gezoomt ist — gerendert ergibt das die gleichen ~1.6px wie draussen. */
.ph-src::after{content:"";display:inline-block;width:4.5px;height:4.5px;margin-left:4px;
  border-right:1.9px solid currentColor;border-bottom:1.9px solid currentColor;
  transform:rotate(-45deg);vertical-align:.5px}
/* rotate(-90deg) = konstante Grundlage (Spitze nach RECHTS); die Schenkel-Zustaende
   liegen im ::before/::after, hier bewegt nur der Nudge (Mel 17.07.). */
.signup-field .go-chev{position:absolute;inset:0;color:var(--ink);opacity:1;transform:translateX(0) rotate(-90deg);transition:opacity .15s,transform .2s ease-out;pointer-events:none}
.signup-field.valid .go-chev{opacity:0}
/* Schmale Screens (12.07., Mobile-Audit): die fixe 158px-Kapsel liess bei 320px nur 56px
   Textfenster — die getippte Adresse war vor dem Absenden kaum kontrollierbar. Kapsel
   schmaler (Label "Start reading" misst 96px -> 12px Luft je Seite), Fenster waechst auf
   ~96px. Muss NACH den Basisregeln stehen (gleiche Spezifitaet, Reihenfolge entscheidet). */
@media (max-width:559px){
  .signup-field.valid input{padding-right:132px}
  .signup-field.valid button{width:120px}
}
/* Kein Dauer-Bounce mehr (Mel 10.07. abends): nur EINE Haelfte der Bewegung beim
   Hover-Start (Pfeil ruecht 5px raus und BLEIBT dort, solange gehovert wird); beim
   Verlassen laeuft die andere Haelfte zurueck. Reine Transition statt Loop-Keyframe. */
@media (hover:hover){
  .signup-field:not(.valid):hover .go-chev,.signup-field:not(.valid):focus-within .go-chev{transform:translateX(5px) rotate(-90deg)}
}
@media (prefers-reduced-motion:reduce){.signup-field .go-chev{transition:opacity .15s}}
.signup .reassure-row{grid-area:reassure;align-self:start;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px}
.signup .reassure{text-align:left;margin:0;padding-left:4px}
.signup .form-err{margin:0;padding-right:4px;margin-left:auto;text-align:right;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--press)}
/* AUTOFILL-NEUTRALISIERUNG (Mel-Bug 07.07., mobil): iOS/Chrome malen bei AutoFill ein
   gelb-/blauliches ECKIGES Rechteck ueber das Feld-Innere — die graue Pille wechselte
   Form und Farbe. Der inset-Schatten uebermalt WebKits Autofill-Hintergrund mit dem
   Band-Grau, text-fill haelt die Schrift Ink, border-radius haelt die Pillenform; die
   ewige transition verhindert WebKits verzoegertes Nachfaerben. Gilt fuer beide
   Pill-Inputs (E-Mail + Company website). */
.signup-field input:-webkit-autofill,
.signup-field input:-webkit-autofill:hover,
.signup-field input:-webkit-autofill:focus,
.s2-web:-webkit-autofill,
.s2-web:-webkit-autofill:hover,
.s2-web:-webkit-autofill:focus{
  border-radius:999px;
  -webkit-box-shadow:0 0 0 1000px var(--band) inset;
  box-shadow:0 0 0 1000px var(--band) inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  transition:background-color 9999999s ease-out;
}
/* Standard-Pseudoklasse separat (Firefox/neuere Engines); NICHT in die Liste oben mergen —
   Browser ohne :autofill wuerfen sonst die ganze Regel weg. */
.signup-field input:autofill,
.s2-web:autofill{
  border-radius:999px;
  box-shadow:0 0 0 1000px var(--band) inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}
/* Gleiche Autofill-Neutralisierung fuer die Legacy-.field-Inputs (about/styleguide) —
   12.07., Mobile-Audit: iOS-/Chrome-Autofill malte dort sein gelb/blaues Rechteck, im
   dunklen Band (about) leuchtete die Pille farbig. Weiss auf hellen Seiten, Ink im .band.
   Seit Mel-Go 12.07. abends UNGEGATED (gilt auch Desktop — betrifft nur den Autofill-
   Fehlzustand, der Normalzustand bleibt pixel-identisch). */
.field input[type=email]:-webkit-autofill,
.field input[type=email]:-webkit-autofill:hover,
.field input[type=email]:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  transition:background-color 9999999s ease-out;
}
.band .field input[type=email]:-webkit-autofill,
.band .field input[type=email]:-webkit-autofill:hover,
.band .field input[type=email]:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--ink) inset;
  box-shadow:0 0 0 1000px var(--ink) inset;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
}
.field input[type=email]:autofill{
  box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}
.band .field input[type=email]:autofill{
  box-shadow:0 0 0 1000px var(--ink) inset;
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
}
.cover-c .form-done{margin:clamp(32px,5vw,50px) auto 0;max-width:560px;text-align:center}

/* ---------- 3-step signup (slide wizard) ----------
   Step 1: editions + email. Step 2: job/seniority/website (>=1 required). Step 3: confirm email.
   Steps slide horizontally; the viewport height is FIXED at the tallest step (natural flex-row
   height, no JS height animation — Mel 05.07.), shorter steps center vertically. While settled,
   vertical overflow is visible so the custom dropdown lists can hang below the viewport. */
.steps{position:relative;overflow:hidden;overflow:clip} /* hidden = Fallback fuer iOS-Safari 15.x ohne clip-Support (12.07.) */
/* overflow:visible als Erstwert = iOS-15-Fallback (Kritiker-Gate 12.07.): ohne ihn droppt
   dort nur overflow-x:clip, x bliebe hidden (vom .steps-Fallback) und y wuerde zu auto —
   die Dropdown-Listen waeren eingeklemmt. Moderne Browser ueberschreiben mit clip/visible. */
.steps.settled{overflow:visible;overflow-x:clip;overflow-y:visible}
.steps:not(.anim) .step-track{transition:none}
/* width:100% ist PFLICHT: der Ruhelage-Park nutzt negative margin-left (statt transform,
   s. app.js park()) — bei width:auto wuerde die negative Margin die Track-Breite
   aufblasen (660->1320) und alle Steps verdoppeln/verschieben. */
.step-track{display:flex;align-items:center;width:100%;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.step{flex:0 0 100%;min-width:100%;padding:0 clamp(14px,2vw,22px);visibility:hidden;transition:visibility 0s .45s}
.step.on{visibility:visible;transition:visibility 0s}
/* Who-Zeile reserviert ihre Hoehe auch leer — sonst waechst Schritt 2 beim Befuellen
   und die fixe Viewport-Hoehe (hoechster Schritt) veraendert sich nach dem Laden. */
.s2-who:empty::before{content:"\00a0"}
/* head text left-aligned, but the block itself stays centred (aligned with the 560px field row) */
.s-head{text-align:left;max-width:560px;margin:0 auto}
/* --g-2 statt --g-3 (Mobile-Audit 14.07., WCAG 2.2 AA): 10.9px-Label hatte 3.91:1 auf Canvas-Grau
   (braucht 4.5) -> #595959 = 6.03:1, wie .kicker. Optisch kaum dunkler, gilt Desktop+Mobil. */
.s-step{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-2)}
.s-title{font-family:var(--sans);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.15;margin:10px 0 0;letter-spacing:0}
.s-sub{font-size:.98rem;line-height:1.6;color:var(--g-1);margin:9px 0 0;max-width:52ch}
.s-sub strong{color:var(--ink);font-weight:600}
.s3-open{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;height:50px;margin:20px 0 0;padding:0 30px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:400;font-size:.98rem;text-decoration:none;white-space:nowrap}
.s3-open::after{content:attr(data-label);font-weight:700;height:0;overflow:hidden;visibility:hidden;pointer-events:none;white-space:nowrap}
.signup .s3-back{margin-top:14px;text-align:left;padding-left:0}
.s3-back a,.s2-who a{color:var(--ink);font-weight:600}
/* step 2 fields */
.s2-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:22px auto 0}
.s2-web{height:52px;border:0;outline:0;border-radius:999px;background:var(--band);padding:0 24px;font-family:var(--sans);font-size:1rem;color:var(--ink);transition:background .18s ease}
/* :hover getrennt + hover-gegated (Mel-Bug 12.07., mobil — klebender Touch-Hover) */
.s2-web:focus,.s2-web:focus-visible{background:var(--band-dark);outline:0}
@media (hover:hover){.s2-web:hover{background:var(--band-dark)}}
/* Keine Fokus-Outline (Mel 06.07.) — muss die globale input:focus-visible-Regel (hoehere
   Spezifitaet) explizit schlagen; Fokus zeigt der Text-Caret, wie beim E-Mail-Feld;
   seit 10.07. abends zusaetzlich die 10%-dunklere Flaeche (s.o.). */
.s2-web:focus,.s2-web:focus-visible{outline:0}
.s2-web::placeholder{color:var(--g-3)}
.s2-go{height:52px;border:0;border-radius:999px;background:var(--band);color:var(--g-3);font-family:var(--sans);font-weight:400;font-size:.98rem;cursor:pointer;transition:background .3s ease,color .3s ease}
.s2-go:not(.on):focus-visible{font-weight:700}
@media (hover:hover){.s2-go:not(.on):hover{font-weight:700}}
@media (hover:none){.s2-go:not(.on):active{font-weight:700}}
.s2-go.on{background:var(--ink);color:#fff}
/* Schwarze Buttons (Mel 10.07. abends, ersetzt das bisherige Invertieren zu Grau):
   Hover/Fokus/Auswahl -> 20% heller (--ink-hover, erhoeht von 10%), Text bleibt weiss,
   keine Outline mehr. */
.signup-field.valid button:focus-visible span{font-weight:700}
.s2-go.on:focus-visible{font-weight:700}
.s3-open:focus-visible{font-weight:700}
@media (hover:hover){
  .signup-field.valid button:hover span{font-weight:700}
  .s2-go.on:hover{font-weight:700}
  .s3-open:hover{font-weight:700}
}
@media (hover:none){
  .signup-field.valid button:active span{font-weight:700}
  .s2-go.on:active{font-weight:700}
  .s3-open:active{font-weight:700}
}
.s2-meta{max-width:560px;margin:12px auto 0}
.s2-skip{background:none;border:0;padding:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer;white-space:nowrap}
@media (hover:hover){.s2-skip:hover{opacity:.7}}
.s2-skip:disabled{opacity:.4;cursor:default}
@media (max-width:559px){.s2-grid{grid-template-columns:1fr}}
/* Wizard-Hoehe mobil = AKTIVER Step statt hoechster Step (Mel-Go 12.07., hebt den
   05.07.-Entscheid "keine JS-Hoehe" NUR fuer <560px auf): der einspaltige Step 2 machte
   den Viewport ~424px hoch, Step 1 (179px) schwamm mit ~122px Leerband oben+unten im
   Conversion-Hero. app.js setzt mobil viewport.height auf den aktiven Step (syncStepsHeight);
   hier das Layout dazu: oben ausrichten statt zentrieren, Hoehe animiert im Slide-Timing.
   .signup{margin-top:96px} reserviert den Platz der pick-note-Zeichnung (78px + Luft),
   die vorher im Zentrier-Leerraum lebte. Desktop (>=560px) komplett unveraendert. */
@media (max-width:559px){
  .step-track{align-items:flex-start}
  .steps{transition:height .45s cubic-bezier(.4,0,.2,1)}
  .signup{margin-top:96px}
  /* Abstand Formularbereich -> Sektion "The Standard" = GENAU der Abstand Lead-Text ->
     Toggles darueber (die 96px von .signup, s. Zeile davor) — Mel 17.07.: beide Luecken
     im Cover gleich gross. Gemessen wurde die EINGERASTETE Lage (nach syncStepsHeight):
     vorher 46px = section-padding-top 48 minus 2px Label-Versatz -> 98 ergibt die 96. */
  #sample{padding-top:98px}
}
/* custom dropdown (pill) */
.dd{position:relative}
/* KEINE Transition auf dem Button: das Menue erscheint sofort — animierte Ecken/Border
   erzeugten sonst 280ms lang einen sichtbaren Unterbruch an der Verbindung (Mel 06.07.). */
.dd-btn{width:100%;height:52px;border:1px solid transparent;border-radius:26px;background:var(--band);padding:0 20px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--sans);font-size:1rem;color:var(--g-3);cursor:pointer;text-align:left;transition:background .18s ease}
.dd.set .dd-btn{color:var(--ink)}
/* Graues Feld: 5% dunkler bei Hover/Fokus/offenem Zustand, keine Outline (Mel 10.07. abends).
   :hover hover-gegated (Mel-Bug 12.07., mobil — klebender Touch-Hover nach dem Schliessen). */
.dd-btn:focus-visible{background:var(--band-dark);outline:none}
@media (hover:hover){.dd-btn:hover{background:var(--band-dark);outline:none}}
/* Offenes Dropdown: Button bleibt VOLL grau (wie geschlossen); der Fade beginnt erst UNTER
   seiner Unterkante — als Verlauf im Listenkopf (s. .dd-list). Grau trifft Grau an der
   Junction => keine Trennlinie. Verbunden: durchgehende Outline, Junction eckig. */
/* Outline testweise entfernt (Mel 06.07.): Border bleibt 1px transparent (keine Layout-Shifts). */
.dd.open .dd-btn{position:relative;z-index:31;background:var(--band);border-color:transparent;border-radius:26px 26px 0 0}
/* Richtungswechsel als Spiegel-Flip "in sich" statt Rotation (Mel 16.07., Site-weite
   Pfeilregel — Begruendung bei .faq summary .pm). */
/* Richtung/Umklappen in den Schenkeln (17.07.) — der Span selbst dreht/spiegelt nicht mehr. */
.dd-chev{width:12px;height:14px;flex:none;color:var(--ink);transform-origin:center;transition:--leg .3s ease;-webkit-user-select:none;user-select:none}
/* Liste = Top-Bar-Effekt (translucent + backdrop-blur), direkt am Button (top:100%-1px ->
   1px Ueberlappung, Button liegt drueber = nahtlose Verbindung), oben eckig, unten gerundet. */
/* Listenkopf startet deckend im Button-Grau und faded ueber ~56px in den Frosted-Effekt
   (Verlauf liegt ueber der Frosted-Basis; er haftet am Listenrahmen, scrollt nicht mit). */
/* overscroll-behavior:contain (12.07., Mobile-Audit): Flick am Listenende scrollte die
   Seite unter dem offenen Dropdown weg — Kettenscroll unterbinden (reines Scroll-Verhalten,
   keine Pixel-Aenderung). */
/* Frosted-Basis .75 -> .85 (Mel 13.07.: "10% weniger Transparenz") */
.dd-list{position:absolute;left:0;right:0;top:calc(100% - 1px);z-index:30;background-color:rgba(255,255,255,.85);background-image:linear-gradient(to bottom,#fff 0,rgba(255,255,255,0) 56px);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);border:1px solid transparent;border-top:0;border-radius:0 0 26px 26px;padding:6px;margin:0;list-style:none;max-height:264px;overflow:auto;overscroll-behavior:contain;box-shadow:0 20px 34px -22px rgba(20,20,20,.18)}
/* Schritt-Navigation im Anmelde-Wizard (Mel 17.07., Flow-Umbau; LINIEN statt Woerter
   Mel 17.07. nachmittags): drei klickbare Haarlinien im Stil der bestehenden Linien.
   Abgeschlossene Schritte fuellen sich schwarz von links nach rechts (scaleX, origin
   left); Zuruecknavigieren entleert sie wieder. Beschriftung nur fuer Screenreader
   (aria-label im Markup). Nur in Schritt 2/3 im Markup; dort besteht das Abo bereits. */
/* Ziffer VOR jedem Balken (Mel 17.07.): ohne sie war nicht lesbar, WAS die Balken zaehlen.
   Mono/klein wie die uebrigen Kleinlabels; Farbe folgt dem Balken-Zustand (erledigt = Ink,
   sonst grau). aria-hidden — die Schritt-Info traegt das aria-label des Buttons. */
/* Schritt-Linien OHNE Nummern (Mel 29.07. nachts + frueh): EINE feste Leiste ueber dem
   Slider (rutscht nie mit) — erscheint beim Wechsel auf Schritt 2 und bleibt stehen.
   Nicht erreichte Linien sind DUENN UND KURZ; erreichte wachsen organisch in Dicke UND
   Laenge (width+height animiert) und bleiben so. */
.s-nav{display:flex;gap:18px;margin:0 0 2px}
.s-nav .sn{display:flex;align-items:center;border:0;background:none;padding:11px 0;cursor:pointer}
.s-nav .sn-bar{display:block;width:18px;height:2px;border-radius:3px;background:var(--line);
  transition:width .5s cubic-bezier(.3,0,.2,1),height .5s cubic-bezier(.3,0,.2,1),background .5s ease}
.s-nav .sn.done .sn-bar,.s-nav .sn[aria-current=step] .sn-bar{width:34px;height:5px;background:var(--ink)}
@media (hover:hover){.s-nav .sn:not(.done):not([aria-current=step]):hover .sn-bar{background:#bdbdbd}}
/* Gleiche Spalten-Geometrie wie .step > .s-head (Mel 31.07.: Balken waren auf Mobile
   nicht mit dem Text darunter aligned): .step polstert seitlich clamp(14px,2vw,22px),
   die Leiste stand ohne dieses Polster buendig am Rand. border-box -> max-width um
   das Polster erweitern, damit die Innenspalte exakt 560px bleibt (desktop-neutral). */
.s-navfix{padding:0 clamp(14px,2vw,22px);max-width:calc(560px + 2*clamp(14px,2vw,22px));
  opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.s-navfix.shown{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion: reduce){.s-nav .sn-bar,.s-navfix{transition:none}}
/* Praeferenz-Bausteine im Anmelde-Schritt 2 (geteilt mit preferences.html, Mel 29.07.) */
.sp-wrap{max-width:380px;margin:22px auto 0;text-align:left}
.sp-wrap .signup-lbl{padding-left:4px;margin-top:10px}
.sp-wrap .p-wheelwrap{margin-top:22px}
.sp-go{display:block;width:100%;margin-top:26px;height:52px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--sans);font-weight:600;font-size:.98rem;cursor:pointer;transition:opacity .18s ease}
@media (hover:hover){.sp-go:hover{opacity:.88}}
.sp-go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.p-days{display:flex;gap:10px;max-width:380px}
.p-day{flex:1 1 0;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;outline:none;cursor:pointer;font-family:var(--sans);font-size:.95rem;line-height:1.2;padding:0 10px;border-radius:999px;background-color:#fff;color:var(--ink);text-align:center;transition:background .18s ease}
.p-day:hover:not(.on){background-color:var(--band-dark)}
.p-day.on{background:var(--ink);color:#fff;font-weight:600}
.p-day:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.p-day small{display:block;margin-top:2px;font-weight:400;opacity:.72;font-size:.82em}
.p-wheelwrap{position:relative;display:inline-flex;align-items:center;gap:10px}
.p-wheel{height:52px;width:88px;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none;background:#fff;border-radius:999px}
.p-wheel::-webkit-scrollbar{display:none}
.p-wheel:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.p-wopt{height:52px;line-height:52px;text-align:center;scroll-snap-align:start;font-family:var(--sans);font-size:1.18rem;font-weight:500;color:var(--ink);cursor:pointer}
.p-wcol,.p-wmin{font-family:var(--sans);font-size:1.18rem;font-weight:500;color:var(--ink)}
.p-wmin{width:44px;text-align:center;color:var(--g-3)}
.dd-list li{padding:10px 17px;border-radius:999px;font-family:var(--sans);font-size:.95rem;color:var(--ink);cursor:pointer;text-align:left}
/* Audit 17.07. (WCAG 1.4.11): var(--band) allein war als Tastatur-Hervorhebung 1.14:1 —
   praktisch unsichtbar; der Innen-Rahmen macht die aktive Option eindeutig. */
/* Aktive Option: nur grauer Tint, KEINE Outline (Mel 17.07.) — .focus setzt app.js auch bei
   mousemove und beim Oeffnen, die Linie war darum staendig sichtbar. Die Outline haengt jetzt
   an .kb, das nur echte Tastatur-Navigation setzt (Fokus-Indikator bleibt, WCAG 2.2 AA). */
.dd-list li.focus{background:var(--band)}
.dd-list li.focus.kb{outline:2px solid var(--ink);outline-offset:-2px}
@media (hover:hover){.dd-list li:hover{background:var(--band)}}
.dd-list li[aria-selected=true]{font-weight:600}

/* ---------- Reveal motion ---------- */
.rv,.seclabel{opacity:0;transform:translateY(16px);filter:blur(10px);transition:opacity .7s ease,transform .7s ease,filter .7s ease}
/* Endzustand filter:none (nicht blur(0)): ein stehender Filter macht den Vorfahren zum
   Backdrop-Root und wuergt den backdrop-filter der Dropdowns ab (Mel 06.07.). */
.rv.in,.seclabel.in{opacity:1;transform:none;filter:none}

/* ---------- FAQ-Accordion + Label-Schatten (13.07.: aus dem index.html-Inline-Block
   UNVERAENDERT hierher verschoben, damit auch advertise.html sie nutzt — Mel:
   "Who reads" wie die Questions-Sektion, Sektions-Trenner wie auf der Home-Seite).
   Einzige Anpassung: die id-gebundene margin-bottom-Regel (#sample/#editions/#faq)
   ist generisch (.seclabel.shad) — gleiche Wirkung auf der Home-Seite. ---------- */
.faq details+details{border-top:1px solid var(--line)}
/* Abschlusslinie unter dem LETZTEN Accordion-Punkt (Mel 17.07. nachts): gleiche Linie wie die
   Zwischenlinien — gilt fuer beide Accordions (Home "Questions" + Advertise "Who reads"). */
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
/* Richtung/Umklappen liegen seit 17.07. in den SCHENKELN (::before/::after, s. oben) —
   der Span traegt keine rotate/scaleX-Zustaende mehr, nur den Hover-Nudge. Spitze zeigt
   nativ nach unten (zu) bzw. nach oben (auf). */
.faq summary .pm{width:14px;height:16px;flex:none;color:var(--ink);transform:none;transform-origin:center;transition:transform .2s ease-out,--leg .3s ease;-webkit-user-select:none;user-select:none}
/* Pfeil-Nudge beim Hover — analog zum E-Mail-Feld-Pfeil (.go-chev, Mel 12.07.): auf der ganzen
   klickbaren Zeile (summary) schiebt sich der Pfeil 5px in Zeigerichtung und HAELT dort —
   jetzt direkt translateY (geschlossen nach unten, offen nach oben), da der Span nicht mehr
   vorgedreht ist. Nur wo Hover echt ist; der Klick-Flip laeuft in den Schenkeln (.3s ease). */
@media (hover:hover){
  .faq details:not(.no-nudge) summary:hover .pm{transform:translateY(5px)}
  .faq details[open]:not(.no-nudge) summary:hover .pm{transform:translateY(-5px)}
}
@media (prefers-reduced-motion:reduce){
  .faq summary .pm,.faq summary .pm::before{transition:none}
}
.faq .ans{overflow:hidden;transition:height .28s ease}
.faq details:not([open]) .ans{height:0}
.faq .ans-in{padding:0 0 24px;color:var(--g-1);max-width:60ch;font-size:1rem;line-height:1.65}
/* Whole rubric clickable. First/last item's clickable box hugs the text (no line to bound it):
   move the first item's top gap and the last item's bottom gap out of the details box. */
.faq details{cursor:pointer}
.faq{padding-top:22px;transition:padding-bottom .28s ease}
.faq details:first-of-type summary{padding-top:0}
/* padding-bottom:0 am letzten Item ENTFERNT (Mel 17.07. nachts II): seit der Abschlusslinie
   (details:last-of-type border-bottom) klebte die Antwort im offenen Zustand am Strich —
   jetzt hat sie dieselben 24px wie vor den Zwischenlinien, Abstand ueberall gleich. */
/* :not(.closing) (Mel 12.07. abends): beim Zuklappen der LETZTEN Frage blieb [open]
   bis zum Ende der Hoehen-Animation stehen — das 24px-Padding fiel erst DANACH und
   erzeugte eine sichtbare zweite Bewegung (hakelig, v.a. mobil). closeItem() setzt
   .closing beim Start -> Padding animiert parallel zur Hoehe, eine Bewegung. */
.faq:has(details:last-of-type[open]:not(.closing)){padding-bottom:24px}
/* Section-Label: duenne Linie durch weichen Schatten-Trenner ersetzt (180 gedreht -> nach
   unten). SYMMETRISCH: laeuft links UND rechts gleich weit von der Mitte aus weich aus
   (Mel 07.07. abends). ::before verbreitert, damit der Ecken-Falloff ausserhalb des
   Bandes liegt. */
.seclabel.shad::after{display:none}
.seclabel.shad{margin-bottom:0}
.lbl-shadow{margin:0 calc(-0.5 * var(--gut));
  -webkit-mask:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);
  mask:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.lbl-shadow::before{left:-60px;right:-60px}

/* ---------- Advertise: interaktives Placement-Demo (Mel 13.07.) ----------
   Der Beispiel-Newsletter traegt die drei buchbaren Sponsor-Slots. Ein ruhiger
   Auto-Zyklus (app.js) hebt die Slots abwechselnd hervor — Grau-Wash + gepunkteter
   Rahmen (gleiche Punkt-Spezifikation wie die Abriss-Linie der Home-Seite: 1px Ink,
   4px Abstand). Hover/Tap/Fokus waehlt; die Erklaer-Karte gleitet am Desktop auf
   Slot-Hoehe (gepunktete Verbindungslinie ueber die Spalten-Fuge), mobil haengt sie
   als Sticky-Karte am unteren Bildschirmrand. */
/* Abstand "Why it works" -> "What a placement looks like" (Mel 14.07., 2. Justierung):
   wieder etwas groesser als die enge Fassung, aber nicht ganz so viel wie urspruenglich
   (Default war ~90px Section-Padding). Negativer margin-top raus, nur oberes Padding
   gemaessigt gekuerzt. */
/* padding-bottom -30px (Mel 16.07.): Abstand Sample -> Site-Footer verkleinert. */
/* padding-top-Override entfernt (17.07. spaet): steckt jetzt im Basis-section-Muster. */
#placement{padding-bottom:calc(clamp(48px,7vw,92px) - 30px)}
.demo-wrap{position:relative}
@media (min-width:760px){
  .demo-wrap{display:grid;grid-template-columns:minmax(0,520px) 1fr;column-gap:clamp(36px,5vw,72px);align-items:start}
}
/* overflow:visible statt Basis-hidden: die Pop-out-Schatten der Slots duerfen ueber die
   Papierkante hinausragen (kein Abriss-Cut auf dieser Seite, sonst ragt nichts raus). */
.adv-issue{max-height:none;border-radius:12px;overflow:visible;position:relative;
  /* Karte in Canvas-Grau (Mel 14.07.), Kante definiert sie. Kein Mail-Footer mehr (14.07.):
     die Karte endet ~20px unter dem letzten Auslassungspunkt und loest sich unten in den
     Hintergrund auf -> durchgehender border ersetzt durch eine ausblendende Outline (::after,
     Maske). padding-bottom bringt die Unterkante auf 20px unter den letzten Punkt. */
  box-shadow:none;border:0;background:var(--page);padding-bottom:12px;
  /* Tilt entfernt (app.js, Mel 14.07.); Transition schadet ohne Tilt nicht. */
  transition:transform .5s cubic-bezier(.3,0,.2,1)}
/* Ausblendende Outline: durchgezogen 1px --line bis zur Linie ueber den Punkten (~71px ueber
   der Unterkante), dann Fade zu transparent (= Hintergrund) an der Unterkante (= 20px unter dem
   letzten Punkt). Distanz Punkte->Unterkante ist fix, daher calc(100% - 71px) breitenstabil. */
.adv-issue::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--line);pointer-events:none;
  -webkit-mask:linear-gradient(to bottom,#000 0,#000 calc(100% - 71px),transparent 100%);
          mask:linear-gradient(to bottom,#000 0,#000 calc(100% - 71px),transparent 100%)}
/* Tilt-Ruecklauf-Transition entfernt (Mel 14.07., Tilt weg) — die Hover-Lift-Transition
   (transform + box-shadow) sitzt jetzt auf #sample .issue (oben). Diese .issue.paper-Regel
   hatte hoehere Spezifitaet und haette den box-shadow aus der Transition gekippt. */
/* Slot = beim Highlight ein EIGENES schwebendes Feld (Mel 13.07.): hebt sich mit runden
   Ecken + Schatten ueber den Newsletter, innen umlaufend die gepunktete Linie (Home-
   Abrisskanten-Spez: 1px Ink, 4px Pitch). 10px Seitenrand gibt Schatten/Scale Luft;
   das Innenleben fluchtet mit dem Papier-Gutter (10px Rand + 12px Padding = 22px). */
/* Slot abgewaehlt = Canvas-Grau wie die Karte (verschmilzt); angewaehlt (.lit) = weiss und
   hebt sich damit ab (Mel 14.07., Umkehr der frueheren Weiss-Ruhelage). */
/* Lift ueber translate/scale (eigene .5s-Transition); Hover-Tilt entfernt (Mel 14.07.,
   die 3D-Neige machte den Text unscharf) — nur noch Lift/Weiss/Schatten. */
.ad-slot{display:block;text-align:left;font:inherit;color:inherit;background:var(--page);border:0;position:relative;margin:0 10px;padding:14px 12px;border-radius:10px;cursor:pointer;
  transition:translate .5s cubic-bezier(.3,0,.2,1),scale .5s cubic-bezier(.3,0,.2,1),box-shadow .5s ease,background .5s ease}
/* Punktrahmen als SVG-Rect (Mel 12.07. abends, ersetzt die dotted-Border): stroke-dasharray
   1/3 = exakt die Luftigkeit der Verbindungslinie nach rechts, UND die Punkte folgen der
   Eckenrundung sauber (app.js injiziert das Rect je Slot). */
/* Punktrahmen um den aktiven Slot entfernt (Mel 14.07.) — nur noch die Flaeche (weiss) +
   Schatten heben ihn ab. SVG bleibt im DOM (JS unveraendert), nur ausgeblendet. */
.ad-slot .slot-dots{display:none}
.ad-slot.lit .slot-dots{opacity:1}
.ad-slot .slot-dots rect{width:calc(100% - 1px);height:calc(100% - 1px);fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:1 3}
/* Ambient-Anteil (0 0 22px) wie beim .paper selbst (Mel 12.07.): hebt den Slot auch an der
   OBERKANTE vom Hintergrund ab, nicht nur nach unten. */
/* Lift + Schatten reduziert (Mel 14.07.): der aktive Slot hebt sich weniger weit an
   (-3px statt -5px) und traegt einen kompakteren Schatten (war 0 22px 44px). */
/* Schatten verstaerkt (Mel 16.07. nachts II, synchron mit #sample-Hover) */
.ad-slot.lit{translate:0 -2px;scale:1.008;z-index:3;background:#fff;
  box-shadow:0 14px 30px -16px rgba(20,20,20,.32),0 5px 12px -6px rgba(20,20,20,.16),0 0 18px -7px rgba(20,20,20,.12)}
.ad-slot:focus-visible{outline:2px solid var(--press);outline-offset:-4px}
/* Klick-Teaser (Mel 13.07.): ab und zu hebt sich EIN Slot kurz halb an — die Hover-/Lit-
   Animation angeteasert (halber Lift, zarter Schatten, Punktrahmen schwach sichtbar) und
   ueber die bestehende .5s-Kurve wieder zurueck. Staffelung/Anlass steuert app.js; nie
   fuer den aktiven Slot, nie waehrend Hover, nicht bei reduced-motion (JS-seitig gegated). */
.ad-slot.tease:not(.lit){translate:0 -1px;scale:1.004;
  box-shadow:0 8px 18px -14px rgba(20,20,20,.2),0 0 10px -6px rgba(20,20,20,.1)}
.ad-slot.tease:not(.lit) .slot-dots{opacity:.5}
/* Varianten: Lead (Primary), Feature ohne Bild (Secondary), Shortlist-Zeile */
.ad-slot.slot-lead{padding:20px 12px 16px}
.ad-slot.slot-art{padding:16px 12px 14px}
/* Shortlist-Slot buendig wie eine echte .ph-item-Zeile (Mel 12.07. abends): der Slot sitzt
   IM 22px-Padding der .ph-list — die negativen Seitenraender heben das eigene Padding auf,
   Nummer + Flaeche fluchten exakt mit dem echten Newsletter-Raster (statt doppelt eingerueckt).
   Trennlinie als ::before in echter Zeilenbreite statt border ueber die volle Slot-Breite. */
.ad-slot.slot-item{display:flex;gap:12px;padding:12px;margin:0 -12px;border-radius:10px}
/* .slot-front/.slot-back (Flip 16.07. / Swipe 17.07. frueh) ENTFERNT (17.07. mittags):
   der Beschrieb lebt mobil in der Dock-Karte (.demo-float, Regeln im Mobile-Block unten) —
   die Slots tragen wieder direkt ihren Inhalt, kein Klon-DOM mehr. */
.ad-slot.slot-item::before{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:var(--line);transition:opacity .5s ease}
.ad-slot.slot-item.lit::before{opacity:0}
.ad-slot.slot-item .ph-eyebrow{margin-bottom:4px}
.ad-slot .ph-body{margin-top:12px}
/* Auslassungs-Punkte unter dem Shortlist-Slot (Mel 12.07.): "hier haette der Newsletter
   weiteren Inhalt". --band-dark = das Hover-Grau der hellgrauen Buttons (Mel 12.07. abends). */
.ph-more{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 0 8px}
.ph-more span{width:5px;height:5px;border-radius:50%;background:#c2c2c2}
/* Punkte folgen dem Outline-Fade auf ihrer jeweiligen Hoehe (Mel 14.07.): oben = volle
   Outline-Farbe (--line #d8d8d8), Mitte + unten so hell wie die ausblendende Outline dort
   (interpoliert #d8d8d8 -> #eeeeec ueber den Fade-Bereich; ~49% bzw. ~68%). */
.adv-issue .ph-more span:nth-child(1){background:var(--line)}
.adv-issue .ph-more span:nth-child(2){background:rgb(227,227,226)}
.adv-issue .ph-more span:nth-child(3){background:rgb(231,231,230)}
/* Home-Sample-Punkte (Mel 16.07.): unter Hero + unter Shortlist-1. ALLE drei im Grau des
   OBERSTEN Advertise-Punkts (var(--line), kein Verlauf — dort laeuft nichts aus); Abstand
   oben UND unten je 20px = der Advertise-Abstand VOR den Punkten (dort 20px 0 8px). */
#sample .ph-more{padding:20px 0}
#sample .ph-more span{background:var(--line)}
/* Buchen-Button in der Erklaer-Karte (kompaktere Pille) */
.demo-card .demo-book{margin-top:16px;padding:9px 26px;font-size:.85rem}
.demo-panel{position:relative}
.demo-float{display:grid;position:relative}
.demo-card{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
.demo-card.on{opacity:1;visibility:visible;transition:opacity .4s ease .12s,visibility 0s}
.demo-card .nm{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.1}
.demo-card .meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--g-2);text-transform:uppercase;margin-top:8px}
.demo-card .desc{color:var(--g-1);font-size:.98rem;line-height:1.6;margin-top:12px;max-width:44ch}
.demo-card .ph{font-family:var(--mono);font-size:.7rem;color:var(--press);letter-spacing:.06em;margin-top:12px}
@media (min-width:760px){
  /* .6s + sanftere Kurve (Design-Gate 13.07.): ruhigeres Gleiten passend zur Marke */
  .demo-float{position:absolute;left:0;right:0;top:0;transition:top .6s cubic-bezier(.3,0,.2,1)}
  /* Verbindungslinie NEU (Mel 14.07.): durchgezogene 1px-Linie in --line (dieselbe wie die
     Outline des Beispielnewsletters), vertikal auf Titelmitte. Auf .nm verankert -> trifft
     immer die Titelmitte und blendet mit der Karte ein/aus. Rechtes Ende 10px vor
     Titelbeginn (right:100%+10px); Breite = Fuge - 10px -> linkes Ende exakt buendig an der
     rechten Outline-Kante des Newsletters. --line-y (place()) wird dafuer nicht mehr genutzt. */
  .demo-card .nm{position:relative}
  /* Als BORDER statt background+transform (Mel 14.07.): der halbe-Pixel-translateY(-50%)
     verwischte die 1px-Linie ueber zwei Reihen (unscharf). Ein border-top wird — genau wie
     die Newsletter-Outline — vom Browser aufs Geraetepixel gesnappt und ist damit gleich
     scharf; es ist buchstaeblich dieselbe Art Linie. height:0 -> die Kante sitzt exakt auf
     top:50% (Titelmitte), kein Transform noetig. */
  /* --conn-w (app.js place()): GEMESSENE Laenge bis exakt an die Papier-Outline (Mel 16.07.,
     seit dem 85%-Papier-Zoom; die alte clamp-Formel war nie viewport-stabil buendig).
     Fallback = alte Formel fuer den No-JS-Fall. */
  .demo-card .nm::before{content:"";position:absolute;top:50%;
    right:calc(100% + 10px);width:var(--conn-w,calc(clamp(36px,5vw,72px) - 10px));height:0;border-top:1px solid var(--line)}
}
@media (max-width:759px){
  .demo-panel{position:static}
  /* Fokus-Sichtbarkeit: Puffer = Dock-Karten-Hoehe (~210px) + Luft, damit ein per Tastatur
     fokussierter Slot beim Hineinscrollen OBERHALB der fixierten Dock-Karte landet. */
  .ad-slot{scroll-margin-bottom:250px}
  /* No-JS-Fallback (noscript in advertise.html zeigt die Karten statisch): die Dock-Regeln
     unten gelten nur im .dock-mode (setzt app.js) — ohne JS bleibt alles statisch/unveraendert. */
  .demo-card .nm{font-size:1.2rem}
  .demo-card .meta{margin-top:4px}
  .demo-card .desc{font-size:.88rem;margin-top:6px}
  .demo-card .ph{margin-top:6px}
  /* DOCK-SHEET (Mel 17.07. abends, revidiert): der Beschrieb des aktiven Slots kommt als
     BOTTOM-SHEET von GANZ unten — volle Breite, nur oben gerundet, KEINE Outline; die
     Abtrennung von Hintergrund/Highlight traegt allein ein weicher Schatten nach oben.
     Hoehe = die aktive Karte (nur sie ist im Fluss, display-Toggle statt Crossfade —
     der Inhalt wechselt ohnehin nur, waehrend das Sheet unten verschwunden ist).
     Sichtbar NUR in der zweiten Stufe der Scroll-Staffelung (.dock-on, app.js stagedMap:
     Highlight zuerst, Karte ein Stueck spaeter — reine Funktion der Scrollposition,
     beide Richtungen). SOLIDE weisse Flaeche (Mel 17.07. nachts VIII): frueher Milchglas .92 +
     backdrop-blur -> wirkte leicht durchscheinend. Jetzt opakes #fff ohne Blur, damit die Karte
     exakt so solide/undurchsichtig ist wie die (nicht steuerbare) Systemflaeche unten und
     nahtlos aus dem weissen Bildschirmrand zu steigen scheint. */
  .dock-mode .demo-panel{height:0}
  .dock-mode .demo-float{position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;
    border:0;border-radius:16px 16px 0 0;
    padding:26px 20px calc(16px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -18px 44px -14px rgba(20,20,20,.30),0 -5px 16px -8px rgba(20,20,20,.16);
    translate:0 102%;visibility:hidden;touch-action:none;
    transition:translate .5s cubic-bezier(.3,0,.2,1),visibility 0s .5s;pointer-events:none}
  /* Wisch-Griff (Mel 17.07. nachts III): signalisiert "nach unten wegwischen schliesst". */
  .dock-mode .demo-float::before{content:"";position:absolute;top:9px;left:50%;translate:-50% 0;width:40px;height:4px;border-radius:2px;background:rgba(20,20,20,.2);pointer-events:none;z-index:1}
  .dock-mode.dock-on .demo-float{translate:0 0;visibility:visible;
    transition:translate .5s cubic-bezier(.3,0,.2,1),visibility 0s;pointer-events:auto}
  /* Weisser UNTERBAU (Mel 17.07. nachts): verlaengert das Sheet ueber die Unterkante hinaus —
     iOS' Leisten-/Safe-Area-Zone zeigt teils die SEITEN-PIXEL unter der Leiste (Blur-Sampling)
     statt der Canvas-Farbe; der Unterbau stellt sicher, dass dort immer WEISS liegt, in jeder
     Leisten-/Overscroll-Phase. Faehrt mit dem Sheet (haengt an ::after des fixed-Elements). */
  .dock-mode .demo-float::after{content:"";position:absolute;top:100%;left:0;right:0;height:160px;background:#fff}
  /* WEISSE UNTER-PLATTE, richtig verankert (Mel 17.07. nachts VI): der obige ::after-Unterbau
     ist WIRKUNGSLOS — WebKit CLIPPT das Pseudo eines backdrop-filter+border-radius-Elements auf
     dessen runde Border-Box, der 160px-Ueberhang unter top:100% wird nie gemalt. Das graue Band
     war zudem NICHT html (band-dark), sondern der BODY (--page #eeeeec): body liegt VOR html im
     Canvas-Stack, darum erreichte html.sheet-open{#fff} den Streifen nie. iOS setzt die fixed-
     bottom:0-Unterkante des Docks ~10-14px UEBER die Safari-Leiste -> dort blutet body durch,
     ebenso in der Home-Indicator-Zone unter der Leiste. Fix: Platte auf dem UNTRANSFORMIERTEN
     Root (html::after, kein Filter/Radius/Overflow -> nicht clipbar), gleicher fixed-bottom:0-
     Anker wie das Dock (bleibt in JEDER Leisten-Phase buendig mit dessen Unterkante), 400px NUR
     nach unten (deckt Streifen + Leiste + Home-Indicator + Overscroll, nie den Artikel darueber).
     z-index:59 < Dock 60 -> Milchglas des Docks bleibt oben. Opacity-STUFE (0s) an sheet-open
     gekoppelt, Schliess-Delay .5s = Dock-Slide -> kein Grau-Blitz. env() bringt nichts (ohne
     viewport-fit=cover ist safe-area-inset stets 0). html.sheet-open setzt updateDock nur mobil
     + Dock offen -> Desktop/andere Seiten unberuehrt. */
  html::after{content:"";position:fixed;left:0;right:0;bottom:-400px;height:400px;background:#fff;
    z-index:59;pointer-events:none;opacity:0;transition:opacity 0s linear .5s}
  html.sheet-open::after{opacity:1;transition:opacity 0s}
  /* Sheet-Hoehe folgt der AKTIVEN Karte: nur sie liegt im Fluss (die Basis-Opacity/
     Visibility-Transitionen der demo-cards greifen hier nicht). */
  .dock-mode .demo-float .demo-card{display:none}
  .dock-mode .demo-float .demo-card.on{display:block;opacity:1;visibility:visible;transition:none}
  @media (prefers-reduced-motion:reduce){
    .dock-mode .demo-float{translate:0 0;opacity:0;transition:opacity .15s ease,visibility 0s .15s}
    .dock-mode.dock-on .demo-float{opacity:1;transition:opacity .15s ease,visibility 0s}
  }
}

/* ---------- Responsive ---------- */
@media (min-width:760px){
  .editions{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,80px)}
  .ed{border-top:0}
  .ed.first{padding-right:clamp(40px,6vw,80px)}
  .ed.first::after{content:"";position:absolute;top:clamp(16px,2vw,24px);bottom:clamp(16px,2vw,24px);right:0;width:1px;background:var(--line)}
  .sample-wrap{grid-template-columns:1.05fr .95fr}
  /* Linke Spalte ist seit der Verdichtung (Mel 16.07.) deutlich kuerzer als das Sample:
     sticky haelt Text + Bits beim Scrollen neben dem hohen Papier im Bild. */
  .std-lead{position:sticky;top:110px}
  /* Buendiger Abschluss (Mel 17.07.): beim Scrollen klebt .std-lead am Boden von .sample-wrap;
     dessen Boden = Sample-Unterkante + padding-bottom von .issue-hold. Damit die GRUNDLINIE der
     letzten Bit-Zeile dann exakt auf der Sample-Unterkante sitzt, muss padding-bottom = der
     Box-zu-Baseline-Abstand dieser Zeile sein (gemessen 7.28px) — vorher 20px, darum endete das
     Sample ~13px zu hoch. Nur Desktop (2-Spalten/sticky); Mobile behaelt die 20px als Abstand. */
  .issue-hold{margin-right:14px;padding-bottom:7px}
  .vp{grid-template-columns:repeat(3,1fr);column-gap:clamp(28px,4vw,56px)}
  .vp .cell{border-top:0;padding:0}
  .vp .ruled{border-top:1px solid var(--line);padding-top:40px}
  .how{grid-template-columns:repeat(3,1fr);column-gap:clamp(28px,4vw,56px)}
  .how .step{border-top:0;flex-direction:column;gap:14px;padding:0}
  .how .ruled{border-top:1px solid var(--line);padding-top:40px}
  .band-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
  .fmt-grid{grid-template-columns:1fr}
}
@media (max-width:759px){
  /* Header einzeilig (Mel-Bug 12.07., mobil): die Wortmarke brach bei <=~400px auf zwei
     Zeilen um ("The Missed / Bit"), weil Marke (1.45rem, ~149px) + CTA (bis "Become a
     sponsor", ~143px) + Burger nicht in eine Zeile passten. Marke bleibt in voller
     Groesse und wird nie umbrochen; CTA + Gaps kompakter — nachgemessen fuer die laengste
     CTA-Beschriftung bis 360px hinunter (darunter zusaetzlich kleinere Marke, s.u.). */
  .nav-mark{white-space:nowrap}
  .nav-in{gap:10px}
  .nav-right{gap:8px} /* 8px Fehltipp-Abstand CTA<->Burger (Design-Gate 12.07.); passt bis 360px */
  .nav-cta{font-size:.75rem;padding:8px 12px}
  /* Milchglas-Standard .85 auch fuers Burger-Menue (Mobile-Audit 14.07.): war opak #fff und
     stach als einzige nicht-frosted Flaeche heraus (.nav/.dd-list/.demo-float sind .85). */
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.85);-webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gut) 18px}
  .nav-links.open{display:flex}
  .nav-links a{align-items:flex-start;padding:11px 0;width:100%;font-size:.95rem;border-bottom:1px solid var(--line-faint)}
  .nav-links a::after{display:none}
  /* Tap-Flaeche 42x44.8px statt 38x28.8 (12.07., Mobile-Audit): Padding hoch, symmetrische
     negative Margins halten Layout-Box + Linienposition; gemalt ragt der Button je 10px
     ueber seine Layout-Box — rechts durch den Seiten-Gutter (20px) gedeckt. */
  .nav-toggle{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:16px 10px;margin:-8px -10px}
  .nav-toggle span{width:22px;height:1.6px;background:var(--ink);display:block}
  .arc-row{grid-template-columns:auto 1fr;gap:8px 12px}
  .arc-row .read{grid-column:2;justify-self:start}
  /* Frueherer Mobile-Reflow des Papiers (ph-body columns, ph-two einspaltig) ENTFERNT
     (Mel 13.07.): das Sample layoutet immer fix bei 520px Designbreite und wird nur
     noch proportional gezoomt (app.js fixPaper) — wie die echte Mail, kein Breakpoint. */
  /* Drop-Cap entfernt (Mel 07.07.): der echte Newsletter hat keine Initiale */
  .ed-cards{grid-template-columns:1fr}
  /* issue-tear Fix (Mel 07.07.): der fixe --cut:568 fiel auf schmalen Screens genau auf die
     ph-lead/ph-list-Grenze (Leerraum) -> Abriss-Linie lag im Weiss. 430 liegt in der gemeinsamen
     Lead-Fliesstext-Zone (~388-451) ueber ALLE Mobile-Breiten (340-759px, issue 300-520px
     verifiziert) -> Linie schneidet immer mitten durch Text (sauberer torn-Effekt). */
  .issue-hold{--cut:430px}
  /* --- Mobile-Audit 12.07. (alle nur <760px, Desktop unberuehrt): --- */
  /* Blur-Reveal kostet auf Mobile-GPUs sichtbar Frames (grosse Flaechen, mehrere gleichzeitig)
     -> mobil ohne Blur einblenden; Opacity+Translate bleiben. */
  .rv,.seclabel{filter:none}
  /* Lange Button-Labels (unsubscribe-Fehlerfall "Email support@themissedbit.com"): der
     nowrap-Bold-Zwilling (::after) erzwang die volle Einzeilen-Breite -> 14px Seiten-Overflow
     bei 320px. Mobil darf der Zwilling umbrechen (er ist unsichtbar; Hover-Bold gibt es auf
     Touch nicht mehr) und der Button bleibt im Container. */
  .cta-row .btn{max-width:100%;text-align:center}
  .btn::after{white-space:normal}
  /* advertise "Who reads": Label neben Text quetschte die Textspalte auf ~144px -> stapeln. */
  .aud .row{flex-direction:column;gap:6px}
  .aud .row .k{min-width:0}
  /* Legacy-.field (about/styleguide): Button-Padding frass dem Input bei 320px die
     Platzhalter-Breite (76px) -> kompakter, Platzhalter "you@work.com" passt wieder. */
  .field button{padding:15px 16px}
  .field input[type=email]{padding:15px 14px}
  /* advertise-Hero: der Desktop-Ausrichtungs-Clamp (90-100px, misst die Buttons auf die
     Feld-Hoehe der Home-Seite ein) ergab mobil einen toten 90px-Block -> Abstand wie das
     Home-Formular (~34px). */
  .adv-cta{margin-top:34px}
}
/* Platzbudget-Stufen (nachgemessen mit der laengsten CTA "Become a sponsor" = 134.4px inkl.
   Bold-Zwilling): unter 375px engerer CTA/Gap, unter 360px zusaetzlich kleinere Wortmarke. */
@media (max-width:374px){
  .nav-right{gap:4px}
  .nav-cta{padding:8px 10px}
}
@media (max-width:359px){
  .nav-mark{font-size:1.1rem}
  .nav-cta{padding:8px 8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.seclabel{opacity:1;transform:none;filter:none;transition:none}
  .nav-links a::after,.iss-card,.arc-row{transition:none}
  /* 12.07. (Mobile-Audit): Wizard-Slide, Switch-Bounce und Kapsel-Wachstum respektierten
     reduced-motion bisher nicht. Zustandswechsel bleiben (JS nutzt Timeouts, nie
     transitionend allein), nur die Bewegung entfaellt. .steps = mobile Hoehen-Animation. */
  .step-track,.ed-box::before,.ed-box::after,.ed-chev,.ed-chev::before,.signup-field.ready button,.signup-field input,.steps{transition:none}
  /* Placement-Demo (advertise): kein Auto-Zyklus (app.js), keine Gleit-/Fade-Bewegung */
  .ad-slot,.ad-slot::after,.demo-card,.demo-float{transition:none}
}

/* ---------- Editions-Fehler (Mel 16.07., ersetzt den handgezeichneten Hinweis vom
   11.07.-16.07.): der Fehler steht als Textzeile unterm Feld (#err-hero, bestehende
   .form-err-Stile); dazu bouncen die Toggle-Kreise samt Pfeil EINMAL wie beim
   Hover-Nudge (4px in Schaltrichtung, gleiche Feder-Kurve). JS setzt .ed-bounce kurz
   auf die .ed-card; nur im ungewaehlten Zustand ausgeloest (Fehlerfall), reduced-motion
   bounct nicht (JS-Guard). ---------- */
.signup-row{position:relative}
/* Voller Weg (Mel 16.07. spaetabends, ersetzt den 4px-Nudge): Kreis + Pfeil fahren EINMAL
   ganz nach rechts (24px = Anwahl-Endlage) und smooth zurueck — wie kurz an- und wieder
   abgewaehlt. Der Pfeil klappt dabei in sich um und zurueck (Spiegel-Flip wie beim echten
   Schalten, Site-Pfeilregel); gleiche Feder-Kurve wie der echte Slide (Overshoot inklusive).
   Die Track-Fuellung bleibt bewusst aus — Andeutung, kein Fake-Zustand. */
@keyframes edBounce{0%,100%{transform:translateX(0)}50%{transform:translateX(24px)}}
/* Fehler-Bounce OHNE Pfeil-Flip (Mel 17.07.): der Pfeil faehrt nur mit dem Kreis mit —
   der Spiegel-Flip bleibt dem echten Anwaehlen vorbehalten (:has(input:checked), unten). */
@keyframes edBounceChev{0%,100%{transform:translateX(0) rotate(-90deg)}50%{transform:translateX(24px) rotate(-90deg)}}
.ed-card.ed-bounce .ed-box::before{animation:edBounce .84s cubic-bezier(.34,1.56,.64,1)}
.ed-card.ed-bounce .ed-chev{animation:edBounceChev .84s cubic-bezier(.34,1.56,.64,1)}

/* ============================================================
   GRAUER CANVAS (Mel 14.07.): --page + --paper = #eeeeec — die ganze Website liegt auf
   dem hellsten Grau (= Dropdown-/Newsletter-Footer-Grau). Damit interaktive Flaechen nicht
   im Grau verschwinden (sie nutzten dasselbe --band), werden sie WEISS mit feiner Kante;
   Hover/Fokus gehen auf Ink bzw. Canvas-Grau. Die Newsletter-Beispielkarte (.paper, #fff)
   und der Sample-Footer bleiben weiss und ploppen mit ihrem Schatten.
   RUECKBAU: --page/--paper zurueck auf #ffffff + diesen Block entfernen.
   ============================================================ */
.soft-band{background:transparent}                          /* keine weisse Insel — blendet ins Grau */
/* SCHRITT 2 OHNE KANTEN (Mel 17.07.): der 14.07.-Canvas gab allen Step-2-Flaechen eine
   1px-Kante (inset-Schatten bzw. border). Fuer E-Mail-Feld (15.07.), btn-grey (14.07.) und
   Toggles (15.07.) hat Mel die Kante seither entfernt — Schritt 2 wurde nie nachgezogen und
   war als einziger Bereich noch umrandet. Jetzt gleiches Prinzip: FLACH weiss, keine Kante;
   Feedback kommt ueber den Grauwert (Hover/Fokus -> band-dark), nicht ueber eine Linie. */
.s2-web{background:#fff}
.s2-web:focus,.s2-web:focus-visible{background:var(--band-dark)}
@media (hover:hover){.s2-web:hover{background:var(--band-dark)}}
/* E-Mail-Feld FLACH weiss (Mel 15.07. abends: Inset-Schatten wieder raus — kein recessed-
   Effekt mehr, keine Kante). Affordance traegt der Ink-Pfeil (.go-chev) + Placeholder. */
.signup-field,.signup-field:focus-within{background:#fff}
.dd-btn,.dd.open .dd-btn{background:#fff;border-color:transparent}
/* Tastatur-Fokus behaelt bewusst eine sichtbare Kante (nur :focus-visible, fuer Maus/Touch
   unsichtbar) — sonst haette die Tastatur-Navigation gar keine Anzeige mehr. */
.dd-btn:focus-visible{background:#fff;border-color:var(--ink);outline:none}
.btn-grey{background:#fff;border-color:transparent}                /* Outline entfernt (Mel 14.07.) */
/* Toggle-Switch OHNE Schatten/Outline (Mel 15.07. abends, ersetzt den Inset-Schatten):
   Sichtbarkeit + Affordance kommen vom INK-PFEIL — seit 16.07. (Mel) sitzt er IM grauen
   Kreis und faehrt mit ihm mit: aus = › im Kreis links (zeigt die Schaltrichtung), an =
   ‹ im Kreis rechts (zeigt zurueck). Der Richtungswechsel liegt seit 17.07. in den
   SCHENKELN (::before/::after): die Aussenpunkte stehen, nur die Spitze wandert rueber —
   konstante Strichstaerke, kein Flachwerden (Mel). rotate(-90deg) am Span ist nur die
   konstante Grundlage (Spitze nach rechts) und bleibt in JEDEM Zustand gleich; die
   Transform-Listen sind strukturgleich (translateX+rotate) -> reines Gleiten. */
.ed-card:not(:has(input:checked)) .ed-box::after{background-size:0% 100%}  /* Aus: Fuellung zurueck (Mel 14.07., war background:#fff) */
.ed-chev{position:absolute;top:0;left:0;width:26px;height:26px;
  color:var(--ink);
  z-index:2;pointer-events:none;transform:translateX(0) rotate(-90deg);
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),--leg .42s cubic-bezier(.4,0,.2,1)}
.ed-card:has(input:checked) .ed-chev{transform:translateX(24px) rotate(-90deg)}
/* Pfeil-Nudge beim Hover: exakt die Knopf-Nudges (4px raus bzw. 19px zurueck, s. oben),
   damit Pfeil und Kreis eine Einheit bleiben; gleiche no-nudge-Sperre, nur bei echtem Hover. */
@media (hover:hover){
  .ed-card:not(.no-nudge):not(:has(input:checked)) .ed-box:hover .ed-chev{transform:translateX(4px) rotate(-90deg);transition:transform .2s ease-out}
  .ed-card:has(input:checked):not(.no-nudge) .ed-box:hover .ed-chev{transform:translateX(19px) rotate(-90deg);transition:transform .2s ease-out}
}
@media (hover:hover){
  .signup-field:hover{background:#fff}
  /* Hover wie FRUEHER (Mel 17.07.): der Grauwert dunkelt nach — KEINE Outline. Die
     Canvas-Fassung (background:#fff + border-color:ink) legte stattdessen eine Kante um
     Job function/Seniority; genau die stoerte. */
  .dd-btn:hover{background:var(--band-dark);border-color:transparent}
  /* .s2-go:hover{background:var(--band)} ENTFERNT (Mel 17.07.): die Regel ueberschrieb den
     schwarzen Continue-Button (.s2-go.on) beim Hover mit Grau — er sah dann deaktiviert aus.
     Continue quittiert wie alle Buttons ueber FETT (s. .s2-go.on:hover), nicht ueber Farbe. */
  /* OFF-Track bleibt bei Hover weiss (Mel 14.07.) — Darken entfernt; nur der Kreis bewegt sich. */
}