/* ===================== Portale 1 (G1): gemeinsame Grundlage der Portalseiten =====================
   Kunden-Portal (/kunde, /kunde/med) und Bewerberseite (/bewerben, /bewerben/med). Keine interne App, kein internes Script.
   Farben und Schrift aus Leitstand 2 (public/styles.css), Logo-Fläche aus public/css/marke.css (dort einbinden).
   Thema:     html[data-theme="dark" | "light"], ohne Attribut folgt die Seite der Systemeinstellung.
   Abteilung: body[data-mandant="bau" | "med"]. iPersonal: Rot nur für die eine Hauptaktion. MediPersonal: Blau mit Grün, nie Rot.
   Handy zuerst: Seitenrand 16 px, Tippflächen mindestens 48 px (klein 44 px), nie seitwärts schieben.
   Bausteine (Klassen):
     Seite      .a-seite .a-kopf .a-kopf-innen .a-inhalt .a-fuss .fest-unten
     Knöpfe     .knopf (.haupt .invers .rand .leise .voll .rund .klein)
     Felder     .feld .feld-lbl .eingabe .feld-hinweis .feld.fehler .wahl (Häkchen)
     Code       .code-feld > input.code-eingabe + .code-kaesten > span*6 (Klassen .voll .jetzt am Kasten)
     Kästen     .kasten (.ok .warn .fehler .leise)
     Berater    .bk (Karte), .bk-kompakt (Handy oben), .bk-foto (img oder .bk-initialen)
     Karte      .a-karte (Fläche), .kk (Fachkraft anonym, Kunden-Portal)
     Leer       .leer
     Weitere    .reiter .chip .plakette .blatt (Fenster, Handy unten) .schritte .a-titel */

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

/* ---------- Token: Thema dunkel (Grundwerte wie Leitstand 2) ---------- */
:root {
  color-scheme: dark;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bg: #050608; --app: #0A0B0E;
  --flaeche: #111317; --flaeche-b: #0E1013; --flaeche-2: #15181D; --flaeche-3: #1C2027; --feld: #07080A;
  --line: rgba(214, 222, 236, .08); --line-strong: rgba(214, 222, 236, .14); --line-3: rgba(214, 222, 236, .26);
  --rand-o: rgba(255, 255, 255, .12); --rand-u: rgba(214, 222, 236, .06);
  --text: #EDEFF3; --muted: #A9AFBA; --muted-2: #8A919C;
  --silber: #D7DCE4;
  --glas: rgba(12, 14, 17, .78);
  --hover: rgba(214, 222, 236, .06);
  --sch-1: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 40px -22px rgba(0, 0, 0, .7);
  --sch-2: 0 50px 110px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .3);
  --licht-1: rgba(196, 208, 230, .075);
  --ok-bg: rgba(74, 222, 128, .09); --ok-tx: #8EE0AC; --ok-ln: rgba(74, 222, 128, .26);
  --warn-bg: rgba(250, 204, 21, .085); --warn-tx: #EFD27E; --warn-ln: rgba(250, 204, 21, .24);
  --neu-bg: rgba(205, 214, 228, .06); --neu-tx: #C2C7D0; --neu-ln: rgba(205, 214, 228, .17);
  --gefahr-bg: rgba(248, 113, 113, .09); --gefahr-tx: #F4A3A3; --gefahr-ln: rgba(248, 113, 113, .28);
  --invers-bg: #E9ECF1; --invers-tx: #0A0B0E; --invers-h: #FFFFFF;
  --schleier: rgba(3, 4, 6, .66);
  --radius: 16px;
  --ak: #E40313; --ak-rgb: 228, 3, 19; --ak-btn: #E40313; --ak-btn-h: #C9020F;
  font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 15px; color: var(--text);
}
/* ---------- Thema hell ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #E6E7EB; --app: #F4F4F6;
  --flaeche: #FFFFFF; --flaeche-b: #FFFFFF; --flaeche-2: #F6F6F8; --flaeche-3: #ECECF0; --feld: #FFFFFF;
  --line: #E3E3E9; --line-strong: #D2D3DA; --line-3: #A6A7B0;
  --rand-o: #E3E3E9; --rand-u: #E3E3E9;
  --text: #1D1D1F; --muted: #4A4B52; --muted-2: #62636C;
  --silber: #6E7580;
  --glas: rgba(255, 255, 255, .86);
  --hover: rgba(17, 17, 26, .04);
  --sch-1: 0 1px 2px rgba(17, 17, 26, .04), 0 12px 30px -18px rgba(17, 17, 26, .16);
  --sch-2: 0 40px 90px -30px rgba(17, 17, 26, .22), 0 2px 6px rgba(17, 17, 26, .05);
  --licht-1: rgba(255, 255, 255, .9);
  --ok-bg: #E8F5ED; --ok-tx: #17663A; --ok-ln: #BEE2CB;
  --warn-bg: #FBF2D9; --warn-tx: #775400; --warn-ln: #EAD49D;
  --neu-bg: #F1F1F4; --neu-tx: #4A4B52; --neu-ln: #DCDCE2;
  --gefahr-bg: #FDF0F0; --gefahr-tx: #A3242A; --gefahr-ln: #F1C7C7;
  --invers-bg: #1D1D1F; --invers-tx: #FFFFFF; --invers-h: #000000;
  --schleier: rgba(17, 17, 26, .42);
}
/* Ohne gesetztes Thema: Systemeinstellung hell (gleiche Werte wie oben) */
@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --bg: #E6E7EB; --app: #F4F4F6;
    --flaeche: #FFFFFF; --flaeche-b: #FFFFFF; --flaeche-2: #F6F6F8; --flaeche-3: #ECECF0; --feld: #FFFFFF;
    --line: #E3E3E9; --line-strong: #D2D3DA; --line-3: #A6A7B0;
    --rand-o: #E3E3E9; --rand-u: #E3E3E9;
    --text: #1D1D1F; --muted: #4A4B52; --muted-2: #62636C;
    --silber: #6E7580;
    --glas: rgba(255, 255, 255, .86);
    --hover: rgba(17, 17, 26, .04);
    --sch-1: 0 1px 2px rgba(17, 17, 26, .04), 0 12px 30px -18px rgba(17, 17, 26, .16);
    --sch-2: 0 40px 90px -30px rgba(17, 17, 26, .22), 0 2px 6px rgba(17, 17, 26, .05);
    --licht-1: rgba(255, 255, 255, .9);
    --ok-bg: #E8F5ED; --ok-tx: #17663A; --ok-ln: #BEE2CB;
    --warn-bg: #FBF2D9; --warn-tx: #775400; --warn-ln: #EAD49D;
    --neu-bg: #F1F1F4; --neu-tx: #4A4B52; --neu-ln: #DCDCE2;
    --gefahr-bg: #FDF0F0; --gefahr-tx: #A3242A; --gefahr-ln: #F1C7C7;
    --invers-bg: #1D1D1F; --invers-tx: #FFFFFF; --invers-h: #000000;
    --schleier: rgba(17, 17, 26, .42);
  }
}

/* ---------- Marken-Token (auf body, damit med eigene Grundwerte hat) ---------- */
body {
  --ink: #FF6B74; --ak2: var(--silber);
  --fokus: var(--ak); --ak-bg: rgba(var(--ak-rgb), .10); --ak-ln: rgba(var(--ak-rgb), .42); --glow: rgba(var(--ak-rgb), .38);
  --licht-2: rgba(var(--ak-rgb), .05);
  --haupt-bg: var(--ak-btn); --haupt-h: var(--ak-btn-h); --haupt-tx: #FFFFFF;
  --fehler-bg: var(--gefahr-bg); --fehler-tx: var(--gefahr-tx); --fehler-ln: var(--gefahr-ln);
  --foto-a: rgba(var(--ak-rgb), .16); --foto-b: var(--flaeche-3);
}
html[data-theme="light"] body { --ink: #B0000E; --ak-bg: rgba(var(--ak-rgb), .07); --ak-ln: rgba(var(--ak-rgb), .40); --glow: rgba(var(--ak-rgb), .28); --licht-2: rgba(var(--ak-rgb), .04); --foto-a: #FDECEE; --foto-b: #F3F3F6; }
@media (prefers-color-scheme: light) { html:not([data-theme]) body { --ink: #B0000E; --ak-bg: rgba(var(--ak-rgb), .07); --ak-ln: rgba(var(--ak-rgb), .40); --glow: rgba(var(--ak-rgb), .28); --licht-2: rgba(var(--ak-rgb), .04); --foto-a: #FDECEE; --foto-b: #F3F3F6; } }
/* MediPersonal: Knopf-Blau wie in der App (#0879B2, Kontrast AA mit weisser Schrift), Grün als Zweitakzent, Fehler in Bernstein statt Rot */
body[data-mandant="med"] {
  --ak: #0A9BD9; --ak-rgb: 10, 155, 217; --ak-btn: #0879B2; --ak-btn-h: #06689C;
  --ink: #5CCBF7; --ak2: #5FD08E; --fokus: #2EAA60;
  --licht-2: rgba(46, 170, 96, .05);
  --fehler-bg: var(--warn-bg); --fehler-tx: var(--warn-tx); --fehler-ln: var(--warn-ln);
  --foto-a: rgba(10, 155, 217, .16); --foto-b: rgba(46, 170, 96, .12);
}
html[data-theme="light"] body[data-mandant="med"] { --ink: #055F88; --ak2: #1F8A4A; --foto-a: #E6F4FB; --foto-b: #EAF6EF; }
@media (prefers-color-scheme: light) { html:not([data-theme]) body[data-mandant="med"] { --ink: #055F88; --ak2: #1F8A4A; --foto-a: #E6F4FB; --foto-b: #EAF6EF; } }

/* ---------- Grundlage ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; background: var(--app); }
body { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.45; color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
img { max-width: 100%; }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.muted { color: var(--muted); }
.klein { font-size: 13px; }
.mono { font-family: var(--mono); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
@media (max-width: 1023.98px) { .nur-gross { display: none !important; } }
@media (min-width: 1024px) { .nur-handy { display: none !important; } }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hintergrund: weiche Lichtflächen wie Leitstand 2 */
.a-grund { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 560px at 88% -10%, var(--licht-1), transparent 66%), radial-gradient(760px 600px at -14% 34%, var(--licht-2), transparent 70%), var(--app); }

/* ---------- Seite, Kopf, Inhalt, Fuss ---------- */
.a-seite { --rand: 16px; min-height: 100vh; display: flex; flex-direction: column; }
@media (min-width: 768px) { .a-seite { --rand: 28px; } }
.a-kopf { position: sticky; top: 0; z-index: 20; background: var(--glas); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.a-kopf-innen { max-width: 1240px; margin: 0 auto; padding: 0 var(--rand); min-height: 64px; display: flex; align-items: center; gap: 12px; }
.a-kopf .mk-flaeche { flex: none; }
.a-kopf-mitte { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.a-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.a-inhalt { width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px var(--rand) 32px; flex: 1; }
.a-inhalt.schmal { max-width: 480px; }
.a-fuss { max-width: 1240px; width: 100%; margin: 0 auto; padding: 22px var(--rand) 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.a-fuss a { color: var(--muted); }
.a-fuss .a-fuss-zeile { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.a-fuss .a-lizenz { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }

/* Titel einer Ansicht */
.a-titel { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 16px; }
.a-titel h1 { font-size: 26px; letter-spacing: -.025em; }
.a-titel p { color: var(--muted); font-size: 15px; }
@media (min-width: 1024px) { .a-titel h1 { font-size: 32px; } }
.a-oberzeile { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.a-oberzeile svg.i { width: 15px; height: 15px; }

/* ---------- Flächen ---------- */
.a-karte { border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--sch-1);
  background: linear-gradient(180deg, var(--flaeche), var(--flaeche-b)) padding-box, linear-gradient(180deg, var(--rand-o), var(--rand-u) 42%) border-box; }

/* ---------- Knöpfe ---------- */
.knopf { font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--line-strong); background: var(--flaeche); color: var(--text); cursor: pointer; text-decoration: none; text-align: center;
  -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, transform .08s; }
.knopf:hover { background: var(--flaeche-2); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; }
.knopf.haupt { background: var(--haupt-bg); border-color: transparent; color: var(--haupt-tx); box-shadow: 0 10px 24px -12px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .16); }
.knopf.haupt:hover { background: var(--haupt-h); }
.knopf.invers { background: var(--invers-bg); border-color: transparent; color: var(--invers-tx); }
.knopf.invers:hover { background: var(--invers-h); }
.knopf.rand { background: transparent; }
.knopf.rand:hover { background: var(--hover); }
.knopf.leise { background: transparent; border-color: transparent; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 4px; font-weight: 600; padding: 0 10px; }
.knopf.voll { width: 100%; }
.knopf.gross { min-height: 54px; font-size: 16px; border-radius: 14px; }
.knopf.klein { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.knopf.rund { width: 48px; min-height: 48px; padding: 0; border-radius: 50%; flex: none; }
.knopf.rund.klein { width: 44px; min-height: 44px; }
.knopf .zahl { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: rgba(255, 255, 255, .22); font-size: 13px; }
.knopf.rand .zahl, .knopf:not(.haupt):not(.invers) .zahl { background: var(--flaeche-3); }
.knopf-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.knopf-reihe > .knopf { flex: 1 1 0; min-width: 0; }

/* ---------- Felder ---------- */
.feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.feld-lbl { font-size: 14px; font-weight: 700; color: var(--text); }
.feld-lbl .frei { font-weight: 400; color: var(--muted); }
.eingabe { font: inherit; font-size: 16px; width: 100%; min-height: 50px; padding: 12px 14px; color: var(--text); background: var(--feld);
  border: 1px solid var(--line-strong); border-radius: 12px; -webkit-appearance: none; appearance: none; }
.eingabe::placeholder { color: var(--muted-2); }
.eingabe:focus { outline: 3px solid var(--ak-ln); outline-offset: 0; border-color: var(--ak-ln); }
textarea.eingabe { min-height: 104px; resize: vertical; line-height: 1.45; }
select.eingabe { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.eingabe-mit { position: relative; display: block; }
.eingabe-mit > svg.i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.eingabe-mit > .eingabe { padding-left: 46px; }
.feld-hinweis { font-size: 13px; color: var(--muted); }
.feld.fehler .eingabe { border-color: var(--fehler-ln); box-shadow: 0 0 0 3px var(--fehler-bg); }
.feld.fehler .feld-hinweis { color: var(--fehler-tx); font-weight: 600; }
.wahl { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--feld); cursor: pointer; font-size: 15px; }
.wahl input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--haupt-bg); }
.wahl.an { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.felder { display: grid; gap: 16px; }
.felder.zwei { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- Code-Feld mit sechs Kästchen ----------
   Ein echtes Eingabefeld (inputmode numeric, autocomplete one-time-code, Einfügen geht) liegt durchsichtig über sechs Kästchen.
   Das Script spiegelt den Wert in die Kästchen (.voll) und markiert die nächste Stelle (.jetzt). */
.code-feld { position: relative; display: block; width: 100%; max-width: 360px; }
.code-eingabe { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; color: transparent; background: transparent; caret-color: transparent; z-index: 1; }
.code-kaesten { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.code-kaesten > span { height: 60px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--feld); display: grid; place-items: center;
  font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--text); }
.code-kaesten > span:nth-child(3) { margin-right: 6px; }
.code-kaesten > span.jetzt { border-color: var(--text); box-shadow: 0 0 0 3px var(--ak-ln); }
.code-kaesten > span.jetzt::after { content: ""; width: 2px; height: 26px; background: var(--text); animation: code-blink 1.1s steps(1) infinite; }
@keyframes code-blink { 50% { opacity: 0; } }
.code-feld:focus-within .code-kaesten > span.jetzt { border-color: var(--fokus); }
.code-feld.fehler .code-kaesten > span { border-color: var(--fehler-ln); background: var(--fehler-bg); }
.code-feld.gesperrt .code-kaesten > span { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .code-kaesten > span.jetzt::after { animation: none; } }

/* ---------- Kästen (Hinweise) ---------- */
.kasten { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--neu-ln); background: var(--neu-bg); color: var(--text); font-size: 14.5px; }
.kasten > svg.i { margin-top: 1px; color: var(--muted); }
.kasten b { font-weight: 700; }
.kasten.ok { border-color: var(--ok-ln); background: var(--ok-bg); }
.kasten.ok > svg.i { color: var(--ok-tx); }
.kasten.warn { border-color: var(--warn-ln); background: var(--warn-bg); }
.kasten.warn > svg.i { color: var(--warn-tx); }
.kasten.fehler { border-color: var(--fehler-ln); background: var(--fehler-bg); }
.kasten.fehler > svg.i { color: var(--fehler-tx); }
.kasten.leise { background: transparent; border-color: var(--line); color: var(--muted); }

/* ---------- Plaketten ---------- */
.plakette { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--neu-bg); color: var(--neu-tx); border: 1px solid var(--neu-ln); }
.plakette svg.i { width: 14px; height: 14px; }
.plakette.ok { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-ln); }
.plakette.warn { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-ln); }
.plakette.invers { background: var(--invers-bg); color: var(--invers-tx); border-color: transparent; }
.knr { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 8px; background: var(--flaeche-3); border: 1px solid var(--line); font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }

/* ---------- Berater-Karte ---------- */
.bk-foto { position: relative; flex: none; width: 64px; height: 64px; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--foto-a), var(--foto-b)); border: 1px solid var(--line); }
.bk-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-initialen { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: .02em; }
.bk-foto.gross { width: 84px; height: 84px; border-radius: 22px; }
.bk-foto.gross .bk-initialen { font-size: 28px; }
.bk-foto.klein { width: 48px; height: 48px; border-radius: 14px; }
.bk-foto.klein .bk-initialen { font-size: 17px; }
.bk-foto.team svg.i { width: 30px; height: 30px; color: var(--ink); }
.bk { padding: 18px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.bk::before { content: ""; position: absolute; inset: 0 0 auto; height: 120px; pointer-events: none; background: radial-gradient(420px 140px at 100% 0%, var(--ak-bg), transparent 70%); }
.bk > * { position: relative; }
.bk-oben { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-person { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bk-person + .bk-person { padding-top: 14px; border-top: 1px solid var(--line); }
.bk-name { display: flex; flex-direction: column; min-width: 0; }
.bk-name b { font-size: 18px; letter-spacing: -.01em; }
.bk-name span { color: var(--muted); font-size: 14px; }
.bk-name .bk-rolle { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.bk-satz { padding: 12px 14px; border-radius: 14px; background: var(--flaeche-2); border: 1px solid var(--line); font-size: 14.5px; }
.bk-zeilen { display: flex; flex-direction: column; gap: 12px; }
.bk-zeile { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.bk-zeile > svg.i { color: var(--muted); margin-top: 1px; }
.bk-zeile > div { display: flex; flex-direction: column; min-width: 0; }
.bk-zeile b { font-size: 15px; overflow-wrap: anywhere; }
.bk-zeile span { font-size: 13px; color: var(--muted); }
.bk-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-person-knoepfe { margin-left: auto; display: flex; gap: 8px; }
/* Kompakt (Handy oben): Foto, Name, zwei runde Knöpfe */
.bk-kompakt { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; }
.bk-kompakt .bk-name { flex: 1; }
.bk-kompakt .bk-name b { font-size: 16px; }
.bk-kompakt .bk-name small { font-size: 12.5px; color: var(--muted); }
.bk-kompakt .bk-zwei { display: flex; }
.bk-kompakt .bk-zwei .bk-foto + .bk-foto { margin-left: -14px; box-shadow: 0 0 0 3px var(--flaeche); }

/* ---------- Fachkraft (anonyme Karte im Kunden-Portal) ---------- */
.kk { padding: 16px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.kk-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kk-beruf { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.kk-fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kk-fakten li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--text); }
.kk-fakten li svg.i { width: 18px; height: 18px; color: var(--muted); margin-top: 1px; }
.kk-fakten .sofort { color: var(--ok-tx); font-weight: 700; }
.kk-stand { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kk-frist { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--warn-tx); font-weight: 600; }
.kk-frist svg.i { width: 16px; height: 16px; }
.kk-knoepfe { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.kk-knoepfe.eins { grid-template-columns: 1fr; }
.kk.gewaehlt { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text), var(--sch-1); background: linear-gradient(180deg, var(--flaeche), var(--flaeche-b)); }
.kk.angefragt { background: var(--flaeche-2); }
.kk-mini { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--flaeche-2); }
.kk-mini b { display: block; font-size: 15px; }
.kk-mini span { font-size: 13px; color: var(--muted); }

/* ---------- Leere Zustände ---------- */
.leer { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 32px 20px; }
.leer-zeichen { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--flaeche-2); border: 1px solid var(--line); color: var(--ink); }
.leer-zeichen svg.i { width: 28px; height: 28px; }
.leer p { max-width: 420px; font-size: 15.5px; color: var(--text); }
.leer .knopf { min-width: 220px; }

/* ---------- Reiter, Chips ---------- */
.reiter { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--flaeche-2); border: 1px solid var(--line); }
.reiter a, .reiter button { font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 58px; padding: 6px 4px; border-radius: 12px; border: 0; background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; }
.reiter .r-zeichen { position: relative; display: inline-flex; }
.reiter .r-zeichen svg.i { width: 21px; height: 21px; }
.reiter .r-zahl { position: absolute; top: -7px; left: 14px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--invers-bg); color: var(--invers-tx); font-size: 11px; display: grid; place-items: center; }
.reiter [aria-current="page"] { background: var(--flaeche); color: var(--text); box-shadow: var(--sch-1); }
@media (min-width: 1024px) {
  .reiter { display: flex; padding: 0; gap: 4px; background: none; border: 0; }
  .reiter a, .reiter button { flex-direction: row; gap: 9px; min-height: 44px; padding: 0 14px; font-size: 14.5px; border-radius: 11px; }
  .reiter .r-zahl { position: static; }
  .reiter [aria-current="page"] { background: var(--flaeche-2); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 11px 11px 4px 4px; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--flaeche); color: var(--text);
  font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.chip svg.i { width: 17px; height: 17px; color: var(--muted); }
.chip.an { background: var(--invers-bg); color: var(--invers-tx); border-color: transparent; }
.chip.an svg.i { color: currentColor; }
.chip .chip-zahl { font-weight: 400; color: var(--muted); }
.chip.an .chip-zahl { color: inherit; opacity: .75; }
.segment { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--flaeche-2); border: 1px solid var(--line); }
.segment button { font: inherit; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.segment button[aria-pressed="true"] { background: var(--invers-bg); color: var(--invers-tx); }

/* ---------- Fenster (Handy: Blatt von unten, gross: Mitte) ---------- */
.blatt-hinter { position: fixed; inset: 0; z-index: 40; background: var(--schleier); display: flex; align-items: flex-end; justify-content: center; }
.blatt { width: 100%; max-height: 92vh; overflow: auto; border-radius: 22px 22px 0 0; background: var(--flaeche); border: 1px solid var(--line-strong); border-bottom: 0; box-shadow: var(--sch-2);
  padding: 8px var(--rand, 16px) calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.blatt::before { content: ""; align-self: center; width: 44px; height: 5px; border-radius: 99px; background: var(--line-strong); margin-bottom: 2px; }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blatt-kopf h2 { font-size: 21px; }
.blatt-fuss { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); margin: 0 calc(-1 * var(--rand, 16px)) calc(-18px - env(safe-area-inset-bottom)); padding: 12px var(--rand, 16px) calc(16px + env(safe-area-inset-bottom));
  background: var(--flaeche); border-top: 1px solid var(--line); display: flex; gap: 10px; }
.blatt-fuss > .knopf { flex: 1; }
@media (min-width: 768px) {
  .blatt-hinter { align-items: center; padding: 24px; }
  .blatt { width: min(560px, 100%); border-radius: 22px; border-bottom: 1px solid var(--line-strong); padding: 22px 26px 24px; max-height: 88vh; }
  .blatt::before { display: none; }
  .blatt-fuss { bottom: -24px; margin: 0 -26px -24px; padding: 14px 26px 20px; border-radius: 0 0 22px 22px; }
}

/* ---------- Fester Knopf unten (Handy) ---------- */
.fest-unten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px var(--rand, 16px) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--app) 30%); }
.fest-unten .knopf { width: 100%; }
.mit-fest-unten { padding-bottom: 96px; }
@media (min-width: 1024px) { .fest-unten { display: none; } .mit-fest-unten { padding-bottom: 0; } }

/* ---------- Schritte (Bewerberseite) ---------- */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
.schritte li { display: flex; flex-direction: column; gap: 7px; font-size: 12px; font-weight: 700; color: var(--muted); }
.schritte li::before { content: ""; height: 5px; border-radius: 99px; background: var(--line-strong); }
.schritte li.fertig::before { background: var(--text); }
.schritte li.jetzt { color: var(--text); }
.schritte li.jetzt::before { background: var(--haupt-bg); }

/* ---------- Mittige Karte (Anmelden, Link, Bewerben) ---------- */
.a-mitte { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 24px var(--rand) 32px; }
.a-mitte > .a-karte { width: 100%; max-width: 460px; padding: 26px 20px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 768px) { .a-mitte { justify-content: center; padding: 56px var(--rand); } .a-mitte > .a-karte { padding: 34px 32px; } }
.a-zeichen { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--flaeche-2); border: 1px solid var(--line); color: var(--ink); }
.a-zeichen svg.i { width: 28px; height: 28px; }
.a-zeichen.ok { background: var(--ok-bg); border-color: var(--ok-ln); color: var(--ok-tx); }
.a-zeichen.warn { background: var(--warn-bg); border-color: var(--warn-ln); color: var(--warn-tx); }
.a-trenner { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.a-trenner::before, .a-trenner::after { content: ""; flex: 1; height: 1px; background: var(--line); }