/* ════════════════════════════════════════════════════════════
   app.css — App-spezifisches CSS
   Design-Philosophie: Clean, ruhig, fokussiert aufs Lernen.
   Keine KI-typischen Verläufe/Gläser-Effekte. Stattdessen:
   klare Flächen, dezente Tiefe, funktionale Hierarchie.
   ════════════════════════════════════════════════════════════ */

/* ── LOADING STATE: Buttons gesperrt bis quiz.js geladen ──── */
body.app-loading button[onclick] {
    opacity: .55;
    cursor: wait;
    pointer-events: none;
}

body.app-loading::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand, #0e6f68), transparent);
    animation: app-loading-bar 1s ease-in-out infinite;
    z-index: 9999;
}

@keyframes app-loading-bar {
    0% { transform: translateX(-100%) }
    100% { transform: translateX(100%) }
}

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS — Single Source of Truth
   ════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand ── */
    --brand: #0e6f68;
    --brand2: #0a544e;
    --brand-rgb: 14, 111, 104;

    /* ── Semantic ── */
    --green: #22c55e;
    --red: #ef4444;
    --yellow: #f59e0b;
    --orange: #f97316;
    --c-success: #4ade80;
    --c-danger: #f87171;
    --c-warning: #fbbf24;

    /* ── Surface/Text (mapped to Bootstrap) ── */
    --c-bg: var(--bs-body-bg);
    --c-surface: var(--bs-tertiary-bg);
    --c-surface-2: var(--bs-secondary-bg);
    --c-surface-hover: #efeff2;
    --c-border: var(--bs-border-color);
    --c-border-strong: rgba(9, 9, 11, 0.16);
    --c-border-hover: rgba(9, 9, 11, 0.3);
    --c-text: var(--bs-body-color);
    --c-text-muted: var(--bs-secondary-color);
    --c-text-faint: #8e8e97;

    /* ── Typography ── */
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Fluid type scale (clamp: min, preferred, max) */
    --fs-xs: clamp(0.62rem, 1vw, 0.7rem);
    --fs-sm: clamp(0.72rem, 1.1vw, 0.82rem);
    --fs-base: clamp(0.88rem, 1.3vw, 1rem);
    --fs-lg: clamp(1rem, 1.6vw, 1.15rem);
    --fs-xl: clamp(1.2rem, 2vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 2.8vw, 2rem);
    --fs-3xl: clamp(1.8rem, 3.5vw, 2.5rem);

    /* ── Spacing scale (8px base, 4px increments) ── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* ── Border radius ── */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 99px;

    /* ── Elevation / Shadows ── */
    --elevation-1: 0 1px 2px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.08);
    --elevation-2: 0 2px 6px rgba(0,0,0,.06), 0 4px 12px -6px rgba(0,0,0,.15);
    --elevation-3: 0 4px 14px rgba(0,0,0,.08), 0 8px 24px -10px rgba(0,0,0,.2);
    --elevation-4: 0 8px 24px rgba(0,0,0,.1), 0 16px 40px -14px rgba(0,0,0,.25);
    --elevation-5: 0 12px 36px rgba(0,0,0,.12), 0 24px 60px -20px rgba(0,0,0,.3);

    /* ── Mobile safe areas ── */
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ══ RESET / BASE ═══════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box
}

body {
    font-family: var(--font);
    min-height: 100vh;
    padding-bottom: calc(60px + var(--safe-bottom));
}

/* ══ VIEWS ══════════════════════════════════════════════════ */
.view {
    display: none
}

.view.active {
    display: block;
    animation: view-enter .35s cubic-bezier(.16, 1, .3, 1);
}

@keyframes view-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .view.active {
        animation: none;
    }

    * {
        scroll-behavior: auto !important;
    }
}

/* ══ BOTTOM NAVBAR (mobile) ═════════════════════════════════ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    padding-bottom: var(--safe-bottom);
}

.bottom-nav .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    min-height: 56px;
    cursor: pointer;
    color: var(--bs-secondary-color);
    font-size: .62rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: none;
    background: none;
    transition: .15s;
    gap: 2px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.bottom-nav .bn-item i {
    font-size: 1.3rem;
    line-height: 1
}

.bottom-nav .bn-item.active {
    color: var(--brand)
}

.bottom-nav .bn-item .bn-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 16px);
    background: var(--red);
    color: #fff;
    font-size: .55rem;
    padding: 1px 4px;
    border-radius: 99px;
    min-width: 14px;
    text-align: center;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .bottom-nav {
        display: none
    }
}

/* ══ DESKTOP TOPBAR ═════════════════════════════════════════ */
.top-nav {
    display: flex;
}
/* Mobil: schlanke Kopfzeile — Logo, Statusicons, Burger.
   Die Desktop-Tabs bleiben verborgen (siehe .desk-nav-tabs weiter unten). */
@media (max-width: 767.98px) {
    .top-nav {
        position: sticky;
        top: 0;
        z-index: 1035;
        padding: .4rem .75rem !important;
        margin-bottom: .75rem !important;
    }
    .top-nav .container-xl {
        gap: .35rem !important;
        padding-inline: 0;
    }
    .top-nav .brand-home-link {
        font-size: 1rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* was ohnehin im Burger-Menue steht, oben ausblenden */
    .top-nav #btn-tutorial,
    .top-nav #btn-referenz,
    .top-nav #btn-settings-top,
    .top-nav #btn-logout-top,
    .top-nav #nav-user-top {
        display: none !important;
    }
}
@media (min-width: 768px) {
    body {
        padding-bottom: 20px
    }
}
/* Burger-Schaltflaeche (wird von mobile-nav.js eingehaengt) */
#btn-nav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 1.25rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
@media (max-width: 767.98px) {
    #btn-nav-hamburger {
        display: inline-flex;
    }
}
/* Menue-Eintraege im Offcanvas */
#nav-offcanvas {
    width: min(88vw, 340px);
}
#nav-offcanvas .offcanvas-body {
    padding-bottom: calc(1rem + var(--safe-bottom));
}
#nav-offcanvas .n-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    text-align: left;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1.3;
}
#nav-offcanvas .n-item .bi {
    font-size: 1.2rem;
    width: 1.4rem;
    flex: 0 0 auto;
    text-align: center;
}
#nav-offcanvas .n-item:hover,
#nav-offcanvas .n-item:focus-visible {
    background: var(--bs-tertiary-bg);
}
#nav-offcanvas .n-item.active {
    background: rgba(var(--brand-rgb), .14);
    color: var(--brand);
    font-weight: 600;
}
#nav-offcanvas .n-sep {
    height: 1px;
    margin: .5rem;
    background: var(--bs-border-color);
}

.desk-nav-tabs {
    display: none;
}

@media (min-width: 768px) {
    .desk-nav-tabs {
        display: flex;
        gap: 4px;
        align-items: center;
    }
}

.desk-nav-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--bs-secondary-color);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s, color .15s;
    white-space: nowrap;
}

.desk-nav-tab:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.desk-nav-tab.active {
    background: rgba(var(--brand-rgb), .12);
    color: var(--brand);
    font-weight: 600;
}

.desk-nav-tab .badge {
    font-size: .6rem;
    padding: 2px 5px;
}

/* ══ BRAND/LOGO ═══════════════════════════════════════════════ */
.brand-home-link {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0;
    transition: opacity .15s;
}

.brand-home-link:hover {
    opacity: .8;
}

/* ══ CARDS / SURFACES ═══════════════════════════════════════ */
.surface {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius);
    transition: box-shadow .2s ease, border-color .2s ease;
}

@media (hover: hover) {
    .surface:hover {
        box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
    }
}

.surface-2 {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
}

/* ══ STAT CARDS ═════════════════════════════════════════════
   Sanftes "Einzählen" beim ersten Anzeigen - leicht versetztes
   Erscheinen der vier Stat-Karten wirkt organischer als gleichzeitig. */
.stat-card {
    border-radius: var(--radius-sm);
    padding: 12px 10px;
    text-align: center;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    animation: stat-card-in .4s cubic-bezier(.16, 1, .3, 1) backwards;
}

.stat-val {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1
}

.stat-lbl {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    margin-top: 2px
}

.stat-card:nth-child(1) {
    animation-delay: .02s
}

.stat-card:nth-child(2) {
    animation-delay: .07s
}

.stat-card:nth-child(3) {
    animation-delay: .12s
}

.stat-card:nth-child(4) {
    animation-delay: .17s
}

@keyframes stat-card-in {
    from {
        opacity: 0;
        transform: scale(.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stat-card {
        animation: none;
    }
}

/* ══ PROGRESS ═══════════════════════════════════════════════
   Sanfter, einmal durchlaufender Glanz beim Füllen. */
.prog {
    height: 8px;
    border-radius: 99px;
    background: var(--bs-border-color);
    overflow: hidden;
    position: relative;
}

.prog-bar {
    height: 100%;
    border-radius: 99px;
    background: var(--brand);
    transition: width .6s cubic-bezier(.16, 1, .3, 1);
    position: relative;
    overflow: hidden;
}

.prog-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
}

@keyframes prog-shine {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .prog-bar::after {
        animation: none;
    }

    .prog-bar {
        transition: none;
    }
}

/* ══ MODE CARDS ═════════════════════════════════════════════ */
.mode-card {
    border: 2px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    padding: 14px 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background-color .15s, transform .12s;
    background: var(--bs-tertiary-bg);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mode-card:active {
    transform: scale(.96);
}

@media (hover: hover) {
    .mode-card:hover {
        border-color: var(--brand);
        transform: translateY(-2px);
    }
}

.mode-card.active {
    border-color: var(--brand);
    background: rgba(14, 111, 104, .08);
    animation: mode-card-pop .3s cubic-bezier(.34, 1.56, .64, 1);
}

.mode-card.exam-mode.active {
    border-color: var(--red);
    background: rgba(239, 68, 68, .07)
}

.mode-card .mode-icon {
    font-size: 1.5rem;
    margin-bottom: 4px
}

.mode-card .mode-title {
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2
}

.mode-card .mode-count {
    font-size: .65rem;
    color: var(--bs-secondary-color);
    margin-top: 4px;
    display: block;
}

.mode-card.active .mode-count {
    color: var(--brand)
}

@keyframes mode-card-pop {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mode-card.active {
        animation: none;
    }
}

/* ══ CATEGORY CHIPS ═════════════════════════════════════════ */
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: .76rem;
    border: 1.5px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (hover: hover) {
    .cat-chip:hover {
        border-color: var(--brand)
    }
}

.cat-chip.active {
    border-color: var(--brand);
    background: rgba(14, 111, 104, .1);
    color: var(--bs-body-color);
    font-weight: 500;
}

/* ══ QUIZ OPTION BUTTONS ════════════════════════════════════ */
.option-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin: 8px 0;
    color: var(--bs-body-color);
    font-size: .95rem;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, transform .1s;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.option-btn:active {
    transform: scale(.985);
}

.option-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.option-btn:focus:not(:focus-visible) {
    outline: none;
}

/* WICHTIG: :hover nur auf Geräten mit echtem Hover-Zeiger - sonst bleibt
   der Rahmen auf Touch-Geräten nach einem Tap "kleben". */
@media (hover: hover) {
    .option-btn:hover {
        border-color: var(--brand)
    }
}

.option-btn.selected {
    border-color: var(--brand);
    background: rgba(14, 111, 104, .1)
}

.option-btn.selected::after {
    content: "\f26a"; /* bootstrap-icons check-circle-fill */
    font-family: "bootstrap-icons";
    margin-left: auto;
    flex-shrink: 0;
    color: var(--brand);
    font-size: 1.1rem;
}

.option-btn.correct {
    border-color: var(--green);
    background: rgba(34, 197, 94, .1);
    color: var(--green);
    font-weight: 600
}

.option-btn.wrong {
    border-color: var(--red);
    background: rgba(239, 68, 68, .1);
    color: var(--red)
}

.option-btn.missed {
    border-color: var(--yellow);
    background: rgba(245, 158, 11, .08);
    color: var(--yellow);
    font-weight: 600;
    border-style: dashed
}

@media (min-width: 768px) {
    .option-btn {
        padding: 15px 20px;
        font-size: 1rem;
    }
}

@media (hover: hover) and (min-width: 768px) {
    .option-btn:hover {
        box-shadow: 0 2px 10px rgba(14, 111, 104, .12);
    }
}

/* ══ ANSWER TEXTAREA ════════════════════════════════════════ */
.answer-ta {
    width: 100%;
    min-height: 120px;
    padding: 14px;
    background: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    color: var(--bs-body-color);
    font-family: var(--font);
    font-size: .95rem;
    resize: vertical;
}

.answer-ta:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .35);
}

/* ══ DIFFICULTY BUTTONS ═════════════════════════════════════ */
.diff-btn {
    flex: 1;
    padding: 11px 6px;
    border-radius: 8px;
    border: 2px solid;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .1s, box-shadow .15s;
    text-align: center;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.diff-btn:active {
    transform: scale(.97);
}

.diff-btn.easy {
    border-color: var(--green);
    color: var(--green);
    background: rgba(34, 197, 94, .08)
}

.diff-btn.medium {
    border-color: var(--yellow);
    color: var(--yellow);
    background: rgba(245, 158, 11, .08)
}

.diff-btn.hard {
    border-color: var(--red);
    color: var(--red);
    background: rgba(239, 68, 68, .08)
}

@media (hover: hover) {
    .diff-btn:hover.easy {
        box-shadow: 0 2px 8px rgba(34, 197, 94, .2)
    }

    .diff-btn:hover.medium {
        box-shadow: 0 2px 8px rgba(245, 158, 11, .2)
    }

    .diff-btn:hover.hard {
        box-shadow: 0 2px 8px rgba(239, 68, 68, .2)
    }
}

/* ══ QUESTION CARDS (Browser) ═══════════════════════════════
   EINZIGE, kanonische Definition - in der Vorversion gab es hier ein
   zweites, älteres Duplikat ohne hover:hover-Schutz, das diesen Fix
   am Dateiende wieder überschrieben hat. */
.q-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s;
    background: var(--bs-body-bg);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.q-card:active {
    transform: scale(.99);
}

@media (hover: hover) {
    .q-card:hover {
        border-color: var(--brand);
        box-shadow: 0 4px 16px rgba(14, 111, 104, .15);
        transform: translateY(-1px);
    }
}

.q-card-text {
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 7px;
    line-height: 1.45
}

.q-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

/* ══ TOUCH-VERBESSERUNG für alle .touch-btn ═════════════════
   EINZIGE, kanonische Definition (vorher gab es ein zweites, älteres
   Duplikat ohne tap-highlight/touch-action am Dateiende). */
.touch-btn {
    min-height: 44px;
    min-width: 44px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* ══ DESKTOP: Quiz-Karte etwas breiter/luftiger ═════════════ */
@media (min-width: 992px) {
    #view-quiz .surface {
        padding: 24px 28px !important;
    }

    #view-quiz #q-text {
        font-size: 1.05rem;
    }
}

#view-quiz .surface.q-fade-out {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .14s ease, transform .14s ease;
}

#view-quiz .surface.q-fade-in {
    animation: q-fade-in-anim .25s ease-out;
}

@keyframes q-fade-in-anim {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-quiz .surface.q-fade-out {
        transition: none;
        opacity: 1;
        transform: none;
    }

    #view-quiz .surface.q-fade-in {
        animation: none;
    }
}


/* ══ EXPLANATION PANEL ══════════════════════════════════════ */
.expl-panel {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    margin-top: 16px;
    overflow: hidden
}

.expl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    background: rgba(14, 111, 104, .06);
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
}

.expl-body {
    padding: 18px;
    display: none;
    font-size: .9rem;
    line-height: 1.78
}

.expl-body.open {
    display: block
}

.expl-body ul {
    padding-left: 0;
    list-style: none;
    margin: 4px 0 8px
}

.expl-body ul li {
    padding: 3px 0 3px 16px;
    position: relative
}

.expl-body ul li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: var(--brand);
    font-weight: 700
}

.expl-body strong {
    color: var(--bs-emphasis-color)
}

.expl-body em {
    color: #a78bfa
}

/* ══ DIAGRAM ════════════════════════════════════════════════ */
.diag-wrap {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    padding: 16px;
    margin: 14px 0;
    overflow-x: auto;
    text-align: center;
}

.diag-wrap svg {
    max-width: 100%;
    height: auto
}

/* ══ EXAM TIMER ═════════════════════════════════════════════ */
#exam-timer {
    font-size: 1.8rem;
    font-weight: 900;
    font-family: monospace;
    color: var(--red);
}

#exam-timer.warning {
    animation: blink .8s infinite
}

@keyframes blink {
    50% {
        opacity: .35
    }
}

/* ══ CATEGORY TREE (Browser Sidebar) ════════════════════════ */
.cat-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .8rem;
    transition: background-color .12s;
    min-height: 40px;
}

.cat-tree-item:hover {
    background: var(--bs-tertiary-bg)
}

.cat-tree-item.active {
    background: rgba(14, 111, 104, .12);
    color: var(--brand);
    font-weight: 500
}

.cat-tree-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    transition: background-color .12s, color .12s;
    min-height: 40px;
}

.cat-tree-group-header:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color)
}

.cat-tree-children {
    display: none
}

.cat-tree-children.open {
    display: block
}

.browser-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* ══ MODAL ══════════════════════════════════════════════════ */
.modal-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 13px;
    border-radius: 8px;
    margin-bottom: 7px;
    font-size: .9rem;
    line-height: 1.5;
}

.modal-option.correct {
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .25)
}

.modal-option.wrong {
    background: rgba(239, 68, 68, .05);
    border: 1px solid rgba(239, 68, 68, .15)
}

/* ══ STREAK ═════════════════════════════════════════════════
   Leichter "Atem"-Effekt, solange eine Streak läuft. */
.streak-pill {
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .3);
    color: var(--yellow);
    border-radius: 99px;
    padding: 3px 11px;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    animation: streak-breathe 2.4s ease-in-out infinite;
}

@keyframes streak-breathe {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(245, 158, 11, .08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .streak-pill {
        animation: none;
    }
}

/* ══ SR BADGE ═══════════════════════════════════════════════ */
.sr-badge {
    background: rgba(14, 111, 104, .15);
    color: #a78bfa;
    border: 1px solid rgba(14, 111, 104, .3);
    border-radius: 99px;
    padding: 1px 8px;
    font-size: .68rem;
}

.model-badge {
    font-size: .62rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}

.cached-ok {
    color: var(--green);
    font-size: .72rem
}

/* ══ FLASHCARD ══════════════════════════════════════════════ */
.flashcard-scene {
    perspective: 1000px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    height: 280px;
}

.flashcard {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1), filter .55s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.flashcard:active {
    filter: brightness(.97);
}

.flashcard.flipped {
    transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .flashcard {
        transition: none;
    }
}

.flashcard-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    text-align: center;
    border: 1.5px solid var(--bs-border-color);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
}

.flashcard-front {
    background: var(--bs-body-bg);
}

.flashcard-back {
    background: var(--bs-tertiary-bg);
    transform: rotateY(180deg);
}

.flashcard-term {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 10px;
}

.flashcard-hint {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    margin-top: 8px;
}

.flashcard-def {
    font-size: .88rem;
    line-height: 1.65;
    overflow-y: auto;
    max-height: 200px;
}

.flashcard-cat {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--brand);
    font-weight: 600;
    margin-bottom: 12px;
}

.fc-swipe-hint {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    text-align: center;
    margin-top: 12px;
}

.fc-rating {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}

.fc-rating .btn {
    flex: 1;
    max-width: 120px;
    min-height: 44px
}

/* ══ ALLGEMEINE BUTTON-POLITUR (alle Bootstrap .btn) ════════ */
.btn {
    transition: transform .1s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn:active {
    transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: background-color .15s ease, border-color .15s ease;
    }

    .btn:active {
        transform: none;
    }
}

/* ══ GLOSSAR ═════════════════════════════════════════════════
   EINZIGE, kanonische Definition - in der Vorversion gab es zwei
   weitere, ältere Duplikate ohne Animation, die diese hier wieder
   überschrieben haben. */
.glossar-letter-header {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--brand);
    padding: 6px 0 2px;
    margin-top: 12px;
    border-bottom: 1px solid var(--bs-border-color);
}

.glossar-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: padding-left .15s ease;
}

@media (hover: hover) {
    .glossar-item:hover {
        padding-left: 6px
    }
}

.glossar-term {
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: 3px
}

.glossar-short {
    font-size: .8rem;
    color: var(--bs-secondary-color);
    line-height: 1.45
}

.glossar-expand {
    display: none;
    margin-top: 10px;
    font-size: .85rem;
    line-height: 1.7;
    overflow: hidden;
}

.glossar-expand.open {
    display: block;
    animation: glossar-reveal .25s cubic-bezier(.16, 1, .3, 1);
}

@keyframes glossar-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .glossar-expand.open {
        animation: none;
    }
}

.glossar-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
}

.glossar-alpha-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s, color .12s;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.glossar-alpha-btn:hover, .glossar-alpha-btn.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* ══ CHATBOT ════════════════════════════════════════════════ */
.chat-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: .88rem;
    line-height: 1.6;
}

.chat-msg.user {
    background: rgba(14, 111, 104, .12);
    border: 1px solid rgba(14, 111, 104, .2);
    align-self: flex-end;
}

.chat-msg.bot {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    align-self: flex-start;
}

.chat-msg.typing {
    opacity: .6;
    font-style: italic;
}

.chat-chip-btn {
    cursor: pointer;
    transition: background-color .1s;
}

@media (hover: hover) {
    .chat-chip-btn:hover {
        background: rgba(14, 111, 104, .2) !important;
    }
}

/* ══ ICB LERNKARTE ══════════════════════════════════════════ */
.icb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 7px;
    margin-bottom: 3px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .12s, border-color .12s;
    font-size: .78rem;
}

.icb-item:hover {
    background: var(--bs-tertiary-bg);
    border-color: currentColor !important;
}

.icb-item.active {
    background: rgba(14, 111, 104, .08);
}

.icb-code {
    font-family: monospace;
    font-size: .68rem;
    flex-shrink: 0;
    font-weight: 600;
}

.icb-name {
    flex-grow: 1;
}

/* ══ TTS ════════════════════════════════════════════════════ */
.tts-btn {
    padding: 4px 8px;
    line-height: 1;
    border-radius: 6px;
}

.tts-btn.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.tts-btn i {
    font-size: .9rem;
}

/* ══ MISC ═══════════════════════════════════════════════════ */
.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%
}

.fade-btn {
    transition: opacity .15s;
    opacity: .75
}

.fade-btn:hover {
    opacity: 1
}

@media (max-width: 575px) {
    .container-xl {
        padding-left: 12px;
        padding-right: 12px
    }

    .q-card {
        padding: 12px 13px
    }

    h5 {
        font-size: 1rem
    }
}

/* ══ EMPTY-STATE ILLUSTRATIONEN ═══════════════════════════════
   Leere Zustände (keine Fragen gefunden, keine Notizen, etc.) wirken
   einladender mit einer dezenten Größe + sanftem Eintritt statt
   sofort hart sichtbarem Text. */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--bs-secondary-color);
    animation: stat-card-in .4s cubic-bezier(.16, 1, .3, 1);
}

.empty-state i {
    font-size: 2.2rem;
    opacity: .4;
    display: block;
    margin-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .empty-state {
        animation: none;
    }
}

/* ══ DASHBOARD DAILY-BANNER: dezenter Akzent-Stripe ═══════════
   Ein farbiger linker Rand statt nur Hintergrundfarbe macht den
   Tages-Hinweis (SR fällig / Fehler warten / etc.) auf den ersten
   Blick fassbarer, ohne ihn lauter zu machen. */
#daily-banner {
    border-left: 4px solid currentColor;
}

/* ══ SKELETON-LOADING (Fragenbibliothek) ═════════════════════
   Platzhalter-Karten mit pulsierendem Schimmer, während die echten
   Fragen geladen werden. Zeigt sofort die Form der kommenden Inhalte,
   statt einer abstrakten Lade-Animation. */
.q-card-skeleton {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--bs-body-bg);
}

.skel-line {
    height: 12px;
    border-radius: 6px;
    margin-bottom: 8px;
    background: linear-gradient(90deg,
    var(--bs-tertiary-bg) 25%, var(--bs-border-color) 37%, var(--bs-tertiary-bg) 63%);
    background-size: 400% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}

.skel-line-wide {
    width: 85%;
}

.skel-line-narrow {
    width: 45%;
    height: 9px;
    margin-bottom: 0;
}

@keyframes skel-shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skel-line {
        animation: none;
        opacity: .6;
    }
}

/* ════════════════════════════════════════════════════════════
   BRAND THEME — Einheitliche Farbabstimmung (Petrol)
   ════════════════════════════════════════════════════════════ */

/* Dark Mode braucht ein helleres Petrol für Text/Icons auf dunklem Grund */
[data-bs-theme="dark"] {
    --brand: #34a89e;
    --brand2: #2b8c84;
    --brand-rgb: 52, 168, 158;
    --c-surface-hover: #1a1b24;
    --c-border-strong: rgba(244, 244, 245, 0.14);
    --c-border-hover: rgba(244, 244, 245, 0.26);
    --c-text-faint: #6f6f78;
}

/* Bootstrap-Primary auf die Markenfarbe mappen */
:root, [data-bs-theme="dark"] {
    --bs-primary: var(--brand);
    --bs-primary-rgb: var(--brand-rgb);
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand2);
}

.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand2);
    --bs-btn-hover-border-color: var(--brand2);
    --bs-btn-active-bg: var(--brand2);
    --bs-btn-active-border-color: var(--brand2);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
}

.badge.bg-primary, .bg-primary {
    background-color: var(--brand) !important;
}

.text-primary {
    color: var(--brand) !important;
}

/* ── FRAGENTEXT IN SERIFE — wie ein Prüfungsbogen ── */
#q-text, #modal-question, .flashcard-term, #fc-front-text {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    line-height: 1.6;
    letter-spacing: .004em;
}

@media (min-width: 768px) {
    #q-text, #modal-question {
        font-size: var(--fs-xl);
    }
}

/* ── FEEDBACK: deutlich grün (richtig) / rot (falsch) ── */
#q-feedback.alert-success,
#q-feedback.alert-danger {
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-left-width: 5px;
    border-radius: var(--radius);
}

#q-feedback.alert-success {
    background: color-mix(in srgb, var(--green) 13%, var(--bs-tertiary-bg));
    border-color: color-mix(in srgb, var(--green) 42%, transparent);
    border-left-color: var(--green);
}

#q-feedback.alert-danger {
    background: color-mix(in srgb, var(--red) 12%, var(--bs-tertiary-bg));
    border-color: color-mix(in srgb, var(--red) 40%, transparent);
    border-left-color: var(--red);
}

/* ── Text NIE abschneiden: Fragen, Optionen und Hilfe immer umbrechen ── */
#q-text, #modal-question, #hint-box, #hint-box *,
#q-feedback, #q-feedback *, .expl-body, .expl-body *,
.option-btn, .option-btn *, .kt-case-body, .kt-case-body * {
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: clip;
}
.option-btn { height: auto !important; max-height: none !important; }

/* ── Ausnahme: Fallbeispiel-Anhang scrollt bewusst INTERN ──
   Die obige overflow:visible-Regel würde den vorgesehenen Innen-Scroll
   (.kt-case-body hat max-height:45vh + overflow:auto im Markup) aushebeln,
   sodass der Text aus dem Kasten in den Frageteil hineinragt. Die höhere
   Spezifität (ID) schlägt die Klassen-Regel, alles andere bleibt unberührt. */
#kt-case-card .kt-case-body {
    overflow: auto !important;
    max-height: 45vh;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ══ RECALL-GATE: "Erst denken, dann Optionen" ═══════════════ */
body.lb-gate-active #q-opts > .option-btn,
body.lb-gate-active #q-opts > div:not(.lb-gate) {
    display: none !important;
}

body.lb-gate-active #btn-check {
    display: none !important;
}

.lb-gate {
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    margin: 8px 0;
    text-align: center;
    background: var(--bs-tertiary-bg);
}

.lb-gate .lb-gate-lead {
    font-size: .85rem;
    color: var(--bs-secondary-color);
    margin-bottom: 12px;
}

.lb-conf-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.lb-conf-btn {
    flex: 1;
    min-width: 110px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.lb-conf-btn:active {
    transform: scale(.97);
}

.lb-conf-btn .lb-conf-sub {
    display: block;
    font-size: .66rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
    margin-top: 2px;
}

@media (hover: hover) {
    .lb-conf-btn:hover {
        border-color: var(--brand);
    }
}

/* Konfidenz-Urteil im Feedback ("Sicher, aber falsch" etc.) */
.lb-conf-verdict {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    margin-top: 8px;
}

.lb-conf-verdict.danger {
    border-color: var(--red);
    color: var(--red);
}

.lb-conf-verdict.good {
    border-color: var(--green);
    color: var(--green);
}

/* ══ MERKHILFE-PANEL (nach falscher Antwort automatisch) ═════ */
.lb-mnemo {
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius-sm);
    background: rgba(var(--brand-rgb), .05);
    padding: 14px 16px;
    margin-top: 12px;
    font-size: .92rem;
    line-height: 1.55;
}

.lb-mnemo .lb-mnemo-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--brand);
    margin-bottom: 6px;
}

.lb-mnemo p:last-child {
    margin-bottom: 0;
}

.lb-mnemo em {
    font-family: var(--font-serif);
}

/* ══ PLAN-VIEW ("Heute") ═════════════════════════════════════ */
.lb-plan-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.lb-ring-wrap {
    position: relative;
    width: 128px;
    height: 128px;
    flex-shrink: 0;
}

.lb-ring-wrap svg {
    transform: rotate(-90deg);
}

.lb-ring-bg {
    fill: none;
    stroke: var(--bs-border-color);
    stroke-width: 3.5;
}

.lb-ring-fill {
    fill: none;
    stroke: var(--brand);
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dasharray .6s cubic-bezier(.16, 1, .3, 1);
}

.lb-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lb-ring-num {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
}

.lb-ring-lbl {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bs-secondary-color);
    margin-top: 3px;
}

.lb-phase-badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 99px;
    padding: 3px 10px;
    margin-bottom: 6px;
}

.lb-plan-days {
    font-size: .8rem;
    color: var(--bs-secondary-color);
}

.lb-plan-days strong {
    color: var(--bs-body-color);
}

.lb-week-strip {
    display: flex;
    gap: 5px;
    margin-top: 14px;
}

.lb-week-cell {
    flex: 1;
    height: 7px;
    border-radius: 99px;
    background: var(--bs-border-color);
}

.lb-week-cell.done {
    background: var(--brand);
}

.lb-week-cell.today {
    background: var(--brand);
    opacity: .45;
}

.lb-plan-task {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-top: 8px;
    background: var(--bs-body-bg);
}

.lb-plan-task i {
    color: var(--brand);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.lb-plan-task .small {
    line-height: 1.35;
}

.lb-plan-task.muted {
    opacity: .55;
}

/* Kompakte "Heute"-Karte oben auf dem Dashboard */
#lb-dash-card {
    cursor: pointer;
}

#lb-dash-card:active {
    transform: scale(.995);
}

/* Diff-Buttons ohne Emoji: ruhiger, gleiche Semantikfarben */
.diff-btn {
    border-radius: var(--radius-sm);
}

/* ════════════════════════════════════════════════════════════
   MERKHILFE v2 — strukturiert: Merksatz als Serifen-Zitat,
   Distraktor-Begründungen als eigener Block. Deutlicher Auftritt,
   damit die Lernhilfe nicht wie eine Fußnote wirkt.
   ════════════════════════════════════════════════════════════ */
.lb-mnemo {
    padding: 16px 18px;
    background: var(--bs-tertiary-bg);
    border-left-width: 4px;
}

.lb-mnemo .lb-mnemo-label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

.lb-mnemo-cached {
    font-size: .62rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 99px;
    padding: 1px 7px;
    margin-left: auto;
}

.lb-mnemo-cached:empty {
    display: none;
}

/* Merksatz: das Herzstück — Serife, größer, mit Zitat-Anführung */
.lb-mnemo-quote {
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.6;
    position: relative;
    padding-left: 26px;
}

.lb-mnemo-quote::before {
    content: '\201E'; /* „ */
    position: absolute;
    left: 0;
    top: -8px;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--brand);
    opacity: .55;
    font-family: var(--font-serif);
}

.lb-mnemo-quote strong {
    color: var(--brand);
}

.lb-mnemo-why-label {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
    margin: 14px 0 6px;
}

.lb-mnemo-why-item {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: .86rem;
    line-height: 1.5;
    padding: 5px 0;
}

.lb-mnemo-why-item + .lb-mnemo-why-item {
    border-top: 1px dashed var(--bs-border-color);
}

.lb-mnemo-why-item i {
    color: var(--red);
    font-size: .7rem;
    margin-top: 5px;
    flex-shrink: 0;
}

/* ── FEEDBACK deutlicher: Status als klare Kopfzeile ── */
#q-feedback {
    font-size: .95rem;
    padding: 10px 12px;
    margin-bottom: 0;            /* kein "Schweben" unter der Box (Bootstrap-Alert-Default aus) */
    border-radius: var(--radius, 12px);
}

#q-feedback .qfb-content > strong:first-child {
    display: block;
    font-size: 1.02rem;
    margin-bottom: 4px;
}

#q-feedback.alert-success .qfb-content > strong:first-child {
    color: var(--green);
}

#q-feedback.alert-danger .qfb-content > strong:first-child {
    color: var(--red);
}

#q-feedback .qfb-content > strong:first-child {
    padding-right: 4px;
}

/* ASCII-Grafik/Matrizen aus KI-Texten ausgerichtet darstellen */
.ascii-art {
    overflow-x: auto;
    font-family: var(--bs-font-monospace);
    font-size: .78rem;
    line-height: 1.25;
    white-space: pre;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 8px 0;
}

/* ══ PRÜFUNGSREIFE v2: Komponenten-Balken, Fokus-Chips, Delta ══ */
.lb-comps {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lb-comp {
    display: grid;
    grid-template-columns: 150px 1fr 34px;
    align-items: center;
    gap: 10px;
    font-size: .76rem;
}

.lb-comp-name {
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-comp-w {
    color: var(--bs-secondary-color);
    font-size: .62rem;
}

.lb-comp-track {
    height: 7px;
    border-radius: 99px;
    background: var(--bs-border-color);
    overflow: hidden;
}

.lb-comp-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--brand);
    border-radius: 99px;
    transition: width .8s cubic-bezier(.16, 1, .3, 1);
}

.lb-comp-val {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lb-comp-na {
    grid-column: 2 / 4;
    color: var(--bs-secondary-color);
    font-size: .68rem;
    font-style: italic;
}

@media (max-width: 480px) {
    .lb-comp {
        grid-template-columns: 112px 1fr 30px;
        font-size: .7rem;
    }
}

.lb-delta {
    display: inline-block;
    margin-top: 5px;
    font-size: .64rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.lb-delta.up {
    border-color: var(--green);
    color: var(--green);
}

.lb-delta.down {
    border-color: var(--red);
    color: var(--red);
}

.lb-ce-row {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.lb-ce-label {
    flex-basis: 100%;
    font-size: .66rem;
    color: var(--bs-secondary-color);
}

.lb-ce-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 600;
    padding: 5px 11px;
    min-height: 32px;
    border-radius: 99px;
    border: 1.5px solid var(--red);
    color: var(--red);
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}

.lb-ce-chip:active {
    transform: scale(.96);
}

@media (hover: hover) {
    .lb-ce-chip:hover {
        background: var(--red);
        color: #fff;
    }
}

/* ══ MEILENSTEINE + TOAST ══ */
.lb-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lb-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    padding: 6px 11px;
    border-radius: 99px;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    opacity: .55;
}

.lb-badge.earned {
    opacity: 1;
    border-color: var(--brand);
    color: var(--brand);
    background: rgba(var(--brand-rgb), .07);
    font-weight: 600;
}

.lb-toast {
    position: fixed;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom));
    transform: translate(-50%, 16px);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--brand);
    border-radius: 99px;
    padding: 10px 18px;
    font-size: .82rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    opacity: 0;
    transition: opacity .35s, transform .35s cubic-bezier(.16, 1, .3, 1);
    z-index: 2000;
    max-width: 92vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.lb-toast .bi {
    color: var(--brand);
}

/* ══ ERKLÄRVIDEO-PANEL ══ */
.lb-video-panel {
    margin-top: 12px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
}

.lb-video-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    background: transparent;
    border: none;
    color: var(--brand);
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.lb-video-toggle:active {
    background: rgba(var(--brand-rgb), .06);
}

.lb-video-chevron {
    font-size: .75rem;
    transition: transform .15s;
}

.lb-video-body {
    padding: 0 14px 14px;
}

/* ══ DIAGRAMM/ILLUSTRATION ZUR FRAGE ══ */
.lb-image-panel {
    margin: 10px 0 14px;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
}

.lb-image-panel img {
    display: block;
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    background: #fff;
}

.lb-image-caption {
    padding: 7px 12px;
    font-size: .68rem;
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
}

.lb-asset-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bs-secondary-color);
    padding: 8px 12px 0;
    background: #fff;
}

/* ════════════════════════════════════════════════════════════
   DESIGN-LAYER 2026 · "Lernen & Nachschlagen"
   Ziel: Lern-Assistent und Glossar sollen wie ein durchdachtes
   Fach-Nachschlagewerk wirken — nicht wie generische Emoji-Kacheln.
   Eine Akzentfarbe (Petrol), klare Typo-Hierarchie, Icon statt Emoji,
   ruhige Flächen, saubere Touch-Ziele. Token-basiert (--brand etc.),
   damit Hell/Dunkel automatisch mitziehen.
   ════════════════════════════════════════════════════════════ */

/* ── LERN-ASSISTENT: Kopf ──────────────────────────────────── */
.learn-head-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--brand);
    margin-bottom: 4px;
}

.learn-head-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.learn-head-sub {
    font-size: .84rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
    margin-top: 6px;
    max-width: 54ch;
}

/* ── LERN-ASSISTENT: freie Frage ───────────────────────────── */
.learn-ask-label {
    display: block;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
    margin-bottom: 8px;
}

.learn-ask-row {
    display: flex;
    gap: 8px;
}

.learn-ask-input {
    flex: 1;
    min-height: 48px;
    padding: 10px 14px;
    border: 1.5px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    font-family: var(--font);
    font-size: .95rem;
    transition: border-color .15s, background-color .15s;
}

.learn-ask-input::placeholder {
    color: var(--bs-secondary-color);
    opacity: .8;
}

.learn-ask-input:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--bs-body-bg);
    box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .35);
}

.learn-ask-btn {
    min-height: 48px;
    padding-inline: 16px;
    white-space: nowrap;
}

/* ── LERN-ASSISTENT: Themen-Raster ─────────────────────────── */
.learn-section-label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-secondary-color);
    margin: 4px 2px 10px;
}

.learn-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 100%;
}
@media (min-width: 768px) {
    .learn-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}
/* Grid-Kinder dürfen schmaler als ihr Inhalt werden (sonst überlaufen sie) */
.learn-grid > .learn-topic { min-width: 0; }

/* Eine Themen-Karte: Icon-Plakette + Titel + Unterzeile + Chevron.
   Kein Emoji, kein bunter Rand — nur ein ruhiger Akzent beim Hover. */
.learn-topic {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s, background-color .15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.learn-topic:active {
    transform: scale(.98);
}

.learn-topic:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

@media (hover: hover) {
    .learn-topic:hover {
        border-color: var(--brand);
        box-shadow: 0 3px 16px rgba(var(--brand-rgb), .12);
    }

    .learn-topic:hover .learn-topic-chev {
        transform: translateX(3px);
        opacity: 1;
    }

    .learn-topic:hover .learn-topic-icon {
        background: var(--brand);
        color: #fff;
    }
}

.learn-topic-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand);
    font-size: 1.25rem;
    transition: background-color .15s, color .15s;
}

.learn-topic-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.learn-topic-title {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.learn-topic-sub {
    font-size: .72rem;
    color: var(--bs-secondary-color);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learn-topic-chev {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    font-size: .8rem;
    opacity: .5;
    transition: transform .15s, opacity .15s;
}

/* Erklärungs-Fließtext etwas luftiger */
.learn-content {
    font-size: .92rem;
    line-height: 1.7;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}
.learn-content strong {
    color: var(--bs-emphasis-color);
}
/* Breite Tabellen scrollen INNERHALB des Contents statt die Seite zu sprengen */
.learn-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
    font-size: .82rem;
    margin: 10px 0;
}
.learn-content th,
.learn-content td {
    padding: 6px 10px;
    border: 1px solid var(--bs-border-color);
    white-space: nowrap;
    text-align: left;
}
.learn-content pre,
.learn-content code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.learn-content img { max-width: 100%; height: auto; }
/* Der Container drumherum darf ebenfalls nicht überlaufen */
#learn-content-card { max-width: 100%; overflow-x: hidden; }


/* ── GLOSSAR: Kopf & Suche ─────────────────────────────────── */
#view-glossar .glossar-alpha-nav {
    margin-bottom: 14px;
}

/* Ein Glossar-Eintrag: klarer Begriff, Kategorie als dezente Kapsel
   (statt lauter grauer Badge), ruhiger Auf-/Zuklapp-Affordanz.
   Überschreibt bewusst die ältere .glossar-item-Definition weiter oben
   (gleiche Spezifität, später in der Datei -> gewinnt). */
.glossar-item {
    padding: 14px;
    margin-bottom: 8px;
    border: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--bs-body-bg);
    transition: border-color .15s, border-left-color .15s, box-shadow .15s;
}

@media (hover: hover) {
    .glossar-item:hover {
        border-left-color: var(--brand);
        padding-left: 14px; /* neutralisiert die alte padding-left-Verschiebung */
        box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    }
}

.glossar-term {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bs-emphasis-color);
    margin-bottom: 4px;
}

/* Kategorie-Badge (vom JS als .badge.bg-secondary gerendert) in eine
   ruhige Petrol-Kapsel verwandeln — kein grauer Klotz mehr. */
.glossar-term .badge.bg-secondary {
    background: rgba(var(--brand-rgb), .1) !important;
    color: var(--brand) !important;
    font-weight: 600;
    letter-spacing: .02em;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: .6rem !important;
    text-transform: uppercase;
    align-self: center;
}

.glossar-short {
    font-size: .82rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

.glossar-expand {
    margin-top: 0;
    font-size: .88rem;
    line-height: 1.75;
}

.glossar-expand.open {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--bs-border-color);
}

/* Verlinkte Begriffe im Fließtext: dezent, nicht schreiend */
.glossary-link {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
    color: var(--brand);
}

/* ── Reduced Motion respektieren ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .learn-topic, .learn-topic-icon, .learn-topic-chev,
    .glossar-item {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   MUSTERLÖSUNG — strukturierte Blöcke
   An app.css anhängen. Funktioniert in Hell- und Dunkelmodus, weil
   ausschließlich Bootstrap-5.3-Variablen (--bs-*) und --brand genutzt
   werden — keine festen Farbwerte.
   ══════════════════════════════════════════════════════════════ */

.ss-wrap {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.ss-block {
    border-radius: .55rem;
}

/* Abschnittsüberschrift: klein, gesperrt, zurückhaltend — die Hierarchie
   entsteht über die Kästen, nicht über große Schrift. */
.ss-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .65;
    margin-bottom: .35rem;
}

.ss-text {
    font-size: .92rem;
    line-height: 1.75;
}

/* fmtMd erzeugt für Absätze <div style="line-height:1.8"> — hier bekommen
   diese Absätze endlich einen Abstand nach unten. */
.ss-text > div[style*="line-height"] {
    margin-bottom: .5rem;
}

.ss-text > div[style*="line-height"]:last-child {
    margin-bottom: 0;
}

.ss-text ul {
    margin: .25rem 0 .5rem;
    padding-left: 1.15rem;
}

.ss-text li {
    margin-bottom: .28rem;
}

/* ── Kernaussage: der Einstieg, farbig abgesetzt ─────────────── */
.ss-kern {
    border-left: 3px solid var(--brand, var(--bs-primary));
    background: rgba(var(--bs-primary-rgb), .07);
    padding: .65rem .85rem;
}

.ss-kern-text {
    font-size: .96rem;
    line-height: 1.7;
    font-weight: 500;
}

.ss-kern-text > div[style*="line-height"]:last-child {
    margin-bottom: 0;
}

/* ── Aufbau der Antwort: nummerierte Schritte ────────────────── */
.ss-steps {
    padding: .1rem 0;
}

ol.ss-steplist {
    list-style: none;
    counter-reset: ss-step;
    margin: 0;
    padding: 0;
}

ol.ss-steplist > li {
    counter-increment: ss-step;
    position: relative;
    padding-left: 2rem;
    margin-bottom: .5rem;
    font-size: .92rem;
    line-height: 1.65;
}

ol.ss-steplist > li::before {
    content: counter(ss-step);
    position: absolute;
    left: 0;
    top: .08rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), .15);
    color: var(--brand, var(--bs-primary));
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

ol.ss-steplist > li:last-child {
    margin-bottom: 0;
}

/* ── Merksatz: das visuelle Highlight des Panels ─────────────── */
.ss-merk {
    background: rgba(var(--bs-warning-rgb), .1);
    border: 1px solid rgba(var(--bs-warning-rgb), .3);
    padding: .7rem .85rem;
}

.ss-merk-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
    margin-bottom: .3rem;
}

.ss-merk-quote {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.6;
    font-weight: 600;
}

/* ── Stolperfallen ───────────────────────────────────────────── */
.ss-warn {
    background: rgba(var(--bs-danger-rgb), .07);
    border-left: 3px solid rgba(var(--bs-danger-rgb), .5);
    padding: .6rem .85rem;
}

.ss-warn-item {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .88rem;
    line-height: 1.6;
    margin-bottom: .3rem;
}

.ss-warn-item:last-child {
    margin-bottom: 0;
}

.ss-warn-item > i {
    color: var(--bs-danger);
    font-size: .68rem;
    margin-top: .38rem;
    flex-shrink: 0;
}

/* ── Prüfungstipp ────────────────────────────────────────────── */
.ss-tip {
    background: rgba(var(--bs-info-rgb), .08);
    border-left: 3px solid rgba(var(--bs-info-rgb), .5);
    padding: .6rem .85rem;
}

/* ── Neutraler Abschnitt ─────────────────────────────────────── */
.ss-plain {
    padding: .1rem 0;
}

/* Trennlinie zwischen neutralen Abschnitten, damit auch ohne Farbe eine
   Gliederung sichtbar bleibt. */
.ss-plain + .ss-plain {
    border-top: 1px solid var(--bs-border-color);
    padding-top: .7rem;
}

/* ── "Neu generieren" (optional) ─────────────────────────────── */
.ss-regen {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .4rem;
    padding-top: .6rem;
    border-top: 1px solid var(--bs-border-color);
}

.ss-regen-hint {
    font-size: .68rem;
    color: var(--bs-secondary-color);
}

/* Tabellen aus fmtMd innerhalb eines Blocks nicht zu breit wirken lassen */
.ss-block .table {
    margin-bottom: .25rem;
}

@media (max-width: 575.98px) {
    .ss-merk-quote {
        font-size: .95rem;
    }

    .ss-text,
    ol.ss-steplist > li {
        font-size: .89rem;
    }
}

/* ── Musterantwort: das Herzstück, genau dieser Text bringt die Punkte ── */
.ss-answer {
    border-left: 3px solid var(--brand, var(--bs-primary));
    background: rgba(var(--bs-primary-rgb), .06);
    padding: .7rem .9rem;
}

.ss-answer-text {
    font-size: .97rem;
    line-height: 1.8;
}

.ss-answer-text > div[style*="line-height"] {
    margin-bottom: .6rem;
}

.ss-answer-text > div[style*="line-height"]:last-child {
    margin-bottom: 0;
}

.ss-answer-text ul,
.ss-answer-text ol {
    margin: .3rem 0 .5rem;
    padding-left: 1.2rem;
}

.ss-answer-text li {
    margin-bottom: .35rem;
}

/* ── Kernpunkte: was der Bewerter abhakt ─────────────────────── */
.ss-check {
    padding: .1rem 0;
}

.ss-check-item {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    font-size: .88rem;
    line-height: 1.6;
    margin-bottom: .28rem;
}

.ss-check-item:last-child {
    margin-bottom: 0;
}

.ss-check-item > i {
    color: var(--bs-success);
    font-size: .8rem;
    margin-top: .28rem;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .ss-answer-text {
        font-size: .93rem;
    }
}

/* ══════════════════════════════════════════════════════════════
   IDEAL LERNEN — CE-Board, Nach-oben-Knopf, Modus-Karte
   ══════════════════════════════════════════════════════════════ */

/* ── Kopfzeile: erreichte Kompetenzelemente ─────────────────── */
.ce-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.ce-count-big {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand, var(--bs-primary));
}

.ce-count-sub {
    font-size: .78rem;
    color: var(--bs-secondary-color);
}

.ce-verdict {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.ce-verdict.ce-pass {
    color: var(--bs-success);
}

.ce-verdict.ce-fail {
    color: var(--bs-warning);
}

/* Fortschritt bis zur Bestehensgrenze, mit Markierung bei 100 % (= 23 CE) */
.ce-bar {
    position: relative;
    height: 7px;
    border-radius: 4px;
    background: var(--bs-secondary-bg);
    overflow: hidden;
    margin-bottom: .45rem;
}

.ce-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--brand, var(--bs-primary));
    transition: width .4s ease;
}

.ce-bar-mark {
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--bs-success);
}

.ce-legend-note {
    font-size: .68rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
    margin-bottom: .7rem;
}

/* ── Raster der 28 Kompetenzelemente ─────────────────────────── */
.ce-area {
    margin-bottom: .6rem;
}

.ce-area-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: .3rem;
}

.ce-area-count {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.ce-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ce-dot {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid transparent;
    padding: 0;
    font-size: .62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: transform .12s ease;
}

.ce-dot:hover {
    transform: translateY(-2px);
}

.ce-dot-code {
    opacity: .85;
}

/* Statusfarben — bewusst nicht nur Rot/Grün: die Zwischenstufen sind
   die eigentlich handlungsrelevanten. */
.ce-ok {
    background: rgba(var(--bs-success-rgb), .22);
    color: var(--bs-success-text-emphasis, var(--bs-success));
    border-color: rgba(var(--bs-success-rgb), .35);
}

.ce-stale {
    background: rgba(var(--bs-success-rgb), .1);
    color: var(--bs-success);
    border-color: rgba(var(--bs-success-rgb), .3);
    border-style: dashed;
}

.ce-shaky {
    background: rgba(var(--bs-warning-rgb), .22);
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
    border-color: rgba(var(--bs-warning-rgb), .4);
}

.ce-thin {
    background: rgba(var(--bs-info-rgb), .16);
    color: var(--bs-info-text-emphasis, var(--bs-info));
    border-color: rgba(var(--bs-info-rgb), .3);
}

.ce-gap {
    background: rgba(var(--bs-danger-rgb), .18);
    color: var(--bs-danger-text-emphasis, var(--bs-danger));
    border-color: rgba(var(--bs-danger-rgb), .35);
}

.ce-none {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
}

/* ── Größter Hebel ───────────────────────────────────────────── */
.ce-next {
    border-top: 1px solid var(--bs-border-color);
    padding-top: .55rem;
    margin-top: .3rem;
}

.ce-next-head {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: .3rem;
}

.ce-next-row {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    font-size: .78rem;
    margin-bottom: .2rem;
}

.ce-next-name {
    font-weight: 500;
}

.ce-next-hint {
    margin-left: auto;
    font-size: .7rem;
    color: var(--bs-secondary-color);
    text-align: right;
}

/* ── Modus-Karte hervorheben ─────────────────────────────────── */
.mode-card.mode-ideal {
    border-color: rgba(var(--bs-primary-rgb), .45);
}

/* ── Nach-oben-Knopf ─────────────────────────────────────────── */
.scroll-top-btn {
    position: fixed;
    right: 16px;
    /* über der unteren Navigationsleiste, inkl. iPhone-Safe-Area */
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1030;
}

.scroll-top-btn.show {
    opacity: .95;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    opacity: 1;
    border-color: var(--brand, var(--bs-primary));
    color: var(--brand, var(--bs-primary));
}

/* Am Desktop gibt es keine untere Leiste — Knopf tiefer setzen. */
@media (min-width: 768px) {
    .scroll-top-btn {
        bottom: 24px;
        right: 24px;
    }
}

/* ── Prüfungsergebnis: nachzubessernde Kompetenzelemente ─────── */
.exam-ce-todo {
    background: rgba(var(--bs-warning-rgb), .1);
    border: 1px solid rgba(var(--bs-warning-rgb), .3);
    border-radius: .5rem;
    padding: .6rem .8rem;
    text-align: left;
}

.exam-ce-todo-head {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
    margin-bottom: .35rem;
}

.exam-ce-todo-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    padding: .1rem 0;
}

/* ══════════════════════════════════════════════════════════════
   PRÜFUNGSDISZIPLIN — Zähler, Meldung, Bericht
   ══════════════════════════════════════════════════════════════ */

.exam-focus-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-right: .6rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    font-size: .7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.exam-focus-icon {
    font-size: 1.8rem;
    color: var(--bs-warning);
    line-height: 1;
    margin-bottom: .5rem;
}

.exam-focus-toast {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 10px);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .5rem .9rem;
    font-size: .8rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 1080;
    pointer-events: none;
}

.exam-focus-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ── Bericht im Ergebnisschirm ───────────────────────────────── */
.exam-focus-report {
    margin-top: .8rem;
    padding: .65rem .85rem;
    border-radius: .5rem;
    text-align: left;
    background: rgba(var(--bs-warning-rgb), .1);
    border: 1px solid rgba(var(--bs-warning-rgb), .3);
}

.exam-focus-report.clean {
    background: rgba(var(--bs-success-rgb), .09);
    border-color: rgba(var(--bs-success-rgb), .28);
    color: var(--bs-success-text-emphasis, var(--bs-success));
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.exam-focus-report-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
    margin-bottom: .3rem;
}

.exam-focus-report-main {
    font-size: .9rem;
    font-weight: 600;
}

.exam-focus-report-sub {
    font-size: .76rem;
    color: var(--bs-secondary-color);
    margin-top: .15rem;
}

.exam-focus-report-note {
    font-size: .68rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
    margin-top: .4rem;
}

/* ── Verbindungsstreifen (api_client_patch.js) ───────────────── */
.net-banner {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2000;
    padding: .35rem .75rem;
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
}

.net-banner.off {
    background: var(--bs-danger);
}

.net-banner.on {
    background: var(--bs-success);
}

/* -- Top Banner -- */


.gratis-banner {
    background: linear-gradient(90deg, #0e6f68, #12a89b);
    color: #fff;
    font-size: .9rem
}

.gratis-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem
}

.gratis-banner-icon {
    font-size: 1.15rem;
    flex: 0 0 auto
}

.gratis-banner-text {
    flex: 1 1 auto;
    line-height: 1.35
}

.gratis-banner-text strong {
    font-weight: 700
}

.gratis-banner-link {
    color: #fff;
    text-decoration: underline;
    white-space: nowrap;
    font-weight: 600
}

.gratis-banner-link:hover {
    color: #fff;
    opacity: .85
}

.gratis-banner-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: #fff;
    opacity: .85;
    padding: .15rem .4rem;
    border-radius: .35rem;
    cursor: pointer;
    line-height: 1
}

.gratis-banner-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .18)
}

@media (max-width: 575px) {
    .gratis-banner {
        font-size: .82rem
    }

    .gratis-banner-inner {
        padding: .45rem .7rem
    }
}


.gratis-hero {
    background: linear-gradient(90deg, #0e6f68, #12a89b);
    color: #fff;
}

.gratis-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
}


/* ═══ Dashboard-Polish (an app.css anhängen) ═══════════════════════ */
/* ── Modus-Kacheln: klare Auswahl + hochwertigeres Verhalten ─────────── */
#view-dashboard .mode-card{
    border:1px solid var(--bs-border-color);
    background:var(--bs-tertiary-bg);
    border-radius:var(--radius,12px);
    padding:12px 8px;
    text-align:center;
    cursor:pointer;
    transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
    position:relative;
    height:100%;
}
#view-dashboard .mode-card:hover{
    transform:translateY(-2px);
    border-color:var(--brand);
    box-shadow:0 6px 18px rgba(0,0,0,.10);
}
/* aktive Auswahl — deckt beide möglichen Klassen ab (selected/active) */
#view-dashboard .mode-card.selected,
#view-dashboard .mode-card.active{
    border:2px solid var(--brand);
    background:rgba(var(--brand-rgb),.10);
    box-shadow:0 0 0 3px rgba(var(--brand-rgb),.15);
}
#view-dashboard .mode-card.selected::after,
#view-dashboard .mode-card.active::after{
    content:"\2713";
    position:absolute;top:6px;right:8px;
    color:var(--brand);font-weight:800;font-size:.9rem;
}
#view-dashboard .mode-card .mode-icon{font-size:1.5rem;line-height:1}
#view-dashboard .mode-card .mode-title{font-weight:600;font-size:.82rem;margin-top:4px}
#view-dashboard .mode-card .mode-count{
    display:inline-block;margin-top:4px;font-size:.66rem;
    color:var(--bs-secondary-color);
}

/* ── „Alles üben“ klar als NEBENoption (nicht mehr konkurrierend) ────── */
#view-dashboard .alert:has(button[onclick*="startAlfatraining"]){
    background:var(--bs-tertiary-bg) !important;
    border:1px dashed var(--bs-border-color) !important;
}
#view-dashboard button[onclick*="startAlfatraining"]{
    --bs-btn-color:var(--bs-secondary-color);
    --bs-btn-border-color:var(--bs-border-color);
    --bs-btn-hover-bg:var(--bs-secondary-bg);
    --bs-btn-hover-border-color:var(--bs-secondary-color);
    font-weight:500;
}

/* ── Auswahl-Zusammenfassung direkt über dem Start ──────────────────── */
#view-dashboard #start-summary{
    display:flex;align-items:center;gap:8px;
    font-size:.85rem;font-weight:600;
    color:var(--bs-body-color);
    padding:10px 12px;margin-bottom:10px;
    border-radius:var(--radius-sm,10px);
    background:rgba(var(--brand-rgb),.08);
    border:1px solid rgba(var(--brand-rgb),.20);
}
#view-dashboard #start-summary i{color:var(--brand)}
#view-dashboard #start-summary.is-empty{
    color:var(--bs-secondary-color);
    background:var(--bs-tertiary-bg);
    border:1px dashed var(--bs-border-color);
}
#view-dashboard #start-summary.is-empty i{color:var(--bs-secondary-color)}

/* ── Die EINE Primäraktion: unübersehbar + immer erreichbar ─────────── */
#view-dashboard div:has(> #btn-start-quiz){
    align-items:stretch;
}
#view-dashboard #btn-start-quiz{
    background:linear-gradient(135deg, var(--brand), var(--brand2));
    border:none;
    color:#fff;
    font-size:1.05rem;
    font-weight:700;
    letter-spacing:.01em;
    padding:.7rem 1.4rem;
    border-radius:var(--radius,12px);
    box-shadow:0 8px 22px rgba(var(--brand-rgb),.35);
    transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#view-dashboard #btn-start-quiz:hover{
    transform:translateY(-1px);
    filter:brightness(1.05);
    box-shadow:0 10px 26px rgba(var(--brand-rgb),.45);
}
#view-dashboard #btn-start-quiz:active{transform:translateY(0)}
#view-dashboard #btn-start-quiz.pulse{animation:startPulse .5s ease}
@keyframes startPulse{
    0%{box-shadow:0 8px 22px rgba(var(--brand-rgb),.35)}
    50%{box-shadow:0 0 0 8px rgba(var(--brand-rgb),.18), 0 8px 22px rgba(var(--brand-rgb),.35)}
    100%{box-shadow:0 8px 22px rgba(var(--brand-rgb),.35)}
}

/* ── Mobil: Start als feste Aktionsleiste direkt am unteren Bildschirmrand ─ */
@media (max-width: 767.98px){
    #view-dashboard .quiz-start-row,
    #view-dashboard div:has(> #btn-start-quiz){
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1025 !important;
        background: var(--bs-body-bg) !important;
        margin: 0 !important;
        padding: 8px 16px calc(8px + var(--safe-bottom, 0px)) !important;
        border-top: 1px solid var(--bs-border-color) !important;
        box-shadow: 0 -6px 20px rgba(0,0,0,.16) !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
    }
    #view-dashboard .quiz-start-controls {
        flex: 1 1 100% !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    #view-dashboard #btn-start-quiz{
        flex: 1 1 100% !important;
        width: 100% !important;
        order: 5 !important;              /* Start unter Anzahl/Typ */
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        min-height: 44px !important;
    }
    #view-dashboard #start-summary{
        position: static !important;
    }
    /* Ausreichend Abstand am Ende des Dashboards, damit keine Inhalte verdeckt werden */
    #view-dashboard {
        padding-bottom: calc(115px + var(--safe-bottom, 0px)) !important;
    }
}

/* ── etwas mehr Ruhe/Wertigkeit in den Statistik-Kacheln ───────────── */
#view-dashboard .stat-card{
    border-radius:var(--radius-sm,10px);
    background:var(--bs-tertiary-bg);
    border:1px solid var(--bs-border-color);
    transition:border-color .12s ease;
}
#view-dashboard .stat-card:hover{border-color:var(--brand)}

/* ── Gesperrter Start (kein Modus gewählt) ─────────────────────────── */
#view-dashboard #btn-start-quiz.is-locked,
#view-dashboard #btn-start-quiz:disabled{
    background:var(--bs-secondary-bg);
    color:var(--bs-secondary-color);
    box-shadow:none;
    cursor:not-allowed;
    filter:none;
    transform:none;
    opacity:.85;
}
#view-dashboard #start-summary.shake{animation:startSummaryShake .45s ease}
@keyframes startSummaryShake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-5px)}
    40%{transform:translateX(5px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(4px)}
}


/* ── Fragetext: mehr Ruhe und Lesbarkeit ───────────────────────────── */

/* ── Fragetext: mehr Ruhe und Lesbarkeit ───────────────────────────── */
#view-quiz #q-text{
    font-size:1.12rem !important;
    line-height:1.6 !important;
    letter-spacing:.005em;
}
#view-quiz #q-hint{
    display:inline-block;
    background:var(--bs-tertiary-bg);
    border:1px solid var(--bs-border-color);
    border-radius:99px;
    padding:2px 10px;
    font-size:.72rem;
}

/* ── Antwortoptionen als premium Karten mit A/B/C/D-Badge ──────────── */
#view-quiz #q-opts{counter-reset:opt}
#view-quiz .option-btn{
    counter-increment:opt;
    position:relative;
    display:block;
    width:100%;
    text-align:left;
    padding:14px 16px 14px 52px;      /* Platz links für den Buchstaben */
    margin-bottom:10px;
    border:1.5px solid var(--bs-border-color);
    border-radius:var(--radius,12px);
    background:var(--bs-tertiary-bg);
    color:var(--bs-body-color);
    font-size:.95rem;
    line-height:1.45;
    transition:transform .1s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
#view-quiz .option-btn::before{
    content:counter(opt, upper-alpha);
    position:absolute;
    left:12px;top:50%;
    transform:translateY(-50%);
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    border-radius:8px;
    background:var(--bs-secondary-bg);
    border:1px solid var(--bs-border-color);
    color:var(--bs-secondary-color);
    font-weight:700;font-size:.85rem;
    transition:all .12s ease;
}
#view-quiz .option-btn:hover{
    border-color:var(--brand);
    transform:translateY(-1px);
    box-shadow:0 4px 14px rgba(0,0,0,.08);
}
#view-quiz .option-btn:hover::before{
    border-color:var(--brand);
    color:var(--brand);
}
/* gewählt (vor dem Prüfen) */
#view-quiz .option-btn.selected{
    border-color:var(--brand);
    background:rgba(var(--brand-rgb),.08);
    box-shadow:0 0 0 3px rgba(var(--brand-rgb),.14);
}
#view-quiz .option-btn.selected::before{
    background:var(--brand);
    border-color:var(--brand);
    color:#fff;
}
/* richtig gewählt */
#view-quiz .option-btn.correct{
    border-color:var(--green);
    background:rgba(34,197,94,.12);
    color:var(--bs-body-color);
}
#view-quiz .option-btn.correct::before{
    background:var(--green);border-color:var(--green);color:#fff;
}
/* falsch gewählt */
#view-quiz .option-btn.wrong{
    border-color:var(--red);
    background:rgba(239,68,68,.12);
}
#view-quiz .option-btn.wrong::before{
    background:var(--red);border-color:var(--red);color:#fff;
}
/* richtig, aber vergessen zu wählen */
#view-quiz .option-btn.missed{
    border-color:var(--yellow);
    background:rgba(245,158,11,.12);
    border-style:dashed;
}
#view-quiz .option-btn.missed::before{
    background:var(--yellow);border-color:var(--yellow);color:#111;
}
/* die angehängten Ergebnis-Marker (✅/❌/⚠️ bzw. „Richtig/Falsch“)
   sauber rechts halten – ohne den Antworttext zu überdecken. */
#view-quiz .option-btn{ padding-right:16px; }           /* Standard: kein Marker */
#view-quiz .option-btn:has(> span.float-end){
    padding-right:74px;                                  /* Platz für den Marker reservieren */
}
#view-quiz .option-btn > span.float-end{
    float:none !important;
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    margin:0 !important;
    max-width:64px;
    text-align:right;
    font-size:.72rem;line-height:1.1;
    white-space:normal;
    display:inline-flex;align-items:center;justify-content:flex-end;gap:2px;
}
/* Fallback für Browser ohne :has() – reserviert generell etwas Platz rechts,
   sobald die Optionen beantwortet sind. */
#view-quiz #q-opts.answered .option-btn{ padding-right:74px; }
/* nach dem Prüfen: Hover-Anheben abschalten, damit nichts „wackelt“ */
#view-quiz #q-opts.answered .option-btn{pointer-events:none}
#view-quiz #q-opts.answered .option-btn:hover{transform:none;box-shadow:none}

/* ── Feedback-Box: sanft einblenden ────────────────────────────────── */
#view-quiz #q-feedback:not(.d-none){
    animation:qfbIn .18s ease;
    border-radius:var(--radius,12px);
}
@keyframes qfbIn{from{opacity:0}to{opacity:1}}

/* ── Fortschrittsbalken etwas markanter ────────────────────────────── */
#view-quiz .prog{
    background:var(--bs-secondary-bg);
    border-radius:99px;
    overflow:hidden;
}
#view-quiz .prog-bar{
    background:linear-gradient(90deg, var(--brand), var(--brand2));
    transition:width .4s cubic-bezier(.4,0,.2,1);
}

/* ── Ausklapp-Panels (Erklärung/Musterlösung/Notiz) ruhiger & einheitlich ── */
#view-quiz .expl-panel{
    border:1px solid var(--bs-border-color);
    border-radius:var(--radius,12px);
    background:var(--bs-tertiary-bg);
    overflow:hidden;
}
#view-quiz .expl-header{
    padding:10px 14px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;
    transition:background .12s ease;
}
#view-quiz .expl-header:hover{background:var(--bs-secondary-bg)}
#view-quiz .expl-body{padding:0 14px 14px}

/* ── Schwierigkeits-Buttons als gleichwertige Segmente ─────────────── */
#view-quiz #diff-section .d-flex{gap:8px}
#view-quiz .diff-btn{
    flex:1;
    border-radius:var(--radius-sm,10px);
    border:1.5px solid var(--bs-border-color);
    background:var(--bs-tertiary-bg);
    padding:8px;
    font-size:.85rem;font-weight:600;
    transition:all .12s ease;
}
#view-quiz .diff-btn:hover{transform:translateY(-1px)}
#view-quiz .diff-btn.easy:hover{border-color:var(--green);color:var(--green)}
#view-quiz .diff-btn.medium:hover{border-color:var(--yellow);color:var(--yellow)}
#view-quiz .diff-btn.hard:hover{border-color:var(--red);color:var(--red)}

/* ── Aktionsleiste (Prüfen/Nächste) — auf dem Handy immer erreichbar ── */
#view-quiz #quiz-actions .btn{border-radius:var(--radius-sm,10px);font-weight:600}
#view-quiz #btn-check{
    background:linear-gradient(135deg, var(--brand), var(--brand2));
    border:none;color:#fff;
    box-shadow:0 6px 18px rgba(var(--brand-rgb),.32);
    padding-inline:1.4rem;
}
#view-quiz #btn-check:hover{filter:brightness(1.05);transform:translateY(-1px)}
/* Der fruehere v1-Quizblock steht jetzt weiter unten als "MOBIL v3". */




#course-lesson-body { max-width: 100%; overflow-x: hidden; overflow-wrap: break-word; word-break: break-word; }
#course-lesson-body table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-collapse: collapse; font-size: .82rem; margin: 10px 0;
}
#course-lesson-body th, #course-lesson-body td {
    padding: 6px 10px; border: 1px solid var(--bs-border-color); white-space: nowrap;
}
#course-lesson-body pre, #course-lesson-body code {
    max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}


/* Dashboard Start-Zeile: mobil Anzahl+Typ nebeneinander, Button darunter */
.quiz-start-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.quiz-start-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.quiz-count-input { width: 72px; flex-shrink: 0; }
.q-type-select { flex: 1 1 auto; min-width: 0; }   /* Dropdown füllt den Rest der Zeile */
.quiz-start-btn { flex-shrink: 0; }

/* Mobil: Controls in einer Reihe, Button volle Breite darunter */
@media (max-width: 575px) {
    .quiz-start-controls { flex: 1 1 100%; }
    .quiz-start-btn { flex: 1 1 100%; width: 100%; }
}
/* Desktop: alles in einer Reihe, Dropdown nicht übermäßig breit */
@media (min-width: 576px) {
    .q-type-select { flex: 0 1 auto; max-width: 220px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGNSYSTEM — Tiefe, Navigation, Interaktionen
   ═══════════════════════════════════════════════════════════════════ */

/* ── Sanfte Marken-Scrollbar ─────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--brand-rgb), .35); border-radius: var(--radius-pill);
    border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--brand-rgb), .6); background-clip: content-box; }

/* ── Tastatur-Fokus überall sichtbar ─────────────────────── */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Surfaces: weicher, mehr Tiefe ───────────────────────── */
.surface, .card {
    border-radius: var(--radius-lg);
    border-color: rgba(var(--brand-rgb), .16);
    box-shadow: var(--elevation-1);
}
@media (hover: hover) {
    .surface { transition: border-color .2s ease, box-shadow .25s ease; }
    .surface:hover {
        border-color: rgba(var(--brand-rgb), .34);
        box-shadow: var(--elevation-3);
    }
}

/* ── Fortschrittsbalken + Ring: Marken-Verlauf & Glow ────── */
.prog-bar {
    background: linear-gradient(90deg, var(--brand2), var(--brand) 55%, #2dd4bf);
    box-shadow: 0 0 10px rgba(var(--brand-rgb), .5);
}
#ring-correct { filter: drop-shadow(0 0 6px rgba(34, 197, 94, .55)); }
#ring-wrong   { filter: drop-shadow(0 0 6px rgba(239, 68, 68, .45)); }
#s-pct {
    background: linear-gradient(90deg, var(--brand), #2dd4bf);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Stat-Kacheln: größere Zahlen, Akzentlinie ───────────── */
.stat-val { font-size: var(--fs-2xl); font-weight: 800; }
.stat-card { position: relative; overflow: hidden; border-radius: var(--radius); }
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), .8), transparent);
    opacity: 0; transition: opacity .25s ease;
}
.stat-card:hover::before { opacity: 1; }

/* ── Buttons: Verlauf + sanfter Glow ─────────────────────── */
.btn-primary {
    background-image: linear-gradient(135deg, var(--brand2), var(--brand) 55%, #159a8f);
    border: none;
    box-shadow: 0 6px 18px -8px rgba(var(--brand-rgb), .65);
    transition: filter .15s ease, box-shadow .2s ease, transform .1s ease;
}
.btn-primary:hover { filter: brightness(1.07); box-shadow: 0 10px 24px -8px rgba(var(--brand-rgb), .8); }
.btn-primary:active { transform: scale(.98); }

/* ── Mode-Karten: Hover-Lift + aktiver Glow ──────────────── */
.mode-card {
    border-radius: var(--radius-lg);
    transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
    .mode-card:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb), .45); }
}
.mode-card.active {
    border-color: var(--brand);
    background: linear-gradient(180deg, rgba(var(--brand-rgb), .18), rgba(var(--brand-rgb), .04));
    box-shadow: 0 0 0 1px var(--brand), 0 10px 22px -10px rgba(var(--brand-rgb), .6);
}
.mode-card.active .mode-icon { color: var(--brand); filter: drop-shadow(0 2px 5px rgba(var(--brand-rgb), .5)); }
.mode-card.exam-mode.active {
    border-color: var(--red);
    background: linear-gradient(180deg, rgba(239, 68, 68, .16), rgba(239, 68, 68, .04));
    box-shadow: 0 0 0 1px var(--red), 0 10px 22px -10px rgba(239, 68, 68, .5);
}
.mode-card.exam-mode.active .mode-icon { color: var(--red); }

/* ── Bottom-Nav: aktiver Pill-Indikator ──────────────────── */
.bottom-nav { background: color-mix(in srgb, var(--bs-body-bg) 92%, rgba(var(--brand-rgb), .08)); }
.bottom-nav .bn-item { transition: color .15s ease; }
.bottom-nav .bn-item i {
    border-radius: 99px; transition: background .2s ease, color .2s ease, transform .15s ease;
}
.bottom-nav .bn-item.active { color: var(--brand); }
.bottom-nav .bn-item.active i {
    color: var(--brand);
    background: rgba(var(--brand-rgb), .16);
    padding: 5px 18px; margin-top: -5px; margin-bottom: -5px;
    filter: drop-shadow(0 3px 6px rgba(var(--brand-rgb), .45));
    transform: translateY(-1px);
}
.bottom-nav .bn-item.active span { font-weight: 700; }

/* ── Desktop-Nav: aktiver Tab als Pille ──────────────────── */
.desk-nav-tab { border-radius: 99px; }
.desk-nav-tab.active {
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .22), rgba(var(--brand-rgb), .1));
    color: var(--brand);
}
.brand-home-link {
    padding: 5px 14px; border-radius: 99px;
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .16), rgba(var(--brand-rgb), .05));
}

/* ── Streak-Pill ──────────────────────────────────────────── */
.streak-pill {
    background: linear-gradient(135deg, rgba(245, 158, 11, .2), rgba(245, 158, 11, .06));
    border-color: rgba(245, 158, 11, .4);
    box-shadow: 0 4px 12px -6px rgba(245, 158, 11, .5);
}

/* ── Antwort-/Options-Buttons (Quiz): kartenartig ────────── */
.option-btn {
    border-radius: 14px !important;
    transition: transform .1s ease, border-color .15s ease, background .15s ease, box-shadow .2s ease;
}
.option-btn:active { transform: scale(.985); }
.option-btn.selected { box-shadow: 0 0 0 1px var(--brand), 0 8px 18px -10px rgba(var(--brand-rgb), .6); }
.option-btn.correct { box-shadow: 0 0 0 1px var(--green), 0 8px 18px -10px rgba(34, 197, 94, .55); }
.option-btn.wrong   { box-shadow: 0 0 0 1px var(--red),  0 8px 18px -10px rgba(239, 68, 68, .55); }

/* ── Erklärungs-/Panels: ruhige Rundung ──────────────────── */
.expl-panel, #sample-solution-panel { border-radius: 16px; }
#q-feedback { border-radius: 14px; }

/* ── Sanfter View-Übergang ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .view.active { animation: view-enter .4s cubic-bezier(.16, 1, .3, 1); }
}

/* ── Quiz: obere Aktions-Zeile + Fokus-Modus (alle Trainer) ── */
body.quiz-focus #expl-panel,
body.quiz-focus #sample-solution-panel,
body.quiz-focus #note-panel { display: none !important; }
#q-actions-row { margin-left: auto; }
#q-actions-row button.qact-btn,
#q-actions-row .kt-mic,
#q-actions-row #btn-hint {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 6px;
    font-size: .95rem; line-height: 1; white-space: nowrap; border-radius: 8px;
}
#q-actions-row button.qact-btn.active { border-color: var(--bs-primary, #4f8ef7); color: #fff; background: #12233c; }
#q-actions-row .kt-mic { margin-top: 0 !important; }
#q-tts-wrap { flex-shrink: 0; align-self: flex-start; display: flex; align-items: flex-start; }

/* ── Leser-Widget „Aa" (Schriftgröße/-art) ─────────────────── */
#ktfont-root { --kf-bg: #1a2129; --kf-fg: #eef2f7; --kf-ac: #4f8ef7; --kf-line: #2b3540; }
#ktfont-root * { box-sizing: border-box; }
#ktfont-chip { position: fixed; left: 14px; bottom: 14px; z-index: 2147483000; width: 46px; height: 46px;
    border-radius: 50%; background: var(--kf-bg); color: var(--kf-fg); border: 1px solid var(--kf-line);
    box-shadow: 0 4px 14px rgba(0,0,0,.28); font-family: Arial, sans-serif; font-size: 17px; font-weight: 800;
    line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer;
    user-select: none; letter-spacing: 1px; }
#ktfont-chip:hover { border-color: var(--kf-ac); transform: scale(1.05); }
#ktfont-panel { position: fixed; left: 14px; bottom: 66px; z-index: 2147483001; display: none; width: 264px;
    max-width: calc(100vw - 28px); background: var(--kf-bg); color: var(--kf-fg); border: 1px solid var(--kf-line);
    border-radius: 14px; padding: 14px; font-family: Arial, sans-serif; font-size: 13px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35); }
#ktfont-panel.open { display: block; }
#ktfont-panel h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #9fb0c0; }
#ktfont-row { display: flex; gap: 6px; margin-bottom: 14px; }
#ktfont-row button { flex: 1; padding: 8px 0; border-radius: 9px; border: 1px solid var(--kf-line);
    background: #11171f; color: var(--kf-fg); font: inherit; font-size: 12px; cursor: pointer; }
#ktfont-row button.on { border-color: var(--kf-ac); color: #fff; background: #12233c; }
#ktfont-row button b { display: block; font-size: 15px; font-weight: 800; margin-bottom: 2px; }
#ktfont-fonts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
#ktfont-fonts button { text-align: left; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--kf-line);
    background: #11171f; color: var(--kf-fg); font: inherit; cursor: pointer; }
#ktfont-fonts button.on { border-color: var(--kf-ac); background: #12233c; }
#ktfont-reset { width: 100%; padding: 7px; border-radius: 9px; border: 1px solid var(--kf-line);
    background: transparent; color: #9fb0c0; font: inherit; cursor: pointer; }
#ktfont-reset:hover { color: #fff; border-color: #e05a5a; }

/* ── Diagramm-Editor (kitrainer, ext/quiz_diagram.php) ─────── */
.ktqd-wrap { margin-top: 10px; border: 1px dashed var(--bs-border-color, #3a414b); border-radius: 12px; padding: 10px; }
.ktqd-wrap .dia-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.ktqd-wrap .dia-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.ktqd-wrap .dia-chip { cursor: pointer; user-select: none; border: 1px solid var(--bs-border-color, #3a414b); border-radius: 8px;
    background: var(--bs-tertiary-bg, #20262e); color: var(--bs-body-color, #eef2f7); padding: 4px 9px; font-size: .75rem; }
.ktqd-wrap .dia-chip:active { cursor: grabbing; }
.ktqd-wrap .dia-canvas { position: relative; height: 400px !important; overflow: hidden !important; border: 1px solid var(--bs-border-color, #333);
    border-radius: 12px; margin: 8px 0; cursor: grab; touch-action: none;
    background: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/22px 22px, var(--bs-body-bg, #10151a); }
.ktqd-wrap .dia-canvas.panning { cursor: grabbing; }
.ktqd-wrap .dia-canvas.linking { cursor: crosshair; }
.ktqd-wrap .dia-stage { position: absolute; top: 0; left: 0; width: 2600px; height: 1600px; transform-origin: 0 0; will-change: transform; }
.ktqd-wrap .dia-stage svg.dia-svg { position: absolute; inset: 0; width: 2600px !important; height: 1600px !important; pointer-events: none; overflow: visible; }
.ktqd-wrap .dia-stage svg.dia-ghost { position: absolute; inset: 0; width: 2600px !important; height: 1600px !important; pointer-events: none; overflow: visible; z-index: 4; }
.ktqd-wrap .dia-node { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center;
    cursor: grab; background: var(--bs-tertiary-bg, #20262e); border: 2px solid var(--bs-border-color, #4a525e);
    color: var(--bs-body-color, #eef2f7); touch-action: none; user-select: none; }
.ktqd-wrap .dia-node.dia-sel { box-shadow: 0 0 0 3px rgba(79,142,247,.55); }
.ktqd-wrap .dia-node.dia-hover-target { box-shadow: 0 0 0 4px rgba(46,204,113,.65); }
.ktqd-wrap .dia-node .dia-label { font-size: .7rem; line-height: 1.15; padding: 2px 5px; cursor: text; }
.ktqd-wrap .dia-node .dia-del { position: absolute; top: -9px; right: -9px; width: 18px; height: 18px; border-radius: 50%;
    border: 0; font-size: .7rem; line-height: 1; background: #e74c3c; color: #fff; cursor: pointer; display: none; z-index: 2; }
.ktqd-wrap .dia-node.dia-sel .dia-del { display: block; }
.ktqd-wrap .dia-node .dia-port { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #2d6cdf;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); cursor: crosshair; z-index: 3;
    opacity: 0; transition: opacity .12s ease, transform .12s ease; }
.ktqd-wrap .dia-node:hover .dia-port, .ktqd-wrap .dia-node.dia-sel .dia-port { opacity: 1; }
.ktqd-wrap .dia-node .dia-port:hover { transform: scale(1.35); }
.ktqd-wrap .dia-node .dia-port.port-src { right: -7px; top: 50%; margin-top: -7px; }
.ktqd-wrap .dia-node .dia-port.port-tgt { left: -7px; top: 50%; margin-top: -7px; }
.ktqd-wrap .sh-circle { border-radius: 50%; width: 92px; height: 92px; }
.ktqd-wrap .sh-rect { border-radius: 9px; min-width: 108px; max-width: 190px; min-height: 46px; padding: 6px; }
.ktqd-wrap .sh-round { border-radius: 22px; min-width: 108px; max-width: 190px; min-height: 46px; padding: 6px; }
.ktqd-wrap .sh-ellipse { border-radius: 50%; width: 120px; height: 66px; }
.ktqd-wrap .sh-diamond { width: 96px; height: 96px; transform: rotate(45deg);
    background: linear-gradient(var(--bs-tertiary-bg, #20262e), var(--bs-tertiary-bg, #20262e)) padding-box,
    linear-gradient(#4a525e, #4a525e) border-box; border: 2px solid transparent; }
.ktqd-wrap .sh-diamond .dia-label { transform: rotate(-45deg); }
.ktqd-wrap .sh-big { width: 230px; height: 110px; border-radius: 12px; }
.ktqd-wrap .dia-kind-event-start { border-color: #2ecc71; border-width: 3px; }
.ktqd-wrap .dia-kind-event-end { border-color: #e74c3c; border-width: 3px;
    background: radial-gradient(circle, transparent 55%, #e74c3c 58%, #e74c3c 72%, transparent 76%); }
.ktqd-wrap .dia-kind-initial { border-radius: 50%; width: 34px; height: 34px; background: #2ecc71; border-color: #2ecc71; }
.ktqd-wrap .dia-kind-final { border-radius: 50%; width: 40px; height: 40px; border-color: #e74c3c;
    background: radial-gradient(circle, #e74c3c 0 22%, transparent 24%); }
.ktqd-wrap .dia-kind-state-start { border-radius: 50%; width: 40px; height: 40px; border-color: #2ecc71; }
.ktqd-wrap .dia-kind-state-end { border-radius: 50%; width: 44px; height: 44px; border-color: #e74c3c;
    background: radial-gradient(circle, #e74c3c 0 20%, transparent 24%); }
.ktqd-wrap .dia-kind-actor { border-radius: 50%; width: 74px; height: 74px; }
.ktqd-wrap .dia-kind-uc { border-color: #1abc9c; }
.ktqd-wrap .dia-kind-system { border-style: dashed; background: transparent; }
.ktqd-wrap .dia-kind-cloud { border-style: dashed; border-color: #6ea8fe; }
.ktqd-wrap .dia-kind-edge { border-radius: 50%; border-color: #f39c12; }
.ktqd-wrap .dia-kind-gateway-xor { background: #7c3aed; border-color: #a78bfa; }
.ktqd-wrap .dia-kind-gateway-and { background: #0284c7; border-color: #38bdf8; }
.ktqd-wrap .dia-kind-gateway-xor .dia-label, .ktqd-wrap .dia-kind-gateway-and .dia-label { font-weight: 800; color: #fff; font-size: .95rem; }
.ktqd-wrap .dia-kind-activity, .ktqd-wrap .dia-kind-action { border-color: #4f8ef7; border-width: 2px; }
.ktqd-wrap .dia-kind-state { border-color: #0ea5e9; }
.ktqd-wrap .dia-kind-decision { border-color: #f59e0b; }
.ktqd-wrap .dia-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.ktqd-wrap .dia-tools button, .ktqd-wrap .dia-bar select { border: 1px solid var(--bs-border-color, #3a414b); background: var(--bs-tertiary-bg, #20262e);
    color: var(--bs-body-color, #eef2f7); border-radius: 8px; padding: 4px 8px; font-size: .75rem; cursor: pointer; line-height: 1.2; }
.ktqd-wrap .dia-tools button:hover, .ktqd-wrap .dia-bar select:hover { border-color: var(--bs-primary, #4f8ef7); }
.ktqd-wrap .dia-tools button.on { border-color: var(--bs-primary, #4f8ef7); color: #fff; background: #12233c; }
.ktqd-wrap .dia-tools .spacer { flex: 1; }
.ktqd-wrap .dia-edge-row { display: flex; gap: 6px; align-items: center; margin: 4px 0; flex-wrap: wrap; }
.ktqd-wrap .dia-edge-row input, .ktqd-wrap .dia-edge-row select { background: var(--bs-body-bg, #11151a);
    color: var(--bs-body-color, #e8edf2); border: 1px solid var(--bs-border-color, #3a414b); border-radius: 6px;
    padding: 3px 7px; font-size: .76rem; }
.ktqd-wrap .dia-edge-row input { flex: 1; min-width: 110px; }
.ktqd-wrap .ktqd-text { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; white-space: pre-wrap;
    background: var(--bs-body-bg, #11151a); border: 1px solid var(--bs-border-color, #333); border-radius: 8px;
    padding: 6px 8px; max-height: 120px; overflow: auto; color: var(--bs-secondary-color, #b6bec9); }
.ktqd-wrap .hint { font-size: .68rem; color: var(--bs-secondary-color, #9aa3ad); }
.ktqd-wrap .ke-muted { color: var(--bs-secondary-color, #9aa3ad); }
.ktqd-wrap .dia-status { font-size: .72rem; color: var(--bs-secondary-color, #9aa3ad); min-height: 1em; }
.ktqd-wrap .dia-zsel { font-variant-numeric: tabular-nums; }
.ktqd-wrap .dia-kind-problem { border-color: #e74c3c; border-width: 3px; background: rgba(231,76,60,.12); }
.ktqd-wrap .dia-kind-category { border-color: #f59e0b; border-width: 2px; background: rgba(245,158,11,.10); }
.ktqd-wrap .dia-kind-cause { border-color: #94a3b8; border-width: 2px; border-style: dashed; min-width: 88px; max-width: 170px; min-height: 34px; }
.ktqd-wrap .dia-kind-problem .dia-label { color: #ffc9c9; font-weight: 700; }
.ktqd-wrap .dia-kind-category .dia-label { color: #ffe9b3; font-weight: 700; }

/* ── Fallbeispiel-Anhang (kitrainer ext/quiz_anhang.php) ─── */
.kt-case-body { font-size: .9rem; line-height: 1.65; }
.kt-case-body p { margin: 0 0 .6rem; }
.kt-case-body ul, .kt-case-body ol { margin: 0 0 .7rem; padding-left: 1.25rem; }
.kt-case-body li { margin-bottom: .3rem; }
.kt-case-body strong { color: var(--bs-emphasis-color); }
.kt-case-body code { background: var(--bs-tertiary-bg); padding: .1em .35em; border-radius: 6px; font-size: .86em; }

/* ── Mobil: kompakte Quiz-Leisten & Aktionszeilen ─────────── */
@media (max-width: 640px) {
    #quiz-stats-bar { font-size: .64rem; gap: 4px 8px; row-gap: 2px; }
    #quiz-stats-bar #quiz-stat-time, #quiz-stats-bar #quiz-stat-avg { display: none; }
    #q-actions-row { gap: 2px; margin-left: auto; }
    #q-actions-row button.qact-btn,
    #q-actions-row .kt-mic,
    #q-actions-row #btn-hint { min-width: 26px; height: 26px; padding: 0 3px; font-size: .78rem; }
    #q-tts-wrap { max-width: 34px; }
    #q-tts-wrap .tts-btn { min-width: 30px; }
    #quiz-actions { gap: 6px; }
    #quiz-actions .btn { padding: 4px 9px; font-size: .8rem; }
    .qact-btn .me-1, #q-actions-row .me-1 { display: none; }
}

/* ── Mobil-Navigation: Hamburger oben, Bottom-Leiste ausgeblendet ── */
/* ── Mobil-Navigation: Bottom-Leiste UND Burger ──────────────
   Vorher stand hier #bottom-nav{display:none} — zusammen mit dem
   ausgeblendeten .top-nav blieb auf dem Handy keine Navigation
   uebrig. Die Offcanvas-Regeln stehen jetzt weiter oben bei
   #btn-nav-hamburger. */
@media (max-width: 767px) {
    #bottom-nav {
        display: flex;
    }
    .bottom-nav .bn-item {
        min-height: 54px;
    }
    /* Ueberspringen und Abbrechen bleiben erreichbar (siehe Quiz-Block) */
    #quiz-actions .btn {
        white-space: nowrap;
    }
    .btn-scroll-top,
    .scroll-top-btn {
        display: inline-flex;
        flex: 0 0 auto;
    }
}
@media (min-width: 768px) {
    .btn-scroll-top {
        display: none;
    }
}
@media (min-width: 768px) {
    #btn-nav-hamburger,
    #nav-offcanvas {
        display: none !important;
    }
    .btn-scroll-top {
        display: none;
    }
}

/* ── Interaktive Muster-Diagramme (quiz.js) ───────────────── */
.kt-sdg { max-width: 100%; overflow: auto; max-height: min(460px, 62vh); }
.kt-sdg svg { display: block; max-width: none; height: auto; }
.kt-sdg .kt-sdg-zoom { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.kt-sdg .kt-sdg-zoom button { border: 1px solid var(--bs-border-color, #3a414b); background: var(--bs-tertiary-bg, #20262e);
    color: var(--bs-body-color, #eef2f7); border-radius: 8px; min-width: 28px; height: 26px; line-height: 1;
    padding: 0 6px; cursor: pointer; font-size: .9rem; }
.kt-sdg .kt-sdg-zoom button:hover { border-color: var(--bs-primary, #4f8ef7); }
.kt-sdg .kt-sdg-zoom span.kt-sdg-zoomval { font-size: .72rem; color: var(--bs-secondary-color, #9aa3ad); min-width: 46px; text-align: center; }
.kt-sdg svg .sdg-hit { cursor: pointer; }
.kt-sdg svg .sdg-hit circle,
.kt-sdg svg .sdg-hit rect,
.kt-sdg svg .sdg-hit path { transition: opacity .12s ease; }
.kt-sdg svg .sdg-hit:hover circle,
.kt-sdg svg .sdg-hit:hover rect,
.kt-sdg svg .sdg-hit:hover path { opacity: .75; }
.kt-sdg-expl.kt-sdg-float { position: fixed; z-index: 2147483002; width: min(400px, calc(100vw - 24px));
    max-height: 60vh; overflow: auto; margin: 0; box-shadow: 0 12px 40px rgba(0,0,0,.45);
    border: 1px solid var(--bs-border-color, #3a414b); display: none; }
.kt-sdg-expl { border: 1px dashed var(--bs-border-color, #3a414b); border-radius: 10px; padding: 8px 10px;
    margin-top: 8px; background: var(--bs-tertiary-bg, rgba(255,255,255,.03)); }
.kt-sdg-expl-head { font-size: .72rem; font-weight: 700; margin-bottom: 4px; color: var(--bs-primary, #6ea8fe); }


/* ── Mobil-Hygiene (ergaenzt durch fix_app_css.py) ──────────── */
html, body {
    max-width: 100%;
    overflow-x: clip;
}
img, svg, video, canvas, iframe {
    max-width: 100%;
}
@media (max-width: 767.98px) {
    #view-quiz .surface {
        padding: 1rem !important;
    }
    #q-cat {
        max-width: 100% !important;
    }
    #q-actions-row {
        flex-wrap: wrap;
        row-gap: 4px;
    }
    .modal-footer .d-flex {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
    .modal-footer .btn {
        min-height: 44px;
    }
}

/* ══ MOBIL v3: feste Aktionsleiste ══ START (fix_app_css_v3.py) */
@media (max-width: 767.98px) {
    :root {
        --bottom-nav-h: 60px;   /* Hoehe der unteren Navigation */
        --quiz-bar-h: 64px;     /* Hoehe der Pruefen-Leiste      */
    }

    /* overflow-x:hidden wuerde den Body zum Scroll-Container machen
       und position:sticky abschalten. clip schneidet nur ab. */
    html, body {
        overflow-x: clip;
    }

    /* ── Aktionsleiste: fest ueber der Bottom-Navigation ─────────
       !important ueberall dort, wo Bootstrap-Utilities aus dem
       Markup (d-flex, gap-2, flex-wrap, mt-3, pt-2) konkurrieren. */
    #view-quiz #quiz-actions {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: calc(var(--bottom-nav-h) + var(--safe-bottom, 0px)) !important;
        z-index: 1029 !important;            /* knapp unter der Nav (1030) */
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        background: var(--bs-body-bg) !important;
        border-top: 1px solid var(--bs-border-color) !important;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .18) !important;
    }
    /* Pruefen und Naechste teilen sich die Zeile */
    #view-quiz #quiz-actions #btn-check,
    #view-quiz #quiz-actions #btn-next {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: .95rem;
        font-weight: 600;
        padding: 8px 12px !important;
        white-space: nowrap;
    }
    /* WICHTIG: Der obige display:flex!important wuerde Bootstraps .d-none
       ueberschreiben (hoehere Spezifitaet) -> beide Buttons waeren immer
       sichtbar und leicht zu verwechseln. Diese Regel stellt sicher, dass
       der gerade inaktive Button wirklich ausgeblendet wird. */
    #view-quiz #quiz-actions #btn-check.d-none,
    #view-quiz #quiz-actions #btn-next.d-none {
        display: none !important;
    }
    /* "Naechste" klar von "Pruefen" unterscheiden: gruener Erfolgs-Button,
       damit die naechste Aktion auf einen Blick erkennbar ist. */
    #view-quiz #quiz-actions #btn-next:not(.d-none) {
        background: var(--green) !important;
        border-color: var(--green) !important;
        color: #fff !important;
    }
    /* Ueberspringen und Abbrechen als schmale Icons daneben */
    #view-quiz #quiz-actions #btn-skip,
    #view-quiz #quiz-actions #btn-abort {
        display: inline-flex !important;
        flex: 0 0 46px !important;
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        margin: 0 !important;               /* hebt ms-auto auf */
        align-items: center;
        justify-content: center;
    }
    /* Alles Weitere gehoert nach oben (mobile-quiz.js verschiebt es) */
    #view-quiz #quiz-actions > *:not(#btn-check):not(#btn-next):not(#btn-skip):not(#btn-abort) {
        display: none !important;
    }

    /* Inhalt darf nicht hinter Leiste + Navigation verschwinden */
    #view-quiz {
        padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom, 0px) + var(--quiz-bar-h) + 16px) !important;
    }

    /* ── Werkzeugzeile oben neben der Frage ────────────────────── */
    #q-actions-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        margin-left: auto;
        max-width: 60%;
    }
    #q-actions-row > * {
        min-width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #q-actions-row .btn {
        padding: 0 8px;
        font-size: .85rem;
    }
    #q-actions-row .btn > span:not(.badge),
    #q-actions-row .me-1 {
        display: none;
    }

    /* ── Schwebende Helfer ueber die Leiste heben ──────────────── */
    #ktfont-chip,
    .scroll-top-btn,
    .btn-scroll-top {
        bottom: calc(var(--bottom-nav-h) + var(--safe-bottom, 0px) + 12px) !important;
    }
    body.quiz-bar-visible #ktfont-chip,
    body.quiz-bar-visible .scroll-top-btn,
    body.quiz-bar-visible .btn-scroll-top {
        bottom: calc(var(--bottom-nav-h) + var(--safe-bottom, 0px) + var(--quiz-bar-h) + 12px) !important;
    }
    #ktfont-chip {
        width: 40px;
        height: 40px;
        font-size: 15px;
    }
    #ktfont-panel {
        bottom: calc(var(--bottom-nav-h) + var(--safe-bottom, 0px) + var(--quiz-bar-h) + 60px) !important;
    }
    .lb-toast,
    .exam-focus-toast {
        bottom: calc(var(--bottom-nav-h) + var(--safe-bottom, 0px) + var(--quiz-bar-h) + 16px) !important;
    }

    /* ── Menue immer erreichbar ────────────────────────────────── */
    .top-nav {
        position: sticky;
        top: 0;
        z-index: 1035;
    }
    .bottom-nav {
        z-index: 1030;
    }

    /* ── Diagramm-Editor auf dem Handy bedienbar ───────────────── */
    .ktqd-wrap .dia-canvas {
        height: 260px !important;
    }
    .ktqd-wrap .dia-bar,
    .ktqd-wrap .dia-tools {
        gap: 4px;
    }
    .ktqd-wrap .dia-chip,
    .ktqd-wrap .dia-tools button {
        font-size: .7rem;
        padding: 6px 8px;
        min-height: 34px;
    }

    /* Sichtprobe: taucht dieser Text in der ausgelieferten CSS nicht
       auf, wurde die Datei nicht neu gebaut. */
    #quiz-actions::after {
        content: "";
        --kt-css-build: "MOBIL v3";
    }
}
/* ══ MOBIL v3 ══ ENDE */

/* ══ MOBIL v4: Aktionsleiste aufgeräumt · Menü neu ══ START ══════════ */

/* ── Aktionsleiste: kein doppelter Pfeil ─────────────────────────────
   Vorher standen "Nächste →" und der Überspringen-Pfeil nebeneinander.
   Überspringen ergibt nach dem Prüfen keinen Sinn mehr — mobile-quiz.js
   setzt die Klasse "answered", sobald Nächste sichtbar wird. */
#quiz-actions.answered #btn-skip {
    display: none !important;
}

@media (max-width: 767.98px) {
    /* Nächste bekommt die volle Breite, Abbrechen bleibt als Icon rechts */
    #view-quiz #quiz-actions.answered #btn-next {
        flex: 1 1 auto !important;
    }

    /* ── Aa-Knopf raus aus der Ecke ──────────────────────────────────
       Erreichbar über Menü → Schriftgröße (mobile-nav.js hängt den
       Eintrag ein und löst den verborgenen Knopf aus). */
    #ktfont-chip {
        display: none !important;
    }
    #ktfont-panel {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: min(360px, calc(100vw - 24px));
        bottom: calc(var(--bottom-nav-h) + var(--safe-bottom, 0px) + var(--quiz-bar-h) + 16px) !important;
    }
}

/* ── Burger-Menü: eigenständiges Erscheinungsbild ──────────────────── */
#nav-offcanvas {
    width: min(86vw, 360px);
    border-left: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
}
#nav-offcanvas .offcanvas-header {
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bs-border-color);
}
#nav-offcanvas .nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--brand);
}
#nav-offcanvas .nav-brand .bi {
    font-size: 1.25rem;
}
#nav-offcanvas .nav-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#nav-offcanvas .offcanvas-body {
    padding: 10px 12px calc(1rem + var(--safe-bottom));
}

/* Abschnittsüberschrift */
#nav-offcanvas .n-label {
    padding: 12px 8px 6px;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--bs-secondary-color);
}
#nav-offcanvas .n-label:first-child {
    padding-top: 4px;
}

/* Menüeintrag mit Icon-Plakette */
#nav-offcanvas .n-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 9px 12px;
    margin-bottom: 2px;
    text-align: left;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--bs-body-color);
    transition: background-color .15s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
#nav-offcanvas .n-item:active {
    transform: scale(.985);
}
#nav-offcanvas .n-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(var(--brand-rgb), .1);
    color: var(--brand);
    font-size: 1.05rem;
    transition: background-color .15s ease, color .15s ease;
}
#nav-offcanvas .n-txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.25;
}
#nav-offcanvas .n-chev {
    flex: 0 0 auto;
    font-size: .75rem;
    opacity: .3;
}
#nav-offcanvas .n-item:hover,
#nav-offcanvas .n-item:focus-visible {
    background: var(--bs-tertiary-bg);
}
#nav-offcanvas .n-item.active {
    background: rgba(var(--brand-rgb), .12);
    font-weight: 600;
}
#nav-offcanvas .n-item.active .n-ico {
    background: var(--brand);
    color: #fff;
}
#nav-offcanvas .n-item .n-count {
    flex: 0 0 auto;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--red);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    text-align: center;
}

/* Fußzeile: Theme, Schriftgröße, Abmelden nebeneinander */
#nav-offcanvas .n-foot {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bs-border-color);
}
#nav-offcanvas .n-fbtn {
    flex: 1 1 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    background: transparent;
    color: var(--bs-body-color);
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    -webkit-tap-highlight-color: transparent;
}
#nav-offcanvas .n-fbtn .bi {
    font-size: 1.1rem;
    color: var(--brand);
}
#nav-offcanvas .n-fbtn:active {
    background: var(--bs-tertiary-bg);
}
.offcanvas-backdrop.show {
    backdrop-filter: blur(2px);
}
/* ══ MOBIL v4 ══ ENDE ═══════════════════════════════════════════════ */

/* ══ MOBIL v5: nur noch Burger-Menü · App-Bar oben ══ START ══════════
   Die untere Leiste entfällt auf dem Handy — sie führte zu denselben
   Zielen wie das Menü. Dadurch verschiebt sich alles, was vorher die
   Navigationshöhe eingerechnet hat: --bottom-nav-h wird 0.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    :root {
        --bottom-nav-h: 0px;
    }

    /* untere Leiste raus */
    .bottom-nav,
    #bottom-nav {
        display: none !important;
    }
    body {
        padding-bottom: var(--safe-bottom) !important;
    }

    /* ── Kopfzeile als App-Bar ──────────────────────────────────── */
    .top-nav {
        display: flex !important;
        position: sticky;
        top: 0;
        z-index: 1035;
        min-height: 54px;
        padding: .35rem .75rem !important;
        margin-bottom: .75rem !important;
        background: var(--bs-body-bg);
        border-bottom: 1px solid var(--bs-border-color);
        box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
    }
    .top-nav .brand-home-link {
        font-size: 1.02rem;
        font-weight: 700;
        padding: 4px 10px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #btn-nav-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        border: 1px solid var(--bs-border-color);
        border-radius: 12px;
        background: rgba(var(--brand-rgb), .08);
        color: var(--brand);
        font-size: 1.35rem;
        line-height: 1;
    }
    #btn-nav-hamburger:active {
        background: rgba(var(--brand-rgb), .18);
    }
    /* Notanker: schwebender Knopf, falls keine Kopfzeile vorhanden ist */
    #btn-nav-hamburger.nav-fab {
        position: fixed;
        right: 14px;
        bottom: calc(var(--safe-bottom) + 16px);
        z-index: 1040;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--brand);
        color: #fff;
        box-shadow: 0 8px 22px rgba(var(--brand-rgb), .45);
    }
    body.quiz-bar-visible #btn-nav-hamburger.nav-fab {
        bottom: calc(var(--safe-bottom) + var(--quiz-bar-h) + 16px);
    }

    /* ── Aktionsleiste sitzt jetzt direkt am unteren Rand ───────── */
    #view-quiz #quiz-actions {
        bottom: var(--safe-bottom) !important;
        padding: 8px 12px calc(8px + var(--safe-bottom)) !important;
    }
    #view-quiz {
        padding-bottom: calc(var(--quiz-bar-h) + var(--safe-bottom) + 24px) !important;
    }
    .scroll-top-btn,
    .btn-scroll-top {
        bottom: calc(var(--safe-bottom) + 16px) !important;
    }
    body.quiz-bar-visible .scroll-top-btn,
    body.quiz-bar-visible .btn-scroll-top {
        bottom: calc(var(--safe-bottom) + var(--quiz-bar-h) + 16px) !important;
    }
    /* Nach-oben-Knopf nicht unter den Notanker-Burger legen */
    body:not(.has-top-nav) .scroll-top-btn,
    body:not(.has-top-nav) .btn-scroll-top {
        right: 78px !important;
    }
    /* Nach-oben-Knopf nur in der Quiz-Ansicht, niemals auf dem Dashboard */
    body:not(.quiz-bar-visible) .scroll-top-btn,
    body:not(.quiz-bar-visible) .btn-scroll-top {
        display: none !important;
    }
    #ktfont-panel,
    .lb-toast,
    .exam-focus-toast {
        bottom: calc(var(--safe-bottom) + var(--quiz-bar-h) + 20px) !important;
    }
}

/* ══ Burger-Menü: ruhigeres, hochwertigeres Erscheinungsbild ═══════ */
#nav-offcanvas {
    width: min(88vw, 380px);
    border: 0;
    border-radius: 20px 0 0 20px;
    background: var(--bs-body-bg);
    box-shadow: -18px 0 48px rgba(0, 0, 0, .35);
    overflow: hidden;
}

/* Kopf mit dezentem Markenverlauf */
#nav-offcanvas .offcanvas-header {
    position: relative;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--bs-border-color);
    background:
            linear-gradient(135deg, rgba(var(--brand-rgb), .18), rgba(var(--brand-rgb), .02));
}
#nav-offcanvas .nav-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--bs-body-color);
}
#nav-offcanvas .nav-brand .bi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font-size: 1.2rem;
}
#nav-offcanvas .nav-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#nav-offcanvas .nav-sub {
    width: 100%;
    margin-top: 8px;
    font-size: .74rem;
    color: var(--bs-secondary-color);
}
#nav-offcanvas .btn-close {
    margin: 0;
    padding: 12px;
    opacity: .6;
}

#nav-offcanvas .offcanvas-body {
    padding: 8px 12px calc(1rem + var(--safe-bottom));
    overflow-y: auto;
}

/* Abschnittsüberschrift mit feiner Linie */
#nav-offcanvas .n-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 8px 8px;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--bs-secondary-color);
}
#nav-offcanvas .n-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bs-border-color);
}
#nav-offcanvas .n-label:first-child {
    padding-top: 8px;
}

/* Einträge */
#nav-offcanvas .n-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 52px;
    padding: 9px 12px;
    margin-bottom: 3px;
    text-align: left;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--bs-body-color);
    transition: background-color .16s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
#nav-offcanvas .n-item:active {
    transform: scale(.98);
}
#nav-offcanvas .n-ico {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 1.05rem;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
#nav-offcanvas .n-txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.25;
}
#nav-offcanvas .n-chev {
    flex: 0 0 auto;
    font-size: .72rem;
    opacity: .25;
    transition: transform .16s ease, opacity .16s ease;
}
#nav-offcanvas .n-item:hover .n-chev {
    opacity: .55;
    transform: translateX(2px);
}
#nav-offcanvas .n-item:hover,
#nav-offcanvas .n-item:focus-visible {
    background: var(--bs-tertiary-bg);
}
#nav-offcanvas .n-item:hover .n-ico {
    color: var(--brand);
    background: rgba(var(--brand-rgb), .12);
}

/* aktiver Eintrag: Akzentbalken links + gefüllte Plakette */
#nav-offcanvas .n-item.active {
    background: rgba(var(--brand-rgb), .12);
    font-weight: 600;
}
#nav-offcanvas .n-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    border-radius: 0 3px 3px 0;
    background: var(--brand);
}
#nav-offcanvas .n-item.active .n-ico {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(var(--brand-rgb), .7);
}
#nav-offcanvas .n-item.active .n-chev {
    opacity: .5;
}
#nav-offcanvas .n-item .n-count {
    flex: 0 0 auto;
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--red);
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.35;
}

/* Fußzeile als Segmentgruppe */
#nav-offcanvas .n-foot {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    padding: 6px;
    border-radius: 16px;
    background: var(--bs-tertiary-bg);
}
#nav-offcanvas .n-fbtn {
    flex: 1 1 0;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: background-color .16s ease, color .16s ease;
    -webkit-tap-highlight-color: transparent;
}
#nav-offcanvas .n-fbtn .bi {
    font-size: 1.15rem;
    color: var(--brand);
}
#nav-offcanvas .n-fbtn:active,
#nav-offcanvas .n-fbtn:hover {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* Einträge laufen leicht versetzt ein */
@media (prefers-reduced-motion: no-preference) {
    #nav-offcanvas.show .n-item,
    #nav-offcanvas.show .n-label {
        animation: navItemIn .3s cubic-bezier(.16, 1, .3, 1) backwards;
    }
    #nav-offcanvas.show .n-item:nth-child(-n+3)  { animation-delay: .04s; }
    #nav-offcanvas.show .n-item:nth-child(n+4)   { animation-delay: .08s; }
    #nav-offcanvas.show .n-item:nth-child(n+8)   { animation-delay: .12s; }
    #nav-offcanvas.show .n-foot                  { animation: navItemIn .3s cubic-bezier(.16, 1, .3, 1) .16s backwards; }
}
@keyframes navItemIn {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

.offcanvas-backdrop.show {
    backdrop-filter: blur(3px);
    opacity: .55;
}
/* ══ MOBIL v5 ══ ENDE ═══════════════════════════════════════════════ */

/* ══ MOBIL v6: Werkzeugzeile · doppelter Pfeil ══ START ══════════════ */
@media (max-width: 767.98px) {
    /* ── Werkzeugzeile: eine scrollbare Zeile statt Icon-Teppich ──────
       Vorher stand sie in derselben Flex-Zeile wie der Fragetext, hat
       ihn zusammengequetscht und ist in eine zweite Reihe umgebrochen.
       mobile-quiz.js hängt sie darunter aus; hier das Aussehen. */
    #q-actions-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center;
        gap: 6px !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 10px !important;
        padding: 2px 0;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #q-actions-row::-webkit-scrollbar {
        display: none;
    }
    #q-actions-row > * {
        flex: 0 0 auto !important;
        min-width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #q-actions-row .btn {
        padding: 0 9px;
        font-size: .85rem;
        border-radius: 10px;
    }
    /* Beschriftungen weglassen, Icons genügen in der Zeile */
    #q-actions-row .btn > span:not(.badge),
    #q-actions-row .me-1 {
        display: none;
    }

    /* Fragezeile bekommt ihren Platz zurück */
    #view-quiz #q-text {
        flex: 1 1 auto;
        min-width: 0;
    }
    #q-tts-wrap {
        flex: 0 0 auto;
    }

    /* ── Kein doppeltes Weiter-Signal ────────────────────────────────
       "Nächste →" und der Überspringen-Pfeil bedeuten dasselbe.
       mobile-quiz.js setzt die Klasse, sobald Nächste sichtbar wird. */
    #view-quiz #quiz-actions.answered #btn-skip {
        display: none !important;
    }
    #view-quiz #quiz-actions.answered #btn-next {
        flex: 1 1 auto !important;
    }

    /* ── MOBIL: Dashboard Startleiste immer ganz unten am Screen ───────── */
    #view-dashboard .quiz-start-row,
    #view-dashboard div:has(> #btn-start-quiz) {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1025 !important;
        background: var(--bs-body-bg) !important;
        margin: 0 !important;
        padding: 8px 16px calc(8px + var(--safe-bottom, 0px)) !important;
        border-top: 1px solid var(--bs-border-color) !important;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .18) !important;
    }
    #view-dashboard {
        padding-bottom: calc(115px + var(--safe-bottom, 0px)) !important;
    }
    /* "Nach oben"-Pfeil auf dem Dashboard komplett unterdrücken */
    body:not(.quiz-bar-visible) #btn-scroll-top,
    body:not(.quiz-bar-visible) .scroll-top-btn {
        display: none !important;
    }
}
/* ══ MOBIL v6 ══ ENDE ═══════════════════════════════════════════════ */

/* ── Body-Glow ── */
body {
    background-image:
        radial-gradient(62rem 44rem at 86% -12%, rgba(var(--brand-rgb), 0.16), transparent 70%),
        radial-gradient(48rem 36rem at -10% 0%, rgba(var(--brand-rgb), 0.08), transparent 72%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ── Surface-Gradient ── */
.surface {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 46%);
}
[data-bs-theme="light"] .surface {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.6), transparent 46%);
}
.surface-2,
.stat-card {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 46%);
}

/* ── Überschriften — robuster ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display, var(--font));
    letter-spacing: -0.02em;
}
.stat-val {
    font-family: var(--font-display, var(--font));
    font-weight: 600;
    letter-spacing: -0.02em;
}
.badge, .stat-lbl {
    font-family: var(--font-mono, ui-monospace, monospace);
}
.top-nav .brand-home-link {
    font-family: var(--font-display, var(--font));
    letter-spacing: -0.01em;
}
.mode-card .mode-icon {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: rgba(var(--brand-rgb), 0.12);
}
.desk-nav-tab {
    font-weight: 500;
}
.n-item .n-ico {
    color: var(--brand);
}

/* ── Option-Buttons (Quiz) ── */
#view-quiz .option-btn.correct {
    background: color-mix(in srgb, var(--c-success, #4ade80) 12%, transparent);
    border-color: color-mix(in srgb, var(--c-success, #4ade80) 42%, transparent);
}
#view-quiz .option-btn.wrong {
    background: color-mix(in srgb, var(--c-danger, #f87171) 11%, transparent);
    border-color: color-mix(in srgb, var(--c-danger, #f87171) 38%, transparent);
}
#view-quiz .option-btn.missed {
    background: color-mix(in srgb, var(--c-warning, #fbbf24) 11%, transparent);
    border-color: color-mix(in srgb, var(--c-warning, #fbbf24) 38%, transparent);
}
#view-quiz .expl-panel,
#view-quiz #q-feedback:not(.d-none) {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius);
}
#view-quiz .expl-header:hover {
    background: var(--bs-tertiary-bg);
}
#view-dashboard .mode-card,
.mode-card {
    transition: background-color .15s ease, border-color .15s ease;
}
@media (hover: hover) {
    #view-dashboard .mode-card:hover,
    .mode-card:hover {
        transform: none;
    }
}
.learn-topic {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--c-border);
    border-radius: 14px;
}

.learn-topic:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-strong);
}

.alert {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    color: var(--c-text);
}

.alert-warning {
    background: color-mix(in srgb, var(--c-warning) 10%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-warning) 32%, transparent);
    color: var(--c-text);
}

.alert-danger {
    background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-danger) 32%, transparent);
    color: var(--c-text);
}

.alert-success {
    background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-success) 32%, transparent);
    color: var(--c-text);
}

.form-control,
.form-select {
    background-color: var(--c-surface);
    border-color: var(--c-border-strong);
    color: var(--c-text);
    border-radius: 10px;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--c-surface);
    border-color: rgba(var(--brand-rgb), 0.6);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.22);
    color: var(--c-text);
}

.form-control::placeholder {
    color: var(--c-text-faint);
}

.input-group-text {
    background: var(--c-surface-2);
    border-color: var(--c-border-strong);
    color: var(--c-text-faint);
}

.offcanvas,
.modal-content,
.dropdown-menu {
    background: var(--c-surface);
    color: var(--c-text);
    border-color: var(--c-border);
}

.dropdown-item {
    color: var(--c-text-muted);
    border-radius: 8px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--c-surface-hover);
    color: var(--c-text);
}

.quiz-start-btn {
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    border-color: transparent;
}

.scroll-top-btn {
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    color: var(--c-text);
}

.divider,
hr {
    border-color: var(--c-border);
}

#view-dashboard .surface {
    background: var(--c-surface);
    border-color: var(--c-border);
    border-radius: 16px;
}

#view-dashboard .surface-2 {
    background: var(--c-surface-2);
    border-color: var(--c-border);
    border-radius: 12px;
}

#view-dashboard .stat-card {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: 12px;
}

#view-dashboard .stat-card:hover {
    border-color: var(--c-border-strong);
}

#view-dashboard .stat-lbl {
    color: var(--c-text-faint);
    font-family: var(--font-mono, ui-monospace, monospace);
}

#view-dashboard .mode-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
}

#view-dashboard .mode-card:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-strong);
}

#view-dashboard .mode-card.selected,
#view-dashboard .mode-card.active {
    background: rgba(var(--brand-rgb), 0.12);
    border-color: rgba(var(--brand-rgb), 0.5);
}

#view-dashboard .mode-card .mode-icon {
    color: var(--brand);
}

#view-dashboard .mode-card .mode-count {
    color: var(--c-text-faint);
}

#view-dashboard #dash-analysis-toggle:hover {
    color: var(--c-text);
}

#view-dashboard .alert {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
}

#view-dashboard #daily-banner.alert-warning {
    background: color-mix(in srgb, var(--c-warning) 10%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-warning) 32%, transparent);
}

#view-dashboard #daily-banner.alert-danger {
    background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-danger) 32%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN-AUFFRISCHUNG v7 — Hintergrund-Verläufe & Gradienten
   Angelehnt an den Referenz-Look (rfs). Färbt sich automatisch über
   --brand/--brand-rgb (pro Trainer) und respektiert Hell/Dunkel.
   ═══════════════════════════════════════════════════════════════════ */

/* Hintergrund: mehrere sanfte Marken-Glows, an den Viewport fixiert */
body {
    background-color: var(--bs-body-bg);
    background-image:
        radial-gradient(72rem 48rem at 88% -14%, rgba(var(--brand-rgb), 0.22), transparent 66%),
        radial-gradient(54rem 40rem at -12% -2%, rgba(var(--brand-rgb), 0.11), transparent 70%),
        radial-gradient(64rem 54rem at 50% 120%, rgba(var(--brand-rgb), 0.10), transparent 72%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
[data-bs-theme="light"] body {
    background-image:
        radial-gradient(72rem 48rem at 88% -14%, rgba(var(--brand-rgb), 0.14), transparent 66%),
        radial-gradient(54rem 40rem at -12% -2%, rgba(var(--brand-rgb), 0.08), transparent 72%);
}

/* Karten/Flächen: feiner Verlauf („sheen") */
.surface,
.card {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 44%);
}
[data-bs-theme="light"] .surface,
[data-bs-theme="light"] .card {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.75), transparent 44%);
}
.surface-2,
.stat-card {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 46%);
}

/* Top-Navigation: dezenter Verlauf + Marken-Kante */
.top-nav {
    background-image: linear-gradient(180deg, rgba(var(--brand-rgb), 0.07), transparent);
}
.top-nav {
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 22%, var(--bs-border-color));
}

/* Aktive Navigation: Marken-Verlauf statt Flachfarbe */
.desk-nav-tab.active {
    background-image: linear-gradient(135deg, rgba(var(--brand-rgb), 0.22), rgba(var(--brand-rgb), 0.05) 70%);
}
.bottom-nav .bn-item.active {
    background-image: linear-gradient(180deg, rgba(var(--brand-rgb), 0.16), transparent 80%);
}

/* Primär-Buttons & Fortschritt: Marken-Verlauf */
.btn-primary {
    background-image: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand2, var(--brand)) 78%, var(--brand)));
    border-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand2, var(--brand)));
    border-color: transparent;
}
.progress-bar,
.prog-bar,
#course-progress-bar {
    background-image: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand2, var(--brand)) 72%, var(--brand)));
}

/* Karten mit leichtem Marken-Schimmer beim Hover */
.surface:hover,
.mode-card:hover {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--bs-border-color));
}