/* Skillgainer Cockpit — Design-System v2 (05.08.2026)
   Farb-Rollen sind getrennt: Struktur (Zonen-Kennfarben) / Status (rot, gelb, grün)
   / Interaktion (EIN Akzent, Petrol). Keine Farbe erfüllt zwei Rollen.
   Die bestehenden Token-NAMEN bleiben — nur die Werte wechseln, damit die
   Mechanik (--blue-* färbt alles Interaktive) unangetastet bleibt. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Nunito:wght@400;600&display=swap');
:root{
 /* Interaktion — EIN Akzent: Petrol. Nur hierfür: aktive Nav, aktive Tabs/Chips,
    Links, der einzige gefüllte Button, Timeline-Füllung. */
 --blue-50:#eef7f9;--blue-100:#dbeef3;--blue-200:#b8dde6;--blue-300:#8ac5d5;--blue-400:#4ea6bd;
 --blue-500:#1c8ba7;--blue-600:#0e7490;--blue-700:#0e7490;--blue-800:#0b5c73;
 /* Gold ist keine eigene Rolle mehr — auf die Status-Gelb-Familie gezogen. */
 --gold-100:#fbf6ea;--gold-300:#e3d3a6;--gold-400:#d3bb77;--gold-500:#bda049;--gold-600:#a3822c;--gold-700:#9a6700;
 /* Neutrals. --gray-400 ist Tertiär und ausdrücklich NUR dekorativ (Punkte, Icons,
    Linien): auf Weiß nur 3.15:1, für Text unzulässig. Kleinster Textton ist --gray-500. */
 --ink:#1c2130;--gray-700:#3c4354;--gray-600:#5c6474;--gray-500:#666f81;--gray-400:#8a91a3;
 --gray-300:#cfd4dc;--gray-200:#e4e7ec;--gray-100:#eef0f4;--gray-50:#f6f7f9;--white:#fff;
 /* Status — EXKLUSIV, nirgendwo sonst verwenden. */
 --success:#2e7d32;--success-bg:#eef6ef;--warning:#9a6700;--warning-bg:#fbf6ea;
 --danger:#c0362c;--danger-bg:#fbf1f0;--info:#0e7490;--info-bg:#eef7f9;
 --danger-ink:#c0362c;--warning-ink:#9a6700;--success-ink:#2e7d32;
 /* Zonen-Kennfarben der Fokus-Seite — nur Punkt + hauchfeine Flächentönung. */
 /* Zonen-Palette Okabe-Ito (farbfehlsichtigkeits-sicher, keine Kollision mit
    Status-Rot/-Gelb/-Gruen). Je Zone vier Tokens:
      --zN    Balken, Originalfarbe, Nicht-Text
      --zN-f  Lane-FLAECHE (Toenung „Deutlich")
      --zN-r  Rahmen der Lane, getoent
      --zN-c  Fuellung des Zaehler-Chips, weisse Zahl darauf
      --zN-c  Fuellung des Zaehler-Chips, weisse Zahl darauf
      --zN-ink Zonenfarbe als TEXT auf der Lane-Flaeche
    Zwei getrennte Ink-Stufen, weil zwei verschiedene Aufgaben: --zN-c muss
    weisse Schrift tragen (weiss auf #009E73 nur 3.42:1, auf #56B4E9 nur
    2.31:1, auf #CC79A7 nur 3.06:1 → nachgedunkelt auf 4.55–4.58:1), --zN-ink
    muss selbst auf der hellen Flaeche lesbar sein (4.50–4.60:1). Der Balken
    bleibt in beiden Faellen original — er traegt keinen Text. */
 --z1:#0072B2;--z1-f:#E0EEF6;--z1-r:#CCE3F0;--z1-c:#0072B2;--z1-ink:#0070ae;
 --z2:#009E73;--z2-f:#E0F3EE;--z2-r:#CCECE3;--z2-c:#008662;--z2-ink:#007b5a;
 --z3:#56B4E9;--z3-f:#EBF6FC;--z3-r:#DDF0FB;--z3-c:#3b7ca1;--z3-ink:#387597;
 --z4:#CC79A7;--z4-f:#F9EFF4;--z4-r:#F5E4ED;--z4-c:#a36186;--z4-ink:#995b7d;
 /* „Warten auf" kam nach dem Mockup dazu und hat dort keine Farbe. Bewusst
    neutral gehalten: die freien Okabe-Ito-Toene sind Orange, Gelb und Zinnober
    — alle drei liegen zu nah an Warnung und Verzug, und Status-Farben bleiben
    exklusiv. Ein Wartezustand ist ohnehin kein Signal, sondern eine Ablage. */
 /* „Warten auf" war Schiefer und lag damit ΔE 3,8 neben dem Schema Schiefer —
    ein Knopf haette dieselbe Farbe getragen wie der Balken daneben. Jetzt ein
    warmer Taupe: ΔE 26 zum naechsten Nachbarn, 57 zum Verzugs-Rot. Bewusst
    diese Lane und nicht das Schema: die vier Okabe-Ito-Zonen sind gesetzt,
    diese fuenfte ist spaeter dazugekommen. */
 --z5:#6b5b4b;--z5-f:#F3F1EE;--z5-r:#E6E1DB;--z5-c:#6b5b4b;--z5-ink:#5c4e40;
 /* Notiz-/Garage-Tönungen auf dieselben abgeschwächten Werte gezogen. */
 --stk-rot:#fbf1f0;--stk-rot-b:#c0362c;--stk-gruen:#eef6ef;--stk-gruen-b:#2e7d32;
 --stk-blau:#eef7f9;--stk-blau-b:#0e7490;--stk-gelb:#fbf6ea;--stk-gelb-b:#9a6700;
 /* 8pt-Spacing-Skala */
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
 /* Radien: 6 px innen (Karten, Buttons, Chips, Inputs), 8 px äußere Container. */
 --r-sm:6px;--r:6px;--r-lg:8px;--r-xl:8px;--pill:999px;
 /* Flach: Trennung über Hairlines, nicht über Schatten. */
 --sh-1:none;--sh-2:none;--sh-3:0 1px 2px rgba(28,33,48,.06);
 --sh-pop:0 8px 28px rgba(28,33,48,.14);
 --grad-blue:#0e7490;--grad-side:#182036;
 /* Navigation als Token — ein Schema kann sie ersetzen. --nav-group lag bei
    3.51:1 auf dem Navigationsgrund und ist auf einen tragfaehigen Wert gehoben. */
 --nav-text:#aeb8c7;--nav-group:#8592a6;--nav-muted:#8b97a8;
 --focus:0 0 0 3px rgba(14,116,144,.35);--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* [hidden] muss gewinnen. Jede Autoren-Regel mit display:flex/block schlaegt
   sonst das display:none, das der Browser dem Attribut mitgibt — versteckte
   Elemente blieben sichtbar. Genau das passierte beim Lade-Hinweis der
   Zerlegung und beim leeren Fehler-Kasten darunter. */
[hidden]{display:none !important}
body{font-family:'Nunito',sans-serif;color:var(--gray-700);background:var(--gray-50);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;color:var(--ink);letter-spacing:-.01em}
.eyebrow{font-family:'Poppins';text-transform:uppercase;letter-spacing:.07em;font-size:11px;font-weight:600;color:var(--gray-500)}
a{color:var(--blue-700);text-decoration:none}button{font-family:'Nunito';cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--focus)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.app{display:flex;min-height:100vh}
.sidebar{width:244px;background:var(--grad-side);color:#c3ccdd;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:8px}
/* Marke: Wortmarke oben, Logo der aktiven Sicht darunter, beides zentriert.
   Das Logo traegt eine helle Flaeche, weil ein hochgeladenes Fremdlogo dunkel
   sein kann und auf der dunklen Seitenleiste sonst verschwindet. width:auto
   sorgt dafuer, dass die Flaeche das Bild umschliesst und nicht als breiter
   weisser Balken danebensteht. */
.logo{padding:16px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:8px}
.logo .wortmarke{font-family:'Poppins';font-size:1.0625rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--nav-muted);line-height:1.1}
.logo img{height:auto;width:auto;max-height:56px;max-width:88%;object-fit:contain}
/* Nur HOCHGELADENE Logos bekommen eine helle Traegerflaeche: sie koennen
   beliebig dunkel sein. Unsere eigenen (Cockpit, Alles) sind fuer den dunklen
   Grund gemacht — auf einer weissen Flaeche wuerde das helle Cockpit-Logo
   verschwinden, was es zuerst auch tat. */
.logo img.eigen{background:rgba(255,255,255,.94);border-radius:6px;padding:5px 7px}
/* Name der aktiven Sicht — gleiche Schrift und Groesse wie die Wortmarke, aber
   in Gelb. Das ist eine BEWUSSTE Ausnahme von der Rollen-Trennung: Gelb ist
   sonst Status (Warnung) und exklusiv. Hier ist es Auszeichnungsfarbe der
   DUNKLEN Seitenleiste und kommt im hellen Content-Bereich nirgends vor —
   die beiden koennen sich also nicht begegnen und nicht verwechselt werden.
   Kontrast von #FDE047 gegen alle neun vorkommenden Seitenleisten-Toene
   gerechnet: 10,35:1 (Smaragd) bis 12,27:1 (Standard) — schlechtester Fall
   mehr als das Doppelte der Schwelle.
   Eine Zeile, ellipsiert; der volle Name steht im title-Attribut. */
.logo .sichtname{font-family:'Poppins';font-size:1.0625rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#FDE047;line-height:1.1;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.logo .sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--nav-muted);font-family:'Poppins';font-weight:600;border-left:1px solid #3a4456;padding-left:10px}
.nav{padding:6px 4px;flex:1;overflow-y:auto}
.nav a{display:flex;align-items:center;gap:11px;padding:11px 14px;margin:3px 2px;color:var(--nav-text);font-weight:600;font-size:14px;border-radius:var(--r-sm);transition:all .18s var(--ease)}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--blue-700);color:#fff;box-shadow:none}
.nav a i{width:18px;height:18px}
.nav .group{padding:14px 16px 6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--nav-group);font-family:'Poppins';font-weight:600}
.side-foot{padding:12px;margin:6px 4px;border-radius:var(--r);background:rgba(255,255,255,.05);display:flex;align-items:center;gap:10px}
.side-foot .ava{width:34px;height:34px;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.side-foot .who{font-size:14px;color:#fff;font-weight:600}.side-foot .role{font-size:11px;color:var(--nav-muted)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--gray-200);padding:16px 40px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;gap:16px}
.topbar h1{font-size:20px}
.content{padding:34px 40px 48px;flex:1;max-width:1200px;width:100%}
.btn{background:var(--blue-700);color:#fff;border:none;padding:9px 16px;font-weight:600;font-size:14px;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:7px;box-shadow:none;transition:background .15s var(--ease)}
.btn:hover{background:var(--blue-800);filter:none;transform:none}.btn:active{transform:none}
.btn.ghost{background:#fff;color:var(--blue-800);border:1px solid var(--gray-300);box-shadow:none}
.btn.sm{padding:7px 13px;font-size:14px}
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-lg);box-shadow:none}
.card.elevated{box-shadow:var(--sh-3);border-color:transparent}
.band{display:flex;align-items:center;gap:10px;margin:2px 0 16px}.band .line{flex:1;height:1px;background:linear-gradient(90deg,var(--blue-200),transparent)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:4px 10px;font-family:'Poppins';border-radius:var(--pill)}
.badge.warn{background:var(--warning-bg);color:var(--warning-ink)}.badge.dang{background:var(--danger-bg);color:var(--danger-ink)}
.badge.ok{background:var(--success-bg);color:var(--success-ink)}.badge.info{background:var(--info-bg);color:var(--blue-800)}.badge.muted{background:var(--gray-100);color:var(--gray-600)}
.ava{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-family:'Poppins';flex-shrink:0;width:28px;height:28px;font-size:11px;box-shadow:var(--sh-1)}
.sectit{display:flex;align-items:center;justify-content:space-between;margin:4px 0 22px;gap:12px;flex-wrap:wrap}.sectit h2{font-size:20px}
.next3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}
.act{padding:16px;display:flex;flex-direction:column;gap:8px}

.act .t{font-family:'Poppins';font-weight:600;color:var(--ink);font-size:15px;line-height:1.35}.act .s{font-size:14px;color:var(--gray-600)}/* Die Fusszeile traegt seit „Loslegen" mehrere Aktionen — ohne Abstand kleben
   sie aneinander und lesen sich als ein Satz. */
.act .b{margin-top:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0}
.kpi{padding:12px 14px;display:flex;align-items:center;gap:10px}.kpi .chip{width:27px;height:27px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.kpi .chip i{width:15px;height:15px}
a.kpi-link{text-decoration:none;color:inherit;cursor:pointer;transition:transform .14s var(--ease),box-shadow .18s var(--ease),border-color .18s}
a.kpi-link:hover{transform:none;box-shadow:none;border-color:var(--blue-300)}
a.kpi-link:focus-visible{outline:none;box-shadow:var(--focus)}
.kpi-go{width:13px;height:13px;margin-left:auto;flex-shrink:0;color:var(--gray-300);transition:color .18s,transform .18s}
a.kpi-link:hover .kpi-go{color:var(--blue-500);transform:translate(1px,-1px)}
.kpi .n{font-family:'Poppins';font-weight:600;font-size:15px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}.kpi .l{font-size:11px;color:var(--gray-600);margin-top:1px;font-weight:600;line-height:1.2}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel-h{padding:16px 20px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between}.panel-h h3{font-size:15px}
.discl{overflow:hidden}
.discl>summary{list-style:none;cursor:pointer;user-select:none}
.discl>summary::-webkit-details-marker{display:none}
.discl>summary:focus-visible{outline:none;box-shadow:var(--focus)}
.discl:not([open])>summary{border-bottom:none}
.ph-l{display:flex;align-items:center;gap:9px;min-width:0}
.disc-chevron{width:16px;height:16px;color:var(--gray-500);flex-shrink:0;transition:transform .18s var(--ease)}
.discl[open] .disc-chevron{transform:rotate(90deg)}
.ph-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;font-size:11px;font-weight:600;font-family:'Poppins';color:var(--blue-700);background:var(--blue-50);border-radius:var(--pill);vertical-align:middle}
.list .it{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--gray-100)}.list .it:last-child{border-bottom:none}.list .it .tt{flex:1;font-weight:600;color:var(--ink);font-size:14px}.list .it i{width:16px;height:16px;flex-shrink:0}.list .meta{font-size:12px;color:var(--gray-500)}
.sticky{padding:14px;border-radius:var(--r-sm);box-shadow:none;border:1px solid var(--gray-200)}
.sticky.rot{background:var(--stk-rot)}.sticky.gruen{background:var(--stk-gruen)}.sticky.blau{background:var(--stk-blau)}.sticky.gelb{background:var(--stk-gelb)}
.sticky .typ{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-family:'Poppins';margin-bottom:8px;padding:3px 9px;border-radius:var(--pill);background:rgba(255,255,255,.55)}.sticky .typ i{width:13px;height:13px}
.sticky.rot .typ{color:var(--danger-ink)}.sticky.gruen .typ{color:var(--success-ink)}.sticky.blau .typ{color:var(--blue-800)}.sticky.gelb .typ{color:var(--warning-ink)}
.sticky .body{font-size:14px;color:#2c3340;font-weight:600}.sticky .sf{display:flex;align-items:center;justify-content:space-between;margin-top:11px;font-size:11px;color:var(--gray-600)}.sticky .to{font-weight:600;color:var(--blue-700);background:rgba(255,255,255,.6);padding:2px 8px;border-radius:var(--pill)}
.empty{padding:30px 20px;text-align:center;color:var(--gray-500);font-size:14px}.empty i{width:26px;height:26px;color:var(--blue-300);display:block;margin:0 auto 8px}
/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(900px 500px at 50% -10%,#2a3650,transparent 60%),var(--grad-side)}
.login-card{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-pop);width:380px;max-width:100%;padding:34px 30px;animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
/* Das Cockpit-Logo ist hell — passend fuer die dunkle Seitenleiste, auf der
   weissen Anmeldekarte aber praktisch unsichtbar (1,2:1). Hier liegt es
   deshalb auf einer dunklen Scheibe. Dieselbe Datei, zwei Untergruende. */
.login-card .lg{display:flex;justify-content:center;margin-bottom:10px}
.login-card .lg img{height:34px;width:34px;object-fit:contain;background:var(--grad-side,#252b33);
  border-radius:50%;padding:7px;box-sizing:content-box}
.login-card h1{text-align:center;font-size:20px;margin:14px 0 2px}.login-card .sub{text-align:center;color:var(--gray-500);font-size:14px;margin-bottom:22px}
label.fl{display:block;font-size:12px;font-weight:600;color:var(--gray-700);margin:12px 0 6px;font-family:'Poppins'}
input,select,textarea{font-family:'Nunito';font-size:14px;padding:11px 13px;border:1px solid var(--gray-300);background:#fff;color:var(--ink);width:100%;border-radius:var(--r-sm)}
input:focus,select:focus,textarea:focus{border-color:var(--blue-400)}
.err{background:var(--danger-bg);color:var(--danger);font-size:14px;padding:9px 12px;border-radius:var(--r-sm);margin-bottom:8px}
@media(max-width:820px){.sidebar{width:62px;padding:6px}.logo .wortmarke,.logo .sichtname,.logo .sub,.nav a span,.nav .group,.side-foot .who,.side-foot .role{display:none}.nav a{justify-content:center;padding:13px}.logo{justify-content:center}.side-foot{justify-content:center}.dash-grid{grid-template-columns:1fr}.next3,.kpi-row{grid-template-columns:1fr 1fr}}
/* --- Eingeklappte Seitenleiste (14.08.2026) --------------------------------
   Zwei Ausloeser, EIN Erscheinungsbild: unter 820 px klappt sie automatisch
   ein (Regel darueber), ab 820 px per Schalter. Die Eigenschaften stehen hier
   ein zweites Mal, weil CSS eine Klasse und eine Media Query nicht in EINER
   Regel verodern kann — wer eine davon aendert, aendert beide.
   Der Inhaltsbereich waechst von selbst mit: .main traegt flex:1, und das
   Spotlight-Overlay der Fokus-Fuehrung liegt mit inset:0 IN .main, folgt also
   dessen Kasten ohne eine einzige Zeile Geometrie-Code. */
.side-zu .sidebar{width:62px;padding:6px}
.side-zu .logo .wortmarke,.side-zu .logo .sichtname,.side-zu .logo .sub,
.side-zu .nav a span,.side-zu .nav .group,
.side-zu .side-foot .who,.side-zu .side-foot .role,
.side-zu .side-toggle .st-t{display:none}
.side-zu .nav a{justify-content:center;padding:13px}
.side-zu .logo{justify-content:center;padding:10px 4px}
.side-zu .logo img{max-height:34px}
.side-zu .side-foot{justify-content:center}
.side-zu .side-toggle{justify-content:center;padding:8px 0}
/* Der Pfeil dreht sich, statt ein zweites Icon zu laden: ein Icon-Wechsel
   braeuchte einen lucide-Neuaufbau und flackert dabei. */
.side-zu .side-toggle i,.side-zu .side-toggle svg{transform:rotate(180deg)}
.side-toggle{display:flex;align-items:center;justify-content:flex-end;gap:7px;
  width:100%;background:transparent;border:0;color:var(--nav-text);
  font-family:'Poppins';font-size:12px;font-weight:600;
  padding:8px 12px 2px;border-radius:var(--r-sm)}
.side-toggle:hover{color:#fff}
.side-toggle i,.side-toggle svg{width:16px;height:16px;transition:transform .18s var(--ease)}
/* Unter 820 px klappt die Leiste ohnehin automatisch ein — dort waere der
   Schalter eine Bedienung ohne Wirkung. */
@media(max-width:820px){.side-toggle{display:none}}
@media(max-width:560px){.next3,.kpi-row{grid-template-columns:1fr}}
/* ---- Module (Kanban, Phasen, Sticky, Agenda, Admin) ---- */
.hint{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-sm);padding:11px 14px;font-size:14px;color:var(--gray-700);margin-bottom:18px;display:flex;gap:10px;align-items:flex-start}.hint i{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--blue-600)}
.tabs{display:inline-flex;gap:4px;background:var(--gray-100);padding:4px;border-radius:var(--pill);margin-bottom:18px}
.tab{padding:8px 18px;font-family:'Poppins';font-weight:600;font-size:14px;color:var(--gray-600);cursor:pointer;border-radius:var(--pill);transition:all .18s var(--ease)}.tab.active{color:var(--blue-800);background:#fff;border:1px solid var(--gray-200);box-shadow:none}
.timeline{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}.tl{flex:1;min-width:120px;padding:14px;border-radius:var(--r);text-align:center;font-size:12px;color:var(--gray-600);background:#fff;border:1px solid var(--gray-200);box-shadow:var(--sh-1)}.tl.done{background:var(--gray-100);color:var(--gray-500);box-shadow:none}.tl.active{background:var(--blue-50);color:var(--blue-800);border-color:var(--blue-300);box-shadow:none}.tl .n{font-family:'Poppins';font-weight:600;font-size:14px;color:inherit}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.proj{padding:18px}.proj:hover{box-shadow:var(--sh-3)}
.proj .typ{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-family:'Poppins';display:inline-block;padding:3px 9px;border-radius:var(--pill)}.proj .typ.phase{color:var(--z2-ink);background:var(--z2-f)}.proj .typ.projekt{color:var(--z3-ink);background:var(--z3-f)}
.proj h3{font-size:15px;margin:10px 0 4px}.proj .desc{font-size:14px;color:var(--gray-600);margin-bottom:14px}
.bar{height:8px;background:var(--gray-200);overflow:hidden;border-radius:var(--pill)}.bar i{display:block;height:100%;background:var(--grad-blue);border-radius:var(--pill)}
.ms{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--gray-100)}.ms:last-child{border-bottom:none}.ms .dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}.ms .dot.ok{background:var(--success)}.ms .dot.prog{background:var(--warning)}.ms .dot.open{background:var(--gray-300)}.ms .mt{flex:1;font-weight:600;color:var(--ink);font-size:14px}.ms .msub{font-size:12px;color:var(--gray-500)}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toggle{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--gray-700);border:1px solid var(--gray-300);padding:8px 14px;cursor:pointer;background:#fff;border-radius:var(--pill);box-shadow:var(--sh-1)}.toggle.on{background:var(--blue-50);color:var(--blue-800);border-color:var(--blue-300)}
.toolbar select,.toolbar input{border-radius:var(--pill);border:1px solid var(--gray-300);background:#fff;padding:8px 14px;width:auto;box-shadow:var(--sh-1)}
.board{display:flex;gap:10px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
/* Sieben Spalten: 212 px liessen das Board immer scrollen, die letzten zwei
   lagen dauerhaft ausserhalb. 150 px reichten fuer Titel und Fusszeile;
   seit 11.08.2026 20 % mehr (180 px), damit Etiketten und Titel weniger
   umbrechen. Schmale Fenster scrollen dafuer wieder waagerecht — das ist
   in Ordnung, .board traegt overflow-x:auto. */
.col{flex:1;min-width:180px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-lg);padding-bottom:6px}
.col-h{padding:12px 11px;display:flex;align-items:center;justify-content:space-between;font-family:'Poppins';font-weight:600;font-size:14px;color:var(--ink)}.col-h .dotc{display:inline-flex;align-items:center;gap:7px}.col-h .pip{width:8px;height:8px;border-radius:50%;background:#9aa3b2}.col.rework .pip{background:var(--warning)}.col.done .pip{background:var(--success)}.col.parked .pip{background:var(--info)}.col.prog .pip{background:var(--blue-500)}
.col-h .cnt{background:#fff;font-size:11px;padding:2px 9px;color:var(--gray-600);border-radius:var(--pill);box-shadow:var(--sh-1)}
/* Dichte statt Breite (14.08.2026): die Kartenbreite bleibt, wie sie am
   11.08. eingestellt wurde — reduziert wurde die HÖHE. 8 px Abstand statt 10,
   9/10 px Innenrand statt 12, Titel auf zwei Zeilen gedeckelt. Die Karte
   bleibt als Ganzes das Klickziel und ueberschreitet die 44-px-Mindestflaeche
   deutlich; nichts Klickbares wurde verkleinert. */
.col-body{padding:6px 8px;display:flex;flex-direction:column;gap:8px;min-height:60px}
.tcard{background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-sm);padding:9px 10px;cursor:grab;box-shadow:none;transition:box-shadow .18s var(--ease)}.tcard:hover{box-shadow:var(--sh-3);transform:none}.tcard.dragging{opacity:.4}.tcard.pk{background:var(--gray-50)}
/* Kategorie-Streifen: 4 px an der linken KANTE, keine Flaechenfaerbung. Die
   Farbe kommt als CSS-Variable von der Karte — die Palette ist frei, eine
   Klasse je Farbe waere eine zweite Liste, die auseinanderlaeuft. Der Streifen
   liegt im Innenrand, die Karte wird dadurch nicht breiter. */
.tcard.hat-kat,.card.act.hat-kat{border-left:4px solid var(--kat,var(--gray-300))}
.tcard.hat-kat{padding-left:9px}
/* Der 8-px-Punkt: die zweite und einzige andere Stelle, an der die Farbe
   erscheint. Nie Textfarbe — ein frei gewaehltes HEX koennte unlesbar sein. */
.kat-punkt{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;
  vertical-align:middle;margin-right:2px;box-shadow:0 0 0 1px rgba(28,33,48,.12)}
.katvorschlag{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.katprobe{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gray-600)}
/* Das Etikett trug frueher inline-flex. Ein Flex-Kasten schrumpft nie unter
   sein laengstes Wort — bei „ONBOARDING FÜR DIE VALIDIERUNGSPHASE ERSTELLEN"
   ragte die Farbflaeche darum ueber den Kartenrand. Jetzt inline-block mit
   Deckel auf 100 %: die Zeile bricht um, die Flaeche endet in der Kachel. */
.tcard .tag{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-family:'Poppins';color:var(--blue-700);margin-bottom:5px;display:inline-block;vertical-align:top;max-width:100%;background:var(--blue-50);padding:2px 7px;border-radius:10px;line-height:1.3}.tcard .tag.buf{color:var(--gray-600);background:var(--gray-100)}
/* Der Loslegen-Knopf oben rechts steht nur dauerhaft, wenn es schon Schritte
   gibt. Dann — und nur dann — kostet er das Etikett 22 px Breite. Beim blossen
   Ueberfahren deckt er kurz das Zeilenende zu; die Karten-Vorschau zeigt in
   genau diesem Moment ohnehin den vollen Text. */
.tcard:has(.lg-mini.hat) .tag{max-width:calc(100% - 22px)}
/* Der innere Kasten kappt nach drei Zeilen mit Auslassungspunkten — der
   volle Text steht in der Karten-Vorschau. anywhere bricht auch ein
   einzelnes Wort, das breiter als die Kachel ist. */
.tcard .tag .tg{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
/* Titel: hoechstens ZWEI Zeilen, dann Auslassungspunkte. Der volle Text steht
   in der Karten-Vorschau — dieselbe Regel wie beim Etikett darueber, und sie
   ist der Grund, warum die Vorschau ueberhaupt existiert. Ohne Deckel bestimmt
   die laengste Aufgabe der Sicht die Hoehe aller Karten daneben. */
.tcard .tit{font-weight:600;color:var(--ink);font-size:14px;line-height:1.32;margin-bottom:7px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
/* Metazeile: EINE Zeile. Avatar, Name-Initialen und Datum brechen nicht mehr
   um; ist der Platz zu schmal, wird das Datum nicht abgeschnitten, sondern die
   Zeile bleibt einzeilig, weil beide Teile ihre Groesse behalten. */
.tcard .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;min-height:0}
.tcard .foot .ava{width:22px;height:22px;font-size:10px;flex-shrink:0}
.tcard .due{font-size:11px;color:var(--gray-600);white-space:nowrap}
/* Die GANZE Spalte ist Drop-Zone, nicht nur der Kartenbereich. Die
   Hervorhebung sitzt deshalb an .col und ist deutlich: Rahmen in der
   Akzentfarbe plus Toenung. Der frueher hier stehende gestrichelte Outline an
   .col-body markierte nur den Korridor, den es gar nicht mehr gibt. */
.board .col.dragover{border-color:var(--blue-400);background:var(--blue-50);box-shadow:inset 0 0 0 1px var(--blue-300)}
.board .col.dragover .col-h{color:var(--blue-800)}
/* Einfuege-Indikator zwischen zwei Karten. 3 px, Akzentfarbe, volle Breite —
   er beantwortet „wo genau lande ich", nicht nur „in welcher Spalte". */
.kdrop{height:3px;border-radius:2px;background:var(--blue-500);margin:1px 0;flex-shrink:0}
.legend{display:flex;gap:14px;flex-wrap:wrap;padding:14px 18px;margin-bottom:16px;align-items:center}.legend .li{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--gray-700)}.legend .sw{width:16px;height:16px;border-radius:6px}
.sticky-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:16px}
.sticky.full{min-height:124px;display:flex;flex-direction:column;box-shadow:var(--sh-2)}.sticky.full:hover{box-shadow:var(--sh-3)}.sticky .body{flex:1}
.agenda-wrap{display:grid;grid-template-columns:290px 1fr;gap:18px}
.sug-h{padding:14px 16px;border-bottom:1px solid var(--gray-100);font-family:'Poppins';font-weight:600;font-size:14px;color:var(--ink)}
.sug{padding:12px 16px;border-bottom:1px solid var(--gray-100)}.sug .src{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-family:'Poppins';padding:2px 8px;border-radius:var(--pill);display:inline-block}.sug .src.system{color:var(--gray-600);background:var(--gray-100)}.sug .src.user{color:var(--blue-700);background:var(--blue-50)}.sug .st{font-size:14px;font-weight:600;color:var(--ink);margin:6px 0 9px}
.editor{padding:24px 28px;min-height:430px}.editor h2{font-size:20px;margin-bottom:2px}.saveline{font-size:12px;color:var(--gray-500);margin-top:4px;display:flex;align-items:center;gap:6px}.editor .doc{margin-top:18px;font-size:14px;line-height:1.7;outline:none;min-height:240px}.editor .doc h4{font-family:'Poppins';font-size:15px;margin:18px 0 6px}.editor .doc ul{margin:0 0 8px 20px}
table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;font-family:'Poppins';font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gray-600);padding:11px 14px;border-bottom:1px solid var(--gray-200)}td{padding:11px 14px;border-bottom:1px solid var(--gray-100);color:var(--gray-700)}td input,td select{width:auto}
.fieldrow{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}.fieldrow label{font-size:14px;font-weight:600;min-width:135px;color:var(--gray-700)}
.card-pad{padding:20px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.seg{display:flex;background:var(--gray-100);padding:4px;border-radius:var(--pill)}.seg button{flex:1;padding:8px;background:transparent;border:none;font-weight:600;font-size:14px;color:var(--gray-600);border-radius:var(--pill)}.seg button.on{background:var(--blue-50);color:var(--blue-800);border:1px solid var(--blue-300);box-shadow:none}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(20,26,38,.5);backdrop-filter:blur(3px);z-index:60;align-items:center;justify-content:center;padding:20px}.modal-bg.open{display:flex}
.modal{background:#fff;width:470px;max-width:100%;border-radius:var(--r-xl);box-shadow:var(--sh-pop);overflow:hidden;animation:pop .26s var(--ease)}.modal-h{padding:18px 22px;border-bottom:1px solid var(--gray-100);display:flex;justify-content:space-between;align-items:center}.modal-h h3{font-size:15px}.modal-b{padding:20px 22px}.modal-b .frow{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--gray-100);font-size:14px}.modal-b .frow span:first-child{color:var(--gray-600)}.modal-b .frow span:last-child{font-weight:600;color:var(--ink)}.modal-f{padding:16px 22px;border-top:1px solid var(--gray-100);display:flex;justify-content:flex-end;gap:8px;background:var(--gray-50)}.x{cursor:pointer;color:var(--gray-500);width:20px;height:20px}
#toasts{position:fixed;bottom:24px;right:24px;z-index:80;display:flex;flex-direction:column;gap:10px}.toast{background:var(--ink);color:#fff;padding:13px 17px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:var(--sh-pop);border-radius:var(--r);animation:slidein .26s var(--ease)}.toast i{width:17px;height:17px;color:#8ad0e0}.toast a{color:#8ad0e0;font-weight:600;margin-left:6px;cursor:pointer}
@keyframes slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
/* ---- Mein-Fokus: Kontext-Block (Phasen/Projekte mit Zeitbalken) ---- */
.ctx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;margin-bottom:8px}
.ctx{padding:16px 18px}
.ctx-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ctx .typ{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-family:'Poppins';padding:3px 9px;border-radius:var(--pill)}
.ctx .typ.phase{color:var(--blue-700);background:var(--blue-50)}
.ctx .typ.projekt{color:var(--warning-ink);background:var(--gold-100)}
.ctx-tasks{font-size:11px;color:var(--gray-600);font-weight:600}
.ctx-name{font-size:15px;margin:10px 0 0}
.tbar-wrap{position:relative;margin-top:28px}
.tbar{height:10px;background:var(--gray-200);border-radius:var(--pill);position:relative}
.tbar .fill{height:100%;background:var(--grad-blue);border-radius:var(--pill);transition:width .8s var(--ease)}
.tmark{position:absolute;top:-22px;transform:translateX(-50%);font-family:'Poppins';white-space:nowrap;z-index:1}
.tmark span{background:var(--ink);color:#fff;font-size:11px;font-weight:600;padding:2px 7px;border-radius:var(--pill);display:inline-block}
.tmark:after{content:"";display:block;width:0;height:0;margin:2px auto 0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink)}
.tbar-dates{display:flex;justify-content:space-between;font-size:11px;color:var(--gray-500);margin-top:7px}
/* ---- Übersicht: Zeitstrahl (Gantt) + Karten ---- */
.typ{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-family:'Poppins';padding:3px 9px;border-radius:var(--pill)}
.typ.phase{color:var(--blue-700);background:var(--blue-50)}
.typ.projekt{color:var(--warning-ink);background:var(--gold-100)}
.ov-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.ov-note{font-size:12px;color:var(--gray-500)}
.gantt-axis{display:flex;justify-content:space-between;font-size:11px;color:var(--gray-500);padding-left:200px;margin-bottom:10px}
.swimlane-h{display:flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:600;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-600);margin:20px 0 10px;padding:0;background:transparent;border:none;border-radius:0}
.swimlane-h::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--z2);flex-shrink:0}
.swimlane-h.sl-projekt{}
.swimlane-h.sl-projekt::before{background:var(--z3)}
.swimlane-h .sl-cnt{margin-left:6px;font-weight:600;font-size:12px;color:var(--gray-600)}
.statusbox{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.statusbox .st-row{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--gray-700);background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-sm);padding:9px 13px}
.statusbox .st-row i{width:15px;height:15px;flex-shrink:0;color:var(--gray-400)}
.statusbox .st-row b{color:var(--ink);font-weight:600}
.statusbox .st-row em{font-style:normal;color:var(--gray-500);font-size:12px}
.statusbox .st-row.late i{color:var(--danger)}.statusbox .st-row.late b{color:var(--danger-ink)}
.statusbox .st-row.next i{color:var(--blue-600)}
.statusbox .st-row.ok i{color:var(--success)}
.ux-sum{max-height:340px;overflow:auto;padding:14px 18px;margin:0;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5;color:var(--gray-700);white-space:pre-wrap;background:var(--gray-50);border-radius:0 0 var(--r-lg) var(--r-lg)}
#irisOut,#irisPrompt{font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5}
/* Native-Desktop-Tabs (Fokus-Steuerkanzel) */
.ftabs{display:inline-flex;align-items:center;gap:4px;background:var(--gray-100);padding:5px;border-radius:var(--pill);margin-bottom:18px;box-shadow:var(--sh-1);max-width:100%;flex-wrap:wrap}
.ftab{padding:8px 18px;border-radius:var(--pill);font-family:'Poppins';font-weight:600;font-size:14px;color:var(--gray-600);cursor:pointer;text-decoration:none;transition:all .15s var(--ease)}
.ftab:hover{color:var(--ink)}
.ftab.on{background:#fff;color:var(--blue-800);border:1px solid var(--gray-200);box-shadow:none}
.ftab-sel{display:inline-flex;border-radius:var(--pill)}
.ftab-sel.on{background:#fff;box-shadow:var(--sh-1)}
.ftab-sel select{border:none;background:transparent;font-family:'Poppins';font-weight:600;font-size:14px;color:var(--gray-600);padding:8px 14px;border-radius:var(--pill);cursor:pointer;max-width:220px}
.ftab-sel.on select{color:var(--ink)}
/* Folder-Stack-Tabs (Index-Card-Look) */
.tabbar{display:flex;align-items:flex-end;gap:4px;border-bottom:1px solid var(--gray-200);padding:0;margin:0 0 20px;overflow-x:auto}
.ftab2{position:relative;margin:0 0 -1px 0;padding:9px 16px;border-radius:var(--r-sm) var(--r-sm) 0 0;background:transparent;color:var(--gray-600);border:1px solid transparent;border-bottom:none;box-shadow:none;transform:none;transition:color .15s,background .15s;display:inline-flex;align-items:center;gap:8px;font-family:'Poppins';font-weight:400;font-size:14px;cursor:pointer;white-space:nowrap;text-decoration:none}
.ftab2:first-child{margin-left:0}
.toolbar .tabbar{padding:6px 2px 0;margin:0;perspective:1200px}
.toolbar .ftab2{margin-left:9px}
.toolbar .ftab2:first-child{margin-left:0}
.ftab2 .num{display:none}
.ftab2:hover{transform:none;background:var(--gray-100);color:var(--ink)}
.ftab2:focus-visible{outline:none;box-shadow:0 -3px 12px rgba(0,0,0,.05),var(--focus)}
.ftab2.active{background:#fff;border-color:var(--gray-200);border-top:2px solid var(--blue-700);border-bottom:1px solid #fff;color:var(--blue-800);font-weight:600;transform:none;box-shadow:none;z-index:2}
.ftab2.active .num{opacity:.85}
.ftab-select{-webkit-appearance:none;appearance:none;height:20px;line-height:20px;margin:0;padding:0 18px 0 0;border:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235e6675' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center;color:inherit;font-family:'Poppins';font-weight:600;font-size:14px;cursor:pointer;max-width:200px}
.ftab2.active .ftab-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.ftab-select option{color:var(--ink)}
.tab-panel{position:relative;background:transparent;border:none;border-radius:0;padding:0;box-shadow:none;animation:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
.ftabtog{position:relative;padding:9px 15px 12px;border-radius:12px 12px 0 0;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(0,0,0,.05);border-bottom:none;box-shadow:0 -2px 8px rgba(0,0,0,.05);transform-origin:bottom center;transform:translateY(5px) rotateX(7deg);transition:all .25s cubic-bezier(.34,1.3,.5,1);display:inline-flex;align-items:center;gap:7px;font-family:'Poppins';font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.ftabtog.on{background:var(--accent);color:#fff;transform:translateY(0) rotateX(0);box-shadow:0 -8px 20px -6px color-mix(in srgb,var(--accent) 55%,transparent)}
@media(prefers-reduced-motion:reduce){.ftab2,.ftab2.active,.ftab2:hover,.ftabtog,.ftabtog.on{transform:none;transition:opacity .2s}.tab-panel{animation:none}}
@media(max-width:640px){.ftab2{padding:10px 16px 15px;font-size:14px}}
/* Fokus: vertikale Bereichs-Labels (Tab-Stil, nicht klickbar, von unten nach oben) */
/* Region-Zone (Gestalt: Common Region) — getönter Hintergrund + Hairline-Rahmen je Klammer-Farbe.
   Außen (margin) > innen (padding) für saubere Block-Trennung. */
/* Die Lane-FLAECHE traegt die Farbe. Vorher war sie neutral und die Farbe sass
   nur im Balken — das war zu unauffaellig, um die Zonen auseinanderzuhalten.
   Karten und Zeilen INNERHALB bleiben weiss, damit sie sich abheben. */
.freg{display:block;background:var(--zf,#fff);border:1px solid var(--zr,var(--gray-200));
  border-radius:var(--r-lg);padding:0;margin-bottom:16px}
.freg:last-child{margin-bottom:8px}
.freg-c{min-width:0;padding:14px 18px 18px}
.freg-top{display:flex;justify-content:flex-start;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}


@media(max-width:640px){.zhead{padding:12px 12px 0}.freg-c{padding:12px}.ztitle{font-size:16px}}
.grow{display:flex;align-items:center;margin-bottom:10px}
.glabel{width:200px;flex-shrink:0;padding-right:14px}
.glabel .nm{font-family:'Poppins';font-weight:600;font-size:14px;color:var(--ink);margin-top:4px;line-height:1.25}
.glabel .meta{font-size:11px;color:var(--gray-600);margin-top:2px}
.gtrack{position:relative;flex:1;height:34px;background:var(--gray-100);border-radius:var(--r-sm)}
.gbar{position:absolute;top:8px;height:18px;background:var(--blue-200);border-radius:var(--pill)}
.gfill{height:100%;background:var(--grad-blue);border-radius:var(--pill)}
.gbar.cont-l{border-top-left-radius:2px;border-bottom-left-radius:2px}
.gbar.cont-r{border-top-right-radius:2px;border-bottom-right-radius:2px}
.gbar.cont-l::before{content:"‹";position:absolute;left:1px;top:50%;transform:translateY(-50%);color:#fff;font:600 12px/1 'Poppins';text-shadow:0 0 2px rgba(0,0,0,.45);pointer-events:none}
.gbar.cont-r::after{content:"›";position:absolute;right:1px;top:50%;transform:translateY(-50%);color:#fff;font:600 12px/1 'Poppins';text-shadow:0 0 2px rgba(0,0,0,.45);pointer-events:none}
.gmile{position:absolute;top:3px;width:11px;height:11px;background:#fff;border:2px solid var(--gray-300);transform:translateX(-50%) rotate(45deg);z-index:3}
.gmile.ok{border-color:var(--success);background:var(--success)}
.gmile.prog{border-color:var(--warning);background:var(--warning)}
.gmile.open{border-color:var(--gray-300);background:#fff}
.gtoday{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--gray-400);z-index:2}
.cmiles{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.cmile{font-size:12px;color:var(--gray-700);display:flex;align-items:center;gap:8px}
.cdot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--gray-300)}
.cdot.ok{background:var(--success)}.cdot.prog{background:var(--warning)}.cdot.open{background:var(--gray-300)}
@media(max-width:700px){.gantt-axis{padding-left:0}.glabel{width:120px}}
.clickable{cursor:pointer}
.grow.clickable .gtrack{transition:background .15s var(--ease)}
.grow.clickable:hover .gtrack{background:var(--blue-50)}
.grow.clickable:hover .glabel .nm{color:var(--blue-700)}
.card.ctx.clickable{transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.card.ctx.clickable:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.cont-block{scroll-margin-top:84px;border-radius:var(--r-lg)}
.flash{animation:flashbg 1.5s var(--ease)}
@keyframes flashbg{0%{background:var(--blue-50)}100%{background:transparent}}
/* ---- Cockpit Garage ---- */
.gpool{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;min-height:96px;padding:14px;border:1.5px dashed var(--gray-300);border-radius:var(--r-lg);background:var(--gray-50);margin-bottom:22px}
.gpool.dragover{border-color:var(--blue-400);background:var(--blue-50)}
.gcard{border-radius:var(--r-sm);padding:11px 12px;cursor:grab;box-shadow:none;border:1px solid var(--gray-200);border-left:3px solid;transition:box-shadow .18s var(--ease)}
.gcard:hover{box-shadow:var(--sh-3);transform:none}
.gcard.dragging{opacity:.4}
.gcard.rot{background:var(--stk-rot);border-left-color:var(--stk-rot-b)}
.gcard.blau{background:var(--stk-blau);border-left-color:var(--stk-blau-b)}
.gcard.gelb{background:var(--stk-gelb);border-left-color:var(--stk-gelb-b)}
.gcard.gruen{background:var(--stk-gruen);border-left-color:var(--stk-gruen-b)}
.gcard .gt{font-weight:600;color:var(--ink);font-size:14px;line-height:1.3}
.gcard .gm{display:flex;align-items:center;justify-content:space-between;margin-top:9px;font-size:11px;color:var(--gray-600)}
.ge-sec{font-family:'Poppins';font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-700);margin:18px 0 4px;padding-top:10px;border-top:1px solid var(--gray-200)}
.ge-stage{display:inline-block;font-family:'Poppins';font-size:11px;font-weight:600;color:var(--warning-ink);background:var(--gold-100);padding:3px 10px;border-radius:var(--pill);margin-bottom:6px}
.qhelp{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--gray-200);color:var(--gray-600);font-size:11px;font-weight:600;cursor:pointer;font-family:'Poppins';vertical-align:middle}
.qhelp:hover{background:var(--blue-700);color:#fff}
.ai-note{background:var(--warning-bg);border:1px solid var(--gold-300);border-radius:var(--r-sm);padding:11px 13px;font-size:14px;color:var(--gray-700);line-height:1.55;margin-top:4px}
.ki-pill{font-size:11px;font-weight:600;font-family:'Poppins';padding:2px 6px;border-radius:var(--pill);letter-spacing:.03em;white-space:nowrap}
.ki-pill.ok{background:var(--success-bg);color:var(--success-ink)}
.ki-pill.open{background:#fff;border:1px solid var(--gray-300);color:var(--gray-600)}
.ki-status{font-size:12px;font-weight:600;font-family:'Poppins';padding:7px 11px;border-radius:var(--r-sm);margin:2px 0 6px}
.ki-status.ok{background:var(--success-bg);color:var(--success-ink)}
.ki-status.open{background:var(--warning-bg);color:var(--warning-ink)}
/* Verschieben-Alternative (Tastatur/Touch) + Fokus-Sichtbarkeit */
.movebar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:16px}
.movebar .ml{width:100%;font-size:12px;font-weight:600;color:var(--gray-700);font-family:'Poppins';margin-bottom:3px}
.tcard,.gcard{scroll-margin-top:84px}
.tcard:focus-visible,.gcard:focus-visible{box-shadow:var(--focus);transform:translateY(-1px)}
.qhelp{width:18px;height:18px}
#top-load{position:fixed;top:0;left:0;height:2px;width:0;opacity:0;background:var(--blue-700);z-index:100;transition:width .3s var(--ease),opacity .22s ease}

/* --- Cold Start (Struktur einpflegen) --- */
.cs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1100px){.cs-grid{grid-template-columns:1fr}}
.cs-input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1.7;tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;resize:vertical}
.cs-counts{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--gray-700)}
.cs-counts b{font-family:'Poppins';font-weight:600;font-size:15px;color:var(--ink);margin-right:4px;font-variant-numeric:tabular-nums}
.cs-counts i{font-style:normal;color:var(--gray-600)}
.cs-warn{margin-top:16px;background:var(--warning-bg);border:1px solid var(--gold-300);border-radius:var(--r-sm);padding:11px 14px;font-size:14px;color:var(--warning-ink)}
.cs-warn-h{display:flex;align-items:center;gap:7px;margin-bottom:6px}.cs-warn-h i{width:15px;height:15px;flex-shrink:0}
.cs-warn ul{margin:0;padding-left:18px}.cs-warn li{margin:3px 0;line-height:1.5}
.cs-src{font-style:italic}
.cs-ln{font-family:'Poppins';font-weight:600;font-size:11px;margin-right:5px}
.cs-tree{margin-top:16px;font-size:14px}
.cs-c{padding:10px 0;border-top:1px solid var(--gray-100)}.cs-c:first-child{border-top:none;padding-top:0}
.cs-m{margin:6px 0 6px 14px;padding-left:12px;border-left:2px solid var(--blue-100)}
.cs-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:3px 0}
.cs-task{margin-left:14px;color:var(--gray-700)}
.cs-task::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gray-300);flex-shrink:0}
.cs-t{font-weight:600;color:var(--ink)}.cs-task .cs-t{font-weight:400;color:var(--gray-700)}
.cs-meta{font-size:12px;color:var(--gray-600)}
.cs-done{border-color:var(--success-bg)}

/* --- Rückmeldungen nach einer Aktion (Profil, Admin) --- */
.msg{display:flex;gap:10px;align-items:flex-start;padding:12px 15px;border-radius:var(--r);font-size:14px;margin-bottom:18px;border:1px solid}
.msg i{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.msg-ok{background:var(--success-bg);border-color:var(--success);color:var(--success-ink)}
.msg-err{background:var(--danger-bg);border-color:var(--danger);color:var(--danger-ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none;box-shadow:none}
.toast.err i{color:#ff9b96}

/* --- Sicht-Umschalter (Topbar) und Sicht-Etiketten --- */
.viewsw{display:flex;align-items:center;gap:8px;flex-shrink:0}
.viewsw label{display:flex;align-items:center;gap:6px;font-family:'Poppins';font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-600)}
.viewsw label i{width:14px;height:14px}
.viewsw select{width:auto;min-width:150px;padding:8px 12px;font-family:'Poppins';font-weight:600;font-size:14px;color:var(--ink);background:var(--blue-50);border-color:var(--blue-200);border-radius:var(--pill);cursor:pointer}
.viewsw select:focus{border-color:var(--blue-400)}
@media(max-width:720px){.viewsw label span,.viewsw .vsw-label span{display:none}}
/* Genau eine Sicht: gleiche Optik wie der Umschalter, aber ohne Pfeil und ohne
   Bedienbarkeit — es gibt nichts zu wechseln. */
.viewsw-fix{cursor:default}
.vsw-label{display:flex;align-items:center;gap:6px;font-family:'Poppins';font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--gray-600)}
.vsw-label i{width:14px;height:14px}
.vsw-name{padding:8px 14px;font-family:'Poppins';font-weight:600;font-size:14px;color:var(--ink);background:var(--blue-50);border:1px solid var(--blue-200);border-radius:var(--pill)}
.vtag{display:inline-flex;align-items:center;font-family:'Poppins';font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 8px;border-radius:var(--pill);background:var(--blue-50);color:var(--blue-800)}

/* ================= Design-System v2 — neue Bausteine ================= */

/* Zonenkopf: 8-px-Farbpunkt + Versal-Label. Ersetzt die rotierten 90°-Labels. */
/* Swimlane-Kopfzeile, rechtsbuendig: row-reverse legt das erste Kind (den
   Balken) an den rechten Rand, dann Titel, dann Zaehler — visuell von rechts
   gelesen also Balken, Titel, Chip. */
.zhead{display:flex;flex-direction:row-reverse;align-items:center;gap:10px;padding:14px 18px 0}
.zbar{width:5px;height:22px;border-radius:3px;background:var(--zc,var(--gray-400));flex:none}
.ztitle{font-size:17px;font-weight:600;color:var(--ink);line-height:1.3}
.ztitle .sub{font-weight:400;color:var(--gray-600);font-size:14px}
/* Zaehler-Chip gefuellt: weisse Zahl auf der nachgedunkelten Zonenfarbe. */
.zcount{font-family:'Poppins';font-size:12px;font-weight:700;color:#fff;
  background:var(--zc-fuell,var(--gray-600));border-radius:var(--pill);padding:3px 10px;flex:none}
.blk-kopf{font-family:'Poppins';font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gray-600);margin-bottom:8px}

/* Der einzige nicht-gefüllte Handlungsaufruf: Textlink mit Pfeil.
   Ersetzt die gefüllten „Öffnen"-Knöpfe — app-weit bleibt EIN gefüllter Stil. */
.linkarrow{font-size:14px;font-weight:600;color:var(--blue-800);text-decoration:none;display:inline-flex;align-items:center;gap:4px;background:none;border:none;padding:0}
.linkarrow::after{content:"→"}
.linkarrow:hover{text-decoration:underline}

/* KPI: Zahl neutral im 600er-Gewicht; nur die Überfällig-Zahl trägt Statusrot. */
.kpi .n{font-family:'Poppins';font-weight:600;font-size:20px;color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums}
.kpi .l{font-size:12px;color:var(--gray-500);margin-top:2px;font-weight:400;line-height:1.25}
.kpi .chip{background:transparent;width:auto;height:auto}
.kpi .chip i{color:var(--gray-400);width:16px;height:16px}
.kpi-go{color:var(--gray-300)}
a.kpi-link:hover .kpi-go{color:var(--blue-700);transform:none}

/* Status-Pill trägt Zustand UND Datum — der einzige Statusträger je Karte. */
.pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;font-family:'Poppins';border-radius:var(--pill);padding:3px 10px;width:max-content}
.pill.due{color:var(--danger);background:var(--danger-bg)}
.pill.today{color:var(--warning);background:var(--warning-bg)}
.pill.plain{color:var(--gray-600);background:var(--gray-100)}

/* Einmalige, gestaffelte Entrance der Fokus-Zonen. Bewusst KEINE Dauerbewegung
   und keine Auto-Rotation: rotierende Inhalte werden nachweislich übersehen und
   entziehen dem Nutzer die Kontrolle über das Tempo (NN/g). Nach dem Aufbau Ruhe. */
@keyframes zone-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#pjax.enter .freg{animation:zone-enter .4s ease both;animation-delay:calc(var(--zi,0) * 80ms)}
@media(prefers-reduced-motion:reduce){#pjax.enter .freg{animation:none}}

/* --- Werkzeuge gegen die Optimismus-Falle --- */
/* Meilenstein-Zeile bekommt eine zweite Ebene für Log und Aktionen. */
.ms-row{display:block;padding:12px 18px}
.ms-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ms-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;padding-left:23px}
.ms-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
/* Bewusst neutral: Committed ist kein Status im Sinne von faellig/verzoegert,
   deshalb weder Rot noch Gruen — die bleiben exklusiv. */
.commit-badge{display:inline-flex;align-items:center;gap:6px;font-family:'Poppins';font-size:11px;font-weight:600;color:var(--gray-600);background:var(--gray-100);border-radius:var(--pill);padding:3px 10px}
.commit-badge i{width:13px;height:13px;color:var(--gray-600)}
.shiftlog>summary{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--gray-600);cursor:pointer}
.shiftlog>summary:hover{color:var(--ink)}
.shiftlog .disc-chevron{width:13px;height:13px}
.shiftlog-b{margin-top:8px;padding-left:18px;border-left:2px solid var(--gray-200);display:flex;flex-direction:column;gap:10px}
.shift-d{font-size:12px;color:var(--gray-700)}
.shift-r{font-size:14px;color:var(--ink);margin-top:2px}
.shift-m{font-size:11px;color:var(--gray-500);margin-top:2px}

/* Entscheidungslog */
.declist{display:flex;flex-direction:column;gap:0}
.dec{padding:14px 0;border-top:1px solid var(--gray-100)}
.dec:first-child{border-top:none;padding-top:0}
.dec-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.dec-date{font-family:'Poppins';font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-500)}
.dec-what{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.dec-why{font-size:14px;color:var(--gray-700);margin-top:4px}
.dec-m{font-size:11px;color:var(--gray-500);margin-top:6px}

/* --- D1 Blitz-Inbox --- */
.capture-btn{display:inline-flex;align-items:center;gap:6px;background:var(--blue-700);color:#fff;border:none;padding:8px 14px;border-radius:var(--r-sm);font-family:'Poppins';font-weight:600;font-size:14px;cursor:pointer;flex-shrink:0;margin-left:auto}
.capture-btn:hover{background:var(--blue-800)}
.capture-btn i{width:15px;height:15px}
@media(max-width:720px){.capture-btn span{display:none}}
.modal.capture textarea{font-size:15px;line-height:1.5}
.capture-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.ibx{padding:14px 18px;border-top:1px solid var(--gray-100)}
.ibx:first-child{border-top:none}
.ibx-t{font-size:15px;color:var(--ink);line-height:1.45;display:flex;gap:8px;align-items:flex-start}
.ibx-src{width:14px;height:14px;color:var(--gray-500);flex-shrink:0;margin-top:4px}
.ibx-m{font-size:11px;color:var(--gray-500);margin-top:5px;display:flex;align-items:center;gap:8px}
.ibx-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ibx-a .ibx-drop{color:var(--gray-600)}

/* --- D2 Ideen-Pool --- */
.col-h .pip-neu{background:var(--gray-400)}
.col-h .pip-geparkt{background:var(--warning)}
.col-h .pip-bewertet{background:var(--blue-700)}
.col-h .pip-eingeplant{background:var(--success)}
.col-h .pip-verworfen{background:var(--gray-300)}
.icard{cursor:pointer}
.irate{font-size:12px;color:var(--gray-600);margin-top:6px}
.irate b{color:var(--ink);font-weight:600}
.ireason{font-size:12px;color:var(--gray-600);margin-top:6px;font-style:italic}

/* --- D3 Kadenz: fällige Turnus-Prüfungen --- */
.checkrow{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.checkitem{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-sm);padding:9px 13px;font-size:14px;color:var(--gray-700)}
.checkitem i{width:15px;height:15px;flex-shrink:0;color:var(--blue-700)}
.checkitem .ck-t b{color:var(--ink);font-weight:600}
.checkitem .ck-m{font-size:12px;color:var(--gray-500)}
.wt-dates,.wt-kadenz{display:inline-flex;gap:8px;align-items:center}

/* --- D4 Brief: maximale Ruhe, keine KPI-Reihe, nichts Klickbares ausser dem Rueckkanal --- */
.brief{max-width:640px}
.brief-block{background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px}
.brief-liste{margin:10px 0 0;padding-left:20px}
.brief-liste li{margin:0 0 12px;line-height:1.4}
.brief-liste li:last-child{margin-bottom:0}
.brief-t{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.brief-m{display:block;font-size:12px;color:var(--gray-500);margin-top:2px}
.brief-ms{font-size:15px;font-weight:600;color:var(--ink);margin-top:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brief-datum{font-size:12px;font-weight:400;color:var(--gray-500)}
.brief-leer{font-size:14px;color:var(--gray-500);margin-top:8px}
.brief-block textarea{margin-top:10px}

/* Kurations-Schalter (nur Admin) */
.briefsw{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--gray-300);color:var(--gray-600);border-radius:var(--pill);padding:4px 11px;font-family:'Poppins';font-size:11px;font-weight:600;cursor:pointer}
.briefsw i{width:12px;height:12px}
.briefsw:hover{border-color:var(--blue-300);color:var(--blue-800)}
/* Aktiv heisst gefuellt: der Zustand muss ohne Vergleich mit dem Nachbarn
   erkennbar sein. Vorher unterschied nur ein blasser Hintergrund. */
.briefsw.on{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.briefsw.on:hover{background:var(--blue-800);border-color:var(--blue-800);color:#fff}

/* Gemeldete Blockaden auf der Fokus-Seite */
.blockers{margin-bottom:14px}
.blk{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-sm);padding:11px 14px;margin-bottom:8px;flex-wrap:wrap}
.blk-t{font-size:14px;color:var(--ink);flex:1;min-width:200px}
.blk-m{font-size:11px;color:var(--gray-500)}
.blk-a{margin-left:auto}

/* --- Platzhalter fuer bewusst noch nicht Gebautes ---
   Sichtbar, damit die Stelle spaeter auffindbar ist — aber eindeutig als
   nicht funktionsfaehig markiert, damit es nichts verspricht. */
.stub{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--gray-300);color:var(--gray-500);background:transparent;border-radius:var(--pill);padding:4px 11px;font-family:'Poppins';font-size:11px;font-weight:600;cursor:not-allowed}
.stub i{width:12px;height:12px}
.stub-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.stub-note{font-size:11px;color:var(--gray-500)}

/* --- Fokus-Fuehrung: Spotlight --------------------------------------------
   Vorher wurde mit opacity:.75 gedimmt. Das war praktisch unsichtbar: ein
   Viertel Deckkraft gegen Weiss ist ein Helligkeitsunterschied, den man neben
   dem Inhalt nicht bemerkt. Jetzt liegt ein dunkles Overlay ueber dem Inhalt,
   und die aktive Zone liegt darueber.

   Umgesetzt ist das nicht mit einem einzigen Overlay plus z-index-Sprung,
   sondern zweiteilig: eine Flaeche fuer die Zwischenraeume und je Zone ein
   eigener Schleier. Grund ist der Uebergang — ein z-index-Wechsel ist
   zwangslaeufig hart, zwei Schleier koennen gegeneinander blenden. Die
   Vorgabe verlangt weiche Uebergaenge von 0.3 s. */
.main{position:relative}
#fgOverlay{
  position:absolute;inset:0;z-index:10;
  background:rgba(17,23,38,.55);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.fg-run #fgOverlay{opacity:1}
/* Alle Zonen ueber die Flaeche heben; verdunkelt wird ueber den eigenen
   Schleier, damit der Wechsel blendet statt zu springen. */
.fg-run #pjax .freg{position:relative;z-index:11}
.fg-run #pjax .freg::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(17,23,38,.55);
  pointer-events:none;transition:opacity .3s ease;
  /* ueber den positionierten Kindern der Zone: .gmile liegt auf 3. */
  z-index:5;
}
.fg-run #pjax .freg.fg-hell::after{opacity:0}
/* Die Topbar ist zu 82 % weiss mit Backdrop-Blur — ueber dem dunklen Overlay
   wuerde sie truebe. Waehrend der Fuehrung deshalb deckend. */
.fg-run .topbar{background:#fff;backdrop-filter:none}
/* WCAG 2.2.2: bei Bewegungsreduktion ist das Feature komplett aus. Der Controller
   startet dann gar nicht erst — diese Regeln sind der zweite Riegel. */
@media(prefers-reduced-motion:reduce){
  #fgOverlay,.fg-run #pjax .freg::after{display:none}
}
.fg-ctl{display:flex;justify-content:flex-end;margin-top:18px}
/* Hinweis und Abschalter gehoeren zur laufenden Fuehrung und erscheinen nur
   mit ihr. Sie liegen ueber dem Overlay und bleiben voll deckend. */
.fg-live{display:none;align-items:center;gap:12px;position:relative;z-index:11}
.fg-run .fg-live{display:flex}
/* Ueber dem Overlay zu liegen genuegt nicht: der Abschalter hatte keinen
   eigenen Hintergrund, also schien das Dunkel durch und der graue Text war
   nicht mehr lesbar. Waehrend der Fuehrung bekommt er deshalb dieselbe
   deckende Pille wie der Hinweis. */
.fg-run .fg-btn{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--pill);
  padding:5px 13px;color:var(--gray-700);
}
.fg-run .fg-btn:hover{color:var(--ink);border-color:var(--gray-300)}
.fg-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--gray-500);font-family:'Poppins';font-size:11px;font-weight:600;cursor:pointer;padding:4px 2px}
.fg-btn:hover{color:var(--gray-700)}
.fg-btn i{width:12px;height:12px}
.fg-off{font-size:11px;color:var(--gray-500)}

/* --- Gruppen --- */
.grp{padding:14px 0;border-top:1px solid var(--gray-100)}
.grp:first-child{border-top:none;padding-top:0}
.grpsw{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--gray-300);color:var(--gray-600);border-radius:var(--pill);padding:4px 11px;font-family:'Poppins';font-size:11px;font-weight:600;cursor:pointer}
.grpsw:hover{border-color:var(--blue-300);color:var(--blue-800)}
.grpsw.on{background:var(--blue-50);border-color:var(--blue-300);color:var(--blue-800)}
.grpchk{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--gray-700);white-space:nowrap}
.grpchk input{width:auto;padding:0;margin:0}
.grpsw.inaktiv{opacity:.6;font-style:italic}

/* ================= Schema „Alles" =================
   Die Aggregat-Ansicht traegt ein festes, fuer alle identisches Erscheinungsbild:
   entsaettigtes Petrol-Grau. Es signalisiert Ueberblick statt Arbeitsbereich und
   ist nirgends einstellbar — es gibt keine Schema-Auswahl, in der es auftauchen
   koennte. Neutrals, Status, Radien und Typografie bleiben unveraendert. */
[data-scheme="alles"]{
  --blue-50:#f0f3f4;--blue-100:#dde4e7;--blue-200:#c4d0d5;--blue-300:#a3b6bd;--blue-400:#7e979f;
  --blue-500:#63808a;--blue-600:#4e6b76;--blue-700:#4e6b76;--blue-800:#3b525b;
  --grad-blue:#4e6b76;--grad-side:#252b33;
  --nav-text:#c3cbd4;
  --info:#4e6b76;--info-bg:#f0f3f4;
  --focus:0 0 0 3px rgba(78,107,118,.38);
}
/* ================= Farbschemata der Sichten =================
   Muster und Token-Umfang identisch zum Block „alles". 'petrol' ist der
   :root-Standard und hat keinen Block — es entsteht, indem data-scheme fehlt.
   Wer hier ergaenzt, muss auch lib/schemes.php ergaenzen: das Array rendert die
   Auswahl, dieser Block faerbt die Anwendung.
   Neutrals, Status, Radien und Typografie bleiben unveraendert. */
[data-scheme="tanne"]{
  --blue-50:#eff6f1;--blue-100:#ddebe1;--blue-200:#bcd7c2;--blue-300:#8fbc9a;--blue-400:#5e9f6d;
  --blue-500:#358748;--blue-600:#1f7a34;--blue-700:#1f7a34;--blue-800:#185f29;
  --grad-blue:#1f7a34;--grad-side:#17322f;
  --info:#1f7a34;--info-bg:#eff6f1;
  --focus:0 0 0 3px rgba(31,122,52,.35);
}
[data-scheme="smaragd"]{
  --blue-50:#eef6f4;--blue-100:#daebe7;--blue-200:#b4d7cf;--blue-300:#82bcae;--blue-400:#4c9f8b;
  --blue-500:#0a7e5f;--blue-600:#067054;--blue-700:#067054;--blue-800:#055743;
  --grad-blue:#067054;--grad-side:#113239;
  --info:#067054;--info-bg:#eef6f4;
  --focus:0 0 0 3px rgba(6,112,84,.35);
}
[data-scheme="moos"]{
  --blue-50:#f3f5ef;--blue-100:#e6eadd;--blue-200:#ccd5bb;--blue-300:#aab98e;--blue-400:#859a5c;
  --blue-500:#668134;--blue-600:#55731d;--blue-700:#55731d;--blue-800:#425a17;
  --grad-blue:#55731d;--grad-side:#243029;
  --info:#55731d;--info-bg:#f3f5ef;
  --focus:0 0 0 3px rgba(85,115,29,.35);
}
[data-scheme="stahl"]{
  --blue-50:#edf4f8;--blue-100:#d9e8f1;--blue-200:#b3d2e3;--blue-300:#81b4d0;--blue-400:#4a93bb;
  --blue-500:#0a4a7e;--blue-600:#053966;--blue-700:#053966;--blue-800:#042c50;
  --grad-blue:#053966;--grad-side:#0c2438;
  --info:#053966;--info-bg:#edf4f8;
  --focus:0 0 0 3px rgba(5,57,102,.35);
}
[data-scheme="koenig"]{
  --blue-50:#f0f3fb;--blue-100:#dee5f7;--blue-200:#bdcbef;--blue-300:#92a8e4;--blue-400:#6182d8;
  --blue-500:#3a62ce;--blue-600:#2451c9;--blue-700:#2451c9;--blue-800:#1c3f9d;
  --grad-blue:#2451c9;--grad-side:#182854;
  --info:#2451c9;--info-bg:#f0f3fb;
  --focus:0 0 0 3px rgba(36,81,201,.35);
}
[data-scheme="marine"]{
  --blue-50:#f0f2f7;--blue-100:#dee2ee;--blue-200:#bdc6dd;--blue-300:#91a0c6;--blue-400:#6175ae;
  --blue-500:#395399;--blue-600:#23408e;--blue-700:#23408e;--blue-800:#1b326f;
  --grad-blue:#23408e;--grad-side:#182446;
  --info:#23408e;--info-bg:#f0f2f7;
  --focus:0 0 0 3px rgba(35,64,142,.35);
}
[data-scheme="schiefer"]{
  --blue-50:#f3f4f5;--blue-100:#e5e7ea;--blue-200:#cbced5;--blue-300:#a8aeb9;--blue-400:#828a9a;
  --blue-500:#636c81;--blue-600:#525c73;--blue-700:#525c73;--blue-800:#40485a;
  --grad-blue:#525c73;--grad-side:#232b3e;
  --info:#525c73;--info-bg:#f3f4f5;
  --focus:0 0 0 3px rgba(82,92,115,.35);
}

/* --- Sicht-Kennzeichen: Icon oder Initialen-Kreis --- */
/* Seit Logos ihr Seitenverhaeltnis behalten, ist das Kennzeichen nicht mehr
   zwingend quadratisch. Hoehe fest, Breite frei bis zu einer Grenze. */
.vsw-icon{height:20px;width:auto;max-width:64px;border-radius:5px;object-fit:contain;flex-shrink:0;background:#fff}
.vsw-ini{width:20px;height:20px;border-radius:5px;flex-shrink:0;display:inline-flex;align-items:center;
  justify-content:center;font-family:'Poppins';font-size:9px;font-weight:600;color:#fff;letter-spacing:.02em}

/* --- Schema-Auswahl im Profil --- */
.schemarow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.schemachip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--gray-300);
  border-radius:var(--pill);padding:5px 12px 5px 6px;font-family:'Poppins';font-size:12px;font-weight:600;
  color:var(--gray-700);cursor:pointer}
.schemachip:hover{border-color:var(--gray-400)}
.schemachip .pkt{width:16px;height:16px;border-radius:50%;flex-shrink:0}
.schemachip.aktiv{border-color:var(--ink);color:var(--ink);box-shadow:0 0 0 2px rgba(28,33,48,.14)}
.schemachip[disabled]{opacity:.55;cursor:not-allowed}

/* --- Icon-Bereich im Profil --- */
.iconzeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.iconvorschau{height:44px;width:auto;max-width:150px;border-radius:9px;object-fit:contain;border:1px solid var(--gray-200);background:#fff}
.iconvorschau-ini{width:44px;height:44px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Poppins';font-size:16px;font-weight:600;color:#fff}

/* Logo nur im Aggregat sichtbar. Der Umschalter liegt ausserhalb von #pjax und
   wird beim Wechsel nicht neu gerendert — ueber CSS am data-scheme haengend
   erscheint und verschwindet es trotzdem korrekt, ohne eine Zeile JavaScript. */
.alles-logo{display:none;height:24px;width:auto;flex-shrink:0}
[data-scheme="alles"] .alles-logo{display:inline-block}

/* Hinweis waehrend die Fuehrung laeuft. Liegt ausserhalb der Zonen, wird also
   nie mitgedimmt. Neutral gefaerbt — Status-Farben bleiben exklusiv. */
.fg-hint{display:inline-flex;align-items:center;gap:7px;font-family:'Poppins';font-size:12px;font-weight:600;color:var(--gray-700);background:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--pill);padding:5px 13px;opacity:1}
.fg-hint i{width:14px;height:14px;color:var(--gray-600)}
.fg-ctl{gap:12px;align-items:center}

/* --- Sicht-Zuordnungen: Personen und Gruppen getrennt --- */
.sichtblock{padding:16px 0;border-top:1px solid var(--gray-100)}
.sichtblock:first-of-type{border-top:none;padding-top:4px}
.zuordnung{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.zuordnung{grid-template-columns:1fr;gap:14px}}
.zg-spalte{min-width:0}
.zg-chip{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--gray-300);color:var(--gray-700);border-radius:var(--pill);padding:4px 11px;font-family:'Poppins';font-size:11px;font-weight:600;cursor:pointer}
.zg-chip:hover:not([disabled]){border-color:var(--blue-300);color:var(--blue-800)}
.zg-chip[disabled]{opacity:.55;cursor:not-allowed}

/* --- Startsicht-Wahl (Profil). Radios, kein Umschalter: die Wahl ist exklusiv,
       und Abwaehlen gibt es nicht — genau das drueckt eine Radio-Gruppe aus.
       Bewusst OHNE Auto-Absenden: Pfeiltasten wandern durch Radios und loesen
       dabei jedes Mal ein change aus; ein Formular, das schon beim Durchwandern
       abschickt, ist mit der Tastatur nicht bedienbar. --- */
.startsicht{padding:14px 0 16px;border-top:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);margin-bottom:4px}
.startopt{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gray-700);white-space:nowrap}
.startopt input{width:auto;padding:0;margin:0}
.startopt .ov-note{font-size:12px}

/* Loeschzeile im Admin-Register „Sichten": abgesetzt und als einzige Aktion
   rot, weil sie als einzige Daten vernichtet. Rot ist hier Status, kein
   Akzent — dieselbe Regel wie bei .feld-fehler. */
.loeschzeile{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--gray-200)}
.btn.danger{color:var(--danger-ink);border-color:var(--danger)}
.btn.danger:hover:not([disabled]){background:var(--danger-bg)}

/* Schliessbarer Einmal-Hinweis. Erbt .hint; das × sitzt rechts und ist ein
   echter Submit — der Zustand liegt am Nutzer in der Datenbank, nicht im
   Browser, sonst kaeme der Hinweis am naechsten Geraet wieder. */
.hint-schliessbar{align-items:center}
.hint-x{margin-left:auto;flex-shrink:0;background:none;border:none;padding:4px;cursor:pointer;color:var(--gray-600);display:inline-flex;border-radius:var(--r-sm)}
.hint-x:hover{background:var(--gray-200);color:var(--ink)}
.hint-x i{width:16px;height:16px;margin-top:0;color:inherit}

/* Feldbezogener Fehler: die Meldung steht am Formular, nicht nur oben, und die
   Eingabe bleibt stehen. Rot ist hier Status, kein Akzent — zulaessig. */
.feld-fehler{border-color:var(--danger) !important;background:var(--danger-bg)}
.feld-fehler:focus{border-color:var(--danger) !important;box-shadow:0 0 0 3px rgba(154,42,34,.18)}
.feld-hinweis{flex-basis:100%;display:flex;align-items:flex-start;gap:7px;margin-top:2px;font-size:12px;line-height:1.5;color:var(--danger-ink)}
.feld-hinweis i{width:14px;height:14px;flex-shrink:0;margin-top:2px}

/* Startknopf der Fokus-Führung. Erscheint erst, wenn der Controller genug Zonen
   gefunden hat, und verschwindet, solange die Führung läuft — dann stehen die
   beiden Lauf-Bedienelemente da. */
.fg-startbtn{display:none;margin-left:auto;align-self:center;margin-bottom:6px;white-space:nowrap}
.fg-moeglich .fg-startbtn{display:inline-flex}
.fg-run .fg-startbtn{display:none}
/* Bewegungsreduktion plus manueller Start: sichtbar, aber ohne Blenden. */
.fg-hart #fgOverlay,.fg-hart #pjax .freg::after{transition:none}
@media(prefers-reduced-motion:reduce){
  .fg-hart #fgOverlay,.fg-hart.fg-run #pjax .freg::after{display:block}
}

/* ================= „Warten auf" =================
   Die Zonenfarbe steht oben bei den uebrigen Zonen-Tokens (--z5). Hier stehen
   nur die Bausteine, die es an mehreren Stellen gibt: Liste auf Fokus-Seite und
   im Brief, Spalte und Kartenzeile im Kanban. */

/* Liste auf Fokus-Seite und im Brief */
.waitlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.waitlist li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:9px 12px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-sm)}
.waitlist li+li{margin-top:6px}
.wl-t{font-weight:600;font-size:14px;color:var(--ink);flex:1;min-width:160px}
.wl-w{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gray-700)}
.wl-w i,.wl-w svg{width:13px;height:13px;color:var(--z5,#4a5468)}
.wl-d{font-family:'Poppins';font-size:11px;font-weight:600;color:var(--gray-600);white-space:nowrap}
.wl-d.alt{color:var(--z5-i,#414a5c)}

/* Kanban: Spalte und Wartezeile auf der Karte */
.col.wait .pip{background:var(--z5,#4a5468)}
/* Zwei Zeilen statt einer: der Grund ist Fliesstext und darf umbrechen, der
   Alterszaehler gehoert darunter. Nebeneinander quetschte sich der Grund in
   eine schmale Spalte. */
.waitline{margin-top:9px;padding-top:8px;border-top:1px solid var(--gray-100);font-size:12px;line-height:1.45;color:var(--gray-700)}
.waitline i,.waitline svg{width:13px;height:13px;color:var(--z5,#4a5468);display:inline-block;vertical-align:-2px;margin-right:5px}
.waitline .w-d{display:block;margin-top:4px;font-family:'Poppins';font-size:11px;font-weight:600;color:var(--gray-600)}

/* Kontrollkästchen im Anlege-Modal */
.chk{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--gray-700);cursor:pointer}
.chk input{width:auto;padding:0;margin:0}

.branding{margin-top:14px;padding-top:12px;border-top:1px dashed var(--gray-200)}

/* --- Dropzone für Sicht-Logos --- */
.iconform{margin:0}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:260px;padding:14px 18px;background:#fff;border:1px dashed var(--gray-300);
  border-radius:var(--r-sm);cursor:pointer;text-align:center;font-family:'Poppins';
  font-size:13px;font-weight:600;color:var(--gray-700);transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--blue-400);color:var(--blue-800)}
.dropzone:focus-visible{outline:none;box-shadow:var(--focus)}
.dropzone i,.dropzone svg{width:18px;height:18px;color:var(--blue-700)}
.dz-klein{font-size:11px;font-weight:400;color:var(--gray-600)}
/* Sichtbare Hervorhebung, solange etwas darüber schwebt. */
.dropzone.ueber{border-style:solid;border-color:var(--blue-600);background:var(--blue-50);color:var(--blue-800)}
.dropzone.ueber i,.dropzone.ueber svg{color:var(--blue-800)}

/* ================= Phasen-/Projektseite =================
   Bewusst ohne die Lane-Farben der Fokus-Seite: dort trennen Farben mehrere
   Zonen, hier gibt es nur einen Gegenstand. Die Seite traegt das Schema der
   aktiven Sicht. */
.ph-kopf{display:flex;align-items:flex-start;gap:16px;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.ph-kopf h2{font-size:22px;margin:6px 0 4px}
.ph-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--gray-600)}
.ph-verzug{display:inline-flex;align-items:center;gap:5px;color:var(--danger-ink);font-weight:600}
.ph-verzug i,.ph-verzug svg{width:14px;height:14px}
.ph-block{margin-bottom:16px}
.ph-sub{font-weight:400;font-size:13px;color:var(--gray-600)}
.ph-cnt{background:var(--gray-100);border-radius:var(--pill);padding:1px 9px;font-size:11px;font-weight:600;color:var(--gray-700);margin-left:6px}

.ph-zeile{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--gray-100)}
.ph-zeile:first-of-type{border-top:none}
.ph-zeile-b{border-top:1px solid var(--gray-100)}
.ph-dot{width:8px;height:8px;border-radius:50%;flex:none;align-self:center;background:var(--gray-400)}
.ph-dot.ok{background:var(--success)}
.ph-dot.spaet{background:var(--danger)}
.ph-dot.offen{background:var(--gray-400)}
.ph-t{font-weight:600;font-size:14px;color:var(--ink);flex:1;min-width:180px}
.ph-m{font-size:12px;color:var(--gray-600)}
.ph-d{font-family:'Poppins';font-size:12px;font-weight:600;color:var(--gray-700);white-space:nowrap}
.ph-d.spaet{color:var(--danger-ink)}
.ph-akt{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* Verknüpfte Einträge */
.lk-gruppe{margin-bottom:14px}
.lk-kopf{font-family:'Poppins';font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-600);margin-bottom:6px}
.lk-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-sm)}
.lk-zeile+.lk-zeile{margin-top:6px}
.lk-zeile>i,.lk-zeile>svg{width:15px;height:15px;color:var(--gray-500);flex:none}
.lk-t{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:14px;color:var(--blue-800);text-decoration:none;flex:1;min-width:160px}
.lk-t:hover{text-decoration:underline}
.lk-t i,.lk-t svg{width:12px;height:12px;opacity:.7}
.lk-m{font-size:12px;color:var(--gray-600);white-space:nowrap}
.lk-akt{display:flex;gap:6px}
.lk-trenner{margin:16px 0 10px;padding-top:14px;border-top:1px solid var(--gray-200);font-size:12px;color:var(--gray-600)}

/* Notizen */
.nt-zeile{padding:10px 0;border-top:1px solid var(--gray-100)}
.nt-t{font-size:14px;color:var(--ink);line-height:1.5}
.nt-m{font-size:12px;color:var(--gray-600);margin-top:4px}

/* Verlinkte Phasen-/Projektnamen. Sie sind Navigation, tragen also die
   Akzentfarbe — nicht die Lane-Farbe. */
.ph-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.ph-link:hover{color:var(--blue-800);border-bottom-color:var(--blue-300)}
a.tag{text-decoration:none;cursor:pointer}
a.tag:hover{background:var(--blue-100);color:var(--blue-800)}

/* Der Umschalter-Block ist der Tauschpunkt für alles Sichtabhängige in der
   Topbar. Er selbst ist unsichtbar — nur ein Behälter. */
.vchrome{display:contents}

/* ================= Loslegen: Zerlegung und Ein-Schritt-Ansicht ================= */
.lg-modal{max-width:560px}
.lg-liste{list-style:none;margin:0;padding:0;counter-reset:lg}
.lg-liste li{display:flex;align-items:center;gap:8px;margin-bottom:7px;counter-increment:lg}
.lg-liste li::before{content:counter(lg);flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--blue-50);color:var(--blue-800);font-family:'Poppins';font-size:11px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.lg-liste input{flex:1;min-width:0}
.lg-weg{flex:none;background:none;border:none;cursor:pointer;color:var(--gray-500);padding:4px;
  display:inline-flex;border-radius:var(--r-sm)}
.lg-weg:hover{color:var(--danger-ink);background:var(--danger-bg)}
.lg-weg i,.lg-weg svg{width:14px;height:14px}
.lg-laedt{display:flex;align-items:center;gap:8px;padding:14px 0;font-size:14px;color:var(--gray-600)}
.lg-laedt i,.lg-laedt svg{width:16px;height:16px;animation:lg-dreh 1.1s linear infinite}
@keyframes lg-dreh{to{transform:rotate(360deg)}}

/* Ein Schritt, groß. Alles andere klein darunter — die Hierarchie IST die Botschaft. */
.lg-fokus{max-width:540px}
.lg-jetzt{font-size:22px;line-height:1.35;font-weight:600;color:var(--ink);padding:6px 0 14px}
.lg-timer,.lg-timer-an{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-600);margin-bottom:14px}
.lg-timer i,.lg-timer svg,.lg-timer-an i,.lg-timer-an svg{width:14px;height:14px}
.lg-timer span{font-family:'Poppins';font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.lg-rest{border-top:1px solid var(--gray-100);padding-top:10px;display:flex;flex-direction:column;gap:5px}
.lg-r{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--gray-600);line-height:1.45}
.lg-r i,.lg-r svg{width:13px;height:13px;flex:none;margin-top:3px;color:var(--gray-400)}
.lg-r.ist-jetzt{color:var(--ink);font-weight:600}
.lg-r.ist-jetzt i,.lg-r.ist-jetzt svg{color:var(--blue-700)}
.lg-r.st-erledigt{color:var(--gray-500);text-decoration:line-through}
.lg-r.st-erledigt i,.lg-r.st-erledigt svg{color:var(--success)}
.lg-r.st-uebersprungen i,.lg-r.st-uebersprungen svg{color:var(--warning-ink)}
.lg-r.st-mache_ich_nicht{color:var(--gray-500)}
.lg-fertig{padding:14px 0 4px;font-size:15px;color:var(--ink)}
.lg-taste{font-family:'Poppins';font-size:10px;opacity:.75;border:1px solid rgba(255,255,255,.5);
  border-radius:4px;padding:0 4px;margin-left:5px}
/* Bewegungsreduktion: kein Drehen, kein Übergang. */
@media(prefers-reduced-motion:reduce){
  .lg-laedt i,.lg-laedt svg{animation:none}
  .modal,.modal-bg{transition:none !important;animation:none !important}
}

/* Kleiner Loslegen-Knopf auf der Kanban-Karte */
.lg-mini{position:absolute;top:8px;right:8px;background:#fff;border:1px solid var(--gray-300);
  color:var(--blue-800);border-radius:var(--r-sm);width:24px;height:24px;display:none;
  align-items:center;justify-content:center;cursor:pointer;padding:0}
.lg-mini i,.lg-mini svg{width:13px;height:13px}
.tcard{position:relative}
.tcard:hover .lg-mini,.tcard:focus-within .lg-mini{display:inline-flex}
.lg-mini:hover{border-color:var(--blue-400);background:var(--blue-50)}
.lg-mini.hat{display:inline-flex;background:var(--blue-50);border-color:var(--blue-300)}

/* Tages-Bestätigung in der Zone „Nächste Handlungen" */
.tagzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tagbtn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--gray-300);
  color:var(--gray-700);border-radius:var(--pill);padding:5px 13px;font-family:'Poppins';
  font-size:12px;font-weight:600;cursor:pointer}
.tagbtn:hover{border-color:var(--blue-300);color:var(--blue-800)}
.tagbtn i,.tagbtn svg{width:14px;height:14px}
.tagmarke{display:inline-flex;align-items:center;gap:6px;background:var(--success-bg);
  color:var(--success-ink);border-radius:var(--pill);padding:5px 13px;font-family:'Poppins';
  font-size:12px;font-weight:600}
.tagmarke i,.tagmarke svg{width:14px;height:14px}

/* ================= Arbeitsbetriebssystem: Heute und Woche =================
   Die Zeitachse ist eine Liste, kein Kalenderraster mit Pixel-pro-Minute: der
   Tag hat drei bis sechs Einträge, eine massstaebliche Achse waere zu 80 %
   leerer Platz. Die Dauer steht als Zahl da, wo sie gebraucht wird.

   Pausen tragen Farbe und Namen, sind aber flaechig ruhig — sie sollen als
   Fläche lesbar sein, ohne mit den Bloecken um Aufmerksamkeit zu konkurrieren. */
.tagesachse{display:flex;flex-direction:column;gap:8px}
.tz-zeile{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:stretch}
@media(max-width:640px){.tz-zeile{grid-template-columns:60px 1fr;gap:8px}}
.tz-zeit{font-family:'Poppins';font-size:13px;font-weight:600;color:var(--gray-700);padding-top:12px;text-align:right;line-height:1.35}
.tz-zeit span{display:block;font-weight:400;font-size:12px;color:var(--gray-500)}

.tz-block{background:#fff;border:1px solid var(--gray-200);border-left:3px solid var(--blue-600);
  border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh-1);min-width:0}
.tz-block.erledigt{opacity:.62;border-left-color:var(--gray-300)}
.tz-kopf{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tz-dom{font-family:'Poppins';font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--blue-800);background:var(--blue-50);border-radius:var(--pill);padding:3px 9px}
.tz-dauer{font-size:12px;color:var(--gray-500)}
.tz-modus{font-family:'Poppins';font-size:11px;font-weight:600;border-radius:var(--pill);padding:3px 9px;
  border:1px solid var(--gray-300);color:var(--gray-700)}
/* Vier Modi, vier Rollen — Tief traegt am meisten Gewicht, Geparkt am wenigsten.
   Alle Paare gegen ihre eigene Flaeche gerechnet, nicht gegen Weiss. */
.tz-modus.m-tief{background:#e8eef7;border-color:#b9c9e2;color:#22406b}
.tz-modus.m-betrieb{background:#e9f2ec;border-color:#bcd7c6;color:#22563a}
.tz-modus.m-pflege{background:#f5eede;border-color:#e0cfa8;color:#6a4c14}
.tz-modus.m-geparkt{background:var(--gray-100);border-color:var(--gray-300);color:var(--gray-600)}

/* Blockziel: die eine Zeile, die sagt, wofuer dieser Block da ist. */
.tz-ziel{display:flex;gap:8px;align-items:flex-start;margin-top:9px;font-size:14px;line-height:1.5;color:var(--ink)}
.tz-ziel i{width:15px;height:15px;flex-shrink:0;margin-top:3px;color:var(--blue-600)}
.tz-todos{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.tz-todos li{font-size:13px;color:var(--gray-700);display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.tz-tid{font-family:'Poppins';font-size:11px;font-weight:600;color:var(--gray-600);background:var(--gray-100);
  border-radius:var(--r-sm);padding:1px 6px;flex-shrink:0}
.tz-wieder{display:flex;gap:8px;margin-top:11px}
.tz-wieder input{flex:1;min-width:0}

.tz-termin{background:#fff;border:1px solid var(--gray-200);border-left:3px solid var(--gray-400);
  border-radius:var(--r);padding:12px 14px;box-shadow:none;min-width:0}
.tz-termin .tz-kopf i{width:15px;height:15px;color:var(--gray-600);flex-shrink:0}
.tz-termin b{font-size:14px;font-weight:600}

/* Pausen: getoente Flaeche, gestrichelter Rand — sichtbar leer, nicht uebersehen.
   Kein Schatten, keine Bedienelemente. */
.tz-pause{display:flex;gap:9px;align-items:center;border-radius:var(--r);padding:11px 14px;
  border:1px dashed var(--gray-300);background:var(--gray-50);color:var(--gray-600);font-size:13px;min-width:0}
.tz-pause i{width:15px;height:15px;flex-shrink:0}
.tz-pause .tz-dauer{margin-left:auto}
.tz-pause.tz-mittag{background:#f4efe4;border-color:#ddcdaa;color:#63491a}
.tz-pause.tz-aktiv{background:#eaf1ea;border-color:#c3d8c8;color:#2c5438}
.tz-pause.tz-puffer{background:#eeeef4;border-color:#c9c9dd;color:#3f3f66}
.tz-ohne{padding:8px 0;border-bottom:1px solid var(--gray-100);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.tz-ohne:last-child{border-bottom:none}

/* Wochenraster: 15 Zellen, feste Spalten. Scrollt horizontal statt zu quetschen —
   drei Slots hoch ist die Aussage, nicht die Breite. */
.wochenraster{display:grid;grid-template-columns:66px repeat(5,minmax(160px,1fr));gap:8px;overflow-x:auto;padding-bottom:6px}
.wr-ecke{}
.wr-kopf{font-family:'Poppins';font-weight:600;font-size:13px;color:var(--gray-700);padding:6px 2px;text-align:center}
.wr-slot{font-size:11px;color:var(--gray-500);display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding-right:6px;text-align:right}
.wr-slot b{font-family:'Poppins';font-size:13px;color:var(--gray-700)}
.wr-zelle{min-height:104px;border-radius:var(--r);border:1px solid var(--gray-200);background:#fff;padding:9px}
.wr-zelle.leer{border-style:dashed;background:var(--gray-50);display:flex;align-items:center;justify-content:center}
.wr-frei{font-size:12px;color:var(--gray-400)}
.wr-block{display:flex;flex-direction:column;gap:5px;min-width:0}
.wr-block.erledigt{opacity:.6}
.wr-zeile{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.wr-zeit{font-family:'Poppins';font-size:12px;font-weight:600;color:var(--gray-700)}
.wr-ziel{font-size:12px;line-height:1.45;color:var(--gray-700);overflow-wrap:anywhere}
.wr-todo{font-family:'Poppins';font-size:11px;color:var(--gray-500)}
.wr-move select{width:100%;font-size:12px;padding:4px 6px;margin-top:2px}
/* Zu knapper Abendpuffer: dieselbe Fläche wie der Puffer, aber mit Rand-Signal.
   Rot waere zu laut — es ist kein Fehler, sondern eine bewusste Verkuerzung. */
.tz-pause.tz-puffer-knapp{background:#eeeef4;border-color:#a9a9c8;border-style:solid;color:#3f3f66}
/* „ueber Raster": ein Platz, den das 15-Bloecke-Modell nicht vorsieht. Sichtbar
   gekennzeichnet statt stillschweigend mitgezaehlt — die Kapazitaetsgrenze ist
   die Aussage der Seite. */
.wr-extra{color:#6a4c14}
.wr-abweichung{font-size:11px;color:var(--gray-500)}

/* ================= Ziele — die vierte Farbrolle „Zweck" =================
   Akzent = Interaktion, Lane = Orientierung, Status = Zustand, Zweck = wofuer.
   Die Zweck-Farbe erscheint AUSSCHLIESSLICH als 8-px-Punkt im Chip. Keine
   Flaechen, keine Karten-Einfaerbung — sonst konkurriert sie mit den drei
   Rollen, die es schon gibt, und der Bildschirm wird zum Farbkasten.
   Traeger der Identitaet ist das Kuerzel, die Farbe verstaerkt es nur. */
.zchip{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;margin-left:6px;
  background:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--pill);
  padding:1px 8px 1px 6px;text-decoration:none;line-height:1.6}
a.zchip:hover{border-color:var(--gray-300);background:var(--gray-200)}
.zchip-punkt{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.zchip-kurz{font-family:'Poppins';font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--gray-700)}

.zielliste{display:flex;flex-direction:column;gap:14px}
.zielkarte{background:#fff;border:1px solid var(--gray-200);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh-1)}
.zk-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zk-kopf h2{font-size:16px;margin:0}
.zk-kopf .zchip{margin-left:0}
.zk-count{margin-left:auto;font-family:'Poppins';font-size:12px;font-weight:600;color:var(--gray-600);white-space:nowrap}
.zk-count span{font-weight:400;color:var(--gray-500)}
/* Nah und ueberfaellig sind Status, nicht Zweck — deshalb die Statusfarben. */
.zk-count.nah{color:var(--warning)}
.zk-count.ueber{color:var(--danger-ink)}

.zk-damit{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:9px 12px;
  background:var(--gray-50);border-left:2px solid var(--gray-300);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:14px;line-height:1.55;color:var(--gray-700)}
.zk-damit i{width:14px;height:14px;flex-shrink:0;margin-top:3px;color:var(--gray-500)}

.zk-zahlen{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px}
.zk-zahl{font-size:12px;color:var(--gray-600)}
.zk-zahl b{font-family:'Poppins';font-size:15px;color:var(--ink);margin-right:3px}

.zk-traeger,.zk-historie{margin-top:11px}
.zk-traeger>summary,.zk-historie>summary{cursor:pointer;font-size:13px;color:var(--gray-600);
  display:flex;align-items:center;gap:5px;list-style:none}
.zk-traeger>summary::-webkit-details-marker,.zk-historie>summary::-webkit-details-marker{display:none}
.zk-tr-inhalt{padding:8px 0 2px;display:flex;flex-direction:column;gap:6px}
.zk-tr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--gray-700);
  padding-bottom:6px;border-bottom:1px solid var(--gray-100)}
.zk-tr:last-child{border-bottom:none}

.zk-aktionen{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--gray-100)}
.zk-ausgabe{margin-top:11px}
.zk-analyse{white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.6;color:var(--gray-700);
  background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r-sm);padding:12px 14px;margin:0}
.zk-vorschlaege{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.zk-vorschlaege .ov-note{flex-basis:100%}

.zk-checkin{margin-top:12px;padding-top:12px;border-top:1px solid var(--gray-100)}
.zk-zuv{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.zk-ci{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-size:13px;
  padding-bottom:6px;border-bottom:1px solid var(--gray-100)}
.zk-ci:last-child{border-bottom:none}
.zk-ci-notiz{color:var(--gray-700);flex-basis:100%}
/* Zuversicht 1..5: eine Skala, kein Ampelsystem. Sie faerbt sich von gedaempft
   nach kraeftig, ohne „schlecht/gut" zu behaupten — die Zahl ist eine
   Selbsteinschaetzung, keine Bewertung. Alle fuenf >= 4,5:1 auf ihrer Flaeche. */
.zk-ci-zahl{font-family:'Poppins';font-weight:600;font-size:12px;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.zv-1{background:#ece9e6;color:#5c4e40}
.zv-2{background:#e7e6ea;color:#4f4b58}
.zv-3{background:#e2e7ec;color:#3d5163}
.zv-4{background:#dde8e4;color:#28564a}
.zv-5{background:#d7e9dc;color:#1f5433}

.zielfreitext{border:1px dashed var(--gray-300);border-radius:var(--r);padding:12px 14px;background:var(--gray-50)}
.zielfreitext textarea{width:100%;resize:vertical}
.zfarben{display:flex;gap:14px;flex-wrap:wrap}
.zfarbe{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--gray-700);white-space:nowrap}
.zfarbe input{width:auto;padding:0;margin:0}
.zfarbe-punkt{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.zielwahl{width:auto;min-width:150px}
.msg-warn{background:var(--warning-bg);border-color:#e0cfa8;color:#6a4c14}
.msg-warn i{color:var(--warning)}
/* Geerbter Ziel-Chip: Punkt als Ring statt gefuellt. Der Unterschied sitzt am
   Punkt, nicht an der Flaeche — eine zweite gefaerbte Flaeche waere genau die
   Karten-Einfaerbung, die die Zweck-Rolle nicht haben soll. */
.zchip-punkt.geerbt{box-sizing:border-box}
.zchip-geerbt{border-style:dashed}

/* ---------------------------------------------------------------------------
   Wiki — Seiten, Erklaer-Dialog, Glossar (09.08.2026)
   Kontrast: jedes neue Text/Hintergrund-Paar gegen die TATSAECHLICHE Flaeche
   gerechnet, nicht gegen Weiss. Schlechtester Fall 4,67:1 (--gray-500 auf
   --gray-50 in der Frageblase). --gray-500 auf --gray-100 waere 4,38:1 — genau
   deshalb ist die Frageblase --gray-50 und nicht --gray-100.
   --------------------------------------------------------------------------- */
.wiki-suche{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--r-lg);padding:8px 12px;margin-bottom:16px}
.wiki-suche i{width:18px;height:18px;color:var(--blue-600);flex-shrink:0}
.wiki-suche input{flex:1;min-width:120px;border:none;padding:6px 2px;font-size:15px;background:transparent}
.wiki-suche input:focus-visible{outline:none;box-shadow:none}
.wiki-suche:focus-within{border-color:var(--blue-400);box-shadow:var(--focus)}

.wiki-treffer{padding:10px 0;border-bottom:1px solid var(--gray-100)}
.wiki-treffer:last-child{border-bottom:none}
.wt-titel{font-family:'Poppins';font-weight:600;font-size:15px}
.wt-snip{font-size:13px;color:var(--gray-700);margin:3px 0 2px}
/* Fundstelle: Akzent-Toenung statt Signalgelb. Gelb ist Status und bleibt es. */
.wt-snip mark,.wiki-inhalt mark{background:var(--blue-100);color:var(--ink);padding:0 2px;border-radius:3px}

.wiki-zeile{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--gray-100);font-size:14px}
.wiki-zeile:last-child{border-bottom:none}
.wiki-zeile i{width:15px;height:15px;color:var(--gray-400);flex-shrink:0}
.wiki-zeile a{font-weight:600}

.wiki-editor-feld{width:100%;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.65}
.wiki-vorschau{margin-top:14px;border-top:1px dashed var(--gray-300);padding-top:14px}

/* Gerenderter Seiteninhalt. Bewusst enge Zeilenlaenge: ein Wiki wird gelesen,
   nicht ueberflogen. */
.wiki-inhalt{max-width:74ch;font-size:15px;line-height:1.75;color:var(--gray-700)}
.wiki-inhalt h2{font-size:18px;margin:22px 0 8px}
.wiki-inhalt h3{font-size:16px;margin:18px 0 6px}
.wiki-inhalt h4,.wiki-inhalt h5,.wiki-inhalt h6{font-size:15px;margin:16px 0 6px}
.wiki-inhalt p{margin:0 0 12px}
.wiki-inhalt ul,.wiki-inhalt ol{margin:0 0 12px 22px}
.wiki-inhalt li{margin:2px 0}
.wiki-inhalt hr{border:none;border-top:1px solid var(--gray-200);margin:20px 0}
.wiki-inhalt blockquote{border-left:3px solid var(--gray-300);padding:2px 0 2px 14px;margin:0 0 12px;color:var(--gray-600)}
.wiki-inhalt code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--gray-100);color:var(--gray-700);padding:1px 5px;border-radius:4px}
.wiki-code{background:var(--gray-100);color:var(--gray-700);border-radius:var(--r);padding:12px 14px;
  margin:0 0 12px;overflow-x:auto;font-size:13px;line-height:1.6}
.wiki-code code{background:none;padding:0}
.wiki-link{font-weight:600;border-bottom:1px solid var(--blue-200)}
/* Roter Link = die Seite fehlt. Klassisches Wiki-Verhalten, ausdruecklich so
   beauftragt; die gestrichelte Unterkante sagt es zusaetzlich, damit die
   Information nicht allein an der Farbe haengt (WCAG 1.4.1). */
.wiki-link.wiki-rot{color:var(--danger-ink);border-bottom:1px dashed var(--danger)}
.wiki-link.wiki-rot::after{content:" ?";font-weight:600}

/* Erklaer-Dialog */
.wiki-chat{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;padding-right:4px}
.wc-frage{align-self:flex-end;max-width:80%;background:var(--gray-50);border:1px solid var(--gray-200);
  color:var(--ink);border-radius:var(--r-lg);padding:9px 13px;font-size:14px;white-space:pre-wrap}
.wc-antwort{align-self:flex-start;max-width:92%;background:var(--blue-50);border:1px solid var(--blue-100);
  color:var(--ink);border-radius:var(--r-lg);padding:11px 14px;font-size:14px;line-height:1.7;white-space:pre-wrap}
.wc-warte{align-self:flex-start;font-size:13px;color:var(--gray-500);font-style:italic}
.wc-fehler{align-self:flex-start;max-width:92%;background:var(--danger-bg);border:1px solid var(--danger);
  color:var(--danger-ink);border-radius:var(--r);padding:9px 13px;font-size:13px}
.wc-quellen{align-self:flex-start;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-4px 0 4px}
.wc-quelle{display:inline-flex;align-items:center;font-size:12px;font-weight:600;font-family:'Poppins';
  background:#fff;border:1px solid var(--blue-200);color:var(--blue-800);border-radius:var(--pill);padding:3px 11px}
.wc-quelle:hover{background:var(--blue-50)}
.wiki-frage{margin-top:14px;border-top:1px solid var(--gray-100);padding-top:12px}
.wiki-frage textarea{width:100%;resize:vertical}

/* Glossar */
.gl-eintrag{padding:11px 0;border-bottom:1px solid var(--gray-100)}
.gl-eintrag:last-child{border-bottom:none}
.gl-kopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:'Poppins';font-size:15px;color:var(--ink)}
.gl-def{font-size:14px;color:var(--gray-700);margin-top:2px}
.gl-syn{font-size:13px;color:var(--gray-600);margin-top:3px}
.wiki-label{font-family:'Poppins';text-transform:uppercase;letter-spacing:.07em;font-size:11px;font-weight:600;color:var(--gray-500)}
.gl-syn .wiki-label{margin-right:6px}
/* Widerspruch: die EINE Statusfarbe im Glossar. Sie bezeichnet hier wirklich
   einen Zustand — das Wiki widerspricht sich —, keine Kategorie. */
.gl-eintrag.gl-wid{background:var(--warning-bg);border:1px solid #e0cfa8;border-radius:var(--r);
  padding:11px 14px;margin:6px 0}
.gl-widerspruch{margin-top:6px;font-size:13px;color:#6a4c14;border-left:3px solid var(--warning);padding-left:10px}
.gl-hinweis{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--gray-700);
  padding:7px 0;border-bottom:1px solid var(--gray-100)}
.gl-hinweis:last-child{border-bottom:none}
.gl-hinweis i{width:14px;height:14px;color:var(--gray-400);flex-shrink:0}

/* ---------------------------------------------------------------------------
   Hover-Hilfe: Erklaer-Tooltip und Karten-Vorschau (09.08.2026)
   Beide auf dunkler Flaeche (--ink #1c2130). Weiss darauf: 15,4:1; der
   Sekundaerton #c3cbd4 darauf: 9,6:1 — beide deutlich ueber 4,5:1, auch bei
   12 px.
   --------------------------------------------------------------------------- */
.hilfe-tip,.peek{
  position:fixed;z-index:9000;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s var(--ease);
  background:var(--ink);color:#fff;border-radius:var(--r);box-shadow:var(--sh-pop);
}
.hilfe-tip.offen,.peek.offen{opacity:1;visibility:visible;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.hilfe-tip,.peek{transition:none}}

.hilfe-tip{max-width:300px;padding:9px 12px;font-size:13px;line-height:1.5}
/* Bruecke ueber den 8-px-Spalt zum Bezugselement: ohne sie verliert der Zeiger
   auf dem Weg zum Tooltip beide Flaechen und der Kasten schloesse sich —
   WCAG 1.4.13 verlangt aber, dass er erreichbar bleibt. */
.hilfe-tip::before{content:"";position:absolute;left:0;right:0;height:10px;top:-10px}
.hilfe-tip.oben::before{top:auto;bottom:-10px}
/* Seitliche Lage (Navigation): der Spalt liegt links, nicht oben — die Bruecke
   muss also senkrecht stehen, sonst verliert der Zeiger auf dem Weg zum
   Tooltip beide Flaechen. */
.hilfe-tip.seitlich::before{left:-14px;right:auto;top:0;bottom:0;height:auto;width:14px}

.peek{width:320px;max-width:calc(100vw - 24px);padding:12px 14px;font-size:13px;line-height:1.55}
.peek-t{font-family:'Poppins';font-weight:600;font-size:14px;color:#fff;margin-bottom:6px}
.peek-b{color:#c3cbd4;margin:0 0 8px;font-size:12.5px}
.peek-z{display:flex;gap:8px;align-items:baseline;padding:2px 0}
.peek-l{flex:0 0 96px;color:#c3cbd4;font-size:11px;font-family:'Poppins';font-weight:600;
  text-transform:uppercase;letter-spacing:.05em}
.peek-v{color:#fff;flex:1;min-width:0;overflow-wrap:anywhere}
.peek-ziel{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#fff;
  background:rgba(255,255,255,.10);border-radius:var(--pill);padding:3px 10px;margin-bottom:8px}
.peek-punkt{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.peek-ziel.geerbt .peek-punkt{background:none;border:2px solid #fff}

/* ---------------------------------------------------------------------------
   Trail (09.08.2026). Keine eigene Farbrolle: die Zeile ist Text, der
   Entitaets-Chip ist neutral. Ein Protokoll soll ruhig aussehen.
   --------------------------------------------------------------------------- */
.trail-filter{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:#fff;
  border:1px solid var(--gray-200);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:18px}
.tf-feld{display:flex;flex-direction:column;gap:4px}
.tf-feld select,.tf-feld input{min-width:150px}
.tf-weit{flex:1;min-width:200px}
.tf-weit input{width:100%}
.tf-knoepfe{display:flex;gap:8px;align-items:center;margin-left:auto}
.trail-z{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:9px 0;
  border-bottom:1px solid var(--gray-100);font-size:14px}
.trail-z:last-child{border-bottom:none}
.trail-typ{flex:0 0 auto;font-family:'Poppins';font-size:11px;font-weight:600;letter-spacing:.04em;
  background:var(--gray-100);color:var(--gray-600);border-radius:var(--pill);padding:2px 9px}
.trail-satz{flex:1;min-width:220px;color:var(--gray-700);overflow-wrap:anywhere}
.trail-kette{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.trail-kette i{width:12px;height:12px}
.trail-zeit{font-size:12px;color:var(--gray-500);white-space:nowrap}
.trail-ziel{font-size:12px;font-weight:600;white-space:nowrap}
.trail-blaettern{display:flex;align-items:center;gap:12px;justify-content:center;
  padding:12px 20px 16px;border-top:1px solid var(--gray-100)}

/* ---------------------------------------------------------------------------
   Einzahlung — Frage beim Erledigen, Erwartung beim Anlegen, Wochen-Bild
   (09.08.2026). Keine eigene Farbrolle: die Knoepfe sind neutral, den einzigen
   Farbtupfer setzt der Ziel-Punkt. Die Skala ist absichtlich NICHT ampelfarbig
   — „gar nicht" ist kein Fehler, sondern eine gueltige Antwort.
   Kontrast: --gray-700 auf --gray-50 = 8,9:1; aktiver Knopf #fff auf
   --blue-700 = 5,4:1.
   --------------------------------------------------------------------------- */
.ez-zeile,.ez-erwartung{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%;box-sizing:border-box;
  background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r);
  padding:8px 10px;font-size:13px;color:var(--gray-700)}
.ez-zeile{margin-top:10px}
.ez-erwartung{margin-top:8px}
.ez-punkt{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ez-frage-text{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}
/* In einer 250-px-Kanbanspalte muss die Knopfreihe umbrechen duerfen — ohne
   flex-wrap schob sie sich ueber den Kartenrand hinaus. */
.ez-knoepfe{display:inline-flex;gap:6px;flex-wrap:wrap;min-width:0}
.ez-btn{background:#fff;border:1px solid var(--gray-300);color:var(--blue-800);
  border-radius:var(--pill);padding:4px 12px;font-size:12px;font-weight:600;font-family:'Poppins'}
.ez-btn:hover:not([disabled]){background:var(--blue-50);border-color:var(--blue-200)}
.ez-btn.an{background:var(--blue-700);border-color:var(--blue-700);color:#fff}
.ez-btn[disabled]{opacity:.5;cursor:not-allowed}
.ez-zu{background:none;border:none;color:var(--gray-500);font-size:18px;line-height:1;
  padding:0 4px;border-radius:var(--r-sm);flex-shrink:0}
.ez-zu:hover{color:var(--ink);background:var(--gray-200)}

.ez-bild{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--gray-100);font-size:13px;color:var(--gray-600)}
.ez-z b{color:var(--ink);font-weight:600}
.ez-t{color:var(--gray-400)}
.ez-ohne{color:var(--gray-500)}
.ez-sollist{flex-basis:100%;color:var(--gray-700);font-size:13px}

.zk-reflexion{background:var(--blue-50);border:1px solid var(--blue-100);
  border-radius:var(--r);padding:12px 14px}
.zr-frage{font-size:15px;line-height:1.6;color:var(--ink);margin-bottom:10px}
.zr-antwort{width:100%;resize:vertical}

/* Ziel-Block in der Einzelübersicht (phase.php). Der oberste Block der Seite:
   „Das Projekt ist der Weg, das Ziel ist der Grund" — der Grund steht vor dem
   Weg. Farbe kommt ausschliesslich aus dem Ziel-Chip (Punkt + Kuerzel), die
   Flaeche bleibt weiss: die Zweck-Rolle faerbt keine Flaechen. */
.zielblock{margin-bottom:18px}
.zb-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zb-kopf h3{font-size:17px;margin:0}
.zb-frist{font-size:12px;color:var(--gray-600)}
.zb-frist.nah{color:var(--warning-ink)}
.zb-frist.ueber{color:var(--danger-ink)}
.zb-damit{display:flex;gap:8px;align-items:flex-start;margin-top:8px;
  font-size:15px;line-height:1.6;color:var(--gray-700)}
.zb-damit i{width:15px;height:15px;flex-shrink:0;margin-top:5px;color:var(--gray-400)}
.zb-zuv{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--gray-100);font-size:13px;color:var(--gray-700)}
/* Haertegrad 2: eine Zeile, kein Kasten. Sie soll auffallen, ohne zu mahnen —
   deshalb Hairline und Sekundaerton, keine Statusfarbe. --gray-600 auf
   --gray-50 = 6,5:1. */
.zielleer{display:flex;align-items:center;gap:8px;margin-bottom:18px;padding:9px 14px;
  background:var(--gray-50);border:1px dashed var(--gray-300);border-radius:var(--r);
  font-size:13px;color:var(--gray-600)}
.zielleer i{width:15px;height:15px;color:var(--gray-400);flex-shrink:0}

/* ---------------------------------------------------------------------------
   Maik-Paket (10.08.2026): Spalte „Geprüft" und Timeline-Frühwarnung.

   Kontrast gegen die TATSAECHLICHE Flaeche gerechnet, nicht gegen Weiss — der
   Abschnitt liegt auf der Lane --z5-f (#F3F1EE):
     --ink      auf Lane  14,22:1      --gray-700 auf Lane   8,77:1
     --gray-600 auf Lane   5,28:1      --z5-ink   auf Lane   7,11:1
   --gray-500 kaeme dort auf 4,48:1 und ist deshalb NICHT verwendet; das
   Alter steht in --gray-600.

   Bewusst KEINE Statusfarbe: eine Fruehwarnung meldet, dass ein Termin wackelt
   — er ist noch nicht gerissen. Rot wuerde daraus einen Verzug machen und genau
   den Unterschied einebnen, um den es Maik geht.
   --------------------------------------------------------------------------- */
.fw{padding:10px 0;border-bottom:1px solid rgba(92,78,64,.14)}
.fw:last-child{border-bottom:none}
.fw-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fw-t{flex:1;min-width:180px;font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.fw-d{font-size:12px;color:var(--gray-600);white-space:nowrap}
.fw-m{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px;
  font-size:12px;color:var(--gray-600)}
.fw-auf{display:inline-flex;align-items:center;gap:5px;color:var(--gray-700);font-weight:600}
.fw-m i{width:13px;height:13px;flex-shrink:0}
.fw-hilfe{display:inline-flex;align-items:center;gap:5px;color:var(--z5-ink);font-weight:600}
.fw-a{margin-top:7px}

/* Zeichen an der Kanban-Karte. Neutral getoent wie die „Warten auf"-Lane —
   dieselbe Rolle: ein Zustand, der Aufmerksamkeit braucht, aber kein Verzug ist. */
.tw-marke{display:inline-flex;align-items:center;gap:5px;margin-top:9px;
  background:var(--z5-f);border:1px solid var(--z5-r);color:var(--z5-ink);
  border-radius:var(--pill);padding:3px 10px;font-family:'Poppins';font-size:11px;font-weight:600}
.tw-marke i{width:12px;height:12px}

/* Spalte „Geprüft": der Punkt im Spaltenkopf traegt den Akzent, nicht Gruen —
   geprueft ist NICHT fertig, und Gruen hiesse im Design-System „erledigt". */
.col.pruef .pip{background:var(--blue-700)}

/* --- Arbeitsketten (14.08.2026) -------------------------------------------
   Der Fluss, nicht das Netz: eine waagerechte Leiste je Kette. Die vier
   Zustaende unterscheiden sich an Symbol, Rahmenart und Schriftschnitt —
   NICHT an einer abgesenkten Textfarbe. „Blass" darf nie heissen „unter
   4,5:1"; erledigte und schlafende Glieder tragen deshalb --gray-600
   (5,5:1 auf ihrer jeweiligen Flaeche) und werden ueber Durchstreichung
   bzw. gestrichelten Rahmen zurueckgenommen. */
.kette{display:flex;flex-wrap:wrap;align-items:center;padding:12px 0;border-bottom:1px solid var(--gray-100)}
.kette:last-child{border-bottom:none;padding-bottom:0}
.kette-strich{flex:0 0 16px;height:1px;background:var(--gray-300)}
.kg{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;max-width:300px;
  padding:7px 11px;border-radius:var(--r);border:1px solid var(--gray-200);
  background:#fff;font-size:13px;line-height:1.4;color:var(--gray-700)}
.kg i,.kg svg{width:14px;height:14px;flex-shrink:0}
.kg .kg-t{overflow-wrap:anywhere}
.kg .kg-w{flex-basis:100%;font-family:'Poppins';font-size:11px;font-weight:600;color:var(--z5-ink)}
.kg .kg-f{flex-basis:100%;font-size:11px;color:var(--gray-600)}
.kg-erledigt{background:var(--gray-50);color:var(--gray-600)}
.kg-erledigt .kg-t{text-decoration:line-through}
.kg-erledigt i{color:var(--success)}
/* Das aktive Glied ist das einzige, das Aufmerksamkeit will — deshalb als
   einziges gefuellt und fett. Akzentfarbe, keine Statusfarbe: „dran" ist
   kein Zustand von gut oder schlecht. */
.kg-aktiv{border-color:var(--blue-300);background:var(--blue-50);color:var(--ink);font-weight:600}
.kg-aktiv i{color:var(--blue-700)}
.kg-wartet{border-color:var(--z5-r);background:var(--z5-f)}
.kg-wartet i{color:var(--z5-ink)}
.kg-schlafend{border-style:dashed;border-color:var(--gray-300);color:var(--gray-600)}
.kg-schlafend i{color:var(--gray-400)}

/* Kennzeichen am Kartenfuss: „Glied 3/6". Neutral — die Position in einer
   Kette ist eine Ortsangabe, kein Zustand. */
.kettemarke{display:inline-flex;align-items:center;gap:5px;
  background:var(--gray-100);color:var(--gray-600);border-radius:var(--pill);
  padding:2px 8px;font-family:'Poppins';font-size:11px;font-weight:600}
.kettemarke i,.kettemarke svg{width:11px;height:11px}

/* Kette aus Text — die editierbare Vorschlagsliste im Eingang. Jede Zeile ist
   ein Textfeld; „streichen" entfernt sie. Es gibt bewusst keinen eigenen
   Geloescht-Zustand: leere Zeilen ignoriert der Server ohnehin. */
.kt-format{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--r);
  padding:10px 12px;margin-top:10px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:12px;line-height:1.6;color:var(--gray-700);white-space:pre-wrap;overflow-x:auto}
.kt-liste{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.kt-z{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--gray-200);border-radius:var(--r);padding:8px 10px;background:#fff}
.kt-nr{font-family:'Poppins';font-size:12px;font-weight:600;color:var(--gray-600);min-width:22px}
.kt-z .kt-t{flex:1;min-width:200px}
.kt-z .kt-a{flex:1;min-width:180px}
.kt-w{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  color:var(--gray-700);white-space:nowrap}
.kt-w input{width:auto}
.kt-x{font-size:12px}

/* ===========================================================================
   Stufe 1 (18.08.2026) — Modul M1 und die work-Flaechen.
   Setzt auf den Board-Klassen darueber auf (.board, .col, .col-h, .col-body,
   .tcard, .kdrop) und ergaenzt nur, was neu ist.
   =========================================================================== */

/* --- Kennzahlen ---------------------------------------------------------
   Eine Zeile ueber dem Board. Nur Zahlen: keine Diagramme, keine Prozente,
   keine Verlaeufe. Die Zahl steht gross und die Bezeichnung klein daneben,
   weil man beim Ueberfliegen die Zahl sucht, nicht das Wort. */
.kz-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.kz{position:relative;display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--gray-200);border-radius:var(--pill);padding:5px 8px 5px 13px;box-shadow:var(--sh-1)}
.kz-wert{font-family:'Poppins';font-weight:600;font-size:17px;color:var(--ink);line-height:1}
.kz-name{font-size:13px;color:var(--gray-600);cursor:text;border-radius:var(--r-sm);padding:1px 3px}
.kz-name:hover{background:var(--gray-100)}
.kz-sp,.kz-weg{background:none;border:none;padding:3px;border-radius:var(--r-sm);color:var(--gray-400);
  display:inline-flex;align-items:center;cursor:pointer}
.kz-sp:hover,.kz-weg:hover{background:var(--gray-100);color:var(--gray-700)}
.kz-sp i,.kz-weg i{width:14px;height:14px}
.kz-neu{background:none;border:1px dashed var(--gray-300);border-radius:var(--pill);
  padding:6px 12px;color:var(--gray-600);font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.kz-neu:hover{border-color:var(--blue-400);color:var(--blue-700);background:var(--blue-50)}
.kz-neu i{width:14px;height:14px}
.kz-neu-halter{display:inline-flex}
/* Die Spaltenauswahl haengt AN der Kennzahl, nicht in einem Dialog — die
   Zuordnung ist eine Eigenschaft der Kennzahl und soll dort stehen. */
.kz-auswahl{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:210px;
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:10px;display:flex;flex-direction:column;gap:6px}
.kz-auswahl label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-700);cursor:pointer}
.kz-auswahl input{margin:0}
.kz-auswahl .btn{margin-top:4px;align-self:flex-start}

/* --- Spalten ------------------------------------------------------------
   Das «+» ist bewusst klein und blass: es steht an JEDER Fuge (ganz links,
   zwischen allen Spalten, ganz rechts) und waere in Normalstaerke eine Reihe
   von Knoepfen, die lauter ist als das Board. Beim Ueberfahren tritt es
   hervor. */
.m1-board{align-items:stretch}
.sp-plus{align-self:stretch;flex:0 0 auto;width:20px;min-height:60px;margin:0 -3px;
  background:none;border:none;color:var(--gray-300);font-size:15px;line-height:1;
  cursor:pointer;border-radius:var(--r-sm);transition:all .15s var(--ease)}
.sp-plus:hover{color:var(--blue-700);background:var(--blue-50)}
.sp-plus:focus-visible{box-shadow:var(--focus);color:var(--blue-700)}
.sp-neu-halter{flex:0 0 200px;align-self:flex-start;padding:8px 0}
/* Die Nummer 0..n ist Anzeige, kein Bezug — deshalb sitzt sie zurueckgenommen
   vor dem Namen und nicht als Etikett daneben. */
.col-h .sp-nr{font-family:'Poppins';font-size:11px;font-weight:600;color:var(--gray-400);
  min-width:12px;text-align:right}
.col-h .sp-name{cursor:text;border-radius:var(--r-sm);padding:1px 3px}
.col-h .sp-name:hover{background:var(--gray-100)}
.sp-kopf-rechts{display:inline-flex;align-items:center;gap:4px}
.sp-weg{background:none;border:none;padding:3px;border-radius:var(--r-sm);color:var(--gray-300);
  display:inline-flex;align-items:center;cursor:pointer;opacity:0;transition:opacity .15s var(--ease)}
.col:hover .sp-weg,.sp-weg:focus-visible{opacity:1}
.sp-weg:hover{background:var(--danger-bg);color:var(--danger)}
.sp-weg i{width:13px;height:13px}
.sp-fuss{padding:2px 8px 6px}
.k-neu{background:none;border:none;padding:5px 6px;border-radius:var(--r-sm);
  color:var(--gray-500);font-size:12px;font-weight:600;width:100%;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.k-neu:hover{background:#fff;color:var(--blue-700)}
.k-neu i{width:13px;height:13px}

/* --- Karten -------------------------------------------------------------
   Uebernimmt .tcard vollstaendig. Neu ist nur der Fuss mit Flag und Zaehler. */
.m1-karte .tit{margin-bottom:6px;cursor:text}
.m1-foot{gap:6px}
.flagbox{display:inline-flex;align-items:center;gap:6px}
.flag{background:none;border:none;padding:2px;border-radius:var(--r-sm);cursor:pointer;
  display:inline-flex;align-items:center}
.flag:hover{background:var(--gray-100)}
.flagpip{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--gray-300);background:#fff;display:block}
.flag-rot .flagpip{background:var(--danger);border-color:var(--danger)}
.flag-gruen .flagpip{background:var(--success);border-color:var(--success)}
/* „Status" steht klein daneben, damit der Punkt nicht raten laesst. Eine
   Legende gibt es bewusst nicht — sie erklaerte dreimal, was der Klick zeigt. */
.flag-lab{font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  font-family:'Poppins';font-weight:600;color:var(--gray-400)}
.flag-tage{font-size:11px;color:var(--gray-600);white-space:nowrap}
/* Ab sieben Tagen dezent hervorgehoben: eine Toenung am Zaehler, nicht an der
   ganzen Karte. Die Karte ist nicht in einem anderen Zustand, sie wartet nur
   laenger. */
.flag-tage.lang{color:var(--warning-ink);background:var(--warning-bg);
  padding:1px 6px;border-radius:var(--pill);font-weight:600}
.k-weg{background:none;border:none;padding:3px;border-radius:var(--r-sm);color:var(--gray-300);
  display:inline-flex;align-items:center;cursor:pointer;opacity:0;transition:opacity .15s var(--ease)}
.tcard:hover .k-weg,.k-weg:focus-visible{opacity:1}
.k-weg:hover{background:var(--danger-bg);color:var(--danger)}
.k-weg i{width:13px;height:13px}

/* --- Eingabe an Ort und Stelle ------------------------------------------
   Ein Feld, das aussieht wie das, was es ersetzt. Kein Dialog, kein
   Speichern-Knopf: Enter uebernimmt, Escape verwirft. */
.inline-eingabe{font:inherit;color:var(--ink);background:#fff;
  border:1px solid var(--blue-400);border-radius:var(--r-sm);padding:3px 6px;width:100%;
  box-shadow:var(--focus)}

/* --- work: drei Flaechen ------------------------------------------------ */
.w-flaechen{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start}
.w-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.w-zeile{display:flex;align-items:center;gap:9px;padding:7px 9px;background:var(--gray-50);
  border:1px solid var(--gray-200);border-radius:var(--r-sm)}
.w-text{flex:1;font-size:14px;color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.w-hak{background:#fff;border:1px solid var(--gray-300);border-radius:var(--r-sm);
  padding:3px;color:var(--gray-400);display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.w-hak:hover{border-color:var(--success);color:var(--success);background:var(--success-bg)}
.w-hak i{width:13px;height:13px}
/* Das Alter steht als Zahl da und wird nicht bewertet: keine Schwelle, keine
   Farbe. Was ab wann zu lange ist, weiss Michael, nicht die App. */
.w-tage{font-size:11px;color:var(--gray-500);white-space:nowrap;flex-shrink:0}
.w-fuss{margin-top:8px}
.w-neu{background:none;border:1px dashed var(--gray-300);border-radius:var(--r-sm);
  padding:6px 10px;color:var(--gray-600);font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.w-neu:hover{border-color:var(--blue-400);color:var(--blue-700);background:var(--blue-50)}
.w-neu i{width:14px;height:14px}