/* stundenplan – eigenes Design, hell & dunkel (Tokens + Themes) */

/* ── Schrift: Inter, selbst gehostet (kein Google, kein IP-Abfluss) ───────────── */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter-800.woff2') format('woff2')}

/* ── Farb-Tokens: Standard = hell ─────────────────────────────────────────────── */
:root {
  --bg:#eaeef4; --panel:#ffffff; --panel-2:#f6f8fb;
  --text:#26293c; --muted:#5f6b7e; --border:#e1e6ef; --border-strong:#cdd4e0;
  --accent:#E2001A; --accent-strong:#b00015; --accent-soft:rgba(226,0,26,.10);
  --ring:rgba(200,16,46,.30); --ok:#16a34a;
  --glow-1:rgba(200,16,46,.10); --glow-2:rgba(37,99,235,.08);
  --shadow-sm:0 1px 2px rgba(20,30,50,.06);
  --shadow:0 1px 2px rgba(20,30,50,.05), 0 12px 34px rgba(20,30,50,.10);
  --shadow-lg:0 8px 22px rgba(20,30,50,.10), 0 30px 70px rgba(20,30,50,.16);
  color-scheme: light;
}
/* Dunkel: per Systemeinstellung … */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d121c; --panel:#161e2c; --panel-2:#1c2534;
    --text:#e7ecf5; --muted:#93a1b8; --border:#28323f; --border-strong:#3a4657;
    --accent:#ff5566; --accent-strong:#ff7280; --accent-soft:rgba(255,85,102,.14);
    --ring:rgba(255,85,102,.40); --ok:#3ecf72;
    --glow-1:rgba(255,85,102,.14); --glow-2:rgba(90,140,255,.10);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.5);
    --shadow-lg:0 10px 26px rgba(0,0,0,.5), 0 34px 80px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
/* … und der Umschalter gewinnt in beide Richtungen */
:root[data-theme="light"] {
  --bg:#eaeef4; --panel:#ffffff; --panel-2:#f6f8fb;
  --text:#26293c; --muted:#5f6b7e; --border:#e1e6ef; --border-strong:#cdd4e0;
  --accent:#E2001A; --accent-strong:#b00015; --accent-soft:rgba(226,0,26,.10);
  --ring:rgba(200,16,46,.30); --ok:#16a34a;
  --glow-1:rgba(200,16,46,.10); --glow-2:rgba(37,99,235,.08);
  --shadow-sm:0 1px 2px rgba(20,30,50,.06);
  --shadow:0 1px 2px rgba(20,30,50,.05), 0 12px 34px rgba(20,30,50,.10);
  --shadow-lg:0 8px 22px rgba(20,30,50,.10), 0 30px 70px rgba(20,30,50,.16);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:#0d121c; --panel:#161e2c; --panel-2:#1c2534;
  --text:#e7ecf5; --muted:#93a1b8; --border:#28323f; --border-strong:#3a4657;
  --accent:#ff5566; --accent-strong:#ff7280; --accent-soft:rgba(255,85,102,.14);
  --ring:rgba(255,85,102,.40); --ok:#3ecf72;
  --glow-1:rgba(255,85,102,.14); --glow-2:rgba(90,140,255,.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.5);
  --shadow-lg:0 10px 26px rgba(0,0,0,.5), 0 34px 80px rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing:border-box; }
html { overflow-x:hidden; font-size:15px; }   /* nie horizontal scrollen; kleinere Basis-Schrift (skaliert alles per rem) */
html, body { min-height:100%; }
body {
  margin:0; color:var(--text); line-height:1.55;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background-color:var(--bg);
  /* weicher, lebendiger Verlaufs-Hintergrund statt sterilem Grau */
  background-image:
    radial-gradient(1100px 620px at 100% -8%, var(--glow-1), transparent 62%),
    radial-gradient(900px 560px at -8% 112%, var(--glow-2), transparent 60%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .25s ease, color .25s ease;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Topbar ───────────────────────────────────────────────────────────────────── */
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:#E2001A;
  border-bottom:1px solid rgba(0,0,0,.10); padding:.5rem 1.5rem;
  position:sticky; top:0; z-index:20;
}
.brand { margin-right:auto; display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; }
.brand-logo { display:inline-flex; flex:none; }
.brand-txt { display:flex; flex-direction:column; line-height:1.12; }
.brand-t1 { font-size:1.08rem; font-weight:800; color:#fff; letter-spacing:.01em; }
.brand-t2 { font-size:.72rem; font-weight:400; color:rgba(255,255,255,.9); }
.tnav { display:flex; align-items:center; gap:.55rem; font-size:.9rem; min-width:0; }
.tnav .uname { font-weight:600; }
.tnav .uname, .tnav a.uname, .tnav .un-name { color:#fff; text-decoration:none; }
.tnav a.uname:hover { color:#fff; text-decoration:underline; }
.tnav .caret { color:rgba(255,255,255,.85); }
.tnav .theme-btn { color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.12); }
.tnav .theme-btn:hover { background:rgba(255,255,255,.24); border-color:#fff; }
.tnav .badge { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#E2001A; background:#fff; border-radius:999px; padding:.18rem .6rem; }
.tlink { font-weight:600; color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:9px; padding:.4rem .75rem; transition:.15s; }
.tlink:hover { border-color:#fff; color:#fff; text-decoration:none; background:rgba(255,255,255,.15); }
.nav-toggle { display:none; flex:none; width:2.5rem; height:2.3rem; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.15); color:#fff; border-radius:9px; font-size:1.2rem; line-height:1; cursor:pointer; }
.nav-toggle:hover { background:rgba(255,255,255,.28); border-color:#fff; color:#fff; }
.nav-backdrop { display:none; }

/* ── Shell: Sidebar + Inhalt (unter der vollen Topbar) ───────────────────────── */
.shell { display:grid; grid-template-columns:248px minmax(0,1fr); }
.content { padding:2.2rem 1.9rem 3rem; min-width:0; width:100%; max-width:1800px; margin-inline:auto; }  /* volle Spaltenbreite bis 1800px, auf sehr breiten Monitoren mittig */

.sidebar { position:sticky; top:58px; align-self:start; padding:1.4rem .75rem; border-right:1px solid var(--border); }
.side-nav { display:flex; flex-direction:column; gap:.2rem; }
.side-sep { height:1px; background:var(--border); margin:.65rem .5rem; }
.side-group { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); padding:.75rem .8rem .3rem; }
.nav-item { display:flex; align-items:center; gap:.7rem; padding:.6rem .75rem; border-radius:11px; font-weight:600; font-size:.94rem; color:var(--muted); border:1px solid transparent; transition:background .13s, color .13s, box-shadow .13s; }
.nav-item .ni-ico { width:1.5rem; flex:none; display:inline-flex; align-items:center; justify-content:center; }
a.nav-item:hover { background:var(--accent-soft); color:var(--accent); text-decoration:none; }
.nav-item.active { background:var(--accent-soft); color:var(--accent); box-shadow:inset 3px 0 0 var(--accent); }
.nav-item.disabled { opacity:.55; cursor:default; }
.nav-item .soon { margin-left:auto; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:.1rem .42rem; }

/* ── Handy: Sidebar wird zur ausklappbaren Schublade (☰) ──────────────────────── */
@media (max-width:880px) {
  .nav-toggle { display:inline-flex; }
  .topbar { padding:.6rem .8rem; gap:.55rem; overflow:hidden; }
  .brand-txt { display:none; }            /* am Handy nur das Logo → mehr Platz, kein Überlauf */
  .usermenu .uname { max-width:52vw; }
  .shell { grid-template-columns:1fr; }
  .content { padding:1.15rem 1rem 3.5rem; max-width:none; }
  .sidebar { position:fixed; top:0; left:0; height:100dvh; width:min(84vw,300px); z-index:60;
    transform:translateX(-100%); transition:transform .22s ease; overflow-y:auto;
    align-self:auto; background:var(--panel); border-right:1px solid var(--border); border-bottom:none; padding:1rem .7rem; }
  body.nav-open .sidebar { transform:none; box-shadow:var(--shadow-lg); }
  .side-nav { flex-direction:column; gap:.25rem; }
  .side-group { padding-top:.9rem; }
  .nav-item { white-space:nowrap; padding:.8rem .85rem; font-size:1rem; }
  .nav-item.active { box-shadow:inset 3px 0 0 var(--accent); }
  .nav-backdrop { display:block; position:fixed; inset:0; z-index:55; background:rgba(8,12,22,.5);
    opacity:0; pointer-events:none; transition:opacity .2s; }
  body.nav-open .nav-backdrop { opacity:1; pointer-events:auto; }
}
/* Kleiner Schirm: allgemeine Touch-/Lesbarkeitsanpassungen (greift auf allen Seiten) */
@media (max-width:640px) {
  h1 { font-size:1.35rem; }
  .content { padding:1rem .85rem 3.5rem; }
  .btn { padding:.62rem .95rem; }
  .table-wrap { -webkit-overflow-scrolling:touch; }
}

h1 { font-size:1.6rem; font-weight:800; letter-spacing:-.01em; margin:.1rem 0 .35rem; }
.lead { color:var(--muted); margin:0 0 1.6rem; font-size:1rem; }

/* ── Karten ──────────────────────────────────────────────────────────────────── */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.1rem; }
.card {
  position:relative; background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:1.25rem 1.35rem; box-shadow:var(--shadow); overflow:hidden;
}
.card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--accent), transparent); opacity:.55; }
.card h3 { margin:.1rem 0 .4rem; font-size:1.05rem; font-weight:800; }
.card p { margin:0; color:var(--muted); font-size:.92rem; }
a.card { color:inherit; transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease; }
a.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--border-strong); text-decoration:none; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:1px solid var(--border-strong); background:var(--panel); color:var(--text);
  border-radius:11px; padding:.62rem 1.05rem; font-size:.94rem; font-weight:700; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s, background .12s, color .12s; }
.btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 4px var(--ring); }
.btn.primary { border-color:var(--accent-strong); color:#fff; background:var(--accent); box-shadow:none; }
.btn.primary:hover { color:#fff; background:var(--accent-strong); filter:none; box-shadow:none; }
.btn.block { width:100%; }

/* ── Auth (Login / Setup) ────────────────────────────────────────────────────── */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }
.auth-card {
  position:relative; width:100%; max-width:410px; background:var(--panel);
  border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); padding:2rem 1.8rem 1.9rem;
  animation:rise .35s cubic-bezier(.2,.7,.2,1) both;
}
.auth-card::before { content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #ffb020)); border-radius:20px 20px 0 0; }
@keyframes rise { from { opacity:0; transform:translateY(10px) scale(.99); } to { opacity:1; transform:none; } }
.auth-logo { font-size:2rem; text-align:center; line-height:1; }
.auth-card h1 { text-align:center; font-size:1.3rem; margin:.5rem 0 .1rem; }
.auth-card .sub { text-align:center; color:var(--muted); font-size:.92rem; margin:0 0 1.4rem; }
.field { margin-bottom:1.05rem; }
.field label { display:block; font-size:.78rem; font-weight:700; letter-spacing:.02em; color:var(--muted); margin-bottom:.4rem; }
.field input, .field select {
  width:100%; border:1.5px solid var(--border-strong); border-radius:11px; padding:.7rem .85rem; font-size:.98rem;
  background:var(--panel-2); color:var(--text); transition:border-color .15s, box-shadow .15s, background .15s; }
.field input::placeholder { color:color-mix(in srgb, var(--muted) 75%, transparent); }
.field input:focus, .field select:focus { outline:none; border-color:var(--accent); background:var(--panel); box-shadow:0 0 0 4px var(--ring); }
.msg { border-radius:11px; padding:.7rem .85rem; font-size:.88rem; font-weight:600; margin-bottom:1.05rem; border:1px solid transparent; }
.msg.err { background:var(--accent-soft); color:var(--accent-strong); border-color:color-mix(in srgb, var(--accent) 35%, transparent); }
.msg.ok  { background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 35%, transparent); }
.hint-small { font-size:.78rem; color:var(--muted); margin:.35rem 0 0; }

/* ── Theme-Umschalter (schwebend, auf jeder Seite) ────────────────────────────── */
.theme-toggle { position:fixed; top:.85rem; right:.9rem; z-index:60; width:2.5rem; height:2.5rem;
  border-radius:50%; border:1px solid var(--border); background:color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--text); font-size:1.15rem; line-height:1;
  cursor:pointer; box-shadow:var(--shadow-sm); transition:transform .15s, border-color .15s, box-shadow .15s; }
.theme-toggle:hover { transform:scale(1.06); border-color:var(--accent); box-shadow:var(--shadow); }
.theme-toggle:active { transform:scale(.97); }
/* Auf Seiten mit Topbar sitzt der Umschalter fest in der Topbar → schwebenden ausblenden. */
body:has(.topbar) .theme-toggle { display:none; }
.tnav .theme-btn { width:2.1rem; height:2.1rem; border-radius:9px; border:1px solid var(--border); background:var(--panel); color:var(--text);
  font-size:1rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.15s; }
.tnav .theme-btn:hover { border-color:var(--accent); background:var(--accent-soft); }
.tnav .theme-btn:active { transform:translateY(1px); }

/* ── Namens-Menü in der Topbar (Profil / Abmelden) ───────────────────────────── */
.usermenu { position:relative; min-width:0; }
.usermenu .uname { display:inline-flex; align-items:center; gap:.3rem; max-width:46vw; min-width:0;
  background:none; border:0; color:var(--text); font:inherit; font-weight:600; font-size:.9rem; cursor:pointer; padding:.35rem .3rem; border-radius:8px; }
.usermenu .uname:hover { color:var(--accent); }
.usermenu .un-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usermenu .caret { color:var(--muted); font-size:.72rem; flex:none; }
.usermenu-pop { position:absolute; right:0; top:calc(100% + .45rem); min-width:12rem;
  background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:.3rem; display:none; z-index:70; }
.usermenu.open .usermenu-pop { display:block; }
.usermenu-pop a { display:flex; align-items:center; gap:.55rem; padding:.6rem .75rem; border-radius:9px; color:var(--text); font-size:.92rem; font-weight:600; text-decoration:none; }
.usermenu-pop a:hover { background:var(--accent-soft); color:var(--accent); text-decoration:none; }
.usermenu-pop .um-ico { display:inline-flex; flex:none; color:var(--muted); }
.usermenu-pop a:hover .um-ico { color:var(--accent); }

@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }