/* Amascola Farbpalette — CSS Custom Properties */
:root {
    --amascola-green:        #50d877;
    --amascola-green-light:  #abe0ba;
    --amascola-blue:         #79deef;
    --amascola-blue-light:   #b9e5ec;
    --amascola-purple:       #6565db;
    --amascola-purple-light: #9696e6;
    --amascola-pink:         #ef45ab;
    --amascola-pink-light:   #f091ca;
    --amascola-orange:       #f06c3d;
    --amascola-orange-light: #e29d84;

    /* Pastell-Lila-Tint via color-mix (analog Block-Tints aus B1+B2).
     * Multi-Tenant-Konsistenz: Schule ueberschreibt --amascola-purple
     * → Pale-Tint zieht automatisch nach.
     * Drift gegenueber Designer-Original #CECBF6: ~5 Hex-Schritte in G
     * (Original hat leichten Gruenstich, der in linearer
     * purple+white-Mischung nicht reproduzierbar ist; Pastell-Drift
     * unter Wahrnehmungsschwelle).
     * β-Fallback bei No-color-mix: statisch #CECBF6 hier eintragen.
     */
    --amascola-purple-pale: color-mix(in srgb, var(--amascola-purple) 30%, white);

    /* Block-Typ-Palette — ADR-018 Abschnitt 1.
     * (b)-Schnitt: --block-* sind direkt-mapped, NICHT mehr via
     * --amascola-*. Multi-Tenant-Theming-Vorbereitung — jede Schule
     * kann --block-* einzeln ueberschreiben, ohne Brand-Tokens zu
     * beruehren.
     *
     * Tints+Lines via color-mix (γ). Browser-Support: Chrome 111+,
     * Firefox 113+, Safari 16.4+ (alle 2023).
     * β-Fallback bei No-Support: statische rgba-Defs hier eintragen
     * (z.B. --block-definition-tint: rgba(239,69,171,0.08)).
     * Aktiviert in S76 / B1+B2.
     */
    --block-definition: #ef45ab;
    --block-example:    #79deef;
    --block-recipe:     #50d877;
    --block-hint:       #f06c3d;
    --block-exercise:   #6565db;

    /* Header-Tint pro Block-Typ (S143-B2 pb-0b): identische Formel wie die
     * Creator-.lstein-card (site.css .lstein-card__header) — color-mix 15% auf
     * WEISS. Gleiche Formel → gleiche Optik. Nur der HEADER trägt diesen Tint;
     * der Body bleibt weiss (PO-Visual-Gate, kehrt pb-0s Voll-Box-Fill um). Der
     * Seam bleibt der --block-*-tint-Name; nur die Quelle ist die lstein-card-
     * Formel (eigene Komponenten, gleiche Werte, keine geteilte Klasse). */
    --block-definition-tint: color-mix(in srgb, var(--block-definition) 15%, white);
    --block-example-tint:    color-mix(in srgb, var(--block-example)    15%, white);
    --block-recipe-tint:     color-mix(in srgb, var(--block-recipe)     15%, white);
    --block-hint-tint:       color-mix(in srgb, var(--block-hint)       15%, white);
    --block-exercise-tint:   color-mix(in srgb, var(--block-exercise)   15%, white);

    --block-definition-line: color-mix(in srgb, var(--block-definition) 20%, transparent);
    --block-example-line:    color-mix(in srgb, var(--block-example)    20%, transparent);
    --block-recipe-line:     color-mix(in srgb, var(--block-recipe)     20%, transparent);
    --block-hint-line:       color-mix(in srgb, var(--block-hint)       20%, transparent);
    --block-exercise-line:   color-mix(in srgb, var(--block-exercise)   20%, transparent);

    /* Block-Karten-Layout-Masse (ADR-024a Weg-1, F_140_4 Welle A). Geteilte
     * Basis-Tokens fuer die heute uniformen Masse aller Karten-Typen; per-Typ-
     * Overrides erst spaeter bei echter Divergenz (Welle B). Werte = heutiger
     * Inline-Stand, verhaltensneutral. */
    --block-border-width:  4px;   /* uniformer linker Rand aller Karten-Typen */
    --block-divider-width: 2px;   /* uniforme Body-Trennlinie Def/Beispiel/Hinweis */

    /* Vertikale Abstände der Lernenden-Block-Liste (S143-B2 pb-2b). Luftig wie das
     * amascola-Skript; Block-Gap > Item-Gap, damit Gruppen klar getrennt sind und
     * die Items im Bündel zusammengehörig wirken. PO-Visual-fixiert (Magic-Number, S93). */
    --block-list-gap:         30px;  /* zwischen Blöcken/Gruppen (pb-2c: 24→30, luftiger) */
    --block-aufgabe-item-gap: 16px;  /* zwischen Aufgaben innerhalb eines Bündels */

    /* Mini-Drawer-Breite (Spiegel von .mud-main-content margin-left:56px). Wird von
     * der GoodToKnow-Full-Bleed-Kompensation gelesen (Welle C pb-2): der 100vw-Break-
     * out bezieht sich auf die Viewport-Breite inkl. fixiertem Mini-Drawer, daher
     * muss die Drawer-Breite herausgerechnet werden, sonst steht das Band links über. */
    --ama-drawer-mini-width: 56px;

    /* FSRS-State-Farben — Cluster K Sub-C, ADR-007b §6c (Konzept A
     * Hybrid-Skala). Multi-Tenant-Vorbereitung: White-Label-Themes
     * koennen --mud-palette-primary ueberschreiben, --fsrs-color-stable
     * + --fsrs-color-learning ziehen automatisch nach. Amber bleibt
     * fix (Brand-unabhaengiges Warning-Signal).
     *
     * --fsrs-color-new       Lernsteine ohne Record / State=New.
     *                        Token-basiert: --mud-palette-action-disabled.
     * --fsrs-color-learning  State=Learning + State=Relearning (gemeinsam,
     *                        Q-S103-6 Variante 3). Primary mit 50% Alpha.
     * --fsrs-color-overdue   State=Review + NextReview < NOW. Amber fix.
     * --fsrs-color-stable    State=Review + NextReview >= NOW. Primary.
     */
    --fsrs-color-new:      var(--mud-palette-action-disabled);
    --fsrs-color-learning: color-mix(in srgb, var(--mud-palette-primary) 50%, transparent);
    --fsrs-color-overdue:  #EF9F27;
    --fsrs-color-stable:   var(--mud-palette-primary);
}

/* Render-gap backing color. html/body have no background of their own, so any
   short frame during the auth/splash phase (login/logout-callback, splash, the
   layout swaps before the learner dashboard) exposes the body. The pre-app phase
   is backed Amascola blue so those gaps stay on-brand instead of flashing white;
   the app shell switches to the theme canvas (white) once MainLayout mounts and
   sets body.app-shell (see MainLayout.razor). The 250ms transition gives the soft
   blue->white fade on app entry (and white->blue on logout). NOT applied as a
   brand background on normal pages — those carry body.app-shell. The boot phase
   stays covered by the blue boot splash in index.html. Applied to BOTH html and
   body: on short app pages the body box is shorter than the viewport, so the
   blue html background would otherwise show through below it (min-height keeps
   the body filling the viewport as a second safeguard). */
html, body {
    background-color: var(--amascola-blue);
    transition: background-color 250ms ease;
}

/* pb-4e: Scrollbalken-Rinne immer reservieren → kein Layout-Shift, wenn beim
   Aufklappen (LU-Liste/Themen) eine vertikale Scrollbar erscheint/verschwindet
   (auch der „Rand rechts abgeschnitten"-Effekt löst sich damit). */
html {
    scrollbar-gutter: stable;
}

body {
    min-height: 100vh;
}

html.app-shell, body.app-shell {
    background-color: var(--mud-palette-background, #ffffff);
}

/* TopicFsrsBar — 4-Segment-Balken auf Schueler-Thema-Kacheln
 * (Cluster K Sub-C, ADR-007b §6c). CSS-Flexbox-Pattern: Segmente
 * skalieren via flex:n proportional zur Bucket-Anzahl. Eckig
 * (border-radius:0, amascola). Hoehe 8px konsistent zur amascola-line.
 */
.topic-fsrs-bar {
    display: flex;
    flex-direction: row;
    height: 8px;
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    background: var(--mud-palette-divider);
}

.topic-fsrs-bar__seg              { height: 100%; min-width: 0; }
.topic-fsrs-bar__seg--new         { background: var(--fsrs-color-new); }
.topic-fsrs-bar__seg--learning    { background: var(--fsrs-color-learning); }
.topic-fsrs-bar__seg--overdue     { background: var(--fsrs-color-overdue); }
.topic-fsrs-bar__seg--stable      { background: var(--fsrs-color-stable); }

.topic-fsrs-bar__caption {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 4px;
}

/* Neutraler Indikator (Schwellen-Logik a — kein Review-Record) */
.topic-fsrs-bar__neutral {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

/* Einheitlicher Page-Wrapper (ADR-018 Abschnitt 3) */
.page-content {
    padding: 32px 48px;
}

@media (max-width: 599px) {
    .page-content {
        padding: 16px;
    }
}

/* Geteilte Lernende-Content-Achse (S135 pb-1, BACKLOG UI-1 (d)-Folge,
   COMPONENT_PATTERNS §20). Konsolidiert die zuvor an vier Stellen wiederholte
   Inline-Konvention `max-width:960px; margin:0 auto` (LernendePage,
   FachDetailPage, EinheitDetailPage + HeroBanner-Inner, F_134_30). Das Literal
   960 lebt damit GENAU EINMAL. Nur Achse (Breite + Zentrierung) — das Padding
   bleibt als MudBlazor-Utility am Element (pa-4 auf den Pages; px-4 im
   HeroBanner-Inner, wo das vertikale Padding am Full-Bleed-MudPaper sitzt).
   MudContainer wurde verworfen (Phase A S135): MaxWidth.Medium ist zwar exakt
   960px, aber dessen Gutter ist responsiv 16/24px (!= konstantes px-4) und
   rein horizontal — die pa-4-Pages brauchen zusaetzlich vertikales Padding,
   das MudContainer nicht liefert. Mobil bleibt die Achse fluid (kein
   min-width -> 100%, kein horizontales Scrollen). */
.lernende-content-axis {
    max-width: 960px;
    margin-inline: auto;
}

/* GoodToKnow — "Good to know"-Summary-Band (ADR-008 §5, ADR-024a §i, Welle C pb-2).
   Voll-breites Pink-Band (Full-Bleed), das aus der 960px-.lernende-content-axis
   ausbricht; der Text bleibt auf der Content-Achse (Muster HeroBanner: Full-Bleed-
   Wrapper + innerer Achsen-Container). Drawer-Kompensation: der 100vw-Break-out
   bezieht die fixierte Mini-Drawer-Breite mit ein (.mud-main-content margin-left:56px),
   daher --ama-drawer-mini-width herausrechnen, sonst steht das Band links über. */
.good-to-know {
    margin-inline: calc(50% - 50vw + calc(var(--ama-drawer-mini-width) / 2));
    width: calc(100vw - var(--ama-drawer-mini-width));
    padding-block: 40px;
    background: var(--amascola-pink);
}

.good-to-know__inner {
    max-width: 960px;
    margin-inline: auto;
    padding-inline: 16px;
}

.good-to-know__text {
    color: white;
    line-height: 1.3;
}

.good-to-know__text--youth {
    font-size: 20px;
}

.good-to-know__text--adult {
    font-size: 28px;
}

/* Zwischentext — Uebergangstext (Paragraph/LearningText, Welle C). Mit
   .mud-main-content overflow-x:hidden (pb-5b) wuerde langer Text ohne
   Leerzeichen (inkl. KaTeX-Fliesstext) abgeschnitten statt umgebrochen.
   word-break:break-word ist kein CSS-Standard (Alias fuer overflow-wrap),
   aber cross-browser-sicher als Ergaenzung. Welle C pb-5c. */
.zwischentext {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* 404 / 403 — Fehlerseiten */
.not-found-container {
    position: relative;
    height: calc(100vh - var(--mud-appbar-height, 64px));
    background-color: var(--amascola-purple-light);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.not-found-logo-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

.no-access-logo-watermark {
    height: 115%;
    width: auto;
    transform: rotate(-12deg) translateX(15%);
}

.not-found-logo-watermark {
    height: 115%;
    width: auto;
    transform: rotate(12deg) translateX(15%);
}

.not-found-content {
    position: relative;
    z-index: 2;
    text-align: center;
    
    padding: 32px;
    max-width: 480px;
}

.not-found-title {
    font-family: 'Acta Pro', Georgia, serif;
    font-size: 6rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 16px;
    color: var(--amascola-purple);
}

.not-found-sub {
    color: var(--amascola-purple);
}

.not-found-logo-top {
    position: absolute;
    top: 24px;
    left: 32px;
    z-index: 3;
    width: 120px;
    height: auto;
}

/* Drawer — Flex-Layout fuer Spacer nach unten */
.drawer__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* UserProfileChip — Avatar-Block unten im Drawer */
.user-profile-chip {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 12px;
    min-height: 56px;
    /* S139 §20 pb-1: was inline style="cursor:pointer;" on the clickable chip
       div (UserProfileChip.razor). Value 1:1, no visual change. The chip is
       unconditionally clickable in every render state (incl. drawer-mini, where
       only __info/__logout are hidden), so cursor belongs on the base class —
       not a variant modifier. Drift-locked by
       S139UserProfileChipInlineStyleLockTests (source read — bUnit loads no CSS).
       Removal/edit anchor: keep in sync with the .razor markup. */
    cursor: pointer;
}

/* S139 §20 pb-1b: was inline style="position:relative;" on the wrapper div
   that contains the chip + the absolutely-positioned profile menu popover
   (UserProfileChip.razor). Value 1:1, no visual change. This is the
   positioning context for the popover (bottom:48px; left:0) — must stay
   relative. Drift-locked by S139UserProfileChipInlineStyleLockTests
   (source read — bUnit loads no CSS). Removal/edit anchor: keep in sync
   with the .razor markup. */
.user-profile-chip__anchor {
    position: relative;
}

.user-profile-chip__info {
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
    transition: opacity 0.2s;
}

.user-profile-chip__company {
    opacity: 0.6;
    line-height: 1.3;
}

.user-profile-chip__logout {
    flex-shrink: 0;
    transition: opacity 0.2s;
}

/* Mini-Modus: Info und Logout verstecken */
.mud-drawer--closed.mud-drawer-mini .user-profile-chip__info,
.mud-drawer--closed.mud-drawer-mini .user-profile-chip__logout {
    display: none !important;
}

/* Splash — Startseite (nicht eingeloggt) */
.splash__container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-color: var(--amascola-blue);
    display: flex;
    flex-direction: column;
    border: none;
}

.splash__container *,
.splash__container h1,
.splash__container p {
    border: none;
    outline: none;
}

.splash__appbar {
    display: flex;
    align-items: center;
    height: 72px;
    padding: 0 48px;
    background: #ffffff;
    margin-top: 5px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.splash__appbar img {
    width: 110px;
    height: auto;
    vertical-align: middle;
}

.splash__content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.splash__inner {
    text-align: center;
    padding: 0 24px;
}

.splash__headline {
    font-family: 'Acta Pro', Georgia, serif;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 400;
    color: #000000;
    line-height: 1.1;
    margin-bottom: 16px;
}

.splash__sub {
    font-family: 'GT Walsheim Pro', sans-serif;
    font-size: 1.1rem;
    font-weight: 300;
    color: #000000;
    margin-bottom: 40px;
}

.splash__deko {
    position: absolute;
    bottom: -20vh;
    right: -20vw;
    width: max(150vw, 150vh);
    min-height: 60vh;
    z-index: 0;
    pointer-events: none;
}

/* Auth — animierte Punkte */
.auth__dots {
    font-size: 3rem;
    line-height: 1;
    color: #000000;
    font-family: 'Acta Pro', Georgia, serif;
}
.auth__dots span {
    display: inline-block;
    animation: dot-pulse 1.4s infinite;
}
.auth__dots span:nth-child(2) { animation-delay: 0.2s; }
.auth__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

/* AppBar — Logo (linksbündig in der zentrierten .appbar__axis, pb-3 D-bis — kein
   eigener linker Margin mehr, das Achsen-padding-inline trägt den Abstand). */
.appbar__logo {
    height: 32px;
    width: auto;
    display: block;
}

/* pb-3 (D-bis): AppBar-Inhalt auf einer zentrierten 960er-Achse — Logo linksbündig
   darin (amascola.com-Verhalten), für BEIDE Rollen. Hamburger + Vorschau-Aktionen
   liegen ABSOLUT ausserhalb der Achse (Toolbar position:relative), damit der Logo-
   Anker beim Erscheinen des Hamburgers NICHT springt. */
.appbar__toolbar {
    position: relative;
    /* Drawer-aware (D-bis pb-3): padding-left spiegelt die Mini-Drawer-Breite, damit
       die innere 960er-Achse GENAU wie die Content-Achse (.lernende-content-axis in
       .mud-main-content margin-left:56) im Band [56px … Viewport-rechts] zentriert.
       So liegt das Logo bei JEDER Breite bündig auf der linken Block-Linie — nicht
       nur bei einer. MudAppBar Gutters="false" schaltet das Default-Toolbar-Padding
       ab, damit dieser Offset exakt 56px bleibt. */
    padding-left: var(--ama-drawer-mini-width);
    padding-right: 0;
}

.appbar__axis {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    /* 16px = pa-4 der Lernenden-Pages → Logo-Linksrand auf der linken Block-Linie. */
    padding-left: 16px;
    padding-right: 16px;
}

/* Hamburger (nur < Md via MudHidden) — out-of-flow, kein Logo-Sprung; horizontal
   in der Mini-Drawer-Breite (56px) zentriert: Button-Box = Drawer-Breite, das Icon
   zentriert sich darin bei 28px (Drawer-Mitte). Vorschau-"Beenden" absolut rechts.
   WICHTIG: .appbar__toolbar-Prefix (Spezifität 0,2,0) ist nötig, weil MudBlazors
   gleich-spezifisches .mud-button-root { position: relative } in index.html NACH
   site.css lädt — ohne Prefix gewänne MudBlazors relative und der Button bliebe im
   Flow (Hamburger schöbe das Logo, D-bis pb-3). */
.appbar__toolbar .appbar__nav-toggle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--ama-drawer-mini-width);
    z-index: 1;
}

.appbar__toolbar .appbar__actions {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* Lernenden-Footer (D-bis pb-4/pb-5) — zweizonig am Ende jeder Lernenden-Seite,
   Grünband OBEN, schwarzer Balken UNTEN. Liegt INNERHALB .mud-main-content
   (overflow-x:hidden) → Content-Breite, KEIN 100vw-Break-out, kein horizontaler
   Overflow (S144-Lektion). Sticky-Bottom via .mud-main-content Flex-Column (unten). */

/* Grünband (oben): Block-Logo-Muster repeat-x, oben klebend (background-position:
   top center). background-size: auto 150% → das Logo ist 1.5× höher als das 150px-
   Band, der untere Teil ist abgeschnitten, nur die Buchstaben-Oberteile sichtbar
   (PO-verifizierte Werte, Referenz amascola.com). Pfad relativ zu site.css. */
.lernend-footer__green {
    height: 150px;
    background-color: var(--amascola-green);
    background-image: url('../visuals/AmascolaLogoBlockGray.svg');
    background-repeat: repeat-x;
    background-position: top center;
    background-size: auto 150%;
}

/* Schwarzer Balken (unten): 50px total, weisse Wortmarke (22px) flex-zentriert,
   padding 8px oben/unten (PO-verifiziert). --amascola-black existiert noch nicht
   (BACKLOG Brandbook-Token) → #000 direkt. */
.lernend-footer__black {
    box-sizing: border-box;
    /* min-height (statt fix), damit die Wechselnavigation mit Pfeil-Buttons nicht
       klippt; Wortmarke-Modus bleibt bei 50px. */
    min-height: 50px;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    color: #fff;
}

.lernend-footer__wordmark {
    height: 22px;
    width: auto;
    display: block;
}

/* pb-5: Wechselnavigation (Pfeil links + "X von Y" Mitte + Pfeil rechts) ersetzt
   die Wortmarke in der schwarzen Zone. Pfeile sitzen an den Rändern der 960er-Achse
   (bündig mit den Block-Kanten); Ziel-Label neben dem jeweiligen Pfeil. Pfeile
   erben Weiss (Color.Inherit). */
.lernend-footer__nav {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    padding-inline: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Pfeil + Ziel-Label als EINE klickbare Einheit (<a>). Weiss, kein Underline; vertikal
   zentriert; padding-block für ≥44px Touch-Target; min-width:0 erlaubt Label-Ellipsis. */
.lernend-footer__nav-side {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 0;
    padding-block: 10px;
    color: #fff;
    text-decoration: none;
}

.lernend-footer__nav-side--next {
    justify-content: flex-end;
}

/* Rand (erste/letzte Einheit): nicht klickbar, abgeblendet. */
.lernend-footer__nav-side--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Ziel-Label (Einheit-Name/Datum) — dünn, klein, einzeilig, lange Namen abgeschnitten. */
.lernend-footer__nav-label {
    font-weight: normal;
    font-size: 0.85rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "X von Y" — dünn, klein, leicht zurückgestuft gegenüber den Labels. */
.lernend-footer__nav-pos {
    flex-shrink: 0;
    min-width: 64px;
    text-align: center;
    font-weight: normal;
    font-size: 0.85rem;
    opacity: 0.7;
}

.lernend-footer__nav-arrow {
    color: #fff;
}

/* Mobil (< 600px): Ziel-Labels ausblenden, nur Pfeile + "X von Y". */
@media (max-width: 600px) {
    .lernend-footer__nav-label {
        display: none;
    }
}


/* Dashboard — Hauptseite */
.dash__wrapper {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

.dash__banner {
    background-color: var(--amascola-pink);
    padding: 32px 48px;
    position: relative;
    z-index: 1;
}

.dash__banner-title {
    font-family: 'Acta Pro', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.1;
}

.dash__banner-sub {
    font-family: 'GT Walsheim Pro', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.dash__grid {
    padding: 32px 48px;
    position: relative;
    z-index: 1;
}

.dash__deko {
    position: absolute;
    bottom: -20vh;
    right: -20vw;
    width: max(150vw, 150vh);
    min-height: 60vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.08;
}

/* Dashboard-Karten — gemeinsame Basis */
.dash__card {
    border-radius: 0;
    min-height: 200px;
}

.dash__card--green  { background-color: var(--amascola-green) !important; color: #ffffff; }
.dash__card--purple { background-color: var(--amascola-purple) !important; color: #ffffff; }
.dash__card--blue   { background-color: var(--amascola-blue) !important; color: #000000; }
.dash__card--white  { background-color: #ffffff !important; color: #000000; border: 2px solid #000000; }

/* Karten-Text */
.dash__card-title {
    font-weight: 700;
}

.dash__card-sub {
    opacity: 0.6;
}

/* Lernsteine — Verwaltungsseite */
.lernsteine__wrapper {
    padding: 32px 48px;
}

.lernsteine__toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* ADR-018 Section 8 — Karten-Redesign mit linkem Akzentbalken (4px),
   Header-Tint, Body und Footer mit Hover-Aktionen.
   Die Akzentfarbe pro Karte wird inline via custom property --lstein-accent
   gesetzt (kein Hex in Komponenten — die Variable verweist auf var(--block-*)
   bzw. var(--amascola-pink) fuer Summary). */
.lstein-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--mud-palette-surface);
    border-left: 4px solid var(--lstein-accent, var(--mud-palette-lines-default));
    border-radius: 0;
    box-shadow: var(--mud-elevation-2);
    overflow: hidden;
}

/* Opt-in Hover-Akzent fuer Karten: linker Rand grau → purple on hover.
   Nur auf Verwaltungsseiten (Admin, Lernende, Faecher, Kollektionen),
   NICHT auf der Lernsteine-Seite (dort block-type-spezifische Farben). */
.lstein-card.card-hover-accent {
    border-left-color: var(--mud-palette-lines-default);
    transition: border-left-color 0.15s ease;
}
.lstein-card.card-hover-accent:hover {
    border-left-color: var(--amascola-purple);
}

/* PO-Test: Header grau im Ruhezustand, Farb-Tint on hover */
.lstein-card.card-hover-accent .lstein-card__header {
    background: color-mix(in srgb, var(--mud-palette-lines-default) 40%, white);
    transition: background 0.15s ease;
}
.lstein-card.card-hover-accent:hover .lstein-card__header {
    background: color-mix(in srgb, var(--lstein-accent, var(--mud-palette-lines-default)) 15%, white);
}

/* ============================================================
   S119 B-3c-UI-Polish-Sweep V2 pb-4b — Subject-Karte
   (Lernende-Sicht) BEM-Pattern. PO-Entscheid c1b 2026-05-19:
   - Q-c1b-1=1a: NUR Necon-Strich, KEIN Akzentbalken oben
     (bewusster ADR-018 §5 Drift, dokumentiert in ADR-026
     Backspiegelung S119).
   - Q-c1b-2=schwarz: Strich-Farbe #000 (Token
     --amascola-black existiert heute nicht, Backlog).
   - Q-c1b-3=ein Strich: nur unter Title, kein Sub-Strich
     vor FachKachel-Footer.
   S126 pb-6a: der .subject-card-Root + :hover + __date-line + __footer
   (alte LernendePage-Karte, in pb-4 durch SubjectTimelineCard ersetzt)
   entfernt — es bleiben nur die von SubjectTimelineCard wiederverwendeten
   Sub-Element-Klassen __header / __title / __divider (eigenstaendige
   Selektoren, kein Root noetig).
   ============================================================ */
.subject-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
}
.subject-card__title {
    font-family: 'GT Walsheim Pro', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subject-card__divider {
    border: 0;
    border-bottom: 1px solid #000;
    /* S119 pb-4d V3-3: oben 4px (Title-Unterkante → Strich),
       unten 12px (Strich → Body). PO-Smoke V2-Spec 2026-05-19. */
    margin: 4px 0 12px 0;
}

/* ============================================================
   S126 pb-3: SubjectTimelineCard — konsolidierte Lernende-Fach-
   Karte (Konzept-Phase-A §B). Renutzt .subject-card__title +
   .subject-card__divider (oben); hier nur die karten-eigenen
   Layout-Klassen. Touch-Targets der Topic-Zeilen >= 44px
   (DESIGN_SYSTEM, Mobile First).
   ============================================================ */
/* pb-4b: Hover-Lift der ganzen Karte — gleiches Muster wie
   .subject-card:hover (Elevation-4 + translateY(-2px) + Touch-Reset),
   keine erfundenen Werte. MudPaper.subject-timeline-card ist das Root. */
.subject-timeline-card {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    /* pb-4c: ganze Karte ist klickbar (Root = ausklappen / Fach oeffnen). */
    cursor: pointer;
    /* S136 pb-1 (F_136_5, schliesst B-3c-Befund 3): height:100% +
       flex-column, damit zwei Karten in einer MudGrid-Reihe (xs=12 md=6)
       gleich hoch sind. Das MudItem streckt sich auf Reihenhoehe (MudGrid =
       flex row, align-items:stretch by default); height:100% laesst die
       Karte das gestreckte MudItem fuellen. */
    height: 100%;
    display: flex;
    flex-direction: column;
    /* S136 pb-2 (F_136_2): Positionierungs-Kontext + Beschnitt fuer das
       dekorative Fach-Wasserzeichen. z-index:0 macht die Karte zu einem
       Stacking-Context, damit __watermark (z-index:-1) ueber der Karten-
       Flaeche, aber HINTER dem Inhalt liegt — ohne dass die Inhalts-Elemente
       eigene z-index brauchen. overflow:hidden beschneidet das uebergrosse,
       unten-rechts angeschnittene Icon an der Kartenkante (auch mobil xs=12). */
    position: relative;
    z-index: 0;
    overflow: hidden;
}
/* S136 pb-2 (F_136_2/F_136_4): dekoratives Fach-Wasserzeichen. Uebergrosses,
   unten-rechts angeschnittenes Fach-Icon hinter dem Inhalt. Nur gerendert wenn
   IconKey ein bekanntes Fach-Icon ist (F_136_4 — kein "sonstiges"-Fallback).
   aria-hidden + pointer-events:none → rein dekorativ, faengt keine Klicks der
   klickbaren Karte ab, fuer Screenreader unsichtbar.
   Magic-Number-Hinweis: Groesse/Opazitaet/Offset sind PO-Smoke-Startwerte. */
.subject-timeline-card__watermark {
    position: absolute;
    z-index: -1;
    /* pb-2d: LINKS, OBEN verankert (top/left, NICHT bottom). Die eingeklappte
       (kurze) Karte schneidet das grosse Icon unten ab; beim Aufklappen gibt
       die wachsende Kartenhoehe + overflow:hidden es fast ganz frei (Reveal-on-
       Expand ohne eigene Animation). Offsets PO-Smoke-tunbar. */
    top: 40px;
    /* pb-2e: weiter ueber die linke Kante hinaus → weniger Ueberlagerung des
       Textblocks (PO-Smoke: Σ sass zu sehr im Lesebereich). PO-tunbar. */
    left: -100px;
    line-height: 0;            /* kein zusaetzlicher Inline-Whitespace */
    pointer-events: none;      /* faengt keine Klicks ab (klickbare Karte) */
    /* Grauton via currentColor — die FachIcons-SVGs sind stroke="currentColor". */
    color: var(--mud-palette-text-secondary);
    opacity: 0.06;             /* niedrig: Vordergrund-Text behaelt 4.5:1 (WCAG) */
}
/* CSS schlaegt die harten 24px-Praesentations-Attribute der FachIcons-SVGs →
   uebergross. pb-2d: 300px (deutlich groesser fuer den Reveal-Effekt links).
   PO-Smoke-tunbar. */
.subject-timeline-card__watermark svg {
    width: 300px;
    height: 300px;
}
/* pb-4c: kleines ⓘ-Glyph (Size.Small), aber 44px-Hit-Area (Mobile First,
   DESIGN_SYSTEM Touch-Target) — behebt das pb-4b-Touch-Flag. */
.subject-timeline-card__info-btn {
    min-width: 44px;
    min-height: 44px;
}
/* pb-4c: Breite der schwebenden Info-Popover-Caption. */
.subject-timeline-card__info-pop {
    max-width: 240px;
}
.subject-timeline-card:hover {
    box-shadow: var(--mud-elevation-4);
    transform: translateY(-2px);
}
body.touch-device .subject-timeline-card:hover {
    box-shadow: var(--mud-elevation-1);
    transform: none;
}
.subject-timeline-card__title {
    cursor: pointer;
    transition: color 0.15s ease;
}

/* pb-1d: visuelles Klick-Signal für den Fachnamen (Klick öffnet das Fach,
   bereits verdrahtet). */
.subject-timeline-card__title:hover {
    color: var(--amascola-purple);
}
.subject-timeline-card__section-header {
    color: var(--mud-palette-text-secondary);
}
.subject-timeline-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.subject-timeline-card__entry {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 0;
    cursor: pointer;
}
.subject-timeline-card__entry:hover {
    color: var(--mud-palette-primary);
}
body.touch-device .subject-timeline-card__entry:hover {
    color: inherit;
}
.subject-timeline-card__entry-date {
    flex: 0 0 auto;
    min-width: 5.5rem;
    color: var(--mud-palette-text-secondary);
}
.subject-timeline-card__entry-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   S128 pb-4a: Thematisches Inhaltsverzeichnis (FachDetailPage
   Thematisch-Sicht). Eingerueckter, ausklappbarer Themen-Baum
   (F_127_10). Einrueckung pro Ebene via --thematic-depth (CSS-Var
   statt Inline-Hardcode, analog --lstein-accent). MudCollapse pro
   Knoten (KEIN MudExpansionPanel — Konsistenz SubjectTimelineCard).
   Kein additives Padding auf dem Knoten-Wrapper: die Einrueckung
   sitzt nur auf Header + LU-Karte und wird absolut aus der Tiefe
   berechnet, damit verschachtelte Knoten nicht doppelt einruecken.
   ============================================================ */
.thematic-node__header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;          /* Mobile-First Touch-Target (DESIGN_SYSTEM) */
    padding: 4px 0;
    /* pb-4c: Einrueckung pro Ebene = depth * 20px (multipliziert) → tiefere
       Ebenen stehen konsistent weiter rechts. */
    padding-left: calc(var(--thematic-depth, 0) * 20px);
}
/* pb-4a2: nur Knoten mit eigenen direkten LUs sind klickbar (Chevron-Toggle);
   Struktur-Knoten (nur Unterthemen) bleiben statisch. */
.thematic-node__header--toggle {
    cursor: pointer;
}
.thematic-node__header--toggle:hover {
    background-color: var(--mud-palette-action-default-hover);
}
body.touch-device .thematic-node__header--toggle:hover {
    background-color: transparent;
}
/* pb-4d: fest breiter Chevron-Slot (auch leer bei Blatt-Knoten) → der Titel steht
   buendig ueber Dreieck- UND Blatt-Knoten gleicher Tiefe (behebt die Inversion,
   bei der ein tieferer Blatt-Titel ohne Chevron links eines flacheren Dreieck-
   Titels landete). */
.thematic-node__chevron-slot {
    flex: 0 0 auto;
    width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.thematic-node__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Heading-Default-Margin neutralisieren (MudText rendert echte hN). */
    margin: 0;
}
/* pb-4g: Titel-Huelle traegt jetzt die Flex-Breite; bei echten Themen klickbar
   (→ ThemaDetailPage), Hover faerbt den Titel auf die Primaerfarbe. */
.thematic-node__title-link {
    flex: 1 1 auto;
    min-width: 0;
}
.thematic-node__title-link--clickable {
    cursor: pointer;
}
.thematic-node__title-link--clickable .thematic-node__name {
    transition: color 150ms ease;
}
.thematic-node__title-link--clickable:hover .thematic-node__name {
    color: var(--mud-palette-primary);
}
/* pb-4a3 F_128_9 / pb-4z2a F_128_17: zwei visuelle Tiers fuer IHV-/Sektions-
   Titel — GETEILT zwischen Thematisch-Baum (ThematicTopicNode) und Zeitlich-
   Sektionen (LearnerTimeSection). Das Theme rendert h2==h3 (beide 1.5rem/700,
   AmascolaTheme) → eine per-Ebene-Typo-Kaskade landet visuell nicht. Tier ist
   VIEW-RELATIV (oberste gezeigte Ebene = Tier 1, darunter Tier 2) — gesteuert
   ueber depth==0 vs depth>0 an der Call-Site, nicht ueber die Typo-Variante.
   Compound-Selektor (.ama-tier.ama-tier--N) = Spezifitaet (0,2,0) und schlaegt
   damit den MudText-Typo-Default (.mud-typography-*, 0,1,0) unabhaengig vom
   Eltern-Container und der Quell-Reihenfolge. Groessen aus den AmascolaTheme-
   H2/H4-Tokens. (ThematicTopicNode behaelt zusaetzlich das semantische <hN>
   fuer die Outline; die visuelle Groesse kommt aus dem Tier.) */
.ama-tier.ama-tier--1 {
    /* Oberste gezeigte Ebene: prominent (H2-Token 1.5rem/700). */
    font-size: 1.5rem;
    font-weight: 700;
}
.ama-tier.ama-tier--2 {
    /* Darunter: EINE klar wahrnehmbare Stufe darunter (H4-Token 1.25rem) +
       leichteres Gewicht als Zweit-Signal. Einheitlich fuer alle tieferen
       Ebenen (keine weitere Schrumpfung). */
    font-size: 1.25rem;
    font-weight: 500;
}
.thematic-node__count {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;       /* konstante Caption — skaliert NICHT mit Tiefe */
}
/* pb-4b/pb-4c: der Zaehler ist bei Knoten mit eigenen LUs ein Toggle fuer die
   LU-Liste — Plus-Icon + Label nebeneinander, Pointer, dezenter Hover-Akzent. */
.thematic-node__count--toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* pb-4d: Text links, Icon rechts */
    gap: 4px;
    cursor: pointer;
    transition: color 0.15s ease;
}
.thematic-node__count--toggle:hover {
    color: var(--amascola-purple);
}
/* pb-4c/pb-4d: + (zugeklappt) → × (aufgeklappt) via 45°-Drehung. transform-origin
   + will-change glaetten die Rotation sichtbar. */
.thematic-node__count-icon {
    transition: transform 0.2s ease;
    transform-origin: center;
    will-change: transform;
}
.thematic-node__count-icon.is-open {
    transform: rotate(45deg);
}
.thematic-node__lu {
    /* LU-Karten eine Ebene tiefer als ihr Themen-Header (pb-4c: 20px-Einheit). */
    padding-left: calc((var(--thematic-depth, 0) + 1) * 20px);
}
/* pb-4f/pb-4h: Schatten-Raum — der .mud-collapse-wrapper (overflow:hidden in
   MudBlazor 9.2.0) wuerde sonst den rechten Box-Shadow der LU-Karten abschneiden;
   pb-4h ergaenzt padding-top, damit die erste Karte oben nicht beschnitten wird.
   Kleiner Innenabstand reicht (Karten ruecken minimal vom Clip-Rand ein). */
.thematic-node__lu-list {
    padding-top: 8px;
    padding-right: 12px;
}
/* pb-4b-2: "Mehr zeigen"-Toggle am Tiefen-Cap — auf Hoehe der (gekappten)
   tieferen Unterthemen eingerueckt. */
.thematic-node__more {
    padding-left: calc((var(--thematic-depth, 0) + 1) * 20px);
}

/* pb-4z1: Datums-Marker am MudTimelineItem (Zeitlich-Sicht) — kleine Caption
   ueber der LU-Karte, Sekundaerfarbe, knapper Abstand. */
.zeitlich-timeline__date {
    display: block;
    margin-bottom: 4px;
    color: var(--mud-palette-text-secondary);
}
/* pb-4h: Schatten-Raum rechts fuer die LU-Karte in der Zeitlich-Sicht — in der
   sektionierten Sicht liegt die Timeline in einem MudCollapse (overflow:hidden),
   das sonst den rechten Box-Shadow abschneidet (analog pb-4f). */
.zeitlich-timeline__card {
    padding-right: 12px;
}

/* pb-4z2: einklappbare Zeitabschnitt-Sektionen ("Alle Zeitabschnitte").
   Header = klickbare Zeile (Chevron + Name + grauer Range + Zaehler), pro
   Ebene eingerueckt via --time-depth (analog --thematic-depth). */
.time-section__header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;          /* Mobile-First Touch-Target (DESIGN_SYSTEM) */
    padding: 4px 0;
    padding-left: calc(var(--time-depth, 0) * 1.25rem);
    cursor: pointer;
}
.time-section__header:hover {
    background-color: var(--mud-palette-action-default-hover);
}
body.touch-device .time-section__header:hover {
    background-color: transparent;
}
.time-section__name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Groesse/Gewicht kommt aus dem geteilten Tier (.ama-tier, F_128_17). */
}
.time-section__range {
    flex: 1 1 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;       /* grauer Datums-Range, konstante Caption */
}
.time-section__count {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* ============================================================
   S120 pb-7: Today-Hero fuer LernendePage B-3d Zeit-Sicht
   (ADR-027 Defaults-Tabelle Zeile B-3d).

   Block hebt sich aus dem Past/Future-Strip-Strang heraus —
   Border-Radius 8 px (statt 0 der subject-card) + Purple-Pale-
   Hintergrund. Phase-A Section 3.3.
   ============================================================ */
.due-today-hero {
    background: var(--amascola-purple-pale);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.due-today-hero__label {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}
.due-today-hero__count {
    font-family: 'GT Walsheim Pro', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--amascola-purple);
    line-height: 1.1;
}
.due-today-hero__empty {
    color: var(--mud-palette-text-secondary);
    font-size: 1rem;
}

.lstein-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--lstein-accent, var(--mud-palette-lines-default)) 15%, white);
}

.lstein-card__header .lstein-card__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

.lstein-card__type {
    flex-shrink: 0;
    color: var(--lstein-accent);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* Header-Metadaten (z. B. "12 Lernsteine" auf Kollektions-Karten) — kein
   Block-Typ-Label, sondern eine schlichte Zusatzinfo. Default-Textfarbe,
   normale Schrift, kein Uppercase. flex-shrink: 0 wie beim Type-Label,
   damit die Info nie verschwindet wenn der Titel lang wird. */
.lstein-card__meta {
    flex-shrink: 0;
    color: var(--mud-palette-text-primary);
    font-size: 0.875rem;
}

.lstein-card__body {
    padding: 16px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lstein-card__topic {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.lstein-card__content {
    color: var(--mud-palette-text-primary);
    opacity: 0.85;
    line-height: 1.5;
}

.lstein-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    gap: 8px;
}

.lstein-card__date {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.lstein-card__actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.lstein-card:hover .lstein-card__actions,
body.touch-device .lstein-card__actions {
    opacity: 1;
}

/* ADR-018 Section 5 — Listen-Zeile bekommt einen 4px breiten Farbrand
   links auf der ersten Zelle (Tabelle hat border-spacing: 0 → border auf <tr>
   rendert nicht zuverlaessig). Fallback: neutraler grauer Rand.
   Wenn --row-accent per RowStyleFunc gesetzt ist (z.B. Lernsteine), wird die
   Block-Typ-Farbe verwendet. */
.mud-data-grid .mud-table-body .mud-table-row > .mud-table-cell:first-child {
    border-left: 4px solid var(--row-accent, var(--mud-palette-lines-default));
}

/* Opt-in Hover-Akzent fuer DataGrid-Zeilen: Default grau, hover Purple.
   Klasse auf dem MudDataGrid setzen (Class="row-hover-accent").
   Nicht auf der Lernsteine-Seite verwenden — dort hat jede Zeile eine
   eigene Block-Typ-Farbe via --row-accent. */
.mud-data-grid.row-hover-accent .mud-table-body .mud-table-row > .mud-table-cell:first-child {
    transition: border-left-color 0.15s ease;
}
.mud-data-grid.row-hover-accent .mud-table-body .mud-table-row:hover > .mud-table-cell:first-child {
    border-left-color: var(--amascola-purple);
}

/* S80 Phase B-1.2 (B-5) — Mobile-Padding-Korrektur fuer DataGrid-Zellen.
   Auf Viewports <600px klebten die rechten Spalten am Rand, weil MudBlazor
   in Dense-Mode auf schmalen Screens das Cell-Padding zu stark reduziert.
   16px right-padding ist konsistent mit .page-content-Mobile-Padding. */
@media (max-width: 599.95px) {
    .mud-data-grid .mud-table-body .mud-table-cell,
    .mud-data-grid .mud-table-head .mud-table-cell {
        padding-right: 16px;
    }
}

/* FIX 9 — Plus-MudIconButton (Variant.Filled) auf Xs hat kleineres Padding
   als die anderen Header-Icons. Erzwinge identische 48x48 Dimensionen. */
.lernsteine__create-fab.mud-icon-button {
    width: 48px;
    height: 48px;
    padding: 12px;
}

/* KaTeX — LaTeX-Rendering */
.latex-block {
    text-align: center;
    margin: 12px 0;
}

.latex-inline {
    display: inline;
}

.latex-preview {
    min-height: 200px;
    overflow-x: auto;
    overflow-y: hidden;
}


/* Topics — Verwaltungsseite */
/* Themen-Accordion — flacher Look mit violettem Akzentbalken links und
   dezentem Hover auf dem Panel-Header (Pendant zum Listen-Hover des
   MudDataGrid). Wendet auf jeden MudExpansionPanel an, der konzeptuell
   eine Gruppierung (Fach, Kategorie) repraesentiert.

   Wichtig: MudBlazor 9 verwendet .mud-expand-panel-header (nicht
   .mud-expansion-panel-header — dieser Selektor existiert nicht). Quelle:
   data/v9.2.0/.../MudExpansionPanel.razor.cs HeaderClassname. */
.ama-expansion-panel {
    border-left: 4px solid var(--mud-palette-lines-default);
    transition: border-left-color 0.15s ease;
}

.ama-expansion-panel:hover {
    border-left-color: var(--amascola-purple);
}

.ama-expansion-panel .mud-expand-panel-header:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* TreeView-Eintraege im Accordion: gleicher Hover-Token wie Panel-Header und
   MudDataGrid-Zeilen — konsistentes "klickbar"-Signal. Quelle:
   data/v9.2.0/.../MudTreeViewItem.razor.cs ContentClassname
   ("mud-treeview-item-content") — der innere klickbare div ist das
   richtige Hover-Target, nicht das aeussere <li>. */
.ama-expansion-panel .mud-treeview-item-content:hover {
    background-color: var(--mud-palette-action-default-hover);
    cursor: pointer;
}

/* Hover-Aktionen — Buttons nur bei Hover sichtbar */
.card-actions-hover {
    opacity: 0;
    transition: opacity 0.2s ease;
    display: flex;
    justify-content: flex-end;
}

.mud-card:hover .card-actions-hover,
.mud-table-row:hover .card-actions-hover,
.mud-list-item:hover .card-actions-hover,
.mud-treeview-item-content:hover > div > .card-actions-hover {
    opacity: 1;
}

/* Touch-Geraete: Icons immer sichtbar (via JS touchstart-Detection) */
body.touch-device .card-actions-hover {
    opacity: 1;
}

/* LernendeThemenPage — Tree-Spacing-Polish (S112 C3b, PO-UI-Review).
   MudBlazor 9.2.0 exponiert KEINE dedizierte --mud-tree-view-*-CSS-
   Variable fuer Indent oder Item-Vertical-Padding — die Werte sind
   in _treeview.scss hardcoded (margin-inline-start: 17px fuer Nested
   Groups, padding: 1px 4px im Dense-Modus). Fallback: page-spezifische
   CSS-Klasse `.lernende-themen__tree` mit selektiver Override-Regel,
   damit das /topics-Pattern-Vorbild unangetastet bleibt
   (S109 §13c Pattern-Etablierung erst beim dritten Vorkommen). */
.lernende-themen__tree .mud-treeview-group .mud-treeview-group {
    margin-left: 10px;
    margin-inline-start: 10px;
}
.lernende-themen__tree .mud-treeview-item-content {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* MudMainContent — fixer Abstand, kein Content-Shift bei Drawer-Hover */
.mud-main-content {
    margin-left: 56px !important;
    transition: none !important;
    /* Das Full-Bleed-Band (.good-to-know) erzeugt einen horizontalen Overflow im
       MudMainContent-Container. overflow-x:hidden schneidet den Ueberhang ab, ohne
       sticky/fixed-Elemente (AppBar, AmascolaLine) zu beeinflussen — diese liegen
       ausserhalb von .mud-main-content. Welle C pb-5b. */
    overflow-x: hidden;
    /* Sticky-Bottom-Footer (D-bis pb-4): Flex-Column min-height:100vh drückt den
       Footer an den unteren Rand, wenn der Seiteninhalt kürzer als der Viewport ist;
       bei langem Inhalt scrollt er normal mit ans Ende. Der Seiteninhalt-Wrapper
       (.main-content-body) trägt flex:1, der Footer keine Flex (natürliche Höhe). */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Seiteninhalt-Wrapper innerhalb MudMainContent (@Body) — füllt den Raum über dem
   Footer (Sticky-Bottom, D-bis pb-4). */
.main-content-body {
    flex: 1 1 auto;
}

/* Drawer — Blue Light Hintergrund */
.drawer-blue-light {
    background-color: var(--amascola-blue-light) !important;
}

/* AmascolaLine — Fortschrittsbalken (ADR-006) */
.amascola-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 1400;
    pointer-events: none;
    flex-shrink: 0;
}

.amascola-line__bg {
    width: 100%;
    height: 100%;
    background-image: url('../visuals/AmascolaLine.svg');
    background-repeat: repeat-x;
    background-size: auto 5px;
}

.amascola-line__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--amascola-line-fill-color, transparent);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease;
}

/* Player — Lernenden-Vorschau */
.player__wrapper {
    padding: 32px 48px;
    max-width: 720px;
    margin: 0 auto;
}

.player__toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* Flashcard — 3D Flip */
.flashcard {
    perspective: 1000px;
    min-height: 280px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 16px;
}

.flashcard__inner {
    position: relative;
    width: 100%;
    min-height: 280px;
    transform-style: preserve-3d;
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.flashcard__inner--flipped {
    transform: rotateY(180deg);
}

.flashcard__face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 280px;
    backface-visibility: hidden;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    overflow-x: auto;
    overflow-y: hidden;
}

.flashcard__face--back {
    transform: rotateY(180deg);
}

/* Active face gets position:relative so .flashcard__inner grows with content */
.flashcard__inner:not(.flashcard__inner--flipped) .flashcard__face--front {
    position: relative;
}

.flashcard__inner--flipped .flashcard__face--back {
    position: relative;
}

.flashcard__content {
    text-align: center;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Lernenden-Block-Karten (Def/Beispiel/Hinweis/Aufgabe) — Spacing-Werte aus der
   Creator-.lstein-card gespiegelt (8px 16px Header / 16px Body), eigene Klassen,
   KEINE geteilte Klasse (Seam/Entkopplung, S143-B2 pb-0b). Flach (kein box-shadow):
   Lernenden-Blöcke stehen im Lesefluss, nicht im Karten-Grid. */
/* Lernenden-Block-Header (S143-B2 pb-1a): spiegelt .lstein-card__header EXAKT —
   flex, space-between, 8px 16px. Links der LearnerHeading (Title-Stil), rechts
   das Typ-Label (Type-Stil). Eigene Klassen, gleiche Werte, keine geteilte Klasse
   (Seam/Entkopplung). Header-Höhe = .lstein-card (kein MudText-Typo-Margin mehr). */
.block-typ__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
}

/* LearnerHeading links — identisch zu .lstein-card__title (schwarz, bold, 1rem,
   einzeilig mit Ellipsis). */
.block-typ__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}

/* Typ-Label rechts — identisch zu .lstein-card__type (klein, Akzentfarbe via
   GetCssVar inline gesetzt, schrumpft nicht). */
.block-typ__type {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* Vertikaler Abstand zwischen den gerenderten Blöcken/Gruppen der Lernenden-Sicht
   (S143-B2 pb-2b): luftig, konsistent über alle Kinder der Liste. */
.block-list {
    display: flex;
    flex-direction: column;
    gap: var(--block-list-gap);
}

/* Aufgabe-Gruppierung (S143-B2 pb-2): aufeinanderfolgende Exercise-Blöcke in EINEM
   Container mit durchgehendem linken Rand (kein Spalt). Nummerierte Einzel-Aufgaben. */
.block-typ__aufgabe-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Abstand zwischen Aufgaben einer Gruppe — der Rand bleibt durchgehend (am Container). */
.block-typ__aufgabe-item + .block-typ__aufgabe-item {
    margin-top: var(--block-aufgabe-item-gap);
}

/* Nummer-Marker: normal-gewichtet (pb-2b) — nicht fett; die LearnerHeading-
   Zwischenzeile (.block-typ__subheading) bleibt die fette Überschrift. */
.block-typ__aufgabe-nr {
    flex-shrink: 0;
    font-weight: normal;
    color: var(--block-exercise);
    line-height: 1.5;
}

.block-typ__aufgabe-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* LearnerHeading-Zwischenzeile einer gruppierten Aufgabe (kein eigenes Header-Band). */
.block-typ__subheading {
    font-weight: 700;
    margin-bottom: 4px;
}

/* Linke Text-Kante des klappbaren Erklärung/Hinweis-Panels (MudExpansionPanel) an die
   nicht-klappbaren BlockTyp-Blöcke angleichen (S143-B2 pb-2c). MudBlazor-Default-Gutters
   sind 24px; BlockTyp nutzt 16px (4px Rand + 16px Padding = 20px Text-x). Header- UND
   Content-Gutter auf 16px → alle Header- und Body-Texte liegen bündig auf einer Linie.
   Nur Padding — Klapp-Verhalten unverändert (§16c/ADR-027). */
.block-typ--hinweis .mud-expand-panel-header-gutters,
.block-typ--hinweis .mud-expand-panel-gutters {
    padding-left: 16px;
    padding-right: 16px;
}

/* Erklärung/Hinweis-Panel-Body: langer leerzeichenloser Text (inkl. KaTeX-
   Fliesstext) bricht mit .mud-main-content overflow-x:hidden (pb-5b) sonst ab
   statt um. Analog .zwischentext (pb-5c) — am Content, nicht am Header
   (.block-typ__title ist ohnehin nowrap+ellipsis). Welle D-bis pb-1. */
.block-typ--hinweis .mud-expand-panel-content {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Karten-Container: KaTeX scrollt horizontal; weisser Body (Header trägt den Tint).
   word-break/overflow-wrap analog .zwischentext (pb-5c) gegen Abschnitt bei langem
   leerzeichenlosem Text — gilt für alle nicht-klappbaren BlockTyp-Bodies. D-bis pb-1. */
.block-typ__body {
    padding: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Voll-Tint Definition (pink) + Rezept/Methode (grün) — der Body erbt denselben
   15%-Tint wie der Header, die ganze Karte ist gefärbt (D-bis pb-2). Revidiert
   S143-pb-0b ("weisser Body") für genau diese zwei Typen; ADR-024a §i Body-Zeilen
   Definition/Rezept. Example (blau) bleibt weisser Body / header-only. Tint-Token
   = derselbe Seam wie der Header (--block-*-tint, LearningBlockColors.GetTintVar). */
.block-typ--def .block-typ__body {
    background: var(--block-definition-tint);
}
.block-typ--recipe .block-typ__body {
    background: var(--block-recipe-tint);
}

/* Erklärung/Hinweis-Body auf schmalem Viewport etwas kleiner (PO-Befund "ein wenig
   kleiner", D-bis pb-1). Nur < sm (600px, MudBlazor-Breakpoint) — Desktop unverändert.
   Beide Body-Pfade (klappbar Panel-Content + nicht-klappbar .block-typ__body). */
@media (max-width: 600px) {
    .block-typ--hinweis .mud-expand-panel-content,
    .block-typ--hinweis .block-typ__body {
        font-size: 0.9375rem;
    }
}

/* Globaler KaTeX-Overflow-Schutz (alle LatexText-Stellen) */
.latex-block {
    max-width: 100%;
    overflow-x: auto;
}

.latex-inline .katex {
    max-width: 100%;
    overflow-x: visible;
    display: inline-block;
}

/* RichText (Welle D): Markdown-gerenderter Block-Body. Klassen-scoped, KEIN
   globaler ul/ol-Reset. Kein eigener Hintergrund — der Block-Tint kommt vom
   Eltern-Container (.block-typ__body / .block-typ--recipe etc.). Headings in
   GT Walsheim Pro (DESIGN_SYSTEM H2/H3 = GT Walsheim Pro Bold, nicht Acta Pro). */
.rich-text ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.rich-text ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.rich-text li {
    margin-bottom: 0.25rem;
}

.rich-text strong {
    font-weight: 700;
}

.rich-text em {
    font-style: italic;
}

.rich-text h2 {
    font-family: "GT Walsheim Pro", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0.75rem 0 0.25rem;
}

.rich-text h3 {
    font-family: "GT Walsheim Pro", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0.5rem 0 0.25rem;
}

.rich-text p {
    margin: 0 0 0.5rem;
}

.flashcard__hint {
    margin-top: 24px;
    opacity: 0.4;
    font-size: 0.85rem;
}


/* Self-Assessment Buttons */
.assessment__row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

/* Multiple Choice */
.mc__question {
    font-size: 1.15rem;
    line-height: 1.5;
    margin-bottom: 24px;
    text-align: center;
}

.mc__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mc__option {
    border-radius: 0 !important;
    text-transform: none !important;
    font-weight: 400 !important;
    justify-content: flex-start !important;
    padding: 12px 20px !important;
    box-shadow: none !important;
    border: 0.5px solid var(--mud-palette-lines-default) !important;
    overflow: hidden;
}

.mc__option--correct {
    border-color: var(--amascola-green) !important;
    background-color: rgba(80, 216, 119, 0.1) !important;
}

.mc__option--wrong {
    border-color: var(--amascola-orange) !important;
    background-color: rgba(240, 108, 61, 0.1) !important;
}

/* KaTeX in MC-Kacheln: Schriftgroesse lesbar */
.mc__option .katex {
    font-size: 1.1rem;
    max-width: 100%;
    overflow-x: auto;
}

.mc__option .katex-display {
    margin: 0.2em 0;
}

/* Session-Ende */
.session-end {
    text-align: center;
    padding: 48px 32px;
}

.session-end__icon {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--amascola-green);
}

.session-end__message {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto 24px auto;
}

/* ADR-017 — Full-Height Dialog */
.mud-dialog.amascola-dialog-fullheight {
    height: 100vh;
    max-height: 100vh;
}

/* S130 pb-5-fix-b — KursWorkspaceDialog enthaelt ein verschachteltes SearchOverlay
   (position:fixed). MudBlazor's .mud-dialog haelt via `animation: ... both` ein
   transform:scale(1) im Steady-State, das einen Containing-Block fuer
   position:fixed-Nachfahren bildet → der Overlay-Backdrop deckte nur den Dialog
   statt den Viewport. Scoped auf diesen Dialog: animation-fill-mode backwards
   entfernt den persistenten Transform (Oeffnungs-Animation bleibt sichtbar),
   der Containing-Block verschwindet → Backdrop verblurrt den ganzen Viewport
   (ADR-018 §7 / ADR-017). Kein Eingriff in andere Dialoge oder die geteilte
   SearchOverlay-Komponente. */
.mud-dialog.kurs-workspace-dialog {
    animation-fill-mode: backwards;
}

.mud-dialog.amascola-dialog-fullheight .mud-dialog-title {
    min-height: var(--mud-appbar-height);
    display: flex;
    align-items: center;
}

/* Xs FullScreen: Gap und Padding entfernen */
@media (max-width: 599px) {
    .mud-dialog-container {
        padding: 0 !important;
        margin: 0 !important;
        align-items: flex-start !important;
    }

    .mud-dialog {
        border-radius: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
    }
}

/* Backdrop: verschwommen + abgedunkelt (nur Desktop, Mobile = FullScreen hat keinen Overlay) */
.mud-overlay:has(+ .mud-dialog-container .amascola-dialog-fullheight),
.mud-overlay:has(~ .mud-dialog-container .amascola-dialog-fullheight) {
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.45) !important;
}

/* COMPONENT_PATTERNS Section 13 — Action-Button Hover (Topics-Pattern) */
.action-icon-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.hover-row:hover .action-icon-btn {
    opacity: 1;
}
body.touch-device .action-icon-btn {
    opacity: 1;
}

/* ADR-018 §5 — Klickbare DataGrid-/MudTable-Zeilen zeigen cursor:pointer.
   `hover-row` markiert eine Zeile als Listen-Element mit Hover-Verhalten;
   alle aktuellen Aufrufer (RowClick + Detail-Navigation) wollen den
   Pointer-Cursor. Touch-Geraete ignorieren cursor sowieso. */
.hover-row {
    cursor: pointer;
}

/* ADR-018 Section 5 — MudDataGrid Hover-Actions
   PropertyColumn/TemplateColumn cells expose action-icon-btn buttons that
   only appear when the row (.mud-table-row) is hovered. */
.mud-table-row:hover .action-icon-btn {
    opacity: 1;
}

/* COMPONENT_PATTERNS Section 14.3a Sub-Pattern (S84) —
   Action-Reveal ohne Klickbarkeit. Anwendung auf nicht-klickbaren
   DataGrid-Zeilen, deren Aktions-Icons hover-only sein sollen,
   ohne Primary-Color-Zeilen-Akzent (der waere faelschliche
   Klickbarkeit-Suggestion). Quelle: PO-Smoke S84-Bundle-1. */
.hover-row-actions-only .action-icon-btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.hover-row-actions-only:hover .action-icon-btn {
    opacity: 1;
}
body.touch-device .hover-row-actions-only .action-icon-btn {
    opacity: 1;
}

/* ADR-018 Section 6 — Filter-Toolbar (Zone 2)
   Kompakte Zeile unterhalb des Page-Headers mit Filter-Dropdowns,
   Spaltensteuerung-Icon und ChipSet fuer aktive Filter.
   min-height haelt den vertikalen Platz konstant, egal ob Filter oder
   Suchfeld angezeigt werden — kein Layout-Shift beim Toggle. */
.toolbar-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 56px;
}

.toolbar-zone__filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

@media (min-width: 600px) {
    .toolbar-zone__filters {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

.toolbar-zone__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
}

/* Filter-Chips: kompakte Hoehe + Schriftgroesse.
   "Eckig" wird ueber den nativen MudChip-Parameter Label="true" geloest
   (theme border radius statt 16px Pillenform) — kein CSS-Override noetig. */
.toolbar-zone__chips .mud-chip {
    height: 28px;
    font-size: 0.8125rem;
}

/* FIX 8 — Close-Icon auf Outlined-Filter-Chips dezenter (sekundaere Textfarbe). */
.toolbar-zone__chips .mud-chip .mud-chip-close-button {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

/* Filter-Dropdowns — kompakt auf Sm+, full-width auf Xs */
.filter-select {
    width: 100%;
}

@media (min-width: 600px) {
    .filter-select {
        min-width: 160px;
        max-width: 220px;
        width: auto;
    }
}

/* Filter-Toolbar-Felder im System-Bereich — Breiten-Klassen statt Inline-
   Styles (Bundle 4 Phase B, B4-4 / B4-5). Werte 1:1 aus Bestand-Inline-
   Styles auf SystemAuditLogPage und SystemUsersPage uebernommen
   (S91-Phase-A §3.1.1). */
.filter-toolbar-field--wide {
    flex: 1 1 240px;
}

.filter-toolbar-field--medium {
    flex: 1 1 180px;
}

.filter-toolbar-field--narrow {
    flex: 1 1 140px;
}

/* Audit-Log-Akteur-Subtitle — Opazitaet als Klasse statt Inline-Style
   (Bundle 4 Phase B, B4-5). */
.audit-log__actor-subtitle {
    opacity: 0.6;
}

/* COMPONENT_PATTERNS §20 — Inline-opacity → BEM-Modifier (S138 SC2).
   Identische Werte wie zuvor inline, kein visueller Change. */
.member-grid__empty-dash {
    opacity: 0.5;
}
.lernender-detail__phone {
    opacity: 0.7;
}
.lernender-detail__enrollment-date {
    opacity: 0.6;
}

/* Spaltensteuerung — Popover-Anker liegt relativ zum Icon-Button */
.column-picker {
    position: relative;
    display: inline-block;
}

.column-picker__menu {
    padding: 12px 16px;
    min-width: 200px;
}

/* ADR-018 Section 5 — DataGrid-Header optisch vom Inhalt absetzen.
   !important ist hier akzeptabel: MudBlazor setzt header weight ueber das
   subtitle2-Token (.mud-table-root .mud-table-head .mud-table-cell), das
   ohne !important unsere Regel ueberlaeuft. Diese Regel ist eine globale
   DataGrid-Konvention, kein Komponenten-Hack. */
.mud-data-grid .mud-table-root .mud-table-head .mud-table-cell {
    font-weight: 600 !important;
}

/* NoRecordsContent wird im DataGrid in ein <th>-Element gerendert,
   das vom Browser default font-weight: bold erbt — Reset auf normal. */
.mud-data-grid .mud-alert-message {
    font-weight: 400;
}

/* FIX 4 — Titel-Spalte im DataGrid darf umbrechen (KaTeX-Inline mit $...$ darf
   nicht abgeschnitten werden). Ueberschreibt MudBlazors default
   white-space: nowrap auf Tabellenzellen. */
.mud-data-grid .mud-table-cell.lernsteine__cell--wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* ===================================================================
   LerneinheitDetailPage — ADR-013c Schritt 1
   =================================================================== */

/* Label-Row enth\u00e4lt das "Lerneinheit"-Caption-Label + Spacer + Delete-
   Icon. Das Icon ist oben rechts im Header platziert (analog Dialog-
   Close-Icons) \u2014 zustandsinvariant gegen Read/Edit-State des Titels
   darunter (Session 42, Test-Runde 5). Keine k\u00fcnstliche min-height:
   die Row nimmt die H\u00f6he ihres gr\u00f6ssten Kindes (Delete-Icon) an. */
.unit-header__label {
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.08em;
}

.unit-header__delete {
    /* Top-bound unabh\u00e4ngig von align-items der Row: das Icon sitzt
       oben rechts, nicht in der vertikalen Mitte einer potenziell h\u00f6heren
       Row (durch Margin-Collapse oder nachfolgende Elemente). */
    align-self: flex-start;
}

.unit-header__title-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: -4px;
    border-radius: 0;
    transition: background-color 0.15s ease;
}

.unit-header__title-display:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.unit-header__title-edit-icon {
    opacity: 0;
}

.unit-header__title-display:hover .unit-header__title-edit-icon,
body.touch-device .unit-header__title-edit-icon {
    opacity: 0.6;
}

.unit-header__title-edit {
    max-width: 720px;
}

/* Block-Liste */
.unit-blocks {
    display: block;
}

.unit-blocks__zone {
    display: block;
    min-height: 48px;
}

.unit-block-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--mud-palette-surface);
    border-left: 4px solid var(--mud-palette-lines-default);
    box-shadow: var(--mud-elevation-1);
    cursor: pointer;
    transition: border-left-color 0.15s ease, background-color 0.15s ease;
}

.unit-block-row:hover {
    border-left-color: var(--amascola-purple);
    background-color: var(--mud-palette-action-default-hover);
}

.unit-block-row__drag {
    color: var(--mud-palette-text-secondary);
    cursor: grab;
    opacity: 0.5;
}

.unit-block-row:hover .unit-block-row__drag {
    opacity: 1;
}

.unit-block-row__dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.unit-block-row__main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.unit-block-row__title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unit-block-row__type {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.unit-block-row__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* MudDropContainer Overrides: dragged preview soll nicht die Zeile verschieben */
.unit-blocks .mud-drop-item-preview-start {
    opacity: 0.3;
}

/* ===================================================================
   LerneinheitDetailPage Sections — ADR-013c Schritt 2
   =================================================================== */

/* Jede Section besteht aus Header + DropZone + Per-Section-Add-Button.
   DropZones teilen sich denselben MudDropContainer (ItemsSelector mappt
   jeden Block auf seine Topic-Zone). Der Abstand unten haelt die Ab-
   grenzung zwischen Sections sichtbar, ohne eine harte Trennlinie zu
   erzwingen. */
.unit-section {
    margin-bottom: 24px;
}

.unit-section__header {
    margin-bottom: 8px;
}

/* Child-Section (ParentStudentTopicId != null, ADR-013c §5 Schritt 4):
   Gesamter Container 32 px eingerueckt (Header + Blocks + Add-Button).
   Header in H4 statt H3 — Groesse ist die einzige Abstufungs-Dimension,
   Gewicht bleibt 700 wie der Parent-H3 damit Child-Header nicht visuell
   sekundaer wirkt. Farbe unveraendert (Parent-Palette). */
.unit-section--child {
    padding-left: 32px;
}

.unit-section--child .mud-typography-h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.unit-section__header--child {
    color: var(--mud-palette-text-primary);
}

/* Leere Section: DropZone braucht eine Mindest-Hoehe damit Drag-Enter
   einen Hit-Target findet. Der Empty-State-Hinweis liegt INNERHALB der
   Zone und gibt ihr zusaetzlich Inhalt — die Regel hier ist der Schutz
   fuer den Moment bevor der Hinweis rendert. */
.unit-section .mud-drop-zone {
    min-height: 48px;
}

.unit-section__empty {
    color: var(--mud-palette-text-secondary);
}

/* "Ohne Thema"-Section: sekundaer-grau um optisch von echten Sections
   abzugrenzen. Der Header ist weiterhin H3 (gleiche Typo), nur die
   Farbe signalisiert "Fallback". */
.unit-section__header--none {
    color: var(--mud-palette-text-secondary);
}

/* Multi-Topic-Chip: Puls-Animation fuer 2 s beim Mono->Multi-Uebergang
   in derselben Client-Session. Die Klasse wird in der Page gesetzt und
   automatisch nach 2 s entfernt. Reduced-Motion-Fallback verzichtet auf
   die Animation und nutzt einen statischen Outline-Highlight. */
@keyframes amascola-chip-pulse {
    0%   { box-shadow: 0 0 0 0 var(--amascola-purple); }
    70%  { box-shadow: 0 0 0 8px rgba(101, 101, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(101, 101, 219, 0); }
}

.amascola-chip-highlight {
    animation: amascola-chip-pulse 1s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
    .amascola-chip-highlight {
        animation: none;
        outline: 2px solid var(--mud-palette-primary);
        transition: outline 2s;
    }
}

/* Multi-Topic- und Topic-Picker-Popover: Mindestbreite damit der Inhalt
   (Liste + Divider + Radio-Gruppe + Button / Autocomplete + Helper)
   nicht am Chip-Rand hakt. */
.multi-topic-popover .multi-topic-popover__body,
.topic-picker-popover .topic-picker-popover__body {
    min-width: 320px;
    padding: 12px 16px;
}

/* ===================================================================
   LernsteinHinzufuegenDialog \u2014 ADR-013c Schritt 1
   =================================================================== */

/* Full-height layout: DialogContent becomes a flex column so that the
   tabs host fills the space between the header and the footer
   (DialogActions). Requires amascola-dialog-fullheight on the dialog. */
.amascola-dialog-fullheight .mud-dialog-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.lernstein-add__tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.lernstein-add__tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.lernstein-add__tabs .mud-tabpanel {
    height: 100%;
    padding: 0;
}

/* Remove MudBlazor default uppercase on tab text (sentence case). */
.lernstein-add__tabs .mud-tab {
    text-transform: none;
}

/* S108 B-4a — Lernende-Zeitlich-Tabs: gleiche Sentence-Case-Linie wie
   .lernstein-add__tabs (MudBlazor-Default ist uppercase auf .mud-tab). */
.timeline-tabs .mud-tab {
    text-transform: none;
}

/* S149 Welle E-Creator — LernsteinEditDialog 3-Tab-Layout. Spiegelt
   .lernstein-add__tabs (Fullheight-Flex: sticky Tab-Header, scrollende
   Panels). Eigene Panel-Padding fuer den Formular-Atem (die Edit-Tabs
   tragen Felder + Live-Vorschau, kein selbst-verwaltetes Sticky-Layout).
   §13c-Konsolidierungs-Anker: viertes Tabs-in-Fullheight-Vorkommen →
   Kandidat fuer eine gemeinsame .amascola-dialog-tabs (BACKLOG). */
/* pb-3d (FINDING 2): MudForm rendert ein <form class="mud-form"> zwischen
   .mud-dialog-content (Flex-Spalte) und .mud-tabs — das unterbrach die
   Flex-Kette, sodass die Tabs keine Hoehenbegrenzung bekamen und der
   Tab-Header nicht sticky war. Das Form muss selbst Flex-Spalte sein und den
   Dialog-Content fuellen (der add-Dialog hat kein Form → dort kein Problem).
   DOM-verifiziert via bUnit-Render-Dump. */
.lernstein-edit__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.lernstein-edit__tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.lernstein-edit__tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* pb-3d (FINDING 1): die echte MudBlazor-9.2.0-Content-Panel-Klasse ist
   .mud-tab-panel (mit Bindestrich), unter .mud-tabs-panels (die .mud-tab-
   Header tragen dieselbe Klasse, daher das .mud-tabs-panels-Scoping).
   DOM-verifiziert via bUnit-Render-Dump — der frueher genutzte .mud-tabpanel
   matchte nichts. overflow-x:hidden klippt den horizontalen Ueberlauf des
   Kollektionen-Autocomplete. */
.lernstein-edit__tabs .mud-tabs-panels .mud-tab-panel {
    padding: 16px;
    overflow-x: hidden;
}

.lernstein-edit__tabs .mud-tab {
    text-transform: none;
}

/* pb-4: Frage-Vorschau-Carousel. MudCarousel positioniert die Folien absolut
   und braucht daher eine explizite Hoehe. Magic-Number — PO-bestaetigt pb-4b
   (220→320px). */
.lstein-question-carousel {
    height: 320px;
}

/* Welle E (F_140_5/F_141_2) — QuestionPreviewCarousel.
   MudCarousel is a fixed-height, full-width-via-mud-width-full component
   (MudMCP 9.2.0): the native pattern needs NO width/flex overrides (pb-3f
   removed the pb-3b..3e hacks that fought it). The item fills the fixed box and
   scrolls internally if a tall MC (2x2 grid) exceeds it — never clipped. The card
   itself sits in a reused .player__wrapper (WiederholenPage container: max-width
   720px, centered, padding 32px 48px) so it looks identical to the practice view
   and the edge arrows land beside the centered card, not over it (pb-3g). */
.question-preview-carousel__item {
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
}

.question-preview-carousel__fallback {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* S130 pb-4a — KursWorkspaceDialog: Fullheight-Tabs (sticky Tab-Header durch
   Flex-Layout, scrollende Panels). Spiegelt .lernstein-add__tabs (Q-025).
   Drittes Tabs-in-Fullheight-Vorkommen → §13c-Trigger: Konsolidierung zu einer
   gemeinsamen .amascola-dialog-tabs als Backlog-Anker. */
.kurs-workspace__tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.kurs-workspace__tabs .mud-tabs-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.kurs-workspace__tabs .mud-tab {
    text-transform: none;
}

.kurs-workspace__panel {
    padding: 16px;
}

/* Per-tab structure: sticky header + scrollable list. */
.lernstein-add__tab-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.lernstein-add__sticky {
    flex-shrink: 0;
    padding: 16px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.lernstein-add__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 16px;
}

.lernstein-add__new-tab {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
}

.lernstein-add__type-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lernstein-add__row-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.lernstein-add__row-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lernstein-add__row-sub {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lernstein-add__list {
    /* List scrolls via the parent .lernstein-add__scroll; remove its own
       max-height/overflow so the sticky header above stays sticky. */
    border: none;
}

/* ===================================================================
   SearchOverlay — ADR-018 §7 (flat + grouped, Session 46)
   =================================================================== */

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15vh 16px 16px;
    overflow: hidden;
}

.search-overlay__panel {
    width: 100%;
    max-width: 600px;
    max-height: 70vh;
    background: var(--mud-palette-surface, #fff);
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-overlay__input {
    padding: 12px 12px 8px;
}

/* DESIGN_SYSTEM §1 — BorderRadius = 0 absolut. MudTextField rendert
   defaultmässig mit 4px Rundung; die Override gilt für Outlined-Variante
   und für das innere Input-Element. */
.search-overlay__input .mud-input-outlined,
.search-overlay__input .mud-input-outlined-border,
.search-overlay__input .mud-input-slot,
.search-overlay__input .mud-input-control {
    border-radius: 0;
}

.search-overlay__empty-hint--top {
    padding: 4px 16px 8px;
    color: rgba(0, 0, 0, 0.6);
    font-size: 0.82rem;
}

.search-overlay__results {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 0 8px;
}

.search-overlay__group + .search-overlay__group {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 4px;
}

.search-overlay__group-header {
    font-family: "GT Walsheim Pro", "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(0, 0, 0, 0.6);
    padding: 10px 16px 4px;
}

.search-overlay__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.search-overlay__item:hover,
.search-overlay__item:focus-visible {
    background: rgba(0, 0, 0, 0.04);
    outline: none;
}

.search-overlay__item-icon {
    flex: 0 0 auto;
}

.search-overlay__item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.search-overlay__item-text {
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-overlay__item-subtitle {
    font-size: 0.78rem;
    color: rgba(0, 0, 0, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-overlay__empty-hint,
.search-overlay__state {
    padding: 12px 16px;
    color: rgba(0, 0, 0, 0.55);
    font-size: 0.85rem;
    text-align: center;
}

@media (max-width: 599px) {
    .search-overlay {
        padding: 10vh 0 0;
    }

    .search-overlay__panel {
        max-width: 100vw;
        max-height: 90vh;
        border-radius: 0;
    }
}


/* ============================================================
   S93 Phase B Commit 4 — ConfirmCriticalDialog Multiline-Body.
   white-space: pre-line erhaelt Newlines in Resx-Strings (z.B.
   Bullet-Listen mit • in OrgMember-Soft-Delete-Body), bricht
   aber lange Zeilen weiter automatisch um.
   ============================================================ */
.confirmcritical__body--multiline {
    white-space: pre-line;
}

/* ============================================================
   S93 Phase B Hot-Fix — ConfirmCriticalDialog Pflicht-Checkbox-
   Alignment. MudCheckBox rendert intern align-items: center auf
   dem Flex-Container, was bei mehrzeiligem Label die Box mittig
   zur Text-Hoehe positioniert. Bei langen Cascade-Erklaerungen
   (DSGVO-Soft-Delete-Body) ist das visuell unsauber — Standard-
   Form-Konvention ist Top-Alignment. align-items: flex-start auf
   den .mud-checkbox-Wrapper kippt das gewuenscht.
   ============================================================ */
.confirmcritical__checkbox-top-align .mud-checkbox {
    align-items: flex-start;
}

/* Hot-Fix-2 (S93) — Kompensiert MudCheckBox-internes Touch-Target-
   Padding, damit das Label-Top-Edge sichtbar mit dem Checkbox-
   Visual-Top-Edge fluchtet. Wert empirisch fuer MudBlazor 9.2.0
   ermittelt — bei Upgrade auf 9.3+ verifizieren. Aktuell: 4px
   (S93 Hot-Fix-3 PO-Verifikation; 9px aus Hot-Fix-2 war zu viel). */
.confirmcritical__checkbox-top-align .mud-checkbox > .mud-typography {
    padding-top: 4px;
}

/* ============================================================
   S93 Phase B Commit 5 — LinkUserDialog Listen-Items.
   Klickbare Liste mit Selected-Highlight. Sub-Pattern zu
   row-hover-accent (§14.3a) — kein DataGrid sondern MudList.
   ============================================================ */
.link-user-dialog__list {
    max-height: 320px;
    overflow-y: auto;
}
.link-user-dialog__item {
    cursor: pointer;
    border-left: 4px solid var(--mud-palette-lines-default);
    transition: border-left-color 0.15s ease;
}
.link-user-dialog__item:hover {
    border-left-color: var(--amascola-purple);
}
.link-user-dialog__item--selected {
    border-left-color: var(--amascola-purple);
    background-color: color-mix(in srgb, var(--amascola-purple) 8%, transparent);
}

/* ==========================================================
   S114 B-3b — Lernende ThemaDetailPage (Sticky + Indent + Marker)
   Sticky-Disziplin max 2 Layer (Q-S114-5):
     Layer 1 — Breadcrumb (top: 0)
     Layer 2 — Datums-Section-Header (top: --ama-sticky-offset-2)
   ========================================================== */

:root {
    --ama-sticky-offset-1: 0px;
    --ama-sticky-offset-2: 48px;
    --ama-thema-indent-step: 24px;
}

@media (max-width: 600px) {
    :root {
        --ama-sticky-offset-2: 40px;
        --ama-thema-indent-step: 16px;
    }
}

.lernende-sticky-1 {
    position: sticky;
    top: var(--ama-sticky-offset-1);
    z-index: 3;
    background: var(--mud-palette-background);
    padding: 8px 0;
}

.lernende-sticky-2 {
    position: sticky;
    top: var(--ama-sticky-offset-2);
    z-index: 2;
    background: var(--mud-palette-background);
    padding: 4px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.lernende-thema-detail {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
}

.lernende-thema-detail__sticky-top {
    margin-bottom: 16px;
}

.lernende-thema-detail__date-section {
    margin-bottom: 16px;
}

.lernende-thema-detail__date-header {
    margin-bottom: 8px;
}

/* B1b-3 (S141, F_141_7): .lernende-thema-detail__block + __block-content
   wurden entfernt — verwaist nach B1b-2 (095c94c), das die Inline-MudPaper-
   Block-Karte durch den geteilten LearningBlockRenderer ersetzt hat
   (ADR-024a §1.1). Die Block-Optik kommt jetzt aus den block-typ--*-
   Komponenten; --lstein-accent wird in der Themen-Ansicht nicht mehr gesetzt. */

/* S121 pb-7c — Future-Strip-Tap-Affordance + Tooltip-Click-Hijack-Fix.
 *
 * Problem (DOM-Dump 2026-05-23 PO-Smoke pb-7b): MudChart rendert ein
 * <g class="mud-charts-tooltip">-Overlay, das beim Hover sichtbar wird
 * und Maus-Events am Tooltip-Rect abfaengt. Konsequenz:
 *   - Cursor bleibt Default (Pointer-Affordance pb-7b nicht sichtbar).
 *   - Click landet auf Tooltip-Overlay statt auf circle-Hover-Point
 *     mit dem SetSelectedIndexAsync-Handler.
 *
 * Loesung: pointer-events:none auf den Tooltip-Container fuer Future-
 * Strip-Instanzen. Der Tooltip rendert visuell (opacity/Hover-Indikator
 * sichtbar), aber Maus-Events gehen durch zum unterliegenden circle-
 * onclick.
 *
 * Zusatz: cursor:pointer explizit auf Future-Strip-Wrapper + SVG-
 * Children (Linie + Marker + Hover-Point) — Tap-Affordance.
 *
 * Past-Strip-X1-Schnitt: data-testid="trend-strip-past-chart" wird
 * vom Suffix-Selector [data-testid$="-future-chart"] NICHT gematcht.
 * Past-Strip-Verhalten bleibt komplett unveraendert (S120 pb-10b-e-e
 * Read-Linie + pb-5 OnBucketTapped-no-Op X1-Drift-Verriegelung).
 *
 * Drift-Implikation: scoped FsrsTrendStrip.razor.css aus pb-7b
 * (`trend-strip--tappable { cursor: pointer }`) reicht wegen Blazor-
 * CSS-Isolation nur bis zum Wrapper-Element, nicht in MudChart-
 * Internals (mud-charts-tooltip, mud-chart-point, etc.) durch. Daher
 * der globale Fix hier. Die pb-7b-scoped-CSS-Klasse bleibt als
 * semantische Markierung fuer zukuenftige Wrapper-Hover-Effekte.
 *
 * Memory-Lesson L4-S121 (voll dokumentiert in pb-9 Doku-Sweep):
 * MudChart-Internal-Children sind nicht via scoped .razor.css
 * steuerbar; globaler CSS-Fix via data-testid-Selector ist der
 * Bestand-Pattern (analog COMPONENT_PATTERNS §23 MudTooltip-HTML-
 * title-Fallback S103 + DESIGN_SYSTEM Tooltip-Layer-Konvention).
 */
[data-testid$="-future-chart"] {
    cursor: pointer;
}

[data-testid$="-future-chart"] .mud-chart-point,
[data-testid$="-future-chart"] .mud-chart-line,
[data-testid$="-future-chart"] .mud-chart-serie {
    cursor: pointer;
}

[data-testid$="-future-chart"] .mud-charts-tooltip {
    pointer-events: none;
}

/*
 * Einheit-Sicht Pfeil-Ziel-Label (S134-W4 pb-3c, F_134_27): das Ziel-Label
 * im Vor/Zurueck-Button truncatet. Responsive max-width — mobil knapp, ab der
 * MudBlazor sm-Breakpoint (600px) grosszuegiger. Voller Text steht als
 * HTML-title-Attribut am Button (§23: kein MudTooltip-Wrapper).
 */
.einheit-pfeil-label {
    display: inline-block;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

@media (min-width: 600px) {
    .einheit-pfeil-label {
        max-width: 14rem;
    }
}

/* ===================================================================
   Lernende Fächer-Übersicht (S146 pb-1 / pb-1b, Welle E)
   Ganzseitiger violetter Full-Bleed-Hintergrund (Muster .good-to-know,
   Welle C: 100vw minus Mini-Drawer) mit dekorativem Logo-Wasserzeichen;
   Fach-Kacheln im Auto-Fit-Grid (füllen die Zeile, 1 Fach = volle Breite).
   Nur CSS-Variablen / Named-Colors (kein Hardcoded-Hex). Hintergrund kann
   pro Schule via --amascola-purple überschrieben werden (Multi-Tenant).
   =================================================================== */
/* Vollhöhe (pb-1c): min-height:100% greift auf dem flex:1-Body-Wrapper ohne
   definite Höhe nicht zuverlässig. Stattdessen wird der Body-Wrapper NUR auf
   dieser Seite (:has → kein Blast-Radius) zur Flex-Column, und die Full-Bleed-
   Fläche füllt ihn via flex:1 (Sticky-Footer-Muster S145 .main-content-body{flex:1}). */
.main-content-body:has(.faecher-uebersicht) {
    display: flex;
    flex-direction: column;
}

.faecher-uebersicht {
    /* Full-Bleed: aus der Content-Achse ausbrechen, Mini-Drawer-Breite
       herausrechnen (analog .good-to-know, Welle C pb-2). */
    margin-inline: calc(50% - 50vw + calc(var(--ama-drawer-mini-width) / 2));
    width: calc(100vw - var(--ama-drawer-mini-width));
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: var(--amascola-purple);
    padding: 24px;
}

/* Übergrosses, unten-rechts angeschnittenes Logo hinter dem Inhalt.
   pointer-events:none → fängt keine Klicks der Kacheln ab. */
/* pb-1c: kein eigenes opacity — AmascolaLogoBlock.svg bringt die Transparenz
   bereits mit. pb-1e: feste Platzierung (kein Random) — gross, leicht gedreht,
   unten rechts über die Kante hinaus (vom overflow:hidden der Seite beschnitten,
   immer prominent). Fixe -10°-Rotation (Zufall wirkte unruhig). */
.faecher-uebersicht__watermark {
    position: absolute;
    right: -5%;
    bottom: -20%;
    /* pb-1f: max(80vw, 60vh) → bleibt auch auf schmalem/hohem Viewport prominent
       (80vw allein wäre dort zu klein und fiele nach oben weg). */
    width: max(250vw, 200vh);
    height: auto;
    transform: rotate(-10deg);
    pointer-events: none;
    z-index: 0;
}

.faecher-uebersicht__content {
    position: relative;
    z-index: 1;
}

.faecher-uebersicht__title,
.faecher-uebersicht__empty {
    color: white;
}

/* auto-fit (nicht auto-fill): leere Tracks kollabieren → 1 Fach füllt die
   volle Breite, 2–6 Fächer teilen sich die Zeile gleichmässig. align-items:
   stretch → alle Karten einer Zeile gleich hoch. */
.faecher-uebersicht__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
    gap: 16px;
    margin-top: 24px;
}

/* Weisse Karte mit leichtem Purple-Tint; füllt ihre Grid-Zelle (Höhe via
   Grid-stretch), min-height hält sie proportioniert (nicht winzig).
   Hover-Lift via Box-Shadow. */
.fach-uebersicht-karte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: 180px;
    padding: 20px;
    background-color: color-mix(in srgb, var(--amascola-purple) 8%, white);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
    /* Stacking-Context + Beschnitt für das Fach-Icon-Wasserzeichen (pb-1c). */
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.fach-uebersicht-karte:hover,
.fach-uebersicht-karte:focus-visible {
    /* pb-1d: gleicher Hover-Lift-Token wie die Dashboard-Karte
    (.subject-timeline-card:hover). */
    box-shadow: var(--mud-elevation-4);
    color: var(--mud-palette-primary);
    outline: none;
}

/* Touch: kein klebriger Hover-Schatten (§9, analog .subject-timeline-card). */
body.touch-device .fach-uebersicht-karte:hover {
    box-shadow: none;
}

/* Fach-Icon als dezentes Wasserzeichen unten rechts (Grösse/Position analog
   .subject-timeline-card__watermark, S136): gedämpftes Grau, an der Ecke vom
   overflow:hidden der Karte beschnitten. z-index:-1 (Karte = Stacking-Context
   via position+z-index) → über dem Karten-Tint, hinter Name/Button.
   FachIcons-SVGs sind stroke="currentColor". */
.fach-uebersicht-karte__watermark {
    position: absolute;
    z-index: -1;
    right: -10px;
    bottom: -10px;
    line-height: 0;
    pointer-events: none;
    color: var(--mud-palette-text-secondary);
    opacity: 0.12;
    /* pb-1d/pb-1e: stark vergrössert, an der unteren rechten Ecke verankert →
       überlappt deutlich und wird vom overflow:hidden der Karte beschnitten. */
    transform: scale(2.8);
    transform-origin: bottom right;
}

.fach-uebersicht-karte__watermark svg {
    width: 90px;
    height: 90px;
}

/* pb-1f: Name füllt den Raum über dem Button (flex:1) und zentriert sich darin
   vertikal + horizontal; der Üben-Button bleibt via margin-top:auto unten. */
.fach-uebersicht-karte__name {
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
}

/* Üben-Button mittig, an den unteren Kartenrand geschoben (margin-top:auto)
   → gleichmässige Proportion bei gestreckten Karten. */
.fach-uebersicht-karte__cta {
    align-self: center;
    margin-top: auto;
}

/* Sub-Nav-Einträge je aktives Fach (MainLayout, S146 pb-1) leicht eingerückt
   gegenüber dem "Fächer"-Oberpunkt. */
.nav-faecher-sub .mud-nav-link-text {
    padding-left: 16px;
}

@media (max-width: 600px) {
    .faecher-uebersicht__grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   Einheiten-Karte Dreispalter (S146 pb-4): Titel | dedup-Chips | Kalenderdatum.
   Liegt im .lstein-card-Chrome (Purple-Linksakzent, Box-Shadow); ersetzt den
   frueheren __header/__body-Aufbau. Fortschrittsindikator bewusst NICHT
   gebaut (Q-S146-1). Nur CSS-Variablen.
   =================================================================== */
.unit-card__grid {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    align-items: center;
    gap: 8px;
    /* pb-4b: pa-4 (16px) analog .lstein-card-Pattern. */
    padding: 16px;
}

/* Titel (pb-4b: 1.125rem/600); Farbe wechselt on hover. */
.unit-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: break-word;
    transition: color 0.15s ease;
}

.unit-card__chips {
    min-width: 0;
}

/* Kalenderdatum: grosse Tageszahl (pb-4b: default grau, on hover primary),
   darunter ausgeschriebener Monat (+ Jahr bei Cross-Year). */
.unit-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: end;
    text-align: center;
    line-height: 1.1;
}
.unit-card__date-day {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    transition: color 0.15s ease;
}
.unit-card__date-month,
.unit-card__date-year {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
}

/* pb-4d: kein Rand — weder der 4px-lstein-Linksakzent noch ein 1px-Rahmen.
   Die Karte traegt nur Schatten. */
.unit-card {
    border: none;
}
.unit-card.lstein-card--clickable {
    transition: box-shadow 0.15s ease;
}

/* Hover-Lift der klickbaren Einheiten-Karte (pb-4b/pb-4d): Box-Shadow wie
   Dashboard/Faecherkarte; Titel + Tageszahl wechseln auf die Primaerfarbe
   (KEIN Rand-Effekt mehr). */
.unit-card.lstein-card--clickable:hover {
    box-shadow: var(--mud-elevation-4);
}
.unit-card.lstein-card--clickable:hover .unit-card__title,
.unit-card.lstein-card--clickable:hover .unit-card__date-day {
    color: var(--mud-palette-primary);
}
/* Touch: kein klebriger Hover (§9). */
body.touch-device .unit-card.lstein-card--clickable:hover {
    box-shadow: var(--mud-elevation-2);
}

/* Themen-Chips eckig (4px statt Pille) + Purple-Hover (pb-4b). Compound-Selektor
   .unit-card__chip.mud-chip hebt die Spezifitaet ueber MudBlazors .mud-chip
   (site.css laedt vor MudBlazor.min.css, S145-Lehre). */
.unit-card__chip.mud-chip {
    border-radius: 4px;
}
.unit-card__chip.mud-chip:hover {
    background-color: var(--amascola-purple-pale);
    color: var(--amascola-purple);
}

/* Mobile: 1 Spalte — Titel, dann Datum, dann Chips. */
@media (max-width: 600px) {
    .unit-card__grid {
        grid-template-columns: 1fr;
    }
    .unit-card__title { order: 1; }
    .unit-card__date {
        order: 2;
        flex-direction: row;
        gap: 4px;
        align-items: baseline;
        justify-self: start;
    }
    .unit-card__chips { order: 3; }
}