/* ============================================================
   ZEUS – Verwaltungsplattform. Professionelles SaaS-Dashboard.
   Dunkelblaue Seitenleiste, helle Inhaltsfläche, ruhige Typografie.

   Überarbeitet August 2026: modernere Oberfläche bei GLEICHEM Farbschema
   und gleichem Seitenleisten-Aufbau. Verändert wurden Abstände, Radien,
   Schatten, Bewegungen und die Typografie – keine Farbwerte, keine
   Klassennamen, kein Markup. Alles, was hier steht, kommt ohne externe
   Schriften und ohne fremde Dateien aus: Die Content-Security-Policy
   (`Response::send`) erlaubt ausschließlich eigene Quellen.
   ============================================================ */

:root {
    --sidebar-bg: #0f1b33;
    --sidebar-bg-2: #0b1428;
    --sidebar-fg: #c7d2e4;
    --sidebar-fg-muted: #7f8eaf;
    --sidebar-active: #1d4ed8;

    --bg: #f4f6fb;
    --surface: #ffffff;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #64748b;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;

    --green: #16a34a;
    --green-bg: #dcfce7;
    --yellow: #d97706;
    --yellow-bg: #fef3c7;
    --red: #dc2626;
    --red-bg: #fee2e2;
    --gray: #6b7280;
    --gray-bg: #f1f5f9;
    --blue-bg: #dbeafe;

    /* Eingabefelder: durchgehend pastellgelb, damit auf einen Blick
       erkennbar ist, wo etwas eingegeben werden kann. */
    --field-bg: #fdf8dc;
    --field-bg-hover: #fdfae8;
    --field-border: #e6dcaa;
    --field-border-hover: #d8ca86;
    --field-readonly-bg: #f3eeda;
    --field-placeholder: #8a7f4e;

    /* Aus dem Bestand abgeleitet – keine neuen Farbtöne, nur Abstufungen.
       `--surface-2` wurde bisher nur als Rückfallwert benutzt (Modal-Schließer)
       und ist jetzt echt definiert. */
    --surface-2: #f8fafc;
    --surface-3: #eef2f7;
    --border-soft: #eef2f7;
    --border-strong: #cbd5e1;
    --heading: #0f172a;
    --primary-soft: rgba(37, 99, 235, .08);
    --ring: rgba(37, 99, 235, .16);

    /* Radien und Schatten als Leiter statt Einzelwerte: gleiche Rundung an
       gleichrangigen Bausteinen ist der halbe Eindruck von „aufgeräumt". */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
    --shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 16px -6px rgba(15,23,42,.10);
    --shadow-md: 0 2px 4px rgba(15,23,42,.04), 0 12px 28px -10px rgba(15,23,42,.16);
    --shadow-lg: 0 24px 60px -20px rgba(15,23,42,.30);

    --ease: cubic-bezier(.2,.7,.3,1);
    --t-fast: .12s var(--ease);
    --t: .18s var(--ease);

    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .4rem; font-weight: 650; color: var(--heading); letter-spacing: -.011em; }
h1 { font-size: 1.5rem; line-height: 1.25; }
h2 { font-size: 1.125rem; }
h3 { font-size: .975rem; }
/* h4 gliedert INNERHALB einer Karte (der Kartenkopf ist h3) – etwas kleiner,
   damit die Abschnitte dem Kartentitel untergeordnet bleiben. */
h4 { font-size: .9rem; }

/* Zahlen sollen untereinander stehen – in Tabellen, Kennzahlen und Listen. */
.num, .kpi .value, .mono, table.data td.num, .import-tile__n { font-variant-numeric: tabular-nums; }

/* Fokuszustände für Barrierefreiheit */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Ruhigere Bildlaufleisten (nur dort, wo der Browser es anbietet). */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border: 3px solid transparent;
    background-clip: content-box; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }

/* ---- Layout-Gerüst ---- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    z-index: 40;
    /* Kante statt harter Schnitt: trennt die Leiste vom hellen Inhalt, ohne
       einen sichtbaren Rahmen zu setzen. */
    box-shadow: 1px 0 0 rgba(15,23,42,.16), 4px 0 24px -12px rgba(15,23,42,.28);
}
.sidebar__brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1.15rem 1.25rem;
    font-weight: 700; font-size: 1.15rem; color: #fff;
    letter-spacing: .5px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar__brand .logo {
    width: 32px; height: 32px; border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    display: grid; place-items: center; font-size: .9rem; color: #fff;
    box-shadow: 0 4px 12px -4px rgba(59,130,246,.75), inset 0 1px 0 rgba(255,255,255,.25);
}
.sidebar__nav { flex: 1; overflow-y: auto; padding: .6rem .6rem 1rem; }
.sidebar__nav a {
    position: relative;
    display: flex; align-items: center; gap: .7rem;
    padding: .58rem .75rem; margin: .1rem 0;
    color: var(--sidebar-fg); border-radius: 10px;
    font-size: .92rem; text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.sidebar__nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar__nav a.active {
    background: var(--sidebar-active); color: #fff; font-weight: 600;
    box-shadow: 0 6px 16px -8px rgba(29,78,216,.9), inset 0 1px 0 rgba(255,255,255,.12);
}
/* Aktive Seite zusätzlich an der Kante markieren – erkennbar auch für
   Menschen, die Blau und Dunkelblau schlecht auseinanderhalten. */
.sidebar__nav a.active::before {
    content: ""; position: absolute; left: -.6rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: #93c5fd;
}
.sidebar__nav a .ico { width: 18px; text-align: center; opacity: .85; }
.sidebar__nav a:hover .ico, .sidebar__nav a.active .ico { opacity: 1; }
.sidebar__section {
    padding: 1rem .95rem .35rem; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .1em; color: #64769c; font-weight: 600;
}
.sidebar__foot {
    border-top: 1px solid rgba(255,255,255,.07);
    padding: .85rem 1rem; font-size: .8rem; color: #90a0c2;
}
.sidebar__foot .user { color: #fff; font-weight: 600; }
.sidebar__foot .role { color: #8ea3cc; font-size: .72rem; }
.sidebar__foot form { margin-top: .55rem; }
.sidebar__foot button {
    width: 100%; background: rgba(255,255,255,.08); color: #dbe4f5;
    border: 1px solid rgba(255,255,255,.12); padding: .5rem; border-radius: var(--radius-sm);
    cursor: pointer; font-size: .82rem; font-family: inherit; font-weight: 600;
    transition: background var(--t-fast), border-color var(--t-fast);
}
.sidebar__foot button:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.2); }
.sidebar__support {
    margin: 0 .6rem .5rem; padding: .55rem .7rem; border-radius: 10px;
    background: rgba(217,119,6,.16); border: 1px solid rgba(217,119,6,.4);
    color: #fcd9a5; font-size: .76rem;
}

/* ---- Hauptbereich ---- */
.main { flex: 1; margin-left: 250px; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
    padding: .7rem 1.75rem; display: flex; align-items: center; gap: 1rem;
    position: sticky; top: 0; z-index: 30;
}
/* Ohne Blur-Unterstützung bleibt die Leiste deckend – sonst läge Text auf Text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .topbar { background: var(--surface); }
}
.topbar .search { flex: 1; max-width: 420px; }
.topbar .search input {
    width: 100%; padding: .5rem .9rem; border: 1px solid var(--field-border);
    border-radius: var(--radius-pill); background: var(--field-bg); font-size: .9rem;
    color: var(--text); font-family: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.topbar .search input:hover { border-color: var(--field-border-hover); }
.topbar .search input:focus {
    outline: none; border-color: var(--primary); background: var(--field-bg-hover);
    box-shadow: 0 0 0 4px var(--ring);
}
.topbar .spacer { flex: 1; }
.topbar .top-actions { display: flex; align-items: center; gap: 1rem; }
.topbar .top-user { text-align: right; line-height: 1.25; }
.topbar .top-user .name { font-weight: 600; font-size: .88rem; }
.topbar .top-user .role { color: var(--text-muted); font-size: .74rem; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg,#3b82f6,#6366f1); color: #fff;
    display: grid; place-items: center; font-weight: 600; font-size: .85rem;
    box-shadow: 0 4px 12px -4px rgba(59,130,246,.7), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.avatar:hover { transform: translateY(-1px); text-decoration: none;
    box-shadow: 0 8px 18px -6px rgba(59,130,246,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.badge-dot {
    position: relative; font-size: 1.15rem; color: var(--text-muted); text-decoration: none;
}
.badge-dot span {
    position: absolute; top: -4px; right: -6px; background: var(--red); color: #fff;
    border-radius: 10px; font-size: .62rem; padding: 0 4px; min-width: 15px; text-align: center;
    box-shadow: 0 0 0 2px var(--surface);
}

.content { padding: 1.75rem; max-width: 1400px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; flex-wrap: wrap; }
.page-head .subtitle { color: var(--text-muted); font-size: .9rem; }

/* ---- Karten ---- */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.card__head {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.card__head h3 { margin: 0; }
.card__body { padding: 1.25rem; }
.card__body.tight { padding: .4rem; }

.grid { display: grid; gap: 1.15rem; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---- KPI-Karten ---- */
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
       padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm);
       transition: box-shadow var(--t), transform var(--t), border-color var(--t); }
.kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #d7e0ee; }
.kpi .label { color: var(--text-muted); font-size: .78rem; margin-bottom: .4rem;
              font-weight: 600; letter-spacing: .02em; }
.kpi .value { font-size: 2rem; font-weight: 700; color: var(--heading); line-height: 1;
              letter-spacing: -.02em; }
.kpi .foot { margin-top: .5rem; font-size: .76rem; color: var(--text-muted); }
.kpi .value.small { font-size: 1.4rem; }

/* ---- Tabellen ---- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.data th {
    text-align: left; padding: .7rem .85rem; color: var(--text-muted);
    font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.data td { padding: .78rem .85rem; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background var(--t-fast); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data .num { text-align: right; }
table.data th.check, table.data td.check { width: 2.2rem; padding-right: 0; text-align: center; }
table.data .check input { width: 1rem; height: 1rem; margin: 0; vertical-align: middle; cursor: pointer; }
/* Kein Sonderabstand an der ersten Spalte: Die Karte gibt für Tabellen nur
   `.card__body.tight` (.4rem) her, zusammen mit der Zellpolsterung (.85rem)
   sind das genau die 1.25rem der Kartenüberschrift. Jeder Zuschlag hier
   verschöbe die Spaltenköpfe gegen den Titel darüber. */

/* ---- Status-Badges (nicht nur Farbe: immer mit Text) ---- */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 600;
    white-space: nowrap; line-height: 1.4;
    box-shadow: inset 0 0 0 1px rgba(15,23,42,.05);
}
.badge::before { content: "●"; font-size: .58rem; }
.badge.green  { background: var(--green-bg); color: #15803d; }
.badge.yellow { background: var(--yellow-bg); color: #b45309; }
.badge.red    { background: var(--red-bg); color: #b91c1c; }
.badge.blue   { background: var(--blue-bg); color: #1d4ed8; }
.badge.gray   { background: var(--gray-bg); color: #475569; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; cursor: pointer;
    padding: .55rem 1rem; border-radius: var(--radius-sm); font-size: .88rem; font-weight: 600;
    font-family: inherit; line-height: 1.4;
    border: 1px solid transparent; background: var(--primary); color: #fff; text-decoration: none;
    box-shadow: 0 1px 2px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.14);
    transition: background var(--t-fast), box-shadow var(--t-fast),
                transform var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { background: var(--primary-dark); text-decoration: none;
             box-shadow: 0 4px 12px -4px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.14); }
/* Druckpunkt: der Knopf gibt kurz nach – das macht Klicks spürbar. */
.btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.btn.secondary { background: var(--surface); color: var(--text); border-color: var(--border);
                 box-shadow: var(--shadow-xs); }
.btn.secondary:hover { background: var(--surface-2); border-color: var(--border-strong);
                       box-shadow: var(--shadow-sm); }
.btn.danger { background: var(--red); }
.btn.danger:hover { background: #b91c1c; box-shadow: 0 4px 12px -4px rgba(220,38,38,.55); }
.btn.small { padding: .35rem .7rem; font-size: .8rem; border-radius: var(--radius-xs); }
.btn.ghost { background: transparent; color: var(--primary); box-shadow: none; }
.btn.ghost:hover { background: var(--primary-soft); box-shadow: none; }
.btn[disabled], .btn:disabled { opacity: .55; pointer-events: none; }

/* ---- Kippschalter (Modulzugang sperren / entsperren) ----
   Ein echter <button role="switch"> in einem Formular – kein JavaScript, kein
   Kontrollkästchen. Die Stellung steht in `aria-checked`, damit Vorlese-
   programme sie nennen; die Farbe ist nur die Zugabe fürs Auge. */
.switch {
    display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
    padding: 0; border: 0; background: none; font: inherit; color: var(--text-muted);
    font-size: .8rem; font-weight: 600;
}
.switch__track {
    position: relative; flex: none; width: 38px; height: 21px; border-radius: 999px;
    background: var(--red); box-shadow: inset 0 1px 2px rgba(15,23,42,.25);
    transition: background var(--t-fast);
}
.switch__track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.35);
    transition: transform var(--t-fast);
}
.switch[aria-checked="true"] .switch__track { background: var(--green); }
.switch[aria-checked="true"] .switch__track::after { transform: translateX(17px); }
.switch:hover .switch__track { filter: brightness(1.08); }
.switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-xs); }
.switch[disabled] { opacity: .5; cursor: not-allowed; }
.switch[disabled] .switch__track { background: var(--gray); }

/* Zeile einer gesperrten Lizenz: leicht rot hinterlegt mit Markierung am Rand.
   Die Farbe ist die Zugabe – die Aussage steht als Text im Feld „Modulzugang",
   damit sie auch ohne Farbwahrnehmung ankommt. */
tr.row-locked > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
tr.row-locked > td { background: color-mix(in srgb, var(--red-bg) 45%, transparent); }

/* ---- Formulare ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: .82rem; font-weight: 600; color: #334155; }
.form-group label .req { color: var(--red); }
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select, .form-group textarea {
    padding: .6rem .75rem; border: 1px solid var(--field-border); border-radius: var(--radius-sm);
    font-size: .9rem; font-family: inherit; background: var(--field-bg); color: var(--text);
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-group input:not([type="checkbox"]):not([type="radio"]):hover,
.form-group select:hover, .form-group textarea:hover { border-color: var(--field-border-hover); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); background: var(--field-bg-hover);
    box-shadow: 0 0 0 4px var(--ring);
}
input[readonly], textarea[readonly], input:disabled, select:disabled, textarea:disabled {
    background: var(--field-readonly-bg) !important; color: var(--text-muted); cursor: default;
}
::placeholder { color: var(--field-placeholder); opacity: 1; }
.form-group .hint { font-size: .74rem; color: var(--text-muted); }
.form-group .err { font-size: .78rem; color: var(--red); }
.form-group input[aria-invalid="true"] { border-color: var(--red); }
.form-actions { display: flex; gap: .6rem; margin-top: 1.4rem; }
.checkbox-row { display: flex; align-items: center; gap: .5rem; }
.checkbox-row input { width: auto; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
/* Abschnittsüberschrift in längeren Formularen (Lehrer bearbeiten). */
.section-title { margin: 1.7rem 0 .85rem; padding-bottom: .5rem;
                 border-bottom: 1px solid var(--border-soft); font-size: 1rem; }
/* Die erste Überschrift braucht keinen Vorlauf. `:first-child` greift hier
   NICHT: Vor ihr steht das versteckte CSRF-Feld – unsichtbar, aber ein
   Geschwisterelement. `:first-of-type` zählt nur die <h2> und trifft. */
.section-title:first-child, form > .section-title:first-of-type { margin-top: 0; }

/* ---- Flash & Alerts ---- */
.alert { position: relative; padding: .8rem 1rem .8rem 1.15rem; border-radius: var(--radius-sm);
         margin-bottom: 1rem; font-size: .9rem; border: 1px solid transparent;
         box-shadow: var(--shadow-xs); overflow: hidden; }
/* Farbiger Balken links: erkennbar auch ohne Farbwahrnehmung am Ort, nicht nur am Ton. */
.alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; opacity: .55; }
.alert.success { background: var(--green-bg); color: #166534; border-color: #bbf7d0; }
.alert.error { background: var(--red-bg); color: #991b1b; border-color: #fecaca; }
.alert.info { background: var(--blue-bg); color: #1e40af; border-color: #bfdbfe; }
.alert ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* ---- Diagramme (CSS-basiert, keine externen Libs) ---- */
.bar-row { display: flex; align-items: center; gap: .7rem; margin: .55rem 0; font-size: .85rem; }
.bar-row .bar-label { width: 130px; color: var(--text-muted); flex-shrink: 0; }
.bar-track { flex: 1; height: 10px; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-pill);
            background: linear-gradient(90deg, var(--primary), #4f46e5); }
.bar-row .bar-val { width: 42px; text-align: right; font-variant-numeric: tabular-nums; color: #334155; }

.donut { display: flex; align-items: center; gap: 1.2rem; }
.donut svg { flex-shrink: 0; }
.legend { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
.legend li { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.legend .swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.progress-ring { display: grid; place-items: center; }

/* ---- Quick actions ---- */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: .7rem; }
.quick-actions a {
    display: flex; flex-direction: column; gap: .3rem; padding: .95rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); text-decoration: none; font-size: .85rem; font-weight: 600;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t), background var(--t), box-shadow var(--t), transform var(--t);
}
.quick-actions a:hover { border-color: var(--primary); background: #f8fbff; text-decoration: none;
                         box-shadow: var(--shadow-md); transform: translateY(-2px); }
.quick-actions a .qa-ico { font-size: 1.15rem; }

/* ---- Diverse ---- */
.muted { color: var(--text-muted); }
.small { font-size: .8rem; }
.mono { font-family: var(--font-mono); font-size: .82rem; }
.stack { display: flex; flex-direction: column; gap: 1.15rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { background: var(--gray-bg); border-radius: var(--radius-xs); padding: .12rem .55rem;
        font-size: .76rem; color: #475569; font-weight: 500; }

/* ---- Kachelraster (Produkte & Pakete) ----
   Eine Tabelle mit acht Spalten und einer mehrzeiligen Beschreibungsspalte
   liest sich nicht: Die Zeilen werden unterschiedlich hoch, und die meisten
   Spalten enthalten „—". Deshalb je Datensatz eine Kachel mit fester
   Reihenfolge – Kopf, Beschreibung, Merkmale, Kennzahlen, Aktionen. Keine
   neuen Farbwerte: alles aus den bestehenden Tokens. */
.tile-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.tile {
    display: flex; flex-direction: column; gap: .75rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.15rem;
    transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #d7e0ee; }
.tile__head { display: flex; align-items: flex-start; gap: .65rem; }
.tile__icon {
    flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
    display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1rem;
    line-height: 1; box-shadow: var(--shadow-xs);
}
.tile__icon--emoji { font-size: 1.15rem; box-shadow: none; }
.tile__ident { flex: 1 1 auto; min-width: 0; }
.tile__ident h3 { margin: 0; line-height: 1.3; }
.tile__ident > span { display: block; }
.tile__desc { margin: 0; color: var(--text-muted); line-height: 1.55; }
.tile__tags { margin-top: -.15rem; }

/* Beschreibung ein-/ausklappbar – ohne JavaScript. Der Text steckt im
   <summary>; geöffnet fällt die Zeilenbegrenzung weg. Der Umschalter ist ein
   Geschwisterelement INNERHALB des <summary>, sonst wäre er nicht anklickbar. */
.tile__desc--more { margin: 0; }
.tile__desc--more > summary { cursor: pointer; list-style: none; display: block; }
.tile__desc--more > summary::-webkit-details-marker { display: none; }
.tile__desc-text {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; color: var(--text-muted); line-height: 1.55;
}
.tile__desc--more[open] .tile__desc-text { display: block; }
.tile__desc-toggle { display: inline-block; margin-top: .3rem; color: var(--primary); font-weight: 600; }
.tile__desc-toggle::after { content: "Mehr anzeigen"; }
.tile__desc--more[open] .tile__desc-toggle::after { content: "Weniger anzeigen"; }
.tile__desc--more > summary:hover .tile__desc-toggle { text-decoration: underline; }

.tile__stats {
    margin-top: auto; display: flex; gap: .4rem;
    border-top: 1px solid var(--border-soft); padding-top: .75rem;
}
.tile__stats > div { flex: 1 1 0; min-width: 0; }
.tile__stats b { display: block; font-size: 1.15rem; font-weight: 700; color: var(--heading);
                 line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile__stats span { display: block; font-size: .74rem; color: var(--text-muted); font-weight: 600; }
.tile__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.tile__foot form { display: inline; }

@media (max-width: 560px) {
    .tile-grid { grid-template-columns: 1fr; }
}

/* ---- Filterleiste als Klassen-Reiter (Schülerliste) ----
   Bewusst normale Links: der Filter funktioniert ohne JavaScript. */
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--surface); color: var(--text); text-decoration: none;
    font-size: .84rem; font-weight: 600; white-space: nowrap;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--t-fast), background var(--t-fast),
                color var(--t-fast), box-shadow var(--t-fast);
}
.filter-chip:hover { border-color: var(--primary); background: #f8fbff; text-decoration: none; }
.filter-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff;
                         box-shadow: 0 4px 12px -4px rgba(37,99,235,.5); }
.filter-chip__count {
    background: var(--gray-bg); color: #475569; border-radius: var(--radius-pill);
    padding: 0 .45rem; font-size: .74rem; font-variant-numeric: tabular-nums;
}
.filter-chip.is-active .filter-chip__count { background: rgba(255,255,255,.22); color: #fff; }

/* ---- Hinweiskasten in Formularen (z. B. gesperrtes Lehrer-Konto) ----
   Wurde im Markup schon benutzt, hatte aber nie eine Regel und sah dadurch aus
   wie versehentlich stehengebliebener Fließtext. */
.inline-warn {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    padding: .85rem 1rem; border: 1px solid #fde68a; border-radius: var(--radius);
    background: var(--yellow-bg); color: #92400e; font-size: .88rem;
}
.inline-warn p { margin: 0; }

/* Formular, das in einer Karte als Zeile lebt (Modul-Anbindungen). */
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.inline-form .form-group { flex: 1 1 auto; min-width: min(28rem, 100%); }
.inline-form .form-group .hint { max-width: 62ch; }

/* Schritte im Import-Modal – Sichtbarkeit steuert `hidden` aus import.js. */
.import-step[hidden] { display: none; }
.import-summary:empty { display: none; }

/* ---- Zeilenaktionen in Tabellen ---- */
.row-actions { display: inline-flex; gap: .7rem; align-items: center; justify-content: flex-end; }
.row-actions a { white-space: nowrap; }
.row-actions a.danger { color: var(--red); }
.row-actions a.danger:hover { color: #b91c1c; }

/* ---- Gefahrenhinweis vor unwiderruflichen Aktionen ---- */
.danger-panel {
    border: 1px solid #fecaca; background: var(--red-bg); border-radius: var(--radius);
    padding: 1rem 1.15rem; font-size: .88rem; color: #7f1d1d;
}
.danger-panel__title { margin: 0 0 .6rem; font-size: .95rem; color: #991b1b; }
.danger-panel p { margin: .4rem 0; }
.danger-panel__list { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.danger-panel__list li { margin: .25rem 0; }
.danger-panel .muted { color: #a15252; }
/* Ausdrückliche Zusatz-Bestätigung (Opt-in), z. B. Moduldaten löschen */
.danger-panel--opt { margin-top: 1rem; }
.opt-in { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; }
.opt-in input[type="checkbox"] { margin-top: .2rem; width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

/* ---- Kopf des Versetzungs-Assistenten ---- */
.promote-head {
    display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--gray-bg); padding: .95rem 1.15rem; margin-bottom: 1rem;
}
.promote-head__year { display: flex; flex-direction: column; gap: .1rem; }
.promote-head__year strong { font-size: 1.05rem; }
.promote-head__arrow { font-size: 1.4rem; color: var(--primary); }
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.toolbar input, .toolbar select {
    padding: .55rem .75rem; border: 1px solid var(--field-border); border-radius: var(--radius-sm);
    font-size: .88rem; background: var(--field-bg); color: var(--text); font-family: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.toolbar input:hover, .toolbar select:hover { border-color: var(--field-border-hover); }
.toolbar input:focus, .toolbar select:focus {
    outline: none; border-color: var(--primary); background: var(--field-bg-hover);
    box-shadow: 0 0 0 4px var(--ring);
}
.toolbar .grow { flex: 1; min-width: 160px; }
.pagination { display: flex; gap: .3rem; align-items: center; margin-top: 1rem; font-size: .85rem; }
.pagination a, .pagination span {
    padding: .4rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-xs);
    color: var(--text); text-decoration: none; background: var(--surface);
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.pagination a:hover { border-color: var(--primary); color: var(--primary);
                      background: #f8fbff; text-decoration: none; }
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }
.empty { text-align: center; padding: 2.75rem 1rem; color: var(--text-muted); font-size: .9rem; }
.definition { display: grid; grid-template-columns: 180px 1fr; gap: .6rem 1rem; font-size: .88rem; }
.definition dt { color: var(--text-muted); }
.definition dd { margin: 0; }

/* ---- Auth-Seiten (Zwei-Spalten-Layout) ---- */
body.auth-body { min-height: 100vh; background:
             radial-gradient(1200px 820px at 50% -12%, #1c3170, transparent 62%),
             linear-gradient(160deg, #0a1024 0%, #0c1836 52%, #0a1226 100%); }
.auth-shell { min-height: 100vh; display: grid;
             grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); background: var(--surface); }
@media (min-width: 961px) {
    body.auth-body { display: flex; align-items: center; justify-content: center; padding: 2rem; }
    .auth-shell { min-height: auto; width: 100%; max-width: 1120px;
             border-radius: 24px; overflow: hidden;
             box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.4),
                         0 0 0 1px rgba(255,255,255,.06); }
}

/* --- Linke Markenspalte --- */
.auth-brand { position: relative; overflow: hidden; color: #eaf1ff; padding: 3.25rem 2.5rem;
             display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
             background:
                radial-gradient(760px 560px at 50% 16%, #2a54c8 0%, transparent 62%),
                linear-gradient(158deg, #1e3a8a 0%, #16296e 46%, #0e1f52 100%); }
.auth-brand__decor { position: absolute; inset: 0; pointer-events: none; opacity: .12;
             background: url('/assets/img/greek-ring.svg') no-repeat center 40% / 150% auto; }
.auth-brand__inner { position: relative; }
.auth-brand__logo { width: 132px; height: 132px; border-radius: 50%; margin: 0 auto 1.5rem;
             display: grid; place-items: center; overflow: hidden;
             background: radial-gradient(circle at 50% 34%, #24468f, #0f2049);
             box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 0 0 10px rgba(255,255,255,.05), 0 18px 42px rgba(0,0,0,.38); }
.auth-brand__logo img { width: 84%; height: 84%; object-fit: contain; display: block; }
.auth-brand__name { font-size: 2.15rem; font-weight: 800; letter-spacing: 14px; padding-left: 14px; line-height: 1.1; }
.auth-brand__tagline { margin-top: .6rem; font-size: .8rem; letter-spacing: 3px; text-transform: uppercase;
             color: #9db4e6; font-weight: 600; }
.auth-brand__rule { display: block; width: 46px; height: 2px; margin: 1.7rem auto; border-radius: 2px;
             background: rgba(255,255,255,.35); }
.auth-brand__claim { margin: 0; font-size: 1.02rem; color: #cddcff; }
.auth-brand__foot { position: absolute; left: 0; right: 0; bottom: 1.7rem; display: flex;
             align-items: center; justify-content: center; gap: .5rem; font-size: .8rem; color: #90a6d6; }
.auth-brand__foot svg { width: 15px; height: 15px; }

/* --- Rechte Formularspalte --- */
.auth-panel { display: grid; place-items: center; padding: 3.25rem 2rem; background: var(--surface); }
.auth-panel__inner { width: 100%; max-width: 384px;
             animation: auth-in .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes auth-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.auth-panel__inner h1, .auth-title { font-size: 2rem; font-weight: 800; margin: 0 0 .45rem; color: var(--text); letter-spacing: -.5px; }
.auth-panel__inner .sub, .auth-sub { color: var(--text-muted); font-size: .95rem; line-height: 1.55; margin: 0 0 1.9rem; }
.auth-panel__inner .form-group { margin-bottom: 1.15rem; }
.auth-panel__inner .form-group label { font-size: .85rem; }
/* ⚠️ Die :not(...)-Kette ist hier PFLICHT und keine Kosmetik.
   Die allgemeine Feldregel oben lautet
   `.form-group input:not([type="checkbox"]):not([type="radio"])` und hat damit
   die Spezifität (0,3,1). Ohne dieselbe Kette käme diese Regel nur auf (0,2,1)
   und würde ÜBERSCHRIEBEN – die Anmeldefelder verloren dadurch Polsterung und
   Radius, und der Text lief unter das führende Icon (Juli 2026 behoben).
   Siehe readme/05, Punkt 14; abgesichert durch tests/http.sh. */
.auth-panel__inner .form-group input:not([type="checkbox"]):not([type="radio"]) {
             width: 100%; padding: .8rem 1rem; border-radius: 12px;
             transition: border-color .15s, box-shadow .15s; }
.auth-panel__inner .form-group input:not([type="checkbox"]):not([type="radio"]):focus {
             outline: none; border-color: var(--primary);
             box-shadow: 0 0 0 4px rgba(37,99,235,.14); }

/* Eingabefeld mit führendem Icon */
.input-icon { position: relative; display: flex; align-items: center; }
.input-icon__ico { position: absolute; left: .9rem; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.auth-panel__inner .input-icon input:not([type="checkbox"]):not([type="radio"]) {
             flex: 1 1 auto; min-width: 0; padding-left: 2.65rem; }
/* Platz für den Augen-Knopf rechts – gleiche Spezifitätsfalle wie oben. */
.auth-panel__inner .input-icon:has(.input-icon__toggle) input:not([type="checkbox"]):not([type="radio"]) {
             padding-right: 2.9rem; }
.input-icon__toggle { position: absolute; right: .5rem; display: grid; place-items: center;
             width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
             color: var(--text-muted); border-radius: var(--radius-sm);
             transition: color var(--t-fast), background var(--t-fast); }
.input-icon__toggle:hover { color: var(--text); background: var(--gray-bg); }
.input-icon__toggle svg { width: 19px; height: 19px; }
.input-icon__toggle .eye-off { display: none; }
.input-icon__toggle.is-on .eye-on { display: none; }
.input-icon__toggle.is-on .eye-off { display: block; }

/* Zeile: Angemeldet bleiben / Passwort vergessen */
.auth-form__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
             margin: -.1rem 0 1.6rem; }
.checkbox { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
             font-size: .88rem; color: #334155; font-weight: 500; }
.checkbox input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.auth-form__forgot { font-size: .88rem; font-weight: 600; white-space: nowrap; }

/* Anmelde-Button (gilt auch für generische .btn im Panel, z. B. Einladung) */
.auth-panel__inner form .btn { width: 100%; justify-content: center; gap: .6rem;
             padding: .85rem 1rem; font-size: .98rem; border-radius: 12px; margin-top: .35rem;
             background: linear-gradient(135deg, #2563eb, #4f46e5);
             box-shadow: 0 10px 22px rgba(37,99,235,.30);
             transition: transform .12s, box-shadow .12s, filter .12s; }
.auth-panel__inner form .btn:hover { filter: brightness(1.06); transform: translateY(-1px);
             box-shadow: 0 14px 26px rgba(37,99,235,.38); }
.auth-panel__inner form .btn:active { transform: translateY(0); }
.auth-submit svg { width: 18px; height: 18px; }

/* Responsive: Spalten untereinander */
@media (max-width: 960px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { padding: 2.5rem 1.5rem; }
    .auth-brand__logo { width: 104px; height: 104px; margin-bottom: 1.1rem; }
    .auth-brand__name { font-size: 1.75rem; letter-spacing: 9px; padding-left: 9px; }
    .auth-brand__foot { position: static; margin-top: 1.6rem; }
    .auth-panel { padding: 2.25rem 1.5rem; }
}
@media (max-width: 520px) {
    .auth-brand__claim { display: none; }
    .auth-brand__rule { margin: 1.2rem auto; }
    .auth-panel__inner h1, .auth-title { font-size: 1.6rem; }
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .definition { grid-template-columns: 1fr; gap: .1rem .5rem; }
    .definition dt { margin-top: .5rem; }
    .content { padding: 1.25rem; }
}
@media (max-width: 780px) {
    .sidebar { transform: translateX(-100%); transition: transform .2s var(--ease); }
    .sidebar.open { transform: translateX(0); }
    .main { margin-left: 0; }
    .menu-toggle { display: inline-flex !important; }
    .topbar { padding: .7rem 1rem; }
}
.menu-toggle { display: none; background: var(--surface); border: 1px solid var(--border);
               border-radius: var(--radius-sm); padding: .4rem .6rem; cursor: pointer;
               font-size: 1.1rem; align-items: center; transition: background var(--t-fast); }
.menu-toggle:hover { background: var(--surface-2); }

/* ---- Seitenkopf-Aktionen ---- */
.page-head__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---- Modal ---- */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; padding: 1.5rem; }
.modal[hidden] { display: none; }
.modal__overlay { position: absolute; inset: 0; background: rgba(3,8,26,.6);
                  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.modal__dialog { position: relative; margin: auto; width: min(940px, 96vw); max-height: 92vh;
                 display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg);
                 box-shadow: var(--shadow-lg); overflow: hidden;
                 animation: auth-in .25s cubic-bezier(.2,.7,.3,1) both; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
               padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--border-soft); }
.modal__title { font-size: 1.15rem; margin: 0; }
.modal__steps { display: flex; gap: .8rem; margin-top: .45rem; font-size: .76rem; color: var(--text-muted); }
.modal__steps span.is-active { color: var(--primary); font-weight: 700; }
.modal__close { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px;
                background: none; border: 1px solid transparent; border-radius: 10px;
                font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-muted);
                transition: background .15s, color .15s, border-color .15s; }
.modal__close:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.modal__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.modal__body { padding: 1.3rem 1.35rem; overflow-y: auto; }
.modal__foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.3rem;
               padding-top: 1rem; border-top: 1px solid var(--border-soft); }

/* ---- Formular-Modal (Lizenzen) ----
   Schließt bewusst NUR über das ✕ oben rechts: kein Overlay-Klick, kein Escape.
   So geht eine halb ausgefüllte Laufzeit nicht durch einen Fehlklick verloren. */
.modal__dialog--form { width: min(780px, 96vw); }
.modal__head--form { align-items: center; }
.modal__sub { margin: .25rem 0 0; font-size: .8rem; color: var(--text-muted); }
.modal__hint { display: flex; align-items: center; gap: .4rem; margin-right: auto;
               font-size: .75rem; color: var(--text-muted); }
.modal__loading { display: flex; flex-direction: column; align-items: center; gap: .85rem;
                  padding: 3.2rem 0; color: var(--text-muted); font-size: .85rem; }
.modal__spinner { width: 34px; height: 34px; border-radius: 50%;
                  border: 3px solid var(--border); border-top-color: var(--primary);
                  animation: modal-spin .8s linear infinite; }
@keyframes modal-spin { to { transform: rotate(360deg); } }
/* Im Modal trägt das Formular selbst keine Kartenränder mehr. */
.modal__body > .form-grid:first-child { margin-top: 0; }
.btn.is-busy { opacity: .65; pointer-events: none; }
.btn[hidden] { display: none; }   /* [hidden] gegen .btn{display:inline-flex} durchsetzen */

/* ---- Dropzone ---- */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
            padding: 2.2rem 1.5rem; border: 2px dashed var(--field-border); border-radius: var(--radius);
            cursor: pointer; transition: border-color var(--t), background var(--t); }
.dropzone { background: var(--field-bg); }
.dropzone:hover, .dropzone.is-over { border-color: var(--primary); background: var(--field-bg-hover); }
.dropzone svg { width: 36px; height: 36px; color: var(--primary); }
.dropzone__text { font-size: .92rem; color: var(--text); }
.dropzone__file { font-weight: 600; color: var(--primary); }
.import-options { display: flex; gap: 1.6rem; align-items: end; flex-wrap: wrap; margin-top: 1.1rem; }
.import-options .field { display: flex; flex-direction: column; gap: .3rem; font-size: .82rem; font-weight: 600; color: #334155; }
.import-options select { padding: .5rem .6rem; border: 1px solid var(--field-border); border-radius: var(--radius-sm); font-size: .88rem; background: var(--field-bg); color: var(--text); font-family: inherit; }

/* ---- Zuordnung (Schritt 2) ---- */
.import-map { display: grid; grid-template-columns: 320px 1fr; gap: 1.4rem; margin-top: .3rem; }
.import-map__fields { max-height: 54vh; overflow: auto; padding-right: .3rem; }
.import-map__group { font-size: .7rem; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted);
                     font-weight: 700; margin: 1rem 0 .35rem; }
.import-map__group:first-child { margin-top: 0; }
.import-field { display: flex; align-items: center; gap: .6rem; padding: .35rem .45rem;
                border: 1px solid transparent; border-radius: var(--radius-sm); transition: background var(--t-fast); }
.import-field.is-drop { border-color: var(--primary); background: #eef4ff; }
.import-field__label { width: 118px; flex-shrink: 0; font-size: .85rem; font-weight: 600; color: #334155; }
.import-field__label .req { color: var(--red); }
.import-field__select { flex: 1; min-width: 0; padding: .42rem .5rem; border: 1px solid var(--field-border);
                        border-radius: var(--radius-sm); font-size: .85rem; background: var(--field-bg); color: var(--text); font-family: inherit; }
.import-field__select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.import-preview-title { margin-bottom: .4rem; font-weight: 600; }
.import-map__preview .table-wrap { max-height: 54vh; overflow: auto; }
table.import-preview th { cursor: grab; user-select: none; white-space: nowrap; position: sticky; top: 0; background: var(--surface); }
table.import-preview th:hover { color: var(--primary); }
table.import-preview td, table.import-preview th { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.import-preview td.is-mapped { background: #eff5ff; }
.import-preview th.is-mapped { background: #dbe8ff; color: var(--primary-dark); }

/* ---- Bericht (Schritt 3) ---- */
.import-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1rem; }
.import-tile { border: 1px solid var(--border); border-radius: var(--radius); padding: .95rem .6rem; text-align: center; }
.import-tile__n { font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.import-tile__l { font-size: .78rem; color: var(--text-muted); margin-top: .3rem; }
.import-tile.green  { background: var(--green-bg); border-color: #bbf7d0; }
.import-tile.green .import-tile__n  { color: #15803d; }
.import-tile.yellow { background: var(--yellow-bg); border-color: #fde68a; }
.import-tile.yellow .import-tile__n { color: #b45309; }
.import-tile.red    { background: var(--red-bg); border-color: #fecaca; }
.import-tile.red .import-tile__n    { color: #b91c1c; }
.import-errors { max-height: 34vh; overflow: auto; margin-top: .4rem; }

@media (max-width: 720px) {
    .import-map { grid-template-columns: 1fr; }
    .import-map__fields, .import-map__preview .table-wrap { max-height: none; }
    .import-tiles { grid-template-columns: repeat(2, 1fr); }
    .import-field__label { width: 100px; }
}

/* ---- Bewegung nur, wenn erwünscht ----
   Steht bewusst am Ende: Diese Regeln müssen alles überschreiben, was oben an
   Übergängen und Animationen definiert ist. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .modal__spinner { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
    .modal__dialog, .auth-panel__inner { animation: none !important; }
    .kpi:hover, .quick-actions a:hover, .btn:active, .avatar:hover { transform: none; }
}

/* ---- Schülerliste abgleichen (reconcile-modal, 12.09.2026) ---- */
.reconcile-tiles { grid-template-columns: repeat(6, 1fr); }
.import-tile.blue { background: var(--blue-bg); border-color: #bfdbfe; }
.import-tile.blue .import-tile__n { color: #1d4ed8; }
.import-tile.red { background: var(--red-bg); border-color: #fecaca; }
.import-tile.red .import-tile__n { color: #b91c1c; }
.reconcile-section { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem .9rem; }
.reconcile-section__title { font-weight: 700; margin-bottom: .45rem; }
.reconcile-section.is-open { border-color: #fca5a5; background: #fff7f7; }
.reconcile-section.is-invalid { border-color: #fca5a5; }
.reconcile-section.is-leave { border-color: #fde68a; }
.reconcile-section.is-create { border-color: #bbf7d0; }
.reconcile-table { max-height: 34vh; overflow: auto; }
.reconcile-table table.data th { position: sticky; top: 0; background: var(--surface); }
.reconcile-decision { width: 100%; max-width: 420px; }
@media (max-width: 800px) { .reconcile-tiles { grid-template-columns: repeat(3, 1fr); } }