/* Hilfe-Center GB — 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/gb) ============ */
:root{
--paper:#FAFAFA;--ink:#0A0A0A;--ink-soft:#595959;--ink-faint:#9E9E9E;--rule:#E2E2E2;--rule-strong:#0A0A0A;--well:#F2F2F2;
--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:120px;--gap-block:44px;
--page-pad:clamp(20px,5vw,80px);--page-max:1280px;--prose-max:720px;
--hairline:1px;--control-h:52px;--control-h-sm:40px;--header-h:72px;
--font-display:'EB Garamond',serif;--font-body:'Libre Franklin',system-ui,sans-serif;
--weight-display:500;
--fs-h1:80px;--fs-h2:38px;--fs-h3:24px;--fs-h4:19px;--fs-lead:calc(17px * 1.2);--fs-body:17px;--fs-small:14px;--fs-label:12px;--fs-stat:44px;--fs-quote:32px;
--lh-display:1.05;--lh-body:1.6;--lh-tight:1.25;
--track-display:-0.01em;--track-label:.12em;
--measure:36em;
--photo-well:#E9E8E5;
}
/* ============ 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}
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:uppercase;color:var(--ink-soft)}
.g-ic{flex:none}
/* ============ header (as on the 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;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}}
/* ============ 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:background .2s ease,color .2s ease,box-shadow .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}
/* ============ shared furniture ============ */
.j-dblrule{border:0;border-top:var(--hairline) solid var(--rule-strong);position:relative;margin:var(--s-4) 0 0;height:5px}
.j-dblrule::after{content:'';position:absolute;left:0;right:0;top:3px;border-top:var(--hairline) solid var(--rule-strong)}
.j-runhead{text-align:center;padding-top:var(--s-4)}
.j-runhead .line{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.j-runhead .line a{color:inherit;text-decoration:none}
.j-runhead .line a:hover{text-decoration:underline;text-underline-offset:.3em}
.j-runhead .line b{color:var(--ink);font-weight:500}
/* ============ article masthead ============ */
.d-head{max-width:var(--prose-max);margin:0 auto;padding-top:var(--s-6);text-align:center}
.d-head h1{margin-top:var(--s-3);font-size:clamp(34px,4.4vw,50px);line-height:var(--lh-display);letter-spacing:var(--track-display);max-width:22ch;margin-left:auto;margin-right:auto}
.a-standing{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:10px 0;border-bottom:var(--hairline) solid var(--rule);font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);max-width:var(--prose-max);margin:0 auto}
@media (max-width:719px){.a-standing{justify-content:center;text-align:center}}
/* ============ the answer, first thing on the page ============ */
.d-answer{max-width:var(--prose-max);margin:var(--s-5) auto 0;border-top:var(--hairline) solid var(--rule-strong);border-bottom:var(--hairline) solid var(--rule-strong);padding:var(--s-4) 0}
.d-answer p{font-family:var(--font-display);font-size:clamp(20px,2.4vw,24px);line-height:1.45;letter-spacing:var(--track-display)}
.d-answer .g-k{margin-bottom:var(--s-2)}
/* ============ article body ============ */
.d-body{max-width:var(--prose-max);margin:0 auto}
.d-sec{padding-top:var(--s-6)}
.d-sec h2{font-size:clamp(26px,3vw,32px);line-height:var(--lh-tight);letter-spacing:var(--track-display);max-width:24ch}
.d-sec h2 + p{margin-top:var(--s-3)}
.d-sec p + p{margin-top:1em}
.d-sec p{max-width:34em}
.d-steps{list-style:none;counter-reset:step;margin:var(--s-4) 0 0;padding:0;border-top:var(--hairline) solid var(--rule)}
.d-steps li{counter-increment:step;padding:var(--s-3) 0 var(--s-3) 56px;border-bottom:var(--hairline) solid var(--rule);position:relative}
.d-steps li::before{content:counter(step);position:absolute;left:0;top:var(--s-3);font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.2;color:var(--ink-faint)}
.d-steps b{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h4);display:block}
.d-steps span{display:block;margin-top:4px;color:var(--ink-soft);font-size:15px}
.d-fig{margin:var(--s-5) 0 0;border:var(--hairline) solid var(--rule);padding:10px}
.d-fig .ph{aspect-ratio:16/9;background:var(--photo-well);display:grid;place-items:center;color:var(--ink-faint);font-size:12px;text-align:center;padding:12px;line-height:1.4}
.d-fig figcaption{margin-top:10px;font-family:var(--font-display);font-style:italic;font-size:var(--fs-small);color:var(--ink-soft);text-align:center}
.d-list{margin:var(--s-3) 0 0;padding-left:1.1em;max-width:34em}
.d-list li{padding:4px 0}
/* ============ table ============ */
.d-table-wrap{margin-top:var(--s-4);overflow-x:auto}
table.d-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
table.d-table th,table.d-table td{text-align:left;padding:12px 16px 12px 0;border-bottom:var(--hairline) solid var(--rule);vertical-align:top}
table.d-table 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)}
table.d-table td:last-child,table.d-table th:last-child{padding-right:0;color:var(--ink-soft)}
/* ============ faq ============ */
.d-faq{margin-top:var(--s-4);border-top:var(--hairline) solid var(--rule-strong)}
.d-faq .qa{padding:var(--s-3) 0;border-bottom:var(--hairline) solid var(--rule)}
.d-faq h3{font-size:var(--fs-h4);line-height:var(--lh-tight);font-family:var(--font-body);font-weight:500}
.d-faq p{margin-top:8px;color:var(--ink-soft);font-size:15px;max-width:34em}
/* ============ closing block ============ */
.d-close{max-width:var(--prose-max);margin:var(--s-7) auto 0}
.d-related{margin-top:var(--s-3);border-top:var(--hairline) solid var(--rule-strong);list-style:none;padding:0}
.d-related li{border-bottom:var(--hairline) solid var(--rule);padding:14px 0}
.d-related a{font-family:var(--font-display);font-size:var(--fs-h4);text-decoration:none}
.d-related a:hover{text-decoration:underline;text-underline-offset:.2em}
.d-related span{display:block;color:var(--ink-soft);font-size:var(--fs-small);margin-top:2px}
/* ============ the brand's gestures (as on the landing page) ============ */
/* Ink band — the paper turns to ink at the point the reader ran out of answers. */
.g-band{background:var(--band);color:var(--band-fg)}
.g-band .g-k,.g-band p{color:var(--band-soft)}
.g-band a{color:var(--band-fg)}
.g-band .g-rule{border-color:var(--band-rule)}
/* Hairline rule — the divider inside the band. */
.g-rule{border:0;border-top:var(--hairline) solid var(--rule);margin:0}
/* Stat — a figure set under a rule. Orientation before the reading starts;
   every number here is one the article itself states. */
.g-statband{display:grid;grid-template-columns:repeat(3,minmax(0,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:var(--fs-stat);line-height:1;font-variant-numeric:tabular-nums}
.g-stat-l{display:block;margin-top:8px;color:var(--ink-soft);font-size:var(--fs-small);line-height:1.4}
/* Pull quote — the one sentence the article exists to deliver. */
.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;margin:0}
.d-quote{margin:var(--s-5) 0;padding:var(--s-4) 0 calc(var(--s-4) + 4px);border-top:var(--hairline) solid var(--rule-strong);border-bottom:var(--hairline) solid var(--rule-strong)}
/* Hatched register — a printed seam where the page changes mode.
   The hatching is an inline SVG pattern, not a gradient: the help centre
   forbids gradients, and a 1px diagonal stroke is the same mark anyway. */
.g-hatch{position:relative;height:72px;border-top:var(--hairline) solid var(--rule-strong);border-bottom:var(--hairline) solid var(--rule-strong);overflow:hidden}
.g-hatch svg{position:absolute;inset:0;width:100%;height:100%}
.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}
/* ============ where the gestures sit on this page ============ */
.d-orient{max-width:var(--prose-max);margin:var(--s-5) auto 0}
.d-hatch{margin-top:var(--s-6)}
.d-band{margin-top:var(--s-6);padding:var(--s-7) var(--s-6);text-align:center}
.d-band .g-k{display:block;margin-bottom:var(--s-3)}
.d-band .t{font-family:var(--font-display);font-weight:var(--weight-display);font-size:calc(var(--fs-h2) * 1.15);line-height:var(--lh-display);letter-spacing:var(--track-display);color:var(--band-fg);max-width:18ch;margin:0 auto}
.d-band p{margin:var(--s-3) auto 0;max-width:46ch;font-size:15px}
.d-band .addr{margin-top:var(--s-4);font-family:var(--font-display);font-size:clamp(24px,3.2vw,34px);letter-spacing:var(--track-display);color:var(--band-fg);max-width:none}
.d-band .addr a{text-decoration:none;border-bottom:var(--hairline) solid var(--band-soft)}
.d-band .addr a:hover{border-bottom-color:var(--band-fg)}
.d-band .g-rule{margin:var(--s-5) auto 0;max-width:520px}
.d-band .small{font-size:var(--fs-small)}
@media (max-width:719px){.d-band{padding:var(--s-6) var(--s-4)}.g-statband{grid-template-columns:1fr}.d-head{padding-top:var(--s-5)}.d-sec{padding-top:var(--s-5)}}
/* ============ footer (as on the 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: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)}
@media (max-width:1023px){.g-footer-grid{grid-template-columns:repeat(3,1fr)}.g-footer-brand{grid-column:1/-1}}
@media (max-width:719px){.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}

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