/* Lehrertool_AT – Design System v3 */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;600&display=swap');
:root{
  --ff-display:'Plus Jakarta Sans',system-ui,sans-serif;--ff-body:'Plus Jakarta Sans',system-ui,sans-serif;--ff-serif:'Source Serif 4',Georgia,serif;--ff-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --navy:#1e3a5f;--navy-deep:#0f172a;--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;
  --warm-50:#faf8f5;--warm-100:#f3efe8;--warm-200:#e8e0d4;--warm-300:#d4c9b9;
  --emerald:#059669;--emerald-light:#ecfdf5;--teal:#0d9488;--teal-light:#f0fdfa;--blue:#2563eb;--blue-light:#eff6ff;--amber:#d97706;--amber-light:#fffbeb;--rose:#e11d48;--rose-light:#fff1f2;--violet:#7c3aed;--violet-light:#f5f3ff;--orange:#ea580c;--orange-light:#fff7ed;--cyan:#0891b2;--cyan-light:#ecfeff;
  --bg-app:#eae6df;--bg-card:#fff;--shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.07);--shadow-lg:0 10px 40px rgba(0,0,0,.1);--shadow-card:0 1px 4px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.04);--shadow-card-hover:0 8px 24px rgba(0,0,0,.08);
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--border:1px solid rgba(0,0,0,.07);--ease:cubic-bezier(.4,0,.2,1);--sidebar-w:260px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased}
body{font-family:var(--ff-body);line-height:1.6;color:var(--slate-800);background:var(--bg-app);overflow-x:hidden}

/* Shell */
.app-shell{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,#0f172a,#1e293b);color:#fff;position:fixed;top:0;left:0;bottom:0;z-index:100;display:flex;flex-direction:column;transition:transform .25s var(--ease);overflow-y:auto;overflow-x:hidden}
.sidebar-brand{padding:24px 22px 20px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-brand-icon{font-size:28px;margin-bottom:6px}
.sidebar-brand h1{font-family:var(--ff-display);font-weight:800;font-size:17px;letter-spacing:-.02em;line-height:1.2}
.sidebar-brand .brand-sub{font-size:11px;font-weight:500;color:rgba(255,255,255,.4);margin-top:3px}
.sidebar-section{padding:16px 14px 8px}
.sidebar-section-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);padding:0 10px;margin-bottom:6px}
.sidebar-link{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-md);text-decoration:none;color:rgba(255,255,255,.6);font-weight:600;font-size:13px;transition:all .15s var(--ease);margin-bottom:2px;position:relative}
.sidebar-link:hover{color:#fff;background:rgba(255,255,255,.08)}
.sidebar-link.active{color:#fff;background:rgba(255,255,255,.12)}
.sidebar-link.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--emerald);border-radius:0 3px 3px 0}
.sidebar-link .sl-icon{width:22px;text-align:center;font-size:16px;flex-shrink:0}
.sidebar-link .sl-badge{margin-left:auto;background:rgba(255,255,255,.15);color:rgba(255,255,255,.8);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px}
.sidebar-link.coming{opacity:.35;cursor:default;pointer-events:none}
.sidebar-footer{margin-top:auto;padding:16px 14px;border-top:1px solid rgba(255,255,255,.06)}
.sidebar-footer-text{font-size:10px;color:rgba(255,255,255,.25);text-align:center;padding:4px 8px}
.sidebar-toggle{display:none;position:fixed;top:14px;left:14px;z-index:200;width:42px;height:42px;border-radius:var(--r-md);background:var(--navy-deep);color:#fff;border:none;font-size:20px;cursor:pointer;align-items:center;justify-content:center;box-shadow:var(--shadow-lg)}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99;display:none}
@media(max-width:900px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0);box-shadow:20px 0 60px rgba(0,0,0,.3)}.sidebar-toggle{display:flex}.main{margin-left:0!important}.sidebar-overlay.show{display:block}}

/* Main – einheitlich für alle Module (inkl. SA-Builder), Sidebar-Überlappung vermeiden */
.main{flex:1;margin-left:var(--sidebar-w);min-height:100vh;width:calc(100% - var(--sidebar-w));max-width:100%;transition:margin-left .25s var(--ease);box-sizing:border-box}
.page-header{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:var(--border);padding:28px 36px 24px;position:sticky;top:0;z-index:50}
.page-header h1{font-family:var(--ff-display);font-weight:800;font-size:22px;color:var(--slate-800);letter-spacing:-.02em}
.page-header .ph-sub{font-size:13px;color:var(--slate-500);margin-top:2px}
.page-body{padding:28px 36px 60px;max-width:1280px}
@media(max-width:900px){.page-header{padding:20px 16px 16px 60px}.page-body{padding:16px}}

/* Cards */
.card{background:var(--bg-card);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow .2s var(--ease)}
.card-header{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:var(--border)}
.card-header h2{font-family:var(--ff-display);font-weight:700;font-size:14px;letter-spacing:-.01em}
.card-header.accent{background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:#fff;border-bottom:none}.card-header.accent h2{color:#fff}
.card-header.emerald{background:var(--emerald);color:#fff;border-bottom:none}.card-header.emerald h2{color:#fff}
.card-header.teal{background:var(--teal);color:#fff;border-bottom:none}.card-header.teal h2{color:#fff}
.card-header.amber{background:var(--amber);color:#fff;border-bottom:none}.card-header.amber h2{color:#fff}
.card-header.rose{background:var(--rose);color:#fff;border-bottom:none}.card-header.rose h2{color:#fff}
.card-header.violet{background:var(--violet);color:#fff;border-bottom:none}.card-header.violet h2{color:#fff}
.card-body{padding:20px 22px}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.stat-card{background:var(--bg-card);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--emerald);opacity:.6}
.stat-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--slate-400)}
.stat-value{font-family:var(--ff-display);font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--slate-800);margin-top:4px}
.stat-detail{font-size:12px;color:var(--slate-500);margin-top:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:700;font-size:13px;padding:10px 18px;border-radius:var(--r-md);border:none;cursor:pointer;color:#fff;background:var(--navy);text-decoration:none;transition:all .15s var(--ease);white-space:nowrap}
.btn:hover{filter:brightness(1.15);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.btn.emerald{background:var(--emerald)}.btn.teal{background:var(--teal)}.btn.blue{background:var(--blue)}.btn.amber{background:var(--amber)}.btn.rose{background:var(--rose)}.btn.violet{background:var(--violet)}.btn.orange{background:var(--orange)}
.btn.sm{padding:7px 14px;font-size:12px}.btn.xs{padding:5px 10px;font-size:11px;border-radius:var(--r-sm)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-display);font-weight:700;font-size:13px;padding:10px 18px;border-radius:var(--r-md);border:1.5px solid var(--warm-200);background:#fff;cursor:pointer;color:var(--slate-700);text-decoration:none;transition:all .15s var(--ease);white-space:nowrap}
.btn-outline:hover{border-color:var(--navy);color:var(--navy);background:var(--blue-light);transform:translateY(-1px)}.btn-outline:active{transform:translateY(0)}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-display);font-weight:600;font-size:12px;padding:6px 12px;border-radius:var(--r-sm);background:transparent;border:none;cursor:pointer;color:var(--slate-500);transition:all .12s}
.btn-ghost:hover{color:var(--navy);background:var(--slate-100)}

/* Pills */
.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-family:var(--ff-display);font-size:11px;font-weight:700;white-space:nowrap;background:var(--slate-100);color:var(--slate-600)}
.pill.success{background:var(--emerald-light);color:var(--emerald)}.pill.warn{background:var(--amber-light);color:var(--amber)}.pill.danger{background:var(--rose-light);color:var(--rose)}.pill.info{background:var(--blue-light);color:var(--blue)}.pill.violet{background:var(--violet-light);color:var(--violet)}.pill.teal{background:var(--teal-light);color:var(--teal)}

/* Forms */
.form-label{display:block;font-family:var(--ff-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--slate-500);margin-bottom:5px}
input,select,textarea{font-family:var(--ff-body);font-size:14px;padding:9px 13px;border:1.5px solid var(--warm-200);border-radius:var(--r-md);background:#fff;color:var(--slate-800);transition:border-color .2s,box-shadow .2s;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,58,95,.1)}
select{cursor:pointer}textarea{resize:vertical;min-height:60px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-row{display:grid;gap:14px}
.form-row.cols-2{grid-template-columns:1fr 1fr}.form-row.cols-3{grid-template-columns:1fr 1fr 1fr}.form-row.cols-4{grid-template-columns:1fr 1fr 1fr 1fr}
@media(max-width:700px){.form-row.cols-3,.form-row.cols-4{grid-template-columns:1fr 1fr}}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{background:var(--slate-800);color:#fff;font-family:var(--ff-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:10px 14px;text-align:left;white-space:nowrap}
thead th:first-child{border-radius:var(--r-md) 0 0 0}thead th:last-child{border-radius:0 var(--r-md) 0 0}
tbody td{padding:10px 14px;border-bottom:1px solid var(--warm-100);vertical-align:middle}
tbody tr{transition:background .1s}tbody tr:hover td{background:var(--warm-50)}tbody tr.selected td{background:var(--blue-light)}
thead th.sortable{cursor:pointer;user-select:none}thead th.sortable:hover{background:var(--navy)}thead th.sorted{background:var(--navy)}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--navy-deep);color:#fff;padding:12px 22px;border-radius:var(--r-lg);font-family:var(--ff-display);font-weight:600;font-size:13px;z-index:9999;pointer-events:none;opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease);box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Panels */
.form-panel{background:#fff;border:1.5px solid var(--warm-200);border-radius:var(--r-lg);padding:24px;margin-bottom:20px;box-shadow:var(--shadow-md)}
.form-panel h3{font-family:var(--ff-display);font-weight:800;font-size:16px;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between}

/* Empty */
.empty-state{text-align:center;padding:50px 20px;color:var(--slate-400)}
.empty-state .es-icon{font-size:48px;margin-bottom:12px;opacity:.6}

/* Helpers */
.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}
.gap-xs{gap:6px}.gap-sm{gap:10px}.gap-md{gap:16px}.gap-lg{gap:24px}.grow{flex:1}
.text-xs{font-size:11px}.text-sm{font-size:12px}.text-muted{color:var(--slate-500)}.font-bold{font-weight:700}.font-mono{font-family:var(--ff-mono)}
.mb-xs{margin-bottom:6px}.mb-sm{margin-bottom:10px}.mb-md{margin-bottom:18px}.mb-lg{margin-bottom:28px}.mt-xs{margin-top:6px}.mt-sm{margin-top:10px}.mt-md{margin-top:18px}.mt-lg{margin-top:28px}
.search-input-wrap{position:relative}.search-input-wrap input{padding-left:36px}.search-input-wrap::before{content:'⌕';position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--slate-400);pointer-events:none}
.gender-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--r-sm);font-family:var(--ff-display);font-weight:800;font-size:11px}
.gender-badge.m{background:#dbeafe;color:#2563eb}.gender-badge.w{background:#fce7f3;color:#db2777}.gender-badge.d{background:var(--violet-light);color:var(--violet)}
.console{font-family:var(--ff-mono);font-size:12px;background:var(--navy-deep);color:#a5f3c4;padding:14px 16px;border-radius:var(--r-md);white-space:pre-wrap;line-height:1.7}

/* Context bar (reusable) */
.ctx-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:16px 22px;border-bottom:var(--border);background:var(--warm-50)}
.ctx-bar .form-group select,.ctx-bar .form-group input{width:auto;min-width:140px}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.animate-in{animation:fadeInUp .4s var(--ease) both}
.animate-stagger>*{animation:fadeInUp .4s var(--ease) both}
.animate-stagger>*:nth-child(1){animation-delay:0s}.animate-stagger>*:nth-child(2){animation-delay:.07s}.animate-stagger>*:nth-child(3){animation-delay:.14s}.animate-stagger>*:nth-child(4){animation-delay:.21s}

/* Print */
@media print{.sidebar,.sidebar-toggle,.sidebar-overlay{display:none!important}.main{margin-left:0!important}.page-header{position:static}.btn,.btn-outline,.btn-ghost{display:none}.card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}}

/* === Legacy Bridge: old pages use these classes === */
.main .page{background:var(--bg-card);max-width:1100px;border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;margin:24px auto}
.main > .app{margin:0;width:100%;min-height:calc(100vh - 48px);border-top:none;box-shadow:none}
.site-header{background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:#fff;padding:28px 36px 22px;position:relative}
.site-header h1{font-family:var(--ff-display);font-weight:800;font-size:22px;letter-spacing:-.02em;margin:0}
.hdr-school{font-family:var(--ff-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.6;margin-bottom:4px}
.hdr-sub{font-size:13px;opacity:.75;margin-top:3px}
.content{padding:24px 36px 40px}
@media(max-width:900px){.content{padding:16px}.site-header{padding:20px 16px 16px}}