/* =====================================================================
 * Kunden-Cockpit V2 — Bento-Design (2026-07-03)
 * Helles Grau als Canvas, weiße abgerundete Cards, KG-Grün als Akzent.
 * Grüne Boxen = weiße Schrift. Responsive bis Mobile.
 * Klassen entsprechen index.html + den app.js-Render-Funktionen.
 * ===================================================================== */

:root {
  /* Marke */
  --brand-green: #6EB85C;
  --brand-green-deep: #4F9E3D;
  --brand-green-soft: #E6F3DE;
  --brand-green-line: rgba(110, 184, 92, 0.35);

  /* Flächen */
  --bg-outer: #EEF0F2;      /* Canvas hellgrau */
  --bg-shell: #FFFFFF;      /* Card weiß */
  --bg-tile: #FCFCFD;       /* innere Kacheln */
  --bg-tile-hover: #F5F6F7;

  /* Text */
  --ink: #0E1A1F;
  --ink-2: #2F4148;
  --ink-3: #5C6F76;
  --ink-4: #9DAAB0;

  /* Status */
  --amber: #B45309;
  --amber-soft: #FEF3C7;
  --blue: #1D4ED8;
  --blue-soft: #DBEAFE;
  --red: #B91C1C;
  --red-soft: #FEE2E2;
  --quali-bg: #E7EAEC;
  --quali-ink: #2B2F33;

  /* System */
  --border: #E7EAEC;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(16,24,31,.04), 0 10px 30px rgba(16,24,31,.05);
  --shadow-sm: 0 1px 2px rgba(16,24,31,.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* WICHTIG: hidden-Attribut muss jedes display: grid/flex aussstechen,
   sonst bleiben state-screens (Login/Loading) sichtbar, obwohl versteckt. */
[hidden] { display: none !important; }

/* =====================================================================
 * Layout-Sprung beim Tab-Wechsel — Rinne fuer die Scrollleiste reservieren
 * =====================================================================
 * `.app` ist auf 1440 px begrenzt und mit `margin: 0 auto` zentriert, haengt
 * also an der nutzbaren Breite des Scroll-Containers. Kurze Ansichten
 * (Uebersicht, Roadmap, Empfehlungen, Meine Stelle) scrollen nicht, lange
 * (Mein Pool, Aktivitaeten) erzeugen eine vertikale Scrollleiste. Bei
 * KLASSISCHEN Scrollleisten kostet die ~15-17 px: der gesamte Inhalt rutscht
 * beim Tab-Wechsel um die halbe Leistenbreite (~8 px) nach links. Nichts wird
 * schmaler, weil 1440 px unter der Fensterbreite bleiben — es verschiebt sich
 * nur.
 *
 * ACHTUNG, das war der Fehler im ersten Versuch (24.08.2026): die Rinne muss
 * auf den ELEMENT, DAS TATSAECHLICH SCROLLT. Das ist hier NICHT `html`,
 * sondern `body`. Grund: die Regel darunter setzt `height: 100%` und
 * `overflow-x: hidden` auf beide. Ein Element mit `overflow-x: hidden` bekommt
 * auf der anderen Achse automatisch `overflow-y: auto` — `body` ist damit ein
 * eigener Scroll-Container von genau Fensterhoehe, und der laengere Inhalt
 * scrollt INNERHALB von body. Gemessen (Chromium, 1512x900, Inhalt 4000 px):
 * `html.scrollHeight == clientHeight == 900` (scrollt nicht),
 * `body.scrollHeight 4541 > clientHeight 900` (scrollt). Eine Rinne auf `html`
 * ist damit wirkungslos.
 *
 * `overflow-y: scroll` steht nur in einem @supports-Fallback fuer Browser ohne
 * `scrollbar-gutter`. Nicht unbedingt zusaetzlich setzen: es macht die Leiste
 * auch auf kurzen Ansichten dauerhaft SICHTBAR, waehrend die Rinne allein nur
 * Platz reserviert. Die Drawer-Sperre `body.nav-open { overflow: hidden }`
 * gewinnt in beiden Faellen, weil ein Klassen-Selektor den Element-Selektor
 * aussticht.
 *
 * Bei Overlay-Scrollleisten (macOS-Standard) kosten Leisten keine Breite —
 * dort gab es den Sprung nie und beide Regeln bleiben wirkungslos.
 * ===================================================================== */
body { scrollbar-gutter: stable; }
/* Rueckfallebene fuer Browser ohne scrollbar-gutter (Safari vor 18.2, Chrome
   vor 94). Dort erzwingt die Leiste dauerhaft — wirkt genauso, zeigt aber auch
   auf kurzen Ansichten eine leere Leiste. Deshalb nur als Fallback. */
@supports not (scrollbar-gutter: stable) {
  body { overflow-y: scroll; }
}

html, body { height: 100%; width: 100%; max-width: 100%; overflow-x: hidden; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-outer);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden; /* kein horizontales Scrollen durch überstehende Elemente */
}

/* =====================================================================
 * State-Screens (Login / Loading / Error / Inactive)
 * ===================================================================== */
.state-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.state-card {
  background: var(--bg-shell);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 34px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.state-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.state-card p { font-size: 14px; color: var(--ink-3); }
.state-card--login { text-align: center; }

.login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.login-form input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: var(--bg-tile);
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px var(--brand-green-soft);
  background: #fff;
}
.login-form button {
  width: 100%;
  padding: 13px 15px;
  border: none;
  border-radius: 12px;
  background: var(--brand-green-deep);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter .15s, transform .05s;
}
.login-form button:hover { filter: brightness(1.05); }
.login-form button:active { transform: translateY(1px); }
.login-form button:disabled { opacity: .6; cursor: default; }
.login-error {
  font-size: 13px;
  color: var(--red);
  background: var(--red-soft);
  border-radius: 10px;
  padding: 9px 12px;
}

/* =====================================================================
 * LOGIN — zweigeteilter Screen (20.08.2026)
 * Links Markenseite (gruen, Deko), rechts das Formular auf Weiss.
 * Vorbild: Login des internen Kandidatenfinders.
 * Die IDs login-form / login-password / login-submit / login-error
 * bleiben unveraendert — daran haengt die Delegation in app.js.
 * ===================================================================== */

/* Der Login sprengt bewusst das zentrierte state-screen-Raster. */
.state-screen--login { padding: 0; place-items: stretch; display: block; }

.login-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

/* ---------- Linke Seite: Marke ---------- */
.login-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* Inhalt mittig, Fussnote per margin-top: auto unten */
  padding: 56px 60px 40px;
  color: #fff;
  /* Reiner CSS-Verlauf, kein Bild: zwei weiche Lichtpunkte fuer Tiefe, eine
     Vignette gegen den flachen Eindruck, darunter der diagonale Grundverlauf
     mit vier Stufen (statt zwei) — das vermeidet sichtbare Streifenbildung. */
  background:
    radial-gradient(75% 55% at 88% 6%, rgba(168,224,138,.42) 0%, rgba(168,224,138,0) 60%),
    radial-gradient(60% 45% at 12% 92%, rgba(12,36,21,.45) 0%, rgba(12,36,21,0) 70%),
    linear-gradient(158deg, #0B2113 0%, #14361D 18%, #1F4F2A 40%, #356E36 68%, #4E9145 86%, #5FA24E 100%);
}

/* Feines Netz aus Punkten und Linien — gezeichnet in app.js (initLoginDeko).
   Die Punkte driften langsam und weichen dem Mauszeiger aus; Linien zwischen
   nahen Punkten und zum Zeiger entstehen zur Laufzeit. Kein Hintergrundbild,
   damit die Bewegung moeglich ist. Ohne JavaScript bleibt die Flaeche einfach
   leer — der Verlauf darunter traegt den Screen allein. */
.login-brand__deko {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  pointer-events: none;   /* Zeiger-Ereignisse hoert .login-brand ab */
}

.login-brand__body { position: relative; z-index: 1; }

.login-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 26px;
}
.login-badge i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #A8E08A;
  box-shadow: 0 0 0 3px rgba(168,224,138,.25);
}

.login-brand__titel {
  font-size: clamp(44px, 5.6vw, 78px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin-bottom: 14px;
}
.login-brand__sub {
  font-size: 19px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  margin-bottom: 34px;
}
.login-brand__liste { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.login-brand__liste li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  color: rgba(255,255,255,.92);
}
.login-brand__liste li::before {
  content: '';
  position: absolute; left: 2px; top: 7px;
  width: 11px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: .95;
}
.login-brand__fuss {
  position: absolute; z-index: 1;
  left: 60px; bottom: 40px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* ---------- Rechte Seite: Formular ---------- */
.login-panel {
  display: grid;
  place-items: center;
  background: #fff;
  padding: 48px 40px;
}
.login-panel__inner { width: 100%; max-width: 380px; }
.login-logo { height: 30px; width: auto; display: block; margin-bottom: 34px; }
.login-panel h2 {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink);
  margin-bottom: 8px;
}
.login-panel__lead { font-size: 14px; color: var(--ink-3); margin-bottom: 28px; }

/* Formular: ueberschreibt die alte, zentrierte Variante. */
.state-screen--login .login-form {
  display: flex; flex-direction: column; gap: 18px; margin-top: 0;
  text-align: left;
}
.login-feld { display: flex; flex-direction: column; gap: 7px; }
.login-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.login-ico { width: 18px; height: 18px; flex: 0 0 18px; color: var(--ink-4); }

/* Nicht editierbares Feld mit dem Firmennamen. Sieht wie eine Eingabe aus,
   ist aber keine — kein input, damit nichts editiert oder mitgesendet wird. */
.login-fest {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-tile);
  font-size: 15px; font-weight: 600; line-height: 1.35;
  color: var(--ink-2);
  cursor: default;
  user-select: none;
}
/* Firmennamen umbrechen statt abschneiden — echte Kundennamen sind lang
   ("Fa. Wrede oHG Abbruch-Tiefbau-Landschaftsbau"). Mit Ellipsis war der
   halbe Name weg. Bis zu drei Zeilen sind in Ordnung. */
.login-fest span { overflow-wrap: anywhere; }
.login-fest .login-ico { margin-top: 2px; }

.login-eingabe {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-tile);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.login-eingabe:focus-within {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px var(--brand-green-soft);
  background: #fff;
}
.state-screen--login .login-form input {
  /* width: auto ist PFLICHT — die aeltere Regel `.login-form input`
     setzt width: 100%, was das Feld im Flex-Container auf 0 zusammenfallen
     laesst (gemessen: w=0). Ohne diese Zeile ist die Eingabe unsichtbar. */
  flex: 1 1 auto; width: auto; min-width: 0;
  padding: 0; border: none; background: none; border-radius: 0;
  font-size: 15px; font-family: inherit; color: var(--ink);
  outline: none;
}
.state-screen--login .login-form input:focus { box-shadow: none; background: none; }
.state-screen--login .login-form input::placeholder { color: var(--ink-4); }

/* ACHTUNG Spezifitaet: die aeltere Regel `.login-form button` (0,2,1) setzt
   width: 100% und wuerde eine blosse Klasse `.login-auge` (0,1,0) schlagen —
   der Augen-Knopf war dadurch 350px breit und hat die Eingabe auf 0
   zusammengedrueckt. Deshalb hier derselbe dreiteilige Praefix wie beim
   Anmelden-Knopf. Gemessen und geprueft am 20.08.2026. */
.state-screen--login .login-form .login-auge {
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: none; background: none; border-radius: 6px;
  box-shadow: none;
  color: var(--ink-4); cursor: pointer;
  transition: color .15s;
}
.state-screen--login .login-form .login-auge:hover {
  color: var(--ink-2); background: none; filter: none; transform: none;
}
.state-screen--login .login-form .login-auge svg { width: 18px; height: 18px; }
/* Durchgestrichenes Auge = Passwort ist gerade sichtbar. */
.login-auge__strich { opacity: 0; }
.state-screen--login .login-form .login-auge.is-on { color: var(--brand-green-deep); }
.state-screen--login .login-form .login-auge.is-on .login-auge__strich { opacity: 1; }

.state-screen--login .login-form .login-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  margin-top: 4px;
  padding: 14px 16px;
  border: none; border-radius: 12px;
  background: var(--brand-green);
  color: #fff;
  font-size: 15px; font-weight: 700; font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,31,.06), 0 8px 20px rgba(110,184,92,.28);
  transition: filter .15s, transform .05s, box-shadow .15s;
}
.state-screen--login .login-form .login-knopf svg { width: 18px; height: 18px; }
.state-screen--login .login-form .login-knopf:hover { filter: brightness(1.04); }
.state-screen--login .login-form .login-knopf:active { transform: translateY(1px); }
.state-screen--login .login-form .login-knopf:disabled {
  opacity: .65; cursor: default; box-shadow: none;
}

.login-hinweis {
  margin-top: 22px;
  text-wrap: pretty;
  font-size: 12px; line-height: 1.55;
  color: var(--ink-4);
}

/* ---------- Schmale Fenster: Markenseite wird zum Kopf ---------- */
@media (max-width: 900px) {
  .login-split { grid-template-columns: 1fr; min-height: 100vh; }
  .login-brand {
    padding: 30px 26px 26px;
    justify-content: flex-start;
    min-height: auto;
  }
  .login-badge { margin-bottom: 16px; }
  .login-brand__titel { font-size: 38px; margin-bottom: 8px; }
  .login-brand__sub { font-size: 15px; margin-bottom: 0; }
  .login-brand__liste, .login-brand__fuss { display: none; }
  .login-panel { padding: 34px 26px 44px; place-items: start center; }
  .login-panel__inner { max-width: 420px; }
  .login-logo { margin-bottom: 24px; }
  .login-panel h2 { font-size: 25px; }
}

.state-spinner {
  width: 38px; height: 38px;
  border: 3px solid var(--brand-green-soft);
  border-top-color: var(--brand-green-deep);
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Schmale Infozeile ueber dem Pool-Grid — z. B. wenn die Ansprache erst
   spaeter startet. Bewusst leiser als .notice-card, weil Kacheln und Profile
   daneben sichtbar bleiben. */
.notice-slim {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  padding: 11px 15px;
  border: 1px solid var(--brand-green-line);
  border-radius: var(--radius-sm);
  background: var(--brand-green-soft);
  color: var(--brand-green-deep);
  font-size: 13.5px; font-weight: 500;
  line-height: 1.45;
}
.notice-slim::before {
  content: '';
  flex: 0 0 7px; width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-green-deep);
}

/* =====================================================================
 * App-Layout (Rail: Seitenleiste bündig links über die volle Höhe)
 * ---------------------------------------------------------------------
 * V2.2, 26.08.2026 (Tim): uebernommen aus der alten Partnerplattform
 * (`z_output/99_Archiv/partnerplattform-aufgegangen-im-cockpit-2026-08-23/
 * partnerplattform-app/css/app.css`). Vorher "Bento": zentrierter Canvas mit
 * 1440 px Deckel, Sidebar und Inhalt als schwebende Karten mit Abstand
 * dazwischen. Jetzt eine durchgehende weisse Leiste am linken Rand, nur durch
 * eine 1-px-Linie vom Inhalt getrennt.
 *
 * INHALTE UNVERAENDERT — Logo, Navigation, Status-, Kurs- und
 * Ansprechpartner-Karte bleiben genau die aus V2.1. Geaendert ist nur, wie sie
 * sitzen: keine eigenen Kartenschatten mehr, sondern Flaechen auf der Leiste.
 *
 * Nebeneffekt: In diesem Layout ist nichts mehr zentriert. Der Layout-Sprung
 * durch die erscheinende Scrollleiste (siehe die Rinne weiter oben) kann hier
 * gar nicht auftreten — die Regel bleibt trotzdem stehen, sie kostet nichts
 * und schuetzt, falls der Inhalt spaeter wieder gedeckelt wird.
 * ===================================================================== */
.app {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ---------- Mobile Topbar + Hamburger (nur < 860px sichtbar) ---------- */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }
.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-shell); cursor: pointer; flex: none;
}
.hamburger span { display: block; width: 20px; height: 2.5px; margin: 0 auto; background: var(--ink); border-radius: 2px; transition: transform .22s ease, opacity .22s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Sidebar: die Leiste selbst ---------- */
/* `overflow-y: auto` ist Pflicht, nicht Kosmetik: die alte Partnerplattform
   hatte in der Leiste nur Logo, Navigation und eine Promo-Box. Hier kommen
   Status-, Kurs- und Ansprechpartner-Karte dazu — auf kleinen Bildschirmen
   passt das nicht in 100vh und muss innen scrollen koennen. */
.sidebar {
  width: 264px;
  flex: 0 0 264px;
  background: var(--bg-shell);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.sidebar__top { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 6px 6px 0; }
.sidebar__logo { height: 30px; display: flex; align-items: center; }
.sidebar__claim { font-size: 12px; color: var(--ink-4); font-weight: 600; letter-spacing: .02em; }

/* Navigation liegt direkt auf der Leiste — keine Karte, kein Schatten.
   Die negativen Aussenabstaende ziehen den Block ueber die volle Leistenbreite
   und das Padding stellt die Einrueckung wieder her. Das ist die Voraussetzung
   dafuer, dass der Aktiv-Balken bei `left: 0` buendig an der Leistenkante sitzt:
   Die Leiste hat `overflow-y: auto` und schneidet damit alles ab, was ueber ihre
   Box hinausragt — ein negativer Offset (so wie in der alten Partnerplattform)
   waere nur als Splitter sichtbar. */
.sidebar__nav {
  background: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0 -18px;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 13px;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background .15s, color .15s;
}
.nav-item__icon { display: flex; }
.nav-item__icon svg { width: 19px; height: 19px; }
.nav-item__label { flex: 1; }
.nav-item__accent { display: none; }
.nav-item:hover { background: var(--bg-tile-hover); color: var(--ink-2); }
.nav-item.active { background: var(--brand-green-soft); color: var(--brand-green-deep); font-weight: 600; }
/* Gruener Balken buendig an der Leistenkante — sitzt an der Kante des
   voll ueber die Leiste gezogenen Nav-Blocks (siehe darueber).
   Aus der alten Partnerplattform uebernommen. */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-green);
}

/* Status-Karte (Phase + Laufzeit) — sitzt mit der KB-Karte unten */
.sidebar__status {
  margin-top: auto;
  /* Zart gruen hinterlegt, damit sich die laufende Ansprache von den weissen
     Karten abhebt. (Tim, 21.08.2026) */
  background: var(--brand-green-soft);
  border: 1px solid var(--brand-green-line);
  border-radius: var(--radius-sm);
  /* Kein Schatten: auf der weissen Leiste soll das eine Flaeche sein,
     keine schwebende Karte. */
  box-shadow: none;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sidebar__status-phase { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--brand-green-deep); }
/* Echtes Pulsieren: der Ring waechst und verblasst, statt nur zu blinken. */
.sidebar__status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-green-deep);
  flex: none;
  animation: statusPuls 1.9s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes statusPuls {
  0%   { box-shadow: 0 0 0 0 rgba(79,158,61,.50); }
  70%  { box-shadow: 0 0 0 10px rgba(79,158,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,158,61,0); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar__status-dot { animation: none; box-shadow: 0 0 0 4px rgba(79,158,61,.18); }
}
/* Laufzeitende erreicht: Box und Punkt bleiben gruen, der Punkt steht still.
   (Tim, 06.10.2026) */
#status-card.is-laufzeit-ende .sidebar__status-dot { animation: none; box-shadow: 0 0 0 4px rgba(79,158,61,.18); }
.sidebar__status-week { font-size: 12.5px; color: var(--brand-green-deep); font-weight: 600; }
.sidebar__status-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--brand-green-line); padding-top: 9px; }
.sidebar__status-meta strong { color: var(--ink); font-weight: 700; }

/* KB-Karte */
.sidebar__user {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: 13px 15px 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.sidebar__user-title {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sidebar__user-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(135deg, var(--brand-green-soft), #CDE8C0);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--brand-green-deep);
  font-weight: 700;
  font-size: 16px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-info { min-width: 0; }
.user-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta { font-size: 11.5px; color: var(--ink-3); }
.user-mail {
  display: block;
  text-decoration: none;
  /* Umbrechen statt abschneiden: in der schmalen Sidebar passt die Adresse
     nicht in eine Zeile ("leon.planke@karriere-gruen..."). */
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  transition: color .15s;
}
.user-mail:hover { color: var(--brand-green-deep); text-decoration: underline; }
.user-live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 0 4px var(--brand-green-soft);
  margin-left: auto;
  flex: none;
}

/* ---------- Content ---------- */
/* padding-top = Höhe der Logo-Zeile (Logo 30px + 6px Padding + 18px Gap),
   damit die Oberkante des Inhalts mit der Oberkante der Nav-Box fluchtet. */
/* Der Inhalt bringt seinen Abstand jetzt selbst mit — vorher kamen er und die
   Trennung von der Leiste aus `padding` und `gap` von `.app`. Deckel bei
   1500 px wie in der alten Partnerplattform, damit Textzeilen auf breiten
   Schirmen nicht ueber die ganze Flaeche laufen. */
.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px 34px 60px;
  max-width: 1500px;
}

.content__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 2px;
}
.content__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-shell);
  box-shadow: var(--shadow-sm);
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand-green-deep);
  margin-bottom: 10px;
}
.content__breadcrumb::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-green);
  box-shadow: 0 0 0 4px var(--brand-green-soft);
}
.content__title { font-size: 26px; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.content__sub { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }
.content__meta { display: flex; gap: 26px; }
.content__meta-row { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.content__meta-key { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); font-weight: 600; }
.content__meta-val { font-size: 14px; font-weight: 700; color: var(--ink); }

/* Panels (Tabs) */
.panel { display: none; animation: fadein .25s ease; }
.panel.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Generische Card */
.card {
  background: var(--bg-shell);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.card + .card { margin-top: 20px; }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card__title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.card__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* =====================================================================
 * Welcome-Card (Übersicht)
 * ===================================================================== */
.welcome-card {
  background: var(--bg-shell);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.welcome-card::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, var(--brand-green-soft), transparent 70%);
  opacity: .7;
  pointer-events: none;
}
.welcome-eyebrow {
  display: inline-block;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-green-deep); font-weight: 700;
  background: var(--brand-green-soft);
  padding: 5px 11px; border-radius: 100px;
  margin-bottom: 14px;
}
.welcome-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.welcome-title--xl { font-size: 28px; }
.welcome-text { font-size: 14.5px; color: var(--ink-3); margin-top: 10px; max-width: 680px; }
.welcome-text--lg { font-size: 15px; }
.welcome-features-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); font-weight: 700; margin: 22px 0 12px; }
.welcome-features { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.welcome-features li {
  font-size: 13.5px; color: var(--ink-2);
  padding-left: 26px; position: relative;
}
.welcome-features li::before {
  content: '';
  position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.2 5 9 10 3.2' stroke='%234F9E3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* =====================================================================
 * KPI-Tiles (Bento) — erste Kachel = Hero (grün, weiße Schrift)
 * ===================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.kpi-tile {
  background: var(--bg-shell);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kpi-tile__head { display: flex; align-items: center; justify-content: space-between; }
.kpi-tile__label { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.kpi-tile__value { font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1.05; }
.kpi-tile__delta { font-size: 12px; font-weight: 600; color: var(--brand-green-deep); }
.kpi-tile__delta-down { color: var(--red); }
.kpi-tile__delta-neutral { color: var(--ink-4); }

/* Hero: grüne Box mit WEISSER Schrift */
.kpi-tile:first-child {
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep));
  box-shadow: 0 10px 30px rgba(79,158,61,.28);
}
.kpi-tile:first-child .kpi-tile__label,
.kpi-tile:first-child .kpi-tile__value { color: #fff; }
.kpi-tile:first-child .kpi-tile__delta,
.kpi-tile:first-child .kpi-tile__delta-down,
.kpi-tile:first-child .kpi-tile__delta-neutral { color: rgba(255,255,255,.9); }

/* =====================================================================
 * Mein Pool — Profil-Karten
 * ===================================================================== */
/* Status-Filter über dem Pool */
/* Status-Filter als Dropdown (24.08.2026). Vorher eine Reihe Pillen — mit
   sieben Status brach die Zeile um und die Toolbar wurde unruhig. Das Dropdown
   zeigt immer nur die aktive Auswahl und haelt die Toolbar auf einer Zeile. */
.pool-filter { position: relative; margin-bottom: 18px; }
.pool-filter__trigger {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--border); background: var(--bg-shell);
  color: var(--ink-2); font-size: 13px; font-weight: 600; font-family: inherit;
  padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.pool-filter__trigger:hover { background: var(--bg-tile-hover); border-color: #D8DEE1; }
.pool-filter__trigger:focus-visible { outline: 2px solid var(--brand-green-deep); outline-offset: 2px; }
.pool-filter[data-offen="ja"] .pool-filter__trigger {
  border-color: var(--brand-green-line); background: var(--bg-shell);
}
/* Aktiver Filter (nicht "Alle") wird am Trigger sichtbar — sonst uebersieht man,
   dass das Grid gefiltert ist. */
.pool-filter[data-gefiltert="ja"] .pool-filter__trigger {
  border-color: var(--brand-green-deep); color: var(--brand-green-deep);
  background: var(--brand-green-soft);
}
.pool-filter__icon { display: flex; flex: none; color: var(--ink-4); }
.pool-filter__icon svg { width: 15px; height: 15px; }
.pool-filter[data-gefiltert="ja"] .pool-filter__icon { color: var(--brand-green-deep); }
.pool-filter__value { white-space: nowrap; text-align: left; }
.pool-filter__chevron { display: flex; flex: none; color: var(--ink-4); transition: transform .16s ease; }
.pool-filter__chevron svg { width: 14px; height: 14px; }
.pool-filter[data-offen="ja"] .pool-filter__chevron { transform: rotate(180deg); }
.pool-filter__count {
  font-size: 11px; font-weight: 700;
  background: var(--bg-tile); color: var(--ink-3);
  border: 1px solid var(--border);
  border-radius: 100px; padding: 1px 7px; min-width: 20px; text-align: center;
}
.pool-filter[data-gefiltert="ja"] .pool-filter__count {
  background: #fff; color: var(--brand-green-deep); border-color: var(--brand-green-line);
}

/* Menue */
.pool-filter__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 262px; max-width: min(320px, calc(100vw - 48px));
  background: var(--bg-shell); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  max-height: min(60vh, 420px); overflow-y: auto;
}
.pool-filter__opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2);
  padding: 8px 9px; border-radius: 10px;
  transition: background .1s;
}
.pool-filter__opt:hover, .pool-filter__opt:focus-visible { background: var(--bg-tile-hover); outline: none; }
.pool-filter__opt[aria-selected="true"] { background: var(--brand-green-soft); color: var(--brand-green-deep); font-weight: 700; }
/* Der Punkt traegt die Status-Pillenklasse und damit Hintergrund UND Randfarbe
   der Pille — dieselbe Farbsprache wie im Grid. Bewusst NICHT `currentColor`
   (die satte Schriftfarbe): "In Kontakt" und "Kontaktaufnahme" haben dieselbe
   Schriftfarbe und waeren dann nicht mehr unterscheidbar. Der Rand sorgt fuer
   Sichtbarkeit auch bei den blassen Stufen, deshalb 10 px statt 8 px. */
.pool-filter__dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid rgba(16,24,31,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.pool-filter__dot--alle { background: var(--ink-4); border-color: var(--ink-4); }
.pool-filter__opt-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pool-filter__opt-count { font-size: 11.5px; font-weight: 700; color: var(--ink-4); flex: none; }
.pool-filter__opt[aria-selected="true"] .pool-filter__opt-count { color: var(--brand-green-deep); }
.pool-filter__check { display: none; flex: none; color: var(--brand-green-deep); }
.pool-filter__check svg { width: 15px; height: 15px; }
.pool-filter__opt[aria-selected="true"] .pool-filter__check { display: flex; }
.pool-filter__trenner { height: 1px; background: var(--border); margin: 4px 2px; }

/* Toolbar: Filter links, View-Umschalter rechts */
.pool-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.pool-toolbar .pool-filter { margin-bottom: 0; }

/* Grid/Listen-Umschalter */
.pool-view-toggle { display: inline-flex; gap: 3px; background: var(--bg-shell); border: 1px solid var(--border); border-radius: 12px; padding: 3px; flex: none; }
.view-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; padding: 0; border: none; background: transparent; border-radius: 9px; color: var(--ink-4); cursor: pointer; transition: background .12s, color .12s; }
.view-btn svg { width: 17px; height: 17px; }
.view-btn:hover { color: var(--ink-2); background: var(--bg-tile-hover); }
.view-btn.active { background: var(--brand-green-soft); color: var(--brand-green-deep); }

/* Listen-Ansicht */
.pool-list { display: flex; flex-direction: column; gap: 8px; }
.pool-row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1.8fr auto;
  align-items: center;
  gap: 16px;
  background: var(--bg-shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 18px;
  box-shadow: var(--shadow-sm);
}
.pool-row__name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.pool-row__title { font-size: 13px; color: var(--ink-2); }
.pool-row__meta { font-size: 12px; color: var(--ink-3); }
.pool-row__status { justify-self: end; }
/* Freigeschaltete Match-Zeile — gleicher Gruenton wie die Kachel. */
.pool-row--match { background: #F5FBF1; border-color: var(--brand-green-line); cursor: pointer; }
.pool-row--match:hover { border-color: var(--brand-green); }
/* Eigene, FESTE Spalte fuer den Knopf — und zwar in JEDER Zeile, sobald die
   Liste ueberhaupt Matches enthaelt. Steckte der Knopf mit in der Status-Zelle,
   waeren die Match-Zeilen rund 130 px breiter als die uebrigen und die drei
   Textspalten wuerden zwischen den Zeilen springen. Enthaelt die Liste keinen
   Match, bleibt das Raster unveraendert vierspaltig — dann gibt es die Spalte
   gar nicht und es geht keine Breite verloren.
   150 px: die Knopfbeschriftung bricht darunter auf zwei Zeilen um. */
.pool-list--matches .pool-row { grid-template-columns: 1.1fr 1.4fr 1.8fr auto 150px; }
.pool-row__aktion { justify-self: end; }

.profiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.profile-card {
  background: var(--bg-shell);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 18px;
  transition: transform .12s, box-shadow .12s;
}
.profile-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16,24,31,.09); }
.profile-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.profile-card__id { font-size: 11px; color: var(--ink-4); letter-spacing: .04em; font-weight: 500; }
.profile-card__name { font-size: 14px; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.profile-card__title { font-size: 14px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); margin-bottom: 6px; }
.profile-card__meta { font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* =====================================================================
 * Freigeschaltete Match-Profile (11.09.2026)
 * =====================================================================
 * Zarter Gruenton plus eine gruene Innenlinie. Die Linie liegt als inset-
 * Schatten drin und NICHT als border: eine echte Border waere 2 px breiter als
 * die Nachbarkacheln und wuerde die Reihe im Raster verziehen.
 * Der Farbton ist bewusst heller als --brand-green-soft (das ist die
 * Pillenfarbe) — die Kachel soll sich abheben, nicht leuchten.
 */
.profile-card--match {
  background: #F5FBF1;
  box-shadow: var(--shadow), inset 0 0 0 1px var(--brand-green-line);
  cursor: pointer;
}
.profile-card--match:hover { box-shadow: 0 6px 16px rgba(16,24,31,.09), inset 0 0 0 1px var(--brand-green); }

/* Fusszeile mit dem Knopf. Abgesetzt durch eine Haarlinie, damit sie nicht
   wie eine weitere Textzeile gelesen wird. */
.profile-card__foot {
  margin: 12px -18px -18px;
  padding: 10px 18px 12px;
  border-top: 1px solid var(--brand-green-line);
}

.profil-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--brand-green-line);
  border-radius: 100px;
  background: #fff;
  color: var(--brand-green-deep);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.profil-btn svg { width: 13px; height: 13px; }
.profil-btn:hover { background: var(--brand-green-deep); border-color: var(--brand-green-deep); color: #fff; }
.profil-btn:focus-visible { outline: 2px solid var(--brand-green-deep); outline-offset: 2px; }

/* =====================================================================
 * Status-Pills (+ Tooltip)
 * ===================================================================== */
.status-pill {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.status-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pool { background: var(--brand-green-soft); color: var(--brand-green-deep); border-color: var(--brand-green-line); }
.status-talk { background: var(--amber-soft); color: var(--amber); border-color: rgba(180,83,9,.18); }
.status-valid { background: var(--brand-green-deep); color: #fff; border-color: var(--brand-green-deep); }
.status-cold { background: var(--red-soft); color: var(--red); border-color: rgba(185,28,28,.18); }
.status-quali { background: var(--quali-bg); color: var(--quali-ink); border-color: rgba(0,0,0,.10); }
/* Regio-Kandidaten (V2.1): neutral, klar abgesetzt von den Erfolgs-Stufen. */
/* Erste Stufe der Ansprache — blasser als „In Kontakt", damit die Abstufung
   Im Pool → Kontaktaufnahme → In Kontakt auch optisch lesbar ist. */
.status-reachout { background: #FFF7ED; color: #B45309; border-color: #FED7AA; }
/* Gespraech gelaufen, Entscheidung offen (24.08.2026). Blau statt Amber/Rot:
   der Status ist keine Absage und soll auch nicht wie eine wirken. */
.status-pending { background: var(--blue-soft); color: var(--blue); border-color: rgba(29,78,216,.18); }
/* Altes Label „Noch nicht kontaktiert" — Klasse bleibt fuer Bestandsdaten. */

/* =====================================================================
 * Detail-Popup freigeschaltetes Profil (11.09.2026)
 * =====================================================================
 * Haengt an <body>, nicht im Panel — es soll `#pool-grid.innerHTML` ueberleben.
 * Geschlossen ist display:none; keine Sichtbarkeit ueber [hidden], weil die
 * Klasse .is-offen sonst dagegen kaempfen muesste.
 *
 * `body.pmodal-offen { overflow: hidden }` friert den Hintergrund ein. Die
 * Rinne aus `scrollbar-gutter: stable` bleibt dabei reserviert (overflow:hidden
 * ist weiterhin ein Scroll-Container) — deshalb springt das Layout nicht.
 * Siehe Tech-Doku §11 „Layout-Rinne".
 */
.pmodal { display: none; position: fixed; inset: 0; z-index: 120; }
.pmodal.is-offen { display: flex; align-items: center; justify-content: center; padding: 24px; }
body.pmodal-offen { overflow: hidden; }

.pmodal__grund { position: absolute; inset: 0; background: rgba(14,26,31,.42); }
.pmodal__box {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg-shell);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(16,24,31,.25);
  padding: 26px 28px 28px;
}
.pmodal__x {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px; background: transparent;
  color: var(--ink-4); cursor: pointer; transition: background .12s, color .12s;
}
.pmodal__x svg { width: 17px; height: 17px; }
.pmodal__x:hover { background: var(--bg-tile-hover); color: var(--ink-2); }
.pmodal__x:focus-visible { outline: 2px solid var(--brand-green-deep); outline-offset: 2px; }

.pmodal__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 40px; margin-bottom: 20px; }
.pmodal__name { font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }

/* Telefonzeile ueber dem Raster — das einzige Feld, mit dem der Kunde handelt. */
.pmodal__telefon {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 20px; padding: 11px 14px;
  background: var(--brand-green-soft);
  border: 1px solid var(--brand-green-line);
  border-radius: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: var(--brand-green-deep);
}
.pmodal__telefon svg { width: 16px; height: 16px; flex: none; }
.pmodal__tel-link { color: inherit; text-decoration: none; }
.pmodal__tel-link:hover { text-decoration: underline; }
.pmodal__tel-link:focus-visible { outline: 2px solid var(--brand-green-deep); outline-offset: 3px; border-radius: 4px; }

.pmodal__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.pmodal__feld--breit { grid-column: 1 / -1; }
.pmodal__label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--ink-4); margin-bottom: 4px; }
.pmodal__wert { font-size: 14px; color: var(--ink); line-height: 1.45; }
.pmodal__leer { color: var(--ink-4); }

.pmodal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pmodal__chip {
  font-size: 12px; font-weight: 500; color: var(--brand-green-deep);
  background: var(--brand-green-soft); border: 1px solid var(--brand-green-line);
  border-radius: 100px; padding: 3px 10px;
}

.pmodal__motivation { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
/* pre-line: Zeilenumbrueche aus dem Airtable-Freitext bleiben erhalten. */
.pmodal__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); white-space: pre-line; }

@media (max-width: 620px) {
  .pmodal.is-offen { padding: 12px; align-items: flex-end; }
  .pmodal__box { padding: 22px 20px 24px; max-height: calc(100vh - 24px); }
  .pmodal__raster { grid-template-columns: 1fr; gap: 14px; }
}

/* Hinweiskarte: Fragebogen offen / Suchprofil in Abstimmung */
.notice-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 20px 22px;
  background: var(--brand-green-soft);
  border: 1px solid var(--brand-green-line);
  border-radius: 16px;
}
.notice-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--brand-green-deep);
}
.notice-card__icon svg { width: 19px; height: 19px; }
.notice-card__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 4px;
}
.notice-card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 68ch;
}

/* Warnton derselben Hinweiskarte: Zahlungseingang steht noch aus.
   Bewusst nur eine Farbvariante und keine zweite Komponente — Aufbau,
   Abstaende und Typografie bleiben identisch zur gruenen Karte, damit im
   Cockpit nicht zwei verschieden gebaute Hinweisboxen nebeneinander stehen.
   Leicht rot hinterlegt (Tim, 16.09.2026): deutlich, aber keine Fehlermeldung. */
.notice-card--warnung {
  background: var(--red-soft);
  border-color: rgba(185, 28, 28, .30);
}
.notice-card--warnung .notice-card__icon { color: var(--red); }
.notice-card--warnung .notice-card__title { color: #7F1D1D; }

/* Hinweisband ueber dem Pool-Grid: Regio-Potenzial */
.regio-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 18px;
  padding: 13px 16px;
  border: 1px solid #E2E8F0;
  border-left: 3px solid #94A3B8;
  border-radius: 12px;
  background: #F8FAFC;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.regio-note strong { color: var(--ink); font-weight: 700; }
.regio-note .status-pill { transform: translateY(-1px); }

/* Tooltip (Absagegrund) */
.status-pill--tooltip { cursor: pointer; position: relative; user-select: none; }
.status-pill--tooltip:focus { outline: 2px solid var(--brand-green-deep); outline-offset: 2px; }
.status-pill__info {
  display: inline-grid; place-items: center;
  width: 13px; height: 13px; border-radius: 50%;
  background: currentColor; color: #fff;
  font-size: 9px; font-weight: 700; font-style: normal;
  margin-left: 1px;
}
.status-pill__tooltip {
  display: none; /* nicht nur unsichtbar, sondern aus dem Layout — kein Overflow auf Mobile */
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  max-width: min(260px, 80vw);
  background: var(--ink);
  color: #fff;
  border-radius: 12px;
  padding: 12px 13px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 40;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.status-pill__tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 14px;
  border: 6px solid transparent;
  border-bottom-color: var(--ink);
}
.status-pill--tooltip.tooltip-flip-left .status-pill__tooltip { right: auto; left: 0; }
.status-pill--tooltip.tooltip-flip-left .status-pill__tooltip::before { right: auto; left: 14px; }
.status-pill__tooltip-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); font-weight: 700; margin-bottom: 4px; }
.status-pill__tooltip-text { display: block; font-size: 12.5px; line-height: 1.5; color: #fff; font-weight: 400; white-space: normal; overflow-wrap: anywhere; }
.status-pill--tooltip:hover .status-pill__tooltip,
.status-pill--tooltip:focus .status-pill__tooltip,
.status-pill--tooltip.is-open .status-pill__tooltip {
  display: block; opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* =====================================================================
 * Roadmap
 * ===================================================================== */
.roadmap-card { }
.roadmap-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.roadmap-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.roadmap-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-done { background: var(--brand-green-deep); }
.legend-active { background: var(--brand-green); box-shadow: 0 0 0 3px var(--brand-green-soft); }
.legend-pending { background: var(--ink-4); }

.track-v2 { display: flex; align-items: stretch; gap: 8px; }
.phase-card {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px;
  background: var(--bg-tile);
}
.phase-card--container { background: #fff; }
.phase-done { background: var(--brand-green-soft); border-color: var(--brand-green-line); }
.phase-active { border: 2px solid var(--brand-green); background: #fff; box-shadow: 0 0 0 4px var(--brand-green-soft); }
.phase-optional { background: var(--bg-tile); border-style: dashed; }
.phase-card__num { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); font-weight: 600; }
.phase-card__label { font-size: 14px; font-weight: 700; margin: 6px 0 8px; letter-spacing: -.01em; }
.phase-card__status { font-size: 12px; font-weight: 600; color: var(--brand-green-deep); display: flex; align-items: center; gap: 5px; }
.phase-card__status--muted { color: var(--ink-4); }
.phase-card__date { font-size: 11px; color: var(--ink-4); margin-top: 3px; }
.onboarding-check { flex: none; }
.phase-card__optional-badge {
  display: inline-block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); background: #fff; border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 100px; margin-bottom: 8px; font-weight: 600;
}
.phase-card__progress { margin-top: 10px; }
.phase-card__progress-bar { height: 6px; background: #EDEFF1; border-radius: 100px; overflow: hidden; }
.phase-card__progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-green), var(--brand-green-deep)); border-radius: 100px; }
.phase-card__progress-num { font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 5px; display: block; }
.phase-sub-grid { display: flex; flex-direction: column; gap: 7px; margin: 4px 0; }
.phase-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.phase-sub__id { font-size: 10px; font-weight: 700; color: var(--brand-green-deep); background: var(--brand-green-soft); border-radius: 6px; padding: 1px 6px; }
.phase-sub__label { color: var(--ink-2); font-weight: 500; flex: 1; }
.phase-sub__beat, .status-beat { color: var(--brand-green); font-size: 10px; }

.phase-link { align-self: center; flex: 0 0 22px; height: 2px; border-radius: 2px; background: var(--border); }
.phase-link--done { background: var(--brand-green-deep); }
.phase-link--flow { background: linear-gradient(90deg, var(--brand-green-deep), var(--brand-green)); animation: flowpulse 1.6s ease-in-out infinite; }
.phase-link--pending { background: var(--border); }
@keyframes flowpulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

.phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 20px; }
.phase-detail { background: var(--bg-shell); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 16px; border: 1px solid var(--border); position: relative; }
.phase-detail--active { border-color: var(--brand-green); box-shadow: 0 0 0 3px var(--brand-green-soft); }
.phase-detail--optional { border-style: dashed; }
.phase-detail__optional-badge { display: inline-block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); background: var(--bg-tile); padding: 2px 7px; border-radius: 100px; margin-bottom: 8px; font-weight: 600; }
.phase-detail__num { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); font-weight: 600; }
.phase-detail__title { font-size: 14px; font-weight: 700; margin: 5px 0 7px; letter-spacing: -.01em; }
.phase-detail__text { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

/* =====================================================================
 * Aktivitäten — Timeline
 * ===================================================================== */
.timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: 14px; padding-bottom: 20px; position: relative; }
.timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--border); }
.timeline-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand-green);
  flex: none; margin-top: 2px; z-index: 1;
  display: grid; place-items: center;
  font-size: 8px; color: #fff;
}
.timeline-item--milestone .timeline-dot { background: var(--brand-green-deep); border-color: var(--brand-green-deep); }
.timeline-dot .tl-star { width: 8px; height: 8px; fill: #fff; display: block; }
.timeline-content { flex: 1; min-width: 0; }
.timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.timeline-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.timeline-date { font-size: 11px; color: var(--ink-4); white-space: nowrap; }
.timeline-body { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }

/* =====================================================================
 * Empfehlungen
 * ===================================================================== */
.recommendations-intro { margin-bottom: 20px; }
.recommendation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rec-card {
  background: var(--bg-shell);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.rec-card__head { display: flex; align-items: center; margin-bottom: 12px; }
.rec-card__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-green-soft); color: var(--brand-green-deep); display: grid; place-items: center; }
.rec-card__icon svg { width: 19px; height: 19px; }
.rec-card__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.rec-card__what { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-bottom: 12px; }
.rec-card__bullets { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.rec-card__bullet { font-size: 12.5px; color: var(--ink-2); padding-left: 22px; position: relative; }
.rec-card__bullet::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.2 5 9 10 3.2' stroke='%234F9E3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.rec-card__impact { background: var(--brand-green-soft); border-radius: 12px; padding: 12px 13px; }
.rec-card__impact-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-green-deep); font-weight: 700; margin-bottom: 4px; }
.rec-card__impact-text { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* =====================================================================
 * Meine Stelle
 * ===================================================================== */
.job-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.job-card { }
.job-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-4); font-weight: 700; margin-bottom: 14px; }
.job-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.job-row:last-child { border-bottom: none; }
.job-row--empty { color: var(--ink-4); border-bottom: none; }
.job-key { color: var(--ink-3); }
.job-val { font-weight: 600; text-align: right; color: var(--ink); }
.job-benefits-block { margin-bottom: 14px; }
.job-benefits-block .job-key { display: block; margin-bottom: 8px; }
.benefit-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.benefit-chip { font-size: 11.5px; background: var(--brand-green-soft); color: var(--brand-green-deep); padding: 5px 11px; border-radius: 100px; font-weight: 500; }

/* =====================================================================
 * Responsive
 * ===================================================================== */
@media (max-width: 1080px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .profiles-grid { grid-template-columns: repeat(2, 1fr); }
  .phase-grid { grid-template-columns: repeat(2, 1fr); }
  .welcome-features { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* Die Leiste wird zum Drawer, der Inhalt nimmt die ganze Breite. `display:
     block` statt `flex`, damit die ausgeklappte Leiste (position: fixed) den
     Inhalt nicht mehr im Flexfluss verschiebt. */
  .app {
    display: block;
    padding: 14px;
  }

  /* Mobile Topbar mit Hamburger einblenden */
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* Logo links, Hamburger rechts */
    gap: 12px;
    background: var(--bg-shell);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px 14px;
    position: sticky;
    top: 10px;
    z-index: 30;
  }
  .mobile-topbar__logo { height: 24px; width: auto; display: block; }

  /* Sidebar wird zum Off-Canvas-Drawer */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100%;
    width: 284px;
    max-width: 85vw;
    margin: 0;
    padding: 18px;
    gap: 16px;
    /* Weiss wie die Leiste auf dem Desktop — der Drawer ist dieselbe Leiste,
       nur ausgeklappt. */
    background: var(--bg-shell);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 60;
    overflow-y: auto;
    max-height: none;
    box-shadow: 0 0 44px rgba(0,0,0,.20);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar__nav { flex-direction: column; overflow: visible; }
  .nav-item { white-space: normal; }

  /* Abdunkelnder Hintergrund hinter dem Drawer */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(14,26,31,.45);
    z-index: 55;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .sidebar-backdrop.open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  /* Auf Mobile uebernimmt die Topbar die obere Kante; Innenabstaende schrumpfen. */
  .content { padding: 14px 4px 40px; max-width: none; }
  /* Der Aktiv-Balken haengt am Innenabstand der Leiste — im Drawer sind es 18 px,
     also unveraendert richtig. Nur zur Sicherheit explizit. */
  .sidebar { border-right: 0; width: 284px; flex: none; }

  .content__header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .content__meta { gap: 20px; }
  .content__meta-row { text-align: left; }
  .content__title { font-size: 22px; }
  .job-grid { grid-template-columns: 1fr; }
  .recommendation-grid { grid-template-columns: 1fr; }
  /* Roadmap-Track bricht um (2×2) statt horizontal zu scrollen; Verbinder ausblenden */
  .track-v2 { flex-wrap: wrap; gap: 10px; }
  .track-v2 .phase-link { display: none; }
  .phase-card { flex: 1 1 calc(50% - 5px); min-width: 0; }

  /* Listen-Zeilen stapeln auf Mobile */
  .pool-row, .pool-list--matches .pool-row { grid-template-columns: 1fr; gap: 5px; }
  .pool-row__status { justify-self: start; margin-top: 4px; }
  .pool-row__aktion { justify-self: start; margin-top: 6px; }
}

@media (max-width: 520px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .profiles-grid { grid-template-columns: 1fr; }
  .phase-grid { grid-template-columns: 1fr; }
  .phase-card { flex: 1 1 100%; }   /* Roadmap-Track: 1 Spalte auf Mobile */
  .welcome-card { padding: 22px; }
  .welcome-title--xl { font-size: 23px; }
  .card { padding: 18px; }
  .content__meta { flex-direction: column; gap: 8px; }
  .pool-filter { width: 100%; }
  .pool-filter__trigger { width: 100%; justify-content: flex-start; }
  .pool-filter__value { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .pool-filter__menu { min-width: 0; width: 100%; max-width: none; }
}

/* =====================================================================
 * KURS-TAB (Partner-Akademie) — 21.08.2026
 * ---------------------------------------------------------------------
 * Uebernommen aus partnerplattform-app/css/app.css. NICHT neu geschrieben:
 * die Regeln sind maschinell unter `.kg-kurs` gescopt worden, damit sich die
 * beiden Design-Systeme nicht in die Quere kommen. `.card` heisst hier
 * `.k-card` — der einzige Klassenname, der mit dem Cockpit kollidierte.
 *
 * Das eigene Geruest der Partnerplattform (Sidebar, Header, Pillen-Navigation,
 * Modul-Baum, Dashboard, Materialien, Abschluss-Siegel) ist NICHT uebernommen.
 *
 * Die Farbvariablen stehen bewusst auf `.kg-kurs` statt in `:root`, damit sie
 * das Cockpit-Design nicht ueberschreiben. Dark-Mode-Regeln der Vorlage sind
 * weggelassen — kommt als eigener Schritt.
 * ===================================================================== */
.kg-kurs {
  --brand-ink:#1B2E34;
  --green:#6EB85C; --green-600:#57A345; --green-700:#468A38; --green-050:#EEF7EB;
  --ink:#1B2E34;
  --surface:#FFFFFF; --surface-2:#FBFCFB;
  --line:#E4EAE6; --line-2:#EDF1EE;
  --text:#16242A; --muted:#6C8189; --muted-2:#93A6AC;
  --shadow-sm:0 1px 2px rgba(27,46,52,.04),0 1px 3px rgba(27,46,52,.05);
  --shadow-md:0 4px 16px rgba(27,46,52,.06),0 1px 3px rgba(27,46,52,.04);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  color: var(--text);
}
.kg-kurs h1, .kg-kurs h2, .kg-kurs h3, .kg-kurs h4 { color: var(--text); letter-spacing:-.02em; }
.kg-kurs h1 { font-size:28px; font-weight:750; }
.kg-kurs h2 { font-size:20px; font-weight:700; }
.kg-kurs h3 { font-size:16px; font-weight:680; }

.kg-kurs *{box-sizing:border-box}
/* Die Partnerplattform hatte einen globalen button-Reset, das Cockpit hat keinen.
   Ohne diese Zeile zeichnet der Browser seinen Standardrahmen um jeden Kursknopf
   (.btn, .fpill, .bigplay). Spaetere Regeln mit zwei Klassen gewinnen weiterhin. */
.kg-kurs button{border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.kg-kurs .promo{margin-top:auto;background:linear-gradient(160deg,var(--green-050),var(--surface-2));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;text-align:center;}
.kg-kurs .promo .ring{margin:0 auto 12px}
.kg-kurs .promo h4{font-size:14.5px;font-weight:700;margin-bottom:4px}
.kg-kurs .promo p{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.kg-kurs .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:11px;font-weight:650;font-size:14px;transition:.16s;white-space:nowrap;}
.kg-kurs .btn svg{width:16px;height:16px;stroke-width:2}
.kg-kurs .btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(110,184,92,.30)}
.kg-kurs .btn-primary:hover{background:var(--green-600);transform:translateY(-1px)}
.kg-kurs .btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--text)}
.kg-kurs .btn-ghost:hover{border-color:var(--muted-2)}
.kg-kurs .btn-sm{padding:7px 13px;font-size:13px;border-radius:9px}
.kg-kurs .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.kg-kurs .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px;flex-wrap:wrap}
.kg-kurs .eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-700);margin-bottom:7px}
.kg-kurs .sub{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:64ch}
.kg-kurs .k-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);position:relative;transition:box-shadow .2s,transform .2s,border-color .2s}
.kg-kurs .grid{display:grid;gap:16px}
.kg-kurs .section{margin-top:34px}
.kg-kurs .section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.kg-kurs .link{font-size:13.5px;font-weight:650;color:var(--green-700);display:inline-flex;align-items:center;gap:5px}
.kg-kurs .link svg{width:15px;height:15px;stroke-width:2.2}
.kg-kurs .link:hover{gap:8px}
.kg-kurs .bar{height:7px;border-radius:99px;background:var(--line-2);overflow:hidden;margin-top:12px}
.kg-kurs .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--green-600));transition:width .6s cubic-bezier(.4,0,.2,1)}
.kg-kurs .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:660;background:var(--green-050);color:var(--green-700)}
.kg-kurs .chip.grey{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.kg-kurs .chip.warn{background:#FFF4E5;color:#A96A12}
.kg-kurs .ring{position:relative;width:82px;height:82px;flex:0 0 82px}
.kg-kurs .ring svg{transform:rotate(-90deg)}
.kg-kurs .ring .track{stroke:var(--line-2)}
.kg-kurs .ring .val{stroke:url(#kg-rg);stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}
.kg-kurs .ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:16px;font-weight:750;letter-spacing:-.02em}
.kg-kurs .ring.sm{width:44px;height:44px;flex:0 0 44px}
.kg-kurs .ring.sm b{font-size:11.5px}
.kg-kurs .merk{margin-top:18px;padding:14px 16px 14px 18px;border-radius:12px;background:var(--green-050);
  border-left:3px solid var(--green);font-size:14px;font-weight:620;color:var(--green-700);}
.kg-kurs .bul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.kg-kurs .bul li{position:relative;padding-left:24px;font-size:14px;color:var(--text)}
.kg-kurs .bul li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:7px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.kg-kurs .thumb{background:var(--brand-ink);overflow:hidden;position:relative;isolation:isolate}
.kg-kurs .thumb .mesh{position:absolute;inset:0;width:100%;height:100%;display:block}
.kg-kurs .thumb .num{position:absolute;left:20px;bottom:14px;font-size:64px;font-weight:800;letter-spacing:-.05em;
  color:rgba(255,255,255,.92);line-height:.85;text-shadow:0 2px 20px rgba(0,0,0,.25);}
.kg-kurs .thumb .mod{position:absolute;left:22px;top:18px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.kg-kurs .thumb .time{position:absolute;right:12px;bottom:12px;padding:4px 9px;border-radius:8px;font-size:11.5px;font-weight:680;
  background:rgba(10,18,20,.62);color:#fff;backdrop-filter:blur(6px);}
.kg-kurs .play{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .2s,background .2s;}
.kg-kurs .play svg{width:19px;height:19px;fill:var(--brand-ink);margin-left:2px}
.kg-kurs .thumb:hover .play{transform:translateY(-50%) scale(1.08)}
.kg-kurs .thumb .prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.22)}
.kg-kurs .thumb .prog i{display:block;height:100%;background:var(--green)}
.kg-kurs .lesson{display:grid;grid-template-columns:212px minmax(0,1fr) auto;gap:22px;padding:14px;align-items:center;cursor:pointer}
.kg-kurs .lesson:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);border-color:var(--line)}
.kg-kurs .lesson .thumb{height:126px;border-radius:12px}
.kg-kurs .lesson .num{font-size:40px;left:14px;bottom:10px}
.kg-kurs .lesson .mod{left:15px;top:13px;font-size:10px}
.kg-kurs .lesson .play{width:40px;height:40px;right:12px}
.kg-kurs .lesson .play svg{width:15px;height:15px}
.kg-kurs .lesson h3{margin-bottom:5px;font-size:17px}
.kg-kurs .lesson .desc{font-size:13.8px;color:var(--muted);line-height:1.55;max-width:70ch}
.kg-kurs .lesson .meta{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12.5px;color:var(--muted-2);flex-wrap:wrap}
.kg-kurs .lesson .act{display:flex;flex-direction:column;align-items:flex-end;gap:9px;padding-right:12px}
.kg-kurs .sep{width:4px;height:4px;border-radius:50%;background:var(--muted-2);opacity:.6}
.kg-kurs .filters{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.kg-kurs .fpill{padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:620;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);transition:.16s}
.kg-kurs .fpill:hover{color:var(--text);border-color:var(--muted-2)}
.kg-kurs .fpill.active{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 4px 12px rgba(110,184,92,.28)}
.kg-kurs .player{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.kg-kurs .stage{border-radius:var(--r-lg);overflow:hidden;background:var(--brand-ink);position:relative;aspect-ratio:16/9}
.kg-kurs .stage .mesh{position:absolute;inset:0;width:100%;height:100%;display:block}
.kg-kurs .stage-center{position:absolute;inset:0;display:grid;place-items:center}
.kg-kurs .bigplay{width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 20px 60px rgba(0,0,0,.4);transition:transform .2s}
.kg-kurs .bigplay:hover{transform:scale(1.06)}
.kg-kurs .bigplay svg{width:30px;height:30px;fill:var(--brand-ink);margin-left:4px}
.kg-kurs .stage .label{position:absolute;left:26px;top:24px;color:rgba(255,255,255,.8);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.kg-kurs .stage .cap{position:absolute;left:26px;bottom:28px;right:26px;color:#fff}
.kg-kurs .stage .cap h2{color:#fff;font-size:26px}
.kg-kurs .ctrls{display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.kg-kurs .ctrls .bar{flex:1;margin:0}
.kg-kurs .side-list{padding:8px}
.kg-kurs .side-item{display:flex;gap:11px;align-items:center;padding:10px 11px;border-radius:11px;cursor:pointer;transition:.15s}
.kg-kurs .side-item:hover{background:var(--surface-2)}
.kg-kurs .side-item.active{background:var(--green-050)}
.kg-kurs .side-item .idx{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:11.5px;font-weight:720;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line);flex:0 0 26px}
.kg-kurs .side-item.done .idx{background:var(--green);color:#fff;border-color:transparent}
.kg-kurs .side-item.active .idx{background:var(--ink);color:#fff;border-color:transparent}
.kg-kurs .side-item b{font-size:13.5px;font-weight:620;display:block;line-height:1.35}
.kg-kurs .side-item span{font-size:11.5px;color:var(--muted-2)}
@media(max-width:1250px){
  .kg-kurs .player{grid-template-columns:1fr}
}
@media(max-width:980px){
  .kg-kurs .lesson{grid-template-columns:150px 1fr}
  .kg-kurs .lesson .act{grid-column:1/-1;flex-direction:row;justify-content:flex-start;padding:0}
}
.kg-kurs .stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.kg-kurs .stage.laeuft .stage-center{display:none}
.kg-kurs .demo-hinweis{position:absolute;left:26px;bottom:26px;right:26px;color:rgba(255,255,255,.9);font-size:13px;
  background:rgba(10,18,20,.55);backdrop-filter:blur(8px);padding:10px 14px;border-radius:10px}
.kg-kurs .ticker{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:600;letter-spacing:.02em}
.kg-kurs .gesperrt{opacity:.55;cursor:not-allowed}
.kg-kurs .gesperrt:hover{transform:none;box-shadow:var(--shadow-sm)}
.kg-kurs .hinweis{padding:14px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);
  font-size:13.5px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
.kg-kurs .hinweis svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px;stroke-width:1.9}
.kg-kurs .feld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.kg-kurs .feld label{font-size:13px;font-weight:640;color:var(--muted)}
.kg-kurs .feld input{padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);
  color:var(--text);font:inherit;font-size:14.5px;transition:.15s}
.kg-kurs .feld input:focus{outline:none;border-color:var(--green);background:var(--surface)}
.kg-kurs .reihe{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-bottom:10px}
.kg-kurs .zustimmung{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface-2);margin:18px 0}
.kg-kurs .zustimmung input{width:20px;height:20px;accent-color:var(--green);margin-top:2px;flex:0 0 20px}
.kg-kurs .zustimmung span{font-size:14px;line-height:1.55}
.kg-kurs .fehler{color:#C0392B;font-size:13.5px;margin-top:10px}

/* Kurs-Box in der Seitenleiste — Vorbild ist die Promo-Box der
   Partnerplattform. Steht zwischen Statuskarte und Ansprechpartner. */
.sidebar__kurs {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: 16px 15px 15px;
  text-align: center;
}
.sidebar__kurs .ring { margin: 0 auto 12px; }
.sidebar__kurs h4 { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.sidebar__kurs p { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; line-height: 1.45; }

/* Zaehler im Navigationspunkt (wie bei „Mein Kurs" 0/14) */
.nav-item__count {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-tile);
  border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700;
  color: var(--ink-3);
}
.nav-item.active .nav-item__count { background: #fff; border-color: transparent; color: var(--brand-green-deep); }