/* NWF Finanz Consulting – Gestaltungssystem „Klarheit“ (Relaunch, Fassung 2)
   Familie der NWF-Marken (Rentenklartext, BeamtenStarter): Navy und Gold, warmes Papier, Fraunces + Inter.
   Schriften lokal. Bewegung: static/js/nwf-bewegung.js (GSAP, ScrollTrigger, SplitText, Lenis), alles optional.
   Aufbau: 1 Schriften · 2 Variablen · 3 Basis · 4 Layout · 5 Kopf · 6 Knöpfe/Bausteine · 7 Startseite
           8 Personen/Porträts · 9 Unterseiten · 10 Formulare · 11 Fuß · 12 Hilfen · 13 Bewegung · 14 Druck */

/* 1 Schriften --------------------------------------------------------------- */
@font-face { font-family: "Inter Var"; src: url("../fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: optional; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 900; font-display: optional; src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/fraunces-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 900; font-display: optional; src: url("../fonts/fraunces-var-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fonts/fraunces-var-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Sacramento"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/sacramento-400.woff2") format("woff2"); }

/* 2 Variablen ---------------------------------------------------------------- */
:root {
  --navy: #193053;
  --navy-tief: #10223d;
  --navy-nacht: #0a1628;
  --navy-hell: #2c4a77;
  --navy-50: #eef1f6;
  --gold: #baa35f;
  --gold-hell: #d8c48c;
  --gold-licht: #efe3bf;
  --gold-text: #725f24;          /* 5,6 : 1 auf Papier – Reserve, damit auch Messungen während des Einblendens bestehen */
  --koralle: #ea5a48;
  --koralle-text: #b9382a;
  --papier: #f7f4ed;
  --papier-hoch: #efe9dc;
  --papier-tief: #e4dccb;
  --karte: #fffdf8;
  --weiss: #ffffff;
  --text: #18222f;               /* 15 : 1 auf Papier */
  --text-2: #4a5462;             /* 7 : 1 auf Papier */
  --text-hell: #c7d0de;          /* auf Navy 9 : 1 */
  --linie: #d9d1c0;
  --linie-hell: #e8e2d4;
  --linie-navy: rgba(255, 255, 255, .14);
  --erfolg: #1f6b43;
  --fehler: #b42318;
  --fokus: #1f5bd6;

  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter Var", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift: "Sacramento", "Brush Script MT", cursive;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 32px;
  --schatten-1: 0 1px 2px rgba(10, 22, 40, .05), 0 4px 14px rgba(10, 22, 40, .06);
  --schatten-2: 0 18px 50px -12px rgba(10, 22, 40, .22);
  --schatten-3: 0 30px 80px -20px rgba(10, 22, 40, .35);
  --breite: 1240px;
  --rand: clamp(16px, 4vw, 40px);
  --abstand: clamp(72px, 10vw, 140px);
  --kopf-hoehe: 80px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* 3 Basis ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 20px); }
html:not(.lenis) { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--text);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.68; font-weight: 420;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); margin: 0 0 .55em; font-weight: 520; font-optical-sizing: auto; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: clamp(2rem, 1.35rem + 2.5vw, 3.35rem); line-height: 1.08; letter-spacing: -.02em; }
h3 { font-size: clamp(1.22rem, 1.1rem + .45vw, 1.5rem); line-height: 1.25; letter-spacing: -.01em; font-weight: 560; }
h4 { font-size: 1.1rem; line-height: 1.3; font-weight: 600; }
h1 em, h2 em { font-style: italic; font-weight: 420; color: var(--gold-text); }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--navy); text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
a:hover { color: var(--navy-tief); text-decoration-color: var(--navy); }
strong, b { font-weight: 640; }
ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li + li { margin-top: .35em; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold-licht); color: var(--navy-nacht); }
.sprunglink { position: absolute; left: 16px; top: -100px; z-index: 1000; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: var(--r-s); font-weight: 700; }
.sprunglink:focus { top: 12px; color: #fff; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 4 Layout ----------------------------------------------------------------------- */
.huelle { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.huelle--schmal { max-width: calc(840px + 2 * var(--rand)); }
.abschnitt { padding: var(--abstand) 0; position: relative; }
.abschnitt--flaeche { background: var(--papier-hoch); }
.abschnitt--hell { background: var(--karte); }
.abschnitt--navy { background: var(--navy); color: var(--text-hell); }
.abschnitt--navy h2, .abschnitt--navy h3 { color: #fff; }
.abschnitt--navy h2 em { color: var(--gold-hell); }
.abschnitt--navy a:not(.knopf) { color: #fff; }
.abschnitt--navy .knopf--gold, .karte--navy .knopf--gold { color: var(--navy-nacht); }
.abschnitt--eng { padding: clamp(48px, 7vw, 88px) 0; }
.kopfzeile { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }
.kopfzeile p { color: var(--text-2); font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); max-width: 40em; }
.kopfzeile--zentriert { text-align: center; margin-inline: auto; }
.kopfzeile--zentriert p { margin-inline: auto; }
.kopfzeile--zeile { max-width: none; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: end; justify-content: space-between; }
.kopfzeile--zeile > div { max-width: 760px; }
.abschnitt--navy .kopfzeile p { color: var(--text-hell); }
.kicker { display: block; font-family: var(--serif); font-style: italic; font-weight: 420; font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height: 1.3; color: var(--gold-text); margin-bottom: 12px; letter-spacing: 0; }
.abschnitt--navy .kicker, .karte--navy .kicker { color: var(--gold-hell); }
.raster { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.spalten { display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: 1fr; }
.spalten > * { min-width: 0; }
@media (min-width: 960px) {
  .spalten--haupt { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .spalten--haelfte { grid-template-columns: 1fr 1fr; align-items: center; }
  .spalten--5-7 { grid-template-columns: 5fr 7fr; align-items: start; }
}

/* 5 Kopf und Navigation -------------------------------------------------------------- */
.vorschau-band { background: var(--koralle-text); color: #fff; font-size: .86rem; text-align: center; padding: 6px var(--rand); line-height: 1.4; }
.vorschau-band a { color: #fff; font-weight: 700; }
.service-leiste { background: var(--navy-nacht); color: var(--text-hell); font-size: .84rem; display: none; }
.service-leiste .huelle { display: flex; justify-content: flex-end; gap: 28px; align-items: center; min-height: 38px; }
.service-leiste a { color: #e6ecf5; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.service-leiste a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); }
.service-leiste svg { width: 15px; height: 15px; color: var(--gold); }
@media (min-width: 1100px) { .service-leiste { display: block; } }

.kopf { position: sticky; top: 0; z-index: 100; background: rgba(247, 244, 237, .96); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background-color .3s; view-transition-name: kopf; }
.kopf[data-gescrollt="true"] { border-bottom-color: var(--linie); box-shadow: 0 10px 30px -18px rgba(10, 22, 40, .35); background: rgba(247, 244, 237, .985); }
.kopf::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--fortschritt, 0)); }
.kopf .huelle { display: flex; align-items: center; gap: 20px; min-height: var(--kopf-hoehe); }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: 0 0 auto; }
.logo img { height: 48px; width: auto; }
.logo__slogan { font-family: var(--schrift); color: var(--koralle); font-size: 1.75rem; line-height: 1; white-space: nowrap; display: none; }
@media (min-width: 1280px) { .logo__slogan { display: block; } }
.hauptnav { margin-left: auto; }
.hauptnav__liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: center; }
.hauptnav__liste > li { margin: 0; position: relative; }
.hauptnav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; background: none; font: 560 .98rem/1 var(--sans); color: var(--navy); text-decoration: none; border-radius: var(--r-s); cursor: pointer; }
.hauptnav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.hauptnav__link:hover::after, .hauptnav__link[aria-expanded="true"]::after, .hauptnav__link[aria-current="page"]::after { transform: scaleX(1); }
.hauptnav__link:hover { color: var(--navy-tief); text-decoration: none; }
.hauptnav__link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.hauptnav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.kopf__aktion { margin-left: 10px; }
.menue-knopf { display: none; margin-left: auto; border: 1px solid var(--linie); background: var(--karte); border-radius: var(--r-s); width: 48px; height: 48px; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); }
.menue-knopf svg { width: 24px; height: 24px; }
.kopf .kopf__termin-mobil { display: none; }

.megamenue { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); width: min(980px, calc(100vw - 2 * var(--rand))); background: var(--karte); border: 1px solid var(--linie-hell); border-radius: var(--r-l); box-shadow: var(--schatten-3); padding: 26px; display: none; }
.megamenue--klein { width: 400px; left: 0; transform: none; }
.megamenue[data-offen="true"] { display: block; animation: menue-auf .32s var(--ease); }
@keyframes menue-auf { from { opacity: 0; translate: 0 -8px; } }
.megamenue__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; }
.megamenue--klein .megamenue__raster { grid-template-columns: 1fr; }
.megamenue a { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); text-decoration: none; color: var(--text); transition: background-color .2s; }
.megamenue a:hover, .megamenue a:focus-visible { background: var(--papier-hoch); }
.megamenue a strong { display: block; color: var(--navy); font-family: var(--serif); font-weight: 560; font-size: 1.04rem; line-height: 1.3; }
.megamenue a span { display: block; font-size: .86rem; color: var(--text-2); line-height: 1.45; margin-top: 2px; }
.megamenue .symbol { width: 36px; height: 36px; flex: 0 0 36px; }
.megamenue__fuss { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linie-hell); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; font-size: .95rem; }

@media (max-width: 1099px) {
  .menue-knopf { display: inline-flex; }
  .kopf .kopf__termin-mobil { display: inline-flex; margin-left: auto; }
  .kopf__termin-mobil + .menue-knopf { margin-left: 8px; }
  .kopf__aktion { display: none; }
  .hauptnav { position: fixed; inset: var(--kopf-hoehe) 0 0 0; background: var(--papier); overflow-y: auto; padding: 12px var(--rand) 40px; display: none; margin: 0; border-top: 1px solid var(--linie); }
  .hauptnav[data-offen="true"] { display: block; animation: menue-auf .3s var(--ease); }
  .hauptnav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .hauptnav__liste > li { border-bottom: 1px solid var(--linie); }
  .hauptnav__link { width: 100%; justify-content: space-between; padding: 20px 4px; font: 520 1.35rem/1.2 var(--serif); }
  .hauptnav__link::after { display: none; }
  .megamenue, .megamenue--klein { position: static; transform: none; width: auto; box-shadow: none; border: 0; padding: 0 0 12px; background: transparent; }
  .megamenue__raster { grid-template-columns: 1fr; }
  .hauptnav__mobil-extra { display: grid; gap: 12px; margin-top: 24px; }
}
@media (min-width: 1100px) { .hauptnav__mobil-extra { display: none; } }
@media (max-width: 520px) { .logo img { height: 40px; } .kopf__termin-mobil .knopf__text-lang { display: none; } }

/* 6 Knöpfe und Bausteine ------------------------------------------------------------------ */
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-radius: 14px; border: 1.5px solid transparent; font: 600 1rem/1.2 var(--sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s; text-align: center; isolation: isolate; overflow: hidden; }
.knopf svg { width: 18px; height: 18px; flex: 0 0 18px; transition: transform .3s var(--ease); }
.knopf:hover svg:last-child:not(:first-child), .knopf:hover > svg:only-child { transform: translateX(3px); }
.knopf:active { transform: translateY(1px); }
.knopf--primaer { background: var(--navy); color: #fff; box-shadow: 0 10px 24px -12px rgba(25, 48, 83, .7); }
.knopf--primaer:hover { background: var(--navy-tief); color: #fff; text-decoration: none; box-shadow: 0 16px 30px -12px rgba(25, 48, 83, .75); }
.knopf--primaer svg { color: var(--gold-hell); }
.knopf--sekundaer { background: transparent; color: var(--navy); border-color: var(--navy); }
.knopf--sekundaer:hover { background: var(--navy); color: #fff; text-decoration: none; }
.knopf--gold { background: var(--gold); color: var(--navy-nacht); }
.knopf--gold:hover { background: var(--gold-hell); color: var(--navy-nacht); text-decoration: none; }
.knopf--hell { background: #fff; color: var(--navy); }
.knopf--hell:hover { background: var(--gold-licht); color: var(--navy); text-decoration: none; }
.knopf--rahmen-hell { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.knopf--rahmen-hell:hover { background: #fff; color: var(--navy); text-decoration: none; }
.knopf--klein { min-height: 44px; padding: 9px 16px; font-size: .95rem; border-radius: 12px; }
.knopf-gruppe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.textlink { font-weight: 620; color: var(--navy); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1.5px no-repeat; padding-bottom: 3px; transition: background-size .35s var(--ease), color .2s; }
.textlink:hover { color: var(--navy-tief); text-decoration: none; background-size: 0 1.5px; background-position: 100% 100%; }
.textlink svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.textlink:hover svg { transform: translateX(4px); }
.abschnitt--navy .textlink, .karte--navy .textlink { color: #fff; }

.symbol { width: 44px; height: 44px; color: var(--navy); flex: 0 0 auto; }
.symbol .akzent { color: var(--gold); }
.symbol-rund { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--navy); }
.symbol-rund .symbol { width: 32px; height: 32px; color: #fff; }
.symbol-rund .symbol .akzent { color: var(--gold-hell); }

/* Karten */
.karte { background: var(--karte); border: 1px solid var(--linie-hell); border-radius: var(--r-l); padding: clamp(22px, 2.4vw, 30px); box-shadow: var(--schatten-1); }
.karte--navy { background: var(--navy); border-color: var(--navy); color: var(--text-hell); box-shadow: var(--schatten-2); }
.karte--navy h2, .karte--navy h3 { color: #fff; }
.karte h2, .karte h3 { font-size: 1.32rem; margin-bottom: .5em; }
.karte p { font-size: .98rem; }
.karte .knopf { width: 100%; }
.karte .knopf + .knopf { margin-top: 10px; }

/* Wegweiser (drei Einstiege) */
.wegweiser { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); position: relative; z-index: 3; }
.weg { position: relative; background: var(--karte); border: 1px solid var(--linie-hell); border-radius: var(--r-l); padding: 30px 30px 28px; box-shadow: var(--schatten-1); display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--text); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; overflow: hidden; }
.weg:hover { transform: translateY(-6px); box-shadow: var(--schatten-2); border-color: var(--linie); text-decoration: none; color: var(--text); }
.weg__nr { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--gold-text); }
.weg__frage { font-family: var(--serif); font-weight: 540; color: var(--navy); font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem); line-height: 1.2; letter-spacing: -.01em; }
.weg__text { color: var(--text-2); font-size: .98rem; margin: 0; }
.weg__aktion { margin-top: auto; padding-top: 10px; font-weight: 640; color: var(--navy); display: inline-flex; gap: 12px; align-items: center; }
.weg__aktion svg { width: 18px; height: 18px; box-sizing: content-box; padding: 9px; border-radius: 50%; border: 1.5px solid currentColor; transition: transform .4s var(--ease), background-color .3s, color .3s; }
.weg:hover .weg__aktion svg { transform: translateX(4px); background: var(--navy); color: #fff; border-color: var(--navy); }
.weg--primaer { background: var(--navy); border-color: var(--navy); color: var(--text-hell); }
.weg--primaer .weg__frage, .weg--primaer .weg__aktion { color: #fff; }
.weg--primaer .weg__nr { color: var(--gold-hell); }
.weg--primaer .weg__text { color: var(--text-hell); }
.weg--primaer:hover { color: var(--text-hell); border-color: var(--navy); }
.weg--primaer:hover .weg__aktion svg { background: var(--gold); color: var(--navy-nacht); border-color: var(--gold); }

/* Themenliste (Index der Beratungsthemen) */
.themen-raster { display: grid; gap: clamp(32px, 5vw, 80px); }
@media (min-width: 1000px) { .themen-raster { grid-template-columns: 4fr 7fr; align-items: start; } .themen-raster .kopfzeile { position: sticky; top: calc(var(--kopf-hoehe) + 40px); margin-bottom: 0; } }
.themenliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); counter-reset: thema; }
.themenliste li { margin: 0; border-bottom: 1px solid var(--linie); counter-increment: thema; }
.themenliste a { position: relative; display: grid; grid-template-columns: 52px 1fr 44px; gap: 18px; align-items: center; padding: 22px 10px; text-decoration: none; color: var(--text); isolation: isolate; }
.themenliste a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--karte); border-radius: var(--r-m); transform: scaleY(.6); opacity: 0; transition: transform .4s var(--ease), opacity .3s; }
.themenliste a:hover::before, .themenliste a:focus-visible::before { transform: none; opacity: 1; box-shadow: var(--schatten-1); }
.themenliste a:hover { text-decoration: none; color: var(--text); }
.themenliste strong { display: block; font-family: var(--serif); font-weight: 540; color: var(--navy); font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); line-height: 1.25; transition: transform .4s var(--ease); }
.themenliste a:hover strong { transform: translateX(6px); }
.themenliste span { display: block; color: var(--text-2); font-size: .93rem; line-height: 1.5; margin-top: 2px; transition: transform .4s var(--ease) .03s; }
.themenliste a:hover span { transform: translateX(6px); }
.themenliste .symbol { width: 40px; height: 40px; }
.themenliste .pfeil { width: 20px; height: 20px; box-sizing: content-box; padding: 11px; border-radius: 50%; color: var(--navy); border: 1.5px solid var(--linie); transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ease); }
.themenliste a:hover .pfeil { background: var(--navy); color: #fff; border-color: var(--navy); transform: rotate(-35deg); }

/* Ablauf */
.ablauf { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px; counter-reset: schritt; position: relative; }
@media (min-width: 860px) { .ablauf { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); } }
.ablauf li { margin: 0; position: relative; padding-top: clamp(84px, 9vw, 120px); }
.ablauf li::before { counter-increment: schritt; content: "0" counter(schritt); position: absolute; top: 0; left: 0; font: italic 400 clamp(4rem, 3rem + 4vw, 6.5rem)/1 var(--serif); color: transparent; -webkit-text-stroke: 1.5px var(--navy); letter-spacing: -.04em; }
.ablauf h3 { margin-bottom: .4em; }
.ablauf p { color: var(--text-2); margin: 0; }
.abschnitt--navy .ablauf li::before { -webkit-text-stroke-color: var(--gold); }
.abschnitt--navy .ablauf p { color: var(--text-hell); }
.ablauf-linie { position: absolute; left: 0; right: 0; top: calc(clamp(84px, 9vw, 120px) - 24px); height: 18px; pointer-events: none; display: none; overflow: visible; }
@media (min-width: 860px) { .ablauf-linie { display: block; } }
.ablauf-linie path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 2 0; }
@supports not (-webkit-text-stroke: 1px black) { .ablauf li::before { color: var(--gold); } }

/* Fakten / Vertrauen */
.fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.fakten li { margin: 0; position: relative; padding: 28px 26px 26px; background: var(--karte); border-radius: var(--r-l); border: 1px solid var(--linie-hell); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.fakten li::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--linie-an, 1)); transition: transform .9s var(--ease); }
.fakten li:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.fakten strong { display: block; font-family: var(--serif); color: var(--navy); font-size: 1.32rem; font-weight: 540; margin-bottom: 8px; line-height: 1.25; }
.fakten strong a { text-decoration: none; }
.fakten strong a::after { content: ""; position: absolute; inset: 0; }
.fakten span { color: var(--text-2); font-size: .97rem; display: block; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; margin: 0; }
.kennzahlen div { border-top: 1.5px solid var(--navy); padding-top: 18px; }
.kennzahlen dt { font: 500 clamp(2.6rem, 2rem + 2.4vw, 4.2rem)/1 var(--serif); color: var(--navy); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.kennzahlen dd { margin: 10px 0 0; color: var(--text-2); }

/* Bild-Text */
.bildtext { display: grid; gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (min-width: 900px) { .bildtext { grid-template-columns: 1fr 1fr; } .bildtext--umgekehrt > :first-child { order: 2; } .bildtext--umgekehrt .bildtext__bild { order: 2; } }
.bildtext__bild { border-radius: var(--r-xl); overflow: hidden; background: var(--papier-tief); box-shadow: var(--schatten-2); }
.bildtext__bild img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.bild-unterschrift { font-size: .88rem; color: var(--text-2); margin-top: 10px; }
.foto { border-radius: var(--r-xl); overflow: hidden; background: var(--papier-tief); box-shadow: var(--schatten-2); }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Freigestellte Gruppen auf Bühne */
.gruppenbild { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: clamp(28px, 4vw, 48px) clamp(12px, 3vw, 36px) 0; box-shadow: var(--schatten-2); isolation: isolate; }
.gruppenbild::before { content: ""; position: absolute; z-index: -1; width: 64%; aspect-ratio: 1; left: 18%; top: 8%; border-radius: 50%; border: 1.5px solid rgba(216, 196, 140, .42); }
.gruppenbild img { width: 100%; height: auto; object-fit: contain; position: relative; }

/* Video */
.video { margin: 0; }
.video__rahmen { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--navy-nacht); box-shadow: var(--schatten-3); }
.video video { width: 100%; aspect-ratio: 16 / 9; background: var(--navy-nacht); border-radius: 0; }
.video figcaption { font-size: .95rem; color: var(--text-2); margin-top: 14px; }
.video figcaption strong { color: var(--navy); display: block; font-family: var(--serif); font-weight: 560; font-size: 1.1rem; }
.abschnitt--navy .video figcaption { color: var(--text-hell); }
.abschnitt--navy .video figcaption strong { color: #fff; }

/* Servicekacheln */
.dienste { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.dienst { position: relative; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--linie-hell); border-radius: var(--r-l); padding: 28px 26px; background: var(--karte); text-decoration: none; color: var(--text); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
a.dienst:hover { transform: translateY(-5px); box-shadow: var(--schatten-2); border-color: var(--linie); color: var(--text); text-decoration: none; }
.dienst > .symbol { width: 46px; height: 46px; }
.dienst h3 { margin: 0; font-size: 1.28rem; }
.dienst p { margin: 0; color: var(--text-2); font-size: .97rem; }
.dienst__aktion { margin-top: auto; padding-top: 8px; font-weight: 640; color: var(--navy); display: inline-flex; align-items: center; gap: 8px; }
.dienst__aktion svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
a.dienst:hover .dienst__aktion svg { transform: translateX(4px); }
.extern-hinweis { font-size: .82rem; color: var(--text-2); font-weight: 500; }

/* Linkliste */
.linkliste { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linie); }
.linkliste li { margin: 0; border-bottom: 1px solid var(--linie); }
.linkliste a { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 6px; text-decoration: none; font-family: var(--serif); font-weight: 520; font-size: 1.12rem; color: var(--navy); transition: padding .4s var(--ease), background-color .3s; border-radius: var(--r-s); }
.linkliste a:hover { padding-left: 16px; padding-right: 12px; background: var(--karte); }
.linkliste svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--gold-text); transition: transform .35s var(--ease); }
.linkliste a:hover svg { transform: translateX(4px); }
.linkliste .vorschau-hinweis, .linkliste .extern-hinweis { font-family: var(--sans); }

/* Zitat */
.zitat { margin: 0 auto; max-width: 1000px; text-align: center; }
.zitat::before { content: "„"; display: block; font: italic 400 clamp(5rem, 4rem + 4vw, 8rem)/.5 var(--serif); color: var(--gold); margin-bottom: 24px; }
.zitat p { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(1.6rem, 1.15rem + 2vw, 2.7rem); line-height: 1.28; letter-spacing: -.015em; color: var(--navy); margin: 0; }
.zitat .wort { color: inherit; }

/* Laufband (bewegt sich nur beim Scrollen) */
.laufband { overflow: hidden; background: var(--navy); color: #fff; padding: 22px 0; border-block: 1px solid var(--linie-navy); }
.laufband__spur { display: flex; width: max-content; gap: 0; will-change: transform; }
.laufband__spur span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font: italic 400 clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem)/1.1 var(--serif); white-space: nowrap; letter-spacing: -.01em; }
.laufband__spur span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: 0 0 10px; }
.laufband--umriss { background: transparent; border: 0; padding: 0 0 clamp(36px, 5vw, 64px); }
.laufband--umriss .laufband__spur span { font: italic 300 clamp(3.6rem, 2rem + 7vw, 8.5rem)/1 var(--serif); color: transparent; -webkit-text-stroke: 1.2px rgba(216, 196, 140, .55); }
.laufband--umriss .laufband__spur span::after { background: var(--gold); opacity: .6; width: 14px; height: 14px; flex-basis: 14px; }

/* Kontaktband */
.kontaktband-abschnitt { background: var(--navy-tief); color: var(--text-hell); overflow: hidden; padding-top: clamp(56px, 7vw, 96px); }
.kontaktband-abschnitt h2 { color: #fff; }
.kontaktband { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .kontaktband { grid-template-columns: 1.25fr 1fr; } }
.kontaktband h2 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); }
.kontaktband__wege { display: grid; gap: 12px; }
.kontaktweg { display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--r-m); background: rgba(255, 255, 255, .05); border: 1px solid var(--linie-navy); color: #fff; text-decoration: none; transition: background-color .3s, border-color .3s, transform .4s var(--ease); }
.kontaktweg:hover { background: rgba(255, 255, 255, .1); border-color: rgba(216, 196, 140, .5); color: #fff; text-decoration: none; transform: translateX(4px); }
.kontaktweg svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--gold-hell); }
.kontaktweg strong { display: block; font-size: 1.05rem; font-weight: 620; }
.kontaktweg span { display: block; font-size: .9rem; color: var(--text-hell); }
.abschnitt--navy .kontaktweg, .kontaktband-abschnitt .kontaktweg { color: #fff; }
.kontaktband-abschnitt a:not(.knopf) { color: #fff; }
.kontaktband-abschnitt .kicker { color: var(--gold-hell); }
.kontaktband-abschnitt .knopf--gold { color: var(--navy-nacht); }

/* 7 Startseite ------------------------------------------------------------------------ */
.buehne { position: relative; padding: clamp(28px, 5vw, 72px) 0 clamp(64px, 8vw, 120px); overflow: hidden; }
.buehne__raster { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 980px) { .buehne__raster { grid-template-columns: 1.12fr .88fr; } }
.buehne h1 { font-size: clamp(2.8rem, 1.5rem + 5.2vw, 5.9rem); line-height: .98; letter-spacing: -.035em; margin-bottom: 26px; font-weight: 480; }
.buehne h1 em { display: inline-block; padding-right: .08em; }
.buehne__lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--text-2); max-width: 36em; margin-bottom: 32px; line-height: 1.6; }
.buehne__nebenlinks { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .98rem; }
.buehne__nebenlinks .textlink svg { color: var(--gold-text); }

.buehne__portraet { position: relative; width: min(100%, 470px); margin-inline: auto; aspect-ratio: 4 / 5.25; }
@media (min-width: 980px) { .buehne__portraet { margin-right: 0; } }
.buehne__bogen { position: absolute; inset: 9% 0 0 0; border-radius: 999px 999px var(--r-xl) var(--r-xl); overflow: hidden; box-shadow: var(--schatten-3); }
.buehne__ring { position: absolute; width: 74%; aspect-ratio: 1; left: 13%; top: 9%; border-radius: 50%; border: 1.5px solid rgba(216, 196, 140, .45); }
.buehne__tiefe { position: absolute; inset: 0; }
.buehne__bilder { position: absolute; inset: 0; clip-path: inset(-10% 0 0 0 round 0 0 var(--r-xl) var(--r-xl)); }
.buehne__bilder img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .9s var(--ease), transform 1.2s var(--ease); -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%); mask-image: linear-gradient(to bottom, #000 76%, transparent 99%); }
.buehne__bilder img.ist-aktiv { opacity: 1; transform: none; }
.buehne__schild { position: absolute; left: -6%; bottom: 7%; z-index: 2; background: var(--karte); border-radius: var(--r-m); padding: 14px 18px 14px 16px; box-shadow: var(--schatten-2); display: grid; gap: 2px; min-width: 230px; max-width: 78%; }
.buehne__schild strong { font: 560 1.12rem/1.25 var(--serif); color: var(--navy); }
.buehne__schild span { font-size: .86rem; color: var(--text-2); line-height: 1.4; }
.buehne__schild [data-portraet-name] { transition: opacity .35s; }
.buehne__notiz { position: absolute; right: -4%; top: 16%; z-index: 2; background: var(--gold); color: var(--navy-nacht); border-radius: var(--r-m); padding: 12px 16px; box-shadow: var(--schatten-2); font-size: .9rem; font-weight: 620; line-height: 1.35; display: flex; gap: 10px; align-items: center; max-width: 220px; }
.buehne__notiz svg { width: 22px; height: 22px; flex: 0 0 22px; }
.buehne__steuerung { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; gap: 8px; align-items: center; }
.buehne__steuerung button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(10, 22, 40, .55); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.buehne__steuerung button:hover { background: var(--gold); color: var(--navy-nacht); border-color: var(--gold); }
.buehne__steuerung svg { width: 16px; height: 16px; }
.buehne__fortschritt { position: absolute; left: 24px; right: 120px; bottom: 33px; z-index: 3; height: 2px; background: rgba(255, 255, 255, .18); border-radius: 2px; overflow: hidden; }
.buehne__fortschritt i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
.buehne__unterschrift { margin: 18px 0 0; font-size: .9rem; color: var(--text-2); text-align: center; }
@media (max-width: 979px) { .buehne__schild { left: 0; } .buehne__notiz { right: 0; } }
@media (max-width: 599px) {
  .buehne__notiz { display: none; }
  .buehne__schild { left: 12px; right: 12px; max-width: none; min-width: 0; bottom: 70px; padding: 12px 14px; }
  .buehne__fortschritt { left: 18px; right: 152px; bottom: 33px; }
}
.wegweiser--buehne { margin-top: clamp(-64px, -5vw, -36px); }

/* Berater-Schiene (Startseite) */
.schiene-huelle { position: relative; }
.schiene { --seitenrand: max(var(--rand), calc((100vw - var(--breite)) / 2)); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(232px, 23vw, 290px); gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--seitenrand); padding: 6px var(--seitenrand) 26px; margin: 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; cursor: grab; }
.schiene > li:last-child { margin-right: 0; }
.schiene:active { cursor: grabbing; }
.schiene > li { margin: 0; scroll-snap-align: start; }
.schiene-steuerung { display: flex; gap: 10px; }
.schiene-steuerung button { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; display: grid; place-items: center; transition: background-color .25s, color .25s; }
.schiene-steuerung button:hover { background: var(--navy); color: #fff; }
.schiene-steuerung button[disabled] { opacity: .35; cursor: default; background: transparent; color: var(--navy); }
.schiene-steuerung svg { width: 20px; height: 20px; }
.schiene-steuerung .zurueck svg { transform: scaleX(-1); }

/* 8 Personen und Porträts --------------------------------------------------------------- */
/* Einheitlicher Porträtrahmen: freigestellte Person vor Navy, goldener Ring hinter dem Kopf */
/* Studiohintergrund: Navy mit weichem Licht hinter dem Kopf (alle Porträts identisch) */
.portraet, .buehne__bogen, .gruppenbild, .seitenkopf__bild--freigestellt { background: radial-gradient(90% 70% at 50% 30%, #2a4672 0%, #193053 58%, #10223d 100%); }
.portraet { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; isolation: isolate; }
.portraet::before { content: ""; position: absolute; z-index: -1; width: 80%; aspect-ratio: 1; left: 10%; top: 9%; border-radius: 50%; border: 1.5px solid rgba(216, 196, 140, .42); transition: transform .8s var(--ease), border-color .4s; }
.portraet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transition: transform .9s var(--ease); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%); mask-image: linear-gradient(to bottom, #000 74%, transparent 99%); }
.portraet--gruppe { aspect-ratio: 3 / 2; }
.portraet--gruppe img { object-fit: contain; object-position: 50% 100%; }

.kachel { display: block; text-decoration: none; color: var(--text); }
.kachel:hover { text-decoration: none; color: var(--text); }
.kachel:hover .portraet img { transform: scale(1.04); }
.kachel:hover .portraet::before { transform: scale(1.06); border-color: rgba(216, 196, 140, .75); }
.kachel__name { display: block; margin-top: 16px; font: 540 1.28rem/1.25 var(--serif); color: var(--navy); letter-spacing: -.01em; }
.kachel__rolle { display: block; margin-top: 4px; font-size: .9rem; color: var(--text-2); line-height: 1.45; }
.kachel__ort { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: .84rem; color: var(--gold-text); font-weight: 600; }
.kachel__ort svg { width: 14px; height: 14px; }

.personen { display: grid; gap: clamp(18px, 2vw, 26px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.person { position: relative; background: var(--karte); border: 1px solid var(--linie-hell); border-radius: var(--r-l); overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.person:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.person:hover .portraet img { transform: scale(1.035); }
.person:hover .portraet::before { transform: scale(1.06); }
.person__bild { aspect-ratio: 4 / 5; background: var(--navy); }
.person__bild.portraet { border-radius: 0; }
.person__bild img { width: 100%; height: 100%; object-fit: cover; }
.person__inhalt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.person__name { font-family: var(--serif); font-weight: 560; color: var(--navy); font-size: 1.32rem; margin: 0; line-height: 1.25; }
.person__titel { font-size: .84rem; color: var(--gold-text); font-weight: 640; }
.person__funktion { list-style: none; margin: 0; padding: 0; font-size: .92rem; color: var(--text-2); line-height: 1.45; }
.person__funktion li + li { margin-top: 2px; }
.person__zitat { font-family: var(--serif); font-size: 1rem; font-style: italic; color: var(--navy); border-left: 2px solid var(--gold); padding-left: 12px; margin: 10px 0 6px; line-height: 1.45; }
.person__kontakt { list-style: none; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--linie-hell); display: grid; gap: 6px; font-size: .95rem; }
.person__kontakt li { margin: 0; }
.person__kontakt a { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: var(--navy); font-weight: 600; word-break: break-word; min-height: 32px; }
.person__kontakt a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.person__kontakt svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--gold-text); }
.person__ort { font-size: .86rem; color: var(--gold-text); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.person__ort svg { width: 14px; height: 14px; }
.person-mini { display: grid; grid-template-columns: 68px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--linie-hell); }
.person-mini:last-child { border-bottom: 0; }
.person-mini img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; background: var(--navy); }
.person-mini strong { display: block; color: var(--navy); font-family: var(--serif); font-weight: 560; font-size: 1.08rem; }
.person-mini span { display: block; font-size: .88rem; color: var(--text-2); line-height: 1.4; }
.person-mini a { font-size: .92rem; font-weight: 600; text-decoration: none; display: inline-block; margin-top: 4px; }
.person-mini a:hover { text-decoration: underline; }

/* 9 Unterseiten ---------------------------------------------------------------------------- */
.seitenkopf { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.seitenkopf::after { content: ""; position: absolute; left: var(--rand); right: var(--rand); bottom: 0; height: 1px; background: var(--linie); max-width: var(--breite); margin-inline: auto; }
.seitenkopf h1 { margin-bottom: 18px; max-width: 18ch; font-size: clamp(2.5rem, 1.5rem + 4vw, 4.8rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 480; }
.seitenkopf__lead { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); color: var(--text-2); max-width: 42em; margin: 0; line-height: 1.6; }
.seitenkopf__raster { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .seitenkopf__raster--bild { grid-template-columns: 7fr 5fr; } }
.seitenkopf__bild { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--schatten-2); background: var(--navy); }
.seitenkopf__bild figcaption { position: absolute; left: 22px; right: 22px; bottom: 18px; color: #fff; font: italic 420 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.2 var(--serif); text-shadow: 0 2px 16px rgba(10, 22, 40, .6); }
.seitenkopf__bild--freigestellt img { -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.seitenkopf__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.seitenkopf__bild--freigestellt { position: relative; isolation: isolate; padding-top: 24px; }
.seitenkopf__bild--freigestellt::before { content: ""; position: absolute; z-index: -1; width: 62%; aspect-ratio: 1; left: 19%; top: 8%; border-radius: 50%; border: 1.5px solid rgba(216, 196, 140, .45); }
.seitenkopf__bild--freigestellt img { aspect-ratio: auto; object-fit: contain; }
.seitenkopf .knopf-gruppe { margin-top: 30px; }
.kopf-portraet .buehne__portraet { width: min(100%, 380px); }
.kopf-portraet .buehne__schild { left: -8%; bottom: 8%; }
.kopf-symbol { display: grid; place-items: center; }
.kopf-symbol .symbol { width: 44%; height: auto; color: #fff; stroke-width: 1; position: relative; }
.kopf-symbol .symbol .akzent { color: var(--gold-hell); }
@media (max-width: 899px) { .kopf-portraet { display: none; } }
.seitenkopf__symbol { margin-bottom: 22px; }
.brotkrumen { font-size: .88rem; margin-bottom: clamp(20px, 3vw, 36px); }
.brotkrumen ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.brotkrumen li { margin: 0; display: inline-flex; gap: 8px; align-items: center; color: var(--text-2); }
.brotkrumen li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.brotkrumen a { color: var(--text-2); text-decoration: none; }
.brotkrumen a:hover { color: var(--navy); text-decoration: underline; }

/* Fließtext */
.fliesstext { max-width: 72ch; }
.fliesstext h2 { margin-top: 1.5em; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }
.fliesstext h2:first-child, .fliesstext h3:first-child { margin-top: 0; }
.fliesstext h3 { margin-top: 1.4em; }
.fliesstext > p:first-child { font-size: 1.14rem; }
.fliesstext ul li::marker { color: var(--gold); }
.fliesstext ol li::marker { color: var(--gold-text); font-weight: 700; }
.fliesstext table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: .97rem; background: var(--karte); border-radius: var(--r-m); overflow: hidden; }
.fliesstext th, .fliesstext td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linie-hell); vertical-align: top; }
.fliesstext th { background: var(--navy); color: #fff; font-weight: 600; }
.fliesstext img { border-radius: var(--r-l); }
.rechtstext { font-size: 1rem; }
.rechtstext h2 { font-size: 1.6rem; margin-top: 2em; }
.rechtstext h3 { font-size: 1.15rem; margin-top: 1.6em; }
.rechtstext p, .rechtstext li { overflow-wrap: anywhere; }

.block { margin: 0 0 clamp(48px, 6vw, 72px); }
.block > h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
.haken { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.haken li { margin: 0; padding-left: 38px; position: relative; }
.haken li::before { content: ""; position: absolute; left: 0; top: .15em; width: 24px; height: 24px; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8c48c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.fragenliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fragenliste li { margin: 0; background: var(--karte); border: 1px solid var(--linie-hell); border-radius: var(--r-m); padding: 16px 20px 16px 52px; font-family: var(--serif); font-size: 1.08rem; font-weight: 500; color: var(--navy); position: relative; }
.fragenliste li::before { content: "?"; position: absolute; left: 18px; top: 14px; font: italic 600 1.3rem/1 var(--serif); color: var(--gold-text); }
.hinweisbox { border: 1px solid var(--linie-hell); border-left: 3px solid var(--navy); background: var(--karte); border-radius: var(--r-m); padding: 20px 22px; margin: 0 0 1.5em; }
.hinweisbox p:last-child, .hinweisbox ul:last-child { margin-bottom: 0; }
.hinweisbox--gold { border-left-color: var(--gold); background: #fbf6e6; }
.hinweisbox--warn { border-left-color: var(--koralle-text); background: #fdf1ef; }
.hinweisbox h3 { font-size: 1.12rem; margin-bottom: .4em; }

/* Prüfvorbehalt – nur in der Vorschau sichtbar */
.pruef { position: relative; border: 2px dashed var(--koralle-text); background: #fff5f3; border-radius: var(--r-m); padding: 40px 18px 14px; margin: 0 0 1.5em; color: var(--text); }
.pruef::before { content: "Prüfvorbehalt " attr(data-pruef) " – in der Produktion ausgeblendet, bis freigegeben"; position: absolute; top: 0; left: 0; right: 0; background: var(--koralle-text); color: #fff; font: 700 .76rem/1.3 var(--sans); padding: 6px 12px; border-radius: 12px 12px 0 0; }
.pruef--inline { display: block; }
.abschnitt--navy .pruef, .kontaktband-abschnitt .pruef { color: var(--text); }
.abschnitt--navy .pruef h2, .abschnitt--navy .pruef h3 { color: var(--navy); }
.vorschau-hinweis { font-size: .85rem; color: var(--koralle-text); font-weight: 600; }

/* Seitenleiste */
.seitenleiste { display: grid; gap: 20px; }
@media (min-width: 960px) { .seitenleiste { position: sticky; top: calc(var(--kopf-hoehe) + 28px); } }

/* FAQ */
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 56px 22px 0; position: relative; font-family: var(--serif); font-weight: 540; color: var(--navy); font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; border: 1.5px solid var(--linie); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23193053' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .35s var(--ease), background-color .3s; }
.faq summary:hover::after { border-color: var(--navy); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--gold-licht); border-color: var(--gold); }
.faq details > div { padding: 0 48px 22px 0; color: var(--text-2); }

/* Anzeigen-Sonderseiten */
.pressebilder { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.pressebilder a { display: block; text-decoration: none; color: var(--text); }
.pressebilder img { border-radius: var(--r-m); box-shadow: var(--schatten-2); aspect-ratio: 3 / 4; object-fit: cover; object-position: top; width: 100%; background: #fff; transition: transform .5s var(--ease); }
.pressebilder a:hover img { transform: translateY(-4px) rotate(-.6deg); }
.pressebilder span { display: block; margin-top: 12px; font-family: var(--serif); font-weight: 560; color: var(--navy); font-size: 1.05rem; }
.pressebilder small { display: block; color: var(--text-2); font-size: .85rem; }

/* Standorte */
.standorte { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.standort { border: 1px solid var(--linie-hell); border-radius: var(--r-l); padding: 26px; background: var(--karte); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.standort:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.standort h3 { margin-bottom: .5em; }
.standort address { font-style: normal; color: var(--text-2); margin-bottom: 12px; }
.standort ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.standort li { margin: 0; }
.standort a { font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; min-height: 32px; }
.standort a:hover { text-decoration: underline; }
.standort svg { width: 16px; height: 16px; color: var(--gold-text); }

/* Spar-Beispiele */
.sparbeispiele { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.sparbeispiel { border: 1px solid var(--linie-hell); border-radius: var(--r-l); padding: 20px 22px; background: var(--karte); }
.sparbeispiel h3 { font-size: 1.12rem; margin-bottom: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.sparbeispiel h3 small { font-family: var(--sans); font-weight: 700; color: var(--erfolg); font-size: .85rem; white-space: nowrap; }
.sparbeispiel dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .93rem; }
.sparbeispiel dt { color: var(--text-2); }
.sparbeispiel dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.sparbeispiel .ersparnis { font-weight: 700; color: var(--erfolg); border-top: 1px solid var(--linie-hell); padding-top: 4px; }

/* Einwilligung */
.einwilligung-platzhalter { border: 1.5px dashed var(--navy-hell); border-radius: var(--r-l); padding: 24px; background: var(--karte); }
.einwilligung-platzhalter p { font-size: .95rem; }
.einwilligung-dialog { border: 0; border-radius: var(--r-l); padding: 0; max-width: 580px; width: calc(100% - 32px); box-shadow: var(--schatten-3); background: var(--karte); color: var(--text); }
.einwilligung-dialog::backdrop { background: rgba(10, 22, 40, .55); }
.einwilligung-dialog form { padding: 28px; }
.einwilligung-dialog h2 { font-size: 1.6rem; }
.schalter { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--linie-hell); }
.schalter input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--navy); flex: 0 0 22px; }
.schalter small { display: block; color: var(--text-2); }
.einbettung iframe { width: 100%; min-height: 700px; border: 0; border-radius: var(--r-l); background: #fff; }

/* Team-Seite und Übersichten */
.team-filter { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: end; margin-bottom: 32px; padding: 20px 22px; background: var(--karte); border: 1px solid var(--linie-hell); border-radius: var(--r-l); }
.team-filter label { display: grid; gap: 6px; font-weight: 620; font-size: .92rem; color: var(--navy); }
.team-filter select { min-width: 230px; }
.team-filter output { font-size: .92rem; color: var(--text-2); margin-left: auto; }
.person[hidden] { display: none; }
.uebersicht-themen { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.thema-zeile { display: grid; gap: 18px; padding: 34px 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 860px) { .thema-zeile { grid-template-columns: 76px 1fr 230px; align-items: start; } }
.thema-zeile h2 { font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); margin-bottom: .35em; }
.thema-zeile h2 a { text-decoration: none; }
.thema-zeile h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.thema-zeile p { margin: 0 0 .6em; color: var(--text-2); }
.thema-zeile__leitsatz { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--navy) !important; }
.thema-zeile__aktion { display: grid; gap: 10px; justify-items: start; }

/* 10 Formulare ------------------------------------------------------------------------------- */
.formular { display: grid; gap: 22px; }
.formular fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }
.formular legend { font-family: var(--serif); font-weight: 560; color: var(--navy); font-size: 1.3rem; margin-bottom: 4px; padding: 0; }
.feld { display: grid; gap: 6px; }
.feld label, .feld .label { font-weight: 620; color: var(--text); font-size: .97rem; }
.feld .pflicht { color: var(--koralle-text); font-weight: 700; }
.feld .optional { color: var(--text-2); font-weight: 500; font-size: .88rem; }
.feld__hilfe { font-size: .88rem; color: var(--text-2); margin: 0; }
.feld__fehler { font-size: .9rem; color: var(--fehler); font-weight: 600; margin: 0; display: none; }
.feld[data-fehler="true"] .feld__fehler { display: block; }
input[type="text"], input[type="email"], input[type="tel"], input[type="file"], select, textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border: 1.5px solid #a9a191; border-radius: 12px; background: #fff; color: var(--text);
  font: 500 1rem/1.4 var(--sans); transition: border-color .2s, box-shadow .2s;
}
input[type="file"] { padding: 11px; }
textarea { min-height: 150px; resize: vertical; }
select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23193053' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; padding-right: 44px; }
input:hover, select:hover, textarea:hover { border-color: var(--navy-hell); }
input:focus, select:focus, textarea:focus { border-color: var(--navy); outline: 3px solid rgba(31, 91, 214, .3); outline-offset: 1px; }
.feld[data-fehler="true"] input, .feld[data-fehler="true"] select, .feld[data-fehler="true"] textarea { border-color: var(--fehler); }
.feldgruppe { display: grid; gap: 16px; }
@media (min-width: 640px) { .feldgruppe--2 { grid-template-columns: 1fr 1fr; } }
.auswahl { display: grid; gap: 10px; }
@media (min-width: 640px) { .auswahl--3 { grid-template-columns: repeat(3, 1fr); } }
.auswahl label { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--linie); border-radius: 14px; cursor: pointer; font-weight: 620; color: var(--navy); background: #fff; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.auswahl label:hover { border-color: var(--navy-hell); }
.auswahl label small { display: block; font-weight: 500; color: var(--text-2); font-size: .86rem; }
.auswahl input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); flex: 0 0 20px; }
.auswahl label:has(input:checked) { border-color: var(--navy); background: var(--navy-50); box-shadow: inset 0 0 0 1px var(--navy); }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.zustimmung input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--navy); flex: 0 0 22px; }
.honig { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular__meldung { border-radius: 14px; padding: 16px 18px; display: none; }
.formular__meldung[data-art="erfolg"] { display: block; background: #eaf6ef; border: 1px solid #9fd2b4; color: #11452a; }
.formular__meldung[data-art="fehler"] { display: block; background: #fdeceb; border: 1px solid #f1aca5; color: #7a1a12; }
.formular__meldung[data-art="info"] { display: block; background: var(--navy-50); border: 1px solid var(--linie); color: var(--navy); }
.formular__meldung h3 { color: inherit; font-size: 1.15rem; margin-bottom: .3em; }
.formular__meldung p:last-child { margin-bottom: 0; }
.formular[aria-busy="true"] button[type="submit"] { opacity: .7; cursor: progress; }
.formular__hinweis { font-size: .9rem; color: var(--text-2); }
.formular-karte { background: var(--karte); border: 1px solid var(--linie-hell); border-radius: var(--r-xl); padding: clamp(22px, 3.4vw, 44px); box-shadow: var(--schatten-2); }

/* 11 Fußzeile ------------------------------------------------------------------------------------ */
.fuss { background: var(--navy-nacht); color: var(--text-hell); padding: clamp(56px, 8vw, 96px) 0 30px; font-size: .97rem; view-transition-name: fuss; }
.fuss a { color: #e6ecf5; text-decoration: none; }
.fuss a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); }
.fuss__raster { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .fuss__raster { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.fuss__logo img { height: 52px; width: auto; margin-bottom: 12px; }
.fuss__slogan { font-family: var(--schrift); color: #f08a7c; font-size: 2rem; line-height: 1; margin: 0 0 20px; }
.fuss address { font-style: normal; margin-bottom: 14px; line-height: 1.65; }
.fuss h2 { font-family: var(--serif); color: #fff; font-size: 1.15rem; font-weight: 540; margin-bottom: 14px; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fuss li { margin: 0; }
.fuss__unten { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--linie-navy); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; font-size: .88rem; }
.fuss__unten ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fuss__einstellungen { background: none; border: 0; color: #e6ecf5; font: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.fuss__kontakt a { display: inline-flex; gap: 10px; align-items: center; min-height: 32px; }
.fuss__kontakt svg { width: 16px; height: 16px; color: var(--gold); }

/* 12 Hilfsklassen -------------------------------------------------------------------------------- */
.zentriert { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-l { margin-top: clamp(32px, 4vw, 56px); }
.klein { font-size: .9rem; color: var(--text-2); }
.extern::after { content: " ↗"; font-size: .85em; }

/* 13 Bewegung --------------------------------------------------------------------------------------
   Elemente sind ohne JavaScript immer sichtbar. Nur wenn nwf-frueh.js die Klasse „bewegung“ setzt
   (kein „weniger Bewegung“, kein Crawler), werden Auftritte vorbereitet; nach 3 s greift ein Notausgang. */
.bewegung [data-auftritt] { opacity: 0; }
.bewegung [data-auftritt="zeilen"] { opacity: 1; }
/* Startbühne und Seitenköpfe: Auftritt rein per CSS ab dem ersten Bild (kein Warten auf JavaScript, gut für LCP) */
.h1-wort { display: inline-block; overflow: clip; padding: 0 .1em .17em 0; margin: 0 -.1em -.17em 0; vertical-align: top; }
.h1-wort > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .bewegung .h1-wort > span { animation: wort-hoch 1.25s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--intro-verzug, 0s) + 60ms + var(--i, 0) * 75ms); }
  .bewegung :is(.buehne, .seitenkopf) :is(.kicker, .seitenkopf__symbol) { animation: auftauchen .9s var(--ease) var(--intro-verzug, 0s) both; }
  .bewegung :is(.buehne, .seitenkopf) :is(.buehne__lead, .seitenkopf__lead) { animation: gleiten 1.1s var(--ease) calc(var(--intro-verzug, 0s) + .2s) both; }
  .bewegung :is(.buehne, .seitenkopf) .knopf-gruppe { animation: auftauchen 1s var(--ease) calc(var(--intro-verzug, 0s) + .38s) both; }
  .bewegung .buehne__nebenlinks, .bewegung .buehne__unterschrift { animation: auftauchen 1s var(--ease) calc(var(--intro-verzug, 0s) + .5s) both; }
  .bewegung .buehne__bogen { animation: bogen-auf 1.5s cubic-bezier(.77, 0, .18, 1) calc(var(--intro-verzug, 0s) + .08s) both; }
  .bewegung .buehne__bilder { animation: aufsteigen 1.3s var(--ease) calc(var(--intro-verzug, 0s) + .5s) both; }
  .bewegung .buehne__schild { animation: auftauchen .9s var(--ease) calc(var(--intro-verzug, 0s) + .95s) both; }
  .bewegung .buehne__notiz { animation: auftauchen .9s var(--ease) calc(var(--intro-verzug, 0s) + 1.1s) both; }
  .bewegung .buehne__steuerung, .bewegung .buehne__fortschritt { animation: auftauchen .9s var(--ease) calc(var(--intro-verzug, 0s) + 1.2s) both; }
  .bewegung .seitenkopf__bild { animation: bild-auf 1.5s var(--ease) calc(var(--intro-verzug, 0s) + .15s) both; }
  .bewegung .seitenkopf__bild img { animation: bild-zoom 2s var(--ease) calc(var(--intro-verzug, 0s) + .15s) both; }
}
@keyframes wort-hoch { from { transform: translateY(112%) rotate(8deg); transform-origin: 0 100%; } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(22px); } }
@keyframes gleiten { from { transform: translateY(18px); } }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(16%); } }
@keyframes bogen-auf { from { clip-path: inset(100% 0 0 0 round 999px 999px 32px 32px); } to { clip-path: inset(0 0 0 0 round 999px 999px 32px 32px); } }
@keyframes bild-auf { from { clip-path: inset(10% 7% 10% 7% round 32px); opacity: 0; } to { clip-path: inset(0 0 0 0 round 32px); opacity: 1; } }
@keyframes bild-zoom { from { transform: scale(1.14); } }
/* SplitText-Masken: Polster unten/rechts, damit Unterlängen (g, p, y) und kursive Überhänge nicht abgeschnitten werden */
.zeile-mask { padding: 0 .12em .16em 0; margin: 0 -.12em -.16em 0; }
.bewegung-fertig [data-auftritt] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 520ms cubic-bezier(.77, 0, .18, 1) both seite-raus; }
  ::view-transition-new(root) { animation: 720ms cubic-bezier(.77, 0, .18, 1) both seite-rein; }
  @keyframes seite-raus { to { opacity: .35; transform: scale(.93) translateY(-2%); border-radius: 32px; } }
  @keyframes seite-rein { from { clip-path: inset(100% 0 0 0 round 40px 40px 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 15 Interaktion ------------------------------------------------------------------------------------- */
/* Themenfinder */
.finder { display: grid; gap: clamp(18px, 3vw, 40px); align-items: start; grid-template-columns: minmax(0, 1fr); }
.finder > * { min-width: 0; }
@media (min-width: 960px) { .finder { grid-template-columns: minmax(280px, 4fr) 7fr; } }
.finder__wahl { display: grid; gap: 8px; }
.finder__knopf { position: relative; display: grid; grid-template-columns: 34px 1fr 24px; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 16px 18px; border-radius: var(--r-m); border: 1px solid var(--linie-hell); background: var(--karte); color: var(--navy); font: 540 clamp(1.05rem, 1rem + .3vw, 1.2rem)/1.25 var(--serif); cursor: pointer; transition: background-color .35s, color .35s, border-color .35s, transform .45s var(--ease), box-shadow .35s; }
.finder__knopf:hover { border-color: var(--linie); transform: translateX(4px); }
.finder__knopf[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--schatten-2); transform: translateX(8px); }
.finder__nr { font: italic 420 .95rem/1 var(--serif); color: var(--gold-text); }
.finder__knopf[aria-selected="true"] .finder__nr { color: var(--gold-hell); }
.finder__pfeil { width: 20px; height: 20px; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .45s var(--ease); color: var(--gold-hell); }
.finder__knopf[aria-selected="true"] .finder__pfeil { opacity: 1; transform: none; }
@media (max-width: 959px) {
  .finder__wahl { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
  .finder__knopf { grid-template-columns: auto 1fr; scroll-snap-align: start; padding: 12px 16px; }
  .finder__knopf[aria-selected="true"], .finder__knopf:hover { transform: none; }
  .finder__pfeil { display: none; }
}
.finder__felder { position: relative; }
.finder__feld { position: relative; background: var(--navy); color: var(--text-hell); border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 44px); box-shadow: var(--schatten-3); overflow: hidden; isolation: isolate; }
.finder__feld + .finder__feld { margin-top: 18px; }
.finder__feld::before { content: ""; position: absolute; z-index: -1; width: 520px; aspect-ratio: 1; right: -200px; top: -240px; border-radius: 50%; border: 1.5px solid rgba(216, 196, 140, .25); }
.finder.ist-bereit .finder__feld { display: none; margin-top: 0; }
.finder.ist-bereit .finder__feld.ist-aktiv { display: block; animation: feld-rein .7s var(--ease) both; }
.finder__feld:focus-visible { outline-offset: 4px; }
.finder__text { font: 420 clamp(1.15rem, 1.05rem + .5vw, 1.45rem)/1.4 var(--serif); color: #fff; max-width: 34em; margin-bottom: 22px; }
.finder__themen { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.finder__themen li { margin: 0; }
.finder__themen a { display: grid; grid-template-columns: 44px 1fr 36px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-m); background: rgba(255, 255, 255, .06); border: 1px solid var(--linie-navy); color: #fff; text-decoration: none; transition: background-color .3s, border-color .3s, transform .45s var(--ease); }
.finder__themen a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(216, 196, 140, .55); transform: translateX(6px); color: #fff; }
.finder__themen .symbol { width: 40px; height: 40px; color: #fff; }
.finder__themen .symbol .akzent { color: var(--gold-hell); }
.finder__themen strong { display: block; font: 540 1.12rem/1.3 var(--serif); }
.finder__themen small { display: block; color: var(--text-hell); font-size: .88rem; }
.finder__themen .pfeil { width: 18px; height: 18px; box-sizing: content-box; padding: 8px; border-radius: 50%; border: 1px solid var(--linie-navy); transition: background-color .3s, color .3s, transform .4s var(--ease); }
.finder__themen a:hover .pfeil { background: var(--gold); color: var(--navy-nacht); border-color: var(--gold); transform: rotate(-35deg); }
.finder__leute { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--linie-navy); }
.finder__label { font: italic 420 1rem/1 var(--serif); color: var(--gold-hell); }
.finder__hinweis { margin: 0; color: var(--text-hell); }
.finder__avatare { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.finder__avatare li { margin: 0; }
.finder__avatare a { display: flex; gap: 12px; align-items: center; text-decoration: none; color: #fff; }
.finder__avatare a:hover strong { text-decoration: underline; text-decoration-color: var(--gold); }
.finder__avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: radial-gradient(90% 70% at 50% 30%, #2a4672 0%, #193053 58%, #10223d 100%); border: 1.5px solid rgba(216, 196, 140, .55); flex: 0 0 56px; transition: transform .45s var(--ease); }
.finder__avatare a:hover .finder__avatar { transform: scale(1.08); }
.finder__avatar img { width: 100%; height: 100%; object-fit: cover; }
.finder__avatare strong { display: block; font: 560 1rem/1.2 var(--serif); }
.finder__avatare small { display: block; font-size: .82rem; color: var(--text-hell); line-height: 1.35; }
.finder__leute .knopf-gruppe { margin-top: 4px; }
.finder.ist-bereit .finder__feld.ist-aktiv :is(.finder__themen li, .finder__avatare li) { animation: auftauchen .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes feld-rein { from { opacity: 0; transform: translateY(16px) scale(.985); } }

/* Zahlenband */
.zahlenband { background: var(--navy-tief); color: var(--text-hell); overflow: hidden; }
.zahlenband h2 { color: #fff; }
.zahlenband h2 em { color: var(--gold-hell); }
.zahlenband .kicker { color: var(--gold-hell); }
.zahlen { display: grid; gap: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); border-top: 1px solid var(--linie-navy); }
.zahlen > div { padding: 28px 22px 8px 0; border-bottom: 1px solid var(--linie-navy); }
@media (min-width: 900px) { .zahlen > div { border-bottom: 0; } .zahlen > div + div { border-left: 1px solid var(--linie-navy); padding-left: 22px; } }
.zahlen dt { font: 400 clamp(2.5rem, 1.7rem + 2.4vw, 3.9rem)/1 var(--serif); color: #fff; letter-spacing: -.035em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.zahlen__einheit { font-size: .45em; letter-spacing: 0; color: var(--gold-hell); font-style: italic; }
.zahlen dd { margin: 12px 0 0; color: var(--text-hell); font-size: .95rem; line-height: 1.45; }
.zahl-zitat { display: flex; gap: 18px; align-items: center; margin: 28px 0 0; padding: 22px 24px; background: var(--navy); color: var(--text-hell); border-radius: var(--r-l); }
.zahl-zitat strong { font: 400 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1 var(--serif); color: var(--gold-hell); letter-spacing: -.03em; }
.zahl-zitat strong::after { content: "+"; }

/* Abschnitte, die sich beim Scrollen auf volle Breite öffnen */
[data-ausdehnen] { transform-origin: 50% 0; }

/* Themenliste: Vorschau-Porträt folgt der Maus */
.themen-vorschau { position: fixed; left: 0; top: 0; z-index: 50; width: 220px; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r-l) var(--r-l); overflow: hidden; pointer-events: none; opacity: 0; background: radial-gradient(90% 70% at 50% 30%, #2a4672 0%, #193053 58%, #10223d 100%); box-shadow: var(--schatten-3); }
.themen-vorschau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%); mask-image: linear-gradient(to bottom, #000 74%, transparent 99%); }
.themen-vorschau span { position: absolute; left: 10px; right: 10px; bottom: 10px; background: var(--karte); color: var(--navy); border-radius: 10px; padding: 6px 10px; font: 560 .9rem/1.2 var(--serif); text-align: center; }

/* Teamkachel: Zitat beim Zeigen */
.kachel__zitat { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; background: rgba(247, 244, 237, .97); color: var(--navy); border-radius: 14px; padding: 12px 14px; font: italic 420 .95rem/1.4 var(--serif); transform: translateY(calc(100% + 16px)); transition: transform .55s var(--ease); box-shadow: var(--schatten-2); }
.kachel:hover .kachel__zitat, .kachel:focus-visible .kachel__zitat { transform: none; }

/* Ablauf: aktiver Schritt */
.ablauf--bewegt li::before { transition: color .6s var(--ease); }
.ablauf--bewegt li.ist-aktiv::before { color: var(--gold); }
.ablauf--bewegt li h3 { transition: transform .6s var(--ease); }
.ablauf--bewegt li.ist-aktiv h3 { transform: translateX(6px); }

/* Videos: großer Startknopf */
.video__start { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border: 0; padding: 0; background: rgba(10, 22, 40, .18); cursor: pointer; transition: background-color .35s; }
.video__start:hover { background: rgba(10, 22, 40, .3); }
.video__start span { position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--gold); color: var(--navy-nacht); display: grid; place-items: center; box-shadow: var(--schatten-3); transition: transform .45s var(--ease); }
.video__start span::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(216, 196, 140, .7); animation: welle 2.4s var(--ease) infinite; }
.video__start:hover span { transform: scale(1.08); }
.video__start svg { width: 30px; height: 30px; margin-left: 4px; }
.video__start[hidden] { display: none; }
@keyframes welle { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* Neigung von Karten (nur Maus) */
.neigung { transform-style: preserve-3d; will-change: transform; transition-property: box-shadow, border-color, background-color, color !important; }

/* Schnellkontakt auf dem Handy */
.schnellkontakt { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: none; gap: 10px; padding: 8px; border-radius: 18px; background: rgba(247, 244, 237, .96); box-shadow: var(--schatten-3); border: 1px solid var(--linie-hell); transform: translateY(140%); transition: transform .5s var(--ease); }
.schnellkontakt .knopf { min-height: 48px; }
.schnellkontakt .knopf--primaer { flex: 1; }
.schnellkontakt__tel { width: 56px; padding: 0; }
.schnellkontakt[data-sichtbar="true"] { transform: none; }
@media (max-width: 759px) { .schnellkontakt { display: flex; } }

/* FAQ öffnet sich weich (moderne Browser) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* 16 Spezialgebiete und große Effekte (Fassung 4) ------------------------------------------------- */
/* Spezialgebiete */
.spezial { margin: 6px 0 2px; }
.spezial__titel { display: block; font: italic 420 .9rem/1.2 var(--serif); color: var(--gold-text); margin-bottom: 6px; }
.spezial ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.spezial li { margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 8px; background: var(--navy); color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.2; letter-spacing: .005em; }
.spezial li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: 0 0 6px; }
.kachel .spezial { margin-top: 10px; }
.kachel .spezial li { background: transparent; color: var(--navy); border: 1px solid var(--linie); }
.person-mini__spezial { color: var(--gold-text) !important; font-weight: 600; }
.buehne__spezial { display: block; margin-top: 4px; font: italic 440 .92rem/1.3 var(--serif); color: var(--gold-text); }
.buehne__spezial[hidden] { display: none; }

/* Intro-Vorhang – nur beim ersten Seitenaufruf je Sitzung */
.intro { display: none; }
.intro-aktiv .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 3000; background: var(--navy-nacht); pointer-events: none; animation: intro-weg 1s cubic-bezier(.77, 0, .18, 1) 1.55s forwards; }
.intro__inhalt { display: grid; justify-items: center; gap: 14px; }
.intro__inhalt img { width: min(300px, 62vw); height: auto; animation: intro-logo 1s var(--ease) .05s both; }
.intro__slogan { font: 400 clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem)/1 var(--schrift); color: #f08a7c; animation: intro-schrift 1s cubic-bezier(.65, 0, .35, 1) .55s both; }
.intro__linie { width: min(260px, 60vw); height: 1.5px; background: var(--gold); transform-origin: 0 50%; animation: intro-linie 1.4s cubic-bezier(.65, 0, .35, 1) .1s both; }
@keyframes intro-weg { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes intro-logo { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes intro-schrift { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes intro-linie { from { transform: scaleX(0); } }
/* Startbühne wartet, bis der Vorhang hochgeht */
.intro-aktiv { --intro-verzug: 1.75s; }

/* Riesige Hintergrundschrift in der Startbühne */
.buehne__riesenschrift { position: absolute; left: 0; right: 0; bottom: clamp(0px, 2vw, 30px); z-index: 0; pointer-events: none; overflow: hidden; }
.buehne__riesenschrift .laufband__spur span { font: italic 300 clamp(7rem, 4rem + 13vw, 19rem)/.9 var(--serif); color: transparent; -webkit-text-stroke: 1.2px rgba(25, 48, 83, .1); padding-right: .25em; letter-spacing: -.03em; white-space: nowrap; }
.buehne__riesenschrift .laufband__spur span::after { display: none; }
.buehne .huelle { position: relative; z-index: 1; }

/* Experten-Laufband */
.experten-band { overflow: hidden; background: var(--papier-hoch); border-top: 1px solid var(--linie); padding: 26px 0 0; }
.experten-band .laufband__spur { display: flex; width: max-content; }
.experte { display: inline-flex; align-items: center; gap: 14px; padding: 10px 40px 10px 10px; white-space: nowrap; }
.experte img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: radial-gradient(90% 70% at 50% 30%, #2a4672 0%, #193053 58%, #10223d 100%); border: 1.5px solid var(--gold); }
.experte b { font: 560 1.3rem/1.1 var(--serif); color: var(--navy); }
.experte i { font: italic 420 1.2rem/1.1 var(--serif); color: var(--gold-text); }
.experte i::before { content: "– "; color: var(--linie); }

/* Experten-Bühne: am Desktop seitwärts beim Scrollen */
.schiene-alle { display: none; }
.ist-gepinnt { padding-top: 40px; padding-bottom: 40px; }
.ist-gepinnt .kopfzeile { margin-bottom: clamp(20px, 3vh, 40px); }
.ist-gepinnt .kopfzeile p, .ist-gepinnt .team-knopf, .ist-gepinnt .schiene-steuerung { display: none; }
.ist-gepinnt .schiene-alle { display: inline-flex; }
.ist-gepinnt .schiene { overflow: visible; scroll-snap-type: none; cursor: none; grid-auto-columns: clamp(200px, min(22vw, calc((100vh - 470px) * .8)), 320px); will-change: transform; padding-bottom: 8px; }
.ist-gepinnt .kachel .portraet { will-change: transform; }

/* Zahlenwalzen */
.walze { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; line-height: 1; }
.walze__spur { display: flex; flex-direction: column; }
.walze__spur span { display: block; height: 1em; line-height: 1; }

/* Eigener Zeiger (nur Maus) */
.zeiger { position: fixed; left: 0; top: 0; z-index: 2500; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 1.5px solid var(--gold); pointer-events: none; display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .3s, border-color .3s, opacity .3s; opacity: 0; }
.zeiger.ist-sichtbar { opacity: 1; }
.zeiger.ist-aktiv { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(186, 163, 95, .14); }
.zeiger.hat-text { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--gold); border-color: var(--gold); }
.zeiger__text { font: 640 .78rem/1 var(--sans); letter-spacing: .02em; color: var(--navy-nacht); opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--ease); }
.zeiger.hat-text .zeiger__text { opacity: 1; transform: none; }
.zeiger__punkt { position: fixed; left: 0; top: 0; z-index: 2501; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--gold); pointer-events: none; opacity: 0; transition: opacity .3s; }
.zeiger__punkt.ist-sichtbar { opacity: 1; }

/* Knöpfe: Farbwischer */
.knopf--primaer::before, .knopf--gold::before, .knopf--sekundaer::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--ease); }
.knopf--primaer::before { background: var(--gold); }
.knopf--gold::before { background: #fff; }
.knopf--sekundaer::before { background: var(--navy); }
.knopf--primaer:hover::before, .knopf--gold:hover::before, .knopf--sekundaer:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.knopf--primaer:hover { background: var(--navy); color: var(--navy-nacht); }
.knopf--primaer:hover svg { color: var(--navy-nacht); }
.knopf--gold:hover { background: var(--gold); color: var(--navy-nacht); }
.knopf--sekundaer:hover { background: transparent; color: #fff; }

/* 17 Spezialthemen, Profile, Bento (Fassung 5) ---------------------------------------------------- */
/* Bento-Raster */
.bento { display: grid; gap: clamp(12px, 1.6vw, 18px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
@media (min-width: 900px) {
  .bento--blick { grid-template-columns: 1.3fr 1fr 1fr; }
  .bento--blick .bento__karte--gross { grid-row: span 2; }
  .bento--spezial { grid-template-columns: repeat(2, 1fr); }
  .bento--drei { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1180px) { .bento--spezial { grid-template-columns: repeat(4, 1fr); } }
.bento__karte { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-l); background: var(--karte); border: 1px solid var(--linie-hell); color: var(--text); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.bento__karte h3 { margin: 0; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }
.bento__karte p { margin: 0; color: var(--text-2); font-size: .96rem; }
.bento__karte > .symbol { width: 44px; height: 44px; }
.bento__nr { font: italic 420 1rem/1 var(--serif); color: var(--gold-text); }
.bento__karte--navy { background: var(--navy); border-color: var(--navy); color: var(--text-hell); }
.bento__karte--navy h3 { color: #fff; }
.bento__karte--navy p { color: var(--text-hell); }
.bento__karte--navy > .symbol { color: #fff; }
.bento__karte--navy > .symbol .akzent { color: var(--gold-hell); }
.bento__karte--navy::before { content: ""; position: absolute; z-index: -1; width: 420px; aspect-ratio: 1; right: -160px; bottom: -200px; border-radius: 50%; border: 1.5px solid rgba(216, 196, 140, .3); }
.bento__karte--gross h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); }
.bento__leitsatz { font: italic 420 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1.3 var(--serif) !important; color: #fff !important; margin: auto 0 0 !important; }
a.bento__karte--link:hover { transform: translateY(-6px); box-shadow: var(--schatten-2); border-color: var(--linie); text-decoration: none; color: var(--text); }
a.bento__karte--navy:hover { color: var(--text-hell); border-color: var(--navy); }
.bento__aktion { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 10px; font-weight: 640; color: var(--navy); }
.bento__karte--navy .bento__aktion { color: #fff; }
.bento__aktion svg { width: 18px; height: 18px; box-sizing: content-box; padding: 8px; border-radius: 50%; border: 1.5px solid currentColor; transition: transform .4s var(--ease), background-color .3s, color .3s; }
a.bento__karte--link:hover .bento__aktion svg { transform: translateX(4px); background: var(--navy); color: #fff; border-color: var(--navy); }
a.bento__karte--navy:hover .bento__aktion svg { background: var(--gold); color: var(--navy-nacht); border-color: var(--gold); }
.bento__experten { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; margin-top: 6px; }
.bento__experten img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: radial-gradient(90% 70% at 50% 30%, #2a4672 0%, #193053 58%, #10223d 100%); border: 2px solid var(--karte); margin-right: -14px; }
.bento__karte--navy .bento__experten img { border-color: var(--navy); }
.bento__experten small { margin-left: 18px; font-size: .84rem; font-weight: 600; color: var(--gold-text); }
.bento__karte--navy .bento__experten small { color: var(--gold-hell); }

/* Experten-Reihe im Seitenkopf */
.experten-reihe { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 22px; }
.experten-reihe li { margin: 0; }
.experten-reihe a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.experten-reihe img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: radial-gradient(90% 70% at 50% 30%, #2a4672 0%, #193053 58%, #10223d 100%); border: 1.5px solid var(--gold); transition: transform .45s var(--ease); }
.experten-reihe a:hover img { transform: scale(1.08); }
.experten-reihe strong { display: block; font: 560 1.05rem/1.2 var(--serif); color: var(--navy); }
.experten-reihe small { display: block; font-size: .84rem; color: var(--gold-text); font-weight: 600; }

/* Inhaltsleiste (bleibt beim Lesen oben stehen) */
.inhaltsleiste { max-width: 100%; position: sticky; top: calc(var(--kopf-hoehe) + 10px); z-index: 20; margin: 0 0 clamp(28px, 4vw, 44px); padding: 10px 12px; border-radius: var(--r-m); background: rgba(247, 244, 237, .95); border: 1px solid var(--linie-hell); box-shadow: var(--schatten-1); display: flex; align-items: center; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.inhaltsleiste::-webkit-scrollbar { display: none; }
.inhaltsleiste__titel { flex: 0 0 auto; font: italic 420 .92rem/1 var(--serif); color: var(--gold-text); padding-left: 4px; }
.inhaltsleiste ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.inhaltsleiste li { margin: 0; flex: 0 0 auto; }
.inhaltsleiste a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 10px; font-size: .88rem; font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s; }
.inhaltsleiste a:hover { background: var(--papier-hoch); }
.inhaltsleiste a[aria-current="true"] { background: var(--navy); color: #fff; }

/* Zeitleiste „So gehen wir vor“ */
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 18px; }
.zeitleiste::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 1.5px; background: var(--linie); }
.zeitleiste li { margin: 0; position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start; }
.zeitleiste__nr { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font: 500 1.2rem/1 var(--serif); position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--papier); }
.zeitleiste h3 { margin: 10px 0 .3em; }
.zeitleiste p { margin: 0; color: var(--text-2); }
.fragenliste--kompakt li { font-size: 1rem; padding: 12px 14px 12px 44px; }
.fragenliste--kompakt li::before { left: 14px; top: 11px; }
.karte .haken li { font-size: .97rem; }

/* Experten-Karte in der Seitenleiste */
.experten-karte h2 { margin: 16px 0 4px; }
.experten-karte h2 a { text-decoration: none; }
.experten-karte h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.portraet--klein { display: block; aspect-ratio: 4 / 4.2; border-radius: var(--r-m); }

/* Profilseite */
.profil-kopf__titel { display: block; font: 600 .9rem/1 var(--sans); color: var(--gold-text); margin-bottom: 8px; letter-spacing: .02em; }
.profil-kopf .spezial { margin: 18px 0 0; }
.profil-kopf .spezial li { font-size: .88rem; padding: 7px 13px 7px 11px; }
.profil-zitat { margin: 24px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--gold); }
.profil-zitat p { margin: 0; font: italic 420 clamp(1.2rem, 1.05rem + .6vw, 1.5rem)/1.4 var(--serif); color: var(--navy); }
.profil-kopf .knopf-gruppe { margin-top: 28px; }
.kopf-portraet--profil .buehne__portraet { width: min(100%, 440px); }
@media (max-width: 899px) { .kopf-portraet--profil { display: block; max-width: 340px; } }
.kachel-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.kachel-raster li { margin: 0; }
.person__name a { text-decoration: none; }
.person__name a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.person__profil { margin-top: 12px; align-self: flex-start; font-size: .95rem; }

/* Megamenü: Gruppenüberschrift */
.megamenue__gruppe { grid-column: 1 / -1; margin: 12px 12px 2px; padding-top: 14px; border-top: 1px solid var(--linie-hell); font: italic 420 1rem/1 var(--serif); color: var(--gold-text); }
@media (max-width: 1099px) { .megamenue__gruppe { margin-left: 0; } }

/* 18 Traditionsmakler – Tiefen-Grafik (Startseite) -------------------------------------------------- */
.tiefe { position: relative; background: var(--navy-nacht); color: var(--text-hell); padding: var(--abstand) 0; overflow: clip; isolation: isolate; }
.tiefe::before { content: ""; position: absolute; z-index: -1; width: 900px; aspect-ratio: 1; right: -320px; top: -260px; border-radius: 50%; border: 1px solid rgba(216, 196, 140, .12); box-shadow: 0 0 0 120px rgba(216, 196, 140, .025), 0 0 0 240px rgba(216, 196, 140, .02); }
.tiefe h2 { color: #fff; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem); }
.tiefe h2 em { display: block; color: var(--gold-hell); }
.tiefe .kicker { color: var(--gold-hell); }
.tiefe__raster { display: grid; gap: clamp(36px, 5vw, 80px); }
@media (min-width: 1000px) { .tiefe__raster { grid-template-columns: 1.05fr .95fr; align-items: start; } }
.tiefe__lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--text-hell); max-width: 36em; }
.tiefe__zahlen { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 30px 0 34px; padding: 22px 0; border-block: 1px solid var(--linie-navy); }
.tiefe__zahlen div { margin: 0; }
.tiefe__zahlen dt { font: 400 clamp(2.3rem, 1.7rem + 2vw, 3.3rem)/1 var(--serif); color: #fff; letter-spacing: -.03em; }
.tiefe__zahlen dd { margin: 8px 0 0; font-size: .88rem; color: var(--text-hell); }
.tiefe__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tiefe__liste li { margin: 0; display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 14px 16px; border-radius: 14px; border-left: 2px solid rgba(216, 196, 140, .25); transition: background-color .45s var(--ease), border-color .45s, transform .45s var(--ease); }
.tiefe__liste li.ist-aktiv { background: rgba(255, 255, 255, .07); border-left-color: var(--gold); transform: translateX(6px); }
.tiefe__nr { font: italic 420 1.05rem/1.35 var(--serif); color: var(--gold-hell); }
.tiefe__liste strong { display: block; color: #fff; font: 560 1.08rem/1.3 var(--serif); }
.tiefe__liste li > div > span { display: block; margin-top: 3px; font-size: .9rem; line-height: 1.5; color: var(--text-hell); }
.tiefe__grafik { position: relative; padding-top: 44px; }
@media (min-width: 1000px) { .tiefe__grafik { position: sticky; top: calc(var(--kopf-hoehe) + 5vh); } .tiefe__svg { max-height: calc(100vh - var(--kopf-hoehe) - 13vh - 44px); } }
.tiefe__ort { position: absolute; left: 0; top: 0; margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--gold-hell); }
.tiefe__ort svg { width: 16px; height: 16px; }
.tiefe__messer { position: absolute; right: 0; top: 0; display: flex; align-items: baseline; gap: 8px; font-family: var(--serif); }
.tiefe__messer span { font-style: italic; font-size: .95rem; color: var(--gold-hell); }
.tiefe__messer b { font-weight: 400; font-size: 2.2rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.tiefe__messer i { font-size: .95rem; color: var(--text-hell); }
.tiefe__svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; }
.schicht__oben { fill: #1b355b; stroke: rgba(216, 196, 140, .5); stroke-width: 1; }
.schicht__links { fill: #10223d; stroke: rgba(216, 196, 140, .18); stroke-width: 1; }
.schicht__rechts { fill: #0b1830; stroke: rgba(216, 196, 140, .18); stroke-width: 1; }
.schicht__licht { fill: var(--gold); opacity: .92; transition: opacity .6s var(--ease); }
.schicht__nr { font: italic 500 22px var(--serif); fill: var(--navy-nacht); transition: fill .5s; }
.schicht.ist-dunkel .schicht__licht { opacity: 0; }
.schicht.ist-dunkel .schicht__nr { fill: var(--gold-hell); }
.tiefe__lot { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.tiefe__senkblei { fill: var(--gold); stroke: var(--navy-nacht); stroke-width: 3; }

/* 19 Rechner, Reiter und Standortkarte (Fassung 6) ----------------------------------------------- */
.reiter__leiste { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.reiter__knopf { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 14px; border: 1px solid var(--linie-hell); background: var(--karte); color: var(--navy); font: 560 clamp(1rem, .95rem + .3vw, 1.15rem)/1.2 var(--serif); cursor: pointer; transition: background-color .35s, color .35s, border-color .35s, box-shadow .35s, transform .4s var(--ease); }
.reiter__knopf:hover { transform: translateY(-2px); border-color: var(--linie); }
.reiter__knopf svg { width: 26px; height: 26px; flex: 0 0 26px; }
.reiter__knopf[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--schatten-2); }
.reiter__knopf[aria-selected="true"] .akzent { color: var(--gold-hell); }
.reiter__feld[hidden] { display: none; }
.reiter__feld + .reiter__feld { margin-top: 18px; }
.reiter.ist-bereit .reiter__feld + .reiter__feld { margin-top: 0; }
.reiter.ist-bereit .reiter__feld:not([hidden]) { animation: feld-rein .6s var(--ease) both; }

.rechner { position: relative; display: grid; gap: clamp(22px, 3vw, 40px); padding: clamp(22px, 3.4vw, 44px); border-radius: var(--r-xl); background: var(--navy); color: var(--text-hell); box-shadow: var(--schatten-3); overflow: hidden; isolation: isolate; }
.rechner::before { content: ""; position: absolute; z-index: -1; width: 620px; aspect-ratio: 1; right: -240px; top: -300px; border-radius: 50%; border: 1.5px solid rgba(216, 196, 140, .2); }
@media (min-width: 960px) { .rechner { grid-template-columns: 5fr 7fr; align-items: start; } }
.rechner__fazit, .rechner__hinweis { grid-column: 1 / -1; }
.rechner__eingaben { display: grid; gap: 24px; }
.rechner__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.rechner__kopf label { font-weight: 600; color: #fff; font-size: .97rem; }
.rechner__kopf output { font: 500 1.5rem/1 var(--serif); color: var(--gold-hell); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rechner input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; padding: 0; border: 0; min-height: 0; background: transparent; cursor: pointer; --fuellung: 50%; }
.rechner input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--gold) 0 var(--fuellung), rgba(255, 255, 255, .2) var(--fuellung) 100%); }
.rechner input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: #fff; border: 4px solid var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); transition: transform .2s var(--ease); }
.rechner input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); }
.rechner input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .2); }
.rechner input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--gold); }
.rechner input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.rechner input[type="range"]:focus { outline: none; }
.rechner input[type="range"]:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 4px; border-radius: 8px; }

.rechner__balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.rechner__balken li { margin: 0; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "label zahlen" "spur spur"; gap: 10px 14px; align-items: end; }
.rechner__label { grid-area: label; font: italic 420 1.05rem/1.2 var(--serif); color: var(--gold-hell); }
.rechner__zahlen { grid-area: zahlen; text-align: right; }
.rechner__zahlen strong { display: block; font: 500 clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem)/1 var(--serif); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.rechner__zahlen small { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--text-hell); font-size: .82rem; }
.rechner__zahlen small::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.rechner__spur { grid-area: spur; position: relative; height: 16px; border-radius: 10px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rechner__wert, .rechner__eingezahlt { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--anteil) * 100%); border-radius: 10px; transition: width .8s var(--ease); }
.rechner__wert { background: var(--gold); }
.rechner__eingezahlt { background: rgba(255, 255, 255, .55); }
.rechner__fazit { margin: 0; padding-top: 20px; border-top: 1px solid var(--linie-navy); font: italic 420 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.4 var(--serif); color: #fff; }
.rechner__hinweis { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-hell); }
.rechner__ergebnis { display: grid; gap: 12px; align-content: start; justify-items: start; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-l); background: rgba(255, 255, 255, .05); border: 1px solid var(--linie-navy); }
.rechner__ergebnis-titel { font: italic 420 1.1rem/1.2 var(--serif); color: var(--gold-hell); }
.rechner__gross { font: 400 clamp(2.6rem, 1.8rem + 3.6vw, 5.2rem)/1 var(--serif); color: #fff; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.rechner__unter { color: var(--text-hell); font-size: 1rem; }
.rechner__ergebnis .knopf { margin-top: 8px; }
.fliesstext-spalte .rechner { margin-top: 8px; }
@media (min-width: 960px) { .fliesstext-spalte .rechner { grid-template-columns: 1fr; } }

/* Fachportale der Berater */
.fachportal__raster { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 1000px) { .fachportal__raster { grid-template-columns: 6fr 5fr; } }
.fachportal__text p { max-width: 38em; }
.fachportal__text .knopf { margin-top: 10px; }
.fachportal__link { font-weight: 600; }
.fachportal__liste { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-l); background: var(--karte); border: 1px solid var(--linie-hell); }
.fachportal__liste-titel { margin: 0 0 12px; font: italic 420 1.05rem/1.3 var(--serif); color: var(--gold-text); }
.fachportal__liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fachportal__liste li { margin: 0; border-bottom: 1px solid var(--linie-hell); }
.fachportal__liste li:last-child { border-bottom: 0; }
.fachportal__liste a { display: grid; grid-template-columns: 1fr 18px; gap: 2px 12px; padding: 12px 6px; border-radius: 10px; text-decoration: none; color: var(--text); transition: background-color .3s, padding .4s var(--ease); }
.fachportal__liste a:hover { background: rgba(186, 163, 95, .1); padding-left: 12px; }
.fachportal__liste strong { grid-column: 1; font: 560 1.05rem/1.3 var(--serif); color: var(--navy); }
.fachportal__liste span { grid-column: 1; font-size: .9rem; line-height: 1.45; color: var(--text-2); }
.fachportal__liste svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; color: var(--gold-text); }
.fachportal-hinweis { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0; padding: 16px 18px; border-radius: var(--r-l); background: var(--karte); border: 1px solid var(--linie-hell); }
.fachportal-hinweis p { margin: 0; }
.fachportal-hinweis__bild { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(186, 163, 95, .6); background: radial-gradient(90% 70% at 50% 30%, #2a4672 0%, #193053 58%, #10223d 100%); }
.fachportal-hinweis__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fachportal-hinweis .textlink { white-space: nowrap; }
/* Hinweis, solange der Formularversand nicht eingerichtet ist */
.formular-inaktiv { margin: 0 0 20px; padding: 18px 20px; border-radius: var(--r-l); background: #fff7e0; border: 1px solid #e6c873; color: var(--text); }
.formular-inaktiv p { margin: 0; }
.formular-inaktiv__titel { display: flex; gap: 10px; align-items: center; margin-bottom: 6px !important; font-weight: 700; color: var(--navy); }
.formular-inaktiv__titel svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--gold-text); }
.formular-inaktiv a { font-weight: 700; }
/* Konzept statt Produkt */
.konzept__raster { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 1000px) { .konzept__raster { grid-template-columns: 1fr 1fr; } }
.konzept__falsch { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; }
.konzept__falsch s { position: relative; align-self: flex-start; text-decoration: none; font: italic 420 clamp(1.05rem, 1rem + .4vw, 1.3rem)/1.3 var(--serif); color: var(--text-2); }
.konzept__falsch s::after { content: ""; position: absolute; left: -4px; right: -4px; top: 55%; height: 2px; background: var(--koralle, #c0392b); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .bewegung .konzept__falsch s::after { transform: scaleX(0); transition: transform .6s var(--ease) calc(.25s + var(--i) * .35s); }
  .bewegung .konzept.ist-sichtbar .konzept__falsch s::after { transform: scaleX(1); }
}
.konzept h2 em { display: block; }
.konzept__lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); max-width: 36em; }
.konzept__team { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; font-weight: 600; color: var(--navy); }
.konzept__team svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--gold-text); }
.konzept__fragen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.konzept__fragen li { position: relative; margin: 0; display: grid; grid-template-columns: 52px 1fr 34px; gap: 16px; align-items: start; padding: 22px 22px 22px 18px; border-radius: var(--r-l); background: var(--karte); border: 1px solid var(--linie-hell); box-shadow: 0 2px 12px rgba(16, 34, 61, .05); }
.konzept__nr { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff; font: 500 1.5rem/1 var(--serif); }
.konzept__fragen h3 { margin: 4px 0 6px; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }
.konzept__fragen p { margin: 0; color: var(--text); }
.konzept__haken { display: grid; place-items: center; width: 34px; height: 34px; margin-top: 8px; border-radius: 50%; border: 2px solid var(--gold); color: var(--gold-text); }
.konzept__haken svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .bewegung .konzept__haken { transform: scale(.4); opacity: 0; transition: transform .5s var(--ease) calc(.9s + var(--i) * .3s), opacity .4s calc(.9s + var(--i) * .3s), background-color .4s; }
  .bewegung .konzept.ist-sichtbar .konzept__haken { transform: scale(1); opacity: 1; }
}
.konzept__ziel { margin: 22px 0 0; padding: 22px 24px; border-radius: var(--r-l); background: var(--navy); color: #fff; font: italic 420 clamp(1.2rem, 1.05rem + .6vw, 1.55rem)/1.35 var(--serif); }
.konzept__ziel span { background: linear-gradient(var(--gold), var(--gold)) left 100% / 0 2px no-repeat; padding-bottom: 2px; transition: background-size 1.2s var(--ease) 1.8s; }
.konzept.ist-sichtbar .konzept__ziel span, .konzept__ziel span { background-size: 100% 2px; }
@media (prefers-reduced-motion: no-preference) { .bewegung .konzept:not(.ist-sichtbar) .konzept__ziel span { background-size: 0 2px; } }
@media (max-width: 560px) { .konzept__fragen li { grid-template-columns: 44px 1fr; } .konzept__nr { width: 44px; height: 44px; font-size: 1.25rem; } .konzept__haken { display: none; } }
.konzept-kasten { margin: 24px 0 0; padding: 22px 24px; border-radius: var(--r-l); background: var(--karte); border: 1px solid var(--linie-hell); border-left: 4px solid var(--gold); }
.konzept-kasten__kicker { display: block; margin-bottom: 6px; font: italic 420 1rem/1.3 var(--serif); color: var(--gold-text); }
.konzept-kasten__satz { margin: 0 0 10px; font-weight: 600; color: var(--navy); }
.konzept-kasten__fragen { margin: 0 0 10px; padding-left: 1.3em; }
.konzept-kasten__fragen li { margin: 2px 0; font-weight: 600; }
.konzept-kasten__ziel { margin: 0; font-style: italic; color: var(--text); }
.spezial__basis { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: .84rem; font-weight: 700; color: var(--navy); }
.spezial__basis svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--gold-text); }
.kachel .spezial__basis { margin-bottom: 6px; font-size: .78rem; }
.profil-konzept { max-width: 38em; margin: 16px 0 0; font-size: .97rem; line-height: 1.55; color: var(--text-2); }
.profil-konzept a { font-weight: 600; }
/* Engagement der Berater */
.engagement__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.engagement__karte { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-l); background: var(--karte); border: 1px solid var(--linie-hell); box-shadow: var(--schatten-1, 0 2px 10px rgba(16, 34, 61, .05)); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.engagement__karte:hover { transform: translateY(-4px); box-shadow: var(--schatten-2); }
.engagement__art { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
.engagement__art svg { width: 16px; height: 16px; }
.engagement__karte h3 { margin: 0; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); line-height: 1.25; }
.engagement__karte h3 span { display: block; margin-top: 4px; font: 500 1rem/1.35 var(--sans); color: var(--text-2); }
.engagement__karte > p { margin: 0; color: var(--text); }
.engagement__bezug { margin-top: auto; padding: 14px 16px; border-radius: 12px; background: rgba(186, 163, 95, .12); border-left: 3px solid var(--gold); }
.engagement__bezug b { display: block; margin-bottom: 4px; font: italic 500 .95rem/1.3 var(--serif); color: var(--gold-text); }
.engagement__bezug p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--navy); }
.engagement__quelle { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 600; color: var(--text-2); text-decoration: none; }
.engagement__quelle:hover { text-decoration: underline; }
.engagement__quelle svg { width: 14px; height: 14px; flex: 0 0 14px; }
.engagement__stand { margin: 18px 0 0; font-size: .84rem; color: var(--text-2); }
.person__engagement { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: .86rem; line-height: 1.45; color: var(--text); }
.person__engagement svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--koralle, #c0392b); }
.engagement-team { margin-bottom: 2.4em; padding: clamp(20px, 2.6vw, 30px); border-radius: var(--r-l); background: var(--karte); border: 1px solid var(--linie-hell); }
.engagement-team h2 { margin-top: 0; }
.engagement-team__liste { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.engagement-team__liste li { margin: 0; }
.engagement-team__liste a { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 0; border-radius: 12px; text-decoration: none; color: var(--text); transition: background-color .3s, padding .4s var(--ease); }
.engagement-team__liste a:hover { background: rgba(186, 163, 95, .1); padding-left: 8px; }
.engagement-team__liste b { display: block; font: 560 1.02rem/1.25 var(--serif); color: var(--navy); }
.engagement-team__liste small + small { margin-top: 2px; }
.engagement-team__liste small { display: block; font-size: .86rem; line-height: 1.4; color: var(--text-2); }
/* Berater je Standort */
.vor-ort { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie-hell); }
.vor-ort__titel { margin: 0 0 10px; font: italic 420 1rem/1.3 var(--serif); color: var(--gold-text); }
.standort .vor-ort ul { gap: 4px; }
.standort .vor-ort a { display: flex; align-items: center; gap: 12px; min-height: 0; padding: 6px 8px 6px 0; border-radius: 12px; font-weight: 400; color: var(--text); transition: background-color .3s, padding .4s var(--ease); }
.standort .vor-ort a:hover { text-decoration: none; background: rgba(186, 163, 95, .1); padding-left: 8px; }
.vor-ort__bild { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; overflow: hidden; background: radial-gradient(90% 70% at 50% 30%, #2a4672 0%, #193053 58%, #10223d 100%); border: 1.5px solid rgba(186, 163, 95, .6); transition: transform .45s var(--ease); }
.vor-ort__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.standort .vor-ort a:hover .vor-ort__bild { transform: scale(1.08); }
.vor-ort b { display: block; font: 560 1rem/1.25 var(--serif); color: var(--navy); }
.vor-ort small { display: block; font-size: .8rem; line-height: 1.4; color: var(--text-2); }
.vor-ort-stapel { grid-column: 1; display: flex; margin-top: 8px; padding-left: 8px; }
.vor-ort-stapel__bild, .vor-ort-stapel__mehr { width: 32px; height: 32px; margin-left: -8px; border-radius: 50%; overflow: hidden; border: 2px solid var(--papier, #f6f3ec); background: radial-gradient(90% 70% at 50% 30%, #2a4672 0%, #193053 58%, #10223d 100%); transition: transform .4s var(--ease); transition-delay: calc(var(--i, 0) * 30ms); }
.vor-ort-stapel__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vor-ort-stapel__mehr { display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; background: var(--navy); }
.region__liste a:hover .vor-ort-stapel__bild { transform: translateY(-3px); }
/* Standortseiten */
.karte address { font-style: normal; margin-bottom: 12px; line-height: 1.55; }
.standort-kopf__adresse { display: inline-flex; gap: 8px; align-items: center; margin: 4px 0 22px; font-style: normal; font-weight: 600; color: var(--navy); }
.standort-kopf__adresse svg { width: 18px; height: 18px; color: var(--gold-text); }
.standort-kopf__karte .karte-region { max-width: 520px; margin-inline: auto; }
.standort-kopf__karte .karte-region__svg { max-height: 62vh; }
.karte-linie--aktiv { stroke: #fff; stroke-width: 3.2; opacity: 1; }
.karte-punkt.ist-gewaehlt .karte-kern { fill: #fff; stroke: var(--gold); stroke-width: 4; }
.karte-punkt.ist-gewaehlt .karte-name { font-size: 28px; }
@media (prefers-reduced-motion: no-preference) { .karte-region.ist-sichtbar .ist-gewaehlt .karte-puls { animation-iteration-count: infinite; animation-duration: 2.8s; } }
.standort h3 a { color: inherit; text-decoration: none; }
.standort h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.standort__mehr { margin: 14px 0 0; }
.standort .standort__mehr a { font-weight: 600; }
.standort-weitere { margin-top: 0; }
/* Region und Standortkarte */
.region__raster { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 960px) { .region__raster { grid-template-columns: 5fr 6fr; } }
.region__liste { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.region__liste li { margin: 0; border-bottom: 1px solid var(--linie); }
.region__liste a { display: grid; grid-template-columns: 1fr 40px; gap: 2px 12px; align-items: center; padding: 14px 6px; border-radius: 10px; text-decoration: none; color: var(--text); transition: padding .4s var(--ease), background-color .3s; }
.region__liste a:hover { padding-left: 16px; background: var(--karte); color: var(--text); }
.region__liste strong { grid-column: 1; font: 560 1.12rem/1.25 var(--serif); color: var(--navy); }
.region__liste span { grid-column: 1; font-size: .9rem; color: var(--text-2); }
.region__liste .pfeil { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--gold-text); transition: transform .35s var(--ease); }
.region__liste a:hover .pfeil { transform: translateX(4px); }
.karte-region { border-radius: var(--r-xl); background: radial-gradient(80% 60% at 55% 70%, #23406c 0%, #193053 55%, #10223d 100%); box-shadow: var(--schatten-3); overflow: hidden; padding: clamp(8px, 2vw, 18px); }
.karte-region__svg { display: block; width: 100%; height: auto; max-height: 76vh; margin: 0 auto; }
.karte-ring { fill: none; stroke: rgba(216, 196, 140, .32); stroke-width: 1.4; stroke-dasharray: 3 8; }
.karte-ring__text { font: italic 400 16px var(--serif); fill: rgba(216, 196, 140, .8); }
.karte-linie { stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; opacity: .85; }
.karte-kern { fill: var(--gold); stroke: var(--navy); stroke-width: 3; }
.karte-punkt--zentrale .karte-kern { fill: #fff; stroke: var(--gold); stroke-width: 4; }
.karte-puls { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .karte-region.ist-sichtbar .karte-puls { animation: karte-puls 2.4s var(--ease) .9s 3; } }
@keyframes karte-puls { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.6); } }
.karte-name { font: 560 24px var(--serif); fill: #fff; }
.karte-km { font: 600 15px var(--sans); fill: var(--gold-hell); }
.region__karte-partner { margin: 0 0 36px; max-width: 620px; }

/* 14 Druck ----------------------------------------------------------------------------------------- */
@media print {
  .kopf, .service-leiste, .fuss, .vorschau-band, .knopf, .seitenleiste .karte--navy, .einwilligung-dialog, .laufband, .buehne__steuerung, .schnellkontakt, .video__start { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
  [data-auftritt] { opacity: 1 !important; transform: none !important; }
}

/* Zielgrößen (WCAG 2.5.8) */
.fuss li a, .fuss__unten a, .service-leiste a, .brotkrumen a { display: inline-flex; align-items: center; min-height: 32px; }
.buehne__nebenlinks .textlink, .megamenue__fuss .textlink { min-height: 32px; }