html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* AppBar (TASK-096-Folgeanpassung): etwas hoeher als der MudBlazor-Default, Verlaufshintergrund
   kommt per Inline-Style aus MainLayout.razor (haengt vom Light/Dark-Zustand ab). Skaliert die
   MudBlazor-eigene Toolbar-Hoehe hoch statt --mud-appbar-height selbst zu ueberschreiben, damit
   MudMainContent's Padding-Berechnung (die an --mud-appbar-height haengt) automatisch mitzieht. */
.lerniq-appbar .mud-toolbar {
    --mud-internal-toolbar-height: 80px;
}

.lerniq-appbar-mascot {
    height: 70px;
    width: auto;
    margin-left: 0.5rem;
}

.lerniq-appbar-title {
    font-weight: 800;
    letter-spacing: 0.01em;
}

/* TASK-062: Universeller Game-UI-Refresh - einheitlicher zentrierter Wrapper für alle
   Spielseiten (Crossword/WordSearch/Jeopardy/Memory/Zuordnung/Hangman/SLN/Subnetting/Quiz/Simulation). */
.game-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Der Sticky Ad-Footer (.ad-banner-footer, 60px, position: fixed) legt sich sonst ueber
   den unteren Seiteninhalt statt Platz zu beanspruchen - Padding kompensiert das, damit
   z.B. das Dashboard bis zum Ende scrollbar bleibt. */
.main-content {
    padding-bottom: 76px;
}

/* TASK-234: Der Inhalt klebte auf jeder Seite direkt an der AppBar. Der Abstand sitzt bewusst hier
   und nicht im padding-top von .mud-main-content - das rechnet MudBlazor je Breakpoint aus. */
.main-content-inner {
    padding-top: 24px;
}

/* Wiederverwendbare Korrekt/Falsch-Flash-Animation, seitenübergreifend einsetzbar
   über die Klassen .anim-correct / .anim-wrong. */
@keyframes flashCorrect {
    0% { background-color: transparent; }
    30% { background-color: rgba(29, 158, 117, 0.35); }
    100% { background-color: transparent; }
}

@keyframes flashWrong {
    0% { background-color: transparent; }
    30% { background-color: rgba(192, 57, 43, 0.35); }
    100% { background-color: transparent; }
}

.anim-correct {
    animation: flashCorrect 0.6s ease;
}

.anim-wrong {
    animation: flashWrong 0.6s ease;
}

/* Login / Register */
.auth-page {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.auth-form {
    width: 100%;
    max-width: 420px;
}

/* TASK-346: Fragen- und Antwortbild (QuestionImage.razor). Die Klassennamen gab es schon lange,
   definiert war aber keine davon - die gesamte Optik kam aus Inline-Styles in zwei Kopien. Nur die
   Hoehe bleibt dynamisch und kommt als --qi-max-h vom Parameter MaxHeightPx. */
.quiz-image-wrapper {
    display: block;
}

.quiz-question-image {
    display: block;
    width: 100%;
    max-height: var(--qi-max-h, 280px);
    object-fit: contain;
    border-radius: var(--mud-default-borderradius);
}

.quiz-question-image-zoomable {
    cursor: zoom-in;
}

.quiz-image-broken {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
}

/* TASK-432: Lange Zeichenketten in Fragen brechen um, statt die Karte zu sprengen.
   Gemeldet an "Wie lautet die korrekt gekuerzte Form von 2001:0db8:0000:0000:0001:0000:0000:0001?".

   Der Doppelpunkt ist im Standard-Zeilenumbruch KEINE Umbruchgelegenheit - der Default
   overflow-wrap: normal bricht nur an Leerzeichen und Bindestrichen. Eine IPv6-Adresse ist damit
   ein einziges 39 Zeichen langes "Wort"; dasselbe gilt fuer MAC-Adressen, URLs und lange Pfade.
   Gemessen (Chromium, echtes app.css, ohne diese Regel): Fehler-Arena-Fragetext 143 px ueber die
   Karte hinaus bei 320 px und 103 px bei 360 px, Tagesaufgabe 66 px, Lueckentext 59 px, Quiz-h6
   21 px - Letzteres passt ab 360 px knapp und faellt deshalb nur auf schmalen Geraeten auf.
   Die Seite selbst scrollte dadurch horizontal (109 px bei 320 px).

   Bewusst "anywhere" und nicht "break-word": nur "anywhere" verkleinert auch die min-content-Breite.
   Ohne das bricht der Text in einem Flex-Element trotzdem nicht um - und genau dort steht er fast
   ueberall (die Antwort-Buttons sind inline-flex, Lueckentext und Fehler-Arena-Optionen ebenso).

   Die Klasse traegt der AEUSSERE Container eines Fragen-Renderers, nicht der Fragetext:
   overflow-wrap vererbt sich, damit sind Fragetext, Antwortoptionen, Erklaerung und Ergebnisliste
   in einem Zug erfasst. Eine Klasse je Textstelle waere genau die Stelle, an der der naechste
   Renderer vergessen wird (vgl. TASK-346: acht von zehn Renderern zeigten das Fragenbild nie).

   Code-Schnipsel bleiben unberuehrt, ohne dass es dafuer eine Ausnahmeregel braucht:
   .quiz-code-block code setzt white-space: pre, und ohne erlaubten Umbruch greift overflow-wrap
   nicht - der Block behaelt seinen eigenen horizontalen Scroll. */
.question-surface {
    overflow-wrap: anywhere;
}

/* Antwort-Optionen zeigen ihren Text in normaler Schreibweise - MudBlazor setzt auf
   .mud-button-root per Default text-transform: uppercase, was laengere Antworttexte schwer
   lesbar macht und Fachbegriffe/Eigennamen verfaelscht (gleiches Muster wie .learnmodule-option).
   Die Klasse tragen QuizCard (Quiz, Exammi, Fragen-Vorschau) und alle Seiten, die ihre
   Antwort-Optionen als MudButton rendern (Pre-/Post-Test, Simulation, Challenges, Jeopardy). */
.quiz-option-btn {
    text-transform: none;
}

/* Quiz answer feedback - MudButton's own Color/Variant styling reads poorly at low
   opacity when Disabled, so the correct/wrong state is forced via explicit classes instead. */
.quiz-option-btn.correct {
    background-color: #E0F2F1 !important;
    border-color: #00897B !important;
    color: #004D40 !important;
}

/* Prüfungsmodus (Exammi): dort gibt es kein Sofort-Feedback und damit weder correct noch wrong -
   ohne diesen Zustand blieb die angeklickte Antwort völlig unmarkiert. Die Markierung trägt bewusst
   nicht allein über Farbe (kräftigerer Rahmen + Häkchen), und sie nutzt Theme-Variablen statt fixer
   Hex-Werte, damit sie auch im Dark Mode lesbar bleibt. */
.quiz-option-btn.selected {
    position: relative;
    border-width: 2px !important;
    border-color: var(--mud-palette-primary) !important;
    background-color: var(--mud-palette-primary-hover) !important;
    font-weight: 600 !important;
}

.quiz-option-btn.selected::after {
    content: "✓";
    position: absolute;
    right: 0.75rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.quiz-option-btn.wrong {
    background-color: #FFEBEE !important;
    border-color: #E53935 !important;
    color: #B71C1C !important;
}

/* Lückentext (TASK-047) - Fragetext + Blank-Inputs im Fließtext, gleiches Prinzip wie oben:
   explizite Klassen statt MudTextField's Disabled/ReadOnly-Dimmung fürs Korrekt/Falsch-Feedback. */
.quiz-fillblank-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    font-size: 1.15rem;
    line-height: 2.4;
}

.quiz-blank-input {
    display: inline-flex;
    width: 140px;
    vertical-align: middle;
}

.quiz-blank-input.correct .mud-input-outlined-border {
    border-color: #00897B !important;
}

.quiz-blank-input.correct input {
    background-color: #E0F2F1 !important;
    color: #004D40 !important;
}

.quiz-blank-input.wrong .mud-input-outlined-border {
    border-color: #E53935 !important;
}

.quiz-blank-input.wrong input {
    background-color: #FFEBEE !important;
    color: #B71C1C !important;
}

.quiz-blank-correct-hint {
    color: #B71C1C;
    white-space: nowrap;
}

/* Quiz code snippets (TASK-033) - dark background regardless of theme, horizontal
   scroll confined to the code block so the page itself never scrolls sideways on mobile. */
.quiz-code-block {
    background-color: #282c34;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow-x: auto;
    max-width: 100%;
}

.quiz-code-block pre {
    margin: 0;
    padding: 1rem;
}

.quiz-code-block code {
    font-family: 'Consolas', 'Cascadia Code', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre;
    /* TASK-559: Grundfarbe ohne highlight.js. Die Farbe setzt sonst erst .hljs nach dem Faerben -
       laedt das CDN-Skript nicht (Schulnetz, Adblocker), stand dunkler Text auf dunklem Grund. */
    color: #abb2bf;
}

/* TASK-559: Code-Eingabe im Fragendialog und Code-Spalte der Import-Vorschau - Monospace, damit
   Einrueckung (Python!) beim Pruefen sichtbar bleibt. */
.question-code-input,
.import-code-preview {
    font-family: 'Consolas', 'Cascadia Code', 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
}

.import-code-preview {
    margin: 0;
    max-height: 8rem;
    max-width: 22rem;
    overflow: auto;
    white-space: pre;
}

/* Category dashboard cards */
.category-card {
    transition: transform 0.15s ease;
}

.category-card:hover {
    transform: translateY(-2px);
}

/* Simulation - centered layout + selectable cards */
.simulation-page {
    max-width: 700px;
    margin: 0 auto;
}

.simulation-select-card {
    cursor: pointer;
    user-select: none;
    padding: 1rem 0.5rem;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.simulation-select-card:hover {
    transform: translateY(-2px);
}

.simulation-select-card.selected {
    outline: 3px solid var(--mud-palette-primary, #2a78d6);
    outline-offset: -1px;
}

/* Memory game - 3D card flip */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.memory-card-slot {
    perspective: 800px;
    cursor: pointer;
    --memory-flip-duration: 0.4s;
}

.memory-card-slot.matched {
    cursor: default;
}

.memory-card-inner {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 100px;
    text-align: center;
    transition: transform var(--memory-flip-duration);
    transform-style: preserve-3d;
}

.memory-card-slot.is-flipped .memory-card-inner,
.memory-card-slot.matched .memory-card-inner {
    transform: rotateY(180deg);
}

/* Beide Kartenseiten liegen in derselben Grid-Zelle statt (wie zuvor) absolut positioniert mit
   fester Höhe - die Zelle wächst dadurch automatisch auf die Höhe der längeren Seite, statt dass
   lange Langformen (z.B. "International Organization for Standardization") über den Kartenrand
   hinaus gerendert werden. */
.memory-card-face {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    min-height: 100px;
    backface-visibility: hidden;
    /* TASK-411: wie bei der Karteikarte wird die abgewandte Seite zusaetzlich per visibility
       ausgeblendet, statt sich allein auf backface-visibility zu verlassen - das faellt aus, sobald
       eine Seite oder einer ihrer Nachfahren eine eigene Kompositionsebene bekommt (Scroll-Container,
       transform, will-change, opacity < 1 - Letzteres steht hier bereits bei .matched). Verzoegert um
       die halbe Flipdauer, damit umgeschaltet wird, waehrend die Karte hochkant steht. */
    transition: visibility 0s linear calc(var(--memory-flip-duration) / 2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0.5rem;
    font-size: 0.85rem;
    word-break: break-word;
}

.memory-card-face-back {
    background: var(--mud-palette-primary, #2a78d6);
    color: white;
    visibility: visible;
}

.memory-card-slot.is-flipped .memory-card-face-back,
.memory-card-slot.matched .memory-card-face-back {
    visibility: hidden;
}

.memory-card-face-front {
    background: color-mix(in srgb, var(--pair-color, #90BE6D) 22%, white);
    border: 2px solid var(--pair-color, #90BE6D);
    color: #1A1A1A;
    transform: rotateY(180deg);
    visibility: hidden;
}

.memory-card-slot.is-flipped .memory-card-face-front,
.memory-card-slot.matched .memory-card-face-front {
    visibility: visible;
}

.memory-card-slot.matched .memory-card-face-front {
    opacity: 0.6;
}

/* Mobile: 3 statt 4 Spalten pro Reihe - mehr Breite pro Karte reduziert die nötige Zeilenzahl für
   lange Langformen, wodurch Karten insgesamt kompakter bleiben (siehe .memory-card-face oben, das
   die Zellenhöhe ohnehin an den längsten Inhalt in der Reihe anpasst). */
@media (max-width: 600px) {
    .memory-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .memory-card-face {
        font-size: 0.8rem;
    }
}

/* Karteikarten (Flashcards) - 3D card flip, analog zu .memory-card-* aber eigenes Layout/Sizing
   (variable Inhaltslänge: Bild/Code-Snippet/Erklärung/Bewertungs-Buttons statt kurzem Memory-Text). */
.flashcard-slot {
    perspective: 1500px;
    min-height: 320px;
    --flashcard-flip-duration: 0.5s;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    min-height: 320px;
    transition: transform var(--flashcard-flip-duration) ease;
    transform-style: preserve-3d;
}

.flashcard-slot.is-flipped .flashcard-inner {
    transform: rotateY(180deg);
}

/* TASK-411: backface-visibility allein reicht hier NICHT aus. Die Frageseite traegt unten
   overflow-y: auto; laeuft ihr Inhalt tatsaechlich ueber - genau bei langem Fragetext oder einem
   Bild -, entsteht innerhalb des preserve-3d-Kontextes ein eigener Scroll-/Kompositionslayer, und
   darauf wendet die Engine backface-visibility nicht mehr an: die abgewandte Seite blieb sichtbar
   und stand spiegelverkehrt ueber der Antwort. Kurze Fragen ohne Bild laufen nicht ueber, erzeugen
   keinen eigenen Layer und waren deshalb unauffaellig - deshalb sah es nach einem Problem "langer"
   Fragen aus und nicht nach einem des Flips.
   Die abgewandte Seite wird deshalb zusaetzlich per visibility ausgeblendet. Das haengt an keiner
   Layer-Entscheidung des Browsers, sondern am ohnehin vorhandenen .is-flipped.
   Die Verzoegerung um die halbe Flipdauer schaltet genau dann um, wenn die Karte hochkant steht und
   beide Seiten ohnehin nicht zu sehen sind - der Flip sieht dadurch unveraendert aus. Ohne sie
   verschwaende die Vorderseite sofort beim Klick und die Karte drehte sich leer. */
.flashcard-face {
    backface-visibility: hidden;
    transition: visibility 0s linear calc(var(--flashcard-flip-duration) / 2);
}

/* Vorderseite (Frage) hat kaum variablen Inhalt - bleibt auf die feste Slot-Hoehe begrenzt (eigener
   Scroll ab 70vh). Rueckseite (Antwort) traegt Bewertungs-Buttons + Rating + Kommentare und ist oft
   deutlich hoeher als die 320px Slot-Mindesthoehe.
   Beide Faces standardmaessig absolut uebereinander gestapelt (fuer den 3D-Flip). Damit die jeweils
   sichtbare Seite die tatsaechliche Card-Hoehe bestimmt (sonst blieb .flashcard-inner auf 320px
   begrenzt und der Inhalt der Antwortseite - insbesondere das Kommentarfeld - ragte optisch aus der
   Card heraus, TASK-120), wird die gerade sichtbare Seite per .is-flipped in den normalen Fluss
   (position: relative) geschaltet, die verdeckte Seite bleibt/wird absolut positioniert. */
.flashcard-face-question {
    position: relative;
    overflow-y: auto;
    max-height: 70vh;
    visibility: visible;
}

.flashcard-slot.is-flipped .flashcard-face-question {
    position: absolute;
    inset: 0;
    visibility: hidden;
}

.flashcard-face-answer {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    visibility: hidden;
}

.flashcard-slot.is-flipped .flashcard-face-answer {
    position: relative;
    inset: auto;
    visibility: visible;
}

/* Wie bei .quiz-option-btn: MudBlazors Uppercase-Default aufheben, damit die Bewertungs-
   Beschriftungen ("Nochmal", "Schwer", ...) in normaler Schreibweise stehen. */
.flashcard-rating-btn {
    min-height: 56px;
    text-transform: none;
}

/* Zuordnungsspiel - drag & drop chips + drop-zone slots */
.assignment-chip {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    margin: 0 0.5rem 0.5rem 0;
    border-radius: 20px;
    background: var(--mud-palette-primary, #2a78d6);
    color: white;
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.assignment-chip.selected {
    outline: 3px solid var(--mud-palette-warning, #F8961E);
    outline-offset: 2px;
}

.assignment-chip.assigned {
    background: var(--mud-palette-success, #1D9E75);
    margin: 0;
    cursor: pointer;
}

.assignment-slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    border: 2px dashed var(--mud-palette-lines-default, #c9c9c9);
    border-radius: 8px;
    cursor: pointer;
}

.assignment-slot-label {
    font-weight: 500;
}

/* Jeopardy-Brett */
.jeopardy-board {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}

.jeopardy-category-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-align: center;
    padding: 0.5rem 0.25rem;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.15;
    border-radius: 8px;
    border-top: 4px solid rgba(255, 255, 255, 0.7);
    background: var(--mud-palette-primary, #2a78d6);
    color: white;
    min-height: 3rem;
}

.jeopardy-category-header i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.jeopardy-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.5rem;
    border-radius: 8px;
    border-top: 4px solid transparent;
    background: color-mix(in srgb, var(--mud-palette-primary, #2a78d6) 12%, white);
    border-right: 2px solid var(--mud-palette-primary, #2a78d6);
    border-bottom: 2px solid var(--mud-palette-primary, #2a78d6);
    border-left: 2px solid var(--mud-palette-primary, #2a78d6);
    color: var(--mud-palette-primary, #2a78d6);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: transform 0.15s ease;
    animation: jeopardy-tile-in 0.2s ease-out;
}

.jeopardy-tile:hover {
    transform: scale(1.04);
}

@keyframes jeopardy-tile-in {
    0% { transform: scale(0.85); opacity: 0.3; }
    100% { transform: scale(1); opacity: 1; }
}

/* Mobile: starres 6-Spalten-Grid schrumpft Kacheln sonst unter jedes sinnvolle Touch-Ziel (~48px) -
   Mindestbreite pro Spalte erzwingen und stattdessen horizontal scrollen lassen, gleiches Prinzip wie
   .quiz-code-block's overflow-x. Erste @media-Regel der App. */
@media (max-width: 600px) {
    .jeopardy-board {
        grid-template-columns: repeat(6, minmax(72px, 1fr));
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }

    .jeopardy-tile {
        min-height: 56px;
        height: auto;
    }

    .jeopardy-category-header {
        font-size: 0.7rem;
        min-height: 2.75rem;
    }

    .jeopardy-category-header i {
        font-size: 0.9rem;
    }
}

.jeopardy-tile.solved-correct {
    background: var(--mud-palette-success, #1D9E75);
    border-color: var(--mud-palette-success, #1D9E75);
    color: white;
    cursor: default;
}

.jeopardy-tile.solved-incorrect {
    background: var(--mud-palette-error, #C0392B);
    border-color: var(--mud-palette-error, #C0392B);
    color: white;
    cursor: default;
}

/* TASK-066: Jeopardy Online-PvP - vom Gegner beanspruchte Felder werden lila eingefaerbt (statt
   grün/rot wie bei eigenen Feldern), eigene noch offene Felder werden gesperrt, solange der Gegner
   am Zug ist. */
.jeopardy-tile.claimed-opponent {
    background: #7B4FA6;
    border-color: #7B4FA6;
}

/* Kurzer 3D-Flip beim Aufdecken einer Kachel, bevor der Fragedialog/das Frage-Panel erscheint. */
.jeopardy-tile.flipping {
    animation: jeopardy-tile-flip 0.22s ease-in-out;
}

@keyframes jeopardy-tile-flip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

.category-multiselect-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.jeopardy-tile.locked {
    pointer-events: none;
    opacity: 0.6;
    cursor: default;
}

.jeopardy-mascot-wrap {
    display: flex;
    max-width: 400px;
    width: 100%;
}

.jeopardy-mascot {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    border-radius: 16px;
}

.podcast-card {
    border: 1px solid var(--mud-palette-lines-default, #c9c9c9);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.podcast-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.podcast-info .duration {
    margin-left: auto;
    font-weight: 400;
    opacity: 0.7;
}

.podcast-upload-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.podcast-upload-form input[type="text"],
.podcast-upload-form input[type="number"],
.podcast-upload-form select,
.podcast-upload-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, #c9c9c9);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Level-up celebration overlay */
.level-up-overlay {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -20px);
    z-index: 1200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.level-up-overlay.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.level-up-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    background: var(--mud-palette-surface, #ffffff);
    border: 2px solid var(--mud-palette-warning, #F8961E);
    border-radius: 16px;
    padding: 1.25rem 2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: level-up-pop 0.5s ease;
}

.level-up-icon {
    font-size: 2.5rem;
    color: var(--mud-palette-warning, #F8961E);
}

@keyframes level-up-pop {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Streak milestone highlight */
.streak-milestone {
    animation: streak-pulse 0.8s ease;
}

@keyframes streak-pulse {
    0% { transform: scale(1); }
    30% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Sprint 11/TASK-069: kurzer Puls auf der gerade freigeschalteten Achievement-Karte im Profil-Grid. */
@keyframes achievement-unlock-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 150, 30, 0.6); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(248, 150, 30, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(248, 150, 30, 0); }
}

.achievement-unlock-pulse {
    animation: achievement-unlock-pulse 1.2s ease-out 2;
}

/* TASK-159: dezenter, endloser Puls am Online-Punkt in der Freundesliste (Liveness-Signal).
   Farbe über die MudBlazor-Palette (Light/Dark-sicher), Opt-in nur ohne reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    .online-pulse .mud-badge {
        animation: online-dot-pulse 2s ease-out infinite;
    }

    @keyframes online-dot-pulse {
        0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-success) 45%, transparent); }
        70% { box-shadow: 0 0 0 6px transparent; }
        100% { box-shadow: 0 0 0 0 transparent; }
    }
}

/* Achievement-Unlock-Toast */
.achievement-toast-overlay {
    position: fixed;
    top: 5rem;
    right: 1rem;
    z-index: 1200;
    pointer-events: none;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.achievement-toast-overlay.visible {
    opacity: 1;
    transform: translateX(0);
}

.achievement-toast-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--mud-palette-surface, #ffffff);
    border: 2px solid var(--mud-palette-warning, #F8961E);
    border-radius: 16px;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: level-up-pop 0.5s ease;
}

.achievement-toast-icon {
    font-size: 2.25rem;
    flex-shrink: 0;
}

/* Kreuzworträtsel Wort-gefunden-Overlay */
.crossword-toast-overlay {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -20px);
    z-index: 1200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.crossword-toast-overlay.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.crossword-toast-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    max-width: 320px;
    text-align: center;
    background: var(--mud-palette-surface, #ffffff);
    border: 2px solid var(--mud-palette-success, #3AA655);
    border-radius: 16px;
    padding: 1.25rem 1.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: level-up-pop 0.5s ease;
}

.crossword-toast-icon {
    font-size: 2.5rem;
    color: var(--mud-palette-success, #3AA655);
}

/* Kreuzworträtsel-Redesign (TASK-161): Klassen statt Inline-Styles, alle Farben über die
   MudBlazor-Palette bzw. color-mix mit Palette-Variablen - dadurch Light- und Dark-Mode-fähig.
   Blockierte Zellen sind bewusst transparent (Seitenhintergrund) statt massiv dunkel, das
   funktioniert in beiden Themes ohne Sonderfälle. */
.crossword-grid-wrapper {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 4px;
}

.crossword-grid {
    border-collapse: collapse;
    margin: 0 auto;
}

/* Farben relativ zur Textfarbe gemischt statt fix gesetzt: MudBlazor tauscht die Palette je Theme,
   damit hebt sich das Gitter in beiden Modi vom Seitenhintergrund ab. Vorher war die Zelle schlicht
   "surface" - im Dark Mode (#0D2040 auf Hintergrund #0A1929) waren Raster und Seite kaum zu
   unterscheiden. */
.crossword-cell {
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 35%, var(--mud-palette-surface));
    width: 40px;
    height: 40px;
    padding: 0;
    position: relative;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 8%, var(--mud-palette-surface));
}

.crossword-cell.blocked {
    background: transparent;
    border-color: transparent;
}

.crossword-cell.active-word {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
}

.crossword-cell.active-cell {
    box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}

.crossword-cell.correct {
    background: color-mix(in srgb, var(--mud-palette-success) 32%, var(--mud-palette-surface));
}

.crossword-cell-number {
    position: absolute;
    top: 0;
    left: 2px;
    font-size: 9px;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary, #666);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* 16px verhindert iOS-Auto-Zoom beim Fokussieren, touch-action: manipulation den
   Doppel-Tap-Zoom auf den kleinen Zellen. */
.crossword-cell-input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
    outline: none;
    text-transform: uppercase;
    background: transparent;
    font-weight: 700;
    font-size: 16px;
    color: var(--mud-palette-text-primary, #333);
    caret-color: var(--mud-palette-primary, #2a78d6);
    touch-action: manipulation;
}

@media (max-width: 480px) {
    .crossword-cell {
        width: 34px;
        height: 34px;
    }
}

@keyframes crossword-flash {
    0% { background-color: var(--mud-palette-surface, #ffffff); }
    40% { background-color: color-mix(in srgb, var(--mud-palette-success) 55%, var(--mud-palette-surface)); }
    100% { background-color: color-mix(in srgb, var(--mud-palette-success) 22%, var(--mud-palette-surface)); }
}

.crossword-cell-flash {
    animation: crossword-flash 0.7s ease;
}

/* Hinweis-Cards: klickbar (markiert das Wort im Grid), Erledigt-Zustand über Icon + Durchstrich,
   nie Farbe allein. Touch-Ziel >= 44px. */
.crossword-clue {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 6px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.crossword-clue.active {
    border-color: var(--mud-palette-primary, #2a78d6);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
}

/* Gefundene Woerter werden hervorgehoben statt ausgeblendet: das fruehere opacity 0.75 liess sie im
   Dark Mode im Hintergrund verschwinden, statt den Fortschritt zu zeigen. Durchstrich und Haken tragen
   die Aussage, die Farbe verstaerkt nur. */
.crossword-clue.found {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 14%, var(--mud-palette-surface));
}

.crossword-clue.found .crossword-clue-text,
.crossword-clue.found .crossword-clue-number {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.crossword-clue-number {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--mud-palette-primary, #2a78d6);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.crossword-clue.found .crossword-clue-number {
    background: var(--mud-palette-success, #3AA655);
}

.crossword-clue-text {
    flex: 1;
}

/* Wortsuchrätsel - Live-Grau-Highlight während des Drag-Ziehens + Fund-Animation */
@keyframes fadeToGreen {
    0% { background-color: #ffe082; }
    100% { background-color: #c8f7c5; }
}

.wordsearch-cell-selecting {
    background-color: #d0d0d0 !important;
}

.wordsearch-cell-found {
    animation: fadeToGreen 0.6s ease forwards;
}

/* TASK-554: Gefundene Woerter in der Liste durchstreichen. Die vorher gesetzte Klasse
   "text-decoration-line-through" gibt es weder in MudBlazor noch hier - sie wirkte nie. */
.wordsearch-word-found {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    color: var(--mud-palette-text-secondary);
}

/* Memory - Shake-Animation bei nicht passendem Kartenpaar */
@keyframes memoryShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.memory-card-slot.shake .memory-card-inner {
    animation: memoryShake 0.4s ease;
}

/* Cookie consent banner (shown above the ad footer when AdSense is configured) */
.cookie-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px;
    z-index: 950;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
}

.cookie-consent-text {
    flex: 1 1 320px;
}

.cookie-consent-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Sticky ad footer */
.ad-banner-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
}

/* Router "not authorized" fallback */
.not-authorized {
    max-width: 400px;
    text-align: center;
    margin: 3rem auto;
}

.not-authorized .btn {
    display: inline-block;
    margin-top: 0.5rem;
}

/* Blazor framework defaults */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* TASK-073: CSS-only Confetti-Burst am Ende des Onboarding-Wizards (kein JS/Canvas noetig). */
.confetti-burst {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
}

.confetti-piece {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 14px;
    opacity: 0.9;
    animation: confetti-fall 1.1s ease-in forwards;
}

.confetti-piece:nth-child(4n) { background: #F94144; }
.confetti-piece:nth-child(4n + 1) { background: #F8961E; }
.confetti-piece:nth-child(4n + 2) { background: #F9C74F; }
.confetti-piece:nth-child(4n + 3) { background: #90BE6D; }

.confetti-piece:nth-child(1) { left: 3%; animation-delay: 0ms; }
.confetti-piece:nth-child(2) { left: 10%; animation-delay: 60ms; }
.confetti-piece:nth-child(3) { left: 17%; animation-delay: 120ms; }
.confetti-piece:nth-child(4) { left: 24%; animation-delay: 20ms; }
.confetti-piece:nth-child(5) { left: 31%; animation-delay: 90ms; }
.confetti-piece:nth-child(6) { left: 38%; animation-delay: 150ms; }
.confetti-piece:nth-child(7) { left: 45%; animation-delay: 30ms; }
.confetti-piece:nth-child(8) { left: 52%; animation-delay: 100ms; }
.confetti-piece:nth-child(9) { left: 59%; animation-delay: 10ms; }
.confetti-piece:nth-child(10) { left: 66%; animation-delay: 80ms; }
.confetti-piece:nth-child(11) { left: 73%; animation-delay: 140ms; }
.confetti-piece:nth-child(12) { left: 80%; animation-delay: 40ms; }
.confetti-piece:nth-child(13) { left: 87%; animation-delay: 110ms; }
.confetti-piece:nth-child(14) { left: 94%; animation-delay: 160ms; }
.confetti-piece:nth-child(15) { left: 50%; animation-delay: 70ms; }
.confetti-piece:nth-child(16) { left: 20%; animation-delay: 130ms; }

@keyframes confetti-fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(260px) rotate(540deg); opacity: 0; }
}

/* TASK-089 (Sprint 14): Shark Attack (ehem. Hangman) - Pinguin/Hai-Szene, rein CSS-animiert. */
.shark-attack-scene {
    position: relative;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    background: linear-gradient(to bottom, #bfe3f7 0%, #bfe3f7 55%, #2a78d6 55%, #1a5aa8 100%);
}

.shark-attack-water {
    position: absolute;
    inset: 55% 0 0 0;
    background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0.12) 10px, transparent 10px, transparent 26px);
    animation: shark-water-scroll 6s linear infinite;
}

.shark-attack-floes {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 40%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 2;
}

.shark-attack-floe {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 30%, #ffffff, #d9f0fb 65%, #b7e2f2 100%);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}

.shark-attack-floe.is-cracking {
    background: radial-gradient(ellipse at 35% 30%, #eef7fa, #a9c9d8 60%, #7fa9bd 100%);
    animation: shark-attack-floe-crack 0.9s ease-in forwards;
}

.shark-attack-penguin {
    position: absolute;
    left: 50%;
    bottom: 85%;
    transform: translateX(-50%);
    font-size: 2rem;
    line-height: 1;
    transform-origin: 50% 100%;
    animation: shark-attack-hop 0.35s ease-out;
}

.shark-attack-shark {
    position: absolute;
    right: calc((1 - var(--progress)) * 55% + 2%);
    bottom: 12%;
    font-size: 2.5rem;
    line-height: 1;
    transition: right 0.5s ease;
    animation: shark-bob 2s ease-in-out infinite;
    z-index: 3;
}

.shark-attack-scene.is-lost .shark-attack-penguin {
    animation: shark-attack-penguin-sink 0.9s ease-in forwards;
}

.shark-attack-scene.is-lost .shark-attack-shark {
    animation: shark-attack-lunge 0.5s ease-in-out 2;
}

.shark-attack-scene.is-won .shark-attack-penguin {
    animation: shark-attack-penguin-hop 0.6s ease-in-out 2;
}

.shark-attack-scene.is-won .shark-attack-shark {
    right: -15%;
    opacity: 0;
    transition: right 1s ease-in, opacity 1s ease-in 0.3s;
}

@keyframes shark-water-scroll {
    0% { background-position: 0 0; }
    100% { background-position: -260px 0; }
}

@keyframes shark-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes shark-attack-lunge {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(-14px) scale(1.15); }
}

@keyframes shark-attack-hop {
    0% { transform: translate(-50%, -18px) scale(0.9); opacity: 0.6; }
    60% { transform: translate(-50%, -22px) scale(1.05); opacity: 1; }
    100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

@keyframes shark-attack-floe-crack {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    40% { transform: translateY(2px) rotate(-6deg); opacity: 1; }
    100% { transform: translateY(40px) rotate(-25deg); opacity: 0; }
}

@keyframes shark-attack-penguin-sink {
    0% { transform: translate(-50%, 0) rotate(0deg); opacity: 1; }
    50% { transform: translate(-50%, 10px) rotate(-15deg); opacity: 1; }
    100% { transform: translate(-50%, 60px) rotate(200deg); opacity: 0; }
}

@keyframes shark-attack-penguin-hop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.shark-attack-keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.shark-attack-keyboard-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.shark-attack-key {
    min-width: 44px;
    min-height: 44px;
}

.shark-attack-key.is-correct {
    background-color: #2e7d32 !important;
    color: #fff !important;
}

.shark-attack-key.is-incorrect {
    background-color: #c62828 !important;
    color: #fff !important;
}

/* TASK-093 (Sprint 15): "Buchstabe kaufen"-Modus - goldener Rand um die Tastatur */
.shark-attack-keyboard.is-buy-mode {
    border: 2px solid #F9C74F;
    border-radius: 12px;
    padding: 0.5rem;
}

/* TASK-092 (Sprint 15): geteiltes Gewinn-Overlay (WinCelebrationOverlay.razor) für alle Spielseiten */
.win-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.win-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.win-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin: 1rem;
    border-radius: 16px;
    background: var(--mud-palette-surface, #ffffff);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    padding: 2rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    transform: scale(0.85);
    opacity: 0;
    animation: win-card-in 0.15s ease forwards;
}

@keyframes win-card-in {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.win-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.win-confetti-piece {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 14px;
    opacity: 0.9;
    animation-name: win-confetti-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes win-confetti-fall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 0.9; }
    100% { transform: translateY(420px) rotate(540deg); opacity: 0; }
}

.win-trophy-icon {
    font-size: 3.5rem;
    color: var(--mud-palette-warning, #F8961E);
}

.win-xp-chip {
    font-weight: 700;
    font-size: 1.1rem;
}

.win-subtitle {
    color: var(--mud-palette-text-secondary, #6b7280);
}

/* Milestone 15: MudBlazor 9.5's mitgeliefertes CSS stylt .mud-slider-input nur innerhalb des
   Color-Pickers (.mud-picker-color-slider ...) - ein eigenstaendiger <MudSlider> (z.B. Subnetting-
   Praefix) faellt ohne diese Regeln komplett auf den unstylten, kaum sichtbaren nativen
   <input type=range> zurueck. Eigene, generische Themeing-Regeln als Fallback. */
.mud-slider-input {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--mud-palette-primary-lighten, #7db3ea);
    cursor: pointer;
}

.mud-slider-input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mud-palette-primary, #2a78d6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.mud-slider-input::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: var(--mud-palette-primary-lighten, #7db3ea);
}

.mud-slider-input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--mud-palette-primary, #2a78d6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

/* ==========================================================================
   Lernmodul-System (TASK-144 ff.) - "Messinstrument, nicht Kinder-App":
   ein einspaltiges Layout (max. 720px), das sich streckt; Zahlen/Adressen
   immer Monospace mit tabellarischen Ziffern, stellengenau untereinander.
   ========================================================================== */

.learnmodule-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Monospace fuer alles Rechnerische: IP-Adressen, Masken, Bits, Blockgroessen. */
.learnmodule-mono {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    font-size: max(15px, 0.95rem);
}

/* TASK-565: Mehrzeiliger Monospace-Block (PromptMono einer Uebungsstufe, z. B. die
   Patchfeld-Tabelle). Ohne white-space: pre fielen die Zeilenumbrueche weg und die Tabelle lief
   als eine Zeile zusammen. Nur der Block scrollt horizontal, nie die Seite.
   Bewusst eine eigene Klasse statt .learnmodule-mono selbst: die steckt auch auf Inline-Spans,
   Eingabefeldern, AddressBar-Knoepfen und dem Markdown-Editor (textarea) - dort wuerde pre den
   Umbruch langer Werte bzw. den Soft-Wrap des Editors abschalten. */
.learnmodule-mono-block {
    display: block;
    max-width: 100%;
    white-space: pre;
    overflow-x: auto;
}

/* TASK-568: Ausgabe eines Python-Laufs (Admin-Smoke-Test, spaeter Terminal). Zeilenumbrueche der
   Ausgabe bleiben (pre-wrap), lange Zeilen brechen um statt die Seite zu verbreitern; viel Ausgabe
   scrollt im Block. */
.python-output {
    margin: 0;
    padding: 8px 12px;
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

/* TASK-570: Code-Editor (PythonCodeEditor) und Hamster-Terminal (PythonTerminal).
   Schrift mindestens 16px, sonst zoomt iOS beim Fokus. Eigene <button> deklarieren alles selbst
   (MudBlazor zentriert und stylt nackte Buttons global, TASK-358). Lange Codezeilen scrollen NUR im
   Editor (wrap=off + overflow:auto), die Seite wird nie breiter. */
.py-editor,
.py-terminal {
    min-width: 0;
    max-width: 100%;
}

.py-editor-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.py-editor-key,
.py-snippet-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--mud-palette-lines-inputs, rgba(0, 0, 0, .3));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
}

.py-editor-key--wide {
    min-width: 64px;
}

.py-editor-key:hover,
.py-snippet-chip:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
}

.py-editor-key:focus-visible,
.py-snippet-chip:focus-visible,
.py-editor-area:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.py-editor-bar .py-editor-reset.mud-button-root {
    min-height: 44px;
}

.py-editor-area {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 200px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-inputs, rgba(0, 0, 0, .3));
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16px;
    line-height: 1.5;
    tab-size: 4;
    white-space: pre;
    overflow: auto;
    resize: vertical;
}

.py-editor-hint {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}

.py-snippet-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.py-snippet-topic {
    flex-basis: 100%;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    font-weight: 600;
}

.py-snippet-chip {
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Bahnhofs-Anzeigetafel: dunkel in beiden Themes - so liest sich auch im hellen Modus wie eine Tafel. */
.py-board {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    padding: 12px;
    border-radius: 8px;
    background: #14202e;
    color: #ffd86b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16px;
}

.py-board-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #9fb4c9;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.py-board pre,
.py-board p {
    margin: 0 0 8px;
}

.py-board-out,
.py-board-err {
    max-height: 320px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: inherit;
}

.py-board-err {
    color: #ffb4a8;
}

.py-board-errhead {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
    color: #ffb4a8;
    font-weight: 700;
}

.py-board-empty,
.py-board-note {
    color: #c9d6e2;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

.py-board-explain {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    padding: 10px 12px;
    border-left: 4px solid #6fb7ff;
    border-radius: 4px;
    background: rgba(255, 255, 255, .08);
    color: #e8f0f8;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.py-board-explain code {
    color: #ffd86b;
    white-space: pre-wrap;
}

/* TASK-572: Code-Challenge im StageHost (CodeChallengeStep/-Feedback). Ziel-Ausgabe und Vergleich sind
   <pre> mit Umbruch (pre-wrap + anywhere) und eigenem Scroll, damit auch bei 320 px nichts ueber den
   Rand laeuft; die zwei Spalten des Vergleichs brechen unter ~440 px untereinander. */
.py-challenge,
.py-feedback {
    min-width: 0;
    max-width: 100%;
}

.py-target {
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
}

.py-target-title,
.py-compare-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
    font-weight: 600;
}

.py-target-out,
.py-compare-pre,
.py-solution-pre {
    box-sizing: border-box;
    max-width: 100%;
    max-height: 260px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 16px;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.py-compare {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.py-compare-col {
    flex: 1 1 200px;
    min-width: 0;
}

.py-compare-pre {
    padding: 10px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
}

.py-solution {
    margin-bottom: 8px;
}

.py-solution summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--mud-palette-primary);
    font-weight: 600;
    cursor: pointer;
}

.py-solution summary:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Theorietext: Zeilenlaenge auf ~70 Zeichen begrenzen, Fliesstext min. 16px. */
.learnmodule-content {
    max-width: 70ch;
    font-size: max(16px, 1rem);
    line-height: 1.65;
}

.learnmodule-content h2,
.learnmodule-content h3 {
    margin: 24px 0 8px;
    line-height: 1.3;
}

.learnmodule-content p,
.learnmodule-content ul,
.learnmodule-content ol {
    margin: 0 0 12px;
}

/* Der globale Reset entfernt das Listen-Padding - ohne Einzug haengen die Aufzaehlungspunkte
   am linken Rand (sichtbar im TheoryDrawer und im Reader). */
.learnmodule-content ul,
.learnmodule-content ol {
    padding-left: 1.5em;
}

.learnmodule-content li {
    margin-bottom: 4px;
}

/* Kapitelbilder (Markdown ![Alt](/learnmodules/images/n)): nie breiter als die Spalte, damit die
   Seite nicht horizontal scrollt (Design-Regel des Lernmodul-Briefs). */
.learnmodule-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 16px 0;
    border-radius: 8px;
}

/* Merkboxen: Blockquote mit Cyan-Akzentkante (Design-Brief "Kapitel lesen"). */
.learnmodule-content blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 4px solid var(--mud-palette-tertiary, #26C6DA);
    background: var(--mud-palette-background-gray, rgba(38, 198, 218, 0.06));
    border-radius: 0 8px 8px 0;
}

.learnmodule-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Rechenbloecke: Monospace, min. 15px, horizontal scrollbar im eigenen Container
   statt die Seite zu verbreitern. */
.learnmodule-content pre {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: max(15px, 0.95rem);
    line-height: 1.5;
    padding: 12px 16px;
    margin: 12px 0;
    border-radius: 8px;
    background: var(--mud-palette-background-gray, rgba(0, 0, 0, 0.05));
    overflow-x: auto;
}

.learnmodule-content code {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.learnmodule-content table {
    border-collapse: collapse;
    margin: 12px 0;
}

.learnmodule-content th,
.learnmodule-content td {
    padding: 6px 12px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

/* Theorie-Overlay (TASK-145): rechtes Seitenpanel ab 900px, darunter Bottom-Sheet -
   der einzige echte Layoutunterschied im ganzen Modul (Design-Brief). */
.theory-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1399;
}

.theory-drawer {
    position: fixed;
    z-index: 1400;
    background: var(--mud-palette-surface, #fff);
    display: flex;
    flex-direction: column;
    box-shadow: var(--mud-elevation-8);
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
}

@media (max-width: 899.98px) {
    .theory-drawer {
        top: auto;
        left: 0;
        width: 100%;
        height: 80vh;
        border-radius: 16px 16px 0 0;
    }
}

.theory-drawer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    flex-shrink: 0;
}

.theory-drawer-body {
    overflow-y: auto;
    padding: 16px;
    flex-grow: 1;
    -webkit-overflow-scrolling: touch;
}

.theory-drawer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .theory-drawer {
        animation: theory-drawer-in 0.2s ease-out;
    }

    @keyframes theory-drawer-in {
        from { transform: translateX(24px); opacity: 0; }
        to { transform: none; opacity: 1; }
    }

    @media (max-width: 899.98px) {
        .theory-drawer {
            animation: theory-drawer-up 0.2s ease-out;
        }

        @keyframes theory-drawer-up {
            from { transform: translateY(32px); opacity: 0; }
            to { transform: none; opacity: 1; }
        }
    }
}

/* Check-Optionen und Stufen-Antworten: volle Zeilen, Touch-Ziel >= 44px. */
.learnmodule-option {
    min-height: 48px;
    justify-content: flex-start;
    text-align: left;
    text-transform: none;
}

/* Bit-Lineal (TASK-146): 8 schaltbare Kacheln (min. 40x48px), Wert + Blockgroesse darunter.
   Das Signature-Element bekommt die gestalterische Sorgfalt - alles andere bleibt ruhig. */
.bitruler {
    width: 100%;
}

.bitruler-bits {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.bitruler-bit {
    min-width: 40px;
    min-height: 48px;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--mud-palette-lines-default, #c4c4c4);
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #1a1a1a);
    cursor: pointer;
    font: inherit;
}

.bitruler-bit.set {
    background: var(--mud-palette-primary, #1565C0);
    border-color: var(--mud-palette-primary, #1565C0);
    color: #fff;
}

.bitruler-bit:focus-visible {
    outline: 2px solid var(--mud-palette-tertiary, #26C6DA);
    outline-offset: 2px;
}

.bitruler-bit:disabled {
    cursor: default;
    opacity: 0.8;
}

.bitruler-weight {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.bitruler-state {
    font-size: 16px;
    font-weight: 700;
}

.bitruler-readout {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: max(15px, 0.95rem);
}

/* Oktett-Eingabe (TASK-146): 4 Felder, stellengenau in Monospace. */
.octetinput {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.octetinput-field {
    width: 64px;
    min-height: 48px;
    text-align: center;
    font-size: max(16px, 1rem);
    border: 1px solid var(--mud-palette-lines-default, #c4c4c4);
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #1a1a1a);
}

.octetinput-field:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #1565C0);
    outline-offset: 1px;
}

.octetinput-dot {
    font-size: 20px;
    font-weight: 700;
}

/* Adressbalken (TASK-151, VLSM): platzierte Bloecke farbig, ungenutzte Adressen schraffiert. */
.addressbar-scale {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #666);
    margin-bottom: 2px;
}

.addressbar-track {
    position: relative;
    height: 64px;
    border: 1px solid var(--mud-palette-lines-default, #c4c4c4);
    border-radius: 8px;
    overflow: hidden;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(128, 128, 128, 0.18) 6px,
        rgba(128, 128, 128, 0.18) 8px);
    margin-bottom: 8px;
}

.addressbar-block {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    border-right: 2px solid var(--mud-palette-surface, #fff);
    background: var(--mud-palette-primary, #1565C0);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

.addressbar-block.overlap {
    background: var(--mud-palette-error, #C62828);
}

.addressbar-block-label {
    font-weight: 700;
}

.addressbar-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.addressbar-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default, #c4c4c4);
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #1a1a1a);
    cursor: grab;
    font: inherit;
    font-size: 13px;
}

.addressbar-chip.selected {
    border-color: var(--mud-palette-primary, #1565C0);
    outline: 2px solid var(--mud-palette-primary, #1565C0);
}

.addressbar-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 4px;
    margin-bottom: 8px;
}

.addressbar-slot {
    min-height: 44px;
    border: 1px solid var(--mud-palette-lines-default, #c4c4c4);
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #1a1a1a);
    cursor: pointer;
}

.addressbar-slot:hover,
.addressbar-slot:focus-visible {
    border-color: var(--mud-palette-primary, #1565C0);
    outline: 1px solid var(--mud-palette-primary, #1565C0);
}

/* Admin-Markdown-Editor (Kapitel-CRUD): einfache Textarea, damit die Formatierungs-Leiste
   ueber JS auf die Textauswahl zugreifen kann (MudTextField kapselt das Element). */
.learnmodule-markdown-editor {
    width: 100%;
    min-height: 360px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default, #c4c4c4);
    border-radius: 8px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #1a1a1a);
    line-height: 1.5;
    resize: vertical;
}

.learnmodule-markdown-editor:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #1565C0);
    outline-offset: 1px;
}

/* StageHost (TASK-148): Bit-Lineal unten angeheftet, nie gesperrt. TASK-573: Der Streifen liegt ausserhalb von .learnmodule-container, also gibt es kein Padding auszugleichen - margin 0 -16px schob ihn 16 px ueber den rechten Rand (Seitenueberlauf bei 360 px). */
.stagehost-bitruler {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: var(--mud-palette-surface, #fff);
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    margin: 0;
}

.stagehost-bitruler-toggle {
    width: 100%;
    min-height: 44px;
    border: none;
    background: none;
    color: var(--mud-palette-text-secondary, #666);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
}

/* Freundesliste: groesserer Online-/Offline-Punkt am Avatar (Standard-Dot ist zu klein). */
.friend-status-dot .mud-badge {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* "Online" fett, wenn der Freund gerade da ist (Caption-Typo hat sonst 400). */
.mud-typography.friend-status-online {
    font-weight: 700;
}


/* TASK-178 (Exammi Fokus-Waechter): Textmarkierung nur auf Fragetext/Optionen/Bildern sperren -
   Eingabefelder bleiben ausgenommen, sonst kann bei offenen Fragen niemand den eigenen Text
   korrigieren (Konzept 10.1). */
.exam-guard-noselect {
    user-select: none;
    -webkit-user-select: none;
}

.exam-guard-noselect input,
.exam-guard-noselect textarea {
    user-select: text;
    -webkit-user-select: text;
}

/* ============================================================================
   TASK-229: Zweistufige Kategorieauswahl (CategoryChooser.razor)
   Layout, Typo-Skala und Abstaende stammen aus dem Design "Kategorieauswahl"
   (Designvorlagen/lerniq-kategorieauswahl-redesign). Die Farben kommen bewusst
   NICHT als Hex aus dem Entwurf, sondern aus den MudBlazor-Palettenvariablen -
   sonst waere die Auswahl im Dark Mode ein weisser Block. Ausnahme sind die
   Kategoriefarben selbst, die als Inline-Style aus den Daten kommen.
   ============================================================================ */
.cchooser {
    --cchooser-surface: var(--mud-palette-surface);
    --cchooser-line: var(--mud-palette-lines-default);
    --cchooser-text: var(--mud-palette-text-primary);
    --cchooser-muted: var(--mud-palette-text-secondary);
    --cchooser-track: var(--mud-palette-background-gray);
    --cchooser-accent: var(--mud-palette-text-primary);

    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 40px;
    color: var(--cchooser-text);
}

/* --- Kopfbereich ---------------------------------------------------------- */
.cchooser-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.cchooser-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cchooser-muted);
    font-weight: 600;
    margin-bottom: 8px;
}

.cchooser-title {
    margin: 0;
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.cchooser-lead {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--cchooser-muted);
    max-width: 52ch;
    text-wrap: pretty;
}

.cchooser-head-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.cchooser-search {
    position: relative;
    display: flex;
    align-items: center;
}

.cchooser-search-icon {
    position: absolute;
    left: 13px;
    font-size: 16px;
    color: var(--cchooser-muted);
    pointer-events: none;
}

.cchooser-search-input {
    width: 250px;
    max-width: 46vw;
    padding: 12px 14px 12px 38px;
    border: 1px solid var(--cchooser-line);
    border-radius: 12px;
    background: var(--cchooser-surface);
    color: var(--cchooser-text);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.cchooser-search-input:focus {
    border-color: var(--mud-palette-primary);
}

.cchooser-random {
    padding: 12px 18px;
    border: 1px solid var(--cchooser-accent);
    background: var(--cchooser-accent);
    color: var(--mud-palette-surface);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.cchooser-random:hover:not(:disabled) {
    opacity: 0.85;
}

.cchooser-random:disabled {
    opacity: 0.4;
    cursor: default;
}

/* --- Themengebiete -------------------------------------------------------- */
.cchooser-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.cchooser-section-label {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cchooser-muted);
    font-weight: 700;
}

.cchooser-muted {
    font-size: 13px;
    color: var(--cchooser-muted);
}

.cchooser-mains {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}

.cchooser-main {
    position: relative;
    background: var(--cchooser-surface);
    border: 1px solid var(--cchooser-line);
    border-radius: 16px;
    padding: 18px 18px 16px;
    cursor: pointer;
    overflow: hidden;
}

.cchooser-main:hover,
.cchooser-main:focus-visible {
    border-color: var(--cchooser-accent);
    outline: none;
}

.cchooser-main.is-active {
    border-color: var(--cchooser-accent);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}

.cchooser-main-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
}

.cchooser-main-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cchooser-main-text {
    min-width: 0;
}

.cchooser-main-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-wrap: pretty;
}

.cchooser-main-meta {
    margin-top: 6px;
    font-size: 13px;
    color: var(--cchooser-muted);
}

.cchooser-ring {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.cchooser-ring-inner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cchooser-surface);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cchooser-main-cta {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
}

.cchooser-main-dash {
    width: 14px;
    height: 1px;
}

.cchooser-divider {
    height: 1px;
    background: var(--cchooser-line);
    margin-bottom: 28px;
}

/* --- Unterkategorien ------------------------------------------------------ */
.cchooser-sub-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.cchooser-sub-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.cchooser-sub-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cchooser-reset {
    padding: 8px 14px;
    border: 1px solid var(--cchooser-line);
    background: var(--cchooser-surface);
    color: var(--cchooser-text);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cchooser-reset:hover {
    border-color: var(--cchooser-accent);
}

/* "Quer ueber alle Kategorien"-Zeile (Kreuzwortraetsel, Wortsuche) - bewusst optisch
   von den Kategoriezeilen abgesetzt, weil sie etwas anderes tut als sie. */
.cchooser-all-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border: 1px dashed var(--cchooser-line);
    border-radius: 14px;
    background: var(--cchooser-surface);
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
}

.cchooser-all-row:hover,
.cchooser-all-row:focus-visible {
    border-color: var(--cchooser-accent);
    outline: none;
}

.cchooser-all-icon {
    font-size: 20px;
    color: var(--mud-palette-primary);
}

.cchooser-all-label {
    flex: 1;
    min-width: 0;
}

.cchooser-all-arrow {
    color: var(--cchooser-muted);
}

.cchooser-groups {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.cchooser-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cchooser-group-name {
    font-size: 12.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--cchooser-muted);
}

.cchooser-group-line {
    flex: 1;
    height: 1px;
    background: var(--cchooser-line);
}

.cchooser-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cchooser-rows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

/* Ganze Zeile ist Klickflaeche, Mindesthoehe 56 px (Design), mobil einspaltig ueber
   die auto-fill-Spalten oben. */
.cchooser-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    background: var(--cchooser-surface);
    border: 1px solid var(--cchooser-line);
    border-radius: 14px;
    padding: 14px 16px;
    cursor: pointer;
}

.cchooser-row:hover,
.cchooser-row:focus-visible {
    border-color: var(--cchooser-accent);
    transform: translateY(-1px);
    outline: none;
}

.cchooser-row.is-selected {
    box-shadow: 0 0 0 1px var(--cchooser-accent) inset;
}

.cchooser-row-body {
    flex: 1;
    min-width: 0;
}

.cchooser-row-name {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.cchooser-row-stat {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cchooser-bar {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--cchooser-track);
    overflow: hidden;
}

.cchooser-bar-fill {
    display: block;
    height: 100%;
    border-radius: 4px;
}

.cchooser-stat-text {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--cchooser-muted);
    white-space: nowrap;
}

/* Mehrfachauswahl (Jeopardy) - der Punkt der Einfachauswahl wird zum Haken. */
.cchooser-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 2px solid var(--cchooser-line);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
}

.cchooser-bar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cchooser-line);
}

.cchooser-bar-hint {
    font-size: 12.5px;
    color: var(--cchooser-muted);
}

.cchooser-empty {
    padding: 40px;
    text-align: center;
    color: var(--cchooser-muted);
    font-size: 14px;
    border: 1px dashed var(--cchooser-line);
    border-radius: 16px;
}

/* TASK-239: Eine gruppenbezogene Format-Sperre ist eine Auskunft, kein Rest. Deshalb linksbuendig
   mit Icon und durchgezogenem Rahmen statt gestrichelt und zentriert - ein gestrichelter leerer
   Kasten liest sich als "hier fehlt etwas", und genau das soll er hier nicht. */
.cchooser-empty-blocked {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
    padding: 20px 22px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, transparent);
    color: var(--mud-palette-text-primary);
    line-height: 1.5;
}

.cchooser-empty-icon {
    font-size: 22px;
    line-height: 1;
    flex: none;
    margin-top: 2px;
    /* TASK-247: Das Gold traegt als Flaeche, aber nicht als Textfarbe (auf Weiss nur 1,8:1).
       Mit der Textfarbe gemischt dunkelt es im Light Mode ab und hellt im Dark Mode auf. */
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
}

.cchooser-empty-title {
    font-weight: 700;
    margin-bottom: 4px;
}

/* Eingebettet in ein Formular (Jeopardy-PvP): kein Kopfbereich, engere Abstaende. */
.cchooser-compact {
    padding: 0;
}

.cchooser-compact .cchooser-mains {
    margin-bottom: 20px;
}

.cchooser-compact .cchooser-divider {
    margin-bottom: 16px;
}

.cchooser-compact .cchooser-sub-title {
    font-size: 17px;
}

@media (max-width: 600px) {
    .cchooser-title {
        font-size: 28px;
    }

    .cchooser-head-actions {
        width: 100%;
    }

    .cchooser-search {
        flex: 1;
    }

    .cchooser-search-input {
        width: 100%;
        max-width: none;
    }

    .cchooser-mains {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cchooser-row:hover,
    .cchooser-row:focus-visible {
        transform: none;
    }
}

.cchooser-row-action {
    flex: none;
    display: flex;
    align-items: center;
    margin-left: 4px;
}

/* Kategorie-Icons in der Auswahl (TASK-229-Nachtrag): Der Design-Entwurf hatte sie gestrichen,
   auf Wunsch von Dominik sind sie zurueck. Sie tragen die Farbe ihres Themengebiets, nicht die
   eigene - die Farbregel "genau eine Farbe je Gebiet" bleibt damit unangetastet. */
.cchooser-main-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cchooser-main-icon {
    flex: none;
    font-size: 18px;
    line-height: 1;
}

.cchooser-row-icon {
    flex: none;
    font-size: 20px;
    line-height: 1;
    width: 20px;
    text-align: center;
}

.cchooser-group-icon {
    flex: none;
    font-size: 15px;
    line-height: 1;
}

/* ============================================================================
   TASK-230: Dashboard nach dem Design "Dashboard"
   (Designvorlagen/lerniq-kategorieauswahl-redesign/project/Dashboard.dc.html).
   Wie bei der Kategorieauswahl gilt: Layout, Typo-Skala, Radien und Abstaende
   kommen aus dem Entwurf, die Farben aus den MudBlazor-Palettenvariablen -
   sonst waere die Seite im Dark Mode ein weisser Block.
   ============================================================================ */
.dash {
    --dash-surface: var(--mud-palette-surface);
    --dash-line: var(--mud-palette-lines-default);
    --dash-text: var(--mud-palette-text-primary);
    --dash-muted: var(--mud-palette-text-secondary);
    --dash-track: var(--mud-palette-background-gray);

    max-width: 1240px;
    margin: 0 auto;
    color: var(--dash-text);
}

/* --- Kopfbereich ---------------------------------------------------------- */
.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.dash-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dash-muted);
    font-weight: 700;
}

.dash-eyebrow-invert {
    color: rgba(255, 255, 255, 0.75);
}

.dash-greeting {
    margin: 6px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.dash-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dash-streak-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
}

.dash-streak-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-warning);
}

.dash-room-button {
    border-radius: 999px !important;
    text-transform: none;
}

/* --- Karten und Raster ---------------------------------------------------- */
.dash-card {
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    border-radius: 22px;
}

.dash-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
    align-items: stretch;
}

.dash-col {
    flex: 1 1 300px;
    min-width: 0;
}

.dash-col-goal {
    flex: 1 1 280px;
    min-width: 0;
}

.dash-col-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Die Widgets bringen ihren eigenen Aussenabstand mit; im Raster stoert der. */
.dash-row .mud-card,
.dash-col .mud-card,
.dash-col-goal .mud-card {
    margin-bottom: 0 !important;
    height: 100%;
    border: 1px solid var(--dash-line);
    border-radius: 22px;
    box-shadow: none;
}

/* --- Weiterlernen-Karte --------------------------------------------------- */
.dash-row-hero {
    margin-bottom: 14px;
}

.dash-hero {
    position: relative;
    flex: 2 1 420px;
    min-width: 0;
    background: var(--mud-palette-primary);
    color: #fff;
    border-radius: 22px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    overflow: hidden;
}

.dash-hero-glow {
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.dash-hero-text,
.dash-hero-actions {
    position: relative;
}

.dash-hero-title {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-wrap: pretty;
}

.dash-hero-sub {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.85;
}

.dash-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.dash-hero-primary.mud-button-filled {
    background: #fff;
    color: var(--mud-palette-primary);
    border-radius: 14px;
    padding: 12px 26px;
    font-weight: 800;
    text-transform: none;
}

.dash-hero-secondary.mud-button-outlined {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    border-radius: 14px;
    padding: 12px 22px;
    font-weight: 700;
    text-transform: none;
}

.dash-hero-secondary.mud-button-outlined:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* --- Abschnittsueberschriften --------------------------------------------- */
.dash-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 26px 0 14px;
}

.dash-section-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.dash-section-note {
    font-size: 13px;
    color: var(--dash-muted);
}

.dash-section-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dash-pill-button {
    padding: 8px 14px;
    border: 1px solid var(--dash-line);
    background: var(--dash-surface);
    color: var(--dash-text);
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.dash-pill-button:hover {
    border-color: var(--dash-text);
}

/* --- Kacheln (Lernen & Üben, Spiele) -------------------------------------- */
.dash-tiles {
    display: grid;
    gap: 10px;
    margin-bottom: 26px;
}

.dash-tiles-learn {
    grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
}

.dash-tiles-games {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}

.dash-tile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 118px;
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    border-radius: 18px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.dash-tile:hover,
.dash-tile:focus-visible {
    border-color: var(--dash-text);
    transform: translateY(-2px);
    outline: none;
    text-decoration: none;
    color: inherit;
}

.dash-tile-icon-wrap {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 21px;
    background: var(--dash-track);
    color: var(--dash-muted);
}

.dash-tile-text {
    display: block;
    margin-top: auto;
    min-width: 0;
}

.dash-tile-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: pretty;
    overflow-wrap: break-word;
    hyphens: auto;
}

.dash-tile-meta {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--dash-muted);
}

.dash-tile-disabled {
    cursor: default;
    opacity: 0.5;
}

.dash-tile-disabled:hover {
    border-color: var(--dash-line);
    transform: none;
}

/* --- Wochendiagramm ------------------------------------------------------- */
.dash-week {
    display: flex;
    align-items: stretch;
    gap: 10px;
    height: 112px;
}

.dash-week-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.dash-week-bar {
    width: 100%;
    border-radius: 8px;
    background: var(--dash-track);
}

.dash-week-bar.has-xp {
    background: color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
}

.dash-week-bar.is-today.has-xp {
    background: var(--mud-palette-primary);
}

.dash-week-label {
    font-size: 11.5px;
    color: var(--dash-muted);
}

.dash-week-label.is-today {
    color: var(--dash-text);
    font-weight: 700;
}

.dash-week-summary {
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--dash-muted);
}

/* --- Dein Lernstand ------------------------------------------------------- */
.dash-stands {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    align-items: start;
    margin-bottom: 40px;
}

.dash-stand {
    background: var(--dash-surface);
    border: 1px solid var(--dash-line);
    border-radius: 18px;
    overflow: hidden;
}

/* Aufgeklappt ueber die volle Zeilenbreite - eine Kategorie mit elf Unterkategorien
   waere in einer Spalte eine sehr lange Wurst. */
.dash-stand.is-open {
    grid-column: 1 / -1;
}

.dash-stand-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    cursor: pointer;
}

.dash-stand-head:hover,
.dash-stand-head:focus-visible {
    background: var(--dash-track);
    outline: none;
}

.dash-stand-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.dash-stand-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 22px;
}

.dash-stand-title {
    flex: 1;
    min-width: 0;
}

.dash-stand-name {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-wrap: pretty;
    overflow-wrap: break-word;
    hyphens: auto;
}

.dash-stand-meta {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--dash-muted);
}

.dash-stand-pct {
    flex: none;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.dash-stand-bar {
    display: block;
    height: 6px;
    border-radius: 6px;
    background: var(--dash-track);
    overflow: hidden;
}

.dash-stand-bar-fill {
    display: block;
    height: 100%;
    border-radius: 6px;
}

.dash-stand-toggle {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--dash-muted);
}

.dash-stand-subs {
    padding: 0 20px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}

.dash-stand-sub {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--dash-track);
    border: 1px solid var(--dash-line);
    border-radius: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.dash-stand-sub:hover,
.dash-stand-sub:focus-visible {
    border-color: var(--dash-text);
    outline: none;
    text-decoration: none;
    color: inherit;
}

.dash-stand-sub-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.dash-stand-sub-body {
    flex: 1;
    min-width: 0;
}

.dash-stand-sub-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.dash-stand-sub-bar {
    display: block;
    margin-top: 7px;
    height: 4px;
    border-radius: 4px;
    background: var(--dash-line);
    overflow: hidden;
}

.dash-stand-sub-fill {
    display: block;
    height: 100%;
}

.dash-stand-sub-stat {
    flex: none;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--dash-muted);
}

.dash-empty {
    padding: 40px;
    text-align: center;
    color: var(--dash-muted);
    font-size: 14px;
    border: 1px dashed var(--dash-line);
    border-radius: 18px;
    margin-bottom: 40px;
}

@media (max-width: 600px) {
    .dash-greeting {
        font-size: 26px;
    }

    .dash-hero {
        padding: 22px 20px;
    }

    .dash-hero-title {
        font-size: 21px;
    }

    .dash-tiles-learn,
    .dash-tiles-games {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-tile:hover,
    .dash-tile:focus-visible {
        transform: none;
    }
}

/* --- TASK-230: Karten im Dashboard-Raster --------------------------------- */
.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dash-card-lead {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
    text-wrap: pretty;
}

.dash-card-link {
    font-weight: 700;
}

.dash-card-soft {
    background: var(--mud-palette-background-gray);
    border-style: dashed;
}

/* Pillen fuer Kennzahlen im Kartenkopf. */
.dash-pill {
    display: inline-block;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap;
}

.dash-pill-ok {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.dash-pill-warn {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.dash-pill-alert {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.dash-pill-neutral {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

.dash-dark-button.mud-button-filled {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    border-radius: 12px;
    padding: 12px;
    font-weight: 700;
    text-transform: none;
}

/* --- Tagesziel ------------------------------------------------------------ */
.dash-goal-main {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.dash-goal-ring {
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.dash-goal-ring-inner {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.dash-goal-text {
    min-width: 0;
}

.dash-goal-headline {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.dash-goal-sub {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.dash-goal-segments {
    margin-top: 18px;
    display: flex;
    gap: 6px;
}

.dash-goal-segment {
    flex: 1;
    height: 8px;
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
}

.dash-goal-segment.is-on {
    background: var(--mud-palette-success);
}

.dash-goal-weekly {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.dash-goal-weekly-bar {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    overflow: hidden;
}

.dash-goal-weekly-fill {
    display: block;
    height: 100%;
    background: var(--mud-palette-primary);
}

.dash-goal-weekly-stat {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

/* --- Streak (dunkle Karte) ------------------------------------------------ */
.dash-streak-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    border-radius: 22px;
    padding: 24px;
}

.dash-streak-badge {
    flex: none;
    /* Der Puls-Schein waechst ueber das Badge hinaus - ohne eigene Ebene schneidet ihn das
       Geschwister-Element ab. */
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-size: 26px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.dash-streak-badge.is-active {
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
}

.dash-streak-body {
    min-width: 0;
}

.dash-streak-headline {
    margin-top: 4px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.dash-streak-segments {
    margin-top: 8px;
    display: flex;
    gap: 5px;
}

.dash-streak-segment {
    width: 22px;
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.22);
}

.dash-streak-segment.is-on {
    background: var(--mud-palette-warning);
}

.dash-streak-note {
    margin-top: 10px;
    font-size: 12.5px;
    opacity: 0.75;
}

/* --- Schwache Bereiche ---------------------------------------------------- */
.dash-weak-list {
    margin-top: 16px;
    display: grid;
    gap: 14px;
}

.dash-weak-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.dash-weak-name {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: pretty;
}

.dash-weak-pct {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    white-space: nowrap;
}

.dash-weak-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-weak-bar {
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    overflow: hidden;
}

.dash-weak-fill {
    display: block;
    height: 100%;
    border-radius: 6px;
}

.dash-weak-button {
    flex: none;
    padding: 6px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 999px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.dash-weak-button:hover {
    border-color: var(--mud-palette-text-primary);
}

.dash-weak-button.is-worst {
    border-color: var(--mud-palette-error);
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

/* --- Letzte Aktivitäten --------------------------------------------------- */
.dash-activity-list {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.dash-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dash-activity-body {
    flex: 1;
    min-width: 0;
}

.dash-activity-title {
    font-size: 14px;
    font-weight: 600;
    text-wrap: pretty;
}

.dash-activity-time {
    margin-top: 2px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* --- Heutige Challenge ---------------------------------------------------- */
.dash-challenge-question {
    margin-top: 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: pretty;
}

.dash-challenge-options {
    margin-top: 16px;
    display: grid;
    gap: 8px;
}

.dash-challenge-option {
    text-align: left;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

.dash-challenge-option:hover {
    border-color: var(--mud-palette-text-primary);
}

.dash-challenge-done {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 600;
    text-wrap: pretty;
}

.dash-challenge-done i {
    font-size: 20px;
}

/* --- Podcast -------------------------------------------------------------- */
.dash-podcast {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
}

.dash-podcast-title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-wrap: pretty;
}

.dash-podcast-meta {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
}

.dash-podcast-button.mud-button-outlined {
    align-self: flex-start;
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
    border-radius: 12px;
    padding: 10px 18px;
    font-weight: 700;
    text-transform: none;
}

/* TASK-231: Die "pop"-Animation des Streak-Badges aus dem Dashboard-Entwurf. Sie laeuft nur bei
   einer laufenden Streak - ein pulsierendes Nichts waere reine Unruhe. prefers-reduced-motion
   schaltet sie ab (CLAUDE.md, Design).

   Deutlicher als die 1.06 des Entwurfs (Wunsch Dominik, 2026-09-06): das Badge sitzt auf einer
   dunklen Karte und ging darin unter. Der mitlaufende Schein traegt die Bewegung, ohne dass die
   Skalierung so gross werden muss, dass sie den Text daneben verschiebt - deshalb ist der Ruhe-
   zustand am Anfang und Ende laenger als der Ausschlag in der Mitte. */
@keyframes dash-streak-pop {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(245, 181, 44, 0.55);
    }

    35% {
        transform: scale(1.16);
        box-shadow: 0 0 0 10px rgba(245, 181, 44, 0);
    }

    55% {
        transform: scale(1.06);
        box-shadow: 0 0 0 14px rgba(245, 181, 44, 0);
    }
}

.dash-streak-badge.is-active {
    animation: dash-streak-pop 1.9s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .dash-streak-badge.is-active {
        animation: none;
    }
}

/* TASK-231: Die Kachel-Icons sind jetzt MudIcon (SVG) statt Tabler-Webfont. MudIcon skaliert ueber
   font-size, die Farbe erbt es vom Wrapper (Color.Inherit ist der Default). */
.dash-tile-icon-wrap .mud-icon-root {
    font-size: 21px;
    width: 1em;
    height: 1em;
}

/* ============================================================================
   TASK-232: Profilseite nach dem Design "Profil"
   (Designvorlagen/lerniq-kategorieauswahl-redesign/project/Profil.dc.html).
   Wie bei Kategorieauswahl und Dashboard: Layout, Typo-Skala, Radien und
   Abstaende aus dem Entwurf, Farben aus den MudBlazor-Palettenvariablen.
   ============================================================================ */
.prof {
    --prof-surface: var(--mud-palette-surface);
    --prof-line: var(--mud-palette-lines-default);
    --prof-text: var(--mud-palette-text-primary);
    --prof-muted: var(--mud-palette-text-secondary);
    --prof-track: var(--mud-palette-background-gray);

    max-width: 1240px;
    margin: 0 auto;
    color: var(--prof-text);
}

.prof-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--prof-muted);
    font-weight: 700;
}

.prof-eyebrow-sub {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--prof-line);
}

.prof-mono {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--prof-muted);
}

.prof-lead {
    margin: 0 0 14px;
    font-size: 13.5px;
    color: var(--prof-muted);
    max-width: 60ch;
    line-height: 1.5;
    text-wrap: pretty;
}

.prof-lead-tight {
    margin: 10px 0 0;
}

.prof-card {
    background: var(--prof-surface);
    border: 1px solid var(--prof-line);
    border-radius: 22px;
    padding: 22px;
}

.prof-empty {
    padding: 32px;
    text-align: center;
    color: var(--prof-muted);
    font-size: 14px;
    border: 1px dashed var(--prof-line);
    border-radius: 18px;
}

/* --- Kopfbereich ---------------------------------------------------------- */
/* Bewusst ohne dunklen Grund und ohne Farbschein (Rueckmeldung Dominik, 2026-09-06): der Entwurf
   setzt die Karte fast schwarz mit blauem Schein, im echten Layout biss sich das mit dem Orange von
   Maskottchen, Level-Pille und XP-Leiste. Sie ist jetzt eine normale helle Karte wie alle anderen -
   die Farbe kommt allein vom Maskottchen und der Level-Pille. */
.prof-hero {
    position: relative;
    overflow: hidden;
    background: var(--prof-surface);
    border: 1px solid var(--prof-line);
    color: var(--prof-text);
    border-radius: 26px;
    padding: 28px;
    margin-bottom: 14px;
}

.prof-hero-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.prof-hero-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 26px;
    background: var(--mud-palette-warning);
    overflow: hidden;
}

.prof-hero-avatar img {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.prof-hero-main {
    flex: 1;
    min-width: 220px;
}

.prof-hero-titles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.prof-hero-name {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
}

.prof-hero-level {
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.prof-hero-year {
    border: 1px solid var(--prof-line);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--prof-muted);
}

.prof-hero-xp {
    margin-top: 14px;
    max-width: 420px;
}

.prof-hero-xp-labels {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--prof-muted);
    margin-bottom: 6px;
}

.prof-hero-bar {
    height: 10px;
    border-radius: 10px;
    background: var(--prof-track);
    overflow: hidden;
}

/* Der Verlauf des Entwurfs lief ins Sehr-Helle aus - das war fuer den dunklen Grund gedacht und
   verschwindet auf der hellen Karte fast in der Spur. Deshalb durchgehend die Warnfarbe. */
.prof-hero-bar-fill {
    display: block;
    height: 100%;
    border-radius: 10px;
    background: var(--mud-palette-warning);
}

/* Auf hellem Grund braucht die Hauptaktion eigene Farbe - vorher trug sie der dunkle Hintergrund. */
.prof-hero-primary.mud-button-filled {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 14px;
    padding: 12px 20px;
    font-weight: 800;
    text-transform: none;
}

/* --- Kennzahlenleiste ----------------------------------------------------- */
.prof-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 34px;
}

.prof-stat {
    flex: 1 1 170px;
    min-width: 0;
    background: var(--prof-surface);
    border: 1px solid var(--prof-line);
    border-radius: 18px;
    padding: 18px;
}

.prof-stat-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 14%, transparent);
}

.prof-stat-icon .mud-icon-root {
    font-size: 20px;
    width: 1em;
    height: 1em;
}

.prof-stat-value {
    margin-top: 14px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.prof-stat-label {
    font-size: 12.5px;
    color: var(--prof-muted);
    text-wrap: pretty;
}

/* --- Raster --------------------------------------------------------------- */
.prof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
    align-items: flex-start;
}

.prof-col-main {
    flex: 2 1 480px;
    min-width: 0;
}

.prof-col-side {
    flex: 1 1 300px;
    min-width: 0;
    display: grid;
    gap: 14px;
    align-content: start;
}

.prof-col-half {
    flex: 1 1 320px;
    min-width: 0;
    display: grid;
    gap: 14px;
    align-content: start;
}

.prof-row-settings {
    margin-top: 34px;
}

.prof-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.prof-section-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.prof-section-note {
    font-size: 13px;
    color: var(--prof-muted);
}

/* --- Lernkategorien ------------------------------------------------------- */
.prof-catgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    align-items: start;
}

.prof-cat {
    background: var(--prof-track);
    border: 1.5px solid var(--prof-line);
    border-radius: 16px;
    overflow: hidden;
}

.prof-cat.is-picked {
    background: var(--prof-surface);
}

/* Aufgeklappt ueber die volle Zeilenbreite - elf Unterkategorien in einer Spalte
   waeren eine sehr lange Wurst. */
.prof-cat.is-open {
    grid-column: 1 / -1;
}

.prof-cat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
}

.prof-cat-head:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.prof-cat-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 20px;
    background: var(--prof-track);
    color: var(--prof-muted);
}

.prof-cat-text {
    flex: 1;
    min-width: 0;
}

.prof-cat-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
    hyphens: auto;
}

.prof-cat-meta {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--prof-muted);
}

.prof-cat-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--prof-line);
    background: var(--prof-surface);
    font-size: 14px;
    color: #fff;
}

.prof-cat-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-top: 1px solid var(--prof-line);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--prof-muted);
}

.prof-cat-toggle:hover,
.prof-cat-toggle:focus-visible {
    color: var(--prof-text);
    outline: none;
}

.prof-cat-subs {
    padding: 12px 16px 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.prof-sub {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    background: var(--prof-surface);
    border: 1px solid var(--prof-line);
    border-radius: 11px;
    padding: 10px 12px;
    cursor: pointer;
}

.prof-sub:hover,
.prof-sub:focus-visible {
    border-color: var(--prof-text);
    outline: none;
}

.prof-sub-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid var(--prof-line);
    background: var(--prof-surface);
    font-size: 12px;
    color: #fff;
}

.prof-sub-name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: break-word;
    hyphens: auto;
}

.prof-favorites-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.prof-group-assigned {
    margin-top: 18px;
}

.prof-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.prof-chip {
    display: inline-block;
    background: var(--prof-track);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--prof-muted);
}

.prof-chip-ok {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

/* --- Knöpfe --------------------------------------------------------------- */
.prof-button-dark,
.prof-button-ghost {
    border-radius: 12px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}

.prof-button-dark {
    padding: 12px 20px;
    border: none;
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
    font-size: 14px;
}

.prof-button-ghost {
    padding: 11px 16px;
    border: 1px solid var(--prof-line);
    background: var(--prof-surface);
    color: var(--prof-text);
    font-size: 13.5px;
}

.prof-button-ghost:hover {
    border-color: var(--prof-text);
}

.prof-button-block {
    margin-top: 18px;
    width: 100%;
}

/* --- Ziele ---------------------------------------------------------------- */
.prof-goals {
    margin-top: 16px;
    display: grid;
    gap: 14px;
}

.prof-goal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.prof-goal-name {
    font-size: 14px;
    font-weight: 700;
}

.prof-goal-dots {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

.prof-goal-dot {
    flex: 1;
    height: 8px;
    border-radius: 8px;
    background: var(--prof-track);
}

.prof-goal-dot.is-on {
    background: var(--mud-palette-success);
}

.prof-goal-editor {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.prof-bar {
    margin-top: 8px;
    height: 8px;
    border-radius: 8px;
    background: var(--prof-track);
    overflow: hidden;
}

.prof-bar-thin {
    height: 5px;
    border-radius: 5px;
}

.prof-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
}

/* --- Zuletzt gespielt ----------------------------------------------------- */
.prof-recent,
.prof-highscores {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.prof-highscores {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--prof-line);
}

.prof-recent-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prof-recent-body {
    flex: 1;
    min-width: 0;
}

.prof-recent-title {
    font-size: 13.5px;
    font-weight: 700;
    text-wrap: pretty;
}

.prof-recent-time {
    margin-top: 2px;
    font-size: 12px;
    color: var(--prof-muted);
}

.prof-recent-xp {
    flex: none;
    color: var(--mud-palette-success);
}

/* --- Wissensstand --------------------------------------------------------- */
.prof-knowledge {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px 26px;
    margin-bottom: 34px;
}

.prof-knowledge-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.prof-knowledge-name {
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: break-word;
    hyphens: auto;
}

.prof-knowledge-meta {
    margin-top: 6px;
    font-size: 12px;
    color: var(--prof-muted);
}

/* --- Achievements --------------------------------------------------------- */
.prof-tabs {
    display: flex;
    gap: 6px;
    background: var(--prof-track);
    border-radius: 999px;
    padding: 4px;
}

.prof-tab {
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--prof-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.prof-tab.is-on {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
}

.prof-achievements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
}

.prof-ach {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--prof-track);
    border: 1px solid var(--prof-line);
    border-radius: 18px;
    padding: 16px;
}

.prof-ach.is-done {
    background: var(--prof-surface);
}

.prof-ach-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--prof-track);
    color: var(--mud-palette-text-disabled);
}

.prof-ach-icon .mud-icon-root {
    font-size: 21px;
    width: 1em;
    height: 1em;
}

.prof-ach-body {
    flex: 1;
    min-width: 0;
}

.prof-ach-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
    hyphens: auto;
}

.prof-ach-desc {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--prof-muted);
    line-height: 1.4;
    text-wrap: pretty;
}

.prof-ach-stat {
    margin-top: 6px;
}

.prof-ach-stat.is-done {
    color: var(--mud-palette-success);
}

/* --- Konto & Benachrichtigungen ------------------------------------------- */
.prof-form {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.prof-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.prof-password {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--prof-line);
}

.prof-toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--prof-line);
}

.prof-toggle-row:last-child {
    border-bottom: none;
}

.prof-toggle-icon {
    flex: none;
    color: var(--prof-muted);
    font-size: 19px;
    width: 1em;
    height: 1em;
}

.prof-toggle-label {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    text-wrap: pretty;
}

/* Die Schalter bringen ihren eigenen Aussenabstand mit; in der Zeile stoert er. */
.prof-toggle-row .mud-switch {
    margin: 0;
}

.prof-toggle-group {
    padding-left: 12px;
    border-left: 2px solid var(--prof-line);
    margin-left: 8px;
}

@media (max-width: 600px) {
    .prof-hero-name {
        font-size: 24px;
    }

    .prof-hero {
        padding: 22px 20px;
    }

    .prof-catgrid,
    .prof-achievements {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   TASK-237: Oeffentliche Startseite nach dem Design "Startseite"
   (Designvorlagen/lerniq-kategorieauswahl-redesign/project/Startseite.dc.html)

   Die Startseite ist der einzige Bildschirm mit einer EIGENEN, festen Palette statt der
   MudBlazor-Palettenvariablen: sie laeuft ausserhalb der App (eigenes LandingLayout, kein
   Theme-Umschalter fuer nicht angemeldete Besucher) und legt sich bewusst auf einen Look fest -
   dunkler Kopf, helle Formate-Sektion, dunkler Fuss. Deshalb traegt jede Sektion ihren
   Hintergrund explizit, damit die Seite im Dark Mode nicht halb umkippt.

   Uebernommen aus dem Entwurf sind Layout, Typo-Skala, Radien und Abstaende. Nicht uebernommen
   ist die Schrift "Plus Jakarta Sans" - das Projekt bleibt bei Segoe UI/System-UI (Design-
   Entscheidung wie bei TASK-229), eine zusaetzliche Google-Schrift waere eine externe
   Abhaengigkeit mehr.
   ========================================================================== */

.lq-landing {
    /* Palette der Startseite - nur hier gueltig. */
    --lq-navy: #0D2D6C;
    --lq-navy-deep: #0A1E3F;
    --lq-navy-mid: #0D2040;
    --lq-teal: #00897B;
    --lq-cyan: #4DD0E1;
    --lq-gold: #FFD166;
    --lq-accent: #f5b52c;
    --lq-accent-hover: #ffc95c;
    --lq-ink: #152238;
    --lq-ink-soft: #42597A;
    --lq-ink-muted: #5A7291;
    --lq-paper: #F0F4F8;
    --lq-line: #DCE6F2;
    --lq-on-dark: #D6E4F7;
    --lq-on-dark-soft: #9FB9DA;

    /* Tempo beider Laufbaender in Pixel pro Sekunde - der eine Stellknopf dafuer.
       js/landing.js rechnet daraus je Band die Animationsdauer (TASK-243). */
    --lq-marquee-speed: 72;

    width: 100%;
    overflow-x: hidden;
    background: var(--lq-paper);
    color: var(--lq-ink);
}

.lq-wrap {
    max-width: 1240px;
    margin: 0 auto;
}

/* --- Kopfleiste ---------------------------------------------------------- */
.lq-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: linear-gradient(90deg, #0D2D6C 0%, #00897B 50%, #0D2D6C 100%);
    box-shadow: 0 2px 14px rgba(13, 45, 108, .28);
}

.lq-topbar-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.lq-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
    text-decoration: none;
}

.lq-brand:hover {
    text-decoration: none;
}

.lq-brand-mascot {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}

.lq-brand-name {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #fff;
}

.lq-xp-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .32);
    color: #fff;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    animation: lq-pulse 2.6s ease-in-out infinite;
}

.lq-xp-pill i {
    font-size: 18px;
    color: var(--lq-gold);
}

.lq-topbar-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- Schaltflaechen ------------------------------------------------------ */
.lq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Touch-Ziel: die Startseite wird ueberwiegend am Handy geoeffnet. */
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.lq-btn:hover {
    text-decoration: none;
}

.lq-btn-ghost {
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .7);
}

.lq-btn-ghost:hover {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.lq-btn-accent {
    color: #1A1A1A;
    background: var(--lq-accent);
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(245, 181, 44, .45);
}

.lq-btn-accent:hover {
    background: var(--lq-accent-hover);
    color: #1A1A1A;
}

.lq-btn-primary {
    background: #1565C0;
    color: #fff;
    border-radius: 14px;
    font-weight: 800;
    font-size: 16px;
    white-space: nowrap;
}

.lq-btn-primary:hover {
    background: var(--lq-navy);
    color: #fff;
}

.lq-btn-lg {
    padding: 16px 32px;
    border-radius: 16px;
    font-size: 18px;
    min-height: 56px;
}

/* --- Held --------------------------------------------------------------- */
.lq-hero {
    background:
        radial-gradient(1100px 520px at 78% -10%, rgba(38, 198, 218, .28), transparent 65%),
        linear-gradient(165deg, #0D2D6C 0%, #134B8C 55%, #00897B 100%);
    color: #fff;
    padding: 64px 20px 76px;
}

.lq-hero-inner {
    display: flex;
    gap: 48px;
    align-items: center;
    flex-wrap: wrap;
}

.lq-hero-copy {
    flex: 1 1 420px;
    min-width: min(100%, 300px);
}

.lq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(38, 198, 218, .2);
    border: 1px solid rgba(38, 198, 218, .55);
    color: #B2EBF2;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.lq-hero-title {
    margin: 0 0 18px;
    font-size: clamp(34px, 5.2vw, 60px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -1.5px;
    text-wrap: balance;
}

.lq-hero-title span {
    color: var(--lq-gold);
}

/* Routes.razor setzt nach jeder Navigation den Fokus auf das erste <h1> (FocusOnNavigate). Die
   Startseite ist die erste Seite mit einem echten <h1>, und Chrome zeichnet dafuer einen
   Fokusrahmen um die halbe Ueberschrift. Eine Ueberschrift ist nicht mit der Tabulatortaste
   erreichbar - der Rahmen zeigt hier also nichts an, was jemandem bei der Bedienung hilft. */
.lq-hero-title:focus {
    outline: none;
}

.lq-hero-lead {
    margin: 0 0 30px;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    color: var(--lq-on-dark);
    max-width: 560px;
    text-wrap: pretty;
}

.lq-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.lq-hero-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lq-stat {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 14px;
    padding: 11px 16px;
}

.lq-stat-value {
    font-size: 22px;
    font-weight: 900;
    /* Zahlen stellengenau, wie ueberall im Projekt bei Kennzahlen. */
    font-variant-numeric: tabular-nums;
}

.lq-stat-label {
    font-size: 13px;
    color: var(--lq-on-dark);
    line-height: 1.2;
    max-width: 92px;
}

.lq-hero-art {
    flex: 0 1 380px;
    min-width: min(100%, 280px);
    display: flex;
    justify-content: center;
    position: relative;
}

.lq-hero-glow {
    position: absolute;
    inset: 12% 8%;
    background: radial-gradient(circle, rgba(255, 209, 102, .3), transparent 68%);
    filter: blur(8px);
}

.lq-hero-mascot {
    width: min(100%, 340px);
    position: relative;
    animation: lq-float 5.5s ease-in-out infinite;
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .42));
}

.lq-hero-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
    font-weight: 800;
    font-size: 15px;
}

.lq-hero-badge-streak {
    top: 6%;
    right: 0;
    background: #fff;
    color: var(--lq-navy);
}

.lq-hero-badge-streak .mud-icon-root {
    color: var(--lq-accent);
}

.lq-hero-badge-level {
    bottom: 8%;
    left: 0;
    background: var(--lq-gold);
    color: #1A1A1A;
}

/* --- Laufbaender --------------------------------------------------------- */
.lq-marquees {
    background: var(--lq-navy-deep);
    padding: 22px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.lq-marquee-head {
    margin-bottom: 16px;
    padding: 0 20px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.lq-marquee-kicker {
    color: var(--lq-cyan);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.lq-marquee-sub {
    color: #8FA9C9;
    font-size: 14px;
}

.lq-marquee-track {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.lq-marquee-track-second {
    margin-top: 12px;
}

.lq-marquee {
    display: flex;
    width: max-content;
}

/* Die zweite Reihe ist eine Kopie der ersten - deshalb laeuft die Animation ueber genau -50 %
   und springt am Ende ohne sichtbare Naht zurueck. */
/* TASK-243: Beide Baender laufen gleich schnell, nicht gleich lang. js/landing.js misst die Breite
   und setzt --lq-marquee-duration je Band aus --lq-marquee-speed (Pixel pro Sekunde, siehe
   .lq-landing). Die Werte hier sind nur die Rueckfallebene, falls das JS nicht laeuft - sie passen
   zum Bestand vom 07.09.2026 und werden mit jeder neuen Kategorie ungenauer. */
.lq-marquee-left {
    animation: lq-marquee-l var(--lq-marquee-duration, 42s) linear infinite;
}

.lq-marquee-right {
    animation: lq-marquee-r var(--lq-marquee-duration, 38s) linear infinite;
}

.lq-marquee-row {
    display: flex;
    gap: 12px;
    padding-right: 12px;
}

.lq-topic {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #122E57;
    border: 1px solid #1E4677;
    border-radius: 14px;
    padding: 12px 18px;
    white-space: nowrap;
}

.lq-topic i {
    font-size: 20px;
}

.lq-topic-name {
    color: #E3F2FD;
    font-weight: 700;
    font-size: 16px;
}

.lq-topic-count {
    color: var(--lq-cyan);
    font-weight: 900;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.lq-format {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #E3F2FD;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

/* TASK-243: Vier Toenungen aus dem Entwurf - ohne sie ist das Band eine graue Kette. Die Farbe
   traegt hier keine Information, die der Chip nicht ohnehin ausschreibt (Projektregel "Farbe nie
   allein tragend"): sie gibt dem vorbeilaufenden Band Rhythmus und hebt die Pruefungsformate
   heraus. Welcher Chip welche Toenung bekommt, steht in Welcome.razor. */
.lq-format-accent {
    background: rgba(245, 181, 44, .14);
    border-color: rgba(245, 181, 44, .45);
    color: #FFCCBC;
}

.lq-format-cyan {
    background: rgba(38, 198, 218, .14);
    border-color: rgba(38, 198, 218, .45);
    color: #B2EBF2;
}

.lq-format-gold {
    background: rgba(255, 209, 102, .16);
    border-color: rgba(255, 209, 102, .5);
    color: #FFE9B8;
}

.lq-format-exam {
    background: rgba(0, 137, 123, .2);
    border-color: rgba(38, 198, 218, .4);
    color: #B2DFDB;
}

/* --- Sektionskoepfe ------------------------------------------------------ */
.lq-sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.lq-sec-head-stacked {
    display: block;
}

.lq-kicker {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.lq-kicker-gold {
    color: var(--lq-gold);
}

.lq-kicker-cyan {
    color: var(--lq-cyan);
}

.lq-kicker-teal {
    color: var(--lq-teal);
}

.lq-sec-title {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 900;
    letter-spacing: -1px;
}

.lq-sec-title-dark {
    color: var(--lq-navy);
}

.lq-sec-lead {
    margin: 0;
    max-width: 430px;
    color: #B9D0EC;
    font-size: 17px;
    line-height: 1.5;
    text-wrap: pretty;
}

.lq-sec-lead-dark {
    color: var(--lq-ink-soft);
    max-width: 640px;
    line-height: 1.55;
}

/* --- Kartenraster -------------------------------------------------------- */
.lq-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}

.lq-card {
    border-radius: 20px;
    padding: 24px;
}

.lq-card h3 {
    margin: 0 0 7px;
    font-size: 19px;
    font-weight: 800;
}

.lq-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

.lq-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.lq-card-dark {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
}

.lq-card-dark p {
    color: #B9D0EC;
}

.lq-card-light {
    background: #fff;
    border: 1px solid var(--lq-line);
    box-shadow: 0 2px 10px rgba(13, 45, 108, .05);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.lq-card-light:hover {
    box-shadow: 0 12px 30px rgba(13, 45, 108, .13);
    border-color: #1565C0;
}

.lq-card-light h3 {
    color: var(--lq-ink);
}

.lq-card-light p {
    color: var(--lq-ink-muted);
}

.lq-card-xp {
    background: linear-gradient(150deg, #f5b52c, #d99a1f);
    box-shadow: 0 12px 30px rgba(245, 181, 44, .3);
    color: #1A1A1A;
}

.lq-card-xp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.lq-card-xp-top span {
    font-size: 34px;
    font-weight: 900;
}

.lq-card-xp p {
    color: rgba(26, 26, 26, .82);
}

/* --- Gamifizierung & Formate --------------------------------------------- */
.lq-gamification {
    background: linear-gradient(180deg, #0A1E3F 0%, #0D2D6C 45%, #0D2D6C 100%);
    color: #fff;
    padding: 70px 20px;
}

.lq-formats {
    background: var(--lq-paper);
    padding: 74px 20px;
}

.lq-formats .lq-cards {
    margin-bottom: 16px;
}

.lq-formats-note {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px dashed #B4C9E2;
    border-radius: 20px;
    padding: 20px 24px;
}

.lq-formats-note img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.lq-formats-note p {
    margin: 0;
    flex: 1 1 300px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--lq-ink-soft);
}

/* --- Trainer ------------------------------------------------------------- */
.lq-trainer {
    background: var(--lq-navy-mid);
    color: #fff;
    padding: 74px 20px;
}

.lq-trainer-card {
    text-align: left;
    cursor: pointer;
    background: #12294F;
    border: 1px solid #23406B;
    border-radius: 20px;
    padding: 24px;
    color: #fff;
    font: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .15s ease, border-color .15s ease;
}

.lq-trainer-card:hover,
.lq-trainer-card:focus-visible {
    border-color: var(--lq-cyan);
    transform: translateY(-3px);
}

.lq-trainer-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lq-trainer-card-top .mud-icon-root {
    color: var(--lq-cyan);
}

.lq-trainer-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(38, 198, 218, .14);
    border: 1px solid rgba(38, 198, 218, .35);
    color: #B2EBF2;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.lq-trainer-title {
    font-size: 20px;
    font-weight: 800;
}

.lq-trainer-lead {
    font-size: 15px;
    line-height: 1.55;
    color: var(--lq-on-dark-soft);
}

.lq-trainer-more {
    margin-top: auto;
    font-size: 14px;
    font-weight: 800;
    color: var(--lq-cyan);
}

/* --- Abschluss & Fuss ---------------------------------------------------- */
.lq-cta {
    background: linear-gradient(135deg, #00897B 0%, #1565C0 100%);
    color: #fff;
    padding: 70px 20px;
}

.lq-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.lq-cta-inner img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    margin-bottom: 20px;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .3));
}

.lq-cta-inner h2 {
    margin: 0 0 14px;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 900;
    letter-spacing: -1px;
}

.lq-cta-inner p {
    margin: 0 auto 30px;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.55;
    color: #E3F2FD;
}

.lq-cta-actions {
    justify-content: center;
    margin-bottom: 0;
}

.lq-footer {
    background: #0A1929;
    color: #8FA9C9;
    padding: 30px 20px;
}

.lq-footer-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 14px;
}

.lq-footer-brand {
    color: #E3F2FD;
    font-weight: 800;
    font-size: 17px;
}

.lq-footer-claim {
    flex: 1 1 200px;
}

.lq-footer a {
    color: #8FA9C9;
}

/* --- Trainer-Overlay (TrainerFeatureDialog) ------------------------------ */
.lq-dlg-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: -16px -24px 0;
    padding: 26px 28px;
    background: linear-gradient(120deg, #0D2D6C, #00897B);
    color: #fff;
}

/* Ohne flex:1 draengt sich der Schliessen-Knopf an den Text und laesst rechts eine Luecke. */
.lq-dlg-head-text {
    flex: 1;
    min-width: 0;
}

.lq-dlg-tag {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #B2EBF2;
    margin-bottom: 8px;
}

.lq-dlg-title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.5px;
}

.lq-dlg-lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #DCEAFB;
}

.lq-dlg-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lq-dlg-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.lq-dlg-check {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: rgba(0, 137, 123, .13);
    color: #00897B;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.lq-dlg-item-head {
    display: block;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 3px;
}

.lq-dlg-item-text {
    display: block;
    font-size: 15px;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

/* --- Bewegung ------------------------------------------------------------ */
@keyframes lq-marquee-l {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes lq-marquee-r {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

@keyframes lq-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes lq-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lq-xp-pill,
    .lq-hero-mascot,
    .lq-marquee-left,
    .lq-marquee-right {
        animation: none;
    }

    .lq-trainer-card:hover,
    .lq-trainer-card:focus-visible {
        transform: none;
    }
}

@media (max-width: 600px) {
    .lq-hero {
        padding: 40px 20px 52px;
    }

    .lq-gamification,
    .lq-formats,
    .lq-trainer,
    .lq-cta {
        padding: 48px 20px;
    }

    /* Die beiden Sprechblasen sitzen im Entwurf ueber dem Maskottchen. Auf schmalen Schirmen
       ueberdecken sie es, deshalb stehen sie darunter in einer Reihe. */
    .lq-hero-art {
        flex-wrap: wrap;
        gap: 10px;
    }

    .lq-hero-badge {
        position: static;
    }

    .lq-hero-badge-streak,
    .lq-hero-badge-level {
        flex: 1 1 auto;
        justify-content: center;
    }

    .lq-topbar-inner {
        gap: 10px;
    }

    .lq-xp-pill {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   TASK-246: Leaderboard nach dem Design "Leaderboard"
   (Designvorlagen/lerniq-kategorieauswahl-redesign/project/Leaderboard.dc.html).
   Layout, Typo-Skala, Radien und Abstaende kommen aus dem Entwurf, die Farben aus den
   MudBlazor-Palettenvariablen - der Entwurf ist hell-only, mit seinen Hex-Werten waere die
   Seite im Dark Mode ein weisser Block. Mobil zuerst: das Grundlayout ist die schmale
   Einspalten-Ansicht, die Breakpoints bauen sie auf.
   ============================================================================ */
.lb {
    --lb-surface: var(--mud-palette-surface);
    --lb-line: var(--mud-palette-lines-default);
    --lb-text: var(--mud-palette-text-primary);
    --lb-muted: var(--mud-palette-text-secondary);
    --lb-track: var(--mud-palette-background-gray);
    --lb-gold: var(--mud-palette-warning);

    /* Die dunklen Karten teilen sich eine Palette mit der Fehler-Arena - siehe --app-ink-* weiter
       unten. Die --lb-*-Namen bleiben, damit der Leaderboard-Block unveraendert lesbar ist. */
    --lb-ink: var(--app-ink);
    --lb-on-ink: var(--app-ink-on);
    --lb-ink-muted: var(--app-ink-muted);
    --lb-ink-line: var(--app-ink-line);
    --lb-ink-track: var(--app-ink-track);
    --lb-on-gold: var(--mud-palette-warning-text);

    max-width: 1240px;
    margin: 0 auto;
    color: var(--lb-text);
}

/* --- Kopfbereich ---------------------------------------------------------- */
.lb-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.lb-head-text {
    min-width: 0;
}

.lb-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lb-muted);
    font-weight: 700;
}

.lb-eyebrow-invert {
    color: var(--lb-ink-muted);
}

.lb-title {
    margin: 6px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.lb-period {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--lb-muted);
    text-wrap: pretty;
}

/* Zeitraum-Umschalter. Am Handy darf die Leiste seitlich scrollen statt umzubrechen -
   drei Pillen untereinander waeren ein Menue, kein Umschalter. */
.lb-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--lb-surface);
    border: 1px solid var(--lb-line);
    border-radius: 999px;
    padding: 4px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.lb-tabs::-webkit-scrollbar {
    display: none;
}

.lb-tab {
    flex: none;
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lb-muted);
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lb-tab:hover {
    color: var(--lb-text);
}

.lb-tab-on,
.lb-tab-on:hover {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-surface);
}

/* --- Filterzeile ---------------------------------------------------------- */
.lb-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.lb-scopes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.lb-scopes::-webkit-scrollbar {
    display: none;
}

.lb-scope {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--lb-line);
    border-radius: 999px;
    background: var(--lb-surface);
    color: var(--lb-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lb-scope:hover {
    border-color: var(--mud-palette-primary);
}

.lb-scope-on {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.lb-year-select {
    flex: 0 1 190px;
    min-width: 160px;
}

/* --- Raster --------------------------------------------------------------- */
.lb-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

.lb-main {
    flex: 2 1 520px;
    min-width: 0;
    display: grid;
    gap: 14px;
}

.lb-side {
    flex: 1 1 300px;
    min-width: 0;
    display: grid;
    gap: 14px;
    align-content: start;
}

.lb-skeleton {
    border-radius: 22px;
}

/* --- Podium --------------------------------------------------------------- */
.lb-podium {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

.lb-podium-place {
    position: relative;
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 20px 18px 16px;
    border: 1px solid var(--lb-line);
    border-radius: 22px;
    background: var(--lb-surface);
}

/* Platz 1 traegt die dunkle Karte - dieselbe Rolle wie die "Dein Platz"-Karte daneben. */
.lb-podium-1 {
    background: var(--lb-ink);
    border-color: var(--lb-line);
    color: var(--lb-on-ink);
}

.lb-podium-own {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.lb-podium-rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: var(--lb-track);
    color: var(--lb-muted);
}

.lb-podium-1 .lb-podium-rank {
    background: var(--lb-gold);
    color: var(--lb-on-gold);
}

.lb-podium-avatar {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--lb-track);
    color: var(--lb-text);
    font-size: 26px;
    font-weight: 800;
}

.lb-podium-1 .lb-podium-avatar {
    width: 78px;
    height: 78px;
    font-size: 32px;
    background: var(--lb-gold);
    color: var(--lb-on-gold);
    animation: lb-shine 2.4s ease-out infinite;
}

@keyframes lb-shine {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 181, 44, 0.55); }
    45% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(245, 181, 44, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 181, 44, 0); }
}

.lb-podium-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

.lb-podium-1 .lb-podium-name {
    font-size: 20px;
}

.lb-podium-level {
    font-size: 12.5px;
    color: var(--lb-muted);
}

.lb-podium-1 .lb-podium-level {
    color: var(--lb-ink-muted);
}

.lb-podium-score {
    margin-top: auto;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--lb-line);
}

.lb-podium-1 .lb-podium-score {
    border-top-color: var(--lb-ink-line);
}

.lb-podium-xp {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 700;
}

.lb-podium-1 .lb-podium-xp {
    font-size: 25px;
    color: var(--lb-gold);
}

.lb-podium-xp-label {
    margin-top: 2px;
    font-size: 11.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--lb-muted);
}

.lb-podium-1 .lb-podium-xp-label {
    color: var(--lb-ink-muted);
}

/* --- Rangliste ------------------------------------------------------------ */
.lb-list {
    background: var(--lb-surface);
    border: 1px solid var(--lb-line);
    border-radius: 22px;
    padding: 8px 14px 14px;
}

.lb-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 6px 8px;
}

.lb-list-note,
.lb-list-empty {
    font-size: 12.5px;
    color: var(--lb-muted);
}

.lb-list-empty {
    margin: 6px 6px 10px;
    text-wrap: pretty;
}

.lb-pinned-label {
    margin: 14px 6px 4px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--lb-muted);
}

.lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 11px 12px;
    margin: 6px 0;
    border: 1px solid var(--lb-line);
    border-radius: 14px;
    background: var(--lb-surface);
    transition: border-color 0.15s ease;
}

.lb-row:hover {
    border-color: var(--mud-palette-primary);
}

.lb-row-own {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.lb-row-rank {
    flex: none;
    width: 30px;
    text-align: right;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    color: var(--lb-muted);
}

.lb-row-own .lb-row-rank {
    color: var(--mud-palette-primary);
}

.lb-row-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--lb-track);
    color: var(--lb-text);
    font-size: 16px;
    font-weight: 800;
}

.lb-row-own .lb-row-avatar {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.lb-row-name {
    flex: 1;
    min-width: 0;
}

.lb-row-name-text {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-row-level {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--lb-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-row-bar {
    flex: none;
    width: 72px;
    height: 6px;
    border-radius: 6px;
    background: var(--lb-track);
    overflow: hidden;
}

.lb-row-bar-fill {
    height: 100%;
    border-radius: 6px;
    background: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.lb-row-own .lb-row-bar-fill {
    background: var(--mud-palette-primary);
}

.lb-row-score {
    flex: none;
    text-align: right;
}

.lb-row-xp {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
}

.lb-row-xp-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--lb-muted);
}

/* --- Karte "Dein Platz" --------------------------------------------------- */
.lb-own {
    background: var(--lb-ink);
    color: var(--lb-on-ink);
    border: 1px solid var(--lb-line);
    border-radius: 22px;
    padding: 22px;
}

.lb-own-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lb-own-rank-wrap {
    flex: none;
    text-align: center;
}

.lb-own-total {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--lb-ink-muted);
}

/* Trend gegenueber der Vorperiode. Gruen und Rot stehen hier fest statt aus der Palette: auf der
   tiefblauen Karte ist das Success-Teal (#00897B) kaum vom Grund zu trennen und liest sich nicht
   als "aufwaerts". Die Farbe traegt ohnehin nichts allein - Icon und Text sagen dasselbe. */
.lb-own-trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--lb-ink-muted);
    white-space: nowrap;
}

.lb-own-trend-up {
    color: #4bd39a;
}

.lb-own-trend-down {
    color: #f0938a;
}

.lb-own-body {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.lb-own-rank {
    flex: none;
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 20px;
    background: var(--lb-gold);
    color: var(--lb-on-gold);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.lb-own-text {
    min-width: 0;
}

.lb-own-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-own-level {
    margin-top: 4px;
    font-size: 13px;
    color: var(--lb-ink-muted);
}

.lb-own-xp {
    margin-top: 6px;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    color: var(--lb-gold);
}

.lb-own-gap {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--lb-ink-line);
}

.lb-own-gap-head {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-wrap: pretty;
}

.lb-own-gap-track {
    margin-top: 10px;
    height: 8px;
    border-radius: 8px;
    background: var(--lb-ink-track);
    overflow: hidden;
}

.lb-own-gap-fill {
    height: 100%;
    border-radius: 8px;
    background: var(--lb-gold);
}

.lb-own-gap-note {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--lb-ink-muted);
    text-wrap: pretty;
}

.lb-own-cta.mud-button-filled {
    margin-top: 18px;
    background: #fff;
    color: var(--lb-ink);
    border-radius: 12px;
    padding: 12px;
    font-weight: 800;
    text-transform: none;
}

.lb-own-cta.mud-button-filled:hover {
    background: #eaf1ff;
}

/* --- Seitenkarten --------------------------------------------------------- */
.lb-card {
    background: var(--lb-surface);
    border: 1px solid var(--lb-line);
    border-radius: 22px;
    padding: 22px;
}

.lb-card-soft {
    background: var(--lb-track);
    border-style: dashed;
}

.lb-card-text {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--lb-text);
    text-wrap: pretty;
}

.lb-sources {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.lb-source {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lb-source-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--lb-track);
    color: var(--mud-palette-primary);
}

.lb-source-text {
    flex: 1;
    min-width: 0;
}

.lb-source-name {
    font-size: 13.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-source-meta {
    margin-top: 2px;
    font-size: 12px;
    color: var(--lb-muted);
}

.lb-source-xp {
    flex: none;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.lb-source-xp-minus {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

/* --- Breakpoints ---------------------------------------------------------- */
/* Unter 480 px steht das Podium untereinander. Drei Karten in voller Hoehe schoeben die
   Rangliste rund 800 px nach unten - deshalb behaelt nur die Siegerkarte die grosse Form,
   Platz 2 und 3 werden zur kompakten Zeile. Es faellt dabei nichts weg: Plakette, Name,
   Level und XP bleiben, sie stehen nur nebeneinander statt untereinander. */
@media (max-width: 479px) {
    .lb-podium-2,
    .lb-podium-3 {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "avatar rank  score"
            "avatar name  score"
            "avatar level score";
        align-items: center;
        justify-items: start;
        text-align: left;
        gap: 2px 12px;
        padding: 14px;
    }

    .lb-podium-2 .lb-podium-avatar,
    .lb-podium-3 .lb-podium-avatar {
        grid-area: avatar;
        align-self: center;
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .lb-podium-2 .lb-podium-rank,
    .lb-podium-3 .lb-podium-rank {
        grid-area: rank;
        padding: 3px 9px;
        font-size: 11px;
    }

    .lb-podium-2 .lb-podium-name,
    .lb-podium-3 .lb-podium-name {
        grid-area: name;
        font-size: 15.5px;
    }

    .lb-podium-2 .lb-podium-level,
    .lb-podium-3 .lb-podium-level {
        grid-area: level;
    }

    .lb-podium-2 .lb-podium-score,
    .lb-podium-3 .lb-podium-score {
        grid-area: score;
        justify-self: end;
        text-align: right;
        margin-top: 0;
        width: auto;
        padding-top: 0;
        border-top: none;
    }

    .lb-podium-2 .lb-podium-xp,
    .lb-podium-3 .lb-podium-xp {
        font-size: 17px;
    }
}

/* Ab hier passen zwei Podiumsplaetze nebeneinander; Platz 1 bekommt die volle Zeile,
   damit die Siegerkarte nicht auf halber Breite neben Platz 2 haengt. */
@media (min-width: 480px) {
    .lb-podium-place {
        flex: 1 1 calc(50% - 6px);
    }

    .lb-podium-1 {
        flex-basis: 100%;
    }
}

/* Ab hier steht das Siegertreppchen als Dreier: Platz 2 links, Platz 1 erhoeht in der Mitte,
   Platz 3 rechts. Die DOM-Reihenfolge bleibt 1-2-3 (Screenreader, Handy-Ansicht), nur die
   optische Reihenfolge dreht sich. */
@media (min-width: 720px) {
    .lb-podium {
        align-items: flex-end;
    }

    .lb-podium-place {
        flex: 1 1 0;
    }

    .lb-podium-1 {
        order: 2;
        flex-basis: 0;
        padding: 26px 20px 20px;
    }

    .lb-podium-2 {
        order: 1;
    }

    .lb-podium-3 {
        order: 3;
    }
}

@media (max-width: 600px) {
    .lb-title {
        font-size: 26px;
    }

    .lb-head {
        gap: 14px;
    }

    /* Der Umschalter darf am Handy die ganze Zeile nehmen - so bleiben die Tippziele gross. */
    .lb-tabs {
        width: 100%;
    }

    .lb-tab {
        flex: 1 0 auto;
        text-align: center;
        padding: 10px 14px;
    }

    .lb-year-select {
        flex: 1 1 100%;
    }

    .lb-own,
    .lb-card {
        padding: 18px;
    }
}

/* Ganz schmal: der Abstandsbalken der Zeile weicht, damit Name und XP nicht gequetscht werden.
   Er traegt keine Information, die nicht schon in der XP-Zahl daneben steht. */
@media (max-width: 460px) {
    .lb-row-bar {
        display: none;
    }

    .lb-row {
        gap: 10px;
        padding: 10px;
    }

    .lb-row-rank {
        width: 24px;
    }

    .lb-row-avatar {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: 14px;
    }

    .lb-own-body {
        gap: 12px;
    }

    .lb-own-rank {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lb-podium-1 .lb-podium-avatar {
        animation: none;
    }
}

/* ============================================================================
   TASK-248: Gemeinsame Palette der dunklen Karten. Sie tragen in BEIDEN Themes dasselbe Tiefblau
   und deshalb feste Werte statt der MudBlazor-Palette: mit --mud-palette-text-primary als Grund
   kippen sie im Dark Mode zur hellen Karte - und dann steht das halbtransparente Weiss der
   Nebentexte auf Weiss und die Goldplakette traegt weisse Schrift auf Gold. Der Rahmen bleibt
   dagegen palettengesteuert, sonst verschwindet die Karte im dunklen Seitengrund.

   Einmal definiert statt je Seite kopiert - zwei Tiefblau-Werte laufen sonst auseinander.
   Genutzt vom Leaderboard (TASK-246), der Fehler-Arena (TASK-248), dem Verlauf (TASK-249),
   "Meine Aufgaben" (TASK-251), den Freunden (TASK-339), "Mein Feedback" (TASK-342), den Challenges
   (TASK-344), dem Onboarding (TASK-352), der Registrierung (TASK-354) und dem Trainer-Bereich
   (TASK-356).
   ============================================================================ */
.lb,
.fa,
.hi,
.mt,
.fr,
.mf,
.ch,
.onb,
.reg,
.tr,
.exw,
/* Der Lese-Dialog haengt im Overlay und damit ausserhalb von .reg - seine Knoepfe brauchen
   dieselben Variablen, sonst stehen sie ohne Flaeche da. */
.legal-dialog {
    --app-ink: #14356f;
    --app-ink-on: #ffffff;
    --app-ink-muted: #a9c2e6;
    --app-ink-line: #2c548f;
    --app-ink-track: #21447c;
    --app-ink-hover: #1b4489;
}

/* ============================================================================
   TASK-248: Fehler-Arena nach dem Design "Fehler-Arena"
   (Designvorlagen/lerniq-kategorieauswahl-redesign/project/Fehler-Arena.dc.html).
   Layout, Typo-Skala, Radien und Abstaende aus dem Entwurf, Farben aus den
   MudBlazor-Palettenvariablen - der Entwurf ist hell-only. Mobil zuerst.
   ============================================================================ */
.fa {
    --fa-surface: var(--mud-palette-surface);
    --fa-line: var(--mud-palette-lines-default);
    --fa-text: var(--mud-palette-text-primary);
    --fa-muted: var(--mud-palette-text-secondary);
    --fa-track: var(--mud-palette-background-gray);

    max-width: 1180px;
    margin: 0 auto;
    color: var(--fa-text);
}

/* --- Kopf ----------------------------------------------------------------- */
.fa-head {
    margin-bottom: 20px;
}

.fa-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fa-muted);
    font-weight: 700;
}

.fa-eyebrow-invert {
    color: var(--app-ink-muted);
}

.fa-eyebrow-accent {
    color: var(--mud-palette-primary);
    font-weight: 800;
}

.fa-title {
    margin: 8px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.fa-lead {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--fa-muted);
    max-width: 60ch;
    line-height: 1.55;
    text-wrap: pretty;
}

.fa-skeleton {
    border-radius: 22px;
}

/* --- Dunkle Fortschrittskarte --------------------------------------------- */
.fa-summary {
    background: var(--app-ink);
    color: var(--app-ink-on);
    border: 1px solid var(--fa-line);
    border-radius: 22px;
    padding: 22px;
    margin-bottom: 18px;
}

.fa-summary-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.fa-summary-headline {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.fa-summary-count {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.fa-summary-of {
    font-size: 15px;
    color: var(--app-ink-muted);
}

.fa-summary-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.fa-summary-stat {
    margin-top: 6px;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 700;
}

.fa-summary-stat-xp {
    color: var(--mud-palette-warning);
}

.fa-summary-track {
    margin-top: 20px;
    height: 10px;
    border-radius: 10px;
    background: var(--app-ink-track);
    overflow: hidden;
}

.fa-summary-fill {
    height: 100%;
    border-radius: 10px;
    background: var(--mud-palette-success);
    transition: width 0.3s ease;
}

.fa-summary-note {
    margin-top: 9px;
    font-size: 12.5px;
    color: var(--app-ink-muted);
    text-wrap: pretty;
}

/* --- Raster --------------------------------------------------------------- */
.fa-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.fa-main,
.fa-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* --- Karten --------------------------------------------------------------- */
.fa-card {
    background: var(--fa-surface);
    border: 1px solid var(--fa-line);
    border-radius: 22px;
    padding: 22px;
}

.fa-card-soft {
    background: var(--fa-track);
    border-style: dashed;
}

.fa-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.fa-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fa-card-note {
    font-size: 13px;
    color: var(--fa-muted);
}

.fa-card-lead {
    margin: 8px 0 16px;
    font-size: 14px;
    color: var(--fa-muted);
    max-width: 58ch;
    text-wrap: pretty;
}

.fa-card-text {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--fa-text);
    text-wrap: pretty;
}

/* --- Bereichsauswahl ------------------------------------------------------ */
.fa-all-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: none;
    border-radius: 16px;
    background: var(--app-ink);
    color: var(--app-ink-on);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
}

.fa-all-button:hover {
    background: var(--app-ink-hover);
}

.fa-all-label,
.fa-all-count {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fa-all-count {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--app-ink-muted);
    white-space: nowrap;
}

.fa-areas {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.fa-area {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--fa-surface);
    border: 1px solid var(--fa-line);
    border-radius: 16px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--fa-text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.fa-area:hover {
    border-color: var(--fa-area-color, var(--mud-palette-primary));
    transform: translateY(-1px);
}

.fa-area-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 19px;
    color: var(--fa-area-color, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--fa-area-color, var(--mud-palette-primary)) 14%, transparent);
}

.fa-area-body {
    flex: 1;
    min-width: 0;
}

.fa-area-name {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: pretty;
}

.fa-area-meter {
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fa-area-track {
    flex: 1;
    height: 5px;
    border-radius: 5px;
    background: var(--fa-track);
    overflow: hidden;
}

.fa-area-fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--fa-area-color, var(--mud-palette-primary));
}

.fa-area-stat {
    flex: none;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--fa-muted);
    white-space: nowrap;
}

/* --- Frage ---------------------------------------------------------------- */
.fa-question {
    padding: 22px 22px 24px;
}

.fa-question-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fa-question-meta,
.fa-question-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fa-area-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--fa-area-color, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--fa-area-color, var(--mud-palette-primary)) 14%, transparent);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fa-question-position {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--fa-muted);
    white-space: nowrap;
}

.fa-wrong-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    white-space: nowrap;
}

.fa-flag-button.mud-icon-button {
    border: 1px solid var(--fa-line);
    border-radius: 10px;
    color: var(--fa-muted);
}

/* --- Weg zur Meisterung --------------------------------------------------- */
.fa-streak {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.fa-streak-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fa-muted);
    font-weight: 700;
}

.fa-streak-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fa-streak-dot {
    width: 22px;
    height: 6px;
    border-radius: 6px;
    background: var(--fa-track);
    transition: background-color 0.2s ease;
}

.fa-streak-dot-on {
    background: var(--mud-palette-primary);
}

.fa-streak-dot-mastered {
    background: var(--mud-palette-success);
}

.fa-streak-note {
    font-size: 12.5px;
    color: var(--fa-muted);
}

.fa-question-text {
    margin: 14px 0 18px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

/* --- Antwortoptionen ------------------------------------------------------ */
.fa-options {
    display: grid;
    gap: 10px;
}

.fa-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    background: var(--fa-surface);
    border: 1.5px solid var(--fa-line);
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: var(--fa-text);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fa-option:hover:not(:disabled) {
    border-color: var(--mud-palette-primary);
}

.fa-option:disabled {
    cursor: default;
}

.fa-option-letter {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--fa-track);
    color: var(--fa-muted);
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 13px;
    font-weight: 700;
}

.fa-option-text {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-wrap: pretty;
}

.fa-option-mark {
    flex: none;
}

/* Zustaende erst nach dem Klick. Farbe traegt nie allein - Rahmen, Badge und Icon sagen dasselbe. */
.fa-option-correct {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
}

.fa-option-correct .fa-option-letter,
.fa-option-correct .fa-option-mark {
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}

.fa-option-correct .fa-option-mark {
    background: none;
    color: var(--mud-palette-success);
}

.fa-option-wrong {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
}

.fa-option-wrong .fa-option-letter {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.fa-option-wrong .fa-option-mark {
    color: var(--mud-palette-error);
}

.fa-option-muted {
    opacity: 0.6;
}

/* --- Ergebnis ------------------------------------------------------------- */
.fa-result {
    margin-top: 18px;
    animation: fa-pop 0.18s ease-out;
}

@keyframes fa-pop {
    from { transform: scale(0.96); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.fa-verdicts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fa-verdict {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 800;
}

.fa-verdict-correct,
.fa-verdict-mastered {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

/* Die Meisterung ist der Moment, auf den die ganze Seite hinarbeitet - sie darf sich melden.
   Ersetzt Snackbar plus Konfetti als einzige Rueckmeldung (Umsetzungsnotiz des Entwurfs). */
.fa-verdict-mastered {
    animation: fa-cheer 1.1s ease-in-out 2;
}

@keyframes fa-cheer {
    0% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-success) 45%, transparent); }
    18% { transform: scale(1.09) rotate(-3.5deg); }
    36% { transform: scale(1.05) rotate(3.5deg); }
    54% { transform: scale(1.08) rotate(-2.5deg); }
    72% { transform: scale(1.02) rotate(1.5deg); }
    100% { transform: scale(1) rotate(0deg); box-shadow: 0 0 0 16px color-mix(in srgb, var(--mud-palette-success) 0%, transparent); }
}

.fa-verdict-wrong {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.fa-xp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 999px;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.fa-explanation {
    margin-top: 14px;
    padding: 16px 18px;
    border: 1.5px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
    border-radius: 16px;
}

.fa-explanation-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    font-weight: 800;
}

.fa-explanation-text {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    text-wrap: pretty;
}

.fa-result-actions {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fa-result-next {
    flex: 1;
    min-width: 200px;
}

.fa-primary-button.mud-button-filled {
    background: var(--app-ink);
    color: var(--app-ink-on);
    border-radius: 12px;
    padding: 12px 22px;
    font-weight: 800;
    text-transform: none;
}

.fa-primary-button.mud-button-filled:hover {
    background: var(--app-ink-hover);
}

.fa-secondary-button.mud-button-outlined {
    border-color: var(--fa-line);
    color: var(--fa-text);
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 700;
    text-transform: none;
}

.fa-secondary-button.mud-button-outlined:hover {
    border-color: var(--mud-palette-primary);
}

/* --- Leerzustaende -------------------------------------------------------- */
.fa-empty {
    background: var(--fa-surface);
    border: 1px solid var(--fa-line);
    border-radius: 22px;
    padding: 40px 24px;
    text-align: center;
}

.fa-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.fa-empty-icon .mud-icon-root {
    font-size: 30px;
}

.fa-empty-title {
    margin: 18px 0 8px;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.fa-empty-text {
    margin: 0 auto;
    max-width: 48ch;
    font-size: 14.5px;
    color: var(--fa-muted);
    line-height: 1.6;
    text-wrap: pretty;
}

.fa-empty-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* --- Seitenspalte --------------------------------------------------------- */
.fa-weakspots {
    margin-top: 16px;
    display: grid;
    gap: 14px;
}

.fa-weakspot-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.fa-weakspot-name {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: pretty;
}

.fa-weakspot-stat {
    flex: none;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--fa-muted);
}

.fa-weakspots .fa-area-track {
    margin-top: 7px;
}

.fa-rules {
    border-width: 1.5px;
    border-color: var(--mud-palette-primary);
}

.fa-rule-list {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.fa-rule {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.fa-rule-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
}

.fa-rule-icon-primary {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.fa-rule-icon-warn {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
}

.fa-rule-icon-success {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.fa-rule-title {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
}

.fa-rule-text {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--fa-muted);
    line-height: 1.5;
    text-wrap: pretty;
}

/* --- Breakpoints ---------------------------------------------------------- */
@media (min-width: 1000px) {
    .fa-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 600px) {
    .fa-title {
        font-size: 26px;
    }

    .fa-summary,
    .fa-card,
    .fa-empty {
        padding: 18px;
    }

    .fa-summary-stats {
        gap: 18px;
    }

    .fa-question-text {
        font-size: 19px;
    }

    .fa-areas {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Der Weiter-Knopf nimmt die ganze Zeile, "Anderen Bereich" darunter - nebeneinander sind
       beide am Handy zu schmal fuer ihre Beschriftung. */
    .fa-result-next,
    .fa-result-actions .mud-button-root {
        flex: 1 1 100%;
        min-width: 0;
    }
}

@media (max-width: 460px) {
    .fa-summary-count {
        font-size: 27px;
    }

    .fa-option {
        gap: 10px;
        padding: 12px 12px;
    }

    .fa-option-letter {
        width: 26px;
        height: 26px;
        border-radius: 8px;
        font-size: 12px;
    }

    /* Position und Fehlerzahl duerfen umbrechen statt den Kopf zu sprengen. */
    .fa-question-head {
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fa-verdict-mastered {
        animation: none;
    }

    .fa-result {
        animation: none;
    }

    .fa-area:hover {
        transform: none;
    }
}

/* ============================================================================
   TASK-249: Aktivitäts-Verlauf nach dem Design "Verlauf"
   (Designvorlagen/lerniq-kategorieauswahl-redesign/project/Verlauf.dc.html).
   Layout, Typo-Skala, Radien und Abstaende aus dem Entwurf, Farben aus den
   MudBlazor-Palettenvariablen - der Entwurf ist hell-only. Mobil zuerst.
   ============================================================================ */
.hi {
    --hi-surface: var(--mud-palette-surface);
    --hi-line: var(--mud-palette-lines-default);
    --hi-text: var(--mud-palette-text-primary);
    --hi-muted: var(--mud-palette-text-secondary);
    --hi-track: var(--mud-palette-background-gray);

    max-width: 1240px;
    margin: 0 auto;
    color: var(--hi-text);
}

/* --- Kopf ----------------------------------------------------------------- */
.hi-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.hi-head-text {
    min-width: 0;
}

.hi-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hi-muted);
    font-weight: 700;
}

.hi-title {
    margin: 6px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.hi-headline {
    margin-top: 8px;
    font-size: 14px;
    color: var(--hi-muted);
}

.hi-head-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hi-xp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hi-surface);
    border: 1px solid var(--hi-line);
    border-radius: 999px;
    padding: 8px 15px;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.hi-xp-pill .mud-icon-root {
    color: var(--mud-palette-warning);
}

.hi-days-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--app-ink);
    color: var(--app-ink-on);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.hi-days-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-success);
}

/* --- Filterkarte ---------------------------------------------------------- */
.hi-filters {
    background: var(--hi-surface);
    border: 1px solid var(--hi-line);
    border-radius: 22px;
    padding: 18px 20px;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
}

.hi-filter-group {
    min-width: 0;
}

.hi-filter-types {
    flex: 1 1 280px;
}

.hi-chips {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hi-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--hi-line);
    border-radius: 999px;
    background: var(--hi-surface);
    color: var(--hi-text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hi-chip:hover {
    border-color: var(--mud-palette-primary);
}

.hi-chip-on {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.hi-chip-type-on {
    background: var(--app-ink);
    border-color: var(--app-ink);
    color: var(--app-ink-on);
}

.hi-chip-count {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 700;
    opacity: 0.7;
}

.hi-range-picker {
    margin-top: 10px;
    max-width: 280px;
}

.hi-skeleton {
    border-radius: 22px;
}

/* --- Tagesgruppen --------------------------------------------------------- */
.hi-days {
    display: grid;
    gap: 14px;
}

.hi-day {
    background: var(--hi-surface);
    border: 1px solid var(--hi-line);
    border-radius: 22px;
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
}

.hi-day-head {
    flex: 0 1 176px;
    min-width: 0;
}

.hi-day-label {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hi-day-weekday {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--hi-muted);
}

.hi-day-pill {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hi-track);
    border: 1px solid var(--hi-line);
    border-radius: 999px;
    padding: 6px 12px;
}

.hi-day-xp {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mud-palette-success);
}

.hi-day-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--hi-line);
    flex: none;
}

.hi-day-count {
    font-size: 11.5px;
    color: var(--hi-muted);
    font-weight: 600;
}

/* --- Ereignisse ----------------------------------------------------------- */
.hi-events {
    flex: 1 1 380px;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.hi-event {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 14px;
    transition: background-color 0.15s ease;
}

.hi-event:hover {
    background: var(--hi-track);
}

.hi-event-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--hi-type-color, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--hi-type-color, var(--mud-palette-primary)) 14%, transparent);
}

.hi-event-body {
    flex: 1;
    min-width: 0;
}

.hi-event-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: pretty;
}

.hi-event-details {
    margin-top: 3px;
    font-size: 13px;
    color: var(--hi-muted);
    text-wrap: pretty;
}

.hi-event-meta {
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--hi-muted);
}

.hi-event-time {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.hi-event-type {
    font-weight: 700;
    color: var(--hi-type-color, var(--mud-palette-primary));
}

.hi-event-xp {
    flex: none;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap;
    color: var(--hi-muted);
    background: var(--hi-track);
}

.hi-event-xp-plus {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

/* --- Leerzustand und Seitenwechsel ---------------------------------------- */
.hi-empty {
    background: var(--hi-surface);
    border: 1px dashed var(--hi-line);
    border-radius: 22px;
    padding: 40px 24px;
    text-align: center;
}

.hi-empty-title {
    font-size: 17px;
    font-weight: 700;
}

.hi-empty-text {
    margin: 8px auto 0;
    max-width: 52ch;
    font-size: 14px;
    color: var(--hi-muted);
    line-height: 1.55;
    text-wrap: pretty;
}

.hi-pager {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hi-pager-range {
    font-size: 13px;
    color: var(--hi-muted);
}

/* --- Breakpoints ---------------------------------------------------------- */
@media (max-width: 600px) {
    .hi-title {
        font-size: 26px;
    }

    .hi-filters,
    .hi-day {
        padding: 16px;
    }

    /* Der Tageskopf legt sich am Handy quer ueber die Karte, statt eine schmale Spalte
       neben den Eintraegen zu belegen. */
    .hi-day-head {
        flex: 1 1 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 8px 10px;
    }

    .hi-day-weekday,
    .hi-day-pill {
        margin-top: 0;
    }

    /* Nicht auf 100 % strecken - eine Pille ueber die ganze Breite liest sich als Balken.
       Sie bricht ohnehin um, sobald Datum und Wochentag die Zeile fuellen. */
    .hi-day-pill {
        flex: 0 0 auto;
    }

    .hi-range-picker {
        max-width: 100%;
    }

    .hi-pager {
        justify-content: center;
    }
}

@media (max-width: 460px) {
    .hi-event {
        gap: 10px;
        padding: 10px 8px;
    }

    .hi-event-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    /* Der XP-Wert rutscht unter den Text - nebeneinander bleibt fuer den Titel zu wenig. */
    .hi-event {
        flex-wrap: wrap;
    }

    .hi-event-xp {
        margin-left: 42px;
    }
}

/* ============================================================================
   TASK-251: Meine Aufgaben nach dem Design "Meine-Aufgaben"
   (Designvorlagen/lerniq-kategorieauswahl-redesign/project/Meine-Aufgaben.dc.html).
   Layout, Typo-Skala, Radien und Abstaende aus dem Entwurf, Farben aus den
   MudBlazor-Palettenvariablen - der Entwurf ist hell-only. Mobil zuerst.
   ============================================================================ */
.mt {
    --mt-surface: var(--mud-palette-surface);
    --mt-line: var(--mud-palette-lines-default);
    --mt-text: var(--mud-palette-text-primary);
    --mt-muted: var(--mud-palette-text-secondary);
    --mt-track: var(--mud-palette-background-gray);

    max-width: 1240px;
    margin: 0 auto;
    color: var(--mt-text);
}

/* --- Kopf ----------------------------------------------------------------- */
.mt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.mt-head-text {
    min-width: 0;
}

.mt-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mt-muted);
    font-weight: 700;
}

.mt-title {
    margin: 6px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.mt-headline {
    margin-top: 8px;
    font-size: 14px;
    color: var(--mt-muted);
}

.mt-head-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.mt-open-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--mt-surface);
    border: 1px solid var(--mt-line);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.mt-open-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-warning);
}

/* Ueberfaelliges meldet sich - das ist die eine Sache auf dieser Seite, die keinen Aufschub
   vertraegt. prefers-reduced-motion schaltet den Puls ab. */
.mt-overdue-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    animation: mt-nudge 1.8s ease-out infinite;
}

@keyframes mt-nudge {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-error) 45%, transparent); }
    70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--mud-palette-error) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-error) 0%, transparent); }
}

.mt-skeleton {
    border-radius: 22px;
}

/* --- Karten --------------------------------------------------------------- */
.mt-card {
    background: var(--mt-surface);
    border: 1px solid var(--mt-line);
    border-radius: 22px;
    padding: 20px 22px;
    margin-bottom: 14px;
}

.mt-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.mt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mt-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--mt-line);
    border-radius: 999px;
    background: var(--mt-surface);
    color: var(--mt-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mt-filter:hover {
    border-color: var(--mud-palette-primary);
}

.mt-filter-on {
    background: var(--app-ink);
    border-color: var(--app-ink);
    color: var(--app-ink-on);
}

.mt-filter-count {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.7;
}

.mt-done-count {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    border-radius: 999px;
    padding: 5px 10px;
}

/* --- Offene Aufgaben ------------------------------------------------------ */
.mt-list {
    display: grid;
    gap: 8px;
}

.mt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    border: 1px solid var(--mt-line);
    background: var(--mt-track);
    border-radius: 16px;
    padding: 14px 15px;
    transition: border-color 0.15s ease;
}

.mt-row:hover {
    border-color: var(--mt-type-color, var(--mud-palette-primary));
}

.mt-row-late {
    border-color: color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    background: color-mix(in srgb, var(--mud-palette-error) 7%, transparent);
}

.mt-row-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--mt-type-color, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--mt-type-color, var(--mud-palette-primary)) 14%, transparent);
}

.mt-row-body {
    flex: 1 1 220px;
    min-width: 0;
}

.mt-row-title {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: pretty;
}

.mt-row-meta {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--mt-muted);
}

.mt-row-type {
    font-weight: 700;
    color: var(--mt-type-color, var(--mud-palette-primary));
}

.mt-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mt-line);
    flex: none;
}

.mt-row-due {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.mt-row-progress {
    flex: 1 1 150px;
    min-width: 0;
    max-width: 220px;
}

.mt-progress-track {
    height: 6px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mt-line);
    overflow: hidden;
}

.mt-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: var(--mt-type-color, var(--mud-palette-primary));
}

.mt-progress-note {
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--mt-muted);
}

/* Ohne Balken traegt der Text allein - dann darf er nicht wie eine Fussnote aussehen. */
.mt-progress-note-only {
    margin-top: 0;
    font-size: 12.5px;
}

.mt-row-actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mt-status {
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
    color: var(--mt-muted);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mt-line);
}

.mt-status-late {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    border-color: transparent;
}

.mt-status-soon {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    border-color: transparent;
}

.mt-cta.mud-button-filled {
    background: var(--app-ink);
    color: var(--app-ink-on);
    border-radius: 12px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    white-space: nowrap;
}

.mt-cta.mud-button-filled:hover {
    background: var(--app-ink-hover);
}

/* --- Erledigt ------------------------------------------------------------- */
.mt-done-list {
    display: grid;
    gap: 2px;
}

.mt-done-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    transition: background-color 0.15s ease;
}

.mt-done-row:hover {
    background: var(--mt-track);
}

.mt-done-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.mt-done-body {
    flex: 1;
    min-width: 0;
}

.mt-done-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.mt-done-meta {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--mt-muted);
}

.mt-done-chip {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

/* --- Leerzustand ---------------------------------------------------------- */
.mt-empty {
    padding: 24px 0;
    text-align: center;
}

.mt-empty-title {
    font-size: 16px;
    font-weight: 700;
}

.mt-empty-text {
    margin: 6px auto 0;
    max-width: 52ch;
    font-size: 13.5px;
    color: var(--mt-muted);
    line-height: 1.55;
    text-wrap: pretty;
}

/* --- Breakpoints ---------------------------------------------------------- */
@media (max-width: 720px) {
    /* Der Balken darf die Zeile nicht mehr teilen - er rutscht unter Titel und Fälligkeit. */
    .mt-row-progress {
        flex: 1 1 100%;
        max-width: none;
        order: 3;
    }

    .mt-row-actions {
        order: 4;
        flex: 1 1 100%;
        justify-content: space-between;
    }
}

@media (max-width: 600px) {
    .mt-title {
        font-size: 26px;
    }

    .mt-card {
        padding: 16px;
    }

    .mt-card-head {
        gap: 10px;
    }

    /* Die Filterleiste scrollt seitlich statt umzubrechen - vier Pillen untereinander waeren
       ein Menue, kein Umschalter. */
    .mt-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .mt-filters::-webkit-scrollbar {
        display: none;
    }

    .mt-filter {
        flex: none;
    }

    .mt-row-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}

@media (max-width: 460px) {
    .mt-row {
        padding: 12px;
    }

    .mt-cta.mud-button-filled {
        flex: 1;
    }
}

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

/* ============================================================================
   TASK-339: Freunde nach dem Design "Freunde"
   (Designvorlagen/lerniq-kategorieauswahl-redesign/project/Freunde.dc.html).
   Layout, Typo-Skala, Radien und Abstaende aus dem Entwurf, Farben aus den
   MudBlazor-Palettenvariablen - der Entwurf ist hell-only. Mobil zuerst.
   ============================================================================ */
.fr {
    --fr-surface: var(--mud-palette-surface);
    --fr-line: var(--mud-palette-lines-default);
    --fr-text: var(--mud-palette-text-primary);
    --fr-muted: var(--mud-palette-text-secondary);
    --fr-track: var(--mud-palette-background-gray);

    max-width: 1240px;
    margin: 0 auto;
    color: var(--fr-text);
}

/* --- Kopf ----------------------------------------------------------------- */
.fr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.fr-head-text {
    min-width: 0;
}

.fr-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fr-muted);
    font-weight: 700;
}

.fr-title {
    margin: 6px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.fr-headline {
    margin-top: 8px;
    font-size: 14px;
    color: var(--fr-muted);
}

.fr-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-line);
    border-radius: 999px;
    padding: 6px;
}

.fr-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: none;
    background: transparent;
    color: var(--fr-text);
    border-radius: 999px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fr-tab:hover {
    background: var(--fr-track);
}

.fr-tab-on,
.fr-tab-on:hover {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.fr-tab-badge {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 7px;
    background: var(--fr-track);
    color: var(--fr-muted);
}

.fr-tab-on .fr-tab-badge {
    background: color-mix(in srgb, var(--mud-palette-primary-text) 22%, transparent);
    color: var(--mud-palette-primary-text);
}

/* Offene eingehende Anfragen sind das Einzige auf dieser Seite, das eine Reaktion braucht.
   prefers-reduced-motion schaltet den Puls ab. */
.fr-tab-badge-todo {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    animation: fr-nudge 1.8s ease-out infinite;
}

@keyframes fr-nudge {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-error) 45%, transparent); }
    70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mud-palette-error) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-error) 0%, transparent); }
}

.fr-skeleton {
    border-radius: 22px;
}

/* --- Karten --------------------------------------------------------------- */
.fr-card {
    background: var(--fr-surface);
    border: 1px solid var(--fr-line);
    border-radius: 22px;
    padding: 20px 22px;
    margin-bottom: 14px;
}

.fr-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.fr-count {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 10px;
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}

/* --- Namenskacheln -------------------------------------------------------- */
.fr-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 17px;
    font-size: 20px;
    font-weight: 800;
    color: var(--fr-tint, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--fr-tint, var(--mud-palette-primary)) 16%, transparent);
}

.fr-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 15px;
}

.fr-avatar-wrap {
    position: relative;
    flex: none;
}

.fr-dot {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2.5px solid var(--fr-surface);
    background: var(--mud-palette-lines-default);
}

.fr-dot-on {
    background: var(--mud-palette-success);
    animation: fr-live 2s ease-out infinite;
}

@keyframes fr-live {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-success) 50%, transparent); }
    70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--mud-palette-success) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-success) 0%, transparent); }
}

/* --- Suche ---------------------------------------------------------------- */
.fr-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--fr-track);
    border: 1px solid var(--fr-line);
    border-radius: 14px;
    padding: 12px 16px;
    transition: border-color 0.15s ease;
}

.fr-search:focus-within {
    border-color: var(--mud-palette-primary);
}

.fr-search-icon {
    flex: none;
    color: var(--fr-muted);
}

.fr-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fr-text);
}

.fr-search-input::placeholder {
    color: var(--fr-muted);
    font-weight: 500;
}

.fr-search-hint {
    font-size: 13px;
    color: var(--fr-muted);
}

.fr-search-empty {
    margin-top: 14px;
    max-width: 62ch;
    font-size: 13.5px;
    color: var(--fr-muted);
    line-height: 1.55;
    text-wrap: pretty;
}

.fr-results {
    margin-top: 14px;
    display: grid;
    gap: 2px;
}

.fr-result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 12px;
    border-radius: 14px;
    transition: background-color 0.15s ease;
}

.fr-result:hover {
    background: var(--fr-track);
}

.fr-result-body {
    flex: 1;
    min-width: 0;
}

.fr-result-name {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: pretty;
}

.fr-result-meta {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--fr-muted);
}

/* --- Zustandsplaketten ---------------------------------------------------- */
.fr-state {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

.fr-state-friend {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.fr-state-pending {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}

/* --- Schaltflaechen ------------------------------------------------------- */
.fr-btn {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 9px 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fr-btn-primary {
    flex: none;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.fr-btn-primary:hover {
    background: var(--mud-palette-primary-darken);
}

.fr-btn-accept {
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}

.fr-btn-accept:hover {
    background: var(--mud-palette-success-darken);
}

.fr-btn-ghost {
    background: var(--fr-surface);
    border-color: var(--fr-line);
    color: var(--fr-muted);
}

.fr-btn-ghost:hover {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

/* Die Hauptaktion der Karte ist bewusst das Tiefblau und nicht die Primaerfarbe: "Hinzufuegen" in
   der Suchkarte darueber ist blau, zwei Blautoene als konkurrierende Aktionen auf einem Bildschirm
   liest niemand auseinander.
   Der helle Innenrand ist kein Zierrat: --app-ink ist in BEIDEN Themes derselbe Wert (TASK-248), und
   auf der dunklen Karte im Dark Mode verschwaemme die Flaeche sonst mit dem Kartengrund. Im Light
   Mode faellt er auf dem dunklen Knopf nicht auf. */
.fr-btn-ink {
    flex: 1;
    padding: 12px;
    font-size: 13.5px;
    background: var(--app-ink);
    color: var(--app-ink-on);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-ink-on) 20%, transparent);
}

.fr-btn-ink:hover {
    background: var(--app-ink-hover);
}

.fr-btn-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    border: 1px solid var(--fr-line);
    background: var(--fr-surface);
    border-radius: 12px;
    color: var(--fr-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.fr-btn-icon:hover {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

/* --- Freundeskarten ------------------------------------------------------- */
.fr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.fr-friend {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--fr-surface);
    border: 1px solid var(--fr-line);
    border-radius: 20px;
    padding: 20px;
    transition: border-color 0.15s ease;
}

.fr-friend:hover {
    border-color: var(--mud-palette-primary);
}

.fr-friend-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fr-friend-ident {
    flex: 1;
    min-width: 0;
}

.fr-friend-name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-wrap: pretty;
}

.fr-friend-sub {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.fr-status {
    font-size: 12px;
    font-weight: 700;
    color: var(--fr-muted);
}

.fr-status-on {
    color: var(--mud-palette-success);
}

/* TASK-341: Die Level-Plakette bleibt das bestehende LevelBadge (MudChip) - an der Level-Faerbung
   wird nichts geaendert, auch nicht fuer diesen Entwurf. MudChip bringt einen eigenen Aussenabstand
   mit, der die Zeile gegen den Status-Text verschieben wuerde; den Abstand macht hier der Flex-Gap. */
.fr-friend-sub .mud-chip,
.fr-request-meta .mud-chip {
    margin: 0;
}

.fr-stats {
    display: flex;
    gap: 8px;
}

.fr-stat {
    flex: 1;
    min-width: 0;
    background: var(--fr-track);
    border: 1px solid var(--fr-line);
    border-radius: 12px;
    padding: 10px 12px;
}

.fr-stat-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-muted);
    font-weight: 700;
}

.fr-stat-value {
    margin-top: 3px;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 13.5px;
    color: var(--fr-text);
}

.fr-stat-streak {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Die Flamme faerbt sich mit der Laenge der Serie. Sie traegt nichts allein - die Zahl steht
   daneben. */
.fr-flame {
    flex: none;
    color: var(--mud-palette-warning);
}

.fr-flame-off {
    color: var(--mud-palette-lines-default);
}

.fr-flame-hot {
    color: var(--mud-palette-error);
}

.fr-friend-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

/* --- Anfragen ------------------------------------------------------------- */
.fr-requests {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

.fr-request-card {
    flex: 1 1 380px;
    min-width: 0;
    margin-bottom: 0;
}

.fr-request-list {
    display: grid;
    gap: 8px;
}

.fr-request {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: var(--fr-track);
    border: 1px solid var(--fr-line);
    border-radius: 14px;
    padding: 13px 14px;
}

.fr-request-body {
    flex: 1 1 140px;
    min-width: 0;
}

.fr-request-name {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: pretty;
}

.fr-request-meta {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--fr-muted);
}

.fr-request-xp {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.fr-request-actions {
    flex: none;
    display: flex;
    gap: 8px;
}

.fr-request-empty {
    font-size: 13.5px;
    color: var(--fr-muted);
    line-height: 1.55;
    text-wrap: pretty;
}

/* --- Leerzustand ---------------------------------------------------------- */
.fr-empty {
    padding: 28px 22px;
    text-align: center;
}

.fr-empty-title {
    font-size: 16px;
    font-weight: 700;
}

.fr-empty-text {
    margin: 6px auto 0;
    max-width: 52ch;
    font-size: 13.5px;
    color: var(--fr-muted);
    line-height: 1.55;
    text-wrap: pretty;
}

/* --- Breakpoints ---------------------------------------------------------- */
@media (max-width: 600px) {
    .fr-title {
        font-size: 26px;
    }

    .fr-card {
        padding: 16px;
    }

    /* Der Umschalter nimmt die ganze Zeile, damit beide Knoepfe gleich breit und gut treffbar sind -
       ein rechtsbuendiger Pillenblock waere am Handy in der Ecke gequetscht. */
    .fr-tabs {
        flex: 1 1 100%;
    }

    .fr-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 12px;
    }

    /* Das Kartenraster wird einspaltig, sobald zwei Spalten unter 280 px fallen wuerden. */
    .fr-grid {
        grid-template-columns: 1fr;
    }

    /* Annehmen/Ablehnen rutschen unter den Namen statt die Zeile zu quetschen. */
    .fr-request-actions {
        flex: 1 1 100%;
    }

    .fr-request-actions .fr-btn {
        flex: 1;
    }
}

@media (max-width: 460px) {
    .fr-card-head {
        gap: 8px;
    }

    /* Sonst quetschen sich Name und "Hinzuefuegen" nebeneinander und der Name bricht mitten im
       Wort um - die Aktion nimmt lieber die naechste Zeile. */
    .fr-result {
        flex-wrap: wrap;
        padding: 10px;
    }

    .fr-result-body {
        flex: 1 1 60%;
    }

    .fr-result .fr-btn {
        flex: 1 1 100%;
        margin-left: 50px;
        text-align: center;
    }

    /* Die Zustandsplakette bekommt zwar eine eigene Zeile, bleibt aber schmal - ueber die ganze
       Breite gezogen sieht sie aus wie ein Knopf, den man druecken koennte. */
    .fr-result .fr-state {
        flex: 1 1 100%;
        max-width: fit-content;
        margin-left: 50px;
    }

    .fr-friend {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fr-tab-badge-todo,
    .fr-dot-on {
        animation: none;
    }
}

/* ============================================================================
   TASK-342: Mein Feedback nach dem Design "Mein-Feedback"
   (Designvorlagen/lerniq-kategorieauswahl-redesign/project/Mein-Feedback.dc.html).
   Layout, Typo-Skala, Radien und Abstaende aus dem Entwurf, Farben aus den
   MudBlazor-Palettenvariablen - der Entwurf ist hell-only. Mobil zuerst.

   --mf-tone traegt je Karte die Farbe ihres Typs; sie wird inline gesetzt und
   faerbt Icon-Kachel und Typ-Beschriftung. Sie traegt nie allein - der Typ steht
   als Wort daneben.
   ============================================================================ */
.mf {
    --mf-surface: var(--mud-palette-surface);
    --mf-line: var(--mud-palette-lines-default);
    --mf-text: var(--mud-palette-text-primary);
    --mf-muted: var(--mud-palette-text-secondary);
    --mf-track: var(--mud-palette-background-gray);

    max-width: 1240px;
    margin: 0 auto;
    color: var(--mf-text);
}

/* --- Kopf ----------------------------------------------------------------- */
.mf-head {
    margin-bottom: 22px;
}

.mf-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mf-muted);
    font-weight: 700;
}

.mf-title {
    margin: 6px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.mf-lead {
    margin-top: 8px;
    max-width: 680px;
    font-size: 14.5px;
    color: var(--mf-muted);
    line-height: 1.5;
    text-wrap: pretty;
}

/* --- Aktionskarten -------------------------------------------------------- */
.mf-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}

.mf-action {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--mf-surface);
    border: 1px solid var(--mf-line);
    border-radius: 20px;
    padding: 22px;
    transition: border-color 0.15s ease;
}

.mf-action:hover {
    border-color: var(--mf-tone, var(--mud-palette-primary));
}

.mf-action-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    color: var(--mf-tone, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--mf-tone, var(--mud-palette-primary)) 14%, transparent);
}

.mf-action-body {
    min-width: 0;
}

.mf-action-title {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-wrap: pretty;
}

.mf-action-text {
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--mf-muted);
    line-height: 1.5;
    text-wrap: pretty;
}

/* Alle drei Karten teilen sich denselben dunklen Knopf: sie sind gleichrangige Angebote, ein
   farbiger je Karte machte daraus eine Rangfolge, die es nicht gibt.
   Der helle Innenrand ist kein Zierrat - --app-ink ist in BEIDEN Themes derselbe Wert (TASK-248)
   und verschwaemme im Dark Mode sonst mit dem Kartengrund. */
.mf-action-cta {
    margin-top: auto;
    padding: 13px;
    border: none;
    border-radius: 12px;
    background: var(--app-ink);
    color: var(--app-ink-on);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-ink-on) 20%, transparent);
    transition: background-color 0.15s ease;
}

.mf-action-cta:hover {
    background: var(--app-ink-hover);
}

/* --- Listenkopf und Filter ------------------------------------------------ */
.mf-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.mf-list-head-text {
    min-width: 0;
}

.mf-subtitle {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.mf-headline {
    margin-top: 5px;
    font-size: 13.5px;
    color: var(--mf-muted);
}

.mf-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mf-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--mf-line);
    border-radius: 999px;
    background: var(--mf-surface);
    color: var(--mf-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mf-filter:hover {
    border-color: var(--mud-palette-primary);
}

.mf-filter-on {
    background: var(--app-ink);
    border-color: var(--app-ink);
    color: var(--app-ink-on);
}

.mf-filter-count {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.7;
}

.mf-skeleton {
    border-radius: 20px;
}

/* --- Meldungen ------------------------------------------------------------ */
.mf-items {
    display: grid;
    gap: 10px;
}

.mf-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    background: var(--mf-surface);
    border: 1px solid var(--mf-line);
    border-radius: 20px;
    padding: 20px 22px;
}

.mf-item-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    color: var(--mf-tone, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--mf-tone, var(--mud-palette-primary)) 14%, transparent);
}

.mf-item-body {
    flex: 1 1 320px;
    min-width: 0;
}

.mf-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mf-item-type {
    font-size: 12px;
    font-weight: 700;
    color: var(--mf-tone, var(--mud-palette-primary));
}

.mf-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mf-line);
    flex: none;
}

.mf-item-date {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--mf-muted);
}

.mf-item-qid {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--mf-text);
    background: var(--mf-track);
    border: 1px solid var(--mf-line);
    border-radius: 8px;
    padding: 3px 8px;
    white-space: nowrap;
}

.mf-item-subject {
    margin-top: 7px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

/* --- Admin-Notiz ---------------------------------------------------------- */
.mf-note {
    margin-top: 12px;
    display: flex;
    gap: 11px;
    background: var(--mf-track);
    border: 1px solid var(--mf-line);
    border-radius: 14px;
    padding: 13px 15px;
}

.mf-note-icon {
    flex: none;
    color: var(--mf-muted);
}

.mf-note-body {
    min-width: 0;
}

.mf-note-label {
    font-size: 11.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mf-muted);
    font-weight: 700;
}

.mf-note-text {
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--mf-text);
    line-height: 1.5;
    text-wrap: pretty;
    overflow-wrap: anywhere;
}

/* --- Status --------------------------------------------------------------- */
.mf-status {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 7px 13px;
    white-space: nowrap;
    color: var(--mf-muted);
    background: var(--mf-track);
}

.mf-status-open {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}

.mf-status-review {
    color: var(--mud-palette-info);
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
}

.mf-status-done {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

/* Abgelehnt bleibt bewusst neutral statt rot: die Meldung war nicht falsch, sie fuehrt nur zu
   keiner Aenderung. Rot laese sich wie eine Ruege. */
.mf-status-rejected {
    color: var(--mf-muted);
    background: var(--mf-track);
}

/* --- Leerzustand ---------------------------------------------------------- */
.mf-empty {
    background: var(--mf-surface);
    border: 1px dashed var(--mf-line);
    border-radius: 22px;
    padding: 44px 24px;
    text-align: center;
}

.mf-empty-title {
    font-size: 17px;
    font-weight: 700;
}

.mf-empty-text {
    margin: 8px auto 0;
    max-width: 56ch;
    font-size: 14px;
    color: var(--mf-muted);
    line-height: 1.55;
    text-wrap: pretty;
}

/* --- Breakpoints ---------------------------------------------------------- */
@media (max-width: 700px) {
    /* Die Status-Plakette bekommt eine eigene Zeile unter dem Betreff, sonst quetscht sie den Text
       zu einer schmalen Spalte.
       Den Umbruch macht ein leeres Element mit 100 % Basis, nicht die Plakette selbst: eine
       `flex-basis: 100%` an ihr wuerde von `max-width: fit-content` wieder auf ihre echte Breite
       geklemmt, BEVOR der Zeilenumbruch berechnet wird - sie bliebe also doch oben stehen. Ohne
       `max-width` waere sie dafuer ueber die ganze Breite gezogen und saehe aus wie ein Knopf. */
    .mf-item::after {
        content: "";
        flex: 1 0 100%;
        order: 2;
        height: 0;
    }

    .mf-status {
        order: 3;
        margin-left: 54px;
    }

    /* Ohne das bleibt die 320-px-Basis breiter als der Rest der Zeile und die Icon-Kachel steht
       allein auf einer eigenen Zeile. */
    .mf-item-body {
        flex: 1 1 0;
    }
}

@media (max-width: 600px) {
    .mf-title {
        font-size: 26px;
    }

    .mf-subtitle {
        font-size: 19px;
    }

    .mf-actions {
        grid-template-columns: 1fr;
        margin-bottom: 24px;
    }

    .mf-action {
        padding: 18px;
    }

    .mf-item {
        padding: 16px;
    }

    /* Die Filterleiste scrollt seitlich statt umzubrechen - fuenf Pillen untereinander waeren ein
       Menue, kein Umschalter. */
    .mf-filters {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .mf-filters::-webkit-scrollbar {
        display: none;
    }

    .mf-filter {
        flex: none;
    }

    .mf-empty {
        padding: 32px 18px;
    }
}

@media (max-width: 460px) {
    .mf-status {
        margin-left: 0;
    }
}

/* ============================================================================
   TASK-344: Friend Challenges nach dem Design "Challenges"
   (Designvorlagen/lerniq-kategorieauswahl-redesign/project/Challenges.dc.html).
   Layout, Typo-Skala, Radien und Abstaende aus dem Entwurf, Farben aus den
   MudBlazor-Palettenvariablen - der Entwurf ist hell-only. Mobil zuerst.
   ============================================================================ */
.ch {
    --ch-surface: var(--mud-palette-surface);
    --ch-line: var(--mud-palette-lines-default);
    --ch-text: var(--mud-palette-text-primary);
    --ch-muted: var(--mud-palette-text-secondary);
    --ch-track: var(--mud-palette-background-gray);

    max-width: 1240px;
    margin: 0 auto;
    color: var(--ch-text);
}

/* --- Kopf ----------------------------------------------------------------- */
.ch-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.ch-head-text {
    min-width: 0;
}

.ch-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ch-muted);
    font-weight: 700;
}

.ch-title {
    margin: 6px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.ch-headline {
    margin-top: 8px;
    font-size: 14px;
    color: var(--ch-muted);
}

.ch-xp-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--ch-surface);
    border: 1px solid var(--ch-line);
    border-radius: 999px;
    padding: 9px 16px;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--ch-text);
    white-space: nowrap;
}

/* Gold traegt als Flaeche, aber nicht als Textfarbe (TASK-247) - als Icon auf hellem Grund
   deshalb mit der Textfarbe abgemischt. */
.ch-xp-icon {
    color: color-mix(in srgb, var(--mud-palette-warning) 60%, var(--mud-palette-text-primary));
}

/* --- Zwei Spalten --------------------------------------------------------- */
.ch-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}

.ch-create {
    flex: 1 1 420px;
    min-width: 0;
}

.ch-list-column {
    flex: 1 1 460px;
    min-width: 0;
}

.ch-card {
    background: var(--ch-surface);
    border: 1px solid var(--ch-line);
    border-radius: 22px;
    padding: 24px;
}

/* --- Formularfelder ------------------------------------------------------- */
.ch-field-label {
    margin-top: 22px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ch-text);
}

.ch-field-label-inline {
    margin-top: 0;
}

.ch-hint {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ch-muted);
    line-height: 1.5;
    text-wrap: pretty;
}

.ch-search,
.ch-select {
    margin-top: 10px;
}

/* --- Gegner:in ------------------------------------------------------------ */
.ch-opponents {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ch-opponent {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px 9px 10px;
    border: 1px solid var(--ch-line);
    background: var(--ch-surface);
    border-radius: 999px;
    color: var(--ch-text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ch-opponent:hover {
    border-color: var(--mud-palette-primary);
}

.ch-opponent-on {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.ch-opponent-avatar {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ch-tint, var(--mud-palette-primary));
    background: color-mix(in srgb, var(--ch-tint, var(--mud-palette-primary)) 16%, transparent);
}

.ch-opponent-name {
    font-size: 13.5px;
    font-weight: 700;
}

.ch-opponent-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-lines-default);
    flex: none;
}

.ch-opponent-dot-on {
    background: var(--mud-palette-success);
}

/* --- Anzahl Fragen -------------------------------------------------------- */
.ch-counts {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.ch-count {
    flex: 1;
    padding: 12px 0;
    border: 1px solid var(--ch-line);
    background: var(--ch-surface);
    color: var(--ch-text);
    border-radius: 12px;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.ch-count:hover {
    border-color: var(--mud-palette-primary);
}

.ch-count-on {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* --- Einsatz -------------------------------------------------------------- */
.ch-stake-box {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--ch-track);
    border: 1px solid var(--ch-line);
    border-radius: 14px;
    padding: 14px 16px;
}

.ch-stake-text {
    min-width: 0;
}

.ch-stake-title {
    font-size: 14px;
    font-weight: 700;
}

.ch-stake-hint {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--ch-muted);
    line-height: 1.45;
    text-wrap: pretty;
}

.ch-switch {
    flex: none;
    width: 50px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: var(--mud-palette-lines-default);
    cursor: pointer;
    padding: 3px;
    display: flex;
    justify-content: flex-start;
    transition: background-color 0.15s ease;
}

.ch-switch-on {
    background: var(--mud-palette-success);
    justify-content: flex-end;
}

.ch-switch-knob {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.ch-stake-detail {
    margin-top: 14px;
}

.ch-stake-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ch-stake-value {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    color: var(--ch-text);
}

.ch-range {
    margin-top: 12px;
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 6px;
    background: var(--ch-track);
    border: 1px solid var(--ch-line);
    outline: none;
}

.ch-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    border: 3px solid var(--mud-palette-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.ch-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    border: 3px solid var(--mud-palette-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.ch-range:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.ch-stake-explainer {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ch-muted);
    line-height: 1.5;
    text-wrap: pretty;
}

/* --- Absenden ------------------------------------------------------------- */
/* Der helle Innenrand ist kein Zierrat: --app-ink ist in BEIDEN Themes derselbe Wert (TASK-248)
   und verschwaemme im Dark Mode sonst mit dem Kartengrund. */
.ch-send {
    margin-top: 20px;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 14px;
    background: var(--app-ink);
    color: var(--app-ink-on);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-ink-on) 20%, transparent);
    transition: background-color 0.15s ease;
}

.ch-send:hover:not(:disabled) {
    background: var(--app-ink-hover);
}

.ch-send-off,
.ch-send:disabled {
    background: var(--ch-track);
    color: var(--ch-muted);
    cursor: not-allowed;
    box-shadow: none;
}

/* --- Listenkopf und Filter ------------------------------------------------ */
.ch-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ch-subtitle {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ch-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ch-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--ch-line);
    border-radius: 999px;
    background: var(--ch-surface);
    color: var(--ch-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ch-filter:hover {
    border-color: var(--mud-palette-primary);
}

.ch-filter-on {
    background: var(--app-ink);
    border-color: var(--app-ink);
    color: var(--app-ink-on);
}

.ch-filter-count {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.7;
}

.ch-skeleton {
    border-radius: 18px;
}

/* --- Challenge-Karten ----------------------------------------------------- */
.ch-items {
    display: grid;
    gap: 10px;
}

.ch-item {
    background: var(--ch-surface);
    border: 1px solid var(--ch-line);
    border-radius: 18px;
    padding: 18px 20px;
}

.ch-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ch-item-body {
    min-width: 0;
}

.ch-item-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-wrap: pretty;
}

.ch-item-meta {
    margin-top: 5px;
    font-size: 13px;
    color: var(--ch-muted);
    text-wrap: pretty;
}

.ch-item-time {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ch-muted);
}

.ch-item-time span {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

.ch-item-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    flex: none;
}

.ch-status {
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
    color: var(--ch-muted);
    background: var(--ch-track);
}

.ch-status-pending {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}

.ch-status-accepted {
    color: var(--mud-palette-info);
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
}

.ch-status-finished {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.ch-stake-chip {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap;
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
}

/* --- Aktionen ------------------------------------------------------------- */
.ch-item-actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ch-btn {
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ch-btn-primary {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.ch-btn-primary:hover {
    background: var(--mud-palette-primary-darken);
}

.ch-btn-accept {
    background: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}

.ch-btn-accept:hover {
    background: var(--mud-palette-success-darken);
}

.ch-btn-ghost {
    background: var(--ch-surface);
    border-color: var(--ch-line);
    color: var(--ch-muted);
}

.ch-btn-ghost:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.ch-item-note {
    font-size: 12.5px;
    color: var(--ch-muted);
    text-wrap: pretty;
}

/* --- Leerzustand ---------------------------------------------------------- */
.ch-empty {
    background: var(--ch-surface);
    border: 1px dashed var(--ch-line);
    border-radius: 22px;
    padding: 40px 24px;
    text-align: center;
}

.ch-empty-title {
    font-size: 16px;
    font-weight: 700;
}

.ch-empty-text {
    margin: 6px auto 0;
    max-width: 48ch;
    font-size: 13.5px;
    color: var(--ch-muted);
    line-height: 1.55;
    text-wrap: pretty;
}

/* --- Breakpoints ---------------------------------------------------------- */
@media (max-width: 600px) {
    .ch-title {
        font-size: 26px;
    }

    .ch-subtitle {
        font-size: 19px;
    }

    .ch-card {
        padding: 18px;
    }

    .ch-item {
        padding: 16px;
    }

    /* Die Plaketten stehen ueber dem Titel statt rechts daneben - nebeneinander bleibt fuer den
       Namen der Gegner:in kaum Platz. */
    .ch-item-head {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 10px;
    }

    .ch-item-badges {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    /* Die Filterleiste scrollt seitlich statt umzubrechen - fuenf Pillen untereinander waeren ein
       Menue, kein Umschalter. */
    .ch-filters {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .ch-filters::-webkit-scrollbar {
        display: none;
    }

    .ch-filter {
        flex: none;
    }

    .ch-empty {
        padding: 32px 18px;
    }
}

@media (max-width: 460px) {
    /* Annehmen und Ablehnen teilen sich die Zeile zu gleichen Teilen. */
    .ch-item-actions .ch-btn {
        flex: 1 1 40%;
    }

    .ch-item-note {
        flex: 1 1 100%;
    }
}

/* =========================================================================
   Onboarding-Wizard - TASK-352
   Umgesetzt nach Designvorlagen/lerniq-kategorieauswahl-redesign/project/
   "Onboarding Lehrlinge.dc.html". Uebernommen sind Aufbau, Typo-Skala, Radien
   und Abstaende; die Farben kommen aus den MudBlazor-Palettenvariablen statt
   als Hex - der Entwurf ist hell-only und waere im Dark Mode ein weisser Block.
   ========================================================================= */

/* Der Dialog stellt Kopf, Koerper und Fuss selbst - MudBlazors eigene Polsterung
   wuerde den durchgehenden Trennstrich unterbrechen. */
.onb-dialog .mud-dialog-content {
    padding: 0;
    overflow: hidden;
}

.onb {
    /* Die Kategorie-Karten stammen aus FavoriteCategoryPicker und rechnen mit den
       --prof-*-Variablen. Hier stehen dieselben Werte wie unter .prof, damit es nur
       eine Definition der Kartenoptik gibt (gleiche Linie wie --app-ink bei .lb/.fa). */
    --prof-surface: var(--mud-palette-surface);
    --prof-line: var(--mud-palette-lines-default);
    --prof-text: var(--mud-palette-text-primary);
    --prof-muted: var(--mud-palette-text-secondary);
    --prof-track: var(--mud-palette-background-gray);

    --onb-line: var(--mud-palette-lines-default);
    --onb-muted: var(--mud-palette-text-secondary);

    display: flex;
    flex-direction: column;
    color: var(--mud-palette-text-primary);
}

/* --- Kopf ---------------------------------------------------------------- */

.onb-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid var(--onb-line);
}

.onb-head-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.onb-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--app-ink);
    color: var(--mud-palette-warning);
    font-size: 22px;
}

.onb-head-text {
    min-width: 0;
}

.onb-eyebrow {
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--onb-muted);
}

.onb-eyebrow-block {
    margin: 22px 0 10px;
}

.onb-title {
    margin: 2px 0 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.onb-steps {
    display: flex;
    align-items: center;
    gap: 6px;
}

.onb-step {
    width: 16px;
    height: 6px;
    border-radius: 6px;
    background: var(--onb-line);
    transition: width 0.2s ease, background 0.2s ease;
}

.onb-step.is-done {
    background: var(--app-ink);
}

.onb-step.is-current {
    width: 34px;
    background: var(--mud-palette-warning);
}

/* --- Koerper ------------------------------------------------------------- */

.onb-body {
    padding: 22px 26px 24px;
    /* Der Kopf bleibt beim Blaettern durch die Kategorien stehen; 64vh ist der Wert
       aus dem Entwurf und laesst auf einem 800px-Fenster Kopf und Fuss uebrig. */
    max-height: 64vh;
    overflow-y: auto;
}

.onb-lead {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
    max-width: 66ch;
    text-wrap: pretty;
}

.onb-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    text-wrap: pretty;
}

.onb-banner > i {
    flex: none;
    font-size: 21px;
    line-height: 1.2;
}

.onb-banner-success {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 26%, transparent);
    font-size: 14px;
    font-weight: 600;
    align-items: center;
}

.onb-banner-success > i {
    color: var(--mud-palette-success);
}

.onb-banner-info {
    margin-bottom: 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
}

.onb-banner-info > i {
    color: var(--mud-palette-primary);
}

/* Zahlen monospace mit tabellarischen Ziffern - Projektregel fuer Werte, hier der XP-Bonus. */
.onb-num {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.onb-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--prof-track);
    border: 1px solid var(--onb-line);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    text-wrap: pretty;
}

.onb-note > i {
    flex: none;
    font-size: 19px;
    color: var(--mud-palette-primary);
}

/* --- Schritt 1: Lehrjahr ------------------------------------------------- */

.onb-years {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.onb-year {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 132px;
    /* Projektregel Touch: mindestens 44px hoch. */
    min-height: 52px;
    padding: 14px 18px;
    border: 1.5px solid var(--onb-line);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
}

.onb-year > i {
    font-size: 18px;
}

.onb-year:hover {
    border-color: var(--mud-palette-primary);
}

.onb-year.is-picked {
    background: var(--app-ink);
    border-color: var(--app-ink);
    color: var(--app-ink-on);
}

.onb-year-hint {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--onb-muted);
}

.onb-year.is-picked .onb-year-hint {
    color: var(--app-ink-muted);
}

/* --- Schritt 2: Funktionen ----------------------------------------------- */

.onb-features {
    display: grid;
    gap: 12px;
}

.onb-feature {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--onb-line);
    border-radius: 18px;
    padding: 16px 18px;
    background: var(--mud-palette-surface);
}

.onb-feature-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
}

.onb-feature-name {
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.onb-feature-text {
    margin-top: 3px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--onb-muted);
    text-wrap: pretty;
}

/* --- Schritt 3: Tagesziel ------------------------------------------------ */

.onb-goals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.onb-goal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    min-height: 104px;
    padding: 18px;
    border: 1.5px solid var(--onb-line);
    border-radius: 18px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.onb-goal:hover {
    border-color: var(--mud-palette-primary);
}

.onb-goal.is-picked {
    border-color: var(--app-ink);
    background: var(--prof-track);
}

.onb-goal-value {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.onb-goal-note {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--onb-muted);
}

/* --- Schritt 4: Kategorien ----------------------------------------------- */

.onb-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.onb-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 0;
}

.onb-search > i {
    position: absolute;
    left: 13px;
    font-size: 17px;
    color: var(--onb-muted);
    pointer-events: none;
}

.onb-search input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 12px 14px 12px 40px;
    border: 1px solid var(--onb-line);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.onb-search input:focus {
    border-color: var(--mud-palette-primary);
}

.onb-chip-button {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 15px;
    border: 1px solid var(--onb-line);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.onb-chip-button:hover {
    border-color: var(--mud-palette-primary);
}

/* Gold traegt als Flaeche, nicht als Textfarbe (TASK-247) - auf hellem Grund
   abgemischt, sonst nur 1,8:1. */
.onb-chip-button > i {
    font-size: 17px;
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
}

/* --- Abschluss ----------------------------------------------------------- */

.onb-done {
    text-align: center;
    padding: 22px 0 12px;
}

.onb-done-mark {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto;
    border-radius: 26px;
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
    font-size: 38px;
}

.onb-done-title {
    margin: 20px 0 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.onb-done-text {
    margin: 10px auto 0;
    max-width: 52ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--onb-muted);
    text-wrap: pretty;
}

.onb-summary {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.onb-summary-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--onb-line);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 700;
}

/* --- Fuss ---------------------------------------------------------------- */

.onb-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 26px;
    border-top: 1px solid var(--onb-line);
    background: var(--prof-track);
}

.onb-foot-note {
    font-size: 13px;
    font-weight: 600;
    color: var(--onb-muted);
}

.onb-foot-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.onb-button-ghost,
.onb-button-primary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.onb-button-ghost {
    border: 1px solid var(--onb-line);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.onb-button-ghost:hover {
    border-color: var(--mud-palette-primary);
}

.onb-button-primary {
    border: none;
    padding: 12px 22px;
    background: var(--app-ink);
    color: var(--app-ink-on);
    font-weight: 800;
}

.onb-button-primary:hover {
    background: var(--app-ink-hover);
}

.onb-button-ghost:disabled,
.onb-button-primary:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 600px) {
    .onb-head,
    .onb-body,
    .onb-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Der Fortschritt rutscht unter die Ueberschrift, statt sie auf ein paar
       Zeichen zusammenzudruecken. */
    .onb-head-main {
        flex: 1 1 100%;
    }

    .onb-year {
        flex: 1 1 100%;
    }

    /* Die Fussnote traegt nichts, was die Knoepfe nicht schon sagen - sie darf
       ihnen aber auch nicht die Breite nehmen. */
    .onb-foot-note {
        flex: 1 1 100%;
    }

    .onb-foot-actions {
        flex: 1 1 100%;
    }

    .onb-foot-actions .onb-button-primary {
        flex: 1 1 auto;
        justify-content: center;
    }
}

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

/* =========================================================================
   Registrierung - TASK-354
   Umgesetzt nach Designvorlagen/lerniq-kategorieauswahl-redesign/project/
   "Registrierung.dc.html". Uebernommen sind Aufbau, Typo-Skala, Radien und
   Abstaende; die Farben kommen aus den MudBlazor-Palettenvariablen statt als
   Hex - der Entwurf ist hell-only und waere im Dark Mode ein weisser Block.
   Die dunkle Nutzen-Karte teilt sich --app-ink mit Leaderboard, Fehler-Arena
   und Onboarding (siehe die gemeinsame Definition weiter oben).
   ========================================================================= */

.reg {
    --reg-surface: var(--mud-palette-surface);
    --reg-line: var(--mud-palette-lines-default);
    --reg-muted: var(--mud-palette-text-secondary);
    --reg-radius: 26px;

    /* Der Entwurf legt die beiden Karten auf einen dunklen Grund. In der App sitzt die Seite im
       Inhaltsbereich von MainLayout - der Grund ist deshalb eine eigene Flaeche mit Radius statt
       eines randlosen Hintergrunds, sonst muesste die Seite die Polsterung des Layouts aushebeln. */
    background:
        radial-gradient(900px 520px at 50% -18%,
            color-mix(in srgb, var(--app-ink) 72%, #0f141b) 0%,
            #131920 62%,
            #0f141b 100%);
    border-radius: var(--reg-radius);
    padding: 30px 16px 36px;
    display: grid;
    place-items: start center;
}

.reg-shell {
    width: 100%;
    min-width: 0;
    max-width: 1060px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 18px;
}

/* --- Linke Nutzen-Karte -------------------------------------------------- */

.reg-aside {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 340px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 28px 26px;
    border-radius: var(--reg-radius);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--app-ink) 88%, #000) 0%,
        var(--app-ink) 55%,
        color-mix(in srgb, var(--app-ink) 70%, #000) 100%);
    color: var(--app-ink-on);
    box-shadow: 0 34px 90px rgba(8, 12, 18, .45);
}

.reg-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reg-brand-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .12);
    color: var(--mud-palette-warning);
    font-size: 22px;
}

.reg-brand-name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.reg-aside-title {
    margin: 0;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.025em;
    text-wrap: pretty;
}

.reg-aside-lead {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--app-ink-muted);
    text-wrap: pretty;
}

.reg-perks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reg-perk {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 13.5px;
    line-height: 1.5;
    text-wrap: pretty;
}

.reg-perk > i {
    flex: none;
    margin-top: 1px;
    font-size: 19px;
    color: var(--mud-palette-warning);
}

.reg-bonus {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--mud-palette-warning);
    color: var(--mud-palette-warning-text);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
}

.reg-bonus > i {
    flex: none;
    font-size: 24px;
}

/* Projektregel: Werte immer monospace mit tabellarischen Ziffern. */
.reg-num {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* --- Rechte Formularkarte ------------------------------------------------ */

.reg-card {
    flex: 1 1 460px;
    min-width: 0;
    border-radius: var(--reg-radius);
    background: var(--reg-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 34px 90px rgba(8, 12, 18, .45);
    overflow: hidden;
}

.reg-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 22px 30px 18px;
    border-bottom: 1px solid var(--reg-line);
}

.reg-card-title {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.reg-card-alt {
    font-size: 13px;
    color: var(--reg-muted);
}

.reg-card-alt a {
    font-weight: 700;
}

.reg-body {
    padding: 22px 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- Felder -------------------------------------------------------------- */

.reg-field {
    min-width: 0;
}

.reg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.reg-row > .reg-field,
.reg-row > .reg-select {
    flex: 1 1 180px;
    min-width: 0;
}

.reg-eyebrow {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--reg-muted);
}

.reg-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.reg-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 12px 14px;
    border: 1.5px solid var(--reg-line);
    border-radius: 12px;
    background: var(--reg-surface);
    color: var(--mud-palette-text-primary);
    font-size: 14.5px;
    outline: none;
}

.reg-input:focus {
    border-color: var(--mud-palette-primary);
}

.reg-input:disabled,
.reg-input[readonly] {
    background: var(--mud-palette-background-gray);
    color: var(--reg-muted);
}

/* Blazors InputText/InputSelect setzen "invalid" selbst, sobald das Feld einmal geprueft wurde -
   der rote Rand haengt daran und braucht keinen eigenen Zustand in der Seite. */
.reg-input.invalid {
    border-color: var(--mud-palette-error);
}

.reg-select {
    appearance: auto;
}

.reg-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.reg-input-icon {
    padding-right: 44px;
}

.reg-input-adornment {
    position: absolute;
    right: 14px;
    font-size: 18px;
    color: var(--reg-muted);
    pointer-events: none;
}

.reg-input-button {
    position: absolute;
    right: 6px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: none;
    color: var(--reg-muted);
    font-size: 18px;
    cursor: pointer;
}

.reg-input-button:hover {
    background: var(--mud-palette-action-default-hover);
}

.reg-hint {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--reg-muted);
    text-wrap: pretty;
}

/* Der Hinweis unter dem Namenspaar gehoert zu beiden Feldern und sitzt deshalb ausserhalb der
   Zeile - dort haette er sonst den doppelten Abstand der Flex-Luecke ueber sich. */
.reg-hint-tight {
    margin-top: -8px;
}

.reg-hint-ok {
    color: var(--mud-palette-success);
}

.reg-hint-bad {
    color: var(--mud-palette-error);
}

.reg-error {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--mud-palette-error);
}

.reg-error-row {
    margin-top: 0;
}

/* --- Art des Kontos ------------------------------------------------------ */

.reg-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.reg-kind {
    flex: 1 1 150px;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Touch-Ziel: der Entwurf setzt 56px, das ist zugleich die Projektvorgabe. */
    min-height: 56px;
    padding: 12px 14px;
    text-align: left;
    border: 1.5px solid var(--reg-line);
    border-radius: 14px;
    background: var(--reg-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.reg-kind:hover:not(:disabled) {
    border-color: var(--app-ink);
}

.reg-kind > i {
    flex: none;
    font-size: 20px;
    color: var(--reg-muted);
}

.reg-kind-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.reg-kind-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.reg-kind-note {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--reg-muted);
}

.reg-kind.is-on {
    border-color: var(--app-ink);
    background: color-mix(in srgb, var(--app-ink) 7%, transparent);
}

/* Der Entwurf faerbt die Beschriftung der gewaehlten Karte tiefblau. Das traegt nur auf weissem
   Grund: --app-ink ist in BEIDEN Themes derselbe Wert, im Dark Mode stuende dort Navy auf
   Anthrazit. Auch abgemischt liest sich die gewaehlte Karte dann dunkler als die uebrigen - also
   ausgerechnet wie die ausgeschaltete. Die Auswahl tragen deshalb Rahmen, Tonung und Icon, die
   Beschriftung behaelt den vollen Kontrast. Farbe traegt damit ohnehin nicht allein. */
.reg-kind.is-on > i {
    color: var(--mud-palette-primary);
}

/* --- Passwort-Kriterien -------------------------------------------------- */

.reg-criteria {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 13px 15px;
    border: 1px solid var(--reg-line);
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
}

.reg-criterion {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--reg-muted);
}

.reg-criterion > i {
    font-size: 16px;
}

.reg-criterion.is-met {
    color: var(--mud-palette-success);
}

.reg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Hinweise und Banner ------------------------------------------------- */

.reg-note {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.5;
    text-wrap: pretty;
}

.reg-note > i {
    flex: none;
    font-size: 17px;
    color: var(--mud-palette-primary);
}

.reg-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 13.5px;
    line-height: 1.55;
    text-wrap: pretty;
}

.reg-banner > i {
    flex: none;
    font-size: 20px;
    line-height: 1.2;
}

.reg-banner-success {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}

.reg-banner-success > i {
    color: var(--mud-palette-success);
}

.reg-banner-info {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.reg-banner-info > i {
    color: var(--mud-palette-primary);
}

.reg-banner-warning {
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 40%, transparent);
}

/* Gold traegt als Flaeche, nicht als Textfarbe (TASK-247) - als Icon auf hellem Grund wird es
   deshalb mit der Textfarbe abgemischt. */
.reg-banner-warning > i {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
}

.reg-banner-error {
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 28%, transparent);
    color: var(--mud-palette-error);
}

.reg-banner-error > i {
    color: var(--mud-palette-error);
}

/* --- Zustimmungen -------------------------------------------------------- */

.reg-consents {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--reg-line);
}

.reg-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 14px 15px;
    text-align: left;
    border: 1.5px solid var(--reg-line);
    border-radius: 14px;
    background: var(--reg-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
}

.reg-consent:hover {
    border-color: var(--app-ink);
}

/* Das div bringt keinen Fokusring mit - der muss hier stehen, sonst ist die Zustimmung mit der
   Tastatur unsichtbar bedienbar. */
.reg-consent:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.reg-consent.is-on {
    border-color: var(--app-ink);
    background: color-mix(in srgb, var(--app-ink) 5%, transparent);
}

.reg-consent-box {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1.5px solid var(--reg-line);
    border-radius: 7px;
    background: var(--reg-surface);
    /* Der Haken sitzt immer im Kasten und wird nur sichtbar - so springt die Zeile beim
       Umschalten nicht. */
    color: transparent;
    font-size: 14px;
}

.reg-consent.is-on .reg-consent-box {
    border-color: var(--app-ink);
    background: var(--app-ink);
    color: var(--app-ink-on);
}

.reg-consent-text {
    font-size: 13.5px;
    line-height: 1.55;
    text-wrap: pretty;
}

/* TASK-366: MudBlazor setzt auf dem ELEMENT-Selektor `a { color: var(--mud-palette-text-primary) }`
   und `a { text-decoration: none }`. Ein Link ohne eigene Klassenregel ist dadurch von Fliesstext
   nicht zu unterscheiden - gleiche Fehlerklasse wie die globale `button`-Regel aus TASK-358.
   Ausgerechnet hier ist das fatal: der Link ist der einzige Weg zum Lesedialog, und ohne ihn
   bestaetigt man einen Text, den man gar nicht aufrufen kann.
   Farbe UND Unterstreichung, weil Farbe nie allein tragen darf. */
.reg-consent-text a,
.legal-section-text a,
.legal-list a {
    color: var(--mud-palette-primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.reg-consent-text a:hover,
.legal-section-text a:hover,
.legal-list a:hover {
    text-decoration-thickness: 2px;
}

/* --- Knoepfe und Fuss ---------------------------------------------------- */

.reg-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.reg-button-primary {
    border: none;
    background: var(--app-ink);
    color: var(--app-ink-on);
}

.reg-button-primary:hover:not(:disabled) {
    background: var(--app-ink-hover);
}

.reg-button-ghost {
    border: 1px solid var(--reg-line);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-weight: 700;
}

.reg-button-ghost:hover {
    border-color: var(--app-ink);
}

.reg-button:disabled {
    opacity: .6;
    cursor: default;
}

.reg-submit {
    min-height: 50px;
    padding: 14px 22px;
    border-radius: 13px;
    font-size: 15px;
}

.reg-foot-note {
    font-size: 12px;
    line-height: 1.55;
    color: var(--reg-muted);
    text-align: center;
    text-wrap: pretty;
}

/* --- Lese-Dialog fuer Datenschutz und Nutzungsbedingungen ---------------- */

/* Dieselben lokalen Variablen wie unter .reg: der Dialog rendert im Overlay und erbt sie nicht. */
.legal-dialog {
    --reg-surface: var(--mud-palette-surface);
    --reg-line: var(--mud-palette-lines-default);
    --reg-muted: var(--mud-palette-text-secondary);
}

.legal-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.legal-head-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
    font-size: 20px;
}

.legal-head-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.legal-head-note {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.legal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.legal-draft-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent);
    font-size: 13px;
    line-height: 1.55;
    text-wrap: pretty;
}

.legal-draft-note > i {
    flex: none;
    font-size: 19px;
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
}

.legal-section-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.legal-section-text {
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

/* TASK-362: Aufzaehlungen in den Rechtstexten. Eigene Klasse statt eines Selektors auf ".legal-section
   ul", weil MudBlazor Listen global zurecktrimmt (Reset auf margin/padding) - ein unbeklasster <ul>
   stuende hier ohne Einzug und ohne Punkte da. */
.legal-list {
    margin: 6px 0 0;
    padding-left: 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    list-style: disc;
    text-wrap: pretty;
}

.legal-list li {
    margin-top: 4px;
}

/* TASK-362: Nachhol-Fenster. Der Abmelde-Weg steht sichtbar, aber leise - er ist der Ausweg fuer
   alle, die nicht zustimmen wollen, und nicht die angebotene Handlung. */
.legal-catchup-out {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.legal-catchup-out form {
    display: contents;
}

.legal-catchup-link {
    /* MudBlazor setzt auf dem Element-Selektor "button" ein zentrierendes Flex-Layout (TASK-358) -
       hier wird daraus ein Textlink, also alles zuruecksetzen statt sich auf Standardwerte zu
       verlassen. */
    display: inline;
    align-items: baseline;
    justify-content: flex-start;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* --- Mobil --------------------------------------------------------------- */

@media (max-width: 760px) {
    .reg {
        /* Auf dem Handy nimmt die Karte ohnehin die volle Breite - der dunkle Grund waere dort nur
           ein schmaler Rahmen und kostet Platz. */
        padding: 0;
        background: none;
        border-radius: 0;
    }

    .reg-aside {
        max-width: none;
    }

    .reg-card-head,
    .reg-body {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 420px) {
    .reg-kind {
        flex: 1 1 100%;
    }
}

/* TASK-354: dieselben Rechtstexte auf einer eigenen Seite (/datenschutz,
   /nutzungsbedingungen). Der Dialog bringt seine Abstaende ueber .legal-body mit; auf der Seite
   sitzt der Text in einem MudPaper und braucht sie hier. */
.legal-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    --reg-line: var(--mud-palette-lines-default);
}

/* ============================================================================
   Trainer-Bereich - TASK-356
   Umgesetzt nach Designvorlagen/lerniq-kategorieauswahl-redesign/project/
   "Trainer-Dashboard.dc.html". Uebernommen sind Aufbau (Uebersicht mit
   Kennzahlen + Bereichskacheln, danach je Bereich Zurueck-Knopf und
   Bereichs-Chips), Typo-Skala, Radien und Abstaende.

   Die Farben kommen aus den MudBlazor-Palettenvariablen statt als Hex aus dem
   Entwurf - der ist hell-only und waere im Dark Mode ein weisser Block. Einzige
   Ausnahme sind die sechs Bereichsfarben (--tr-tile-tone): sie unterscheiden die
   Kacheln voneinander und sind in beiden Themes lesbar, gleiche Abwaegung wie
   bei den Dashboard-Kacheln (TASK-230).

   Die dunklen Flaechen teilen sich --app-ink mit Leaderboard, Fehler-Arena,
   Onboarding und Registrierung (gemeinsame Definition weiter oben).
   ============================================================================ */

/* Der Vorlagen-Assistent (.exw) haengt im Dialog-Overlay und damit ausserhalb von .tr.
   Er teilt sich die Tokens, damit .tr-btn, .tr-chip und .tr-status dort aufloesen -
   eine zweite Kopie waere die Stelle, an der beide auseinanderlaufen. */
.tr,
.exw {
    --tr-surface: var(--mud-palette-surface);
    --tr-line: var(--mud-palette-lines-default);
    --tr-text: var(--mud-palette-text-primary);
    --tr-muted: var(--mud-palette-text-secondary);
    --tr-inset: var(--mud-palette-background-gray);
    --tr-mono: Consolas, "Cascadia Mono", "Courier New", monospace;
    --tr-radius: 22px;

    max-width: 1240px;
    margin: 0 auto;
    color: var(--tr-text);
}

/* Gold traegt als Flaeche, nicht als Textfarbe (TASK-247): #f5b52c hat auf hellem
   Grund nur 1,8:1. Ueberall, wo der Warnton als Text oder Icon steht, wird er mit
   der Textfarbe gemischt - das dunkelt im Light Mode ab und hellt im Dark Mode auf. */
.tr-tone-warn {
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--tr-text));
}

.tr-tone-ok { color: var(--mud-palette-success); }
.tr-tone-bad { color: var(--mud-palette-error); }
.tr-tone-info { color: var(--mud-palette-primary); }
.tr-tone-muted { color: var(--tr-muted); }

/* --- Kopf ----------------------------------------------------------------- */

.tr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.tr-eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-muted);
    font-weight: 700;
}

.tr-title {
    margin: 6px 0 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.tr-sub {
    margin-top: 8px;
    font-size: 14px;
    color: var(--tr-muted);
}

.tr-head-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- Knoepfe -------------------------------------------------------------- */

.tr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.tr-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.tr-btn--ink {
    background: var(--app-ink);
    color: var(--app-ink-on);
    /* --app-ink ist in BEIDEN Themes derselbe Wert - ohne den hellen Innenrand
       verschwimmt der Knopf im Dark Mode mit der Kartenflaeche (wie bei den Freunden,
       TASK-339, und Mein Feedback, TASK-342). */
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-ink-on) 20%, transparent);
}

.tr-btn--ink:hover:not(:disabled) { background: var(--app-ink-hover); }

.tr-btn--ghost {
    background: var(--tr-surface);
    color: var(--tr-text);
    border-color: var(--tr-line);
}

.tr-btn--ghost:hover:not(:disabled) { border-color: var(--app-ink); }

.tr-btn--square { border-radius: 14px; }

.tr-btn--danger {
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 32%, transparent);
    color: var(--mud-palette-error);
}

.tr-btn--success {
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 32%, transparent);
    color: var(--mud-palette-success);
}

.tr-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 14px;
    background: var(--tr-inset);
    border: 1px solid var(--tr-line);
    color: var(--tr-text);
    cursor: pointer;
}

.tr-iconbtn:hover { border-color: var(--app-ink); }

/* --- Kennzahlen-Karten der Uebersicht ------------------------------------- */

.tr-alerts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

/* MudBlazor setzt eine globale button-Regel mit align-items:center und
   justify-content:center (MudBlazor.min.css). Sie schlaegt ueberall dort durch, wo eine eigene
   Flex-Schaltflaeche sich auf die CSS-Standardwerte verlaesst - Inhalte stehen dann zentriert
   statt linksbuendig. Jede Schaltflaeche hier setzt beide Werte deshalb ausdruecklich. */
.tr-alert {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    min-height: 132px;
    text-align: left;
    padding: 20px 22px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-left: 4px solid var(--tr-alert-tone, var(--mud-palette-primary));
    border-radius: var(--tr-radius);
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

.tr-alert:hover { border-color: var(--app-ink); }

.tr-alert-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tr-alert-label {
    font-size: 12px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tr-muted);
    font-weight: 700;
}

.tr-alert-figure {
    margin-top: 8px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.tr-alert-value {
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 34px;
    letter-spacing: -0.03em;
}

.tr-alert-unit {
    font-size: 13px;
    color: var(--tr-muted);
    font-weight: 600;
}

.tr-alert-detail {
    margin-top: auto;
    font-size: 13px;
    color: var(--tr-muted);
    font-weight: 600;
    text-wrap: pretty;
}

/* --- Bereichskacheln ------------------------------------------------------ */

.tr-section-label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tr-muted);
    font-weight: 700;
    margin-bottom: 12px;
}

.tr-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.tr-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
    padding: 22px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

.tr-tile:hover { border-color: var(--app-ink); }

.tr-tile-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tr-tile-icon {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--tr-tile-tone) 14%, transparent);
    color: var(--tr-tile-tone);
}

.tr-tile-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.tr-tile-meta {
    margin-top: 2px;
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--tr-muted);
}

.tr-tile-hint {
    font-size: 13px;
    color: var(--tr-muted);
    line-height: 1.5;
    text-wrap: pretty;
}

.tr-tile-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
    color: var(--mud-palette-error);
    font-size: 12px;
    font-weight: 700;
}

/* --- Karten --------------------------------------------------------------- */

.tr-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.tr-card {
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    padding: 22px 24px;
    min-width: 0;
}

.tr-card--flex {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tr-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.tr-card-title {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.tr-card-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.tr-stack {
    display: grid;
    gap: 10px;
}

.tr-stack--wide { gap: 16px; }

/* --- Personen-Zeile ------------------------------------------------------- */

.tr-person {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    min-height: 56px;
    padding: 12px 14px;
    text-align: left;
    background: var(--tr-inset);
    border: 1px solid var(--tr-line);
    border-radius: 16px;
    font-family: inherit;
    color: inherit;
}

button.tr-person { cursor: pointer; }
button.tr-person:hover { border-color: var(--app-ink); }
button.tr-person.is-active { border-color: var(--app-ink); }

/* Ein Versuch ohne Abgabe hat kein Ergebnis - die Zeile bleibt sichtbar, ist aber nicht
   anklickbar, statt beim Klick nichts zu tun. */
button.tr-person:disabled { cursor: default; opacity: .65; }
button.tr-person:disabled:hover { border-color: var(--tr-line); }

.tr-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--tr-text);
    font-size: 12.5px;
    font-weight: 800;
}

.tr-person-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Diese vier sind bewusst <span>: die Zeile ist teils ein <button>, und ein <div> darin waere
   ungueltiges HTML. Ohne display:block laufen Name und Untertitel in einer Zeile zusammen. */
.tr-person-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.tr-person-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--tr-muted);
}

.tr-person-right {
    flex: none;
    text-align: right;
}

.tr-person-pct {
    display: block;
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

.tr-person-idle {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--tr-muted);
}

/* --- Fortschrittsbalken --------------------------------------------------- */

.tr-bar {
    margin-top: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tr-inset);
    overflow: hidden;
}

.tr-bar--thin { height: 7px; }

.tr-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--tr-bar-tone, var(--mud-palette-primary));
}

.tr-barline {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.tr-barline-label {
    font-size: 13.5px;
    font-weight: 700;
    min-width: 0;
}

.tr-barline-value {
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--tr-muted);
}

.tr-barline-note {
    margin-top: 7px;
    font-size: 12px;
    color: var(--tr-muted);
}

/* --- Hinweis-Kaesten ------------------------------------------------------ */

.tr-weak {
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 32%, transparent);
    border-radius: 18px;
    padding: 18px;
}

.tr-weak-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
}

.tr-weak-figure {
    margin-top: 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.tr-weak-pct {
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 26px;
}

.tr-weak-note {
    font-size: 12.5px;
    color: var(--tr-muted);
    font-weight: 600;
}

.tr-linkrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 14px 16px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: 16px;
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.tr-linkrow:hover { border-color: var(--app-ink); }

.tr-linkrow--last { margin-top: auto; }

.tr-linkrow-main {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
}

.tr-linkrow-end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.tr-count {
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: color-mix(in srgb, var(--mud-palette-primary) 75%, var(--tr-text));
}

/* --- Bereichs-Kopf und Navigation ----------------------------------------- */

.tr-area-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.tr-back {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    color: var(--tr-text);
    cursor: pointer;
}

.tr-back:hover { border-color: var(--app-ink); }

.tr-area-title {
    margin: 4px 0 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

/* Chip-Leisten scrollen seitlich statt umzubrechen - untereinander waeren sie ein
   Menue, kein Umschalter (gleiche Regel wie in Verlauf und Meine Aufgaben). */
.tr-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 14px;
    margin-bottom: 14px;
    scrollbar-width: thin;
}

.tr-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 16px;
    scrollbar-width: thin;
}

.tr-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--tr-line);
    background: var(--tr-surface);
    color: var(--tr-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.tr-chip:hover { border-color: var(--app-ink); }

.tr-chip.is-active {
    background: var(--app-ink);
    border-color: color-mix(in srgb, var(--app-ink-on) 22%, var(--app-ink));
    color: var(--app-ink-on);
}

.tr-chip-count {
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    opacity: .7;
}

/* --- Werkzeugleisten ------------------------------------------------------ */

.tr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tr-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.tr-note {
    font-size: 14px;
    color: var(--tr-muted);
    max-width: 720px;
    text-wrap: pretty;
}

.tr-empty {
    background: var(--tr-surface);
    border: 1px dashed var(--tr-line);
    border-radius: var(--tr-radius);
    padding: 26px 22px;
    text-align: center;
    color: var(--tr-muted);
    font-size: 14px;
    text-wrap: pretty;
}

.tr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.tr-rows {
    display: grid;
    gap: 12px;
}

/* --- Vorlagen-Zeile ------------------------------------------------------- */

.tr-tpl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    padding: 20px 22px;
}

.tr-tpl-main {
    flex: 1 1 240px;
    min-width: 0;
}

.tr-tpl-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tr-tpl-name {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.tr-tpl-sub {
    margin-top: 8px;
    font-size: 13px;
    color: var(--tr-muted);
}

.tr-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.tr-fact-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tr-muted);
    font-weight: 700;
}

.tr-fact-value {
    margin-top: 4px;
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

.tr-tpl-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.tr-version {
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    color: var(--tr-muted);
}

/* --- Status-Plaketten ----------------------------------------------------- */

.tr-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: color-mix(in srgb, var(--tr-status-tone, var(--mud-palette-text-secondary)) 14%, transparent);
    color: color-mix(in srgb, var(--tr-status-tone, var(--mud-palette-text-secondary)) 70%, var(--tr-text));
}

/* --- Pruefungs-Karte ------------------------------------------------------ */

.tr-exam {
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    padding: 22px;
    min-width: 0;
}

.tr-exam-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tr-exam-title {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    min-width: 0;
}

.tr-exam-sub {
    margin-top: 8px;
    font-size: 13px;
    color: var(--tr-muted);
}

.tr-exam-stats {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--tr-muted);
}

.tr-exam-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tr-exam-actions .tr-btn { flex: 1 1 auto; }

/* --- Zwei-Spalten-Ansicht mit Detail -------------------------------------- */

.tr-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

.tr-split.has-detail {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.tr-pane {
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    padding: 14px;
    display: grid;
    gap: 8px;
    min-width: 0;
}

.tr-detail {
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    padding: 22px;
    position: sticky;
    top: 20px;
    min-width: 0;
}

.tr-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.tr-detail-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.tr-detail-sub {
    margin-top: 5px;
    font-size: 13px;
    color: var(--tr-muted);
}

.tr-close {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--tr-inset);
    border: 1px solid var(--tr-line);
    color: var(--tr-text);
    cursor: pointer;
}

.tr-close:hover { border-color: var(--app-ink); }

.tr-factgrid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.tr-factbox {
    background: var(--tr-inset);
    border: 1px solid var(--tr-line);
    border-radius: 14px;
    padding: 14px;
}

.tr-factbox-value {
    margin-top: 6px;
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 15px;
}

.tr-detail-label {
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tr-muted);
    font-weight: 700;
}

/* --- Fragenpool ----------------------------------------------------------- */

.tr-pool-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    text-align: left;
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: 16px;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

.tr-pool-item:hover { border-color: var(--app-ink); }
.tr-pool-item.is-active { background: var(--tr-inset); border-color: var(--app-ink); }

.tr-pool-text {
    display: block;
    overflow-wrap: anywhere; /* TASK-432 */
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}

.tr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.tr-tag {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--tr-inset);
    color: var(--tr-muted);
    font-size: 11px;
    font-weight: 700;
}

.tr-tag--own {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    color: color-mix(in srgb, var(--mud-palette-primary) 75%, var(--tr-text));
}

.tr-tag--shared {
    background: color-mix(in srgb, var(--mud-palette-tertiary) 20%, transparent);
    color: color-mix(in srgb, var(--mud-palette-tertiary) 70%, var(--tr-text));
}

.tr-answer {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--tr-inset);
    border: 1px solid var(--tr-line);
    font-size: 13.5px;
}

.tr-answer.is-correct {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
    font-weight: 700;
}

.tr-detail-actions {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--tr-line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Aufgaben-Zeile ------------------------------------------------------- */

.tr-task {
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-left: 4px solid var(--tr-task-tone, var(--mud-palette-primary));
    border-radius: var(--tr-radius);
    padding: 20px 22px;
}

.tr-task-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}

.tr-task-main {
    flex: 1 1 220px;
    min-width: 0;
}

.tr-task-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.tr-task-title {
    margin-top: 10px;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.tr-task-sub {
    margin-top: 5px;
    font-size: 13px;
    color: var(--tr-muted);
}

.tr-task-progress {
    flex: 1 1 200px;
    min-width: 0;
}

.tr-task-open {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
}

.tr-task-actions {
    flex: none;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tr-task-detail {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--tr-line);
    display: grid;
    gap: 6px;
    font-size: 13px;
}

/* --- Gruppen -------------------------------------------------------------- */

.tr-code {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--tr-inset);
    border: 1px dashed var(--tr-line);
    border-radius: 14px;
}

.tr-code-value {
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    letter-spacing: 0.08em;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tr-code .tr-iconbtn {
    margin-left: auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--tr-surface);
}

/* --- Formular-Karte (Zuweisen / Turnier anlegen) -------------------------- */

.tr-form {
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-radius);
    padding: 22px 24px;
    margin-bottom: 18px;
    max-width: 720px;
}

.tr-form-title {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

/* --- Mobil ---------------------------------------------------------------- */

@media (max-width: 700px) {
    .tr-title { font-size: 27px; }
    .tr-area-title { font-size: 23px; }
    .tr-card,
    .tr-form,
    .tr-tpl,
    .tr-exam,
    .tr-task { padding: 18px; }
    .tr-head-actions { width: 100%; }
    .tr-head-actions .tr-btn { flex: 1 1 auto; }
    .tr-tpl-actions { margin-left: 0; width: 100%; }
    .tr-detail { position: static; }
}

@media (max-width: 460px) {
    .tr-alert-value { font-size: 29px; }
    .tr-exam-actions .tr-btn { flex: 1 1 100%; }
    .tr-task-actions { width: 100%; }
    .tr-task-actions .tr-btn { flex: 1 1 auto; }
}


/* ============================================================================
   Team-Ziehung - TASK-405
   Liegt innerhalb von .tr und nutzt dessen Tokens (--tr-surface, --tr-line, ...).
   Eigene Klassen gibt es nur fuer das, was der Trainer-Baukasten nicht hat:
   die abwaehlbaren Personen-Chips und die Teamkarten.

   MudBlazor stylt nackte HTML-Elemente global (TASK-358): button bekommt
   display:inline-flex mit justify-content:center. Jede eigene Flex-Schaltflaeche
   deklariert deshalb justify-content UND align-items ausdruecklich - auch dort,
   wo der CSS-Standardwert gemeint ist.
   ============================================================================ */

.tdraw-picker-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
}

.tdraw-picker-count {
    font-weight: 700;
    color: var(--tr-text);
}

.tdraw-picker-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.tdraw-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.tdraw-pick {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--tr-line);
    border-radius: 999px;
    background: var(--tr-surface);
    color: var(--tr-muted);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

/* Die Farbe traegt nicht allein: das Icon wechselt zwischen Haken und leerem Kreis. */
.tdraw-pick.is-on {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--tr-text);
    font-weight: 600;
}

.tdraw-split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.tdraw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.tdraw-team {
    border: 1px solid var(--tr-line);
    border-radius: 18px;
    background: var(--tr-surface);
    padding: 16px 18px;
}

.tdraw-team-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.tdraw-team-name {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -0.01em;
}

.tdraw-team-size {
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--tr-muted);
    background: var(--tr-inset);
    border-radius: 999px;
    padding: 2px 9px;
}

.tdraw-topic {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--tr-text));
}

.tdraw-members {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tdraw-members li {
    padding: 4px 0;
    font-size: 14.5px;
    border-top: 1px solid var(--tr-line);
}

.tdraw-members li:first-child { border-top: none; }

/* Das eigene Team unter /my-groups/{id} - dieselbe Karte, nur einzeln. */
.tdraw-mine {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 18px;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    padding: 18px 20px;
    margin-bottom: 20px;
}

.tdraw-mine .tdraw-members li { border-top-color: var(--mud-palette-lines-default); }

@media (max-width: 700px) {
    .tdraw-grid { grid-template-columns: 1fr; }
    .tdraw-picker-actions { margin-left: 0; }
    .tdraw-split > .tr-tabs { width: 100%; }
}

/* ============================================================================
   Vorlagen-Assistent - TASK-356
   Sechs Schritte nach dem Design-Handoff "Trainer-Dashboard" (Abschnitt "Neue
   Testvorlage"). Der Assistent ist KEIN zweiter Weg neben dem Vorlagen-Dialog,
   sondern dessen neue Aufteilung - Zustand, Pruefung und Speichern sind
   unveraendert, nur das Markup ist in Schritte zerlegt.

   Die Tokens kommen aus dem gemeinsamen .tr/.exw-Block weiter oben.
   ============================================================================ */

.exw {
    min-width: 0;
    color: var(--tr-text);
}

/* --- Schrittleiste -------------------------------------------------------- */

.exw-steps {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--tr-line);
    scrollbar-width: thin;
}

/* Jeder Schritt ist anspringbar, nicht nur "Weiter". Beim Bearbeiten einer
   bestehenden Vorlage will man selten von vorn durch - man will an eine Stelle. */
.exw-step {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    border: 1px solid var(--tr-line);
    background: var(--tr-surface);
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.exw-step:hover { border-color: var(--app-ink); }

.exw-step-dot {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tr-inset);
    color: var(--tr-muted);
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 700;
}

.exw-step-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--tr-text);
}

.exw-step.is-done {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}

.exw-step.is-done .exw-step-dot {
    background: var(--mud-palette-success);
    color: var(--mud-palette-surface);
}

.exw-step.is-active {
    background: var(--app-ink);
    border-color: color-mix(in srgb, var(--app-ink-on) 22%, var(--app-ink));
}

.exw-step.is-active .exw-step-dot {
    background: var(--app-ink-on);
    color: var(--app-ink);
}

.exw-step.is-active .exw-step-label { color: var(--app-ink-on); }

/* --- Kopf und Rumpf ------------------------------------------------------- */

.exw-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 6px 0 0;
}

.exw-lead {
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--tr-muted);
    max-width: 720px;
    text-wrap: pretty;
}

.exw-body {
    display: grid;
    gap: 16px;
    min-height: 340px;
    align-content: start;
}

.exw-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    align-items: start;
}

.exw-narrow { max-width: 820px; }

.exw-panel {
    background: var(--tr-inset);
    border: 1px solid var(--tr-line);
    border-radius: 18px;
    padding: 20px;
    min-width: 0;
}

.exw-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 800;
}

/* --- Fragenlisten --------------------------------------------------------- */

.exw-list {
    display: grid;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.exw-pick {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    text-align: left;
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: 14px;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

.exw-pick:hover { border-color: var(--app-ink); }

/* Fuellt die Zeile - ohne das bleibt der Textblock inhaltsbreit und die zentrierende
   button-Regel von MudBlazor haette wieder freien Platz zu verteilen. */
.exw-pick-body,
.exw-scale-body {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.exw-pick-text {
    display: block;
    overflow-wrap: anywhere; /* TASK-432 */
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.exw-pick-meta {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--tr-muted);
}

/* Das Lupensymbol steht rechts und ist nur ein Hinweis auf den Doppelklick - es hat keinen
   eigenen Klick, weil ein Knopf im Knopf ungueltiges HTML waere. */
.exw-pick-zoom {
    flex: none;
    margin-top: 1px;
    opacity: .55;
}

.exw-pick:hover .exw-pick-zoom { opacity: 1; }

.exw-sel {
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: 14px;
    padding: 12px 14px;
}

.exw-sel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.exw-sel-no {
    flex: none;
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--tr-muted);
}

.exw-sel-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere; /* TASK-432 */
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.exw-sel-actions {
    flex: none;
    display: flex;
    gap: 2px;
}

/* --- Zusammenfassungs-Leiste ---------------------------------------------- */

.exw-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 18px;
    background: var(--app-ink);
    color: var(--app-ink-on);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-ink-on) 20%, transparent);
}

.exw-bar-main {
    font-size: 14px;
    font-weight: 700;
}

.exw-bar-end {
    margin-left: auto;
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--app-ink-muted);
}

.exw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.exw-chip {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--tr-inset);
    border: 1px solid var(--tr-line);
    font-size: 12px;
    font-weight: 700;
    color: var(--tr-muted);
}

/* --- Notenschlüssel-Auswahl ----------------------------------------------- */

.exw-scale {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    text-align: left;
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: 18px;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

.exw-scale:hover { border-color: var(--app-ink); }

.exw-scale.is-active {
    background: color-mix(in srgb, var(--mud-palette-success) 8%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 34%, transparent);
}

.exw-scale-name {
    display: block;
    font-size: 15px;
    font-weight: 800;
}

.exw-scale-steps {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--tr-muted);
    line-height: 1.5;
    text-wrap: pretty;
}

/* --- Zusammenfassung ------------------------------------------------------ */

.exw-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 14px;
}

.exw-fact-label {
    font-size: 11.5px;
    color: var(--tr-muted);
    font-weight: 700;
}

.exw-fact-value {
    margin-top: 5px;
    font-size: 14.5px;
    font-weight: 700;
    text-wrap: pretty;
}

/* --- Wiederherstellen und Speicher-Hinweis -------------------------------- */

.exw-recover {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.exw-recover-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

/* Der Hinweis sagt "gesichert", nicht "gespeichert" - gespeichert wird die Vorlage erst im
   letzten Schritt, und die beiden Woerter duerfen nicht dasselbe zu bedeuten scheinen. */
.exw-saved {
    color: var(--mud-palette-success);
    font-weight: 700;
}

/* --- Fuss ----------------------------------------------------------------- */

.exw-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--tr-line);
}

.exw-counter {
    margin-left: auto;
    font-family: var(--tr-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--tr-muted);
}

.exw-foot-end {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --- Mobil ---------------------------------------------------------------- */

@media (max-width: 700px) {
    .exw-title { font-size: 19px; }
    .exw-panel { padding: 16px; }
    .exw-body { min-height: 0; }
    .exw-counter { margin-left: 0; order: -1; width: 100%; }
    .exw-foot > .tr-btn,
    .exw-foot-end { width: 100%; }
    .exw-foot-end .tr-btn { flex: 1 1 auto; }
}

/* ==========================================================================
   TASK-376 Kursplanung - Blockliste im Vorlagen-Editor
   Laeuft innerhalb von .tr und nutzt dessen Tokens (--tr-line, --app-ink, ...).
   ========================================================================== */

.cp-blocks {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-block {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.cp-block[draggable="true"] { cursor: grab; }

.cp-block--dragging { opacity: .5; }

.cp-block-order {
    flex: 0 0 auto;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.cp-block-body { flex: 1 1 auto; min-width: 0; }

.cp-block-title { font-weight: 600; }

.cp-block-goal {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
}

.cp-block-meta {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: .85rem;
}

/* Zahlen und Zeiten immer monospace mit tabellarischen Ziffern - Projektregel. */
.cp-mono {
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

.cp-block-warn {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    font-size: .85rem;
    /* Gold traegt als Flaeche, nicht als Textfarbe (TASK-247) - deshalb abgemischt. */
    color: color-mix(in srgb, var(--mud-palette-warning) 55%, var(--mud-palette-text-primary));
}

.cp-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cp-chip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    font-size: .82rem;
}

.cp-chip--dead {
    border-style: dashed;
    color: var(--mud-palette-text-disabled);
}

.cp-block-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

@media (max-width: 640px) {
    .cp-block { flex-wrap: wrap; }

    .cp-block-actions {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   TASK-376 Theorie und Praxis farblich trennen

   Ein Block traegt BEIDE Zeiten - es gibt also keine Theorie- und Praxis-Bloecke
   als eigene Arten, wohl aber Bloecke, die faktisch nur eines von beidem sind.
   Genau die sollen in der Liste auffallen: der Streifen links zeigt den
   Charakter, die Pillen zeigen die Werte.

   Die Toene kommen aus der Palette, nicht als Hex - sonst kippt die Zuordnung
   im Dark Mode. Farbe traegt nie allein: jede Pille schreibt "Theorie" bzw.
   "Praxis" aus, und die Zeile hat den Charakter zusaetzlich als title.
   -------------------------------------------------------------------------- */

.cp-block {
    --cp-theory: var(--mud-palette-primary);
    --cp-practice: var(--mud-palette-secondary);
    position: relative;
    overflow: hidden;
}

/* Der Streifen liegt als Pseudo-Element auf dem Rand - so bleibt der
   border-left des .cp-block fuer den normalen Rahmen frei. */
.cp-block::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: transparent;
}

.cp-block--theory::before { background: var(--cp-theory); }

.cp-block--practice::before { background: var(--cp-practice); }


.cp-times {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.cp-time {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .82rem;
    /* Getoente Flaeche statt farbiger Schrift: der Text bleibt auf voller
       Lesbarkeit, und die Zuordnung traegt trotzdem. */
    border: 1px solid transparent;
    color: var(--mud-palette-text-primary);
}

.cp-time--theory {
    background: color-mix(in srgb, var(--cp-theory) 14%, transparent);
    border-color: color-mix(in srgb, var(--cp-theory) 40%, transparent);
}

.cp-time--practice {
    background: color-mix(in srgb, var(--cp-practice) 14%, transparent);
    border-color: color-mix(in srgb, var(--cp-practice) 40%, transparent);
}

/* Art-Umschalter im Block-Dialog - dieselben zwei Toene wie in der Blockliste,
   damit die Zuordnung ueberall dieselbe ist. */
.cp-kind-choice {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
}

.cp-kind {
    --cp-theory: var(--mud-palette-primary);
    --cp-practice: var(--mud-palette-secondary);
    flex: 1 1 0;
    /* MudBlazor setzt auf dem Element-Selektor button ein zentrierendes inline-flex -
       deshalb stehen beide Werte hier ausdruecklich (TASK-358). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
}

.cp-kind--theory.cp-kind--on {
    background: color-mix(in srgb, var(--cp-theory) 14%, transparent);
    border-color: var(--cp-theory);
    font-weight: 600;
}

.cp-kind--practice.cp-kind--on {
    background: color-mix(in srgb, var(--cp-practice) 14%, transparent);
    border-color: var(--cp-practice);
    font-weight: 600;
}

/* Vorgaben fuer die Dauer - eine Abkuerzung neben dem Eingabefeld, kein Ersatz dafuer. */
.cp-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.cp-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.cp-preset:hover { border-color: var(--mud-palette-primary); }

.cp-preset--on {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    font-weight: 600;
}

/* Summenwerte in Editor und Vorlagenliste tragen dieselbe Zuordnung. Hier steht
   die Farbe auf der Schrift, deshalb mit der Textfarbe abgemischt - sonst reicht
   der Kontrast in einem der beiden Themes nicht (gleiche Regel wie beim Gold,
   TASK-247). */
.cp-value--theory {
    color: color-mix(in srgb, var(--mud-palette-primary) 70%, var(--mud-palette-text-primary));
}

.cp-value--practice {
    color: color-mix(in srgb, var(--mud-palette-secondary) 70%, var(--mud-palette-text-primary));
}

/* TASK-409: Hinweiszeile "E-Mail noch nicht bestaetigt". Text und Knopf nebeneinander, auf schmalen
   Schirmen untereinander - der Knopf soll nie den Text auf eine Buchstabenspalte zusammendruecken. */
.ecb-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ecb-row > div {
    flex: 1 1 260px;
}

/* TASK-446: Rundenkopf und Rundenende der Wiederholung (/wiederholung, Karteikarten-Wiederholung).
   Farben aus der Palette, damit beide Themes stimmen; die Zeile bricht auf schmalen Geraeten um
   statt seitlich zu scrollen. */
.review-round-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 10px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.review-round-chip {
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 700;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.review-round-pos,
.review-round-total {
    font-variant-numeric: tabular-nums;
}

.review-round-total b {
    color: var(--mud-palette-text-primary);
}

.review-round-note {
    color: var(--mud-palette-text-secondary);
}

.review-round-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 480px) {
    .review-round-actions .mud-button-root {
        flex: 1 1 100%;
        min-height: 48px;
    }
}

/* =====================================================================
   TASK-470: Netzplaner (Phase 1 von #469)
   Eigene Buttons setzen justify-content/align-items ausdruecklich - MudBlazor
   zentriert jeden nackten <button> global (TASK-358).
   ===================================================================== */
.np-list { max-width: 880px; margin: 0 auto; padding: 8px 0 24px; }
.np-list-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; }
.np-list-lead { color: var(--mud-palette-text-secondary); margin-bottom: 18px; max-width: 70ch; }
.np-list-new { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.np-list-new-field { flex: 1 1 240px; }
.np-empty {
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    padding: 20px;
    color: var(--mud-palette-text-secondary);
}
.np-cards { display: grid; gap: 10px; }
.np-card {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}
.np-card-main {
    flex: 1 1 auto; min-height: 56px; padding: 10px 14px;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
    background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.np-card-name { font-weight: 700; overflow-wrap: anywhere; }
.np-card-meta { font-size: .85rem; color: var(--mud-palette-text-secondary); }
.np-card-actions { display: flex; gap: 4px; padding-right: 6px; }
.np-card-actions .mud-icon-button { min-width: 44px; min-height: 44px; }
.np-pal-item:focus-visible, .np-cable-item:focus-visible, .np-zoom-btn:focus-visible,
.np-del:focus-visible, .np-card-main:focus-visible, .np-title:focus-visible, .np-sel-name:focus-visible {
    outline: 3px solid var(--mud-palette-primary); outline-offset: 2px;
}

.np { display: flex; flex-direction: column; gap: 8px; }
.np-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-title {
    flex: 1 1 200px; min-width: 0; min-height: 44px; font: inherit; font-weight: 700; font-size: 1.1rem;
    color: inherit; background: transparent; padding: 6px 8px;
    border: 1px solid transparent; border-radius: 8px;
}
.np-title:hover, .np-title:focus { border-color: var(--mud-palette-lines-default); outline: none; }
.np-status { font-size: .85rem; color: var(--mud-palette-text-secondary); }
.np-status-err { color: var(--mud-palette-error); font-weight: 600; }

.np-tools { display: flex; flex-direction: column; gap: 6px; }
.np-cable-hint { font-size: .85rem; color: var(--mud-palette-text-secondary); }
.np-cable-hint strong { color: var(--mud-palette-text-primary); }
.np-palette, .np-cables { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.np-pal-item, .np-cable-item {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 4px 10px; font: inherit; font-size: .85rem; color: inherit;
    background: var(--mud-palette-surface); cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
}
.np-pal-item { flex-direction: column; gap: 2px; min-width: 76px; }
.np-pal-sym { width: 52px; height: 36px; }
.np-cable-sample { width: 36px; height: 8px; }
.np-cable-on { border-color: var(--mud-palette-primary); box-shadow: inset 0 0 0 1px var(--mud-palette-primary); font-weight: 700; }

.np-canvas-wrap {
    position: relative; height: min(62vh, 640px); min-height: 320px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius);
    overflow: hidden;
    background-color: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-text-primary));
    background-image: radial-gradient(var(--mud-palette-lines-default) 1px, transparent 1px);
    background-size: 24px 24px;
}
.np-canvas, .np-svg { width: 100%; height: 100%; display: block; }
.np-svg { outline: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.np-svg:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: -3px; }
.np-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.np-zoom-btn {
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    font: inherit; font-size: 1.2rem; color: inherit; cursor: pointer;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
}
.np-hint {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 86%);
    text-align: center; pointer-events: none; color: var(--mud-palette-text-secondary);
}

.np-sel-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 48px; padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}
.np-sel-hint { color: var(--mud-palette-text-secondary); font-size: .9rem; }
.np-sel-kind { font-weight: 700; }
.np-sel-name {
    flex: 1 1 160px; min-width: 0; min-height: 44px; padding: 4px 10px; font: inherit; color: inherit;
    background: transparent; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
}
.np-sel-name-static { flex: 1 1 160px; color: var(--mud-palette-text-secondary); }
.np-del {
    display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 4px 12px;
    font: inherit; color: var(--mud-palette-error); cursor: pointer; background: transparent;
    border: 1px solid var(--mud-palette-error); border-radius: 10px;
}
.np-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--mud-palette-text-secondary); }
.np-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.np-legend-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid; display: inline-block;
    border-color: color-mix(in srgb, var(--np-c, currentColor) calc(100% - var(--np-mix)), var(--mud-palette-text-primary)); }

/* --- Inhalt der Zeichenflaeche (von netplanner.js erzeugt) --- */
.np-sym { fill: var(--mud-palette-surface); stroke: var(--mud-palette-text-secondary); stroke-width: 2; }
.np-sym-line { fill: none; stroke: var(--mud-palette-text-secondary); stroke-width: 2; stroke-linecap: round; }
.np-sym-text { fill: var(--mud-palette-text-primary); font-size: var(--np-symtext, 14px); font-weight: 700; }
.np-name { fill: var(--mud-palette-text-primary); font-size: var(--np-name, 12px); font-weight: 600; pointer-events: none; }
.np-device { cursor: move; }
.np-sel .np-sym, .np-sel .np-sym-line { stroke: var(--mud-palette-primary); stroke-width: 3; }
.np-port { cursor: crosshair; }
.np-port-hit { fill: transparent; }
/* Kabel-/Portfarben kommen als --np-c und werden mit der Textfarbe gemischt: im hellen Modus dunkler,
   im dunklen heller. Ein fester Hex-Wert hat auf dem dunklen Grund nur 2.6:1 (Koax) bis 3.4:1 (Blau). */
.np-svg, .np-cable-sample, .np-legend-dot { --np-mix: 38%; }
.np-port-dot { fill: var(--mud-palette-surface); stroke-width: 3;
    stroke: color-mix(in srgb, var(--np-c, currentColor) calc(100% - var(--np-mix)), var(--mud-palette-text-primary)); }
.np-port-used .np-port-dot { fill: color-mix(in srgb, var(--np-c, currentColor) calc(100% - var(--np-mix)), var(--mud-palette-text-primary)); }
.np-port:hover .np-port-dot { stroke-width: 4; }
.np-cable-hit { stroke: transparent; stroke-width: 16; cursor: pointer; }
.np-cable-line { stroke-width: 3; stroke-linecap: round; pointer-events: none;
    stroke: color-mix(in srgb, var(--np-c, currentColor) calc(100% - var(--np-mix)), var(--mud-palette-text-primary)); }
.np-cable.np-sel .np-cable-line { stroke-width: 5; }
.np-pending { stroke-width: 3; stroke-dasharray: 4 4; pointer-events: none;
    stroke: color-mix(in srgb, var(--np-c, currentColor) calc(100% - var(--np-mix)), var(--mud-palette-text-primary)); }
.np-cable-sample line { stroke: color-mix(in srgb, var(--np-c, currentColor) calc(100% - var(--np-mix)), var(--mud-palette-text-primary)); }

@media (max-width: 600px) {
    .np-canvas-wrap { height: 58vh; }
    .np-card-meta { font-size: .8rem; }
}

/* =====================================================================
   TASK-472: Netzplaner Phase 2 - Live-Hilfe, Pruefen, Konfiguration, Marker
   ===================================================================== */
.np-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; }

.np-checkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-switch, .np-check-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 4px 14px; font: inherit; color: inherit; cursor: pointer;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
}
.np-check-btn { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); font-weight: 600; }
.np-switch-track {
    position: relative; width: 34px; height: 18px; border-radius: 999px; flex: 0 0 auto;
    background: var(--mud-palette-lines-default); transition: background .15s;
}
.np-switch-thumb {
    position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--mud-palette-surface); box-shadow: 0 0 0 1px var(--mud-palette-text-secondary); transition: left .15s;
}
.np-switch[aria-checked="true"] .np-switch-track { background: var(--mud-palette-primary); }
.np-switch[aria-checked="true"] .np-switch-thumb { left: 18px; }
.np-switch:focus-visible, .np-check-btn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.np-check-state { font-size: .85rem; color: var(--mud-palette-text-secondary); }

.np-cfg {
    display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}
.np-cfg-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.np-cfg-note { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.np-cfg-port, .np-cfg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-cfg-label { flex: 0 0 150px; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.np-cfg-input {
    flex: 1 1 140px; min-width: 0; min-height: 44px; padding: 4px 10px; font: inherit; color: inherit;
    background: transparent; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
}
.np-cfg-input:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 1px; }
.np-cfg-more summary { cursor: pointer; font-size: .85rem; color: var(--mud-palette-text-secondary); padding: 6px 0; }

.np-issues { display: flex; flex-direction: column; gap: 8px; }
.np-issues-empty, .np-issues-stale, .np-issues-ok {
    padding: 10px 12px; border-radius: var(--mud-default-borderradius); font-size: .9rem;
    border: 1px solid var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary);
}
.np-issues-empty { border-style: dashed; }
.np-issues-stale { border-color: var(--mud-palette-warning); color: var(--mud-palette-text-primary); }
.np-issues-ok { display: flex; gap: 8px; align-items: flex-start; color: var(--mud-palette-text-primary); }
.np-issues-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.np-issue {
    display: flex; gap: 10px; padding: 10px 12px; background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-left-width: 4px; border-radius: 8px;
}
.np-issue-error { border-left-color: var(--mud-palette-error); }
.np-issue-warning { border-left-color: var(--mud-palette-warning); }
.np-issue-hint { border-left-color: var(--mud-palette-info); }
.np-issue-badge {
    flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .8rem; color: #fff; background: var(--mud-palette-info);
}
.np-issue-error .np-issue-badge { border-radius: 50%; background: var(--mud-palette-error); }
.np-issue-warning .np-issue-badge { clip-path: polygon(50% 0, 100% 100%, 0 100%); align-items: flex-end; padding-bottom: 1px; background: var(--mud-palette-warning); color: var(--mud-palette-warning-text, #1a1a1a); }
.np-issue-hint .np-issue-badge { border-radius: 4px; }
.np-issue-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.np-issue-title { font-weight: 600; }
.np-issue-sev { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; margin-right: 8px; color: var(--mud-palette-text-secondary); }
.np-issue-link {
    display: inline; padding: 0; font: inherit; font-weight: 600; text-align: left; color: inherit; cursor: pointer;
    background: none; border: 0; text-decoration: underline; text-underline-offset: 3px;
}
.np-issue-link:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.np-issue-why, .np-issue-tip { font-size: .9rem; color: var(--mud-palette-text-secondary); }

/* Marker am Geraet (von netplanner.js erzeugt): Fehler = Kreis, Warnung = Dreieck, Hinweis = Quadrat */
.np-badge-shape { stroke: var(--mud-palette-surface); stroke-width: 2; }
.np-badge-error .np-badge-shape { fill: var(--mud-palette-error); }
.np-badge-warning .np-badge-shape { fill: var(--mud-palette-warning); }
.np-badge-hint .np-badge-shape { fill: var(--mud-palette-info); }
.np-badge-glyph { font-size: 13px; font-weight: 800; fill: #fff; pointer-events: none; }
.np-badge-warning .np-badge-glyph { fill: var(--mud-palette-warning-text, #1a1a1a); }
.np-badge { cursor: help; }

@media (max-width: 600px) {
    .np-cfg-label { flex-basis: 100%; }
}

/* TASK-474: Routing-Tabelle im Konfigurations-Panel eines Routers */
.np-routes { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--mud-palette-lines-default); }
.np-cfg-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-route-del, .np-route-add, .np-acl-add, .np-nat-add, .np-nat-pool-add, .np-nat-fwd-add {
    display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 4px 12px;
    font: inherit; color: inherit; cursor: pointer; background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
}
.np-route-add, .np-acl-add, .np-nat-add, .np-nat-pool-add, .np-nat-fwd-add { align-self: flex-start; color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.np-route-add:disabled, .np-acl-add:disabled, .np-nat-add:disabled, .np-nat-pool-add:disabled, .np-nat-fwd-add:disabled { opacity: .5; cursor: not-allowed; }
.np-route-del:focus-visible, .np-route-add:focus-visible, .np-acl-add:focus-visible, .np-nat-add:focus-visible, .np-nat-pool-add:focus-visible, .np-nat-fwd-add:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* =====================================================================
   TASK-475: Netzplaner Phase 3b - Paketanimation auf der Zeichenflaeche
   Form UND Beschriftung unterscheiden die Pakete, nie die Farbe allein.
   ===================================================================== */
.np-packet rect, .np-packet circle, .np-packet polygon { stroke: var(--mud-palette-surface); stroke-width: 2; }
.np-packet text { font-size: 9px; font-weight: 800; fill: #fff; pointer-events: none; }
.np-packet-arp rect { fill: var(--mud-palette-tertiary); }
.np-packet-echo circle { fill: var(--mud-palette-primary); }
.np-packet-reply circle { fill: var(--mud-palette-success); }
.np-packet-error circle { fill: var(--mud-palette-error); }
/* TASK-481: Dienste - DHCP = Raute, DNS = Sechseck, HTTP = Kapsel */
.np-packet-dhcp polygon { fill: var(--mud-palette-warning-darken); }
.np-packet-dns polygon { fill: var(--mud-palette-secondary); }
.np-packet-http rect { fill: var(--mud-palette-info-darken); }
.np-packet-mail rect { fill: var(--mud-palette-warning-darken); }
.np-cable-active .np-cable-line { stroke-width: 6; filter: drop-shadow(0 0 4px var(--mud-palette-primary)); }
.np-cable-dead .np-cable-line { stroke-dasharray: 2 7; opacity: .55; }
.np-device-flash .np-sym, .np-device-flash .np-sym-line { stroke: var(--mud-palette-primary); stroke-width: 4; }
.np-drop-x circle { fill: var(--mud-palette-error); stroke: var(--mud-palette-surface); stroke-width: 2; }
.np-drop-x-mark { stroke: #fff; stroke-width: 3; stroke-linecap: round; fill: none; }

/* TASK-475: Simulations-Panel */
.np-sim { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius); background: var(--mud-palette-surface); }
.np-sim-title { font-size: 1.1rem; font-weight: 800; margin: 0; }
.np-sim-h3 { font-size: .95rem; font-weight: 700; margin: 10px 0 4px; }
.np-sim-form { display: flex; gap: 10px; flex-wrap: wrap; }
.np-sim-field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--mud-palette-text-secondary); }
.np-sim-field-grow { flex: 1 1 220px; }
.np-sim-input { min-height: 44px; padding: 4px 10px; font: inherit; color: var(--mud-palette-text-primary); background: transparent;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; min-width: 0; }
.np-sim-input:focus-visible, .np-sim-btn:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.np-sim-speed { min-height: 44px; }
.np-sim-actions, .np-sim-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.np-sim-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 4px 14px; font: inherit;
    color: inherit; cursor: pointer; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; }
.np-sim-btn:disabled { opacity: .45; cursor: not-allowed; }
.np-sim-primary { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); font-weight: 700; }
.np-sim-step { font-size: .85rem; color: var(--mud-palette-text-secondary); }
.np-sim-empty, .np-sim-note, .np-sim-notice { padding: 10px 12px; border-radius: var(--mud-default-borderradius); font-size: .9rem;
    border: 1px dashed var(--mud-palette-lines-default); color: var(--mud-palette-text-secondary); }
.np-sim-notice { border-style: solid; border-color: var(--mud-palette-warning); color: var(--mud-palette-text-primary); }
.np-sim-result { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--mud-default-borderradius);
    border: 1px solid var(--mud-palette-lines-default); border-left-width: 4px; }
.np-sim-ok { border-left-color: var(--mud-palette-success); }
.np-sim-fail { border-left-color: var(--mud-palette-error); }
.np-sim-running { color: var(--mud-palette-text-secondary); border-left-color: var(--mud-palette-primary); }
.np-sim-badge { flex: 0 0 auto; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; }
.np-sim-ok .np-sim-badge { border-radius: 50%; background: var(--mud-palette-success); }
.np-sim-fail .np-sim-badge { border-radius: 4px; background: var(--mud-palette-error); }
.np-sim-message { font-weight: 600; overflow-wrap: anywhere; }
.np-sim-detail { font-size: .9rem; color: var(--mud-palette-text-secondary); margin-top: 4px; overflow-wrap: anywhere; }
.np-sim-sev { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; color: var(--mud-palette-text-secondary); }
.np-sim-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.np-sim-event { display: flex; gap: 10px; padding: 8px 10px; border: 1px solid var(--mud-palette-lines-default); border-left-width: 4px; border-radius: 8px; }
.np-sim-event-hop { border-left-color: var(--mud-palette-primary); }
.np-sim-event-note { border-left-color: var(--mud-palette-secondary); }
.np-sim-event-drop { border-left-color: var(--mud-palette-error); }
.np-sim-current { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.np-sim-event-no { flex: 0 0 28px; color: var(--mud-palette-text-secondary); }
.np-sim-event-body { min-width: 0; overflow-wrap: anywhere; }
.np-sim-event-title { font-weight: 600; }
.np-sim-event-addr { display: flex; flex-direction: column; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.np-sim-event-why { font-size: .88rem; color: var(--mud-palette-text-secondary); padding-top: 4px; }
.np-sim-event summary, .np-sim-tables summary { cursor: pointer; font-size: .85rem; color: var(--mud-palette-primary); }
.np-sim-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.np-sim-table th, .np-sim-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); overflow-wrap: anywhere; }
.np-sim-table th { font-weight: 700; color: var(--mud-palette-text-secondary); }
.np-route-unusable { color: var(--mud-palette-text-secondary); text-decoration: line-through; }
.np-route-unusable td:last-child { text-decoration: none; }
@media (max-width: 600px) { .np-sim-table { display: block; overflow-x: auto; } }

/* TASK-481: Dienste (DHCP, DNS, HTTP) im Konfigurations-Panel eines Servers oder Routers */
.np-svc { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px dashed var(--mud-palette-lines-default); }
.np-svc-block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.np-svc-block > .np-cfg-row, .np-svc-block > .np-cfg-route, .np-svc-block > .np-cfg-note { align-self: stretch; }

/* TASK-475: Review-Nachbesserungen */
.np-sim-layer { pointer-events: none; }
.np-sim-field { min-width: 0; }
.np-sim-event summary, .np-sim-tables summary { min-height: 44px; display: flex; align-items: center; }
.np-sim-event summary:focus-visible, .np-sim-tables summary:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

/* TASK-487: Geraete-Fenster, LerniQ.OS und Terminal. Eigene Buttons deklarieren Schrift, Farbe, Hintergrund und Ausrichtung
   selbst (MudBlazor stylt nackte button-Elemente global, TASK-358). */
.np-open {
    display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 4px 12px;
    font: inherit; color: var(--mud-palette-primary); cursor: pointer; background: transparent;
    border: 1px solid var(--mud-palette-primary); border-radius: 10px;
}
.np-open:focus-visible, .np-win-back:focus-visible, .np-win-close:focus-visible, .np-win-tab:focus-visible,
.np-os-icon:focus-visible, .np-os-task:focus-visible, .np-os-start:focus-visible, .np-os-app-close:focus-visible,
.np-term-key:focus-visible, .np-os-boot:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }

.np-win-backdrop {
    position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(8, 12, 20, .6);
}
.np-win {
    display: flex; flex-direction: column; width: min(920px, 100%); height: min(660px, 100%); min-height: 0; overflow: hidden;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: 12px; box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
.np-win:focus { outline: none; }
.np-win-bar {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px; min-height: 52px;
    color: #fff; background: var(--mud-palette-primary);
}
.np-win-title { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; font-weight: 700; }
.np-win-icon { flex: 0 0 auto; width: 30px; height: 26px; }
.np-win-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-win-kind { flex: 0 0 auto; font-size: .8rem; font-weight: 500; opacity: .9; }
.np-win-back, .np-win-close {
    display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 4px 12px;
    font: inherit; font-weight: 600; color: #fff; cursor: pointer; background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .5); border-radius: 10px;
}
.np-win-close { font-size: 1.5rem; line-height: 1; padding: 0; }
.np-win-back { order: -1; }
.np-win-tabs { display: flex; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); overflow-x: auto; }
.np-win-tab {
    display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 16px; font: inherit;
    color: var(--mud-palette-text-secondary); cursor: pointer; background: transparent; border: 0;
    border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0; white-space: nowrap;
}
.np-win-tab-on { color: var(--mud-palette-primary); font-weight: 700; border-bottom-color: var(--mud-palette-primary); }
.np-win-body { flex: 1 1 auto; min-height: 0; padding: 12px; overflow: auto; }
.np-win-body:has(> .np-os) { padding: 0; display: flex; flex-direction: column; }

/* LerniQ.OS: ein Bildschirm im Bildschirm - feste dunkle Farben, im hellen wie im dunklen Modus gleich lesbar */
.np-os { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; color: #e8eef7; background: #0e1b30; }
.np-os-boot {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; flex: 1 1 auto; padding: 24px;
    font: inherit; text-align: center; color: #e8eef7; cursor: pointer; background: #0a1424; border: 0;
}
.np-os-logo { font-size: 2.2rem; font-weight: 800; letter-spacing: .02em; }
.np-os-logo span { color: #5aa2ff; }
.np-os-boot-line { min-height: 2.6em; max-width: 46ch; }
.np-os-boot-bar { width: min(320px, 80%); height: 8px; overflow: hidden; background: #25375a; border-radius: 4px; }
.np-os-boot-bar span { display: block; height: 100%; background: #5aa2ff; transition: width .3s ease; }
.np-os-boot-skip { font-size: .8rem; color: #a9b8d0; }
.np-os-desktop {
    position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 12px; overflow: auto;
    background: radial-gradient(circle at 20% 15%, #1d4f9a 0%, #12305e 45%, #0e1b30 100%);
}
.np-os-icons { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.np-os-icon {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 96px; min-height: 88px;
    padding: 6px; font: inherit; font-size: .8rem; text-align: center; color: #e8eef7; cursor: pointer; background: transparent;
    border: 1px solid transparent; border-radius: 10px; overflow-wrap: anywhere;
}
.np-os-icon:hover:not(:disabled) { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.np-os-icon:disabled { cursor: default; opacity: .75; }
.np-os-icon-glyph {
    display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 1.4rem; font-weight: 700;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: #0a1424; border: 1px solid #5aa2ff; border-radius: 10px;
}
.np-os-hello { max-width: 60ch; margin: 18px 4px 0; font-size: .9rem; color: #c8d6ea; }
.np-os-app {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: auto; color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface); border: 1px solid #5aa2ff; border-radius: 10px;
}
.np-os-app-hidden { display: none; }
.np-os-app-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 2px 12px;
    color: #e8eef7; background: #1b3358; border-radius: 9px 9px 0 0;
}
.np-os-app > :not(.np-os-app-bar) { margin: 8px; }
.np-os-app-close {
    display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; font: inherit;
    font-size: 1.3rem; color: #e8eef7; cursor: pointer; background: transparent; border: 0; border-radius: 8px;
}
.np-os-taskbar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 4px 8px; background: #09111f; border-top: 1px solid #25375a; }
.np-os-start, .np-os-task {
    display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 14px; font: inherit;
    color: #e8eef7; cursor: pointer; background: #1b2c4a; border: 1px solid #36507f; border-radius: 8px;
}
.np-os-start { font-weight: 800; color: #8cc0ff; }
.np-os-task-on { background: #2b4a80; border-color: #5aa2ff; }
.np-os-clock { margin-left: auto; font-size: .85rem; color: #a9b8d0; }

/* Terminal */
.np-term { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 6px; }
.np-term-out {
    flex: 1 1 auto; min-height: 160px; padding: 8px 10px; overflow: auto; color: #e6edf3; background: #0d1117;
    border: 1px solid #30363d; border-radius: 8px; font: .85rem/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.np-term-line { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.45em; }
.np-term-echo { color: #9ecbff; }
.np-term-error { color: #ffa198; }
.np-term-tip { color: #a5d6a7; font-style: italic; }
.np-term-tip::before { content: "LerniQ: "; font-style: normal; font-weight: 700; }
.np-term-form { display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #0d1117; border: 1px solid #30363d; border-radius: 8px; }
.np-term-prompt { flex: 0 0 auto; color: #9ecbff; font-size: .85rem; }
.np-term-form .np-term-input {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 4px; font: .85rem ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: #fff; background: transparent; border: 0; outline: none;
}
.np-term-form:focus-within { outline: 3px solid var(--mud-palette-primary); outline-offset: 1px; }
.np-term-keys { display: flex; gap: 6px; }
.np-term-key {
    display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 4px 12px; font: inherit;
    color: inherit; cursor: pointer; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
}

@media (max-width: 700px) {
    .np-win-backdrop { padding: 0; }
    .np-win { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
    .np-win-kind { display: none; }
    .np-win-body { padding: 8px; }
    .np-os-icon { width: 84px; }
}

/* TASK-488: Strom/Neustart und Konsole von Router und Switch */
.np-win-power { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.np-win-power-state { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: .9rem; font-weight: 600; }
.np-win-lamp { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; }
.np-win-lamp-on { background: var(--mud-palette-success); border-color: var(--mud-palette-success); }
.np-win-lamp-off { background: transparent; border-color: var(--mud-palette-text-secondary); }
.np-win-confirm { margin: 8px 12px 0; }
.np-win-confirm p { margin: 0 0 8px; }
.np-win-pane { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; height: 100%; }
.np-win-pane-hidden { display: none; }

/* TASK-489: Server-Fenster (Dienste, Webseite) und Browser in LerniQ.OS. Eigene Buttons deklarieren Schrift, Farbe, Hintergrund und
   Ausrichtung selbst (MudBlazor stylt nackte button-Elemente global, TASK-358). */
.np-win-pane-auto { height: auto; flex: 0 0 auto; }
.np-web { display: flex; flex-direction: column; gap: 10px; }
.np-web-files { display: flex; gap: 6px; flex-wrap: wrap; }
.np-web-file {
    display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 14px; font: inherit;
    color: inherit; cursor: pointer; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
    overflow-wrap: anywhere;
}
.np-web-file-on { color: var(--mud-palette-primary); font-weight: 700; border-color: var(--mud-palette-primary); }
.np-web-add { border-style: dashed; }
.np-web-file:disabled { opacity: .45; cursor: not-allowed; }
.np-web-file:focus-visible, .np-br-btn:focus-visible, .np-br-link:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.np-web-edit { display: flex; flex-direction: column; gap: 8px; }
.np-web-text {
    width: 100%; min-height: 200px; padding: 8px 10px; font: .85rem/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; resize: vertical;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); border-radius: 8px;
}
.np-web-text:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 1px; }
.np-web-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.np-web-previewhead { font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.np-web-preview { width: 100%; height: 240px; background: #fff; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }

.np-br { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 6px; }
.np-br-bar { display: flex; align-items: center; gap: 6px; }
.np-br-btn {
    display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 4px 12px; font: inherit; font-size: 1.2rem;
    color: inherit; cursor: pointer; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
}
.np-br-btn:disabled { opacity: .45; cursor: not-allowed; }
.np-br-go { font-size: 1rem; font-weight: 700; color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.np-br-bar .np-br-address {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 10px; font: .9rem ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-background); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
}
.np-br-bar .np-br-address:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 1px; }
.np-br-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 200px; gap: 8px; }
.np-br-frame { flex: 1 1 auto; width: 100%; min-height: 220px; background: #fff; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; }
.np-br-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.np-br-link {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 44px; padding: 4px 12px; font: inherit; text-align: left;
    color: var(--mud-palette-primary); cursor: pointer; background: transparent; border: 1px solid var(--mud-palette-primary); border-radius: 10px;
}
.np-br-error, .np-br-home { padding: 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; background: var(--mud-palette-background); }
.np-br-error-title { margin: 0 0 6px; font-size: 1.25rem; }
.np-br-error p, .np-br-home p { margin: 0 0 8px; overflow-wrap: anywhere; }
.np-br-code { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.np-br-tip { font-style: italic; }
.np-br-tip::before { content: "LerniQ: "; font-style: normal; font-weight: 700; }

/* TASK-490: Mailprogramm in LerniQ.OS und Mailserver-Block im Dienste-Reiter */
.np-mail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 8px; }
.np-mail-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--mud-palette-lines-default); }
.np-mail-tab {
    display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 14px; font: inherit; color: var(--mud-palette-text-secondary);
    cursor: pointer; background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 8px 8px 0 0;
}
.np-mail-tab-on { color: var(--mud-palette-primary); font-weight: 700; border-bottom-color: var(--mud-palette-primary); }
.np-mail-tab:focus-visible, .np-mail-item:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.np-mail-pane { display: flex; flex-direction: column; gap: 8px; }
.np-mail-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.np-mail-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 6px 12px; font: inherit; text-align: left;
    color: inherit; cursor: pointer; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; overflow-wrap: anywhere;
}
.np-mail-item-on { border-color: var(--mud-palette-primary); }
.np-mail-body { margin: 4px 0 0; padding: 8px 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--mud-palette-background); border-radius: 8px; }
.np-mail-status { min-height: 1.5em; }
.np-mail-line { font-weight: 600; overflow-wrap: anywhere; }
.np-mail-ok .np-mail-line::before { content: "✓ "; color: var(--mud-palette-success); }
.np-mail-err .np-mail-line::before { content: "✗ "; color: var(--mud-palette-error); }
.np-mail-tip { margin-top: 4px; font-style: italic; overflow-wrap: anywhere; }
.np-mail-tip::before { content: "LerniQ: "; font-style: normal; font-weight: 700; }

/* TASK-548: Paketmitschnitt im Simulations-Panel. Eigene Buttons deklarieren Schrift, Farbe, Hintergrund und Ausrichtung selbst (MudBlazor stylt nackte button-Elemente global, TASK-358). */
.np-cap { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--mud-palette-lines-default); min-width: 0; }
.np-cap-start, .np-cap-tools, .np-cap-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.np-cap-tools { align-items: center; }
.np-cap-addr { flex: 1 1 160px; }
.np-cap-btn, .np-cap-tab, .np-cap-pick {
    display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 4px 12px; font: inherit; text-align: left;
    color: var(--mud-palette-text-primary); cursor: pointer; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px;
}
.np-cap-go { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); font-weight: 700; }
.np-cap-btn:disabled { opacity: .45; cursor: not-allowed; }
.np-cap-tab { font-size: .85rem; overflow-wrap: anywhere; max-width: 100%; }
.np-cap-tab[aria-pressed="true"] { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); font-weight: 700;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.np-cap-count { margin-left: 4px; color: var(--mud-palette-text-secondary); font-weight: 400; }
.np-cap-btn:focus-visible, .np-cap-tab:focus-visible, .np-cap-pick:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.np-cap-scroll { max-height: 360px; overflow: auto; max-width: 100%; }
.np-cap-table { font-size: .82rem; }
.np-cap-table td { vertical-align: top; }
.np-cap-pick { min-height: 36px; min-width: 40px; padding: 2px 8px; }
.np-cap-sel { background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
.np-cap-drop td:first-child { box-shadow: inset 4px 0 0 var(--mud-palette-error); }
.np-cap-dropped { font-weight: 700; color: var(--mud-palette-error); }
.np-cap-detail { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 8px; min-width: 0; }
.np-cap-head { font-weight: 700; overflow-wrap: anywhere; }
.np-cap-cause { overflow-wrap: anywhere; }
.np-cap-layer { border-top: 1px solid var(--mud-palette-lines-default); padding-top: 4px; }
.np-cap-layer summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--mud-palette-primary); }
.np-cap-layer summary:focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.np-cap-fields { display: grid; grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: .88rem; }
.np-cap-fields dt { color: var(--mud-palette-text-secondary); }
.np-cap-fields dd { margin: 0; overflow-wrap: anywhere; }
.np-cap-why { margin: 6px 0 0; font-size: .85rem; color: var(--mud-palette-text-secondary); }

/* =========================================================================
   TASK-566: Hamster-Begleiter (Lernmodul Python, #564) - HamsterBuddy.razor und die
   Kapitel-Tipps "> [!hamster:pose]" (HamsterTipMarkdown). Ausnahme von der Regel "kein
   Maskottchen" in docs/lernmodule.md - nur wo Inhalt/Config ihn ausdruecklich anfordert.
   Bis zu den Posen-PNGs (Paket K) zeigt jede Pose dasselbe Bild; die Pose traegt die
   Animation. Bewegung NUR unter prefers-reduced-motion: no-preference, endlich (kein
   Dauer-Gezappel neben dem Lesetext). Farben ueber die MudBlazor-Palette (Dark Mode).
   ========================================================================= */
/* TASK-566 (Review): Blase und Denk-Pünktchen relativ zur Palette gemischt statt schlicht "surface"
   wie beim Kreuzworträtsel - im TheoryDrawer liegt sonst Surface auf Surface (Dark Mode #0D2040 auf
   #0D2040, hell weiß auf weiß), und die Form der Sprechblase verschwindet. */
.lq-hamster-buddy,
.lq-hamster-tip {
    --lq-hamster-bubble-bg: color-mix(in srgb, var(--mud-palette-primary, #2a78d6) 10%, var(--mud-palette-surface, #fff));
    --lq-hamster-bubble-border: color-mix(in srgb, var(--mud-palette-text-primary, #000) 30%, var(--mud-palette-surface, #fff));
}

.lq-hamster-buddy {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    min-width: 0;
}

.lq-hamster-figure {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: var(--lq-hamster-size, 72px);
    line-height: 0;
}

/* Gegen ".learnmodule-content img" (Block, 16px Rand, runde Ecken) - der Hamster sitzt ohne Rahmen. */
.lq-hamster-figure img,
.learnmodule-content .lq-hamster-figure img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
    border-radius: 0;
}

.lq-hamster-bubble {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--lq-hamster-bubble-border);
    border-radius: 16px;
    background: var(--lq-hamster-bubble-bg);
    color: var(--mud-palette-text-primary, rgba(0, 0, 0, .87));
    font-size: max(16px, 1rem);
    line-height: 1.5;
    text-align: left;
    overflow-wrap: break-word;
}

/* Sprechblasen-Spitze zum Hamster hin (links). */
.lq-hamster-bubble::before {
    content: "";
    position: absolute;
    left: -7px;
    bottom: 20px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: 1px solid var(--lq-hamster-bubble-border);
    border-bottom: 1px solid var(--lq-hamster-bubble-border);
    transform: rotate(45deg);
}

.lq-hamster-bubble p {
    margin: 0 0 8px;
}

.lq-hamster-bubble > :last-child {
    margin-bottom: 0;
}

/* Leere Live-Region: unsichtbar, aber im Barrierefreiheitsbaum - sonst wird die erste Reaktion
   nicht vorgelesen. */
.lq-hamster-bubble--empty {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}

.lq-hamster-tip {
    --lq-hamster-size: 64px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0;
    min-width: 0;
}

.lq-hamster-tip .lq-hamster-bubble::before {
    top: 22px;
    bottom: auto;
}

@media (max-width: 380px) {
    .lq-hamster-tip {
        --lq-hamster-size: 48px;
        gap: 10px;
    }
}

/* TASK-567: Reaktion in den Übungsstufen - inline unter dem Feedback, kein Overlay. Etwas Luft nach
   oben, damit die Denk-Pünktchen (top: -6px) nicht an der Schritt-Karte kleben. */
.stagehost-hamster {
    margin: 8px 0 16px;
    min-width: 0;
}

@media (max-width: 380px) {
    .stagehost-hamster .lq-hamster-buddy {
        --lq-hamster-size: 48px !important;
        gap: 10px;
    }
}

/* Denk-Pose: Pünktchen-Blase - statisch auch ohne Bewegung, damit die Pose erkennbar bleibt. */
.lq-hamster--thinking::after {
    content: "\2022\2022\2022";
    position: absolute;
    top: -6px;
    right: -8px;
    padding: 0 5px;
    border: 1px solid var(--lq-hamster-bubble-border);
    border-radius: 10px;
    background: var(--lq-hamster-bubble-bg);
    color: var(--mud-palette-text-secondary, rgba(0, 0, 0, .6));
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1px;
}

@media (prefers-reduced-motion: no-preference) {
    .lq-hamster--animate.lq-hamster--neutral img {
        animation: lq-hamster-bob 1.6s ease-in-out 2;
    }

    .lq-hamster--animate.lq-hamster--happy img {
        animation: lq-hamster-hop .5s ease-out 2;
    }

    .lq-hamster--animate.lq-hamster--confused img {
        transform-origin: 50% 100%;
        animation: lq-hamster-wobble .6s ease-in-out 2;
    }

    .lq-hamster--animate.lq-hamster--coding img {
        animation: lq-hamster-type .35s ease-in-out 6;
    }

    .lq-hamster--animate.lq-hamster--celebrate img {
        transform-origin: 50% 100%;
        animation: lq-hamster-cheer .7s ease-out 3;
    }

    .lq-hamster--animate.lq-hamster--thinking::after {
        animation: lq-hamster-dots 1.2s ease-in-out 3;
    }

    @keyframes lq-hamster-bob {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }

    @keyframes lq-hamster-hop {
        0%, 100% { transform: translateY(0); }
        40% { transform: translateY(-12px); }
        70% { transform: translateY(0); }
        85% { transform: translateY(-3px); }
    }

    @keyframes lq-hamster-wobble {
        0%, 100% { transform: rotate(0); }
        25% { transform: rotate(-8deg); }
        75% { transform: rotate(8deg); }
    }

    @keyframes lq-hamster-type {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(2px); }
    }

    @keyframes lq-hamster-cheer {
        0%, 100% { transform: translateY(0) rotate(0) scale(1); }
        35% { transform: translateY(-14px) rotate(-6deg) scale(1.05); }
        65% { transform: translateY(-6px) rotate(6deg) scale(1.03); }
    }

    @keyframes lq-hamster-dots {
        0%, 100% { opacity: 1; }
        50% { opacity: .35; }
    }
}

/* TASK-574: ConfigJson-Editor im Lernmodul-Admin - Monospace und Einrueckung bleiben, lange Zeilen
   scrollen im Feld statt die Seite zu verbreitern. Die Klasse steckt auf dem MudTextField-Wurzelelement,
   die Schrift muss aber auf der textarea ankommen. */
.learnmodule-config-editor textarea {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.9rem;
    white-space: pre;
    overflow-x: auto;
}

/* TASK-574: Erwartet/Bekommen im Probelauf nebeneinander, auf schmalen Schirmen untereinander. */
.probe-diff-col {
    flex: 1 1 220px;
    min-width: 0;
}

/* =====================================================================
   TASK-589: Rundengroesse vor dem Start waehlen (RoundSizePicker)
   ===================================================================== */
.round-size-picker { max-width: 600px; }

.round-size-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.round-size-pills .round-size-pill {
    min-width: 64px;
    min-height: 56px;
    border-radius: 999px;
    font-size: 1.1rem;
    font-weight: 700;
}