/* Hilfe-Center FR — 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. */

/* ————— QR Album · qralbum.fr · tokens ————— */
: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);
--s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:48px;--s-6:64px;--s-7:96px;--s-8:128px;
--gap-section:144px;--gap-block:48px;
--page-pad:clamp(20px,5vw,80px);--page-max:1280px;
--radius:0;--hairline:1px;--control-h:52px;--control-h-sm:40px;--header-h:72px;
--font-display:'Bodoni Moda',serif;--font-body:'Jost',system-ui,sans-serif;
--weight-display:500;
--fs-h1:88px;--fs-h2:40px;--fs-h3:24px;--fs-h4:19px;--fs-lead:20.4px;--fs-body:17px;--fs-small:14px;--fs-label:12px;
--lh-display:1.0;--lh-body:1.6;--lh-tight:1.25;
--track-display:-0.01em;--track-label:.12em;--track-wordmark:0.18em;
--case-label:uppercase;--case-wordmark:uppercase;
--measure:34em;--mobile-display-scale:0.55;
}
/* ————— base ————— */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;overflow-x:clip}
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}
em{font-style:italic}
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,input: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}
.g-wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.g-k{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:var(--case-label);color:var(--ink-soft)}
.g-ic{flex:none}
/* ————— header (matches landing page) ————— */
.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-transform:var(--case-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:var(--case-label);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}}
/* ————— buttons ————— */
.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;transition:opacity .2s ease,transform .15s ease}
.g-btn:hover{opacity:.88}.g-btn:active{opacity:.75;transform:translateY(1px)}
.g-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--paper)}
.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--ghost:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
.g-btn--sm{min-height:var(--control-h-sm);padding:0 18px;font-size:14px}
/* ————— photo placeholder: flat neutral block ————— */
.ph{background:var(--photo);border:var(--hairline) solid var(--rule);display:grid;place-items:center;color:var(--ink-faint);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;text-align:center;padding:12px}
/* ————— breadcrumb ————— */
.ab-crumb{padding-top:var(--s-6);display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.ab-crumb a{text-decoration:none;color:var(--ink-soft)}
.ab-crumb a:hover{color:var(--ink)}
.ab-crumb .sep{width:20px;border-top:var(--hairline) solid var(--ink-faint)}
/* ————— masthead article ————— */
/* Pas de max-width en ch sur la section : l’unité ch se calcule sur le Jost à 17px,
   ce qui bloquait le bandeau à 245px et cassait le titre à 1 mot par ligne. La mesure
   du titre est déjà portée par le h1 lui-même, en Bodoni. */
.ha-mast{padding-top:var(--s-5)}
.ha-mast h1{font-size:clamp(44px,6vw,76px);line-height:1.02;letter-spacing:var(--track-display);max-width:16ch}
.ha-mast .g-k{margin-bottom:var(--s-2)}
/* ————— corps + colonne latérale ————— */
.ha-body{margin-top:var(--s-6);border-top:var(--hairline) solid var(--rule-strong);padding-top:var(--s-5);display:grid;grid-template-columns:7fr 3fr;gap:var(--s-7);align-items:start}
.ha-answer{border-left:var(--hairline) solid var(--ink);padding-left:var(--s-3)}
.ha-answer .g-k{margin-bottom:var(--s-2)}
.ha-answer p{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);line-height:1.22;letter-spacing:var(--track-display);max-width:30ch}
.ha-meta{margin-top:var(--s-4);display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);border-top:var(--hairline) solid var(--rule);border-bottom:var(--hairline) solid var(--rule);padding:12px 0}
.ha-sec{margin-top:var(--s-7);border-top:var(--hairline) solid var(--rule);padding-top:var(--s-3)}
.ha-sec h2{font-size:clamp(28px,3vw,36px);line-height:1.1;letter-spacing:var(--track-display);max-width:22ch}
.ha-sec h3{margin-top:var(--s-4);font-size:var(--fs-h4);line-height:1.3;letter-spacing:0;font-family:var(--font-body);font-weight:500}
.ha-sec p{margin-top:var(--s-3);max-width:var(--measure);color:var(--ink-soft)}
.ha-sec h3 + p{margin-top:var(--s-1)}
.ha-sec ol,.ha-sec ul{margin:var(--s-3) 0 0;padding:0;list-style:none;max-width:var(--measure)}
.ha-sec ol li,.ha-sec ul li{border-top:var(--hairline) solid var(--rule);padding:12px 0;color:var(--ink-soft);display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:baseline}
.ha-sec ol li:last-child,.ha-sec ul li:last-child{border-bottom:var(--hairline) solid var(--rule)}
.ha-sec li .lab{font-family:var(--font-display);font-size:15px;color:var(--ink-faint);min-width:2ch}
.ha-correction{margin-top:var(--s-2);font-size:var(--fs-small);color:var(--ink-soft);max-width:var(--measure)}
/* ————— repères : le bloc de chiffres (geste g-stat) —————
   Orientation, pas argumentaire : les 3 nombres sont ceux que l’article donne plus bas. */
.ha-figures{margin-top:var(--s-4)}
.ha-figures .g-k{margin-bottom:var(--s-3)}
.ha-statband{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.g-stat{border-top:var(--hairline) solid var(--ink);padding-top:16px}
.g-stat-n{display:block;font-family:var(--font-display);font-size:clamp(30px,5vw,44px);line-height:1;letter-spacing:var(--track-display)}
.g-stat-l{display:block;margin-top:8px;color:var(--ink-soft);font-size:var(--fs-small)}
/* ————— la phrase qui porte l’article (geste g-quote) ————— */
.ha-pull{margin:var(--s-5) 0 0;border-top:var(--hairline) solid var(--ink);border-bottom:var(--hairline) solid var(--ink);padding:var(--s-4) 0;max-width:var(--measure)}
.ha-sec .ha-pull .g-quote{margin:0;max-width:28ch;color:var(--ink);font-family:var(--font-display);font-size:clamp(24px,3vw,32px);line-height:var(--lh-tight);letter-spacing:var(--track-display)}
/* ————— marque de chapitre : la bande hachurée et sa plaque (geste g-hatch) —————
   Les hachures sont un motif SVG de filets 1px, pas un dégradé. */
.g-hatch{position:relative;height:72px;margin-top:var(--gap-section);margin-inline:calc(50% - 50vw);border-top:var(--hairline) solid var(--rule-strong);border-bottom:var(--hairline) solid var(--rule-strong);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8L8 0M-2 2L2 -2M6 10L10 6' stroke='%230A0A0A' stroke-width='1' opacity='.12'/%3E%3C/svg%3E")}
.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:italic;font-size:var(--fs-h3);color:var(--ink);line-height:1;white-space:nowrap}
/* ————— registre : le filet nu (geste g-rule) ————— */
.g-rule{border:0;border-top:var(--hairline) solid var(--rule);margin:0}
.ha-figure{margin:var(--s-4) 0 0;max-width:var(--measure)}
.ha-figure .ph{aspect-ratio:3/2}
.ha-figure.demo .ph{aspect-ratio:16/9;background:var(--photo)}
.ha-figure figcaption{margin-top:10px;font-size:var(--fs-small);color:var(--ink-faint)}
/* ————— tableau ————— */
.ha-tablewrap{margin-top:var(--s-4);max-width:var(--measure);overflow-x:auto}
.ha-sec table{border-collapse:collapse;width:100%;font-size:var(--fs-small);text-align:left}
.ha-sec 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:10px}
.ha-sec th,.ha-sec td{border-top:var(--hairline) solid var(--rule);padding:10px 16px 10px 0;vertical-align:top;color:var(--ink-soft)}
.ha-sec thead th{border-top:var(--hairline) solid var(--ink);color:var(--ink);font-family:var(--font-body);font-weight:500;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase}
.ha-sec tbody tr:last-child th,.ha-sec tbody tr:last-child td{border-bottom:var(--hairline) solid var(--rule)}
.ha-sec tbody th{color:var(--ink);font-weight:500;font-family:var(--font-body)}
/* ————— colonne latérale ————— */
.ha-side{position:sticky;top:var(--s-4);font-size:var(--fs-small)}
.ha-side nav{border-top:var(--hairline) solid var(--ink);padding-top:var(--s-3)}
.ha-side ul{list-style:none;padding:0;margin:var(--s-2) 0 0}
.ha-side li{padding:7px 0;border-top:var(--hairline) solid var(--rule)}
.ha-side li:first-child{border-top:0}
.ha-side a{text-decoration:none;color:var(--ink-soft)}
.ha-side a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.24em}
.ha-side .box{margin-top:var(--s-5);border-top:var(--hairline) solid var(--ink);padding-top:var(--s-3)}
.ha-side .box p{margin-top:var(--s-2);color:var(--ink-soft)}
.ha-side .box a.g-btn{margin-top:var(--s-3)}
/* ————— fin d’article ————— */
.ha-related{margin-top:var(--s-7)}
.ha-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:0 0 var(--s-5)}
.ha-head .g-k{margin:0}
.ha-head span:last-child{font-size:var(--fs-small);color:var(--ink-faint)}
.ha-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.ha-rel{border-top:var(--hairline) solid var(--ink);padding-top:var(--s-3)}
.ha-rel .g-k{margin-bottom:var(--s-2)}
.ha-rel h3{font-size:22px;line-height:1.16;letter-spacing:var(--track-display);max-width:20ch}
.ha-rel h3 a{text-decoration:none}
.ha-rel h3 a:hover{text-decoration:underline;text-underline-offset:.2em}
.ha-rel p{margin-top:var(--s-2);color:var(--ink-soft);font-size:var(--fs-small);max-width:34ch}
/* ————— contact : la bande d’encre qui ferme la page (geste g-band) ————— */
.g-band{background:var(--band);color:var(--band-fg)}
.g-band .g-k{color:var(--band-soft)}
.g-band a{color:var(--band-fg)}
.g-band a:focus-visible{outline-color:var(--band-fg)}
.g-band .g-rule{border-color:var(--band-rule)}
.ha-final{margin-top:var(--gap-section);margin-inline:calc(50% - 50vw);padding:var(--s-8) calc(50vw - 50%) var(--s-7)}
.ha-final .inner{display:grid;grid-template-columns:6fr 5fr;gap:var(--s-7);align-items:start}
.ha-final .ha-say{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--track-display);max-width:18ch;color:var(--band-fg)}
.ha-final .lead{margin-top:var(--s-2);color:var(--band-soft);max-width:38ch}
.ha-mail{font-family:var(--font-display);font-size:clamp(26px,3vw,38px);line-height:1.1;letter-spacing:var(--track-display);text-decoration:none;border-bottom:var(--hairline) solid var(--band-fg);display:inline-block;padding-bottom:6px}
.ha-mail:hover{text-decoration:none;border-bottom-color:var(--band-soft)}
.ha-final .g-rule{margin:var(--s-4) 0 0}
.ha-final dl{margin:var(--s-4) 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px var(--s-3);font-size:var(--fs-small);color:var(--band-soft)}
.ha-final dt{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--band-fg)}
.ha-final dd{margin:0}
.ha-final + .g-footer{margin-top:0}
/* ————— footer (matches landing page) ————— */
.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:var(--case-label);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)}
@media (max-width:1023px){.g-footer-grid{grid-template-columns:repeat(3,1fr)}.g-footer-brand{grid-column:1/-1}}
/* ————— responsive ————— */
@media (max-width:1023px){
.ha-body{grid-template-columns:1fr;gap:var(--s-5)}
.ha-side{position:static;order:-1}
.ha-rel-grid{grid-template-columns:1fr;gap:var(--s-4)}
.ha-final .inner{grid-template-columns:1fr;gap:var(--s-5)}
.g-hatch,.ha-final{margin-top:var(--s-8)}
}
@media (max-width:719px){
.ab-crumb{padding-top:var(--s-4)}
.ha-mast{padding-top:var(--s-4)}
.ha-mast h1{font-size:clamp(32px,9vw,44px);max-width:none}
.ha-sec{margin-top:var(--s-6)}
.ha-sec h2{max-width:none}
.ha-sec ol li,.ha-sec ul li{display:block}
.ha-sec li .lab{display:block;margin-bottom:2px}
.g-hatch{height:56px}
.g-hatch .lbl{font-size:var(--fs-h4);padding:8px 18px}
.ha-final{padding-top:var(--s-6);padding-bottom:var(--s-6)}
.ha-final dl{grid-template-columns:1fr;gap:4px}
.ha-final dd{margin-bottom:10px}
.g-footer{margin-top:var(--s-7)}
.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}

/* ————— 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-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}

/* ————— 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)}


/* ————— Struktur der erzeugten Hilfeseiten (nachgetragen 2026-09-04) —————
   scripts/build-help.mjs erzeugt fuer ALLE Maerkte dieselbe Auszeichnung
   (.wrap, .art-head, .antwort, .faq, .fazit …). Nur de.css trug die passenden
   Regeln; die uebrigen fuenf Stylesheets stammten vom jeweiligen Prototyp und
   kannten die Klassen nicht. Sichtbar war das als Seite ganz ohne Rand: der Text
   klebte am linken Fensterrand, Kurzantwort und Fussnoten hatten weder Linie noch
   Abstand. Uebernommen sind nur Regeln zu Klassen, die dieses Stylesheet gar nicht
   kennt — jede vorhandene Regel des Marktes bleibt unangetastet, und alle Werte
   kommen aus den Tokens oben, also bleibt die Marke ihre eigene. */
.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}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.g-band .k{color:var(--band-soft)}
.art-head{padding-top:var(--s-6);padding-bottom:var(--s-5);border-bottom:var(--hairline) solid var(--rule)}
.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}
.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}
.art{display:grid;grid-template-columns:220px 1fr;gap:var(--s-6);padding:var(--s-6) 0 var(--s-5)}
.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}
.verwandt{padding:var(--s-6) 0}
.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}
.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 .btn-row{margin-top:var(--s-5)}
.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}
@media (max-width:1023px){.art{grid-template-columns:1fr;gap:var(--s-4)}}
@media (max-width:719px){.art-head{padding-top:var(--s-5)}.art-head .k{margin-top:var(--s-5)}.tabelle{font-size:13px}}