/* Lead Center — ein Stylesheet, Schrift aus /static/fonts, kein externer Ursprung (D-16). */
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/static/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/static/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
    U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,
    U+A720-A7FF;
}
:root{
  --dunkelblau:#16324f; --dunkelblau-2:#204a73; --grund:#f4f6f9; --flaeche:#ffffff;
  --text:#1f2933; --leise:#5b6675; --linie:#dfe3e7; --blau:#1f5fa8;
  --fehler:#a3271f; --fehler-grund:#fdecea; --info:#1f5fa8; --info-grund:#e8f0fb;
  --blau-hell:#e8f0fb; --spalte:#eceff3; --ok:#1e7a4c; --ok-grund:#e6f4ec;
  --warn:#8a5a00; --warn-grund:#fdf3dc; --notiz:#fffbea;
  --leiste:220px; --kopf:52px;
}
*{box-sizing:border-box}
body{margin:0; font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:15px; line-height:1.5;
  color:var(--text); background:var(--grund)}
h1{font-size:22px; font-weight:600; margin:0 0 .8rem}
a{color:var(--blau)}
:focus-visible{outline:2px solid var(--blau); outline-offset:2px}

.kopf{position:fixed; top:0; left:var(--leiste); right:0; height:var(--kopf); display:flex;
  align-items:center; gap:1rem; padding:0 1.5rem; background:var(--flaeche);
  border-bottom:1px solid var(--linie)}
.kopf .marke{font-weight:600; margin-right:auto}
.kopf .marke span{color:var(--leise); font-weight:400}
.kopf .nutzer{color:var(--leise)}
.abmelden{margin:0}

.seitenleiste{position:fixed; top:0; left:0; bottom:0; width:var(--leiste); padding:1rem 0;
  background:var(--dunkelblau); display:flex; flex-direction:column}
.seitenleiste a{color:#fff; text-decoration:none; padding:.6rem 1.25rem; opacity:.85}
.seitenleiste a:hover{background:var(--dunkelblau-2); opacity:1}
.seitenleiste a.aktiv{background:var(--dunkelblau-2); opacity:1; font-weight:600;
  box-shadow:inset 3px 0 0 #fff}
.seitenleiste a:focus-visible{outline:2px solid #fff; outline-offset:-2px}

.inhalt{padding:1.5rem}
.angemeldet .inhalt{margin-left:var(--leiste); padding-top:calc(var(--kopf) + 1.5rem)}
.leise{color:var(--leise)}

.karte{background:var(--flaeche); border:1px solid var(--linie); border-radius:8px; padding:1.5rem;
  max-width:560px}
.anmeldung{max-width:380px; margin:12vh auto 0}
.anmeldung-marke{margin:0 0 1rem; color:var(--dunkelblau)}
.feld{display:flex; flex-direction:column; gap:.25rem; margin-bottom:1rem}
input[type=email],input[type=password],input[type=text]{font:inherit; padding:.5rem .6rem;
  border:1px solid #7d8593; border-radius:6px}
button{font:inherit; padding:.45rem 1rem; border:0; border-radius:6px; background:var(--dunkelblau);
  color:#fff; cursor:pointer}
button:hover{background:var(--dunkelblau-2)}

.meldung{padding:.6rem .8rem; border-radius:6px; margin:0 0 1rem}
.meldung.fehler{background:var(--fehler-grund); color:var(--fehler)}
.meldung.info{background:var(--info-grund); color:var(--info)}
.meldung.warn{background:var(--warn-grund); color:var(--warn)}

.tabelle{border-collapse:collapse; background:var(--flaeche); border:1px solid var(--linie); min-width:60%}
.tabelle th,.tabelle td{text-align:left; padding:.5rem .8rem; border-bottom:1px solid var(--linie)}
.tabelle th{background:#eef2f7; font-weight:600}

/* Kanban (02-UI-SPEC) */
.board-kopf{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1rem}
.board-kopf form{display:flex; align-items:center; gap:.5rem; margin:0}
select{font:inherit; padding:.45rem .6rem; border:1px solid #7d8593; border-radius:6px; background:var(--flaeche)}
.umschalter{display:flex; gap:.25rem}
.umschalter a{padding:.4rem .8rem; border-radius:6px; text-decoration:none}
.umschalter a[aria-current]{background:var(--blau-hell); font-weight:600}
.board{display:flex; gap:12px; overflow-x:auto; align-items:flex-start; padding-bottom:8px}
.spalte{flex:0 0 272px; background:var(--spalte); border:1px solid transparent; border-radius:8px; padding:8px;
  display:flex; flex-direction:column; gap:8px; transition:background .12s, border-color .12s}
.spalte.park{border:1px dashed var(--leise)}
.spalte-kopf{display:flex; justify-content:space-between; gap:8px; padding:4px}
.spalte-name{font-weight:600}
.zaehler,.meta{font-variant-numeric:tabular-nums}
.zaehler{color:var(--leise); font-size:12px; white-space:nowrap}
.leer{margin:4px; font-size:13px}
.lead-karte{position:relative; background:var(--flaeche); border:1px solid var(--linie); border-radius:8px; padding:12px}
.lead-name{display:block; font-weight:600; color:var(--text); text-decoration:none; padding-right:24px}
.lead-name:hover{text-decoration:underline}
.meta{margin:4px 0 0; font-size:12px; color:var(--leise)}
.chips{list-style:none; display:flex; flex-wrap:wrap; gap:4px; margin:0 0 8px; padding:0}
.chips li{font-size:12px; background:var(--blau-hell); color:var(--blau); border-radius:4px; padding:0 6px}
.initialen{position:absolute; top:12px; right:12px; width:20px; height:20px; border-radius:50%;
  background:var(--dunkelblau); color:#fff; font-size:10px; display:grid; place-items:center}
.lead-karte[draggable]{cursor:grab}
.lead-karte.speichert{opacity:.6}
.spalte.ziel{background:var(--blau-hell); border:2px dashed var(--blau)}
.ausgaenge summary{cursor:pointer; font-size:13px; color:var(--leise); padding:4px}
.ausgaenge .lead-karte{margin-top:8px}
.ausgaenge.verloren .status{color:var(--fehler)}
.ausgaenge.abschluss .status{color:var(--ok)}

/* Lead-Detail (02-UI-SPEC) */
.lead-kopf h1{margin-bottom:0}
.lead-kopf p{margin:0 0 1rem}
.status.verloren{color:var(--fehler); font-weight:600}
.status.abschluss{color:var(--ok); font-weight:600}
.phasenleiste{list-style:none; display:flex; overflow-x:auto; gap:2px; margin:0 0 .75rem; padding:0 0 4px}
.phasenleiste li{flex:1 0 auto}
.phasenleiste form{margin:0}
.phasenleiste button{width:100%; white-space:nowrap; font-size:13px; padding:.45rem 1.2rem; border-radius:0;
  background:var(--spalte); color:var(--text);
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%)}
.phasenleiste li:first-child button{clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%)}
.phasenleiste button:hover{background:var(--linie)}
.phasenleiste button.erledigt{background:var(--blau-hell); color:var(--blau)}
.phasenleiste button.aktuell{background:var(--blau); color:#fff; font-weight:600}
/* clip-path schneidet den globalen Fokusring ab — Ring nach innen legen */
.phasenleiste button:focus-visible{outline:2px solid var(--blau); outline-offset:-4px}
.phasenleiste button.aktuell:focus-visible{outline-color:#fff}
.phase-wahl{display:flex; align-items:center; gap:.5rem; margin:0 0 1.5rem}
.lead-raster{display:grid; grid-template-columns:5fr 7fr; gap:24px; align-items:start}
.stammdaten,.verlauf{background:var(--flaeche); border:1px solid var(--linie); border-radius:8px; padding:16px}
.gruppe{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--leise); margin:0 0 8px}
.gruppe::before,.gruppe::after{content:""; flex:1; border-top:1px solid var(--linie)}
.gruppe::before{flex:0 0 12px}
.stammdaten dl{margin:0 0 16px}
.stammdaten dt{font-size:12px; color:var(--leise)}
.stammdaten dd{margin:0 0 8px}
.ziffern{font-variant-numeric:tabular-nums}
.zeitleiste{list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--linie)}
.zeitleiste li{display:flex; gap:12px; margin:0 0 16px -29px}
.zeitleiste .symbol{flex:0 0 28px; height:28px; border-radius:50%; background:var(--blau-hell); color:var(--blau);
  display:grid; place-items:center; font-size:11px; font-weight:600}
.zeitleiste p{margin:0}
.zeitleiste .zeit{font-size:12px; color:var(--leise); font-variant-numeric:tabular-nums}
.ausgang{display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem; margin:0 0 1.5rem}
.ausgang p{margin:0; align-self:center}
.ausgang form{margin:0}
.ausgang-knopf summary{cursor:pointer; list-style:none; padding:.35rem .9rem; border:1px solid; border-radius:6px;
  background:var(--flaeche); font-size:13px}
.ausgang-knopf.verloren summary{border-color:var(--fehler); color:var(--fehler)}
.ausgang-knopf.abschluss summary{border-color:var(--ok); color:var(--ok)}
.ausgang-knopf form{display:flex; flex-direction:column; gap:4px; margin-top:6px; padding:8px;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:6px}
.zustaendig-wahl{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:0 0 16px}
.kopieren{padding:2px 4px; line-height:0; vertical-align:middle; background:none; color:var(--blau);
  border:1px solid var(--linie); border-radius:6px}
.hinweis-warn{display:inline-block; margin-left:6px; padding:0 6px; border-radius:6px; font-size:12px;
  background:var(--warn-grund); color:var(--warn)}
.notiz-form{display:flex; flex-direction:column; gap:6px; margin:0 0 16px}
.notiz-form label{font-size:12px; color:var(--leise)}
.notiz-form textarea{background:var(--notiz); border:1px dashed var(--linie); border-radius:6px; padding:8px;
  font:inherit; resize:vertical}
.notiz-form button{align-self:flex-start}
.zeitleiste .zeilen{white-space:pre-wrap}
.stammdaten-form summary{cursor:pointer; color:var(--blau); margin-bottom:8px}
.zeitleiste .notiz-text{white-space:pre-wrap; background:var(--notiz); border-radius:6px; padding:4px 8px}
/* Phasenpflege */
.phasen-tabelle form.inline{display:inline-flex; gap:4px; margin:0}
.phasen-tabelle input[name=name]{width:16rem}
.phasen-tabelle details form{display:flex; flex-direction:column; gap:4px; margin-top:6px}
/* Kontaktliste (02-UI-SPEC) */
.kontakt-filter{flex-wrap:wrap}
.zaehler-gross{font-variant-numeric:tabular-nums; color:var(--leise)}
.knopf-zweit{padding:.45rem 1rem; border:1px solid var(--dunkelblau); border-radius:6px; text-decoration:none; color:var(--dunkelblau)}
.knopf-zweit:hover{background:var(--blau-hell)}
.tabelle-rahmen{max-height:calc(100vh - 220px); overflow:auto; border:1px solid var(--linie); border-radius:8px}
.tabelle.kontakte{width:100%; min-width:0; border:0; font-size:13px}
.tabelle.kontakte th{position:sticky; top:0; z-index:1}
.tabelle.kontakte td{height:44px; padding-top:0; padding-bottom:0; vertical-align:middle}
.tabelle.kontakte .chips{margin:0; flex-wrap:nowrap}
.avatar{display:inline-grid; place-items:center; width:24px; height:24px; margin-right:8px; border-radius:50%;
  background:var(--blau-hell); color:var(--blau); font-size:10px; font-weight:600; vertical-align:middle}
.seiten{display:flex; align-items:center; gap:1rem; margin-top:1rem; font-variant-numeric:tabular-nums}