/* ===========================================================================
   pkvatlas.de — gemeinsames Stylesheet
   ---------------------------------------------------------------------------
   Stand: 20.09.2026 — Neuaufbau des Layouts.

   Die Maße stammen nicht aus dem Gefühl, sondern aus der Messung einer
   bestehenden, gut gebauten Wissensseite (Textspalte, Zeilenhöhen, Ecken,
   Container). Zwei Werte weichen bewusst ab:
     - Fließtext 17/30 statt 16/24, weil deutsche Wörter länger sind und die
       Artikel 2.000 Wörter haben.
     - Fließtext in Ink statt Grau, weil hier Paragrafen und Fristen stehen.

   FARBEN nach BRIEFING.md Abschnitt 3:
     Ink      #0C2A22  Logo, Ueberschriften, Text (15,3:1)
     Akzent   #00795C  NUR Knoepfe, Links, Hervorhebungen (Kontrast 5,4:1)
                       — loest Smaragd #047857 ab, siehe Begruendung unten
     Marine   #123A6B  Flaechen und Grafiken
     Hellblau #7DAFFF  auf dunklen Flaechen
   =========================================================================== */

/* SCHRIFT — Source Sans 3, selbst gehostet unter /assets/fonts/.
   Freie SIL-Lizenz, kein Aufruf an Google. Drei Schnitte, zusammen 45 KB.
   Gewaehlt wegen der Zahlen und Paragrafen in diesen Texten: schmaler als
   eine geometrische Schrift, humanistische Formen, die ueber 2.000 Woerter
   weniger ermueden. Gemessen gegen Montserrat: 16 statt 20 umbrechende
   Tabellenzellen, 3 statt 6 mehrzeilige Zwischenueberschriften. */
@font-face{font-family:Atlas;font-weight:400;font-style:normal;font-display:swap;
  src:url(/assets/fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Atlas;font-weight:500;font-style:normal;font-display:swap;
  src:url(/assets/fonts/manrope-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Atlas;font-weight:600;font-style:normal;font-display:swap;
  src:url(/assets/fonts/manrope-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Atlas;font-weight:700;font-style:normal;font-display:swap;
  src:url(/assets/fonts/manrope-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Atlas;font-weight:800;font-style:normal;font-display:swap;
  src:url(/assets/fonts/manrope-latin-800-normal.woff2) format("woff2")}


:root{
  /* Farbwechsel 22.09.2026 auf Ediz' Entscheidung: von Ink/Tuerkis auf Gruen.
     Ziel war ein Ton, der neben dem HanseMerkur-Zeichen harmoniert, ohne das
     HanseMerkur-Gruen #00A075 zu sein — das hat auf Weiss nur 3,34:1 und ist
     als Text- oder Linkfarbe unbrauchbar. Gewaehlt wurde Variante B aus drei
     vorgelegten Abstufungen. Gemessen: Akzent 5,40:1 auf Weiss, Ink 15,3:1. */
  --ink:#0C2A22;
  --ink2:#3E5A52;
  --mute:#6A7B74;
  --akzent:#00795C;
  --akzent-tief:#005E48;
  --akzent-schein:rgba(0,121,92,.26);
  --akzent-hell:#F1F8F5;
  --akzent-hell2:#DBEDE5;
  --akzent-linie:#C0DDD1;
  --marine:#14453A;     /* frueher Marineblau, jetzt tiefes Gruen derselben Rolle */
  --hellblau:#8FCBB4;   /* Gegenstueck dazu auf dunklem Grund */
  --paper:#FFFFFF;
  --sand:#F5F8F6;       /* kuehle ruhige Flaeche, passend zum Gruen */
  --ton:#EDF3EF;        /* getoente Kachel, auf der die Bilder liegen */
  --line:#E2EAE6;       /* Linien zur Flaeche passend */

  --r:12px;
  --r-gross:16px;
  --pad:clamp(20px,5vw,56px);

  --breite:1280px;      /* Container */
  --lese:640px;         /* Textspalte im Artikel */
  --rail:208px;         /* Sprungleiste links */
  --aside:260px;        /* Beratungskarte rechts */
  --spalt:56px;         /* Abstand zwischen den Spalten */

  --schrift:Atlas,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --serif:var(--schrift);   /* Feather ist durchgehend serifenlos — Alias, damit
                               bestehende Regeln nicht angefasst werden muessen */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:var(--schrift);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.76;-webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--akzent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--akzent-tief)}
a.karte,a.karte:hover{color:inherit;text-decoration:none}

.w{max-width:var(--breite);margin:0 auto;padding:0 var(--pad)}
.nar{max-width:760px}
section{padding:clamp(40px,5.5vw,72px) 0}

/* --- Typografie: Serifen in den Ueberschriften, das trennt uns optisch
       von den Vergleichsportalen, die ausnahmslos serifenlos und laut sind --- */
/* Keine Silbentrennung in Ueberschriften — dort faellt ein Trennstrich auf.
   overflow-wrap bleibt als Notbremse, damit ein langes Kompositum die Spalte
   nicht sprengt. Auf schmalen Bildschirmen wird die Trennung wieder erlaubt,
   weil dort sonst haessliche Luecken entstehen. */
/* Angeglichen an die neue Startseite, 22.09.2026: grosse Ueberschriften
   stehen dort im Schnitt 500 und weit gesperrt, nicht fett. Das traegt den
   ruhigen, hochwertigen Eindruck — fette Ueberschriften wirken daneben laut.
   Kleine Ueberschriften bleiben bei 600, sonst werden sie zu duenn. */
h1,h2{font-weight:500;letter-spacing:-.04em}
h3,h4{font-weight:600;letter-spacing:-.025em}
h1,h2,h3,h4{color:var(--ink);font-family:var(--schrift);
            /* break-word zerlegt lange Woerter mitten drin, ohne Trennstrich —
               "Krankenversicherun/g,". Bei Ueberschriften ist das immer haesslich.
               break-word nur noch als Notbremse fuer Woerter, die allein nicht
               passen, und das leistet overflow-wrap:normal plus min-width:0. */
            overflow-wrap:normal;hyphens:manual}
/* Seit 27.09.2026 auch auf dem Handy manual: der Browser trennte "Krankenversi-cherung" und
   "über-legst". Getrennt wird nur an weichen Trennstellen (werkzeuge/silbentrennung.py). */
h1{font-size:clamp(34px,3.9vw,54px);line-height:1.13;margin-bottom:.5em}
h2{font-size:clamp(26px,2.7vw,36px);line-height:1.2;margin:1.9em 0 .55em}
h3{font-size:clamp(18px,1.5vw,20px);line-height:1.4;margin:1.7em 0 .45em;
   font-family:var(--schrift);font-weight:600;letter-spacing:0}
h4{font-size:16px;font-family:var(--schrift);font-weight:600;letter-spacing:0}
p{margin-bottom:1.15em}
strong{color:var(--ink);font-weight:600}
ul,ol{margin:0 0 1.25em 1.25em}
li{margin-bottom:.5em}
li::marker{color:var(--akzent)}
blockquote{
  margin:1.9em 0;padding:2px 0 2px 22px;border-left:3px solid var(--akzent);
}
blockquote p{font-size:17px;line-height:1.7}
blockquote p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
code{font-size:.92em;background:var(--sand);padding:1px 5px;border-radius:5px}

/* --- Tabellen tragen hier die Hauptlast: Beihilfesaetze, Zuschuesse, Fristen --- */
.tab{overflow-x:auto;margin:1.9em 0;border:1px solid var(--line);border-radius:var(--r)}
/* Breite Tabellen duerfen in die Spaltenzwischenraeume ausbrechen. 40 px je Seite,
   der Zwischenraum ist 56 px — es bleibt also Luft zu Sprungleiste und Karte. */
@media(min-width:1180px){
  .lese .tab{width:calc(100% + 80px);margin-left:-40px;margin-right:-40px}
}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5;
      font-variant-numeric:tabular-nums}
th,td{padding:12px 14px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
/* Spaltenausrichtung aus der Markdown-Trennzeile: ---: rechts, :---: mittig. */
th.r,td.r{text-align:right}
th.c,td.c{text-align:center}
thead th{background:var(--sand);color:var(--ink);font-weight:600;border-top:0}
tbody td:first-child{color:var(--ink);font-weight:600}
tbody td{color:var(--ink2)}

/* Auf schmalen Geraeten scrollt eine breite Tabelle waagerecht in ihrem Rahmen.
   Dabei wandert die erste Spalte aus dem Bild — bei einer Nachschlagetabelle
   verliert man damit genau die Spalte, die die Zeile benennt (etwa das Jahr).
   Deshalb bleibt sie stehen. Der Hintergrund muss gesetzt sein, sonst scheinen
   die durchlaufenden Zellen darunter durch. Passt eine Tabelle ohnehin in die
   Breite, bleibt die Regel wirkungslos. */
@media(max-width:820px){
  .tab thead th:first-child,
  .tab tbody td:first-child{position:sticky;left:0;z-index:1}
  .tab tbody td:first-child{background:var(--paper)}
  .tab thead th:first-child{background:var(--sand);z-index:2}
  .tab tbody td:first-child::after,
  .tab thead th:first-child::after{content:"";position:absolute;top:0;right:0;
    bottom:0;width:1px;background:var(--line)}
}
/* Handy-Pruefung 27.09.2026: 80 Tabellen liessen sich auf 360 bis 390 px nur wischend lesen,
   viele davon waren nur 5 bis 60 px zu breit. Knappere Zellen holen die meisten ganz ins Bild.
   Was dann noch breiter ist, zeigt am rechten Rand einen Schatten: Hier geht es weiter. */
@media(max-width:600px){
  table{font-size:14px;line-height:1.45}
  th,td{padding:10px 10px}
  .tab,.tabellenrahmen{
    background:
      linear-gradient(to left,#fff 30%,rgba(255,255,255,0)) right center/28px 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%,rgba(12,42,34,.16),rgba(12,42,34,0)) right center/12px 100% no-repeat scroll;
  }
}

/* --- Kopf --- */
header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);
       backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:36px;height:72px}
/* width:auto und max-width:none muessen sein: die globale Regel
   img{max-width:100%} in Zeile 88 laesst das Logo sonst mitschrumpfen,
   sobald der Flex-Behaelter eng wird — und zwar OHNE das Seitenverhaeltnis
   zu wahren. Am 21.09.2026 wurde der Schriftzug so von 206 auf 134 px
   gestaucht, ohne dass es nach einem Fehler aussah. */
.bar .logo{display:flex;align-items:center;flex:0 0 auto}
.bar .logo img{height:24px;width:auto;max-width:none;display:block}

/* --- Marke: PKV Atlas, Trennstrich, Partnerzeichen ---
   Das Partnerzeichen steht bewusst in SEINEN Farben und klein. Ein Partnerzeichen
   soll fremd aussehen — daran erkennt der Leser, dass ein Dritter buergt und nicht
   bloss ein Gestaltungselement danebensteht. Wird es angeglichen, verschwindet die
   Buergschaft und es entsteht der Eindruck einer gemeinsamen Marke.
   Gemessen am 21.09.2026: HanseMerkur-Gruen #0B8E70 liegt bei 166 Grad, unser
   Gruen #00795C bei 166 Grad — dicht beieinander, es beisst sich nicht. */
.marke{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.marke-trenner{width:1px;height:26px;background:var(--line);flex:0 0 auto}
/* 28 px Kachelhoehe. Zwei Grenzen, beide gemessen:
   nach unten wird der Schriftzug "HanseMerkur" ab etwa 18 px unlesbar, und ein
   unlesbares Partnerzeichen ist nur ein gruener Fleck. Nach oben darf sie das
   eigene Logo nicht an Flaeche schlagen — bei 28 px hat die Kachel 1344 px²
   gegen 3960 px² des Schriftzugs, also knapp ein Drittel.
   ACHTUNG: Das Hoehenverhaeltnis von petonova (Logo 1,38-mal hoeher) laesst sich
   hier NICHT uebernehmen. Deren Logo hat 3,63:1, unseres 6,87:1 — haelt man das
   Hoehenverhaeltnis ein, wird die Kachel zwangsläufig winzig. Massgeblich ist
   stattdessen die Flaeche. */
.marke-partner{height:28px;width:auto;max-width:none;display:block;flex:0 0 auto}

/* Unter 940 px faellt die Navigation weg, unter 600 px auch der Schriftzug:
   dann traegt das Bildzeichen allein. Gerechnet: mobil bleiben neben dem
   Beratungsknopf 168 px, das Bildzeichen braucht 41 und das Partnerzeichen 58. */
/* Spezifitaet muss `.bar .logo img` schlagen (0,2,1), sonst bleiben beide
   Bildmarken sichtbar — und Flexbox quetscht dann den Schriftzug zusammen,
   statt ihn zu ueberlaufen. Genau das ist am 21.09.2026 passiert. */
.bar .logo img{flex:0 0 auto}
.bar .logo img.zeichen{display:none}
@media(max-width:600px){
  .marke{gap:10px}
  .bar .logo img.wortmarke{display:none}
  .bar .logo img.zeichen{display:block}
}
/* Ueberall `>`: `.bar nav` (0,1,1) ist spezifischer als `.menue-liste` (0,1,0)
   und hat dessen Abstaende ueberschrieben — 28 px statt 2, die Klappliste wurde
   dadurch 562 statt 390 px hoch. */
.bar > nav{display:flex;gap:28px;font-size:15px;font-weight:500}
.bar > nav a{color:var(--ink2);text-decoration:none}
.bar > nav a:hover{color:var(--akzent)}
.bar .rechts{margin-left:auto;display:flex;align-items:center;gap:18px}
.bar .rechts .btn{white-space:nowrap}
/* Zurueck auf 940 am 21.09.2026, nachdem die Marke von 291 auf 223 px geschrumpft
   ist. Gemessen: Marke 223 + Navigation 443 + Knopf 175 + zwei Luecken 72 + Polster 40
   = 953 px Mindestbreite, und unterhalb von 1000 px wird der Knopf ohnehin kleiner. */
/* `>` ist hier nicht kosmetisch: Ohne den direkten Nachfahren trifft die Regel
   AUCH die Liste des mobilen Menues (.bar > details > nav.menue-liste) und das
   Menue klappt zwar auf, bleibt aber unsichtbar. Genau das ist am 21.09.2026
   passiert — der Knopf wurde zum X, es erschien nichts. */
/* Auf 1180 am 23.09.2026. Die Rechnung oben stimmt seit dem 22.09. nicht mehr:
   Container, Schrift und Knopf sind gewachsen. Gemessen lief der Kopf zwischen
   941 und rund 1050 px auf ALLEN Seiten rechts aus dem Bild, die Seite liess
   sich seitwaerts schieben; im Ratgeber brach "Beratung anfragen" bis 1140 px
   zweizeilig um. Ab 1180 passt alles einzeilig. Die Grenze fuer .menue weiter
   unten muss dieselbe sein, sonst entsteht ein Bereich ohne jede Navigation. */
@media(max-width:1180px){.bar > nav{display:none}}

/* --- Knoepfe: einzige Stelle fuer Smaragd als Flaeche --- */
/* Der Knopf wirkt nicht durch die Flaeche, sondern durch den weichen Schein
   darunter — ein Schatten in seiner eigenen Farbe. Das ist der Unterschied
   zwischen "aufgeklebt" und "liegt auf der Seite". */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;
     padding:15px 24px;border-radius:4px;font-weight:600;font-size:14.5px;
     line-height:1.5;text-decoration:none;border:1px solid transparent;cursor:pointer;
     font-family:inherit;transition:background .2s ease,transform .2s ease,color .2s ease}
.btn-1{background:var(--akzent);border-color:var(--akzent);color:#fff}
.btn-1:hover{background:var(--akzent-tief);border-color:var(--akzent-tief);color:#fff;
             transform:translateY(-2px)}
.btn-1:active{transform:translateY(0)}
.btn-2{color:var(--ink);background:transparent;border-color:#CDDBD3}
.btn-2:hover{color:var(--ink);background:var(--sand);transform:translateY(-2px)}
.btn-2:active{transform:translateY(0)}

/* ===========================================================================
   ARTIKEL
   =========================================================================== */

/* --- Kopfband: Text links, Bild rechts --- */
.artikelkopf{background:var(--sand);border-bottom:1px solid var(--line);
             padding:clamp(36px,4.5vw,60px) 0}
.artikelkopf .w{display:grid;grid-template-columns:minmax(0,640px) minmax(0,504px);
                gap:clamp(28px,4vw,56px);align-items:center}
.artikelkopf h1{margin-bottom:.45em}
.rubrik{display:block;font-size:13px;font-weight:600;letter-spacing:.12em;
        text-transform:uppercase;color:var(--akzent);margin-bottom:14px}
.vorspann{font-size:18px;line-height:1.72;color:var(--ink2);margin-bottom:26px;max-width:60ch}
.kopfbild{border-radius:var(--r);overflow:hidden;background:var(--marine);aspect-ratio:4/3}
.kopfbild img{width:100%;height:100%;object-fit:cover}
@media(max-width:1000px){
  .artikelkopf .w{grid-template-columns:minmax(0,1fr)}
  .kopfbild{aspect-ratio:16/9;order:-1;margin-bottom:8px}
}

/* --- Autorenzeile im Kopf --- */
.autorzeile{display:flex;align-items:center;gap:14px}
.autorzeile .bild{width:46px;height:46px;border-radius:999px;flex:0 0 auto;object-fit:cover;
                  background:var(--marine);object-fit:cover}
.autorzeile .name{display:block;font-weight:600;font-size:16px;color:var(--ink);line-height:1.4}
.autorzeile .dazu{font-size:13.5px;color:var(--mute);line-height:1.45}

/* --- Dreispalter --- */
.gitter{display:grid;gap:var(--spalt);align-items:start;
        grid-template-columns:var(--rail) minmax(0,var(--lese)) var(--aside);
        justify-content:center;padding:clamp(36px,4.5vw,56px) 0 clamp(48px,6vw,80px)}
@media(max-width:1180px){
  .gitter{grid-template-columns:var(--rail) minmax(0,var(--lese));}
  .gitter .aside{display:none}
}
@media(max-width:900px){
  .gitter{grid-template-columns:minmax(0,1fr)}
  .gitter .rail{display:none}
}

/* --- Sprungleiste --- */
.rail{position:sticky;top:96px}
.rail .kopf{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
            color:var(--mute);margin-bottom:14px}
.rail ol{list-style:none;margin:0}
.rail li{margin:0}
.rail a{display:block;padding:8px 0 8px 16px;border-left:2px solid var(--line);
        font-size:15px;line-height:1.45;color:var(--mute);text-decoration:none;
        transition:color .15s,border-color .15s}
.rail a:hover{color:var(--ink)}
.rail a.aktiv{color:var(--akzent);font-weight:600;border-left-color:var(--akzent)}

/* --- Beratungskarte rechts --- */
.aside{position:sticky;top:96px}
.aside .karte{background:var(--sand);border-radius:var(--r);padding:24px 22px}
.aside .karte h3{margin:0 0 8px;font-size:16px;line-height:1.4}
.aside .karte p{font-size:14px;line-height:1.5;color:var(--ink2);margin-bottom:16px}
.aside .btn{width:100%;font-size:14px;padding:11px 18px}

/* --- Lesespalte --- */
.lese{overflow-wrap:break-word}
.lese>*:first-child{margin-top:0}
.lese p{color:var(--ink2);font-size:18px;line-height:1.78}
.lese li{font-size:18px}
.vorspann{font-size:19px;line-height:1.7}

/* --- Das Wichtigste in Kuerze --- */
.kurz{background:var(--sand);border-radius:var(--r);padding:clamp(22px,3vw,28px);margin:0 0 2em}
.kurz h2{font-family:var(--schrift);font-size:17px;font-weight:600;letter-spacing:0;
         margin:0 0 14px;line-height:1.4}
.kurz ul{list-style:none;margin:0}
.kurz li{position:relative;padding-left:20px;margin-bottom:12px;font-size:16px;line-height:1.63}
.kurz li:last-child{margin-bottom:0}
.kurz li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
                 border-radius:999px;background:var(--akzent)}

/* --- Bild-Text-Reihe --- */
.reihe{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;
       align-items:start;margin:1.9em 0}
/* Kachel in Kachel: getoenter Grund, das Bild leicht eingerueckt darin.
   Das ist die Handschrift, an der man Feather erkennt — nicht das Raster. */
.reihe .bild{border-radius:var(--r);background:var(--ton);aspect-ratio:25/18;padding:10px}
.reihe .bild img{width:100%;height:100%;object-fit:cover;border-radius:7px}
.reihe h3{margin:0 0 6px}
.reihe p{font-size:16px;line-height:1.65;color:var(--ink2);margin:0}
@media(max-width:620px){.reihe{grid-template-columns:1fr}}

/* --- Hinweis --- */
.hinweis-block{border-left:3px solid var(--akzent);padding:2px 0 2px 22px;margin:1.9em 0}
.hinweis-block p:last-child{margin-bottom:0}

/* --- Haeufige Fragen als echtes Akkordeon --- */
.faq{margin:1.6em 0 0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
             padding:18px 0;font-weight:500;font-size:17px;line-height:1.5;
             color:var(--ink);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--mute);flex:0 0 auto;
                    line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{font-size:16px;line-height:1.7;color:var(--ink2);padding-bottom:20px;margin:0}

/* --- Beratungskasten im Artikel --- */
.beratung{background:var(--sand);border-radius:var(--r);
          padding:clamp(22px,3vw,30px);margin:2.6em 0}
.beratung h3{margin-top:0;font-size:21px;font-weight:700;letter-spacing:-.02em}
.beratung p{color:var(--ink2)}
.beratung p:last-of-type{margin-bottom:1.2em}

/* --- Autorenkasten: Pflichtangabe nach § 15 VersVermV --- */
.autor{display:flex;gap:22px;align-items:flex-start;background:var(--sand);
       border-radius:var(--r);padding:clamp(22px,3vw,28px);margin-top:3em}
.autor img{width:76px;height:76px;border-radius:999px;object-fit:cover;flex:0 0 auto;
           background:var(--marine)}
.autor .txt{font-size:16px;line-height:1.65;color:var(--ink2)}
.autor .name{color:var(--ink);font-weight:600;font-size:18px;display:block;margin-bottom:2px}
.autor .status{font-size:13.5px;color:var(--mute);margin-top:10px;line-height:1.5}

/* --- Belege --- */
.belege{margin-top:2.6em;padding-top:0}
.belege .kopf{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
              color:var(--mute);margin-bottom:10px}
.belege ul{list-style:none;margin:0}
.belege li{font-size:14px;line-height:1.55;color:var(--mute);margin-bottom:7px}

/* --- Abschlussband --- */
.abschluss{background:var(--sand);border-top:1px solid var(--line)}
.abschluss .w{display:flex;align-items:center;justify-content:space-between;gap:40px;
              padding-top:clamp(36px,4.5vw,56px);padding-bottom:clamp(36px,4.5vw,56px)}
.abschluss h2{font-size:clamp(22px,2.4vw,28px);margin:0 0 6px}
.abschluss p{color:var(--ink2);margin:0;font-size:16px}
.abschluss .btn{flex:0 0 auto;padding:15px 28px;font-size:16px}
@media(max-width:760px){.abschluss .w{flex-direction:column;align-items:flex-start}}

.aufmacher{margin:0 0 2em;border-radius:var(--r);overflow:hidden}
.aufmacher img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}

/* --- Brotkrumen, Meta --- */
.krume{font-size:13.5px;color:var(--mute);margin-bottom:14px}
.krume a{color:var(--mute);text-decoration:none}
.krume a:hover{color:var(--ink)}
.meta{font-size:13.5px;color:var(--mute);margin-bottom:2em}

/* --- Fuss --- */
footer{background:var(--ink);color:#CBD5E1;padding:clamp(44px,5vw,60px) 0 32px}
footer a{color:#CBD5E1;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer h4{color:#fff;font-size:14px;margin-bottom:14px;font-weight:600}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fgrid ul{list-style:none;margin:0;font-size:14.5px}
.fgrid li{margin-bottom:9px}
footer .logo img{height:28px;margin-bottom:16px}
footer .fein{font-size:13px;color:#94A3B8;margin-top:36px;padding-top:22px;
             border-top:1px solid rgba(255,255,255,.14);line-height:1.6}

/* --- Formular --- */
.form{background:var(--sand);border-radius:var(--r);
      padding:clamp(22px,3.2vw,32px);margin:2em 0}
.feld{margin-bottom:18px}
.feld label{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.feld .zusatz{font-weight:400;color:var(--mute)}
.feld input,.feld select,.feld textarea{
  width:100%;padding:13px 14px;border:1px solid #CBD5E1;border-radius:9px;background:#fff;
  font:inherit;font-size:16px;color:var(--ink)}
.feld textarea{min-height:110px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--akzent);box-shadow:0 0 0 3px rgba(0,121,92,.16)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.zwei{grid-template-columns:1fr}}

.einwilligung{display:flex;gap:12px;align-items:flex-start;margin:22px 0 6px}
.einwilligung input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--akzent)}
.einwilligung label{font-size:14.5px;line-height:1.55;color:var(--ink2);font-weight:400}

/* Honigtopf: fuer Menschen unsichtbar, fuer einfache Bots ein Koeder.
   Nicht display:none — manche Bots ueberspringen genau das. */
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form .btn-1{width:100%;justify-content:center;padding:15px 24px;font-size:16px;margin-top:14px}
.form .btn-1[disabled]{opacity:.6;cursor:default}
.hinweis{font-size:13px;color:var(--mute);margin-top:14px;line-height:1.5}
.meldung{border-radius:9px;padding:14px 16px;margin-top:16px;font-size:15px;display:none}
.meldung.fehler{display:block;background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.danke{background:var(--sand);border-radius:var(--r);
       padding:clamp(24px,3.5vw,36px);margin:2em 0}
.danke h2{margin-top:0}

/* ===========================================================================
   ARTIKEL, EINSPALTIG  (Aufbau wie petonova.de)
   ---------------------------------------------------------------------------
   Eine Spalte, kein Seitenbalken. Brotkrume, Ueberschrift, Metazeile, Bild,
   Inhaltsverzeichnis, Text — dazwischen zwei bis drei Beratungsbloecke.

   Die Spalte ist schmaler als bei petonova: dort stehen 92 Zeichen in einer
   Zeile, angenehm sind 60 bis 75. Bei Texten dieser Laenge verliert man sonst
   beim Zeilensprung die Spur.
   =========================================================================== */

/* Unten Luft lassen: sonst stoesst der Autorenkasten ohne Abstand an das
   Abschlussband darunter. */
.artikel{max-width:752px;margin:0 auto;padding:0 var(--pad) clamp(52px,6vw,84px)}
.artikel-kopf{padding:clamp(26px,3.4vw,44px) 0 0}
.artikel-kopf .vorspann{margin-bottom:30px}
/* Montserrat laeuft breiter als ein Systemfont. 38 statt 42 px haelt die
   Ueberschrift bei zwei Zeilen, ohne dass sie an Gewicht verliert. */
.artikel h1{font-size:clamp(29px,3.4vw,41px);line-height:1.2;font-weight:700;
            letter-spacing:-.02em;margin:6px 0 20px}

/* Metazeile: Portrait, Name, Stand, Lesezeit, Rubrik */
.metazeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
           font-size:14px;color:var(--mute);margin-bottom:26px}
.metazeile .portrait{width:34px;height:34px;border-radius:999px;flex:0 0 auto;object-fit:cover;
                     background:var(--marine);object-fit:cover}
.metazeile .wer{color:var(--ink);font-weight:600}
.metazeile .punkt{color:#C7C2BA}
.metazeile .rubrik-pille{padding:3px 10px;border-radius:999px;background:var(--ton);
                         color:var(--ink);font-weight:600;font-size:12.5px}

.artikel .aufmacher{margin:0 0 30px;border-radius:var(--r-gross);overflow:hidden;
                    background:var(--ton)}
.artikel .aufmacher img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}

/* Inhaltsverzeichnis: statische Liste, kein Skript noetig */
.inhaltsliste{background:var(--sand);border-radius:var(--r);padding:22px 26px;margin:0 0 34px}
.inhaltsliste .kopf{font-size:12px;font-weight:600;letter-spacing:.12em;
                    text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.inhaltsliste ol{margin:0;padding-left:20px}
.inhaltsliste li{margin-bottom:7px;font-size:15.5px;line-height:1.5}
.inhaltsliste li:last-child{margin-bottom:0}
.inhaltsliste a{color:var(--ink2);text-decoration:none}
.inhaltsliste a:hover{color:var(--akzent);text-decoration:underline}

/* Beratungsblock im Fliesstext — zwei bis drei je Artikel */
.cta-block{background:linear-gradient(180deg,var(--akzent-hell),var(--akzent-hell2));
           border:1px solid var(--akzent-linie);border-radius:18px;
           padding:clamp(22px,3vw,28px);margin:2.8em 0;
           display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cta-block .txt{flex:1 1 260px}
.cta-block h3{margin:0 0 5px;font-size:19px;line-height:1.35;font-weight:700;letter-spacing:-.02em}
.cta-block p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.cta-block .btn{flex:0 0 auto}

/* ===========================================================================
   STARTSEITE UND UEBERSICHTEN
   =========================================================================== */

/* --- Aufmacher --- */
.held{background:var(--sand);border-bottom:1px solid var(--line);
      padding:clamp(40px,5vw,72px) 0 clamp(44px,5.5vw,80px)}
.held .w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);
         gap:clamp(32px,4vw,56px);align-items:center}
/* In der Schlagzeile keine Silbentrennung — dort faellt ein Trennstrich auf.
   Im Fliesstext und in den Artikelkoepfen bleibt sie an, sonst sprengen
   Woerter wie "Jahresarbeitsentgeltgrenze" die schmalen Spalten. */
.held h1{font-size:clamp(30px,3.6vw,43px);line-height:1.15;margin-bottom:.45em;hyphens:manual}
.held .lead{font-size:19px;line-height:1.7;color:var(--ink2);max-width:52ch;margin:0}
.held .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.held .bild{border-radius:var(--r-gross);overflow:hidden;aspect-ratio:4/3;background:var(--marine)}
.held .bild img{width:100%;height:100%;object-fit:cover}
@media(max-width:1000px){
  .held .w{grid-template-columns:minmax(0,1fr)}
  .held .bild{aspect-ratio:16/9;order:-1}
}

/* --- Aufmacher mit randlosem Bild und Ueberlagerung --- */
.held-bild{position:relative;border-radius:var(--r-gross);overflow:hidden;
           min-height:clamp(360px,38vw,480px);display:flex;flex-direction:column;
           background:var(--marine)}
.held-bild>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(12,42,34,.88) 0%,rgba(12,42,34,.72) 42%,rgba(12,42,34,.18) 100%)}
.held-bild .inhalt{position:relative;z-index:2;padding:clamp(28px,4vw,52px);max-width:680px}
.held-bild h1{color:#fff;font-size:clamp(28px,3.4vw,44px);line-height:1.13;
              margin-bottom:.4em;hyphens:manual;letter-spacing:-.024em}
.held-bild .lead{color:rgba(255,255,255,.88);font-size:clamp(16px,1.3vw,19px);
                 line-height:1.65;max-width:50ch;margin:0}
.held-bild .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.held-bild .btn-hell{background:#fff;color:var(--ink)}
.held-bild .btn-hell:hover{background:#fff;color:var(--akzent)}
.held-bild .btn-rand{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.held-bild .btn-rand:hover{box-shadow:inset 0 0 0 1.5px #fff;color:#fff}

/* Siegel oben links im Aufmacher */
/* Im Fluss statt absolut: so kann das Siegel bei keiner Breite in die
   Ueberschrift laufen. Das margin-bottom:auto schiebt den Text nach unten. */
.siegel{position:relative;z-index:2;align-self:flex-start;
        margin:clamp(20px,2.6vw,32px) clamp(28px,4vw,52px) auto;
        display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;
        background:rgba(255,255,255,.14);backdrop-filter:blur(8px);
        font-size:13px;font-weight:600;color:#fff}
.siegel::before{content:"";width:7px;height:7px;border-radius:999px;background:#34D399}

/* --- kleiner Marker ueber einem Absatz --- */
.marker{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--ton);
        color:var(--ink);font-size:12.5px;font-weight:600;letter-spacing:.01em;margin-bottom:10px}

/* --- Vertrauenszeile --- */
.vertrauen{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px;
           font-size:14px;color:var(--mute)}
.vertrauen span{display:inline-flex;align-items:center;gap:8px}
.vertrauen span::before{content:"";width:6px;height:6px;border-radius:999px;
                        background:var(--akzent);flex:0 0 auto}

/* --- Saeulenkarten --- */
.saeulen{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
         gap:20px;margin-top:30px}
.saeulen a{display:block;padding:28px;border-radius:var(--r);background:#fff;
           box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .18s,transform .18s}
.saeulen a:hover{box-shadow:inset 0 0 0 1.5px var(--akzent);transform:translateY(-2px)}
.saeulen h3{margin:0 0 8px;font-size:19px}
.saeulen p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.saeulen .mehr{display:block;margin-top:16px;font-size:14.5px;font-weight:600;color:var(--akzent)}

/* --- Ablauf in drei Schritten --- */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
          gap:clamp(24px,3vw,40px);margin-top:32px;counter-reset:schritt}
.schritte>div{counter-increment:schritt}
.schritte>div::before{content:counter(schritt);display:flex;align-items:center;
  justify-content:center;width:36px;height:36px;border-radius:999px;
  background:var(--akzent);color:#fff;font-family:var(--schrift);
  font-weight:600;font-size:16px;margin-bottom:16px}
.schritte h3{margin:0 0 6px;font-size:18px}
.schritte p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink2)}

/* --- Artikelkarten --- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));
        gap:clamp(22px,2.5vw,30px);margin-top:30px}
.karten .bild{border-radius:var(--r);aspect-ratio:16/10;
              background:var(--ton);margin-bottom:15px;padding:10px}
.karten .bild img{width:100%;height:100%;object-fit:cover;border-radius:7px;transition:transform .4s}
.karten a:hover .bild img{transform:scale(1.025)}
.karten .rubrik{margin-bottom:7px;font-size:12px}
.karten h3{margin:0 0 7px;font-size:19px;line-height:1.35;font-weight:700;letter-spacing:-.02em}
.karten a:hover h3{color:var(--akzent)}
.karten p{margin:0;font-size:15px;line-height:1.6;color:var(--ink2)}

/* --- dunkles Band --- */
.dunkel{background:var(--ink);color:#CBD5E1}
.dunkel h2,.dunkel h3{color:#fff}
.dunkel p{color:#CBD5E1}
.dunkel a{color:var(--hellblau)}

/* --- Vorstellung --- */
.vorstellung{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
             gap:clamp(28px,4vw,52px);align-items:center}
.vorstellung .bild{border-radius:var(--r-gross);overflow:hidden;aspect-ratio:1;
                   background:var(--marine)}
.vorstellung .bild img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.vorstellung{grid-template-columns:minmax(0,1fr)}}

/* --- Abschnittskopf --- */
.kopfzeile{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.kopfzeile h2{margin:0}
.kopfzeile a{font-size:15px;font-weight:600;text-decoration:none}
.kopfzeile a:hover{text-decoration:underline}

/* --- Rechtstexte: Impressum, Datenschutz, Erstinformation --- */
.rechtstext h2{font-size:clamp(20px,2vw,24px);margin:2em 0 .5em}
.rechtstext h3{font-size:17px;margin:1.6em 0 .4em}
.rechtstext p,.rechtstext li{font-size:16.5px;line-height:1.72}
.rechtstext .stand{font-size:14px;color:var(--mute);margin-bottom:2em}
.rechtstext address{font-style:normal;margin-bottom:1.1em}
.rechtstext dl{margin:0 0 1.2em}
.rechtstext dt{font-weight:600;color:var(--ink);margin-top:.9em}
.rechtstext dd{margin:0 0 .2em}
/* Widerspruchsrecht nach Art. 21 Abs. 4 DSGVO: muss "in einer verstaendlichen und von
   anderen Informationen getrennten Form" erscheinen — deshalb als eigener Kasten. */
.rechtstext .widerspruch{border:1px solid var(--akzent-linie);background:var(--akzent-hell);
  border-radius:12px;padding:18px 22px 6px;margin:1.6em 0}
.rechtstext .widerspruch h3{margin-top:0}

/* Fehlende Pflichtangabe: muss beim Ueberfliegen ins Auge springen, damit
   niemand die Seite in diesem Zustand freigibt. */
.luecke{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;border-radius:5px;
        padding:1px 7px;font-weight:600;font-size:.92em;white-space:nowrap}
.sperrhinweis{background:#FEF3C7;border:1px solid #FCD34D;border-radius:var(--r);
              padding:20px 24px;margin:0 0 2.4em}
.sperrhinweis p{margin:0;font-size:15.5px;line-height:1.6;color:#78350F}
.sperrhinweis p+p{margin-top:.7em}

/* Vorschlag statt Luecke: Wert ist gesetzt, braucht aber eine Bestaetigung. */
.vorschlag{background:#E0F2FE;color:#075985;border:1px solid #7DD3FC;border-radius:5px;
           padding:1px 7px;font-weight:600;font-size:.92em}

/* --- Zugaenglichkeit --- */
:focus-visible{outline:3px solid var(--akzent);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}




/* ===========================================================================
   EINWILLIGUNG
   Nicht sperrend: der Balken liegt unten, verdeckt den Inhalt nicht und
   haelt die Bedienung nicht auf. Beide Knoepfe sind bewusst identisch —
   Ablehnen darf nicht schwerer aussehen als Zustimmen.
   =========================================================================== */

#statistik-hinweis{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  max-width:var(--breite);margin:0 auto;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  padding:18px 22px;border-radius:18px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 0 0 1px var(--line),0 12px 40px rgba(12,42,34,.14);
  animation:statistik-auf .32s ease both}

@keyframes statistik-auf{from{opacity:0;transform:translateY(12px)}
                            to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #statistik-hinweis{animation:none}
  #statistik-hinweis .btn:hover{transform:none}
}

.statistik-text{flex:1 1 320px;min-width:0;
  font-size:14px;line-height:1.55;color:var(--ink2)}
.statistik-text strong{color:var(--ink)}
.statistik-text a{color:var(--akzent);text-decoration:underline;
  text-underline-offset:2px}

.statistik-knoepfe{display:flex;gap:10px;flex:0 0 auto}
.statistik-knoepfe .btn{padding:11px 20px;font-size:14px;white-space:nowrap}

@media (max-width:760px){
  #statistik-hinweis{left:10px;right:10px;bottom:10px;padding:16px;gap:14px}
  .statistik-knoepfe{width:100%}
  .statistik-knoepfe .btn{flex:1 1 0;padding:12px 8px}
}

/* Schalter auf der Datenschutzseite */
.einwilligung-schalter{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.einwilligung-stand{font-size:14px;color:var(--mute);margin:0 0 10px}

/* ===========================================================================
   TRICHTER  /einschaetzung/
   Eine Frage je Bildschirm, kein Fortschrittsbalken. Der Balken verspricht
   Laenge; die Zahl "Schritt 2" verspricht, dass es bald vorbei ist.
   =========================================================================== */

.trichter{padding:56px 0 72px}
.trichter .zaehler{font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--akzent);margin:0 0 10px}
.trichter h1{font-size:clamp(26px,4vw,38px);line-height:1.18;margin:0 0 14px}
.trichter .unter{color:var(--mute);font-size:15.5px;line-height:1.6;margin:0 0 26px;
  max-width:52ch}

.wahlen{display:flex;flex-direction:column;gap:12px;margin:26px 0 22px;max-width:620px}
.wahlen.schmal{max-width:320px}

.wahl{display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  padding:17px 20px;border:0;border-radius:14px;background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--line),0 3px 12px rgba(22,39,60,.05);
  transition:box-shadow .18s ease,transform .14s ease,background .18s ease}
.wahl strong{display:block;font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.35}
.wahl span{display:block;margin-top:4px;font-size:14px;color:var(--mute);line-height:1.5}
.wahl:hover{transform:translateY(-1px);background:var(--akzent-hell);
  box-shadow:inset 0 0 0 1.5px var(--akzent),0 8px 22px rgba(22,39,60,.08)}
.wahl:active{transform:translateY(0)}
.wahl:focus-visible{outline:3px solid var(--akzent-schein);outline-offset:2px}

.zurueck{background:none;border:0;padding:6px 0;cursor:pointer;font-family:inherit;
  font-size:14.5px;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.zurueck:hover{color:var(--akzent)}

.trichter h1:focus{outline:none}

/* Die Sackgasse sieht bewusst NICHT nach Fehler aus: kein Rot, kein Warnzeichen.
   Es ist eine Auskunft, keine Zurueckweisung. */
.sackgasse{max-width:640px}
.sackgasse p{font-size:16px;line-height:1.7;color:var(--ink2);margin:0 0 16px}
.sackgasse .btn{margin:4px 0 8px}

.trichter .form{max-width:620px;margin-top:8px}

.ablauf{margin-top:64px;padding-top:34px;border-top:1px solid var(--line);max-width:680px}
.ablauf h2{font-size:19px;margin:0 0 18px}
.ablauf ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.ablauf li{font-size:15px;line-height:1.65;color:var(--ink2)}
.ablauf strong{color:var(--ink)}

@media (max-width:760px){
  .trichter{padding:34px 0 52px}
  .wahl{padding:15px 16px}
}

/* Platzhalter im Trichter: gelber Block wie der Sperrhinweis, aber in Lesebreite.
   .luecke taugt hier nicht — die ist eine Inline-Markierung mit white-space:nowrap
   und laeuft bei mehreren Absaetzen aus dem Kasten heraus. */
.platzhalter{max-width:640px;margin:22px 0 26px}
.platzhalter p + p{margin-top:12px}

/* Zahlenfeld im Trichter (Alter). Bewusst gross und kurz: ein Feld, zwei Ziffern.
   Die Pfeilchen der Zahlenfelder fliegen raus — auf dem Handy sind sie nutzlos
   und am Rechner verleiten sie zum Klickern statt zum Tippen. */
.zahlfeld{display:flex;align-items:baseline;gap:12px;margin:26px 0 8px}
.zahlfeld input{width:140px;padding:14px 18px;font-family:inherit;font-size:24px;
  font-weight:600;color:var(--ink);border:0;border-radius:14px;background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--line),0 3px 12px rgba(22,39,60,.05);
  transition:box-shadow .18s ease}
.zahlfeld input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--akzent),
  0 0 0 4px var(--akzent-schein)}
.zahlfeld input::-webkit-outer-spin-button,
.zahlfeld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.zahlfeld input[type=number]{-moz-appearance:textfield;appearance:textfield}
.zahlfeld .einheit{font-size:17px;color:var(--mute)}
.feldfehler{margin:2px 0 0;font-size:14.5px;color:#B91C1C}
.sr-nur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}

/* ===========================================================================
   VERKAUFSSEITE DER SAEULEN  (/angestellte/ …)
   Aufbau uebernommen von petonovas Produktseiten. Die Seite holt keinen
   Verkehr — das tun die Ratgeber, nachgewiesen in petonovas Search Console —
   sie wandelt ihn um. Deshalb: wenig Text je Abschnitt, viele Absprungpunkte.
   =========================================================================== */

.held-schmal{padding:60px 0 44px}
.held-schmal .zaehler{font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--akzent);margin:0 0 12px}
.held-schmal h1{font-size:clamp(34px,4.4vw,56px);line-height:1.12;margin:0 0 18px;
  letter-spacing:-.015em}
.vorspann{font-size:18.5px;line-height:1.62;color:var(--ink2);max-width:60ch;margin:0 0 28px}
.held-knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.feinzeile{font-size:14px;color:var(--mute);margin:0}

.ton{background:var(--sand)}
section h2{font-size:clamp(28px,2.9vw,40px);line-height:1.2;margin:0 0 16px}
.unterzeile{color:var(--mute);font-size:16px;line-height:1.6;max-width:60ch;margin:0 0 26px}
.quelle{font-size:13.5px;color:var(--mute);margin:18px 0 0;padding-top:12px;
  border-top:1px solid var(--line)}

.karten.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:8px 0 0}
.karte{background:#fff;border-radius:16px;padding:26px 24px;
  box-shadow:inset 0 0 0 1px var(--line),0 4px 18px rgba(22,39,60,.05)}
.karte h3{font-size:20px;margin:0 0 3px}
.kuerzel{font-size:13px;color:var(--mute);margin:0 0 18px;font-variant-numeric:tabular-nums}
.haken{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:11px}
.haken li{font-size:15px;line-height:1.55;color:var(--ink2);padding-left:22px;position:relative}
.haken li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;
  border-radius:3px;background:var(--akzent-hell2);box-shadow:inset 0 0 0 1.5px var(--akzent)}
.fuer{font-size:14.5px;line-height:1.55;color:var(--mute);margin:0;padding-top:16px;
  border-top:1px solid var(--line)}

.entscheidung{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:18px}
.entscheidung li{font-size:16.5px;line-height:1.68;color:var(--ink2)}
.entscheidung strong{color:var(--ink)}

.weiter{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.weiter li{font-size:16px;line-height:1.55;color:var(--mute)}
.weiter a{color:var(--akzent);font-weight:600;text-decoration:none}
.weiter a:hover{text-decoration:underline;text-underline-offset:3px}

.karten.zwei-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:940px){.karten.drei{grid-template-columns:1fr}}
@media(max-width:780px){.karten.zwei-karten{grid-template-columns:1fr}}
@media(max-width:760px){
  .held-schmal{padding:38px 0 32px}
  .held-knoepfe .btn{flex:1 1 100%}
}

/* Beispielrechnung auf der Verkaufsseite. Zahlen rechtsbündig und tabellarisch,
   damit die Spalte beim Überfliegen eine Linie ergibt. */
.rechnung{width:100%;border-collapse:collapse;margin:26px 0 24px;font-size:15.5px}
.rechnung td{padding:11px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.rechnung td:last-child{text-align:right;white-space:nowrap;padding-left:18px;
  font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.rechnung td span{display:inline-block;margin-left:8px;font-size:12.5px;color:var(--mute);
  font-variant-numeric:tabular-nums}
.rechnung .summe td{border-top:1.5px solid var(--ink);border-bottom:0;padding-top:13px}
.rechnung .abzug td{color:var(--akzent)}
.rechnung .abzug td:last-child{color:var(--akzent)}
.rechnung .end td{font-size:18px;border-top:1.5px solid var(--akzent);padding-top:15px}
.warnung{background:var(--akzent-hell);border-left:3px solid var(--akzent);
  border-radius:0 10px 10px 0;padding:16px 20px;font-size:15.5px;line-height:1.62;
  color:var(--ink2);margin:22px 0 0}
@media(max-width:560px){
  .rechnung{font-size:14.5px}
  .rechnung td span{display:block;margin:3px 0 0}
}

/* Beitragstabelle nach Eintrittsalter. Auf schmalen Schirmen waagerecht
   scrollbar statt umgebrochen — eine Beitragszeile, die umbricht, ist unlesbar. */
.tabellenrahmen{overflow-x:auto;margin:26px 0 22px;-webkit-overflow-scrolling:touch}
.alterstabelle{width:100%;min-width:520px;border-collapse:collapse;font-size:15px}
.alterstabelle th{text-align:right;padding:0 0 12px 18px;font-size:13.5px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--mute);
  border-bottom:1.5px solid var(--ink)}
.alterstabelle th:first-child{text-align:left;padding-left:0}
.alterstabelle td{padding:11px 0 11px 18px;border-bottom:1px solid var(--line);
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--ink)}
.alterstabelle td:first-child{text-align:left;padding-left:0;white-space:normal;
  font-weight:400;color:var(--ink2)}
.alterstabelle td span{display:inline-block;margin-left:8px;font-size:12.5px;color:var(--mute)}
.alterstabelle .summe td{border-top:1.5px solid var(--ink);border-bottom:0;padding-top:13px}
.alterstabelle .abzug td{color:var(--akzent)}
.alterstabelle .end td{font-size:17.5px;border-top:1.5px solid var(--akzent);padding-top:14px}
/* Hervorgehobene Zwischensumme, z. B. der Grundschutz auf /selbststaendige/ (26.09.2026). */
.alterstabelle .hervor td{font-size:19px;padding-top:14px;padding-bottom:14px;background:var(--akzent-hell)}
.alterstabelle .hervor td strong{color:var(--akzent-tief)}
.alterstabelle .hervor td:first-child{padding-left:12px}
.alterstabelle .hervor td:last-child{padding-right:12px}

/* Zweispaltige Gegenüberstellung: Zeile ohne Wert bekommt einen Gedankenstrich
   statt einer Lücke, sonst sieht es nach Datenfehler aus. */
.alterstabelle td span{display:block;margin:2px 0 0}

/* ===========================================================================
   MOBILES MENUE
   Gebaut auf <details>, nicht auf einem Knopf mit Javascript. Grund: Es
   funktioniert damit auch ohne Skript, ist von Haus aus mit der Tastatur
   bedienbar und wird Vorleseprogrammen korrekt als aufklappbarer Bereich
   gemeldet. Das Skript menue.js ergaenzt nur Escape und Klick nach aussen.

   Gebaut am 21.09.2026, weil es vorher GAR KEINES gab: unter 940 px
   verschwand die Navigation ersatzlos. Wer aus der Suche auf einem Ratgeber
   landete — also die Mehrheit —, kam von dort nirgendwohin ausser ueber die
   Fussleiste ganz unten.
   =========================================================================== */

.menue{display:none;position:relative;flex:0 0 auto}
@media(max-width:1180px){.menue{display:block}}

.menue summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1.5px var(--line);background:#fff;
  transition:box-shadow .18s ease,background .18s ease}
.menue summary::-webkit-details-marker{display:none}
.menue summary:hover{box-shadow:inset 0 0 0 1.5px var(--akzent)}
.menue summary:focus-visible{outline:3px solid var(--akzent-schein);outline-offset:2px}

/* Drei Balken aus einem Element: der mittlere ist das Element selbst. */
.balken,.balken::before,.balken::after{display:block;width:18px;height:2px;border-radius:2px;
  background:var(--ink);transition:transform .22s ease,opacity .18s ease}
.balken{position:relative}
.balken::before,.balken::after{content:"";position:absolute;left:0}
.balken::before{top:-6px}
.balken::after{top:6px}
.menue[open] .balken{background:transparent}
.menue[open] .balken::before{transform:translateY(6px) rotate(45deg)}
.menue[open] .balken::after{transform:translateY(-6px) rotate(-45deg)}

.menue-liste{position:absolute;right:0;top:calc(100% + 12px);z-index:90;
  min-width:238px;padding:10px;border-radius:16px;
  background:#fff;
  box-shadow:inset 0 0 0 1px var(--line),0 16px 44px rgba(12,42,34,.18);
  display:flex;flex-direction:column;gap:2px;
  animation:menue-auf .18s ease both}
@keyframes menue-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .menue-liste{animation:none}
  .balken,.balken::before,.balken::after{transition:none}
}

.menue-liste a{padding:12px 14px;border-radius:10px;font-size:16px;font-weight:600;
  color:var(--ink);text-decoration:none}
.menue-liste a:hover,.menue-liste a:focus-visible{background:var(--akzent-hell);
  color:var(--akzent-tief)}
.menue-tel{margin-top:6px;padding-top:14px!important;border-top:1px solid var(--line);
  border-radius:0 0 10px 10px!important;color:var(--akzent)!important;
  font-variant-numeric:tabular-nums}

/* Ganz schmale Geraete: Polster und Abstaende zusammenziehen, damit
   Marke, Beratungsknopf und Menue nebeneinander passen. */
@media(max-width:400px){
  .bar{gap:10px}
  .bar .rechts .btn{padding:12px 16px;font-size:14px}
  .menue summary{width:40px;height:40px}
}
/* Handy: Beratungsknopf so hoch wie der Menueknopf daneben. Vorher 160 x 47
   gegen 40 x 40 — der Knopf war das schwerste Element im Kopf, schwerer als
   das Logo. Die Leiste steht beim Scrollen still, er bleibt also ohnehin immer
   sichtbar und muss nicht zusaetzlich laut sein. Entscheidung Ediz, 23.09.2026.
   40 px nicht unterschreiten, das ist die Grenze fuer sicheres Tippen. */
@media(max-width:600px){
  .bar .rechts .btn{display:inline-flex;align-items:center;height:40px;padding:0 14px;font-size:13.5px}
  .menue summary{width:40px;height:40px}
}

/* Hakenliste im Fließtext statt in einer Tarifkarte: gleiche Schriftgröße wie
   die Absätze daneben, sonst wirkt sie wie eine Fußnote. */
.haken.breit{margin:20px 0 22px;gap:14px;max-width:62ch}
.haken.breit li{font-size:16.5px;line-height:1.66}
.haken.breit li::before{top:9px}

/* Weg vom Artikel zurück zur Säulenseite. Bewusst ein großer, einzelner Block
   und keine Linkliste: Am Artikelende hat der Leser genau eine Frage — „und
   was heißt das jetzt für mich?" — und darauf gibt es genau eine Antwort. */
.saeulenhinweis{display:block;padding:24px 26px;border-radius:18px;
  /* Oben und unten gleich viel Luft. Vorher standen hier 48px oben und 8px
     unten — der Kasten klebte dadurch am grauen Abschlussband. (22.09.2026) */
  margin:clamp(44px,5vw,60px) 0;
  text-decoration:none;background:var(--akzent-hell);
  box-shadow:inset 0 0 0 1px var(--akzent-linie);
  transition:box-shadow .2s ease,transform .18s ease,background .2s ease}
.saeulenhinweis:hover{transform:translateY(-1px);background:var(--akzent-hell2);
  box-shadow:inset 0 0 0 1.5px var(--akzent),0 10px 26px rgba(0,121,92,.12)}
.saeulenhinweis strong{display:block;margin:5px 0 6px;font-size:19px;line-height:1.3;
  color:var(--akzent-tief)}
.saeulenhinweis .klein{display:block;font-size:14px;line-height:1.55;color:var(--ink2)}
.saeulenhinweis .klein:first-child{font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--akzent)}
@media(max-width:760px){.saeulenhinweis{margin-top:36px;padding:20px}}

/* ===========================================================================
   STARTSEITE
   Ihre Aufgabe ist nicht, für das Hauptschlagwort zu ranken — das gehört den
   Portalen. Sie sortiert die vier Wege, belegt die Fachkunde und gibt die
   Kraft an die Säulenseiten und die stärksten Beiträge weiter.
   =========================================================================== */

.held-start{padding:66px 0 50px}
.held-start .zaehler{font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--akzent);margin:0 0 14px}
.held-start h1{font-size:clamp(32px,5vw,50px);line-height:1.1;margin:0 0 20px;
  letter-spacing:-.02em;max-width:19ch}
@media(max-width:760px){.held-start{padding:40px 0 34px}.held-start h1{max-width:none}}

/* --- Die vier Wege --- */
.karten.vier{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:6px}
@media(max-width:1000px){.karten.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.karten.vier{grid-template-columns:1fr}}

.karte.weg,.karte.lesen{display:block;text-decoration:none;
  transition:box-shadow .2s ease,transform .18s ease,background .2s ease}
.karte.weg:hover,.karte.lesen:hover{transform:translateY(-2px);
  box-shadow:inset 0 0 0 1.5px var(--akzent),0 12px 30px rgba(0,121,92,.12)}
.karte .wert{display:block;font-size:26px;font-weight:700;color:var(--akzent);
  line-height:1.1;margin-bottom:10px;font-variant-numeric:tabular-nums}
.karte.weg strong{display:block;font-size:17px;color:var(--ink);margin-bottom:8px}
.karte .dazu{display:block;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.karte .gruppe{display:inline-block;margin-bottom:10px;padding:3px 10px;border-radius:999px;
  background:var(--akzent-hell);color:var(--akzent-tief);font-size:12.5px;font-weight:700}
.karte.lesen strong{display:block;font-size:16.5px;line-height:1.35;color:var(--ink);
  margin-bottom:8px}

/* --- Zahlentabelle: dritte Spalte ist Fundstelle, also linksbündig --- */
.alterstabelle.zahlen td:last-child,.alterstabelle.zahlen th:last-child{text-align:left;
  font-weight:400;font-size:13.5px;color:var(--mute);white-space:normal}
.alterstabelle.zahlen td:nth-child(2){font-size:16px}
.alterstabelle.zahlen td a{color:var(--akzent);font-weight:600;text-decoration:none}
.alterstabelle.zahlen td a:hover{text-decoration:underline;text-underline-offset:3px}

/* --- Drei Versprechen --- */
.dreisatz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:8px}
.dreisatz strong{display:block;font-size:17px;color:var(--ink);margin-bottom:8px}
.dreisatz p{font-size:15.5px;line-height:1.62;color:var(--ink2);margin:0}
@media(max-width:820px){.dreisatz{grid-template-columns:1fr;gap:20px}}

.weiterpfeil{font-size:16px;font-weight:600;color:var(--akzent);text-decoration:none}
.weiterpfeil:hover{text-decoration:underline;text-underline-offset:3px}

.autor.gross{display:block;background:var(--sand);border-radius:18px;padding:28px 30px;
  box-shadow:inset 0 0 0 1px var(--line)}
.autor.gross h2{font-size:21px;margin:0 0 10px}
.autor.gross p{font-size:15.5px;line-height:1.66;color:var(--ink2);margin:0 0 10px}
.autor.gross a{color:var(--akzent);font-weight:600;text-decoration:none}
.autor.gross a:hover{text-decoration:underline;text-underline-offset:3px}

/* Kontaktliste auf /ueber-mich/ */
.kontakt{display:grid;grid-template-columns:130px 1fr;gap:12px 20px;margin:22px 0 26px;
  font-size:16.5px}
.kontakt dt{color:var(--mute)}
.kontakt dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
.kontakt a{color:var(--akzent);font-weight:600;text-decoration:none}
.kontakt a:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:520px){.kontakt{grid-template-columns:1fr;gap:3px 0}
  .kontakt dd{margin-bottom:10px}}

/* ---- Grafik: SVG direkt in der Seite, spart einen Request und bleibt lesbar ---- */
.grafik-kasten{margin:2.1em 0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--sand);padding:16px 14px 10px}
.grafik-rolle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.grafik-kasten svg{display:block;width:100%;height:auto}
/* Handy (27.09.2026): Frueher 600 px breit zum Wischen, dann lag der Endstand (+67 % gegen
   +15 %), also die ganze Aussage, ausserhalb des Bildes. Jetzt passt die Grafik in die Breite
   und die Schrift waechst dafuer in SVG-Einheiten mit (12 -> 20, 13 -> 24), damit sie nach der
   Verkleinerung auf gut die Haelfte lesbar bleibt. Die Endbeschriftungen ruecken auseinander,
   damit Wert und Name sich nicht beruehren (Abstand der Gruppen in allen drei Grafiken >= 62). */
@media(max-width:620px){
  .grafik-kasten svg text[font-size="12"]{font-size:20px}
  .grafik-kasten svg text[font-size="13"]{font-size:24px;transform:translateY(-6px)}
  .grafik-kasten svg text[x="532"][font-size="12"]{transform:translateY(8px)}
}
.grafik-kasten figcaption{margin:10px 4px 4px;font-size:.86rem;line-height:1.55;color:var(--ink2)}
@media(max-width:560px){.grafik-kasten{padding:10px 6px 6px}
  .grafik-kasten figcaption{font-size:.8rem}}

/* ---- Untergruppen in der Ratgeber-Uebersicht ---- */
/* Kleiner als eine Gruppenueberschrift, damit die Saeule die Gliederung bleibt
   und die Untergruppe nur sortiert. */
.untergruppe{font-size:1rem;font-weight:600;color:var(--ink2);letter-spacing:.01em;
  margin:1.9em 0 .5em;padding-bottom:6px;border-bottom:1px solid var(--line)}
.untergruppe:first-of-type{margin-top:1.1em}

/* ---- Suchfeld der Ratgeber-Uebersicht ---- */
/* Ohne JavaScript bleibt das Formular per hidden verborgen, die volle Liste
   steht trotzdem da. Gefiltert wird nur die Anzeige, nie der Quelltext. */
/* Ein eigenes display: schlaegt sonst das hidden-Attribut. Einmal generell
   absichern, sonst faellt es bei jedem neuen Baustein wieder auf. */
[hidden]{display:none !important}

.nurvorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.suche{margin:1.5em 0 0}
.suchfeld{position:relative;display:flex;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 2px rgba(12,42,34,.05);
  transition:border-color .16s ease, box-shadow .16s ease}
.suchfeld:hover{border-color:#DCD5CC}
.suchfeld:focus-within{border-color:var(--akzent);
  box-shadow:0 0 0 3px var(--akzent-schein), 0 1px 2px rgba(12,42,34,.05)}

.suchfeld .lupe{position:absolute;left:16px;width:19px;height:19px;
  fill:none;stroke:#948E86;stroke-width:2;stroke-linecap:round;pointer-events:none;
  transition:stroke .16s ease}
.suchfeld:focus-within .lupe{stroke:var(--akzent)}

.suche input{flex:1 1 auto;min-width:0;font:inherit;font-size:1.02rem;
  color:var(--ink);background:none;border:0;border-radius:14px;
  padding:15px 48px 15px 47px}
.suche input:focus{outline:none}
.suche input::placeholder{color:#9A948C}
.suche input::-webkit-search-cancel-button{-webkit-appearance:none}
.suche input::-webkit-search-decoration{-webkit-appearance:none}

.suche .leeren{position:absolute;right:9px;display:flex;align-items:center;
  justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  background:none;color:#948E86;cursor:pointer;transition:background .14s, color .14s}
.suche .leeren svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}
.suche .leeren:hover{background:var(--sand);color:var(--ink)}
.suche .leeren:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

.suchstand{margin:.8em 3px 0;font-size:.9rem;color:#7A736B}
.suchleer{margin:1em 0 0;font-size:.98rem;line-height:1.6;color:var(--ink2);
  background:var(--akzent-hell);border:1px solid var(--akzent-linie);
  border-radius:14px;padding:16px 18px}
@media(max-width:520px){
  .suche input{font-size:16px;padding:14px 44px 14px 44px}  /* 16px: iOS zoomt sonst */
  .suchfeld .lupe{left:14px;width:18px;height:18px}
}

/* =====================================================================
   Startseite, breite Fassung — Entwurf vom 22.09.2026
   Alles unter .held2 / .zahlen-gitter / .autor-gitter ist neu und
   beruehrt die bestehenden Seiten nicht. Der Grund fuer den Umbau:
   Bisher lief fast alles in der 760px-Lesespalte. Auf einem breiten
   Schirm stand der Inhalt dadurch als schmaler Streifen in der Mitte.
   Fliesstext bleibt schmal, weil das die richtige Zeilenlaenge ist —
   Karten, Tabellen und der Kopf duerfen die Flaeche nutzen.
   ===================================================================== */

.marke-label{font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--akzent);margin:0 0 12px}

/* ---- Kopf: Text links, Einstiegskarte rechts ---- */
.held2{padding-top:clamp(34px,4vw,60px)}
.held2-gitter{display:grid;gap:clamp(28px,3.4vw,56px);align-items:center;
  grid-template-columns:minmax(0,1.22fr) minmax(0,.9fr)}
.held2-text h1{font-size:clamp(33px,3.8vw,50px);line-height:1.1;letter-spacing:-.028em;
  margin:0 0 18px}
.held2-text h1 em{font-style:normal;color:var(--akzent)}
.held2-text .vorspann{font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.62;
  color:var(--ink2);margin:0 0 26px;max-width:56ch}
.held2 .held-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.held2 .feinzeile{margin:18px 0 0;font-size:13.5px;line-height:1.6;color:#7A736B;max-width:52ch}

/* ---- Einstiegskarte in Ink, NICHT in den Hausfarben der HanseMerkur ---- */
.einstieg{background:var(--ink);color:#EAEEF4;border-radius:22px;
  padding:clamp(24px,2.4vw,34px);box-shadow:0 22px 50px rgba(12,42,34,.14)}
.einstieg-label{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#7FC4C8;margin:0 0 14px}
.einstieg-frage{font-size:clamp(21px,1.9vw,26px);line-height:1.22;font-weight:700;
  color:#fff;margin:0 0 20px;letter-spacing:-.018em}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.chips a{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  text-decoration:none;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.chips a:hover{background:rgba(0,121,92,.42);border-color:#4FA8AD;transform:translateY(-1px)}
.chips a span{font-size:15px;font-weight:600;color:#fff}
.chips a b{font-size:12.5px;font-weight:600;color:#9FD0D3;letter-spacing:.01em}
.einstieg-fuss{margin:18px 0 0;font-size:13px;line-height:1.55;color:#A9B4C4}

/* ---- Vertrauenszeile ---- */
.grundsaetze{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,34px);
  margin-top:clamp(34px,4vw,56px);padding-top:26px;border-top:1px solid var(--line)}
.grundsaetze b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:4px}
.grundsaetze span{font-size:14px;line-height:1.55;color:var(--ink2)}

/* ---- Zahlenblock: Erklaerung links, Tabelle rechts ---- */
.zahlen-gitter{display:grid;gap:clamp(26px,3vw,48px);align-items:start;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.zahlen-text h2{margin:0 0 12px}
.zahlen-text .unterzeile{margin:0 0 18px}
.zahlen-text .quelle{font-size:13.5px;line-height:1.6;color:#7A736B;margin:0 0 18px}
.zahlen-text p:last-child{font-size:15.5px;line-height:1.65;color:var(--ink2);margin:0}

/* ---- Abschnittskoepfe ueber der vollen Breite ---- */
.breit-h2{margin:0 0 10px}
.kopfzeile{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:26px;flex-wrap:wrap}
.kopfzeile .marke-label{margin-bottom:8px}
.dreisatz.weit{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,38px);
  margin-top:28px}
.dreisatz.weit>div{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:24px 26px}
.dreisatz.weit strong{display:block;font-size:17px;color:var(--ink);margin-bottom:8px}
.dreisatz.weit p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink2)}

/* ---- Autor und Anfrage nebeneinander ---- */
.autor-gitter{display:grid;gap:clamp(24px,3vw,48px);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.autor-gitter>div:first-child p{font-size:16px;line-height:1.68;color:var(--ink2)}
.anfrage-karte{background:var(--akzent-hell);border:1px solid var(--akzent-linie);
  border-radius:20px;padding:clamp(24px,2.4vw,34px)}
.anfrage-karte h3{margin:0 0 10px;font-size:clamp(19px,1.7vw,23px);line-height:1.25}
.anfrage-karte p{margin:0 0 20px;font-size:15.5px;line-height:1.62;color:var(--ink2)}

@media(max-width:980px){
  .held2-gitter,.zahlen-gitter,.autor-gitter{grid-template-columns:1fr}
  .grundsaetze,.dreisatz.weit{grid-template-columns:1fr;gap:18px}
  .grundsaetze>div{padding-bottom:14px;border-bottom:1px solid var(--line)}
  .grundsaetze>div:last-child{border-bottom:0;padding-bottom:0}
}
@media(max-width:520px){.chips{grid-template-columns:1fr}}

/* ---- Ueberschriften tragen nie die Linkfarbe ----------------------------
   Ein grosser Text in Akzentfarbe wirkt ausgewaschen, egal wie gut der Ton
   ist — die Farbe ist fuer kleine Links im Fliesstext gemacht. Ueberschriften
   und Beitragstitel stehen deshalb in Ink; dass sie Links sind, zeigt der
   Unterstrich und die Farbe beim Zeigen. (22.09.2026, nach Ediz' Hinweis) */
h1 a,h2 a,h3 a,h4 a,
.saeule li>a,
.weiter li>a{
  color:var(--ink);
  /* Der Unterstrich muss sichtbar bleiben, sonst sieht ein Titel nicht mehr
     nach Link aus. Halbtransparenter Akzent statt der hellen Linienfarbe. */
  text-decoration-color:rgba(0,121,92,.45);
  text-underline-offset:4px}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,
.saeule li>a:hover,
.weiter li>a:hover{
  color:var(--akzent-tief);
  text-decoration-color:var(--akzent)}

/* ---- Faktenkarte im Kopf der Saeulenseiten -----------------------------
   Die Seiten sind lange Textseiten, ihr Fliesstext bleibt deshalb in der
   Lesespalte. Nur der Kopf wird zweispaltig: links die Ansprache, rechts
   die drei Zahlen, an denen fuer diese Gruppe alles haengt. */
.fakten.breit{margin-top:clamp(26px,3vw,36px);margin-bottom:clamp(26px,3vw,36px)}
.fakten.breit dl{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:clamp(16px,2vw,30px)}
.fakten.breit dl>div{padding:0 0 0 clamp(16px,2vw,24px);border-bottom:0;
  border-left:1px solid var(--akzent-linie)}
.fakten.breit dl>div:first-child{padding-left:0;border-left:0}
/* Vier Kennzahlen: zwei mal zwei statt drei plus eine (26.09.2026). */
.fakten.breit dl:has(>div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
.fakten.breit dl:has(>div:nth-child(4))>div:nth-child(odd){padding-left:0;border-left:0}
.fakten.breit dl:has(>div:nth-child(4)) dt{min-height:0}
/* Zwei Zeilen Platz fuer die Bezeichnung, damit die Zahlen auf einer Linie
   stehen, auch wenn ein Label umbricht. */
.fakten.breit dt{min-height:2.9em}
@media(max-width:700px){
  .fakten.breit dl{grid-template-columns:1fr;gap:14px}
  .fakten.breit dl>div{padding:0 0 14px;border-left:0;
    border-bottom:1px solid var(--akzent-linie)}
  .fakten.breit dl>div:last-child{padding-bottom:0;border-bottom:0}
  .fakten.breit dt{min-height:0}}

/* Geaendert 26.09.2026 auf Ediz' Wunsch: vorher dunkle Ink-Flaeche mit Schatten, das
   wirkte klobig und stand optisch ueber dem Anfrageknopf. Jetzt helle, getoente Karte
   ohne Schatten, Ecken wie der Rest der Seite (--r); die Zahlen tragen, nicht die Flaeche. */
.fakten{background:var(--akzent-hell);color:var(--ink);border:1px solid var(--akzent-hell2);
  border-radius:var(--r);padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,30px)}
.fakten-titel{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--akzent);margin:0 0 16px}
.fakten dl{margin:0;display:grid;gap:14px}
.fakten dl>div{padding-bottom:14px;border-bottom:1px solid var(--akzent-linie)}
.fakten dl>div:last-child{padding-bottom:0;border-bottom:0}
.fakten dt{font-size:14px;color:var(--ink2);margin:0 0 4px;line-height:1.4}
.fakten dd{margin:0;font-size:clamp(22px,2.2vw,26px);font-weight:600;color:var(--ink);line-height:1.15;
  letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.fakten dd.fund{font-size:12.5px;font-weight:500;color:var(--mute);margin-top:6px;
  letter-spacing:0}

/* ---- Abstaende auf den Saeulenseiten (26.09.2026, nach Ediz' Hinweis) -------
   Gemessen auf /angestellte/: drei Stellen mit 0 px Abstand. .karten p{margin:0}
   schlug .kuerzel, der Absatz nach den Tarifkarten klebte an den Karten, und der
   Anfrageknopf nach einer Quellenzeile sass direkt darunter. */
.karte .kuerzel{margin:0 0 18px}
.karten + .w{margin-top:clamp(30px,3.4vw,44px)}
section:not(.held-schmal) .held-knoepfe{margin:clamp(28px,3vw,36px) 0 0}
.warnung{margin-bottom:24px}
.quelle + p,.quelle + h3{margin-top:26px}
.beratung h3{margin-bottom:10px}

/* Leistungen als Kurzinformation: Bezeichnung links, Wert rechts, eine Zeile je
   Leistung. Ersetzt in den Tarifkarten die langen Absaetze. */
.leistungen{margin:0 0 20px;padding:0;display:grid}
.leistungen>div{display:grid;grid-template-columns:minmax(0,11.5em) minmax(0,1fr);gap:4px 16px;
  padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline}
.leistungen>div:first-child{padding-top:0}
.leistungen>div:last-child{border-bottom:0}
.leistungen dt{margin:0;font-size:14px;line-height:1.45;color:var(--mute)}
.leistungen dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.leistungen dd strong{font-weight:600}
/* Gebuehrenordnung und Chefarzt heben sich ab (26.09.2026, Ediz): die Zeilen, an denen
   sich die Linien am deutlichsten unterscheiden. */
.leistungen>div.wichtig dt{color:var(--ink);font-weight:600}
.leistungen>div.wichtig dd strong{color:var(--akzent-tief);font-weight:700}
@media(max-width:520px){.leistungen>div{grid-template-columns:1fr;gap:2px}}
/* Drei Karten nebeneinander sind zu schmal fuer zwei Spalten: Bezeichnung ueber dem Wert. */
.karten.drei .leistungen>div{grid-template-columns:1fr;gap:2px}

/* "Wenn Du es genau wissen willst": Kacheln statt Link mit angehaengtem Text.
   Titel oben, Erklaerung darunter, zwei Spalten ab Tablet. */
.weiter.weiter-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.weiter.weiter-karten li{margin:0;padding:0}
.weiter.weiter-karten li>a{display:flex;flex-direction:column;gap:4px;height:100%;
  padding:16px 44px 16px 18px;background:#fff;border-radius:var(--r);position:relative;
  box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;font-weight:600;line-height:1.4;
  transition:box-shadow .15s}
.weiter.weiter-karten li>a::after{content:"→";position:absolute;right:18px;top:16px;
  color:var(--akzent);font-weight:600}
.weiter.weiter-karten li>a:hover{box-shadow:inset 0 0 0 1.5px var(--akzent);color:var(--ink)}
.weiter.weiter-karten li>a span{font-size:14.5px;font-weight:400;color:var(--mute);line-height:1.5}
@media(max-width:700px){.weiter.weiter-karten{grid-template-columns:1fr}}

/* ---- Quellen (26.09.2026, nach Ediz' Hinweis "hingeklatscht") ------------------
   Die Quellen bleiben sichtbar (SEO-Regeln Hebel 4), aber leise: kleinere Ueberschrift,
   je Fundstelle Titel und darunter in Grau, wofuer sie steht; zwei Spalten mit Haarlinien. */
section.quellen{padding-top:clamp(32px,4vw,52px)}
section.quellen h2{font-size:clamp(22px,2vw,26px);margin:0 0 6px}
section.quellen .unterzeile{font-size:14px;margin:0 0 20px}
.quellen-liste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;border-top:1px solid var(--line)}
.quellen-liste li{margin:0;padding:12px 0;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px}
.q-titel{font-size:14.5px;font-weight:600;line-height:1.45;color:var(--ink)}
.q-titel a{color:var(--ink);text-decoration-color:rgba(0,121,92,.4);text-underline-offset:3px}
.q-titel a:hover{color:var(--akzent-tief);text-decoration-color:var(--akzent)}
.q-was{font-size:13.5px;line-height:1.5;color:var(--mute)}
@media(max-width:700px){.quellen-liste{grid-template-columns:1fr}}
/* Produktseiten: Quellen zugeklappt (26.09.2026, Ediz). Ein schmaler Balken, der sich
   auf Klick oeffnet; die Liste steht trotzdem im Quelltext. */
.quellen-auf{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quellen-auf>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:16px 0}
.quellen-auf>summary::-webkit-details-marker{display:none}
.quellen-auf>summary h2{font-size:18px!important;margin:0!important;line-height:1.3}
.quellen-auf>summary .anzahl{font-size:13.5px;color:var(--mute)}
.quellen-auf>summary::after{content:"";margin-left:auto;width:9px;height:9px;
  border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);
  transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.quellen-auf[open]>summary::after{transform:rotate(-135deg)}
.quellen-auf>summary:hover h2{color:var(--akzent-tief)}
.quellen-auf[open]{padding-bottom:18px}
.quellen-auf .quellen-liste{border-top:0}
section.quellen{padding-top:clamp(28px,3.5vw,44px);padding-bottom:clamp(28px,3.5vw,44px)}

/* Ratgeber: dieselbe ruhige Form fuer die Liste unter "Quellen". */
h2#quellen{font-size:clamp(22px,2vw,26px)}
h2#quellen + ul{list-style:none;margin:0 0 1.6em;padding:0;border-top:1px solid var(--line)}
h2#quellen + ul li{margin:0;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;line-height:1.55;color:var(--mute)}
h2#quellen + ul li::marker{content:none}
h2#quellen + ul a{color:var(--ink);font-weight:600;text-decoration-color:rgba(0,121,92,.4);
  text-underline-offset:3px}

/* ---- Abschluss der Produktseiten: Ediz mit Foto und die Anfrage (26.09.2026) -----
   Nach dem Vorbild der Startseite ("Wer hinter PKV Atlas steht"), kombiniert mit dem
   letzten Anfrageblock. Links hell: wer berät; rechts Ink: was jetzt passiert. */
section.ediz-abschluss{padding-top:clamp(36px,4.5vw,64px);padding-bottom:clamp(36px,4.5vw,64px)}
.ediz-cta{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.15fr 1fr;
  border-radius:var(--r-gross);overflow:hidden;border:1px solid var(--line)}
.ediz-cta .ueber{background:var(--sand);padding:clamp(24px,3vw,36px);display:grid;
  grid-template-columns:120px 1fr;gap:24px;align-items:start}
.ediz-cta .ueber img{width:120px;height:120px;border-radius:50%;object-fit:cover}
.ediz-cta .kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--akzent);margin:0 0 8px}
.ediz-cta h2{font-size:clamp(26px,2.4vw,32px);margin:0 0 2px}
.ediz-cta .titel{font-size:14px;font-weight:600;color:var(--ink2);margin:0 0 14px}
.ediz-cta .ueber p{font-size:15px;line-height:1.65;color:var(--ink2)}
.ediz-cta .mehr{display:inline-block;font-size:14px;font-weight:600;color:var(--akzent);
  text-decoration:none;border-bottom:1px solid var(--akzent-linie);padding-bottom:2px;margin:2px 0 16px}
.ediz-cta .mehr:hover{border-bottom-color:var(--akzent)}
.ediz-cta .status{font-size:12.5px!important;line-height:1.6;color:var(--mute)!important;margin:0}
.ediz-cta .status a{color:var(--mute)}
.ediz-cta .aktion{background:var(--ink);color:#fff;padding:clamp(24px,3vw,36px);
  display:flex;flex-direction:column;justify-content:center}
.ediz-cta .aktion h3{color:#fff;font-size:clamp(21px,2vw,25px);line-height:1.3;margin:0 0 12px}
.ediz-cta .aktion p{color:#C9D9D1;font-size:15px;line-height:1.65;margin:0 0 22px}
.ediz-cta .btn-hell{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid #fff}
.ediz-cta .btn-hell:hover{background:#DFEBE3;color:var(--ink)}
@media(max-width:860px){.ediz-cta{grid-template-columns:1fr}}
@media(max-width:520px){.ediz-cta .ueber{grid-template-columns:1fr}.ediz-cta .ueber img{width:96px;height:96px}}

@media(max-width:980px){.held-schmal.held2 .held2-gitter{grid-template-columns:1fr}}


/* ---- Portraet ---------------------------------------------------------- */
.person-kopf{display:flex;gap:clamp(20px,2.6vw,34px);align-items:center}
.person-bild{width:clamp(104px,11vw,150px);height:clamp(104px,11vw,150px);
  border-radius:999px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 10px 30px rgba(12,42,34,.14)}
.person-kopf h1{margin:0 0 14px}
.person-kopf .zaehler{margin-bottom:10px}
.person-kopf .vorspann{margin:0}
/* Titel und Unterschrift, 23.09.2026 auf Wunsch von Ediz, wie auf pkvgermany.de.
   Titel in Ink2, nicht im Akzent: Gruen ist Knoepfen und Links vorbehalten.
   Die Unterschrift steht unter dem Vorspann und zeichnet ihn gewissermassen ab;
   sie ist in Ink umgefaerbt, reines Schwarz stach neben dem Text heraus. */
.person-kopf h1:has(+ .person-titel){margin-bottom:4px}
.person-titel{font-size:17px;font-weight:600;color:var(--ink2);margin:0 0 14px;letter-spacing:.005em}
.person-unterschrift{display:block;width:240px;height:auto;margin:18px 0 0}
.autor.gross img{width:clamp(88px,9vw,120px);height:clamp(88px,9vw,120px)}
@media(max-width:620px){
  .person-kopf{flex-direction:column;align-items:flex-start;gap:20px}}

/* ---- Schmale Leiste ueber der Kopfzeile --------------------------------
   Aus der neuen Startseite uebernommen, damit alle Seiten gleich beginnen.
   Sie traegt keine Navigation, nur die zwei Saetze, die sonst im Kopf
   Platz kosten wuerden. */
.topline{height:34px;background:var(--ink);color:#D4E1D9;font-size:12px;
  letter-spacing:.035em}
.topline .w{display:flex;align-items:center;justify-content:space-between;height:100%}
@media(max-width:860px){
  .topline{height:30px}
  .topline .w{justify-content:center}
  .topline .right{display:none}}

/* Statusangabe direkt am Formular (SEO-Regeln Hebel 5, 25.09.2026): sichtbar, nicht nur im Fuss */
.statuszeile{font-size:14.5px;line-height:1.55;color:var(--ink2);margin:14px 0 0;padding:12px 14px;border:1px solid var(--linie,#E2EAE6);border-radius:10px;background:#fff}
/* ---- Terminfenster "Erstgespraech buchen" (werkzeuge/js-quellen/termin.js, 27.09.2026) ---- */
html.termin-offen,html.termin-offen body{overflow:hidden}
.termin-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:18px}
.termin-hinter{position:absolute;inset:0;background:rgba(12,42,34,.55);cursor:pointer}
.termin-karte{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:16px;width:100%;max-width:760px;height:min(820px,calc(100vh - 36px));height:min(820px,calc(100dvh - 36px));box-shadow:0 24px 70px rgba(0,0,0,.28);overflow:hidden}
.termin-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px 12px;border-bottom:1px solid #E2EAE6}
.termin-klein{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#00795C}
.termin-titel{font-size:19px;font-weight:700;color:#0C2A22;margin-top:4px;letter-spacing:-.02em;line-height:1.25}
.termin-zu{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#F1F8F5;font-size:26px;line-height:1;color:#3E5A52;cursor:pointer}
.termin-zu:hover{background:#DBEDE5}
.termin-rahmen{position:relative;flex:1;min-height:0}
.termin-laden{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:#6A7B74}
.termin-iframe{position:relative;display:block;width:100%;height:100%;border:0;background:transparent}
.termin-geladen .termin-laden{display:none}
.termin-fuss{font-size:12px;line-height:1.5;color:#6A7B74;padding:10px 20px 14px;margin:0;border-top:1px solid #E2EAE6}
.termin-fuss a{color:inherit;text-decoration:underline}
@media(max-width:600px){.termin-modal{padding:0}.termin-karte{max-width:none;height:100vh;height:100dvh;border-radius:0}.termin-titel{font-size:17px}}
/* Knopfpaar "Beratung anfragen" + "Erstgespraech buchen" (27.09.2026) */
.beratung .held-knoepfe{margin:4px 0 0!important}
.ediz-cta .aktion-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.ediz-cta .btn-hell-2{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.ediz-cta .btn-hell-2:hover{background:rgba(255,255,255,.08);color:#fff;border-color:#fff}
.cta-block .cta-knoepfe{display:flex;flex-wrap:wrap;gap:10px;flex:0 1 auto;min-width:0}
.abschluss .abschluss-knoepfe{display:flex;flex-wrap:wrap;gap:12px;flex:0 1 auto;min-width:0}
/* Handy (Ediz, 27.09.2026): Die Knopfreihe durfte nicht schrumpfen (flex:0 0 auto) und ragte
   in jedem Ratgeber 30 bis 60 px ueber den Rand, die Seite liess sich seitwaerts schieben.
   Unter 600 px stehen beide Knoepfe untereinander ueber die volle Breite, wie im Kopf der Seite. */
@media(max-width:600px){
  .cta-block .cta-knoepfe,.abschluss .abschluss-knoepfe,.ediz-cta .aktion-knoepfe{flex:1 1 100%}
  .cta-block .cta-knoepfe .btn,.abschluss .abschluss-knoepfe .btn,.ediz-cta .aktion-knoepfe .btn{flex:1 1 100%}
}
.aside .karte .btn.zweit{margin-top:8px}
.zahlfeld.datumfeld input{width:10.5em;max-width:100%;letter-spacing:.03em}

/* ===========================================================================
   TRICHTER ALS KARTE (27.09.2026, Ediz: wie petonova /angebot/)
   Eine Karte mit Balken, eine Frage je Schritt, unten Zurueck und Weiter.
   Ziel auf dem Handy: der letzte Schritt samt "Rueckruf vereinbaren" auf
   einem Bildschirm. Deshalb knappe Abstaende und keine Unterzeilen in den
   Antworten. Die Karte bleibt beim Tippen stehen: kein Scrollen pro Taste,
   kein automatischer Fokus ins Feld auf Touch-Geraeten.
   =========================================================================== */
.fn-held{background:linear-gradient(180deg,var(--akzent-hell2),var(--akzent-hell));
  padding:22px 0 64px;text-align:center}
.fn-pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:6px 16px 6px 6px;
  background:#fff;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--ink);
  box-shadow:0 6px 18px rgba(12,42,34,.08)}
.fn-pill img{width:30px;height:30px;border-radius:50%;object-fit:cover}
/* Ueberschrift und Fragen gross und fett (Ediz, 27.09.2026, zum Ansehen); Unterzeile klein. */
.fn-held h1{font-size:clamp(27px,4vw,42px);line-height:1.2;font-weight:700;letter-spacing:-.025em;margin:0 auto;max-width:20ch;hyphens:manual}
.fn-sub{margin:12px auto 0;max-width:46ch;font-size:15px;line-height:1.5;color:var(--ink2)}

.fn-bereich{padding:0 0 64px}
.fn-bereich .w{max-width:620px}
.fn{position:relative;margin-top:-44px;background:#fff;border-radius:var(--r-gross);
  padding:26px 28px 22px;box-shadow:0 24px 60px rgba(12,42,34,.16);scroll-margin-top:84px}
.fn-balken{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:16px}
.fn-balken i{display:block;height:100%;width:0;background:var(--akzent);border-radius:3px;
  transition:width .25s}
.fn-zaehler{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin:0 0 8px}
.fn h2{font-size:clamp(20px,2.4vw,25px);line-height:1.25;margin:0 0 4px;font-weight:700;letter-spacing:-.02em;hyphens:manual}
.fn h2:focus{outline:none}
.fn .hint{font-size:13.5px;line-height:1.45;color:var(--mute);margin:0 0 14px}
.fn h2 + .opt{margin-top:14px}
/* Kontaktschritt: klarer Abstand zwischen Frage, Hinweis und erstem Feld (Ediz, 27.09.2026) */
.fn #trichter{margin-top:18px}
.fn .opt{display:grid;gap:9px}
.fn .opt.zwei{grid-template-columns:1fr 1fr}
.fn .wahl{display:block;width:100%;font-family:inherit;font-size:15.5px;font-weight:600;
  line-height:1.3;color:var(--ink);background:#fff;text-align:left;cursor:pointer;
  border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:none;
  transition:border-color .14s,background .14s}
.fn .wahl:hover{border-color:var(--akzent);background:var(--akzent-hell);transform:none;box-shadow:none}
.fn .wahl.sel{border-color:var(--akzent);background:var(--akzent-hell);
  box-shadow:inset 0 0 0 1px var(--akzent)}
.fn .opt.zwei .wahl{text-align:center;font-size:17px;padding:18px 12px}
.fn .wahl small{display:block;margin-top:2px;font-size:13px;font-weight:600;color:var(--mute)}

.fn input[type=text],.fn input[type=tel],.fn input[type=email]{width:100%;font-family:inherit;
  font-size:16px;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;
  color:var(--ink);background:#fff;box-shadow:none}
.fn input:focus{outline:0;border-color:var(--akzent)}
.fn #geburtsdatum{max-width:220px;font-size:18px;letter-spacing:.04em;margin-top:4px}
.fn .feldfehler{margin:8px 0 0;font-size:14px}
.fn .feld{position:relative;margin:0 0 9px}
.fn .feld .fsym{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;
  fill:none;stroke:#9BAAA3;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.fn .feld input{padding-left:46px}
.fn .feld input.falsch{border-color:#C0392B}
.fn label.ein{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;margin:14px 0 0;
  font-size:13px;line-height:1.5;color:var(--ink2);font-weight:400;cursor:pointer}
.fn label.ein input{width:22px;height:22px;margin:0;accent-color:var(--akzent)}
.fn label.ein.falsch span{color:#B91C1C}
.fn label.ein a,.fn-status a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.fn-status{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ink2)}

.fn .meldung{margin:12px 0 0;font-size:14px;padding:10px 12px}
.fn-zeile{display:flex;gap:12px;align-items:center;margin-top:16px}
.fn .zurueck{text-decoration:none;font-weight:700;padding:10px 4px}
.fn .weiter{margin-left:auto;padding:13px 26px;font-size:15.5px;border-radius:10px}
.fn .weiter[disabled]{opacity:.45;cursor:default;transform:none}

.fn-aus p{font-size:15px;line-height:1.6;color:var(--ink2);margin:10px 0 0}
.fn-fertig{text-align:center;padding:8px 0 4px}
.fn-fertig .ok{width:60px;height:60px;border-radius:50%;background:var(--akzent-hell2);
  display:grid;place-items:center;margin:0 auto 16px}
.fn-fertig .ok svg{width:30px;height:30px;stroke:var(--akzent);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.fn-fertig p{font-size:15px;line-height:1.55;color:var(--ink2);margin:8px 0 0}
.fn-fertig .btn{margin-top:14px}

.fn-fein{text-align:center;font-size:13px;color:var(--mute);margin:14px 0 0}
.fn-ueber{text-align:center;font-size:15px;font-weight:700;color:var(--ink);margin:40px 0 10px}
.fn-termin{text-align:center;margin:0}
.fn-bereich .ablauf{margin-top:48px}

@media (max-width:760px){
  .fn-held{padding:14px 0 56px}
  .fn-pill{font-size:12.5px;margin-bottom:10px}
  .fn-held h1{font-size:clamp(22px,6.4vw,30px)}
  .fn-sub{font-size:14.5px;margin-top:8px}
  .fn{padding:16px 18px 14px;margin-top:-40px}
  .fn .schritt{min-height:0}
  .fn-ueber{margin-top:clamp(48px,14vh,120px)}
}
/* Handy: Die Karte steht fest, es wird nicht gescrollt (Ediz, 27.09.2026). Damit der letzte
   Schritt samt Knopf trotzdem auf einen Bildschirm passt, entfallen Leitspruchzeile und der
   zweite Teil der Pille. Der Kopf bekommt trotzdem Luft: Pille, Ueberschrift und Unterzeile
   sind klar voneinander abgesetzt. Nur auf niedrigen Bildschirmen (unten) wird verdichtet. */
@media (max-width:760px){
  .fn-seite .topline{display:none}
  .fn-held{padding:12px 0 50px}
  .fn-held .nur-breit{display:none}
  .fn-pill{padding:4px 14px 4px 4px;margin-bottom:12px;font-size:12.5px}
  .fn-pill img{width:26px;height:26px}
  .fn-held h1{font-size:27px;line-height:1.2;max-width:17ch}
  .fn-sub{font-size:13px;line-height:1.45;margin-top:8px;max-width:34ch}
  .fn{margin-top:-40px}
  .fn .schritt{min-height:0}
  .fn .wahl{padding:12px 14px}
  .fn .opt{gap:8px}
  .fn input[type=text],.fn input[type=tel],.fn input[type=email]{padding-top:11px;padding-bottom:11px}
  .fn .feld{margin-bottom:8px}
  .fn-balken{margin-bottom:12px}
  /* Abstand Haekchen -> Knoepfe wie Hinweis -> erstes Feld (Ediz, 27.09.2026) */
  .fn-zeile{margin-top:18px}
  /* Knoepfe immer einzeilig, auch mit dem laengeren 'Einschätzung anfordern' */
  .fn .zurueck,.fn .weiter{white-space:nowrap}
  .fn .weiter{padding:13px 18px;font-size:15px}
}
/* Niedrige Bildschirme (iPhone SE, Safari mit Leisten): Unterzeile weg, Abstaende knapper,
   damit der Knopf im letzten Schritt im Bild bleibt. */
@media (max-width:760px) and (max-height:700px){
  .fn-held{padding:12px 0 54px}
  .fn-pill{margin-bottom:10px}
  .fn-held h1{font-size:24px}
  .fn-sub{display:none}
  .fn h2{font-size:18px}
  .fn .hint{font-size:13px;margin-bottom:10px}
  .fn #trichter{margin-top:12px}
  .fn label.ein{font-size:12.5px;margin-top:10px}
  .fn-zeile{margin-top:12px}
}

/* Kurzformular /beratung/ im Stil des Trichter-Kontaktschritts (27.09.2026) */
.fn.fn-formular{margin:26px 0 8px;scroll-margin-top:84px;max-width:620px}
.fn-formular .hint{margin-bottom:14px}
.fn select,.fn textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;box-shadow:none}
.fn select{margin:0 0 9px;appearance:none;-webkit-appearance:none;padding-right:44px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BAAA3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px}
.fn select:invalid,.fn select.leer{color:#8A9A93}
.fn textarea{min-height:0;resize:vertical;line-height:1.5}
.fn select:focus,.fn textarea:focus{outline:0;border-color:var(--akzent)}
.fn-formular .weiter{width:100%;margin-top:18px;padding:15px 24px;font-size:15.5px;border-radius:10px}
.fn-formular .meldung{margin-top:12px}

/* Beitragstabellen auf dem Handy (27.09.2026): ohne Mindestbreite von 520 px, knappere Zellen.
   Muss hinter der Grundregel .alterstabelle stehen, sonst gewinnt deren min-width. */
@media(max-width:600px){
  .alterstabelle{min-width:0;font-size:14px}
  .alterstabelle th{padding:0 0 10px 10px;font-size:12px;letter-spacing:.02em}
  .alterstabelle td{padding:10px 0 10px 10px}
  .alterstabelle .hervor td{font-size:16.5px}
  .alterstabelle .end td{font-size:16px}
  .alterstabelle .hervor td:first-child{padding-left:8px}
  .alterstabelle .hervor td:last-child{padding-right:8px}
}
/* Metazeile im Ratgeber auf dem Handy: Die Zeile bricht nach dem Datum um, der zweite Punkt
   stand dann allein am Zeilenende (27.09.2026). */
@media(max-width:600px){.metazeile .punkt ~ .punkt{display:none}}
/* Sehr schmale Handys (360 px): "Krankenversicherung" passte in der grossen Kopfzeile nicht mehr
   in eine Zeile (Handy-Pruefung 27.09.2026, /hansemerkur-beamtenanwaerter/). */
@media(max-width:380px){h1,.held h1,.held-schmal h1{font-size:30px}}