/* Fuhrmann Website - gemeinsames Stylesheet (Premium-Pass)
   Vanilla CSS. Trust & Authority fuer Versicherungsmakler. Heller Unterseiten-Shell.
   Display-Serif (Fraunces) fuer Ueberschriften, Inter fuer Body/UI. */

/* ---------- Tokens ---------- */
:root{
  --blue:#0092CB; --accent:#0092CB; --accent-ink:#0A6FA0; --accent-deep:#075A82;
  --accent-soft:#E8F4FB; --accent-soft2:#F3F9FD; --accent-bright:#4FC3F0;
  --ink:#0B1B26; --ink-2:#26333D; --grey:#566571; --muted:#6A7681;
  --line:#E4E9ED; --line-soft:#EEF2F5; --hair:#D9E0E6;
  --bg:#ffffff; --surface:#ffffff; --tint:#F5F8FB; --navy:#06263E; --navy-2:#0C3E60;
  --cyan:#7FE0FF;
  --r-sm:10px; --r:14px; --r-lg:18px; --r-pill:999px;
  --maxw:1180px;
  --shadow-xs:0 1px 2px rgba(11,27,38,.04);
  --shadow-sm:0 1px 2px rgba(11,27,38,.05),0 6px 20px -12px rgba(11,27,38,.18);
  --shadow-md:0 2px 6px -2px rgba(7,58,82,.08),0 18px 44px -22px rgba(7,58,82,.30);
  --shadow-lg:0 3px 8px -3px rgba(7,58,82,.10),0 16px 32px -16px rgba(7,58,82,.22),0 34px 80px -30px rgba(7,58,82,.34);
  --ring:0 0 0 3px rgba(0,146,203,.30);
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

/* Akzentfarbe je Kundengruppe (Tür-Farbe dominiert) */
/* Welt-Akzentfarben EINMALIG hier (Single Source). Sowohl body[data-group] als
   auch die Startseiten-Panels (index.html via var(--w-*)) beziehen sich darauf,
   damit eine Farbaenderung ueberall greift, auch auf der handgebauten Startseite. */
:root{
  --w-privat:#0092CB;--w-privat-ink:#0A6FA0;--w-privat-deep:#075A82;--w-privat-soft:#E8F4FB;--w-privat-soft2:#F3F9FD;--w-privat-bright:#4FC3F0;
  --w-firmen:#0E5C86;--w-firmen-ink:#0E5C86;--w-firmen-deep:#0A4868;--w-firmen-soft:#E7EFF5;--w-firmen-soft2:#F2F6FA;--w-firmen-bright:#5AA6D4;
  /* Schausteller auf Tuerkis umgestellt am 27.07.2026 (Entscheidung Maik).
     Der Grundton #0A8FA6 ist gesetzt; die uebrigen fuenf Stufen sind daraus
     abgeleitet, nicht geraten: gleicher Farbton H189, und die Helligkeiten so
     gewaehlt, dass jede Stufe denselben Kontrastwert auf Weiss trifft wie die
     entsprechende Stufe der drei anderen Welten.

     Gemessen, Schwelle 4,5:1:
       ink  #086F81   5,83 auf Weiss | 5,01 auf soft | 5,40 auf soft2
       deep #065765   8,21 auf Weiss | 7,05 auf soft | 7,59 auf soft2

     Die beiden Flaechentoene sind kuehle Ableitungen desselben Farbtons und
     nicht mehr das warme Beige.

     Eine Zwischenfassung vom selben Tag stand auf Cyan #079FBB. Sie ist nie in
     einen Commit gelangt und vollstaendig durch diese Familie ersetzt. */
  --w-schausteller:#0A8FA6;--w-schausteller-ink:#086F81;--w-schausteller-deep:#065765;--w-schausteller-soft:#E0F1F3;--w-schausteller-soft2:#EEF8F9;--w-schausteller-bright:#34BBD2;
  --w-verwalter:#0E7C84;--w-verwalter-ink:#0B666D;--w-verwalter-deep:#084E54;--w-verwalter-soft:#E4F2F2;--w-verwalter-soft2:#F1F8F8;--w-verwalter-bright:#4FC2C9;
}
body[data-group="privat"]{--accent:var(--w-privat);--accent-ink:var(--w-privat-ink);--accent-deep:var(--w-privat-deep);--accent-soft:var(--w-privat-soft);--accent-soft2:var(--w-privat-soft2);--accent-bright:var(--w-privat-bright)}
body[data-group="firmen"]{--accent:var(--w-firmen);--accent-ink:var(--w-firmen-ink);--accent-deep:var(--w-firmen-deep);--accent-soft:var(--w-firmen-soft);--accent-soft2:var(--w-firmen-soft2);--accent-bright:var(--w-firmen-bright)}
body[data-group="schausteller"]{--accent:var(--w-schausteller);--accent-ink:var(--w-schausteller-ink);--accent-deep:var(--w-schausteller-deep);--accent-soft:var(--w-schausteller-soft);--accent-soft2:var(--w-schausteller-soft2);--accent-bright:var(--w-schausteller-bright)}
body[data-group="verwalter"]{--accent:var(--w-verwalter);--accent-ink:var(--w-verwalter-ink);--accent-deep:var(--w-verwalter-deep);--accent-soft:var(--w-verwalter-soft);--accent-soft2:var(--w-verwalter-soft2);--accent-bright:var(--w-verwalter-bright)}
/* Weisse Schrift auf dem Schausteller-Grundton erreicht nur 3,82:1, gefordert
   sind 4,5:1. Der alte warme Ton war dunkler und kam auf 5,18:1; das Tuerkis
   ist heller, und das trifft jede Flaeche, die weissen Text auf --accent
   stellt. In dieser Welt sind das genau zwei: die Auszeichnung im Hero und der
   Sprunglink. Beide nehmen deshalb die Textstufe, gemessen 5,83:1. Nur diese
   Welt; die drei anderen bleiben unberuehrt.
   Nicht ueber den Grundton geloest, weil der eine Geschmacksentscheidung ist
   und gesetzt bleibt. Zum Vergleich: Privat hat mit 3,52:1 dieselbe Lage und
   ist hier bewusst nicht mitgeaendert. */
body[data-group="schausteller"] .tag,
body[data-group="schausteller"] .skip{background:var(--accent-ink)}

/* ---------- Reset / Basis ---------- */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--font-sans);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.65;font-size:17px;overflow-x:clip}
/* `clip` und nicht `hidden` am body (13.09.2026). Traegt html schon overflow-x:hidden,
   geht dieser Wert an den Viewport, und ein zweites `hidden` am body macht den
   body selbst zum Scrollkasten, der nie scrollt. Alles, was darin mit
   position:sticky klebt, klebt dann an diesem Kasten statt am Fenster und
   bewegt sich nie (gemessen: der Klebe-Fuss unter 900 px blieb hinter dem
   Inhalt). `clip` schneidet waagerecht genauso ab, erzeugt aber keinen
   Scrollkasten; Browser ohne `clip` lassen die Zeile aus, und html haelt den
   waagerechten Ueberlauf allein. */
a{color:var(--accent-ink);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--accent-deep)}

/* Links im Fliesstext werden unterstrichen (Fund A2).
   WCAG 1.4.1 verlangt, dass ein Link im Text nicht allein durch Farbe erkennbar ist.
   Entweder hebt er sich mit mindestens 3:1 vom Umgebungstext ab, oder er traegt ein
   zusaetzliches Merkmal. --accent-ink erreicht gegen den Fliesstext nur 2,33:1
   (gegen Weiss dagegen einwandfreie 5,53:1), also fehlte das Merkmal.

   Bewusst die Unterstreichung und nicht ein dunklerer Linkton: --accent-ink traegt seit
   AP1 den Kontrast des Primaer-CTA (5,53:1 gegen Weiss). Ein Eingriff an der Farbe haette
   diesen Wert erneut zur Disposition gestellt, ohne dass es noetig ist. Die Unterstreichung
   loest die Anforderung an Ort und Stelle und laesst das Token unberuehrt.
   Muster ist nicht neu im Projekt: .imp dd a unterstreicht seit dem Rechtsseiten-Umbau.

   Greift nur bei klassenlosen Links direkt in Textelementen. Alles mit eigener Klasse
   ist ein gestaltetes Bedienelement (Pill, Karte, Kachel) und bleibt unberuehrt. */
main :is(p, li, label, dd) > a:not([class]){
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:from-font}

/* Ausnahme: Diese drei sind Navigation, kein Fliesstext. Das Inhaltsverzeichnis der
   Datenschutzseite (22 Eintraege), die Sprungnavigation der Produktseiten und die
   Brotkrume bestehen ausschliesslich aus Links; dort unterscheidet nichts einen Link
   vom Umgebungstext, weil es keinen Umgebungstext gibt. Die Regel 1.4.1 zielt auf
   Links *im* Text. Hoehere Spezifitaet als die Regel darueber, damit sie gewinnt. */
main :is(.ds-toc, .crumbs, .sprungnav) a:not([class]){text-decoration:none}
img{max-width:100%;display:block}
strong,b{font-weight:600}
::selection{background:var(--accent-soft);color:var(--accent-deep)}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--ink);
  line-height:1.12;letter-spacing:-.01em;font-optical-sizing:auto}
h1{font-size:clamp(34px,4.6vw,52px);letter-spacing:-.02em}
h2{font-size:clamp(25px,3.1vw,36px);letter-spacing:-.015em}
h1,h2,h3{text-wrap:balance}
h3{font-size:19px;letter-spacing:-.01em}
h4{font-size:15px}
p{color:var(--ink-2)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.muted{color:var(--grey)}
.center{text-align:center}

/* ---------- A11y ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;z-index:200;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

/* ---------- Icons ---------- */
.ic{width:20px;height:20px;flex:none;color:inherit;vertical-align:-.18em}
.ic-sm{width:16px;height:16px;vertical-align:-.16em}
.ic-lg{width:28px;height:28px}
.burger .ic{width:22px;height:22px}
.pill .ic{width:18px;height:18px}

/* ---------- Buttons / Pills ---------- */
.pill{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:var(--r-pill);
  font-family:var(--font-sans);font-size:15px;font-weight:600;cursor:pointer;line-height:1;min-height:46px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);white-space:nowrap}
/* Primaer-CTA: Verlauf laeuft von --accent-ink nach --accent-deep (AP1/S1, Audit F1).
   Vorher startete er bei color-mix(--accent 82%, #fff) und endete auf --accent; weisser
   Text erreichte damit nur 2,79:1 (Oberkante) bis 3,52:1 (Unterkante) und verfehlte
   WCAG 2.2 AA 1.4.3 (4,5:1) auf jeder Seite. Der reine Tausch --accent -> --accent-ink
   aus der Audit-Empfehlung genuegt nicht: die aufgehellte Oberkante bleibt bei 3,91:1
   (Privat), 4,41:1 (Schausteller) und 4,46:1 (Verwalter). Erst ohne Aufhellung liegt der
   gesamte Verlauf ueber dem Grenzwert; schlechtester Punkt aller vier Welten ist jetzt
   5,53:1 (Privat, Oberkante). Die Markenfarbe --accent bleibt fuer Flaechen, Rahmen,
   Icons und den Schlagschatten erhalten, dort gilt 3:1 nach 1.4.11 und wird eingehalten. */
.pill-blue{background:linear-gradient(180deg,var(--accent-ink),var(--accent-deep));color:#fff;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
.pill-blue:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px color-mix(in srgb,var(--accent) 70%,transparent);color:#fff}
.pill-line{border:1px solid var(--line);color:var(--ink);background:#fff;box-shadow:var(--shadow-xs)}
.pill-line:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-soft2)}
.pill-ghost{color:var(--accent-ink);background:transparent;padding-left:8px;padding-right:8px}
.pill-ghost:hover{color:var(--accent-deep);background:var(--accent-soft2)}

/* ---------- Header (zweizeilig: Kundengruppen-Toggle + Themenleiste, nach Allianz-Vorbild) ---------- */
.site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line-soft)}
.site-header .wrap{max-width:1280px}
.hdr-row1 .r1{display:flex;align-items:center;gap:20px;min-height:94px;padding:20px 0}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img,.brand svg{height:83px;width:auto}
.brand svg{display:block}
/* Kutsche im Inline-Logo nimmt die Farbe der aktiven Kundengruppe an; Text bleibt schwarz */
.brand .fil16{fill:var(--accent);transition:fill .2s var(--ease)}
.tel{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.tel:hover{color:var(--accent-deep)}
/* Rueckmeldung Monique Hildebrandt, 27.07.2026: Die Festnetznummer brach im
   Fliesstext der eVB-Seite hinter "0391 73 33" um. Telefonnummern gehoeren nie
   auf zwei Zeilen, deshalb gilt die Regel fuer jeden tel:-Link, nicht nur dort. */
a[href^="tel:"]{white-space:nowrap}

/* Kundengruppen-Toggle (Segmented Control) */
.gtoggle{display:flex;align-items:center;flex:0 0 auto;background:var(--tint);border:1px solid var(--hair);border-radius:var(--r-pill);padding:4px}
.gtoggle a{position:relative;display:inline-flex;align-items:center;gap:8px;background:none;border:0;font:inherit;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--grey);
  padding:8px 24px;min-height:38px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease),box-shadow .25s var(--ease)}
.gtoggle a::before{content:"";width:7px;height:7px;border-radius:50%;background:transparent;flex:none;transition:background .2s var(--ease)}
.gtoggle a:hover{color:var(--ink)}
.gtoggle a.on{background:#fff;color:var(--accent-deep);
  box-shadow:0 2px 6px -2px color-mix(in srgb,var(--accent) 22%,transparent),0 12px 26px -14px color-mix(in srgb,var(--accent) 48%,transparent)}
.gtoggle a.on::before{background:var(--accent)}

/* Utility-Navigation + CTA rechts */
.r1right{margin-left:auto;display:flex;align-items:center;gap:16px}
.util{display:flex;gap:2px}
.util a{font-size:13.5px;font-weight:500;color:var(--ink-2);padding:8px 10px;border-radius:8px;white-space:nowrap}
.util a:hover{color:var(--ink);background:var(--tint)}
.util a[aria-current="page"]{color:var(--accent-deep)}
.r1right .pill{padding:10px 18px;min-height:42px;font-size:14px}

/* Themenleiste (Zeile 2, wechselt je Kundengruppe) */
.hdr-row2{border-top:1px solid var(--line-soft)}
.r2{display:flex;align-items:center;gap:16px;height:52px}
.themenav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.themenav::-webkit-scrollbar{display:none}
/* L4 (Nachzuegler, 04.08.2026). `--muted` (#6A7681) auf der Kopfleiste
   (#F4F5F5) ergibt gemessen **4,25:1** und liegt unter den geforderten 4,5:1 --
   derselbe Mangel wie in der Kontrastfamilie vom 28.07., nur an einer Stelle,
   die damals nicht mitgezaehlt wurde. axe meldete ihn auf **jeder** Seite,
   weil die Themenleiste im gemeinsamen Kopf steht.
   Ersatzton nach demselben Muster: `--grey` (#566571), auf #F4F5F5
   nachgerechnet **5,50:1**. Kein Token-Tausch, nur diese Fundstelle -- die
   uebrigen `--muted`-Regeln bleiben, wie sie sind (Ansage Maik: "nur an den
   Fundstellen, nicht sitewide"). */
.tlabel{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
  white-space:nowrap;padding-right:14px;margin-right:6px;border-right:1px solid var(--line-soft)}
.tlabel:hover{color:var(--accent-deep)}
/* Themeneintraege sind seit AP1/S3 Links (.tn) statt Buttons: sie tragen ein echtes
   Ziel (Themenpanel der Uebersichtsseite) und funktionieren dadurch ohne JavaScript.
   Laeuft site.js, faengt es den Klick ab und oeffnet das Mega-Menue. */
/* Waagerechter Innenabstand 8 -> 6 px, gemessen am 17.08.2026. Nach dem
   Menü-Umbau tragen die Kategorien längere Namen; die Schaustellerleiste lief
   bei 1280 px um 29 px über, weil dort neben vier Titeln auch der Badge
   „Spezialmakler" steht. Vier Einträge à zwei Seiten sind 16 px, der Überlauf
   ist damit weg (gemessen: 988 von 988). Die Trefferfläche bleibt über der
   44-px-Grenze: 14 px oben und unten plus Textzeile, gemessen 52 px hoch.

   Der Abstand **zwischen** den Einträgen geht im selben Zug von 4 auf 2 px:
   6 px vom Innenabstand allein reichten nicht (13 px Rest), zusammen sind es
   14 px und der Überlauf ist auf null. */
.themenav .tn{position:relative;display:inline-flex;align-items:center;gap:5px;background:none;border:0;font:inherit;
  font-size:14.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;padding:14px 5px;cursor:pointer}
.themenav .tn:hover{color:var(--accent-deep)}
.themenav .tn .chev{transition:transform .2s var(--ease)}
.themenav .tn.open{color:var(--accent-deep)}
.themenav .tn.open .chev{transform:rotate(180deg)}
.themenav .tn:after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .2s var(--ease);border-radius:2px}
.themenav .tn:hover:after,.themenav .tn.open:after{transform:scaleX(1)}

/* Tarifrechner-Badge u. ä. */
.ibadge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent-ink);
  padding:2px 8px;border-radius:999px;white-space:nowrap;display:inline-block;vertical-align:.1em}

/* Produkt-Suche */
.hsearch{position:relative;display:flex;align-items:center;flex:none}
.hsearch .sic{position:absolute;left:11px;display:flex;color:var(--muted);pointer-events:none}
.hsearch input{width:220px;height:38px;border:1px solid var(--line);border-radius:10px;padding:0 12px 0 34px;
  font:inherit;font-size:14px;color:var(--ink);background:#fff;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.hsearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.sresults{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-width:84vw;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-md);padding:6px;z-index:95}
.sresults[hidden]{display:none}
.sresults a{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:9px 12px;border-radius:8px}
.sresults a:hover{background:var(--tint)}
.sresults b{font-size:14px;font-weight:600;color:var(--ink)}
.sresults .sctx{flex-basis:100%;font-size:12px;color:var(--muted)}
.sresults .snone{padding:11px 12px;font-size:13px;color:var(--muted)}
/* Die Gruppenueberschrift der Dienste (25.08.2026, Ansage Maik). Sie steht
   unter den Versicherungs-Treffern und trennt zwei Sorten Antwort: eine
   Versicherung gehoert einer Kundengruppe, ein Dienst gehoert allen. Die
   Haarlinie oben ist dieselbe wie zwischen den Themengruppen des
   Schaden-Finders; das erste Kind traegt sie nicht, denn ohne
   Versicherungs-Treffer gibt es nichts zu trennen. */
.sresults .sgrp{margin:6px 0 2px;padding:8px 12px 4px;border-top:1px solid var(--line-soft);
  font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink)}
.sresults .sgrp:first-child{border-top:0;margin-top:0}

/* Mega-Menü (volle Breite, je Thema der gewählten Kundengruppe) */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(7,58,82,.4);z-index:85}
.mega[hidden]{display:none}
.megain{position:relative;max-width:1280px;padding:26px 28px 24px}
.megaclose{position:absolute;top:12px;right:20px;background:none;border:0;cursor:pointer;color:var(--ink);
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px}
.megaclose:hover{background:var(--tint);color:var(--accent-deep)}
.megahead{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}
/* Eine Spalte, seit dem 19.08.2026: Die frühere Aufteilung 2fr/1fr trennte
   Produkte mit Rechner in eine eigene Spalte ab. Mit dem Chip ist sie entfallen,
   und damit auch der Modifikator .no-rech, der den Regelfall beschrieb. */
.megacols{display:grid;grid-template-columns:1fr;column-gap:24px;margin-bottom:20px}
.mc-plain{display:grid;grid-template-columns:repeat(var(--mc-spalten,3),1fr);gap:2px 28px;align-content:start}
/* ---------- Untergruppen im Mega-Menü (Stufe 1, 17.08.2026) ---------- */
/* Mit Untergruppen wird aus dem Zeilen-Grid ein Spaltensatz: Jede Gruppe ist ein
   Block, der nicht umbrechen darf, und die Blöcke verteilen sich auf die Spalten.
   Ein Grid hätte die Überschriften über die Spalten gerissen; column-count hält
   Überschrift und Produkte zusammen (break-inside am Block). */
.megacols.has-ug .mc-plain{display:block;column-count:var(--mc-spalten,3);column-gap:28px}
.megacols .mc-ug{margin:0 0 2px;padding:0 6px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
/* Überschrift und Einträge sind ein Kasten: break-inside wirkt auf den Kasten,
   nicht auf zwei Geschwister. Ohne das stand die Überschrift in der einen und
   ihre Einträge in der nächsten Spalte. */
.megacols .mc-ugblock{break-inside:avoid;margin:0 0 18px}
.megacols .mi{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:8px;padding:2px 6px}
.megacols .mi:hover{background:var(--tint)}
.megacols .mi-name{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:15px;font-weight:500;color:var(--ink-2);padding:6px 0}
.megacols .mi:hover .mi-name{color:var(--accent-deep)}
.megapromo{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line-soft);padding-top:20px}
.promo{display:flex;gap:16px;align-items:center;border-radius:12px}
.promo-pic{width:124px;aspect-ratio:16/10;flex:none;border-radius:10px;overflow:hidden;background:var(--tint)}
.promo-pic img{width:100%;height:100%;object-fit:cover;display:block}
.promo-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.promo-tx b{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.25}
.promo-tx small{font-size:13px;color:var(--muted);line-height:1.45}
.promo .more{font-size:13.5px;font-weight:600;color:var(--accent-ink);display:inline-flex;align-items:center;gap:5px;margin-top:2px}
.promo:hover .promo-tx b{color:var(--accent-deep)}

/* Burger */
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;height:46px;padding:0 14px;gap:8px;cursor:pointer;align-items:center;justify-content:center;color:var(--ink);box-shadow:var(--shadow-xs);transition:border-color .2s var(--ease),color .2s var(--ease),transform .1s var(--ease)}
.burger-tx{font-size:14px;font-weight:600;letter-spacing:.02em}
.burger:hover{border-color:var(--accent);color:var(--accent-deep)}
.burger:active{transform:scale(.97)}
/* Sehr schmale Telefone (<360px): Menütext weg, damit das mittige Logo nicht anstößt */
@media(max-width:359px){.burger-tx{display:none}.burger{padding:0 11px}.brand img,.brand svg{height:54px}}

/* ---------- Off-Canvas ---------- */
.offcanvas{position:fixed;inset:0;z-index:120;overflow:hidden;pointer-events:none}
.offcanvas .scrim{position:absolute;inset:0;background:rgba(6,38,62,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .42s var(--ease)}
.offcanvas .panel{position:absolute;top:0;right:0;height:100%;width:min(90vw,390px);background:#fff;padding:18px 22px calc(22px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:-30px 0 70px -30px rgba(6,38,62,.55);transform:translateX(100%);transition:transform .44s cubic-bezier(.16,1,.3,1);will-change:transform}
/* Geschlossen ist unsichtbar, nicht nur hinausgeschoben (Sicht Maik,
   21.08.2026): Das Panel steht geschlossen mit translateX(100%) direkt
   rechts ausserhalb, und sein Schlagschatten (-30px 0 70px) blutete als
   Schattenband am rechten Seitenrand in jede Seite. Nur fuer den JS-Pfad
   (data-oc-js); der skriptfreie :target-Pfad regelt seine Sichtbarkeit
   weiter unten selbst. Die Verzoegerung laesst das Hinausgleiten zu Ende
   laufen, bevor das Panel verschwindet. */
.offcanvas[data-oc-js]{visibility:hidden;transition:visibility 0s linear .46s}
.offcanvas[data-oc-js].open{visibility:visible;transition-delay:0s}
.offcanvas.open{pointer-events:auto}
.offcanvas[inert]{pointer-events:none}
.offcanvas.open .scrim{opacity:1}
.offcanvas.open .panel{transform:translateX(0)}
/* Abschnittsnamen des Menues: Absaetze, keine Ueberschriften. Das Menue steht im
   Kopf, also vor der h1; echte Ueberschriften wuerden die lueckenlose Gliederung aus
   AP2/S4 brechen. Optisch unveraendert -- dieselbe Regel, nur an .oc-h statt an h2. */
.offcanvas .panel .oc-h{font-family:var(--font-sans);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);margin:22px 0 8px}
.offcanvas .panel a{display:block;padding:14px 6px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);font-weight:500}
.offcanvas .panel a:hover{color:var(--accent-deep)}
.oc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.oc-eyebrow{font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.offcanvas .closebtn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 13px;min-height:42px;cursor:pointer;color:var(--ink);font:inherit;font-size:14px;font-weight:600;box-shadow:var(--shadow-xs);transition:border-color .2s var(--ease),color .2s var(--ease),transform .1s var(--ease)}
.offcanvas .closebtn:hover{border-color:var(--accent);color:var(--accent-deep)}
.offcanvas .closebtn:active{transform:scale(.97)}
.offcanvas .closebtn .ic{width:18px;height:18px}
.offcanvas.open .panel>*{animation:ocItem .5s var(--ease) both}
.offcanvas.open .panel>*:nth-child(2){animation-delay:.05s}
.offcanvas.open .panel>*:nth-child(3){animation-delay:.1s}
.offcanvas.open .panel>*:nth-child(4){animation-delay:.15s}
.offcanvas.open .panel>*:nth-child(n+5){animation-delay:.2s}
@keyframes ocItem{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.oc-open,body.oc-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .offcanvas,.offcanvas .scrim,.offcanvas .panel{transition:none}
  .offcanvas.open .panel>*{animation:none}
}
/* Das Mobilmenue nimmt die volle Bildschirmbreite (Ansage Maik, 12.09.2026:
   "das menue sollte die volle breite des bildschirmes einnehmen und wischbar
   bleiben").
   **Nur unterhalb des Tablet-Umbruchs.** 640 px ist die Linie, die dieses
   Projekt schon fuehrt: `@media(min-width:641px)` heisst hier an mehreren
   Stellen "ab Tablet" (Kartenkopf und Kartenfuss der Schadenmeldung). Darueber
   bleibt es bei min(90vw,390px) -- bei 768 px waere ein 768 px breites
   Menuepanel eine Flaeche ohne Inhalt, und die Ansage kam vom Telefon.
   **100vw und nicht 100%.** Geoeffnet traegt html.oc-open overflow:hidden, es
   gibt also keine Leiste, die 100vw und die Fensterbreite auseinanderfallen
   liesse; gemessen bei 320 und 375 px, Panelbreite gleich Viewportbreite.
   **Was unveraendert bleibt:** overflow-y:auto (das Menue bleibt wischbar),
   der Schliessen-Knopf in .oc-top, die Fokusfuehrung und inert in site.js.
   Das Scrim bleibt ebenfalls stehen: Es scheint hinter einem deckenden Panel
   zwar nicht mehr durch, traegt aber den Klick zum Schliessen.
   Die Einkerbungen kommen dazu, weil das Panel jetzt bis an beide Raender
   laeuft: ohne env(safe-area-inset-left/right) stuende der Text auf einem
   Geraet mit abgerundeten Ecken oder im Querformat unter der Kerbe. */
@media(max-width:640px){
  .offcanvas .panel{width:100vw;
    padding-left:calc(22px + env(safe-area-inset-left));
    padding-right:calc(22px + env(safe-area-inset-right))}
}
.oc-groups{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 16px}
.oc-groups button{background:var(--tint);border:1px solid var(--line-soft);border-radius:10px;font:inherit;font-size:14px;font-weight:600;
  color:var(--grey);padding:11px 8px;min-height:44px;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.oc-groups button:hover{color:var(--ink)}
.oc-groups button.on{background:var(--accent-soft2);border-color:var(--accent);color:var(--accent-deep)}
#ocThemes details{border-bottom:1px solid var(--line-soft)}
#ocThemes summary{list-style:none;cursor:pointer;padding:13px 6px;font-size:15px;font-weight:600;color:var(--ink-2);
  display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
#ocThemes summary::-webkit-details-marker{display:none}
#ocThemes summary:after{content:"+";color:var(--accent-ink);font-size:20px;font-weight:400;line-height:1}
#ocThemes details[open] summary:after{content:"\2212"}
#ocThemes .oc-links a{padding-left:18px;font-weight:400;font-size:14.5px}
/* ---------- Zweite Menüebene (Menü-Umbau Stufe 1, 17.08.2026) ---------- */
/* Untergruppen im Mobilmenü sind ein <details> im <details>. Sie stehen offen
   (Attribut open im Markup): Wer eine Kategorie aufklappt, will Produkte sehen,
   nicht eine zweite Reihe Knöpfe. Zuklappen kann er sie trotzdem.
   Die Einrückung staffelt die Ebenen; das Pluszeichen der ersten Ebene wird
   hier zum kleineren Zeichen, damit die Hierarchie auch ohne Farbe lesbar ist. */
#ocThemes .oc-ug{border-bottom:0}
#ocThemes .oc-ug>summary{padding:9px 6px 9px 18px;font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);min-height:38px}
#ocThemes .oc-ug>summary:after{font-size:16px}
#ocThemes .oc-ug .oc-links a{padding-left:30px}
/* ---------- Menü ohne Skript (Paket „Kopf ohne Skript", 25.07.2026) ---------- */
/* Das Menü steht statisch im HTML und öffnet ohne Skript über das Fragment, genau wie
   die Themen-Panels. Gatter ist data-oc-js, das site.js beim Verdrahten setzt --
   **nicht** html:not(.js). Der Unterschied ist der ganze Zweck des Pakets: Die Klasse
   js steht seit F2 im head und ist auch dann gesetzt, wenn site.js gar nicht ankommt.
   Nur das Attribut sagt „das Menü wird wirklich bedient"; ohne es bleibt der
   :target-Weg offen. Die Analyse hatte html:not(.js) vorgeschlagen -- das hätte den
   Störfall nach dem F2-Patch wieder aufgerissen.
   visibility:hidden ersetzt das inert, das site.js setzt: Es nimmt das geschlossene
   Menü aus Tab-Reihenfolge und Vorlesereihenfolge, ohne dass Skript nötig wäre. */
.offcanvas:not([data-oc-js]){visibility:hidden}
.offcanvas:not([data-oc-js]):target{visibility:visible;pointer-events:auto}
.offcanvas:not([data-oc-js]):target .scrim{opacity:1}
.offcanvas:not([data-oc-js]):target .panel{transform:translateX(0)}
/* Der Umschalter „Ich bin …" kann ohne Skript nichts schalten; sein Container steht
   leer und hidden im HTML und wird erst von site.js gefüllt und gezeigt. Ohne die
   eigene Regel gewänne .oc-groups{display:grid} gegen [hidden]. */
.oc-groups[hidden]{display:none}
/* Ohne Skript trägt jede Gruppe ihren Namen, weil alle vier untereinander stehen.
   Mit Skript zeigt der Umschalter die Gruppe an, dann ist der Name doppelt. */
.oc-gname a{font-weight:700;color:var(--ink)}
.offcanvas[data-oc-js] .oc-gname{display:none}
/* Fokus im Menü (Fund L5, Maik 25.07.2026: „hörbar ja, sichtbar nein").
   Der globale Ring --ring hat 30 Prozent Deckung. Auf der weißen Panel-Fläche
   ergibt das nachgemessen rgb(179,222,239) gegen Weiß = **1,44:1**, auf den
   Gruppenschaltern 1,42:1 — deutlich unter den 3:1, die WCAG 2.2 für die
   Sichtbarkeit des Fokus verlangt. Im Menü liegen die Ziele als volle Zeilen
   dicht untereinander; ohne erkennbaren Rahmen weiß niemand, wo er steht.
   Deshalb hier ein deckender Rahmen statt des durchscheinenden Rings.
   Nachgerechnet gegen Weiß, --tint und --accent-soft2: Privat 5,53 / 5,19 / 5,21,
   Firmen 7,26 / 6,81 / 6,68, Schausteller 6,61 / 6,20 / 6,10,
   Verwalter 6,70 / 6,28 / 6,23. Schlechtester Fall 5,19:1.
   outline statt box-shadow, weil outline außerhalb des Rahmens zeichnet und der
   Abstand die Trennung zur Nachbarzeile sichtbar macht. */
.offcanvas .panel :focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}

/* ---------- Mobile Aktionsleiste ---------- */
.actionbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.actionbar a{flex:1;text-align:center;padding:9px 4px;font-size:12px;font-weight:600;color:var(--ink-2);display:flex;flex-direction:column;align-items:center;gap:3px;min-height:58px;justify-content:center}
.actionbar a:hover{color:var(--accent-deep)}
.actionbar a+a{border-left:1px solid var(--line-soft)}
.actionbar .ic{width:21px;height:21px}

/* ---------- Hinweis „Entwurf" ---------- */
.draftnote{background:#FBF6EA;border-bottom:1px solid #EFE4C7;color:#6E5A22;font-size:13px}
.draftnote .wrap{padding:9px 28px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Anmerkungs-Link im Entwurfsbanner (27.07.2026). Dezent, aber ein echtes
   Ziel: 24 px Mindesthoehe ueber die Innenabstaende, damit er auf dem Handy
   sicher zu treffen ist. Die Farbe ist der Fliesston des Banners in dunkler,
   #4A3C14 auf #FBF6EA ergibt gemessen 8,9:1; unterstrichen, damit er auch
   ohne Farbunterschied als Link erkennbar bleibt (WCAG 1.4.1). */
.draftnote .dn-fb{margin-left:auto;color:#4A3C14;text-decoration:underline;
  text-underline-offset:2px;padding:4px 2px;min-height:24px;display:inline-flex;align-items:center}
.draftnote .dn-fb:hover{color:#2E2408}
.draftnote .dn-fb:focus-visible{outline:2px solid #6E5A22;outline-offset:2px;border-radius:4px}
@media(max-width:560px){.draftnote .dn-fb{margin-left:0}}
.draftnote .wrap:before{content:"";width:7px;height:7px;border-radius:50%;background:#C9A227;flex:none}
/* Sichtungs-Marker (21.08.2026): dezenter Zusatz im Entwurfsbanner fuer Seiten,
   die nach einer Ueberarbeitung neu zu sichten sind. Bewusst in der Farbwelt
   des Banners, eine Stufe kraeftiger: #4A3C14 auf #F3E5BE ergibt gemessen
   ueber 7:1. Er lebt nur innerhalb von .draftnote und faellt mit ihm. */
.draftnote .dn-sicht{background:#F3E5BE;color:#4A3C14;font-weight:600;
  padding:2px 9px;border-radius:999px;border:1px solid #E2CD8F}

/* ---------- Hero (hell) ---------- */
.hero-sub{position:relative;background:
  radial-gradient(80% 120% at 85% -10%,var(--accent-soft) 0%,transparent 55%),
  linear-gradient(180deg,var(--tint),#fff 78%);
  border-bottom:1px solid var(--line-soft);overflow:hidden}
.hero-sub .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;padding:64px 28px 68px}
.eyebrow{font-family:var(--font-sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin-bottom:16px;display:inline-flex;align-items:center;gap:9px}
.eyebrow:before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px;display:inline-block}
.hero-sub h1{max-width:15ch}
.hero-sub p.lead{font-size:19px;line-height:1.6;color:var(--grey);margin:18px 0 28px;max-width:48ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.crumbs{font-size:13px;color:var(--grey);padding:0 0 16px;letter-spacing:.01em}
.crumbs a{color:var(--grey)}.crumbs a:hover{color:var(--accent-deep)}

/* ---------- Hero (dunkel, Index-Look, Gruppenfarbe) ---------- */
.hero-dark{position:relative;overflow:hidden;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(80% 120% at 82% -15%,color-mix(in srgb,var(--accent) 58%,transparent) 0%,transparent 52%),
    linear-gradient(158deg,#0B2C42 0%,#06243A 60%,#05203A 100%)}
.hero-dark .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:74px 28px 80px}
.hero-dark h1{color:#fff;max-width:16ch}
.hero-dark p.lead{color:#BFD4E2;font-size:19px;line-height:1.6;margin:18px 0 28px;max-width:48ch}
.hero-dark .eyebrow{color:var(--accent-bright)}
.hero-dark .eyebrow:before{background:var(--accent-bright)}
.tag{display:inline-block;font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--accent);color:#fff;line-height:1.1;vertical-align:middle}
.hero-tag{margin:2px 0 20px}
.hero-dark .tag{background:var(--accent);color:#fff}
.hero-dark .pill-line{border-color:rgba(255,255,255,.45);color:#fff;background:transparent;box-shadow:none}
.hero-dark .pill-line:hover{border-color:#fff;background:rgba(255,255,255,.10);color:#fff}
.hd-media{position:relative;aspect-ratio:16/11;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(120% 120% at 70% 18%,color-mix(in srgb,var(--accent) 40%,#0C3E60),#05203A 76%);box-shadow:var(--shadow-md)}
.hd-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hd-media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#9FC0D4;font-size:12px;letter-spacing:.04em;padding:18px;font-family:var(--font-sans)}
.hd-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 42%,rgba(5,32,58,.5) 100%)}
.hd-chip{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em;padding:8px 13px;border-radius:999px;box-shadow:0 6px 18px -8px rgba(5,32,58,.5)}
.hd-chip .ic{width:15px;height:15px;color:var(--accent-bright)}

/* ---------- Cine-Hero (Konzept 4, Freigabe 2026-07-19): Full-Bleed mit Weltfarben-Grade ---------- */
.hero-cine{position:relative;min-height:72svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:#05203A}
.hc-bg{position:absolute;inset:0;z-index:0}
.hc-bg img,.hc-bg video{width:100%;height:100%;object-fit:cover;object-position:var(--hc-pos,70% 42%);filter:saturate(.9) contrast(1.05)}
.hc-grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(94deg, color-mix(in srgb,var(--accent) 32%,rgba(4,22,38,.88)) 0%, color-mix(in srgb,var(--accent) 14%,rgba(4,22,38,.55)) 30%, rgba(4,22,38,.16) 55%, transparent 74%),
  radial-gradient(120% 90% at 100% 0%, transparent 60%, rgba(4,22,38,.25) 100%)}
.hc-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}
/* Der Weissverlauf am Fuss des Heros traegt die Vertrauensleiste. Vorher 90 px
   hoch und linear von #fff nach transparent: Auf Hoehe der Leiste (0 bis 55 px)
   lag er damit erst bei 40 bis 100 Prozent Deckung, und darunter stand das Foto.
   Gemessen ueber alle vier Welten schwankte die Leuchtdichte im Kasten der Leiste
   zwischen 0,09 und 1,0; der Text in --grey kam auf 3,74:1.
   Jetzt ist der Verlauf hoeher und im unteren Drittel praktisch deckend, damit die
   Leiste auf einer bestimmten Flaeche steht statt auf einem Bild. Der weiche
   Uebergang nach oben bleibt, es entsteht keine sichtbare Kante. */
.hc-fade{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:2;
  background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.94) 38%,transparent 100%)}
.hc-inner{position:relative;z-index:3;width:100%;padding-top:64px;padding-bottom:104px}
.hc-text{max-width:640px}
.hc-text .eyebrow{color:#fff;opacity:.92}
.hc-text .eyebrow:before{background:color-mix(in srgb,var(--accent) 50%,#fff)}
.hero-cine h1{color:#fff;font-size:clamp(38px,5.6vw,80px);line-height:1.0;margin:16px 0 0;text-shadow:0 2px 40px rgba(3,18,32,.35);max-width:14ch}
.hero-cine h1 em{font-style:italic;background:linear-gradient(92deg,#fff 20%,color-mix(in srgb,var(--accent) 55%,#fff) 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cine .hp-rotator{margin-top:18px}
.hc-text .lead{color:#E6EFF6;font-size:clamp(16.5px,1.4vw,19px);line-height:1.65;max-width:46ch;margin:20px 0 30px;text-shadow:0 1px 18px rgba(3,18,32,.4)}
.hc-text .hero-tag{margin:16px 0 0}
/* Der wahlweise Anfrage-Knopf im Cine-Hero (08.09.2026, Ansage Maik:
   mehr Anfrage-Knoepfe auf der Altersvorsorgedepot-Seite). Das Kleid der
   Pille steht schon da (.hero-cine .pill-line, Zeile 502); hier fehlt nur
   der Abstand nach der Lead-Zeile, die ihre eigene Untermarge mitbringt. */
.hc-text .hero-cta{margin-top:2px}
/* Die Umriss-Pille steht auf dem Foto, nicht auf dem Verlauf (04.09.2026,
   Reparatur-Paket). Mit rgba(255,255,255,.06) als Fuellung war ihr Untergrund
   das Bild selbst: "Schaden melden" nachgemessen 3,67 bis 4,08:1 an 320/375 px
   in allen vier Welten, 3,7:1 bei 1280 px in der Schaustellerwelt, 2,32:1 bei
   768 px; die Infobroschuere 2,7:1. Auf dem hellen Hausputz der Privatwelt bei
   1280 px liess sich der Text gar nicht mehr vom Untergrund trennen. Die
   Fuellung ist jetzt der dunkle Hero-Grundton mit 80 Prozent Deckung: Selbst
   ueber einer weissen Stelle bleibt Weiss darauf ueber 4,5:1, der Rand bleibt
   die Umrisslinie von vorher. Gemessen am gerenderten Bild, siehe
   tests/browser/welt-startseiten.spec.js. */
.hero-cine .pill-line{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(4,22,38,.80);box-shadow:none}
.hero-cine .pill-line:hover{border-color:#fff;background:rgba(4,22,38,.92);color:#fff}
.hc-trust{position:absolute;left:0;right:0;bottom:0;z-index:4}
.hc-trust .wrap{display:flex;justify-content:space-between;align-items:center;gap:10px 28px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px;
  border-top:1px solid rgba(11,27,38,.10);font-size:13.5px;color:var(--grey)}
.hc-trust b{color:var(--ink)}
/* Der Zeitungsartikel-Link **in** der Leiste (Ansage Maik, 04.08.2026): kein
   Fremdkoerper daneben, sondern ein Element derselben Zeile. Er ist das letzte
   Kind der Flex-Zeile und steht dadurch rechts; bei Umbruch rutscht er unter
   die Punkte statt sie zu quetschen.
   **Seit dem 05.08.2026 mit hinterlegter Flaeche** (Ansage Maik: "als
   Linkbutton farbig passend hinterlegt"). Bis dahin war er ein blosser
   farbiger Text, ausdruecklich ohne Kasten; diese Entscheidung ist damit
   ueberholt und der Vermerk hier ersetzt sie.
   **Warum getoent und nicht voll gefuellt.** Die Leiste setzt 13,5 px feine
   graue Schrift. Eine deckende Farbflaeche daneben zoege das Auge vom Hero
   weg und wuerde den Presse-Hinweis wichtiger machen als "Beratung anfragen".
   Der getoente Grund macht ihn als Knopf kenntlich und laesst die Rangfolge
   stehen; beruehrt fuellt er sich ganz und beantwortet damit die Bedienung.
   **Die Farbe kommt aus der Welt, nicht aus dem Bauteil**: --accent-soft und
   --accent-deep sind je Welt gesetzt, hier also das Schausteller-Tuerkis.
   Bekaeme eine andere Welt je einen solchen Link, traegt er ohne Zutun ihren
   Ton. Der Kontrast ist gemessen, siehe tests/browser/presse-und-firmen.spec.js. */
.hc-trust-link{display:inline-flex;align-items:center;padding:7px 15px;border-radius:var(--r-pill);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  color:var(--accent-deep);font-weight:600;text-decoration:none;white-space:nowrap;line-height:1.25;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.hc-trust-link:hover,.hc-trust-link:focus-visible{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
/* Der Mindestabstand nur dort, wo ein Knopf in der Leiste steht.
   **Gemessen, nicht geschaetzt** (05.08.2026, 1280 px): Die vier Punkte und
   der Link brauchten zusammen 1.124 px, zur Verfuegung standen 1.124 px - die
   Zeile passte mit **1 px** Luft. Die Flaeche des Knopfes kostet 32 px
   (2x15 Polsterung, 2x1 Rahmen), damit brach die Zeile um und der Link
   rutschte allein in eine zweite.
   Der Abstand ist hier ein Mindestwert, kein fester: justify-content
   space-between verteilt die freie Breite ohnehin selbst. Bei 18 px passt die
   Zeile mit 9 px Luft, und **sichtbar aendert sich nichts** - die Punkte
   stehen weiter von Rand zu Rand.
   :has() grenzt die Regel auf genau die eine Leiste ein, die einen Link hat.
   Die drei Welten ohne Link behalten ihre 28 px unveraendert. Kennt ein
   Browser :has() nicht, faellt er auf den Umbruch zurueck: der Knopf steht
   dann unter den Punkten, was lesbar bleibt und nichts verdeckt. */
.hc-trust .wrap:has(.hc-trust-link){column-gap:18px}
/* Pause/Play fuer die spaetere Video-Erweiterung (WCAG 2.2.2) */
.hc-toggle{position:absolute;right:22px;bottom:74px;z-index:5;width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(6,30,50,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.45);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.hc-toggle:hover{background:rgba(6,30,50,.7)}
.hc-toggle svg{width:18px;height:18px;fill:currentColor}
.hc-toggle .i-pause{display:none}
.hc-toggle.is-playing .i-pause{display:block}
.hc-toggle.is-playing .i-play{display:none}
.hc-toggle[hidden]{display:none}
@media(min-width:981px){.hero-cine{min-height:clamp(620px,86vh,900px)}.hc-inner{padding-top:110px;padding-bottom:130px}}
/* Hero-Abdunklung fuer schmale und mittlere Fenster (04.09.2026, Reparatur-Paket).
   Der Verlauf .hc-grade laeuft ab 74 Prozent Breite in die Durchsichtigkeit; bis
   980 px reicht der Textblock aber ueber diese Grenze hinaus und steht dann auf
   dem Foto. Nachgemessen am gerenderten Bild (320/375 px, alle vier Welten):
   Wortwechsler 3,44 bis 4,18:1, aktives Wort 3,30 bis 4,29:1, in der
   Verwalterwelt auch der Vorspann (3,87:1) und der Vorspann-Kicker (4,43:1),
   gefordert je 4,5:1. Die Ursache war nie die Farbe, sondern die helle Stelle
   des Fotos unter dem Text -- Hauswand, Hemd, Himmel. Deshalb keine neue Farbe,
   sondern eine zweite, gleichmaessige Lage des Hero-Grundtons ueber dem Verlauf,
   nur bis 980 px; ab 981 px steht der Text im dunklen Teil des Verlaufs und
   misst 5,3 bis 10:1. Die Werte nachher stehen im PROJEKTSTAND-Eintrag vom
   04.09.2026. Die kompakten Heros der Inhaltsseiten (.hc-compact) tragen ihren
   eigenen Verlauf mit hoeherer Spezifitaet und sind nicht betroffen. */
@media(max-width:980px){
  .hero-cine .hc-grade{background:
    linear-gradient(0deg, rgba(4,22,38,.52) 0%, rgba(4,22,38,.52) 100%),
    linear-gradient(94deg, color-mix(in srgb,var(--accent) 32%,rgba(4,22,38,.88)) 0%, color-mix(in srgb,var(--accent) 14%,rgba(4,22,38,.55)) 30%, rgba(4,22,38,.16) 55%, transparent 74%),
    radial-gradient(120% 90% at 100% 0%, transparent 60%, rgba(4,22,38,.25) 100%)}
}
/* Zwischen 761 und 980 px steht die Vertrauensleiste noch absolut ueber dem
   Foto, bricht aber auf zwei Zeilen um und ragt damit in den weichen Teil des
   Weissverlaufs: "seit 1998" in der Schaustellerwelt bei 768 px nachgemessen
   4,46:1 (gefordert 4,5:1). Der Verlauf ist hier hoeher und laenger deckend,
   damit auch die obere Zeile auf Weiss steht; die weiche Kante nach oben bleibt. */
@media(min-width:761px) and (max-width:980px){
  .hc-fade{height:220px;background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.97) 55%,transparent 100%)}
}
/* Schmale Viewports: die Vertrauensleiste nicht mehr absolut ueber den Hero-Inhalt
   legen (dort ueberlappte sie Text und Button und war ueber dem Foto schwer lesbar),
   sondern den Hero linear stapeln und die Leiste als eigene helle Zeile darunter setzen. */
@media(max-width:760px){
  .hero-cine{display:block;min-height:0}
  .hc-inner{padding-top:72px;padding-bottom:24px}
  .hc-fade{display:none}
  /* **position:relative statt static** (Fund vom 05.08.2026).
     Der Fehler war vorhanden und alt, nicht neu: Bei jeder Breite bis 760 px
     lag das Hero-Foto **ueber** der Leiste. Gemessen per Treffertest auf dem
     ersten Punkt jeder der vier Welten - oben lag durchweg ein IMG, nicht der
     Text. Die Leiste war damit unlesbar, und seit sie einen Link traegt, war
     der auch nicht antippbar.
     Die Ursache ist die Malreihenfolge: .hc-bg ist absolut gesetzt und malt
     deshalb ueber den Hintergrund eines nicht gesetzten Geschwisters, auch
     ueber ein weisses. Der Kasten war da, er lag nur darunter. Auf dem
     Desktop trat es nie auf, weil die Leiste dort selbst absolut steht und
     ein z-index von 4 traegt.
     position:relative macht sie wieder zu einem gesetzten Element; da sie im
     Dokument nach .hc-bg steht, malt sie danach.
     **Das z-index:1 traegt nachweislich nichts** - im Mutationsnachweis vom
     05.08.2026 blieb die Pruefung ohne es gruen, weil die Dokumentreihenfolge
     allein schon genuegt. Es bleibt trotzdem stehen, aber als Absicht und
     nicht als Behauptung: Wer .hc-bg spaeter einen z-index gibt oder die
     beiden im Markup vertauscht, kippt die Reihenfolge lautlos. Rot wird die
     Pruefung nur beim position-Wechsel; das ist ihre belegte Reichweite. */
  .hc-trust{position:relative;z-index:1;background:#fff}
  /* **Das Band sitzt am unteren Hero-Bildrand, und der letzte Knopf haelt
     Abstand** (Ansage Maik, 12.09.2026: "auf den Themenseiten ist der button
     schaden melden direkt an dem vertrauensband und das vertrauensband sitzt
     nicht am unteren Hero bildrand").

     **Gemessen, nicht geraten** (375 px, alle vier Welten, 12.09.2026):
     Die Ursache ist **nicht** die Hero-Mindesthoehe. Die steht in diesem
     Block schon auf 0, und der Hero ist genau so hoch wie sein Inhalt
     (Privatwelt 709 px = 52 + 498 + 106 + 52).

     Es sind zwei getrennte Ursachen, je eine je Beschwerde:
     1 **Unter dem Band lagen 52 px Bild.** `section{padding:52px 0}` aus dem
       900er-Block gilt auch fuer den Hero, und `.hc-bg` liegt mit inset:0
       ueber der ganzen Polsterung -- also auch unter dem Band, das hier im
       Fluss steht und deckend weiss ist. Gemessen: Bildunterkante 1049,
       Bandunterkante 997. Die Polsterung unten faellt deshalb weg; oben
       bleibt sie, sie liegt im Bild und stoert nicht.
       Eingegrenzt mit :has() auf genau die Heros **mit** Band, also die vier
       Welt-Startseiten. Ohne die Eingrenzung verloeren auch die kompakten
       Heros der Produktseiten ihre Polsterung. Kennt ein Browser :has()
       nicht, bleibt es beim bisherigen Stand -- dieselbe Ueberlegung wie bei
       `.hc-trust .wrap:has(.hc-trust-link)` weiter oben.
     2 **Der Knopf beruehrte die Bandoberkante.** `.hc-inner` sollte hier
       24 px unten polstern (Zeile darueber), aber `.wrap{padding:0 20px}` im
       560er-Block steht spaeter bei gleicher Spezifitaet und setzt die
       Kurzschreibweise -- oben und unten also 0. Gemessen: Knopfunterkante
       891, Bandoberkante 891, Abstand 0. Der Wert ist jetzt der Abstand
       **zwischen** den Knoepfen (`.hero-cta{gap:12px}`), und die
       Zwei-Klassen-Auswahl gewinnt gegen `.wrap`.
     Bei 768 und 1280 px aendert sich nichts: Dort steht das Band absolut auf
     bottom:0 und sitzt ohnehin am unteren Bildrand. */
  .hero-cine:has(.hc-trust){padding-bottom:0}
  .hero-cine .hc-inner{padding-bottom:12px}
  .hc-trust .wrap{justify-content:flex-start;border-top:0;padding-top:14px;padding-bottom:16px;gap:6px 22px;font-size:13px}
  /* Der Presse-Knopf darf hier umbrechen. **Gemessen bei 320 px** (05.08.2026):
     Mit white-space:nowrap ist er 330 px breit, die Leiste bietet aber nur
     280 px - er ragte 30 px ueber den rechten Rand und sein Text wurde
     abgeschnitten. Ursache ist genau die neue Polsterung: ohne sie war er
     298 px breit und passte knapp. Umbrechend belegt er 280 x 49 px und
     bleibt vollstaendig lesbar.
     Warum nur hier und nicht ueberall: Auf dem Desktop haelt nowrap den Knopf
     in einer Zeile mit den Punkten, und dort ist der Platz vorhanden. Zu eng
     wird es erst unterhalb von rund 400 px, also weit innerhalb dieser Regel. */
  .hc-trust-link{white-space:normal;text-align:center}
  .hc-toggle{bottom:auto;top:14px;right:14px}
}

/* ---------- Portal-Hero (Gruppenseiten: cinematic, full-bleed) ---------- */
.hero-portal{position:relative;padding:0;min-height:clamp(600px,88vh,940px);min-height:clamp(600px,88svh,940px);
  display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:#05203A}
.hp-bg{position:absolute;inset:0;z-index:0}
.hp-bg img{width:100%;height:100%;object-fit:cover;transform-origin:62% 42%;animation:hpKen 26s ease-out both}
@keyframes hpKen{from{transform:scale(1.14)}to{transform:scale(1)}}
.hp-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(96deg,rgba(4,24,40,.93) 0%,rgba(4,24,40,.74) 34%,rgba(4,24,40,.30) 62%,rgba(4,24,40,.04) 100%),
  linear-gradient(0deg,rgba(4,24,40,.86) 0%,rgba(4,24,40,.12) 40%,transparent 62%)}
.hp-inner{position:relative;z-index:2;width:100%;padding-top:130px;padding-bottom:92px}
.hp-text{max-width:680px;color:#fff}
.hero-portal .eyebrow{color:var(--accent-bright);margin-bottom:16px}
.hero-portal h1{color:#fff;font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.025em;margin:0;max-width:15ch;text-shadow:0 2px 34px rgba(4,24,40,.45)}
.hp-rotator{font-family:var(--font-display);font-size:clamp(22px,2.8vw,36px);line-height:1.2;color:#CFE0EC;margin:16px 0 0;font-weight:500}
/* Wort-Stapel: alle Begriffe liegen in derselben Grid-Zelle. Die Box ist dadurch
   dauerhaft so breit wie das laengste Wort und aendert beim Rotieren ihre Groesse
   nicht -> die Hero-Zeile bricht immer gleich um, nichts darunter springt. */
/* Farbe des Wortwechslers: derselbe Aufhellungsgriff wie bei .hero-cine h1 em
   (color-mix mit 55 Prozent Weiss). Vorher stand hier var(--accent-bright) pur;
   nachgemessen ergab das ueber dem Hero-Verlauf 3,49:1 bei 375 px, wo die Schrift
   mit 22 px noch nicht als Grossschrift zaehlt und 4,5:1 gefordert sind. Bei
   1280 px ist sie 35,8 px gross, dort galt die Schwelle 3,0 und der Wert ging
   durch -- der Fund haengt also an der Breite, nicht an der Farbe allein.
   Nachher gemessen: siehe SPRINT-KUNDENVORSCHAU-IMPLEMENTER.md, A2. */
.hp-rotator .rotator{display:grid;justify-items:start;width:fit-content;align-items:baseline;color:color-mix(in srgb,var(--accent-bright) 55%,#fff);font-weight:600;font-style:italic}
.hp-rotator .rotator .rw{grid-area:1/1;white-space:nowrap;visibility:hidden;opacity:0}
/* Sicherheitsnetz: das erste Wort ist per CSS sichtbar, ohne Klasse und ohne
   JavaScript. Erst wenn das Skript die Rotation wirklich uebernimmt, markiert es
   den Container mit .js; ab dann zeigt allein .is-on das aktive Wort. So steht
   immer ein Wort, egal ob JS aus ist, noch laedt oder ein veralteter Skriptstand
   aus dem Browser-Cache die is-on-Klasse nie setzt. */
.hp-rotator .rotator .rw:first-child{visibility:visible;opacity:1}
.hp-rotator .rotator.js .rw:first-child:not(.is-on){visibility:hidden;opacity:0}
.hp-rotator .rotator .rw.is-on{visibility:visible;opacity:1;animation:rwIn .55s cubic-bezier(.16,1,.3,1)}
@keyframes rwIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero-portal .lead{color:#DAE7F1;font-size:clamp(17px,1.4vw,21px);line-height:1.6;margin:22px 0 30px;max-width:48ch}
.hero-portal .hero-cta{gap:14px}
.hero-portal .pill-line{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.07);box-shadow:none}
.hero-portal .pill-line:hover{border-color:#fff;background:rgba(255,255,255,.16);color:#fff}
.hero-portal .hero-tag{margin:18px 0 0}
.hp-cue{position:absolute;left:50%;bottom:26px;z-index:3;transform:translateX(-50%);color:rgba(255,255,255,.7);animation:hpCue 1.9s ease-in-out infinite}
.hp-cue .ic{width:28px;height:28px}
@keyframes hpCue{0%,100%{transform:translateX(-50%) translateY(0);opacity:.55}50%{transform:translateX(-50%) translateY(8px);opacity:1}}
.hp-text>*{opacity:0;animation:hpRise .85s cubic-bezier(.16,1,.3,1) forwards}
.hp-text>*:nth-child(1){animation-delay:.15s}
.hp-text>*:nth-child(2){animation-delay:.30s}
.hp-text>*:nth-child(3){animation-delay:.45s}
.hp-text>*:nth-child(4){animation-delay:.58s}
.hp-text>*:nth-child(5){animation-delay:.70s}
.hp-text>*:nth-child(6){animation-delay:.80s}
@keyframes hpRise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.hero-portal{min-height:auto}.hp-inner{padding-top:104px;padding-bottom:56px}.hp-text{max-width:none}}
@media(prefers-reduced-motion:reduce){
  .hp-bg img{animation:none;transform:scale(1.02)}
  .hp-text>*{opacity:1!important;animation:none!important}
  .hp-cue{animation:none}
  .hp-rotator .rotator .rw.is-on{animation:none}
}

/* ---------- Scroll-Reveal (generisch) ----------
   Versteckt wird nur unter html.js (Behebung 21.08.2026). Die Regel stand ohne
   die Klasse da und widersprach damit der eigenen Zusage weiter unten im
   Infografik-Block ("ohne JS ist alles sofort sichtbar"): Ohne JavaScript setzt
   niemand is-in, und jedes [data-reveal]-Element blieb fuer immer unsichtbar -
   auf der Geschichtsseite war das die komplette Zeitleiste. */
html.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--rd,0ms)}
html.js [data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}}

/* ---------- Direkteinstiege (Worum geht es Ihnen gerade?) ---------- */
.topics{background:linear-gradient(180deg,#FAFBFC,#fff)}
.topics .section-head{text-align:center;margin:0 auto 36px;max-width:44ch}
.topics .section-head .eyebrow{color:var(--accent-ink)}
.topics .section-head p{color:var(--grey);font-size:17px}
/* Themenkarten = Selektor. **Zwei Spalten in allen vier Welten** (Entscheidung
   Maik, 27.07.2026). Bis dahin gab es drei Raster: drei nebeneinander bei drei
   Themen, zwei mal zwei bei vier, zwei Spalten in voller Breite bei sechs. Mit
   den Bildpanels trug die Dreierreihe nicht mehr: Die Kachel war dort nur 361 px
   breit, und was vom Motiv uebrig blieb, war ein Streifen. Privat und
   Schausteller haben dafuer je ein viertes Thema bekommen, sodass alle vier
   Uebersichten ein gerades Raster zeigen.
   Die frueheren Sonderregeln [data-n="3"] und [data-n="4"] sind damit entfallen,
   ebenso die 900-px-Zwischenschwelle, die nur die Dreierreihe brauchte. */
/* min-width:0 auf den Rasterfeldern und im Textblock. Mit dem Bild statt des
   Symbols ist die Karte um 20 px breiter geworden, und bei 320 px ragte sie
   dadurch um 5 px hinaus: Rasterfelder haben von sich aus min-width:auto, und der
   laengste Themenname bestimmte die Spur. Dieselbe Ursache wie bei den A6-Faellen. */
.topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 auto}
.topic-grid>*{min-width:0}
.topic-tx{min-width:0}
/* overflow-wrap auf h3 UND p. Auf dem Absatz ist es am 27.07.2026 dazugekommen,
   nachdem beim Nachmessen der breiteren Panels auffiel, dass bei 320 px auf der
   Verwalter-Seite "Auseinandersetzungen." abgeschnitten wurde: clientWidth 148,
   scrollWidth 162. Gesehen hat das keine der beiden Suiten, weil overflow:hidden
   am Kartenrahmen den Ueberlauf wegschneidet, statt ihn ueber die Fensterkante
   treten zu lassen. Ohne diese Zeile waere jede weitere Verbreiterung des
   Panels ein stiller Textverlust. */
.topic-tx h3,.topic-tx p{overflow-wrap:break-word}
.topic-card{position:relative;display:flex;align-items:flex-start;gap:16px;padding:24px 24px 22px;background:#fff;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-xs);
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease),background .2s var(--ease)}
.topic-card:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.topic-card:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r)}
/* Aktive Karte: sichtbar markiert, damit klar ist, welcher Bereich unten steht. */
.topic-card.is-active{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-soft),#fff);
  box-shadow:0 16px 32px -18px color-mix(in srgb,var(--accent) 62%,transparent);transform:none}
.topic-card.is-active .topic-ic{background:var(--accent);color:#fff}
/* Alle Neuerungen auf einen Blick (Depotseite, 11.09.2026): drei Karten mit
   dem Symbolfeld der Themenkarten (.topic-ic) und der Haekchenliste der Seite.
   Aufbau nach der OESA-Infoseite, Aussehen aus diesem Stylesheet. */
.neuerungen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.nw-karte{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:24px 24px 26px;
  display:flex;flex-direction:column;gap:12px;min-width:0}
.nw-karte h3{font-size:19px;margin:0;color:var(--ink)}
.nw-karte p{margin:0;color:var(--ink-2);line-height:1.55}
.nw-karte a{color:var(--accent-ink);font-weight:600}
.nw-karte .checks{margin:0}
@media(max-width:900px){.neuerungen{grid-template-columns:1fr}}
.topic-ic{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);transition:background .2s var(--ease),color .2s var(--ease)}
/* Bild statt Symbol auf den Themenkarten (27.07.2026), seit dem 27.07.2026 als
   volles linkes Bildpanel (Entscheidung Maik): buendig an linker, oberer und
   unterer Kante, ueber die ganze Kachelhoehe. Das Bild ist dekorativ (leeres
   alt), die Karte bleibt eine Schaltflaeche, und das Ziel ist unveraendert die
   ganze Karte, also weit ueber 44 px.

   ACHTUNG, Akkordeon: Unterhalb von 641 px misst site.js die Oeffnungshoehe des
   Panels ueber scrollHeight. Nichts an dieser Kachel darf deshalb nachtraeglich
   springen. Zwei Vorkehrungen, beide bewusst:
     1. Die Panelbreite ist ein fester Pixelwert, kein fliessender. Eine
        prozentuale Breite haenge an der Spaltenbreite und damit am Text.
     2. Das img liegt absolut im Panel (inset:0). Damit kann weder sein
        Seitenverhaeltnis noch eine spaet geladene Datei die Kartenhoehe
        anfassen: Die Hoehe kommt allein aus dem Textblock, das Panel folgt ihr
        ueber align-self:stretch. Vorher hing sie an width/height am img.
   Die Rundung erledigt overflow:hidden am Kartenrahmen. Damit ist automatisch
   nur an den aeusseren Kachelecken gerundet, und im Akkordeon-Zustand geht die
   Rundung von selbst mit, wo die aktive Karte unten eckig wird.

   Gerade, buendige Kante zwischen Bild und Text, keine Ueberlappung
   (Entscheidung Maik, 27.07.2026). Die kurzzeitig aufgelegte Textflaeche mit
   linker Rundung und Kantenschatten ist damit zurueckgebaut.

   **Panelbreite: ein fester Wert fuer alle vier Welten, gemessen statt
   geschaetzt.** Mit dem einheitlichen Zweispalten-Raster ist die Kachel ueberall
   553 px breit, und damit passt in jeder Welt derselbe Wert. Gemessen bei
   1280 px, Obergrenze ist der groesste Wert, bei dem kein Wort umbricht:

     Welt          Kachel  Drittel  Obergrenze (laengstes Wort)
     privat         553      184      318  ("Vermoegenssicherung" 191)
     firmen         553      184      318  ("Vermoegenssicherung" 191)
     verwalter      553      184      347  ("Auseinandersetzungen." 162)
     schausteller   553      184      391  ("Fahrgeschaeft" 118)

   Genommen sind 240 px: im Zielband von 220 bis 260 px und mit gut 70 px
   Abstand zur engsten Obergrenze. Vor dem Rasterwechsel war das nicht moeglich,
   da lagen dieselben vier Seiten zwischen 126 und 318 px.

   ACHTUNG, Akkordeon: Unterhalb von 641 px misst site.js die Oeffnungshoehe des
   Panels ueber scrollHeight. Nichts an dieser Kachel darf deshalb nachtraeglich
   springen. Zwei Vorkehrungen, beide bewusst:
     1. Die Panelbreite ist ein fester Pixelwert, kein fliessender. Eine
        prozentuale Breite haenge an der Spaltenbreite und damit am Text.
     2. Das img liegt absolut im Panel (inset:0). Damit kann weder sein
        Seitenverhaeltnis noch eine spaet geladene Datei die Kartenhoehe
        anfassen: Die Hoehe kommt allein aus dem Textblock, das Panel folgt ihr
        ueber align-self:stretch. */
.topic-card.has-pic{padding:0;align-items:stretch;gap:0;overflow:hidden}
.topic-card.has-pic .topic-tx{flex:1 1 auto;padding:24px 24px 22px 20px}
.topic-pic{flex:none;align-self:stretch;position:relative;
  width:var(--tp-breite,240px);
  background:var(--accent-soft);
  box-shadow:inset -1px 0 0 0 color-mix(in srgb,var(--accent) 16%,transparent)}
.topic-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
/* Dezenter Hover, derselbe Griff wie bei .card-thumb der Produktkarten. */
.topic-card:hover .topic-pic img{transform:scale(1.045)}
/* Aktive Karte: Das Symbol wechselte die Flaechenfarbe, ein Bild kann das nicht.
   Stattdessen traegt die Kante zwischen Bild und Text die Weltfarbe. Sie ist
   seit der Rueckkehr zur buendigen Kante wieder sichtbar. */
.topic-card.is-active .topic-pic{box-shadow:inset -3px 0 0 0 var(--accent)}
@media(max-width:640px){
  /* Einspaltig, Kachel 280 bis 520 px breit. Hier war die Breite schon immer in
     allen Welten gleich; 240 px waeren bei 320 px Fensterbreite fast die halbe
     Kachel. */
  body{--tp-breite:120px}
  .topic-card.has-pic .topic-tx{padding:20px 18px 18px 16px}
}
.topic-ic .ic{width:24px;height:24px}
.topic-card:hover .topic-ic{background:var(--accent);color:#fff}
.topic-tx{min-width:0}
.topic-tx h3{font-size:19px;margin:3px 0 6px;letter-spacing:-.01em}
.topic-tx p{font-size:14.5px;color:var(--grey);line-height:1.6;margin:0 0 10px}
.topic-n{display:inline-block;font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--accent-ink);text-transform:uppercase}
/* Produktflaeche haengt direkt unter den Karten und ist als eigener, getoenter
   Block mit Akzent-Oberkante gefasst, damit die Loesungen klar vom Selektor
   abgegrenzt sind. Die weissen Produktkarten heben sich vom Ton (--tint) ab. */
.topics .tabpanels{margin-top:30px}
.topics .tabpanel{position:relative;background:var(--tint);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--r);padding:26px 26px 30px;scroll-margin-top:110px}
/* Verbindungspfeil (Caret) an der Panel-Oberkante, horizontal unter der aktiven
   Karte (--caret-x wird von site.js gesetzt und bei Resize nachgefuehrt). Zeigt
   nach oben auf die Auswahl. Nur mit JS; ohne JS traegt der gerahmte Block. */
html.js .topics .tabpanel.is-active::before{content:"";position:absolute;top:-11px;left:var(--caret-x,50%);
  transform:translateX(-50%);width:0;height:0;
  border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:11px solid var(--accent);
  transition:left .25s var(--ease)}
.panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:4px}
.panel-hd-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.panel-ey{font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-ink)}
.panel-ti{font-family:var(--font-display);font-size:23px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.15}
.panel-n{flex:none;font-family:var(--font-sans);font-size:13px;font-weight:700;color:var(--accent-ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;white-space:nowrap}
.panel-sub{color:var(--grey);max-width:70ch;margin:0 0 22px;font-size:16px;line-height:1.6}
@media(max-width:560px){
  .topics .tabpanel{padding:20px 16px 22px}
  .panel-head{flex-direction:column;align-items:flex-start;gap:8px}
  .panel-ti{font-size:20px}
}
/* Anker-Ziele unter dem Sticky-Header freihalten (JS-Scroll und No-JS-Fallback) */
.solutions{scroll-margin-top:120px}
.topic-card{scroll-margin-top:130px}
/* No-JS: Die Karten sind Anker auf ihr Panel. Solange kein Ziel gewaehlt ist, zeigt
   die Flaeche das erste Panel; ein angeklicktes (:target) Panel loest es ab. Sobald
   JavaScript laeuft (html.js), uebernimmt echte Tab-Semantik und diese Regeln ruhen. */
html:not(.js) .tabpanel{display:none}
html:not(.js) .tabpanels:not(:has(:target)) .tabpanel:first-child{display:block}
html:not(.js) .tabpanel:target{display:block}
@media(max-width:640px){
  .topic-grid{grid-template-columns:1fr;max-width:520px}
  .topic-card{padding:20px 18px 18px}
  /* Akkordeon: site.js sortiert jedes Panel direkt unter seine Karte. Die Hoehe wird
     weich animiert (grid-template-rows 0fr<->1fr), damit Auf- UND Zuklappen gleiten
     statt zu springen. Sichtbarer Koerper ist .tp-in (overflow:hidden). */
  .topic-grid.is-accordion{gap:0}
  .topic-grid.is-accordion .topic-card{margin-top:10px}
  .topic-grid.is-accordion .topic-card:first-child{margin-top:0}
  .topic-grid.is-accordion .topic-card.is-active{border-bottom-left-radius:0;border-bottom-right-radius:0}
  /* Hoehe wird per max-height animiert (site.js setzt die exakte Zielhoehe). Robust in
     allen Browsern; eingeklappt ist max-height:0 (zuverlaessig 0, kein 0fr-Trick). */
  .topic-grid.is-accordion .tabpanel,
  .topic-grid.is-accordion .tabpanel[hidden]{display:block;overflow:hidden;max-height:0;padding:0;border:0;background:none;
    margin:0;animation:none;scroll-margin-top:118px;transition:max-height .34s cubic-bezier(.16,1,.3,1)}
  .topic-grid.is-accordion .tabpanel.is-active::before{display:none}
  .topic-grid.is-accordion .tp-in{overflow:hidden}
  .topic-grid.is-accordion .tp-body{background:var(--tint);border:1px solid var(--line);border-top:0;
    border-radius:0 0 var(--r) var(--r);padding:20px 16px 22px}
}

/* ---------- Lösungs-Tabs (Register) ---------- */
.solutions .section-head{text-align:center;margin:0 auto 28px;max-width:42ch}
.solutions .section-head .eyebrow{color:var(--accent-ink)}
.solutions .section-head p{color:var(--grey);font-size:17px}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;margin:0 auto 32px}
.tab{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;cursor:pointer;font:inherit;font-size:15px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.tab:hover{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-soft2)}
.tab:active{transform:scale(.98)}
.tab:focus-visible{outline:none;box-shadow:var(--ring)}
.tab .tab-ic{display:grid;place-items:center;color:var(--accent-ink)}
.tab .tab-ic .ic{width:19px;height:19px}
.tab .tab-n{font-size:12px;font-weight:700;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
.tab.is-active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 12px 26px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.tab.is-active .tab-ic{color:#fff}
.tab.is-active .tab-n{background:rgba(255,255,255,.22);color:#fff}
.tabpanels{max-width:1180px;margin:0 auto}
.tabpanel{animation:tabFade .4s cubic-bezier(.16,1,.3,1)}
.tabpanel[hidden]{display:none}
.tabpanel-sub{text-align:center;color:var(--grey);max-width:62ch;margin:0 auto 26px;font-size:16.5px;line-height:1.6}
@keyframes tabFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:640px){.tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:8px;-webkit-overflow-scrolling:touch}.tab{flex:none}}
@media(prefers-reduced-motion:reduce){.tabpanel{animation:none}.topic-grid.is-accordion .tabpanel{transition:none}}

/* ---------- Stats-Band (method-Stil) ---------- */
.stats{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(72% 120% at 86% -12%,color-mix(in srgb,var(--accent) 48%,transparent) 0%,transparent 55%),
  linear-gradient(158deg,#0B2C42 0%,#06243A 62%,#05203A 100%)}
.stat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:14px 28px;border-left:1px solid rgba(255,255,255,.14)}
.stat:first-child{border-left:0}
.stat-v{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(38px,4.6vw,64px);line-height:1;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-l{display:block;margin-top:12px;color:#BFD4E2;font-size:15px;line-height:1.5;max-width:24ch}
@media(max-width:820px){.stat-grid{grid-template-columns:repeat(2,1fr);row-gap:10px}.stat{padding:18px 22px}.stat:nth-child(odd){border-left:0}}
@media(max-width:460px){.stat-grid{grid-template-columns:1fr}.stat{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:18px 4px}.stat:first-child{border-top:0}}

/* ---------- Diagramm-Grafik (echtes SVG) ---------- */
.gfx-chart{max-width:780px;margin:0 auto;padding:6px 0}
.gfx-chart svg{width:100%;height:auto;display:block;overflow:visible}
.gfx-chart .draw{stroke-dasharray:1200;stroke-dashoffset:1200}
.gfx-chart.is-in .draw{animation:gfxDraw 1.7s cubic-bezier(.16,1,.3,1) .15s forwards}
@keyframes gfxDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.gfx-chart .draw{stroke-dashoffset:0;animation:none}}

/* ---------- BU-Erklärmodul (3 Akte: Wert, Lücke, Lösung) ---------- */
@keyframes gfxFadeIn{from{opacity:0}to{opacity:1}}
.bu-ex{max-width:840px;margin:0 auto}
.bu-ex .gfx-cap{text-align:center;color:var(--muted);font-size:13.5px;margin:22px 0 0}
.bx-stakes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;margin-bottom:34px}
.bx-lead{color:var(--grey);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.bx-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.bx-chips li{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--ink-2)}
.bx-chips .ic{width:16px;height:16px;color:var(--accent-ink)}
.bx-bars{display:flex;flex-direction:column;gap:22px}
.bx-rl{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:9px;line-height:1.4}
.bx-track{position:relative;height:52px;border-radius:13px;background:var(--tint);overflow:hidden;border:1px solid var(--line)}
.bx-fill{position:absolute;top:0;bottom:0;left:0;border-radius:12px;transform-origin:left center;transform:scaleX(0)}
.bu-ex.is-in .bx-fill{animation:bxGrow .9s cubic-bezier(.16,1,.3,1) both}
@keyframes bxGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bx-fill.full,.bx-fill.part{background:linear-gradient(90deg,#27AEE0,#0A6FA0)}
.bx-fill.closed{background:linear-gradient(90deg,#7FD2F0,#27AEE0)}
.bx-gap{position:absolute;top:0;bottom:0;left:38%;right:0;display:flex;align-items:center;justify-content:center;opacity:0;background:repeating-linear-gradient(45deg,rgba(193,154,75,.16) 0 9px,rgba(193,154,75,.32) 9px 18px)}
.bu-ex.is-in .bx-gap{animation:gfxFadeIn .5s ease .8s forwards}
.bx-gap span{color:#6b5320;font-weight:700;font-size:13px;background:rgba(255,255,255,.8);padding:4px 11px;border-radius:999px}
.bx-closed-l{position:absolute;top:0;bottom:0;left:38%;right:0;display:flex;align-items:center;justify-content:center;opacity:0;color:#06324a;font-weight:700;font-size:13px}
.bu-ex.is-in .bx-closed-l{animation:gfxFadeIn .5s ease 1.25s forwards}
@media(max-width:560px){.bx-track{height:46px}.bx-gap span,.bx-closed-l{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.bu-ex.is-in .bx-fill{animation:none;transform:scaleX(1)}.bu-ex.is-in .bx-gap,.bu-ex.is-in .bx-closed-l{opacity:1;animation:none}}
/* Premium-Card: Illustration + Daten */
.ix{max-width:880px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.ix-art{margin:0;line-height:0;background:#EAF2F8;border-bottom:1px solid var(--line)}
.ix-art img{width:100%;height:auto;display:block}
.ix-body{padding:32px 34px}
.ix-kicker{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--accent-ink);margin:0 0 26px;line-height:1.4}
.ix-kicker .ic{width:18px;height:18px;flex:none}
@media(max-width:560px){.ix-body{padding:22px 18px}}

/* ---------- Step-Flow-Infografik (nummerierte Icon-Knoten) ---------- */
.flow{max-width:1040px;margin:0 auto}
.flow-track{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:18px}
.flow-4 .flow-track{grid-template-columns:repeat(4,1fr)}
.flow-3 .flow-track{grid-template-columns:repeat(3,1fr)}
.flow-track::before{content:"";position:absolute;top:46px;left:13%;right:13%;height:3px;border-radius:3px;z-index:0;
  background:linear-gradient(90deg,#0092CB 0%,#3F9FC8 34%,#C19A4B 67%,#16A34A 100%)}
.flow-node{position:relative;z-index:1;text-align:center;padding:0 8px;opacity:0;transform:translateY(18px)}
.flow.is-in .flow-node{animation:flowIn .9s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes flowIn{to{opacity:1;transform:none}}
.fn-ic{width:92px;height:92px;margin:0 auto;border-radius:50%;position:relative;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 33% 26%,color-mix(in srgb,var(--c) 42%,#fff),var(--c) 64%,color-mix(in srgb,var(--c) 78%,#0b1b26));
  box-shadow:0 16px 30px -11px color-mix(in srgb,var(--c) 60%,transparent),inset 0 3px 4px rgba(255,255,255,.62),inset 0 -9px 16px color-mix(in srgb,var(--c) 70%,#0b1b26)}
.fn-ic::after{content:"";position:absolute;top:10px;left:22%;width:56%;height:32%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);pointer-events:none}
.fn-ic .ic{width:36px;height:36px;position:relative;z-index:1}
.fn-num{position:absolute;top:-4px;left:calc(50% + 26px);background:var(--c);color:#fff;font-family:var(--font-display);font-weight:600;font-size:13px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 10px -3px var(--c)}
.flow-node h4{font-family:var(--font-display);font-size:17.5px;margin:18px 0 7px;letter-spacing:-.01em;color:var(--ink)}
.flow-node p{font-size:14px;color:var(--grey);line-height:1.55;margin:0;max-width:24ch;margin-inline:auto}
.flow .gfx-cap{text-align:center;color:var(--muted);font-size:13px;margin:30px 0 0}
@media(max-width:720px){
  .flow-3 .flow-track,.flow-4 .flow-track{grid-template-columns:1fr;gap:6px}
  .flow-track::before{left:46px;top:24px;bottom:24px;right:auto;width:3px;height:auto;background:linear-gradient(180deg,var(--accent),var(--accent-ink) 34%,var(--accent-deep) 67%,#16A34A 100%)}
  .flow-node{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:18px;text-align:left;padding:12px 0}
  .flow-node h4{margin:0 0 4px}
  .flow-node p{max-width:none;margin-inline:0}
  .fn-num{left:66px;top:6px}
}
@media(prefers-reduced-motion:reduce){.flow.is-in .flow-node{animation:none;opacity:1;transform:none}}
/* Infografik-Ausbau Stufe 1 (25.07.2026, Entscheidung Maik: CSS-Variablen statt
   generierter Varianten). Die Verlaufsstufen folgen jetzt der Kundengruppe, die
   ueber body[data-group] ohnehin --accent, --accent-ink und --accent-deep setzt.
   Der Abschluss bleibt bewusst gruen: Er bedeutet "Ziel erreicht" und soll in jeder
   Welt dasselbe heissen, nicht die Weltfarbe tragen.
   Sichtbare Wirkung heute: keine. Die .flow-Klassen kommen im gebauten Baum auf
   0 Seiten vor; der Archetyp wird erst mit Stufe 2 verwendet. Die Umstellung jetzt
   erspart es, spaeter dieselbe Stelle in jeder neuen Grafik zu suchen. */
.flow-calm .flow-track::before{background:linear-gradient(90deg,var(--accent) 0%,var(--accent-ink) 34%,var(--accent-deep) 67%,#16A34A 100%)}
@media(max-width:720px){.flow-calm .flow-track::before{background:linear-gradient(180deg,var(--accent),var(--accent-ink) 34%,var(--accent-deep) 67%,#16A34A 100%)}}

@media(max-width:900px){.hero-dark .wrap{grid-template-columns:1fr;gap:26px;padding:46px 24px 50px}}

/* ---------- Media ---------- */
.media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(120% 100% at 75% 18%,var(--navy-2),#05203A 72%);aspect-ratio:16/10;
  box-shadow:var(--shadow-md)}
.media.square{aspect-ratio:1/1}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#8FB7CE;font-size:12px;letter-spacing:.04em;padding:18px;font-family:var(--font-sans)}

/* ---------- Sektionen ---------- */
section{padding:72px 0}
section.tight{padding:48px 0}
/* Sprungmarken (Rechtstexte mit Inhaltsverzeichnis): Offset unter dem Sticky-Header. */
section.tight[id]{scroll-margin-top:clamp(96px,14vw,152px)}
/* Inhaltsverzeichnis (z. B. Datenschutz). Ruhige, mehrspaltige Sprungliste. */
.ds-toc{list-style:none;margin:0;padding:0;column-width:22rem;column-gap:36px}
.ds-toc li{break-inside:avoid;margin:0 0 10px;padding-left:30px;position:relative;line-height:1.5}
.ds-toc li:before{counter-increment:ds;content:counter(ds);position:absolute;left:0;top:1px;
  font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--accent-deep);
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;background:var(--accent-soft)}
.ds-toc{counter-reset:ds}
.ds-toc a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.ds-toc a:hover{color:var(--accent-deep);border-bottom-color:color-mix(in srgb,var(--accent) 40%,transparent)}
/* Fliesstext in Rechtstexten etwas ruhiger und lesbar begrenzt. */
.ds-body{max-width:74ch}
.ds-body p{margin:0 0 14px;color:var(--ink-2);line-height:1.7}
.ds-body p:last-child{margin-bottom:0}
.section-head{max-width:60ch;margin-bottom:30px}
.section-head h2{margin-bottom:10px}
.section-head p{font-size:17px;color:var(--grey)}
/* **Mehrere Absaetze in einem Kopf brauchen einen Abstand** (06.09.2026,
   Sichtprobe am gerenderten Bild). Bis dahin liefen sie ineinander: Einen
   Rand zwischen Absaetzen setzt nur `section.tight p+p`, und der einzige
   Kopf mit mehr als einem Absatz -- der Branchen-Block der
   Schausteller-Startseite -- ist ein `pk-chap`. Drei Absaetze standen dort
   als eine Textwand, was den Umbau des Textes zunichte machte.
   Betroffen ist genau diese eine Stelle im ganzen Baum, gezaehlt am
   gebauten Bestand. */
.section-head p + p{margin-top:14px}

/* ---------- Karten-Grid ---------- */
.grid{display:grid;gap:22px}
/* Funde B1/B2: In den klemmenden Themen-Panels der Uebersichtsseiten ragten die
   Produktkarten bei 320 px um 52 px und bei 375 px um 15 px ueber den Rand und
   wurden dort weggeschnitten. Ursache ist die Voreinstellung von Rasterfeldern:
   min-width ist auto, das Feld darf also nie schmaler werden als sein
   min-content. Eine Spalte 1fr ist minmax(auto,1fr) und uebernimmt diese
   Untergrenze, womit der Behaelter seine eigene Breite verliert. Mit min-width:0
   entscheidet wieder der Behaelter. Auf breiten Viewports aendert sich nichts,
   weil dort kein min-content ueber die Spaltenbreite hinausgeht. */
.grid>*{min-width:0}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px 24px;
  box-shadow:var(--shadow-xs);transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);height:100%}
.card:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.card h3{font-size:18px;margin-bottom:8px}
.card p{font-size:14.5px;color:var(--grey);margin-bottom:14px;line-height:1.6}
.card .more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--accent-ink)}
.card .more .ic{color:var(--accent-ink);transition:transform .2s var(--ease)}
.card:hover .more .ic{transform:translateX(3px)}
a.cardlink{text-decoration:none;display:block;height:100%}
a.cardlink:hover{text-decoration:none}
/* Loesungskarten der Kundengruppen-Uebersichten: Produkt-Icon links, optional
   Tarifrechner-Badge rechts. Farben laufen ueber die Weltfarbe (data-group). */
.card-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);transition:background .2s var(--ease),color .2s var(--ease)}
.card-ic .ic{width:22px;height:22px}
a.cardlink:hover .card-ic{background:var(--accent);color:#fff}
/* Lösungskarten als Bildkarten: Bild-Banner ueber die volle Kartenbreite oben,
   Text darunter. **Nur im Loesungen-Panel der Welt-Startseiten.** Am
   23.08.2026 stand die Karte kurz auch unter "Verwandte Versicherungen"; nach
   der Sicht ist das zurueckgenommen (Ansage Maik: "Die verwandten
   Versicherungen sollten eigentlich nicht groesser werden und ihr eigenes
   Format behalten."). Die verwandte Karte hat seither ihren eigenen
   Regelsatz weiter unten (.card-rel). */
.card.card-prod{padding:0;overflow:hidden}
.card-prod .card-media{position:relative;aspect-ratio:16/10;background:var(--accent-soft);overflow:hidden}
.card-prod .card-media .card-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
a.cardlink:hover .card-prod .card-media .card-thumb{transform:scale(1.045)}
/* Icon-Fallback / Zusatz-Verweise: getoenter Banner mit zentriertem Icon */
.card-prod .card-media .card-ic{position:absolute;inset:0;width:auto;height:auto;border-radius:0;background:none;color:var(--accent-ink)}
.card-prod .card-media .card-ic .ic{width:34px;height:34px}
a.cardlink:hover .card-prod .card-media .card-ic{background:none;color:var(--accent-ink)}
/* Tarifrechner-Badge liegt jetzt lesbar ueber dem Bild (oben rechts) */
/* Badge-Stapel oben rechts auf dem Karten-Bild (Tarifrechner + Exklusiv untereinander) */
.card-prod .card-media .card-badges{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;
  align-items:flex-end;gap:6px}
.card-prod .card-media .card-badge{position:static;margin:0;border-color:transparent;
  background:rgba(255,255,255,.92);color:var(--accent-ink);box-shadow:0 2px 8px -2px rgba(7,58,82,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* **Der Ton ist `--accent-ink` und nicht `--accent`** (31.08.2026,
   Conversion-Runde 1). Weiss auf `--accent` misst 3,52:1 (Basis)
   beziehungsweise 3,82:1 (Schausteller) und reisst damit WCAG 1.4.3;
   `--accent-ink` traegt in jeder Farbfamilie 5,53 bis 6,70:1.

   **Der Verstoss ist aelter als diese Runde, gefunden hat ihn die
   Panel-Vorauswahl.** Solange auf der Welt-Uebersicht kein Panel offen
   stand, sah axe das Abzeichen nie: Es liegt in einer Produktkarte **im**
   Panel, und axe ueberspringt display:none. Wer geklickt hat, sah den
   Verstoss trotzdem -- nur die Messung kam nicht hin. */
.card-prod .card-media .card-badge-ex{background:var(--accent-ink);color:#fff;box-shadow:0 2px 8px -2px rgba(7,58,82,.5)}
.card-prod .card-body{padding:18px 22px 22px}
/* ---------- Verwandte Versicherungen: die flache Zeilenkarte ----------
   Sicht Maik, 23.08.2026: "Das Bild nicht als Quadrat, sondern formfuellend
   links neben dem Text, Groesse angepasst, so dass es gut erkennbar ist. Und
   ich will auch auf Desktop die geringere Hoehe."

   Eigener Regelsatz und eigene Klasse, weil die Karte eine andere Rolle hat als
   die Loesungskarte: Sie ist ein Querverweis am Fuss einer Produktseite, kein
   Auswahlziel. Deshalb eine Zeile statt eines Stapels -- und deshalb **keine
   Mindesthoehe**: Die Hoehe ergibt sich aus dem Text, das Bild folgt ihr.

   Das Raster streckt die Karten einer Zeile weiterhin auf gleiche Hoehe
   (.card{height:100%} plus a.cardlink{height:100%}); align-items bleibt
   unangetastet. */
.card.card-rel{display:flex;align-items:stretch;padding:0;overflow:hidden;min-height:0}
/* Die Bildspalte traegt ihre Breite selbst und schrumpft nicht mit dem Text:
   flex:0 0 36% statt width, sonst gaebe ein langes Kompositum im Titel dem Text
   Vorrang und das Bild wuerde zum Streifen.

   **Warum 36 und nicht mehr.** Gemessen am 23.08.2026 an den vier Probeseiten
   bei 1280 px: Bei 42 % bleiben dem Text 172 px, die Teaser laufen dort auf
   drei bis vier Zeilen und die Karte wird 204 bis 227 px hoch -- hoeher als das
   Textkaestchen davor (170,6 bzw. 190,7 px). Bei 36 % sind es 140 px. Der
   Bildanteil ist hier keine Geschmacksfrage, sondern der Hebel auf die Hoehe.

   Die Leitplanke min-width:130px gilt nur da, wo die Wrap-Flaeche ausgereizt
   ist: Ab 1180 px steht sie fest auf 1124 px, die Karte misst 360 px, 36 %
   davon sind 129,6 px -- die Leitplanke rundet das auf 130 px auf. Darunter
   waechst die Karte mit dem Viewport, und eine feste Untergrenze wuerde die
   Bildspalte dort auf die Haelfte der Karte aufblasen (bei 901 px waeren
   130 von 267 px knapp 49 %). */
.card-rel .card-rel-media{flex:0 0 36%;position:relative;overflow:hidden;
  background:var(--accent-soft);align-self:stretch}
@media(min-width:1180px){.card-rel .card-rel-media{min-width:130px}}
.card-rel .card-rel-media picture{display:block;width:100%;height:100%}
.card-rel .card-rel-thumb{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
a.cardlink:hover .card-rel .card-rel-thumb{transform:scale(1.045)}
/* Icon-Rueckfall (Bilddatei fehlt zur Bauzeit): getoente Spalte mit Symbol.
   Greift heute nirgends, siehe verwandte_karte() in generate_site.py. */
.card-rel .card-rel-media .card-ic{position:absolute;inset:0;width:auto;height:auto;
  border-radius:0;background:none;color:var(--accent-ink)}
.card-rel .card-rel-media .card-ic .ic{width:28px;height:28px}
a.cardlink:hover .card-rel .card-rel-media .card-ic{background:none;color:var(--accent-ink)}
/* Der Text traegt die Hoehe. min-width:0 ist Pflicht: Ohne sie setzt das
   Flex-Element seine min-content-Breite durch, und ein Wort wie
   "Haus- und Grundbesitzerhaftpflicht" schoebe die Bildspalte aus der Karte. */
.card-rel .card-rel-body{flex:1 1 auto;min-width:0;padding:13px 16px;
  display:flex;flex-direction:column;justify-content:center}
.card-rel .card-rel-body h3{font-size:16px;line-height:1.25;margin-bottom:4px;
  overflow-wrap:break-word}
.card-rel .card-rel-body p{font-size:13.5px;line-height:1.5;color:var(--grey);margin-bottom:5px}
.card-rel .card-rel-body .more{font-size:13.5px}
/* "Exklusiv"-Marker: Tag im Produkt-/Rechner-Hero und Chip im Mega-Menue/Suche */
.ex-tag{display:inline-block;margin-left:10px;font-family:var(--font-sans);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:var(--accent);
  color:#fff;line-height:1.3;vertical-align:2px}
.ex-tag-onhero{background:var(--accent-bright);color:#241100;box-shadow:0 2px 10px -2px rgba(0,0,0,.4)}
.ibadge.ibadge-ex{background:var(--accent);color:#fff}
.card-badge{display:inline-flex;align-items:center;gap:5px;margin-top:2px;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;background:var(--accent-soft);color:var(--accent-ink);
  border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);border-radius:999px;padding:4px 9px;white-space:nowrap}
.card-badge .ic{width:12px;height:12px}

/* ---------- Team (bild-gefuehrt, dynamisch) ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.tcard{position:relative;display:flex;flex-direction:column}
.tphoto{position:relative;flex:none;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 120% at 30% 18%,var(--accent-soft),#DCEFFB);box-shadow:var(--shadow-sm)}
.tphoto img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .6s var(--ease)}
.tcard:hover .tphoto img,.tcard:focus-within .tphoto img{transform:scale(1.045)}
.tphoto .tmono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:66px;color:var(--accent-deep)}
.tbody{padding:18px 2px 0;display:flex;flex-direction:column;flex:1 1 auto}
.tbody h3{font-size:20px;margin-bottom:2px;transition:letter-spacing .4s var(--ease)}
.tcard:hover .tbody h3{letter-spacing:.012em}
.tbody .role{color:var(--grey);font-size:14.5px;margin-bottom:13px;line-height:1.45;min-height:42px}
/* Kontaktblock: festes einspaltiges Zweizeilen-Raster. Telefon liegt immer in Zeile 1,
   E-Mail immer in Zeile 2, auch wenn die Telefonzeile fehlt. Der Block sitzt am unteren
   Kartenrand, damit die E-Mail-Zeilen innerhalb einer Kartenreihe auf gleicher Hoehe stehen. */
.tcontact{--tcontact-row:calc(14px * 1.65);margin-top:auto;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,var(--tcontact-row));
  row-gap:8px;border-top:1px solid var(--line-soft);padding-top:13px}
.tcontact a,.tcontact span{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-2);font-weight:500;
  min-width:0;overflow-wrap:anywhere}
.tcontact .tphone{grid-row:1}
.tcontact .temail{grid-row:2}
.tcontact a:hover{color:var(--accent-deep)}
.tcontact .ic{color:var(--accent-ink)}
.tcontact .muted{color:var(--grey);font-weight:400}
/* Kontakt erst bei Hover (nur Geräte mit Maus; Touch zeigt ihn immer) */
@media (hover:hover){
  .tcard .tcontact{opacity:0;transform:translateY(6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .tcard:hover .tcontact,.tcard:focus-within .tcontact{opacity:1;transform:none}
}
@media(max-width:900px){.team-grid{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr}.tphoto{aspect-ratio:3/4}}

/* Themenblock */
.theme{padding:54px 0;border-top:1px solid var(--line-soft)}
.theme:first-of-type{border-top:0}
.theme>.wrap>h2{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.theme .ic-topic{width:30px;height:30px;color:var(--accent);flex:none;padding:0}
.theme>.wrap>p{margin:0 0 22px!important;color:var(--grey)}

/* ---------- Listen ---------- */
.checks{list-style:none;display:grid;gap:13px}
.checks li{position:relative;padding-left:34px;color:var(--ink-2);line-height:1.55}
.checks li:before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--accent-soft)}
.checks li:after{content:"";position:absolute;left:5px;top:7px;width:12px;height:12px;background:var(--accent-deep);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat}
.situations{list-style:none;display:grid;gap:14px;padding:0;margin:0}
.situations li{padding:18px 20px;background:var(--tint);border:1px solid var(--line-soft);border-radius:var(--r-sm);color:var(--ink-2);position:relative;padding-left:22px}
.situations li:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--accent)}

/* ---------- Vergleichstabelle ---------- */
/* A11y-2: Der Bereich scrollt waagerecht und ist seit 25.07.2026 per tabindex="0"
   fokussierbar (axe scrollable-region-focusable). Ohne sichtbaren Fokusring waere der
   Tabstopp sonst unsichtbar. */
.ctable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-xs)}
.ctable-wrap:focus-visible{outline:none;box-shadow:var(--ring)}
.ctable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:700px}
.ctable th,.ctable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.ctable tr:last-child th,.ctable tr:last-child td{border-bottom:0}
.ctable thead th{background:var(--tint);font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--ink);position:sticky;top:0}
.ctable thead th:nth-child(2){color:var(--accent-deep)}
.ctable tbody th{font-weight:600;color:var(--ink-2);width:24%}
.ctable td{color:var(--grey)}
.ctable td.hi{background:var(--accent-soft2);color:var(--ink);font-weight:500}
.ctable.ctable-narrow{min-width:0}
.note{font-size:13px;color:var(--grey);margin-top:12px}

/* Lesefluss in Inhaltssektionen (2026-07-22, Feedback Maik: Absätze, Listen und
   Buttons standen zu dicht). Bewusst auf section.tight begrenzt, damit Heros,
   Karten und Spezial-Layouts unverändert bleiben. */
section.tight p+p{margin-top:14px}
section.tight p+.checks,section.tight p+.situations,section.tight p+.gaps{margin-top:20px}
section.tight .checks+p,section.tight .situations+p,section.tight .gaps+p{margin-top:20px}
section.tight p+.hero-cta{margin-top:24px}
section.tight .hero-cta{gap:14px}
section.tight .note{margin-top:16px}
section.tight .section-head h2{margin-bottom:14px}
section.tight .ctable-wrap+.note{margin-top:14px}

/* zweispaltiger Block */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
/* Dieselbe Falle wie bei den Produktkarten (Funde B1/B2, Paket 3b), diesmal in den
   Fliesstexten der Produktseiten. Rasterfelder tragen min-width:auto und duerfen nie
   schmaler werden als ihr min-content; 1fr ist minmax(auto,1fr) und uebernimmt diese
   Untergrenze. Ein einziges langes Kompositum in einer Liste weitet damit die ganze
   Spalte auf und schiebt sie aus dem Bild. Gemessen bei 320 px:
   betriebshaftpflicht 16 px, betriebsunterbrechung 43 px, geschaeftsinhalt 31 px --
   ausgeloest von Woertern wie "Vermoegensschadenhaftpflicht" (258 px),
   "Betriebsunterbrechungsversicherung" und "Unterversicherungsverzicht".
   min-width:0 gibt dem Behaelter die Hoheit zurueck. */
.split>*{min-width:0}
/* Die Listen selbst sind ebenfalls Raster (display:grid), ihre Eintraege also
   Rasterfelder mit min-width:auto. Damit bestimmt der laengste Begriff die Spalte,
   und der Eintrag wird breiter als die Liste: gemessen ein li von 276 px in einer
   240 px breiten Liste. Wichtig dabei: overflow-wrap:break-word allein genuegt nicht.
   Es erlaubt den Umbruch, verkleinert aber die min-content-Breite ausdruecklich
   nicht. Erst min-width:0 gibt die Untergrenze frei; den sichtbaren Teil erledigt
   dann die Umbruchregel weiter unten. */
.checks>li,.gaps>li,.tips>li,.situations>li{min-width:0}

/* ---------- CTA-Band ---------- */
.cta-band{background:
  radial-gradient(70% 140% at 90% 10%,var(--accent-soft),transparent 60%),var(--tint);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:40px 28px}
.cta-band h2{font-size:clamp(22px,2.4vw,28px)}
.cta-band p{color:var(--grey);margin-top:4px}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px;background:#fff;transition:border-color .2s,box-shadow .2s;overflow:hidden}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;padding:18px 20px;font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);font-weight:700;font-size:18px;line-height:1}
.faq details[open] summary:after{content:"\2013"}
.faq .ans{padding:0 20px 18px;color:var(--grey);font-size:15px;line-height:1.65}
.faq .ans .faq-src{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.faq .ans .faq-src a{color:var(--accent-ink);text-decoration:none;font-weight:600}
.faq .ans .faq-src a:hover{text-decoration:underline}
/* Quellenliste der Depot-FAQ (12.09.2026): zwei Eintraege mit Adresse; die
   Adresse darf auf schmalen Schirmen umbrechen, sonst schiebt sie die Seite
   in die Breite. */
.faq-avd .ans a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.faq-quellen{max-width:820px;margin:14px 0 0;padding-left:20px}
.faq-quellen li{color:var(--grey);font-size:14px;line-height:1.65;margin-bottom:8px;overflow-wrap:anywhere}
.faq-quellen a{color:var(--accent-ink);text-decoration:none;font-weight:600}
.faq-quellen a:hover{text-decoration:underline}

/* ---------- Welt-FAQ nach Vertrag (12.09.2026) ----------
   Unter jeder Themenueberschrift (h2) steht je Produktseite ein Vertrag (h3),
   der Name ist der Link auf die Produktseite. Der Anker traegt denselben
   Abstand zum klebenden Kopf wie die Themenabschnitte (section.tight[id]).
   Der Link im h3 bekommt eine eigene Kennzeichnung (Akzentlinie statt der
   Fliesstext-Unterstreichung), weil die Ueberschrift kein Umgebungstext ist,
   von dem er sich abheben muesste. */
.faq-vertrag{margin-top:34px;scroll-margin-top:clamp(96px,14vw,152px)}
.faq-vertrag:first-child{margin-top:0}
.faq-vertrag h3{margin:0 0 14px}
.faq-vertrag h3 a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--accent-soft);
  transition:color .2s,border-color .2s}
.faq-vertrag h3 a:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}
/* Links in den Antworten unterstrichen, wie in der Depot-FAQ (.faq-avd .ans a,
   12.09.2026): axe meldete link-in-text-block an einem Verweis in einer
   Finanzierungs-Antwort, ein Link im Fliesstext ohne zweites Merkmal ausser
   der Farbe (WCAG 1.4.1). Der Fund bestand schon auf der flachen Seite und
   steht so weiter auf den Produktseiten (dort nicht Gegenstand dieser Runde). */
.faq-vertrag .ans a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
/* Die Sprungliste am Seitenanfang: je Thema seine Vertraege. Am Desktop drei
   Spalten, ab 900 px eine; die Vertragsnamen brechen um (flex-wrap) und
   duerfen innerhalb des Worts brechen (overflow-wrap), damit auf dem Telefon
   nichts seitlich ueberlaeuft. Nicht sticky, wie die Sprungnavigation der
   Produktseiten und aus demselben Grund. */
.faq-sprung{background:#fff;border-bottom:1px solid var(--line-soft);padding:26px 0 18px}
.faq-sprung-titel{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--grey)}
.faq-sprung ul{list-style:none;margin:0;padding:0}
.faq-sprung>.wrap>ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px}
.faq-sprung>.wrap>ul>li{min-width:0}
.faq-sprung a{text-decoration:none;overflow-wrap:anywhere}
.faq-sprung .faq-sprung-thema{display:inline-block;font-weight:700;color:var(--ink);padding:6px 0}
.faq-sprung ul ul{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:2px}
.faq-sprung ul ul a{display:inline-block;font-size:14.5px;color:var(--accent-ink);padding:6px 0}
.faq-sprung a:hover{color:var(--accent-deep);text-decoration:underline}
@media(max-width:900px){
  .faq-sprung>.wrap>ul{grid-template-columns:1fr;gap:16px}
}

/* ---------- Schadenseite, Wissensteil (Welle 1) ---------- */
/* Nutzt das vorhandene Akkordeon (.faq) und die vorhandenen Listen. Neu ist nur,
   was es bisher nirgends gab: Zwischenueberschriften innerhalb einer Antwort und
   der Eilhinweis. Alles unter .sd-ursachen bzw. .sd-*, damit kein bestehender
   Block etwas abbekommt. */
.sd-lead{max-width:820px;color:var(--grey);margin:0 0 18px}
.sd-ursachen .ans>h3{font-size:15px;font-weight:700;color:var(--ink);
  margin:18px 0 10px;letter-spacing:.01em}
.sd-ursachen .ans>h3:first-child{margin-top:4px}
.sd-ursachen .ans>p{margin:0 0 12px}
.sd-ursachen .ans .situations,.sd-ursachen .ans .checks,.sd-ursachen .ans .gaps{margin:0 0 4px}
.sd-ursachen .ans .situations li{padding-top:13px;padding-bottom:13px}
/* Der Eilhinweis steht ueber allem anderen im Block und traegt deshalb Farbe,
   aber keinen Alarmton: Wer hier landet, ist ohnehin schon angespannt. */
.sd-eilig{margin:2px 0 16px;padding:12px 16px;border-radius:var(--r-sm);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  color:var(--ink-2)}
.sd-eilig strong{color:var(--accent-deep)}
.sd-eilig a{color:var(--accent-ink);font-weight:700;text-decoration:none;white-space:nowrap}
.sd-eilig a:hover{text-decoration:underline}

/* ---------- Schadenseite, Ursachen-Finder (28.07.2026) ---------- */
/* Bildkacheln als Einstieg ueber die Ursache. Reine Darstellungsschicht: Es
   kommt kein Inhalt dazu, nur ein zweiter Weg zu denselben 16 Bloecken.

   **Alles, was zuruecktritt, tritt mit display:none zurueck.** Kein
   visibility-Trick, kein height:0, kein opacity:0. Der Grund ist L7: Genau so
   ist im Themen-Akkordeon der Tastaturfokus in geschlossene Panels geraten. Was
   nicht sichtbar ist, darf auch nicht erreichbar sein.

   **Die Finder-Ansicht haengt an .sd-fokus, und die Klasse setzt nur das
   Skript.** Ohne JavaScript gibt es sie nie, also tritt ohne JavaScript auch
   nichts zurueck. */
.sd-finder{margin:0 0 26px}
.sd-finder-titel{font-size:17px;font-weight:700;color:var(--ink);margin:0 0 6px;
  letter-spacing:.01em}
/* Der Kopf des Kachelrasters (25.08.2026, Ansage Maik: der Knopf gehoert
   "nicht in den Hero, sondern unter dem Hero rechts neben die Kacheln").

   **Eine Zeile auf der Achse des Rasters:** Ueberschrift links, Knopf rechts,
   beide auf den Kanten, auf denen auch die Kachelspalten stehen. `space-between`
   und nicht `margin-left:auto`, damit die Zeile bei zwei Elementen dasselbe tut
   wie bei dreien, falls einmal eines dazukommt.

   **Auf Telefonbreite bricht sie um.** `flex-wrap` und die Bestandsregel
   `.pill{width:100%}` unter 561 px setzen den Knopf dann in voller Rasterbreite
   unter die Ueberschrift. Es gibt dafuer keine eigene Medienabfrage: Die Seite
   hat die Regel schon, und eine zweite waere eine zweite Wahrheit ueber
   dieselbe Breite.

   `margin-bottom` traegt hier die Zeile und nicht mehr die Ueberschrift: Sonst
   summierten sich die 6 px der Ueberschrift und der Zeilenabstand. */
.sd-finder-kopf{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:10px 20px;margin:0 0 6px}
.sd-finder-kopf .sd-finder-titel{margin:0}
/* Der Knopf ist ein gewoehnlicher Pill der Seite. Die Mindesthoehe von 46 px
   bringt `.pill` schon mit; sie steht hier nicht noch einmal, damit es nicht
   zwei Zahlen fuer dasselbe Tippziel gibt. */
.sd-fc-knopf{flex:0 0 auto}
/* Der Satz im Kopf der Bilderauswahl (04.08.2026). Er stand vorher als zweite
   Haelfte im Vorspann unter dem Finder; dort las ihn, wer schon gewaehlt
   hatte. Hier nimmt er die Angst vor der falschen Kachel, bevor sie entsteht. */
.sd-finder-lead{max-width:820px;margin:0 0 14px;font-size:14px;line-height:1.55;
  color:var(--grey)} /* L4 */
/* Vorsortierung nach Vertragsart (29.07.2026). Sie steht ueber den Gruppen und
   hebt sich ab, ohne sie zu verdraengen: Was darunter steht, ist vollstaendig
   da. Deshalb ein getoenter Kasten und keine Ausblendung -- Vorsortierung,
   kein Filter.

   Die Sprungmarken sind reine Ankerpunkte ohne Inhalt. Sie tragen die
   Kennungen #sd-sparte-<key>, damit der Weg von der Produktseite auch ohne
   JavaScript am Kachelraster landet.

   **position:absolute und nicht height:0.** Die naheliegende Schreibweise
   waere `display:block;height:0`, und sie ist hier ausdruecklich falsch: Die
   Zusicherung `test_zuruecktreten_geschieht_mit_display_none` verbietet
   height:0 im ganzen Finder-Block, weil genau dieser Ausweichweg den Fund L7
   erzeugt hat (sichtbar weg, fuer die Tastatur weiterhin da). Dass die Marken
   leer sind und nichts Fokussierbares enthalten, macht die Schreibweise nicht
   harmlos, sondern nur diesmal folgenlos -- und eine Regel, die man umgeht,
   solange es gerade passt, ist keine. `position:absolute` nimmt die Marke aus
   dem Fluss, ohne etwas zu verstecken: kein Zeilenkasten, keine Luecke ueber
   dem Raster, und der Anker bleibt ein gueltiges Sprungziel. */
.sd-sprungmarke{position:absolute;scroll-margin-top:clamp(76px,12vw,118px)}
.sd-vorsortierung{margin:0 0 26px;padding:18px 18px 14px;border-radius:var(--r-sm);
  background:var(--tint);border:1px solid var(--accent)}
.sd-vorsortierung[hidden]{display:none}
.sd-vors-titel{color:var(--accent-deep);font-size:13px}
.sd-vors-titel:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sd-vors-alle{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--grey)} /* L4 */
.sd-vors-alle a{font-weight:700;color:var(--accent-ink)}
.sd-vors-alle a:hover{color:var(--accent-deep)}
.sd-vors-hinweis{display:block;margin-top:4px}
/* **Die Formular-Leiste ist am 25.08.2026 entfallen** (Ansage Maik). Hier
   standen die Regeln fuer .sd-formulare, die Schnellwahl (.sd-fsuche und
   Geschwister), das Vollverzeichnis (.sd-fvoll) und die Formularkacheln
   (.sd-formkachel, .sd-kachel-sub). Ihre Aufgabe hat das Formularcenter
   uebernommen; die Kachelregeln dort heissen .fc-*. Der Downloadlink im
   Ursachenblock darunter bleibt, er war nie Teil der Leiste. */

/* Der Downloadlink oben im Ursachenblock. Er steht vor allem anderen, deshalb
   traegt er eine eigene Flaeche statt nur Fettschrift. */
.sd-formularlink{margin:0 0 14px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--tint);border:1px solid var(--accent);font-size:14px;
  line-height:1.5}
.sd-formularlink a{font-weight:700;color:var(--accent-ink)}
.sd-formularlink a:hover{color:var(--accent-deep)}

/* Der Weg von der Produktseite in die vorsortierte Suche braucht hier nichts:
   Er laeuft ueber den vorhandenen Knopf "Zum Schaden-Bereich" (.sz-cta), der
   sein Aussehen schon hat. Die vorherige Fassung setzte eine eigene Zeile
   .sd-mehr-sparte darunter; sie ist am 29.07.2026 entfallen. */

/* Vier benannte Themengruppen statt einer durchlaufenden Wand (29.07.2026).
   Die Ueberschrift ist bewusst leiser als die Finder-Ueberschrift darueber:
   Sie ordnet, sie kuendigt nicht an. Deshalb kleiner, in Versalien und im
   ruhigen Grau, mit einer Haarlinie als Trennung zur Gruppe davor. */
.sd-gruppe+.sd-gruppe{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.sd-gruppe-titel{font-family:var(--font-sans);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grey); /* L4 */
  margin:0 0 12px}
.sd-kacheln{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:641px){.sd-kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:901px){.sd-kacheln{gap:14px;grid-template-columns:repeat(4,minmax(0,1fr))}}
.sd-kachel{display:flex;flex-direction:column;height:100%;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  text-decoration:none;color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.sd-kachel-bild{display:block;background:var(--tint)}
.sd-kachel-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover}
/* Ohne Motiv bleibt die Kachel an ihrem Platz und behaelt ihr Format, damit das
   Raster nicht springt. Ein Platzhalterbild waere unehrlich, eine fehlende
   Kachel schlechter als eine ohne Bild. */
.sd-kachel-ohne-bild .sd-kachel-bild{aspect-ratio:4/3;background:var(--tint);
  border-bottom:1px solid var(--line-soft)}
.sd-kachel-tx{display:block;padding:11px 12px 13px;font-size:14px;
  font-weight:600;line-height:1.35;color:var(--ink)}
.sd-kachel:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);
  transform:translateY(-2px)}
.sd-kachel:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .sd-kachel{transition:none}
  .sd-kachel:hover{transform:none}
}

/* Der Weg zurueck. Das Skript erzeugt den Knopf und haengt ihn ganz nach oben;
   ohne .sd-fokus ist er nicht da und damit auch nicht fokussierbar. */
.sd-zurueck{display:none}
.sd-fokus .sd-zurueck{display:inline-flex;align-items:center;gap:8px;
  margin:0 0 18px;padding:10px 16px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.sd-fokus .sd-zurueck:hover{border-color:var(--accent);color:var(--accent-ink)}
.sd-fokus .sd-zurueck:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sd-zurueck-pfeil{font-size:16px;line-height:1}

/* Die gewaehlte Ansicht: Die Kacheln treten zurueck. Uebrig bleibt der Weg
   zurueck und eine geoeffnete Hilfe. */
.sd-fokus .sd-finder{display:none}
/* Die Doppelung unter der Bilderauswahl, aufgeloest am 04.08.2026 (Ansage
   Maik).

   **Was hier vorher stand.** Die beiden Regeln hingen an `.sd-fokus`, traten
   also erst zurueck, **nachdem** eine Ursache gewaehlt war. Solange nichts
   gewaehlt war, standen unter den sechzehn Bildkacheln dieselben sechzehn
   Themen ein zweites Mal: als Vorspann und als sechzehn offen im Fluss
   stehende `<details>`. Zwei Ansichten desselben Inhalts, untereinander.

   **Jetzt haengen sie an `js`.** Mit Skript ist die Liste kein Zugang mehr,
   sondern das Ziel: Sie erscheint ueber Kachelwahl und Ansprung, und diese
   Mechanik gab es schon. Ohne Skript aendert sich nichts -- dort ist die
   Liste vollstaendig da und der einzige Weg, und genau deshalb steht sie
   weiterhin im Markup und wird nicht weggebaut.

   Die Auswahl selbst ist die Ausnahme von der Regel: `[data-sd-gewaehlt]`
   setzt das Skript an genau einen Block. Entscheidung 7 bleibt gewahrt --
   von sich aus steht keiner offen, weder mit noch ohne Skript. */
.js .sd-lead{display:none}
.js .sd-ursachen>details:not([data-sd-gewaehlt]){display:none}
.sd-fokus .sd-ursachen>details[data-sd-gewaehlt]{border-top:0}
.sd-schadenfinder details[data-sd-gewaehlt]:focus{outline:none}
.sd-schadenfinder details[data-sd-gewaehlt]:focus-visible{outline:3px solid var(--accent);
  outline-offset:3px}

/* ---------- Trust-Band ---------- */
.trust{background:var(--navy);color:#CFE6F4;position:relative}
.trust .wrap{display:flex;justify-content:center;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;padding:24px 28px;font-size:14.5px}
.trust span{display:inline-flex;align-items:center;gap:9px}
.trust span+span{position:relative}
.trust span+span:before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(127,224,255,.5);margin-right:clamp(16px,3vw,40px);display:inline-block}
.trust b{color:#fff;font-weight:600}

/* ---------- Footer ---------- */
/* Farbwerk des Footers als Token-Satz (21.08.2026). Alle Footer-Farben
   haengen an --ft-*; die neutrale Belegung hier entspricht Wert fuer Wert der
   bisherigen festverdrahteten Fassung (Navy, Blautoene). Auf den Seiten der
   vier Kundenwelten schaltet die Regel unter dem Block nur --ft-bg um -- ueber
   die bestehende Akzent-Token-Mechanik (body[data-group] setzt --accent*),
   kein Sonderweg je Welt. Die Textstufen bleiben in beiden Lagen dieselben;
   die Kontrastmessung dazu steht in tests/browser/footer-weltfarbe.spec.js. */
.site-footer{
  --ft-bg:var(--navy);
  --ft-tx:#9FC0D4;
  --ft-link:#CFE6F4;
  --ft-strong:#fff;
  --ft-hair:rgba(255,255,255,.12);
  --ft-edge:rgba(127,224,255,.12);
  --ft-ring:rgba(127,224,255,.28);
  --ft-ring-hover:rgba(127,224,255,.55);
  --ft-hover-bg:rgba(127,224,255,.12);
  background:var(--ft-bg);color:var(--ft-tx);font-size:14.5px;border-top:1px solid var(--ft-edge)}
/* Footer in Weltfarbe, VOLLE Fassung (Entscheidung Maik nach Sicht,
   21.08.2026 abends): abgedunkelte echte Weltfarbe, vier Fuenftel der
   Tiefstufe auf dunklem Grund. Die dezente 25%-Navy-Mischung vom selben Tag
   ist gescheitert -- alle vier Welten wirkten gleich blau -- und ersetzt.
   Neutrale Seiten tragen data-group="" und behalten die Navy-Belegung oben.
   Kontrast im Browser gemessen (berechnete Stile): jede Textstufe >= 4,5:1,
   schlechtester Wert 4,89:1 (Fliesstext auf Privat); wird die Formel
   angefasst, misst tests/browser/footer-weltfarbe.spec.js nach. */
body[data-group]:not([data-group=""]) .site-footer{
  --ft-bg:color-mix(in srgb,var(--accent-deep) 80%,#041018)}
.site-footer .wrap{padding:54px 28px 40px}
.site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;margin-bottom:30px}
.site-footer .fprod{border-top:1px solid var(--ft-hair);padding-top:12px;margin-top:6px;margin-bottom:24px}
/* Versicherungen: manuell aufklappbarer Bereich */
.site-footer .fprod-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:0;padding:12px 0;cursor:pointer;color:var(--ft-strong);font-family:var(--font-sans);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;transition:color .15s}
.site-footer .fprod-toggle:hover{color:var(--ft-link)}
.site-footer .fprod-toggle .chev{width:16px;height:16px;flex:none;transition:transform .3s ease;color:var(--ft-tx)}
.site-footer .fprod-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* Zugeklappt aus der Tab-Reihenfolge (13.09.2026). Gemessen: Per Tab landete
   der Fokus auf allen Seiten und Breiten 18-mal hintereinander auf den Links
   des zugeklappten Feldes, das nur mit max-height:0 und overflow:hidden zu war
   (WCAG 2.2, 2.4.7). Zwei Schichten: site.js setzt inert auf das zugeklappte
   Feld; visibility:hidden hier nimmt die Links auch dort heraus, wo inert fehlt.
   Die visibility wechselt beim Zuklappen erst nach dem Hoehenuebergang (.45s),
   damit das Zuklappen sichtbar bleibt; beim Aufklappen sofort. */
.site-footer .fprod-panel{max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .45s ease,visibility 0s linear .45s}
.site-footer .fprod-panel.open{max-height:1400px;visibility:visible;
  transition:max-height .45s ease,visibility 0s linear 0s}
.site-footer .fprod-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:20px;padding-bottom:4px}
/* Vorhang-Footer: der Footer liegt fest hinter dem Inhalt. main hat einen
   unteren Abstand in Footer-Hoehe (per site.js gesetzt); beim Scrollen ans Ende
   schiebt sich der Inhalt hoch und gibt den festen Footer wie einen Vorhang frei.
   Breit ist der Fuss fest; sticky braeuchte etwas, woran es kleben kann, und
   der Fuss ist das letzte Element. Unter 900 px steht deshalb eine andere
   Bauform (Abfrage max-width:900px weiter unten): dort bekommt der Fuss
   einen Kasten, in dem er kleben kann. */
main#main{position:relative;z-index:1;background:var(--bg)}
#site-footer{position:fixed;left:0;right:0;bottom:0;width:100%;z-index:0}
/* Auf der Seite des Schadenformulars (body.sm-seite, setzt site.js) gibt es
   den Enthuellungs-Effekt nicht: Der Fuss fliesst normal im Dokument, damit
   er sich nie ueber die feste Formular-Leiste schieben kann (Sicht Maik,
   22.08.2026). Die Leiste liegt immer zuoberst. */
body.sm-seite #site-footer{position:static}
body.sm-seite main#main{margin-bottom:0!important}
/* Die mobile Aktionsleiste (Telefon, Beratung) des Fusses entfaellt auf dieser
   Seite: Sie laege am selben unteren Rand wie die Formular-Leiste, und der Anruf
   steht dort ohnehin in jedem Schritt. */
body.sm-seite .actionbar{display:none}
/* Ebenso die feste CTA-Schiene des Desktops: kein festes Element ausser
   Kopfzeile und Formular-Leiste (Festlegung Maik). */
body.sm-seite .ctarail{display:none}

/* ---------- Verhalten ohne JavaScript (AP1/S3, Audit F4) ----------
   Header, Navigation und Footer stehen seit AP1 statisch im HTML. Damit sie ohne
   JavaScript auch wirklich bedienbar sind, werden hier die Stellen zurueckgenommen,
   die eine laufende Skriptdatei voraussetzen. Die Klasse js setzt site.js selbst;
   bleibt sie aus, gilt durchgaengig der Fallback. */
/* Der Vorhang-Footer liegt fest hinter dem Inhalt und wird erst sichtbar, weil
   site.js main einen unteren Abstand in Footer-Hoehe gibt. Ohne Skript gaebe es
   diesen Abstand nie und der Footer bliebe dauerhaft verdeckt: kein Impressum,
   keine Rechtslinks. Ohne JavaScript flieszt er deshalb normal im Dokument. */
html:not(.js) #site-footer{position:static}
html:not(.js) main#main{margin-bottom:0!important}
/* Die Versicherungen klappen per Button auf. Ohne Skript bleibt der Bereich offen,
   der Umschalter entfaellt. Die visibility:hidden des zugeklappten Feldes
   (13.09.2026) wird hier ebenso zurueckgenommen, sonst waeren die 18
   Produktlinks ohne Skript unsichtbar und unerreichbar. */
html:not(.js) .site-footer .fprod-toggle{display:none}
html:not(.js) .site-footer .fprod-panel{max-height:none;overflow:visible;visibility:visible}
/* Die Suche wertet die Navigationsdaten im Browser aus und hat kein Serverziel. */
html:not(.js) .hsearch{display:none}
/* Schmale Ansichten ohne Skript: Kundengruppen und Themen umbrechen lassen,
   statt sie hinter dem nicht funktionierenden Menü-Button zu verstecken. */
@media(max-width:900px){
  html:not(.js) .hdr-row1 .r1{flex-wrap:wrap;gap:10px 14px;min-height:0;padding:12px 0}
  html:not(.js) .brand{order:1}
  /* Eigene Zeile mit Umbruch: sonst schiebt die Kette aus Utility-Links, Telefon
     und CTA den Beratungsbutton auf schmalen Geraeten aus dem Bild. */
  html:not(.js) .r1right{order:2;width:100%;margin-left:0;flex-wrap:wrap;gap:10px 14px}
  html:not(.js) .gtoggle{order:3;width:100%;overflow-x:auto;justify-content:flex-start}
  html:not(.js) .r2{height:auto;padding:6px 0}
}
/* "Nach oben"-Button: schwebt ueber Inhalt und Vorhang-Footer (z-index 75:
   ueber Aktionsleiste 70 und Inhalt, unter Header 80 und Menues) */
.to-top{position:fixed;left:24px;bottom:24px;z-index:75;width:46px;height:46px;border:none;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 10px 26px -8px rgba(7,58,82,.55);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease,visibility .25s,background .15s}
.to-top:hover{background:var(--accent-deep)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
@media(max-width:900px){.to-top{left:16px;bottom:74px;width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:opacity .01s}}
.site-footer .fprod-col h3{font-family:var(--font-sans);color:var(--ft-strong);font-size:14px;font-weight:600;margin-bottom:13px}
.site-footer .fprod-col h3 a{color:var(--ft-strong)}
.site-footer .fprod-col h3 a:hover{color:var(--ft-link)}
.site-footer .fprod-col ul{list-style:none;display:grid;gap:9px}
.site-footer .fprod-col a{color:var(--ft-tx)}
.site-footer .fprod-col a:hover{color:var(--ft-strong)}
/* width:auto ist hier Pflicht, nicht Geschmack (AP3-Nachbesserung 25.07.2026).
   Seit AP2/S5 tragen die Bilder width- und height-Attribute. Das width-Attribut
   wirkt als Presentational Hint (width:1891px), den die globale Regel
   img{max-width:100%} auf die Spaltenbreite stutzt, waehrend height:76px hier fest
   bleibt: Ergebnis war ein horizontal um Faktor 1,6 bis 4,3 gestrecktes Logo, je
   Breite unterschiedlich. Mit width:auto rechnet der Browser die Breite wieder aus
   dem Seitenverhaeltnis (167 px bei 76 px Hoehe). Das Kopf-Logo eine Regel weiter
   oben (.brand img) macht es seit immer genau so; der Fussbereich hatte es
   vergessen. Nicht die globale img-Regel anfassen: height:auto dort wuerde jedes
   Bild der Seite betreffen, hier geht es nur um das Footer-Logo. */
.site-footer img{height:76px;width:auto;margin-bottom:18px}
.site-footer p{color:var(--ft-tx);line-height:1.7}
.site-footer a{color:var(--ft-link)}.site-footer a:hover{color:var(--ft-strong)}
.site-footer h2{font-family:var(--font-sans);color:var(--ft-strong);font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}
.site-footer ul{list-style:none;display:grid;gap:10px}
.site-footer .legal{border-top:1px solid var(--ft-hair);padding-top:20px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:13.5px}
.site-footer .legal a{white-space:nowrap;color:var(--ft-tx)}
.site-footer .legal a:hover{color:var(--ft-strong)}
/* Der Verguetungshinweis (10.09.2026, Rechtstexte-Pruefung): eigene Zeile in
   der umbrechenden Flex-Reihe, und **sein Link ist unterstrichen**.
   ---------------------------------------------------------------------------
   Die uebrigen Eintraege der Rechtszeile sind eine Linkliste: Dort
   unterscheidet nichts einen Link vom Umgebungstext, weil es keinen
   Umgebungstext gibt. Dieser Hinweis ist der erste Fliesstext in der
   Fusszeile, und in ihm steckt ein Link -- in derselben Farbe wie der Satz
   drumherum (beide `--ft-tx`, Verhaeltnis 1:1) und ohne Unterstreichung, weil
   die Regel `main :is(p, li, label, dd) > a:not([class])` nur **innerhalb von
   main** greift und die Fusszeile ausserhalb liegt.

   Wer Farben nicht unterscheiden kann, saehe dort keinen Link. Die
   Barrierefreiheitsseite dieser Website sagt ausdruecklich zu: "Links im
   Fliesstext sind unterstrichen und damit nicht nur an der Farbe erkennbar."
   Ohne diese drei Zeilen waere das eine Zusage, die die eigene Fusszeile
   bricht.

   `white-space:normal` hebt das `nowrap` der Zeile darueber auf: In einer
   Linkliste soll ein Eintrag nicht umbrechen, in einem Satz muss er es
   duerfen -- sonst schiebt ein laengerer Linktext den Satz bei 320 px aus
   dem Bild. */
.site-footer .legal .ft-verguetung{flex-basis:100%;line-height:1.55}
.site-footer .legal .ft-verguetung a{white-space:normal;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:from-font}
.site-footer .fsocial{display:flex;align-items:center;gap:12px;margin-top:18px}
.site-footer .fsocial span{font-family:var(--font-sans);font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ft-tx)}
.site-footer .fsocial a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--ft-ring);color:var(--ft-link);transition:background .15s,border-color .15s,color .15s}
.site-footer .fsocial a:hover{background:var(--ft-hover-bg);border-color:var(--ft-ring-hover);color:var(--ft-strong)}
.site-footer .fsocial .ic{width:19px;height:19px}

/* ---------- Responsive ---------- */
/* AP1/S3: Die einklappenden Header-Regeln haengen an html.js, nicht an der reinen
   Bildschirmbreite. Sie ersetzen sichtbare Navigation durch den Menü-Button, und der
   funktioniert nur mit JavaScript. Laeuft site.js nicht (deaktiviert, blockiert,
   Ladeabbruch), wird die Klasse js nie gesetzt, die Regeln greifen nicht und die
   statische Navigation bleibt stehen. Fehlerfall ist damit die navigierbare Seite. */
@media(max-width:1300px){
  html.js .util{display:none}
}
@media(max-width:1100px){
  html.js .tel,html.js .r1right .pill{display:none}
  html.js .burger{display:inline-flex}
}
@media(max-width:900px){
  html.js .gtoggle,html.js .hdr-row2{display:none}
  .mega{display:none}
  /* Logo mittig, Menü-Button absolut am rechten Rand (zählt nicht in die Zentrierung) */
  html.js .hdr-row1 .r1{min-height:78px;justify-content:center;position:relative}
  html.js .r1right{position:absolute;right:0;top:50%;transform:translateY(-50%);margin-left:0}
  .brand img,.brand svg{height:60px}
  .hero-sub .wrap{grid-template-columns:1fr;gap:28px;padding:40px 24px 44px}
  .split{grid-template-columns:1fr;gap:28px}
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr}
  /* Die zweite Haelfte von B1/B2: Sobald die Spalte nicht mehr mitwaechst (siehe
     .grid>*{min-width:0}), muss der laengste Begriff umbrechen koennen. Die
     deutschen Komposita der Produktnamen sind breiter als eine Karte auf dem
     Telefon: "Betriebsschliessungsversicherung" misst 287 px, die Karte dort
     263 px. Ohne Umbruchmoeglichkeit stuende das Wort ueber den Kartenrand hinaus
     und wuerde von .card-prod (overflow:hidden) abgeschnitten; der Inhaltsverlust
     waere also nur verschoben.
     Bewusst erst ab hier und nicht sitewide: Ab zwei Spalten aufwaerts ist die
     Karte breit genug fuer den laengsten Produktnamen. Nachgemessen bei 1024 px
     tut break-word dort sogar Schaden -- "Vermoegensschadenhaftpflicht" misst
     258,20 px in einer 258 px breiten Karte, ragt also um zwei Zehntel Pixel
     hinaus, und break-word setzt daraufhin das letzte "t" allein auf eine dritte
     Zeile. Ein unsichtbarer Ueberstand ist das kleinere Uebel als ein
     abgetrennter Buchstabe.
     hyphens:auto waere die schoenere Trennung, scheidet aber aus: Ohne geladenes
     Trennwoerterbuch bricht Chrome ebenso willkuerlich, nur zusaetzlich ohne
     sichtbaren Trennstrich ("Betriebsschliess|ungsversicher|ung"). Das haengt an
     der Umgebung und waere nicht reproduzierbar. */
  .card h3{overflow-wrap:break-word}
  /* Zweite Haelfte derselben Sache in den Fliesstexten: Sobald die Spalte nicht mehr
     mitwaechst (.split>*{min-width:0}), muss das lange Wort umbrechen koennen, sonst
     steht es ueber dem Rand. Fachbegriffe wie "Unterversicherungsverzicht" oder
     "Betriebsunterbrechungsversicherung" lassen sich nicht durch kuerzere ersetzen,
     ohne die Aussage zu verwaessern. break-word greift nur, wenn ein einzelnes Wort
     nicht in die Zeile passt, und aendert nichts, wo es passt. Wie bei .card h3
     bewusst erst ab hier: Ab zwei Spalten aufwaerts ist der Platz da, und bei 1024 px
     hat break-word nachweislich Schaden angerichtet (siehe Commit 47c0a5c). */
  .checks li,.gaps li,.tips li,.situations li{overflow-wrap:break-word}
  /* Rechtstexte: E-Mail-Adressen, Registernummern und Verordnungsnamen sind unteilbar
     und laenger als eine Handybreite. Ohne Umbruch stehen sie ueber dem Kartenrand. */
  .lcard-head h2,.lcard-body{overflow-wrap:break-word}
  .site-footer .cols{grid-template-columns:1fr;gap:26px}
  .site-footer .fprod-cols{grid-template-columns:1fr 1fr;gap:24px 28px}
  /* Am unteren Rand liegen auf schmalen Breiten zwei feste Bedienelemente ueber
     dem Vorhang-Footer: die Aktionsleiste (63 px hoch, direkt am Rand) und
     darueber der "Nach oben"-Knopf (bottom 74 px, 42 px hoch, also bis 116 px).
     Der Footer endete aber schon 40 px ueber dem Rand. Folge: Der Knopf lag auf
     dem Impressumslink, und die Registriernummer stand hinter der
     Aktionsleiste -- zwei Ziele, von denen keines mehr sicher zu treffen war.
     Reserviert wird deshalb genau der belegte Streifen plus 16 px Luft
     (74 + 42 + 16). Auf breiten Viewports gibt es beides an dieser Stelle nicht:
     Der Knopf sitzt dort links neben den Rechtslinks, nicht auf ihnen. */
  /* ---- Unter 900 px ist der Vorhang ein Klebe-Fuss (Handy-Runde 3, 13.09.2026).

     **Der Vorhang setzt voraus, dass der Fuss ins Fenster passt: Breit liegt
     er `position:fixed` am unteren Rand, und Scrollen bewegt ihn nicht.** Ist
     er hoeher als das Fenster, ragt sein oberer Teil darueber hinaus und ist
     mit keiner Scrollposition je zu erreichen.

     Nachgemessen am 09.09.2026 ueber eine Breitenreihe (immer dieselbe Seite,
     /privat/altersvorsorge.html):

         320 px -> Fuss 1220 px    375 px -> 1130    414 px -> 1108
         600 px -> 1068            700-900 px -> 1028
         901 px -> 509             1280 px -> 469

     Der Sprung liegt exakt auf dieser Breitengrenze, und zwar aus eigener
     Ursache: Hier bricht `.cols` auf eine Spalte um. Unterhalb passt der Fuss
     in kein reales Fenster, oberhalb in jedes. Deshalb steht hier keine neue
     Zahl, sondern dieselbe, die schon die ganze Gestalt des unteren Randes
     entscheidet (Aktionsleiste statt Kontaktleiste, 132 px Reserve).

     **Drei Anlaeufe.** Am 09.09.2026 war der Vorhang unter 900 px abgeschaltet
     (Fuss im Fluss). Am 12.09.2026 kam er zurueck als fester Kasten in
     Fensterhoehe mit eigenem Scroll: Der Inhalt gab ihn frei, und was nicht
     ins Fenster passte, war im Fuss selbst zu erreichen. Das hat Maik am
     Livestand am 13.09.2026 verworfen: "in beide richtungen hakt es [...]
     man muss den finger immer vom bildschirm nehmen und den scroll neu
     beginnen [...] ausserdem flackert es kurz wenn die untere vorhangkante
     den oberen bildschirm erreicht hat." Der Grund ist kein Fehler im Detail,
     sondern die Bauform: Seite und Fuss waren **zwei Scrollflaechen**. Ein
     Wisch bleibt auf der Flaeche, auf der er begonnen hat (so arbeiten iOS
     und Android), und die Uebergabe zwischen beiden ist der Ruck. Das ist mit
     keiner Eigenschaft am Scrollkasten zu beheben, sondern nur ohne zweiten
     Scrollkasten.

     **Die Bauform seit dem 13.09.2026: ein Kasten, in dem der Fuss klebt.**
     `#site-footer` steht im Fluss, beginnt aber eine Fensterhoehe **vor** dem
     Ende von `main` (margin-top:-100dvh, hinter dem Inhalt, weil `main` mit
     z-index:1 darueber malt) und reicht eine Fensterhoehe **ueber** den Fuss
     hinaus (::after). Der innere `.site-footer` klebt darin mit
     `position:sticky; top:0`. Was daraus folgt, ist Rechnung, keine Messung:

       Phase 1 (Vorhang): Sobald der obere Rand des Fusses den oberen
       Fensterrand erreicht, klebt er dort, waehrend `main` weiter hochscrollt
       und ihn von oben nach unten freigibt. Das ist genau der Moment, in dem
       das untere Ende von `main` in das Fenster kommt (der Kasten beginnt eine
       Fensterhoehe vor dem Ende von `main`).

       Phase 2 (Weiterlesen): Wenn `main` oben aus dem Bild ist, ist der Kasten
       ausgeschoepft (sein Inhalt endet mit dem Fuss, das ::after ist die
       Fensterhoehe, um die er versetzt begann). Der Fuss klebt nicht mehr und
       scrollt wie jedes Element im Fluss weiter, bis sein unterer Rand am
       unteren Fensterrand steht. Das Dokument ist so hoch wie mit einem Fuss
       im Fluss; die Fensterhoehe des Versatzes hebt sich gegen das ::after auf.

     Ein Scroll, eine Flaeche. Der Wisch wechselt nirgends die Flaeche, der
     Rueckweg ist derselbe Scroll rueckwaerts, und der Uebergang zwischen den
     Phasen ist keiner (der Fuss steht in beiden am selben Ort, nur die Regel,
     die ihn dort haelt, wechselt).

     **`min-height` und Flex am inneren Fuss.** Ist der Fuss kuerzer als das
     Fenster (breite Tablets unter 900 px mit kurzem Fuss), klebte er oben und
     liesse darunter Kastenfarbe frei. Mit Fensterhoehe als Mindestmass fuellt
     er das Bild, und `justify-content:flex-end` schiebt seinen Inhalt dabei
     nach unten, wie beim festen Fuss breit.

     **`100dvh` mit Rueckfall `100vh`.** dvh nimmt die einklappende
     Browserleiste mit; die vh-Zeile davor gilt in Browsern ohne dvh und wird
     sonst ueberschrieben. Beide Masse heben sich im Dokument gegeneinander auf
     (Versatz oben, ::after unten), die Dokumenthoehe haengt nicht daran.

     **`z-index:auto` ist noetig.** Der Grundwert `z-index:0` macht den Kasten
     zum Stapelkontext; die Aktionsleiste steht im Markup **im** Kasten und
     kaeme mit ihrem `z-index:70` nicht mehr ueber `main` (1) hinaus.

     **`overflow` an den Vorfahren.** `html` traegt overflow-x:hidden; das
     wandert an den Viewport und macht `html` nicht zum Scrollkasten, sticky
     haengt also am Fenster. Wer `body` ebenfalls overflow-x:hidden gibt,
     macht `body` zum Scrollkasten und den Klebe-Fuss zu einem Fuss im Fluss.

     **Die Ruecknahmen sind die des Bestands**: `body.sm-seite` (Schadenformular
     mit eigener fester Leiste) und `html:not(.js)` stehen weiter oben auf
     `position:static`. Hier kommen Versatz, ::after und Klebe dazu, die dort
     ebenso zurueckgenommen werden muessen. `!important` am Abstand unter
     `main` ist noetig, weil site.js ihn als Inline-Stil setzt (syncCurtain,
     fuer den festen Fuss breit). */
  #site-footer{
    position:relative;
    z-index:auto;
    height:auto;
    margin-top:-100vh;
    margin-top:-100dvh;
  }
  #site-footer::after{content:"";display:block;height:100vh;height:100dvh}
  #site-footer>.site-footer{
    position:sticky;
    top:0;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  main#main{margin-bottom:0!important}
  html:not(.js) #site-footer,body.sm-seite #site-footer{margin-top:0}
  html:not(.js) #site-footer::after,body.sm-seite #site-footer::after{content:none}
  html:not(.js) #site-footer>.site-footer,body.sm-seite #site-footer>.site-footer{
    position:static;min-height:0;display:block}
  .site-footer .wrap{padding-bottom:132px}
  .actionbar{display:flex}
  /* Fokus nicht unter der Leiste (WCAG 2.2, 2.4.11; 13.09.2026). Steht der Fuss
     im Fluss (ohne Skript, reduzierte Bewegung), tut der Fokus-Listener in
     site.js nichts, und der Browser legt ein per Tab fokussiertes Element an
     den unteren Fensterrand, also unter die feste Aktionsleiste oder den
     Sockel. Gemessen auf altersvorsorge, altersvorsorgedepot und privat/index
     (letzte zehn Fokusziele im Inhalt plus Fuss): ohne Skript 5 bis 7 Links
     verdeckt, bei reduzierter Bewegung 3 bis 4; mit diesem Polster 0.
     63 px ist die Hoehe der Aktionsleiste (und des schmalen Sockels, der an
     ihre Stelle tritt), dieselbe Zahl wie LEISTE_ETWA in
     tests/browser/vorhang-mobil.spec.js; die 132 px Reserve im Fuss enthalten
     sie. Am Wurzelelement und nicht am body: scroll-padding des Fensters wird
     nur von html gelesen, am body bliebe es wirkungslos.
     Ankerspruenge richten sich an der Oberkante aus (scroll-margin-top) und
     bleiben unberuehrt: zwoelf Vergleichswerte ohne und mit Polster gleich. */
  html{scroll-padding-bottom:63px}
  /* Kein Abstand am body: Die 132 px Reserve im Fuss tragen die Leiste. Ein
     Abstand hier stuende seit dem Klebe-Fuss (13.09.2026) als heller Streifen
     unter dem Fuss, auf der Depotseite ohne Leiste sichtbar. */
  body{padding-bottom:0}
  section{padding:52px 0}
  .theme{padding:40px 0}
}
/* ---- Wer Bewegung abbestellt hat, bekommt den Fuss im Fluss (12.09.2026,
   Bauform 13.09.2026). Der Vorhang ist kein Effekt, den man ausblenden
   koennte -- er ist der Grund, warum sich der Inhalt ueber den Fuss schiebt --,
   und genau diese Bewegung bestellt `prefers-reduced-motion` ab. Hier gilt
   deshalb dasselbe wie ohne Skript und auf der Formularseite: Der Fuss steht
   im Fluss, ohne Versatz, ohne Klebe.

   **Diese Abfrage steht bewusst NACH der Abfrage darueber.** Beide Regeln
   haben dieselbe Spezifitaet (`#site-footer`); Media-Queries erhoehen sie
   nicht. Entschieden wird also allein ueber die Reihenfolge. Wer diesen Block
   nach oben schiebt, hebt ihn auf. */
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  #site-footer{position:static;margin-top:0}
  #site-footer::after{content:none}
  #site-footer>.site-footer{position:static;min-height:0;display:block}
  main#main{margin-bottom:0!important}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  /* Verwandte Karte auf dem Telefon: Das Bild bleibt links und bleibt
     formfuellend, wird aber schmaler. In einer Spalte ist die Karte so breit
     wie der Bildschirm -- der Engpass ist nicht die Kartenbreite, sondern die
     Textspalte bei 320 px.

     **30 und nicht 38 Prozent, und das ist gemessen.** Bei 320 px misst die
     Karte 280 px. Mit 38 % bleiben dem Text 142 px, der Titel "Lagerhalle,
     Winterlager und gewerbliche Gebaeude" laeuft auf vier Zeilen und die Karte
     wird 200 px hoch -- hoeher als das Textkaestchen vor dem Umbau (190,7 px).
     Mit 30 % sind es 180 px. Gemessen am 23.08.2026 an den vier Probeseiten,
     Zwischenstufen 34 und 32 % reichten nicht (beide 200 px).

     Die Leitplanke min-width:130px greift hier ohnehin nicht: Sie haengt an
     min-width:1180px. 130 von 280 px waeren 46 %. */
  .card-rel .card-rel-media{flex:0 0 30%}
  .site-footer .fprod-cols{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .pill{width:100%;justify-content:center}
  .hero-cta{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
  .card:hover,.topic-card:hover{transform:none}
  /* Der Bild-Zoom der verwandten Karte entfaellt ganz und nicht nur seine
     Transition (23.08.2026). transition:none!important nimmt die Bewegung, der
     Sprung auf scale(1.045) bliebe sonst als harter Wechsel stehen -- und ein
     harter Wechsel ist bei prefers-reduced-motion kein Gewinn gegenueber der
     Animation, sondern nur ein kuerzerer Ruck. */
  a.cardlink:hover .card-rel .card-rel-thumb{transform:none}
}

/* ===================== Mehrwert-Bausteine & Infografiken ===================== */
/* Konsistenter Abstand Header zu Text */
.split h2{margin-bottom:16px}
.situations.cols2{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:680px){.situations.cols2{grid-template-columns:minmax(0,1fr)}}

/* Typische Luecken (Gegenstueck zu .checks) */
.gaps{list-style:none;display:grid;gap:13px}
.gaps li{position:relative;padding-left:34px;color:var(--ink-2);line-height:1.55}
.gaps li:before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:#FBE9D6}
.gaps li:after{content:"";position:absolute;left:6px;top:11px;width:10px;height:2px;border-radius:2px;background:#B45309}

/* `.split-bausteine` traegt seit dem 06.09.2026 keine Produktseite mehr: Die
   Bausteine stehen dort als eigener Abschnitt im Kartenraster `.grid.cols-3`,
   dasselbe Raster wie "Verwandte Versicherungen" am Seitenende. Die Regeln
   bleiben, weil der aeltere Seitenpfad `product_page()` sie noch adressiert;
   er rendert zurzeit keine Seite, ist aber nicht entfernt. */
.split-bausteine{grid-template-columns:1.35fr 1fr;gap:44px;align-items:start}
.split-bausteine>div>h2{margin-bottom:16px}
.grid.bstack{grid-template-columns:minmax(0,1fr);gap:16px}
@media(max-width:900px){.split-bausteine{grid-template-columns:minmax(0,1fr);gap:30px}}

/* Bausteine / Varianten als nicht-klickbare Karten */
.bcard{padding:22px 22px;border-top:3px solid var(--accent)}
.bcard:hover{transform:none;box-shadow:none;border-color:var(--line);border-top-color:var(--accent)}
.bcard h3{font-size:16px;margin-bottom:6px;color:var(--accent-deep)}
.bcard p{font-size:14px;color:var(--grey);margin:0;line-height:1.6}

/* Gut zu wissen */
.tipbox{border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));background:linear-gradient(180deg,var(--accent-soft2),#fff);border-radius:var(--r-lg);padding:30px 32px}
.tipbox h2{display:flex;align-items:center;gap:12px;font-size:22px;margin-bottom:16px}
.tipbox .ic-topic{width:26px;height:26px;color:var(--accent);flex:none;padding:0}
.tips{list-style:none;display:grid;gap:12px}
.tips li{position:relative;padding-left:30px;color:var(--ink-2);line-height:1.6}
.tips li:before{content:"";position:absolute;left:6px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---------- Gleiche Kante (06.09.2026, Runde Layout-Ruhe) ----------
   Hier standen drei Regelgruppen, die denselben Fehler gemacht haben: Sie
   haben einen Abschnitt anders ausgerichtet als seine Nachbarn.

   1. `.section-head.sh-center` + `.situations.sit-center` haben "Fuer wen ist
      das sinnvoll?" auf 56 Seiten mittig gesetzt und auf 880 px verengt. Der
      Grund stand offen im alten Kommentar: "damit es nicht wie der randlose
      Zweispalter darueber wirkt". Der Zweispalter darueber ist geblieben, die
      Ausweichbewegung ist weg -- der Abschnitt steht jetzt linksbuendig wie
      jeder andere.
   2. `.split-fuerwen` / `.fw-media` waren die Bildfassung desselben
      Abschnitts. Sie ist nie ausgeliefert worden (kein einziges
      fuerwen-Motiv im Baum) und ist mit ihrem Zweig im Generator entfallen.
   3. `.tipbox` war als einzige Lesebox der Produktseite mittig gesetzt --
      bei derselben Breite, die `.faq` linksbuendig fuehrt. Zwei gleich breite
      Kaesten mit zwei verschiedenen Kanten waren der sichtbarste Teil der
      Unruhe. Die Breite bleibt, die Kante ist jetzt dieselbe.

   Die Breite steht bewusst weiter hier und nicht in `.tipbox` oben: dort
   stehen Rahmen, Flaeche und Innenabstand, hier die Einordnung in die
   Lesespalte. */
.tipbox{max-width:820px}

/* **Eine Fussnote ist nie breiter als die Aussage, die sie belegt**
   (06.09.2026, Sichtprobe). Die Belegzeile des Branchen-Blocks steht hinter
   dem `.section-head` und nicht darin -- sonst gewinnt `.section-head p`
   ueber `.note` und sie kaeme in Fliesstextgroesse heraus. Damit stand sie
   aber ueber die volle `.wrap` (1124 px), waehrend der belegte Text bei
   60ch endet: ein Beleg, breiter als seine Aussage. Sie teilt jetzt die
   Lesespalte ihres Textes. */
#branche .note{max-width:60ch}

/* Prominenter Rechner-Teaser (z.B. Altersvorsorgedepot), fuehrt auf die Rechnerseite */
.rechner-promo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);gap:28px;align-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  background:linear-gradient(180deg,var(--accent-soft),#fff);
  border-radius:var(--r-lg);padding:30px 32px;box-shadow:var(--shadow-sm)}
.rechner-promo .rp-text h2{font-size:24px;margin-bottom:10px}
.rechner-promo .rp-text>p{color:var(--ink-2);max-width:62ch}
.rechner-promo .rp-text .checks{margin-top:16px}
.rechner-promo .rp-note{font-size:13px;color:var(--grey);margin-top:14px;max-width:62ch}
.rechner-promo .rp-cta{display:flex;justify-content:flex-end}
.rechner-promo .rp-cta .pill{font-size:16px;padding:15px 26px}
.rechner-promo>*{min-width:0}
@media(max-width:760px){.rechner-promo{grid-template-columns:1fr;gap:20px}
  .rechner-promo .rp-cta{justify-content:flex-start}}
/* Bei 320 px bleibt die Schaltflaeche das breiteste Einzelstueck. Sie darf dort
   umbrechen; oberhalb bleibt sie einzeilig wie bisher. */
@media(max-width:400px){
  .rechner-promo{padding:26px 20px}
  .rechner-promo .rp-cta .pill{white-space:normal;text-align:center;padding:14px 18px}
}

/* Infografiken */
.gfx{margin-top:2px}
/* Die Grafik mitten im Text (Zahnzusatz, #aenderung, 11.09.2026): Ueberschrift
   und Einstieg darueber, Folgetext und Beleg darunter. Ohne diese drei Regeln
   klebt der Grafiktitel an der Grafik und der Folgetext an ihrer Unterkante;
   beide haben von Haus aus keinen Abstand nach unten. */
.pk-aenderung h3{margin:6px 0 14px}
.pk-aenderung .gfx + .section-head{margin:32px 0 0}
.pk-aenderung .note{margin-top:16px}
.gfx-cap{font-size:12px;color:var(--grey);margin-top:4px;font-style:italic}

.gfx-table{width:100%;border-collapse:collapse;font-size:15px;max-width:780px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gfx-table th,.gfx-table td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.gfx-table thead th{background:var(--accent-soft);color:var(--accent-deep);font-weight:600;font-size:13px;letter-spacing:.02em}
.gfx-table thead th:nth-child(3),.gfx-table td:nth-child(3){background:var(--accent-soft2)}
.gfx-table tbody tr:last-child td{border-bottom:none}
.gfx-table td:first-child{font-weight:600;color:var(--ink)}
.gfx-table td{color:var(--ink-2)}

/* ===================== Premium-Pass 2: Finish, Bewegung, Conversion ===================== */

/* ---------- Seitenübergänge (View Transitions, progressive enhancement) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .22s ease both}
::view-transition-new(root){animation:vtIn .3s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- Feinschliff: Scrollbar, Ziffern, Fokus ---------- */
@supports (scrollbar-width:thin){
  html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--navy) 32%,transparent) transparent}
}
.stat-v,.tab .tab-n{font-variant-numeric:tabular-nums}

/* ---------- Grain-Textur auf dunklen Sektionen ---------- */
.hero-dark,.site-footer,.stats,.trust,.hero-portal{position:relative}
.hero-dark::after,.hero-portal::after,.stats::after,.trust::after,.site-footer::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
.hero-portal::after{z-index:1}

/* ---------- Karten: geschichtete Schatten + Cursor-Spotlight ---------- */
.card:hover{box-shadow:var(--shadow-lg)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;opacity:0;pointer-events:none;z-index:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 8%,transparent),transparent 72%);
  transition:opacity .35s var(--ease)}
.card:hover::before{opacity:1}
.bcard::before{display:none}
.card>*{position:relative;z-index:1}

/* ---------- Buttons: dezenter Glanz-Sweep ---------- */
.pill{position:relative;overflow:hidden}
.pill-blue::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:46%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);transition:left .05s}
.pill-blue:hover::after{left:130%;transition:left .6s var(--ease)}

/* ---------- Header: blendet beim Runterscrollen aus ---------- */
.site-header{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.site-header.hdr-hide{transform:translateY(-100%)}
.site-header.hdr-scrolled{box-shadow:0 10px 34px -20px rgba(7,58,82,.28)}

/* ---------- Micro-Trust an CTAs ---------- */
.cta-trust{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;font-weight:500;color:var(--grey);letter-spacing:.01em}
.cta-trust::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success,#16A34A);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,#16A34A 18%,transparent)}
.hero-portal .cta-trust,.hero-dark .cta-trust{color:rgba(255,255,255,.78)}

/* ---------- Sticky-Kontaktleiste (Desktop) ---------- */
.ctarail{position:fixed;right:22px;bottom:22px;z-index:75;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--line);border-radius:999px;padding:8px 8px 8px 18px;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ctarail.is-on{opacity:1;transform:none;pointer-events:auto}
.ctarail .tel{font-size:14.5px}
.ctarail .pill{padding:10px 18px;min-height:40px;font-size:14px}
/* --grey statt --muted (Entscheidung Maik L4, nur an der Fundstelle, keine neue
   Token-Definition). Nachgemessen lag --muted auf der halbdurchsichtigen weissen
   Leiste bei 3,56:1. */
.ctarail .rail-x{background:none;border:0;cursor:pointer;color:var(--grey);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;line-height:1}
.ctarail .rail-x:hover{background:var(--tint);color:var(--ink)}
@media(max-width:899px){.ctarail{display:none}}

/* ---------- Mitscrollender Seitensockel (AVD-Runde, 09.09.2026) ----------
   Ansage Maik: "fuer die AVD Seite haette ich gern, dass ein CTA oder der
   Rechner mitscrollt."

   **Warum ein Sockel und nicht ein zweites Schwebeteil.** Am unteren Rand
   liegen bereits zwei feste Bedienelemente, und zwar je nach Breite ein
   anderes: unter 900 px die Aktionsleiste (.actionbar, drei Links, 58 px), ab
   900 px die Schnellkontakt-Leiste (.ctarail, rechts unten). Ein drittes
   Element daneben waere genau der Stapel, den es nicht geben soll. Der Sockel
   **ersetzt** deshalb auf seiner Seite beides (body[data-sockel] weiter unten)
   und nimmt mit, was dort verlorenginge: die Telefonnummer mit der
   Erreichbarkeitsanzeige. Auf der Seite bleibt es damit bei genau einem festen
   Element -- nur traegt es jetzt den naechsten Schritt dieser Seite und nicht
   den allgemeinen.

   **Zwei Gestalten, eine je Breite.** Schmal ist er die volle Leiste am Rand,
   also die Gestalt der Aktionsleiste, die er dort vertritt. Breit ist er das
   gerundete Schwebeteil rechts unten, also die Gestalt der Kontaktleiste, die
   er dort vertritt. Er bringt an keiner Breite eine dritte Form ins Bild.

   **Der Vorhang-Footer.** #site-footer liegt fest am unteren Rand hinter dem
   Inhalt. Auf schmalen Breiten reserviert .site-footer .wrap dafuer bereits
   132 px (Aktionsleiste plus "Nach oben"-Knopf plus Luft), und der Sockel ist
   nicht hoeher als die Aktionsleiste, an deren Stelle er tritt. Auf breiten
   Breiten steht er rechts unten wie die Kontaktleiste und damit neben den
   Rechtslinks, nicht auf ihnen. */
.seitensockel{position:fixed;left:0;right:0;bottom:0;z-index:75;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px -22px rgba(7,58,82,.55)}
.seitensockel .wrap{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;
  padding-top:9px;padding-bottom:9px}
/* --grey und nicht --muted, aus demselben gemessenen Grund wie bei .ctarail
   (Entscheidung Maik L4): --muted lag auf der halbdurchsichtigen weissen
   Flaeche bei 3,56:1. --grey erreicht 6,01:1. */
.seitensockel .ps-txt{flex:1 0 100%;margin:0;font-size:12.5px;
  color:var(--grey);line-height:1.3;order:-1}
.seitensockel .ps-tel{font-size:14.5px;font-weight:600;color:var(--accent-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;min-height:44px}
.seitensockel .ps-tel:hover{color:var(--accent-deep)}
.seitensockel .pill{padding:11px 20px;min-height:44px;font-size:14.5px;white-space:nowrap}
/* **Das Breitenbudget, gemessen** (09.09.2026). Nebeneinander stehen die
   Erreichbarkeitsanzeige (142,4 px), die Nummer (139,7 px) und der Knopf
   (191,5 px). Mit Raendern und Abstaenden sind das rund 540 px -- auf 375 px
   passt davon nichts. Der erste Anlauf hat den Knopf auf 32,9 px
   zusammengedrueckt (Fund der Browserwache) und ist auf 320 px in eine
   zweite Zeile gebrochen, womit der Sockel 90,4 px hoch wurde und unter den
   "Nach oben"-Knopf lief (der sitzt schmal auf bottom:74px).

   Der Sockel gibt deshalb schmal in zwei Stufen Ballast ab, in der
   Reihenfolge, in der er am wenigsten kostet:

     bis 560 px  die Erreichbarkeitsanzeige. Sie ist der Zusatz der
                 Kontaktleiste, und die gibt es hier ohnehin nicht; die
                 Aktionsleiste, an deren Stelle der Sockel schmal tritt, hat
                 sie nie getragen. Rest: 139,7 + 180 + 12 + 40 = 372 px.
     bis 400 px  die ausgeschriebene Nummer. Der Telefonlink wird zum
                 Symbolziel von 44 px, seinen Namen traegt das aria-label.
                 Rest: 44 + 180 + 12 + 40 = 276 px, bei 280 px Innenbreite.

   Eine Zeile bleibt es damit auf jeder Breite, und die Hoehe bleibt bei rund
   62 px -- also bei der der Aktionsleiste (63 px), fuer die der Fuss seine
   132 px schon reserviert. */
@media(max-width:560px){
  .seitensockel .wrap{gap:5px 12px;padding-left:20px;padding-right:20px}
  .seitensockel .avail{display:none}
  .seitensockel .pill{flex:1;padding:11px 14px;font-size:13.5px;justify-content:center}
  .seitensockel .ps-txt{font-size:11.5px}
}
@media(max-width:400px){
  .seitensockel .wrap{padding-left:16px;padding-right:16px;gap:5px 10px}
  .seitensockel .ps-nr{display:none}
  .seitensockel .ps-tel{min-width:44px;gap:0}
}
/* Mit Kostenzusage ist der Sockel schmal zwei Zeilen hoch (rund 82 px statt
   62). Der "Nach oben"-Knopf sitzt auf bottom:74px und laege dann darauf, und
   die 132 px, die der Fuss unten freihaelt, reichen nicht mehr. Beides zieht
   an dieser einen Stelle mit; den Wert setzt sockel_merkmal() aus demselben
   Ziel, aus dem die Zusage selbst entsteht. */
@media(max-width:899px){
  body[data-sockel="zusage"] .to-top{bottom:94px}
  body[data-sockel="zusage"] .site-footer .wrap{padding-bottom:152px}
}
/* Ab 900 px steht der Sockel als gerundetes Schwebeteil rechts unten, an der
   Stelle der Kontaktleiste, die er auf dieser Seite ersetzt.

   **Er steht von Anfang an** (Ansage Maik, 09.09.2026): "ICH WILL ERREICHEN
   DASS DIE BESUCHER JEDERZEIT AUF DAS ANFRAGEFORMULAR GELANGEN KOENNEN OHNE
   DASS DIE HOCH ODER RUNTER SCROLLEN MUESSEN ZUM NAECHSTEN CTA."

   **Deshalb ist der Grundzustand sichtbar und die Klasse die Umkehrung.** Bis
   zum 09.09.2026 war es andersherum: `opacity:0` im Grundzustand, `.is-on`
   fuer den Auftritt nach dem ersten Bildschirm. Diese Bauform einfach
   "immer an" zu schalten haette den Sockel bei jedem Seitenaufruf einfahren
   lassen -- 0,4 Sekunden, in denen er noch nicht da ist. Ein Balken, der ab
   Aufruf stehen soll, darf nicht erst kommen. Gemessen am Vorstand `1bc87a35`
   bei 1280 px: `opacity 0`, `transform: matrix(1,0,0,1,0,14)` beim Laden.

   Die Bewegung bleibt genau dort, wo sie hingehoert: beim **Ausweichen vor
   dem Fuss** (`.is-weg`, gesetzt von site.js). Das ist eine Reaktion auf eine
   Handlung des Besuchers und kein Auftritt aus dem Nichts.

   Unter 900 px braucht es beides nicht: Dort ist der Sockel die Aktionsleiste,
   die er vertritt, steht am unteren Rand und hat nie einen Auftritt gehabt. */
@media(min-width:900px){
  .seitensockel{left:auto;right:22px;bottom:22px;border:1px solid var(--line);
    border-radius:999px;box-shadow:var(--shadow-lg);
    opacity:1;transform:none;pointer-events:auto;
    transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .seitensockel .wrap{max-width:none;margin:0;padding:8px 8px 8px 20px;flex-wrap:nowrap}
  /* Breit steht die Zusage in derselben Zeile: Dort ist der Platz da, und der
     Sockel bleibt eine Zeile hoch wie die Leiste, die er ersetzt. */
  .seitensockel .ps-txt{flex:0 1 auto;order:0;max-width:17ch}
  /* Das Ausweichen vor dem Vorhang-Footer: Der Impressumslink muss
     unmittelbar erreichbar bleiben (Paragraf 5 DDG). Siehe fussImBild() in
     site.js und tests/browser/avd-sockel.spec.js. */
  .seitensockel.is-weg{opacity:0;transform:translateY(14px);pointer-events:none}
}
/* Wer Bewegung abbestellt hat, bekommt keine: kein Einfahren, kein Verschieben.
   Der Sockel ist dann entweder da oder nicht da. */
@media(prefers-reduced-motion:reduce){
  .seitensockel{transition:none;transform:none}
  .seitensockel.is-weg{transform:none}
}
/* Der Tausch. Eine Seite mit Sockel hat weder Aktionsleiste noch
   Kontaktleiste; site.js baut die Kontaktleiste auf solchen Seiten gar nicht
   erst, diese Zeile ist die Rueckversicherung fuer den Fall, dass sie doch
   einmal aus einer anderen Quelle kaeme. */
body[data-sockel] .actionbar,
body[data-sockel] .ctarail{display:none}
/* Fokus nicht unter dem Sockel, breit (WCAG 2.2, 2.4.11; 13.09.2026). Ohne
   Skript lag auf der Depotseite bei 1280 px 1 Link des Fusses ("Kontakt") beim
   Fokus unter dem Schwebeteil. Der Sockel reicht breit 84 px ueber den unteren
   Rand (62 px hoch, bottom:22px). Das Polster muss am Wurzelelement stehen,
   weil nur html das scroll-padding des Fensters traegt; das Sockel-Merkmal
   sitzt aber am body. Deshalb :has(), damit Seiten ohne Sockel breit kein
   Polster bekommen. Ankerspruenge richten sich an der Oberkante aus und bleiben
   unberuehrt (zwoelf Vergleichswerte gleich, dazu die Depotseite breit). */
@media(min-width:900px){
  html:has(>body[data-sockel]){scroll-padding-bottom:84px}
}

/* ---------- CTA-Band: rotierende Ansprechpartner ---------- */
.cta-person{display:flex;align-items:center;gap:14px;flex:none}
/* **Das Badge ist seit dem 09.09.2026 ein Anker** (Ansage Maik). Was hier
   steht, ist ausschliesslich das, was ein Link mehr braucht als ein div --
   Geometrie und Farben bleiben unberuehrt, damit die stehende Reserve unter
   dem Namen (siehe .cp-tx small weiter unten) und die gemessene Ruhe des
   Bausteins gelten bleiben.

   Der Fokusring liegt aussen mit Abstand: Innen sitzt das runde Bild, und ein
   Ring auf der Kante haette es angeschnitten. `border-radius` gibt dem Ring
   die Form des Bausteins statt eines Rechtecks um zwei ungleich hohe Teile.

   Kein Unterstrich und keine Farbaenderung im Hover: Die drei Zeilen tragen
   ihre Farben selbst (.cp-cap, b, small), und ein Unterstrich unter drei
   verschieden langen Zeilen waere Unruhe an genau der Stelle, an der der
   Sprung schon einmal saß. Die Rueckmeldung gibt das Bild. */
a.cta-person{text-decoration:none;color:inherit;border-radius:14px}
a.cta-person:hover .cp-ava{box-shadow:0 0 0 3px #fff,0 8px 20px -6px rgba(7,58,82,.5)}
a.cta-person:hover .cp-cap{color:var(--accent-deep)}
a.cta-person:focus-visible{outline:3px solid var(--accent-ink);outline-offset:4px}
.cp-ava{position:relative;width:62px;height:62px;border-radius:50%;flex:none;box-shadow:0 0 0 3px #fff,0 6px 16px -6px rgba(7,58,82,.35);background:var(--accent-soft)}
.cp-ava img,.cp-ava .cp-mono{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .6s var(--ease)}
.cp-ava .is-on{opacity:1}
.cp-mono{display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--accent-deep);background:radial-gradient(120% 120% at 30% 18%,var(--accent-soft),#DCEFFB)}
.cp-tx{min-width:0;max-width:230px}
/* Dreizeilig seit dem 21.08.2026 (Sicht Maik): Kappe fest "Ihr Team bei
   Fuhrmann", darunter Name und Bezeichnung des gezeigten Mitglieds, beide
   rotieren mit dem Gesicht und blenden gemeinsam. */
.cp-cap{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:2px}
.cp-tx b{display:block;font-size:15px;color:var(--ink);line-height:1.25;transition:opacity .35s var(--ease)}
.cp-tx small{display:block;font-size:12.5px;color:var(--grey);line-height:1.35;transition:opacity .35s var(--ease)}
/* **Die stehende Reserve unter dem Namen** (Sicht Maik, 08.09.2026: „der
   Team-Knopf springt"). Gemessen war der Sprung eindeutig und auf allen drei
   Breiten gleich gross: Fuenf der sechs Bezeichnungen brauchen eine Zeile,
   "Kauffrau für Versicherungen und Finanzen" (Lena Pleines) braucht zwei --
   der Baustein wuchs beim Durchwechseln von 62,00 auf 72,64 px und schob das
   ganze Band um 10,64 px. Das Wechseln laeuft alle 4,6 Sekunden auf jeder
   Seite mit CTA-Band; der Sprung war also ein Dauerzustand.

   **Die Reserve steht hier als Zeilenzahl und nicht als Pixelwert.** 1.35em
   ist genau eine Zeile dieses Elements (line-height:1.35 direkt darueber);
   zwei davon sind die Hoehe der laengsten vorkommenden Bezeichnung. Kuerzere
   Bezeichnungen lassen die zweite Zeile leer stehen -- sichtbar ist dort
   nichts, gemessen ist der Baustein ueber den ganzen Wechselzyklus gleich
   hoch. Ein fester Pixelwert waere derselbe Wert, aber ohne die Bindung an
   die Schriftgroesse: Ein spaeterer Griff an font-size oder line-height
   liesse ihn still falsch werden.

   **Warum unterhalb von 360 px drei Zeilen.** Der Textkasten ist bis 230 px
   breit (max-width oben), aber auf sehr schmalen Fenstern bleibt weniger
   uebrig: gemessen 188 px bei 320 px Fensterbreite, 208 px bei 340 px, ab
   rund 345 px wieder die vollen 230 px. Das Mass der Reserve ist die
   Bezeichnung "Geprüfte Fachwirtin für Versicherungen und Finanzen (IHK)"
   -- der Fachwirtsabschluss von Monique Hildebrandt, der spaeter dazukommen
   kann (Ansage Maik). Sie braucht im vollen Kasten zwei Zeilen, im
   schmalen drei. Die Schwelle liegt gemessen zwischen 340 und 345 px; die
   Regel greift bei 360 px, damit zwischen Messpunkt und Schaltpunkt Luft
   bleibt, falls die Ersatzschrift einmal breiter baut als die geladene.

   Der Probetext steht **nur in der Wache** (tests/browser/team-badge-ruhe.spec.js)
   und in keinem Generat: Er ist der Massstab der Reserve und keine Angabe
   ueber eine Person. */
.cp-tx small{min-height:calc(2 * 1.35em)}
@media(max-width:360px){.cp-tx small{min-height:calc(3 * 1.35em)}}
.cp-tx.swap b,.cp-tx.swap small{opacity:0}
/* Reduzierte Bewegung: Die Rotation laeuft weiter (Reparatur 21.08.2026,
   vorher stand das Badge dort komplett still), aber ohne Blenden -- Gesicht
   und Text springen hart. */
@media(prefers-reduced-motion:reduce){
  .cp-ava img,.cp-ava .cp-mono,.cp-tx b,.cp-tx small{transition:none}
}
@media(max-width:560px){.cta-person{width:100%}}

/* ---------- Erreichbarkeits-Status (Öffnungszeiten) ---------- */
.avail{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--grey);white-space:nowrap}
.avail::before{content:"";width:8px;height:8px;border-radius:50%;background:#94A3B8;flex:none}
/* **Kontrast nachgezogen am 04.08.2026 (Sichtentscheidung Maik).** Der
   Ton war #0F7A38 und hielt am Seitenende 4,46:1 gegen #E6E9EC -- vier
   Hundertstel unter der Forderung. Gesehen hat den Fund niemand, weil
   der Text nur waehrend der Oeffnungszeiten "Jetzt erreichbar" heisst
   und nur dann gruen ist (isOpenNow() in site.js); die Laeufe dieses
   Projekts fielen bisher in die Abendstunden.
   #0F7737 ist derselbe Farbton bei derselben Saettigung, zwei Prozent
   dunkler: 4,64:1 gegen #E6E9EC, 5,65:1 gegen Weiss, 5,31:1 gegen den
   getoenten Grund. Etwas Luft, damit der naechste Hintergrundwechsel
   nicht sofort wieder darunter liegt. */
.avail.is-open{color:#0F7737}
.avail.is-open::before{background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.ctarail .avail{margin-right:2px}
@media(prefers-reduced-motion:reduce){
  .ctarail{transition:none}
  .pill-blue::after{display:none}
  .card::before{display:none}
}

/* ===================== Cine-Kompakt: Privat-Produktseiten (Plan 2026-07-20) =====================
   Gilt ausschliesslich unter body[data-layout="cine-kompakt"] auf den Produktseiten
   (Klassen hero-pk, sprungnav, pk-chap, gfx-*). Die erhoehte Spezifitaet ist
   gewollt: die anderen drei Welten sehen diese Stile nie. Alle Grafik-Tokens
   leiten sich aus bestehenden Tokens ab; der Gruppenwechsel faerbt mit. Dafuer
   muessen die weltabhaengigen Tokens allerdings unter body stehen und nicht
   hier, siehe den Kommentar direkt unter diesem Block. */
:root{
  --gfx-rail:var(--hair);
  --gfx-stroke:1.6px; --gfx-stroke-em:3px;
  --gfx-ink-soft:var(--grey);
  --gfx-warn:#C19A4B;
  --gfx-void:color-mix(in srgb,var(--grey) 22%,transparent);
  --gfx-band:clamp(220px,34vw,340px); --gfx-maxw:1040px;
  --gfx-gutter:clamp(20px,4vw,48px);
  --gfx-label:12.5px; --gfx-track:.06em;
  --gfx-figure:clamp(44px,7vw,86px);
  --gfx-dur:.9s; --gfx-stagger:110ms; --gfx-ease:cubic-bezier(.16,1,.3,1);
  /* Flaeche, auf der eine Grafik steht. Sie ist die Farbe der Freistellung
     weiter unten; steht die Grafik auf einer getoenten Flaeche, setzt die
     Flaeche selbst den Wert um (siehe .pk-tint). */
  --gfx-flaeche:#fff;
  /* Konturbreite der Freistellung, in em und damit an der Schriftgroesse.
     0,3 em ergeben rund 0,15 em Halo nach aussen -- genug, um eine 3 px
     starke Schiene abzusetzen, und wenig genug, dass die Schrift nicht
     fetter wirkt. */
  --gfx-halo:.3em;
}

/* ---------- Freistellung von Beschriftungen (Systemregel, 23.08.2026) ----------
   Sicht Maik: "Wenn Linien in der Grafik durch Worte gehen, wirkt es irgendwie
   unprofessionell."

   Gemessen wurde zuerst: Ueber alle zwoelf Archetypen auf 43 Seiten und vier
   Breiten liefen sechs bis fuenfzehn Linien durch eine Beschriftung oder naeher
   als vier Pixel daran vorbei -- betroffen waren die Zeitachse (drei Seiten)
   und die Szene mit Gabelung. Die Zahlen stehen im PROJEKTSTAND-Eintrag.

   Die Regel steht **einmal** und gilt fuer alle Grafiken: Eine Beschriftung,
   die im selben Koordinatenraum liegt wie Linien, traegt die Klasse gfx-frei
   und bekommt eine Kontur in der Flaechenfarbe. Bei SVG-Text macht das
   paint-order:stroke (die Kontur liegt unter der Fuellung, die Buchstabenform
   bleibt unveraendert); HTML-Beschriftungen koennen keine Kontur tragen, dort
   leistet ein Schattenkranz in derselben Farbe dasselbe.

   Die Konturbreite haengt an der Schriftgroesse und nicht an einer Pixelzahl:
   Eine 12,5-px-Beschriftung bekommt 3,75 px Kontur, eine 17-px-Beschriftung
   5,1 px. Wer die Schriftgroesse aendert, aendert den Halo mit. */
.gfx text.gfx-frei{paint-order:stroke fill markers;stroke:var(--gfx-flaeche);
  stroke-width:var(--gfx-halo);stroke-linejoin:round;stroke-linecap:round}
.gfx :not(text).gfx-frei{text-shadow:
  0 .1em 0 var(--gfx-flaeche),0 -.1em 0 var(--gfx-flaeche),
  .1em 0 0 var(--gfx-flaeche),-.1em 0 0 var(--gfx-flaeche),
  .08em .08em 0 var(--gfx-flaeche),-.08em .08em 0 var(--gfx-flaeche),
  .08em -.08em 0 var(--gfx-flaeche),-.08em -.08em 0 var(--gfx-flaeche)}
/* --gfx-rail-em steht auf body und nicht im Block darueber, und das ist kein
   Ordnungsgeschmack (27.07.2026).

   Eine benutzerdefinierte Eigenschaft wird auf dem Element aufgeloest, das sie
   deklariert. Stand `--gfx-rail-em:var(--accent)` auf :root, las var(--accent)
   deshalb den Wurzelwert, also die Markenfarbe. Den Akzent setzt aber erst
   body[data-group] eine Ebene tiefer. Ergebnis: Die Schienen aller Grafiken
   waren in jeder Welt #0092CB, waehrend Regeln, die var(--accent) direkt am
   Element benutzen, korrekt einfaerbten. Im Weichenbild lag das nebeneinander:
   warmer Stammkasten, blaue Kurven. In der Privat-Welt fiel es nicht auf, weil
   der Akzent dort dieselbe Farbe ist.

   Auf body deklariert, gewinnt body[data-group] fuer --accent auf demselben
   Element, und die Ersetzung nimmt den Weltwert.

   **Wer hier ein weiteres --gfx-Token ergaenzt, das --accent (oder eine seiner
   Ableitungen) referenziert, muss es in diesen body-Block setzen, nicht in den
   :root-Block darueber.** Der Block oben enthaelt ausschliesslich Werte, die
   nicht von der Welt abhaengen. */
body{--gfx-rail-em:var(--accent)}
/* Grafiken auf getoenter Flaeche: Die Freistellung nimmt deren Farbe an. Ohne
   diese Zeile stuende ein weisser Halo auf hellblauem Grund, und das sieht man.
   Gemessen: rgb(245,248,251), also var(--tint). */
.pk-tint{--gfx-flaeche:var(--tint)}

/* ---------- Kompakter Cine-Hero (Produktkopf, kein Einstiegshero) ---------- */
body[data-layout="cine-kompakt"] .hero-pk{position:relative;overflow:hidden;isolation:isolate;background:#05203A;
  display:flex;align-items:center;min-height:clamp(360px,46svh,520px);max-height:52svh}
body[data-layout="cine-kompakt"] .hpk-media{position:absolute;inset:0;z-index:0}
/* Bildausschnitt je Produkt ueber --vig-pos, Standard 60% 42%.
   Das Band ist breiter als das 3:2-Quellbild, auf dem Handy ist der Bildblock
   nur 160 bis 260 Pixel hoch. Ohne eigenen Ausschnitt je Motiv schneidet der
   feste Wert Koepfe und Haende ab. Der senkrechte Anteil ist der wichtigere. */
body[data-layout="cine-kompakt"] .hpk-media img{width:100%;height:100%;object-fit:cover;
  object-position:var(--vig-pos,60% 42%);filter:saturate(.92) contrast(1.04)}
body[data-layout="cine-kompakt"] .hpk-grade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(94deg,color-mix(in srgb,var(--accent) 30%,rgba(4,22,38,.90)) 0%,color-mix(in srgb,var(--accent) 12%,rgba(4,22,38,.62)) 34%,rgba(4,22,38,.18) 60%,transparent 78%)}
body[data-layout="cine-kompakt"] .hpk-inner{position:relative;z-index:2;width:100%;padding-top:clamp(26px,4vw,46px);padding-bottom:clamp(26px,4vw,46px)}
body[data-layout="cine-kompakt"] .hpk-inner>*{max-width:640px}
body[data-layout="cine-kompakt"] .hero-pk .crumbs{color:rgba(255,255,255,.78);padding-bottom:12px}
body[data-layout="cine-kompakt"] .hero-pk .crumbs a{color:rgba(255,255,255,.78)}
body[data-layout="cine-kompakt"] .hero-pk .crumbs a:hover{color:#fff}
body[data-layout="cine-kompakt"] .hero-pk .eyebrow{color:#fff;opacity:.92;margin-bottom:10px}
body[data-layout="cine-kompakt"] .hero-pk .eyebrow:before{background:color-mix(in srgb,var(--accent) 50%,#fff)}
/* Umbruch der Produktueberschrift, 27.07.2026.
   Vorher: max-width:18ch plus hyphens:auto. Beides zusammen brach lange Komposita
   auch auf dem Desktop, und zwar an unsinniger Stelle: Ohne geladenes
   Trennwoerterbuch trennt Chrome willkuerlich, beobachtet
   "Vertrauensscha-denversicherung". Die enge Breite erzwang den Umbruch zusaetzlich
   dort, wo der Platz gereicht haette. Dieselbe Ueberlegung steht schon im Kommentar
   zu .card h3 weiter oben.
   Jetzt: keine Breitenschranke, keine automatische Trennung. Die Trennstellen setzt
   der Generator als weiche Trennzeichen an echten Wortfugen (weiche_trennung() in
   generate_site.py). overflow-wrap:break-word bleibt als letztes Netz fuer Woerter,
   die dort nicht verzeichnet sind; mit den weichen Trennzeichen kommt es in den
   gemessenen Faellen nicht mehr zum Zuge. */
body[data-layout="cine-kompakt"] .hero-pk h1{color:#fff;font-size:clamp(28px,4.6vw,46px);line-height:1.06;margin:4px 0 0;
  max-width:none;overflow-wrap:break-word;text-shadow:0 2px 30px rgba(3,18,32,.35)}
body[data-layout="cine-kompakt"] .hero-pk .lead{color:#E6EFF6;font-size:clamp(16px,1.3vw,18.5px);line-height:1.6;max-width:52ch;margin:14px 0 22px;text-shadow:0 1px 16px rgba(3,18,32,.4)}
body[data-layout="cine-kompakt"] .hero-pk .pill-line{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);box-shadow:none}
body[data-layout="cine-kompakt"] .hero-pk .pill-line:hover{border-color:#fff;background:rgba(255,255,255,.16);color:#fff}
@media(max-width:900px){
  /* Mobil keine Textueberlagerung: Bildblock oben, Text auf heller Flaeche. */
  body[data-layout="cine-kompakt"] .hero-pk{display:block;min-height:0;max-height:none;background:#fff}
  body[data-layout="cine-kompakt"] .hpk-media{position:relative;inset:auto;height:clamp(160px,34svh,260px)}
  body[data-layout="cine-kompakt"] .hpk-inner{padding-top:20px;padding-bottom:6px}
  body[data-layout="cine-kompakt"] .hero-pk .crumbs,body[data-layout="cine-kompakt"] .hero-pk .crumbs a{color:var(--grey);text-shadow:none}
  body[data-layout="cine-kompakt"] .hero-pk .eyebrow{color:var(--accent-deep);opacity:1}
  body[data-layout="cine-kompakt"] .hero-pk .eyebrow:before{background:var(--accent)}
  body[data-layout="cine-kompakt"] .hero-pk h1{color:var(--ink);text-shadow:none}
  body[data-layout="cine-kompakt"] .hero-pk .lead{color:var(--grey);text-shadow:none}
  body[data-layout="cine-kompakt"] .hero-pk .pill-line{border-color:var(--line);color:var(--ink);background:#fff}
}

/* ---------- Sprungnavigation (nicht sticky, Plan 4.2) ---------- */
body[data-layout="cine-kompakt"] .sprungnav{background:#fff;border-bottom:1px solid var(--line-soft);overflow-x:hidden}
body[data-layout="cine-kompakt"] .sprungnav ul{list-style:none;display:flex;gap:clamp(16px,3vw,34px);margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
body[data-layout="cine-kompakt"] .sprungnav ul::-webkit-scrollbar{display:none}
body[data-layout="cine-kompakt"] .sprungnav a{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--grey);white-space:nowrap;padding:14px 2px;min-height:44px}
body[data-layout="cine-kompakt"] .sprungnav a:hover{color:var(--accent-deep)}

/* ---------- Kapitelrhythmus: fester Wechsel hell / getoent (Plan 4.4) ----------
   Abstaende mobile first gedacht: Der untere Wert der clamp-Funktion ist der,
   der auf dem Handy tatsaechlich greift, denn 5vw sind bei 375px Breite nur
   knapp 19px. Vorher stand dort 48px, also 96px zwischen zwei Abschnitten,
   bei elf Abschnitten sehr viel Leerlauf. Jetzt 30px auf dem Handy, 72px am
   grossen Schirm (Anpassung 2026-07-21 auf Zuruf Maik).

   Zusaetzlich: Folgen zwei Abschnitte mit gleichem Hintergrund aufeinander,
   fehlt die trennende Farbkante und die beiden Innenabstaende addieren sich
   zu einer doppelten Luecke. In diesem Fall wird der obere Abstand gekuerzt.
   Beim Wechsel hell/getoent bleibt er voll, dort traegt ihn die Farbflaeche. */
body[data-layout="cine-kompakt"] .pk-chap{padding:clamp(30px,5vw,72px) 0;
  scroll-margin-top:clamp(76px,12vw,118px)}
body[data-layout="cine-kompakt"] .pk-chap:not(.pk-tint) + .pk-chap:not(.pk-tint){
  padding-top:clamp(6px,1.6vw,20px)}
body[data-layout="cine-kompakt"] .pk-tint + .pk-tint{padding-top:clamp(6px,1.6vw,20px)}
body[data-layout="cine-kompakt"] .pk-tint{background:var(--tint)}
body[data-layout="cine-kompakt"] .gfx-sektion{padding:clamp(24px,3.8vw,50px) 0}
body[data-layout="cine-kompakt"] .gfx-horizont,body[data-layout="cine-kompakt"] .gfx-weiche,body[data-layout="cine-kompakt"] .gfx-kreis{margin:0}
body[data-layout="cine-kompakt"] .split-weighted{grid-template-columns:1.35fr 1fr}
@media(max-width:900px){body[data-layout="cine-kompakt"] .split-weighted{grid-template-columns:1fr}}
body[data-layout="cine-kompakt"] .schadenszene h2{font-size:clamp(26px,3.4vw,40px);max-width:22ch;margin-top:6px}

/* Rechner-Einstieg neben dem ersten Text (Produktseiten mit Tarifrechner) */
.erklaer-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(min(272px,100%),.92fr);gap:clamp(24px,4vw,52px);align-items:start}
.erklaer-grid>*{min-width:0}
.erklaer-grid .section-head{margin-bottom:0}
@media(max-width:900px){.erklaer-grid{grid-template-columns:1fr;gap:24px}}
.rcue{position:relative;overflow:hidden;border-radius:20px;padding:24px 24px 26px;
  background:linear-gradient(158deg,var(--accent-soft2) 0%,#fff 62%);
  border:1px solid var(--line);box-shadow:0 22px 44px -26px color-mix(in srgb,var(--accent) 50%,transparent)}
.rcue::after{content:"";position:absolute;right:-42px;top:-42px;width:152px;height:152px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%);pointer-events:none}
.rcue>*{position:relative}
.rcue-badge{position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--accent-deep);
  background:color-mix(in srgb,var(--accent) 13%,#fff);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.rcue-badge .ic{width:23px;height:23px}
.rcue-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 12%,#fff);padding:5px 11px;border-radius:999px}
.rcue-chip .ic{width:13px;height:13px}
.rcue-title{font-family:var(--font-sans);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:14px 0 5px}
.rcue-sub{font-size:14px;color:var(--grey);margin-bottom:18px;max-width:32ch}
.rcue-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:600;font-size:15px;color:#fff;
  /* Verlauf von --accent-ink nach --accent-deep statt von einer aufgehellten
     Akzentfarbe nach --accent. Nachgemessen trug die alte Flaeche weisse Schrift
     nur mit 3,13:1 (Privat) und 4,30 bis 4,39:1 (Schausteller); gefordert sind
     4,5:1. Die obere Haelfte war der schlechtere Fall, weil sie mit Weiss
     aufgehellt war. Beide Tokens gibt es in jeder Welt, es kommt kein neuer Wert
     dazu: Weiss darauf misst jetzt 5,53 bis 7,52 (Privat), 6,61 bis 9,00
     (Schausteller), 7,26 aufwaerts (Firmen) und 6,3 bis 9,43 (Verwalter).
     Gefunden vom Auslieferungslauf des Sprints, auf zwei Seiten, die bis dahin
     nie gemessen worden waren. */
  padding:12px 20px;border-radius:12px;background:linear-gradient(180deg,var(--accent-ink),var(--accent-deep));
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--accent) 62%,transparent);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease)}
.rcue-btn:hover{transform:translateY(-1px);color:#fff;box-shadow:0 16px 32px -12px color-mix(in srgb,var(--accent) 72%,transparent)}
.rcue-btn .ic{width:16px;height:16px;transition:transform .2s var(--ease)}
.rcue-btn:hover .ic{transform:translateX(3px)}
/* --grey statt --muted (Kontrast-Nachzug, 11.09.2026). Die Zeile steht am
   Hinweis des externen Partner-Rechners (hausrat, pflege, risikoleben,
   sterbegeld) auf dem Kachelgrund, dessen dunklerer Endpunkt --accent-soft2
   ist. --muted kam dort auf 4,37:1 und verfehlte die 4,5:1, die fuer 12px
   gelten; --grey kommt auf 5,66:1, derselbe Wert wie .rcue-zusage darunter.
   Geaendert ist die Farbe, nicht die Schriftgroesse (Auftrag). Gemessen wird
   das Paar in tools/tests/test_kontrast_paare.py, nicht der Farbwert. */
.rcue-note{font-size:12px;color:var(--grey);margin-top:11px;max-width:34ch}
/* Die Zusagezeile unter dem Knopf der Vormerk-Kachel (10.09.2026).
   Sie traegt --grey und nicht --muted: Auf dem Kachelgrund (--accent-soft2,
   der dunklere Endpunkt des Verlaufs) misst --muted 4,37:1 und verfehlt die
   geforderten 4,5:1, --grey kommt auf 5,66:1. Der Wert ist nachgerechnet,
   nicht geschaetzt.
   Linksbuendig wie alles in der Kachel: .rcue-btn ist im Bestand ein
   inline-flex und steht am linken Rand, nicht auf voller Breite. Der Entwurf
   zentriert die Zeile unter einem Knopf ueber die ganze Breite; uebernommen
   ist die Bestandsform des Knopfes ("so gross wie bisher der Rechner-Knopf"),
   und darunter waere eine zentrierte Zeile aus der Flucht. */
.rcue-zusage{display:block;font-size:13px;color:var(--grey);margin-top:10px;max-width:34ch}
.rcue-alt{margin-top:14px;font-size:14px}
.rcue-alt a{font-weight:600;color:var(--accent-ink)}
.rcue-alt a:hover{color:var(--accent-deep)}
@media(max-width:900px){.rcue{padding:22px}.rcue-badge{top:18px;right:18px}}
body[data-layout="cine-kompakt"] .schadenszene .sz-text{font-size:clamp(16.5px,1.5vw,19.5px);line-height:1.7;max-width:62ch;color:var(--ink-2);margin:16px 0 0}
body[data-layout="cine-kompakt"] .schadenszene .sz-cta{margin-top:24px}
/* ---------- L4: Kontrastfamilie, Entscheidung Maik (28.07.2026) ----------

   `--muted` (#6A7681) auf `--tint` (#F5F8FB) ergibt **4,36:1** und liegt damit
   unter den geforderten 4,5:1. Auf Weiss ergibt derselbe Ton 4,64:1 und ist in
   Ordnung. Der Mangel entsteht also nicht am Ton allein, sondern an der Paarung
   mit der getoenten Flaeche der `pk-tint`-Abschnitte.

   **Ersatzton ist `--grey` (#566571)**, auf `--tint` nachgerechnet **5,64:1**
   und auf Weiss 6,01:1. Beide Toene stehen seit jeher im Token-Block, es kommt
   also keine Farbe dazu.

   **Ausdruecklich kein globaler Token-Tausch** (Ansage Maik: „nur an den
   Fundstellen, nicht sitewide"). Betroffen sind genau die Fundstellen, die
   baumweit gemessen unter der Schwelle lagen: acht Beschriftungen in neun
   Regeln, alle mit dem Vermerk `L4`. Neun und nicht acht, weil `.gfx-src` zwei
   Regeln hat, eine fuer die Bildunterschrift und eine fuer die
   Tabellenbeschriftung. Die uebrigen sechzehn `--muted`-Regeln bleiben
   unveraendert, weil sie auf Weiss stehen und dort mit 4,64:1 bestehen.

   Gemessen wurde vor der Aenderung ueber alle 106 ausgelieferten Seiten:
   597 Vorkommen von `--muted` in sichtbarem Text, 17 Regel-Hintergrund-Paare,
   davon 7 unter der Schwelle und alle 7 mit demselben Wert 4,36:1:

     .hz-zone h3 (12x) · .gfx-src (6x) · .zw-b h3 (3x) · .sl-sub (6x)
     .sl-extralabel (2x) · .ku-summe-label (1x) · .kz-unit (1x)

   **Die achte fand erst der zweite Anlauf, und das ist der Merksatz dieses
   Pakets:** `.zt-reflabel` faerbt Text in einem SVG und benutzt dafuer `fill`,
   nicht `color`. Eine Messung, die nur `color` einsammelt, sieht daran vorbei,
   und zwar lautlos. Der Wert ist derselbe: 4,36:1 auf `--tint`, gemessen auf
   privat/berufsunfaehigkeit und privat/krankentagegeld in allen drei Breiten.
   Gegengeprueft wurde bei der Gelegenheit auch `.gfx-duo td:before`, das erst
   unterhalb von 640 px erscheint und deshalb in einer Messung bei 1280 px
   ebenfalls unsichtbar bleibt: Es steht auf Weiss und haelt 4,64:1.

   Eine Regel je Fundstelle und nicht je Hintergrund: `.gfx-src` steht mal auf
   Weiss, mal auf Tint. Zwei Werte fuer dieselbe Beschriftung waeren eine
   Falle beim naechsten Umbau; ein Ton, der auf beiden Flaechen traegt, ist es
   nicht. */
body[data-layout="cine-kompakt"] .gfx-cap{display:block;margin:16px auto 0;font-size:12.5px;max-width:var(--gfx-maxw)}
body[data-layout="cine-kompakt"] .gfx-cap .gfx-src{display:inline;margin-left:6px;color:var(--grey);font-style:normal} /* L4 */
/* #8A6D1D bleibt fest und wird NICHT zur Weltfarbe (Stufe 1, 25.07.2026): Die Zeile
   traegt den Hinweis "[ZU PRUEFEN: fachliche Freigabe ...]". Ein Warnhinweis muss in
   jeder Welt gleich aussehen. Nachgerechnet: 4,90:1 gegen Weiss und 4,60:1 gegen den
   Ton --tint, beides ueber 4,5:1.
   Nachtrag 27.07.2026: Die urspruengliche Begruendung nannte die Verschmelzung mit dem
   damaligen Schausteller-Akzent #A15C10. Seit der Umstellung auf Tuerkis besteht diese
   Gefahr nicht mehr, der Grund fuer die feste Farbe bleibt aber derselbe. Nachgemessen
   steht der Hinweis auf --tint und damit weltunabhaengig; der Wert 4,60:1 gilt
   unveraendert in allen vier Welten. */
body[data-layout="cine-kompakt"] .gfx-cap .gfx-check{display:block;margin-top:4px;color:#8A6D1D;font-style:normal;font-weight:600}

/* ---------- Archetyp 1: Stufenband (seit Paket B: Stufen-Karten) ----------
   Ansteigende Karten von dunkel nach hell; die alte SVG-Konturflaeche lief bei
   langen Texten in die Beschriftung (Befund Maik 22.07.2026). */
body[data-layout="cine-kompakt"] .st-karten{list-style:none;margin:0 auto;padding:0;
  display:grid;grid-template-columns:repeat(var(--st-n),1fr);gap:14px;align-items:end;max-width:var(--gfx-maxw)}
body[data-layout="cine-kompakt"] .st-karte{border-radius:14px;padding:18px 18px 16px;position:relative;
  min-height:calc(190px + var(--i)*38px)}
body[data-layout="cine-kompakt"] .st-karte h3{font-family:var(--font-display);font-size:18px;margin:0 0 6px;letter-spacing:-.01em}
body[data-layout="cine-kompakt"] .st-karte p{font-size:13px;line-height:1.55;margin:0}
body[data-layout="cine-kompakt"] .st-badge{position:absolute;top:-11px;left:16px;font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:5px 12px;line-height:1.1}
body[data-layout="cine-kompakt"] .st-k1{background:var(--accent-deep)}
body[data-layout="cine-kompakt"] .st-k1 h3{color:#fff}
body[data-layout="cine-kompakt"] .st-k1 p{color:color-mix(in srgb,var(--accent-soft) 82%,#fff)}
body[data-layout="cine-kompakt"] .st-k1 .st-badge{background:#fff;color:var(--accent-deep)}
/* **Die zweite Stufe traegt die dunklere Akzent-Tinte** (Freigabe Maik,
   06.09.2026). Sie stand auf --accent; Weiss darauf erreicht 3,82:1 in der
   Schaustellerfamilie und 3,52:1 in der Basisfamilie, beides unter den
   4,5:1 der WCAG 2.2 AA (1.4.3). Der Fund ist aktenkundig: axe an
   .st-k2 > h3 und .st-k2 > p auf schausteller/unfall.html, sichtbar
   geworden, als der gekuerzte Kurzblock die Grafik in den Reveal schob.
   Die Loesung ist die des "Exklusiv"-Abzeichens vom 04.09.2026
   (.card-prod .card-media .card-badge-ex): dieselbe Markenfamilie, eine
   Stufe dunkler, Schrift bleibt weiss. --accent-deep waere noch dunkler,
   faele aber mit .st-k1 zusammen und naehme der Treppe ihren Verlauf.
   Das Abzeichen der Stufe behaelt seine weisse Flaeche; sein Text steht
   schon auf --accent-ink und ist davon unberuehrt. */
body[data-layout="cine-kompakt"] .st-k2{background:var(--accent-ink)}
body[data-layout="cine-kompakt"] .st-k2 h3{color:#fff}
body[data-layout="cine-kompakt"] .st-k2 p{color:color-mix(in srgb,var(--accent-soft) 88%,#fff)}
body[data-layout="cine-kompakt"] .st-k2 .st-badge{background:rgba(255,255,255,.92);color:var(--accent-ink)}
body[data-layout="cine-kompakt"] .st-k3,body[data-layout="cine-kompakt"] .st-k4{background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 25%,#fff)}
body[data-layout="cine-kompakt"] .st-k3 h3,body[data-layout="cine-kompakt"] .st-k4 h3{color:var(--ink)}
body[data-layout="cine-kompakt"] .st-k3 p,body[data-layout="cine-kompakt"] .st-k4 p{color:var(--grey)}
body[data-layout="cine-kompakt"] .st-k3 .st-badge,body[data-layout="cine-kompakt"] .st-k4 .st-badge{background:var(--accent-ink);color:#fff}
body[data-layout="cine-kompakt"] .st-k4{background:var(--accent-soft2)}
html.js body[data-layout="cine-kompakt"] .st-karte{opacity:0;transform:translateY(14px)}
body[data-layout="cine-kompakt"] .gfx-stufen.is-in .st-karte{opacity:1;transform:none;
  transition:opacity var(--gfx-dur) var(--gfx-ease),transform var(--gfx-dur) var(--gfx-ease);
  transition-delay:calc(.15s + var(--i)*var(--gfx-stagger))}
@media(max-width:720px){
  body[data-layout="cine-kompakt"] .st-karten{grid-template-columns:1fr;align-items:stretch;gap:16px}
  body[data-layout="cine-kompakt"] .st-karte{min-height:0}
}

/* ---------- Archetyp 2: Deckungshorizont ---------- */
body[data-layout="cine-kompakt"] .hz-zonen{display:grid;grid-template-columns:1.25fr 1fr;max-width:var(--gfx-maxw);margin:0 auto;
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
body[data-layout="cine-kompakt"] .hz-zone{padding:clamp(20px,3.5vw,32px) var(--gfx-gutter);opacity:0;transform:translateY(12px)}
body[data-layout="cine-kompakt"] .gfx-horizont.is-in .hz-zone{opacity:1;transform:none;transition:opacity var(--gfx-dur) var(--gfx-ease),transform var(--gfx-dur) var(--gfx-ease)}
body[data-layout="cine-kompakt"] .gfx-horizont.is-in .hz-out{transition-delay:220ms}
body[data-layout="cine-kompakt"] .hz-in{background:linear-gradient(180deg,var(--accent-soft2),#fff)}
body[data-layout="cine-kompakt"] .hz-out{border-left:3px solid var(--gfx-rail-em);
  background-image:repeating-linear-gradient(45deg,var(--gfx-void) 0 1px,transparent 1px 10px)}
body[data-layout="cine-kompakt"] .hz-zone h3{font-family:var(--font-sans);font-size:var(--gfx-label);font-weight:600;letter-spacing:var(--gfx-track);text-transform:uppercase;color:var(--grey);margin:0 0 12px} /* L4 */
body[data-layout="cine-kompakt"] .hz-zone ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
body[data-layout="cine-kompakt"] .hz-zone li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
body[data-layout="cine-kompakt"] .hz-in li:before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
body[data-layout="cine-kompakt"] .hz-out li:before{content:"";position:absolute;left:0;top:12px;width:10px;height:2px;border-radius:2px;background:var(--grey)}
@media(max-width:760px){
  body[data-layout="cine-kompakt"] .hz-zonen{grid-template-columns:1fr}
  body[data-layout="cine-kompakt"] .hz-out{border-left:0;border-top:3px solid var(--gfx-rail-em)}
}

/* ---------- Archetyp 3: Zeitachse ----------
   **Figur-verankert statt layout-verankert (Behebung 21.08.2026).** Die
   Zeitachse ist seit dem 29.07.2026 die erste Grafik auf einer Inhaltsseite
   (/ueber-uns/geschichte.html), und Inhaltsseiten tragen
   data-layout="cine-kompakt" nicht. Solange jede zt-Regel an diesem Attribut
   hing, war sie dort unerreichbar: keine Achse, keine Linie, schwarze
   Standardpunkte, die Stationen als nummerierte Rohliste. Die Klasse gfx-zeit
   vergibt ausschliesslich der Renderer; an ihr verankert sieht die Grafik auf
   jeder Seite gleich aus, und der Stilvertrag der Produktseiten bleibt
   unberuehrt.

   **Versteckt wird ausschliesslich unter html.js.** Ohne JavaScript steht die
   komplette Zeitleiste sofort da: graue Grundachse, farbige Linie, Punkte,
   alle Stationen. Mit JavaScript zeichnet sich die Linie beim Hereinscrollen
   ueber die Grundachse, und Punkte wie Stationen folgen ihr zeitversetzt. Die
   Versatzzeiten (--zd) rechnet der Renderer aus der Lage jeder Station aus,
   weil CSS nicht durch var(--zt-n) teilen kann. */
body[data-layout="cine-kompakt"] .gfx-zeit{margin:0}
.gfx-zeit .zt-svg{display:block;width:100%;height:auto;max-width:var(--gfx-maxw);margin:0 auto;overflow:visible}
.gfx-zeit .zt-achse{stroke:var(--gfx-rail);stroke-width:2}
.gfx-zeit .zt-ref{stroke:#9FB3C2;stroke-width:2;stroke-dasharray:4 7}
.gfx-zeit .zt-reflabel{font-family:var(--font-sans);font-size:12.5px;fill:var(--grey)} /* L4 */
.gfx-zeit .zt-gaplabel{font-family:var(--font-sans);font-size:13.5px;font-weight:600;fill:var(--accent-ink)}
.gfx-zeit .zt-line{fill:none;stroke:var(--gfx-rail-em);stroke-width:var(--gfx-stroke-em);stroke-linecap:round;stroke-linejoin:round}
.gfx-zeit .zt-dot{fill:#fff;stroke:var(--gfx-rail-em);stroke-width:3}
.gfx-zeit .zt-gap{fill:color-mix(in srgb,var(--accent) 10%,transparent)}
.gfx-zeit .zt-marks{list-style:none;margin:16px auto 0;padding:0;max-width:var(--gfx-maxw);display:grid;grid-template-columns:repeat(var(--zt-n),1fr);gap:0 18px}
.gfx-zeit .zt-marks li{padding-right:8px}
.gfx-zeit .zt-when{display:block;font-size:var(--gfx-label);font-weight:600;letter-spacing:var(--gfx-track);text-transform:uppercase;color:var(--accent-deep);margin-bottom:5px}
.gfx-zeit .zt-marks p{font-size:13.5px;color:var(--gfx-ink-soft);line-height:1.55;margin:0}
.gfx-zeit .gfx-cap{display:block;margin:18px auto 0;font-size:12.5px;max-width:var(--gfx-maxw)}
.gfx-zeit .gfx-cap .gfx-src{display:inline;margin-left:6px;color:var(--grey);font-style:normal} /* L4 */
@media(max-width:760px){
  .gfx-zeit .zt-marks{grid-template-columns:1fr;gap:14px}
}
/* Die Animationszustaende, nur bei laufendem JavaScript. Dezent gehalten:
   eine gezeichnete Linie, weiche Einblendungen, keine weiteren Effekte. */
html.js .gfx-zeit .zt-line{stroke-dasharray:1;stroke-dashoffset:1}
/* Eigene, fast gleichmaessige Kurve nur fuer die Linie: Mit var(--gfx-ease)
   (cubic-bezier(.16,1,.3,1)) waere sie nach einem Drittel der Zeit praktisch
   fertig und die Stationen kaemen lange nach ihr. So laeuft die Spitze den
   linear gerechneten --zd-Zeiten knapp voraus - die Linie kommt an, der Punkt
   und seine Station folgen. */
html.js .gfx-zeit.is-in .zt-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.33,0,.2,1) .1s}
html.js .gfx-zeit .zt-dot{opacity:0}
html.js .gfx-zeit.is-in .zt-dot{opacity:1;transition:opacity .45s var(--gfx-ease);transition-delay:var(--zd,.1s)}
html.js .gfx-zeit .zt-gap{opacity:0}
html.js .gfx-zeit.is-in .zt-gap{opacity:1;transition:opacity .6s ease 1.5s}
html.js .gfx-zeit .zt-marks li{opacity:0;transform:translateY(12px)}
html.js .gfx-zeit.is-in .zt-marks li{opacity:1;transform:none;transition:opacity var(--gfx-dur) var(--gfx-ease),transform var(--gfx-dur) var(--gfx-ease);transition-delay:var(--zd,calc(.3s + var(--i)*var(--gfx-stagger)))}

/* ---------- Archetyp 3, Form "chevron": fuenf Karten greifen ineinander ----------
   Entwurfsfreigabe Maik, 21.08.2026 (Geschichtsseite). Jede Karte ist ein
   Listenpunkt mit clip-path: flache Schraege rechts als Spitze, links als
   Kerbe; die Karten ueberlappen um die Schraege minus Lichtspalt, so greifen
   sie ineinander. Erste und letzte Karte sind aussen gerade mit gerundeten
   Ecken. Der Verlauf ueber die gewoehnlichen Karten kommt aus --cv-mix (vom
   Renderer), die Heute-Karte steht voll in der Weltfarbe, die 2027-Karte als
   gestrichelte Kontur (Ring aus Schraegstreifen, Inneres per Pseudoelement
   abgedeckt - ein gestrichelter Rand folgt keinem clip-path).

   **Text sitzt sauber, das ist Abnahmekriterium Nummer eins:** Die
   Innenabstaende sind Schraege plus Polster, damit kein Zeichen im
   angeschnittenen Bereich steht; infografiken.spec.js misst das je Karte gegen
   die Kontur. text-wrap:pretty verhindert Einzelwort-Zeilen am Absatzende,
   Silbentrennung mit Mindestlaengen haelt die Zeilen gefuellt.

   Versteckt wird ausschliesslich unter html.js. */
/* Volle Inhaltsbreite (Sicht Maik): Der gewonnene Platz geht in den
   Lichtspalt (6 px) und die Innenabstaende, nicht in laengere Zeilen. */
.gfx-chevron{--cv-s:18px;--cv-gap:6px;--cv-pad:20px;--cv-r:12px;--cv-grund:#fff;--cv-takt:1.05s}
/* --cv-zd steht auf der Karte, nicht auf der Figur: --i lebt auf der Karte,
   und eine Variable wird dort aufgeloest, wo sie deklariert ist - auf der
   Figur waere calc(var(--i) ...) ungueltig und alle Verzoegerungen 0 s. */
.gfx-chevron .cv-card{--cv-zd:calc(var(--i) * var(--cv-takt))}
/* Der weiche Schatten liegt als drop-shadow auf der Liste, nicht als
   box-shadow auf der Karte: Ein box-shadow wuerde vom clip-path der Karte
   abgeschnitten, der Filter folgt der Silhouette des ganzen Bands. */
.gfx-chevron .cv-band{list-style:none;margin:0;padding:0 0 10px;display:flex;align-items:stretch;
  filter:drop-shadow(0 8px 14px rgba(6,38,62,.12)) drop-shadow(0 1px 2px rgba(6,38,62,.08))}
.gfx-chevron .cv-card{position:relative;flex:1 1 0;min-width:0;margin:0 0 0 calc(var(--cv-gap) - var(--cv-s));
  padding:22px calc(var(--cv-s) + var(--cv-pad)) 24px calc(var(--cv-s) + var(--cv-pad));
  background:color-mix(in srgb,var(--accent) var(--cv-mix),#fff);color:var(--ink);
  /* Eingelegte Flaeche: feine helle Kante an der Oberkante (inset, deshalb
     vom clip-path nicht beruehrt). */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  clip-path:polygon(0 0,calc(100% - var(--cv-s)) 0,100% 50%,calc(100% - var(--cv-s)) 100%,0 100%,var(--cv-s) 50%)}
.gfx-chevron .cv-card:first-child{margin-left:0;border-radius:var(--cv-r) 0 0 var(--cv-r);padding-left:calc(var(--cv-pad) + 6px);
  clip-path:polygon(0 0,calc(100% - var(--cv-s)) 0,100% 50%,calc(100% - var(--cv-s)) 100%,0 100%)}
.gfx-chevron .cv-card:last-child{border-radius:0 var(--cv-r) var(--cv-r) 0;padding-right:calc(var(--cv-pad) + 6px);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,var(--cv-s) 50%)}
/* Kopfzeile in Tinte, nicht in der Weltfarbe: --accent-deep erreicht auf der
   sattesten Tonkarte nur 4,06:1 (gemessen), die Abnahme verlangt 4,5:1. */
.gfx-chevron .cv-when{display:block;font-size:var(--gfx-label);font-weight:600;letter-spacing:var(--gfx-track);text-transform:uppercase;color:var(--ink);margin-bottom:6px}
/* Silbentrennung mit Mindestlaengen (8 Zeichen, 4 davor, 4 danach): Bei fuenf
   Karten in einer Reihe ist die Textspalte rund 160 px breit; ohne Trennung
   stuenden lange Woerter allein in der Zeile und davor Einzelwort-Zeilen. */
.gfx-chevron .cv-card p{font-size:13.5px;line-height:1.55;margin:0;color:var(--ink-2);text-wrap:pretty;overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 6 6}
/* Heute: voll in der Weltfarbe, heller Text. Die Tintenstufe der Welt
   (--accent-ink) statt des reinen Akzents: Weiss auf #0092CB erreicht nur
   3,5:1, die Abnahme verlangt 4,5:1. */
.gfx-chevron .cv-em{background:var(--accent-ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.gfx-chevron .cv-em .cv-when,.gfx-chevron .cv-em p{color:#fff}
/* 2027: gestrichelte Kontur. */
.gfx-chevron .cv-next{background:repeating-linear-gradient(135deg,var(--accent-ink) 0 5px,transparent 5px 11px)}
.gfx-chevron .cv-next::before{content:"";position:absolute;inset:2px;background:var(--cv-grund);border-radius:0 calc(var(--cv-r) - 2px) calc(var(--cv-r) - 2px) 0;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,var(--cv-s) 50%)}
.gfx-chevron .cv-next{box-shadow:none}
.gfx-chevron .cv-next>*{position:relative}
/* Der Glanzstreif: ein schmaler heller Schimmer, der einmal schraeg ueber
   die Flaeche laeuft. Als Pseudoelement in der Karte, also an deren clip-path
   maskiert. Ruhezustand: rechts ausserhalb und unsichtbar - er laeuft nur
   beim Erscheinen, nichts blinkt dauerhaft. */
.gfx-chevron .cv-card::after{content:"";position:absolute;inset:-10% -30%;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);transform:translateX(70%)}
.gfx-chevron .cv-em::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%)}
@media(min-width:700px) and (max-width:999px){
  /* Zwei Reihen (3 + 2) ohne Richtungsbruch: beide laufen von links nach
     rechts, die vierte Karte beginnt die zweite Reihe gerade. */
  .gfx-chevron .cv-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:10px}
  .gfx-chevron .cv-card:nth-child(4){margin-left:0;border-radius:var(--cv-r) 0 0 var(--cv-r);padding-left:calc(var(--cv-pad) + 6px);
    clip-path:polygon(0 0,calc(100% - var(--cv-s)) 0,100% 50%,calc(100% - var(--cv-s)) 100%,0 100%)}
}
@media(max-width:699px){
  /* Gestapelt, Schraegen zeigen nach unten, gleiche Reihenfolge. */
  .gfx-chevron{--cv-s:16px}
  .gfx-chevron .cv-band{flex-direction:column}
  /* Gestapelt bekommt jede Karte ihr is-in beim Erreichen: kein zeitlicher
     Versatz nach Reihenfolge noetig, der Scrollweg ist die Sequenz. */
  .gfx-chevron .cv-card{--cv-zd:0s}
  .gfx-chevron .cv-card{margin:calc(var(--cv-gap) - var(--cv-s)) 0 0;
    padding:calc(var(--cv-s) + 16px) 22px calc(var(--cv-s) + 16px);
    clip-path:polygon(0 0,50% var(--cv-s),100% 0,100% calc(100% - var(--cv-s)),50% 100%,0 calc(100% - var(--cv-s)))}
  .gfx-chevron .cv-card:first-child{margin-top:0;border-radius:var(--cv-r) var(--cv-r) 0 0;padding:20px 22px calc(var(--cv-s) + 16px);
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cv-s)),50% 100%,0 calc(100% - var(--cv-s)))}
  .gfx-chevron .cv-card:last-child{border-radius:0 0 var(--cv-r) var(--cv-r);padding:calc(var(--cv-s) + 16px) 22px 22px;
    clip-path:polygon(0 0,50% var(--cv-s),100% 0,100% 100%,0 100%)}
  .gfx-chevron .cv-next::before{border-radius:0 0 calc(var(--cv-r) - 2px) calc(var(--cv-r) - 2px);
    clip-path:polygon(0 0,50% var(--cv-s),100% 0,100% 100%,0 100%)}
}
/* Erscheinens-Choreographie je Karte, nur bei laufendem JavaScript (Sicht
   Maik, 21.08.2026): Die Karte gleitet ein und rastet mit Nachsetzer (0 bis
   0,7 s), dann laeuft einmalig der Glanzstreif (0,55 bis 1,3 s), erst danach
   blendet der Titel auf (ab 1,1 s), dann der Text (ab 1,25 s, fertig bei
   rund 1,6 s). In der Reihe startet Karte i bei i mal --cv-takt; gestapelt
   startet jede, wenn sie ins Bild kommt. Die generische Reveal-Regel
   ([data-reveal]) wird hier durch spezifischere Selektoren ueberschrieben.
   Wer schnell scrollt, bekommt trotzdem jederzeit den Endzustand: Alle
   Zustaende sind Uebergaenge, nichts haengt an der Geduld. */
/* Weiche Kontur (Sicht Maik, 21.08.2026, "zu kantig"): Alle Ecken der
   Karten, auch Spitzen und Kerben, bekommen Rundungen (--cv-rr, 7 px) per
   clip-path: shape() mit quadratischen Kurven, Kontrollpunkt ist die
   jeweilige Ecke. Die Schraege ist fast senkrecht, deshalb liegt der
   Kurvenansatz auf ihr 7 px in Laengsrichtung und nur --cv-e (1 px) quer.
   Browser ohne shape() behalten das Polygon von oben. Aussen gerade Karten
   behalten ihre border-radius-Ecken; dort laeuft der Pfad gerade. */
@supports (clip-path:shape(from 0 0,line to 1px 1px)){
  .gfx-chevron{--cv-rr:7px;--cv-e:1px}
  .gfx-chevron .cv-card{clip-path:shape(from var(--cv-rr) 0,
    line to calc(100% - var(--cv-s) - var(--cv-rr)) 0,
    curve to calc(100% - var(--cv-s) + var(--cv-e)) var(--cv-rr) with calc(100% - var(--cv-s)) 0,
    line to calc(100% - var(--cv-e)) calc(50% - var(--cv-rr)),
    curve to calc(100% - var(--cv-e)) calc(50% + var(--cv-rr)) with 100% 50%,
    line to calc(100% - var(--cv-s) + var(--cv-e)) calc(100% - var(--cv-rr)),
    curve to calc(100% - var(--cv-s) - var(--cv-rr)) 100% with calc(100% - var(--cv-s)) 100%,
    line to var(--cv-rr) 100%,
    curve to var(--cv-e) calc(100% - var(--cv-rr)) with 0 100%,
    line to calc(var(--cv-s) - var(--cv-e)) calc(50% + var(--cv-rr)),
    curve to calc(var(--cv-s) - var(--cv-e)) calc(50% - var(--cv-rr)) with var(--cv-s) 50%,
    line to var(--cv-e) var(--cv-rr),
    curve to var(--cv-rr) 0 with 0 0,close)}
  .gfx-chevron .cv-card:first-child{clip-path:shape(from 0 0,
    line to calc(100% - var(--cv-s) - var(--cv-rr)) 0,
    curve to calc(100% - var(--cv-s) + var(--cv-e)) var(--cv-rr) with calc(100% - var(--cv-s)) 0,
    line to calc(100% - var(--cv-e)) calc(50% - var(--cv-rr)),
    curve to calc(100% - var(--cv-e)) calc(50% + var(--cv-rr)) with 100% 50%,
    line to calc(100% - var(--cv-s) + var(--cv-e)) calc(100% - var(--cv-rr)),
    curve to calc(100% - var(--cv-s) - var(--cv-rr)) 100% with calc(100% - var(--cv-s)) 100%,
    line to 0 100%,close)}
  .gfx-chevron .cv-card:last-child,.gfx-chevron .cv-next::before{clip-path:shape(from var(--cv-rr) 0,
    line to 100% 0,line to 100% 100%,line to var(--cv-rr) 100%,
    curve to var(--cv-e) calc(100% - var(--cv-rr)) with 0 100%,
    line to calc(var(--cv-s) - var(--cv-e)) calc(50% + var(--cv-rr)),
    curve to calc(var(--cv-s) - var(--cv-e)) calc(50% - var(--cv-rr)) with var(--cv-s) 50%,
    line to var(--cv-e) var(--cv-rr),
    curve to var(--cv-rr) 0 with 0 0,close)}
  @media(min-width:700px) and (max-width:999px){
    .gfx-chevron .cv-card:nth-child(4){clip-path:shape(from 0 0,
      line to calc(100% - var(--cv-s) - var(--cv-rr)) 0,
      curve to calc(100% - var(--cv-s) + var(--cv-e)) var(--cv-rr) with calc(100% - var(--cv-s)) 0,
      line to calc(100% - var(--cv-e)) calc(50% - var(--cv-rr)),
      curve to calc(100% - var(--cv-e)) calc(50% + var(--cv-rr)) with 100% 50%,
      line to calc(100% - var(--cv-s) + var(--cv-e)) calc(100% - var(--cv-rr)),
      curve to calc(100% - var(--cv-s) - var(--cv-rr)) 100% with calc(100% - var(--cv-s)) 100%,
      line to 0 100%,close)}
  }
  @media(max-width:699px){
    /* Gestapelt: Schraegen fast waagerecht, Kurvenansatz 7 px quer, 1 px laengs. */
    .gfx-chevron .cv-card{clip-path:shape(from var(--cv-rr) var(--cv-e),
      line to calc(50% - var(--cv-rr)) calc(var(--cv-s) - var(--cv-e)),
      curve to calc(50% + var(--cv-rr)) calc(var(--cv-s) - var(--cv-e)) with 50% var(--cv-s),
      line to calc(100% - var(--cv-rr)) var(--cv-e),
      curve to 100% var(--cv-rr) with 100% 0,
      line to 100% calc(100% - var(--cv-s) - var(--cv-rr)),
      curve to calc(100% - var(--cv-rr)) calc(100% - var(--cv-s) + var(--cv-e)) with 100% calc(100% - var(--cv-s)),
      line to calc(50% + var(--cv-rr)) calc(100% - var(--cv-e)),
      curve to calc(50% - var(--cv-rr)) calc(100% - var(--cv-e)) with 50% 100%,
      line to var(--cv-rr) calc(100% - var(--cv-s) + var(--cv-e)),
      curve to 0 calc(100% - var(--cv-s) - var(--cv-rr)) with 0 calc(100% - var(--cv-s)),
      line to 0 var(--cv-rr),
      curve to var(--cv-rr) var(--cv-e) with 0 0,close)}
    .gfx-chevron .cv-card:first-child{clip-path:shape(from 0 0,line to 100% 0,
      line to 100% calc(100% - var(--cv-s) - var(--cv-rr)),
      curve to calc(100% - var(--cv-rr)) calc(100% - var(--cv-s) + var(--cv-e)) with 100% calc(100% - var(--cv-s)),
      line to calc(50% + var(--cv-rr)) calc(100% - var(--cv-e)),
      curve to calc(50% - var(--cv-rr)) calc(100% - var(--cv-e)) with 50% 100%,
      line to var(--cv-rr) calc(100% - var(--cv-s) + var(--cv-e)),
      curve to 0 calc(100% - var(--cv-s) - var(--cv-rr)) with 0 calc(100% - var(--cv-s)),close)}
    .gfx-chevron .cv-card:last-child,.gfx-chevron .cv-next::before{clip-path:shape(from var(--cv-rr) var(--cv-e),
      line to calc(50% - var(--cv-rr)) calc(var(--cv-s) - var(--cv-e)),
      curve to calc(50% + var(--cv-rr)) calc(var(--cv-s) - var(--cv-e)) with 50% var(--cv-s),
      line to calc(100% - var(--cv-rr)) var(--cv-e),
      curve to 100% var(--cv-rr) with 100% 0,
      line to 100% 100%,line to 0 100%,line to 0 var(--cv-rr),
      curve to var(--cv-rr) var(--cv-e) with 0 0,close)}
  }
}
/* Ankuppeln von rechts (gestapelt: von unten): Die Karte kommt aus der
   Richtung, in die das Band waechst, und dockt an die Vorgaengerin an. Von
   links kaeme sie ueber deren Spitze und stuende als Geist darueber. */
html.js .gfx-chevron .cv-card[data-reveal]{opacity:0;transform:translateX(36px);transition:none}
html.js .gfx-chevron .cv-card[data-reveal].is-in{opacity:1;transform:none;
  transition:opacity .45s ease var(--cv-zd),transform .75s cubic-bezier(.34,1.45,.64,1) var(--cv-zd)}
html.js .gfx-chevron .cv-card.is-in::after{opacity:1;transform:translateX(-70%);
  transition:transform .75s cubic-bezier(.4,0,.2,1) calc(var(--cv-zd) + .55s),opacity .01s linear calc(var(--cv-zd) + .55s)}
/* Nach dem Lauf steht der Streif links ausserhalb; damit er nicht stehen
   bleibt, wenn ein Browser keine transition faehrt, ist sein Ruhezustand
   unsichtbar (opacity 0 oben) und die Laufbahn endet ausserhalb der Karte. */
html.js .gfx-chevron .cv-card .cv-when,html.js .gfx-chevron .cv-card p{opacity:0;transform:translateY(5px)}
html.js .gfx-chevron .cv-card.is-in .cv-when{opacity:1;transform:none;transition:opacity .4s ease calc(var(--cv-zd) + 1.1s),transform .4s ease calc(var(--cv-zd) + 1.1s)}
html.js .gfx-chevron .cv-card.is-in p{opacity:1;transform:none;transition:opacity .4s ease calc(var(--cv-zd) + 1.25s),transform .4s ease calc(var(--cv-zd) + 1.25s)}
@media(max-width:699px){html.js .gfx-chevron .cv-card[data-reveal]{transform:translateY(26px)}}

/* ---------- Archetyp 4: Weichenbild ---------- */
body[data-layout="cine-kompakt"] .wk-inner{display:grid;grid-template-columns:minmax(170px,230px) clamp(50px,8vw,110px) 1fr;align-items:center;max-width:var(--gfx-maxw);margin:0 auto}
body[data-layout="cine-kompakt"] .wk-stamm{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.3;color:var(--ink);
  background:linear-gradient(180deg,var(--accent-soft2),#fff);border:1px solid var(--line-soft);border-radius:var(--r);padding:18px 20px;margin:0}
body[data-layout="cine-kompakt"] .wk-svg{width:100%;height:100%;display:block}
body[data-layout="cine-kompakt"] .wk-ast{fill:none;stroke:var(--gfx-rail-em);stroke-width:var(--gfx-stroke-em);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
body[data-layout="cine-kompakt"] .gfx-weiche.is-in .wk-ast{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--gfx-ease) .15s}
body[data-layout="cine-kompakt"] .wk-branches{margin:0;display:grid;gap:14px}
body[data-layout="cine-kompakt"] .wk-branch{background:#fff;border:1px solid var(--line-soft);border-left:3px solid var(--gfx-rail-em);border-radius:var(--r-sm);
  padding:14px 18px;opacity:0;transform:translateX(10px)}
body[data-layout="cine-kompakt"] .gfx-weiche.is-in .wk-branch{opacity:1;transform:none;transition:opacity var(--gfx-dur) var(--gfx-ease),transform var(--gfx-dur) var(--gfx-ease);transition-delay:calc(.45s + var(--i)*var(--gfx-stagger))}
body[data-layout="cine-kompakt"] .wk-branch dt{font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--ink);margin:0 0 4px}
body[data-layout="cine-kompakt"] .wk-branch dd{margin:0;font-size:13.5px;color:var(--gfx-ink-soft);line-height:1.55}
@media(max-width:760px){
  body[data-layout="cine-kompakt"] .wk-inner{grid-template-columns:1fr}
  body[data-layout="cine-kompakt"] .wk-svg{display:none}
  body[data-layout="cine-kompakt"] .wk-stamm{margin-bottom:14px}
}

/* ---------- Archetyp 5: Gegenueberstellung (echte Tabelle) ---------- */
body[data-layout="cine-kompakt"] .gfx-duo{width:100%;max-width:var(--gfx-maxw);margin:0 auto;border-collapse:collapse;font-size:14.5px;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
body[data-layout="cine-kompakt"] .gfx-duo caption{caption-side:top;text-align:left;font-size:12.5px;font-style:italic;color:var(--grey);padding:0 2px 12px}
body[data-layout="cine-kompakt"] .gfx-duo caption .gfx-src{display:block;margin-top:3px;color:var(--grey);font-style:normal} /* L4 */
body[data-layout="cine-kompakt"] .gfx-duo caption .gfx-check{display:block;margin-top:3px;color:#8A6D1D;font-style:normal;font-weight:600}
body[data-layout="cine-kompakt"] .gfx-duo th,body[data-layout="cine-kompakt"] .gfx-duo td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
body[data-layout="cine-kompakt"] .gfx-duo thead th{background:var(--accent-soft2);font-family:var(--font-sans);font-weight:600;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep)}
body[data-layout="cine-kompakt"] .gfx-duo tbody th{font-family:var(--font-sans);font-weight:600;font-size:13.5px;color:var(--ink);width:20%}
body[data-layout="cine-kompakt"] .gfx-duo td{color:var(--ink-2)}
body[data-layout="cine-kompakt"] .gfx-duo td+td{border-left:1px solid var(--line-soft)}
body[data-layout="cine-kompakt"] .gfx-duo tbody tr:last-child th,body[data-layout="cine-kompakt"] .gfx-duo tbody tr:last-child td{border-bottom:0}
body[data-layout="cine-kompakt"] .gfx-duo tbody tr{opacity:0;transform:translateY(8px)}
body[data-layout="cine-kompakt"] .gfx-duo.is-in tbody tr{opacity:1;transform:none;transition:opacity .7s var(--gfx-ease),transform .7s var(--gfx-ease);transition-delay:calc(var(--i)*var(--gfx-stagger))}
body[data-layout="cine-kompakt"] .gfx-duo td:before{display:none;content:attr(data-side);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
@media(max-width:700px){
  /* Jede Zeile klappt in einen Block, kein Tabellenscrollen. */
  body[data-layout="cine-kompakt"] .gfx-duo thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  body[data-layout="cine-kompakt"] .gfx-duo,body[data-layout="cine-kompakt"] .gfx-duo tbody,body[data-layout="cine-kompakt"] .gfx-duo tr,body[data-layout="cine-kompakt"] .gfx-duo th,body[data-layout="cine-kompakt"] .gfx-duo td{display:block;width:auto}
  body[data-layout="cine-kompakt"] .gfx-duo caption{display:block}
  body[data-layout="cine-kompakt"] .gfx-duo tbody tr{border-bottom:1px solid var(--line-soft);padding:6px 0}
  body[data-layout="cine-kompakt"] .gfx-duo tbody tr:last-child{border-bottom:0}
  body[data-layout="cine-kompakt"] .gfx-duo th,body[data-layout="cine-kompakt"] .gfx-duo td{border-bottom:0;padding:8px 16px}
  body[data-layout="cine-kompakt"] .gfx-duo td+td{border-left:0}
  body[data-layout="cine-kompakt"] .gfx-duo td:before{display:block}
}

/* ---------- Archetyp 6: Kennzahlenfeld (rein typografisch) ---------- */
body[data-layout="cine-kompakt"] .gfx-kennzahl{max-width:720px;margin:0 auto;text-align:center;padding:clamp(8px,2vw,18px) 0}
body[data-layout="cine-kompakt"] .kz-figure{font-family:var(--font-display);font-weight:600;font-size:var(--gfx-figure);line-height:1;letter-spacing:-.02em;color:var(--accent-deep);font-variant-numeric:tabular-nums;margin:0}
body[data-layout="cine-kompakt"] .kz-join{font-size:.5em;color:var(--grey);font-weight:500;padding:0 .14em}
body[data-layout="cine-kompakt"] .kz-unit{font-family:var(--font-sans);font-size:13.5px;font-weight:600;letter-spacing:var(--gfx-track);text-transform:uppercase;color:var(--grey);margin:12px 0 0} /* L4 */
body[data-layout="cine-kompakt"] .kz-derivation{font-size:15.5px;color:var(--ink-2);line-height:1.65;max-width:54ch;margin:18px auto 0;border-top:1px solid var(--gfx-rail);padding-top:16px;opacity:0}
body[data-layout="cine-kompakt"] .gfx-kennzahl.is-in .kz-derivation{opacity:1;transition:opacity .8s var(--gfx-ease) .9s}

/* ---------- Archetyp 7: Bausteinkreis ---------- */
body[data-layout="cine-kompakt"] .kr-stage{position:relative;max-width:var(--gfx-maxw);margin:0 auto;min-height:520px}
body[data-layout="cine-kompakt"] .kr-stage:before{content:"";position:absolute;left:50%;top:50%;width:min(56%,440px);aspect-ratio:1;transform:translate(-50%,-50%);border:2px dashed var(--gfx-rail);border-radius:50%}
body[data-layout="cine-kompakt"] .kr-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:186px;height:186px;border-radius:50%;
  display:grid;place-items:center;text-align:center;color:#fff;padding:18px;
  background:var(--accent-deep);
  outline:10px solid color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:0 16px 34px -18px color-mix(in srgb,var(--accent-deep) 55%,transparent)}
/* Zweite Sicherung gegen den Fund vom 28.07.2026 ("Es ist nicht im Kreis"):
   Auch wenn eine Beschriftung die Wortgrenze aus NABE_MAX_WORT einmal reissen
   sollte, faellt der Text jetzt nicht mehr aus dem Kreis, sondern trennt sich.
   hyphens:auto greift, weil das Dokument lang="de" traegt. */
body[data-layout="cine-kompakt"] .kr-hub span{font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.25;
  max-width:100%;hyphens:auto;overflow-wrap:break-word}
body[data-layout="cine-kompakt"] .kr-nodes{list-style:none;margin:0;padding:0}
body[data-layout="cine-kompakt"] .kr-node{position:absolute;left:var(--kx);top:var(--ky);transform:translate(-50%,-50%);width:min(220px,22vw);
  text-align:center;background:rgba(255,255,255,.82);border-radius:10px;padding:8px 10px;opacity:0}
body[data-layout="cine-kompakt"] .gfx-kreis.is-in .kr-node{opacity:1;transition:opacity var(--gfx-dur) var(--gfx-ease);transition-delay:calc(.35s + var(--i)*var(--gfx-stagger))}
body[data-layout="cine-kompakt"] .kr-node h3{font-size:15.5px;letter-spacing:-.01em;margin:0 0 3px}
body[data-layout="cine-kompakt"] .kr-node p{font-size:12.5px;color:var(--gfx-ink-soft);line-height:1.45;margin:0}
@media(max-width:900px){
  /* Kreis loest sich in Nabe plus Liste auf, kein gequetschter Kreis. */
  body[data-layout="cine-kompakt"] .kr-stage{min-height:0}
  body[data-layout="cine-kompakt"] .kr-stage:before{display:none}
  body[data-layout="cine-kompakt"] .kr-hub{position:static;transform:none;width:auto;height:auto;max-width:300px;margin:0 auto 18px;border-radius:var(--r);padding:14px 22px}
  body[data-layout="cine-kompakt"] .kr-nodes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  body[data-layout="cine-kompakt"] .kr-node{position:static;transform:none;width:auto;text-align:left;background:#fff;border:1px solid var(--line-soft);padding:14px 16px}
}
@media(max-width:560px){body[data-layout="cine-kompakt"] .kr-nodes{grid-template-columns:1fr}}

/* ---------- Archetyp 11: Kuchen (Ringdiagramm) ----------
   Neu am 28.07.2026 fuer privat/pflege, am 29.07.2026 vom flachen Vollkreis mit
   Legendenliste auf einen Ring mit Kernaussage in der Mitte umgebaut (Ansage
   Maik: "sieht aus wie 1990").

   Was den Unterschied macht, in der Reihenfolge der Wirkung:

   1. **Die Antwort steht in der Mitte, nicht am Rand.** Die Frage lautet "was
      bleibt an mir haengen"; die Zahl dazu sitzt im Loch des Rings, gross, und
      ist das Erste, was man sieht. Eine Legendenzeile am Rand kann das nicht.
   2. **Ein Ring statt eines Kuchens.** Gezeichnet als Kreisbogen mit dicker
      Kontur, nicht als gefuelltes Segment: keine Ecken, keine Fugen, und die
      abgerundeten Enden lassen die beiden Boegen sichtbar auseinandertreten.
   3. **Zwei Toene statt fuenf.** Der eigene Anteil traegt die dunkle Weltfarbe,
      der Anteil der Kasse eine ausgeblichene Fassung derselben Farbe. Mehr
      Farben braucht eine Zweiteilung nicht, und weniger Farbe wirkt teurer.
   4. **Luft.** Der Ring bekommt eine eigene Spalte, die Beschriftung viel
      Zeilenabstand, die Zwischensumme eine Haarlinie statt eines Kastens.

   Die Farben leiten sich weiter aus der Weltfarbe ab (Beschluss Infografik-
   Stufe 1 vom 25.07.2026); es steht hier kein festes Blau. Und Farbe traegt die
   Aussage nie allein: Jeder Bogen hat seine Zeile mit Namen und Betrag, und das
   aria-label sagt dasselbe in ganzen Saetzen. */
body[data-layout="cine-kompakt"] .gfx-kuchen{margin:0}

/* Die Gesamtsumme steht oben: Sie ist die Ausgangsgroesse, von der abgezogen
   wird, nicht das Ergebnis einer Addition. */
body[data-layout="cine-kompakt"] .ku-summe{display:flex;flex-wrap:wrap;gap:4px 16px;
  align-items:baseline;max-width:var(--gfx-maxw);margin:0 auto 26px;
  padding-bottom:16px;border-bottom:1px solid var(--gfx-rail)}
body[data-layout="cine-kompakt"] .ku-summe-label{font-family:var(--font-sans);font-size:13px;font-weight:600;
  letter-spacing:var(--gfx-track);text-transform:uppercase;color:var(--grey)} /* L4 */
body[data-layout="cine-kompakt"] .ku-summe-wert{font-family:var(--font-display);font-weight:600;
  font-size:clamp(24px,3vw,34px);line-height:1;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:9px}
body[data-layout="cine-kompakt"] .ku-summe-wert .ku-einheit{margin:0}

body[data-layout="cine-kompakt"] .ku-stage{display:grid;
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  gap:clamp(28px,5vw,64px);align-items:center;max-width:var(--gfx-maxw);margin:0 auto}

/* ---- Die Torte ---- */
body[data-layout="cine-kompakt"] .ku-ring{position:relative;display:grid;place-items:center;width:100%}
body[data-layout="cine-kompakt"] .ku-svg{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 20px 38px color-mix(in srgb,var(--accent-deep) 24%,transparent))}
body[data-layout="cine-kompakt"] .ku-slice{opacity:0;transform-origin:50% 50%;transform:scale(.93)}
body[data-layout="cine-kompakt"] .gfx-kuchen.is-in .ku-slice{opacity:1;transform:none;
  transition:opacity .7s var(--gfx-ease),transform .8s var(--gfx-ease);
  transition-delay:calc(var(--i)*120ms)}
/* Der Prozentsatz steht im Stueck. Genau das macht eine Torte lesbar: Man muss
   das Verhaeltnis nicht schaetzen. */
body[data-layout="cine-kompakt"] .ku-pct{font-family:var(--font-sans);font-weight:700;
  font-size:15px;letter-spacing:.01em;fill:var(--ink);opacity:0}
body[data-layout="cine-kompakt"] .ku-pct.ku-hervor{fill:#fff;font-size:19px}
body[data-layout="cine-kompakt"] .gfx-kuchen.is-in .ku-pct{opacity:1;
  transition:opacity .6s var(--gfx-ease);transition-delay:calc(.35s + var(--i)*120ms)}
/* Vorgabe ohne Hervorhebung: absteigende Toene der Weltfarbe. */
body[data-layout="cine-kompakt"] .ku-s1{fill:var(--accent-deep);background:var(--accent-deep)}
body[data-layout="cine-kompakt"] .ku-s2{fill:var(--accent);background:var(--accent)}
body[data-layout="cine-kompakt"] .ku-s3{fill:color-mix(in srgb,var(--accent) 45%,#fff);background:color-mix(in srgb,var(--accent) 45%,#fff)}
body[data-layout="cine-kompakt"] .ku-s4{fill:color-mix(in srgb,var(--accent) 24%,#fff);background:color-mix(in srgb,var(--accent) 24%,#fff)}
body[data-layout="cine-kompakt"] .ku-s5{fill:color-mix(in srgb,var(--accent-deep) 62%,#fff);background:color-mix(in srgb,var(--accent-deep) 62%,#fff)}
/* Mit Hervorhebung kehren sich die Rollen um: Das betonte Stueck bekommt den
   dunklen Ton, alle uebrigen einen ausgeblichenen. Sonst laege die Betonung bei
   der Reihenfolge statt bei der Aussage. */
body[data-layout="cine-kompakt"] .ku-mit-hervor .ku-slice{fill:color-mix(in srgb,var(--accent) 26%,#fff)}
body[data-layout="cine-kompakt"] .ku-mit-hervor .ku-swatch{background:color-mix(in srgb,var(--accent) 26%,#fff)}
body[data-layout="cine-kompakt"] .ku-mit-hervor .ku-slice.ku-hervor{fill:var(--accent-deep)}
body[data-layout="cine-kompakt"] .ku-mit-hervor .ku-item.ku-hervor .ku-swatch{background:var(--accent-deep)}

/* ---- Die Beschriftung neben der Torte ---- */
body[data-layout="cine-kompakt"] .ku-legende{list-style:none;margin:0;padding:0;display:grid;gap:22px}
body[data-layout="cine-kompakt"] .ku-item{display:grid;grid-template-columns:11px minmax(0,1fr) auto;
  gap:0 14px;align-items:start;opacity:0;transform:translateY(10px)}
body[data-layout="cine-kompakt"] .gfx-kuchen.is-in .ku-item{opacity:1;transform:none;
  transition:opacity var(--gfx-dur) var(--gfx-ease),transform var(--gfx-dur) var(--gfx-ease);
  transition-delay:calc(.25s + var(--i)*var(--gfx-stagger))}
body[data-layout="cine-kompakt"] .ku-swatch{width:11px;height:11px;border-radius:50%;
  align-self:start;margin-top:7px;display:block}
body[data-layout="cine-kompakt"] .ku-tx b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:17px;line-height:1.3;color:var(--ink);overflow-wrap:break-word;hyphens:auto}
body[data-layout="cine-kompakt"] .ku-item.ku-hervor .ku-tx b{font-size:19px}
body[data-layout="cine-kompakt"] .ku-sub{display:block;font-size:13.5px;line-height:1.55;
  color:var(--gfx-ink-soft);margin-top:4px;max-width:44ch}
body[data-layout="cine-kompakt"] .ku-wert{font-family:var(--font-display);font-weight:600;font-size:20px;
  letter-spacing:-.01em;color:var(--accent-deep);font-variant-numeric:tabular-nums;white-space:nowrap;
  display:block;text-align:right}
body[data-layout="cine-kompakt"] .ku-item.ku-hervor .ku-wert{font-size:24px}
/* Die Einheit gehoert an den Betrag und nicht an den Rand. Vorgeschichte: Die
   erste Fassung nannte vier Betraege voellig ohne Einheit, und die einzige
   Zeitangabe der Grafik sprach von einem Jahr. Es sind Monatswerte. */
body[data-layout="cine-kompakt"] .ku-einheit{display:block;font-family:var(--font-sans);font-weight:600;
  font-size:10.5px;letter-spacing:var(--gfx-track);text-transform:uppercase;color:var(--grey); /* L4 */
  margin-top:3px}

/* ---- Zweite Ebene: die Preisbestandteile des Heims ---- */
body[data-layout="cine-kompakt"] .ku-teile{display:block;margin-top:14px;padding:12px 14px;
  background:color-mix(in srgb,var(--accent) 6%,#fff);border-radius:10px;max-width:44ch}
body[data-layout="cine-kompakt"] .ku-teile-label{display:block;font-family:var(--font-sans);font-weight:600;
  font-size:10.5px;letter-spacing:var(--gfx-track);text-transform:uppercase;color:var(--grey);margin-bottom:7px} /* L4 */
body[data-layout="cine-kompakt"] .ku-teile ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
body[data-layout="cine-kompakt"] .ku-teile li{display:flex;justify-content:space-between;gap:16px;
  font-size:13.5px;line-height:1.5;color:var(--ink-2)}
body[data-layout="cine-kompakt"] .ku-teil-wert{font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--grey)} /* L4 */

@media(max-width:760px){
  /* Der Ring rutscht ueber die Beschriftung, statt sich zu quetschen. */
  body[data-layout="cine-kompakt"] .ku-stage{grid-template-columns:1fr;gap:30px;justify-items:center}
  body[data-layout="cine-kompakt"] .ku-ring{max-width:280px}
  body[data-layout="cine-kompakt"] .ku-legende{width:100%}
  body[data-layout="cine-kompakt"] .ku-summe{justify-content:space-between}
}
@media(max-width:420px){
  body[data-layout="cine-kompakt"] .ku-item{grid-template-columns:11px minmax(0,1fr);row-gap:8px}
  body[data-layout="cine-kompakt"] .ku-wert{grid-column:2;text-align:left}
  body[data-layout="cine-kompakt"] .ku-einheit{display:inline;margin-left:7px}
}


/* ---------- Infografik-System v1/v2 (Freigabe Maik 22.07.2026) ----------
   Gemeinsame Bausteine: Icon-Chips mit Nummern-Node (CSS-Counter zw-nr,
   bewusst keine Ziffer im Markup), Punktraster-Hintergrund, Szenen-Line-Art.
   Verstecken fuer den Scroll-Reveal nur bei laufendem JavaScript (html.js),
   ohne JS ist alles sofort sichtbar. */
/* Hintergrund bewusst 100% transparent (Entscheidung Maik 22.07.2026):
   die Grafiken liegen in wechselnden Kapitelflaechen (weiss/getoent),
   ein eigenes Raster erzeugt dort Unruhe. */
body[data-layout="cine-kompakt"] .gfx-zwei,body[data-layout="cine-kompakt"] .gfx-schalen{margin:0}

/* Zweiflaechen */
body[data-layout="cine-kompakt"] .zw-grid{display:grid;grid-template-columns:1fr minmax(210px,280px) 1fr;
  gap:24px;align-items:center;max-width:var(--gfx-maxw);margin:0 auto;counter-reset:zw-nr}
body[data-layout="cine-kompakt"] .zw-grid:not(:has(.zw-szene)){grid-template-columns:1fr 1fr;gap:32px}
body[data-layout="cine-kompakt"] .zw-col h3{font-family:var(--font-sans);font-size:var(--gfx-label);font-weight:600;
  letter-spacing:var(--gfx-track);text-transform:uppercase;margin:0 0 14px}
body[data-layout="cine-kompakt"] .zw-a h3{color:var(--accent-deep)}
body[data-layout="cine-kompakt"] .zw-b h3{color:var(--grey)} /* L4 */
body[data-layout="cine-kompakt"] .zw-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
body[data-layout="cine-kompakt"] .zw-item{display:flex;gap:12px;align-items:flex-start;min-width:0;counter-increment:zw-nr;position:relative}
body[data-layout="cine-kompakt"] .zw-disc{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;position:relative}
body[data-layout="cine-kompakt"] .zw-disc svg{width:24px;height:24px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-layout="cine-kompakt"] .zw-a .zw-disc{background:var(--accent)}
body[data-layout="cine-kompakt"] .zw-a .zw-disc svg{stroke:#fff}
body[data-layout="cine-kompakt"] .zw-b .zw-disc{background:var(--accent-soft)}
body[data-layout="cine-kompakt"] .zw-b .zw-disc svg{stroke:var(--accent-deep)}
body[data-layout="cine-kompakt"] .zw-disc i{position:absolute;top:-5px;right:-5px;width:19px;height:19px;border-radius:50%;
  background:#fff;border:1.5px solid var(--accent);color:var(--accent-deep);font-style:normal;
  font-size:10.5px;font-weight:700;display:grid;place-items:center;font-family:var(--font-sans)}
body[data-layout="cine-kompakt"] .zw-disc i:before{content:counter(zw-nr)}
body[data-layout="cine-kompakt"] .zw-tx{min-width:0}
body[data-layout="cine-kompakt"] .zw-tx b{display:block;font-size:14.5px;line-height:1.3;color:var(--ink);font-weight:600;padding-top:3px;overflow-wrap:break-word;hyphens:auto}
body[data-layout="cine-kompakt"] .zw-tx span{display:block;font-size:12.5px;line-height:1.45;color:var(--grey);margin-top:2px;overflow-wrap:break-word;hyphens:auto}
body[data-layout="cine-kompakt"] .zw-szene{align-self:stretch;display:flex;align-items:center}
body[data-layout="cine-kompakt"] .zw-szene svg{width:100%;height:auto;display:block}
body[data-layout="cine-kompakt"] .zw-szsvg{fill:none;stroke:var(--accent-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body[data-layout="cine-kompakt"] .zw-sz-bau{stroke-width:2.6}
body[data-layout="cine-kompakt"] .zw-sz-fein{stroke-width:1.6}
body[data-layout="cine-kompakt"] .zw-sz-moebel,body[data-layout="cine-kompakt"] .zw-sz-wetter{stroke-width:1.8;stroke:var(--accent-ink)}
body[data-layout="cine-kompakt"] .zw-a .zw-item:after,body[data-layout="cine-kompakt"] .zw-b .zw-item:before{content:"";position:absolute;top:23px;width:22px;
  border-top:1.5px dashed color-mix(in srgb,var(--accent) 45%,#fff)}
body[data-layout="cine-kompakt"] .zw-a .zw-item:after{right:-23px}
body[data-layout="cine-kompakt"] .zw-b .zw-item:before{left:-23px}
body[data-layout="cine-kompakt"] .zw-grid:not(:has(.zw-szene)) .zw-item:before,
body[data-layout="cine-kompakt"] .zw-grid:not(:has(.zw-szene)) .zw-item:after{display:none}
body[data-layout="cine-kompakt"] .zw-legende{display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;
  max-width:var(--gfx-maxw);margin:20px auto 0;font-size:12.5px;color:var(--ink-2)}
body[data-layout="cine-kompakt"] .zw-dot{width:12px;height:12px;border-radius:4px;flex:none}
body[data-layout="cine-kompakt"] .zw-dot-a{background:var(--accent)}
body[data-layout="cine-kompakt"] .zw-dot-b{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,#fff)}
html.js body[data-layout="cine-kompakt"] .zw-item{opacity:0;transform:translateY(12px)}
body[data-layout="cine-kompakt"] .gfx-zwei.is-in .zw-item{opacity:1;transform:none;
  transition:opacity var(--gfx-dur) var(--gfx-ease),transform var(--gfx-dur) var(--gfx-ease);
  transition-delay:calc(.15s + var(--i)*var(--gfx-stagger))}
@media(max-width:760px){
  body[data-layout="cine-kompakt"] .zw-grid{grid-template-columns:1fr}
  body[data-layout="cine-kompakt"] .zw-szene{max-width:250px;margin:0 auto}
  body[data-layout="cine-kompakt"] .zw-item:before,body[data-layout="cine-kompakt"] .zw-item:after{display:none}
}

/* Schalenmodell */
body[data-layout="cine-kompakt"] .sl-svg{display:block;width:100%;max-width:620px;height:auto;margin:0 auto}
body[data-layout="cine-kompakt"] .sl-r3{fill:var(--accent-soft)}
body[data-layout="cine-kompakt"] .sl-r2{fill:var(--accent-bright);opacity:.55}
body[data-layout="cine-kompakt"] .sl-r1{fill:var(--accent)}
body[data-layout="cine-kompakt"] .sl-kern{fill:var(--accent-deep)}
body[data-layout="cine-kompakt"] .sl-svg text{font-family:var(--font-sans);font-size:15px;font-weight:700}
body[data-layout="cine-kompakt"] .sl-t3{fill:var(--accent-deep)}
body[data-layout="cine-kompakt"] .sl-t2{fill:var(--accent-deep)}
body[data-layout="cine-kompakt"] .sl-t1{fill:#fff}
body[data-layout="cine-kompakt"] .sl-auto{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
body[data-layout="cine-kompakt"] .sl-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  max-width:var(--gfx-maxw);margin:24px auto 0}
body[data-layout="cine-kompakt"] .sl-col{border-top:3px solid var(--sl-c,var(--accent));padding-top:12px}
body[data-layout="cine-kompakt"] .sl-c1{--sl-c:var(--accent-deep)}
body[data-layout="cine-kompakt"] .sl-c2{--sl-c:var(--accent)}
body[data-layout="cine-kompakt"] .sl-c3{--sl-c:var(--accent-bright)}
body[data-layout="cine-kompakt"] .sl-col h3{font-family:var(--font-display);font-size:16.5px;margin:0 0 3px;
  letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:8px}
body[data-layout="cine-kompakt"] .sl-col h3:before{content:"";width:11px;height:11px;border-radius:50%;background:var(--sl-c);flex:none}
body[data-layout="cine-kompakt"] .sl-sub{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin:0 0 8px} /* L4 */
body[data-layout="cine-kompakt"] .sl-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
body[data-layout="cine-kompakt"] .sl-col li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
body[data-layout="cine-kompakt"] .sl-col li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;
  background:color-mix(in srgb,var(--sl-c) 55%,#fff)}
body[data-layout="cine-kompakt"] .sl-extra{display:flex;gap:8px 10px;flex-wrap:wrap;align-items:center;
  max-width:var(--gfx-maxw);margin:20px auto 0;position:relative}
body[data-layout="cine-kompakt"] .sl-extralabel{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-right:4px} /* L4 */
body[data-layout="cine-kompakt"] .sl-chip{font-size:12.5px;font-weight:600;color:var(--accent-deep);background:var(--accent-soft2);
  border:1px solid color-mix(in srgb,var(--accent) 28%,#fff);border-radius:999px;padding:6px 13px}
/* Chips mit belegter Kurzerklaerung sind Knoepfe (Auftrag Maik, 27.07.2026).
   Ein <button> ist von sich aus tastaturerreichbar, und auf dem Telefon
   bekommt er beim Antippen den Fokus, womit derselbe Tooltip aufgeht wie am
   Zeiger. Deshalb steht unten :focus und nicht :focus-visible: Bei Antippen
   und Mausklick setzt der Browser nur :focus. Es ist kein JavaScript beteiligt,
   ohne JavaScript verhalten sich die Tooltips also genauso. */
body[data-layout="cine-kompakt"] .sl-chip-tip{font-family:inherit;margin:0;-webkit-appearance:none;appearance:none;
  cursor:help;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-thickness:1px}
body[data-layout="cine-kompakt"] .sl-chip-tip:hover{background:color-mix(in srgb,var(--accent) 16%,#fff)}
body[data-layout="cine-kompakt"] .sl-chip-tip:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
/* Der Tooltip haengt an der Chipzeile, nicht am einzelnen Chip: Er nimmt deren
   volle Breite ein (left:0;right:0). Damit kann er an keinem Fensterrand
   herausragen, auch nicht beim letzten Chip einer Zeile und nicht bei 320 px.
   Sichtbar wird er nur ueber Nachbarschaft, ohne Umschalten im Skript. */
body[data-layout="cine-kompakt"] .sl-tip{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:6;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;
  font-size:13.5px;font-weight:400;line-height:1.55;color:var(--ink);
  box-shadow:0 12px 30px -18px rgba(7,58,82,.5);opacity:0;visibility:hidden}
body[data-layout="cine-kompakt"] .sl-chip-tip:hover+.sl-tip,
body[data-layout="cine-kompakt"] .sl-chip-tip:focus+.sl-tip{opacity:1;visibility:visible}
html.js body[data-layout="cine-kompakt"] .sl-col{opacity:0;transform:translateY(12px)}
body[data-layout="cine-kompakt"] .gfx-schalen.is-in .sl-col{opacity:1;transform:none;
  transition:opacity var(--gfx-dur) var(--gfx-ease),transform var(--gfx-dur) var(--gfx-ease);
  transition-delay:calc(.2s + var(--i)*var(--gfx-stagger))}
@media(max-width:700px){body[data-layout="cine-kompakt"] .sl-cols{grid-template-columns:1fr}}

/* Phasenband: Stationen auf durchgehender Schutzlinie */
body[data-layout="cine-kompakt"] .gfx-phasen{margin:0}
body[data-layout="cine-kompakt"] .pb-band{display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 26px}
body[data-layout="cine-kompakt"] .pb-banddisc{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;flex:none}
body[data-layout="cine-kompakt"] .pb-banddisc svg{width:17px;height:17px;fill:none;stroke:var(--accent-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-layout="cine-kompakt"] .pb-track{list-style:none;margin:0 auto;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(var(--pb-n),1fr);gap:20px;max-width:var(--gfx-maxw)}
body[data-layout="cine-kompakt"] .pb-track:before{content:"";position:absolute;left:9%;right:9%;top:28px;height:3px;
  border-radius:3px;background:color-mix(in srgb,var(--accent) 38%,#fff)}
body[data-layout="cine-kompakt"] .pb-phase{position:relative;text-align:center;padding:0 8px}
body[data-layout="cine-kompakt"] .pb-disc{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;
  background:var(--accent);display:inline-grid;place-items:center;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 12%,#fff)}
body[data-layout="cine-kompakt"] .pb-disc svg{width:27px;height:27px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-layout="cine-kompakt"] .pb-phase h3{font-family:var(--font-display);font-size:17px;letter-spacing:-.01em;margin:14px 0 5px;color:var(--ink)}
body[data-layout="cine-kompakt"] .pb-phase p{font-size:13px;line-height:1.55;color:var(--grey);margin:0 auto;max-width:30ch}
html.js body[data-layout="cine-kompakt"] .pb-phase{opacity:0;transform:translateY(12px)}
body[data-layout="cine-kompakt"] .gfx-phasen.is-in .pb-phase{opacity:1;transform:none;
  transition:opacity var(--gfx-dur) var(--gfx-ease),transform var(--gfx-dur) var(--gfx-ease);
  transition-delay:calc(.15s + var(--i)*var(--gfx-stagger))}
@media(max-width:720px){
  body[data-layout="cine-kompakt"] .pb-track{grid-template-columns:1fr;gap:22px}
  body[data-layout="cine-kompakt"] .pb-track:before{left:27px;right:auto;top:10px;bottom:10px;width:3px;height:auto}
  body[data-layout="cine-kompakt"] .pb-phase{display:grid;grid-template-columns:56px 1fr;gap:2px 16px;text-align:left;padding:0}
  body[data-layout="cine-kompakt"] .pb-phase h3{grid-column:2;margin:6px 0 2px}
  body[data-layout="cine-kompakt"] .pb-phase p{grid-column:2;max-width:none;margin:0}
  body[data-layout="cine-kompakt"] .pb-band{justify-content:flex-start}
}

/* Deckungshorizont: Icon-Variante */
body[data-layout="cine-kompakt"] .hz-iclist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
body[data-layout="cine-kompakt"] .hz-ic{display:flex;gap:12px;align-items:center;min-width:0;padding-left:0}
body[data-layout="cine-kompakt"] .hz-ic:before{display:none}
body[data-layout="cine-kompakt"] .hz-disc{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
body[data-layout="cine-kompakt"] .hz-disc svg{width:23px;height:23px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body[data-layout="cine-kompakt"] .hz-in .hz-disc{background:var(--accent)}
body[data-layout="cine-kompakt"] .hz-in .hz-disc svg{stroke:#fff}
body[data-layout="cine-kompakt"] .hz-out .hz-disc{background:#fff;outline:1px solid color-mix(in srgb,var(--accent) 30%,#fff)}
body[data-layout="cine-kompakt"] .hz-out .hz-disc svg{stroke:var(--accent-ink)}
body[data-layout="cine-kompakt"] .hz-tx{min-width:0}
body[data-layout="cine-kompakt"] .hz-tx b{display:block;font-size:13.5px;line-height:1.3;color:var(--ink);font-weight:600;overflow-wrap:break-word;hyphens:auto}
body[data-layout="cine-kompakt"] .hz-tx span{display:block;font-size:12px;line-height:1.45;color:var(--grey);margin-top:2px;overflow-wrap:break-word;hyphens:auto}
@media(max-width:480px){body[data-layout="cine-kompakt"] .hz-iclist{grid-template-columns:1fr}}

/* ---------- Reduced Motion: jede Grafik sofort im Endzustand ---------- */
@media(prefers-reduced-motion:reduce){
  body[data-layout="cine-kompakt"] .st-karte,body[data-layout="cine-kompakt"] .hz-zone,
  body[data-layout="cine-kompakt"] .wk-branch,
  body[data-layout="cine-kompakt"] .gfx-duo tbody tr,
  body[data-layout="cine-kompakt"] .zw-item,body[data-layout="cine-kompakt"] .sl-col,
  body[data-layout="cine-kompakt"] .pb-phase,
  body[data-layout="cine-kompakt"] .kz-derivation,
  body[data-layout="cine-kompakt"] .ku-item,body[data-layout="cine-kompakt"] .ku-slice{opacity:1!important;transform:none!important;transition:none!important}
  body[data-layout="cine-kompakt"] .kr-node{opacity:1!important;transition:none!important}
  body[data-layout="cine-kompakt"] .wk-ast{stroke-dashoffset:0!important;transition:none!important}
  /* Zeitachse figur-verankert, siehe den Archetyp-Block: gilt auch auf
     Inhaltsseiten ohne data-layout. stroke-dasharray:none loest die
     Zeichen-Mechanik vollstaendig, nicht nur den Endstand. */
  .gfx-zeit .zt-marks li{opacity:1!important;transform:none!important;transition:none!important}
  .gfx-zeit .zt-line{stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important}
  .gfx-zeit .zt-dot,.gfx-zeit .zt-gap{opacity:1!important;transition:none!important}
  .gfx-chevron .cv-card,.gfx-chevron .cv-when,.gfx-chevron .cv-card p{opacity:1!important;transform:none!important;transition:none!important}
  .gfx-chevron .cv-card::after{display:none!important}
}

/* ---------- Tarifcheck: kompakter Vergleichsblock (Konzept 2026-07-21) ----------
   Loest den ausufernden Tarifcheck des aufgeloesten Fachdossiers ab. Bewusst
   schlicht: eine Definitionsliste mit Haarlinie, keine Karten, keine Nummern.
   Der Block soll informieren, ohne die Seite optisch schwerer zu machen. */
body[data-layout="cine-kompakt"] .tarifcheck{max-width:var(--pk-maxw,1040px);margin:0;
  display:grid;gap:0}
body[data-layout="cine-kompakt"] .tc-punkt{display:grid;
  grid-template-columns:minmax(150px,.32fr) minmax(0,1fr);
  gap:6px clamp(18px,2.6vw,40px);
  padding:clamp(12px,1.7vw,20px) 0;border-top:1px solid var(--line-soft)}
body[data-layout="cine-kompakt"] .tc-punkt:last-child{border-bottom:1px solid var(--line-soft)}
body[data-layout="cine-kompakt"] .tc-punkt dt{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(16px,1.35vw,18.5px);color:var(--accent-ink);line-height:1.3;margin:0}
body[data-layout="cine-kompakt"] .tc-punkt dd{margin:0;color:var(--grey);
  font-size:clamp(15px,1.15vw,16.5px);line-height:1.62;max-width:62ch}
@media(max-width:700px){
  body[data-layout="cine-kompakt"] .tc-punkt{grid-template-columns:1fr;gap:4px}
}

/* ---------------------------------------------------------------- Impressum-Karte
   Kompakte Label/Wert-Darstellung fuer die Pflichtangaben (recht/impressum.html).
   Ersetzt die frueheren vielen leeren Einzelsektionen. */
.imp{max-width:820px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);overflow:hidden}
.imp-grp{padding:22px 30px;border-top:1px solid var(--line-soft)}
.imp-grp:first-child{border-top:0}
.imp-grp>h3{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent-ink)}
.imp dl{margin:0}
.imp dl>div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:6px 28px;
  padding:11px 0;border-top:1px solid var(--line-soft)}
.imp dl>div:first-child{border-top:0;padding-top:2px}
.imp dl>div:last-child{padding-bottom:2px}
.imp dt{margin:0;color:var(--muted);font-size:14.5px;font-weight:600;line-height:1.5;overflow-wrap:break-word}
.imp dd{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.6;overflow-wrap:anywhere}
.imp dd a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.imp dd a:hover{color:var(--accent-deep)}
.imp dd ul.checks{margin:0;list-style:none;padding:0;display:grid;gap:6px}
/* Hier stand .imp dd ul.checks li{padding:0}. Das war der Fund vom 25.07.2026: Die
   Regel nahm dem Listenpunkt die 34 px Platz fuer das Haekchen, liess ::before und
   ::after aber stehen - der 22-px-Kreis lag damit auf dem Text, bei jeder Breite von
   320 bis 1440 px. Das padding gehoert der Komponente (.checks li) und darf hier nicht
   zurueckgesetzt werden; die dichtere Optik im Impressum macht schon gap:6px eine Zeile
   weiter oben. Wer hier wieder padding setzt, muss die Haekchen mit abschalten. */
/* [ZU KLAEREN]/[ZU PRUEFEN]-Marker, ueberall sichtbar. Stand bis zum
   28.07.2026 zweimal wortgleich da, einmal als .imp .todo und einmal als
   .lcard .todo, also nur auf Impressum und Rechtsseiten. Die Schadenseite
   braucht sie auch, und ein drittes Duplikat waere das falsche Mittel.
   Die Deklarationen sind unveraendert; es konkurriert kein Selektor um
   .todo, deshalb rechnet sich fuer .imp und .lcard dasselbe Ergebnis. */
.todo{display:inline;background:var(--accent-soft);color:var(--accent-deep);
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  border-radius:6px;padding:1px 8px;font-size:13.5px;line-height:1.5}
@media(max-width:640px){
  .imp-grp{padding:18px 18px}
  .imp dl>div{grid-template-columns:1fr;gap:3px 0;padding:10px 0}
  .imp dt{font-size:13px;color:var(--grey)}
  .imp dd{font-size:15px}
}

/* Kompakter Cine-Hero fuer Inhaltsseiten (Rechtstexte u. a.): niedriger als die
   Welten-Heros, ohne Vertrauensleiste. Spezifitaet .hero-cine.hc-compact schlaegt
   die generischen .hero-cine / .hc-inner Regeln (auch in der 981px-Media-Query). */
/* Der Vorspann der kompakten Cine-Heros steht ueber dem Foto. Nachgemessen auf
   /kontakt.html bei 375 px: 3,96:1 mit #E7EFF6, gefordert 4,5:1 -- der Verlauf
   .hc-grade laeuft ab 74 Prozent Breite in die Durchsichtigkeit, und bei schmalen
   Fenstern steht der Text genau dort. Voller Weisston und ein zweiter, senkrechter
   Verlauf, der die untere Haelfte abdunkelt, in der der Text liegt. Nur fuer die
   kompakte Fassung; die Welten-Heros sind unberuehrt. */
.hero-cine.hc-compact .hc-grade{background:
  linear-gradient(94deg, color-mix(in srgb,var(--accent) 32%,rgba(4,22,38,.90)) 0%, color-mix(in srgb,var(--accent) 14%,rgba(4,22,38,.62)) 34%, rgba(4,22,38,.26) 62%, rgba(4,22,38,.12) 100%),
  linear-gradient(0deg, rgba(4,22,38,.58) 0%, rgba(4,22,38,.24) 46%, transparent 78%)}
.hero-cine.hc-compact .lead{color:#fff}
/* Haekchen unter der h1 im Cine-Hero (Depotseite, 11.09.2026). Weisse Schrift
   wie der Lead darunter, dasselbe Rund-Haekchen wie .checks, fuer den dunklen
   Grund umgefaerbt: weisser Haken auf halbtransparentem Kreis. */
.hero-haken{list-style:none;display:grid;gap:8px;margin:16px 0 0;padding:0}
.hero-haken li{position:relative;padding-left:30px;color:#fff;font-weight:600;line-height:1.4;
  text-shadow:0 1px 16px rgba(3,18,32,.45)}
.hero-haken li:before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:rgba(255,255,255,.22)}
.hero-haken li:after{content:"";position:absolute;left:7px;top:5px;width:6px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.hero-cine.hc-compact{min-height:clamp(300px,44vh,460px)}
.hero-cine.hc-compact .hc-inner{padding-top:52px;padding-bottom:60px}
.hero-cine.hc-compact h1{font-size:clamp(32px,4.4vw,58px);max-width:18ch}
.hero-cine.hc-compact .hc-fade{height:70px}
@media(min-width:981px){
  .hero-cine.hc-compact{min-height:clamp(360px,50vh,500px)}
  .hero-cine.hc-compact .hc-inner{padding-top:72px;padding-bottom:84px}
}

/* ---------- hc-split: Text und Bild getrennt, nur auf schmalen Schirmen ----------
   Modifikator zum Cine-Hero, seit 30.08.2026, opt-in ueber das Feld
   `trennung` in den Seitendaten. Heute traegt ihn genau eine Seite:
   /ueber-uns/team.html. Alle anderen Seitenkoepfe sind unberuehrt -- jede
   Regel hier ist an .hc-split gebunden und steht in der Schmal-Abfrage.

   **Der Anlass.** Der Hero der Teamseite zeigt seit dem Kollagen-Einbau
   sechs echte Gesichter. Im gewohnten Aufbau liegen Kennzeile, Ueberschrift
   und Vorspann ueber dem Foto; auf dem Telefon ist der Hero schmal, der Text
   umbricht auf vier bis fuenf Zeilen und deckt genau die Bildmitte ab, in der
   die Leute stehen. Auf dem Desktop ist das kein Problem: Dort ist Platz
   links neben der Gruppe, und dafuer sitzt der Bildausschnitt bei 66 % / 42 %.
   Die Trennung gilt deshalb nur unterhalb von 760 px -- derselben Grenze, an
   der der Cine-Hero ohnehin linear stapelt und an der die <source media> des
   Generators die Telefon-Kollage waehlt (HERO_MOBIL_GRENZE in
   tools/generate_site.py). Zwei Zahlen, ein Wert; eine Wache haelt sie zusammen.

   **Warum flex mit order und nicht einfach display:block.** Im Markup steht
   das Bild (.hc-bg) VOR dem Text (.hc-inner) -- so muss es sein, solange der
   Text darueberliegt. Fuer die Trennung soll der Text oben stehen. Die
   Reihenfolge im Markup umzudrehen haette jeden anderen Cine-Hero betroffen;
   `order` dreht sie nur hier und nur unterhalb der Grenze um.

   **Zur Gestaltung.** Nichts Neues erfunden: Der Textblock steht auf der
   Grundfarbe, die die Sektion ohnehin schon traegt (#05203A aus .hero-cine),
   und behaelt Schriftgroessen, Abstaende und Farben des Bestands.

   Am gerenderten Bild nachgemessen (375 und 414 px, gleiches Ergebnis; die
   Deckkraft der Kennzeile ist dabei gegen den Grund verrechnet, denn sie
   wirkt erst beim Malen):

     Ueberschrift  #fff auf rgb(5,32,58), 32 px/600     16,48:1
     Vorspann      #fff auf rgb(5,32,58), 16,5 px/400   16,48:1
     Kennzeile     #fff bei opacity .92, 12,5 px/600    14,06:1

   Alle drei weit ueber den geforderten 4,5:1 und **besser** als vorher, wo
   derselbe Text ueber dem Foto stand und dort auf die drei Verlaufsebenen
   angewiesen war. Der gemessene Grund bestaetigt zugleich den Aufbau: Hinter
   dem Text liegt die Sektionsfarbe und nicht mehr das Bild.

   **Verlauf, Korn und Fade sind hier aus.** Sie sind absolut ueber die ganze
   Sektion gelegt und dafuer da, Text auf einem Foto lesbar zu machen. Steht
   kein Text auf dem Foto, verdunkeln sie nur noch die Gesichter. */
@media(max-width:760px){
  .hero-cine.hc-split{display:flex;flex-direction:column;min-height:0}
  .hero-cine.hc-split .hc-inner{order:1;padding-top:40px;padding-bottom:32px}
  .hero-cine.hc-split .hc-bg{order:2;position:relative;inset:auto}
  /* height:auto statt der 100 % aus .hc-bg img: Das Bild bekommt damit exakt
     sein eigenes Seitenverhaeltnis (2752:1536) und wird an keiner Kante
     beschnitten. object-fit spielt dann keine Rolle mehr -- die Box ist so
     hoch, wie das Bild es vorgibt. Das ist die Zusage aus dem Auftrag:
     niemand wird abgeschnitten. */
  .hero-cine.hc-split .hc-bg img{height:auto;display:block}
  .hero-cine.hc-split .hc-grade,
  .hero-cine.hc-split .hc-grain,
  .hero-cine.hc-split .hc-fade{display:none}
  /* Der Vorspann traegt im Bestand 30 px Abstand nach unten fuer die
     Knopfreihe, die es hier nicht gibt. Ohne die Ruecknahme klaffte zwischen
     Text und Bildband eine Luecke, die nichts traegt. */
  .hero-cine.hc-split .hc-text .lead{margin-bottom:0}
}

/* ---------- Kartendesign fuer Rechtsseiten (Impressum, Datenschutz, Erst-
   information, Haftungsausschluss, Nachhaltigkeitsinformationen) ----------
   Jeder Abschnitt sitzt als eigenstaendige Karte auf ruhiger, leicht getoenter
   Flaeche. Ersetzt die frueheren schlichten section.tight-Baender. */
section.legal{background:var(--tint);padding:clamp(40px,6vw,72px) 0}
.legal-stack{max-width:940px;margin:0 auto;display:grid;gap:22px}
/* Dieselbe Rasterfalle wie bei den Produktkarten und den Textlisten (Commits 0a3c153
   und 57ade65), hier in den Rechtstexten. Die Karten sind Rasterfelder mit
   min-width:auto, also bestimmt der laengste unteilbare Ausdruck die Spalte: gemessen
   auf der Erstinformation bei 320 px eine Spalte von 350,6 px in einem 280 px breiten
   Bereich, ausgeloest von einer E-Mail-Adresse. Der Ueberstand betrug 56 px und ist
   vorbestehend; die Browser-Suite prueft keine Rechtstextseite auf Ueberlauf. */
.legal-stack>*{min-width:0}
.lcard{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:clamp(22px,3.4vw,34px) clamp(20px,3.6vw,38px);
  scroll-margin-top:clamp(96px,14vw,152px)}
.lcard-head{margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.lcard-head h2{margin:0;font-size:clamp(20px,2.1vw,25px);line-height:1.25;color:var(--ink);
  display:flex;align-items:baseline;gap:12px}
.lcard-head h2:before{content:"";flex:none;align-self:center;width:8px;height:8px;border-radius:2px;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  box-shadow:0 0 0 4px var(--accent-soft)}
.lcard-body{color:var(--ink-2)}
.lcard-body>p:first-child{margin-top:0}
.lcard-body>p:last-child{margin-bottom:0}
.lcard-body .ds-body{max-width:none}
.lcard-body .checks{margin:0}

/* Inhaltsverzeichnis-Karte (Datenschutz): dezent hervorgehoben. */
.lcard--toc{background:linear-gradient(180deg,var(--accent-soft2),#fff);
  border-color:color-mix(in srgb,var(--accent) 20%,var(--line))}
.lcard--toc .lcard-head{border-bottom-color:color-mix(in srgb,var(--accent) 16%,var(--line-soft))}

/* Impressum: die Pflichtangaben-Tabelle (.imp) fuellt die Karte, ohne eigene
   Rahmen/Schatten zu doppeln. */
.lcard .imp{max-width:none;border:0;border-radius:0;box-shadow:none;background:transparent}
.lcard .imp-grp{padding-left:0;padding-right:0}
.lcard .imp-grp:first-child{padding-top:0}
.lcard .imp-grp:last-child{padding-bottom:0}

@media(max-width:560px){
  .lcard-head h2{gap:10px}
  .lcard .imp dl>div{grid-template-columns:1fr}
}

/* -------- Kontaktseite: Angaben in Zeilen + Formular nebeneinander -------- */
.kontakt-grid{display:grid;grid-template-columns:0.82fr 1.18fr;gap:44px;align-items:start;text-align:left}
.kontakt-info{display:grid}
/* Zweiter Teil von Fund UE1, vom Auditor nachgemessen: 2 px Ueberstand des
   Kontaktrasters bei 320 px. Dieselbe Familie wie B1/B2, nur zwei Ebenen tiefer
   verschachtelt. Die Wertespalte ist 1fr, also minmax(auto,1fr), und erbt als
   Untergrenze den min-content ihres Inhalts: Die Oeffnungszeiten-Zeile braucht
   32 px Tag + 12 px Luft + 126 px fuer "8:00-15:30 Uhr" = 170 px, zur Verfuegung
   stehen bei 320 px aber nur 148 px. minmax(0,1fr) gibt die Entscheidung an das
   Raster zurueck; die Uhrzeit bricht dann vor "Uhr" um, statt die ganze Spalte
   aufzuweiten. Ab 375 px passt die Zeile ohnehin, dort aendert sich nichts. */
.kontakt-info .ki-row{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;padding:13px 0;
  border-top:1px solid var(--line);align-items:start}
.kontakt-info .ki-row:first-child{border-top:0;padding-top:0}
.kontakt-info .ki-label{font-family:var(--font-sans);font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);padding-top:3px}
.kontakt-info .ki-val{color:var(--ink-2);line-height:1.65}
.kontakt-info .ki-val a{color:var(--accent-ink);font-weight:600}
.kontakt-info .ki-hours{display:grid;gap:6px}
.kontakt-info .ki-h{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px}
.kontakt-info .ki-day{font-weight:700;color:var(--ink)}
/* Die Team-Zeile am Fuss der Angabenspalte (31.08.2026, Conversion-Pruefung).
   Sie setzt die Zeilenfolge der .ki-row fort -- selbe Trennlinie, selber
   Abstand -- ist aber bewusst leiser gesetzt: kein Label in Versalien, sondern
   Fließtext in der Groesse des .kontakt-hint darunter. Ein Knopf waere hier
   der zweite Aufruf neben dem Formular. */
.kontakt-info .ki-team{margin:0;padding-top:13px;border-top:1px solid var(--line);
  font-size:14px;color:var(--grey)}
.kontakt-info .ki-team a{color:var(--accent-ink);font-weight:600}
/* Die leise Zeile hinter der Tippliste (31.08.2026). Sie sitzt im selben
   Kasten, abgesetzt durch eine Trennlinie, und ist kleiner und stiller
   gesetzt als die Tipps darueber: eine Frage, kein Angebot. */
.tipbox .tip-frage{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--grey);line-height:1.6}
.tipbox .tip-frage a{color:var(--accent-ink);font-weight:600}
/* Die Nebenzeile unter der Knopfreihe des CTA-Bands (31.08.2026).
   Sie steht ausserhalb des Bandrasters, zentriert und deutlich leiser als
   die Knoepfe: ein zweiter Weg, kein zweiter Aufruf. Auf schmalen Schirmen
   bricht sie in zwei Zeilen um; der Linktext bleibt dabei zusammen. */
.cta-band .cta-neben{margin:18px auto 0;max-width:var(--maxw);padding:0 28px;
  text-align:center;font-size:14.5px;color:var(--grey);line-height:1.6}
.cta-band .cta-neben a{margin-left:8px;color:var(--accent-ink);font-weight:600;
  white-space:nowrap}
.kontakt-hint{margin-top:20px;font-size:14px;color:var(--grey)}
.kontakt-hint a{color:var(--accent-ink);font-weight:600}
.kontakt-col-form .sform{margin-top:0}
@media(max-width:820px){.kontakt-grid{grid-template-columns:1fr;gap:32px}}

/* -------- eVB / Fahrzeugschein einreichen (nicht verlinkte Seite) -------- */
.evb-intro{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:62ch;margin:0 0 22px}
.evb-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;max-width:780px}
.evb-btn{display:flex;align-items:center;gap:14px;padding:15px 20px;border-radius:14px;text-decoration:none;
  font-weight:600;min-height:64px;border:1px solid transparent;
  transition:transform .15s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.evb-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.evb-btn svg{flex:none}
.evb-btn-tx{display:flex;flex-direction:column;line-height:1.25;font-size:17px}
/* A11y-2 (25.07.2026): opacity:.8 verduennte den Text auf 4,13:1 (WhatsApp) und
   3,45:1 (E-Mail) - beides unter 4,5:1. Ohne die Abschwaechung sind es 6,21:1 und
   4,95:1. Die Zeile bleibt durch Groesse, Versalien und Sperrung untergeordnet, sie
   braucht dafuer keine Transparenz. */
.evb-btn-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.evb-wa{background:#25D366;color:#0B3D22}
.evb-wa:hover{background:#28e070}
.evb-mail{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 22%,transparent)}
.evb-mail:hover{background:color-mix(in srgb,var(--accent) 14%,var(--accent-soft))}
.evb-warn{display:flex;gap:16px;align-items:flex-start;background:#FEF6E7;border:1px solid #F3D28A;
  border-left:4px solid #E4A200;border-radius:14px;padding:20px 22px;max-width:780px;margin:0 0 22px}
.evb-warn-ic{flex:none;color:#B77400;margin-top:1px}
.evb-warn-tx p{color:var(--ink-2);line-height:1.6;margin:0}
.evb-warn-tx p+p{margin-top:10px}
.evb-warn-tx strong{color:var(--ink)}
.evb-gruss{margin-top:16px;color:var(--ink-2);line-height:1.7}
@media(max-width:560px){.evb-actions{grid-template-columns:1fr}}

/* -------- Schadenmeldeformular (Entwurf, mailto) --------
   Feldstil an .hsearch/Design-Tokens angelehnt. 46px-Ziele, sichtbare Fokusringe
   (var(--ring)), Kontrast >=4,5:1. Fehlerfarbe #B42318 (auf Weiss AA). */
.sform{max-width:760px;margin-top:6px}
.sform-lead{color:var(--grey);font-size:16px;line-height:1.55;margin:0 0 22px;max-width:64ch}
.sform-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.sfield{margin:0 0 18px;display:flex;flex-direction:column;gap:7px}
.sform-grid .sfield{margin:0}
.sfield label{font-size:14px;font-weight:600;color:var(--ink-2)}
.sf-req{color:#B42318}
.sf-opt{font-weight:400;color:var(--muted);font-size:12px}
.sform input,.sform textarea{font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-sm);padding:12px 14px;width:100%;min-height:46px}
.sform textarea{min-height:136px;resize:vertical;line-height:1.5}
.sform input:focus-visible,.sform textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.sform input.sf-invalid,.sform textarea.sf-invalid{border-color:#B42318;box-shadow:0 0 0 3px rgba(180,35,24,.16)}
/* Auswahlfelder (Dropdowns) im gleichen Feldstil, mit eigenem Pfeil */
.sform .sf-select{position:relative;display:block}
.sform select{font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-sm);padding:12px 40px 12px 14px;width:100%;min-height:46px;cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none}
.sform select:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.sform .sf-select::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;pointer-events:none;
  transform:translateY(-65%) rotate(45deg);border-right:2px solid var(--muted);border-bottom:2px solid var(--muted)}
.sfield-check{flex-direction:row;align-items:flex-start;gap:12px;background:var(--tint);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:14px 16px}
.sfield-check input{width:22px;height:22px;min-height:22px;flex:none;margin-top:2px;accent-color:var(--accent)}
.sfield-check.sf-invalid{border-color:#B42318}
.sfield-check label{font-weight:400;font-size:14px;color:var(--ink-2);line-height:1.5}
.sform-note{font-size:13px;color:var(--muted);line-height:1.5;margin:14px 0 0;max-width:64ch}
.sform-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* Herkunfts-Thema der Kontaktseite (06.09.2026). Der Block steht nur da, wenn
   der Besucher von einer Produkt-, Welt- oder Ratgeberseite kommt; ohne
   Herkunft traegt er den Inline-Stil display:none aus dem Markup und die
   Seite sieht aus wie zuvor. Inline-Stil und nicht [hidden], weil die Zeile
   mit dem Entfernen-Knopf .sform-actions ist und deren display:flex gegen
   das Browser-[hidden] gewinnt (aktenkundig seit 05.08.2026). */
.kf-thema{background:var(--accent-soft2);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:16px 18px 18px;margin:0 0 22px}
.kf-thema-stand{margin:0 0 14px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.kf-thema-stand strong{color:var(--ink)}
.kf-thema .sfield{margin:0}
/* Die Notiz steht hier auf getoenter Flaeche, nicht auf Weiss: --muted
   erreicht auf --accent-soft2 nur 4,37:1 (axe, 1280 px, Zustand "mit
   Thema"), --grey erreicht 5,66:1. Eine Stufe dunkler statt eine hellere
   Flaeche, damit der Block als eigener Kasten lesbar bleibt. */
.kf-thema .sform-note{margin-top:12px;color:var(--grey)}
.kf-thema .sform-actions{margin-top:14px}
/* Die Pills im Formular duerfen umbrechen: In schmalen Kaesten (Sendeblock
   des Hausrat-Bogens bei 320 px) ragte "Lieber anrufen: 0391 73 33 99 0"
   sonst 8 px ueber den Rand (Browser-Suite, 22.08.2026). */
.sform-actions .pill{white-space:normal;text-align:center}
.sform-status{margin:16px 0 0;font-size:14px;font-weight:600;min-height:1.2em}
.sform-status.is-error{color:#B42318}
.sform-status.is-ok{color:var(--accent-deep)}
@media(max-width:640px){.sform-grid{grid-template-columns:1fr;gap:0}}
/* Formular-Gateway (22.08.2026). .sf-hp ist der Honeypot: fuer Menschen und
   Hilfstechnik unsichtbar (aria-hidden, tabindex=-1 im Markup), fuer Automaten
   ein Feld wie jedes andere. .sf-nur-ohne-js zeigt ein Feld nur, wenn kein
   Skript laeuft (html.js fehlt). .sform-danke ersetzt das Formular nach dem
   Versand. */
.sf-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
html.js .sf-nur-ohne-js{display:none}
.sform-danke{background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:22px 24px;max-width:760px;margin-top:6px}
.sform-danke h3{margin:0 0 8px;font-size:20px}
.sform-danke p{margin:0;color:var(--ink-2);line-height:1.55}
.sform-stand{font-size:14px;color:var(--grey);line-height:1.5;margin:0 0 16px;max-width:64ch}
.sform-status a{color:var(--accent-ink);text-decoration:underline}
.sform-antwort{max-width:760px}
.sform-antwort h1{font-size:clamp(28px,4vw,36px);margin-bottom:14px}
.sform-antwort dl div{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:6px 16px;padding:8px 0;border-bottom:1px solid var(--line)}
.sform-antwort dt{font-weight:600;color:var(--ink-2)}
.sform-antwort dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
/* -------- Schadenformular nach dem VHV-Prinzip, /schaden-melden.html (22.08.2026) --------
   Ohne Skript: sechs Stationen untereinander, jede mit ihren Fragen. Mit Skript
   (.sm-gefuehrt) eine Frage zur Zeit, Fortschrittsleiste oben. Ein- und
   Ausblenden ueber das hidden-Attribut, ohne Bewegung (reduced motion braucht
   hier keine Ausnahme). Piktogramme aus icons.svg in der Weltfarbe. */
/* Mittig im Inhaltsbereich (Entscheidung Maik, 22.08.2026): Formularstrecke,
   Vorab-Hinweis, Intro, Fortschrittsleiste und jede Frage sitzen auf der
   Mittelachse; das gilt in allen Schritten und Breiten. */
.sm-form{max-width:860px;margin-left:auto;margin-right:auto}
.sm-form .sm-intro-text,.sm-form .sm-hilfe,.sm-form .sform-note,.sm-form .sform-lead{margin-left:auto;margin-right:auto}
.sm-form .sm-intro-titel,.sm-form .sm-intro-text,.sm-form .sm-stand,.sm-form .sm-f-titel,.sm-form .sm-gruppe,.sm-form .sm-st-titel{text-align:center}
.sm-form .sm-frage>.sm-hilfe{text-align:center}
.sm-form .sm-nav,.sm-form .sm-intro-start,.sm-form .sm-antworten,.sm-form .sform-actions{justify-content:center}
.sm-form .sform-lead{text-align:center}
.sm-vorab{background:#FFF4E0;border:1px solid #F0C777;border-radius:var(--r-sm);padding:12px 16px;
  font-size:14px;color:var(--ink-2);line-height:1.5;margin:0 auto 22px;max-width:860px}
.sm-intro-titel{font-size:clamp(22px,3vw,28px);margin:0 0 10px}
.sm-intro-text{color:var(--ink-2);font-size:16px;line-height:1.6;max-width:64ch;margin:0 0 6px}
.sm-vorbereitung{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sm-vorb{display:flex;flex-direction:column;gap:8px;background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:18px 16px}
.sm-vorb-icon{color:var(--accent);display:block}
.sm-vorb-icon .ic{width:36px;height:36px}
.sm-vorb-titel{font-weight:700;color:var(--ink);font-size:16px}
.sm-vorb-text{font-size:14px;color:var(--ink-2);line-height:1.5}
.sm-intro-start{margin-top:22px}
/* Die Einheit (Ansage Maik, 22.08.2026): Fortschritt, Frage und Knoepfe sind
   eine geschlossene Karte. Kartenkopf = Fortschrittsanzeige (im Fluss, nichts
   ist fest ausser der Site-Kopfzeile). */
.sm-fortschritt{list-style:none;margin:0;padding:8px 16px 6px;position:sticky;top:var(--sm-kopf,0px);z-index:3;border-radius:14px 14px 0 0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  background:var(--tint);border-bottom:1px solid var(--line)}
.sm-gefuehrt{border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:18px;background:#fff;
  box-shadow:0 18px 40px -30px rgba(7,58,82,.35);overflow:visible;padding:0}
/* Kein overflow an der Karte und am body: sonst haftet der Kartenkopf nicht. */
body.sm-seite{overflow:visible}
.sm-vorhang{height:0}
.sm-gefuehrt .sform-lead{padding:18px 24px 0}
/* Der Vorspann steht ueber der Karte (das Skript hebt ihn heraus), damit die
   Karte aus Fortschritt, Frage und Knoepfen ins Bild passt. */
.sm-lead-aussen{max-width:860px;margin:0 auto 14px;text-align:center}
/* Seitenkopf: Titel und Einleitungssatz als ein Kopf ueber der Karte, gleiche
   Achse wie die Karte, zentriert zueinander. */
body.sm-seite #formular .section-head{max-width:860px;margin:0 auto 10px;text-align:center}
body.sm-seite #formular .section-head h2{margin-bottom:0}
.sm-gefuehrt .sm-stand{padding:10px 24px 0;margin:0}
/* Ab Tablet zeigt der Kartenkopf die Stationen; die Schrittzeile bleibt fuer Vorleser. */
@media(min-width:641px){.sm-gefuehrt .sm-stand{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
.sm-gefuehrt [data-intro]{padding:18px 24px 24px}
.sm-gefuehrt .sm-station{margin:0;padding:0}
/* Sicht Maik 22.08.2026: Feldschritte einspaltig im Kartenfluss. Je Feld die
   Zeile Label plus ?-Knopf, darunter das Feld in Kartenbreite; kurze Felder
   (Betraege, Datum, Uhrzeit) schmaler, aber linksbuendig im Fluss. */
.sm-gefuehrt .sform-grid{display:block}
.sm-gefuehrt .sform-grid .sfield,.sm-gefuehrt .sform-grid .sm-janein{margin:0 0 16px}
.sm-gefuehrt .sform-grid>:last-child{margin-bottom:0}
.sm-gefuehrt .sfield input[inputmode="decimal"],.sm-gefuehrt .sfield input[type="date"],.sm-gefuehrt .sfield input[type="time"],.sm-gefuehrt .sfield input[inputmode="numeric"]{max-width:280px}
.sm-gefuehrt .sm-zaehler{margin-top:4px}
.sm-gefuehrt .sm-frage{border:0;border-radius:0;margin:0;padding:20px 24px 22px}
.sm-gefuehrt .sm-stopp{border:0;border-radius:0;margin:0;padding:22px 24px}
.sm-gefuehrt .sm-zweit-li .sm-zweitebene{border:1px solid var(--line);border-radius:14px}
.sm-gefuehrt .sm-sparte-gesperrt .sm-frage{background:var(--tint)}
.sm-fortschritt[hidden]{display:none}
.sm-fs{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);border-top:3px solid var(--line);padding-top:0;min-width:0}
.sm-fs-knopf{display:flex;flex-direction:column;gap:2px;width:100%;min-height:44px;padding:6px 4px;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:default;border-radius:6px;min-width:0}
.sm-fs-knopf:not(:disabled){cursor:pointer}
.sm-fs-knopf:not(:disabled):hover{background:var(--tint)}
.sm-fs-knopf:focus-visible{outline:none;box-shadow:var(--ring)}
.sm-fs-nr{font-weight:700;font-size:12px}
.sm-fs-titel{line-height:1.3;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-fs.is-fertig{border-top-color:var(--accent);color:var(--ink-2)}
.sm-fs.is-aktuell{border-top-color:var(--accent);color:var(--accent-ink);font-weight:700}
.sm-stand{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px;min-height:1.2em}
.sm-station{margin:0 0 26px}
.sm-st-titel{font-size:22px;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.sm-st-titel .sm-nr{display:none}
.sm-frage{border:1px solid var(--line);border-radius:16px;padding:22px 24px 24px;margin:0 0 18px;min-width:0}
.sm-gefuehrt .sm-frage{padding:12px 28px 14px}
.sm-gefuehrt .sform-note,.sm-gefuehrt .sm-hilfe{max-width:none}
.sm-f-titel{font-family:var(--display,inherit);font-size:clamp(22px,3.2vw,30px);line-height:1.2;margin:0 0 8px;color:var(--ink)}
.sm-f-titel:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}
/* Der Fokus-Sprung beim Schrittwechsel bleibt (Vorleser), zeichnet aber keinen
   Rahmen; erst eine Taste holt den Rahmen zurueck (Skript entfernt data-fokus). */
.sm-f-titel[data-fokus="auto"]:focus-visible{box-shadow:none}
.sm-hilfe{color:var(--grey);font-size:16px;line-height:1.55;margin:0 0 8px;max-width:64ch}
.sm-gruppe{font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);margin:18px 0 10px}
.sm-piktos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.sm-pikto-li{min-width:0}
.sm-pikto-input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sm-pikto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;height:100%;
  padding:16px 10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;text-align:center;
  color:var(--ink-2);font-size:13px;font-weight:600;line-height:1.3}
.sm-pikto-ic{width:40px;height:40px;color:var(--accent)}
/* Versuchsfassung Foto-Kacheln (Schalter schaden_online.KACHELN): Motiv der
   Finder-Serie oben, Beschriftung darunter; gewaehlt mit Akzentrahmen. */
.sm-pikto-foto{padding:0 0 8px;gap:6px;justify-content:flex-start;overflow:hidden}
.sm-pikto-bild{display:block;width:100%;background:var(--tint)}
.sm-pikto-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px 12px 0 0}
.sm-pikto-foto .sm-pikto-tx{padding:0 8px}
.sm-pikto:hover{border-color:var(--accent);background:var(--tint)}
.sm-pikto-input:focus-visible+.sm-pikto{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.sm-pikto-input:checked+.sm-pikto{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.sm-pikto-li.sf-invalid .sm-pikto{border-color:#B42318}
.sm-gruppen{grid-template-columns:repeat(4,1fr)}
.sm-pikto-sub{display:block;font-weight:400;font-size:12px;color:var(--grey);line-height:1.4;padding:0 8px}
.sm-pikto-input:checked+.sm-pikto .sm-pikto-sub,.sm-thema[aria-pressed="true"] .sm-pikto-sub{color:var(--ink-2)}
.sm-gruppen .sm-pikto-bild img{aspect-ratio:4/3;object-fit:cover;object-position:70% 45%}
.sm-pikto-li[hidden]{display:none}
.sm-zweit-li{grid-column:1/-1}
/* Chips: die zusammengeklappte vorige Ebene (Thema, Ursache) mit "aendern". */
.sm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.sm-chips[hidden]{display:none}
.sm-chip{display:inline-flex;align-items:center;gap:8px;padding:0 0 0 12px;border:1px solid var(--accent);border-radius:999px;background:var(--accent-soft);font-size:14px;font-weight:600;color:var(--ink);max-width:100%}
.sm-chip-tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-chip-aendern{border:0;background:#fff;border-radius:999px;padding:0 12px;min-height:44px;min-width:44px;font:inherit;font-size:13px;font-weight:600;color:var(--accent-ink);cursor:pointer}
.sm-chip-aendern:hover{background:var(--tint)}
.sm-chip-aendern:focus-visible{outline:none;box-shadow:var(--ring)}
.sm-piktos.sm-eingeklappt>li:not(.sm-zweit-li){display:none}
.sm-zweit-li.sm-zweit-wartet{display:none}
.sm-zweit-li[hidden]{display:none}
.sm-zweitebene{background:var(--tint)}
.sm-gefuehrt .sm-zweit-li .sm-zweitebene{margin:0;padding:18px 20px}
.sm-zweitebene .sm-f-titel{font-size:19px}
.sm-radios{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.sm-radio{margin:0}
.sm-radio input{border-radius:50%}
.sm-radio[hidden]{display:none}
.sm-janein{border:0;padding:0;margin:0 0 18px;min-width:0}
.sm-janein legend{font-size:16px;font-weight:600;color:var(--ink-2);margin-bottom:10px;padding:0}
.sm-antworten{display:flex;flex-wrap:wrap;gap:10px}
.sm-antwort{position:relative;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:1.5px solid var(--line);
  border-radius:999px;background:#fff;cursor:pointer;font-weight:600;color:var(--ink-2);font-size:15px}
.sm-antwort input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sm-antwort:hover{border-color:var(--accent)}
.sm-antwort input:focus-visible+span{outline:none}
.sm-antwort:has(input:focus-visible){border-color:var(--accent);box-shadow:var(--ring)}
.sm-antwort:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.sm-janein.sf-invalid .sm-antwort{border-color:#B42318}
.sm-wenn[hidden],.sm-kategorie[hidden]{display:none}
.sm-wenn{margin-top:14px}
.sm-kategorie{margin-bottom:14px}
.sm-zaehler{display:block;font-size:12px;color:var(--muted);text-align:right;margin-top:4px}
.sm-sparte[hidden]{display:none}
.sm-sparte-gesperrt .sm-frage,.sm-stopp{background:var(--tint)}
.sm-stopp{border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:0 0 22px}
.sm-stopp h3{font-size:20px;margin:0 0 10px}
.sm-stopp p,.sm-sparte-gesperrt p{margin:0 0 10px;color:var(--ink-2);line-height:1.55}
.sm-stopp:focus-visible{outline:none;box-shadow:var(--ring)}
.sm-stopp[hidden]{display:none}
.sm-verletzt{background:#FFF4E0;border:1px solid #F0C777;border-radius:var(--r-sm);padding:10px 14px;margin:0 0 16px;max-width:none}
.sm-hergang-hinweis{margin:4px 0 8px;line-height:1.45}
.sm-upload-hinweis{margin:0 0 14px}
.sform input[type="file"]{padding:10px 12px;min-height:46px;border:1px dashed var(--hair);border-radius:var(--r-sm);background:var(--tint)}
.sform input[type="file"].sf-invalid{border-color:#B42318}
.sm-dateiliste{list-style:none;margin:12px 0 0;padding:0;font-size:14px;color:var(--ink-2)}
.sm-dateiliste li{padding:6px 0;border-bottom:1px solid var(--line)}
.sm-dateiliste:empty{display:none}
.sm-dateifehler{margin-top:10px}
.sm-zusammenfassung dl{margin:0 0 18px}
.sm-zusammenfassung dl dt{font-weight:600;color:var(--ink-2);font-size:14px;margin-top:10px}
.sm-zusammenfassung dl dd{margin:2px 0 0;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.sm-zusammenfassung dl dt:first-child{margin-top:0}
.sm-pdfweg{margin-top:16px}
.sm-pdfweg .sd-formularlink{margin-top:8px}
.sm-pdfweg-liste[hidden]{display:none}
.sm-nav{margin-top:22px}
/* Klebende Fussleiste (Entscheidung Maik, 22.08.2026): am unteren Rand in jeder
   Breite sichtbar; sie steht im Fluss am Ende des Formulars, verdeckt am
   Seitenende also nichts, und das Formular haelt darueber Platz frei. */
/* Kartenfuss: Zurueck/Weiter, Hinweiszeile, Anruf-Zeile. Im Fluss, direkt am
   Frageninhalt; zwischen Inhalt und Knoepfen liegt nie etwas anderes. */
.sm-leiste{display:flex;justify-content:center;gap:12px;padding:10px 24px 12px;margin:0;border-radius:0 0 17px 17px;
  background:var(--tint);border-top:1px solid var(--line)}
.sm-leiste[hidden],.sm-leiste .pill[hidden]{display:none}
.sm-leiste .pill{min-height:46px}
.sm-leiste{flex-direction:column-reverse;align-items:center;gap:4px}
.sm-leiste-knoepfe{display:flex;justify-content:center;gap:12px;width:100%}
.sm-anruf{margin:0;font-size:13px;color:var(--grey)}
.sm-anruf a{font-weight:700;color:var(--accent-ink)}
.sm-anruf .avail{margin-left:6px}
.sm-leiste-hinweis{margin:0;font-size:13px;font-weight:600;color:#8A6D1D;min-height:0}
.sm-leiste-hinweis:empty{display:none}
/* Ab Tablet liegt der Kartenfuss in einer Zeile: Anruf links, Hinweis und Knoepfe rechts. */
@media(min-width:641px){
  .sm-leiste{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px}
  .sm-anruf{order:1}
  .sm-leiste-hinweis{order:2;flex:1;text-align:right}
  .sm-leiste-knoepfe{order:3;width:auto}
}
.sm-weiter.is-offen{opacity:.7}
.sm-fehler{margin:-8px 0 14px;font-size:13px;color:#B42318;font-weight:600}
/* Info-Punkte als ?-Knopf im Muster der Rechner (details.av-info): 18 px
   Kreis in einem 44 px Tippziel, Popover unter dem Feld; ohne Skript klappt
   der Text im Fluss auf. */
.sm-labelzeile{display:flex;align-items:center;gap:6px;min-width:0}
.sm-form .sfield{position:relative}
.sm-janein{position:relative}
.sm-janein>legend{float:left;padding:0;margin:0 0 10px}
.sm-janein>details.sm-info{float:left;margin:-2px 0 0 6px;position:static}
.sm-janein>.sm-antworten{clear:both}
details.sm-info{display:inline-block;font-size:13px;color:var(--ink-2)}
details.sm-info>summary{list-style:none;cursor:pointer;width:44px;height:44px;margin:-13px 0;padding:0;display:inline-flex;align-items:center;justify-content:center;flex:none}
details.sm-info>summary::-webkit-details-marker{display:none}
details.sm-info>summary>span{width:18px;height:18px;border-radius:50%;border:1px solid var(--grey);color:var(--grey);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
details.sm-info>summary:hover>span{border-color:var(--accent-deep);color:var(--accent-deep)}
details.sm-info>summary:focus-visible{outline:none}
details.sm-info>summary:focus-visible>span{outline:2px solid var(--accent-ink);outline-offset:2px}
.sm-info-pop{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.55;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow-sm);overflow-wrap:anywhere}
html.js .sfield details.sm-info[open] .sm-info-pop,html.js .sm-janein details.sm-info[open] .sm-info-pop{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:4px}
.sm-themen{margin-bottom:10px}
.sm-themen[hidden]{display:none}
.sm-thema{width:100%;font:inherit}
.sm-thema[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--ink)}
.sm-gruppe[data-thema][hidden],.sm-piktos[data-thema][hidden]{display:none}
.sm-schnell{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--grey)}
.sm-schnell[hidden]{display:none}
.sm-schnell .pill{min-height:44px;padding:0 16px}
.sm-ablage{position:relative;border:2px dashed var(--hair);border-radius:14px;background:var(--tint);padding:22px 16px;text-align:center}
.sm-ablage.is-ueber{border-color:var(--accent);background:var(--accent-soft)}
.sm-ablage-label{display:block;cursor:pointer;min-height:44px}
.sm-ablage-tx{display:block;font-weight:700;color:var(--accent-ink);font-size:16px}
.sm-ablage-sub{display:block;font-size:13px;color:var(--grey);margin-top:4px}
.sm-ablage input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0;border:0;padding:0}
.sm-kamera{margin:12px 0 0;display:block}
.sm-kamera input{position:absolute;opacity:0;width:1px;height:1px}
.sm-kamera-label{cursor:pointer;display:inline-flex;align-items:center;min-height:46px}
@media(hover:hover) and (pointer:fine){.sm-kamera{display:none}}
.sm-rest{margin:12px 0 0;font-size:13px;font-weight:600;color:var(--ink-2)}
.sm-datei{display:grid;grid-template-columns:1fr auto auto;gap:6px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.sm-datei-name{overflow-wrap:anywhere;font-weight:600;color:var(--ink)}
.sm-datei-groesse{color:var(--muted);font-size:13px}
.sm-datei-fehler{grid-column:1/-1;color:#B42318;font-size:13px;font-weight:600}
.sm-datei.is-fehler .sm-datei-name{color:#B42318}
.sm-datei-weg{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2);font:inherit;font-size:13px;cursor:pointer}
.sm-datei-weg:hover{border-color:var(--accent)}
.sm-zf-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.sm-zf-kopf h4{margin:0;font-size:15px;color:var(--ink-2)}
.sm-bearbeiten{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--accent-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.sm-abschluss-kfz{background:var(--tint);border-radius:var(--r-sm);padding:10px 12px}
.sm-abschluss-entwurf{font-size:13px;color:var(--muted)}
.sm-fussnote{font-size:12px;color:var(--muted);line-height:1.4;margin:14px auto 0;text-align:center;max-width:860px}
.sm-fussnote .sm-entwurf-verwerfen{font:inherit;font-size:12px;color:var(--accent-ink);background:none;border:0;padding:0 2px;margin:0;
  text-decoration:underline;cursor:pointer;min-height:24px}
.sm-fussnote-stand{white-space:nowrap}
.sm-fussnote .sm-entwurf-verwerfen:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.sm-gefuehrt .sm-fussnote{margin-top:22px}
.sm-gefuehrt{padding-bottom:8px}
@media(max-width:640px){.sm-leiste{padding:12px 14px 14px}.sm-leiste .pill{flex:1;justify-content:center}
  .sm-gefuehrt .sm-frage{padding:16px 14px 18px}.sm-gefuehrt [data-intro]{padding:16px 14px 20px}.sm-gefuehrt .sform-lead,.sm-gefuehrt .sm-stand{padding-left:14px;padding-right:14px}}
.sm-weiter:disabled{opacity:.45;cursor:not-allowed}
.sm-gefuehrt .sm-station[hidden],.sm-gefuehrt .sm-frage[hidden],.sm-gefuehrt .sm-st-titel[hidden],.sm-gefuehrt [data-intro][hidden],.sm-keine-zusatzfragen[hidden]{display:none}
.sd-onlinelink{margin:-6px 0 14px;padding:0 12px;font-size:14px;color:var(--ink-2)}
.sd-onlinelink a{font-weight:700;color:var(--accent-ink)}
.sd-onlinelink a:hover{color:var(--accent-deep)}
.dn-sperre{font-weight:700}
@media(max-width:900px){.sm-piktos{grid-template-columns:repeat(4,1fr)}.sm-gruppen{grid-template-columns:repeat(4,1fr)}.sm-fortschritt{grid-template-columns:repeat(7,1fr)}}
@media(max-width:640px){.sm-fortschritt{display:none}
  .sm-gefuehrt .sm-stand{position:sticky;top:var(--sm-kopf,0px);z-index:3;background:var(--tint);padding:10px 14px;margin:0;border-bottom:1px solid var(--line);border-radius:14px 14px 0 0}.sm-piktos{grid-template-columns:1fr 1fr}.sm-radios,.sm-vorbereitung{grid-template-columns:1fr}
  .sm-frage,.sm-gefuehrt .sm-frage{padding:16px 14px 18px}.sm-pikto{min-height:96px}.sm-pikto-ic{width:32px;height:32px}
  .sm-fortschritt{grid-template-columns:repeat(2,1fr)}.sm-fs-titel{font-size:11px}}


/* Stellen-Pop-up (Hinweis auf offene Stelle, einmal pro Sitzung). z-index ueber
   Header/Mega (80/85), aber unter dem Skip-Link (200). Karte mit Bildspalte. */
.jobpop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s var(--ease)}
.jobpop.is-on{opacity:1;visibility:visible}
.jobpop-scrim{position:absolute;inset:0;background:rgba(6,38,62,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.jobpop-card{position:relative;display:grid;grid-template-columns:210px 1fr;width:min(600px,100%);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;
  transform:translateY(16px) scale(.97);opacity:.5;transition:transform .34s var(--ease),opacity .34s var(--ease)}
.jobpop.is-on .jobpop-card{transform:none;opacity:1}
.jobpop-card:focus{outline:none}
.jobpop-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.jobpop-media{position:relative;min-height:100%;background:var(--tint)}
.jobpop-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jobpop-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,color-mix(in srgb,var(--accent-deep) 60%,transparent))}
.jobpop-tag{position:absolute;left:14px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;
  /* var(--accent-deep) statt color-mix(--accent 90%, #000): Weiss auf der alten
     Pille war nachgemessen 4,26:1, also unter 4,5:1. --accent-deep ist der
     bestehende dunkle Weltton, kein neuer Wert. */
  background:var(--accent-deep);padding:6px 11px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm)}
.jobpop-tag .ic{width:14px;height:14px}
.jobpop-body{position:relative;padding:26px 26px 24px}
.jobpop-x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:rgba(255,255,255,.92);color:var(--ink-2);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-xs);
  transition:background .2s var(--ease),color .2s var(--ease),transform .25s var(--ease)}
.jobpop-x:hover{background:#fff;color:var(--accent-deep);transform:rotate(90deg)}
.jobpop-body h2{margin:2px 0 12px;font-size:clamp(19px,2.6vw,22px);line-height:1.22;padding-right:34px}
.jobpop-meta{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px}
.jobpop-meta li{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.jobpop-meta .ic{width:15px;height:15px;color:var(--accent-ink);flex:none}
.jobpop-body p{margin:0 0 20px;color:var(--ink-2);font-size:15px;line-height:1.55}
.jobpop-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media(max-width:560px){
  .jobpop-card{grid-template-columns:1fr;width:min(400px,100%)}
  .jobpop-media{min-height:132px;height:132px}
  .jobpop-media::after{background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--accent-deep) 55%,transparent))}
  .jobpop-body{padding:20px 20px 22px}
}
@media(prefers-reduced-motion:reduce){
  .jobpop,.jobpop-card{transition:opacity .01s}
  .jobpop-card{transform:none;opacity:1}
  .jobpop-x:hover{transform:none}
}

/* Karriere: Stellenanzeige als strukturierte Karte */
.stellen{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;margin-top:8px}
.stellen-head{display:flex;flex-wrap:wrap;gap:18px 24px;align-items:center;justify-content:space-between;
  padding:26px 30px;background:linear-gradient(180deg,var(--accent-soft2),#fff);border-bottom:1px solid var(--line-soft)}
.stellen-head-tx{flex:1 1 300px}
/* A11y-2 (25.07.2026): weisser Text auf --accent ergab 3,52:1 und fiel damit unter
   4,5:1 (axe color-contrast, karriere.html). --accent-ink haelt 5,53:1 - dieselbe
   Entscheidung wie bei den CTA-Pillen in AP1/S1, damit die Flaechen zusammenpassen. */
.stellen-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--accent-ink);padding:5px 12px;border-radius:var(--r-pill)}
.stellen-head h3{margin:12px 0;font-size:clamp(20px,3vw,24px);line-height:1.2}
.stellen-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.stellen-meta li{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);font-size:14.5px;font-weight:500}
.stellen-meta .ic{width:17px;height:17px;color:var(--accent-ink);flex:none}
.stellen-apply{flex:none}
.stellen-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 44px;padding:28px 30px 6px}
.stellen-col h4,.stellen-req h4{font-size:16px;margin:0 0 14px;padding-bottom:9px;border-bottom:2px solid var(--accent-soft)}
.stellen-req{padding:6px 30px 4px}
.stellen .checks{margin:0}
.stellen-foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding:22px 30px 26px;margin-top:16px;border-top:1px solid var(--line-soft);background:var(--tint)}
.stellen-foot p{margin:0}
.stellen-foot strong{display:block;font-family:var(--font-display);font-size:17px;color:var(--ink)}
@media(max-width:720px){
  .stellen-cols{grid-template-columns:1fr;gap:0;padding:24px 22px 4px}
  .stellen-head,.stellen-req,.stellen-foot{padding-left:22px;padding-right:22px}
  .stellen-apply,.stellen-foot .pill{width:100%;justify-content:center}
}

/* ---------- Anfahrt (Kontakt / Magdeburg): statische, lokal gehostete Karte ---------- */
.anfahrt{display:grid;grid-template-columns:0.9fr 1.1fr;gap:40px;align-items:center}
.anfahrt-info p{color:var(--ink-2);margin-bottom:20px}
.anfahrt-route{min-height:44px}
.anfahrt-map{margin:0}
.anfahrt-map .media{aspect-ratio:16/10;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.anfahrt-attr{margin-top:8px;font-size:12px;color:var(--muted)}
@media(max-width:820px){
  .anfahrt{grid-template-columns:1fr;gap:22px}
}

/* Screenreader-only (barrierefreie Zusatztexte, WCAG) */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Anfahrt: Klick-Vergroesserung (Lightbox) ---------- */
.anfahrt-zoom{display:block;width:100%;padding:0;border:0;background:none;color:inherit;
  cursor:zoom-in;position:relative;border-radius:var(--r-lg)}
.anfahrt-zoom .media{display:block}
.anfahrt-zoom:focus-visible{outline:none;box-shadow:var(--ring)}
.anfahrt-zoombadge{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.94);color:var(--ink);
  font-size:13px;font-weight:600;box-shadow:var(--shadow-sm);pointer-events:none}
.anfahrt-zoombadge .ic{width:16px;height:16px}
.anfahrt-zoom:hover .anfahrt-zoombadge{background:#fff}

/* Vollansicht-Overlay */
.mapbox{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;transition:opacity .24s var(--ease)}
.mapbox.is-on{opacity:1}
.mapbox-scrim{position:absolute;inset:0;background:rgba(6,38,62,.82);cursor:zoom-out}
.mapbox-fig{position:relative;margin:0;z-index:1;max-width:96vw;max-height:92vh}
.mapbox-fig img{display:block;width:auto;height:auto;max-width:96vw;max-height:86vh;
  border-radius:var(--r);box-shadow:var(--shadow-lg)}
.mapbox-cap{margin-top:8px;text-align:center;color:#DCE8F1;font-size:12px}
.mapbox-x{position:absolute;top:-14px;right:-14px;z-index:2;width:44px;height:44px;border-radius:50%;
  border:0;background:#fff;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md)}
.mapbox-x:hover{color:var(--accent-deep)}
.mapbox-x .ic{width:22px;height:22px}
@media(max-width:600px){.mapbox-x{top:6px;right:6px}}
@media(prefers-reduced-motion:reduce){.mapbox{transition:none}}

/* ---------- Anfahrt: interaktive Karte (Leaflet, lokale Kacheln) ---------- */
.anfahrt-lmap{position:relative;z-index:0;width:100%;aspect-ratio:16/10;min-height:320px;
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  background:var(--tint)}
/* Rueckmeldung Monique Hildebrandt, 27.07.2026 (Kontakt- und Anfahrtsseite):
   Der Pin traegt jetzt das Firmenlogo, wie es das statische Kartenbild
   (render_anfahrt_karte.py) schon tat. Weisses Schild mit Akzentrand, damit das
   Logo auf jeder Kachelfarbe steht; Marker 96x98 und damit deutlich ueber dem
   44px-Ziel fuer Tippflaechen. */
/* Zentriert wird ueber text-align, nicht ueber flex: Leaflet setzt an
   .leaflet-marker-icon ein eigenes display und wuerde ein flex hier ueberschreiben. */
.anfahrt-pin{background:none;border:0;text-align:center;line-height:0}
.anfahrt-pin svg{filter:drop-shadow(0 2px 3px rgba(6,38,62,.35))}
.anfahrt-pin-schild{display:inline-block;background:#fff;border:2px solid var(--accent);
  border-radius:10px;padding:6px 9px;margin-bottom:4px;box-shadow:0 2px 6px rgba(6,38,62,.3)}
/* Die Bildmasse stehen inline am <img> im Marker-HTML: Leaflet setzt
   ".leaflet-container .leaflet-marker-pane img{width:auto}" mit hoeherer
   Spezifitaet als jede Klassenregel hier und wuerde das Logo sonst strecken. */
.leaflet-container{font-family:var(--font-sans);background:var(--tint)}
.leaflet-popup-content{font-family:var(--font-sans);font-size:14px;line-height:1.55;color:var(--ink);margin:12px 14px}
.leaflet-popup-content strong{font-weight:600}
.leaflet-bar a{color:var(--ink)}
.leaflet-bar a:hover{color:var(--accent-deep)}
@media(max-width:820px){.anfahrt-lmap{min-height:300px}}
/* Funde UE1/UE2: Bis 519 px Fensterbreite lief der ganze Anfahrtsbereich bis zu
   180 px aus dem Bild. Ursache ist nicht die Karte selbst, sondern die Paarung
   aspect-ratio + min-height: Ein Kasten mit Seitenverhaeltnis gibt seine
   Mindesthoehe als Mindestbreite an die Groessenberechnung weiter (300 px x 1,6
   = 480 px). Diese 480 px werden zur Mindestbreite der Rasterspalte von
   .anfahrt (1fr = minmax(auto,1fr)), und damit ragen Text, Route-Knopf und Karte
   gemeinsam hinaus. Der Inhaltsbereich misst dort aber nur Fensterbreite minus
   40 px Seitenrand, passt also erst ab 520 px.
   Unterhalb der Schwelle bestimmt deshalb die Hoehe unmittelbar, ohne
   Seitenverhaeltnis; ohne aspect-ratio gibt es nichts zu uebertragen. Bei genau
   520 px liefern beide Schreibweisen dieselben 300 px, der Uebergang ist also
   stufenlos, und oberhalb aendert sich nichts. */
@media(max-width:520px){.anfahrt-lmap{aspect-ratio:auto;height:300px;min-height:0}}

/* ------------------------------------------------------ Zeitungsausriss
   Der Artikel auf /ueber-uns/geschichte.html (29.07.2026). Er haengt dort wie
   angepinnt und nicht wie ein Pflichtbaustein: leicht gedreht, mit Schatten.

   **Die Drehung ist Gestaltung und liegt deshalb ausschliesslich hier.** Im
   Markup steht ein gerades Bild mit Bildunterschrift und Downloadknopf; ohne
   Stylesheet bleibt die Aussage vollstaendig. Kein Skript ist beteiligt.

   Gedreht wird um 1,6 Grad. Das ist wenig genug, um nicht wie ein Fehler
   auszusehen, und viel genug, um die Kante sichtbar zu machen. Die Breite ist
   fest begrenzt: Ein gedrehtes Element ist breiter als sein Kasten, und die
   Ueberlaufpruefung der Browser-Suite misst genau diese Aussenkante. Bei 260 px
   und 1,6 Grad kommen rund 7 px dazu, die der Aussenabstand traegt.

   Die Drehung bleibt bei prefers-reduced-motion bestehen: Sie ist ein
   Standbild und keine Bewegung. Reduzierte Bewegung heisst nicht gerade
   ausgerichtet. */
.ausriss{margin:0 0 18px;max-width:300px}
.ausriss-blatt{transform:rotate(-1.6deg);transform-origin:50% 40%;
  border:1px solid var(--line-soft);border-radius:2px;overflow:hidden;
  background:var(--tint);box-shadow:0 10px 26px rgba(11,27,38,.16),
  0 2px 6px rgba(11,27,38,.10)}
.ausriss-blatt img{display:block;width:100%;height:auto}
.ausriss-bu{margin:16px 2px 0;font-size:13px;line-height:1.6;color:var(--grey)}
.ausriss-quelle{margin:14px 0;font-size:13.5px;line-height:1.6;color:var(--grey)}
/* Ab hier steht der Ausriss neben dem Text statt darueber. Der Umbruchpunkt
   liegt bei 760 px, wie bei den uebrigen zweispaltigen Bloecken der Seite. */
@media(min-width:761px){
  .ausriss{float:right;margin:0 0 20px 28px}
}

/* ---------- Begriffserklaerung Vorsorge (/wissen/begriffe-vorsorge.html) ----------
   Der Seitentyp ist neu, die Bauteile sind es nicht: Karten wie im Raster der
   Uebersichtsseiten, ein Akkordeon fuer die Quellen wie bei .faq, ein getoenter
   Kasten fuer Vorbemerkung und Marker wie auf der Schadenseite. Neu ist allein
   die Marke ueber der Ueberschrift, und sie loest einen echten Zielkonflikt:
   Die Ueberschrift ist die Frage des Kunden, nachgeschlagen wird aber das
   Fachwort. Die Marke traegt deshalb den Anker.

   Farben ausschliesslich aus den Tokens. Kleine Schrift steht auf --grey und
   nicht auf --muted, weil --muted auf getoentem Grund unter die Schwelle faellt. */
.bg-index{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bg-index li{margin:0}
.bg-index a{display:inline-block;padding:7px 13px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:#fff;color:var(--accent-ink);
  font-size:14px;font-weight:600;text-decoration:none;line-height:1.3}
.bg-index a:hover{border-color:var(--accent);background:var(--accent-soft2)}
.bg-index a:focus-visible{outline:none;box-shadow:var(--ring)}

.bg-vorbemerkung{max-width:820px;margin:0 0 20px;padding:14px 18px;
  background:var(--accent-soft2);border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2);
  font-size:15px;line-height:1.65}

.bg-liste{display:grid;gap:16px}
@media(min-width:900px){.bg-liste{grid-template-columns:1fr 1fr}}

.bg-eintrag{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:20px 22px 16px;scroll-margin-top:120px}
.bg-eintrag:target{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.bg-marke{margin:0 0 6px}
.bg-marke span{display:inline-block;font-size:12.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--accent-deep);
  background:var(--accent-soft);border-radius:var(--r-pill);padding:4px 11px}
.bg-eintrag h3{margin:0 0 10px;font-size:18px;line-height:1.35;color:var(--ink)}
.bg-kurz{margin:0;color:var(--grey);font-size:15px;line-height:1.7}

.bg-quellen{margin:14px 0 0;border-top:1px solid var(--line-soft);padding-top:10px}
.bg-quellen summary{cursor:pointer;font-size:13.5px;font-weight:600;
  color:var(--accent-ink);list-style:none}
.bg-quellen summary::-webkit-details-marker{display:none}
.bg-quellen summary:before{content:"+ ";font-weight:700}
.bg-quellen[open] summary:before{content:"\2212 "}
.bg-quellen summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.bg-quellen-in{padding-top:8px}
.bg-quellen-in ul{margin:0;padding-left:20px}
.bg-quellen-in li{color:var(--grey);font-size:13.5px;line-height:1.65;margin-bottom:6px}
.bg-quellen-in code{font-size:12.5px;background:var(--tint);padding:1px 5px;
  border-radius:4px;color:var(--ink-2)}
.bg-herkunft{margin:8px 0 0;color:var(--grey);font-size:13px;line-height:1.6}
.bg-herkunft a{color:var(--accent-ink);font-weight:600}

.bg-kuerzel{margin:0 0 16px;max-width:820px}
.bg-kuerzel dt{font-weight:700;color:var(--ink);font-size:14.5px;margin-top:12px}
.bg-kuerzel dd{margin:3px 0 0;color:var(--grey);font-size:14.5px;line-height:1.65}
.bg-kuerzel code{font-size:13px;background:var(--tint);padding:1px 5px;border-radius:4px}

/* Der Block, den assets/begriffe.js zur Laufzeit in die Popover des
   Depot-Rechners schreibt. Ohne JavaScript bleibt er leer; das ist derselbe
   dokumentierte Bestand wie beim Popover an der Steuerzeile. */
.av-info-pop .bgrt-kurz{margin:10px 0 0;padding-top:10px;
  border-top:1px solid var(--line-soft);font-size:13.5px;line-height:1.6}
.av-info-pop .bgrt-kurz b{color:var(--ink)}
.av-info-pop .bgrt-mehr{margin:8px 0 0;font-size:13px}
.av-info-pop .bgrt-mehr a{color:var(--accent-ink);font-weight:600}

/* ===================== Ratgeber-Beitraege (23.08.2026) =====================
   Ansage Maik: "informative, nudgige Seiten im Blog-Stil mit animierten
   Grafiken und Bildern und unauffaelligem CTA. Redaktionell, nicht der
   Cine-Hero. Text und Bild oder Grafik auch gern mal nebeneinander, damit es
   etwas dynamischer wirkt, wie in einem Magazin, aber dosiert. Und stylisch,
   mit guter Userfuehrung."

   Gilt ausschliesslich unter body[data-layout="ratgeber"]. Die erhoehte
   Spezifitaet ist dieselbe Entscheidung wie beim Layout Cine-Kompakt: Die
   uebrigen Seiten sehen diese Stile nie, und ein Beitrag erbt umgekehrt nichts
   aus dem Produktlayout.

   Die Weltfarbe kommt von selbst: Alles hier arbeitet mit var(--accent) und
   seinen Ableitungen, und die setzt body[data-group] je Welt. Es gibt keine
   zweite Palette und kein eigenes Ratgeber-Blau. */
body[data-layout="ratgeber"]{
  /* Die Lesespalte. 680 px sind rund 72 Zeichen bei 18 px Inter -- die Breite,
     bei der ein Auge die naechste Zeile ohne Suchen findet. Die Browser-Spec
     misst sie und laesst hoechstens 700 px zu. */
  --rg-spalte:680px;
  /* Das Nebeneinander-Paar bricht aus der Lesespalte aus, aber nicht bis an
     den Rand: 1040 px passen in die 1124 px Inhaltsbreite der .wrap bei
     1280 px Fenster und lassen links und rechts Luft stehen. Aus dieser Zahl
     ist die Bildbreite gerechnet (tools/make_ratgeber_motive.py). */
  --rg-breit:1040px;
  --rg-luecke:24px;
}

/* ---------- Fortschrittslinie ----------
   Sie liegt fest am oberen Bildrand und ueber dem Kopf (z-index 90 gegen 80),
   damit sie sichtbar bleibt, wenn der Kopf beim Runterscrollen ausblendet
   (.site-header.hdr-hide). Im Dokument steht sie unter dem Kopf, als erstes
   Element des Inhalts.

   **Ohne Skript ist sie nicht da**, und zwar per display:none unter der
   Klasse js. Eine Linie, die immer bei null steht, waere eine Falschaussage,
   kein Rueckfall. */
body[data-layout="ratgeber"] .rg-fortschritt{display:none}
html.js body[data-layout="ratgeber"] .rg-fortschritt{display:block;position:fixed;
  top:0;left:0;right:0;height:3px;z-index:90;pointer-events:none}
body[data-layout="ratgeber"] .rg-balken{display:block;height:100%;width:100%;
  transform:scaleX(var(--rg-p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent-bright))}

/* ---------- Spalten ---------- */
/* display:flow-root faengt die umflossenen Elemente ein: Ein Float, der aus
   seinem Abschnitt herausragt, schoebe sich sonst in den naechsten Kapitelkopf.
   Das ist der eine Grund fuer diese Zeile, und er ist gemessen. */
body[data-layout="ratgeber"] .rg-spalte{max-width:var(--rg-spalte);margin:0 auto;
  display:flow-root}
/* Der Kartenblock am Fuss ("Passende Versicherungen") behaelt die linke Kante
   der Lesespalte und waechst nach rechts in den freien Rand. Der linke Rand ist
   der halbe Ueberhang der .wrap ueber die Lesespalte; wird er negativ (schmale
   Schirme), faengt max() ihn bei null ab.

   **Fuer Bild und Grafik gilt das seit dem 23.08.2026 (spaet) nicht mehr.**
   Ansage Maik: "Wenn Bilder und Grafiken seitlich angeordnet werden, dann muss
   der Text darum fliessen." Ein Ausbruch ueber die Spaltenkante ist damit
   erledigt; die Regeln dazu stehen weiter unten bei .rg-med. */
body[data-layout="ratgeber"] .rg-breit{max-width:var(--rg-breit);
  margin-left:max(0px,calc((100% - var(--rg-spalte))/2));margin-right:0}
body[data-layout="ratgeber"] .rg-abschnitt{padding:0 0 clamp(26px,3.4vw,44px)}
/* **Nur die direkten Kinder.** Ohne den Kindkombinator greift diese Regel bis
   in die Grafik hinein und ueberschreibt dort jede eigene Schriftgroesse: Sie
   ist mit (0,2,2) spezifischer als die Regeln der Archetypen. Gemessen am
   23.08.2026 (spaet) an der Szene -- die Kapitaelchen standen dort mit 18 px
   statt 12,5 px, und mit ihnen war die ganze Hoehenrechnung der Grafik falsch.

   **Und nur in den Kapiteln** (Befund 28.08.2026, im Browser gemessen): Die
   Kopfzeilen des Beitrags -- Einordnung, Vorspann, Meta-Zeile -- sind ebenfalls
   direkte p-Kinder ihrer .rg-spalte. Ohne den Kapitel-Vorbau stand diese Regel
   mit (0,2,2) ueber deren Regeln mit (0,2,1), und der ganze Kopf lief auf
   18 px Fliesstext, waehrend im Stylesheet 12,5, 14 und 22 px standen. Genau
   das war der Eindruck "nicht edel": Der Kopf trug nie die Groessen, die ihm
   zugedacht waren. Fliesstext steht nur in den Kapiteln, also gilt die Regel
   nur dort. */
body[data-layout="ratgeber"] .rg-kapitel .rg-spalte>p{font-size:18px;line-height:1.72;
  color:var(--ink-2);margin-bottom:18px}
body[data-layout="ratgeber"] .rg-kapitel .rg-spalte>p:last-child{margin-bottom:0}

/* ---------- Kopf des Beitrags ----------
   Kein Bild, kein Full-Bleed, kein Rotator: Die Seite beginnt mit der Frage.
   Der einzige farbige Anker oben ist die Einordnungszeile. */
body[data-layout="ratgeber"] .rg-kopf{padding:clamp(34px,4.6vw,64px) 0 clamp(20px,2.4vw,30px)}
body[data-layout="ratgeber"] .rg-einordnung{font-family:var(--font-sans);font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--accent-deep);margin:0 0 16px;display:flex;align-items:center;
  flex-wrap:wrap;row-gap:2px}
body[data-layout="ratgeber"] .rg-einordnung::before{content:"";width:22px;height:2px;
  background:var(--accent);border-radius:2px;margin-right:9px;flex:none}
/* Der Mittelpunkt zwischen "Ratgeber" und der Welt steht in einem eigenen
   Span. Die Leerzeichen darin faellt der Flex-Behaelter weg (jedes Kind ist
   ein eigenes Element), deshalb kommt der Abstand aus dem Stylesheet. */
body[data-layout="ratgeber"] .rg-einordnung>span[aria-hidden]{margin:0 7px;
  color:var(--hair)}
/* Die H1 traegt die Groesse der Produktseiten-H1 (Ansage Maik, 28.08.2026:
   Kopf-Typografie auf Seitenniveau). Dieselbe clamp-Formel wie
   body[data-layout="cine-kompakt"] .hero-pk h1 -- 46 px am Desktop, 28 px am
   Telefon, dazwischen 4,6vw; die Browser-Spec misst beide Seiten in einem
   Lauf gegeneinander. Die Zeilenhoehe bleibt bei 1,14: Die Frage laeuft ueber
   zwei Zeilen, die knappen 1,06 der Produkttitel sind fuer Einzeiler gebaut. */
body[data-layout="ratgeber"] .rg h1{font-size:clamp(28px,4.6vw,46px);line-height:1.14;
  letter-spacing:-.02em;margin-bottom:18px;text-wrap:balance}
/* Der Vorspann ist die Stufe zwischen H1 und Fliesstext, und die Stufe kommt
   aus dem Bestand: .hero-sub p.lead, also 19 px bei Zeilenhoehe 1,6 in
   var(--grey). Vom Fliesstext (18 px, 1,72, var(--ink-2)) unterscheiden ihn
   damit Groesse, Farbe und Durchschuss zugleich -- messbar, ohne dass eine
   neue Groesse erfunden wird. Die fruehere clamp bis 22 px kam im Browser nie
   an (siehe den Spezifitaets-Befund oben) und ist ersatzlos raus. */
body[data-layout="ratgeber"] .rg-vorspann{font-size:19px;line-height:1.6;
  color:var(--grey);margin:0 0 20px;text-wrap:pretty}

/* Meta-Zeile: Lesezeit, Stand, Sprung zu den Quellen. Klein und beilaeufig
   wie der Brotkrumenpfad: 13 px mit der Sperrung der .crumbs, Farbe
   var(--grey), genau **eine** Haarlinie darueber als Abschluss des Kopfes
   (Ansage Maik, 28.08.2026; vorher standen zwei, und die Zeile lief durch
   den Spezifitaets-Befund oben auf 18 px). Der Quellen-Anker ist ein
   gedaempfter Textlink im crumbs-Muster: grau, unterstrichen, erst beim
   Zeigen in der Akzentfarbe -- kein kraeftiges Blau im Kopf.
   Die Trenner sind CSS-Inhalt und kein Textzeichen -- sie stehen damit nicht
   im Suchindex und nicht in der Vorlesereihenfolge. */
body[data-layout="ratgeber"] .rg-meta{display:flex;flex-wrap:wrap;align-items:center;
  gap:4px 12px;margin:0;padding:10px 0 0;border-top:1px solid var(--line-soft);
  font-size:13px;letter-spacing:.01em;color:var(--grey)}
body[data-layout="ratgeber"] .rg-meta>*+*::before{content:"·";margin-right:12px;
  color:var(--hair)}
body[data-layout="ratgeber"] .rg-meta a{color:var(--grey);
  text-decoration:underline;text-underline-offset:2px}
body[data-layout="ratgeber"] .rg-meta a:hover{color:var(--accent-deep)}

/* Der gelbe Fachpruefungs-Kasten (.rg-marker) ist am 24.08.2026 ersatzlos
   entfallen -- Ansage Maik: "Das gelbe Prüfhinweisfenster verschwindet, der
   Hinweis in der Leiste genügt." Dasselbe Muster wie beim Schadenformular:
   Der Kasten faellt weg, die Sperre bleibt mechanisch (status="entwurf" haelt
   den Beitrag aus der Sitemap und setzt den Sperrvermerk in die
   Entwurfsleiste am Seitenkopf). */

/* ---------- Das Wichtigste in Kuerze ---------- */
body[data-layout="ratgeber"] .rg-kurz{background:var(--accent-soft2);
  border:1px solid var(--line-soft);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:22px 26px}
body[data-layout="ratgeber"] .rg-kurz h2{font-size:19px;line-height:1.3;
  margin-bottom:12px;letter-spacing:0}
body[data-layout="ratgeber"] .rg-kurz ul{list-style:none;margin:0;padding:0;
  display:grid;gap:11px}
body[data-layout="ratgeber"] .rg-kurz li{position:relative;padding-left:24px;
  font-size:16px;line-height:1.62;color:var(--ink-2)}
body[data-layout="ratgeber"] .rg-kurz li::before{content:"";position:absolute;
  left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---------- Sprungleiste ----------
   **Nicht sticky**, wie die Sprungnavigation der Produktseiten (sprungnav()).
   Der Grund ist derselbe und hier zusaetzlich baulich: Der Kopf klebt bereits
   oben und blendet beim Runterscrollen aus; eine zweite klebende Leiste
   darunter waere entweder verdeckt oder sie deckte den Kopf zu.

   **Die Pillen-Chips sind am 28.08.2026 entfallen** (Ansage Maik: die
   Ankerpunkte fallen negativ auf). Die Kapitel-Anker tragen seither die
   Optik der .sprungnav der Produktseiten: 13 px, halbfett, Kapitaelchen mit
   .05em Sperrung, graue Textlinks mit Akzent beim Zeigen, Ziele 44 px hoch --
   Zeichen fuer Zeichen die Werte aus dem cine-kompakt-Block, nur in der
   Lesespalte statt in der vollen .wrap. Am Desktop bricht die Liste um
   (sechs Kapiteltitel passen nicht in 680 px), auf Telefonbreite gilt die
   Produktseiten-Loesung: eine seitlich scrollende Zeile ohne sichtbaren
   Rollbalken (Media-Block weiter unten bei den schmalen Schirmen).

   Die Hervorhebung des gelesenen Kapitels setzt weiterhin site.js
   (IntersectionObserver, Leselinie unveraendert). Der Aktiv-Zustand ist die
   Akzent-Tiefe der bestehenden aria-current-Links (.util) plus eine 2 px
   starke Akzentlinie darunter -- dieselbe Linie, die die Einordnungszeile
   als ::before traegt. Farbe allein waere vom Zeigen-Zustand nicht zu
   unterscheiden. Ohne Skript bleibt eine gewoehnliche Ankerliste, und die
   ist vollstaendig bedienbar. */
body[data-layout="ratgeber"] .rg-sprung{padding:0 0 clamp(26px,3.4vw,44px)}
body[data-layout="ratgeber"] .rg-sprung ul{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:0 clamp(16px,3vw,34px)}
/* text-decoration:none steht hier ausdruecklich (Sicht-Fund 28.08.2026):
   Die Unterstreichung der Inhaltslinks nimmt bei der Produktseiten-Sprungnav
   die globale Ausnahmeregel weg (main :is(.ds-toc,.crumbs,.sprungnav)
   a:not([class])); .rg-sprung steht nicht auf dieser Liste, also gilt die
   Ausnahme lokal. Die Kennzeichnung als Link uebernimmt die Leistenform wie
   dort; der Aktiv-Zustand traegt seine eigene Linie. */
body[data-layout="ratgeber"] .rg-sprung a{display:inline-block;font-size:13px;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--grey);white-space:nowrap;padding:14px 2px;min-height:44px;
  text-decoration:none;
  transition:color .2s var(--ease),box-shadow .2s var(--ease)}
body[data-layout="ratgeber"] .rg-sprung a:hover{color:var(--accent-deep)}
body[data-layout="ratgeber"] .rg-sprung a.is-on{color:var(--accent-deep);
  box-shadow:inset 0 -2px 0 var(--accent)}
body[data-layout="ratgeber"] .rg-sprung a:focus-visible{outline:none;
  box-shadow:var(--ring);border-radius:4px}

/* ---------- Kapitel ---------- */
body[data-layout="ratgeber"] .rg-kapitel{scroll-margin-top:118px}
body[data-layout="ratgeber"] .rg-kapitel h2{font-size:clamp(23px,2.6vw,30px);
  line-height:1.22;margin-bottom:16px}
body[data-layout="ratgeber"] .rg-quellen{scroll-margin-top:118px}

/* ---------- Umflossenes Bild ----------
   Ansage Maik, 23.08.2026 (spaet): "Wenn Bilder und Grafiken seitlich
   angeordnet werden, dann muss der Text darum fliessen."

   Das Bild steht **in** der Lesespalte, unmittelbar vor dem Absatz, neben dem
   es beginnen soll, und wird per float aus dem Textfluss genommen. Der Absatz
   laeuft daneben und unter ihm weiter. Kein zweites Raster, kein Ausbruch
   ueber die Spaltenkante: Die Kolumne bleibt eine Kolumne, und das Bild sitzt
   darin wie in einem Magazin.

   46 Prozent der Spalte sind bei 680 px rund 313 px. Das ist zugleich die
   Breite, aus der die Bildstufen gerechnet sind (tools/make_ratgeber_motive.py),
   und sie aendert sich zwischen 1280 und 768 px nicht -- die Lesespalte ist
   dort gleich breit.

   **Die Grafik ist seit dem 24.08.2026 nicht mehr dabei** (Ansage Maik: "baue
   die Grafik in die volle Breite um und setze sie zwischen Textblöcke"). Sie
   hat einen eigenen Block, weiter unten. Der Grund ist gemessen: In 313 px
   blieben ihrer Endbeschriftung 115 px, und das ging nur mit geschrumpftem
   Motiv.

   shape-outside braucht es nicht: Das Bild ist ein Rechteck. */
body[data-layout="ratgeber"] .rg-med{float:right;width:46%;
  margin:6px 0 18px var(--rg-luecke);min-width:0}
body[data-layout="ratgeber"] .rg-med-links{float:left;
  margin:6px var(--rg-luecke) 18px 0}
/* Der naechste Kapitelkopf faengt den Fliesstext auf. Ohne clear stuende eine
   Ueberschrift neben dem Bild des vorigen Kapitels. */
body[data-layout="ratgeber"] .rg-spalte h2{clear:both}
body[data-layout="ratgeber"] .rg-med-bild{overflow:hidden;border-radius:var(--r);
  background:var(--accent-soft);box-shadow:var(--shadow-sm)}
body[data-layout="ratgeber"] .rg-med-bild picture{display:block}
body[data-layout="ratgeber"] .rg-bild{display:block;width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover}

/* ---------- Grafik in voller Lesespaltenbreite ----------
   Ansage Maik, 24.08.2026 (abends): "baue die Grafik in die volle Breite um
   und setze sie zwischen Textblöcke."

   Der Block steht zwischen zwei Absaetzen seines Kapitels und nimmt die ganze
   Lesespalte ein -- 680 px statt 313 px im Umfluss. `clear:both` raeumt einen
   Float ab, falls im selben Kapitel auch ein Foto steht; ohne das begaenne die
   Grafik neben dem Bild und waere wieder schmal.

   Die Abstaende sind groesser als der Absatzabstand: Der Block unterbricht den
   Text, er begleitet ihn nicht. */
body[data-layout="ratgeber"] .rg-gfx{clear:both;margin:clamp(26px,3.2vw,40px) 0;
  width:100%}

/* ---------- Zitat ----------
   Linker Akzentstrich, Herkunftszeile darunter. Die Anfuehrungszeichen stehen
   im Text und nicht als CSS-Inhalt: Sie gehoeren zum Zitat und sollen mit
   kopiert werden. */
body[data-layout="ratgeber"] .rg-zitat{margin:8px 0 0;padding:4px 0 4px 26px;
  border-left:3px solid var(--accent)}
body[data-layout="ratgeber"] .rg-zitat blockquote{margin:0}
body[data-layout="ratgeber"] .rg-zitat blockquote p{font-family:var(--font-display);
  font-weight:500;font-size:clamp(20px,2.2vw,25px);line-height:1.42;
  color:var(--ink);margin:0;text-wrap:pretty}
body[data-layout="ratgeber"] .rg-zitat figcaption{margin-top:12px;font-size:14px;
  color:var(--grey)}

/* ---------- Der ruhige Aufruf ----------
   Kein pill-blue, kein CTA-Band. Eine getoente Flaeche, ein Symbol, ein Satz,
   ein Textlink. Der Link ist unterstrichen und damit nicht allein durch Farbe
   erkennbar (WCAG 1.4.1, dieselbe Regel wie im Fliesstext). */
body[data-layout="ratgeber"] .rg-cta{display:flex;align-items:flex-start;gap:16px;
  background:var(--accent-soft2);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:22px 26px}
body[data-layout="ratgeber"] .rg-cta-ic{flex:none;width:42px;height:42px;
  border-radius:12px;display:grid;place-items:center;background:#fff;
  border:1px solid var(--line-soft);color:var(--accent-ink)}
body[data-layout="ratgeber"] .rg-cta-ic .ic{width:21px;height:21px}
body[data-layout="ratgeber"] .rg-cta-tx{margin:0;font-size:16.5px;line-height:1.65;
  color:var(--ink-2)}
body[data-layout="ratgeber"] .rg-cta-a{display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;font-weight:600;color:var(--accent-ink);
  text-decoration:underline;text-underline-offset:3px}
body[data-layout="ratgeber"] .rg-cta-a:hover{color:var(--accent-deep)}
body[data-layout="ratgeber"] .rg-cta-a .ic{transition:transform .25s var(--ease)}
body[data-layout="ratgeber"] .rg-cta-a:hover .ic{transform:translateX(3px)}

/* ---------- Passende Versicherungen ----------
   Dieselbe Zeilenkarte wie am Fuss der Produktseiten (.card-rel). Zwei Spalten
   statt drei, weil hier zwei Karten stehen; das Raster kommt aus grid cols-2. */
body[data-layout="ratgeber"] .rg-verwandt h2{font-size:clamp(21px,2.2vw,26px);
  margin-bottom:18px}

/* ---------- Quellen ---------- */
body[data-layout="ratgeber"] .rg-quellen{padding-top:clamp(20px,2.4vw,30px);
  padding-bottom:clamp(34px,4.4vw,58px)}
body[data-layout="ratgeber"] .rg-quellen .rg-spalte{border-top:1px solid var(--line);
  padding-top:24px}
body[data-layout="ratgeber"] .rg-quellen h2{font-size:19px;margin-bottom:6px;letter-spacing:0}
body[data-layout="ratgeber"] .rg-quellen ol{margin:14px 0 0;padding-left:20px}
body[data-layout="ratgeber"] .rg-quellen li{font-size:14.5px;line-height:1.7;
  color:var(--grey);margin-bottom:10px}

/* ---------- Bildunterschrift der Grafik im Ratgeber-Layout ----------
   Der Stilblock der Infografiken haengt an body[data-layout="cine-kompakt"];
   die Bildunterschrift braucht deshalb hier ihre eigene Regel. Die Farbe des
   Pruefhinweises ist dieselbe wie dort (#8A6D1D, gemessen 4,9:1 auf Weiss). */
body[data-layout="ratgeber"] .gfx-cap{display:block;margin:16px auto 0;
  font-size:12.5px;font-style:normal;color:var(--grey);line-height:1.6}
body[data-layout="ratgeber"] .gfx-cap .gfx-check{display:block;margin-top:5px;
  color:#8A6D1D;font-weight:600}

/* ---------- Archetyp 12: Szene mit Gabelung ----------
   Ansage Maik, 23.08.2026 (spät): „Grafiken müssen viel besser sein als das,
   was dort gezeigt wurde — es wird ein oft verwendetes Element geben, mit dem
   man eine Beschädigung illustriert; die untere Ecke wäre eher von einem
   Schaden betroffen. Es muss designmäßig wirklich zu unseren anderen Grafiken
   passen."

   **Die Masse sind übernommen, nicht erfunden.** Der Symbolkreis misst 44 px
   und das Symbol darin 23 px bei Strichstärke 1.8 — dieselben Werte wie
   `.hz-disc` im Deckungshorizont, und die 1.8 stammt aus assets/icons.svg
   selbst. Die Schiene ist 3 px stark in der Weltfarbe wie `.wk-ast` im
   Weichenbild, die Gabelung benutzt dessen Kurvenformel. Bildunterschrift und
   Prüfhinweis laufen über die gemeinsamen `.gfx-cap`-Regeln.

   **Die Geometrie ist gerechnet.** Alle senkrechten Masse leiten sich aus
   sechs Zahlen ab: Kopfzeile, ihr Abstand, Kreis, Abstand, Beschriftungshöhe,
   Zeilenabstand. Daraus folgen der Kreismittelpunkt der oberen Zeile
   (`--sg-cA`), der Abstand der beiden Kreismittelpunkte (`--sg-brueck`) und
   die Mitte der Gabelung (`--sg-mitte`). Gabelung, Brücke und Motiv hängen an
   genau diesen drei Werten. Die Browser-Spec misst nach, dass die Gabelung
   wirklich an den Kreisen ankommt und die Brücke wirklich beide Kreise
   verbindet; wer eine der sechs Zahlen ändert, ohne die Rechnung zu prüfen,
   bekommt eine rote Prüfung und kein schiefes Bild. */
.gfx-szene{
  --sg-disc:44px;
  --sg-gap:8px;
  --sg-rowgap:18px;
  --sg-kopfh:16px;
  --sg-kopfm:8px;
  /* Zwei Zeilen Beschriftung bei 13,5 px und Zeilenhöhe 1,3 ergeben 35,1 px.
     Die Höhe ist fest, damit beide Wege gleich hoch sind, egal ob eine
     Beschriftung ein- oder zweizeilig läuft. */
  --sg-label:36px;
  /* **Die drei waagerechten Masse: Motiv, Gabelung, Zwischenspalte.**
     Seit die Endstation ihre Beschriftung rechts traegt (24.08.2026), ist die
     Breite verteilt und nicht mehr frei. Zwei Groessen haengen daran:

     1. **Die Beschriftung der Endstation** braucht rund 112 px, sonst laeuft
        "Gefälligkeitsschäden" (108 px bei 11 px Schrift) aus der Grafik.
        Sie bekommt: Breite - Motiv - Gabelung - 8 - Zwischenspalte - 52.
     2. **Der Korridor der Bruecke.** Die Kapitaelchen-Zeile "AUS
        GEFÄLLIGKEIT" ist 129 px breit und laeuft vom linken Rand der Kette
        nach rechts. Die Bruecke steht senkrecht ueber der Mitte des
        Endkreises, also bei Motiv + Gabelung + Zwischenspalte + 8 + 22.
        Liegt dieser Wert rechts vom Ende der Zeile, ist der Korridor frei
        und die Bruecke laeuft durchgehend; sonst muss sie die Zeile
        aussparen.

     Seit die Grafik in voller Lesespaltenbreite steht (24.08.2026 abends),
     ist beides zugleich zu haben -- vorher, im Umfluss mit 313 px, war es
     das nicht. Drei Baender, gemessen an der Lesespalte:

       Fenster    Grafik    Motiv/Gabelung  Zwischenspalte  Beschriftung  Korridor
       >= 761     680 px    120 / 40        160             300 px        frei (61 px Luft)
       561..760   521..644   74 / 30        120             237..360 px   frei (21 px Luft)
       <= 560     280..520   52 / 20         66             137..322 px   belegt
       <= 360     280        38 / 16         62             104 px        belegt

     Wer eines der Masse aendert, verschiebt beides zugleich. Die Browser-Spec
     misst deshalb beides nach: dass kein Wort aus der Grafik laeuft und dass
     die Bruecke keine Schrift beruehrt. */
  --sg-motivw:120px;
  --sg-gabelw:40px;
  --sg-inter:160px;
  --sg-links:calc(var(--sg-motivw) + var(--sg-gabelw));
  --sg-cA:calc(var(--sg-kopfh) + var(--sg-kopfm) + var(--sg-disc)/2);
  --sg-brueck:calc(var(--sg-kopfh) + var(--sg-kopfm) + var(--sg-disc)
    + var(--sg-gap) + var(--sg-label) + var(--sg-rowgap));
  --sg-mitte:calc(var(--sg-cA) + var(--sg-brueck)/2);
}
.gfx-szene .sg-buehne{position:relative;padding-left:var(--sg-links)}

/* Motiv: der Gegenstand des Beitrags. Es kippt auf die Ecke, an der der Riss
   sitzt; der Drehpunkt liegt genau dort, damit diese Ecke beim Kippen an ihrem
   Platz bleibt und das Schadenzeichen darauf sitzen bleibt. */
.gfx-szene .sg-motiv{position:absolute;left:0;top:var(--sg-mitte);
  transform:translateY(-50%);width:var(--sg-motivw)}
.gfx-szene .sg-tv{display:block;width:100%;height:auto;overflow:visible}
.gfx-szene .sg-geraet{transform-box:view-box;transform-origin:12px 55px}
.gfx-szene .sg-linie,.gfx-szene .sg-riss{fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gfx-szene .sg-linie{stroke:var(--ink-2)}
/* Der Riss traegt die Weltfarbe wie das Schadenzeichen: Beides ist der
   Schaden, und beides soll sich vom Geraet abheben. In --accent-deep war er
   vom dunklen Umriss kaum zu unterscheiden. */
.gfx-szene .sg-riss{stroke:var(--accent)}
/* Das Schadenzeichen aus dem Sprite, auf der Ecke mit dem Riss. Die Lage ist
   aus der viewBox gerechnet: Die Ecke liegt bei 12 von 96 waagerecht und 55
   von 80 senkrecht. */
.gfx-szene .sg-blitz{position:absolute;left:12.5%;top:68.75%;
  transform:translate(-50%,-50%);color:var(--accent);display:block}
/* Das Zeichen waechst mit dem Motiv: 35 Prozent seiner Breite sind bei den
   urspruenglichen 74 px genau die 26 px, mit denen es entworfen wurde. */
.gfx-szene .sg-blitz-ic{width:calc(var(--sg-motivw)*.35);
  height:calc(var(--sg-motivw)*.35);display:block}

/* Gabelung: dieselbe Kurvenformel wie im Weichenbild. Der Kasten reicht vom
   Kreismittelpunkt des oberen Wegs bis zu dem des unteren und rechts bis in die
   Mitte der ersten Stationsspalte, damit die Kurven an den Kreisen ankommen. */
/* **Die Gabelung endet an der Kante der Stationszeile, nicht an der Kreismitte**
   (gesehen 23.08.2026 spaet): Reichte sie bis zur Kreismitte, liefe die untere
   Kurve mitten durch die Kapitaelchen-Zeile "AUS GEFAELLIGKEIT". Die letzten
   Pixel bis zum Kreis uebernimmt die Schiene der Zeile, die dafuer links an der
   Kante beginnt. Die Linie ist dadurch durchgehend und kreuzt keinen Text. */
.gfx-szene .sg-gabel{position:absolute;left:var(--sg-motivw);width:var(--sg-gabelw);
  top:var(--sg-cA);height:var(--sg-brueck);display:block;overflow:visible}
.gfx-szene .sg-ast{fill:none;stroke:var(--accent);stroke-width:3;
  stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.gfx-szene .sg-ast-leer{stroke:var(--hair)}

/* Die beiden Wege */
.gfx-szene .sg-wege{display:grid;gap:var(--sg-rowgap)}
.gfx-szene .sg-kopf{margin:0 0 var(--sg-kopfm);font-family:var(--font-sans);
  font-size:var(--gfx-label);line-height:var(--sg-kopfh);font-weight:600;
  letter-spacing:var(--gfx-track);text-transform:uppercase;color:var(--accent-deep)}
.gfx-szene .sg-weg-leer .sg-kopf{color:var(--grey)}
/* Die Zwischenstation bekommt ein festes Mass, die Endstation den Rest --
   sie muss ihre Beschriftung neben dem Kreis unterbringen. `minmax(0, ...)`
   statt `1fr`: Sonst zieht das laengste unteilbare Wort die Spalte auf und
   die ganze Kette laeuft aus der Grafik. */
.gfx-szene .sg-kette{list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:minmax(0,var(--sg-inter)) minmax(0,1fr);
  gap:var(--sg-gap)}
/* Die Schiene zwischen den beiden Stationen eines Weges. Sie läuft von
   Kreismitte zu Kreismitte; die zweite liegt eine Zwischenspalte, eine Lücke
   und einen halben Kreis vom linken Rand entfernt. */
.gfx-szene .sg-kette::before{content:"";position:absolute;
  left:0;right:calc(100% - var(--sg-inter) - var(--sg-gap) - var(--sg-disc)/2);
  top:calc(var(--sg-disc)/2 - 1.5px);height:3px;border-radius:2px;
  background:var(--accent)}
.gfx-szene .sg-weg-leer .sg-kette::before{background:var(--hair)}
.gfx-szene .sg-st{position:relative;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:var(--sg-gap);min-width:0}
/* **Die Endstation traegt ihre Beschriftung rechts** (Sicht Maik, 24.08.2026:
   "es liegt am Konzept dieser Grafik: es laesst keine Verbindung zwischen
   'Haftpflicht zahlt' und der Luecke zu, ohne die Linie durch den
   Haftpflicht-Text laufen zu lassen").

   Stand sie unter dem Kreis, lag sie auf der Bahn der Bruecke: Die verbindet
   die beiden Endkreise senkrecht, und dazwischen stand das Wort. Rechts vom
   Kreis ist diese Senkrechte frei, und die Bruecke braucht keine Kontur mehr,
   um lesbar zu bleiben.

   Die Zeile ist waagerecht und mittig: Der Kreis sitzt links, die Beschriftung
   daneben, beide auf einer Mittellinie. Weil das Raster die Stationen einer
   Zeile auf gleiche Hoehe streckt, liegt der Kreismittelpunkt bei der halben
   Zeilenhoehe -- und damit auf derselben Hoehe wie im Weg darueber. Genau
   darauf verlaesst sich die Bruecke. */
/* Der Kreis bleibt oben buendig wie in jeder anderen Station -- sonst laeuft
   die Schiene der Zeile an ihm vorbei (gemessen 24.08.2026: 22 px zu tief).
   Mittig zum Kreis steht die **Beschriftung**: Ihr Kasten ist mindestens so
   hoch wie der Kreis, und darin sitzt der Text in der Mitte. Braucht sie mehr
   Zeilen, waechst sie nach unten. */
.gfx-szene .sg-st-ende{flex-direction:row;align-items:flex-start;
  text-align:left}
/* **Mittig zum Kreis ist die erste Zeile**, nicht der ganze Kasten. Die
   Beschriftung der Luecke traegt eine zweite Zeile und ist damit hoeher als
   der Kreis; zentrierte man den Kasten, stiege sie ueber den Kreis hinaus und
   liefe in die Kapitaelchen-Zeile darueber (gemessen 24.08.2026: 18 px zu
   hoch, 2,6 px Ueberschneidung). Die Erklaerung haengt deshalb unter der
   ersten Zeile, und die erste Zeile liegt auf der Kreismitte: Der Vorlauf ist
   der halbe Kreis abzueglich der halben Zeilenhoehe (1,3 em, siehe .sg-tx). */
.gfx-szene .sg-st-ende .sg-tx{flex:1 1 auto;min-width:0;min-height:0;
  display:block;line-height:1.3;
  padding-top:calc(var(--sg-disc)/2 - 0.65em);
  /* Umbruch mit festem Wortabstand, keine Silbentrennung (Sicht Maik). */
  hyphens:none;overflow-wrap:normal}
/* Der Vermerk, mit dem der Tarif die Luecke schliesst: zweite Zeile unter der
   Beschriftung, nicht mehr als eigene Zeile unter der ganzen Grafik. */
.gfx-szene .sg-zusatz{display:block;margin-top:2px;font-size:12px;
  line-height:1.35;font-weight:400;color:var(--accent-deep)}
/* Unter 360 px bleiben der Grafik 280 px. Mit den Massen von oben blieben der
   Beschriftung 82 px, und "Gefälligkeitsschäden" (108 px) liefe heraus. Motiv
   und Zwischenspalte geben deshalb noch einmal nach: 280 - 34 - 16 - 8 - 52
   = 170 Endspalte, davon 118 px Beschriftung. */
@media(max-width:760px){
  /* Die Lesespalte ist ab hier schmaler als 680 px (gemessen: 644 bei 700 px
     Fenster). Motiv und Zwischenspalte gehen zurueck, der Korridor bleibt
     frei -- die Bruecke laeuft weiter durchgehend. */
  .gfx-szene{--sg-motivw:74px;--sg-gabelw:30px;--sg-inter:120px}
}
@media(max-width:560px){
  /* Ab hier reicht die Breite nicht mehr fuer beides: Entweder die
     Beschriftung passt oder der Korridor ist frei. Die Beschriftung hat
     Vorrang -- ein abgeschnittenes Wort ist ein Fehler, eine ausgesparte
     Linie eine Gestaltung. */
  .gfx-szene{--sg-motivw:52px;--sg-gabelw:20px;--sg-inter:66px}
}
@media(max-width:360px){
  /* 280 - 38 (Motiv) - 16 (Gabelung) - 8 - 62 (Zwischenspalte) = 156
     Endspalte, davon 104 px Beschriftung. Die Schrift geht um einen halben
     Schritt zurueck, damit "Anspruch" (57 px) in die Zwischenspalte und
     "Gefälligkeitsschäden" (98 px) in die Beschriftung passt -- beide ohne
     Trennstrich. */
  .gfx-szene{--sg-motivw:38px;--sg-gabelw:16px;--sg-inter:62px}
  .gfx-szene .sg-tx,.gfx-szene .sg-st-ende .sg-tx{font-size:12px}
  .gfx-szene .sg-zusatz{font-size:10px}
}
.gfx-szene .sg-disc{position:relative;z-index:1;flex:none;
  width:var(--sg-disc);height:var(--sg-disc);border-radius:50%;
  display:grid;place-items:center;background:var(--accent)}
.gfx-szene .sg-disc svg{width:23px;height:23px;fill:none;stroke:#fff;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gfx-szene .sg-weg-leer .sg-disc{background:#fff;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--grey) 34%,#fff)}
.gfx-szene .sg-weg-leer .sg-disc svg{stroke:var(--grey)}
/* Eine Stapelstufe ueber der gestrichelten Bruecke: Die gehoert zu einer
   spaeteren Station und laege sonst ueber dieser Beschriftung. Zusammen mit der
   Kontur (gfx-frei) verschwindet die Linie unter dem Wort statt darueber. */
.gfx-szene .sg-tx{display:block;position:relative;z-index:2;font-size:13.5px;
  line-height:1.3;font-weight:600;color:var(--ink);min-height:var(--sg-label);
  /* **Keine Silbentrennung, nirgends in der Szene** (Sicht Maik, 24.08.2026:
     Umbruch mit festem Wortabstand). Bei 320 px trennte der Browser sonst
     "An-spruch" und "kein An-spruch" ueber drei Zeilen. Die Spalten sind
     stattdessen so bemessen, dass das laengste Wort hineinpasst. */
  overflow-wrap:normal;hyphens:none}
.gfx-szene .sg-kopf{position:relative;z-index:2}
.gfx-szene .sg-weg-leer .sg-tx{color:var(--grey);font-weight:500}

/* Die Lücke: gestrichelter Kreis. Der Ruhezustand dieser Regeln ist der
   Endzustand — das Schild liegt darin und die Brücke steht. */
/* Der gestrichelte Ring liegt als outline und nicht als border am Kreis.
   Grund ist die Bruecke: Sie haengt als Pseudo-Element am Kreis, und deren
   Bezugsrahmen ist der Innenkasten. Ein 2 px breiter Rahmen verschiebt den
   damit um 2 px, und die Bruecke traf die Kreismitte um genau diese 2 px
   daneben (gemessen 24.08.2026). Eine outline liegt ausserhalb des Kastens
   und laesst ihn unberuehrt. */
.gfx-szene .sg-st-luecke .sg-disc{background:var(--accent-soft);
  box-shadow:none;border:0;outline:2px dashed var(--accent);outline-offset:-2px}
.gfx-szene .sg-st-luecke .sg-disc svg{stroke:var(--accent-deep)}
.gfx-szene .sg-st-luecke .sg-tx{color:var(--accent-deep);font-weight:600}
.gfx-szene .sg-schild{display:grid;place-items:center;line-height:0}
/* Die Brücke von der Lücke hinauf zum Ergebnis des oberen Wegs.

   **Sie hängt seit dem 24.08.2026 am Kreis und nicht mehr an der Station.**
   Der Kreis ist immer 44 px hoch; die Station wächst mit ihrer Beschriftung.
   Am Kreis verankert beginnt die Brücke unter jeder Beschriftungshöhe exakt in
   der Kreismitte, und beide Abschnitte stehen zwangsläufig auf derselben
   Senkrechten.

   **Sie läuft durchgehend, wo der Korridor frei ist, und sonst in zwei
   Abschnitten.** Zwischen den beiden Kreisen liegt die Kapitälchen-Zeile
   „Aus Gefälligkeit". In der vollen Lesespalte steht die Brücke 91 px rechts
   von ihrem Ende — freier Korridor, eine Linie. Unter 561 px Fenster wird die
   Grafik schmaler als die Zeile lang ist; dann hört die Linie vier Pixel über
   der Zeile auf und fängt drei Pixel darunter wieder an und läuft sichtbar
   **hinter** dem Wort durch, statt durch das Wort. Gemessen entschieden, nicht
   geraten: Die Zeile misst 129 px, die Grafik 680 px in der Lesespalte und
   280 px bei 320 px Fenster.

   Die Masse stammen aus denselben sechs Zahlen wie alles Senkrechte: Der
   untere Abschnitt reicht vom Fuss der Zeile (Kopfabstand plus halber Kreis)
   bis in die Kreismitte, der obere vom oberen Kreis bis an ihren Kopf. */
.gfx-szene .sg-st-luecke .sg-disc::before,
.gfx-szene .sg-st-luecke .sg-disc::after{content:"";position:absolute;
  left:calc(50% - 1px);border-left:2px dashed var(--accent)}
/* Durchgehend: ein Abschnitt von Kreismitte zu Kreismitte, der zweite
   entfaellt. */
.gfx-szene .sg-st-luecke .sg-disc::after{
  top:calc(50% - var(--sg-brueck));height:var(--sg-brueck)}
.gfx-szene .sg-st-luecke .sg-disc::before{display:none}
@media(max-width:560px){
  /* Korridor belegt: Die Linie spart die Kapitaelchen-Zeile aus. */
  .gfx-szene .sg-st-luecke .sg-disc::after{
    height:calc(var(--sg-brueck) - var(--sg-kopfh) - var(--sg-kopfm)
      - var(--sg-disc)/2 - 4px)}
  .gfx-szene .sg-st-luecke .sg-disc::before{display:block;
    top:calc(50% - var(--sg-kopfm) - var(--sg-disc)/2 + 3px);
    height:calc(var(--sg-kopfm) + var(--sg-disc)/2 - 3px)}
}

/* Die frühere Vermerkzeile unter der Grafik (.sg-vermerk) ist am 24.08.2026
   ersatzlos entfallen: Der Vermerk steht jetzt als zweite Zeile unter der
   Beschriftung der Lücke, wo er hingehört, und braucht keine gestrichelte
   Marke mehr, um seine Zugehörigkeit zu behaupten. */

/* Choreographie, nur bei laufendem JavaScript: erst kippt das Gerät und der
   Riss zeichnet sich, dann schlägt das Schadenzeichen auf, dann laufen die
   Wege aus, dann kommen die Stationen nacheinander, zuletzt fällt das Schild
   in die Lücke und die Brücke erscheint. Alle Zustände sind Übergänge auf den
   Ruhezustand oben; wer schnell scrollt, bekommt jederzeit den Endzustand. */
html.js .gfx-szene .sg-geraet{transform:rotate(0)}
/* Das Kippen gehört zum Schaden. Eine Szene ohne Riss und ohne Schadenzeichen
   (`gfx-szene-heil`, Staffel 2 vom 30.08.2026: Wegweiser, Stufen) bleibt
   deshalb gerade stehen — ein um acht Grad geneigter Wegweiser sähe aus, als
   fiele er um, und der Beitrag erzählt keinen Sturz, sondern zwei Wege. */
html.js .gfx-szene:not(.gfx-szene-heil).is-in .sg-geraet{transform:rotate(-8deg);
  transition:transform .55s cubic-bezier(.34,1.3,.64,1)}
html.js .gfx-szene .sg-riss{stroke-dashoffset:1}
html.js .gfx-szene.is-in .sg-riss{stroke-dashoffset:0;
  transition:stroke-dashoffset .5s var(--gfx-ease) .45s}
html.js .gfx-szene .sg-blitz{opacity:0;transform:translate(-50%,-50%) scale(.5)}
html.js .gfx-szene.is-in .sg-blitz{opacity:1;transform:translate(-50%,-50%) scale(1);
  transition:opacity .3s var(--gfx-ease) .8s,
    transform .4s cubic-bezier(.34,1.5,.64,1) .8s}
html.js .gfx-szene .sg-ast{stroke-dashoffset:1}
html.js .gfx-szene.is-in .sg-ast{stroke-dashoffset:0;
  transition:stroke-dashoffset .7s var(--gfx-ease) .95s}
html.js .gfx-szene .sg-kette::before{transform:scaleX(0);transform-origin:0 50%}
html.js .gfx-szene.is-in .sg-kette::before{transform:none;
  transition:transform .5s var(--gfx-ease) calc(1.45s + var(--i)*.12s)}
html.js .gfx-szene .sg-st{opacity:0;transform:translateY(9px)}
html.js .gfx-szene.is-in .sg-st{opacity:1;transform:none;
  transition:opacity .45s var(--gfx-ease),transform .45s var(--gfx-ease);
  transition-delay:calc(1.25s + var(--i)*.12s + var(--j)*.2s)}
html.js .gfx-szene .sg-schild{opacity:0;transform:translateY(-16px)}
html.js .gfx-szene.is-in .sg-schild{opacity:1;transform:none;
  transition:opacity .3s var(--gfx-ease) 2.15s,
    transform .45s cubic-bezier(.34,1.5,.64,1) 2.15s}
html.js .gfx-szene .sg-st-luecke .sg-disc::before,
html.js .gfx-szene .sg-st-luecke .sg-disc::after{opacity:0}
html.js .gfx-szene.is-in .sg-st-luecke .sg-disc::before,
html.js .gfx-szene.is-in .sg-st-luecke .sg-disc::after{opacity:1;
  transition:opacity .4s var(--gfx-ease) 2.35s}

@media(prefers-reduced-motion:reduce){
  /* Endzustand ohne jede Bewegung. Die Übergangsdauer nullt bereits die
     globale Regel `*{transition:none!important}` weiter oben; was hier steht,
     ist der Zustand — und der trägt im Störfall, wenn die Klasse js gesetzt
     ist und site.js nicht ankommt. Dieselbe Begründung wie beim Vorgänger,
     dieselbe Prüfung in der Spec. */
  html.js .gfx-szene:not(.gfx-szene-heil) .sg-geraet{
    transform:rotate(-8deg)!important;transition:none!important}
  html.js .gfx-szene.gfx-szene-heil .sg-geraet{
    transform:none!important;transition:none!important}
  html.js .gfx-szene .sg-riss,
  html.js .gfx-szene .sg-ast{stroke-dashoffset:0!important;transition:none!important}
  html.js .gfx-szene .sg-blitz{opacity:1!important;
    transform:translate(-50%,-50%) scale(1)!important;transition:none!important}
  html.js .gfx-szene .sg-kette::before{transform:none!important;transition:none!important}
  html.js .gfx-szene .sg-st,
  html.js .gfx-szene .sg-schild{opacity:1!important;transform:none!important;
    transition:none!important}
  html.js .gfx-szene .sg-st-luecke .sg-disc::before,
  html.js .gfx-szene .sg-st-luecke .sg-disc::after{opacity:1!important;
    transition:none!important}
}

/* ===================== Grafik-Paket 30.08.2026 (Bauplatz 1) =====================
   Vier neue Archetypen: Prisma (pr-), Wertbalken (wb-), Anteilsbogen (ab-) und
   Kennzahlkarten (kk-).

   **Drei Regeln gelten hier wie ueberall im Grafiksystem, und sie sind je
   einmal aktenkundig teuer geworden:**

   1. **Kein --gfx-Token, das --accent liest, gehoert auf :root.** Die
      Ersetzung wird auf dem Element aufgeloest, das die Eigenschaft
      deklariert; auf :root steht dort die Markenfarbe und nicht die
      Weltfarbe. Die Tonwerte des Prismas stehen deshalb auf .gfx-prisma,
      eine Ebene unterhalb von body[data-group]. Ausfuehrlich im Kommentar
      ueber `body{--gfx-rail-em:...}`.
   2. **Der Endzustand steht ohne Skript.** Jede Anfangsstellung einer
      Bewegung haengt an `html.js`; ohne JavaScript setzt niemand `is-in`,
      und was ohne Praefix versteckt wird, bleibt fuer immer versteckt
      (Befund vom 21.08.2026, die komplette Zeitleiste der Geschichtsseite).
      Beim Anteilsbogen traegt deshalb das Praesentationsattribut den vollen
      Bogen und das Stylesheet nur die Bewegung dorthin.
   3. **Beschriftungen zuletzt und mit Kontur.** Wo eine Linie einen Text
      kreuzen koennte, traegt er `gfx-frei` und liegt eine Stapelstufe
      darueber. Gemessen wird das im Browser, nicht am Quelltext
      (tests/browser/grafik-freistellung.spec.js).

   **Nur Weltblau und Grau.** Alle Toene leiten sich aus --accent,
   --accent-deep, --accent-bright und --grey ab; es kommt keine Farbe dazu. */

/* ---------- Prisma: ein Schaden, vier Wege ----------
   Die Buehne ist eine Zeile aus fuenf Spalten: Schadenstern, ruhiger Strahl,
   Glas, Faecher, Stationen. Faecher und Stationsliste sind die einzigen
   beiden, die sich strecken -- und sie strecken sich gemeinsam. Das ist der
   Grund, warum die Bahnen ihre Kreise wirklich treffen: Die Liste bekommt
   vier gleich hohe Zeilen (repeat(4,1fr)), der Faecher wird mit
   preserveAspectRatio="none" darueber gelegt, und seine vier Endpunkte
   liegen im Koordinatenraum genau auf den Zeilenmitten (50/150/250/350 von
   400). Bei ungleichen Zeilenhoehen liefe jede Linie knapp neben ihrem
   Kreis vorbei, und niemandem fiele es auf. */
body[data-layout="cine-kompakt"] .gfx-prisma{
  --pr-satt:var(--accent-deep);
  --pr-mittel:var(--accent);
  --pr-leicht:color-mix(in srgb,var(--accent) 46%,#fff);
  --pr-grau:var(--grey)}
body[data-layout="cine-kompakt"] .gfx-prisma .pr-t-satt{--pr-ton:var(--pr-satt)}
body[data-layout="cine-kompakt"] .gfx-prisma .pr-t-mittel{--pr-ton:var(--pr-mittel)}
body[data-layout="cine-kompakt"] .gfx-prisma .pr-t-leicht{--pr-ton:var(--pr-leicht)}
body[data-layout="cine-kompakt"] .gfx-prisma .pr-t-grau{--pr-ton:var(--pr-grau)}

body[data-layout="cine-kompakt"] .pr-buehne{display:grid;
  grid-template-columns:minmax(76px,102px) minmax(20px,46px) minmax(116px,158px)
                        minmax(44px,104px) minmax(0,1fr);
  align-items:center;max-width:var(--gfx-maxw);margin:0 auto;
  padding:clamp(10px,2vw,22px) 0}
body[data-layout="cine-kompakt"] .pr-quelle{display:grid;justify-items:center;gap:10px}
body[data-layout="cine-kompakt"] .pr-stern{display:block;line-height:0}
body[data-layout="cine-kompakt"] .pr-stern-svg{display:block;
  width:clamp(46px,7vw,64px);height:auto;fill:none;stroke-linecap:round;stroke-width:1.9}
/* Die Echo-Kontur: dieselbe Strichfuehrung, leicht versetzt und leiser. Der
   Versatz steht in Nutzerkoordinaten des 48er-Rasters, nicht in Bildpunkten,
   und waechst deshalb mit dem Zeichen mit. */
body[data-layout="cine-kompakt"] .pr-stern-echo{stroke:var(--accent);opacity:.3;
  transform:translate(2.4px,2.6px)}
body[data-layout="cine-kompakt"] .pr-stern-kern{stroke:var(--accent-deep)}
body[data-layout="cine-kompakt"] .pr-quelle-tx{margin:0;text-align:center;
  font-family:var(--font-sans);font-size:var(--gfx-label);font-weight:600;
  letter-spacing:var(--gfx-track);text-transform:uppercase;color:var(--grey)} /* L4 */

/* Der Strahl ist ruhig: kein Verlauf, kein Impuls, keine Bewegung. Er ist das
   Ungeteilte, und alles Farbige beginnt erst hinter dem Glas. */
body[data-layout="cine-kompakt"] .pr-strahl{display:block;width:100%;height:12px}
body[data-layout="cine-kompakt"] .pr-strahl-l{fill:none;stroke:var(--accent-deep);
  stroke-width:3;stroke-linecap:round}

body[data-layout="cine-kompakt"] .pr-glas{display:grid;justify-items:center;gap:10px}
body[data-layout="cine-kompakt"] .pr-glas-svg{display:block;width:100%;height:auto;
  overflow:visible}
/* Der Lichthof hinter dem Glas. Er ist "kaum sichtbar" und bleibt es: Die
   Deckkraft steht hier und nicht im Verlauf, damit sie an einer Stelle
   verstellbar ist. */
body[data-layout="cine-kompakt"] .pr-hof{opacity:.85}
body[data-layout="cine-kompakt"] .pr-hof-a{stop-color:var(--accent);stop-opacity:.17}
body[data-layout="cine-kompakt"] .pr-hof-b{stop-color:var(--accent);stop-opacity:0}
body[data-layout="cine-kompakt"] .pr-k-a{stop-color:#fff;stop-opacity:.97}
body[data-layout="cine-kompakt"] .pr-k-b{stop-color:color-mix(in srgb,var(--accent) 24%,#fff)}
body[data-layout="cine-kompakt"] .pr-k-c{stop-color:var(--accent-deep);stop-opacity:.9}
body[data-layout="cine-kompakt"] .pr-koerper{
  stroke:color-mix(in srgb,var(--accent-deep) 38%,#fff);stroke-width:1.2;
  stroke-linejoin:round}
body[data-layout="cine-kompakt"] .pr-facette{fill:none;stroke:#fff;stroke-opacity:.5;
  stroke-width:1}
body[data-layout="cine-kompakt"] .pr-facette-quer{stroke-opacity:.36}
/* Die Lichtkante oben links. Sie sitzt auf der Flanke, die dem Strahl
   zugewandt ist -- dort, wo Licht eintritt. */
body[data-layout="cine-kompakt"] .pr-kante{fill:none;stroke:#fff;stroke-opacity:.92;
  stroke-width:2.4;stroke-linecap:round}
body[data-layout="cine-kompakt"] .pr-schatten{fill:var(--grey);opacity:.15}
body[data-layout="cine-kompakt"] .pr-frage{margin:0;text-align:center;max-width:22ch;
  font-style:italic;font-size:14.5px;line-height:1.5;color:var(--grey)} /* L4 */

body[data-layout="cine-kompakt"] .pr-faecher{display:block;width:100%;height:100%;
  min-height:0;align-self:stretch;overflow:visible}
body[data-layout="cine-kompakt"] .pr-stop-a{stop-color:var(--pr-ton);stop-opacity:1}
body[data-layout="cine-kompakt"] .pr-stop-b{stop-color:var(--pr-ton);stop-opacity:.1}
body[data-layout="cine-kompakt"] .pr-bahn{fill:none;stroke-width:2.6;stroke-linecap:round}
body[data-layout="cine-kompakt"] .pr-schein{fill:none;stroke:var(--pr-ton);
  stroke-width:11;stroke-linecap:round;opacity:.13;filter:blur(3px)}
/* Der wandernde Lichtimpuls. Er laeuft nur auf der eigenen Bahn der Seite,
   dezent und mit langer Pause: gut zwei Sekunden Lauf, gut drei Sekunden
   Ruhe. Der farbige Schein darunter haelt ihn auch dort sichtbar, wo die
   Bahn selbst schon fast ausgelaufen ist. */
body[data-layout="cine-kompakt"] .pr-impuls{fill:none;stroke:#fff;stroke-width:2.6;
  stroke-linecap:round;stroke-dasharray:9 91;stroke-dashoffset:9;opacity:0;
  filter:drop-shadow(0 0 4px var(--pr-ton));
  animation:prPuls 5.4s var(--gfx-ease) infinite}
@keyframes prPuls{
  0%{stroke-dashoffset:9;opacity:0}
  5%{opacity:.95}
  36%{opacity:.95}
  42%{stroke-dashoffset:-100;opacity:0}
  100%{stroke-dashoffset:-100;opacity:0}
}

body[data-layout="cine-kompakt"] .pr-wege{list-style:none;margin:0;padding:0;
  display:grid;grid-template-rows:repeat(4,1fr);align-self:stretch}
body[data-layout="cine-kompakt"] .pr-weg{display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;
  align-content:center;padding:6px 0 6px 14px}
body[data-layout="cine-kompakt"] .pr-disc{width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:#fff;
  border:1.5px solid color-mix(in srgb,var(--pr-ton) 42%,#fff);
  box-shadow:0 9px 22px -13px color-mix(in srgb,var(--pr-ton) 85%,transparent)}
body[data-layout="cine-kompakt"] .pr-disc svg{width:23px;height:23px;display:block;
  fill:none;stroke:var(--pr-ton);stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round}
/* Die eigene Bahn der Seite: gefuellter Kreis, satter Ton. Sie ist die
   Antwort auf die Frage "und ich?" und darf sich von den drei anderen
   unterscheiden. */
body[data-layout="cine-kompakt"] .pr-eigen .pr-disc{background:var(--pr-ton);
  border-color:var(--pr-ton)}
body[data-layout="cine-kompakt"] .pr-eigen .pr-disc svg{stroke:#fff}
/* Die Beschriftungen liegen ueber dem Faecher (eigene Stapelstufe) und tragen
   die Kontur der Flaeche. Beides zusammen, nicht eines von beiden: Eine
   Kontur allein hilft nicht, wenn die Linie darueber gezeichnet wird. */
body[data-layout="cine-kompakt"] .pr-tx{position:relative;z-index:1;min-width:0}
body[data-layout="cine-kompakt"] .pr-hergang{display:block;font-family:var(--font-sans);
  font-size:var(--gfx-label);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.35;color:var(--grey)} /* L4 */
body[data-layout="cine-kompakt"] .pr-eigen .pr-hergang{color:var(--accent-deep)}
body[data-layout="cine-kompakt"] .pr-vertrag{display:block;margin-top:3px;
  font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.35;
  color:var(--ink)}
body[data-layout="cine-kompakt"] .pr-t-grau .pr-vertrag{color:var(--grey)} /* L4 */
body[data-layout="cine-kompakt"] .pr-eigen .pr-vertrag{font-size:19px;
  color:var(--accent-deep)}
body[data-layout="cine-kompakt"] .pr-fuss{margin:18px auto 0;max-width:var(--gfx-maxw);
  font-style:italic;font-size:13.5px;color:var(--grey)} /* L4 */

/* Anfangsstellungen nur unter html.js; ohne Skript steht alles sofort da. */
html.js body[data-layout="cine-kompakt"] .pr-weg{opacity:0;transform:translateX(14px)}
html.js body[data-layout="cine-kompakt"] .gfx-prisma.is-in .pr-weg{opacity:1;
  transform:none;
  transition:opacity var(--gfx-dur) var(--gfx-ease),transform var(--gfx-dur) var(--gfx-ease);
  transition-delay:calc(.2s + var(--i)*var(--gfx-stagger))}
html.js body[data-layout="cine-kompakt"] .pr-bahn,
html.js body[data-layout="cine-kompakt"] .pr-schein{opacity:0}
html.js body[data-layout="cine-kompakt"] .gfx-prisma.is-in .pr-bahn{opacity:1;
  transition:opacity var(--gfx-dur) var(--gfx-ease) .15s}
html.js body[data-layout="cine-kompakt"] .gfx-prisma.is-in .pr-schein{opacity:.13;
  transition:opacity var(--gfx-dur) var(--gfx-ease) .15s}

/* Unter 901 px loest sich die Zeile auf: Der Faecher haette dort keine Breite
   mehr, in der er auffaechern koennte. An seine Stelle tritt je Station eine
   Kante in ihrem Ton -- dieselbe Zuordnung, nur ohne die Kurve. */
@media(max-width:900px){
  body[data-layout="cine-kompakt"] .pr-buehne{grid-template-columns:1fr;
    justify-items:center;gap:20px}
  body[data-layout="cine-kompakt"] .pr-strahl,
  body[data-layout="cine-kompakt"] .pr-faecher{display:none}
  /* Das Glas bekommt eine Obergrenze. Ohne sie nimmt es die volle Spaltenbreite
     und ist auf einem Telefon groesser als die vier Wege zusammen -- gemessen
     am 30.08.2026 bei 375 px. Der Rhombus ist der Verzweigungspunkt und nicht
     das Motiv der Seite. */
  body[data-layout="cine-kompakt"] .pr-glas{width:100%}
  body[data-layout="cine-kompakt"] .pr-glas-svg{max-width:168px;margin:0 auto}
  body[data-layout="cine-kompakt"] .pr-wege{width:100%;grid-template-rows:none;
    gap:16px}
  body[data-layout="cine-kompakt"] .pr-weg{padding:0 0 0 16px;
    border-left:3px solid var(--pr-ton)}
  /* Vertragsnamen sind lange, unteilbare Woerter. "Vermoegensschadenhaftpflicht"
     hat 27 Zeichen und passt bei 320 px in keine Spalte, die noch einen
     Symbolkreis daneben traegt. Die Trennung nach den Regeln der Sprache ist
     hier die einzige Loesung, die nicht mitten im Wort abschneidet; der
     Zeilenumbruch an beliebiger Stelle steht als Rueckfall dahinter. */
  body[data-layout="cine-kompakt"] .pr-vertrag{font-size:15.5px;
    hyphens:auto;overflow-wrap:break-word}
  body[data-layout="cine-kompakt"] .pr-eigen .pr-vertrag{font-size:16.5px}
  body[data-layout="cine-kompakt"] .pr-fuss{text-align:center}
  html.js body[data-layout="cine-kompakt"] .pr-weg{transform:translateY(12px)}
}

/* ---------- Wertbalken: Groessen auf gemeinsamer Skala ----------
   Eine Achse, eine Normierung: Der groesste Wert einer Achse fuellt ihre
   Schiene ganz aus. Zwei verschieden skalierte Balken nebeneinander waeren
   genau die Art Bild, die niemand nachrechnet und jeder glaubt. */
body[data-layout="cine-kompakt"] .wb-stage{position:relative;
  max-width:var(--gfx-maxw);margin:0 auto}
body[data-layout="cine-kompakt"] .wb-kopf,
body[data-layout="cine-kompakt"] .wb-reihe{display:grid;
  grid-template-columns:minmax(150px,1.05fr) repeat(var(--wb-a),minmax(0,1fr));
  gap:10px clamp(18px,3vw,34px)}
body[data-layout="cine-kompakt"] .wb-kopf{margin:0 0 2px;align-items:end}
/* Die Kopfzeile traegt keine Zelle fuer die Reihenbeschriftung; der erste
   Achsenname setzt sich in die zweite Spalte, die folgenden ruecken von
   selbst nach. */
body[data-layout="cine-kompakt"] .wb-kopf-a:first-child{grid-column-start:2}
body[data-layout="cine-kompakt"] .wb-kopf-a{font-family:var(--font-sans);
  font-size:var(--gfx-label);font-weight:600;letter-spacing:var(--gfx-track);
  text-transform:uppercase;color:var(--grey)} /* L4 */
body[data-layout="cine-kompakt"] .wb-reihen{list-style:none;margin:0;padding:0;
  display:grid}
body[data-layout="cine-kompakt"] .wb-reihe{align-items:center;
  padding:clamp(16px,2.2vw,22px) 0;border-top:1px solid var(--line-soft)}
body[data-layout="cine-kompakt"] .wb-label{font-family:var(--font-display);
  font-weight:600;font-size:17px;line-height:1.35;color:var(--ink);min-width:0}
body[data-layout="cine-kompakt"] .wb-zusatz{display:block;margin-top:5px;
  font-family:var(--font-sans);font-weight:400;font-size:13.5px;line-height:1.5;
  color:var(--grey)} /* L4 */
body[data-layout="cine-kompakt"] .wb-zelle{display:grid;gap:9px;min-width:0}
/* Der Achsenname an der Zelle erscheint erst, wenn die Kopfzeile weicht. */
body[data-layout="cine-kompakt"] .wb-achse{display:none}
body[data-layout="cine-kompakt"] .wb-schiene{display:block;height:14px;
  border-radius:999px;background:var(--line-soft);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 7%,transparent)}
body[data-layout="cine-kompakt"] .wb-balken{display:block;height:100%;width:var(--w);
  border-radius:999px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 52%,#fff),
                                    color-mix(in srgb,var(--accent) 28%,#fff))}
/* Die betonte Reihe traegt den satten Verlauf und den weichen Schein. Ohne
   diese Umkehr laege die Betonung bei der Reihenfolge statt bei der Aussage. */
body[data-layout="cine-kompakt"] .wb-hervor .wb-balken{
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  box-shadow:0 8px 20px -9px color-mix(in srgb,var(--accent) 88%,transparent)}
body[data-layout="cine-kompakt"] .wb-wert{font-family:var(--font-display);
  font-weight:600;font-size:19px;line-height:1.2;color:var(--ink);
  font-variant-numeric:tabular-nums}
body[data-layout="cine-kompakt"] .wb-hervor .wb-wert{font-size:22px;
  color:var(--accent-deep)}
body[data-layout="cine-kompakt"] .wb-hervor .wb-label{color:var(--accent-deep)}
/* Der Bildtraeger der Bildbeschreibung: nicht sichtbar, aber im Baum. */
body[data-layout="cine-kompakt"] .wb-aria,
body[data-layout="cine-kompakt"] .kk-aria,
body[data-layout="cine-kompakt"] .hz-aria{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Das Wachsen der Balken laeuft ueber clip-path und nicht ueber scaleX: Ein
   gestauchter Balken haette waehrend der Bewegung eine verzerrte Rundung an
   der Spitze. Anfangsstellung nur unter html.js. */
html.js body[data-layout="cine-kompakt"] .wb-balken{clip-path:inset(0 100% 0 0)}
html.js body[data-layout="cine-kompakt"] .gfx-wertbalken.is-in .wb-balken{
  clip-path:inset(0 0 0 0);
  transition:clip-path calc(var(--gfx-dur) + .2s) var(--gfx-ease);
  transition-delay:calc(.12s + var(--i)*var(--gfx-stagger))}

@media(max-width:760px){
  body[data-layout="cine-kompakt"] .wb-kopf{display:none}
  body[data-layout="cine-kompakt"] .wb-reihe{grid-template-columns:1fr;
    gap:16px;align-items:start}
  body[data-layout="cine-kompakt"] .wb-achse{display:block;
    font-family:var(--font-sans);font-size:var(--gfx-label);font-weight:600;
    letter-spacing:var(--gfx-track);text-transform:uppercase;color:var(--grey)} /* L4 */
}

/* ---------- Anteilsbogen: ein belegter Anteil an einem Ganzen ----------
   Bewusst kein Kuchen: Der Kuchen rechnet die Teile gegen die Summe nach, und
   hier gibt es nur einen benannten Teil. Ein Kreis mit einem namenlosen
   zweiten Stueck behauptete eine Aufschluesselung, die die Quelle nicht
   hergibt. */
body[data-layout="cine-kompakt"] .ab-stage{display:grid;
  grid-template-columns:minmax(196px,258px) minmax(0,1fr);
  gap:clamp(22px,4vw,52px);align-items:center;max-width:var(--gfx-maxw);margin:0 auto}
body[data-layout="cine-kompakt"] .ab-saeule{display:grid;gap:12px;
  justify-items:center;width:100%}
body[data-layout="cine-kompakt"] .ab-ring{position:relative;display:grid;
  place-items:center;width:100%}
body[data-layout="cine-kompakt"] .ab-svg{display:block;width:100%;height:auto;
  overflow:visible}
body[data-layout="cine-kompakt"] .ab-spur{fill:none;stroke:var(--line-soft);
  stroke-width:16}
body[data-layout="cine-kompakt"] .ab-schein{fill:none;stroke:var(--accent);
  stroke-width:26;stroke-linecap:round;opacity:.16;filter:blur(5px);
  transform:rotate(-90deg);transform-origin:80px 80px}
body[data-layout="cine-kompakt"] .ab-bogen{fill:none;stroke-width:16;
  stroke-linecap:round;transform:rotate(-90deg);transform-origin:80px 80px}
body[data-layout="cine-kompakt"] .ab-g-a{stop-color:var(--accent-deep)}
body[data-layout="cine-kompakt"] .ab-g-b{stop-color:var(--accent-bright)}
body[data-layout="cine-kompakt"] .ab-schatten{fill:var(--grey);opacity:.13}
/* Der Kern sitzt in der freien Flaeche des Rings. 58 Prozent des
   Durchmessers sind das, was zwischen den beiden Bogenkanten uebrig bleibt;
   mehr laeuft ueber den Bogen, und das ist am 30.08.2026 in der ersten
   Fassung genau passiert. */
body[data-layout="cine-kompakt"] .ab-kern{position:absolute;margin:0;
  max-width:58%;text-align:center}
body[data-layout="cine-kompakt"] .ab-wert{font-family:var(--font-display);
  font-weight:600;font-size:clamp(26px,4vw,36px);line-height:1.08;
  color:var(--accent-deep);font-variant-numeric:tabular-nums}
body[data-layout="cine-kompakt"] .ab-bezug{margin:0;max-width:24ch;
  text-align:center;font-family:var(--font-sans);font-size:13.5px;
  line-height:1.5;color:var(--grey)} /* L4 */
body[data-layout="cine-kompakt"] .ab-aussage{margin:0;max-width:46ch;
  font-size:16.5px;line-height:1.62;color:var(--ink-2)}

/* Der Bogen zeichnet sich beim Hereinscrollen. Der volle Bogen steht als
   Praesentationsattribut am Element, das Stylesheet setzt nur unter html.js
   den Nullzustand -- ohne Skript ist der Anteil damit sofort vollstaendig. */
html.js body[data-layout="cine-kompakt"] .ab-bogen{stroke-dasharray:0 100}
html.js body[data-layout="cine-kompakt"] .ab-schein{opacity:0}
html.js body[data-layout="cine-kompakt"] .gfx-anteil.is-in .ab-bogen{
  stroke-dasharray:var(--ab-a) var(--ab-r);
  transition:stroke-dasharray 1.15s var(--gfx-ease) .15s}
html.js body[data-layout="cine-kompakt"] .gfx-anteil.is-in .ab-schein{opacity:.16;
  transition:opacity var(--gfx-dur) var(--gfx-ease) .4s}

/* ---------- Kennzahlkarten: zwei oder drei belegte Zahlen ----------
   Die Herkunft steht an der Karte und nicht am Fuss der Grafik: Drei Zahlen
   aus drei Erhebungen mit drei Standjahren lassen sich nicht in einer
   Bildunterschrift zusammenfassen, ohne dass jemand das falsche Jahr auf die
   falsche Zahl bezieht. */
body[data-layout="cine-kompakt"] .kk-stage{position:relative;
  max-width:var(--gfx-maxw);margin:0 auto}
body[data-layout="cine-kompakt"] .kk-feld{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(var(--kk-n),minmax(0,1fr));
  gap:clamp(14px,2.2vw,26px)}
body[data-layout="cine-kompakt"] .kk-karte{position:relative;overflow:hidden;
  padding:clamp(20px,2.6vw,30px);border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,var(--accent-soft2));
  box-shadow:0 18px 34px -26px color-mix(in srgb,var(--accent) 70%,transparent)}
body[data-layout="cine-kompakt"] .kk-karte::before{content:"";position:absolute;
  left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--accent-deep),
                                   color-mix(in srgb,var(--accent) 22%,#fff))}
/* Die betonte Karte bleibt hell. Eine gefuellte dunkle Karte saehe kraeftiger
   aus und wuerde die Herkunftszeile darauf unter das Kontrastmass druecken --
   und die Herkunft ist bei einer Zahlengrafik kein Beiwerk. */
body[data-layout="cine-kompakt"] .kk-hervor{
  border-color:color-mix(in srgb,var(--accent) 42%,#fff);
  box-shadow:0 22px 42px -24px color-mix(in srgb,var(--accent) 88%,transparent)}
body[data-layout="cine-kompakt"] .kk-hervor::before{height:5px;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent))}
body[data-layout="cine-kompakt"] .kk-zahl{margin:0;display:flex;flex-wrap:wrap;
  align-items:baseline;gap:4px 9px}
body[data-layout="cine-kompakt"] .kk-wert{font-family:var(--font-display);
  font-weight:600;font-size:clamp(30px,3.8vw,40px);line-height:1;
  color:var(--accent-deep);font-variant-numeric:tabular-nums}
body[data-layout="cine-kompakt"] .kk-einheit{font-family:var(--font-sans);
  font-weight:600;font-size:15px;letter-spacing:var(--gfx-track);
  text-transform:uppercase;color:var(--grey)} /* L4 */
body[data-layout="cine-kompakt"] .kk-text{margin:13px 0 0;font-size:15.5px;
  line-height:1.6;color:var(--ink-2)}
body[data-layout="cine-kompakt"] .kk-herkunft{margin:15px 0 0}
body[data-layout="cine-kompakt"] .kk-herkunft .gfx-src{display:block;font-size:12.5px;
  font-style:normal;color:var(--grey)} /* L4 */

html.js body[data-layout="cine-kompakt"] .kk-karte{opacity:0;transform:translateY(14px)}
html.js body[data-layout="cine-kompakt"] .gfx-kennzahlkarten.is-in .kk-karte{opacity:1;
  transform:none;
  transition:opacity var(--gfx-dur) var(--gfx-ease),transform var(--gfx-dur) var(--gfx-ease);
  transition-delay:calc(.1s + var(--i)*var(--gfx-stagger))}

@media(max-width:760px){
  body[data-layout="cine-kompakt"] .ab-stage{grid-template-columns:1fr;
    justify-items:center;gap:26px}
  body[data-layout="cine-kompakt"] .ab-ring{max-width:250px}
  body[data-layout="cine-kompakt"] .ab-aussage{text-align:center}
  body[data-layout="cine-kompakt"] .kk-feld{grid-template-columns:1fr}
}

/* Reduzierte Bewegung: der Endzustand, und zwar sofort. Der Lichtimpuls
   verschwindet ganz -- er ist Bewegung und sonst nichts, ein stehender
   Impuls waere ein weisser Fleck auf der Bahn. */
@media(prefers-reduced-motion:reduce){
  body[data-layout="cine-kompakt"] .pr-impuls{animation:none;opacity:0}
  html.js body[data-layout="cine-kompakt"] .pr-weg,
  html.js body[data-layout="cine-kompakt"] .pr-bahn,
  html.js body[data-layout="cine-kompakt"] .kk-karte{opacity:1!important;
    transform:none!important;transition:none!important}
  html.js body[data-layout="cine-kompakt"] .pr-schein,
  html.js body[data-layout="cine-kompakt"] .ab-schein{opacity:.13!important;
    transition:none!important}
  html.js body[data-layout="cine-kompakt"] .wb-balken{clip-path:none!important;
    transition:none!important}
  html.js body[data-layout="cine-kompakt"] .ab-bogen{
    stroke-dasharray:var(--ab-a) var(--ab-r)!important;transition:none!important}
}

/* ---------- Anteilsbalken: ein Ganzes, mehrfach aufgeteilt ----------
   Jede Reihe ist dieselbe Strecke, und die Strecke ist das Ganze. Deshalb
   fuellen die Abschnitte den Balken genau aus (der Renderer rechnet jede Reihe
   auf hundert nach) und deshalb ist die Schiene hier nicht grau hinterlegt wie
   beim Wertbalken: Ein leerer Rest wuerde behaupten, es fehle noch etwas.

   **Die Farben.** `grund` und die Schraffur folgen der Weltfarbe: der
   Festzuschuss ist die Leistung, um die es auf der Seite geht, und die traegt
   in jeder Welt deren Ton. Das warme Paar (`rest`, `zusatz`) ist dagegen fest
   verdrahtet und wird NICHT zur Weltfarbe -- es ist die Gegenfarbe zur Welt
   und muesste sonst in jeder Welt neu erfunden werden. Dieselbe Begruendung
   wie bei #8A6D1D am Pruefhinweis weiter oben.

   **Nachgemessen, Schwelle 4,5:1** (alle vier Welten, weisse beziehungsweise
   dunkle Schrift auf ihrem eigenen Abschnitt):

     grund     weiss auf --accent-ink     5,53 privat · 7,26 firmen
                                          5,83 schausteller · 6,70 verwalter
     weg       --accent-deep auf dem dunklen Streifen (34 % Akzent auf Weiss)
                                          4,98 privat · 5,61 firmen
                                          5,38 schausteller · 5,81 verwalter
                auf dem hellen Streifen (18 %): 6,06 bis 7,41
     rest      #7A5A1C auf #F7EAD2        5,34
     zusatz    weiss auf #96690F          4,86

   Der Gold-Ton weicht vom freigegebenen Entwurf ab, und zwar aus genau einem
   Grund: Dessen #C9922F traegt weisse Schrift mit 2,75:1 und faellt damit
   nicht knapp, sondern deutlich durch. #96690F ist derselbe Farbton (40 statt
   39 Grad), eine Stufe dunkler, und haelt 4,86:1.

   **Die Schraffur ist der zweite Unterschied neben der Farbe.** Der Abschnitt,
   der zum Stichtag wegfaellt, ist auch in Graustufen und bei Farbfehlsichtig-
   keit als der andere erkennbar; der Prozentwert steht ohnehin als Text darin.
   Ein solider `background-color` liegt unter dem Streifenbild, damit die
   Kontrastmessung einen Grund findet und nicht raten muss. */
body[data-layout="cine-kompakt"] .gfx-anteilsbalken{
  --an-weg-a:color-mix(in srgb,var(--accent) 34%,#fff);
  --an-weg-b:color-mix(in srgb,var(--accent) 18%,#fff);
  --an-rest:#F7EAD2; --an-rest-linie:#E3CFA6; --an-rest-ink:#7A5A1C;
  --an-zusatz:#96690F;
  --an-spalte:clamp(126px,17vw,186px); --an-luft:clamp(14px,2.2vw,22px)}
body[data-layout="cine-kompakt"] .an-stage{position:relative;
  max-width:var(--gfx-maxw);margin:0 auto}
body[data-layout="cine-kompakt"] .an-unter{margin:0 0 20px;font-size:17px;
  line-height:1.55;color:var(--ink-2);max-width:74ch}
body[data-layout="cine-kompakt"] .an-legende{display:flex;flex-wrap:wrap;
  margin:0 0 18px;gap:9px clamp(18px,3vw,28px)}
body[data-layout="cine-kompakt"] .an-lg{display:inline-flex;align-items:center;
  gap:9px;font-size:14.5px;line-height:1.4;color:var(--grey)} /* L4 */
body[data-layout="cine-kompakt"] .an-lg i{flex:none;width:15px;height:15px;
  border-radius:4px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent)}
body[data-layout="cine-kompakt"] .an-lg.an-r-grund i{background:var(--accent-ink)}
body[data-layout="cine-kompakt"] .an-lg.an-r-weg i{background-color:var(--an-weg-b);
  background-image:repeating-linear-gradient(135deg,var(--an-weg-a) 0 3px,
                                                    var(--an-weg-b) 3px 6px)}
body[data-layout="cine-kompakt"] .an-lg.an-r-rest i{background:var(--an-rest);
  border-color:var(--an-rest-linie)}
body[data-layout="cine-kompakt"] .an-lg.an-r-zusatz i{background:var(--an-zusatz)}

body[data-layout="cine-kompakt"] .an-reihen{list-style:none;margin:0;padding:0;
  display:grid;gap:13px}
body[data-layout="cine-kompakt"] .an-reihe{display:grid;
  grid-template-columns:var(--an-spalte) minmax(0,1fr);
  gap:0 var(--an-luft);align-items:center}
body[data-layout="cine-kompakt"] .an-was{text-align:right;min-width:0}
body[data-layout="cine-kompakt"] .an-was b{display:block;
  font-family:var(--font-display);font-weight:600;font-size:17px;line-height:1.3;
  color:var(--ink)}
body[data-layout="cine-kompakt"] .an-was small{display:block;margin-top:3px;
  font-size:13.5px;line-height:1.45;color:var(--grey)} /* L4 */
body[data-layout="cine-kompakt"] .an-balken{display:flex;min-width:0;
  height:clamp(48px,5.4vw,58px);border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface)}
/* Die Breite steht als Praesentationswert am Element und nicht im Stylesheet:
   Sie ist die Zahl, nicht die Gestaltung. */
body[data-layout="cine-kompakt"] .an-seg{flex:0 0 var(--w);min-width:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 6px;hyphens:auto;overflow-wrap:break-word;
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(15px,1.75vw,21px);line-height:1.15;
  font-variant-numeric:tabular-nums}
/* Der Schlussbalken traegt Woerter statt Zahlen. Sie brauchen mehr Platz und
   weniger Groesse, sonst steht "Zahnzusatzversicherung" ueber drei Zeilen. */
body[data-layout="cine-kompakt"] .an-schluss .an-seg{
  font-size:clamp(14px,1.5vw,18px);padding:0 12px}
/* Die Rollenklasse steht an zwei Stellen: am Abschnitt und am Legendeneintrag.
   Diese Regeln gehoeren nur der ersten; ohne das `.an-seg` davor faerben sie
   den Legendentext mit ein und legen ihm die Abschnittsflaeche unter (Fund an
   der ersten Sichtprobe, 10.09.2026). */
body[data-layout="cine-kompakt"] .an-seg.an-r-grund{background:var(--accent-ink);
  color:#fff}
body[data-layout="cine-kompakt"] .an-seg.an-r-weg{background-color:var(--an-weg-b);
  background-image:repeating-linear-gradient(135deg,var(--an-weg-a) 0 6px,
                                                    var(--an-weg-b) 6px 12px);
  color:var(--accent-deep)}
body[data-layout="cine-kompakt"] .an-seg.an-r-rest{background:var(--an-rest);
  color:var(--an-rest-ink);box-shadow:inset 1px 0 0 var(--an-rest-linie)}
body[data-layout="cine-kompakt"] .an-seg.an-r-zusatz{background:var(--an-zusatz);
  color:#fff}
/* Die Rolle des Abschnitts. Auf breiten Schirmen sagt die Legende sie einmal
   fuer alle Reihen; unterhalb der Umbruchschwelle faellt die Legende weg und
   diese Zeile tritt sichtbar an ihre Stelle. */
body[data-layout="cine-kompakt"] .an-rolle,
body[data-layout="cine-kompakt"] .an-aria{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-layout="cine-kompakt"] .an-schluss{margin-top:20px;padding-top:20px;
  border-top:1px solid var(--line)}
/* Der Hinweis flucht mit dem Balken und nicht mit der Beschriftung: Er gehoert
   zu dem, was der Balken zeigt. */
body[data-layout="cine-kompakt"] .an-hinweis{font-size:16px;line-height:1.6;
  color:var(--ink-2);margin:12px 0 0 calc(var(--an-spalte) + var(--an-luft))}
body[data-layout="cine-kompakt"] .an-hinweis b{color:var(--ink);font-weight:600}

/* Der Balken waechst von links, wie beim Wertbalken und aus demselben Grund
   ueber clip-path statt scaleX: Ein gestauchter Balken haette waehrend der
   Bewegung verzerrte Rundungen. Anfangsstellung nur unter html.js. */
html.js body[data-layout="cine-kompakt"] .an-balken{clip-path:inset(0 100% 0 0)}
html.js body[data-layout="cine-kompakt"] .gfx-anteilsbalken.is-in .an-balken{
  clip-path:inset(0 0 0 0);
  transition:clip-path calc(var(--gfx-dur) + .2s) var(--gfx-ease);
  transition-delay:calc(.12s + var(--i)*var(--gfx-stagger))}

/* Schmale Schirme: die Abschnitte untereinander statt nebeneinander.
   Bei 320 px misst die Lesespalte rund 280 px; ein Abschnitt von zehn Prozent
   waere darin 28 px breit, und "10" passt dort nicht hinein. Untereinander
   traegt jede Zeile ihre Rolle im Klartext, ihren Wert und darunter die
   Strecke als eigene Schiene -- der Anteil bleibt damit exakt derselbe, die
   Schrift steht aber auf dem Seitengrund und nicht mehr auf der Farbe. */
@media(max-width:700px){
  body[data-layout="cine-kompakt"] .an-legende{display:none}
  body[data-layout="cine-kompakt"] .an-reihen{gap:26px}
  body[data-layout="cine-kompakt"] .an-reihe{grid-template-columns:1fr;
    gap:12px;align-items:start}
  body[data-layout="cine-kompakt"] .an-was{text-align:left}
  body[data-layout="cine-kompakt"] .an-balken{display:grid;gap:14px;height:auto;
    border:0;border-radius:0;background:none;overflow:visible}
  body[data-layout="cine-kompakt"] .an-schluss .an-seg,
  body[data-layout="cine-kompakt"] .an-seg{position:relative;display:grid;
    grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
    gap:2px 14px;padding:0 0 13px;text-align:left;
    font-family:var(--font-sans);font-weight:400;font-size:14.5px;
    line-height:1.4}
  /* Die Flaeche wandert vom Abschnitt in die Schiene darunter. Das muss die
     Rollenklasse zurueckstellen und nicht `.an-seg`: Die Regeln oben tragen
     zwei Klassen und gewinnen sonst trotz spaeterer Stelle. */
  body[data-layout="cine-kompakt"] .an-seg.an-r-grund,
  body[data-layout="cine-kompakt"] .an-seg.an-r-weg,
  body[data-layout="cine-kompakt"] .an-seg.an-r-rest,
  body[data-layout="cine-kompakt"] .an-seg.an-r-zusatz{background:none;
    box-shadow:none;color:var(--ink-2)}
  body[data-layout="cine-kompakt"] .an-rolle{position:static;width:auto;
    height:auto;overflow:visible;clip-path:none;white-space:normal}
  body[data-layout="cine-kompakt"] .an-zahl{font-family:var(--font-display);
    font-weight:700;font-size:17px;line-height:1.2;color:var(--ink);
    font-variant-numeric:tabular-nums}
  body[data-layout="cine-kompakt"] .an-seg::before,
  body[data-layout="cine-kompakt"] .an-seg::after{content:"";position:absolute;
    left:0;bottom:0;height:9px;border-radius:999px}
  body[data-layout="cine-kompakt"] .an-seg::before{width:100%;
    background:var(--line-soft)}
  body[data-layout="cine-kompakt"] .an-seg::after{width:var(--w)}
  body[data-layout="cine-kompakt"] .an-seg.an-r-grund::after{
    background:var(--accent-ink)}
  body[data-layout="cine-kompakt"] .an-seg.an-r-weg::after{
    background-color:var(--an-weg-b);
    background-image:repeating-linear-gradient(135deg,var(--an-weg-a) 0 5px,
                                                      var(--an-weg-b) 5px 10px)}
  body[data-layout="cine-kompakt"] .an-seg.an-r-rest::after{background:var(--an-rest);
    box-shadow:inset 0 0 0 1px var(--an-rest-linie)}
  body[data-layout="cine-kompakt"] .an-seg.an-r-zusatz::after{
    background:var(--an-zusatz)}
  body[data-layout="cine-kompakt"] .an-hinweis{margin-left:0}
  /* Kein Wischen ueber Text: In dieser Anordnung liegt Schrift im Balken. */
  html.js body[data-layout="cine-kompakt"] .an-balken{clip-path:none}
}

/* Reduzierte Bewegung: das Wachsen faellt weg, der Endzustand steht.

   **Die Ueberblendung nimmt schon der Bestand** (`*{transition:none!important}`
   weiter oben in dieser Datei), und `site.js` setzt bei reduzierter Bewegung
   sofort `is-in` auf jedes `[data-reveal]`. Was hier steht, ist die
   Absicherung dahinter und nicht die Wiederholung davon: Der Endzustand darf
   nicht daran haengen, dass jemand die Klasse vergibt. Faellt sie aus, bliebe
   die Anfangsstellung `inset(0 100% 0 0)` stehen -- und dann waere die Grafik
   fuer alle, die reduzierte Bewegung eingestellt haben, ein leerer Kasten.
   Genau dieser Schaden ist im Projekt aktenkundig (die Zeitleiste der
   Geschichtsseite, drei Wochen unsichtbar). Nachgemessen wird er in
   infografiken.spec.js, indem die Wache `is-in` selbst wieder abnimmt. */
@media(prefers-reduced-motion:reduce){
  html.js body[data-layout="cine-kompakt"] .an-balken{clip-path:none!important}
}

/* ---------- Schmale Schirme ---------- */
@media(max-width:640px){
  /* Kein Umfluss auf dem Telefon. Bei 375 px misst die Lesespalte 335 px; ein
     Float von 46 Prozent liesse dem Text 155 px, und darin steht kein Satz
     mehr, sondern eine Kette von Silben. Das Medium nimmt die volle Breite und
     steht vor dem Absatz, zu dem es gehoert -- also genau dort, wo es im
     Dokument ohnehin steht. Sicht- und Vorlesereihenfolge sind damit dieselbe. */
  body[data-layout="ratgeber"] .rg-med{float:none;width:100%;margin:4px 0 22px}
  /* Die Kapitel-Anker auf Telefonbreite: die Produktseiten-Loesung, eine
     seitlich scrollende Zeile ohne sichtbaren Rollbalken (dasselbe Muster wie
     .sprungnav ul im cine-kompakt-Block). Sechs umgebrochene Zeilen waeren
     hier ein eigener Bildschirm voller Anker vor dem ersten Kapitel. */
  body[data-layout="ratgeber"] .rg-sprung ul{flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none}
  body[data-layout="ratgeber"] .rg-sprung ul::-webkit-scrollbar{display:none}
}
@media(max-width:760px){
  body[data-layout="ratgeber"] .rg-kurz{padding:18px 20px}
  body[data-layout="ratgeber"] .rg-cta{padding:18px 20px;gap:13px}
  /* **Kindkombinator, kein Nachfahre** -- dieselbe Falle wie am 23.08.2026
     bei der 18-px-Regel, hier ein zweites Mal gefunden (24.08.2026): Der
     Nachfahrenselektor traf auch die Kapitaelchen-Zeile **in** der Grafik.
     Gemessen: 17 px statt der 12,5 px des Grafiksystems, die Zeile "AUS
     GEFÄLLIGKEIT" damit 175 statt 129 px breit -- und genau diese Breite
     entscheidet, ob die Bruecke einen freien Korridor hat.
     Seit dem 28.08.2026 zusaetzlich auf die Kapitel begrenzt, aus demselben
     Grund wie die 18-px-Regel oben: Sonst zoege sie die 13-px-Meta-Zeile im
     Kopf wieder auf 17 px. */
  body[data-layout="ratgeber"] .rg-kapitel .rg-spalte>p{font-size:17px}
}
@media(max-width:560px){
  /* Die Einordnungszeile passt bei 320 px sonst nicht: gemessen ragte
     "Privatkunden" 29 px ueber die rechte Kante. Sie darf umbrechen (oben
     flex-wrap), und die Sperrung wird eine Spur enger. */
  body[data-layout="ratgeber"] .rg-einordnung{letter-spacing:.11em;font-size:11.5px}
  /* Bei 320 px bricht die Einordnungszeile ohnehin um; der Mittelpunkt bliebe
     dann allein am Ende der ersten Zeile stehen. Der Umbruch trennt die beiden
     Angaben deutlich genug. */
  body[data-layout="ratgeber"] .rg-einordnung>span[aria-hidden]{display:none}
  /* Die Meta-Zeile bricht hier ohnehin auf drei Zeilen um. Der Mittelpunkt
     stuende dann als Aufzaehlungszeichen am Zeilenanfang, und genau so sah es
     bei 320 px auch aus (gesehen 23.08.2026). Untereinander ohne Trenner. */
  body[data-layout="ratgeber"] .rg-meta{flex-direction:column;align-items:flex-start;
    gap:5px}
  body[data-layout="ratgeber"] .rg-meta>*+*::before{content:none}
  body[data-layout="ratgeber"] .rg-cta{flex-direction:column}
  body[data-layout="ratgeber"] .rg-cta-a{white-space:normal}
  body[data-layout="ratgeber"] .rg-zitat{padding-left:18px}
}

/* ===========================================================================
   Formularcenter (24.08.2026, Ansage Maik)
   ---------------------------------------------------------------------------
   Die Kachelseite selbst (.fc-*). Der zweite Baustein, der Eckverweis oben
   rechts im Seitenkopf (.hc-ecke), ist am 25.08.2026 entfallen; siehe unten.
   =========================================================================== */

/* **Der Eckverweis (.hc-ecke) ist am 25.08.2026 entfallen** (Ansage Maik: der
   Knopf gehoert nicht in den Hero). Er hatte genau einen Traeger, die
   Schadenseite; der Weg ins Formularcenter steht dort jetzt im Kopf des
   Kachelrasters und traegt das gewoehnliche Pill-Kleid der Seite
   (.sd-fc-knopf). */

/* Das Suchband am Seitenanfang (08.09.2026, Ansage Maik: "die Suchzeile ganz
   an den Anfang"). Es traegt dieselbe Suchzeile wie sonst die Kopfleiste --
   der Generator setzt sie hier statt dort, nie an beiden Stellen (siehe
   generate_site.suchfeld()).

   **Warum das Feld hier mitwaechst und in der Kopfleiste nicht.** Oben steht
   es neben der Themenleiste und darf ihr keinen Platz nehmen, deshalb die
   festen 220 px. Hier ist es das Bedienelement des Seitenanfangs; eine Zeile,
   die auf halber Breite aufhoert, sieht aus wie ein Rest. Gedeckelt wird sie
   trotzdem: ein Eingabefeld ueber die ganze Breite eines grossen Schirms
   liest sich nicht als Feld.

   **Die Trefferliste haengt links.** In der Kopfleiste sitzt die Suche am
   rechten Rand, die Liste klappt deshalb nach links auf (right:0). Hier
   beginnt das Feld links, und eine Liste, die nach links ueber das Feld
   hinausragte, stuende ausserhalb des Satzspiegels. */
.fc-suchband{padding:20px 0 4px}
.fc-suchband-in{display:flex;flex-direction:column;gap:10px}
.fc-suchband-tx{margin:0;max-width:62ch;color:var(--grey);font-size:15.5px;
  line-height:1.6}
.fc-suchband .hsearch{align-self:flex-start;width:min(100%,520px)}
.fc-suchband .hsearch input{width:100%;height:46px;font-size:16px}
.fc-suchband .sresults{right:auto;left:0;width:100%;max-width:none}

/* Ohne Skript wertet die Suche nichts aus und hat kein Serverziel -- dieselbe
   Regel wie fuer die Zeile in der Kopfleiste (html:not(.js) .hsearch). Das
   Band verschwindet mit ihr, sonst bliebe eine Ueberschrift ohne Feld. */
html:not(.js) .fc-suchband{display:none}

/* Der Vorspann ueber den Abschnitten. */
.fc-lead{margin:0 0 22px;max-width:62ch;color:var(--grey);font-size:15.5px;
  line-height:1.6}

/* Sprungziel-Abstand fuer die Abschnittsanker. Ohne ihn verschwindet die
   Ueberschrift des angesprungenen Abschnitts unter dem klebenden Seitenkopf.
   Derselbe Wert wie bei section.tight[id]. */
.fc-welt{scroll-margin-top:clamp(96px,14vw,152px)}
/* Dasselbe fuer die Kacheln des Abschnitts "Alle Formulare": Sie tragen seit
   dem 25.08.2026 je eine Kennung, weil die Kopfsuche auf sie zeigt. Ohne
   diesen Abstand landet die angesprungene Kachel unter dem Seitenkopf, und der
   Treffer sieht aus, als haette er die falsche Stelle getroffen. */
.fc-kacheln>li[id]{scroll-margin-top:clamp(96px,14vw,152px)}

/* Ein Abschnitt je Kundengruppe, darunter "Alle Formulare". Die Trennlinie
   zwischen zwei Abschnitten ist dieselbe Haarlinie wie zwischen den
   Themengruppen des Schaden-Finders: Die Seiten gehoeren zusammen. */
.fc-welt+.fc-welt{margin-top:30px;padding-top:26px;
  border-top:1px solid var(--line-soft)}
.fc-welt-titel{font-family:var(--font-sans);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grey);
  margin:0 0 4px}
.fc-welt-zahl{margin:0 0 14px;font-size:13px;color:var(--muted)}

/* Der hervorgehobene Abschnitt: der, aus dessen Welt der Besucher kommt.
   Er steht dann als erster da (das macht site.js) und traegt hier die
   sichtbare Auszeichnung. **Farbe allein reicht nicht** -- deshalb der
   Balken links, die getoente Flaeche und die Zeile "Ihre Kundengruppe",
   die das Skript einsetzt. */
.fc-welt.fc-hervor{padding:18px 16px;border:1px solid var(--accent);
  border-left:4px solid var(--accent);border-radius:var(--r-sm);
  background:var(--accent-soft2)}
.fc-welt.fc-hervor+.fc-welt{border-top:none;padding-top:0;margin-top:30px}
.fc-welt.fc-hervor .fc-welt-titel{color:var(--accent-ink)}
/* Auf der getoenten Flaeche reicht --muted nicht mehr: #6A7681 auf #F3F9FD
   ergibt 4,37:1 (axe, 24.08.2026). --grey kommt dort auf 6,2:1. Die Regel
   gilt nur im hervorgehobenen Abschnitt; auf Weiss bleibt --muted richtig. */
.fc-welt.fc-hervor .fc-welt-zahl{color:var(--grey)}
/* **--accent-deep und nicht --accent.** Weiss auf #0092CB ergibt bei 12 px
   fett 3,51:1 und verfehlt die 4,5:1 der WCAG; axe hat das am 24.08.2026
   gefunden. #075A82 traegt denselben Farbton und kommt auf 6,8:1. */
.fc-marke{display:inline-block;margin:0 0 8px;padding:3px 10px;
  border-radius:var(--r-pill);background:var(--accent-deep);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.04em}

/* Das Raster. Eine Spalte auf dem Telefon, zwei ab 641 px, drei ab 901 px.
   Die Kachel traegt hier mehr Text als die des Schaden-Finders (Satz, Groesse,
   Seitenzahl), deshalb eine Spalte weniger als dort. */
.fc-kacheln{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:641px){.fc-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:901px){.fc-kacheln{gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Die Kachel ist ein Link auf ein PDF, nichts weiter. min-height 44px braucht
   sie rechnerisch nicht (sie ist immer hoeher), die Regel steht trotzdem da:
   Sie gilt auch dann noch, wenn einmal ein Vorschaubild fehlt. */
.fc-kachel{display:flex;flex-direction:column;height:100%;min-height:44px;
  overflow:hidden;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);text-decoration:none;color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.fc-kachel-bild{display:block;background:var(--tint);
  border-bottom:1px solid var(--line-soft)}
/* Wie bei den Formularkacheln der Schadenseite: der Kopf des Bogens, also
   Titel und erste Felder. Daran erkennt man ihn. */
.fc-kachel-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;object-position:top center}
.fc-kachel-tx{display:block;padding:13px 14px 15px}
.fc-kachel-titel{display:block;font-size:15.5px;font-weight:700;line-height:1.3;
  color:var(--ink)}
.fc-kachel-satz{display:block;margin-top:5px;font-size:13.5px;font-weight:400;
  line-height:1.5;color:var(--grey)}
/* Groesse und Seitenzahl. Leiser als der Satz, aber nicht unter dem
   Kontrastmass: --muted auf --surface liegt bei 5,1:1. */
.fc-kachel-meta{display:block;margin-top:9px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--muted)}
.fc-kachel:hover{border-color:var(--accent);box-shadow:var(--shadow-sm);
  transform:translateY(-2px)}
.fc-kachel:hover .fc-kachel-titel{color:var(--accent-ink)}
.fc-kachel:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .fc-kachel{transition:none}
  .fc-kachel:hover{transform:none}
}

/* ============================================================================
   AVD-Kampagne (08.09.2026): Hinweisband, Startseiten-Buehne, Themen-Kachel

   Vorlage ist der freigegebene Gestaltungsentwurf
   docs/project/entwurf-avd-werbung-2026-09-08.html. Farben, Masse und Aufbau
   stammen von dort. Der Entwurf fuehrt eigene Tokens (--navy:#0F2436), die von
   denen des Baums abweichen (--navy ist hier #06263E); die freigegebenen Werte
   stehen deshalb als feste Hexwerte da und nicht als Token-Verweise. Das Band
   sieht auf jeder Seite gleich aus und nimmt bewusst **nicht** die Weltfarbe
   an: Es ist ein Hinweis des Hauses, kein Teil der Welt, in der es steht.

   ZWEI ABWEICHUNGEN VOM ENTWURF, beide von der Messung erzwungen
   ---------------------------------------------------------------
   Der Entwurf setzt weissen Text auf die Markenfarbe #0092CB, einmal in der
   Marke "NEU 2027" (11,5px/800) und einmal im vollen Knopf der Buehne
   (15,5px/700). Beide sind nach WCAG 2.2 AA normaler Text und brauchen 4,5:1;
   weiss auf #0092CB liegt bei 3,52:1. Das ist derselbe Fund, den Audit F1 fuer
   den Primaer-CTA des Baums beschrieben hat (siehe .pill-blue weiter oben) und
   der dort schon einmal behoben wurde. Die Kampagne nimmt dieselbe Loesung:

     * Marke: Flaeche auf #0A6FA0 (der Wert von --accent-ink). Weiss darauf
       5,53:1.
     * Voller Knopf: der Hausverlauf #0A6FA0 -> #075A82. Weiss darauf 5,53:1
       an der hellsten und 7,52:1 an der dunkelsten Kante.

   Weiss auf blau bleibt damit weiss auf blau; nur der Ton wird der des
   Hauses. Alle uebrigen Farben des Entwurfs sind unveraendert uebernommen.

   GEMESSENE KONTRASTE DER NEUEN DUNKLEN FLAECHEN
   ----------------------------------------------
   Band, Flaeche #0F2436:   Text #fff 15,85:1 · Link #7FE0FF 10,57:1 ·
                            X-Knopf #9FC0D4 8,27:1
   Buehne, hellste Stelle des Verlaufs #0E3A52:
                            Ueberzeile #7FE0FF 8,03:1 · Fliesstext #CFE6F4
                            9,33:1 · zarter Knopf #CFE6F4 9,33:1, sein Rahmen
                            3,23:1 (1.4.11 verlangt 3:1) ·
                            Grafikbeschriftung #9FE0BA 7,93:1, #9AD6F0 7,59:1,
                            #E4CFA0 7,87:1
   Kachel, Flaeche #E8F4FB: Ueberschrift #0B1B26 15,65:1 · Satz #22333E
                            11,65:1 · Link #006E99 5,08:1
   ============================================================================ */

/* ---------- Baustein 1: das Hinweisband ueber dem Seitenkopf ----------
   Es steht im normalen Fluss vor .site-header und ist selbst nicht sticky:
   Es schiebt den Inhalt nach unten und legt sich ueber nichts. Beim Scrollen
   laeuft es weg, der Kopf bleibt. */
/* **Der Ton (Fixauftrag Maik, 08.09.2026: "faellt ueberhaupt nicht auf").**
   Das Band stand in Marine #0F2436 und verschwand damit optisch im dunklen
   Bereich der Seite. Es traegt jetzt einen Weltblau-Verlauf aus den
   Hausfarben, von #06456A nach #0C77A6, also von der dunklen Kante des
   Primaer-CTA in Richtung der Markenfarbe. Beide Kanten sind gemessen:
   weisser Text liegt darauf bei 10,16:1 (dunkle Kante) und 4,99:1 (helle
   Kante) und damit ueberall ueber den 4,5:1, die WCAG 2.2 AA fuer normalen
   Text verlangt. Die helle Kante ist bewusst bei #0C77A6 gestoppt und nicht
   heller: Ein Ton weiter (#0E7FB0) faellt auf 4,49:1 und damit knapp durch.

   `position:relative; z-index:1` ist kein Herausnehmen aus dem Fluss, sondern
   die Gegenwehr gegen den Vorhang-Footer. `#site-footer` liegt
   `position:fixed; bottom:0` mit `z-index:0` hinter dem Inhalt; positionierte
   Elemente zeichnen ueber nicht positionierten Geschwistern, und auf schmalen
   Ansichten ist der Fuss hoeher als das Fenster (gemessen 1.220 px bei 720 px
   Fensterhoehe, Oberkante bei -500). Er deckte damit auch den Seitenanfang ab:
   `elementFromPoint` auf dem Bandlink lieferte ein `UL` aus dem Fuss, der Link
   war bei 320 und 375 px nicht anklickbar. `main#main` loest dasselbe Problem
   zwei Zeilen weiter unten im Stylesheet auf genau diesem Weg; der Kopf ueber
   `z-index:80`. Das Band braucht denselben Schutz. Am Fluss aendert
   `relative` ohne Verschiebung nichts: Es schiebt weiter, es ueberlagert nicht. */
/* **Das Band traegt die Weltfarbe** (Ansage Maik, 09.09.2026: "Das AVD
   Kampagnenbanner soll in der jeweiligen Weltfarbe sein").

   Bis dahin stand hier ein fester Weltblau-Verlauf. Er ist durch die beiden
   dunklen Stufen des Akzents ersetzt, die body[data-group] je Welt setzt
   (site.css, Abschnitt "Akzentfarbe je Kundengruppe"). Damit folgt das Band
   jeder Welt von selbst, und eine fuenfte Welt braucht hier keine Zeile.
   Seiten ohne Welt behalten das blaue Bild: :root definiert --accent-deep und
   --accent-ink mit den Privat-Toenen.

   **Warum genau -deep und -ink und keine eigene Tonleiter.** Beide Stufen sind
   je Welt schon gegen Weiss gemessen (siehe Kommentar bei
   --w-schausteller-*). Kontrast ist symmetrisch, also gilt derselbe Wert fuer
   weissen Text auf der Flaeche. Nachgerechnet, Schwelle 4,5:1 fuer normalen
   Text, weisser Bandtext auf beiden Kanten des Verlaufs:

     Welt           deep            ink
     privat         #075A82  7,52   #0A6FA0  5,53
     firmen         #0A4868  9,81   #0E5C86  7,26
     schausteller   #065765  8,21   #086F81  5,83
     verwalter      #084E54  9,43   #0B666D  6,70

   Die helle Kante liegt damit in jeder Welt hoeher als die 4,99:1 des alten
   festen Verlaufs. Die hellere Schausteller-Welt (Warnung weiter oben im
   Stylesheet) ist damit ohne Sonderfall mit erledigt: Sie kommt hier gar nicht
   auf ihren hellen Grundton, sondern auf die beiden Textstufen darunter.

   --accent-bright ist bewusst **nicht** im Spiel. Er ist die helle Stufe und
   traegt dunklen Text nur knapp (gemessen 3,59 bis 4,44:1 fuer --accent-deep
   darauf) -- das haette die Marke .neu unter die Schwelle gedrueckt. Sie nimmt
   deshalb --accent-soft, siehe dort. */
.avd-band{background:linear-gradient(100deg,var(--accent-deep) 0%,var(--accent-ink) 100%);
  color:#fff;font-size:15px;line-height:1.45;
  border-bottom:1px solid rgba(255,255,255,.16);
  position:relative;z-index:1}
.avd-band .wrap{max-width:1280px;display:flex;align-items:center;gap:12px 16px;
  flex-wrap:wrap;padding-top:13px;padding-bottom:13px}
/* Die Marke: helles Feld auf farbigem Grund, dunkle Schrift darin. Weiss auf
   dem Grund haette bei dieser Groesse (11,5px/800) wieder an der
   4,5:1-Grenze gehangen.
   **Weltfarbe seit dem 09.09.2026**: das Feld nimmt --accent-soft, die
   Schrift --accent-deep. Gemessen liegt das Paar in jeder Welt weit ueber der
   Schwelle -- privat 6,72 | firmen 8,44 | schausteller 7,05 | verwalter
   8,21:1 -- und das helle Feld setzt sich weiterhin vom Band ab. */
.avd-band .neu{background:var(--accent-soft);color:var(--accent-deep);font-size:11.5px;font-weight:800;
  letter-spacing:.08em;padding:4px 10px;border-radius:var(--r-pill);flex:none}
.avd-band .txt{flex:1;min-width:220px}
.avd-band .txt b{font-weight:700}
/* Aus dem Textlink ist ein kleiner Knopf geworden. Weiss gefuellt, Schrift in
   --accent-deep: 7,52:1. */
.avd-band a.mehr{background:#fff;color:var(--accent-deep);font-weight:700;font-size:14px;
  text-decoration:none;white-space:nowrap;padding:7px 15px;
  border-radius:var(--r-pill);flex:none;line-height:1.2;
  transition:background .18s var(--ease),color .18s var(--ease)}
/* Gemessen, --accent-deep auf --accent-soft: privat 6,72 | firmen 8,44 |
   schausteller 7,05 | verwalter 8,21:1. */
.avd-band a.mehr:hover{background:var(--accent-soft);color:var(--accent-deep)}
.avd-band a.mehr:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* Der X-Knopf entsteht erst im Skript (siehe avd_band() im Generator). Ohne
   JavaScript gibt es ihn nicht, und diese Regeln greifen ins Leere. */
/* **Weiss wie der Bandtext (Vollpruefung 09.09.2026).** Der Knopf hatte den
   Tonwechsel vom 08.09. nicht mitgemacht: Auf dem alten Marine #0F2436 lag
   sein #9FC0D4 bei 8,27:1, auf dem neuen Verlauf faellt derselbe Ton auf
   2,61:1. Die nachgeschobene Aufhellung #CFE6F4 kam auf 3,87:1 -- immer noch
   unter den 4,5:1, und der X sitzt rechts, also gerade am hellsten Ende.
   axe hat genau das gemessen (3,92:1) und auf 132 Seiten rot gegeben.

   Nachgerechnet fuer alle drei Stufen des Verlaufs (#06456A -> #0A6FA0 ->
   #0C77A6), Ruhezustand:

     #9FC0D4   5,30 | 2,89 | 2,61  -- durchgefallen
     #CFE6F4   7,87 | 4,29 | 3,87  -- durchgefallen
     #ffffff  10,16 | 5,53 | 4,99  -- haelt an jeder Stelle

   Damit traegt der Knopf denselben Ton wie der Bandtext, fuer den beide
   Kanten schon beim Tonwechsel gemessen wurden. Die zweite, ueberdeckte
   Deklaration ist weg: Zwei Farben fuer dasselbe Element haben den Fehler
   ueberhaupt erst verdeckt.

   **Der Hover wird zum Wechsel der Flaeche.** Weiss auf Weiss waere keine
   Rueckmeldung mehr; der Knopf dreht sich stattdessen um -- weisses Feld,
   Schrift in --accent-deep, 7,52:1 -- und nimmt damit die Sprache von
   `a.mehr` direkt daneben auf. */
.avd-band button.zu{background:none;border:0;color:#fff;font-size:18px;
  line-height:1;cursor:pointer;padding:4px 6px;flex:none;font-family:inherit;
  border-radius:4px}
.avd-band button.zu:hover{background:#fff;color:var(--accent-deep)}
/* Der Ring liegt durch outline-offset ausserhalb des Knopfes, also auf dem
   dunklen Band -- auch dann, wenn der Knopf selbst gerade weiss gefuellt ist.
   --accent-soft ist dort die hellste Stufe der Welt und damit sichtbar. */
.avd-band button.zu:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px;border-radius:4px}
@media (max-width:640px){
  .avd-band{font-size:14px}
  .avd-band .wrap{gap:9px 12px;padding-top:11px;padding-bottom:11px}
  .avd-band a.mehr{font-size:13.5px;padding:6px 13px}
}
/* **Der eine Blick, den das Band bekommt.** Es gleitet beim Seitenaufbau
   einmal von oben herein und steht dann still: eine Bewegung je Aufruf, kein
   Blinken, kein Puls, nichts, was sich wiederholt. `transform` und `opacity`
   sind die beiden Eigenschaften, die keine Neuberechnung des Layouts
   ausloesen -- der Platz des Bandes steht von der ersten Zeichnung an fest,
   und der Inhalt darunter bewegt sich nicht mit. Wer Bewegung abbestellt hat,
   bekommt keine; das Band steht dann sofort da, wo es hingehoert. */
/* Die Strecke ist kurz mit Absicht. Eine Fassung mit `translateY(-100%)` hat
   das Band waehrend der halben Sekunde aus dem Bild geschoben; wer in diesem
   Fenster auf "Ansehen" klickte, traf ins Leere -- gemessen mit
   `elementFromPoint`, das dort "nichts" zurueckgab. Vierzehn Pixel reichen
   voellig fuer den Blick und halten den Knopf die ganze Zeit erreichbar. */
@keyframes avd-band-ein{
  from{opacity:0;transform:translateY(-14px)}
  to{opacity:1;transform:none}
}
.avd-band{animation:avd-band-ein .52s var(--ease) both}
@media (prefers-reduced-motion:reduce){
  .avd-band{animation:none}
  .avd-band a.mehr{transition:none}
}
/* Das Band gehoert nicht aufs Papier (11.09.2026). Bis dahin trug dieses
   Stylesheet keine einzige Druckregel, und das Band druckte mit: gemessen
   auf den generierten Seiten und am Hausrat-Bogen, dessen eigener Druckblock
   das Band nicht kennt. Rechner und Testfassung nahmen es schon selbst
   heraus (ihr Druckblock blendet seit dem 10.09. die Gattung .insel aus);
   dort wirkt diese Regel doppelt, und das schadet nicht. Hier steht genau
   diese eine Regel und sonst nichts; test_avd_kampagne.py
   (TestDasBandDrucktNichtMit) haelt das fest. */
@media print{
  .avd-band{display:none}
}

/* ---------- Baustein 2: die Buehne auf der Startseite ----------
   Sie steht zwischen der Vertrauenszeile des Heros und "Warum Fuhrmann"
   (Position von Maik am Screenshot freigegeben). Der Abstand nach oben ist
   groesser als nach unten: Die Karte soll sich vom Hero loesen und den
   Abschnitt darunter nicht wegdruecken. */
.avd-buehne{padding:clamp(28px,4vw,52px) 0 clamp(10px,2vw,20px)}
.avd-karte{background:linear-gradient(115deg,#0F2436 0%,#123049 62%,#0E3A52 100%);
  color:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-md);
  display:grid;grid-template-columns:1.15fr 1fr;gap:16px;overflow:hidden}
.avd-karte .avd-li{padding:34px 8px 34px 38px}
.avd-eyebrow{color:#7FE0FF;font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 10px}
/* `color:#fff` steht hier und nicht nur auf `.avd-karte`: Die Grundregel
   `h1,h2,h3,h4{color:var(--ink)}` trifft die Ueberschrift unmittelbar und
   schlaegt damit jede Vererbung von der Karte. Im Entwurf gibt es diese Regel
   nicht, dort erbte die Ueberschrift das Weiss. Im Baum stand sie in
   Tintenschwarz auf dem dunklen Verlauf: gemessen 1,17:1 (Rand 1,15:1) statt
   der verlangten 3:1. Gefunden von der Kontrastmessung in
   tests/browser/avd-kampagne.spec.js. */
.avd-karte h2{font-family:var(--font-display);font-weight:600;color:#fff;
  font-size:clamp(24px,3.2vw,36px);letter-spacing:-.01em;margin:0 0 12px;line-height:1.18}
.avd-karte h2 em{font-style:normal;color:#7FE0FF}
.avd-karte p{margin:0 0 20px;color:#CFE6F4;font-size:16px;max-width:52ch}
.avd-karte p b{color:#fff;font-weight:600}
.avd-cta{display:flex;gap:12px;flex-wrap:wrap}
.avd-cta a{text-decoration:none;display:inline-flex;align-items:center;
  border-radius:12px;font-size:15.5px;line-height:1.2}
.avd-cta .voll{background:linear-gradient(180deg,#0A6FA0,#075A82);color:#fff;
  padding:13px 26px;font-weight:700}
.avd-cta .voll:hover{color:#fff;background:linear-gradient(180deg,#0B7BB2,#0A6FA0)}
.avd-cta .zart{border:1.5px solid rgba(127,224,255,.5);color:#CFE6F4;
  padding:13px 22px;font-weight:600}
.avd-cta .zart:hover{color:#fff;border-color:#7FE0FF}
.avd-cta a:focus-visible{outline:3px solid #7FE0FF;outline-offset:3px}
.avd-karte .avd-re{display:grid;place-items:center;padding:18px 22px 18px 0}

/* ---------- Die Prisma-Grafik der Buehne ----------
   Bildsprache des Grafik-Pakets (private_infographics.render_prisma), Inhalt
   dieser Kampagne. Uebernommen sind Rhombus-Geometrie, Glasverlauf,
   Facettenlinien, Lichtkante, Lichthof, Schattenwurf und die Kurvenformel der
   Bahnen; angepasst ist, was der dunkle Marine-Grund verlangt. Die
   Beschriftungen stehen als HTML daneben und nicht im SVG -- Regel des
   Grafik-Pakets, und der Grund, warum hier nichts mehr abgeschnitten werden
   kann.

   Die drei Serientoene der Reihe, fuer den dunklen Grund aufgehellt:
   Zulagen #4CC17C (aus #1F8A4C), Steuervorteil #4FC3F0 (aus #0092CB, das ist
   --accent-bright des Hauses), Wertentwicklung #E0B86A (aus #C19A4B). Die
   Beschriftungen daneben stehen in --avd-pr-tx und sind gemessen. */
/* Die Bildunterschrift "Ihr Beitrag" haengt unter dem Glas und zieht dessen
   Mitte nach oben. Faecher und Wege heben sich um dieselbe Hoehe, sonst
   entspringen die Bahnen sichtbar unterhalb der Prisma-Taille. Die Hoehe steht
   als eine Zahl da, damit die drei Spalten nicht auseinanderlaufen koennen. */
.avd-pr{--avd-pr-fuss:22px;
  display:grid;grid-template-columns:auto minmax(46px,1fr) auto;
  align-items:center;gap:0 6px;width:100%;max-width:420px}
.avd-pr-faecher,.avd-pr-wege{margin-bottom:var(--avd-pr-fuss)}
.avd-pr-glas{display:grid;justify-items:center;gap:6px;width:96px}
.avd-pr-glas-svg{display:block;width:100%;height:auto;overflow:visible}
.avd-pr-hof{opacity:.9}
.avd-pr-hof-a{stop-color:#7FE0FF;stop-opacity:.22}
.avd-pr-hof-b{stop-color:#7FE0FF;stop-opacity:0}
/* Der Glaskoerper. Auf hellem Grund laeuft er von Weiss nach --accent-deep;
   auf dem Marine-Grund braucht er die helle Kante zuerst, sonst verschwindet
   das Glas im Hintergrund. */
.avd-pr-k-a{stop-color:#fff;stop-opacity:.97}
.avd-pr-k-b{stop-color:#9FD9F2}
.avd-pr-k-c{stop-color:#1E6E96;stop-opacity:.92}
.avd-pr-koerper{stroke:#CFE6F4;stroke-opacity:.55;stroke-width:1.2;stroke-linejoin:round}
.avd-pr-facette{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:1}
.avd-pr-facette-quer{stroke-opacity:.34}
/* Die Lichtkante auf der Flanke, der das Licht zugewandt ist. */
.avd-pr-kante{fill:none;stroke:#fff;stroke-opacity:.92;stroke-width:2.4;stroke-linecap:round}
/* Der Schattenwurf: auf dunklem Grund ein Dunkel, kein Grau. */
.avd-pr-schatten{fill:#04121C;opacity:.42}
.avd-pr-quelle{margin:0;font-size:12px;line-height:1.3;color:#CFE6F4;text-align:center}

.avd-pr-faecher{display:block;width:100%;height:118px;overflow:visible}
.avd-pr-bahn{fill:none;stroke-width:2.6;stroke-linecap:round}
.avd-pr-schein{fill:none;stroke-width:7;stroke-linecap:round;opacity:.16;
  stroke:var(--avd-pr-ton)}
.avd-pr-stop-a{stop-color:var(--avd-pr-ton);stop-opacity:1}
.avd-pr-stop-b{stop-color:var(--avd-pr-ton);stop-opacity:.12}
.avd-pr-t-zulage{--avd-pr-ton:#4CC17C;--avd-pr-tx:#9FE0BA}
.avd-pr-t-steuer{--avd-pr-ton:#4FC3F0;--avd-pr-tx:#9AD6F0}
.avd-pr-t-wert{--avd-pr-ton:#E0B86A;--avd-pr-tx:#E4CFA0}

.avd-pr-wege{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.avd-pr-weg{display:flex;align-items:center;gap:8px}
.avd-pr-punkt{flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--avd-pr-ton)}
.avd-pr-tx{display:block;line-height:1.25}
.avd-pr-tx b{display:block;font-size:12.5px;font-weight:700;color:var(--avd-pr-tx)}
.avd-pr-tx span{display:block;font-size:11.5px;color:#A9C4D6}
@media (max-width:980px) and (min-width:821px){
  .avd-pr-tx span{display:none}
}
/* Schmale Ansichten. Gemessen bei 320 px: Die Karte ist innen 228 px breit,
   die laengste Beschriftung ("Wertentwicklung") braucht mit Punkt und Abstand
   121 px, und mit einem 96 px breiten Glas plus Faecher ragte die Spalte 47 px
   aus der Karte. Glas und Faecher geben deshalb nach, die Beschriftung nicht:
   Sie ist die Aussage, das Glas ist das Bild dazu. `min-width:0` erlaubt den
   Rasterfeldern ueberhaupt erst, unter ihre Inhaltsbreite zu gehen. */
@media (max-width:560px){
  .avd-pr{grid-template-columns:auto minmax(26px,1fr) auto;gap:0 5px;max-width:100%}
  .avd-pr>*{min-width:0}
  .avd-pr-glas{width:64px}
  .avd-pr-faecher{height:96px}
  .avd-pr-tx b{font-size:12px}
  .avd-pr-tx span{font-size:11px}
}
@media (max-width:820px){
  .avd-karte{grid-template-columns:1fr}
  .avd-karte .avd-li{padding:26px}
  .avd-karte .avd-re{padding:0 26px 26px;justify-items:start}
  .avd-pr{max-width:360px}
}

/* ---------- Baustein 3: die Themen-Kachel auf vorsorgenahen Produktseiten ----------
   Eigener Abschnitt zwischen zwei Textabschnitten, linke Kante wie alles
   andere. Der Abstand ist knapper als der der Kapitel ringsum: Die Kachel ist
   ein Hinweis am Rand des Lesens, kein eigenes Kapitel. */
body[data-layout="cine-kompakt"] .pk-avd{padding:0 0 clamp(20px,3vw,40px)}
.avd-kachel{max-width:820px;border:1.5px solid #BFE0F2;background:#E8F4FB;
  border-radius:var(--r);padding:18px 22px;display:flex;gap:18px;align-items:center}
/* ---------- Das Kleinformat des Glas-Prismas ----------
   Dasselbe Glas wie auf der Buehne, dieselbe Rhombus-Geometrie und dieselbe
   Kurvenformel (beides aus tools/data_avd_kampagne.py), nur klein und fuer den
   hellen Grund abgestimmt: Die Kachel liegt auf #E8F4FB, also nimmt der
   Glaskoerper die Werte, die das Grafik-Paket auf hellen Flaechen verwendet --
   heller Koerper mit dunkler Unterkante, weisse Facetten und Lichtkante,
   Schatten in Grau. Keine Beschriftung im Bild; die steht daneben im Text. */
.avd-kachel .prisma{flex:none;display:block}
.avd-kachel .prisma svg{display:block}
.avd-kp-hof-a{stop-color:#0092CB;stop-opacity:.14}
.avd-kp-hof-b{stop-color:#0092CB;stop-opacity:0}
.avd-kp-k-a{stop-color:#fff;stop-opacity:.97}
.avd-kp-k-b{stop-color:#C2E9F8}
.avd-kp-k-c{stop-color:#075A82;stop-opacity:.9}
.avd-kp-koerper{stroke:#6FA8C0;stroke-width:1.6;stroke-linejoin:round}
.avd-kp-facette{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:1.4}
.avd-kp-facette-quer{stroke-opacity:.36}
.avd-kp-kante{fill:none;stroke:#fff;stroke-opacity:.92;stroke-width:3.2;stroke-linecap:round}
.avd-kp-schatten{fill:#5A6B76;opacity:.16}
.avd-kp-bahn{fill:none;stroke-width:5;stroke-linecap:round}
.avd-kachel h3{margin:0 0 4px;font-size:16px;line-height:1.35;color:var(--ink)}
.avd-kachel p{margin:0 0 8px;font-size:14.5px;line-height:1.55;color:#22333E}
.avd-kachel a{color:#006E99;font-weight:700;font-size:14.5px;text-decoration:none}
.avd-kachel a:hover{text-decoration:underline;color:#006E99}
.avd-kachel a:focus-visible{outline:3px solid #006E99;outline-offset:3px;border-radius:4px}
@media (max-width:560px){
  .avd-kachel{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ================================================================== Inseln
   Sofort-Inseln: die fuenf Bereiche, die Fuhrmann selbst pflegt
   (Redaktionstool, 08.09.2026). Aufbau und Herkunft: tools/inseln.py.

   .insel selbst traegt bewusst KEINE Gestaltung. Der Bereich steht auch dann
   auf jeder Seite, wenn die Insel ausgeschaltet ist -- dann ist er leer, und
   ein leeres div ohne eigene Regel nimmt keinen Platz ein. Haette er Rand
   oder Flaeche, wuerde jede Seite eine Luecke tragen fuer eine Meldung, die
   nicht da ist. Gestaltet ist nur der Inhalt, den er traegt.

   Die Farben stammen aus den Haus-Token. Weisse Schrift steht nur auf
   --accent-deep (#075A82, 6,9:1 auf Weiss); Fliesstext steht auf hellen
   Flaechen in --ink. Damit tragen die Inseln keine eigene Kontrastfrage in
   die Seiten, auf denen sie erscheinen. */

/* --- Hinweisbanner, unter dem Werbeband und ueber der Kopfleiste --- */
.insel-hinweis{background:var(--tint);border-bottom:1px solid var(--hair);
  font-size:14.5px;line-height:1.45;color:var(--ink)}
.insel-hinweis .wrap{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  padding:10px 20px}
.insel-hinweis .ih-txt{flex:1;min-width:200px}
.insel-hinweis .ih-mehr{color:var(--accent-deep);font-weight:700;white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px}
.insel-hinweis .ih-mehr:hover{color:var(--ink)}
.insel-hinweis .ih-mehr:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px;
  border-radius:4px}

/* --- Inseln im Seitenkoerper --- */
.inseln-seite > .wrap{display:flex;flex-direction:column;gap:16px}
/* Der Abstand haengt am Inhalt, nicht am Behaelter: Eine Seite, deren Inseln
   alle aus sind, soll aussehen wie vorher. :has() faellt in alten Browsern
   aus; dann steht der Abstand ueber der Regel darunter am Inhalt selbst. */
.inseln-seite:has(.insel-aktuelles),.inseln-seite:has(.insel-zeiten),
.inseln-seite:has(.insel-team){padding:28px 0 4px}
.insel-aktuelles,.insel-zeiten,.insel-team{margin:0}
.inseln-seite .insel:first-child .insel-aktuelles,
.inseln-seite .insel:first-child .insel-zeiten,
.inseln-seite .insel:first-child .insel-team{margin-top:28px}

.insel-aktuelles{background:var(--accent-soft2);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:var(--r);padding:20px 22px}
.insel-aktuelles .ia-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:8px}
.insel-aktuelles .ia-marke{background:var(--accent-deep);color:#fff;font-size:11.5px;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill)}
.insel-aktuelles h2{font-family:var(--font-display);font-size:clamp(20px,2.4vw,25px);
  line-height:1.2;color:var(--ink);margin:0}
.insel-aktuelles .ia-text p{margin:0 0 10px;color:var(--ink-2);font-size:16px;line-height:1.65}
.insel-aktuelles .ia-text p:last-child{margin-bottom:0}

.insel-zeiten,.insel-team{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-xs)}
.insel-zeiten .iz-titel,.insel-team .it-titel{font-family:var(--font-sans);font-size:14px;
  font-weight:800;letter-spacing:.02em;color:var(--accent-deep);margin:0 0 6px;
  text-transform:none}
.insel-zeiten .iz-text p,.insel-team .it-text p{margin:0 0 8px;color:var(--ink-2);
  font-size:15.5px;line-height:1.6}
.insel-zeiten .iz-text p:last-child,.insel-team .it-text p:last-child{margin-bottom:0}

@media (max-width:560px){
  .insel-hinweis{font-size:14px}
  .insel-hinweis .wrap{padding:9px 16px}
  .insel-aktuelles{padding:16px 16px}
}