/* dp-basis.css - Farben, Schriftgroessen, Raster, Kopf, Fuss und Formular
   Fassung 16 · 26. Oktober 2026: Fuß bis 680 px in zwei Spalten — Adresse
   über die volle Breite, darunter „Für Kunden“ und „Agentur“ nebeneinander,
   „Rechtliches“ darunter (Lino). Gilt für alle Seiten.
   Fassung 15 · 26. Oktober 2026: Fuß mit Platz unten, wenn die Seite den
   schwebenden WhatsApp-Knopf trägt — vorher deckte er auf dem Check-in die
   Fußlinks ab. Seiten ohne #float-wa sehen aus wie bisher.
   Fassung 14 · 4. Oktober 2026: nur Kommentare. Bei .aablauf ist der Satz
   zur Musterberechnung heraus, wie in angebotsformular-baustein.html
   Fassung 28, und die Überschrift des Formularabschnitts nennt Fassung 28
   statt 14. Am CSS selbst ist nichts geändert.
   Fassung 13 · 1. Oktober 2026: .kopf — Seitenkopf mit Schrägkante
   (.sky.cut-btm über Unterseiten wie Wie wir arbeiten, Empfehlungen,
   Datenschutz, Team, Impressum, Erstinformation, Einwilligungen). Oben und
   unten weniger Polster, unten im selben Maß wie .nach-kante oben. Wer
   die Klasse nicht trägt, sieht aus wie bisher.
   Fassung 12 · 1. Oktober 2026: Regel .abox.on-white .oknr input samt
   :focus gelöscht, wie einwilligung-baustein.html Fassung 6 — sie griff
   nie, weil kein Kasten auf weißem Grund eine Handynummer baut (nr:null).
   Fassung 11 · 21. September 2026: .apaar-lbl (dreiteilige Beschriftung
   mit mittigem Schrägstrich) und .apaar-links (Knopfreihe links, Feld
   rechts) — gebraucht für die Medizinerzeile.
   Fassung 10 · 21. September 2026: .amuster ist entfallen — das Etikett
   über den Feldern gibt es nicht mehr, sein Inhalt steht in Schritt 1 des
   Ablaufs.
   Fassung 9 · 21. September 2026: .apaar > .lbl teilt die gemeinsame
   Beschriftung in drei Teile — Name, Schrägstrich, Name. Der rechte Name
   steht rechtsbündig über den Knöpfen, der Schrägstrich exakt mittig
   dazwischen. .lblklein nimmt die Großschreibung für einen Teil zurück.
   Die Knöpfe in .atwo und .apaar sind wieder etwas kleiner (rund 44 px
   statt 49 px).
   Fassung 8 · 21. September 2026: Knopfreihen neben einem Eingabefeld
   (.atwo, .apaar) sind höher als vorher — sie waren rund 8 px flacher
   als das Feld daneben.
   Fassung 7 · 21. September 2026: .apaar — zwei Felder in einer
   durchgehenden Zeile unter einer gemeinsamen Beschriftung, gebraucht bei
   den Soldaten für „Tätigkeit / Besondere Verwendung i.S. § 84 SVG".
   Fassung 6 · 21. September 2026: Die Themenzeilen im Angebotskasten
   (.athemen) sehen aus wie die Knopfreihe „Was trifft auf dich zu?" im
   Onboarding — runde Pille, weiß, dunkelblau gefüllt, wenn ausgewählt.
   Die Sonderregel .abox.on-white .athemen button[aria-pressed="false"] ist
   dadurch überflüssig und entfallen. Sonst nichts geändert.
   Fassung 5 · 18. September 2026: nur Kommentare. Die beiden Bloecke, die
   .aok, .oknr, p.okweg und p.okantwort allein der Einwilligungs- und der
   Onboardingseite zuschrieben, sind auf den Stand von Baustein-Fassung 15
   gezogen: .aok ruft der Angebotskasten bei Soldaten und bAV wieder auf, die
   drei uebrigen nicht. Am CSS selbst ist nichts geaendert.
   Fassung 4 · 17. September 2026: .athemen ohne Überschrift, .aei a.eipdf als Link statt Knopf, .flow span ohne Zeilenumbruch.
   Fassung 3 · 17. September 2026: Abschnitt „Erstinformation im Angebotsformular" (.aei)
   am Dateiende, aus angebotsformular-baustein.html Fassung 8.
   Fassung 2 · 17. September 2026: Fuß mit vier Spalten, Schrägkanten per
   clip-path statt skewX (.prod, .team, .abox.on-white), Empfehlungskarten
   unter .kat (nur „Wie wir arbeiten"), .subh vereinheitlicht, .nach-kante,
   .wissen. Die Grundform von .nope (bAV-Seiten) ist unverändert.
   Gemeinsame Grundlage für alle Seiten von digital und persoenlich.
   Hier NICHT einzelne Seiten anpassen - was nur eine Seite betrifft,
   bleibt im <style>-Block der jeweiligen Seite. */

:root{
  --navy:#163151;--navy-deep:#0d2241;--blue:#83ADCF;--sky:#BFDBEC;
  --sky-soft:#D6E9F4;--sky-pale:#E7F1F8;--red:#AF2E54;--red-light:#DE4C76;
  --white:#FFFFFF;--wa:#25D366;
  --shell:min(1180px,92vw);--slant:3.2deg;--r:14px;
  --f:'dp Sans','Open Sans','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--f);color:var(--navy);
  background:var(--sky-pale);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.dsp{font-family:'dp Display',var(--f);font-weight:800;font-style:italic;
  text-transform:uppercase;line-height:.94;letter-spacing:0;margin:0}
h1.dsp{font-size:clamp(2.5rem,6.8vw,5.2rem)}
h2.dsp{font-size:clamp(2rem,4.4vw,3.3rem)}
h3.dsp{font-size:clamp(1.1rem,2vw,1.42rem)}
.eyebrow{font-weight:700;font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--red);margin:0 0 .9rem}
.eyebrow.on-dark{color:var(--blue)}
.lead{font-size:clamp(1.02rem,1.6vw,1.18rem);max-width:66ch;color:#2c4665}
.dark .lead{color:var(--sky)}
p{margin:0 0 1rem}
.shell{width:var(--shell);margin-inline:auto;position:relative;z-index:2}
section{padding:clamp(3.4rem,6.5vw,5.8rem) 0;position:relative}
.dark{background:linear-gradient(158deg,var(--navy),var(--navy-deep));color:var(--white)}
.sky{background:linear-gradient(168deg,var(--sky),var(--sky-soft))}
.pale{background:var(--sky-pale)}
/* Überlappung = volle Schräghöhe, sonst bleibt links ein spitzer Keil stehen */
.cut-top{clip-path:polygon(0 48px,100% 0,100% 100%,0 100%);margin-top:-48px;padding-top:calc(clamp(3.4rem,6.5vw,5.8rem) + 48px)}
.cut-btm{clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 48px));margin-bottom:-48px;padding-bottom:calc(clamp(3.4rem,6.5vw,5.8rem) + 48px)}
.cut-both{clip-path:polygon(0 48px,100% 0,100% calc(100% - 48px),0 100%);margin:-48px 0;padding:calc(clamp(3.4rem,6.5vw,5.8rem) + 48px) 0}
/* Empfehlungsband */
.refbar{display:none;background:var(--red);color:var(--white);font-size:.88rem;font-weight:600;
  text-align:center;padding:.55rem 1rem;position:relative;z-index:70}
.refbar.on{display:block}
header{position:sticky;top:0;z-index:60;background:rgba(231,241,248,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(22,49,81,.12)}
.bar{display:flex;align-items:center;gap:1.5rem;height:72px}
.mark{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:0 0 auto}
.mark img.badge{width:42px;height:42px;display:block}
.mark img.wm{height:34px;width:auto;display:block}
footer .mark img.badge{width:46px;height:46px}
footer .mark img.wm{height:38px}
nav{margin-left:auto;display:flex;gap:.55rem;align-items:center}
nav button{background:none;border:0;cursor:pointer;padding:.55rem .75rem;border-radius:8px;
  font-family:'dp Display',var(--f);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.01em;line-height:1}
nav button:hover{background:rgba(22,49,81,.07)}
nav button[aria-current="page"]{color:var(--red)}
.hdr-wa{display:inline-flex;align-items:center;gap:.5rem;background:var(--navy);color:var(--white);
  text-decoration:none;padding:.6rem 1rem;border-radius:999px;font-weight:700;font-size:.9rem}
.hdr-wa:hover{background:var(--red)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:.5rem;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0}
.hero{position:relative;overflow:hidden;padding:clamp(3rem,6vw,5.4rem) 0 clamp(3.4rem,6.5vw,5.2rem);
  background:linear-gradient(150deg,var(--sky),var(--sky-soft) 55%,var(--sky))}
.hero .badge-lg{position:absolute;right:6%;top:50%;transform:translateY(-50%);z-index:3;
  width:clamp(72px,9vw,124px);height:auto;display:block}
.hero .shell{max-width:var(--shell)}
.hero .lead{max-width:56ch}
h1.dsp em{color:var(--red);font-style:italic}
.hero .lead{margin-top:1.5rem;color:#1d3455}
.brandline{margin-top:1.4rem;font-size:.88rem;color:#3a557a;display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.brandline b{font-weight:700;color:var(--navy)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.05rem;margin-top:2.4rem}
.card{position:relative;border:0;cursor:pointer;text-align:left;padding:0;overflow:hidden;
  border-radius:var(--r);background:var(--sky);display:block;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
  box-shadow:0 18px 40px -30px rgba(0,0,0,.9)}
.card .cap{color:var(--navy);padding:1.6rem 1.3rem 2.5rem;display:flex;align-items:center;
  min-height:128px;transition:color .22s ease}
.card .cap h3{font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:.98;hyphens:auto}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--navy);
  clip-path:polygon(0 100%,100% 0,100% 100%)}
.card:hover{transform:translateY(-5px);background:var(--red);box-shadow:0 26px 50px -28px rgba(0,0,0,1)}
.card:hover .cap{color:var(--white)}
.card:hover{transform:translateY(-5px);box-shadow:0 26px 50px -28px rgba(0,0,0,1)}
.card:hover .cap{background:var(--red);color:var(--white)}
/* Verzichts-Manifest (Grundform, u. a. bAV-Seiten) */
.nope{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:2rem;padding:0}
.nope li{list-style:none;background:var(--white);border-radius:10px;padding:.9rem 1rem .9rem 2.6rem;
  position:relative;font-size:.93rem;color:#4a6684;box-shadow:0 12px 30px -26px rgba(22,49,81,.9)}
.nope li::before{content:"×";position:absolute;left:.95rem;top:.7rem;color:var(--red);
  font-size:1.35rem;line-height:1;font-weight:700}
.nope b{display:block;color:var(--navy);font-weight:700}
.nope.wish li::before{content:"~";color:var(--blue);font-size:1.2rem;top:.78rem}
.nope.yes li{border-left:4px solid var(--navy)}
.nope.yes li::before{content:"✓";color:var(--navy);font-size:1rem;top:.85rem;font-weight:700}
.dark .nope li{background:rgba(255,255,255,.06);color:var(--sky);box-shadow:none}
.dark .nope li::before{color:var(--red-light)}
.dark .nope b{color:var(--white)}

/* Empfehlungsliste „Was wir empfehlen — und was nicht" (Fassung 17. September)
   Drei Kategorien, je eigene Farbe und eigenes Zeichen:
   empfohlen = Navy ✓ · nur auf Wunsch = Blau + · machen wir nicht = Rot ×.
   Kartenform wie Links- und Team-Karten: weiß, rechte Schrägkante. */
.kat .nope{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:.95rem 0 0;
  --kat:var(--red);--katzeichen:"×"}
.kat .nope.yes{--kat:var(--navy);--katzeichen:"✓"}
.kat .nope.wish{--kat:var(--blue);--katzeichen:"+"}
.kat .nope li{border-left:0;background:var(--white);border-radius:12px;
  padding:1.05rem 1.6rem 1.15rem 3.05rem;position:relative;overflow:hidden;
  font-size:.9rem;line-height:1.55;color:#42607f;box-shadow:0 14px 34px -30px rgba(22,49,81,.9)}
.kat .nope li::before{content:var(--katzeichen);position:absolute;left:.95rem;top:1.02rem;color:var(--white);
  width:1.45rem;height:1.45rem;border-radius:50%;background:var(--kat);color:var(--white);
  display:grid;place-items:center;font-size:.85rem;font-weight:700;line-height:1}
.kat .nope li::after{content:"";position:absolute;top:0;bottom:0;right:0;width:9px;
  background:var(--kat);clip-path:polygon(5px 0,100% 0,100% 100%,0 100%)}
.kat .nope b{display:block;color:var(--navy);font-weight:700;font-size:1rem;line-height:1.35;margin:.08rem 0 .35rem}
.kat .nope .kzahl{display:block;margin-top:.6rem;padding-top:.55rem;border-top:1px solid rgba(22,49,81,.1);
  font-size:.84rem;color:var(--navy)}
.kat .nope .klink{display:block;width:max-content;margin-top:.6rem;font-size:.86rem;font-weight:700;color:var(--red);text-decoration:none}
.kat .nope .klink:hover{text-decoration:underline}
/* „Machen wir nicht" tritt zurück: kein Weiß, keine Tiefe */
.kat-nein .nope li{background:rgba(255,255,255,.5);box-shadow:none;border:1px solid rgba(175,46,84,.18)}
.kat-nein .nope b{color:#5a3346}
.kat{margin-top:2.6rem}
.kat + .kat{margin-top:3.4rem}
.kat .katlead{margin:.25rem 0 0;font-size:.92rem;color:#4a6684;max-width:40rem}
.kat-ja{--kat:var(--navy)}
.kat-wunsch{--kat:var(--blue)}
.kat-nein{--kat:var(--red)}
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem;margin-top:2.4rem}
.step{padding:1.35rem 1.15rem;background:var(--white);border-radius:12px;box-shadow:0 14px 34px -30px rgba(22,49,81,.9)}
.step .k{font-family:'dp Display',var(--f);font-weight:800;font-style:italic;font-size:1.7rem;color:var(--blue);line-height:1}
.step h4{margin:.55rem 0 .3rem;font-size:.98rem;font-weight:700}
.step p{font-size:.85rem;color:#4a6684;margin:0}
.step.accent{background:var(--navy)}
.step.accent h4{color:var(--white)}
.step.accent .k{color:var(--red-light)}
.step.accent p{color:var(--sky)}
.crumb{background:none;border:0;cursor:pointer;font-weight:700;font-size:.88rem;color:var(--red);padding:0;margin-bottom:1.3rem}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:start}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--navy),var(--navy-deep) 70%)}
.video::after{content:"";position:absolute;top:-10%;bottom:-10%;right:-4%;width:26%;
  background:var(--sky);opacity:.12;transform:skewX(calc(var(--slant) * -1.6))}
.play{width:66px;height:66px;border-radius:50%;background:var(--sky);color:var(--navy);
  display:grid;place-items:center;z-index:2;font-size:1.4rem;padding-left:5px}
.video figcaption{position:absolute;left:1.1rem;bottom:1rem;z-index:2;color:var(--sky);
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.recos{list-style:none;padding:0;margin:1.3rem 0 0;counter-reset:r}
.recos li{position:relative;padding:.95rem 1.1rem .95rem 3.3rem;background:var(--white);
  border-radius:10px;margin-bottom:.6rem;box-shadow:0 12px 30px -26px rgba(22,49,81,.9)}
.recos li::before{counter-increment:r;content:counter(r);position:absolute;left:1rem;top:.95rem;
  width:25px;height:25px;border-radius:50%;background:var(--navy);color:var(--sky);
  display:grid;place-items:center;font-size:.78rem;font-weight:800;font-style:italic;font-family:'dp Display',var(--f)}
.recos b{display:block;font-size:.97rem}
.recos span{font-size:.87rem;color:#4a6684}
.tag{display:inline-block;margin-top:.5rem;background:var(--sky);color:var(--navy);
  font-size:.76rem;font-weight:700;padding:.22rem .6rem;border-radius:999px}
.aside{background:linear-gradient(158deg,var(--navy),var(--navy-deep));color:var(--white);
  border-radius:var(--r);padding:1.7rem 1.5rem;position:sticky;top:96px}
.aside h3{margin:0 0 .7rem}
.aside p{font-size:.9rem;color:var(--sky)}
.cta{display:block;width:100%;text-align:center;background:var(--red);color:var(--white);text-decoration:none;
  font-weight:700;padding:.9rem 1.2rem;border-radius:999px;margin-top:1rem;border:0;cursor:pointer}
.cta:hover{background:var(--red-light)}
.cta.ghost{background:transparent;border:2px solid var(--blue);color:var(--white)}
.cta.ghost:hover{background:rgba(191,219,236,.16)}
.mini{font-size:.75rem;color:var(--blue);margin:.85rem 0 0;line-height:1.5}
.faq{margin-top:2.2rem}
details{border-bottom:1px solid rgba(22,49,81,.16)}
details:first-of-type{border-top:1px solid rgba(22,49,81,.16)}
summary{cursor:pointer;list-style:none;padding:1rem 2.2rem 1rem 0;position:relative;font-weight:700;font-size:.99rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.3rem;top:.8rem;font-size:1.4rem;color:var(--red);font-weight:400}
details[open] summary::after{content:"–"}
details p{padding-bottom:1rem;margin:0;font-size:.93rem;color:#42607f}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem;margin-top:2rem}
.prod{display:block;text-decoration:none;background:var(--white);border-radius:var(--r);padding:1.6rem 1.5rem;
  box-shadow:0 16px 38px -32px rgba(22,49,81,.95);position:relative;overflow:hidden}
.prod::after{content:"";position:absolute;top:0;bottom:0;right:0;width:9px;background:var(--blue);clip-path:polygon(5px 0,100% 0,100% 100%,0 100%)}
.prod:hover::after{background:var(--red)}
.prod p{font-size:.92rem;color:#4a6684;margin:.5rem 0 0}
.prod .go{margin-top:1rem;font-weight:700;font-size:.88rem;color:var(--red)}
.tg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.4rem);align-items:start}
.gen{background:rgba(255,255,255,.07);border-radius:var(--r);padding:1.5rem}
.gen label{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--blue);margin-bottom:.5rem}
.gen input{width:100%;padding:.85rem 1rem;border-radius:10px;border:2px solid transparent;
  background:var(--white);color:var(--navy);font:inherit;font-weight:600}
.gen input:focus{outline:none;border-color:var(--red-light)}
.out{margin-top:1.2rem;display:none}
.out.on{display:block}
.linkbox{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;background:rgba(0,0,0,.28);
  padding:.75rem .9rem;border-radius:10px;color:var(--sky);word-break:break-all}
.copy{margin-top:.7rem;background:var(--sky);color:var(--navy);border:0;cursor:pointer;
  font-weight:700;padding:.6rem 1.1rem;border-radius:999px;font-size:.88rem}
.copy:hover{background:var(--white)}
#qr{margin-top:1.2rem;background:var(--white);padding:14px;border-radius:12px;width:max-content}
#qr img,#qr canvas{display:block}
.qr-fallback{font-size:.8rem;color:var(--blue)}
.changes{list-style:none;padding:0;margin:0}
.changes li{background:var(--white);color:var(--navy);border-radius:12px;padding:1rem 1.15rem;
  margin-bottom:.6rem;box-shadow:0 14px 34px -30px rgba(22,49,81,.9);border-left:6px solid var(--red)}
.changes b{display:block;color:var(--navy);font-size:1rem}
.changes span{display:block;font-size:.88rem;color:#4a6684;margin-top:.15rem}
footer{background:var(--navy-deep);color:var(--sky);padding:3.2rem 0 2rem;font-size:.87rem;position:relative}
body:has(#float-wa) footer{padding-bottom:6rem}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
footer a{color:var(--sky)}
footer h5{margin:0 0 .7rem;font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.4rem}
.legal{margin-top:2rem;padding-top:1.1rem;border-top:1px solid rgba(191,219,236,.22);font-size:.77rem;color:var(--blue)}
.float{position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--wa);color:#06331a;text-decoration:none;font-weight:700;font-size:.94rem;
  padding:.85rem 1.2rem;border-radius:999px;box-shadow:0 16px 36px -12px rgba(6,51,26,.6);transition:transform .2s ease}
.float:hover{transform:translateY(-2px)}
.float svg{width:22px;height:22px;fill:currentColor}
.gen.gen-light{background:rgba(255,255,255,.72);border:1px solid rgba(22,49,81,.12)}
.gen.gen-light label{color:var(--red)}
.gen.gen-light .linkbox{background:var(--navy);color:var(--sky)}
.gen.gen-light .copy{background:var(--navy);color:var(--white)}
.gen.gen-light .copy:hover{background:var(--red)}
.tg{align-items:start}
/* Was wann wichtig wird */
.cj{list-style:none;padding:0;margin:2.4rem 0 0;position:relative}
.cj::before{content:"";position:absolute;left:110px;top:10px;bottom:10px;width:2px;background:rgba(22,49,81,.18)}
.cj>li{position:relative;padding:0 0 2rem 152px;min-height:54px}
.cj>li:last-child{padding-bottom:0}
.cj>li h3{color:var(--navy);margin:0 0 .55rem}
.cj>li ul{list-style:none;padding:0;margin:0}
.cj>li ul li{position:relative;padding-left:1.1rem;font-size:.93rem;color:#4a6684;margin-bottom:.3rem}
.cj>li ul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--red)}
/* Veränderung melden */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.chips button{background:var(--white);border:2px solid transparent;border-radius:999px;
  padding:.7rem 1.4rem;cursor:pointer;font-weight:700;font-size:.98rem;color:var(--navy);
  box-shadow:0 12px 30px -26px rgba(22,49,81,.9);transition:all .18s ease}
.chips button:hover{border-color:var(--red)}
.chips button[aria-pressed="true"]{background:var(--red);color:var(--white)}
.vform{margin-top:1.6rem;background:var(--white);border-radius:var(--r);padding:1.5rem;
  box-shadow:0 20px 46px -34px rgba(22,49,81,1);max-width:760px}
.vrow{margin-bottom:1.1rem}
.vrow label{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--red);margin-bottom:.5rem}
.vopts{display:flex;flex-wrap:wrap;gap:.45rem}
.vopts button{background:var(--sky-pale);border:2px solid transparent;border-radius:999px;
  padding:.45rem 1rem;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--navy)}
.vopts button[aria-pressed="true"]{background:var(--navy);color:var(--white)}
.vrow input{width:100%;padding:.75rem .9rem;border-radius:10px;border:2px solid var(--sky);
  background:var(--white);font:inherit;color:var(--navy)}
.vrow input:focus{outline:none;border-color:var(--red)}
.vpreview{background:var(--sky-pale);border-radius:10px;padding:.9rem 1rem;font-size:.9rem;
  color:#3d5a7c;white-space:pre-wrap;margin-bottom:1.1rem;position:relative;padding-top:2.1rem}
.vpreview::before{content:"Das haben wir übergeben";position:absolute;top:.7rem;left:1rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--red)}
#einwilligungen details p{padding-bottom:0;margin-bottom:.9rem;color:#42607f}
#einwilligungen details p:last-child{padding-bottom:1.1rem}
.prose{max-width:820px}
.prose h2{margin-bottom:1.1rem}
.prose h3{font-size:1.05rem;font-weight:700;margin:2rem 0 .6rem;color:var(--navy)}
.prose p{color:#42607f;font-size:.96rem}
.prose .dsl{list-style:none;padding:0;margin:0 0 1rem}
.prose .dsl li{position:relative;padding-left:1.2rem;color:#42607f;font-size:.96rem;margin-bottom:.45rem}
.prose .dsl li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--red)}
.prose .vnote{margin-bottom:2rem}
.vnote{background:var(--sky-pale);border-left:4px solid var(--red);border-radius:8px;
  padding:.85rem 1rem;font-size:.9rem;color:#3d5a7c;margin:0 0 1.1rem}
.vsend{display:flex;flex-wrap:wrap;gap:.7rem}
.cta.ghost.dark-on-light{border-color:var(--navy);color:var(--navy)}
.cta.ghost.dark-on-light:hover{background:rgba(22,49,81,.08)}
.cjl{list-style:none;padding:0;margin:0}
.cj .subh-mini{margin:.9rem 0 .45rem}
.cj .subh-mini:first-of-type{margin-top:.2rem}
.cjl>li{position:relative;padding-left:1.1rem;margin-bottom:.7rem}
.cjl>li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--red)}
.cjl b{display:block;font-weight:600;font-size:.95rem;color:#2c4665}
.cjl a{display:inline-block;margin-top:.15rem;font-size:.86rem;font-weight:700;color:var(--red);text-decoration:none}
.cjl a:hover{text-decoration:underline}
.cjl .todo{display:inline-block;margin-top:.15rem;font-size:.74rem;font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--blue)}
.subh-mini{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--red);margin:1.6rem 0 .1rem}
/* Zwischenüberschrift: Abstand nach oben groß, nach unten klein —
   sie gehört zur Liste darunter. Vor dem Text ein schräger Balken in der
   Farbe der Kategorie. */
.subh{font-family:'dp Display',var(--f);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:1.2rem;line-height:1.2;color:var(--navy);margin:2.4rem 0 0;display:flex;align-items:center;gap:.6rem}
.subh::before{content:"";flex:0 0 12px;height:1.1em;background:var(--kat,var(--navy));
  clip-path:polygon(45% 0,100% 0,55% 100%,0 100%)}
.kat > .subh:first-child{margin-top:0}
/* Abschnitt direkt unter einer Schrägkante (.cut-btm): Platz für die Kante */
.nach-kante{padding-top:calc(clamp(1.8rem,3vw,2.6rem) + 48px)}
/* Seitenkopf mit Schrägkante: kurzer Text, deshalb weniger Polster als ein
   Inhaltsabschnitt. Unten im selben Maß wie .nach-kante oben (Fassung 13). */
.kopf{padding-top:clamp(2rem,4vw,3.2rem);padding-bottom:calc(clamp(1.8rem,3vw,2.6rem) + 48px)}
/* Kacheln „Gut zu wissen" (Tippgeberseite) */
.wissen{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.wissen li{background:var(--white);border-radius:12px;padding:1.25rem 1.6rem 1.35rem 1.25rem;position:relative;overflow:hidden;
  box-shadow:0 14px 34px -30px rgba(22,49,81,.9)}
.wissen li::after{content:"";position:absolute;top:0;bottom:0;right:0;width:9px;background:var(--red);
  clip-path:polygon(5px 0,100% 0,100% 100%,0 100%)}
.wissen b{display:block;font-family:'dp Display',var(--f);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:1.05rem;line-height:1.2;color:var(--navy);margin-bottom:.5rem}
.wissen span{display:block;font-size:.9rem;line-height:1.55;color:#42607f}
.team{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.05rem}
.team li{background:var(--white);border-radius:var(--r);padding:1.6rem 1.4rem;position:relative;overflow:hidden;
  box-shadow:0 16px 38px -32px rgba(22,49,81,.95)}
.team li::after{content:"";position:absolute;top:0;bottom:0;right:0;width:9px;background:var(--sky);clip-path:polygon(5px 0,100% 0,100% 100%,0 100%)}
.team .ava{width:96px;height:96px;border-radius:50%;background:var(--sky);color:var(--navy);
  display:grid;place-items:center;margin-bottom:1.1rem;overflow:hidden;
  font-family:'dp Display',var(--f);font-weight:800;font-style:italic;font-size:1.9rem;letter-spacing:.02em}
.team .ava img{width:100%;height:100%;object-fit:cover;display:block}
.team .rolle{display:block;font-size:.88rem;color:#4a6684;margin:.5rem 0 1rem}
.team a{display:block;font-size:.9rem;font-weight:600;color:var(--red);text-decoration:none;margin-bottom:.25rem;word-break:break-word}
.team a:hover{text-decoration:underline}
@media (max-width:1000px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.team{grid-template-columns:1fr}}
.nowrap{white-space:nowrap}
section[id]{scroll-margin-top:96px}
h2.dsp,h3.dsp{text-wrap:balance}
.lead,.prose p,.card p,.step p,.prod p{text-wrap:pretty}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:1.8rem 0 0}
.flow span{background:rgba(255,255,255,.09);border-radius:999px;padding:.55rem 1.1rem;font-size:.93rem;font-weight:600;white-space:nowrap}
.flow i{color:var(--red-light);font-style:normal;font-weight:800;font-size:1.1rem}
.pale .flow span,.sky .flow span{background:var(--white);color:var(--navy);box-shadow:0 12px 30px -26px rgba(22,49,81,.9)}
.pale .flow i,.sky .flow i{color:var(--red)}
.page{display:none}
.page.active{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1000px){
  .grid3,.nope,.kat .nope{grid-template-columns:1fr 1fr}
  .wissen{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr 1fr}
  .split,.tg{grid-template-columns:1fr}
  .aside{position:static}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  nav{display:none}
  nav.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--sky-pale);padding:1rem;gap:.2rem;border-bottom:1px solid rgba(22,49,81,.15)}
  nav button,nav .hdr-wa{text-align:left;justify-content:flex-start}
  .burger{display:block}
  .grid3,.grid2,.rail,.nope,.kat .nope{grid-template-columns:1fr}
    .hero .badge-lg{display:none}
  .fcols{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}
  .fcols > :first-child{grid-column:1 / -1}
  .float span{display:none}
  .float{padding:1rem;border-radius:50%}
  .cut-top,.cut-btm,.cut-both{clip-path:none;margin:0;padding:clamp(3rem,8vw,3.8rem) 0}
  .nach-kante{padding-top:clamp(2.4rem,7vw,3rem)}
  .kopf{padding-top:clamp(2rem,6vw,2.6rem);padding-bottom:clamp(2rem,6vw,2.6rem)}
}

/* =====================================================================
   FORMULAR — Angebotsformular und Kontaktwege
   Verschoben aus den Seiten-Stylesheets (15. September 2026).
   Gemeinsamer Stand ist der Baustein: minmax(0,1fr), min-width:0,
   align-items:end.

   Quellen und Reihenfolge, beide unveraendert uebernommen:
     1. einwilligung-baustein.html    — TEIL 1 CSS
     2. angebotsformular-baustein.html — TEIL 1 CSS
   .aok, .oknr, p.okweg und p.okantwort kommen aus dem Einwilligungsbaustein
   und stehen nur einmal hier. Seit Fassung 15 des Angebotsbausteins ruft der
   Angebotskasten .aok wieder auf — bei den Soldaten und bei der bAV, samt
   allem, was okMount() darin erzeugt (.oklead, fieldset, legend, label, der
   Aufklapper, .okfuss). .oknr, p.okweg und p.okantwort gehoeren weiter allein
   der Einwilligungs- und der Onboardingseite: Die Handynummer wird in den
   beiden Kaesten nie abgefragt (nr:null), und der Satz ueber den
   Absendeknoepfen heisst dort p.aweg. Aendert sich hier ein Wort, aendert es
   sich im Baustein zuerst.

   Seiteneigene Abweichungen stehen weiter im <style>-Block der Seite
   und gewinnen, weil sie spaeter kommen.
   ===================================================================== */

/* ===== aus einwilligung-baustein.html ===== */
/* ===== Kontaktwege: Entscheidung im Formular ===== */
.aok{margin-top:1.2rem}
.aok .oklead{font-size:.86rem;font-weight:700;color:var(--navy);margin:0 0 1rem}
.aok fieldset{border:0;padding:0;margin:0 0 1.3rem}
.aok legend{padding:0;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--red);margin-bottom:.55rem}
.aok label{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  font-size:.86rem;line-height:1.45;margin-bottom:.8rem;color:var(--navy)}
.aok input[type="radio"]{flex:0 0 20px;width:20px;height:20px;margin:.15rem 0 0;
  accent-color:var(--navy);cursor:pointer}
.aok b{display:block;font-weight:700}

/* Der Aufklapper trägt seit Fassung 3 die Information, die vorher im
   Kurztext stand. Deshalb steht er im Textfluss und nicht mehr
   eingerückt am Rand, und er ist so groß wie die Optionen. */
.aok details{margin:.1rem 0 0}
.aok details summary{font-size:.86rem;font-weight:700;color:var(--red);cursor:pointer}
.aok details p{font-size:.82rem;line-height:1.5;margin:.6rem 0 0;color:#42607f}
.aok .okfuss{font-size:.8rem;color:#42607f;margin:.2rem 0 0}
.aok .okfuss a{color:var(--red)}

/* Handynummer: erscheint nur bei „ja". Die Beschriftung darf nicht die
   Flex-Regel der Optionen erben, sonst rutscht sie neben das Feld. */
.oknr{margin:1.1rem 0 .2rem}
.oknr[hidden]{display:none}
.oknr .oknrhinweis{font-size:.82rem;line-height:1.45;color:var(--navy);
  font-weight:600;margin:0 0 .5rem}
.oknr label{display:block;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--red);margin-bottom:.4rem}
.oknr input{width:100%;padding:.7rem .85rem;border-radius:10px;
  border:2px solid var(--white);background:var(--white);font:inherit;color:var(--navy)}
.oknr input:focus{outline:none;border-color:var(--red)}

.abox p.okweg{font-size:.82rem;color:var(--navy);font-weight:600;margin:1.1rem 0 .3rem}
.abox p.okantwort{font-size:.8rem;color:#42607f;margin:.6rem 0 0}

/* Die Einwilligungsseite hat eigene Rahmen — dort greift .aok ohne .abox.
   Damit die Wortlaute auf weißem Grund nicht flimmern, bleibt der Text
   in beiden Fällen derselbe Blauton. */

/* ===== aus angebotsformular-baustein.html — FASSUNG 28 ===== */
/* Am 4. Oktober 2026 per Diff gegen Fassung 28 abgeglichen — gleich.
   Vollständig ersetzt am 18. September 2026 (vorher Fassung 9). Neu sind
   die Themenzeilen, .aablauf, .anach, p.aweg, .amehr und die
   einzeilige Erstinformation. Entfallen sind .aleiste, .aei .eisatz und
   .aei label.eihaken. Von den Regeln aus einwilligung-baustein.html weiter
   oben ruft der Angebotskasten seit Baustein-Fassung 15 wieder .aok auf —
   nur bei den Soldaten und bei der bAV, wo die Frage zur E-Mail im Kasten
   steht. .oknr, p.okweg und p.okantwort ruft er nicht auf: kein
   Handynummernfeld (nr:null), kein okNote(), und der Satz über den
   Absendeknöpfen heißt hier p.aweg. */
/* ===== Angebotsformular ===== */
.arow{margin-bottom:.95rem}
.arow label,.arow .lbl{display:block;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--red);margin-bottom:.4rem}
.arow input,.arow select{width:100%;min-width:0;padding:.7rem .85rem;border-radius:10px;
  border:2px solid var(--white);background:var(--white);font:inherit;line-height:1.4;
  color:var(--navy)}
.arow input:focus,.arow select:focus{outline:none;border-color:var(--red)}

/* Die Auswahlliste zeichnet der Browser sonst selbst — mit eigener Hoehe,
   eigenem Rand und einem Pfeil, den wir nicht gesetzt haben. Neben einem
   Textfeld steht sie dann schief. Deshalb nehmen wir die Browserdarstellung
   heraus und setzen den Pfeil selbst; rechts bleibt Platz, damit er nicht
   im Text steht. */
.arow select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:2.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.75 6 6.25l4.5-4.5' fill='none' stroke='%23163151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:12px 8px}
.arow select::-ms-expand{display:none}

/* minmax(0,1fr) statt 1fr: Sonst zieht der laengste Eintrag der Liste
   („Mecklenburg-Vorpommern") seine Spalte breiter, und die beiden
   halben Felder sind nicht mehr gleich breit.
   align-items:end: Bricht eine der beiden Beschriftungen doch einmal um,
   bleiben wenigstens die Eingabefelder auf einer Linie. Seit Fassung 11
   sind die Beschriftungen so kurz, dass das nicht mehr vorkommen sollte. */
.atwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.7rem;
  align-items:end}
.atwo .arow{margin-bottom:.95rem}

/* Eine durchgehende Zeile unter einer gemeinsamen Beschriftung, statt
   zwei halber Felder nebeneinander. Gebraucht bei den Soldaten:
   „Tätigkeit / Besondere Verwendung i.S. § 84 SVG" steht über der ganzen
   Zeile, darunter nimmt das Textfeld den Platz bis zu den ja/nein-Knöpfen,
   die am rechten Ende stehen. Die Beschriftung ist in der Hausschrift
   398 px breit, der Kasten innen 430 px; zwischen 1000 und 1200 px
   Fensterbreite ist er schmaler, dort bricht sie um. Die Felder darunter
   bleiben davon unberührt.
   max-content an der rechten Spalte: Die Knöpfe nehmen genau ihre Breite,
   alles übrige geht an das Textfeld. */
.apaar{margin-bottom:.95rem}
/* Die gemeinsame Beschriftung gibt es in zwei Fassungen. Ein durchgehender
   Satz über beide Felder braucht keine Regel — er steht als gewöhnliche
   Beschriftung da und darf umbrechen (Mediziner:
   „In Facharzt-Weiterbildung bis (Jahr)").
   Die zweite, .apaar-lbl, trägt drei Teile: links der Name des
   Textfeldes, rechts — über den Knöpfen, an denen er hängt — der Name der
   Knopfreihe, dazwischen der Schrägstrich als eigenes Element. Mit
   space-between und drei Teilen wird der freie Platz in zwei gleiche
   Hälften geteilt: Der Schrägstrich steht damit exakt mittig zwischen den
   beiden Namen. Hängte er am rechten Namen, wäre links der ganze freie
   Platz und rechts ein Leerzeichen.
   Kein Umbruch der Zeile: Wird es eng, schrumpft der rechte Teil und
   bricht in sich um — er bleibt rechtsbündig, und Name, Schrägstrich und
   Name bleiben in dieser Reihenfolge nebeneinander. */
.apaar > .apaar-lbl{display:flex;justify-content:space-between;align-items:baseline;
  gap:.7rem}
.apaar > .apaar-lbl > :first-child,.apaar > .apaar-lbl > .apaartrenn{flex:0 0 auto}
.apaar > .apaar-lbl > :last-child{text-align:right}
.apaar-feld{display:grid;grid-template-columns:minmax(0,1fr) max-content;
  gap:.7rem;align-items:end}
/* Stehen die Knöpfe links, dreht sich das Maß um: Sie nehmen ihre eigene
   Breite, das Feld daneben den Rest. */
.apaar-feld.apaar-links{grid-template-columns:max-content minmax(0,1fr)}
.apaar-feld .arow{margin-bottom:0}

/* Beschriftungen im Kasten stehen durchgehend in Großbuchstaben.
   .lblklein nimmt das für einen Teil zurück — gebraucht für „i.S.",
   das als „I.S." wie eine Abkürzung für etwas anderes aussieht. */
.arow .lblklein{text-transform:none}

/* Geburtsdatum wird getippt, nicht geklickt: drei Felder, der Sprung
   ins nächste passiert von selbst. */
.adrei{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:.5rem}
.adrei input{text-align:center}

.awahl{display:flex;flex-wrap:wrap;gap:.4rem}
.awahl button{background:var(--white);border:2px solid var(--white);border-radius:999px;
  padding:.5rem .9rem;font-size:.82rem;font-weight:700;color:#9db4c8;cursor:pointer}
.awahl button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}

/* Steht eine Knopfreihe neben einem Eingabefeld, ist sie sonst rund 8 px
   flacher als das Feld: 41 px gegen 49 px. Allein untereinander fällt das
   nicht auf, in einer geteilten Zeile schon — die Knöpfe sehen dann
   niedrig aus. In .atwo und .apaar wachsen sie deshalb auf rund 44 px.
   Gleich hoch wie das Feld waren sie eine Fassung lang auch, das war zu
   viel: Ein Knopf, der so groß ist wie ein Eingabefeld, sieht aus wie
   eines. */
.atwo .awahl button,.apaar-feld .awahl button{padding:.6rem 1rem;font-size:.92rem;
  line-height:1.4}

/* ===== Themen =====
   Drei Zeilen über die volle Breite, nicht drei Kacheln nebeneinander.
   Gründe: In einer Drittelspalte passt „Krankenversicherung" nicht auf
   eine Zeile — es stand überall zweizeilig, mit gesetztem Umbruch im
   Label. Und das Häkchen hat den falschen Zustand betont: Ausgewählt ist
   hier der Normalfall, nicht die Ausnahme.

   Optik seit dem 21. September wie die Knopfreihe „Was trifft auf dich
   zu?" im Onboarding (.ob-wahl .vopts): runde Pille, weiß im
   Grundzustand, dunkelblau gefüllt, wenn ausgewählt, roter Rand beim
   Überfahren. Damit sehen die beiden anklickbaren Reihen des Projekts
   gleich aus. Vorher war die Auswahl hellblau mit rotem Rand — zu
   schwach neben den weißen Feldern und ohne Gegenstück an anderer
   Stelle. Die Kacheln der Check-in-Seite (.ci-kat) sind damit nicht mehr
   die Vorlage; sie bleiben, wie sie sind.

   Die Zeilen bleiben über die volle Breite. Als Pillen in einer
   umbrechenden Reihe säße „Krankenversicherung" allein in Zeile 1 und
   die beiden kurzen Begriffe darunter nebeneinander — das sieht nach
   Rangfolge aus, die es nicht gibt.

   Alle drei Themen sind vorausgewählt. Der Kasten zeigt oben also drei
   dunkelblaue Zeilen. Soll das leichter werden: in
   [aria-pressed="true"] beide var(--navy) gegen var(--blue) tauschen und
   color auf var(--navy) setzen. */
.athemen{margin:.2rem 0 0;display:grid;gap:.5rem}
.athemen button{width:100%;text-align:center;background:var(--white);
  border:2px solid rgba(22,49,81,.14);border-radius:999px;padding:.85rem 1rem;
  cursor:pointer;font:inherit;font-size:1rem;font-weight:700;color:#9db4c8;
  line-height:1.3;box-shadow:0 12px 30px -26px rgba(22,49,81,.9);
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.athemen button:hover{border-color:var(--red);color:#4a6684}
.athemen button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);
  color:var(--white)}
.athemen button[aria-pressed="true"]:hover{color:var(--white)}

.abox .cta.plain{background:transparent;border:2px solid var(--navy);
  color:var(--navy);padding:.6rem 1.2rem;font-size:.9rem}
.abox .cta.plain:hover{background:rgba(22,49,81,.08)}
.cta[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* Erklärzeile unter einem Feld — kein Label, deshalb keine Versalien. */
.arow .afeldnote{font-size:.8rem;line-height:1.45;color:#42607f;font-weight:400;
  text-transform:none;letter-spacing:0;margin:.45rem 0 0}
.abox.on-white .arow .afeldnote{color:#4c6c8a}

.abox p.ahint{font-size:.8rem;color:var(--red);font-weight:600;
  margin:.9rem 0 0;text-align:center}
.atrenner{border:0;border-top:1px solid rgba(22,49,81,.2);margin:1.7rem 0 .2rem}

/* Auf dem Handy steht der Kasten untereinander — dort kein sticky. */
.aside.aside-frei{position:static}

/* „Im Kasten geht es weiter ↓": klebt am unteren Rand des scrollenden
   Kastens und verschwindet, sobald man unten ist. aSticky() schaltet ihn.
   Steht hier und nicht in der Seite, weil er zum Kasten gehört; der
   sticky-Rahmen drumherum (.zsplit .aside) ist Layout der Seite.
   Die negativen Ränder heben die Innenabstände des Kastens auf, damit der
   Verlauf bis an die Kanten läuft. */
.amehr{position:sticky;bottom:-1.7rem;margin:0 -1.5rem -1.7rem;padding:1.6rem 1.5rem .7rem;
  text-align:center;font-size:.78rem;font-weight:700;color:var(--navy);pointer-events:none;
  background:linear-gradient(180deg,rgba(214,233,244,0),var(--sky-soft) 55%)}
.amehr[hidden]{display:none}

/* Die bAV-Seiten stellen den Kasten in einen weißen Abschnitt. Dort steht
   er als eigene Karte im Blauton der Seite — weiße Felder auf weißem Grund
   wären nicht zu erkennen, und ein Formular ohne Rand sieht aus wie ein
   Textblock, in den man nichts eintragen soll. */
.abox.on-white{background:linear-gradient(158deg,var(--sky-pale),var(--sky-soft));
  border-radius:var(--r);padding:1.8rem 1.6rem 1.7rem;position:relative;overflow:hidden;
  box-shadow:0 20px 46px -34px rgba(22,49,81,1)}
/* Die Kante ist per clip-path geschnitten, nicht per skewX: skewX verschiebt
   die Kante um Höhe × tan(14°) — bei hohen Kästen lief der Streifen so
   mehrere hundert Pixel schräg durch den Kasten. clip-path hält die
   Schräge auf 5px, egal wie hoch der Kasten ist. */
.abox.on-white::after{content:"";position:absolute;top:0;bottom:0;right:0;width:9px;
  background:var(--blue);clip-path:polygon(5px 0,100% 0,100% 100%,0 100%)}
.abox.on-white > *{position:relative;z-index:1}
.abox.on-white h3{margin:0 0 .7rem}
.abox.on-white .atrenner{border-top-color:rgba(22,49,81,.16)}

/* Felder heben sich weiß vom Kasten ab, die schmale Kante hält die Kanten
   sichtbar, wenn der Bildschirm flau eingestellt ist. */
.abox.on-white .arow input,.abox.on-white .arow select,
.abox.on-white .anach input,
.abox.on-white .awahl button{border-color:rgba(22,49,81,.14)}
.abox.on-white .awahl button[aria-pressed="true"]{border-color:var(--navy)}
.abox.on-white .arow input:focus,.abox.on-white .arow select:focus,
.abox.on-white .anach input:focus{border-color:var(--red)}
.abox.on-white .awahl button{color:#6b8299}
.abox.on-white .awahl button[aria-pressed="true"]{color:var(--white)}

/* ===== Was der Kunde bekommt, und wie es weitergeht =====
   Steht direkt unter der Einleitung, bevor jemand anfängt zu tippen.
   Erwartung vorher setzen ist billiger als sie hinterher zu korrigieren.
   Der Ablauf in drei Schritten, überall außer auf den bAV-Seiten, in drei
   Fassungen — siehe UI.
   Die Nummern sind hier berechtigt: Es ist tatsächlich eine Reihenfolge. */
.aablauf{list-style:none;counter-reset:ab;margin:0 0 1.2rem;padding:0}
.aablauf li{counter-increment:ab;position:relative;padding-left:1.9rem;
  font-size:.84rem;line-height:1.45;color:#2c4665;margin-bottom:.45rem}
.aablauf li:last-child{margin-bottom:0}
.aablauf li::before{content:counter(ab);position:absolute;left:0;top:.05rem;
  width:20px;height:20px;border-radius:50%;background:var(--red);color:var(--white);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;font-style:italic;
  font-family:'dp Display',var(--f)}
.abox.on-white .aablauf li{color:#3d5a7c}
.aablauf a{color:var(--red);font-weight:700}

/* ===== Erstinformation =====
   Eine Zeile: Kästchen, Text, im Text der Link aufs PDF. Darunter die
   Zweckangabe mit dem Datenschutzlink.
   Kein <label> um die Zeile — sonst würde ein Klick auf den Link den
   Haken mitsetzen. Das Umschalten macht eiKlick(). */
.aei{margin:1.2rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(22,49,81,.2)}
.abox.on-white .aei{border-top-color:rgba(22,49,81,.16)}
.aei a.eipdf{color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.aei .eihaken{display:flex;gap:.7rem;align-items:flex-start;
  font-size:.86rem;line-height:1.45;font-weight:700;color:var(--navy);margin:0}
.aei .eihaken .eitext{cursor:pointer}
/* Das Kästchen zeichnet der Browser sonst selbst: ungesetzt mit fast
   schwarzem Rand, gesetzt in der Systemfarbe. Beides passt nicht in den
   Kasten. Deshalb eigener Rahmen im Blau der Felder und ein gesetzter
   Haken in Magenta. */
.aei input[type="checkbox"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  flex:0 0 20px;width:20px;height:20px;margin:.1rem 0 0;cursor:pointer;position:relative;
  background:var(--white);border:2px solid rgba(22,49,81,.22);border-radius:6px;
  transition:border-color .15s ease}
.aei input[type="checkbox"]:hover{border-color:var(--red)}
.aei input[type="checkbox"]:checked{background:var(--red);border-color:var(--red)}
.aei input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;
  width:4px;height:9px;border:solid var(--white);border-width:0 2px 2px 0;
  transform:rotate(42deg)}
.aei .eids{font-size:.8rem;line-height:1.45;color:#42607f;margin:.7rem 0 0}
.abox.on-white .aei .eids{color:#4c6c8a}
.aei .eids a{color:var(--red);font-weight:700}

/* ===== Nachgetragene E-Mail-Adresse =====
   Erscheint erst, wenn jemand über WhatsApp abschickt oder kopiert.
   Optik wie ein normales Feld, damit es nicht wie eine Fehlermeldung
   aussieht — es ist keine. */
.anach{margin:1.1rem 0 0}
.anach p{font-size:.82rem;line-height:1.5;color:var(--navy);margin:0 0 .5rem}
.anach input{width:100%;min-width:0;padding:.7rem .85rem;border-radius:10px;
  border:2px solid var(--white);background:var(--white);font:inherit;line-height:1.4;
  color:var(--navy)}
.anach input:focus{outline:none;border-color:var(--red)}

/* Satz über den Absendeknöpfen. Stand bis Fassung 9 als .okweg in
   einwilligung-baustein.html — die Datei hängt hier nicht mehr dran,
   also steht der Stil jetzt hier. Gleiche Werte, anderer Name. */
.abox p.aweg{font-size:.82rem;color:var(--navy);font-weight:600;margin:1.1rem 0 .3rem}