/* ==========================================================================
   praeppen.ch – Design-System (übernommen von zertifit)
   Helle Flächen, weisse Karten mit weichem Schatten, Pill-Navigation,
   Violett als Daten-/Fortschrittsfarbe, Blau als Aktionsfarbe.
   Keine externen Ressourcen (CSP: default-src 'self').
   ========================================================================== */

/* ---------- Schrift (selbst gehostet, Latin-Subset) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
    --c-bg: #F4F4F8;
    --c-surface: #FFFFFF;
    --c-surface-2: #F8F8FC;
    --c-border: rgba(0, 0, 0, .06);
    --c-shadow: 0 2px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .04);
    --c-shadow-md: 0 8px 24px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .05);

    --c-primary: #0078D4;
    --c-primary-h: #005a9e;
    --c-primary-lt: #EEF6FD;
    --c-accent: #7C3AED;
    --c-accent-lt: #F3EEFF;
    --c-accent-2: #A78BFA;

    --c-success: #059669;
    --c-success-lt: #ECFDF5;
    --c-danger: #DC2626;
    --c-danger-lt: #FEF2F2;
    --c-warning: #D97706;
    --c-warning-lt: #FFFBEB;

    --c-text: #111827;
    --c-text-2: #5B6270;
    --c-text-3: #646B78;

    /* Textfarben auf Flächen (WCAG AA ≥ 4.5:1 auf Weiss, Hintergrund und *-lt-Flächen) */
    --c-primary-text: #005A9E;
    --c-success-text: #047857;
    --c-warning-text: #92400E;
    --c-accent-text: #6D28D9;
    --c-danger-text: #B91C1C;

    --c-track: #ECECF3;
    --c-pill-bg: #EEEEF4;
    --c-ring-1: #7C3AED;
    --c-ring-2: #9D6EF5;
    --c-ring-3: #C4B5FD;

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 15px;

    --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem;
    --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem;

    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

    --header-h: 60px;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* Kompatibilitäts-Aliase für ältere Views mit Inline-Styles */
    --color-primary: var(--c-primary);
    --color-primary-hover: var(--c-primary-h);
    --color-primary-light: var(--c-primary-lt);
    --color-bg: var(--c-bg);
    --color-surface: var(--c-surface);
    --color-surface-hover: var(--c-surface-2);
    --color-border: var(--c-border);
    --color-border-dark: rgba(0, 0, 0, .12);
    --color-text: var(--c-text);
    --color-text-muted: var(--c-text-2);
    --color-success: var(--c-success);
    --color-success-bg: var(--c-success-lt);
    --color-warning: var(--c-warning);
    --color-warning-bg: var(--c-warning-lt);
    --color-danger: var(--c-danger);
    --color-danger-bg: var(--c-danger-lt);
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --radius-lg: var(--r-lg);
    --shadow-sm: var(--c-shadow);
    --shadow-md: var(--c-shadow-md);
}

[data-theme="dark"] {
    --c-bg: #0E0E14;
    --c-surface: #1A1A24;
    --c-surface-2: #20202E;
    --c-border: rgba(255, 255, 255, .08);
    --c-shadow: 0 2px 12px rgba(0, 0, 0, .4);
    --c-shadow-md: 0 10px 28px rgba(0, 0, 0, .5);
    --c-text: #F9FAFB;
    --c-text-2: #9CA3AF;
    --c-text-3: #8E95A3;
    --c-primary-lt: #1A2E3D;
    --c-primary-text: #6CB8F6;
    --c-success-text: #34D399;
    --c-warning-text: #FBBF24;
    --c-accent-text: #C4B5FD;
    --c-danger-text: #F87171;
    --c-accent-lt: #2D1F4A;
    --c-success-lt: #0D2018;
    --c-danger-lt: #2A0E0E;
    --c-warning-lt: #2A1E08;
    --c-track: #2A2A3A;
    --c-pill-bg: #14141C;
    --color-border-dark: rgba(255, 255, 255, .16);
    color-scheme: dark;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--font-size-base); -webkit-text-size-adjust: 100%; }
:root, body { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
@media (prefers-reduced-motion: reduce) { :root, body { transition: none; } }
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--c-text);
    background:
        radial-gradient(900px 520px at -10% 105%, rgba(167, 139, 250, .16), transparent 60%),
        radial-gradient(700px 420px at 8% 100%, rgba(244, 114, 182, .08), transparent 60%),
        var(--c-bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv11', 'ss01';
}
[data-theme="dark"] body {
    background:
        radial-gradient(900px 520px at -10% 105%, rgba(124, 58, 237, .14), transparent 60%),
        var(--c-bg);
}
/* Formularelemente erben die Seitenschrift statt Browser-Default (13.333px) */
button, input, select, textarea { font: inherit; }

h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--c-text); }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-l); }
h3 { font-size: var(--fs-m); }
p { margin: 0 0 var(--s-3); }
a { color: var(--c-primary-text); text-decoration: none; }
a:hover { color: var(--c-primary-h); }
img, svg { max-width: 100%; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--c-accent-lt); color: var(--c-text); }

.container { max-width: 1240px; margin: 0 auto; padding: 0 var(--s-5); }
.site-main { min-height: 75vh; padding: var(--s-4) 0 var(--s-10); }
.skip-link { position: absolute; left: -999px; top: var(--s-2); z-index: 200; background: var(--c-surface); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); box-shadow: var(--c-shadow-md); }
.skip-link:focus { left: var(--s-4); }

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; display: inline-block; vertical-align: -.25em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1em; height: 1em; vertical-align: -.15em; }
.icon--lg { width: 1.6em; height: 1.6em; }

.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; }
.muted { color: var(--c-text-2); }
.small { font-size: var(--fs-s); }
.text-gradient { background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-2); margin: 0 0 var(--s-2); }
kbd { font-family: var(--font); font-size: var(--fs-xs); padding: 1px 6px; border-radius: 6px; background: var(--c-surface-2); box-shadow: inset 0 -1px 0 var(--c-border), 0 0 0 1px var(--c-border); }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 1px 0 var(--c-border), 0 4px 18px rgba(0, 0, 0, .03);
}
[data-theme="dark"] .site-header { background: rgba(26, 26, 36, .82); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-text); font-weight: 600; font-size: var(--fs-l); letter-spacing: -.03em; }
.brand:hover { color: var(--c-text); }
.brand__logo { width: 36px; height: 36px; flex-shrink: 0; display: block; filter: drop-shadow(0 3px 8px rgba(124, 58, 237, .25)); }
.brand__dot { color: var(--c-primary-text); }

.pill-nav { display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--c-pill-bg); border-radius: var(--r-pill); overflow-x: auto; scrollbar-width: none; }
.pill-nav::-webkit-scrollbar { display: none; }
.pill-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--r-pill); font-size: var(--fs-s); font-weight: 500; color: var(--c-text-2); white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.pill-nav__link:hover { color: var(--c-text); }
.pill-nav__link.is-active { background: var(--c-surface); color: var(--c-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
[data-theme="dark"] .pill-nav__link.is-active { background: var(--c-surface-2); }
.pill-nav__icon { width: 16px; height: 16px; display: none; }

/* Hamburger-Button (nur mobil sichtbar, siehe @media 720px) */
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; margin-left: auto; background: none; border: none; cursor: pointer; border-radius: var(--r-sm); flex-shrink: 0; }
.nav-toggle:hover { background: rgba(127, 127, 127, .12); }
.nav-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--c-text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle__bar { transition: none; } }

.header-actions { display: flex; align-items: center; gap: var(--s-2); }
.icon-btn {
    position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
    display: inline-grid; place-items: center; color: var(--c-text);
    background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border), 0 1px 3px rgba(0, 0, 0, .04);
    transition: box-shadow .2s, transform .2s;
}
.icon-btn:hover { color: var(--c-text); box-shadow: 0 0 0 1px var(--c-border), var(--c-shadow-md); }
.icon-btn .icon { width: 18px; height: 18px; }
.icon-btn--dot::after { content: ''; position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-danger); box-shadow: 0 0 0 2px var(--c-surface); }
.theme-toggle {
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; font: inherit; font-size: var(--fs-base);
    display: inline-grid; place-items: center; flex-shrink: 0;
    color: var(--c-text-2); background: transparent;
    transition: background-color .2s ease, color .2s ease;
}
.theme-toggle:hover { color: var(--c-text); background: rgba(127, 127, 127, .12); }
.theme-toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.theme-icon--sun { display: none; }
[data-theme="dark"] .theme-icon--sun { display: block; }
[data-theme="dark"] .theme-icon--moon { display: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; font-size: var(--fs-s); font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--c-accent), var(--c-primary)); box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px var(--c-border); }
.avatar:hover { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { margin-top: var(--s-8); padding: var(--s-10) 0; background: var(--c-surface); box-shadow: 0 -1px 0 var(--c-border); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-6); }
.site-footer__brand { font-weight: 600; font-size: var(--fs-m); margin-bottom: var(--s-1); }
.site-footer__text { font-size: var(--fs-s); color: var(--c-text-2); max-width: 560px; margin: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-5); font-size: var(--fs-s); }
.site-footer__links a { color: var(--c-text-2); }
.site-footer__links a:hover { color: var(--c-text); }

/* ---------- Karten ---------- */
.card, .stat-card {
    position: relative; background: var(--c-surface); border-radius: var(--r-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05); padding: var(--s-4); border: 0;
    transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card--hover:hover, a.card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.08); transform: translateY(-2px); }
[data-theme="dark"] .card, [data-theme="dark"] .stat-card { box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); }
[data-theme="dark"] .card--hover:hover, [data-theme="dark"] a.card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.4); }
a.card { color: inherit; display: block; }
.card--tight { padding: var(--s-3); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.card__title { font-size: var(--fs-m); font-weight: 600; margin: 0; }
.card__sub { font-size: var(--fs-s); color: var(--c-text-2); margin: 2px 0 0; }
.card-arrow {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center;
    color: var(--c-text); background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border);
    transition: background .2s, color .2s, transform .2s;
}
.card-arrow .icon { width: 16px; height: 16px; }
.card-arrow:hover { background: var(--c-text); color: var(--c-surface); transform: rotate(8deg); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 40px; padding: 0 var(--s-5); border-radius: var(--r-pill); border: 1px solid transparent;
    font-family: inherit; font-size: var(--fs-base); font-weight: 500; letter-spacing: .01em; line-height: 1.25;
    cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none; text-align: center;
    max-width: 100%;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .1s;
}
.btn .icon { width: 16px; height: 16px; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary, .btn-gradient, .btn-submit { background: var(--c-primary); color: #fff; box-shadow: 0 4px 12px rgba(0, 120, 212, .22); }
.btn-primary:hover, .btn-gradient:hover, .btn-submit:hover { background: var(--c-primary-h); color: #fff; }
.btn-accent { background: var(--c-accent); color: #fff; box-shadow: 0 4px 12px rgba(124, 58, 237, .25); }
.btn-accent:hover { background: #6D28D9; color: #fff; }
.btn-ghost { background: transparent; color: var(--c-primary-text); border-color: var(--c-primary); }
.btn-ghost:hover { background: var(--c-primary-lt); color: var(--c-primary-text); }
.btn-ghost.is-active { background: var(--c-warning-lt); color: var(--c-warning-text); border-color: var(--c-warning); }
.btn-secondary, .btn-light { background: var(--c-surface); color: var(--c-text); box-shadow: 0 0 0 1px var(--c-border), 0 1px 3px rgba(0, 0, 0, .05); }
.btn-secondary:hover, .btn-light:hover { color: var(--c-text); box-shadow: 0 0 0 1px var(--c-border), var(--c-shadow-md); }
.btn-success { background: var(--c-success); color: #fff; }
.btn-success:hover { background: #047857; color: #fff; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { background: #B91C1C; color: #fff; }
.btn-sm { min-height: 34px; padding: 0 var(--s-4); font-size: var(--fs-s); }
.btn-lg { min-height: 48px; padding: 0 var(--s-6); font-size: var(--fs-base); }
.btn-block { width: 100%; }
/* Lange Button-Texte dürfen umbrechen, ohne dass sich Zeilen überlagern */
.btn { padding-top: 6px; padding-bottom: 6px; }
.btn-block, .btn-wrap { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) { .btn { white-space: normal; overflow-wrap: break-word; } .admin-table .btn, .backup-table .btn { white-space: nowrap; overflow-wrap: normal; } }

/* ---------- Chips & Badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; line-height: 1.5; background: var(--c-surface-2); color: var(--c-text-2); white-space: nowrap; }
.chip .icon { width: 12px; height: 12px; stroke-width: 2; }
.chip--success { background: var(--c-success-lt); color: var(--c-success-text); }
.chip--danger { background: var(--c-danger-lt); color: var(--c-danger-text); }
.chip--warning { background: var(--c-warning-lt); color: var(--c-warning-text); }
.chip--accent { background: var(--c-accent-lt); color: var(--c-accent-text); }
.chip--primary { background: var(--c-primary-lt); color: var(--c-primary-text); }
[data-theme="dark"] .chip--accent { color: var(--c-accent-2); }
.badge, .course-code-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; white-space: nowrap; background: var(--c-primary-lt); color: var(--c-primary-text); }
.course-level-badge { display: inline-flex; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; background: var(--c-surface-2); color: var(--c-text-2); }
.top20-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--c-warning-lt); color: var(--c-warning-text); }

/* ---------- Fortschritt ---------- */
.progress, .progress-bar-container { height: 8px; border-radius: 4px; background: var(--c-track); overflow: hidden; position: relative; }
.progress__fill, .progress-bar-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2)); transition: width .6s var(--ease); }
.progress--lg { height: 12px; border-radius: 6px; }
.progress--striped .progress__fill {
    background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px),
        linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
}
.progress--success .progress__fill { background: linear-gradient(90deg, var(--c-success), #34D399); }
.progress--danger .progress__fill { background: linear-gradient(90deg, var(--c-danger), #F87171); }
.progress__mark { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--c-text); opacity: .35; }

/* ---------- Seitenköpfe ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.page-head h1 { margin: 0; }
.page-head p { margin: var(--s-1) 0 0; color: var(--c-text-2); }
.section-block { margin-top: var(--s-8); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.section-head h2 { margin: 0; }
.link-arrow { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-s); font-weight: 500; }
.link-arrow .icon { width: 16px; height: 16px; transition: transform .2s; }
.link-arrow:hover .icon { transform: translateX(2px); }

.empty-state { text-align: center; padding: var(--s-12) var(--s-6); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--c-shadow); }
.empty-state__icon { width: 56px; height: 56px; margin: 0 auto var(--s-4); border-radius: 50%; display: grid; place-items: center; background: var(--c-accent-lt); color: var(--c-accent-text); }
.empty-state__icon .icon { width: 26px; height: 26px; }
.empty-state p { color: var(--c-text-2); max-width: 520px; margin: 0 auto var(--s-5); }

.info-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); margin-bottom: var(--s-6); border-radius: var(--r-lg); background: var(--c-primary-lt); color: var(--c-text); }
.info-banner > .icon { color: var(--c-primary-text); }
.info-banner > span { flex: 1; min-width: 220px; }
.info-banner--danger { background: var(--c-danger-lt); }
.info-banner--danger > .icon { color: var(--c-danger-text); }

/* ---------- Startseite / Kurse ---------- */
.hero { text-align: center; padding: var(--s-5) var(--s-4) var(--s-5); }
.hero h1 { font-size: var(--fs-xl); letter-spacing: -.035em; margin-bottom: var(--s-3); }
.hero p { font-size: var(--fs-m); color: var(--c-text-2); max-width: 680px; margin: 0 auto; }
.filters-bar { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-3); margin-bottom: var(--s-6); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--c-shadow); }
.filters-bar input, .filters-bar select, .form-control {
    flex: 1; min-width: 180px; min-height: 44px; padding: 0 var(--s-4); font: inherit; font-size: var(--fs-base);
    color: var(--c-text); background: var(--c-surface-2); border: 1px solid transparent; border-radius: var(--r-md);
    transition: border-color .2s, background .2s;
}
.filters-bar input:focus, .filters-bar select:focus, .form-control:focus { outline: none; border-color: var(--c-primary); background: var(--c-surface); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], select, textarea {
    font: inherit; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--color-border-dark); border-radius: var(--r-md);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-primary-lt); border-color: var(--c-primary); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-5); }
.course-stats { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--c-border); font-size: var(--fs-s); color: var(--c-text-2); }
.course-stats .icon { width: 16px; height: 16px; color: var(--c-accent-text); }
.seo-card-item { background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--c-shadow); }

/* ---------- Lernmodus ---------- */
.learn-container { max-width: 760px; margin: 0 auto; }
.learn-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
/* === Flashcard – v23.8 Modern === */
.flashcard-wrapper { perspective: 1400px; margin: var(--s-6) 0; }
.flashcard {
    position: relative; min-height: 320px; padding: var(--s-8) var(--s-8) var(--s-10);
    background: var(--c-surface); border-radius: 24px;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 6px rgba(0,0,0,.04), 0 12px 28px rgba(0,0,0,.07), 0 24px 48px rgba(0,0,0,.04);
    cursor: pointer; display: flex; flex-direction: column; justify-content: center;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
    border-left: 4px solid var(--c-primary);
}
.flashcard:hover {
    transform: translateY(-3px) scale(1.005);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 12px rgba(0,0,0,.06), 0 20px 40px rgba(0,0,0,.10), 0 32px 56px rgba(0,0,0,.05);
}
.flashcard.is-answered { border-left-color: var(--c-accent); }
.flashcard-meta { position: absolute; top: var(--s-4); left: var(--s-6); right: var(--s-6); display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-3); }
.flashcard-question { font-size: var(--fs-l); font-weight: 600; line-height: 1.5; text-align: center; letter-spacing: -.02em; color: var(--c-text); margin: var(--s-4) 0 0; }
/* Trennlinie Frage → Antwort (nur sichtbar, wenn die Karte umgedreht ist) */
.flashcard-divider { display: none; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; }
.flashcard.is-answered .flashcard-divider { display: flex; animation: fade-up .3s var(--ease); }
.flashcard-divider::before, .flashcard-divider::after { content: ''; flex: 1; height: 1px; background: var(--c-border); }
.flashcard-divider-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-primary); opacity: .4; }
.flashcard-answer { font-size: var(--fs-m); line-height: 1.6; text-align: center; color: var(--c-text); font-weight: 400; }
.flashcard-tap-hint { text-align: center; font-size: var(--fs-xs); color: var(--c-text-3); }
[data-theme="dark"] .flashcard { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 8px rgba(0,0,0,.3), 0 16px 32px rgba(0,0,0,.4); border-left-color: var(--c-primary); }
[data-theme="dark"] .flashcard.is-answered { border-left-color: var(--c-accent); }
[data-theme="dark"] .flashcard:hover { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 16px rgba(0,0,0,.4), 0 24px 48px rgba(0,0,0,.5); }
@media (prefers-reduced-motion: reduce) { .flashcard, .flashcard:hover, .course-card:hover, .card--hover:hover, a.card:hover, .learn-actions .btn:hover { transform: none; } .flashcard.is-answered .flashcard-divider { animation: none; } }
.explanation-box { display: none; margin-top: var(--s-4); padding: var(--s-5); background: var(--c-accent-lt); border-left: 3px solid var(--c-accent); border-radius: var(--r-md); font-size: var(--fs-base); }
.explanation-box.visible { display: block; animation: fade-up .3s var(--ease); }
.explanation-source { margin-top: var(--s-3); font-size: var(--fs-s); color: var(--c-text-2); }
.explanation-source a { font-weight: 500; }
.learn-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-5); }
.learn-actions .btn { min-height: 48px; border-radius: 14px; font-weight: 600; letter-spacing: .01em; transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); }
.learn-actions .btn-success { background: linear-gradient(135deg, #059669, #10B981); color: #fff; box-shadow: 0 4px 14px rgba(5,150,105,.25); }
.learn-actions .btn-danger { background: linear-gradient(135deg, #DC2626, #EF4444); color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,.20); }
.learn-actions .btn:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.05); }
.learn-actions .btn:disabled { opacity: .55; box-shadow: none; }
/* Lernfortschritt */
.progress.learn-progress-bar { height: 6px; border-radius: var(--r-pill); background: var(--c-track); overflow: hidden; margin-bottom: var(--s-4); }
.learn-progress-bar .learn-progress-fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); transition: width .4s var(--ease); }
.learn-shortcuts-hint { text-align: center; margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--c-text-3); }
/* Wisch-Tipp nur auf Touch-Geräten, am Desktop stattdessen Tastatur-Tipp */
.learn-tip--touch { display: none; }
@media (hover: none) and (pointer: coarse) {
    .learn-tip--touch { display: inline; }
    .learn-tip--desk { display: none; }
    /* Ohne Tastatur sind Tastenkürzel-Badges und -Hilfe nur Ballast */
    #btn-shortcuts, .btn-rate kbd, .fc-confidence__btn kbd, .exam-hint { display: none; }
}
.session-done { text-align: center; padding: var(--s-10) var(--s-6); background: var(--c-surface); border-radius: var(--r-xl); box-shadow: var(--c-shadow); }
.session-done__icon { width: 64px; height: 64px; margin: 0 auto var(--s-4); border-radius: 50%; display: grid; place-items: center; color: var(--c-success-text); background: var(--c-success-lt); }
.session-done__icon .icon { width: 30px; height: 30px; }
/* Abschluss-Bildschirm der Lernsitzung (app.js finishSession): Klassen statt Inline-Styles, wegen CSP */
.session-done__title { font-size: var(--fs-xl); margin-bottom: 1rem; }
.session-done__lead { color: var(--color-text-muted); margin-bottom: 2rem; }
.session-done__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.session-done__stat { padding: 1rem; border-radius: var(--radius-md); }
.session-done__stat--success { background: var(--color-success-bg); }
.session-done__stat--warning { background: var(--color-warning-bg); }
.session-done__stat--neutral { background: var(--color-surface-hover); }
.session-done__value { font-size: var(--fs-xl); font-weight: 800; color: var(--color-text); }
.session-done__stat--success .session-done__value { color: var(--c-success-text); }
.session-done__stat--warning .session-done__value { color: var(--c-warning-text); }
.session-done__label { font-size: var(--fs-s); font-weight: 600; }
.session-done__actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* Unsichtbarer Icon-Sprite (inline im <body>, siehe header.php): Klasse statt style="display:none", wegen CSP */
.zf-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   Dashboard
   ========================================================================== */
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.dash-head h1 { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -.035em; margin: 0; }
.dash-head p { margin: var(--s-1) 0 0; color: var(--c-text-2); }
.dash-head__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin-bottom: var(--s-6); }
.kpi-card { display: flex; flex-direction: column; gap: var(--s-1); min-height: 150px; }
.kpi-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.kpi-card__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--c-text); background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-border); }
.kpi-card__icon .icon { width: 20px; height: 20px; }
.kpi-card__value { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin-top: var(--s-5); font-variant-numeric: tabular-nums; }
.kpi-card__value small { font-size: var(--fs-base); font-weight: 500; color: var(--c-text-2); margin-left: 2px; }
.kpi-card__label { font-size: var(--fs-s); color: var(--c-text-2); }

.dash-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--s-4); align-items: start; }
.dash-main, .dash-side { display: grid; gap: var(--s-4); min-width: 0; }

/* Ringe */
.rings-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.ring-item { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-2); border-radius: var(--r-md); color: inherit; background: var(--c-surface-2); transition: background .2s, transform .2s; }
.ring-item:hover { color: inherit; transform: translateY(-1px); }
.progress-ring { width: 128px; height: 128px; }
.progress-ring circle { fill: none; stroke-width: 10; }
.progress-ring__track { stroke: var(--c-track); }
.progress-ring__value { stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset 1s var(--ease); }
.progress-ring--1 .progress-ring__value { stroke: var(--c-ring-1); }
.progress-ring--2 .progress-ring__value { stroke: var(--c-ring-2); }
.progress-ring--3 .progress-ring__value { stroke: var(--c-ring-3); }
.progress-ring text { text-anchor: middle; fill: var(--c-text); font-family: var(--font); }
.progress-ring__pct { font-size: var(--fs-l); font-weight: 600; letter-spacing: -.02em; }
.progress-ring__sub { font-size: var(--fs-xs); fill: var(--c-text-2) !important; }
.ring-item__label { font-size: var(--fs-s); font-weight: 600; }
.ring-item__title { font-size: var(--fs-xs); color: var(--c-text-2); text-align: center; line-height: 1.3; }

/* Charts */
.chart-box { position: relative; height: 280px; }
.chart-box canvas { position: relative; z-index: 1; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--fs-xs); color: var(--c-text-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c-accent-2); }
.chart-legend i.is-line { height: 2px; border-radius: 1px; background: var(--c-accent); }
.chart-legend i.is-pass { height: 0; border-top: 2px dashed var(--c-danger); background: none; }
.chart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); min-height: 220px; text-align: center; color: var(--c-text-2); background: var(--c-surface-2); border-radius: var(--r-md); padding: var(--s-6); }
.chart-empty .icon { width: 32px; height: 32px; color: var(--c-accent-2); }
.chart-empty p { margin: 0; max-width: 380px; }

/* Empfehlung */
.next-up { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.next-up__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--c-accent-text); background: var(--c-accent-lt); flex-shrink: 0; }
.next-up__icon .icon { width: 24px; height: 24px; }
.next-up__body { flex: 1; min-width: 220px; }
.next-up__title { font-size: var(--fs-m); margin: var(--s-2) 0 var(--s-1); }
.next-up__reason { font-size: var(--fs-s); color: var(--c-text-2); margin: 0; }
.activity-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 2px; }
.activity-list li a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); color: inherit; transition: background .2s; }
.activity-list li a:hover { background: var(--c-surface-2); }
.activity-list__dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.activity-list__dot .icon { width: 16px; height: 16px; }
.activity-list__dot.is-pass { background: var(--c-success-lt); color: var(--c-success-text); }
.activity-list__dot.is-fail { background: var(--c-danger-lt); color: var(--c-danger-text); }
.activity-list__main { flex: 1; min-width: 0; }
.activity-list__title { display: block; font-size: var(--fs-s); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-list__meta { font-size: var(--fs-xs); color: var(--c-text-2); }
.activity-list__score { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Sidebar – Status-Karte */
.status-card__big { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-2) 0 var(--s-1); }
.status-card__big strong { font-size: var(--fs-xl); letter-spacing: -.03em; line-height: 1; }
.status-card__rows { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-3); font-size: var(--fs-s); }
.status-card__rows li { display: flex; justify-content: space-between; gap: var(--s-2); color: var(--c-text-2); }
.status-card__rows strong { color: var(--c-text); font-variant-numeric: tabular-nums; }

/* Semi-Donut */
.semi-donut { position: relative; height: 150px; margin: var(--s-2) auto 0; max-width: 260px; }
.semi-donut canvas { position: relative; z-index: 1; }
.semi-donut__center { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; z-index: 2; pointer-events: none; }
.semi-donut__value { display: block; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.semi-donut__label { display: block; font-size: var(--fs-xs); color: var(--c-text-2); margin-top: 4px; }
.split-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.split-stats div { display: flex; flex-direction: column; gap: 2px; }
.split-stats strong { font-size: var(--fs-l); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.split-stats span { font-size: var(--fs-xs); color: var(--c-text-2); display: inline-flex; align-items: center; gap: 6px; }
.split-stats i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); display: inline-block; }
.split-stats i.is-grey { background: var(--c-track); }

/* Prüfungskacheln */
.exam-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.exam-col { display: grid; gap: var(--s-3); align-content: start; }
.exam-col__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 0 var(--s-1); }
.exam-col__head h3 { margin: 0; font-size: var(--fs-base); }
.exam-tile {
    position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5);
    background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--c-shadow); color: inherit;
    border-left: 3px solid var(--c-track);
    transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.exam-tile:hover { color: inherit; box-shadow: var(--c-shadow-md); transform: translateY(-1px); }
.exam-tile--passed { border-left-color: var(--c-success); }
.exam-tile--failed { border-left-color: var(--c-danger); }
.exam-tile__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.exam-tile__status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-3); }
.exam-tile__status .icon { width: 16px; height: 16px; }
.exam-tile--passed .exam-tile__status { color: var(--c-success-text); }
.exam-tile--failed .exam-tile__status { color: var(--c-danger-text); }
.exam-tile__title { font-size: var(--fs-base); font-weight: 600; margin: 0; }
.exam-tile__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-text-2); }
.exam-tile__cta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-s); font-weight: 500; color: var(--c-primary-text); }
.exam-tile__cta .icon { width: 14px; height: 14px; transition: transform .2s; }
.exam-tile:hover .exam-tile__cta .icon { transform: translateX(2px); }

/* ==========================================================================
   Prüfungsübersicht
   ========================================================================== */
.course-banner {
    position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
    padding: var(--s-8); margin-bottom: var(--s-5); border-radius: var(--r-xl); color: #fff;
    background: linear-gradient(120deg, var(--c-primary) 0%, #4F46E5 55%, var(--c-accent) 100%);
    box-shadow: 0 12px 32px rgba(79, 70, 229, .22);
}
.course-banner::after { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.course-banner__icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); flex-shrink: 0; }
.course-banner__icon .icon { width: 28px; height: 28px; }
.course-banner__body { flex: 1; min-width: 240px; position: relative; z-index: 1; }
.course-banner__code { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; background: rgba(255, 255, 255, .18); margin-bottom: var(--s-2); }
.course-banner__title { color: #fff; margin: 0 0 var(--s-1); font-size: var(--fs-xl); }
.course-banner__desc { margin: 0; opacity: .88; font-size: var(--fs-base); max-width: 720px; }
.course-banner__actions { position: relative; z-index: 1; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.course-banner .btn-light { background: #fff; color: #1F2937; box-shadow: none; }
.course-section { margin-bottom: var(--s-10); }
.course-switch { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.course-switch a { padding: 6px 14px; border-radius: var(--r-pill); font-size: var(--fs-s); font-weight: 500; color: var(--c-text); background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border); }
.course-switch a:hover { color: var(--c-text); box-shadow: 0 0 0 1px var(--c-border), var(--c-shadow-md); }

.exam-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.exam-card { display: flex; flex-direction: column; gap: var(--s-3); }
.exam-card__num { font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-2); }
.exam-card__title { font-size: var(--fs-m); margin: 0; }
.exam-card__desc { font-size: var(--fs-s); color: var(--c-text-2); margin: 0; }
.exam-card__progress-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-s); color: var(--c-text-2); margin-top: var(--s-2); }
.exam-card__progress-head strong { font-size: var(--fs-l); color: var(--c-text); letter-spacing: -.02em; }
.fact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); font-size: var(--fs-s); color: var(--c-text-2); }
.fact-list li { display: inline-flex; align-items: center; gap: 6px; }
.fact-list .icon { width: 15px; height: 15px; color: var(--c-accent-text); }
.exam-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: var(--s-2) 0 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--c-surface-2); }
.exam-stats div { text-align: center; }
.exam-stats dt { font-size: var(--fs-xs); color: var(--c-text-2); }
.exam-stats dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.exam-card .btn { margin-top: auto; }

/* Prüfungsübersicht: Anbieter-Tabs */
.provider-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.provider-tab { padding: 5px 14px; border-radius: var(--r-pill); font: inherit; font-size: var(--fs-s); font-weight: 500; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text-2); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.provider-tab:hover { background: var(--c-surface-2); color: var(--c-text); }
.provider-tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.provider-tab--active, .provider-tab--active:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* Prüfungsübersicht: Accordion-Liste */
.exam-acc-list { display: flex; flex-direction: column; gap: var(--s-2); }
.exam-acc-empty { color: var(--c-text-2); }
.exam-acc-item { border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border); }
.exam-acc-item--hidden { display: none; }
.exam-acc-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.exam-acc-hd { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-3) var(--s-4); background: none; border: none; cursor: pointer; text-align: left; font: inherit; font-size: var(--fs-base); color: var(--c-text); transition: background .12s; }
.exam-acc-hd:hover { background: var(--c-surface-2); }
.exam-acc-hd:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.exam-acc-code { flex-shrink: 0; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-accent-lt); color: var(--c-accent-text); white-space: nowrap; }
.exam-acc-title { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-acc-provider { font-size: var(--fs-xs); color: var(--c-text-2); white-space: nowrap; flex-shrink: 0; }
.exam-acc-chip { flex-shrink: 0; }
.exam-acc-arrow { flex-shrink: 0; display: flex; align-items: center; color: var(--c-text-2); transition: transform .2s; }
.exam-acc-hd[aria-expanded="true"] .exam-acc-arrow { transform: rotate(180deg); }
.exam-acc-body { padding: var(--s-4); border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: var(--s-4); }
.exam-acc-body[hidden] { display: none; }
.exam-acc-desc { margin: 0; font-size: var(--fs-s); color: var(--c-text-2); }
.exam-acc-sims { display: flex; flex-direction: column; gap: var(--s-3); }
.exam-acc-sim { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--c-surface-2); }
.exam-acc-sim__info { flex: 1; min-width: 0; }
.exam-acc-sim__info strong { font-size: var(--fs-s); display: block; margin-bottom: 4px; }
.exam-acc-sim .fact-list { margin: 0; }
.exam-acc-learn { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.exam-show-all-wrap { text-align: center; margin-top: var(--s-5); }
.exam-show-all-wrap[hidden] { display: none; }
@media (max-width: 600px) {
    .exam-acc-provider { display: none; }
    .exam-acc-title { white-space: normal; }
    .exam-acc-sim { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) { .exam-acc-arrow { transition: none; } }

/* ==========================================================================
   Prüfungslauf
   ========================================================================== */
.is-exam-mode .site-main { padding-top: var(--s-4); }
.exam-topbar {
    position: sticky; top: var(--header-h); z-index: 50; display: flex; align-items: center; gap: var(--s-5);
    padding: var(--s-3) var(--s-5); margin-bottom: var(--s-5); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--c-shadow);
}
.exam-topbar__info { min-width: 0; flex: 0 1 auto; }
.exam-topbar__title { font-size: var(--fs-base); font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exam-progress { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.exam-progress__label { font-size: var(--fs-xs); color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.exam-progress__bar { height: 8px; border-radius: 4px; background: var(--c-track); overflow: hidden; }
.exam-progress__bar span { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2)); transition: width .4s var(--ease); }
.timer { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); font-weight: 600; font-variant-numeric: tabular-nums; background: var(--c-surface-2); color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-border); white-space: nowrap; }
.timer .icon { width: 16px; height: 16px; }
.timer--warning { background: var(--c-danger-lt); color: var(--c-danger-text); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .25); animation: pulse-soft 2s ease-in-out infinite; will-change: opacity; }

.exam-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-5); align-items: start; }
.exam-question-card { padding: var(--s-8); }
.exam-question-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.exam-qnum { font-size: var(--fs-s); font-weight: 500; color: var(--c-accent-text); background: var(--c-accent-lt); padding: 3px 10px; border-radius: var(--r-pill); }
[data-theme="dark"] .exam-qnum { color: var(--c-accent-2); }
.exam-flag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 500; color: var(--c-warning-text); }
.exam-flag .icon { width: 14px; height: 14px; }
[hidden] { display: none !important; }
.exam-question { font-size: var(--fs-l); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; margin: 0 0 var(--s-6); }
.exam-options { display: grid; gap: var(--s-3); }
.exam-option {
    position: relative; display: flex; align-items: flex-start; gap: var(--s-3); width: 100%; padding: var(--s-4) var(--s-5);
    text-align: left; font: inherit; font-size: var(--fs-base); color: var(--c-text); cursor: pointer;
    background: var(--c-surface); border: 0; border-radius: var(--r-md);
    box-shadow: inset 0 0 0 1px var(--color-border-dark), inset 3px 0 0 transparent;
    transition: box-shadow .18s, background .18s;
}
.exam-option:hover { box-shadow: inset 0 0 0 1px var(--color-border-dark), inset 3px 0 0 var(--c-accent); background: var(--c-surface-2); }
.exam-option__letter { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: var(--fs-s); font-weight: 600; color: var(--c-text-2); background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-border); }
.exam-option__text { padding-top: 3px; }
.exam-option.selected { background: var(--c-accent-lt); box-shadow: inset 0 0 0 1.5px var(--c-accent), inset 4px 0 0 var(--c-accent); }
.exam-option.selected .exam-option__letter { background: var(--c-accent); color: #fff; box-shadow: none; }
.exam-option.correct { background: var(--c-success-lt); box-shadow: inset 0 0 0 1.5px var(--c-success), inset 4px 0 0 var(--c-success); }
.exam-option.correct .exam-option__letter { background: var(--c-success); color: #fff; box-shadow: none; }
.exam-option.wrong { background: var(--c-danger-lt); box-shadow: inset 0 0 0 1.5px var(--c-danger), inset 4px 0 0 var(--c-danger); }
.exam-option.wrong .exam-option__letter { background: var(--c-danger); color: #fff; box-shadow: none; }
.exam-option--static { cursor: default; }
.exam-option--static:hover { background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--color-border-dark); }
.exam-option--static.correct:hover { background: var(--c-success-lt); box-shadow: inset 0 0 0 1.5px var(--c-success), inset 4px 0 0 var(--c-success); }
.exam-option--static.wrong:hover { background: var(--c-danger-lt); box-shadow: inset 0 0 0 1.5px var(--c-danger), inset 4px 0 0 var(--c-danger); }
.exam-options.is-entering .exam-option { animation: fade-up .3s var(--ease) both; will-change: transform, opacity; }
.exam-options.is-entering .exam-option:nth-child(2) { animation-delay: .04s; }
.exam-options.is-entering .exam-option:nth-child(3) { animation-delay: .08s; }
.exam-options.is-entering .exam-option:nth-child(4) { animation-delay: .12s; }
.exam-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-border); }
.exam-nav__right { display: flex; gap: var(--s-2); }
.exam-hint { font-size: var(--fs-xs); color: var(--c-text-3); margin: var(--s-4) 0 0; }

.exam-sidebar { position: sticky; top: calc(var(--header-h) + 84px); display: grid; gap: var(--s-4); }
.exam-minigrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: var(--s-3) 0; }
.exam-minigrid__cell {
    aspect-ratio: 1; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    font-size: 0; background: var(--c-track); transition: transform .15s, background .15s, box-shadow .15s;
}
.exam-minigrid__cell:hover { transform: scale(1.2); }
.exam-minigrid__cell.is-answered { background: var(--c-accent); }
.exam-minigrid__cell.is-marked { box-shadow: 0 0 0 2px var(--c-warning); }
.exam-minigrid__cell.is-current { background: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-lt); transform: scale(1.15); }
.exam-legend { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--fs-xs); color: var(--c-text-2); }
.exam-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--c-track); }
.dot--answered { background: var(--c-accent); }
.dot--current { background: var(--c-primary); }
.dot--marked { background: transparent; box-shadow: 0 0 0 2px var(--c-warning); }
.exam-counts { display: flex; justify-content: space-between; font-size: var(--fs-s); color: var(--c-text-2); }
.exam-counts strong { color: var(--c-text); }

.exam-dialog { max-width: 440px; width: calc(100% - 2rem); padding: var(--s-8); border: 0; border-radius: var(--r-xl); background: var(--c-surface); color: var(--c-text); box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.exam-dialog::backdrop { background: rgba(17, 24, 39, .45); backdrop-filter: blur(4px); }
.exam-dialog h2 { margin-bottom: var(--s-2); }
.exam-dialog p { color: var(--c-text-2); }
.exam-dialog__actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-5); }
body.is-submitting { cursor: progress; }
body.is-submitting .exam-shell { opacity: .6; pointer-events: none; transition: opacity .2s; }

/* ==========================================================================
   Ergebnis
   ========================================================================== */
.result-hero { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-6); align-items: center; padding: var(--s-8); margin-bottom: var(--s-5); overflow: hidden; }
.result-hero__score { position: relative; display: inline-flex; align-items: baseline; gap: var(--s-2); font-size: 5rem; font-weight: 600; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.result-hero--passed .result-hero__score { color: var(--c-success-text); }
.result-hero--failed .result-hero__score { color: var(--c-danger-text); }
.result-hero__sep { font-size: var(--fs-l); font-weight: 500; color: var(--c-text-3); letter-spacing: 0; }
.result-hero__verdict { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-l); }
.result-hero--passed .result-hero__verdict .icon { color: var(--c-success-text); }
.result-hero--failed .result-hero__verdict .icon { color: var(--c-danger-text); }
.result-hero__sub { color: var(--c-text-2); margin: 0; }
.result-hero__chart { position: relative; }
.success-ring { position: absolute; left: 50%; top: 58%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; border: 3px solid var(--c-success); opacity: 0; pointer-events: none; z-index: 0; }
.result-hero--passed .success-ring { animation: ring-expand 1.6s var(--ease) .3s 2 both; will-change: transform, opacity; }
.result-hero--passed .success-ring--2 { animation-delay: .7s; }

.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-bottom: var(--s-5); }
.compare-bars, .domain-bars { display: grid; gap: var(--s-4); }
.compare-bar__label, .domain-bar__head { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-s); margin-bottom: 6px; color: var(--c-text-2); }
.compare-bar strong, .domain-bar__head strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
.compare-bar__track, .domain-bar__track { position: relative; height: 8px; border-radius: 4px; background: var(--c-track); }
.compare-bar__fill, .domain-bar__fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2)); }
.compare-bar__fill--avg { background: var(--c-text-3); }
.compare-bar__fill--pass { background: var(--c-primary); }
.compare-bar__mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--c-text); opacity: .35; border-radius: 1px; }
.domain-bar.is-good .domain-bar__fill { background: linear-gradient(90deg, var(--c-success), #34D399); }
.domain-bar.is-weak .domain-bar__fill { background: linear-gradient(90deg, var(--c-danger), #F87171); }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) 0 var(--s-8); }

.filter-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.course-limit-bar { display: flex; justify-content: flex-end; margin-bottom: var(--s-3); }
.course-limit-bar .filter-chips { margin-bottom: 0; }
.filter-chip { padding: 6px 14px; border-radius: var(--r-pill); border: 0; font: inherit; font-size: var(--fs-s); font-weight: 500; cursor: pointer; color: var(--c-text-2); background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border); transition: background .2s, color .2s; }
.filter-chip:hover { color: var(--c-text); }
.filter-chip.is-active { background: var(--c-text); color: var(--c-surface); box-shadow: none; }

.review-list { display: grid; gap: var(--s-3); }
.review-item { content-visibility: auto; contain-intrinsic-size: auto 96px; background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--c-shadow); border-left: 3px solid var(--c-success); overflow: hidden; }
.review-item--wrong { border-left-color: var(--c-danger); }
.review-item > summary { list-style: none; display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4) var(--s-5); cursor: pointer; }
.review-item > summary::-webkit-details-marker { display: none; }
.review-item > summary:hover { background: var(--c-surface-2); }
.review-item__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-success-lt); color: var(--c-success-text); }
.review-item__icon .icon { width: 16px; height: 16px; }
.review-item--wrong .review-item__icon { background: var(--c-danger-lt); color: var(--c-danger-text); }
.review-item__num { font-size: var(--fs-xs); color: var(--c-text-2); display: block; margin-bottom: 2px; }
.review-item__question { flex: 1; font-weight: 500; }
.review-item__chev { width: 18px; height: 18px; color: var(--c-text-3); transition: transform .2s; margin-top: 4px; }
.review-item[open] .review-item__chev { transform: rotate(180deg); }
.review-item__body { padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 28px + var(--s-3)); display: grid; gap: var(--s-2); }
.review-item__expl { margin-top: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); font-size: var(--fs-base); }
.review-item__expl p { margin: 0 0 var(--s-2); }
.review-item__expl p:last-child { margin: 0; }

/* ==========================================================================
   Fehlerseiten
   ========================================================================== */
.error-page { max-width: 620px; margin: var(--s-10) auto; text-align: center; padding: var(--s-12) var(--s-8); }
.error-page__code { font-size: clamp(4.5rem, 12vw, 7rem); font-weight: 600; letter-spacing: -.06em; line-height: 1; background: linear-gradient(120deg, var(--c-primary), var(--c-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: var(--s-4); }
.error-page__icon { width: 56px; height: 56px; margin: 0 auto var(--s-4); border-radius: 50%; display: grid; place-items: center; background: var(--c-accent-lt); color: var(--c-accent-text); }
.error-page__icon .icon { width: 26px; height: 26px; }
.error-page p { color: var(--c-text-2); max-width: 460px; margin: 0 auto var(--s-6); }
.error-page__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-3); }

/* ==========================================================================
   Skeleton & Reveal
   ========================================================================== */
.skeleton { position: relative; overflow: hidden; background: var(--c-surface-2); border-radius: var(--r-md); }
.skeleton::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: shimmer 1.4s infinite; will-change: transform;
}
[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
.skeleton--fill { position: absolute; inset: 0; z-index: 2; transition: opacity .3s; display: none; }
.js .skeleton--fill { display: block; }
.is-loaded > .skeleton--fill { opacity: 0; pointer-events: none; }
.skeleton-line { height: 12px; border-radius: 6px; margin-bottom: var(--s-2); }
.skeleton-line--short { width: 40%; }

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 350ms ease, transform 350ms ease; will-change: transform, opacity; }
.js .reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

/* ---------- Animationen ---------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes pulse-soft { 50% { opacity: .7; } }
@keyframes ring-expand { 0% { opacity: .55; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
    .skeleton::after { display: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
    .dash-grid { grid-template-columns: 1fr; }
    .dash-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exam-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .pill-nav__link span { display: none; }
    .pill-nav__icon { display: block; }
    .pill-nav__link { padding: 8px 12px; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exam-cols { grid-template-columns: 1fr; }
    .exam-layout { grid-template-columns: 1fr; }
    .exam-sidebar { position: static; }
    .result-hero { grid-template-columns: 1fr; text-align: center; }
    .result-hero__verdict { justify-content: center; }
}
@media (max-width: 720px) {
    :root { --header-h: 60px; }
    .container { padding: 0 var(--s-4); }
    .site-main { padding-top: var(--s-5); }
    .brand__text { display: none; }
    .header-actions .icon-btn:first-child { display: none; }
    .dash-side, .result-grid, .exam-card-grid { grid-template-columns: 1fr; }
    .rings-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
    .progress-ring { width: 92px; height: 92px; }
    .card, .stat-card { padding: var(--s-5); }
    .exam-question-card { padding: var(--s-5); }
    .exam-topbar { flex-wrap: wrap; gap: var(--s-3); top: var(--header-h); }
    .exam-topbar__info { flex-basis: 100%; order: -1; }
    .result-hero__score { font-size: 4rem; }
    .course-banner { padding: var(--s-6); }
    .flashcard { padding: var(--s-6) var(--s-5); min-height: 260px; }
    .flashcard-question { font-size: var(--fs-m); }
    .review-item__body { padding-left: var(--s-5); }

    /* Hamburger-Menü: Nav als Dropdown unter dem Header.
       .site-header ist position: sticky und damit bereits Bezugsrahmen für die absolute Nav
       (ein position: relative würde das Mitscrollen des Headers aufheben).
       Ohne JavaScript (kein .js an <html>) bleibt die Nav wie bisher sichtbar. */
    .js .nav-toggle { display: flex; }
    .js #main-nav {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0; right: 0;
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-border);
        border-radius: 0;
        padding: .75rem 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        box-shadow: var(--c-shadow-md);
        z-index: 100;
        overflow: visible;
    }
    .js #main-nav.is-open { display: flex; }
    .js #main-nav .pill-nav__link { padding: 10px 14px; border-radius: var(--r-md); width: 100%; font-size: var(--fs-base); }
    .js #main-nav .pill-nav__link span { display: inline; }
    .js .header-actions { margin-left: 0; }

    /* Einspaltiger Footer */
    .site-footer { padding: var(--s-8) 0; }
    .site-footer__inner { flex-direction: column; gap: var(--s-4); }
}
@media (max-width: 420px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
    .kpi-card { min-height: 130px; }
    .kpi-card__value { font-size: var(--fs-l); }
    .learn-actions { grid-template-columns: 1fr; }
    .zfu-font-font-c957d5 { font-size: var(--fs-l); }
    .zfu-font-font-2e0b81 { font-size: var(--fs-m); }
    .site-footer__inner { flex-direction: column; gap: 1rem; }
    .site-footer__links { flex-direction: row; flex-wrap: wrap; gap: .5rem 1rem; }
}

/* Lernfortschritt pro Kurs (Kursübersicht) */
.course-progress { margin: 0 0 var(--s-3); }
.progress-bar-wrap { background: var(--c-track); border-radius: var(--r-pill); height: 6px; overflow: hidden; margin: 0.5rem 0; }
.progress-bar { height: 100%; background: var(--c-primary); border-radius: var(--r-pill); width: 0%; transition: width .4s var(--ease); }
.progress-bar--done { background: var(--c-success); }
.progress-label { font-size: var(--fs-xs); color: var(--c-text-2); }
.progress-label--done { color: var(--c-success-text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .progress-bar { transition: none; } }

/* Passwort zurücksetzen */
.pw-reset-links { margin-top: var(--s-4); font-size: var(--fs-s); }
.pw-reset-hint { font-size: var(--fs-s); color: var(--c-text-2); margin: var(--s-2) 0 0; }

/* Admin Design-Panel */
.design-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
.design-field label { display: block; font-size: var(--fs-s); font-weight: 600; margin-bottom: .4rem; }
.design-field input[type=color] { width: 100%; height: 44px; border-radius: var(--r-md); border: 1px solid var(--c-border); cursor: pointer; padding: 2px; background: var(--c-surface); }
.design-field input[type=range] { width: 100%; }
.design-field input[type=number] { width: 80px; padding: 6px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--fs-s); background: var(--c-surface); color: var(--c-text); }
.design-preview { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1.5rem; margin-top: 1.5rem; }
.design-section { margin-bottom: 2rem; }
.design-section-title { font-size: var(--fs-base); font-weight: 700; margin-bottom: 1rem; border-bottom: 1px solid var(--c-border); padding-bottom: .5rem; }
.design-reset { margin-top: var(--s-4); }
.design-values { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0 0 1.25rem; font-size: var(--fs-s); }
.design-values dt { color: var(--c-text-2); }
.design-values dd { margin: 0; }
.design-changed { color: var(--c-text-3); font-size: var(--fs-xs); }
.design-preview__sample { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.design-badge-accent { background: var(--c-accent-lt); color: var(--c-accent-text); }
@media (max-width: 520px) { .design-values { grid-template-columns: 1fr; } .design-values dd { margin-bottom: .5rem; } }

/* ==========================================================================
   Druck
   ========================================================================== */
@media print {
    :root { --c-bg: #fff; --c-shadow: none; --c-shadow-md: none; }
    body { background: #fff !important; color: #000; font-size: 11pt; }
    .site-header, .site-footer, .pill-nav, .header-actions, .dash-side, .exam-sidebar, .exam-topbar,
    .filter-chips, .result-actions, .btn, .card-arrow, .skip-link, .skeleton, .success-ring, .filters-bar { display: none !important; }
    .card, .stat-card, .course-card, .exam-tile, .review-item, .flashcard, .empty-state { box-shadow: none !important; border: 1px solid #ddd; transform: none !important; }
    .dash-grid, .exam-layout, .result-hero, .result-grid { grid-template-columns: 1fr !important; }
    .js .reveal { opacity: 1 !important; transform: none !important; }
    .course-banner { background: none !important; color: #000; box-shadow: none; border: 1px solid #ddd; }
    .course-banner__title { color: #000; }
    a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; word-break: break-all; }
    a.card::after, a.exam-tile::after, a.ring-item::after, .brand::after, a[href^="#"]::after { content: none; }
    .review-item { content-visibility: visible; break-inside: avoid; page-break-inside: avoid; }
    .review-item > .review-item__body { display: grid !important; }
    .exam-question-card, .exam-card, .course-card { break-inside: avoid; page-break-inside: avoid; }
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}

/* =========================================================
   zertifit.com – Utility-Klassen (auto-generiert)
   Ersetzt ehemalige style="..." Inline-Attribute in Views.
   ========================================================= */

.zfu-background-a2a9e4 { background:var(--c-danger) }
.zfu-background-border-0cfa73 { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.25rem; }
.zfu-background-border-33fea6 { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1.75rem; }
.zfu-background-border-4475b2 { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.5rem; text-align:center; }
.zfu-background-border-9aa28e { background:var(--color-bg); border:1px solid var(--color-border); font-size:var(--fs-xs); font-weight:600; padding:0.2rem 0.5rem; border-radius:var(--radius-sm); }
.zfu-background-border-b51e4e { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1.75rem; display:flex; flex-direction:column; justify-content:space-between; transition:transform 0.2s, box-shadow 0.2s; }
.zfu-background-border-eb7441 { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:2rem; margin-bottom:2.5rem; }
.zfu-background-border-ffc468 { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:2rem; }
.zfu-background-color-187a07 { background:var(--color-success-bg); color:var(--c-success-text); border:1px solid var(--color-success); border-radius:var(--radius-md); padding:1rem; margin-bottom:2rem; font-weight:600; text-align:center; }
.zfu-background-color-1cea5b { background:var(--c-success-lt); color:var(--c-success-text); }
.zfu-background-color-33eb37 { background:var(--color-primary-light); color:var(--c-primary-text); font-weight:700; padding:0.25rem 0.6rem; border-radius:var(--radius-sm); }
.zfu-background-color-369969 { background:var(--color-primary-light); color:var(--c-primary-text); font-weight:700; padding:0.25rem 0.6rem; border-radius:var(--radius-sm); font-size:var(--fs-s); }
.zfu-background-color-522b78 { background:#522b78; color:#fff; font-weight:700; padding:0.25rem 0.6rem; border-radius:var(--radius-sm); font-size:var(--fs-xs); }
.zfu-background-color-564c6d { background:var(--color-danger); color:#fff; border:none; padding:0.6rem 1.25rem; border-radius:var(--radius-md); cursor:pointer; }
.zfu-background-color-6c2670 { background:var(--c-warning-lt); color:var(--c-warning-text); }
.zfu-background-color-8d7773 { background:var(--color-warning-bg); color:var(--c-warning-text); font-size:var(--fs-xs); font-weight:700; padding:0.2rem 0.5rem; border-radius:var(--radius-sm); white-space:nowrap; }
.zfu-background-color-a8a54e { background:var(--color-primary-light); color:var(--c-primary-text); font-weight:700; padding:0.25rem 0.6rem; border-radius:var(--radius-sm); font-size:var(--fs-s); }
.zfu-background-color-db16d8 { background:var(--color-success-bg); color:var(--c-success-text); font-weight:700; padding:0.2rem 0.5rem; border-radius:var(--radius-sm); font-size:var(--fs-xs); }
.zfu-background-color-dde399 { background:var(--color-danger-bg); color:var(--c-danger-text); padding:0.75rem 1rem; border-radius:var(--radius-md); margin-bottom:1.5rem; font-size:var(--fs-base); }
.zfu-background-color-fe71b1 { background:var(--color-danger-bg); color:var(--c-danger-text); border:1px solid var(--color-danger); border-radius:var(--radius-md); padding:1rem; margin-bottom:2rem; font-weight:600; text-align:center; }
.zfu-background-font-06a913 { background:var(--color-bg); font-weight:700; border-bottom:1px solid var(--color-border); }
.zfu-border-4ccb56 { border-bottom:1px solid var(--color-border); }
.zfu-border-color-aff639 { border-bottom:2px solid var(--color-border); color:var(--color-text); }
.zfu-border-font-db5560 { border-bottom:1px solid var(--color-border); font-size:var(--fs-s); }
.zfu-border-padding-075388 { border-top:1px solid var(--color-border); padding-top:1.5rem; }
.zfu-border-text-011c18 { border-bottom:2px solid var(--color-border); text-align:left; }
.zfu-color-025f96 { color:var(--color-text); }
.zfu-color-3bb313 { color:var(--c-primary-text); }
.zfu-color-63502f { color:var(--c-success-text); }
.zfu-color-e71e84 { color:var(--c-danger-text); }
.zfu-color-font-3f6075 { color:var(--color-text); font-weight:600; }
.zfu-color-font-4a8507 { color:var(--c-success-text); font-weight:600; }
.zfu-color-font-5996df { color:var(--color-text-muted); font-size:var(--fs-base); }
.zfu-color-font-73cc15 { color:var(--c-primary-text); font-weight:600; }
.zfu-color-font-794220 { color:var(--color-text-muted); font-size:var(--fs-s); margin-bottom:1rem; }
.zfu-color-font-7d06ae { color:var(--c-warning-text); font-weight:600; }
.zfu-color-font-9a2ea7 { color:var(--color-text-muted); font-size:var(--fs-xs); }
.zfu-color-line-86217b { color:var(--color-text-muted); line-height:1.6; margin-left:1.5rem; margin-bottom:1rem; }
.zfu-color-line-d1546e { color:var(--color-text-muted); line-height:1.6; }
.zfu-color-margin-077b71 { color:var(--color-text-muted); margin-bottom:2rem; }
.zfu-color-margin-3e88bb { color:var(--color-text-muted); margin-bottom:1.5rem; }
.zfu-color-margin-8104a1 { color:var(--color-text-muted); margin:0; }
.zfu-color-margin-e32d80 { color:var(--color-text-muted); margin-bottom:1.5rem; font-size:var(--fs-base); }
.zfu-color-max-4c578b { color:var(--color-text-muted); max-width:600px; margin:0 auto 1.5rem; }
.zfu-color-text-07d303 { color:var(--c-primary-text); text-decoration:none; }
.zfu-color-text-5febbd { color:var(--color-text-muted); text-decoration:none; }
.zfu-color-text-6d0594 { color:var(--color-text-muted); text-align:center; margin-bottom:2rem; font-size:var(--fs-base); }
.zfu-color-word-f575b9 { color:var(--c-primary-text); word-break:break-all; }
.zfu-cursor-font-559523 { cursor:pointer; font-weight:600; color:var(--c-primary-text); user-select:none; }
.zfu-display-5f8f4a { display:inline; }
.zfu-display-93b8ea { display:none; }
.zfu-display-align-65ae9a { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.4rem; }
.zfu-display-align-7c7f32 { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem; }
.zfu-display-flex-20d599 { display:flex; flex-wrap:wrap; gap:2rem; border-top:1px solid var(--color-border); padding-top:1.25rem; font-size:var(--fs-base); }
.zfu-display-flex-3506be { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; max-width:650px; margin:0 auto 2.5rem; }
.zfu-display-flex-497315 { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:1.5rem; }
.zfu-display-flex-8becb6 { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:1.5rem; margin-bottom:1.5rem; }
.zfu-display-flex-9c4ddd { display:flex; flex-direction:column; justify-content:space-between; user-select:none; }
.zfu-display-flex-b264b5 { display:flex; flex-direction:column; gap:0.75rem; min-width:240px; }
.zfu-display-flex-ce8108 { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; border-bottom:1px solid var(--color-border); padding-bottom:1rem; }
.zfu-display-flex-ebe30d { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; }
.zfu-display-font-555fb6 { display:block; font-weight:600; font-size:var(--fs-s); margin-bottom:0.3rem; }
.zfu-display-font-9077c0 { display:none; font-size:var(--fs-m); font-weight:500; color:var(--c-primary-text); padding:1rem 1.25rem; background:var(--c-primary-lt); border-radius:var(--r-md); line-height:1.5; margin-bottom:1rem; }
.zfu-display-gap-3fa69a { display:grid; gap:1.25rem; }
.zfu-display-gap-4e4246 { display:flex; gap:.5rem; }
.zfu-display-gap-a28de2 { display:grid; gap:0.75rem; }
.zfu-display-gap-b29c86 { display:flex; gap:0.75rem; }
.zfu-display-gap-cdb1f9 { display:grid; gap:1rem; }
.zfu-display-grid-287854 { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem; margin-bottom:2.5rem; }
.zfu-display-grid-beb755 { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap:1.25rem; }
.zfu-display-grid-d2ea68 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:2rem; margin-bottom:2.5rem; }
.zfu-display-justify-6c9ba9 { display:flex; justify-content:space-between; align-items:center; gap:.5rem; margin-bottom:1.5rem; }
.zfu-display-justify-6eb6e4 { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.zfu-display-justify-83a499 { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--color-border); padding-top:1rem; margin-bottom:1rem; font-size:var(--fs-s); }
.zfu-display-justify-cb0bc4 { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem; border-top:1px solid var(--c-border); padding-top:1rem; }
.zfu-display-justify-d10a9b { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.75rem; }
.zfu-display-justify-d9affd { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:0.5rem; }
.zfu-display-justify-f8b9b0 { display:flex; justify-content:space-between; align-items:center; padding:0.75rem 1rem; background:var(--color-bg); border-radius:var(--radius-md); }
.zfu-flex-901210 { flex-wrap:wrap }
.zfu-flex-min-44491f { flex:1; min-width:280px; }
.zfu-flex-min-b87917 { flex:1; min-width:280px; padding:0.75rem 1rem; border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--fs-base); background:var(--color-surface); color:var(--color-text); }
.zfu-flex-text-324c97 { flex:1; text-align:center; text-decoration:none; }
.zfu-font-511861 { font-size:var(--fs-s); }
.zfu-font-b30001 { font-size:var(--fs-s); }
.zfu-font-color-085c28 { font-size:var(--fs-s); color:var(--color-text-muted); }
.zfu-font-color-10cc09 { font-size:var(--fs-base); color:var(--color-text-muted); max-width:700px; margin:0 auto 1.5rem; line-height:1.6; }
.zfu-font-color-3001ef { font-size:var(--fs-xs); color:var(--color-text-muted); }
.zfu-font-color-34ee43 { font-size:var(--fs-m); color:var(--color-text-muted); max-width:750px; line-height:1.6; }
.zfu-font-color-3c436d { font-size:var(--fs-s); color:var(--color-text-muted); margin-left:0.5rem; }
.zfu-font-color-53844e { font-weight:600; color:var(--color-text); }
.zfu-font-color-59c35c { font-size:var(--fs-s); color:var(--color-text-muted); margin-bottom:1rem; }
.zfu-font-color-629cce { font-weight:800; color:var(--c-primary-text); }
.zfu-font-color-62be7e { font-size:var(--fs-base); color:var(--color-text-muted); margin-bottom:1.5rem; }
.zfu-font-color-72832f { font-size:var(--fs-base); color:var(--color-text-muted); line-height:1.5; margin-bottom:0.75rem; }
.zfu-font-color-7f3b1f { font-size:var(--fs-s); color:var(--color-text-muted); }
.zfu-font-color-90db70 { font-size:var(--fs-base); color:var(--color-text-muted); text-align:center; margin-bottom:1.5rem; }
.zfu-font-color-99e837 { font-size:var(--fs-base); color:var(--color-text); font-weight:500; margin-bottom:0.75rem; padding-left:0.5rem; border-left:3px solid var(--color-primary); }
.zfu-font-color-e9f70d { font-size:var(--fs-base); color:var(--color-text-muted); line-height:1.5; margin-bottom:1.25rem; }
.zfu-font-color-ea9a25 { font-size:var(--fs-m); color:var(--color-text-muted); max-width:800px; line-height:1.6; }
.zfu-font-color-f73cea { font-size:var(--fs-xs); color:var(--color-text-muted); font-weight:600; text-transform:capitalize; }
.zfu-font-font-0062e2 { font-weight:600; font-size:var(--fs-m); color:var(--c-primary-text); }
.zfu-font-font-0c68f9 { font-size:var(--fs-l); font-weight:700; margin-bottom:0.75rem; }
.zfu-font-font-2e0b81 { font-size:var(--fs-m); font-weight:700; }
.zfu-font-font-30f9a0 { font-size:var(--fs-xl); font-weight:800; color:var(--c-primary-text); }
.zfu-font-font-3106fd { font-size:var(--fs-xl); font-weight:700; margin-top:0.5rem; margin-bottom:0.75rem; }
.zfu-font-font-31d588 { font-size:var(--fs-m); font-weight:700; margin-bottom:0.75rem; }
.zfu-font-font-350dab { font-size:var(--fs-m); font-weight:700; margin-top:0; display:inline; margin-left:0.5rem; }
.zfu-font-font-408655 { font-size:var(--fs-l); font-weight:700; margin-bottom:0.5rem; }
.zfu-font-font-40d574 { font-size:var(--fs-m); font-weight:700; color:var(--color-text); margin:0; }
.zfu-font-font-4b6456 { font-size:var(--fs-l); font-weight:700; margin-bottom:0.5rem; }
.zfu-font-font-4f5e56 { font-size:var(--fs-xl); font-weight:800; margin-bottom:0.75rem; text-align:center; }
.zfu-font-font-551715 { font-size:var(--fs-l); font-weight:500; line-height:1.45; margin-bottom:1.5rem; }
.zfu-font-font-659b4e { font-size:var(--fs-m); font-weight:700; color:var(--c-danger-text); margin-bottom:0.5rem; }
.zfu-font-font-6c652f { font-size:var(--fs-xl); font-weight:800; margin-bottom:0.5rem; }
.zfu-font-font-6d2706 { font-size:var(--fs-s); font-weight:600; color:var(--color-text-muted); margin-top:0.25rem; }
.zfu-font-font-8f4084 { font-size:var(--fs-xl); font-weight:800; margin-bottom:1rem; }
.zfu-font-font-a00cea { font-size:var(--fs-xl); font-weight:800; margin-bottom:0.75rem; }
.zfu-font-font-a30773 { font-size:var(--fs-l); font-weight:700; margin-bottom:1rem; }
.zfu-font-font-aa9297 { font-size:var(--fs-base); font-weight:700; margin-bottom:0.5rem; color:var(--color-text); }
.zfu-font-font-b5ae5a { font-size:var(--fs-l); font-weight:800; margin-bottom:0.5rem; text-align:center; }
.zfu-font-font-c223ba { font-size:var(--fs-xl); font-weight:800; color:var(--c-success-text); }
.zfu-font-font-c957d5 { font-size:var(--fs-xl); font-weight:800; color:var(--color-text); margin-bottom:0.75rem; line-height:1.2; }
.zfu-font-font-c9c254 { font-size:var(--fs-l); font-weight:700; margin-bottom:1.25rem; }
.zfu-font-font-d54328 { font-size:var(--fs-l); font-weight:700; margin-top:1.5rem; margin-bottom:0.5rem; }
.zfu-font-font-f8fa83 { font-size:var(--fs-xl); font-weight:800; margin-bottom:0.75rem; }
.zfu-font-font-fa723b { font-size:var(--fs-l); font-weight:700; margin-bottom:1rem; }
.zfu-font-font-fc3887 { font-size:var(--fs-xl); font-weight:800; color:var(--color-text); }
.zfu-font-margin-226d82 { font-size:var(--fs-l); margin:.25rem 0 0; }
.zfu-font-margin-637335 { font-size:var(--fs-s); margin-bottom:1.5rem; color:var(--color-text-muted); }
.zfu-font-padding-55bd7f { font-size:var(--fs-s); padding:4px 12px; }
.zfu-list-margin-987507 { list-style:none;margin:0;padding:0 }
.zfu-margin-10285c { margin:var(--s-4) 0 0 }
.zfu-margin-1079cf { margin-bottom:var(--s-6); }
.zfu-margin-1386d5 { margin:0 }
.zfu-margin-2da5d6 { margin-bottom:1.5rem; }
.zfu-margin-46dcee { margin:0; }
.zfu-margin-571c62 { margin-bottom:var(--s-2) }
.zfu-margin-58fdc5 { margin-bottom:0.75rem; }
.zfu-margin-6a209b { margin-bottom:1.25rem; }
.zfu-margin-background-a20bd3 { margin-top:2.5rem; padding:1.25rem 1.5rem; text-align:center; }
.zfu-margin-c713cb { margin-bottom:2rem; }
.zfu-margin-e44b62 { margin:0 0 .75rem; }
.zfu-margin-e7ec54 { margin-bottom:0 }
.zfu-margin-font-35408c { margin-top:0.75rem; font-size:var(--fs-base); color:var(--color-text-muted); }
.zfu-max-margin-0cee4c { max-width:750px; margin:0 auto; }
.zfu-max-margin-9e067b { max-width:650px; margin:0 auto; }
.zfu-max-margin-9fec62 { max-width:800px; margin:0 auto; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:2.5rem; }
.zfu-opacity-pointer-9559f0 { pointer-events:none; }
.zfu-overflow-77c814 { overflow-x:auto; }
.zfu-padding-0886f7 { padding:0.5rem 0; }
.zfu-padding-7b12af { padding:0.75rem 0.5rem; }
.zfu-padding-background-897f78 { padding:1rem; background:var(--color-bg); border-radius:var(--radius-sm); margin-top:0.5rem; line-height:1.6; }
.zfu-padding-border-d13a06 { padding:0.75rem 1rem; border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--fs-base); background:var(--color-surface); color:var(--color-text); }
.zfu-padding-cc0517 { padding:0.6rem 0; }
.zfu-padding-color-5b2956 { padding:0.6rem 0.5rem 0.6rem 1.5rem; color:var(--color-text-muted); }
.zfu-padding-color-bbdcc5 { padding:1rem 0; color:var(--color-text-muted); text-align:center; }
.zfu-padding-d476be { padding:0.85rem 0.5rem; }
.zfu-padding-display-838069 { padding:1.5rem; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem; }
.zfu-padding-font-850b46 { padding:0.6rem 0; font-weight:700; color:var(--color-text); }
.zfu-padding-margin-079f31 { padding:2rem; margin-bottom:2.5rem; }
.zfu-padding-text-018738 { padding:0.85rem 0.5rem; text-align:center; color:var(--c-warning-text); }
.zfu-padding-text-09391d { padding:0.5rem 0; text-align:center; }
.zfu-padding-text-0ff353 { padding:0.6rem 0; text-align:center; }
.zfu-padding-text-29cb3f { padding:0.5rem 0; text-align:right; }
.zfu-padding-text-3f7bbb { padding:0.85rem 0.5rem; text-align:center; font-weight:800; color:var(--c-primary-text); }
.zfu-padding-text-63f264 { padding:0.6rem 0.5rem; text-align:center; }
.zfu-padding-text-75abb4 { padding:0.6rem 0; text-align:right; font-weight:700; color:var(--c-warning-text); }
.zfu-padding-text-7ecf73 { padding:0.85rem 0.5rem; text-align:center; }
.zfu-padding-text-83a849 { padding:0.6rem 0; text-align:right; font-weight:700; color:var(--c-primary-text); }
.zfu-padding-text-9c380c { padding:0.6rem 0.5rem; text-align:center; color:var(--color-text-muted); }
.zfu-padding-text-b812a8 { padding:0.6rem 0.5rem; text-align:center; font-weight:600; }
.zfu-padding-text-ca35a1 { padding:0.75rem 0.5rem; text-align:center; }
.zfu-text-8fdce8 { text-decoration:none; }
.zfu-text-color-9bca1c { text-decoration:none; color:inherit; }
.zfu-text-font-649940 { text-decoration:none; font-size:var(--fs-m); padding:0.85rem 1.5rem; }
.zfu-text-font-fa85b8 { text-align:center; font-size:var(--fs-base); border-top:1px solid var(--color-border); padding-top:1.25rem; }
.zfu-text-padding-05000c { text-align:center; padding:1.25rem 0 2rem; }
.zfu-width-2f5811 { width:0%; }
.zfu-width-border-6dcb4a { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
.zfu-width-border-fefc46 { width:100%; border-collapse:collapse; text-align:left; font-size:var(--fs-base); }
.zfu-width-padding-121084 { width:100%; padding:0.6rem; font-size:var(--fs-base); }
.zfu-width-padding-545d50 { width:100%; padding:0.55rem 0.8rem; border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:var(--fs-base); background:var(--color-bg); color:var(--color-text); }
.zfu-width-padding-d3b125 { width:100%; padding:0.6rem; font-size:var(--fs-base); margin-bottom:1.25rem; }
.zfu-word-49a359 { word-break:break-all; }

/* v15 – Admin & Prüfungsziel (Farben über Theme-Variablen, damit Hell- und Dunkelmodus lesbar bleiben) */
.zfu-goal-banner { display:flex; align-items:center; gap:.75rem; padding:.875rem 1.25rem; background:var(--c-primary-lt,#e8f4fd); border:1px solid var(--c-primary,#0078d4); border-radius:var(--r-md,8px); margin-bottom:1.5rem; flex-wrap:wrap; }
.zfu-goal-banner .icon { color:var(--c-primary-text); flex-shrink:0; }
.zfu-goal-banner > span { flex:1; font-size:var(--fs-base); }
.zfu-goal-banner--empty { background:var(--c-surface-2); border-style:dashed; }
.goal-pace { color:var(--c-text-2); }
.streak-badges { list-style:none; display:flex; gap:6px; margin:.5rem 0 0; padding:0; }
.streak-badge { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:600; background:var(--c-surface-2); color:var(--c-text-3, var(--c-text-2)); opacity:.7; }
.streak-badge.is-earned { background:var(--c-warning-lt); color:var(--c-warning-text); opacity:1; }
.streak-next { margin:.35rem 0 0; font-size:var(--fs-xs); color:var(--c-text-2); }
/* v25.4 – KI-Erklärung / KI-Bericht */
.ai-explain { margin-top:1rem; padding:.875rem 1rem; background:var(--c-primary-lt,#e8f4fd); border-left:4px solid var(--c-primary,#0078d4); border-radius:var(--r-md,8px); text-align:left; }
.ai-explain__head { display:flex; align-items:center; gap:.4rem; font-weight:600; margin-bottom:.4rem; }
.ai-explain__text { white-space:pre-line; overflow-wrap:anywhere; line-height:1.55; margin:0; }
.ai-explain__note { margin:.5rem 0 0; font-size:var(--fs-xs); color:var(--c-text-2); }
.ai-report { margin:1.5rem 0; }
.ai-report .card__title .icon { vertical-align:-2px; }
/* v25.5 – Merkliste & Schnelltest */
.btn.is-active[aria-pressed="true"] { background:var(--c-warning-lt); color:var(--c-warning-text); border-color:var(--c-warning,#d97706); }
.learn-mode-note { display:flex; align-items:center; gap:.4rem; margin:.25rem 0 0; font-size:var(--fs-s); color:var(--c-text-2); }
.bookmark-list { list-style:none; margin:.75rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.next-up__actions { display:flex; flex-direction:column; gap:.5rem; align-items:stretch; }
.ai-explain.is-error { background:var(--c-danger-lt,#fde8e8); border-left-color:var(--c-danger,#dc2626); }
.announcement-banner { display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem; margin-bottom:1rem; border-radius:var(--r-md,8px); background:var(--c-surface-2,#f0f4f8); border-left:4px solid var(--c-primary,#0078d4); width:fit-content; max-width:100%; margin-inline:auto; flex-wrap:nowrap; }
.announcement-banner--info { border-left-color:var(--c-primary,#0078d4); background:var(--c-primary-lt,#e8f4fd); }
.announcement-banner--warnung { border-left-color:var(--c-warning,#d97706); background:var(--c-warning-lt,#fef3c7); }
.announcement-banner--erfolg { border-left-color:var(--c-success,#16a34a); background:var(--c-success-lt,#dcfce7); }
.announcement-banner .icon { flex-shrink:0; }
.announcement-banner > span { flex:0 1 auto; min-width:0; white-space:pre-line; overflow-wrap:anywhere; }
.admin-table { width:100%; min-width:520px; border-collapse:collapse; font-size:var(--fs-s); }
.admin-table th, .admin-table td { padding:.5rem .75rem; text-align:left; border-bottom:1px solid var(--c-border,#e2e8f0); vertical-align:top; }
.admin-table th { font-weight:600; background:var(--c-surface-2,#f8fafc); }
.admin-table tr:last-child td { border-bottom:none; }
/* v5C: Woerter in Admin-Tabellen nie mitten im Wort trennen; zu breite Tabellen scrollen im Wrapper */
.admin-table td, .admin-table th, .backup-table td, .backup-table th { overflow-wrap: normal; word-break: normal; }
.admin-table .btn, .admin-table .badge, .admin-table code, .admin-table .course-code-badge, .admin-table time,
.backup-table .btn, .backup-table td:first-child { white-space: nowrap; overflow-wrap: normal; }
.admin-table td:has(> .btn), .admin-table td:has(> form > .btn), .admin-table td:has(> form > button) { white-space: nowrap; }
.admin-table td > form:has(> .btn, > button) { display: inline-block; margin: 0; vertical-align: top; }
.admin-table td > .btn + .btn, .admin-table td > .btn + form, .admin-table td > form + .btn, .admin-table td > form + form { margin-left: .35rem; }
.doc-objectives { margin:0; padding-left:1.1em; }
.admin-table-wrap { overflow-x:auto; margin-bottom:1.5rem; }
.admin-badge { display:inline-block; padding:.125rem .5rem; border-radius:999px; font-size:var(--fs-xs); font-weight:600; }
.admin-badge--active { background:var(--c-success-lt,#dcfce7); color:var(--c-success-text); }
.admin-badge--banned { background:var(--c-danger-lt,#fee2e2); color:var(--c-danger-text); }
.admin-badge--admin { background:var(--c-primary-lt,#e8f4fd); color:var(--c-primary-text); }
.admin-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.admin-actions form { margin:0; }
.admin-nav { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.admin-search { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.admin-search input[type="search"] { flex:1; min-width:200px; }
.admin-pager { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }

/* ---------- Footer: Admin-editierbarer HTML-Bereich (v16) ---------- */
.footer-custom {
    font-size: var(--fs-xs); line-height: 1.6; color: var(--c-text-2);
    padding: var(--s-5) 0 var(--s-6); background: var(--c-surface);
    border-top: 1px solid var(--c-border); overflow-wrap: anywhere;
}
.footer-custom p { margin: 0 0 var(--s-2); }
.footer-custom a { color: var(--c-text-2); text-decoration: underline; text-underline-offset: 2px; }
.footer-custom a:hover, .footer-custom a:focus-visible { color: var(--c-text); }
.admin-footer-textarea {
    width: 100%; box-sizing: border-box; min-height: 14rem; padding: .75rem; resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-s);
    border: 1px solid var(--c-border); border-radius: var(--r-md, 8px);
    background: var(--c-surface); color: var(--c-text);
}
.admin-footer-preview__title { font-size: var(--fs-m); margin: var(--s-6) 0 var(--s-3); }
.admin-footer-preview {
    padding: var(--s-4); background: var(--c-bg, var(--c-surface));
    border: 1px dashed var(--c-border); border-radius: var(--r-lg);
}
.admin-footer-preview .footer-custom { border-top: 0; padding: 0; background: transparent; }

/* ---------- MFA: E-Mail-Code (v17) ---------- */
.mfa-code-input {
    display: block; width: 100%; max-width: 16rem; box-sizing: border-box; margin: 0 auto;
    padding: .75rem 1rem; text-align: center; font-size: var(--fs-xl); font-weight: 600;
    letter-spacing: .5em; text-indent: .5em; font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    border: 1px solid var(--c-border); border-radius: var(--r-md);
    background: var(--c-surface); color: var(--c-text);
}
.mfa-code-input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.mfa-info-box {
    display: flex; gap: var(--s-3); align-items: flex-start; margin: var(--s-4) 0;
    padding: var(--s-4); border-radius: var(--r-md);
    background: var(--c-primary-lt); color: var(--c-text); border-left: 4px solid var(--c-primary);
}
.mfa-info-box p { margin: 0; }
.mfa-info-box__icon { flex: 0 0 auto; color: var(--c-primary-text); line-height: 0; }
.mfa-hint { margin-top: var(--s-4); }
.mfa-status-badge {
    display: inline-block; vertical-align: middle; margin-left: var(--s-2);
    padding: .15rem .6rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600;
}
.mfa-status-badge--active { background: #DCFCE7; color: #166534; }
.mfa-status-badge--inactive { background: var(--c-border); color: var(--c-text-2); }
[data-theme="dark"] .mfa-status-badge--active { background: rgba(34, 197, 94, .18); color: #86EFAC; }

/* === Hilfskl.: zentriertes schmales Formular === */
.zfu-max-form-center { max-width: 28rem; margin-inline: auto; }

/* === Hilfskl.: Erfolgs-Hinweisbox === */
.zfu-background-color-success-lt { background: var(--c-success-lt); }
.zfu-padding-notice { padding: 1rem 1.25rem; border-radius: var(--r-md); }
[data-theme="dark"] .zfu-background-color-success-lt { background: rgba(34, 197, 94, .12); }

/* ============================================================
   Admin: Logo & Icon Upload (v21)
   ============================================================ */
.admin-upload-section { margin-top: var(--s-6); }
.admin-upload-section__title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-m); font-weight: 600; margin-bottom: var(--s-3); }
.admin-upload-section__title .icon { width: 20px; height: 20px; color: var(--c-primary-text); }
.admin-upload-form { margin-top: var(--s-4); }
.admin-upload-delete-form { margin-top: var(--s-3); margin-bottom: var(--s-2); }
.admin-upload-input { display: block; width: 100%; padding: .5rem .75rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-base); cursor: pointer; }
.admin-upload-input::file-selector-button { margin-right: .75rem; padding: .35rem .85rem; background: var(--c-primary); color: #fff; border: none; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-s); }
.admin-upload-input::file-selector-button:hover { background: var(--c-primary-dk); }
.admin-upload-preview { margin-top: var(--s-3); padding: var(--s-3); background: var(--c-bg); border: 1px dashed var(--c-border); border-radius: var(--r-md); display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.admin-upload-preview__label { font-size: var(--fs-s); color: var(--c-text-2); margin: 0; }
.admin-upload-preview__img { max-height: 80px; max-width: 200px; border-radius: var(--r-sm); border: 1px solid var(--c-border); }
.admin-upload-preview__favicon { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid var(--c-border); border-radius: 4px; }

/* Benutzerdefiniertes Logo im Seitenheader */
.brand__logo-custom { height: 38px; max-width: 180px; object-fit: contain; display: block; }

/* ============================================================
   Zertifikat-View (v21)
   ============================================================ */
.cert-page { max-width: 48rem; margin-inline: auto; padding: var(--s-6) var(--s-4); }
.cert-header { text-align: center; margin-bottom: var(--s-6); }
.cert-header__brand { font-size: var(--fs-m); font-weight: 700; letter-spacing: .04em; color: var(--c-text-2); margin-bottom: var(--s-2); }
.cert-header__title { font-size: var(--fs-xl); font-weight: 700; color: var(--c-primary-text); margin: 0 0 var(--s-1); }
.cert-header__subtitle { font-size: var(--fs-base); color: var(--c-text-2); margin: 0; }
.cert-body { border: 2px solid var(--c-primary); border-radius: var(--r-lg); padding: var(--s-6) var(--s-8); text-align: center; margin-bottom: var(--s-6); }
.cert-body__intro { font-size: var(--fs-base); color: var(--c-text-2); margin-bottom: var(--s-3); }
.cert-body__name { font-size: var(--fs-xl); font-weight: 700; color: var(--c-text); margin-bottom: var(--s-2); }
.cert-body__course { font-size: var(--fs-m); color: var(--c-primary-text); font-weight: 600; margin-bottom: var(--s-4); }
.cert-body__detail { font-size: var(--fs-base); color: var(--c-text-2); margin-bottom: var(--s-1); }
.cert-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-s); color: var(--c-text-2); }
.cert-footer__date { }
.cert-footer__sig { text-align: right; }
.cert-footer__sig strong { display: block; color: var(--c-text); }
.cert-actions { display: flex; gap: var(--s-3); justify-content: center; margin-bottom: var(--s-4); flex-wrap: wrap; }

@media print {
    .site-header, .site-footer, .cert-actions, .skip-link, nav, .admin-nav { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    .cert-page { max-width: 100%; padding: 0; }
    .cert-body { border-color: #003087; }
    .cert-header__title { color: #003087; }
    .cert-body__course { color: #003087; }
    a { color: inherit !important; text-decoration: none !important; }
}

/* ---- KI-Kursimport ---- */
.ki-import-area { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-3); }
.ki-json-input { width: 100%; font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; font-size: var(--fs-s); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-3); background: var(--c-surface-2); color: var(--c-text); resize: vertical; }
.ki-import-options { margin-bottom: var(--s-4); }
.ki-import-options label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-s); cursor: pointer; }
.ki-otp-input { display:block; width:12rem; padding:0.5rem 1rem; font-size:var(--fs-xl); font-weight:700; letter-spacing:0.5em; text-align:center; border:2px solid var(--c-border); border-radius:var(--r-md); background:var(--c-surface); color:var(--c-text); }
.ki-otp-input:focus { border-color:var(--c-primary); outline:none; box-shadow:0 0 0 3px var(--c-primary-lt); }
.admin-flash { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); margin-bottom: var(--s-4); font-size: var(--fs-s); }
.admin-flash--ok { background: var(--c-success-lt); color: var(--c-success-text); }
.admin-flash--error { background: var(--c-danger-lt); color: var(--c-danger-text); }

.admin-nav__role-badge { align-self: center; padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-text); color: var(--c-surface); font-size: var(--fs-xs); font-weight: 600; }
.admin-inline-form { padding: var(--s-4); background: var(--c-surface-2); border-radius: var(--r-md); }
.admin-inline-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-3); }
.admin-inline-form label { display: block; font-size: var(--fs-base); font-weight: 600; margin-bottom: 2px; }
.admin-inline-form input, .admin-inline-form select, .admin-inline-form textarea { width: 100%; padding: 6px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-base); background: var(--c-surface); color: var(--c-text); }
.badge--success { background: var(--c-success, #16a34a); color: #fff; }
.badge--neutral { background: var(--c-surface-2); color: var(--c-text-2); }


/* ============================================================
   Abdeckungs-Seite: Accordion & kompakte Tabelle (v22.8)
   ============================================================ */
.cov-intro { margin-bottom: 1.5rem; }
.cov-intro__title { font-size: var(--fs-xl); font-weight: 800; margin-bottom: 0.5rem; }
.cov-intro__lead { font-size: var(--fs-base); color: var(--c-text-2); max-width: 800px; line-height: 1.6; margin: 0; }

.cov-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); margin-bottom: 0.75rem; overflow: hidden; }
.cov-item__header { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1.1rem; cursor: pointer; user-select: none; }
.cov-item__header::-webkit-details-marker { display: none; }
.cov-item__header::marker { display: none; }
.cov-item__meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cov-item__title { font-size: var(--fs-base); font-weight: 700; }
.cov-item__info { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-s); color: var(--c-text-2); flex-wrap: wrap; }
.cov-item__version { }
.cov-item__status { color: var(--c-success-text); font-weight: 600; }
.cov-item__arrow { font-size: var(--fs-s); transition: transform 0.2s; display: inline-block; }
.cov-item[open] .cov-item__arrow { transform: rotate(180deg); }
.cov-item[open] > .cov-item__header { border-bottom: 1px solid var(--c-border); }

.cov-table-wrap { overflow-x: auto; padding: 0.5rem 0; }
.cov-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.cov-table thead th { padding: 0.45rem 0.5rem; font-weight: 600; text-align: left; border-bottom: 2px solid var(--c-border); color: var(--c-text); white-space: nowrap; }
.cov-th-c { text-align: center !important; }
.cov-tr-domain { background: var(--c-bg); font-weight: 600; border-bottom: 1px solid var(--c-border); }
.cov-tr-obj { border-bottom: 1px solid var(--c-border); }
.cov-table td { padding: 0.4rem 0.5rem; vertical-align: middle; }
.cov-td-c { text-align: center; }
.cov-td-obj { padding-left: 1.2rem; color: var(--c-text-2); }
.cov-td-primary { font-weight: 700; color: var(--c-primary-text); }
.cov-td-warn { color: var(--c-warning-text); }
.cov-td-bold { font-weight: 600; }
.cov-td-muted { color: var(--c-text-2); }
.cov-badge-ok { background: var(--c-success-lt); color: var(--c-success-text); font-weight: 700; padding: 0.15rem 0.4rem; border-radius: var(--r-sm); font-size: var(--fs-xs); white-space: nowrap; }
.cov-ok { color: var(--c-success-text); font-weight: 600; white-space: nowrap; }
.cov-warn { color: var(--c-warning-text); font-weight: 600; white-space: nowrap; }

@media (max-width: 600px) {
    .cov-item__info { gap: 0.4rem; }
    .cov-item__version { display: none; }
}

/* ── Rollen-Picker (Admin Benutzerverwaltung) ─────────── */
.role-picker { border: none; padding: 0; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.role-label { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border-radius: var(--r-sm, 6px); border: 1px solid var(--c-border, #e2e8f0); font-size: var(--fs-s); cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
.role-label input[type="radio"] { accent-color: var(--c-primary, #2563eb); width: .95rem; height: .95rem; flex-shrink: 0; }
.role-label--active { background: var(--c-primary-lt, #e8f4fd); border-color: var(--c-primary, #2563eb); color: var(--c-primary-text, #1e40af); font-weight: 600; }
.role-label:hover { background: var(--c-surface-2, #f8fafc); }
.role-form { margin: 0; }

/* ── Admin-Tools (Cache leeren etc.) ────────────────────── */
.admin-tools-section { margin-top: 2rem; }
.admin-tools-grid { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; }
.admin-tool-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; max-width: 480px; }
.admin-tool-card__icon { flex-shrink: 0; color: var(--c-text-2, #64748b); }
.admin-tool-card__body { flex: 1; }
.admin-tool-card__body strong { display: block; margin-bottom: .25rem; }
.admin-tool-card__body p { margin: 0 0 .75rem; font-size: var(--fs-s); }

/* ---------- Admin-Seitenleiste (WordPress-Stil, v23.1) – nur auf body.admin-sidebar-layout ---------- */
body.admin-sidebar-layout { --admin-sb-w: 232px; --admin-sb-w-c: 56px; --admin-sb-bg: #1A1A24; --admin-sb-bg-2: #0E0E14; padding-left: var(--admin-sb-w); transition: padding-left .2s var(--ease); }
html.admin-sb-collapsed body.admin-sidebar-layout { padding-left: var(--admin-sb-w-c); }
body.admin-sidebar-layout .admin-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 150; width: var(--admin-sb-w);
    display: flex; flex-direction: column; gap: .25rem; padding: .75rem .5rem;
    background: var(--admin-sb-bg); color: #C9CDD6; border-right: 1px solid rgba(255, 255, 255, .06);
    overflow-x: hidden; overflow-y: auto; transition: width .2s var(--ease), transform .2s var(--ease);
}
html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar { width: var(--admin-sb-w-c); }
body.admin-sidebar-layout .admin-sidebar__brand { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .25rem .4rem; margin-bottom: .5rem; border-radius: var(--r-sm); color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; }
body.admin-sidebar-layout .admin-sidebar__logo { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; }
body.admin-sidebar-layout .admin-sidebar__brand-text small { font-weight: 500; color: #8B93A7; margin-left: .2rem; }
body.admin-sidebar-layout .admin-sidebar .admin-nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 0; }
body.admin-sidebar-layout .admin-sidebar__link {
    display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 40px; padding: .5rem .6rem;
    border: 0; border-radius: var(--r-sm); background: transparent; color: #C9CDD6; font: inherit; font-size: var(--fs-s);
    text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
}
body.admin-sidebar-layout .admin-sidebar__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
body.admin-sidebar-layout .admin-sidebar__link:focus-visible { outline: 2px solid #6CB8F6; outline-offset: -2px; }
body.admin-sidebar-layout .admin-sidebar__link.is-active { background: #0078D4; color: #fff; box-shadow: inset 3px 0 0 #6CB8F6; }
body.admin-sidebar-layout .admin-sidebar__icon { flex: 0 0 20px; width: 20px; height: 20px; }
body.admin-sidebar-layout .admin-sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .08); }
body.admin-sidebar-layout .admin-sidebar__foot .admin-nav__role-badge { align-self: flex-start; margin: 0 .6rem .4rem; background: #7C3AED; color: #fff; }
html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__label { display: none; }
html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__link,
html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; }
body.admin-sidebar-layout .admin-sidebar-open, body.admin-sidebar-layout .admin-sidebar-backdrop { display: none; }
@media (prefers-reduced-motion: reduce) { body.admin-sidebar-layout, body.admin-sidebar-layout .admin-sidebar { transition: none; } }
@media (max-width: 767.98px) {
    body.admin-sidebar-layout, html.admin-sb-collapsed body.admin-sidebar-layout { padding-left: 0; }
    body.admin-sidebar-layout .admin-sidebar, html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar { width: min(280px, 85vw); transform: translateX(-100%); z-index: 210; box-shadow: none; }
    body.admin-sidebar-layout.admin-sb-open .admin-sidebar { transform: none; box-shadow: 8px 0 32px rgba(0, 0, 0, .35); }
    html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__label { display: inline; }
    html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__link, html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__brand { justify-content: flex-start; padding-left: .6rem; padding-right: .6rem; }
    body.admin-sidebar-layout .admin-sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .5); }
    body.admin-sidebar-layout .admin-sidebar-open {
        display: inline-flex; align-items: center; gap: .5rem; position: fixed; left: 1rem; bottom: 1rem; z-index: 190;
        padding: .65rem 1rem; border: 0; border-radius: var(--r-pill); background: #0078D4; color: #fff; font: inherit; font-weight: 600;
        box-shadow: var(--c-shadow-md); cursor: pointer;
    }
    body.admin-sidebar-layout.admin-sb-open { overflow: hidden; }
}
@media print { body.admin-sidebar-layout { padding-left: 0 !important; } .admin-sidebar, .admin-sidebar-open, .admin-sidebar-backdrop, .dash-toolbar, .dash-widget__handle { display: none !important; } }

/* ---------- Anpassbares Dashboard (Drag & Drop) ---------- */
.dash-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; }
.dash-toolbar__hint { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--c-text-2); font-size: var(--fs-s); }
.dash-toolbar__hint .icon { width: 16px; height: 16px; vertical-align: -3px; }
.dash-toolbar__reset { margin: 0; }
.dash-status { min-height: 1.3em; margin: 0 0 .5rem; font-size: var(--fs-s); color: var(--c-success-text); }
.dash-status.is-error { color: var(--c-danger-text); }
.dash-widgets { display: flex; flex-direction: column; gap: 1.25rem; }
.dash-widget { position: relative; padding: .75rem 1rem 1rem; border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--c-shadow); }
.dash-widget__bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.dash-widget__title { margin: 0; font-size: var(--fs-m); font-weight: 600; }
.dash-widget__handle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border-dark); border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-text-2); cursor: grab; touch-action: none; }
.dash-widget__handle:hover { color: var(--c-primary); border-color: var(--c-primary); }
.dash-widget__handle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.dash-widget__handle:active { cursor: grabbing; }
.dash-widget__handle .icon { width: 18px; height: 18px; }
.dash-widget--ghost { opacity: .4; outline: 2px dashed var(--c-primary); }
.dash-widget--chosen { box-shadow: var(--c-shadow-md); }
.dash-widget .kpi-grid { margin-bottom: .75rem; }
/* v26.17: Dashboard-Kacheln (Gesamtübersicht, Kennzahlen, KI) – exakt die Masse von .seo-portal--compact */
.dash-widget .dash-tiles { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: var(--s-2); margin-bottom: var(--s-2); }
.dash-widget .dash-tiles .seo-status-card { padding: var(--s-2) var(--s-3); gap: 0; border-left-width: 3px; }
.dash-widget .dash-tiles .seo-status-card__head { margin-bottom: 2px; }
.dash-widget .dash-tiles .seo-status-card__icon { width: 26px; height: 26px; }
.dash-widget .dash-tiles .seo-status-card__icon .icon { width: 14px; height: 14px; }
.dash-widget .dash-tiles .seo-status-card__badge { font-size: var(--fs-xs); padding: 1px 7px; }
.dash-widget .dash-tiles .seo-status-card__title { font-size: var(--fs-xs); }
.dash-widget .dash-tiles .seo-status-card__value { font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.dash-widget .dash-tiles .seo-status-card__hint { font-size: var(--fs-xs); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-widget .dash-tiles div.seo-status-card:hover { transform: none; box-shadow: var(--c-shadow); }
.seo-status--neutral { border-left-color: var(--c-border); }
.seo-status--neutral .seo-status-card__icon { background: var(--c-surface-2); color: var(--c-text-2); }
.dash-note { margin: var(--s-1) 0 0; font-size: var(--fs-xs); color: var(--c-text-3); }
.dash-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.dash-hero__text { margin: 0; font-size: var(--fs-xs); color: var(--c-text-2); max-width: 40rem; }
.dash-hero .dash-hero__score { flex-direction: row; align-items: baseline; gap: var(--s-2); min-width: 0; padding: var(--s-1) var(--s-3); }
.dash-hero .dash-hero__score .seo-hero__score-value { font-size: var(--fs-m); }
.dash-ki-chart-wrap { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.dash-ki-chart { display: block; width: 100%; max-width: 720px; height: auto; color: var(--c-primary); }
.dash-ki-chart__bar { fill: currentColor; opacity: .45; }
.dash-ki-chart__bar--today { opacity: 1; }
.dash-ki-chart__bar:hover { opacity: .85; }
.dash-ki-chart__axis { stroke: var(--c-border); stroke-width: 1; }
.dash-ki-chart__limit { stroke: var(--c-danger); stroke-width: 1; stroke-dasharray: 4 3; }
.dash-ki-chart__label { fill: var(--c-text-3); font-size: var(--fs-xs); }
.dash-ki-chart__label--limit { fill: var(--c-danger); }
@media (max-width: 640px) { .dash-widget .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-widget .admin-tools-grid { margin-top: 0; }
.dash-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.dash-page { max-width: 1100px; margin: 0 auto; }
.dash-shortcuts .dash-shortcut { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; color: var(--c-text); text-decoration: none; font-weight: 500; box-shadow: none; border: 1px solid var(--color-border-dark); }
.dash-shortcuts .dash-shortcut:hover { color: var(--c-primary); border-color: var(--c-primary); }
.dash-shortcut .icon { width: 18px; height: 18px; flex: 0 0 18px; }

/* ===== v23.2: Admin-Logos (helles / dunkles Design) ===== */
/* Standard (hell): Variante «dark» ausblenden. [data-theme] wird vom Theme-Schalter (localStorage «theme»)
   bzw. beim ersten Besuch gemäss prefers-color-scheme gesetzt. Ohne JavaScript greift die Media-Query. */
.brand__logo-variant--dark { display: none; }
[data-theme="dark"] .brand__logo-variant--light { display: none; }
[data-theme="dark"] .brand__logo-variant--dark { display: block; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) .brand__logo-variant--light { display: none; }
    html:not([data-theme]) .brand__logo-variant--dark { display: block; }
}
body.admin-sidebar-layout .admin-sidebar__logo-custom { display: block; max-height: 32px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
body.admin-sidebar-layout .admin-sidebar__brand--custom .admin-sidebar__logo { display: none; }
html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__brand--custom .admin-sidebar__logo { display: block; }
html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__brand--custom .admin-sidebar__logo-custom { display: none; }
@media (max-width: 767.98px) {
    html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__brand--custom .admin-sidebar__logo { display: none; }
    html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__brand--custom .admin-sidebar__logo-custom { display: block; }
}

/* Admin → Erscheinungsbild */
.appearance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.appearance-card { padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-lg, 12px); background: var(--c-surface); }
.appearance-card__title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-m); font-weight: 600; margin: 0 0 var(--s-2); }
.appearance-card__title .icon { width: 20px; height: 20px; color: var(--c-primary-text); }
.appearance-card__hint { font-size: var(--fs-s); color: var(--c-text-2); margin: 0 0 var(--s-3); }
.appearance-preview { display: flex; align-items: center; justify-content: center; min-height: 110px; padding: var(--s-3); border-radius: var(--r-md); border: 1px dashed var(--c-border); }
.appearance-preview--light { background: #FFFFFF; color: #1A1A24; }
.appearance-preview--dark { background: #1A1A24; color: #F4F4F8; border-color: #3A3A4A; }
.appearance-preview__img { display: block; max-height: 80px; max-width: 100%; object-fit: contain; }
.appearance-preview__img[hidden], .appearance-preview__empty[hidden] { display: none; }
.appearance-preview__empty { font-size: var(--fs-s); opacity: .75; text-align: center; }
.appearance-preview__empty img { display: block; margin: 0 auto .35rem; width: 36px; height: 36px; }
.appearance-badge { display: inline-block; white-space: nowrap; flex-shrink: 0; font-size: var(--fs-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; margin-left: auto; background: var(--c-bg); color: var(--c-text-2); border: 1px solid var(--c-border); }
.appearance-badge.is-custom { color: #187A07; border-color: #187A07; }
[data-theme="dark"] .appearance-badge.is-custom { color: #7EE06B; border-color: #7EE06B; }
.appearance-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.appearance-status { min-height: 1.4em; margin: var(--s-2) 0 0; font-size: var(--fs-s); }
.appearance-status.is-error { color: #B42318; }
.appearance-status.is-ok { color: #187A07; }
[data-theme="dark"] .appearance-status.is-error { color: #FF8A80; }
[data-theme="dark"] .appearance-status.is-ok { color: #7EE06B; }

/* ==========================================================================
   v23.3: Kurs-Banner (Admin-HTML), Kurzfassung-Drawer, SEO/GEO-Panel
   ========================================================================== */
/* Kurs-Banner auf der Kursseite: neutralisiert die Hero-Optik von .course-banner (Prüfungsübersicht) */
.course-banner--html { display: block; color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--c-shadow-md, none); padding: var(--s-5); margin: var(--s-5) 0; border-radius: var(--r-lg); }
.course-banner--html::after { content: none; }
.course-banner--html h2, .course-banner--html h3, .course-banner--html h4 { color: var(--c-text); margin: 0 0 var(--s-2); }
.course-banner--html p { margin: 0 0 var(--s-3); }
.course-banner--html > :last-child { margin-bottom: 0; }
.course-banner--html a { color: var(--c-primary-text, var(--c-primary)); text-decoration: underline; }
.course-banner--html iframe, .course-banner--html video { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md); margin: var(--s-3) 0; background: #000; }

/* Kurzfassung: fixer Button links, Drawer von links */
.kurzfassung-btn { position: fixed; left: 0; top: 50%; z-index: 90; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; padding: var(--s-4) var(--s-2); border: 0; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--c-primary); color: #fff; font: inherit; font-size: var(--fs-s); font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.kurzfassung-btn:hover { filter: brightness(1.08); }
.kurzfassung-btn:focus-visible { outline: 3px solid var(--c-accent, #F59E0B); outline-offset: 2px; }
.kurzfassung-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s; }
.kurzfassung-backdrop.is-open { opacity: 1; }
.kurzfassung-drawer { position: fixed; left: 0; top: 0; bottom: 0; z-index: 150; width: min(440px, 92vw); overflow-y: auto; padding: var(--s-5); background: var(--c-surface); color: var(--c-text); box-shadow: 8px 0 32px rgba(0, 0, 0, .25); transform: translateX(-100%); transition: transform .25s ease; }
.kurzfassung-drawer.is-open { transform: translateX(0); }
.kurzfassung-drawer:focus { outline: none; }
.kurzfassung-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.kurzfassung-drawer__head h2 { margin: 0; font-size: var(--fs-l); }
.kurzfassung-drawer__close { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-text); cursor: pointer; }
.kurzfassung-drawer__close .icon { width: 18px; height: 18px; }
.kurzfassung-drawer__course { margin: var(--s-1) 0 var(--s-4); color: var(--c-text-2); font-size: var(--fs-s); }
.kurzfassung-drawer__audio { display: block; width: 100%; margin-bottom: var(--s-4); }
.kurzfassung-drawer__text { line-height: 1.6; }
body.kurzfassung-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .kurzfassung-drawer, .kurzfassung-backdrop { transition: none; } }
@media print { .kurzfassung-btn, .kurzfassung-drawer, .kurzfassung-backdrop { display: none !important; } }

/* Admin: Kurs-Formular (Banner, Kurzfassung) */
.admin-code-textarea { width: 100%; min-height: 140px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-s); line-height: 1.45; }
.admin-checkbox { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.admin-checkbox input { width: 18px; height: 18px; margin: 0; }
.admin-kurzfassung { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.admin-kurzfassung__delete { margin-top: var(--s-2); }

/* Admin: SEO/GEO-Panel */
.admin-seo-form { display: grid; gap: var(--s-5); }
.admin-seo-section { padding: var(--s-5); }
.admin-seo-section legend, .admin-seo-section h2 { font-size: var(--fs-m); font-weight: 600; margin-bottom: var(--s-3); }
.admin-seo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.admin-seo-grid--spaced { margin-top: var(--s-4); }
.admin-seo-grid label, .admin-seo-section label { display: block; font-weight: 500; }
.admin-seo-grid input[type="text"], .admin-seo-grid input[type="url"], .admin-seo-grid select, .admin-seo-section textarea { width: 100%; }
.admin-seo-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.admin-seo-errors { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.admin-field-hint { display: block; margin-top: var(--s-1); color: var(--c-text-2); font-size: var(--fs-s); font-weight: 400; }
.admin-hreflang { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.admin-hreflang__row { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto; gap: var(--s-2); align-items: center; }
@media (max-width: 600px) { .admin-hreflang__row { grid-template-columns: 1fr; } }

/* ---------- v23.4: Admin-Sektionen, kompaktere Admin-Typografie, Design & Logo, Backup ---------- */
body.admin-sidebar-layout main h1, body.admin-sidebar-layout .zfu-font-font-6c652f { font-size: var(--fs-xl); }
body.admin-sidebar-layout main h2 { font-size: var(--fs-m); }
body.admin-sidebar-layout main h3 { font-size: var(--fs-m); }
body.admin-sidebar-layout .admin-sidebar__link { min-height: 34px; padding: .38rem .6rem; font-size: var(--fs-s); }
body.admin-sidebar-layout .admin-sidebar__icon { flex-basis: 18px; width: 18px; height: 18px; }
body.admin-sidebar-layout .admin-sidebar__section-header {
    margin: .9rem .6rem .25rem; font-size: var(--fs-xs); font-weight: 700; color: #C9CDD6; opacity: .5; white-space: nowrap; user-select: none;
}
html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__section-header { margin: .5rem .4rem; height: 1px; background: rgba(255, 255, 255, .25); }
@media (max-width: 767px) {
    html.admin-sb-collapsed body.admin-sidebar-layout .admin-sidebar__section-header { margin: .9rem .6rem .25rem; height: auto; background: none; }
}
.appearance-toc { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); }
.appearance-toc a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--c-border); border-radius: 999px; font-size: var(--fs-s); text-decoration: none; color: var(--c-text); }
.appearance-toc a:hover { border-color: var(--c-primary); }
.appearance-toc .icon { width: 16px; height: 16px; }
.appearance-section-title { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--c-border); scroll-margin-top: 80px; }
.appearance-section-title .icon { width: 20px; height: 20px; color: var(--c-primary-text); }
.appearance-card.admin-upload-section { margin-top: 0; }
.backup-alert { display: flex; align-items: flex-start; gap: .6rem; padding: .8rem 1rem; margin: var(--s-3) 0; border-radius: var(--r-md, 8px); border: 1px solid; font-size: var(--fs-base); }
.backup-alert .icon { flex: 0 0 20px; width: 20px; height: 20px; margin-top: .1rem; }
.backup-alert--warn { background: #FDECEC; border-color: #E5A0A0; color: #8A1C1C; }
.backup-alert--ok { background: #E8F6EC; border-color: #9ED3AE; color: #17572B; }
.backup-alert a { color: inherit; font-weight: 600; }
[data-theme="dark"] .backup-alert--warn { background: #3A1A1D; border-color: #7A3036; color: #F5B8BC; }
[data-theme="dark"] .backup-alert--ok { background: #16301F; border-color: #2F6B43; color: #A8E3BA; }
.backup-create { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 var(--s-5); }
.backup-create__hint { font-size: var(--fs-s); color: var(--c-text-2); }
.backup-table-wrap { overflow-x: auto; }
.backup-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-s); }
.backup-table th, .backup-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: middle; }
.backup-table th { font-size: var(--fs-xs); color: var(--c-text-2); }
.backup-table td.backup-table__actions { white-space: nowrap; text-align: right; }
.backup-table__actions form { display: inline-block; margin: 0 0 0 .35rem; vertical-align: middle; }
.backup-table td:nth-child(2) { white-space: nowrap; }
.backup-code { overflow-x: auto; padding: .8rem 1rem; border-radius: var(--r-md, 8px); background: #F1F3F6; color: #374151; font-size: var(--fs-s); white-space: pre-wrap; word-break: break-all; }
[data-theme="dark"] .backup-code { background: #1E2230; color: #C9CDD6; }

/* v23.5: KI-Import – Kurs-Eingabe für den Prompt */
.ki-course-row { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-3); max-width: 28rem; }
.ki-course-input { padding: .55rem .75rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-base); }
/* v25.9: KI-Kurs – editierbarer Prompt */
/* v26.4: KI-Kurzfassung in der Import-Vorschau */
.ki-summary-box { margin-top: var(--s-6); }
.ki-summary-box h3 { font-size: var(--fs-m); margin: 0 0 var(--s-2); display: flex; align-items: center; gap: var(--s-2); }
.ki-summary-wrap { position: relative; margin-top: var(--s-3); }
.ki-summary-textarea { width: 100%; box-sizing: border-box; font-size: var(--fs-s); line-height: 1.7; resize: vertical; padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text); font-family: inherit; }
#ki-summary-copy { margin-top: var(--s-2); }
.ki-step { margin-bottom: var(--s-6); }
.ki-prompt-hint { margin-top: var(--s-2); font-size: var(--fs-s); color: var(--c-text-2); }
/* v5L: Fehlermeldungen im KI-Generator gut sichtbar (fett rot, Dark Mode über Variable heller) */
.ki-gen-status--error { color: var(--c-danger-text); font-weight: 700; }
/* v25.2: KI-Kursgenerator */
.ki-gen { margin-bottom: var(--s-4); padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.ki-gen-progress { width: 100%; height: 10px; margin-top: var(--s-3); accent-color: var(--c-primary); }
.ki-gen-outline { margin: var(--s-2) 0 0; padding-left: 1.2rem; font-size: var(--fs-s); color: var(--c-text-2); }
.ki-gen-outline__head { list-style: none; margin-left: -1.2rem; font-weight: 600; color: var(--c-text); }
/* v26.1: KI-Empfehlung zur Kartenanzahl */
#ki-gen-estimate { align-self: flex-start; }
.ki-gen-estimate { margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--c-primary); border-radius: var(--r-md); background: var(--c-bg, transparent); font-size: var(--fs-s); color: var(--c-text-2); max-width: 48rem; }

/* v23.5: SEO/GEO-Portal – Tabs, Status-Karten, Google-Vorschau, Schalter, Zeichenzähler */
.seo-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: linear-gradient(135deg, var(--c-primary-lt), var(--c-surface)); border: 1px solid var(--c-border); }
.seo-hero h1 { margin: 0 0 var(--s-1); display: flex; align-items: center; gap: var(--s-2); }
.seo-hero .admin-field-hint { margin: 0; max-width: 46rem; }
.seo-hero__score { display: flex; flex-direction: column; align-items: center; min-width: 8.5rem; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--c-shadow); }
.seo-hero__score-value { font-size: var(--fs-xl); font-weight: 700; color: var(--c-primary-text); line-height: 1.1; }
.seo-hero__score-label { font-size: var(--fs-xs); color: var(--c-text-2); text-align: center; }
.seo-tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: var(--s-4) 0 var(--s-5); padding: var(--s-1); border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.seo-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border-radius: var(--r-sm); font-size: var(--fs-s); font-weight: 500; color: var(--c-text-2); text-decoration: none; }
.seo-tab .icon { width: 16px; height: 16px; }
.seo-tab:hover { color: var(--c-text); background: var(--c-surface); }
.seo-tab.is-active { background: var(--c-surface); color: var(--c-primary-text); box-shadow: var(--c-shadow); }
.seo-tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.seo-tab-content { margin-bottom: var(--s-6); }
.seo-portal.is-enhanced .seo-tab-content { display: none; }
.seo-portal.is-enhanced .seo-tab-content.is-active { display: block; }
.seo-panel-title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-l); margin: 0 0 var(--s-4); }
.seo-panel-title .icon { width: 20px; height: 20px; color: var(--c-primary-text); }
.seo-main-form { gap: 0; }
.seo-main-form .admin-seo-section { margin-bottom: var(--s-4); }
.seo-save-bar { position: sticky; bottom: 0; z-index: 5; padding: var(--s-3) 0; background: var(--c-bg); border-top: 1px solid var(--c-border); }

.seo-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.seo-status-card { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-border); box-shadow: var(--c-shadow); color: var(--c-text); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.seo-status-card:hover { transform: translateY(-2px); box-shadow: var(--c-shadow-md); }
.seo-status-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-1); }
.seo-status-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-text-2); }
.seo-status-card__icon .icon { width: 18px; height: 18px; }
.seo-status-card__badge { display: inline-flex; align-items: center; gap: .3rem; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--c-surface-2); color: var(--c-text-2); }
.seo-status-card__badge .icon { width: 13px; height: 13px; }
.seo-status-card__title { font-size: var(--fs-s); color: var(--c-text-2); font-weight: 500; }
.seo-status-card__value { font-size: var(--fs-m); font-weight: 700; }
.seo-status-card__hint { font-size: var(--fs-s); color: var(--c-text-3); line-height: 1.4; }
.seo-status--ok { border-left-color: var(--c-success); }
.seo-status--ok .seo-status-card__badge, .seo-status--ok .seo-status-card__icon { background: var(--c-success-lt); color: var(--c-success-text); }
.seo-status--warn { border-left-color: var(--c-warning); }
.seo-status--warn .seo-status-card__badge, .seo-status--warn .seo-status-card__icon { background: var(--c-warning-lt); color: var(--c-warning-text); }
.seo-status--error { border-left-color: var(--c-danger); }
.seo-status--error .seo-status-card__badge, .seo-status--error .seo-status-card__icon { background: var(--c-danger-lt); color: var(--c-danger-text); }

.seo-quick h3, .seo-connect h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-m); }
.seo-quick__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.seo-quick__actions form { margin: 0; }
.seo-quick__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.seo-quick__links a { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-s); }
.seo-quick__links .icon { width: 14px; height: 14px; }

.seo-connect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-4); }
.seo-connect { padding: var(--s-5); border-top: 4px solid var(--c-border); }
.seo-connect.seo-status--ok { border-top-color: var(--c-success); border-left-color: var(--c-border); }
.seo-connect.seo-status--warn { border-top-color: var(--c-warning); border-left-color: var(--c-border); }
.seo-connect__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.seo-connect__head h3 { margin: 0; }
.seo-connect input[type="text"] { width: 100%; }
.seo-connect label { display: block; font-weight: 500; margin-top: var(--s-3); }
.seo-steps { margin: 0 0 var(--s-2); padding-left: 1.3em; font-size: var(--fs-s); line-height: 1.55; }
.seo-steps li { margin-bottom: .3rem; }
.seo-steps .icon { width: 13px; height: 13px; vertical-align: -1px; }
.seo-copy-row { display: flex; gap: var(--s-2); align-items: center; }
.seo-copy-row input { flex: 1 1 auto; min-width: 0; }

.seo-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-top: var(--s-3); }
.seo-label-row label { margin: 0; }
.seo-counter { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--c-text-3); }
.seo-counter--ok { color: var(--c-success-text); }
.seo-counter--warn { color: var(--c-warning-text); }
.seo-counter--over { color: var(--c-danger-text); font-weight: 600; }

.seo-preview { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: #fff; border: 1px solid #dadce0; font-family: Arial, Helvetica, sans-serif; max-width: 40rem; }
.seo-preview__label { font-size: var(--fs-xs); color: #70757a; margin-bottom: 4px; }
.seo-preview__url { font-size: var(--fs-xs); color: #202124; }
.seo-preview__title { font-size: var(--fs-m); color: #1a0dab; line-height: 1.3; }
.seo-preview__desc { font-size: var(--fs-s); color: #4d5156; line-height: 1.5; }
.seo-inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; }
.seo-jsonld-result { font-size: var(--fs-s); padding: 2px 8px; border-radius: var(--r-sm); }
.seo-jsonld-result.seo-status--ok { background: var(--c-success-lt); color: var(--c-success-text); }
.seo-jsonld-result.seo-status--warn { background: var(--c-warning-lt); color: var(--c-warning-text); }
.seo-jsonld-result.seo-status--error { background: var(--c-danger-lt); color: var(--c-danger-text); }
.seo-accordion, .seo-problem { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); }
.seo-accordion > summary, .seo-problem > summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; font-weight: 600; list-style: none; }
.seo-accordion > summary::-webkit-details-marker, .seo-problem > summary::-webkit-details-marker { display: none; }
.seo-accordion > summary .icon, .seo-problem > summary .icon { width: 16px; height: 16px; }
.seo-accordion[open] > summary, .seo-problem[open] > summary { margin-bottom: var(--s-3); }
.seo-problem { border-left: 4px solid var(--c-warning); }
.seo-count-badge { margin-left: auto; min-width: 1.6rem; padding: .1rem .5rem; border-radius: 999px; background: var(--c-surface-2, var(--c-border)); color: var(--c-text-2); font-size: var(--fs-xs); font-weight: 600; text-align: center; }
.seo-problem__list { list-style: none; margin: 0; padding: 0; }
.seo-problem__list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--c-border); font-size: var(--fs-s); }
.seo-problem__list a { display: inline-flex; align-items: center; gap: .25rem; }
.seo-problem__list .icon { width: 14px; height: 14px; }
.seo-problem__title { flex: 1 1 12rem; }
.seo-check-ok { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-4); background: var(--c-success-lt); color: var(--c-success-text); border-left: 4px solid var(--c-success); }
.seo-mini-table { width: 100%; border-collapse: collapse; margin-top: var(--s-3); font-size: var(--fs-s); }
.seo-mini-table th, .seo-mini-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: middle; word-break: break-word; }
.seo-mini-table th { color: var(--c-text-2); font-weight: 600; font-size: var(--fs-xs); }
.seo-mini-table td:last-child { text-align: right; white-space: nowrap; }
.seo-mini-table td a { display: inline-flex; align-items: center; gap: .25rem; }
.seo-mini-table .icon { width: 14px; height: 14px; }
.seo-mini-table form { margin: 0; }
.seo-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; }
.seo-inline-form input[type="text"] { flex: 1 1 10rem; width: auto; margin: 0; }

.seo-switch { display: flex; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-3); cursor: pointer; font-weight: 400; }
.seo-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seo-switch__track { position: relative; flex: 0 0 42px; width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--c-track); transition: background .15s ease; }
.seo-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease; }
.seo-switch input:checked + .seo-switch__track { background: var(--c-primary); }
.seo-switch input:checked + .seo-switch__track::after { transform: translateX(18px); }
.seo-switch input:focus-visible + .seo-switch__track { outline: 2px solid var(--c-primary); outline-offset: 2px; }

.seo-crawler-list { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }
.seo-crawler { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.seo-crawler .seo-switch { margin: 0; }
.seo-crawler.is-blocked { border-color: var(--c-danger); background: var(--c-danger-lt); }
.seo-crawler.is-blocked .seo-switch input:checked + .seo-switch__track { background: var(--c-danger); }
.seo-crawler__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.seo-crawler__vendor { font-size: var(--fs-xs); color: var(--c-text-2); }
.seo-crawler__desc { flex-basis: 100%; font-size: var(--fs-s); color: var(--c-text-2); }
.seo-crawler--critical .seo-crawler__desc { color: var(--c-warning-text); }
.seo-crawler__state { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: 600; padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-success-lt); color: var(--c-success-text); }
.seo-crawler.is-blocked .seo-crawler__state { background: var(--c-danger); color: #fff; }
.seo-code-preview { margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: #F1F3F6; color: #374151; font-size: var(--fs-s); white-space: pre-wrap; overflow-x: auto; }

.seo-course { padding: var(--s-4) var(--s-5); margin-bottom: var(--s-4); }
.seo-course legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-weight: 600; }
.seo-course__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.seo-course input[type="text"], .seo-course textarea { width: 100%; }
@media (max-width: 860px) { .seo-course__grid { grid-template-columns: 1fr; } .seo-hero { padding: var(--s-4); } }

[data-theme="dark"] .seo-hero { background: linear-gradient(135deg, rgba(99, 102, 241, .16), var(--c-surface)); }
[data-theme="dark"] .seo-preview { background: #202124; border-color: #3c4043; }
[data-theme="dark"] .seo-preview__url { color: #dadce0; }
[data-theme="dark"] .seo-preview__title { color: #8ab4f8; }
[data-theme="dark"] .seo-preview__desc { color: #bdc1c6; }
[data-theme="dark"] .seo-code-preview { background: #1E2230; color: #C9CDD6; }
[data-theme="dark"] .seo-switch__track::after { background: #E5E7EB; }
.seo-main-form[hidden] { display: none; }



/* ── Admin-Dashboard: Status-Streifen ─────────────────────────────────────── */
.status-strip { display: flex; flex-direction: column; gap: .35rem; }
.status-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .75rem; border-radius: var(--r-md);
    font-size: var(--fs-s); line-height: 1.4;
}
.status-item .icon { flex: 0 0 18px; width: 18px; height: 18px; }
.status-item__label { font-weight: 600; min-width: 110px; flex: 0 0 auto; }
.status-item__text  { flex: 1; }
.status-item__link  {
    display: inline-flex; align-items: center; gap: .3rem;
    margin-left: auto; padding-left: .75rem; white-space: nowrap;
    font-weight: 600; text-decoration: none; opacity: .85; flex: 0 0 auto;
}
.status-item__link .icon { width: 15px; height: 15px; }
.status-item__link:hover { opacity: 1; }
/* Farb-Varianten */
.status-item--ok     { background: var(--c-success-lt); color: var(--c-success-text); }
.status-item--info   { background: var(--c-primary-lt); color: var(--c-primary-text); }
.status-item--warn   { background: var(--c-warning-lt); color: var(--c-warning-text); }
.status-item--danger { background: var(--c-danger-lt);  color: var(--c-danger-text); }
/* Dark-Mode */
[data-theme="dark"] .status-item--ok     { background: #0D2018; color: #34D399; }
[data-theme="dark"] .status-item--info   { background: #1A2E3D; color: #6CB8F6; }
[data-theme="dark"] .status-item--warn   { background: #2A1E08; color: #FBBF24; }
[data-theme="dark"] .status-item--danger { background: #2A0E0E; color: #F87171; }
/* Responsive */
@media (max-width: 600px) {
    .status-item { flex-wrap: wrap; }
    .status-item__label { min-width: 80px; }
    .status-item__link  { padding-left: 0; margin-left: 0; }
}

/* ===== v23.9: Spaced Repetition (4 Stufen), Prüfungsreife, Tastenkürzel, Fehlerquote, Lesezeichen-Hinweis ===== */
.learn-actions--4 { grid-template-columns: repeat(4, 1fr); }
.btn-rate { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; line-height: 1.25; white-space: normal; color: #fff; border: none; padding: var(--s-3) var(--s-2); }
.btn-rate kbd { font-size: var(--fs-xs); opacity: .8; background: rgba(255,255,255,.18); border: none; color: inherit; }
.learn-actions .btn-rate--again { background: linear-gradient(135deg, #DC2626, #EF4444); box-shadow: 0 4px 14px rgba(220,38,38,.20); }
.learn-actions .btn-rate--hard { background: linear-gradient(135deg, #D97706, #F59E0B); box-shadow: 0 4px 14px rgba(217,119,6,.20); }
.learn-actions .btn-rate--good { background: linear-gradient(135deg, #059669, #10B981); box-shadow: 0 4px 14px rgba(5,150,105,.25); }
.learn-actions .btn-rate--easy { background: linear-gradient(135deg, #0078D4, #3B9BEA); box-shadow: 0 4px 14px rgba(0,120,212,.22); }
@media (max-width: 640px) { .learn-actions--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .learn-actions.learn-actions--4 { grid-template-columns: 1fr 1fr; } }
kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; font: 600 .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; background: var(--c-surface-2); border: 1px solid var(--c-border); border-bottom-width: 2px; border-radius: 6px; color: var(--c-text-2); }
.link-button { background: none; border: none; padding: 0; margin-left: var(--s-2); color: var(--c-primary); font: inherit; text-decoration: underline; cursor: pointer; }
.learn-empty { text-align: center; padding: var(--s-8) var(--s-5); margin-top: var(--s-5); }
.learn-empty h2 { margin: 0 0 var(--s-3); }
.learn-empty p { color: var(--c-text-2); margin: 0 0 var(--s-5); }

.shortcut-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.shortcut-modal[hidden] { display: none; }
.shortcut-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.shortcut-modal__panel { position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; background: var(--c-surface); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: 0 20px 50px rgba(0,0,0,.25); outline: none; animation: fade-up .25s var(--ease); }
.shortcut-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.shortcut-modal__head h2 { margin: 0; font-size: var(--fs-m); }
.shortcut-modal__close { background: none; border: none; cursor: pointer; color: var(--c-text-2); padding: 4px; border-radius: var(--r-sm); }
.shortcut-modal__close:hover { background: var(--c-surface-2); }
.shortcut-modal__list { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: 0; align-items: center; }
.shortcut-modal__list dt { white-space: nowrap; }
.shortcut-modal__list dd { margin: 0; color: var(--c-text-2); }
.shortcut-modal__note { margin: var(--s-4) 0 0; font-size: var(--fs-s); color: var(--c-text-3); }
body.shortcut-modal-open { overflow: hidden; }

.readiness-bar { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.readiness-bar__head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-2); }
.readiness-bar__label { font-weight: 600; }
.readiness-bar__pct { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.readiness-bar__meter { display: block; width: 100%; height: 10px; border: none; border-radius: var(--r-pill); overflow: hidden; background: var(--c-border); appearance: none; -webkit-appearance: none; }
.readiness-bar__meter::-webkit-progress-bar { background: rgba(0,0,0,.08); border-radius: var(--r-pill); }
.readiness-bar__meter::-webkit-progress-value { background: var(--readiness-color, var(--c-primary)); border-radius: var(--r-pill); transition: width .4s var(--ease); }
.readiness-bar__meter::-moz-progress-bar { background: var(--readiness-color, var(--c-primary)); border-radius: var(--r-pill); }
.readiness-bar__hint { margin: var(--s-2) 0 0; font-size: var(--fs-s); color: var(--c-text-2); }
.readiness-bar--beginner { --readiness-color: #DC2626; }
.readiness-bar--building { --readiness-color: #D97706; }
.readiness-bar--almost { --readiness-color: #0078D4; }
.readiness-bar--ready { --readiness-color: #059669; }
.readiness-bar .readiness-bar__label { color: var(--readiness-color); }

.admin-error-stats { margin-top: var(--s-6); padding: var(--s-5); }
.admin-error-stats__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-3); }
.admin-error-stats__head h2 { margin: 0; font-size: var(--fs-m); display: flex; align-items: center; gap: var(--s-2); }
.content-version-badge { font-variant-numeric: tabular-nums; }
.error-rate { display: inline-block; padding: 2px 8px; border-radius: var(--r-pill); font-weight: 600; font-variant-numeric: tabular-nums; }
.error-rate--high { background: var(--c-danger-lt); color: var(--c-danger-text); }
.error-rate--mid { background: var(--c-warning-lt); color: var(--c-warning-text); }
.error-rate--low { background: var(--c-success-lt); color: var(--c-success-text); }

.bookmark-hint { position: fixed; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: 900; display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(0,0,0,.18); animation: fade-up .3s var(--ease); }
.bookmark-hint__text { margin: 0; font-size: var(--fs-s); color: var(--c-text-2); flex: 1; }
.bookmark-hint__close { background: none; border: none; font-size: var(--fs-l); line-height: 1; cursor: pointer; color: var(--c-text-3); padding: 0 4px; }
@media print { .bookmark-hint, .shortcut-modal { display: none !important; } }

/* ── Kurswunsch: Konto-Vergleich ───────────────────────────────────────────── */
.kw-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); justify-content: center; gap: var(--s-4); margin: var(--s-6) 0; }
@media (max-width: 540px) { .kw-compare { grid-template-columns: 1fr; } }
.kw-compare__col { position: relative; padding: var(--s-6); border-radius: var(--r-lg); background: var(--c-surface); border: 1.5px solid var(--c-border); }
.kw-compare__col--pro { border-color: var(--c-primary); box-shadow: 0 4px 20px rgba(0,120,212,.10); }
[data-theme="dark"] .kw-compare__col { background: var(--c-surface-2); }
.kw-compare__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--c-primary); color: #fff; font-size: var(--fs-xs); font-weight: 700; padding: 3px 14px; border-radius: var(--r-pill); white-space: nowrap; }
.kw-compare__head { text-align: center; margin-bottom: var(--s-5); }
.kw-compare__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-primary-lt); color: var(--c-primary-text); margin-bottom: var(--s-3); }
.kw-compare__col--pro .kw-compare__icon { background: var(--c-primary); color: #fff; }
.kw-compare__title { margin: 0 0 var(--s-1); font-size: var(--fs-m); }
.kw-compare__sub { margin: 0; font-size: var(--fs-s); color: var(--c-text-2); }
.kw-compare__list { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.kw-compare__item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-base); }
.kw-compare__item .icon { flex-shrink: 0; width: 16px; height: 16px; }
.kw-compare__item--ok { color: var(--c-text); }
.kw-compare__item--ok .icon { color: var(--c-success-text); }
.kw-compare__item--no { color: var(--c-text-2); }
.kw-compare__item--no .icon { color: var(--c-danger-text); }
.kw-compare__cta { display: flex; flex-direction: column; gap: var(--s-3); margin-top: auto; }
.kw-compare__cta .btn-block { display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; }

/* ── Lernempfehlungs-Widget (v24.3) ─────────────────────────────────────── */
.lerntipps-behavior { margin-bottom: var(--s-6); }
.lerntipps-cat-title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-base); font-weight: 600; margin: 0 0 var(--s-3); color: var(--c-text); }
.lerntipps-cat-title .icon { width: 18px; height: 18px; color: var(--c-primary-text); flex-shrink: 0; }
.lerntipps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.lerntipps-list li { padding: var(--s-3) var(--s-4); background: var(--c-surface); border-radius: var(--r-md); font-size: var(--fs-s); border-left: 3px solid var(--c-primary); }
[data-theme="dark"] .lerntipps-list li { background: var(--c-surface-2); }
.lerntipps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-4); margin: var(--s-3) 0; }
.lerntipps-card { background: var(--c-surface); border-radius: var(--r-md); padding: var(--s-4); border: 1px solid var(--c-border); }
[data-theme="dark"] .lerntipps-card { background: var(--c-surface-2); }
.lerntipps-card__head { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-2); margin-bottom: var(--s-2); }
.lerntipps-card__head .icon { width: 16px; height: 16px; color: var(--c-accent-text); }
.lerntipps-card__text { font-size: var(--fs-s); margin: 0; line-height: 1.5; color: var(--c-text); }
.lerntipps-more { margin: var(--s-3) 0 0; font-size: var(--fs-s); }
.lerntipps-hint { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-s); margin: var(--s-3) 0; }
.lerntipps-hint .icon { flex-shrink: 0; width: 16px; height: 16px; }
.lerntipps-disclaimer { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-5) 0 0; border-top: 1px solid var(--c-border); padding-top: var(--s-4); }
.lerntipps-disclaimer .icon { flex-shrink: 0; width: 14px; height: 14px; }
.admin-lerntipps-preview { margin-top: var(--s-6); }
/* ── Lerntipps: KI-Block (v24.5) ──────────────────────────────────────────── */
.lerntipps-ai { margin: var(--s-5) 0 var(--s-2); }
.lerntipps-ai__quote { margin: var(--s-3) 0 var(--s-2); padding: var(--s-4) var(--s-5); background: var(--c-surface); border-left: 3px solid var(--c-accent-text); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-base); line-height: 1.6; color: var(--c-text); font-style: normal; }
[data-theme="dark"] .lerntipps-ai__quote { background: var(--c-surface-2); }
.lerntipps-ai__meta { display: flex; align-items: center; gap: var(--s-2); margin: 0; }
.lerntipps-ai__meta .icon { flex-shrink: 0; width: 14px; height: 14px; }

/* v25.7: Lern-Erinnerungen im Profil */
.reminder-toggle { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 500; }
.reminder-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary, #2563eb); }

/* ==========================================================================
   v25.9: Kompaktere Darstellung (Dichte wie in Analyse-Dashboards)
   ========================================================================== */
.card__head { margin-bottom: var(--s-3); }

/* Admin: kleinere Abstände, Schrift und Felder (nur Seiten unter /admin, Klasse aus header.php) */
.is-admin .site-main h1, .is-admin .zfu-font-font-6c652f { font-size: var(--fs-xl); margin-bottom: .4rem; }
.is-admin .site-main h2, .is-admin .zfu-font-font-2e0b81 { font-size: var(--fs-m); margin: 1rem 0 .5rem; }
.is-admin .admin-nav { margin-bottom: 1rem; gap: .35rem; }
.is-admin .admin-section, .is-admin .zfu-background-border-33fea6, .is-admin .admin-seo-section { padding: 1rem; margin-bottom: 1rem; }
.is-admin .admin-table th, .is-admin .admin-table td { padding: .5rem .75rem; }
.is-admin .admin-table-wrap { margin-bottom: 1rem; }
.is-admin input[type="text"], .is-admin input[type="url"], .is-admin input[type="email"], .is-admin input[type="search"],
.is-admin input[type="password"], .is-admin input[type="number"], .is-admin select, .is-admin textarea,
.is-admin .zfu-padding-border-d13a06, .is-admin .zfu-width-padding-545d50 { font-size: var(--fs-base); padding: .4rem .6rem; }
.is-admin .admin-field-hint { font-size: var(--fs-xs); }

/* Admin: kompaktes Inline-Formular (Anbieter: Name, Slug, Beschreibung + Button in einer Zeile) */
.admin-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.admin-inline-form input[type="text"] { padding: .4rem .6rem; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-base); min-width: 0; }
.admin-inline-form__name { flex: 0 1 200px; max-width: 200px; }
.admin-inline-form__slug { flex: 0 1 130px; max-width: 130px; }
.admin-inline-form__desc { flex: 1 1 12rem; }
.admin-inline-form .btn { flex-shrink: 0; }
.admin-table--compact th, .admin-table--compact td,
.is-admin .admin-table--compact th, .is-admin .admin-table--compact td { padding: .35rem .6rem; vertical-align: middle; }
.admin-table--compact .admin-inline-form { margin: 0; }

/* SEO/GEO: kompaktere Status-Karten, kleinere Pill-Tabs, engere Formulare */
.seo-hero { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); }
.seo-hero__score { padding: var(--s-2) var(--s-3); min-width: 7rem; }
.seo-hero__score-value { font-size: var(--fs-l); }
.seo-tabs { margin: var(--s-3) 0 var(--s-4); gap: 2px; padding: 3px; }
.seo-tab { padding: .3rem .65rem; font-size: var(--fs-s); }
.seo-tab .icon { width: 14px; height: 14px; }
.seo-status-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.seo-status-card { padding: var(--s-2) var(--s-3); gap: 2px; }
.seo-status-card__icon { width: 28px; height: 28px; }
.seo-status-card__icon .icon { width: 15px; height: 15px; }
.seo-status-card__value { font-size: var(--fs-m); }
.seo-status-card__hint { font-size: var(--fs-xs); }
.seo-panel-title { font-size: var(--fs-m); margin-bottom: var(--s-3); }
.seo-main-form .admin-seo-section { margin-bottom: var(--s-3); }
.seo-connect { padding: var(--s-3) var(--s-4); }
.seo-connect-grid { gap: var(--s-3); }

/* Design & Logo: kurze Texte, kompaktes Upload-Raster, Felder in einer Zeile */
.appearance-intro { margin: 0 0 var(--s-2); font-size: var(--fs-s); color: var(--c-text-2); }
.appearance-section-title { margin-top: var(--s-5); }
.appearance-grid--compact { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); margin-top: var(--s-2); }
.appearance-grid--compact .appearance-card { padding: var(--s-3); }
.appearance-grid--compact .appearance-card__title { font-size: var(--fs-base); }
.appearance-grid--compact .appearance-card__hint { font-size: var(--fs-xs); margin-bottom: var(--s-2); }
.appearance-grid--compact .appearance-preview { min-height: 80px; padding: var(--s-2); }
.appearance-grid--compact.admin-upload-section, .appearance-grid--compact .admin-upload-section { margin-top: 0; }
.admin-upload-form--inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.admin-upload-form--inline > label { flex-basis: 100%; margin: 0; font-size: var(--fs-xs); }
.admin-upload-form--inline .admin-upload-input { flex: 1 1 10rem; width: auto; padding: .3rem .5rem; font-size: var(--fs-s); }
.admin-upload-form--inline .appearance-actions { margin-top: 0; }
.design-section { margin-bottom: var(--s-4); }
.design-section-title { font-size: var(--fs-base); margin-bottom: var(--s-2); padding-bottom: .35rem; }
.design-fields--inline { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s-3); align-items: end; }
.design-fields--inline .design-field label { font-size: var(--fs-xs); margin-bottom: .25rem; line-height: 1.25; }
.design-fields--inline .design-field input[type=color] { height: 34px; }
.design-fields--inline .design-field input[type=number] { width: 70px; padding: .3rem .5rem; }
.design-preview { padding: var(--s-4); margin-top: var(--s-4); }
.design-values--2col { grid-template-columns: max-content 1fr max-content 1fr; gap: .3rem 1rem; font-size: var(--fs-s); }
@media (max-width: 640px) { .design-values--2col { grid-template-columns: max-content 1fr; } }

/* KI-Kurs: kompaktere Schritte */
.is-admin .ki-step { margin-bottom: var(--s-4); }
.is-admin .ki-gen { padding: var(--s-3); }

/* Lerntipps-Seite (öffentlich, nur angemeldet) */
.lt-page { max-width: 46rem; margin: var(--s-6) auto var(--s-8); }
.lt-page__eyebrow { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 var(--s-1); font-size: var(--fs-xs); font-weight: 600; color: var(--c-primary-text); }
.lt-page__eyebrow .icon { width: 15px; height: 15px; }
.lt-page__title { margin: 0 0 var(--s-4); font-size: var(--fs-xl); letter-spacing: -.02em; }
.lt-page__content p { margin: 0 0 var(--s-4); font-size: var(--fs-l); line-height: 1.65; color: var(--c-text); }
.lt-page__hint { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-primary-lt); border-left: 3px solid var(--c-primary); }
.lt-page__hint p { margin: 0; }
.lt-page__hint .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--c-primary-text); }
.lt-page__hint-link { font-weight: 600; margin-left: .25rem; }
.lt-page__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.lt-page__more-label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-2); }
.lt-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border: 1px solid var(--c-border); border-radius: var(--r-pill, 999px); font-size: var(--fs-xs); color: var(--c-text); text-decoration: none; background: var(--c-surface); }
.lt-pill:hover, .lt-pill:focus-visible { border-color: var(--c-primary); color: var(--c-primary-text); }
.lt-pill .icon { width: 13px; height: 13px; }
.lt-page__note { margin-top: var(--s-5); font-size: var(--fs-xs); color: var(--c-text-3); }

/* Admin → Lerntipps */
.admin-lt-title { margin: 0 0 .35rem; }
.admin-lt-desc { margin: 0 0 .75rem; font-size: var(--fs-s); color: var(--c-text-2); }
.admin-lt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.admin-lt-field { display: flex; flex-direction: column; gap: .25rem; }
.admin-lt-field label { font-size: var(--fs-s); font-weight: 600; }
/* v26.13.6: Kopfzeile pro Altersgruppe mit KI-Vorschlag-Button */
.admin-lt-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.admin-lt-head .lt-ki-btn { padding: .2rem .55rem; font-size: var(--fs-xs); }
.admin-lt-field textarea, .admin-lt-field input { width: 100%; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: var(--fs-s); padding: .4rem .6rem; resize: vertical; }


/* v26.0: SEO/GEO-Portal kompakt (seo-portal--compact) – dichteres Kachel-Grid, einzeilige Tabs, weniger Scrollen */
.seo-portal--compact .seo-hero { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); gap: var(--s-3); }
.seo-portal--compact .seo-hero h1 { font-size: var(--fs-l); }
.seo-portal--compact .seo-hero .admin-field-hint { font-size: var(--fs-xs); }
.seo-portal--compact .seo-hero__score { flex-direction: row; align-items: baseline; gap: var(--s-2); min-width: 0; padding: var(--s-2) var(--s-3); }
.seo-portal--compact .seo-hero__score-value { font-size: var(--fs-l); }
.seo-portal--compact .seo-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; margin: var(--s-2) 0 var(--s-3); gap: 2px; }
.seo-portal--compact .seo-tab { flex: 0 0 auto; white-space: nowrap; padding: .35rem .6rem; font-size: var(--fs-s); }
.seo-portal--compact .seo-tab .icon { width: 14px; height: 14px; }
.seo-portal--compact .seo-tab-content { margin-bottom: var(--s-4); }
.seo-portal--compact .seo-panel-title { font-size: var(--fs-m); margin-bottom: var(--s-2); }
.seo-portal--compact .seo-panel-title .icon { width: 17px; height: 17px; }
.seo-portal--compact .seo-status-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: var(--s-2); margin-bottom: var(--s-3); }
.seo-portal--compact .seo-status-card { padding: var(--s-2) var(--s-3); gap: 0; border-left-width: 3px; }
.seo-portal--compact .seo-status-card__head { margin-bottom: 2px; }
.seo-portal--compact .seo-status-card__icon { width: 26px; height: 26px; }
.seo-portal--compact .seo-status-card__icon .icon { width: 14px; height: 14px; }
.seo-portal--compact .seo-status-card__badge { font-size: var(--fs-xs); padding: 1px 7px; }
.seo-portal--compact .seo-status-card__title { font-size: var(--fs-xs); }
.seo-portal--compact .seo-status-card__value { font-size: var(--fs-base); }
.seo-portal--compact .seo-status-card__hint { font-size: var(--fs-xs); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seo-portal--compact .admin-seo-section, .seo-portal--compact .seo-connect { padding: var(--s-3) var(--s-4); }
.seo-portal--compact .seo-main-form .admin-seo-section { margin-bottom: var(--s-3); }
.seo-portal--compact .admin-seo-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-2) var(--s-3); }
.seo-portal--compact .admin-seo-grid--spaced { margin-top: var(--s-3); }
.seo-portal--compact .admin-field-hint { margin: 2px 0 0; line-height: 1.35; }
.seo-portal--compact .seo-quick h3, .seo-portal--compact .seo-connect h3 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
.seo-portal--compact .seo-quick__actions { gap: var(--s-2); }
.seo-portal--compact .seo-quick__links { margin-top: var(--s-2); }
.seo-portal--compact .seo-connect-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-3); }
.seo-portal--compact .seo-connect { border-top-width: 3px; }
.seo-portal--compact .seo-connect label { margin-top: var(--s-2); }
.seo-steps-wrap { margin: 0 0 var(--s-1); font-size: var(--fs-s); }
.seo-steps-wrap > summary { cursor: pointer; color: var(--c-primary-text); font-weight: 500; }
.seo-steps-wrap[open] > summary { margin-bottom: var(--s-1); }
.seo-portal--compact .seo-steps { font-size: var(--fs-s); line-height: 1.45; }
.seo-desc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.seo-portal--compact .seo-label-row { margin-top: var(--s-2); }
.seo-portal--compact .seo-preview { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); }
.seo-portal--compact .seo-preview__title { font-size: var(--fs-base); }
.seo-portal--compact .seo-preview__desc { font-size: var(--fs-xs); line-height: 1.4; }
.seo-portal--compact .seo-switch { margin-top: var(--s-2); }
.seo-portal--compact .seo-crawler-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-bottom: var(--s-3); }
.seo-portal--compact .seo-crawler { padding: var(--s-2) var(--s-3); }
.seo-portal--compact .seo-crawler__desc { font-size: var(--fs-xs); }
.seo-portal--compact .seo-course { padding: var(--s-3) var(--s-4); margin-bottom: var(--s-2); }
.seo-portal--compact .seo-course__grid { gap: var(--s-3); }
.seo-portal--compact .seo-accordion, .seo-portal--compact .seo-problem { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); }
.seo-portal--compact .seo-save-bar { padding: var(--s-2) 0; }
.seo-portal--compact .admin-seo-grid label, .seo-portal--compact .seo-connect label, .seo-portal--compact .seo-label-row label, .seo-portal--compact .admin-seo-section > label { font-size: var(--fs-s); }
.seo-portal--compact .admin-seo-section legend { font-size: var(--fs-base); margin-bottom: var(--s-1); }
@media (max-width: 860px) {
    .seo-desc-row { grid-template-columns: 1fr; }
    .seo-portal--compact .seo-crawler-list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .seo-portal--compact .seo-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}



/* === Benutzerverwaltung (v26.7) ===================================== */
/* Kompakte Inline-Rollenform */
.role-inline-form { display:inline-flex; align-items:center; gap:.25rem; margin:0; }
/* Kleines Dropdown für Rollenwahl */
.role-select { font-size:var(--fs-xs); padding:.15rem .3rem; border:1px solid var(--c-border,#e2e8f0); border-radius:var(--r-sm,6px); background:var(--c-bg,#fff); color:var(--c-text,#1e293b); max-width:110px; }
/* Extra-kleiner Button */
.btn-xs { font-size:var(--fs-base); padding:.15rem .45rem; line-height:1.4; }
/* Sortierpfeil-Link im Spaltenkopf */
.sort-link { color:inherit; text-decoration:none; white-space:nowrap; }
.sort-link:hover { text-decoration:underline; }
/* E-Mail-Zelle: kürzen, Tooltip via title */
.users-tbl .cell-email { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Anzeigenamen-Zelle */
.users-tbl .cell-name { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Datum-Spalten: kein Umbruch */
.nowrap, .users-tbl .col-date { white-space:nowrap; }
/* Kleine Hinweistexte */
.text-muted-xs { font-size:var(--fs-xs); color:var(--c-muted,#64748b); }
/* Gesamtseite: volle Breite wie dash-page, keine Maximalbreite-Einschränkung */
.users-admin-page { padding:0 var(--s-5); }
/* Kompakte Tabelle: kleinere Schrift */
.users-admin-page .admin-table { font-size:var(--fs-xs); }
/* Spaltenbreiten in der Benutzertabelle */
.users-tbl .col-status { width:80px; }
.users-tbl .col-role   { width:155px; }
.users-tbl .col-actions { width:160px; white-space:nowrap; }
/* Aktionen nebeneinander, kein Umbruch */
.users-tbl .admin-actions { flex-wrap:nowrap; }

/* ── v26.9: Gruppenrechte – Berechtigungsmatrix ─────────────────────────── */
.perm-matrix-wrap { overflow-x:auto; margin:var(--s-4,1rem) 0; }
.perm-matrix { max-width:640px; }
.perm-matrix th[scope="row"] { font-weight:500; background:none; }
.perm-matrix th[scope="row"] label { cursor:pointer; display:block; }
.perm-matrix__col { width:110px; text-align:center !important; vertical-align:middle !important; }
.perm-matrix tbody tr:hover { background:var(--c-surface-2,#f8fafc); }
.perm-matrix__fixed { color:var(--c-success,#16a34a); font-weight:700; cursor:default; }
.perm-matrix__check { width:1.15rem; height:1.15rem; cursor:pointer; accent-color:var(--c-primary,#2563eb); }
.perm-matrix__actions { margin-top:var(--s-3,.75rem); }

/* v26.9: 4-Rollen-System – Superadmin-Badge und erweiterte Berechtigungsmatrix */
.admin-badge--superadmin { background:#fef3c7; color:#92400e; }
.admin-nav__role-badge--superadmin { background:#d97706 !important; color:#fff !important; }
.perm-col-feature { min-width:160px; }
.perm-col-feature small.text-muted { display:block; font-size:.8em; font-weight:400; color:var(--c-text-muted,#64748b); }
.perm-col-role { width:96px; text-align:center !important; vertical-align:middle !important; }
.perm-check { display:inline-block; font-weight:700; font-size:var(--fs-base); }
.perm-check--yes { color:var(--c-success,#16a34a); }
.perm-check--no { color:var(--c-text-muted,#94a3b8); }
.perm-matrix__section-row th { background:var(--c-surface-2,#f1f5f9); font-size:var(--fs-xs); font-weight:600; color:var(--c-text-muted,#64748b); padding:.4rem .75rem; }
.perm-matrix__fixed-row th { font-weight:400; }

/* v26.10: Rollenrechte – editierbare Spalten hervorheben, Superadmin-Akzent */
.perm-role-header { font-size:var(--fs-xs); font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.perm-col-role--edit { background:color-mix(in srgb, var(--c-primary,#2563eb) 6%, transparent); }
.perm-check--superadmin { color:#b45309; }



/* === v26.12: Admin-Layout – einheitliche Breite & konsistente Schriftgrössen ============ */
/* Breite: enge max-width-Wrapper im Admin aufheben → volle Breite wie KI-Import           */
body.admin-sidebar-layout .zfu-max-margin-9e067b { max-width: none; margin-inline: 0; }
body.admin-sidebar-layout .dash-page { max-width: none; }
/* Nackte h1 (ohne Klasse) auf Admin-Standard bringen (1.4rem wie .zfu-font-font-6c652f)  */
.is-admin main h1:not([class]) { font-size: var(--fs-xl); font-weight: 700; margin-bottom: .4rem; }
/* Nackte h2 + Sonder-Klassen ohne eigene Schriftgrösse einheitlich auf h2-Standard       */
.is-admin main h2:not([class]),
.is-admin .admin-lt-title,
.is-admin .appearance-section-title { font-size: var(--fs-m); font-weight: 600; margin: .75rem 0 .4rem; }

/* v26.13.1: KI-Verbrauch-Dashboard (/admin/ki-verbrauch) */
.ki-usage-summary { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:.75rem; margin:1rem 0; }
.ki-usage-stat { display:flex; flex-direction:column; gap:.25rem; padding:.75rem 1rem; border:1px solid var(--c-border,#e2e8f0); border-radius:10px; background:var(--c-surface,#fff); }
.ki-usage-stat__label { font-size:var(--fs-xs); color:var(--c-text-2,#64748b); }
.ki-usage-stat__value { font-size:var(--fs-l); font-weight:600; font-variant-numeric:tabular-nums; }
.ki-usage-tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.ki-usage-tbl tr.ki-usage--gelb td:first-child { box-shadow:inset 3px 0 0 var(--c-warning-text,#b45309); }
.ki-usage-tbl tr.ki-usage--rot td:first-child { box-shadow:inset 3px 0 0 var(--c-danger-text,#b91c1c); }
.ki-usage-tbl tr.ki-usage--gruen td:first-child { box-shadow:inset 3px 0 0 var(--c-success-text,#15803d); }
.ki-usage-note { font-size:var(--fs-xs); color:var(--c-text-2,#64748b); margin:.75rem 0; }
.ki-usage-note .icon { width:14px; height:14px; vertical-align:-2px; }

/* v26.13.3: KI-Vorschlag für Ankündigungen */
.ann-ki { margin: 0 0 1rem; }
.ann-ki__label { font-size: var(--fs-s); font-weight: 600; margin: 0; }
.ann-ki__thema { flex: 1 1 16rem; padding: .4rem .6rem; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-s); min-width: 0; }
.ann-ki__woerter { flex: 0 0 auto; padding: .4rem .5rem; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-s); }
.ann-ki__status { font-size: var(--fs-xs); color: var(--c-text-2, #64748b); }

/* v26.13.4: KI-Qualität (Karten-Qualitätsprüfung) */
.kq-intro { font-size:var(--fs-s); color:var(--c-text-2,#64748b); margin:.5rem 0 1rem; }
.kq-form { display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end; margin:0 0 .75rem; }
.kq-field { display:flex; flex-direction:column; gap:.25rem; font-size:var(--fs-xs); flex:1 1 320px; min-width:0; }
.kq-field--small { flex:0 1 180px; }
.kq-field select { font-size:var(--fs-s); padding:.4rem .5rem; width:100%; }
.kq-loading { display:flex; align-items:center; gap:.5rem; font-size:var(--fs-s); color:var(--c-text-2,#64748b); margin:.5rem 0; }
.kq-loading[hidden] { display:none; }
.kq-spinner { width:16px; height:16px; border:2px solid var(--c-border,#e2e8f0); border-top-color:var(--c-primary,#2563eb); border-radius:50%; animation:kq-spin .8s linear infinite; }
@keyframes kq-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kq-spinner { animation:none; } }
.kq-error { font-size:var(--fs-s); color:var(--c-danger-text,#b91c1c); background:var(--c-danger-lt,#fef2f2); padding:.5rem .75rem; border-radius:8px; margin:.5rem 0; }
.kq-error .icon { width:14px; height:14px; vertical-align:-2px; }
.kq-tbl td { vertical-align:top; font-size:var(--fs-xs); }
.kq-tbl tr.kq-row--problem td { background:var(--c-warning-lt,#fef9c3); }
.kq-tbl tr.kq-row--problem td:first-child { box-shadow:inset 3px 0 0 var(--c-warning-text,#a16207); }

/* v26.13.5: SEO-Batch (AJAX-Fortschritt) */
.seo-batch { display:flex; flex-direction:column; gap:.5rem; margin-bottom:var(--s-4,1rem); }
.seo-batch[hidden], .seo-batch__bar[hidden] { display:none; }
.seo-batch__info { margin:0; font-size:var(--fs-s); }
.seo-batch .btn { align-self:flex-start; }
.seo-batch__bar .progress__fill { width:0; }
.seo-batch__status { margin:0; min-height:1.2em; }

/* v26.13.7: KI-Beschreibung-Button in der Anbieter-Tabelle */
.anb-ki-btn { padding: .15rem .5rem; font-size: var(--fs-xs); margin-left: .35rem; white-space: nowrap; }
.anb-ki-btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* v26.13.9: Fragen-Validator in der KI-Import-Vorschau */
.ki-validation { margin: 1rem 0; }
.ki-validation__title { font-size: var(--fs-base); font-weight: 600; margin: 0 0 .4rem; display: flex; align-items: center; gap: .4rem; }
.ki-validation__note { margin: .5rem 0; font-size: var(--fs-s); }
.ki-validation-table td:first-child { width: 3.5rem; white-space: nowrap; }
.ki-validation-table td { font-size: var(--fs-s); vertical-align: top; }

/* v26.14: KI-Korrektur-Panel in KI-Qualität */
.kq-korr-btn { margin-top: .35rem; }
.btn-xs { padding: .2rem .55rem; font-size: var(--fs-base); }
.kq-korr-panel { margin-top: .5rem; padding: .6rem .75rem; background: var(--color-bg-alt, #f8fafc); border: 1px solid var(--color-border, #e2e8f0); border-radius: 6px; }
.kq-korr-label { display: block; font-size: var(--fs-xs); font-weight: 600; margin: .4rem 0 .15rem; }
.kq-korr-panel textarea { width: 100%; box-sizing: border-box; font-size: var(--fs-s); padding: .3rem .45rem; border: 1px solid var(--color-border, #e2e8f0); border-radius: 4px; resize: vertical; background: #fff; color: inherit; }
.kq-korr-actions { display: flex; gap: .4rem; margin-top: .5rem; }
.kq-korr-status { font-size: var(--fs-xs); margin: .3rem 0 0; }
.kq-korr-status--info    { color: #0369a1; }
.kq-korr-status--error   { color: #b91c1c; }
.kq-korr-status--success { color: #15803d; }

/* ── v26.14.1: KI-Verbrauch – editierbares Tageslimit ─────────────────── */
.ki-usage-limit-edit {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--surface-2, #f8f9fa);
    border: 1px solid var(--border-subtle, #dee2e6);
    border-radius: 0.5rem;
}
.ki-usage-limit-edit__title {
    font-size: var(--fs-base);
    font-weight: 600;
    margin: 0 0 .5rem;
}
.ki-usage-limit-edit__hint {
    font-size: var(--fs-s);
    color: var(--text-muted, #6c757d);
    margin: 0 0 .75rem;
}
.ki-usage-limit-edit__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.ki-usage-limit-edit__label {
    font-size: var(--fs-s);
    font-weight: 500;
    min-width: 100%;
}
.ki-usage-limit-edit__input {
    width: 8rem;
}
.ki-usage-limit-edit__status {
    margin: .5rem 0 0;
    font-size: var(--fs-s);
    min-height: 1.25rem;
}
.ki-usage-limit-edit__status--error { color: var(--color-danger, #dc3545); }
.kv-limit-override-badge { font-size: var(--fs-xs); vertical-align: middle; margin-left: .25rem; }
.chip--info { background: var(--color-info-bg, #cff4fc); color: var(--color-info, #055160); }

/* ═══ v26.18: Probekarte, Tagesziel, Lernkalender, Flip, Abschluss, Teilen ═══ */
/* Probekarte Startseite – v5D: Karten-Stapel */
.sample-card { max-width: 480px; margin: var(--s-5) auto 0; text-align: center; }
/* Stapel-Wrapper */
.sample-card__stack { position: relative; padding-bottom: 18px; }
/* Karte 2 und 3 – sichtbar unter der Vorderkarte, leicht geneigt */
.sample-card__stack::before,
.sample-card__stack::after {
  content: ''; position: absolute; left: 50%;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg, 16px); box-shadow: var(--c-shadow);
}
.sample-card__stack::after { top: 8px; bottom: 9px; width: calc(100% - 20px); transform: translateX(-50%) rotate(-1.2deg); z-index: 1; }
.sample-card__stack::before { top: 16px; bottom: 0; width: calc(100% - 40px); transform: translateX(-50%) rotate(1.2deg); z-index: 0; opacity: .8; }
.sample-card__stack .sample-card__card { position: relative; z-index: 2; }
/* Kurs-Label unterhalb des Stapels */
.sample-card__card { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary); border-radius: var(--r-lg, 16px); box-shadow: var(--c-shadow); padding: var(--s-6) var(--s-5); cursor: pointer; text-align: center; transition: box-shadow .2s, border-color .2s; }
.sample-card__card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.sample-card__card:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }
.sample-card__card.is-flipped { border-left-color: var(--c-accent); }
.sample-card__question { font-size: var(--fs-m); font-weight: 600; line-height: 1.5; color: var(--c-text); margin: 0; }
.sample-card__hint { font-size: var(--fs-xs); color: var(--c-text-2); margin: var(--s-3) 0 0; }
.sample-card__answer { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-border); }
.sample-card__answer p { margin: var(--s-1) 0 0; font-size: var(--fs-m); color: var(--c-text); }
.sample-card__answer-label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-accent); }
.sample-card__continue { display: none; position: absolute; right: var(--s-5); bottom: calc(18px + var(--s-3)); z-index: 3; font-size: var(--fs-xs); font-weight: 600; color: var(--c-primary-text); text-decoration: none; }
.sample-card__continue:hover, .sample-card__continue:focus-visible { text-decoration: underline; }
.sample-card__card[aria-expanded="true"] { padding-bottom: calc(var(--s-6) + var(--s-3)); }
.sample-card__card[aria-expanded="true"] + .sample-card__continue { display: inline; }

/* Flip-Animation (Lernmodus + Probekarte) */
@keyframes zf-flip { 0% { transform: rotateY(90deg); opacity: .4; } 100% { transform: rotateY(0); opacity: 1; } }
.flashcard.is-flipping, .sample-card__card.is-flipping { animation: zf-flip .45s var(--ease, ease-out); backface-visibility: hidden; transform-style: preserve-3d; }

/* Tagesziel + Lernkalender */
.dash-extra { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: var(--s-4); margin-bottom: var(--s-5); }
.daily-goal__body { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.daily-goal__ring .progress-ring__value { stroke: var(--c-primary); }
.daily-goal.is-goal-reached .daily-goal__ring .progress-ring__value { stroke: var(--c-success); }
.daily-goal__info { flex: 1 1 160px; min-width: 0; }
.daily-goal__count { margin: 0 0 var(--s-2); font-size: var(--fs-base); }
.daily-goal__done { margin: 0 0 var(--s-2); color: var(--c-success-text); font-weight: 600; font-size: var(--fs-s); display: flex; align-items: center; gap: 4px; }
.daily-goal__form label { display: block; font-size: var(--fs-xs); color: var(--c-text-2); margin-bottom: 4px; }
.daily-goal__row { display: flex; gap: var(--s-2); align-items: center; }
.daily-goal__row input { width: 90px; }
.daily-goal__status { min-height: 1.2em; margin: 4px 0 0; color: var(--c-success-text); }
.daily-goal__status.is-error { color: var(--c-danger, #DC2626); }
@keyframes zf-goal-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.daily-goal.is-celebrating .daily-goal__ring { animation: zf-goal-pop .6s var(--ease, ease-out) 2; }

.heatmap-scroll { overflow-x: auto; padding-bottom: var(--s-2); -webkit-overflow-scrolling: touch; }
.heatmap-scroll:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.heatmap { display: inline-flex; flex-direction: column; gap: 4px; min-width: max-content; }
.heatmap__months { display: grid; grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; margin-left: 26px; font-size: var(--fs-xs); color: var(--c-text-2); height: 14px; white-space: nowrap; }
.heatmap__months span { overflow: visible; }
.heatmap__body { display: flex; gap: 4px; }
.heatmap__weekdays { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; width: 22px; font-size: var(--fs-xs); color: var(--c-text-2); line-height: 12px; }
.heatmap__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 12px; gap: 3px; }
.heatmap__week { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; }
.hm-cell { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c-track); }
.hm-cell.is-empty { background: transparent; }
.hm-cell.lvl-0 { background: var(--c-track); }
.hm-cell.lvl-1 { background: #BBF7D0; }
.hm-cell.lvl-2 { background: #4ADE80; }
.hm-cell.lvl-3 { background: #16A34A; }
.hm-cell.lvl-4 { background: #166534; }
[data-theme="dark"] .hm-cell.lvl-1 { background: #0E4429; }
[data-theme="dark"] .hm-cell.lvl-2 { background: #006D32; }
[data-theme="dark"] .hm-cell.lvl-3 { background: #26A641; }
[data-theme="dark"] .hm-cell.lvl-4 { background: #39D353; }
.heatmap__legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: var(--fs-xs); color: var(--c-text-2); margin-top: var(--s-2); }
.heatmap__legend span:first-child { margin-right: 4px; }
.heatmap__legend span:last-child { margin-left: 4px; }

/* Abschluss-Bildschirm Lernmodus */
.session-done__summary { display: flex; justify-content: center; gap: var(--s-5); flex-wrap: wrap; margin: 0 0 var(--s-4); }
.session-done__kpi { display: flex; flex-direction: column; align-items: center; min-width: 110px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md, 12px); background: var(--c-surface-2); }
.session-done__kpi-value { font-size: var(--fs-xl); font-weight: 800; color: var(--c-text); line-height: 1.1; }
.session-done__kpi-label { font-size: var(--fs-s); color: var(--c-text-2); }
.session-done__streak { font-weight: 600; color: var(--c-text-2); margin: 0 0 var(--s-5); }
.session-done__streak.is-plus { color: var(--c-warning-text, #B45309); }
@keyframes zf-done-in { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.session-done__icon { animation: zf-done-in .5s var(--ease, ease-out); }

/* Teilen */
.share-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: center; margin-top: var(--s-3); }
.share-row--compact { justify-content: flex-start; margin-top: var(--s-2); gap: 6px; }
.share-row__label { font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-2); display: inline-flex; align-items: center; gap: 3px; }
.share-page { display: flex; justify-content: center; padding: var(--s-8, 48px) var(--s-4); }
.share-page__card { max-width: 640px; width: 100%; text-align: center; background: var(--c-surface); border-radius: var(--r-xl, 20px); box-shadow: var(--c-shadow); padding: var(--s-8, 48px) var(--s-6); border-top: 6px solid var(--c-primary); }
.share-page__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--c-accent); margin-bottom: var(--s-3); }
.share-page__title { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.share-page__sub { font-size: var(--fs-m); font-weight: 600; color: var(--c-text); }
.share-page__lead { color: var(--c-text-2); margin: var(--s-4) 0; }
.share-page__actions { display: flex; justify-content: center; gap: var(--s-3); }

@media (max-width: 900px) { .dash-extra { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
    .flashcard.is-flipping, .sample-card__card.is-flipping, .daily-goal.is-celebrating .daily-goal__ring, .session-done__icon { animation: none; }
}
@media print { .share-row { display: none !important; } }

/* Gruppe 1: Avatar-Auswahl, Lernfarbe, Konto löschen */
.avatar--emoji { background: var(--c-surface); font-size: var(--fs-l); line-height: 1; }
.pref-picker { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: .5rem 0 0; }
.avatar-option, .color-option { position: relative; cursor: pointer; }
.avatar-option__emoji { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; font-size: var(--fs-l); border-radius: 50%; border: 2px solid var(--c-border); background: var(--c-surface); transition: transform .12s ease, border-color .12s ease; }
.avatar-option:hover .avatar-option__emoji { transform: scale(1.06); }
.avatar-option input:checked + .avatar-option__emoji { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-accent-lt); }
.avatar-option input:focus-visible + .avatar-option__emoji,
.color-option input:focus-visible + .color-swatch { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.color-swatch { display: block; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 3px solid var(--c-surface); box-shadow: 0 0 0 1px var(--c-border); }
.color-option input:checked + .color-swatch { box-shadow: 0 0 0 3px var(--c-text); }
.color-swatch--6366f1 { background: #6366f1; }
.color-swatch--0ea5e9 { background: #0ea5e9; }
.color-swatch--10b981 { background: #10b981; }
.color-swatch--f59e0b { background: #f59e0b; }
.color-swatch--ef4444 { background: #ef4444; }
.color-swatch--8b5cf6 { background: #8b5cf6; }
.color-swatch--ec4899 { background: #ec4899; }
.color-swatch--64748b { background: #64748b; }
.pref-status { min-height: 1.2rem; margin: .4rem 0 0; font-size: var(--fs-xs); color: var(--c-success-text); }
.pref-status--error { color: var(--c-danger-text); }
.account-delete-link { margin: 1.5rem 0 0; font-size: var(--fs-xs); }
.link-subtle { color: var(--c-text-2, #64748b); text-decoration: underline; }
.account-delete { margin-top: 2rem; font-size: var(--fs-s); }
.account-delete__toggle { display: inline-block; cursor: pointer; color: var(--c-text-2, #64748b); text-decoration: underline; list-style: none; }
.account-delete__toggle::-webkit-details-marker { display: none; }
.account-delete__panel { margin-top: .75rem; padding: .75rem 1rem; max-width: 28rem; border: 1px solid var(--c-border); border-radius: var(--r-sm, 6px); }
.account-delete__warning { margin: 0 0 .6rem; color: var(--c-danger-text); font-weight: 600; }
.account-delete__warning--small { font-size: var(--fs-xs); margin-top: .6rem; }
.account-delete__error { margin: 0 0 .6rem; color: var(--c-danger-text); }
.account-delete__label { display: block; font-size: var(--fs-xs); margin-bottom: .25rem; }
.account-delete__input { width: 100%; max-width: 20rem; margin-bottom: .5rem; }
.account-delete__submit { background: var(--c-danger-lt); color: var(--c-danger-text); border: 1px solid currentColor; }
.account-delete__submit:disabled { opacity: .5; cursor: not-allowed; }
/* Gruppe 7 (UU): Lernverlauf zurücksetzen – gleiche dezente Darstellung wie Konto löschen */
.history-reset + .account-delete { margin-top: .75rem; }
.history-reset__keep { margin: 0 0 .6rem; font-size: var(--fs-xs); color: var(--c-text-2, #64748b); }

/* Gruppe 2: Wochenrückblick, Selbstvergleich, Beste Lernzeit */
.insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.insight-card { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.insight-card__title { margin: 0; font-size: var(--fs-s); font-weight: 600; opacity: .75; }
.insight-card__value { margin: 0; font-size: var(--fs-l); font-weight: 700; line-height: 1.2; }
.insight-card__unit { font-size: var(--fs-s); font-weight: 500; opacity: .75; }
.insight-card__text { margin: 0; font-size: var(--fs-s); line-height: 1.45; }
.insight-card__delta { font-weight: 600; }
.insight-card__delta--up { color: var(--c-success-text); }
.insight-card__delta--down { color: var(--c-danger-text); }
/* Gruppe 3 – Lernzeit-Schätzung, Selbsteinschätzung, eigene Eselsbrücke */
.learn-estimate { display:flex; align-items:center; gap:.4rem; margin:.25rem 0 0; font-size:var(--fs-s); color:var(--c-text-2); }
.fc-note { margin-top:1rem; padding:.75rem 1rem; background:var(--c-surface-2); border-left:4px solid var(--c-warning-text); border-radius:var(--r-md,8px); text-align:left; }
.fc-note[hidden], .fc-note__form[hidden], .fc-note__text[hidden], .fc-confidence[hidden], .fc-confidence__chosen[hidden] { display:none; }
.fc-note__head { display:flex; align-items:center; gap:.4rem; font-weight:600; margin:0 0 .4rem; }
.fc-note__text { white-space:pre-line; overflow-wrap:anywhere; line-height:1.55; margin:0; }
.fc-note__form { margin-top:.5rem; }
.fc-note__input { width:100%; min-height:4.5rem; padding:.5rem .625rem; font:inherit; color:inherit; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-sm,6px); resize:vertical; box-sizing:border-box; }
.fc-note__bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.5rem; }
.fc-note__hint { font-size:var(--fs-xs); color:var(--c-text-2); }
.fc-note__btns { display:flex; gap:.5rem; }
.fc-note__status { margin:.4rem 0 0; font-size:var(--fs-s); color:var(--c-success-text); }
.fc-note__status:empty { display:none; }
.fc-note__status.is-error { color:var(--c-danger-text); }
.fc-confidence { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin-top:1rem; }
.fc-confidence__label { font-size:var(--fs-s); color:var(--c-text-2); }
.fc-confidence__btns { display:flex; flex-wrap:wrap; gap:.4rem; }
.fc-confidence__btn { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .75rem; font:inherit; font-size:var(--fs-s); color:inherit; background:var(--c-surface); border:1px solid var(--c-border); border-radius:999px; cursor:pointer; }
.fc-confidence__btn:hover, .fc-confidence__btn:focus-visible { border-color:var(--c-primary,#0078d4); }
.fc-confidence__btn[aria-pressed="true"] { background:var(--c-primary,#0078d4); border-color:var(--c-primary,#0078d4); color:#fff; }
.fc-confidence__btn kbd { font-size:var(--fs-xs); opacity:.75; }
.fc-confidence__chosen { margin:1rem 0 0; font-size:var(--fs-s); color:var(--c-text-2); text-align:center; }
.session-done__confidence { margin:.75rem auto 0; max-width:32rem; text-align:center; }
.session-done__confidence p { margin:.25rem 0; }
.session-done__confidence-over { color:var(--c-danger-text); font-size:var(--fs-s); }

/* Gruppe 4 (LL): Wisch-Hinweis beim ersten Lernstart */
.swipe-hint { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); font-size: var(--fs-s); }
.swipe-hint[hidden] { display: none; }
.swipe-hint__text { flex: 1 1 14rem; margin: 0; }
.swipe-hint__demo { position: relative; flex: 0 0 auto; width: 4rem; height: 1.75rem; border-radius: 999px; background: var(--c-border); overflow: hidden; }
.swipe-hint__hand { position: absolute; top: 0; left: 50%; font-size: var(--fs-l); line-height: 1.75rem; transform: translateX(-50%); animation: zf-swipe-hint 2.4s ease-in-out infinite; }
@keyframes zf-swipe-hint {
    0%, 100% { transform: translateX(-50%); }
    25% { transform: translateX(-140%); }
    75% { transform: translateX(40%); }
}
@media (prefers-reduced-motion: reduce) {
    .swipe-hint__hand { animation: none; }
}

/* Gruppe 4 (II): Hinweis auf eine verwandte Karte nach «Nochmal» */
.fc-related { margin: .75rem 0 0; padding: .6rem .9rem; border-left: 3px solid var(--c-primary); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text-2); font-size: var(--fs-s); }
.fc-related[hidden] { display: none; }

/* Gruppe 5 (E): Meilenstein-Abzeichen */
.milestones-card{margin-top:1rem;padding:1rem 1.25rem}
.milestone-list{list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.milestone-badge{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.7rem .8rem;border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-text-2);opacity:.75}
.milestone-badge .icon{width:1.5rem;height:1.5rem}
.milestone-badge--earned{opacity:1;color:inherit;border-color:var(--c-primary)}
.milestone-badge--earned .icon{color:var(--c-primary)}
.milestone-badge__label{font-weight:600}
.milestone-badge__state{font-size:var(--fs-s);color:var(--c-text-2)}
.milestone-toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:1200;display:flex;align-items:center;gap:.6rem;max-width:min(92vw,420px);padding:.8rem 1.1rem;border-radius:var(--r-md);background:var(--c-surface);border:2px solid var(--c-primary);box-shadow:0 8px 24px rgba(0,0,0,.18);font-weight:600}
.milestone-toast .icon{width:1.4rem;height:1.4rem;color:var(--c-primary);flex:none}

/* Gruppe 5 (F): Karte des Tages */
.cod-card{margin-top:1rem;padding:1rem 1.25rem}
.cod-card__head{display:flex;align-items:center;gap:.5rem}
.cod-card__head .icon{color:var(--c-primary)}
.cod-card__question{font-size:var(--fs-m);font-weight:600;margin:.4rem 0 .2rem}
.cod-card__course{color:var(--c-text-2);font-size:var(--fs-s);margin:0 0 .7rem}
.cod-admin-current{padding:1rem 1.25rem;margin:1rem 0}
.cod-admin-form{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0}
.cod-admin-form label{font-weight:600;flex-basis:100%}
.cod-admin-form select{max-width:100%}

/* Gruppe 5 (FF): Kursbewertung */
.course-rating{display:flex;align-items:center;gap:.35rem;margin:.4rem 0 0;font-weight:600;color:var(--c-text-2)}
.course-rating__star,.rating-stars{color:#d49b00}
.rate-modal{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.45)}
.rate-modal__box{width:min(100%,440px);padding:1.4rem}
.rate-modal__title{font-size:var(--fs-m);margin:0 0 .4rem}
.rate-modal__text{color:var(--c-text-2);margin:0 0 .8rem}
.rate-stars{display:flex;gap:.3rem;margin-bottom:.8rem}
.rate-star{font-size:var(--fs-xl);line-height:1;background:none;border:0;padding:.1rem;cursor:pointer;color:var(--c-border)}
.rate-star.is-active{color:#d49b00}
.rate-star:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:4px}
.rate-modal__label{display:block;font-weight:600;margin-bottom:.3rem}
.rate-modal__comment{width:100%;resize:vertical}
.rate-modal__status{min-height:1.2em;margin:.4rem 0;color:var(--c-text-2)}
.rate-modal__actions{display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}

/* Gruppe 6 (N): Fortschrittsbereich im Profil */
.progress-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.6rem;margin:.5rem 0 1rem}
.progress-stats__item{padding:.6rem .8rem;border:1px solid var(--c-border);border-radius:var(--r-md);background:var(--c-surface)}
.progress-stats dt{font-size:var(--fs-xs);color:var(--c-text-2)}
.progress-stats dd{margin:.15rem 0 0;font-size:var(--fs-m);font-weight:700}
.progress-sub{font-size:var(--fs-base);font-weight:600;margin:1rem 0 .25rem}
.progress-next{font-size:var(--fs-s);color:var(--c-text-2);margin:0 0 .25rem}
.badge-progress{width:100%;height:.45rem;margin-top:.25rem;border:0;border-radius:999px;overflow:hidden;background:var(--c-border);appearance:none;-webkit-appearance:none}
.badge-progress::-webkit-progress-bar{background:var(--c-border);border-radius:999px}
.badge-progress::-webkit-progress-value{background:var(--c-primary);border-radius:999px}
.badge-progress::-moz-progress-bar{background:var(--c-primary);border-radius:999px}

/* Gruppe 6 (DD): Willkommen zurück */
.welcome-back{max-width:760px;margin:2rem auto;padding:0 1rem}
.welcome-back__head{text-align:center;margin-bottom:1.25rem}
.welcome-back__icon{width:2.5rem;height:2.5rem;color:var(--c-primary)}
.welcome-back__lead{color:var(--c-text-2)}
.welcome-back__card{padding:1.1rem 1.25rem;margin-bottom:1rem}
.welcome-back__card h2{font-size:var(--fs-m);margin:0 0 .5rem}
.welcome-back__badges .icon{width:1.1rem;height:1.1rem;color:var(--c-primary);vertical-align:-3px}
.welcome-back__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}

/* Gruppe 6 (KK): Hinweis zur App-Installation */
.pwa-hint{position:relative;display:flex;gap:.75rem;align-items:flex-start;padding:1rem 2.75rem 1rem 1.25rem;margin:1rem 0;border:1px solid var(--c-primary);border-radius:var(--r-md)}
.pwa-hint__title{font-size:var(--fs-base);margin:0 0 .3rem;display:flex;align-items:center;gap:.4rem}
.pwa-hint__title .icon{color:var(--c-primary)}
.pwa-hint p{margin:0 0 .4rem;font-size:var(--fs-s)}
.pwa-hint__step{color:var(--c-text-2)}
.pwa-hint__close{position:absolute;top:.5rem;right:.5rem;background:none;border:0;padding:.35rem;cursor:pointer;color:var(--c-text-2);border-radius:var(--r-md)}
.pwa-hint__close:hover,.pwa-hint__close:focus-visible{color:var(--c-text);background:var(--c-border)}

/* Abo-Stufen (Gruppenrechte) */
.admin-flash--info { background: var(--color-info-bg, #cff4fc); color: var(--color-info, #055160); }
.abo-table th, .abo-table td { white-space: nowrap; vertical-align: middle; }
.abo-table__input { width: 6.5rem; max-width: 100%; }



/* ==========================================================================
   v5A – Sidebar-Layout (Blau-Kurskacheln)
   Ergänzung: neue Tokens + Seitenleisten-Struktur. Bestehende Klassen bleiben.
   ========================================================================== */

/* ── v5A Tokens ─────────────────────────────────────────────────────────── */
:root {
    --sb-w:        240px;
    --tb-h:        56px;
    --v5-blue:     #2563EB;
    --v5-blue-lt:  #EFF6FF;
    --v5-blue-lt2: #DBEAFE;
    --v5-border:   #F0F0F0;
    --v5-card-bg:  #F9FAFB;
    --v5-next-bg:  #F8FAFF;
    --v5-orange:   #F97316;
    --v5-text:     #111827;
    --v5-muted:    #6B7280;
    --v5-ph:       #9CA3AF;
    --v5-active:   #F5F5F5;
    --v5-outer:    #EBEBEB;
    /* Schriftskala: 6 Stufen, alle font-size-Werte nutzen diese Variablen */
    --fs-xs:   12px;
    --fs-s:    13px;
    --fs-base: 14px;
    --fs-m:    16px;
    --fs-l:    20px;
    --fs-xl:   clamp(22px, 1.2rem + 1vw, 28px);
}
[data-theme="dark"] {
    --v5-border:  rgba(255,255,255,.08);
    --v5-card-bg: #1A1A24;
    --v5-next-bg: #1A2236;
    --v5-active:  #20202E;
    --v5-text:    #F9FAFB;
    --v5-muted:   #9CA3AF;
    --v5-outer:   #0E0E14;
}

/* ── Layout-Shell ───────────────────────────────────────────────────────── */
body.sidebar-layout {
    background: var(--v5-outer);
    min-height: 100vh;
    margin: 0;
    /* Kein Radialverlauf aus dem alten Body-Stil */
    background-image: none;
}

.layout-shell {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background: var(--c-surface);
}

@media (min-width: 1280px) {
    body.sidebar-layout { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
    .layout-shell {
        max-width: 1200px;
        width: 100%;
        min-height: calc(100vh - 3rem);
        border-radius: 1rem;
        box-shadow: 0 4px 32px rgba(0,0,0,.07);
        overflow: hidden;
    }
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
    width: var(--sb-w);
    flex-shrink: 0;
    background: var(--c-surface);
    border-right: 1px solid var(--v5-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;
    transition: transform .25s var(--ease), width .2s var(--ease);
    z-index: 50;
}
.sidebar::-webkit-scrollbar { display: none; }

/* Desktop einklappen */
html.sb-collapsed .sidebar { width: 60px; }
html.sb-collapsed .sidebar__section-label,
html.sb-collapsed .sidebar__link span,
html.sb-collapsed .sidebar__cta-link span,
html.sb-collapsed .sidebar__profile-info,
html.sb-collapsed .sidebar__brand-text { display: none; }
html.sb-collapsed .sidebar__cta-link { justify-content: center; }
html.sb-collapsed .sidebar__link { justify-content: center; }
html.sb-collapsed .sidebar__collapse { margin-left: auto; margin-right: auto; }

/* ── Sidebar Header ─────────────────────────────────────────────────────── */
.sidebar__header {
    height: var(--tb-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--v5-border);
    flex-shrink: 0;
    gap: .5rem;
}
.sidebar__brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}
.sidebar__brand-text {
    font-size: var(--fs-m);
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--v5-text);
}
.sidebar__brand-img { max-height: 24px; width: auto; object-fit: contain; }

.sidebar__collapse {
    font: inherit;
    font-size: var(--fs-s);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--v5-active);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: var(--v5-muted);
    flex-shrink: 0;
    transition: background .15s;
}
.sidebar__collapse:hover { background: var(--c-border); }
.sidebar__collapse .icon { width: 14px; height: 14px; }

/* ── Sidebar CTA ────────────────────────────────────────────────────────── */
.sidebar__cta { padding: 1rem 1rem 0; }
.sidebar__cta-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    background: var(--v5-blue-lt);
    color: var(--v5-blue);
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: var(--fs-base);
    font-weight: 600;
    text-decoration: none;
    transition: background .15s;
}
.sidebar__cta-link:hover { background: var(--v5-blue-lt2); color: var(--v5-blue); }
.sidebar__cta-link .icon { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar__cta-link--sm { margin-top: .375rem; }

/* ── Sidebar Sections ───────────────────────────────────────────────────── */
.sidebar__section { padding: 1.25rem 1rem 0; }
.sidebar__section-label {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--v5-ph);
    padding: 0 .75rem;
    margin: 0 0 .375rem;
}
.sidebar__section-label--sub { margin-top: .625rem; font-size: var(--fs-xs); }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    color: var(--v5-muted);
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.sidebar__link:hover { background: var(--v5-card-bg); color: var(--v5-text); }
.sidebar__link.is-active { background: var(--v5-active); color: var(--v5-text); }
.sidebar__link.is-active .icon { color: var(--v5-blue); }
.sidebar__link .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Sidebar Footer ─────────────────────────────────────────────────────── */
.sidebar__footer {
    margin-top: auto;
    border-top: 1px solid var(--v5-border);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar__profile {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .75rem 0;
    margin-top: .25rem;
    border-top: 1px solid var(--v5-border);
}
.sidebar__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--v5-blue-lt2);
    display: grid;
    place-items: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--v5-blue);
    flex-shrink: 0;
}
.sidebar__profile-info { flex: 1; min-width: 0; }
.sidebar__profile-name {
    font-weight: 600;
    color: var(--v5-text);
    font-size: var(--fs-s);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 1.3;
}
.sidebar__profile-sub { font-size: var(--fs-xs); color: var(--v5-blue); margin: 0; }

/* ── Main Content ───────────────────────────────────────────────────────── */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar {
    height: var(--tb-h);
    border-bottom: 1px solid var(--v5-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
    flex-shrink: 0;
    background: var(--c-surface);
    gap: 1rem;
}
.topbar__breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-s);
    color: var(--v5-muted);
    flex: 1 1 auto;
    min-width: 0;
}
.topbar__breadcrumb a { color: var(--v5-muted); text-decoration: none; }
.topbar__breadcrumb a:hover { color: var(--v5-text); }
.topbar__breadcrumb .icon { width: 11px; height: 11px; flex-shrink: 0; }
.topbar__breadcrumb > :not(.topbar__current) { flex-shrink: 0; }
.topbar__current { font-weight: 500; color: var(--v5-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__actions {
    display: flex;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
}
.topbar__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--c-border);
    border-radius: .5rem;
    height: 32px;
    padding: 0 .75rem;
    background: var(--c-surface);
    cursor: text;
    transition: border-color .15s;
    width: 11rem;
}
.topbar__search:focus-within { border-color: var(--v5-blue-lt2); }
.topbar__search .icon { width: 12px; height: 12px; flex-shrink: 0; color: var(--v5-ph); }
.topbar__search input {
    border: none;
    background: none;
    outline: none;
    font-size: var(--fs-s);
    color: var(--v5-text);
    width: 100%;
    font-family: var(--font);
}
.topbar__search input::placeholder { color: var(--v5-ph); }
.topbar__icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--v5-active);
    display: grid;
    place-items: center;
    color: var(--v5-muted);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}
.topbar__icon-btn:hover { background: var(--c-border); }
.topbar__icon-btn .icon { width: 12px; height: 12px; }
.topbar .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--v5-blue-lt2);
    display: grid;
    place-items: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--v5-blue);
    text-decoration: none;
    flex-shrink: 0;
}
/* Mobile-only Hamburger-Button im Topbar */
.topbar__mobile-open {
    display: none;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--v5-muted);
    border-radius: 6px;
    place-items: center;
    flex-shrink: 0;
    transition: background .15s;
}
.topbar__mobile-open .icon { width: 18px; height: 18px; }
.topbar__mobile-open:hover { background: var(--v5-active); }

/* ── Page Body ──────────────────────────────────────────────────────────── */
.page-body {
    flex: 1;
    overflow-y: auto;
}
/* Container-Padding im Sidebar-Layout anpassen */
body.sidebar-layout .page-body > .container {
    max-width: none;
    padding: 1.75rem 2rem;
}
/* site-main Padding entfällt, .page-body übernimmt */
body.sidebar-layout .site-main { padding: 0; min-height: 0; }

/* ── Backdrop (mobil) ───────────────────────────────────────────────────── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 49;
}
body.sb-open .sidebar-backdrop { display: block; }

/* ── Site-Footer im Sidebar-Layout ─────────────────────────────────────── */
body.sidebar-layout .site-footer {
    margin-top: 0;
    border-top: 1px solid var(--v5-border);
    box-shadow: none;
}

/* ── Dunkel-Hell-Umschaltung: Sidebar-Tokens ────────────────────────────── */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar { background: var(--c-surface); }
[data-theme="dark"] .sidebar__brand-text { color: var(--c-text); }
[data-theme="dark"] .topbar__current { color: var(--c-text); }
[data-theme="dark"] .sidebar__link.is-active { background: var(--c-surface-2); color: var(--c-text); }
[data-theme="dark"] .sidebar__cta-link { background: rgba(37,99,235,.18); color: #60A5FA; }
[data-theme="dark"] .sidebar__cta-link:hover { background: rgba(37,99,235,.28); color: #93C5FD; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    body.sidebar-layout { padding: 0; }
    .layout-shell { border-radius: 0; min-height: 100vh; }
    .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        height: 100%;
        box-shadow: 2px 0 20px rgba(0,0,0,.1);
    }
    body.sb-open .sidebar { transform: translateX(0); }
    .topbar { padding: 0 1rem; }
    .topbar__mobile-open { display: grid; }
    .topbar__search { display: none; }
    body.sidebar-layout .page-body > .container { padding: 1rem; }
}
@media (min-width: 768px) {
    .topbar__mobile-open { display: none; }
}

/* ── Druck: Sidebar ausblenden ──────────────────────────────────────────── */
@media print {
    .sidebar, .topbar, .sidebar-backdrop { display: none !important; }
    .layout-shell { display: block; }
    .main-content { overflow: visible; }
    .page-body { overflow: visible; }
}

/* ── v5A Startseite: kompakte Kurskacheln (mind. 8 sichtbar, 4 Spalten Desktop) ── */
.home-hero { padding: var(--s-5) 0 var(--s-2); text-align: center; }
.home-hero__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--s-2); color: var(--v5-text); }
.home-hero__text { max-width: none; margin: 0 auto; font-size: var(--fs-s); color: var(--v5-muted); text-wrap: balance; }
@media (min-width: 640px) { .home-hero__text { font-size: var(--fs-base); white-space: nowrap; } }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-4) 0 var(--s-3); }
.section-head__title { font-size: var(--fs-m); font-weight: 700; margin: 0; color: var(--v5-text); }
.section-head__tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.input-sm { min-height: 34px; padding: 0 10px; font-size: var(--fs-base); border: 1px solid var(--v5-border); border-radius: 8px; background: var(--c-surface); color: inherit; }
#search-courses { min-width: 200px; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
.course-card { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px; background: var(--v5-card-bg); border: 1px solid var(--v5-border); border-radius: 12px; color: inherit; transition: border-color .2s, box-shadow .2s; }
.course-card:hover, .course-card:focus-within { border-color: var(--v5-blue-lt2); box-shadow: 0 4px 14px rgba(37,99,235,.08); }
.course-card__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.course-card__tag { flex-shrink: 0; min-width: 32px; height: 26px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; background: #DBEAFE; color: #1D4ED8; }
.course-card__tag--1 { background: #FEF3C7; color: #92400E; }
.course-card__tag--2 { background: #D1FAE5; color: #065F46; }
.course-card__meta { font-size: var(--fs-xs); color: var(--v5-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-card__title { font-size: var(--fs-s); font-weight: 600; line-height: 1.3; margin: 2px 0 0; }
.course-card__title a { color: var(--v5-text); text-decoration: none; }
.course-card__title a:hover { color: var(--v5-blue); }
.course-card__desc { margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--v5-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-card .progress-bar-wrap { margin: 2px 0; height: 5px; }
.course-card .progress-bar { background: var(--v5-blue); }
.course-card .progress-label { font-size: var(--fs-xs); }
.course-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; font-size: var(--fs-xs); line-height: 1.4; color: var(--v5-muted); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--v5-border); }
.course-card__version { min-width: 0; overflow-wrap: anywhere; }
.course-card__count { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.course-card__count .icon { width: 13px; height: 13px; }
.course-card__actions { display: flex; gap: 6px; margin-top: 6px; }
.course-card__actions .btn { flex: 1; min-height: 30px; padding: 0 8px; font-size: var(--fs-xs); }
.home-request { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-6); padding: var(--s-4) var(--s-5); background: var(--v5-blue-lt); border: 1px solid var(--v5-blue-lt2); border-radius: 12px; }
.home-request__title { font-size: var(--fs-base); margin: 0 0 4px; color: var(--v5-text); }
.home-request__text { margin: 0; font-size: var(--fs-s); color: var(--v5-muted); max-width: 640px; }
[data-theme="dark"] .course-card__tag   { background: rgba(37,99,235,.22); color: #93C5FD; }
[data-theme="dark"] .course-card__tag--1 { background: rgba(217,119,6,.22); color: #FCD34D; }
[data-theme="dark"] .course-card__tag--2 { background: rgba(5,150,105,.22); color: #6EE7B7; }
[data-theme="dark"] .course-card:hover, [data-theme="dark"] .course-card:focus-within { border-color: rgba(96,165,250,.35); box-shadow: none; }
[data-theme="dark"] .home-request { background: #172036; border-color: rgba(96,165,250,.25); }
@media (max-width: 520px) { .course-grid { grid-template-columns: minmax(0, 1fr); } .course-card__actions { flex-direction: column; } #search-courses { min-width: 0; flex: 1; } }
@media (max-width: 380px) { .course-grid { grid-template-columns: 1fr; } }

/* ===== v5A Kursseite: Hero und kompakte Bereichskarten ===== */
.breadcrumb { font-size: var(--fs-s); color: var(--v5-muted); margin: 0 0 var(--s-3); }
.breadcrumb a { color: var(--v5-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--v5-blue); }
.breadcrumb__current { color: var(--v5-text); font-weight: 600; }
.course-hero { padding: 20px; margin-bottom: var(--s-4); background: var(--v5-card-bg); border: 1px solid var(--v5-border); border-radius: 12px; }
.course-hero__main { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); }
.course-hero__main > div:first-child { flex: 1 1 320px; min-width: 0; }
.course-hero__badge { background: var(--v5-blue-lt); color: var(--v5-blue); }
.course-hero__title { font-size: var(--fs-l); line-height: 1.3; margin: 8px 0 6px; color: var(--v5-text); }
.course-hero__desc { font-size: var(--fs-base); color: var(--v5-muted); margin: 0 0 8px; max-width: 70ch; }
.course-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; flex: 0 1 380px; }
.course-hero__status { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--v5-border); font-size: var(--fs-s); color: var(--v5-muted); }
.course-hero__status a { color: var(--v5-blue); }
.course-hero__ok { color: #15803D; font-weight: 600; }
.domains-title { font-size: var(--fs-m); margin: var(--s-5) 0 var(--s-3); color: var(--v5-text); }
.domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.domain-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin: 0; background: var(--v5-card-bg); border: 1px solid var(--v5-border); border-radius: 12px; }
.domain-card:hover { border-color: var(--v5-blue); }
.domain-card__body { flex: 1; min-width: 0; }
.domain-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.domain-card__code { font-size: var(--fs-xs); font-weight: 700; color: var(--v5-blue); }
.domain-card__weight { background: var(--v5-blue-lt); color: var(--v5-blue); font-size: var(--fs-xs); }
.domain-card__title { font-size: var(--fs-base); line-height: 1.35; margin: 6px 0 4px; }
.domain-card__title a { color: var(--v5-text); text-decoration: none; }
.domain-card__title a:hover { color: var(--v5-blue); }
.domain-card__desc { font-size: var(--fs-s); color: var(--v5-muted); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.domain-card__meta { font-size: var(--fs-xs); color: var(--v5-muted); }
.domain-card__actions { display: flex; flex-wrap: wrap; gap: 6px; }
[data-theme="dark"] .course-hero__ok { color: #4ADE80; }
@media (max-width: 520px) { .course-hero { padding: 14px; } .course-hero__title { font-size: var(--fs-l); } .course-hero__actions { flex-basis: 100%; } }

/* ── Dashboard kompakt: Zusatzkarten als Raster, Abschnitte einklappbar ── */
.dash-extra { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.dash-extra > .heatmap-card { grid-column: span 2; }
.dash-extra > .insight-grid { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.dash-extra > .milestones-card { grid-column: 1 / -1; }
.dash-extra > .cod-card + .milestones-card { grid-column: span 2; }
.dash-extra .milestone-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dash-extra .milestone-list > li { flex: 1 1 140px; }
.dash-extra > .card, .dash-extra .insight-card { margin: 0; }
.kpi-grid { gap: var(--s-4); margin-bottom: var(--s-4); }
.dash-fold { margin-top: var(--s-5); border: 1px solid var(--v5-border, var(--c-border)); border-radius: var(--r-lg); background: var(--c-surface); }
.dash-fold__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; font-size: var(--fs-m); font-weight: 600; color: var(--v5-text, var(--c-text)); }
.dash-fold__summary::-webkit-details-marker { display: none; }
.dash-fold__summary:focus-visible { outline: 2px solid var(--v5-blue, var(--c-primary)); outline-offset: 2px; border-radius: var(--r-lg, 12px); }
.dash-fold__icon { width: 18px; height: 18px; transition: transform .15s; color: var(--v5-muted, var(--c-text-2)); }
.dash-fold[open] .dash-fold__icon { transform: rotate(180deg); }
.dash-fold > section { padding: 0 var(--s-4) var(--s-4); }
@media (max-width: 900px) {
  .dash-extra, .dash-extra > .insight-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-extra > * { grid-column: auto !important; }
}

/* ===== v5B Anmeldung, Registrierung, Passwort, MFA: kompakte, einheitliche Karte ===== */
.auth-wrap { max-width: 440px; margin: var(--s-6) auto var(--s-8); padding: 0 var(--s-4); }
.auth-card { background: var(--v5-card-bg); border: 1px solid var(--v5-border); border-radius: 12px; padding: 24px; box-shadow: 0 4px 14px rgba(15,23,42,.05); text-align: left; }
.auth-card h1 { font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; margin: 0 0 var(--s-2); text-align: center; }
.auth-card .zfu-color-text-6d0594, .auth-card .zfu-font-color-10cc09 { font-size: var(--fs-s); line-height: 1.5; color: var(--v5-muted); text-align: center; max-width: none; margin: 0 0 var(--s-5); }
.auth-card .zfu-margin-6a209b, .auth-card .zfu-margin-2da5d6 { margin-bottom: var(--s-4); }
.auth-card .zfu-display-font-555fb6 { font-size: var(--fs-base); }
.auth-card .zfu-width-padding-545d50 { font-size: var(--fs-base); min-height: 40px; }
.auth-card .zfu-width-padding-d3b125 { min-height: 40px; font-size: var(--fs-base); margin: var(--s-1) 0 var(--s-4); }
.auth-card .zfu-text-font-fa85b8 { font-size: var(--fs-s); line-height: 1.6; padding-top: var(--s-4); }
.auth-card .zfu-text-font-fa85b8 a { white-space: nowrap; }
.auth-card .mfa-info-box { margin-bottom: var(--s-4); font-size: var(--fs-s); }
.auth-card form .btn + .btn { margin-left: var(--s-2); }
@media (max-width: 520px) { .auth-wrap { margin-top: var(--s-4); padding: 0; } .auth-card { padding: 18px; } }
[data-theme="dark"] .auth-card { box-shadow: none; }

/* ===== v5B Admin-Dashboard: KPI-Leiste oben, Widgets im Raster, gruppierter Schnellzugriff ===== */
.dash-page { max-width: 1200px; }
.dash-kpibar { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--s-2); }
.dash-kpibar > li { min-width: 0; display: flex; }
.dash-kpi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); text-decoration: none; }
a.dash-kpi:hover { border-color: var(--c-primary); }
.dash-kpi__label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--c-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpi__label .icon { width: 14px; height: 14px; flex: 0 0 14px; }
.dash-kpi__value { font-size: var(--fs-m); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.dash-kpi__sub { font-size: var(--fs-xs); color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpi__meter { display: block; width: 100%; height: 4px; margin-top: 4px; }
.dash-kpi__meter-bg { fill: var(--c-surface-2); }
.dash-kpi__meter-fill { fill: var(--c-success-text); }
.dash-kpi--warn .dash-kpi__meter-fill { fill: var(--c-warning-text); }
.dash-kpi--error .dash-kpi__meter-fill { fill: var(--c-danger-text); }
.dash-kpi--warn .dash-kpi__label .icon { color: var(--c-warning-text); }
.dash-kpi--error .dash-kpi__label .icon { color: var(--c-danger-text); }
.dash-kpi--ok .dash-kpi__label .icon { color: var(--c-success-text); }
.dash-widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.dash-widget { min-width: 0; }
.dash-widget--wide { grid-column: 1 / -1; }
.dash-widget__title { font-size: var(--fs-base); }
.dash-widget__handle { width: 28px; height: 28px; }
.dash-widget__handle .icon { width: 16px; height: 16px; }
.dash-widget--wide .dash-tiles .seo-status-card__hint { -webkit-line-clamp: 1; line-clamp: 1; }
.dash-widget .dash-tiles:last-child { margin-bottom: 0; }
.dash-widget:not(.dash-widget--wide) .status-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: .6rem; row-gap: 2px; align-items: center; }
.dash-widget:not(.dash-widget--wide) .status-item__label { min-width: 0; }
.dash-widget:not(.dash-widget--wide) .status-item__text { grid-column: 2 / -1; grid-row: 2; }
.dash-widget:not(.dash-widget--wide) .status-item__link { grid-column: 3; grid-row: 1; padding-left: 0; }
.status-more > summary { cursor: pointer; font-size: var(--fs-s); color: var(--c-primary); padding: var(--s-1) 0; }
.status-more[open] > summary { margin-bottom: .35rem; }
.status-more { display: flex; flex-direction: column; gap: .35rem; }
.dash-ki-chart { max-width: none; }
.dash-shortcuts { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--s-4) var(--s-3); }
.dash-shortcut-group { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.admin-sidebar-layout main .dash-shortcut-group__title, .dash-shortcut-group__title { margin: 0 0 var(--s-1); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-3); }
.dash-shortcuts .dash-shortcut { display: flex; align-items: center; gap: .5rem; padding: 6px 8px; border: 0; border-radius: var(--r-sm); font-size: var(--fs-s); font-weight: 500; color: var(--c-text); text-decoration: none; box-shadow: none; }
.dash-shortcuts .dash-shortcut:hover { background: var(--c-surface-2); color: var(--c-primary); }
.dash-shortcut .icon { width: 16px; height: 16px; flex: 0 0 16px; color: var(--c-text-2); }
@media (max-width: 1000px) { .dash-widgets { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .dash-kpibar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-widget { padding: .75rem; } }

/* ===== v5B Admin-Abschnitte: einheitliche Abstände, Tabellen über die volle Breite ===== */
.admin-card { margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.admin-card:last-child { margin-bottom: 0; }
.admin-card__title { margin: 0 0 var(--s-3); font-size: var(--fs-m); font-weight: 600; line-height: 1.3; }
.admin-card > p { margin: 0 0 var(--s-3); }
.admin-card .perm-matrix-wrap { margin: var(--s-3) 0; }
.admin-card .perm-matrix-wrap:last-child { margin-bottom: 0; }
.perm-matrix { max-width: none; width: 100%; }
.perm-matrix .perm-col-role { width: 120px; text-align: center; vertical-align: middle; }
.perm-matrix th[scope="row"] small { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.35; }
.perm-matrix__actions { margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.abo-table { width: 100%; }
.abo-table thead th { white-space: normal; vertical-align: bottom; min-width: 4.5rem; line-height: 1.3; }
.perm-matrix tbody tr:last-child th { border-bottom: none; }
.table-scroll-hint { display: none; margin: 0 0 var(--s-1); font-size: var(--fs-xs); color: var(--c-text-3); }
@media (max-width: 640px) {
    .admin-card { padding: var(--s-3); }
    .perm-matrix th, .perm-matrix td { padding: .45rem .4rem; }
    .perm-matrix .perm-col-role { width: 64px; }
    .perm-matrix thead .perm-col-role { font-size: var(--fs-xs); }
    .table-scroll-hint { display: block; }
}

/* ===== v5B Kompakte Stufen-/Abo-Darstellung: Platz für weitere Abo-Stufen ===== */
.kw-compare__col { display: flex; flex-direction: column; padding: var(--s-5) var(--s-4) var(--s-4); border-width: 1px; }
.kw-compare__col--pro { box-shadow: 0 2px 10px rgba(0,120,212,.08); }
.kw-compare__badge { top: -10px; padding: 2px 10px; }
.kw-compare__head { margin-bottom: var(--s-3); }
.kw-compare__icon { width: 32px; height: 32px; margin-bottom: var(--s-2); }
.kw-compare__icon .icon { width: 16px; height: 16px; }
.kw-compare__title { font-size: var(--fs-base); font-weight: 600; }
.kw-compare__sub { font-size: var(--fs-xs); }
.kw-compare__list { gap: 6px; margin-bottom: var(--s-4); }
.kw-compare__item { font-size: var(--fs-s); line-height: 1.35; align-items: flex-start; }
.kw-compare__item .icon { width: 14px; height: 14px; margin-top: 2px; }
.kw-compare__cta { gap: var(--s-2); }
.kw-compare__cta .btn-block { min-height: 34px; padding: 0 var(--s-3); font-size: var(--fs-s); }
.kw-compare__cta .btn-block .icon { width: 15px; height: 15px; }
@media (max-width: 540px) { .kw-compare { grid-template-columns: minmax(0, 1fr); } }
.abo-table { font-size: var(--fs-xs); }
.abo-table th, .abo-table td, .is-admin .abo-table th, .is-admin .abo-table td { padding: .35rem .5rem; }
.abo-table thead th { font-size: var(--fs-xs); min-width: 3.5rem; }
.abo-table__input, .is-admin .abo-table__input { width: 4.25rem; min-height: 28px; height: 28px; padding: 0 .4rem; font-size: var(--fs-xs); }
.abo-table .perm-matrix__check { width: 1rem; height: 1rem; }

/* v5G: E-Mail-Bestätigung per Code (Aufbau wie MFA-Ansicht) */
.auth-card .mfa-info-box p { overflow-wrap: anywhere; }
.verify-submit { width: 100%; justify-content: center; }
.verify-resend { margin: var(--s-3) 0 0; text-align: center; }
.verify-notice { background: var(--color-success-bg); color: var(--c-success-text); padding: .75rem 1rem; border-radius: var(--radius-md); margin-bottom: var(--s-4); font-size: var(--fs-s); }
.verify-other { margin: 0; font-size: var(--fs-s); color: var(--c-text-3); text-align: center; }

/* ── v5H: Probekarte in der Sidebar (Desktop) + Popup (Mobil) ───────────── */
.sidebar__sample { padding: 1.25rem 1rem .75rem; }
.sidebar__sample .sample-card { max-width: none; margin: 0; }
.sidebar__sample .sample-card__stack { padding-bottom: 8px; }
.sidebar__sample .sample-card__stack::after { top: 4px; bottom: 4px; width: calc(100% - 12px); transform: translateX(-50%) rotate(-.8deg); }
.sidebar__sample .sample-card__stack::before { display: none; }
.sidebar__sample .sample-card__card { padding: var(--s-4) var(--s-3); border-left-width: 3px; border-radius: 12px; }
.sidebar__sample .sample-card__question { font-size: var(--fs-s); line-height: 1.45; }
.sidebar__sample .sample-card__hint { margin-top: var(--s-2); }
.sidebar__sample .sample-card__answer { margin-top: var(--s-3); padding-top: var(--s-3); }
.sidebar__sample .sample-card__answer p { font-size: var(--fs-s); }
.sidebar__sample .sample-card__card[aria-expanded="true"] { padding-bottom: calc(var(--s-4) + var(--s-4)); }
.sidebar__sample .sample-card__continue { right: var(--s-3); bottom: calc(8px + var(--s-2)); }
html.sb-collapsed .sidebar__sample { display: none; }

/* Schwebender Button (nur mobil) */
.sample-fab { display: none; }
.sample-modal[hidden] { display: none; }
.sample-modal { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: var(--s-4); }
.sample-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.sample-modal__panel { position: relative; width: min(420px, 92vw); max-height: calc(100vh - 2 * var(--s-4)); overflow-y: auto; background: var(--c-surface); color: var(--c-text); border-radius: var(--r-lg, 16px); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); padding: var(--s-4); }
.sample-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.sample-modal__title { margin: 0; font-size: var(--fs-m); font-weight: 700; color: var(--c-text); }
.sample-modal__close { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-text); cursor: pointer; }
.sample-modal__close .icon { width: 18px; height: 18px; }
.sample-modal__close:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.sample-modal .sample-card { margin: 0; max-width: none; }
body.sample-modal-open { overflow: hidden; }

@media (max-width: 767.98px) {
    .sidebar__sample { display: none; }
    .sample-fab {
        display: inline-flex; align-items: center; gap: var(--s-2);
        position: fixed; right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: 40;
        min-height: 44px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill);
        background: var(--c-primary); color: #fff; font-size: var(--fs-s); font-weight: 600;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .2); cursor: pointer;
    }
    .sample-fab .icon { width: 18px; height: 18px; }
    .sample-fab:focus-visible { outline: 3px solid var(--c-text); outline-offset: 3px; }
    body.sb-open .sample-fab, body.sample-modal-open .sample-fab { display: none; }
}
[data-theme="dark"] .sample-modal__backdrop { background: rgba(0, 0, 0, .6); }
[data-theme="dark"] .sample-fab { box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
@media print { .sample-fab, .sample-modal, .sidebar__sample { display: none !important; } }

/* ── v5J: Testkarte ohne Textüberlauf, grössere Abstände Hero/Sidebar ────── */
.sample-card__card { min-width: 0; max-width: 100%; }
.sample-card__question,
.sample-card__answer p { overflow-wrap: break-word; word-break: break-word; -webkit-hyphens: auto; hyphens: auto; }
.home-hero { padding-bottom: var(--s-5); }
.sidebar__sample { margin-top: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--c-border); }

/* ── v5K: Neuanmeldung sperren/freigeben ─────────────────────────────── */
.users-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-4); }
.users-toolbar .admin-search { flex: 0 1 auto; margin-bottom: 0; flex-wrap: nowrap; }
.users-toolbar .admin-search input[type="search"] { flex: 0 1 260px; width: 260px; min-width: 140px; }
.users-reglock { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
.users-reglock__status { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; background: var(--c-danger-lt); color: var(--c-danger-text); font-size: var(--fs-s); font-weight: 600; }
@media (max-width: 600px) {
    .users-toolbar .admin-search { flex: 1 1 100%; }
    .users-toolbar .admin-search input[type="search"] { flex: 1 1 auto; width: auto; }
}
.reg-locked { margin-top: var(--s-4); text-align: center; }
.reg-locked__title { margin: 0 0 var(--s-1); color: var(--c-danger-text); font-size: var(--fs-m); font-weight: 700; }
.reg-locked__text { margin: 0; color: var(--c-text); font-size: var(--fs-base); line-height: 1.5; }


/* ==========================================================================
   praeppen.ch – eigene Komponenten (pp-*)
   ========================================================================== */
.pp-hero { text-align: center; }
.pp-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }

.pp-tool-card { display: flex; flex-direction: column; gap: var(--s-2); color: var(--c-text); text-decoration: none; }
.pp-tool-card:hover { color: var(--c-text); }
.pp-tool-card h3 { margin: 0; font-size: var(--fs-l, 1.1rem); }
.pp-tool-card p { margin: 0; color: var(--c-text-2); font-size: var(--fs-s, .9rem); }
.pp-tool-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--c-primary-lt); color: var(--c-primary-text); }
.pp-tool-card__icon .icon { width: 22px; height: 22px; }
.pp-tool-card__icon--korrektur { background: var(--c-success-lt); color: var(--c-success-text); }

.pp-prose { max-width: 75ch; line-height: 1.65; }
.pp-prose h2 { margin-top: var(--s-8); font-size: 1.2rem; }
.pp-prose h2:first-child { margin-top: 0; }
.pp-prose ul { padding-left: var(--s-6); }

.pp-form { display: flex; flex-direction: column; gap: var(--s-4); }
.pp-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.pp-field label, .pp-fieldset legend { font-weight: 600; font-size: var(--fs-base); }
.pp-field input[type="text"], .pp-field input[type="email"], .pp-field input[type="password"], .pp-field input[type="number"],
.pp-field select, .pp-field textarea { width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3); }
.pp-field textarea { resize: vertical; line-height: 1.5; }
.pp-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); }
.pp-hint { color: var(--c-text-3); font-size: var(--fs-s, .85rem); margin: 0; }
.pp-fieldset { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-4); margin: 0; }
.pp-fieldset label { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; }
.pp-color-row { display: flex; gap: var(--s-3); align-items: center; }
.pp-color-row input[type="color"] { width: 52px; height: 44px; padding: 2px; border: 1px solid var(--color-border-dark); border-radius: var(--r-md); background: var(--c-surface); cursor: pointer; }
.pp-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.pp-sep { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-6) 0; }

.pp-auth-intro { color: var(--c-text-2); margin: 0 0 var(--s-4); }
.pp-auth-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--s-3); row-gap: var(--s-1); margin: var(--s-4) 0 0; font-size: var(--fs-base); text-align: center; }
.pp-auth-links__sep { color: var(--c-text-3); }
.pp-code-input { font-size: 1.6rem !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }

.pp-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-5); align-items: start; }
.pp-danger-zone { border: 1px solid var(--c-danger); }
.pp-danger-zone h2 { color: var(--c-danger-text); }

/* Werkzeuge */
/* Ohne Ergebnis: Formular in voller Inhaltsbreite (bündig mit dem Hinweis), Felder zweispaltig.
   Mit Ergebnis (ab 1024px): Formular 5/12, Ergebnis 7/12. */
.pp-tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (min-width: 1024px) { .pp-tool:has(> .pp-result:not([hidden])) { grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); } }
.pp-tool:has(> .pp-result[hidden]) .pp-tool__form { position: static; }
.pp-tool__form { position: sticky; top: var(--s-4); }
@media (max-width: 1023.98px) { .pp-tool__form { position: static; } }
.pp-form__status { min-height: 1.4em; margin: 0; color: var(--c-text-2); font-size: var(--fs-s, .9rem); }
.pp-form__status.is-error { color: var(--c-danger-text); }
.pp-form button[aria-busy="true"] { cursor: progress; opacity: .8; }
.pp-result { display: flex; flex-direction: column; gap: var(--s-3); }
.pp-result[hidden] { display: none; }
.pp-result__toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }
.pp-result__text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; padding: var(--s-4); background: var(--c-surface-2); border-radius: var(--r-md); max-height: 75vh; overflow: auto; }
.pp-preview { max-width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--r-md); border: 1px solid var(--c-border); margin-top: var(--s-2); }
.pp-preview[hidden] { display: none; }
.pp-privacy { background: var(--c-success-lt); }
.pp-privacy .icon { color: var(--c-success-text); }

/* Admin */
.pp-meter { width: 100%; height: 10px; appearance: none; -webkit-appearance: none; border: 0; border-radius: var(--r-pill); background: var(--c-track); overflow: hidden; }
.pp-meter::-webkit-progress-bar { background: var(--c-track); border-radius: var(--r-pill); }
.pp-meter::-webkit-progress-value { background: var(--c-primary); border-radius: var(--r-pill); }
.pp-meter::-moz-progress-bar { background: var(--c-primary); border-radius: var(--r-pill); }
.pp-meter--sm { height: 6px; min-width: 120px; }
.pp-user-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; min-width: 260px; }
.pp-center { text-align: center; }
.pp-ok { color: var(--c-success-text); }
.pp-no { color: var(--c-text-3); }
.pp-auftraege td:last-child { white-space: nowrap; text-align: right; }

.topbar__logout { margin: 0; display: inline-flex; }
html.sb-collapsed .sidebar__link, html.sb-collapsed .sidebar__cta-link { padding-left: 0; padding-right: 0; }
.sidebar__link .icon, .sidebar__cta-link .icon { min-width: 16px; }
.admin-flash--info { background: var(--c-primary-lt); color: var(--c-text); }

/* Druck: nur das Ergebnis */
@media print {
    body:has(#pp-result-text) .sidebar, body:has(#pp-result-text) .topbar, body:has(#pp-result-text) .site-footer,
    body:has(#pp-result-text) .skip-link, body:has(#pp-result-text) .page-head, body:has(#pp-result-text) .info-banner,
    body:has(#pp-result-text) .admin-flash, body:has(#pp-result-text) .pp-tool__form, body:has(#pp-result-text) .pp-result__toolbar,
    body:has(#pp-result-text) .pp-hint, body:has(#pp-result-text) .pp-tool-detail-meta { display: none !important; }
    body:has(#pp-result-text) .pp-tool { display: block; }
    body:has(#pp-result-text) .pp-result, body:has(#pp-result-text) .card { box-shadow: none !important; border: 0 !important; padding: 0 !important; }
    .pp-result__text { max-height: none; overflow: visible; background: none; padding: 0; color: #000; }
}

/* === v27: UI-Fixes (Statistik-Wert, Tabellen-Scrollhinweis, Datei-Auswahl) =============== */
/* KI-Budget: Tagesverbrauch als Kennzahl (dl) statt Fliesstext, Skala wie .ki-usage-stat__value */
.pp-stat { display: flex; flex-direction: column; gap: 2px; margin: var(--s-2) 0 var(--s-1); }
.pp-stat dt { font-size: var(--fs-s); color: var(--c-text-2); }
.pp-stat dd { margin: 0; font-size: var(--fs-l); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pp-stat__unit { font-size: var(--fs-base); font-weight: 500; letter-spacing: 0; color: var(--c-text-2); }

/* Admin-Tabellen: Schatten am Rand zeigen, dass seitlich weitere Spalten folgen.
   Abdeckungen (local) scrollen mit dem Inhalt, Schatten (scroll) bleiben am Rand stehen. */
.admin-table-wrap {
    --pp-wrap-bg: var(--c-surface);
    --pp-scroll-shadow: rgba(15, 23, 42, .18);
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--pp-wrap-bg) 40%, transparent) left center / 48px 100% no-repeat local,
        linear-gradient(to left, var(--pp-wrap-bg) 40%, transparent) right center / 48px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--pp-scroll-shadow), transparent) left center / 16px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--pp-scroll-shadow), transparent) right center / 16px 100% no-repeat scroll,
        var(--pp-wrap-bg);
}
[data-theme="dark"] .admin-table-wrap { --pp-scroll-shadow: rgba(0, 0, 0, .6); }
/* Kopfzeile halbtransparent, damit der Schatten auch dort sichtbar bleibt */
.admin-table-wrap .admin-table th { background: rgba(127, 127, 127, .08); }
@media (max-width: 640px) {
    .admin-table-wrap::before {
        content: "Seitlich wischen für weitere Spalten \2192";
        position: sticky; left: 0; display: block; padding: 0 0 var(--s-2);
        font-size: var(--fs-xs); color: var(--c-text-2);
    }
}

/* Datei-Auswahl (Handschrift): deutscher Button statt «Choose File», natives Feld bleibt fokussierbar */
.pp-file { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.pp-file__input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.pp-file__btn { cursor: pointer; }
.pp-file__input:focus-visible + .pp-file__btn { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.pp-file__name { min-width: 0; color: var(--c-text-2); overflow-wrap: anywhere; }
.pp-file__name.is-set { color: var(--c-text); font-weight: 500; }
/* Benutzer-Aktionen in der Tabelle: Formulare einzeilig ohne eigenen Kasten (kompakte Zeilen) */
.admin-table .pp-user-actions { flex-direction: column; align-items: stretch; }
.admin-table .admin-inline-form { flex-wrap: nowrap; padding: 0; background: none; border-radius: 0; }
.admin-table .admin-inline-form input:not([type="hidden"]), .admin-table .admin-inline-form select { width: auto; flex: 1 1 8rem; min-width: 0; }