/* ═══════════════════════════════════════════════════════════════════
   TermTreks – Design System  ·  „Refined Parchment"
   Pfad: src/main/resources/static/css/termtreks.css

   Aufbau:
     1. Schriften (selbst gehostet, DSGVO-konform)
     2. Design-Tokens  (hell = Pergament, dunkel = Nachtbibliothek)
     3. Basis & Barrierefreiheit (Fokus, Skip-Link, reduced motion)
     4. Typografie
     5. Utility-Klassen (Layout / Abstände / Größen)
     6. Farb-Utilities (Token-basiert, themen-fähig)
     7. Navbar & Navigation
     8. Buttons
     9. Formulare
    10. Karten, Badges, Meldungen
    11. Inhaltsblöcke (Lernansicht)
    12. Übungsblöcke (Quiz, DragDrop, Hotspot, …)
    13. Admin-Bereich (funktionale Variante)
    14. Animationen
═══════════════════════════════════════════════════════════════════ */


/* ── 1. Schriften ───────────────────────────────────────────────── */

@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/cinzel-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/lora-var.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/lora-var-italic.woff2') format('woff2');
}


/* ── 2. Design-Tokens ───────────────────────────────────────────── */

:root {
    /* Flächen */
    --bg:          #F7F1E3;
    --bg-alt:      #F1E7D0;
    --surface:     #FCF8EE;
    --surface-2:   #F2EAD6;
    --surface-3:   #EADFC4;

    /* Text – alle AA-geprüft gegen --bg / --surface */
    --ink:         #2B2117;   /* Fließtext, ~13:1   */
    --ink-soft:    #55452F;   /* Sekundärtext ~7:1  */
    --ink-faint:   #6B5A41;   /* Nebentext   ~5.2:1 */

    /* Akzent Gold */
    --accent:        #7A5C0F; /* textsicher ~5.6:1  */
    --accent-strong: #5C450C;
    --accent-bright: #8B6914; /* Dekor/Border       */
    --accent-soft:   rgba(139,105,20,.10);
    --accent-softer: rgba(139,105,20,.05);

    /* Status */
    --success:      #1E6B38;
    --success-bg:   rgba(30,120,60,.10);
    --success-bd:   rgba(30,120,60,.35);
    --danger:       #9E2B25;
    --danger-bg:    rgba(160,44,44,.08);
    --danger-bd:    rgba(160,44,44,.35);
    --warning:      #8A4B08;
    --warning-bg:   rgba(180,100,30,.10);
    --warning-bd:   rgba(180,100,30,.35);
    --info:         #1D4F8C;
    --info-bg:      rgba(40,90,160,.08);
    --info-bd:      rgba(40,90,160,.3);

    /* Linien & Schatten */
    --border:       rgba(107,85,40,.30);
    --border-dim:   rgba(107,85,40,.16);
    --shadow-sm:    0 1px 3px rgba(58,42,20,.08);
    --shadow-md:    0 4px 16px rgba(58,42,20,.10);
    --shadow-lg:    0 12px 32px rgba(58,42,20,.14);

    /* Navigation */
    --navbar-bg:    rgba(247,241,227,.94);

    /* Buttons */
    --btn-bg:       linear-gradient(150deg, #6B5010, #453208);
    --btn-bg-hover: linear-gradient(150deg, #7A5C0F, #55400A);
    --btn-text:     #F7F0DC;

    /* Fokus-Ring – kontraststark auf allen Flächen */
    --focus:        #1D4F8C;

    /* Themen-Hilfsfarben (Admin-Typ-Codierung) */
    --hue-blue:     #1D4ED8;  --hue-blue-bg:   rgba(59,130,246,.10);  --hue-blue-bd:   rgba(59,130,246,.35);
    --hue-purple:   #6D28D9;  --hue-purple-bg: rgba(139,92,246,.10);  --hue-purple-bd: rgba(139,92,246,.35);
    --hue-green:    #136F35;  --hue-green-bg:  rgba(34,197,94,.10);   --hue-green-bd:  rgba(34,197,94,.35);
    --hue-orange:   #A34A08;  --hue-orange-bg: rgba(249,115,22,.10);  --hue-orange-bd: rgba(249,115,22,.35);
    --hue-cyan:     #0E7490;  --hue-cyan-bg:   rgba(6,182,212,.10);   --hue-cyan-bd:   rgba(6,182,212,.35);
    --hue-indigo:   #4338CA;  --hue-indigo-bg: rgba(99,102,241,.10);  --hue-indigo-bd: rgba(99,102,241,.35);
    --hue-violet:   #7C3AED;  --hue-violet-bg: rgba(167,139,250,.12); --hue-violet-bd: rgba(167,139,250,.4);
    --hue-yellow:   #854D0E;  --hue-yellow-bg: rgba(234,179,8,.12);   --hue-yellow-bd: rgba(234,179,8,.4);
    --hue-red:      #B91C1C;  --hue-red-bg:    rgba(220,38,38,.08);   --hue-red-bd:    rgba(220,38,38,.35);

    /* Alias für Bestands-JS */
    --gold:       var(--accent-bright);
    --gold-light: #A07828;
    --gold-dim:   var(--accent);

    color-scheme: light;
}

[data-theme="dark"] {
    --bg:          #201A11;
    --bg-alt:      #191409;
    --surface:     #2A2315;
    --surface-2:   #332B1B;
    --surface-3:   #3D3421;

    --ink:         #F0E7D3;   /* ~12:1 */
    --ink-soft:    #CBBD9F;   /* ~7:1  */
    --ink-faint:   #A6987C;   /* ~4.6:1 */

    --accent:        #D9AE45; /* ~7:1 auf --bg */
    --accent-strong: #E8C56A;
    --accent-bright: #D9AE45;
    --accent-soft:   rgba(217,174,69,.12);
    --accent-softer: rgba(217,174,69,.06);

    --success:      #7DD8A0;
    --success-bg:   rgba(74,222,128,.10);
    --success-bd:   rgba(74,222,128,.35);
    --danger:       #F09A93;
    --danger-bg:    rgba(239,68,68,.12);
    --danger-bd:    rgba(239,68,68,.4);
    --warning:      #F0B879;
    --warning-bg:   rgba(249,146,60,.12);
    --warning-bd:   rgba(249,146,60,.4);
    --info:         #93B8ED;
    --info-bg:      rgba(96,165,250,.12);
    --info-bd:      rgba(96,165,250,.35);

    --border:       rgba(217,174,69,.30);
    --border-dim:   rgba(217,174,69,.14);
    --shadow-sm:    0 1px 3px rgba(0,0,0,.4);
    --shadow-md:    0 4px 16px rgba(0,0,0,.45);
    --shadow-lg:    0 12px 32px rgba(0,0,0,.55);

    --navbar-bg:    rgba(32,26,17,.94);

    --btn-bg:       linear-gradient(150deg, #C79D38, #97742A);
    --btn-bg-hover: linear-gradient(150deg, #D9AE45, #B08830);
    --btn-text:     #221A0C;

    --focus:        #93B8ED;

    --hue-blue:     #8FB4EC;  --hue-blue-bg:   rgba(96,165,250,.12);  --hue-blue-bd:   rgba(96,165,250,.35);
    --hue-purple:   #C4A8F5;  --hue-purple-bg: rgba(167,139,250,.12); --hue-purple-bd: rgba(167,139,250,.35);
    --hue-green:    #8CD8A8;  --hue-green-bg:  rgba(74,222,128,.10);  --hue-green-bd:  rgba(74,222,128,.35);
    --hue-orange:   #F0B076;  --hue-orange-bg: rgba(251,146,60,.12);  --hue-orange-bd: rgba(251,146,60,.35);
    --hue-cyan:     #7DD3E8;  --hue-cyan-bg:   rgba(34,211,238,.10);  --hue-cyan-bd:   rgba(34,211,238,.3);
    --hue-indigo:   #B0B4F5;  --hue-indigo-bg: rgba(129,140,248,.12); --hue-indigo-bd: rgba(129,140,248,.35);
    --hue-violet:   #C9B2F7;  --hue-violet-bg: rgba(167,139,250,.14); --hue-violet-bd: rgba(167,139,250,.4);
    --hue-yellow:   #E8CF7A;  --hue-yellow-bg: rgba(234,179,8,.12);   --hue-yellow-bd: rgba(234,179,8,.35);
    --hue-red:      #F0A0A0;  --hue-red-bg:    rgba(248,113,113,.12); --hue-red-bd:    rgba(248,113,113,.4);

    --gold:       #D9AE45;
    --gold-light: #E8C56A;
    --gold-dim:   #C79D38;

    color-scheme: dark;
}


/* ── 3. Basis & Barrierefreiheit ────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Lora', Georgia, serif;
    font-size: 1.0625rem;           /* 17px */
    line-height: 1.75;
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* dezente Pergament-Textur, rein dekorativ */
.animated-bg {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse at 15% 20%, var(--accent-softer) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, var(--accent-softer) 0%, transparent 50%),
        var(--bg);
}
.animated-bg::after {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }
a:hover.no-underline, nav a:hover, .navbar a:hover { text-decoration: none; }

img, video { max-width: 100%; height: auto; }

button { font-family: inherit; }

/* Sichtbarer Fokus für Tastaturnutzer – überall */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* Skip-Link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--surface);
    color: var(--ink);
    padding: .75rem 1.25rem;
    border: 2px solid var(--accent);
    border-radius: 0 0 6px 0;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
    outline: 3px solid var(--focus);
}

/* Nur für Screenreader */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Bewegung reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ── 4. Typografie ──────────────────────────────────────────────── */

h1, h2, h3 {
    font-family: 'Cinzel', 'Lora', serif;
    color: var(--ink);
    letter-spacing: .03em;
    line-height: 1.25;
    margin: 0 0 .5em;
}
h4, h5, h6 {
    font-family: 'Lora', serif;
    color: var(--ink);
    margin: 0 0 .4em;
}

.page-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 700;
    color: var(--ink);
}
.page-title .title-accent { color: var(--accent); }

.page-subtitle {
    color: var(--ink-soft);
    font-size: 1rem;
    margin-top: .25rem;
}

.soft-gradient {
    font-family: 'Cinzel', serif;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 60%, var(--accent-strong) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (forced-colors: active), (prefers-contrast: more) {
    .soft-gradient {
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--ink);
    }
}

/* Überschriften aus dem Headline-Block */
.section-h1 { font-family:'Cinzel',serif; font-size:1.75rem; font-weight:700; color:var(--ink); margin:.75rem 0 .5rem; letter-spacing:.03em; }
.section-h2 { font-family:'Cinzel',serif; font-size:1.4rem;  font-weight:600; color:var(--ink); margin:.65rem 0 .4rem; letter-spacing:.03em; }
.section-h3 { font-family:'Cinzel',serif; font-size:1.15rem; font-weight:600; color:var(--ink); margin:.55rem 0 .35rem; }
.section-h4 { font-family:'Lora',serif;  font-size:1.1rem;  font-weight:600; font-style:italic; color:var(--ink); margin:.45rem 0 .3rem; }
.section-h5 { font-family:'Lora',serif;  font-size:1rem;    font-weight:600; font-style:italic; color:var(--ink-soft); margin:.4rem 0 .25rem; }
.section-h6 { font-family:'Lora',serif;  font-size:.95rem;  font-weight:600; color:var(--ink-faint); margin:.35rem 0 .2rem; }

.ornament-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 24px 0;
    color: var(--accent);
    font-family: 'Cinzel', serif;
    font-size: .85rem;
}
.ornament-divider::before,
.ornament-divider::after {
    content: '';
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}


/* ── 5. Utility-Klassen ─────────────────────────────────────────── */

/* Layout */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.block       { display: block; }
.inline-block{ display: inline-block; }
.inline      { display: inline; }
.hidden      { display: none; }

.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1 1 0%; min-width: 0; }
.flex-shrink-0  { flex-shrink: 0; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.self-center    { align-self: center; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.ml-auto  { margin-left: auto; }
.mx-auto  { margin-left: auto; margin-right: auto; }
.col-span-full { grid-column: 1 / -1; }
.min-w-0   { min-width: 0; }
.min-w-max { min-width: max-content; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.top-0    { top: 0; }
.top-4    { top: 1rem; }
.top-5    { top: 1.25rem; }
.right-4  { right: 1rem; }
.bottom-0 { bottom: 0; }
.left-1\/2 { left: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Abstände (0.25rem-Skala) */
.p-1 { padding: .25rem; }  .p-2 { padding: .5rem; }   .p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }    .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }    .p-10 { padding: 2.5rem; }
.px-1\.5 { padding-left:.375rem; padding-right:.375rem; }
.px-2 { padding-left:.5rem;  padding-right:.5rem; }
.px-3 { padding-left:.75rem; padding-right:.75rem; }
.px-4 { padding-left:1rem;   padding-right:1rem; }
.px-5 { padding-left:1.25rem;padding-right:1.25rem; }
.px-6 { padding-left:1.5rem; padding-right:1.5rem; }
.py-0\.5 { padding-top:.125rem; padding-bottom:.125rem; }
.py-1 { padding-top:.25rem;  padding-bottom:.25rem; }
.py-2 { padding-top:.5rem;   padding-bottom:.5rem; }
.py-2\.5 { padding-top:.625rem; padding-bottom:.625rem; }
.py-3 { padding-top:.75rem;  padding-bottom:.75rem; }
.py-4 { padding-top:1rem;    padding-bottom:1rem; }
.py-10 { padding-top:2.5rem; padding-bottom:2.5rem; }
.py-12 { padding-top:3rem;   padding-bottom:3rem; }
.py-16 { padding-top:4rem;   padding-bottom:4rem; }
.py-20 { padding-top:5rem;   padding-bottom:5rem; }
.pt-2 { padding-top:.5rem; }  .pt-4 { padding-top:1rem; }  .pt-6 { padding-top:1.5rem; }
.mb-0 { margin-bottom:0; }        .mb-1 { margin-bottom:.25rem; }
.mb-1\.5 { margin-bottom:.375rem; } .mb-2 { margin-bottom:.5rem; }
.mb-3 { margin-bottom:.75rem; }   .mb-4 { margin-bottom:1rem; }
.mb-5 { margin-bottom:1.25rem; }  .mb-6 { margin-bottom:1.5rem; }
.mb-7 { margin-bottom:1.75rem; }  .mb-8 { margin-bottom:2rem; }
.mb-10 { margin-bottom:2.5rem; }
.mt-0\.5 { margin-top:.125rem; }  .mt-1 { margin-top:.25rem; }
.mt-2 { margin-top:.5rem; }       .mt-3 { margin-top:.75rem; }
.mt-4 { margin-top:1rem; }        .mt-5 { margin-top:1.25rem; }
.mt-6 { margin-top:1.5rem; }      .mt-8 { margin-top:2rem; }
.mt-10 { margin-top:2.5rem; }
.mr-1 { margin-right:.25rem; }    .mr-1\.5 { margin-right:.375rem; }
.mr-16 { margin-right:4rem; }
.ml-2 { margin-left:.5rem; }
.my-2 { margin-top:.5rem; margin-bottom:.5rem; }
.my-5 { margin-top:1.25rem; margin-bottom:1.25rem; }
.my-8 { margin-top:2rem; margin-bottom:2rem; }

.gap-1 { gap:.25rem; }  .gap-1\.5 { gap:.375rem; }  .gap-2 { gap:.5rem; }
.gap-3 { gap:.75rem; }  .gap-4 { gap:1rem; }         .gap-5 { gap:1.25rem; }
.gap-6 { gap:1.5rem; }  .gap-8 { gap:2rem; }

.space-y-0\.5 > * + * { margin-top:.125rem; }
.space-y-1 > * + * { margin-top:.25rem; }
.space-y-2 > * + * { margin-top:.5rem; }
.space-y-3 > * + * { margin-top:.75rem; }
.space-y-4 > * + * { margin-top:1rem; }
.space-y-5 > * + * { margin-top:1.25rem; }
.space-y-6 > * + * { margin-top:1.5rem; }
.space-y-8 > * + * { margin-top:2rem; }
.space-y-10 > * + * { margin-top:2.5rem; }
.space-x-1 > * + * { margin-left:.25rem; }
.space-x-4 > * + * { margin-left:1rem; }

/* Größen */
.w-3 { width:.75rem; }   .h-3 { height:.75rem; }
.w-3\.5 { width:.875rem; } .h-3\.5 { height:.875rem; }
.w-4 { width:1rem; }     .h-4 { height:1rem; }
.w-5 { width:1.25rem; }  .h-5 { height:1.25rem; }
.w-6 { width:1.5rem; }   .h-6 { height:1.5rem; }
.w-7 { width:1.75rem; }  .h-7 { height:1.75rem; }
.w-8 { width:2rem; }     .h-8 { height:2rem; }
.w-9 { width:2.25rem; }  .h-9 { height:2.25rem; }
.w-10 { width:2.5rem; }  .h-10 { height:2.5rem; }
.w-12 { width:3rem; }    .h-12 { height:3rem; }
.w-14 { width:3.5rem; }  .h-14 { height:3.5rem; }
.w-16 { width:4rem; }    .h-16 { height:4rem; }
.w-20 { width:5rem; }    .h-20 { height:5rem; }
.w-72 { width:18rem; }
.w-full { width:100%; }
.w-5\/12 { width:41.666667%; }
.h-auto { height:auto; }
.max-w-full { max-width:100%; }
.max-w-sm  { max-width:24rem; }
.max-w-md  { max-width:28rem; }
.max-w-2xl { max-width:42rem; }
.max-w-3xl { max-width:48rem; }
.max-w-4xl { max-width:56rem; }
.max-w-5xl { max-width:64rem; }
.max-w-6xl { max-width:72rem; }
.max-w-7xl { max-width:80rem; }
.max-h-48  { max-height:12rem; }
.min-h-8   { min-height:2rem; }
.min-h-16  { min-height:4rem; }
.min-h-screen { min-height:100vh; }
.h-screen  { height:100vh; }

/* Text */
.text-xs   { font-size:.8125rem; line-height:1.5; }   /* 13px – bewusst größer als Tailwind */
.text-sm   { font-size:.9375rem; line-height:1.55; }  /* 15px */
.text-base { font-size:1.0625rem; line-height:1.7; }
.text-lg   { font-size:1.15rem; line-height:1.6; }
.text-xl   { font-size:1.3rem;  line-height:1.5; }
.text-2xl  { font-size:1.55rem; line-height:1.35; }
.text-3xl  { font-size:1.9rem;  line-height:1.25; }
.text-4xl  { font-size:2.3rem;  line-height:1.15; }
.text-5xl  { font-size:2.8rem;  line-height:1.1; }
.font-normal   { font-weight:400; }
.font-medium   { font-weight:500; }
.font-semibold { font-weight:600; }
.font-bold     { font-weight:700; }
.italic    { font-style:italic; }
.uppercase { text-transform:uppercase; }
.underline { text-decoration:underline; }
.text-center  { text-align:center; }
.text-left    { text-align:left; }
.text-justify { text-align:justify; hyphens:auto; }
.tracking-wide   { letter-spacing:.025em; }
.tracking-wider  { letter-spacing:.05em; }
.tracking-widest { letter-spacing:.1em; }
.leading-8 { line-height:1.9; }
.leading-relaxed { line-height:1.75; }
.font-mono { font-family:'Courier New', ui-monospace, monospace; }

/* Rahmen & Radien */
.border   { border:1px solid var(--border-dim); }
.border-2 { border-width:2px; border-style:solid; }
.border-t { border-top:1px solid var(--border-dim); }
.border-b { border-bottom:1px solid var(--border-dim); }
.border-r { border-right:1px solid var(--border-dim); }
.border-dashed { border-style:dashed; }
.border-collapse { border-collapse:collapse; }
.divide-y > * + * { border-top:1px solid var(--border-dim); }
.last\:border-0:last-child { border:0; }
.rounded      { border-radius:4px; }
.rounded-md   { border-radius:5px; }
.rounded-lg   { border-radius:6px; }
.rounded-xl   { border-radius:10px; }
.rounded-2xl  { border-radius:14px; }
.rounded-full { border-radius:9999px; }

/* Effekte */
.shadow-sm { box-shadow:var(--shadow-sm); }
.shadow    { box-shadow:var(--shadow-sm); }
.shadow-lg { box-shadow:var(--shadow-md); }
.shadow-xl { box-shadow:var(--shadow-lg); }
.shadow-2xl{ box-shadow:var(--shadow-lg); }
.opacity-30 { opacity:.3; }
.opacity-40 { opacity:.4; }
.opacity-50 { opacity:.5; }
.opacity-70 { opacity:.7; }
.opacity-80 { opacity:.8; }
.overflow-hidden { overflow:hidden; }
.overflow-x-auto { overflow-x:auto; }
.overflow-y-auto { overflow-y:auto; }
.object-cover   { object-fit:cover; }
.object-contain { object-fit:contain; }
.transition, .transition-all, .transition-colors { transition:all .18s ease; }
.cursor-pointer { cursor:pointer; }
.cursor-grab    { cursor:grab; }
.active\:cursor-grabbing:active { cursor:grabbing; }
.select-none { user-select:none; }
.pointer-events-none { pointer-events:none; }
.backdrop-blur-sm, .backdrop-blur-md { backdrop-filter:blur(8px); }
.accent-teal-400, .accent-green-400, .accent-purple-400,
input[type=checkbox], input[type=radio] { accent-color:var(--accent-bright); }
.animate-spin { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Responsive */
@media (min-width: 640px) {
    .sm\:block { display:block; }
    .sm\:flex  { display:flex; }
    .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .sm\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .sm\:grid-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .sm\:px-6 { padding-left:1.5rem; padding-right:1.5rem; }
}
@media (min-width: 768px) {
    .md\:block { display:block; }
    .md\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .lg\:px-8 { padding-left:2rem; padding-right:2rem; }
}


/* ── 6. Farb-Utilities (Token-basiert) ──────────────────────────── */

/* Ehemalige teal-Akzente → Gold */
.text-teal-300, .text-teal-400, .text-teal-500 { color:var(--accent); }
.text-teal-600, .text-teal-700 { color:var(--accent-strong); }
.hover\:text-teal-300:hover { color:var(--accent-strong); }
.group:hover .group-hover\:text-teal-300 { color:var(--accent-strong); }
.group:hover .group-hover\:text-white    { color:var(--ink); }
.bg-teal-500\/5, .bg-teal-500\/8, .bg-teal-500\/10, .bg-teal-500\/15, .bg-teal-500\/20, .bg-teal-500\/25 { background:var(--accent-soft); }
.hover\:bg-teal-500\/5:hover { background:var(--accent-softer); }
.hover\:border-teal-400:hover { border-color:var(--accent-bright); }
.border-teal-500 { border-color:var(--accent-bright); }
.border-t-transparent { border-top-color:transparent; }
.border-b-2 { border-bottom-width:2px; border-bottom-style:solid; }
.border-transparent { border-color:transparent; }
.hover\:bg-teal-500\/20:hover, .hover\:bg-teal-500\/25:hover { background:var(--accent-soft); }
.border-teal-500\/20, .border-teal-500\/25, .border-teal-500\/30, .border-teal-500\/40 { border-color:var(--border); }
.hover\:border-teal-500\/40:hover, .hover\:border-teal-500\/50:hover, .hover\:border-teal-500\/60:hover { border-color:var(--accent-bright); }
.border-teal-400 { border-color:var(--accent-bright); }

/* Graustufen → Tinte */
.text-white, .text-gray-100, .text-gray-200, .text-black { color:var(--ink); }
.text-gray-300, .text-slate-300 { color:var(--ink-soft); }
.text-gray-400 { color:var(--ink-soft); }
.text-gray-500 { color:var(--ink-faint); }
.text-gray-600 { color:var(--ink-faint); }
.hover\:text-gray-200:hover { color:var(--ink); }

/* Flächen */
.bg-slate-900, .bg-slate-900\/40 { background:var(--bg-alt); }
.bg-slate-800, .bg-slate-800\/30, .bg-slate-800\/40, .bg-slate-800\/50, .bg-slate-800\/60, .bg-slate-800\/90 { background:var(--surface); }
.bg-slate-700, .bg-slate-700\/40, .bg-slate-700\/50, .bg-gray-700\/40, .bg-gray-700\/50 { background:var(--surface-2); }
.hover\:bg-slate-700:hover, .hover\:bg-slate-700\/60:hover, .hover\:bg-slate-600:hover { background:var(--surface-3); }
.hover\:bg-slate-800\/30:hover, .hover\:bg-slate-700\/40:hover { background:var(--surface-2); }
.bg-black\/70 { background:rgba(20,14,5,.65); }

/* Rahmen */
.border-slate-500, .border-slate-500\/30, .border-slate-600, .border-slate-600\/40, .border-slate-600\/60,
.border-slate-700, .border-slate-700\/30, .border-slate-700\/50,
.border-gray-600\/30, .border-gray-700\/50, .border-gray-800 { border-color:var(--border-dim); }
.hover\:border-slate-400:hover { border-color:var(--border); }
.divide-slate-700\/50 > * + * { border-color:var(--border-dim); }

/* Status-Farben */
.text-red-300, .text-red-400 { color:var(--danger); }
.hover\:text-red-300:hover { color:var(--danger); text-decoration:underline; }
.bg-red-500\/10, .bg-red-500\/15 { background:var(--danger-bg); }
.hover\:bg-red-500\/20:hover, .hover\:bg-red-900\/20:hover { background:var(--danger-bg); }
.border-red-500\/30, .border-red-900\/50 { border-color:var(--danger-bd); }
.text-green-300, .text-green-400 { color:var(--hue-green); }
.hover\:text-green-300:hover { color:var(--hue-green); }
.bg-green-500\/20 { background:var(--hue-green-bg); }
.border-green-500\/30 { border-color:var(--hue-green-bd); }
.hover\:border-green-500\/50:hover { border-color:var(--hue-green); }
.text-orange-100, .text-orange-200, .text-orange-300, .text-orange-400 { color:var(--warning); }
.bg-orange-500\/10, .bg-orange-500\/20, .bg-orange-600\/30, .bg-orange-500\/5, .bg-orange-500\/8 { background:var(--warning-bg); }
.hover\:bg-orange-500\/10:hover { background:var(--warning-bg); }
.border-orange-400\/40, .border-orange-500\/20, .border-orange-500\/30 { border-color:var(--warning-bd); }
.hover\:border-orange-500\/60:hover { border-color:var(--warning); }
.text-yellow-300 { color:var(--hue-yellow); }
.bg-yellow-500\/10, .bg-yellow-500\/20 { background:var(--hue-yellow-bg); }
.border-yellow-500\/30 { border-color:var(--hue-yellow-bd); }
.text-blue-300, .text-blue-400 { color:var(--hue-blue); }
.hover\:text-blue-300:hover { color:var(--hue-blue); }
.bg-blue-500\/8, .bg-blue-500\/15, .bg-blue-500\/20 { background:var(--hue-blue-bg); }
.border-blue-500\/20, .border-blue-500\/25, .border-blue-500\/30 { border-color:var(--hue-blue-bd); }
.hover\:border-blue-500\/50:hover { border-color:var(--hue-blue); }
.text-purple-300, .text-purple-400 { color:var(--hue-purple); }
.hover\:text-purple-300:hover { color:var(--hue-purple); }
.bg-purple-500\/5, .bg-purple-500\/10, .bg-purple-500\/15, .bg-purple-500\/20 { background:var(--hue-purple-bg); }
.hover\:bg-purple-500\/10:hover, .hover\:bg-purple-500\/20:hover { background:var(--hue-purple-bg); }
.border-purple-500\/25, .border-purple-500\/30, .border-purple-500\/40 { border-color:var(--hue-purple-bd); }
.hover\:border-purple-500\/60:hover { border-color:var(--hue-purple); }
.text-cyan-300 { color:var(--hue-cyan); }
.bg-cyan-500\/20 { background:var(--hue-cyan-bg); }
.border-cyan-500\/30 { border-color:var(--hue-cyan-bd); }
.text-indigo-300 { color:var(--hue-indigo); }
.bg-indigo-500\/20 { background:var(--hue-indigo-bg); }
.border-indigo-500\/30 { border-color:var(--hue-indigo-bd); }
.text-violet-300, .text-violet-400 { color:var(--hue-violet); }
.hover\:text-violet-300:hover { color:var(--hue-violet); }
.bg-violet-500\/8, .bg-violet-500\/20 { background:var(--hue-violet-bg); }
.border-violet-500\/20, .border-violet-500\/30 { border-color:var(--hue-violet-bd); }
.hover\:border-violet-500\/50:hover { border-color:var(--hue-violet); }
.bg-slate-500\/20 { background:var(--surface-3); }


/* ── 7. Navbar & Navigation ─────────────────────────────────────── */

.navbar {
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--border-dim);
    backdrop-filter: blur(10px);
}

.nav-logo {
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-shrink: 0;
}
.nav-logo-term {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .08em;
}
.nav-logo-treks {
    font-family: 'Lora', serif;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--ink);
    letter-spacing: .03em;
}
.nav-logo-admin-badge {
    font-family: 'Lora', serif;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--accent);
    margin-left: 8px;
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 4px;
    align-self: center;
}

/* Hauptmenü-Links */
.menu-hover {
    font-family: 'Lora', serif;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid transparent;
    padding: .45rem 1rem;
    border-radius: 6px;
    transition: all .2s;
    color: var(--ink-soft);
}
.menu-hover:hover {
    border-color: var(--border-dim);
    background: var(--accent-soft);
    color: var(--accent-strong);
}
.menu-hover[aria-current="page"], .active-tab {
    color: var(--accent) !important;
    border-color: var(--border) !important;
    background: var(--accent-soft) !important;
}

/* Deaktivierte „Bald verfügbar"-Punkte */
.menu-soon {
    font-family: 'Lora', serif;
    font-size: .9375rem;
    font-weight: 600;
    padding: .45rem 1rem;
    border-radius: 6px;
    color: var(--ink-faint);
    cursor: not-allowed;
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
}
.menu-soon .soon-tag {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 1px solid var(--border-dim);
    border-radius: 4px;
    padding: 0 .35rem;
    color: var(--ink-faint);
}

/* Sekundäre Navbar-Buttons */
.nav-btn, .nav-btn-outline, .nav-btn-dim, .nav-btn-danger {
    font-family: 'Lora', serif;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .4rem .9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    background: transparent;
}
.nav-btn { color: var(--ink-soft); border: none; }
.nav-btn:hover { color: var(--ink); background: var(--accent-soft); }
.nav-btn-outline { color: var(--ink); border: 1px solid var(--border); }
.nav-btn-outline:hover { background: var(--accent-soft); border-color: var(--accent-bright); }
.nav-btn-dim { color: var(--ink-faint); border: 1px solid var(--border-dim); }
.nav-btn-dim:hover { color: var(--ink); border-color: var(--border); }
.nav-btn-danger { color: var(--ink-faint); border: none; }
.nav-btn-danger:hover { color: var(--danger); background: var(--danger-bg); }

/* Theme-Umschalter */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border-dim);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all .2s;
}
.theme-toggle:hover { border-color: var(--border); background: var(--accent-soft); color: var(--accent); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Mobile: Hamburger + Drawer */
.nav-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 8px;
    border: 1px solid var(--border-dim);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}
.mobile-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(320px, 85vw);
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 70;
    transform: translateX(-102%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 1rem;
}
.mobile-drawer.open { transform: translateX(0); }
.drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(20,14,5,.45);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer-close {
    align-self: flex-end;
    background: none; border: none;
    color: var(--ink-soft);
    width: 40px; height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.drawer-close:hover { background: var(--accent-soft); color: var(--ink); }
.drawer-section-label {
    font-family: 'Cinzel', serif;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 1rem 0 .5rem .5rem;
}

@media (max-width: 767px) {
    .nav-hamburger { display: inline-flex; }
    .nav-desktop-menu { display: none; }
}

/* Seiten-Navigation (Kapitel-Sidebar) */
.nav-item {
    display: flex;
    align-items: center;
    padding: .55rem .75rem;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    font-family: 'Lora', serif;
    font-size: .9375rem;
    color: var(--ink-soft);
    text-decoration: none;
    transition: all .18s;
    line-height: 1.45;
}
.nav-item:hover {
    color: var(--ink);
    border-left-color: var(--accent-bright);
    background: var(--accent-soft);
    text-decoration: none;
}
.nav-item.active, .nav-item[aria-current="page"] {
    color: var(--accent-strong);
    border-left-color: var(--accent-bright);
    background: var(--accent-soft);
    font-weight: 600;
}


/* ── 8. Buttons ─────────────────────────────────────────────────── */

.btn-primary, .btn-submit, .submit-btn, .quiz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--btn-bg);
    color: var(--btn-text);
    font-family: 'Lora', serif;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .65rem 1.5rem;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.btn-submit { width: 100%; padding: .8rem 1.5rem; }
.btn-primary:hover, .btn-submit:hover, .submit-btn:hover, .quiz-btn:hover {
    background: var(--btn-bg-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--btn-text);
}
.btn-primary:disabled, .btn-submit:disabled, .quiz-btn:disabled {
    opacity: .45; cursor: not-allowed; transform: none; box-shadow: none;
}
.quiz-btn { margin-top: 18px; }

.btn-secondary, .ws-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1.4rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    font-family: 'Lora', serif;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.btn-secondary:hover, .ws-reset-btn:hover {
    border-color: var(--accent-bright);
    color: var(--accent);
    background: var(--accent-softer);
    text-decoration: none;
}

.btn-add {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: 'Lora', serif;
    font-size: .875rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 7px;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
}
.btn-add:hover { background: var(--accent-soft); border-color: var(--accent-bright); text-decoration: none; }

/* Kleine Icon-Aktionsbuttons (Admin-Listen) */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 6px;
    border: 1px solid;
    cursor: pointer;
    transition: all .15s;
    background: none;
    color: inherit;
    text-decoration: none;
}
.btn-edit { border-color: var(--border-dim); color: var(--ink-soft); }
.btn-edit:hover { border-color: var(--accent-bright); color: var(--accent); background: var(--accent-soft); }
.btn-up, .btn-down { border-color: var(--border-dim); color: var(--ink-faint); }
.btn-up:hover, .btn-down:hover { border-color: var(--border); color: var(--ink-soft); }
.btn-up:disabled, .btn-down:disabled { opacity: .3; cursor: not-allowed; }
.btn-delete { border-color: var(--danger-bd); color: var(--danger); }
.btn-delete:hover { background: var(--danger-bg); }

/* Ausrichtungs-Buttons (Admin-Bild/Video) */
.align-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .875rem;
    cursor: pointer;
    transition: all .15s;
}
.align-btn:hover { border-color: var(--border); }
.align-btn.active {
    border-color: var(--accent-bright);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}


/* ── 9. Formulare ───────────────────────────────────────────────── */

.form-label {
    display: block;
    font-family: 'Lora', serif;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: .4rem;
}
.form-label .required, .form-label .text-red-400 { color: var(--danger); }

.form-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: .65rem .9rem;
    width: 100%;
    color: var(--ink);
    font-family: 'Lora', serif;
    font-size: 1rem;
    transition: border-color .2s, box-shadow .2s;
}
.form-input:focus {
    outline: none;
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-input:hover { border-color: var(--accent-bright); }
.form-input::placeholder { color: var(--ink-faint); font-style: italic; }
select.form-input option { background: var(--surface); color: var(--ink); }

textarea.form-input {
    resize: vertical;
    min-height: 110px;
    line-height: 1.7;
}

.invite-input {
    background: var(--surface);
    border: 1px solid var(--accent-bright);
    border-radius: 7px;
    padding: .65rem .9rem;
    width: 100%;
    color: var(--accent);
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .12em;
    transition: all .2s;
}
.invite-input:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); }
.invite-input::placeholder { color: var(--ink-faint); font-weight: 400; letter-spacing: .05em; }

.count-input {
    width: 72px;
    padding: .5rem .6rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--ink);
    font-family: 'Lora', serif;
    font-size: 1rem;
}

.table-cell-input {
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 5px;
    padding: .45rem .6rem;
    color: var(--ink);
    width: 100%;
    font-size: .9375rem;
    font-family: 'Lora', serif;
}
.table-cell-input:focus { outline: none; border-color: var(--accent-bright); }

.wb-part-row input, .ws-pair-row input, .decl-admin-row input {
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 5px;
    padding: .45rem .6rem;
    color: var(--ink);
    font-size: .9375rem;
    font-family: 'Lora', serif;
}
.wb-part-row input:focus, .ws-pair-row input:focus, .decl-admin-row input:focus {
    outline: none; border-color: var(--accent-bright);
}

.answer-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    padding: .6rem .875rem;
    margin-bottom: .5rem;
}
.answer-row input[type="checkbox"] {
    width: 1.1rem; height: 1.1rem;
    accent-color: var(--accent-bright);
    flex-shrink: 0;
}


/* ── 10. Karten, Badges, Meldungen ──────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}
.stat-value { font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.stat-label { font-size: .9rem; color: var(--ink-soft); margin-top: .15rem; }

.dash-card {
    display: block;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all .2s;
    color: inherit;
}
.dash-card:hover {
    border-color: var(--accent-bright);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}
.dash-icon {
    width: 48px; height: 48px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}

.lesson-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-dim);
    transition: all .3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.lesson-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.lesson-card:hover::before { transform: scaleX(1); }
.lesson-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border);
}
.lesson-icon { background: var(--accent-soft); border-radius: 14px; transition: transform .3s ease; }
.lesson-card:hover .lesson-icon { transform: scale(1.06); }
.lesson-card:hover .arrow-icon  { transform: translateX(5px); }
.arrow-icon { transition: transform .3s ease; }

.preview-card {
    background: var(--accent-softer);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}
.preview-title {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    min-height: 1.6rem;
}

/* Badges */
.badge {
    font-size: .78rem;
    font-weight: 600;
    padding: .18rem .6rem;
    border-radius: 5px;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Lora', serif;
    letter-spacing: .02em;
}
.badge-text     { background:var(--hue-blue-bg);   color:var(--hue-blue);   border:1px solid var(--hue-blue-bd); }
.badge-head     { background:var(--accent-soft);   color:var(--accent);     border:1px solid var(--border); }
.badge-image    { background:var(--hue-purple-bg); color:var(--hue-purple); border:1px solid var(--hue-purple-bd); }
.badge-video    { background:var(--hue-orange-bg); color:var(--hue-orange); border:1px solid var(--hue-orange-bd); }
.badge-warning  { background:var(--warning-bg);    color:var(--warning);    border:1px solid var(--warning-bd); }
.badge-quiz     { background:var(--hue-green-bg);  color:var(--hue-green);  border:1px solid var(--hue-green-bd); }
.badge-table    { background:var(--hue-cyan-bg);   color:var(--hue-cyan);   border:1px solid var(--hue-cyan-bd); }
.badge-timeline { background:var(--hue-purple-bg); color:var(--hue-purple); border:1px solid var(--hue-purple-bd); }
.badge-wbreak   { background:var(--accent-soft);   color:var(--accent);     border:1px solid var(--border); }
.badge-def      { background:var(--hue-indigo-bg); color:var(--hue-indigo); border:1px solid var(--hue-indigo-bd); }
.badge-self       { color:var(--accent); border:1px solid var(--border); }
.badge-role-admin { background:var(--accent-soft); color:var(--accent); border:1px solid var(--border); }
.badge-role-user  { background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--border-dim); }
.badge-active     { background:var(--success-bg); color:var(--success); border:1px solid var(--success-bd); }
.badge-locked     { background:var(--danger-bg);  color:var(--danger);  border:1px solid var(--danger-bd); }

.type-banner {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem;
    border-radius: 6px;
    font-family: 'Lora', serif;
    font-size: .85rem;
    font-weight: 600;
}

/* Meldungen / Flash */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .8rem 1rem;
    border-radius: 8px;
    font-size: .9375rem;
    border: 1px solid;
    margin-bottom: 1rem;
}
.alert svg { flex-shrink: 0; margin-top: .15rem; }
.alert-success { background: var(--success-bg); border-color: var(--success-bd); color: var(--success); }
.alert-error   { background: var(--danger-bg);  border-color: var(--danger-bd);  color: var(--danger); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-bd);    color: var(--info); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-bd); color: var(--warning); }


/* ── 11. Inhaltsblöcke (Lernansicht) ────────────────────────────── */

.content-text {
    color: var(--ink);
    font-family: 'Lora', serif;
    font-size: 1.0625rem;
    line-height: 1.85;
    letter-spacing: .01em;
    white-space: pre-wrap;
}
/* Kompatibilität mit alter Klassenkombination */
.text-gray-200.leading-8 {
    color: var(--ink);
    font-size: 1.0625rem;
    line-height: 1.85;
}

/* Hinweis/Warnung */
.warning-block {
    border: 1px solid var(--warning-bd);
    background: var(--warning-bg);
    border-radius: 10px;
    overflow: hidden;
}
.warning-block-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--warning-bd);
    color: var(--warning);
    font-weight: 600;
    font-size: .9375rem;
}
.warning-block-body {
    padding: .9rem 1.2rem;
    color: var(--ink);
    line-height: 1.75;
}

/* Bild / Video */
.media-figure { margin: .75rem 0; }
.media-figure img, .media-figure video {
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    display: block;
}
.media-figure figcaption {
    color: var(--ink-faint);
    font-style: italic;
    font-size: .9rem;
    margin-top: .5rem;
}

/* Block-Untertitel („Interner Titel" über Blöcken) */
.block-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    margin-bottom: .5rem;
}

/* Tabelle (Lernansicht) */
.content-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border-dim);
    box-shadow: var(--shadow-sm);
}
.content-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.content-table th {
    background: var(--surface-2);
    color: var(--accent-strong);
    font-family: 'Lora', serif;
    font-weight: 700;
    text-align: left;
    padding: .7rem 1rem;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.content-table td {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--border-dim);
    color: var(--ink);
}
.content-table tr:last-child td { border-bottom: 0; }
.content-table tbody tr:hover td { background: var(--accent-softer); }

/* Definition */
.def-block { margin: 20px 0; }
.def-card {
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-left: 4px solid var(--accent-bright);
    border-radius: 0 10px 10px 0;
    overflow: hidden;
}
.def-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 1.2rem;
    background: var(--accent-softer);
    border-bottom: 1px solid var(--border-dim);
}
.def-term {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .03em;
}
.def-badge {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--border);
    padding: .15rem .55rem;
    border-radius: 5px;
    white-space: nowrap;
}
.def-text {
    padding: .95rem 1.2rem;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ink);
    margin: 0;
}

/* Wortzerlegung */
.wb-block { margin: 20px 0; }
.wb-term {
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .04em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-dim);
}
.wb-parts { display: flex; flex-direction: column; gap: 8px; }
.wb-part {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: .6rem .9rem;
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    font-size: 1rem;
}
.wb-part-text { font-weight: 600; color: var(--ink); min-width: 130px; }
.wb-arrow { color: var(--accent); }
.wb-translation { color: var(--ink); flex: 1; min-width: 120px; }
.wb-badge {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: 1px solid var(--border);
    padding: .12rem .5rem;
    border-radius: 5px;
    white-space: nowrap;
}
.wb-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: .7rem .9rem;
    background: var(--accent-softer);
    border-left: 3px solid var(--accent-bright);
    border-radius: 0 8px 8px 0;
    font-size: .95rem;
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.7;
}
.wb-note svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

/* Zeitstrahl */
.timeline-line {
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--border) 8%, var(--border) 92%, transparent);
}
.timeline-dot {
    width: 14px; height: 14px;
    background: var(--accent-bright);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 3px var(--border);
    border-radius: 50%;
}
.timeline-card {
    background: var(--surface);
    border: 1px solid var(--border-dim);
    box-shadow: var(--shadow-sm);
}
.timeline-year {
    display: inline-block;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--border);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .05em;
    border-radius: 5px;
    padding: .1rem .6rem;
}
@media (max-width: 640px) {
    .timeline-line { left: 8px !important; transform: none; }
    .timeline-dot  { left: 8px !important; transform: none; }
    .timeline-card { width: calc(100% - 36px) !important; margin-left: 36px !important; text-align: left !important; }
    .timeline-spacer { display: none; }
}

/* Unterkapitel-Karten */
.child-card {
    display: block;
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border-dim);
    transition: all .2s;
    text-decoration: none;
    color: inherit;
}
.child-card:hover {
    border-color: var(--accent-bright);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    text-decoration: none;
}
.child-card-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--accent-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}

/* Vor/Zurück-Navigation */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pager-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    transition: all .2s;
    max-width: 100%;
}
.pager-prev {
    border: 1px solid var(--border);
    color: var(--ink-soft);
    background: var(--surface);
}
.pager-prev:hover { border-color: var(--accent-bright); color: var(--accent); text-decoration: none; }
.pager-next {
    background: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid transparent;
}
.pager-next:hover {
    background: var(--btn-bg-hover);
    box-shadow: var(--shadow-md);
    color: var(--btn-text);
    text-decoration: none;
}


/* ── 12. Übungsblöcke ───────────────────────────────────────────── */

/* Quiz */
.quiz-card {
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-top: 3px solid var(--accent-bright);
    border-radius: 10px;
    padding: 24px 28px;
    transition: border-color .3s;
}
.quiz-question {
    color: var(--ink);
    font-weight: 600;
    font-size: 1.05rem;
}
.quiz-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: .7rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-dim);
    background: var(--surface);
    cursor: pointer;
    transition: all .18s ease;
    user-select: none;
    font-size: 1rem;
    color: var(--ink);
}
.quiz-option-label:hover {
    border-color: var(--accent-bright);
    background: var(--accent-softer);
}
/* Fokus sichtbar machen, wenn das (sr-only) Radio fokussiert ist */
.quiz-option-label:has(.quiz-radio:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.quiz-option-label.selected {
    border-color: var(--accent-bright);
    background: var(--accent-soft);
    font-weight: 600;
}
.quiz-option-label.correct-answer {
    border-color: var(--success) !important;
    background: var(--success-bg) !important;
    box-shadow: 0 0 0 2px var(--success-bd);
}
.quiz-option-label.wrong-answer {
    border-color: var(--danger) !important;
    background: var(--danger-bg) !important;
    animation: shake .4s ease;
}
.quiz-option-box {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid var(--ink-faint);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .2s;
}
.quiz-option-label.selected .quiz-option-box { border-color: var(--accent-bright); background: var(--accent-soft); }
.quiz-option-dot { width: 0; height: 0; border-radius: 50%; background: var(--accent-bright); transition: all .2s; }
.quiz-option-label.selected .quiz-option-dot { width: 8px; height: 8px; }
.quiz-option-label.correct-answer .quiz-option-box { border-color: var(--success); background: var(--success-bg); }
.quiz-option-label.correct-answer .quiz-option-dot { width: 8px; height: 8px; background: var(--success); }

.quiz-result {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 1rem;
    font-weight: 600;
}
.quiz-result.show    { display: flex; animation: fadeSlideIn .3s ease; }
.quiz-result.correct { color: var(--success); }
.quiz-result.wrong   { color: var(--danger); }
.result-icon { font-size: 1.1rem; line-height: 1; }
.result-text { flex: 1; letter-spacing: .01em; }

.quiz-result-correct {
    background: var(--success-bg);
    border: 1px solid var(--success-bd);
    color: var(--success);
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .95rem;
}
.quiz-result-wrong {
    background: var(--danger-bg);
    border: 1px solid var(--danger-bd);
    color: var(--danger);
    border-radius: 8px;
    padding: .6rem .9rem;
    font-size: .95rem;
}

/* Drag & Drop */
.dd-items-pool {
    min-height: 64px;
    transition: background .2s, border-color .2s;
}
.dd-items-pool.drag-over {
    border-color: var(--accent-bright) !important;
    background: var(--accent-soft) !important;
}
.dd-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .95rem;
    color: var(--ink);
    cursor: grab;
    user-select: none;
    transition: all .15s;
}
.dd-item:hover {
    border-color: var(--accent-bright);
    background: var(--accent-softer);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.dd-item:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.dd-item.dragging { opacity: .5; cursor: grabbing; transform: scale(1.05); }
/* Per Tastatur „aufgenommenes" Element */
.dd-item.kbd-carrying {
    border-color: var(--focus);
    border-style: dashed;
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--info-bg);
}
.dd-item.dd-correct { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.dd-item.dd-wrong   { border-color: var(--danger);  background: var(--danger-bg);  color: var(--danger); animation: shake .4s ease; }

.dd-zone {
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 10px;
    padding: 12px;
    transition: border-color .2s;
}
.dd-zone-label {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink-soft);
    margin-bottom: 8px;
}
.dd-zone-img-wrap { position: relative; width: 100%; }
.dd-zone-img { width: 100%; height: auto; border-radius: 6px; display: block; }
.dd-drop-area {
    min-height: 60px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: flex-start;
    transition: all .2s;
}
.dd-drop-area.drag-over, .dd-drop-area.kbd-target {
    border-color: var(--accent-bright);
    background: var(--accent-soft);
}
.dd-drop-area:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.dd-drop-on-image {
    position: absolute;
    inset: 0;
    min-height: unset;
    background: rgba(20,14,5,.18);
    border: 2px dashed var(--border);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
}
.dd-drop-on-image.drag-over, .dd-drop-on-image.kbd-target {
    background: var(--accent-soft);
    border-color: var(--accent-bright);
}
/* Hinweistext für Tastaturbedienung */
.kbd-hint {
    font-size: .85rem;
    color: var(--ink-faint);
    margin-bottom: .75rem;
}

/* Wortstamm */
.ws-word-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}
.ws-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 52px;
    padding: 0 10px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all .18s;
}
.ws-letter:hover { border-color: var(--accent-bright); background: var(--accent-softer); }
.ws-letter.removed {
    border-color: var(--danger-bd);
    background: var(--danger-bg);
    color: var(--ink-faint);
    text-decoration: line-through;
    text-decoration-color: var(--danger);
    text-decoration-thickness: 2px;
}
.ws-letter.correct-keep { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.ws-letter.wrong-keep   { border-color: var(--danger);  background: var(--danger-bg);  color: var(--danger); }

/* Wortauswahl */
.wsel-block {
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    padding: 1.5rem;
}
.wsel-task { color: var(--accent); font-weight: 600; font-size: .95rem; }
.wsel-chip {
    font-family: 'Lora', serif;
    font-size: 1rem;
    padding: .45rem .9rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--accent-softer);
    color: var(--ink);
    cursor: pointer;
    transition: all .18s;
    user-select: none;
}
.wsel-chip:hover:not(.wsel-correct):not(.wsel-wrong) {
    border-color: var(--accent-bright);
    background: var(--accent-soft);
    color: var(--accent-strong);
}
.wsel-chip.selected {
    border-color: var(--accent-bright);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
}
.wsel-chip.wsel-correct { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.wsel-chip.wsel-wrong   { border-color: var(--danger);  background: var(--danger-bg);  color: var(--danger); }
.wsel-explanation {
    background: var(--accent-softer);
    border: 1px solid var(--border-dim);
    border-radius: 8px;
    padding: .9rem 1.1rem;
    font-size: .95rem;
    color: var(--ink);
    line-height: 1.7;
}

/* Deklination */
.decl-table { width: 100%; border-collapse: collapse; }
.decl-label {
    color: var(--ink-soft);
    font-size: .95rem;
    padding: 6px 12px 6px 0;
    width: 40%;
    white-space: nowrap;
}
.decl-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--ink);
    font-size: 1rem;
    font-family: 'Lora', serif;
    padding: .5rem .7rem;
    width: 100%;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.decl-input:focus {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.decl-input.decl-correct { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.decl-input.decl-wrong   { border-color: var(--danger);  background: var(--danger-bg);  color: var(--danger); }
.decl-word { color: var(--accent); font-weight: 700; font-size: 1.15rem; margin-bottom: 1rem; }

/* Bild-Hotspot */
.hotspot-block img { user-select: none; -webkit-user-drag: none; }
.hotspot-question { color: var(--accent); font-weight: 600; font-size: .95rem; }
.hotspot-scene-wrap {
    display: inline-block;
    position: relative;
    border-radius: 10px;
    border: 1px solid var(--border-dim);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    max-width: 100%;
}
.hotspot-img-layer {
    transition: opacity .6s ease, transform .6s ease;
    display: block;
    max-width: 100%;
    user-select: none;
    -webkit-user-drag: none;
}
.hs-target-dot { background: transparent; border: none; padding: 0; }
.hs-target-dot:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 1px;
    border-radius: 4px;
}
.hotspot-popup { animation: fadeSlideIn .35s ease; }
.hotspot-popup.show { display: block !important; }
.hotspot-popup-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: .85rem 1.1rem;
    border-radius: 8px;
    background: var(--success-bg);
    border: 1px solid var(--success-bd);
    border-left: 4px solid var(--success);
}
.hotspot-popup-icon { font-size: 1.3rem; flex-shrink: 0; }
.hotspot-popup-text { color: var(--success); font-size: .95rem; line-height: 1.65; margin: 0; }

/* Lückentext (Cloze) */
.cloze-text {
    font-size: 1.0625rem;
    line-height: 2.4;
    color: var(--ink);
    margin: 0;
}
.cloze-input {
    display: inline-block;
    font-family: 'Lora', serif;
    font-size: 1rem;
    color: var(--ink);
    background: var(--surface);
    border: none;
    border-bottom: 2px solid var(--accent-bright);
    border-radius: 4px 4px 0 0;
    padding: .1rem .4rem;
    margin: 0 .15rem;
    min-width: 4ch;
    text-align: center;
    transition: background .2s, border-color .2s;
}
.cloze-input:focus {
    outline: none;
    background: var(--accent-softer);
    border-bottom-color: var(--accent-strong);
}
.cloze-input.cloze-correct {
    border-bottom-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
}
.cloze-input.cloze-wrong {
    border-bottom-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
}

/* Aufdeck-Block (Reveal) */
.reveal-steps { display: flex; flex-direction: column; gap: 12px; }
.reveal-step {
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-left: 4px solid var(--accent-bright);
    border-radius: 0 10px 10px 0;
    padding: 1rem 1.25rem;
    animation: revealIn .35s ease forwards;
}
.reveal-step:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.reveal-step-first { animation: none; }
.reveal-step-title {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    color: var(--accent);
    margin: 0 0 .35rem;
}
.reveal-step-body {
    margin: 0;
    color: var(--ink);
    line-height: 1.8;
}
@keyframes revealIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .reveal-step { animation: none; }
}

/* Schaubild-Block (Canvas) – gemeinsame Element-Styles (Editor + Anzeige) */
.canvas-stage-wrap {
    position: relative;
    width: 100%;
    border: 1px solid var(--border-dim);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}
.canvas-stage { position: absolute; inset: 0; }

.cv-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cv-bg, transparent);
    border-color: var(--cv-bd, transparent);
}
.cv-item-text {
    position: relative;
    z-index: 1;
    width: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 2%;
    text-align: center;
    line-height: 1.35;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    color: var(--ink);
    outline: none;
}
.cv-shape-rect    { border: 2px solid; }
.cv-shape-rounded { border: 2px solid; border-radius: 16px; }
.cv-shape-ellipse { border: 2px solid; border-radius: 50%; }
/* Raute: Hintergrund als geclipptes Pseudo-Element, damit Auswahl-Outline
   und Resize-Handle des Editors nicht mit abgeschnitten werden */
.cv-shape-diamond { background: transparent; }
.cv-shape-diamond::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    background: var(--cv-bg, transparent);
}
.cv-shape-text    { background: transparent; border: none; }
.cv-shape-image   { background: transparent; border: none; }
.cv-shape-image img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Farb-Presets (Theme-Tokens, dark-mode-fähig).
   --cv-solid ist die Vollton-Variante; die Hue-Textfarben sind in beiden
   Themes kontrastsicher gegen die jeweils invertierte Fläche (--bg). */
.cv-color-gold   { --cv-bg: var(--accent-soft);   --cv-bd: var(--accent-bright); --cv-solid: var(--accent); }
.cv-color-blue   { --cv-bg: var(--hue-blue-bg);   --cv-bd: var(--hue-blue-bd);   --cv-solid: var(--hue-blue); }
.cv-color-green  { --cv-bg: var(--hue-green-bg);  --cv-bd: var(--hue-green-bd);  --cv-solid: var(--hue-green); }
.cv-color-red    { --cv-bg: var(--hue-red-bg);    --cv-bd: var(--hue-red-bd);    --cv-solid: var(--hue-red); }
.cv-color-yellow { --cv-bg: var(--hue-yellow-bg); --cv-bd: var(--hue-yellow-bd); --cv-solid: var(--hue-yellow); }
.cv-color-purple { --cv-bg: var(--hue-purple-bg); --cv-bd: var(--hue-purple-bd); --cv-solid: var(--hue-purple); }
.cv-color-plain  { --cv-bg: var(--surface-2);     --cv-bd: var(--border);        --cv-solid: var(--surface-3); --cv-solid-ink: var(--ink); }
.cv-color-none   { --cv-bg: transparent;          --cv-bd: transparent;          --cv-solid: transparent;      --cv-solid-ink: var(--ink); }

/* Füllstile: soft = dezente Fläche (Standard), solid = Vollton mit
   invertierter Textfarbe, outline = nur Rahmen */
.cv-fill-solid { --cv-bg: var(--cv-solid); border-color: var(--cv-solid); }
.cv-fill-solid .cv-item-text { color: var(--cv-solid-ink, var(--bg)); }
.cv-fill-solid.cv-shape-diamond::before { background: var(--cv-solid); }
.cv-fill-outline { --cv-bg: transparent; }
/* Raute als Umriss: Ring aus äußerer + innerer Raute (evenodd) */
.cv-fill-outline.cv-shape-diamond::before {
    background: var(--cv-bd);
    clip-path: polygon(evenodd,
        50% 0, 100% 50%, 50% 100%, 0 50%, 50% 0,
        50% 5%, 5% 50%, 50% 95%, 95% 50%, 50% 5%);
}

/* Flächen-Hintergrund des Schaubilds */
.canvas-bg-alt  { background: var(--bg-alt); }
.canvas-bg-deep { background: var(--surface-3); }
.canvas-bg-none { background: transparent; border-color: transparent; }

/* ── Canvas-Editor (nur Admin) ── */
#canvas-editor .cve-stage-wrap {
    /* dezentes Punktraster als Orientierung */
    background-image: radial-gradient(var(--border-dim) 1px, transparent 1px);
    background-size: 24px 24px;
    border-color: var(--border);
}
#canvas-editor .cve-stage { touch-action: none; }
#canvas-editor .cv-item { cursor: move; user-select: none; touch-action: none; }
#canvas-editor .cv-item-text[contenteditable="true"] { user-select: text; cursor: text; }

.cve-toolbar, .cve-context {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.cve-toolbar { margin-bottom: 10px; }
.cve-context {
    margin-top: 10px; padding: 8px 10px;
    border: 1px solid var(--border-dim); border-radius: 10px;
    background: var(--surface-2);
}
.cve-ctx-group { display: flex; gap: 6px; align-items: center; }
.cve-spacer { flex: 1; }

.cve-btn {
    font-size: .78rem;
    padding: .35rem .6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.cve-btn:hover { border-color: var(--accent-bright); color: var(--accent); }
.cve-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cve-btn-danger { color: var(--danger); border-color: var(--danger-bd); }
.cve-btn-danger:hover { color: var(--danger); border-color: var(--danger); }
.cve-btn-active {
    background: var(--accent-soft);
    border-color: var(--accent-bright);
    color: var(--accent);
    font-weight: 600;
}

.cve-aspect-label {
    font-size: .75rem; color: var(--ink-soft);
    display: flex; gap: 6px; align-items: center;
}
.cve-select {
    font-size: .78rem; padding: .3rem .4rem;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-2); color: var(--ink);
}
.cve-font-val { font-size: .8rem; min-width: 2.2ch; text-align: center; color: var(--ink); }

.cve-swatch {
    width: 22px; height: 22px;
    border-radius: 6px; border: 2px solid;
    background: var(--cv-bg, transparent);
    border-color: var(--cv-bd, var(--border));
    cursor: pointer; padding: 0;
}
.cve-swatch:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.cve-swatch.cv-color-none {
    border-color: var(--border);
    background-image: linear-gradient(45deg,
        transparent 45%, var(--danger) 45%, var(--danger) 55%, transparent 55%);
}

.cve-selected { outline: 2px dashed var(--focus); outline-offset: 2px; }
.cve-handle {
    position: absolute;
    right: -7px; bottom: -7px;
    width: 14px; height: 14px;
    background: var(--focus);
    border: 2px solid var(--surface);
    border-radius: 50%;
    cursor: nwse-resize;
    z-index: 5;
    touch-action: none;
}
/* Raute: Handle säße sonst im abgeschnittenen Bereich */
.cv-shape-diamond .cve-handle { right: 4px; bottom: 4px; }

.cve-emoji-pop {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    padding: 8px;
    margin-bottom: 8px;
    max-width: 380px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}
.cve-emoji {
    font-size: 1.15rem;
    padding: .25rem;
    background: none; border: none; border-radius: 6px;
    cursor: pointer;
}
.cve-emoji:hover { background: var(--accent-soft); }

.cve-hint { font-size: .72rem; color: var(--ink-faint); margin-top: 8px; }

/* Fortschritts-Punkte (Übungen mit mehreren Runden) */
.progress-dots { display: flex; gap: 8px; }
.progress-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-3);
    transition: background .3s;
}
.progress-dot.current { background: var(--accent-bright); }
.progress-dot.done    { background: var(--success); border-color: var(--success-bd); }


/* ── 13. Admin-Bereich ──────────────────────────────────────────── */

.admin-content {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* Im Admin: nüchterneres Schriftbild für Arbeitsflächen */
.admin-content, .admin-content .form-input, .mobile-drawer {
    font-family: 'Lora', serif;
}
.admin-section-title {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border-dim);
}

/* Tabellen */
table { width: 100%; border-collapse: collapse; }
th {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--accent);
    padding: .65rem .875rem;
    border-bottom: 2px solid var(--border);
    text-align: left;
}
td {
    padding: .65rem .875rem;
    font-size: .9375rem;
    color: var(--ink);
    border-bottom: 1px solid var(--border-dim);
}
tr:hover td { background: var(--accent-softer); }

/* Listen-Elemente */
.section-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 7px;
    padding: .65rem .9rem;
    margin-bottom: .375rem;
    transition: all .15s;
    text-decoration: none;
    color: inherit;
}
.section-item:hover {
    background: var(--surface-2);
    border-color: var(--border);
    text-decoration: none;
}
.sections-insert-list .section-item { margin-bottom: 0; }

.tree-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border-dim);
    margin-bottom: .25rem;
    transition: all .15s;
}
.tree-item:hover { background: var(--surface-2); }

.insert-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 5px 0;
    opacity: .5;
    transition: opacity .2s;
}
.insert-divider:hover, .insert-divider:focus-within { opacity: 1; }
.insert-divider .insert-line {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.insert-btn-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px; height: 30px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-soft);
    text-decoration: none;
    transition: all .15s;
}
.insert-divider:hover .insert-btn-inline, .insert-btn-inline:focus-visible {
    color: var(--accent);
    border-color: var(--accent-bright);
    background: var(--accent-soft);
}

/* Typ-Auswahl-Karten */
.type-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1rem;
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    cursor: pointer;
    transition: all .18s;
    background: var(--surface);
    text-align: left;
}
.type-card:hover { border-color: var(--border); background: var(--accent-softer); }
.type-card.selected {
    border-color: var(--accent-bright);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent-bright);
}
.type-card:has(input:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.type-card input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
}
.type-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--accent-soft);
}

/* Breadcrumbs */
.breadcrumb-step {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--border-dim);
    border-radius: 6px;
    padding: .25rem .6rem;
}
.breadcrumb-step.current { color: var(--accent); border-color: var(--border); background: var(--accent-soft); }

/* Codes */
.code-badge {
    font-family: 'Courier New', monospace;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--accent);
    background: var(--accent-softer);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: .25rem .7rem;
    cursor: pointer;
    transition: all .15s;
}
.code-badge:hover, .code-badge.copied {
    background: var(--accent-soft);
    border-color: var(--accent-bright);
}
.row-unused { opacity: 1; }
.row-used   { opacity: .55; }

/* Mediathek */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}
.media-card {
    position: relative;
    border: 1px solid var(--border-dim);
    border-radius: 9px;
    overflow: hidden;
    background: var(--surface);
    transition: all .15s;
}
.media-card:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
.media-thumb { width: 100%; height: 110px; object-fit: cover; display: block; }
.media-thumb-video {
    width: 100%; height: 110px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2);
}
.media-info { padding: .5rem .7rem; }
.media-name {
    font-size: .85rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-meta { font-size: .78rem; color: var(--ink-faint); }
.media-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 110px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: rgba(20,14,5,.55);
}
.media-card:hover .media-overlay, .media-card:focus-within .media-overlay { display: flex; }
.overlay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all .15s;
}
.overlay-btn-copy   { background: var(--surface); color: var(--ink); }
.overlay-btn-copy:hover { background: var(--accent-soft); color: var(--accent); }
.overlay-btn-delete { background: var(--danger-bg); color: #fff; background-color: #B3402F; }
.overlay-btn-delete:hover { background-color: #93301F; }

.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .9rem;
    border-radius: 7px;
    border: 1px solid var(--border-dim);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}
.filter-tab:hover { border-color: var(--border); text-decoration: none; }
.filter-tab.active { border-color: var(--accent-bright); background: var(--accent-soft); color: var(--accent); }

.drop-zone {
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    transition: all .2s;
    background: var(--surface);
}
.drop-zone:hover, .drop-zone.dragover {
    border-color: var(--accent-bright);
    background: var(--accent-softer);
}

#copy-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: var(--bg);
    padding: .6rem 1.2rem;
    border-radius: 8px;
    font-size: .9375rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: all .25s ease;
    z-index: 90;
}
#copy-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Hotspot-Editor */
.hs-tool-btn.active {
    background: var(--accent-soft) !important;
    border-color: var(--accent-bright) !important;
    color: var(--accent) !important;
}
.hs-handle { transition: transform .1s; }
.hs-handle:hover { transform: translate(-50%,-50%) scale(1.4) !important; }

/* Drag-Sortierung (Kapitel-Editor) */
.empty-drop-zone { min-height: 48px; border: 2px dashed var(--border); border-radius: 8px; }
.section-drag-list.sortable-drag-over { border-color: var(--accent-bright); background: var(--accent-softer); }
.drag-handle { cursor: grab; }

/* Zurück-nach-oben (FAB) */
.fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--btn-bg);
    color: var(--btn-text);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: 40;
}

/* Media-Picker-Modal */
.media-picker-card {
    background: var(--surface);
    border: 2px solid var(--border-dim);
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    transition: all .15s ease;
}
.media-picker-card:hover {
    border-color: var(--accent-bright);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.media-picker-card.selected {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.media-picker-thumb { width: 100%; height: 100px; object-fit: cover; display: block; }
.media-picker-video-thumb {
    width: 100%; height: 100px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2);
}
.media-picker-info {
    padding: .4rem .5rem;
    font-size: .78rem;
    color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-filter-btn.active {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: var(--accent-bright) !important;
}


/* ── 14. Animationen ────────────────────────────────────────────── */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in, .fade-up, .card-anim { animation: fadeIn .35s ease forwards; }

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
.hotspot-shake, .quiz-shake { animation: shake .45s ease; }

@keyframes correctPulse {
    0%   { box-shadow: 0 0 0 0 var(--success-bd); }
    50%  { box-shadow: 0 0 0 14px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.quiz-correct-pulse { animation: correctPulse .8s ease-out; border-color: var(--success-bd) !important; }

/* Erfolgs-Funkeln: wenige, dezente Sterne direkt am beantworteten Block */
@keyframes sparklePop {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    30%  { transform: scale(1.05) rotate(5deg); opacity: 1; }
    60%  { transform: scale(.95) rotate(15deg) translateY(-4px); opacity: .95; }
    100% { transform: scale(.15) rotate(30deg) translateY(-18px); opacity: 0; }
}
.success-sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    color: var(--accent-bright);
    filter: drop-shadow(0 0 5px rgba(217,174,69,.55));
    animation: sparklePop .85s cubic-bezier(.2,.8,.3,1) forwards;
}
.success-sparkle svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
    .success-sparkle { display: none; }
}

/* Feather-Icons: nie mitskalieren lassen */
svg.feather { flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   Karteikarten (/cards)
   ═══════════════════════════════════════════════ */

/* ── Deck-Übersicht ── */

.deck-empty {
    display: flex; flex-direction: column; align-items: center; gap: .75rem;
    padding: 3rem 1.5rem; text-align: center;
    border: 1px dashed var(--border); border-radius: 14px;
    background: var(--accent-softer); color: var(--ink-faint);
}

.deck-desc { color: var(--ink-soft); font-size: .95rem; margin-bottom: .25rem; }

.deck-bidi {
    font-size: .75rem; white-space: nowrap; padding: .15rem .6rem;
    color: var(--accent); background: var(--accent-softer);
    border: 1px solid var(--border-dim); border-radius: 999px;
}

.deck-counts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .85rem 0 1rem; }
.deck-count {
    font-size: .8rem; padding: .2rem .65rem;
    border: 1px solid; border-radius: 999px;
}
.deck-count b { font-weight: 700; }
.count-new   { color: var(--info);    background: var(--info-bg);    border-color: var(--info-bd); }
.count-learn { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-bd); }
.count-due   { color: var(--success); background: var(--success-bg); border-color: var(--success-bd); }

.deck-done-today { color: var(--success); font-weight: 600; font-size: .95rem; }

/* ── Lern-Session ── */

.study-main { max-width: 720px; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }

.study-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.study-exit {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--ink-soft); font-size: .9rem; text-decoration: none; white-space: nowrap;
}
.study-exit:hover { color: var(--accent); }
.study-deck-title {
    font-family: 'Cinzel', serif; font-size: 1.15rem; font-weight: 600;
    color: var(--ink); flex: 1; text-align: center; margin: 0;
    letter-spacing: .03em;
}
.study-counts { display: flex; gap: .4rem; }

/* Die Flip-Karte: 3D-Drehung um die Y-Achse, Höhe folgt der höheren Seite */
.study-scene { perspective: 1400px; }
.study-card-inner {
    position: relative; display: grid; width: 100%; min-height: 340px;
    transform-style: preserve-3d; cursor: pointer;
    transition: transform .55s cubic-bezier(.3,.7,.25,1.06);
}
.study-card-inner:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; border-radius: 18px; }
.study-card-inner.flipped { transform: rotateY(180deg); }

.study-face {
    grid-area: 1 / 1; min-height: inherit;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.25rem; padding: 2.75rem 2rem;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow-md);
}
.study-face-back { transform: rotateY(180deg); }

.study-badges { position: absolute; top: .9rem; left: .9rem; display: flex; gap: .4rem; }
.study-badge {
    font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    padding: .15rem .6rem; border-radius: 999px; border: 1px solid;
}
.badge-new     { color: var(--accent); background: var(--accent-soft); border-color: var(--border); }
.badge-reverse { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); }

.study-term {
    font-family: 'Cinzel', serif; font-weight: 600;
    font-size: clamp(1.4rem, 4vw, 2.1rem); line-height: 1.35;
    color: var(--ink); text-align: center; margin: 0; white-space: pre-line;
}
.study-answer { color: var(--accent-strong); }
.study-image { max-height: 240px; max-width: 100%; object-fit: contain; border-radius: 10px; }

/* Bewertungs-Buttons: erscheinen erst nach dem Umdrehen */
.study-actions {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
    margin-top: 1.5rem;
    visibility: hidden; opacity: 0; transform: translateY(8px);
    transition: opacity .3s ease .18s, transform .3s ease .18s;
}
.study-actions.revealed { visibility: visible; opacity: 1; transform: none; }

.study-btn {
    display: flex; flex-direction: column; align-items: center; gap: .15rem;
    padding: .7rem .5rem; font-family: inherit; cursor: pointer;
    border: 1px solid; border-radius: 12px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.study-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.study-btn:disabled { opacity: .55; cursor: default; }
.study-btn-label { font-weight: 700; font-size: .95rem; }
.study-btn-interval { font-size: .75rem; opacity: .75; }
.btn-again { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-bd); }
.btn-hard  { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-bd); }
.btn-good  { color: var(--success); background: var(--success-bg); border-color: var(--success-bd); }
.btn-easy  { color: var(--info);    background: var(--info-bg);    border-color: var(--info-bd); }

/* ── Abschluss-Screen ── */

.study-done { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 4rem 1rem; text-align: center; }
.study-done-check {
    width: 64px; height: 64px; border-radius: 50%; font-size: 1.8rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--success); background: var(--success-bg); border: 1px solid var(--success-bd);
}
.study-done-title { font-family: 'Cinzel', serif; font-size: 1.6rem; color: var(--ink); margin: 0; }
.study-done-stats { color: var(--ink-soft); margin: 0; }
.study-done-stats b { color: var(--ink); }

@media (max-width: 520px) {
    .study-actions { grid-template-columns: repeat(2, 1fr); }
    .study-deck-title { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .study-card-inner { transition: none; }
    .study-actions { transition: none; }
    .study-btn { transition: none; }
}

/* Reifegrad-Balken auf der Deck-Karte (Langzeit-Fortschritt) */
.deck-maturity { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.deck-maturity-track {
    flex: 1; height: 6px; border-radius: 999px;
    background: var(--accent-softer); border: 1px solid var(--border-dim);
    overflow: hidden;
}
.deck-maturity-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    transition: width .4s ease;
}
.deck-maturity-label { font-size: .75rem; color: var(--ink-faint); min-width: 2.6rem; text-align: right; }

/* Übungsmodus (freies Wiederholen) + klickbare Deck-Karte */
.practice-position { font-size: .85rem; color: var(--ink-faint); white-space: nowrap; }
.practice-note { text-align: center; font-size: .85rem; color: var(--ink-faint); margin: -1rem 0 1.5rem; }
.practice-actions { display: flex; justify-content: center; }
.practice-offer { color: var(--ink-soft); font-size: .95rem; max-width: 34rem; margin: 0; }
.deck-repeat-hint { color: var(--accent); font-size: .85rem; white-space: nowrap; }
a.deck-card { text-decoration: none; color: inherit; }