/* ─────────────────────────────────────────────────────────────────────────────
   style.css – Gemeinsame Basis-Styles für alle Seiten
   Seiten-spezifische Styles (Container-Breite, Tabellen, Karten, …)
   verbleiben im jeweiligen <style>-Block des Templates.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Variablen & Reset ───────────────────────────────────────────────────── */
:root {
    --bg-color:    #e8ecf0;
    --header-bg:   #2c3e50;
    --header-bg-hover: #34495e; /* dunklere Hover-Stufe des Akzents (Theme-fähig) */
    --header-fg:   #fff;

    /* Semantische Farben — Referenz: .claude/design.md */
    --color-success: #28a745;
    --color-danger:  #dc3545;
    --color-warning: #f59e0b;
    --color-info:    #2980b9;
    --color-text:    #333;
    --color-muted:   #666;
    --color-border:  #ddd;

    /* Border-Radius-Scale */
    --radius-xs:   4px;   /* kleine Buttons, Icon-Buttons */
    --radius-sm:   5px;   /* Standard-Buttons, Form-Inputs */
    --radius-md:   8px;   /* Cards, Panel-Wrapper */
    --radius-lg:   10px;  /* Modals, Drawers */
    --radius-xl:   12px;  /* große Panels */
    --radius-pill: 20px;  /* Badges, Chips, Tour-Button */

    /* Shadow-Scale */
    --shadow-sm: 0 2px 8px rgba(0,0,0,.08);   /* Cards */
    --shadow-md: 0 8px 32px rgba(0,0,0,.25);  /* Modals */
    --shadow-lg: 0 10px 40px rgba(0,0,0,.3);  /* große Panels */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-color);
    color: var(--color-text);
    line-height: 1.5;
    padding: 1rem;
    padding-bottom: 48px; /* Platz für Fixed-Footer */
}

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
    background: var(--header-bg);
    color: var(--header-fg);
    padding: 0.4rem 1.5rem 0;
    border-radius: 8px;
    margin-bottom: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Sticky Nav: Klasse wird vom Server gesetzt wenn die Einstellung aktiv ist.
   Der Header klebt dann oben und scrollt nicht mit dem Seiteninhalt weg.
   z-index 50 liegt über Seiteninhalten, aber unter Overlays (200+). */
.sticky-nav header {
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.15rem;
}

header h1 { font-size: 1.1rem; font-weight: 600; }

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 38px;
    transition: opacity 0.2s;
}
.nav-logo:hover { opacity: 0.9; }
.nav-logo img {
    height: 100%;
    width: auto;
}
/* Co-Branding: Hochschul-Logo NEBEN dem SyllDesign-Logo (ersetzt es nicht). */
.nav-hs-sep {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}
.nav-hs-logo {
    height: 32px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
/* Zweistufige Header-Faerbung: die obere .header-top ist die System-/Konto-Ebene
   (--header-bg). Die Reiter-Zeile ist der Arbeitsbereich des aktuellen
   Studiengangs und wird mit dem etwas helleren Geschwisterton abgesetzt
   (--header-bg-hover). margin:0 -1.5rem blutet das Band bis an die abgerundeten
   Container-Raender; die unteren Ecken werden mitgerundet. */
.main-nav {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    background: var(--header-bg-hover);
    margin: 0 -1.5rem;
    padding: 0.3rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.18);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    padding: 0.28rem 0.9rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    background: rgba(255,255,255,0.12);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.nav-link:hover  { background: rgba(255,255,255,0.22); color: #fff; }
.nav-link.active { background: #fff; color: var(--header-bg); }
.nav-icon { flex-shrink: 0; }
/* Vertikaler Separator zwischen Inhalt- und Kollaborations-Gruppe in der Nav */
.nav-sep { width: 1px; background: rgba(255,255,255,0.25); align-self: stretch; margin: 0 0.2rem; flex-shrink: 0; }
@media (max-width: 860px) { .nav-label { display: none; } }

/* Mobile-Burger: nur unter 480 px sichtbar, vor dem Logo platziert.
   Klick togglet .open auf .main-nav und steuert ARIA-Status (siehe nav-burger.js). */
.nav-burger {
    display: none; /* per Default versteckt; @media unten zeigt ihn */
    background: none; border: none; padding: 0.3rem;
    color: rgba(255,255,255,0.85); cursor: pointer;
    border-radius: 4px;
    align-items: center; justify-content: center;
}
.nav-burger:hover { background: rgba(255,255,255,0.15); color: #fff; }
.nav-burger:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 480px) {
    .nav-burger { display: inline-flex; }
    /* Header oben auf position:relative damit das absolute Panel sich daran ausrichtet. */
    header { position: relative; }
    .main-nav {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--header-bg);
        flex-direction: column; align-items: stretch;
        gap: 0.25rem;
        margin: 0; /* das Full-Bleed-Band der Desktop-Reiterzeile zuruecksetzen */
        padding: 0.5rem;
        border-top: 1px solid rgba(255,255,255,0.18);
        border-radius: 0;
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        z-index: 100;
    }
    .main-nav.open { display: flex; }
    .main-nav .nav-link { width: 100%; box-sizing: border-box; }
    .main-nav .nav-sep { display: none; }
    /* Im Mobile-Panel sind Labels wieder sichtbar (Icons allein ohne Text wären sinnlos im Drawer). */
    .nav-label { display: inline; }
}

/* Rechte Header-Gruppe: Bell + User-Avatar/Dropdown sitzen als Einheit
   am rechten Rand (statt durch space-between einzeln verteilt zu werden). */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Notification-Bell ──────────────────────────────────────────────────── */
.nav-bell { position: relative; }
.nav-bell-btn {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.85);
    padding: 0.35rem; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
}
.nav-bell-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.nav-bell-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Feedback-Knopf im rechten Cluster — bewusst farbiger CTA (orange), damit er
   gegen die monochromen Glocke/Zahnrad/User-Elemente nicht untergeht. Feedback
   ist uns wichtig und soll sofort ins Auge fallen. */
.nav-feedback-btn {
    background: #e67e22; border: none; cursor: pointer;
    color: #fff;
    padding: 0.32rem 0.7rem; border-radius: var(--radius-pill);
    font-size: 0.8rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.35rem;
    position: relative;
}
.nav-feedback-btn:hover { background: #d35400; color: #fff; }
.nav-feedback-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-feedback-label { white-space: nowrap; }
@media (max-width: 860px) { .nav-feedback-label { display: none; } }
.nav-bell-dot {
    position: absolute; top: 3px; right: 3px;
    min-width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-danger);
    border: 1.5px solid var(--header-bg);
    display: none;
}
.nav-bell-dot.has-count {
    width: auto; height: auto; min-width: 16px;
    padding: 0 0.2rem; line-height: 14px;
    font-size: 0.6rem; font-weight: 700; color: #fff;
    border-radius: 8px; text-align: center;
}
.nav-bell-dot.show { display: inline-block; }
.nav-bell-menu {
    display: none; position: absolute; right: 0; top: 100%;
    padding-top: 6px; z-index: 400; min-width: 280px;
}
.nav-bell.open .nav-bell-menu { display: block; }
.nav-bell-menu-inner {
    background: #fff; border: 1px solid #ddd; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.14);
    padding: 0.35rem 0;
    max-height: 70vh; overflow-y: auto;
}
.nav-bell-section-label {
    padding: 0.45rem 0.85rem 0.15rem;
    font-size: 0.62rem; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
}
.nav-bell-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    text-decoration: none; color: #333;
    font-size: 0.85rem;
    border-left: 2px solid transparent;
    cursor: pointer;
}
.nav-bell-item:hover { background: #f4f4f4; border-left-color: var(--header-bg); }
.nav-bell-item-count {
    flex-shrink: 0;
    background: var(--color-info); color: #fff;
    border-radius: 10px; padding: 0 0.4rem;
    font-size: 0.7rem; font-weight: 700; line-height: 1.6;
    min-width: 20px; text-align: center;
}
.nav-bell-item-count.is-tasks { background: #e67e22; }
.nav-bell-item-count.is-broadcast { background: var(--color-warning); }
.nav-bell-empty {
    padding: 1.5rem 1rem; text-align: center;
    color: var(--color-muted); font-size: 0.85rem;
}
.nav-bell-empty-check { color: var(--color-success); font-size: 1.2rem; display: block; margin-bottom: 0.3rem; }
.nav-bell-loading { padding: 1rem; text-align: center; color: var(--color-muted); font-size: 0.82rem; }

/* ── Nav-Dropdowns (Analyse, Admin) ───────────────────────────────────────
   Generisches Pattern fuer Gruppen-Dropdowns in der Hauptnav (Analyse)
   und den Admin-Bereich neben Bell/Avatar. Toggle-Logik in
   static/nav-dropdown.js (Click, Outside-Click, Escape). Die Analyse-
   Variante sitzt als Nav-Link-Element inline in .main-nav und erbt
   weitgehend das .nav-link-Styling; die Admin-Variante sitzt als
   Icon-Button in .nav-actions und nutzt das Bell-Styling. */
.nav-dropdown { position: relative; }
.nav-dropdown-btn {
    background: none; border: none; cursor: pointer; font: inherit;
    color: inherit;
}
.nav-dropdown-menu {
    display: none; position: absolute; right: 0; top: 100%;
    padding-top: 6px; z-index: 400; min-width: 220px;
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu-inner {
    background: #fff; border: 1px solid #ddd; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.14);
    padding: 0.35rem 0;
    max-height: 70vh; overflow-y: auto;
}
.nav-dropdown-menu a,
.nav-dropdown-menu button {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    text-decoration: none; color: #333;
    font-size: 0.85rem;
    border-left: 2px solid transparent;
    cursor: pointer;
    width: 100%; background: none; border-top: none; border-right: none;
    border-bottom: none; font: inherit; text-align: left;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu button:hover {
    background: #f4f4f4;
    border-left-color: var(--header-bg);
}
.nav-dropdown-menu a.active { color: var(--header-bg); font-weight: 600; }
.nav-dropdown-menu hr {
    margin: 0.2rem 0; border: 0; border-top: 1px solid #eee;
}
/* Gruppen-Überschrift im Verwaltung-Dropdown (z. B. Studiengang/Plattform) —
   ordnet die Einträge nach Ebene, ohne wie ein klickbarer Link zu wirken. */
.nav-dropdown-label {
    display: block; padding: 0.35rem 0.85rem 0.15rem;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--color-muted);
}

/* Analyse-Dropdown sitzt als Nav-Link in .main-nav: Button uebernimmt
   das Link-Styling (Icon + Label) vom umgebenden .nav-link, das
   Caret-Symbol zeigt die Dropdown-Natur. */
.main-nav .nav-dropdown > .nav-dropdown-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    color: rgba(255,255,255,0.85);
    background: transparent;
    border-radius: 4px;
}
.main-nav .nav-dropdown > .nav-dropdown-btn:hover {
    background: rgba(255,255,255,0.15); color: #fff;
}
/* Active (eine Unterseite des Dropdowns ist aktuell): wie andere nav-link.active.
   Spezifität hoeher als .nav-link.active, weil hier die kombinierte Klasse
   ausgewaehlt wird — sonst kollidieren color:var(--header-bg) und
   color:rgba(255,255,255,0.85) zufallsbasiert. */
.main-nav .nav-dropdown > .nav-dropdown-btn.active {
    background: #fff; color: var(--header-bg);
}
/* Open (Dropdown ausgeklappt): gewinnt visuell ueber .active, weil der
   Focus auf der Dropdown-Interaktion liegt. Regel steht NACH der active-
   Regel, damit bei gleichem Selektor-Score die Reihenfolge entscheidet. */
.main-nav .nav-dropdown.open > .nav-dropdown-btn,
.main-nav .nav-dropdown.open > .nav-dropdown-btn.active {
    background: rgba(255,255,255,0.22); color: #fff;
}
.main-nav .nav-dropdown-menu { min-width: 240px; left: 0; right: auto; }

/* Admin-Dropdown sitzt in .nav-actions neben Bell/Avatar: Icon-Button-
   Styling wie die Bell, mit Label rechts vom Icon. */
.nav-actions .nav-dropdown > .nav-dropdown-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.35rem 0.55rem; border-radius: 4px;
    color: rgba(255,255,255,0.85);
    font-size: 0.8rem; font-weight: 500;
}
.nav-actions .nav-dropdown > .nav-dropdown-btn:hover {
    background: rgba(255,255,255,0.15); color: #fff;
}
.nav-actions .nav-dropdown.open > .nav-dropdown-btn {
    background: rgba(255,255,255,0.22); color: #fff;
}
.nav-actions .nav-dropdown > .nav-dropdown-btn:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px;
}

/* Benutzer-Dropdown (kein JS – reines CSS) */
.nav-user { position: relative; }
.nav-user-btn {
    display: flex; align-items: center; gap: 0.4rem;
    color: rgba(255,255,255,0.85); font-size: 0.82rem;
    white-space: nowrap; cursor: default;
    padding: 0.2rem 0.45rem; border-radius: 4px;
}
/* Initial-Kreis: Farbe + Inhalt setzt static/avatar.js basierend auf data-user. */
.nav-user-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    background: rgba(255,255,255,0.2); /* Fallback bevor JS die Hash-Farbe setzt */
}
.nav-user:hover .nav-user-btn { background: rgba(255,255,255,0.15); }
/* ▾ U+25BE */
.nav-user-btn::after { content: "\25be"; font-size: 0.65rem; opacity: 0.6; }
.nav-badge {
    display: inline-flex; align-items: center; gap: 0.2rem;
    border-radius: 10px; padding: 0 0.4rem;
    font-size: 0.68rem; font-weight: 700;
    vertical-align: middle; line-height: 1.7; margin-left: 0.1rem;
}
.nav-badge svg { width: 10px; height: 10px; flex-shrink: 0; }
.nav-badge-tasks { background: #e67e22; color: #fff; }
.nav-badge-msgs  { background: var(--color-info); color: #fff; }
.nav-badge-dev   { background: #27ae60; color: #fff; margin-left: 0; margin-right: 0.35rem; }
.nav-link-badge {
    background: var(--color-info); color: #fff; border-radius: 8px;
    font-size: 0.62rem; font-weight: 700; padding: 0 0.3rem;
    line-height: 1.5; margin-left: 0.15rem;
}
/* padding-top überbrückt den Spalt zwischen Button-Unterkante und Menü */
.nav-user-menu {
    display: none; position: absolute; right: 0; top: 100%;
    padding-top: 4px; z-index: 400; min-width: 200px;
}
.nav-user:hover .nav-user-menu { display: block; }
/* Visueller Rahmen als eigenes Kind-Element, damit padding-top unsichtbar bleibt */
.nav-user-menu-inner {
    background: #fff; border: 1px solid #ddd; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.14); padding: 0.35rem 0;
}
.nav-user-menu-lbl {
    padding: 0.25rem 0.75rem 0.1rem; font-size: 0.68rem;
    color: #aaa; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.nav-user-menu-grp { padding: 0.2rem 0.75rem; font-size: 0.8rem; color: #555; }
.nav-user-menu-inner hr  { border: none; border-top: 1px solid #eee; margin: 0.3rem 0; }
.nav-user-menu-inner a   { display: block; padding: 0.3rem 0.75rem; font-size: 0.82rem; color: #333; text-decoration: none; white-space: nowrap; }
.nav-user-menu-inner a:hover { background: #f4f4f4; }

/* ── Container ───────────────────────────────────────────────────────────── */
.container { width: 100%; }

/* ── Meta-Streifen (direkt unter dem Header) ─────────────────────────────── */
/* Schließt visuell an den Header an (border-top:none, Radius unten). Wird auf
   Seiten genutzt, die eine kurze Kontext-/Statuszeile unterhalb der Navbar
   benötigen (z.B. Curriculum-Metadaten, Abhängigkeitstyp-Hinweis). */
.meta-strip {
    background: rgba(44,62,80,0.08);
    border: 1px solid rgba(44,62,80,0.12);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0.45rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}
.meta-strip strong { color: var(--color-text); }
/* Versions-Indikator: klickbarer Einstieg zur Versionsübersicht (/versions).
   Erbt die Meta-Streifen-Farbe, wird beim Hover unterstrichen. */
.meta-version-link { color: inherit; text-decoration: none; }
.meta-version-link:hover { text-decoration: underline; color: var(--header-bg); }
.meta-version-link:focus-visible { outline: 2px solid var(--header-bg); outline-offset: 2px; border-radius: var(--radius-xs); }

/* Persona-Liste (Akkordeon) — gemeinsam genutzt von der Analyse-Persona-Ansicht
   und der historischen Personae-Seite (/versions/{id}/personae). */
.pl-card { border:1px solid var(--color-border); border-radius:var(--radius-md);
           padding:0.6rem 0.85rem; margin-bottom:0.5rem; background:#fff; }
.pl-summary { display:flex; align-items:baseline; gap:0.5rem; width:100%;
              text-align:left; background:none; border:none; cursor:pointer; padding:0;
              font:inherit; color:inherit; }
.pl-summary:focus-visible { outline:2px solid var(--header-bg); outline-offset:2px; border-radius:var(--radius-xs); }
.pl-headtext { flex:1; min-width:0; }
.pl-name { font-size:0.95rem; }
.pl-summary:hover .pl-name { text-decoration:underline; }
.pl-pos { color:var(--color-muted); }
.pl-meta { display:block; font-size:0.8rem; color:var(--color-muted); margin-top:0.1rem; }
/* Aufklapp-Dreieck: app-weit einheitlich — Glyph U+25B6, 0.85rem, var(--header-bg). */
.pl-chevron { color:var(--header-bg); font-size:0.85rem; line-height:1;
              transition:transform 0.15s ease; flex-shrink:0; align-self:center; }
.pl-card.open .pl-chevron { transform:rotate(90deg); }
.pl-details { display:none; margin-top:0.6rem; padding-top:0.6rem;
              border-top:1px solid var(--color-border); }
.pl-card.open .pl-details { display:block; }
.pl-sec { margin-top:0.5rem; }
.pl-sec:first-child { margin-top:0; }
.pl-sec-label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em;
                color:#444; font-weight:700; margin-bottom:0.15rem; }
.pl-sec-body { font-size:0.88rem; line-height:1.5; }
.pl-sec-body > *:first-child { margin-top:0; }
.pl-sec-body > *:last-child  { margin-bottom:0; }
/* Markdown-Listen brauchen Einrueckung — sonst haengen die Bullets am linken Rand. */
.pl-sec-body ul, .pl-sec-body ol { margin:0.3rem 0; padding-left:1.5rem; }
.pl-sec-body li { margin:0.2rem 0; }
.pl-sec-body p { margin:0.4rem 0; }
@media (prefers-reduced-motion: reduce) { .pl-chevron { transition:none; } }

/* Historische Read-only-Ansicht: prominenter Amber-Banner direkt unter der Nav,
   damit unmissverständlich klar ist, dass ein vergangener Stand gezeigt wird. */
.hist-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fffbeb;
    border: 1px solid var(--color-warning);
    border-top: none;
    color: #92400e;
    padding: 0.5rem 1.5rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.hist-banner strong { color: #92400e; }
/* Primäre Rück-Aktion: direkt in den Live-Stand. margin-left:auto schiebt diesen
   Link UND den folgenden Versionsübersicht-Link als Gruppe nach rechts (der
   Abstand kommt aus dem flex-gap des .hist-banner). */
.hist-banner-live {
    margin-left: auto;
    color: #92400e;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}
.hist-banner-live:hover { color: #b45309; }
/* Sekundäre Aktion: zur Versionsübersicht. */
.hist-banner-back {
    color: #92400e;
    font-weight: 500;
    text-decoration: underline;
    white-space: nowrap;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
/* Zeile mit Aktions-Buttons über Tabellen/Content. Tour-Button immer als letztes Kind. */
.toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

/* ── Seiten-Tabs ─────────────────────────────────────────────────────────── */
/* Wiederverwendbarer Tab-Streifen (z. B. Studiengangsziele: Ziele / Matrix).
   .page-tabs-bar: volle Breite, border-bottom trennt optisch vom Inhalt.
   .page-tab: underline-Stil; aktiv = var(--header-bg)-Unterstrich + Textfarbe. */
/* Tab-Bar-Layout: zwei Zonen nebeneinander.
   - .page-tabs-scroll: scrollender Container nur fuer die Tab-Buttons.
   - .tour-trigger-btn (oder andere direkte Kinder rechts): liegen
     OUTSIDE des Scroll-Containers und koennen nie von Tabs ueberlagert
     werden. Frueher war alles in einem flex-Container mit overflow-x;
     der Tour-Button musste per position:sticky+background gesichert
     werden — das war fragil und ueberlagerte trotzdem oft Tabs. */
.page-tabs-bar {
    display: flex;
    align-items: stretch;
    padding: 0 1.5rem;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.25rem;
    gap: 0.5rem;
}
.page-tabs-scroll {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 0.25rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.page-tabs-scroll::-webkit-scrollbar { height: 4px; }
.page-tabs-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.page-tabs-scroll::-webkit-scrollbar-track { background: transparent; }

/* Scroll-Indikator-Fades: signalisieren, dass links/rechts mehr Tabs zu
   sehen sind. Klassen werden von static/tab-scroll-indicator.js dynamisch
   gesetzt, je nach scrollLeft/scrollWidth. mask-image scrollt NICHT mit
   dem Inhalt (sie ist auf dem Container, nicht im Inhalt), daher klappt
   das ohne zusaetzlichen DOM-Wrapper. */
.page-tabs-scroll.scroll-right {
    -webkit-mask-image: linear-gradient(to right, black, black calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, black, black calc(100% - 32px), transparent);
}
.page-tabs-scroll.scroll-left {
    -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black);
            mask-image: linear-gradient(to right, transparent, black 32px, black);
}
.page-tabs-scroll.scroll-left.scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
}

/* Chevron-Pfeile als klickbare Scroll-Indikatoren. Werden vom Script
   tab-scroll-indicator.js dynamisch in die .page-tabs-bar eingefuegt
   und nur sichtbar, wenn der jeweilige Scroll-Spielraum existiert
   (Klassen .has-scroll-left / .has-scroll-right auf der Bar). */
.tab-scroll-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    align-self: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    color: var(--header-bg);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    font-family: inherit;
    padding: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tab-scroll-arrow:hover {
    background: var(--header-bg);
    color: #fff;
    border-color: var(--header-bg);
}
.page-tabs-bar.has-scroll-left .tab-scroll-arrow-left,
.page-tabs-bar.has-scroll-right .tab-scroll-arrow-right {
    display: inline-flex;
}
.page-tab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-muted);
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.page-tab:hover { color: var(--color-text); }
.page-tab.active {
    color: var(--header-bg);
    border-bottom-color: var(--header-bg);
}

/* Trennstrich zwischen Inhalt-Tabs (Regelcurriculum/Wahlbereich) und
   Auswertungs-Tab (Reife). Bewusst kräftig: 2px, mittlerer Slate, volle
   Tab-Höhe und großzügiger horizontaler Atemraum links/rechts. */
.page-tab-sep {
    width: 2px;
    background: #94a3b8;
    align-self: stretch;
    margin: 0.35rem 0.85rem;
    flex-shrink: 0;
    border-radius: 1px;
}

/* Evaluations-Tab (Reife) — markiert als Auswertung statt Inhalt.
   Grünlicher Ampel-Akzent beim aktiven Zustand, damit auch visuell
   klar wird, dass dieser Tab eine Quality-View zeigt. Das Icon links
   vom Label verstärkt die Lesbarkeit. */
.page-tab.tab-eval {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-muted);
}
.page-tab.tab-eval.active {
    color: #15803d;
    border-bottom-color: #22c55e;
}
.page-tab.tab-eval:hover:not(.active) { color: #15803d; }
.page-tab.tab-eval .tab-eval-icon { flex-shrink: 0; opacity: 0.8; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
    background: var(--header-bg); color: #fff; border: none;
    padding: 0.5rem 1.2rem; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 0.9rem; font-weight: 500; font-family: inherit;
}
.btn-primary:hover { background: var(--header-bg-hover); }

.btn-secondary {
    background: #e9ecef; color: #333; border: 1px solid #c3cbd3;
    padding: 0.5rem 1.2rem; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 0.9rem; font-family: inherit;
}
.btn-secondary:hover { background: #d4d8dc; border-color: #aab4bd; }

.btn-danger {
    background: var(--color-danger); color: #fff; border: none;
    padding: 0.5rem 1.2rem; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 0.9rem; font-family: inherit;
}
.btn-danger:hover { background: #c82333; }

/* Kleine Buttons (inline in Tabellen etc.) */
.btn-sm {
    padding: 0.28rem 0.65rem; font-size: 0.78rem;
    border-radius: var(--radius-xs); border: none; cursor: pointer; font-family: inherit;
}
.btn-sm-primary   { background: var(--header-bg); color: #fff; }
.btn-sm-primary:hover   { background: var(--header-bg-hover); }
.btn-sm-secondary { background: #e9ecef; color: #333; border: 1px solid #c3cbd3; }
.btn-sm-secondary:hover { background: #d4d8dc; border-color: #aab4bd; }
.btn-sm-danger    { background: var(--color-danger); color: #fff; }
.btn-sm-danger:hover    { background: #c82333; }

/* Icon-Buttons */
.btn-icon {
    background: none; border: none; cursor: pointer;
    font-size: 1rem; padding: 0.15rem 0.35rem;
    border-radius: var(--radius-xs); color: var(--color-muted);
}
.btn-icon:hover { background: #eee; color: #333; }

/* ── Formulare ───────────────────────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.8rem;
}
.form-group label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 600;
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.5rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
}
/* Sichtbarer Focus-Ring: Barrierefreiheit + Orientierung bei Tastatur-Navigation */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--header-bg);
    box-shadow: 0 0 0 2px rgba(44,62,80,.15);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group select   { background: #fff; }

/* ── Sidebar-Navigation (gemeinsam: Modul-Panel, Profil, Einstellungen) ── */
.sidebar-wrapper { display: flex; flex: 1; overflow: hidden; }
.sidebar {
    width: 200px; flex-shrink: 0;
    border-right: 1px solid var(--color-border);
    display: flex; flex-direction: column;
    overflow: hidden; transition: width 0.22s ease;
    background: #fafafa;
}
.sidebar.collapsed { width: 44px; }
.sidebar-toggle {
    display: flex; align-items: center; justify-content: center;
    padding: 0.5rem; border: none; background: transparent;
    cursor: pointer; color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0; transition: color 0.15s ease; font-family: inherit;
}
.sidebar-toggle:hover { color: var(--header-bg); }
.sidebar-nav {
    display: flex; flex-direction: column;
    gap: 0.15rem; padding: 0.5rem 0.35rem; overflow: hidden;
}
.sidebar-item {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 0.6rem;
    border: none; background: transparent; cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 0.82rem; color: var(--color-text);
    white-space: nowrap; overflow: hidden;
    width: 100%; text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: inherit;
}
.sidebar-item:hover:not(.active) { background: rgba(0,0,0,0.05); }
.sidebar-item.active { background: var(--header-bg); color: #fff; }
.sidebar-item svg { flex-shrink: 0; width: 15px; height: 15px; }
.sidebar-label { transition: opacity 0.15s ease; flex: 1; }
.sidebar.collapsed .sidebar-label { opacity: 0; }
/* Vollständigkeits-Dot: orange = wichtiges Feld leer (z. B. Modul-Panel Edit-Modus) */
.sidebar-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #e67e22; flex-shrink: 0; margin-left: auto; display: none;
}
.sidebar-dot.visible { display: block; }
.sidebar.collapsed .sidebar-dot { margin-left: 0; }
/* Content-Bereich neben der Sidebar */
/* min-height:0 ist essentiell: ohne diesen Override greift der Flex-Item-Default
   min-height:auto, der den Inhalt der aktiven Sektion den Wrapper nach unten
   drücken lässt — und damit das gesamte Modal beim Tab-Wechsel springt.
   Siehe design.md → "Modale mit Tabs / Sidebar-Sektionen". */
.sidebar-content { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Sektions-Panels: nur das aktive ist sichtbar */
.sidebar-section { display: none; padding: 1.25rem 1.5rem; }
.sidebar-section.active { display: block; min-height: 0; }
/* Sektions-Überschrift */
.sidebar-section-heading {
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    color: var(--color-muted); letter-spacing: 0.04em; margin-bottom: 0.85rem;
    padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: space-between;
}
/* Quick-Edit-Button (✎) in Sektionsüberschriften */
.sidebar-section-edit-btn {
    font-size: 0.75rem; color: var(--color-muted);
    background: none; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 0.15rem 0.45rem;
    cursor: pointer; font-family: inherit;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.sidebar-section-edit-btn:hover { color: var(--header-bg); border-color: var(--header-bg); }

/* Kompakter Action-Button rechts neben einem Sektion-Heading-Titel
   (z. B. „+ Neue Aufgabe" im Modul-Panel-Aktivitätstab). 24×24, kreisförmig,
   dezent — gibt der Liste den Vortritt statt vollbreit unter ihr zu sitzen. */
.mp-section-action-btn {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-muted);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem; line-height: 1;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mp-section-action-btn:hover {
    background: var(--header-bg); color: #fff; border-color: var(--header-bg);
}

/* Footer einer Sektion: dezenter Text-Link (z. B. „Alle Aufgaben anzeigen →").
   Margin-top für Atmen, kein Border — Sekundär-Aktion ohne Konkurrenz zur Liste. */
.mp-section-footer {
    margin-top: 0.5rem;
    text-align: right;
}
.mp-section-link {
    font-size: 0.78rem;
    color: var(--color-muted);
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.mp-section-link:hover {
    color: var(--header-bg);
    border-bottom-color: var(--header-bg);
}
@media (max-width: 680px) {
    .sidebar { width: 44px; }
    .sidebar-label { opacity: 0; }
}

/* ── Modals – Basis ──────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: none; justify-content: center; align-items: center;
    z-index: 200; padding: 1rem;
}
.modal-overlay.active { display: flex; }

/* Confirm- und Prompt-Dialoge (static/confirm.js) liegen IMMER ueber allen
   anderen Modals. Sie werden typisch aus einem offenen Modal heraus
   aufgerufen (z. B. „wirklich loeschen?", „Replace-Modus fortfahren?"),
   und muessen sichtbar und bedienbar sein — egal wie hoch der Parent-
   Modal seinen z-index setzt. 500 liegt deutlich ueber den Feature-
   Modals (200–300) und unter Toasts (9999). */
#confirm-overlay.modal-overlay,
#prompt-overlay.modal-overlay { z-index: 500; }

/* ── Reife-Tooltip (Curriculum → Tab „Reife") ─────────────────────────
   Popover beim Hover/Focus auf einer Heatmap-Kachel mit dem Modul-Header
   (ID + Name + Semester + Score) und der vollstaendigen Reife-Checkliste.
   Die Daten kommen aus /api/maturity und sind beim Render schon im Speicher
   — kein zusaetzlicher Fetch. Position wird via JS fixed, z-index 150
   (ueber Sticky-Nav 50, unter Modals 200+). */
.reife-tile-tooltip {
    position: fixed;
    z-index: 150;
    max-width: 340px;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--color-text);
    pointer-events: none;
}
.reife-tile-tooltip-head {
    display: flex; align-items: center; gap: 0.45rem;
    margin-bottom: 0.15rem;
}
.reife-tile-tooltip-id {
    background: var(--header-bg); color: var(--header-fg);
    padding: 0.08rem 0.45rem; border-radius: var(--radius-xs);
    font-size: 0.72rem; font-weight: 700;
    font-family: monospace;
    flex-shrink: 0;
}
.reife-tile-tooltip-name {
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis;
}
.reife-tile-tooltip-sub {
    font-size: 0.78rem; color: var(--color-muted);
    margin-bottom: 0.55rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; gap: 0.45rem;
    flex-wrap: wrap;
}
.reife-tile-tooltip-score {
    font-weight: 700;
    padding: 0.05rem 0.4rem; border-radius: var(--radius-pill);
    font-size: 0.75rem;
    color: #fff;
}
.reife-tile-tooltip-score.level-green  { background: #22c55e; }
.reife-tile-tooltip-score.level-yellow { background: #eab308; color: #333; }
.reife-tile-tooltip-score.level-red    { background: #ef4444; }
.reife-tile-tooltip-list {
    margin: 0; padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.reife-tile-tooltip-list li {
    display: flex; gap: 0.45rem;
    font-size: 0.82rem;
    align-items: flex-start;
    line-height: 1.4;
}
.reife-tile-tooltip-list li.met    { color: var(--color-text); }
.reife-tile-tooltip-list li.unmet  { color: #8a1b25; }
.reife-tile-tooltip-icon {
    flex-shrink: 0; width: 1rem; text-align: center;
    font-weight: 700;
}
.reife-tile-tooltip-list li.met    .reife-tile-tooltip-icon { color: var(--color-success); }
.reife-tile-tooltip-list li.unmet  .reife-tile-tooltip-icon { color: var(--color-danger); }
.reife-tile-tooltip-hint {
    color: var(--color-muted); font-style: italic;
}
.reife-tile-tooltip-ok {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.88rem; color: var(--color-success);
    font-weight: 600;
    padding: 0.2rem 0;
}
.reife-tile-tooltip-ok .reife-tile-tooltip-icon { color: var(--color-success); }
@media (prefers-reduced-motion: no-preference) {
    .reife-tile-tooltip {
        animation: reifeTooltipFadeIn 0.12s ease-out;
    }
}
@keyframes reifeTooltipFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal {
    background: #fff; border-radius: var(--radius-lg); width: 100%;
    box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; max-height: 85vh; overflow: hidden;
}

.modal-close {
    background: none; border: none; color: #fff;
    font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.modal-close:hover { opacity: 0.8; }

/* Gemeinsamer Kopf/Rumpf/Fuß der modalen Dialoge */
.modal-head {
    background: var(--header-bg); color: #fff;
    padding: 0.9rem 1.2rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
}
.modal-head h2,
.modal-head h3 { font-size: 1rem; font-weight: 600; }

.modal-body { padding: 1.1rem 1.25rem; overflow-y: auto; flex: 1; }

/* ── markdown-body ──────────────────────────────────────────────────────────
   Stil für gerenderten Markdown-Inhalt (z. B. die MCP-Bedienungsanleitung im
   Profil-Modal). Inhalt kommt aus marked.parse() — die Klasse sorgt für
   lesbare Headings, Code-Blocks, Tabellen und Listen ohne globale Konflikte. */
.markdown-body { font-size: 0.92rem; line-height: 1.6; color: var(--color-text); }
.markdown-body h1 { font-size: 1.4rem; margin: 0 0 0.8rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--color-border); }
.markdown-body h2 { font-size: 1.15rem; margin: 1.6rem 0 0.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid #eee; }
.markdown-body h3 { font-size: 1rem; margin: 1.2rem 0 0.5rem; }
.markdown-body h4 { font-size: 0.92rem; margin: 1rem 0 0.4rem; font-weight: 700; }
.markdown-body p { margin: 0.5rem 0 0.7rem; }
.markdown-body ul, .markdown-body ol { margin: 0.4rem 0 0.7rem 0; padding-left: 1.6rem; }
.markdown-body li { margin: 0.15rem 0; }
.markdown-body code { background: #f4f4f4; padding: 0.1rem 0.35rem; border-radius: 3px; font-family: monospace; font-size: 0.85em; }
.markdown-body pre { background: #f8f9fa; border: 1px solid #e4e4e4; border-radius: 4px; padding: 0.7rem 0.9rem; overflow-x: auto; font-size: 0.82rem; line-height: 1.5; }
.markdown-body pre code { background: transparent; padding: 0; font-size: 1em; }
.markdown-body table { border-collapse: collapse; margin: 0.8rem 0; width: 100%; font-size: 0.86rem; }
.markdown-body th, .markdown-body td { border: 1px solid var(--color-border); padding: 0.4rem 0.65rem; text-align: left; vertical-align: top; }
.markdown-body th { background: #f8f9fa; font-weight: 700; }
.markdown-body blockquote { margin: 0.7rem 0; padding: 0.4rem 0.85rem; border-left: 4px solid var(--color-info); background: #f0f7ff; color: #1e3a5c; }
.markdown-body hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5rem 0; }
.markdown-body a { color: #2563eb; text-decoration: underline; }
.markdown-body details { margin: 0.8rem 0; padding: 0.5rem 0.7rem; background: #f8f9fa; border-radius: 4px; }
.markdown-body details summary { cursor: pointer; font-weight: 600; color: var(--header-bg); }
.markdown-body details[open] { padding-bottom: 0.7rem; }

.modal-foot {
    padding: 0.8rem 1.25rem;
    border-top: 1px solid #eee;
    display: flex; gap: 0.5rem; justify-content: flex-end;
    flex-shrink: 0;
}

.btn-row {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    padding-top: 0.25rem;
}

/* ── Zeilendiff-Ansicht (geteilt: history, import) ───────────────────────── */
.diff-view   { background: #1e1e1e; color: #ccc; padding: .75rem 1rem;
               font-size: .82rem; line-height: 1.5; overflow-x: auto;
               border-radius: var(--radius-xs); margin: 0; }
.diff-same   { display: block; color: #888; white-space: pre; }
.diff-remove { display: block; color: #f88; background: #3a0000; white-space: pre; }
.diff-add    { display: block; color: #8f8; background: #003a00; white-space: pre; }
/* diff-modify: eine Zeile, in der remove+add zu einer zusammengefasst
   wurden. Inline markiert durch .diff-word-rm / .diff-word-add. Keine
   eigene Hintergrundfarbe — die Inline-Spans machen die Arbeit. */
.diff-modify    { display: block; color: inherit; white-space: pre; }
.diff-word-rm   { background: rgba(220, 53, 69, 0.25);
                  text-decoration: line-through;
                  padding: 0 2px; border-radius: 2px; }
.diff-word-add  { background: rgba(40, 167, 69, 0.25);
                  font-weight: 600;
                  padding: 0 2px; border-radius: 2px; }
.diff-block  { margin-bottom: 1rem; }
.diff-label  { font-size: .78rem; text-transform: uppercase; color: var(--color-muted);
               font-weight: 600; margin-bottom: .3rem; letter-spacing: .04em; }
.diff-empty  { color: #aaa; font-style: italic; font-size: .85rem; }

/* ── Import-Modal: Expand-Panel für lange Felder ─────────────────────────── */
.im-expand-btn { background: none; border: none; cursor: pointer; font-size: .82rem;
                 color: var(--color-info); padding: .2rem .4rem;
                 border-radius: var(--radius-xs); white-space: nowrap; }
.im-expand-btn:hover { background: rgba(41,128,185,.1); }

.im-expand-panel { padding: .65rem .7rem .5rem; background: var(--bg-color);
                   border: 1px solid var(--color-border); border-radius: var(--radius-sm);
                   margin-top: .35rem; }

.im-side-by-side  { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.im-side-col      { flex: 1 1 220px; min-width: 0; }
.im-side-col-label { font-size: .72rem; text-transform: uppercase; color: var(--color-muted);
                     font-weight: 600; margin-bottom: .2rem; letter-spacing: .04em; }
.im-side-text     { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
                    font-size: .82rem; line-height: 1.5;
                    max-height: 200px; overflow-y: auto; overflow-x: hidden;
                    background: #fff; border: 1px solid var(--color-border);
                    border-radius: var(--radius-xs); padding: .4rem .55rem;
                    color: var(--color-text); }
.im-side-text.im-old { color: var(--color-muted); }
.im-append-row    { margin-top: .45rem; font-size: .82rem; display: flex;
                    align-items: center; gap: .4rem; color: var(--color-text); cursor: pointer; }
.im-append-row input[type=checkbox] { width: .9rem; height: .9rem; cursor: pointer; }

/* ── Status-Meldungen ────────────────────────────────────────────────────── */
.status-msg         { font-size: 0.82rem; }
.status-msg.ok      { color: var(--color-success); }
.status-msg.error   { color: var(--color-danger); }

/* ── Toast-Benachrichtigungen (via toast.js) ─────────────────────────────
   Erscheinen unten rechts, stapeln sich, verschwinden nach 3 Sekunden.
   pointer-events:none verhindert, dass sie klickbare Elemente blockieren. */
#toast-container {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
    display: flex; flex-direction: column; gap: 0.5rem;
    pointer-events: none;
}
.toast {
    padding: 0.6rem 1rem 0.6rem 0.85rem;
    border-radius: 6px; font-size: 0.88rem; font-weight: 500;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    opacity: 0; transform: translateY(0.4rem);
    transition: opacity 0.22s ease, transform 0.22s ease;
    max-width: 300px; min-width: 160px;
    border-left: 4px solid transparent;
}
.toast.toast-show    { opacity: 1; transform: translateY(0); }
.toast-success { background: #fff; color: #1b6b2e; border-left-color: var(--color-success); }
.toast-error   { background: #fff; color: #a71d2a; border-left-color: var(--color-danger); }
.toast-info    { background: #fff; color: #444;    border-left-color: #6c757d; }

/* ── Lade-Spinner (CSS-only) ─────────────────────────────────────────────
   Verwendung: <span class="spinner"></span>
   Passt sich der Schriftgröße des umgebenden Elements an (em-Einheiten). */
.spinner {
    display: inline-block; width: 1.1em; height: 1.1em;
    border: 2px solid #ddd; border-top-color: var(--header-bg);
    border-radius: 50%; animation: _spin 0.65s linear infinite;
    vertical-align: middle; flex-shrink: 0;
}
@keyframes _spin { to { transform: rotate(360deg); } }

/* Button im Lade-Zustand: über withLoading() in static/loading.js gesetzt.
   Originaltext bleibt im data-original-text, ein Spinner wird voran gesetzt. */
.btn-loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
}
.btn-loading::before {
    content: '';
    display: inline-block; width: 0.85em; height: 0.85em;
    margin-right: 0.4em;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: _spin 0.65s linear infinite;
    vertical-align: -0.1em;
}

/* ── Leerer Zustand ──────────────────────────────────────────────────────── */
.empty {
    text-align: center; padding: 3rem; color: #aaa; font-size: 1rem;
    background: #fff; border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* Reichhaltiger Empty-State mit Icon + Titel + Beschreibung + optionalem CTA.
   Nutzung:
     <div class="empty-state">
       <svg class="empty-state-icon">…</svg>
       <h3>Noch leer</h3>
       <p>Beschreibung warum hier noch nichts ist.</p>
       <button class="btn-primary">Jetzt anlegen</button>
     </div>
*/
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--color-muted);
}
.empty-state-icon {
    width: 56px; height: 56px;
    color: #cbd5e1;
    margin: 0 auto 1rem;
    display: block;
}
.empty-state h3 {
    font-size: 1.05rem;
    color: var(--color-text);
    margin: 0 0 0.5rem;
    font-weight: 600;
}
.empty-state p {
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
    line-height: 1.5;
    max-width: 38ch;
    margin-left: auto;
    margin-right: auto;
}
.empty-state .btn-primary,
.empty-state .btn-secondary {
    margin-top: 0.25rem;
}

/* ── Markdown-Vorschau-Drawer (seitenübergreifend) ──────────────────────── */
/* Wird von module_panel.js, forum_topic.js und forum.js genutzt.
   position:fixed → erscheint immer viewport-relativ, unabhängig vom DOM-Kontext.
   z-index:201 → liegt über .modal-overlay (z-index:200) und unter dem Footer (9999). */

/* Toggle-Button neben Feld-Labels */
.mp-preview-btn {
    font-size: 0.7rem; font-weight: 600; cursor: pointer;
    padding: 0.1rem 0.45rem; border-radius: 3px; border: 1px solid #ccc;
    background: #f5f5f5; color: #555;
    transition: background 0.15s, color 0.15s;
    vertical-align: middle; margin-left: 0.4rem;
    text-transform: none; letter-spacing: 0;
}
.mp-preview-btn.active { background: #2c3e50; color: #fff; border-color: #2c3e50; }

/* Drawer-Container */
.mp-preview-drawer {
    position: fixed;
    top: 5%;
    bottom: 40px;    /* Abstand zur fixen Fußzeile (32 px + Puffer) */
    right: 0;
    width: min(640px, 66vw);
    background: #fff;
    border-radius: 10px 0 0 10px;
    box-shadow: -6px 0 32px rgba(0,0,0,0.22);
    display: flex; flex-direction: column;
    transform: translateX(100%);                          /* versteckt rechts außerhalb */
    transition: transform 0.25s cubic-bezier(.4,0,.2,1);
    z-index: 201;    /* über modal-overlay (200), unter site-footer (9999) */
    overflow: hidden;
}
.mp-preview-drawer.open { transform: translateX(0); }

/* Greifbarer Resize-Anfasser am linken Rand */
.mp-preview-resize-handle {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 1;
}
.mp-preview-resize-handle::after {
    content: '';
    position: absolute;
    left: 2px; top: 0; bottom: 0; width: 2px;
    background: transparent;
    transition: background 0.15s;
}
.mp-preview-resize-handle:hover::after,
.mp-preview-resize-handle.resizing::after { background: #f59e0b; }

/* Drawer-Header */
.mp-preview-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 1rem;
    background: var(--header-bg); color: #fff;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
    flex-shrink: 0;
}
.mp-preview-drawer-close {
    background: none; border: none; color: #fff; cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0 0.2rem;
    transition: opacity 0.15s;
}


/* Drawer-Inhalt */
.mp-preview-drawer-body {
    flex: 1; overflow-y: auto;
    padding: 1rem 1.25rem;
    font-size: 0.95rem; color: #333; line-height: 1.6;
}
.mp-preview-drawer-body p  { margin: 0 0 0.5em; }
.mp-preview-drawer-body p:last-child { margin-bottom: 0; }
.mp-preview-drawer-body ul,
.mp-preview-drawer-body ol { padding-left: 1.5em; margin: 0 0 0.5em; }
.mp-preview-drawer-body code { background: #f4f5f7; padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.88em; }
.mp-preview-drawer-body pre  { background: #f4f5f7; padding: 0.75rem; border-radius: 5px; overflow-x: auto; }
.mp-preview-drawer-body pre code { background: none; padding: 0; }
.mp-preview-drawer-body blockquote { border-left: 3px solid #ccc; padding-left: 0.75em; color: #666; margin: 0.5em 0; }

/* Hinweis-Modus: Amber-Tönung passend zur Callout-Box in der Anzeige */
.mp-preview-drawer.hint-mode .mp-preview-drawer-body { background: #fffbeb; }
.mp-preview-drawer.hint-mode .mp-preview-drawer-body strong { color: #92400e; }
.mp-preview-drawer.hint-mode .mp-preview-drawer-body code  { background: #fef3c7; }

/* ── KI-Analyse-Drawer ───────────────────────────────────────────────────── */
.mp-chat-messages {
    flex: 1; overflow-y: auto; padding: 0.75rem 1rem;
    display: flex; flex-direction: column; gap: 0.75rem;
}
.mp-chat-msg { max-width: 90%; display: flex; flex-direction: column; gap: 0.2rem; }
.mp-chat-msg.user      { align-self: flex-end;   align-items: flex-end; }
.mp-chat-msg.assistant { align-self: flex-start; }
.mp-chat-bubble {
    padding: 0.5rem 0.75rem; border-radius: 10px;
    font-size: 0.88rem; line-height: 1.5;
}
.mp-chat-msg.user .mp-chat-bubble      { background: #2563eb; color: #fff; }
.mp-chat-msg.assistant .mp-chat-bubble { background: #f1f5f9; color: #1e293b; }
/* Höhere Spezifität (zwei Klassen) statt !important: schlägt .mp-chat-msg.user .mp-chat-bubble */
.mp-chat-msg .mp-chat-error-bubble { background: #fff8f0; color: #92400e; border: 1px solid #fcd34d; }
.mp-chat-bubble p { margin: 0 0 0.4em; }
.mp-chat-bubble p:last-child { margin-bottom: 0; }
.mp-chat-bubble ul, .mp-chat-bubble ol { padding-left: 1.4em; margin: 0 0 0.4em; }
.mp-chat-bubble code { background: rgba(0,0,0,0.08); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; }
.mp-chat-bubble pre  { background: rgba(0,0,0,0.06); padding: 0.5rem; border-radius: 4px; overflow-x: auto; }
.mp-chat-bubble pre code { background: none; padding: 0; }
.mp-chat-msg-actions {
    display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.15rem;
}
.mp-chat-action-btn {
    font-size: 0.72rem; color: #64748b; background: none; border: none;
    cursor: pointer; padding: 0; line-height: 1.4;
}
.mp-chat-action-btn:hover { color: #2563eb; }

/* Der Continue-Dialog ist entfernt — Sessions laden direkt. Ein Änderungs-
   Warnstreifen (.mp-chat-change-warning, in module_panel.html definiert) ersetzt
   den früheren Warnblock für "Änderungen seit der letzten Analyse". */

/* Aufgabe-anlegen-Formular im KI-Analyse-Drawer */
.mp-chat-task-form {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 0.85rem 1rem; margin: 0.5rem 0.25rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.mp-chat-task-form-title { font-size: 0.85rem; font-weight: 600; color: #1e293b; }
.mp-chat-task-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #cbd5e1; border-radius: 6px;
    padding: 0.4rem 0.6rem; font-size: 0.85rem; font-family: inherit;
}
.mp-chat-task-input:focus { outline: none; border-color: var(--header-bg); box-shadow: 0 0 0 2px rgba(44,62,80,.15); }
.mp-chat-task-suggestion { font-size: 0.78rem; color: #64748b; }
.mp-chat-task-loading { font-style: italic; }
.mp-chat-task-chip {
    cursor: pointer; color: #2563eb;
    text-decoration: underline; text-decoration-style: dotted;
}
.mp-chat-task-chip:hover { color: #1d4ed8; }
.mp-chat-task-btns { display: flex; gap: 0.5rem; margin-top: 0.15rem; }
.mp-chat-task-btns .btn-primary,
.mp-chat-task-btns .btn-secondary { font-size: 0.82rem; padding: 0.3rem 0.8rem; }

.mp-chat-status-label {
    font-size: 0.78rem; color: #64748b; font-style: italic; margin-bottom: 0.35rem;
}
.mp-chat-typing { display: flex; gap: 4px; align-items: center; padding: 0 0 0.1rem; }
.mp-chat-typing span {
    width: 6px; height: 6px; background: #94a3b8; border-radius: 50%;
    animation: mpTyping 1s infinite ease-in-out;
}
.mp-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.mp-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
.mp-chat-abort-btn {
    margin-left: 8px;
    padding: 0 7px;
    height: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    color: #dc2626;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s;
}
.mp-chat-abort-btn:hover:not(:disabled) { background: #fecaca; border-color: #f87171; }
.mp-chat-abort-btn:disabled { opacity: 0.5; cursor: default; }
/* Höhere Spezifität (zwei Klassen) statt !important — schlägt .mp-chat-msg.user .mp-chat-bubble */
.mp-chat-msg .mp-chat-aborted-bubble {
    background: #f8fafc; color: #64748b;
    border: 1px solid #e2e8f0; font-style: italic; font-size: 0.85rem;
}
@keyframes mpTyping {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40%           { transform: scale(1);   opacity: 1; }
}
.mp-chat-input-area {
    flex-shrink: 0; padding: 0.6rem 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex; gap: 0.5rem; align-items: flex-end;
}
.mp-chat-input {
    flex: 1; resize: none;
    padding: 0.4rem 0.6rem; border: 1px solid #cbd5e1;
    border-radius: 6px; font-size: 0.88rem; font-family: inherit;
    max-height: 100px; overflow-y: auto;
}
.mp-chat-send-btn { padding: 0.4rem 0.9rem; white-space: nowrap; }

/* ── Fußzeile (fixed) ────────────────────────────────────────────────────── */
.site-footer {
    position: fixed; bottom: 0; left: 0; right: 0; height: 32px;
    background: #fff; border-top: 1px solid var(--color-border);
    display: flex; align-items: center; padding: 0 1rem; z-index: 9999;
}
.site-footer img { height: 16px; }
.site-footer .copyright {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 11px; color: #666; white-space: nowrap;
}
/* Datenschutz-Link rechts im Footer: bewusst dezent (aaa), wird bei Hover etwas dunkler. */
.site-footer .footer-privacy {
    margin-left: auto; display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: #aaa; text-decoration: none; white-space: nowrap;
}
.site-footer .footer-privacy:hover { color: #666; }

/* ── Mini-Tour-Button (.tour-trigger-btn) ────────────────────────────────── */
.tour-trigger-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1.5px solid var(--header-bg, #2c3e50);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--header-bg, #2c3e50);
    font-size: 0.75rem; font-weight: 600;
    cursor: pointer; opacity: 0.6;
    transition: opacity 0.15s;
    vertical-align: middle;
    margin-left: auto; /* In flex-Toolbars immer ganz rechts positionieren */
}
.tour-trigger-btn:hover { opacity: 1; }

/* In .page-tabs-bar sitzt der Tour-Button als Geschwister des
   .page-tabs-scroll-Containers (NICHT darin) — er kann also nie von
   scrollenden Tabs ueberlagert werden. align-self:center zentriert
   vertikal in der Tab-Bar-Hoehe. */
.page-tabs-bar > .tour-trigger-btn {
    flex-shrink: 0;
    align-self: center;
    margin-left: 0;
}

/* Driver.js Popover-Overrides werden per JS injiziert (static/*.js → startTour),
 * weil driver.min.css ebenfalls per JS nachgeladen wird und style.css im Cascade
 * überschreibt. Die Overrides landen als <style id="driver-css-overrides"> direkt
 * nach dem <link id="driver-css"> im <head> und gewinnen so den Cascade. */

/* ── Neuigkeiten-Overlay: Zwei-Spalten-Layout ────────────────────────────────
 * Schmale Illustrations-Sidebar links, Markdown-Inhalt rechts.
 * padding:0 ist bereits am notifBody-div gesetzt. */
.notif-layout {
    display: flex;
    min-height: 160px;
}

.notif-sidebar {
    width: 96px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #eef2f7 0%, #f8fafc 100%);
    border-radius: var(--radius-lg) 0 0 0;
    padding: 1rem 0.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.notif-main {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.25rem 0.75rem;
    border-left: 1px solid var(--color-border);
}

/* Datum-Zeile oberhalb des Markdown-Inhalts */
.notif-meta {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin: 0 0 0.6rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Basis-Typografie für Markdown innerhalb von Neuigkeiten */
/* Markdown-Render-Styles werden für zwei Stellen verwendet, die identisch
   aussehen sollen (WYSIWYG): die finale Notification im Overlay (.notif-content)
   und die Live-Vorschau im Admin-UI (.preview-box). Beide Selektoren werden
   immer parallel gepflegt. */
.notif-content h1, .notif-content h2, .notif-content h3,
.preview-box h1, .preview-box h2, .preview-box h3 {
    font-size: 1rem; margin: 0.6rem 0 0.3rem; color: var(--color-text);
}
.notif-content p,
.preview-box p { margin: 0 0 0.6rem; line-height: 1.55; }
.notif-content ul, .notif-content ol,
.preview-box ul, .preview-box ol { padding-left: 1.3rem; margin: 0 0 0.6rem; }
.notif-content code,
.preview-box code {
    background: #f1f5f9; padding: 0.1rem 0.35rem;
    border-radius: var(--radius-xs); font-size: 0.85em;
}
.notif-content blockquote,
.preview-box blockquote {
    margin: 0.5rem 0; padding: 0.4rem 0.8rem;
    border-left: 4px solid var(--color-info); background: #f0f7ff;
    color: #1e3a5c;
}
.notif-content strong,
.preview-box strong { font-weight: 700; }

/* ── KI-Befund-Checkliste (Plan-Phase 2) ────────────────────────────────────
 * Gerendert vom Checklist-Renderer in ai_chat.js, wenn der Server Befunde zur
 * KI-Antwort liefert (ai_findings_enabled=1). Jeder Befund trägt einen State-Dot,
 * Titel, kollabierbaren Body und (bei state=open) drei Aktions-Buttons.
 * Farbpalette strikt aus design.md — keine neuen Töne erfunden. */

.mp-findings-progress {
    font-size: 0.78rem;
    color: var(--color-muted);
    padding: 0.3rem 0 0.5rem;
    font-weight: 600;
}
.mp-finding-group {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0.6rem 0 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.mp-finding {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.75rem;
}
.mp-finding[data-state="proposed"]  { border-left: 4px solid var(--color-info); }
.mp-finding[data-state="accepted"]  { border-left: 4px solid var(--color-success); }
.mp-finding[data-state="applied"]   { border-left: 4px solid var(--color-success); }
.mp-finding[data-state="as-task"]   { border-left: 4px solid var(--color-success); }
.mp-finding[data-state="dismissed"] { border-left: 4px solid var(--color-muted); opacity: 0.72; }
.mp-finding[data-state="open"]      { border-left: 4px solid var(--color-warning); }

.mp-finding-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.mp-finding-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.mp-finding-dot[data-state="open"]      { background: var(--color-warning); }
.mp-finding-dot[data-state="proposed"]  { background: var(--color-info); }
.mp-finding-dot[data-state="accepted"]  { background: var(--color-success); }
.mp-finding-dot[data-state="applied"]   { background: var(--color-success); }
.mp-finding-dot[data-state="as-task"]   { background: var(--color-success); }
.mp-finding-dot[data-state="dismissed"] { background: var(--color-muted); }
.mp-finding-title {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}
.mp-finding-state-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 700;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}
.mp-finding-body {
    margin-top: 0.3rem;
}
.mp-finding-body > summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--color-muted);
    padding: 0.1rem 0;
}
.mp-finding-body-md {
    font-size: 0.85rem;
    line-height: 1.55;
    padding: 0.35rem 0 0;
}
.mp-finding-body-md p { margin: 0 0 0.4rem; }
.mp-finding-body-md ul, .mp-finding-body-md ol { padding-left: 1.3rem; margin: 0 0 0.4rem; }
.mp-finding-body-md code {
    background: #f1f5f9; padding: 0.1rem 0.35rem;
    border-radius: var(--radius-xs); font-size: 0.85em;
}
/* Vorschau der konkreten Feld-Vorschläge (target_changes) unterhalb der
   Begründung. Grau unterlegt, damit sie sich visuell vom Markdown-Body abhebt,
   ohne die Aktions-Buttons zu dominieren. Lange Werte werden im JS auf 240
   Zeichen gekürzt; der volle Text ist im Einarbeiten-Modal sichtbar. */
.mp-finding-changes-preview {
    margin-top: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
    border-radius: var(--radius-xs);
    font-size: 0.82rem;
    line-height: 1.5;
}
.mp-finding-change-row {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    padding: 0.1rem 0;
}
.mp-finding-change-row + .mp-finding-change-row {
    border-top: 1px solid #e2e8f0;
    padding-top: 0.3rem;
    margin-top: 0.3rem;
}
.mp-finding-change-field {
    font-family: monospace;
    font-size: 0.78rem;
    color: #1565c0;
    flex-shrink: 0;
    font-weight: 600;
    white-space: nowrap;
}
.mp-finding-change-value {
    color: var(--color-text);
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}
.mp-finding-actions {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.mp-finding-actions .mp-chat-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Nachfragen-Chat-Modal: Verlauf als Bubble-Kette, pro Assistant-Antwort
   drei Terminal-Aktionen. Chat-Kontainer füllt den Modal-Body dynamisch. */
.mp-finding-chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.3rem;
    min-height: 0;
}
.mp-finding-chat-msg {
    max-width: 85%;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    line-height: 1.55;
    word-wrap: break-word;
}
.mp-finding-chat-msg.user {
    align-self: flex-end;
    background: var(--header-bg);
    color: #fff;
}
.mp-finding-chat-msg.assistant {
    align-self: flex-start;
    background: #f1f5f9;
    color: var(--color-text);
    max-width: 92%;
}
.mp-finding-chat-msg-content p  { margin: 0 0 0.4rem; }
.mp-finding-chat-msg-content p:last-child { margin-bottom: 0; }
.mp-finding-chat-msg-content ul,
.mp-finding-chat-msg-content ol { padding-left: 1.3rem; margin: 0 0 0.4rem; }
.mp-finding-chat-msg-content code {
    background: #e2e8f0; padding: 0.05rem 0.3rem;
    border-radius: var(--radius-xs); font-size: 0.85em;
}
.mp-finding-chat-msg-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.mp-finding-chat-msg-actions button {
    font-size: 0.72rem;
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    border-radius: var(--radius-xs);
    cursor: pointer;
}
.mp-finding-chat-msg-actions button:hover {
    background: #f8fafc;
    border-color: var(--header-bg);
}
.mp-finding-chat-context summary {
    font-size: 0.8rem;
    color: var(--color-muted);
    cursor: pointer;
    padding: 0.25rem 0;
}
.mp-finding-chat-context-text {
    margin-top: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
    border-radius: var(--radius-xs);
    font-size: 0.85rem;
    line-height: 1.5;
    max-height: 160px;
    overflow-y: auto;
}
.mp-finding-chat-typing {
    align-self: flex-start;
    padding: 0.55rem 0.75rem;
    background: #f1f5f9;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: var(--color-muted);
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
/* Inline-Fehler-Bubble im Chat: bleibt stehen bis der User "Erneut versuchen"
   oder "Schließen" klickt. Linksbündig wie Assistant-Bubbles, aber mit rotem
   Akzent, damit der Fehler nicht übersehen wird. */
.mp-finding-chat-error {
    align-self: stretch;
    padding: 0.6rem 0.8rem;
    background: #fdecea;
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: #c62828;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mp-finding-chat-error-text {
    line-height: 1.45;
}
.mp-finding-chat-error-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.mp-finding-chat-error-actions .btn-sm {
    font-size: 0.78rem;
    padding: 0.25rem 0.7rem;
}
/* Der Befund-Chat nutzt denselben .mp-chat-abort-btn aus dem Haupt-Chat —
   konsistente Optik überall, wo die KI gerade arbeitet. */

/* Inline-Formular für "Als Aufgabe" (Phase 3). Wird unterhalb eines Befunds
 * eingeblendet, wenn der Task-Button geklickt wird. Bleibt innerhalb der
 * Befund-Kachel; kein Overlay, damit die Checkliste dahinter sichtbar bleibt. */
.mp-finding-task-form {
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: #f8f9fa;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.mp-finding-task-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.mp-finding-task-title {
    padding: 0.4rem 0.55rem;
    border: 1px solid #ccc;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-family: inherit;
}
.mp-finding-task-title:focus {
    outline: none;
    border-color: var(--header-bg);
    box-shadow: 0 0 0 2px rgba(44,62,80,.15);
}
.mp-finding-task-hint {
    font-size: 0.72rem;
    color: var(--color-muted);
    line-height: 1.4;
}
.mp-finding-task-btns {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-top: 0.2rem;
}
.mp-finding-task-btns button {
    font-size: 0.82rem;
    padding: 0.3rem 0.85rem;
}

/* Die frühere Befund-Tafel (dimensionsübergreifende Aggregation mit Filter-Chips
 * und Liste) wurde durch Zahl-Badges auf den Tabs ersetzt. Der Gesamtblick-Button
 * wohnt jetzt im Drawer-Header, sein Ergebnis-Panel wird in module_panel.html
 * als .mp-chat-overview-panel gerendert. */

/* Diff-Modal als Tabelle (Multi-Feld-Befunde, Step 5). Stil angelehnt an
 * templates/import_modal.html → imDiffBody, damit Bearbeitende das Pattern
 * wiedererkennen: pro Feld eine Zeile, Aktuell ↔ Vorgeschlagen, Checkbox
 * zum An-/Abwählen. Lange Werte schalten in einen Detail-Modus mit
 * mehrzeiliger Textarea + ✨-Button für KI-Einbau. */
.mp-finding-diff-table tbody tr {
    border-bottom: 1px solid var(--color-border);
}
.mp-finding-diff-table tbody tr:last-child {
    border-bottom: none;
}
.mp-finding-diff-table td {
    padding: 0.55rem 0.4rem;
    vertical-align: middle;
}
.mp-finding-diff-cell-checkbox {
    text-align: center;
}
.mp-finding-diff-cell-field {
    font-weight: 600;
    color: var(--color-text);
    font-family: monospace;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}
.mp-finding-diff-cell-current {
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mp-finding-diff-cell-current em {
    opacity: 0.5;
}
.mp-finding-diff-cell-proposed {
    color: var(--color-text);
    overflow: hidden;
}
.mp-finding-diff-cell-proposed input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem 0.45rem;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    background: #f0fdf4;
    font-family: inherit;
    font-size: 0.82rem;
}
.mp-finding-diff-cell-proposed input[type="text"]:focus {
    outline: none;
    border-color: var(--color-success);
    box-shadow: 0 0 0 2px rgba(40,167,69,.15);
}
/* "Lange Werte"-Detail-Panel: Side-by-Side <pre> (alt) + <textarea> (neu)
 * + Toolbar mit ✨-Einbau-Button. Spannt vier Spalten via colspan. */
.mp-finding-diff-detail-cell {
    padding: 0.6rem 0.8rem 0.75rem;
    background: var(--bg-color);
}
.mp-finding-diff-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    /* align-items: stretch ist Grid-Default — beide Spalten bekommen
       dieselbe Hoehe, und die Kinder werden durch height:100% unten
       auf diese Hoehe gedehnt. */
    align-items: stretch;
}
.mp-finding-diff-detail-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mp-finding-diff-detail-col-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-height: 1.4rem;
}
.mp-finding-diff-detail-old,
.mp-finding-diff-detail-raw {
    background: #fff5f5;
    border: 1px solid #fbd5d5;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 240px;
    max-height: 600px;
    overflow-y: auto;
    margin: 0;
    flex: 1;
}
.mp-finding-diff-detail-new {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-family: inherit;
    resize: vertical;
    min-height: 240px;
    max-height: 600px;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
}
/* Diff-View in der linken Spalte: nutzt die bestehenden diff-*-Klassen
   aus dem History-Modal (diff-view, diff-block, diff-add, diff-remove,
   diff-same), aber mit eigener Hoehen-/Scroll-Rahmung analog zum
   mp-finding-diff-detail-old. */
.mp-finding-diff-detail-diffview {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.8rem;
    min-height: 240px;
    max-height: 600px;
    overflow-y: auto;
    margin: 0;
    flex: 1;
    /* border-box, damit content-Breite exakt der Textarea daneben
       entspricht (die ist ebenfalls border-box mit padding 0.5rem +
       border 1px). Ohne das wrapped der Diff einen Tick frueher oder
       spaeter als der live-getippte Text. */
    box-sizing: border-box;
}
.mp-finding-diff-detail-diffview .diff-block { margin: 0; }
.mp-finding-diff-detail-diffview .diff-view {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 0.8rem;
    /* Gleiche Font-Family wie die Textarea daneben — sonst wrappen
       Diff-View (Monospace-Default im <pre>) und Textarea (Sans-Serif
       via inherit) bei gleicher Container-Breite an unterschiedlichen
       Stellen. Mit gleicher Font und gleichem Padding (je 0.5rem)
       alignen die weichen Umbrueche visuell. */
    font-family: inherit;
    line-height: 1.5;
}
/* Zeilenumbruch in den Diff-Spans erzwingen — die globalen
   .diff-same/-remove/-add haben default white-space:pre (kein Umbruch),
   was bei langen Beschreibungen zu endlosem Horizontal-Scroll fuehrt.
   In diesem Scope wollen wir Umbruch; overflow-wrap: anywhere sorgt
   dafuer, dass auch lange unbroken Strings (URLs, lange Worte) nicht
   aus dem Container ragen. Zusaetzlich: gleiche Font wie Textarea,
   damit Wrap-Punkte alignen. */
.mp-finding-diff-detail-diffview .diff-same,
.mp-finding-diff-detail-diffview .diff-remove,
.mp-finding-diff-detail-diffview .diff-add,
.mp-finding-diff-detail-diffview .diff-modify {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
}
/* Inline-Wort-Markierungen im modify-Block erben Font/Size ebenfalls. */
.mp-finding-diff-detail-diffview .diff-word-rm,
.mp-finding-diff-detail-diffview .diff-word-add {
    font-family: inherit;
}
/* Toggle-Button in der Spalten-Beschriftung (Diff/Raw umschalten). */
.mp-diff-toggle-btn {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    color: var(--color-text);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.mp-diff-toggle-btn:hover {
    background: var(--bg-color);
    border-color: var(--header-bg);
}
.mp-finding-diff-detail-toolbar {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    justify-content: flex-end;
}
.mp-finding-diff-expand-btn {
    background: none;
    border: none;
    color: var(--color-info);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.2rem 0;
    text-align: left;
}
.mp-finding-diff-expand-btn:hover {
    text-decoration: underline;
}

/* Quellen-Rückverweis im Task-Detail (Phase 3). Wird sichtbar, wenn die Aufgabe
 * aus einem KI-Befund im Modul-Drawer entstanden ist. Grüner Akzent analog zum
 * Finding-Dot für state='as-task', damit die semantische Zusammengehörigkeit
 * sofort erkennbar ist. */
.task-source-info {
    background: #f0fdf4;
    border-left: 4px solid var(--color-success);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    color: #1b6b2e;
    margin: 0.5rem 0 0.85rem;
}
.task-source-label {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    margin-right: 0.3rem;
}
.task-source-hint {
    color: var(--color-muted);
    font-size: 0.75rem;
    font-style: italic;
}

/* ── Modul-Panel: Reife-Checkliste ────────────────────────────────────
   Wird im Panel-Tab "Reife" angezeigt. Struktur:
     .mp-maturity          → outer wrapper, geladen per module_panel.js
       .mp-maturity-score  → Score-Bubble oben (Ampel-Farbe + "5/8")
       .mp-maturity-list   → Liste der 8 Kriterien
         .mp-maturity-item → pro Kriterium: Icon ✓/✗ + Label + opt. Hint
*/
.mp-maturity { padding: 0.2rem 0; }
.mp-maturity-score {
    display: flex; align-items: baseline; gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.mp-maturity-score.level-green  { background: #ecfdf5; border-color: #86efac; color: #065f46; }
.mp-maturity-score.level-yellow { background: #fefce8; border-color: #fde68a; color: #713f12; }
.mp-maturity-score.level-red    { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.mp-maturity-score-value { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mp-maturity-score-label { color: inherit; opacity: 0.8; }

.mp-maturity-list { list-style: none; margin: 0; padding: 0; }
.mp-maturity-item {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.35rem 0;
    border-top: 1px solid #f0f0f0;
    font-size: 0.85rem;
}
.mp-maturity-item:first-child { border-top: none; }
.mp-maturity-icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.1rem; height: 1.1rem;
    border-radius: 50%;
    font-size: 0.78rem; font-weight: 700; line-height: 1;
    margin-top: 0.1rem;
}
.mp-maturity-item.met    .mp-maturity-icon { background: #dcfce7; color: #15803d; }
.mp-maturity-item.unmet  .mp-maturity-icon { background: #fee2e2; color: #b91c1c; }
.mp-maturity-label { font-weight: 500; }
.mp-maturity-hint  { color: var(--color-muted); font-size: 0.78rem; margin-top: 0.15rem; }

/* Kleiner Reife-Dot in der Sidebar (neben dem Label). */
.sidebar-dot.level-green  { background: #22c55e; }
.sidebar-dot.level-yellow { background: #eab308; }
.sidebar-dot.level-red    { background: #ef4444; }
/* Sidebar-Badge (Zähler, z.B. offene Aufgaben). */
.sidebar-badge {
    font-size: 0.62rem; font-weight: 700;
    background: #e67e22; color: #fff;
    border-radius: var(--radius-pill);
    padding: 0.05rem 0.35rem;
    min-width: 0.9rem; text-align: center;
    line-height: 1.2;
}

/* ── Aufgaben-Sektion im Modul-Panel ──────────────────────────────── */
/* Kompakte Zeilen-Liste — Klick öffnet den shared Task-Detail-Dialog
   (task_detail.js). Keine Accordion-Logik im Panel. */
.mp-task-row {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid #f0f0f0;
}
.mp-task-row:last-child { border-bottom: none; }
.mp-task-row:hover { background: #f0f2f5; border-radius: var(--radius-xs); }
.mp-task-chevron { font-size: 0.65rem; color: #bbb; flex-shrink: 0; transition: color 0.15s; }
.mp-task-row:hover .mp-task-chevron { color: #666; }
.mp-task-title  { font-weight: 500; word-break: break-word; flex: 1; }
.mp-task-meta   { color: var(--color-muted); font-size: 0.78rem; white-space: nowrap; }
.mp-task-unread {
    font-size: 0.65rem; font-weight: 700; background: var(--color-info);
    color: #fff; border-radius: var(--radius-pill); padding: 0.1rem 0.4rem;
    flex-shrink: 0;
}
/* Erledigte Tasks: kompakter Collapse-Abschnitt */
.mp-task-done-section { margin-top: 0.6rem; }
.mp-task-done-toggle {
    font-size: 0.78rem; color: var(--color-muted); cursor: pointer;
    padding: 0.2rem 0; user-select: none;
}
.mp-task-done-toggle:hover { color: var(--color-text); }
.mp-task-done-item {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem; color: #999; padding: 0.15rem 0;
    text-decoration: line-through;
}
.mp-task-done-check { color: var(--color-success); font-size: 0.72rem; }

/* ── Task-Detail-Dialog (shared, task_detail.js) ─────────────────── */
/* Verschoben aus tasks.html <style> → style.css, damit der Dialog
   auf allen Seiten (auch Curriculum/Modul-Panel) gleich aussieht. */
.task-detail-title { font-size: 1.05rem; font-weight: 700; color: #222; margin-bottom: 0.35rem; }
/* Aufgaben-Card: visuell als Hauptinhalt hervorgehoben */
.task-detail-card {
    display: flex; gap: 0.75rem; align-items: flex-start;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--header-bg);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 0.85rem;
    margin-bottom: 1rem;
}
.task-detail-card-icon { color: var(--header-bg); flex-shrink: 0; margin-top: 0.1rem; }
.task-detail-card-body { flex: 1; min-width: 0; }
.task-detail-desc { font-size: 0.88rem; color: #444; line-height: 1.65; }
.task-detail-desc p { margin: 0 0 0.5em; }
.task-detail-desc p:last-child { margin-bottom: 0; }
.task-detail-desc pre { background: #f4f4f4; padding: 0.5rem; border-radius: var(--radius-xs); overflow-x: auto; }
.task-detail-desc code { font-family: monospace; font-size: 0.85em; background: #f0f0f0; padding: 0.1em 0.3em; border-radius: 3px; }
.task-detail-desc pre code { background: none; padding: 0; }
.task-detail-meta { font-size: 0.78rem; color: #aaa; margin-bottom: 0.5rem; }

details.task-section { border: 1px solid #eee; border-radius: 6px; margin-bottom: 0.85rem; overflow: hidden; }
details.task-section > summary {
    padding: 0.55rem 0.85rem; font-size: 0.85rem; font-weight: 600;
    background: #f8f9fa; cursor: pointer; color: #444; list-style: none;
    display: flex; align-items: center; gap: 0.45rem;
    user-select: none;
}
details.task-section > summary::-webkit-details-marker { display: none; }
details.task-section > summary::before {
    content: '\25B6';
    /* Aufklapp-Dreieck: app-weit einheitlich 0.85rem in var(--header-bg) —
       gleiche Groesse wie .pl-chevron / details.dimension-section. */
    font-size: 0.85rem;
    display: inline-block;
    transition: transform 0.18s ease;
    color: var(--header-bg);
}
details.task-section[open] > summary::before { transform: rotate(90deg); }
.td-badge {
    font-size: 0.68rem; font-weight: 700;
    background: #e9ecef; color: #555;
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.45rem;
    margin-left: 0.2rem;
}
.td-badge-unread { background: var(--color-info); color: #fff; }
.task-section-body { padding: 0.75rem 0.85rem; }

.participant-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.65rem; }
.participant-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.participant-name { flex: 1; font-weight: 500; }
.participant-role-select { padding: 0.2rem 0.4rem; border: 1px solid #ccc; border-radius: var(--radius-xs); font-size: 0.78rem; font-family: inherit; background: #fff; }
.participant-empty { color: #bbb; font-size: 0.83rem; font-style: italic; }
.add-participant-form { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.add-participant-form select, .add-participant-form input {
    padding: 0.35rem 0.5rem; border: 1px solid #ccc; border-radius: var(--radius-xs);
    font-size: 0.83rem; font-family: inherit; background: #fff;
}

.msg-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 260px; overflow-y: auto; margin-bottom: 0.65rem; }
.msg-item { display: flex; gap: 0.55rem; align-items: flex-start; }
.msg-item.own { flex-direction: row-reverse; }
.msg-avatar {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    background: var(--header-bg); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
}
.msg-item.own .msg-avatar { background: #27ae60; }
.msg-bubble {
    background: #f1f3f4; border-radius: var(--radius-lg); padding: 0.4rem 0.7rem;
    font-size: 0.83rem; max-width: 75%; line-height: 1.5;
}
.msg-item.own .msg-bubble { background: #e8f0fe; }
.msg-meta { font-size: 0.68rem; color: #aaa; margin-top: 0.1rem; }
.msg-empty { color: #bbb; font-size: 0.82rem; font-style: italic; padding: 0.5rem 0; }
.msg-input-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.msg-input-row textarea {
    flex: 1; padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: 6px;
    font-size: 0.85rem; font-family: inherit; min-height: 36px; max-height: 100px;
    resize: vertical;
}

.workspace-section { border: 1px solid #e0e0e0; border-radius: 6px; background: #fafafa; padding: 0.85rem; margin-bottom: 0.85rem; }
.workspace-section h4 { font-size: 0.82rem; text-transform: uppercase; color: var(--color-muted); font-weight: 600; margin-bottom: 0.65rem; }

.complete-section { border: 1px solid #e5e7eb; border-radius: 6px; background: #fafafa; padding: 0.85rem; margin-bottom: 0.85rem; }
.complete-section h4 { font-size: 0.82rem; text-transform: uppercase; color: var(--color-muted); font-weight: 600; margin-bottom: 0.65rem; }
.complete-section textarea { width: 100%; padding: 0.4rem 0.6rem; border: 1px solid #ccc; border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit; min-height: 60px; resize: vertical; margin-bottom: 0.5rem; }
.completed-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: #d1fae5; color: #065f46; border-radius: 6px; padding: 0.35rem 0.75rem; font-size: 0.83rem; font-weight: 600; }

/* Filter-Button-Reihe (z. B. proposals.html: Offen/Angenommen/Abgelehnt/Alle).
   Aktiver Zustand wird per .active-Klasse gesetzt — keine Inline-Styles im JS. */
.filter-btn {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border);
    background: #f4f4f4;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filter-btn:hover { background: #e9ecef; }
.filter-btn.active {
    background: var(--header-bg);
    color: var(--header-fg);
    border-color: var(--header-bg);
}

/* Inline-Lade-Hinweis (zentriert, dezent) */
.loading-msg { text-align: center; padding: 2rem; color: var(--color-muted); }

/* ── Mobile-Anpassungen ─────────────────────────────────────────────────────
   Konsolidierte Responsiveness-Regeln für schmale Viewports.
   Drei Stufen:
     - <860px : Nav-Labels weg (oben definiert)
     - <680px : Sidebar-Sections kollabieren (oben definiert), Modul-Grid 2-spaltig
     - <600px : Toolbar/Modal-Foot wrappen, Drawer 100vw, Tabellen scrollen
*/

/* Tabellen mit horizontalem Scroll-Wrapper auf schmalen Screens.
   Anwendbar als Wrapper-Klasse <div class="table-scroll">…</div> oder
   automatisch via Selektor — letzteres wäre invasiv für bestehende Layouts. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 600px) {
    /* Toolbar/Footer brechen um statt rechts abzuschneiden */
    .toolbar { flex-wrap: wrap; }
    .modal-foot { flex-wrap: wrap; gap: 0.5rem; }
    .modal-foot .btn-primary,
    .modal-foot .btn-secondary,
    .modal-foot .btn-danger { flex: 1 1 auto; }

    /* Modal-Padding kompakter, Body kann den Großteil des Viewports nutzen */
    .modal-overlay { padding: 0.5rem; }
    .modal { max-height: 92vh; }
    .modal-head { padding: 0.7rem 0.9rem; }
    .modal-body { padding: 0.85rem 0.9rem; }
    .modal-foot { padding: 0.65rem 0.9rem; }

    /* Drawer nimmt fast den ganzen Bildschirm; klassischer Slide-In bleibt */
    .mp-preview-drawer { width: 100vw; border-radius: 0; top: 0; bottom: 0; }
    .mp-preview-resize-handle { display: none; }

    /* Tabellen-Container scrollen horizontal. Die Matrix-Tabelle (.matrix-wrapper)
       hat ihren eigenen Wrapper und bleibt unangetastet. */
    .task-table,
    .feedback-table,
    .forum-table,
    .history-table,
    .proposals-table,
    .notif-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .matrix-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Page-Tabs kompakter; auf Mobile wrappen statt überlaufen.
       Vertikaler Trennstrich verschwindet hier — der Wrap übernimmt
       die optische Gruppierung. */
    .page-tabs-bar { padding: 0 0.5rem; flex-wrap: wrap; }
    .page-tab { padding: 0.45rem 0.7rem; font-size: 0.85rem; }
    .page-tab-sep { display: none; }

    /* Meta-Strip umbrechen statt überlaufen */
    .meta-strip { flex-wrap: wrap; gap: 0.4rem 0.85rem; padding: 0.55rem 0.85rem; }
}

/* Sehr kleine Viewports (iPhone SE und kleiner) */
@media (max-width: 380px) {
    .modal-foot .btn-primary,
    .modal-foot .btn-secondary,
    .modal-foot .btn-danger { flex: 1 1 100%; }
    h1 { font-size: 0.95rem; }
}

/* ── Auditor-Banner ──────────────────────────────────────────────────────
   Permanenter Hinweis-Streifen zwischen Header-Branding und main-nav,
   nur für MedInfAuditor sichtbar. Optik bewusst dezent, aber erkennbar
   (gleicher Amber-Tint wie KI-Status-Bubbles für visuelle Konsistenz). */
/* Auditor-Banner sitzt IM <header> zwischen header-top und main-nav. Der
   Header-Hintergrund ist #2c3e50 (dunkel). Ein Alpha-Layer wie
   rgba(245,158,11,0.12) laesst den dunklen Ton durchschlagen → Text auf
   #92400e dann praktisch unlesbar (~1.14:1, weit unter WCAG 4.5:1).
   Loesung: solider Amber-Hint-Hintergrund (#fffbeb, wie andere Hint-
   Boxen). Kontrast Text #7c3d09 → BG #fffbeb: ~9.5:1 (AAA). */
.auditor-banner {
    background: #fffbeb;
    color: #7c3d09;
    border-top: 1px solid var(--color-warning);
    border-bottom: 1px solid var(--color-warning);
    padding: 0.4rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.auditor-banner strong { color: #5c2d08; font-weight: 700; }

/* ── Sprachregel-Verstoß-Hervorhebung (KI-Einbau-Workflows) ──────────────
   Die KI-Antwort wird serverseitig gegen die konfigurierte Sprachregel geprüft
   (gender_check.go). Verstöße werden an der jeweiligen Textarea im Diff-Modal
   als roter Warnstreifen + roter Rahmen angezeigt, damit die bearbeitende
   Person den Text korrigiert, bevor sie „Übernehmen" klickt. */
.mp-gender-warn {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 2px rgba(220,53,69,0.15);
}
.mp-gender-warn-box {
    background: #fdecea;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.65rem;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    color: #8a1b25;
}
.mp-gender-warn-head {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.mp-gender-warn-list {
    margin: 0;
    padding-left: 1.2rem;
    line-height: 1.45;
}
.mp-gender-warn-list li { margin: 0.25rem 0; }
.mp-gender-warn-hint {
    font-style: italic;
    font-weight: 400;
    color: #7a2530;
    font-size: 0.78rem;
    margin-top: 0.1rem;
    padding-left: 0.25rem;
}

/* ── Inklusiv-Rewrite-Dialog ──────────────────────────────────────────────
   Zwei-Spalten-Layout: Original (read-only <pre>) links, Vorschlag
   (editierbare <textarea>) rechts. Gleiche Textgröße in beiden Spalten,
   damit ein visueller Vergleich leichtfällt. Bei schmalen Viewports
   stapelt das Grid auf eine Spalte. */
.mp-rewrite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    flex: 1;
    min-height: 0;
}
@media (max-width: 680px) {
    .mp-rewrite-grid { grid-template-columns: 1fr; }
}
.mp-rewrite-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.25rem;
}
.mp-rewrite-pre,
.mp-rewrite-textarea {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    min-height: 220px;
    font-family: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    white-space: pre-wrap;
    overflow-y: auto;
}
.mp-rewrite-pre {
    margin: 0;
    color: var(--color-muted);
    background: #f8f9fa;
}
/* Fundstellen in der Original-Spalte: dezent rot hinterlegt + rote Unter-
   streichung, damit die KI-Eingriffe sofort auffindbar sind. Kontrast
   bleibt lesbar (Text in --color-text, nicht muted). */
.mp-rewrite-hit {
    background: rgba(220, 53, 69, 0.12);
    color: var(--color-text);
    border-bottom: 2px solid var(--color-danger);
    padding: 0 0.1rem;
    border-radius: 2px;
}
.mp-rewrite-textarea {
    resize: vertical;
    color: var(--color-text);
}

/* ── @-Mention-Picker (Forum-Textareas) ──────────────────────────────────
   Position wird via JS (mention-picker.js) absolut gesetzt. Kompaktes
   Dropdown mit max-height; jede Zeile zeigt ID, Name und Semester. */
.mention-picker {
    display: none;
    position: absolute;
    z-index: 500; /* über Modal-Overlays (200), unter Toasts (9999) */
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 280px;
    max-width: 420px;
    max-height: 240px;
    overflow-y: auto;
    font-size: 0.85rem;
}
.mention-picker-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    align-items: baseline;
}
.mention-picker-row.active,
.mention-picker-row:hover {
    background: rgba(44,62,80,0.08);
}
.mention-picker-id {
    font-family: monospace;
    color: var(--header-bg);
    font-size: 0.8rem;
    font-weight: 600;
}
.mention-picker-name {
    color: var(--color-text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.mention-picker-sem {
    color: var(--color-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mention-picker-empty {
    padding: 0.6rem 0.85rem;
    color: var(--color-muted);
    font-style: italic;
}

/* Form-Hinweis: dezenter Helper-Text unter einem Form-Feld.
   Z. B. "Tipp: Mit @ ein Modul direkt im Text verlinken." */
.form-hint {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--color-muted);
    line-height: 1.4;
}
.form-hint kbd {
    display: inline-block;
    padding: 0 0.3rem;
    border: 1px solid var(--color-border);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    background: #f8f9fa;
    font-family: monospace;
    font-size: 0.85em;
    color: var(--color-text);
    line-height: 1.4;
}

/* KI-Vorschläge im Modul-Panel-Aktivität (mp-ai-suggestion-*).
   Eigener Block unter den manuellen Forum-Topics. Editor kann ✓ bestätigen
   oder × verwerfen — danach reload der Liste (siehe module_panel.js). */
.mp-ai-suggestions {
    margin-top: 1rem;
    padding: 0.65rem 0.75rem;
    background: rgba(245,158,11,0.08);
    border: 1px dashed var(--color-warning);
    border-radius: var(--radius-sm);
}
.mp-ai-suggestions-head {
    font-size: 0.72rem;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.mp-ai-suggestion-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid rgba(146,64,14,0.15);
}
.mp-ai-suggestion-row:first-of-type { border-top: none; padding-top: 0; }
.mp-ai-suggestion-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
}
.mp-ai-suggestion-title:hover { text-decoration: underline; }
.mp-ai-suggestion-conf {
    font-size: 0.72rem;
    font-weight: 700;
    color: #92400e;
    background: rgba(245,158,11,0.18);
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-pill);
    align-self: start;
}
.mp-ai-suggestion-reason {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: var(--color-muted);
    font-style: italic;
    line-height: 1.4;
}
.mp-ai-suggestion-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

/* Gerenderte @-Mention im Beitrag (siehe mention-render.js / forum_topic.js) */
.mention {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.05rem 0.4rem;
    background: rgba(44,62,80,0.10);
    border-radius: var(--radius-pill);
    color: var(--header-bg);
    text-decoration: none;
    font-size: 0.92em;
    font-weight: 500;
    white-space: nowrap;
}
.mention:hover { background: rgba(44,62,80,0.18); }
.mention-broken {
    color: var(--color-muted);
    background: transparent;
    cursor: default;
    font-style: italic;
}

/* ── Reduced-Motion-Pflicht (WCAG 2.3.3, design.md → Accessibility) ──────────
   Wenn der Nutzer im Betriebssystem Bewegungs-Reduktion aktiviert hat,
   schalten wir alle dekorativen Übergänge und Animationen ab. Spinner und
   Drawer-Slide bleiben — sie sind funktionale Indikation, kein Schmuck. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    /* Funktionale Animationen behalten ihre Dauer — sie kommunizieren Status. */
    .spinner,
    .btn-loading::before { animation-duration: 0.65s !important; animation-iteration-count: infinite !important; }
}

/* ── Header-Brand (Logo + Curriculum-Name + Page-Title) ─────────────────── */
.nav-brand-row { display: flex; align-items: center; gap: 1.25rem; }
.nav-brand-meta {
    display: flex; flex-direction: column; justify-content: center;
    padding-left: 1.25rem;
    border-left: 1px solid rgba(255,255,255,0.2);
}
.nav-brand-curr  { font-size: 0.7rem; opacity: 0.55; line-height: 1.2; margin-bottom: 0.1rem; }
.nav-brand-title { margin: 0; font-weight: 400; font-size: 1rem; opacity: 0.9; line-height: 1.2; }
/* Kenndaten-Zeile direkt unter dem Studiengang-Wechsler: ruhige Identität des
   gewählten Studiengangs (Abschluss · ECTS · Semester) plus ein distinktes,
   klar klickbares Stand-Pill (Version + Live/Archiv). Gedämpft, aber lesbar auf
   dem dunklen Header-Band. */
.nav-brand-kenn {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.68rem; line-height: 1.2; margin-top: 0.15rem;
    color: rgba(255,255,255,0.72); white-space: nowrap;
}
.nav-brand-kenn-id { white-space: nowrap; }
/* Linke Kante der Kenndaten-Zeile unter den Text des Wechsler-Pills legen
   (Pill = border 1px + padding-left 0.55rem). Nur wenn der Pill existiert (mehrere
   Studiengänge); beim Einzel-Studiengang ist der Name flacher Text → bündig. */
.nav-brand-switch ~ .nav-brand-kenn { padding-left: calc(0.55rem + 1px); }

/* Stand-Indikator: bewusst KEIN Button — ruhiger Status-Link, damit er neben dem
   Studiengang-Wechsler nicht als zweiter dominanter Button wirkt. Icon + Versions-
   Nummer + Zähler-Badge geben ihm Präsenz; Hover/Underline signalisiert Klickbarkeit. */
.nav-stand-pill {
    display: inline-flex; align-items: center; gap: 0.28rem;
    padding: 0.05rem 0.15rem; border-radius: var(--radius-xs);
    font-size: 0.66rem; font-weight: 600; text-decoration: none;
    color: rgba(255,255,255,0.80); white-space: nowrap;
}
.nav-stand-pill svg { flex-shrink: 0; opacity: 0.8; }
.nav-stand-pill:hover { color: #fff; text-decoration: underline; }
.nav-stand-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Archiv (nur Lesen): amber Text + Schloss — der prominente Hinweis bleibt der
   „nur Lesen"-Banner; das Pill ist nur die persistente Erinnerung. */
.nav-stand-pill--archiv { color: #ffcf8a; }
.nav-stand-pill--archiv:hover { color: #ffd9a3; }
/* Zähler ungespeicherter Änderungen seit Release — dezentes Badge, kein Button. */
.nav-stand-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.05em; padding: 0 0.32em;
    background: rgba(255,255,255,0.16); border-radius: var(--radius-pill);
    font-size: 0.6rem; font-weight: 700;
}
/* Schmaler Header: langer Identitäts-Text weicht, das Stand-Pill (Version +
   Live/Archiv) bleibt sichtbar. */
@media (max-width: 680px) { .nav-brand-kenn-id { display: none; } }
/* Studiengang-Wechsler im Header: der Name wird zu einem klar klickbaren
   Pill-Button (sichtbarer Rahmen, deutlich größer als die alte Mini-Zeile). */
.nav-brand-switch { align-self: flex-start; margin-bottom: 0.15rem; }
.nav-brand-switch-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.10);
}
.nav-brand-switch-btn:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.5); }
.nav-brand-switch-btn .nav-brand-curr { margin-bottom: 0; font-size: 0.92rem; font-weight: 600; opacity: 1; }
.nav-brand-switch-btn svg { opacity: 0.85; }
.nav-brand-switch .nav-dropdown-menu { left: 0; right: auto; }
/* Dropdown-Einträge: Häkchen-Spalte + Name + Rolle; aktueller hervorgehoben. */
.nav-brand-switch .nav-dropdown-menu a { gap: 0.5rem; }
.nav-prog-check { flex: none; width: 1rem; text-align: center; color: var(--color-success); font-weight: 700; }
.nav-prog-name { flex: 1; min-width: 0; }
.nav-brand-switch .nav-dropdown-menu a.active { background: #eef4fb; }
.nav-prog-role { font-size: 0.62rem; text-transform: uppercase; font-weight: 700; color: var(--color-muted); white-space: nowrap; }

/* Nav-Dropdown-Akzente */
.nav-dev-link { color: #e67e22; }
.nav-link-disabled { pointer-events: none; opacity: 0.5; }
.nav-notif-dot { display: none; margin-left: 0.3rem; color: var(--color-warning); }

/* ── About-Modal (kein Standard-Modal-Layout — kompakte Visitenkarte) ─── */
.about-card {
    background: #fff; border-radius: var(--radius-lg);
    max-width: 340px; width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    overflow: hidden;
}
.about-head {
    background: var(--header-bg);
    padding: 1.75rem 2rem 1.5rem;
    text-align: center; position: relative;
}
.about-head-close {
    position: absolute; top: 0.6rem; right: 0.8rem;
    background: none; border: none;
    font-size: 1.1rem; cursor: pointer;
    color: rgba(255,255,255,0.7); line-height: 1;
}
.about-head-close:hover { color: #fff; }
.about-logo { max-width: 190px; display: block; margin: 0 auto; }
.about-body { padding: 1.25rem 2rem 1.5rem; text-align: center; }
.about-title { margin: 0 0 0.3rem; font-size: 0.95rem; font-weight: 600; color: #1e293b; }
.about-copyright { margin: 0 0 1rem; font-size: 0.8rem; color: var(--color-muted); }
.about-version { margin: 0; font-size: 0.78rem; color: #94a3b8; }
.about-version code {
    font-family: monospace; background: #f1f5f9;
    padding: 0.15rem 0.4rem; border-radius: var(--radius-xs);
}

/* ── Notifications-Overlay (Broadcast-Neuigkeiten) ──────────────────────── */
.notif-modal-head { display: flex; justify-content: space-between; align-items: center; }
.notif-title { margin: 0; font-size: 0.95rem; font-weight: 600; }
.notif-counter { font-weight: 400; font-size: 0.82rem; opacity: 0.7; }
.notif-modal-close {
    background: none; border: none; color: #fff;
    font-size: 1.15rem; cursor: pointer; line-height: 1;
    padding: 0.1rem 0.3rem;
}
.notif-modal-body { min-height: 120px; padding: 0; }
.notif-modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.notif-btn {
    border: none; padding: 0.4rem 0.9rem;
    border-radius: var(--radius-xs);
    font-size: 0.88rem; cursor: pointer;
    font-family: inherit;
}
.notif-btn-secondary { background: #e9ecef; color: var(--color-text); }
.notif-btn-secondary:disabled { opacity: 0.5; cursor: default; }
.notif-btn-primary { background: var(--header-bg); color: #fff; }
.notif-btn-group { display: flex; gap: 0.5rem; }

/* Help-Hub-Overlay über regulären Modals/Drawer (200/201).
   z-index:300 ist Default — wird per inline display:flex/none vom JS gesteuert. */
.modal-overlay-help { display: none; z-index: 300; }

/* ── Help-Hub-Modals (Kurzanleitung, KI-Handbuch, MCP-Anleitung) ──────── */
.help-modal-icon-title { font-size: 0.9rem; font-weight: 600; }
.help-modal-svg { vertical-align: -1px; margin-right: 5px; }
.help-modal-body-md { padding: 1.5rem 2rem; }
.help-modal-loading { text-align: center; color: #888; padding: 2rem; }
.help-modal-close-btn {
    padding: 0.4rem 1rem; border: none;
    background: var(--header-bg); color: var(--header-fg);
    border-radius: var(--radius-xs);
    cursor: pointer; font-size: 0.9rem; font-family: inherit;
}
.help-modal-close-btn:hover { background: var(--header-bg-hover); }

/* ── App-weiter ID-Badge (Ziel-IDs, Persona-IDs, Modul-Chips) ──────────────
   Eine gemeinsame Standard-Optik fuer alle ID-Anzeigen: heller Blau-Tint,
   dezenter Border, dunkelblauer Text. Vereinheitlicht zuvor 6+ Klassen mit
   inkonsistenter Geometrie und teils sehr dominanter Solid-Fill-Optik
   (background var(--header-bg) + color #fff = identisch zu Modal-Headern).
   Markup bleibt unveraendert; alle bestehenden Klassennamen werden vom
   Sammel-Selector auf den neuen Standard gezogen.
   Modifier-Varianten (.matrix-pill-assigned, .module-chip-unknown) bleiben
   in den jeweiligen Templates und ueberschreiben nur ihre Delta-Properties.
*/
.id-badge,
.ziel-id,
.ziel-id-badge,
.ks-id,
.ks-pill,
.persona-id-badge,
.sg-persona-id,
.matrix-pill,
.pm-persona-id,
.module-chip {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    background: #eef2fb;
    border: 1px solid #c5d3f0;
    border-radius: var(--radius-xs);
    font-family: monospace;
    font-weight: 700;
    font-size: 0.74rem;
    color: var(--header-bg);
    line-height: 1.4;
    white-space: nowrap;
    margin: 0;
}

/* ── Theme-/Akzent-Auswahl ───────────────────────────────────────────────────
   Geteilt von /system (globales Theme) und dem Studiengang-Modal (Override).
   Die Farbkachel ist ZWEIFARBIG: oben das System-Band (--header-bg), unten das
   Studiengang-Band (--header-bg-hover) — spiegelt den echten zweistufigen Header,
   sodass man sofort sieht, was einen erwartet. Die konkreten Farben kommen als
   inline-Gradient aus dem Template (pro Preset). */
.theme-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.theme-opt {
    display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: 0.6rem 0.9rem 0.6rem 0.6rem; min-width: 13rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.theme-opt:hover { background: #fafbfc; }
.theme-opt.selected { border-color: var(--header-bg); box-shadow: 0 0 0 2px rgba(44,62,80,.15); }
.theme-opt input { margin: 0; }
.theme-swatch {
    width: 46px; height: 32px; border-radius: var(--radius-sm);
    border: 1px solid rgba(0,0,0,.15); flex-shrink: 0;
}
.theme-label { font-size: 0.9rem; }

/* Account-Felder-Block (E-Mail-/KI-Override): eingerahmt, klappt je nach
   "Eigene …-Konfiguration verwenden"-Schalter auf/zu (Sichtbarkeit via JS). */
.account-fields {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.85rem 0.35rem;
    margin-top: 0.2rem;
    background: #fcfcfd;
}

/* Gruppen-Label in den Modal-Sidebars (Studiengang-Einstellungen): kleine,
   gedämpfte Überschrift über einer Reiter-Gruppe (Inhalt / Technik). */
.sidebar-group-label {
    display: block;
    padding: 0.55rem 0.9rem 0.15rem;
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--color-muted);
    white-space: nowrap; overflow: hidden;
}
.sidebar.collapsed .sidebar-group-label { opacity: 0; }

/* ── /analyse: Master-Orientierung über den Tabs (Punkt C) ───────────────── */
.analyse-orientation {
    background: #eef4fb; border: 1px solid #c5d3f0; border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem; margin-bottom: 0.8rem;
    font-size: 0.85rem; color: var(--color-text); line-height: 1.5;
}

/* ── /analyse: Schwellen-Legende der Matrix-Empfehlungen (Punkt D) ────────── */
.pm-rec-legend { margin: 0.4rem 0 0.6rem; font-size: 0.8rem; }
.pm-rec-legend > summary { cursor: pointer; color: var(--color-muted); width: max-content; }
.pm-rec-legend > summary:hover { color: var(--header-bg); text-decoration: underline; }
.pm-rec-legend > summary:focus-visible { outline: 2px solid var(--header-bg); outline-offset: 2px; }
.pm-rec-legend p {
    margin: 0.4rem 0 0; line-height: 1.5; color: var(--color-text);
    background: #f8f9fa; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 0.5rem 0.65rem;
}

/* ── /analyse: Export-/Druck-Aktionen im Meta-Kopf (Punkt B) ─────────────── */
.analyse-meta-actions { display: inline-flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.analyse-meta-link {
    background: none; border: none; padding: 0; cursor: pointer; font: inherit;
    color: var(--color-muted); text-decoration: none; border-bottom: 1px dotted var(--color-muted);
}
.analyse-meta-link:hover { color: var(--header-bg); border-bottom-color: var(--header-bg); }
.analyse-meta-link:focus-visible { outline: 2px solid var(--header-bg); outline-offset: 2px; }

/* ── Druck-Layout: nur das aktive Analyse-Panel, ohne App-Chrome (Punkt B).
   Inaktive Panels haben bereits inline display:none → sie drucken nicht mit.
   Die Regeln stehen am Dateiende und matchen die Basis-Selektoren, daher
   gewinnen sie per Cascade ohne !important. */
@media print {
    header,
    .site-footer,
    #toast-container,
    .meta-strip,
    .page-tabs-bar,
    .analyse-orientation,
    .analyse-start-box,
    .analyse-status-box,
    .analyse-meta-actions,
    .tour-trigger-btn,
    button {
        display: none;
    }
    body { background: #fff; color: #000; }
    .container { box-shadow: none; max-width: none; }
    a.matrix-pill, a.finding-module-pill { text-decoration: none; color: #000; }
    .finding-card, .matrix-item, .orphan-goal-card { break-inside: avoid; }
}