/* =========================================================================
   VERWALTUNG4U – Design-System
   Farben kommen als CSS-Variablen aus dem Erscheinungsbild (lib/practice.php,
   brand_css_vars). Hier stehen nur Vorgaben, falls die Variablen fehlen.
   ========================================================================= */
:root{
  --brand:#8cbe3d; --brand-600:#7ba735; --brand-700:#62852a; --brand-800:#48621f;
  --brand-200:#cfe5ad; --brand-100:#e8f2d8; --brand-050:#f4f9ec; --brand-rgb:140,190,61;
  --mint-050:#f6faf1; --mint-100:#ecf5e2; --mint-200:#d6e9c0;
  --accent:#2f9e8f; --accent-700:#216e64; --accent-100:#d5ece9; --accent-rgb:47,158,143;
  --bg-tint:#f8fbf3;
  --ink:#24272a; --ink-2:#43474b; --muted:#77797c; --line:#e5e6e8; --line-2:#d7d8db;
  --neutral-050:#f4f5f6; --neutral-100:#eceef0; --neutral-400:#a7aaae; --tone-rgb:30,32,36; --mid-rgb:110,114,118;
  --white:#fff; --danger:#d0462b; --danger-100:#fbe6e1; --amber:#c88a0e; --amber-100:#fcf1d6;
  --info:#2f6fbf; --info-100:#e3edfa; --ok:#2f9e44; --ok-100:#e2f4e5;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:18px; --radius-sm:12px;
  /* Steuerelemente: ein Maß für Felder, Auswahllisten, Buttons, Umschalter */
  --ctl-h:44px; --ctl-h-sm:36px; --ctl-r:12px; --ctl-px:14px; --ctl-fs:14.5px;
  --shadow-sm:0 1px 2px rgba(var(--tone-rgb),.05),0 2px 8px rgba(var(--tone-rgb),.04);
  --shadow:0 2px 6px rgba(var(--tone-rgb),.04),0 12px 32px rgba(var(--tone-rgb),.08);
  --shadow-lg:0 30px 80px rgba(var(--tone-rgb),.22);
  --ease:cubic-bezier(.2,.8,.2,1);
  --sidebar:272px;
}
/* Hausschrift-Option „Manrope“ (lokal ausgeliefert, keine externen Server) */
@font-face{ font-family:'Manrope'; src:url('fonts/manrope/Manrope-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Manrope'; src:url('fonts/manrope/Manrope-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Manrope'; src:url('fonts/manrope/Manrope-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face{ font-family:'Manrope'; src:url('fonts/manrope/Manrope-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Manrope'; src:url('fonts/manrope/Manrope-ExtraBold.woff2') format('woff2'); font-weight:800 900; font-display:swap; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
[hidden]{ display:none !important; }
body{
  font-family:var(--font); color:var(--ink); font-size:15px; line-height:1.5;
  background:
    radial-gradient(1100px 620px at 105% -12%, rgba(var(--brand-rgb),.13), transparent 60%),
    radial-gradient(900px 520px at -8% 108%, rgba(var(--accent-rgb),.10), transparent 58%),
    var(--bg-tint);
  background-attachment:fixed; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ letter-spacing:-.01em; }
.ic{ flex:0 0 auto; vertical-align:middle; }
::selection{ background:rgba(var(--brand-rgb),.25); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; position:relative;
  border:1px solid transparent; border-radius:12px; cursor:pointer; font:inherit;
  font-size:14.5px; font-weight:650; padding:0 18px; min-height:var(--ctl-h); line-height:1.1; white-space:nowrap;
  transition:transform .12s var(--ease), background .18s, box-shadow .18s, border-color .18s, color .18s;
  text-decoration:none !important; color:var(--ink); background:#fff;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn:disabled{ opacity:.55; cursor:default; transform:none; }
.btn-sm{ padding:0 13px; min-height:var(--ctl-h-sm); font-size:13.5px; border-radius:10px; }
.btn-lg{ padding:0 24px; min-height:52px; font-size:16px; border-radius:14px; }
.btn-block{ width:100%; }
.btn-icon{ padding:0; min-width:var(--ctl-h); border-radius:var(--ctl-r); }
.btn-icon.btn-sm{ min-width:var(--ctl-h-sm); border-radius:10px; }
.btn-primary{ background:linear-gradient(180deg,var(--brand),var(--brand-600)); color:#fff;
  box-shadow:0 6px 18px rgba(var(--brand-rgb),.38), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover{ box-shadow:0 10px 26px rgba(var(--brand-rgb),.45), inset 0 1px 0 rgba(255,255,255,.25); transform:translateY(-1px); }
.btn-secondary{ background:#fff; color:var(--brand-700); border-color:var(--mint-200); }
.btn-secondary:hover{ background:var(--brand-050); border-color:var(--brand-200); }
.btn-ghost{ background:transparent; color:var(--ink-2); border-color:var(--line); }
.btn-ghost:hover{ background:#fff; border-color:var(--line-2); }
.btn-soft{ background:var(--brand-050); color:var(--brand-700); }
.btn-soft:hover{ background:var(--brand-100); }
.btn-danger{ background:transparent; color:var(--danger); border-color:#efd3cc; }
.btn-danger:hover{ background:var(--danger-100); }
.btn-danger-solid{ background:var(--danger); color:#fff; }
.btn-ok{ background:linear-gradient(180deg,#3cb357,#2f9e44); color:#fff; box-shadow:0 6px 16px rgba(47,158,68,.35); }
.btn-ai{
  color:#fff; border:0; background:linear-gradient(120deg,var(--brand) 0%,var(--accent) 55%,#7a5cf0 110%);
  background-size:200% 100%; box-shadow:0 6px 20px rgba(var(--accent-rgb),.35); overflow:hidden;
  animation:aiShift 6s ease infinite;
}
.btn-ai::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%); transform:translateX(-120%); animation:shine 3.2s ease-in-out infinite; }
.btn-ai:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(var(--accent-rgb),.45); }
.btn-ai .ic{ animation:twinkle 2.4s ease-in-out infinite; }
.btn.is-busy{ pointer-events:none; }
@keyframes aiShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
@keyframes shine{ 0%,60%{ transform:translateX(-120%); } 100%{ transform:translateX(120%); } }
@keyframes twinkle{ 0%,100%{ transform:scale(1) rotate(0); opacity:1; } 50%{ transform:scale(1.18) rotate(12deg); opacity:.85; } }

.spin{ width:16px; height:16px; border-radius:50%; display:inline-block; flex:0 0 auto;
  background:conic-gradient(from 90deg,transparent 0%,currentColor 90%);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5px),#000 0); mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5px),#000 0);
  animation:spin .8s linear infinite; }
.spin.lg{ width:46px; height:46px; color:var(--brand);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0); mask:radial-gradient(farthest-side,#0000 calc(100% - 5px),#000 0); }
@keyframes spin{ to{ transform:rotate(1turn); } }

/* ---------- App-Rahmen ---------- */
.shell{ display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh; }
.sidebar{
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:6px;
  padding:18px 14px; background:rgba(255,255,255,.78); backdrop-filter:saturate(180%) blur(16px);
  border-right:1px solid var(--line); z-index:30; overflow-y:auto;
}
/* Bei wenig Höhe scrollt die Leiste, statt Einträge zu stauchen */
.sidebar > *{ flex-shrink:0; }
.sb-brand{ display:flex; align-items:center; gap:12px; padding:6px 8px 14px; }
.sb-logo{ width:48px; height:48px; border-radius:14px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:var(--shadow-sm); flex:0 0 auto; }
.sb-logo img{ max-width:88%; max-height:88%; object-fit:contain; }
.sb-brand.wide-logo{ flex-direction:column; align-items:stretch; gap:10px; }
.sb-brand.wide-logo .sb-logo{ width:100%; height:auto; padding:10px 12px; border-radius:16px; }
.sb-brand.wide-logo .sb-logo img{ max-width:100%; max-height:58px; }
.sb-name{ font-weight:850; font-size:17px; letter-spacing:.2px; line-height:1.1;
  background:linear-gradient(90deg,var(--brand-700),var(--accent-700)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sb-sub{ font-size:11.5px; color:var(--muted); line-height:1.25; margin-top:3px; }
.sb-ai{ margin:4px 4px 10px; justify-content:flex-start; padding:13px 16px; border-radius:14px; font-size:15px; }
.sb-ai small{ margin-left:auto; font-size:10.5px; font-weight:700; background:rgba(255,255,255,.22); padding:3px 7px; border-radius:999px; }
.nav-group{ font-size:11px; font-weight:750; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; padding:12px 12px 4px; }
.nav-item{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:var(--ink-2);
  font-weight:600; font-size:14.5px; text-decoration:none !important; position:relative;
  transition:background .15s, color .15s, transform .15s;
}
.nav-item:hover{ background:var(--brand-050); color:var(--ink); transform:translateX(2px); }
.nav-item.active{ background:linear-gradient(90deg,rgba(var(--brand-rgb),.16),rgba(var(--brand-rgb),.05)); color:var(--brand-800); }
.nav-item.active::before{ content:''; position:absolute; left:-14px; top:8px; bottom:8px; width:4px; border-radius:0 4px 4px 0; background:var(--brand); }
.nav-item .ic{ color:var(--muted); transition:color .15s; }
.nav-item.active .ic,.nav-item:hover .ic{ color:var(--brand-700); }
.nav-count{ margin-left:auto; font-size:11px; font-weight:750; background:var(--brand); color:#fff; border-radius:999px; padding:2px 7px; min-width:20px; text-align:center; }
.nav-count.warn{ background:var(--amber); }
.sb-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:12px; }
.xp-card{ background:linear-gradient(135deg,#fff,var(--brand-050)); border:1px solid var(--line); border-radius:16px; padding:12px 14px; cursor:pointer; transition:transform .15s, box-shadow .2s; }
.xp-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.xp-top{ display:flex; align-items:center; gap:10px; }
.xp-lvl{ width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,var(--brand),var(--accent)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:850; font-size:15px; box-shadow:0 4px 12px rgba(var(--brand-rgb),.35); }
.xp-top > div:nth-child(2){ flex:1; min-width:0; }
.xp-name{ font-weight:750; font-size:13.5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xp-meta{ font-size:11.5px; color:var(--muted); white-space:nowrap; }
.xp-streak{ margin-left:auto; display:flex; align-items:center; gap:3px; font-weight:800; font-size:13px; color:#e8590c; }
.xp-bar{ height:7px; border-radius:999px; background:var(--mint-100); margin-top:10px; overflow:hidden; }
.xp-fill{ height:100%; width:var(--p,0%); border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:width 1s var(--ease); position:relative; }
.xp-fill::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); animation:shine 2.6s ease-in-out infinite; }
.sb-user{ display:flex; align-items:center; gap:10px; padding:8px 8px 2px; font-size:13px; color:var(--muted); }
.sb-user strong{ color:var(--ink); display:block; font-size:13.5px; }
.sb-user a{ margin-left:auto; color:var(--muted); }

.main{ min-width:0; padding:30px 44px 80px; }
/* Inhalt nicht über die ganze Breite ziehen – ruhiger zu lesen */
.main > .topbar,.main > .view,.main > .admin-wrap,.main > .page-head{ max-width:1240px; margin-left:auto; margin-right:auto; }
.topbar{ display:flex; align-items:center; gap:14px; margin-bottom:30px; }
.burger{ display:none; }
.gsearch{ flex:1; max-width:560px; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:10px 14px; color:var(--muted); cursor:text; box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s; }
.gsearch:hover{ border-color:var(--brand-200); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.08); }
.gsearch kbd{ margin-left:auto; font:600 11px var(--font); background:var(--mint-050); border:1px solid var(--line); border-radius:6px; padding:2px 6px; color:var(--muted); }
.top-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.ai-chip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line); color:var(--ink-2); cursor:pointer; }
.ai-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px rgba(200,138,14,.15); }
.ai-chip.on .dot{ background:var(--ok); box-shadow:0 0 0 3px rgba(47,158,68,.18); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(47,158,68,.18); } 50%{ box-shadow:0 0 0 6px rgba(47,158,68,.06); } }
.bell{ position:relative; }
.bell .dotn{ position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:var(--danger); color:#fff;
  font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }

/* ---------- Seitenkopf ---------- */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:2px 0 32px; flex-wrap:wrap; }
.page-head h1{ font-size:32px; line-height:1.1; margin:0; font-weight:850; letter-spacing:-.02em; }
.page-sub{ margin:6px 0 0; color:var(--muted); font-size:15px; }
.page-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Ansicht-Übergang & gestaffelte Einblendung ---------- */
.view-enter{ animation:viewIn .38s var(--ease); }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.stagger > *{ animation:fadeUp .5s var(--ease) both; animation-delay:calc(var(--i,0) * 55ms); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes pop{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); } }

/* ---------- Karten ---------- */
.card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 28px; border-bottom:1px solid var(--line); }
.card-head h2,.card-head h3{ margin:0; font-size:17px; font-weight:800; display:flex; align-items:center; gap:10px; }
.card-head h2 .ic,.card-head h3 .ic{ color:var(--brand-700); }
.card-body{ padding:26px 28px; }
.card-foot{ padding:14px 22px; border-top:1px solid var(--line); background:var(--mint-050); border-radius:0 0 var(--radius) var(--radius); display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.card.hover{ transition:transform .2s var(--ease), box-shadow .2s; cursor:pointer; }
.card.hover:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(var(--tone-rgb),.13); }
.grid{ display:grid; gap:28px; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-main{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.stack{ display:flex; flex-direction:column; gap:28px; }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.spacer{ flex:1; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.lead{ font-size:15.5px; color:var(--ink-2); margin:0; }
.mono{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.92em; }
.nowrap{ white-space:nowrap; }
.right{ text-align:right; }
hr.sep{ border:0; height:1px; background:var(--line); margin:18px 0; }

/* ---------- Kennzahlen ---------- */
.stat{ padding:24px 26px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden; }
.stat::after{ content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(var(--brand-rgb),.12),transparent 70%); }
.stat-ic{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--brand-050); color:var(--brand-700); margin-bottom:6px; }
.stat-ic.accent{ background:var(--accent-100); color:var(--accent-700); }
.stat-ic.warn{ background:var(--amber-100); color:var(--amber); }
.stat-ic.info{ background:var(--info-100); color:var(--info); }
.stat-val{ font-size:32px; font-weight:850; letter-spacing:-.02em; line-height:1.05; }
.stat-lbl{ font-size:13.5px; color:var(--muted); font-weight:600; }
.stat-foot{ font-size:12.5px; color:var(--muted); }

/* ---------- Badges, Pills, Avatar ---------- */
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; line-height:1.3; }
.b-neutral{ background:var(--neutral-100); color:var(--muted); } .b-ok{ background:var(--ok-100); color:#23803a; } .b-info{ background:var(--info-100); color:var(--info); }
.b-warn{ background:var(--amber-100); color:#a26d06; } .b-err{ background:var(--danger-100); color:var(--danger); } .b-muted{ background:var(--neutral-100); color:var(--muted); }
.b-brand{ background:var(--brand-100); color:var(--brand-800); } .b-ai{ background:linear-gradient(90deg,rgba(var(--brand-rgb),.16),rgba(var(--accent-rgb),.18)); color:var(--accent-700); }
.pill{ font-size:12px; font-weight:700; padding:5px 11px; border-radius:999px; }
.pill-ok{ background:var(--brand-100); color:var(--brand-700); } .pill-warn{ background:var(--amber-100); color:var(--amber); }
.avatar{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; flex:0 0 auto; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--av),color-mix(in srgb,var(--av) 60%,#000)); box-shadow:0 3px 10px rgba(0,0,0,.12); letter-spacing:.3px; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto; }

/* ---------- Fortschritt ---------- */
.prog{ height:8px; border-radius:999px; background:var(--mint-100); overflow:hidden; }
.prog-fill{ height:100%; width:var(--p); border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--brand-600)); animation:growW 1s var(--ease); }
.prog.accent .prog-fill{ background:linear-gradient(90deg,var(--accent),var(--brand)); }
@keyframes growW{ from{ width:0; } }
.ring{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
.ring svg{ transform:rotate(-90deg); position:absolute; inset:0; }
.ring circle{ fill:none; }
.ring-bg{ stroke:var(--mint-100); }
.ring-fg{ stroke:url(#ringGrad); stroke:var(--brand); stroke-linecap:round; stroke-dashoffset:var(--off); animation:ringIn 1.2s var(--ease); }
@keyframes ringIn{ from{ stroke-dashoffset:var(--c); } }
.ring-label{ position:relative; font-weight:850; font-size:14px; }

/* ---------- Formulare ---------- */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; min-width:0; }
.field .lbl,.field > label{ font-size:12.5px; font-weight:700; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.field .hint,.hint{ font-size:12px; color:var(--muted); }
.input,select.input,textarea.input{
  width:100%; border:1px solid var(--line-2); border-radius:var(--ctl-r); padding:0 var(--ctl-px); font:inherit; font-size:var(--ctl-fs); line-height:1.3;
  background-color:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s, background-color .15s;
}
input.input,select.input{ height:var(--ctl-h); }
.input:hover{ border-color:var(--brand-200); }
.input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.16); }
.input::placeholder{ color:var(--neutral-400); opacity:1; }
.input:disabled,.input[readonly]{ background-color:var(--neutral-050); color:var(--muted); cursor:not-allowed; }
/* Auswahllisten: eigener Pfeil statt Browser-Optik */
select.input{ -webkit-appearance:none; appearance:none; padding-right:42px; cursor:pointer; text-overflow:ellipsis; white-space:nowrap;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888c91' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }
/* Datum & Uhrzeit: gleiche Symbole, gleiche Farbe */
input.input[type=date],input.input[type=time],input.input[type=datetime-local]{ padding-right:12px; }
input.input::-webkit-datetime-edit{ padding:0; }
input.input::-webkit-calendar-picker-indicator{ width:16px; height:16px; margin-left:8px; padding:2px; border-radius:6px; cursor:pointer; opacity:1; color:transparent;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888c91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='3'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18'/%3E%3C/svg%3E") center/16px no-repeat; }
input.input[type=time]::-webkit-calendar-picker-indicator{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888c91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
input.input::-webkit-calendar-picker-indicator:hover{ background-color:var(--neutral-100); }
/* Eingabe mit Vorschlagsliste (datalist): Pfeil wie bei Auswahllisten */
input.input[list]::-webkit-calendar-picker-indicator{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888c91' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
/* Zahlen ohne Browser-Pfeile (Pfeiltasten funktionieren weiter) */
input[type=number]{ -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
input[type=search]::-webkit-search-decoration{ -webkit-appearance:none; }
textarea.input{ padding:12px var(--ctl-px); resize:vertical; min-height:110px; line-height:1.55; }
/* Checkboxen & Optionsfelder (außer Schaltern) */
input[type=checkbox]:not(.switch),input[type=radio]{ -webkit-appearance:none; appearance:none; flex:0 0 auto; width:18px; height:18px; margin:0;
  border:1.5px solid var(--line-2); background:#fff center/12px no-repeat; cursor:pointer; transition:background-color .15s, border-color .15s, box-shadow .15s; }
input[type=checkbox]:not(.switch){ border-radius:6px; }
input[type=radio]{ border-radius:50%; }
input[type=checkbox]:not(.switch):hover,input[type=radio]:hover{ border-color:var(--brand-200); }
input[type=checkbox]:not(.switch):checked{ background-color:var(--brand); border-color:var(--brand);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
input[type=radio]:checked{ border-color:var(--brand); background:#fff; box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 9px var(--brand); }
input[type=checkbox]:not(.switch):focus-visible,input[type=radio]:focus-visible,.switch:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(var(--brand-rgb),.18); }
input[type=radio]:checked:focus-visible{ box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 9px var(--brand), 0 0 0 4px rgba(var(--brand-rgb),.18); }
input[type=range]{ accent-color:var(--brand); }
textarea.dictation{ min-height:200px; font-size:15.5px; }
.input-lg{ --ctl-h:52px; font-size:17px; padding:0 18px; border-radius:16px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 20px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 20px; }
.span2{ grid-column:span 2; } .span3{ grid-column:span 3; }
.switch-row{ display:flex; align-items:center; gap:12px; min-height:var(--ctl-h); padding:9px var(--ctl-px); border:1px solid var(--line-2); border-radius:var(--ctl-r); cursor:pointer; background:#fff; margin-bottom:8px; transition:border-color .15s, background .15s; }
.switch-row:hover{ border-color:var(--brand-200); }
.switch-row span{ display:flex; flex-direction:column; line-height:1.3; font-size:14px; }
.switch-row small{ color:var(--muted); font-size:12px; margin-top:2px; }
.switch{ appearance:none; width:38px; height:22px; border-radius:999px; background:var(--line-2); position:relative; flex:0 0 auto; cursor:pointer; transition:background .2s; margin:0; }
.switch::after{ content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s var(--ease); }
.switch:checked{ background:var(--brand); }
.switch:checked::after{ transform:translateX(16px); }
.seg{ display:inline-flex; background:var(--mint-050); border:1px solid var(--line-2); border-radius:var(--ctl-r); padding:4px; gap:3px; flex-wrap:wrap; }
.seg button,.seg a{ border:0; background:transparent; font:inherit; font-size:13.5px; font-weight:700; color:var(--muted); padding:0 14px; min-height:calc(var(--ctl-h) - 10px); border-radius:8px; cursor:pointer; text-decoration:none !important; display:inline-flex; align-items:center; gap:7px; transition:background .15s, color .15s, box-shadow .15s; }
.seg button.on,.seg a.on{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }
.seg .n{ font-size:11px; background:var(--brand-100); color:var(--brand-800); border-radius:999px; padding:1px 7px; }
.choice{ display:grid; gap:10px; }
.choice label{ display:flex; align-items:center; gap:12px; cursor:pointer; border:1px solid var(--line-2); border-radius:var(--ctl-r); padding:12px var(--ctl-px); background:#fff; transition:border-color .15s, background .15s, transform .15s; }
.choice label:hover{ transform:translateY(-1px); }
.choice label.on,.choice input:checked + span{ }
.choice label:has(input:checked){ border-color:var(--brand); background:var(--brand-050); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12); }
.choice label:hover{ border-color:var(--brand-200); }
.choice span{ display:flex; flex-direction:column; line-height:1.3; }
.choice small{ color:var(--muted); font-size:12px; }

/* ---------- Listen & Tabellen ---------- */
.list{ display:flex; flex-direction:column; }
.li{ display:flex; align-items:center; gap:16px; padding:17px 28px; border-bottom:1px solid var(--line); transition:background .12s; }
.li:last-child{ border-bottom:0; }
.li.click{ cursor:pointer; }
.li.click:hover{ background:var(--mint-050); }
.li-main{ flex:1; min-width:0; }
.li-title{ font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.li-sub{ font-size:13px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; }
.li-side{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.tbl th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:750; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--mint-050); position:sticky; top:0; }
.tbl td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr{ transition:background .12s; }
.tbl tbody tr.click{ cursor:pointer; }
.tbl tbody tr:hover{ background:var(--mint-050); }
.tbl .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tbl-wrap{ overflow-x:auto; }

/* ---------- Leerer Zustand ---------- */
.empty{ text-align:center; padding:46px 24px; color:var(--muted); }
.empty-emoji{ font-size:52px; animation:floaty 3.5s ease-in-out infinite; display:inline-block; }
.empty h3{ color:var(--ink); margin:12px 0 6px; font-size:19px; }
.empty p{ margin:0 auto 16px; max-width:440px; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ---------- Modal ---------- */
.mo-overlay{ position:fixed; inset:0; z-index:100; background:rgba(var(--tone-rgb),.38); backdrop-filter:blur(5px);
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow:auto; opacity:0; transition:opacity .2s; }
.mo-overlay.show{ opacity:1; }
.mo{ background:#fff; border-radius:22px; width:100%; box-shadow:var(--shadow-lg); transform:translateY(14px) scale(.98); transition:transform .28s var(--ease); display:flex; flex-direction:column; max-height:90vh; }
.mo-overlay.show .mo{ transform:none; }
.mo-sm{ max-width:460px; } .mo-md{ max-width:640px; } .mo-lg{ max-width:880px; } .mo-xl{ max-width:1160px; }
.mo-head{ display:flex; align-items:center; gap:14px; padding:22px 30px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.mo-ic{ width:42px; height:42px; border-radius:13px; background:var(--brand-050); color:var(--brand-700); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mo-titles{ flex:1; min-width:0; }
.mo-head h3{ margin:0; font-size:19px; font-weight:850; }
.mo-sub{ font-size:13px; color:var(--muted); margin-top:2px; }
.mo-x{ background:none; border:0; cursor:pointer; color:var(--muted); padding:6px; border-radius:10px; }
.mo-x:hover{ background:var(--mint-050); color:var(--ink); }
.mo-body{ padding:28px 30px; overflow:auto; flex:1 1 auto; }
.mo-foot{ display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:18px 30px; border-top:1px solid var(--line); background:var(--mint-050); border-radius:0 0 22px 22px; flex:0 0 auto; flex-wrap:wrap; }
.mo-foot .left{ margin-right:auto; }
body.has-modal{ overflow:hidden; }

/* ---------- Toasts ---------- */
#toasts{ position:fixed; right:22px; bottom:22px; z-index:200; display:flex; flex-direction:column; gap:10px; align-items:flex-end; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:10px; background:var(--ink); color:#fff; padding:12px 16px 12px 12px; border-radius:14px; font-size:14px; font-weight:550;
  box-shadow:0 14px 36px rgba(0,0,0,.25); opacity:0; transform:translateX(30px); transition:opacity .25s, transform .3s var(--ease); max-width:420px; pointer-events:auto; }
.toast.show{ opacity:1; transform:none; }
.toast-ic{ width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.14); flex:0 0 auto; }
.toast-ok .toast-ic{ background:var(--brand); } .toast-err{ background:#7a2516; } .toast-err .toast-ic{ background:var(--danger); }
.toast-ai .toast-ic{ background:linear-gradient(135deg,var(--brand),var(--accent)); } .toast-xp .toast-ic{ background:#f59f00; }

/* ---------- Hinweiskästen ---------- */
.callout{ display:flex; gap:12px; align-items:flex-start; background:var(--mint-050); border:1px solid var(--mint-200); border-radius:14px; padding:13px 15px; font-size:14px; color:var(--ink-2); }
.callout > .ic{ color:var(--brand-700); margin-top:1px; }
.callout.warn{ background:var(--amber-100); border-color:#f0dca5; color:#7a5605; } .callout.warn > .ic{ color:var(--amber); }
.callout.err{ background:var(--danger-100); border-color:#f0cbc2; color:#8c2b17; } .callout.err > .ic{ color:var(--danger); }
.callout.info{ background:var(--info-100); border-color:#c9daf3; color:#244f86; } .callout.info > .ic{ color:var(--info); }
.callout.ai{ background:linear-gradient(120deg,rgba(var(--brand-rgb),.09),rgba(var(--accent-rgb),.10)); border-color:rgba(var(--accent-rgb),.25); }
.callout.ai > .ic{ color:var(--accent-700); }
.callout pre{ background:var(--ink); color:#f1f2f3; padding:10px 14px; border-radius:8px; font-size:13px; margin:8px 0; overflow:auto; }
.error-box{ background:var(--danger-100); color:var(--danger); border:1px solid #f0cbc2; border-radius:12px; padding:12px 14px; font-size:13.5px; }
code{ background:var(--mint-050); padding:2px 6px; border-radius:6px; font-size:12.5px; }

/* ---------- Prüfliste (Prüfassistent) ---------- */
.checks{ display:flex; flex-direction:column; gap:6px; }
.chk{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; padding:8px 11px; border-radius:11px; background:var(--mint-050); animation:fadeUp .4s var(--ease) both; animation-delay:calc(var(--i,0) * 35ms); }
.chk .ci{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#fff; }
.chk.ok .ci{ background:var(--ok); } .chk.warn .ci{ background:var(--amber); } .chk.error .ci{ background:var(--danger); }
.chk.warn{ background:var(--amber-100); } .chk.error{ background:var(--danger-100); }

/* ---------- Verarbeitung (KI) ---------- */
.processing{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:34px 20px; text-align:center; }
.processing .pb-title{ font-weight:750; font-size:16px; }
.ai-orb{ width:74px; height:74px; border-radius:50%; position:relative; background:conic-gradient(from 0deg,var(--brand),var(--accent),#7a5cf0,var(--brand)); animation:spin 2.4s linear infinite; filter:saturate(1.2); }
.ai-orb::after{ content:''; position:absolute; inset:7px; border-radius:50%; background:#fff; }
.ai-orb-ic{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--accent-700); z-index:2; animation:twinkle 1.6s ease-in-out infinite; }
.orb-wrap{ position:relative; width:74px; height:74px; }
.proc-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; text-align:left; width:100%; max-width:360px; }
.proc-step{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--muted); transition:color .2s; }
.proc-ic{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line-2); flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; transition:all .25s; }
.proc-step.done{ color:var(--ink-2); } .proc-step.done .proc-ic{ border-color:var(--brand); background:var(--brand); animation:pop .35s var(--ease); }
.proc-step.done .proc-ic::after{ content:'✓'; font-size:12px; font-weight:800; }
.proc-step.active{ color:var(--ink); font-weight:700; } .proc-step.active .proc-ic{ border-color:var(--brand); border-top-color:transparent; animation:spin .8s linear infinite; }
.proc-bar{ width:100%; max-width:360px; height:6px; background:var(--mint-100); border-radius:999px; overflow:hidden; }
.proc-bar-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--accent)); border-radius:999px; transition:width .35s ease; }

/* ---------- Login ---------- */
.login-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-card{ background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow-lg);
  padding:42px 38px; width:100%; max-width:420px; text-align:center; animation:fadeUp .6s var(--ease); }
.login-logo{ height:76px; max-width:220px; object-fit:contain; margin-bottom:14px; }
.login-card h1{ font-size:26px; margin:6px 0 2px; font-weight:850; background:linear-gradient(90deg,var(--brand-700),var(--accent-700)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.login-sub{ color:var(--muted); font-size:14px; margin:0 0 24px; }
.login-card form{ text-align:left; }
.login-card label{ font-size:12.5px; font-weight:700; color:var(--ink-2); }
.login-card input{ width:100%; height:48px; margin:6px 0 16px; border:1px solid var(--line-2); border-radius:var(--ctl-r); padding:0 var(--ctl-px); font-size:16px; font-family:inherit; background:#fff; color:var(--ink); }
.login-card input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.16); }
.login-error{ background:var(--danger-100); color:var(--danger); border-radius:10px; padding:9px 12px; font-size:13.5px; margin-bottom:12px; animation:shake .4s; }
.login-foot{ margin-top:22px; font-size:12px; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; }
@keyframes shake{ 20%,60%{ transform:translateX(-6px); } 40%,80%{ transform:translateX(6px); } }

/* ---------- Admin (KI & E-Mail) ---------- */
.admin-wrap{ max-width:860px; display:flex; flex-direction:column; gap:28px; }
.admin-card{ padding:0; }
.admin-card > *:not(.card-head){ padding-left:28px; padding-right:28px; }
.admin-card .muted{ padding-top:20px; }
.admin-card form{ padding-bottom:26px; }
.admin-card > .field:last-child, .admin-card > div:last-child{ padding-bottom:26px; }
.admin-actions{ display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
.conn-msg{ margin-top:12px; font-size:13.5px; }
.msg-ok{ color:var(--brand-700); } .msg-err{ color:var(--danger); }
.admin-info h3{ padding-top:18px; margin:0 0 8px; font-size:15px; }
.admin-info ul{ padding-left:20px; margin:0 0 18px; }
.admin-info li{ margin:6px 0; font-size:13.5px; color:var(--ink-2); }
.mode-toggle{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.mode-opt{ display:flex; align-items:center; gap:12px; cursor:pointer; border:1px solid var(--line-2); border-radius:var(--ctl-r); padding:12px var(--ctl-px); background:#fff; transition:border-color .15s, background .15s; }
.mode-opt:hover{ border-color:var(--brand-200); }
.mode-opt.active{ border-color:var(--brand); background:var(--brand-050); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.12); }

.mode-opt span{ display:flex; flex-direction:column; line-height:1.3; }
.mode-opt small{ color:var(--muted); font-size:11.5px; }
.pane{ margin-top:4px; }
.status-list{ display:flex; flex-direction:column; gap:8px; margin:6px 0 12px; }
.status-row{ display:flex; align-items:center; gap:10px; font-size:14px; }
.status-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.dot-ok{ background:var(--ok); box-shadow:0 0 0 3px rgba(47,158,68,.18); }
.dot-bad{ background:#d7b13a; box-shadow:0 0 0 3px rgba(201,138,18,.16); }
.code-row{ display:flex; gap:8px; align-items:stretch; }
.code-row .input{ flex:1; }
.code-row input.input{ font-family:ui-monospace,"SF Mono",Menlo,monospace; }
.ios-spinner{ width:16px; height:16px; border-radius:50%; display:inline-block; background:conic-gradient(from 90deg,transparent 0%,currentColor 90%);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5px),#000 0); mask:radial-gradient(farthest-side,#0000 calc(100% - 2.5px),#000 0); animation:spin .8s linear infinite; }
.test-steps{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }

/* ---------- Responsiv ---------- */
@media (max-width:1180px){ .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g-main{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:980px){
  .shell{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:0; top:0; bottom:0; width:var(--sidebar); transform:translateX(-105%); transition:transform .3s var(--ease); box-shadow:var(--shadow-lg); }
  .shell.nav-open .sidebar{ transform:none; }
  .burger{ display:inline-flex; }
  .main{ padding:18px 16px 50px; }
  .g3{ grid-template-columns:1fr; } .g2{ grid-template-columns:1fr; }
  .page-head h1{ font-size:26px; }
}
@media (max-width:640px){ .grid2,.grid3,.grid4{ grid-template-columns:1fr; } .span2,.span3{ grid-column:auto; } .g4{ grid-template-columns:1fr 1fr; } .gsearch kbd{ display:none; } }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }