/* =====================================================================================================================
   walther.systems, Einseiter (live ab Freigabe, Stand 12.10.2026). Eine lange Seite mit Peilscheibe, Abschnitten und Lineal,
   dazu Impressum, Datenschutz und Fehlerseiten. Vorbild der Bewegung: getartcraft.com.
   Ohne Inline-Stile (CSP style-src 'self'); Bewegung nur ohne Wunsch nach reduzierter Bewegung, Schalter "Bewegung
   anhalten" (WCAG 2.2.2). Alles funktioniert ohne Skript; skript.js legt Naehe, Woelbung, Welle und Lupe darueber.
   Quelle: /srv/stack/web/einseiter/stil/stil.css, Anleitung: /srv/stack/web/einseiter/LIESMICH.md
   ===================================================================================================================== */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(schriften/Barlow-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url(schriften/Barlow-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(schriften/Barlow-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(schriften/Barlow-Condensed-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(schriften/Barlow-Condensed-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 300 800; font-stretch: 62% 125%; font-display: swap; src: url(schriften/Archivo-300_800-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(schriften/IBM-Plex-Mono-400-normal.woff2) format("woff2"); }

:root {
  --papier: #f6f7f6; --flaeche: #ffffff; --tinte: #1d1d1b; --tinte-2: #4b5560; --zart: #54544f;
  /* --zart vorher #6e6e69 (4,8:1 auf Papier), dem Betreiber zu hell (14.10.2026; IBM Plex Mono gibt es nur duenn, 400).
     Jetzt 7,1:1 auf Papier, 7,6:1 auf Flaeche. Heller geht bei mindestens 7:1 nicht: --tinte-2 liegt selbst bei 7,07:1, beide
     sind gleich hell (L* 35,6 / 35,7). Die Abstufung tragen --tinte (15,7:1), der Farbton und die Schrift (Mono, Versalien). */
  --rot: #e20613; --rot-tief: #b00510; --blau: #265c8c;
  --linie: rgb(29 29 27 / .16); --linie-stark: rgb(29 29 27 / .42); --raster: rgb(38 92 140 / .07);
  --halo: rgb(246 247 246 / .9); --strahl: rgb(226 6 19 / .11); --strahl-kante: rgb(226 6 19 / .5);
  --saum-rot: rgb(226 6 19 / .85); --saum-blau: rgb(38 140 220 / .85);
  --f-text: "Barlow", system-ui, sans-serif; --f-norm: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace; --f-wort: "Archivo", "Barlow Condensed", sans-serif;
  --kopf-h: 3.5rem; --umlauf-1: 96s; --umlauf-2: 140s; --takt: 8s;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #0e1d2f; --flaeche: #13263b; --tinte: #eef3f8; --tinte-2: #a9bacb; --zart: #a3b2c5;
    /* --zart vorher #8e9db0: 6,2:1 auf Papier, 5,6:1 auf Flaeche (unter 7:1). Jetzt 7,9:1 bzw. 7,1:1, weiter dunkler als --tinte-2 */
    --rot: #ff5a61; --rot-tief: #e20613; --blau: #8fc3f0;
    --linie: rgb(238 243 248 / .14); --linie-stark: rgb(238 243 248 / .4); --raster: rgb(143 195 240 / .07);
    --halo: rgb(14 29 47 / .86); --strahl: rgb(255 90 97 / .2); --strahl-kante: rgb(255 90 97 / .7);
    --saum-rot: rgb(255 90 97 / .9); --saum-blau: rgb(110 190 255 / .9);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 3.5rem); scroll-padding-bottom: 3rem; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1.0625rem/1.55 var(--f-text); }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hud { font: 400 .6875rem/1.4 var(--f-mono); letter-spacing: .15em; text-transform: uppercase; }
.wort { font-family: var(--f-wort); font-stretch: 125%; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; height: var(--kopf-h); border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kopf-innen { max-width: 80rem; height: 100%; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; gap: 1.5rem; }
.kopf .logo { display: block; height: 2.1rem; }
.kopf .logo img { height: 100%; width: auto; display: block; }
.logo .dunkel { display: none !important; }
@media (prefers-color-scheme: dark) { .logo .hell { display: none !important; } .logo .dunkel { display: block !important; } }
.kopf nav { display: none; gap: 1.25rem; margin-left: auto; font: 500 1rem var(--f-norm); }
.kopf nav a { text-decoration: none; color: var(--tinte-2); }
.kopf nav a:hover { color: var(--tinte); }
@media (min-width: 60rem) { .kopf nav { display: flex; } }
.knopf { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1rem; background: var(--rot); color: #fff;
  font: 600 1rem/1 var(--f-norm); letter-spacing: .02em; text-decoration: none; border: 0; }
.knopf:hover { background: var(--rot-tief); }
@media (prefers-color-scheme: dark) { .knopf { background: #e20613; } .knopf:hover { background: #b00510; } }
.knopf:focus-visible, .karte:focus-visible, .info a:focus-visible, .schliessen:focus-visible, .anhalten input:focus-visible + span {
  outline: 3px solid var(--rot); outline-offset: 3px; }
.knopf svg { width: 1rem; height: .75rem; }
.knopf-gross { padding: .85rem 1.3rem; font-size: 1.15rem; }

/* ---------- Peilscheibe (Hero) ---------- */
.radar { position: relative; overflow: clip; border-bottom: 1px solid var(--linie);
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center; }
.buehne { position: relative; width: min(100vw, 46rem, 58svh); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; }  /* 58svh: am iPad hochkant bleibt der Titel im ersten Bild */
@media (min-width: 60rem) {
  .radar { height: calc(100svh - var(--kopf-h)); min-height: 40rem; }
  /* absolut mittig: ein Grid richtet ein uebergrosses Element oben aus (gemessen: 50 px zu tief) */
  .buehne { position: absolute; left: 50%; top: 50%; translate: -50% -50%; margin: 0;
    width: min(100vw, calc((100svh - var(--kopf-h)) * 1.12), 74rem); }
}
.schicht { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Schmuckebenen fangen keinen Zeiger (Ping-Kreis, Strahl, Skala liegen flaechig ueber der Buehne) */
.schicht, .strahl, .ping { pointer-events: none; }
.skala { color: var(--tinte); }
.skala .ring { fill: none; stroke: var(--linie); stroke-width: 1; vector-effect: non-scaling-stroke; }
.skala .ring.stark { stroke: var(--linie-stark); }
.skala .ring.gestrichelt { stroke-dasharray: 4 6; }
.skala .achse { stroke: var(--linie); stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
.skala .strich { stroke: var(--linie-stark); vector-effect: non-scaling-stroke; }
.skala .strich.lang { stroke: var(--tinte); stroke-opacity: .55; }
.skala text { font: 400 11px var(--f-mono); letter-spacing: .12em; fill: var(--zart); text-anchor: middle; dominant-baseline: middle; }
.arme path { fill: none; stroke: var(--tinte); stroke-opacity: .12; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.arme circle { fill: var(--tinte); fill-opacity: .25; }

/* Strahl: hellste Kante fuehrt, Schweif dahinter (gegen den Uhrzeigersinn) */
.strahl { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 300deg, var(--strahl) 357deg, var(--strahl-kante) 359.4deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 7%, #000 7.5% 44%, transparent 44.2%);
          mask: radial-gradient(circle, transparent 0 7%, #000 7.5% 44%, transparent 44.2%); }
.ping { position: absolute; left: 50%; top: 50%; width: 88cqi; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 1px solid var(--rot); opacity: 0; scale: .08; }

/* Mitte: Signet mit Hof, darunter Titel (ab 60 rem in der Scheibe, darunter am Handy) */
.mitte { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 20; pointer-events: none;
  display: grid; justify-items: center; text-align: center; width: 54cqi; }
.mitte::before { content: ""; position: absolute; inset: -14% -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--halo) 58%, transparent); }
.mitte .signet { width: clamp(3.4rem, 9cqi, 6.5rem); height: auto; display: block; filter: drop-shadow(0 .6rem 1.4rem rgb(0 0 0 / .12)); }
.mitte .kennung { margin: 1rem 0 .4rem; color: var(--zart); }
.mitte h1 { margin: 0; font: 600 clamp(1.7rem, 3.9cqi, 3.15rem)/1.04 var(--f-norm); letter-spacing: -.01em; text-wrap: balance; }
.mitte h1 .wort { font-size: .9em; }
/* Unterzeile unter dem Titel (Wortlaut des Betreibers 14.10.2026): Barlow, ruhig, kleiner als das h1, Farbe --tinte-2.
   Schmaler als das h1 (42 cqi), damit die Karten auf ihrer Bahn Abstand halten (geprueft ueber eine volle Runde) */
.mitte .unterzeile { margin: .7rem 0 0; max-width: 42cqi; color: var(--tinte-2); font: 400 clamp(.875rem, 1.6cqi, 1.125rem)/1.4 var(--f-text); text-wrap: balance; }
.mitte .aktion { pointer-events: auto; margin-top: 1.3rem; display: grid; justify-items: center; gap: .55rem; }
.mitte .aktion p { margin: 0; color: var(--tinte-2); font-size: clamp(.78rem, 1.45cqi, .9rem); line-height: 1.35; }
.mitte .aktion .knopf-gross { font-size: clamp(.95rem, 1.75cqi, 1.15rem); padding: .75em 1.1em; }
/* Mit Unterzeile ist die Mitte hoeher; die Karten sollen auf ihrer Bahn Abstand halten (Messung 14.10.2026, volle Runde in
   drei Motoren). h1 hoechstens 47 cqi: Firefox setzte sonst "Externer CISO und externer ISB" in eine Zeile, Chromium und
   WebKit teilen nach "externer". Kleine Buehne (unter 58 rem, Fenster unter etwa 900 px Hoehe): Signet, Abstaende und
   Zeilenhoehe etwas knapper, Mitte 2 cqi hoeher (unten kommt die Bahn den Zeilen naeher als oben); unter 46 rem (unter etwa
   710 px) Unterzeile 13 px und breiter, Knopf flacher, Mitte 3 cqi hoeher. Unter 41 rem (unter etwa 640 px) ist kein Platz: dort beruehrten die
   Karten die Mitte schon vorher, die Unterzeile entfaellt, statt verdeckt zu werden. */
.mitte h1 { max-width: max(47cqi, 18rem); }
@media (min-width: 60rem) {
  @container (max-width: 58rem) {
    .mitte { translate: -50% calc(-50% - 2cqi); }
    .mitte .signet { width: clamp(3.4rem, 7.5cqi, 6.5rem); }
    .mitte .kennung { margin: .7rem 0 .35rem; }
    .mitte .unterzeile { margin-top: .5rem; line-height: 1.35; }
    .mitte .aktion { margin-top: 1rem; gap: .45rem; }
  }
  @container (max-width: 46rem) {
    .mitte { translate: -50% calc(-50% - 3cqi); }
    .mitte .unterzeile { font-size: .8125rem; max-width: 48cqi; }
    .mitte .aktion .knopf-gross { padding: .6em 1em; }
  }
  @container (max-width: 41rem) { .mitte .unterzeile { display: none; } }
}
@media (width < 60rem) {
  .mitte { width: auto; }
  .mitte .kennung, .mitte .unterzeile, .mitte .aktion { display: none; }
  .mitte h1 { display: none; }  /* am Handy steht das h1 unter der Scheibe */
}
.titel-handy { padding: 1.5rem 1rem 2.25rem; text-align: center; border-bottom: 1px solid var(--linie); }
.titel-handy .kennung { margin: 0 0 .6rem; color: var(--zart); }
.titel-handy .h1-gleich { margin: 0 0 1rem; color: var(--tinte); font: 600 2rem/1.05 var(--f-norm); text-wrap: balance; }
.titel-handy .unterzeile { margin: 0 auto 1.15rem; max-width: 30rem; color: var(--tinte-2); font-size: 1rem; line-height: 1.45; text-wrap: balance; }
.titel-handy .info-zeile { margin: .6rem 0 0; color: var(--tinte-2); font-size: .9rem; }
@media (min-width: 60rem) { .titel-handy { display: none; } }

/* Umlaufbahnen der vier Begriffe: Bahn dreht, Karte dreht gegen (bleibt aufrecht); Startwinkel als Grundwert,
   damit die Karten auch ohne Animation (reduzierte Bewegung) verteilt stehen. */
.bahn { position: absolute; inset: 0; pointer-events: none; rotate: var(--w0); will-change: rotate; }
.arme, .strahl { will-change: rotate; } .karte { will-change: rotate; }
.anker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; translate: calc(var(--r) * 1cqi) 0; }
.karte { pointer-events: auto; position: absolute; translate: -50% -50%; rotate: calc(var(--w0) * -1);
  width: max-content; min-width: clamp(5.6rem, 16cqi, 12rem); padding: 0; border: 0; background: none;
  color: var(--tinte); text-align: left; cursor: crosshair; font: inherit; display: block; }
.karte .k-innen { display: grid; border: 1px solid var(--linie-stark); background: var(--flaeche); box-shadow: 0 .4rem 1.4rem rgb(0 0 0 / .08);
  transform-origin: 50% 50%; }
.karte .k-innen::before { content: ""; height: 3px; background: var(--rot); }
.karte .k-kopf { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem .55rem; border-bottom: 1px solid var(--linie);
  color: var(--zart); font-size: clamp(.5rem, 1cqi, .625rem); }
.karte .k-bild { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .55rem .55rem .45rem; overflow: hidden;
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 10px 10px; }
.karte .k-wort { font-size: clamp(.95rem, 2.5cqi, 1.7rem); line-height: 1; white-space: nowrap; }
.karte .k-wort.lang { font-size: clamp(.72rem, 1.75cqi, 1.2rem); }
.karte .k-zeichen { width: clamp(1.2rem, 2.8cqi, 2rem); height: auto; flex: none; color: var(--rot); }
.karte .k-zeile { padding: 0 .55rem .5rem; color: var(--tinte-2); font: 500 clamp(.62rem, 1.3cqi, .85rem)/1.2 var(--f-norm); }
.karte .k-bild::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 3px); }
@media (width < 48rem) { .karte .k-zeile, .karte .k-kopf { display: none; } .karte .k-bild { padding: .45rem .5rem; } }

/* Eine gemeinsame Bahn, feste Abstaende (mind. 60 Grad): Karten ueberholen sich nie und bleiben ausserhalb des Titels
   (geprueft ueber eine volle Runde, 12.10.2026). Der ISO, "kleiner Bruder" des CISO, folgt ihm 60 Grad dahinter. */
.bahn { --r: 37; --t: var(--umlauf-1); }
.b-iso  { --w0: -90deg; }
.b-ciso { --w0: -30deg; }
.b-isb  { --w0: 120deg; }
.b-it   { --w0: 210deg; }
.b-iso .karte { scale: .84; }
@media (width < 60rem) { .bahn { --r: 31; } }

/* Schalter "Bewegung anhalten" */
.anhalten { position: absolute; z-index: 30; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .5rem;
  color: var(--zart); cursor: pointer; }
.anhalten input { appearance: none; margin: 0; width: 2.1rem; height: 1.15rem; border: 1px solid var(--linie-stark); position: relative; cursor: pointer; }
.anhalten input::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.15rem - 6px); aspect-ratio: 1; background: var(--tinte-2); transition: translate .2s; }
.anhalten input:checked { background: var(--tinte); border-color: var(--tinte); }
.anhalten input:checked::after { translate: .95rem 0; background: var(--papier); }
.hud-ecke { position: absolute; z-index: 30; left: 1rem; bottom: 1rem; color: var(--zart); margin: 0; }
.hud-ecke b { color: var(--rot); font-weight: 400; }
@media (width < 60rem) { .anhalten { position: static; justify-content: center; padding: .6rem 0 .8rem; } .hud-ecke { display: none; } }

/* ---------- Vergroesserung (Popover, ohne Skript) ---------- */
.info { width: min(92vw, 34rem); padding: 0; border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .25); }
.info::before { content: ""; display: block; height: 4px; background: var(--rot); }
.info::backdrop { background: transparent; }  /* nicht modal (Pruefung 12.10.): kein Abdunkeln, das Modalitaet vortaeuscht */
@media (width < 48rem) { .info { inset: auto 0 0 0; margin: 0; width: 100%; max-height: 72svh; overflow: auto; border-width: 1px 0 0; } }
.info .i-kopf { display: flex; justify-content: space-between; align-items: center; padding: .55rem .9rem; border-bottom: 1px solid var(--linie); color: var(--zart); }
.info .schliessen { border: 1px solid var(--linie-stark); background: none; color: var(--tinte); width: 2rem; height: 2rem; font: 400 1.2rem/1 var(--f-mono); cursor: pointer; }
.info .i-bild { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.2rem;
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 14px 14px; border-bottom: 1px solid var(--linie); }
.info .i-bild .wort { font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 1; }
.info .i-bild svg { width: clamp(3rem, 12vw, 4.5rem); height: auto; color: var(--rot); }
.info .i-text { padding: 1rem 1.2rem 1.2rem; }
.info h2 { margin: 0 0 .4rem; font: 600 1.45rem/1.15 var(--f-norm); }
.info p { margin: 0 0 .9rem; color: var(--tinte-2); }

/* ---------- Abschnitte im Stil der Vorlage: Rahmen, Passermarken, haftende Kennleiste ---------- */
.abschnitt { position: relative; scroll-margin-top: -3.5rem; }  /* gleicht den Puffer der Kennleiste aus: Abschnitt beginnt direkt unter dem Kopf */
.abschnitt { overflow-x: clip; }  /* clip statt hidden, damit die Kennleiste haftet */
.rahmen { position: relative; max-width: 80rem; margin: 0 auto; border-inline: 1px solid var(--linie); }
.haarlinie { position: absolute; inset: 0 0 auto; height: 1px; background: var(--linie-stark); transform-origin: left; }
.marke { position: absolute; z-index: 31; width: 11px; height: 11px; top: -5px; pointer-events: none; }
.marke::before, .marke::after { content: ""; position: absolute; background: var(--linie-stark); }
.marke::before { width: 1px; top: 0; bottom: 0; left: 5px; } .marke::after { height: 1px; top: 5px; left: 0; right: 0; }
.marke.l { left: -6px; } .marke.r { right: -6px; }
.leiste { position: sticky; top: var(--kopf-h); z-index: 30; display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.25rem; border-block: 1px solid var(--linie);
  background: color-mix(in srgb, var(--papier) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.leiste p { margin: 0; color: var(--tinte-2); } .leiste .nr { color: var(--zart); }
.einleitung { padding: 3.5rem 1.25rem 2.5rem; }
.einleitung h2 { margin: 0; max-width: 48rem; font: 600 clamp(2rem, 4.6vw, 3.6rem)/1.02 var(--f-norm); letter-spacing: -.015em; text-wrap: balance; }
.einleitung h2 em { font-style: normal; color: var(--rot); }
.einleitung p { margin: 1rem 0 0; max-width: 40rem; color: var(--tinte-2); font-size: 1.125rem; }
.raster { display: grid; gap: 1px; background: var(--linie); border-top: 1px solid var(--linie); }
@media (min-width: 48rem) { .raster.drei { grid-template-columns: repeat(3, 1fr); } .raster.zwei { grid-template-columns: repeat(2, 1fr); } }
.zelle { background: var(--papier); display: grid; align-content: start; }
.zelle .z-kopf { display: flex; justify-content: space-between; padding: .6rem 1.25rem; border-bottom: 1px solid var(--linie); color: var(--zart); }
.zelle .z-inhalt { padding: 1.25rem 1.25rem 1.6rem; }
.zelle b { display: block; font: 600 1.3rem/1.2 var(--f-norm); margin-bottom: .5rem; }
.zelle .wert { font: 600 2.4rem/1 var(--f-norm); color: var(--rot); margin-bottom: .6rem; display: block; }
.zelle p { margin: 0; color: var(--tinte-2); max-width: 46rem; }   /* auch in einer breiten Zelle (unten) bleiben die Zeilen lesbar */
/* Keine graue Leerflaeche am Ende eines Rasters (Betreiber 14.10.2026: "kommt da noch was hin?" - nein): die letzte Zelle
   fuellt den Rest ihrer Zeile. Zwei Spalten mit ungerader Anzahl: ganze Breite (Ablauf, 5 Schritte; Unabhaengig, 1 Zelle);
   drei Spalten: Rest 1 ganze Breite, Rest 2 zweite und dritte Spalte. Die Kontaktwege haben dieselben 1-px-Fugen. */
@media (min-width: 48rem) {
  .raster.zwei > :last-child:nth-child(odd), .kontaktwege > :last-child:nth-child(odd), .raster.drei > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .raster.drei > :last-child:nth-child(3n+2) { grid-column: 2 / -1; }
}
.vertrauen { padding: 1.25rem; display: grid; gap: .5rem; border-top: 1px solid var(--linie); }
.vertrauen div { display: grid; gap: .1rem; }
/* Ab 48 rem Begriff neben Erklaerung. Die Begriffsspalte richtet sich je Block nach der laengsten Beschriftung (vorher fest
   9 rem: SICHERHEITSLAGEBILD und ENTSCHEIDUNGSGRUNDLAGEN liefen in den Text, BSI-LAGEBERICHT 2025 brach um; Betreiber
   14.10.2026). Raster am dl, jede Zeile uebernimmt dessen Spalten (subgrid): alle Erklaerungen eines Blocks beginnen an
   derselben Kante. Obergrenze 15 rem, darueber bricht eine Beschriftung um, statt den Text zu verdraengen. Grundlinien
   von Begriff und Erklaerung auf einer Hoehe. */
@media (min-width: 48rem) {
  .vertrauen div { grid-template-columns: 13rem minmax(0, 1fr); column-gap: 1.75rem; align-items: baseline; }   /* ohne subgrid: feste Spalte */
  @supports (grid-template-columns: subgrid) {
    .vertrauen { grid-template-columns: fit-content(15rem) minmax(0, 1fr); column-gap: 1.75rem; }
    .vertrauen div { grid-column: 1 / -1; grid-template-columns: subgrid; }
  }
}
.vertrauen dt { color: var(--zart); } .vertrauen dd { margin: 0; }

/* ---------- Fuss ---------- */
.fuss { background: #1d1d1b; color: #eef0ee; }
.fuss .rahmen { border-color: rgb(255 255 255 / .12); padding: 1.6rem 1.25rem; display: grid; gap: .5rem; }
.fuss p { margin: 0; color: #b9bfbd; }

/* =====================================================================================================================
   BEWEGUNG - nur ohne Wunsch nach reduzierter Bewegung
   ===================================================================================================================== */
@keyframes drehen { to { rotate: calc(var(--w0, 0deg) + 360deg); } }
@keyframes gegendrehen { from { rotate: calc(var(--w0) * -1); } to { rotate: calc(var(--w0) * -1 - 360deg); } }
@keyframes kreisen { from { rotate: var(--w0); } to { rotate: calc(var(--w0) + 360deg); } }
@keyframes ausfahren { from { translate: 0 0; } }
@keyframes geboren { from { opacity: 0; scale: .5; } }
/* Keine Weichzeichnung (blur) in Animationen: blur neben der Dauerdrehung brachte WebKit zum Absturz (Karten 12.10.2026:
   0/6 -> 6/6 stabil; Einflug der Fehlerseiten 12.10.2026: mit blur 13 Abstuerze in 59 Laeufen, ohne 0 in 24) */
@keyframes erscheinen { from { opacity: 0; scale: .5; } }
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes einblenden { from { opacity: 0; } }
@keyframes einfliegen { from { opacity: 0; translate: 0 28px; } }
@keyframes pingen { 0% { opacity: .55; scale: .08; } 60% { opacity: 0; scale: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes flimmern {
  0%   { filter: drop-shadow(-3px 0 0 var(--saum-rot)) drop-shadow(3px 0 0 var(--saum-blau)); opacity: .8; }
  10%  { filter: drop-shadow(4px 0 0 var(--saum-rot)) drop-shadow(-4px 0 0 var(--saum-blau)); opacity: 1; translate: 2px 0; clip-path: inset(18% 0 46% 0); }
  18%  { filter: none; opacity: .55; translate: 0 0; clip-path: none; }
  30%  { filter: drop-shadow(-2px 0 0 var(--saum-rot)) drop-shadow(2px 0 0 var(--saum-blau)); opacity: 1; }
  42%  { filter: none; opacity: .7; clip-path: inset(62% 0 6% 0); translate: -2px 0; }
  52%  { filter: drop-shadow(1px 0 0 var(--saum-rot)) drop-shadow(-1px 0 0 var(--saum-blau)); opacity: 1; clip-path: none; translate: 0 0; }
  70%, 100% { filter: drop-shadow(-1px 0 0 var(--saum-rot)) drop-shadow(1px 0 0 var(--saum-blau)); opacity: 1; }
}
@keyframes rauschen { 0%, 100% { opacity: 0; } 10%, 30%, 50% { opacity: 1; } 20%, 40% { opacity: .2; } }
@keyframes oeffnen { from { opacity: 0; scale: .55; } }
@keyframes aufblitzen { from { filter: drop-shadow(-10px 0 0 var(--saum-rot)) drop-shadow(10px 0 0 var(--saum-blau)); } }

@media (prefers-reduced-motion: no-preference) {
  /* Einstieg beim Laden */
  .skala .ring, .arme path { stroke-dasharray: 1; stroke-dashoffset: 0; }
  .skala .ring:not(.gestrichelt), .arme path { animation: zeichnen 1.6s cubic-bezier(.22, 1, .36, 1) both; }
  .skala .ring.gestrichelt, .skala .striche, .skala .ziffern, .skala .achse { animation: einblenden 1.2s .5s both; }
  .arme path { animation-duration: 2.4s; animation-delay: .3s; }
  .strahl { animation: drehen var(--takt) linear infinite, einblenden 1s .8s both; --w0: 0deg; }
  .ping { animation: pingen var(--takt) cubic-bezier(.2, .6, .3, 1) infinite; }
  .mitte .signet { animation: geboren 1.1s .2s cubic-bezier(.16, 1, .3, 1) both; }
  .mitte .kennung, .mitte h1, .mitte .unterzeile, .mitte .aktion, .titel-handy > * { animation: einfliegen .9s cubic-bezier(.22, 1, .36, 1) both; }
  .mitte .kennung, .titel-handy .kennung { animation-delay: .5s; } .mitte h1, .titel-handy .h1-gleich { animation-delay: .6s; }
  .mitte .unterzeile, .titel-handy .unterzeile { animation-delay: .68s; }
  .mitte .aktion, .titel-handy > .knopf, .titel-handy > .info-zeile { animation-delay: .75s; }   /* nach Klasse: die Unterzeile verschiebt die Zaehlung */
  /* Begriffe: fahren aus der Mitte heraus, dann ruhiger Umlauf; Karten schweben leicht */
  .bahn { animation: kreisen var(--t) linear infinite; }
  .anker { animation: ausfahren 2.2s 1s cubic-bezier(.16, 1, .3, 1) both; }
  .karte { animation: gegendrehen var(--t) linear infinite, erscheinen 1.4s 1s cubic-bezier(.16, 1, .3, 1) both; }
  .b-iso .anker { animation-delay: 1.15s; } .b-isb .anker { animation-delay: 1.3s; } .b-it .anker { animation-delay: 1.45s; }
  .b-iso .karte { animation-delay: 0s, 1.15s; } .b-isb .karte { animation-delay: 0s, 1.3s; } .b-it .karte { animation-delay: 0s, 1.45s; }
  /* Ueberfahren oder Fokus: alles bremst, die Karte flackert (Farbsaum wie bei der Vorlage) */
  .buehne:has(.karte:hover, .karte:focus-visible) :is(.bahn, .karte, .anker, .fbahn, .fanker, .fk) { animation-play-state: paused; }
  .karte:hover .k-bild, .karte:focus-visible .k-bild { animation: flimmern .55s steps(1, end) both; }
  .karte:hover .k-bild::after, .karte:focus-visible .k-bild::after { animation: rauschen .55s steps(1, end) both; }
  .karte:hover .k-innen, .karte:focus-visible .k-innen { border-color: var(--rot); animation: woelben .7s cubic-bezier(.2, .8, .2, 1) both; }
  /* Vergroesserung: blitzt beim Oeffnen auf und waechst aus der Mitte */
  /* Oeffnen per Keyframes statt @starting-style-Uebergang: WebKit startete den Uebergang unter Last erst nach > 0,5 s */
  .info:popover-open { animation: oeffnen .45s cubic-bezier(.16, 1, .3, 1) both, aufblitzen .5s ease-out; }
  /* Waehrend eine Erklaerung offen ist, steht die Scheibe (Ruhe fuer den Blick, weniger Last) */
  body:has(.info:popover-open) :is(.strahl, .ping, .bahn, .karte, .anker, .fbahn, .fanker, .fk) { animation-play-state: paused; }
  /* Schalter: alles anhalten */
  body:has(#anhalten:checked) :is(.strahl, .ping, .bahn, .karte, .anker, .fbahn, .fanker, .fk) { animation-play-state: paused; }
  body:has(#anhalten:checked) .strahl, body:has(#anhalten:checked) .ping { opacity: .35; }
}
/* Abschnitte beim Scrollen: Linie zeichnet sich, Marken springen auf, Leiste und Ueberschriften fliegen ein */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .haarlinie { animation: linie linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    .marke { animation: marke linear both; animation-timeline: view(); animation-range: entry 10% entry 45%; }
    .marke.r { animation-range: entry 18% entry 52%; }
    .leiste p, .einleitung > * { animation: einfliegen cubic-bezier(.22, 1, .36, 1) both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .einleitung > :nth-child(2) { animation-range: entry 10% entry 70%; }
    /* Zellen: nur der Inhalt fliegt ein, die Zelle bleibt deckend stehen (14.10.2026). Flog die ganze Zelle (Deckkraft 0,
       28 px tiefer), schien unten am Fensterrand die Rasterflaeche (--linie, die Farbe der 1-px-Fugen) als grauer Kasten
       durch, solange die Zeile einfuhr, und blieb stehen, wenn man dort anhielt (Betreiber: "graue Boxen") */
    .zelle { view-timeline: --zelle block; }
    .zelle > * { animation: einfliegen cubic-bezier(.22, 1, .36, 1) both; animation-timeline: --zelle; animation-range: entry 5% entry 55%; }
    .raster > .zelle:nth-child(3n+2) > * { animation-range: entry 12% entry 62%; }
    .raster > .zelle:nth-child(3n+3) > * { animation-range: entry 19% entry 69%; }
    /* zwei Spalten: links vor rechts (die Staffelung 3n+2/3n+3 liess dort Zelle 04 vor Zelle 03 einfliegen, 03 stand als
       leere Zelle daneben) */
    .raster.zwei > .zelle:nth-child(odd) > * { animation-range: entry 5% entry 55%; }
    .raster.zwei > .zelle:nth-child(even) > * { animation-range: entry 12% entry 62%; }
  }
}
@keyframes linie { from { scale: 0 1; } }
@keyframes marke { from { scale: 0; opacity: 0; } }

.info .i-weiter { margin: 0; color: var(--zart); font: 400 .75rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.info .i-weiter a { color: var(--rot); font-weight: 500; text-underline-offset: .2em; }

/* =====================================================================================================================
   EINE LANGE SEITE MIT LINEAL (Fassung 3, 12.10.2026, nach getartcraft.com): Lineal am rechten Rand mit Strich je
   Prozent, Zahl je 10 Prozent, rote Nadel mit Prozentanzeige; Abschnittsnamen fahren senkrecht im Lineal mit und fliegen
   oben Buchstabe fuer Buchstabe in die Kennleiste. Alles CSS (scroll-/view-timeline), ohne JavaScript.
   ===================================================================================================================== */
@property --pz { syntax: "<integer>"; inherits: true; initial-value: 0; }  /* inherits: true, sonst sieht ::after nur 0 */
@counter-style drei { system: extends decimal; pad: 3 "0"; }
:root { --schiene: 3.75rem; }
.schiene, .zeiger, .reiter, .abschnitte-liste { display: none; }
.fortschritt { position: fixed; z-index: 49; top: var(--kopf-h); left: 0; right: 0; height: 2px; background: var(--rot); transform-origin: left; scale: 0 1; }
@supports not (animation-timeline: scroll()) { .fortschritt { display: none; } }
@media (min-width: 60rem) {
  /* Abschnitte reichen unter das Lineal (Innenabstand rechts) und schneiden selbst ab: Reiter und wartende Flugbuchstaben
     liegen innerhalb, nichts ragt ueber den Fensterrand (WebKit kannte overflow-x: clip am Wurzelelement nicht) */
  .radar, .titel-handy, .fuss { margin-right: var(--schiene); }
  .abschnitt { padding-right: var(--schiene); }
  .fortschritt { display: none; }
  .schiene { display: block; position: fixed; z-index: 40; top: var(--kopf-h); right: 0; bottom: 0; width: var(--schiene);
    border-left: 1px solid var(--linie); background: var(--papier); }
  .lineal { position: absolute; inset: 14px 0; }
  /* Nadel, Zaehlwerk und Vorschaulinie in eigener Ebene UEBER den Reitern (14.10.2026): die Schiene ist als position: fixed
     ein eigener Stapelkontext, darin kaeme die Nadel nie ueber einen Reiter. Gleiche Lage wie das Lineal, faengt keinen Zeiger. */
  .zeiger { display: block; position: fixed; z-index: 42; top: var(--kopf-h); right: 0; bottom: 0; width: var(--schiene); pointer-events: none; }
  .zeiger-bahn { position: absolute; inset: 14px 0; }
  .lineal .t { position: absolute; right: 0; width: 10px; height: 1px; background: var(--linie-stark); transform-origin: right center; }
  .lineal .t.gross { width: 20px; background: var(--tinte); opacity: .8; }
  .lineal .zahl { position: absolute; right: 25px; translate: 0 -50%; font: 400 10px/1 var(--f-mono); color: var(--zart); letter-spacing: .05em; }
  .nadel { position: absolute; right: 0; top: 0; width: calc(var(--schiene) + 1.25rem); height: 2px; background: var(--rot); z-index: 2; }
  /* Prozentanzeige als Zaehlwerk: Zahlenband 000..100 hinter einem Fenster, rueckt per Scroll-Zeitleiste in 100 Stufen.
     (Zaehlen ueber eine @property-Variable zeigte in WebKit dauerhaft 000, gemessen 12.10.2026.) */
  .zaehler { position: absolute; right: .35rem; top: 5px; height: 12px; overflow: hidden; background: var(--papier); padding: 0 2px;
    font: 400 10px/12px var(--f-mono); color: var(--rot); letter-spacing: .05em; }
  .zaehler .band { display: block; }
  .zaehler .band span { display: block; height: 12px; }
  @supports not (animation-timeline: scroll()) { .nadel { display: none; } }
  /* senkrechter Abschnittsname, faehrt mit seinem Abschnitt im Lineal */
  .reiter { display: flex; align-items: stretch; position: absolute; z-index: 41; top: calc(4.5rem - .45rem - 1px); right: 0;
    width: calc(var(--schiene) - 1px); writing-mode: vertical-rl; rotate: 180deg; pointer-events: none;
    font: 600 1.6rem/1 var(--f-norm); letter-spacing: .14em; text-transform: uppercase; color: var(--zart); }
  /* Reiter auf Papier (Betreiber 14.10.2026: ueber Strichen und Zahlen schwer lesbar, "hinterlegst die Schrift mit einer
     Flaeche"): jeder Buchstabe traegt seine Flaeche ueber die Schienenbreite (die Linie der Schiene bleibt frei), so geht die
     Flaeche Buchstabe fuer Buchstabe mit dem Flug in die Kennleiste; feine Linie an beiden Enden wie an der Schiene.
     Oben 0,45 rem + 1 px Rand: um so viel steht der Reiter hoeher, die Buchstaben bleiben, wo der Flug sie abholt. */
  .reiter span { display: grid; place-items: center; background: var(--papier); }
  .reiter span:first-child { padding-top: .45rem; border-top: 1px solid var(--linie); }
  .reiter span:last-child { padding-bottom: .45rem; border-bottom: 1px solid var(--linie); }
  /* Liste der Abschnitte unten am Lineal: Sprungziele, der aktuelle wird rot */
  .abschnitte-liste { display: none; justify-items: end; gap: .15rem; position: fixed; z-index: 42; right: calc(var(--schiene) + .75rem); bottom: .8rem;
    margin: 0; padding: .4rem .6rem; list-style: none; background: color-mix(in srgb, var(--papier) 82%, transparent);
    font: 600 .82rem/1.25 var(--f-norm); letter-spacing: .1em; text-transform: uppercase; }
  .abschnitte-liste a { color: var(--tinte-2); text-decoration: none; }
  .abschnitte-liste a:hover, .abschnitte-liste a:focus-visible { color: var(--rot); opacity: 1; }
}
.leiste .flug { display: none; }
@media (min-width: 60rem) {
  .leiste { align-items: center; }
  .leiste .flug { display: block; margin: 0; color: var(--tinte); font: 600 1.6rem/1 var(--f-norm); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
  .leiste .flug span { display: inline-block; }
}
/* Weiches Scrollen erst, wenn Seite und Schriften stehen (html.bereit setzt skript.js): ein weicher Sprung zum Anker beim
   Laden zielte auf das Layout vor dem Schriftwechsel und landete 76 px zu tief (Live-Kontrolle 12.10.2026). Ohne Skript
   springt der Browser sofort, und das bleibt stabil. */
@media (prefers-reduced-motion: no-preference) { html.bereit { scroll-behavior: smooth; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .abschnitt { view-timeline: --abschnitt block; view-timeline-inset: 0px; }  /* ohne scroll-padding: sonst landet der Flug 112 px zu frueh */
    /* Reiter verblasst, waehrend seine Buchstaben oben in die Kennleiste fliegen */
    /* Uebergabe: das senkrechte Wort im Lineal verschwindet in dem Moment, in dem seine Buchstaben losfliegen.
       Flugzone 300 px Scrollweg vor dem Anheften der Leiste (Vorlage: 200 px), Buchstaben gestaffelt. */
    /* jeder Buchstabe im Lineal verschwindet genau dann, wenn sein fliegender Zwilling startet */
    .reiter span { animation: verblassen linear both; animation-timeline: --abschnitt;
      animation-range: entry calc(100% - 330px + var(--i) * 14px) entry calc(100% - 322px + var(--i) * 14px); }
    .leiste .flug span { animation: landen linear both; animation-timeline: --abschnitt;
      animation-range: entry calc(100% - 330px + var(--i) * 14px) entry calc(100% - 58px); }  /* landet, wenn die Leiste unter dem Kopf (56 px) anheftet */
  }
}
/* Fortschritt, Nadel und Zaehlwerk folgen nur dem eigenen Scrollen: auch bei reduzierter Bewegung (Pruefung 12.10.) */
@supports (animation-timeline: scroll()) {
  .fortschritt { animation: wachsen linear both; animation-timeline: scroll(root); }
  .nadel { animation: nadel linear both; animation-timeline: scroll(root); }
  .zaehler .band { animation: zaehlwerk steps(101, jump-none) both; animation-timeline: scroll(root); }
}
/* Ohne Scroll-Zeitleisten (Firefox) fuehrt skript.js Nadel, Zaehlwerk und Fortschritt (html.zeitleiste-js) */
@supports not (animation-timeline: scroll()) {
  html.zeitleiste-js .fortschritt { display: block; }
  @media (min-width: 60rem) { html.zeitleiste-js .fortschritt { display: none; } html.zeitleiste-js .nadel { display: block; } }
}
@keyframes wachsen { to { scale: 1 1; } }
@keyframes nadel { to { top: 100%; } }
@keyframes zaehlwerk { to { translate: 0 -1200px; } }  /* 101 Werte 000..100 = steps(101, jump-none), Abstand 12 px */
@keyframes verblassen { from { opacity: 1; } to { opacity: 0; } }
@keyframes landen {
  0%   { opacity: 0; translate: var(--dx) var(--dy); rotate: -90deg; color: var(--zart); }
  4%   { opacity: 1; }
  50%  { translate: calc(var(--dx) * .45 - 28px) calc(var(--dy) * .5); rotate: -42deg; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; color: var(--tinte); }
}
.leiste .flug span:nth-child(1) { --i: 0; }
.leiste .flug span:nth-child(2) { --i: 1; }
.leiste .flug span:nth-child(3) { --i: 2; }
.leiste .flug span:nth-child(4) { --i: 3; }
.leiste .flug span:nth-child(5) { --i: 4; }
.leiste .flug span:nth-child(6) { --i: 5; }
.leiste .flug span:nth-child(7) { --i: 6; }
.leiste .flug span:nth-child(8) { --i: 7; }
.leiste .flug span:nth-child(9) { --i: 8; }
.leiste .flug span:nth-child(10) { --i: 9; }
.leiste .flug span:nth-child(11) { --i: 10; }
.leiste .flug span:nth-child(12) { --i: 11; }
.leiste .flug span:nth-child(13) { --i: 12; }
.leiste .flug span:nth-child(14) { --i: 13; }
.lineal .z0 { top: 0%; }
.lineal .z10 { top: 10%; }
.lineal .z20 { top: 20%; }
.lineal .z30 { top: 30%; }
.lineal .z40 { top: 40%; }
.lineal .z50 { top: 50%; }
.lineal .z60 { top: 60%; }
.lineal .z70 { top: 70%; }
.lineal .z80 { top: 80%; }
.lineal .z90 { top: 90%; }
.lineal .z100 { top: 100%; }

/* ---------- Bausteine der langen Seite ---------- */
.textblock { padding: 0 1.25rem 1.5rem; max-width: 46rem; }
.textblock p { margin: 0 0 .9rem; color: var(--tinte-2); }
.block { padding: 0 0 1.5rem; }
.b-titel { margin: 0; padding: 1rem 1.25rem .6rem; font: 600 1.25rem/1.2 var(--f-norm); }
.zelle .z-inhalt a, .textblock a { color: var(--rot); }
.fragen { padding: 0 1.25rem 1.5rem; max-width: 52rem; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen details:last-child { border-bottom: 1px solid var(--linie); }
.fragen summary { cursor: pointer; padding: .9rem 2rem .9rem 0; font: 600 1.15rem/1.3 var(--f-norm); list-style: none; position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+" / ""; position: absolute; right: .2rem; top: .75rem; font: 400 1.3rem var(--f-mono); color: var(--rot); }
.fragen details[open] summary::after { content: "–" / ""; }
.fragen details p { margin: 0 0 1rem; color: var(--tinte-2); max-width: 46rem; }
.preise { display: grid; border-top: 1px solid var(--linie); }
.preis { display: grid; gap: .2rem .75rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--linie); }
@media (min-width: 48rem) { .preis { grid-template-columns: 1fr auto; } .preis .p-text { grid-column: 1 / -1; } }
.preis .p-name { font: 600 1.15rem/1.25 var(--f-norm); }
.preis .p-wert { font: 600 1.4rem/1 var(--f-norm); color: var(--rot); }
.preis .p-text { color: var(--tinte-2); }
.zitat { margin: 0 1.25rem 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid var(--rot); background: var(--flaeche); font: 500 1.25rem/1.4 var(--f-norm); max-width: 46rem; }
.kontaktwege { display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie); }
@media (min-width: 48rem) { .kontaktwege { grid-template-columns: repeat(2, 1fr); } }
.weg { background: var(--papier); padding: 1rem 1.25rem; display: grid; gap: .3rem; }
.weg .hud { color: var(--zart); }
.weg .k-wert { font: 600 1.35rem/1.2 var(--f-norm); }
.weg .k-wert a { color: var(--tinte); text-decoration: none; border-bottom: 2px solid var(--rot); }
.weg .k-neben { color: var(--tinte-2); font-size: .9rem; }
.einleitung.mit-bild { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 48rem) { .einleitung.mit-bild { grid-template-columns: minmax(12rem, 18rem) 1fr; } }
.portraet { margin: 0; position: relative; border: 1px solid var(--linie-stark); background: var(--flaeche); padding: .5rem; }
.portraet::before { content: ""; display: block; height: 3px; background: var(--rot); margin: -.5rem -.5rem .5rem; }
.portraet img { display: block; width: 100%; height: auto; filter: grayscale(.15); }
@media (min-width: 60rem) { .radar .hud-ecke { top: 1rem; bottom: auto; } .radar .anhalten { top: 1rem; bottom: auto; } }

/* Sprungliste unten am Lineal nur, wenn neben dem Inhalt (80 rem) Platz ist; sonst reicht das Menue oben */
.abschnitte-liste-rahmen { display: none; }
@media (min-width: 98rem) { .abschnitte-liste-rahmen { display: block; } .abschnitte-liste { display: grid; } }

/* ---------- Pruefung 12.10.: Sprunglink, Handy-Menue, schmale Schirme, Verweise, Fusslinks ---------- */
.sprung { position: absolute; left: .5rem; top: -4rem; z-index: 60; padding: .5rem .8rem; background: var(--tinte); color: var(--papier); }
.sprung:focus { top: .5rem; }
.verweis { color: var(--rot); font-weight: 600; white-space: nowrap; text-decoration: none; }
.verweis:hover, .verweis:focus-visible { text-decoration: underline; }
.fuss a { display: inline-block; padding-block: .45rem; }
.kontakt-knopf { padding: 1.4rem 1.25rem 0; margin: 0; }
@media (width < 60rem) {
  :root { --kopf-h: 5.9rem; }
  .kopf-innen { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 3.5rem 2.4rem; gap: 0 1rem; align-items: center; }
  .kopf nav { display: flex; grid-row: 2; grid-column: 1 / -1; gap: 1.1rem; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
    margin: 0 -1rem; padding: 0 1rem; height: 100%; align-items: center; border-top: 1px solid var(--linie); font-size: .98rem; }
  .kopf nav::-webkit-scrollbar { display: none; }
  .leiste { position: static; }
  html { scroll-padding-top: calc(var(--kopf-h) + .5rem); }
  .abschnitt { scroll-margin-top: 0; }
}
/* Menuezeile laeuft bei sehr schmalen Schirmen rechts aus: weiche Kante zeigt, dass sie sich wischen laesst */
@media (width < 24rem) { .kopf nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent); } }
@media (max-width: 22rem) {
  .kopf-innen { gap: 0 .6rem; padding: 0 .6rem; }
  .kopf nav { margin: 0 -.6rem; padding: 0 .6rem; }  /* sonst ragt die Menuezeile 6 px ueber den Rand */
  .kopf .logo { height: 1.7rem; min-width: 0; }
}

.textblock .b-titel { padding-left: 0; padding-right: 0; }  /* sonst doppelt eingerueckt */

/* ---------- Runde 4 (12.10.2026): naeher an die Vorlage ---------- */
@media (min-width: 60rem) {
  /* Startpunkt jedes Buchstabens = seine Stelle im senkrechten Wort im Lineal (Mittelwert-Vorschub je Buchstabe) */
  .leiste .flug span {
    --adv: .7em;
    --rand: max(0px, calc((100vw - var(--schiene) - 80rem) / 2));
    --dx: calc(var(--schiene) / 2 + var(--rand) + 1.25rem + (var(--n) - 1 - var(--i)) * var(--adv) + var(--adv) / 2);
    --dy: calc(4.5rem - 1.5rem + (var(--n) - 1 - var(--i)) * var(--adv) + var(--adv) / 2);
  }
}
@keyframes woelben {
  0%   { transform: perspective(520px) scale(1); }
  14%  { transform: perspective(520px) rotateX(10deg) rotateY(-13deg) scale(1.09, .94); }
  32%  { transform: perspective(520px) rotateX(-6deg) rotateY(8deg) scale(.97, 1.05); }
  56%  { transform: perspective(520px) rotateX(2deg) rotateY(-3deg) scale(1.03); }
  100% { transform: perspective(520px) scale(1.04); }
}
/* Lineal: Striche zeichnen sich beim Laden von oben nach unten (Vorlage: 1 s je Strich, 10 ms Staffel, power3.out) */
@keyframes strich { from { scale: 0 1; opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .lineal .t { animation: strich 1s cubic-bezier(.215, .61, .355, 1) both; animation-delay: calc(.35s + var(--k) * 10ms); }
  .lineal .zahl { animation: einblenden .5s both; animation-delay: calc(.45s + var(--k) * 10ms); }
  .nadel { opacity: 1; }
}
/* Kaertchen auf den Spiralarmen: Geburt in der Mitte, Fahrt nach aussen entlang der gezeichneten Arme
   (Radius 6 -> 47 cqi bei 1,05 Umdrehungen = Bahn der Arme), aufrecht, verblassen am Rand */
.fbahn { position: absolute; inset: 0; pointer-events: none; rotate: var(--a); z-index: 2; }
.fanker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; translate: 24cqi 0; }
.fbahn.h1 .fanker { translate: 38cqi 0; }
.fk { position: absolute; translate: -50% -50%; rotate: calc(var(--a) * -1); display: flex; gap: .35rem; align-items: center; white-space: nowrap;
  padding: .28rem .5rem; border: 1px solid var(--linie-stark); background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  font: 400 clamp(.5rem, .95cqi, .66rem)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-2); }
.fk i { width: .38rem; height: .38rem; border-radius: 50%; background: var(--rot); flex: none; }
.a0 { --a: 0deg; } .a1 { --a: 60deg; } .a2 { --a: 120deg; } .a3 { --a: 180deg; } .a4 { --a: 240deg; } .a5 { --a: 300deg; }
@media (width < 48rem) { .fbahn.h1 { display: none; } }
@keyframes spirale { from { rotate: var(--a); } to { rotate: calc(var(--a) + 378deg); } }
@keyframes hinaus { from { translate: 6cqi 0; } to { translate: 47cqi 0; } }
@keyframes mitdrehen { from { rotate: calc(var(--a) * -1); } to { rotate: calc(var(--a) * -1 - 378deg); } }
@keyframes leben { 0% { opacity: 0; scale: .35; } 14% { opacity: .95; scale: .55; } 82% { opacity: .95; scale: 1; } 100% { opacity: 0; scale: 1.05; } }
@media (prefers-reduced-motion: no-preference) {
  .fbahn { --fahrt: 42s; animation: spirale var(--fahrt) linear infinite; animation-delay: var(--v); }
  .fanker { animation: hinaus var(--fahrt) linear infinite; animation-delay: var(--v); }
  .fk { animation: mitdrehen var(--fahrt) linear infinite, leben var(--fahrt) linear infinite; animation-delay: var(--v), var(--v); }
}
.lineal .t0 { top: 0%; --k: 0; }
.lineal .t1 { top: 1%; --k: 1; }
.lineal .t2 { top: 2%; --k: 2; }
.lineal .t3 { top: 3%; --k: 3; }
.lineal .t4 { top: 4%; --k: 4; }
.lineal .t5 { top: 5%; --k: 5; }
.lineal .t6 { top: 6%; --k: 6; }
.lineal .t7 { top: 7%; --k: 7; }
.lineal .t8 { top: 8%; --k: 8; }
.lineal .t9 { top: 9%; --k: 9; }
.lineal .t10 { top: 10%; --k: 10; }
.lineal .t11 { top: 11%; --k: 11; }
.lineal .t12 { top: 12%; --k: 12; }
.lineal .t13 { top: 13%; --k: 13; }
.lineal .t14 { top: 14%; --k: 14; }
.lineal .t15 { top: 15%; --k: 15; }
.lineal .t16 { top: 16%; --k: 16; }
.lineal .t17 { top: 17%; --k: 17; }
.lineal .t18 { top: 18%; --k: 18; }
.lineal .t19 { top: 19%; --k: 19; }
.lineal .t20 { top: 20%; --k: 20; }
.lineal .t21 { top: 21%; --k: 21; }
.lineal .t22 { top: 22%; --k: 22; }
.lineal .t23 { top: 23%; --k: 23; }
.lineal .t24 { top: 24%; --k: 24; }
.lineal .t25 { top: 25%; --k: 25; }
.lineal .t26 { top: 26%; --k: 26; }
.lineal .t27 { top: 27%; --k: 27; }
.lineal .t28 { top: 28%; --k: 28; }
.lineal .t29 { top: 29%; --k: 29; }
.lineal .t30 { top: 30%; --k: 30; }
.lineal .t31 { top: 31%; --k: 31; }
.lineal .t32 { top: 32%; --k: 32; }
.lineal .t33 { top: 33%; --k: 33; }
.lineal .t34 { top: 34%; --k: 34; }
.lineal .t35 { top: 35%; --k: 35; }
.lineal .t36 { top: 36%; --k: 36; }
.lineal .t37 { top: 37%; --k: 37; }
.lineal .t38 { top: 38%; --k: 38; }
.lineal .t39 { top: 39%; --k: 39; }
.lineal .t40 { top: 40%; --k: 40; }
.lineal .t41 { top: 41%; --k: 41; }
.lineal .t42 { top: 42%; --k: 42; }
.lineal .t43 { top: 43%; --k: 43; }
.lineal .t44 { top: 44%; --k: 44; }
.lineal .t45 { top: 45%; --k: 45; }
.lineal .t46 { top: 46%; --k: 46; }
.lineal .t47 { top: 47%; --k: 47; }
.lineal .t48 { top: 48%; --k: 48; }
.lineal .t49 { top: 49%; --k: 49; }
.lineal .t50 { top: 50%; --k: 50; }
.lineal .t51 { top: 51%; --k: 51; }
.lineal .t52 { top: 52%; --k: 52; }
.lineal .t53 { top: 53%; --k: 53; }
.lineal .t54 { top: 54%; --k: 54; }
.lineal .t55 { top: 55%; --k: 55; }
.lineal .t56 { top: 56%; --k: 56; }
.lineal .t57 { top: 57%; --k: 57; }
.lineal .t58 { top: 58%; --k: 58; }
.lineal .t59 { top: 59%; --k: 59; }
.lineal .t60 { top: 60%; --k: 60; }
.lineal .t61 { top: 61%; --k: 61; }
.lineal .t62 { top: 62%; --k: 62; }
.lineal .t63 { top: 63%; --k: 63; }
.lineal .t64 { top: 64%; --k: 64; }
.lineal .t65 { top: 65%; --k: 65; }
.lineal .t66 { top: 66%; --k: 66; }
.lineal .t67 { top: 67%; --k: 67; }
.lineal .t68 { top: 68%; --k: 68; }
.lineal .t69 { top: 69%; --k: 69; }
.lineal .t70 { top: 70%; --k: 70; }
.lineal .t71 { top: 71%; --k: 71; }
.lineal .t72 { top: 72%; --k: 72; }
.lineal .t73 { top: 73%; --k: 73; }
.lineal .t74 { top: 74%; --k: 74; }
.lineal .t75 { top: 75%; --k: 75; }
.lineal .t76 { top: 76%; --k: 76; }
.lineal .t77 { top: 77%; --k: 77; }
.lineal .t78 { top: 78%; --k: 78; }
.lineal .t79 { top: 79%; --k: 79; }
.lineal .t80 { top: 80%; --k: 80; }
.lineal .t81 { top: 81%; --k: 81; }
.lineal .t82 { top: 82%; --k: 82; }
.lineal .t83 { top: 83%; --k: 83; }
.lineal .t84 { top: 84%; --k: 84; }
.lineal .t85 { top: 85%; --k: 85; }
.lineal .t86 { top: 86%; --k: 86; }
.lineal .t87 { top: 87%; --k: 87; }
.lineal .t88 { top: 88%; --k: 88; }
.lineal .t89 { top: 89%; --k: 89; }
.lineal .t90 { top: 90%; --k: 90; }
.lineal .t91 { top: 91%; --k: 91; }
.lineal .t92 { top: 92%; --k: 92; }
.lineal .t93 { top: 93%; --k: 93; }
.lineal .t94 { top: 94%; --k: 94; }
.lineal .t95 { top: 95%; --k: 95; }
.lineal .t96 { top: 96%; --k: 96; }
.lineal .t97 { top: 97%; --k: 97; }
.lineal .t98 { top: 98%; --k: 98; }
.lineal .t99 { top: 99%; --k: 99; }
.lineal .t100 { top: 100%; --k: 100; }
.lineal .z0 { --k: 0; }
.lineal .z10 { --k: 10; }
.lineal .z20 { --k: 20; }
.lineal .z30 { --k: 30; }
.lineal .z40 { --k: 40; }
.lineal .z50 { --k: 50; }
.lineal .z60 { --k: 60; }
.lineal .z70 { --k: 70; }
.lineal .z80 { --k: 80; }
.lineal .z90 { --k: 90; }
.lineal .z100 { --k: 100; }
.leiste .flug.n1 { --n: 1; }
.leiste .flug.n2 { --n: 2; }
.leiste .flug.n3 { --n: 3; }
.leiste .flug.n4 { --n: 4; }
.leiste .flug.n5 { --n: 5; }
.leiste .flug.n6 { --n: 6; }
.leiste .flug.n7 { --n: 7; }
.leiste .flug.n8 { --n: 8; }
.leiste .flug.n9 { --n: 9; }
.leiste .flug.n10 { --n: 10; }
.leiste .flug.n11 { --n: 11; }
.leiste .flug.n12 { --n: 12; }
.leiste .flug.n13 { --n: 13; }
.leiste .flug.n14 { --n: 14; }
.fbahn.a0.h0 { --v: -0.00s; }
.fbahn.a0.h1 { --v: -21.00s; }
.fbahn.a1.h0 { --v: -7.98s; }
.fbahn.a1.h1 { --v: -28.98s; }
.fbahn.a2.h0 { --v: -15.96s; }
.fbahn.a2.h1 { --v: -36.96s; }
.fbahn.a3.h0 { --v: -2.94s; }
.fbahn.a3.h1 { --v: -23.94s; }
.fbahn.a4.h0 { --v: -10.92s; }
.fbahn.a4.h1 { --v: -31.92s; }
.fbahn.a5.h0 { --v: -18.90s; }
.fbahn.a5.h1 { --v: -39.90s; }
.reiter span:nth-child(1) { --i: 0; }
.reiter span:nth-child(2) { --i: 1; }
.reiter span:nth-child(3) { --i: 2; }
.reiter span:nth-child(4) { --i: 3; }
.reiter span:nth-child(5) { --i: 4; }
.reiter span:nth-child(6) { --i: 5; }
.reiter span:nth-child(7) { --i: 6; }
.reiter span:nth-child(8) { --i: 7; }
.reiter span:nth-child(9) { --i: 8; }
.reiter span:nth-child(10) { --i: 9; }
.reiter span:nth-child(11) { --i: 10; }
.reiter span:nth-child(12) { --i: 11; }
.reiter span:nth-child(13) { --i: 12; }
.reiter span:nth-child(14) { --i: 13; }

/* ---------- Fassung mit Skript (html.js): Naehe, Woelbung, Farbsaum, Welle, Lupe am Lineal ---------- */
html.js .karte .k-innen { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  html.js .karte .k-innen { transform: perspective(520px) translate(var(--zx, 0px), var(--zy, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--zs, 1)); }
  html.js .fk { transform: scale(var(--zs, 1)); }
}
/* Farbsaum nur, solange er wirkt (Pruefung: drop-shadow mit 0 px faerbte Kaertchen und Schatten rosa) */
html.js .saum { filter: drop-shadow(calc(var(--flare, 0) * -1px) 0 0 var(--saum-rot)) drop-shadow(calc(var(--flare, 0) * 1px) 0 0 var(--saum-blau)); }
html.js .karte .k-innen::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--glanz, 0);
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgb(255 255 255 / .55), rgb(255 255 255 / 0) 55%); mix-blend-mode: soft-light; }
html.js .karte:hover .k-innen { animation: none; }   /* die Woelbung folgt jetzt dem Zeiger */
/* Das Skript bremst selbst (Zielkarte schnell, Rest langsam): CSS-Pause beim Ueberfahren aufheben, bei Tastaturfokus bleibt sie */
@media (hover: hover) {   /* nur mit echter Maus; nach Antippen bleibt :hover sonst haengen */
  html.js body:not(:has(.info:popover-open)) .buehne:has(.karte:hover):not(:has(.karte:focus-visible)) :is(.bahn, .karte, .anker, .fbahn, .fanker, .fk) { animation-play-state: running; }
}
html.js .karte.schub .k-innen { scale: 1.12; transition: scale .18s cubic-bezier(.2, .8, .2, 1); }
.welle { position: absolute; z-index: 15; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 1px solid var(--rot);
  pointer-events: none; animation: welle 1.8s cubic-bezier(.2, .6, .3, 1) forwards; }
@keyframes welle { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 90; } }
@media (hover: hover) and (pointer: fine) { html.js.lineal-aktiv .lineal { cursor: ns-resize; } }
html.js .lineal .t { transition: none; }
.geist { position: absolute; right: 0; width: calc(var(--schiene) + 1.25rem); height: 3px; background: var(--tinte); opacity: 0; pointer-events: none; z-index: 3; translate: 0 -1px; }
.geist.sichtbar { opacity: .85; }
.geist b { position: absolute; right: .35rem; top: -16px; font: 400 10px/12px var(--f-mono); color: var(--tinte); background: var(--papier); padding: 0 2px; }

/* =====================================================================================================================
   UNTERSEITEN (body.unterseite): Impressum und Datenschutz mit relativen Verweisen, Fehlerseiten mit absoluten Verweisen
   und ohne Skript (sie erscheinen auch unter cube., auth. usw.). Gleicher Kopf, gleiche Leiste, kein Lineal.
   ===================================================================================================================== */
body.unterseite { min-height: 100svh; display: flex; flex-direction: column; }
body.unterseite main { flex: 1 0 auto; }
body.unterseite .fuss { margin-right: 0; }
.blatt { position: relative; overflow-x: clip; }
.blatt .leiste a { color: var(--tinte-2); text-decoration: none; }
.blatt .leiste a:hover, .blatt .leiste a:focus-visible { color: var(--rot); }
.recht-kopf { padding: 3rem 1.25rem 2rem; }
.recht-kopf h1, .fehler-text h1 { margin: 0; max-width: 48rem; font: 600 clamp(2.2rem, 5vw, 3.6rem)/1.02 var(--f-norm); letter-spacing: -.015em; text-wrap: balance; }
p.kurz { margin: 1.1rem 0 0; max-width: 46rem; font-size: 1.125rem; color: var(--tinte-2); }
.etikett { display: inline-block; margin-right: .55rem; padding: .2rem .5rem; background: var(--rot-tief); color: #fff; vertical-align: .15em; }
.recht-raster { display: grid; border-top: 1px solid var(--linie); }
@media (min-width: 60rem) { .recht-raster { grid-template-columns: minmax(0, 1fr) 22rem; } }
.recht-text { padding: 1.75rem 1.25rem 2.75rem; max-width: 48rem; }
.recht-text section + section { margin-top: 2.1rem; }
.recht-text h2 { margin: 0 0 .6rem; font: 600 1.4rem/1.2 var(--f-norm); }
.recht-text p, .recht-text li { color: var(--tinte-2); }
.recht-text p { margin: 0 0 .8rem; }
.recht-text ul { margin: 0 0 .8rem; padding-left: 1.2rem; }
.recht-text li + li { margin-top: .35rem; }
.recht-text strong { color: var(--tinte); font-weight: 600; }
.recht-text a, .recht-neben a, .fehler-text a:not(.knopf) { color: var(--rot); text-underline-offset: .18em; overflow-wrap: anywhere; }
.recht-text .stand { margin: 2.2rem 0 0; color: var(--zart); font: 400 .75rem/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.recht-neben { padding: 1.75rem 1.25rem 2.5rem; background: var(--flaeche); border-top: 1px solid var(--linie); }
@media (min-width: 60rem) { .recht-neben { border-top: 0; border-left: 1px solid var(--linie); } }
.recht-neben section + section { margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid var(--linie); }
.recht-neben h2 { margin: 0 0 .8rem; color: var(--zart); font: 400 .6875rem/1.4 var(--f-mono); letter-spacing: .15em; text-transform: uppercase; }
.recht-neben p { margin: 0 0 .7rem; color: var(--tinte-2); }
.recht-neben dl { margin: 0; display: grid; gap: .6rem; }
.recht-neben dl div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: .6rem; }
.recht-neben dt { font: 600 1rem/1.35 var(--f-norm); }
.recht-neben dd { margin: 0; color: var(--tinte-2); font-size: .95rem; line-height: 1.4; }

/* Fehlerseiten: kleine Peilscheibe mit dem Code in der Mitte, daneben (am Handy darunter) Erklaerung und Hilfe */
.fehler-buehne { display: grid; overflow: clip; border-bottom: 1px solid var(--linie);
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center; }
@media (min-width: 60rem) { .fehler-buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; min-height: calc(100svh - var(--kopf-h) - 6rem); } }
.fehler-scheibe { position: relative; width: min(100%, 32rem); aspect-ratio: 1; margin: 2rem auto 0; container-type: inline-size; }
@media (width < 60rem) { .fehler-scheibe { width: min(80vw, 20rem); } }
.f-mitte { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; justify-items: center; gap: .5rem; width: 62cqi; text-align: center; }
.f-mitte::before { content: ""; position: absolute; inset: -20% -12%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--halo) 60%, transparent); }
.f-code { margin: 0; color: var(--rot); font: 700 clamp(2.6rem, 17cqi, 6rem)/1 var(--f-wort); font-stretch: 125%; letter-spacing: -.02em; }
.f-code.lang { font-size: clamp(1.8rem, 11cqi, 3.8rem); }
.f-peilung { margin: 0; color: var(--zart); }
.fehler-text { padding: 2rem 1.25rem 3rem; max-width: 40rem; }
.fehler-text p.kurz { margin-top: 1rem; }
.fehler-text > p:not(.kurz) { color: var(--tinte-2); margin: .9rem 0 0; }
.fehler-text h2 { margin: 2rem 0 .7rem; font: 600 1.3rem/1.2 var(--f-norm); }
.fehler-text ol { margin: 0 0 1.9rem; padding-left: 1.3rem; display: grid; gap: .5rem; color: var(--tinte-2); }
@media (prefers-reduced-motion: no-preference) {
  .f-mitte > * { animation: einfliegen .9s cubic-bezier(.22, 1, .36, 1) both; }
  .f-mitte > :nth-child(2) { animation-delay: .15s; }
}

/* Druck: Text ohne Bewegung, Kopf, Lineal und Schalter */
@media print {
  .kopf, .sprung, .schiene, .zeiger, .fortschritt, .abschnitte-liste-rahmen, .anhalten, .hud-ecke, .reiter, .leiste .flug, [popover] { display: none !important; }
  body { background: #fff; color: #000; }
  .leiste { position: static; }
  .abschnitt, .radar, .titel-handy, .fuss { padding-right: 0; margin-right: 0; }
}