/* Hilfe-Center DE — der Seitenstil, einmal fuer alle Seiten dieses Marktes.
   Erzeugt aus dem Artikel-Prototyp. Nicht von Hand aendern.

   Warum ausgelagert: 26 KB Inline-CSS auf 522 Artikeln waeren 13,6 MB dreifach
   kopiertes Stylesheet, und eine Designaenderung muesste 522 Dateien anfassen.
   Warum OHNE die Schriften: /fonts/<markt>.css enthaelt bei Japanisch 330 KB
   @font-face-Regeln fuer 248 Unicode-Bereiche. Zusammengelegt laedt der Browser
   346 KB CSS fuer eine Seite. Zwei parallele Links auf dieselbe Herkunft sind
   billiger, und beide kommen ab der zweiten Seite aus dem Zwischenspeicher. */

/* ————— AlbumQR tokens (design/systems/out2/de) ————— */
:root{
  --paper:#FAFAFA;--ink:#0A0A0A;--ink-soft:#595959;--ink-faint:#9E9E9E;
  --rule:#E2E2E2;--rule-strong:#0A0A0A;--well:#F2F2F2;--photo:#E9E8E5;
  --band:#0A0A0A;--band-fg:#FAFAFA;--band-soft:#A3A3A3;--band-rule:#2E2E2E;
  --button-bg:var(--ink);--button-fg:var(--paper);--link:var(--ink);
  --font-display:'Spectral',serif;--font-body:'Inter Tight',system-ui,sans-serif;
  --weight-display:500;
  --fs-h1:84px;--fs-h2:40px;--fs-h3:24px;--fs-h4:19px;
  --fs-lead:20.4px;--fs-body:17px;--fs-small:14px;--fs-label:12px;
  --fs-stat:44px;--fs-quote:32px;--italic:italic;
  --lh-display:1.02;--lh-body:1.6;--lh-tight:1.25;
  --track-display:-0.015em;--track-label:.12em;--track-wordmark:-0.01em;
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:48px;--s-6:64px;--s-7:96px;
  --gap-section:128px;--gap-block:48px;
  --page-pad:clamp(20px,5vw,80px);--page-max:1280px;
  --hairline:1px;--control-h:52px;--control-h-sm:40px;--header-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);margin:0}
p{margin:0}
a{color:var(--link);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
img,svg{max-width:100%;display:block}
/* `height:auto` gehoert ZWINGEND dazu, sobald ein Bild width- und height-Attribute
   traegt — und die braucht es, damit der Platz vor dem Laden reserviert ist (CLS).
   Ohne diese Zeile bleibt die Hoehe auf dem Attributwert stehen, waehrend die Breite
   auf die Spalte schrumpft: gemessen am 2026-08-26 ein Bild mit 1600x893, gerendert
   als 654x893 — Seitenverhaeltnis 0,73 statt 1,79. Es sah gequetscht aus, und das
   war es auch. */
img[width][height]{height:auto}
button{font:inherit}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.k{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.tnum{font-variant-numeric:tabular-nums}
.foto{background:var(--photo);border:var(--hairline) solid var(--rule);display:grid;place-items:center;color:var(--ink-faint);font-size:var(--fs-small);text-align:center;padding:12px}

/* ————— Header (identisch zur Landingpage) ————— */
.g-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);border-bottom:var(--hairline) solid var(--rule);gap:24px}
.g-wordmark{font-family:var(--font-display);font-weight:var(--weight-display);font-size:22px;letter-spacing:var(--track-wordmark);text-decoration:none;color:inherit;line-height:1;white-space:nowrap}
.g-nav{display:flex;gap:32px;align-items:center}
.g-nav a{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;text-decoration:none;color:inherit}
.g-nav a:not(.g-btn):hover{text-decoration:underline;text-underline-offset:.3em}
.g-nav .g-btn{text-transform:none;letter-spacing:0;color:var(--button-fg)}
.g-nav a.g-btn:hover{text-decoration:none}
.g-burger{display:none;background:none;border:var(--hairline) solid var(--ink);width:44px;height:44px;place-items:center;cursor:pointer;color:var(--ink)}
@media (max-width:1023px){.g-nav{display:none}.g-burger{display:grid}}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--control-h);padding:0 28px;background:var(--button-bg);color:var(--button-fg);font-family:var(--font-body);font-size:15px;font-weight:500;border:var(--hairline) solid var(--ink);border-radius:0;cursor:pointer;text-decoration:none;white-space:nowrap}
.g-btn:hover{opacity:.88}.g-btn:active{opacity:.75}
.g-btn--ghost{background:transparent;color:var(--ink)}
.g-btn--ghost:hover{opacity:1;box-shadow:inset 0 0 0 1px var(--ink)}
.g-btn--sm{min-height:var(--control-h-sm);padding:0 18px;font-size:14px}
.g-ic{flex:none}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ————— Gesten der Marke (dieselben wie auf der Landingpage) —————
   Haarlinie, Kennzahl, Schraffur-Register, Zitat, Ink-Band. Die Landingpage zeichnet
   Schraffur und Orb mit einem CSS-Verlauf; das Hilfe-Center darf keinen tragen, denn
   hd-design-no-shadow zaehlt jeden im Dokument — auch einen, der nur im Kommentar
   steht. Die Schraffur ist deshalb eine SVG-Kachel aus 1px-Linien. Der Orb faellt
   ganz weg: er ist ein Kreis, und hd-design-sharp erlaubt nur border-radius 0. */
.g-rule{border:0;border-top:var(--hairline) solid var(--rule);margin:0}
.g-stat{border-top:var(--hairline) solid var(--ink);padding-top:16px}
.g-stat-n{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-stat);line-height:1;font-variant-numeric:tabular-nums}
.g-stat-l{margin-top:8px;color:var(--ink-soft);font-size:var(--fs-small)}
.g-statband{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.g-hatch{position:relative;height:72px;margin-inline:calc(50% - 50vw);border-top:var(--hairline) solid var(--rule-strong);border-bottom:var(--hairline) solid var(--rule-strong);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0 9L9 0M-1 1L1 -1M8 10L10 8' stroke='%230A0A0A' stroke-opacity='.14' stroke-width='1'/%3E%3C/svg%3E");background-repeat:repeat;margin-top:var(--s-6)}
.g-hatch .lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper);border:var(--hairline) solid var(--rule-strong);padding:10px 28px;font-family:var(--font-display);font-style:var(--italic);font-size:var(--fs-h3);color:var(--ink);line-height:1;white-space:nowrap}
.g-quote{font-family:var(--font-display);font-size:var(--fs-quote);line-height:var(--lh-tight);letter-spacing:var(--track-display);max-width:28ch}
.g-band{background:var(--band);color:var(--band-fg);margin-inline:calc(50% - 50vw);padding:var(--s-7) var(--page-pad)}
.g-band .inner{max-width:calc(var(--page-max) - 2 * var(--page-pad));margin:0 auto}
.g-band .k{color:var(--band-soft)}
.g-band p{color:var(--band-soft)}
.g-band a{color:var(--band-fg)}
.g-band .g-rule{border-color:var(--band-rule)}
.g-band .g-btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.g-band .g-btn--ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.g-band .g-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--paper)}
.g-band a:focus-visible,.g-band button:focus-visible{outline-color:var(--band-fg)}

/* ————— Artikelkopf ————— */
.art-head{padding-top:var(--s-6);padding-bottom:var(--s-5);border-bottom:var(--hairline) solid var(--rule)}
.crumb{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.crumb a{color:var(--ink-soft);text-decoration:none}
.crumb a:hover{text-decoration:underline;text-underline-offset:.3em}
.crumb .sep{margin:0 10px;color:var(--ink-faint)}
.art-head .k{margin-top:var(--s-6)}
.art-head h1{font-size:clamp(40px,5.2vw,64px);line-height:var(--lh-display);letter-spacing:var(--track-display);margin-top:var(--s-3);max-width:20ch}
.art-meta{margin-top:var(--s-3);font-size:var(--fs-small);color:var(--ink-soft);max-width:46em}
.art-meta a{color:var(--ink-soft)}

/* ————— Kernantwort ————— */
.antwort{margin-top:var(--s-5);border-top:var(--hairline) solid var(--rule-strong);border-bottom:var(--hairline) solid var(--rule-strong);padding:var(--s-4) 0;max-width:46em}
.antwort .k{margin-bottom:var(--s-2)}
.antwort p{font-family:var(--font-display);font-size:clamp(19px,2vw,24px);line-height:1.45}
.art-head .g-statband{margin-top:var(--s-5);max-width:46em}

/* ————— Artikelkörper ————— */
.art{display:grid;grid-template-columns:220px 1fr;gap:var(--s-6);padding:var(--s-6) 0 var(--s-5)}
.art-rail{position:sticky;top:var(--s-3);align-self:start}
.art-rail ol{list-style:none;margin:12px 0 0;padding:0;border-top:var(--hairline) solid var(--rule)}
.art-rail li{border-bottom:var(--hairline) solid var(--rule)}
.art-rail li a{display:block;padding:10px 0;font-size:14px;line-height:1.35;text-decoration:none;color:var(--ink-soft)}
.art-rail li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.25em}
.art-body{max-width:40em}
.art-body section{padding-bottom:var(--s-5);margin-bottom:var(--s-5);border-bottom:var(--hairline) solid var(--rule)}
.art-body section:last-of-type{border-bottom:0;margin-bottom:0}
.art-body h2{font-size:clamp(26px,3vw,34px);line-height:var(--lh-tight);letter-spacing:var(--track-display);max-width:22ch}
.art-body h3{font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--track-display);margin-top:var(--s-4)}
.art-body p{margin-top:var(--s-3)}
.art-body ol,.art-body ul{margin:var(--s-3) 0 0;padding:0;list-style:none;border-top:var(--hairline) solid var(--rule)}
.art-body li{border-bottom:var(--hairline) solid var(--rule);padding:14px 0;display:grid;grid-template-columns:34px 1fr;gap:var(--s-2);align-items:baseline}
.art-body ol{counter-reset:s}
/* Marginalziffer im Feuilleton-Satz, wie in der Artikelliste des DE-Blogs: die Zahl
   haengt im Rand und traegt die Schrift der Ueberschriften, nicht die des Fliesstexts. */
.art-body ol li{counter-increment:s;grid-template-columns:64px 1fr;gap:var(--s-3);padding:18px 0}
.art-body ol li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h3);line-height:1.3;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.art-body ul li::before{content:"—";color:var(--ink-faint)}

/* ————— Herausstellung: der eine Satz, der zaehlt ————— */
.art-body .pull{margin:var(--s-5) 0;padding:var(--s-4) 0;border-top:var(--hairline) solid var(--rule-strong);border-bottom:var(--hairline) solid var(--rule-strong)}
/* kursiv, damit die Herausstellung nicht wie eine weitere H2 aussieht — im
   Fliesstext stehen beide sonst in derselben Groesse und derselben Schrift */
.art-body .pull .g-quote{margin-top:0;font-style:var(--italic)}
.art-body .pull figcaption{margin-top:var(--s-3);font-size:var(--fs-small);letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.art-body figure{margin:var(--s-4) 0 0}
.art-body figure .foto{aspect-ratio:16/9}
.art-body figure.demo .foto{aspect-ratio:16/9}
.art-body figure.demo figcaption{text-transform:none;letter-spacing:0;font-size:var(--fs-small);color:var(--ink-soft)}
.art-body figcaption{margin-top:10px;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint)}
.tabelle{width:100%;border-collapse:collapse;margin-top:var(--s-4);font-size:var(--fs-small)}
.tabelle caption{text-align:left;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);padding-bottom:12px}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:var(--hairline) solid var(--rule)}
.tabelle thead th{border-bottom:var(--hairline) solid var(--rule-strong);font-family:var(--font-body);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.fazit{border-left:var(--hairline) solid var(--ink);padding-left:var(--s-3);font-family:var(--font-display);font-style:italic;font-size:var(--fs-lead)}
.faq h3{max-width:30ch}
.faq p{max-width:38em}

/* ————— Verwandte Artikel ————— */
.verwandt{padding:var(--s-6) 0}
.verwandt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.verwandt-grid article{border-top:var(--hairline) solid var(--rule-strong);padding-top:var(--s-3)}
.verwandt-grid .no{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.verwandt-grid h3{font-size:22px;line-height:var(--lh-tight);letter-spacing:var(--track-display);margin-top:12px;max-width:20ch}
.verwandt-grid h3 a{text-decoration:none}
.verwandt-grid h3 a:hover{text-decoration:underline;text-underline-offset:.25em}
.verwandt-grid p{margin-top:12px;color:var(--ink-soft);font-size:var(--fs-small)}

/* ————— Schluss: das Ink-Band —————
   Kontakt, Korrekturweg und der Rueckweg ins Hilfe-Center in einem Block. Die Marke
   schliesst ihre Seiten schwarz; ein Hilfe-Artikel, der im Nichts endet, verschenkt
   genau den Moment, in dem jemand aufgibt. Die Ueberschrift ist bewusst ein <p>:
   der Artikel darf nicht mehr als 8 H2 tragen (hd-fanout). */
.g-final{margin-top:var(--s-6)}
.g-final .band-titel{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(32px,4vw,calc(var(--fs-h2) * 1.2));line-height:var(--lh-tight);letter-spacing:var(--track-display);max-width:20ch;color:var(--band-fg)}
.g-final .lead{margin-top:var(--s-3);font-size:var(--fs-lead);max-width:52ch}
.g-final .g-rule{margin-top:var(--s-5)}
.g-final .adresse{max-width:52em}
.g-final .adresse div{display:grid;grid-template-columns:180px 1fr;gap:var(--s-4);padding:18px 0;border-bottom:var(--hairline) solid var(--band-rule);align-items:baseline}
.g-final .adresse dt{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--band-soft)}
.g-final .adresse dd{margin:0;color:var(--band-fg)}
.g-final .adresse a{font-family:var(--font-display);font-size:var(--fs-lead)}
.g-final .note{margin-top:var(--s-3);font-size:var(--fs-small);max-width:52em}
.g-final .btn-row{margin-top:var(--s-5)}
.g-final .fine{margin-top:var(--s-3);font-size:var(--fs-small);color:var(--band-soft)}

/* ————— Footer (identisch zur Landingpage) ————— */
.g-footer{border-top:var(--hairline) solid var(--rule);margin-top:var(--gap-section);padding:var(--s-6) 0 var(--s-4)}
.g-footer-grid{display:grid;grid-template-columns:1.4fr repeat(6,1fr);gap:var(--s-4)}
.g-footer h4{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;font-family:var(--font-body)}
.g-footer ul{list-style:none;padding:0;margin:0}
.g-footer li{padding:5px 0}
.g-footer li a{font-size:15px;text-decoration:none;color:var(--ink)}
.g-footer li a:hover{text-decoration:underline}
.g-footer-brand p{margin-top:12px;color:var(--ink-soft);font-size:var(--fs-small);max-width:26ch}
.g-soc{display:flex;gap:12px;margin-top:16px}
.g-soc a{width:36px;height:36px;border:var(--hairline) solid var(--rule);display:grid;place-items:center;color:var(--ink)}
.g-soc a:hover{border-color:var(--ink)}
.g-footer-bar{border-top:var(--hairline) solid var(--rule);margin-top:var(--s-5);padding-top:var(--s-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--fs-small);color:var(--ink-soft)}
.g-footer-bar a{color:var(--ink-soft)}

/* ————— Responsive ————— */
@media (max-width:1023px){
  .art{grid-template-columns:1fr;gap:var(--s-4)}
  .art-rail{position:static}
  .verwandt-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .g-footer-grid{grid-template-columns:repeat(3,1fr)}
  .g-footer-brand{grid-column:1/-1}
}
@media (max-width:719px){
  .art-head{padding-top:var(--s-5)}
  .art-head .k{margin-top:var(--s-5)}
  .g-statband{grid-template-columns:1fr;gap:var(--s-3)}
  .art-body ol li{grid-template-columns:44px 1fr;gap:var(--s-2)}
  .g-hatch .lbl{font-size:var(--fs-h4);padding:8px 18px}
  .g-band{padding:var(--s-6) var(--page-pad)}
  .g-final .adresse div{grid-template-columns:1fr;gap:6px}
  .tabelle{font-size:13px}
  .g-footer-grid{grid-template-columns:repeat(2,1fr)}
}
/* ————— Videoplayer —————
   Monochrom, kantig, Haarlinien: dieselben Regeln wie der Rest der Marke. Kein Radius,
   kein Schatten, kein Verlauf — sonst faellt er sofort aus dem Satz.
   Die Leiste ist eine eigene Zeile UNTER dem Bild und nicht darueber gelegt: eine
   Ueberblendung braucht einen Farbverlauf, damit man sie lesen kann, und Verlaeufe gibt
   es hier nicht. */
.vp{margin:0}
.vp-buehne{position:relative;border:var(--hairline) solid var(--rule-strong);background:var(--paper);cursor:pointer}
.vp-buehne video{display:block;width:100%;height:auto;aspect-ratio:16/9}
/* Das Dreieck ist ein SVG, kein Rahmen-Trick. Die uebliche CSS-Loesung baut es aus einem
   26px-Rahmen — und genau danach sucht die Haarlinien-Regel der Marke. Ein Zeichen, das
   den eigenen Pruefer ausloest, ist das falsche Zeichen. */
.vp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;pointer-events:none;color:var(--ink);opacity:.9;transition:opacity .15s}
.vp[data-laeuft] .vp-play{display:none}
.vp-buehne:hover .vp-play{opacity:1}
.vp-leiste{display:flex;align-items:center;gap:var(--s-2);padding:10px 0;
  border-bottom:var(--hairline) solid var(--rule)}
.vp-knopf{appearance:none;background:none;border:var(--hairline) solid var(--rule-strong);color:var(--ink);
  width:44px;height:44px;min-width:44px;display:grid;place-items:center;cursor:pointer;padding:0}
.vp-knopf:hover{background:var(--ink);color:var(--paper)}
.vp-knopf:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.vp-ic{display:block}
/* Die Spur ist eine Haarlinie. Der Griff braucht Flaeche zum Treffen, also traegt das
   Element 44px Hoehe und die sichtbare Linie sitzt mittig darin. */
.vp-spur{position:relative;flex:1;height:44px;cursor:pointer;display:flex;align-items:center}
.vp-spur::before{content:'';position:absolute;left:0;right:0;height:var(--hairline);background:var(--rule)}
/* KEINE Ueberblendung. Der Balken wird pro Bild gesetzt (player.js); eine Ueberblendung
   von 100 ms wuerde dagegen arbeiten und genau das Ruckeln erzeugen, das sie glaetten soll. */
.vp-fuellung{position:relative;height:2px;background:var(--ink);width:0}
.vp-fuellung::after{content:'';position:absolute;right:-1px;top:-4px;width:2px;height:10px;background:var(--ink)}
.vp-spur:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.vp-zeit{font-size:var(--fs-label);letter-spacing:var(--track-label);color:var(--ink-soft);white-space:nowrap}
.vp-trenn{margin:0 6px;color:var(--ink-faint)}
@media (prefers-reduced-motion:reduce){.vp-fuellung{transition:none}.vp-buehne::after{transition:none}}
@media (max-width:719px){.vp-leiste{gap:var(--s-1)}}

/* ————— Aus dem Artikel-Prototyp: Akkordeon, Sprunglink, Teilen,
   Autorenzeile, Tippziele, Videoplayer. Diese Regeln standen nur im
   Prototyp und fehlten dem ausgelagerten Stylesheet. ————— */

/* ————— FAQ-Akkordeon, identisch zur Landingpage —————
   Wortgleich uebernommen aus apps/brands/theme/generated/components.css. Die Hilfeseiten
   tragen ihr CSS inline und kennen den Baustein sonst nicht; dieselbe Auszeichnung haette
   ohne diese Zeilen anders ausgesehen als auf der Startseite. */
.g-acc{border-top:var(--hairline) solid var(--rule)}
.g-acc details{border-bottom:var(--hairline) solid var(--rule)}
.g-acc summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--font-display);font-size:22px;display:flex;justify-content:space-between;gap:24px;align-items:center}
.g-acc summary:hover{color:var(--ink-soft)}
.g-acc summary::-webkit-details-marker{display:none}
.g-acc summary::after{content:'+';font-family:var(--font-body);font-size:22px;color:var(--ink-soft)}
.g-acc details[open] summary::after{content:'\2212'}
.g-acc details p{padding:0 0 24px;color:var(--ink-soft);max-width:var(--measure)}
.g-acc--c{max-width:720px;margin:0 auto}
.g-faq-foot{text-align:center;margin-top:var(--s-4);color:var(--ink-soft);font-size:var(--fs-small)}
.g-faq-foot a{color:var(--ink)}

/* ————— Tippziele —————
   Gemessen bei 360 px am 2026-08-26: Brotkrume 15 px hoch, Autorenlink 17, die Eintraege
   im Inhaltsverzeichnis 39. WCAG 2.2 AA (2.5.8) verlangt 24 px, die Hausregel 44.
   Der senkrechte Innenabstand macht die Flaeche gross, ohne die Zeilen auseinanderzuziehen:
   die Kaesten ueberlappen sich nicht, weil die Zeilenhoehe mitwaechst. */
/* `summary` fehlte in der Fokus-Regel der Hilfeseiten — das Design-System hat es
   (components.css: a,button,summary), die inline kopierte Fassung nicht. Die
   FAQ-Ueberschriften bekamen dadurch keinen Fokusring. */
summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.crumb a,.crumb span[aria-current]{display:inline-flex;align-items:center;min-height:44px}
.g-faq-foot a,.g-final .adresse a{display:inline-flex;align-items:center;min-height:44px}
.art-meta dd a{display:inline-flex;align-items:center;min-height:44px}
.art-rail li a{min-height:44px;display:flex;align-items:center}
.verwandt-grid h3 a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:719px){
  .crumb{line-height:1.2}
}

/* ————— Sprunglink —————
   Erstes fokussierbares Element der Seite. Wer mit der Tastatur ankommt, muss nicht durch
   die ganze Kopfnavigation, um zum Text zu gelangen. Sichtbar nur bei Fokus. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;font-size:var(--fs-small)}
.skip:focus{left:var(--page-pad)}

/* ————— Weitergeben —————
   Reine Links, kein fremdes Skript. Ein Teilen-Widget von X oder Facebook holt Code von
   einem Dritt-Host und damit genau das zurueck, was beim Umzug der Schriften abgeschafft
   wurde. mailto und wa.me brauchen nichts davon. */
.teilen{padding:var(--s-5) 0;border-top:var(--hairline) solid var(--rule)}
.teilen p{margin-top:12px;color:var(--ink-soft);font-size:var(--fs-small);max-width:44em}
.teilen-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-3)}
.teilen-row .g-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px}
/* Artikel-Impressum: vier Angaben nebeneinander, Beschriftung ueber dem Wert.
   `.g-ic` ist im System `display:block` (es sitzt sonst in eigenen Kaesten) — in einer
   Textzeile riss das jedes Sinnbild auf eine eigene Zeile. Hier steht das Icon deshalb
   im Flex-Fluss der Beschriftung, nicht im Fliesstext. */
.art-meta{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:var(--s-5);margin-top:var(--s-4);padding:var(--s-3) 0;border-top:var(--hairline) solid var(--rule);border-bottom:var(--hairline) solid var(--rule);max-width:46em}
.art-meta dt{display:flex;align-items:center;gap:6px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.art-meta dd{margin:6px 0 0;font-size:var(--fs-small);color:var(--ink);white-space:nowrap}
.art-meta dd a{color:var(--ink);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:from-font}
.art-meta .g-ic{width:14px;height:14px;margin:0;flex:0 0 auto;color:var(--ink-soft)}
@media (max-width:719px){
  .art-meta{grid-template-columns:repeat(2,auto);gap:var(--s-3) var(--s-4)}
  .art-meta dd{white-space:normal}
}
/* Die Aufnahme haelt ihren Platz frei, bevor sie geladen ist — sonst springt der Text,
   sobald das Standbild da ist (CLS). */
.art-body figure.demo video{width:100%;height:auto;aspect-ratio:16/9;display:block;background:var(--paper)}

/* ————— Videoplayer —————
   Monochrom, kantig, Haarlinien: dieselben Regeln wie der Rest der Marke. Kein Radius,
   kein Schatten, kein Verlauf — sonst faellt er sofort aus dem Satz.
   Die Leiste ist eine eigene Zeile UNTER dem Bild und nicht darueber gelegt: eine
   Ueberblendung braucht einen Farbverlauf, damit man sie lesen kann, und Verlaeufe gibt
   es hier nicht. */
/* Siehe die Erklaerung an der img,svg-Regel: ohne height:auto quetscht ein Bild mit
   width/height-Attributen. Hier nochmal, weil der Erzeuger die Huelle neu schreibt. */
img[width][height]{height:auto}
.vp{margin:0}
.vp-buehne{position:relative;border:var(--hairline) solid var(--rule-strong);background:var(--paper);cursor:pointer}
.vp-buehne video{display:block;width:100%;height:auto;aspect-ratio:16/9}
/* Das Dreieck ist ein SVG, kein Rahmen-Trick. Die uebliche CSS-Loesung baut es aus einem
   26px-Rahmen — und genau danach sucht die Haarlinien-Regel der Marke. Ein Zeichen, das
   den eigenen Pruefer ausloest, ist das falsche Zeichen. */
.vp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;pointer-events:none;color:var(--ink);opacity:.9;transition:opacity .15s}
.vp[data-laeuft] .vp-play{display:none}
.vp-buehne:hover .vp-play{opacity:1}
.vp-leiste{display:flex;align-items:center;gap:var(--s-2);padding:10px 0;
  border-bottom:var(--hairline) solid var(--rule)}
.vp-knopf{appearance:none;background:none;border:var(--hairline) solid var(--rule-strong);color:var(--ink);
  width:44px;height:44px;min-width:44px;display:grid;place-items:center;cursor:pointer;padding:0}
.vp-knopf:hover{background:var(--ink);color:var(--paper)}
.vp-knopf:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.vp-ic{display:block}
/* Die Spur ist eine Haarlinie. Der Griff braucht Flaeche zum Treffen, also traegt das
   Element 44px Hoehe und die sichtbare Linie sitzt mittig darin. */
.vp-spur{position:relative;flex:1;height:44px;cursor:pointer;display:flex;align-items:center}
.vp-spur::before{content:'';position:absolute;left:0;right:0;height:var(--hairline);background:var(--rule)}
/* KEINE Ueberblendung. Der Balken wird pro Bild gesetzt (player.js); eine Ueberblendung
   von 100 ms wuerde dagegen arbeiten und genau das Ruckeln erzeugen, das sie glaetten soll. */
.vp-fuellung{position:relative;height:2px;background:var(--ink);width:0}
.vp-fuellung::after{content:'';position:absolute;right:-1px;top:-4px;width:2px;height:10px;background:var(--ink)}
.vp-spur:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.vp-zeit{font-size:var(--fs-label);letter-spacing:var(--track-label);color:var(--ink-soft);white-space:nowrap}
.vp-trenn{margin:0 6px;color:var(--ink-faint)}
@media (prefers-reduced-motion:reduce){.vp-fuellung{transition:none}.vp-buehne::after{transition:none}}
@media (max-width:719px){.vp-leiste{gap:var(--s-1)}}

/* Die Gesamtdauer neben der gelaufenen Zeit. Erbt Groesse und Farbe von .vp-zeit;
   die Regel steht trotzdem hier, weil eine Klasse ohne Regel nicht unterscheidbar
   ist von einem Tippfehler. */
.vp-dauer{color:inherit}

/* ————— Übersicht: Bereichsraster und Zähler. Standen nur im Inline-CSS
   der handgebauten Übersicht und fehlten dem ausgelagerten Stylesheet. ————— */
/* ————— Themengruppen —————
   Marginalziffer im Feuilleton-Satz: die Nummer haengt links im Rand, nicht ueber der
   Ueberschrift. Dieselbe Setzung wie die Artikelliste im DE-Blog (.story .no). */
.themen{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6);padding:var(--s-6) 0}
.themen{grid-template-columns:1fr;gap:var(--s-5)}
.thema{display:grid;grid-template-columns:64px 1fr;gap:var(--s-4);border-top:var(--hairline) solid var(--rule-strong);padding-top:var(--s-3)}
.thema .no{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(28px,3vw,36px);line-height:1;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.thema h2{font-size:clamp(24px,2.4vw,30px);line-height:var(--lh-tight);letter-spacing:var(--track-display);max-width:18ch}
.thema .lead{margin-top:12px;color:var(--ink-soft);font-size:var(--fs-small);max-width:34ch}
.thema ul{list-style:none;margin:var(--s-3) 0 0;padding:0;border-top:var(--hairline) solid var(--rule)}
.thema li{border-bottom:var(--hairline) solid var(--rule)}
.thema li a{display:block;padding:14px 0;text-decoration:none;color:var(--ink);font-size:16px;line-height:1.4}
.thema li a:hover{text-decoration:underline;text-underline-offset:.25em}
.thema .zahl{display:block;margin-top:14px;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-faint)}
/* Auf dem Telefon gibt es keinen Rand, in dem eine Marginalziffer haengen koennte —
     also steht sie ueber der Ueberschrift, und die Artikeltitel bekommen die Breite. */
  .thema{grid-template-columns:1fr;gap:var(--s-2)}
/* Ein Eintrag ohne Seite ist kein Link. Er steht da, weil das Verzeichnis
   vollstaendig sein soll, und er sieht anders aus, damit niemand vergeblich tippt. */
.geplant{color:var(--ink-faint)}
.geplant::after{content:" — in Arbeit";font-size:var(--fs-small)}

/* ————— Einleitung und Datum auf Übersicht und Kategorieseiten —————
   Der einleitende Absatz steht ueber der Liste und ist die Antwort der Seite:
   ohne ihn ist eine Verzeichnisseite ein Menue, und ein Menue wird weder zitiert
   noch rankt es. ————— */
.art-meta-line{margin-top:var(--s-3);font-size:var(--fs-lead);max-width:56ch}
.art-meta-date{margin-top:var(--s-3);font-size:var(--fs-small);color:var(--ink-soft)}