/* Bildungsschmiede – Bauhaus-Design (Blautöne). Klar, geometrisch, benutzerfreundlich. */
:root{
  --navy:#0d2440;        /* dunkelstes Blau (Text/Kopf) */
  --blue:#1f5fd0;        /* Primär */
  --blue-bright:#2f80ed; /* Aktion */
  --sky:#4aa3e8;         /* mittel */
  --ice:#dbe9fb;         /* hell */
  --ice-2:#eef4fc;       /* Flächen */
  --paper:#f6f8fc;       /* Hintergrund */
  --white:#ffffff;
  --line:#d4e0f0;
  --ink:#0d2440;
  --muted:#5d7290;
  --ok:#2b915f; --warn:#d98a1f; --bad:#c0432f;
  --r:14px;
  --shadow:0 1px 2px rgba(13,36,64,.06),0 6px 22px rgba(13,36,64,.07);
}
*{box-sizing:border-box;min-width:0}
html,body{margin:0}
body{
  font-family:"Helvetica Neue",Arial,system-ui,sans-serif;
  background:var(--paper);color:var(--ink);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.01em}
h1{font-size:26px}
.upper{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;color:var(--muted)}

/* ---- App-Rahmen: Sidebar + Inhalt ---- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}

.side{
  background:var(--navy);color:#cdd9ec;
  padding:0 14px 22px;
  display:flex;flex-direction:column;gap:4px;
  border-right:4px solid var(--blue-bright);
  position:sticky;top:0;height:100vh;overflow:hidden;
}
/* Bauhaus-Kreis dekorativ (passend zur Topbar) */
.side::after{
  content:"";position:absolute;right:-60px;bottom:80px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(47,128,237,.06);pointer-events:none;
}

/* ── Markenbereich ── */
.brand{
  display:flex;align-items:center;gap:12px;
  padding:22px 14px 20px 28px;
  margin:0 -14px 8px;
  position:relative;
}
.brand .marks{display:flex;gap:5px}
.brand .marks i{width:13px;height:13px;display:block}
.brand .sq{background:var(--blue-bright)}
.brand .ci{background:var(--sky);border-radius:50%}
.brand .tri{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:13px solid var(--ice)}
.brand b{color:#fff;font-size:15px;letter-spacing:.02em;line-height:1.1}
.brand span{display:block;color:#7f97ba;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}

/* ── Navigation ── */
.nav{margin-top:4px}
.nav a{
  display:flex;align-items:center;gap:12px;
  color:#9fb6d8;padding:10px 14px;border-radius:10px;font-weight:600;
  font-size:14px;letter-spacing:.01em;transition:all .14s;
}
.nav a .dot{
  width:8px;height:8px;border-radius:2px;
  background:rgba(74,163,232,.5);flex:none;transition:all .14s;
}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a:hover .dot{background:var(--blue-bright);border-radius:50%}
.nav a.active{background:var(--blue-bright);color:#fff;box-shadow:0 2px 10px rgba(47,128,237,.35)}
.nav a.active .dot{background:#fff;border-radius:50%}
.nav-section{
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;
  color:#9fb6d8;padding:16px 14px 4px;margin-top:2px;
}
/* Erster Bereich: mehr Luft, trennt die Hauptpunkte von den Fächern darunter */
.nav .nav-section:first-of-type{margin-top:20px}
.nav a.nav-sub{padding-left:26px;font-weight:500;font-size:13px;color:#7f97ba}
.nav a.nav-sub:hover{color:#fff}

/* ── Aufklappbare Menü-Bereiche (Fächer) ── */
.nav-section.nav-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;background:none;border:0;cursor:pointer;
  font-family:inherit;text-align:left;transition:color .14s;
}
.nav-section.nav-toggle:hover{color:#fff}
.nav-caret{
  width:0;height:0;flex:none;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--blue-bright);
  transition:transform .2s ease;
}
.nav-section.nav-toggle[aria-expanded="false"] .nav-caret{transform:rotate(-90deg)}
.nav-fach{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease}
.nav-fach > div{overflow:hidden;display:flex;flex-direction:column;gap:4px}
.nav-fach.zu{grid-template-rows:0fr}
.nav-fach.zu > div{visibility:hidden}

/* ── Fußzeile ── */
.side .foot{
  margin-top:auto;font-size:12px;color:#7f97ba;
  padding:14px 10px 8px;
  border-top:1px solid rgba(255,255,255,.08);
  margin-left:-14px;margin-right:-14px;padding-left:20px;
}
.side .foot a{color:#9fb6d8}
.logout-btn{
  margin-top:6px;background:rgba(255,255,255,.08);color:#9fb6d8;
  border:1px solid rgba(255,255,255,.12);border-radius:8px;
  padding:5px 12px;font-size:12px;cursor:pointer;font-family:inherit;
  transition:all .14s;
}
.logout-btn:hover{background:rgba(255,255,255,.14);color:#fff}

.main{padding:28px 34px;max-width:1180px}

/* ---- Topbar (Bauhaus) ---- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  margin-bottom:28px;
  background:var(--navy);
  border-radius:var(--r);
  padding:20px 28px 20px 32px;
  box-shadow:inset 6px 0 0 var(--blue-bright), 0 4px 20px rgba(13,36,64,.18);
  position:relative;overflow:hidden;
}
/* Bauhaus-Kreis dekorativ */
.topbar::before{
  content:"";position:absolute;right:-50px;top:-50px;
  width:160px;height:160px;border-radius:50%;
  background:rgba(47,128,237,.1);pointer-events:none;
}
/* Bauhaus-Quadrat dekorativ */
.topbar::after{
  content:"";position:absolute;right:60px;bottom:-30px;
  width:80px;height:80px;
  background:rgba(74,163,232,.08);pointer-events:none;transform:rotate(18deg);
}
.topbar h1{color:#fff;font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0}
.crumbs{color:#7f97ba;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}

/* ---- Suchleiste ---- */
.search{display:flex;gap:8px;min-width:420px}
.search input{
  flex:1;padding:11px 16px;
  border:2px solid rgba(255,255,255,.25);border-radius:10px;
  font-size:15px;font-family:inherit;
  background:#fff;color:var(--ink);
}
.search input::placeholder{color:#93afd4}
.search input:focus{outline:none;border-color:var(--blue-bright);background:#fff}
.search button,.btn{padding:11px 18px;background:var(--blue-bright);color:#fff;border:0;border-radius:10px;font-weight:700;cursor:pointer;font-size:15px}
.search-btn{
  padding:11px 22px !important;font-size:14px !important;
  white-space:nowrap;box-shadow:0 4px 14px rgba(47,128,237,.45);
  letter-spacing:.01em;display:inline-flex;align-items:center;gap:8px;
}
.search-btn:hover{background:var(--blue) !important;transform:translateY(-1px)}
.btn.ghost{background:#fff;color:var(--blue);border:2px solid var(--line)}
.btn:hover{filter:brightness(1.05)}

/* ---- KPIs ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:26px}
.kpi{background:#fff;border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
/* Text über die Deko-Ecke legen: Bei langen Angaben wie „Gruppenmaßnahme"
   lief die Schrift sonst unter das farbige Quadrat und war nicht mehr lesbar. */
.kpi .big{font-size:40px;font-weight:800;line-height:1;position:relative;z-index:1;
  overflow-wrap:anywhere;hyphens:auto}
.kpi .lbl{margin-top:6px;position:relative;z-index:1}
.kpi::after{content:"";position:absolute;right:-18px;top:-18px;width:60px;height:60px;border-radius:50%;background:var(--ice)}
.kpi.b1::after{background:var(--ice)} .kpi.b2::after{background:#cfe0f7;border-radius:0}
.kpi.b3::after{background:var(--sky);opacity:.25} .kpi.b4::after{background:var(--blue);opacity:.18}
.kpi.blue{background:var(--blue)}
.kpi.blue .big,.kpi.blue .lbl{color:#fff}
.kpi.blue::after{background:rgba(255,255,255,.16)}
.kpi.b5{background:var(--blue);text-decoration:none;display:flex;flex-direction:column;justify-content:center;transition:transform .15s,box-shadow .15s}
.kpi.b5:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(13,36,64,.12),0 12px 28px rgba(13,36,64,.16)}
.kpi.b5 .big,.kpi.b5 .lbl{color:#fff}
.kpi.b5 .arrow{font-size:20px;font-weight:800;line-height:1.25;color:#fff}
.kpi.b5::after{background:rgba(255,255,255,.16)}
/* Zweiter Aktions-Kachelton (Ersttagsliste): Petrol wie beim Abrechnungs-Button.
   Bewusst ein anderer Farbton statt eines weiteren Blaus — Navy wäre die Farbe der
   Seitenleiste und stünde neben dem Primärblau zu nah beieinander. */
.kpi.b5.b5-teal{background:#0f766e}

/* ---- Evaluation-Navigation (4 gleich große Kacheln) ---- */
.eval-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:26px}
.eval-nav-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;min-height:380px;padding:32px 30px 28px;border-radius:var(--r);text-decoration:none;color:#fff;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.eval-nav-tile:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(13,36,64,.14),0 16px 34px rgba(13,36,64,.18)}
.eval-nav-tile:hover .cta{opacity:1;transform:translateX(2px)}
.eval-nav-tile::after{content:"";position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.08)}
.eval-nav-tile .icon-badge{position:relative;z-index:1;width:62px;height:62px;border-radius:14px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.eval-nav-tile .icon-badge svg{width:32px;height:32px}
.eval-nav-tile .label{position:relative;z-index:1;font-size:21px;font-weight:800;line-height:1.3;margin-top:auto}
.eval-nav-tile .cta{position:relative;z-index:1;font-size:13px;font-weight:700;letter-spacing:.02em;opacity:.75;margin-top:10px;transition:opacity .18s,transform .18s}
.eval-nav-tile.t1{background:#0d2440}
.eval-nav-tile.t2{background:#1d4ed8}
.eval-nav-tile.t3{background:#2563eb}
.eval-nav-tile.t4{background:#0891b2}

/* ---- Karten / Grid ---- */
.section-title{display:flex;align-items:center;gap:10px;margin:26px 0 14px}
.section-title .bar{width:22px;height:6px;background:var(--blue-bright)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.cards > a{display:flex}
.cards > a > .card{flex:1;min-width:0}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(13,36,64,.14),0 16px 34px rgba(13,36,64,.18)}
.card .head{position:relative;overflow:hidden;padding:22px 20px;color:#fff;background:var(--blue)}
.card.gruppe .head{background:var(--blue)} .card.einzel .head{background:var(--sky)}
.card .head::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.08)}
.card .head h3{position:relative;z-index:1;font-size:18px}
.card .head .tag{position:relative;z-index:1;font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.9;font-weight:700}
.card .body{padding:18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .stat{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.card .stat:last-child{border:0}
.card .foot{padding:14px 20px;background:var(--ice-2);display:flex;justify-content:flex-end}

/* ---- Listen-Tabellen ---- */
.panel{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow-x:auto;overflow-y:hidden;margin-bottom:22px}
.panel .ph{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}

/* ---- Farbige Kopfzeilen mit Deko-Form (wie .card .head) ---- */
.ph-deco{position:relative;overflow:hidden;border-bottom:none}
.ph-deco > *{position:relative;z-index:1}
.ph-deco.shape-circle::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.12)}
.ph-deco.shape-square::after{content:"";position:absolute;right:-18px;top:-18px;width:85px;height:85px;background:rgba(255,255,255,.12);transform:rotate(12deg)}
.ph-deco.shape-triangle::after{content:"";position:absolute;right:14px;top:-30px;width:0;height:0;border-left:52px solid transparent;border-right:52px solid transparent;border-bottom:92px solid rgba(255,255,255,.12);transform:rotate(15deg)}
.ph-deco.shape-diamond::after{content:"";position:absolute;right:6px;top:-38px;width:78px;height:78px;background:rgba(255,255,255,.12);transform:rotate(45deg)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14px}
th{background:var(--ice-2);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
tbody tr:hover{background:var(--ice-2)}
td a{font-weight:600}
.group-row td{background:var(--navy);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:12px}

/* ---- Badges ---- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.vb-badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:700;border:1.5px solid;white-space:nowrap}
.s-aktiv{background:#dff1e7;color:var(--ok)}
.s-geplant{background:var(--ice);color:var(--blue)}
.s-abgeschlossen{background:#e6e9ef;color:var(--navy)}
.s-abgebrochen{background:#fbe3de;color:var(--bad)}
.s-nicht_angetreten{background:#fdeecf;color:var(--warn)}

/* ---- Anwesenheits-Matrix (Monat) ---- */
.monthbar{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.monthbar .nowm{font-size:20px;font-weight:800}
.matrix{overflow-x:auto}
.matrix th.day,.matrix td.day{text-align:center;padding:6px 1px;width:22px;font-size:11px;font-variant-numeric:tabular-nums}
/* Einzel-Teilnehmer-Kalender (kein Namens-Spalte) — immer exakt so breit wie die Box, nie breiter */
.matrix-solo table{table-layout:fixed;width:100%}
.matrix th.we,.matrix td.we{background:#eef2f8}
.matrix td.az{background:#a9c6ea}
.matrix td.has{background:var(--blue-bright);color:#fff;font-weight:700;border-radius:6px}
.matrix td.name{font-weight:600;white-space:nowrap}
.matrix td.sum{font-weight:800;text-align:center}
.matrix td.rest{text-align:center;font-weight:700}
.rest-ok{color:var(--ok)} .rest-low{color:var(--bad)}

/* Profil */
.profile{display:flex;flex-direction:column;gap:22px;width:100%}
.profile>div{display:flex;flex-direction:column;gap:0}
@media(min-width:1100px){.profile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start}}
@media(max-width:900px){.app{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap;align-items:center}}
.box{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px;overflow-wrap:break-word}
/* Arbeitszeit-Pillen */
.az-pill{background:var(--ice);color:var(--muted);border-color:var(--ice)}
.az-pill.az-active{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}
/* Übernahme-Pillen (Farbe via JS data-Attribute) */
.up-pill{background:var(--ice);color:var(--muted);border-color:var(--ice)}
.box h3{margin-bottom:12px;display:flex;align-items:center;gap:8px}
.box h3::before{content:"";width:14px;height:14px;background:var(--blue-bright)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{word-break:break-word;overflow-wrap:break-word;min-width:0}
.timeline .item{border-left:3px solid var(--sky);padding:4px 0 14px 14px;margin-left:6px}
.timeline .item .meta{font-size:12px;color:var(--muted)}
.timeline .item .cat{display:inline-block;background:var(--ice);color:var(--blue);border-radius:6px;padding:1px 8px;font-size:11px;font-weight:700;margin-right:6px}
.empty{color:var(--muted);font-style:italic;padding:6px 0}
.bigring{width:84px;height:84px;border-radius:50%;background:conic-gradient(var(--blue-bright) var(--p,0%),var(--ice) 0);display:grid;place-items:center}
.bigring span{width:62px;height:62px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:800}

/* Anwesenheits-Status-Zellen */
.matrix td.clk{cursor:pointer}
.matrix td.clk:hover{outline:2px solid var(--blue-bright);outline-offset:-2px}
.matrix td.st-an{background:var(--blue-bright);color:#fff;font-weight:700}
.matrix td.st-kr{background:#fbe3de;color:var(--bad);font-weight:800}
.matrix td.st-en{background:#fdeecf;color:var(--warn);font-weight:800}
.matrix td.st-un{background:#f3d4cd;color:#7a1f12;font-weight:800}
.matrix td.st-pr{background:#dbeee6;color:#1d6b4a;font-weight:800}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:8px 0 2px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:5px}
.lg-an{background:var(--blue-bright)} .lg-kr{background:#fbe3de} .lg-en{background:#fdeecf} .lg-un{background:#f3d4cd} .lg-pr{background:#dbeee6}

/* Klick-Menü (Popover) */
.pop{position:absolute;z-index:50;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:180px}
.pop button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink)}
.pop button:hover{background:var(--ice-2)}
.pop .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:9px;vertical-align:-1px}
.pop .ue-row{display:flex;gap:6px;padding:6px 8px}
.pop .ue-row input{width:64px;padding:7px 8px;border:2px solid var(--line);border-radius:8px}
.pop .clear{color:var(--bad)}
.pop hr{border:0;border-top:1px solid var(--line);margin:6px 4px}

/* Formulare */
.frow{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.frow label{font-weight:700;font-size:13px;color:var(--navy)}
.f-inp{padding:10px 12px;border:2px solid var(--line);border-radius:10px;font-size:15px;background:#fff;width:100%;font-family:inherit}
.f-inp:focus{outline:none;border-color:var(--blue-bright)}
select.f-inp{appearance:auto}
.f-multi{min-height:120px}
.frow-check{flex-direction:row;align-items:center;gap:10px}
.frow-check label{order:2}
.f-check{width:22px;height:22px;accent-color:var(--blue-bright);cursor:pointer;flex:none}
.fhelp{color:var(--muted);font-size:12px}
.ferr{background:#fbe3de;color:var(--bad);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;margin-bottom:10px}
.fbtns{display:flex;gap:10px;margin-top:8px}
.f-multi{list-style:none;padding:8px;border:2px solid var(--line);border-radius:10px}

/* Login */
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),var(--blue))}
.login-card{background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:30px;width:340px}
.logout-btn{background:none;border:0;color:#9fb6d8;cursor:pointer;font:inherit;padding:0;text-decoration:underline}

.flash{background:#dff1e7;color:var(--ok);border-radius:10px;padding:11px 16px;font-weight:600;margin-bottom:16px}
.qrow{display:flex;justify-content:space-between;font-size:14px;margin:8px 0 3px}
.qbar{height:8px;background:var(--ice);border-radius:5px;overflow:hidden}
.qbar i{display:block;height:100%;background:var(--blue-bright)}
.catcount{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);background:var(--ice-2)}
.catcount .cc{font-size:13px;color:var(--navy)}
.filterbar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.filterbar label{font-size:13px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px}
.filterbar select{width:auto;min-width:150px}

/* Kompakte Checkbox-Listen (z.B. Dozenten-Auswahl beim Kurs) */
ul.f-multi{padding:6px 8px;max-height:180px;overflow-y:auto}
ul.f-multi li{list-style:none;padding:0}
ul.f-multi label{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer}
ul.f-multi label:hover{background:var(--ice)}
ul.f-multi input[type=checkbox]{width:15px;height:15px;accent-color:var(--blue-bright);flex:none;cursor:pointer}

/* Förderungs-Checkboxen im Teilnehmerprofil */
.foerder-checks{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--ice)}
.fc-item{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:8px;background:var(--ice);font-size:14px;font-weight:600;color:var(--muted)}
.fc-item.fc-on{background:#fff6ec;color:#a04900}
.fc-tick{font-size:18px;line-height:1;color:var(--muted)}
.fc-item.fc-on .fc-tick{color:#e07b00}

/* Tablet-Kachel (Teilnehmerliste oben rechts) */
.tablet-kachel{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--ice);border-radius:12px;padding:10px 16px;min-width:130px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.tk-icon{font-size:26px;line-height:1}
.tk-body{display:flex;flex-direction:column;gap:2px}
.tk-title{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.tk-row{display:flex;align-items:baseline;gap:5px}
.tk-val{font-size:20px;font-weight:800;color:var(--navy);line-height:1}
.tk-frei{color:var(--blue-bright)}
.tk-lbl{font-size:11px;color:var(--muted);font-weight:600}

/* Status-Pills in der Teilnehmerliste */
.status-pill{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;border:2px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;transition:border-color .15s,background .15s,color .15s}
.status-pill:hover{border-color:var(--blue-bright);color:var(--blue-bright)}
.status-pill.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* Kurs-Pills in der Teilnehmerliste */
.kurs-pill{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;border:2px solid var(--kpf,#1e3a8a);background:#fff;font-size:13px;font-weight:600;color:var(--kpf,#1e3a8a);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.kurs-pill:hover{background:var(--kpf,#1e3a8a);color:#fff}
.kurs-pill.active{background:var(--kpf,#1e3a8a);color:#fff}

/* ---- Änderungslog: Kalender mit Aktivitäts-Heatmap ---- */
.log-kal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.log-kal .wd{text-align:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:4px}
.log-tag{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;aspect-ratio:1;border-radius:10px;border:2px solid transparent;background:var(--ice-2);color:var(--ink);text-decoration:none;font-size:14px;font-weight:700;transition:transform .12s,border-color .12s}
.log-tag:hover{transform:translateY(-2px);border-color:var(--blue-bright)}
.log-tag .n{font-size:10px;font-weight:800;line-height:1;opacity:.85}
.log-tag.leer{opacity:.35}
.log-tag.heute{border-color:var(--sky)}
.log-tag.aktiv{border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,36,64,.12)}
.log-tag.h1{background:#cfe0f7} .log-tag.h2{background:#9dc2ef;color:#0d2440}
.log-tag.h3{background:#4aa3e8;color:#fff} .log-tag.h4{background:#1f5fd0;color:#fff}
.log-tag.h5{background:#0d2440;color:#fff}

/* Aktivitätenliste */
.log-akt{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--ice)}
.log-akt:last-child{border-bottom:none}
.log-typ{flex:none;display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:800}
.log-typ.t-neu{background:#dcfce7;color:#15803d}
.log-typ.t-aend{background:#dbeafe;color:#1d4ed8}
.log-typ.t-del{background:#fee2e2;color:#b91c1c}

/* ── Tages-Anwesenheit (Unterschrift am Tablet) ── */
.anw-zeile{
  display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--line);border-left:6px solid transparent;transition:background .15s;
}
.anw-zeile:last-child{border-bottom:none}
.anw-zeile.weiss{background:#fff;border-left-color:var(--line)}
.anw-zeile.gruen{background:#f0fdf4;border-left-color:#16a34a}
.anw-zeile.gelb{background:#fefce8;border-left-color:#eab308}
.anw-zeile.rot{background:#fef2f2;border-left-color:#dc2626}
.anw-name{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
  background:none;border:0;cursor:pointer;font-family:inherit;text-align:left;padding:6px 4px;border-radius:10px;
}
.anw-name:hover{background:rgba(13,36,64,.05)}
.anw-punkt{width:12px;height:12px;border-radius:50%;flex:none}
.anw-zeile.weiss .anw-punkt{background:#fff;box-shadow:inset 0 0 0 2px var(--line)}
.anw-zeile.gruen .anw-punkt{background:#16a34a}
.anw-zeile.gelb  .anw-punkt{background:#eab308}
.anw-zeile.rot   .anw-punkt{background:#dc2626}
.anw-nm{display:block;font-size:15px;font-weight:700;color:var(--navy)}
.anw-kt{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.anw-sig{flex:none;width:260px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.anw-sig img{max-height:44px;max-width:100%}
.anw-zeit{font-size:10px;color:var(--muted);margin-top:2px}
.anw-ap-btn{
  margin-top:5px;font-size:10px;font-weight:800;padding:2px 9px;border-radius:20px;
  border:1.5px solid #86c9ae;background:#fff;color:#1d6b4a;cursor:pointer;letter-spacing:.02em;
}
.anw-ap-btn:hover{background:#dbeee6}
.anw-ap-btn.aktiv{background:#1d6b4a;color:#fff;border-color:#1d6b4a}
.anw-status{flex:none;width:118px;font-size:12px;font-weight:700;color:var(--muted);text-align:right}
.anw-btns{flex:none;display:flex;gap:5px}
.anw-set{
  width:34px;height:34px;border-radius:9px;border:2px solid var(--line);background:#fff;
  color:var(--muted);font-weight:800;font-size:13px;cursor:pointer;transition:all .14s;
}
.anw-set:hover{border-color:var(--blue-bright);color:var(--blue-bright)}
.anw-set.anw-reset{font-weight:600}
@media (max-width:820px){
  .anw-zeile{flex-wrap:wrap;gap:8px}
  .anw-sig{width:auto;flex:1}
  .anw-status{width:auto;text-align:left}
}

/* ── Schrittleiste für lange Formulare (Interview, Profiling) ──────────────
   Beide Bögen führen durch viele Seiten. Die Leiste liegt hier statt in den
   Vorlagen, damit sie in beiden gleich aussieht und die Blase mit dem
   Seitennamen nur an einer Stelle gepflegt wird. */
.fs-fortschritt{position:sticky;top:0;z-index:50;background:var(--paper);
  padding:16px 18px;margin:0 0 20px;border-radius:var(--r);box-shadow:var(--shadow);
  border:1px solid var(--line)}
.fs-bar{height:14px;border-radius:10px;background:var(--ice);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(13,36,64,.12)}
.fs-bar-fill{height:100%;border-radius:10px;
  background:linear-gradient(90deg,var(--blue-bright),#0f766e);transition:width .35s ease}
.fs-bar-kopf{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:7px;gap:12px;flex-wrap:wrap}
.fs-pct{font-size:26px;font-weight:800;color:var(--navy);line-height:1}
.fs-zaehler{font-size:12px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.fs-schritte{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}

/* Die Blase hängt am Schritt-Knopf; position:relative deshalb hier und nicht
   am Umfeld — sonst würde sie an der Leiste statt am Kästchen kleben. */
.iv-schritt,.fs-schritt{position:relative;width:30px;height:30px;border-radius:8px;
  border:2px solid var(--line);background:#fff;font-size:11px;font-weight:800;
  color:var(--muted);cursor:pointer;display:flex;align-items:center;
  justify-content:center;text-decoration:none;transition:transform .12s;padding:0}
.iv-schritt:hover,.fs-schritt:hover{transform:translateY(-2px)}
.iv-schritt.fertig,.fs-schritt.fertig{background:#dcfce7;border-color:#86efac;color:#15803d}
/* Ausgeblendete Abschnitte im Abschlussgespräch: sichtbar, aber übersprungen. */
.iv-schritt.aus{background:#fef9c3;border-color:#eab308;color:#a16207}
/* Knopf zum Ausblenden einer Seite im Abschlussgespräch: in derselben Farbe
   wie das gelbe Kästchen, damit klar ist, was er bewirkt. */
.ab-aus-knopf{background:#fef9c3;border:2px solid #eab308;color:#854d0e;border-radius:11px;
  padding:9px 18px;font-size:13.5px;font-weight:800;cursor:pointer;transition:filter .12s}
.ab-aus-knopf:hover{filter:brightness(.97)}
.ab-aus-knopf:disabled{opacity:.5;cursor:default}
.ab-aus-knopf.zurueck{background:#dcfce7;border-color:#16a34a;color:#166534}
.iv-schritt.aktuell,.fs-schritt.aktuell{background:var(--navy);border-color:var(--navy);color:#fff}
.iv-schritt.beob,.fs-schritt.beob{border-style:dashed}

/* Name der Seite als Blase beim Überfahren. Bewusst unterhalb der Ziffer:
   darüber liegt der Fortschrittsbalken, die Blase überdeckte ihn sonst. */
.iv-schritt[data-titel]::after,.fs-schritt[data-titel]::after{content:attr(data-titel);
  position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(-4px);
  background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:0;
  text-transform:none;white-space:nowrap;padding:6px 10px;border-radius:8px;
  box-shadow:0 6px 18px rgba(13,36,64,.28);opacity:0;pointer-events:none;
  transition:opacity .12s ease,transform .12s ease;z-index:60}
/* Spitze der Blase */
.iv-schritt[data-titel]::before,.fs-schritt[data-titel]::before{content:"";position:absolute;
  top:calc(100% + 3px);left:50%;transform:translateX(-50%) translateY(-4px);
  border:5px solid transparent;border-bottom-color:var(--navy);opacity:0;
  pointer-events:none;transition:opacity .12s ease,transform .12s ease;z-index:60}
.iv-schritt[data-titel]:hover::after,.fs-schritt[data-titel]:hover::after,
.iv-schritt[data-titel]:focus-visible::after,.fs-schritt[data-titel]:focus-visible::after,
.iv-schritt[data-titel]:hover::before,.fs-schritt[data-titel]:hover::before,
.iv-schritt[data-titel]:focus-visible::before,.fs-schritt[data-titel]:focus-visible::before{
  opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Teilnehmertabelle (Liste und Dashboard, kern/_teilnehmer_tabelle.html) ──
   Liegt hier statt in einer Vorlage, weil die Tabelle an zwei Stellen
   eingebunden wird und sonst auf einer davon ungestaltet stünde. */
/* Ja/Nein-Pille in der Liste — Farbgebung wie der Aktiv-Schalter beim Berater. */
.flag-pille{
  min-width:46px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:800;
  cursor:pointer;transition:filter .12s,transform .12s;
  background:#fee2e2;color:#b91c1c;border:2px solid #fca5a5;
}
/* Spalte nur so breit wie nötig: width:1% zwingt die Tabelle, den Rest zu verteilen.
   Der schmale Innenabstand ist hier der eigentliche Hebel — der Kopftext misst nur ~61px,
   die Standard-Polsterung von 2x16px machte die Spalte doppelt so breit wie nötig. */
.flag-sp{width:1%;white-space:nowrap;text-align:center;padding-left:7px;padding-right:7px}
th.flag-sp{font-size:11px}
.flag-pille.an{background:#dcfce7;color:#15803d;border-color:#86efac}
.flag-pille:hover{filter:brightness(.96);transform:translateY(-1px)}
.flag-pille:disabled{opacity:.5;cursor:wait;transform:none}

/* ── Übergabemodus ────────────────────────────────────────────────────
   Tablet in der Hand des Teilnehmers: Die Seitenleiste ist ausgeblendet,
   oben steht ein Balken mit dem Feld für die PIN. */
.app.uebergabe{grid-template-columns:1fr}
.ueb-knopf{background:#ea580c;border:0;border-radius:11px;padding:10px 20px;
  font-size:14px;font-weight:800;color:#fff;cursor:pointer;letter-spacing:.01em;
  box-shadow:0 4px 12px rgba(234,88,12,.35);transition:filter .12s,transform .1s}
.ueb-knopf:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ueb-balken{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;background:#1e3a5f;color:#fff;border-radius:var(--r);
  padding:12px 18px;margin-bottom:16px;font-size:13px}
.ueb-balken form{display:flex;gap:8px}
.ueb-balken input{width:84px;padding:7px 10px;border-radius:9px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);color:#fff;font-size:15px;letter-spacing:.25em;text-align:center}
.ueb-balken input::placeholder{color:rgba(255,255,255,.5);letter-spacing:normal}
.ueb-balken button{padding:7px 14px;border-radius:9px;border:0;background:#fff;
  color:#1e3a5f;font-weight:800;font-size:13px;cursor:pointer}

/* Ankreuzliste im Formular (sichtbare Maßnahmen je Mitarbeiter): mehrspaltig,
   damit auch zwanzig Kurse noch überschaubar bleiben. */
.f-liste{margin-top:6px;border:2px solid var(--line);border-radius:10px;padding:10px 12px;
  max-height:260px;overflow-y:auto;background:#fff}
.f-liste > div > div{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px}
.f-liste label{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.45;
  font-weight:600;color:var(--ink);cursor:pointer;padding:3px 0}
.f-liste input[type=checkbox]{width:22px;height:22px;margin:0;flex:none;
  accent-color:var(--blue-bright);cursor:pointer}