/* Selbst gehostete Schriften. Kein Aufruf an Google, keine IP-Weitergabe in die USA.
   Quelle: Google Fonts (SIL Open Font License 1.1), Subsets latin und latin-ext.
   Beide Familien sind variable Schriften: eine Datei deckt alle Schnitte ab,
   deshalb steht bei font-weight eine Spanne und keine einzelne Zahl.
   Angelegt am 30.08.2026. Braucht die Seite eine weitere Familie, hier ergaenzen. */

/* Archivo italic, latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 600 900;
  font-display: swap;
  src: url(fonts/archivo-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo italic, latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 600 900;
  font-display: swap;
  src: url(fonts/archivo-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Archivo normal, latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo normal, latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Hanken Grotesk normal, latin-ext */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hanken Grotesk normal, latin */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   versichert.richtig — Der PKV-Code · Design-System v2 (editorial)
   Dunkel #0E0E10 · Hell #F6F6F4 · Gold #C69214
   Archivo (Display) · Hanken Grotesk (Text)
   ============================================================ */
:root{
  --ink:#0E0E10; --paper:#F7F6F2; --paper-2:#FFFFFF; --gold:#C69214; --gold-l:#D9AE4A; --gold-d:#8A6D00;
  --grad:linear-gradient(135deg,#D9AE4A 0%,#C69214 55%,#A07A00 100%);
  --grad-soft:linear-gradient(135deg,#FBEFC9,#F0DCA0);
  --text:#23231F; --muted:#65655F; --line:#E7E4DA; --card:#FFFFFF;
  --dark:#0E0E10; --dark-2:#15151A; --dark-3:#1E1E24; --dark-line:#2B2B31;
  --cream:#FBF8F0;
  --r-lg:26px; --r-md:18px; --r-sm:12px;
  --sh-1:0 2px 8px rgba(20,18,10,.05);
  --sh-2:0 20px 50px rgba(20,18,10,.10);
  --sh-3:0 40px 90px rgba(0,0,0,.5);
  --maxw:1360px; --narrow:760px;--breit:1080px; --rand:clamp(20px,4vw,32px);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;}
/* Sprunglink. Ohne ihn tabbt man sich auf jeder Seite durch bis zu 34
   Menuepunkte, bevor man im Text ist. Sichtbar nur bei Tastaturfokus. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#1A1407;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;padding:14px 22px;
  border-radius:0 0 12px 0;text-decoration:none;}
.skip:focus{left:0;}
html{scroll-behavior:smooth;}
/* Der Kopf klebt und ist 75 bis 77 px hoch. Ohne diese Zeile landet jede
   Sprungmarke unter ihm, samt der Ueberschrift, auf die sie zeigt.
   Gemessen am 04.09.2026 auf downloads.html#handbuch: 77 px verdeckt. */
[id]{scroll-margin-top:90px;}
body{margin:0;font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--text);background:var(--paper);line-height:1.6;font-size:18px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:var(--gold-d);text-decoration:none;}
a:hover{text-decoration:underline;}
/* Laufweite in em statt px: -2px sind bei 74px -2,7 %, bei 40px aber -5 %.
   Am Handy klebten die Woerter deshalb aneinander. Gemessen am 04.09.2026. */
h1,h2,h3,h4{font-family:'Archivo',sans-serif;color:var(--ink);line-height:1.06;letter-spacing:-.022em;margin:0;hyphens:auto;overflow-wrap:break-word;}
/* Deutsche Komposita sind laenger als eine Handyspalte. "Krankenversicherung" schob die Ueberschrift auf /beitrag/kosten/ um 26 Pixel
   aus dem Kasten, und die ganze Seite liess sich seitwaerts schieben. hyphens:auto
   greift, weil <html lang="de"> gesetzt ist; overflow-wrap ist der Rueckfall fuer
   Browser ohne deutsche Trennmuster. Auf breiten Schirmen passiert nichts, dort
   passt das Wort ohnehin. */
/* Die Startseite fuehrt mit 66px. Vorher war die h1 der Unterseiten mit 74px
   groesser als die Hauptbotschaft der Marke. */
/* Die unteren Werte der drei clamp() waren zu dicht beieinander. Gemessen am
   09.09. bei 375 Pixeln: h1 28, h2 27, h3 19, Fliesstext 18. Seiten- und
   Abschnittsueberschrift waren also praktisch gleich gross (Verhaeltnis 1,04),
   und h3 lag einen Punkt ueber dem Fliesstext. Auf dem Rechner steht dieselbe
   Leiter bei 58 / 42 / 24 / 18. Die Ordnung fehlte genau dort, wo die meisten
   lesen. Neu auf dem Handy: 33 / 25 / 20 / 18. Die oberen Werte sind
   unveraendert, auf breiten Schirmen aendert sich nichts. */
h1{font-size:clamp(33px,4.8vw,58px);font-weight:900;letter-spacing:-.032em;line-height:1.04;}
/* Die Untergrenze stand auf 34px. Auf einem 390er-Handy bleiben nach den
   Raendern 350px Spalte, und "Krankenversicherung" ist bei 34px rund 370px
   breit - das Wort schob die ganze Seite seitwaerts. Bei 28px passt es.
   Aendert nichts oberhalb von 583px Bildschirmbreite, dort greift ohnehin
   die Rechnung 4,8vw. */
h2{font-size:clamp(25px,3.6vw,42px);font-weight:800;letter-spacing:-.028em;line-height:1.08;}
h3{font-size:clamp(20px,2.2vw,24px);font-weight:800;letter-spacing:-.018em;line-height:1.18;}
h4{font-size:18px;font-weight:800;}
/* Der Kopf des Abschlussblocks ("Weitere Infos zum Thema") stand auf 76 Seiten
   fest auf 27px im style-Attribut. Auf dem Rechner war er damit kleiner als die
   Hauptueberschriften (42) und das war Absicht: er gehoert zum Anhang, nicht
   zum Text. Auf dem Handy war er mit 27 dagegen GROESSER als sie, sobald h2 auf
   25 sinkt. Als Klasse skaliert er mit und behaelt oben seine 27. */
.h2-anhang{font-size:clamp(21px,2.6vw,27px);}
p{margin:14px 0;text-wrap:pretty;}
/* Ein Seitenrand fuer alles. Vorher rechnete .nav mit 1440+32, .wrap mit
   1360+32 und .hero__inner mit 1360+24: das Logo stand 40px, die Hero-
   Ueberschrift 8px neben den Abschnittsueberschriften. Gemessen am 04.09.2026
   bei 1440px Fensterbreite: 32 / 64 / 72 / 116 px. */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--rand);}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 var(--rand);}
.center{text-align:center;} .mt0{margin-top:0;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:'Archivo',sans-serif;font-weight:800;border-radius:999px;padding:17px 32px;font-size:18px;cursor:pointer;border:none;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,filter .18s;text-decoration:none;line-height:1;letter-spacing:-.2px;}
.btn:hover{transform:translateY(-2px);text-decoration:none;}
.btn-gold{background:var(--grad);color:#1A1407;box-shadow:0 12px 30px rgba(198,146,20,.34);}
.btn-gold:hover{box-shadow:0 18px 40px rgba(198,146,20,.44);}
.btn-ghost{background:rgba(255,255,255,.06);color:#F6F6F3;border:1.5px solid rgba(246,246,243,.3);backdrop-filter:blur(4px);}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
.btn-dark{background:var(--ink);color:#F6F6F3;}
.btn-sm{padding:15px 22px;font-size:15px;}
.eyebrow{display:inline-flex;align-items:center;gap:9px;border:1.5px solid rgba(198,146,20,.5);color:var(--gold);border-radius:999px;padding:8px 16px;font-size:12px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;background:rgba(198,146,20,.06);}
.prose .sec-eyebrow,.narrow > .sec-eyebrow{display:flex;margin:52px 0 10px;}
.prose .sec-eyebrow + h2,.narrow > .sec-eyebrow + h1,.narrow > .sec-eyebrow + h2{margin-top:0;}
.prose .sec-eyebrow:first-child,.narrow > .sec-eyebrow:first-child{margin-top:0;}
.sec-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold-d);font-weight:800;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;}
.sec-eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block;}
/* --gold-d ist am 04.09.2026 von #A8841C auf #8A6D00 gewandert, damit Links und
   Abschnittsmarken auf hellem Grund die 4,5:1 erreichen (vorher 3,25 bis 3,51).
   Auf dunklem Grund kehrt sich das um, dort war der alte Ton besser. Deshalb
   nehmen dunkle Flaechen das helle Gold (11,2:1) und der Profi-Tipp mit seinem
   hellgoldenen Verlauf einen noch dunkleren Ton (5,2:1 statt vorher 2,58:1). */
.dark a:not(.btn):not(.cta):not(.bigcta),.final a:not(.btn):not(.cta):not(.bigcta),
.toolcard a:not(.btn):not(.cta),.dark .sec-eyebrow,.dark .bandlabel,
.final .sec-eyebrow,.toolcard .sec-eyebrow{color:var(--gold-l);}
.tipp a{color:#6E5500;}
.lead{font-size:20px;color:var(--muted);max-width:660px;}
.uline{background:linear-gradient(transparent 62%,rgba(198,146,20,.35) 62%);}

/* Brotkrume. Seit dem Umzug am 06.09.2026 traegt die Adresse die Zugehoerigkeit,
   diese Zeile spricht sie aus. Klein, grau, ueber der Ueberschrift, damit sie
   den Einstieg nicht stiehlt. --muted auf --paper sind 5,6:1.
   Die :not-Kette bei .dark ist kein Zierrat: die bestehende Regel fuer Links
   auf dunklem Grund traegt sie auch, und ohne sie gewinnt dort das Gold. Eine
   goldene Brotkrume sieht aus wie eine Reihe Knoepfe. */
.krume{font-family:'Archivo',sans-serif;font-size:13px;letter-spacing:.02em;
  color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 14px;}
.krume a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;}
.krume a:hover,.krume a:focus-visible{color:var(--ink);border-bottom-color:currentColor;}
.krume span[aria-hidden]{opacity:.45;}
.krume span[aria-current]{color:var(--text);}
.center > .krume,.narrow.center .krume{justify-content:center;}
.dark .krume,.final .krume{color:#9A9A94;}
.dark .krume a:not(.btn):not(.cta):not(.bigcta),
.final .krume a:not(.btn):not(.cta):not(.bigcta){color:#9A9A94;}
.dark .krume a:not(.btn):not(.cta):not(.bigcta):hover,
.final .krume a:not(.btn):not(.cta):not(.bigcta):hover{color:var(--paper);}
.dark .krume span[aria-current],.final .krume span[aria-current]{color:#DEDED8;}

/* Header / Nav */
header.site{position:sticky;top:0;z-index:60;background:#0C0C0E;border-bottom:1px solid rgba(255,255,255,.07);}
.nav{max-width:var(--maxw);margin:0 auto;padding:15px var(--rand);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;gap:11px;min-height:44px;color:#F6F6F3;font-family:'Archivo';font-weight:800;font-size:20px;letter-spacing:-.6px;}
.brand:hover{text-decoration:none;}
.brand .mark{width:34px;height:34px;flex:0 0 auto;}
.brand b{color:var(--gold);font-weight:900;}
.brand u{text-decoration-color:var(--gold);text-underline-offset:3px;}
.brand-logo{height:30px;width:auto;display:block;}
@media (max-width:480px){.brand-logo{height:26px;}}
.nav nav{display:flex;gap:26px;align-items:center;}
.nav nav a{color:#CDCDC7;font-size:15px;font-weight:600;position:relative;}
.nav nav a:hover{color:#fff;text-decoration:none;}
.nav nav a:not(.cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:width .2s;}
.nav nav a:not(.cta):hover::after{width:100%;}
.nav .cta{background:var(--grad);color:#1A1407;font-family:'Archivo';font-weight:800;font-size:15px;padding:11px 22px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 22px rgba(198,146,20,.3);}
.nav .cta:hover{transform:translateY(-1px);}
/* Dropdown-Navigation */
.nav .menu-t{display:none;}
.nav .menu-btn{display:none;}
/* align-self:stretch zieht den Menuepunkt auf die volle Hoehe der Navizeile.
   Ohne das ist er nur so hoch wie seine Textzeile, und das Aufklappmenue mit
   top:100% beginnt mitten im Kopf statt darunter: gemessen bei 50px, waehrend
   der Kopf bis 77px reicht. Es hat ihn also 27px weit ueberdeckt, und weil
   der Kopf halbdurchsichtig ist, sah man die Kante durchscheinen. */
.dd{position:relative;display:flex;align-items:center;align-self:stretch;}
.dd>a .caret{font-size:11px;margin-left:5px;opacity:.65;}
/* max-height, weil "Rechner & Checks" 797px hoch ist: bei 707px
   Fensterhoehe lagen die letzten beiden Eintraege unerreichbar unter dem
   Rand. 96px sind die Kopfleiste darueber. overscroll-behavior haelt das
   Scrollen im Menue, damit die Seite darunter stehenbleibt. */
.dd-menu{position:absolute;top:calc(100% + 15px);left:-14px;min-width:252px;display:none;flex-direction:column;background:#151517;border:1px solid rgba(255,255,255,.1);border-radius:14px;box-shadow:0 24px 48px rgba(0,0,0,.5);padding:10px;z-index:80;max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;}
/* Die 15 Pixel zwischen Menuepunkt und Menue gehoeren zur Kopfleiste, nicht
   zum Menuepunkt. Wer mit der Maus nach unten fuhr, verliess damit den
   Bereich, der das Menue offen haelt, und es klappte unter dem Zeiger zu.
   Emre am 10.09.: "wenn ich drueber gehen moechte also etwas auswaehlen,
   verschwindet es". Gemessen: .dd endet bei 61, das Menue beginnt bei 76,
   und in den 15 Pixeln dazwischen liegt die Navileiste, nicht der Punkt.
   Die Bruecke haengt am Menuepunkt und nicht am Menue: das Menue traegt
   overflow-y:auto fuer lange Listen, und daran wird alles abgeschnitten,
   was ausserhalb liegt. Ein erster Versuch mit .dd-menu::before blieb
   deshalb wirkungslos, nachgemessen. Sie ist unsichtbar und liegt innerhalb
   der Kopfleiste, wo sonst nichts anzuklicken ist. */
.dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;}
.dd:hover .dd-menu,.dd:focus-within .dd-menu,.dd.dd-auf .dd-menu{display:flex;}
.dd-menu a{padding:9px 12px;border-radius:9px;font-size:15px;color:#CDCDC7;white-space:nowrap;}
.dd-menu a:hover{background:rgba(255,255,255,.07);color:#fff;}
.dd-menu a::after{display:none!important;}
/* Werkzeuge-Menue: Name plus die Frage, die das Werkzeug beantwortet */
.dd-menu-wide{width:352px;min-width:0;left:auto;right:-14px;}
.dd-menu-wide a{white-space:normal;padding:10px 12px;}
.dd-menu-wide a b{display:block;font-weight:700;color:#F6F6F3;}
.dd-menu-wide .dd-sub{display:block;font-size:13px;line-height:1.4;color:#8C8C86;font-weight:400;margin-top:2px;}
/* Rechner & Checks traegt elf Eintraege in zwei Gruppen, "wenn du noch keine
   PKV hast" mit sechs und "wenn du schon einen Tarif hast" mit vier. So lang
   untereinander reicht das Menue auf einem kleineren Bildschirm bis unter die
   Falz. Als zwei Spalten passt derselbe Inhalt in die Breite.
   Umgesetzt mit column-count statt Grid, weil die Eintraege im HTML flach
   nebeneinander liegen und nicht in Spalten-Container gruppiert sind. Der
   Umbruch faellt nicht dorthin, wo der Browser rechnerisch teilen wuerde
   (nach Element sieben, also mitten in die erste Gruppe), sondern wird vor
   die zweite Gruppenueberschrift gezwungen. */
/* display steht hier bewusst NICHT: .dd-menu hat display:none, und diese
   Regel steht danach. Ein display:block haette das Ausblenden aufgehoben und
   das Menue dauerhaft geoeffnet. Genau das ist am 10.09. passiert. Sichtbar
   wird es allein durch die :hover-Regel weiter unten. */
.dd-menu-2sp{width:640px;column-count:2;column-gap:18px;}
/* Im Flex-Menue sind die Verweise Flex-Elemente und damit von selbst
   blockartig. Im Spaltenmenue ist der Container ein Block, also fallen sie
   auf display:inline zurueck, und column-span wirkt nur auf Bloecke. */
.dd-menu-2sp > a{display:block;}
.dd:hover .dd-menu-2sp,.dd:focus-within .dd-menu-2sp,.dd.dd-auf .dd-menu-2sp{display:block;}
.dd-menu-2sp > a,.dd-menu-2sp > .dd-gruppe{break-inside:avoid;}
/* Der erste Eintrag gehoert zu beiden Gruppen, nicht in eine Spalte. Ueber
   die volle Breite gespannt und mittig, damit beide Spalten mit ihrer
   Gruppenueberschrift auf gleicher Hoehe anfangen. Vorher stand links ein
   Eintrag neben einer Ueberschrift rechts, das sah schief aus. */
.dd-menu-2sp > a:first-child{column-span:all;text-align:center;
  border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:12px;margin-bottom:2px;}
.dd-menu-2sp > .dd-gruppe:nth-of-type(2){break-before:column;margin-top:0;border-top:none;padding-top:12px;}
@media (max-width:900px){
  /* Unter 900px ist fuer zwei Spalten kein Platz, dann wieder untereinander. */
  .dd-menu-2sp{width:auto;column-count:1;}
  .dd-menu-2sp > .dd-gruppe:nth-of-type(2){break-before:auto;margin-top:6px;border-top:1px solid rgba(255,255,255,.09);}
}
.dd-menu-wide a:hover .dd-sub{color:#C9C9C3;}
/* Zwischenueberschriften im Werkzeuge-Menue. Grund: der Double-Check stand als
   erster Eintrag zwischen sechs Rechnern, obwohl er nichts rechnet - er prueft
   einen bestehenden Tarif. Zwei Gruppen trennen jetzt "noch keine PKV" von
   "schon versichert". Kein Link, nur Beschriftung. */
.dd-menu-wide .dd-gruppe{font-family:'Archivo',sans-serif;font-weight:800;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#8C8C86;padding:12px 12px 5px;
  border-top:1px solid rgba(255,255,255,.09);margin-top:6px;}
.dd-menu-wide .dd-gruppe:first-of-type{border-top:0;margin-top:2px;}
/* 1024 statt 920: das iPad im Querformat bekam die Hover-Menues, konnte sie
   aber nicht oeffnen, weil der erste Tipp dem Link folgt. */
@media(max-width:1024px){
  .nav .menu-t{display:block;width:0;height:0;margin:0;padding:0;border:0;opacity:0;pointer-events:none;flex:0 0 auto;}
  .menu-t:focus-visible ~ .menu-btn{outline:3px solid var(--gold-l);outline-offset:2px;border-radius:10px;}
  .nav .menu-btn{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:#F6F6F3;font-size:26px;line-height:1;cursor:pointer;margin:-6px;}
  .nav .menu-btn::before{content:"☰";}
  .menu-t:checked ~ .menu-btn::before{content:"✕";}
  .nav nav{display:none;position:absolute;top:100%;left:0;right:0;background:#0E0E10;border-bottom:1px solid rgba(255,255,255,.09);flex-direction:column;align-items:stretch;gap:0;padding:10px 22px 24px;max-height:calc(100dvh - 76px);overflow:auto;box-shadow:0 30px 50px rgba(0,0,0,.5);}
  .menu-t:checked ~ nav{display:flex;}
  .nav nav>a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.06);}
  .nav nav>a::after{display:none!important;}
  .dd{flex-direction:column;align-items:stretch;position:static;}
  .dd>a{padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-weight:700;color:#fff;}
  .dd>a::after{display:none!important;}
  .dd>a .caret{display:none;}
  .dd-menu{position:static;display:flex;background:none;border:none;box-shadow:none;padding:2px 0 8px 14px;min-width:0;}
  .dd-menu a{white-space:normal;padding:11px 10px;}
  .dd-menu-wide{width:auto;min-width:0;left:auto;right:auto;}
  .nav .cta{align-self:flex-start;margin-top:16px;}
}

/* Sections & rhythm */
section{padding:96px 0;position:relative;}
.sec-sm{padding:56px 0;}
/* 96 px oben und unten sind auf einem 844 px hohen Handy 192 px leere Flaeche
   zwischen zwei Bloecken, also fast ein Viertel Bildschirm pro Uebergang.
   .hero behaelt seine 0, weil .hero (0,1,0) staerker ist als section (0,0,1). */
@media(max-width:700px){
  section{padding:60px 0;}
  section.sec-sm{padding:40px 0;}
}
.light{background:var(--paper);} .white{background:var(--paper-2);}
.cream{background:var(--cream);}
.dark{background:var(--dark);color:#F0F0EC;}
.dark h1,.dark h2,.dark h3{color:#F6F6F3;} .dark p{color:#C4C4BE;}
.divider-top{border-top:1px solid var(--line);}

/* HERO — full-bleed, asymmetric, image-backed */
.hero{background:var(--dark);color:#F4F4F0;position:relative;overflow:hidden;padding:0;}
.hero__bg{position:absolute;inset:0;z-index:0;}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center right;opacity:.5;}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0C0C0E 0%,rgba(12,12,14,.92) 42%,rgba(12,12,14,.55) 70%,rgba(12,12,14,.35) 100%);}
.hero__bg::before{content:"";position:absolute;inset:0;z-index:2;background:var(--grain);opacity:.05;mix-blend-mode:overlay;}
.hero__glow{position:absolute;z-index:0;width:520px;height:520px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(198,146,20,.28),transparent 60%);filter:blur(20px);}
.hero__inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:96px var(--rand) 104px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;}
/* Eigene Groesse fuer die Hero-Zeile (19.08.2026): mit den globalen 6vw/74px
   passt "<Wechselwort> gerechnet." zwischen 920px und 1360px Fensterbreite
   nicht in die Textspalte (gemessen 717px Text gegen 617px Spalte bei 1280px)
   und bricht in eine eigene Zeile um. 5vw/66px plus die etwas breitere
   Textspalte oben halten die Ueberschrift bei drei Zeilen. */
.hero h1{color:#fff;margin:20px 0 0;font-size:clamp(38px,5vw,66px);}
.hero h1 b{color:var(--gold);font-style:italic;font-synthesis:none;}
/* Wechselndes Wort vor "gerechnet". Die Breite wird mitanimiert, damit
   "gerechnet" nicht springt, wenn ein laengeres Wort kommt. */
.hero h1 .wechsel{position:relative;display:inline-block;white-space:nowrap;vertical-align:top;}
.hero h1 .wechsel .w{display:inline-block;transition:opacity .34s ease,transform .34s cubic-bezier(.2,.7,.3,1);}
.hero h1 .wechsel .w.ein{opacity:0;transform:translateY(.2em);}
.hero h1 .wechsel .w.ab{opacity:0;transition:opacity .18s ease;}
/* font-synthesis:none verhindert ein gefaelschtes Kursiv, falls der
   echte Schnitt einmal nicht geladen wird. Dann bleibt es aufrecht,
   statt schraeg gerechnet zu werden. */
.hero h1 u{text-decoration-color:var(--gold);text-underline-offset:8px;text-decoration-thickness:6px;}

.hero .sub{font-size:20px;color:#CDCDC7;max-width:520px;margin:22px 0 0;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.proof{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px;}
.proof .p{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#D7D7D1;font-weight:600;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:8px 13px;border-radius:999px;}
.proof .p svg{flex:0 0 auto;}
.proof .p b{color:var(--gold-l);}
/* Sprungmarke zum Typ-Finder: auf Desktop unnoetig, weil der Finder daneben steht */
.btn-finderjump{display:none;}
@media(max-width:920px){.hero__inner{grid-template-columns:1fr;gap:28px;padding:56px var(--rand) 64px;}.hero__bg img{object-position:center;opacity:.28;}.btn-finderjump{display:inline-flex;}}

/* Grids */
.grid-2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;}
@media(max-width:920px){.grid-2{grid-template-columns:1fr;gap:30px;}}

/* Trust logo strip */
.logostrip{display:flex;gap:26px;flex-wrap:wrap;align-items:center;justify-content:center;}
.logostrip .lg{font-family:'Hanken Grotesk',sans-serif;font-weight:600;color:var(--muted);font-size:15px;letter-spacing:0;}
.logostrip img{opacity:1;}

.bandlabel{color:var(--gold-d);font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;letter-spacing:2.5px;text-transform:uppercase;margin:0 0 18px;}

/* Stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.stat{padding:6px 2px;}
.stat .n{font-family:'Archivo';font-weight:900;font-size:clamp(30px,4vw,44px);color:var(--gold);line-height:1;letter-spacing:-1px;}
.stat .l{font-size:15px;color:#B6B6B0;margin-top:8px;}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr);gap:26px;}}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:42px;}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr));} .cards.four{grid-template-columns:repeat(4,minmax(0,1fr));}
/* minmax(0,1fr) statt 1fr: ein blosses 1fr erlaubt der Spalte, breiter als ihr
   Anteil zu werden, sobald der Inhalt nicht hineinpasst. Dann laufen die
   Spalten auseinander und das Raster ueber seinen Kasten. Gemessen am
   04.09.2026 auf echter-beitragsverlauf.html: 216,8 / 226,7 / 172,3 px statt
   dreimal gleich, dazu 58 px Ueberlauf. */
/* In der Lesespalte sind drei Karten zu schmal: bei 700 px bleiben 143 px
   Inhalt pro Karte, eine 25-px-Ueberschrift wie "Beitragsgarantien" braucht
   allein 170 px. Zwei Karten ergeben 255 px Inhalt. */
.narrow .cards,.narrow .cards.four,.narrow .posts{grid-template-columns:repeat(2,minmax(0,1fr));}
/* Vorher sprang .cards bei 920px von drei auf eine Spalte, waehrend
   .cards.four an derselben Stelle auf zwei ging. Drei Komponenten, drei
   Verhalten, gleiche Fensterbreite. Jetzt dieselbe Leiter fuer alle. */
@media(max-width:1024px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));}.cards.four{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.cards,.cards.two,.cards.four{grid-template-columns:1fr;}}
@media(max-width:620px){.narrow .cards,.narrow .cards.four,.narrow .posts{grid-template-columns:1fr;}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:30px;box-shadow:var(--sh-1);transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s;display:flex;flex-direction:column;}
.card.hoverable:hover{transform:translateY(-4px);box-shadow:var(--sh-2);}
.card h3{margin-bottom:8px;} .card p{color:var(--muted);font-size:15px;margin:0;}
/* Karten haben immer hellen Grund, auch in einem dunklen Abschnitt.
   Ohne diese Regel erben die Ueberschriften .dark h3 (#F6F6F3) und stehen
   dann fast weiss auf weiss. */
.dark .card h1,.dark .card h2,.dark .card h3{color:var(--ink);}
.dark .card p{color:var(--muted);}
/* Dasselbe fuer handgebaute weisse Kaesten, die .card nicht benutzen, sondern
   ihren Grund im style-Attribut mitbringen. Davon gibt es 98 auf der Seite.
   Auf unterlagen.html stand so eine Ueberschrift bei 1,08:1, also unsichtbar.
   Der Selektor greift die Inline-Farbe direkt, damit nicht 98 Seiten
   angefasst werden muessen und der naechste Kasten von selbst richtig ist. */
.dark [style*="background:#fff"],.dark [style*="background:#FFF"],
.dark [style*="background:#ffffff"],.dark [style*="background:#FFFFFF"]{color:var(--text);}
.dark [style*="background:#fff"] h1,.dark [style*="background:#fff"] h2,
.dark [style*="background:#fff"] h3,.dark [style*="background:#fff"] h4,
.dark [style*="background:#FFF"] h1,.dark [style*="background:#FFF"] h2,
.dark [style*="background:#FFF"] h3,.dark [style*="background:#FFF"] h4{color:var(--ink);}
.dark [style*="background:#fff"] p,.dark [style*="background:#FFF"] p{color:var(--muted);}
.card .ic{width:52px;height:52px;border-radius:14px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;color:var(--gold-d);font-size:26px;margin-bottom:18px;box-shadow:inset 0 0 0 1px rgba(198,146,20,.25);}
.ic svg{width:26px;height:26px;}
.card .arrow{color:var(--gold-d);font-weight:800;margin-top:auto;padding-top:16px;display:inline-flex;align-self:flex-start;gap:6px;transition:gap .2s;}
.card.hoverable:hover .arrow{gap:12px;}

/* Media / images */
.media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);position:relative;}
.media img{width:100%;height:100%;object-fit:cover;}
.media.frame{border:1px solid rgba(255,255,255,.1);}
.media--tint::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,14,16,.5));mix-blend-mode:multiply;}
.badge-float{position:absolute;z-index:3;background:rgba(14,14,16,.86);backdrop-filter:blur(6px);border:1px solid rgba(198,146,20,.35);color:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--sh-2);}
.badge-float .big{font-family:'Archivo';font-weight:900;color:var(--gold);font-size:26px;line-height:1;}
.badge-float .sm{font-size:13px;color:#C4C4BE;margin-top:3px;}

/* Tool card (dark) */
.toolcard{background:linear-gradient(180deg,#17171C,#111116);border:1px solid var(--dark-line);border-radius:var(--r-lg);padding:28px;color:#F4F4F0;box-shadow:var(--sh-3);}
.toolcard h3{color:#F6F6F3;}

/* Chips / options */
.chips{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
@media(max-width:520px){.chips{grid-template-columns:1fr;}}
.chip{background:var(--dark-3);border:1.5px solid #313139;color:#DADAD4;border-radius:14px;padding:15px;font-size:15px;font-weight:600;cursor:pointer;text-align:left;transition:all .15s;font-family:'Hanken Grotesk';}
.chip:hover{border-color:var(--gold);transform:translateY(-1px);}
.chip.on{background:var(--grad);color:#1A1407;border-color:var(--gold);font-weight:700;}

/* Forms */
/* Beschriftungen gab es nur in der Farbe fuer dunkle Formulare. Auf hellem
   Grund waren das 2,04:1, gefunden am 04.09.2026 auf zusatzversicherung.html
   an den Ankreuzfeldern "Zahn", "Klinik", "Ambulant", "Auslandsreise". */
label{font-size:13px;color:#5F5F59;font-weight:600;display:block;margin:14px 0 6px;}
.dark label,.toolcard label,.result label{color:#B6B6B0;}
/* Grundstil fuer alle Eingabefelder. Vorher waren nur Felder in dunklen
   Abschnitten und in .toolcard gestylt. Das Formular fuer die Kurzfassung
   liegt in einem hellen Abschnitt und war deshalb 22px hoch, also unter der
   Mindestgroesse fuer Tippziele. 16px Schriftgroesse verhindert ausserdem,
   dass iOS beim Antippen hineinzoomt. */
input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{
  width:100%;min-height:48px;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;padding:13px 15px;font-size:15px;color:var(--text);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
}
/* Tastatur-Fokus. Wer ohne Maus navigiert, muss sehen wo er steht.
   :focus-visible statt :focus, damit der Ring bei Mausklicks nicht aufblitzt. */
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,label.menu-btn:focus-visible{
  outline:3px solid var(--gold); outline-offset:3px; border-radius:6px;
}
.dark a:focus-visible,header.site a:focus-visible,footer a:focus-visible{
  outline-color:var(--gold-l);
}
/* Auf goldenen Flaechen war der goldene Ring unsichtbar, gemessen rund 1:1.
   Betraf jeden Haupt-Aufruf der Seite. */
.btn-gold:focus-visible,.nav .cta:focus-visible,.bigcta:focus-visible,
.chip.on:focus-visible,.tipp a:focus-visible{outline-color:var(--ink);}

input:not([type=range]):not([type=checkbox]):not([type=radio]):focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,146,20,.25);
}
.dark input,.dark select,.toolcard input,.toolcard select{width:100%;background:#0C0C0E;border:1.5px solid #313139;border-radius:12px;padding:15px;color:#F6F6F3;font-size:15px;font-family:'Hanken Grotesk';}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(198,146,20,.18);}
.range{width:100%;accent-color:var(--gold);}
/* Beide standen auf #8C8C86: auf Weiss 3,38:1, auf Papier 3,13:1, bei 12 bis
   13px. Es sind die Texte, die erklaeren, was mit den Daten passiert. */
.hint{font-size:13px;color:#5F5F59;} .consent{font-size:12px;color:#5F5F59;margin:12px 0 4px;}
.dark .hint,.dark .consent,.toolcard .hint,.toolcard .consent{color:#A8A8A2;}

/* Tabellen im Fliesstext. Gorans Ratgeber vergleichen viel in Spalten, dafuer gab es
   bisher keine Regel. Schmale Fenster scrollen die Tabelle statt die ganze Seite. */
/* Der Kasten malt selbst Weiss, also muss er auch die Textfarbe fuer hellen
   Grund setzen. Ohne das erbt eine Tabelle in einem dunklen Abschnitt das
   #F0F0EC von .dark und steht weiss auf weiss. Gefunden am 04.09.2026 auf
   gesundheitspruefung.html: 14 Zellen bei 1,14:1. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper-2);color:var(--text);margin:24px 0;box-shadow:var(--sh-1);}
.table-scroll th{color:var(--ink);} .table-scroll td b{color:var(--ink);}
.prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:440px;}
.prose th{text-align:left;font-family:'Archivo';font-weight:800;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink);background:var(--cream);padding:13px 16px;border-bottom:1px solid var(--line);}
.prose td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text);line-height:1.55;}
.prose tbody tr:last-child td{border-bottom:none;}
.prose th.num,.prose td.num{text-align:right;white-space:nowrap;}
.prose td b{color:var(--ink);}

/* Musterschreiben. Sieht aus wie ein Brief, damit klar ist: das hier kopiert man raus. */
.brief{background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0;padding:24px 26px;margin:22px 0;box-shadow:var(--sh-1);font-size:18px;line-height:1.72;}
.brief .kopf{font-family:'Archivo';font-weight:800;font-size:15px;letter-spacing:.3px;color:var(--ink);margin:0 0 4px;}
.brief .kopf + .kopf{margin-bottom:16px;font-weight:600;color:var(--muted);letter-spacing:0;}
.brief p{margin:12px 0;}
.brief .luecke{background:var(--grad-soft);border-radius:5px;padding:1px 6px;font-weight:600;color:var(--ink);white-space:nowrap;}

/* Rechtshinweis unter Vorlagen und uebersetzten Seiten. */
.rechtshinweis{margin-top:28px;padding:14px 18px;border:1px dashed var(--line);border-radius:var(--r-sm);font-size:15px;color:var(--muted);background:var(--cream);}

/* Result panel */
.result{background:#0C0C0E;border:1px solid var(--dark-line);border-radius:16px;padding:22px;text-align:center;}
.result .lbl{font-size:12px;color:#8C8C86;text-transform:uppercase;letter-spacing:1.5px;}
.result .big{font-family:'Archivo';font-weight:900;font-size:40px;color:var(--gold);line-height:1;margin:6px 0;}
.result .note{font-size:12px;color:#8C8C86;} .stars{font-size:22px;letter-spacing:3px;color:var(--gold);}

/* Profi-Tipp */
.tipp{background:var(--grad-soft);border-radius:var(--r-md);padding:24px 28px;display:flex;gap:24px;align-items:stretch;box-shadow:var(--sh-1),inset 0 1px 0 rgba(255,255,255,.55);border:1px solid rgba(198,146,20,.34);}
.tipp .bulb{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:78px;padding:0;background:none;border-radius:0;box-shadow:none;}
.tipp .bulb img{width:74px;height:74px;} .tipp .k{font-family:'Archivo';font-weight:900;font-size:15px;letter-spacing:2.4px;text-transform:uppercase;color:#7A5F00;}
.tipp p{color:#332900;font-size:18px;line-height:1.5;margin:7px 0 0;font-weight:500;}
.tipp>div:last-child{display:flex;flex-direction:column;justify-content:center;}

/* Tables */
.tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;background:#fff;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-1);}
.tbl th,.tbl td{padding:15px 17px;text-align:left;border-bottom:1px solid var(--line);}
.tbl th{background:var(--grad-soft);font-family:'Archivo';font-weight:800;color:#3A2E00;font-size:15px;}
.tbl tr:last-child td{border-bottom:none;} .tbl .g{color:var(--gold-d);font-weight:800;}

/* Prose */
.prose h2{margin:46px 0 12px;} .prose h3{margin:32px 0 6px;}
.prose p{color:var(--text);} .prose ul{margin:14px 0;padding-left:22px;} .prose li{margin:8px 0;}
.answer{background:#fff;border-left:4px solid var(--gold);border-radius:0 14px 14px 0;padding:18px 22px;font-size:18px;box-shadow:var(--sh-1);} .answer b{color:var(--ink);}

/* Blog cards */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
@media(max-width:1024px){.posts{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:620px){.posts{grid-template-columns:1fr;}}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;box-shadow:var(--sh-1);}
.post:hover{transform:translateY(-4px);box-shadow:var(--sh-2);text-decoration:none;}
.post .top{height:132px;background:linear-gradient(135deg,#1A1A1F,#0C0C0E);display:flex;align-items:center;justify-content:center;color:var(--gold);font-family:'Archivo';font-weight:900;font-size:15px;letter-spacing:1px;text-align:center;padding:16px;position:relative;overflow:hidden;}
.post .top::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;background:radial-gradient(circle,rgba(198,146,20,.25),transparent 65%);}
.post .body{padding:24px;flex:1;display:flex;flex-direction:column;}
.post .tag{font-size:12px;color:var(--gold-d);font-weight:800;text-transform:uppercase;letter-spacing:1.5px;}
.post h3{color:var(--ink);font-size:20px;margin:8px 0;} .post p{color:var(--muted);font-size:15px;margin:0 0 16px;flex:1;}
.post .rd{color:var(--gold-d);font-weight:800;font-size:15px;}

/* Bild neben Text. Stand bisher nur als Inline-Raster auf ueber-uns.html und
   ist dort auf schmalen Fenstern nie umgebrochen: bei 390 px blieben 220 px
   fuer das Portraet und 96 px fuer den Text, in dem einzelne fette Woerter
   197 px breit sind. Gemessen am 04.09.2026. */
.mediatext{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:26px;align-items:start;}
@media(max-width:640px){
  .mediatext{grid-template-columns:1fr;gap:18px;}
  .mediatext > :first-child{max-width:260px;}
}

/* Expert */
.expert{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;}
@media(max-width:920px){.expert{grid-template-columns:1fr;}}
.photo{background:linear-gradient(135deg,#1C1C20,#0C0C0E);border:1px solid var(--dark-line);border-radius:var(--r-lg);aspect-ratio:4/5;position:relative;overflow:hidden;display:flex;align-items:flex-end;box-shadow:var(--sh-3);}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#3A3A40;font-family:'Archivo';font-weight:900;font-size:18px;}
.photo .cap{position:relative;z-index:2;width:100%;background:linear-gradient(0deg,rgba(12,12,14,.92),transparent);padding:22px 18px 16px;text-align:center;color:#F6F6F3;}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:20px 0;}
.faq summary{font-family:'Archivo';font-weight:800;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--gold);font-size:26px;line-height:1;transition:transform .2s;}
.faq details[open] summary::after{content:"–";}
.faq p{color:var(--muted);margin:12px 0 0;font-size:15px;}

/* Steps */
.steps{display:flex;gap:8px;margin-bottom:20px;}
.steps .s{flex:1;height:5px;border-radius:999px;background:#2E2E34;}
.steps .s.on{background:var(--grad);}

/* Final CTA */
.final{background:var(--dark);color:#F4F4F0;text-align:center;position:relative;overflow:hidden;}
.final::before{content:"";position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:640px;height:400px;background:radial-gradient(ellipse,rgba(198,146,20,.22),transparent 65%);}
.final .wrap{position:relative;z-index:2;}
.final h2{color:#fff;max-width:760px;margin:0 auto 14px;}
.bigcta{display:inline-flex;align-items:center;gap:16px;background:var(--grad);color:#1A1407;text-decoration:none;font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(20px,2.6vw,30px);border-radius:999px;padding:22px 46px;box-shadow:0 20px 50px rgba(198,146,20,.4);transition:transform .18s;}
.bigcta:hover{text-decoration:none;transform:translateY(-2px);}
.smallnote{font-size:13px;color:#5F5F59;margin-top:16px;}
.dark .smallnote,.final .smallnote{color:#A8A8A2;}

/* Breadcrumb */
 

/* Footer */
footer{background:#08080A;color:#8C8C86;font-size:15px;padding:56px 0 30px;border-top:1px solid var(--dark-line);}
footer a{color:#B6B6B0;} footer a:hover{color:var(--gold-l);}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:32px;}
/* Die Fusszeile traegt auf 72 Seiten ein Inline-Raster mit fuenf Spalten
   (style="grid-template-columns:1.3fr 1fr 1fr 1fr 1fr"). Inline schlaegt
   Stylesheet, deshalb ist sie bisher auf keinem Handy umgebrochen: gemessen
   am 04.09.2026 bei 390 px lief sie bis x=796, also 406 px ueber den Rand.
   Gesehen hat das niemand, weil body{overflow-x:hidden} es verdeckt.
   !important ist hier das richtige Werkzeug, es hebt genau diesen Inline-Stil
   auf, ohne 72 Seiten anzufassen. */
@media(max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px;}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr!important;gap:22px;}}
/* Erste Welle Komponentenklassen (#51). Die Fusszeile stand auf 92 Seiten mit
   fuenf Spalten im style-Attribut, waehrend die Grundregel drei nennt. Jetzt
   eine Abwandlung statt 92 Einzelangaben. Die zwei Media-Queries darueber
   tragen !important und gehen weiterhin vor. */
.foot-grid.fuenf{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;}
.foot-grid .brand img{height:26px;width:auto;}
.foot-grid h4{color:#F6F6F3;font-size:15px;margin-bottom:14px;} .foot-grid a{display:block;margin:8px 0;}
/* Die vier Fussueberschriften sind seit dem 06.09. Verweise auf ihre
   Rubrikseite. Im Ruhezustand sehen sie aus wie vorher - eine Ueberschrift,
   die sich als Knopf aufspielt, waere lauter als der Inhalt darunter. Beim
   Darueberfahren zeigt der Unterstrich, dass da etwas ist. */
.foot-grid h4 a{display:inline;margin:0;color:inherit;text-decoration:none;}
.foot-grid h4 a:hover,.foot-grid h4 a:focus-visible{text-decoration:underline;text-underline-offset:3px;}
.foot-bottom{border-top:1px solid var(--dark-line);margin-top:32px;padding-top:20px;font-size:13px;color:#9A9A94;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* utility */
.pop{animation:pop .4s cubic-bezier(.2,.7,.3,1);} @keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.rise{animation:rise .6s cubic-bezier(.2,.7,.3,1) both;} @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hidden{display:none!important;}
.badge-note{display:inline-block;background:var(--grad-soft);color:#8A6D00;font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;}


/* WhatsApp-Chat-Button (global, unten rechts) */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:900;display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#062E22;font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;line-height:1;padding:14px 20px 14px 16px;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.30);text-decoration:none;transition:transform .18s,box-shadow .18s;}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.38);text-decoration:none;color:#062E22;background:#1FBE5B;}.wa-fab svg{color:#fff;fill:#fff;}
/* Weiss auf dem hellen WhatsApp-Gruen #25D366 sind 1,98:1. Das dunklere Gruen
   aus derselben Markenfamilie bringt die Schrift auf ueber 5:1. */
.wa-fab svg{width:24px;height:24px;flex:0 0 auto;}
@media(max-width:600px){.wa-fab span{display:none;}.wa-fab{padding:15px;right:16px;bottom:16px;}}

/* Such-Knopf (global, unten links). Gegenstueck zum WhatsApp-Knopf: gleiche
   Groesse, gleiche Hoehe, gleiche Form, Lupe statt Sprechblase.
   Der Knopf im Kopf scrollt weg, gebraucht wird die Suche aber beim Lesen.
   data-suche-auf ist dasselbe Attribut wie am Kopfknopf, suche.js haengt
   sich per Delegation daran. Kein zusaetzliches Skript.
   Auf dem Handy bleiben beide Knoepfe stehen, nur ohne Beschriftung: sie
   sitzen in gegenueberliegenden Ecken und kommen sich nicht ins Gehege.
   WhatsApp faellt dort NICHT weg, es ist der einzige wa.me-Verweis der
   Seite, im Kopfmenue steht keiner. */
.su-fab{position:fixed;left:20px;bottom:20px;z-index:900;display:inline-flex;align-items:center;gap:10px;background:var(--dark);color:var(--cream);font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;line-height:1;padding:14px 20px 14px 16px;border:none;border-radius:999px;box-shadow:0 10px 28px rgba(0,0,0,.30);cursor:pointer;transition:transform .18s,box-shadow .18s;}
.su-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.38);}
.su-fab svg{width:24px;height:24px;flex:0 0 auto;color:var(--gold-l);}
@media(max-width:600px){.su-fab span{display:none;}.su-fab{padding:15px;left:16px;bottom:16px;}}

/* Nutzer, die im Betriebssystem weniger Bewegung eingestellt haben, bekommen
   keine Scroll-Einblendungen und keine Uebergaenge. Die Inhalte bleiben
   vollstaendig sichtbar, es faellt nur die Bewegung weg. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .rise{opacity:1!important;transform:none!important;}
}

/* ── Buchcover ──────────────────────────────────────────────
   Das Markup stand auf drei Seiten, die Regeln dazu fehlten.
   Nachgebaut nach "Der PKV-Code - Buchcover.dc.html", 2:3. */
.cover-rahmen{position:relative;border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.65),0 0 0 1px rgba(198,146,20,.22);}
.cover{position:relative;aspect-ratio:2/3;background:#08080A;color:#F6F6F3;overflow:hidden;
  display:flex;flex-direction:column;padding:7.5% 7% 6.5%;isolation:isolate;}
.cover .c-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 12%;filter:grayscale(100%) brightness(.42) contrast(1.16);z-index:0;}
.cover .c-schatten{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,#08080A 0%,rgba(8,8,10,.86) 26%,rgba(8,8,10,0) 78%);}
.cover .c-vignette{position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 100% at 70% 22%,rgba(8,8,10,0) 38%,rgba(8,8,10,.72) 100%);}
.cover .c-unten{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.62) 34%,#08080A 82%);}
.cover>*{position:relative;z-index:2;}
.cover .c-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:'Archivo',sans-serif;font-size:clamp(8px,2.7cqw,13px);}
.cover .c-marke{font-weight:900;letter-spacing:.16em;text-transform:uppercase;}
.cover .c-ausgabe{font-weight:700;letter-spacing:.1em;color:var(--gold-l);white-space:nowrap;}
.cover .c-kicker{margin-top:auto;display:flex;align-items:center;gap:8px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(7.5px,2.4cqw,12px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
.cover .c-kicker i{display:block;width:clamp(14px,6%,30px);height:2px;background:var(--gold);flex:0 0 auto;}
.cover .c-titel{font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(30px,14cqw,72px);line-height:.9;letter-spacing:-.035em;
  margin:.32em 0 0;color:#F6F6F3;}
.cover .c-titel b{display:block;color:var(--gold);font-weight:900;}
.cover .c-linie{border-top:1px solid rgba(198,146,20,.42);margin-top:.7em;padding-top:.6em;}
.cover .c-linie h3{font-family:'Hanken Grotesk',sans-serif;font-weight:500;
  font-size:clamp(11px,4.1cqw,20px);line-height:1.28;margin:0;color:#C9C9C3;}
.cover .c-linie i{font-style:italic;color:var(--gold-l);}
.cover .c-fuss{margin-top:.75em;}
.cover .c-zahlen{display:flex;gap:5%;flex-wrap:wrap;
  font-family:'Archivo',sans-serif;font-size:clamp(8px,2.5cqw,13px);color:#B6B6B0;}
.cover .c-zahlen b{color:var(--gold-l);font-weight:900;}
.cover .c-autor{font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(10px,3.3cqw,17px);letter-spacing:.06em;margin-top:.5em;color:#F6F6F3;}
/* Ein Element mit container-type:inline-size traegt "contain:inline-size".
   Als Flex-Kind hat es damit keine Inhaltsbreite mehr und faellt auf 0 px
   zusammen, mitsamt allen in cqw gesetzten Schriftgroessen darin. Die
   Breite muss deshalb von aussen kommen. */
@supports (container-type:inline-size){.cover-rahmen{container-type:inline-size;width:100%;}}

@media(max-width:600px){.tipp{padding:20px 20px;gap:16px;}.tipp .bulb{min-width:58px;}.tipp .bulb img{width:56px;height:56px;}}

/* ── Google-Rezensionen ─────────────────────────────────────────────────────
   Bewusst ohne Fremd-Widget: kein externes Skript, keine Datenuebertragung an
   Dritte, keine Einwilligung noetig. Die Texte sind woertliche Auszuege mit
   Datum und Verweis aufs Profil, nachpruefbar. Als Klassen statt inline,
   damit die Karten auch anderswo verwendbar sind. */
.rez-band{display:flex;align-items:center;gap:24px;flex-wrap:wrap;background:var(--ink);border-radius:20px;padding:24px 30px;margin:24px 0 18px;}
.rez-band .note{font-family:'Archivo',sans-serif;font-weight:900;font-size:46px;line-height:.9;color:var(--gold-l);letter-spacing:-.02em;}
.rez-band .sterne{color:var(--gold-l);font-size:20px;letter-spacing:3px;line-height:1;}
.rez-band .zahl{margin-top:7px;font-size:15px;color:#C9C9C3;}
.rez-band .zahl b{color:#F6F6F3;}
.rez-band a{color:#F6F6F3;text-underline-offset:3px;}
/* Das vierfarbige G macht auf einen Blick klar, woher die Bewertungen stammen.
   Als Inline-SVG, damit kein Aufruf an Google geht und keine Einwilligung
   noetig wird. Weisse Flaeche darunter, weil das G auf Dunkel nicht traegt. */
.rez-band .rez-g{flex:0 0 auto;width:56px;height:56px;border-radius:15px;background:#FFFFFF;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.28);}
.rez-band .rez-g svg{width:30px;height:30px;display:block;}
.rez-band .marke{font-family:'Archivo',sans-serif;font-weight:900;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#C9C9C3;margin-bottom:7px;}
.rez-kopf .rez-vq{margin-left:auto;flex:0 0 auto;font-family:'Archivo',sans-serif;font-weight:900;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 9px;white-space:nowrap;}
.rez-kopf .rez-q{margin-left:auto;flex:0 0 auto;display:block;}
.rez-kopf .rez-q svg{width:20px;height:20px;display:block;}
.rez-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:16px;margin:0 0 16px;}
.rez{margin:0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:var(--sh-1);}
.rez-kopf{display:flex;align-items:center;gap:12px;margin:0 0 13px;}
.rez-ini{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--grad-soft);color:#1A1407;display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;font-weight:900;font-size:18px;border:1px solid rgba(198,146,20,.30);}
.rez-wer{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;color:var(--ink);line-height:1.2;}
.rez-wann{font-size:13px;color:var(--muted);margin-top:3px;}
/* Auf der weissen Rezensionskarte war das helle Gold bei 14px nur 2,41:1.
   Die Sterne sind keine Deko, sie tragen die Bewertung. */
.rez .sterne{color:var(--gold-d);font-size:15px;letter-spacing:2.5px;line-height:1;}
.rez blockquote{margin:11px 0 0;font-size:15px;line-height:1.6;color:var(--text);}
@media(max-width:600px){
  .rez-band{padding:20px 22px;gap:18px;}
  .rez-band .note{font-size:40px;}
}

/* ── Checklisten ────────────────────────────────────────────────────────────
   Eine Checkliste muss abhakbar aussehen. Leeres Kaestchen, nicht Haken: Der
   Haken bedeutet erledigt, und erledigt hat der Leser noch nichts. */
.ckl{list-style:none;margin:16px 0 0;padding:0;}
.ckl li{position:relative;padding:13px 16px 13px 46px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin:0 0 8px;font-size:15px;line-height:1.55;color:var(--text);}
.ckl li::before{content:"";position:absolute;left:15px;top:15px;width:18px;height:18px;border:2px solid var(--gold);border-radius:5px;background:#fff;}
.ckl li b{color:var(--ink);}
/* Uebersicht der Schritte, nummeriert */
.ckl-schritte{list-style:none;counter-reset:s;margin:18px 0 0;padding:0;}
.ckl-schritte li{position:relative;counter-increment:s;padding:14px 18px 14px 58px;border-bottom:1px solid var(--line);font-size:18px;line-height:1.55;}
.ckl-schritte li:last-child{border-bottom:none;}
.ckl-schritte li::before{content:counter(s);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--grad-soft);border:1px solid rgba(198,146,20,.34);color:#1A1407;font-family:'Archivo',sans-serif;font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;}
.ckl-schritte li b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;color:var(--ink);margin:0 0 2px;}


/* ── Kapitel aus dem Handbuch, in der Themenseite ──────────────────────
   Die Folien kommen aus den gepackten Praesentationen unter downloads/.
   Sie behalten ihren eigenen Hintergrund, damit der Wechsel hell/dunkel
   erhalten bleibt; Rahmen und Abstand kommen von hier. */
.kap{margin:34px 0 0;}
.kap-kopf{margin-bottom:18px;}
/* Die Folien stossen nahtlos aneinander. Getrennt werden sie durch den
   Wechsel hell/dunkel, den sie aus der Praesentation mitbringen, und durch
   eine Haarlinie, die das Werkzeug je Folie passend zum eigenen Grund setzt.
   Gerahmt wird der Block als Ganzes, nicht die einzelne Folie. */
.kap-folien{border-radius:18px;overflow:hidden;
  box-shadow:0 14px 40px rgba(14,14,16,.09);}
.kap-folie{margin:0;}
/* Flex-Kinder duerfen schrumpfen. Ohne min-width:0 erzwingt in einer Karte
   das laengste Wort die Breite, die Karte waechst ueber die Folie hinaus und
   auf dem Handy laeuft der Block aus dem Bild. Steht hier und nicht im
   Inline-Stil, weil es fuer jede Folie gilt. */
.kap-folie *{min-width:0;}
/* Die Folien waren fuer 1920 Pixel gesetzt, die Textspalte ist ein Drittel
   davon. In den engen Karten passt dann ein deutsches Kompositum nicht mehr
   in seine Spalte: gemessen am 10.09. lief "Versicherungen" auf
   vertiefung/fakten-zur-pkv.html 78 Pixel ueber seine Karte hinaus und
   "Anwartschaftsversicherung" auf pkv-fachbegriffe.html 19. Ein zu langes
   Wort bricht von allein nicht um, es laeuft. hyphens:auto greift, weil
   <html lang="de"> gesetzt ist, overflow-wrap ist der Rueckfall. */
.kap-folie{overflow-wrap:break-word;hyphens:auto;}
.kap-folie h2{font-size:26px !important;line-height:1.12 !important;}
/* Das Markenzeichen in der Folienkopfzeile ist 2376px breit, weil es fuer
   eine 1920er Praesentation gerendert wurde. Im Band lief es auf 976 x 139px
   und legte sich als Streifen ueber jede zweite Folie. Auf Kopfzeilenhoehe
   gebracht, gemessen am 07.09.2026 auf zehn Folien in Kapitel Nº1. */
/* Und seit dem 10.09.2026 gar nicht mehr: Emre hat sich daran gestoert,
   dass das Zeichen "fast ueberall in der Ecke" klebt. Auf einer Folie sitzt
   es oben rechts, das ist richtig. Untereinander gestapelt steht es alle
   paar hundert Pixel, in Kapitel Nº2 zehnmal auf einer Seite. Die Seite
   traegt es schon in ihrer Kopfzeile. Die Folienkopfzeile behaelt ihre
   Themenzeile links, nur das Zeichen rechts faellt weg. Eine Regel fuer
   alle zwoelf Kapitel, statt 120 Bilder aus dem Text zu loeschen. */
.kap-folie img[alt="versichert.richtig"]{display:none !important;}
/* Die Folien bringen ihre eigene Lesebreite mit, der Bundler schreibt sie
   als Inline-Stil an jeden Absatz, gemessen 566px. Hier stand bis zum
   07.09.2026 "max-width:none !important" und hat sie weggeworfen: der Text
   lief dadurch auf 976px, direkt unter einem Artikel mit 696px. Es gibt
   keine Regel in dieser Datei, die eine Absatzbreite setzt und die man
   dafuer haette ueberschreiben muessen. */
.kap-mehr{margin-top:22px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:18px;padding:26px;text-align:center;}
@media (max-width:640px){
  /* Knoepfe sind mit der Skala von 17 auf 18px gewachsen. Auf 390 Pixeln
     reicht das, um "Meine Einschaetzung anfordern →" auf zwei Zeilen zu
     schieben. Nicht die Schrift zurueckdrehen - die steht in der Skala -,
     sondern das Polster: 32 Pixel Rand links und rechts sind auf einem Handy
     ohnehin verschenkte Spalte. */
  .btn{padding:17px 22px;gap:8px;}

  /* Auf dem Handy darf eine Karte ihren Text unter das Zeichen setzen.
     Auf dem Rechner nicht, dort entscheidet die Wunschbreite des Textes
     ueber den Umbruch und die Karten einer Reihe saehen verschieden aus. */
  .kap-folie [data-karte]{flex-wrap:wrap;}
  .kap-folie{padding:22px 18px !important;}
  .kap-folien{border-radius:14px;}
  .kap-folie h2{font-size:22px !important;}
}


/* ── Breites Band ──────────────────────────────────────────────────────
   Bricht aus der Textspalte aus, ohne den Fliesstext mitzuziehen. Fuer
   Karten, Tabellen und die Kapitelfolien: die vertragen Breite, ein
   Absatz nicht. Faellt auf die Fensterbreite zurueck, wenn weniger da ist. */
.breit,.kap{
  width:min(var(--breit), calc(100vw - 2 * var(--rand)));
  margin-left:50%;
  transform:translateX(-50%);
}
@media (max-width:820px){
  .breit,.kap{width:100%;margin-left:0;transform:none;}
}


/* ── Kapiteluebersicht des Handbuchs ────────────────────────────────
   Steht auf /wissen/handbuch/ und als Anrisz auf /wissen/. Kam am
   07.09.2026 aus einem Inline-Block, gehoert aber auf zwei Seiten und
   damit hierher. */
.hb{ margin: 8px 0 54px; }
.hb-kopf{ max-width: 620px; }
.hb-kopf h2{ margin: 10px 0 8px; }
.hb-kopf p{ color: var(--muted); font-size: 18px; margin: 0; }

.hb-meta{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:16px;
  font-size:13px; color:var(--muted);
}
.hb-meta b{ color:var(--ink); font-weight:700; }

.hb-raster{
  display:grid; gap:14px; margin-top:26px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

.hb-kap{
  display:flex; flex-direction:column; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:20px 22px 18px;
}
.hb-kap:hover{ border-color:var(--gold); }

.hb-nr{
  font-size:12px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.hb-kap h3{ margin:0; font-size:19px; line-height:1.25; }
.hb-kap h3 a{ color:var(--ink); text-decoration:none; }
.hb-kap h3 a:hover{ text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:4px; }
.hb-kap p{ margin:0; font-size:15px; line-height:1.55; color:var(--muted); flex:1; }

.hb-wege{
  display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:6px;
  padding-top:12px; border-top:1px solid var(--line);
  font-size:14px; font-weight:700;
}
.hb-wege a{ color:var(--gold); text-decoration:none; }
.hb-wege a:hover{ text-decoration:underline; text-underline-offset:3px; }
.hb-wege .zweit{ color:var(--muted); font-weight:400; }
.hb-wege a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }

.hb-fuss{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  justify-content:space-between;
  margin-top:22px; padding:18px 22px;
  background:var(--cream); border:1px solid var(--line); border-radius:10px;
}
.hb-fuss p{ margin:0; font-size:15px; color:var(--ink); max-width:60ch; }
.hb-fuss .btn{ flex:none; }

@media (max-width:640px){
  .hb-raster{ grid-template-columns:1fr; }
  .hb-kap{ padding:17px 18px 16px; }
  .hb-kap h3{ font-size:17px; }
}

/* Kompakte Fassung der Uebersicht fuer /wissen/: nur Nummer und Titel, die
   Beschreibungen stehen auf /wissen/handbuch/. Zweimal derselbe Absatz waere
   genau das, was hier gerade weggeraeumt wurde. */
.hb-liste{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0 26px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.hb-liste li{border-top:1px solid var(--line);}
.hb-liste a{display:flex;align-items:baseline;gap:12px;padding:13px 2px;
  color:var(--ink);text-decoration:none;font-weight:600;line-height:1.35;}
.hb-liste a:hover{color:var(--gold-d,#A8841C);}
.hb-liste a:hover span:last-child{text-decoration:underline;text-underline-offset:3px;}
.hb-liste .nr{flex:0 0 auto;min-width:2.6em;font-size:13px;font-weight:800;color:var(--gold);
  letter-spacing:.08em;font-variant-numeric:tabular-nums;text-transform:uppercase;}

/* ── Eine Kante für die ganze Seite ────────────────────────────────────
   Emre, 08.09.2026: "ich möchte dass alles einheitlich breit ist."
   Gemessen waren es drei Maße nebeneinander: 760 auf den Inhaltsseiten,
   1080 bei den Kapitelfolien, 1360 auf Startseite, Rubriken und im Kopf.
   Auf einer Handbuchseite lagen zwei davon übereinander, 192px versetzt.

   Eine einzige Zahl geht nicht: bei 1080 wird das Menue eng, und ein
   Absatz ueber die volle Breite hat 130 Zeichen je Zeile. Deshalb teilen
   sich jetzt alle Baender dieselbe Aussenkante (1360, das Mass der
   Startseite), und der Fliesstext behaelt seine Lesebreite, sitzt aber
   links an dieser Kante statt mittig. Mittig gesetzt wuerde die Zeile
   wieder springen, sobald ein breiter Kasten darunter steht. */
:root{ --maxw:1360px; --narrow:1360px; --breit:1360px; --lese:720px; --randspalte:48px; }

/* 13.09.2026, Issue #84. --lese stand auf 72ch, und ch rechnet an der
   Schriftgroesse des Elements, an dem es haengt. Eine Variable, drei
   Ergebnisse, auf service/ueber-uns bei 1440px gemessen:
     p 18px       -> 72ch = 726px, die Deckelung greift
     h2 42px      -> 72ch = 1890px, breiter als das Band, greift nie
     sec-eyebrow  -> 524px
   Drei Fluchten auf einer Seite, genau das hat Goran dreimal gemeldet.
   Jetzt eine feste Zahl in px: der Fliesstext und die Ueberschriften
   stehen an derselben Kante, breite Bloecke nehmen das ganze Band. */

/* Kein Ausbruch mehr noetig, die Spalte ist so breit wie das Band. */
.breit,.kap{ width:100%; margin-left:0; transform:none; }

/* Lesebreite, linksbuendig an der gemeinsamen Kante. */
.narrow > p, .narrow > ul, .narrow > ol, .narrow > dl, .narrow > blockquote,
.narrow > h1, .narrow > h2, .narrow > h3, .narrow > h4, .narrow > .lead,
.narrow > .hint,
.prose > p, .prose > ul, .prose > ol, .prose > dl, .prose > blockquote,
.prose > h1, .prose > h2, .prose > h3, .prose > h4, .prose > .lead,
.prose > .hint{
  max-width:var(--lese);
  margin-right:auto;
}

/* Die Augenbraue ist einzeilig und traegt keinen Fliesstext. Gedeckelt
   war sie die dritte Kante auf der Seite, ohne dass jemand etwas davon
   hatte. Sie laeuft jetzt mit ihrer Zeile. */
.narrow > .sec-eyebrow, .prose > .sec-eyebrow{ max-width:none; }

/* Was breit gemeint ist, bleibt breit. Ohne diese Zeile erben Tabellen
   und Kachelraster die Lesebreite und stehen dann schmaler als der
   Absatz darueber, was die Kante wieder zerlegt. */
.narrow > .mediatext, .narrow > .cards, .narrow > .kap, .narrow > .breit,
.narrow > table, .narrow > .table-scroll, .narrow > .cta-row,
.prose > .mediatext, .prose > .cards, .prose > .kap, .prose > .breit,
.prose > table, .prose > .table-scroll, .prose > .cta-row{ max-width:none; }

/* Die Randspalte aus Variante B. Nicht automatisch vergeben, sondern zum
   Danebenstellen: wer .rand an ein Bild, eine Kennzahl oder einen
   Tipp-Kasten schreibt, setzt ihn neben die Lesespalte statt darunter.
   Float statt Raster, damit der Textfluss der 147 Seiten unangetastet
   bleibt. Unter 1100px faellt er wieder unter den Text. */
@media (min-width:1100px){
  .narrow > .rand, .prose > .rand{
    float:right; clear:right;
    width:calc(var(--narrow) - var(--lese) - var(--randspalte) * 2);
    margin:6px 0 24px var(--randspalte);
  }
}

/* Silbentrennung nur dort, wo sie gebraucht wird. Sie steht oben wegen
   "Krankenversicherung" auf einer 350px-Handyspalte. Seit der Fliesstext
   in einer Lesespalte sitzt, die schmaler ist als das Fenster, trennte
   sie auch am grossen Schirm: "wirk-lich", "ver-stehst". Der Grund von
   damals gilt weiter, aber nur unterhalb der Umbruchbreite. */
@media (min-width:820px){ h1,h2,h3,h4{ hyphens:manual; } }

/* ── Brotkrume wird nicht mehr angezeigt ───────────────────────────────
   Emre, 08.09.2026: "ich möchte nur nicht, dass es dargestellt wird."
   Auf der Seite standen drei Zeilen untereinander, die dasselbe sagen:
   die Brotkrume endet auf "PKV für Angestellte", darunter das Label
   "FÜR ANGESTELLTE · STAND 2026", darunter die Überschrift.

   Die Auszeichnung fuer Suchmaschinen bleibt: sie steckt in einem
   JSON-LD-Block im Kopf jeder Seite (BreadcrumbList, 147 Seiten), das
   ist unsichtbarer Code und von Google ausdruecklich so empfohlen. Die
   Hierarchie aus dem Rubriken-Umzug geht also nicht verloren.

   Hier bewusst als Regel und nicht aus 146 Dateien geloescht: so ist es
   an einem Ort, Goran sieht es, und es ist mit einer Zeile zurueckholbar.
   Bleibt es nach dem Gespraech mit Goran dabei, wandert das Markup raus. */
.krume{display:none;}

/* Kontaktblock in der Fusszeile: jede Angabe eine Zeile, Label und
   Nummer bleiben zusammen. Goran am 08.09.2026: "Mach einen sauberen
   Block, das sieht momentan nicht schoen aus." */
.foot-adresse{margin-top:10px;font-size:15px;line-height:1.85;}
.foot-adresse a{display:inline;margin:0;white-space:nowrap;}

/* Nachtrag 10.09.2026 · Zwei Werte, die auf 346 Stellen inline standen
   -------------------------------------------------------------------
   Beide sind keine Ausnahme, sondern der Normalfall, und zwar ausnahmslos:

     .cards h3        259 von 259 Karten-Ueberschriften, kein Abweichler
     article.prose     87 von 107, die uebrigen 20 setzen margin selbst
                       und ueberschreiben diese Regel damit ohnehin

   Nur diese beiden stehen hier. Vier weitere Werte (section.light, h1,
   .tipp, .cta-row) sind bewusst NICHT dabei: dort gibt es Elemente ohne
   Inline-Angabe, und eine Regel wuerde sie still veraendern. Der Versuch
   vom selben Tag ist daran gescheitert, er steht in AENDERUNGSREGELN.md. */

.cards h3{font-size:18px;}
/* Drei Kartenbloecke tragen bewusst die groessere Ueberschrift: die
   Werkzeug-Kacheln auf der Startseite und auf v2, und die drei Karten im
   Double-Check. Sie hatten nie einen Inline-Wert, sondern standen immer auf
   der globalen h3-Groesse. Die Klasse benennt diesen Unterschied, statt ihn
   dem Zufall zu ueberlassen, und haelt die Groesse responsiv. */
.cards.gross h3{font-size:clamp(19px,2.2vw,24px);}

/* Vier weitere Werte, die auf 494 Stellen inline standen. Anders als bei den
   zwei oben gibt es hier Elemente, die den Wert NICHT tragen, und die sind
   Absicht: helle Abschnitte stehen je nach Seite auf 34, 56 oder 96 Pixel,
   und zehn Knopfzeilen sind bewusst linksbuendig, alle auf Uebersichtsseiten.
   Damit die Regel sie nicht still verschiebt, wurden ihre heutigen Werte im
   Browser gemessen und vorher ausdruecklich eingetragen: 57 Ausnahmen.
   Nachgewiesen ueber alle 137 betroffenen Seiten, gerendert in beiden
   Fassungen und Element fuer Element verglichen.

   h1 stand hier auch schon und ist wieder raus. Das Stilblatt hat weiter
   oben die Regel `.narrow > .sec-eyebrow + h1{margin-top:0}`, und die ist
   spezifischer. Sie war bisher wirkungslos, weil der Inline-Wert sie auf
   jeder Detailseite ueberstimmt hat. Ohne ihn gewinnt sie, und 126
   Ueberschriften verlieren ihre 14 Pixel nach oben. Der Inline-Wert bleibt
   deshalb, wo er ist. */

section.light{padding-top:34px;}
.tipp{margin:26px 0;}
.cta-row{justify-content:center;}
article.prose{margin-top:18px;}

/* ---------------------------------------------------------------
   Wegweiser. Schritt 1 steht im Kopf der Startseite, alles danach
   laeuft in einem <dialog> in der Mitte des Bildschirms. Grund:
   die Karte im Kopf ist 527 breit, das Ergebnis wurde darin 818
   hoch und hat den ganzen Kopfbereich auseinandergezogen.
   Farben und Radien kommen aus :root, hier steht nur Anordnung.
   --------------------------------------------------------------- */
.ww-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;}
.ww-kopf-rechts{display:flex;align-items:center;gap:14px;}
.ww-schliessen{background:none;border:0;padding:0;width:30px;height:30px;border-radius:9px;
  color:#A8A8A2;font-size:24px;line-height:1;cursor:pointer;transition:background .14s,color .14s;}
.ww-schliessen:hover{background:rgba(255,255,255,.06);color:#F6F6F3;}
.ww-balken{height:3px;border-radius:999px;background:var(--dark-line);margin-bottom:24px;overflow:hidden;}
.ww-balken i{display:block;height:100%;width:0;background:var(--grad);transition:width .4s cubic-bezier(.2,.7,.2,1);}
.ww-frage{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(21px,2.6vw,28px);
  line-height:1.18;letter-spacing:-.015em;color:#F6F6F3;margin:0 0 7px;}
.ww-unter{color:#A8A8A2;font-size:15px;line-height:1.5;margin:0 0 20px;max-width:56ch;}
.ww-marke{display:block;font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-l);margin-bottom:9px;}

.ww-antworten{display:grid;gap:9px;}
.ww-a{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  background:rgba(255,255,255,.02);border:1px solid var(--dark-line);border-radius:var(--r-sm);
  padding:14px 16px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .16s,background .16s,transform .16s;}
.ww-a:hover,.ww-a:focus-visible{border-color:var(--gold);background:rgba(198,146,20,.09);transform:translateY(-1px);}
.ww-zahl{flex:0 0 auto;width:23px;height:23px;border-radius:7px;background:var(--dark-3);color:var(--gold-l);
  font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;display:grid;place-items:center;margin-top:1px;}
.ww-txt{flex:1 1 auto;min-width:0;}
.ww-txt b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;
  line-height:1.3;color:#F6F6F3;}
.ww-txt span{display:block;font-size:13px;line-height:1.4;color:#9A9A94;margin-top:2px;}

/* Das Ergebnis: ein Aufruf, darunter vier Verweise als schlichte Zeilen.
   Die erste Fassung hatte fuenf Pillen-Etiketten und einen umrandeten
   Kasten, das war zu unruhig. */
.ww-knopf{width:100%;justify-content:center;margin:2px 0 8px;}
.ww-hinweis{color:#9A9A94;font-size:13.5px;line-height:1.5;margin:0 0 22px;text-align:center;}
.ww-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--dark-line);}
.ww-liste li{border-bottom:1px solid var(--dark-line);}
.ww-liste a{display:block;padding:13px 4px;text-decoration:none;transition:padding-left .16s;}
.ww-liste a:hover{text-decoration:none;padding-left:10px;}
.ww-liste b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;
  line-height:1.3;color:#F6F6F3;}
.ww-liste i{font-style:normal;color:var(--gold-l);font-weight:600;}
.ww-liste i::after{content:" · ";color:#65655F;}
.ww-liste span{display:block;font-size:13px;line-height:1.45;color:#9A9A94;margin-top:2px;}

.ww-zurueck{background:none;border:0;padding:0;font:inherit;font-size:14px;color:#A8A8A2;
  cursor:pointer;margin-top:18px;}
.ww-zurueck:hover{color:var(--gold-l);}
.ww-fuss{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:22px;}
.ww-fuss .ww-zurueck{margin-top:0;}
.ww-zweit{font-size:14px;color:var(--gold-l);font-weight:700;}

/* Die grosse Buehne in der Mitte. */
.ww-dialog{width:min(680px,calc(100vw - 32px));max-height:min(86vh,860px);
  background:linear-gradient(180deg,#17171C,#111116);border:1px solid var(--dark-line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);color:#F4F4F0;padding:32px;
  overflow:auto;overscroll-behavior:contain;}
.ww-dialog::backdrop{background:rgba(6,6,8,.74);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.ww-dialog[open]{animation:ww-auf .22s cubic-bezier(.2,.7,.2,1);}
@keyframes ww-auf{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}
body.ww-offen{overflow:hidden;}
@media(max-width:640px){
  .ww-dialog{padding:22px 18px;max-height:92vh;width:calc(100vw - 20px);}
  .ww-fuss{flex-direction:column;align-items:flex-start;gap:10px;}
}

@media(prefers-reduced-motion:reduce){
  .ww-balken i{transition:none;}
  .ww-dialog[open]{animation:none;}
  .ww-liste a{transition:none;}
  .ww-liste a:hover{padding-left:4px;}
  .ww-a{transition:border-color .16s,background .16s;}
  .ww-a:hover,.ww-a:focus-visible{transform:none;}
}

/* ---------------------------------------------------------------
   Bewegung fuer die ganze Seite, gesteuert von assets/effekte.js.

   Alles Versteckende haengt an html.js-effekte, und diese Klasse
   setzt das Skript selbst. Ohne Skript, ohne Beobachter oder bei
   eingestellter Ruhe steht sie nicht da, dann ist jeder Inhalt
   sofort sichtbar. Kein Text darf an einem Effekt haengen bleiben.
   --------------------------------------------------------------- */
html{scroll-behavior:smooth;}
/* Die Kopfleiste klebt oben, ein Anker darf nicht darunter landen. */
:target{scroll-margin-top:96px;}

.js-effekte .auf-zu{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform;}
.js-effekte .auf-zu.auf-da{opacity:1;transform:none;will-change:auto;}

/* Beim Scrollen wird die Leiste dichter und bekommt eine Kante.
   Oben am Anfang der Seite soll sie moeglichst wenig auftragen. */
header.site{transition:background .22s,box-shadow .22s,border-color .22s;}
header.site.gescrollt{background:#0C0C0E;
  border-bottom-color:rgba(255,255,255,.10);box-shadow:0 10px 30px -18px rgba(0,0,0,.9);}

/* Lesebalken. Kommt nur auf Seiten, die mehr als gut zwei Bildschirme
   hoch sind, und wird vom Skript eingehaengt. */
.lesebalken{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;pointer-events:none;}
.lesebalken i{display:block;height:100%;width:0;background:var(--grad);
  box-shadow:0 0 12px rgba(198,146,20,.45);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .js-effekte .auf-zu{opacity:1;transform:none;transition:none;}
  header.site{transition:none;}
  .lesebalken{display:none;}
}

/* ---------------------------------------------------------------
   Suche im Kopf. Die Lupe steht neben dem Menü, das Fenster
   selbst sitzt in der Mitte wie der Wegweiser. Tastatur: "/"
   oder Strg/Cmd+K oeffnet, Pfeile waehlen, Enter geht hin.
   --------------------------------------------------------------- */
.such-knopf{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;border-radius:999px;border:1px solid var(--dark-line);
  background:rgba(255,255,255,.03);color:#D6D6D0;cursor:pointer;padding:0;
  transition:border-color .16s,background .16s,color .16s;}
.such-knopf:hover{border-color:var(--gold);background:rgba(198,146,20,.10);color:#F6F6F3;}
.such-knopf svg{width:18px;height:18px;display:block;}

.su-dialog{width:min(620px,calc(100vw - 32px));max-height:min(78vh,720px);
  background:linear-gradient(180deg,#17171C,#111116);border:1px solid var(--dark-line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);color:#F4F4F0;padding:0;
  overflow:hidden;display:flex;flex-direction:column;margin-top:8vh;}
.su-dialog::backdrop{background:rgba(6,6,8,.74);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.su-kopf{display:flex;align-items:center;gap:12px;padding:18px 20px;
  border-bottom:1px solid var(--dark-line);flex:0 0 auto;transition:border-color .16s;}
/* Statt eines Rings am Feld faerbt sich die Trennlinie. Der globale Ring fuer
   Eingabefelder (3px goldener Schein aus input:focus) lief im Suchfenster an
   die Kante und wurde vom overflow:hidden des Dialogs abgeschnitten: Emre hat
   ihn als abgeschnittenen goldenen Rahmen gemeldet. Im Suchfenster ist das
   Feld ohnehin die einzige Eingabe und beim Oeffnen bereits aktiv. */
.su-kopf:focus-within{border-bottom-color:var(--gold);}
#su-feld:focus{box-shadow:none;border-color:transparent;}
.su-kopf svg{width:19px;height:19px;color:var(--gold-l);flex:0 0 auto;}
#su-feld{flex:1 1 auto;min-width:0;background:none;border:0;outline:none;padding:0;
  color:#F6F6F3;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:18px;line-height:1.4;
  -webkit-appearance:none;appearance:none;border-radius:0;}
#su-feld::-webkit-search-decoration,#su-feld::-webkit-search-cancel-button{-webkit-appearance:none;}
#su-feld::placeholder{color:#77776F;}
.su-zu{background:none;border:1px solid var(--dark-line);border-radius:8px;color:#A8A8A2;
  font-size:12px;font-weight:700;padding:5px 9px;cursor:pointer;flex:0 0 auto;line-height:1;}
.su-zu:hover{color:#F6F6F3;border-color:var(--gold);}

#su-liste{list-style:none;margin:0;padding:6px;overflow:auto;overscroll-behavior:contain;flex:1 1 auto;}
#su-liste a{display:block;padding:11px 13px;border-radius:var(--r-sm);text-decoration:none;}
#su-liste a:hover,#su-liste a.an{background:rgba(198,146,20,.11);text-decoration:none;}
#su-liste em{display:block;font-style:normal;font-family:'Archivo',sans-serif;font-size:10px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-l);margin-bottom:3px;}
#su-liste b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:15.5px;
  line-height:1.3;color:#F6F6F3;}
#su-liste span{display:block;font-size:13px;line-height:1.45;color:#9A9A94;margin-top:2px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
/* Vorschlaege im leeren Feld. */
.su-tipps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 13px 12px;}
.su-tipps > span{font-family:'Archivo',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#77776F;width:100%;margin-bottom:2px;}
.su-tipp{background:rgba(255,255,255,.03);border:1px solid var(--dark-line);border-radius:999px;
  color:#D6D6D0;font:inherit;font-size:14px;padding:7px 14px;cursor:pointer;
  transition:border-color .16s,background .16s,color .16s;}
.su-tipp:hover{border-color:var(--gold);background:rgba(198,146,20,.10);color:#F6F6F3;}

#su-meldung{padding:11px 20px 14px;font-size:13px;color:#8A8A84;border-top:1px solid var(--dark-line);
  flex:0 0 auto;}
body.su-offen{overflow:hidden;}

@media(max-width:900px){
  .su-dialog{margin-top:4vh;max-height:88vh;width:calc(100vw - 20px);}
}

/* ---------------------------------------------------------------
   Bildband auf den Rubrikseiten. Ein ruhiges Foto zwischen
   Einleitung und erster Themengruppe. Das Verhaeltnis steht hier
   und nicht am Bild, damit der Ausschnitt ohne neues Bild
   nachjustiert werden kann.
   --------------------------------------------------------------- */
.bildband{margin:34px 0 6px;border-radius:var(--r-md);overflow:hidden;background:var(--cream);
  box-shadow:var(--sh-1);}
.bildband img{display:block;width:100%;height:auto;aspect-ratio:16/5;object-fit:cover;
  object-position:center 42%;}
/* Das Stillleben auf /wissen/ hat sein Motiv weiter unten als die vier
   Bilder mit Menschen. Gemessen, nicht geraten. */
.bildband img[src$="rubrik-wissen.jpg"]{object-position:center 58%;}
@media(max-width:700px){
  .bildband{margin:26px 0 4px;}
  .bildband img{aspect-ratio:16/8;}
}


/* ── Kachelkoepfe, Regel vom 11.09.2026 ───────────────────────────────
   Goran: "Wende das als Regel fuer alle Kacheln an." Der gemeinsame
   Fehler war ueberall derselbe: Ueberschrift, Text und Link stehen
   ohne Trennung untereinander, alles gleich gewichtet.

   Bewusst schmal gehalten: eine Linie unter dem Kopf und Luft darunter.
   Kein eigener Grund, denn eine Karte mit Bild oder Symbol darueber
   vertraegt das nicht. Die Trennung vertragen alle. */
.card > h3, .dl-karte h3, .toolcard h3, .post .body > h3{
  padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--line);
}
.dl-kopf{ padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.dl-kopf h3{ padding-bottom:0; margin-bottom:0; border-bottom:none; }
/* Wo ein Symbol neben dem Titel steht, traegt die Zeile die Linie,
   nicht die Ueberschrift allein. */
.cards.gross .card h3{ padding-bottom:0; margin-bottom:0; border-bottom:none; }
.cards.gross .card .ic{ position:relative; }
.cards.gross .card::after{ content:""; grid-column:1/-1; grid-row:1; align-self:end;
  height:1px; background:var(--line); margin:0 -24px; transform:translateY(12px); }


/* ── Schlagwoerter im Fliesstext, Regel 24 vom 12.09.2026 ────────────
   Goran: "Wenn wir irgendwelche Schlagwoerter haben, koennten wir das
   verlinken mit dem entsprechenden Thema, wenn wir es erklaert haben."

   Bewusst leise: die Schriftfarbe bleibt die des Absatzes, nur die
   Unterstreichung ist golden. So faellt das Wort im Lesefluss nicht
   auseinander, ist aber als Weg erkennbar. Gold traegt die Linie auf
   hellem wie auf dunklem Grund, eine Unterstreichung braucht keinen
   Textkontrast. */
a.begriff{
  color:inherit; text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:2px; text-underline-offset:4px;
  transition:color .16s, text-decoration-color .16s;
}
a.begriff:hover, a.begriff:focus-visible{ color:var(--gold-l); text-decoration-color:var(--gold-l); }

/* ── Vergleichstabellen auf dem Handy ───────────────────────────────────
   13.09.2026, Issue #52. Dreispaltige Vergleiche liefen auf 375px aus
   dem Bild, der .table-scroll-Rahmen fing das ab, aber seitwaerts
   scrollen ist ein Notbehelf. Unter 600px wird deshalb jede Zeile zu
   einer Karte: links die Spaltenueberschrift aus data-spalte, rechts
   der Wert. Betroffen sind nur Tabellen mit der Klasse .karten, also
   die 28 mit drei und mehr Spalten, die dafuer vorbereitet sind. Der
   Rahmen bleibt fuer alles andere. */
@media (max-width:600px){
  table.karten, table.karten tbody, table.karten tr, table.karten td{ display:block; width:100%; }
  /* Der Rahmen gibt Tabellen min-width:440px, sonst blieben die Karten
     440 breit und die Seite scrollte weiter seitwaerts. */
  table.karten{ min-width:0; }
  /* Die Kopfzeile steht mal in <thead>, mal als erste <tr> mit <th>.
     Beides verschwindet, die Beschriftung steht ja in jeder Karte. */
  table.karten thead, table.karten tr:has(> th){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  table.karten tr{ border:1px solid var(--line); border-radius:12px; padding:6px 14px; margin:0 0 14px; background:#fff; }
  table.karten td{ display:grid; grid-template-columns:minmax(38%,auto) 1fr; gap:12px;
    align-items:baseline; padding:9px 0; border:0; border-bottom:1px solid var(--line); }
  table.karten tr td:last-child{ border-bottom:0; }
  table.karten td::before{ content:attr(data-spalte); font-size:12px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; color:var(--muted,#6B6B66); }
  table.karten td:first-child{ font-weight:700; }
}

/* ── Komponentenklassen statt Inline-Styles ────────────────────────────
   13.09.2026, Issue #51. Das Aussehen stand in style-Attributen in jeder
   einzelnen Datei. Deshalb musste jede Aenderung als Skript ueber alle
   Seiten laufen, und genau daran sind vier Sachen auseinandergelaufen:
   vier Navigationen, der Profi-Tipp, 44 Augenbrauen, 11 Tabellen ohne
   Rahmen. Ein System kann nicht auseinanderlaufen, wenn es nur eine
   Stelle gibt. Dieser Block ist diese Stelle.

   Erster Durchgang: 731 Attribute auf 131 Seiten sind hier zusammen-
   gezogen. Die Werte sind unveraendert uebernommen, nur die 18 Kacheln
   mit margin-top:24px laufen jetzt wie die anderen 93 mit 26px. */

/* Die weisse Kachel unter einem Abschnitt, 113x. */
.kachel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;margin-top:26px;text-align:center;}
.kachel.links{text-align:left;}

/* Der umrandete Kasten im Fliesstext, 50x. */
.hinweis{border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:14px 0;background:#fff;}

/* Zahlenspalten in Tabellen, 69x. `.prose th` setzt links, das hat
   bisher das style-Attribut ueberstimmt. Die Klasse braucht deshalb
   dieselbe Tiefe, sonst stehen 14 Kopfzellen wieder links. */
.rechts, .prose th.rechts, .prose td.rechts{text-align:right;}
.nowrap{white-space:nowrap;}

/* Die kleine Ueberschrift in Kaesten und Kacheln, 160x. Ohne sie greift
   h3 mit clamp(20px,2.2vw,24px), das ist hier eine Nummer zu gross. */
h3.klein{font-size:18px;}

/* Nach der Augenbraue folgt die Seitenueberschrift, 80x derselbe Abstand.
   Die Zeile weiter oben setzt fuer .narrow > .sec-eyebrow + h1 einen
   Abstand von 0. Bisher hat das style-Attribut sie ueberstimmt, deshalb
   muss diese Regel dieselbe Tiefe haben, sonst ruecken 80 Ueberschriften
   um 14px nach oben. */
.sec-eyebrow + h1, .narrow > .sec-eyebrow + h1, .prose > .sec-eyebrow + h1{margin:14px 0 12px;}

/* Der Hinweissatz unter einem Absatz, 108x. Bewusst als eigene Klasse
   und nicht als Regel fuer alle p.hint: 266 weitere tragen gar keinen
   eigenen Abstand, die haetten sich sonst still mitverschoben. */
p.hint.eng{margin:8px 0 16px;}

/* Die Fusszeile ohne Trennlinie, 26 von 132 Fusszeilen. */
.foot-bottom.ohne-linie{border:none;padding-top:0;}

/* Das Zeichen im Profi-Tipp, 125x. */
.bulb img{display:block;}

/* ── Zweiter Durchgang #51, 13.09.2026 ─────────────────────────────────
   Weitere 371 style-Attribute. Danach stehen noch rund 710, und die sind
   ueberwiegend Einzelfaelle ohne Wiederholung. */

/* Die Zwischenueberschrift im Anhang, 79x, in zwei Abstaenden. */
.h2-anhang{margin:38px 0 0;}
.h2-anhang.weit{margin:44px 0 0;}

/* Die dichte kleine Ueberschrift in Kaesten, 52x. Nicht an h3.klein
   gebunden, zwei davon tragen die Klasse nicht. */
h3.dicht{margin:0 0 8px;}

/* Absaetze im Hinweiskasten und in der Kachel stehen ohne eigenen
   Abstand, 52x. Drei weitere Kaesten hatten ihn noch nicht und ziehen
   damit gleich. */
.hinweis > p, .kachel > p{margin:0;}

/* Der Weiterlesen-Block unter einem Kapitel, 11x. */
.kap-mehr{margin-top:34px;}

/* Ein Textband mit Abstand nach oben, 20x. */
article.prose.abstand{margin-top:20px;}

/* Die mitwachsende Spalte in einer Reihe, 26x. */
.spalte{flex:1;min-width:180px;}

/* Der leise Absatz auf dunklem Grund, 25x. */
p.leise{color:#C9C9C3;}

/* Zwei Tabellen mit engeren Zellen, 42 Zellen. Der Abstand steht jetzt
   an der Tabelle statt an jeder einzelnen Zelle. */
table.zellen-weit td, table.zellen-weit th{padding:11px 14px;}
table.zellen-eng td, table.zellen-eng th{padding:10px 12px;}

/* Der Ankerabstand stand an 20 Ueberschriften und fehlte an allen
   anderen. Die Kopfleiste ist ueberall gleich hoch, also gilt er ab
   jetzt fuer jede h2: ein Sprungziel verschwindet nicht mehr darunter. */
h2{scroll-margin-top:90px;}