/* ===== VocMoc Design System ===== */

:root {
    --vm-primary: #4f46e5;
    --vm-primary-rgb: 79, 70, 229;
    --vm-primary-light: #818cf8;
    --vm-primary-dark: #3730a3;
    --vm-accent: #06b6d4;
    --vm-accent-rgb: 6, 182, 212;
    --vm-accent-light: #67e8f9;
    --vm-success: #10b981;
    --vm-success-light: #d1fae5;
    --vm-warning: #f59e0b;
    --vm-warning-light: #fef3c7;
    --vm-danger: #ef4444;
    --vm-danger-light: #fee2e2;
    --vm-gray-50: #f8fafc;
    --vm-gray-100: #f1f5f9;
    --vm-gray-200: #e2e8f0;
    --vm-gray-300: #cbd5e1;
    --vm-gray-400: #94a3b8;
    --vm-gray-500: #64748b;
    --vm-gray-600: #475569;
    --vm-gray-700: #334155;
    --vm-gray-800: #1e293b;
    --vm-gray-900: #0f172a;
    --vm-radius-sm: 0.5rem;
    --vm-radius: 0.75rem;
    --vm-radius-lg: 1rem;
    --vm-radius-xl: 1.25rem;
    --vm-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --vm-shadow: 0 4px 6px -1px rgba(15,23,42,.07), 0 2px 4px -2px rgba(15,23,42,.05);
    --vm-shadow-md: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.04);
    --vm-shadow-lg: 0 20px 25px -5px rgba(15,23,42,.1), 0 8px 10px -6px rgba(15,23,42,.06);
    --vm-transition: 0.2s cubic-bezier(.4,0,.2,1);
    --vm-gradient: linear-gradient(135deg, var(--vm-primary), var(--vm-accent));
}

/* ===== Base ===== */
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--vm-gray-800);
    background: var(--vm-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--vm-gray-900); }
h1:focus { outline: none; }

/* ===== Validation ===== */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--vm-success); }
.invalid { outline: 1px solid var(--vm-danger); }
.validation-message { color: var(--vm-danger); }

.blazor-error-boundary {
    background: var(--vm-danger);
    padding: 1rem 1.5rem;
    color: white;
    border-radius: var(--vm-radius);
}
.blazor-error-boundary::after { content: "Ein Fehler ist aufgetreten."; }

/* ===== Logo ===== */
/* Das Zeichen steht neben Text und soll auf dessen Grundlinie sitzen — wie die
   Bootstrap-Symbole, die vorher an diesen Stellen standen. */
.vm-logo { vertical-align: -0.15em; }

/* ===== Navbar ===== */
.vm-navbar {
    background: white;
    border-bottom: 1px solid var(--vm-gray-200);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow var(--vm-transition);
}

.vm-navbar.scrolled { box-shadow: var(--vm-shadow); }

.vm-navbar .navbar-brand {
    font-weight: 800;
    font-size: 1.35rem;
    background: var(--vm-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.vm-navbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--vm-gray-600);
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border-radius: var(--vm-radius-sm);
    transition: all var(--vm-transition);
    font-size: 0.925rem;
    white-space: nowrap;
}

.vm-navbar .nav-link:hover,
.vm-navbar .nav-link.active {
    color: var(--vm-primary);
    background: rgba(79,70,229,.06);
}

.vm-nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.vm-nav-burger { display: none; }

.vm-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1.5px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-sm);
    background: white;
    color: var(--vm-gray-600);
    font-size: 1.25rem;
    line-height: 1;
    transition: all var(--vm-transition);
}

.vm-burger:hover,
.vm-burger[aria-expanded="true"] {
    border-color: var(--vm-primary);
    color: var(--vm-primary);
    background: rgba(79,70,229,.06);
}

.vm-burger-menu {
    min-width: 13rem;
    padding: 0.35rem;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius);
    box-shadow: var(--vm-shadow-md);
}

.vm-burger-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--vm-radius-sm);
    color: var(--vm-gray-700);
    font-weight: 500;
    font-size: 0.95rem;
}

.vm-burger-menu .dropdown-item:hover,
.vm-burger-menu .dropdown-item.active {
    color: var(--vm-primary);
    background: rgba(79,70,229,.06);
}

/* Sechs Reiter mit Beschriftung brauchen mehr Breite, als ein Tablet hergibt —
   ab hier übernimmt das Hamburger-Menü. */
@media (max-width: 991.98px) {
    .vm-nav-links { display: none; }
    .vm-nav-burger { display: block; }
}

/* ===== Cards ===== */
.vm-card {
    background: white;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-lg);
    box-shadow: var(--vm-shadow-sm);
    transition: all var(--vm-transition);
    overflow: hidden;
}

.vm-card:hover { box-shadow: var(--vm-shadow-md); }

.vm-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--vm-gray-100);
    background: white;
    font-weight: 600;
}

.vm-card-body { padding: 1.25rem; }

.vm-card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--vm-gray-100);
    background: var(--vm-gray-50);
}

/* ===== Buttons ===== */
.vm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border: none;
    border-radius: var(--vm-radius-sm);
    padding: 0.6rem 1.25rem;
    font-size: 0.925rem;
    cursor: pointer;
    transition: all var(--vm-transition);
    text-decoration: none;
    line-height: 1.5;
}

.vm-btn:active { transform: scale(0.97); }

.vm-btn-primary {
    background: var(--vm-gradient);
    color: white;
    box-shadow: 0 2px 8px rgba(79,70,229,.3);
}
.vm-btn-primary:hover {
    box-shadow: 0 4px 16px rgba(79,70,229,.4);
    color: white;
    filter: brightness(1.05);
}

.vm-btn-success {
    background: var(--vm-success);
    color: white;
    box-shadow: 0 2px 8px rgba(16,185,129,.3);
}
.vm-btn-success:hover { box-shadow: 0 4px 16px rgba(16,185,129,.4); color: white; filter: brightness(1.05); }

.vm-btn-danger {
    background: var(--vm-danger);
    color: white;
    box-shadow: 0 2px 8px rgba(239,68,68,.3);
}
.vm-btn-danger:hover { box-shadow: 0 4px 16px rgba(239,68,68,.4); color: white; filter: brightness(1.05); }

.vm-btn-outline {
    background: white;
    color: var(--vm-gray-700);
    border: 1.5px solid var(--vm-gray-300);
}
.vm-btn-outline:hover { border-color: var(--vm-primary); color: var(--vm-primary); background: rgba(79,70,229,.04); }

.vm-btn-ghost {
    background: transparent;
    color: var(--vm-gray-500);
    padding: 0.5rem 0.75rem;
}
.vm-btn-ghost:hover { background: var(--vm-gray-100); color: var(--vm-gray-800); }

.vm-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
.vm-btn-lg { padding: 0.75rem 1.75rem; font-size: 1.05rem; }
.vm-btn-icon { padding: 0.5rem; width: 2.25rem; height: 2.25rem; }
.vm-btn-icon.vm-btn-sm { width: 2rem; height: 2rem; padding: 0.375rem; }

.vm-btn:disabled, .vm-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== Form Controls ===== */
.vm-input {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.95rem;
    border: 1.5px solid var(--vm-gray-300);
    border-radius: var(--vm-radius-sm);
    background: white;
    color: var(--vm-gray-800);
    transition: all var(--vm-transition);
}

.vm-input:focus {
    outline: none;
    border-color: var(--vm-primary-light);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

.vm-input::placeholder { color: var(--vm-gray-400); }

.vm-input-lg {
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
}

/* Code digit inputs (OTP style) */
.vm-code-digits {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.vm-code-digit {
    width: 3rem;
    height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 1.5px solid var(--vm-gray-300);
    border-radius: var(--vm-radius-sm);
    background: white;
    color: var(--vm-gray-800);
    transition: all var(--vm-transition);
    caret-color: var(--vm-primary);
}

.vm-code-digit:focus {
    outline: none;
    border-color: var(--vm-primary);
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

.vm-code-digit::placeholder {
    color: var(--vm-gray-300);
    font-weight: 400;
}

@media (max-width: 400px) {
    .vm-code-digit {
        width: 2.5rem;
        height: 3rem;
        font-size: 1.25rem;
    }
    .vm-code-digits { gap: 0.35rem; }
}

.vm-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--vm-gray-700);
    margin-bottom: 0.375rem;
}

.vm-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.vm-checkbox-wrap input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--vm-primary);
    cursor: pointer;
}

/* ===== Badges ===== */
.vm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    line-height: 1.4;
}

.vm-badge-primary { background: rgba(79,70,229,.1); color: var(--vm-primary); }
.vm-badge-success { background: var(--vm-success-light); color: #065f46; }
.vm-badge-warning { background: var(--vm-warning-light); color: #92400e; }
.vm-badge-danger { background: var(--vm-danger-light); color: #991b1b; }
.vm-badge-gray { background: var(--vm-gray-100); color: var(--vm-gray-600); }
.vm-badge-info { background: rgba(6,182,212,.1); color: #0e7490; }

.vm-badge-lg { font-size: 0.85rem; padding: 0.35rem 0.85rem; }

/* A badge that opens something. Keeps the pill look of a plain badge but has to shed
   what a button brings with it, and say that it can be clicked. */
.vm-badge-button {
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: filter var(--vm-transition);
}

.vm-badge-button:hover { filter: brightness(0.94); }

.vm-badge-button:focus-visible {
    outline: 2px solid var(--vm-primary);
    outline-offset: 2px;
}

/* ===== Alerts ===== */
.vm-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--vm-radius);
    font-size: 0.925rem;
    border: 1px solid transparent;
}

.vm-alert-danger { background: var(--vm-danger-light); color: #991b1b; border-color: #fecaca; }
.vm-alert-success { background: var(--vm-success-light); color: #065f46; border-color: #a7f3d0; }
.vm-alert-info { background: rgba(6,182,212,.08); color: #0e7490; border-color: rgba(6,182,212,.2); }

.vm-alert i { font-size: 1.1rem; margin-top: 0.1rem; flex-shrink: 0; }

/* ===== Hero ===== */
.vm-hero {
    background: var(--vm-gradient);
    color: white;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    z-index: -1;
}

.vm-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.15) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 100%, rgba(6,182,212,.2) 0%, transparent 50%);
    pointer-events: none;
}

.vm-hero h1 { color: white; }

/* Reiter über der Karte, noch auf dem Verlauf. Sie ziehen sich um ihre Höhe samt
   Abstand (3,5rem) hinauf, so bleibt die Karte, wo sie ohne Reiter stünde; der Kopf
   wird um fast ebenso viel länger. */
.vm-hero-tabbed { padding-bottom: 7.25rem; }

.vm-hero-tabs {
    display: flex;
    width: fit-content;
    gap: 0.25rem;
    height: 2.75rem;
    margin: -3.5rem auto 0.75rem;
    padding: 0.25rem;
    background: rgba(255,255,255,.16);
    border-radius: var(--vm-radius);
}

.vm-hero-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 1rem;
    border-radius: calc(var(--vm-radius) - 0.25rem);
    color: white;
    font-weight: 500;
    font-size: 0.925rem;
    text-decoration: none;
    transition: all var(--vm-transition);
}

.vm-hero-tab:hover { color: white; background: rgba(255,255,255,.14); }

.vm-hero-tab.active {
    background: white;
    color: var(--vm-primary);
    box-shadow: var(--vm-shadow-sm);
}

.vm-hero-tab:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* ===== Stat Cards ===== */
.vm-stat {
    text-align: center;
    padding: 1.25rem 1rem;
}

.vm-stat-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
}

.vm-stat-label {
    font-size: 0.8rem;
    color: var(--vm-gray-500);
    font-weight: 500;
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ===== Tables ===== */
.vm-table {
    width: 100%;
    font-size: 0.925rem;
}

.vm-table th {
    background: var(--vm-gray-50);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vm-gray-500);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--vm-gray-200);
}

.vm-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--vm-gray-100);
    vertical-align: middle;
}

.vm-table tbody tr {
    transition: background var(--vm-transition);
}

.vm-table tbody tr:hover { background: var(--vm-gray-50); }
.vm-table tbody tr:last-child td { border-bottom: none; }

.vm-td-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.25rem;
}

/* Auf schmalen Screens wird jede Zeile zu einer Karte statt zu einer Scroll-Tabelle. */
@media (max-width: 767.98px) {
    .vm-table-cards,
    .vm-table-cards tbody,
    .vm-table-cards tr,
    .vm-table-cards td {
        display: block;
        width: 100%;
    }

    .vm-table-cards thead { display: none; }
    .vm-table-cards td.vm-td-index { display: none; }

    .vm-table-cards tbody { padding: 0.75rem; }

    .vm-table-cards tbody tr {
        border: 1px solid var(--vm-gray-200);
        border-radius: var(--vm-radius);
        padding: 0.6rem 0.85rem;
        background: white;
    }

    .vm-table-cards tbody tr + tr { margin-top: 0.6rem; }
    .vm-table-cards tbody tr:hover { background: white; }

    .vm-table-cards td {
        padding: 0.25rem 0;
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 1.75rem;
        text-align: left;
    }

    .vm-table-cards td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--vm-gray-500);
    }

    .vm-table-cards td:not([data-label])::before { content: none; }

    /* Kopfzeile der Karte: laufende Nummer und Name */
    .vm-table-cards td.vm-td-title {
        font-size: 1rem;
        padding-bottom: 0.5rem;
        margin-bottom: 0.35rem;
        border-bottom: 1px solid var(--vm-gray-100);
        gap: 0.4rem;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .vm-table-cards td.vm-td-title::before {
        content: attr(data-index);
        color: var(--vm-gray-400);
        font-size: 0.8rem;
        font-weight: 600;
    }

    /* Aktionen bekommen die volle Breite und duerfen umbrechen */
    .vm-table-cards td.vm-td-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.4rem;
        padding-top: 0.5rem;
        margin-top: 0.35rem;
        border-top: 1px solid var(--vm-gray-100);
    }

    .vm-table-cards td.vm-td-title .vm-rename-row { flex: 1 1 100%; }

    .vm-table-cards td.vm-td-title .vm-rename-row .vm-input {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .vm-table-cards td .vm-progress { flex: 1 1 auto; }
}

/* ===== Progress Bars ===== */
.vm-progress {
    height: 0.5rem;
    background: var(--vm-gray-200);
    border-radius: 999px;
    overflow: hidden;
}

.vm-progress-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(.4,0,.2,1);
}

.vm-progress-lg { height: 1.25rem; }
.vm-progress-lg .vm-progress-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: white;
}

/* ===== Join Code Display ===== */
.vm-join-code {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 0.4rem;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    background: var(--vm-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (min-width: 768px) {
    .vm-join-code { font-size: 3.25rem; }
}

/* ===== QR Code Large (Modal) ===== */
.vm-qr-large svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* ===== Timer ===== */
.vm-timer {
    font-size: 1.75rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    color: var(--vm-gray-800);
}

.vm-timer-warning {
    color: var(--vm-danger) !important;
    animation: vm-pulse 1s ease-in-out infinite;
}

.vm-timer-paused {
    color: var(--vm-warning) !important;
    animation: vm-pulse 1.5s ease-in-out infinite;
}

@keyframes vm-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ===== Paused Overlay ===== */
.vm-paused-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(30, 30, 46, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Question Card ===== */
.vm-question {
    background: white;
    border: 1.5px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-lg);
    transition: all var(--vm-transition);
    overflow: hidden;
}

.vm-question:hover {
    border-color: var(--vm-gray-300);
    box-shadow: var(--vm-shadow);
}

.vm-question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--vm-gray-100);
    background: var(--vm-gray-50);
}

.vm-question-body { padding: 1.25rem; }

/* Ohne flex: 0 0 auto staucht ein langer Fragetext nur die Breite, die Höhe
   bleibt stehen — aus dem Quadrat wird ein hochkantes Rechteck. */
.vm-question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--vm-radius-sm);
    background: var(--vm-gradient);
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
}

/* ===== Status Badges ===== */
.vm-status-waiting { background: var(--vm-warning-light); color: #92400e; }
.vm-status-active { background: var(--vm-success-light); color: #065f46; }
.vm-status-finished { background: var(--vm-gray-100); color: var(--vm-gray-600); }

/* ===== Quiz Progress (Student) ===== */
.vm-quiz-timer-bar {
    background: white;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-lg);
    box-shadow: var(--vm-shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ===== Sticky Actions (Teacher) ===== */
/* Lange Prüfungen sind viele Bildschirme hoch – die Speicherleiste bleibt deshalb
   am unteren Rand sichtbar und rastet am Seitenende an ihrer normalen Stelle ein. */
.vm-sticky-actions {
    position: sticky;
    bottom: 1rem;
    z-index: 100;
    background: white;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-lg);
    box-shadow: var(--vm-shadow-md);
    padding: 0.75rem;
}

/* ===== Question Navigation ===== */
.vm-question-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    justify-content: center;
    border-top: 1px solid var(--vm-gray-100);
}

.vm-question-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--vm-radius-sm);
    border: 1.5px solid var(--vm-gray-200);
    background: white;
    color: var(--vm-gray-500);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--vm-transition);
}

.vm-question-pill:hover {
    border-color: var(--vm-primary);
    color: var(--vm-primary);
}

.vm-question-pill.active {
    background: var(--vm-gradient);
    color: white;
    border-color: transparent;
}

.vm-question-pill.answered:not(.active) {
    background: var(--vm-success-light);
    border-color: var(--vm-success);
    color: var(--vm-success);
}

.vm-question-pill.skipped {
    background: var(--vm-warning-light);
    border-color: var(--vm-warning);
    color: #92400e;
    animation: vm-pulse-soft 2s ease-in-out infinite;
}

@keyframes vm-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ===== Navigation Buttons (inside timer bar) ===== */
.vm-quiz-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.25rem 0.75rem;
}

/* Ohne Nummernleiste (nur eine Aufgabe) zieht diese Zeile die Trennlinie selbst. */
.vm-quiz-nav-buttons-alone {
    border-top: 1px solid var(--vm-gray-100);
    padding-top: 0.75rem;
}

/* ===== Question Centering ===== */
.vm-question-center {
    padding-top: 0.25rem;
}

/* ===== Drawing Canvas ===== */
.vm-drawing-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vm-drawing-container {
    border: 1.5px solid var(--vm-gray-300);
    border-radius: var(--vm-radius-sm);
    overflow: hidden;
    background: white;
    touch-action: none;
}

.vm-drawing-canvas {
    display: block;
    width: 100%;
    cursor: crosshair;
    touch-action: none;
}

/* Der Kreis des Radierers (drawingCanvas.js). Der weiße Saum hält ihn auch auf dunklen
   Strichen sichtbar. */
.vm-drawing-eraser {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: 1.5px dashed var(--vm-gray-600);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.85);
    pointer-events: none;
}

.vm-drawing-save-indicator {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-sm);
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    color: var(--vm-gray-500);
    box-shadow: var(--vm-shadow-sm);
    pointer-events: none;
    z-index: 5;
}

/* The sheet a drawing question is answered on, shown during the pre-exam briefing.
   Proportions and line spacing follow vmDrawing.init and _drawBackground. */
.vm-drawing-preview {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    aspect-ratio: 2 / 1;
    min-height: 12rem;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--vm-gray-300);
    border-radius: var(--vm-radius-sm);
    background-color: #ffffff;
    color: var(--vm-gray-400);
    font-size: 0.8rem;
}

.vm-drawing-preview-grid {
    background-image:
        linear-gradient(to right, #d0d5dd 1px, transparent 1px),
        linear-gradient(to bottom, #d0d5dd 1px, transparent 1px);
    background-size: 20px 20px;
}

.vm-drawing-preview-lined {
    background-image: linear-gradient(to bottom, transparent 27px, #c8d0da 27px);
    background-size: 100% 28px;
}

/* ===== Score Circle ===== */
.vm-score-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 auto;
    position: relative;
}

.vm-score-excellent { background: var(--vm-success-light); color: #065f46; border: 4px solid var(--vm-success); }
.vm-score-good { background: var(--vm-warning-light); color: #92400e; border: 4px solid var(--vm-warning); }
.vm-score-poor { background: var(--vm-danger-light); color: #991b1b; border: 4px solid var(--vm-danger); }

/* ===== Radio / Choice options ===== */
.vm-choice {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border: 1.5px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-sm);
    cursor: pointer;
    transition: all var(--vm-transition);
    font-size: 0.875rem;
    line-height: 1.3;
}

.vm-choice:hover { border-color: var(--vm-primary-light); background: rgba(79,70,229,.03); }
.vm-choice.selected { border-color: var(--vm-primary); background: rgba(79,70,229,.06); }

.vm-choice input[type="radio"],
.vm-choice input[type="checkbox"] {
    accent-color: var(--vm-primary);
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex-shrink: 0;
}

.vm-choice i { flex-shrink: 0; }
.vm-choice-title { font-weight: 600; color: var(--vm-gray-800); }
.vm-choice-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--vm-gray-400);
}

/* Die Kacheln stehen nebeneinander, solange sie Platz haben, und brechen erst
   auf schmalen Bildschirmen untereinander. */
.vm-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem;
}

/* Antwortoptionen im Schülerbogen: mehr Luft dazwischen und größere Flächen
   zum Antippen als die kompakten Kacheln im Start-Dialog. */
.vm-choice-list {
    display: grid;
    gap: 0.75rem;
}

.vm-choice-list .vm-choice {
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
}

/* ===== Compact form sections ===== */
/* Abschnitte trennen sich selbst durch eine feine Linie — ein vm-divider zieht
   mit 2rem Luft einen Dialog auseinander, bis er nicht mehr auf den Schirm
   passt. */
.vm-form-section + .vm-form-section {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--vm-gray-100);
}

.vm-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.vm-label-hint { font-weight: 400; font-size: 0.8rem; color: var(--vm-gray-400); }
.vm-label-link {
    float: right;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--vm-primary);
    text-decoration: none;
}
.vm-label-link:hover { text-decoration: underline; }

/* Ein Feld, das einem Abschnitt folgt (Termin, Box-Auswahl): das Eingabefeld
   bleibt schmal, die Beschriftung darf die volle Breite nutzen. */
.vm-field-narrow .vm-input { max-width: 17rem; }

.vm-form-hint {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--vm-gray-400);
}

/* ===== Modal ===== */
.vm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.vm-modal {
    width: 100%;
    max-width: 28rem;
    /* Ein Dialog, der länger ist als der Bildschirm, ragte oben und unten heraus
       und ließ sich nicht scrollen — die Schaltflächen im Fuß waren dann nicht
       erreichbar. Stattdessen bleibt er auf Bildschirmhöhe und scrollt innen. */
    max-height: 100%;
    display: flex;
}

/* Ein Dialog mit mehreren Abschnitten darf in die Breite gehen, statt in die
   Höhe zu wachsen. */
.vm-modal-wide { max-width: 34rem; }

/* Für Dialoge mit einer Tabelle darin: in 34rem bricht schon eine eingefügte
   Zeile über sechs Zeilen um, und die Liste wird höher als der Bildschirm. */
.vm-modal-xl { max-width: 52rem; }

/* Nur die Karte des Dialogs selbst — Karten im Dialoginhalt (etwa die
   Auswahlkacheln) behalten ihr eigenes Layout. */
.vm-modal > .vm-card {
    box-shadow: var(--vm-shadow-lg);
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

.vm-modal > .vm-card > .vm-card-header,
.vm-modal > .vm-card > .vm-card-footer {
    flex-shrink: 0;
}

.vm-modal > .vm-card > .vm-card-body {
    overflow-y: auto;
}

/* ===== Kontextmenü ===== */
/* Fängt den nächsten Klick ab, damit das Menü wieder zugeht. Bleibt unsichtbar,
   damit die Tabelle darunter lesbar bleibt. */
.vm-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

/* Wird von der Komponente über left/top an seine Schaltfläche gesetzt. */
.vm-menu {
    position: fixed;
    z-index: 1041;
    width: 16rem;
    padding: 0.8rem;
    background: white;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius);
    box-shadow: var(--vm-shadow-lg);
}

.vm-menu-eyebrow {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vm-gray-400);
}

.vm-menu-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vm-gray-900);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zwei beschriftete Werte statt einer Zeile mit Trennzeichen: so ist auf einen
   Blick klar, welche Zahl was ist. */
.vm-menu-facts {
    display: flex;
    gap: 0.75rem;
    margin: 0.7rem 0;
    padding: 0.5rem 0.65rem;
    background: var(--vm-gray-50);
    border-radius: var(--vm-radius-sm);
}

.vm-menu-facts > div {
    flex: 1 1 0;
    min-width: 0;
}

.vm-menu-fact-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vm-gray-400);
}

.vm-menu-fact-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--vm-gray-700);
    font-variant-numeric: tabular-nums;
}

.vm-menu-fact-set { color: var(--vm-primary); }

.vm-menu-row {
    display: flex;
    gap: 0.3rem;
}

.vm-menu-row .vm-btn {
    flex: 1 1 0;
    padding: 0.4rem 0;
    font-size: 0.78rem;
}

/* Die Uhr in der Teilnehmerzeile: für sich allein nur das Symbol, mit
   Bonuszeit zusätzlich der Wert. */
.vm-time-btn {
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    color: var(--vm-gray-500);
}

.vm-time-btn-set {
    color: var(--vm-primary);
    font-weight: 600;
}

/* ===== Empty State ===== */
.vm-empty {
    text-align: center;
    padding: 3rem 1.5rem;
}

.vm-empty-icon {
    font-size: 3rem;
    color: var(--vm-gray-300);
    margin-bottom: 1rem;
}

.vm-empty h4 { color: var(--vm-gray-500); font-weight: 600; }
.vm-empty p { color: var(--vm-gray-400); }

/* ===== Spinner ===== */
.vm-spinner {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--vm-gray-200);
    border-top-color: var(--vm-primary);
    border-radius: 50%;
    animation: vm-spin 0.7s linear infinite;
}

.vm-spinner-sm { width: 1rem; height: 1rem; border-width: 2px; }

@keyframes vm-spin { to { transform: rotate(360deg); } }

/* ===== Loading State ===== */
.vm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
    color: var(--vm-gray-400);
}


/* ===== Footer ===== */
.vm-footer {
    background: white;
    border-top: 1px solid var(--vm-gray-200);
    padding: 1.25rem 0;
    color: var(--vm-gray-400);
    font-size: 0.85rem;
}

/* ===== Cookie Banner ===== */
.vm-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1rem;
    z-index: 1060;
    pointer-events: auto;
}
.vm-cookie-banner .vm-container {
    background: white;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-lg);
    box-shadow: var(--vm-shadow-lg);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
}


/* ===== Breadcrumb ===== */
.vm-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--vm-gray-400);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.vm-breadcrumb a {
    color: var(--vm-gray-500);
    text-decoration: none;
    transition: color var(--vm-transition);
}

.vm-breadcrumb a:hover { color: var(--vm-primary); }
.vm-breadcrumb .separator { color: var(--vm-gray-300); }
.vm-breadcrumb .current { color: var(--vm-gray-700); font-weight: 500; }

/* ===== Section Headers ===== */
.vm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vm-section-header h2 {
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== Quiz Card Grid ===== */
.vm-quiz-card {
    background: white;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-lg);
    box-shadow: var(--vm-shadow-sm);
    transition: all var(--vm-transition);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.vm-quiz-card:hover {
    box-shadow: var(--vm-shadow-md);
    border-color: var(--vm-gray-300);
    transform: translateY(-2px);
}

.vm-quiz-card-body {
    padding: 1.25rem;
    flex: 1;
}

.vm-quiz-card-footer {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--vm-gray-100);
    background: var(--vm-gray-50);
}

/* ===== View Toggle (Kacheln / Liste) ===== */
.vm-view-toggle {
    display: inline-flex;
    gap: 0.125rem;
    padding: 0.2rem;
    background: var(--vm-gray-100);
    border-radius: var(--vm-radius-sm);
}

.vm-view-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: calc(var(--vm-radius-sm) - 0.2rem);
    background: transparent;
    color: var(--vm-gray-500);
    transition: all var(--vm-transition);
}

.vm-view-toggle button:hover { color: var(--vm-gray-800); }

.vm-view-toggle button.active {
    background: white;
    color: var(--vm-primary);
    box-shadow: var(--vm-shadow-sm);
}

/* ===== Tabs (Bereiche einer Seite) ===== */
/* Grundlinie und Unterstrich sind Schatten statt Rahmen, so liegt der Unterstrich
   ohne negativen Rand auf der Linie. Die Aktionen eines Reiters (Suche,
   Ansicht-Umschalter, …) stehen rechtsbündig unter den Reitern, direkt über dem
   Inhalt, zu dem sie gehören — neben fünf Reitern ist für sie kein Platz. */
.vm-tabbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.vm-tabs {
    display: flex;
    gap: 0.25rem;
    min-width: 0;
    box-shadow: inset 0 -1px 0 var(--vm-gray-200);
}

.vm-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 0.9rem;
    border: none;
    background: transparent;
    color: var(--vm-gray-500);
    font-weight: 500;
    font-size: 0.925rem;
    white-space: nowrap;
    transition: color var(--vm-transition), box-shadow var(--vm-transition);
}

.vm-tab:hover { color: var(--vm-gray-800); }

.vm-tab.active {
    color: var(--vm-primary);
    box-shadow: inset 0 -2px 0 var(--vm-primary);
}

.vm-tab:focus-visible {
    outline: 2px solid var(--vm-primary-light);
    outline-offset: -2px;
    border-radius: var(--vm-radius-sm) var(--vm-radius-sm) 0 0;
}

.vm-tab-count {
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--vm-gray-100);
    color: var(--vm-gray-600);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.vm-tab.active .vm-tab-count {
    background: rgba(var(--vm-primary-rgb), .1);
    color: var(--vm-primary);
}

/* Läuft etwas, soll man es von jedem Reiter aus sehen. */
.vm-tab-count.live,
.vm-tab.active .vm-tab-count.live {
    background: var(--vm-success-light);
    color: #065f46;
}

.vm-tabbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ===== Suchfeld ===== */
/* So hoch wie der Ansicht-Umschalter, neben dem es unter den Reitern steht. */
.vm-search {
    position: relative;
    width: 16rem;
}

.vm-search > .bi {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vm-gray-400);
    font-size: 0.85rem;
    pointer-events: none;
}

.vm-search .vm-input {
    height: 2.65rem;
    padding: 0.4rem 0.75rem 0.4rem 2.1rem;
    font-size: 0.9rem;
}

/* Fünf Reiter mit Symbolen und Zählern brauchen gut 900 px. Darunter entfallen
   die Symbole und die Schrift wird kleiner; so passen auch dreistellige Zähler
   auf 768 px. Wird es trotzdem zu eng, kürzen sich die Beschriftungen, statt
   die Seite seitlich zu verbreitern. */
@media (max-width: 991.98px) {
    .vm-tab {
        min-width: 0;
        padding: 0.7rem 0.5rem;
        font-size: 0.875rem;
    }

    .vm-tab > .bi { display: none; }
    .vm-tab-label { overflow: hidden; text-overflow: ellipsis; }
}

/* Unterhalb der Tablet-Breite, wo auch die Tabellenzeilen zu Karten werden,
   passen die Reiter nicht nebeneinander. Statt sie seitlich scrollen zu lassen —
   dann läge der gewählte womöglich außer Sicht — stehen sie zu zweit
   übereinander, im Stil des Ansicht-Umschalters. */
@media (max-width: 767.98px) {
    .vm-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
        padding: 0.25rem;
        background: var(--vm-gray-100);
        border-radius: var(--vm-radius);
        box-shadow: none;
    }

    .vm-tab {
        justify-content: center;
        padding: 0.55rem 0.4rem;
        border-radius: var(--vm-radius-sm);
        font-size: 0.875rem;
    }

    .vm-tab.active {
        background: white;
        box-shadow: var(--vm-shadow-sm);
    }

    .vm-search { flex: 1 1 auto; width: auto; }
}

/* ===== Fade-in animation ===== */
.vm-fade-in {
    animation: vm-fadeIn 0.35s ease-out;
}

@keyframes vm-fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Slide-up animation ===== */
.vm-slide-up {
    animation: vm-slideUp 0.4s ease-out;
}

@keyframes vm-slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Divider ===== */
.vm-divider {
    height: 1px;
    background: var(--vm-gray-200);
    margin: 2rem 0;
}

/* ===== Responsive Container ===== */
.vm-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .vm-container { padding: 0 1.5rem; }
}

/* ===== Misc Overrides ===== */
.darker-border-checkbox.form-check-input { border-color: var(--vm-gray-400); }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== Utility ===== */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }

.text-gradient {
    background: var(--vm-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Setup Wizard ===== */
.vm-setup-shell {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 1rem 4rem;
    position: relative;
    overflow: hidden;
}

.vm-setup-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(79,70,229,.25) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(6,182,212,.18) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.vm-setup-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 680px;
}

.vm-mode-card {
    width: 100%;
    height: 100%;
    text-align: left;
    background: rgba(255,255,255,.04);
    border: 2px solid rgba(255,255,255,.08);
    border-radius: var(--vm-radius-lg);
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    color: inherit;
    display: block;
}

.vm-mode-card:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}

.vm-mode-card.is-selected {
    background: rgba(79,70,229,.15);
    border-color: var(--vm-primary);
    box-shadow: 0 0 0 1px var(--vm-primary), 0 8px 32px rgba(79,70,229,.25);
}

.vm-mode-icon {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
    display: block;
    line-height: 1;
}

.vm-mode-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.4rem;
}

.vm-mode-desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,.5);
    line-height: 1.5;
}

.vm-setup-card {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--vm-radius-xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.vm-setup-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(255,255,255,.9);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.vm-setup-card-body { padding: 1.5rem; }

.vm-setup-card-footer {
    padding: 1.125rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vm-setup-input {
    display: block;
    width: 100%;
    padding: 0.675rem 0.9rem;
    font-size: 0.95rem;
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: var(--vm-radius-sm);
    color: white;
    transition: all 0.2s;
}

.vm-setup-input::placeholder { color: rgba(255,255,255,.28); }

.vm-setup-input:focus {
    outline: none;
    border-color: var(--vm-primary-light);
    background: rgba(255,255,255,.09);
    box-shadow: 0 0 0 3px rgba(79,70,229,.2);
}

.vm-setup-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: rgba(255,255,255,.7);
    margin-bottom: 0.375rem;
}

.vm-setup-label .req { color: #f87171; margin-left: 2px; }

.vm-setup-hint {
    font-size: 0.78rem;
    color: rgba(255,255,255,.35);
    margin-top: 0.35rem;
    line-height: 1.45;
}

.vm-setup-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--vm-radius);
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.vm-setup-alert-danger  { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.25);  color: #fca5a5; }
.vm-setup-alert-success { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.25); color: #6ee7b7; }
.vm-setup-alert-info    { background: rgba(79,70,229,.1);   border-color: rgba(79,70,229,.2);   color: rgba(255,255,255,.7); }

.vm-setup-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.vm-setup-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    transition: all 0.25s;
}

.vm-setup-step-dot.active {
    background: var(--vm-primary);
    width: 24px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(79,70,229,.6);
}

.vm-setup-step-dot.done { background: var(--vm-success); }

.vm-setup-success-icon {
    font-size: 4rem;
    color: var(--vm-success);
    filter: drop-shadow(0 0 24px rgba(16,185,129,.5));
    animation: vm-successPop 0.5s cubic-bezier(.17,.67,.3,1.3) both;
}

@keyframes vm-successPop {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.vm-setup-btn-back {
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.7);
    border-radius: var(--vm-radius-sm);
    padding: 0.575rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.vm-setup-btn-back:hover { background: rgba(255,255,255,.1); color: white; }

.test-ok   { color: #6ee7b7; }
.test-fail { color: #fca5a5; }

/* ===== Legal Pages (Impressum / Datenschutz) ===== */
.vm-legal {
    max-width: 780px;
    margin: 0 auto;
    padding: 2.5rem 1rem 4rem;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--vm-gray-600);
}

.vm-legal-head {
    margin-bottom: 1.75rem;
}

.vm-legal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vm-primary);
    background: rgba(var(--vm-primary-rgb), .08);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
}

.vm-legal-head h1 {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0.7rem 0 0.35rem;
}

.vm-legal-sub {
    font-size: 0.8125rem;
    color: var(--vm-gray-500);
    margin: 0;
}

.vm-legal-card {
    background: white;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-lg);
    box-shadow: var(--vm-shadow-sm);
    padding: 1.75rem 1.75rem 1.5rem;
}

.vm-legal-toc {
    background: var(--vm-gray-50);
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius);
    padding: 1rem 1.15rem;
    margin-bottom: 1.75rem;
}

.vm-legal-toc-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--vm-gray-500);
    margin-bottom: 0.6rem;
}

.vm-legal-toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: vm-toc;
    columns: 2;
    column-gap: 1.5rem;
}

.vm-legal-toc li {
    counter-increment: vm-toc;
    break-inside: avoid;
    font-size: 0.75rem;
    line-height: 1.9;
}

.vm-legal-toc li::before {
    content: counter(vm-toc) ".";
    color: var(--vm-gray-400);
    font-variant-numeric: tabular-nums;
    margin-right: 0.4rem;
}

.vm-legal-toc a {
    color: var(--vm-gray-600);
    text-decoration: none;
    transition: color var(--vm-transition);
}

.vm-legal-toc a:hover { color: var(--vm-primary); }

.vm-legal section + section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vm-gray-100);
}

.vm-legal h2 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--vm-gray-900);
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
    scroll-margin-top: 4.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.vm-legal h2 .vm-legal-num {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--vm-primary);
    background: rgba(var(--vm-primary-rgb), .08);
    border-radius: var(--vm-radius-sm);
    min-width: 1.5rem;
    padding: 0.1rem 0.35rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex: none;
}

.vm-legal h3 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vm-gray-500);
    margin: 1.1rem 0 0.5rem;
}

.vm-legal p {
    margin: 0 0 0.75rem;
}

.vm-legal p:last-child { margin-bottom: 0; }

.vm-legal a {
    color: var(--vm-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--vm-primary-rgb), .25);
    transition: border-color var(--vm-transition);
}

.vm-legal a:hover { border-bottom-color: var(--vm-primary); }

.vm-legal ul {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.vm-legal ul li {
    position: relative;
    padding-left: 1.05rem;
    margin-bottom: 0.2rem;
}

.vm-legal ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--vm-primary-light);
}

.vm-legal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.vm-legal-box {
    background: var(--vm-gray-50);
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius);
    padding: 0.9rem 1rem;
}

.vm-legal-box h3 { margin-top: 0; }

.vm-legal-box p:last-child { margin-bottom: 0; }

.vm-legal-dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 1.25rem;
    margin: 0;
    font-size: 0.8125rem;
}

.vm-legal-dl dt {
    color: var(--vm-gray-400);
    font-weight: 500;
}

.vm-legal-dl dd {
    margin: 0;
    color: var(--vm-gray-700);
}

.vm-legal-contact {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: linear-gradient(135deg, rgba(var(--vm-primary-rgb), .05), rgba(var(--vm-accent-rgb), .05));
    border: 1px solid rgba(var(--vm-primary-rgb), .14);
    border-radius: var(--vm-radius);
    padding: 0.9rem 1.1rem;
}

.vm-legal-contact i {
    font-size: 1.15rem;
    color: var(--vm-primary);
}

.vm-legal-note {
    font-size: 0.75rem;
    color: var(--vm-gray-400);
    text-align: center;
    margin-top: 1.25rem;
}

@media (max-width: 575.98px) {
    .vm-legal { padding: 1.75rem 0.9rem 3rem; }
    .vm-legal-card { padding: 1.25rem 1.1rem; }
    .vm-legal-toc ol { columns: 1; }
    .vm-legal-dl { grid-template-columns: 1fr; gap: 0 0; }
    .vm-legal-dl dt { margin-top: 0.5rem; }
}

/* ===== KI-Erstellung: Ladeanimation ===== */
.vm-ai-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    padding: 2rem 1rem 1.5rem;
}

.vm-ai-orb {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vm-ai-orb::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--vm-primary), var(--vm-accent), transparent 70%);
    animation: vm-spin 1.1s linear infinite;
}

.vm-ai-orb::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: white;
}

.vm-ai-orb i {
    position: relative;
    z-index: 1;
    font-size: 1.6rem;
    color: var(--vm-primary);
    animation: vm-pulse-soft 1.6s ease-in-out infinite;
}

.vm-ai-loading-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--vm-gray-800);
}

.vm-ai-loading-sub {
    font-size: 0.85rem;
    color: var(--vm-gray-500);
    margin-top: 0.25rem;
}

.vm-ai-loading-hint {
    font-size: 0.8rem;
    color: var(--vm-gray-400);
    margin-top: 0.5rem;
    min-height: 1.2em;
}

.vm-ai-dots span {
    animation: vm-blink 1.4s infinite both;
}

.vm-ai-dots span:nth-child(2) { animation-delay: 0.2s; }
.vm-ai-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes vm-blink {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

.vm-skeleton-rows {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.vm-skeleton {
    height: 0.9rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--vm-gray-100) 25%, var(--vm-gray-200) 50%, var(--vm-gray-100) 75%);
    background-size: 200% 100%;
    animation: vm-shimmer 1.5s ease-in-out infinite;
}

@keyframes vm-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vm-ai-orb::before,
    .vm-ai-orb i,
    .vm-ai-dots span,
    .vm-skeleton { animation: none; }
}

/* ===== Prüfungsvorschau (Import und KI-Erstellung) ===== */
.vm-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vm-gray-200);
    margin-bottom: 1rem;
}

.vm-preview-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--vm-gray-800);
}

.vm-preview-desc {
    font-size: 0.9rem;
    color: var(--vm-gray-500);
    margin-top: 0.15rem;
}

.vm-preview-meta {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.vm-preview-question {
    padding: 0.9rem 1rem;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius);
    background: white;
    margin-bottom: 0.75rem;
}

.vm-preview-question-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}

.vm-preview-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--vm-gray-100);
    color: var(--vm-gray-600);
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.vm-preview-points {
    margin-left: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vm-gray-500);
    white-space: nowrap;
}

.vm-preview-text {
    font-size: 0.95rem;
    color: var(--vm-gray-800);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.vm-preview-detail {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--vm-gray-600);
    overflow-wrap: anywhere;
}

.vm-preview-detail ol,
.vm-preview-detail ul {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.vm-preview-label {
    display: inline-block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--vm-gray-400);
    margin-right: 0.4rem;
}

.vm-preview-missing {
    color: #92400e;
    font-style: italic;
}

.vm-preview-gap {
    background: var(--vm-warning-light);
    color: #92400e;
    border-radius: 0.25rem;
    padding: 0 0.3rem;
    font-weight: 600;
}

.vm-preview-chip {
    display: inline-block;
    background: var(--vm-gray-100);
    color: var(--vm-gray-700);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    margin: 0.15rem 0.3rem 0.15rem 0;
    font-size: 0.82rem;
}

.vm-preview-chip.correct {
    background: var(--vm-success-light);
    color: #065f46;
}

.vm-preview-chip.muted {
    color: var(--vm-gray-500);
    border: 1px dashed var(--vm-gray-300);
    background: transparent;
}

.vm-preview-options {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.vm-preview-option {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.vm-preview-option i { color: var(--vm-gray-300); margin-top: 0.1rem; }
.vm-preview-option.correct { color: var(--vm-gray-800); font-weight: 600; }
.vm-preview-option.correct i { color: var(--vm-success); }

/* ===== Prüfungs-Ladebildschirm =====
   Liegt über der Seite, bis die WebAssembly-Prüfung ihren ersten Stand hat. Der
   Fortschritt kommt aus --blazor-load-percentage, das der Blazor-Loader beim
   Herunterladen der Laufzeit setzt; solange es fehlt, trägt der Schimmer im
   Hintergrund die Anzeige. */
.vm-exam-boot {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--vm-gray-50);
    transition: opacity 0.35s ease;
}

.vm-exam-boot.vm-exam-boot-done { opacity: 0; pointer-events: none; }
.vm-exam-boot.vm-exam-boot-gone { display: none; }

.vm-exam-boot-card {
    width: 100%;
    max-width: 24rem;
    text-align: center;
}

.vm-exam-boot-icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vm-gradient);
    color: white;
    font-size: 1.75rem;
    box-shadow: var(--vm-shadow-md);
}

.vm-exam-boot-title {
    font-size: 1.35rem;
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
}

.vm-exam-boot-name {
    color: var(--vm-gray-500);
    font-size: 0.9rem;
    margin-bottom: 1.75rem;
}

.vm-exam-boot-name i { color: var(--vm-success); }

.vm-exam-boot-bar {
    height: 0.4rem;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(90deg, var(--vm-gray-100) 25%, var(--vm-gray-200) 50%, var(--vm-gray-100) 75%);
    background-size: 200% 100%;
    animation: vm-shimmer 1.5s ease-in-out infinite;
}

/* Der Balken startet leer und still: liegt alles im Cache, ist die Prüfung nach
   einem Wimpernschlag da, und ein sofort losspringender Streifen wäre nur Unruhe.
   Meldet der Loader Zahlen, zeigt der Balken den echten Stand; bleibt nach einer
   Sekunde beides aus, schaltet das Skript auf den laufenden Streifen um. */
.vm-exam-boot-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--vm-gradient);
    transition: width 0.3s ease;
}

.vm-exam-boot-indeterminate .vm-exam-boot-bar span {
    width: 35%;
    transition: none;
    animation: vm-exam-boot-sweep 1.4s ease-in-out infinite alternate;
}

.vm-exam-boot-progress .vm-exam-boot-bar span {
    width: var(--blazor-load-percentage, 0%);
    animation: none;
}

/* Der Streifen ist 35% breit und läuft zwischen beiden Rändern hin und her –
   er verlässt den Balken nie, sonst stünde dort zwischendurch nichts. */
@keyframes vm-exam-boot-sweep {
    0% { transform: translateX(0); }
    100% { transform: translateX(186%); }
}

.vm-exam-boot-status {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--vm-gray-400);
}

.vm-exam-boot-status::after {
    content: var(--blazor-load-percentage-text, "");
    margin-left: 0.35rem;
}

/* Beide erscheinen erst, wenn das Skript die Wartezeit für zu lang hält. */
.vm-exam-boot-slow,
.vm-exam-boot-retry { display: none; }

.vm-exam-boot.vm-exam-boot-slow-state .vm-exam-boot-slow {
    display: block;
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--vm-gray-500);
}

.vm-exam-boot.vm-exam-boot-stuck-state .vm-exam-boot-retry {
    display: inline-flex;
    margin-top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .vm-exam-boot-bar { animation: none; }
    .vm-exam-boot-bar span { animation: none; transition: none; }
}

/* ===== Aufsatz (Composition) ===== */
/* The editor itself is Quill's (vendor/quill/quill.snow.css); these rules only frame it.
   The exam page sets user-select: none on its root, which a contenteditable inherits
   in Safari — writing would work, selecting a word would not. */
.vm-composition .ql-editor { user-select: text; -webkit-user-select: text; }

.vm-composition {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--vm-gray-300);
    border-radius: var(--vm-radius-sm);
    background: white;
}

.vm-composition-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--vm-gray-200);
    font-size: 0.8rem;
    color: var(--vm-gray-500);
}

.vm-composition-spacer { flex: 1 1 auto; }
.vm-composition-criteria { font-size: 0.8rem; color: var(--vm-gray-500); }
.vm-composition-save { color: var(--vm-success); white-space: nowrap; }
.vm-composition-save-pending { color: var(--vm-gray-400); }
.vm-composition-offline { color: var(--vm-warning); }

.vm-composition-warn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: #92400e;
    background: var(--vm-warning-light);
    border-bottom: 1px solid var(--vm-gray-200);
}

.vm-composition .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 1px solid var(--vm-gray-200);
    padding: 0.3rem 0.4rem;
    /* Wraps instead of scrolling: a scrolling bar would clip the colour, alignment and
       table pickers that open below it. */
}

.vm-composition .ql-toolbar .ql-drawing { font-size: 1rem; line-height: 1; color: #444; }
.vm-composition .ql-toolbar .ql-drawing:hover { color: #06c; }

.vm-composition .ql-container.ql-snow {
    border: none;
    font-family: inherit;
    font-size: 1rem;
}

.vm-composition .ql-editor {
    min-height: 50vh;
    line-height: 1.6;
}

.vm-composition-disabled .ql-toolbar { pointer-events: none; opacity: 0.5; }
.vm-composition-disabled .ql-editor { background: var(--vm-gray-50); }

/* Full screen: the same component, pinned over the whole exam page. Above the timer bar
   and the navigation, below the modals (submit dialog) and the pause and name overlays. */
.vm-composition-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1045;
    border: none;
    border-radius: 0;
}

.vm-composition-fullscreen .vm-composition-bar {
    flex-wrap: nowrap;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    min-height: 2.75rem;
    background: var(--vm-gray-50);
    font-size: 0.875rem;
}

.vm-composition-fullscreen .vm-composition-barbtn {
    padding: 0.3rem 0.65rem;
    font-size: 0.875rem;
}

.vm-composition-fullscreen .ql-container.ql-snow {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.vm-composition-fullscreen .ql-editor {
    min-height: 100%;
    padding: 1rem 1.5rem 3rem;
}

.vm-composition-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--vm-gray-600); white-space: nowrap; }
.vm-composition-time-low { color: var(--vm-danger); }

.vm-composition-barbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    background: none;
    color: var(--vm-gray-600);
    font-size: 0.75rem;
    line-height: 1.4;
    cursor: pointer;
}

.vm-composition-barbtn:hover, .vm-composition-barbtn.active { background: white; border-color: var(--vm-gray-200); }

.vm-composition-task {
    max-height: 30vh;
    overflow-y: auto;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--vm-gray-200);
    background: var(--vm-gray-50);
    font-size: 0.9rem;
    color: var(--vm-gray-700);
}

body.vm-composition-open { overflow: hidden; }

/* A drawing inside the text: its own line, never wider than the column. */
.ql-editor figure.vm-composition-drawing {
    margin: 0.5rem 0;
    cursor: pointer;
}

.ql-editor figure.vm-composition-drawing img {
    display: block;
    max-width: min(100%, 40rem);
    border: 1px solid var(--vm-gray-200);
    border-radius: 0.375rem;
}

.vm-composition-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
}

.vm-composition-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(100%, 56rem);
    max-height: 100%;
    padding: 0.75rem;
    border-radius: var(--vm-radius);
    background: white;
    box-shadow: var(--vm-shadow-lg);
}

.vm-composition-dialog-bar, .vm-composition-dialog-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.vm-composition-dialog-actions { justify-content: flex-end; }

.vm-composition-dialog-canvas {
    position: relative;
    border: 1.5px solid var(--vm-gray-300);
    border-radius: var(--vm-radius-sm);
    overflow: hidden;
    touch-action: none;
}

.vm-composition-swatches { display: inline-flex; gap: 0.3rem; }

.vm-composition-swatch {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--vm-gray-300);
    cursor: pointer;
}

.vm-composition-swatch.active { box-shadow: 0 0 0 2px var(--vm-gray-800); }

/* An essay rendered by the server (CompositionHtmlRenderer) for reading. The classes are
   the editor's, so it looks like what the student saw; only Quill's editing frame goes. */
.ql-editor.vm-composition-render {
    height: auto;
    padding: 0;
    overflow: visible;
    font-size: 1rem;
    line-height: 1.6;
    cursor: auto;
}

.vm-composition-paper {
    padding: 1rem 1.25rem;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-sm);
    background: white;
}

/* ===== Korrekturvorlagen (rubric editor) ===== */
.vm-rubric-item {
    padding: 0.75rem;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-sm);
    background: var(--vm-gray-50);
}

.vm-label-sm {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vm-gray-500);
    margin-bottom: 0.2rem;
}

/* Überschrift zum Auf- und Zuklappen, so groß wie ein vm-label. */
.vm-rubric-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: none;
    background: none;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--vm-gray-700);
}

.vm-rubric-toggle:hover { color: var(--vm-primary); }

.vm-rubric-toggle .bi {
    font-size: 0.75rem;
    transition: transform var(--vm-transition);
}

.vm-rubric-toggle[aria-expanded="true"] .bi { transform: rotate(90deg); }

.vm-rubric-summary {
    font-size: 0.85rem;
    color: var(--vm-gray-500);
}

.vm-rubric-item .vm-input { padding: 0.4rem 0.6rem; font-size: 0.875rem; }
.vm-rubric-table { padding: 0.5rem 0.75rem; border-radius: var(--vm-radius-sm); background: white; border: 1px dashed var(--vm-gray-300); }
.vm-input-invalid { border-color: var(--vm-danger) !important; }

.vm-rubric-swatch {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.vm-rubric-code {
    display: inline-block;
    min-width: 1.6rem;
    padding: 0.05rem 0.4rem;
    border: 1.5px solid var(--vm-code-color, var(--vm-gray-400));
    border-radius: 0.35rem;
    color: var(--vm-code-color, var(--vm-gray-600));
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

@media print {
    .ql-editor figure.vm-composition-drawing img { max-width: 100%; break-inside: avoid; }
    .vm-composition-paper { border: none; padding: 0; }
}

/* ===== Aufsatz korrigieren (margin marks) ===== */
.vm-review-bar {
    position: sticky;
    top: 3.75rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-sm);
    background: white;
    box-shadow: var(--vm-shadow-sm);
}

.vm-review-code {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border: 1.5px solid var(--vm-code-color, var(--vm-gray-400));
    border-radius: 0.4rem;
    background: white;
    color: var(--vm-code-color, var(--vm-gray-600));
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.vm-review-code:hover:not(:disabled), .vm-review-code.active {
    background: var(--vm-code-color, var(--vm-gray-600));
    color: white;
}

.vm-review-code:disabled { opacity: 0.45; cursor: not-allowed; }
.vm-review-code kbd {
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    background: var(--vm-gray-100);
    color: var(--vm-gray-500);
    font-size: 0.65rem;
    font-weight: 600;
}

.vm-review-hint { font-size: 0.8rem; color: var(--vm-gray-500); margin-left: 0.25rem; }

/* Text and margin side by side, the margin a narrow column on the right as on paper. */
.vm-review-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5rem;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-sm);
    background: white;
}

.vm-review-text { padding: 1rem 1.25rem; min-width: 0; }

.vm-review-margin {
    position: relative;
    border-left: 1px dashed var(--vm-gray-300);
}

.vm-margin-row {
    position: absolute;
    left: 0.3rem;
    right: 0.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
}

.vm-margin-code {
    padding: 0 0.3rem;
    border: none;
    border-radius: 0.3rem;
    background: none;
    color: var(--vm-mark-color, var(--vm-gray-600));
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
}

.vm-margin-code sup { font-size: 0.6rem; margin-left: 0.05rem; }
.vm-margin-code:hover, .vm-margin-code.active { background: var(--vm-mark-color, var(--vm-gray-600)); color: white; }
.vm-margin-pending { outline: 1.5px dashed var(--vm-mark-color, var(--vm-gray-400)); }

/* A marked passage: underlined in the colour of its error type, tinted on hover. */
.vm-composition-render .vm-mark {
    box-shadow: inset 0 -2px 0 var(--vm-mark-color, var(--vm-gray-500));
    background: color-mix(in srgb, var(--vm-mark-color, #64748b) 10%, transparent);
    cursor: pointer;
}

.vm-composition-render .vm-mark-multi { box-shadow: inset 0 -2px 0 var(--vm-mark-color), inset 0 -4px 0 white, inset 0 -6px 0 var(--vm-gray-500); }
.vm-composition-render .vm-mark:hover,
.vm-composition-render .vm-mark-active { background: color-mix(in srgb, var(--vm-mark-color, #64748b) 28%, transparent); }

.vm-composition-render figure.vm-mark { outline: 2px solid var(--vm-mark-color, var(--vm-gray-500)); outline-offset: 2px; box-shadow: none; }
.vm-composition-render figure.vm-mark-active { outline-width: 3px; }
.vm-composition-render figure.vm-review-selected { outline: 2px dashed var(--vm-primary); outline-offset: 2px; }
.vm-review-text .vm-composition-render figure { cursor: pointer; }

.vm-review-comments { margin-top: 0.75rem; }
.vm-review-comment {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-sm);
    background: white;
    font-size: 0.875rem;
    cursor: pointer;
}

.vm-review-comment + .vm-review-comment { margin-top: 0.35rem; }
.vm-review-comment.active { border-color: var(--vm-primary); box-shadow: 0 0 0 2px rgba(79,70,229,.15); }
.vm-review-quote { color: var(--vm-gray-500); font-style: italic; }

/* An AI mark nobody has decided on: dashed, so it does not pass for the teacher's own. */
.vm-composition-render .vm-mark-pending {
    box-shadow: none;
    background: color-mix(in srgb, var(--vm-mark-color, #64748b) 7%, transparent);
    text-decoration: underline dashed var(--vm-mark-color, var(--vm-gray-500));
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.vm-composition-render figure.vm-mark-pending { outline-style: dashed; }

.vm-ai-criterion { font-size: 0.85rem; padding: 0.35rem 0; border-bottom: 1px solid var(--vm-gray-100); }
.vm-ai-criterion:last-child { border-bottom: none; }

/* ===== Returned and printed essays ===== */
/* The codes stand in the text flow where their mark begins (absolutely positioned without
   a top, so they keep their line) and are pushed sideways into a margin on the right. */
.vm-return {
    padding: 1rem 1.25rem;
    border: 1px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-sm);
    background: white;
}

.vm-return-text {
    position: relative;
    margin-right: 4.5rem;
}

.vm-return-text::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + 0.45rem);
    border-left: 1px dashed var(--vm-gray-300);
}

.vm-pm {
    position: absolute;
    left: calc(100% + 0.8rem);
    color: var(--vm-mark-color, var(--vm-gray-600));
    font-size: 0.85rem;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    white-space: nowrap;
}

.vm-pm sup { font-size: 0.6rem; margin-left: 0.05rem; }

@media print {
    .vm-return { border: none; padding: 0; }
    .vm-return-text { margin-right: 3.5rem; }
}

/* ===== Textmaterial ===== */
/* Zeile für Zeile wie gedruckt: Ein Zeilenende im Text ist eine Zeile. Eine zu lange
   Zeile bricht mit hängendem Einzug um, so dass man auch auf dem Handy sieht, wo die
   nächste Zeile beginnt. Ihre Nummer bleibt bei der ersten Bildschirmzeile. */
.vm-material {
    font-size: 0.95rem;
    line-height: 1.6rem;
    color: var(--vm-gray-800);
}

.vm-material-line {
    position: relative;
    padding-left: 3.75rem;
    text-indent: -0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Die Nummer kommt aus dem Attribut, damit sie beim Kopieren eines Zitats nicht
   mitkommt. Jede fünfte steht da, die übrigen zeigt der Mauszeiger. */
.vm-material-line::before {
    content: attr(data-n);
    position: absolute;
    left: 0;
    width: 2.25rem;
    text-align: right;
    text-indent: 0;
    font-size: 0.75rem;
    color: var(--vm-gray-400);
    font-variant-numeric: tabular-nums;
    visibility: hidden;
    user-select: none;
}

.vm-material-line.vm-material-counted::before,
.vm-material-line:hover::before { visibility: visible; }

.vm-material-line:hover { background: var(--vm-gray-50); }

.vm-material-gap { height: 0.8rem; }

.vm-material-heading {
    padding-left: 3rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0.25rem 0 0.6rem;
}

.vm-material-h1 { font-size: 1.15rem; }
.vm-material-h2 { font-size: 1.05rem; }
.vm-material-h3 { font-size: 0.95rem; }

/* Der Lesedialog: so breit wie eine gedruckte Seite, damit eine Zeile aus einem
   Buch meist auch am Bildschirm eine Zeile bleibt. Links trägt die Zeilenzählung
   den Abstand. */
.vm-modal-material { max-width: 48rem; }
.vm-modal-material > .vm-card > .vm-card-body { padding: 1.25rem 1.5rem 1.5rem 0.5rem; }

.vm-material-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-material-tabs {
    margin: -1rem 0;
    overflow-x: auto;
}

/* Der Editor der Lehrkraft: links der Text ohne Umbruch, so dass jede Zeile im Feld
   eine echte Zeile ist; rechts dieselbe Ansicht wie beim Schüler. */
.vm-modal-material-editor { max-width: 72rem; }

.vm-material-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.vm-material-editor-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vm-material-input,
.vm-material-preview {
    height: 55vh;
}

.vm-material-input {
    font-size: 0.9rem;
    line-height: 1.6rem;
    resize: none;
}

.vm-material-preview {
    overflow-y: auto;
    padding: 0.625rem 0.875rem 0.625rem 0;
    border: 1.5px solid var(--vm-gray-200);
    border-radius: var(--vm-radius-sm);
    background: white;
}

@media (max-width: 860px) {
    .vm-material-editor { grid-template-columns: minmax(0, 1fr); }
    .vm-material-input,
    .vm-material-preview { height: 35vh; }
}