/* ===== Alpasana Work – Design ===== */
:root {
  /* Alpasana-Markenfarben: Blau #1B75BB, Cyan #19B5FE, Navy #14253F */
  --brand-900:#0D1930;   /* Dunkelstes Navy */
  --brand-800:#10476F;
  --brand-700:#14253F;   /* Alpasana Navy */
  --brand-600:#1B75BB;   /* Alpasana Blau: Buttons/Links */
  --brand-500:#3D8FD1;
  --brand-400:#19B5FE;   /* Alpasana Cyan */
  --brand-300:#5FC9FE;   /* Cyan-Highlight hell */
  --brand-50:#F0F8FE;

  --ok:#2e9e5b; --ok-bg:#e7f6ee;
  --warn:#c9820a; --warn-bg:#fdf3e0;
  --danger:#d64545; --danger-bg:#fdecec;
  --info:#0E7FC0; --info-bg:#E8F4FD;
  --violet:#0A85C2; --violet-bg:#EAF6FE;   /* Akzent (Cyan-Blau) */

  --ink:#14253F;
  --muted:#6b7a90;
  --line:#e2e8f0;
  --bg:#f4f7fb;
  --card:#ffffff;
  --radius:12px;
  --shadow:0 1px 3px rgba(20,37,63,.08), 0 6px 20px rgba(20,37,63,.06);
  --sidebar-w:250px;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5;
}
a { color:var(--brand-600); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { color:var(--brand-800); margin:0 0 .5rem; }
h1 { font-size:1.5rem; } h2 { font-size:1.2rem; } h3 { font-size:1rem; }

/* ===== Layout mit Sidebar ===== */
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar-w); background:linear-gradient(180deg,var(--brand-800),var(--brand-900));
  color:#cdd9e8; position:fixed; top:0; bottom:0; left:0; display:flex; flex-direction:column;
  padding:0; z-index:20;
}
.sidebar__brand { display:block; padding:18px 20px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar__logo { display:flex; align-items:flex-end; gap:8px; }
.sidebar__brand img { height:26px; width:auto; display:block; background:none; border-radius:0; padding:0; max-width:none; }
.sidebar__brand b { font-size:11px; line-height:1; font-weight:800; letter-spacing:.06em; color:#fff; padding:0 0 4px 8px; border-left:1px solid rgba(255,255,255,.28); }
.sidebar__claim { display:block; margin-top:5px; color:#fff; font-size:10.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.sidebar__brand small { display:block; margin-top:6px; color:var(--brand-300); font-weight:400; font-size:.72rem; }
.nav { padding:14px 12px; flex:1; overflow-y:auto; }
.nav__label { text-transform:uppercase; font-size:.68rem; letter-spacing:.06em; color:#6f83a0; margin:14px 10px 6px; }
.nav a {
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
  color:#cdd9e8; font-weight:500; margin-bottom:2px; text-decoration:none; font-size:.93rem;
}
.nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.nav a.active { background:var(--brand-600); color:#fff; box-shadow:0 2px 8px rgba(27,117,187,.45); }
.nav a .ic { width:18px; text-align:center; opacity:.9; }
.nav-badge { margin-left:auto; background:#f39c12; color:#fff; border-radius:11px; min-width:20px; text-align:center; padding:1px 7px; font-size:.72rem; font-weight:700; line-height:1.5; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.nav-badge.danger { background:#e74c3c; }
.nav-badge.calm { background:rgba(255,255,255,.16); color:#e8f0fa; box-shadow:none; }
.nav a.active .nav-badge { background:#fff; color:var(--brand-600); }
.sidebar__foot { padding:12px 16px; border-top:1px solid rgba(255,255,255,.08); font-size:.8rem; }
.sidebar__foot .who { color:#fff; font-weight:600; }
.sidebar__foot form { margin-top:8px; }

.main { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-width:0; }
.topbar {
  background:var(--card); border-bottom:1px solid var(--line); padding:14px 26px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10;
}
.topbar h1 { margin:0; font-size:1.25rem; }
.content { padding:26px; max-width:1200px; width:100%; }

/* ===== Cards ===== */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card__head { padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.card__body { padding:20px; }
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* ===== Stat-Kacheln ===== */
.stat { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); }
.stat__label { color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; }
.stat__value { font-size:1.9rem; font-weight:700; color:var(--brand-800); margin-top:4px; }
.stat__sub { color:var(--muted); font-size:.85rem; }
.stat.accent { background:linear-gradient(135deg,var(--brand-600) 0%,var(--brand-400) 45%,var(--violet) 100%); border:0; color:#fff; }
.stat.accent .stat__label, .stat.accent .stat__value, .stat.accent .stat__sub { color:#fff; }

/* ===== Progress ===== */
.progress { height:9px; background:var(--brand-50); border-radius:6px; overflow:hidden; }
.progress > i { display:block; height:100%; background:linear-gradient(90deg,var(--brand-700),var(--brand-400) 55%,var(--violet)); }

/* ===== Badges ===== */
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:.76rem; font-weight:600; }
.badge.ok { background:var(--ok-bg); color:var(--ok); }
.badge.warn { background:var(--warn-bg); color:var(--warn); }
.badge.danger { background:var(--danger-bg); color:var(--danger); }
.badge.info { background:var(--info-bg); color:var(--info); }
.badge.muted { background:#eef1f6; color:var(--muted); }
.badge.prio-urgent { background:var(--danger-bg); color:var(--danger); }
.badge.prio-high { background:var(--warn-bg); color:var(--warn); }
.badge.prio-medium { background:var(--info-bg); color:var(--info); }
.badge.prio-low { background:#eef1f6; color:var(--muted); }

.pill-date.is-overdue { color:var(--danger); font-weight:700; }
.pill-date.is-soon { color:var(--warn); font-weight:600; }
.pill-date.is-ok { color:var(--muted); }

/* ===== Buttons ===== */
.btn {
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:9px;
  border:1px solid transparent; font-weight:600; font-size:.9rem; cursor:pointer; text-decoration:none;
  background:var(--brand-600); color:#fff; transition:.15s;
}
.btn:hover { background:var(--brand-700); text-decoration:none; }
.btn.ghost { background:#fff; color:var(--brand-700); border-color:var(--line); }
.btn.ghost:hover { background:var(--brand-50); }
.btn.ok { background:var(--ok); } .btn.ok:hover { background:#268049; }
.btn.danger { background:var(--danger); } .btn.danger:hover { background:#bb3838; }
.btn.sm { padding:5px 11px; font-size:.8rem; }
.btn.block { width:100%; justify-content:center; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }

/* ===== Forms ===== */
label { display:block; font-weight:600; font-size:.85rem; margin-bottom:5px; color:var(--brand-800); }
input,select,textarea {
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; font-size:.92rem;
  font-family:inherit; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(27,117,187,.18); }
textarea { resize:vertical; min-height:80px; }
.field { margin-bottom:15px; }
.row { display:flex; gap:14px; flex-wrap:wrap; }
.row > .field { flex:1; min-width:140px; }
.hint { color:var(--muted); font-size:.8rem; margin-top:4px; }
pre.log { background:#0f1130; color:#c9d1ff; border-radius:8px; padding:10px 12px;
  font-size:.72rem; line-height:1.5; overflow:auto; max-height:220px; white-space:pre-wrap; word-break:break-all; }

/* ===== Tables ===== */
table.tbl { width:100%; border-collapse:collapse; }
.tbl th { text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:10px 12px; border-bottom:2px solid var(--line); }
.tbl td { padding:11px 12px; border-bottom:1px solid var(--line); }
.tbl tr:hover td { background:var(--brand-50); }

/* Zeilen-Aktionsmenü (reines CSS via <details>, CSP-sicher) */
.row-menu { position:relative; display:inline-block; }
.row-menu > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border:1px solid var(--line); border-radius:8px; font-size:.8rem; font-weight:600;
  color:var(--brand-800); background:#fff; white-space:nowrap; user-select:none; }
.row-menu > summary::-webkit-details-marker { display:none; }
.row-menu > summary::after { content:"▾"; font-size:.7rem; color:var(--muted); }
.row-menu[open] > summary { border-color:var(--brand-400); background:var(--brand-50); }
.row-menu[open] > summary::after { content:"▴"; }
.row-menu__list { position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:190px;
  background:#fff; border:1px solid var(--line); border-radius:11px; box-shadow:0 14px 34px rgba(20,37,63,.18);
  padding:6px; display:flex; flex-direction:column; gap:1px; text-align:left; }
.row-menu__list form { display:block; margin:0; }
.row-menu__list a, .row-menu__list button { width:100%; text-align:left; justify-content:flex-start;
  border:0; background:none; padding:9px 11px; border-radius:7px; font-size:.83rem; font-weight:500;
  color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:8px; line-height:1.2; }
.row-menu__list a:hover, .row-menu__list button:hover { background:var(--brand-50); }
.row-menu__list button.danger { color:var(--danger); }
.row-menu__list button.danger:hover { background:#fdecec; }
.row-menu__sep { height:1px; background:var(--line); margin:5px 2px; }
.row-menu__label { padding:6px 11px 2px; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.row-menu__select { width:100%; margin:0 0 4px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; font-size:.82rem; background:#fff; color:var(--ink); }

/* Waagrecht scrollbarer Tabellen-Wrapper (breite Reports auf schmalen Screens) */
.tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll > table { min-width:640px; }

/* ===== Kanban ===== */
.board { display:grid; grid-template-columns:repeat(5,minmax(200px,1fr)); gap:14px; overflow-x:auto; }
.col { background:#eef2f7; border-radius:12px; padding:10px; min-height:120px; }
.col__head { font-size:.78rem; font-weight:700; text-transform:uppercase; color:var(--brand-800); padding:4px 6px 10px; display:flex; justify-content:space-between; }
.col__head .cnt { background:#fff; border-radius:12px; padding:0 8px; color:var(--muted); }
.tcard { background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px; margin-bottom:9px; box-shadow:0 1px 2px rgba(20,37,63,.05); }
.tcard a { color:var(--brand-800); font-weight:600; }
.tcard .meta { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center; font-size:.75rem; color:var(--muted); }
.tcard .assignee { display:inline-flex; align-items:center; gap:5px; }
.avatar { width:22px; height:22px; border-radius:50%; background:var(--brand-600); color:#fff; font-size:.7rem; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }

/* ===== Flash ===== */
.flash { padding:12px 16px; border-radius:10px; margin-bottom:14px; font-size:.9rem; border:1px solid; }
.flash.success { background:var(--ok-bg); color:#1c6b3f; border-color:#bfe5cd; }
.flash.error { background:var(--danger-bg); color:#a53030; border-color:#f3c9c9; }
.flash.warn { background:var(--warn-bg); color:#8a5a00; border-color:#f0dca8; }

/* ===== Rich-Text-Editor ===== */
.rte { border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }
.rte-bar { display:flex; flex-wrap:wrap; gap:2px; padding:6px; background:#f7f9fc; border-bottom:1px solid var(--line); }
.rte-btn { width:auto; min-width:30px; padding:4px 9px; font-size:.85rem; line-height:1.2; background:#fff; border:1px solid var(--line); border-radius:6px; color:var(--ink); cursor:pointer; }
.rte-btn:hover { background:var(--brand-50); border-color:var(--brand-500); }
.rte-area { min-height:120px; max-height:420px; overflow-y:auto; padding:11px 13px; font-size:.92rem; line-height:1.6; outline:none; }
.rte-area:empty:before { content:attr(data-placeholder); color:var(--muted); }
.rte-area.rte-invalid { box-shadow:0 0 0 2px var(--danger) inset; }
.rte-area p { margin:0 0 8px; }
.rte-area h3 { margin:6px 0; font-size:1.05rem; }
.rte-area ul, .rte-area ol { padding-left:22px; margin:6px 0; }
.rte-area a { color:var(--brand-600); }
/* Ausgabe von Rich-Text im Fliesstext */
.richtext p { margin:0 0 8px; } .richtext p:last-child { margin-bottom:0; }
.richtext h1 { font-size:1.25rem; margin:14px 0 6px; color:var(--brand-800); }
.richtext h2 { font-size:1.12rem; margin:12px 0 5px; color:var(--brand-700); }
.richtext h3 { font-size:1.05rem; margin:8px 0 4px; }
.richtext h4 { font-size:.98rem; margin:8px 0 4px; }
.richtext h1:first-child, .richtext h2:first-child, .richtext h3:first-child { margin-top:0; }
.richtext ul, .richtext ol { padding-left:22px; margin:6px 0; }
.richtext li { margin:2px 0; }
.richtext hr { border:0; border-top:1px solid var(--line, #e5e7eb); margin:12px 0; }
.richtext a { color:var(--brand-600); }
.richtext strong, .richtext b { color:var(--ink); }

/* ===== Auth / centered ===== */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-600)); }
.auth-card { background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); width:100%; max-width:420px; padding:34px; }
.auth-card .logo { display:flex; flex-direction:column; align-items:center; margin-bottom:18px; }
.auth-card .logo .logo__row { display:flex; align-items:flex-end; gap:8px; }
.auth-card .logo img { height:36px; width:auto; max-width:none; }
.auth-card .logo b { font-size:13px; line-height:1; font-weight:800; letter-spacing:.06em; color:var(--brand-700); padding:0 0 6px 8px; border-left:1px solid #CBD5E1; }
.auth-card .logo .logo__claim { margin-top:6px; color:var(--brand-700); font-size:12px; font-weight:600; letter-spacing:.01em; }
@media(max-width:360px){ .auth-card .logo img { height:30px; } .auth-card .logo b { font-size:12px; padding-bottom:5px; } .auth-card .logo .logo__claim { font-size:11px; } }
.auth-card h1 { text-align:center; font-size:1.4rem; }
.auth-card .sub { text-align:center; color:var(--muted); margin-bottom:22px; font-size:.9rem; }

/* ===== Utility ===== */
.flex { display:flex; } .between { justify-content:space-between; } .center { align-items:center; }
.gap { gap:12px; } .wrap { flex-wrap:wrap; }
.muted { color:var(--muted); } .small { font-size:.85rem; }
.mt { margin-top:16px; } .mb { margin-bottom:16px; } .mt-sm{margin-top:8px;}
.right { text-align:right; } .nowrap{white-space:nowrap;}
.tag-type { font-size:.72rem; color:var(--muted); background:#eef1f6; padding:2px 8px; border-radius:6px; }
.divider { height:1px; background:var(--line); margin:16px 0; }
.empty { text-align:center; color:var(--muted); padding:30px; }
.kv { display:flex; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.kv b { min-width:150px; color:var(--muted); font-weight:600; }

/* Calendar */
/* minmax(0,1fr) statt 1fr: sonst zwingt ein langer Termintitel (nowrap) seine Spalte
   auf Inhaltsbreite – die Wochentage werden unterschiedlich breit und Sa/So laufen raus. */
.cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.cal .dow { font-size:.72rem; text-transform:uppercase; color:var(--muted); text-align:center; padding:4px 4px 6px; font-weight:700; letter-spacing:.04em; }
.cal .dow.we { color:#a3adbd; }
.cal .day { background:#fff; border:1px solid var(--line); border-radius:10px; min-height:104px; padding:6px; font-size:.78rem;
  display:flex; flex-direction:column; gap:2px; min-width:0; overflow:hidden; }
.cal .day.other { background:#f7f9fc; border-style:dashed; }
.cal .day.we { background:#fafbfd; }
.cal .day.today { border-color:var(--brand-500); box-shadow:0 0 0 2px rgba(27,117,187,.18); }
.cal .day .num { font-weight:700; color:var(--brand-800); font-size:.82rem; line-height:1.5; }
/* Heutiger Tag: Zahl als gefüllter Kreis – auf einen Blick auffindbar */
.cal .day.today .num { background:var(--brand-500); color:#fff; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.76rem; }
.cal .ev { display:block; border-radius:6px; padding:2px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-decoration:none; font-size:.74rem; line-height:1.55; border-left:3px solid transparent; transition:filter .12s;
  min-width:0; max-width:100%; }
.cal a.ev:hover { filter:brightness(.94); }
.cal .ev.termin   { background:var(--brand-50); color:var(--brand-700); border-left-color:var(--brand-500); }
.cal .ev.meeting  { background:#eef7ee; color:#1f7a3d; border-left-color:#2f9e56; }
.cal .ev.deadline { background:var(--danger-bg); color:var(--danger); border-left-color:var(--danger); }
.cal .ev.other    { background:#f2f4f8; color:#475569; border-left-color:#c3ccda; }   /* --muted-2 existiert nur in site.css, die die Konsole nicht laedt */
.cal .ev.more     { background:transparent; color:var(--muted); font-weight:600; padding-left:3px; }
/* Legende über dem Raster */
.cal-legend { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); }
.cal-legend .dot { width:9px; height:9px; border-radius:3px; display:inline-block; }
.cal-legend .dot.termin { background:var(--brand-500); }
.cal-legend .dot.meeting { background:#2f9e56; }
.cal-legend .dot.deadline { background:var(--danger); }
@media (max-width:760px) {
  .cal { gap:3px; }
  .cal .day { min-height:74px; padding:4px; border-radius:7px; }
  .cal .ev { font-size:.66rem; padding:1px 4px; }
  .cal .dow { font-size:.64rem; }
}

/* ===== Notizen ===== */
.note { border:1px solid var(--line); border-radius:10px; padding:11px 13px; margin-bottom:10px; background:#fff; }
.note--pin { border-color:#f0d38a; background:#fffdf5; }
.note--company { border-left:3px solid var(--brand-500); }
.note__body { white-space:pre-wrap; font-size:.92rem; }
.note__foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; gap:10px; }
.linkbtn { background:none; border:0; padding:0; width:auto; color:var(--muted); font-size:.8rem; cursor:pointer; }
.linkbtn:hover { color:var(--brand-700); text-decoration:underline; }
.linkbtn.danger:hover { color:var(--danger); }

/* ===== Modal ===== */
.modal { display:none; position:fixed; inset:0; background:rgba(14,42,71,.55); z-index:50;
  align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; }
.modal__box { background:#fff; border-radius:14px; width:100%; max-width:600px; box-shadow:0 30px 70px rgba(0,0,0,.35); }
.modal__head { padding:16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal__head h3 { margin:0; }
.modal__body { padding:20px; }
.modal__x { background:none; border:0; font-size:1.4rem; cursor:pointer; color:var(--muted); width:auto; padding:0; }

@media(max-width:820px){
  .sidebar { transform:translateX(-100%); transition:.2s; }
  .sidebar.open { transform:none; }
  .main { margin-left:0; }
  .menu-toggle { display:inline-flex !important; }
}
.menu-toggle { display:none; background:none; border:0; font-size:1.5rem; cursor:pointer; color:var(--brand-800); width:auto; padding:0; }

/* ===== Druck (Monatsreport u.a.) ===== */
@media print {
  .sidebar, .topbar, .no-print, .flash, .menu-toggle { display:none !important; }
  .print-title { display:block !important; margin-bottom:16px; }
  .main, .content, body { background:#fff !important; margin:0 !important; padding:0 !important; }
  .card { box-shadow:none !important; border:1px solid #ccc !important; break-inside:avoid; }
  a { color:#000 !important; text-decoration:none !important; }
}

/* ===== Prompt-Helfer (Firmen-Anfrage) ===== */
.prompt-help { border:1px solid var(--line); border-radius:10px; margin-top:10px; background:var(--brand-50); }
.prompt-help > summary { cursor:pointer; padding:12px 14px; font-weight:600; color:var(--brand-800); list-style:none; }
.prompt-help > summary::-webkit-details-marker { display:none; }
.prompt-help > summary::before { content:"▸ "; color:var(--brand-600); }
.prompt-help[open] > summary::before { content:"▾ "; }
.prompt-help[open] > summary { border-bottom:1px solid var(--line); }
.prompt-help .ph-body { padding:14px; }
.prompt-box { width:100%; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem; line-height:1.5; background:#fff; white-space:pre; }

/* ===== Testmodus / Impersonation ===== */
.impersonation-bar { background:#b45309; color:#fff; padding:10px 16px; border-radius:8px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.9rem;
  box-shadow:0 2px 8px rgba(180,83,9,.30); }
.impersonation-bar form { margin:0; }
.impersonation-bar button { background:#fff; color:#b45309; border:0; border-radius:6px; padding:5px 13px; font-weight:700; font-size:.82rem; cursor:pointer; }
.impersonation-bar button:hover { background:#fde8cf; }

/* =====================================================================
   ALPASANA HAUSDESIGN – nur Konsole (app.css wird ausschliesslich von
   den Layouts app/admin/portal/mentor/blank geladen; die oeffentlichen
   Seiten nutzen site.css und bleiben unberuehrt).
   Quelle der Tokens: https://www.alpasana.ch/assets/alpasana-design.css
   Kontrast auf Weiss (WCAG AA = 4.5:1 fuer Text):
     #269CD9 = 3.07:1  -> NUR fuer Flaechen/Verlaeufe, nie fuer Text
     #1C7CB0 = 4.61:1  -> Links, Buttons, farbiger Text
     #232434 = 15.3:1  -> Ueberschriften
     #6E7077 = 4.94:1  -> Fliesstext gedaempft
   ===================================================================== */
:root {
  /* Marke */
  --alp-blue:#269CD9;
  --alp-blue-bright:#2EA3F2;
  --alp-blue-dark:#1C7CB0;
  --alp-dark:#232434;
  --alp-dark-2:#2C2D40;
  --alp-heading:#232434;
  --alp-text:#6E7077;
  --alp-muted:#9AA0A6;
  --alp-bg:#FFFFFF;
  --alp-bg-soft:#F5F7FA;
  --alp-border:#E6E9EF;
  /* Typografie – Schriftdateien werden aktuell nicht geladen (CSP), die
     Stapel greifen auf Segoe UI zurueck, bis die Fonts lokal liegen. */
  --alp-font-head:'Rajdhani','Segoe UI',sans-serif;
  --alp-font-body:'Rubik','Segoe UI',Arial,sans-serif;
  --alp-font-display:'Squada One','Rajdhani',sans-serif;
  /* Form & Effekte */
  --alp-radius:6px;
  --alp-radius-lg:14px;
  --alp-shadow:0 10px 30px rgba(35,36,52,.10);
  --alp-shadow-sm:0 4px 14px rgba(35,36,52,.07);

  /* Bestehende Tokens auf das Hausdesign gemappt – dadurch uebernehmen
     alle vorhandenen Regeln die Alpasana-Farben, ohne sie anzufassen. */
  --brand-900:var(--alp-dark);
  --brand-800:var(--alp-dark-2);
  --brand-700:var(--alp-dark);
  --brand-600:var(--alp-blue-dark);
  --brand-500:var(--alp-blue);
  --brand-400:var(--alp-blue-bright);
  --brand-300:var(--alp-blue-bright);
  --brand-50:var(--alp-bg-soft);
  --ink:var(--alp-heading);
  --muted:var(--alp-text);
  --line:var(--alp-border);
  --bg:var(--alp-bg-soft);
  --card:var(--alp-bg);
  --radius:var(--alp-radius-lg);
  --shadow:var(--alp-shadow-sm);
}

body { font-family:var(--alp-font-body); }
h1,h2,h3 { font-family:var(--alp-font-head); color:var(--alp-heading); letter-spacing:.01em; }
/* Kennzahl darf nicht zwischen Wert und Einheit umbrechen ("18.50" / "h"). */
.stat__value { font-family:var(--alp-font-head); white-space:nowrap; font-size:1.75rem; }
.btn,.badge,.nav a { font-family:var(--alp-font-body); }
.btn { border-radius:var(--alp-radius); }
input,select,textarea { border-radius:var(--alp-radius); }

/* Verlaufskachel: endet bei #1C7CB0, damit weisse Schrift ueberall
   mindestens 4.61:1 erreicht (vorher lief der Verlauf ins helle Cyan). */
.stat.accent { background:linear-gradient(135deg,var(--alp-dark) 0%,var(--alp-blue-dark) 100%); }
.progress > i { background:linear-gradient(90deg,var(--alp-blue-dark),var(--alp-blue)); }

/* Navigationsgruppen: #6f83a0 erreichte auf dunklem Grund nur 3.96:1,
   #9AA0A6 erreicht 5.79:1. */
.nav__label { color:var(--alp-muted); }

/* Checkboxen/Radios erben sonst die Textfeld-Regel (width:100%) aus
   Zeile 131 und werden ueber die volle Breite gezogen. */
input[type="checkbox"],input[type="radio"] {
  width:auto; padding:0; border-radius:3px; accent-color:var(--alp-blue-dark);
}

/* Lange Schluessel, IDs und URLs duerfen die Karte nicht sprengen –
   min-width:0 allein reicht im Flex-Container nicht aus. */
.copyline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.copyline > code, .copyline > .copyval {
  flex:1 1 220px; min-width:0; overflow-wrap:anywhere; word-break:break-word;
  background:var(--alp-bg-soft); border:1px solid var(--alp-border);
  border-radius:var(--alp-radius); padding:6px 9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.82rem;
}
.card__body code, .tbl td code { overflow-wrap:anywhere; }

/* Abschnittsgruppen mit Sprungnavigation */
.jump { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.jump a {
  padding:6px 13px; border-radius:20px; font-size:.85rem; font-weight:600;
  background:var(--alp-bg); border:1px solid var(--alp-border); color:var(--alp-blue-dark);
}
.jump a:hover { background:var(--alp-bg-soft); text-decoration:none; }
.sect { scroll-margin-top:78px; }            /* sticky Topbar nicht ueberdecken */
.sect__head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:26px 0 12px; }
.sect__head h2 { margin:0; font-size:1.15rem; }
.sect:first-of-type .sect__head { margin-top:0; }
.sect__hint { color:var(--alp-text); font-size:.85rem; }

/* Eingeklappter Bereich fuer selten Gebrauchtes */
.fold { border:1px solid var(--alp-border); border-radius:var(--alp-radius-lg); background:var(--alp-bg); }
.fold > summary { cursor:pointer; padding:14px 18px; font-weight:600; color:var(--alp-heading); list-style:none; }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::before { content:"\25B8  "; color:var(--alp-blue-dark); }
.fold[open] > summary::before { content:"\25BE  "; }
.fold[open] > summary { border-bottom:1px solid var(--alp-border); }
.fold__body { padding:18px; }

/* Erklaertexte auf Karten */
.explain { color:var(--alp-text); font-size:.85rem; margin:0 0 12px; }
.explain strong { color:var(--alp-heading); }

/* Rueckmeldung im Fachgespraechssimulator: die drei Teile nebeneinander,
   damit "gut / fehlt / Tipp" auf einen Blick vergleichbar sind. */
.fbgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; margin-bottom:12px; }
.fbitem { border:1px solid var(--alp-border); border-radius:var(--alp-radius); padding:10px 12px; min-width:0; }
.fbitem > b { display:block; font-size:.78rem; margin-bottom:4px; }
.fbitem > span { display:block; font-size:.85rem; color:var(--alp-text); overflow-wrap:anywhere; }
.fbitem--ok  { border-left:3px solid var(--ok); }
.fbitem--ok  > b { color:var(--ok); }
.fbitem--gap { border-left:3px solid var(--warn); }
.fbitem--gap > b { color:var(--warn); }
.fbitem--tip { border-left:3px solid var(--alp-blue-dark); background:var(--alp-bg-soft); }
.fbitem--tip > b { color:var(--alp-blue-dark); }
.modelanswer > summary { color:var(--alp-blue-dark); }
@media print { .fbgrid { grid-template-columns:1fr; } }

/* Umschalter Online / Vor Ort */
.modeswitch { display:flex; flex-wrap:wrap; gap:8px; }
.modeswitch > label {
  display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer; font-weight:600;
  padding:9px 14px; border:1px solid var(--alp-border); border-radius:var(--alp-radius);
  background:var(--alp-bg); color:var(--alp-heading); font-size:.9rem;
}
.modeswitch > label:hover { background:var(--alp-bg-soft); }
.modeswitch input[type="radio"] { margin:0; }
.modeswitch > label:has(input:checked) {
  border-color:var(--alp-blue-dark); background:var(--alp-bg-soft); box-shadow:inset 0 0 0 1px var(--alp-blue-dark);
}
/* Feld zum jeweils anderen Modus ausblenden (per JS gesetzt; ohne JS bleibt
   alles sichtbar und beide Felder sind bedienbar). */
.field[data-mode].is-hidden { display:none; }

/* Kompakte Aufklapper – fuer Listen mit vielen Eintraegen untereinander,
   wo die grosse Variante nur Platz frisst. */
.fold--sm { border-radius:var(--alp-radius); margin-bottom:6px; }
.fold--sm > summary { padding:8px 12px; font-size:.92rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fold--sm > .fold__body { padding:10px 12px 12px; }
.fold--sm .badge { font-size:.72rem; }

/* Lange Projektbeschreibung: gekuerzt mit Ausblendung, per Knopf ausklappbar.
   Ohne das schiebt ein langer Auftragstext die Aufgaben weit nach unten. */
.desc { position:relative; }
.desc--clamped { max-height:300px; overflow:hidden; }
.desc--clamped::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:70px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--alp-bg));
}
.desc.is-open { max-height:none; overflow:visible; }
.desc.is-open::after { display:none; }
@media print { .desc--clamped { max-height:none !important; overflow:visible !important; }
  .desc--clamped::after { display:none !important; } }

/* ===== Projektliste: kompakte Zeilen statt hoher Karten =====
   Die Karten im 3er-Raster waren unterschiedlich hoch (optionale Beschreibung,
   Badges, Bearbeiterliste) – das zerriss das Raster. Zeilen haben konstante
   Hoehe, dadurch lassen sich Status, Termin und Fortschritt spaltenweise
   vergleichen. */
.filterbar { background:var(--alp-bg); border:1px solid var(--alp-border); border-radius:var(--alp-radius-lg);
  padding:12px 14px; margin-bottom:16px; box-shadow:var(--alp-shadow-sm); }
.filterbar__row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.filterbar__row + .filterbar__row { margin-top:10px; padding-top:10px; border-top:1px solid var(--alp-border); }
.filterbar__label { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--alp-muted); font-weight:700; min-width:76px; }

/* Aktiver Filter war bisher unsichtbar: .active hatte nur fuer die Navigation
   eine Regel, nicht fuer Buttons. */
.btn.ghost.active { background:var(--alp-blue-dark); color:#fff; border-color:var(--alp-blue-dark); }
.btn.ghost.active:hover { background:var(--alp-dark); }

.prow { display:grid; grid-template-columns:minmax(0,1fr) 150px 128px auto; gap:14px;
  align-items:center; padding:13px 18px; border-bottom:1px solid var(--alp-border); }
.prow:last-child { border-bottom:0; }
.prow:hover { background:var(--alp-bg-soft); }
.prow.is-done { opacity:.7; }
.prow__main { min-width:0; }
.prow__title { display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-width:0; }
.prow__title a { font-weight:600; overflow-wrap:anywhere; }
.prow__sub { color:var(--alp-text); font-size:.82rem; margin-top:3px; overflow-wrap:anywhere; }
.prow__prog { min-width:0; }
.prow__due { text-align:right; }
.prow__act { display:flex; align-items:center; gap:7px; justify-content:flex-end; }
.prow__act form { margin:0; }

@media (max-width:900px) {
  .prow { grid-template-columns:1fr; gap:9px; padding:14px; }
  .prow__due, .prow__act { text-align:left; justify-content:flex-start; }
  .filterbar__label { min-width:100%; }
}

/* =====================================================================
   DRUCK / PDF
   Der Browser setzt von sich aus eine Kopfzeile (Seitentitel) und eine
   Fusszeile (URL, Datum) in den Seitenrand. Sie verschwinden nur, wenn
   der Seitenrand null ist – die Raender bringt darum das Dokument selbst
   mit (.content). Wer sie doch will, aktiviert sie im Druckdialog.
   ===================================================================== */
@page { size:A4 portrait; margin:0; }

@media print {
  body { background:#fff !important; font-size:10.5pt; line-height:1.45; color:#1a1a1a; }
  .main { margin:0 !important; }
  .content { padding:15mm 14mm 18mm !important; max-width:none !important; }

  /* Dokumentkopf: nur im Druck, einmal zuoberst */
  .print-head { display:block !important; border-bottom:2px solid var(--alp-blue-dark);
    padding-bottom:7mm; margin-bottom:8mm; }
  .print-head__row { display:flex; justify-content:space-between; align-items:flex-end; gap:10mm; }
  .print-head h1 { font-size:19pt; margin:0 0 2mm; }
  .print-head .sub { font-size:9.5pt; color:#444; }
  .print-head .org { font-size:9pt; color:#444; text-align:right; white-space:nowrap; }

  /* Karten werden zu Abschnitten: keine Rahmen, kein Schatten, kein Umbruch mittendrin */
  .card { border:0 !important; box-shadow:none !important; border-radius:0 !important;
    break-inside:avoid; margin-bottom:7mm !important; background:none !important; }
  .card__head { padding:0 0 2mm !important; margin-bottom:3mm; border-bottom:1px solid #9aa0a6 !important; }
  .card__body { padding:0 !important; }
  h1,h2,h3 { break-after:avoid; color:#000; }
  h1 { font-size:17pt; } h2 { font-size:12.5pt; } h3 { font-size:11pt; }

  /* Kennzahlen: der Farbverlauf mit weisser Schrift wird im Druck unlesbar */
  .grid-4 { grid-template-columns:repeat(4,1fr) !important; gap:4mm !important; }
  /* Zweispalter bewusst stapeln: auf A4 blieben je 85 mm, das quetscht
     Fliesstext wie die Beurteilungen unleserlich zusammen. */
  .grid-2, .grid-3 { grid-template-columns:1fr !important; gap:5mm !important; }
  .stat { border:1px solid #9aa0a6 !important; box-shadow:none !important; padding:3mm 4mm !important;
    border-radius:0 !important; break-inside:avoid; display:flex; flex-direction:column; }
  .stat.accent, .stat.accent .stat__label, .stat.accent .stat__value, .stat.accent .stat__sub {
    background:#fff !important; color:#000 !important; }
  .stat.accent { border:2px solid var(--alp-blue-dark) !important; }
  /* Wert unten buendig, damit die vier Kacheln trotz unterschiedlich langer
     Beschriftungen auf einer Linie stehen */
  .stat__label { font-size:7.5pt !important; color:#444 !important; letter-spacing:.03em; }
  .stat__value { font-size:15pt !important; margin-top:auto !important; }
  .stat__sub { font-size:8pt !important; color:#444 !important; }

  /* Tabellen: Kopfzeile auf jeder Seite wiederholen, Zeilen nicht zerreissen */
  table.tbl { break-inside:auto; }
  .tbl thead { display:table-header-group; }
  .tbl tfoot { display:table-row-group; }
  .tbl tr { break-inside:avoid; break-after:auto; }
  .tbl th { color:#000 !important; border-bottom:1px solid #333 !important; padding:2mm 2mm !important; }
  .tbl td { padding:1.8mm 2mm !important; border-bottom:1px solid #d6dae1 !important; }
  .tbl tr:hover td { background:none !important; }
  .tbl-scroll { overflow:visible !important; }
  .tbl-scroll > table { min-width:0 !important; }

  /* Balken und Abzeichen ohne Hintergrundfarben lesbar halten */
  .progress { border:1px solid #9aa0a6; height:4mm; border-radius:0; }
  .progress > i { background:var(--alp-blue-dark) !important; }
  .badge { border:1px solid #9aa0a6; background:none !important; color:#000 !important; padding:0.5mm 2mm; }
  .divider { border-top:1px solid #d6dae1; }
  .hint, .muted, .small { color:#444 !important; }

  /* Bildschirmbedienung raus */
  .no-print, .row-menu, .modal, .filterbar, .jump, .sect__hint { display:none !important; }
}

/* Druck: Sprungnavigation weg, aber zugeklappte Aufklapper muessen im PDF
   sichtbar sein – sonst fehlt der Inhalt. content-visibility deckt die
   neueren Browser ab, in denen display allein nicht genuegt. */
@media print {
  .jump, .sect__hint { display:none !important; }
  .fold { border:1px solid #ccc !important; break-inside:avoid; }
  .fold > summary { font-weight:700; }
  .fold > .fold__body { display:block !important; content-visibility:visible !important; }
  .fold::details-content { content-visibility:visible !important; block-size:auto !important; }
  .sect__head { break-after:avoid; }
}

/* Mitteilungen auf der Intern-Seite: eingeklappte Liste, nur die neueste offen.
   Vorher standen alle Meldungen in voller Laenge untereinander und schoben den
   Rest der Seite weit nach unten. */
.postitem { margin-bottom:6px; }
.postitem__title { font-weight:600; color:var(--alp-heading); }
.postitem__meta { margin-left:auto; font-weight:400; white-space:nowrap; }
@media (max-width:640px) {
  .postitem__meta { margin-left:0; white-space:normal; }
}