/* 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 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
    transition: transform 0.25s ease;
    will-change: transform;
}
.site-header-hidden {
    transform: translateY(-100%);
}
html {
    scroll-padding-top: 4.5rem;
}
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Header left (logo + breadcrumb) */
.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.site-logo img {
    height: 2.75rem;
    width: auto;
    border-radius: 6px;
    padding: 0.25rem;
    background: var(--logo);
}

/* Breadcrumb: Eine Zeile, horizontal scrollbar wenn zu lang. Kein Umbruch,
 * kein Ausbrechen nach außen (Seite scrollt nicht seitwärts, nur die
 * Breadcrumb-Leiste selbst). Gleiche Technik wie die Tab-Reiter. */
.breadcrumb {
    font-size: 0.875rem;
    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 0.35rem;
    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: 0.5rem;
    position: relative;
}

/* Header buttons (shared base) */
.header-btn,
.hamburger,
#theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    background: none;
    transition: border-color 0.2s, color 0.2s;
}
.header-btn { font-family: Georgia, serif; font-size: 1.1rem; }
.header-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Share dropdown (Desktop fallback) */
#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;
}
#share-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}
#share-menu a:hover {
    background: var(--border);
}

/* User menu dropdown */
#user-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;
}
#user-menu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
}
#user-menu a:hover {
    background: var(--border);
}

/* Avatar button */
.avatar-btn {
    font-weight: 700;
    font-size: 0.9rem;
}

.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);
}

/* 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 {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.5;
    vertical-align: middle;
    transition: opacity 0.2s;
}
.edit-termin-btn:hover {
    opacity: 1;
}
.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;
}

/* 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(--surface);
    background: var(--accent);
    border-radius: 999px;
    vertical-align: baseline;
    font-weight: 600;
}
.unread-count-zero {
    background: var(--border);
    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-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; }
.cta-kebab summary { cursor: pointer; list-style: none; padding: 0.25rem 0.5rem; font-size: 1.3rem; line-height: 1; color: var(--text-muted); }
.cta-kebab summary::-webkit-details-marker { display: none; }
.cta-kebab summary:hover { color: var(--text); }
.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-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%; }
.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-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(--accent); color: var(--background); border-bottom-right-radius: 4px; }
.cta-msg-mine  .cta-bubble a { color: inherit; text-decoration: underline; }
.cta-msg-other .cta-bubble a { color: var(--accent); }
.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-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: 75%;
}
.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;
}
.pn-msg-mine .pn-msg-bubble {
    background: var(--accent);
    color: var(--surface);
    border-color: var(--accent);
}
.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) */
.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: -0.25rem;
    right: -0.35rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    font-size: 0.7rem;
    line-height: 1.1rem;
    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 {
    margin-top: 2.5rem;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.cta-section hgroup {
    margin: 0 0 1.25rem;
}
.cta-section hgroup h2 {
    margin: 0;
}
.cta-section hgroup p {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0.25rem 0 0;
}
.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: 0.75rem;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.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%;
    padding: 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;
    height: 3rem;
}
.form-group textarea {
    height: auto;
    min-height: 3rem;
}
.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;
}
.nav-item details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}
.nav-item details summary::before {
    content: '▸';
    font-size: 1.4rem;
    color: var(--accent);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.nav-item details[open] > summary::before {
    transform: rotate(90deg);
}
.nav-item details summary::-webkit-details-marker {
    display: none;
}
.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: 0.75rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}
.avatar-thumb {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px 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: 2px;
    background: color-mix(in srgb, var(--scrim) 60%, transparent);
    opacity: 0;
    transition: opacity 0.2s;
}
.avatar-thumb:hover .avatar-actions {
    opacity: 1;
}
.avatar-action-btn {
    background: none;
    border: none;
    color: var(--on-scrim);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 6px;
}
.avatar-delete {
    color: var(--danger);
}

/* 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;
}
.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 */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 2rem 0;
    margin-top: 3rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.footer-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.footer-logo {
    padding: 1rem;
}
.footer-logo img {
    height: auto;
    width: auto;
    max-height: 180px;
    border-radius: 12px;
    padding: 1rem;
    background: var(--logo);
}
.footer-info p {
    margin-bottom: 0.5rem;
}
.footer-legal {
    display: flex;
    gap: 1rem;
    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;
}
.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-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-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; }

.profile-hero {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    background: var(--surface);
}
.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 */
.newsletter-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; margin: 1.5rem 0; }

/* 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; }
.pp-menu > summary:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.pp-menu-items { position: absolute; right: 0; top: calc(100% + 0.25rem); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; min-width: 12rem; 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; }
.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); }
/* 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; }
.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; }
.forum-post-card-image img,
.forum-post-card-image video { max-width: 100%; max-height: 180px; border-radius: 6px; object-fit: cover; display: block; background: var(--video-bg); }

/* 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; gap: 0.3rem; justify-content: center; }
.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; }

/* 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-stage { margin: 0.5rem 0 0; }
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; }