/* ════════════════════════════════════════════════════════════
   app.css — App-spezifisches CSS, ausgelagert aus index.php.
   Wird per file_exists()-Check geladen; falls diese Datei fehlt,
   nutzt index.php automatisch das eingebettete Fallback-CSS.
   ════════════════════════════════════════════════════════════ */

/* ── 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%)
    }
}

/* ── APP-SPECIFIC (nur index.php) ─────────────────────────── */
/* ══ VARIABLES ══════════════════════════════════════════════ */
:root {
    --brand: #0e6f68; /* Petrol - eine Akzentfarbe */
    --brand2: #0a544e; /* dunkleres Petrol (Alias, keine Verlaeufe mehr) */
    --brand-rgb: 14, 111, 104;
    --green: #22c55e;
    --red: #ef4444;
    --yellow: #f59e0b;
    --orange: #f97316;
    --radius: 12px;
    --radius-sm: 10px;
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --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;
    padding: 8px 4px;
    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: none
}

@media (min-width: 768px) {
    .top-nav {
        display: flex
    }

    body {
        padding-bottom: 20px
    }
}

.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(14, 111, 104, .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)
}

/* ══ 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;
    }
}

/* ════════════════════════════════════════════════════════════
   DESIGN-LAYER 2026 — "Prüfungsbogen"
   Eine Akzentfarbe (Petrol), Inter fürs UI, Source Serif 4 für
   Fragentexte, keine Verläufe, ruhige Flächen.
   ════════════════════════════════════════════════════════════ */

/* 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;
}

/* Bootstrap-Primary auf die Markenfarbe mappen, damit .btn-primary,
   .bg-primary, Badges etc. automatisch mitziehen */
: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 — liest sich wie auf dem Prüfungsbogen ── */
#q-text, #modal-question, .flashcard-term, #fc-front-text {
    font-family: var(--font-serif);
    font-size: 1.18rem !important;
    line-height: 1.55 !important;
    letter-spacing: .002em;
}

@media (min-width: 768px) {
    #q-text, #modal-question {
        font-size: 1.3rem !important;
    }
}

/* ── RUHIGERES FEEDBACK: linker Akzentstreifen statt Vollfarbe ── */
#q-feedback.alert-success, #q-feedback.alert-danger {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
}

#q-feedback.alert-success {
    border-left-color: var(--green);
}

#q-feedback.alert-danger {
    border-left-color: var(--red);
}

/* ══ 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: 14px 16px;
}

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

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

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

/* ══ 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);
}

.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, 1fr);
    gap: 10px;
}

@media (min-width: 768px) {
    .learn-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

/* 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;
}

.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;
}

.learn-content strong {
    color: var(--bs-emphasis-color);
}

/* ── 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);
}