/* Aus Winku/pakete/design/dist/winku.css — mit werkzeug/winku-design-holen.js geholt, nicht von Hand ändern. */
/* ERZEUGT aus pakete/design — nicht von Hand ändern. */
@layer reset, tokens, basis, marke, szene, hilfen;
@layer tokens {
  :root {
    --schrift-text: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --schrift-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --stufe-0: clamp(0.97rem, 0.958rem + 0.052vw, 1rem);
    --stufe-1: clamp(1.06rem, 1.025rem + 0.157vw, 1.15rem);
    --stufe-2: clamp(1.2rem, 1.122rem + 0.348vw, 1.4rem);
    --stufe-3: clamp(1.45rem, 1.293rem + 0.696vw, 1.85rem);
    --stufe-4: clamp(1.8rem, 1.487rem + 1.391vw, 2.6rem);
    --stufe-5: clamp(2.2rem, 1.652rem + 2.435vw, 3.6rem);
    --stufe-6: clamp(2.6rem, 1.817rem + 3.478vw, 4.6rem);
    --stufe--2: clamp(0.72rem, 0.708rem + 0.052vw, 0.75rem);
    --stufe--1: clamp(0.84rem, 0.826rem + 0.061vw, 0.875rem);
    --abstand-0: 0;
    --abstand-1: .25rem;
    --abstand-2: .5rem;
    --abstand-3: .75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2rem;
    --abstand-7: 3rem;
    --abstand-8: 4rem;
    --abstand-9: 6rem;
    --abstand-10: 8rem;
    --radius-klein: .5rem;
    --radius-feld: .75rem;
    --radius-mittel: .875rem;
    --radius-karte: 1.125rem;
    --radius-gross: 1.75rem;
    --radius-rund: 999px;
    --dauer-schnell: 140ms;
    --dauer-mittel: 260ms;
    --dauer-langsam: 600ms;
    --kurve: cubic-bezier(.2,.7,.2,1);
    --kurve-raus: cubic-bezier(.16,1,.3,1);
    --kurve-feder: cubic-bezier(.34,1.56,.64,1);
    --ebene-basis: 0;
    --ebene-erhoben: 10;
    --ebene-leiste: 40;
    --ebene-kopf: 50;
    --ebene-menue: 60;
    --ebene-dialog: 200;
    --ebene-meldung: 300;
    --breite-text: 46rem;
    --breite-inhalt: 75rem;
    --breite-weit: 88rem;
    --seitenrand: clamp(1rem, 4vw, 2.5rem);
    --kopf-hoehe: 4.25rem;
    --strich: 1px;
    --leuchten: .55;
    --grund: #0b0f19;
    --grund-tief: #07090f;
    --flaeche: #121726;
    --flaeche-2: #171d2e;
    --flaeche-3: #1e2538;
    --flaeche-glas: rgb(18 23 38 / .72);
    --rand: #222a3d;
    --rand-stark: #2e3750;
    --rand-hell: rgb(255 255 255 / .08);
    --text: #e5e7eb;
    --text-stark: #ffffff;
    --text-leise: #9ca3af;
    --text-zart: #4b5570;
    --marke-1: #7c3aed;
    --marke-2: #06b6d4;
    --marke-3: #f472b6;
    --akzent: #a375f2;
    --akzent-2: #06b6d4;
    --auf-marke: #ffffff;
    --gut: #22c55e;
    --gut-text: #86efac;
    --warnung: #f59e0b;
    --warnung-text: #fcd34d;
    --fehler: #ef4444;
    --fehler-text: #fca5a5;
    --info-text: #93c5fd;
    --stern: #f59e0b;
    --logo-1: #7c3aed;
    --logo-2: #06b6d4;
    --marke-twitch: #9146ff;
    --marke-discord: #5865f2;
    --trustpilot: #00b67a;
    --trustpilot-knopf: #00815a;
    --keks: #d59b5e;
    --keks-kante: #a96b37;
    --keks-schoko: #4a2d1c;
    --fokus: #22d3ee;
    --auswahl: rgb(124 58 237 / .45);
    --raster-linie: rgb(255 255 255 / .045);
    --schatten: 0 0% 0%;
    --knopf-1: #7c3aed;
    --knopf-2: #047f94;
    --farbschema: dark;
  }
}
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  body { min-height: 100dvh; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p, li, figcaption { text-wrap: pretty; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

@layer basis {
  :root {
    color-scheme: dark;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift-text);
    font-size: 100%;
    font-optical-sizing: auto;
    font-feature-settings: "cv11", "ss01";
    line-height: 1.6;
    scroll-padding-top: calc(var(--kopf-hoehe) + 4.5rem);
    accent-color: var(--marke-1);
    -webkit-tap-highlight-color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } }

  body { font-size: var(--stufe-0); overflow-x: clip; }

  h1, h2, h3, h4 { color: var(--text-stark); font-weight: 800; line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; }
  h1 { font-size: var(--stufe-6); letter-spacing: -0.03em; line-height: 1.04; }
  h2 { font-size: var(--stufe-5); letter-spacing: -0.028em; }
  h3 { font-size: var(--stufe-1); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
  h4 { font-size: var(--stufe-0); font-weight: 700; letter-spacing: -0.01em; }

  a { color: inherit; text-decoration: none; }
  /* Links im Fließtext unterstrichen — nur in ausgewiesenem Fließtext, nicht in Karten, Menüs, Listen. */
  :where(.prosa) a { color: var(--akzent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
  :where(.prosa) a:hover { color: var(--text-stark); }

  code, kbd, samp, pre { font-family: var(--schrift-mono); font-size: .9em; }
  kbd { padding: .1em .45em; border: 1px solid var(--rand-stark); border-bottom-width: 2px; border-radius: .35rem; background: var(--flaeche-2); }
  hr { border: 0; border-top: var(--strich) solid var(--rand); }
  ::selection { background: var(--auswahl); color: var(--text-stark); }
  :focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: .4rem; }

  small { font-size: var(--stufe--1); }
  strong, b { font-weight: 650; color: var(--text-stark); }

  html { scrollbar-color: var(--rand-stark) transparent; }
}

/*
 * MARKE — die wiedererkennbaren Winku-Elemente, geschärft.
 * Alles nutzt nur Tokens. --marke-1/-2/-3, --knopf-1/-2 und --akzent kommen je Dienst aus der
 * Datenbank (Logofarben) — dieselben Bausteine sehen auf jeder Dienstseite eigen aus.
 */
@property --marke-1 { syntax: "<color>"; inherits: true; initial-value: #7c3aed; }
@property --marke-2 { syntax: "<color>"; inherits: true; initial-value: #06b6d4; }
@property --marke-3 { syntax: "<color>"; inherits: true; initial-value: #f472b6; }
@property --licht-x { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --licht-y { syntax: "<percentage>"; inherits: true; initial-value: 30%; }

@layer marke {
  /* ── Aura: Leuchtfelder + Raster hinter der Seite ─────────────────────────────────────────
     Die drei Felder tragen die Markenfarben der Seite. Beim Wechsel (Startseite: beim Scrollen an
     Dienst-Karten vorbei) gleiten die Farben über, weil die Variablen registriert sind. Das Raster
     ist nahe am Mauszeiger etwas heller — man „leuchtet" es an. */
  .aura { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
  .aura::before, .aura::after, .aura > span {
    content: ""; position: absolute; border-radius: 50%; filter: blur(110px); opacity: var(--leuchten);
    transition: --marke-1 1.2s var(--kurve), --marke-2 1.2s var(--kurve), --marke-3 1.2s var(--kurve);
  }
  .aura::before { inline-size: 46rem; block-size: 46rem; inset: -18rem auto auto -14rem; background: var(--marke-1); }
  .aura::after { inline-size: 40rem; block-size: 40rem; inset: auto -14rem -16rem auto; background: var(--marke-2); opacity: calc(var(--leuchten) * .8); }
  .aura > span { inline-size: 30rem; block-size: 30rem; inset: 38% auto auto 52%; background: var(--marke-3); opacity: calc(var(--leuchten) * .35); }
  .aura > i {
    position: absolute; inset: 0;
    background-image: linear-gradient(var(--raster-linie) 1px, transparent 1px), linear-gradient(90deg, var(--raster-linie) 1px, transparent 1px);
    background-size: 64px 64px; background-position: -1px -1px;
    mask-image: radial-gradient(38rem 30rem at var(--licht-x) var(--licht-y), #000 0%, rgb(0 0 0 / .35) 45%, transparent 75%);
    transition: --licht-x .5s var(--kurve-raus), --licht-y .5s var(--kurve-raus);
  }
  @media (prefers-reduced-motion: no-preference) {
    .aura::before { animation: aura-treiben 26s var(--kurve) infinite alternate; }
    .aura::after { animation: aura-treiben 31s var(--kurve) infinite alternate-reverse; }
    .aura > span { animation: aura-treiben 22s var(--kurve) infinite alternate; }
  }
  @keyframes aura-treiben { to { translate: 6rem 4rem; scale: 1.12; } }

  /* ── Verlaufstext: Schlüsselwörter in Markenfarben, mit langsamem Glanz ─────────────────── */
  .verlauf-text {
    background: linear-gradient(100deg, var(--marke-1) 0%, var(--marke-3) 38%, var(--marke-2) 70%, var(--marke-1) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-block-end: .06em;
  }
  @media (prefers-reduced-motion: no-preference) {
    .verlauf-text { animation: verlauf-glanz 9s linear infinite; }
  }
  @keyframes verlauf-glanz { to { background-position: -220% 0; } }

  /* ── Pille mit Punkt (Zustand, Version, Art) ────────────────────────────────────────────── */
  .pille {
    --ton: var(--text-leise); --ton-grund: var(--flaeche-2); --ton-rand: var(--rand);
    display: inline-flex; align-items: center; gap: .45em; padding: .28em .75em; border-radius: var(--radius-rund);
    font-size: var(--stufe--2); font-weight: 600; line-height: 1.2; letter-spacing: .01em; white-space: nowrap;
    /* Getönte Fläche ÜBER der Unterlage: sitzt die Pille auf einer Linie (--unterlage setzen), scheint nichts durch */
    color: var(--ton); background: linear-gradient(var(--ton-grund), var(--ton-grund)), var(--unterlage, transparent);
    border: var(--strich) solid var(--ton-rand);
  }
  .pille[data-ton="gut"] { --ton: var(--gut-text); --ton-grund: rgb(34 197 94 / .12); --ton-rand: rgb(34 197 94 / .3); }
  .pille[data-ton="warnung"] { --ton: var(--warnung-text); --ton-grund: rgb(245 158 11 / .12); --ton-rand: rgb(245 158 11 / .32); }
  .pille[data-ton="fehler"] { --ton: var(--fehler-text); --ton-grund: rgb(239 68 68 / .12); --ton-rand: rgb(239 68 68 / .32); }
  .pille[data-ton="info"] { --ton: var(--info-text); --ton-grund: rgb(59 130 246 / .12); --ton-rand: rgb(59 130 246 / .32); }
  .pille[data-ton="marke"] { --ton: var(--akzent); --ton-grund: color-mix(in srgb, var(--marke-1) 14%, transparent); --ton-rand: color-mix(in srgb, var(--marke-1) 38%, transparent); }
  .punkt { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--punkt, var(--gut)); flex: none; box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--punkt, var(--gut)) 22%, var(--unterlage, transparent)); }
  .punkt[data-ton="warnung"] { --punkt: var(--warnung); }
  .punkt[data-ton="fehler"] { --punkt: var(--fehler); }
  .punkt[data-ton="aus"] { --punkt: var(--text-zart); box-shadow: none; }
  @media (prefers-reduced-motion: no-preference) {
    .punkt[data-puls] { animation: punkt-puls 2.2s ease-in-out infinite; }
  }
  @keyframes punkt-puls { 50% { box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--punkt, var(--gut)) 0%, transparent); } }

  /* ── Karte mit Lichtschein unter der Maus ───────────────────────────────────────────────── */
  .karte {
    position: relative; isolation: isolate; border-radius: var(--radius-karte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--flaeche) 94%, var(--text)) 0%, var(--flaeche) 40%);
    border: var(--strich) solid var(--rand);
    transition: transform var(--dauer-mittel) var(--kurve), border-color var(--dauer-mittel) var(--kurve), box-shadow var(--dauer-mittel) var(--kurve);
  }
  .karte::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none;
    background: radial-gradient(34rem circle at var(--zx, 50%) var(--zy, 0%), color-mix(in srgb, var(--marke-1) 20%, transparent), transparent 42%);
    transition: opacity var(--dauer-mittel) var(--kurve);
  }
  /* Rand, der unter dem Zeiger in Markenfarbe aufleuchtet */
  .karte::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
    background: radial-gradient(18rem circle at var(--zx, 50%) var(--zy, 0%), var(--marke-2), color-mix(in srgb, var(--marke-1) 60%, transparent) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: opacity var(--dauer-mittel) var(--kurve);
  }
  .karte:is(:hover, :focus-within)::before, .karte:is(:hover, :focus-within)::after { opacity: 1; }
  a.karte:hover, .karte[data-heben]:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--marke-1) 55%, transparent); }

  /* ── Symbolkachel (Funktionen, Highlights) ──────────────────────────────────────────────── */
  .symbolkachel {
    display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius-feld); flex: none;
    color: var(--text-stark);
    background: linear-gradient(135deg, color-mix(in srgb, var(--marke-1) 32%, transparent), color-mix(in srgb, var(--marke-2) 26%, transparent));
    border: var(--strich) solid var(--rand-hell);
  }

  /* ── Einblenden beim Scrollen (JS setzt data-sichtbar; ohne JS ist alles sichtbar) ─────── */
  @media (prefers-reduced-motion: no-preference) {
    .js [data-einblenden]:not([data-sichtbar]) { opacity: 0; translate: 0 1.5rem; }
    .js [data-einblenden] { transition: opacity .8s var(--kurve-raus), translate .8s var(--kurve-raus); transition-delay: calc(var(--i, 0) * 60ms); }
  }

  /* ── Programmfenster um Bildschirmfotos ─────────────────────────────────────────────────── */
  .fenster {
    position: relative; border-radius: var(--radius-mittel); overflow: hidden;
    background: var(--grund-tief); border: var(--strich) solid var(--rand-stark);
    box-shadow: 0 1px 0 0 var(--rand-hell) inset, 0 40px 100px -40px color-mix(in srgb, var(--marke-1) 45%, transparent), 0 24px 60px -30px hsl(var(--schatten) / .8);
  }
  .fenster-leiste {
    display: flex; align-items: center; gap: .6rem; block-size: 2.2rem; padding-inline: .8rem;
    font-size: var(--stufe--2); color: var(--text-leise); background: var(--flaeche); border-block-end: var(--strich) solid var(--rand);
  }
  .fenster-leiste img { inline-size: 1rem; block-size: 1rem; border-radius: .25rem; }
  .fenster-knoepfe { margin-inline-start: auto; display: flex; gap: 1.05rem; color: var(--text-zart); }
  .fenster-adresse {
    flex: 1; min-inline-size: 0; max-inline-size: 26rem; margin-inline: auto; padding: .2rem .8rem; border-radius: var(--radius-rund);
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--grund-tief); border: var(--strich) solid var(--rand); white-space: nowrap; overflow: hidden;
  }
  .fenster-adresse svg { flex: none; opacity: .7; }
  .fenster > img { display: block; inline-size: 100%; block-size: auto; }
  .fenster figcaption { padding: .7rem 1rem; font-size: var(--stufe--1); color: var(--text-leise); border-block-start: var(--strich) solid var(--rand); background: var(--flaeche); }

  /* Bühne: Fenster kommt schräg aus der Tiefe und richtet sich beim Scrollen auf */
  .buehne-3d { perspective: 1600px; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .buehne-3d > * { transform-origin: 50% 0%; animation: aufrichten linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    }
  }
  @keyframes aufrichten {
    from { transform: rotateX(16deg) scale(.94) translateY(1.5rem); opacity: .72; }
    to { transform: none; opacity: 1; }
  }

  /* ── Nahtlose Seitenübergänge (Logo und Name gleiten von der Karte in den Hero) ─────────── */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
  ::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--kurve-raus); }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}

/*
 * SZENE — gezeichnete Werbebanner („Plakate") und Erlebnisse aus Winku-Bausteinen: Karten, Zeilen, Chips,
 * Punkte. Keine Screenshots, keine Bilder — alles Tokens, darum zieht ein Rebrand mit. Farben je Dienst
 * über --marke-1/-2/-3. Größen in em: die Szene skaliert mit ihrem Rahmen (Container-Einheiten).
 *
 * Bewegung: jede Szene läuft nur, solange sie im Bild ist (data-laeuft, gesetzt per Skript), und steht
 * bei prefers-reduced-motion still. Grundregel: Die Ruhestellung jedes Elements IST das fertige Bild —
 * Keyframes erzählen nur den Weg dorthin.
 */
@layer szene {
  .szene {
    position: relative; isolation: isolate; overflow: hidden; container-type: size;
    background:
      radial-gradient(120% 95% at 0% 100%, color-mix(in srgb, var(--marke-1) 34%, transparent), transparent 62%),
      radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--marke-2) 26%, transparent), transparent 58%),
      var(--grund-tief);
  }
  /* feines Punktraster, zur Mitte hin sichtbar */
  .szene::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--text) 15%, transparent) 1px, transparent 1.5px);
    background-size: 14px 14px;
    mask-image: radial-gradient(75% 85% at 55% 45%, var(--grund) 20%, transparent 75%);
  }
  /* Erlebnisse: Höhe ergibt sich aus dem Inhalt (die Container-Einheiten gelten dann nur für die Breite) */
  .szene[data-frei] { container-type: inline-size; overflow: visible; }
  .szene-buehne { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(7.5px, 2.45cqw, 14px); perspective: 70em; }
  .szene-welt {
    position: relative; transform-style: preserve-3d;
    transform: rotateX(var(--kx, 9deg)) rotateY(var(--ky, -12deg));
    transition: transform .7s var(--kurve-raus);
  }

  /* ── Bausteine ─────────────────────────────────────────────────────────────── */
  .sz-karte {
    position: relative; border-radius: .9em; overflow: hidden;
    background: color-mix(in srgb, var(--flaeche) 90%, transparent); border: 1px solid var(--rand-hell);
    box-shadow: 0 1.8em 3.4em -1.4em hsl(var(--schatten) / .85), inset 0 1px 0 var(--rand-hell);
  }
  .sz-kopf {
    display: flex; align-items: center; gap: .55em; padding: .65em .85em; font-size: .82em; font-weight: 700;
    color: var(--text-stark); border-block-end: 1px solid var(--rand); background: color-mix(in srgb, var(--flaeche-2) 70%, transparent);
  }
  .sz-kopf .sz-chip { margin-inline-start: auto; }
  .sz-liste { display: grid; gap: .45em; padding: .65em; }
  .sz-zeile { display: flex; align-items: center; gap: .6em; padding: .5em .65em; border-radius: .6em; background: var(--flaeche-2); font-size: .78em; min-inline-size: 0; }
  .sz-zeile b { color: var(--text-stark); font-weight: 650; white-space: nowrap; }
  .sz-zeile small { display: block; color: var(--text-leise); font-size: .85em; white-space: nowrap; }
  .sz-nr { inline-size: 1.4em; text-align: center; color: var(--text-leise); font-variant-numeric: tabular-nums; }
  .sz-chip {
    display: inline-flex; align-items: center; gap: .35em; padding: .2em .6em; border-radius: 99em; white-space: nowrap;
    font-size: .72em; font-weight: 700; color: var(--text-stark);
    background: color-mix(in srgb, var(--marke-1) 24%, transparent); border: 1px solid color-mix(in srgb, var(--marke-1) 50%, transparent);
  }
  .sz-chip[data-ton="gut"] { color: var(--gut-text); background: color-mix(in srgb, var(--gut) 14%, transparent); border-color: color-mix(in srgb, var(--gut) 40%, transparent); }
  .sz-chip[data-ton="fehler"] { color: var(--fehler-text); background: color-mix(in srgb, var(--fehler) 14%, transparent); border-color: color-mix(in srgb, var(--fehler) 40%, transparent); }
  .sz-chip[data-ton="leise"] { color: var(--text-leise); background: var(--flaeche-2); border-color: var(--rand); }
  .sz-punkt { inline-size: .6em; block-size: .6em; border-radius: 50%; background: var(--marke-2); flex: none; }
  .sz-punkt[data-ton="gut"] { background: var(--gut); }
  .sz-punkt[data-ton="fehler"] { background: var(--fehler); }
  .sz-punkt[data-ton="3"] { background: var(--marke-3); }
  .sz-strich { display: block; block-size: .5em; border-radius: .5em; background: color-mix(in srgb, var(--text) 14%, transparent); }
  .sz-verlauf { background: linear-gradient(120deg, var(--knopf-1), var(--knopf-2)); color: var(--auf-marke); }

  .szene:not([data-laeuft]) *, .szene:not([data-laeuft]) *::before, .szene:not([data-laeuft]) *::after { animation-play-state: paused !important; }
  @media (prefers-reduced-motion: reduce) {
    .szene *, .szene *::before, .szene *::after { animation: none !important; }
    .szene-welt { transition: none; }
  }
}

@layer hilfen {
  .nur-vorleser {
    position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .inhalt { inline-size: min(100% - 2 * var(--seitenrand), var(--breite-inhalt)); margin-inline: auto; }
  .inhalt[data-breite="weit"] { inline-size: min(100% - 2 * var(--seitenrand), var(--breite-weit)); }
  .inhalt[data-breite="text"] { inline-size: min(100% - 2 * var(--seitenrand), var(--breite-text)); }
  .fluss > * + * { margin-block-start: var(--fluss-abstand, 1em); }
  .reihe { display: flex; flex-wrap: wrap; gap: var(--reihe-abstand, var(--abstand-3)); align-items: center; }
  .leise { color: var(--text-leise); }
  .mono { font-family: var(--schrift-mono); }
  .zahlen { font-variant-numeric: tabular-nums; }
}

@media print {
  :root { --grund: #fff; --flaeche: #fff; --text: #000; --text-leise: #333; --akzent: #000; --rand: #bbb; background: #fff; color: #000; }
  [data-seitenkopf], [data-seitenfuss], .sendeband, [data-nicht-drucken] { display: none !important; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  h1, h2, h3 { break-after: avoid; }
}