@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════
   AUSBILDERZEITERFASSUNG – style.css
   Breakpoints:
     mobile:  ≤767px  (Handy Portrait)
     tablet:  768–1023px
     desktop: ≥1024px
═══════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

/* ═══════════════════════════════════════════════════════════════
   CSS VARIABLEN
═══════════════════════════════════════════════════════════════ */
:root {
  --sidebar-w: 240px;
  --topbar-h:  56px;
  --bottom-nav-h: 60px;

  /* Akzent (Standard: Navy) */
  --navy:  #0d1526; --navy2: #182039; --navy3: #24305a;
  --amber: #e8a020; --amber2:#fbbf24; --amber-pale:rgba(232,160,32,.12);

  /* Hintergrund (Standard: Blaugrau) */
  --bg:      #f0f4f9;
  --surface: #ffffff;
  --border:  #e2e8f0;
  --text:    #1a2740;
  --muted:   #64748b;

  /* Status */
  --success:#16a34a; --danger:#dc2626; --info:#2563eb; --warn:#d97706;

  /* Misc */
  --r:10px;
  --shadow:   0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.14);
}

/* ── Farbthemen (Hintergrund) ── */
html.theme-default { --bg:#f0f4f9; --surface:#fff; --border:#e2e8f0; --text:#1a2740; --muted:#64748b; }
html.theme-sand    { --bg:#f7f3ee; --surface:#fffdf9; --border:#e8dfd2; --text:#2d2416; --muted:#7a6b57; }
html.theme-forest  { --bg:#eef4ee; --surface:#f8fff8; --border:#c8dfc8; --text:#162616; --muted:#527052; }
html.theme-lilac   { --bg:#f3eef9; --surface:#fdfaff; --border:#dcd0ef; --text:#24163a; --muted:#6d5a8a; }
html.theme-slate   { --bg:#1a2030; --surface:#222b3a; --border:#2e3d52; --text:#e0e8f0; --muted:#7a94b0; }
html.theme-ocean   { --bg:#e8f4fd; --surface:#f4fbff; --border:#c0dcf0; --text:#0c2340; --muted:#4a7299; }
html.theme-rose    { --bg:#fdf0f0; --surface:#fffafa; --border:#f0d0d0; --text:#380c0c; --muted:#8a4a4a; }
html.theme-carbon  { --bg:#141414; --surface:#1e1e1e; --border:#2a2a2a; --text:#f0f0f0; --muted:#8a8a8a; }

/* ── Akzentfarben (Sidebar) ── */
html.accent-navy   { --navy:#0d1526; --navy2:#182039; --navy3:#24305a; --amber:#e8a020; --amber2:#fbbf24; --amber-pale:rgba(232,160,32,.12); }
html.accent-green  { --navy:#134e2a; --navy2:#1a6636; --navy3:#217a42; --amber:#4ade80; --amber2:#86efac; --amber-pale:rgba(74,222,128,.12); }
html.accent-blue   { --navy:#0c2d6b; --navy2:#1040a0; --navy3:#1d50c0; --amber:#60a5fa; --amber2:#93c5fd; --amber-pale:rgba(96,165,250,.12); }
html.accent-purple { --navy:#3b0764; --navy2:#5b21b6; --navy3:#7c3aed; --amber:#c084fc; --amber2:#e879f9; --amber-pale:rgba(192,132,252,.12); }
html.accent-red    { --navy:#450a0a; --navy2:#7f1d1d; --navy3:#991b1b; --amber:#f87171; --amber2:#fca5a5; --amber-pale:rgba(248,113,113,.12); }
html.accent-teal   { --navy:#0f3b3b; --navy2:#155e5e; --navy3:#177a7a; --amber:#2dd4bf; --amber2:#5eead4; --amber-pale:rgba(45,212,191,.12); }
html.accent-orange { --navy:#431407; --navy2:#7c2d12; --navy3:#9a3412; --amber:#fb923c; --amber2:#fdba74; --amber-pale:rgba(251,146,60,.12); }
html.accent-pink   { --navy:#500724; --navy2:#9d174d; --navy3:#be185d; --amber:#f472b6; --amber2:#f9a8d4; --amber-pale:rgba(244,114,182,.12); }

/* ── Dark Mode ── */
html.dark {
  --navy:#1e2a3a; --navy2:#253347; --navy3:#2e3f57;
  --amber:#f0a832; --amber2:#fbbf24; --amber-pale:rgba(240,168,50,.15);
  --bg:#0f1923; --surface:#172030; --border:#243044;
  --text:#e2e8f0; --muted:#7a94b0;
  --success:#22c55e; --danger:#f87171; --info:#60a5fa; --warn:#fbbf24;
  --shadow:0 2px 12px rgba(0,0,0,.35); --shadow-lg:0 8px 32px rgba(0,0,0,.55);
}
html.dark .login-page   { background:linear-gradient(135deg,#0a1018,#172030); }
html.dark .login-box    { background:var(--surface); box-shadow:0 24px 64px rgba(0,0,0,.6); }
html.dark .login-logo   { color:var(--amber); }
html.dark th            { background:#0f1923; }
html.dark tr:hover td   { background:rgba(240,168,50,.04); }
html.dark .appt-card, html.dark .stat-card, html.dark .card, html.dark .modal { background:var(--surface); }
html.dark .fc           { background:var(--surface); border-color:var(--border); color:var(--text); }
html.dark .fc:disabled  { background:#0f1923; }
html.dark select option { background:var(--surface); }
html.dark .filter-chip  { background:var(--surface); }
html.dark .btn-outline  { background:transparent; border-color:var(--border); color:var(--text); }
html.dark .btn-outline:hover:not(:disabled) { background:var(--border); }
html.dark .btn-logout   { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
html.dark .audit-row:hover { background:rgba(255,255,255,.02); }
html.dark .profile-avatar  { background:var(--navy2); }
html.dark .qr-box, html.dark .series-preview, html.dark .invite-link-box { background:#0f1923; }
html.dark .day-chip    { border-color:var(--border); }
html.dark .b-gray      { background:#243044; color:var(--muted); border-color:var(--border); }
html.dark .b-blue      { background:rgba(96,165,250,.1);  color:#60a5fa; border-color:rgba(96,165,250,.2); }
html.dark .b-green     { background:rgba(34,197,94,.1);   color:#22c55e; border-color:rgba(34,197,94,.2); }
html.dark .b-red       { background:rgba(248,113,113,.1); color:#f87171; border-color:rgba(248,113,113,.2); }
html.dark .b-orange    { background:rgba(251,191,36,.1);  color:#fbbf24; border-color:rgba(251,191,36,.2); }
html.dark .b-amber     { background:rgba(240,168,50,.12); color:var(--amber); border-color:rgba(240,168,50,.25); }
html.dark .b-purple    { background:rgba(167,139,250,.1); color:#a78bfa; border-color:rgba(167,139,250,.2); }
html.dark .a-warn      { background:rgba(251,191,36,.08); border-color:rgba(251,191,36,.25); color:#fbbf24; }
html.dark .a-info      { background:rgba(96,165,250,.08); border-color:rgba(96,165,250,.25); color:#60a5fa; }
html.dark .a-danger    { background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.25);color:#f87171; }
html.dark .a-success   { background:rgba(34,197,94,.08);  border-color:rgba(34,197,94,.25);  color:#22c55e; }
html.dark .moverlay    { background:rgba(0,0,0,.75); }
html.dark .search-overlay { background:rgba(0,0,0,.75); }
html.dark .search-box  { background:var(--surface); border-color:var(--border); }
html.dark .search-result:hover,.search-result.active { background:var(--navy2); }
html.dark code         { background:#0f1923; border-color:var(--border); color:var(--text); }
html.dark .inst-detail-card { background:#0f1923; }
html.dark .inst-detail-card.attended { background:rgba(34,197,94,.05); }

html { transition:background .2s,color .2s; -webkit-text-size-adjust:100%; }
html,body,#root { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text); line-height:1.5; min-height:100vh; }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════════ */
.sv-app  { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar-w);
  background:var(--navy);
  color:#fff;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; left:0;
  height:100vh;
  z-index:200;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.sb-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:199;
}
.sb-overlay.show { display:block; }
.sb-head { padding:20px 18px 14px; border-bottom:1px solid var(--navy3); flex-shrink:0; }
.sb-logo { font-size:14px; font-weight:800; color:var(--amber); line-height:1.3; }
.sb-sub  { font-size:9px; color:rgba(255,255,255,.35); margin-top:3px; letter-spacing:.1em; text-transform:uppercase; }
.sb-nav  { flex:1; padding:8px 0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:12px 18px;
  cursor:pointer;
  color:rgba(255,255,255,.55);
  font-size:13.5px; font-weight:500;
  transition:all .15s;
  border-left:3px solid transparent;
  user-select:none;
}
.nav-item:hover  { background:var(--navy2); color:#fff; }
.nav-item.active { background:var(--navy2); color:var(--amber); border-left-color:var(--amber); }
.nav-sep { height:1px; background:var(--navy3); margin:6px 18px; }
.sb-foot { padding:14px 18px; border-top:1px solid var(--navy3); flex-shrink:0; }
.u-name  { font-weight:700; color:#fff; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-role  { font-size:10px; background:rgba(232,160,32,.15); color:var(--amber2); border:1px solid rgba(232,160,32,.25); border-radius:4px; padding:1px 7px; display:inline-block; margin:3px 0 10px; }
.btn-logout { width:100%; padding:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:7px; color:rgba(255,255,255,.6); cursor:pointer; font-family:inherit; font-size:13px; transition:all .15s; }
.btn-logout:hover { background:rgba(255,255,255,.14); color:#fff; }

.main    { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; min-width:0; }
.topbar  {
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0 22px;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  gap:10px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 1px 0 var(--border);
}
.topbar-title  { font-size:15px; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hamburger     { display:none; background:none; border:none; cursor:pointer; font-size:22px; color:var(--text); padding:6px; line-height:1; -webkit-tap-highlight-color:transparent; }
.dm-toggle     { background:none; border:none; cursor:pointer; font-size:20px; padding:6px; color:var(--muted); flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.dm-toggle:hover { color:var(--text); }
.search-trigger { cursor:pointer; font-size:19px; padding:6px; color:var(--muted); flex-shrink:0; -webkit-tap-highlight-color:transparent; }
.search-trigger:hover { color:var(--text); }
.content { padding:22px; max-width:1200px; margin:0 auto; width:100%; }

/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAV (mobil)
═══════════════════════════════════════════════════════════════ */
.bottom-nav { display:none; }

/* ═══════════════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════════════ */
.card        { background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); border:1px solid var(--border); }
.card-body   { padding:18px; }
.card-header { padding:13px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.card-title  { font-size:14px; font-weight:700; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:7px; border:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:500; transition:all .15s; white-space:nowrap; text-decoration:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary { background:var(--navy); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--navy2); }
.btn-amber   { background:var(--amber); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
.btn-outline:hover:not(:disabled) { background:var(--bg); }
.btn-danger  { background:var(--danger); color:#fff; }
.btn-danger:hover:not(:disabled) { opacity:.85; }
.btn-success { background:var(--success); color:#fff; }
.btn-ghost   { background:none; border:none; color:var(--muted); padding:4px 8px; }
.btn-ghost:hover { color:var(--text); background:var(--bg); }
.btn-sm  { padding:6px 11px; font-size:12px; border-radius:6px; }
.btn-xs  { padding:3px 8px;  font-size:11px; border-radius:5px; }
.w-full  { width:100%; justify-content:center; }

/* ═══════════════════════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════════════════════ */
.fg        { margin-bottom:13px; }
.fg:last-child { margin-bottom:0; }
.fl        { display:block; font-size:11px; font-weight:700; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
.fc        { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:7px; font-family:inherit; font-size:15px; color:var(--text); background:var(--surface); outline:none; transition:border-color .15s; -webkit-appearance:none; }
.fc:focus  { border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-pale); }
.fc:disabled { background:var(--bg); color:var(--muted); cursor:not-allowed; }
.fc-pw-wrap { position:relative; }
.fc-pw-wrap .fc { padding-right:44px; }
.pw-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--muted); font-size:16px; padding:4px; }
.pw-toggle:hover { color:var(--text); }
.form-row  { display:grid; grid-template-columns:1fr 1fr;     gap:12px; }
.form-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.radio-group { display:flex; gap:18px; flex-wrap:wrap; }
.radio-label { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:14px; }
.radio-label input { accent-color:var(--amber); }

/* Password strength */
.pw-strength     { margin-top:6px; }
.pw-strength-bar { height:4px; border-radius:4px; background:var(--border); overflow:hidden; margin-bottom:4px; }
.pw-strength-fill { height:100%; border-radius:4px; transition:all .3s; }
.pw-strength-fill.s0{width:0}
.pw-strength-fill.s1{width:25%;background:var(--danger)}
.pw-strength-fill.s2{width:50%;background:var(--warn)}
.pw-strength-fill.s3{width:75%;background:var(--amber)}
.pw-strength-fill.s4{width:100%;background:var(--success)}
.pw-strength-label.s0{color:var(--muted)} .pw-strength-label.s1{color:var(--danger)}
.pw-strength-label.s2{color:var(--warn)}  .pw-strength-label.s3{color:var(--amber)}
.pw-strength-label.s4{color:var(--success)}
.pw-rules { display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.pw-rule  { font-size:11px; display:flex; align-items:center; gap:5px; color:var(--muted); }
.pw-rule.ok { color:var(--success); } .pw-rule.fail { color:var(--danger); }

/* ═══════════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════════ */
.badge   { display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.b-amber { background:var(--amber-pale); color:var(--amber);  border:1px solid rgba(232,160,32,.2); }
.b-gray  { background:#f1f5f9; color:var(--muted);   border:1px solid var(--border); }
.b-green { background:#dcfce7; color:#15803d;         border:1px solid #bbf7d0; }
.b-red   { background:#fee2e2; color:#b91c1c;         border:1px solid #fecaca; }
.b-blue  { background:#eff6ff; color:#1d4ed8;         border:1px solid #bfdbfe; }
.b-orange{ background:#fff7ed; color:#c2410c;         border:1px solid #fed7aa; }
.b-purple{ background:#f5f3ff; color:#7c3aed;         border:1px solid #ddd6fe; }

/* ═══════════════════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════════════════ */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table     { width:100%; border-collapse:collapse; font-size:13px; }
th { text-align:left; padding:9px 13px; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; border-bottom:2px solid var(--border); background:var(--bg); white-space:nowrap; }
td { padding:10px 13px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(232,160,32,.025); }

/* ═══════════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════════ */
.moverlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:500; display:flex; align-items:center; justify-content:center; padding:16px; backdrop-filter:blur(2px); }
.modal    { background:var(--surface); border-radius:14px; box-shadow:var(--shadow-lg); width:100%; max-width:540px; max-height:92vh; display:flex; flex-direction:column; animation:modal-in .18s ease; }
.modal-lg { max-width:660px; }
.modal-xl { max-width:820px; }
@keyframes modal-in { from{opacity:0;transform:scale(.96) translateY(8px)} to{opacity:1;transform:none} }
.mhead { padding:15px 19px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.mtitle{ font-size:15px; font-weight:700; }
.mbody { padding:19px; overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }
.mfoot { padding:12px 19px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:7px; flex-shrink:0; flex-wrap:wrap; }
.close-x { background:none; border:none; cursor:pointer; font-size:22px; color:var(--muted); line-height:1; padding:3px 7px; border-radius:5px; }
.close-x:hover { background:var(--bg); }
.mfoot-split { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════
   ALERTS
═══════════════════════════════════════════════════════════════ */
.alert      { padding:10px 13px; border-radius:8px; font-size:13px; margin-bottom:13px; display:flex; align-items:flex-start; gap:8px; }
.alert-icon { flex-shrink:0; font-size:15px; margin-top:1px; }
.a-warn    { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
.a-info    { background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; }
.a-danger  { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.a-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }

/* ═══════════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════════ */
.toast-container { position:fixed; bottom:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:360px; }
.toast           { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.18); font-size:13px; font-weight:500; pointer-events:all; animation:toast-in .25s ease; min-width:220px; color:#fff; }
.toast.removing  { animation:toast-out .25s ease forwards; }
@keyframes toast-in  { from{opacity:0;transform:translateY(16px) scale(.95)} to{opacity:1;transform:none} }
@keyframes toast-out { to{opacity:0;transform:translateY(8px) scale(.95)} }
.toast-success{background:var(--success)} .toast-error{background:var(--danger)}
.toast-info   {background:var(--info)}    .toast-warn {background:var(--warn)}
.toast-icon{font-size:16px;flex-shrink:0} .toast-msg{flex:1;line-height:1.35}
.toast-close{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.7);font-size:16px;padding:0}
.toast-close:hover{color:#fff}

/* ═══════════════════════════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════════════════════════ */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy) 0%,var(--navy3) 100%); padding:16px; }
.login-box  { background:var(--surface); border-radius:16px; padding:38px; width:100%; max-width:390px; box-shadow:0 24px 64px rgba(0,0,0,.35); }
.login-logo { font-size:20px; font-weight:800; color:var(--navy); margin-bottom:4px; }
.login-sub  { font-size:13px; color:var(--muted); margin-bottom:24px; }
.lockout-timer { font-size:26px; font-weight:800; color:var(--danger); text-align:center; margin:8px 0; font-variant-numeric:tabular-nums; }
.attempt-dots  { display:flex; gap:5px; justify-content:center; margin:8px 0; }
.attempt-dot   { width:10px; height:10px; border-radius:50%; background:var(--border); transition:background .2s; }
.attempt-dot.used{background:var(--danger)} .attempt-dot.warn{background:var(--warn)}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER + STATS
═══════════════════════════════════════════════════════════════ */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:10px; flex-wrap:wrap; }
.page-title  { font-size:20px; font-weight:800; }
.stats-grid  { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:18px; }
.stat-card   { background:var(--surface); border-radius:var(--r); padding:16px 18px; border:1px solid var(--border); box-shadow:var(--shadow); cursor:pointer; transition:all .15s; }
.stat-card-link { cursor:pointer; }
.stat-card-link:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:var(--amber);
  background: linear-gradient(135deg, var(--surface) 60%, var(--amber-pale) 100%);
}
.stat-card-link:active { transform:translateY(-1px); }
.stat-card-arrow {
  margin-left:auto;
  font-size:14px;
  color:var(--muted);
  transition:transform .2s, color .2s;
  opacity:0;
}
.stat-card-link:hover .stat-card-arrow { opacity:1; color:var(--amber); transform:translateX(3px); }
.stat-label  { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.stat-value  { font-size:26px; font-weight:800; color:var(--text); line-height:1.1; }
.stat-trend  { font-size:12px; margin-top:4px; }
.stat-trend.up{color:var(--success)} .stat-trend.down{color:var(--danger)} .stat-trend.neutral{color:var(--muted)}

/* ═══════════════════════════════════════════════════════════════
   APPOINTMENTS
═══════════════════════════════════════════════════════════════ */
.date-group { margin-bottom:20px; }
.date-label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:9px; display:flex; align-items:center; gap:10px; }
.date-label::after { content:''; flex:1; height:1px; background:var(--border); }
.appt-card  { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); margin-bottom:8px; cursor:pointer; transition:all .15s; border-left:4px solid var(--navy3); }
.appt-card:hover  { border-color:var(--amber); box-shadow:var(--shadow); transform:translateY(-1px); }
/* Heutige Termine – theme-unabhängig, immer sichtbar */
.appt-card.is-today {
  border-left: 5px solid #f59e0b !important;
  background: linear-gradient(135deg, rgba(245,158,11,.13) 0%, rgba(245,158,11,.04) 100%) !important;
  box-shadow: 0 2px 16px rgba(245,158,11,.25) !important;
}
.appt-card.is-today .acard-time { color: #d97706 !important; }
.appt-card.is-locked   { border-left-color:var(--muted); opacity:.75; }
.appt-card.is-unlocked { border-left-color:var(--warn); }
.acard-body { padding:11px 15px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.acard-time { font-size:13px; font-weight:700; color:var(--amber); min-width:95px; flex-shrink:0; }
.acard-title{ flex:1; font-size:14px; font-weight:600; min-width:80px; }
.acard-meta { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════
   INSTRUCTOR LIST / DETAIL
═══════════════════════════════════════════════════════════════ */
.inst-list  { display:flex; flex-direction:column; gap:6px; }
.inst-item  { display:flex; align-items:center; gap:9px; padding:9px 12px; background:var(--bg); border-radius:8px; border:1px solid var(--border); transition:all .15s; cursor:pointer; }
.inst-item:hover:not(.disabled) { border-color:var(--amber); }
.inst-item.attended { background:rgba(22,163,74,.04); border-color:#bbf7d0; }
.inst-item.disabled { cursor:default; opacity:.7; }
.inst-tag   { display:inline-flex; align-items:center; gap:5px; background:var(--navy); color:#fff; border-radius:20px; padding:3px 10px; font-size:12px; font-weight:600; }
.inst-tag-x { cursor:pointer; opacity:.7; font-size:15px; }

/* Lohn-pro-Termin Cards */
.inst-detail-card    { background:var(--bg); border:1.5px solid var(--border); border-radius:10px; padding:12px 14px; margin-bottom:8px; transition:border-color .15s; }
.inst-detail-card.attended { background:rgba(34,197,94,.04); border-color:#bbf7d0; }
.inst-detail-top     { display:flex; align-items:center; gap:10px; user-select:none; }
.inst-detail-fields  { margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); display:flex; flex-direction:column; gap:9px; }
.inst-detail-row     { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.inst-field-label    { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; min-width:46px; margin-top:6px; flex-shrink:0; }
.inst-field-group    { display:flex; align-items:center; gap:7px; flex-wrap:wrap; flex:1; }
.inst-time-field     { display:flex; align-items:center; gap:4px; }
.inst-time-label     { font-size:10px; color:var(--muted); font-weight:600; white-space:nowrap; }
.ai-time-input       { width:95px; padding:5px 7px; border:1px solid var(--border); border-radius:6px; font-family:inherit; font-size:13px; color:var(--text); background:var(--surface); }
.ai-time-input:focus { border-color:var(--amber); outline:none; }
.ai-time-reset       { font-size:11px; color:var(--info); background:none; border:none; cursor:pointer; padding:2px 6px; border-radius:4px; white-space:nowrap; }
.ai-time-reset:hover { background:rgba(37,99,235,.08); }
.earn-total          { background:var(--amber-pale); border:1px solid rgba(232,160,32,.3); border-radius:8px; padding:10px 14px; margin-top:12px; font-size:14px; color:var(--amber); }
.ai-custom-badge     { font-size:9px; background:var(--amber-pale); color:var(--amber); border:1px solid rgba(232,160,32,.3); border-radius:4px; padding:1px 5px; font-weight:700; }

/* ═══════════════════════════════════════════════════════════════
   FILTER BAR / CHIPS
═══════════════════════════════════════════════════════════════ */
.filter-bar  { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.filter-chip { padding:6px 13px; border-radius:20px; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap; user-select:none; -webkit-tap-highlight-color:transparent; }
.filter-chip:hover { border-color:var(--amber); color:var(--text); }
.filter-chip.on    { background:var(--navy); color:#fff; border-color:var(--navy); }

/* ═══════════════════════════════════════════════════════════════
   PAY TYPE CHIPS
═══════════════════════════════════════════════════════════════ */
.pay-type-row  { display:flex; gap:7px; flex-wrap:wrap; }
.pay-type-chip { display:flex; align-items:center; gap:5px; padding:7px 12px; border:1.5px solid var(--border); border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); transition:all .15s; user-select:none; }
.pay-type-chip:hover { border-color:var(--amber); color:var(--text); }
.pay-type-chip.on    { background:var(--navy); color:#fff; border-color:var(--navy); }

/* ═══════════════════════════════════════════════════════════════
   CALENDAR
═══════════════════════════════════════════════════════════════ */
.cal-nav      { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.cal-nav-title{ font-size:16px; font-weight:700; flex:1; min-width:120px; }
.cal-grid     { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-dow      { text-align:center; font-size:10px; font-weight:700; color:var(--muted); padding:5px 0; text-transform:uppercase; }
.cal-day      { min-height:80px; background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:5px; cursor:pointer; transition:border-color .15s; overflow:hidden; }
.cal-day:hover { border-color:var(--amber); }
.cal-day.other-month { opacity:.35; }
.cal-day.today       { border-color:var(--amber); background:var(--amber-pale); }
.cal-day-num  { display:flex; justify-content:space-between; font-size:12px; font-weight:700; margin-bottom:2px; }
.cal-event    { font-size:10px; padding:1px 4px; border-radius:3px; margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.cal-more     { font-size:9px; color:var(--muted); text-align:right; cursor:pointer; }
.cat-0{background:rgba(232,160,32,.18);color:#b45309}
.cat-1{background:rgba(37,99,235,.12);color:#1d4ed8}
.cat-2{background:rgba(22,163,74,.12);color:#166534}
.cat-3{background:rgba(124,58,237,.12);color:#7c3aed}
.cat-4{background:rgba(220,38,38,.1);color:#991b1b}
.cat-5{background:rgba(8,145,178,.12);color:#0e7490}
.week-grid       { display:grid; grid-template-columns:50px repeat(7,1fr); gap:1px; background:var(--border); border-radius:var(--r); overflow:hidden; }
.week-time-col   { background:var(--bg); }
.week-time-label { font-size:9px; color:var(--muted); padding:3px 4px 0; font-weight:600; }
.week-col-header { background:var(--bg); text-align:center; padding:7px 3px; font-size:11px; font-weight:700; color:var(--muted); border-bottom:2px solid var(--border); }
.week-col-header.today-col { background:var(--amber-pale); color:var(--amber); }
.week-hour-line  { background:var(--surface); min-height:52px; position:relative; border-top:1px solid var(--border); }
.week-event      { position:absolute; left:2px; right:2px; font-size:9px; padding:2px 4px; border-radius:3px; overflow:hidden; cursor:pointer; font-weight:600; line-height:1.3; }
.week-event:hover { filter:brightness(1.1); z-index:2; }
.view-toggle     { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; flex-shrink:0; }
.view-toggle-btn { padding:7px 12px; background:var(--surface); border:none; cursor:pointer; font-family:inherit; font-size:12px; font-weight:500; color:var(--muted); transition:all .15s; display:flex; align-items:center; gap:4px; }
.view-toggle-btn+.view-toggle-btn { border-left:1px solid var(--border); }
.view-toggle-btn.active { background:var(--navy); color:#fff; }
.view-toggle-btn:hover:not(.active) { background:var(--bg); color:var(--text); }
.check-row   { display:flex; gap:6px; flex-wrap:wrap; }
.day-chip    { display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border:1.5px solid var(--border); border-radius:6px; font-size:12px; font-weight:700; cursor:pointer; user-select:none; min-width:42px; transition:all .15s; }
.day-chip:hover { border-color:var(--amber); }
.day-chip.on    { background:var(--navy); color:#fff; border-color:var(--navy); }
.series-preview { background:var(--bg); border-radius:7px; padding:8px 11px; font-size:12px; color:var(--muted); margin-top:7px; border:1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════════════ */
.dash-grid    { display:grid; grid-template-columns:1fr 1fr;       gap:16px; }
.dash-grid-3  { display:grid; grid-template-columns:1fr 1fr 1fr;   gap:16px; margin-bottom:16px; }
.upcoming-item{ padding:8px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px; }
.upcoming-item:last-child { border-bottom:none; }
.upcoming-date{ font-size:11px; font-weight:700; color:var(--amber); min-width:80px; flex-shrink:0; }
.upcoming-info{ flex:1; min-width:0; }
.top-inst-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); }
.top-inst-row:last-child { border-bottom:none; }
.top-inst-name{ font-size:13px; font-weight:600; min-width:100px; flex-shrink:0; }
.top-inst-bar { flex:1; height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.top-inst-fill{ height:100%; background:var(--amber); border-radius:4px; transition:width .4s; }
.top-inst-val { font-size:12px; font-weight:700; color:var(--muted); min-width:60px; text-align:right; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════════
   MISC
═══════════════════════════════════════════════════════════════ */
.empty       { padding:48px 20px; text-align:center; color:var(--muted); }
.empty-icon  { font-size:42px; margin-bottom:10px; }
.divider     { height:1px; background:var(--border); margin:16px 0; }
.truncate    { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flex        { display:flex; } .flex-wrap { flex-wrap:wrap; }
.items-c     { align-items:center; }
.gap1{gap:4px} .gap2{gap:8px}
.ml-auto{margin-left:auto}
.mb2{margin-bottom:8px} .mb3{margin-bottom:12px}
.mt2{margin-top:8px}    .mt3{margin-top:12px}
.text-muted  { color:var(--muted); } .text-sm { font-size:12px; }
code { background:var(--bg); border:1px solid var(--border); padding:1px 6px; border-radius:4px; font-size:12px; }
.expiry-warn      { background:#fff7ed; border:1px solid #fed7aa; border-radius:8px; padding:10px 14px; color:#c2410c; font-size:13px; display:flex; gap:8px; align-items:center; }
.expiry-warn.soon { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.profile-avatar   { width:52px; height:52px; border-radius:50%; background:var(--navy); color:var(--amber); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; flex-shrink:0; }
.profil-grid      { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; }
.perm-grid        { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.perm-item        { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; transition:all .15s; }
.perm-item.on     { background:var(--amber-pale); border-color:var(--amber); }
.audit-row        { display:flex; align-items:flex-start; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); transition:background .1s; }
.audit-row:last-child { border-bottom:none; }
.audit-row:hover  { background:rgba(0,0,0,.02); }
.audit-icon       { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.audit-msg        { flex:1; font-size:13px; font-weight:500; line-height:1.4; word-break:break-word; }
.audit-user       { font-size:11px; color:var(--muted); margin-top:2px; }
.audit-time       { font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0; margin-top:2px; }
.qr-box           { background:var(--bg); border-radius:10px; padding:16px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.invite-link-box  { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:12px; word-break:break-all; margin-bottom:10px; }
.search-overlay   { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:500; display:flex; align-items:flex-start; justify-content:center; padding:60px 16px 16px; }
.search-box       { background:var(--surface); border-radius:14px; box-shadow:var(--shadow-lg); width:100%; max-width:560px; overflow:hidden; border:1px solid var(--border); animation:modal-in .18s ease; }
.search-input     { width:100%; padding:16px 18px; border:none; outline:none; font-family:inherit; font-size:15px; background:transparent; color:var(--text); }
.search-results   { max-height:360px; overflow-y:auto; }
.search-section-label { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:6px 16px 3px; }
.search-result    { display:flex; align-items:center; gap:10px; padding:10px 16px; cursor:pointer; transition:background .1s; }
.search-result:hover,.search-result.active { background:var(--bg); }
.search-result-title{ font-size:13px; font-weight:600; }
.search-result-sub  { font-size:11px; color:var(--muted); }
.search-hint      { padding:10px 16px; font-size:11px; color:var(--muted); border-top:1px solid var(--border); }
.template-card    { display:flex; align-items:center; gap:12px; padding:10px 13px; border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:all .15s; background:var(--bg); margin-bottom:7px; }
.template-card:hover { border-color:var(--amber); background:var(--amber-pale); }
.template-icon    { font-size:22px; flex-shrink:0; }
.template-name    { font-size:14px; font-weight:700; }
.template-meta    { font-size:11px; color:var(--muted); margin-top:1px; }
.session-banner   { background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 12px; font-size:12px; color:#92400e; display:flex; align-items:center; gap:7px; margin-bottom:14px; }

/* ═══════════════════════════════════════════════════════════════
   THEME PICKER
═══════════════════════════════════════════════════════════════ */
.theme-section    { margin-bottom:20px; }
.theme-label      { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; display:block; }
.theme-swatches   { display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:8px; }
.theme-swatch     { border-radius:10px; overflow:hidden; border:2px solid transparent; cursor:pointer; transition:all .2s; }
.theme-swatch.active { border-color:var(--amber); box-shadow:0 0 0 2px var(--amber); }
.theme-swatch:hover  { transform:translateY(-2px); box-shadow:var(--shadow); }
.theme-swatch-bg   { height:36px; }
.theme-swatch-bar  { height:10px; }
.theme-swatch-name { font-size:10px; font-weight:700; text-align:center; padding:4px 3px; background:var(--surface); color:var(--text); }
.accent-swatches  { display:flex; gap:8px; flex-wrap:wrap; }
.accent-swatch    { width:40px; height:40px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:all .2s; }
.accent-swatch.active { border-color:var(--text); transform:scale(1.15); }
.accent-swatch:hover  { transform:scale(1.1); }

/* ═══════════════════════════════════════════════════════════════
   TABLET  (768px – 1023px)
═══════════════════════════════════════════════════════════════ */
@media (min-width:768px) and (max-width:1023px) {
  :root { --sidebar-w:200px; }
  .content { padding:16px; }
  .nav-item { padding:10px 14px; font-size:12.5px; }
  .stats-grid   { grid-template-columns:repeat(2,1fr); }
  .dash-grid-3  { grid-template-columns:1fr 1fr; }
  .profil-grid  { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE  (≤767px)
   Philosophie:
   - Sidebar als Vollbild-Overlay (z-index 300), Bottom-Nav darunter
   - Bottom-Nav verschwindet wenn Sidebar offen
   - Tabellen → gestapelte Card-Liste
   - Modals → Bottom-Sheet (von unten)
   - Formulare: volle Breite, 16px Schrift (kein iOS-Zoom)
═══════════════════════════════════════════════════════════════ */
@media (max-width:767px) {
  :root { --sidebar-w: min(300px,85vw); --topbar-h:52px; }

  /* Layout */
  .sidebar { transform:translateX(-100%); z-index:300; }
  .sidebar.open { transform:none; }
  .sb-overlay { z-index:299; }
  .main   { margin-left:0; }
  .content{ padding:12px 12px calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom)); }
  .topbar { padding:0 14px; height:var(--topbar-h); gap:8px; }
  .topbar-title { font-size:14px; }
  .hamburger    { display:none; } /* Bottom-Nav ersetzt Hamburger */

  /* ── Bottom Navigation ── */
  .bottom-nav {
    display:flex;
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:200;
    height:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:var(--navy);
    border-top:1px solid var(--navy3);
    box-shadow:0 -2px 20px rgba(0,0,0,.3);
  }
  .bottom-nav.bn-hidden { display:none; }
  .bn-item {
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:6px 4px;
    cursor:pointer;
    color:rgba(255,255,255,.4);
    font-size:9px;
    font-weight:700;
    letter-spacing:.02em;
    transition:all .15s;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    user-select:none;
  }
  .bn-item:active { transform:scale(.92); }
  .bn-item.active { color:var(--amber); }
  .bn-icon { font-size:20px; line-height:1; display:block; }
  .bn-label{ white-space:nowrap; }

  /* Toast oberhalb Bottom-Nav */
  .toast-container {
    left:10px; right:10px;
    bottom:calc(var(--bottom-nav-h) + 8px + env(safe-area-inset-bottom));
    max-width:none;
  }

  /* ── Tabellen → Card-Stack ── */
  .tbl-wrap { overflow-x:visible; }
  table, thead, tbody, th, td, tr { display:block; }
  thead { display:none; }
  tr {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    margin-bottom:10px;
    padding:4px 0;
    box-shadow:0 1px 6px rgba(0,0,0,.06);
  }
  tr:hover td { background:transparent; }
  td {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:9px 14px;
    border-bottom:1px solid var(--border);
    font-size:13px;
    min-height:42px;
  }
  td:last-child { border-bottom:none; justify-content:flex-end; }
  /* data-label als linke Beschriftung */
  td[data-label]::before {
    content:attr(data-label);
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    color:var(--muted);
    flex-shrink:0;
    min-width:88px;
  }
  td:last-child::before { display:none; }

  /* ── Modals → Bottom-Sheet ── */
  .moverlay { padding:0; align-items:flex-end; }
  .modal, .modal-lg, .modal-xl {
    max-width:100%;
    max-height:92vh;
    border-radius:20px 20px 0 0;
    animation:slide-up .25s cubic-bezier(.4,0,.2,1);
  }
  @keyframes slide-up {
    from { transform:translateY(100%); opacity:.5; }
    to   { transform:translateY(0);    opacity:1; }
  }
  .mbody { padding:16px; }
  .mhead { padding:14px 16px; }
  .mfoot {
    padding:12px 16px;
    padding-bottom:max(12px, env(safe-area-inset-bottom));
    flex-wrap:nowrap;
    gap:8px;
  }
  .mfoot .btn { flex:1; justify-content:center; padding:12px 8px; font-size:14px; }
  .mfoot-split { flex-direction:column; }
  .mfoot-split > div { width:100%; gap:8px; }
  .mfoot-split > div .btn { flex:1; justify-content:center; }

  /* ── Page Header ── */
  .page-header {
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    margin-bottom:12px;
  }
  .page-header .btn,
  .page-header > button { width:100%; justify-content:center; padding:12px; font-size:14px; }
  .page-header .flex.gap2 { flex-direction:column; gap:8px; }

  /* ── Filter-Chips: horizontaler Scroll ── */
  .filter-bar {
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
    margin-left:-12px; margin-right:-12px;
    padding-left:12px; padding-right:12px;
  }
  .filter-bar::-webkit-scrollbar { display:none; }
  .filter-chip { flex-shrink:0; padding:8px 14px; font-size:13px; }

  /* ── Formulare ── */
  .form-row, .form-row3 { grid-template-columns:1fr; gap:0; }
  .fc { font-size:16px; padding:11px 13px; } /* 16px verhindert Zoom auf iOS */
  select.fc { font-size:16px; }

  /* ── Stats ── */
  .stats-grid  { grid-template-columns:1fr 1fr; gap:10px; }
  .stat-value  { font-size:22px; }
  .stat-card   { padding:12px 14px; }

  /* ── Dashboard ── */
  .dash-grid   { grid-template-columns:1fr; }
  .dash-grid-3 { grid-template-columns:1fr 1fr; }

  /* ── Profil / Perm-Grid ── */
  .profil-grid { grid-template-columns:1fr; }
  .perm-grid   { grid-template-columns:1fr; }

  /* ── Termine Karte (Listansicht) ── */
  .acard-body  { padding:10px 12px; gap:8px; }
  .acard-time  { min-width:85px; font-size:12px; }
  .acard-meta  { display:none; } /* Meta-Chips ausblenden, spart Platz */

  /* ── Kalender: Monatsansicht kompakt ── */
  .cal-day { min-height:52px; padding:3px; }
  .cal-event { font-size:9px; }
  .cal-day-num { font-size:10px; }
  .cal-nav-title { font-size:14px; }

  /* ── Wochenkalender: schmaler ── */
  .week-grid { grid-template-columns:32px repeat(7,1fr); }
  .week-col-header div:first-child { font-size:8px; }
  .week-col-header div:last-child  { font-size:13px; }

  /* ── Ansicht-Toggle: nur Icons ── */
  .view-toggle-btn .vt-label { display:none; }
  .view-toggle-btn { padding:8px 10px; }

  /* ── Lohn-pro-Termin ── */
  .ai-time-input { width:84px; }
  .inst-field-group { gap:5px; }

  /* ── Ausbilder-Detail-Card ── */
  .inst-detail-card { padding:10px 12px; }

  /* ── Audit ── */
  .audit-row   { flex-wrap:wrap; }
  .audit-time  { font-size:10px; }

  /* ── Theme-Swatches ── */
  .theme-swatches { grid-template-columns:repeat(4,1fr); }

  /* ── Search ── */
  .search-overlay { padding:10px; align-items:flex-start; padding-top:52px; }
  .search-box { max-width:100%; border-radius:12px; }

  /* ── QR / Invite ── */
  .invite-link-box { font-size:11px; }
}

/* ── Sehr kleines Handy (≤480px) ── */
@media (max-width:480px) {
  .stats-grid { grid-template-columns:1fr; }
  .dash-grid-3{ grid-template-columns:1fr; }
  .stat-value { font-size:20px; }
  .page-title { font-size:18px; }
  .login-box  { padding:24px 16px; }
  .theme-swatches { grid-template-columns:repeat(3,1fr); }
  .cal-day    { min-height:40px; }
  .cal-event  { display:none; }
  .cal-day.has-events .cal-day-num::after { content:' ●'; color:var(--amber); }
}

/* ── Winziges Handy (≤360px) ── */
@media (max-width:360px) {
  .content { padding:10px; }
  .topbar  { padding:0 10px; }
  .fc      { font-size:15px; }
  .btn     { font-size:12px; }
  .page-title { font-size:16px; }
  .bn-label   { display:none; }
  .bn-item    { min-height:44px; }
  .theme-swatches { grid-template-columns:repeat(2,1fr); }
}

/* ── Landscape Handy ── */
@media (max-width:767px) and (orientation:landscape) {
  :root { --bottom-nav-h:50px; }
  .modal, .modal-lg, .modal-xl { max-height:86vh; border-radius:12px; }
  .moverlay { align-items:center; padding:10px; }
  .content { padding-bottom:calc(var(--bottom-nav-h) + 8px + env(safe-area-inset-bottom)); }
}

/* ── Großer Desktop (≥1440px) ── */
@media (min-width:1440px) {
  :root { --sidebar-w:260px; }
  .content { max-width:1320px; }
}

/* ── Safe Area (iPhone Notch / Home Bar) ── */
@supports (padding:max(0px)) {
  .sidebar { padding-bottom:env(safe-area-inset-bottom); }
  .topbar  {
    padding-left:max(22px, env(safe-area-inset-left));
    padding-right:max(22px, env(safe-area-inset-right));
  }
}

/* ── Ausbilder Schnelleingabe & Gruppen ── */
.qi-table td input.fc, .qi-table td select.fc {
  border-radius: 5px;
}
/* Gruppen-Header in Ausbilder */
.inst-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════
   ANWESENHEITS-KARTEN (TerminDetail)
══════════════════════════════════════════════════════ */
.att-card {
  border-radius: 10px;
  margin-bottom: 8px;
  border: 2px solid var(--border);
  transition: all .2s;
  overflow: hidden;
  position: relative;
}
.att-card:not(.att-locked):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.att-card.att-yes {
  border-color: #16a34a;
  background: linear-gradient(135deg, rgba(22,163,74,.08) 0%, rgba(22,163,74,.03) 100%);
}
.att-card.att-no {
  border-color: var(--border);
  background: var(--surface);
  opacity: .85;
}
.att-card.att-no:not(.att-locked):hover {
  border-color: #16a34a;
  opacity: 1;
  background: rgba(22,163,74,.04);
}
.att-card-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
}
/* Kreis-Toggle */
.att-toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
  color: transparent;
  background: var(--bg);
  flex-shrink: 0;
  transition: all .2s;
}
.att-toggle.on {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  box-shadow: 0 2px 8px rgba(22,163,74,.35);
}
/* Status-Badge rechts */
.att-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--border);
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s;
}
.att-status-badge.on {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* Zeitfelder innerhalb der att-card */
.att-card .inst-detail-fields {
  padding: 8px 14px 10px;
  border-top: 1px dashed var(--border);
  margin-top: 0;
}

/* Dark mode */
html.dark .att-card.att-yes { background: rgba(22,163,74,.1); }
html.dark .att-card.att-no  { background: var(--surface); }
html.dark .att-toggle       { background: var(--bg2); }
html.dark .att-status-badge.on { background: rgba(22,163,74,.15); color:#4ade80; border-color:rgba(22,163,74,.3); }

/* Mobile */
@media (max-width:767px) {
  .att-status-badge { display: none; }
  .att-card-inner   { gap: 10px; padding: 10px 12px; }
  .att-toggle       { width: 28px; height: 28px; font-size: 14px; }
}

/* ── Heutiger Tag – Banner ── */
.date-group-today > .date-label {
  color: #d97706 !important;
  font-size: 13px !important;
}
.today-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(245,158,11,.4);
  letter-spacing: .01em;
}
.today-banner-sub {
  font-size: 11px;
  font-weight: 500;
  opacity: .85;
  margin-left: auto;
}

/* Kalender: heute sehr klar */
.cal-day.today {
  border: 2px solid #f59e0b !important;
  background: linear-gradient(135deg, rgba(245,158,11,.18) 0%, rgba(245,158,11,.06) 100%) !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.25) !important;
}
.cal-day.today .cal-day-num { color: #d97706 !important; font-size: 14px !important; }
.week-col-header.today-col {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* ── Mobile Topbar Logout ── */
.topbar-username {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-username span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-logout-btn {
  display: none; /* Desktop: versteckt – Logout in Sidebar */
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--danger);
  padding: 6px;
  border-radius: 7px;
  line-height: 1;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.topbar-logout-btn:hover { background: rgba(220,38,38,.1); }

@media (max-width: 767px) {
  .topbar-logout-btn { display: flex; align-items: center; justify-content: center; }
  .topbar-username   { display: none; } /* Platz sparen auf Handy */
}

/* ══════════════════════════════════════════════════════════════
   FEHLENDE CSS-KLASSEN – Dashboard, Suche, Statistik
══════════════════════════════════════════════════════════════ */

/* ── Stat-Sub ── */
.stat-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Dashboard Cards ── */
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  overflow: hidden;
}
.dash-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.dash-card-title {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-card-body {
  padding: 12px 16px;
}
.dash-empty {
  padding: 18px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── Chart ── */
.chart-container {
  width: 100%;
  height: 160px;
  overflow: hidden;
}

/* ── Upcoming appointments ── */
.upcoming-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.upcoming-item:last-child { border-bottom: none; }
.upcoming-item:hover { opacity: .8; }
.upcoming-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.upcoming-info { flex: 1; min-width: 0; }
.upcoming-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upcoming-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.upcoming-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--amber);
  flex-shrink: 0;
}

/* ── Top Instructor Bar ── */
.top-inst-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.top-inst-bar:last-child { border-bottom: none; }
.top-inst-name {
  font-size: 13px;
  font-weight: 600;
  min-width: 90px;
  max-width: 120px;
  flex-shrink: 0;
}
.top-inst-track {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.top-inst-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
  min-width: 4px;
}
.top-inst-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  min-width: 44px;
  text-align: right;
  flex-shrink: 0;
}

/* ── GlobalSearch ── */
.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  border-bottom: 1px solid var(--border);
}
.search-input-icon { font-size: 16px; color: var(--muted); flex-shrink: 0; }
.search-input      { flex: 1; border: none; outline: none; font-family: inherit; font-size: 15px; background: transparent; color: var(--text); padding: 10px 0; }
.search-clear      { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 18px; padding: 4px; line-height: 1; flex-shrink: 0; }
.search-clear:hover { color: var(--text); }

.search-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.search-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}
.search-footer kbd {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: monospace;
  font-size: 10px;
  color: var(--text);
}
.search-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
mark.search-highlight,
.search-highlight {
  background: var(--amber-pale);
  color: var(--amber);
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Dark mode Dashboard ── */
html.dark .dash-card     { background: var(--surface); }
html.dark .dash-card-head{ background: var(--bg); }
html.dark .dash-empty    { color: var(--muted); }

/* ── Mobile Dashboard ── */
@media (max-width: 767px) {
  .dash-card-title { font-size: 12px; }
  .chart-container { height: 130px; }
  .top-inst-name   { min-width: 70px; max-width: 90px; font-size: 12px; }
  .upcoming-title  { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   OFFLINE UI – Indikator, Badge, Banner
══════════════════════════════════════════════════════════════ */
.offline-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: pulse-offline 2s infinite;
}
@keyframes pulse-offline {
  0%, 100% { opacity: 1; }
  50%       { opacity: .7; }
}

.sync-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--warn);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.sync-badge:hover { filter: brightness(1.1); transform: scale(1.05); }

/* Offline-Warnung in Modals/Formularen */
.offline-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 12px;
  color: var(--warn);
  margin-bottom: 12px;
}

/* Offline-Markierung an Karten (nicht synchronisiert) */
.is-offline-pending {
  border-left: 4px solid var(--warn) !important;
  opacity: .85;
}
.is-offline-pending::after {
  content: '🕐';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
}
.appt-card { position: relative; }

@media (max-width: 767px) {
  .offline-badge { font-size: 10px; padding: 3px 7px; }
  .sync-badge    { font-size: 10px; padding: 3px 7px; }
}

/* ══════════════════════════════════════════════════════════════
   OFFLINE UI – Banner, Badges, Pending-Markierungen
══════════════════════════════════════════════════════════════ */

/* Offline-Banner unter Topbar */
.offline-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #1e3a5f, #1a3050);
  color: #93c5fd;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(147,197,253,.2);
}
.offline-banner-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f87171;
  flex-shrink: 0;
  animation: pulse-offline 1.5s infinite;
}
@keyframes pulse-offline {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(1.3); }
}
.offline-banner-sub {
  font-size: 11px;
  font-weight: 400;
  opacity: .8;
  flex: 1;
  min-width: 180px;
}
.offline-banner-count {
  background: rgba(248,113,113,.2);
  color: #f87171;
  border: 1px solid rgba(248,113,113,.3);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Sync-Banner wenn wieder online und Queue ausstehend */
.sync-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  background: linear-gradient(135deg, #065f46, #047857);
  color: #d1fae5;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s;
  border-bottom: 1px solid rgba(209,250,229,.15);
  animation: slide-down .3s ease;
}
.sync-banner:hover { filter: brightness(1.1); }
@keyframes slide-down {
  from { transform:translateY(-100%); opacity:0; }
  to   { transform:translateY(0);     opacity:1; }
}

/* Kleiner roter Punkt in Topbar wenn offline */
.topbar-offline-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #f87171;
  flex-shrink: 0;
  animation: pulse-offline 1.5s infinite;
}

/* Termin-Karten die offline erstellt wurden */
.is-offline-pending {
  border-left-color: #60a5fa !important;
  opacity: .85;
}
.is-offline-pending::after {
  content: '🔄 Ausstehend';
  display: block;
  font-size: 10px;
  color: #60a5fa;
  padding: 2px 15px 6px;
  font-weight: 700;
}

/* Dark mode */
html.dark .offline-banner { background: linear-gradient(135deg,#0c1e36,#0a1a2e); }
html.dark .sync-banner     { background: linear-gradient(135deg,#022c22,#065f46); color:#a7f3d0; }

/* Mobile */
@media (max-width:767px) {
  .offline-banner     { font-size:12px; padding:9px 12px; gap:8px; }
  .offline-banner-sub { display:none; }
  .sync-banner        { font-size:12px; padding:8px 12px; }
}

/* ── Live-Sync Indikator ── */
.live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--success);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  animation: live-fade 4s ease forwards;
}
@keyframes live-fade {
  0%   { opacity: 0; transform: translateY(-4px); }
  10%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Live-Dot auf Terminseite wenn jemand gerade online */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  animation: live-pulse 1.5s infinite;
  flex-shrink: 0;
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: .6; }
}

@media (max-width: 767px) {
  .live-badge { font-size: 10px; padding: 3px 8px; }
}

/* ── Session-Bar (components.js SessionTimeoutBanner) ── */
.session-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--amber-pale);
  border: 1px solid rgba(232,160,32,.3);
  border-radius: 8px;
  padding: 8px 13px;
  font-size: 12px;
  color: var(--amber);
  margin-bottom: 14px;
}

/* ══════════════════════════════════════════════════════════════
   LIVE-SYNC INDIKATOREN
══════════════════════════════════════════════════════════════ */
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.live-dot-sse {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: live-pulse-green 2s infinite;
}
.live-dot-poll {
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245,158,11,.6);
  animation: live-pulse-amber 3s infinite;
}
@keyframes live-pulse-green {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@keyframes live-pulse-amber {
  0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.6); }
  70%  { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* Flash-Highlight wenn ein Termin live aktualisiert wird */
@keyframes live-flash {
  0%   { background: rgba(34,197,94,.25); }
  100% { background: transparent; }
}
.appt-card.live-updated {
  animation: live-flash .8s ease-out forwards;
}

/* ── Mobile: Ausbilder im Termin sichtbar ── */
@media (max-width: 767px) {
  .inst-list { display: flex !important; flex-direction: column; gap: 6px; }
  .att-card  { display: block !important; }
  .att-card-inner { flex-wrap: nowrap; }
  /* Zeitfelder auf Handy kompakter */
  .att-card .inst-detail-fields { padding: 8px 10px 10px; }
  .ai-time-input { font-size: 13px !important; padding: 5px 7px !important; }
  /* Status-Badge auf Handy ausblenden, Kreis reicht */
  .att-status-badge { display: none; }
}

/* ── Mobile: Attendance tappable fix ── */
@media (max-width: 767px) {
  .att-card {
    -webkit-tap-highlight-color: rgba(0,0,0,.1);
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  .att-card.att-locked {
    cursor: default;
    opacity: 0.75;
  }
  .att-card-inner {
    min-height: 52px;
    padding: 11px 12px;
  }
  .att-toggle {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}