/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* Alle Farb-Variablen kommen aus dem Page-Type "domain" (colors-light /
 * colors-dark im FM, gerendert in lib/render.php html_head). KEINE Defaults,
 * KEINE Derivation hier. Wenn ein Slot fehlt → Browser-Standard (sichtbar
 * defekt, damit man es bemerkt und im NIMDA-Editor nachträgt). */

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: var(--on-primary);
    z-index: 100;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

/* Focus indicator (WCAG 2.4.7) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Mobile Auto-Zoom-Schutz (iOS Safari): Inputs mit font-size < 16px lösen
 * beim Fokus einen Zoom auf das Feld aus, der danach stehen bleibt. 16px als
 * Mindestgröße für ALLE benutzerfüllbaren Felder. Select/Textarea analog.
 * Gilt ab Mobile-Viewport; auf Desktop nicht nötig, aber nicht störend. */
@media (max-width: 900px) {
    /* !important nötig, damit spezifischere Regeln wie `.form-group input {
     * font-size: 0.95rem }` die iOS-Zoom-Schwelle (16px) nicht unterschreiten.
     * Das ist die Textbook-Berechtigung für !important: ein UX-Safety-Gate,
     * keine Design-Entscheidung. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    textarea,
    select {
        font-size: max(16px, 1em) !important;
    }
}

/* Typography */
body {
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--background);
    line-height: 1.6;
    font-size: 1rem;
}
code, pre {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}

/* Layout */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ?source=-Banner: Volltext-Suche-Treffer aus einer redirect-Page.
 * Das Banner selbst (Wrapper) bekommt eigenen Rahmen + Akzent-Border-Left;
 * die Inhalte (p, ul, a) greifen auf die Standard-`.content`-Typo aus base.css
 * zurueck (Klasse wird im Renderer mitgegeben). */
.source-search-banner {
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    background: var(--surface);
}

/* Header
 * Header skaliert NICHT mit dem Font-Scale-Slider aus theme.js (window.setFontScale,
 * setzt html.style.fontSize). Sizing-Werte hier sind absolute px statt rem;
 * font-size: 16px setzt den Anker für vererbte em-Berechnungen. Dropdowns
 * (#share-menu, #user-menu, #theme-menu) klinken sich per font-size: 1rem
 * wieder am Root ein, damit sie weiterhin mitskalieren.
 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    transition: transform 0.25s ease;
    will-change: transform;
    font-size: 16px;
}
.site-header-hidden {
    transform: translateY(-100%);
}
html {
    scroll-padding-top: 72px;
}
.site-header > .container {
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Header left (logo + breadcrumb) */
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.site-logo img {
    /* Viewport-skalierend: 32px (Mobile) … 56px (Desktop). Untere Schranke
     * verhindert Mini-Logos auf Smartphones, obere Schranke verhindert das
     * Header-Sprengen auf Riesen-Monitoren. */
    max-height: clamp(32px, 4.5vw, 56px);
    height: auto;
    width: auto;
    max-width: clamp(128px, 32vw, 288px);
    border-radius: 6px;
    padding: 4px;
    background: var(--logo);
    object-fit: contain;
}

/* Breadcrumb: Eine Zeile, horizontal scrollbar wenn zu lang. */
.breadcrumb {
    font-size: 14px;
    color: var(--text-muted);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-width: 100%;
    white-space: nowrap;
}
.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb .sep {
    margin: 0 6px;
    color: var(--border);
    flex: 0 0 auto;
}
.breadcrumb .current {
    color: var(--text);
    flex: 0 0 auto;
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* Header buttons (shared base) */
.header-btn,
.hamburger,
#theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background: none;
    transition: border-color 0.2s, color 0.2s;
}
.header-btn { font-family: Georgia, serif; font-size: 17.6px; }
.header-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Share dropdown (Desktop fallback) — bleibt rem-basiert (skaliert mit Slider) */
#share-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.25rem 0;
    min-width: 160px;
    z-index: 50;
    font-size: 1rem;
}
#share-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}
#share-menu a:hover,
#share-menu a:focus-visible {
    background: var(--surface-hover);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* User-/Theme-Menu dropdowns — font-size: 1rem klinkt sich am Root ein
 * (Header-Anker 16px wird durchbrochen), damit die Dropdown-Inhalte mit
 * dem Font-Scale-Slider mitwachsen. */
#user-menu,
#theme-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.25rem 0;
    min-width: 180px;
    z-index: 50;
    font-size: 1rem;
}
#user-menu a,
#theme-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}
#user-menu a:hover,
#theme-menu a:hover,
#user-menu a:focus-visible,
#theme-menu a:focus-visible {
    background: var(--surface-hover);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
#theme-menu { max-height: 80vh; overflow-y: auto; }
#theme-menu a { white-space: nowrap; }
#theme-menu .theme-menu-check { display: inline-block; width: 1rem; color: var(--accent); }
#theme-menu .theme-menu-sep { height: 1px; background: var(--border); margin: 0.25rem 0; }
#theme-menu .theme-menu-header { padding: 0.4rem 1rem 0.2rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
/* Font-Scale-Slider — sitzt zwischen DEFAULT-Block und Hell/Dunkel-
 * Sektion. Live-Apply via input-Event in theme.js (window.setFontScale). */
#theme-menu .theme-menu-scale {
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
#theme-menu .theme-menu-scale-row {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}
#theme-menu .theme-menu-scale input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
    margin: 0;
}

/* Avatar button — erbt vom Header (16px-Anker), Pixel-Größe */
.avatar-btn {
    font-weight: 700;
    font-size: 14.4px;
}

.hamburger:hover,
#theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* Main */
main {
    padding: 2rem 0;
    min-height: 60vh;
}

/* Headings */
main h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--primary);
}
main h2 {
    font-size: 1.5rem;
    margin: 2rem 0 0.75rem;
    color: var(--primary);
}
main h3 {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.5rem;
}

/* Content */
.content p {
    margin-bottom: 1rem;
}
.content ul, .content ol {
    margin: 0 0 1rem 1.5rem;
}
.content li {
    margin-bottom: 0.4rem;
}
.content blockquote {
    border-left: 3px solid var(--accent);
    padding: 0.5rem 1rem;
    margin: 1rem 0;
    color: var(--text-muted);
    background: var(--surface);
}
.content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}
.content img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1rem 0;
}
.content pre {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}
.content code {
    background: var(--surface);
    padding: 0.15em 0.35em;
    border-radius: 3px;
    font-size: 0.9em;
}
.content pre code {
    background: none;
    padding: 0;
}
.content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.content a:hover {
    text-decoration-thickness: 2px;
}
.content strong {
    color: var(--text);
}

/* Details/Summary (collapsible) — einheitlich für alle <details>-Tags:
 * Markdown-Content (GitHub-Tag-Whitelist), Nav-Tree, Editor-Sektionen,
 * CTA-Boxen. Pfeil-Marker dreht sich bei [open]; Spezial-Summaries
 * (z.B. .cta-kebab als Kebab-Icon) opten per `content: none` aus.
 */
details > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: '\25B8'; /* ▸ */
    font-size: 1.4rem;
    color: var(--accent);
    transition: transform 0.2s;
    flex-shrink: 0;
}
details[open] > summary::before {
    transform: rotate(90deg);
}

/* Markdown-Content: <details> als Surface-Card mit Rahmen, damit
 * GitHub-style Collapsibles im Artikel als eigener Block erkennbar sind. */
.content details {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.content details[open] {
    padding-bottom: 1rem;
}
.content details > summary {
    font-weight: 600;
    color: var(--text);
}
.content details > summary:hover {
    color: var(--accent);
}

/* Termin info */
.termin-info {
    margin-bottom: 1.5rem;
}
.trainer-section {
    margin: 2rem 0 1.5rem;
}
.trainer-section-title {
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted) !important;
    font-weight: 600;
    margin: 0 0 0.75rem !important;
}
.trainer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}
.trainer-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.85rem 0.35rem 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.trainer-chip:hover {
    border-color: var(--accent);
    text-decoration: none;
}
.trainer-chip .trainer-avatar {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform-origin: center center;
}
.trainer-chip:hover .trainer-avatar {
    transform: scale(2.2);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--scrim) 25%, transparent);
    position: relative;
    z-index: 2;
}
.trainer-chip .trainer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.trainer-chip .trainer-avatar .user-avatar-placeholder {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
}
.trainer-chip .trainer-name {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 500;
}
.termin-details {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    display: none;
    flex-direction: column;
    gap: 0.15rem;
}
.termin-details.has-user-time {
    display: flex;
}
.termin-details .termin-label {
    font-weight: 600;
}
.termin-details .termin-time {
    color: var(--text);
}
.edit-termin-btn {
    display: inline-block;
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 0.25rem 0.65rem;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.2s;
}
.edit-termin-btn:hover,
.edit-termin-btn:focus-visible {
    background: var(--surface-hover);
    color: var(--accent);
    text-decoration: none;
}
.termin-edit-box {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-width: 320px;
}
.termin-edit-box .form-group {
    margin-bottom: 0.5rem;
}
.termin-edit-box select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--background);
    color: var(--text);
    font-size: 0.9rem;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 600;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-active {
    background: var(--success);
    color: var(--on-success);
}
.badge-inquiry {
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.badge-format {
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* Upcoming events */
.upcoming-events {
    margin-bottom: 2rem;
}
.upcoming-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}
.upcoming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
@media print {
    .upcoming-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
.upcoming-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}
.upcoming-item:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}
.upcoming-date {
    font-size: 1.1rem;
    font-weight: 700;
}
.upcoming-name {
    font-size: 0.9rem;
    opacity: 0.9;
}
.upcoming-badges {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.upcoming-item .badge-slug {
    background: color-mix(in srgb, var(--on-primary) 10%, transparent);
    color: var(--on-primary);
    border: 1px solid color-mix(in srgb, var(--on-primary) 25%, transparent);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.upcoming-item .badge-format {
    background: color-mix(in srgb, var(--on-primary) 15%, transparent);
    color: var(--on-primary);
    border: 1px solid color-mix(in srgb, var(--on-primary) 30%, transparent);
    font-size: 0.8rem;
}

/* Educational Games (PLAN §25) — Karten-Grid mit fix 2 Spalten,
   kollabiert auf 1 Spalte unter 560px. Volle Container-Breite genutzt.
   Karten-Optik 1:1 von .upcoming-item, aber Inhalt = nur Titel. */
.eg-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 1.5rem 0;
    gap: 1rem;
}
@media (max-width: 560px) {
    .eg-card-grid { grid-template-columns: 1fr; }
}
.eg-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    min-height: 6rem;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: background 0.2s, transform 0.2s;
}
.eg-card:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}
.eg-results-count {
    color: var(--text-muted);
    margin: 0 0 1rem;
}

/* Locked-Hint auf der Spiel-Detail-Seite: wird angezeigt, wenn der
   gecuttete Body-Teil nicht sichtbar ist und category.zugriff
   `public` oder `registered` listet. */
.eg-locked-hint {
    border: 1px solid var(--border);
    background: var(--surface-alt);
    padding: 1rem 1.25rem;
    border-radius: 6px;
    margin: 1.5rem 0;
}
.eg-locked-hint .eg-locked-blocks,
.eg-locked-mini .eg-locked-blocks {
    color: var(--accent);
    font-weight: 600;
}

/* Inline-Mini-Locked-Hinweis pro Spiel-Block auf der Archetypen-Seite —
   subtiler als die volle .eg-locked-hint-Box, sitzt zwischen Phasen
   und dem (gecutteten) Rest des Blocks. */
.eg-locked-mini {
    font-size: 0.9rem;
    color: var(--text-muted);
    border-left: 3px solid var(--border);
    padding: 0.4rem 0.8rem;
    margin: 0.5rem 0 0;
    background: var(--surface-alt);
    border-radius: 0 4px 4px 0;
}
.eg-locked-mini a {
    color: var(--accent);
    text-decoration: underline;
    margin-left: 0.3rem;
}
.eg-locked-mini a:hover { color: var(--accent-hover); }
.eg-locked-hint .btn-row {
    display: flex;
    gap: 0.6rem;
    margin: 0.5rem 0 0;
    flex-wrap: wrap;
}
.eg-locked-hint .btn-primary,
.eg-locked-hint .btn-secondary {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}
.eg-locked-hint .btn-primary {
    background: var(--primary);
    color: var(--on-primary);
}
.eg-locked-hint .btn-primary:hover { background: var(--primary-hover); }
.eg-locked-hint .btn-secondary {
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--border);
}
.eg-locked-hint .btn-secondary:hover { border-color: var(--accent); }

/* Sticky Zurück-Bar auf der Archetypen-Seite: bleibt beim Scrollen
   oben sichtbar. Eigener Wrapper, damit der globale .back-button
   (z.B. in navigation_html) unverändert bleibt. Background damit
   beim Drüberscrollen der Body-Text nicht durchscheint. */
.eg-back-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--background);
    padding: 0.75rem 0;
    margin-bottom: 0;
}
.eg-back-bar .back-button { margin-bottom: 0; }

/* Anchor-Sprung-Ziele auf der Archetypen-Seite bekommen scroll-margin
   nach oben, damit sie nicht direkt unter der sticky Back-Bar landen. */
.eg-archetypes details[id],
.eg-archetypes h4[id] {
    scroll-margin-top: 4rem;
}

/* Archetyp-Infobutton im Spiel-Body — verlinkt auf
   /educational-games/archetypes#<code>. Pill mit ⓘ-Symbol vor dem Code. */
.eg-archetype-info {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.55rem;
    margin: 0 0.15rem;
    background: var(--surface);
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85em;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}
.eg-archetype-info::before {
    content: "ⓘ";
    font-size: 0.95em;
}
.eg-archetype-info:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
    color: var(--accent-hover);
}
.eg-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}
.eg-pagination a {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    color: var(--accent);
}
.eg-pagination a:hover {
    border-color: var(--accent);
}
.eg-pagination-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Filter-Bar: Trigger-Button + Pills mit aktiven Filtern. Wrappt
   auf schmalen Viewports auf mehrere Zeilen. */
.eg-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}
.eg-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.eg-active-filter-pill {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.85rem;
    line-height: 1.4;
}
.eg-active-filter-field { color: var(--text-muted); }
.eg-pill-remove {
    color: var(--danger);
    text-decoration: none;
    font-weight: bold;
    margin-left: 0.4rem;
    padding: 0 0.25rem;
    line-height: 1;
    border-radius: 3px;
}
.eg-pill-remove:hover {
    color: var(--on-danger);
    background: var(--danger);
}

/* Filter-Trigger-Button. Counter-Pill zeigt Anzahl aktiver Filter
   (inkl. Volltextsuche). */
.eg-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    margin: 0;
}
.eg-filter-trigger:hover { border-color: var(--accent); }
.eg-filter-trigger-count {
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.8rem;
    line-height: 1.2;
}

/* Filter-Modal (<dialog>) — vollflächig auf dem visuellen Viewport.
   Header (Titel + Schließen-X), scrollbarer Body, Footer mit Apply/Reset.
   Höhe via 100dvh (Dynamic Viewport Height) damit iOS-Safari-URL-Leiste
   nicht das Modal abschneidet; 100vh als Fallback für ältere Browser. */
.eg-filter-modal {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    background: var(--background);
    color: var(--text);
    overflow: hidden;
}
.eg-filter-modal::backdrop { background: var(--scrim); opacity: 0.6; }
.eg-filter-modal-form {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.eg-filter-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.eg-filter-modal-header h2 { margin: 0; font-size: 1.15rem; }
.eg-filter-modal-close {
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
}
.eg-filter-modal-close:hover { color: var(--accent); }
.eg-filter-modal-body {
    padding: 1rem 1.2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* Filter-Sektionen im Modal als Grid: 1 / 2 / 3 / 4 Spalten je nach
   Viewport-Breite. align-items:start sorgt dafür, dass geschlossene
   <details> nicht auf die Höhe des größten offenen gestreckt werden. */
.eg-filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    align-items: start;
}
@media (min-width: 560px)  { .eg-filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 840px)  { .eg-filter-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .eg-filter-grid { grid-template-columns: repeat(4, 1fr); } }
.eg-filter-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.8rem 1.2rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--surface);
}

.eg-search-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--background);
    color: var(--text);
}
.eg-filter-section {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
}
.eg-filter-section > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.2rem 0;
}
.eg-filter-options {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.eg-filter-options li { margin: 0.2rem 0; }
.eg-filter-options label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.eg-filter-count {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-left: auto;
}
.eg-filter-apply {
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.eg-filter-apply:hover { background: var(--primary-hover); }
.eg-filter-clear {
    padding: 0.5rem 1rem;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.eg-filter-clear:hover { color: var(--accent); border-color: var(--accent); }

/* Card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
@media print {
    html { font-size: 12px; }
    .card-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .page-sidebar { display: none !important; }
    .page-layout { display: block !important; }
}

/* Card */
.card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--scrim) 15%, transparent);
    transform: translateY(-2px);
}
.card:hover .card-image img {
    transform: scale(1.05);
}
.card:hover h3 {
    color: var(--accent);
}
.card > h2:first-child {
    margin-top: 0;
}
.card-image {
    margin: -1.25rem -1.25rem 0.75rem;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    aspect-ratio: 4/3;
}
/* Card mosaic (category preview with 2-4 images) */
.card-mosaic {
    display: grid;
    gap: 4px;
    aspect-ratio: 4/3;
    overflow: hidden;
    margin: -1.25rem -1.25rem 0.75rem;
    border-radius: 6px 6px 0 0;
    background: transparent;
}
.card-mosaic-2 { grid-template-columns: 1fr 1fr; }
.card-mosaic-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.card-mosaic-3 .mosaic-cell:first-child { grid-row: 1 / 3; }
.card-mosaic-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic-cell {
    position: relative;
    overflow: hidden;
}
.mosaic-cell img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    filter: brightness(0.75);
    transition: filter 0.3s;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
/* Category preview inside card */
.card-preview {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.5rem;
}
.card-preview-item {
    font-size: 0.8rem;
    align-self: flex-start;
    padding: 0.2rem 0.5rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-muted);
}
.card-preview-more {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    color: var(--accent);
    font-style: italic;
}

.card-flags {
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    margin-bottom: 0.3rem;
}
.card-slug {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}
.card h3 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
    color: var(--primary);
    transition: color 0.2s;
}
.card-excerpt {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}
.card .badge {
    margin-top: 0.25rem;
}

/* Page layout: content + sidebar.
 * minmax(0, 1fr) statt 1fr -- sonst nimmt die Content-Spalte implizit
 * min-width: auto an, was ihre minimale Größe = Content-Größe heißt. Dann
 * sprengen breite Kinder (z.B. horizontal scrollbare Tab-Leisten mit
 * width: max-content) das Grid und die ganze Seite scrollt, statt dass
 * das Kind-Container scrollt. */
.page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}
@media (min-width: 900px) {
    .page-layout {
        grid-template-columns: minmax(0, 1fr) 260px;
    }
}

/* Sidebar */
.page-sidebar {
    position: sticky;
    top: 4rem;
    align-self: start;
    padding-top: 3rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
}
.sidebar-section {
    margin-bottom: 2rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--border);
}
.sidebar-section h2 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

/* Siblings on category pages (below content, not sidebar) */
.siblings, .parent-siblings {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.siblings h2, .parent-siblings h2 {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

/* Link list */
.link-list {
    list-style: none;
    padding: 0;
}
.link-list li {
    margin-bottom: 0.4rem;
}
.link-list a {
    color: var(--accent);
    text-decoration: none;
}
.link-list a:hover {
    text-decoration: underline;
}

/* Unread-Zähler (generisch, überall einsetzbar) */
.unread-count {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0 0.4rem;
    margin-left: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.4rem;
    text-align: center;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 999px;
    vertical-align: baseline;
    font-weight: 600;
}
.unread-count-zero {
    background: var(--surface-alt);
    color: var(--text-muted);
}

/* Notification-Liste (Messages → Benachrichtigungen) */
.msg-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}
.msg-bulk-actions form { margin: 0; }
.msg-bulk-actions .cta-submit {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 500;
    align-self: auto;
}
.notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.notification-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.notification-item.notification-unread {
    border-left: 4px solid var(--accent);
    background: var(--surface-hover, var(--surface));
}
.notification-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.notification-type {
    font-weight: 600;
    color: var(--text);
}
.notification-time {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.notification-body {
    color: var(--text);
    line-height: 1.45;
    margin-bottom: 0.75rem;
}
.notification-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.notification-actions .cta-submit {
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

/* Avatar-Fallback (Initial-Badge wenn kein Avatar vorhanden) */
.avatar-img,
.avatar-initial {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    flex-shrink: 0;
}
.avatar-initial {
    font-weight: 600;
    color: var(--surface);
    background: var(--accent);
    text-transform: uppercase;
}
.pn-thread-avatar-el {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.1rem;
}
.pn-peer-avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.95rem;
}
.forum-author-avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.95rem;
}

/* CTA-Postfach (Messages → CTA) */
.cta-list-wrap h2 { margin-top: 1.5rem; }
.cta-closed-block { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.cta-closed-block summary { cursor: pointer; color: var(--text-muted); }
.cta-thread-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cta-thread-item { border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem; transition: background 0.15s; }
.cta-thread-item:hover { background: var(--surface-hover); }
.cta-thread-item.cta-unread { border-left: 3px solid var(--accent); }
.cta-thread-item.cta-ball-us { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cta-thread-link { display: block; text-decoration: none; color: inherit; }
.cta-thread-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; }
.cta-thread-name { font-weight: 600; }
.cta-thread-sub { display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.25rem; }
.cta-thread-preview { display: block; color: var(--text); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cta-status-chip { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; background: var(--surface); border: 1px solid var(--border); }
.cta-status-neu { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); }
.cta-status-offen { background: color-mix(in srgb, var(--text) 10%, transparent); border-color: var(--text); }
.cta-status-pending { background: color-mix(in srgb, var(--text-muted) 15%, transparent); border-color: var(--text-muted); font-style: italic; }
.cta-status-gebucht { background: var(--accent); color: var(--background); border-color: var(--accent); }
.cta-status-abgesagt { background: transparent; border-color: var(--text-muted); color: var(--text-muted); text-decoration: line-through; }
.cta-status-antwort_verschieben { background: color-mix(in srgb, var(--text-muted) 10%, transparent); border-color: var(--text-muted); color: var(--text-muted); font-style: italic; }
.cta-thread-snooze { color: var(--text-muted); font-style: italic; }
.cta-snooze-wrap input[type="date"] { padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--background); color: var(--text); }
.cta-snooze-wrap[hidden] { display: none; }
.cta-ball-chip { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; font-weight: 600; background: var(--accent); color: var(--background); }

/* CTA-Thread-Ansicht — kompakt, chat-artig */
.cta-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
.cta-head-avatar { flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; background: var(--accent); color: var(--background); }
.cta-head-id { flex: 1 1 auto; min-width: 0; }
.cta-head-name { font-weight: 600; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cta-head-email { color: var(--text-muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; }
.cta-head-email a { color: inherit; text-decoration: none; }
.cta-head-email a:hover { text-decoration: underline; }
.cta-kebab { position: relative; }
/* Kebab-Symbol als Summary — Default-Pfeil aus dem generischen
 * details-Block ist hier unerwünscht. */
.cta-kebab summary { padding: 0.4rem 0.8rem; font-size: 1.15rem; line-height: 1; background: var(--primary); color: var(--on-primary); border-radius: 4px; font-weight: 600; cursor: pointer; transition: background 0.2s; list-style: none; }
.cta-kebab summary::before { content: none; }
.cta-kebab summary::-webkit-details-marker { display: none; }
.cta-kebab summary:hover { background: var(--primary-hover); }
.cta-kebab-form { position: absolute; right: 0; top: 100%; z-index: 5; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 12px color-mix(in srgb, var(--scrim) 15%, transparent); min-width: 14rem; }
.cta-kebab-form label { font-size: 0.8rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.2rem; }
.cta-kebab-form select { padding: 0.3rem 0.4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--background); color: var(--text); }

.cta-msg-counter { display: block; width: max-content; margin: 0.3rem 0 0 auto; padding: 0.15rem 0.55rem; border-radius: 999px; font-variant-numeric: tabular-nums; font-size: 0.8em; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); align-self: flex-end; }

/* CTA-Anhang-Picker (Public-Form mit ?r=att) */
.cta-att-group { display: flex; flex-direction: column; gap: 0.4rem; }
.cta-att-input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cta-att-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; max-width: 100%; color: var(--text); font-size: 14px; }
.cta-att-trigger:hover { background: var(--surface-hover, var(--border)); }
.cta-att-input:focus-visible + .cta-att-trigger { outline: 2px solid var(--accent); outline-offset: 2px; }
.cta-att-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.cta-att-pill { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 0.85em; }
.cta-att-name { flex: 1 1 auto; color: var(--text); word-break: break-all; }
.cta-att-rm { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 1.1em; line-height: 1; padding: 0 0.2rem; }
.cta-att-rm:hover { color: var(--danger); }
.cta-att-counter { width: max-content; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.8em; background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.cta-att-counter.cta-att-over { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }

/* Anhänge in Chat-Bubbles: Bilder inline, andere Files als Link mit Büroklammer */
.cta-bubble-img-link { display: block; margin-top: 0.35rem; }
.cta-bubble-img { max-width: 100%; height: auto; display: block; border-radius: 8px; }
.cta-bubble-att { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; padding: 0.25rem 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); text-decoration: none; font-size: 0.85em; }
.cta-msg-mine .cta-bubble-att { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); color: inherit; }
.cta-bubble-att:hover { background: var(--surface-hover, var(--border)); }
.cta-msg-counter.cta-counter-low { background: var(--danger);  color: var(--on-danger);  border-color: var(--danger); }
.cta-msg-counter.cta-counter-ok  { background: var(--success); color: var(--on-success); border-color: var(--success); }

.cta-chat { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.cta-msg { display: flex; flex-direction: column; max-width: 80%; }
/* §34: Nachrichten mit YT-Player nehmen die volle Bubble-Breite ein —
   Cover-Bild + Play-Button brauchen Platz, shrink-to-fit ist zu eng. */
.cta-msg:has(.yt-player) { width: 80%; }
.cta-msg:has(.yt-player) .cta-bubble { width: 100%; }
.cta-msg.cta-msg-other  { align-self: flex-start; align-items: flex-start; }
.cta-msg.cta-msg-mine   { align-self: flex-end;   align-items: flex-end; }
.cta-msg.cta-msg-system { align-self: center;     align-items: center; max-width: 100%; }
.cta-system-chip { padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.8em; }
.cta-system-time { opacity: 0.7; }
.cta-bubble { padding: 0.5rem 0.75rem; border-radius: 12px; word-wrap: break-word; }
.cta-msg-other .cta-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.cta-msg-mine  .cta-bubble { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 4px; }
.cta-msg-mine  .cta-bubble a { color: inherit; text-decoration: underline; }
.cta-msg-other .cta-bubble a { color: var(--primary); }
.cta-bubble-text p { margin: 0; }
.cta-bubble-text p + p { margin-top: 0.4rem; }
.cta-bubble-meta { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; padding: 0 0.25rem; }
.cta-bubble-meta a { color: inherit; }
.cta-bubble-del { background: none; border: none; color: var(--text-muted); font-size: 0.9rem; cursor: pointer; padding: 0 0.2rem; }
.cta-bubble-del:hover { color: var(--accent); }
.cta-system-del { background: none; border: none; color: var(--text-muted); font-size: 0.9rem; cursor: pointer; padding: 0 0.2rem; margin-left: 0.2rem; }
.cta-system-del:hover { color: var(--accent); }

.cta-composer-heading { font-size: 0.95rem; font-weight: 600; margin: 0.75rem 0 0.4rem; color: var(--text-muted); }
.cta-composer { display: flex; align-items: flex-end; gap: 0.4rem; padding: 0.4rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.cta-composer textarea { flex: 1 1 auto; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; background: var(--background); color: var(--text); resize: vertical; font-family: inherit; min-height: 2.2rem; }
.cta-composer-closed { color: var(--text-muted); font-style: italic; }

/* PN Thread-Liste (Messages → Private Nachrichten) */
.pn-thread-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pn-thread-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: stretch;
}
.pn-thread-item.pn-unread {
    border-left: 4px solid var(--accent);
}
.pn-thread-link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    text-decoration: none;
    color: inherit;
}
.pn-thread-del-form {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding-right: 0.6rem;
}
.pn-thread-del-btn {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s;
}
.pn-thread-del-btn:hover {
    color: var(--accent);
    background: var(--border);
    opacity: 1;
}
.pn-thread-avatar {
    flex: 0 0 auto;
}
.pn-thread-avatar img {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.pn-thread-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.pn-thread-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}
.pn-thread-name {
    font-weight: 600;
}
.pn-thread-time {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.pn-thread-preview {
    color: var(--text-muted);
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PN Fullscreen — App-Modus mit dvh für Tastatur-Handling */
.pn-fullscreen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--background);
    z-index: 10000;
    height: 100vh;        /* Fallback */
    height: 100dvh;       /* Modern: reagiert auf Tastatur-Einblendung */
    overflow: hidden;
}
.pn-fullscreen-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.pn-back-arrow {
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    color: var(--text);
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    flex-shrink: 0;
}
.pn-back-arrow:hover {
    background: var(--border);
    color: var(--accent);
}
.pn-fullscreen-logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    overflow: hidden;
}
.pn-fullscreen-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.pn-fullscreen-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.pn-fullscreen-composer {
    flex: 0 0 auto;
    display: flex;
    gap: 0.55rem;
    align-items: flex-end;
    padding: 0.65rem 0.9rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.pn-fullscreen-composer textarea {
    flex: 1 1 auto;
    resize: none;
    min-height: 2.4rem;
    max-height: 7rem;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.55rem 0.7rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    line-height: 1.35;
}
.pn-fullscreen-composer textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.pn-fullscreen-composer button {
    flex: 0 0 auto;
    padding: 0.55rem 1rem;
}
.pn-attach-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.65rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
}
.pn-attach-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.pn-attach-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.pn-attach-btn:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.pn-msg-image {
    display: block;
    max-width: 100%;
    max-height: 24rem;
    border-radius: 10px;
    margin: 0;
}
.pn-msg-bubble .pn-msg-image + .pn-msg-text {
    margin-top: 0.45rem;
}
/* PN Thread-Ansicht */
.pn-thread-peer {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}
.pn-thread-peer:hover {
    color: var(--accent);
}
.pn-pagination {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.pn-pagination .cta-submit {
    flex: 1;
    min-width: 10rem;
    text-align: center;
    padding: 0.5rem 0.85rem;
    font-size: 0.9rem;
}
.pn-empty-thread {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}
.pn-message-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.pn-message {
    display: flex;
    flex-direction: column;
    max-width: 90%;
}
.pn-msg-mine {
    align-self: flex-end;
    align-items: flex-end;
}
.pn-msg-other {
    align-self: flex-start;
    align-items: flex-start;
}
.pn-msg-bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.6rem 0.9rem;
    line-height: 1.45;
    word-wrap: break-word;
}
/* §34: Nachrichten mit YT-Player nehmen die volle Bubble-Breite ein —
   Cover + 3 Thumbnails brauchen Platz, shrink-to-fit ist zu eng. */
.pn-message:has(.yt-player) {
    width: 90%;
}
.pn-message:has(.yt-player) .pn-msg-bubble {
    width: 100%;
}
.pn-msg-mine .pn-msg-bubble {
    background: var(--accent);
    color: var(--surface);
    border-color: var(--accent);
}
/* Links in der eigenen Bubble: die Bubble hat Accent-Hintergrund, .content a
   wäre sonst Accent-auf-Accent (unsichtbar). Bubble-Textfarbe (--surface)
   übernehmen + unterstreichen, damit der Link erkennbar ist. */
.pn-msg-mine .pn-msg-text.content a {
    color: var(--surface);
    text-decoration: underline;
}
/* §41 Privacy-Helper: Kurs-Badges in der Beispiel-Galerie sind rein illustrativ,
   nicht anklickbar (sonst würde man aus dem Wizard navigieren). */
.ph-badges-static .profile-badge { pointer-events: none; cursor: default; }
.pn-msg-meta {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    padding: 0 0.3rem;
}
.pn-msg-delete {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0.2rem;
    opacity: 0.6;
}
.pn-msg-delete:hover {
    color: var(--accent);
    opacity: 1;
}

/* Zurück-Button auf /messages */
.messages-back {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.cta-submit.cta-submit-muted {
    background: var(--text-muted);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}
.cta-submit.cta-submit-muted:hover {
    background: var(--text);
}
/* Danger-Button: gleiche Farbe wie .cta-error (var(--danger)) — die Hinweis-
 * Konvention der App. Weißer Text, theme-unabhängig. */
.cta-submit.cta-submit-danger {
    background: var(--danger);
    color: var(--on-danger);
}
.cta-submit.cta-submit-danger:hover {
    background: var(--danger-hover);
}

/* ✉️-Button im Header (Message-Center) — Pixel-Werte: Header skaliert nicht */
.header-btn.inbox-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
}
.header-btn.inbox-btn:hover {
    color: var(--accent);
}
.header-btn-badge {
    position: absolute;
    top: -4px;
    right: -5.6px;
    min-width: 17.6px;
    height: 17.6px;
    padding: 0 4.8px;
    font-size: 11.2px;
    line-height: 17.6px;
    font-weight: 600;
    text-align: center;
    color: var(--surface);
    background: var(--accent);
    border-radius: 999px;
    box-sizing: border-box;
}

/* Visually-hidden (für H1-Fallbacks) */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* CTA Section */
.cta-section {
    /* Form-Layout-Chrome wird NICHT vom Font-Scale-Slider mitskaliert —
     * Pixel-Anker auf margin/padding. Texte INSIDE (h2, p, label) bleiben
     * in rem und skalieren mit dem Slider mit. */
    margin-top: 40px;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    min-width: 0;
    max-width: 100%;
}
.cta-section .cta-att-trigger { max-width: 100%; }
.cta-section hgroup { margin: 0 0 20px; }
.cta-section hgroup h2 { margin: 0; }
.cta-section hgroup p {
    font-size: 1.1rem;  /* Text → skaliert */
    font-weight: 700;
    color: var(--text);
    margin: 4px 0 0;   /* Layout → fix */
}
.cta-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 600px) {
    .cta-columns {
        grid-template-columns: 1fr auto;
        align-items: start;
    }
}
.cta-form {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Layout-Chrome — px statt rem, skaliert nicht mit Slider */
}
/* Voraussetzungs-Gate: zwei Sektionen.
   1) .profile-badge-grid mit den Badge-Links (rein informativ, klickbar zur
      Kursseite — Optik 1:1 von .profile-badge-grid/.profile-badge).
   2) .cta-prereq-claim mit Checkboxen + gated Form. Form ist erst sichtbar,
      wenn mind. eine Checkbox :checked ist (`:has`-Selector).
   Die Claim-Heading ist bewusst muted + kleiner als die rote Voraussetzungs-
   Heading darüber — semantische Hierarchie: das oben ist die Regel, das hier
   ist eine Sub-Frage. */
.cta-prereq-claim { margin-top: 2rem; }
.cta-prereq-claim-input { margin-right: 0.5rem; }
.cta-prereq-claim-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    cursor: pointer;
}
.cta-prerequisite-gate .cta-form-gated {
    display: none;
}
.cta-prerequisite-gate:has(.cta-prereq-claim-input:checked) .cta-form-gated {
    display: block;
    margin-top: 1.5rem;
}
.cta-login-required {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.cta-login-link { text-align: center; display: block; text-decoration: none; }
/* Meta-Pills im Bubble-Footer: Betreff (= page_title, --accent) und Claim
   (= claims_prerequisite, --warning). Shared shape, unterschiedliche Systemfarbe. */
.cta-bubble-claim, .cta-bubble-subject {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.78rem;
}
.cta-bubble-claim a, .cta-bubble-subject a { color: inherit; text-decoration: underline; }
.cta-bubble-claim   { background: var(--warning); color: var(--on-warning); }
.cta-bubble-subject { background: var(--accent);  color: var(--on-accent); }
.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Layout-Chrome — px statt rem */
}
.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select {
    width: 100%;
    /* Form-Controls werden NICHT vom Font-Scale-Slider mitskaliert — sie
     * sind UI-Chrome, kein Content. Pixel-Anker statt rem; font-size 16px
     * deckt zugleich die iOS-Auto-Zoom-Schwelle ab (max(16px,1em) bleibt
     * stabil bei 16px). Labels darüber stehen weiter in rem und skalieren
     * mit dem Text. */
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--background);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    box-sizing: border-box;
    height: 48px;
}
.form-group textarea {
    height: auto;
    min-height: 48px;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
}
.form-group textarea {
    resize: vertical;
}
.form-hint a {
    color: var(--accent);
    text-decoration: underline;
}
.form-hint a:hover {
    text-decoration-thickness: 2px;
}
.form-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
.input-toggle-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.input-toggle-wrap input {
    flex: 1;
    padding-right: 2.5rem;
}
.input-toggle {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.6;
    padding: 0.25rem;
}
.input-toggle:hover {
    opacity: 1;
}
.cta-submit {
    padding: 0.6rem 1.5rem;
    background: var(--primary);
    color: var(--on-primary);
    border: none;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.2s;
}
.cta-submit:hover {
    background: var(--primary-hover);
}
.cta-phone {
    text-align: center;
    padding: 1rem;
}
.cta-phone p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.cta-phone-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}
.cta-phone-number:hover {
    color: var(--accent);
}
.cta-success {
    padding: 1rem;
    background: var(--success);
    color: var(--on-success);
    border-radius: 4px;
    font-weight: 600;
}
.cta-error {
    padding: 0.75rem;
    background: var(--danger);
    color: var(--on-danger);
    border-radius: 4px;
    margin-bottom: 1rem;
}
.cta-info {
    padding: 0.75rem;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 4px;
    margin-bottom: 1rem;
}

/* Termin badge link */
.termin-badge-link {
    text-decoration: none;
}
.termin-badge-link:hover .badge {
    opacity: 0.85;
}

/* Back button */
.back-button {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.4rem 0.8rem;
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: border-color 0.2s, color 0.2s;
}
.back-button:hover {
    border-color: var(--accent);
    color: var(--primary);
}

/* Navigation tree */
.site-nav {
    margin: 1rem 0;
}
.nav-tree {
    list-style: none;
    padding-left: 1.25rem;
}
.nav-tree-root {
    padding-left: 0;
}
.nav-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}
.nav-item:last-child {
    border-bottom: none;
}
.nav-item a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.nav-item a:hover {
    text-decoration: underline;
}
.nav-category-label {
    color: var(--primary);
    font-weight: 700;
}
/* Marker/Cursor/Klick-Verhalten kommt aus dem generischen
 * `details > summary`-Block weiter oben. Hier nur nav-spezifischer
 * Hover-Effekt auf das Label. */
.nav-item details summary:hover .nav-category-label {
    color: var(--accent);
}
.nav-active > a,
.nav-active > details > summary > .nav-category-label {
    color: var(--text) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--accent);
}
.nav-item .badge {
    margin-left: 0.5rem;
    vertical-align: middle;
}
.nav-tree .nav-tree {
    margin-top: 0.25rem;
    border-left: 2px solid var(--border);
}

/* Auth forms */
.auth-form {
    max-width: 520px;
    margin: 0 auto;
}
.auth-buttons {
    margin-top: 1rem;
}
.auth-links {
    margin-top: 1.5rem;
    font-size: 0.9rem;
}
.auth-links a {
    color: var(--accent);
    text-decoration: underline;
}

/* Step indicator */
.step-indicator {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.step-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--surface);
    color: var(--text-muted);
    border: 2px solid var(--border);
}
.step-dot.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}
.step-dot.done {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

/* Legal scrollbox */
.legal-block {
    margin-bottom: 1.5rem;
}
.legal-block h3 {
    margin-bottom: 0.5rem;
}
.legal-scrollbox {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    background: var(--text);
    color: var(--background);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}
.legal-scrollbox h1,
.legal-scrollbox h2,
.legal-scrollbox h3,
.legal-scrollbox h4 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}
.legal-scrollbox h1:first-child,
.legal-scrollbox h2:first-child,
.legal-scrollbox h3:first-child {
    margin-top: 0;
}
.legal-scrollbox p {
    margin-bottom: 0.75rem;
}
.legal-scrollbox ul, .legal-scrollbox ol {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}
.legal-scrollbox li {
    margin-bottom: 0.25rem;
}
.legal-scrollbox strong {
    color: var(--background);
}
.scroll-progress {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: right;
    margin-bottom: 0.25rem;
}
.scroll-progress.complete {
    color: var(--accent);
}
.legal-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.5rem 0;
}
.legal-check input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    min-width: 1.4rem;
    accent-color: var(--accent);
    cursor: pointer;
}
.legal-check input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Summary list */
.summary-list {
    margin: 1rem 0;
}
.summary-list dt {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-top: 0.75rem;
}
.summary-list dd {
    font-size: 1rem;
    margin: 0.25rem 0 0;
}

/* Avatar Cropper */
.crop-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--scrim) 85%, transparent);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.crop-container {
    background: var(--surface);
    border-radius: 8px;
    overflow: hidden;
    max-width: 90vw;
}
.crop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    font-weight: bold;
}
.crop-cancel {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text);
}
.crop-area {
    position: relative;
    display: inline-block;
    cursor: crosshair;
    overflow: hidden;
}
.crop-canvas {
    display: block;
}
.crop-box {
    position: absolute;
    border: 2px solid var(--on-scrim);
    box-shadow: 0 0 0 9999px color-mix(in srgb, var(--scrim) 50%, transparent);
    cursor: move;
    touch-action: none;
}
.crop-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--on-scrim);
    border-radius: 50%;
    touch-action: none;
}
.crop-handle-tl { top: -10px; left: -10px; cursor: nwse-resize; }
.crop-handle-tr { top: -10px; right: -10px; cursor: nesw-resize; }
.crop-handle-bl { bottom: -10px; left: -10px; cursor: nesw-resize; }
.crop-handle-br { bottom: -10px; right: -10px; cursor: nwse-resize; }
.crop-footer {
    padding: 0.75rem 1rem;
    text-align: right;
}
.avatar-dropzone {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.avatar-dropzone:hover,
.avatar-dropzone.dragover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.avatar-dropzone-text {
    color: var(--text-muted);
    font-size: 0.9rem;
}
.avatar-gallery {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.avatar-thumb {
    position: relative;
    width: 300px;
    height: 300px;
    max-width: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid transparent;
    transition: border-color 0.2s;
}
.avatar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-active {
    border-color: var(--accent);
}
.avatar-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    background: color-mix(in srgb, var(--scrim) 60%, transparent);
    opacity: 1;
    transition: opacity 0.2s;
}
.avatar-action-btn {
    background: var(--surface, rgba(255,255,255,0.9));
    border: 2px solid var(--on-scrim);
    color: var(--on-scrim);
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.avatar-action-btn:hover,
.avatar-action-btn:focus-visible {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.avatar-delete {
    color: var(--danger);
    border-color: var(--danger);
}
.avatar-delete:hover,
.avatar-delete:focus-visible {
    background: var(--danger);
    color: #fff;
}

/* Newsletter */
.newsletter-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}
.newsletter-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.newsletter-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.newsletter-table tr:last-child td {
    border-bottom: none;
}
.newsletter-lang-row td {
    padding-top: 1.25rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: none !important;
    font-size: 1.2rem;
}
.newsletter-toggle {
    text-align: center;
    width: 60px;
}
/* Mobile: 3-Spalten-Tabelle aufbrechen — Topic + Toggle in einer Zeile,
 * Target-Spalte als kleine Unterzeile darunter. Sprach-Zeile bleibt
 * Block-Header. */
@media (max-width: 600px) {
    .newsletter-table thead { display: none; }
    .newsletter-table, .newsletter-table tbody { display: block; width: 100%; }
    .newsletter-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "topic toggle" "target target";
        column-gap: 0.75rem;
        row-gap: 0.15rem;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--border);
    }
    .newsletter-table tr.newsletter-lang-row {
        display: block;
        border-bottom: none;
        padding: 1rem 0 0.25rem;
    }
    .newsletter-table tr.newsletter-lang-row td {
        padding: 0 !important;
        border: none !important;
    }
    .newsletter-table td { display: block; padding: 0; border: none; min-width: 0; }
    .newsletter-table tr td:nth-child(1) { grid-area: topic; font-weight: 500; word-break: break-word; }
    .newsletter-table tr td:nth-child(2) { grid-area: target; color: var(--text-muted); font-size: 0.8rem; word-break: break-word; }
    .newsletter-table tr td.newsletter-toggle { grid-area: toggle; width: auto; align-self: center; }
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 24px;
    transition: background 0.2s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: var(--on-scrim);
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Footer
 * Skaliert NICHT mit dem Font-Scale-Slider (siehe .site-header). Pixel-Werte
 * statt rem; Original-Schriftgröße 0.85rem = 13.6px bleibt konstant. */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 32px 0;
    margin-top: 48px;
    color: var(--text-muted);
    font-size: 13.6px;
}
.footer-content {
    display: flex;
    align-items: center;
    gap: 24px;
}
.footer-logo img {
    height: auto;
    width: auto;
    max-height: 180px;
    max-width: 100%;
    border-radius: 12px;
    padding: 16px;
    background: var(--logo);
    object-fit: contain;
    display: block;
}
.footer-info p {
    margin-bottom: 8px;
}
.footer-legal {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-legal a {
    color: var(--text-muted);
    text-decoration: none;
}
.footer-legal a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* --- Nimda (Admin) --- */
.nimda a {
    color: var(--accent);
    text-decoration: none;
}
.nimda-back-nav {
    margin: 1.5rem 0 2rem;
}
.nimda-back-nav a {
    margin-right: 1rem;
}
.nimda .sidebar-section a:hover,
.nimda .nimda-back-nav a:hover {
    text-decoration: underline;
}
.nimda select {
    min-width: 0;
    max-width: 100%;
    text-overflow: ellipsis;
}
.nimda-toolbar select,
.nimda-toolbar input[type="search"] {
    flex: 0 1 260px;
    min-width: 0;
}
.nimda-toolbar .nimda-view-toggle {
    flex: 0 0 auto;
}
.sidebar-section li.active a {
    color: var(--accent);
    font-weight: 600;
}
.nimda-toolbar {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.nimda-toolbar-inner {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 auto;
}
.nimda-toolbar > form:last-child {
    margin-left: auto;
}
.nimda-toolbar input[type="search"],
.nimda-toolbar select {
    height: 3rem;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--background);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    box-sizing: border-box;
    min-width: 220px;
}
.nimda-view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}
.nimda-view-toggle .toggle-btn {
    padding: 0.4rem 0.8rem;
    color: var(--text);
    text-decoration: none;
    background: var(--background);
}
.nimda-view-toggle .toggle-btn.active {
    background: var(--primary);
    color: var(--on-primary);
}
.nimda-pages a,
.nimda-tree a {
    color: var(--accent);
    text-decoration: none;
}
.nimda-pages a:hover,
.nimda-tree a:hover {
    text-decoration: underline;
}
.nimda-pages td.nimda-path {
    color: var(--text-muted);
    font-size: 0.85em;
    font-family: ui-monospace, monospace;
}
@media (max-width: 720px) {
    .nimda-pages td.nimda-path {
        display: none;
    }
}

/* Nimda tree view */
.nimda-tree {
    list-style: none;
    padding-left: 0;
    font-family: ui-monospace, monospace;
}
.nimda-tree ul {
    list-style: none;
    padding-left: 1.2rem;
    border-left: 1px dashed var(--border);
    margin-left: 0.6rem;
}
.nimda-tree li {
    margin: 0.15rem 0;
}
.nimda-tree summary {
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}
.nimda-tree summary:hover {
    background: var(--surface);
}
.nimda-tree .tree-leaf {
    padding: 0.2rem 0.4rem 0.2rem 1.2rem;
}
.nimda-tree .tree-label {
    font-family: system-ui, sans-serif;
}
.nimda-tree .tree-edit,
.nimda-tree .tree-view {
    margin-left: 0.5rem;
    font-size: 0.85em;
    color: var(--text-muted);
    text-decoration: none;
}
.nimda-tree .tree-edit:hover,
.nimda-tree .tree-view:hover {
    color: var(--accent);
}

/* --- Nimda Edit-Form --- */
.nimda-edit-form .form-group {
    margin-bottom: 1rem;
}
.nimda-edit-form input[type="text"],
.nimda-edit-form input[type="date"],
.nimda-edit-form input[type="number"],
.nimda-edit-form select,
.nimda-edit-form textarea,
.nimda-upload-form input[type="file"] {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--background);
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
}
.nimda-edit-form textarea {
    font-family: ui-monospace, monospace;
    min-height: 20rem;
    resize: vertical;
}
.nimda-edit-form .form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
.nimda-edit-form .form-hint {
    color: var(--text-muted);
    font-size: 0.85em;
    margin: 0 0 0.4rem;
}
.nimda-section {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    background: var(--surface);
}
.nimda-section[open] {
    padding: 0.75rem 1.25rem 1.25rem;
}
.nimda-section > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.25rem 0;
    list-style: revert;
}
.nimda-section-hint {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.9em;
}
/* §38 NIMDA Pillen für Aktivierungen (Default-off-Checkboxen als Pillen) */
.nimda-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nimda-pill { display: inline-flex; cursor: pointer; position: relative; }
.nimda-pill input { position: absolute; opacity: 0; pointer-events: none; }
.nimda-pill span {
    display: inline-block; padding: 0.4rem 0.9rem; border-radius: 1rem;
    background: var(--background); border: 1px solid var(--border);
    color: var(--text-muted); font-size: 0.9rem; transition: all 0.1s;
}
.nimda-pill:hover span { border-color: var(--accent); color: var(--text); }
.nimda-pill input:checked + span { background: var(--accent); color: var(--background); border-color: var(--accent); }
.nimda-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Aktivierungs-Karten (Action-Cards ohne Bild, am Ende der card-grids in Categories) */
.card-grid-aktivierungen { margin-top: 1rem; }
.card-aktivierung {
    display: flex !important; align-items: center; justify-content: center;
    min-height: 120px; padding: 1rem;
    background: var(--surface-alt, var(--surface));
    border: 1px dashed var(--border) !important;
    text-align: center;
}
.card-aktivierung h3 { margin: 0; color: var(--accent); }
.card-aktivierung:hover { border-style: solid !important; border-color: var(--accent) !important; }
.nimda-zugriff-group {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
}
.nimda-zugriff-group legend {
    padding: 0 0.5rem;
    color: var(--text-muted);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nimda-zugriff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.3rem 0.8rem;
}
.nimda-zugriff-item {
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.nimda-colors {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 1rem;
}
.nimda-colors legend {
    padding: 0 0.5rem;
    color: var(--text-muted);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.nimda-colors label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0;
    font-weight: 400;
}
.nimda-colors input[type="color"] {
    width: 2.5rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
}
.nimda-colors input[type="text"] {
    width: 8rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--background);
    color: var(--text);
    font-family: ui-monospace, monospace;
}

/* --- Nimda Media-Liste --- */
.nimda-media-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.nimda-media-list li {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface);
}
.nimda-media-list img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: var(--background);
}
.nimda-media-info {
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.nimda-media-name {
    font-size: 0.85em;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nimda-media-actions {
    display: flex;
    gap: 0.3rem;
}
.nimda-media-actions form {
    margin: 0;
    flex: 1;
}
.nimda-media-insert,
.nimda-media-delete {
    width: 100%;
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    font-size: 0.85em;
    font-family: inherit;
    cursor: pointer;
}
.nimda-media-insert:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.nimda-media-delete:hover {
    border-color: var(--danger);
    color: var(--danger);
}
.nimda-upload-form {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.nimda-upload-form .nimda-optim {
    display: block;
    margin: 0.5rem 0;
    font-weight: 400;
}

/* Category hero */
.category-hero {
    position: relative;
    min-height: 14rem;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
}
.category-hero-overlay {
    position: absolute;
    inset: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--scrim) 65%, transparent) 100%);
    color: var(--on-scrim);
}
.category-hero-overlay h1 {
    color: var(--on-scrim);
    margin: 0 0 0.5rem;
}
.category-untertitel {
    font-size: 1.15rem;
    color: var(--text-muted);
    margin: 0 0 2rem;
    font-style: italic;
}
.category-hero .category-untertitel {
    color: color-mix(in srgb, var(--on-scrim) 90%, transparent);
    margin: 0;
}
.category-intro {
    margin-bottom: 2rem;
}

/* "Kategorie öffnen" im Nav-Menü (wie "."-Ordner) */
.nav-open-category-item a {
    font-style: italic;
    color: var(--text-muted);
}

/* --- User-Verwaltung: Karten-Liste --- */
.user-search {
    margin-bottom: 1.5rem;
}
.user-search input[type="search"] {
    width: 100%;
    font-size: 1.1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
    color: var(--text);
    box-sizing: border-box;
}
.user-search input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
}
.user-search-filter {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.user-search-filter-opt {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--background);
    user-select: none;
}
.user-search-filter-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.user-search-filter-opt.is-active {
    background: var(--accent);
    color: var(--background);
    border-color: var(--accent);
}
.user-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.75rem;
}
.user-card-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.05s;
}
.user-card-link:hover {
    border-color: var(--accent);
    text-decoration: none;
}
.user-card-link:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.user-card-link:active {
    transform: scale(0.995);
}
.user-card.is-locked .user-card-link {
    opacity: 0.75;
}
.user-card-avatar {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-avatar-placeholder {
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--text-muted);
}
.user-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.user-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.user-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}
.user-card-email {
    font-size: 0.9rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}
.user-pill {
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--background);
    color: var(--text-muted);
    border: 1px solid var(--border);
    line-height: 1.4;
}
.user-pill-role {
    background: var(--accent);
    color: var(--on-accent);
    border-color: transparent;
    font-weight: 600;
}
.user-pill-trainer {
    background: var(--success);
    color: var(--on-success);
    border-color: transparent;
    font-weight: 600;
}
.user-pill-locked {
    background: var(--danger);
    color: var(--on-danger);
    border-color: transparent;
    font-weight: 600;
}
.user-pill-bounce {
    background: var(--warning, #f59e0b);
    color: var(--on-warning, #fff);
    border-color: transparent;
    font-weight: 600;
}
.user-pill-muted {
    color: var(--text-muted);
}
.user-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 2rem 0;
}
@media (max-width: 480px) {
    .user-card-link {
        padding: 0.75rem 0.85rem;
        gap: 0.75rem;
    }
    .user-card-email {
        font-size: 0.85rem;
    }
}

.user-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}
.user-pager a,
.user-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
}
.user-pager a:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}
.user-pager-current {
    background: var(--accent);
    color: var(--background) !important;
    border-color: transparent !important;
    font-weight: 600;
}
.user-pager-count {
    border: none !important;
    color: var(--text-muted);
    margin-left: auto;
    padding: 0 !important;
}

/* --- User-Edit: Karten-Detail-Ansicht --- */
.user-edit-back {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}
.user-edit-back a {
    color: var(--text-muted);
    text-decoration: none;
}
.user-edit-back a:hover {
    color: var(--accent);
}

.user-edit-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 1rem;
}
.user-edit-header.is-locked {
    opacity: 0.85;
}
.user-edit-avatar {
    flex: 0 0 auto;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--background);
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-edit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-edit-avatar .user-avatar-placeholder {
    font-size: 2.2rem;
}
.user-edit-head-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.user-edit-name {
    margin: 0 !important;
    font-size: 1.6rem !important;
    line-height: 1.2;
    color: var(--text) !important;
}
.user-edit-email {
    color: var(--text-muted);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-edit-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}

/* Cards */
.user-edit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.user-edit-card-title {
    margin: 0 0 1rem 0 !important;
    font-size: 1.05rem !important;
    font-weight: 600;
    color: var(--text) !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.user-edit-card-count {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.user-edit-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.user-edit-empty {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Gruppen-Tags (Toggle-Chips) */
.user-edit-tags-title {
    margin: 1rem 0 0.5rem !important;
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.user-edit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.user-tag {
    position: relative;
    cursor: pointer;
}
.user-tag input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.user-tag > span {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--background);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    line-height: 1.3;
    transition: all 0.15s;
    user-select: none;
}
.user-tag:hover > span {
    border-color: var(--accent);
    color: var(--text);
}
.user-tag input:checked + span {
    background: var(--accent);
    color: var(--background);
    border-color: transparent;
    font-weight: 600;
}
.user-tag.user-tag-role input:checked + span {
    background: var(--primary);
}
.user-tag.user-tag-trainer input:checked + span {
    background: var(--success);
    color: var(--on-success);
}
.user-tag.user-tag-alumni input:checked + span {
    background: var(--text-muted);
    color: var(--background);
}
.user-tag.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
    filter: grayscale(0.7);
}
.user-tag.is-disabled input {
    cursor: not-allowed;
}
/* Auch die farbigen Rollen-Varianten klar ausgrauen, wenn disabled */
.user-tag.is-disabled.user-tag-role input:checked + span,
.user-tag.is-disabled.user-tag-alumni input:checked + span,
.user-tag.is-disabled.user-tag-trainer input:checked + span {
    background: var(--border);
    color: var(--text-muted);
}
.user-tag input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Geräte-Liste */
.user-device-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.user-device {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.user-device.is-active {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.user-device-body {
    flex: 1 1 auto;
    min-width: 0;
}
.user-device-ua {
    font-weight: 600;
    color: var(--text);
}
.user-device-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.user-device-actions {
    flex: 0 0 auto;
}
.user-edit-card-footer {
    margin-top: 0.75rem;
    text-align: right;
}

/* Stammdaten als dezente Fußzeile */
.user-edit-stamm {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    padding: 1rem 0;
    margin-top: 0.5rem;
}

/* Delete — klein, dezent */
.user-edit-danger {
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    margin-top: 1rem;
}
.user-edit-danger-btn {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.user-edit-danger-btn:hover {
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    color: var(--danger-hover);
}

@media (max-width: 540px) {
    .user-edit-header {
        flex-direction: column;
        text-align: center;
    }
    .user-edit-head-body {
        align-items: center;
    }
    .user-edit-email {
        max-width: 100%;
    }
    .user-edit-card {
        padding: 1rem 1.1rem;
    }
}

/* --- Staffel-Editor --- */
.staffel-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}
.staffel-card .form-group {
    margin-bottom: 0.75rem;
}
.staffel-remove {
    margin-top: 0.5rem;
}
.code-input-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.code-input-wrap input {
    flex: 1 1 auto;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.08em;
}
.code-refresh {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.3rem;
    transition: border-color 0.15s, color 0.15s;
}
.code-refresh:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ─── Öffentliche Profilseite ─── */
.profile-public { display: flex; flex-direction: column; gap: 1.5rem; }
/* Standard-Flex-Gotcha: Items haben min-width:auto (= min-content) und können
 * über den Container hinausragen, wenn Kind-Inhalt (z.B. CTA-Form-textarea
 * oder `.cta-att-trigger { width: max-content }`) breiter ist als der
 * Viewport. min-width:0 erlaubt Schrumpfen unter content-width, max-width:100%
 * deckelt zusätzlich an der Parent-Breite — beide nötig, je nach Browser
 * und Kind-Struktur. Gilt für ALLE direkten Kinder der Profilseite, damit
 * beliebige Forms/Cards die gleiche Eindämmung bekommen. */
.profile-public > * { min-width: 0; max-width: 100%; }

.profile-hero {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 16px;
    /* overflow:visible damit das pp-menu-Dropdown (3-Punkte) nicht am
     * Container-Rand abgeschnitten wird. Der blur-Backdrop wird stattdessen
     * in `.profile-hero-backdrop-clip` (overflow:hidden) eingedämmt.
     *
     * z-index:1 sorgt dafür, dass der Hero (mit dem nach außen reichenden
     * Dropdown) über später-im-DOM-folgenden Geschwistern wie .profile-
     * avatar-strip oder .profile-bio liegt — sonst überstreichen die im
     * Hochformat das aufgeklappte 3-Punkte-Menü. */
    isolation: isolate;
    z-index: 1;
    background: var(--surface);
}
.profile-hero-backdrop-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
}
.profile-hero-backdrop {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    filter: blur(40px) saturate(1.2);
    opacity: 0.55;
    z-index: -1;
    transform: scale(1.1);
}
.profile-hero-has-avatar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--scrim) 15%, transparent), color-mix(in srgb, var(--scrim) 35%, transparent));
    z-index: -1;
}
.profile-hero-content {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem 1.5rem;
}
.profile-hero-avatar {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--background);
    border: 4px solid var(--surface);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--scrim) 35%, transparent);
}
.profile-hero-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: var(--text-muted);
    font-weight: 300;
}
.profile-hero-meta { flex: 1 1 14rem; display: flex; flex-direction: column; gap: 0.75rem; }
.profile-hero-meta h1 {
    margin: 0;
    font-size: 2.25rem;
    word-break: break-word;
    color: var(--on-scrim);
    text-shadow: 0 2px 8px color-mix(in srgb, var(--scrim) 50%, transparent);
}
.profile-hero:not(.profile-hero-has-avatar) .profile-hero-meta h1 {
    color: inherit;
    text-shadow: none;
}
.profile-hero-roles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.profile-hero-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.profile-avatar-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem 1.25rem;
}
.profile-avatar-strip-item {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--surface);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--scrim) 25%, transparent);
    transition: transform 0.2s ease;
}
.profile-avatar-strip-item:hover { transform: scale(1.4); z-index: 2; position: relative; }
.profile-avatar-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Device list */
.device-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.device-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    flex-wrap: wrap;
}
.device-item.device-current { border-color: var(--accent); }
.device-item.device-inactive { opacity: 0.55; }
.device-meta { flex: 1 1 14rem; min-width: 0; }
.device-ua { font-weight: 500; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.device-last { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.15rem; }
.device-id { font-family: ui-monospace, monospace; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; word-break: break-all; }
.device-action { flex: 0 0 auto; }
.device-logout-btn { padding: 0.5rem 1rem; font-size: 0.85rem; }

.profile-bio { line-height: 1.65; }
.profile-bio p { margin: 0 0 1em; }
.profile-bio p:last-child { margin-bottom: 0; }
.profile-bio h1,
.profile-bio h2,
.profile-bio h3,
.profile-bio h4 {
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    margin: 2.5em 0 1em !important;
    display: flex !important;
    align-items: center;
    gap: 0.35em;
    letter-spacing: 0.02em;
    line-height: 1.3 !important;
}
.profile-bio > h1:first-child,
.profile-bio > h2:first-child,
.profile-bio > h3:first-child,
.profile-bio > h4:first-child { margin-top: 0 !important; }
.profile-bio a { color: var(--accent); }
.profile-bio ul,
.profile-bio ol { margin: 0 0 1em 1.5em; }
.profile-bio blockquote {
    margin: 0 0 1em;
    padding: 0.5em 1em;
    border-left: 3px solid var(--accent);
    color: var(--text-muted);
    font-style: italic;
}
.profile-bio code {
    background: var(--surface-alt);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-size: 0.92em;
}
.profile-badges p.form-hint { margin: 0; }

/* Kurs-Alumni-Badges auf öffentlichen Profilen (§15).
   Karten füllen die volle Breite (flex-wrap, min 14rem, gleichmässig
   wachsend). Quadratisches Seitenverhältnis, Bild oder Text-Pille. */
.profile-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}
.profile-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.profile-badge:hover, .profile-badge:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--scrim) 15%, transparent);
}
.profile-badge img {
    width: 100%;
    height: auto;
    display: block;
}
/* Wenn kein Badge-Bild gesetzt: die Karte selbst ist die Text-Pille,
   Kurstitel füllt die ganze Fläche zentriert. Domain-Logo (falls per
   --badge-bg-Variable gesetzt) liegt als 50% durchscheinender Hintergrund
   dahinter. */
.profile-badge-text {
    position: relative;
    padding: 1.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--text);
}
.profile-badge-text::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--badge-bg, none);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.33;
    pointer-events: none;
}
.profile-badge-text > span {
    position: relative;
    line-height: 1.25;
    word-break: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Outline (4 Richtungen) + weicher Schatten in Background-Farbe.
       Dadurch lesbar auf hellem wie dunklem Logo-Hintergrund — der
       Outline kontrastiert immer mit dem Text, weil --background im
       Dark/Light-Mode automatisch wechselt. */
    text-shadow:
        -1px -1px 0 var(--background),
         1px -1px 0 var(--background),
        -1px  1px 0 var(--background),
         1px  1px 0 var(--background),
         0    0   6px var(--background);
}

/* Liste (NIMDA-Übersicht) bleibt wie sie ist — Listen-Chrome ist hier in Ordnung */
.nimda-newsletters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.nimda-newsletter-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.nimda-newsletter-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; }
.nimda-newsletter-item.is-hidden { opacity: 0.5; }
.nimda-newsletter-link { flex: 1; text-decoration: none; color: var(--text); }
.nimda-newsletter-meta { color: var(--text-muted); font-size: 0.85rem; }

/* Newsletter-Editor (NIMDA) — nutzt die Standard-.form-group-Formate, KEINE Input-Overrides */
.nl-editor { margin-bottom: 5rem; }
.nl-block, .nl-subject-form, .nl-new-segment {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}
.nl-block-fixed { border-style: dashed; background: var(--background); }

/* Chip-Auswahl (Interessensgebiete + Zugriff) */
.nl-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nl-chip { display: inline-flex; cursor: pointer; position: relative; }
.nl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.nl-chip span {
    display: inline-block; padding: 0.3rem 0.7rem; border-radius: 1rem;
    background: var(--background); border: 1px solid var(--border);
    color: var(--text-muted); font-size: 0.9rem; transition: all 0.1s;
}
.nl-chip:hover span { border-color: var(--accent); color: var(--text); }
.nl-chip input:checked + span { background: var(--accent); color: var(--background); border-color: var(--accent); }
.nl-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Aktionen unter Blöcken: Pfeile + Löschen */
.nl-block-actions { display: inline-flex; gap: 0.3rem; flex-shrink: 0; }
.nl-block-actions .nl-btn { padding: 0.2rem 0.5rem; font-size: 0.85rem; line-height: 1; }
.nl-btn {
    padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text); font-size: 0.95rem;
    cursor: pointer; text-decoration: none; display: inline-block;
}
.nl-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.nl-btn:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.nl-btn-primary { background: var(--accent); color: var(--background); border-color: var(--accent); }
.nl-btn-primary:hover { opacity: 0.85; color: var(--background); }
.nl-btn-ghost { background: transparent; }
.nl-btn-danger { background: transparent; color: var(--text-muted); }
.nl-btn-danger:hover { color: var(--danger); border-color: var(--danger); }

/* Neu-Segment-Form: kompakt, horizontal */
.nl-new-segment { display: flex; gap: 0.5rem; align-items: center; border-style: dashed; flex-wrap: wrap; }
.nl-new-segment input[type=text] { flex: 1 1 auto; padding: 0.75rem; border: 1px solid var(--border); border-radius: 4px; background: var(--background); color: var(--text); font-size: 0.95rem; line-height: 1.5; height: 3rem; box-sizing: border-box; }
.nl-new-segment select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 4px; background: var(--background); color: var(--text); height: 3rem; }

/* Sticky-Aktionsleiste unten */
.nl-actionbar {
    position: sticky; bottom: 0; left: 0; right: 0;
    display: flex; gap: 0.5rem; justify-content: space-between; align-items: center;
    padding: 0.75rem 1rem; margin-top: 1.5rem;
    background: var(--background); border-top: 1px solid var(--border);
}
.nl-actionbar-right { display: flex; gap: 0.5rem; }
.nl-actionform { display: inline; }

/* Simulate-Form auf Preview-Seite */
.nl-simulate { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }

/* Newsletter-Segment: Bild-Preview im Editor */
.nl-image-preview { display: flex; align-items: flex-start; gap: 0.75rem; }
.nl-image-preview img { max-width: 6rem; max-height: 6rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }

/* Newsletter-Preview */
.newsletter-preview { margin-top: 1rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.newsletter-preview .newsletter-greeting { font-size: 1.05rem; margin-bottom: 1rem; }
.newsletter-preview .newsletter-segment { padding: 1rem 0; border-top: 1px solid var(--border); }
.newsletter-preview .newsletter-segment:first-of-type { border-top: none; padding-top: 0; }
.newsletter-preview .newsletter-segment h3 { margin: 0 0 0.5rem; }
.newsletter-preview .newsletter-segment img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.5rem 0; }
.newsletter-preview .newsletter-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; }
.nl-preview-empty-hint { margin-top: 1rem; padding: 1.5rem; text-align: center; background: color-mix(in srgb, var(--text-muted) 10%, transparent); border: 1px dashed var(--border); border-radius: 8px; color: var(--text-muted); font-style: italic; }

/* Newsletter-Segment: Simple Stil */
.newsletter-segment-simple { margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.newsletter-segment-simple:first-child { border-top: none; padding-top: 0; }

/* Newsletter-Cards: Grid-Darstellung für aufeinanderfolgende Card-Segmente */
/* Fix 2 Spalten, kollabiert auf 1 unter 560px. Spiegelt das Mail-Grid
   (max 2 Cards pro <tr> in newsletter_render_html) für die Vorschau. */
.newsletter-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1.5rem 0; }
@media (max-width: 560px) { .newsletter-cards-grid { grid-template-columns: 1fr; } }

/* Element-Block-Karten: aufeinanderfolgende layout=card-Blöcke nebeneinander
   per flex-wrap. Container hat KEINE max-width — die Karte selbst trägt
   die min-width. So bestimmt die Card-Größe, wie viele pro Zeile passen,
   nicht das Grid. */
.element-blocks-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
.element-blocks-grid > .element-block-card { margin: 0; flex: 1 1 14rem; min-width: 14rem; }
/* Body-Heading-Resets innerhalb von Display-Blöcken: keine zusätzliche
   Marge oben (h1/h2 in Markdown bringen sonst eigene 2rem mit). */
.element-block-body h1, .element-block-body h2, .element-block-body h3 { margin-top: 0; }
.newsletter-card { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.newsletter-card-image { display: block; width: 100%; height: auto; max-height: 10rem; object-fit: cover; }
.newsletter-card-body { padding: 0.75rem 1rem; }
.newsletter-card-body h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.newsletter-card-body p { margin: 0.25rem 0; font-size: 0.9rem; }

/* Newsletter-Preview: Zielgruppen-Simulator (kollabierbar) */
.nl-simulate-wrap { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.nl-simulate-wrap summary { cursor: pointer; padding: 0.75rem 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.nl-simulate-wrap summary::-webkit-details-marker { display: none; }
.nl-simulate-wrap summary::after { content: '▼'; color: var(--text-muted); font-size: 0.7rem; }
.nl-simulate-wrap[open] summary::after { content: '▲'; }
.nl-simulate-summary { color: var(--text-muted); font-size: 0.85rem; font-weight: normal; }
.nl-simulate-wrap .nl-simulate { padding: 0.5rem 1rem 1rem; border-top: 1px solid var(--border); }

/* Newsletter-Segment: klappbarer Editor im Block */
.nl-segment-details { margin: -0.5rem; /* überschreibt block-padding visuell */ }
.nl-segment-summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem; }
.nl-segment-summary::-webkit-details-marker { display: none; }
.nl-segment-summary::before { content: '▸'; color: var(--text-muted); margin-right: 0.4rem; font-size: 0.8rem; }
.nl-segment-details[open] > .nl-segment-summary::before { content: '▾'; }
.nl-segment-summary-main { flex: 1; display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; overflow: hidden; }
.nl-segment-summary-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-segment-summary-style { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.nl-segment-details > *:not(.nl-segment-summary) { margin-top: 0.5rem; }

/* Newsletter-Segment: innere Felder klappbar */
.nl-field { margin: 0.4rem 0; border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; background: var(--background); }
.nl-field summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.nl-field summary::-webkit-details-marker { display: none; }
.nl-field summary::before { content: '▸'; color: var(--text-muted); margin-right: 0.4rem; font-size: 0.75rem; }
.nl-field[open] > summary::before { content: '▾'; }
.nl-field-preview { flex: 1; color: var(--text); font-weight: normal; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.nl-field > *:not(summary) { margin-top: 0.5rem; }

/* Newsletter: System-Override-Toggle (Pflichtnachricht) */
.nl-override-chip { margin: 0.5rem 0 0; }
.nl-override-chip input:checked + span { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.nl-override-warning { margin: 0.5rem 0 0; padding: 0.75rem 1rem; background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid var(--danger); border-radius: 6px; color: var(--danger); font-size: 0.9rem; font-weight: 600; }

/* Newsletter-Archiv in /messages/newsletters */
.nl-archive-item { padding: 0; }
.nl-archive-item .nl-archive-link { display: block; padding: 1rem 1.25rem; color: inherit; text-decoration: none; border-radius: 8px; transition: background 120ms ease; }
.nl-archive-item .nl-archive-link:hover,
.nl-archive-item .nl-archive-link:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); outline: none; }
.nl-archive-subject { font-weight: 600; color: var(--text); }
.nl-archive-view .nl-archive-head { margin-bottom: 1rem; }
.nl-archive-view .nl-archive-head h2 { margin: 0 0 0.25rem; }
.nl-archive-view .nl-archive-meta { margin: 0; color: var(--text-muted); font-size: 0.85rem; }
.nl-archive-view .nl-archive-greeting { margin: 1.25rem 0 1.5rem; font-size: 1.05rem; }
.nl-archive-pagination { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
.nl-archive-pagination .nl-pag-info { color: var(--text-muted); font-size: 0.9rem; }
.nl-archive-pagination .nl-pag-disabled { opacity: 0.4; pointer-events: none; cursor: default; }
/* Danger-Variant für kritische Buttons (endgültiges Löschen etc.) */
.nimda-btn-danger { color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 40%, var(--border)) !important; }
.nimda-btn-danger:hover,
.nimda-btn-danger:focus-visible { background: color-mix(in srgb, var(--danger) 10%, transparent) !important; }
/* Newsletter-Versand: Fortschritts-Modal */
.nl-sending-chip { display: inline-block; margin-left: 0.5rem; padding: 0.2rem 0.6rem; background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid var(--accent); border-radius: 999px; font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.nl-send-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--scrim) 60%, transparent); z-index: 9999; padding: 1rem; }
.nl-send-modal[hidden] { display: none; }
.nl-send-modal-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; max-width: 28rem; width: 100%; color: var(--text); }
.nl-send-modal-inner h3 { margin: 0 0 0.5rem; }
.nl-send-modal-subject { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.9rem; }
.nl-send-progress { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; margin: 1rem 0 0.5rem; }
.nl-send-progress-bar { height: 100%; width: 0%; background: var(--accent); transition: width 300ms ease; }
.nl-send-counter { margin: 0 0 1rem; font-variant-numeric: tabular-nums; font-weight: 600; }
/* Blockierte Benutzer im Profil */
.blocked-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.blocked-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.5rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.blocked-name { font-family: ui-monospace, monospace; color: var(--text); }
.blocked-add { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* 3-Punkte-Menü auf der öffentlichen Profilseite */
.pp-menu { position: relative; display: inline-block; }
.pp-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 1.2rem; user-select: none; }
.pp-menu > summary::-webkit-details-marker { display: none; }
/* Generischen ▸-Pfeil aus dem app-weiten `details > summary::before`-Block
 * unterdrücken — das 3-Punkte-Menü ist ein Icon-Trigger, kein klassischer
 * Disclosure-Twisty. */
.pp-menu > summary::before { content: none; }
.pp-menu > summary:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
/* left:0 statt right:0 → Dropdown öffnet sich NACH RECHTS vom 3-Punkte-Button.
 * Auf Mobile Portrait sitzt der Button ganz links am Viewport-Rand; mit
 * right:0 würde das Menü 12rem nach links über den linken Bildschirm-Rand
 * hinausragen und unsichtbar werden. */
.pp-menu-items { position: absolute; left: 0; top: calc(100% + 0.25rem); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; min-width: 12rem; max-width: calc(100vw - 2rem); box-shadow: 0 4px 12px color-mix(in srgb, var(--scrim) 20%, transparent); z-index: 10; overflow: hidden; }
.pp-menu-form { margin: 0; }
.pp-menu-item { display: block; width: 100%; text-align: left; padding: 0.6rem 0.9rem; background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; text-decoration: none; box-sizing: border-box; }
.pp-menu-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pp-menu-item-danger { color: var(--danger); }
.pp-menu-item-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.pp-menu-item-primary { color: var(--primary); }
.pp-menu-item-primary:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
/* Blocked-Banner im PN-Thread statt Composer */
.pn-fullscreen-blocked-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-top: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); }
.pn-fullscreen-blocked-banner .pn-blocked-text { color: var(--text-muted); font-size: 0.9rem; flex: 1; }
/* Blockierte-Card darf nicht an der Geräte-Card kleben (aber nur diese, nicht alle Karten) */
.card#blocked { margin-top: 1.5rem; }
/* Dashboard */
.dashboard-group-title { margin-top: 2rem; font-size: 1rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dashboard-group-title:first-of-type { margin-top: 1rem; }
.dashboard-staffel-list { margin-top: 0.75rem; }
.dashboard-hub-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.25rem 0 1.5rem; }
.dashboard-section-grid { margin-top: 1.5rem; }
.dashboard-section-card { cursor: pointer; }
.dashboard-section-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--scrim) 8%, transparent); }
.dashboard-section-card h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.dashboard-task-status { display: inline-block; margin-right: 0.4rem; }

/* Device-Limit-Selector-Karten */
.device-card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.device-card { cursor: pointer; display: flex; gap: 0.75rem; align-items: flex-start; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.device-card:hover { border-color: var(--accent); }
.device-card .device-card-check { margin-top: 0.2rem; flex-shrink: 0; width: 1.1rem; height: 1.1rem; cursor: pointer; }
.device-card:has(.device-card-check:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: 0 2px 8px color-mix(in srgb, var(--scrim) 8%, transparent); }
.device-card-body { flex: 1; min-width: 0; }
.device-card-body strong { word-break: break-word; }
.page-sidebar .link-list small { color: var(--text-muted); font-weight: normal; }

/* Forum */
.forum-heading { margin: 1.5rem 0 0.75rem; }
.forum-new-post { margin-bottom: 1.5rem; }
.forum-new-post textarea, .forum-new-comment textarea, .forum-edit-form textarea {
    width: 100%; font-family: inherit; font-size: 1rem; padding: 0.6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); box-sizing: border-box; resize: vertical;
}
.forum-post { margin-bottom: 1.25rem; padding: 1rem 1.25rem; }
/* §35 Inhalt-Melden: Comment-Permalink-Focus Highlight. */
.forum-post-focus, .forum-comment-focus {
    background: var(--surface-alt);
    border-left: 3px solid var(--warning);
    padding-left: 0.75rem;
}
@supports not (selector(:has(*))) {
    .forum-post-focus, .forum-comment-focus { outline: 2px solid var(--warning); outline-offset: 2px; }
}
.forum-author-line { font-size: 0.9rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.forum-author-avatar-link { display: inline-flex; flex-shrink: 0; }
.forum-author-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.forum-author { font-weight: 600; text-decoration: none; color: var(--text); }
.forum-author:hover { text-decoration: underline; }
.forum-time { color: var(--text-muted); font-size: 0.8rem; }
.forum-reply-to { margin-bottom: 0.25rem; font-size: 0.85rem; }
.forum-body { margin: 0.5rem 0; line-height: 1.55; }
.forum-body p:first-child { margin-top: 0; }
.forum-body p:last-child { margin-bottom: 0; }
.forum-body a, .forum-body a:visited,
.forum-auto-post a, .forum-auto-post a:visited {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.forum-mention { color: var(--accent); text-decoration: none; font-weight: 500; }
.forum-mention:hover { text-decoration: underline; }
.forum-reactions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0; }

.forum-post-card { position: relative; }
.forum-post-card:hover { border-color: var(--accent); }
.forum-post-card-link { position: absolute; inset: 0; z-index: 1; text-indent: -9999px; overflow: hidden; border-radius: inherit; }
.forum-post-card-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Profil-Link in der Author-Line bleibt über dem Stretched-Link klickbar */
.forum-post-card .forum-author-line { position: relative; z-index: 2; }
.forum-post-card .forum-author-line a { position: relative; z-index: 2; }
.forum-post-card-preview { margin: 0.5rem 0 0.25rem; color: var(--text); }
.forum-post-card-image { margin-top: 0.5rem; position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--video-bg); }
.forum-post-card-image img,
.forum-post-card-image video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Play-Overlay über Video-Thumbnails (Vorschau-Karten). pointer-events:none
   damit der Stretched-Link der Karte weiter klickbar bleibt. */
.forum-post-card-image:has(video), .forum-post-card-image.forum-post-card-video { position: relative; }
.forum-post-card-image:has(video)::after,
.forum-post-card-image.forum-post-card-video::after {
    content: "▶";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 3rem; line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
    pointer-events: none;
}

/* Vollbild-Override: Inline-Styles (max-height: 360px etc.) auf Videos
   würden im Fullscreen zu winzigem Player auf schwarzem Hintergrund
   führen — wir setzen alles zurück und füllen den Bildschirm.
   WICHTIG: getrennte Regeln statt comma-list, weil Safari bei
   :fullscreen die ganze Liste verwirft (kennt nur :-webkit-full-screen). */
video:fullscreen { max-width: 100vw !important; max-height: 100vh !important; width: 100vw !important; height: 100vh !important; object-fit: contain; border-radius: 0; background: var(--video-bg); }
video:-webkit-full-screen { max-width: 100vw !important; max-height: 100vh !important; width: 100vw !important; height: 100vh !important; object-fit: contain; border-radius: 0; background: var(--video-bg); }
.forum-card-image-badge { position: absolute; bottom: 0.4rem; right: 0.4rem; padding: 0.15rem 0.5rem; background: color-mix(in srgb, var(--scrim) 65%, transparent); color: var(--on-scrim); border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.forum-post-card-stats { margin: 0.5rem 0 0; }
.forum-react-btn { background: var(--primary); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.9rem; cursor: pointer; color: var(--text); line-height: 1.4; }
.forum-react-btn:hover { border-color: var(--text-muted); }
.forum-react-btn.forum-react-on { background: var(--surface); border-color: var(--accent, var(--primary)); font-weight: 600; }
.forum-react-count { font-size: 0.8rem; margin-left: 0.1rem; opacity: 0.75; }
.forum-actions { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted); }
.forum-link, .forum-link-btn { color: var(--text-muted); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; font-size: inherit; font-family: inherit; }
.forum-link:hover, .forum-link-btn:hover { color: var(--text); text-decoration: underline; }
.forum-danger:hover { color: var(--danger); }
.forum-edit-form { margin-top: 0.75rem; padding: 0.75rem; background: var(--surface-alt); border-radius: 4px; }
.forum-comments { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.forum-comment { padding: 0.6rem 0.75rem; border-left: 2px solid var(--border); margin: 0.5rem 0; }
.forum-comment .forum-body { margin: 0.25rem 0; font-size: 0.95rem; }
.forum-new-comment { margin-top: 0.75rem; }
.forum-new-comment textarea { font-size: 0.95rem; }
.forum-auto-post { padding: 0.5rem 0.75rem; background: var(--surface-alt); border-radius: 4px; margin: 0.5rem 0; font-size: 0.9rem; }
.forum-pagination { margin-top: 1.5rem; }
.forum-pagination ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }

/* Blog-Detail Prev/Next-Pfeile.
 * Auf wide Viewports: floating an den Seiten des Post-Card-Containers,
 * vertikal mittig. Auf schmalen Viewports: unter dem Post als zentrierte Bar.
 * Die page-content-Spalte ist relativ → die nav klebt am Rand dieser Spalte. */
.blog-post-nav {
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    pointer-events: none;
}
.blog-post-nav-prev, .blog-post-nav-next {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.blog-post-nav-prev:hover, .blog-post-nav-next:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
    transform: scale(1.08);
}
/* "Nur next" oder "nur prev": rechts/links bündig statt space-between */
.blog-post-nav:has(.blog-post-nav-next:only-child) { justify-content: flex-end; }
.blog-post-nav:has(.blog-post-nav-prev:only-child) { justify-content: flex-start; }

@media (min-width: 900px) {
    /* Wide-Layout: Pfeile fliegen seitlich aus dem Content-Container. */
    .page-content { position: relative; }
    .blog-post-nav {
        position: absolute;
        top: 50%;
        left: -3.5rem;
        right: -3.5rem;
        transform: translateY(-50%);
        margin: 0;
    }
    .blog-post-nav-prev, .blog-post-nav-next {
        width: 3rem;
        height: 3rem;
        font-size: 1.75rem;
    }
}
.forum-pagination a { display: inline-block; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 4px; text-decoration: none; color: var(--text); }
.forum-pagination li.active a { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.forum-pagination a:hover { border-color: var(--text-muted); }

/* Dashboard → Teilnehmer-Karte Trainer-Marker */
.user-card-trainer { border-left: 3px solid var(--accent); }

/* Dashboard → Trainer- und Teilnehmer-Element-Bereich */
.dashboard-trainer-element-list { margin: 0 0 1rem; padding-left: 0; }
.dashboard-trainer-element-list li { list-style: none; margin: 0.25rem 0; }
.dashboard-trainer-element-list li a { display: block; padding: 0.4rem 0.5rem; border-radius: 4px; text-decoration: none; }

/* Kategorie-Filter-Bar (Alle | Unterlagen | Aufgaben | Zoom-Termine) */
.dashboard-element-filter { margin: 0.75rem 0 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; max-width: 100%; }
.dashboard-element-filter ul { display: flex; flex-wrap: nowrap; gap: 0.25rem; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--border); width: max-content; min-width: 100%; }
.dashboard-element-filter li { flex: 0 0 auto; }
.dashboard-element-filter li a { display: inline-block; white-space: nowrap; padding: 0.5rem 0.9rem; border-radius: 6px 6px 0 0; text-decoration: none; color: var(--text-muted); border: 1px solid transparent; border-bottom: 0; }
.dashboard-element-filter li a:hover { color: var(--text); background: var(--surface); }
.dashboard-element-filter li.active a { color: var(--text); background: var(--surface); border-color: var(--border); position: relative; top: 1px; }
/* Die Element-Editor-Seite nutzt das bereits existierende .nl-*-Styling
   aus dem Newsletter-Editor (s. oben in dieser Datei, Block .nl-editor /
   .nl-block / .nl-chip / .nl-btn). Wir überschreiben hier bewusst NICHTS,
   damit Light- und Dark-Theme konsistent bleiben. */

.dashboard-element-editor { margin-bottom: 5rem; }
.dashboard-element-meta-cat { margin: 0 0 0.5rem; }
.dashboard-element-delete-form { margin: 0; }
.dashboard-element-activate-form { margin: 0; }
.dashboard-element-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin: 0.5rem 0 1.5rem; }
.dashboard-hidden-when-aa { display: none !important; }
.dashboard-zoom-timing { margin: 1rem 0; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.dashboard-zoom-timing h4 { margin-top: 0; font-size: 0.95rem; }
.dashboard-duration-widget .dashboard-duration-row { display: flex; gap: 0.5rem; align-items: center; }
.dashboard-duration-widget input[type=number] { width: 6rem; }
.dashboard-duration-widget select { width: auto; }

/* @-Mention-Autocomplete (js/mentions.js) */
.mention-popup { list-style: none; margin: 0; padding: 0.25rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 16px color-mix(in srgb, var(--scrim) 15%, transparent); min-width: 12rem; max-height: 16rem; overflow-y: auto; z-index: 10000; font-size: 0.95rem; }
.mention-popup li { padding: 0.35rem 0.75rem; cursor: pointer; color: var(--text); }
.mention-popup li.active, .mention-popup li:hover { background: var(--accent); color: var(--background); }

/* Dashboard → Teilnehmer-Sichten (unterlagen / aufgaben / zoom)
   Karten-Raster nutzt .card / .card-grid unverändert. Nur die Gruppen-
   Überschrift ist neu. */
.dashboard-element-group { margin: 1.5rem 0; }
.dashboard-element-group > h3 {
    margin: 0 0 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--border);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.dashboard-element-detail { margin-bottom: 3rem; }
.dashboard-element-detail-meta { margin: 0.25rem 0 1rem; }
.dashboard-element-zoom-card { padding: 1rem; margin: 1rem 0; }
.dashboard-element-zoom-card a { word-break: break-all; }
.element-block { margin: 1.5rem 0; }
.element-block-card { padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.element-block h3 { margin-top: 0; }
.element-block-media img, .element-block-media video { max-width: 100%; height: auto; display: block; }
.element-block-body > :first-child { margin-top: 0; }
.element-block-body > :last-child { margin-bottom: 0; }
.dashboard-trainer-adhoc { margin-top: 1.5rem; border-top: 1px dashed var(--border); padding-top: 1rem; }
.dashboard-trainer-adhoc > h3 { margin: 0 0 0.75rem; }
.dashboard-trainer-adhoc-form .form-group { margin-bottom: 0.5rem; }

/* Abgaben */
.dashboard-submission-inputs { list-style: none; padding: 0.5rem 0 0; margin: 0; }
.dashboard-submission-inputs > li { margin: 0.5rem 0; }
.dashboard-submission-form { display: flex; flex-direction: column; gap: 1.5rem; }
/* In Flex collabieren child-margins NICHT — flex-gap übernimmt den Abstand,
   alle child-margins zurücksetzen damit nichts doppelt addiert. */
.dashboard-submission-form > * { margin-top: 0; margin-bottom: 0; }
.dashboard-submission-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.dashboard-submission-existing { margin: 0.25rem 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dashboard-submission-existing img { max-width: 180px; }
.dashboard-submission-readonly-text {
    font-family: monospace;
    white-space: pre-wrap;
    background: var(--surface);
    border-left: 3px solid var(--border);
    padding: 0.6rem 0.8rem;
    margin: 0.25rem 0;
    font-size: 0.95rem;
}
.form-hint-inline { font-size: 0.85rem; color: var(--text-muted); }
.dashboard-staffel-complete { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); padding: 1rem 1.25rem; margin: 1rem 0 1.5rem; }
.dashboard-staffel-complete h3 { margin-top: 0; }
.dashboard-staffel-complete-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin: 0.75rem 0 0; }

/* Bewertung — Status-Farben sind absichtlich semantisch (gelb = bitte überarbeiten,
   grün = bestanden). Wir mischen sie mit dem Surface-Background, damit sie in
   beiden Themes funktionieren. Textfarbe bleibt --text. */
.dashboard-grading-section > summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0; border-top: 1px dashed var(--border); margin-top: 1rem; }

/* Pro Aufgabe im Grading-Overview ein auf-/zuklappbarer Block mit Rahmen */
.dashboard-trainer-grading-task { margin: 0.75rem 0; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.dashboard-trainer-grading-task > summary { cursor: pointer; list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem 0; }
.dashboard-trainer-grading-task > summary::-webkit-details-marker { display: none; }
.dashboard-trainer-grading-task > summary::before { content: '▸'; color: var(--text-muted); margin-right: 0.4rem; font-size: 0.8rem; }
.dashboard-trainer-grading-task[open] > summary::before { content: '▾'; }
.dashboard-trainer-grading-task > summary strong { font-size: 1.05rem; }
.dashboard-grading-user { margin: 1rem 0 1.5rem; }
.dashboard-grading-card { padding: 0.75rem 1rem; background: var(--surface); border-radius: 6px; margin: 0.5rem 0; }
.dashboard-grading-form { margin-top: 0.5rem; }
.grading-status-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.grading-chip { border-radius: 999px; padding: 0.2rem 0.6rem; border: 1px solid var(--border); cursor: pointer; background: var(--surface); color: var(--text); }
.grading-chip input { margin-right: 0.3rem; }
.grading-pill { padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text); }
.grading-offen { background: color-mix(in srgb, var(--text) 10%, transparent); }
.grading-bitte_ueberarbeiten { background: color-mix(in srgb, var(--warning) 30%, var(--surface)); }
.grading-bestanden { background: color-mix(in srgb, var(--success) 25%, var(--surface)); }
.grading-sehr_gut_bestanden { background: color-mix(in srgb, var(--success) 45%, var(--surface)); font-weight: 600; }
.dashboard-grading-feedback { margin: 0.5rem 0; padding: 0.5rem 0.75rem; background: var(--surface); border-left: 3px solid var(--border); border-radius: 0 4px 4px 0; }

/* Forum-Post-Galerie (Top-Level-Posts, mehrere Bilder).
 * 1 = volle Breite, 2 = nebeneinander, 3+ = Raster (FB-artig: erstes groß,
 * Rest daneben gestapelt). */
.forum-post-gallery { margin: 0.75rem 0; display: grid; gap: 4px; border-radius: 8px; overflow: hidden; }
.forum-post-gallery .forum-gallery-item { display: block; background: var(--surface); overflow: hidden; }
.forum-post-gallery .forum-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.forum-post-gallery.gallery-1 { grid-template-columns: 1fr; }
.forum-post-gallery.gallery-1 .forum-gallery-item img { max-height: 520px; height: auto; object-fit: contain; background: var(--video-bg); }
.forum-post-gallery.gallery-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.forum-post-gallery.gallery-3plus { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 4 / 3; }
.forum-post-gallery.gallery-3plus .forum-gallery-item:first-child { grid-row: 1 / span 2; }
.forum-post-gallery.gallery-3plus .forum-gallery-item:nth-child(n+4) { display: none; } /* nur erste 3 sichtbar, Rest via +N-Badge */
.forum-post-gallery.gallery-3plus .forum-gallery-item:nth-child(3) { position: relative; }
.forum-post-gallery.gallery-3plus[data-extra]:not([data-extra="0"]) .forum-gallery-item:nth-child(3)::after { content: "+" attr(data-extra); position: absolute; inset: 0; background: color-mix(in srgb, var(--scrim) 55%, transparent); color: var(--on-scrim); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; pointer-events: none; }

/* Lightbox: Vollbild-Viewer. Wird per JS geöffnet. */
.forum-lightbox { position: fixed; inset: 0; background: color-mix(in srgb, var(--scrim) 92%, transparent); z-index: 10000; display: flex; flex-direction: column; touch-action: manipulation; }
.forum-lightbox[hidden] { display: none; }
.forum-lightbox-img { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1rem; }
.forum-lightbox-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.forum-lightbox-bar { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; color: var(--on-scrim); background: color-mix(in srgb, var(--scrim) 50%, transparent); }
.forum-lightbox-counter { font-size: 0.9rem; }
.forum-lightbox button { background: transparent; border: 1px solid color-mix(in srgb, var(--on-scrim) 40%, transparent); color: var(--on-scrim); padding: 0.4rem 0.8rem; border-radius: 6px; cursor: pointer; font-size: 1rem; }
.forum-lightbox button:disabled { opacity: 0.3; cursor: default; }
.forum-lightbox-close { position: absolute; top: 0.5rem; right: 0.75rem; background: color-mix(in srgb, var(--scrim) 60%, transparent); border: 0; color: var(--on-scrim); width: 2.25rem; height: 2.25rem; border-radius: 50%; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.forum-new-post-extras { margin: 0.5rem 0; }
.forum-new-post-extras input[type=file] { display: inline-block; }
/* §27 Blog (nur dort): Pillen-Button-Stil — natives File-Input ist hidden,
   <label> ist die ganze Klick-Fläche. Filename-Counter rechts daneben. */
.forum-attach-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
/* Override der generischen Forum-Regel oben (sonst sichtbar trotz hidden). */
.forum-attach-btn input[type=file] { display: none !important; }
.forum-attach-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text); cursor: pointer;
    font-size: 0.9rem; line-height: 1.3;
}
.forum-attach-btn:hover { border-color: var(--accent, var(--text-muted)); }
.forum-attach-label { font-weight: 600; }
.forum-attach-count { color: var(--text-muted); font-size: 0.85rem; }

/* Teilnehmer-Historie */
.user-card-historie-link { display: block; font-size: 0.85rem; margin-top: 0.25rem; padding: 0 0.5rem 0.5rem; text-decoration: none; color: var(--accent); }

/* Teilnehmer-Liste: Verlauf-Link sitzt INNERHALB der Card (nicht daneben).
   Dazu Card-Rahmen vom <a> auf den <li>-Container verlagern, damit Avatar+Name
   (Link) und Verlauf-Footer denselben Rahmen teilen. */
.dashboard-teilnehmer-list.user-card-grid .user-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dashboard-teilnehmer-list .user-card .user-card-link {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
}
.dashboard-teilnehmer-list .user-card .user-card-link:hover,
.dashboard-teilnehmer-list .user-card .user-card-link:focus-visible {
    box-shadow: none;
    border: 0;
}
.dashboard-teilnehmer-list .user-card:hover { border-color: var(--accent); }
.dashboard-teilnehmer-list .user-card .user-card-historie-link {
    margin: 0;
    padding: 0.5rem 1.1rem 0.75rem;
    border-top: 1px solid var(--border);
}
.dashboard-historie-grid { margin: 1rem 0; }
.dashboard-historie-event { display: flex; flex-direction: column; gap: 0.5rem; }
.dashboard-historie-ts { font-size: 0.8rem; color: var(--text-muted); }
.dashboard-historie-title { text-decoration: none; color: var(--text); }
.dashboard-historie-title strong { font-size: 1rem; }
.dashboard-historie-event a { text-decoration: none; color: var(--text); }
.dashboard-historie-event p { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--text-muted); }
.dashboard-historie-grading { border-left: 3px solid var(--accent); }
.dashboard-historie-submission { border-left: 3px solid color-mix(in srgb, var(--success) 60%, var(--surface)); }
.dashboard-historie-content { margin-top: 0.5rem; color: var(--text); font-size: 0.95rem; }
.dashboard-historie-content p { margin: 0.25rem 0; color: var(--text); font-size: 0.95rem; }
.dashboard-historie-context { margin-top: 0.4rem; padding: 0.4rem 0.6rem; border-left: 2px solid var(--border); color: var(--text-muted); font-size: 0.9rem; }
.dashboard-historie-context em { display: block; margin-bottom: 0.2rem; font-style: normal; font-weight: 600; }
.dashboard-historie-sub-block { margin-top: 0.4rem; margin-bottom: 1.25rem; }
.dashboard-historie-sub-block strong { display: block; margin-bottom: 0.2rem; }
/* Block-Trenner in Forum-Auto-Post + Trainer-Grading-View. */
.dashboard-submission-block { margin-bottom: 1.25rem; }
.dashboard-submission-block:last-child { margin-bottom: 0; }
.dashboard-submission-block-title { margin: 0 0 0.25rem; }

/* Modal beim Video-Komprimieren — blockierend, kein Schließen-Knopf. */
.video-compress-modal { position: fixed; inset: 0; background: color-mix(in srgb, var(--scrim) 65%, transparent); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 1rem; }
.video-compress-modal-active { display: flex; }
.video-compress-modal-card { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; max-width: 28rem; width: 100%; box-shadow: 0 20px 60px color-mix(in srgb, var(--scrim) 50%, transparent); }
.video-compress-modal-title { margin: 0 0 0.5rem; }
.video-compress-modal-warn { margin: 0 0 1rem; color: var(--text-muted); }
.video-compress-modal-bar { height: 0.5rem; background: color-mix(in srgb, var(--text-muted) 25%, transparent); border-radius: 999px; overflow: hidden; }
.video-compress-modal-bar-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.2s ease; }
.video-compress-modal-bar-fill.video-compress-modal-bar-indeterminate { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent) 0%, var(--accent) 50%, color-mix(in srgb, var(--accent) 20%, transparent) 100%); background-size: 200% 100%; animation: video-compress-modal-indet 1.2s linear infinite; transition: none; }
@keyframes video-compress-modal-indet { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.video-compress-modal-stage { margin: 0.5rem 0 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; }
body.video-compress-modal-locked { overflow: hidden; }
.dashboard-historie-sub-text { white-space: pre-wrap; }
.dashboard-historie-sub-img { max-width: 300px; max-height: 300px; border-radius: 6px; margin-top: 0.25rem; display: block; }
.dashboard-historie-sub-video { max-width: 100%; max-height: 360px; margin-top: 0.25rem; display: block; border-radius: 6px; }
.dashboard-historie-sub-status { margin: 0.4rem 0; }
.dashboard-historie-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1rem 0; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.dashboard-historie-pager a { text-decoration: none; color: var(--accent); font-weight: 600; }
.dashboard-historie-pager a:hover { text-decoration: underline; }
.dashboard-historie-pager .disabled { color: var(--text-muted); opacity: 0.5; }
.dashboard-historie-pager-info { color: var(--text-muted); font-size: 0.9rem; }
.dashboard-historie-filter { margin: 0.75rem 0 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; max-width: 100%; }
.dashboard-historie-filter ul { display: flex; flex-wrap: nowrap; gap: 0.25rem; list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--border); width: max-content; min-width: 100%; }
.dashboard-historie-filter li { flex: 0 0 auto; }
.dashboard-historie-filter li a { display: inline-block; white-space: nowrap; padding: 0.5rem 0.9rem; border-radius: 6px 6px 0 0; text-decoration: none; color: var(--text-muted); border: 1px solid transparent; border-bottom: 0; }
.dashboard-historie-filter li a:hover { color: var(--text); background: var(--surface); }
.dashboard-historie-filter li.active a { color: var(--text); background: var(--surface); border-color: var(--border); position: relative; top: 1px; }
.dashboard-historie-filter-count { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; min-width: 1.25rem; border-radius: 999px; background: var(--border); color: var(--text-muted); font-size: 0.75rem; line-height: 1.4; text-align: center; }
.dashboard-historie-filter li.active .dashboard-historie-filter-count { background: var(--text-muted); color: var(--surface); }
.dashboard-historie-feedback { margin: 0.4rem 0 0.75rem; padding: 0.4rem 0.6rem; background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 4px; }
.dashboard-historie-feedback-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.dashboard-grading-historie-link { font-size: 0.85rem; font-weight: normal; margin-left: 0.5rem; text-decoration: none; color: var(--accent); }
.dashboard-grading-historie-link:hover { text-decoration: underline; }
.dashboard-preview-banner { margin-bottom: 1rem; padding: 0.5rem 0.75rem; border-radius: 4px; background: color-mix(in srgb, var(--accent) 12%, transparent); border-left: 3px solid var(--accent); font-size: 0.9rem; }
.dashboard-preview-banner a { color: var(--accent); text-decoration: none; }
.dashboard-preview-banner a:hover { text-decoration: underline; }
.dashboard-preview-input-placeholder { font-style: italic; text-align: center; padding: 0.4rem; border: 1px dashed var(--border); border-radius: 4px; margin: 0.25rem 0 0.75rem; }
.dashboard-element-preview-link { align-self: center; }

/* §10a Abschluss-Editor */
.dashboard-abschluss-bulk { margin: 0 0 1rem; }
.dashboard-abschluss-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
.dashboard-abschluss-table th, .dashboard-abschluss-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.dashboard-abschluss-table th { font-size: 0.85rem; color: var(--text-muted, var(--text)); text-transform: uppercase; letter-spacing: 0.05em; }
.dashboard-abschluss-verdicts { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.dashboard-abschluss-verdict-form { display: inline-block; margin: 0; padding: 0; }
.dashboard-abschluss-verdict-pill { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.85rem; cursor: pointer; color: var(--text); }
.dashboard-abschluss-verdict-pill:hover { border-color: var(--accent); }
.dashboard-abschluss-verdict-pill.is-active { background: var(--accent); color: var(--background); border-color: var(--accent); font-weight: 600; }
.dashboard-abschluss-verdict-pill.dashboard-abschluss-verdict-nicht_bestanden.is-active { background: var(--danger); border-color: var(--danger); }
.dashboard-abschluss-verdict-pill.dashboard-abschluss-verdict-sehrgut_bestanden.is-active { background: var(--warning); color: var(--on-warning); border-color: var(--warning); }
.dashboard-abschluss-notify-cell form { margin: 0; }
.cta-submit-small { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
a.cta-submit { display: inline-block; text-decoration: none; }
.dashboard-trainer-card { display: flex; flex-direction: column; gap: 0.75rem; }
.dashboard-trainer-card > p { margin: 0; }
.dashboard-trainer-card > ul { margin: 0; padding-left: 1.25rem; }
.dashboard-banner-warn { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.nimda-staffeln-toolbar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1.5rem; }
.nimda-staffeln-toolbar .user-search { flex: 1; margin-bottom: 0; }
.user-card-gruppen { display: contents; }
.user-card-gruppen .user-pill:nth-child(n+5):not(.user-pill-more) { display: none; }
.user-pill.user-pill-more { font-style: italic; opacity: 0.7; }

/* Cookie-Appendix in Datenschutz-Pages (Platzhalter `{cookie-data}`)
   Titel + Warnung sind IMMER sichtbar (warnen vor dem Aufklappen);
   nur die Daten selbst stecken im <details>. */
.cookie-appendix { display: block; margin: 1.5rem 0; }
.cookie-appendix-title { margin: 0 0 0.5rem; }
.cookie-appendix-warning { margin: 0 0 0.5rem; font-size: 0.9rem; opacity: 0.75; font-style: italic; }
.cookie-appendix-data > summary { cursor: pointer; padding: 0.15rem 0; list-style: none; }
.cookie-appendix-data > summary::-webkit-details-marker { display: none; }
.cookie-appendix-data > summary::before { content: '▸ '; display: inline-block; transition: transform 0.15s; opacity: 0.6; }
.cookie-appendix-data[open] > summary::before { transform: rotate(90deg); }
.cookie-appendix-data[open] > summary { margin-bottom: 0.5rem; }
.cookie-tree { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88rem; line-height: 1.6; }
.cookie-tree ul, .cookie-tree ul.cookie-list { list-style: none !important; padding-left: 1.25rem; margin: 0.25rem 0; border-left: 1px dashed var(--border); }
.cookie-tree li { padding: 0.1rem 0; margin: 0; }
.cookie-tree li::marker { content: ''; }
.cookie-tree details { margin: 0.1rem 0; }
.cookie-tree details > summary { cursor: pointer; list-style: none; padding: 0.05rem 0; }
.cookie-tree details > summary::-webkit-details-marker { display: none; }
.cookie-tree details > summary::before { content: '▸ '; display: inline-block; transition: transform 0.15s; color: var(--text-muted, var(--text)); }
.cookie-tree details[open] > summary::before { transform: rotate(90deg); }
.cookie-tree .cookie-key { color: var(--text-muted, var(--text)); }
.cookie-tree .cookie-mask { color: var(--danger, var(--text)); letter-spacing: 0.15em; font-weight: 700; }
.cookie-tree .cookie-bool { font-style: italic; opacity: 0.85; }
.cookie-tree .cookie-null { font-style: italic; opacity: 0.6; }
.cookie-tree .cookie-empty { opacity: 0.5; font-style: italic; }

/* ===== NIMDA Educational-Games (PLAN §25 Etappe 10) ===== */
.user-tag.user-tag-orphan > span { border-color: var(--danger); color: var(--danger); }
.user-tag.user-tag-orphan input:checked + span { background: color-mix(in srgb, var(--danger) 15%, transparent); }
.nimda-eg-tags-heading { margin: 1.25rem 0 0.25rem; font-size: 1.05rem; font-weight: 600; opacity: 0.8; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
/* Primary-Pille — gleiche Optik wie .user-tag input:checked + span (Akzent-Farbe). */
.user-tag.user-tag-add > span {
    background: var(--accent);
    color: var(--background);
    border-color: transparent;
    font-weight: 600;
}
.user-tag.user-tag-add:hover > span {
    background: var(--accent-hover, var(--accent));
    color: var(--background);
    border-color: transparent;
}

/* ── §26 Glossar & FAQ ───────────────────────────────────────────────── */

/* Suchformular (öffentliche /glossar + /faq Routen) */
.gf-search-form {
    margin: 1rem 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.gf-search-form input[type="search"] {
    flex: 1 1 auto;
    max-width: 24rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}
.gf-search-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
}
.gf-search-reset:hover {
    background: var(--surface-hover, var(--surface));
    color: var(--text);
}

/* Glossar — Begriffswolke + klickbare Pillen */
.gf-glossar-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    margin: 0.5rem 0 1.5rem;
}
.gf-glossar-term {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.gf-glossar-term:hover,
.gf-glossar-term:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent, var(--background));
    outline: none;
}

/* Letter-Sprung-Navigation */
.gf-letter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.5rem 0 1.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.gf-letter-nav a {
    display: inline-block;
    min-width: 2rem;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    text-align: center;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}
.gf-letter-nav a:hover { background: var(--surface-hover, var(--surface)); }
.gf-letter-nav a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent, var(--background));
}
.gf-glossar-section { margin: 1.25rem 0 0; }
.gf-letter-heading {
    margin: 0.75rem 0 0.4rem;
    font-size: 1.5rem;
    color: var(--accent);
}

/* FAQ — Akkordeon */
.gf-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.5rem 0 1rem;
}
.gf-faq-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 0.5rem 0.9rem;
}
.gf-faq-item[open] {
    padding-bottom: 0.75rem;
}
.gf-faq-item > summary {
    font-weight: 600;
    cursor: pointer;
}
.gf-faq-body {
    margin-top: 0.5rem;
    color: var(--text);
}
.gf-faq-body p:first-child { margin-top: 0; }
.gf-faq-body p:last-child { margin-bottom: 0; }

/* Dialog-Modal für Glossar-Begriff (responsive über alle Viewports).
   inset:0 + margin:auto zentriert das <dialog> auch in Browsern, die das
   nicht aus dem User-Agent-Stylesheet tun (z. B. Safari ≤ 17). */
.gf-modal {
    /* Klassische Transform-Zentrierung: position:fixed mit top/left 50%
       und translate -50%. Element ist content-getrieben (keine inset-
       Streckung) und durch max-* gekappt. */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    max-width: min(92vw, 36rem);
    max-height: min(85dvh, 40rem);
    padding: clamp(1rem, 3vw, 1.75rem);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
/* Wenn offen: Flex-Column, damit der Body bei langem Inhalt die Rest-Höhe
   nimmt und scrollt, der Header oben fix bleibt. */
.gf-modal[open] {
    display: flex;
    flex-direction: column;
}
.gf-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.gf-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.75rem;
}
.gf-modal-title {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text);
    word-break: break-word;
}
.gf-modal-close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.1rem 0.4rem;
}
.gf-modal-close:hover { color: var(--text); }
.gf-modal-body {
    /* flex: 0 1 auto — Body wächst NICHT über seinen Inhalt hinaus
       (sonst füllt er bei kurzem Text die volle max-height aus). Er
       darf nur schrumpfen (shrink:1), und dabei greift overflow:auto. */
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
    color: var(--text);
}
.gf-modal-body p:first-child { margin-top: 0; }
.gf-modal-body p:last-child { margin-bottom: 0; }

/* Bottom-Items im Navigations-Tree (Glossar/FAQ) — visuelle Trennung vom
   restlichen Tree, sonst identisches Look-and-Feel wie reguläre Leaves. */
.nav-tree .gf-nav-extra:first-of-type {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* visually-hidden — Screen-Reader-only Labels (für Suchformulare ohne sichtbaren Label-Text) */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Theme-Editor — Floating Panel (js/theme-editor.js)
 * Drag (Header), Resize (untere-rechte-Ecke), Minimize. Position+Größe
 * werden in localStorage gespeichert (POS_KEY = 'theme-editor-pos').
 * Sitzt fixed über jeder Seite, z-index überdeckt CTAs aber nicht Modals.
 * ───────────────────────────────────────────────────────────────────────── */
#theme-editor-panel {
    position: fixed;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 40px color-mix(in srgb, var(--scrim) 30%, transparent);
    display: flex;
    flex-direction: column;
    z-index: 8500;
    min-width: 280px;
    min-height: 240px;
    /* Selbst-skaliert nicht mit dem User-Font-Scale — Editor ist ein
     * Werkzeug, nicht Content. 14px-Anker. */
    font-size: 14px;
}
#theme-editor-panel.te-collapsed { height: auto !important; min-height: 0; }
#theme-editor-panel.te-collapsed .te-body,
#theme-editor-panel.te-collapsed .te-footer,
#theme-editor-panel.te-collapsed .te-resize { display: none; }

.te-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    flex: 0 0 auto;
}
.te-drag {
    flex: 1 1 auto;
    cursor: move;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.2rem;
    /* touch-action:none — Browser-Pan auf Touch-Geräten beim Drag unterbinden */
    touch-action: none;
}
.te-title { font-weight: 600; font-size: 0.95em; }
.te-dirty { color: var(--accent); font-size: 1.1em; line-height: 1; }
.te-btn-icon {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    width: 1.8em;
    height: 1.8em;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.2em;
    line-height: 1;
    padding: 0;
}
.te-btn-icon:hover { border-color: var(--border); color: var(--text); }

.te-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.6rem 0.7rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.te-group {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.7rem 0.5rem;
    margin: 0;
}
.te-group legend {
    padding: 0 0.35rem;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}
.te-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.18rem 0.3rem;
    border-radius: 4px;
    transition: background 0.12s;
}
/* Hover-Inspector: unter dem Maus-Cursor liegt ein Element, das diese
 * Slot-Farbe nutzt → highlighten. Selbe Variable wie der Menü-Hover. */
.te-row-hovered { background: var(--surface-hover); }
.te-row-name code {
    font-family: ui-monospace, monospace;
    font-size: 0.85em;
    color: var(--text);
    background: none;
    padding: 0;
}
.te-row-inputs {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}
.te-row-inputs input[type="color"] {
    width: 1.8em;
    height: 1.6em;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: none;
    cursor: pointer;
}
.te-row-inputs input[type="text"] {
    width: 5.5em;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--background);
    color: var(--text);
    font-family: ui-monospace, monospace;
    font-size: 0.85em;
}

.te-footer {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.5rem 0.7rem;
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
    flex: 0 0 auto;
    flex-wrap: wrap;
}
/* Account-Row (nur eingeloggte User, nur user-custom-Mode): zwischen Body
 * und Footer-Row. Schmal, ghost-Buttons. */
.te-footer-account {
    border-radius: 0;
    border-bottom: none;
    background: var(--surface);
    padding: 0.4rem 0.7rem;
}
.te-btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.te-btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); }
.te-btn {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 0.9em;
    background: var(--surface);
    color: var(--text);
}
.te-btn-primary {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
    font-weight: 600;
}
.te-btn-primary:hover { background: var(--primary-hover); }
.te-btn-ghost:hover   { border-color: var(--accent); color: var(--accent); }
.te-status {
    flex: 1 1 auto;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.85em;
}

.te-resize {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    touch-action: none;
    background:
        linear-gradient(135deg, transparent 0%, transparent 50%, var(--border) 50%, var(--border) 60%, transparent 60%, transparent 75%, var(--border) 75%, var(--border) 85%, transparent 85%);
    border-bottom-right-radius: 10px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * §34 YouTube-Player mit DSGVO-Consent
 *
 * Container nimmt volle verfügbare Breite. Cover (16:9) spannt alle drei
 * Spalten oben, darunter drei Storyboard-Thumbs (4:3). Leere Slots bleiben
 * als Platzhalter stehen (Grid-Cell mit aspect-ratio, kein img). Optik
 * angelehnt an `.card-mosaic` (gap 4px, brightness-Dimmer, object-fit cover).
 * ───────────────────────────────────────────────────────────────────────── */
.yt-player {
    display: block;
    width: 100%;
    position: relative;
    background: transparent;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 0 1rem;
}
.yt-cover {
    aspect-ratio: 16 / 9;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background: var(--surface-alt, var(--surface));
}
.yt-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.92);
    transition: filter 0.3s;
}
.yt-cover:hover img {
    filter: brightness(1);
}
.yt-cover-empty {
    background: var(--surface-alt, var(--surface));
}
/* Play-Button als CSS-Overlay (YouTube-Style). Wird NICHT ins Bild eingebrannt
 * — Cover bleibt nacktes Bild. Zwei Varianten:
 *   (1) `.yt-cover` ist der Player-Container auf dem Detail (Klick → Consent
 *       → Iframe-Mount). `.yt-cover-playing` blendet den Button aus.
 *   (2) `.card-image:has(img[src*="yt-"][src*=".cover.jpg"])` ist eine Karte
 *       auf der Übersicht, deren Thumbnail aus dem YT-Cover-Cache kommt. Die
 *       ganze Karte verlinkt aufs Detail (wo der Player liegt) — der Button
 *       signalisiert „Video, klickbar".
 * Mail-Versand (Newsletter + CTA-Reply) brennt den Button on-the-fly ein, da
 * Mail-Clients kein CSS::after rendern. */
.card-image:has(img[src*="yt-"][src*=".cover.jpg"]) {
    position: relative;
}
.yt-cover::after,
.card-image:has(img[src*="yt-"][src*=".cover.jpg"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22%;
    aspect-ratio: 16 / 11;
    max-width: 80px;
    min-width: 44px;
    background-color: rgba(220, 0, 0, 0.92);
    border-radius: 14%;
    z-index: 1;
    pointer-events: none;
    transition: background-color 0.2s;
}
.yt-cover::before,
.card-image:has(img[src*="yt-"][src*=".cover.jpg"])::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Optisches Zentrum leicht nach rechts schieben (Dreieck wirkt sonst linkslastig) */
    transform: translate(-35%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent white;
    z-index: 2;
    pointer-events: none;
}
.yt-cover:hover::after,
a.card:hover .card-image:has(img[src*="yt-"][src*=".cover.jpg"])::after {
    background-color: rgba(255, 0, 0, 1);
}
/* Iframe-Mount entfernt den Play-Button-Overlay komplett. */
.yt-cover-playing::after,
.yt-cover-playing::before {
    display: none;
}
/* Iframe ersetzt das Cover beim Play — nimmt die ganze Cover-Cell ein. */
.yt-cover iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Consent-Overlay: liegt über dem ganzen Container, abdunkelnd. Inhalt:
 * Frage + Buttons mittig. Hidden via [hidden] solange Consent vorliegt. */
.yt-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    text-align: center;
    z-index: 2;
}
.yt-overlay[hidden] {
    display: none;
}
.yt-overlay p {
    margin: 0;
    max-width: 56ch;
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    line-height: 1.5;
}
.yt-overlay .yt-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.yt-overlay button {
    background: var(--primary);
    color: var(--on-primary);
    border: 0;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
}
.yt-overlay button:hover {
    background: var(--primary-hover, var(--accent));
}

/* §34 — Card-Placeholder für YouTube-Videos, deren Cover serverseitig nicht
 * gecached werden konnte (privates/unzugängliches Video). Wird vom Card-
 * Renderer nur gerendert, wenn `youtube-cache:` im FM existiert UND keine
 * Cover-Datei vorhanden ist. */
.yt-card-private {
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yt-card-private .yt-private-label {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1rem, 2.4vw, 1.4rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}