/* Hilfe-Center JP — 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/jp) ————— */
:root{
  --paper:#FAFAFA;--ink:#0A0A0A;--ink-soft:#595959;--ink-faint:#9E9E9E;
  --rule:#E2E2E2;--rule-strong:#0A0A0A;--well:#F2F2F2;--thumb:#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:120px;--gap-block:48px;
  --page-pad:clamp(20px,5vw,80px);--page-max:1280px;
  --hairline:1px;--control-h:52px;--control-h-sm:40px;--header-h:72px;

  --font-display:'Noto Serif JP',"Hiragino Mincho ProN","Yu Mincho",serif;
  --font-body:'Noto Sans JP',"Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --weight-display:500;
  --fs-h2:32px;--fs-h3:24px;--fs-h4:19px;--fs-lead:19.2px;--fs-body:16px;--fs-small:14px;--fs-label:12px;
  --fs-stat:44px;--fs-quote:32px;
  --lh-display:1.3;--lh-body:1.9;--lh-tight:1.5;
  --track-display:0.02em;--track-wordmark:0.04em;
  --measure:36em;
}
/* ————— 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;letter-spacing:var(--track-display)}
h1,h2,h3{line-break:strict;overflow-wrap:anywhere}
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,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-ic{flex:none}
.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;color:var(--ink-soft);margin-bottom:var(--s-2)}
.g-tnum{font-variant-numeric:tabular-nums}

/* ————— header (identical to 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;text-decoration:none;color:inherit}
.g-nav a:not(.g-btn):hover{text-decoration:underline;text-underline-offset:.3em}
.g-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:.3em}
.g-nav .g-btn{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)}

/* ————— 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}
.g-btn-row{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-5)}

/* ————— breadcrumb ————— */
.a-crumb{padding-top:var(--s-4);font-size:var(--fs-label);color:var(--ink-soft)}
.a-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.a-crumb li::after{content:'·';margin-left:10px;color:var(--ink-faint)}
.a-crumb li:last-child::after{content:''}
.a-crumb a{color:var(--ink-soft);text-decoration:none}
.a-crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.3em}

/* ————— hero: tategaki label + answer (the one vertical accent) ————— */
.a-hero{display:flex;gap:clamp(28px,4vw,56px);align-items:stretch;padding-top:var(--s-5);padding-bottom:var(--s-6)}
.a-hero-tate{border-right:var(--hairline) solid var(--rule-strong);padding-right:clamp(28px,4vw,56px);display:flex}
.a-tate{writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:.16em;margin:0;min-height:7em}
.a-hero-body{align-self:center;max-width:680px}
.a-hero-body .g-k::before{content:'';display:inline-block;width:22px;border-top:var(--hairline) solid var(--ink);vertical-align:middle;margin-right:10px}
.a-hero-body h1{font-size:clamp(25px,2.7vw,32px);line-height:1.55;max-width:24ch}
.a-answer{margin-top:var(--s-3);font-size:var(--fs-lead);line-height:1.85;max-width:var(--measure)}
.a-meta{margin-top:var(--s-4);padding-top:var(--s-2);border-top:var(--hairline) solid var(--rule);font-size:var(--fs-label);color:var(--ink-faint)}

/* ————— gestures of the brand (same declarations as theme/generated) ————— */
.g-stat{border-top:var(--hairline) solid var(--ink);padding-top:16px}
.g-stat-n{display:block;font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-stat);line-height:1}
.g-stat-l{display:block;margin-top:8px;color:var(--ink-soft);font-size:var(--fs-small)}
.g-quote{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-quote);line-height:var(--lh-tight);letter-spacing:var(--track-display);max-width:28ch}
.g-rule{border:0;border-top:var(--hairline) solid var(--rule);margin:0}
.g-band{background:var(--band);color:var(--band-fg)}
.g-band .g-k,.g-band p{color:var(--band-soft)}
.g-band .g-rule{border-color:var(--band-rule)}
.g-band a{color:var(--band-fg)}
.g-band .g-btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.g-band .g-btn--ghost{background:transparent;color:var(--band-fg);border-color:var(--band-rule)}
.g-band .g-btn--ghost:hover{opacity:1;box-shadow:inset 0 0 0 1px var(--band-fg)}
.g-band a:focus-visible,.g-band button:focus-visible{outline-color:var(--band-fg)}

/* ————— at a glance: the three figures the answer already gives ————— */
.a-glance{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}

/* ————— the one pulled sentence ————— */
.a-pull{margin:var(--s-6) 0;padding:var(--s-4) 0;border-top:var(--hairline) solid var(--ink);border-bottom:var(--hairline) solid var(--ink)}
/* the two clauses break as units, so no line ever splits パスワード */
.a-pull span{display:inline-block}
.a-sec .a-pull{color:var(--ink)}

/* ————— body sections ————— */
.a-body{max-width:var(--measure)}
.a-sec{margin-top:var(--s-7);border-top:var(--hairline) solid var(--rule-strong);padding-top:var(--s-4)}
.a-sec h2{font-size:var(--fs-h3);line-height:var(--lh-tight);max-width:26ch}
.a-sec p{margin-top:var(--s-3);color:var(--ink-soft)}
.a-steps{margin:var(--s-3) 0 0;padding:0;list-style:none;counter-reset:step}
.a-steps li{counter-increment:step;position:relative;padding:14px 0 14px 44px;border-bottom:var(--hairline) solid var(--rule);color:var(--ink-soft);font-size:var(--fs-small);line-height:1.9}
.a-steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:14px;font-family:var(--font-display);font-weight:var(--weight-display);font-variant-numeric:tabular-nums;color:var(--ink);font-size:var(--fs-small)}
.a-steps li b{font-weight:500;color:var(--ink)}
.a-note{margin-top:var(--s-3);border-left:var(--hairline) solid var(--ink);padding-left:var(--s-3);font-size:var(--fs-small)}

/* ————— table ————— */
.a-tablewrap{margin-top:var(--s-3);overflow-x:auto}
.a-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:1.8}
.a-table th,.a-table td{text-align:left;padding:12px 16px 12px 0;border-bottom:var(--hairline) solid var(--rule);vertical-align:top}
.a-table thead th{border-bottom:var(--hairline) solid var(--rule-strong);font-family:var(--font-body);font-weight:500;font-size:var(--fs-label);color:var(--ink-soft)}
.a-table tbody th{font-family:var(--font-display);font-weight:var(--weight-display);white-space:nowrap}

/* ————— flat placeholder ————— */
.a-demo{margin:var(--s-4) 0 0}
.a-demo .a-plate{margin-top:0}
.a-demo figcaption{margin-top:var(--s-1);font-size:var(--fs-label);color:var(--ink-faint);line-height:var(--lh-tight)}
.a-plate{margin-top:var(--s-4);background:var(--thumb);border:var(--hairline) solid var(--rule);aspect-ratio:16/9;display:grid;place-items:center;color:var(--ink-faint);font-size:12px;text-align:center;padding:16px}

/* ————— block heads that must NOT be H2 (page-wide H2 budget) ————— */
.a-blockhead{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--track-display);color:var(--ink)}

/* ————— related ————— */
.a-related{margin-top:var(--gap-section);border-top:var(--hairline) solid var(--rule-strong);padding-top:var(--s-6)}
.a-related-grid{margin-top:var(--s-5);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.a-related-grid article{border-top:var(--hairline) solid var(--rule);padding-top:var(--s-3)}
.a-related-grid .k{font-size:var(--fs-label);color:var(--ink-faint)}
.a-related-grid a{display:block;margin-top:10px;font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h4);line-height:1.6;text-decoration:none}
.a-related-grid a:hover{text-decoration:underline;text-underline-offset:.25em}
.a-related-grid p{margin-top:10px;color:var(--ink-soft);font-size:var(--fs-small)}

/* ————— the ink band that closes the article, as the landing page closes ————— */
.a-band{margin-top:var(--gap-section);padding:var(--s-8) var(--s-6);text-align:center}
.a-band .g-k{margin-bottom:var(--s-1)}
.a-band .a-blockhead{color:var(--band-fg);font-size:var(--fs-h3);margin-top:var(--s-1)}
.a-band>p{max-width:44ch;margin:var(--s-3) auto 0;font-size:var(--fs-small)}
.a-mail{font-family:var(--font-display);font-weight:var(--weight-display);font-size:clamp(22px,2.4vw,28px);line-height:1.4;letter-spacing:var(--track-display);text-decoration:none;border-bottom:var(--hairline) solid var(--band-fg);padding-bottom:4px;display:inline-block;margin-top:var(--s-5)}
.a-mail:hover{text-decoration:none}
.a-band .g-rule{max-width:220px;margin:var(--s-6) auto 0}
.a-band .note{margin:var(--s-4) auto 0;font-size:var(--fs-label);color:var(--band-soft);max-width:40ch}
.a-band .g-btn-row{justify-content:center}

/* ————— footer (identical to 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;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){
  .g-nav{display:none}
  .g-burger{display:grid}
  .g-footer-grid{grid-template-columns:repeat(3,1fr)}
  .g-footer-brand{grid-column:1/-1}
  .a-related{margin-top:var(--s-8)}
  .a-related-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .a-band{margin-top:var(--s-8)}
}
@media (max-width:719px){
  .a-hero{padding-top:var(--s-4);gap:24px}
  .a-hero-tate{padding-right:24px}
  .a-tate{font-size:24px;min-height:6em}
  .a-sec{margin-top:var(--s-6)}
  .a-glance{gap:var(--s-2)}
  .a-glance .g-stat-n{font-size:28px}
  .a-glance .g-stat-l{font-size:var(--fs-label);line-height:1.6}
  .a-pull{margin:var(--s-5) 0}
  .g-quote{font-size:24px}
  .a-band{padding:var(--s-7) var(--s-4)}
  .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)}