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

/* ── tokens (copied from design/systems/out2/us) ────────────────────────── */
:root{
  --paper:#FAFAFA;--ink:#0A0A0A;--ink-soft:#595959;--ink-faint:#9E9E9E;
  --rule:#E2E2E2;--rule-strong:#0A0A0A;--well:#F2F2F2;--placeholder:#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:136px;--gap-block:52px;
  --page-pad:clamp(20px,5vw,80px);--page-max:1280px;
  --hairline:1px;--control-h:52px;--control-h-sm:40px;--header-h:72px;
  --font-display:'Instrument Serif',serif;
  --font-body:'Inter',system-ui,sans-serif;
  --weight-display:400;
  --fs-display:96px;--fs-h2:44px;--fs-h3:24px;--fs-body:17px;--fs-small:14px;--fs-label:12px;
  --fs-stat:44px;--fs-quote:32px;
  --lh-display:0.98;--lh-body:1.6;--lh-tight:1.25;
  --track-display:-0.02em;--track-label:.12em;--track-wordmark:-0.02em;
}
/* ── base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;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}
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}
.g-ic{flex:none}
.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)}
/* ── 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-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 .login{text-transform:none;letter-spacing:0}
.g-nav a.g-btn{color:var(--button-fg);font-size:14px;letter-spacing:0;text-transform: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);border-radius:0}
.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 .18s ease}
.g-btn:hover{opacity:.88}.g-btn:active{opacity:.75}
.g-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--paper)}
.g-btn--sm{min-height:var(--control-h-sm);padding:0 18px;font-size:14px}
@media (max-width:1023px){.g-nav{display:none}.g-burger{display:grid}}
/* ── article head ───────────────────────────────────────────────────────── */
.art-head{padding:var(--s-6) 0 var(--s-4);border-bottom:var(--hairline) solid var(--rule-strong)}
.art-head .crumb{margin-bottom:var(--s-3)}
.art-head .crumb a{color:var(--ink);text-decoration:none}
.art-head .crumb a:hover{text-decoration:underline}
.art-head h1{font-size:clamp(40px,5.6vw,76px);line-height:var(--lh-display);letter-spacing:var(--track-display);max-width:20ch}
.art-head .meta{margin-top:var(--s-3);font-size:var(--fs-small);color:var(--ink-faint)}
.art-head .byline{margin-top:var(--s-2);max-width:62ch}
.art-head .byline a{color:inherit}
/* ── article body ───────────────────────────────────────────────────────── */
.art{display:grid;grid-template-columns:minmax(0,68ch) 300px;gap:var(--s-7);padding:var(--s-5) 0 var(--s-6);align-items:start}
.answer{border:var(--hairline) solid var(--ink);padding:var(--s-4)}
.answer .k{margin-bottom:var(--s-2)}
.answer p{font-size:calc(17px * 1.2);max-width:56ch}
.art h2{margin-top:var(--s-6);font-size:clamp(28px,3.2vw,40px);line-height:var(--lh-tight);letter-spacing:var(--track-display);max-width:24ch}
.art h2 + p{margin-top:var(--s-3)}
.art p + p{margin-top:var(--s-3)}
.art .body p{max-width:66ch;color:var(--ink)}
.art .body p.soft{color:var(--ink-soft)}
.numbered{list-style:none;margin:var(--s-4) 0 0;padding:0;max-width:66ch}
.numbered li{border-top:var(--hairline) solid var(--rule);padding:14px 0;display:grid;grid-template-columns:44px 1fr;gap:var(--s-2);align-items:baseline}
.numbered li:last-child{border-bottom:var(--hairline) solid var(--rule)}
.numbered .no{font-family:var(--font-display);font-size:19px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.plainlist{margin:var(--s-3) 0 0;padding-left:1.1em;max-width:66ch}
.plainlist li{padding:5px 0}
/* ── table ──────────────────────────────────────────────────────────────── */
.tbl-wrap{margin-top:var(--s-4);overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--fs-small)}
caption{text-align:left;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);padding-bottom:12px}
th,td{text-align:left;padding:12px 16px 12px 0;border-top:var(--hairline) solid var(--rule);vertical-align:top}
thead th{border-top:var(--hairline) solid var(--rule-strong);font-weight:500;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
tbody tr:last-child td{border-bottom:var(--hairline) solid var(--rule)}
/* ── figure ─────────────────────────────────────────────────────────────── */
figure{margin:var(--s-4) 0 0}
.shot--demo{aspect-ratio:16/9}
.shot{background:var(--placeholder);border:var(--hairline) solid var(--rule);aspect-ratio:3/2;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}
figcaption{margin-top:10px;font-size:var(--fs-small);color:var(--ink-faint)}
figure + p{margin-top:var(--s-3)}
/* ── brand gestures · same tokens the landing page composes with ────────── */
/* stat trio — orientation right under the answer: what this costs a guest */
.g-statband{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);margin:var(--s-4) 0 0;max-width:66ch}
.g-stat{border-top:var(--hairline) solid var(--ink);padding-top:16px}
.g-stat-n{font-family:var(--font-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);max-width:22ch}
/* pull quote — breaks the measure to the left, for the 1 sentence that matters */
.pull{margin:var(--s-5) 0 var(--s-4);margin-inline-start:calc(-1 * clamp(0px,2.6vw,44px));padding:var(--s-4) 0;border-top:var(--hairline) solid var(--rule-strong);border-bottom:var(--hairline) solid var(--rule-strong)}
.g-quote{font-family:var(--font-display);font-style:italic;font-size:var(--fs-quote);line-height:var(--lh-tight);letter-spacing:var(--track-display);max-width:22ch}
.pull .src{display:block;margin-top:var(--s-2);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
/* hatched frame — the brand's way of setting an image apart, here the recording */
.g-hatchframe{position:relative;max-width:calc(100% - 20px)}
.g-hatchframe::before{content:'';position:absolute;inset:0;transform:translate(18px,18px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M0,9 L9,0 M-1,1 L1,-1 M8,10 L10,8' stroke='%230A0A0A' stroke-opacity='.14' stroke-width='1' fill='none'/%3E%3C/svg%3E");border:var(--hairline) solid var(--rule);z-index:0}
.g-hatchframe>*{position:relative;z-index:1}
/* full-bleed ink band — the way every page of this brand ends */
.g-band{background:var(--band);color:var(--band-fg);margin:var(--s-7) 0 0;margin-inline:calc(50% - 50vw);padding:var(--s-7) 0}
.g-band .bandwrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:start}
.g-band .k{color:var(--band-soft)}
.g-band a{color:var(--band-fg)}
.g-band a:focus-visible{outline-color:var(--band-fg)}
.g-band .bandhead{font-family:var(--font-display);font-weight:var(--weight-display);margin-top:var(--s-2);font-size:clamp(32px,4.2vw,56px);line-height:var(--lh-display);letter-spacing:var(--track-display);max-width:16ch;color:var(--band-fg)}
.g-band .mail{display:inline-block;margin-top:var(--s-3);font-family:var(--font-display);font-size:clamp(26px,3.2vw,40px);letter-spacing:var(--track-display);text-decoration:none;border-bottom:var(--hairline) solid var(--band-fg);padding-bottom:4px;transition:opacity .18s ease}
.g-band .mail:hover{opacity:.62}
.g-band dl{margin:0}
.g-band dt{border-top:var(--hairline) solid var(--band-rule);padding-top:12px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--band-soft)}
.g-band dd{margin:0 0 var(--s-3);padding-bottom:12px;color:var(--band-fg);font-size:var(--fs-small)}
/* ── side rail ──────────────────────────────────────────────────────────── */
.rail{position:sticky;top:var(--s-4);border-top:var(--hairline) solid var(--rule-strong);padding-top:var(--s-3)}
.rail ul{list-style:none;margin:var(--s-2) 0 0;padding:0}
.rail li{border-top:var(--hairline) solid var(--rule);padding:10px 0}
.rail a{font-size:15px;text-decoration:none}
.rail a:hover{text-decoration:underline}
.rail .g-btn{margin-top:var(--s-3);width:100%}
/* ── end of article ─────────────────────────────────────────────────────── */
.art-end{border-top:var(--hairline) solid var(--rule-strong);padding:var(--s-5) 0 0}
.related{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s-4)}
.related li{border-top:var(--hairline) solid var(--rule)}
.related a{display:block;padding:var(--s-2) 0 var(--s-4);text-decoration:none;transition:opacity .18s ease}
.related a:hover{opacity:.62}
.related h3{font-size:19px;line-height:var(--lh-tight);letter-spacing:var(--track-display)}
.related p{margin-top:6px;font-size:var(--fs-small);color:var(--ink-soft)}
/* ── footer (matches landing page) ──────────────────────────────────────── */
.g-footer{border-top:var(--hairline) solid var(--rule);margin-top:var(--s-7);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)}
/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .g-footer-grid{grid-template-columns:repeat(3,1fr)}
  .g-footer-brand{grid-column:1/-1}
  .art{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .rail{position:static}
  .related{grid-template-columns:1fr}
  .g-band .bandwrap{grid-template-columns:1fr;gap:var(--s-4)}
}
@media (max-width:719px){
  .art-head{padding-top:var(--s-5)}
  .numbered li{grid-template-columns:1fr;gap:4px}
  .g-statband{grid-template-columns:1fr;gap:var(--s-3)}
  .pull{margin-inline-start:0}
  .g-band{padding:var(--s-6) 0}
  .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. */
:root{--fs-lead:20.4px;}
.tnum{font-variant-numeric:tabular-nums}
.g-btn--ghost{background:transparent;color:var(--ink)}
.g-btn--ghost:hover{opacity:1;box-shadow:inset 0 0 0 1px var(--ink)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.g-rule{border:0;border-top:var(--hairline) solid var(--rule);margin:0}
.g-band .inner{max-width:calc(var(--page-max) - 2 * var(--page-pad));margin:0 auto}
.g-band .g-rule{border-color:var(--band-rule)}
.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)}
.crumb .sep{margin:0 10px;color:var(--ink-faint)}
.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}
.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}
.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 .btn-row{margin-top:var(--s-5)}
.thema .lead{margin-top:12px;color:var(--ink-soft);font-size:var(--fs-small);max-width:34ch}
@media (max-width:719px){.tabelle{font-size:13px}}
/* Lesbarkeit Artikelkoerper (2026-09-04): h2 erbten margin:0 aus dem Reset und
   standen ohne Abstand direkt am vorherigen Absatz; 22ch brach jede laengere
   Ueberschrift in drei Zeilen um. Abstand oben, volle Breite. */
.art-body h2{margin-top:var(--s-5);max-width:44ch}