/* Beratungsflow – Startseite (/), Übersicht (/plattform) und Anmelde-Seiten (/anmelden, /registrieren, /passwort-vergessen,
   /passwort-neu, /bestaetigen). Runde 2.6.8, Agent „startseite“.
   Marke (Markenboard plattform/marke/neu/board.png): Navy #0b1f3a, Markenblau #0a6fd6, Cyan #25cfea, Türkis #18d6a7;
   kein Lila (nur im Flow-Logo selbst). Linie: viel Weiß, klare Farbe gezielt – Navy-Bänder, satte Kartenköpfe, keine Schleier.
   Kontraste (WCAG AA): Weiß auf #0b1f3a 16 : 1, #c4d3e6 auf #0b1f3a 11 : 1, #93a8c4 auf #0b1f3a 7 : 1, Weiß auf #0a6fd6 4,9 : 1,
   #0b1f3a auf #25cfea 10 : 1, #0f766e auf #e2f5f1 5 : 1, #7a4f00 auf #fff4dc 6,6 : 1. */
:root {
  --st-navy: #0b1f3a; --st-navy-2: #10294b; --st-navy-rand: #1b3456; --st-band-ink: #ffffff; --st-band-text: #c4d3e6; --st-band-leise: #93a8c4;
  --st-cyan: #25cfea; --st-cyan-hell: #7fe3f2; --st-tint: #f4f7fb; --st-tint-rand: #e3e9f1; --st-rahmen: #eaf0f7;
  --st-ok: #0f766e; --st-ok-bg: #e2f5f1; --st-vorb: #7a4f00; --st-vorb-bg: #fff4dc; --st-vorb-rand: #f1d18b;
  --st-karte-schatten: 0 1px 2px rgba(16,24,40,.05), 0 18px 40px -24px rgba(16,24,40,.32);
  --st-gross-schatten: 0 2px 6px rgba(11,31,58,.12), 0 34px 70px -28px rgba(3,10,24,.65);
  --st-radius: 20px;
}
html.dark {
  --st-navy: #0c1626; --st-navy-2: #11203a; --st-navy-rand: #1f3150; --st-band-text: #c4d3e6; --st-band-leise: #93a8c4;
  --st-tint: #131a24; --st-tint-rand: #222c3b; --st-rahmen: #172131;
  --st-ok: #45d0b5; --st-ok-bg: #0f2a28; --st-vorb: #f0c870; --st-vorb-bg: #2c2414; --st-vorb-rand: #6b5420;
  --st-karte-schatten: 0 1px 2px rgba(0,0,0,.4), 0 18px 40px -24px rgba(0,0,0,.85);
  --st-gross-schatten: 0 2px 6px rgba(0,0,0,.4), 0 34px 70px -28px rgba(0,0,0,.9);
}
.st-seite { background: var(--bg); }
.st-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 32px; }
.st-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; }
.st-seite :focus-visible, .st-auth :focus-visible, .st-ue :focus-visible, .st-dialog :focus-visible { outline: 3px solid color-mix(in srgb, var(--bf-blau) 55%, transparent); outline-offset: 2px; border-radius: 10px; }
.st-band :focus-visible, .st-hero :focus-visible, .st-auth-seite :focus-visible, .st-ue-kopf :focus-visible { outline-color: var(--st-cyan-hell); }

/* ---------- Animiertes Logo (Beratungsflow-„B“): Einblenden, ruhiges Leuchten, Lichtstreif im Markenband ---------- */
.st-logo { position: relative; display: inline-block; width: 56px; height: 56px; flex: none; isolation: isolate; }
.st-logo img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; animation: st-logo-ein .9s cubic-bezier(.2,.9,.25,1.15) both; }
.st-logo::before { content: ""; position: absolute; inset: -18%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(37,207,234,.5), rgba(10,111,214,.22) 55%, transparent 72%); opacity: .55; animation: st-logo-atmen 5.5s ease-in-out .9s infinite; }
.st-logo .st-glanz { position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-mask: url(/plattform/marke/bf-mark.png) center / contain no-repeat; mask: url(/plattform/marke/bf-mark.png) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.9) 50%, transparent 62% 100%); background-size: 300% 100%; background-position: 150% 0; animation: st-glanz 6s ease-in-out 1.1s infinite; }
.st-logo.hell::before { background: radial-gradient(closest-side, rgba(37,207,234,.35), rgba(10,111,214,.14) 55%, transparent 72%); }
@keyframes st-logo-ein { from { opacity: 0; transform: translateY(6px) scale(.86) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes st-logo-atmen { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: .85; transform: scale(1.06); } }
@keyframes st-glanz { 0%, 55% { background-position: 150% 0; } 85%, 100% { background-position: -50% 0; } }
.st-flow-logo { position: relative; display: inline-grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 10px 26px -10px rgba(37,207,234,.8); }
.st-flow-logo img { width: 30px; height: 30px; display: block; filter: drop-shadow(0 0 8px rgba(64,120,255,.45)); animation: st-flow-leucht 4.5s ease-in-out infinite; }
@keyframes st-flow-leucht { 0%, 100% { filter: drop-shadow(0 0 4px rgba(64,120,255,.3)); } 50% { filter: drop-shadow(0 0 12px rgba(64,170,255,.75)); } }

/* Wortmarke */
.st-marke { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.st-marke:hover { text-decoration: none; }
.st-marke-text { display: flex; flex-direction: column; gap: 4px; }
.st-marke-name { font-size: 28px; font-weight: 760; letter-spacing: -0.035em; line-height: 1; color: var(--heading); }
.st-marke-name em { font-style: normal; background: linear-gradient(120deg, #3b8ff0, #4fdcf0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-marke-slogan { font-size: 12.5px; font-weight: 500; letter-spacing: .06em; color: var(--muted); }
.st-band .st-marke-name, .st-hero .st-marke-name, .st-auth-seite .st-marke-name, .st-ue-kopf .st-marke-name { color: #fff; }
.st-band .st-marke-slogan, .st-hero .st-marke-slogan, .st-auth-seite .st-marke-slogan, .st-ue-kopf .st-marke-slogan { color: var(--st-band-leise); }

/* ---------- Gemeinsame Bausteine ---------- */
.st-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--bf-blau); margin: 0 0 12px; }
html.dark .st-eyebrow { color: #6fb1f5; }
.st-eyebrow .st-eb-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--bf-blau); }
.st-eyebrow .st-eb-ico svg { width: 15px; height: 15px; }
.st-h2 { font-size: clamp(28px, 3.3vw, 40px); font-weight: 770; letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 14px; color: var(--heading); text-wrap: balance; }
.st-lead { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; max-width: 600px; text-wrap: pretty; }
.st-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 13px; font-weight: 700; font-size: 15px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background .15s, transform .08s, box-shadow .15s; white-space: nowrap; }
.st-knopf:hover { text-decoration: none; }
.st-knopf:active { transform: translateY(1px); }
.st-knopf.primaer { background: var(--btn-bg); color: #fff; box-shadow: 0 10px 22px -12px rgba(10,111,214,.9); }
.st-knopf.primaer:hover { background: var(--btn-hover); }
.st-knopf.hell { background: #fff; color: #0b1f3a; }
.st-knopf.hell:hover { background: #e8f1fd; }
.st-knopf.cyan { background: var(--st-cyan); color: #062033; }
.st-knopf.cyan:hover { background: #4fdcf0; }
.st-knopf.rand { background: transparent; color: var(--accent-ink); border-color: var(--line-strong); }
.st-knopf.rand:hover { background: var(--blue-50); }
.st-knopf.glas { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.st-knopf.glas:hover { background: rgba(255,255,255,.15); }
.st-knopf.voll { width: 100%; }
.st-knopf[disabled] { opacity: .6; cursor: default; }
.st-knopf svg { width: 18px; height: 18px; flex: none; }
/* Status-Etikett „In Vorbereitung“ */
.st-vorb { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; background: var(--st-vorb-bg); color: var(--st-vorb); border: 1px solid var(--st-vorb-rand); vertical-align: 2px; }
.st-vorb::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.st-band .st-vorb, .st-hero .st-vorb, .st-ue-kopf .st-vorb { background: rgba(227,179,65,.12); color: #f4cf7d; border-color: rgba(227,179,65,.45); }
.st-neu { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; background: var(--blue-50); color: var(--link); border: 1px solid var(--blue-200); }
.st-hinweis-klein { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); font-style: normal; }
.st-band .st-hinweis-klein { color: var(--st-band-leise); }

/* Liste der Versprechen (aus versprechen.js): Haken = verfügbar, Uhr = in Vorbereitung */
.st-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.st-liste li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; }
.st-liste li + li { border-top: 1px solid var(--line); }
.st-liste .st-li-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--st-ok-bg); color: var(--st-ok); }
.st-liste .st-li-ico svg { width: 16px; height: 16px; }
.st-liste li.vorb .st-li-ico { background: var(--st-vorb-bg); color: var(--st-vorb); }
.st-liste b { display: block; font-size: 15.5px; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; line-height: 1.35; }
.st-liste b .st-vorb { margin-left: 8px; }
.st-liste span.st-li-text { display: block; font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-top: 2px; }
.st-liste.zweispaltig { grid-template-columns: 1fr 1fr; column-gap: 28px; }
.st-liste.zweispaltig li + li { border-top: 0; }
.st-liste.zweispaltig li { border-top: 1px solid var(--line); }
.st-band .st-liste li + li, .st-band .st-liste.zweispaltig li, .st-auth-seite .st-liste li + li { border-color: rgba(255,255,255,.1); }
.st-band .st-liste b, .st-auth-seite .st-liste b { color: #fff; }
.st-band .st-liste span.st-li-text, .st-auth-seite .st-liste span.st-li-text { color: var(--st-band-text); }
.st-band .st-liste .st-li-ico, .st-auth-seite .st-liste .st-li-ico { background: rgba(37,207,234,.12); color: var(--st-cyan-hell); }
.st-band .st-liste li.vorb .st-li-ico, .st-auth-seite .st-liste li.vorb .st-li-ico { background: rgba(227,179,65,.12); color: #f4cf7d; }
.st-auth-seite .st-vorb { background: rgba(227,179,65,.12); color: #f4cf7d; border-color: rgba(227,179,65,.45); }

/* Grafik-Rahmen (Produkt-Ausschnitt mit fiktiven Daten) */
.st-figur { margin: 0; }
.st-rahmen { position: relative; border-radius: 26px; padding: 10px; background: linear-gradient(160deg, var(--st-rahmen), color-mix(in srgb, var(--st-rahmen) 60%, var(--bg))); border: 1px solid var(--st-tint-rand); }
.st-rahmen img { display: block; width: 100%; height: auto; }
html.dark .st-rahmen img { filter: brightness(.94); }
.st-figur figcaption { margin-top: 10px; font-size: 12.5px; color: var(--muted); text-align: center; }
.st-band .st-figur figcaption { color: var(--st-band-leise); }

/* Abschnitte */
.st-abschnitt { padding: 88px 0; }
.st-abschnitt.getoent { background: var(--st-tint); border-block: 1px solid var(--st-tint-rand); }
.st-zwei { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
.st-zwei.gespiegelt { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.st-zwei.gespiegelt > .st-figur { order: -1; }
.st-band { background: var(--st-navy); color: var(--st-band-text); position: relative; overflow: hidden; }
html.dark .st-band { border-block: 1px solid var(--st-navy-rand); }
.st-band .st-h2 { color: #fff; }
.st-band .st-lead { color: var(--st-band-text); }
.st-band .st-eyebrow { color: var(--st-cyan-hell); }
.st-band .st-eyebrow .st-eb-ico { background: var(--st-cyan); color: #062033; }
.st-band.mit-linie::after, .st-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #0a6fd6, #25cfea 60%, #18d6a7); }
/* Fließlinien (Markenmotiv „flow“): klare, feine Linien statt Schleier */
.st-linien { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.st-linien svg { position: absolute; right: -6%; bottom: -12%; width: 82%; min-width: 760px; height: auto; opacity: .9; }
.st-linien path { fill: none; stroke: url(#st-linie-verlauf); stroke-width: 1.3; stroke-dasharray: 90 30; animation: st-fluss 30s linear infinite; }
.st-linien path:nth-child(2n) { animation-duration: 38s; stroke-dasharray: 60 40; }
@keyframes st-fluss { to { stroke-dashoffset: -480; } }

/* ---------- Startseite: Hero ---------- */
.st-hero { position: relative; overflow: hidden; background: var(--st-navy); color: var(--st-band-text); }
.st-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "text karte" "punkte karte"; column-gap: 72px; row-gap: 40px; padding-block: 64px 80px; align-items: start; }
.st-hero-text { grid-area: text; }
.st-hero-karte { grid-area: karte; align-self: center; }
.st-hero-punkte { grid-area: punkte; }
.st-hero .st-marke { margin-bottom: 30px; }
.st-exklusiv { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--st-cyan-hell); background: rgba(37,207,234,.08); border: 1px solid rgba(127,227,242,.32); margin-bottom: 22px; }
.st-exklusiv svg { width: 16px; height: 16px; }
.st-hero h1 { font-size: clamp(38px, 4.7vw, 58px); font-weight: 790; letter-spacing: -0.04em; line-height: 1.04; color: #fff; margin: 0 0 22px; }
.st-hero h1 span { display: block; }
.st-hero h1 .st-verlauf { background: linear-gradient(100deg, #25cfea 10%, #18d6a7 90%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.st-hero .st-hero-lead { font-size: 18.5px; line-height: 1.6; color: var(--st-band-text); max-width: 580px; margin: 0; text-wrap: pretty; }
.st-hero .st-hero-lead b { color: #fff; font-weight: 650; }
.st-punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-punkt { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); }
.st-punkt .st-p-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #062033; background: var(--st-cyan); }
.st-punkt:nth-child(2) .st-p-ico { background: #18d6a7; }
.st-punkt:nth-child(3) .st-p-ico { background: #fff; color: #0b1f3a; }
.st-punkt .st-p-ico svg { width: 19px; height: 19px; }
.st-punkt .st-p-text { display: flex; flex-direction: column; gap: 3px; }
.st-punkt b { color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; }
.st-punkt span { font-size: 13px; line-height: 1.45; color: var(--st-band-leise); }

/* Anmeldekarte (Startseite) und Formular-Karten (Anmelde-Seiten) */
.st-login { position: relative; background: var(--surface); color: var(--ink); border-radius: 22px; padding: 30px 30px 26px; box-shadow: var(--st-gross-schatten); border: 1px solid rgba(255,255,255,.6); }
html.dark .st-login { border-color: #2a3547; }
.st-login::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 4px; border-radius: 22px 22px 0 0; background: linear-gradient(90deg, #0a6fd6, #25cfea); }
.st-login h2, .st-login h1 { font-size: 24px; font-weight: 770; letter-spacing: -0.025em; margin: 0 0 4px; color: var(--heading); }
.st-login > p.st-login-sub { margin: 0 0 20px; color: var(--muted); font-size: 14.5px; }
.st-login .feld { margin-bottom: 14px; }
.st-login .feld > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.st-login input[type=email], .st-login input[type=password], .st-login input[type=text] { height: 46px; border-radius: 12px; font-size: 15px; }
.st-login .st-pw-vergessen { display: flex; justify-content: flex-end; margin: -6px 0 16px; font-size: 13.5px; font-weight: 600; }
.st-login .st-trenner { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--muted); font-size: 13px; }
.st-login .st-trenner::before, .st-login .st-trenner::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.st-login .st-login-fuss { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.st-login .st-login-fuss svg { width: 14px; height: 14px; flex: none; color: var(--st-ok); }
.st-login .hinweis { margin: 0 0 14px; }
.st-login .st-willkommen { text-align: left; }
.st-login .st-willkommen p { color: var(--muted); margin: 0 0 18px; }
/* Passwort-Feld mit Auge */
.st-pw { position: relative; display: block; }
.st-pw input { padding-right: 48px !important; }
.st-auge { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 38px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; padding: 0; cursor: pointer; }
.st-auge:hover { background: var(--blue-50); color: var(--accent-ink); }
.st-auge svg { width: 18px; height: 18px; }
/* Passwort-Regeln (live) */
.st-regeln { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.st-regeln li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); transition: color .15s; }
.st-regeln li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-strong); box-sizing: border-box; flex: none; transition: background .15s, border-color .15s; }
.st-regeln li.ok { color: var(--st-ok); }
.st-regeln li.ok::before { border-color: transparent; background: var(--st-ok) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m4.2 8.3 2.4 2.4 5-5.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 16px no-repeat; }
html.dark .st-regeln li.ok::before { background-color: #1f9e86; }
.st-regeln li.falsch { color: var(--red); }
.st-regeln li.falsch::before { border-color: var(--red); }
/* Zustimmung */
.st-zustimmungen { border: 0; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); min-width: 0; }
.st-zustimmungen .hinweis { margin: 0 0 12px; }
.st-ds-info { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.st-ds-info a { font-weight: 600; }
.st-zustimmung { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.st-zustimmung input { width: 18px; height: 18px; margin: 1px 0 0; cursor: pointer; }
.st-zustimmung a { font-weight: 600; }
.st-zustimmung.fehlt { color: var(--red); }
.st-zustimmung.fehlt input { outline: 2px solid var(--red); outline-offset: 2px; }
/* Ergebnis-Zustand nach der Registrierung */
.st-zustand { text-align: left; }
.st-zustand .st-zu-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 16px; color: #fff; background: linear-gradient(135deg, #0a6fd6, #25cfea); box-shadow: 0 12px 26px -14px rgba(10,111,214,.9); }
.st-zustand .st-zu-ico svg { width: 26px; height: 26px; }
.st-zustand h2 { font-size: 22px; }
.st-zustand p { color: var(--muted); margin: 0 0 12px; font-size: 14.5px; }
.st-zustand p b { color: var(--heading); }
.st-zustand .st-zu-akt { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }

/* ---------- Startseite: Praxis-Streifen (Vertrauensanker direkt nach dem Hero) ---------- */
.st-praxis { background: var(--st-tint); border-bottom: 1px solid var(--st-tint-rand); padding: 30px 0 26px; text-align: center; }
.st-praxis-titel { margin: 0 0 18px; font-weight: 760; font-size: 17px; color: var(--heading); letter-spacing: -0.015em; }
.st-praxis-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; }
.st-praxis-fakten li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--st-tint-rand); font-size: 14px; line-height: 1.4; color: var(--muted); text-align: left; }
.st-praxis-fakten li b { color: var(--heading); font-weight: 700; }
.st-pf-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--st-navy); color: var(--st-cyan-hell); }
.st-pf-ico svg { width: 18px; height: 18px; }
html.dark .st-pf-ico, html.dark .st-pr-ico { box-shadow: inset 0 0 0 1px #2a3d5c; }
.st-praxis-feedback { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- Warum Beratungsflow? (Problem → Lösung, Name) ---------- */
.st-warum-kopf { max-width: 820px; margin: 0 auto 44px; text-align: center; }
.st-warum-kopf .st-lead { margin-left: auto; margin-right: auto; max-width: 700px; font-size: 18px; }
.st-warum-kopf .st-h2 { font-size: clamp(30px, 3.8vw, 46px); }
.st-warum-kopf .st-h2 em { font-style: normal; background: linear-gradient(110deg, #0a6fd6, #25cfea); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-vergleich { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; max-width: 1000px; margin: 0 auto; }
.st-vg-karte { display: flex; flex-direction: column; border-radius: var(--st-radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--st-karte-schatten); }
.st-vg-kopf { padding: 18px 22px; color: #fff; display: flex; align-items: center; gap: 12px; }
.st-vg-kopf b { font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.st-vg-kopf small { display: block; font-size: 12.5px; font-weight: 600; opacity: .85; letter-spacing: .02em; }
.st-vg-kopf .st-vg-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); flex: none; }
.st-vg-kopf .st-vg-ico svg { width: 20px; height: 20px; }
.st-vg-karte.vorher .st-vg-kopf { background: linear-gradient(135deg, #56657c 0%, #2b3648 100%); }
.st-vg-karte.nachher .st-vg-kopf { background: linear-gradient(135deg, #0a6fd6 0%, #0b5bbf 55%, #0b4fa8 100%); }
.st-vg-karte ul { list-style: none; margin: 0; padding: 8px 22px 14px; flex: 1; }
.st-vg-karte li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.st-vg-karte li + li { border-top: 1px solid var(--line); }
.st-vg-karte li svg { width: 22px; height: 22px; margin-top: 0; }
.st-vg-karte.vorher li { color: var(--muted); }
.st-vg-karte.vorher li svg { color: #9aa6b8; }
.st-vg-karte.nachher li b { color: var(--heading); font-weight: 650; }
.st-vg-karte.nachher li svg { color: var(--bf-blau); }
html.dark .st-vg-karte.nachher li svg { color: #6fb1f5; }
.st-vg-pfeil { display: grid; place-items: center; }
.st-vg-pfeil span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--st-navy); color: var(--st-cyan-hell); box-shadow: 0 10px 22px -10px rgba(11,31,58,.7); }
.st-vg-pfeil svg { width: 20px; height: 20px; }

/* ---------- Bereichs-Abschnitte ---------- */
.st-bereich-text .st-liste { margin-top: 6px; }
.st-chip-ton { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }
.st-ton-zb .st-eb-ico { background: linear-gradient(135deg, #34e3b8, #12b48d); color: #0b1f3a; }
.st-ton-pa .st-eb-ico { background: linear-gradient(135deg, #2a8af0, #0a5fc0); color: #fff; }
.st-ton-fu .st-eb-ico { background: #e3b341; color: #2c2414; }
.st-beispiel { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* Vorlagen & KI: zwei gleich hohe Karten mit satten Köpfen */
.st-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.st-duo-karte { display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--st-karte-schatten); }
.st-duo-kopf { padding: 26px 28px 24px; color: #fff; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; min-height: 128px; }
.st-duo-kopf h3 { margin: 0 0 4px; font-size: 22px; font-weight: 760; letter-spacing: -0.025em; color: inherit; }
.st-duo-kopf p { margin: 0; font-size: 14.5px; line-height: 1.5; opacity: .92; }
.st-duo-kopf .st-dk-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.st-duo-kopf .st-dk-ico svg { width: 24px; height: 24px; }
.st-duo-karte.vorlagen .st-duo-kopf { background: linear-gradient(135deg, #0f7f75 0%, #0f766e 50%, #0b5f58 100%); }
.st-duo-karte.ki .st-duo-kopf { background: linear-gradient(135deg, #12305a 0%, #0b1f3a 100%); position: relative; }
.st-duo-karte.ki .st-duo-kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #2055e7, #25cfea); }
.st-duo-koerper { padding: 18px 28px 26px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.st-duo-koerper .st-liste { flex: 1; }
.st-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: auto; }
.st-schritt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 14px; background: var(--st-tint); border: 1px solid var(--st-tint-rand); font-size: 13.5px; font-weight: 650; color: var(--heading); line-height: 1.35; }
.st-schritt .st-sch-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); color: #0f766e; box-shadow: inset 0 0 0 1px var(--st-tint-rand); }
html.dark .st-schritt .st-sch-ico { color: #5fd4c4; }
.st-schritt .st-sch-ico svg { width: 18px; height: 18px; }
.st-schritt small { display: block; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.st-ki-bild { margin-top: auto; border-radius: 16px; background: var(--st-tint); border: 1px solid var(--st-tint-rand); padding: 10px; }
.st-ki-bild img { display: block; width: 100%; height: auto; }
html.dark .st-ki-bild img { filter: brightness(.94); }

/* Daten & Sicherheit */
.st-daten { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.st-daten-links .st-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.st-daten-links .st-links a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-strong); color: var(--accent-ink); font-weight: 600; font-size: 14px; background: var(--surface); }
.st-daten-links .st-links a:hover { background: var(--blue-50); text-decoration: none; }
.st-daten-links .st-links svg { width: 16px; height: 16px; color: var(--muted); }
.st-daten-ki { margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: var(--st-tint); border: 1px solid var(--st-tint-rand); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.st-daten-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.st-daten-karte { display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--st-karte-schatten); overflow: hidden; }
.st-daten-karte .st-dk-kopf { display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-weight: 750; font-size: 15px; color: var(--heading); border-bottom: 1px solid var(--line); }
.st-daten-karte .st-dk-kopf i { width: 10px; height: 10px; border-radius: 50%; background: var(--st-ok); box-shadow: 0 0 0 4px var(--st-ok-bg); }
.st-daten-karte.naechstes .st-dk-kopf i { background: #e3b341; box-shadow: 0 0 0 4px var(--st-vorb-bg); }
.st-daten-karte .st-dk-kopf small { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.st-daten-karte .st-liste { padding: 4px 20px 12px; }
.st-daten-karte.naechstes .st-vorb { display: none; }
.st-daten-karte .st-liste b { font-size: 14.5px; }
.st-daten-karte .st-liste span.st-li-text { font-size: 13.5px; }

/* Bewusst einfach */
.st-einfach { text-align: center; max-width: 780px; margin: 0 auto; }
.st-einfach .st-lead { margin: 0 auto; max-width: 660px; font-size: 18px; }
.st-einfach-zeile { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.st-einfach-zeile span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--st-tint-rand); font-weight: 650; font-size: 14px; color: var(--accent-ink); }
.st-einfach-zeile svg { width: 16px; height: 16px; color: var(--bf-blau); }
html.dark .st-einfach-zeile svg { color: #6fb1f5; }

/* Abschluss */
.st-abschluss { text-align: center; padding: 96px 0 100px; }
.st-abschluss .st-logo { width: 76px; height: 76px; margin-bottom: 22px; }
.st-abschluss h2 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 790; letter-spacing: -0.04em; color: #fff; margin: 0 0 14px; }
.st-abschluss h2 .st-verlauf { background: linear-gradient(100deg, #25cfea 10%, #18d6a7 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-abschluss p { font-size: 18px; max-width: 600px; margin: 0 auto 30px; color: var(--st-band-text); }
.st-abschluss .st-akt { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.st-abschluss .st-kosten { margin-top: 22px; font-size: 13.5px; color: var(--st-band-leise); }

/* Fußzeile */
.st-fuss { padding: 30px 0 36px; border-top: 1px solid var(--line); background: var(--bg); }
.st-fuss-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.st-fuss .st-marke-name { font-size: 18px; }
.st-fuss .st-logo { width: 30px; height: 30px; }
.st-fuss nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.st-fuss nav a { color: var(--accent-ink); font-weight: 550; }
.st-fuss-hinweis { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Anmelde-Seiten: zweispaltig (links Navy mit Nutzen, rechts Formular) ---------- */
.st-auth { display: grid; grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr); min-height: calc(100vh - var(--ppt-leiste-h, 56px)); background: var(--st-tint); }
body.ppt-leiste .st-auth { min-height: calc(100vh - var(--ppt-leiste-h)); }
.st-auth-seite { position: relative; overflow: hidden; background: var(--st-navy); color: var(--st-band-text); display: flex; flex-direction: column; justify-content: center; padding: 56px clamp(28px, 5vw, 72px); }
.st-auth-seite > * { position: relative; z-index: 1; }
.st-auth-seite::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: linear-gradient(180deg, #0a6fd6, #25cfea 60%, #18d6a7); }
.st-auth-seite .st-marke { margin-bottom: 34px; }
.st-auth-seite .st-auth-titel { color: #fff; font-size: clamp(28px, 3vw, 38px); font-weight: 780; letter-spacing: -0.035em; line-height: 1.1; margin: 0 0 12px; text-wrap: balance; }
.st-auth-seite .st-auth-titel .st-verlauf { background: linear-gradient(100deg, #25cfea 10%, #18d6a7 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-auth-seite .st-auth-text { font-size: 16px; line-height: 1.6; margin: 0 0 22px; max-width: 440px; }
.st-auth-seite .st-liste li { padding: 12px 0; }
.st-auth-seite .st-liste { max-width: 460px; }
.st-auth-praxis { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13.5px; color: var(--st-band-leise); max-width: 460px; }
.st-auth-praxis b { color: #fff; font-weight: 650; }
.st-auth-form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.st-auth-form .st-login { width: 100%; max-width: 460px; }
.st-auth-form .st-login.breit { max-width: 500px; }
.st-auth-form .st-unten { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.st-feld-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.st-optional { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }

/* ---------- Übersicht (angemeldet) ---------- */
.st-ue { padding: 28px 0 64px; }
.st-ue-kopf { position: relative; overflow: hidden; border-radius: 26px; background: var(--st-navy); color: var(--st-band-text); padding: 30px 34px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 32px; align-items: center; box-shadow: 0 22px 50px -32px rgba(11,31,58,.9); }
html.dark .st-ue-kopf { border: 1px solid var(--st-navy-rand); }
.st-ue-kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #0a6fd6, #25cfea 60%, #18d6a7); }
.st-ue-kopf > * { position: relative; z-index: 1; }
.st-ue-gruss { display: flex; align-items: center; gap: 20px; min-width: 0; }
.st-ue-gruss .st-logo { width: 64px; height: 64px; }
.st-ue-kopf h1 { color: #fff; font-size: clamp(28px, 3.2vw, 38px); font-weight: 780; letter-spacing: -0.035em; margin: 0 0 6px; line-height: 1.1; }
.st-ue-lage { margin: 0; font-size: 15px; color: var(--st-band-text); }
.st-ue-lage b { color: #fff; font-weight: 650; }
.st-schnell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 380px; }
.st-schnell a { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: #fff; font-weight: 650; font-size: 14px; white-space: nowrap; transition: background .15s, border-color .15s; }
.st-schnell a:hover { background: rgba(255,255,255,.14); border-color: rgba(127,227,242,.5); text-decoration: none; }
.st-schnell a svg { width: 18px; height: 18px; color: var(--st-cyan-hell); flex: none; }
.st-schnell-titel { grid-column: 1 / -1; margin: 0 0 2px; font-size: 11.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--st-band-leise); }
.st-ue .org-hinweis { max-width: none; margin: 20px 0 0; }
.st-ue .org-hinweis:empty { display: none; }
.st-ue-abschnitt { margin-top: 40px; }
.st-ue-abschnitt > .st-ue-titel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.st-ue-titel h2 { font-size: 22px; font-weight: 760; letter-spacing: -0.025em; margin: 0; }
.st-ue-titel span { font-size: 13.5px; color: var(--muted); }
#karten.st-werkzeuge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.karte.st-werkzeug { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--st-karte-schatten); color: inherit; transition: transform .15s, box-shadow .15s; min-height: 0; }
a.karte.st-werkzeug:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 24px 44px -22px rgba(16,24,40,.42); }
.st-werkzeug .st-w-kopf { display: flex; align-items: center; gap: 14px; padding: 20px 22px; min-height: 92px; color: #fff; background: var(--st-w-bg, linear-gradient(135deg, #2a8af0, #0a5fc0)); }
.st-werkzeug .st-w-kopf h3 { margin: 0; color: inherit; font-size: 18.5px; font-weight: 760; letter-spacing: -0.02em; line-height: 1.2; }
.st-werkzeug .st-w-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.st-werkzeug .st-w-icon svg { width: 24px; height: 24px; }
.st-werkzeug .st-w-icon img { width: 30px; height: 30px; display: block; }
.st-werkzeug .st-w-koerper { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 20px; flex: 1; }
.st-werkzeug p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; flex: 1; }
.st-werkzeug .mehr { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--st-w-ink, var(--link)); }
.st-werkzeug .mehr svg { width: 16px; height: 16px; transition: transform .15s; }
a.st-werkzeug:hover .mehr svg { transform: translateX(3px); }
.st-werkzeug[data-ton="zb"] { --st-w-bg: linear-gradient(135deg, #34e3b8 0%, #12b48d 100%); --st-w-ink: #0b7f66; }
.st-werkzeug[data-ton="zb"] .st-w-kopf { color: #0b1f3a; }
.st-werkzeug[data-ton="zb"] .st-w-icon { background: rgba(255,255,255,.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.st-werkzeug[data-ton="pa"] { --st-w-bg: linear-gradient(135deg, #1a7ee6 0%, #0a6fd6 42%, #0b4fa8 100%); --st-w-ink: #0a5fc0; }
.st-werkzeug[data-ton="au"] { --st-w-bg: linear-gradient(135deg, #56657c 0%, #2b3648 100%); --st-w-ink: #3f4c62; }
.st-werkzeug[data-ton="vo"] { --st-w-bg: linear-gradient(135deg, #0f857a 0%, #0f766e 55%, #0b5f58 100%); --st-w-ink: #0f766e; }
.st-werkzeug[data-ton="fr"] { --st-w-bg: linear-gradient(135deg, #0a93bb 0%, #0b82a8 55%, #0a6a93 100%); --st-w-ink: #0a7aa0; }
.st-werkzeug[data-ton="flow"] { --st-w-bg: linear-gradient(135deg, #1a3d6b 0%, #0b1f3a 100%); --st-w-ink: #2055e7; }
.st-werkzeug[data-ton="flow"] .st-w-icon { background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 8px 22px -8px rgba(37,207,234,.9); }
.st-werkzeug[data-ton="flow"] .st-w-icon img { animation: st-flow-leucht 4.5s ease-in-out infinite; }
html.dark .st-werkzeug[data-ton="zb"] { --st-w-ink: #4fd8b2; }
html.dark .st-werkzeug[data-ton="pa"] { --st-w-ink: #6fb1f5; }
html.dark .st-werkzeug[data-ton="au"] { --st-w-ink: #aab6c8; }
html.dark .st-werkzeug[data-ton="vo"] { --st-w-ink: #5fd4c4; }
html.dark .st-werkzeug[data-ton="fr"] { --st-w-ink: #5fd0ee; }
html.dark .st-werkzeug[data-ton="flow"] { --st-w-ink: #8fb0ff; }
.st-werkzeug.gesperrt .st-w-kopf { filter: saturate(.25); }
.st-werkzeug.gesperrt .st-w-icon img { filter: grayscale(1); opacity: .6; animation: none; }
.st-werkzeug.gesperrt .mehr { color: var(--muted); }
.st-ue-unten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.st-ue-karte { display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--st-karte-schatten); padding: 22px 24px; }
.st-ue-karte h3 { margin: 0 0 4px; font-size: 17px; font-weight: 750; letter-spacing: -0.015em; }
.st-ue-karte > p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
.st-ue-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.st-ue-spalten h4 { display: flex; align-items: center; gap: 8px; margin: 6px 0 6px; font-size: 12px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.st-ue-spalten h4 i { width: 8px; height: 8px; border-radius: 50%; background: var(--bf-blau); }
.st-ue-spalten .naechstes h4 i { background: #e3b341; }
.st-ue-spalten ul { list-style: none; margin: 0; padding: 0; }
.st-ue-spalten li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; }
.st-ue-spalten li b { display: block; color: var(--heading); font-weight: 650; font-size: 14.5px; }
.st-ue-spalten li span { color: var(--muted); font-size: 13px; }
.st-ue-karte.praxis { background: linear-gradient(160deg, var(--st-tint), var(--surface)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; }
.st-ue-karte.praxis .st-pr-kopf { grid-column: 1; }
.st-ue-karte.praxis > p { grid-column: 1; margin: 0; max-width: 820px; }
.st-ue-karte.praxis > .st-knopf { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
.st-ue-karte.praxis .st-pr-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.st-ue-karte.praxis .st-pr-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--st-navy); color: var(--st-cyan-hell); flex: none; }
.st-ue-karte.praxis .st-pr-ico svg { width: 20px; height: 20px; }
.st-ue-karte.praxis p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 10px; }
.st-ue-karte.praxis .st-knopf { height: 46px; }
#adminBox .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#adminBox .karte.tool { min-height: 0; border-radius: 18px; }

/* Feedback-Dialog */
.st-dialog { width: min(520px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 20px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -24px rgba(11,31,58,.55); }
.st-dialog::backdrop { background: rgba(11,31,58,.5); }
.st-dialog form { padding: 24px 24px 20px; }
.st-dialog h2 { font-size: 20px; margin: 0 0 6px; }
.st-dialog p { color: var(--muted); margin: 0 0 16px; font-size: 14px; }
.st-dialog textarea { min-height: 130px; }
.st-dialog .st-dlg-akt { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.st-dialog .st-dlg-akt .st-knopf { height: 42px; }

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .st-hero-grid { column-gap: 48px; grid-template-columns: minmax(0, 1fr) 390px; }
  .st-punkte { grid-template-columns: 1fr; }
  .st-punkt { flex-direction: row; align-items: center; padding: 12px 14px; }
  .st-punkt .st-p-text { display: flex; flex-direction: column; gap: 2px; }
  .st-zwei, .st-zwei.gespiegelt { gap: 44px; }
  .st-ue-kopf { grid-template-columns: 1fr; }
  .st-schnell { min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .st-schnell a { white-space: normal; line-height: 1.2; height: auto; min-height: 46px; padding: 8px 12px; }
}
@media (max-width: 980px) {
  .st-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "karte" "punkte"; padding-block: 36px 52px; row-gap: 28px; }
  .st-hero-karte { max-width: 520px; width: 100%; }
  .st-punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-punkt { flex-direction: column; align-items: flex-start; }
  .st-zwei, .st-zwei.gespiegelt { grid-template-columns: minmax(0, 1fr); }
  .st-zwei.gespiegelt > .st-figur { order: 0; }
  .st-figur { max-width: 680px; }
  .st-daten { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .st-praxis-fakten { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .st-auth { grid-template-columns: minmax(0, 1fr); }
  .st-auth-seite { padding: 26px 24px 24px; }
  .st-auth-seite::after { top: auto; left: 0; width: auto; height: 3px; background: linear-gradient(90deg, #0a6fd6, #25cfea 60%, #18d6a7); }
  .st-auth-seite .st-marke { margin-bottom: 14px; }
  .st-auth-seite .st-auth-titel { font-size: 24px; margin: 0; }
  .st-auth-seite .st-auth-text, .st-auth-seite .st-liste, .st-auth-praxis { display: none; }
  .st-auth-form { align-items: flex-start; padding: 24px 16px 40px; }
  #karten.st-werkzeuge, #adminBox .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-ue-karte.praxis { grid-template-columns: minmax(0, 1fr); }
  .st-ue-karte.praxis > .st-knopf { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
}
@media (max-width: 760px) {
  .st-wrap { padding-inline: 16px; }
  .st-abschnitt { padding: 64px 0; }
  .st-hero .st-marke { margin-bottom: 22px; }
  .st-hero .st-marke-name { font-size: 24px; }
  .st-hero .st-logo { width: 46px; height: 46px; }
  .st-hero h1 { font-size: 34px; margin-bottom: 14px; }
  .st-hero .st-hero-lead { font-size: 16.5px; }
  .st-punkte { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .st-punkt { flex-direction: row; align-items: center; }
  .st-login { padding: 24px 20px 22px; border-radius: 20px; }
  .st-vergleich { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .st-vg-pfeil span { transform: rotate(90deg); }
  .st-liste.zweispaltig { grid-template-columns: minmax(0, 1fr); }
  .st-liste.zweispaltig li + li { border-top: 1px solid var(--line); }
  .st-duo { grid-template-columns: minmax(0, 1fr); }
  .st-duo-kopf { padding: 22px 20px; min-height: 0; }
  .st-duo-koerper { padding: 14px 20px 22px; }
  .st-schritte { grid-template-columns: minmax(0, 1fr); }
  .st-schritt { flex-direction: row; align-items: center; }
  .st-daten-spalten { grid-template-columns: minmax(0, 1fr); }
  .st-rahmen { padding: 12px; border-radius: 20px; }
  .st-abschluss { padding: 72px 0 76px; }
  .st-abschluss .st-akt .st-knopf { width: 100%; }
  .st-feld-zeile { grid-template-columns: minmax(0, 1fr); }
  .st-ue { padding-top: 16px; }
  .st-ue-kopf { padding: 22px 18px; border-radius: 22px; }
  .st-ue-gruss { gap: 14px; }
  .st-ue-gruss .st-logo { width: 46px; height: 46px; }
  .st-schnell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #karten.st-werkzeuge, #adminBox .karten { grid-template-columns: minmax(0, 1fr); }
  .st-werkzeug .st-w-kopf { min-height: 0; padding: 16px 18px; }
  .st-ue-spalten { grid-template-columns: minmax(0, 1fr); }
  .st-fuss-innen { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .st-logo img, .st-logo::before, .st-logo .st-glanz, .st-flow-logo img, .st-linien path, .st-werkzeug[data-ton="flow"] .st-w-icon img { animation: none !important; }
  .st-logo .st-glanz { display: none; }
  .st-knopf, a.karte.st-werkzeug { transition: none; }
}

/* ---------- Übersicht: Beratungsflow als App (Runde 2.7.2, /plattform/app.js) ---------- */
.st-app-box[hidden] { display: none; }
.st-app-box { margin-top: 22px; }
.st-app { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; padding: 16px 52px 16px 18px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--st-karte-schatten); }
.st-app::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bf-blau); }
.st-app-symbol img { width: 48px; height: 48px; display: block; border-radius: 12px; box-shadow: 0 8px 18px -10px rgba(11, 31, 58, .6); }
.st-app-tx h3 { margin: 0 0 2px; font-size: 16px; font-weight: 720; letter-spacing: -0.01em; }
.st-app-tx p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.st-app-akt .st-knopf { height: 42px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
.st-app-zu { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.st-app-zu:hover { background: var(--bg-soft); color: var(--heading); }
.st-app-zu:focus-visible { outline: 2px solid var(--bf-blau); outline-offset: 1px; }
@media (max-width: 720px) {
  .st-app { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
  .st-app-tx { padding-right: 26px; }
  .st-app-akt { grid-column: 1 / -1; }
  .st-app-akt .st-knopf { width: 100%; }
}

/* Herkunfts-Hinweis nach Weiterleitung von zuversichtsberatung.com / potenzialarbeit.com / Förderrechner-Domain (start.js herkunftBand) */
.st-herkunft { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 16px; background: var(--st-tint); border-bottom: 1px solid var(--st-tint-rand); color: inherit; font-size: 14px; line-height: 1.4; }
.st-herkunft-text b { font-weight: 700; margin-right: 4px; }
.st-herkunft-zu { flex: none; border: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 8px; cursor: pointer; opacity: .7; }
.st-herkunft-zu:hover, .st-herkunft-zu:focus-visible { opacity: 1; background: var(--st-tint-rand); }