/* ===== 01-base.css ===== */
/**
 * NotenWeb - Stylesheet
 * Design: Midnight Amber — deep navy authority meets warm amber precision
 * Schrift: Lexend lokal (CSP font-src 'self', keine Google Fonts)
 */

@font-face {
    font-family: 'Lexend';
    src: url('/fonts/lexend/Lexend.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* === Reset & Base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Core palette */
    --primary: #1845c8;
    --primary-dark: #1236a0;
    --primary-light: #6a9de8;
    --secondary: #3558c4;
    --secondary-light: #8aaae6;

    /* Amber accent — the signature color */
    --accent: #f5a623;
    --accent-dark: #d88b10;
    --accent-light: #fde8b8;

    /* Semantic colors */
    --success: #1a9e6e;
    --success-light: #d1f5e8;
    --danger: #e5483a;
    --danger-light: #fde8e6;
    --warning: #d97706;
    --warning-light: #fef3c7;
    --info: #0891b2;
    --info-light: #d0f0f9;

    /* Neutrals */
    --light: #e6eff9;
    --light-bg: #edf4fc;
    --warm-white: #ffffff;
    --dark: #080f24;
    --dark-text: #0e1829;
    --text: #0e1829;
    --text-muted: #5a6b8a;
    --text-secondary: #7d90b0;

    /* Surfaces */
    --card-bg: #ffffff;
    --nav-bg: #ffffff;
    --page-bg: #c8d8ee;
    --bg-surface: #f7fafd;

    /* Borders */
    --border: #cdd9ee;
    --border-light: #dce8f5;
    --border-dark: #1845c8;

    /* Header */
    --header-bg: #080f24;
    --header-gradient: linear-gradient(105deg, #080f24 0%, #0d1e50 55%, #162d78 100%);

    /* Formularfelder — pastellgelb (niedrige Spezifität via :where, überschreibbar) */
    --form-field-bg: #fff9e6;
    --form-field-bg-focus: #fffef8;
    --form-field-bg-disabled: #f3ead8;
}

/* Pastellgelber Standard für textähnliche Eingaben (:where = Spezifität 0) */
:where(textarea, select, input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"])) {
    background-color: var(--form-field-bg);
}

body {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--page-bg);
    background-image: radial-gradient(circle, rgba(8,15,36,0.11) 1px, transparent 1px);
    background-size: 22px 22px;
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}


/* ===== 02-layout.css ===== */
/* === Header === */
.main-header {
    background: var(--header-gradient);
    color: white;
    padding: 0.9rem 2rem;
    box-shadow: 0 2px 20px rgba(8,15,36,0.5);
    border-bottom: 2px solid rgba(245,166,35,0.4);
    position: relative;
}

.main-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #f5a623 0%, #1845c8 60%, transparent 100%);
    opacity: 0.6;
}

.header-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
    text-decoration: none;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo::before {
    content: '◆';
    color: #f5a623;
    font-size: 1rem;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.user-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.01em;
}

.nav-toggle {
    display: none;
    position: relative;
    z-index: 140;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    color: white;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.28rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nav-toggle:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(245,166,35,0.45);
    transform: translateY(-1px);
}

.nav-toggle.is-active {
    background: rgba(245,166,35,0.18);
    border-color: rgba(245,166,35,0.6);
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* === Navigation === */
.main-nav {
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 1px 8px rgba(8,15,36,0.06);
    position: relative;
}

.nav-overlay,
.nav-mobile-head {
    display: none;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 0;
    align-items: stretch;
    min-width: 0;
    overflow-x: auto;
}

.nav-link {
    padding: 0.9rem 1.4rem;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.nav-link--icon {
    min-width: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.1rem;
}

.nav-link-icon {
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 700;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-link:hover {
    background: #fff9f0;
    border-bottom-color: var(--accent-light);
    color: var(--accent-dark);
}

.nav-link.active {
    color: var(--accent-dark);
    border-bottom-color: var(--accent);
    background: #fff9f0;
    font-weight: 700;
}

/* === Container & Layout === */
.container {
    max-width: 1400px;
    margin: 1.75rem auto;
    padding: 0 2rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.page-header h1 {
    color: var(--dark);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* === Cards === */
.card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1.6rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(8,15,36,0.04), 0 4px 16px rgba(8,15,36,0.06);
}

.card h2, .card h3 {
    color: var(--dark);
    margin-bottom: 1rem;
    font-weight: 700;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* === Tabellen ===
   `class="table"` wurde an zwei Stellen benutzt (Zeugnisse-Fachabgleich,
   Klassen → ZEUS), ohne dass es die Klasse je gab: Die Tabellen fielen auf
   die Browser-Vorgabe zurück und sahen aus wie ein Fremdkörper zwischen den
   Karten. Die Regel steht hier bei den Karten, weil eine Tabelle in dieser
   Anwendung immer in einer Karte sitzt. */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.table th {
    text-align: left;
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-light);
    white-space: nowrap;
}

.table td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover {
    background: var(--light-bg);
}

/* Ein Formularfeld in einer Zelle soll die Spalte füllen, aber die Zeile
   nicht auseinanderziehen. */
.table td .form-control {
    padding: 0.4rem 0.5rem;
    font-size: 0.94rem;
}

/* Waagerecht scrollen statt die Seite zu sprengen — auf dem Telefon ist eine
   zweispaltige Zuordnungstabelle sonst breiter als das Gerät. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* === Ergebnisbericht ===
   Für Aufzählungen, die INNERHALB einer Karte stehen. Bewusst keine zweite
   `.card`: Eine Karte in einer Karte bekommt Rahmen, Schatten und 1,6rem
   Innenabstand doppelt und sieht aus, als gehöre sie nicht dazu. */
.report-box {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    background: var(--light-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.report-box h3 {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.report-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-box li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-light);
}

.report-box li:last-child {
    border-bottom: none;
}

/* === Zeugnisse: Übertragung ins Zeugnisprogramm ===
   ⚠️ Bewusst auf `.zeugnis-transfer` begrenzt und NICHT global auf
   `.card-header`. Zwei Seiten (student_accounts, klassenarbeiten) haben sich
   diese Klasse lokal selbst definiert, jede mit gefülltem Kopf und eigenem
   Innenabstand. Eine globale Regel würde dort einen zweiten Abstand
   hinzufügen, den hier niemand sehen kann. Wer die Kartenköpfe später
   vereinheitlicht, räumt zuerst diese beiden lokalen Blöcke auf. */
.zeugnis-transfer .card-header {
    padding-bottom: 0.9rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--border-light);
}

.zeugnis-transfer .card-header h2 {
    margin-bottom: 0;
    font-size: 1.15rem;
}

/* Der letzte Absatz einer Karte soll nicht am Knopf kleben. */
.zeugnis-transfer .card-body > p:last-of-type {
    margin-bottom: 1.1rem;
}

/* Die Zuordnungstabelle bekommt Luft zum Knopf darunter. */
.zeugnis-transfer #zgSubjectBody {
    margin-bottom: 1rem;
}

/* Zweispaltig nur, solange Platz ist — `.form-row` bricht darunter selbst um. */
.zeugnis-transfer .form-row {
    margin-bottom: 0.4rem;
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1.4rem;
    font-family: 'Lexend', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    position: relative;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── Primary: Amber capsule — the signature action button ── */
.btn-primary {
    background: linear-gradient(135deg, #f5a623 0%, #e8920c 100%);
    color: #1a0f00;
    font-weight: 700;
    border: 1px solid rgba(232,146,12,0.3);
    box-shadow: 0 2px 8px rgba(245,166,35,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #fbb534 0%, #f5a020 100%);
    box-shadow: 0 4px 16px rgba(245,166,35,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    background: linear-gradient(135deg, #e8920c 0%, #d8830a 100%);
    box-shadow: 0 1px 4px rgba(245,166,35,0.3);
}

/* ── Secondary: Royal blue solid ── */
.btn-secondary {
    background: var(--primary);
    color: #ffffff;
    border: 1px solid var(--primary-dark);
    box-shadow: 0 2px 8px rgba(24,69,200,0.25);
}

.btn-secondary:hover {
    background: var(--primary-dark);
    box-shadow: 0 4px 14px rgba(24,69,200,0.4);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(24,69,200,0.2);
}

/* ── Success: Emerald ── */
.btn-success {
    background: linear-gradient(135deg, #1db980 0%, #15976a 100%);
    color: white;
    border: 1px solid rgba(21,151,106,0.3);
    box-shadow: 0 2px 8px rgba(26,158,110,0.3);
}

.btn-success:hover {
    background: linear-gradient(135deg, #22cc8e 0%, #1aaa78 100%);
    box-shadow: 0 4px 14px rgba(26,158,110,0.45);
    transform: translateY(-1px);
}

.btn-success:active {
    transform: translateY(0);
}

/* ── Danger: Bold red ── */
.btn-danger {
    background: linear-gradient(135deg, #e5483a 0%, #c73428 100%);
    color: white;
    border: 1px solid rgba(199,52,40,0.3);
    box-shadow: 0 2px 8px rgba(229,72,58,0.3);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #f05a4b 0%, #d94035 100%);
    box-shadow: 0 4px 14px rgba(229,72,58,0.45);
    transform: translateY(-1px);
}

.btn-danger:active {
    transform: translateY(0);
}

/* ── Outline: Ghost with amber border ── */
.btn-outline {
    background: #ffffff;
    border: 1.5px solid var(--accent);
    color: var(--accent-dark);
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--accent-light);
    border-color: var(--accent-dark);
    color: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(245,166,35,0.2);
}

.btn-outline:active {
    transform: translateY(0);
}

.btn-sm {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    border-radius: 6px;
}

.btn-block {
    display: flex;
    width: 100%;
}


/* ===== 03-forms.css ===== */
/* === Forms === */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
    color: var(--dark);
}

.form-control {
    width: 100%;
    padding: 0.6rem;
    font-size: 1rem;
    border: 1px solid #c8d9f0;
    border-radius: 6px;
    background-color: var(--form-field-bg);
    transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}

.form-control:focus {
    outline: none;
    border-color: #6aabec;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.08);
    background-color: var(--form-field-bg-focus);
}

select.form-control {
    cursor: pointer;
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

/* === Passwortfeld mit Augen-Schalter ===
   Markup: <div class="password-field"><input type="password" …>
   <?= passwordToggleButton('feld-id', 'Neues Passwort') ?></div>
   Umgeschaltet wird in assets/app.js über [data-password-toggle]. */
.password-field {
    position: relative;
}

.password-field .form-control {
    /* Platz für den Knopf, damit der Text nicht darunter läuft. */
    padding-right: 2.8rem;
    /* Variable Fonts zeigen bei type="password" in manchen Browsern keine
       Bullets — deshalb hier dieselbe Systemschrift wie im Passwort-Modal. */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.password-field-toggle {
    position: absolute;
    top: 50%;
    right: 0.6rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.password-field-toggle:hover {
    color: var(--primary);
}

/* === Tables === */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(8,15,36,0.04), 0 4px 16px rgba(8,15,36,0.06);
    border: 1px solid var(--border-light);
}

.data-table thead {
    background: var(--dark);
    color: white;
}

.data-table th {
    padding: 0.9rem 1.1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(200,215,240,0.9);
}

.data-table th:first-child {
    border-left: 3px solid var(--accent);
}

.data-table td {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid #edf3fb;
    color: var(--dark-text);
    font-weight: 400;
    font-size: 0.9rem;
}

.data-table tbody tr:nth-child(even) {
    background: #f7fafd;
}

.data-table tbody tr:hover {
    background: #edf4fc;
}

.data-table .actions {
    display: flex;
    gap: 0.5rem;
}

/* === Alerts === */
.alert {
    padding: 0.9rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    border: 1px solid;
    border-left: 4px solid;
    font-size: 0.9rem;
    font-weight: 500;
}

.alert-success {
    background: var(--success-light);
    border-color: #a7dfc9;
    border-left-color: var(--success);
    color: #0e5c3a;
}

.alert-error, .alert-danger {
    background: var(--danger-light);
    border-color: #f5c0bb;
    border-left-color: var(--danger);
    color: #7c1c14;
}

.alert-warning {
    background: var(--warning-light);
    border-color: #fcd89e;
    border-left-color: var(--warning);
    color: #7a4208;
}

.alert-info {
    background: var(--info-light);
    border-color: #a0d8ea;
    border-left-color: var(--info);
    color: #054a60;
}

/* === Text Utilities === */
.text-muted {
    color: var(--text-muted);
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


/* ===== 04-login.css ===== */
/* === Login Page Modern Redesign === */

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--dark);
    color: white;
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 40%, rgba(24,69,200,0.35) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 70%, rgba(245,166,35,0.15) 0%, transparent 55%),
        radial-gradient(ellipse 100% 100% at 50% 0%, rgba(13,30,80,0.8) 0%, transparent 70%);
    pointer-events: none;
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    z-index: 1;
    position: relative;
}

.login-box {
    background: rgba(14,24,41,0.7);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
}

.login-box h1 {
    color: white;
    margin-bottom: 0.3rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.login-box h1::before {
    content: '◆ ';
    color: var(--accent);
    font-size: 1.2rem;
}

.login-box .subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2rem;
    font-size: 0.9rem;
    font-weight: 300;
}

.login-page .form-group label {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.login-page .form-control {
    background-color: var(--form-field-bg);
    border: 1px solid rgba(212, 184, 120, 0.9);
    color: var(--dark);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    transition: all 0.25s ease;
    font-family: 'Lexend', sans-serif;
}

.login-page .form-control::placeholder {
    color: var(--text-muted);
}

.login-page .form-control:focus {
    background-color: var(--form-field-bg-focus);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
}

.login-page .password-input-wrap {
    position: relative;
}

.login-page .password-input-wrap .form-control {
    padding-right: 3rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Augen-Button exakt auf die Feldmitte. Wichtig: das <span> als Flexbox rendern,
   sonst schiebt der Zeilenabstand des inline-Elements das SVG optisch nach oben
   (Baseline-Versatz) und es wirkt zu hoch. */
.login-page .password-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

.login-page .btn-primary {
    background: linear-gradient(135deg, #f5a623 0%, #e8920c 100%);
    color: #1a0f00;
    font-weight: 800;
    border: none;
    box-shadow: 0 4px 20px rgba(245,166,35,0.4);
    font-size: 1rem;
    padding: 0.85rem 1.4rem;
    margin-top: 0.75rem;
}

.login-page .login-form .btn-primary.btn-block {
    margin-top: 2.4rem !important;
}

.login-page .btn-primary:hover {
    background: linear-gradient(135deg, #fbb534 0%, #f5a020 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(245,166,35,0.55);
}

/* „Passwort vergessen?" und „Zur Anmeldung" unter den Formularen */
.login-page .login-links {
    text-align: center;
    margin: 1.4rem 0 0;
    font-size: 0.9rem;
}

.login-page .login-links a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
}

.login-page .login-links a:hover,
.login-page .login-links a:focus-visible {
    color: var(--accent);
    text-decoration: underline;
}


/* ===== 05-dashboard.css ===== */
/* === Dashboard Cards === */
.dashboard-card {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1.8rem 1.6rem;
    text-align: center;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(8,15,36,0.04), 0 4px 14px rgba(8,15,36,0.05);
    position: relative;
    overflow: hidden;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.dashboard-card:hover {
    border-color: var(--border);
    box-shadow: 0 4px 20px rgba(8,15,36,0.1), 0 0 0 2px rgba(245,166,35,0.15);
    transform: translateY(-3px);
}

.dashboard-card:hover::before {
    opacity: 1;
}

.dashboard-card .icon {
    font-size: 2.5rem;
    margin-bottom: 0.9rem;
    display: block;
}

.dashboard-card h3 {
    color: var(--dark);
    margin-bottom: 0.4rem;
    font-weight: 700;
    font-size: 1rem;
}

.dashboard-plusminus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 240px));
    gap: 1.1rem;
    margin-bottom: 1.6rem;
}

.dashboard-plusminus-link {
    text-decoration: none;
}

.dashboard-plusminus-card {
    min-height: 210px;
    aspect-ratio: 1 / 1;
    padding: 1.25rem;
    border-radius: 20px;
    border: 1px solid rgba(24,69,200,0.12);
    background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
    box-shadow: 0 1px 3px rgba(8,15,36,0.04), 0 10px 24px rgba(8,15,36,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.45rem;
    text-align: center;
}

.dashboard-plusminus-card:hover {
    transform: translateY(-3px);
    border-color: rgba(24,69,200,0.24);
    box-shadow: 0 10px 24px rgba(8,15,36,0.1);
}

.dashboard-plusminus-card__type {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary-dark);
    letter-spacing: 0.04em;
}

.dashboard-plusminus-card__class {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-muted);
}

.dashboard-plusminus-card h2 {
    margin: 0;
    color: var(--dark);
    font-size: 1.15rem;
    line-height: 1.25;
    word-break: break-word;
}

.dashboard-stats-card {
    margin-top: 1.6rem;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
}

/* === Badges === */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    font-family: 'Lexend', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--primary);
    color: white;
}

.badge-success {
    background: var(--success-light);
    color: var(--success);
}

.badge-danger {
    background: var(--danger-light);
    color: var(--danger);
}

.badge-warning {
    background: var(--accent-light);
    color: var(--accent-dark);
}

/* === Grade Display === */
.grade-display {
    font-size: 1.4rem;
    font-weight: 800;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    display: inline-block;
    letter-spacing: -0.02em;
}

.grade-1 { background: #d0f5e6; color: #0a5c35; border: 1px solid #9de4c0; }
.grade-2 { background: #d0edf5; color: #0a4a5c; border: 1px solid #9dd4e4; }
.grade-3 { background: #fef3c7; color: #7a4208; border: 1px solid #fcd899; }
.grade-4 { background: #fde8e6; color: #7c1c14; border: 1px solid #f5b8b2; }
.grade-5 { background: #fbd4d0; color: #7c1c14; border: 1px solid #f5a09a; }
.grade-6 { background: #e5483a; color: white; border: 1px solid #c73428; }


/* === Hinweis auf das Ende des Nutzungszeitraums ===
   Wird von views/license_notice.php gerendert (90/60/30 Tage vorher). Der
   Streifen sitzt zwischen Navigation und Inhalt, damit er auf jeder Seite
   auftaucht, ohne den Inhalt zu verdecken. */
.license-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.25rem 0 -0.5rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--accent);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--dark-text);
}

.license-notice--urgent {
    border-color: var(--danger);
    border-left-color: var(--danger);
    background: var(--danger-light);
}

.license-notice-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.92rem;
}

.license-notice-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.license-notice-actions form {
    margin: 0;
}

/* === Verwaltung (Super-Admin, views/sections/einstellungen.php) ==============
 *
 * Vier Reiter statt einer langen Spalte. Die Reiter sehen aus wie die im
 * Listen-Bereich (`.listen-hub__tab`) und verhalten sich genauso — es sind
 * Links mit `?tab=`, keine Umschalter im Browser: Ein Reiter bleibt damit
 * verlinkbar, und nach dem Absenden eines Formulars landet man wieder dort.
 */

.adm__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.adm__subtitle {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    max-width: 620px;
}

.adm-tabs {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.adm-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.05rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--primary);
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    box-shadow: 0 2px 8px rgba(8,15,36,0.06);
}

.adm-tab:hover {
    border-color: var(--accent);
}

.adm-tab.is-active {
    background: var(--accent);
    color: #1a2035;
    border-color: var(--accent);
    box-shadow: 0 4px 14px rgba(245,166,35,0.35);
}

/* Kennzahlen über der Übersicht: was der Bestand hergibt, auf einen Blick. */
/* Flexbox und nicht Grid: Die Kacheln sollen sich die Zeile teilen, und die
   Zahl der Kacheln wechselt (die beiden Warnkacheln erscheinen nur bei Bedarf).
   `flex: 1 1 140px` verteilt gleichmäßig und bricht selbst um. */
.adm-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.adm-stat {
    flex: 1 1 140px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    box-shadow: 0 1px 3px rgba(8,15,36,0.04), 0 4px 16px rgba(8,15,36,0.06);
}

.adm-stat__num {
    display: block;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--dark);
    font-variant-numeric: tabular-nums;
}

.adm-stat__label {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Nur eingefärbt, wenn die Zahl über null steht — eine rote Null wäre ein
   Alarm ohne Anlass; die Klasse setzt die Section entsprechend. */
.adm-stat--warn .adm-stat__num { color: var(--accent-dark); }
.adm-stat--bad  .adm-stat__num { color: var(--danger); }

.adm-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.adm-card-head h2 { margin-bottom: 0; }

.adm-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.adm-search { min-width: 260px; }

.adm-treffer { margin-bottom: 0.6rem; }

/* Sortierbare Kopfzeile. Der Kopf der Tabelle ist dunkel, deshalb sind die
   Links dort hell — geerbt wird die Farbe der Zelle. */
.adm-sort {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.adm-sort:hover { color: var(--accent); }
.adm-sort.is-active { color: var(--accent); }

/* Eine Person, eine Zelle: Name, Anmeldename und (falls abweichend) die
   E-Mail-Adresse standen vorher in drei Spalten und machten die Tabelle
   breiter als den Bildschirm. */
.adm-person__name {
    display: block;
    font-weight: 700;
    color: var(--dark);
}

.adm-person__meta {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    word-break: break-word;
}

.adm-table td { vertical-align: top; }

.adm-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: flex-start;
}

.adm-actions form { margin: 0; }

/* Aufklapper in der Tabelle. `.data-table` hat `overflow:hidden` (wegen der
   abgerundeten Ecken) — ein schwebendes Menü wäre dort abgeschnitten. Deshalb
   wächst das Feld in der Zeile mit, statt darüber zu liegen. */
.adm-drop > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
}

.adm-drop > summary::-webkit-details-marker { display: none; }
.adm-drop > summary::marker { content: ''; }

.adm-panel {
    margin-top: 0.5rem;
    padding: 0.8rem;
    min-width: 220px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.adm-panel__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.adm-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
}

.adm-form .form-control { width: 100%; }
.adm-form .password-field { width: 100%; }

.adm-form--getrennt {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border-light);
}

/* Anlegen: zugeklappt eine Zeile, aufgeklappt das gewohnte Formular. */
.adm-neu__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}

.adm-neu__summary::-webkit-details-marker { display: none; }
.adm-neu__summary::marker { content: ''; }

.adm-neu__summary small { display: block; font-weight: 400; }

.adm-neu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent-dark);
    font-size: 1.2rem;
    font-weight: 800;
}

.adm-neu[open] .adm-neu__form {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-light);
}

.adm-dl {
    display: grid;
    grid-template-columns: minmax(180px, max-content) 1fr;
    gap: 0.45rem 1.2rem;
    margin-bottom: 1.2rem;
}

.adm-dl dt { font-weight: 700; color: var(--text-muted); font-size: 0.85rem; }
.adm-dl dd { margin: 0; }

.adm-beispiel {
    margin-top: 30px;
    padding: 15px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

@media (max-width: 900px) {
    .adm__header { flex-direction: column; }
    .adm-tabs { width: 100%; }
    .adm-tab { flex: 1 1 45%; justify-content: center; }
    .adm-search { min-width: 0; flex: 1 1 100%; }
    .adm-dl { grid-template-columns: 1fr; gap: 0.15rem; }
    .adm-dl dd { margin-bottom: 0.5rem; }
}

/* ===== 06-responsive-legacy.css ===== */
/* === Responsive === */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .nav-container {
        flex-direction: column;
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .data-table {
        font-size: 0.9rem;
    }

    .data-table th,
    .data-table td {
        padding: 0.6rem;
    }
}

@media (max-width: 900px) {
    body.nav-open {
        overflow: hidden;
    }

    .main-header {
        padding: 0.8rem 1rem;
    }

    .header-content {
        gap: 0.9rem;
        align-items: center;
    }

    .header-brand {
        flex: 1;
        justify-content: flex-start;
        min-width: 0;
        gap: 0.75rem;
    }

    .logo {
        font-size: 1.2rem;
    }

    .nav-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }

    .user-info {
        width: auto;
        gap: 0.75rem;
        justify-content: flex-end;
        margin-left: auto;
        flex-wrap: nowrap;
    }

    .user-name {
        flex: 0 1 auto;
        font-size: 0.85rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 220px;
    }

    .main-nav {
        border-bottom: 1px solid var(--border-light);
        box-shadow: none;
        background: transparent;
    }

    .nav-overlay {
        display: none;
    }

    .nav-container {
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 1rem;
        background: linear-gradient(180deg, #ffffff 0%, #f7fafd 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
        border-left: none;
        border-top: 1px solid var(--border-light);
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        overflow-y: hidden;
        overflow-x: hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.24s ease, opacity 0.18s ease, padding 0.18s ease;
    }

    .main-nav.is-open .nav-container {
        max-height: 80vh;
        opacity: 1;
        visibility: visible;
        padding: 0.85rem 1rem 1rem;
    }

    .nav-mobile-head {
        display: none;
    }

    .nav-mobile-title {
        font-size: 1rem;
        font-weight: 800;
        color: var(--dark);
        letter-spacing: -0.02em;
    }

    .nav-close {
        width: 40px;
        height: 40px;
        border: 1px solid var(--border-light);
        border-radius: 10px;
        background: #fff;
        color: var(--text-muted);
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
    }

    .nav-link {
        width: 100%;
        padding: 0.95rem 1rem;
        border: 1px solid transparent;
        border-radius: 12px;
        border-bottom-width: 1px;
        text-transform: none;
        font-size: 0.95rem;
        letter-spacing: 0;
    }

    .nav-link--icon {
        min-width: 0;
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .nav-link--icon .sr-only {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .nav-link:hover,
    .nav-link.active {
        border-color: var(--accent-light);
    }

    .container {
        margin: 1rem auto;
        padding: 0 1rem 1rem;
    }

    .card {
        padding: 1.1rem;
        border-radius: 12px;
    }

    .page-header > div {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    .page-header > div .btn,
    .page-header > div a.btn {
        flex: 1 1 150px;
    }

    .data-table,
    .perf-table,
    .student-grade-table {
        display: block;
        width: 100%;
        min-width: 640px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .grades-entry-container {
        padding: 1rem 0 5rem;
    }

    .grades-header {
        padding: 1rem;
    }

    .grades-selectors {
        width: 100%;
    }

    .grades-nav-arrows {
        width: 100%;
        flex-direction: row;
    }

    .grades-nav-arrows .btn-icon {
        flex: 1 1 0;
    }

    .grades-actions {
        width: 100%;
        justify-content: stretch;
    }

    .grades-actions .btn-icon {
        flex: 1 1 calc(50% - 0.25rem);
    }
}

@media (max-width: 640px) {
    .main-header {
        padding: 0.65rem 0.85rem;
    }

    .logo {
        font-size: 1rem;
    }

    .header-content {
        gap: 0.55rem;
    }

    .nav-toggle {
        width: 40px;
        height: 40px;
        margin-left: auto;
    }

    .nav-toggle span {
        width: 18px;
    }

    .user-info {
        gap: 0.4rem;
    }

    .user-name {
        display: none;
    }

    .user-info form {
        display: inline-flex !important;
        margin: 0;
    }

    .user-info .btn-sm {
        padding: 0.32rem 0.65rem;
        font-size: 0.74rem;
        min-height: 36px;
        border-radius: 8px;
    }

    .user-info .btn-gear {
        width: 36px;
        height: 36px;
    }

    .page-header h1 {
        font-size: 1.45rem;
    }

    .dashboard-plusminus-grid {
        grid-template-columns: 1fr;
    }
}

/* === Empty State === */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--light-bg);
    border-radius: 8px;
    border: 1px dashed #b0c8e8;
}

.empty-state .icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}


/* ===== 07-noten.css ===== */
/* === Noteneingabe-Maske === */
.grades-entry-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Kopfbereich */
.grades-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 1.2rem 1.8rem;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(26,86,219,0.06);
    margin-bottom: 1.5rem;
    gap: 1rem;
    border: 1px solid #dce8f8;
}

.grades-selectors {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.grades-select {
    min-width: 132px;
    max-width: 170px;
    padding: 0.55rem 0.8rem;
    font-size: 0.92rem;
    border: 1px solid #d8ca85;
    border-radius: 8px;
    background-color: var(--form-field-bg);
    cursor: pointer;
    transition: all 0.25s ease;
    font-weight: 500;
}

.grades-select--topic {
    min-width: 185px;
    max-width: 250px;
}

.btn-topic-plus {
    font-size: 1.05rem;
}

.grades-select:hover {
    border-color: #c8b660;
    box-shadow: 0 2px 6px rgba(200, 182, 96, 0.15);
}

.grades-select:focus {
    outline: none;
    border-color: #b8a040;
    box-shadow: 0 0 0 3px rgba(200, 182, 96, 0.15);
    transform: translateY(-1px);
}

.grades-nav-arrows {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.btn-icon {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 7px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    transition: all 0.2s ease;
    color: var(--text-muted);
    box-shadow: 0 1px 3px rgba(8,15,36,0.06);
    position: relative;
}

.grades-nav-arrows .btn-icon {
    font-size: 0.78rem;
}

.btn-icon:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(245,166,35,0.2);
}

.btn-icon:active {
    transform: translateY(0);
    background: #fce4b0;
}

.grades-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Hauptbereich */
.grades-main {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 1.5rem;
    min-height: 600px;
}

/* Linker Bereich: Klassenarbeiten */
.grades-exams-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(26,86,219,0.06);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #dce8f8;
    font-size: 0.76rem;
}

.exams-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    table-layout: fixed;
}

.exams-table thead {
    background: var(--primary);
    color: white;
}

.exams-table th {
    padding: 0.55rem 0.6rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.7rem;
}

.exams-table td {
    padding: 0.5rem 0.55rem;
    border-bottom: 1px solid #e8f0fb;
    font-size: 0.76rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exams-table th:nth-child(1),
.exams-table td:nth-child(1) {
    width: 64%;
}

.exams-table th:nth-child(2),
.exams-table td:nth-child(2) {
    width: 13%;
    white-space: nowrap;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.exams-table th:nth-child(3),
.exams-table td:nth-child(3) {
    width: 23%;
    white-space: nowrap;
    font-size: 0.7rem;
    text-align: center;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.exams-table thead th:nth-child(2) {
    text-align: center;
}

.exams-table thead th:nth-child(3) {
    font-size: 0.68rem;
    text-align: center;
}

.exam-row {
    transition: background 0.2s;
}

.exam-row:hover:not(.active) {
    background: var(--light-bg);
    cursor: pointer;
}

.exam-row.active {
    background: linear-gradient(90deg, var(--accent-light) 0%, #fff8ec 100%);
    box-shadow: inset 3px 0 0 var(--accent);
    transform: translateX(2px);
}

.exam-row.new-exam input {
    width: 100%;
    border: 1px solid #e3cf86;
    background-color: var(--form-field-bg);
    font-size: 0.8rem;
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
    color: var(--dark-text);
    font-family: 'Lexend', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.exam-row.new-exam .exam-topic-input {
    min-height: 2.2rem;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 0.4rem 0.6rem;
    box-shadow: inset 0 1px 2px rgba(120, 90, 0, 0.06);
}

.exam-row.new-exam .exam-topic-input:hover {
    border-color: #c8b660;
}

.exam-row.new-exam .exam-topic-input::placeholder {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.8;
}

.exam-row.new-exam td {
    vertical-align: middle;
}

/* PC + Tablet: Datum in der neuen Zeile nur über Kalender-Symbol (wie iPad) */
.exam-date-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.exam-date-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.2rem;
    padding: 0.35rem 0.35rem;
    border: 1px solid #e3cf86;
    border-radius: 8px;
    background: var(--form-field-bg);
    color: var(--dark-text);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    box-shadow: inset 0 1px 2px rgba(120, 90, 0, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.exam-date-display:hover {
    border-color: #c8b660;
    box-shadow: 0 1px 4px rgba(200, 182, 96, 0.2);
}

.exam-date-display__value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

.exam-row.new-exam td:nth-child(3) {
    position: relative;
    padding-left: 0.35rem;
}

.exam-row.new-exam .exam-date-input {
    display: none;
    width: 100%;
    min-width: 0;
}

.exam-date-wrap.is-picking .exam-date-display {
    display: none;
}

.exam-date-wrap.is-picking .exam-date-input {
    display: block;
}

.exam-date-wrap:focus-within .exam-date-display,
.exam-date-wrap.is-picking .exam-date-input {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Tablet: etwas mehr Platz für „Thema eingeben“, Datum kompakter (TT.MM.JJ) */
@media (max-width: 1200px) {
    .exams-table th:nth-child(1),
    .exams-table td:nth-child(1) {
        width: 62%;
    }

    .exams-table th:nth-child(2),
    .exams-table td:nth-child(2) {
        width: 14%;
    }

    .exams-table th:nth-child(3),
    .exams-table td:nth-child(3) {
        width: 24%;
    }
}

.exam-topic-input:focus,
.exam-date-input:focus {
    outline: 2px solid var(--accent);
    border-radius: 4px;
    background-color: var(--form-field-bg-focus);
}

.new-exam-action {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #e8f0fb;
}

/* Rechter Bereich: Schülerliste */
.grades-students-panel {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(26,86,219,0.06);
    padding: 1.5rem;
    overflow: visible;
    max-height: none;
    border: 1px solid #dce8f8;
}

.grades-students-panel::-webkit-scrollbar {
    width: 8px;
}

.grades-students-panel::-webkit-scrollbar-track {
    background: var(--light-bg);
    border-radius: 4px;
}

.grades-students-panel::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    border-radius: 4px;
}

.grades-students-panel::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.students-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.students-column {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.student-grade-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    transition: all 0.25s ease;
    border-left: 0;
    background: white;
    box-shadow: 0 1px 2px rgba(26,86,219,0.04);
}

.student-row-even {
    background: #e8f0fb;
}

.student-row-odd {
    background: #ffffff;
}

.student-grade-row:hover {
    background: #dce8f8 !important;
    box-shadow: 0 2px 8px rgba(26,86,219,0.1);
    transform: translateX(2px);
}

.student-icon {
    font-size: 1.2rem;
    opacity: 0.6;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.student-name {
    flex: 1;
    font-weight: 500;
    color: var(--dark);
    min-width: 0;
}

/* Geschlechtsfarbe seit 15.09.2026 nur noch am Avatar (17-gestaltung.css). */
.student-grade-row[data-gender="m"] {
    background: #ffffff;
}

.student-grade-row[data-gender="m"] .student-name,
.student-grade-row[data-gender="m"] .student-icon {
    color: #1e40af;
}

.student-grade-row[data-gender="w"] {
    background: #ffffff;
}

.student-grade-row[data-gender="w"] .student-name,
.student-grade-row[data-gender="w"] .student-icon {
    color: #b91c1c;
}

.student-name.highlight {
    color: var(--danger);
    font-weight: 600;
}

.grade-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: relative;
}

.grade-input {
    width: 80px;
    padding: 0.5rem;
    border: 2px solid var(--border);
    border-radius: 4px;
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    background-color: var(--form-field-bg);
}

.grade-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    background-color: var(--form-field-bg-focus);
}

.perf-gender-m {
    color: #1d4ed8;
}

.perf-gender-w {
    color: #be123c;
}

/* Status-Icons für Auto-Save */
.grade-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 0.9rem;
    position: relative;
}

.grade-status-icon span {
    display: none;
    transition: all 0.3s ease;
}

.grade-status-icon[data-status="idle"] .status-idle {
    display: inline;
    color: #ccc;
    opacity: 0.5;
}

.grade-status-icon[data-status="saving"] .status-saving {
    display: inline;
    color: var(--primary);
    animation: spin 1s linear infinite;
}

.grade-status-icon[data-status="saved"] .status-saved {
    display: inline;
    color: var(--success);
    animation: checkmark 0.5s ease;
}

.grade-status-icon[data-status="error"] .status-error {
    display: inline;
    color: var(--danger);
    animation: shake 0.5s ease;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes checkmark {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Row-Status-Highlighting */
.student-grade-row.saving {
    background: rgba(24,69,200,0.07) !important;
    border-left: 3px solid var(--primary);
}

.student-grade-row.saved {
    background: rgba(26,158,110,0.08) !important;
    border-left: 3px solid var(--success);
    animation: flashGreen 0.5s ease;
}

.student-grade-row.error {
    background: rgba(229,72,58,0.08) !important;
    border-left: 3px solid var(--danger);
}

@keyframes flashGreen {
    0% { background: rgba(40, 167, 69, 0.3); }
    100% { background: rgba(40, 167, 69, 0.1); }
}

/* Verbesserte Noteneingabefelder */
.grade-input {
    width: 70px;
    padding: 0.4rem;
    border: 1px solid #c8d9f0;
    border-radius: 6px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.25s ease;
    background-color: var(--form-field-bg);
}

.grade-input:hover {
    border-color: #93c5fd;
    box-shadow: 0 1px 6px rgba(26, 86, 219, 0.1);
}

.grade-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.1);
    transform: scale(1.04);
    background-color: var(--form-field-bg-focus);
}

.grade-input:valid {
    border-color: #7bc9a8;
}

/* Auto-Save-Indikator */
.save-status {
    margin-bottom: 1rem;
}

.auto-save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f7fafd;
    border: 1px solid var(--border-light);
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.25s ease;
}

.auto-save-indicator.saving {
    background: #edf4fc;
    color: var(--primary);
    border-color: #b0ccf0;
}

.auto-save-indicator.saved {
    background: var(--success-light);
    color: var(--success);
    border-color: #a7dfc9;
}

.auto-save-indicator.error {
    background: var(--danger-light);
    color: var(--danger);
    border-color: #f5b8b2;
}

.auto-save-indicator .status-icon {
    font-size: 1rem;
    animation: pulse 2s ease-in-out infinite;
}

.auto-save-indicator.saving .status-icon {
    animation: spin 1s linear infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.grades-form-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e8f0fb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Responsive */
@media (max-width: 1200px) {
    .grades-main {
        grid-template-columns: minmax(228px, 256px) 1fr;
        gap: 1rem;
        align-items: start;
    }

    .grades-exams-panel {
        order: 1;
        padding: 1rem 0.85rem;
    }

    .grades-students-panel {
        order: 2;
    }

    .students-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* iPad: Header darf umbrechen, Buttons bleiben quadratisch */
    .grades-header {
        flex-wrap: wrap;
        row-gap: 0.65rem;
    }
    .grades-selectors {
        flex-wrap: wrap;
    }
    .grades-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width: 980px) {
    .grades-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .grades-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .grades-selectors {
        flex-wrap: wrap;
    }
    
    .grades-select {
        min-width: 100%;
        max-width: 100%;
    }
    
    .grades-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    .students-grid {
        grid-template-columns: 1fr;
    }
}

/* === Bewertungs-Punkte-Buttons === */
.interactive-grading-widget {
    background: #fff;
    border: 1px solid #dce8f8;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 4px rgba(26,86,219,0.05);
}

.criterion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.criterion-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 1rem;
}

.criterion-weight {
    color: #64748b;
    font-size: 0.875rem;
}

.grading-controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribute items and push point-buttons to left, others to right if needed */
}

.grading-controls .point-buttons {
    flex-grow: 1; /* Allow point buttons to take available space */
}

.grading-controls .override-input-wrapper {
    margin-left: auto; /* Push input and NA button to the right */
}


.grading-controls.is-na .point-buttons,
.grading-controls.is-na .override-input-wrapper {
    pointer-events: none;
    opacity: 0.5;
}

.point-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: #f0f5fc;
    padding: 0.75rem;
    border-radius: 0.375rem;
    max-width: 100%;
}

.point-btn {
    border: none;
    background: transparent;
    color: #475569;
    font-weight: 600;
    padding: 0; /* Remove padding to allow fixed width/height to control size */
    width: 44px; /* Fixed width */
    height: 44px; /* Fixed height */
    flex-shrink: 0; /* Prevent shrinking */
    flex-grow: 0; /* Prevent growing */
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    display: flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
}

.point-btn:hover {
    background-color: #e2e8f0;
    transform: scale(1.05);
}

.point-btn:active {
    background-color: #cbd5e1;
    transform: scale(0.98);
}

.point-btn.selected {
    background: linear-gradient(135deg, #f5a623 0%, #e8920c 100%);
    color: #1a0f00;
    box-shadow: 0 3px 10px -2px rgba(245,166,35,0.5);
    transform: scale(1.05);
    font-weight: 800;
}

.point-btn.selected:active {
    transform: scale(1.02);
}

.override-input-wrapper {
    width: 75px;
}

.override-input {
    width: 100%;
    padding: 0.5rem 0.375rem;
    border: 1px solid #c8d9f0;
    border-radius: 0.375rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    background-color: var(--form-field-bg);
}

.override-input:focus {
    outline: none;
    border-color: #1a56db;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.08);
    background-color: var(--form-field-bg-focus);
}

.na-btn {
    padding: 0.5rem 0.75rem;
    border: 1px solid #c8d9f0;
    background: #fff;
    color: #64748b;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.na-btn:hover {
    background: #f0f5fc;
    border-color: #93c5fd;
}

.na-btn.selected {
    background: #fef3c7;
    border-color: #fbbf24;
    color: #92400e;
}

.final-grade-display {
    background: linear-gradient(135deg, #0d1e50 0%, #162d78 100%);
    color: white;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(8,15,36,0.35), 0 0 0 1px rgba(245,166,35,0.2);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    transition: all 0.3s ease;
    border-top: 2px solid rgba(245,166,35,0.4);
}

.final-grade-display.pinned {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5);
    margin-bottom: 0;
    animation: slideDown 0.3s ease;
    border-radius: 0;
}

@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Placeholder to reserve space when pinned */
.final-grade-placeholder {
    height: 0;
    transition: height 0.3s ease;
}

/* Control Buttons im blauen Feld (Ansicht + Pin) */
.grid-view-btn,
.pin-grade-btn {
    position: absolute;
    top: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.grid-view-btn {
    left: 0.75rem;
}

.pin-grade-btn {
    right: 0.75rem;
}

.grid-view-btn:hover,
.pin-grade-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.grid-view-btn:active,
.pin-grade-btn:active {
    transform: scale(0.95);
}

.final-grade-display.pinned .pin-grade-btn {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Verstecke den separaten Button unterhalb des blauen Feldes */
.tablet-grid-toggle-container {
    display: none !important;
}

/* === Kompakte Grid-Ansicht (für alle Geräte) === */
#criteria-container.criteria-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.6rem;
}

#criteria-container.criteria-grid-view .interactive-grading-widget {
    padding: 0.6rem;
    margin-bottom: 0;
}

#criteria-container.criteria-grid-view .criterion-header {
    margin-bottom: 0.35rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

#criteria-container.criteria-grid-view .criterion-name {
    font-size: 0.9rem;
    line-height: 1.25;
}

#criteria-container.criteria-grid-view .criterion-weight {
    font-size: 0.75rem;
}

/* Grading Controls in compact view */
#criteria-container.criteria-grid-view .grading-controls {
    display: flex; /* Use flexbox for overall layout */
    flex-wrap: wrap; /* Allow items to wrap */
    gap: 0.4rem;
    align-items: center; /* Align items vertically */
}

/* Row 1: Point Buttons */
#criteria-container.criteria-grid-view .point-buttons {
    order: 1; /* Ensure point buttons come first */
    flex-basis: 100%; /* Take full width */
    max-width: 100%; /* Ensure it doesn't overflow */
    justify-content: flex-start;
}

/* Row 2: Input field and N/A button */
#criteria-container.criteria-grid-view .override-input-wrapper {
    order: 2; /* Second in order */
    flex-grow: 1; /* Allow to grow and fill space */
    min-width: 60px; /* Minimum width */
    max-width: fit-content; /* Adjust to content size */
}

#criteria-container.criteria-grid-view .na-btn {
    order: 3; /* Third in order */
    min-width: 50px;
    min-height: 40px;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
}

.final-grade-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 0 3rem;
}

.final-grade-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.final-grade-nav-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-width: 80px;
}

.final-grade-nav-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.final-grade-nav-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.final-grade-student {
    text-align: center;
    flex: 0 0 auto;
}

.final-grade-student-label {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 0.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.final-grade-student-name {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.final-grade-counter {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

.final-grade-main {
    text-align: center;
    flex: 0 0 auto;
}

.final-grade-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    margin-bottom: 0.3rem;
}

.final-grade-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.3rem;
    color: var(--accent);
    text-shadow: 0 2px 8px rgba(245,166,35,0.3);
    letter-spacing: -0.03em;
}

.final-grade-info {
    font-size: 0.8rem;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .interactive-grading-widget {
        padding: 0.625rem 0.875rem;
        margin-bottom: 0.625rem;
    }
    .criterion-header {
        margin-bottom: 0.375rem;
    }
    .point-btn {
        padding: 0.625rem 0.75rem;
        min-height: 42px;
        min-width: 45px;
        font-size: 0.9375rem;
    }
    .point-buttons {
        gap: 0.375rem;
        padding: 0.5rem;
    }
    .grading-controls {
        gap: 0.375rem;
    }
    .final-grade-value {
        font-size: 2rem;
    }
    .final-grade-row {
        flex-direction: column;
        gap: 1rem;
        padding: 0 1rem;
    }
    .final-grade-nav-btn {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 0.5rem;
    }
}

/* === Einklappbare Bereiche für Bewertungen === */
.collapsible-section {
    margin-bottom: 1.5rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 0;
    user-select: none;
}

.section-header:hover {
    opacity: 0.8;
}

.collapsible-section .section-header {
    cursor: pointer;
}

.collapse-icon {
    font-size: 0.875rem;
    color: #64748b;
    transition: transform 0.3s ease;
}

.collapsible-section.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.section-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 5000px;
    opacity: 1;
}

.collapsible-section.collapsed .section-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Tablet Grid Toggle Button - Standard: versteckt, auf Tablets sichtbar */
.tablet-grid-toggle-container {
    display: none;
    margin-bottom: 1rem;
    justify-content: center;
}

#toggle-grid-view-btn {
    min-height: 50px;
    padding: 0.9rem 1.5rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* === iPad-Optimierungen === */
/* iPad Portrait & Landscape */
















/* Touch-Optimierungen für alle Tablets */
@media (hover: none) and (pointer: coarse) {
    /* Entfernen von Hover-Effekten, die auf Touch-Geräten störend sind */
    .btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .nav-link:hover {
        transform: none;
    }

    /* Touch-Feedback durch active state */
    .btn:active,
    .btn-primary:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .nav-link:active {
        background: var(--accent-light);
        opacity: 0.9;
    }

    /* Größere Clickable Areas */
    .data-table tbody tr {
        cursor: pointer;
    }

    .data-table tbody tr:active {
        background: var(--light-bg);
    }

    /* Bewertungsseite Touch-Feedback */
    .point-btn:active {
        transform: scale(0.95);
        background: var(--primary);
        color: white;
    }

    .na-btn:active {
        transform: scale(0.95);
    }

    #prev-student-btn:active,
    #next-student-btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    #create-assessment-btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    .section-header:active {
        opacity: 0.7;
    }
}

/* Notenübersicht iPad-Optimierung */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px) {

    .overview-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .overview-table {
        min-width: 100%;
    }

    .overview-table th,
    .overview-table td {
        padding: 0.8rem;
        min-width: 80px;
    }

    .grade-edit-input {
        min-width: 70px;
        min-height: 44px;
        font-size: 1.1rem;
        padding: 0.6rem;
    }

    /* Sticky erste Spalte für horizontales Scrollen */
    .overview-table th:first-child,
    .overview-table td:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 10;
        box-shadow: 2px 0 8px rgba(8,15,36,0.08);
    }

    .overview-table thead th:first-child {
        z-index: 20;
    }
}

/* Verbesserte Filter-Selektoren für iPad */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px) {

    .filter-controls {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .filter-controls select,
    .filter-controls input {
        width: 100%;
        min-height: 48px;
        font-size: 1.05rem;
    }
}

/* ===== Notenrechner – schwebendes Fenster ===== */
.nr-win {
    position: fixed;
    z-index: 900;
    width: 320px;
    min-width: 200px;
    min-height: 180px;
    display: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(8,15,36,0.38), 0 2px 8px rgba(8,15,36,0.15);
    resize: both;
    font-size: 14px;
    border: 1px solid var(--border-dark);
}

.nr-win.open {
    display: flex;
    flex-direction: column;
}

/* Header – Drag-Handle */
.nr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5em 0.75em;
    background: var(--header-gradient);
    color: white;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
    touch-action: none;
}

.nr-header:active {
    cursor: grabbing;
}

.nr-title {
    font-size: 0.88em;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.nr-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.65);
    font-size: 1.05em;
    line-height: 1;
    cursor: pointer;
    padding: 0.15em 0.35em;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.nr-close:hover {
    color: white;
    background: rgba(255,255,255,0.18);
}

/* Body */
.nr-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.65em;
    min-height: 0;
}

/* Toolbar: Tabs + ∑+ Toggle */
.nr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4em;
    flex-shrink: 0;
}

/* Tabs */
.nr-tabs {
    display: flex;
    gap: 0.4em;
    flex-shrink: 0;
}

.nr-tab {
    flex: 1;
    padding: 0.35em 0.5em;
    font-size: 0.86em;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--light-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.nr-tab.active {
    background: var(--accent);
    border-color: var(--accent-dark);
    color: #fff;
}

.nr-tab:hover:not(.active) {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent-dark);
}

/* ∑+ Toggle-Button */
.nr-adder-btn {
    padding: 0.35em 0.55em;
    font-size: 0.86em;
    font-weight: 700;
    border: 1.5px dashed var(--border);
    border-radius: 6px;
    background: var(--light-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.nr-adder-btn:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent-dark);
}

.nr-adder-btn--active {
    background: var(--primary);
    border-color: var(--primary-dark);
    border-style: solid;
    color: #fff;
}

/* Panels-Container: Hauptpanel + Addierer rechts */
.nr-panels {
    display: flex;
    gap: 0.65em;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.nr-main-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 160px;
}

/* Die beiden inneren Panels (Punkte / Fehler) müssen selbst Flex-Columns
   sein, damit die Nachschlagetabelle via flex:1 + overflow:auto eine
   klare Höhe bekommt und scrollen kann. */
#nr-panel-punkte,
#nr-panel-fehler {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0.5em;
}

#nr-panel-punkte[hidden],
#nr-panel-fehler[hidden] {
    display: none !important;
}

/* Aufklappbarer Addierer rechts */
.nr-adder-col {
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    padding-left: 0.55em;
    border-left: 1px solid var(--border);
    min-width: 160px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* hidden-Attribut muss display:flex explizit überschreiben */
.nr-adder-col[hidden] {
    display: none !important;
}

.nr-adder-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35em;
    flex-shrink: 0;
}

.nr-adder-col-head {
    font-size: 0.72em;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nr-adder-count-wrap {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.78em;
    color: var(--text-muted);
    justify-content: flex-start;
}

.nr-adder-count-inp {
    width: 2.6em;
    padding: 0.12em 0.2em;
    font-size: 0.88em;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 5px;
    text-align: center;
    flex-shrink: 0;
}

/* Einstellungs-Zeile */
.nr-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4em;
    font-size: 0.78em;
    flex-shrink: 0;
}

.nr-setting label {
    color: var(--text-muted);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nr-setting input[type="number"] {
    width: 4em;
    padding: 0.2em 0.35em;
    font-size: 0.95em;
    border: 1px solid var(--border);
    border-radius: 5px;
    text-align: center;
    flex-shrink: 0;
}

/* Eingabe → Ergebnis-Zeile – alle Maße in em, damit die Zeile mit der
   Fenstergröße (font-size am .nr-win) mitskaliert. */
.nr-calc-row {
    display: flex;
    align-items: center;
    gap: 0.35em;
    flex-shrink: 0;
    background: var(--light-bg);
    border-radius: 6px;
    padding: 0.3em 0.45em;
    border: 1px solid var(--border-light);
    font-size: 0.82em;
}

.nr-calc-row label {
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.nr-calc-input {
    width: 3.4em;
    padding: 0.18em 0.3em;
    font-size: 1em;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
    flex-shrink: 1;
    min-width: 0;
}

.nr-arrow {
    color: var(--text-muted);
    font-size: 0.95em;
    flex-shrink: 0;
}

.nr-result-box {
    display: flex;
    align-items: center;
    gap: 0.25em;
    margin-left: auto;
    flex-shrink: 0;
}

.nr-result-lbl {
    font-size: 0.9em;
    color: var(--text-muted);
}

.nr-result-val {
    font-size: 1em;
    font-weight: 700;
    min-width: 2.2em;
    text-align: center;
    padding: 0.1em 0.35em;
    border-radius: 5px;
    background: var(--light-bg);
    border: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
    transition: background 0.2s, color 0.2s;
}

/* Nachschlagetabelle */
.nr-table-wrap {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 6px;
    border: 1px solid var(--border);
    min-height: 60px;
}

.nr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84em;
    font-variant-numeric: tabular-nums;
}

.nr-table thead th {
    position: sticky;
    top: 0;
    background: var(--header-gradient);
    color: white;
    padding: 0.28em 0.5em;
    text-align: center;
    font-size: 0.9em;
    font-weight: 600;
    z-index: 1;
}

.nr-table tbody tr {
    border-bottom: 1px solid var(--border-light);
}

.nr-table tbody td {
    padding: 0.18em 0.5em;
    text-align: center;
}

.nr-col-idx {
    color: var(--text-muted);
    font-weight: 500;
}

.nr-col-grade {
    font-weight: 700;
}

/* Note-Farbklassen (1 = grün … 6 = rot) */
.nr-g1 { background: #d1f5e8; color: #0f6b47; }
.nr-g2 { background: #dcfce7; color: #166534; }
.nr-g3 { background: #fef9c3; color: #854d0e; }
.nr-g4 { background: #fef3c7; color: #92400e; }
.nr-g5 { background: #fee2e2; color: #991b1b; }
.nr-g6 { background: #fca5a5; color: #7f1d1d; }

/* Hervorgehobene Zeile (nahe am eingegebenen Wert) */
.nr-row-hl {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    background: var(--accent-light) !important;
}

.nr-row-hl .nr-col-idx {
    color: var(--accent-dark);
    font-weight: 700;
}

/* Punkteaddierer-Inhalt */
.nr-adder-grid {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    min-height: 0;
    flex-shrink: 0;
}

.nr-adder-item {
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.nr-adder-lbl {
    font-size: 0.72em;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
    min-width: 1.8em;
}

.nr-adder-inp {
    flex: 1;
    min-width: 0;
    max-width: 3.6em;
    padding: 0.12em 0.2em;
    font-size: 0.78em;
    font-weight: 700;
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-variant-numeric: tabular-nums;
}

.nr-adder-inp:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(24,69,200,0.15);
}

/* Gesamtergebnis – direkt hinter dem letzten Aufgabenfeld, nicht am
   Spaltenfuß festgeklebt. */
.nr-adder-result {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.4em;
    padding: 0.3em 0.4em;
    background: var(--light-bg);
    border-radius: 6px;
    border: 1px solid var(--border);
    min-height: 1.9em;
    flex-shrink: 0;
    margin-top: 0.25em;
}

.nr-adder-result:empty {
    display: none;
}

.nr-adder-total {
    font-size: 0.72em;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
}

.nr-adder-total b {
    color: var(--text);
}

.nr-adder-sep {
    display: none;
}

.nr-adder-grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2em;
    padding: 0.1em 0.4em;
    border-radius: 6px;
    font-weight: 800;
    font-size: 1em;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ZWDK-Arbeitsbereich: zählt fest 25 % zum Gesamt-/Zeugnisschnitt */
.zwdk-badge {
    display: inline-block;
    padding: 0.05em 0.4em;
    border-radius: 999px;
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.03em;
    vertical-align: middle;
    white-space: nowrap;
}

/* Modus-Umschalter für Notenentwicklungs-Diagramme (Schüler-Detail-Modal + Schüler/in-Seite) */
.chart-mode-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.chart-mode-seg {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.chart-mode-btn {
    background: #fff;
    border: none;
    border-left: 1px solid var(--border);
    padding: 0.35rem 0.7rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.chart-mode-btn:first-child { border-left: none; }
.chart-mode-btn:hover { background: #eef4fc; color: var(--text); }
.chart-mode-btn.active { background: var(--primary); color: #fff; }
.chart-area-select {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    background: #fff;
}

/* ===== 08-plusminus.css ===== */
/* === Password Visibility Toggle === */
.password-wrapper {
    position: relative;
}

.password-toggle-icon {
    position: absolute;
    top: 68%;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.password-toggle-icon:hover {
    color: var(--primary);
}

/* === Plus/Minus === */
.badge-neutral {
    background: #d9e1ee;
    color: #42526e;
}

.plusminus-active-card {
    overflow: hidden;
}

.plusminus-active-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.plusminus-active-heading {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.plusminus-active-meta {
    margin: 0;
    color: var(--text-muted);
}

.plusminus-active-hint {
    margin: 0.1rem 0 0;
    color: var(--primary-dark);
    font-size: 0.88rem;
    font-weight: 500;
}

.plusminus-active-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.plusminus-grade-editor-cell {
    text-align: center;
}

.plusminus-grade-editor {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.manual-grade-input {
    width: 72px;
    padding: 0.38rem 0.45rem;
    border: 1px solid #c8d9f0;
    border-radius: 6px;
    background-color: var(--form-field-bg);
    color: var(--dark);
    text-align: center;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.manual-grade-input:focus {
    outline: none;
    border-color: #6aabec;
    box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.08);
    background-color: var(--form-field-bg-focus);
}

.manual-grade-input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}

.manual-grade-input:disabled {
    background-color: var(--form-field-bg-disabled);
    color: var(--text-muted);
    cursor: default;
}

.manual-grade-input.has-error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(229, 72, 58, 0.12);
}

.manual-grade-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    background: #e8eef8;
    color: #4f6284;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.manual-grade-mode.is-manual {
    background: var(--accent-light);
    color: var(--accent-dark);
}

.plusminus-create-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(246,250,255,0.98) 100%);
}

.plusminus-class-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.plusminus-class-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(24,69,200,0.12);
    background: rgba(255,255,255,0.86);
    color: var(--dark);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
}

.plusminus-class-chip.is-active,
.plusminus-class-chip:hover {
    border-color: rgba(245,166,35,0.45);
    background: #fff7ea;
    color: var(--accent-dark);
}

.plusminus-class-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(24,69,200,0.08);
    color: var(--primary-dark);
    font-size: 0.76rem;
    font-weight: 700;
}

.plusminus-create-toggle {
    margin-bottom: 0.8rem;
}

.plusminus-create-form-shell {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.plusminus-create-title {
    margin-top: 0;
    margin-bottom: 0.9rem;
}

.plusminus-create-form {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.plusminus-create-form .form-row {
    gap: 0.75rem;
}

.plusminus-create-form .form-group {
    margin-bottom: 0;
}

.plusminus-create-form .form-group label {
    margin-bottom: 0.28rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.plusminus-create-form .form-control {
    min-height: 38px;
    padding: 0.42rem 0.62rem;
    font-size: 0.92rem;
}

.plusminus-create-form-shell .form-row:first-of-type {
    grid-template-columns: minmax(280px, 1.5fr) minmax(180px, 0.8fr);
}

.plusminus-create-form-shell .form-row:nth-of-type(2) {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.plusminus-create-form-shell .form-row:nth-of-type(3) {
    grid-template-columns: repeat(5, minmax(96px, 1fr));
}

.plusminus-create-form-shell .form-row:nth-of-type(3) .form-control,
.plusminus-create-form-shell .form-group:last-of-type .form-control {
    text-align: left;
}

.plusminus-create-form small,
.plusminus-form-help {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.plusminus-create-info {
    margin-top: 0 !important;
    margin-bottom: 0;
    padding: 0.75rem 0.95rem;
    font-size: 0.84rem;
}

.plusminus-create-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.plusminus-active-class {
    margin: 0 0 0.25rem;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-dark);
}

.plusminus-active-panels {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.plusminus-panel {
    border: 1px solid rgba(24,69,200,0.12);
    border-radius: 16px;
    background: #f9fbff;
    overflow: hidden;
}

.plusminus-panel summary {
    cursor: pointer;
    list-style: none;
    padding: 0.9rem 1rem;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plusminus-panel summary::-webkit-details-marker {
    display: none;
}

.plusminus-panel summary::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.plusminus-panel[open] summary::after {
    content: '−';
}

.plusminus-panel__body {
    padding: 0 1rem 1rem;
    border-top: 1px solid rgba(24,69,200,0.08);
}

.plusminus-rename-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
}

.plusminus-rename-form .form-group {
    flex: 1 1 260px;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .plusminus-active-header {
        flex-direction: column;
    }

    .plusminus-active-actions {
        justify-content: flex-start;
    }

    .plusminus-create-form-shell .form-row:first-of-type,
    .plusminus-create-form-shell .form-row:nth-of-type(2),
    .plusminus-create-form-shell .form-row:nth-of-type(3) {
        grid-template-columns: 1fr;
    }

    .plusminus-rename-form {
        flex-direction: column;
        align-items: stretch;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1366px) {
    .plusminus-active-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #rating-table {
        min-width: auto;
    }

    #rating-table th,
    #rating-table td {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }

    .rating-cell {
        width: 56px;
        height: 34px;
        font-size: 14px;
        border-radius: 6px;
    }

    .manual-grade-input {
        width: 78px;
        min-height: 34px;
        font-size: 0.92rem;
    }

    .finish-toggle {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .plusminus-class-shortcuts {
        gap: 0.7rem;
    }
}

/* ===== 09-questions.css ===== */
/* === Question Builder UI Styles === */

/* MC Options */
.mc-option-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--light-bg);
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}

.mc-option-text {
    flex: 1;
}

.mc-option-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-weight: 500;
}

/* Keyword Items */
.keyword-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

/* Match Form */
.match-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.match-column h4 {
    margin-bottom: 1rem;
    color: var(--primary);
}

.match-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

/* Blank Items */
.blank-item {
    background: var(--warning-light);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--warning);
}

.blank-item label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.blank-item input {
    margin-bottom: 0.5rem;
}

/* Grid Editor */
#grid_pattern_editor {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    max-width: 500px;
}

.grid-cell {
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: all 0.2s;
}

.grid-cell.white {
    background: white;
}

.grid-cell.black {
    background: black;
}

.grid-cell:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Table Editor */
.table-editor-grid {
    width: 100%;
    border-collapse: collapse;
}

.table-editor-grid td {
    padding: 0.5rem;
    border: 1px solid #dee2e6;
}

.table-cell-input {
    margin-bottom: 0.25rem;
}

.table-cell-input:first-child,
.table-cell-input:last-child {
    background-color: var(--form-field-bg);
}

/* Huffman Character Items */
.huffman-char-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: center;
}

/* Button Icons — nur im Question-Builder (Loesch-Buttons in MC/Keyword/... Items).
   Scope auf .question-builder-container, damit die .btn-icon-Styles in der
   Notenansicht nicht ueberschrieben werden. */
.question-builder-container .btn-icon {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s;
    border-radius: 4px;
    width: auto;
    height: auto;
    box-shadow: none;
    color: inherit;
}

.question-builder-container .btn-icon:hover {
    background: rgba(220, 53, 69, 0.1);
    transform: scale(1.1);
}

/* Help Text */
.help-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 1rem;
}

/* Form Row */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Image Preview */
.image-preview-box {
    margin-top: 1rem;
    position: relative;
    display: inline-block;
}

.image-preview-box img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    border: 1px solid #c8d9f0;
}

.image-preview-box .btn-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
}


/* False Statements */
.false-statement-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: var(--danger-light);
    border-radius: 8px;
    border-left: 3px solid var(--danger);
}

.false-statement-text {
    flex: 1;
}

.false-statement-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-weight: 500;
    color: var(--danger);
}

/* =========================================================
   MIDNIGHT AMBER — Global Refinements
   ========================================================= */

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--page-bg); }
::-webkit-scrollbar-thumb {
    background: #b8cce8;
    border-radius: 100px;
    border: 2px solid var(--page-bg);
}
::-webkit-scrollbar-thumb:hover { background: #8aadd4; }

/* Selection */
::selection {
    background: rgba(245,166,35,0.25);
    color: var(--dark);
}

/* Headings */
h1, h2, h3, h4 {
    letter-spacing: -0.02em;
}

/* Focus visible — keyboard navigation */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Stat boxes on dashboard */
.stat-box {
    text-align: center;
    padding: 1.2rem;
    background: linear-gradient(135deg, #f7fafd 0%, var(--light-bg) 100%);
    border-radius: 12px;
    border: 1px solid var(--border-light);
}

.stat-box .stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-box .stat-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Section dividers */
hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: 1.5rem 0;
}

/* Table cell input styling */
.table-cell-input:first-child,
.table-cell-input:last-child {
    background-color: var(--form-field-bg);
}

/* (Die frueher hier stehende .grades-nav-arrows .btn-icon-Regel wurde
   nach 07-noten.css verschoben, da sie zur Notenansicht gehoert und
   dort mit den uebrigen Header-Icons konsistent dimensioniert wird.) */



/* ── Lückentext-Builder (Fließtext mit {{…}}-Markern) ──────────────────────── */
.fill-blank-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.question-builder-container .btn-sm {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

#fill_blank_text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.6;
}

.fill-blank-preview {
    border: 1px dashed var(--border-light);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    background: var(--form-field-bg, #fffef5);
    min-height: 2.5rem;
}

.fill-blank-preview-text {
    line-height: 2.4;
    font-size: 1.02rem;
}

.fb-prev-gap {
    display: inline-block;
    margin: 0 0.15rem;
    padding: 0.1rem 0.55rem;
    border: 2px solid #4A90E2;
    border-bottom-width: 2px;
    border-radius: 6px;
    background: #eaf2fc;
    color: #1d4ed8;
    font-weight: 600;
}

.fb-prev-gap--select {
    background: #f3e8ff;
    border-color: #9C27B0;
    color: #7b1fa2;
}

.fill-blank-preview-list {
    margin: 0.75rem 0 0;
    padding-left: 1.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.fill-blank-preview-list li {
    margin-bottom: 0.15rem;
}

/* ===== 10-modals.css ===== */
/* === Gear Button (Header) === */
.btn-gear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.3s;
    flex-shrink: 0;
}
.btn-gear:hover {
    background: rgba(245,166,35,0.2);
    color: var(--accent);
    transform: rotate(60deg);
}

/* === Passwort-Modal === */
.pw-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8,15,36,0.65);
    backdrop-filter: blur(3px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.pw-modal-overlay.is-open {
    display: flex;
}
.pw-modal {
    background: var(--card-bg);
    border-radius: 14px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(8,15,36,0.35);
    overflow: hidden;
    animation: pwSlideIn 0.2s ease;
}
@keyframes pwSlideIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)     scale(1);    }
}
.pw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border);
    background: var(--header-gradient);
    color: white;
}
.pw-modal-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.pw-modal-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
    transition: color 0.15s;
}
.pw-modal-close:hover { color: white; }
.pw-modal-body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pw-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--border);
    background: var(--light-bg);
}
.pw-alert {
    padding: 0.65rem 0.9rem;
    border-radius: 7px;
    font-size: 0.88rem;
}
.pw-alert-success {
    background: var(--success-light);
    color: var(--success);
}
.pw-alert-error {
    background: var(--danger-light);
    color: var(--danger);
}

.pw-password-wrap {
    position: relative;
}

.pw-autofill-username {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pw-password-wrap .form-control {
    padding-right: 2.9rem;
}

/* Systemschrift: Variable Fonts wie Lexend zeigen in manchen Browsern bei
   type="password" keine Bullets / wirken „leer“. */
.pw-modal .form-control {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.35;
    letter-spacing: normal;
    color: var(--dark-text);
    caret-color: var(--dark-text);
}

.pw-modal .form-control:-webkit-autofill,
.pw-modal .form-control:-webkit-autofill:hover,
.pw-modal .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dark-text) !important;
    box-shadow: 0 0 0 1000px var(--form-field-bg) inset !important;
    transition: background-color 9999s ease-out 0s;
}

.pw-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.pw-password-toggle:hover {
    color: var(--primary);
}

/* === Einstellungen: Tabs & Panels === */
.settings-tabs {
    display: flex;
    padding: 0 1.4rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}
.settings-tab {
    flex: 1;
    padding: 0.85rem 0.5rem;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.settings-tab:hover { color: var(--dark-text); }
.settings-tab.is-active {
    color: var(--primary);
    border-bottom-color: var(--accent);
}
.settings-panel { display: none; }
.settings-panel.is-active { display: block; }
.settings-panel-title {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 600;
}
.settings-hint {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-muted);
}
/* Buttons in der Datensicherung über die volle Modalbreite (kompakter Look) */
.settings-panel[data-settings-panel="backup"] .btn { width: 100%; }
.settings-restore-form .form-group { margin-bottom: 0.8rem; }

/* === Einstellungen: angemeldete Geräte (NotenWeb-App) === */
.settings-device-list {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.settings-device {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
}
.settings-device-info small { color: var(--text-muted); }
/* Der Abmelden-Knopf bleibt schmal — die Regel oben zieht Knöpfe in der
   Datensicherung auf volle Breite, hier wäre das falsch. */
.settings-panel[data-settings-panel="devices"] .btn { width: auto; }

/* === Einstellungen: Präsentationsmodus === */
/* Vier Tabs passen auf schmalen Geräten nicht mehr in eine Zeile. */
.settings-tabs { flex-wrap: wrap; }
.settings-tab { flex: 1 1 45%; }

.settings-panel[data-settings-panel="presentation"] .settings-hint {
    margin-top: 0.9rem;
}
.settings-panel[data-settings-panel="presentation"] .btn {
    margin-top: 1.1rem;
    width: 100%;
}

.presentation-switch {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    user-select: none;
}
/* Die echte Checkbox bleibt bedienbar (Tastatur, Screenreader), nur unsichtbar. */
.presentation-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.presentation-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    background: #cbd5e1;
    transition: background 0.15s;
}
.presentation-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s;
}
.presentation-switch input:checked + .presentation-switch-track {
    background: var(--accent, #f5a623);
}
.presentation-switch input:checked + .presentation-switch-track .presentation-switch-knob {
    transform: translateX(20px);
}
.presentation-switch input:focus-visible + .presentation-switch-track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.presentation-switch-label {
    font-weight: 600;
}

/* Hinweis in der Kopfzeile, solange der Modus läuft */
.presentation-flag {
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.presentation-flag:hover { background: rgba(255, 255, 255, 0.28); }

@media (max-width: 600px) {
    /* In der schmalen Kopfzeile bleibt nur das Symbol übrig. */
    .presentation-flag { font-size: 0; padding: 0.35rem 0.5rem; }
    .presentation-flag::before { content: "🎭"; font-size: 0.95rem; }
}




/* === Einstellungen: Notenskala === */
/* Der Dialog selbst hat `overflow: hidden` und keine Höhenbegrenzung. Dieses
   Panel ist das einzige mit so vielen Feldern, dass es auf niedrigen Fenstern
   unten herausliefe — deshalb scrollt nur dieser Body, und die übrigen Panels
   bleiben unangetastet. */
.settings-panel[data-settings-panel="grading"] .pw-modal-body {
    max-height: min(62vh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.grading-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.grading-check input { margin: 0; }

.grading-ref {
    display: flex;
    gap: 0.8rem;
}
.grading-ref > div { flex: 1 1 0; min-width: 0; }

.settings-panel[data-settings-panel="grading"] .adm-beispiel {
    margin-top: 0;
    padding: 0.8rem 0.9rem;
}
.grading-beispiel {
    margin: 0.4rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
}

/* Gottmodus (lib/auth.php): Balken über der Kopfzeile, solange der
   Super-Admin im Konto einer Lehrkraft ist. Absichtlich laut. */
.gottmodus-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.5rem 2rem;
    background: repeating-linear-gradient(-45deg, #b42318, #b42318 14px, #a01f15 14px, #a01f15 28px);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.35;
}
.gottmodus-bar__meta { opacity: 0.8; }
.gottmodus-bar__form { margin: 0; }
.gottmodus-bar .btn {
    background: #fff;
    color: #8a1a12;
    border: none;
    font-weight: 600;
    white-space: nowrap;
}
.gottmodus-bar .btn:hover { background: #ffe9e6; }

@media (max-width: 600px) {
    .gottmodus-bar { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
}

/* ===== 11-tools.css ===== */
/* TOOLS */
.tools-page{padding:2rem;max-width:1300px;margin:0 auto}
.tools-page-header{margin-bottom:2rem}
.tools-page-title{font-size:1.8rem;font-weight:800;color:var(--text)}
.tools-page-sub{color:var(--text-muted);margin-top:.25rem}
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.tool-card{background:var(--card-bg);border:2px solid var(--border);border-radius:18px;padding:2.2rem 1rem 1.8rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s,transform .15s;text-align:center}
.tool-card:hover{border-color:var(--primary);box-shadow:0 6px 24px rgba(24,69,200,.13);transform:translateY(-4px)}
.tool-icon{font-size:3rem;line-height:1}
.tool-label{font-size:1rem;font-weight:700;color:var(--text)}
.tool-desc{font-size:.78rem;color:var(--text-muted);line-height:1.3}
.tool-fs{display:none;position:fixed;inset:0;z-index:800;background:var(--page-bg);flex-direction:column;overflow-y:auto}
.tool-fs.is-active{display:flex}
.tool-fs-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;padding:.85rem 1.5rem;background:var(--header-gradient);box-shadow:0 2px 12px rgba(8,15,36,.25);flex-shrink:0}
.tool-back{background:rgba(255,255,255,.12);border:none;color:#fff;padding:.35rem 1rem;border-radius:7px;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:600;transition:background .15s;white-space:nowrap}
.tool-back:hover{background:rgba(255,255,255,.22)}
.tool-fs-title{color:#fff;font-size:1.1rem;font-weight:700}
.tool-fs-body{flex:1;padding:2rem;max-width:1100px;margin:0 auto;width:100%}
.tool-fs-centered{display:flex;flex-direction:column;align-items:center;gap:1.75rem;padding-top:3rem}
.tl{display:block;font-size:.82rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;margin-bottom:.35rem}
.t-muted{color:var(--text-muted);font-size:.88rem}
.row-gap{display:flex;gap:1.25rem;flex-wrap:wrap}
.btn-row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.settings-bar{display:flex;gap:1.5rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1.75rem}
.btn-xl{padding:.75rem 2.2rem;font-size:1.05rem}
.color-input{height:42px;padding:.25rem;cursor:pointer;width:70px}
/* QR-Generator */
.tool-fs-body--qr{padding-top:1.25rem}
.qr-tool{max-width:1100px;margin:0 auto}
.qr-tool-header{margin-bottom:1.75rem}
.qr-tool-lead{margin:0;font-size:0.95rem;font-weight:500;color:var(--text-muted);line-height:1.55;max-width:52rem}
.qr-tool-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1.1fr);gap:1.75rem;align-items:stretch}
.qr-panel,.qr-preview{background:var(--card-bg);border:1px solid var(--border-light);border-radius:14px;padding:1.5rem 1.6rem;box-shadow:0 1px 3px rgba(8,15,36,0.04),0 4px 16px rgba(8,15,36,0.06);display:flex;flex-direction:column;gap:1rem}
.qr-panel{position:relative;border-top:3px solid var(--accent)}
.qr-preview{border-top:3px solid var(--primary)}
.qr-panel-title{display:flex;align-items:center;gap:0.5rem;margin:0 0 0.15rem;font-size:1rem;font-weight:700;color:var(--dark)}
.qr-panel-title-icon{display:flex;color:var(--accent-dark);opacity:0.95}
.qr-textarea{min-height:7.5rem;resize:vertical;font-size:0.95rem;line-height:1.45}
.qr-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem}
@media(max-width:640px){.qr-options{grid-template-columns:1fr}}
.qr-option .tl{margin-bottom:0.35rem}
.qr-color-row{display:flex;flex-direction:column;gap:0.45rem}
.qr-color-input{width:100%;max-width:88px;height:44px;padding:4px;cursor:pointer;border-radius:8px}
.qr-color-hint{font-size:0.75rem;color:var(--text-secondary);line-height:1.35}
.qr-panel-footer{margin-top:auto;padding-top:0.25rem}
.qr-generate-btn{width:100%;justify-content:center}
/* Kein flex:1/min-height:0 — sonst kann die Vorschau im Flex-Layout auf Höhe 0 kollabieren */
.qr-output-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}
.qr-output-wrap[hidden]{display:none!important}
.qr-link-display{width:100%;max-width:100%;padding:0.65rem 0.9rem;background:var(--light-bg);border:1px solid var(--border);border-radius:8px;font-size:0.82rem;color:var(--text-muted);word-break:break-all;line-height:1.45;text-align:center}
.qr-export-info{width:100%;text-align:center;color:var(--primary);font-size:0.82rem;font-weight:700}
.qr-canvas-shell{display:flex;justify-content:center;width:100%;padding:0.5rem 0}
.qr-canvas-frame{padding:1rem;background:linear-gradient(145deg,#ffffff 0%,var(--light-bg) 100%);border:1px solid var(--border-light);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),0 8px 28px rgba(8,15,36,0.08)}
.qr-canvas{display:block;border-radius:10px;box-shadow:0 2px 12px rgba(8,15,36,0.1);background:#fff}
.qr-actions{display:flex;flex-wrap:wrap;gap:0.65rem;justify-content:center;width:100%;margin-top:0.25rem}
.qr-actions .btn{min-width:7.5rem}
.qr-placeholder{flex:1;display:flex;align-items:center;justify-content:center;min-height:280px;border:2px dashed var(--border);border-radius:14px;background:linear-gradient(180deg,rgba(237,244,252,0.65) 0%,rgba(255,255,255,0.9) 100%);color:var(--text-muted)}
.qr-placeholder[hidden]{display:none!important}
.qr-placeholder-inner{text-align:center;padding:1.75rem 1.25rem;max-width:18rem}
.qr-placeholder-graphic{margin:0 auto 1rem;display:flex;justify-content:center;color:var(--primary)}
.qr-placeholder-svg{width:120px;height:120px;opacity:0.55}
.qr-placeholder-title{margin:0 0 0.4rem;font-size:1.05rem;font-weight:700;color:var(--text)}
.qr-placeholder-text{margin:0;font-size:0.86rem;line-height:1.45;color:var(--text-muted)}
.qr-placeholder-text strong{color:var(--accent-dark);font-weight:600}
.qr-fs-overlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(8,15,36,0.92);backdrop-filter:blur(8px);flex-direction:column;align-items:center;justify-content:center;cursor:zoom-out;padding:1.5rem}
.qr-fs-overlay.is-open{display:flex}
.qr-fs-canvas{max-width:90vmin;max-height:90vmin;border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,0.45)}
.qr-fs-hint{margin:1.5rem 0 0;color:rgba(255,255,255,0.55);font-size:0.88rem;font-weight:500}
@media(max-width:900px){.qr-tool-grid{grid-template-columns:1fr}}
.timer-presets{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;max-width:520px}
.timer-inputs{display:flex;align-items:center;gap:.75rem}
.timer-input-group{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.timer-digit-input{width:100px;text-align:center;font-size:2.2rem;font-weight:700;border:2px solid var(--border);border-radius:10px;padding:.4rem;color:var(--text);background-color:var(--form-field-bg)}
.timer-unit{font-size:.75rem;color:var(--text-muted);text-transform:uppercase}
.timer-colon{font-size:2.8rem;font-weight:800;color:var(--text);padding-bottom:.8rem}
.timer-display{font-size:5.5rem;font-weight:800;letter-spacing:.05em;color:var(--primary);font-variant-numeric:tabular-nums;transition:color .3s}
.timer-display.timer-urgent{color:var(--danger);animation:blink .6s infinite alternate}
@keyframes blink{from{opacity:1}to{opacity:.4}}
.timer-bar-wrap{width:100%;max-width:520px;height:12px;background:var(--border);border-radius:99px;overflow:hidden}
.timer-bar{height:100%;width:100%;background:var(--primary);border-radius:99px;transition:width .9s linear,background .3s}
.timer-bar.timer-bar-urgent{background:var(--danger)}

/* Tool Timer — klarere Hierarchie, Midnight-Amber-Akzente */
#tool-timer .tool-timer-wrap{width:100%;max-width:28rem;display:flex;flex-direction:column;align-items:stretch;gap:1.35rem}
#tool-timer .timer-section{display:flex;flex-direction:column;align-items:center;gap:.55rem;width:100%}
#tool-timer .timer-section-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
#tool-timer .timer-presets{gap:.45rem;max-width:100%}
#tool-timer .timer-preset-chip{
    border-radius:999px;
    padding:.42rem .85rem;
    font-weight:700;
    color:var(--dark-text);
    border:1px solid var(--border);
    background:linear-gradient(180deg,#fff 0%,var(--light-bg) 100%);
    box-shadow:0 1px 2px rgba(8,15,36,.06);
    transition:border-color .2s,box-shadow .2s,transform .12s,color .15s,background .15s;
}
#tool-timer .timer-preset-chip:hover{
    border-color:rgba(245,166,35,.65);
    box-shadow:0 3px 12px rgba(24,69,200,.12),0 0 0 1px rgba(245,166,35,.25);
    color:var(--primary-dark);
    background:linear-gradient(180deg,#fff 0%,#f0f5fc 100%);
}
#tool-timer .timer-preset-chip:active{transform:scale(.97)}
#tool-timer .timer-settings-panel{
    background:var(--card-bg);
    border:1px solid var(--border-light);
    border-radius:16px;
    padding:1rem 1.15rem 1.15rem;
    box-shadow:0 4px 20px rgba(8,15,36,.06);
}
#tool-timer .timer-settings-panel .timer-inputs{margin:0 auto}
#tool-timer .timer-digit-input{
    width:5.25rem;
    font-size:2rem;
    border-radius:12px;
    border:2px solid var(--border);
    background-color:var(--form-field-bg);
    box-shadow:inset 0 1px 2px rgba(8,15,36,.04);
    transition:border-color .2s,box-shadow .2s,background-color .2s;
}
#tool-timer .timer-digit-input:hover{border-color:var(--secondary-light)}
#tool-timer .timer-digit-input:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(245,166,35,.22),inset 0 1px 2px rgba(8,15,36,.04);
    background-color:var(--form-field-bg-focus);
}
#tool-timer .timer-colon{
    font-size:2.4rem;
    padding-bottom:.65rem;
    color:var(--text-secondary);
    opacity:.85;
}
#tool-timer .timer-focus-card{
    position:relative;
    width:100%;
    padding:1.75rem 1.35rem 1.5rem;
    border-radius:22px;
    background:linear-gradient(155deg,#fff 0%,var(--light-bg) 48%,rgba(237,244,252,.98) 100%);
    border:1px solid var(--border-light);
    box-shadow:
        0 8px 32px rgba(8,15,36,.08),
        0 0 0 1px rgba(255,255,255,.6) inset;
    overflow:hidden;
}
#tool-timer .timer-focus-card::before{
    content:'';
    position:absolute;
    top:-40%;
    right:-25%;
    width:55%;
    height:90%;
    background:radial-gradient(circle,rgba(245,166,35,.14) 0%,transparent 68%);
    pointer-events:none;
}
#tool-timer .timer-focus-card::after{
    content:'';
    position:absolute;
    bottom:-30%;
    left:-15%;
    width:50%;
    height:70%;
    background:radial-gradient(circle,rgba(24,69,200,.08) 0%,transparent 65%);
    pointer-events:none;
}
#tool-timer .timer-display-stack{position:relative;display:flex;justify-content:center;align-items:center;min-height:6.5rem;margin-bottom:.35rem}
#tool-timer .timer-display-ring{
    position:absolute;
    width:min(19rem,88vw);
    height:min(19rem,88vw);
    max-width:280px;
    max-height:280px;
    border-radius:50%;
    background:conic-gradient(from 210deg,rgba(24,69,200,.12),rgba(245,166,35,.18),rgba(24,69,200,.1),rgba(245,166,35,.12),rgba(24,69,200,.12));
    opacity:.55;
    filter:blur(1px);
    pointer-events:none;
}
#tool-timer .timer-display{
    position:relative;
    z-index:1;
    font-size:clamp(3.2rem,12vw,5.25rem);
    font-weight:800;
    letter-spacing:.04em;
    line-height:1;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(115deg,var(--primary-dark) 0%,var(--primary) 45%,var(--primary-light) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 2px 14px rgba(24,69,200,.2));
}
#tool-timer .timer-display.timer-urgent{
    background:none;
    -webkit-background-clip:unset;
    background-clip:unset;
    color:var(--danger);
    filter:none;
}
#tool-timer .timer-bar-wrap--tool{
    position:relative;
    z-index:1;
    max-width:100%;
    height:14px;
    background:rgba(8,15,36,.08);
    border-radius:999px;
    box-shadow:inset 0 1px 3px rgba(8,15,36,.12);
}
#tool-timer .timer-bar-wrap--tool .timer-bar{
    background:linear-gradient(90deg,var(--primary-dark) 0%,var(--primary) 40%,var(--accent) 100%);
    box-shadow:0 0 12px rgba(24,69,200,.35);
}
#tool-timer .timer-bar-wrap--tool .timer-bar.timer-bar-urgent{
    background:linear-gradient(90deg,#b83228 0%,var(--danger) 50%,#ff8a80 100%);
    box-shadow:0 0 14px rgba(229,72,58,.45);
}
#tool-timer .timer-actions{gap:.85rem;margin-top:.15rem}

.wheel-layout{display:flex;gap:2.5rem;align-items:flex-start;flex-wrap:wrap}
.wheel-sidebar{width:250px;flex-shrink:0;display:flex;flex-direction:column;gap:1rem}
.wheel-absent-label{font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase}
.wheel-student-list{display:flex;flex-direction:column;gap:.25rem;max-height:360px;overflow-y:auto}
.wheel-check{display:flex;align-items:center;gap:.5rem;font-size:.88rem;cursor:pointer;padding:.3rem .4rem;border-radius:6px;transition:background .15s}
.wheel-check:hover{background:var(--light-bg)}
.wheel-check input{width:15px;height:15px;accent-color:var(--danger);cursor:pointer}
.wheel-stage{position:relative;display:flex;flex-direction:column;align-items:center;flex:1}
.wheel-canvas-wrap{position:relative;display:inline-block}
/* Zeiger ragt ins Rad hinein: 64 px breit, Spitze ~36 px im Feld (Rad-Rand
   liegt 14 px innerhalb des 500-px-Canvas). Namen stehen dafür weiter innen. */
.wheel-pointer-right{position:absolute;right:-14px;top:50%;transform:translateY(-50%);width:64px;height:44px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));z-index:1;pointer-events:none}
#wheelCanvas{border-radius:50%;box-shadow:0 6px 30px rgba(8,15,36,.2)}
.winner-overlay{position:fixed;inset:0;background:rgba(8,15,36,.75);backdrop-filter:blur(5px);z-index:2000;display:flex;align-items:center;justify-content:center}
.winner-box{background:#fff;border-radius:22px;padding:3.5rem 5rem;text-align:center;box-shadow:0 24px 70px rgba(8,15,36,.45);animation:pwSlideIn .3s ease}
.winner-name{font-size:2.5rem;font-weight:800;color:var(--primary);margin-top:.75rem}
/* ── Würfel ───────────────────────────────────────────────────────────────
   Aufbau wie beim Timer: Chips für die Auswahl, darunter eine Fokus-Karte mit
   Lichtring. Die Würfel selbst sind CSS-Objekte (3x3-Raster mit Punkten), kein
   Zeichensatz — sie bleiben am Beamer scharf. */
.tool-dice-wrap{display:flex;flex-direction:column;align-items:center;gap:1.35rem;width:100%;max-width:580px}
.dice-section{display:flex;flex-direction:column;align-items:center;gap:.55rem;width:100%}
.dice-section-label{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary)}
.dice-count-btns{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.dice-count-chip{
    min-width:3rem;
    min-height:2.8rem;
    padding:.5rem .95rem;
    font-size:1.05rem;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--text-muted);
    background:linear-gradient(180deg,#fff 0%,var(--light-bg) 100%);
    border:1px solid var(--border);
    border-radius:12px;
    cursor:pointer;
    box-shadow:0 1px 2px rgba(8,15,36,.06);
    transition:border-color .2s,box-shadow .2s,transform .12s,color .15s,background .15s;
}
.dice-count-chip:hover{
    border-color:rgba(245,166,35,.65);
    color:var(--primary-dark);
    box-shadow:0 3px 12px rgba(24,69,200,.12),0 0 0 1px rgba(245,166,35,.25);
    background:linear-gradient(180deg,#fff 0%,#f0f5fc 100%);
}
.dice-count-chip:active{transform:scale(.97)}
.dice-count-chip:focus-visible{outline:3px solid rgba(245,166,35,.5);outline-offset:2px}
.dice-count-chip.is-active{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 55%,var(--secondary) 100%);
    box-shadow:0 4px 14px rgba(24,69,200,.3);
}
.dice-focus-card{
    position:relative;
    width:100%;
    padding:1.75rem 1.35rem 1.5rem;
    border-radius:22px;
    background:linear-gradient(155deg,#fff 0%,var(--light-bg) 48%,rgba(237,244,252,.98) 100%);
    border:1px solid var(--border-light);
    box-shadow:0 8px 32px rgba(8,15,36,.08),0 0 0 1px rgba(255,255,255,.6) inset;
    overflow:hidden;
    text-align:center;
}
.dice-focus-card::before{
    content:'';position:absolute;top:-40%;right:-25%;width:55%;height:90%;
    background:radial-gradient(circle,rgba(245,166,35,.14) 0%,transparent 68%);
    pointer-events:none;
}
.dice-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:8.5rem}
.dice-ring{
    position:absolute;
    width:min(19rem,88vw);height:min(19rem,88vw);
    max-width:260px;max-height:260px;
    border-radius:50%;
    background:conic-gradient(from 210deg,rgba(24,69,200,.12),rgba(245,166,35,.18),rgba(24,69,200,.1),rgba(245,166,35,.12),rgba(24,69,200,.12));
    opacity:.55;filter:blur(1px);pointer-events:none;
}
.dice-result{position:relative;z-index:1;display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;align-items:center}
.die{
    --die-size:clamp(3.2rem,14vw,4.75rem);
    display:grid;
    grid-template:repeat(3,1fr)/repeat(3,1fr);
    width:var(--die-size);height:var(--die-size);
    /* ⚠️ Kein Prozent-Padding: Prozentwerte für padding beziehen sich auf die
       BREITE DES ELTERNELEMENTS (hier die Würfelbühne, mehrere hundert Pixel),
       nicht auf den Würfel. `padding:11%` hat deshalb die gesamte Innenfläche
       aufgefressen, das 3x3-Raster kollabierte auf Null und der Würfel zeigte
       gar keine Augen mehr (bemerkt am 30.08.2026). Am Würfel gemessen wird
       es eindeutig. */
    padding:calc(var(--die-size) * .12);
    border-radius:23%;
    background:linear-gradient(155deg,#fff 0%,#f5f9fd 55%,#e9f1fa 100%);
    border:1px solid var(--border-light);
    box-shadow:
        0 6px 18px rgba(8,15,36,.16),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -4px 9px rgba(24,69,200,.07);
}
.die--empty{
    background:linear-gradient(155deg,#fff 0%,var(--light-bg) 100%);
    border:2px dashed var(--border);
    box-shadow:none;
    opacity:.7;
}
.pip{
    align-self:center;justify-self:center;
    /* Größe am Würfel messen, nicht an der Rasterzelle: Ein Prozentwert würde
       sich auf die Zelle beziehen (ein Drittel der Innenfläche) — die Augen
       wären dann rund 4 Pixel groß und praktisch unsichtbar. */
    width:calc(var(--die-size) * .185);
    height:calc(var(--die-size) * .185);
    border-radius:50%;
    background:radial-gradient(circle at 32% 28%,var(--primary-light) 0%,var(--primary) 42%,var(--primary-dark) 100%);
    box-shadow:0 1px 2px rgba(8,15,36,.35),inset 0 -1px 1px rgba(8,15,36,.25);
}
.die--rolling{animation:dieShake .16s ease-in-out infinite}
.die--land{animation:dieLand .4s cubic-bezier(.2,1.35,.35,1) both}
@keyframes dieShake{0%{transform:rotate(-7deg) scale(.95)}50%{transform:rotate(6deg) scale(1.03)}100%{transform:rotate(-7deg) scale(.95)}}
@keyframes dieLand{0%{transform:rotate(-20deg) scale(.55);opacity:0}62%{transform:rotate(6deg) scale(1.09);opacity:1}100%{transform:rotate(0) scale(1);opacity:1}}
.dice-sum{
    display:inline-flex;align-items:center;gap:.6rem;
    margin-top:1.1rem;padding:.4rem 1.05rem;
    border-radius:999px;
    background:rgba(24,69,200,.07);
    border:1px solid rgba(24,69,200,.16);
}
.dice-sum[hidden]{display:none!important}
.dice-sum-label{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary)}
.dice-sum-value{font-size:1.55rem;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums;line-height:1}
.dice-actions{margin-top:.15rem}
.groups-result{display:flex;gap:1rem;flex-wrap:wrap}
.group-card{background:var(--light-bg);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.3rem;min-width:160px}
.group-card-title{font-weight:700;color:var(--primary);margin-bottom:.6rem}
.group-card ul{list-style:none;padding:0;margin:0;font-size:.9rem}
.group-card li{padding:.2rem 0;border-bottom:1px solid var(--border-light)}
.group-card li:last-child{border-bottom:none}
.order-list{list-style:none;padding:0;columns:3;gap:2rem}
.order-list li{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;border-bottom:1px solid var(--border-light);break-inside:avoid;font-size:.95rem}
.order-num{width:28px;height:28px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0}

/* Zufallsreihenfolge — geheime Warteschlange */
.tool-fs-body--order{max-width:40rem}
.order-lead{margin:0 0 1.25rem;font-size:.95rem;line-height:1.55;color:var(--text-muted)}
.order-lead strong{color:var(--text);font-weight:600}
.order-settings-bar{margin-bottom:1rem}
.order-hint{margin:0 0 1rem;padding:.85rem 1.1rem;background:var(--accent-light);border:1px solid rgba(245,166,35,.35);border-radius:12px;font-size:.9rem;font-weight:500;color:var(--accent-dark);line-height:1.45}
.order-panel{display:flex;flex-direction:column;align-items:stretch;gap:1.25rem;margin-top:.25rem}
.order-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .85rem;padding:.65rem 1rem;background:var(--card-bg);border:1px solid var(--border-light);border-radius:14px;font-size:.88rem;color:var(--text-muted);box-shadow:0 2px 12px rgba(8,15,36,.05)}
.order-meta-stat strong{color:var(--primary);font-weight:800;font-variant-numeric:tabular-nums}
.order-meta-sep{width:4px;height:4px;border-radius:50%;background:var(--border-dark);opacity:.45;flex-shrink:0}
.order-current-block{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}
.order-current-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.order-current-card{
    width:100%;
    min-height:11rem;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.75rem 1.25rem;
    border-radius:22px;
    background:linear-gradient(155deg,#fff 0%,var(--light-bg) 52%,rgba(237,244,252,.98) 100%);
    border:1px solid var(--border-light);
    box-shadow:0 10px 36px rgba(8,15,36,.09),0 0 0 1px rgba(255,255,255,.55) inset;
    position:relative;
    overflow:hidden;
}
.order-current-card::before{
    content:'';
    position:absolute;
    inset:-20%;
    background:radial-gradient(circle at 30% 20%,rgba(245,166,35,.12) 0%,transparent 45%),radial-gradient(circle at 80% 80%,rgba(24,69,200,.1) 0%,transparent 42%);
    pointer-events:none;
}
.order-current-name{
    position:relative;
    z-index:1;
    font-size:clamp(1.35rem,4.2vw,2rem);
    font-weight:800;
    text-align:center;
    line-height:1.25;
    color:var(--primary-dark);
    max-width:100%;
    word-break:break-word;
}
.order-current-placeholder{position:relative;z-index:1;text-align:center;max-width:22rem;margin:0 auto}
.order-placeholder-icon{display:block;font-size:2rem;line-height:1;margin-bottom:.65rem;color:var(--accent-dark);opacity:.85}
.order-placeholder-text{margin:0;font-size:.95rem;line-height:1.5;color:var(--text-muted);font-weight:500}
.order-placeholder-text strong{color:var(--text);font-weight:700}
.order-done-msg{position:relative;z-index:1;text-align:center;font-size:1.05rem;font-weight:600;color:var(--success);line-height:1.45;padding:.5rem}
.order-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem}
.order-past-details{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--bg-surface);
    padding:0 .25rem;
    font-size:.9rem;
}
.order-past-details summary{
    cursor:pointer;
    list-style:none;
    padding:.75rem 1rem;
    font-weight:700;
    color:var(--text-muted);
    display:flex;
    align-items:center;
    gap:.5rem;
    user-select:none;
}
.order-past-details summary::-webkit-details-marker{display:none}
.order-past-details summary::before{content:'\25B6';font-size:.65rem;opacity:.55;transition:transform .2s}
.order-past-details[open] summary::before{transform:rotate(90deg)}
.order-past-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:1.5rem;
    height:1.5rem;
    padding:0 .4rem;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-size:.75rem;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}
.order-past-list{list-style:none;padding:0 .85rem .85rem;margin:0;display:flex;flex-direction:column;gap:.35rem;max-height:min(38vh,260px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.order-past-list li{display:flex;align-items:center;gap:.65rem;padding:.5rem .65rem;border-radius:10px;background:var(--card-bg);border:1px solid var(--border-light);font-size:.92rem}
.order-past-num{
    flex-shrink:0;
    width:26px;height:26px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--light-bg);
    color:var(--primary);
    font-size:.72rem;
    font-weight:800;
}

/* ── Stoppuhr ─────────────────────────────────────────────────────────────
   Zeit als Verlaufsschrift in einer Fokus-Karte, darunter der Zustand als Chip.
   Die Rundenliste zeigt Rundenzeit UND Gesamtzeit; ab zwei Runden werden die
   schnellste und die langsamste markiert. */
.tool-sw-wrap{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%;max-width:520px}
.sw-focus-card{
    position:relative;
    width:100%;
    padding:1.75rem 1.35rem 1.4rem;
    border-radius:22px;
    background:linear-gradient(155deg,#fff 0%,var(--light-bg) 48%,rgba(237,244,252,.98) 100%);
    border:1px solid var(--border-light);
    box-shadow:0 8px 32px rgba(8,15,36,.08),0 0 0 1px rgba(255,255,255,.6) inset;
    overflow:hidden;
    text-align:center;
}
.sw-focus-card::before{
    content:'';position:absolute;top:-40%;right:-25%;width:55%;height:90%;
    background:radial-gradient(circle,rgba(245,166,35,.14) 0%,transparent 68%);
    pointer-events:none;
}
.sw-focus-card::after{
    content:'';position:absolute;bottom:-30%;left:-15%;width:50%;height:70%;
    background:radial-gradient(circle,rgba(24,69,200,.08) 0%,transparent 65%);
    pointer-events:none;
}
.sw-display-stack{position:relative;display:flex;justify-content:center;align-items:center;min-height:6.5rem;margin-bottom:.6rem}
.sw-display-ring{
    position:absolute;
    width:min(19rem,88vw);height:min(19rem,88vw);
    max-width:280px;max-height:280px;
    border-radius:50%;
    background:conic-gradient(from 210deg,rgba(24,69,200,.12),rgba(245,166,35,.18),rgba(24,69,200,.1),rgba(245,166,35,.12),rgba(24,69,200,.12));
    opacity:.55;filter:blur(1px);pointer-events:none;
}
.sw-display{
    position:relative;z-index:1;
    font-size:clamp(3.2rem,12vw,5.25rem);
    font-weight:800;letter-spacing:.04em;line-height:1;
    font-variant-numeric:tabular-nums;
    background:linear-gradient(115deg,var(--primary-dark) 0%,var(--primary) 45%,var(--primary-light) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 14px rgba(24,69,200,.2));
}
.sw-state{
    position:relative;z-index:1;
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.3rem .9rem;border-radius:999px;
    font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text-secondary);
    background:rgba(8,15,36,.05);
    border:1px solid var(--border-light);
}
.sw-state::before{
    content:'';width:.5rem;height:.5rem;border-radius:50%;
    background:var(--text-secondary);
}
.sw-state.is-running{color:var(--success);background:rgba(26,158,110,.1);border-color:rgba(26,158,110,.25)}
.sw-state.is-running::before{background:var(--success);animation:swPulse 1.4s ease-in-out infinite}
@keyframes swPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.sw-actions{margin-top:.1rem}
.sw-laps-panel{
    width:100%;
    display:flex;flex-direction:column;gap:.5rem;
    background:var(--card-bg);
    border:1px solid var(--border-light);
    border-radius:16px;
    padding:.9rem 1rem 1rem;
    box-shadow:0 4px 20px rgba(8,15,36,.06);
}
.sw-laps-panel[hidden]{display:none!important}
.sw-laps-label{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary)}
.sw-laps{width:100%;max-height:230px;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem}
.sw-lap{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:baseline;
    gap:.75rem;
    padding:.5rem .8rem;
    border-radius:10px;
    background:var(--light-bg);
    border:1px solid transparent;
    font-variant-numeric:tabular-nums;
}
.sw-lap-n{font-size:.78rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}
.sw-lap-t{font-size:1.15rem;font-weight:700;color:var(--text);text-align:left}
.sw-lap-total{font-size:.8rem;color:var(--text-muted)}
.sw-lap.is-best{background:var(--success-light);border-color:rgba(26,158,110,.3)}
.sw-lap.is-best .sw-lap-t{color:var(--success)}
.sw-lap.is-worst{background:var(--danger-light);border-color:rgba(229,72,58,.25)}
.sw-lap.is-worst .sw-lap-t{color:var(--danger)}

/* ── Zufallszahl ──────────────────────────────────────────────────────────── */
.tool-random-wrap{display:flex;flex-direction:column;align-items:center;gap:1.25rem;width:100%;max-width:520px}
.random-settings-panel{
    width:100%;
    display:flex;flex-direction:column;align-items:center;gap:.6rem;
    background:var(--card-bg);
    border:1px solid var(--border-light);
    border-radius:16px;
    padding:1rem 1.15rem 1.15rem;
    box-shadow:0 4px 20px rgba(8,15,36,.06);
}
.random-section-label{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary)}
.random-range{display:flex;align-items:center;gap:1rem}
.random-range .timer-digit-input{
    width:5.75rem;font-size:1.9rem;border-radius:12px;
    box-shadow:inset 0 1px 2px rgba(8,15,36,.04);
    transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.random-range .timer-digit-input:hover{border-color:var(--secondary-light)}
.random-range .timer-digit-input:focus{
    outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(245,166,35,.22),inset 0 1px 2px rgba(8,15,36,.04);
    background-color:var(--form-field-bg-focus);
}
.random-range-dash{font-size:1.9rem;font-weight:800;color:var(--text-secondary);opacity:.75;padding-bottom:.9rem}
.random-hint{margin:0;font-size:.85rem;font-weight:600;color:var(--danger)}
.random-hint[hidden]{display:none!important}
.random-focus-card{
    position:relative;
    width:100%;
    padding:1.6rem 1.35rem;
    border-radius:22px;
    background:linear-gradient(155deg,#fff 0%,var(--light-bg) 48%,rgba(237,244,252,.98) 100%);
    border:1px solid var(--border-light);
    box-shadow:0 8px 32px rgba(8,15,36,.08),0 0 0 1px rgba(255,255,255,.6) inset;
    overflow:hidden;
}
.random-focus-card::before{
    content:'';position:absolute;top:-40%;right:-25%;width:55%;height:90%;
    background:radial-gradient(circle,rgba(245,166,35,.14) 0%,transparent 68%);
    pointer-events:none;
}
.random-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:7.5rem}
.random-ring{
    position:absolute;
    width:min(19rem,88vw);height:min(19rem,88vw);
    max-width:270px;max-height:270px;
    border-radius:50%;
    background:conic-gradient(from 210deg,rgba(24,69,200,.12),rgba(245,166,35,.18),rgba(24,69,200,.1),rgba(245,166,35,.12),rgba(24,69,200,.12));
    opacity:.55;filter:blur(1px);pointer-events:none;
}
.random-result{
    position:relative;z-index:1;
    font-size:clamp(4rem,20vw,7.5rem);
    font-weight:900;line-height:1;
    font-variant-numeric:tabular-nums;
    overflow-wrap:anywhere;
    background:linear-gradient(115deg,var(--primary-dark) 0%,var(--primary) 45%,var(--primary-light) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 2px 16px rgba(24,69,200,.22));
}
.random-result.is-drawn{animation:rnPop .42s cubic-bezier(.2,1.35,.35,1)}
@keyframes rnPop{0%{transform:scale(.7);opacity:.3}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.random-history-panel{
    width:100%;
    display:flex;flex-direction:column;align-items:center;gap:.55rem;
}
.random-history-panel[hidden]{display:none!important}
.random-history-label{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary)}
.random-history{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;max-width:100%}
.rn-hist{
    background:linear-gradient(180deg,#fff 0%,var(--light-bg) 100%);
    border:1px solid var(--border);
    border-radius:10px;
    padding:.3rem .75rem;
    font-size:1.05rem;font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--text-muted);
    box-shadow:0 1px 2px rgba(8,15,36,.06);
}
.random-actions{margin-top:.1rem;flex-wrap:wrap;justify-content:center}
.score-add-row{display:flex;gap:.75rem;align-items:center;margin-bottom:1.75rem;flex-wrap:wrap}
.score-board{display:flex;flex-direction:column;gap:.75rem;max-width:600px}
.score-card{display:flex;align-items:center;gap:1rem;background:var(--card-bg);border:2px solid var(--border);border-radius:14px;padding:1rem 1.25rem;transition:border-color .2s}
.score-card.score-first{border-color:var(--accent);background:#fff9f0}
.score-rank{font-size:1.6rem;width:42px;text-align:center;flex-shrink:0}
.score-name{flex:1;font-size:1.2rem;font-weight:700}
.score-controls{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.score-val{font-size:2rem;font-weight:900;color:var(--primary);min-width:3rem;text-align:center;font-variant-numeric:tabular-nums}
.score-btn{width:38px;height:38px;border-radius:8px;border:none;cursor:pointer;font-size:1.2rem;font-weight:700;font-family:inherit;transition:background .15s,transform .1s}
.score-btn:active{transform:scale(.9)}
.score-plus{background:var(--success-light);color:var(--success)}
.score-plus:hover{background:var(--success);color:#fff}
.score-minus{background:var(--danger-light);color:var(--danger)}
.score-minus:hover{background:var(--danger);color:#fff}
.score-del{background:var(--light-bg);color:var(--text-muted);font-size:.9rem}
.score-del:hover{background:var(--danger-light)}
.noise-ampel{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:#1a1a1a;border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.ampel-light{width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.08);transition:background .15s,box-shadow .15s}
.ampel-light.red.active{background:#f44336;box-shadow:0 0 30px 10px rgba(244,67,54,.6)}
.ampel-light.yellow.active{background:#ffeb3b;box-shadow:0 0 30px 10px rgba(255,235,59,.6)}
.ampel-light.green.active{background:#4caf50;box-shadow:0 0 30px 10px rgba(76,175,80,.6)}
.noise-bar-wrap{width:320px;height:18px;background:var(--border);border-radius:99px;overflow:hidden}
.noise-bar{height:100%;width:0%;background:var(--success);border-radius:99px;transition:width .1s,background .15s}
.noise-label{font-size:1.4rem;font-weight:700}
.noise-thresholds{display:flex;flex-direction:column;gap:.5rem;font-size:.88rem}
.noise-thresholds label{display:flex;align-items:center;gap:.5rem;color:var(--text-muted)}
.question-layout{display:flex;gap:2.5rem;flex-wrap:wrap;align-items:flex-start}
.question-left{flex:1;min-width:280px}
.question-right{flex:1;min-width:280px;display:flex;align-items:center;justify-content:center}
.question-card{width:100%;min-height:220px;background:var(--header-gradient);border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;box-shadow:0 6px 28px rgba(8,15,36,.2)}
.question-card-hint{color:rgba(255,255,255,.4);font-size:1rem}
.question-card-text{color:#fff;font-size:1.35rem;font-weight:600;line-height:1.5}
.question-card-meta{color:rgba(255,255,255,.45);font-size:.85rem;margin-top:1.25rem}
.pom-mode-tabs{display:flex;gap:0;border:2px solid var(--border);border-radius:10px;overflow:hidden}
.pom-tab{padding:.55rem 1.5rem;background:none;border:none;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s}
.pom-tab.active{background:var(--primary);color:#fff}
.pom-rounds{font-size:1.1rem;font-weight:700;color:var(--text-muted)}
.pom-settings{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
.pom-settings label{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--text-muted);font-weight:600}
@media(max-width:900px){.tools-grid{grid-template-columns:repeat(2,1fr)}.wheel-layout{flex-direction:column}.wheel-sidebar{width:100%}.order-list{columns:1}.question-layout{flex-direction:column}.score-board{max-width:100%}}
@media(max-width:500px){.timer-display{font-size:4rem}}

/* Tablet & iPad (600–1200px): Touch-Ziele, Lesbarkeit, Layout — Desktop >1200px unverändert */
@media (min-width:600px) and (max-width:1200px){
    .tools-page{
        padding:1.35rem max(1rem,env(safe-area-inset-right)) 1.75rem max(1rem,env(safe-area-inset-left));
        max-width:100%
    }
    .tools-page-header{margin-bottom:1.5rem}
    .tools-page-title{font-size:1.65rem}
    .tools-grid{
        grid-template-columns:repeat(3,1fr);
        gap:1rem
    }
    .tool-card{
        padding:1.65rem 0.85rem 1.45rem;
        min-height:132px;
        border-radius:16px;
        -webkit-tap-highlight-color:rgba(24,69,200,.12)
    }
    .tool-card:active{transform:scale(.98)}
    .tool-icon{font-size:3.15rem}
    .tool-label{font-size:1.02rem}
    .tool-desc{font-size:0.8rem;line-height:1.35}

    .tool-fs-bar{
        padding:0.55rem max(1rem,env(safe-area-inset-right)) 0.55rem max(1rem,env(safe-area-inset-left));
        padding-top:max(0.55rem,env(safe-area-inset-top));
        min-height:52px;
        align-items:center
    }
    .tool-back{
        min-height:44px;
        padding:0.5rem 1.2rem;
        font-size:0.95rem;
        border-radius:10px
    }
    .tool-fs-title{font-size:1.12rem}
    .tool-fs-body{
        padding:1.35rem max(1rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))
    }
    .tool-fs-centered{padding-top:2rem;gap:1.5rem}
    .tool-fs-body--qr{padding-top:1rem}

    .qr-tool-grid{gap:1.35rem}
    .qr-panel,.qr-preview{padding:1.35rem 1.4rem}
    .qr-textarea{font-size:16px;min-height:8rem}
    .qr-actions .btn{min-height:48px;min-width:9rem;font-size:0.95rem}

    .timer-display{font-size:5.25rem}
    .timer-digit-input{width:108px;min-height:52px;font-size:2.35rem;padding:0.45rem}
    .timer-colon{font-size:2.65rem}
    .timer-presets{gap:0.55rem;max-width:100%}
    .timer-presets .btn{min-height:48px;min-width:52px;padding:0.5rem 0.85rem;font-size:0.88rem}
    .timer-bar-wrap{max-width:100%;height:14px}

    .wheel-layout{gap:1.75rem;align-items:flex-start}
    .wheel-sidebar{width:min(300px,36vw)}
    .wheel-student-list{max-height:min(42vh,420px)}
    .wheel-check{
        min-height:48px;
        padding:0.45rem 0.65rem;
        font-size:0.92rem;
        border-radius:8px
    }
    .wheel-check input{width:22px;height:22px;min-width:22px;min-height:22px}
    #tool-wheel #wheelCanvas{
        width:100%!important;
        max-width:min(500px,78vw);
        height:auto!important
    }

    .dice-count-btns{gap:0.6rem}
    .dice-count-chip{min-width:52px;min-height:48px;font-size:1.05rem;padding:0.5rem 0.9rem}
    .dice-stage{min-height:9.5rem}
    .dice-result{gap:1.1rem}
    .die{--die-size:clamp(4rem,11vw,5.25rem)}

    .order-list{columns:2;gap:1.5rem}
    .order-list li{padding:0.55rem 0.65rem;font-size:0.98rem;min-height:44px}
    .order-num{width:32px;height:32px;font-size:0.82rem}

    .sw-laps{max-height:min(38vh,280px)}
    .sw-lap{padding:0.6rem 1rem}
    .sw-lap-t{font-size:1.2rem}
    .sw-actions .btn{min-height:48px}

    .random-range{flex-wrap:wrap;justify-content:center}
    .random-range .timer-digit-input{width:6.25rem;font-size:16px;min-height:48px}

    .score-add-row{gap:0.85rem}
    .score-add-row .form-control{font-size:16px;min-height:48px}
    .score-add-row .btn{min-height:48px;padding:0.55rem 1.15rem}
    .score-card{padding:1.1rem 1.15rem;gap:0.85rem}
    .score-btn{width:48px;height:48px;font-size:1.25rem;border-radius:10px}
    .score-name{font-size:1.15rem}

    .noise-ampel{padding:1.65rem;gap:1.15rem}
    .ampel-light{width:100px;height:100px}
    .noise-bar-wrap{width:min(360px,85vw);height:20px}
    .noise-label{font-size:1.5rem}
    .noise-thresholds input,.noise-thresholds select{font-size:16px;min-height:44px}

    .question-layout{gap:1.75rem}
    .question-card{min-height:240px;padding:1.75rem}
    .question-card-text{font-size:1.28rem}
    .question-left textarea{font-size:16px;min-height:10rem}

    .pom-tab{min-height:48px;padding:0.6rem 1.35rem;font-size:0.95rem}
    .pom-settings{gap:1.5rem}
    .pom-settings .timer-digit-input{min-height:48px;font-size:16px!important;width:76px!important}

    .btn-xl{min-height:52px;padding:0.8rem 1.85rem;font-size:1.05rem}
    .btn:not(.btn-sm){min-height:44px}
    .tool-fs .form-control,.tool-fs select{font-size:16px;min-height:48px}

    .grp-result--cols-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0.4rem}
    .grp-pane-left{width:min(380px,42vw);padding:1.1rem 1.15rem}
    .grp-layout--results-focus .grp-pane-left{width:min(220px,30vw);padding:0.65rem 0.75rem;gap:0.65rem}
    .grp-layout--results-focus .grp-intro-text{display:none}
    .grp-layout--results-focus .grp-intro-title{font-size:0.88rem;margin-bottom:0.25rem}
    .grp-layout--results-focus .grp-card-panel{padding:0.65rem 0.75rem}
    #tool-groups:has(#grpResultsPanel.is-visible)>.tool-fs-body.grp-layout,
    #tool-partner:has(#ptnResultsPanel.is-visible)>.tool-fs-body.grp-layout{padding:0.45rem 0.75rem 0.55rem}
    #tool-groups .grp-results-panel.is-visible .grp-results-grid-wrap,
    #tool-partner .grp-results-panel.is-visible .grp-results-grid-wrap{overflow:hidden;align-items:flex-start}
    #tool-groups .grp-results-panel .grp-result-toolbar,
    #tool-partner .grp-results-panel .grp-result-toolbar{padding:0.4rem 0.55rem;gap:0.45rem}
    #tool-groups .grp-result-title,
    #tool-partner .grp-result-title{font-size:0.74rem;line-height:1.2}
    #tool-groups .grp-result--cols-3 .grp-card-head,
    #tool-partner .grp-result--cols-3 .grp-card-head{padding:0.42rem 0.52rem 0.35rem}
    #tool-groups .grp-result--cols-3 .grp-card-label,
    #tool-partner .grp-result--cols-3 .grp-card-label{font-size:1.05rem}
    #tool-groups .grp-result--cols-3 .grp-card-size,
    #tool-partner .grp-result--cols-3 .grp-card-size{font-size:0.82rem}
    #tool-groups .grp-result--cols-3 .grp-card-num,
    #tool-partner .grp-result--cols-3 .grp-card-num{min-width:2rem;height:2rem;font-size:0.82rem;border-radius:8px}
    #tool-groups .grp-result--cols-3 .grp-card-members,
    #tool-partner .grp-result--cols-3 .grp-card-members{padding:0 0.55rem 0.55rem;gap:0.32rem;max-height:none;overflow:visible}
    #tool-groups .grp-result--cols-3 .grp-member-chip,
    #tool-partner .grp-result--cols-3 .grp-member-chip{font-size:0.92rem;padding:0.38rem 0.52rem;border-radius:8px}
    #tool-groups .grp-result--cols-3 .grp-member-initial,
    #tool-partner .grp-result--cols-3 .grp-member-initial{width:1.65rem;height:1.65rem;font-size:0.72rem}
    #tool-groups .grp-result--cols-3 .grp-warn-banner,
    #tool-partner .grp-result--cols-3 .grp-warn-banner{padding:0.4rem 0.55rem;font-size:0.82rem;gap:0.4rem;line-height:1.3}
    #tool-groups .grp-result--cols-3 .grp-warn-icon,
    #tool-partner .grp-result--cols-3 .grp-warn-icon{width:1.2rem;height:1.2rem;font-size:0.8rem}
    #tool-groups .grp-result--cols-3 .grp-card,
    #tool-partner .grp-result--cols-3 .grp-card{border-top-width:3px;border-radius:10px}
    #tool-groups .grp-result--cols-3 .ptn-card,
    #tool-partner .grp-result--cols-3 .ptn-card{padding:0.65rem 0.8rem;gap:0.42rem;border-radius:10px;border-width:2px}
    #tool-groups .grp-result--cols-3 .ptn-card-badge,
    #tool-partner .grp-result--cols-3 .ptn-card-badge{width:30px;height:30px;font-size:0.8rem;border-radius:7px}
    #tool-groups .grp-result--cols-3 .ptn-member,
    #tool-partner .grp-result--cols-3 .ptn-member{font-size:0.95rem;gap:0.38rem}
    #tool-groups .grp-result--cols-3 .grp-initial,
    #tool-partner .grp-result--cols-3 .grp-initial{width:24px;height:24px;font-size:0.74rem}
    #tool-groups .grp-result--cols-3 .ptn-special-tag,
    #tool-partner .grp-result--cols-3 .ptn-special-tag{font-size:0.72rem;padding:0.1rem 0.42rem}
    #tool-groups .grp-pane-right-inner,
    #tool-partner .grp-pane-right-inner{gap:0.45rem}
    #tool-groups .grp-pane-right,
    #tool-partner .grp-pane-right{padding:0.5rem 0.6rem}
    #tool-groups .grp-result-toolbar .btn,
    #tool-partner .grp-result-toolbar .btn{min-height:40px;padding:0.32rem 0.65rem;font-size:0.72rem}
    .grp-count-btn{width:48px;height:48px;border-radius:11px;font-size:1.3rem}
    .grp-absent-btn{min-height:44px;padding:0.35rem 0.75rem;font-size:0.8rem}
    .grp-student-row{min-height:48px;padding:0.5rem 0.7rem}
    .grp-mode-tab{min-height:48px;padding:0.55rem 0.85rem;font-size:0.88rem}
    .grp-settings-btn{min-height:48px;padding:0.75rem 1.2rem;font-size:0.95rem}
    .grp-result-toolbar .btn{min-height:44px;padding:0.45rem 1rem;font-size:0.88rem}

    .excl-modal-pick{min-height:48px;padding:0.6rem 0.85rem;font-size:0.92rem}
    .excl-modal-x{width:48px;height:48px;border-radius:10px}
    .excl-cb{width:22px;height:22px;min-width:22px;min-height:22px}

    /* Einstellungs-Modal: Pair-Buttons tablet-tauglich (min. 44 × 44 px Touch-Ziel) */
    .pair-btn{width:44px;height:44px;min-width:44px;min-height:44px;font-size:1.15rem;border-radius:10px}
    .pair-btns{gap:0.5rem}
    .pair-row{padding:0.55rem 0.75rem;min-height:52px}
    .excl-modal-left-list,.excl-modal-right-list{-webkit-overflow-scrolling:touch}
}

/* ── Zufallsgruppen & Partnertool ────────────────────────────────────────── */

/* Layout */
.grp-layout{display:flex;gap:0;height:100%;min-height:calc(100vh - 56px)}
.grp-pane-left{width:min(400px,100%);flex-shrink:0;border-right:1px solid var(--border-light);padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:1.1rem;overflow-y:auto;background:linear-gradient(180deg,var(--bg-surface) 0%,var(--light-bg) 100%)}
.grp-pane-right{flex:1;padding:1rem 1.25rem;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.grp-pane-right-inner{display:flex;flex-direction:column;flex:1;min-height:0;gap:1rem}
.grp-results-panel{display:none;flex:1;flex-direction:column;min-height:0;gap:.85rem;overflow:hidden}
.grp-results-panel.is-visible{display:flex}
.grp-results-grid-wrap{flex:1;min-height:0;overflow:auto;padding-right:.2rem}

#tool-groups.tool-fs.is-active,
#tool-partner.tool-fs.is-active{overflow:hidden;max-height:100dvh}
#tool-groups.is-active>.tool-fs-body.grp-layout,
#tool-partner.is-active>.tool-fs-body.grp-layout{flex:1;min-height:0;overflow:hidden;max-width:100%;width:100%;margin:0 auto;padding:1rem 1.25rem 1.25rem}

/* Nach Gruppen/Partner-Ziehung: schmales Einstellpanel + größere Ergebnis-Typo (nur Desktop, nicht iPad/Tablet ≤1200px) */
@media(min-width:1201px){
    .grp-layout--results-focus .grp-pane-left{width:min(260px,28vw);padding:.85rem .95rem;gap:.75rem}
    .grp-layout--results-focus .grp-intro-text{display:none}
    .grp-layout--results-focus .grp-intro-title{font-size:.98rem;margin-bottom:.35rem}
    .grp-layout--results-focus .grp-card-panel{padding:.85rem .95rem}
    .grp-layout--results-focus .grp-pane-right{padding:1rem 1.35rem}
    .grp-layout--results-focus .grp-result{gap:.9rem}
    .grp-layout--results-focus .grp-result--cols-3 .grp-card-label{font-size:1.05rem}
    .grp-layout--results-focus .grp-result--cols-3 .grp-card-size{font-size:.8rem}
    .grp-layout--results-focus .grp-result--cols-3 .grp-member-chip{font-size:.9rem;padding:.5rem .7rem}
    .grp-layout--results-focus .grp-result--cols-3 .grp-member-initial{width:1.75rem;height:1.75rem;font-size:.72rem}
    .grp-layout--results-focus .grp-result--cols-3 .grp-card-members{max-height:none}
    .grp-layout--results-focus .grp-result--cols-3 .ptn-member{font-size:.95rem}
    .grp-layout--results-focus .grp-result--cols-3 .ptn-card{padding:.75rem .9rem}
    .grp-layout--results-focus .grp-result-title{font-size:1rem}
}
.grp-fs-close{display:none;position:absolute;top:.75rem;left:.75rem;z-index:10;background:rgba(0,0,0,.18);border:none;border-radius:50%;width:2.2rem;height:2.2rem;font-size:1.4rem;line-height:1;color:#fff;cursor:pointer;align-items:center;justify-content:center;transition:background .15s}
.grp-fs-close:hover{background:rgba(0,0,0,.38)}
.grp-pane-right:fullscreen,
.grp-pane-right:-webkit-full-screen{background:var(--page-bg,#f4f6fa);padding:clamp(1rem,2.5vw,2rem);box-sizing:border-box;width:100%;height:100%;min-height:100%;overflow:auto;display:flex;flex-direction:column;position:relative}
.grp-pane-right:fullscreen .grp-fs-close,
.grp-pane-right:-webkit-full-screen .grp-fs-close{display:flex}
.grp-pane-right:fullscreen .grp-pane-right-inner,
.grp-pane-right:-webkit-full-screen .grp-pane-right-inner{flex:1;min-height:0;display:flex;flex-direction:column}
.grp-pane-right:fullscreen .grp-results-panel,
.grp-pane-right:-webkit-full-screen .grp-results-panel{flex:1;min-height:0}
.grp-pane-right:fullscreen .grp-results-grid-wrap,
.grp-pane-right:-webkit-full-screen .grp-results-grid-wrap{max-height:none;flex:1}
.grp-pane-right:fullscreen .grp-result-toolbar-actions,
.grp-pane-right:-webkit-full-screen .grp-result-toolbar-actions{display:none}

.grp-intro{margin:0 0 .25rem}
.grp-intro-title{margin:0 0 .45rem;font-size:1.15rem;font-weight:800;color:var(--dark);letter-spacing:-.02em}
.grp-intro-text{margin:0;font-size:.86rem;line-height:1.55;color:var(--text-muted);font-weight:500}

.grp-card-panel{background:var(--card-bg);border:1px solid var(--border-light);border-radius:14px;padding:1.2rem 1.25rem;box-shadow:0 1px 3px rgba(8,15,36,.04),0 4px 16px rgba(8,15,36,.06);display:flex;flex-direction:column;gap:.85rem}
.grp-card-panel--students{gap:.65rem}
.grp-card-panel--excl{padding:0;overflow:hidden;border-radius:14px}
.grp-card-panel--excl .grp-collapsible-head{border-radius:14px;border:1px solid var(--border-light);background:var(--card-bg)}
.grp-card-panel--excl .grp-collapsible-head[aria-expanded="true"]{border-radius:14px 14px 0 0;border-bottom-color:transparent}
.grp-card-panel--excl .grp-excl-panel{border-radius:0 0 14px 14px;border:1px solid var(--border-light);border-top:none}

.grp-search{font-size:.9rem}
.grp-count-block .grp-count-row{justify-content:flex-start}
.grp-count-line{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.grp-split-preview{font-size:.78rem;font-weight:700;color:var(--primary);letter-spacing:.02em;white-space:normal;line-height:1.35;max-width:100%}
.grp-count-row{display:flex;align-items:center;gap:.5rem}
.grp-count-btn{width:40px;height:40px;border:2px solid var(--border);background:var(--card-bg);color:var(--text);border-radius:10px;font-size:1.25rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;line-height:1}
.grp-count-btn:hover{border-color:var(--primary);background:var(--accent-light);color:var(--primary)}
.grp-count-input{width:72px;text-align:center;font-size:1.15rem;font-weight:800;border-radius:10px;background-color:var(--form-field-bg)}

/* Mode tabs (partner) */
.grp-mode-tabs{display:flex;gap:.4rem}
.grp-mode-tab{flex:1;padding:.5rem .75rem;border:2px solid var(--border);background:var(--card-bg);color:var(--text-muted);border-radius:8px;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}
.grp-mode-tab.is-active{border-color:var(--primary);background:var(--primary);color:#fff}

/* Section */
.grp-section{display:flex;flex-direction:column;gap:.6rem}
.grp-section-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.grp-section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.grp-section-sub{font-size:.78rem;color:var(--text-muted);font-weight:600;text-align:right}

/* Collapsible Nicht-zusammen header */
.grp-collapsible-head{width:100%;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;cursor:pointer;font-family:inherit;transition:background .15s,box-shadow .15s;text-align:left}
.grp-collapsible-head:hover{background:var(--light-bg)}
.grp-collapse-arrow{margin-left:auto;width:1.25rem;height:1.25rem;border-radius:6px;background:var(--light-bg);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:.65rem;line-height:1}
.grp-collapse-arrow::before{content:'\25B8';display:block;transition:transform .2s}
.grp-collapsible-head[aria-expanded="true"] .grp-collapse-arrow::before{content:'\25BE'}
.grp-excl-panel{padding:1rem 1.1rem 1.15rem;background:var(--card-bg);display:flex;flex-direction:column;gap:.75rem}
.grp-excl-hint{font-size:.82rem;color:var(--text-muted);line-height:1.5;margin:0}
.grp-action-hint{font-size:.82rem;font-weight:600;color:var(--warning);background:var(--warning-light);border:1px solid rgba(217,119,6,.35);border-radius:10px;padding:.55rem .75rem;margin:0;line-height:1.4}

/* Student list */
.grp-student-list{display:flex;flex-direction:column;gap:.3rem;max-height:280px;overflow-y:auto;padding-right:.15rem}
.grp-student-row{display:flex;align-items:center;gap:.6rem;padding:.45rem .65rem;border-radius:9px;background:var(--card-bg);border:1px solid var(--border-light);transition:opacity .2s,background .15s}
.grp-student-row.is-absent{opacity:.45;background:var(--bg-surface);text-decoration:line-through}
.grp-student-name{flex:1;min-width:0;line-height:1.3;font-size:.84rem}
.grp-student-initial{width:26px;height:26px;border-radius:7px;background:var(--primary-light);color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.grp-student-name{flex:1;font-size:.88rem;font-weight:500}
.grp-absent-btn{border:1.5px solid var(--border);background:var(--success-light);color:var(--success);border-radius:7px;padding:.2rem .55rem;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;flex-shrink:0}
.grp-absent-btn:hover{border-color:var(--danger);background:var(--danger-light);color:var(--danger)}
.grp-absent-btn.is-krank{background:var(--danger-light);color:var(--danger);border-color:var(--danger)}
.grp-absent-btn.is-krank:hover{background:var(--success-light);color:var(--success);border-color:var(--success)}

/* Exclusion checkboxes */
.excl-checkbox-list{display:flex;flex-direction:column;gap:.35rem;max-height:260px;overflow-y:auto}
.excl-cb-row{display:flex;align-items:center;gap:.65rem;padding:.5rem .7rem;border-radius:9px;border:1.5px solid var(--border-light);background:var(--card-bg);cursor:pointer;transition:all .18s;user-select:none}
.excl-cb-row:hover{border-color:var(--primary-light);background:#f0f5ff}
.excl-cb-row.is-excluded{border-color:var(--danger);background:var(--danger-light)}
.excl-cb-row.is-saving{opacity:.6}
.excl-cb{width:17px;height:17px;cursor:pointer;accent-color:var(--danger);flex-shrink:0}
.excl-cb-label{display:flex;align-items:center;gap:.5rem;flex:1;font-size:.88rem;font-weight:500}
.excl-cb-initial{width:22px;height:22px;border-radius:6px;background:var(--text-muted);color:#fff;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.excl-cb-tag{font-size:.72rem;font-weight:700;color:var(--danger);background:rgba(229,72,58,.1);padding:.1rem .45rem;border-radius:999px;margin-left:auto;flex-shrink:0}
.excl-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;background:var(--danger);color:#fff;border-radius:999px;font-size:.73rem;font-weight:700;padding:0 .4rem}

/* Actions */
.grp-actions{display:flex;flex-direction:column;gap:.6rem;flex-shrink:0;padding-top:.25rem}
.btn-block{width:100%;justify-content:center}

/* Top bar info pills */
.grp-bar-info{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.grp-bar-pill{font-size:.78rem;font-weight:700;padding:.2rem .65rem;border-radius:999px}
.grp-bar-pill--green{background:rgba(26,158,110,.2);color:#1a9e6e}
.grp-bar-pill--red{background:rgba(229,72,58,.2);color:#e5483a}

/* Placeholder */
.grp-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:.85rem;color:var(--text-muted);min-height:min(52vh,420px);text-align:center;padding:2rem 1.25rem;border:2px dashed var(--border);border-radius:16px;background:linear-gradient(165deg,rgba(255,255,255,.95) 0%,var(--light-bg) 100%)}
.grp-placeholder-visual{color:var(--primary);opacity:.35}
.grp-placeholder-svg{width:100px;height:100px;display:block}
.grp-placeholder-title{margin:0;font-size:1.1rem;font-weight:800;color:var(--dark)}
.grp-placeholder-text{margin:0;font-size:.88rem;line-height:1.45;max-width:22rem}
.grp-placeholder-text strong{color:var(--accent-dark);font-weight:700}
.grp-placeholder-tips{margin:.5rem 0 0;padding:0 0 0 1.1rem;max-width:24rem;text-align:left;font-size:.8rem;line-height:1.5;color:var(--text-secondary)}
.grp-placeholder-tips li{margin:.35rem 0}

.grp-result-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:.85rem 1.1rem;background:var(--card-bg);border:1px solid var(--border-light);border-radius:12px;box-shadow:0 1px 3px rgba(8,15,36,.04)}
.grp-result-toolbar-text{min-width:0}
.grp-result-title{font-size:.92rem;font-weight:700;color:var(--dark)}
.grp-result-toolbar-actions{display:flex;flex-wrap:wrap;gap:.5rem}

/* Group result cards */
.grp-result{display:grid;gap:.75rem;align-content:start}
.grp-result--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grp-result--cols-3 .grp-warn-banner{margin-bottom:.25rem}
.grp-result--cols-3 .grp-card-head{padding:.55rem .65rem .45rem}
.grp-result--cols-3 .grp-card-label{font-size:.88rem}
.grp-result--cols-3 .grp-card-size{font-size:.68rem}
.grp-result--cols-3 .grp-card-members{padding:0 .65rem .65rem;max-height:min(34vh,320px);overflow-y:auto;gap:.32rem}
.grp-result--cols-3 .grp-member-chip{font-size:.75rem;padding:.4rem .55rem}
.grp-result--cols-3 .grp-member-initial{width:1.5rem;height:1.5rem;font-size:.64rem;flex-shrink:0}
.grp-result--cols-3 .grp-member-name{line-height:1.3}
.grp-result--cols-3 .ptn-card{flex-direction:column;align-items:stretch;gap:.45rem;padding:.65rem .75rem;border-radius:12px}
.grp-result--cols-3 .ptn-card-badge{width:26px;height:26px;font-size:.72rem}
.grp-result--cols-3 .ptn-members{flex-direction:column;align-items:stretch;gap:.2rem}
.grp-result--cols-3 .ptn-link{display:none}
.grp-result--cols-3 .ptn-member{font-size:.78rem;gap:.35rem}
.grp-result--cols-3 .ptn-special-tag{font-size:.65rem;align-self:flex-start}
@media(max-width:900px){
    .grp-result--cols-3{grid-template-columns:1fr}
}
.grp-warn-banner{grid-column:1/-1;display:flex;align-items:flex-start;gap:.65rem;padding:.85rem 1rem;background:var(--warning-light);border:1px solid var(--warning);border-radius:12px;color:var(--warning);font-size:.88rem;font-weight:600;line-height:1.45}
.grp-warn-icon{flex-shrink:0;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(217,119,6,.25);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;line-height:1}
.grp-card{background:var(--card-bg);border:1px solid var(--border-light);border-radius:14px;padding:0;overflow:hidden;display:flex;flex-direction:column;gap:0;box-shadow:0 1px 3px rgba(8,15,36,.04),0 6px 20px rgba(8,15,36,.06);border-top:4px solid var(--grp-accent,var(--primary));transition:transform .15s,box-shadow .15s}
.grp-card:hover{transform:translateY(-2px);box-shadow:0 4px 18px rgba(8,15,36,.1)}
.grp-card-head{display:flex;align-items:center;gap:.65rem;padding:1rem 1.1rem .65rem;background:linear-gradient(180deg,rgba(237,244,252,.85) 0%,var(--card-bg) 100%)}
.grp-card-num{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 .35rem;border-radius:10px;color:#fff;font-size:.85rem;font-weight:800;flex-shrink:0}
.grp-card-head-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.grp-card-label{font-weight:800;font-size:1rem;color:var(--dark);letter-spacing:-.02em}
.grp-card-size{font-size:.75rem;font-weight:600;color:var(--text-muted)}
.grp-card-members{display:flex;flex-direction:column;align-items:stretch;gap:.35rem;padding:0 1.05rem 1.1rem}
.grp-member-chip{display:flex;align-items:center;gap:.5rem;width:100%;box-sizing:border-box;padding:.45rem .65rem;background:var(--light-bg);border:1px solid var(--border-light);border-radius:10px;font-size:.84rem;font-weight:600;color:var(--text)}
.grp-member-initial{width:1.65rem;height:1.65rem;border-radius:50%;color:#fff;font-size:.68rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.grp-member-name{flex:1;min-width:0;line-height:1.35;word-break:break-word}

.grp-initial{width:22px;height:22px;border-radius:50%;color:#fff;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}

/* Partner result cards */
.ptn-card{background:var(--card-bg);border:2px solid var(--border);border-radius:16px;padding:1.1rem 1.3rem;display:flex;align-items:center;gap:1rem;position:relative;transition:border-color .2s;border-color:var(--ptn-col,var(--border))}
.ptn-card--special{background:var(--accent-light)}
.ptn-card-badge{width:28px;height:28px;border-radius:8px;color:#fff;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ptn-members{display:flex;align-items:center;gap:.75rem;flex:1;flex-wrap:wrap}
.ptn-member{display:flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600}
.ptn-link{font-size:1.1rem;font-weight:800;color:var(--accent-dark);flex-shrink:0;opacity:.85}
.ptn-special-tag{font-size:.72rem;font-weight:700;background:var(--accent);color:#1a2035;padding:.15rem .5rem;border-radius:999px;flex-shrink:0}

.grp-excl-launch{padding:.85rem 1rem!important}
.grp-excl-launch-row{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.grp-excl-launch-row .btn{flex:1;min-width:0;justify-content:center}
.grp-excl-badge{flex-shrink:0}
.grp-excl-launch-icon{margin-right:.35rem;opacity:.9}

.grp-settings-btn{
    display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;
    padding:.7rem 1.15rem;border-radius:12px;border:1.5px solid rgba(24,69,200,.35);
    background:linear-gradient(180deg,#f4f7ff 0%,#e8effc 100%);
    color:#143a9e;font-size:.9rem;font-weight:700;letter-spacing:.02em;
    box-shadow:0 1px 2px rgba(8,15,36,.06),inset 0 1px 0 rgba(255,255,255,.85);
    transition:border-color .18s,background .18s,box-shadow .18s,transform .12s,color .18s
}
.grp-settings-btn:hover{
    border-color:rgba(24,69,200,.55);
    background:linear-gradient(180deg,#fff 0%,#eef3fc 100%);
    box-shadow:0 4px 14px rgba(24,69,200,.12),inset 0 1px 0 #fff;
    color:#0d2d7a;
    transform:translateY(-1px)
}
.grp-settings-btn:active{transform:translateY(0);box-shadow:0 1px 4px rgba(8,15,36,.08)}
.grp-settings-btn__icon{flex-shrink:0;opacity:.92}
.grp-settings-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.excl-modal-backdrop{display:none;position:fixed;inset:0;z-index:10000;background:rgba(8,15,36,.55);backdrop-filter:blur(5px);align-items:center;justify-content:center;padding:1rem;overflow-y:auto}
.excl-modal-backdrop.is-open{display:flex}
.excl-modal{max-width:920px;width:100%;max-height:min(92vh,880px);background:var(--card-bg);border-radius:16px;border:1px solid var(--border-light);box-shadow:0 24px 64px rgba(8,15,36,.28);display:flex;flex-direction:column;overflow:hidden;margin:auto}
.excl-modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;background:var(--header-gradient);border-bottom:2px solid rgba(245,166,35,.35)}
.excl-modal-header-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.excl-modal-title{margin:0;font-size:1.15rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.excl-modal-rule-summary{margin:0;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.9);line-height:1.35}
.excl-modal-x{flex-shrink:0;align-self:flex-start;width:2.25rem;height:2.25rem;border:none;border-radius:8px;background:rgba(255,255,255,.14);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer;font-family:inherit;transition:background .15s}
.excl-modal-x:hover{background:rgba(255,255,255,.26)}
.excl-modal-lead{margin:0;padding:.9rem 1.25rem;background:var(--light-bg);font-size:.86rem;line-height:1.55;color:var(--text);border-bottom:1px solid var(--border-light)}
.excl-modal-lead strong{font-weight:700;color:var(--dark)}
.excl-modal-columns{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:260px;flex:1;max-height:calc(92vh - 240px)}
.excl-modal-col{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border-light)}
.excl-modal-col--right{border-right:none}
.excl-modal-col-head{padding:.55rem .9rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--page-bg);border-bottom:1px solid var(--border-light)}
.excl-modal-left-list,.excl-modal-right-list{flex:1;overflow-y:auto;padding:.55rem .65rem;display:flex;flex-direction:column;gap:.35rem;min-height:180px;max-height:min(48vh,420px)}
.excl-modal-pick{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;padding:.5rem .65rem;border-radius:10px;border:1.5px solid var(--border-light);background:var(--card-bg);cursor:pointer;font-family:inherit;font-size:.86rem;transition:background .15s,border-color .15s,opacity .2s,box-shadow .15s}
.excl-modal-pick:hover:not(.is-dim){border-color:var(--primary-light);background:#f0f5ff}
.excl-modal-pick.is-selected{border-color:var(--accent);background:#fff9f0;box-shadow:0 0 0 1px rgba(245,166,35,.35)}
.excl-modal-pick.is-dim{opacity:.38}
.excl-modal-pick-initial{width:2rem;height:2rem;border-radius:9px;background:var(--primary);color:#fff;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.excl-modal-pick-name{font-weight:600;color:var(--text);text-align:left}
.excl-modal-empty{margin:0;padding:1.75rem 1rem;text-align:center;color:var(--text-muted);font-size:.86rem;line-height:1.45}
.excl-modal-footer{padding:.8rem 1.25rem;border-top:1px solid var(--border-light);display:flex;justify-content:flex-end;background:var(--page-bg)}
/* Pair controls for preference/exclusion modal */
.pair-row{display:flex;align-items:center;gap:.5rem;padding:.42rem .65rem;border-radius:9px;border:1.5px solid var(--border-light);background:var(--card-bg);transition:border-color .18s,background .18s}
.pair-row.is-plus{border-color:var(--success);background:rgba(26,158,110,.07)}
.pair-row.is-minus{border-color:var(--danger);background:var(--danger-light)}
.pair-row.is-saving{opacity:.5;pointer-events:none}
.pair-initial{width:22px;height:22px;border-radius:6px;background:var(--text-muted);color:#fff;font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.pair-name{flex:1;font-size:.86rem;font-weight:500;color:var(--text);min-width:0}
.pair-btns{display:flex;gap:.28rem;flex-shrink:0}
.pair-btn{width:28px;height:28px;border-radius:7px;border:2px solid;background:transparent;cursor:pointer;font-weight:800;font-size:.82rem;transition:all .15s;font-family:inherit;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.pair-btn--plus{color:var(--success);border-color:rgba(26,158,110,.4)}
.pair-btn--plus:hover,.pair-btn--plus.is-active{background:var(--success);color:#fff;border-color:var(--success)}
.pair-btn--minus{color:var(--danger);border-color:rgba(229,72,58,.4)}
.pair-btn--minus:hover,.pair-btn--minus.is-active{background:var(--danger);color:#fff;border-color:var(--danger)}
.excl-modal-legend{display:flex;gap:.65rem;padding:.6rem 1.25rem;background:var(--page-bg);border-bottom:1px solid var(--border-light);flex-wrap:wrap}
.excl-modal-legend-item{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--text-muted)}
.excl-modal-legend-badge{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;color:#fff}
.excl-modal-legend-badge--plus{background:var(--success)}
.excl-modal-legend-badge--minus{background:var(--danger)}
@media(max-width:720px){
    .excl-modal-columns{grid-template-columns:1fr;max-height:none}
    .excl-modal-col{border-right:none;border-bottom:1px solid var(--border-light)}
    .excl-modal-col--right{border-bottom:none}
}

@media(max-width:900px){
    .grp-layout{flex-direction:column}
    .grp-pane-left{width:100%;border-right:none;border-bottom:1px solid var(--border)}
    .grp-student-list{max-height:200px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt das Ergebnis
   ohne Rollen, Pochen und Aufpoppen — es bleibt sofort lesbar stehen.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
    .die--rolling,
    .die--land,
    .random-result.is-drawn,
    .sw-state.is-running::before{
        animation:none!important;
    }
    .die--land{opacity:1;transform:none}
}

/* ── Timer: totale Eskalation in den letzten fünf Sekunden (16.09.2026) ─────
   Gesteuert von tools.js: .timer-eskalation ab fünf Sekunden Restzeit,
   .timer-explosion beim Nullpunkt. Die Stärke des Bebens kommt als
   --beben / --beben-dauer je Sekunde aus dem Skript. Overlays und Leinwand
   liegen im Werkzeug selbst (position:fixed) — das Beben verschiebt das
   Werkzeug samt Overlays, deshalb bleiben sie deckend. */
#tool-timer .timer-eskalation-vignette{
    position:fixed;inset:-40px;pointer-events:none;z-index:5;opacity:0;
    background:radial-gradient(ellipse at center,rgba(255,90,0,0) 38%,rgba(255,40,0,.6) 78%,rgba(120,0,0,.9) 100%);
    transition:opacity .35s;
}
#tool-timer .timer-feuer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;display:none}
#tool-timer.timer-eskalation{
    --beben:4px;--beben-dauer:.16s;
    background:#160400;
    animation:timerBeben var(--beben-dauer) infinite;
}
#tool-timer.timer-eskalation .timer-eskalation-vignette{opacity:1;animation:timerVignette .45s infinite alternate}
#tool-timer.timer-eskalation .timer-feuer{display:block}
#tool-timer.timer-eskalation .tool-fs-bar{background:linear-gradient(135deg,#5a0a00,#b91c00)}
#tool-timer.timer-eskalation .timer-focus-card{
    background:rgba(20,4,0,.72);
    border-color:#ff5a00;
    box-shadow:0 0 0 2px rgba(255,90,0,.55),0 0 40px rgba(255,60,0,.5),0 8px 32px rgba(0,0,0,.6);
}
#tool-timer.timer-eskalation .timer-display-ring{opacity:0}
#tool-timer.timer-eskalation .timer-focus-card{overflow:visible}
#tool-timer.timer-eskalation .timer-display-stack{min-height:clamp(9rem,40vmin,20rem)}
#tool-timer.timer-eskalation .timer-display,
#tool-timer.timer-eskalation .timer-display.timer-urgent{
    background:none;-webkit-background-clip:unset;background-clip:unset;
    color:#ffe08a;
    font-size:clamp(9rem,40vmin,20rem);
    letter-spacing:0;
    text-shadow:0 0 18px #ff9f1c,0 0 48px #ff4d00,0 0 90px #ff2000;
    filter:none;
    animation:timerZahl 1s infinite;
}
#tool-timer.timer-eskalation .timer-section-label,
#tool-timer.timer-eskalation .timer-unit,
#tool-timer.timer-eskalation .timer-colon{color:#ffb28a}
#tool-timer.timer-eskalation .timer-bar-wrap--tool .timer-bar{background:linear-gradient(90deg,#ff2000,#ff9f1c);box-shadow:0 0 18px #ff6b00}
#tool-timer.timer-explosion{--beben:18px;--beben-dauer:.06s}
#tool-timer.timer-explosion .timer-eskalation-vignette{
    background:#fff6d5;
    animation:timerBlitz 2.6s forwards;
}
@keyframes timerBeben{
    0%{transform:translate(0,0) rotate(0)}
    20%{transform:translate(calc(var(--beben)*-1),var(--beben)) rotate(-.5deg)}
    40%{transform:translate(var(--beben),calc(var(--beben)*-.6)) rotate(.5deg)}
    60%{transform:translate(calc(var(--beben)*-.7),calc(var(--beben)*-1)) rotate(0)}
    80%{transform:translate(var(--beben),var(--beben)) rotate(-.4deg)}
    100%{transform:translate(0,0) rotate(0)}
}
@keyframes timerVignette{from{opacity:.4}to{opacity:1}}
@keyframes timerZahl{0%{transform:scale(1.55);filter:brightness(1.6)}35%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes timerBlitz{0%{opacity:1;background:#fff}12%{opacity:1;background:#ffb347}40%{opacity:.85;background:#ff4d00}100%{opacity:0;background:#160400}}
@media (prefers-reduced-motion:reduce){
    #tool-timer.timer-eskalation,
    #tool-timer.timer-eskalation .timer-display,
    #tool-timer.timer-eskalation .timer-eskalation-vignette{animation:none!important}
    #tool-timer.timer-eskalation{transform:none}
    #tool-timer.timer-eskalation .timer-eskalation-vignette{opacity:.85}
    #tool-timer.timer-explosion .timer-eskalation-vignette{opacity:0;transition:opacity 1.2s}
}

/* ── Timer: Laufansicht (16.09.2026) — läuft die Zeit, bleibt nur die Bühne ──
   tools.js setzt .timer-laeuft beim Start und nimmt es bei „Zurück" (Reset). */
#tool-timer.timer-laeuft .timer-section{display:none}
#tool-timer.timer-laeuft .tool-fs-centered{justify-content:center;padding-top:1rem;min-height:calc(100dvh - 4.5rem)}
#tool-timer.timer-laeuft .tool-timer-wrap{max-width:min(44rem,94vw);gap:1.6rem}
#tool-timer.timer-laeuft .timer-focus-card{padding:2.4rem 1.6rem 2rem}
#tool-timer.timer-laeuft .timer-display-stack{min-height:clamp(7rem,26vmin,14rem)}
#tool-timer.timer-laeuft .timer-display-ring{width:min(30rem,90vw);height:min(30rem,90vw);max-width:440px;max-height:440px}
#tool-timer.timer-laeuft .timer-display{font-size:clamp(5rem,24vmin,13rem)}
#tool-timer.timer-laeuft .timer-actions{justify-content:center}
#tool-timer.timer-laeuft .timer-actions .btn{min-width:11rem}

/* ===== 12-klassen-listen.css ===== */
/* ── Klassen-Archiv ───────────────────────────────────────────────────────── */
.archiv-section{margin-top:.5rem}
.archiv-intro{display:flex;gap:1.25rem;align-items:center;background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:1.5rem;margin-bottom:1.75rem}
.archiv-intro-icon{font-size:3rem;line-height:1;flex-shrink:0}
.archiv-year-group{margin-bottom:2rem}
.archiv-year-heading{font-size:1rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.archiv-cards{display:flex;flex-wrap:wrap;gap:1rem}
.archiv-card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.4rem;min-width:220px;flex:1;max-width:320px;display:flex;flex-direction:column;gap:.75rem;opacity:.95}
.archiv-card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.archiv-card-name{font-size:1.1rem;font-weight:700;color:var(--text)}
.archiv-badge-pill{display:inline-flex;align-items:center;background:var(--accent-light);color:var(--accent-dark);font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--accent)}
.archiv-card-meta{display:flex;flex-direction:column;gap:.25rem;font-size:.83rem;color:var(--text-muted)}
.archiv-card-actions{margin-top:.25rem}
.archiv-detail-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.archiv-class-title{font-size:1.4rem;font-weight:800;display:flex;align-items:center;gap:.75rem;margin:0}
.archiv-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;border-bottom:2px solid var(--border);padding-bottom:.5rem}
.archiv-tab{background:none;border:none;padding:.5rem 1rem;border-radius:8px 8px 0 0;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s}
.archiv-tab:hover{background:var(--bg-surface);color:var(--text)}
.archiv-tab.is-active{background:var(--primary);color:#fff}
.archiv-tab-panel{display:none}
.archiv-tab-panel.is-active{display:block}
.grade-badge{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:28px;background:var(--primary-light);color:#fff;border-radius:7px;font-size:.9rem;font-weight:700;padding:0 .4rem}

/* ── Klasse versetzen Modal ───────────────────────────────────────────────── */
.versetz-modal-backdrop{position:fixed;inset:0;z-index:1200;background:rgba(8,15,36,.6);display:flex;align-items:center;justify-content:center;padding:1rem}
.versetz-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;width:100%;max-width:520px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.versetz-modal-header{display:flex;align-items:center;gap:.75rem;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid var(--border)}
.versetz-modal-icon{font-size:2rem;line-height:1}
.versetz-modal-header h3{margin:0;font-size:1.1rem;font-weight:700}
.versetz-modal-body{padding:1.25rem 1.5rem}
.versetz-info-box{background:var(--accent-light);border:1px solid var(--accent);border-radius:10px;padding:1rem 1.1rem;font-size:.9rem;color:var(--accent-dark)}
.versetz-modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.75rem}
.btn-warning{background:var(--warning);color:#fff;font-weight:700}
.btn-warning:hover{background:var(--accent-dark)}

/* ── ZEUS-Vorschau (Übernahme vorbereiten) als Fenster ──────────────────── */
.zeus-modal{max-width:860px}
.zeus-modal-close{margin-left:auto;background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--text-muted)}
.zeus-modal-close:hover{color:var(--text)}
.zeus-modal .bulk-modal-body .alert:last-child{margin-bottom:0}

/* ── Bulk-Verwalten Modal ────────────────────────────────────────────────── */
.bulk-modal-backdrop{position:fixed;inset:0;z-index:1200;background:rgba(8,15,36,.6);display:flex;align-items:center;justify-content:center;padding:1rem}
.bulk-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;width:100%;max-width:680px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
/* Formular muss die Flex-Spalte fortsetzen, sonst wächst der Body ungebremst
   und die Fußzeile (»Ausführen«) rutscht unter den 90vh-Rand → abgeschnitten. */
.bulk-modal>form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.bulk-modal-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid var(--border);flex-shrink:0}
.bulk-modal-header h3{margin:0;font-size:1.1rem;font-weight:700}
.bulk-modal-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1.25rem 1.5rem;flex:1 1 auto;min-height:0}
.bulk-modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.75rem;flex-shrink:0}
.bulk-class-row{border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;margin-bottom:.75rem;transition:border-color .15s,background .15s}
.bulk-class-row.is-loeschen{border-color:var(--danger);background:var(--danger-light)}
.bulk-class-row-head{font-weight:700;font-size:.95rem;margin-bottom:.65rem;display:flex;align-items:center;flex-wrap:wrap;gap:.3rem}
.bulk-class-meta{font-size:.8rem;color:var(--text-muted);font-weight:400}
.bulk-radio-group{display:flex;gap:.45rem;flex-wrap:wrap}
.bulk-radio-group label{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border-radius:8px;border:1px solid var(--border);font-size:.83rem;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s;user-select:none}
.bulk-radio-group label:hover{border-color:var(--primary-light)}
.bulk-radio-group label.is-selected{border-color:var(--primary);background:var(--primary);color:#fff}
.bulk-radio-group label.opt-loeschen.is-selected{border-color:var(--danger);background:var(--danger);color:#fff}
.bulk-radio-group input[type=radio]{display:none}
.bulk-versetz-bar{display:flex;justify-content:flex-end;margin-bottom:1rem}
.bulk-versetz-all{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:9px;border:1px solid var(--warning);background:var(--warning);color:#fff;font-family:inherit;font-size:.86rem;font-weight:700;cursor:pointer;transition:filter .12s}
.bulk-versetz-all:hover{filter:brightness(1.06)}
.bulk-delete-warn{background:var(--danger-light);border:1px solid var(--danger);border-radius:10px;padding:1rem 1.1rem;margin-bottom:1rem;font-size:.9rem;color:var(--danger)}
.bulk-delete-warn ul{margin:.4rem 0 0 1.2rem;line-height:1.8}

/* ── Archiv-Kopieren Formular ────────────────────────────────────────────── */
.archiv-copy-form{display:flex;flex-direction:column;gap:.9rem}
.archiv-copy-form .form-group{display:flex;flex-direction:column;gap:.3rem}
.archiv-copy-form .form-group label{font-size:.88rem;font-weight:600;color:var(--text-muted)}

/* ── Listen-Hub ───────────────────────────────────────────────────────────── */
.listen-hub__header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.listen-hub__subtitle{margin:.35rem 0 0;color:var(--text-muted);max-width:760px}
.listen-hub__tabs{display:flex;gap:.75rem;flex-wrap:wrap}
.listen-hub__tab{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.05rem;border-radius:999px;text-decoration:none;font-weight:700;color:var(--primary);background:var(--bg-surface);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.listen-hub__tab.is-active{background:var(--accent);color:#1a2035;border-color:var(--accent);box-shadow:0 4px 14px rgba(245,166,35,.35)}
@media(max-width:720px){.listen-hub__header{flex-direction:column}}

/* ════════════════════════════════════════════════════════════════════════════
   Schüler/in – Sektion
   ════════════════════════════════════════════════════════════════════════════ */
.schueler-page{max-width:920px;margin:0 auto;padding:1.75rem 1.25rem 3rem}

/* Suchbereich */
.schueler-search-wrap{margin-bottom:1.75rem}
.schueler-search-card{background:var(--card-bg);border:1px solid var(--border-light);border-radius:14px;padding:1.5rem 1.5rem 1.25rem;box-shadow:0 2px 12px rgba(8,15,36,.07)}
.schueler-search-header{margin-bottom:1rem}
.schueler-search-title{margin:0 0 .25rem;font-size:1.45rem;font-weight:800;color:var(--dark)}
.schueler-search-sub{margin:0;font-size:.875rem;color:var(--text-muted)}
.schueler-search-field-wrap{position:relative}
.schueler-search-input{font-size:1.05rem;padding:.7rem 1rem;border-radius:10px}

/* Suchergebnis-Dropdown */
.schueler-search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card-bg);border:1px solid var(--border-light);border-radius:12px;box-shadow:0 8px 28px rgba(8,15,36,.13);z-index:400;max-height:320px;overflow-y:auto;padding:.4rem .45rem}
.schueler-result-item{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;padding:.55rem .65rem;border-radius:9px;border:none;background:transparent;cursor:pointer;font-family:inherit;font-size:.92rem;transition:background .12s}
.schueler-result-item:hover,.schueler-result-item:focus{background:var(--light-bg);outline:none}
.schueler-result-avatar{width:2.25rem;height:2.25rem;border-radius:9px;font-size:.75rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.schueler-result-avatar--m{background:var(--primary)}
.schueler-result-avatar--w{background:#be185d}
.schueler-result-info{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.schueler-result-name{font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schueler-result-class{font-size:.78rem;color:var(--text-muted)}
.schueler-results-empty{margin:0;padding:.9rem 1rem;font-size:.88rem;color:var(--text-muted);text-align:center}

/* Profil-Bar */
.schueler-profile-bar{display:flex;align-items:center;gap:1rem;background:var(--header-gradient);border-radius:14px;padding:1.1rem 1.35rem;margin-bottom:1.5rem;flex-wrap:wrap}
.schueler-profile-avatar{width:3rem;height:3rem;border-radius:12px;font-size:1.05rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;background:rgba(255,255,255,.18)}
.schueler-avatar--w{background:#be185d}
.schueler-avatar--m{background:var(--primary)}
.schueler-profile-info{flex:1;min-width:0}
.schueler-profile-name{margin:0;font-size:1.2rem;font-weight:800;color:#fff;line-height:1.25}
.schueler-profile-meta{margin:.2rem 0 0;font-size:.82rem;color:rgba(200,215,240,.85)}
.schueler-profile-actions{flex-shrink:0}
.schueler-profile-actions .btn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#fff;display:inline-flex;align-items:center;gap:.45rem}
.schueler-profile-actions .btn:hover{background:rgba(255,255,255,.24)}

/* Fach-Blöcke */
.schueler-subjects{display:flex;flex-direction:column;gap:1.25rem}
.schueler-subject-block{background:var(--card-bg);border:1px solid var(--border-light);border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(8,15,36,.06)}
.schueler-subject-header{display:flex;align-items:center;gap:1rem;background:linear-gradient(105deg,#080f24 0%,#0d1e50 60%,#162d78 100%);padding:.85rem 1.1rem;flex-wrap:wrap}
.schueler-subject-title-wrap{flex:1;min-width:0;display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap}
.schueler-subject-name{margin:0;font-size:1.05rem;font-weight:800;color:#fff}
.schueler-subject-class{font-size:.78rem;color:rgba(200,215,240,.8);white-space:nowrap}
.schueler-subject-avg-badge{flex-shrink:0;display:flex;align-items:baseline;gap:.3rem;background:rgba(255,255,255,.12);border-radius:8px;padding:.3rem .75rem}
.schueler-avg-label{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.08em}
.schueler-avg-value{font-size:1.3rem;font-weight:800;color:#f5a623}
.schueler-subject-avg-badge.grade-good .schueler-avg-value{color:#34d399}
.schueler-subject-avg-badge.grade-ok .schueler-avg-value{color:#fbbf24}
.schueler-subject-avg-badge.grade-bad .schueler-avg-value{color:#f87171}

/* Kategorien-Tabelle */
.schueler-cat-wrap{padding:.9rem 1.1rem .5rem;border-bottom:1px solid var(--border-light)}
.schueler-cat-table{width:100%;border-collapse:collapse;font-size:.86rem}
.schueler-cat-table th{padding:.35rem .65rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);background:var(--page-bg);border-bottom:1px solid var(--border-light);text-align:left}
.schueler-cat-table td{padding:.4rem .65rem;border-bottom:1px solid var(--border-light)}
.schueler-cat-table tr:last-child td{border-bottom:none}
.schueler-td-center{text-align:center}
.schueler-td-weight,.schueler-td-count{color:var(--text-muted)}
.schueler-td-avg{font-weight:700}
.grade-good{color:#059669}
.grade-ok{color:#b45309}
.grade-bad{color:#dc2626}
.schueler-td-grade{font-weight:700}

/* Chart */
.schueler-chart-wrap{padding:.9rem 1.1rem .5rem;border-bottom:1px solid var(--border-light)}
.schueler-chart-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin-bottom:.5rem}
.schueler-canvas{max-width:100%;border-radius:6px;border:1px solid var(--border-light);display:block}
.schueler-chart-legend{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:.45rem}
.schueler-legend-item{display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--text-muted)}
.schueler-legend-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}

/* Noten-Details */
.schueler-grades-details{padding:.75rem 1.1rem 1rem}
.schueler-grades-summary{cursor:pointer;font-size:.82rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;user-select:none;list-style:none;padding:.2rem 0}
.schueler-grades-summary::-webkit-details-marker{display:none}
.schueler-grades-summary::before{content:'▶ ';font-size:.7rem}
details.schueler-grades-details[open] .schueler-grades-summary::before{content:'▼ '}
.schueler-grades-table-wrap{overflow-x:auto;margin-top:.6rem}
.schueler-grades-table{width:100%;border-collapse:collapse;font-size:.86rem}
.schueler-grades-table th{padding:.35rem .65rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);background:var(--page-bg);border-bottom:1px solid var(--border-light);text-align:left;white-space:nowrap}
.schueler-grades-table td{padding:.4rem .65rem;border-bottom:1px solid var(--border-light)}
.schueler-grades-table tr:last-child td{border-bottom:none}
.schueler-td-date{white-space:nowrap;color:var(--text-muted);font-size:.82rem}
.schueler-td-cat{font-size:.82rem;color:var(--text-muted)}

/* Leer- und Ladezustände */
.schueler-empty{text-align:center;padding:4rem 1.5rem 3rem}
.schueler-empty-svg{width:80px;height:80px;color:var(--text-secondary);opacity:.45}
.schueler-empty-title{margin:.75rem 0 .4rem;font-size:1.1rem;font-weight:700;color:var(--text-muted)}
.schueler-empty-text{margin:0;font-size:.9rem;color:var(--text-secondary)}
.schueler-loading{padding:2rem;text-align:center;color:var(--text-muted);font-size:.92rem}
.schueler-error,.schueler-no-grades{padding:1.5rem;text-align:center;color:var(--text-muted);font-size:.88rem}


/* ===== 13-responsive.css ===== */
/* Tablet (600–1200 px) */
@media (min-width:600px) and (max-width:1200px){
    .schueler-page{padding:1.35rem 1rem 2.5rem}
    .schueler-search-input{font-size:16px;min-height:48px}
    .schueler-result-item{min-height:52px;font-size:0.95rem}
    .schueler-result-avatar{width:2.5rem;height:2.5rem;border-radius:10px;font-size:.8rem}
}

/* Mobil (< 600 px) */
@media (max-width:599px){
    .schueler-page{padding:1rem .75rem 2rem}
    .schueler-search-card{padding:1.1rem 1rem}
    .schueler-search-input{font-size:16px;min-height:48px}
    .schueler-profile-bar{padding:.9rem 1rem;gap:.75rem}
    .schueler-subject-header{padding:.75rem .9rem}
    .schueler-canvas{height:auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HANDY-STYLES (< 600 px) — Gesamte App Mobile-optimiert
   Ergänzt die bestehenden Tablet-Breakpoints (600–1200 px), die unberührt bleiben.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:599px){
    /* Basis */
    html,body{overflow-x:hidden}
    body{font-size:14px}
    .container{margin:.75rem auto;padding:0 .75rem 1rem}

    /* Header + Navigation */
    .main-header{padding:.55rem .65rem}
    .header-content{gap:.4rem;align-items:center}
    .header-brand{gap:.45rem;min-width:0}
    .logo{font-size:.95rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    .logo::before{font-size:.85rem}
    .nav-toggle{width:38px;height:38px;border-radius:10px;margin-left:.2rem}
    .nav-toggle span{width:16px}
    .user-info{gap:.35rem}
    .user-info .btn-sm{padding:.3rem .55rem;font-size:.7rem;min-height:34px;border-radius:7px}
    .user-info .btn-gear{width:34px;height:34px}
    .main-nav.is-open .nav-container{padding:.7rem .75rem .85rem;max-height:82vh}
    .nav-link{padding:.8rem .85rem;font-size:.9rem;border-radius:10px}

    /* Seitenkopf */
    .page-header{margin-bottom:1.2rem;gap:.65rem}
    .page-header h1{font-size:1.3rem}
    .page-header > div{gap:.4rem}
    .page-header > div .btn,
    .page-header > div a.btn{flex:1 1 100%;min-height:44px}

    /* Karten + Grids */
    .card{padding:.9rem;border-radius:11px;margin-bottom:1rem}
    .card-grid{grid-template-columns:1fr;gap:1rem}
    .dashboard-card{padding:1.2rem 1rem}
    .dashboard-card .icon{font-size:2.1rem;margin-bottom:.6rem}
    .dashboard-card h3{font-size:.95rem}
    .dashboard-plusminus-grid{grid-template-columns:1fr;gap:.9rem}
    .dashboard-plusminus-card{min-height:170px;aspect-ratio:auto;padding:1.1rem}
    .dashboard-stats-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
    .stat-box{padding:.85rem}
    .stat-box .stat-number{font-size:1.65rem}
    .stat-box .stat-label{font-size:.7rem}

    /* Buttons */
    .btn{min-height:42px;padding:.55rem 1rem;font-size:.88rem}
    .btn-sm{min-height:34px;padding:.32rem .7rem;font-size:.78rem}
    .btn-xl{min-height:48px;padding:.7rem 1.3rem;font-size:.98rem}

    /* Formulare */
    .form-row{grid-template-columns:1fr;gap:.8rem}
    .form-control{font-size:16px;padding:.65rem .75rem;min-height:44px}
    select.form-control{min-height:44px}
    textarea.form-control{min-height:90px}

    /* Tabellen */
    .data-table{font-size:.82rem;display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .data-table th,
    .data-table td{padding:.55rem .55rem}
    .data-table .actions{flex-wrap:wrap;gap:.35rem}

    /* Alerts */
    .alert{padding:.7rem .9rem;font-size:.85rem}

    /* === Klassen-Overview === */
    .archiv-cards{gap:.75rem}
    .archiv-card{min-width:0;max-width:100%;width:100%;padding:1rem 1.1rem}
    .archiv-intro{padding:1.1rem;gap:.85rem;flex-direction:column;text-align:center}
    .archiv-intro-icon{font-size:2.4rem}
    .archiv-detail-header{flex-direction:column;gap:.75rem}
    .archiv-class-title{font-size:1.15rem}
    .archiv-tabs{gap:.3rem;padding-bottom:.35rem;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
    .archiv-tab{padding:.45rem .8rem;font-size:.82rem;white-space:nowrap;flex-shrink:0}

    /* === Noteneingabe === */
    .grades-entry-container{padding:.75rem 0 4rem}
    .grades-header{flex-direction:column;align-items:stretch;padding:.85rem;gap:.75rem}
    .grades-selectors{flex-direction:column;align-items:stretch;gap:.6rem;width:100%}
    .grades-select,.grades-select--topic{min-width:100%;max-width:100%;font-size:16px;min-height:44px;padding:.55rem .7rem}
    .grades-nav-arrows{flex-direction:row;width:100%;gap:.4rem}
    .grades-nav-arrows .btn-icon{flex:1 1 0;min-height:40px;width:auto;height:auto}
    .grades-actions{width:100%;justify-content:stretch;flex-wrap:wrap;gap:.35rem}
    .grades-actions .btn-icon{flex:1 1 calc(50% - .18rem);min-height:40px;width:auto;height:auto}
    .grades-main{grid-template-columns:1fr;gap:.85rem;min-height:0}
    .grades-exams-panel,.grades-students-panel{padding:.85rem}
    .exams-table th,.exams-table td{padding:.5rem .45rem;font-size:.78rem}
    .exam-row.new-exam .exam-topic-input{font-size:16px;min-height:44px}
    .exam-date-display{min-height:2.4rem;font-size:.78rem;padding:.4rem .55rem}
    .students-grid{grid-template-columns:1fr;gap:.5rem}
    .student-grade-row{padding:.4rem .55rem;gap:.45rem}
    .student-name{font-size:.92rem}
    .grade-input{width:68px;padding:.5rem .45rem;font-size:1rem}
    .grade-input-wrapper{gap:.3rem}
    .final-grade-display{padding:1rem .9rem .85rem}
    .final-grade-value{font-size:1.85rem}
    .final-grade-student-name{font-size:1.1rem}

    /* Bewertungen */
    .interactive-grading-widget{padding:.55rem .7rem}
    .criterion-header{flex-direction:column;align-items:flex-start;gap:.25rem}
    .criterion-name{font-size:.95rem}
    .point-btn{width:40px;height:40px;min-width:40px;min-height:40px;font-size:.92rem}
    .point-buttons{gap:.32rem;padding:.45rem}
    .grading-controls{gap:.4rem;flex-wrap:wrap}
    .override-input-wrapper{width:66px}
    .na-btn{min-height:38px;padding:.4rem .55rem;font-size:.82rem}
    #criteria-container.criteria-grid-view{grid-template-columns:1fr;gap:.5rem}

    /* Plus/Minus */
    .plusminus-active-header{flex-direction:column;gap:.75rem}
    .plusminus-active-actions{justify-content:flex-start;width:100%}
    .plusminus-active-actions .btn{flex:1 1 auto}
    .rating-cell{width:44px;height:32px;font-size:.78rem}

    /* === Tools: Startseite === */
    .tools-page{padding:1rem .75rem 1.5rem;max-width:100%}
    .tools-page-header{margin-bottom:1.15rem}
    .tools-page-title{font-size:1.35rem}
    .tools-page-sub{font-size:.85rem}
    .tools-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
    .tool-card{padding:1.2rem .6rem 1.1rem;border-radius:14px;gap:.3rem;min-height:122px;-webkit-tap-highlight-color:rgba(24,69,200,.12)}
    .tool-card:active{transform:scale(.97)}
    .tool-icon{font-size:2.2rem}
    .tool-label{font-size:.9rem;line-height:1.2}
    .tool-desc{font-size:.7rem;line-height:1.25}

    /* === Tools: Vollbild-Rahmen === */
    .tool-fs-bar{
        padding:.55rem max(.6rem,env(safe-area-inset-right)) .55rem max(.6rem,env(safe-area-inset-left));
        padding-top:max(.55rem,env(safe-area-inset-top));
        gap:.6rem;
        min-height:48px
    }
    .tool-back{padding:.4rem .75rem;font-size:.82rem;min-height:38px;border-radius:8px}
    .tool-fs-title{font-size:.98rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
    .tool-fs-body{
        padding:1rem max(.75rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));
        max-width:100%
    }
    .tool-fs-centered{padding-top:1.25rem;gap:1.1rem}
    .tool-fs .form-control,.tool-fs select{font-size:16px;min-height:44px}
    .tool-fs .btn-xl{min-height:48px;padding:.7rem 1.25rem;font-size:.98rem}
    .settings-bar{gap:.75rem;margin-bottom:1rem}
    .btn-row{gap:.45rem}
    .row-gap{gap:.75rem}

    /* QR-Generator */
    .tool-fs-body--qr{padding-top:.75rem}
    .qr-tool-header{margin-bottom:1rem}
    .qr-tool-lead{font-size:.88rem;line-height:1.5}
    .qr-tool-grid{grid-template-columns:1fr;gap:.9rem}
    .qr-panel,.qr-preview{padding:1rem .95rem;gap:.75rem}
    .qr-panel-title{font-size:.95rem}
    .qr-options{grid-template-columns:1fr;gap:.6rem}
    .qr-textarea{min-height:6rem;font-size:16px}
    .qr-color-input{max-width:78px;height:40px}
    .qr-actions{gap:.45rem}
    .qr-actions .btn{min-width:0;flex:1 1 auto;min-height:44px;font-size:.85rem;padding:.55rem .75rem}
    .qr-placeholder{min-height:220px}
    .qr-placeholder-svg{width:90px;height:90px}
    .qr-placeholder-title{font-size:.98rem}
    .qr-placeholder-text{font-size:.82rem}
    .qr-link-display{font-size:.76rem;padding:.55rem .75rem}

    /* Timer */
    .timer-display{font-size:3.5rem}
    .timer-digit-input{width:5rem;font-size:1.7rem;min-height:46px;padding:.35rem;border-radius:10px}
    .timer-colon{font-size:2rem;padding-bottom:.45rem}
    .timer-presets{gap:.35rem}
    .timer-presets .btn{min-height:40px;padding:.4rem .7rem;font-size:.8rem;min-width:48px}
    .timer-bar-wrap{max-width:100%;height:11px}
    #tool-timer .tool-timer-wrap{gap:1rem;max-width:100%}
    #tool-timer .timer-settings-panel{padding:.8rem .9rem .95rem;border-radius:14px}
    #tool-timer .timer-digit-input{width:4.5rem;font-size:1.6rem;border-radius:10px}
    #tool-timer .timer-colon{font-size:1.8rem;padding-bottom:.45rem}
    #tool-timer .timer-focus-card{padding:1.25rem .95rem 1.15rem;border-radius:18px}
    #tool-timer .timer-display-stack{min-height:5rem}
    #tool-timer .timer-display-ring{width:min(14rem,72vw);height:min(14rem,72vw);max-width:210px;max-height:210px}
    #tool-timer .timer-display{font-size:clamp(2.6rem,13vw,3.8rem)}
    #tool-timer .timer-bar-wrap--tool{height:11px}

    /* Glücksrad */
    .wheel-layout{flex-direction:column;gap:1rem}
    .wheel-sidebar{width:100%;gap:.75rem}
    .wheel-student-list{max-height:min(30vh,260px)}
    .wheel-check{min-height:42px;padding:.35rem .55rem;font-size:.88rem;border-radius:7px}
    .wheel-check input{width:18px;height:18px}
    .wheel-stage{width:100%}
    .wheel-canvas-wrap{width:100%;display:flex;justify-content:center}
    #wheelCanvas{width:min(88vw,380px)!important;height:min(88vw,380px)!important;max-width:100%}
    /* Wrap ist hier 100 % breit → Zeiger an der Canvas-Kante ausrichten, nicht am Wrap */
    .wheel-pointer-right{right:calc(50% - min(44vw,190px) - min(88vw,380px)*.028);width:calc(min(88vw,380px)*.128);height:auto}
    .winner-box{padding:2rem 2.25rem;max-width:88vw}
    .winner-name{font-size:1.85rem}

    /* Würfel */
    .dice-count-btns{gap:.3rem;flex-wrap:wrap;justify-content:center}
    .dice-count-chip{min-width:2.6rem;min-height:2.6rem;padding:.4rem .6rem;font-size:.95rem;border-radius:10px}
    .dice-focus-card{padding:1.3rem .9rem 1.15rem;border-radius:18px}
    .dice-stage{min-height:7rem}
    .dice-result{gap:.6rem}
    .die{--die-size:clamp(2.8rem,17vw,3.9rem)}
    .dice-sum{margin-top:.85rem;padding:.35rem .85rem}
    .dice-sum-value{font-size:1.3rem}

    /* Zufallsgruppen + Partnertool — auf Handy durchgehender Seiten-Scroll,
       nicht zwei verschachtelte Scroller. Sonst drueckt die linke Spalte
       das Ergebnis-Panel auf 0 Hoehe und die Gruppen sind unsichtbar. */
    #tool-groups.tool-fs.is-active,
    #tool-partner.tool-fs.is-active{overflow-y:auto;max-height:none}
    #tool-groups.is-active>.tool-fs-body.grp-layout,
    #tool-partner.is-active>.tool-fs-body.grp-layout{flex:0 0 auto;min-height:0;overflow:visible;padding:.5rem .65rem 1rem}
    .grp-layout{flex-direction:column;min-height:0;height:auto}
    .grp-pane-left{width:100%;border-right:none;border-bottom:1px solid var(--border);padding:.85rem .9rem;gap:.8rem;overflow-y:visible;flex-shrink:1}
    .grp-pane-right{padding:.75rem .85rem;overflow:visible;min-height:0}
    .grp-pane-right-inner{flex:0 0 auto;min-height:0}
    .grp-results-panel{min-height:0;overflow:visible}
    .grp-results-grid-wrap{flex:0 0 auto;min-height:0;overflow:visible;padding-right:0}
    .grp-intro-title{font-size:1rem}
    .grp-intro-text{font-size:.82rem}
    .grp-card-panel{padding:.85rem .9rem;border-radius:12px;gap:.7rem}
    .grp-count-btn{width:42px;height:42px;border-radius:10px;font-size:1.15rem}
    .grp-count-input{width:64px;font-size:1.05rem;min-height:42px}
    .grp-mode-tab{min-height:42px;padding:.45rem .7rem;font-size:.82rem}
    .grp-student-list{max-height:min(28vh,220px)}
    .grp-student-row{min-height:42px;padding:.4rem .55rem}
    .grp-student-name{font-size:.85rem}
    .grp-absent-btn{min-height:36px;padding:.3rem .65rem;font-size:.74rem}
    .grp-settings-btn{min-height:44px;padding:.6rem .95rem;font-size:.88rem}
    .grp-actions{gap:.5rem}
    .grp-actions .btn{min-height:46px;font-size:.92rem}
    .grp-result--cols-3{grid-template-columns:1fr;gap:.6rem}
    .grp-result-toolbar{padding:.65rem .8rem;gap:.5rem}
    .grp-result-title{font-size:.85rem}
    .grp-result-toolbar-actions{width:100%;justify-content:flex-start}
    .grp-result-toolbar-actions .btn{flex:1 1 auto;min-height:38px;padding:.35rem .6rem;font-size:.78rem}
    .grp-card-head{padding:.65rem .75rem .5rem}
    .grp-card-num{min-width:1.8rem;height:1.8rem;font-size:.78rem}
    .grp-card-label{font-size:.95rem}
    .grp-card-members{padding:0 .75rem .75rem}
    .grp-member-chip{padding:.4rem .55rem;font-size:.82rem}
    .grp-member-initial{width:1.45rem;height:1.45rem;font-size:.65rem}
    .grp-placeholder{min-height:min(40vh,300px);padding:1.25rem 1rem}
    .grp-placeholder-svg{width:80px;height:80px}
    .grp-placeholder-title{font-size:1rem}
    .grp-placeholder-text{font-size:.82rem}
    .grp-placeholder-tips{font-size:.76rem}
    .ptn-card{padding:.8rem .9rem;gap:.65rem;flex-direction:column;align-items:stretch}
    .ptn-card-badge{width:24px;height:24px;font-size:.72rem}
    .ptn-members{flex-direction:column;align-items:stretch;gap:.25rem}
    .ptn-link{display:none}
    .ptn-member{font-size:.85rem}

    /* Einstellungs-Modal (Exklusionen / Paare) */
    .excl-modal-backdrop{padding:.5rem}
    .excl-modal{max-height:94vh;border-radius:12px}
    .excl-modal-header{padding:.85rem 1rem;gap:.65rem}
    .excl-modal-title{font-size:1rem}
    .excl-modal-rule-summary{font-size:.74rem}
    .excl-modal-x{width:40px;height:40px;font-size:1.2rem}
    .excl-modal-lead{padding:.7rem 1rem;font-size:.8rem}
    .excl-modal-legend{padding:.5rem 1rem;gap:.5rem}
    .excl-modal-legend-item{font-size:.72rem}
    .excl-modal-columns{grid-template-columns:1fr;max-height:none}
    .excl-modal-col{border-right:none;border-bottom:1px solid var(--border-light)}
    .excl-modal-col--right{border-bottom:none}
    .excl-modal-col-head{padding:.5rem .8rem;font-size:.68rem}
    .excl-modal-left-list,
    .excl-modal-right-list{padding:.45rem .55rem;max-height:min(38vh,320px);min-height:140px}
    .excl-modal-pick{padding:.5rem .6rem;font-size:.84rem;min-height:44px;border-radius:9px}
    .excl-modal-pick-initial{width:1.8rem;height:1.8rem;font-size:.64rem}
    .excl-modal-footer{padding:.7rem 1rem}
    .pair-row{padding:.5rem .65rem;min-height:44px;gap:.45rem}
    .pair-btn{width:40px;height:40px;min-width:40px;min-height:40px;font-size:1.05rem;border-radius:9px}
    .pair-btns{gap:.35rem}

    /* Zufallsreihenfolge */
    .tool-fs-body--order{max-width:100%}
    .order-lead{font-size:.85rem}
    .order-list{columns:1;gap:.5rem}
    .order-list li{padding:.45rem .55rem;font-size:.88rem}
    .order-num{width:26px;height:26px;font-size:.72rem}
    .order-panel{gap:1rem}
    .order-current-card{min-height:8rem;padding:1.25rem .9rem;border-radius:16px}
    .order-current-name{font-size:clamp(1.15rem,5.5vw,1.55rem)}
    .order-actions{gap:.5rem}
    .order-actions .btn{flex:1 1 auto;min-height:44px;font-size:.88rem}
    .order-past-list{max-height:min(32vh,240px)}

    /* Stoppuhr */
    .sw-focus-card{padding:1.3rem .9rem 1.1rem;border-radius:18px}
    .sw-display-stack{min-height:5rem}
    .sw-actions{flex-wrap:wrap;justify-content:center;gap:.5rem}
    .sw-actions .btn{flex:1 1 auto;min-height:44px;font-size:.9rem}
    .sw-laps-panel{padding:.75rem .8rem .85rem;border-radius:14px}
    .sw-laps{max-height:min(35vh,240px)}
    .sw-lap{padding:.45rem .7rem;gap:.5rem}
    .sw-lap-t{font-size:1.02rem}
    .sw-lap-total{font-size:.72rem}

    /* Zufallszahl */
    .random-settings-panel{padding:.85rem .9rem 1rem;border-radius:14px}
    .random-range{gap:.75rem}
    /* Die Eingabefelder brauchen 16px, sonst zoomt iOS beim Antippen hinein. */
    .random-range .timer-digit-input{width:4.75rem;font-size:16px;min-height:44px}
    .random-range-dash{font-size:1.4rem;padding-bottom:.75rem}
    .random-focus-card{padding:1.2rem .9rem;border-radius:18px}
    .random-stage{min-height:6rem}
    .random-history{gap:.35rem;max-width:100%}
    .rn-hist{padding:.2rem .55rem;font-size:.9rem}
    .random-actions{gap:.5rem}

    /* Punktetafel */
    .score-add-row{flex-direction:column;align-items:stretch;gap:.5rem}
    .score-add-row .form-control{font-size:16px;min-height:44px}
    .score-add-row .btn{min-height:44px}
    .score-board{max-width:100%;gap:.55rem}
    .score-card{padding:.75rem .85rem;gap:.55rem;border-radius:12px}
    .score-rank{font-size:1.25rem;width:32px}
    .score-name{font-size:.98rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .score-controls{gap:.4rem}
    .score-val{font-size:1.45rem;min-width:2.4rem}
    .score-btn{width:36px;height:36px;font-size:1rem;border-radius:8px}
    .score-del{font-size:.78rem}

    /* Lautstärke-Ampel */
    .noise-ampel{padding:1.1rem;gap:.75rem;border-radius:16px}
    .ampel-light{width:64px;height:64px}
    .noise-bar-wrap{width:min(100%,320px);height:14px}
    .noise-label{font-size:1.1rem}
    .noise-thresholds{font-size:.8rem}
    .noise-thresholds input,
    .noise-thresholds select{font-size:16px;min-height:40px}

    /* Zufallsfrage */
    .question-layout{flex-direction:column;gap:1rem}
    .question-left,.question-right{min-width:0;width:100%}
    .question-card{min-height:180px;padding:1.25rem;border-radius:14px}
    .question-card-text{font-size:1.05rem}
    .question-card-hint{font-size:.88rem}
    .question-card-meta{font-size:.76rem;margin-top:.85rem}
    .question-left textarea{font-size:16px;min-height:8rem}

    /* Pomodoro */
    .pom-mode-tabs{flex-wrap:wrap;border-radius:8px}
    .pom-tab{flex:1 1 50%;min-height:42px;padding:.5rem .75rem;font-size:.82rem}
    .pom-rounds{font-size:.95rem}
    .pom-settings{gap:1rem}

    /* Archiv-Kopieren Modal */
    .versetz-modal,.bulk-modal{border-radius:14px}
    .versetz-modal-header,.bulk-modal-header{padding:1rem 1.1rem .75rem}
    .versetz-modal-body,.bulk-modal-body{padding:1rem 1.1rem}
    .versetz-modal-footer,.bulk-modal-footer{padding:.75rem 1.1rem;flex-direction:column-reverse;gap:.5rem}
    .versetz-modal-footer .btn,.bulk-modal-footer .btn{width:100%}
    .bulk-class-row{padding:.8rem .9rem}
    .bulk-radio-group label{font-size:.78rem;padding:.3rem .6rem}

    /* Passwort-Modal */
    .pw-modal{max-width:calc(100vw - 1rem)}
    .pw-modal-header{padding:.9rem 1rem}
    .pw-modal-body{padding:1.1rem}
    .pw-modal-footer{padding:.85rem 1rem;flex-direction:column-reverse;gap:.45rem}
    .pw-modal-footer .btn{width:100%}

    /* Listen-Hub */
    .listen-hub__tabs{flex-direction:column;align-items:stretch;width:100%}
    .listen-hub__tab{width:100%;padding:.7rem .95rem;font-size:.9rem}

    /* Touch-Feedback */
    .btn:active,
    .tool-card:active,
    .nav-link:active{transform:scale(.98)}
}

/* Sehr schmale Handys (< 380 px) — zusätzliche Feinjustierung */
@media (max-width:379px){
    .tools-grid{grid-template-columns:1fr;gap:.65rem}
    .tool-card{min-height:100px;padding:1rem .7rem .9rem;flex-direction:row;justify-content:flex-start;text-align:left;gap:.75rem}
    .tool-icon{font-size:1.85rem}
    .tool-label{font-size:.92rem}
    .tool-desc{font-size:.72rem;flex:1}
    .dashboard-stats-grid{grid-template-columns:1fr}
    .user-name{display:none}
    .die{--die-size:2.6rem}
    .timer-display{font-size:3rem}
    .qr-actions .btn{flex:1 1 100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HANDY-NAVIGATION (< 600 px) — Schublade statt Aufklappmenü
   ═══════════════════════════════════════════════════════════════════════════

   Bis hierher war das Menü auf dem Handy ein Akkordeon: Der Balken klappte
   nach unten auf und schob den Seiteninhalt weg. Das ist das Muster von
   früher — es verdeckt die Seite halb, die Höhe springt, und bei zehn
   Einträgen scrollt man im Menü und in der Seite zugleich.

   Jetzt fährt eine Schublade von links über die Seite, dahinter verdunkelt
   ein Verdunkler den Rest. Von links, weil der Hamburger links im Kopf sitzt.

   ⚠️ NUR bis 599 px. Tablet und PC (der 900-px-Block in
   06-responsive-legacy.css) bleiben ausdrücklich unberührt — dort ist das
   Akkordeon gewollt.

   Kein neues Markup und kein neues JavaScript nötig: `.nav-overlay`,
   `.nav-mobile-head` und `.nav-close` stehen längst in views/navigation.php,
   und assets/app.js bedient sie bereits (Escape, Klick daneben, Schließen
   beim Seitenwechsel, `body.nav-open`). Sie waren bisher nur ausgeblendet.

   Zur Spezifität: Mehrere Regeln oben in dieser Datei und in
   06-responsive-legacy.css greifen über `.main-nav.is-open .nav-container`
   (0,3,0) auf `padding` und `max-height` zu. Ein schlichtes `.nav-container`
   (0,1,0) käme dagegen nicht an — beide Werte stehen deshalb unten noch
   einmal in der `.is-open`-Regel.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width:599px){

    /* Der Navigationsbalken beansprucht keine eigene Höhe mehr: Die Schublade
       liegt fixiert über der Seite, der Inhalt beginnt direkt unter dem Kopf.
       Dessen eigene Unterkante (2 px Akzent) bleibt die sichtbare Trennung. */
    .main-nav{
        background:transparent;
        border-bottom:0;
        box-shadow:none;
    }

    /* Der Hamburger muss UNTER den Verdunkler. Mit seinem Standardwert (140)
       läge er sonst über der offenen Schublade und säße mitten in deren
       Kopfzeile auf dem Wort „Menü". Zum Schließen gibt es das × und den
       Verdunkler. */
    .nav-toggle{z-index:110}

    /* Verdunkler — im Markup ein <button>, deshalb Rahmen und Innenabstand
       zurücksetzen. `visibility` wird mit animiert, damit die Fläche im
       geschlossenen Zustand keine Berührungen abfängt. */
    .nav-overlay{
        display:block;
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        inset:0;
        z-index:120;
        width:100%;
        margin:0;
        padding:0;
        border:0;
        background:rgba(8,15,36,.5);
        -webkit-backdrop-filter:blur(2px);
        backdrop-filter:blur(2px);
        opacity:0;
        visibility:hidden;
        cursor:pointer;
        transition:opacity .24s ease,visibility .24s ease;
    }

    .main-nav.is-open .nav-overlay{
        opacity:1;
        visibility:visible;
    }

    /* Die Schublade selbst. `overscroll-behavior:contain` verhindert, dass
       das Wischen am Ende der Liste die Seite dahinter mitscrollt. Die
       `env()`-Werte halten Inhalt aus der Kamerakerbe und der Wischleiste
       heraus — ohne Notch sind sie 0 und die Vorgabewerte greifen. */
    .nav-container{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        right:auto;
        z-index:130;
        width:min(20rem,84vw);
        max-width:none;
        margin:0;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:.25rem;
        background:linear-gradient(180deg,#ffffff 0%,#f7fafd 100%);
        border:0;
        border-radius:0 20px 20px 0;
        box-shadow:18px 0 44px rgba(8,15,36,.28);
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        opacity:1;
        visibility:hidden;
        transform:translateX(-100%);
        transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility .28s ease;
    }

    .main-nav.is-open .nav-container{
        transform:translateX(0);
        visibility:visible;
        opacity:1;
        max-height:none;
        padding:max(.75rem,env(safe-area-inset-top)) .8rem max(1rem,env(safe-area-inset-bottom)) max(.8rem,env(safe-area-inset-left));
    }

    /* Kopfzeile der Schublade — im Akkordeon war sie ausgeblendet, weil es
       dort nichts zu schließen gab. */
    .nav-mobile-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.75rem;
        padding:.1rem .15rem .65rem;
        margin-bottom:.4rem;
        border-bottom:1px solid var(--border-light);
        flex-shrink:0;
    }

    .nav-mobile-title{
        font-size:1.05rem;
        font-weight:800;
        color:var(--dark);
        letter-spacing:-.02em;
    }

    .nav-close{
        width:40px;
        height:40px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
        border:1px solid var(--border-light);
        border-radius:12px;
        background:#fff;
        color:var(--text-muted);
        font-size:1.5rem;
        line-height:1;
        cursor:pointer;
        transition:background .18s ease,color .18s ease,border-color .18s ease;
    }

    .nav-close:active{
        background:#f1f6fc;
        color:var(--dark);
        border-color:var(--accent-light);
    }

    /* Einträge als Zeilen mit 48 px Mindesthöhe — die Größe, ab der ein Ziel
       mit dem Daumen sicher zu treffen ist. */
    .nav-link{
        display:flex;
        align-items:center;
        gap:.7rem;
        width:100%;
        min-height:48px;
        padding:.7rem .85rem;
        border:0;
        border-radius:12px;
        font-size:.95rem;
        font-weight:600;
        color:var(--dark-text);
        text-transform:none;
        letter-spacing:0;
        flex-shrink:0;
    }

    .nav-link--icon{
        min-width:0;
        justify-content:flex-start;
        gap:.7rem;
        padding:.7rem .85rem;
    }

    /* Die aktuelle Seite: gefüllte Zeile mit Akzentbalken links. Der Balken
       ist ein innerer Schatten statt eines Rahmens — so folgt er der Rundung
       und verschiebt nichts. */
    .nav-link.active{
        background:linear-gradient(90deg,#fff4e0 0%,#fff9f0 100%);
        color:var(--accent-dark);
        font-weight:700;
        box-shadow:inset 3px 0 0 var(--accent);
    }

    /* Die Einträge blenden sich nacheinander ein — nur über `opacity`,
       bewusst nicht über `transform`: `.nav-link:active{transform:scale(.98)}`
       weiter oben hat weniger Spezifität und würde sonst wirkungslos, das
       Antippen verlöre seine Rückmeldung. */
    .nav-container .nav-link{
        opacity:0;
        transition:opacity .22s ease,background .2s ease,color .2s ease,transform .12s ease;
    }

    .main-nav.is-open .nav-link{opacity:1}

    /* Kind 1 ist die Kopfzeile, der erste Eintrag ist also nth-child(2). */
    .main-nav.is-open .nav-link:nth-child(3){transition-delay:.04s}
    .main-nav.is-open .nav-link:nth-child(4){transition-delay:.07s}
    .main-nav.is-open .nav-link:nth-child(5){transition-delay:.10s}
    .main-nav.is-open .nav-link:nth-child(6){transition-delay:.13s}
    .main-nav.is-open .nav-link:nth-child(7){transition-delay:.16s}
    .main-nav.is-open .nav-link:nth-child(8){transition-delay:.19s}
    .main-nav.is-open .nav-link:nth-child(9){transition-delay:.21s}
    .main-nav.is-open .nav-link:nth-child(n+10){transition-delay:.23s}
}

/* Wer Bewegung reduziert haben will, bekommt die Schublade ohne Fahrt und
   ohne Staffelung — sie erscheint und verschwindet schlicht. */
@media (max-width:599px) and (prefers-reduced-motion:reduce){
    .nav-container,
    .nav-overlay,
    .nav-container .nav-link{transition:none}

    .main-nav.is-open .nav-link:nth-child(n){transition-delay:0s}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HANDY-DURCHGANG (< 600 px) — abgeschnittene Inhalte und Berührflächen
   ═══════════════════════════════════════════════════════════════════════════

   Gemessen am 28.08.2026 mit einem Kopflos-Browser bei 390 px über alle
   Ansichten: Es gab zwei wiederkehrende Fehlerbilder.

   1) Inhalt lag AUSSERHALB des Bildschirms und war nicht erreichbar — nicht
      etwa scrollbar, sondern von `html,body{overflow-x:hidden}` (Zeile 25)
      stillschweigend abgeschnitten. Bis zu 478 px Breite fehlten so.

      Ursache ist fast immer `min-width:auto` an Grid- und Flex-Kindern: Ein
      solches Kind darf nicht unter seine Mindestinhaltsbreite schrumpfen,
      also wächst stattdessen die Spur — und die Karte ragt aus der Seite.
      In `views/klassen/categories.php` wurde die Karte dadurch 875 px breit
      auf einem 382-px-Schirm.

   2) Berührflächen unter 40 px. Apple empfiehlt 44 pt, Google 48 dp;
      `.btn-sm` stand auf 34 px, Ankreuzfelder auf 13 px.

   ⚠️ Wieder NUR bis 599 px — Tablet und PC bleiben unberührt.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width:599px){

    /* ── 1) Schrumpfen erlauben ──────────────────────────────────────────
       Ohne `min-width:0` bläht ein einziges breites Kind (eine Tabelle mit
       `min-width:640px`, eine nicht umbrechende Leiste) den ganzen Zweig auf.
       Gesetzt wird es an den Grid-/Flex-Behältern, die in der Messung als
       Verursacher auftraten, nicht pauschal an alles — pauschal würde es auch
       dort greifen, wo die Mindestbreite gewollt ist. */
    .category-lab > *,
    .category-workbench > *,
    .category-form-grid > *,
    .category-copy-grid > *,
    .card-grid > *,
    .dashboard-plusminus-grid > *,
    .listen-hub > *{
        min-width:0;
    }

    /* Leisten, die bewusst nicht umbrechen, scrollen jetzt selbst, statt ihre
       Karte auseinanderzudrücken. */
    .category-flow-bar,
    .category-lab-stats{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
    }

    /* ── 2) Berührflächen ────────────────────────────────────────────────
       40 px statt 34. Nicht 44: Die Knöpfe stehen oft zu dritt in einer
       Tabellenzeile, und 44 px sprengen dort die Zeilenhöhe. 40 px sind der
       größte Wert, der die vorhandenen Zeilen nicht umbaut.
       Der Kopf bleibt ausgenommen — `.user-info .btn-sm` (Zeile 38) ist
       spezifischer und behält seine 34 px, dort ist die Dichte gewollt. */
    .btn-sm{min-height:40px;padding:.42rem .8rem;font-size:.78rem}
    .btn-icon{min-width:40px;min-height:40px}

    /* `.btn` steht auf `white-space:nowrap` (02-layout.css:378). Auf breiten
       Schirmen richtig, auf dem Handy ragen lange Beschriftungen wie
       „Accounts anlegen / zurücksetzen" damit aus ihrem Behälter heraus.
       Sie dürfen hier umbrechen — in Tabellen bleibt es bei nowrap, dort
       wird ohnehin waagerecht gescrollt und ein Umbruch würde die Zeilen
       unruhig machen. */
    .btn{white-space:normal;max-width:100%}
    .data-table .btn,
    .table .btn{white-space:nowrap}

    /* Kartenköpfe mit Titel und Knopf: umbrechen statt überstehen. */
    .card-header{flex-wrap:wrap}

    /* ── 3) Hinweis, dass eine Tabelle seitlich weitergeht ───────────────
       Eine waagerecht scrollbare Tabelle sieht auf dem Handy aus wie eine
       abgeschnittene: Es fehlt jedes Zeichen, dass rechts noch Spalten
       stehen. Die vier Verläufe sind der bekannte Scroll-Schatten-Kniff und
       brauchen kein JavaScript:

         - die beiden linearen Verläufe (weiß → durchsichtig) liegen mit
           `background-attachment:local` AUF dem Inhalt und wandern beim
           Scrollen mit;
         - die beiden radialen liegen mit `scroll` FEST am Rand.

       Am linken Anschlag deckt der mitwandernde weiße Verlauf den linken
       Schatten ab, sichtbar bleibt nur der rechte — und umgekehrt. Der
       Schatten erscheint also genau dort, wo es noch weitergeht. */
    .table-scroll{
        scrollbar-width:thin;
        background:
            linear-gradient(to right,#ffffff 30%,rgba(255,255,255,0)) 0 0,
            linear-gradient(to right,rgba(255,255,255,0),#ffffff 70%) 100% 0,
            radial-gradient(farthest-side at 0 50%,rgba(8,15,36,.16),rgba(8,15,36,0)) 0 0,
            radial-gradient(farthest-side at 100% 50%,rgba(8,15,36,.16),rgba(8,15,36,0)) 100% 0;
        background-repeat:no-repeat;
        background-size:34px 100%,34px 100%,13px 100%,13px 100%;
        background-attachment:local,local,scroll,scroll;
    }

    .table-scroll::-webkit-scrollbar{height:5px}
    .table-scroll::-webkit-scrollbar-thumb{background:#b8cce8;border-radius:999px}

    /* Ankreuzfelder waren 13 px groß — mit dem Daumen praktisch nicht zu
       treffen. `accent-color` färbt sie in der Hausfarbe, ohne sie
       nachzubauen. */
    input[type="checkbox"],
    input[type="radio"]{
        width:22px;
        height:22px;
        accent-color:var(--primary);
        flex-shrink:0;
    }

    /* Ankreuzfelder in dichten Tabellenzeilen dürfen kleiner bleiben, sonst
       wächst jede Zeile um 9 px — dort trifft man ohnehin die ganze Zeile. */
    .data-table input[type="checkbox"],
    .nr-table input[type="checkbox"]{
        width:18px;
        height:18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   KLASSENVERWALTUNG auf dem Handy (< 600 px) — Karten statt Tabelle
   ═══════════════════════════════════════════════════════════════════════════

   Die Klassenliste hat fünf Spalten, und in der letzten stecken sieben Knöpfe
   („Schüler", „CSV", „Fächer", Bearbeiten, „Versetzen", Archivieren, Löschen)
   mit `min-width:280px`. Auf 390 px hieß das: seitlich wischen, um an das
   Erstelldatum und überhaupt an eine einzige Schaltfläche zu kommen.

   Eine Tabelle ist hier nicht die richtige Form. Es sind keine Werte, die man
   spaltenweise vergleicht, sondern Objekte, an denen man etwas tut. Deshalb
   wird je Klasse eine Karte daraus:

       ┌──────────────────────────────────┐
       │ 8b                     2025/2026 │   Name gross, Schuljahr als Chip
       │ 24 Schüler          seit 01.09.  │   die zwei Nebenangaben
       │ ──────────────────────────────── │
       │ [👥 Schüler] [📄 CSV] [⚙️ Fächer] │   Knöpfe umbrechen frei
       │ [✏️] [🎓 Versetzen] [🗄️] [🗑️]     │
       └──────────────────────────────────┘

   Umgesetzt allein über die Darstellung: Das Markup bleibt eine Tabelle und
   damit für Vorleseprogramme eine Tabelle. Die Kopfzeile verschwindet nur
   sichtbar; ihre Beschriftungen stehen als `data-label` an den Zellen und
   werden dort gebraucht, wo sonst der Bezug fehlte („seit …").

   ⚠️ Greift nur über `.data-table--klassen` — alle anderen `.data-table`
   bleiben Tabellen und scrollen wie bisher. Und nur bis 599 px; ab Tablet
   ist die Tabelle mit ihren fünf Spalten genau richtig.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width:599px){

    /* Die Hülle darf hier nichts mehr tun: kein Scrollen (es gibt nichts mehr
       zu scrollen) und keine Verlaufsschatten (die gehören an eine Tabelle). */
    .table-scroll--cards{
        overflow:visible;
        background:none;
    }

    .data-table--klassen{
        display:block;
        min-width:0;
        border:0;
        background:none;
        box-shadow:none;
        border-radius:0;
        font-size:1rem;
    }

    .data-table--klassen thead{
        /* Nicht `display:none` an einer Zeile, die Bedeutung trägt — hier ist
           es unschädlich, weil jede Zelle ihre Beschriftung als `data-label`
           mitführt und die Karte sie sichtbar macht. */
        display:none;
    }

    .data-table--klassen tbody{display:block}

    .data-table--klassen tr{
        display:grid;
        grid-template-columns:1fr auto;
        gap:.2rem .7rem;
        align-items:baseline;
        margin-bottom:.7rem;
        padding:.85rem .9rem;
        background:#fff;
        border:1px solid var(--border-light);
        border-radius:14px;
        box-shadow:0 1px 3px rgba(8,15,36,.05),0 4px 14px rgba(8,15,36,.05);
    }

    /* Zebrastreifen und Überfahr-Färbung ergeben zwischen Karten keinen Sinn. */
    .data-table--klassen tbody tr:nth-child(even),
    .data-table--klassen tbody tr:hover{background:#fff}

    .data-table--klassen td{
        display:block;
        border:0;
        padding:0;
    }

    .data-table--klassen td[data-label="Klasse"]{
        grid-column:1;
        grid-row:1;
        font-size:1.05rem;
        font-weight:700;
        color:var(--dark);
        letter-spacing:-.01em;
        min-width:0;
        overflow-wrap:anywhere;
    }

    /* Schuljahr als ruhiger Chip oben rechts. */
    .data-table--klassen td[data-label="Schuljahr"]{
        grid-column:2;
        grid-row:1;
        justify-self:end;
        font-size:.74rem;
        font-weight:700;
        color:var(--text-muted);
        background:#eef4fd;
        border-radius:999px;
        padding:.16rem .55rem;
        white-space:nowrap;
    }

    /* Die zwei Nebenangaben teilen sich die zweite Zeile. */
    .data-table--klassen td[data-label="Schüler"]{grid-column:1;grid-row:2}
    .data-table--klassen td[data-label="Erstellt am"]{
        grid-column:2;
        grid-row:2;
        justify-self:end;
        white-space:nowrap;
    }
    .data-table--klassen td[data-label="Schüler"],
    .data-table--klassen td[data-label="Erstellt am"]{
        font-size:.82rem;
        color:var(--text-muted);
    }
    .data-table--klassen td[data-label="Schüler"] a{
        color:var(--primary);
        font-weight:600;
        text-decoration:none;
    }
    /* Ohne Spaltenkopf fehlt dem blossen Datum der Bezug. */
    .data-table--klassen td[data-label="Erstellt am"]::before{content:'seit '}

    /* Knöpfe über die volle Breite, mit Trennlinie darüber. */
    .data-table--klassen td.actions{
        grid-column:1 / -1;
        grid-row:3;
        margin-top:.6rem;
        padding-top:.65rem;
        border-top:1px solid var(--border-light);
    }
    .data-table--klassen td.actions .quick-actions{
        display:flex;
        flex-wrap:wrap;
        gap:.4rem;
    }
    /* In der Karte wird nicht mehr seitlich gescrollt — hier dürfen lange
       Beschriftungen umbrechen (die Ausnahme `.data-table .btn` weiter oben
       gilt für die echten Tabellen). */
    .data-table--klassen .btn{white-space:normal}
    .data-table--klassen td.actions form{display:inline-flex}

    /* ── Rangfolge statt Regenbogen ──────────────────────────────────────
       In der Tabelle verteilen sich die sieben Knöpfe über 280 px und ihre
       Farben trennen sie voneinander. In der Karte stehen sie dicht
       beieinander, und dieselben Farben — Orange, Grün, zweimal Blau, Rot —
       ergeben ein unruhiges Feld, in dem nichts mehr hervorsticht.

       Deshalb hier: EINE gefüllte Hauptschaltfläche („Schüler", das, weshalb
       man eine Klasse aufruft), alles Übrige als ruhige Chips, und die zwei
       folgenreichen Aktionen nur zart getönt — Rot bleibt dem Löschen
       vorbehalten, wo es tatsächlich warnt.

       Ausdrücklich nur in dieser Karte und nur unter 600 px: Die
       Farbbedeutung von `.btn-success` und Co. bleibt im Rest der Anwendung
       unverändert. */
    .data-table--klassen td.actions .btn{
        background:#f6f9fd;
        border:1px solid var(--border-light);
        color:var(--dark-text);
        font-weight:600;
        box-shadow:none;
        text-shadow:none;
    }

    /* Die Hauptaktion behält die Hausfarbe und bleibt gefüllt. */
    .data-table--klassen td.actions .btn-primary{
        background:linear-gradient(135deg,#f5a623 0%,#e8920c 100%);
        border-color:rgba(232,146,12,.3);
        color:#1a0f00;
    }

    /* Versetzen ändert das Schuljahr aller Schüler — getönt, nicht gefüllt. */
    .data-table--klassen td.actions .btn-warning{
        background:#fff8ec;
        border-color:#f7dfae;
        color:var(--accent-dark);
    }

    .data-table--klassen td.actions .btn-danger{
        background:#fef3f2;
        border-color:#f3c6c1;
        color:#b42318;
    }
}

/* ===== 14-listen-matrix.css ===== */
/* ==========================================================================
   14-listen-matrix.css
   Inline-Arbeitsansicht (gruppierte Noten-Matrix) in der Noten-Section.
   Wird über die Lupe (🔍) unter der Noten-Karte eingeblendet und per
   api/get_work_matrix.php befüllt (Markup: renderListenGroupedTable(),
   lib/helpers.php). Alles ist unter .listen-matrix-embed gescoped, damit es
   NICHT mit den Inline-Styles der Listen-Seite (listen_overview.php) kollidiert.
   Kopfzeilen sind hier bewusst WEISS (wie auf der Listen-Seite, Req 2).
   ========================================================================== */

.listen-matrix-embed { margin-top: 1.25rem; }

.listen-matrix-embed__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.listen-matrix-embed__header h2 { margin: 0 0 .25rem; color: #0f2350; }
.listen-matrix-embed__header p { margin: 0; color: #576783; font-size: .9rem; }
.listen-matrix-embed__close {
    background: none;
    border: 1px solid rgba(15,34,72,.15);
    border-radius: 10px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    color: #576783;
    font-size: 1rem;
    flex-shrink: 0;
}
.listen-matrix-embed__close:hover { background: #eef2f8; color: #0f2350; }

.listen-matrix-embed__status { font-size: .85rem; color: #576783; }
.listen-matrix-embed__empty {
    padding: 1.5rem;
    text-align: center;
    color: #576783;
}

/* Eigener Scrollbereich, damit die Kopfzeile beim Scrollen stehen bleiben kann
   (Seiten-Scroll + nötiger Horizontal-Scroll verhindern sonst das „Kleben").
   Abgerundeter Rahmen wie die Karten (border-radius 14px), overflow:auto klippt
   die Ecken sauber. */
.listen-matrix-embed .listen-table-wrap {
    overflow: auto;
    max-height: calc(100vh - 210px);
    border: 1px solid #d7e0ee;
    border-radius: 14px;
}

.listen-matrix-embed .listen-work-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 720px;
}
.listen-matrix-embed .listen-work-table th,
.listen-matrix-embed .listen-work-table td {
    padding: .85rem .7rem;
    border-bottom: 1px solid #dce5f2;
    border-right: 1px solid #e5edf7;
    text-align: center;
}
.listen-matrix-embed .listen-work-table tbody tr:nth-child(odd) td { background: #f7fbff; }
.listen-matrix-embed .listen-work-table tbody tr:nth-child(even) td { background: #eaf1fb; }
.listen-matrix-embed .listen-work-table__sticky {
    position: sticky;
    left: 0;
    text-align: left !important;
    font-weight: 700;
    z-index: 1;
    white-space: nowrap;
}
.listen-matrix-embed .listen-work-table tbody tr:nth-child(odd) .listen-work-table__sticky { background: #f7fbff; }
.listen-matrix-embed .listen-work-table tbody tr:nth-child(even) .listen-work-table__sticky { background: #eaf1fb; }
.listen-matrix-embed .listen-average-cell { font-weight: 800; }

/* Notenfelder */
.listen-matrix-embed .listen-grade-input {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    border: 1px solid rgba(26,86,219,.16);
    background: #fff9e6;
    padding: .8rem .95rem;
    color: #10213c;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    text-align: center;
}
.listen-matrix-embed .listen-grade-input:focus {
    outline: none;
    border-color: #1a56db;
    box-shadow: 0 0 0 4px rgba(26,86,219,.12);
}
.listen-matrix-embed .listen-grade-input::-webkit-inner-spin-button,
.listen-matrix-embed .listen-grade-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.listen-matrix-embed .listen-grade-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Gruppierte Detail-Matrix – Kopfzeilen weiß (Req 2) */
.listen-matrix-embed .listen-grouped { table-layout: auto; }
.listen-matrix-embed .listen-grouped .listen-grp {
    background: #fff;
    color: #0f2350;
    text-align: center;
    font-weight: 700;
    padding: 6px;
    border: 1px solid #b7c4d6;
    border-bottom: 2px solid #1a4990;
    vertical-align: bottom;
}
.listen-matrix-embed .listen-grouped .listen-grp-lbl { display: block; white-space: normal; word-break: break-word; line-height: 1.15; }
/* „Ø Gesamt" bricht nur am Leerzeichen, nicht mitten im Wort („Gesa/mt") */
.listen-matrix-embed .listen-grouped .listen-grp--avg .listen-grp-lbl { word-break: normal; }
.listen-matrix-embed .listen-grouped .listen-grp--rot .listen-grp-lbl {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    word-break: normal;
    max-height: 150px;
    overflow: hidden;
    margin: 0 auto 3px;
}
.listen-matrix-embed .listen-grouped .listen-grp small { display: block; font-weight: 600; color: #5f6e86; margin-top: 2px; }
.listen-matrix-embed thead .listen-grp-name {
    background: #fff !important;
    color: #0f2350 !important;
    text-align: left !important;
    vertical-align: bottom;
    border-bottom: 2px solid #1a4990 !important;
    font-size: 13px;
}
.listen-matrix-embed .listen-grouped .listen-grp--avg {
    background: #fff !important;
    color: #0f2350 !important;
    vertical-align: bottom;
    border-left: 3px solid #f5a623;
    border-bottom: 2px solid #1a4990 !important;
}
.listen-matrix-embed .listen-grouped .listen-rot-th {
    background: #fff;
    color: #0f2350;
    border-bottom: 2px solid #1a4990;
    vertical-align: bottom;
    width: 30px;
    min-width: 30px;
    padding: 6px 3px 8px;
    text-align: center;
}
.listen-matrix-embed .listen-grouped .listen-rot {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: inline-block;
    max-height: 165px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
}
.listen-matrix-embed .listen-grouped .listen-rot-date {
    display: block;
    writing-mode: horizontal-tb;
    font-size: 7px;
    opacity: .8;
    margin-top: 3px;
    white-space: nowrap;
}
.listen-matrix-embed .listen-grouped .listen-grade-cell,
.listen-matrix-embed .listen-grouped .listen-overall-avg { white-space: nowrap; word-break: normal; }
.listen-matrix-embed .listen-grouped .listen-overall-avg { background: #e3ebf6 !important; font-weight: 800; border-left: 3px solid #f5a623 !important; }
/* Kompakte Notenfelder in der gruppierten Matrix */
.listen-matrix-embed .listen-work-table.listen-grouped .listen-grade-input {
    min-height: 34px;
    border-radius: 8px;
    padding: .3rem .15rem;
    width: 46px;
    text-align: center;
    min-width: 0;
}
/* Kopfzeile bleibt beim Scrollen oben stehen: beide Kopfzeilen kleben zusammen
   (sticky auf <thead>). Die Namensspalte klebt über die Basis-Regel
   .listen-work-table__sticky zusätzlich links; im Kopf höherer z-index, damit
   die obere linke Ecke über allem liegt. */
.listen-matrix-embed .listen-work-table.listen-grouped thead { position: sticky; top: 0; z-index: 4; }
.listen-matrix-embed .listen-work-table.listen-grouped thead .listen-work-table__sticky { z-index: 5; }

/* Durchgehende senkrechte Trennlinie je Arbeitsbereich (bis zum Ø Gesamt) */
.listen-matrix-embed .listen-grouped .listen-grp-sep { border-left: 2px solid #1a4990 !important; }

/* ===== 15-listen-sl.css ===== */
/* ==========================================================================
   15-listen-sl.css
   Gemeinsame Bausteine der Listen-Tabs Schülerliste und Hausaufgabenliste
   (Kopf, Schrittleiste, Karten, Felder, Schalter, Vorschau-Blatt).
   Tabellen- und Druckregeln bleiben in den Views, damit sie nicht in die
   Notenliste (listen_overview.php, eigene .listen-print-table) wirken.
   ========================================================================== */
.sl{display:flex;flex-direction:column;gap:1.1rem;scroll-behavior:smooth}
.sl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.sl-title{margin:0;font-size:2rem;font-weight:800;color:#0b1a3a;letter-spacing:-.01em}
.sl-sub{margin:.2rem 0 0;color:#4f5f7c}
.sl-new{align-self:center}
.sl-steps{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:0}
.sl-step{flex:1 1 0;display:flex;align-items:center;min-width:0}
.sl-step:not(:last-child)::after{content:"";flex:1 1 auto;height:3px;margin:0 .9rem;border-radius:3px;background:rgba(15,34,72,.12)}
.sl-step.is-done:not(:last-child)::after{background:#f5a623}
.sl-step a{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:#34425e;white-space:nowrap}
.sl-step__num{display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;border-radius:50%;background:#fff;border:2px solid rgba(15,34,72,.14);font-weight:700;color:#34425e;flex:none}
.sl-step.is-active .sl-step__num{background:#f5a623;border-color:#f5a623;color:#fff;box-shadow:0 4px 12px rgba(245,166,35,.4)}
.sl-step.is-active .sl-step__label{font-weight:700;color:#0b1a3a}
.sl-step.is-done .sl-step__num{background:#fff4dc;border-color:#f5a623;color:#c77d05}
.sl-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.1rem;align-items:start}
.sl-card{margin:0;border:1px solid rgba(15,34,72,.07);border-radius:18px;box-shadow:0 14px 34px rgba(7,18,39,.07);padding:1.4rem 1.5rem}
.sl-section--divided{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid rgba(15,34,72,.09)}
.sl-section__title{margin:0 0 .2rem;font-size:1.3rem;font-weight:800;color:#0b1a3a}
.sl-section__hint{margin:0 0 1rem;color:#56657f;font-size:.9rem}
.sl-inline-icon{display:inline-flex;vertical-align:-3px;color:#c77d05}
.sl-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.sl-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.sl-field__label{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#56657f;font-weight:700}
.sl-input{width:100%;min-height:46px;border-radius:10px;border:1px solid #e6d28c;background:#fff9e8;padding:.6rem .85rem;color:#10213c;font:inherit;font-size:.95rem}
.sl-input:focus{outline:none;border-color:#e8a21c;box-shadow:0 0 0 3px rgba(245,166,35,.22)}
.sl-input:disabled{opacity:.6}
.sl-switch{display:inline-flex;align-items:center;gap:.8rem;margin-top:1.1rem;cursor:pointer;user-select:none}
.sl-switch input{position:absolute;opacity:0;width:1px;height:1px}
.sl-switch__track{position:relative;flex:none;width:52px;height:28px;border-radius:14px;background:#cbd5e3;transition:background .2s}
.sl-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.sl-switch input:checked+.sl-switch__track{background:#f5a623}
.sl-switch input:checked+.sl-switch__track::after{transform:translateX(24px)}
.sl-switch input:focus-visible+.sl-switch__track{box-shadow:0 0 0 3px rgba(245,166,35,.35)}
.sl-switch__text{display:flex;flex-direction:column;line-height:1.3}
.sl-switch__text strong{color:#0b1a3a;font-size:.95rem}
.sl-switch__text small{color:#56657f;font-size:.8rem}
.sl-colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.9rem}
.sl-colitem{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.sl-colitem__row{display:flex;gap:.35rem}
.sl-colitem__row .sl-input{min-width:0}
.sl-rotate{flex:none;width:40px;border-radius:10px;border:1px solid #e6d28c;background:#fff;color:#8a96ab;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sl-rotate:hover{color:#c77d05;border-color:#e8a21c}
.sl-rotate[aria-pressed="true"]{background:#f5a623;border-color:#f5a623;color:#fff}
.sl-rotate[aria-pressed="true"] svg{transform:rotate(-90deg)}
.sl-nocols{margin-top:.2rem}
.sl-go{display:flex;width:100%;margin-top:1.3rem;min-height:50px;font-size:1rem;border-radius:12px}
.sl-aside__title{display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem;font-size:1.15rem;font-weight:800;color:#0b1a3a}
.sl-aside__actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.8rem}
.sl-btn-soft{background:#eef2f8;color:#34425e;border:1px solid rgba(15,34,72,.08)}
.sl-btn-soft:hover:not(:disabled){background:#e2e8f2;color:#0b1a3a}
.sl-status{margin:.8rem 0 0;font-size:.85rem;color:#56657f;min-height:1.2em}
.sl-status.is-ok{color:#15976a;font-weight:600}
.sl-status.is-err{color:#c73428;font-weight:600}
.sl-preview__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.sl-preview__head .sl-section__hint{margin:0}
.sl-preview__actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.sl-empty{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;padding:2.2rem 1rem;border:2px dashed rgba(15,34,72,.12);border-radius:14px;color:#56657f}
.sl-empty strong{color:#34425e}
.sl-tip{display:flex;gap:.55rem;align-items:flex-start;margin:0 0 .9rem;padding:.65rem .85rem;border-radius:10px;background:#fff7e3;color:#5b4a1c;font-size:.88rem}
.sl-tip svg{flex:none;margin-top:2px;color:#c77d05}
.sl-tip kbd{font:inherit;font-size:.8rem;padding:0 .35rem;border:1px solid #d9c38a;border-bottom-width:2px;border-radius:4px;background:#fff}
.sl-stage{overflow:auto;padding:1rem;background:#e4ebf5;border-radius:14px}
.sl-sheet{width:794px;min-height:1123px;margin:0 auto;background:#fff;box-shadow:0 20px 45px rgba(7,18,39,.14);padding:24px}
.sl-cell{cursor:text;white-space:nowrap}
.sl-cell:focus{background:#fffbea!important}
.sl-th-tools{position:absolute;top:1px;left:2px;right:2px;display:flex;justify-content:space-between;opacity:0;transition:opacity .15s;pointer-events:none}
.sl-grip{cursor:grab;font-size:12px;line-height:1;padding:1px 3px;border-radius:3px;background:rgba(15,34,72,.14);color:#0f2350}
.sl-th-rotate{border:0;padding:1px;border-radius:3px;background:rgba(15,34,72,.14);color:#0f2350;cursor:pointer;display:inline-flex}
.sl-th-rotate svg{width:12px;height:12px}
@media (max-width:1180px){.sl-layout{grid-template-columns:1fr}.sl-aside{order:-1}}
@media (max-width:900px){.sl-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.sl-grid4{grid-template-columns:1fr}.sl-step__label{display:none}.sl-step a{gap:0}.sl-title{font-size:1.6rem}.sl-preview__actions{width:100%}.sl-preview__actions .btn{flex:1}}

/* ===== 16-schuelerfotos.css ===== */
/* ═══════════════════════════════════════════════════════════════════════════
   16 · SCHÜLERFOTOS (readme/SCHUELERFOTOS.md)
   Bildplätze in Noten, Plus/Minus, Bewertungen, Schüler/in und die Seite
   „Fotos aufnehmen". Ein .sfoto ist entweder ein <img> oder — ohne Foto —
   ein leerer <span class="sfoto sfoto--leer">, damit Namen bündig bleiben.
   ═══════════════════════════════════════════════════════════════════════════ */

.sfoto {
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    vertical-align: middle;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 1px 3px rgba(14, 24, 41, .18);
}
.sfoto--leer {
    background: rgba(14, 24, 41, .06);
    box-shadow: inset 0 0 0 1.5px rgba(14, 24, 41, .12);
}

/* Noten: zwei Spalten, Bild links oder rechts vom Namen */
.student-grade-row .sfoto { margin-right: .15rem; }
.student-grade-row .sfoto--rechts { margin-right: .35rem; margin-left: .15rem; }
.student-grade-row .sfoto--leer { opacity: .7; }

/* Plus/Minus: Tabellenzelle */
.pm-name-cell { white-space: nowrap; }
.pm-name-cell .sfoto { width: 2rem; height: 2rem; margin-right: .55rem; }
.pm-name-cell .sfoto--rechts { margin-right: 0; margin-left: .55rem; }

/* Bewertungen: rechts neben dem Pfeil in der dunklen Kopfzeile */
.bw-head__foto {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.bw-head__foto[hidden] { display: none; }

/* Schüler/in: Profilkopf */
.schueler-profile-avatar--foto {
    padding: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .18);
}
.schueler-profile-avatar--foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}
.schueler-profile-avatar--foto { width: 4.2rem; height: 4.2rem; }
.schueler-result-avatar--foto { padding: 0; overflow: hidden; }
.schueler-result-avatar--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfoto-hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }

/* Noten: Plus am Namen (Schalter 📷 an, Kind ohne Foto) */
.sfoto-plus {
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1.5px dashed rgba(14, 24, 41, .35);
    background: rgba(255, 255, 255, .6);
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-right: .15rem;
}
.sfoto-plus.sfoto--rechts { margin-right: .35rem; margin-left: .15rem; }
.sfoto-plus:hover { background: var(--accent-light); border-color: var(--accent); border-style: solid; }
.sfoto--noten {
    cursor: pointer;
    -webkit-touch-callout: none;   /* iOS: kein „Bild sichern"-Menü beim langen Drücken */
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.sfoto-laden .sfoto-plus, .sfoto-laden .sfoto--noten { opacity: .45; }
.btn-icon--foto { font-size: .95rem; }

/* Schülerfenster (Noten): Foto oben mit Kamera-Knopf */
.sfoto-modal {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: .9rem;
    flex-wrap: wrap;
}
.sfoto-modal__bild {
    width: 9rem;
    height: 9rem;
    border-radius: 18px;
    object-fit: cover;
    display: block;
    background: var(--light);
    box-shadow: 0 2px 8px rgba(14, 24, 41, .15);
}
.sfoto-modal__bild--leer {
    background: var(--light);
    box-shadow: inset 0 0 0 1.5px var(--border);
}
.sfoto-modal__knopf { font-size: .78rem; padding: .25rem .75rem; }
.sfoto-modal__loeschen { color: var(--danger); }
.sfoto-modal__loeschen[hidden] { display: none; }
.sfoto-modal__status { font-size: .8rem; color: var(--text-muted); }

@media (max-width: 640px) {
    .bw-head__foto { width: 46px; height: 46px; }
    .sfoto-modal__bild { width: 7rem; height: 7rem; }
}

@media print {
    .sfoto--leer, .sfoto-plus, .sfoto-modal__knopf { display: none; }
}

/* ===== 17-gestaltung.css ===== */
/* ═══════════════════════════════════════════════════════════════════════════
   17 · GESTALTUNG 2026-09 (readme/GESTALTUNG-2026-09.md)
   Neue Optik für Kopfzeile, Navigation und Noten-Ansicht nach Thomas'
   Bildentwurf vom 15.09.2026. Liegt als letztes Modul über allem anderen
   und ändert nur Aussehen, keine Abläufe. Die Schublade der Navigation auf
   schmalen Bildschirmen (06-responsive-legacy, 13-responsive) bleibt
   unberührt: Alles, was den dunklen Balken betrifft, gilt ab 901 px.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --g-navy: #0b1a4a;
    --g-navy-deep: #071238;
    --g-amber: #f5a623;
    --g-cream: #fff7e0;
    --g-sky: #dbeafe;
    --g-sky-text: #1e40af;
    --g-rose: #fee2e2;
    --g-rose-text: #b91c1c;
    --g-hand: 'Segoe Script', 'Bradley Hand', 'Snell Roundhand', 'Comic Sans MS', cursive;
}

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */
.main-header {
    padding: 0.75rem 2rem 0.6rem;
    border-bottom: 0;
    box-shadow: none;
}
.main-header::after { display: none; }

.header-brand { gap: 0.9rem; align-items: center; }
.logo { font-size: 1.55rem; }
.logo::before { font-size: 1.05rem; }

.logo-claim {
    font-family: var(--g-hand);
    font-size: 0.86rem;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.72);
    transform: rotate(-4deg);
    transform-origin: left center;
    margin-left: 0.2rem;
    white-space: nowrap;
}

.user-info { gap: 0.7rem; }
.hdr-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.hdr-icon:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(245, 166, 35, 0.5); color: #fff; }
.hdr-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.18); }
.user-name { font-weight: 600; color: rgba(255, 255, 255, 0.92); font-size: 0.92rem; }
.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--g-navy);
    background: #e6eef9;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.btn-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--primary) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    padding: 0.5rem 0.95rem !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: 0 2px 10px rgba(24, 69, 200, 0.35);
}
.btn-logout:hover { background: var(--primary-dark) !important; }
@media (max-width: 1000px) { .logo-claim { display: none; } }

/* ── Navigation: dunkler Balken, aktiver Reiter als helle Karte ────────── */
@media (min-width: 901px) {
    .main-nav {
        background: var(--header-gradient);
        border-bottom: 0;
        box-shadow: 0 3px 16px rgba(8, 15, 36, 0.35);
    }
    .nav-container {
        padding: 0.35rem 0.5rem 0;
        gap: 0.2rem;
        align-items: center;
        /* nie abschneiden: lieber in eine zweite Zeile umbrechen */
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .nav-link {
        color: rgba(255, 255, 255, 0.82);
        border-bottom: 0;
        border-radius: 12px 12px 0 0;
        padding: 0.65rem 0.95rem 0.7rem;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        transition: background 0.2s, color 0.2s;
    }
    .nav-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-bottom: 0; }
    .nav-link.active {
        background: linear-gradient(180deg, #1b3170 0%, #10224f 100%);
        color: var(--g-amber);
        border-bottom: 0;
        border-radius: 10px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        position: relative;
        margin-bottom: 0.3rem;
    }
    .nav-link.active::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        border-radius: 0 0 10px 10px;
        background: var(--g-amber);
    }
    .nav-link.active .nav-ico { color: var(--g-amber); }
    .nav-link { margin-bottom: 0.3rem; border-radius: 10px; }
    .nav-link--icon { min-width: 48px; padding: 0.7rem 0.9rem 0.75rem; }
    .nav-link--icon .nav-link-icon { color: inherit; }
    .nav-ico { display: inline-flex; color: rgba(255, 255, 255, 0.85); }
    .nav-ico svg { width: 17px; height: 17px; display: block; }
}
/* Mittlere Breiten (iPad quer bis kleiner Laptop): Reiter kompakter und bei
   Bedarf umbrechend — vorher wurde „Tools" rechts abgeschnitten. */
@media (min-width: 901px) and (max-width: 1350px) {
    .nav-container { flex-wrap: wrap; overflow-x: visible; padding: 0.3rem 0.35rem 0; gap: 0.1rem; }
    .nav-link { padding: 0.55rem 0.7rem 0.6rem; font-size: 0.72rem; letter-spacing: 0.02em; gap: 0.35rem; }
    .nav-link--icon { min-width: 42px; padding: 0.55rem 0.7rem 0.6rem; }
    .nav-ico svg { width: 15px; height: 15px; }
    .main-header { padding: 0.6rem 1.25rem 0.5rem; }
}
@media (max-width: 900px) {
    .nav-ico { display: inline-flex; margin-right: 0.55rem; vertical-align: -3px; color: var(--accent-dark); }
    .nav-ico svg { width: 17px; height: 17px; display: block; }
}

/* ── Noten: Werkzeugleiste ─────────────────────────────────────────────── */
.grades-header {
    background: linear-gradient(180deg, #fffaf0 0%, #fff4dc 100%);
    border: 1px solid #f2dfb3;
    border-radius: 16px;
    padding: 0.9rem 1.2rem;
    box-shadow: 0 4px 18px rgba(8, 15, 36, 0.08);
    flex-wrap: wrap;
}
.grades-selectors { gap: 0.8rem; flex-wrap: wrap; }
.gs-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.gs-field__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    padding-left: 0.15rem;
}
.gs-field__label svg { width: 15px; height: 15px; color: var(--primary); }
.gs-field .grades-select {
    background-color: #fff;
    border: 1px solid #d9e2f1;
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    font-weight: 600;
    color: var(--dark-text);
    box-shadow: 0 1px 3px rgba(8, 15, 36, 0.06);
    min-width: 150px;
}
.gs-field .grades-select--topic { min-width: 230px; }
.gs-field .grades-select:hover { border-color: #b9c9e6; box-shadow: 0 2px 8px rgba(24, 69, 200, 0.12); }
.gs-field .grades-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(24, 69, 200, 0.15); transform: none; }

.grades-selectors .btn-icon,
.grades-actions .btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #d9e2f1;
    color: var(--g-navy);
    font-size: 1.05rem;
    box-shadow: 0 1px 3px rgba(8, 15, 36, 0.06);
}
.grades-selectors .btn-topic-plus { font-size: 1.5rem; font-weight: 300; align-self: flex-end; }
.grades-nav-arrows { gap: 0.25rem; align-self: flex-end; }
.grades-nav-arrows .btn-icon { width: 42px; height: 20px; border-radius: 8px; font-size: 0.7rem; }
.gs-divider { width: 1px; height: 42px; background: #e8dcbf; align-self: flex-end; margin: 0 0.2rem; }
.grades-actions { align-self: flex-end; gap: 0.45rem; flex-wrap: wrap; }
.grades-actions .btn-icon--vm {
    width: auto;
    padding: 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.gs-vm { display: inline-flex; gap: 0.25rem; }
.grades-actions .btn-icon:hover { background: var(--g-cream); border-color: var(--g-amber); color: var(--accent-dark); }
.btn-mehr {
    width: auto !important;
    padding: 0 0.85rem !important;
    gap: 0.4rem;
    font-size: 0.82rem !important;
    font-weight: 700;
}
.mehr-wrap { position: relative; }
.mehr-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    background: #fff;
    border: 1px solid #d9e2f1;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(8, 15, 36, 0.18);
    padding: 0.4rem;
    min-width: 230px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.mehr-menu[hidden] { display: none; }
.mehr-menu .btn-icon {
    width: 100% !important;
    height: auto !important;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem !important;
    border: 0;
    box-shadow: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dark-text);
    border-radius: 8px;
    text-decoration: none;
}
.mehr-menu .btn-icon .mehr-ico { width: 1.5rem; text-align: center; font-size: 1rem; }
.mehr-menu .btn-icon:hover { background: var(--g-cream); transform: none; }
.mehr-menu .btn-icon--vm-active { background: var(--primary) !important; color: #fff !important; }
.mehr-menu .mehr-ico--kuerzel { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; }
.mehr-trenner { height: 1px; background: #e6edf8; margin: 0.25rem 0.3rem; }
.grades-actions .btn-icon--avg { font-size: 1.05rem; font-weight: 800; }

/* ── Noten: linke Karte „Klassenarbeiten“ ──────────────────────────────── */
.grades-main { gap: 1.4rem; }
.grades-exams-panel {
    border-radius: 16px;
    border: 1px solid #e6edf8;
    box-shadow: 0 6px 22px rgba(8, 15, 36, 0.08);
    padding: 1.2rem 1.25rem 1.3rem;
    font-size: 0.82rem;
    position: relative;
    align-self: start;
}
.panel-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dark-text);
    margin-bottom: 0.9rem;
    padding-right: 2rem;
}
.panel-title svg { width: 20px; height: 20px; color: var(--g-navy); flex: none; }
.panel-pin {
    position: absolute;
    top: -0.35rem;
    right: 1rem;
    font-size: 1.35rem;
    transform: rotate(18deg);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}
.exam-live-avg { margin-bottom: 0.8rem; }
.grades-exams-panel .exams-table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;              /* weiss auf dem blauen Kopf – grau war unleserlich */
    border-bottom: 0;
}
.grades-exams-panel .exam-row.active td { background: #fff4dc; }
.grades-exams-panel .exam-row.active td:first-child { border-left: 4px solid var(--g-amber); border-radius: 8px 0 0 8px; }
.grades-exams-panel .exam-row.new-exam .exam-topic-input {
    background: #fff9e6;
    border: 1px solid #f2dfb3;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    font-weight: 600;
}
/* Datum immer ganz lesbar (Rückmeldung 15.09.: „15.09…" war abgeschnitten,
   auch am PC): feste Spaltenbreiten in rem statt Prozent, das Thema nimmt den
   Rest; der Datumsknopf ohne Ellipse und mit knappem Innenabstand. */
.grades-exams-panel .exams-table th:nth-child(1),
.grades-exams-panel .exams-table td:nth-child(1) { width: auto; }
.grades-exams-panel .exams-table th:nth-child(2),
.grades-exams-panel .exams-table td:nth-child(2) { width: 2.2rem; }
.grades-exams-panel .exams-table th:nth-child(3),
.grades-exams-panel .exams-table td:nth-child(3) { width: 5.2rem; padding-left: 0.15rem; padding-right: 0.15rem; overflow: visible; }
.grades-exams-panel .exam-date-display {
    background: #e8f0fb;
    border: 1px solid #cfdcf1;
    border-radius: 8px;
    padding: 0.35rem 0.25rem;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0;
    color: var(--g-navy);
    width: 100%;
    box-sizing: border-box;
}
.grades-exams-panel .exam-date-display__value { overflow: visible; text-overflow: clip; white-space: nowrap; }
.grades-exams-panel .new-exam-action .btn { border-radius: 10px; font-weight: 700; }
/* ── Noten: Schülerspalten ─────────────────────────────────────────────── */
.grades-students-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
.students-grid { gap: 1.4rem; }
.students-column {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e6edf8;
    box-shadow: 0 6px 22px rgba(8, 15, 36, 0.08);
    padding: 0.75rem;
    gap: 0.35rem;
    overflow: hidden;
}
.students-column__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 -0.75rem 0.5rem;
    padding: 0.75rem 1.1rem;
    background: var(--g-sky);
    color: var(--g-sky-text);
    font-weight: 800;
    font-size: 1.05rem;
}
.students-column--b .students-column__head { background: var(--g-rose); color: var(--g-rose-text); }
.students-column__head svg { width: 22px; height: 22px; flex: none; }
.students-column__count { font-weight: 600; font-size: 0.82rem; opacity: 0.8; }
.students-column__motto {
    margin-left: auto;
    font-family: var(--g-hand);
    font-weight: 400;
    font-size: 0.95rem;
    opacity: 0.85;
    position: relative;
    top: -1px;
}
.students-column__motto::after {
    content: '';
    display: block;
    height: 2px;
    width: 60%;
    margin: 0 0 0 20%;
    border-radius: 2px;
    background: var(--g-amber);
}

/* Zeilen bewusst hoch und gross (Rückmeldung 15.09.: „man muss eh scrollen,
   dann lieber richtig"). */
.student-grade-row,
.student-grade-row.student-row-even,
.student-grade-row.student-row-odd {
    background: #fff;
    border: 1px solid #edf2fa;
    border-radius: 12px;
    padding: 0.55rem 0.7rem 0.55rem 0.55rem;
    gap: 0.75rem;
    min-height: 3.4rem;
    box-shadow: 0 1px 2px rgba(8, 15, 36, 0.04);
}
.students-column { gap: 0.45rem; }
.student-grade-row:hover { background: #f5f8fe !important; transform: none; box-shadow: 0 3px 10px rgba(24, 69, 200, 0.1); }
.student-grade-row .student-name { color: var(--dark-text); font-weight: 600; font-size: 1.1rem; }
.student-grade-row[data-gender="m"] .student-name,
.student-grade-row[data-gender="w"] .student-name { color: var(--dark-text); }
/* Fotomodus: der Kreis ist jetzt ein Foto — die Geschlechtsfarbe wandert
   auf den Namen (Jungen blau, Mädchen rot). */
.students-grid--fotos .student-grade-row[data-gender="m"] .student-name { color: var(--g-sky-text); }
.students-grid--fotos .student-grade-row[data-gender="w"] .student-name { color: var(--g-rose-text); }

.s-avatar {
    flex: none;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    background: #ede9fe;
    color: #5b21b6;
}
.student-grade-row[data-gender="m"] .s-avatar { background: var(--g-sky); color: var(--g-sky-text); }
.student-grade-row[data-gender="w"] .s-avatar { background: var(--g-rose); color: var(--g-rose-text); }
.student-grade-row .sfoto, .student-grade-row .sfoto-plus { width: 2.7rem; height: 2.7rem; }
.student-grade-row .sfoto-plus { font-size: 1.5rem; }

.student-grade-row .grade-input {
    width: 92px;
    padding: 0.6rem 0.4rem;
    border-radius: 10px;
    border: 1px solid #f2dfb3;
    background: #fff4d6;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--dark-text);
}
.student-grade-row .grade-input::placeholder { color: #7a6a3a; font-weight: 700; opacity: 0.9; }
.student-grade-row .grade-input:focus { background: #fffbef; border-color: var(--g-amber); box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.25); transform: none; }
.student-grade-row .grade-note-btn {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    border: 1px solid #d9e2f1;
    background: #fff;
    color: var(--g-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(8, 15, 36, 0.05);
}
.student-grade-row .grade-note-btn svg { width: 17px; height: 17px; }
.student-grade-row .grade-note-btn--disabled { opacity: 0.45; }
.s-status {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #c3cad8;
    margin-left: 0.15rem;
    transition: background 0.25s;
}
/* Grün, sobald eine Note drinsteht — rein über den Feldzustand, ohne JS. */
.student-grade-row:has(.grade-input:not(:placeholder-shown)) .s-status { background: #22a06b; box-shadow: 0 0 0 3px rgba(34, 160, 107, 0.18); }
.student-grade-row.error .s-status { background: var(--danger); }

/* iPad quer (1024–1180 px, Rückmeldung 15.09. „gefällt mir noch nicht"):
   1. Werkzeugleiste in zwei ruhigen Zeilen: oben die vier Auswahlfelder mit
      Plus und Pfeilen, darunter rechtsbündig die Werkzeuge. Vorher rutschte
      „Thema" allein in die zweite Zeile.
   2. Karte „Klassenarbeiten" schmaler, Zeilen der Schülerliste kompakter,
      damit beide Spalten mit der ganzen Klasse auf den Bildschirm passen. */
@media (max-width: 1200px) {
    .grades-entry-container { padding: 1rem; }
    .grades-header { flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 0.7rem 0.9rem; }
    .grades-selectors { flex-wrap: nowrap; gap: 0.5rem; }
    .gs-field { flex: 1 1 0; }
    .gs-field__label { font-size: 0.66rem; }
    .gs-field .grades-select,
    .gs-field .grades-select--topic { min-width: 0; width: 100%; max-width: none; padding: 0.5rem 0.6rem; font-size: 0.88rem; }
    .gs-field:nth-child(1) { flex: 0 1 7.5rem; }
    .gs-field:nth-child(2) { flex: 1 1 9rem; }
    .gs-field:nth-child(3) { flex: 1 1 10rem; }
    .gs-field:nth-child(4) { flex: 2 1 12rem; }
    .grades-selectors .btn-topic-plus { width: 38px; height: 38px; }
    .grades-nav-arrows .btn-icon { width: 38px; height: 18px; }
    .grades-actions { align-self: flex-end; justify-content: flex-end; gap: 0.35rem; }
    .grades-actions .btn-icon { width: 38px; height: 38px; font-size: 0.95rem; }
    .btn-mehr { padding: 0 0.7rem !important; font-size: 0.78rem !important; }

    .grades-main { grid-template-columns: 230px 1fr; gap: 0.8rem; min-height: 0; }
    .grades-exams-panel { padding: 0.8rem 0.85rem 0.9rem; font-size: 0.76rem; }
    .panel-title { font-size: 0.95rem; margin-bottom: 0.6rem; }
    .grades-exams-panel .new-exam-action .btn { font-size: 0.8rem; padding: 0.5rem 0.7rem; }
    .grades-exams-panel .exams-table th:nth-child(3),
    .grades-exams-panel .exams-table td:nth-child(3) { width: 4.8rem; }
    .grades-exams-panel .exam-date-display { font-size: 0.68rem; padding: 0.3rem 0.15rem; }
    .grades-exams-panel .exam-row.new-exam .exam-topic-input { padding: 0.35rem 0.4rem; font-size: 0.74rem; }

    /* Zeilen auch am iPad hoch und gut lesbar — gescrollt wird ohnehin. */
    .students-grid { gap: 0.7rem; }
    .students-column { padding: 0.5rem; gap: 0.35rem; border-radius: 12px; }
    .student-grade-row,
    .student-grade-row.student-row-even,
    .student-grade-row.student-row-odd { padding: 0.45rem 0.5rem 0.45rem 0.45rem; gap: 0.5rem; border-radius: 10px; min-height: 3.1rem; }
    .student-grade-row .student-name { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .student-grade-row .grade-input { width: 72px; padding: 0.5rem 0.3rem; font-size: 1rem; }
    .student-grade-row .grade-note-btn { width: 38px; height: 38px; }
    .student-grade-row .grade-note-btn svg { width: 15px; height: 15px; }
    .grade-input-wrapper { gap: 0.3rem; }
    .s-avatar { width: 2.3rem; height: 2.3rem; font-size: 0.78rem; }
    .student-grade-row .sfoto, .student-grade-row .sfoto-plus { width: 2.3rem; height: 2.3rem; }
    .s-status { width: 0.7rem; height: 0.7rem; margin-left: 0; }
}
/* iPad hochkant (≤ 900 px): Klassenarbeiten oben, Schüler darunter in zwei
   Spalten — die Liste bleibt in ganzer Breite sichtbar. */
@media (max-width: 900px) and (min-width: 600px) {
    .grades-main { grid-template-columns: 1fr; }
    .grades-exams-panel { font-size: 0.8rem; }
    .students-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
}
@media (max-width: 900px) {
    /* 06-responsive-legacy macht jeden .btn-icon halb so breit wie die Leiste —
       für eine Handvoll Knöpfe war das gedacht, für die Gruppe Alle/HJ/Z/PN und
       das Menü „Mehr" nicht. */
    .grades-actions { align-self: stretch; justify-content: flex-start; }
    .grades-actions .btn-icon { flex: 0 1 auto; min-height: 42px; }
    .grades-actions .gs-vm .btn-icon { flex: 0 0 auto; }
    .mehr-menu .btn-icon { flex: none !important; }
    .gs-divider { display: none; }
}
@media (max-width: 599px) {
    .gs-field { width: 100%; }
    .gs-field .grades-select, .gs-field .grades-select--topic { min-width: 0; width: 100%; }
    .students-column { padding: 0.5rem; }
    .students-column__head { margin: 0 -0.5rem 0.4rem; padding: 0.6rem 0.8rem; font-size: 0.95rem; }
    .student-grade-row .grade-input { width: 66px; }
    .s-avatar { width: 2rem; height: 2rem; font-size: 0.7rem; }
}
@media print {
    .main-nav, .logo-claim, .panel-pin, .s-status, .mehr-wrap { display: none !important; }
}