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