/* ============================================================
   LearnFlow – CSS Custom Properties Foundation
   Version: v2.4  |  Stand: nach Session v2.4
   Pfad auf Server: public/css/app.css
   ============================================================ */


/* ------------------------------------------------------------
   1. DESIGN TOKENS – Root (Standard: Sek I/II)
   ------------------------------------------------------------ */
:root {
  /* Primärfarben */
  --lf-primary:           #378ADD;
  --lf-primary-dark:      #185FA5;
  --lf-primary-light:     #6AAEE8;
  --lf-primary-subtle:    #EBF4FC;

  /* Statusfarben (Kompetenz-Graph) */
  --lf-success:           #639922;
  --lf-success-dark:      #4a7118;
  --lf-success-subtle:    #EFF6E6;

  --lf-warning:           #d97706;
  --lf-warning-subtle:    #FEF3C7;

  --lf-danger:            #dc2626;
  --lf-danger-subtle:     #FEE2E2;

  --lf-info:              #0891b2;
  --lf-info-subtle:       #E0F2FE;

  /* Akzent (Gamification, Badges, XP) */
  --lf-accent:            #f59e0b;
  --lf-accent-dark:       #b45309;
  --lf-accent-subtle:     #FFFBEB;
  --lf-accent-star:       #f4c430;  /* Sternbild-Gold */

  /* Kompetenz-Status-Farben */
  --lf-status-locked:     #9ca3af;   /* gesperrt – grau */
  --lf-status-active:     #378ADD;   /* aktiv / in Bearbeitung – blau */
  --lf-status-self:       #8b5cf6;   /* selbst eingeschätzt – violett */
  --lf-status-peer:       #8899ee;   /* peer-reviewed – blau-weiß */
  --lf-status-certified:  #639922;   /* zertifiziert – grün */
  --lf-status-review:     #d97706;   /* needs_review – orange */

  /* Sternbild-Stufen */
  --lf-star-locked:       rgba(255, 255, 255, 0.10);
  --lf-star-self:         rgba(255, 255, 255, 0.32);
  --lf-star-peer:         #8899ee;
  --lf-star-certified:    #f4c430;

  /* Neutrale Farben */
  --lf-bg:                #f8f9fa;
  --lf-bg-alt:            #f1f3f5;
  --lf-card-bg:           #ffffff;
  /* --lf-sidebar-bg via Theme-Block gesetzt */
  --lf-nav-bg:            #ffffff;

  --lf-text:              #1a1a2e;
  --lf-text-muted:        #6b7280;
  --lf-text-subtle:       #9ca3af;
  --lf-text-inverse:      #ffffff;

  --lf-border:            #e5e7eb;
  --lf-border-focus:      #378ADD;
  --lf-border-strong:     #d1d5db;

  /* Schatten */
  --lf-shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.05);
  --lf-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --lf-shadow-md:         0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --lf-shadow-lg:         0 10px 24px rgba(0, 0, 0, 0.09), 0 4px 8px rgba(0, 0, 0, 0.04);
  --lf-shadow-xl:         0 20px 40px rgba(0, 0, 0, 0.12);

  /* Radien */
  --lf-radius-xs:         4px;
  --lf-radius:            10px;
  --lf-radius-md:         12px;
  --lf-radius-lg:         16px;
  --lf-radius-xl:         24px;
  --lf-radius-full:       9999px;

  /* Spacing-Skala (konsistenter 4px-Raster) */
  --lf-space-1:           4px;
  --lf-space-2:           8px;
  --lf-space-3:           12px;
  --lf-space-4:           16px;
  --lf-space-5:           20px;
  --lf-space-6:           24px;
  --lf-space-8:           32px;
  --lf-space-10:          40px;
  --lf-space-12:          48px;
  --lf-space-16:          64px;

  /* Typografie */
  --lf-font-sans:         'Inter', 'Segoe UI', system-ui, sans-serif;
  --lf-font-mono:         'JetBrains Mono', 'Fira Code', monospace;

  --lf-text-xs:           0.75rem;    /*  12px */
  --lf-text-sm:           0.875rem;   /*  14px */
  --lf-text-base:         1rem;       /*  16px */
  --lf-text-lg:           1.125rem;   /*  18px */
  --lf-text-xl:           1.25rem;    /*  20px */
  --lf-text-2xl:          1.5rem;     /*  24px */
  --lf-text-3xl:          1.875rem;   /*  30px */

  --lf-leading-tight:     1.25;
  --lf-leading-normal:    1.5;
  --lf-leading-relaxed:   1.7;

  --lf-font-normal:       400;
  --lf-font-medium:       500;
  --lf-font-semibold:     600;
  --lf-font-bold:         700;

  /* Übergänge */
  --lf-transition-fast:   120ms ease;
  --lf-transition:        200ms ease;
  --lf-transition-slow:   350ms ease;

  /* Layout */
  --lf-sidebar-width:     240px;
  --lf-topnav-height:     60px;
  --lf-content-max:       1100px;
  --lf-card-gap:          var(--lf-space-6);

  /* Gamification-Sichtbarkeit (block | none) */
  --lf-gamification:      block;
  --lf-gamification-flex: flex;

  /* Markenfarbe — NIEMALS überschreiben */
  --lf-brand:             #1ab8cc;
  --lf-brand-dark:        #0e8a9a;
  --lf-brand-subtle:      #E0F7FA;

  /* Gold — Reward, CTA, Logo-Stern */
  --lf-gold:              #f4c430;
  --lf-gold-dark:         #e8a500;
  --lf-gold-subtle:       #FFFBEB;

  /* Sidebar (Standard: sek — dunkel) */
  --lf-sidebar-bg:        #07091a;
  --lf-sidebar-text:      rgba(255,255,255,0.65);
  --lf-sidebar-active-bg: rgba(26,184,204,0.18);
  --lf-sidebar-active-text: #6DD9E8;
 --lf-sidebar-hover:     rgba(255,255,255,.11);
  --lf-sidebar-muted:     rgba(255,255,255,.60);
  --lf-sidebar-divider:   rgba(255,255,255,.22);
  --lf-sidebar-overlay:   rgba(255,255,255,.30);

  /* Theme-Steuerung */
  --lf-metaphor:          block;
  --lf-ci-primary:        ;
  --lf-ci-dark:           ;

  /* ZIndex-Skala */
  --lf-z-base:            0;
  --lf-z-raised:          10;
  --lf-z-dropdown:        100;
  --lf-z-sticky:          200;
  --lf-z-modal:           300;
  --lf-z-toast:           400;
  --lf-z-tooltip:         500;
}


/* ------------------------------------------------------------
   2. THEMES – Bildungsstufen-Varianten
   ------------------------------------------------------------ */

/* Sekundarstufe I/II — Default-Theme, spiegelt :root */
[data-theme="sek"] {
  --lf-primary:           #378ADD;
  --lf-primary-dark:      #185FA5;
  --lf-primary-subtle:    #EBF4FC;
  --lf-accent:            #f4c430;
  --lf-sidebar-bg:        #07091a;
  --lf-sidebar-text:      rgba(255,255,255,0.65);
  --lf-sidebar-active-bg: rgba(26,184,204,0.18);
  --lf-sidebar-active-text: #6DD9E8;
 --lf-sidebar-hover:     rgba(255,255,255,.11);
  --lf-sidebar-muted:     rgba(255,255,255,.60);
  --lf-sidebar-divider:   rgba(255,255,255,.22);
  --lf-sidebar-overlay:   rgba(255,255,255,.30);
  --lf-radius:            10px;
  --lf-gamification:      block;
  --lf-gamification-flex: flex;
  --lf-metaphor:          block;
}

/* Professionell / Betrieb / Hochschule (kein Gamification-Schmuck) */
[data-theme="professional"] {
  --lf-primary:           var(--lf-ci-primary, #0e8a9a);
  --lf-primary-dark:      var(--lf-ci-dark, #0a6b79);
  --lf-primary-subtle:    #E0F7FA;
  --lf-accent:            #0f766e;
  --lf-accent-dark:       #0d5752;
  --lf-accent-subtle:     #CCFBF1;
  --lf-sidebar-bg:        #1c1c1e;
  --lf-sidebar-text:      rgba(255,255,255,0.70);
  --lf-sidebar-active-bg: rgba(255,255,255,0.10);
  --lf-sidebar-active-text: rgba(255,255,255,0.90);
  --lf-sidebar-hover:     rgba(255,255,255,.10);
  --lf-sidebar-muted:     rgba(255,255,255,.60);
  --lf-sidebar-divider:   rgba(255,255,255,.22);
  --lf-sidebar-overlay:   rgba(255,255,255,.30);
  --lf-radius:            6px;
  --lf-metaphor:          none;
  --lf-gamification:      none;
  --lf-gamification-flex: none;
}

/* Universität / Weiterbildung */
[data-theme="university"] {
  --lf-primary:           #1ab8cc;
  --lf-primary-dark:      #0e8a9a;
  --lf-primary-subtle:    #E0F7FA;
  --lf-accent:            #f4c430;
  --lf-sidebar-bg:        #f4f5f7;
  --lf-sidebar-text:      #374151;
  --lf-sidebar-active-bg: #E0F7FA;
  --lf-sidebar-active-text: #0e8a9a;
  --lf-sidebar-hover:     rgba(0,0,0,.06);
  --lf-sidebar-muted:     rgba(55,65,81,.50);
  --lf-sidebar-divider:   rgba(0,0,0,.12);
  --lf-sidebar-overlay:   rgba(0,0,0,.07);
  --lf-radius:            8px;
  --lf-metaphor:          none;
  --lf-gamification:      block;
  --lf-gamification-flex: flex;
}

/* Grundschule (stärker visuell, kräftigere Farben) */
[data-theme="primary-school"] {
  --lf-primary:           #059669;
  --lf-primary-dark:      #047857;
  --lf-primary-light:     #34d399;
  --lf-primary-subtle:    #D1FAE5;
  --lf-accent:            #f97316;
  --lf-accent-dark:       #c2410c;
  --lf-accent-subtle:     #FFEDD5;
  --lf-sidebar-bg:        #f0faf5;
  --lf-sidebar-text:      #065f46;
  --lf-sidebar-active-bg: #a7f3d0;
  --lf-sidebar-active-text: #065f46;
  --lf-sidebar-hover:     rgba(0,0,0,.06);
  --lf-sidebar-muted:     rgba(6,95,70,.45);
  --lf-sidebar-divider:   rgba(0,0,0,.12);
  --lf-sidebar-overlay:   rgba(0,0,0,.07);
  --lf-radius:            20px;
  --lf-radius-md:         18px;
  --lf-metaphor:          block;
  --lf-gamification:      block;
  --lf-gamification-flex: flex;
}

/* Dunkles Theme (Galaxie-Akzent – Fortschrittsseite / Sternbild) */
[data-sub-theme="galaxy"] {
  --lf-bg:                #0d0f1a;
  --lf-bg-alt:            #131624;
  --lf-card-bg:           #1a1e30;
  --lf-sidebar-bg:        #111422;
  --lf-nav-bg:            #111422;
  --lf-text:              #e8ecf4;
  --lf-text-muted:        #8892aa;
  --lf-text-subtle:       #555e78;
  --lf-border:            #252a40;
  --lf-border-strong:     #323857;
  --lf-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.40);
  --lf-shadow-md:         0 4px 12px rgba(0, 0, 0, 0.50);
  --lf-shadow-lg:         0 10px 30px rgba(0, 0, 0, 0.60);
}


/* ------------------------------------------------------------
   3. GAMIFICATION-STEUERUNG
   ------------------------------------------------------------ */

/* Block-Elemente (Streak-Banner, Badge-Toasts, XP-Balken, …) */
.gamification-element {
  display: var(--lf-gamification);
}

/* Flex-Elemente (XP-Zeile in Navigation, Badge-Reihe, …) */
.gamification-flex {
  display: var(--lf-gamification-flex);
}


/* ------------------------------------------------------------
   4. KOMPETENZ-STATUS – Utility-Klassen
   ------------------------------------------------------------ */

.status-locked    { --_status-color: var(--lf-status-locked);    }
.status-active    { --_status-color: var(--lf-status-active);    }
.status-self      { --_status-color: var(--lf-status-self);      }
.status-peer      { --_status-color: var(--lf-status-peer);      }
.status-certified { --_status-color: var(--lf-status-certified); }
.status-review    { --_status-color: var(--lf-status-review);    }

.status-badge {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--lf-space-1);
  padding:          2px var(--lf-space-2);
  border-radius:    var(--lf-radius-full);
  font-size:        var(--lf-text-xs);
  font-weight:      var(--lf-font-semibold);
  background-color: color-mix(in srgb, var(--_status-color) 14%, transparent);
  color:            var(--_status-color);
}


/* ------------------------------------------------------------
   5. STERNBILD – Animationen (Fortschrittsseite)
   ------------------------------------------------------------ */

@keyframes lf-star-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%       { opacity: 0.7; transform: scale(0.94); }
}

@keyframes lf-star-appear {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1);   }
}

@keyframes lf-constellation-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.lf-star {
  animation: lf-star-appear var(--lf-transition-slow) ease-out both;
}

.lf-star--self-done {
  animation: lf-star-appear var(--lf-transition-slow) ease-out both,
             lf-star-pulse 3s ease-in-out 0.4s infinite;
}

.lf-constellation-line {
  stroke-dasharray:  1;
  stroke-dashoffset: 1;
  animation: lf-constellation-draw 0.6s ease-out both;
}


/* ------------------------------------------------------------
   6. BADGE-TOAST – Animation
   ------------------------------------------------------------ */

@keyframes lf-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes lf-toast-out {
  from { opacity: 1; transform: translateY(0)    scale(1);    }
  to   { opacity: 0; transform: translateY(-10px) scale(0.96); }
}

.lf-toast-enter { animation: lf-toast-in  0.28s ease-out both; }
.lf-toast-leave { animation: lf-toast-out 0.22s ease-in  both; }


/* ------------------------------------------------------------
   7. FOKUS – Barrierefreiheit
   ------------------------------------------------------------ */

:focus-visible {
  outline:        2px solid var(--lf-border-focus);
  outline-offset: 3px;
  border-radius:  var(--lf-radius-xs);
}

/* Nur für Maus/Touch-Nutzer ausblenden */
:focus:not(:focus-visible) {
  outline: none;
}


/* ------------------------------------------------------------
   8. SCROLLBAR-STYLING (Webkit)
   ------------------------------------------------------------ */

::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--lf-bg-alt); }
::-webkit-scrollbar-thumb   {
  background:    var(--lf-border-strong);
  border-radius: var(--lf-radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--lf-text-subtle); }


/* ------------------------------------------------------------
   9. SELECTION-FARBE
   ------------------------------------------------------------ */

::selection      { background-color: var(--lf-brand); color: #ffffff; }
::-moz-selection { background-color: var(--lf-brand); color: #ffffff; }


/* ------------------------------------------------------------
   10. PRINT – Gamification-Elemente ausblenden
   ------------------------------------------------------------ */

@media print {
  .gamification-element,
  .gamification-flex {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LearnFlow · Image Upload Zones  (v2.5)
   ═══════════════════════════════════════════════════════════════ */

/* ── Single-Upload-Zone (Partial) ─────────────────────────────── */
.lf-img-upload-zone {
    position: relative;
    border: 2px dashed var(--lf-border, #e5e7eb);
    border-radius: var(--lf-radius, 10px);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    background: var(--lf-bg, #f8f9fa);
    transition: border-color .2s, background .2s;
}
.lf-img-upload-zone:hover {
    border-color: var(--lf-primary, #378ADD);
    background: #f0f7ff;
}
.lf-img-upload-zone.lf-img-uploading {
    opacity: .55;
    pointer-events: none;
}
.lf-img-upload-zone.lf-img-uploading::after {
    content: 'Wird hochgeladen …';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9em;
    color: var(--lf-primary, #378ADD);
}
.lf-img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--lf-text-muted, #6b7280);
    padding: 20px;
    text-align: center;
}
.lf-img-placeholder span { font-size: 1.05em; }
.lf-img-placeholder small { font-size: .8em; }
.lf-img-preview {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: calc(var(--lf-radius, 10px) - 2px);
    display: block;
}
.lf-img-remove-btn {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .85em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lf-img-remove-btn:hover { background: #e74c3c; }

/* ── Quiz-Builder: Bild je Frage ──────────────────────────────── */
.quiz-question-image-zone {
    position: relative;
    border: 2px dashed var(--lf-border, #e5e7eb);
    border-radius: var(--lf-radius, 10px);
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    margin-top: 10px;
    background: var(--lf-bg, #f8f9fa);
    transition: border-color .2s;
}
.quiz-question-image-zone:hover {
    border-color: var(--lf-primary, #378ADD);
}
.quiz-question-image-zone.lf-img-uploading {
    opacity: .55;
    pointer-events: none;
}
.quiz-img-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--lf-text-muted, #6b7280);
    font-size: .85em;
    padding: 14px;
}
.quiz-img-preview {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    display: block;
    border-radius: calc(var(--lf-radius, 10px) - 2px);
}
.quiz-img-remove {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: .8em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quiz-img-remove:hover { background: #e74c3c; }
.quiz-img-error {
    color: #e74c3c;
    font-size: .8em;
    padding: 4px 8px;
}

/* ── Portfolio: Mehrere Bilder ────────────────────────────────── */
.portfolio-images-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    min-height: 10px;
}
.portfolio-image-item {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: var(--lf-radius, 10px);
    overflow: hidden;
    border: 1px solid var(--lf-border, #e5e7eb);
    background: var(--lf-bg, #f8f9fa);
}
.portfolio-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.portfolio-img-remove {
    position: absolute;
    top: 4px; right: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .8em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.portfolio-img-remove:hover { background: #e74c3c; }
.portfolio-add-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px dashed var(--lf-border, #e5e7eb);
    border-radius: var(--lf-radius, 10px);
    color: var(--lf-primary, #378ADD);
    font-size: .9em;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    user-select: none;
}
.portfolio-add-image-btn:hover {
    border-color: var(--lf-primary, #378ADD);
    background: #f0f7ff;
}
.portfolio-add-image-btn.lf-img-uploading {
    opacity: .6;
    pointer-events: none;
}

/* ── Quiz-Runner: Fragenbild ──────────────────────────────────── */
.quiz-question-image {
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: var(--lf-radius, 10px);
    margin-bottom: 14px;
    display: block;
}

/* ── Karteikarte: Bild ────────────────────────────────────────── */
.card-side-image {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--lf-radius, 10px);
    margin-bottom: 12px;
    display: block;
}

/* ═══════════════════════════════════════════════════════════
   Abschnitt 10: Galaxy-Hintergrund
   Verwendet auf: learning_path.blade.php, progress.blade.php
   ═══════════════════════════════════════════════════════════ */
.lp-galaxy-bg {
    background: linear-gradient(180deg, #06091a 0%, #0d1535 55%, #0a1228 100%);
    border-radius: var(--lf-radius, 10px);
    padding: 20px 16px 60px;
    position: relative;
    overflow: hidden;
}
.lp-galaxy-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at  8%  5%, rgba(255,255,255,.85), transparent),
        radial-gradient(1px   1px   at 22%  9%, rgba(255,255,255,.60), transparent),
        radial-gradient(2px   2px   at 45%  3%, rgba(255,255,255,.90), transparent),
        radial-gradient(1px   1px   at 67% 12%, rgba(255,255,255,.50), transparent),
        radial-gradient(1.5px 1.5px at 83%  7%, rgba(255,255,255,.75), transparent),
        radial-gradient(1px   1px   at 91% 19%, rgba(255,255,255,.65), transparent),
        radial-gradient(2px   2px   at 14% 28%, rgba(255,255,255,.40), transparent),
        radial-gradient(1px   1px   at 56% 24%, rgba(255,255,255,.55), transparent),
        radial-gradient(1.5px 1.5px at 75% 38%, rgba(255,255,255,.70), transparent),
        radial-gradient(1px   1px   at 38% 50%, rgba(255,255,255,.35), transparent),
        radial-gradient(2px   2px   at 93% 45%, rgba(255,255,255,.80), transparent),
        radial-gradient(1px   1px   at  4% 62%, rgba(255,255,255,.55), transparent),
        radial-gradient(1.5px 1.5px at 29% 70%, rgba(255,255,255,.45), transparent),
        radial-gradient(1px   1px   at 62% 65%, rgba(255,255,255,.60), transparent),
        radial-gradient(2px   2px   at 86% 74%, rgba(255,255,255,.50), transparent),
        radial-gradient(1px   1px   at 49% 82%, rgba(255,255,255,.40), transparent),
        radial-gradient(1.5px 1.5px at 17% 88%, rgba(255,255,255,.65), transparent),
        radial-gradient(1px   1px   at 73% 91%, rgba(255,255,255,.45), transparent),
        radial-gradient(2px   2px   at  3% 96%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px   1px   at 96% 88%, rgba(255,255,255,.55), transparent);
}

/* ═══════════════════════════════════════════════════════════
   Abschnitt 11: Planeten-Basis + Fach-Modifier
   ═══════════════════════════════════════════════════════════ */
.lp-planet {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: transform .14s;
    overflow: visible;
    flex-shrink: 0;
    background: radial-gradient(circle at 35% 35%, #a0a8c0, #505870, #1e2030);
    box-shadow: 0 0 8px rgba(150,160,200,.25), inset -3px -3px 8px rgba(0,0,20,.6);
}
.lp-planet:hover  { transform: scale(1.1); }
.lp-planet:active { transform: scale(.92); }

.planet-math {
    background: radial-gradient(circle at 35% 35%, #6a8fff, #1e3a9e, #0a1845);
    box-shadow: 0 0 12px rgba(50,100,255,.4), inset -4px -3px 8px rgba(0,0,40,.65);
}
.planet-bio {
    background: radial-gradient(circle at 35% 35%, #5dde80, #1a7a35, #0a3015);
    box-shadow: 0 0 12px rgba(30,180,70,.4), inset -4px -3px 8px rgba(0,20,5,.65);
}
.planet-religion {
    background: radial-gradient(circle at 35% 35%, #ffb854, #c07020, #5a2e00);
    box-shadow: 0 0 12px rgba(255,160,20,.4), inset -4px -3px 8px rgba(60,20,0,.65);
}
.planet-physics {
    background: radial-gradient(circle at 35% 35%, #a0d4ff, #2a7abe, #0a2a4a);
    box-shadow: 0 0 12px rgba(100,180,255,.4), inset -4px -3px 8px rgba(0,20,40,.65);
}
.planet-history {
    background: radial-gradient(circle at 35% 35%, #d4a0a0, #8a3030, #3a1010);
    box-shadow: 0 0 12px rgba(180,80,80,.4), inset -4px -3px 8px rgba(40,0,0,.65);
}
.planet-language {
    background: radial-gradient(circle at 35% 35%, #d4b0ff, #6a30b0, #2a1050);
    box-shadow: 0 0 12px rgba(140,80,220,.4), inset -4px -3px 8px rgba(20,0,40,.65);
}
.planet-default {
    background: radial-gradient(circle at 35% 35%, #a0a8c0, #505870, #202535);
    box-shadow: 0 0 8px rgba(150,160,200,.3), inset -3px -3px 8px rgba(0,0,20,.6);
}

/* ═══════════════════════════════════════════════════════════
   Abschnitt 12: Planeten-Zustände
   ═══════════════════════════════════════════════════════════ */
.lp-planet--active {
    background: radial-gradient(circle at 35% 35%, #ffd77a, #e8950a, #6b3e00);
    box-shadow: 0 0 20px rgba(255,160,20,.65), 0 0 40px rgba(255,140,0,.2),
                inset -4px -3px 8px rgba(80,30,0,.6);
    animation: lp-glow 2.5s ease-in-out infinite;
}
.lp-planet--active::after {
    content: '';
    position: absolute;
    width: 70px; height: 18px;
    border: 2px solid rgba(255,200,50,.45);
    border-radius: 50%;
    top: 17px; left: -9px;
    transform: rotate(-18deg);
    pointer-events: none;
    z-index: 2;
}
.lp-planet--locked {
    background: radial-gradient(circle at 40% 40%, #3a3a44, #1e1e28, #0e0e14);
    box-shadow: inset -3px -3px 8px rgba(0,0,0,.8);
    opacity: .42;
    cursor: default;
    pointer-events: none;
}
.lp-planet--locked:hover { transform: none; }
.lp-planet--moon {
    width: 36px !important; height: 36px !important;
    background: radial-gradient(circle at 35% 35%, #c0c0d0, #606070, #252530) !important;
    box-shadow: 0 0 10px rgba(136,153,238,.5), inset -3px -2px 6px rgba(0,0,20,.7) !important;
    animation: lp-moonpulse 3s ease-in-out infinite !important;
}
.lp-planet--moon-done {
    width: 36px !important; height: 36px !important;
    background: radial-gradient(circle at 35% 35%, #8899ee, #3344aa, #1a1a5a) !important;
    box-shadow: 0 0 12px rgba(136,153,238,.55), inset -3px -2px 6px rgba(0,0,40,.7) !important;
}

/* ═══════════════════════════════════════════════════════════
   Abschnitt 13: Planeten-Keyframes
   ═══════════════════════════════════════════════════════════ */
@keyframes lp-twinkle {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.4; }
}
@keyframes lp-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255,160,20,.65), 0 0 40px rgba(255,140,0,.2),
                    inset -4px -3px 8px rgba(80,30,0,.6);
    }
    50% {
        box-shadow: 0 0 32px rgba(255,160,20,.85), 0 0 60px rgba(255,140,0,.3),
                    inset -4px -3px 8px rgba(80,30,0,.6);
    }
}
@keyframes lp-moonpulse {
    0%, 100% { box-shadow: 0 0 6px  rgba(136,153,238,.35), inset -3px -2px 6px rgba(0,0,20,.7); }
    50%       { box-shadow: 0 0 18px rgba(136,153,238,.65), inset -3px -2px 6px rgba(0,0,20,.7); }
}

/* ═══════════════════════════════════════════════════════════
   Abschnitt 14: Cover-Kacheln (Dashboard + Listenansichten)
   ═══════════════════════════════════════════════════════════ */
.path-cover {
    position: relative;
    border-radius: var(--lf-radius-md, 12px);
    overflow: hidden;
    background: radial-gradient(circle at 30% 40%, #6a8fff, #1e3a9e, #0a1845);
    flex-shrink: 0;
}
.path-cover--sm { height: 36px; }
.path-cover--md { height: 72px; }
.path-cover--lg { height: 120px; }
.path-cover__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.path-cover__planet {
    position: absolute; border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.path-cover__ring {
    position: absolute; border-radius: 50%;
    border: 2px solid rgba(255,200,50,.35);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    pointer-events: none;
}
/* Fach-Modifier (spiegelt Planeten-Gradients) */
.path-cover.planet-math     { background: radial-gradient(circle at 30% 35%, #6a8fff, #1e3a9e, #0a1845); }
.path-cover.planet-bio      { background: radial-gradient(circle at 30% 35%, #5dde80, #1a7a35, #0a3015); }
.path-cover.planet-religion { background: radial-gradient(circle at 30% 35%, #ffb854, #c07020, #5a2e00); }
.path-cover.planet-physics  { background: radial-gradient(circle at 30% 35%, #a0d4ff, #2a7abe, #0a2a4a); }
.path-cover.planet-language { background: radial-gradient(circle at 30% 35%, #d4b0ff, #6a30b0, #2a1050); }
.path-cover.planet-history  { background: radial-gradient(circle at 30% 35%, #d4a0a0, #8a3030, #3a1010); }

/* ═══════════════════════════════════════════════════════════
   Abschnitt 15: Cockpit-Header
   ═══════════════════════════════════════════════════════════ */
.cockpit-header {
    background: linear-gradient(135deg, #0d1b3e 0%, #1a3a6e 60%, #0d2850 100%);
    border-radius: var(--lf-radius, 10px);
    border: 0.5px solid rgba(255,255,255,.1);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    color: #fff;
    margin-bottom: 16px;
}
.cockpit-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at  6% 18%, rgba(255,255,255,.80), transparent),
        radial-gradient(1px   1px   at 18% 45%, rgba(255,255,255,.55), transparent),
        radial-gradient(2px   2px   at 35%  8%, rgba(255,255,255,.90), transparent),
        radial-gradient(1px   1px   at 52% 30%, rgba(255,255,255,.50), transparent),
        radial-gradient(1.5px 1.5px at 68% 14%, rgba(255,255,255,.75), transparent),
        radial-gradient(1px   1px   at 80% 55%, rgba(255,255,255,.60), transparent),
        radial-gradient(2px   2px   at 92% 22%, rgba(255,255,255,.70), transparent),
        radial-gradient(1px   1px   at 44% 72%, rgba(255,255,255,.40), transparent);
}
.cockpit-planet-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    position: relative; z-index: 1;
}
.cockpit-stat {
    background: rgba(255,255,255,.07);
    border: 0.5px solid rgba(255,255,255,.12);
    border-radius: var(--lf-radius, 10px);
    padding: 10px 14px;
    backdrop-filter: blur(4px);
    flex-shrink: 0;
}
.cockpit-stat__value {
    font-size: 1.4rem; font-weight: 700;
    color: #fff; line-height: 1;
}
.cockpit-stat__label {
    font-size: .68rem; color: rgba(255,255,255,.5);
    margin-top: 3px; text-transform: uppercase; letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════════
   Abschnitt 16a: Icon-System (.lf-icon)
   ═══════════════════════════════════════════════════════════ */

/* Basis */
.lf-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
    /* Farbe erbt immer vom Elternelement */
    color: inherit;
}

/* Größen-Helfer */
.lf-icon--xs  { width: 12px; height: 12px; }
.lf-icon--sm  { width: 14px; height: 14px; }
.lf-icon--md  { width: 18px; height: 18px; }
.lf-icon--lg  { width: 22px; height: 22px; }
.lf-icon--xl  { width: 28px; height: 28px; }

/* Verwendung in Editor-Kacheln (type-tiles) */
.pe-type-tile .lf-icon {
    display: block;
    margin: 0 auto 4px;
    /* kein font-size mehr nötig */
}
.pe-type-tile.selected .lf-icon { color: var(--blue); }

/* Verwendung in Rollen-Buttons */
.pe-role-btn .lf-icon {
    display: block;
}
.pe-role-btn.selected .lf-icon { color: #4338CA; }

/* Verwendung in linkem Panel (Meta-Badges) */
.pe-mb .lf-icon {
    vertical-align: -2px;
}

/* ═══════════════════════════════════════════════════════════
   Abschnitt 16: Kompetenz-Stufen-Planeten
   ═══════════════════════════════════════════════════════════ */

.comp-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: default;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.comp-level:hover { transform: scale(1.15); }

.comp-level[data-level="0"] {
  width: 14px; height: 14px;
  background: radial-gradient(circle at 38% 35%, #9ca3af, #374151);
}
.comp-level[data-level="1"] {
  width: 18px; height: 18px;
  background: radial-gradient(circle at 38% 35%, #93c5fd, #1e40af, #0c1f5e);
  box-shadow: 0 0 5px rgba(59,130,246,.45);
}
.comp-level[data-level="2"] {
  width: 22px; height: 22px;
  background: radial-gradient(circle at 38% 35%, #d8b4fe, #7c3aed, #2e1065);
  box-shadow: 0 0 9px rgba(124,58,237,.5);
}
.comp-level[data-level="3"] {
  width: 26px; height: 26px;
  background: radial-gradient(circle at 38% 35%, #fde68a, #d97706, #78350f);
  box-shadow: 0 0 14px rgba(217,119,6,.6);
}
.comp-level[data-level="3"]::after {
  content: '';
  position: absolute;
  width: 34px; height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(251,191,36,.55);
  transform: rotate(-20deg);
  pointer-events: none;
}
.comp-level[data-level="4"] {
  width: 30px; height: 30px;
  background: radial-gradient(circle at 38% 35%, #ffffff, #fde68a, #f59e0b, #92400e);
  box-shadow: 0 0 20px rgba(251,191,36,.75), 0 0 6px rgba(255,255,255,.4);
  animation: comp-level-pulse 2.8s ease-in-out infinite;
}
.comp-level[data-level="4"]::after {
  content: '';
  position: absolute;
  width: 40px; height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(253,230,138,.65);
  transform: rotate(-20deg);
  pointer-events: none;
}

@keyframes comp-level-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(251,191,36,.75), 0 0 6px rgba(255,255,255,.4); }
  50%       { box-shadow: 0 0 30px rgba(251,191,36,.95), 0 0 12px rgba(255,255,255,.6); }
}

/* Stufen-Setter (Lehrer-Klick) */
.comp-level-setter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: white;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.comp-level-setter__label {
  font-size: .72rem;
  color: var(--gray);
  font-weight: 600;
  white-space: nowrap;
}
.comp-level-setter__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comp-level-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  border-radius: 50%;
  transition: transform .15s;
  position: relative;
}
.comp-level-btn:hover { transform: scale(1.25); }
.comp-level-btn.active::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--lf-primary);
}
.comp-level-star-dust {
  font-size: .7rem;
  color: var(--gray);
  margin-left: 6px;
  white-space: nowrap;
}        
    
}
/* ── Quill Shared Styles ─────────────────────────────────────────────── */
.ql-special-chars{font-weight:700;font-size:.85rem;padding:0 5px!important;width:auto!important;}
.ql-audio-custom{font-size:.9em;padding:2px 5px!important;width:auto!important;}
.ql-video::after{content:'▶';font-size:.82rem;}
.ql-video{width:auto!important;padding:0 4px!important;}
.ql-tooltip{z-index:1200!important;position:fixed!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;}
.ql-tooltip input[type=text]{min-width:220px;}

/* ── Formel- & Sonderzeichen-Popover ─────────────────────────────────── */
.fml-pop{position:fixed;z-index:10200;background:#fff;border:1px solid var(--border,#dde1e7);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.22);padding:12px 14px;width:400px;max-width:calc(100vw - 20px);}
.fml-pop-group-label{font-size:.68rem;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:.4px;margin:7px 0 3px;}
.fml-pop-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;}
.fml-pop-head span{font-size:.74rem;font-weight:600;color:var(--gray);letter-spacing:.3px;text-transform:uppercase;}
.fml-pop-head button{background:none;border:none;cursor:pointer;font-size:1rem;color:var(--gray);line-height:1;padding:0 2px;}
.fml-pop-tpls{display:flex;flex-wrap:wrap;gap:5px;padding-bottom:9px;border-bottom:1px solid var(--border);}
.fml-pop-tpl{padding:3px 10px;border:1px solid var(--border);border-radius:6px;background:white;cursor:pointer;font-size:.9rem;line-height:1.7;min-width:36px;text-align:center;}
.fml-pop-tpl:hover{background:var(--lf-primary-light,#e8f0fe);border-color:var(--lf-primary,#3b5bdb);}
.fml-pop-help{margin-top:8px;padding:8px 10px;background:var(--bg,#f3f4f6);border-radius:8px;font-size:.78rem;line-height:1.6;border:1px solid var(--border);}
.fml-pop-help table{width:100%;border-collapse:collapse;}
.fml-pop-help td{padding:2px 6px;border-bottom:1px solid var(--border);}
.fml-pop-help td:first-child{font-family:monospace;color:var(--lf-primary,#3b5bdb);white-space:nowrap;}
.fml-pop-row{display:flex;gap:6px;align-items:center;margin-top:9px;}
.fml-pop-input{flex:1;padding:6px 9px;border:1px solid var(--border);border-radius:7px;font-family:monospace;font-size:.88rem;min-width:0;}
.fml-pop-input:focus{outline:none;border-color:var(--lf-primary,#3b5bdb);}
.fml-pop-preview{min-height:38px;display:flex;align-items:center;justify-content:center;margin-top:8px;padding:6px;background:var(--bg,#f3f4f6);border-radius:7px;overflow:hidden;}

/* ── Quiz-Builder Vorschau-Felder ─────────────────────────────────────── */
.qb-field-preview{overflow:auto;word-break:break-word;min-height:2em;padding:5px 8px;border:1px solid var(--border);border-radius:7px;background:var(--white,#fff);font-size:.82rem;line-height:1.5;}
.qb-field-preview>p:first-child{margin-top:0;}
.qb-field-preview>p:last-child{margin-bottom:0;}
.qb-field-preview img{max-width:100%;height:auto;}
.qb-field-preview[contenteditable]:empty:not(:focus)::before{content:attr(placeholder);color:var(--gray);pointer-events:none;}

/* ═══════════════════════════════════════════════════════════════
   LF Custom List Types – Quill 1.3.7
   Typen: arrow, check, number-paren, number-parens,
          lower-alpha, lower-alpha-dot, roman-lower, roman-upper
   Einrückungstiefe 0–2 (ql-indent-1, ql-indent-2)
═══════════════════════════════════════════════════════════════ */

/* ── Statische Typen (kein Counter) ───────────────────────────── */
.ql-editor li[data-list="arrow"]::before  { content: "→\00a0"; }
/* Karteikarten-Lernmodus: Quill-Padding auf Karte aufheben */
.card-face .card-text.ql-editor { padding: 0 !important; margin: 0 !important; white-space: normal !important; text-align: center !important; }
.card-face .card-text.ql-editor p { margin: 0 !important; text-align: center !important; }
.ql-editor li[data-list="check"]::before  { content: "✓\00a0"; }

/* ── Counter-Reset je UL (jede separate Liste beginnt bei 1) ──── */
.ql-editor ul[data-lf-list="number-paren"]    { counter-reset: lf-np-0;  }
.ql-editor ul[data-lf-list="number-parens"]   { counter-reset: lf-nps-0; }
.ql-editor ul[data-lf-list="lower-alpha"]     { counter-reset: lf-la-0;  }
.ql-editor ul[data-lf-list="lower-alpha-dot"] { counter-reset: lf-lad-0; }
.ql-editor ul[data-lf-list="roman-lower"]     { counter-reset: lf-rl-0;  }
.ql-editor ul[data-lf-list="roman-upper"]     { counter-reset: lf-ru-0;  }

/* ── number-paren: 1) ─────────────────────────────────────────── */
.ql-editor li[data-list="number-paren"] {
    counter-reset: lf-np-1 lf-np-2 lf-np-3 lf-np-4 lf-np-5 lf-np-6 lf-np-7 lf-np-8;
    counter-increment: lf-np-0;
}
.ql-editor li[data-list="number-paren"]::before { content: counter(lf-np-0, decimal) ")"; }

.ql-editor li.ql-indent-1[data-list="number-paren"] {
    counter-reset: lf-np-2 lf-np-3 lf-np-4 lf-np-5 lf-np-6 lf-np-7 lf-np-8;
    counter-increment: lf-np-1;
}
.ql-editor li.ql-indent-1[data-list="number-paren"]::before { content: counter(lf-np-1, decimal) ")"; }

.ql-editor li.ql-indent-2[data-list="number-paren"] {
    counter-reset: lf-np-3 lf-np-4 lf-np-5 lf-np-6 lf-np-7 lf-np-8;
    counter-increment: lf-np-2;
}
.ql-editor li.ql-indent-2[data-list="number-paren"]::before { content: counter(lf-np-2, decimal) ")"; }

/* ── number-parens: (1) ───────────────────────────────────────── */
.ql-editor li[data-list="number-parens"] {
    counter-reset: lf-nps-1 lf-nps-2 lf-nps-3 lf-nps-4 lf-nps-5 lf-nps-6 lf-nps-7 lf-nps-8;
    counter-increment: lf-nps-0;
}
.ql-editor li[data-list="number-parens"]::before { content: "(" counter(lf-nps-0, decimal) ")"; }

.ql-editor li.ql-indent-1[data-list="number-parens"] {
    counter-reset: lf-nps-2 lf-nps-3 lf-nps-4 lf-nps-5 lf-nps-6 lf-nps-7 lf-nps-8;
    counter-increment: lf-nps-1;
}
.ql-editor li.ql-indent-1[data-list="number-parens"]::before { content: "(" counter(lf-nps-1, decimal) ")"; }

.ql-editor li.ql-indent-2[data-list="number-parens"] {
    counter-reset: lf-nps-3 lf-nps-4 lf-nps-5 lf-nps-6 lf-nps-7 lf-nps-8;
    counter-increment: lf-nps-2;
}
.ql-editor li.ql-indent-2[data-list="number-parens"]::before { content: "(" counter(lf-nps-2, decimal) ")"; }

/* ── lower-alpha: a) ──────────────────────────────────────────── */
.ql-editor li[data-list="lower-alpha"] {
    counter-reset: lf-la-1 lf-la-2 lf-la-3 lf-la-4 lf-la-5 lf-la-6 lf-la-7 lf-la-8;
    counter-increment: lf-la-0;
}
.ql-editor li[data-list="lower-alpha"]::before { content: counter(lf-la-0, lower-alpha) ")"; }

.ql-editor li.ql-indent-1[data-list="lower-alpha"] {
    counter-reset: lf-la-2 lf-la-3 lf-la-4 lf-la-5 lf-la-6 lf-la-7 lf-la-8;
    counter-increment: lf-la-1;
}
.ql-editor li.ql-indent-1[data-list="lower-alpha"]::before { content: counter(lf-la-1, lower-alpha) ")"; }

.ql-editor li.ql-indent-2[data-list="lower-alpha"] {
    counter-reset: lf-la-3 lf-la-4 lf-la-5 lf-la-6 lf-la-7 lf-la-8;
    counter-increment: lf-la-2;
}
.ql-editor li.ql-indent-2[data-list="lower-alpha"]::before { content: counter(lf-la-2, lower-alpha) ")"; }

/* ── lower-alpha-dot: a. ──────────────────────────────────────── */
.ql-editor li[data-list="lower-alpha-dot"] {
    counter-reset: lf-lad-1 lf-lad-2 lf-lad-3 lf-lad-4 lf-lad-5 lf-lad-6 lf-lad-7 lf-lad-8;
    counter-increment: lf-lad-0;
}
.ql-editor li[data-list="lower-alpha-dot"]::before { content: counter(lf-lad-0, lower-alpha) "."; }

.ql-editor li.ql-indent-1[data-list="lower-alpha-dot"] {
    counter-reset: lf-lad-2 lf-lad-3 lf-lad-4 lf-lad-5 lf-lad-6 lf-lad-7 lf-lad-8;
    counter-increment: lf-lad-1;
}
.ql-editor li.ql-indent-1[data-list="lower-alpha-dot"]::before { content: counter(lf-lad-1, lower-alpha) "."; }

.ql-editor li.ql-indent-2[data-list="lower-alpha-dot"] {
    counter-reset: lf-lad-3 lf-lad-4 lf-lad-5 lf-lad-6 lf-lad-7 lf-lad-8;
    counter-increment: lf-lad-2;
}
.ql-editor li.ql-indent-2[data-list="lower-alpha-dot"]::before { content: counter(lf-lad-2, lower-alpha) "."; }

/* ── roman-lower: i. ──────────────────────────────────────────── */
.ql-editor li[data-list="roman-lower"] {
    counter-reset: lf-rl-1 lf-rl-2 lf-rl-3 lf-rl-4 lf-rl-5 lf-rl-6 lf-rl-7 lf-rl-8;
    counter-increment: lf-rl-0;
}
.ql-editor li[data-list="roman-lower"]::before { content: counter(lf-rl-0, lower-roman) "."; }

.ql-editor li.ql-indent-1[data-list="roman-lower"] {
    counter-reset: lf-rl-2 lf-rl-3 lf-rl-4 lf-rl-5 lf-rl-6 lf-rl-7 lf-rl-8;
    counter-increment: lf-rl-1;
}
.ql-editor li.ql-indent-1[data-list="roman-lower"]::before { content: counter(lf-rl-1, lower-roman) "."; }

.ql-editor li.ql-indent-2[data-list="roman-lower"] {
    counter-reset: lf-rl-3 lf-rl-4 lf-rl-5 lf-rl-6 lf-rl-7 lf-rl-8;
    counter-increment: lf-rl-2;
}
.ql-editor li.ql-indent-2[data-list="roman-lower"]::before { content: counter(lf-rl-2, lower-roman) "."; }

/* ── roman-upper: I. ──────────────────────────────────────────── */
.ql-editor li[data-list="roman-upper"] {
    counter-reset: lf-ru-1 lf-ru-2 lf-ru-3 lf-ru-4 lf-ru-5 lf-ru-6 lf-ru-7 lf-ru-8;
    counter-increment: lf-ru-0;
}
.ql-editor li[data-list="roman-upper"]::before { content: counter(lf-ru-0, upper-roman) "."; }

.ql-editor li.ql-indent-1[data-list="roman-upper"] {
    counter-reset: lf-ru-2 lf-ru-3 lf-ru-4 lf-ru-5 lf-ru-6 lf-ru-7 lf-ru-8;
    counter-increment: lf-ru-1;
}
.ql-editor li.ql-indent-1[data-list="roman-upper"]::before { content: counter(lf-ru-1, upper-roman) "."; }

.ql-editor li.ql-indent-2[data-list="roman-upper"] {
    counter-reset: lf-ru-3 lf-ru-4 lf-ru-5 lf-ru-6 lf-ru-7 lf-ru-8;
    counter-increment: lf-ru-2;
}
.ql-editor li.ql-indent-2[data-list="roman-upper"]::before { content: counter(lf-ru-2, upper-roman) "."; }

/* ── Bild-Float-Klassen (Quill-Ausgabe in Schüler- und Lehrkraft-Ansicht) ── */
.np-fmt img.lf-float-left,
.ql-editor img.lf-float-left  { float: left;  margin: 0 12px 6px 0; max-width: 45%; height: auto; }
.np-fmt img.lf-float-right,
.ql-editor img.lf-float-right { float: right; margin: 0 0 6px 12px; max-width: 45%; height: auto; }
.np-fmt img.lf-block,
.ql-editor img.lf-block       { display: block; float: none; margin: 6px auto; clear: both; height: auto; }
/* Clearfix damit nachfolgender Text nicht unter gefloatete Bilder rutscht */
.np-fmt::after { content: ''; display: table; clear: both; }

/* ── Quill-Tabellenausgabe ── */
.ql-editor table { border-collapse:collapse; width:100%; margin:.5em 0; }
.ql-editor td, .ql-editor th { border:1px solid var(--border,#dde1e7); padding:5px 9px; vertical-align:top; }
.ql-editor th { background:var(--bg-subtle,#f8f9fa); font-weight:600; }

.lf-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}
.lf-sidebar-brand img:first-child  { height: 36px; width: auto; flex-shrink: 0; }
.lf-sidebar-brand img:last-child   { height: 28px; width: auto; }

.lf-mobile-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}
.lf-mobile-brand img:first-child   { height: 28px; width: auto; flex-shrink: 0; }
.lf-mobile-brand img:last-child    { height: 22px; width: auto; }