/* =====================================================================
   cockpit.css — Gestaltung des Cockpits (Paket C2, docs/COCKPIT-BAUPLAN.md §4; J 03.10.2026).
   Werte nach Florians Probeseite v5 (gelesen 03.10.2026 bei 1440 Pixeln): Grundschrift 12,5 px, Beschriftungen
   11,5 px, Titel 20 px, Kennzahlen 22 px; Radien 6 und 10 px; Seitenleiste #FAFAF8, Linien #ECEBE6.
   Schrift lokal aus /brand/fonts (Plus Jakarta Sans). --primaer und --akzent setzt cockpit.js aus der Marke des
   Mandanten (mandanten.marke); die Phasenfarben bleiben fest, damit eine Phase überall gleich aussieht.
   Keine Inline-Styles in der Seite (Sicherheitsrichtlinie im Caddyfile).
   Umbau nach Florians Landingpage leantree.com/lp/profil/aussendienst (U1 bis U3, J 14.10.2026 „go für U1 bis U3“ auf
   Florians Rückmeldung „das UX sieht noch nicht so aus wie die Landingpage“). Werte dort gelesen bei 1440 Pixeln: Fläche
   #FBFAF7, Karten weiß mit Rand #E4E2DA und Radius 10 px ohne Schatten, Knöpfe mit Radius 10 px, Grundschrift 16 px (hier
   13,5 px, weil das Cockpit ein Werkzeug bleibt), Text #020314, Grau #4B4A4F und #8B8A88, Blau #4170FF, Grün #1A9960,
   Amber #C26A12. Dazu Icons an Eckdaten, Zeitleiste und Rahmen, der Score als Ring, Balken im Trichter und das Telefonat
   als Karte im Verlauf (cockpit.js, U2 und U3). Die Werte von Florians Probeseite v5 (03.10.) gelten damit nicht mehr.
   U4a (J 15.10.2026 „go für U4a“; Florian 14.10. „auf jeden Fall ein Level up“, „unterschiedliche Farben machen oft Sinn“,
   15.10. „Ja bisschen größer“): Grundschrift 14 px, Titel 26, Kennzahlen 28 (Messung 15.10.: der Cockpit-Ausschnitt auf
   seiner Seite steht auf 79 Prozent, wirksam 10 bis 12 px, das Cockpit war am Rechner also schon größer; „bisschen größer“
   ist ein Zugeständnis, kein Angleichen). Phasenfarben als Tokens --ph-* für Pille, Board-Spalte und Seitenleiste,
   Kennzahl-Kacheln je Farbe und Zeichen, Zeilen „Sie sind dran“ amber, im Profil mehr Luft, Ring 52 px, Eindruck direkt
   unter dem Kopf, Rahmen-Zeilen mit Zeichen und im Reiter Lebenslauf, Fußzeile mit Haken (cockpit.js, Bauplan §14 C11).
   U4b (J 15.10.2026 „go für U4b“; Florian 14.10. „nicht alle Inhalte sofort zeigen, sondern hinter Buttons oder Tabs“): Abschnitte
   zum Aufklappen (.klapp als details/summary) in Aktivität und Profil, Verlauf mit den letzten drei Einträgen und „Ältere
   anzeigen“, Tabelle zuerst mit vier Spalten und „Mehr Spalten“ (Bauplan §14 C12).
   U4c (15.10.2026) legte die drei Blaustufen von Florians RSS-Folie direkt auf die Phasen; am 16.10. zurückgenommen (J: „zu
   unklar“, neun Phasen in drei Farben sind nicht zu unterscheiden). U4d (J 16.10. „mach Weg 2“): wieder eine Farbe je Phase wie
   bei U4a, nur Orange ist allein der Einstellung vorbehalten (Florian 15.10. zur Folie: „orange ist also unsere Erfolgsfarbe“),
   Vertragsangebot dunkelblau statt orange; Amber bleibt die Achtung-Farbe. Farblogik in website/brand/README.md (Bauplan §14 C14).
   ===================================================================== */
:root {
  --primaer: #0f1115;
  --akzent: #4170ff;
  --akzent-hell: color-mix(in srgb, var(--akzent) 10%, #fff);
  --text: #020314;
  --text-2: #4b4a4f;
  --gedaempft: #8b8a88;
  --sb: #f6f5f1;
  --flaeche: #fbfaf7;
  --linie: #e6e4dd;
  --chip-rand: #e4e2da;
  --seg: #f1f0eb;
  --hell: #f6f5f2;
  --gruen: #1a9960;
  --rot: #c4372b;
  --weiss: #fff;
  --r: 8px;
  --r-knopf: 10px;
  --r-gross: 12px;
  --schatten: 0 1px 2px rgba(2, 3, 20, .04);
  --amber: #c26a12;
  /* U4d (16.10.2026): Orange nur für die Einstellung (Florians Erfolgsfarbe, Wert aus seiner Folie); Amber bleibt Achtung */
  --orange: #f16125;
  /* U4a (15.10.2026): Phasenfarben als Tokens; --ph setzen .pill-*, .ph-* und [data-phase] je Phase, Pille, Punkt,
     Board-Spalte und Seitenleiste lesen es. Violett für die Antwortquote. U4d: Eingestellt orange, Vertragsangebot dunkelblau. */
  --ph-neu: #9a99a0; --ph-kontakt: #4170ff; --ph-erstgespraech: #7b61ff; --ph-profil: #e09a2b; --ph-vorstellung: #1a9960;
  --ph-zweitgespraech: #0f9fb0; --ph-angebot: #2a46b8; --ph-eingestellt: var(--orange); --ph-abgesagt: #c9c8c3;
  --violett: #6a4fd8;
  --sb-breite: 256px;
  --schrift: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--schrift); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--weiss);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.pn-offen { overflow: hidden; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
h2 { font-size: 17px; font-weight: 600; margin: 0; }
h3 { font-size: 12.5px; font-weight: 500; color: var(--gedaempft); margin: 0 0 8px; }
p { margin: 0; }
.sub { color: var(--text-2); }
.klein { font-size: 12.5px; color: var(--gedaempft); margin-top: 6px; }
.gedaempft { color: var(--gedaempft); }
.fehler { color: var(--rot); margin-top: 8px; }
.fehler:empty, .erfolg:empty { display: none; }
.erfolg { color: var(--gruen); margin-top: 8px; font-weight: 500; }
.noscript { padding: 24px 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ik { width: 16px; height: 16px; flex: none; }
/* Überschrift mit Zeichen davor (U2, wie die Kacheln auf Florians Landingpage) */
.h3-ik { display: flex; align-items: center; gap: 6px; }
.h3-ik .ik { width: 14px; height: 14px; color: var(--akzent); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ---- Knöpfe und Eingaben ----------------------------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px;
  border: 1px solid var(--chip-rand); border-radius: var(--r-knopf); background: var(--weiss); cursor: pointer;
  font-weight: 500; text-decoration: none; white-space: nowrap;
}
.knopf:hover { background: var(--hell); }
.knopf-haupt { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.knopf-haupt:hover { background: var(--primaer); filter: brightness(1.18); }
.knopf:disabled { opacity: .42; cursor: not-allowed; filter: none; }
.knopf-breit { width: 100%; height: 42px; }
.knopf-s {
  height: 30px; padding: 0 12px; border: 1px solid var(--chip-rand); border-radius: var(--r); background: var(--weiss);
  cursor: pointer; font-weight: 500; font-size: 13px;
}
.knopf-s:hover:not(:disabled) { background: var(--hell); }
.knopf-s:disabled { opacity: .42; cursor: default; }
.knopf-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border: 0; border-radius: var(--r); background: transparent; color: var(--text-2); cursor: pointer;
}
.knopf-icon:hover { background: var(--seg); color: var(--text); }
input[type=email], input[type=password], input[type=search] {
  height: 36px; padding: 0 12px; border: 1px solid var(--chip-rand); border-radius: var(--r); background: var(--weiss);
  font-size: 14px; min-width: 0;
}
input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }
.chip {
  height: 32px; padding: 0 12px; border: 1px solid var(--chip-rand); border-radius: var(--r); background: var(--weiss);
  font-size: 13.5px; color: var(--text-2); display: inline-flex; align-items: center; white-space: nowrap;
}
select.chip {
  appearance: none; -webkit-appearance: none; padding-right: 26px; cursor: pointer;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%238b8a88' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 12px 12px;
}
select.chip:hover { border-color: #dddcd5; color: var(--text); }
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--seg); }
.seg-k {
  height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2);
  cursor: pointer; font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.seg-k.an { background: var(--weiss); color: var(--text); box-shadow: 0 1px 2px rgba(2, 3, 20, .08); }

/* ---- Seiten ohne Konto: Anmeldung, Demo-Tor, Wartung ------------------------------------------------------- */
.mitte { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--sb); }
.karte-mitte {
  width: 100%; max-width: 420px; padding: 32px 30px; background: var(--weiss); border: 1px solid var(--chip-rand);
  border-radius: var(--r-gross); box-shadow: var(--schatten);
}
.karte-mitte h1 { margin-bottom: 6px; }
.karte-mitte .sub + .sub { margin-top: 8px; }
.karte-mitte > .knopf { margin-top: 18px; }
.karte-mitte .klein { margin-top: 18px; }
.marke-logo img { display: block; height: 28px; width: auto; margin-bottom: 18px; }
.marke-logo:empty { display: none; }
.zeile-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.zeile-form input { flex: 1 1 180px; }
.spalte-form { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.spalte-form label { font-size: 11.5px; font-weight: 500; color: var(--gedaempft); }
.spalte-form .knopf { margin-top: 6px; height: 36px; }

/* ---- Gerüst ------------------------------------------------------------------------------------------------ */
.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
/* Band oben: seit 06.10.2026 nur noch in der Vorschau, die Vorführung hat keins mehr (J: Marke fest Leantree, ohne
   Umschalter); der Name „demo-leiste“ bleibt, weil die Druckregel unten ihn ausblendet */
.demo-leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 6px 16px; background: var(--text); color: #fff; font-size: 12px;
}
/* Vorschau für Operatoren (C3): eigenes Band, damit niemand sie mit der Vorführung oder dem echten Zugang verwechselt */
.vorschau-leiste { background: #8a4b08; }
.vorschau-hinweis { font-weight: 600; }
.rahmen { flex: 1; display: flex; min-height: 0; }
.hb-huelle { flex: 1; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; background: var(--flaeche); }
.hb { flex: 1 0 auto; padding: 20px 32px 44px; max-width: 1280px; }
/* Fußzeile mit Impressum und Datenschutz auf jeder Seite (J 05.10.2026): auf kurzen Seiten unten am Fenster,
   auf langen nach dem Inhalt; Linie so breit wie der Inhalt des Hauptbereichs */
.hb-fuss {
  flex: none; max-width: calc(1280px - 64px); margin: 0 32px; padding: 12px 0 16px; border-top: 1px solid var(--linie);
  font-size: 12px; color: var(--gedaempft);
}
.hb-fuss a { text-decoration: none; }
.hb-fuss a:hover { color: var(--text); text-decoration: underline; }
/* Stellen mit Tabelle oder Board nutzen breite Fenster (J 05.10.2026: rechts blieb Platz frei, das Board lief über) */
.hb-weit .hb { max-width: 1680px; }
.hb-weit .hb-fuss { max-width: calc(1680px - 64px); }
.kopf-mobil, .sb-hinter { display: none; }

/* ---- Seitenleiste ------------------------------------------------------------------------------------------ */
.sb {
  width: var(--sb-breite); flex: none; display: flex; flex-direction: column; padding: 14px 12px 12px;
  background: var(--sb); border-right: 1px solid var(--linie); overflow-y: auto;
}
.sb-kopf { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; }
.sb-logo {
  width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--primaer); color: #fff; font-weight: 600;
}
.sb-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-firma, .sb-marke { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-firma { font-weight: 600; }
.sb-marke { color: var(--gedaempft); font-size: 11.5px; }
.sb-ich { border: 0; cursor: pointer; }
.sb-such { display: block; padding: 0 2px 8px; }
.sb-such input { width: 100%; height: 36px; font-size: 13.5px; }
.sb-liste { list-style: none; margin: 0; padding: 0; }
.sb-punkt {
  display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 5px 10px; border-radius: var(--r);
  color: var(--text-2); text-decoration: none;
}
.sb-punkt:hover { background: var(--seg); color: var(--text); }
.sb-punkt.an { background: var(--weiss); color: var(--text); font-weight: 500; box-shadow: 0 0 0 1px var(--linie), var(--schatten); }
.sb-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-zahl { color: var(--gedaempft); font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.sb-gr { margin: 18px 10px 6px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--gedaempft); }
.sb-stelle { color: var(--text); font-weight: 500; }
.sb-stelle.pausiert { color: var(--gedaempft); font-weight: 400; }
.sb-phasen { list-style: none; margin: 2px 0 6px 13px; padding: 0 0 0 8px; border-left: 1px solid var(--linie); }
.sb-phasen .sb-punkt { min-height: 28px; padding: 3px 10px; font-weight: 400; }
.sb-phasen .sb-punkt.an { background: color-mix(in srgb, var(--ph, var(--akzent)) 12%, #fff); box-shadow: none; color: color-mix(in srgb, var(--ph, var(--text)) 72%, #000); font-weight: 500; }
.sb-leer { padding: 4px 8px; color: var(--gedaempft); }
.sb-fuss { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 12px 6px 2px; border-top: 1px solid var(--linie); }
.sb > .sb-liste:last-of-type { margin-bottom: 16px; }
.sb-fuss-t { min-width: 0; display: flex; flex-direction: column; }
.sb-fuss-t b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-fuss-t small { color: var(--gedaempft); font-size: 11.5px; }

.avatar {
  width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--seg); color: var(--text-2); font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
}
.avatar-k { width: 22px; height: 22px; font-size: 9.5px; background: var(--akzent-hell); color: var(--akzent); }
.avatar-g { width: 48px; height: 48px; font-size: 16px; }

/* ---- Phasen und Herkunft ----------------------------------------------------------------------------------- */
.ph { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ph, var(--gedaempft)); }
/* U4a (15.10.2026, Florian „unterschiedliche Farben machen oft Sinn“): je Phase ein Token; Punkt, Pille, Board-Spalte
   ([data-phase] am Abschnitt) und Seitenleiste ([data-phase] am Eintrag) tragen dieselbe Farbe */
.ph-neu, .pill-neu, [data-phase="neu"] { --ph: var(--ph-neu); }
.ph-kontakt, .pill-kontakt, [data-phase="kontakt"] { --ph: var(--ph-kontakt); }
.ph-erstgespraech, .pill-erstgespraech, [data-phase="erstgespraech"] { --ph: var(--ph-erstgespraech); }
.ph-profil, .pill-profil, [data-phase="profil"] { --ph: var(--ph-profil); }
.ph-vorstellung, .pill-vorstellung, [data-phase="vorstellung"] { --ph: var(--ph-vorstellung); }
.ph-zweitgespraech, .pill-zweitgespraech, [data-phase="zweitgespraech"] { --ph: var(--ph-zweitgespraech); }
.ph-angebot, .pill-angebot, [data-phase="angebot"] { --ph: var(--ph-angebot); }
.ph-eingestellt, .pill-eingestellt, [data-phase="eingestellt"] { --ph: var(--ph-eingestellt); }
.ph-abgesagt, .pill-abgesagt, [data-phase="abgesagt"] { --ph: var(--ph-abgesagt); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 9px; border: 1px solid color-mix(in srgb, var(--ph, var(--gedaempft)) 28%, #fff);
  border-radius: 999px; background: color-mix(in srgb, var(--ph, var(--gedaempft)) 12%, #fff); color: color-mix(in srgb, var(--ph, var(--gedaempft)) 72%, #000); font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.pill-abgesagt { color: var(--gedaempft); }
.quelle { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); white-space: nowrap; }
.q {
  width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--seg); color: var(--text-2); font-size: 10px; font-weight: 600;
}
.q-heyflow { background: #e8eeff; color: #2f55d4; }
.q-chat { background: #e3f5ec; color: #1a7f50; }
.q-bewerbung_v1 { background: #fff1e0; color: #b4610a; }
.q-pool { background: #f1ebff; color: #6a4fd8; }

/* ---- Kopf der Stelle und Kacheln --------------------------------------------------------------------------- */
.hb-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 30px; margin-bottom: 14px; }
.krumen { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--gedaempft); }
.krumen span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.krumen b { color: var(--text); font-weight: 500; white-space: nowrap; }
.krumen-t { color: #d6d5cf; }
.hb-rechts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.live { display: inline-flex; align-items: center; gap: 7px; color: var(--gruen); font-size: 12px; font-weight: 500; white-space: nowrap; }
.live-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 3px rgba(26, 153, 96, .16); }
.live.pausiert { color: var(--gedaempft); }
.live.pausiert .live-punkt { background: #c9c8c3; box-shadow: none; }
.hb-titel { margin-bottom: 20px; }
.hb-titel .sub { margin-top: 3px; }
.hb-titel select.chip { margin-left: 4px; }
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); box-shadow: var(--schatten); }
.kpi small { font-size: 12.5px; font-weight: 500; color: var(--gedaempft); }
.kpi b { font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-sub { min-height: 1.5em; font-size: 12.5px; color: var(--gedaempft); }
/* U4a (15.10.2026, Florian): die vier Kacheln der Stelle mit Zeichen im farbigen Quadrat und farbiger Oberkante, Bewerbungen
   blau, Antwortquote violett, Erstgespräche grün, Vorstellungsgespräche amber (Farbe in --kf, Zeichen in KACHEL_ZEICHEN);
   die Kacheln der Auswertung und des Berichts bleiben ohne Farbe. Seit 0512 (Call J+F+A 02.11.2026, Beschluss 1) dieselben
   Farben für die vier Kopfzahlen: Bewerbungen blau, passende Rahmenbedingung violett, qualifizierte Bewerbung grün, eingestellt
   amber (das Orange der Einstellung trägt keine Kachel, website/brand/README.md) */
.kpi-kopf { display: flex; align-items: center; gap: 8px; }
.kpi-ik { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--kf, var(--akzent)) 12%, #fff); color: var(--kf, var(--akzent)); }
.kpi-ik .ik { width: 15px; height: 15px; }
.kpi-farbig { border-top: 3px solid var(--kf, var(--akzent)); }
.kpi-bewerbungen { --kf: var(--akzent); }
.kpi-rahmen { --kf: var(--violett); }
.kpi-qualifiziert { --kf: var(--gruen); }
.kpi-eingestellt { --kf: var(--amber); }

/* ---- Werkzeugleiste, Tabelle, Board ------------------------------------------------------------------------ */
.tb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 12px; }
.tb-rechts { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--gedaempft); }
.liste { transition: opacity .15s; }
.liste.laedt { opacity: .55; }
.tab-huelle { overflow-x: auto; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); box-shadow: var(--schatten); }
.tab { width: 100%; border-collapse: collapse; }
.tab th {
  padding: 10px 14px; border-bottom: 1px solid var(--linie); background: var(--flaeche); text-align: left;
  font-size: 12.5px; font-weight: 500; color: var(--gedaempft); white-space: nowrap;
}
.tab td { padding: 10px 14px; border-bottom: 1px solid var(--linie); white-space: nowrap; vertical-align: middle; }
.tab tbody tr:last-child td { border-bottom: 0; }
.tab .rechts { text-align: right; font-variant-numeric: tabular-nums; }
.zeile { cursor: pointer; }
.zeile:hover td { background: var(--hell); }
.zeile.gewaehlt td { background: var(--akzent-hell); }
/* U4a (15.10.2026, Florian 14.10.): Zeilen und Karten, bei denen der Kunde dran ist („Sie: …“ im nächsten Schritt), amber
   markiert; die Markierung setzt sieDran() in cockpit.js */
.zeile-sie td { background: color-mix(in srgb, var(--amber) 6%, #fff); }
.zeile-sie td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.bkarte-sie { border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 5%, #fff); }
.name-zelle { display: inline-flex; align-items: center; gap: 9px; }
.td-name a { font-weight: 500; text-decoration: none; }
.td-name a:hover { text-decoration: underline; }
.zust { display: inline-flex; align-items: center; gap: 6px; }
.board { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
/* Läuft Board oder Tabelle doch über (schmales Fenster, viele Phasen): dünner, heller Balken statt des breiten grauen
   (J 05.10.2026); dunkler, sobald die Maus darüber steht */
.board, .tab-huelle { scrollbar-width: thin; scrollbar-color: var(--chip-rand) transparent; }
.board:hover, .tab-huelle:hover { scrollbar-color: #c9c8c1 transparent; }
/* Spalten teilen sich die Breite und werden bis 150 Pixel schmal, erst dann läuft das Board über (J 05.10.2026) */
.spalte { flex: 1 1 0; min-width: 150px; min-height: 120px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--sb); border: 1px solid var(--linie); border-top: 3px solid var(--ph, var(--linie)); border-radius: var(--r-gross); }
.spalte header { display: flex; align-items: center; gap: 7px; padding: 2px 4px 4px; }
.spalte header b { flex: 1; font-weight: 600; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }   /* 0472: lange Status-Namen brechen in der Spalte um */
/* „Abgesagt“ eingeklappt (J 05.10.2026): schmale Leiste mit Punkt, Zahl und senkrechtem Titel; Klick klappt auf */
.spalte-zu { flex: none; width: 40px; min-width: 0; align-items: center; gap: 8px; padding: 11px 0; color: var(--text-2); text-align: center; cursor: pointer; }
.spalte-zu:hover { background: var(--seg); color: var(--text); }
.spalte-zu-t { writing-mode: vertical-rl; font-weight: 600; white-space: nowrap; }
.spalte-einklappen { width: 22px; height: 22px; margin: -3px -4px -3px 0; }
.spalte-einklappen .ik { width: 14px; height: 14px; }
.bkarte { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--weiss); border: 1px solid var(--chip-rand); border-radius: 10px; box-shadow: var(--schatten); text-decoration: none; }
.bkarte:hover { border-color: #dddcd5; box-shadow: 0 1px 3px rgba(2, 3, 20, .06); }
.bkarte.gewaehlt { border-color: var(--akzent); }
.bkarte b { font-weight: 500; }
/* Nächster Schritt (C8b, J 05.10.2026): wer ist dran; „Sie“ in der Farbe der Marke, rot bei Verzug */
.schritt { font-size: 13px; color: var(--text-2); }
.schritt b { font-weight: 500; color: var(--text); }
.schritt-sie b { color: var(--akzent); }
.schritt.f-rot, .schritt.f-rot b { color: var(--rot); }
.bkarte-schritt { margin-top: 2px; line-height: 1.35; }
/* die Spalte bricht um, damit die Tabelle bei 1366 Pixeln nicht überläuft */
.tab td.td-schritt { white-space: normal; min-width: 150px; max-width: 230px; line-height: 1.35; }
.pn-schritt { margin: 6px 0 0; font-size: 12.5px; }
/* 0513 (Call J+F+A 02.11.2026, A4): der nächste gebuchte Termin im Kopf der Bewerbung, mit Kalender-Zeichen */
.pn-termin { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 0; font-size: 12.5px; }
.pn-termin .ik { width: 14px; height: 14px; color: var(--akzent); }
.pn-termin b { font-weight: 600; }
/* Kontaktstand (C8c): ohne Wortlaut; abgemeldet in Rot */
.pn-kontaktstand { margin: 3px 0 0; font-size: 12.5px; color: var(--text-2); }
.pn-kontaktstand.warn { color: var(--rot); }
.phase-seit { display: block; margin-top: 3px; font-size: 12px; color: var(--gedaempft); }
/* 0472 (psb Stufe 2 P1, 23.10.2026): Status aus dem Cockpit, der noch nicht in Leadtable steht. Gegenlesen 23.10.2026: grau
   statt Amber, die Kundin muss nichts tun (Amber heißt „Sie sind dran“, Farblogik in website/brand/README.md) */
.lt-offen { display: block; margin-top: 3px; font-size: 12px; color: var(--gedaempft); }
/* Kacheln als Filter (C8b) */
.kpi-knopf { text-align: left; background: var(--weiss); font: inherit; color: inherit; cursor: pointer; }
.kpi-knopf:hover { border-color: #dddcd5; }
/* 0512: ohne Server-Update lassen sich die drei Stufen nicht anklicken */
.kpi-knopf:disabled { cursor: default; }
.kpi-knopf:disabled:hover { border-color: var(--chip-rand); }
/* 0512 (Call J+F+A 02.11.2026, Beschluss 2): „Auswertung seit …“ unter den Kacheln, wenn das Konto einen Stichtag hat */
.kacheln-hinweis { margin: -12px 0 18px; color: var(--gedaempft); }
/* 0512 (A7): Hinweis über dem Board, wenn es nicht alle offenen Bewerbungen zeigt */
.board-hinweis { margin: 0 0 10px; color: var(--gedaempft); }
/* 0523 (Drag & Drop im Board, Regeln Johannes 03.11.2026): Karten ziehen; beim Ziehen stehen die Ziele (Status, die die Kundin
   setzt) mit gestrichelter Kante, die übrigen Spalten grau; die Spalte unter dem Zeiger hebt sich ab */
.bkarte[draggable="true"] { cursor: grab; }
.bkarte-zieht { opacity: .5; }
.board-zieht .spalte:not(.spalte-ziel) { opacity: .45; }
.board-zieht .spalte-ziel { outline: 1px dashed #c9c8c1; outline-offset: -1px; }
.board-zieht .spalte-ziel.spalte-ueber { outline: 2px solid var(--akzent); background: var(--akzent-hell); }
/* 0523: Hinweis unten nach einem Zug, mit „Rückgängig“; unter den Dialogen (z-index 60), über dem Detail (40) */
.meldung { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 10px;
  max-width: min(640px, calc(100vw - 32px)); padding: 9px 10px 9px 16px; background: var(--text); color: var(--weiss); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(2, 3, 20, .22); font-size: 13.5px; line-height: 1.4; }
.meldung-t { flex: 1; min-width: 0; }
.meldung .meldung-knopf { flex: none; background: transparent; color: var(--weiss); border-color: rgba(255, 255, 255, .45); }
.meldung .meldung-zu { flex: none; color: var(--weiss); }
/* 0523: Erklärung der Antworten im Dialog „Gespräch am …“ und „Gespräch absagen?“ */
.dlg-liste { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; color: var(--text-2); font-size: 13.5px; }
.kpi-knopf.an { border-color: var(--kf, var(--akzent)); box-shadow: 0 0 0 1px var(--kf, var(--akzent)); }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; }
/* U4b (15.10.2026): die Tabelle zeigt zuerst Name, Status, nächsten Schritt und letzte Aktivität; „Mehr Spalten“ (spaltenKnopf in
   cockpit.js) holt Wohnort, Entfernung, Quelle, Verantwortlich und Eingang dazu */
.tab-kompakt [data-k="Wohnort"], .tab-kompakt [data-k="km"], .tab-kompakt [data-k="Quelle"], .tab-kompakt [data-k="Verantwortlich"], .tab-kompakt [data-k="Eingang"] { display: none; }
.chip-knopf { cursor: pointer; }
.chip-knopf:hover { border-color: #dddcd5; color: var(--text); }
.chip-knopf[aria-pressed="true"] { background: var(--akzent-hell); border-color: color-mix(in srgb, var(--akzent) 30%, #fff); color: var(--akzent); }
.chip-weg { border: 0; background: none; padding: 0 2px; font-size: 14px; line-height: 1; color: var(--gedaempft); cursor: pointer; }
.chip-weg:hover { color: var(--text); }
.bkarte-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 6px; margin-top: 4px; font-size: 12px; }
/* Zeitangabe am Stück; passt sie nicht neben die Quelle, rutscht sie rechtsbündig in die nächste Zeile */
.bkarte-fuss > :last-child { margin-left: auto; white-space: nowrap; }
.leer-klein { margin: 4px; font-size: 11.5px; color: var(--gedaempft); }
.tf { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; color: var(--gedaempft); }
.tf-knoepfe { display: flex; gap: 6px; }
.leer { padding: 24px 0; color: var(--gedaempft); }
.leer-karte { padding: 36px 24px; border: 1px dashed var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); text-align: center; }
.leer-karte .sub { margin-top: 4px; }
/* Leerzustand mit Zeichen (U3): Kreis in der hellen Akzentfarbe über dem Titel */
.leer-karte b { display: block; font-size: 14.5px; }
.leer-ik { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent); }
.leer-ik .ik { width: 20px; height: 20px; }
.leer-karte-klein { padding: 24px 18px; }

/* ---- Detail je Bewerber ------------------------------------------------------------------------------------ */
.pn-hinter { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end; background: rgba(2, 3, 20, .16); }
.pn {
  width: min(640px, 100%); height: 100%; display: flex; flex-direction: column; background: var(--weiss);
  box-shadow: -8px 0 30px rgba(2, 3, 20, .12); outline: none;
}
.pn-kopf { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 14px; }
.pn-kopf > .sub, .pn-kopf > .fehler { flex: 1; margin: 6px 0 0; }
.pn-name { flex: 1; min-width: 0; }
.pn-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pn-name .sub { margin-top: 4px; }
.pn-name .klein { margin-top: 2px; }
.pn-zu { margin: -4px -6px 0 0; }
.pn-kontakt { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0 22px 12px 84px; }
.pn-kontakt a { color: var(--akzent); font-weight: 500; text-decoration: none; }
.pn-kontakt a:hover { text-decoration: underline; }
.reiterleiste { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--linie); overflow-x: auto; }
.reiter {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding: 10px 12px; border: 0;
  border-bottom: 2px solid transparent; background: none; color: var(--gedaempft); cursor: pointer; font-weight: 500; white-space: nowrap;
}
.reiter:hover { color: var(--text); }
.reiter.an { color: var(--text); border-bottom-color: var(--text); }
.pn-inhalt { flex: 1; overflow-y: auto; padding: 22px 24px 26px; }
.pn-block { margin-bottom: 24px; }
/* U4b (15.10.2026, Florian 14.10. „nicht alle Inhalte sofort zeigen, sondern hinter Buttons oder Tabs“): Abschnitte zum
   Aufklappen als details/summary (klapp() in cockpit.js); zu: eine Zeile mit Pfeil, offen: Überschrift und Inhalt wie ein Block.
   Die Überschrift (h3) sitzt in der summary, deshalb dort ohne Abstand. */
.klapp { border-top: 1px solid var(--linie); padding-top: 8px; }
.klapp:not([open]) { margin-bottom: 8px; }
.klapp-kopf { display: flex; align-items: center; gap: 8px; min-height: 28px; list-style: none; cursor: pointer; color: var(--text-2); }
.klapp-kopf::-webkit-details-marker { display: none; }
.klapp-kopf h3 { flex: 1; margin: 0; }
.klapp-kopf:hover h3 { color: var(--text); }
.klapp-pfeil { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 6px; color: var(--gedaempft); transition: transform .15s; }
.klapp-pfeil .ik { width: 14px; height: 14px; }
.klapp[open] > .klapp-kopf .klapp-pfeil { transform: rotate(90deg); }
.klapp-zahl { padding: 1px 8px; border-radius: 999px; background: var(--seg); color: var(--text-2); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.klapp-zahl:empty { display: none; }
.klapp-inhalt { margin-top: 10px; }
.klapp-inhalt > .pn-block:last-child { margin-bottom: 0; }
.pn-lead { margin-bottom: 16px; font-size: 16px; font-weight: 500; }
.fliess { white-space: pre-line; }
.pn-fuss { padding: 14px 22px 18px; border-top: 1px solid var(--linie); }
.pn-fuss .klein, .pn-fuss .erfolg, .pn-fuss .stand { text-align: center; }
.pn-fuss .erfolg { margin: 0; }
/* C4 (0368): Stand in einer Zeile über „Rückmeldung geben“ */
.stand { margin: 0 0 10px; font-weight: 500; color: var(--text-2); }
.stand.gut { color: var(--gruen); }
.pn-fuss .stand:last-child { margin-bottom: 0; }
.pn-fuss .klein + .knopf { margin-top: 10px; }
/* psb Stufe 2 P2 (0473): Knöpfe je Status im Fuß des Details, darunter das Zurücknehmen der letzten Änderung */
.status-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pn-fuss .status-zurueck { width: 100%; margin-top: 10px; }
.status-knoepfe + .klein, .status-zurueck + .klein { margin-top: 10px; }
/* Der erste Verlauf (C2, ein Punkt je Richtung) ist seit C9 ersetzt; seine Regeln (.verlauf, .vl-punkt, .vl-zeit) stießen
   mit den gleichnamigen Klassen des neuen Verlaufs zusammen (Versatz der Punkte) und sind am 07.10.2026 entfernt */
.termine { list-style: none; margin: 0; padding: 0; }
.termine li { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 6px; padding: 10px 12px; border: 1px solid var(--chip-rand); border-radius: 10px; }
/* C4 (0368): Gespräch bei Ihnen, mit Terminvorschlag, Eintragen, Verschieben und Absagen */
.termin-box { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--chip-rand); border-radius: 10px; background: var(--sb); }
.termin-box.steht { background: color-mix(in srgb, var(--gruen) 6%, #fff); border-color: color-mix(in srgb, var(--gruen) 25%, #fff); }
.termin-box b { font-weight: 600; }
.termin-box .klein { margin-top: 2px; }
.termin-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.knopf-s-haupt { background: var(--primaer); border-color: var(--primaer); color: #fff; }
.knopf-s-haupt:hover:not(:disabled) { background: var(--primaer); filter: brightness(1.18); }

/* ---- Auswertung und Unternehmen ---------------------------------------------------------------------------- */
.kz, .module, .team { list-style: none; margin: 0; padding: 0; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); box-shadow: var(--schatten); max-width: 760px; }
.kz-zeile, .module li, .team li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
.kz-zeile:last-child, .module li:last-child, .team li:last-child { border-bottom: 0; }
.kz-zeile b { font-variant-numeric: tabular-nums; }
/* Trichter mit Balken (U3, 14.10.2026): Anteil an den Bewerbungen als Balken zwischen Titel und Zahl */
.kz-zeile.mit-balken { display: grid; grid-template-columns: minmax(0, 1fr) 160px 52px; align-items: center; }
.kz-zeile.mit-balken b { text-align: right; }
.kz-balken { display: block; width: 100%; height: 8px; }
/* Auswertung (C8a, J 05.10.2026): Überschriften der Blöcke und Hinweis auf fehlende Rückmeldungen */
.aw-titel { font-size: 14px; font-weight: 600; margin: 26px 0 12px; }
.aw-hinweis { max-width: 760px; margin: 14px 0 0; padding: 12px 16px; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); }
.aw-hinweis a { color: var(--akzent); }
.modul-t { display: flex; flex-direction: column; gap: 2px; }
.modul-t b { font-weight: 500; }
.modul-stand { font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.module li.an .modul-stand { color: var(--gruen); }
.module li.aus, .module li.aus .modul-stand { color: var(--gedaempft); }
/* nur Vorführung: Baustein „in Vorbereitung“ statt „nicht gebucht“ */
.module li.bald .modul-stand { color: var(--akzent); }
.hb > .pn-block { max-width: 760px; }

/* ---- So arbeiten wir für Sie (J 05.10.2026): Weg als Zeitleiste, Farbe nach dem, der den Schritt übernimmt ---------- */
.st-legende { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.strecke { list-style: none; margin: 0 0 18px; padding: 0; max-width: 760px; }
.st-schritt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 16px; }
.st-schritt::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--linie); }
.st-schritt:last-child { padding-bottom: 0; }
.st-schritt:last-child::before { display: none; }
.st-punkt { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 1px solid var(--linie); background: var(--hell); color: var(--text); }
.st-auto .st-punkt { background: var(--akzent); border-color: var(--akzent); color: var(--weiss); }
.st-team .st-punkt { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }
.st-sie .st-punkt { background: var(--primaer); border-color: var(--primaer); color: var(--weiss); }
.st-aus .st-punkt, .st-bald .st-punkt { background: var(--hell); border-color: var(--linie); color: var(--gedaempft); }
.st-inhalt { min-width: 0; padding-top: 3px; }
.st-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.st-kopf b { font-weight: 600; margin-right: 2px; }
.st-wer, .st-zeit, .st-stand { font-size: 11.5px; line-height: 1.5; border-radius: 999px; padding: 1px 9px; border: 1px solid var(--chip-rand); background: var(--weiss); }
.st-wer, .st-stand { white-space: nowrap; }
.st-zeit { background: var(--akzent-hell); border-color: transparent; }
.st-stand { color: var(--gedaempft); }
.st-bald .st-stand { color: var(--akzent); }
.st-text { margin: 5px 0 0; line-height: 1.5; }
.st-aus .st-kopf b, .st-aus .st-text, .st-bald .st-text { color: var(--gedaempft); }
.st-inhalt .knopf-link { margin-top: 6px; }
.st-legende .st-wer::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.st-l-auto::before { background: var(--akzent); }
.st-l-team::before { background: var(--gruen); }
.st-l-sie::before { background: var(--primaer); }
.st-mensch { max-width: 760px; padding: 14px 16px; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); }
.st-mensch h3 { margin-top: 0; }

/* ---- Dialoge ----------------------------------------------------------------------------------------------- */
.dlg-schicht { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(2, 3, 20, .32); }
.dlg { width: 100%; max-width: 440px; padding: 24px; background: var(--weiss); border-radius: 14px; box-shadow: 0 20px 50px rgba(2, 3, 20, .2); }
.dlg h2 { margin-bottom: 8px; }
.dlg .sub { margin-bottom: 16px; }
.dlg-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dlg .fehler { margin: -6px 0 12px; }
/* C4 (0368): Felder wie frage() im Portal (Datum, ganzer Satz, Pflicht-Haken) und die Auswahl der Rückmeldung */
.dlg { max-height: calc(100vh - 32px); overflow-y: auto; }
.dlg-felder { display: flex; flex-direction: column; gap: 12px; margin: -4px 0 16px; }
.dlg-feld { display: flex; flex-direction: column; gap: 5px; }
.dlg-feld > span { font-size: 11.5px; font-weight: 500; color: var(--gedaempft); }
.dlg-feld textarea, .dlg-feld input, .dlg-feld select {
  width: 100%; padding: 8px 11px; border: 1px solid var(--chip-rand); border-radius: var(--r); background: var(--weiss);
  font: inherit; font-size: 13px; color: inherit;
}
.dlg-feld textarea { min-height: 72px; resize: vertical; }
.dlg-feld input, .dlg-feld select { height: 36px; }
.dlg-feld textarea:focus, .dlg-feld select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }
.dlg-haken { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.45; }
.dlg-haken input { width: 16px; height: 16px; margin: 1px 0 0; flex: none; }
.dlg-wahl { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 16px; }
.wahl {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--chip-rand); border-radius: var(--r); background: var(--weiss); cursor: pointer; text-align: left; font-weight: 500;
}
.wahl:hover { background: var(--hell); }
.wahl.an { border-color: var(--akzent); background: var(--akzent-hell); }
.wahl small { font-size: 11px; font-weight: 500; color: var(--akzent); }
.wahl-zurueck { justify-content: center; border-style: dashed; color: var(--text-2); font-weight: 400; }

/* ---- Meine Aufgaben (C4, 0368): Ampel wie die Startseite des Portals ------------------------------------------- */
.aufgaben { list-style: none; margin: 0; padding: 0; max-width: 860px; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); box-shadow: var(--schatten); }
.aufgaben li + li { border-top: 1px solid var(--linie); }
.aufgabe { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; text-decoration: none; }
.aufgabe:hover { background: var(--hell); }
.aufgabe-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aufgabe-t b { font-weight: 600; }
.aufgabe-los { flex: none; display: inline-flex; align-items: center; }
.ampel { width: 10px; height: 10px; flex: none; margin-top: 4px; border-radius: 50%; background: var(--akzent); }
.ampel-rot { background: var(--rot); }
.ampel-gelb { background: #e09a2b; }
.ampel-gruen { background: var(--gruen); }
.ampel-blau { background: var(--akzent); }
#sb-aufgaben-zahl:not(:empty) {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rot); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600;
}

/* ---- Posteingang, Nachrichten, Bericht, Kurve (C5, 0369) --------------------------------------------------------- */
a.knopf-s, .knopf-link { display: inline-flex; align-items: center; text-decoration: none; }
#sb-post-zahl:not(:empty) {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--akzent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600;
}
.kpi-kurve:empty { display: none; }
.kurve { display: block; width: 100%; max-width: 160px; height: 20px; margin-top: 6px; }
.kurve-saeule { fill: color-mix(in srgb, var(--akzent) 26%, #fff); }
.kurve-jetzt { fill: var(--akzent); }
.post-raster { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; max-width: 1100px; }
.post-liste { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.post-faeden { list-style: none; margin: 0; padding: 0; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); box-shadow: var(--schatten); overflow: hidden; }
.post-faeden li + li { border-top: 1px solid var(--linie); }
.post-eintrag { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; text-decoration: none; }
.post-eintrag:hover { background: var(--hell); }
.post-eintrag.an { background: var(--akzent-hell); }
.post-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.post-kopf b { font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-kopf .gedaempft { flex: none; font-size: 11.5px; }
.post-vorschau { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.post-fuss .klein { margin: 0; }
.post-neu-zahl { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--akzent); color: #fff; font-size: 10.5px; font-weight: 600; }
.post-faden { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); box-shadow: var(--schatten); }
.post-faden[hidden] { display: none; }
.post-faden > .sub, .post-faden > .fehler, .post-faden > .leer-karte { margin: 16px; }
.post-faden > .leer-karte { border: 0; }
.post-faden-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.post-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.post-titel b { font-size: 13.5px; font-weight: 600; }
.post-zurueck { display: none; }
.post-leer { padding: 16px 14px; }
.post-faden .blasen { max-height: 52vh; overflow-y: auto; padding: 14px; }
.blasen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.blase { max-width: 82%; display: flex; flex-direction: column; gap: 4px; padding: 8px 11px; border-radius: 10px; }
.blase-team { align-self: flex-start; background: var(--hell); border-bottom-left-radius: 3px; }
.blase-kunde { align-self: flex-end; background: var(--akzent-hell); border-bottom-right-radius: 3px; }
.blase-text { white-space: pre-line; overflow-wrap: anywhere; }
.blase-fuss { font-size: 11px; color: var(--gedaempft); }
.pn-block .blasen { margin-bottom: 4px; }
.post-schreiben { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--linie); }
.post-schreiben textarea, .notiz-schreiben textarea {
  width: 100%; min-height: 84px; padding: 8px 11px; border: 1px solid var(--chip-rand); border-radius: var(--r); background: var(--weiss);
  font: inherit; font-size: 13px; color: inherit; resize: vertical;
}
.post-schreiben textarea:focus, .notiz-schreiben textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }
/* 0383 (C8e, C8h): Notizen des Kunden und Stand vom Recruiter */
.notiz-schreiben { display: flex; flex-direction: column; gap: 8px; }
.notiz-schreiben .fehler { margin: 0; }
.notiz-schreiben .post-knoepfe .knopf-s { flex-shrink: 0; white-space: nowrap; }
.notizen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notiz { padding: 10px 12px; border: 1px solid var(--chip-rand); border-radius: var(--r); background: var(--weiss); }
.notiz .fliess { margin: 0 0 4px; overflow-wrap: anywhere; }
.notiz-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.notiz-weg { padding: 0; border: 0; background: none; color: var(--gedaempft); cursor: pointer; font: inherit; text-decoration: underline; }
.notiz-weg:hover { color: var(--rot); }
.stand-team { padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--akzent) 22%, #fff); border-radius: var(--r-gross); background: color-mix(in srgb, var(--akzent) 6%, #fff); }
.stand-team > h3 { color: var(--akzent); }
.stand-team h3 { margin-top: 0; }
.stand-team .klein { margin: 4px 0 0; }
.post-schreiben .fehler { margin: 0; }
.post-knoepfe { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.post-knoepfe .klein { margin: 0 auto 0 0; }
.bericht { max-width: 900px; }
.bericht-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.bericht-kopf h2 { margin-top: 2px; font-size: 18px; }
.bericht-kopf .sub { margin-top: 2px; }
.bericht-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--r-gross); }
.bericht-tab { width: 100%; border-collapse: collapse; }
/* Trichter je Quelle (C8d): Anteil klein unter der Zahl, Absagen als Liste darunter */
.quellen-tab small.anteil { display: block; font-size: 10.5px; color: var(--gedaempft); }
.quellen-tab th[scope="row"] { white-space: nowrap; }
.absagen-quelle { margin-top: 10px; }
.absagen-quelle ul { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--text-2); }
.bericht-tab th, .bericht-tab td { padding: 8px 12px; border-bottom: 1px solid var(--linie); text-align: left; white-space: nowrap; }
.bericht-tab thead th { font-size: 11.5px; font-weight: 500; color: var(--gedaempft); }
.bericht-tab tbody th { font-weight: 500; }
.bericht-tab tbody tr:last-child th, .bericht-tab tbody tr:last-child td { border-bottom: 0; }
.bericht-tab .rechts { text-align: right; font-variant-numeric: tabular-nums; }
.balken-zelle { width: 38%; min-width: 110px; }
.balken { display: block; width: 100%; height: 8px; }
.balken-grund { fill: var(--seg); }
.balken-fuell { fill: var(--akzent); }
.bericht-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bericht-fuss { margin-top: 4px; }

/* =====================================================================
   Ausbau nach Florians Seite (Auftrag J 06.10.2026, Vorführung zuerst): Logos je Quelle, Verlauf im Wortlaut mit Zeichen je
   Kanal, Rahmen, Profil, Bewertung, Dateien, Lebenslauf als Druckansicht, Wo es stockt, Reichweite, So arbeiten wir für Sie in
   Ebenen und der Bewerber-Chat auf der Karriereseite. Farben der Kanäle: WhatsApp grün, Telefon in der Akzentfarbe, E-Mail
   violett, Ihre Aktion in der Primärfarbe, Chat auf der Karriereseite orange, Ablauf grau.
   ===================================================================== */
/* Logos je Quelle (ohne Bilddatei): die Marken-Logos als SVG in der Farbe der Plattform (seit 06.10.2026 abends, wie auf
   Florians Seite), für die übrigen Quellen ein farbiges Kästchen mit Buchstaben */
.q { font-size: 9.5px; letter-spacing: -.01em; }
.ql-logo { background: none; }
.ql-svg { display: block; width: 15px; height: 15px; }
.ql-arbeitsagentur { background: #e2001a; color: #fff; }
.ql-google { background: #fff; color: #4285f4; box-shadow: inset 0 0 0 1px #dadce0; }
.ql-karriereseite, .ql-karriere_chat { background: #fff1e0; color: #b4610a; }
.ql-recruiter, .ql-anzeige { background: #e8eeff; color: #2f55d4; }
.ql-vorschlag { background: #f1ebff; color: #6a4fd8; }
.pn-quelle { display: flex; align-items: center; gap: 6px; }

/* Verlauf (neu gestaltet am 07.10.2026, J: „die richtigen whatsapp, telefon icons“, „eine optisch stärkere version“; danach
   „sehen noch billig aus“, aus drei Vorschlägen gewählt „Variante A mit Logo L1“): je Kanal ein weißer Punkt mit feinem Rand,
   nur das Zeichen trägt die Farbe (WhatsApp mit dem echten Logo in WhatsApp-Grün). WhatsApp im Wortlaut als Gespräch im Stil
   des Cockpits, kein Nachbau von WhatsApp: unsere Nachrichten in einem Hauch der Akzentfarbe, die des Bewerbers weiß, Knöpfe
   als Chips darunter, ein gedrückter Knopf grün mit Haken; Video, Sprachnachricht und Standort als Anhang. Ablauf grau mit
   einem Zeichen je Art, E-Mail an Sie als Briefkarte, Antworten der Vorauswahl als Liste mit Haken. */
.vl-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 10px; }
.vl-kopfzeile h3 { margin: 0; }
.vl-legende { display: flex; flex-wrap: wrap; gap: 4px; }
.vl-leg { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.vl { list-style: none; margin: 0; padding: 0; }
.vl-tag { display: flex; justify-content: center; margin: 14px 0 6px; }
.vl-tag:first-child { margin-top: 2px; }
.vl-tag span { padding: 2px 10px; border-radius: 999px; background: var(--hell); color: var(--text-2); font-size: 11px; font-weight: 600; }
/* U4b: nur die letzten drei Einträge des Verlaufs offen, ältere samt ihrer Tage hinter „Ältere anzeigen“ (verlaufBlock) */
.vl:not(.vl-offen) > .vl-alt { display: none; }
.vl-mehr { display: flex; justify-content: center; margin: 0 0 10px; }
.vl-e { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 6px 0; }
.vl-e::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--linie); }
.vl-e:last-child::before { bottom: auto; height: 21px; }
.vl-punkt { position: relative; z-index: 1; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--chip-rand); border-radius: 50%; background: var(--weiss); color: var(--text-2); box-shadow: 0 0 0 3px var(--weiss); }
.vl-punkt .ik { width: 15px; height: 15px; }
.vl-punkt.klein { width: 18px; height: 18px; box-shadow: none; }
.vl-punkt.klein .ik { width: 10px; height: 10px; }
.vp-whatsapp { color: #25d366; }
.vp-whatsapp .wa-logo { width: 16px; height: 16px; }
.vp-whatsapp.klein .wa-logo { width: 11px; height: 11px; }
.vp-telefon { color: var(--akzent); }
.vp-sms { color: var(--akzent); }   /* 0417 (P5): SMS-Rückfall mit dem Telefon-Zeichen */
.vp-email { color: #6a4fd8; }
.vp-cockpit { color: var(--primaer); }
.vp-chat { color: #e07a00; }
.vp-ablauf { color: var(--text-2); }
.vl-rumpf { min-width: 0; padding-top: 6px; }
.vl-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.vl-titel { font-weight: 600; }
.vl-dauer { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent); font-size: 11px; font-weight: 600; }
/* Telefonat als Karte (U3): Titel, Dauer und Zeit im weißen Rahmen, wie die Anrufkarte auf Florians Landingpage */
.vl-anruf .vl-rumpf { margin-top: 2px; padding: 10px 12px; border: 1px solid var(--chip-rand); border-radius: 10px; background: var(--weiss); box-shadow: var(--schatten); }
.vl-anruf .vl-kopf { align-items: center; }
.vl-anruf .vl-zusatz { margin-top: 5px; }
.vl-dauer .ik { width: 11px; height: 11px; }
.vl-zeit { margin-left: auto; font-size: 11.5px; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.vl-zusatz { margin: 3px 0 0; font-size: 11.5px; color: var(--text-2); }
.vl-wortlaut { margin-top: 4px; white-space: pre-line; color: var(--text-2); }
/* 0513 (Call J+F+A 02.11.2026): interne Notiz im Verlauf als Zettel in der Fläche (Kundentext nur über textContent), der
   Lebenslauf mit einem Knopf, der die PDF öffnet */
.vl-notiz { margin: 4px 0 0; padding: 7px 10px; border-left: 3px solid var(--chip-rand); border-radius: 0 8px 8px 0; background: var(--flaeche); white-space: pre-line; overflow-wrap: anywhere; }
.vl-datei { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; }
.vl-datei .ik { width: 13px; height: 13px; }
/* 0513: die interne Notiz im Reiter Aktivität (Feld wie unter „Notizen“) und der Hinweis im Posteingang */
.akt-notiz h3 { margin: 0; }
.post-hinweis { margin: 12px 0 0; color: var(--gedaempft); }
.vl-mail { margin-top: 6px; padding: 9px 12px; border: 1px solid var(--chip-rand); border-left: 3px solid #6a4fd8; border-radius: 8px; background: var(--weiss); }
.vl-mail small { display: block; margin-bottom: 2px; color: #6a4fd8; font-size: 11px; font-weight: 600; }
.vl-mail p { white-space: pre-line; color: var(--text-2); }
/* WhatsApp im Wortlaut als Gespräch */
.vl-chat .vl-rumpf { padding-top: 0; }
.vl-chat-kopf { display: flex; justify-content: space-between; gap: 8px; margin: 7px 0 8px; font-size: 11px; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.wa-feld { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wa-zeile { display: flex; min-width: 0; }
.wa-msg { flex: 1; min-width: 0; margin-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.wa-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px; overflow-wrap: anywhere; }
.wa-aus { background: color-mix(in srgb, var(--akzent) 5%, #fff); border: 1px solid color-mix(in srgb, var(--akzent) 16%, #fff); border-radius: 12px 4px 12px 12px; }
.wa-ein { display: block; width: fit-content; max-width: calc(100% - 40px); padding: 7px 10px; background: var(--weiss); border: 1px solid var(--chip-rand); border-radius: 4px 12px 12px 12px; }
.wa-absender { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-2); }
.wa-absender.ki { color: #6a4fd8; }
.wa-absender .ik { width: 12px; height: 12px; }
.wa-zweck { font-weight: 500; color: var(--gedaempft); }
.wa-uhr { margin-left: auto; padding-left: 8px; font-size: 11px; font-weight: 400; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.wa-ein .wa-uhr { margin-left: 0; }
.wa-text { white-space: pre-line; line-height: 1.45; }
.wa-quelle { color: var(--gedaempft); font-size: 11px; font-style: italic; }
.wa-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.wa-kn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid var(--chip-rand); border-radius: 999px; background: var(--weiss); color: var(--gedaempft); font-size: 11.5px; }
.wa-kn.gewaehlt { border-color: #9fe1cb; background: #e1f5ee; color: #085041; font-weight: 600; }
.wa-kn .ik { width: 12px; height: 12px; }
/* Video, Stimme aus dem Team und Standort als Anhang in der Nachricht */
.wa-anhang { display: flex; align-items: center; gap: 9px; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--chip-rand); border-radius: 10px; background: var(--weiss); }
.wa-anhang-ik { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.wa-anhang-ik .ik { width: 15px; height: 15px; }
.wa-anhang-video .wa-anhang-ik { background: var(--primaer); color: #fff; }
.wa-anhang-zitat .wa-anhang-ik { background: #f1ebff; color: #6a4fd8; }
.wa-anhang-ort .wa-anhang-ik { background: #fdecea; color: var(--rot); }
.wa-anhang-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wa-anhang-t b { font-weight: 600; }
.wa-anhang-t small { color: var(--gedaempft); font-size: 11px; }
.wa-abschrift { margin-top: 2px; font-style: italic; color: var(--text-2); }
/* Vorauswahl: Antworten mit dem Rahmen der Stelle */
.vw { margin-top: 6px; overflow: hidden; border: 1px solid var(--chip-rand); border-radius: 10px; background: var(--weiss); }
.vw-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px; border-bottom: 1px solid var(--linie); }
.vw-chip { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: #fff1e0; color: #b4610a; font-size: 11px; font-weight: 600; }
.vw-liste { list-style: none; margin: 0; padding: 7px 12px 9px; display: grid; gap: 5px; }
.vw-liste li { display: grid; grid-template-columns: 16px 104px minmax(0, 1fr); align-items: center; gap: 8px; }
.vw-liste .ik { width: 15px; height: 15px; color: var(--gruen); }
.vw-liste li.ab .ik, .vw-liste li.ab b { color: #b4610a; }
.vw-f { color: var(--text-2); font-size: 11.5px; }
.vw-liste b { min-width: 0; font-weight: 600; }
@media (max-width: 560px) {
  .wa-msg { margin-left: 8px; }
  .wa-ein { max-width: calc(100% - 16px); }
  .vw-liste li { grid-template-columns: 16px minmax(0, 1fr); row-gap: 0; }
  .vw-liste li b { grid-column: 2; }
}
/* Chat auf der Karriereseite (Vorführung): Text, KI-Zeichen und Antworten wie bisher */
.vb-text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.45; }
.vb-ki { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: #6a4fd8; }
.vb-ki .ik { width: 12px; height: 12px; }
.vb-antworten { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 12px; margin: 5px 0 0; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; background: var(--weiss); }
.vb-antworten div { display: flex; flex-direction: column; min-width: 0; }
.vb-antworten dt { font-size: 10.5px; color: var(--gedaempft); }
.vb-antworten dd { margin: 0; font-weight: 600; }

/* Rahmen und „Was das Telefonat geklärt hat“ */
.rahmen-karte { padding: 14px 18px 6px; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); }
.rahmen-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin-bottom: 8px; }
.rahmen-kopf h3 { margin: 0; }
.rahmen-ok { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: #e3f5ec; color: #1a7f50; font-size: 12px; font-weight: 600; }
.rahmen-ok.teils { background: #fff1e0; color: #b4610a; }
.rahmen-ok .ik { width: 13px; height: 13px; }
/* Rahmen als Zeilen (U2): grüner Haken oder amber Fragezeichen, Titel, Wert; wie „Rahmenbedingungen, im Telefonat geklärt“ */
.rahmen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rahmen-liste li { display: grid; grid-template-columns: 18px 112px minmax(0, 1fr); align-items: start; gap: 10px; padding: 11px 0; border-top: 1px solid var(--linie); }
.rahmen-ik { display: inline-flex; margin-top: 2px; color: var(--gruen); }
.rahmen-liste li.offen .rahmen-ik { color: var(--amber); }
.rahmen-ik .ik { width: 15px; height: 15px; }
.rahmen-t { display: inline-flex; align-items: flex-start; gap: 6px; padding-top: 1px; }
/* U4a: Zeichen je Rahmen-Zeile (Uhr, Ort, Euro, Kalender) wie auf Florians Karte, rahmenIkon() in cockpit.js */
.rahmen-t .ik { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--akzent); }
.rahmen-w { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rahmen-liste .gedaempft { font-size: 12.5px; }
.rahmen-liste b { font-weight: 600; }
.rahmen-liste small { font-size: 11.5px; color: var(--gedaempft); }
.vorher-karte { padding: 10px 12px; border: 1px dashed var(--chip-rand); border-radius: var(--r-gross); background: var(--sb); }
.vorher-text { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; color: var(--text-2); }
.vorher-text span { font-style: italic; overflow-wrap: anywhere; }
.vorher-tab { width: 100%; border-collapse: collapse; font-size: 12px; }
.vorher-tab th, .vorher-tab td { padding: 4px 6px; border-bottom: 1px solid var(--linie); text-align: left; }
.vorher-tab tbody tr:last-child th, .vorher-tab tbody tr:last-child td { border-bottom: 0; }
.vorher-tab thead th { font-size: 11px; font-weight: 500; color: var(--gedaempft); }
.vorher-tab tbody th { font-weight: 500; }
.vorher-neu { color: #1a7f50; font-weight: 500; }
.vorher-neu .ik { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }

/* Profil wie auf Florians Seite */
/* Zeitleiste (U2, 14.10.2026): vier Schritte nebeneinander auf einer Linie, je Schritt ein Zeichen im weißen Punkt, wie
   „Bewerbung, Erster Kontakt, Erstgespräch, Profil erstellt“ auf Florians Landingpage */
.zeitleiste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0 22px; padding-top: 16px; border-top: 2px solid var(--chip-rand); }
.zl-kachel { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 2px 2px 0; }
.zl-ik { position: absolute; top: -31px; left: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--chip-rand); border-radius: 50%; background: var(--weiss); color: var(--akzent); box-shadow: 0 0 0 3px var(--weiss); }
.zl-ik .ik { width: 13px; height: 13px; }
.zl-kachel small { font-size: 11.5px; font-weight: 500; color: var(--gedaempft); }
.zl-kachel b { font-size: 14px; }
.zl-kachel span { font-size: 12px; color: var(--text-2); }
.profil-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; }
.profil-kopf > .klein { grid-column: 1 / -1; margin-top: 0; }
.profil-titel { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.profil-titel > b { font-size: 18px; letter-spacing: -.01em; }
.profil-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.profil-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--seg); color: var(--text-2); font-size: 12.5px; }
.profil-chip .ik { width: 13px; height: 13px; color: var(--gedaempft); }
/* Score als Ring (U2): Kreis in der Akzentfarbe, Bogen nach der Note, Zahl in der Mitte; groß im Reiter Bewertung */
.note-chip { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.note-chip b { position: relative; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.note-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.note-ring-grund { fill: none; stroke: var(--seg); stroke-width: 3.5; }
.note-ring-fuell { fill: none; stroke: var(--akzent); stroke-width: 3.5; stroke-linecap: round; }
/* U4a: im Profilkopf der Ring so groß wie auf Florians Karte (52 statt 40 px) */
.profil-kopf .note-chip { width: 52px; height: 52px; }
.profil-kopf .note-chip b { font-size: 15px; }
/* Eckdaten (U2): Kachel mit Zeichen im hellblauen Quadrat, wie Gehaltswunsch, Start und Reisen auf Florians Landingpage */
.eckdaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.eck { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--chip-rand); border-radius: 10px; background: var(--weiss); }
.eck-ik { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--akzent-hell); color: var(--akzent); }
.eck-ik .ik { width: 15px; height: 15px; }
.eck-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eck small { font-size: 11.5px; font-weight: 500; color: var(--gedaempft); }
.eck b { font-size: 14.5px; }
.eck span { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.zwei-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
/* „Passt zur Stelle“ grün und „Im Gespräch klären“ amber als Karten mit farbiger Oberkante (U2) */
.pl-karte { padding: 14px 16px; border: 1px solid var(--chip-rand); border-top-width: 3px; border-radius: 10px; background: var(--weiss); }
.pl-haken { border-top-color: var(--gruen); }
.pl-frage { border-top-color: var(--amber); }
.pl-haken > h3 { color: var(--gruen); }
.pl-frage > h3 { color: var(--amber); }
.pl-karte > h3 .ik { color: inherit; }
.punkte { margin: 0; padding-left: 16px; }
.punkte li { margin: 2px 0; }
.punkte-haken, .punkte-frage { padding: 0; list-style: none; }
.punkte-haken li, .punkte-frage li { display: flex; align-items: flex-start; gap: 6px; }
.punkte-haken .ik, .punkte-frage .ik { width: 14px; height: 14px; margin-top: 1px; }
.punkte-haken .ik { color: #1a7f50; }
.punkte-frage .ik { color: #b4610a; }
/* „Unser Eindruck“ als hellblauer Kasten mit Zeichen (U2), wie auf Florians Landingpage */
.eindruck { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--akzent) 22%, #fff); border-radius: var(--r-gross); background: color-mix(in srgb, var(--akzent) 6%, #fff); }
.eindruck h3 { margin-top: 0; color: var(--akzent); }
.eindruck .fliess { font-size: 14.5px; line-height: 1.55; }
.werdegang { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.werdegang > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.werdegang > li > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wg-zeit { font-size: 11.5px; color: var(--gedaempft); }
.werdegang .punkte { margin-top: 3px; color: var(--text-2); }
.telefonat { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.telefonat dt { font-weight: 600; }
.telefonat dd { margin: 2px 0 0; padding-left: 10px; border-left: 2px solid var(--linie); color: var(--text-2); }
.profil-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--linie); }
.profil-fuss .klein { margin: 0; }
/* U4a (15.10.2026): Fußzeile wie auf Florians Karte, „Lebenslauf neu geschrieben“ und „Fachlich bewertet“ mit grünem Haken,
   daneben Nummer und „Vertraulich“ */
.profil-fuss-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.profil-haken { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; }
.profil-haken span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.profil-haken .ik { width: 14px; height: 14px; color: var(--gruen); }
.knopf-link .ik, .knopf-s .ik { width: 14px; height: 14px; margin-right: 5px; }

/* Bewertung mit fünf Teilnoten vom Recruiter */
.note-kopf { display: flex; align-items: center; gap: 14px; }
.note-gross { position: relative; width: 88px; height: 88px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text); }
.note-ring-gross { position: absolute; inset: 0; width: 100%; height: 100%; }
.note-gross b { position: relative; font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.note-gross small { position: relative; margin-top: 2px; font-size: 10.5px; color: var(--gedaempft); }
.note-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.note-text .klein { margin-top: 0; }
.note-empf { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: #e3f5ec; color: #1a7f50; font-size: 12px; font-weight: 600; }
.note-empf.neutral { background: var(--seg); color: var(--text-2); }
.note-empf .ik { width: 13px; height: 13px; }
.noten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.noten li { display: grid; grid-template-columns: 140px minmax(0, 1fr) 24px; align-items: center; gap: 10px; }
.noten li b { text-align: right; font-variant-numeric: tabular-nums; }
.noten-balken { display: block; width: 100%; height: 6px; }
.noten-grund { fill: var(--seg); }
.noten-fuell { fill: var(--akzent); }
.note-notiz { padding: 10px 12px; border-radius: var(--r-gross); background: var(--hell); }
.note-notiz .fliess { font-style: italic; }
.note-notiz .klein { margin-top: 4px; }

/* Profil als eigene Seite (U2, 14.10.2026): zwei Spalten, links das Profil wie im Reiter Lebenslauf, rechts Bewertung, Rahmen
   und Stand vom Recruiter; der Reiter trägt den Knopf „Profil als Seite öffnen“ */
.profil-tb { margin: -4px 0 14px; }
.profil-seite { max-width: 1180px; }
.profil-raster { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr); align-items: start; gap: 20px; }
.profil-haupt, .profil-neben { min-width: 0; }
.profil-haupt { padding: 28px 32px; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); box-shadow: var(--schatten); }
.profil-seite-kopf { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.profil-seite-kopf h2 { font-size: 23px; letter-spacing: -.01em; }
.profil-neben { display: flex; flex-direction: column; gap: 14px; }
.profil-karte { padding: 16px 18px 6px; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); box-shadow: var(--schatten); }
.profil-neben > .pn-block, .profil-neben > .rahmen-karte { margin-bottom: 0; }
@media (max-width: 1100px) { .profil-raster { grid-template-columns: minmax(0, 1fr); } }

/* Dateien und Lebenslauf als Druckansicht */
.dateien { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.datei { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--r-gross); }
.datei-ik { position: relative; width: 34px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #fdecea; color: var(--rot); }
.datei-ik .ik { width: 18px; height: 18px; margin-bottom: 8px; }
.datei-ik small { position: absolute; bottom: 3px; font-size: 8.5px; font-weight: 700; }
.datei-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.datei-t b { overflow-wrap: anywhere; }
.datei-t .klein { margin: 0; }
.lv { max-width: 860px; }
.lv-tb { margin-bottom: 14px; }
.lv-blatt { display: flex; flex-direction: column; gap: 18px; padding: 32px 36px; border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--weiss); box-shadow: 0 1px 3px rgba(2, 3, 20, .05); }
.lv-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding-bottom: 14px; border-bottom: 2px solid var(--primaer); }
.lv-kopf h2 { margin: 2px 0; font-size: 22px; }
.lv-marke { color: var(--akzent); font-size: 11.5px; font-weight: 600; }
.lv-eck { display: flex; flex-direction: column; gap: 2px; text-align: right; color: var(--text-2); }
.lv-abschnitt h3 { margin-bottom: 6px; color: var(--primaer); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lv-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding-top: 10px; border-top: 1px solid var(--linie); font-size: 11px; color: var(--gedaempft); }

/* Auswertung: Wo es stockt, Reichweite und Kosten */
.stockt { max-width: 760px; margin-top: 18px; padding: 2px 14px 12px; border: 1px solid #f3d9b5; border-radius: var(--r-gross); background: #fff8ee; }
.stockt .aw-titel { margin: 10px 0 6px; }
.stockt p { margin: 0 0 4px; }
.rw-tab .rw-gruppe th { background: var(--sb); font-size: 11px; font-weight: 600; color: var(--gedaempft); }
.rw-tab th[scope="row"] { white-space: nowrap; }
.rw-verloren th, .rw-verloren td { color: var(--rot); }
.rw-verloren .quelle { color: var(--rot); }
.aw-warn { border-color: #f1c2bd; background: #fdf1f0; }
.kampagne-hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: -6px 0 16px; padding: 10px 14px; border: 1px solid #f3d9b5; border-radius: var(--r-gross); background: #fff8ee; }
.kampagne-hinweis .sub { max-width: 760px; margin-top: 2px; }

/* So arbeiten wir für Sie in Ebenen */
.st-versprechen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 980px; margin-bottom: 16px; }
.st-vers { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--r-gross); background: var(--primaer); color: #fff; }
.st-vers b { font-size: 14px; }
.st-vers span { font-size: 12px; opacity: .82; }
.schicht { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto minmax(0, 1fr); align-items: center; gap: 10px; max-width: 980px; margin-bottom: 18px; padding: 14px; border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--sb); }
.schicht-spalte { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.schicht-spalte > small { font-size: 11px; font-weight: 600; color: var(--gedaempft); }
.schicht-logos { display: flex; flex-direction: column; gap: 4px; }
.schicht-mitte { padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--weiss); }
.schicht-ebene { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.schicht-ebene b { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--akzent); color: #fff; font-size: 10.5px; }
.schicht-pfeil { font-size: 18px; color: var(--gedaempft); }
.st-ebene { max-width: 980px; margin-bottom: 18px; padding: 16px 18px 8px; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); box-shadow: var(--schatten); }
.st-ebene-kopf { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 12px; margin-bottom: 12px; }
.st-ebene-nr { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--primaer); color: #fff; font-weight: 700; }
.st-ebene-kopf h2 { font-size: 14px; }
.st-ebene-kopf .sub { margin-top: 2px; }
.st-kanaele { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.st-ergebnis { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 12px; padding: 8px 10px; border-radius: 8px; background: #e7f6ee; color: #11683f; font-weight: 500; }
.st-ergebnis .ik { margin-top: 1px; }
.st-varianten, .st-inhalte { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.st-variante { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: var(--sb); }
.st-variante span { font-size: 12px; color: var(--text-2); }
.st-inhalt-karte { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; }
.st-inhalt-karte > .ik { width: 20px; height: 20px; color: var(--akzent); }
.st-inhalt-karte > span { display: flex; flex-direction: column; }
.st-inhalt-karte small { font-size: 11px; color: var(--gedaempft); }
.st-ki { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 12px; font-size: 12px; color: #6a4fd8; }
.st-ebene .strecke { max-width: none; }
.st-fragen { margin: 2px 0 12px; }
.st-fragen-stelle { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.st-recruiterin { display: flex; align-items: center; gap: 12px; max-width: 760px; padding: 14px 16px; border: 1px solid var(--chip-rand); border-radius: var(--r-gross); background: var(--weiss); }

/* Bewerber-Chat auf der Karriereseite (nur Vorführung) */
.as-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); align-items: start; gap: 18px; max-width: 1180px; }
.as-seite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; gap: 18px; padding: 18px; border: 1px solid var(--linie); border-radius: var(--r-gross); background: linear-gradient(180deg, #f5f6fb, #fff 180px); }
.as-seite-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.as-seite-kopf .gedaempft { margin-left: auto; }
.as-links h2 { font-size: 19px; }
.as-links > .sub { margin: 4px 0 12px; }
.as-stellen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.as-stellen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 9px 11px; border: 1px solid var(--linie); border-radius: 8px; background: var(--weiss); }
.as-stellen .gedaempft { grid-column: 1; font-size: 11.5px; }
.as-stelle-knopf { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--akzent); font-size: 11.5px; font-weight: 600; }
.as-chat { height: 540px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linie); border-radius: 14px; background: var(--weiss); box-shadow: 0 10px 34px rgba(2, 3, 20, .12); }
.as-chat-kopf { display: flex; align-items: center; gap: 7px; padding: 11px 13px; background: var(--primaer); color: #fff; }
.as-ki { padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .18); font-size: 10.5px; font-weight: 700; }
.as-status { margin-left: auto; font-size: 11px; opacity: .75; }
.as-verlauf { flex: 1; list-style: none; margin: 0; padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; background: #f6f7f9; }
.as-b { max-width: 86%; display: flex; flex-direction: column; gap: 4px; padding: 8px 11px; border-radius: 12px; animation: as-ein .25s ease; }
.as-b-ki { align-self: flex-start; background: var(--weiss); border: 1px solid var(--linie); border-bottom-left-radius: 3px; }
.as-b-bewerber { align-self: flex-end; background: var(--akzent); color: #fff; border-bottom-right-radius: 3px; }
.as-quelle { font-size: 10.5px; color: #6a4fd8; }
.as-tippt { flex-direction: row; gap: 4px; padding: 11px 12px; }
.as-tippt span { width: 6px; height: 6px; border-radius: 50%; background: #b9b8b3; animation: as-punkt 1s infinite; }
.as-tippt span:nth-child(2) { animation-delay: .15s; }
.as-tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes as-punkt { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes as-ein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.as-knoepfe { min-height: 50px; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--linie); background: var(--weiss); }
.as-knopf { padding: 6px 12px; border: 1px solid var(--akzent); border-radius: 999px; background: var(--weiss); color: var(--akzent); font-size: 12px; font-weight: 600; cursor: pointer; }
.as-knopf:hover { background: var(--akzent-hell); }
.as-knopf-gleich { box-shadow: 0 0 0 3px var(--akzent-hell); }
.as-rechts { display: flex; flex-direction: column; gap: 12px; }
.as-rechts h3 { margin: 0; }
.as-rechts > .knopf-s { align-self: flex-start; }
.as-karte { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--r-gross); background: var(--weiss); animation: as-ein .3s ease; }
.as-karte-leer { border-style: dashed; background: var(--sb); }
.as-karte-kopf { display: flex; align-items: center; gap: 9px; }
.as-karte-kopf > div { display: flex; flex-direction: column; gap: 2px; }
.as-karte .knopf-s-haupt { align-self: flex-start; }
.as-regeln { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.as-regeln li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-2); }
.as-regeln .ik { margin-top: 1px; color: var(--akzent); }
@media (prefers-reduced-motion: reduce) {
  .as-b, .as-karte, .as-tippt span { animation: none; }
}
@media (max-width: 1180px) {
  .as-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .as-seite { grid-template-columns: minmax(0, 1fr); }
  .as-chat { height: 480px; }
  .st-versprechen, .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
  .schicht { grid-template-columns: minmax(0, 1fr); }
  .schicht-pfeil { transform: rotate(90deg); justify-self: center; }
  .st-ebene { padding: 12px 12px 4px; }
  .st-ebene-kopf { grid-template-columns: 32px minmax(0, 1fr); }
  .st-kanaele { grid-column: 1 / -1; justify-content: flex-start; }
  .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zeitleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .noten li { grid-template-columns: 110px minmax(0, 1fr) 22px; }
  .lv-blatt { padding: 20px 18px; }
  .lv-eck { text-align: left; }
  .werdegang > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Bis 1500 Pixel (Laptop) ohne „Verantwortlich“ und „Eingang“, beides steht im Detail; sonst liefe die Tabelle mit der
   Spalte „Nächster Schritt“ (C8b, 05.10.2026) bei 1366 Pixeln über. Am Handy gilt die Kartenansicht weiter unten. */
@media (min-width: 861px) and (max-width: 1500px) {
  .tab [data-k="Verantwortlich"], .tab [data-k="Eingang"] { display: none; }
}

/* ---- Mittlere Breite ----------------------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .hb { padding: 14px 20px 36px; }
  .hb-fuss { margin: 0 20px; }
  .kacheln { gap: 10px; }
}

/* ---- Handy und schmale Fenster: Seitenleiste als Überlagerung, Tabelle als Karten, Detail ganzseitig ---------- */
@media (max-width: 860px) {
  .sb {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 50; width: min(300px, 86vw);
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .menu-offen .sb { transform: none; box-shadow: 8px 0 30px rgba(2, 3, 20, .15); }
  .menu-offen .sb-hinter { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(2, 3, 20, .25); }
  .kopf-mobil {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: var(--weiss); border-bottom: 1px solid var(--linie);
  }
  .kopf-mobil b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hb { padding: 12px 16px 32px; }
  .hb-fuss { margin: 0 16px; }
  .hb-top { margin-bottom: 10px; }
  .hb-top .krumen { display: none; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi b { font-size: 24px; }
  .tb-rechts { width: 100%; margin-left: 0; justify-content: space-between; }
  .tab-huelle { overflow: visible; border: 0; }
  .tab thead { display: none; }
  .tab, .tab tbody, .tab td { display: block; width: 100%; }
  .tab tr { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--r-gross); }
  .tab td { padding: 2px 0; border: 0; white-space: normal; }
  .tab tbody tr:last-child td { border: 0; }
  .tab td[data-k] { order: 2; display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); text-align: right; }
  .tab td[data-k]::before { content: attr(data-k); color: var(--gedaempft); text-align: left; }
  .tab td[data-k="Verantwortlich"] { display: none; }
  .tab .td-name { flex: 1; width: auto; min-width: 0; padding-bottom: 6px; }
  .tab .td-status { order: 1; width: auto; padding-bottom: 6px; }
  .zeile:hover td, .zeile.gewaehlt td { background: none; }
  .zeile-sie td { background: none; box-shadow: none; }
  .tab tr.zeile-sie { border-color: var(--amber); }
  .zeile.gewaehlt { border-color: var(--akzent); }
  .pn { width: 100%; box-shadow: none; }
  .pn-kontakt { padding-left: 18px; }
  .kz-zeile { align-items: flex-start; }
  .kz-zeile.mit-balken { grid-template-columns: minmax(0, 1fr) 52px; }
  .kz-balken { grid-column: 1 / -1; }
  /* C5: Posteingang zeigt am Handy entweder die Liste oder den geöffneten Faden */
  .post-raster { grid-template-columns: minmax(0, 1fr); }
  .post-raster.mit-faden .post-liste, .post-raster:not(.mit-faden) .post-faden { display: none; }
  .post-zurueck { display: inline-flex; }
  .post-faden-kopf > a:last-child { margin-left: auto; }
  .post-titel { order: 3; flex-basis: 100%; }
  .post-faden .blasen { max-height: none; }
  .bericht-spalten { grid-template-columns: minmax(0, 1fr); }
  .bericht-tab th, .bericht-tab td { padding: 7px 8px; }
  .bericht-tab th { white-space: normal; }
  .balken-zelle, .bericht-tab thead th:last-child { display: none; }
  .quellen-tab thead th:last-child { display: table-cell; }
}

/* ---- Druck: der Bericht als Seite (C5); im Browser „Als PDF speichern“ -------------------------------------------- */
@media print {
  @page { margin: 14mm; }
  body { font-size: 10.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sb, .sb-hinter, .kopf-mobil, .demo-leiste, .hb-bericht .hb-top, .hb-bericht .hb-titel, .bericht-tb, .dlg-schicht, .hb-fuss { display: none !important; }
  .app, .rahmen, .hb-huelle { display: block; height: auto; overflow: visible; }
  .hb { max-width: none; padding: 0; }
  .bericht { max-width: none; }
  .kpi, .bericht-huelle, .kz, .pn-block { break-inside: avoid; }
  /* Lebenslauf als Druckansicht (06.10.2026): nur das Blatt */
  .hb-lebenslauf .hb-top, .hb-lebenslauf .hb-titel, .lv-tb { display: none !important; }
  /* Profil als Seite (U2): beide Spalten untereinander, ohne Kopf und Werkzeugleiste */
  .hb-profil .hb-top, .hb-profil .hb-titel { display: none !important; }
  .hb-profil .profil-raster { grid-template-columns: minmax(0, 1fr); }
  /* U4b: beim Drucken ohne Pfeile und ohne „Ältere anzeigen“; die Abschnitte öffnet cockpit.js vor dem Druck */
  .klapp-pfeil, .vl-mehr { display: none !important; }
  .klapp { border-top: 0; }
  .lv { max-width: none; }
  .lv-blatt { padding: 0; border: 0; box-shadow: none; }
  .lv-abschnitt { break-inside: avoid; }
}