/* =====================================================================
   MALU NETWORK – Zentrale Stylesheet-Foundation
   ---------------------------------------------------------------------
   EINZIGE Haupt-CSS-Datei. Alle Phasen bauen auf diesen Design-Tokens und
   Basis-Komponenten auf. Keine zweite CSS-Datei für dieselbe Sache anlegen.

   Aufbau:
     1. Design-Tokens (Farben, Abstände, Radius, Schatten, Typografie)
     2. Reset & Basis
     3. Layout (container, main)
     4. Header & Navigation (inkl. mobile Toggle)
     5. Buttons
     6. Hero & Features
     7. Sektionen & Kategorien
     8. Hinweise (notice)
     9. Footer
    10. Fehlerseiten
    11. Hilfsklassen & Barrierefreiheit
    12. Flash / Alerts
    13. Formulare
    14. Auth-Karten

   Design-Richtung: dunkel, modern, Social-Network. #0f0f10 / #151518 / #6dd3ff Accent.
   Mobile First. Barrierearm.
   ===================================================================== */

/* 1. ---------------------------------------------------- Design-Tokens */
/*
   FARBFASSUNG 22.07.2026: Die Grundtöne sind einmal angehoben und leicht ins
   Blaugraue gedreht worden. Vorher war alles fast schwarz und neutral, dadurch
   wirkte die Oberfläche härter als gewollt.

   Geändert wurden AUSSCHLIESSLICH die Neutraltöne (Hintergründe, Ränder,
   Text). Markenfarbe, Statusfarben und Verläufe sind unangetastet, damit
   Grün, Orange und Rot überall dasselbe bedeuten wie bisher.

   ZURÜCKDREHEN: einfach die alten Werte aus diesem Kommentar wieder
   einsetzen, es hängt nichts anderes daran.
       --c-bg #0f0f10   --c-surface #151518   --c-surface-2 #1a1a1f
       --c-glass rgba(255,255,255,0.03)
       --c-border #2a2a2f   --c-border-soft rgba(255,255,255,0.06)
       --c-text #e6eef6   --c-text-muted #9aa6b2   --c-text-dim #888888
*/
:root {
    /* Hintergründe */
    --c-bg:          #14161c;
    --c-surface:     #1b1f28;
    --c-surface-2:   #232935;
    --c-glass:       rgba(255,255,255,0.045);

    /* Ränder */
    --c-border:      #2f3644;
    --c-border-soft: rgba(255,255,255,0.08);

    /* Text */
    --c-text:        #e9eff7;
    --c-text-muted:  #a6b1c2;
    /* Etwas heller als im Entwurf: auf dem angehobenen Grund braucht der
       leiseste Textton sonst zu wenig Kontrast für kleine Schrift. */
    --c-text-dim:    #8a94a5;

    /* Markenfarbe */
    --c-accent:      #6dd3ff;
    --c-accent-dim:  #4bbbe6;
    --c-accent-glow: rgba(109,211,255,0.15);

    /* Hashtag-Farbe (lila) – @Markierungen nutzen den hellblauen --c-accent */
    --c-hashtag:     #a78bfa;

    /* Status */
    --c-success:     #43e97b;
    --c-warn:        #ffa726;
    /* Eine Spur heller als frueher (#f44336). Auf dem angehobenen Grund kam
       das alte Rot nur noch auf 4,48:1 und lag damit unter dem Schwellwert
       fuer normalen Text. Jetzt sind es 5,44:1. Der Farbeindruck bleibt
       derselbe, nur ausgerechnet die Warnfarbe soll nicht die schlechteste
       Lesbarkeit auf der Seite haben. */
    --c-danger:      #f8635a;

    /* Gradienten */
    --c-gradient-cta:    linear-gradient(135deg, #6dd3ff, #4bbbe6);
    --c-gradient-purple: linear-gradient(135deg, #667eea, #764ba2);
    --c-gradient-pink:   linear-gradient(135deg, #f093fb, #f5576c);
    --c-gradient-cyan:   linear-gradient(135deg, #4facfe, #00f2fe);
    --c-gradient-green:  linear-gradient(135deg, #43e97b, #38f9d7);
    --c-gradient-warm:   linear-gradient(135deg, #fa709a, #fee140);
    --c-gradient-deep:   linear-gradient(135deg, #30cfd0, #330867);

    /* Kompatibilitäts-Aliase (werden phasenweise aufgeräumt) */
    --c-anthracite:  var(--c-text);
    --c-blue:        var(--c-accent);
    --c-blue-dark:   var(--c-accent-dim);
    --c-blue-soft:   rgba(109,211,255,0.08);
    --c-mint:        var(--c-accent);
    --c-mint-dark:   var(--c-accent-dim);
    --c-mint-soft:   rgba(67,233,123,0.1);
    --c-warn-bg:     rgba(255,167,38,0.12);
    --c-warn-border: rgba(255,167,38,0.35);
    --c-warn-text:   var(--c-warn);

    /* Typografie */
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-base: 16px;
    --lh-base: 1.6;

    /* Abstände */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Form */
    --radius:      12px;
    --radius-sm:   8px;
    --radius-lg:   16px;
    --radius-xl:   20px;  /* D2: 18/20/22 zu einer Stufe zusammengelegt */
    --radius-pill: 999px;

    /* --- D1: Semantische Akzent-Tokens (jede Farbe hat einen Namen + Zweck)
       + einheitliche Interaktions-Tokens. Werte = bisherige Ist-Farben. --- */
    --c-community: #fb923c;   /* Community/@community – die Orange-Stimme */
    --c-rose:      #f43f5e;   /* Like-Herz, Hinweis-Punkte */
    --c-brand-2:   #7a61ff;   /* Endpunkt des Marken-Verlaufs (Cyan -> Violettblau) */
    --tone-pink:   #f472b6;   /* Themen-Palette (Desktop + Handy identisch) */
    --tone-coral:  #fb7185;
    --tone-blue:   #60a5fa;
    --tone-green:  #34d399;
    --tone-cyan:   #22d3ee;
    --tone-orange: var(--c-community);
    --tone-violet: var(--c-hashtag);
    --tone-sky:    #6dd3ff;   /* Storys (MALU-Momente-Hellblau) */
    --focus-ring:  0 0 0 3px rgba(109,211,255,.22);   /* EIN Fokus-Ring überall */
    --t-fast:      .15s ease;

    /* --- D2: Radius-Stufen (7 statt 32 Werte), Hairline-Borders,
       Schatten-/Ring-Tokens. Werte = bisherige Ist-Cluster. --- */
    --radius-xs: 4px;
    --radius-md: 10px;
    --hairline:          rgba(255,255,255,.07);   /* Standard-Kartenrahmen */
    --hairline-soft:     rgba(255,255,255,.05);   /* zarte Trennlinien */
    --hairline-strong:   rgba(255,255,255,.12);   /* Hover/aktive Rahmen */
    --focus-ring-strong: 0 0 0 3px rgba(109,211,255,.35);   /* bewusst kraeftig (Tastatur-Fokus public) */
    --shadow-modal:      0 24px 64px rgba(0,0,0,.5);
    --hover-bg:          rgba(255,255,255,.06);   /* EINE Hover-Flaeche fuer Navigation */

    /* Schatten */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
    --shadow:      0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg:   0 12px 30px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 20px rgba(109,211,255,0.12);

    --container: 1120px;
}

/* 2. ----------------------------------------------------- Reset & Basis */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* Platz für den Scrollbalken IMMER reservieren: sonst „wackelt" der fixe
   Header horizontal, wenn beim Seitenwechsel eine kurze Seite ohne
   Scrollbalken auf eine lange mit Scrollbalken folgt (13.07.2026). */
html { scrollbar-gutter: stable; }

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
    background: var(--c-bg);
    background-image:
        radial-gradient(circle at 15% 40%, rgba(109,211,255,0.05) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%, rgba(118,75,162,0.07) 0%, transparent 50%),
        radial-gradient(circle at 60% 10%,  rgba(240,147,251,0.04) 0%, transparent 40%),
        radial-gradient(circle at 20% 90%,  rgba(250,112,154,0.03) 0%, transparent 35%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; color: var(--c-text); margin: 0 0 var(--space-3); }

p { margin: 0 0 var(--space-3); }

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: rgba(109,211,255,0.1);
    color: var(--c-accent);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: .9em;
}

:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Platzhalter dürfen nicht zu schwach sein: global ausreichend kontrastreich. */
::placeholder { color: var(--c-text-muted); opacity: 1; }

/* 3. --------------------------------------------------------- Layout */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.site-main { display: block; }

/* 4. ------------------------------------------------ Header & Navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 64px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 700;
    color: var(--c-text);
}
.brand:hover { text-decoration: none; }
.brand__logo { border-radius: var(--radius-sm); }
.brand__name { font-size: 1.05rem; letter-spacing: .02em; }

/* Mobile-Toggle (Hamburger) */
.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.nav-toggle__bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--c-text);
    border-radius: var(--radius-xs);
    transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Optionaler Seitentitel in der mobilen Topbar (nur < 860px, nur wenn die Seite
   $mobileTitle setzt). Liegt zwischen Marke und Hamburger und kürzt mit Ellipse. */
.site-header__page {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-family: var(--ff-heading);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Navigation – mobil: ausklappbares Panel */
.site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: var(--shadow);
    padding: var(--space-4);
}
.site-nav.is-open { display: block; }

.site-nav__list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.site-nav__link {
    display: block;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    font-weight: 500;
    white-space: nowrap;
}
.site-nav__link:hover { background: var(--hover-bg); text-decoration: none; }
.site-nav__link.is-active { color: var(--c-accent); background: var(--c-accent-glow); }

.site-nav__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* 5. -------------------------------------------------------- Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, filter .15s ease, opacity .15s ease;
    text-align: center;
}
.btn:hover { text-decoration: none; }

.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; pointer-events: none; }
.btn-primary { background: var(--c-gradient-cta); color: #0f0f10; }
.btn-primary:hover { background: var(--c-gradient-cta); color: #0f0f10; filter: brightness(1.1); }

.btn-ghost { background: transparent; color: var(--c-accent); border-color: rgba(109,211,255,0.35); }
.btn-ghost:hover { background: var(--c-accent-glow); }

/* Veraltet: btn-mint ist nur noch ein Alias der Primär-Optik (eine CTA-Stimme). */
.btn-mint { background: var(--c-gradient-cta); color: #0f0f10; }
.btn-mint:hover { background: var(--c-gradient-cta); color: #0f0f10; filter: brightness(1.1); }

.btn--lg { padding: 14px 28px; font-size: 1rem; }

/* 6. --------------------------------------------------- Hero & Features */
.hero {
    padding: var(--space-8) 0 var(--space-7);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 480px;
    background: radial-gradient(ellipse 70% 60% at 50% 0%,
        rgba(109,211,255,0.09) 0%,
        rgba(167,139,250,0.08) 40%,
        rgba(240,147,251,0.04) 65%,
        transparent 80%);
    pointer-events: none;
    z-index: 0;
}
.hero__inner { max-width: 760px; text-align: center; position: relative; z-index: 1; }
.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .8rem;
    font-weight: 700;
    color: var(--c-accent);
    margin-bottom: var(--space-3);
}
.hero__claim {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    margin-bottom: var(--space-4);
    background: linear-gradient(120deg, #ffffff 0%, #c4b5fd 70%, #f0abfc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero__subtitle { font-size: 1.1rem; color: var(--c-text-muted); margin-bottom: var(--space-6); }

.search {
    display: flex;
    gap: var(--space-2);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    padding: var(--space-2);
    box-shadow: var(--shadow);
    margin: 0 auto var(--space-5);
    max-width: 620px;
}
.search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 10px 16px;
    font: inherit;
    color: var(--c-text);
}
/* Sichtbarer Tastatur-Fokus statt komplett entfernter Outline. */
.search__input:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-strong);
    border-radius: var(--radius-sm);
}
.search__button { flex: none; }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

/* Startseiten-Feature-Karten */
.features { padding: var(--space-6) 0 var(--space-7); }

.feature-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.feature-card {
    background: var(--c-glass);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5) var(--space-6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feature-card__icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: var(--c-accent-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--c-accent);
    flex-shrink: 0;
}

.feature-card__icon svg { width: 28px; height: 28px; }
.feature-card__title { font-size: 1.1rem; margin-bottom: var(--space-2); }
.feature-card__text { color: var(--c-text-muted); margin: 0; font-size: .95rem; line-height: 1.6; }

/* Farbakzente je Karte */
.feature-card--purple { border-color: rgba(167,139,250,0.2); }
.feature-card--purple .feature-card__icon {
    background: linear-gradient(135deg, rgba(102,126,234,0.25), rgba(118,75,162,0.25));
    color: #c4b5fd;
}
.feature-card--rose { border-color: rgba(240,147,251,0.18); }
.feature-card--rose .feature-card__icon {
    background: linear-gradient(135deg, rgba(240,147,251,0.22), rgba(245,87,108,0.18));
    color: #f9a8d4;
}
.feature-card--teal { border-color: rgba(67,233,123,0.18); }
.feature-card--teal .feature-card__icon {
    background: linear-gradient(135deg, rgba(67,233,123,0.2), rgba(56,249,215,0.16));
    color: #6ee7b7;
}

@media (min-width: 680px) {
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 7. ----------------------------------------------- Sektionen & Kategorien */
.section { padding: var(--space-7) 0; }
.section__head { max-width: 640px; margin-bottom: var(--space-6); }
.section__title { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
.section__lead { color: var(--c-text-muted); margin: 0; }

.category-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.category-card {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--accent, var(--c-accent));
}
.category-card__dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent, var(--c-accent));
    margin-bottom: var(--space-3);
}
.category-card__name { font-size: 1.15rem; margin-bottom: var(--space-2); }
.category-card__desc { color: var(--c-text-muted); margin: 0; font-size: .96rem; }

/* 8. --------------------------------------------------------- Hinweise */
.notice {
    background: rgba(109,211,255,0.06);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0;
    color: var(--c-text);
}
.notice--warn {
    background: var(--c-warn-bg);
    border-color: var(--c-warn-border);
    color: var(--c-warn-text);
}

/* 9. ---------------------------------------------------------- Footer */
.site-footer {
    background: #2a2f3a;
    color: #d8dde6;
    margin-top: var(--space-8);
    padding: var(--space-7) 0;
}
.site-footer__inner { display: grid; gap: var(--space-4); max-width: 760px; }
.site-footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.site-footer__claim { margin: 0; font-weight: 600; color: #fff; }
.site-footer__note { color: #aab3c0; font-size: .92rem; margin: 0; }
.site-footer__copyright { color: #8b94a3; font-size: .85rem; margin: 0; }

/* 10. ----------------------------------------------------- Fehlerseiten */
.error-page__inner { max-width: 560px; text-align: center; padding-block: var(--space-7); margin-inline: auto; }
.error-page__code { font-size: 3rem; font-weight: 800; color: var(--c-accent); margin: 0; }
.error-page__title { font-size: 1.6rem; }
.error-page__text { color: var(--c-text-muted); margin-bottom: var(--space-5); }
.error-page__debug {
    text-align: left;
    margin-top: var(--space-5);
    background: #11151c;
    color: #e6e6e6;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    overflow: auto;
    font-size: .82rem;
}

/* 11. ------------------------------------------ Hilfsklassen / Barrierefreiheit */
.visually-hidden, .skip-link {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    position: fixed;
    top: var(--space-3); left: var(--space-3);
    width: auto; height: auto;
    clip: auto;
    background: var(--c-accent);
    color: #0f0f10;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: 100;
}

/* 12. ------------------------------------------- Flash / Alerts */
.flash { margin-top: var(--space-5); }
.alert {
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    border: 1px solid var(--c-border);
    font-weight: 500;
}
.alert--success { background: rgba(67,233,123,0.1); border-color: rgba(67,233,123,0.3); color: #43e97b; }
.alert--error   { background: rgba(244,67,54,0.1); border-color: rgba(244,67,54,0.3); color: var(--c-danger); }

/* 13. ------------------------------------------------- Formulare */
.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; font-weight: 600; margin-bottom: var(--space-2); color: var(--c-text); }
/* Passwortfeld mit Auge zum Aufdecken. Das Auge liegt IM Feld, deshalb bekommt
   das Feld rechts so viel Innenabstand, dass der Text nicht darunter laeuft.
   44 px Trefferflaeche, damit es auf dem Handy mit dem Daumen zu treffen ist. */
.pw-feld { position: relative; }
.pw-feld .form-input { padding-right: 46px; }
.pw-feld__auge {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--c-text-muted); border-radius: 8px;
}
.pw-feld__auge:hover  { color: var(--c-text); }
.pw-feld__auge:active { background: rgba(255,255,255,.06); }
.pw-feld__auge svg    { width: 20px; height: 20px; }

.form-input {
    width: 100%;
    padding: 11px 14px;
    font: inherit;
    color: var(--c-text);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus {
    outline: none;
    border-color: var(--c-accent);
    /* Kräftigerer Fokusring, damit die Tastatur-Position klar erkennbar ist. */
    box-shadow: var(--focus-ring-strong);
}
.form-input.is-invalid,
.form-input[aria-invalid="true"] { border-color: var(--c-danger); }
.form-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(244,67,54,0.15); }
.form-hint  { margin: var(--space-2) 0 0; font-size: .85rem; color: var(--c-text-muted); }
.form-error { margin: var(--space-2) 0 0; font-size: .88rem; color: var(--c-danger); font-weight: 500; }
.form-submit { width: 100%; margin-top: var(--space-2); }

/* 14. -------------------------------------------- Auth-Karten */
.auth { max-width: 460px; }
.auth__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-6);
}
.auth__card--compact { max-width: 420px; margin-inline: auto; }
.auth__title { font-size: 1.5rem; margin-bottom: var(--space-2); }
.auth__lead  { color: var(--c-text-muted); margin-bottom: var(--space-5); }
.auth__lead--sm { font-size: .92rem; margin-bottom: var(--space-4); }
.auth__alt   { margin: var(--space-4) 0 0; text-align: center; color: var(--c-text-muted); font-size: .88rem; }
.auth__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    justify-content: space-between;
    margin-top: var(--space-4);
    font-size: .92rem;
}
.recovery-code__eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin: 0 0 var(--space-2);
}
.recovery-code__hint {
    font-size: .82rem;
    color: var(--c-text-muted);
    text-align: center;
    margin: var(--space-1) 0 var(--space-4);
}

/* Wiederherstellungscode-Anzeige */
.recovery-code {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--c-blue-soft);
    border: 1px dashed var(--c-accent);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.recovery-code__value {
    background: transparent;
    color: var(--c-text);
    font-size: clamp(.95rem, 3.2vw, 1.2rem);
    letter-spacing: .08em;
    overflow-wrap: anywhere;
    word-break: normal;
    padding: var(--space-2) 0;
    font-weight: 700;
    display: block;
    line-height: 1.8;
}
.recovery-code__copy { align-self: center; }

/* Login-Status in der Navigation */
.site-nav__user { color: var(--c-text-muted); font-size: .92rem; }
.logout-form { margin: 0; display: inline; }

/* ------------------------------------------------------- Responsive ab 860px */
@media (min-width: 860px) {
    .nav-toggle { display: none; }
    .site-header__page { display: none; }   /* Per-Page-Titel nur auf Mobil */

    .site-nav {
        display: flex;
        position: static;
        align-items: center;
        gap: var(--space-5);
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .site-nav__list { flex-direction: row; margin: 0; gap: 0; }
    .site-nav__actions { flex-direction: row; }
    .site-nav__link { padding: 8px 10px; font-size: .88rem; }
    .site-nav__link.is-active { background: transparent; border-bottom: 2px solid var(--c-accent); border-radius: 0; }
}

@media (min-width: 680px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
    .category-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Reduzierte Bewegung respektieren (OS-Einstellung – gilt überall, zusätzlich
   zum In-App-Schalter .malu-reduced-motion). Stoppt Animationen, Übergänge und
   weiches Scrollen für reizempfindliche Nutzer. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   ÖFFENTLICHE LANDING-PAGE – Sektionen, FAQ, Footer, Legal
   ===================================================================== */

/* Gemeinsame LP-Sektion */
.lp-section {
    padding: var(--space-8) 0;
}
.lp-section--alt {
    background: linear-gradient(180deg,
        rgba(118,75,162,0.06) 0%,
        rgba(21,21,24,1) 30%,
        rgba(21,21,24,1) 70%,
        rgba(102,126,234,0.04) 100%);
    border-top: 1px solid rgba(167,139,250,0.1);
    border-bottom: 1px solid rgba(167,139,250,0.1);
}
.lp-section__inner {
    max-width: 1100px;
    margin-inline: auto;
}
.lp-section__inner--center { text-align: center; }
.lp-section__inner--narrow { max-width: 760px; }

.lp-eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--c-accent);
    margin-bottom: var(--space-3);
}
.lp-heading {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--c-text);
    margin-bottom: var(--space-4);
}
.lp-lead {
    font-size: 1.05rem;
    color: var(--c-text-muted);
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--space-4);
}
.lp-lead--sm { font-size: .98rem; }

/* Über MALU – 3-Spalten-Karten */
.lp-about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-6);
    text-align: left;
}
@media (min-width: 680px) {
    .lp-about-grid { grid-template-columns: repeat(3, 1fr); }
}
.lp-about-card {
    background: var(--c-glass);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.lp-about-card__icon {
    width: 48px; height: 48px;
    border-radius: var(--radius);
    background: var(--c-accent-glow);
    display: flex; align-items: center; justify-content: center;
    color: var(--c-accent);
    margin-bottom: var(--space-4);
}
.lp-about-card__icon svg { width: 22px; height: 22px; }
.lp-about-card__icon--purple {
    background: linear-gradient(135deg, rgba(102,126,234,0.25), rgba(118,75,162,0.22));
    color: #c4b5fd;
}
.lp-about-card__icon--rose {
    background: linear-gradient(135deg, rgba(240,147,251,0.22), rgba(245,87,108,0.18));
    color: #f9a8d4;
}
.lp-about-card__icon--teal {
    background: linear-gradient(135deg, rgba(67,233,123,0.2), rgba(56,249,215,0.15));
    color: #6ee7b7;
}
.lp-about-card h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.lp-about-card p  { color: var(--c-text-muted); margin: 0; font-size: .93rem; }

/* =====================================================================
   Öffentliche Support-Seite (/contact): Hero + drei Support-Karten.
   Eigene, gescopte Klassen – beeinflusst die Landing-/Teaser-Karten nicht.
   ===================================================================== */
.sup-grid {
    display: grid;
    grid-template-columns: 1fr;          /* Mobile/Tablet: untereinander */
    gap: var(--space-5);
    margin-top: var(--space-7);
    text-align: left;
}
@media (min-width: 760px) {
    .sup-grid { grid-template-columns: repeat(3, 1fr); }  /* Desktop: drei nebeneinander */
}
.sup-card {
    display: flex;
    flex-direction: column;              /* Footer-Inhalt unten ausrichten (gleich hoch) */
    background: var(--c-glass);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-glow);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sup-card:hover,
.sup-card:focus-within {
    border-color: rgba(109,211,255,.35);
    box-shadow: 0 0 0 1px rgba(109,211,255,.10), 0 12px 30px rgba(0,0,0,.38);
    transform: translateY(-2px);
}
.sup-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-accent-glow);
    color: var(--c-accent);
    margin-bottom: var(--space-4);
}
.sup-card__icon svg { width: 24px; height: 24px; }
.sup-card__title { font-size: 1.25rem; color: var(--c-text); margin: 0 0 var(--space-2); }
.sup-card__text  { color: var(--c-text-muted); line-height: 1.6; margin: 0 0 var(--space-4); }

/* FAQ-Link unten links */
.sup-card__link {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-accent);
    font-weight: 600;
    border-radius: var(--radius);
}
.sup-card__link:hover { text-decoration: underline; }

/* Footer-Block (Kontakt/Krise) unten ausrichten */
.sup-card__foot { margin-top: auto; }
.sup-card__contact {
    display: inline-block;
    color: var(--c-accent);
    font-weight: 600;
    font-size: 1.02rem;
    word-break: break-word;
}
.sup-card__contact:hover { text-decoration: underline; }
.sup-card__note { color: var(--c-text-dim); font-size: .9rem; margin: var(--space-3) 0 0; }

/* Krise-Kontakte: Label + Nummer (Bedeutung nicht nur über Farbe) */
.sup-card__contacts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sup-card__contacts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.sup-card__contact-label { color: var(--c-text-muted); font-size: .92rem; min-width: 116px; }
.sup-card__contacts a { color: var(--c-accent); font-weight: 700; }
.sup-card__contacts a:hover { text-decoration: underline; }

/* Krise-Karte: ernster, aber ruhig – warmer gedämpfter Ton statt rotem Alarm */
.sup-card--crisis { border-color: rgba(240,184,110,.22); }
.sup-card--crisis:hover,
.sup-card--crisis:focus-within {
    border-color: rgba(240,184,110,.4);
    box-shadow: 0 0 0 1px rgba(240,184,110,.10), 0 12px 30px rgba(0,0,0,.38);
}
.sup-card--crisis .sup-card__icon { background: rgba(240,184,110,.14); color: #f0c089; }

/* Klar sichtbarer Tastatur-Fokus */
.sup-card__link:focus-visible,
.sup-card__contact:focus-visible,
.sup-card__contacts a:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
}

/* Zwei-Spalten-Layout */
.lp-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: center;
}
@media (min-width: 768px) {
    .lp-two-col { grid-template-columns: 1fr 1fr; }
    .lp-two-col--reverse .lp-two-col__text  { order: 2; }
    .lp-two-col--reverse .lp-two-col__visual { order: 1; }
}
.lp-two-col__text p  { color: var(--c-text-muted); margin-bottom: var(--space-4); }
.lp-two-col__text h2 { text-align: left; }
.lp-two-col__visual  { display: flex; justify-content: center; align-items: center; }

/* Check-Liste */
.lp-check-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.lp-check-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--c-text);
    font-size: .95rem;
}
.lp-check-list li::before {
    content: '';
    flex: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--c-accent-glow);
    border: 1px solid rgba(109,211,255,0.3);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%236dd3ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Community-Avatar-Ring (Warum anonym?) */
.lp-avatar-ring {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    max-width: 240px;
}
.lp-avatar-anon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid var(--hairline);
}
.lp-avatar-anon:nth-child(1) { background: linear-gradient(135deg,#667eea,#764ba2); }
.lp-avatar-anon:nth-child(2) { background: linear-gradient(135deg,#f093fb,#f5576c); }
.lp-avatar-anon:nth-child(3) { background: linear-gradient(135deg,#4facfe,#00f2fe); }
.lp-avatar-anon:nth-child(4) { background: linear-gradient(135deg,#43e97b,#38f9d7); }
.lp-avatar-anon:nth-child(5) { background: linear-gradient(135deg,#fa709a,#fee140); }
.lp-avatar-anon:nth-child(6) { background: linear-gradient(135deg,#30cfd0,#330867); }
.lp-avatar-anon svg { width: 32px; height: 32px; color: rgba(255,255,255,0.75); }

/* Safety-List (Sicherheitsbereich) */
.lp-safety-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.lp-safety-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}
.lp-safety-item__icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-safety-item__icon--purple {
    background: linear-gradient(135deg, rgba(102,126,234,0.25), rgba(118,75,162,0.22));
    color: #c4b5fd;
}
.lp-safety-item__icon--blue {
    background: linear-gradient(135deg, rgba(109,211,255,0.18), rgba(75,187,230,0.14));
    color: var(--c-accent);
}
.lp-safety-item__icon--green {
    background: linear-gradient(135deg, rgba(67,233,123,0.2), rgba(56,249,215,0.14));
    color: #6ee7b7;
}
.lp-safety-item__icon svg { width: 24px; height: 24px; }
.lp-safety-item__body { flex: 1; }
.lp-safety-item__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 var(--space-1);
}
.lp-safety-item__text { color: var(--c-text-muted); margin: 0; font-size: .92rem; line-height: 1.6; }

/* Shield-Visual */
.lp-shield-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 32px rgba(167,139,250,0.2));
}

/* Sicherheits-Icons */
.lp-security-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-top: var(--space-5);
    font-size: .92rem;
    color: #e0c070;
}
.lp-security-note svg { flex: none; color: var(--c-warn); margin-top: 2px; }

.lp-security-icons {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    justify-content: center;
}
@media (min-width: 480px) {
    .lp-security-icons { flex-direction: row; flex-wrap: wrap; }
}
.lp-sec-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    background: var(--c-glass);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    font-size: .82rem;
    color: var(--c-accent);
    min-width: 90px;
}
.lp-sec-icon svg { width: 28px; height: 28px; }

/* Beta-Box */
.lp-beta-box {
    background: var(--c-glass);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-xl);
    padding: var(--space-7);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 680px;
    margin-inline: auto;
}
.lp-beta-badge {
    display: inline-block;
    background: var(--c-gradient-purple);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
}

/* Scroll-Hint im Hero */
.lp-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--c-text-muted);
    font-size: .88rem;
    margin-top: var(--space-4);
    transition: color .15s;
    text-decoration: none;
}
.lp-scroll-hint:hover { color: var(--c-accent); text-decoration: none; }
.lp-scroll-hint svg { width: 18px; height: 18px; }

/* Entstehungsgeschichte */
.lp-origin {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
    max-width: 940px;
    margin-inline: auto;
}
@media (min-width: 768px) {
    .lp-origin { grid-template-columns: 1fr 1.5fr; gap: var(--space-8); }
}
.lp-origin__quote {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(240,147,251,0.07));
    border: 1px solid rgba(167,139,250,0.18);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.lp-origin__big {
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 800;
    background: linear-gradient(135deg, #c4b5fd 0%, #f9a8d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.3;
    margin: 0;
    font-style: italic;
}
.lp-origin__text .lp-heading { text-align: left; }
.lp-origin__text p { color: var(--c-text-muted); margin-bottom: var(--space-3); line-height: 1.7; }
.lp-origin__text p:last-child { color: var(--c-text); font-weight: 600; margin: 0; }

/* Live-Ticker (Beta-Ersatz) */
.lp-status-box {
    background: var(--c-glass);
    border: 1px solid rgba(167,139,250,0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-7);
    max-width: 720px;
    margin-inline: auto;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.lp-status-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    justify-content: center;
    margin-bottom: var(--space-5);
}
.lp-live-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--c-success);
    animation: lp-pulse 2s ease-in-out infinite;
}
@keyframes lp-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(67,233,123,0.5); }
    50%       { box-shadow: 0 0 14px rgba(67,233,123,0.9); }
}
.lp-status-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--c-success);
}
.lp-update-feed {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: var(--space-5);
}
.lp-update-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px var(--space-4);
    border-bottom: 1px solid var(--c-border);
    font-size: .88rem;
    background: var(--c-surface);
}
.lp-update-row:last-child { border-bottom: 0; }
.lp-update-badge {
    flex: none;
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: .06em;
    min-width: 52px;
    text-align: center;
}
.lp-update-badge--live    { background: rgba(67,233,123,0.15);  color: var(--c-success); }
.lp-update-badge--soon    { background: rgba(109,211,255,0.12); color: var(--c-accent);  }
.lp-update-badge--planned { background: rgba(167,139,250,0.14); color: #c4b5fd;          }
.lp-update-text { flex: 1; color: var(--c-text); }
.lp-update-date { color: var(--c-text-dim); font-size: .8rem; white-space: nowrap; }
.lp-status-note {
    color: var(--c-text-muted);
    font-size: .88rem;
    margin: 0;
    text-align: center;
}

/* FAQ Accordion */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-6);
    text-align: left;
}
.faq-item {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.faq-item[open] { border-color: rgba(109,211,255,0.25); }
.faq-item__q {
    list-style: none;
    padding: var(--space-4) var(--space-5);
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    user-select: none;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
    content: '+';
    flex: none;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--c-accent);
    line-height: 1;
    transition: transform .2s ease;
}
.faq-item[open] .faq-item__q::after {
    content: '−';
}
.faq-item__q:hover { color: var(--c-accent); }
.faq-item__a {
    padding: 0 var(--space-5) var(--space-4);
    color: var(--c-text-muted);
    font-size: .96rem;
    line-height: 1.65;
}
.faq-item__a p { margin: 0; }

/* Footer redesign */
.site-footer {
    background: #1a1a1f;
    color: #d8dde6;
    border-top: 1px solid var(--c-border);
    margin-top: var(--space-8);
    padding: var(--space-7) 0 var(--space-6);
}
.site-footer__inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
.site-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--hairline);
}
@media (min-width: 680px) {
    .site-footer__top { grid-template-columns: 1fr 2fr; }
}

.site-footer__brand-col { display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
}
.site-footer__brand:hover { text-decoration: none; opacity: .85; }
.site-footer__tagline { color: var(--c-accent); font-weight: 600; margin: 0; font-size: .95rem; }
.site-footer__note { color: #7a8490; font-size: .85rem; margin: 0; line-height: 1.55; }

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
@media (max-width: 500px) {
    .site-footer__nav { grid-template-columns: 1fr 1fr; }
}
.site-footer__nav-title {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8b94a3;
    margin: 0 0 var(--space-3);
}
.site-footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.site-footer__nav-list a {
    color: #aab3c0;
    font-size: .9rem;
}
.site-footer__nav-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}
.site-footer__copyright { color: #5c6472; font-size: .82rem; margin: 0; }
.site-footer__crisis { margin: 0; font-size: .82rem; color: #7a8490; }
.site-footer__crisis-link { color: var(--c-warn); font-weight: 600; }
.site-footer__crisis-link:hover { text-decoration: underline; }

/* --- Dezenter Pressehinweis „Bekannt aus" (nur Index-/Startseite) ---
   Zentriert oben im Footer, Logos horizontal nebeneinander (umbruchfähig). */
.site-footer__press {
    text-align: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--hairline);
}
.site-footer__press-label {
    color: #8b94a3;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 var(--space-4);
}
.site-footer__press-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}
.site-footer__press-badge {
    display: inline-flex;
    align-items: center;
    background: #f4f6fa;
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    line-height: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: opacity .15s ease, transform .15s ease;
}
.site-footer__press-badge:hover { opacity: .9; transform: translateY(-1px); }
.site-footer__press-badge:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}
.site-footer__press-logo {
    height: 28px;
    width: auto;
    display: block;
}
@media (max-width: 500px) {
    .site-footer__press-logos { gap: var(--space-2); }
    .site-footer__press-logo { height: 22px; }
    .site-footer__press-badge { padding: 5px 11px; }
}

/* ================================================================
   MALU Plus / MALU Pro – interne Vergleichsseite (/plus)
   Drei Stufen (Kostenlos · Plus · Pro), Dark-Design, mobil gestapelt.
   ================================================================ */
.plus-page {
    max-width: 1040px;
    margin-inline: auto;
    padding-bottom: var(--space-7);
}

/* --- Kopfbereich --- */
.plus-hero { text-align: center; margin-bottom: var(--space-6); }
.plus-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--c-accent);
    background: var(--c-accent-glow);
    border: 1px solid rgba(109,211,255,0.28);
    border-radius: var(--radius-pill);
    padding: 5px 14px;
}
.plus-hero__eyebrow svg { width: 15px; height: 15px; }
.plus-hero__title {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 800;
    color: var(--c-text);
    margin: var(--space-3) 0 var(--space-2);
}
.plus-hero__lead {
    max-width: 640px;
    margin: 0 auto;
    color: var(--c-text-muted);
    line-height: 1.6;
}
.plus-hero__reassure {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    max-width: 640px;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-4);
    background: rgba(67,233,123,0.08);
    border: 1px solid rgba(67,233,123,0.25);
    border-radius: var(--radius);
    color: var(--c-text);
    font-size: .92rem;
    line-height: 1.55;
}
.plus-hero__reassure svg { width: 20px; height: 20px; color: var(--c-success); flex: none; margin-top: 1px; }
.plus-hero__reassure strong { color: var(--c-success); }

/* --- Monatlich/Jährlich-Umschalter --- */
.plus-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin: 0 auto var(--space-6);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.plus-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--c-text-muted);
    font: inherit;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.plus-toggle__btn[aria-pressed="true"] {
    background: var(--c-accent);
    color: #0f0f10;
}
.plus-toggle__save {
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(67,233,123,0.15);
    color: var(--c-success);
}
.plus-toggle__btn[aria-pressed="true"] .plus-toggle__save {
    background: rgba(15,15,16,0.18);
    color: #0f0f10;
}

/* --- Karten-Grid --- */
.plus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-4);
    align-items: start;
}
.plus-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: relative;
}
.plus-card--featured {
    border-color: rgba(109,211,255,0.5);
    box-shadow: 0 0 0 1px rgba(109,211,255,0.25), var(--shadow-glow);
}
.plus-card__ribbon {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-gradient-cta);
    color: #0f0f10;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 3px 14px;
    border-radius: var(--radius-pill);
}
.plus-card__head { display: flex; flex-direction: column; gap: 4px; }
.plus-card__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--c-text);
    margin: 0;
}
.plus-card__tagline { margin: 0; font-size: .86rem; color: var(--c-text-muted); }

/* Optionale Vorschau-Badges */
.plus-badge {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    line-height: 1.4;
}
.plus-badge--plus { color: #0f0f10; background: var(--c-accent); }
.plus-badge--pro  { color: #fff; background: linear-gradient(135deg, #a78bfa, var(--c-warn)); }

/* Preis */
.plus-card__price { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.plus-card__amount { font-size: 1.7rem; font-weight: 800; color: var(--c-text); }
.plus-card__per { font-size: .9rem; font-weight: 600; color: var(--c-text-muted); }
.plus-card__unit { font-size: .8rem; color: var(--c-text-dim); }
/* Intervall-Umschaltung: standardmässig monatlich, jährlich ausgeblendet */
.plus-card [data-price-yearly] { display: none; }
.plus-page.is-yearly .plus-card [data-price-monthly] { display: none; }
.plus-page.is-yearly .plus-card [data-price-yearly] { display: block; }

/* Aktion */
.plus-card__cta { display: flex; flex-direction: column; gap: 8px; }
.plus-card__current {
    display: inline-block;
    text-align: center;
    font-size: .86rem;
    font-weight: 600;
    color: var(--c-text-muted);
    background: var(--c-surface-2);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    padding: 9px 12px;
}
.plus-card__btn { width: 100%; justify-content: center; }
.plus-card__noted {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .84rem;
    font-weight: 600;
    color: var(--c-success);
}
.plus-card__noted svg { width: 15px; height: 15px; }

/* Feature-Listen */
.plus-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: .9rem;
    color: var(--c-text-muted);
}
.plus-card__features li { display: flex; align-items: flex-start; gap: 9px; line-height: 1.4; }
.plus-card__check { color: var(--c-accent); flex: none; margin-top: 1px; }
.plus-card__check svg { width: 15px; height: 15px; }
.plus-card--pro .plus-card__check { color: #a78bfa; }

/* Abschluss-Hinweis */
.plus-outro {
    margin-top: var(--space-6);
    text-align: center;
    max-width: 620px;
    margin-inline: auto;
}
.plus-outro__badge {
    display: inline-block;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-warn);
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-border);
    border-radius: var(--radius-pill);
    padding: 3px 12px;
    margin: 0 0 var(--space-2);
}
.plus-outro__text { margin: 0; font-size: .9rem; color: var(--c-text-muted); line-height: 1.6; }
.plus-outro__links {
    margin: var(--space-3) 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    font-size: .88rem;
}
.plus-outro__links a { color: var(--c-accent); }

/* --- Plus & Pro Abo-System (24.07.2026) --------------------------- */

/* Schmale Unterseiten (Kauf, Verwaltung, Status, FAQ, Rechnungen) */
.plus-page--schmal { max-width: 640px; margin-inline: auto; }

/* Testmodus-Hinweis */
.plus-testhinweis {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto var(--space-4);
    max-width: 640px;
    padding: 9px 14px;
    font-size: .86rem;
    color: var(--c-warn);
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-border);
    border-radius: var(--radius);
}
.plus-testhinweis svg { width: 16px; height: 16px; flex: none; }

/* Jahres-/Monats-Zusatzzeile unter dem Preis */
.plus-card [data-unit-yearly] { display: none; }
.plus-page.is-yearly .plus-card [data-unit-monthly] { display: none; }
.plus-page.is-yearly .plus-card [data-unit-yearly] { display: block; }

/* Ehrlicher Vergleich */
.plus-vgl { margin-top: var(--space-7); }
.plus-vgl__titel {
    text-align: center;
    font-size: 1.25rem;
    margin: 0 0 var(--space-4);
}
.plus-vgl__wrap {
    overflow-x: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
}
.plus-vgl__wrap:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.plus-vgl__tab {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: .88rem;
}
.plus-vgl__tab th,
.plus-vgl__tab td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border-soft);
    text-align: center;
}
.plus-vgl__tab thead th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-muted);
    background: var(--c-surface-2);
}
.plus-vgl__tab tbody th[scope="row"] {
    text-align: left;
    font-weight: 500;
    color: var(--c-text);
}
.plus-vgl__gruppe th {
    text-align: left !important;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-accent);
    background: var(--c-glass);
    padding-top: 14px;
}
.plus-vgl__ja { color: var(--c-success); display: inline-flex; }
.plus-vgl__ja svg { width: 16px; height: 16px; }
.plus-vgl__nein { color: var(--c-text-dim); }
.plus-vgl__wert { font-weight: 700; color: var(--c-text); }
.plus-vgl__tab--rechnungen { min-width: 440px; }
.plus-vgl__tab--rechnungen td { text-align: left; }
.plus-vgl__tab--rechnungen td a { color: var(--c-accent); margin-right: 10px; }

/* Kauf pruefen */
.plus-kauf {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.plus-kauf__liste { margin: 0; display: flex; flex-direction: column; }
.plus-kauf__zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: 9px 0;
    border-bottom: 1px solid var(--c-border-soft);
}
.plus-kauf__zeile:last-child { border-bottom: 0; }
.plus-kauf__zeile dt {
    flex: none;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-dim);
}
.plus-kauf__zeile dd { margin: 0; text-align: right; font-size: .92rem; color: var(--c-text); line-height: 1.5; }
.plus-kauf__zeile dd strong { font-size: 1.05rem; }
.plus-kauf__hinweis { margin: 0; font-size: .84rem; color: var(--c-text-muted); line-height: 1.6; }
.plus-kauf__hinweis a { color: var(--c-accent); }
.plus-kauf__form { display: flex; flex-direction: column; }
.plus-kauf__zurueck {
    text-align: center;
    font-size: .88rem;
    color: var(--c-text-muted);
}
.plus-kauf__zurueck:hover { color: var(--c-text); }

/* Status-Seiten (Danke, Abbruch, Fehlgeschlagen, Test-Checkout) */
.plus-status {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.plus-status__zustand { display: flex; flex-direction: column; gap: var(--space-3); }
.plus-status__zustand[hidden] { display: none; }
.plus-status__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-glass);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
}
.plus-status__icon svg { width: 24px; height: 24px; }
.plus-status__icon--ok { color: var(--c-success); border-color: rgba(67,233,123,0.35); }
.plus-status__icon--warn { color: var(--c-warn); border-color: var(--c-warn-border); }
.plus-status__icon--warten { color: var(--c-accent); }
.plus-status__icon--warten svg { animation: plus-drehen 1.6s linear infinite; }
@keyframes plus-drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .plus-status__icon--warten svg { animation: none; }
}
.plus-status__titel { margin: 0; font-size: 1.35rem; }
.plus-status__text { margin: 0; font-size: .92rem; color: var(--c-text-muted); line-height: 1.6; }
.plus-status__text a { color: var(--c-accent); }
.plus-status__text--leise { font-size: .84rem; color: var(--c-text-dim); }
.plus-status__aktionen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.plus-status__aktionen--spalte { flex-direction: column; align-items: stretch; }

/* Paketverwaltung */
.plus-verw {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.plus-verw--warn { border-color: var(--c-warn-border); background: var(--c-warn-bg); }
.plus-verw--test { border-style: dashed; }
.plus-verw__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.plus-verw__titel {
    margin: 0;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.plus-verw__titel svg { width: 18px; height: 18px; }
.plus-verw--warn .plus-verw__titel { color: var(--c-warn); }
.plus-verw__status {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
}
.plus-verw__status--active   { color: var(--c-success); border-color: rgba(67,233,123,0.4); }
.plus-verw__status--past_due { color: var(--c-warn); border-color: var(--c-warn-border); }
.plus-verw__text { margin: 0; font-size: .9rem; color: var(--c-text-muted); line-height: 1.6; }
.plus-verw__text a { color: var(--c-accent); }
.plus-verw__text--info { color: var(--c-text); }
.plus-verw__text--leise { font-size: .82rem; color: var(--c-text-dim); }
.plus-verw__rechnungen {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.plus-verw__rechnungen li {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border-soft);
    font-size: .88rem;
}
.plus-verw__rechnungen li:last-child { border-bottom: 0; }
.plus-verw__rechnungen a { color: var(--c-accent); margin-left: auto; }
.plus-verw__rechnung-status { color: var(--c-text-dim); }

/* FAQ */
.plus-faq { display: flex; flex-direction: column; gap: var(--space-2); }
.plus-faq__eintrag {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.plus-faq__eintrag[open] { border-color: var(--c-accent-dim); }
.plus-faq__frage {
    cursor: pointer;
    padding: 13px 16px;
    font-weight: 600;
    font-size: .94rem;
    color: var(--c-text);
    list-style: none;
    position: relative;
    padding-right: 38px;
}
.plus-faq__frage::-webkit-details-marker { display: none; }
.plus-faq__frage::after {
    content: '+';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--c-text-dim);
}
.plus-faq__eintrag[open] .plus-faq__frage::after { content: '–'; color: var(--c-accent); }
.plus-faq__frage:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.plus-faq__antwort {
    margin: 0;
    padding: 0 16px 14px;
    font-size: .89rem;
    color: var(--c-text-muted);
    line-height: 1.65;
}

@media (max-width: 560px) {
    .plus-kauf__zeile { flex-direction: column; gap: 2px; }
    .plus-kauf__zeile dd { text-align: left; }
    .plus-status__aktionen { flex-direction: column; align-items: stretch; }
}

/* --- Plus & Pro Gestaltung: Cover, Rahmen, Chat-Hintergruende ------ */

/* Neue Cover-Varianten (MALU Plus) – Slugs siehe profile_covers() */
.dash-sidebar__cover--violet-rose { background: linear-gradient(150deg, #7c3aed 0%, #f43f5e 100%); }
.dash-sidebar__cover--deep-teal   { background: linear-gradient(150deg, #0f766e 0%, #14b8a6 100%); }
.dash-sidebar__cover--ember       { background: linear-gradient(150deg, #7c2d12 0%, #f59e0b 100%); }
.dash-sidebar__cover--nachthimmel { background: linear-gradient(150deg, #1e1b4b 0%, #38bdf8 100%); }

/* Profilrahmen (Plus statisch, Pro dezent animiert). Ringe ueber
   box-shadow, damit kein Layout springt; Animationen stoppen ueber die
   globalen reduced-motion-Regeln automatisch. */
[class*="avatar--rahmen-"] { position: relative; }
.avatar--rahmen-linie       { box-shadow: 0 0 0 2px var(--c-accent); }
.avatar--rahmen-doppellinie { box-shadow: 0 0 0 2px var(--c-accent), 0 0 0 5px rgba(109,211,255,0.35); }
.avatar--rahmen-punkte      { outline: 3px dotted var(--c-accent); outline-offset: 3px; }
.avatar--rahmen-blaetter    { box-shadow: 0 0 0 2px #4ade80, 0 0 14px rgba(74,222,128,0.45); }
.avatar--rahmen-wellen      { box-shadow: 0 0 0 2px #22d3ee, 0 0 0 6px rgba(34,211,238,0.18), 0 0 0 9px rgba(34,211,238,0.08); }
.avatar--rahmen-sterne      { box-shadow: 0 0 0 2px #fbbf24, 0 0 16px rgba(251,191,36,0.5); }
/* WICHTIG (Besitzer-Regel 24.07.2026): Die Premium-Animationen (Rahmen,
   animierte Hintergruende, Zitat) laufen auch dann, wenn das Betriebssystem
   "reduzierte Bewegung" meldet – die globale reduced-motion-Regel weiter
   oben wuerde sie sonst stoppen (deshalb ueberall !important am
   animation-Shorthand; Klassen-Spezifitaet schlaegt die *-Regel). NUR der
   In-App-Schalter "Reduzierte Animationen" haelt sie an (Block am Ende
   dieses Abschnitts). */
.avatar--rahmen-puls        { animation: rahmen-puls 2.6s ease-in-out infinite !important; }
@keyframes rahmen-puls {
    0%, 100% { box-shadow: 0 0 0 2px var(--c-accent), 0 0 6px rgba(109,211,255,0.25); }
    50%      { box-shadow: 0 0 0 3px var(--c-accent), 0 0 18px rgba(109,211,255,0.55); }
}
.avatar--rahmen-orbit { box-shadow: 0 0 0 2px rgba(109,211,255,0.35); }
.avatar--rahmen-orbit::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg 300deg, var(--c-accent) 332deg, transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: rahmen-orbit 5s linear infinite !important;
    pointer-events: none;
}
@keyframes rahmen-orbit { to { transform: rotate(360deg); } }
/* Saisonale Rahmen (Pro) */
.avatar--rahmen-sommerlicht     { box-shadow: 0 0 0 2px #f59e0b, 0 0 0 5px rgba(245,158,11,0.25), 0 0 18px rgba(245,158,11,0.4); }
.avatar--rahmen-herbstglut      { box-shadow: 0 0 0 2px #ea580c, 0 0 14px rgba(234,88,12,0.5); }
.avatar--rahmen-winterstille    { box-shadow: 0 0 0 2px #93c5fd, 0 0 0 5px rgba(147,197,253,0.2), 0 0 16px rgba(147,197,253,0.45); }
.avatar--rahmen-fruehlingshauch { box-shadow: 0 0 0 2px #86efac, 0 0 0 5px rgba(244,114,182,0.18), 0 0 14px rgba(134,239,172,0.4); }

/* Gesperrte Auswahl im Profil-Editor (Stufe reicht nicht): sichtbar,
   aber gedimmt + Schloss-Punkt. Ehrlich, kein Kaufdruck. */
.avm__grad-swatch.is-locked,
.avm__cover-swatch.is-locked,
.avm__frame-btn.is-locked {
    opacity: .38;
    cursor: not-allowed;
    filter: saturate(.6);
}

/* Rahmen-Auswahl im Profil-Editor */
.avm__frame-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.avm__frame-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 10px 8px 8px;
    min-width: 76px;
    cursor: pointer;
    color: var(--c-text-muted);
}
.avm__frame-btn:hover:not(:disabled) { border-color: var(--c-accent-dim); color: var(--c-text); }
.avm__frame-btn.is-selected { border-color: var(--c-accent); color: var(--c-text); }
.avm__frame-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.avm__frame-demo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c-surface-2);
    display: inline-block;
}
.avm__frame-name { font-size: .72rem; line-height: 1.2; text-align: center; }
.avm__frame-hinweis { margin: 8px 0 0; font-size: .8rem; color: var(--c-text-dim); }
.avm__frame-hinweis a { color: var(--c-accent); }

/* Chat-Hintergruende: dieselben Muster als Demo-Kachel (chat-bg--…) und
   als Gespraechs-Hintergrund (chat-thread--bg-…). Ruhige, dunkle Muster. */
.chat-bg--standard        { background: var(--c-bg); }
.chat-bg--sterne,
.chat-thread--bg-sterne {
    background-color: #12141c;
    background-image: radial-gradient(1px 1px at 18% 32%, rgba(233,239,247,0.35) 0, transparent 100%),
                      radial-gradient(1px 1px at 64% 12%, rgba(233,239,247,0.28) 0, transparent 100%),
                      radial-gradient(1.5px 1.5px at 82% 58%, rgba(109,211,255,0.3) 0, transparent 100%),
                      radial-gradient(1px 1px at 38% 78%, rgba(233,239,247,0.22) 0, transparent 100%),
                      radial-gradient(1px 1px at 92% 86%, rgba(233,239,247,0.3) 0, transparent 100%);
}
.chat-bg--wellen,
.chat-thread--bg-wellen {
    background-color: #121722;
    background-image: repeating-linear-gradient(115deg,
        rgba(109,211,255,0.05) 0 2px, transparent 2px 26px);
}
.chat-bg--blaetter,
.chat-thread--bg-blaetter {
    background-color: #121a16;
    background-image: repeating-linear-gradient(55deg,
        rgba(74,222,128,0.05) 0 2px, transparent 2px 30px);
}
.chat-bg--verlauf-blau,
.chat-thread--bg-verlauf-blau {
    background: linear-gradient(180deg, #101722 0%, #14161c 60%, #101c28 100%);
}
.chat-bg--verlauf-violett,
.chat-thread--bg-verlauf-violett {
    background: linear-gradient(180deg, #171226 0%, #14161c 60%, #1c1430 100%);
}
.chat-bg--punkte,
.chat-thread--bg-punkte {
    background-color: #14161c;
    background-image: radial-gradient(rgba(233,239,247,0.06) 1px, transparent 1.6px);
    background-size: 22px 22px;
}

/* Gestaltungs-Karte in den Einstellungen */
.set-gest__form,
.set-gest__vorlagen { margin-top: var(--space-4); }
.set-gest__feld { border: 0; padding: 0; margin: 0; }
.set-gest__legend {
    font-size: .86rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 10px;
    padding: 0;
}
.set-gest__bgrow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.set-gest__bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: .72rem;
    color: var(--c-text-muted);
}
.set-gest__bg input { position: absolute; opacity: 0; }
.set-gest__bg-demo {
    width: 64px;
    height: 44px;
    border-radius: 8px;
    border: 2px solid var(--c-border);
    display: inline-block;
}
.set-gest__bg input:checked + .set-gest__bg-demo { border-color: var(--c-accent); }
.set-gest__bg input:focus-visible + .set-gest__bg-demo { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.set-gest__btn { margin-top: var(--space-3); }
.set-gest__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.set-gest__liste li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border-soft);
    font-size: .9rem;
}
.set-gest__liste li:last-child { border-bottom: 0; }
.set-gest__vname { flex: 1; color: var(--c-text); }
.set-gest__mini { padding: 4px 12px; font-size: .8rem; }
.set-gest__mini--leise { color: var(--c-text-dim); }
.set-gest__save { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--space-3); }
.set-gest__input { max-width: 220px; }

/* --- /plus-Neuaufbau (Besitzer-Feedback 24.07.2026) ----------------- */

/* Nur die zwei Bezahl-Karten – "Basic" gibt es als Paket nicht mehr
   (25.07.2026: hat man sowieso, stand nur im Weg). */
.plus-grid--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }

/* "Für alle kostenlos"-Kasten: nennt Anlaufstellen und Krisenhilfe
   AUSDRÜCKLICH, damit die Frage "kostet das was?" nie aufkommt. */
.plus-frei {
    max-width: 820px;
    margin: var(--space-5) auto 0;
    padding: 18px 22px;
    background: var(--c-glass);
    border: 1px solid rgba(74, 222, 128, .25);
    border-radius: var(--radius-lg);
}
.plus-frei__titel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--c-success);
}
.plus-frei__haken svg { width: 18px; height: 18px; }
.plus-frei__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 18px;
    font-size: .9rem;
    color: var(--c-text-muted);
}
.plus-frei__liste li { padding-left: 16px; position: relative; }
.plus-frei__liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .52em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-success);
    opacity: .7;
}
.plus-frei__liste li:first-child,
.plus-frei__liste li:nth-child(2) { color: var(--c-text); font-weight: 600; }
@media (max-width: 560px) {
    .plus-frei__liste { grid-template-columns: 1fr; }
}

/* Pro-Karte: "Alles aus Plus" + klar abgesetzter Nur-in-Pro-Block */
.plus-card__inklusive {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .88rem;
    color: var(--c-text-muted);
}
.plus-card__inklusive svg { width: 15px; height: 15px; color: #a78bfa; }
.plus-card__nurpro {
    margin: 4px 0 0;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #a78bfa;
    border-top: 1px solid var(--c-border-soft);
    padding-top: 10px;
}
.plus-card__features--pro { margin-top: 0; }

/* Vergleichstabelle: erste Spalte klebt, damit die Haken auf dem Handy
   immer neben ihrer Funktion stehen */
.plus-vgl__tab thead th:first-child,
.plus-vgl__tab tbody th[scope="row"] {
    position: sticky;
    left: 0;
    background: var(--c-surface);
    z-index: 1;
}
.plus-vgl__tab thead th:first-child { background: var(--c-surface-2); }

@media (max-width: 720px) {
    .plus-grid--zwei { grid-template-columns: 1fr; }
    .plus-vgl__tab { min-width: 360px; font-size: .84rem; }
    .plus-vgl__tab th, .plus-vgl__tab td { padding: 9px 10px; }
    .plus-vgl__tab tbody th[scope="row"] { max-width: 200px; }
}

/* Abo-Verwaltung in den Einstellungen */
.set-abo__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.set-abo__links li { border-bottom: 1px solid var(--c-border-soft); }
.set-abo__links li:last-child { border-bottom: 0; }
.set-abo__links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    color: var(--c-text);
    font-size: .92rem;
    border-radius: var(--radius-sm, 8px);
}
.set-abo__links a:hover { color: var(--c-accent); }
.set-abo__links a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.set-abo__links svg { width: 17px; height: 17px; color: var(--c-accent); flex: none; }
.set-abo__hint { margin-left: auto; font-size: .78rem; color: var(--c-text-dim); text-align: right; }

/* --- Animierte Profil-Hintergruende (MALU Plus & Pro) --------------- */
/* Basis: Grundverlauf auf dem Element, Partikel-/Motiv-Ebenen auf
   ::before/::after (SVG-Data-URIs + Verlaeufe, KEINE externen Dateien).
   Alle Animationen mit !important am Shorthand: sie sollen auch bei
   OS-reduced-motion laufen (Besitzer-Regel); der In-App-Schalter stoppt
   sie im Block "Premium-Animationen aus" weiter unten. */
.cover-anim { position: relative; overflow: hidden; }
.cover-anim::before,
.cover-anim::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

@keyframes ca-drift-links  { from { background-position: 0 0; }   to { background-position: -280px 0; } }
@keyframes ca-drift-rechts { from { background-position: 0 0; }   to { background-position: 280px 0; } }
@keyframes ca-fallen       { from { background-position: 0 0; }   to { background-position: 34px 220px; } }
@keyframes ca-fallen-sanft { from { background-position: 0 0; }   to { background-position: -46px 220px; } }
@keyframes ca-steigen      { from { background-position: 0 0; }   to { background-position: -18px -220px; } }
@keyframes ca-funkeln      { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes ca-schimmer     { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes ca-wogen        { from { background-position-x: 0; }   to { background-position-x: -320px; } }
@keyframes ca-atmen        { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.04); } }

/* 1 · Unterwasser (Plus): Fische ziehen vorbei, Blasen steigen */
.cover-anim--unterwasser { background: linear-gradient(180deg, #0a3d5c 0%, #072a44 55%, #051e33 100%); }
.cover-anim--unterwasser::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cg fill='%23bfe8ff' fill-opacity='.5'%3E%3Cpath d='M30 30c9-8 24-8 32 0-8 8-23 8-32 0z'/%3E%3Cpath d='M62 30l12-8v16z'/%3E%3Ccircle cx='37' cy='28' r='1.8' fill='%23072a44'/%3E%3Cpath d='M140 80c7-6 19-6 25 0-6 6-18 6-25 0z' fill-opacity='.35'/%3E%3Cpath d='M165 80l9-6v12z' fill-opacity='.35'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 240px 120px;
    animation: ca-drift-links 16s linear infinite !important;
}
.cover-anim--unterwasser::after {
    background-image: radial-gradient(2px 2px at 20% 90%, rgba(191,232,255,.5) 40%, transparent 60%),
                      radial-gradient(1.5px 1.5px at 55% 95%, rgba(191,232,255,.4) 40%, transparent 60%),
                      radial-gradient(2.5px 2.5px at 80% 85%, rgba(191,232,255,.35) 40%, transparent 60%);
    background-size: 200px 220px;
    animation: ca-steigen 9s linear infinite !important;
}

/* 2 · Galaxie (Plus): funkelnde Sterne + Nebel */
.cover-anim--galaxie { background: linear-gradient(135deg, #120b2e 0%, #1d1145 50%, #0b0620 100%); }
.cover-anim--galaxie::before {
    background-image: radial-gradient(1.6px 1.6px at 12% 24%, #fff 45%, transparent 60%),
                      radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,.8) 45%, transparent 60%),
                      radial-gradient(2px 2px at 58% 18%, rgba(200,180,255,.9) 45%, transparent 60%),
                      radial-gradient(1.2px 1.2px at 76% 52%, #fff 45%, transparent 60%),
                      radial-gradient(1px 1px at 90% 80%, rgba(255,255,255,.7) 45%, transparent 60%);
    background-size: 220px 180px;
    animation: ca-drift-links 40s linear infinite !important;
}
.cover-anim--galaxie::after {
    background: radial-gradient(60% 45% at 65% 35%, rgba(148,90,255,.22) 0%, transparent 70%),
                radial-gradient(45% 40% at 25% 70%, rgba(90,140,255,.16) 0%, transparent 70%);
    animation: ca-atmen 12s ease-in-out infinite !important;
}

/* 3 · Sommerwiese (Plus): Sonnenschein + schwebende Pollen */
.cover-anim--sommerwiese { background: linear-gradient(180deg, #6fbf6a 0%, #3f8f4f 60%, #2e6e3e 100%); }
.cover-anim--sommerwiese::before {
    background: radial-gradient(38% 55% at 80% 12%, rgba(255,236,150,.55) 0%, transparent 70%);
    animation: ca-atmen 10s ease-in-out infinite !important;
}
.cover-anim--sommerwiese::after {
    background-image: radial-gradient(2px 2px at 25% 80%, rgba(255,250,200,.7) 40%, transparent 60%),
                      radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,250,200,.55) 40%, transparent 60%),
                      radial-gradient(2px 2px at 85% 88%, rgba(255,250,200,.5) 40%, transparent 60%);
    background-size: 190px 200px;
    animation: ca-steigen 12s linear infinite !important;
}

/* 4 · Herbstlaub (Plus): fallende Blaetter */
.cover-anim--herbstlaub { background: linear-gradient(160deg, #6e3a12 0%, #91530f 45%, #4c2508 100%); }
.cover-anim--herbstlaub::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='%23ffb347' fill-opacity='.55'%3E%3Cpath d='M30 20c10 2 14 10 12 18-8 2-16-2-18-10 2-4 4-6 6-8z'/%3E%3Cpath d='M140 90c8 1 11 8 9 14-6 2-12-1-14-8 2-3 3-4 5-6z' fill='%23e8863a'/%3E%3Cpath d='M80 150c7 1 10 7 8 12-5 2-11-1-12-7 1-2 2-3 4-5z' fill='%23d4a017'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 200px 200px;
    animation: ca-fallen 11s linear infinite !important;
}
.cover-anim--herbstlaub::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23ffd27f' fill-opacity='.4'%3E%3Cpath d='M180 40c8 1 11 8 9 14-6 2-12-1-14-8 2-3 3-4 5-6z'/%3E%3Cpath d='M60 120c6 1 9 6 7 11-5 1-10-1-11-6 1-2 2-3 4-5z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 240px 240px;
    animation: ca-fallen-sanft 15s linear infinite !important;
}

/* 5 · Winterschnee (Plus): zwei Schnee-Ebenen */
.cover-anim--winterschnee { background: linear-gradient(180deg, #27435f 0%, #1a3049 60%, #12233a 100%); }
.cover-anim--winterschnee::before {
    background-image: radial-gradient(2px 2px at 20% 20%, #fff 45%, transparent 60%),
                      radial-gradient(1.5px 1.5px at 50% 60%, rgba(255,255,255,.85) 45%, transparent 60%),
                      radial-gradient(2px 2px at 80% 35%, rgba(255,255,255,.9) 45%, transparent 60%);
    background-size: 170px 190px;
    animation: ca-fallen 8s linear infinite !important;
}
.cover-anim--winterschnee::after {
    background-image: radial-gradient(1px 1px at 35% 45%, rgba(255,255,255,.6) 45%, transparent 60%),
                      radial-gradient(1.2px 1.2px at 70% 75%, rgba(255,255,255,.5) 45%, transparent 60%);
    background-size: 130px 150px;
    animation: ca-fallen-sanft 13s linear infinite !important;
}

/* 6 · Fruehlingsbluete (Plus): treibende Bluetenblaetter */
.cover-anim--fruehlingsbluete { background: linear-gradient(160deg, #3f7d4e 0%, #63a86f 55%, #35643f 100%); }
.cover-anim--fruehlingsbluete::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cg fill='%23ffd9e8' fill-opacity='.65'%3E%3Cellipse cx='30' cy='30' rx='5' ry='3' transform='rotate(30 30 30)'/%3E%3Cellipse cx='120' cy='80' rx='4' ry='2.5' transform='rotate(-20 120 80)'/%3E%3Cellipse cx='70' cy='150' rx='5' ry='3' transform='rotate(50 70 150)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 190px 190px;
    animation: ca-fallen-sanft 12s linear infinite !important;
}
.cover-anim--fruehlingsbluete::after {
    background: radial-gradient(40% 50% at 15% 15%, rgba(255,240,200,.3) 0%, transparent 70%);
    animation: ca-atmen 11s ease-in-out infinite !important;
}

/* 7 · Regentag (Plus): feiner Regen */
.cover-anim--regentag { background: linear-gradient(180deg, #3a4a5c 0%, #2a3949 55%, #1d2a38 100%); }
.cover-anim--regentag::before {
    background-image: linear-gradient(170deg, transparent 46%, rgba(190,215,235,.4) 49%, transparent 52%);
    background-size: 26px 90px;
    animation: ca-fallen 1.6s linear infinite !important;
}
.cover-anim--regentag::after {
    background-image: linear-gradient(170deg, transparent 47%, rgba(190,215,235,.25) 49%, transparent 51%);
    background-size: 38px 130px;
    animation: ca-fallen-sanft 2.6s linear infinite !important;
}

/* 8 · Polarlicht (Plus): wandernde Lichtbaender */
.cover-anim--polarlicht { background: linear-gradient(180deg, #04121f 0%, #072433 60%, #04121f 100%); }
.cover-anim--polarlicht::before {
    background: linear-gradient(100deg, transparent 15%, rgba(64,224,160,.28) 35%, rgba(90,160,255,.24) 55%, transparent 80%);
    background-size: 300% 100%;
    animation: ca-schimmer 11s ease-in-out infinite !important;
    filter: blur(6px);
}
.cover-anim--polarlicht::after {
    background-image: radial-gradient(1.4px 1.4px at 18% 30%, #fff 45%, transparent 60%),
                      radial-gradient(1px 1px at 62% 22%, rgba(255,255,255,.8) 45%, transparent 60%),
                      radial-gradient(1.2px 1.2px at 84% 60%, rgba(255,255,255,.7) 45%, transparent 60%);
    background-size: 240px 170px;
}

/* 9 · Sternschnuppen (Plus): Nachthimmel + Schnuppe */
.cover-anim--sternschnuppen { background: linear-gradient(200deg, #0b1026 0%, #141b3c 60%, #090d1f 100%); }
.cover-anim--sternschnuppen::before {
    background-image: radial-gradient(1.4px 1.4px at 15% 30%, #fff 45%, transparent 60%),
                      radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,.85) 45%, transparent 60%),
                      radial-gradient(1.6px 1.6px at 70% 55%, rgba(255,255,255,.9) 45%, transparent 60%),
                      radial-gradient(1px 1px at 88% 25%, rgba(255,255,255,.7) 45%, transparent 60%);
    background-size: 260px 190px;
    animation: ca-funkeln 4s ease-in-out infinite !important;
}
.cover-anim--sternschnuppen::after {
    background-image: linear-gradient(135deg, transparent 42%, rgba(255,255,255,.9) 49%, transparent 52%);
    background-size: 55px 55px;
    background-repeat: no-repeat;
    background-position: -80px -80px;
    animation: ca-schnuppe 7s ease-in infinite !important;
}
@keyframes ca-schnuppe {
    0%, 62%  { background-position: -80px -80px; opacity: 0; }
    66%      { opacity: 1; }
    78%      { background-position: 105% 115%; opacity: 0; }
    100%     { background-position: 105% 115%; opacity: 0; }
}

/* 10 · Wolkenzug (Plus): ziehende Wolken am Tageshimmel */
.cover-anim--wolkenzug { background: linear-gradient(180deg, #3f7cb5 0%, #2f5f92 60%, #24496f 100%); }
.cover-anim--wolkenzug::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='130'%3E%3Cg fill='%23ffffff' fill-opacity='.4'%3E%3Cellipse cx='60' cy='40' rx='34' ry='13'/%3E%3Cellipse cx='84' cy='33' rx='22' ry='10'/%3E%3Cellipse cx='190' cy='90' rx='28' ry='11'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 260px 130px;
    animation: ca-drift-rechts 24s linear infinite !important;
}
.cover-anim--wolkenzug::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Cg fill='%23ffffff' fill-opacity='.22'%3E%3Cellipse cx='150' cy='50' rx='40' ry='14'/%3E%3Cellipse cx='40' cy='110' rx='26' ry='10'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 300px 150px;
    animation: ca-drift-rechts 38s linear infinite !important;
}

/* 11 · Tiefsee-Leuchten (Pro): Plankton glimmt in der Tiefe */
.cover-anim--tiefsee-leuchten { background: linear-gradient(180deg, #03141f 0%, #041d2c 55%, #020c14 100%); }
.cover-anim--tiefsee-leuchten::before {
    background-image: radial-gradient(2px 2px at 22% 40%, rgba(80,255,220,.8) 40%, transparent 60%),
                      radial-gradient(1.4px 1.4px at 48% 70%, rgba(80,220,255,.7) 40%, transparent 60%),
                      radial-gradient(2.4px 2.4px at 72% 30%, rgba(120,255,200,.6) 40%, transparent 60%),
                      radial-gradient(1.2px 1.2px at 88% 80%, rgba(80,255,220,.6) 40%, transparent 60%);
    background-size: 230px 200px;
    animation: ca-funkeln 5s ease-in-out infinite !important;
}
.cover-anim--tiefsee-leuchten::after {
    background: linear-gradient(100deg, transparent 30%, rgba(90,200,255,.10) 50%, transparent 70%);
    background-size: 300% 100%;
    animation: ca-schimmer 14s ease-in-out infinite !important;
}

/* 12 · Sonnenaufgang (Pro): Farben wandern langsam */
.cover-anim--sonnenaufgang {
    background: linear-gradient(120deg, #2a1a4a 0%, #8a2f52 35%, #d96a3b 65%, #f2b24e 100%);
    background-size: 240% 240%;
    animation: ca-schimmer 16s ease-in-out infinite !important;
}
.cover-anim--sonnenaufgang::before {
    background: radial-gradient(45% 60% at 75% 85%, rgba(255,215,130,.5) 0%, transparent 70%);
    animation: ca-atmen 8s ease-in-out infinite !important;
}

/* 13 · Gluehwuermchen (Pro): warme Lichter im Dunkel */
.cover-anim--gluehwuermchen { background: linear-gradient(180deg, #101b10 0%, #162415 60%, #0a120a 100%); }
.cover-anim--gluehwuermchen::before {
    background-image: radial-gradient(2.4px 2.4px at 25% 60%, rgba(255,235,130,.9) 40%, transparent 60%),
                      radial-gradient(1.6px 1.6px at 55% 35%, rgba(255,225,120,.7) 40%, transparent 60%),
                      radial-gradient(2px 2px at 80% 70%, rgba(255,240,150,.8) 40%, transparent 60%);
    background-size: 210px 170px;
    animation: ca-funkeln 3.6s ease-in-out infinite !important;
}
.cover-anim--gluehwuermchen::after {
    background-image: radial-gradient(1.6px 1.6px at 40% 80%, rgba(255,235,130,.6) 40%, transparent 60%),
                      radial-gradient(1.2px 1.2px at 68% 20%, rgba(255,225,120,.5) 40%, transparent 60%);
    background-size: 260px 210px;
    animation: ca-drift-links 22s linear infinite !important;
}

/* 14 · Schmetterlinge (Pro): flatternde Silhouetten */
.cover-anim--schmetterlinge { background: linear-gradient(170deg, #3b6ea5 0%, #58a0b8 55%, #2d5a82 100%); }
.cover-anim--schmetterlinge::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160'%3E%3Cg fill='%23ffe1f0' fill-opacity='.7'%3E%3Cpath d='M40 40c-6-8-16-6-14 2 1 6 8 8 14 4 6 4 13 2 14-4 2-8-8-10-14-2z'/%3E%3Cpath d='M150 100c-5-6-12-5-11 1 1 5 6 6 11 3 5 3 10 2 11-3 1-6-6-7-11-1z' fill='%23fff0b8'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 220px 160px;
    animation: ca-drift-rechts 18s linear infinite !important;
}
.cover-anim--schmetterlinge::after {
    background: radial-gradient(45% 50% at 20% 20%, rgba(255,255,255,.18) 0%, transparent 70%);
    animation: ca-atmen 9s ease-in-out infinite !important;
}

/* 15 · Mondnacht (Pro): Mond, Sterne, ziehende Wolke */
.cover-anim--mondnacht {
    background:
        radial-gradient(46px 46px at 78% 26%, rgba(240,240,220,.95) 44%, rgba(240,240,220,.25) 52%, transparent 62%),
        linear-gradient(200deg, #101830 0%, #1a2445 60%, #0b1122 100%);
}
.cover-anim--mondnacht::before {
    background-image: radial-gradient(1.4px 1.4px at 15% 35%, #fff 45%, transparent 60%),
                      radial-gradient(1px 1px at 40% 20%, rgba(255,255,255,.8) 45%, transparent 60%),
                      radial-gradient(1.2px 1.2px at 60% 60%, rgba(255,255,255,.75) 45%, transparent 60%);
    background-size: 240px 180px;
    animation: ca-funkeln 5s ease-in-out infinite !important;
}
.cover-anim--mondnacht::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Cg fill='%23aab6d8' fill-opacity='.25'%3E%3Cellipse cx='90' cy='60' rx='36' ry='11'/%3E%3Cellipse cx='230' cy='110' rx='30' ry='10'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 300px 150px;
    animation: ca-drift-rechts 30s linear infinite !important;
}

/* 16 · Kirschbluete (Pro): rosa Regen aus Blueten */
.cover-anim--kirschbluete { background: linear-gradient(160deg, #7c3a5c 0%, #a75880 55%, #5c2a44 100%); }
.cover-anim--kirschbluete::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23ffd3e8' fill-opacity='.75'%3E%3Cellipse cx='30' cy='24' rx='4.5' ry='2.8' transform='rotate(25 30 24)'/%3E%3Cellipse cx='110' cy='70' rx='4' ry='2.4' transform='rotate(-35 110 70)'/%3E%3Cellipse cx='60' cy='140' rx='4.5' ry='2.8' transform='rotate(55 60 140)'/%3E%3Cellipse cx='150' cy='150' rx='3.6' ry='2.2' transform='rotate(-15 150 150)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: ca-fallen-sanft 10s linear infinite !important;
}
.cover-anim--kirschbluete::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230'%3E%3Cg fill='%23ffe6f2' fill-opacity='.5'%3E%3Cellipse cx='180' cy='40' rx='4' ry='2.4' transform='rotate(35 180 40)'/%3E%3Cellipse cx='80' cy='110' rx='3.4' ry='2' transform='rotate(-25 80 110)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 230px 230px;
    animation: ca-fallen 14s linear infinite !important;
}

/* 17 · Lagerfeuer (Pro): Glut steigt, warmes Leuchten */
.cover-anim--lagerfeuer { background: linear-gradient(180deg, #1c0f08 0%, #3a1708 55%, #120804 100%); }
.cover-anim--lagerfeuer::before {
    background-image: radial-gradient(2.4px 2.4px at 30% 85%, rgba(255,160,60,.9) 40%, transparent 60%),
                      radial-gradient(1.6px 1.6px at 55% 90%, rgba(255,120,40,.8) 40%, transparent 60%),
                      radial-gradient(2px 2px at 75% 80%, rgba(255,190,90,.7) 40%, transparent 60%);
    background-size: 190px 210px;
    animation: ca-steigen 6s linear infinite !important;
}
.cover-anim--lagerfeuer::after {
    background: radial-gradient(60% 55% at 50% 105%, rgba(255,120,40,.4) 0%, transparent 70%);
    animation: ca-atmen 4s ease-in-out infinite !important;
}

/* 18 · Nebelwald (Pro): Baeume im ziehenden Nebel */
.cover-anim--nebelwald {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120' preserveAspectRatio='none'%3E%3Cg fill='%23091510' fill-opacity='.85'%3E%3Cpath d='M20 120V70l10-18 10 18v50z'/%3E%3Cpath d='M70 120V60l12-22 12 22v60z'/%3E%3Cpath d='M150 120V75l9-16 9 16v45z'/%3E%3Cpath d='M210 120V55l13-24 13 24v65z'/%3E%3C/g%3E%3C/svg%3E") bottom / 260px 60% repeat-x,
        linear-gradient(180deg, #22372c 0%, #17271f 60%, #0d1712 100%);
}
.cover-anim--nebelwald::before {
    background: linear-gradient(90deg, transparent 10%, rgba(210,225,215,.16) 40%, transparent 65%, rgba(210,225,215,.12) 85%, transparent 100%);
    background-size: 300% 100%;
    animation: ca-schimmer 18s ease-in-out infinite !important;
    filter: blur(4px);
}

/* 19 · Ozeanwellen (Pro): zwei Wellenzuege laufen versetzt */
.cover-anim--ozeanwellen { background: linear-gradient(180deg, #0d4f6e 0%, #0a3a55 60%, #072a40 100%); }
.cover-anim--ozeanwellen::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='60' preserveAspectRatio='none'%3E%3Cpath d='M0 30q40-22 80 0t80 0 80 0 80 0v30H0z' fill='%237fd4ff' fill-opacity='.28'/%3E%3C/svg%3E") bottom / 320px 42px repeat-x;
    animation: ca-wogen 8s linear infinite !important;
}
.cover-anim--ozeanwellen::after {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='50' preserveAspectRatio='none'%3E%3Cpath d='M0 25q35-18 70 0t70 0 70 0 70 0v25H0z' fill='%23bfe9ff' fill-opacity='.2'/%3E%3C/svg%3E") bottom / 280px 30px repeat-x;
    animation: ca-wogen 5.5s linear infinite reverse !important;
}

/* 20 · Sternenstaub (Pro): feiner Glitzer treibt diagonal */
.cover-anim--sternenstaub { background: linear-gradient(150deg, #241436 0%, #3a1e55 55%, #170d24 100%); }
.cover-anim--sternenstaub::before {
    background-image: radial-gradient(1.2px 1.2px at 18% 30%, rgba(255,240,255,.9) 45%, transparent 60%),
                      radial-gradient(1px 1px at 42% 65%, rgba(230,200,255,.8) 45%, transparent 60%),
                      radial-gradient(1.4px 1.4px at 66% 25%, rgba(255,255,255,.85) 45%, transparent 60%),
                      radial-gradient(1px 1px at 85% 70%, rgba(230,200,255,.7) 45%, transparent 60%);
    background-size: 180px 160px;
    animation: ca-fallen-sanft 16s linear infinite !important;
}
.cover-anim--sternenstaub::after {
    background-image: radial-gradient(1px 1px at 30% 45%, rgba(255,255,255,.6) 45%, transparent 60%),
                      radial-gradient(1.2px 1.2px at 74% 55%, rgba(230,200,255,.55) 45%, transparent 60%);
    background-size: 240px 200px;
    animation: ca-funkeln 4.5s ease-in-out infinite !important;
}

/* Profil-Zitat (Pro): mittig auf dem Cover, sanft eingeblendet */
.uprofile__zitat {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px clamp(16px, 8vw, 90px);
    font-size: clamp(1rem, 2.6vw, 1.5rem);
    line-height: 1.45;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.5);
    animation: zitat-einblenden 2.4s ease-out both !important;
    pointer-events: none;
}
@keyframes zitat-einblenden {
    from { opacity: 0; transform: translateY(10px); letter-spacing: .06em; }
    to   { opacity: 1; transform: translateY(0);    letter-spacing: normal; }
}

/* Editor: animierte Hintergruende + Zitat */
.avm__animcover-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.avm__animcover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 7px;
    cursor: pointer;
    color: var(--c-text-muted);
}
.avm__animcover:hover:not(:disabled) { border-color: var(--c-accent-dim); color: var(--c-text); }
.avm__animcover.is-selected { border-color: var(--c-accent); color: var(--c-text); }
.avm__animcover:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.avm__animcover.is-locked { opacity: .38; cursor: not-allowed; filter: saturate(.6); }
.avm__animcover-demo {
    width: 74px;
    height: 44px;
    border-radius: 8px;
    display: block;
}
.avm__animcover-name { font-size: .68rem; line-height: 1.2; max-width: 78px; text-align: center; }
.avm__zitat-input {
    width: 100%;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    color: var(--c-text);
    padding: 10px 12px;
    font-size: .92rem;
    margin-bottom: 10px;
}
.avm__zitat-input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.avm__zitatfont-row { display: flex; flex-wrap: wrap; gap: 8px; }
.avm__zitatfont-btn {
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    color: var(--c-text);
    padding: 6px 14px;
    font-size: .9rem;
    cursor: pointer;
}
.avm__zitatfont-btn:hover { border-color: var(--c-accent-dim); }
.avm__zitatfont-btn.is-selected { border-color: var(--c-accent); color: var(--c-accent); }
.avm__zitatfont-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Premium-Animationen AUS, wenn der In-App-Schalter "Reduzierte
   Animationen" aktiv ist (die OS-Einstellung stoppt sie bewusst NICHT,
   Besitzer-Regel 24.07.2026). */
body.malu-reduced-motion .avatar--rahmen-puls { animation: none !important; box-shadow: 0 0 0 2px var(--c-accent) !important; }
body.malu-reduced-motion .avatar--rahmen-orbit::after,
body.malu-reduced-motion .cover-anim,
body.malu-reduced-motion .cover-anim::before,
body.malu-reduced-motion .cover-anim::after,
body.malu-reduced-motion .uprofile__zitat { animation: none !important; }

/* Header-Icon + Konto-Menüeintrag „MALU Plus" */
.dash-dtop__icon-btn--plus:hover { color: var(--c-warn); }
.dash-account__item--plus { color: var(--c-accent); }
.dash-account__item--plus svg { color: var(--c-accent); }

/* Sehr schmale Spalten (Karten im Dashboard-Mittelteil) sauber stapeln */
@media (max-width: 720px) {
    .plus-grid { grid-template-columns: 1fr; }
}

/* Rechtliche Seiten */
.legal-body {
    color: var(--c-text-muted);
    line-height: 1.75;
}
.legal-body h2 {
    color: var(--c-text);
    font-size: 1.2rem;
    margin: var(--space-6) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
}
.legal-body h2:first-of-type { border-top: 0; margin-top: var(--space-4); }
.legal-body p  { margin-bottom: var(--space-3); }
.legal-body ul { padding-left: var(--space-5); margin-bottom: var(--space-3); }
.legal-body li { margin-bottom: var(--space-2); }
.legal-body a  { color: var(--c-accent); }
.legal-hint {
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-top: var(--space-6);
    font-size: .9rem;
    color: #e0c070;
}

/* =====================================================================
   PHASE 3 – Profile, Avatar, Tabs, Icon-/Farb-Picker
   ===================================================================== */

/* Schmaler Inhaltscontainer + generische Seitentitel (auch für spätere Seiten) */
.container--narrow { max-width: 640px; }
.page-title { font-size: clamp(1.5rem, 4vw, 2rem); }
.page-lead  { color: var(--c-text-muted); margin-bottom: var(--space-5); }
.notice--info { background: var(--c-blue-soft); border-color: rgba(109,211,255,0.25); color: var(--c-accent); }

/* Avatar (Icon auf Farbkreis, Initialen-Fallback) */
.avatar {
    width: var(--avatar-size, 96px);
    height: var(--avatar-size, 96px);
    border-radius: 50%;
    background: var(--avatar-bg, var(--c-accent));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
}
.avatar svg { width: 58%; height: 58%; }
.avatar__initial { font-weight: 700; font-size: calc(var(--avatar-size, 96px) * .42); line-height: 1; }

/* Profil-Kopf */
.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}
.profile-header__name {
    font-size: 1.6rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.profile-header__meta { color: var(--c-text-muted); margin: var(--space-2) 0 0; }
.profile-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4) var(--space-5);
    padding: 0;
    margin: var(--space-4) 0 0;
    color: var(--c-text-muted);
    font-size: .95rem;
}
.profile-stats strong { display: block; color: var(--c-text); font-size: 1.05rem; }

/* Badge-Chips */
.badge-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--c-blue-soft);
    color: var(--c-accent);
    font-size: .8rem;
    font-weight: 600;
}
.badge-chip--plus { background: var(--c-gradient-purple); color: #fff; }

/* Tabs */
.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--c-border);
    margin-bottom: var(--space-5);
    overflow-x: auto;
}
.tabs__link {
    padding: var(--space-3) var(--space-4);
    color: var(--c-text-muted);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.tabs__link:hover { color: var(--c-text); text-decoration: none; }
.tabs__link.is-active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.tab-panel__title { font-size: 1.25rem; }
.profile-bio { color: var(--c-text); }
.empty-state {
    color: var(--c-text-muted);
    background: var(--c-bg);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-5);
    text-align: center;
}
.badge-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.badge-list__item { display: flex; align-items: center; gap: var(--space-3); }
.badge-list__desc { color: var(--c-text-muted); font-size: .92rem; }

/* Picker (Icon + Farbe) */
.form-fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.form-fieldset > .form-label { margin-bottom: var(--space-3); }

.picker { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.icon-tile { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; text-align: center; }
.icon-tile input,
.color-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.icon-tile__visual {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-surface-2);
    color: var(--c-text);
    border: 3px solid transparent;
}
.icon-tile__visual svg { width: 58%; height: 58%; }
.icon-tile__visual--none { background: var(--c-bg); color: var(--c-text-muted); border: 1px dashed var(--c-border); }
.icon-tile__label { font-size: .78rem; color: var(--c-text-muted); }
.icon-tile:has(input:checked) .icon-tile__visual { border-color: var(--c-accent); box-shadow: var(--focus-ring); }
.icon-tile:has(input:focus-visible) .icon-tile__visual { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.icon-tile:has(input:checked) .icon-tile__label { color: var(--c-text); font-weight: 600; }

.color-swatch { cursor: pointer; position: relative; }
.color-swatch__dot {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: block;
    border: 3px solid transparent;
    box-shadow: inset 0 0 0 1px var(--hairline);
}
.color-swatch__dot--none { background: repeating-linear-gradient(45deg, var(--c-surface-2), var(--c-surface-2) 5px, var(--c-border) 5px, var(--c-border) 10px); }
.color-swatch:has(input:checked) .color-swatch__dot { border-color: var(--c-text); box-shadow: var(--focus-ring); }
.color-swatch:has(input:focus-visible) .color-swatch__dot { outline: 3px solid var(--c-accent); outline-offset: 2px; }

@media (min-width: 680px) {
    .profile-header { flex-direction: row; text-align: left; }
    .profile-header__main { flex: 1; }
    .profile-header__name,
    .profile-stats { justify-content: flex-start; }
}

/* =====================================================================
   PHASE 4 – Housekeeping & 2FA
   ===================================================================== */
.site-nav__link--hk { color: var(--c-accent); font-weight: 700; }

.hk-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}
.hk-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-bottom: var(--space-6); }
.hk-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}
.hk-card__title { font-size: 1.1rem; margin-bottom: var(--space-3); }
.hk-muted { color: var(--c-text-muted); margin: var(--space-3) 0 var(--space-1); font-size: .9rem; }
.hk-perms { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hk-perms code { font-size: .8rem; }
.hk-section-title { font-size: 1.25rem; margin-bottom: var(--space-2); }
.hk-modules {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.hk-module {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
}
.hk-module.is-disabled { opacity: .7; }
.hk-module__name { font-weight: 600; color: var(--c-text); }
.hk-module__tag { font-size: .72rem; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: .05em; }

.totp-setup { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; margin: var(--space-4) 0 var(--space-5); }
.totp-setup__qr { width: 200px; height: 200px; flex: none; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 8px; }
.totp-setup__qr svg { width: 100%; height: 100%; display: block; }
.totp-setup__manual { flex: 1; min-width: 180px; }
.totp-secret {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.1rem;
    letter-spacing: .08em;
    word-break: break-all;
    background: var(--c-bg);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
}

@media (min-width: 680px) {
    .hk-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   PHASE 5 – Hilfsangebote, Filter (Drawer), Suche
   ===================================================================== */
.support-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.support-count { margin: 0; color: var(--c-text-muted); }
.filter-count { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--c-accent); color: #0f0f10; font-size: .75rem; align-items: center; justify-content: center; }

.support-layout { position: relative; }

/* Filter – mobil als Drawer (von rechts), Ergebnisse bleiben darunter sichtbar */
.support-filters {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 80;
    width: min(360px, 90vw);
    background: var(--c-surface);
    box-shadow: -8px 0 24px rgba(0,0,0,0.5);
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.support-filters.is-open { transform: translateX(0); }
.support-filters form { display: flex; flex-direction: column; height: 100%; }
.support-filters__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--c-border); }
.support-filters__title { margin: 0; font-size: 1.1rem; }
.support-filters__body { padding: var(--space-4) var(--space-5); overflow-y: auto; flex: 1; }
.support-filters__foot { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--c-border); }
.support-filters__foot .btn { flex: 1; }
.filter-close { background: none; border: 0; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--c-text-muted); width: 40px; height: 40px; }
.filter-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 70; border: 0; }

.form-check { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); cursor: pointer; }
.form-check input { width: 18px; height: 18px; }

/* Ergebnis-Karten */
.service-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.service-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.service-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.service-card__name { font-size: 1.15rem; margin: 0 0 var(--space-1); }
.service-card__place { color: var(--c-text-muted); margin: 0 0 var(--space-2); font-size: .92rem; }
.service-card__desc { color: var(--c-text); margin: 0 0 var(--space-3); font-size: .95rem; }
.service-card__rating { color: #e6b800; font-weight: 600; white-space: nowrap; font-size: .92rem; }
.service-card__rating-count { color: var(--c-text-muted); font-weight: 400; }
.service-card__tags, .service-detail__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tag { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-muted); font-size: .78rem; }
.tag--link:hover { background: var(--c-accent-glow); color: var(--c-accent); text-decoration: none; border-color: rgba(109,211,255,0.35); }

/* Status-Badges (Ampel) */
.status-badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 600; }
.status-badge--ok     { background: rgba(67,233,123,0.12); color: #43e97b; }
.status-badge--warn   { background: rgba(255,167,38,0.12); color: #ffa726; }
.status-badge--danger { background: rgba(244,67,54,0.12); color: var(--c-danger); }
.status-badge--muted  { background: var(--c-surface-2); color: var(--c-text-muted); }

/* Detailseite */
.back-link { margin-bottom: var(--space-4); }
.service-detail { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-6); }
.service-detail__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.service-detail__name { margin: 0 0 var(--space-3); }
.service-detail__desc { color: var(--c-text); margin: var(--space-4) 0; }
.service-detail__grid { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.info-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); }
.info-row__label { color: var(--c-text-muted); font-weight: 600; font-size: .9rem; }
.service-detail__subtitle { font-size: 1.2rem; margin: var(--space-5) 0 var(--space-3); }
.opening-hours { list-style: none; padding: 0; margin: 0; }
.opening-hours li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 6px 0; border-bottom: 1px solid var(--c-border); }

/* Suche */
.search--page { max-width: 640px; margin: var(--space-4) 0 var(--space-6); }
.search-group__title { font-size: 1.2rem; margin: var(--space-6) 0 var(--space-3); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.search-users { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (min-width: 680px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: Filter als feste Sidebar, kein Drawer/Backdrop */
@media (min-width: 920px) {
    .support-toolbar .filter-toggle { display: none; }
    .support-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-5); align-items: start; }
    .support-filters {
        position: static;
        transform: none;
        width: auto;
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--c-border);
        border-radius: var(--radius);
    }
    .filter-close { display: none; }
    .filter-backdrop { display: none !important; }
}

/* ============================================================
   15. Dashboard (Phase 3)
   Desktop: Linke Sidebar (260px) + Hauptinhalt + Rechte Sidebar (300px)
   Mobil:   Topbar (52px) + Inhalt + Bottom-Navigation (64px)
   ============================================================ */

/* --- Basis ------------------------------------------------- */
.dash-body { min-height: 100vh; background: var(--c-bg); }

/* --- Linke Sidebar ----------------------------------------- */
.dash-sidebar {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 300px;
    height: 100vh;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    flex-direction: column;
    z-index: 80;
}
.dash-sidebar__brand {
    display: flex;
    align-items: center;
    padding: 20px 20px 14px;
    border-bottom: 1px solid var(--c-border);
}
.dash-brand-logo {
    font-family: var(--ff-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--c-accent);
    text-decoration: none;
    letter-spacing: -.04em;
}
.dash-sidebar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--c-border);
}
.dash-username-text {
    font-size: .88rem;
    color: var(--c-text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-sidebar__nav {
    flex: 1;
    padding: 10px 10px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-sidebar__foot {
    padding: 6px 10px 12px;
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Nav-Items */
.dash-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    transition: background var(--t-fast), color var(--t-fast);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    line-height: 1.4;
}
.dash-nav__item:hover { background: var(--c-glass); color: var(--c-text); }
.dash-nav__item--active,
.dash-nav__item--active:hover { background: var(--c-accent-glow); color: var(--c-accent); }
.dash-nav__item--soon { cursor: default; opacity: .45; pointer-events: none; }
.dash-nav__badge-soon {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    color: var(--c-text-dim);
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
}
.dash-nav__icon { width: 19px; height: 19px; flex-shrink: 0; }
.dash-nav__separator { height: 1px; background: var(--c-border); margin: 6px 2px; }
.dash-nav__item--danger { color: #ef9a9a; }
.dash-nav__item--danger:hover { background: rgba(239,83,80,.1); color: var(--c-danger); }

/* --- Avatar ----------------------------------------------- */
.dash-avatar {
    border-radius: 50%;
    background: var(--c-surface-2);
    border: 2.5px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--c-text-muted);
    flex-shrink: 0;
    overflow: hidden;
    text-transform: uppercase;
    text-decoration: none;
    font-size: .85rem;
    box-sizing: border-box;          /* dicker Rand frisst nicht über die Größe hinaus */
}
.dash-avatar--sm { width: 32px; height: 32px; font-size: .8rem; }
.dash-avatar--md { width: 44px; height: 44px; font-size: 1.05rem; }
.dash-avatar--lg { width: 64px; height: 64px; font-size: 1.4rem; }
/* Icon-Bilder im Avatar wie die Standard-Icons darstellen: zentriert,
   gleiche Größe wie Inline-SVGs (58 %), nicht randfüllend/beschnitten. */
.dash-avatar img { width: 58%; height: 58%; object-fit: contain; }
.dash-avatar svg { width: 58%; height: 58%; }

/* --- Hauptlayout ------------------------------------------ */
.dash-layout {
    min-height: 100vh;
    padding-top: 52px;
    padding-bottom: 68px;
}
.dash-main {
    padding: var(--space-4) var(--space-4);
    max-width: 680px;
    margin: 0 auto;
}
.dash-right { display: none; }

/* --- Dashboard-Karten ------------------------------------- */
.dash-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

/* --- Willkommen ------------------------------------------- */
.dash-welcome {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--c-border);
}
.dash-welcome__name {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.25;
    color: var(--c-text);
}
.dash-welcome__slogan { margin: 0; color: var(--c-text-muted); font-size: .93rem; }

/* --- Beitrag erstellen ------------------------------------ */
.dash-post-create { position: relative; overflow: hidden; }
.dash-post-create__top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--space-3);
}
.dash-post-create__field {
    width: 100%;
    min-height: 72px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    color: var(--c-text-muted);
    font-size: .93rem;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
}
.dash-post-create__field:disabled { opacity: .35; cursor: not-allowed; }
.dash-post-create__hint { font-size: .78rem; color: var(--c-text-dim); margin: 0 0 var(--space-3); }
.dash-post-create__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.dash-post-create__char { font-size: .78rem; color: var(--c-text-dim); }
.dash-soon-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15,15,16,.72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--radius);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.dash-soon-overlay__label {
    font-size: .82rem;
    font-weight: 700;
    color: var(--c-text-muted);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    padding: 4px 14px;
    letter-spacing: .02em;
}
.dash-soon-overlay__desc { font-size: .78rem; color: var(--c-text-dim); text-align: center; }

/* --- Feed leer -------------------------------------------- */
.dash-feed-empty {
    text-align: center;
    padding: var(--space-7) var(--space-4);
    border-style: dashed;
}
.dash-feed-empty__icon {
    width: 44px; height: 44px;
    margin: 0 auto var(--space-4);
    color: var(--c-text-dim);
    opacity: .35;
}
.dash-feed-empty__title { font-size: 1rem; font-weight: 600; color: var(--c-text); margin: 0 0 var(--space-2); }
.dash-feed-empty__text {
    font-size: .88rem;
    color: var(--c-text-muted);
    margin: 0 auto;
    max-width: 300px;
    line-height: 1.6;
}

/* --- Rechte Sidebar / Widgets ----------------------------- */
.dash-widget {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.dash-widget__title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--c-text-dim);
    margin: 0 0 var(--space-3);
}
.dash-widget-profile__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-3); }
.dash-widget-profile__name { font-weight: 700; font-size: .93rem; margin: 0 0 2px; color: var(--c-text); }
.dash-widget-profile__handle { font-size: .78rem; color: var(--c-text-dim); margin: 0; }
.dash-widget-profile__bio {
    font-size: .87rem;
    color: var(--c-text-muted);
    margin: 0 0 var(--space-3);
    line-height: 1.55;
}
.dash-widget-profile__bio--empty { font-style: italic; }
.dash-widget-profile__link { font-size: .85rem; color: var(--c-accent); text-decoration: none; font-weight: 500; }
.dash-widget-profile__link:hover { text-decoration: underline; }

.dash-update-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--c-border);
    font-size: .86rem;
}
.dash-update-row:last-child { border-bottom: none; padding-bottom: 0; }
.dash-update-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.dash-update-dot--live    { background: var(--c-success); }
.dash-update-dot--soon    { background: #ffa726; }
.dash-update-dot--planned { background: var(--c-text-dim); }
.dash-update-text { color: var(--c-text-muted); line-height: 1.45; }

.dash-safety__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--c-text-dim);
    margin: 0 0 var(--space-3);
}
.dash-safety { font-size: .86rem; color: var(--c-text-muted); line-height: 1.7; margin: 0; }
.dash-safety__number { color: var(--c-accent); font-weight: 700; font-size: .9rem; }

/* --- Sidebar Profil-Block --------------------------------- */
.dash-sidebar__profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--c-border);
    text-align: center;
}
.dash-sidebar__avatar-link {
    display: block;
    margin-bottom: 12px;
    border-radius: 50%;
    transition: opacity .15s;
}
.dash-sidebar__avatar-link:hover { opacity: .85; }
.dash-avatar--xl { width: 88px; height: 88px; font-size: 2rem; }
.dash-sidebar__uname {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 2px;
    line-height: 1.2;
}
.dash-sidebar__uhandle {
    font-size: .82rem;
    color: var(--c-text-muted);
    margin: 0 0 6px;
}
.dash-sidebar__bio {
    font-size: .8rem;
    color: var(--c-text-muted);
    margin: 0 0 10px;
    line-height: 1.4;
    max-width: 200px;
    word-break: break-word;
}
.dash-sidebar__stats {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    width: 100%;
    margin-top: 10px;
    margin-bottom: 2px;
}
.dash-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 4px;
    border-right: 1px solid var(--c-border);
    cursor: default;
}
.dash-stat:last-child { border-right: none; }
.dash-stat__num {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text);
    line-height: 1.1;
}
.dash-stat__label {
    font-size: .65rem;
    color: var(--c-text-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 2px;
}

/* --- Discovery / Themen-Karten ---------------------------- */
.dash-discover {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.dash-disc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 14px 14px;
    border-radius: var(--radius);
    min-height: 110px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    transition: transform .2s, box-shadow .2s;
    cursor: pointer;
    border: none;
}
.dash-disc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
    text-decoration: none;
    color: #fff;
}
.dash-disc-card--soon { opacity: .7; cursor: default; pointer-events: none; }
.dash-disc-card--soon:hover { transform: none; box-shadow: none; }

/* Gradient-Hintergründe */
.dash-disc-card--rose   { background: linear-gradient(135deg,#f093fb 0%,#f5576c 100%); }
.dash-disc-card--blue   { background: linear-gradient(135deg,#4facfe 0%,#00f2fe 100%); }
.dash-disc-card--purple { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); }
.dash-disc-card--green  { background: linear-gradient(135deg,#43e97b 0%,#38f9d7 100%); }

/* Shimmer-Overlay */
.dash-disc-card__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,var(--hairline-strong) 0%,transparent 50%,var(--hairline-strong) 100%);
    background-size: 200% 200%;
    z-index: 0;
    transition: opacity .2s;
}
.dash-disc-card:hover .dash-disc-card__bg {
    animation: disc-shimmer 1.4s infinite;
}
@keyframes disc-shimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Decorative circle */
.dash-disc-card::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,.15);
    border-radius: 50%;
    z-index: 0;
    transition: transform .3s;
}
.dash-disc-card:hover::before { transform: scale(1.3); }

.dash-disc-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: rgba(0,0,0,.25);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    z-index: 2;
}
.dash-disc-card__icon {
    position: relative;
    z-index: 2;
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    opacity: .9;
    display: block;
}
.dash-disc-card__icon svg { width: 100%; height: 100%; }
.dash-disc-card__title {
    position: relative;
    z-index: 2;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 2px;
    text-shadow: 0 1px 4px rgba(0,0,0,.18);
    display: block;
    line-height: 1.2;
}
.dash-disc-card__sub {
    position: relative;
    z-index: 2;
    font-size: .75rem;
    color: rgba(255,255,255,.88);
    display: block;
    line-height: 1.3;
}

/* --- Desktop (≥768px) ------------------------------------- */
@media (min-width: 768px) {

    /* Shell bildet das Spalten-Grid: linke Sidebar 300px | Rest flexibel.
       Kein enger max-width-Cap mehr – die Oberfläche nutzt die volle Breite
       (Sidebars docken links/rechts an). Erst jenseits sehr breiter Monitore
       (> 2560px) wird zentriert, damit der Feed nicht endlos auseinanderläuft. */
    .dash-shell {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        align-items: start;
        max-width: 2560px;
        margin-inline: auto;
        min-height: 100vh;
    }

    /* Variante ohne linke Sidebar (Chat / fremdes Profil): eine Inhaltsspalte. */
    .dash-shell--solo { grid-template-columns: minmax(0, 1fr); }
    .dash-shell--solo .dash-sidebar { display: none; }
    /* Sidebar: sticky statt fixed, damit sie im Grid-Fluss bleibt
       und nicht aus dem zentrierten Container herausfällt.      */
    .dash-sidebar {
        display: flex;
        position: sticky;
        top: 0;
        left: auto;
        width: auto;
        height: 100vh;
    }
    .dash-layout {
        margin-left: 0;
        min-width: 0;
        padding: 0;
        min-height: 100vh;
    }
    .dash-main {
        padding: var(--space-6) var(--space-5);
        max-width: none;
        margin: 0;
    }
}

/* --- Dreispaltig (≥1100px) -------------------------------- */
/* Innerhalb der zweiten Shell-Spalte: Hauptbereich flexibel | Rechte Sidebar 300px */
@media (min-width: 1100px) {
    .dash-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }
    /* Wenn rechte Sidebar fehlt (z. B. Chat), darf kein leerer 320px-Slot stehen. */
    .dash-layout--no-right { grid-template-columns: minmax(0, 1fr); }
    .dash-main { min-width: 0; margin: 0; max-width: none; padding: var(--space-6); }
    .dash-right {
        display: block;
        width: auto;
        padding: var(--space-6) var(--space-5) var(--space-6) 0;
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* --- Tablet (768–1099px) ---------------------------------- */
/* Linke Sidebar kompakter; rechter Bereich wandert unter den Hauptbereich
   (die zweispaltige .dash-layout-Grid greift erst ab 1100px). */
@media (min-width: 768px) and (max-width: 1099px) {
    .dash-shell { grid-template-columns: 248px minmax(0, 1fr); }
    .dash-shell--solo { grid-template-columns: minmax(0, 1fr); }

    .dash-right {
        display: block;
        width: auto;
        padding: 0 var(--space-5) var(--space-6);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
        align-items: start;
    }
}

/* =================================================================
   SECTION 16 – Avatar-Editor Modal, Badges, Bio-Sidebar
   ================================================================= */

/* Profil-Icon im Avatar.

   Frueher stand hier ein Filter, der jedes Icon auf Weiss zwang. Noetig war
   das, weil die Icons als <img> eingebunden waren: darin ist das SVG ein
   eigenes Dokument, sein stroke="currentColor" konnte die Farbe der Seite
   nicht sehen und wurde schwarz. Die gewaehlte Kreisfarbe erreichte das Icon
   deshalb nie.

   Jetzt sind die Icons eingebettet (avatar_icon() in den Ansichten) und
   nehmen --icon-farbe an. Die setzen die Ansichten inline, sobald der Nutzer
   eine Kreisfarbe gewaehlt hat. Ohne Wahl bleibt es weiss wie bisher.

   display:contents, damit der Wrapper kein Kaestchen aufmacht und die
   Groessenregel .dash-avatar svg unveraendert weiter greift. */
.avatar-icon { display: contents; color: var(--icon-farbe, #fff); }

/* Standardgroesse fuer JEDES Icon aus dem Baukasten (icon('name') vergibt die
   Klasse "ic"). :where() hat Spezifitaet 0, also gewinnt jede echte CSS-Regel
   der Umgebung (z. B. .m-tab__icon oder .dash-topic-link__icon svg). Nur wo
   nichts eine Groesse setzt, greift dieser Rueckfall, statt dass das Icon in
   voller SVG-Standardgroesse riesig wird. */
:where(svg.ic) { width: 1.2em; height: 1.2em; flex: 0 0 auto; }

/* ---- Avatar-Button in der Sidebar -------------------------------- */
.dash-sidebar__avatar-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dash-sidebar__avatar-edit {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--c-accent);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.dash-sidebar__avatar-btn:hover .dash-sidebar__avatar-edit,
.dash-sidebar__avatar-btn:focus-visible .dash-sidebar__avatar-edit { opacity: 1; }

/* ---- Badges ------------------------------------------------------ */
.dash-sidebar__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 5px;
}
.badge-chip {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: var(--c-accent);
    color: #000;
    cursor: default;
    user-select: none;
    text-transform: uppercase;
}

/* ---- Bio in der Sidebar ------------------------------------------ */
.dash-sidebar__bio { font-size: .78rem; color: var(--c-text-muted); text-align: center; margin-top: 4px; }
.dash-sidebar__bio--empty { display: none; }

/* ---- Modal Backdrop ---------------------------------------------- */
.avm-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 900;
}
.avm-backdrop.is-open { display: block; }

/* ---- Modal ------------------------------------------------------- */
.avm {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 901;
    overflow-y: auto;
    padding: 20px 12px 40px;
}
.avm.is-open { display: flex; align-items: flex-start; justify-content: center; }

.avm__panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 440px;
    padding: 22px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: auto;
    box-shadow: var(--shadow-modal);
}

/* Header */
.avm__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.avm__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0;
}
.avm__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-muted);
    padding: 5px;
    display: flex;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
    line-height: 1;
}
.avm__close:hover { background: var(--c-border); color: var(--c-text); }

/* Live-Vorschau */
.avm__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}
.avm__preview-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 4px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    transition: background .25s, border-color .25s;
    background: var(--c-surface-2);
}
.avm__preview-avatar span { color: #fff; font-size: 1.8rem; font-weight: 700; }
.avm__preview-avatar .avm__icon-svg {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.avm__preview-avatar .avm__icon-svg svg { width: 100%; height: 100%; }
.avm__preview-handle {
    font-size: .78rem;
    color: var(--c-text-muted);
    margin: 0;
}

/* Sections */
.avm__section {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.avm__section-title {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--c-text-muted);
    margin: 0;
    display: block;
}

/* Icon-Raster */
.avm__icon-grid {
    display: grid;
    /* minmax(0,1fr) statt 1fr: verhindert, dass Icon-Inhalte die Spalten breiter
       als den Container ziehen (sonst wird die letzte Spalte abgeschnitten). */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
}
.avm__icon-btn {
    background: var(--c-bg);
    border: 1.5px solid var(--c-border);
    border-radius: var(--radius-md);
    aspect-ratio: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, background .15s;
    padding: 7px;
    color: var(--c-text-muted);
}
.avm__icon-btn:hover { border-color: var(--c-accent); background: rgba(109,211,255,.05); }
.avm__icon-btn.is-selected {
    border-color: var(--c-accent);
    background: rgba(109,211,255,.12);
    color: var(--c-accent);
}
.avm__icon-btn .avm__icon-svg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.avm__icon-btn .avm__icon-svg svg { width: 100%; height: 100%; }
.avm__icon-none { font-size: 1rem; line-height: 1; }

/* Farb-Swatches */
.avm__swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.avm__swatch {
    background: none;
    border: 2.5px solid transparent;
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    transition: border-color .15s;
    line-height: 0;
}
.avm__swatch:hover { border-color: rgba(109,211,255,.5); }
.avm__swatch.is-selected { border-color: var(--c-accent); }
.avm__swatch-dot { width: 28px; height: 28px; border-radius: 50%; display: block; }
.avm__swatch-dot--none {
    background: var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-muted);
    font-size: .85rem;
    font-weight: 600;
}

/* Gradient-Swatches */
.avm__grad-row { display: flex; flex-wrap: wrap; gap: 8px; }
.avm__grad-swatch {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
}
.avm__grad-swatch:hover { transform: scale(1.08); }
.avm__grad-swatch.is-selected { border-color: #fff; box-shadow: 0 0 0 2px var(--c-accent); }

/* Bio-Feld */
.avm__bio-field {
    width: 100%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    padding: 9px 12px;
    font-size: .88rem;
    font-family: inherit;
    resize: vertical;
    min-height: 76px;
    transition: border-color .15s;
    box-sizing: border-box;
}
.avm__bio-field:focus { border-color: var(--c-accent); outline: none; }
.avm__bio-hint {
    font-size: .7rem;
    color: var(--c-text-muted);
    margin: 0;
    text-align: right;
}

/* Footer */
.avm__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 2px;
}
.avm__status {
    font-size: .78rem;
    color: var(--c-text-muted);
    min-height: 1.2em;
    margin: 0;
    flex: 1;
}
.avm__foot-btns { display: flex; gap: 8px; flex-shrink: 0; }

@media (max-width: 480px) {
    /* Auf allen Handys 5 Icons pro Zeile (größere Touch-Ziele, sicher im Fenster). */
    .avm__icon-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .avm__panel { padding: 18px 14px 20px; }
}

/* =====================================================================
   17 – Dashboard Redesign: Compose, Feed, Section Headers, Suggestions
   ===================================================================== */

/* Sektion-Header */
.dash-section-header {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin: 0 0 14px;
    padding: 0;
}

/* Welcome */
.dash-welcome__name span { color: var(--c-accent); }

/* ── Compose Card ─────────────────────────────────────────────────── */
.dash-compose {
    position: relative;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 18px 20px 16px;
    margin-bottom: 28px;
    overflow: hidden;
}
.dash-compose__top {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.dash-compose__avatar { flex-shrink: 0; }
.dash-compose__field {
    flex: 1;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-text);
    font-family: inherit;
    font-size: .92rem;
    line-height: 1.55;
    padding: 10px 14px;
    resize: vertical;
    width: 100%;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.dash-compose__field::placeholder { color: var(--c-text-muted); }
.dash-compose__field:focus {
    border-color: var(--c-accent);
    box-shadow: var(--focus-ring);
}

/* Live-Hervorhebung: Spiegel-Ebene hinter dem Textfeld. Muss exakt die gleichen
   Textmaße wie .dash-compose__field haben (Schrift, Zeilenhöhe, Padding, Rahmen),
   damit Buchstaben deckungsgleich liegen. */
.dash-compose__editor { position: relative; flex: 1; min-width: 0; }
/* Das Textfeld MUSS über der Spiegel-Ebene zeichnen (position + z-index):
   die Spiegel-Ebene ist absolut positioniert und malt sonst – unabhängig von
   der DOM-Reihenfolge – mit ihrem deckenden Hintergrund ÜBER das Feld.
   Folge war: der Schreib-Cursor lag verdeckt darunter und war auf Desktop,
   Tablet und Handy unsichtbar. */
.dash-compose__editor .dash-compose__field { display: block; position: relative; z-index: 1; }
.dash-compose__highlights {
    position: absolute; inset: 0;
    margin: 0; padding: 10px 14px;
    border: 1px solid transparent; border-radius: var(--radius-md);
    background: var(--c-bg);
    box-sizing: border-box;
    font-family: inherit; font-size: .92rem; line-height: 1.55;
    color: var(--c-text);
    white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
    overflow: hidden; pointer-events: none;
}
.dash-compose__highlights .compose-hl-tag     { color: var(--c-hashtag); font-weight: 600; }
.dash-compose__highlights .compose-hl-mention { color: var(--c-accent);  font-weight: 600; }
/* Aktiv (JS vorhanden): Textfeld transparent, Spiegel zeigt die Farben; Cursor bleibt sichtbar.
   WICHTIG: Text über -webkit-text-fill-color unsichtbar machen, NICHT über color –
   WebKit (iPhone/iPad/Safari) zeichnet den Schreib-Cursor sonst transparent mit
   und er verschwindet. color bleibt sichtbar -> Cursor bleibt auf allen Geräten da. */
.dash-compose__editor.is-hl .dash-compose__field {
    background: transparent;
    color: var(--c-text);
    -webkit-text-fill-color: transparent;
    caret-color: var(--c-text);
}
/* Platzhalter sichtbar halten: das transparente text-fill erbt sonst auf ihn. */
.dash-compose__editor.is-hl .dash-compose__field::placeholder {
    -webkit-text-fill-color: var(--c-text-muted);
}
.dash-compose__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.dash-compose__tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.dash-compose__tag {
    font-size: .73rem;
    font-weight: 600;
    color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 12%, transparent);
    border-radius: var(--radius-xl);
    padding: 3px 10px;
    opacity: .6;
}
.dash-compose__tag-hint {
    font-size: .72rem;
    color: var(--c-text-muted);
    opacity: .7;
}
.dash-compose__submit { min-width: 90px; cursor: pointer; }
.dash-compose__submit:disabled { opacity: .5; cursor: not-allowed; }

/* Hashtag-Chips im Composer (Aufgabe 4) */
.dash-compose__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}
.dash-compose__chip {
    font-size: .76rem;
    font-weight: 600;
    color: var(--c-hashtag);
    background: color-mix(in srgb, var(--c-hashtag) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-hashtag) 28%, transparent);
    border-radius: var(--radius-pill);
    padding: 4px 12px;
    cursor: pointer;
    transition: background var(--t-fast), transform .08s;
}
.dash-compose__chip:hover { background: color-mix(in srgb, var(--c-hashtag) 22%, transparent); }
.dash-compose__chip:active { transform: scale(.96); }
.dash-compose__chip:focus-visible {
    outline: 2px solid var(--c-hashtag);
    outline-offset: 2px;
}

/* Soon Overlay — used in compose */
.dash-soon-overlay {
    position: absolute;
    inset: 0;
    background: rgba(14,14,20,.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 2;
}
.dash-soon-overlay__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: var(--c-text-muted);
    padding: 16px 24px;
}
.dash-soon-overlay__inner svg { opacity: .55; }
.dash-soon-overlay__inner strong {
    font-size: .92rem;
    font-weight: 700;
    color: var(--c-text);
}
.dash-soon-overlay__inner span { font-size: .8rem; }

/* ── Discover Cards ───────────────────────────────────────────────── */
.dash-discover { margin-bottom: 28px; }

/* ── Feed Empty ───────────────────────────────────────────────────── */
.dash-feed-empty {
    display: flex;            /* zentriert Icon + Titel + Text zuverlässig */
    flex-direction: column;
    align-items: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 40px 24px;
    text-align: center;
}
.dash-feed-empty__icon {
    width: 52px;
    height: 52px;
    margin: 0 0 16px;
    color: var(--c-text-muted);
    opacity: .45;
}
.dash-feed-empty__icon svg { width: 100%; height: 100%; display: block; }
.dash-feed-empty__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
    margin: 0 0 8px;
}
.dash-feed-empty__text {
    font-size: .85rem;
    color: var(--c-text-muted);
    margin: 0;
    max-width: 340px;
    line-height: 1.6;
}

/* ── Widget Headers ───────────────────────────────────────────────── */
.dash-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.dash-widget__header .dash-widget__title { margin: 0; }
.dash-widget__badge {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 14%, transparent);
    border-radius: var(--radius-xl);
    padding: 2px 8px;
}

/* ── Friend Request Empty ─────────────────────────────────────────── */
.dash-friend-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0 6px;
    color: var(--c-text-muted);
    opacity: .65;
}
.dash-friend-empty p { font-size: .82rem; margin: 0; }

/* ── Suggestion Skeletons ─────────────────────────────────────────── */
.dash-widget--soon-overlay { position: relative; }
.dash-suggest-list { display: flex; flex-direction: column; gap: 12px; }
.dash-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: .4;
}
.dash-suggest-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dash-suggest-avatar--skel {
    background: var(--c-border);
    animation: skel-pulse 1.5s ease-in-out infinite;
}
@keyframes skel-pulse {
    0%,100% { opacity: .4; }
    50%      { opacity: .7; }
}
.dash-suggest-info { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.dash-skel {
    background: var(--c-border);
    border-radius: var(--radius-xs);
    animation: skel-pulse 1.5s ease-in-out infinite;
}
.dash-skel--name  { height: 10px; width: 70%; }
.dash-skel--sub   { height: 8px;  width: 50%; }
.dash-suggest-btn {
    font-size: .72rem;
    font-weight: 600;
    color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
    border-radius: var(--radius-xl);
    padding: 4px 10px;
    cursor: not-allowed;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Crisis Widget ────────────────────────────────────────────────── */
.dash-widget--crisis { border-left: 3px solid var(--c-danger); }
.dash-safety__meta {
    display: block;
    font-size: .72rem;
    color: var(--c-text-muted);
    margin-top: 6px;
}
.dash-safety__link {
    display: inline-block;
    margin-top: 10px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-accent);
    text-decoration: none;
}
.dash-safety__link:hover { text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .dash-compose { padding: 14px 14px 13px; }
    .dash-compose__top { gap: 10px; }
    .dash-section-header { font-size: .74rem; margin-bottom: 11px; }
}
@media (max-width: 389px) {
    .dash-compose__tags { display: none; }
}

/* =====================================================================
   18 – Dashboard v2: Farbgebung, Gruppen-Skeletons, Reaktions-Preview
   ===================================================================== */

/* Square-Avatar für Gruppen-Skeletons (statt Kreis) */
.dash-suggest-avatar--square { border-radius: var(--radius-sm); }

/* Feed Empty: Reaktions-Vorschau */
.dash-feed-empty__reactions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.dash-reaction-preview {
    font-size: .78rem;
    color: var(--c-text-muted);
    background: var(--c-surface-2, var(--c-surface));
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    padding: 4px 12px;
    white-space: nowrap;
}

/* Compose-Card: farbiger Akzentstreifen oben */
.dash-compose::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-accent), #818cf8, #a78bfa);
    border-radius: 16px 16px 0 0;
}

/* Welcome: Name-Span Glow */
.dash-welcome__name span {
    color: var(--c-accent);
    text-shadow: 0 0 24px color-mix(in srgb, var(--c-accent) 35%, transparent);
}

/* Entdecken-Karten: etwas gesättigter */
.dash-disc-card--rose  { background: linear-gradient(135deg, rgba(159,18,57,.28), rgba(244,63,94,.14)); border-color: rgba(244,63,94,.28); }
.dash-disc-card--blue  { background: linear-gradient(135deg, rgba(3,105,161,.28), rgba(56,189,248,.14)); border-color: rgba(56,189,248,.28); }
.dash-disc-card--purple { background: linear-gradient(135deg, rgba(79,53,179,.28), rgba(167,139,250,.14)); border-color: rgba(167,139,250,.28); }
.dash-disc-card--green { background: linear-gradient(135deg, rgba(21,128,61,.28), rgba(74,222,128,.14)); border-color: rgba(74,222,128,.28); }

/* Feed Empty State: Icon etwas wärmer */
.dash-feed-empty__icon { color: var(--c-accent); opacity: .25; }

/* Widget-Titel: etwas heller für bessere Lesbarkeit */
.dash-widget__title { color: var(--c-text); opacity: .75; }

/* Nav-Trenner: subtil */
.dash-nav__separator { border-color: color-mix(in srgb, var(--c-border) 60%, transparent); }

/* Entdecken-Karten Icon-Farbe */
.dash-disc-card--rose  .dash-disc-card__icon { color: #fb7185; }
.dash-disc-card--blue  .dash-disc-card__icon { color: #38bdf8; }
.dash-disc-card--purple .dash-disc-card__icon { color: #a78bfa; }
.dash-disc-card--green .dash-disc-card__icon { color: #4ade80; }

/* Compose-Overlay mit mehr Kontrast */
.dash-soon-overlay__inner strong { color: var(--c-text); font-size: .95rem; }

@media (max-width: 767px) {
    .dash-feed-empty__reactions { gap: 6px; }
    .dash-reaction-preview { font-size: .73rem; padding: 3px 10px; }
}

/* =====================================================================
   19 – Sidebar Cover-Gradient & Visual Polish v3
   ===================================================================== */

/* Cover-Band oben im Sidebar-Profil-Block */
.dash-sidebar__profile { padding-top: 0; }
.dash-sidebar__cover {
    align-self: stretch;
    height: 52px;
    background: linear-gradient(135deg, #130d2a 0%, #0d1e3e 55%, #0a2822 100%);
    flex-shrink: 0;
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: 0;
    border-radius: 0;
}

/* Avatar-Button überlappt den Cover-Streifen */
.dash-sidebar__avatar-btn {
    margin-top: -24px;
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
}

/* Username-Glow + farbiger Akzent beim aktiven Nutzer */
.dash-sidebar__uname {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Sidebar Badge (BETA etc.) – etwas kompakter */
.badge-chip {
    display: inline-block;
    background: color-mix(in srgb, var(--c-accent) 15%, transparent);
    color: var(--c-accent);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    padding: 2px 8px;
    border-radius: var(--radius-xl);
    text-transform: uppercase;
}

/* Right-Sidebar Widgets: leicht aufgehellter Hintergrund */
.dash-widget {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 15px 14px;
}

/* Widget-Header: klarer Trennstrich */
.dash-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.dash-widget__badge {
    font-size: .7rem;
    font-weight: 700;
    color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-accent) 25%, transparent);
    padding: 2px 8px;
    border-radius: var(--radius);
}

/* Friend-Empty: zentriert, subtil */
.dash-friend-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    opacity: .45;
    color: var(--c-text-muted);
}
.dash-friend-empty p { font-size: .82rem; text-align: center; }

/* Nav active: stärker hervorgehoben */
.dash-nav__item--active {
    background: color-mix(in srgb, var(--c-accent) 14%, transparent);
    color: var(--c-accent);
    font-weight: 700;
}

/* Compose: abgerundeter Streifen mit leichtem Glow */
.dash-compose {
    background: var(--c-surface);
    border: 1px solid color-mix(in srgb, var(--c-accent) 20%, var(--c-border));
}

/* Welcome: fettere Schrift, mehr Abstand */
.dash-welcome { margin-bottom: 4px; }
.dash-welcome__name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.dash-welcome__slogan { font-size: .85rem; color: var(--c-text-muted); margin-top: 4px; }

/* Section-Header: leichter Trennstrich */
.dash-section-header {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--c-text-dim);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent);
}

@media (max-width: 1099px) {
    .dash-sidebar__cover { display: none; }
    .dash-sidebar__avatar-btn { margin-top: 0; }
}

/* =====================================================================
   20 – Dashboard Visual Refresh: Farbe, Kontrast, Lesbarkeit
   ===================================================================== */

/* Scoped Design-Tokens – wirken NUR innerhalb des Dashboards.
   Dunkles Theme nach Vorlage dashboard-vorlage.png: tiefes Anthrazit,
   glasige Panels, Cyan-Akzent, Inter-Schrift, bunte Themen-Karten. */
.dash-body {
    --c-bg:          #12141a;
    --c-surface:     #1b1e27;
    --c-surface-2:   #232734;
    --c-border:      rgba(255,255,255,0.07);
    --c-border-soft: rgba(255,255,255,0.04);
    --c-text:        #e6eef6;
    --c-text-muted:  #9aa6b2;
    --c-text-dim:    #6f7886;
    --c-accent:      #6dd3ff;
    --c-accent-glow: rgba(109,211,255,0.14);
    --ff-heading:    Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--c-bg);
    background-image:
        radial-gradient(circle at 12% 18%, rgba(109,211,255,.08) 0%, transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(122,97,255,.09)  0%, transparent 45%),
        radial-gradient(circle at 70% 88%, rgba(109,211,255,.05) 0%, transparent 45%);
    background-attachment: fixed;
}

/* ── Linke Sidebar ─────────────────────────────────────────────────── */
.dash-sidebar {
    background: linear-gradient(180deg, #0e0e1a 0%, #0f0f1e 100%);
    border-right: 1px solid var(--c-border);
}

.dash-sidebar__brand {
    padding: 22px 22px 16px;
    background: linear-gradient(135deg, rgba(109,211,255,.06) 0%, transparent 60%);
    border-bottom-color: var(--c-border);
}

.dash-brand-logo {
    font-size: 1.65rem;
    font-weight: 900;
    letter-spacing: -.06em;
    background: linear-gradient(135deg, #6dd3ff 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--c-accent);
}

/* Cover-Streifen im Profil-Block */
.dash-sidebar__cover {
    background: linear-gradient(135deg, #1e0e44 0%, #0e1c44 50%, #0a2a26 100%);
    height: 56px;
}

/* Nav-Items */
.dash-nav__item {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: .92rem;
    color: var(--c-text-muted);
}
.dash-nav__item:hover {
    background: var(--hairline-soft);
    color: var(--c-text);
}
.dash-nav__item--active,
.dash-nav__item--active:hover {
    background: color-mix(in srgb, var(--c-accent) 14%, transparent);
    color: var(--c-accent);
    font-weight: 700;
}

/* ── Willkommen ─────────────────────────────────────────────────────── */
.dash-welcome {
    padding: 20px 0 18px;
    margin-bottom: 22px;
    border-bottom-color: var(--c-border);
}
.dash-welcome__name {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--c-text);
}
.dash-welcome__name span {
    background: linear-gradient(90deg, #6dd3ff 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    color: var(--c-accent);
}
.dash-welcome__slogan {
    font-size: .9rem;
    color: var(--c-text-muted);
    margin-top: 6px;
}

/* ── Compose Card ───────────────────────────────────────────────────── */
.dash-compose {
    background: var(--c-surface);
    border: 1px solid color-mix(in srgb, var(--c-accent) 18%, var(--c-border));
    border-radius: var(--radius-lg);
}
.dash-compose::before {
    background: linear-gradient(90deg, #6dd3ff, #818cf8, #a78bfa, #f472b6);
    height: 2px;
}

/* ── Section Headers ────────────────────────────────────────────────── */
.dash-section-header {
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--c-text-muted);
    opacity: 1;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border);
}

/* ── Feed Empty ─────────────────────────────────────────────────────── */
.dash-feed-empty {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

/* ── Discovery Cards: kräftigere Farben ─────────────────────────────── */
.dash-disc-card--rose   { background: linear-gradient(135deg, rgba(244,63,94,.28)  0%, rgba(159,18,57,.42)  100%); }
.dash-disc-card--blue   { background: linear-gradient(135deg, rgba(56,189,248,.28) 0%, rgba(3,105,161,.42)  100%); }
.dash-disc-card--purple { background: linear-gradient(135deg, rgba(167,139,250,.28)0%, rgba(79,53,179,.42)  100%); }
.dash-disc-card--green  { background: linear-gradient(135deg, rgba(74,222,128,.28) 0%, rgba(21,128,61,.42)  100%); }

/* ── Rechte Sidebar Widgets ─────────────────────────────────────────── */
.dash-widget {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 16px 15px;
}
.dash-widget__title {
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--c-text);
    opacity: .8;
    margin: 0;
}

/* ── Reaktions-Chips im Feed-Empty ─────────────────────────────────── */
.dash-reaction-preview {
    background: var(--c-surface-2);
    border-color: var(--c-border);
    color: var(--c-text-muted);
}

/* ── Sidebar Username ───────────────────────────────────────────────── */
.dash-sidebar__uname { color: var(--c-text); }
.dash-sidebar__uhandle { color: var(--c-text-muted); }

/* ── Compose Field ──────────────────────────────────────────────────── */
.dash-compose__field {
    background: var(--c-bg);
    border-color: var(--c-border);
    color: var(--c-text);
}

/* ── Soon-Overlay im Compose ────────────────────────────────────────── */
.dash-soon-overlay {
    background: rgba(11,11,18,.78);
}

@media (max-width: 1099px) {
    .dash-sidebar__cover { display: none; }
    .dash-sidebar__avatar-btn { margin-top: 0; }
}
@media (max-width: 767px) {
    .dash-welcome__name { font-size: 1.3rem; }
    .dash-section-header { font-size: .71rem; }
}

/* =====================================================================
   21 – Desktop-Topbar & zentrierter Frame (Referenz-Layout)
   ===================================================================== */

/* Basis: Desktop-Topbar ist auf Mobil ausgeblendet (erscheint erst ab 768px) */
.dash-dtop { display: none; }

/* Statistik-Block als Karte (wie in der Referenz) */
.dash-sidebar__stats {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface-2);
    overflow: hidden;
    margin: 12px 0 6px;
}

/* ── Desktop (≥768px): Topbar einblenden, Frame ausrichten ─────────── */
@media (min-width: 768px) {
    /* Fixierte, randlose Topbar mit zentriertem Inhalt */
    .dash-dtop {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 56px;
        z-index: 90;                 /* über den Sidebars (80) */
        background: #0e0e1a;
        border-bottom: 1px solid var(--c-border);
    }
    .dash-dtop__inner {
        max-width: 2560px;                     /* deckungsgleich mit .dash-shell */
        height: 100%;
        margin: 0 auto;
        padding: 0 var(--space-5);
        display: grid;
        grid-template-columns: 1fr auto 1fr;   /* Suchleiste exakt mittig */
        align-items: center;
        gap: var(--space-4);
    }
    .dash-dtop__left  { justify-self: start; min-width: 0; }
    .dash-dtop__right {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .dash-dtop__brand {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        text-decoration: none;
        flex-shrink: 0;
    }
    .dash-dtop__logo { height: 28px; width: auto; display: block; }
    .dash-dtop__wordmark {
        font-family: var(--ff-heading);
        font-size: 1.5rem;
        font-weight: 900;
        letter-spacing: -.05em;
        color: #ffffff;                        /* MALU in Weiß */
    }

    /* Suchfeld – zentriert in der mittleren Grid-Spalte */
    .dash-dtop__search {
        position: relative;
        display: flex;
        align-items: center;
        justify-self: center;
        /* Skaliert mit der Breite und bleibt auf Tablets schmal genug,
           damit Marke + Suche + Aktionen ohne horizontalen Scroll passen. */
        width: clamp(200px, 34vw, 520px);
        max-width: 100%;
    }
    /* Nur das direkte Lupen-Icon positionieren – nicht die SVGs im Dropdown. */
    .dash-dtop__search > svg {
        position: absolute;
        left: 12px;
        width: 16px; height: 16px;
        color: var(--c-text-dim);
        pointer-events: none;
    }
    .dash-dtop__search-input {
        width: 100%;
        height: 38px;
        background: var(--c-surface-2);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-pill);
        color: var(--c-text);
        font: inherit;
        font-size: .9rem;
        padding: 0 14px 0 36px;
        outline: none;
        transition: border-color .15s, background .15s;
    }
    .dash-dtop__search-input::placeholder { color: var(--c-text-dim); }
    .dash-dtop__search-input:focus {
        border-color: color-mix(in srgb, var(--c-accent) 50%, var(--c-border));
        background: var(--c-bg);
    }

    /* Schnellzugriff-Nav (in der rechten Zone) */
    .dash-dtop__nav {
        display: flex;
        align-items: center;
        gap: 2px;
    }
    .dash-dtop__link {
        padding: 8px 14px;
        border-radius: var(--radius-sm);
        color: var(--c-text-muted);
        text-decoration: none;
        font-size: .9rem;
        font-weight: 600;
        white-space: nowrap;
        transition: background .13s, color .13s;
    }
    .dash-dtop__link:hover { background: var(--hairline-soft); color: var(--c-text); }
    .dash-dtop__link--active { color: var(--c-accent); }

    /* Aktions-Icons + Avatar */
    .dash-dtop__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }
    .dash-dtop__icon-btn {
        width: 38px; height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: var(--c-text-muted);
        background: var(--c-surface-2);
        border: 1px solid var(--c-border);
        text-decoration: none;
        cursor: pointer;
        transition: background .13s, color .13s;
    }
    .dash-dtop__icon-btn:hover { background: var(--hover-bg); color: var(--c-text); }
    .dash-dtop__icon-btn svg { width: 18px; height: 18px; }
    .dash-dtop__icon-btn--soon { opacity: .5; cursor: default; pointer-events: none; }
    .dash-dtop__dot {
        position: absolute;
        top: 7px; right: 8px;
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--c-rose);
        border: 2px solid #0e0e1a;
    }
    /* Echter Zähler ungelesener Benachrichtigungen (Aufgabe 7) */
    .dash-dtop__count {
        position: absolute;
        top: 2px; right: 2px;
        min-width: 16px; height: 16px;
        padding: 0 4px;
        border-radius: var(--radius-sm);
        background: var(--c-rose);
        border: 2px solid #0e0e1a;
        color: #fff;
        font-size: .62rem;
        font-weight: 700;
        line-height: 14px;
        text-align: center;
    }
    .dash-dtop__icon-btn--has { color: var(--c-text); }
    .dash-dtop__avatar { width: 38px; height: 38px; cursor: pointer; }

    /* Frame: Platz für die Topbar schaffen, Sidebars darunter andocken */
    .dash-shell { padding-top: 56px; }
    .dash-sidebar { top: 56px; height: calc(100vh - 56px); }
    .dash-sidebar__brand { display: none; }   /* Brand lebt jetzt in der Topbar */
}

/* Rechte Sidebar ebenfalls unter der Topbar verankern */
@media (min-width: 1100px) {
    .dash-right { top: 56px; max-height: calc(100vh - 56px); }
}

/* Schmaler Desktop: Topbar-Nav ausblenden, damit die zentrierte Suche
   genug Platz behält (Links sind in der linken Sidebar weiterhin da). */
@media (min-width: 768px) and (max-width: 1023px) {
    .dash-dtop__nav { display: none; }
}

/* =====================================================================
   22 – Dunkelgraues Theme: farbiger Header, graue Flächen, bunte Karten
   ===================================================================== */

/* ── Farbiger Header-Verlauf (Desktop-Topbar) ─────────────────────── */
@media (min-width: 768px) {
    .dash-dtop {
        background: linear-gradient(100deg, #2a3340 0%, #2f2b46 100%);
        border-bottom: 1px solid var(--hairline);
    }
    /* Tageszeit-Farbstimmung (13.07.2026): data-daypart am <html> kommt aus
       malu.js und folgt der LOKALEN Geräte-Uhrzeit (stimmt so automatisch in
       jeder Zeitzone/jedem Land). Morgens warm, tagsüber am hellsten, abends
       violett gedämpft, nachts am dunkelsten – bewusst dezent, Icons/Suche
       bleiben unverändert lesbar. Ohne JS bleibt der Standard-Verlauf oben. */
    html[data-daypart="morgen"] .dash-dtop {
        background: linear-gradient(100deg, #3a3a40 0%, #4a3c45 55%, #423a52 100%);
    }
    html[data-daypart="tag"] .dash-dtop {
        background: linear-gradient(100deg, #3d4a5e 0%, #40406e 100%);
    }
    html[data-daypart="abend"] .dash-dtop {
        background: linear-gradient(100deg, #3a2f4c 0%, #4e3150 100%);
    }
    html[data-daypart="nacht"] .dash-dtop {
        background: linear-gradient(100deg, #10141d 0%, #151022 100%);
    }
    /* Nav-Links hell auf dem Header */
    .dash-dtop__link { color: rgba(230,238,246,.8); }
    .dash-dtop__link:hover { background: var(--hairline); color: #fff; }
    .dash-dtop__link--active { color: #fff; background: rgba(109,211,255,.16); }

    /* Aktions-Icons: glasig auf dem Header */
    .dash-dtop__icon-btn {
        background: var(--hairline);
        border-color: var(--hairline-strong);
        color: #e6eef6;
    }
    .dash-dtop__icon-btn:hover { background: var(--hairline-strong); color: #fff; }
    .dash-dtop__dot { border-color: #2c3039; }

    /* Suchfeld: glasig wie die Inputs im Original-Projekt */
    .dash-dtop__search-input {
        background: var(--hairline);
        border-color: var(--hairline-strong);
        color: #e6eef6;
    }
    .dash-dtop__search-input::placeholder { color: #9aa6b2; }
    .dash-dtop__search > svg { color: #9aa6b2; }
    .dash-dtop__search-input:focus {
        background: rgba(255,255,255,.09);
        border-color: rgba(109,211,255,.5);
        box-shadow: 0 0 0 3px rgba(109,211,255,.14);
    }
}

/* ── Linke Sidebar: graue Fläche, farbiger Cover-Streifen ─────────── */
.dash-sidebar { background: var(--c-surface); border-right: 1px solid var(--c-border); }
.dash-sidebar__cover {
    background: linear-gradient(135deg, #6dd3ff 0%, var(--c-brand-2) 100%);
}
.dash-nav__item:hover { background: var(--hairline); color: var(--c-text); }

/* ── "Bald"-Overlay dunkel ────────────────────────────────────────── */
.dash-soon-overlay { background: rgba(22,24,30,.82); }

/* ── Karten dezent absetzen ───────────────────────────────────────── */
.dash-compose,
.dash-widget,
.dash-feed-empty { box-shadow: 0 1px 3px rgba(0,0,0,.25); }

/* ── Willkommen-Verlauf: hell genug für dunkelgrauen Hintergrund ──── */
.dash-welcome__name span {
    background: linear-gradient(90deg, #6dd3ff 0%, var(--c-brand-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #6dd3ff;
    text-shadow: none;
}

/* ── Discovery-Karten: kräftige, bunte Verläufe + weiße Inhalte ───── */
.dash-disc-card--rose   { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); border: none; }
.dash-disc-card--blue   { background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%); border: none; }
.dash-disc-card--purple { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); border: none; }
.dash-disc-card--green  { background: linear-gradient(135deg, var(--tone-green) 0%, #059669 100%); border: none; }
.dash-disc-card__title,
.dash-disc-card__sub { color: #fff; }
.dash-disc-card--rose   .dash-disc-card__icon,
.dash-disc-card--blue   .dash-disc-card__icon,
.dash-disc-card--purple .dash-disc-card__icon,
.dash-disc-card--green  .dash-disc-card__icon { color: rgba(255,255,255,.95); }

/* =====================================================================
   23 – Komponenten nach Vorlage: Ausloggen, Sektionen,
        Nachricht-senden, Follower-Tabs, Themen-Karten
   ===================================================================== */

/* (Prototyp-Badge entfernt – an seiner Stelle steht jetzt die globale Suche.) */

/* ── Topbar: aktiver Icon-Button + Ausloggen-Button ───────────────── */
@media (min-width: 768px) {
    .dash-dtop__icon-btn--active {
        background: rgba(109,211,255,.20);
        border-color: rgba(109,211,255,.35);
        color: #6dd3ff;
    }
}
.dash-dtop__logout-form { display: flex; margin: 0; }
.dash-dtop__logout {
    border: none;
    border-radius: var(--radius-pill);
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--tone-pink), #db2777);
    color: #fff;
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s, transform .1s;
}
.dash-dtop__logout:hover { filter: brightness(1.08); }
.dash-dtop__logout:active { transform: scale(.97); }

/* ── Account-Menü (Topbar oben rechts) ────────────────────────────── */
.dash-account { position: relative; }
.dash-account__btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 6px 3px 3px; border: 1px solid transparent;
    background: none; border-radius: var(--radius-pill); cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.dash-account__btn:hover { background: var(--c-surface-2); }
.dash-account__btn[aria-expanded="true"] { background: var(--c-surface-2); border-color: var(--c-border); }
.dash-account__chev { width: 16px; height: 16px; color: var(--c-text-muted); }
.dash-account__menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    width: 280px; max-width: calc(100vw - 24px);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 6px; overflow: hidden;
}
.dash-account__menu[hidden] { display: none; }   /* hidden/display-Falle vermeiden */
.dash-account__head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px 12px; border-radius: var(--radius); text-decoration: none;
}
.dash-account__head:hover { background: var(--c-surface-2); }
.dash-account__head-text { display: flex; flex-direction: column; min-width: 0; }
.dash-account__head-name { color: var(--c-text); font-weight: 700; font-size: .95rem; }
.dash-account__head-handle { color: var(--c-text-muted); font-size: .82rem; }
.dash-account__sep { height: 1px; background: var(--c-border); margin: 6px 4px; }
.dash-account__item {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 9px 10px; border: none; background: none; cursor: pointer;
    color: var(--c-text); font: inherit; font-size: .9rem; text-align: left;
    border-radius: var(--radius-sm); text-decoration: none;
}
.dash-account__item svg { width: 18px; height: 18px; color: var(--c-text-muted); flex: 0 0 auto; }
.dash-account__item:hover { background: var(--c-surface-2); }
.dash-account__item:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.dash-account__item--team { color: var(--c-accent); }
.dash-account__item--team svg { color: var(--c-accent); }
.dash-account__item--logout { color: var(--c-danger); }
.dash-account__item--logout svg { color: var(--c-danger); }
.dash-account__logout-form { margin: 0; }
/* Zähler-Pille im Account-Menü (Chats / Benachrichtigungen). */
.dash-account__badge {
    margin-left: auto; flex: 0 0 auto;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-accent); color: #06222e;
    font-size: .68rem; font-weight: 800; line-height: 1;
    border-radius: var(--radius-pill);
}

/* ===================================================================
   Phase 1.5 – Linke Themen-Navigation + rechte Kontaktliste
   =================================================================== */

/* ── Linke Sidebar = farbige Themen-Kacheln mit ruhig „atmendem" Verlauf ──
   Jede Kachel trägt einen sehr langsam wandernden Farbverlauf ihres Themas
   (13.07.2026): zwei Ebenen (weiches Licht + getönter Verlauf), die per
   background-position hin- und hergleiten. Bewusst träge (10 s, alternate)
   und je Ton zeitversetzt, damit nichts synchron „blinkt" – MALU-ruhig.
   Farbe je Thema über die CSS-Variable --tc. WICHTIG: Longhands
   (background-image/-size/-position) statt background-Shorthand, damit
   Hover/Aktiv die Animation nicht zurücksetzen. */
.dash-topic-nav { gap: 6px; padding: 12px 12px 16px; }
.dash-topic-link {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 0 14px;
    border-radius: var(--radius);
    background-image:
        radial-gradient(130% 170% at 20% 0%, color-mix(in srgb, var(--tc) 26%, transparent) 0%, transparent 56%),
        linear-gradient(115deg,
            color-mix(in srgb, var(--tc) 24%, transparent) 0%,
            color-mix(in srgb, var(--tc) 9%,  transparent) 48%,
            color-mix(in srgb, var(--tc) 21%, transparent) 100%);
    background-size: 240% 240%, 220% 220%;
    background-position: 0% 30%, 0% 40%;
    background-repeat: no-repeat;
    animation: topic-drift 10s ease-in-out infinite alternate;
    text-decoration: none; color: var(--c-text);
    transition: filter .16s, box-shadow .14s;
}
@keyframes topic-drift {
    0%   { background-position: 0% 30%, 0% 40%; }
    100% { background-position: 100% 70%, 100% 60%; }
}
/* Ruhe-Schalter: Einstellung „Bewegung reduzieren" UND System-Vorgabe. */
body.malu-reduced-motion .dash-topic-link { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .dash-topic-link { animation: none; }
}
.dash-topic-link:hover { filter: brightness(1.24); }
.dash-topic-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* Aktiv: stärkere Farbfläche + feiner Farbrand + linker Marker, kein Layout-
   Sprung – der Verlauf wandert weiter (nur kräftiger getönt). */
.dash-topic-link--active {
    background-image:
        radial-gradient(130% 170% at 20% 0%, color-mix(in srgb, var(--tc) 40%, transparent) 0%, transparent 56%),
        linear-gradient(115deg,
            color-mix(in srgb, var(--tc) 38%, transparent) 0%,
            color-mix(in srgb, var(--tc) 18%, transparent) 48%,
            color-mix(in srgb, var(--tc) 33%, transparent) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 55%, transparent);
}
.dash-topic-link--active::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 22px; border-radius: 0 3px 3px 0; background: var(--tc);
}
.dash-topic-link--active .dash-topic-link__title { color: #fff; }
.dash-topic-link__icon {
    flex: 0 0 auto; width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tc);
}
.dash-topic-link__icon svg { width: 21px; height: 21px; }
.dash-topic-link__title {
    flex: 1; min-width: 0;
    font-size: .95rem; font-weight: 700; color: var(--c-text);
    line-height: 1.2; letter-spacing: -.005em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Neu-Marker (UI vorbereitet): Zahl-Pille oder Punkt rechts. */
.dash-topic-link__badge {
    flex: 0 0 auto;
    min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tc); color: #0f0f10;
    font-size: .7rem; font-weight: 800; line-height: 1; border-radius: var(--radius-pill);
}
.dash-topic-link__dot {
    flex: 0 0 auto;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--tc); box-shadow: 0 0 0 3px var(--c-surface);
}
/* Farbe je Themenbereich – kräftig, aber zum Dark-Design abgestimmt.
   Negative animation-delays starten jede Kachel mitten in ihrem Verlauf,
   damit die Bewegung überall sofort sichtbar, aber nie synchron ist. */
.dash-topic-link--pink   { --tc: var(--tone-pink);   animation-delay: 0s; }
.dash-topic-link--coral  { --tc: var(--tone-coral);  animation-delay: -8.6s; }
.dash-topic-link--blue   { --tc: var(--tone-blue);   animation-delay: -2.9s; }
.dash-topic-link--green  { --tc: var(--tone-green);  animation-delay: -11.4s; }
.dash-topic-link--cyan   { --tc: var(--tone-cyan);   animation-delay: -5.7s; }
.dash-topic-link--orange { --tc: var(--tone-orange); animation-delay: -14.3s; }
.dash-topic-link--violet { --tc: var(--tone-violet); animation-delay: -17.1s; }
.dash-topic-link--sky    { --tc: var(--tone-sky);    animation-delay: -1.4s; }

/* ── Ordnung & Wisch-Leiste (13.07.2026) ────────────────────────────────
   Drei Gruppen mit kleinen Überschriften: Entdecken / Offiziell /
   Hilfe & Feedback. Desktop + Tablet: vertikale Liste in der Sidebar.
   Handy: EINE horizontale Wisch-Leiste (2 Zeilen je Gruppe, Scroll-Snap
   je Gruppe, Kanten weich ausgeblendet); Maus-Ziehen macht malu.js. */
.dash-topic-strip { display: flex; flex-direction: column; gap: 14px; }
.dash-topic-group { min-width: 0; }
.dash-topic-group__caption {
    margin: 0 0 6px; padding: 0 3px;
    font-size: .67rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--c-text-dim);
}
.dash-topic-group__items { display: flex; flex-direction: column; gap: 6px; }

/* Handy-Einbauort auf der Startseite (ersetzt die alten .m-topics-Chips):
   nur < 768px sichtbar – am Desktop/Tablet übernimmt die linke Sidebar. */
.dash-topic-mobile { display: none; }

@media (max-width: 767px) {
    .dash-topic-mobile { display: block; margin: 6px 0 18px; }
    .dash-topic-strip {
        flex-direction: row; gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 3px 8px;
        cursor: grab;
        /* Vertikales Seiten-Scrollen bleibt möglich, horizontal wischt die Leiste. */
        touch-action: pan-x pan-y;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    }
    .dash-topic-strip::-webkit-scrollbar { display: none; }
    /* Während des Maus-Ziehens: kein Snap-Gegenzug, Greif-Cursor. */
    .dash-topic-strip.is-swiping { cursor: grabbing; scroll-snap-type: none; }
    .dash-topic-strip.is-swiping .dash-topic-link { pointer-events: none; }
    .dash-topic-group { flex: 0 0 auto; scroll-snap-align: start; }
    /* EINE schlanke Zeile wie die frühere Chip-Leiste (Wunsch 13.07.2026):
       Kacheln nebeneinander, Gruppen-Caption darüber, Snap je Gruppe.
       flex-direction explizit: die Desktop-Basisregel setzt column. */
    .dash-topic-group__items { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; }
    .dash-topic-group__items .dash-topic-link {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 14px 0 12px;
    }
}

/* ── Rechte Sidebar = kompakte Kontaktliste ───────────────────────── */
.dash-cside { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-cside__row {
    display: flex; align-items: center; gap: 11px;
    padding: 7px 8px; border-radius: var(--radius-sm);
    text-decoration: none; transition: background .13s;
}
.dash-cside__row:hover { background: var(--c-glass); }
.dash-cside__row:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.dash-cside__avatar-wrap { position: relative; flex: 0 0 auto; }
.dash-cside__text { display: flex; flex-direction: column; min-width: 0; }
.dash-cside__name {
    font-size: .9rem; font-weight: 600; color: var(--c-text); line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-cside__handle {
    font-size: .76rem; color: var(--c-text-dim); line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-cside-empty { text-align: center; padding: 10px 4px 4px; }
.dash-cside-empty__icon { display: inline-flex; width: 30px; height: 30px; color: var(--c-text-dim); margin-bottom: 6px; }
.dash-cside-empty__icon svg { width: 100%; height: 100%; }
.dash-cside-empty__text { font-size: .82rem; color: var(--c-text-muted); margin: 0 0 8px; }
.dash-cside-empty__cta {
    display: inline-block; font-size: .82rem; font-weight: 600;
    color: var(--c-accent); text-decoration: none;
}
.dash-cside-empty__cta:hover { text-decoration: underline; }

/* ── Header-Benachrichtigungs-Panel (Glocke-Dropdown) ─────────────── */
.dash-notif { position: relative; }
.dash-notif__panel {
    position: absolute; top: calc(100% + 10px); right: 0;
    width: 360px; max-width: calc(100vw - 24px);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(0,0,0,.45);
    z-index: 95; overflow: hidden;
}
.dash-notif__panel[hidden] { display: none; }   /* hidden/display-Falle vermeiden */
.dash-notif__panel:focus { outline: none; }
.dash-notif__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 14px; border-bottom: 1px solid var(--c-border);
}
.dash-notif__title { margin: 0; font-weight: 800; font-size: .98rem; color: var(--c-text); }
.dash-notif__all { font-size: .82rem; font-weight: 600; color: var(--c-accent); text-decoration: none; }
.dash-notif__all:hover { text-decoration: underline; }
.dash-notif__body { max-height: min(70vh, 460px); overflow-y: auto; padding: 6px; }
.dash-notif__section {
    margin: 6px 8px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--c-text-dim);
}
.dash-notif__list { list-style: none; margin: 0 0 4px; padding: 0; }
.dash-notif__item {
    position: relative; display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 8px 9px 10px; border-radius: var(--radius-sm);
}
.dash-notif__item:hover { background: var(--c-glass); }
.dash-notif__item--unread { background: var(--c-accent-glow); }
.dash-notif__item--unread::before {
    content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 22px; border-radius: var(--radius-xs); background: var(--c-accent);
}
.dash-notif__avatar { flex: 0 0 auto; text-decoration: none; }
.dash-notif__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dash-notif__text { margin: 0; font-size: .86rem; color: var(--c-text); line-height: 1.4; }
.dash-notif__actor { color: var(--c-text); font-weight: 700; text-decoration: none; }
.dash-notif__actor:hover { text-decoration: underline; }
.dash-notif__time { font-size: .74rem; color: var(--c-text-dim); }
.dash-notif__go {
    flex: 0 0 auto; align-self: center; font-size: .76rem; font-weight: 600;
    color: var(--c-accent); text-decoration: none; padding: 2px 6px; border-radius: var(--radius-sm);
}
.dash-notif__go:hover { background: var(--c-accent-glow); }
.dash-notif__del {
    flex: 0 0 auto; align-self: flex-start; width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; color: var(--c-text-dim); cursor: pointer;
    border-radius: 50%; transition: background .13s, color .13s;
}
.dash-notif__del svg { width: 15px; height: 15px; }
.dash-notif__del:hover { background: rgba(239,83,80,.12); color: var(--c-danger); }
.dash-notif__del:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.dash-notif__fr-actions { display: flex; gap: 8px; margin-top: 4px; }
.dash-notif__fr-actions form { margin: 0; }
.dash-notif__btn {
    font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
    padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--c-border);
    background: none; color: var(--c-text);
}
.dash-notif__btn--accept { background: var(--c-accent); color: #06222e; border-color: transparent; }
.dash-notif__btn--accept:hover { filter: brightness(1.08); }
.dash-notif__btn--decline:hover { background: var(--hairline); }
.dash-notif__empty { text-align: center; padding: 26px 16px; }
.dash-notif__empty[hidden] { display: none; }
.dash-notif__empty-icon { display: inline-flex; width: 34px; height: 34px; color: var(--c-text-dim); opacity: .5; margin-bottom: 8px; }
.dash-notif__empty-icon svg { width: 100%; height: 100%; }
.dash-notif__empty-text { margin: 0; font-size: .86rem; color: var(--c-text-muted); }
/* Badge am Glocken-Button kann per JS versteckt werden. */
.dash-dtop__count[hidden] { display: none; }

/* ── Sidebar: kompaktes Mini-Profil (ersetzt das große Profil-Widget) ── */
.dash-mini {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px; margin: 4px 0 6px;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}
.dash-mini__id { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.dash-mini__avatar { flex: 0 0 auto; }
.dash-mini__text { display: flex; flex-direction: column; min-width: 0; }
.dash-mini__name {
    color: var(--c-text); font-weight: 700; font-size: .95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-mini__handle {
    color: var(--c-text-muted); font-size: .82rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-mini__cta {
    display: block; text-align: center; padding: 8px 12px;
    border: 1px solid var(--c-border); border-radius: var(--radius-pill);
    color: var(--c-text); font-size: .85rem; font-weight: 600; text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.dash-mini__cta:hover { background: var(--c-accent-glow); border-color: var(--c-accent); color: var(--c-accent); }

/* ── Sidebar: Nachricht-senden-Button ─────────────────────────────── */
.dash-sidebar__msg-btn {
    width: 100%;
    margin: 10px 0 2px;
    padding: 9px 14px;
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: not-allowed;
    opacity: .85;
}

/* ── Sidebar: Nav-Sektionslabels (Für dich / Hilfreich) ───────────── */
.dash-nav__section {
    margin: 14px 12px 4px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-dim);
}

/* ── Rechte Sidebar: Leertext + Follower-Tabs ─────────────────────── */
.dash-widget__empty {
    margin: 0;
    padding: 10px 4px;
    font-size: .82rem;
    color: var(--c-text-muted);
    text-align: center;
}
.dash-follow-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    margin-bottom: 12px;
    background: var(--c-surface-2);
    border-radius: var(--radius-md);
}
.dash-follow-tab {
    flex: 1;
    padding: 6px 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--c-text-muted);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .13s, color .13s;
}
.dash-follow-tab:hover { color: var(--c-text); }
.dash-follow-tab--active { background: var(--c-accent); color: #06222e; }

/* ── Compose-Überschrift "Was passiert?" ──────────────────────────── */
.dash-compose__heading {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-text);
}

/* ── Themen-Karten (bunte Verlaufskarten, anklickbar) ─────────────── */
.dash-topics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: 28px;
}
/* 6 Karten → ausgewogenes 2×3-Raster (statt 5+1-Bruch). */
@media (min-width: 700px)  { .dash-topics { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .dash-topics { grid-template-columns: repeat(3, 1fr); } }

.dash-topic-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 122px;
    padding: 14px;
    border-radius: var(--radius-lg);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.dash-topic-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(0,0,0,.4);
    color: #fff;
    text-decoration: none;
}
.dash-topic-card__icon { width: 26px; height: 26px; margin-bottom: 10px; opacity: .95; }
.dash-topic-card__icon svg { width: 100%; height: 100%; }
.dash-topic-card__title { font-size: .98rem; font-weight: 800; margin-bottom: 3px; }
.dash-topic-card__sub { font-size: .76rem; opacity: .92; line-height: 1.3; }

.dash-topic-card--pink   { background: linear-gradient(150deg, #f472b6, #db2777); }
.dash-topic-card--coral  { background: linear-gradient(150deg, #fb7185, #e11d48); }
.dash-topic-card--blue   { background: linear-gradient(150deg, #38bdf8, #2563eb); }
.dash-topic-card--green  { background: linear-gradient(150deg, var(--tone-green), #059669); }
.dash-topic-card--orange { background: linear-gradient(150deg, var(--c-warn), #f97316); }
.dash-topic-card--violet { background: linear-gradient(150deg, #a78bfa, #7c3aed); }

/* =====================================================================
   24 – Globale Suche: Vorschau-Dropdown + Ergebnis-Typen (UI-Vorbereitung)
        Reine Platzhalter-Optik. Das Panel erscheint per :focus-within,
        zeigt nur Beispiele und täuscht keine fertige Suche vor.
   ===================================================================== */

.dash-search-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 95;
    padding: 10px;
    background: #161821;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
/* Erscheint, sobald Suchfeld oder Panel den Fokus halten. */
.dash-dtop__search:focus-within .dash-search-panel { display: block; }

.dash-search-panel__note {
    margin: 2px 4px 8px;
    font-size: .76rem;
    line-height: 1.4;
    color: var(--c-text-muted);
}
.dash-search-panel__group {
    margin: 4px 6px 6px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--c-text-dim);
}

/* Ein Ergebnis-Eintrag (Vorlage für Nutzer / Seite / Hashtag) */
.dash-search-res {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 8px;
    border-radius: var(--radius-md);
}
.dash-search-res + .dash-search-res { margin-top: 2px; }

.dash-search-res__avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    /* Nutzer: anonymer Profilkreis (kein echtes Foto, nur Farbe/Icon) */
    background: linear-gradient(135deg, #6dd3ff, var(--c-brand-2));
}
.dash-search-res__avatar svg { width: 18px; height: 18px; }
/* Offizielle Seite: eckiger Logo-Platzhalter */
.dash-search-res__avatar--page {
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--tone-green), #059669);
}
/* Hashtag: dezenter Themen-Kreis */
.dash-search-res__avatar--tag {
    background: var(--c-surface-2);
    color: var(--c-accent);
}
/* Community-Gruppe: oranger Gruppen-Kreis */
.dash-search-res__avatar--cmty {
    background: linear-gradient(135deg, var(--c-community), var(--tone-pink));
}
/* Hilfsangebot: koralle Anlaufstellen-Kreis */
.dash-search-res__avatar--help {
    background: linear-gradient(135deg, #fb7185, #e11d48);
}

.dash-search-res__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.dash-search-res__name {
    font-size: .9rem;
    font-weight: 600;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-search-res__meta {
    font-size: .76rem;
    color: var(--c-text-muted);
}

.dash-search-res__tag {
    margin-left: auto;
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.dash-search-res__tag--user  { background: rgba(109,211,255,.16); color: #6dd3ff; }
.dash-search-res__tag--page  { background: color-mix(in srgb, var(--tone-green) 16%, transparent);  color: var(--tone-green); }
.dash-search-res__tag--topic { background: rgba(167,139,250,.18); color: #c4b5fd; }
.dash-search-res__tag--cmty  { background: color-mix(in srgb, var(--c-community) 16%, transparent);  color: var(--c-community); }
.dash-search-res__tag--help  { background: rgba(251,113,133,.16); color: #fb7185; }

.dash-search-panel__all {
    display: block;
    margin-top: 6px;
    padding: 9px 8px;
    border-top: 1px solid var(--c-border);
    text-align: center;
    font-size: .82rem;
    font-weight: 600;
    color: var(--c-accent);
    text-decoration: none;
}
.dash-search-panel__all:hover { text-decoration: underline; }

/* =====================================================================
   25 – Feinschliff: Profil-Cover-Karte, Freundschaftsanfragen,
        Kontaktleiste. Reine UI-Politur, kein neues Backend.
   ===================================================================== */

/* ── Aufgabe 1: Profil-Cover als Vollflächen-Hintergrund ──────────────
   Der Farbverlauf ist KEIN Banner oben, sondern liegt als absolute Fläche
   hinter der GESAMTEN Profilkarte: Avatar, Name, @Handle, „Nachricht senden",
   Bio und Statistik liegen darüber. Das Cover reicht von top:0 bis unter die
   Statistik (= bis zur Kartenunterkante) und endet dort. Die darunter folgende
   Navigation (Geschwister-Element) ist NICHT betroffen, weil das Cover via
   overflow:hidden auf die Profilkarte begrenzt ist. */
.dash-sidebar__profile {
    position: relative;               /* Bezug für das absolute Cover */
    isolation: isolate;               /* eigener Stacking-Context */
    margin: 14px 12px 6px;
    padding: 22px 16px 18px;          /* Innenabstand für die Inhalte über dem Cover */
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 3px rgba(0,0,0,.28);
    overflow: hidden;                 /* klippt das Cover auf die runde Kartenform */
}

/* Cover = absolute Hintergrundfläche der kompletten Karte (top:0 → unter Statistik) */
.dash-sidebar__cover {
    position: absolute;
    inset: 0;                         /* füllt die gesamte Karte innerhalb des Rahmens */
    z-index: 0;
    height: auto;                     /* hebt die frühere feste Banner-Höhe auf */
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}
/* Glanz oben + sanfter Abdunkler unten – Tiefe und bessere Lesbarkeit der Statistik */
.dash-sidebar__cover-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 65% at 16% 0%, rgba(255,255,255,.26), transparent 60%),
        linear-gradient(180deg, var(--hairline) 0%, transparent 26%, rgba(0,0,0,.20) 100%);
}

/* Sämtliche Inhalte liegen ÜBER dem Cover */
.dash-sidebar__profile > :not(.dash-sidebar__cover) {
    position: relative;
    z-index: 1;
}

/* Vorbereitete Cover-Varianten – später vom Nutzer wählbar (Aufgabe 1) */
.dash-sidebar__cover--brand       { background: linear-gradient(150deg, #6dd3ff 0%, var(--c-brand-2) 100%); }
.dash-sidebar__cover--blue-violet { background: linear-gradient(150deg, #3b82f6 0%, #7c3aed 100%); }
.dash-sidebar__cover--cyan-blue   { background: linear-gradient(150deg, #22d3ee 0%, #2563eb 100%); }
.dash-sidebar__cover--pink-violet { background: linear-gradient(150deg, var(--tone-pink) 0%, #7c3aed 100%); }
.dash-sidebar__cover--green-cyan  { background: linear-gradient(150deg, var(--tone-green) 0%, #06b6d4 100%); }
.dash-sidebar__cover--orange-pink { background: linear-gradient(150deg, var(--c-community) 0%, var(--tone-pink) 100%); }
.dash-sidebar__cover--slate-blue  { background: linear-gradient(150deg, #475569 0%, #2563eb 100%); }

/* Avatar sitzt direkt auf dem Cover (kein Banner-Überlapp mehr) */
.dash-sidebar__avatar-btn { margin-top: 0; }
.dash-sidebar__avatar-btn .dash-avatar--xl {
    border: 5px solid rgba(255,255,255,.9);   /* dicker Kreisfarben-Ring (Inline-Farbe überschreibt) */
    box-shadow: 0 6px 18px rgba(0,0,0,.34);
}

/* Statistik-Block: Glas-Leiste auf dem Cover (Standard, gilt überall) */
.dash-sidebar__stats {
    margin: 14px 0 2px;
    background: rgba(10,12,22,.40);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: var(--radius);
}

/* ── Lesbarkeit der Inhalte auf dem farbigen Cover ──────────────────── */
.dash-sidebar__uname  { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.dash-sidebar__uhandle { color: rgba(255,255,255,.82); }
.dash-sidebar__bio { color: rgba(255,255,255,.88); }
.dash-sidebar__bio--empty { color: rgba(255,255,255,.62); }
.dash-sidebar__stats .dash-stat__num { color: #fff; }
.dash-sidebar__stats .dash-stat__label { color: rgba(255,255,255,.78); }
.dash-sidebar__stats .dash-stat + .dash-stat { border-left-color: rgba(255,255,255,.16); }
.dash-sidebar__profile .badge-chip { background: rgba(255,255,255,.20); color: #fff; }

/* „Nachricht senden" als Glas-Button auf dem Cover */
.dash-sidebar__msg-btn {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.28);
    color: #fff;
}

/* Ohne Cover (Tablet, <1100px): Karte fällt auf normale Flächen zurück */
@media (max-width: 1099px) {
    .dash-sidebar__cover { display: none; }
    .dash-sidebar__profile { padding-top: 16px; background: var(--c-surface); }
    .dash-sidebar__uname  { color: var(--c-text); text-shadow: none; }
    .dash-sidebar__uhandle { color: var(--c-text-muted); }
    .dash-sidebar__bio { color: var(--c-text-muted); }
    .dash-sidebar__bio--empty { color: var(--c-text-dim); }
    .dash-sidebar__stats {
        background: var(--c-surface-2);
        border-color: var(--c-border);
    }
    .dash-sidebar__stats .dash-stat__num { color: var(--c-text); }
    .dash-sidebar__stats .dash-stat__label { color: var(--c-text-muted); }
    .dash-sidebar__msg-btn {
        background: var(--c-surface-2);
        border-color: var(--c-border);
        color: var(--c-text);
    }
    .dash-sidebar__avatar-btn .dash-avatar--xl { border-color: var(--c-surface); }
}

/* ── Aufgabe 2: Freundschaftsanfragen-Card (rechte Sidebar) ──────────── */
.dash-freq {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dash-freq__item { display: flex; gap: 11px; align-items: flex-start; }
.dash-freq__avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    font-size: .98rem;
    color: var(--c-text);
}
.dash-freq__body { min-width: 0; flex: 1; }
.dash-freq__name {
    display: block;
    font-weight: 700;
    font-size: .9rem;
    color: var(--c-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-freq__hint {
    display: block;
    font-size: .78rem;
    color: var(--c-text-muted);
    margin: 2px 0 9px;
    line-height: 1.3;
}
.dash-freq__actions { display: flex; gap: 8px; }
.dash-freq__btn {
    flex: 1;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .14s, background .14s, border-color .14s, color .14s;
}
.dash-freq__btn--accept { background: var(--c-accent); color: #06222e; }
.dash-freq__btn--accept:hover { filter: brightness(1.08); }
.dash-freq__btn--decline {
    background: transparent;
    border-color: var(--c-border);
    color: var(--c-text-muted);
}
.dash-freq__btn--decline:hover { background: var(--hairline); color: var(--c-text); }

/* Empty-State der Freundschaftsanfragen */
.dash-freq-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 0 2px;
}
.dash-freq-empty__icon {
    width: 34px;
    height: 34px;
    color: var(--c-text-dim);
    opacity: .7;
}
.dash-freq-empty__icon svg { width: 100%; height: 100%; }
.dash-freq-empty .dash-widget__empty { padding: 0; }

/* ── Aufgabe 3: Kontaktleiste „Deine Kontakte" über den Themen ──────── */
.dash-contacts { margin-bottom: 24px; }
.dash-contacts__header { margin-bottom: 12px; }
.dash-contacts__list {
    list-style: none;
    margin: 0;
    padding: 4px 2px 8px;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--c-border) transparent;
}
.dash-contacts__list::-webkit-scrollbar { height: 6px; }
.dash-contacts__list::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: var(--radius-xs); }
.dash-contact {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 62px;
    cursor: pointer;
}
.dash-contact__avatar-wrap { position: relative; }
.dash-contact__avatar {
    width: 52px;
    height: 52px;
    font-size: 1.15rem;
    color: var(--c-text);
    transition: transform .15s;
}
.dash-contact:hover .dash-contact__avatar { transform: translateY(-2px); }
.dash-contact__status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--tone-green);
    border: 2px solid var(--c-bg);
}
.dash-contact__name {
    max-width: 100%;
    font-size: .76rem;
    color: var(--c-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.dash-contacts__empty {
    margin: 0;
    padding: 14px 16px;
    background: var(--c-surface);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dash-contacts__empty-text {
    margin: 0;
    flex: 1 1 200px;
    font-size: .85rem;
    color: var(--c-text-muted);
    line-height: 1.5;
}
.dash-contacts__discover {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    background: var(--c-accent);
    color: #0f0f10;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter .15s, transform .15s;
}
.dash-contacts__discover svg { width: 16px; height: 16px; }
.dash-contacts__discover:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ── Cover-Auswahl im Profil-Editor (wie die Avatar-Verläufe) ────────── */
.avm__cover-row { display: flex; flex-wrap: wrap; gap: 8px; }
.avm__cover-swatch {
    width: 54px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 2.5px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: border-color .15s, transform .15s;
}
.avm__cover-swatch:hover { transform: scale(1.06); }
.avm__cover-swatch.is-selected { border-color: #fff; box-shadow: 0 0 0 2px var(--c-accent); }

/* Live-Vorschau zeigt den Avatar auf dem gewählten Cover */
.avm__preview {
    padding: 16px 0 14px;
    border-radius: var(--radius-lg);
    transition: background .25s;
}
.avm__preview .avm__preview-handle { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); }

/* =====================================================================
   26 – Feinschliff Startseite/Profil: hochwertige Sidebar-Navigation,
        Profil-Badges (18×18) + Tooltip, Bio-Box, Kontakt-Status.
        Reine UI-/Frontend-Politur – kein neues Backend.
   ===================================================================== */

/* ── Aufgabe 2: Hochwertige Sidebar-Navigation ──────────────────────── */
.dash-sidebar__nav { gap: 4px; }

.dash-nav__item {
    position: relative;
    gap: 13px;
    padding: 11px 13px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    color: #b9c4cf;                /* heller als --c-text-muted → besserer Kontrast */
    font-weight: 600;
    transition: background .16s ease, color .16s ease, border-color .16s ease,
                box-shadow .16s ease, transform .12s ease;
}
.dash-nav__item .dash-nav__icon { color: #8da0b0; transition: color .16s ease; }

/* Hover: dunkler Glas-Effekt + dezenter Cyan→Violett-Glow (bewusst NICHT grell) */
.dash-nav__item:not(.dash-nav__item--soon):not(.dash-nav__item--active):hover {
    background:
        linear-gradient(120deg, rgba(109,211,255,.10), rgba(124,97,255,.10)),
        rgba(255,255,255,.022);
    border-color: var(--hairline-strong);
    color: #eaf2f9;
    box-shadow: 0 4px 14px rgba(0,0,0,.28), inset 0 0 0 1px rgba(109,211,255,.05);
}
.dash-nav__item:not(.dash-nav__item--soon):not(.dash-nav__item--active):hover .dash-nav__icon {
    color: #cfe8f6;
}
.dash-nav__item:not(.dash-nav__item--soon):active { transform: translateY(1px); }

/* Active: klar hervorgehoben – Glas + Akzentkante links + weicher Glow */
.dash-nav__item--active,
.dash-nav__item--active:hover {
    background:
        linear-gradient(120deg, rgba(109,211,255,.18), rgba(124,97,255,.16)),
        rgba(255,255,255,.03);
    border-color: rgba(109,211,255,.30);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(60,120,180,.18), inset 0 0 0 1px rgba(109,211,255,.10);
}
.dash-nav__item--active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 56%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #6dd3ff, var(--c-brand-2));
    box-shadow: 0 0 10px rgba(109,211,255,.55);
}
.dash-nav__item--active .dash-nav__icon { color: #bfe6fb; }

/* „Bald"-Items: ruhig, aber gut lesbar (vorher fast unsichtbar bei opacity .45) */
.dash-nav__item--soon { opacity: 1; color: #7e8a96; cursor: default; pointer-events: none; }
.dash-nav__item--soon .dash-nav__icon { color: #5f6b77; }
.dash-nav__badge-soon {
    background: var(--hairline-soft);
    border: 1px solid var(--hairline);
    color: #8a96a2;
}
.dash-nav__section { color: #7c8893; margin-top: 16px; }

/* ── Aufgabe 11: Bio als eigene, klar sichtbare Box ─────────────────── */
.dash-sidebar__bio {
    margin: 12px 2px 2px;
    padding: 9px 12px;
    border-radius: var(--radius);
    background: rgba(10,12,22,.34);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.20);
    font-size: .82rem;
    line-height: 1.45;
    color: rgba(255,255,255,.94);
    text-align: left;
    word-break: break-word;
}
.dash-sidebar__bio--empty { display: none; }   /* leere Bio → keine leere Box */
@media (max-width: 1099px) {
    .dash-sidebar__bio {
        background: var(--c-surface-2);
        border-color: var(--c-border);
        color: var(--c-text);
    }
}

/* ── Aufgabe 4–7: Profil-Badges (Beta: 5 Slots à exakt 18×18px) ─────── */
.profile-badges {
    display: flex;
    flex-wrap: wrap;               /* später mehrere Reihen */
    justify-content: center;
    gap: 7px;
    margin: 12px auto 2px;
    max-width: 118px;              /* 5×18 + 4×7 = 118 → genau 5 pro Reihe */
}
.profile-badge {
    position: relative;
    width: 18px;                   /* Vorgabe: exakt 18×18px */
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
}
.profile-badge img { width: 12px; height: 12px; display: block; }

/* Verliehenes Badge: kleiner Glanz-Chip */
.profile-badge--earned {
    background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(214,233,247,.9));
    color: #1b2733;
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 1px 4px rgba(0,0,0,.30);
    cursor: default;
}
/* Freier Slot: dezenter Platzhalter, nicht aufdringlich */
.profile-badge--empty {
    background: var(--hairline-strong);
    border: 1px dashed rgba(255,255,255,.30);
    cursor: default;
}
@media (max-width: 1099px) {
    .profile-badge--empty { background: var(--c-surface-2); border-color: var(--c-border); }
}

/* ── Aufgabe 6: Badge-Tooltip (hochwertig, dezent, mittig über dem Badge) */
.profile-badge[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
    max-width: 150px;
    width: max-content;
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    background: rgba(17,19,26,.97);
    border: 1px solid var(--hairline-strong);
    color: #eaf2f9;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    z-index: 30;
}
.profile-badge[data-tip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 3px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(17,19,26,.97);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease;
    z-index: 30;
}
.profile-badge--empty[data-tip]::after { color: #aeb9c4; }
.profile-badge[data-tip]:hover::after,
.profile-badge[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.profile-badge[data-tip]:hover::before,
.profile-badge[data-tip]:focus-visible::before { opacity: 1; }

/* ── Aufgabe 7: „Badges"-Platzhalter im Profil-Editor (klar als „Bald") */
.avm__section--soon { opacity: .75; }
.avm__soon-pill {
    margin-left: 8px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    color: var(--c-text-dim);
    vertical-align: middle;
}
.avm__soon-hint { margin: 4px 0 0; font-size: .78rem; color: var(--c-text-muted); line-height: 1.4; }

/* ── Aufgabe 12: Kontakt-Status (online / abwesend / beschäftigt / offline) */
.dash-contact__status { background: #6b7280; }     /* Standard = offline */
.dash-contact__status--online  { background: var(--tone-green); }   /* grün   */
.dash-contact__status--away    { background: #f59e0b; }   /* gelb/orange */
.dash-contact__status--busy    { background: #a855f7; }   /* violett */
.dash-contact__status--offline { background: #6b7280; }   /* grau   */

/* =====================================================================
   27 – Feinschliff Header/Navigation/rechte Sidebar:
        keine Unterstreichungen, aufgewertete Nav, Welcome-Card,
        Netzwerk-Card (Follower/Folge ich). Reine UI-Politur, kein Backend.
   ===================================================================== */

/* ── Punkt 1 & 6: KEINE Unterstreichung (global "a:hover" wird überschrieben) */
.dash-nav__item,
.dash-nav__item:hover,
.dash-nav__item:focus,
.dash-nav__item:focus-visible,
.dash-dtop__brand,
.dash-dtop__brand:hover,
.dash-brand-logo,
.dash-brand-logo:hover,
.dash-people-tab,
.dash-people-tab:hover {
    text-decoration: none;
}
.dash-dtop__brand,
.dash-brand-logo { border-bottom: 0; }
.dash-dtop__brand::after,
.dash-brand-logo::after { content: none; }

/* ── Punkt 1: Sidebar-Buttons – mehr Volumen, klare Hierarchie ──────── */
.dash-sidebar__nav { padding: 8px 10px 16px; }
.dash-nav__item:not(.dash-nav__item--soon):not(.dash-nav__item--active):hover {
    transform: translateX(1px);
}

/* ── Punkt 3: Welcome-Card oberhalb der Kontakte ────────────────────── */
.dash-hello {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 2px 0 22px;
    padding: 15px 18px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(120deg, rgba(109,211,255,.10), rgba(124,97,255,.10)),
        var(--c-surface);
    border: 1px solid var(--hairline);
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    overflow: hidden;
    transition: opacity .45s ease, transform .45s ease,
                max-height .5s ease, margin .5s ease, padding .5s ease, border-width .5s ease;
}
/* Welcome-Card nach 30 s: sanft ausblenden UND einklappen, damit KEINE Lücke
   oberhalb der Kontakte bleibt. Die Höhe (max-height) wird in malu.js gesetzt,
   das Element danach vollständig aus dem DOM entfernt. */
.dash-hello--hide {
    opacity: 0;
    transform: translateY(-8px);
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    pointer-events: none;
}
.dash-hello__spark {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.28);
}
.dash-hello__spark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-hello__title { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--c-text); }
.dash-hello__title span {
    background: linear-gradient(90deg, #6dd3ff, var(--c-brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.dash-hello__sub { margin: 3px 0 0; font-size: .85rem; color: var(--c-text-muted); }
@media (max-width: 560px) {
    .dash-hello { gap: 12px; padding: 14px; margin-bottom: 18px; }
    .dash-hello__title { font-size: .96rem; }
    .dash-hello__sub { font-size: .8rem; }
}
/* Flash-Meldungen im selben Banner-Stil (13.07.2026): Erfolg wie gehabt
   (Logo-Spark), Fehler mit Warn-Symbol in ruhigem Rot-Ton. */
.dash-hello--error {
    background:
        linear-gradient(120deg, rgba(244,67,54,.12), rgba(124,97,255,.05)),
        var(--c-surface);
    border-color: rgba(244,67,54,.32);
}
.dash-hello__spark--error {
    background: rgba(244,67,54,.14);
    color: #ff8a8a;
}
.dash-hello__spark--error svg { width: 22px; height: 22px; }

/* ── Punkt 9-10: Netzwerk-Card (Follower / Folge ich) ───────────────── */
.dash-people-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.dash-people-tab {
    flex: 1;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text-muted);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}
.dash-people-tab:hover { color: var(--c-text); background: var(--hairline-soft); }
.dash-people-tab--active {
    background: linear-gradient(120deg, rgba(109,211,255,.16), rgba(124,97,255,.14));
    border-color: rgba(109,211,255,.30);
    color: #fff;
}
.dash-people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;      /* 2 Profile pro Reihe, bis zu 10 sichtbar */
    gap: 10px 12px;
}
.dash-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dash-person__avatar-wrap { position: relative; flex: 0 0 auto; }
.dash-person__avatar { width: 36px; height: 36px; font-size: .9rem; color: var(--c-text); }
.dash-person__avatar-wrap .dash-contact__status {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--c-surface);
}
.dash-person__name {
    min-width: 0;
    font-size: .82rem;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-people-all {
    width: 100%;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--c-border);
    background: transparent;
    color: var(--c-text-muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: default;
}

/* =====================================================================
   Profilseite (eigenes & fremdes Profil) – Social
   Cover + Avatar, Identität, Folgen-/Freundschafts-Buttons, Tabs, Beiträge.
   ===================================================================== */
/* Hauptprofil: deutlich breiter als der frühere 760px-Schlauch, damit es sich
   wie ein modernes Social-Profil über die verfügbare Breite zieht. */
.uprofile { max-width: 1180px; margin: 0 auto; }
.uprofile__cover {
    height: 220px;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 -60px 80px -40px rgba(0,0,0,.5);
}

/* Kopf-Grid: links Avatar+Identität (flexibel), rechts Badges+Statistik. */
.uprofile__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-5);
    padding: 0 var(--space-4);
    margin-top: -64px;
}
.uprofile__main {
    display: flex;
    align-items: flex-end;
    gap: var(--space-5);
    flex: 1 1 460px;
    min-width: 0;
}
.uprofile__avatar {
    width: 132px;
    height: 132px;
    font-size: 3rem;
    border: 4px solid var(--c-surface);
    box-shadow: 0 8px 24px rgba(0,0,0,.4), var(--shadow-glow);
    flex: 0 0 auto;
}
.uprofile__identity { flex: 1 1 auto; min-width: 0; padding-bottom: var(--space-2); }
.uprofile__name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: 1.7rem;
    line-height: 1.2;
    margin: 0;
}
.uprofile__name-text { font-weight: 800; }
.uprofile__handle { color: var(--c-text-muted); margin: 10px 0 0; }

/* MALU-Plus-Pill neben dem Namen: hochwertig, aber dezent. */
.uprofile__plus {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px 3px 9px;
    border-radius: var(--radius-pill);
    background: var(--c-gradient-purple);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 2px 10px rgba(118,75,162,.45);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    line-height: 1;
}
.uprofile__plus svg { opacity: .95; }

/* Bio direkt im Kopf, neben dem Avatar. */
.uprofile__bio-lead {
    color: var(--c-text);
    margin: var(--space-3) 0 0;
    max-width: 56ch;
    line-height: 1.5;
    white-space: pre-line;
}

.uprofile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.uprofile-actform { display: contents; }

/* Rechte Kopfspalte: Badges sitzen über der Statistikgruppe. */
.uprofile__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
}

.uprofile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    color: var(--c-text);
    font: inherit;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, filter .15s;
}
.uprofile-btn:hover { text-decoration: none; }
/* „Folgen" = primärer MALU-CTA (Cyan-Verlauf). */
.uprofile-btn--follow {
    background: var(--c-gradient-cta);
    border-color: transparent;
    color: #06222e;
}
.uprofile-btn--follow:hover { filter: brightness(1.06); }
/* „Freundschaftsanfrage" = sekundär (Outline, wie „Get in touch"). */
.uprofile-btn--friend {
    background: var(--c-surface-2);
    border-color: var(--c-border);
    color: var(--c-text);
}
.uprofile-btn--friend:hover { border-color: var(--c-accent); color: var(--c-accent); }
.uprofile-btn--ghost { background: transparent; }
.uprofile-btn--ghost:hover { border-color: var(--c-danger); color: var(--c-danger); }
.uprofile-btn--edit:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* "Folge ich" -> bei Hover/Fokus "Entfolgen" */
.uprofile-btn--following .uprofile-btn__off { display: none; }
.uprofile-btn--following:hover,
.uprofile-btn--following:focus-visible { border-color: var(--c-danger); color: var(--c-danger); }
.uprofile-btn--following:hover .uprofile-btn__on,
.uprofile-btn--following:focus-visible .uprofile-btn__on { display: none; }
.uprofile-btn--following:hover .uprofile-btn__off,
.uprofile-btn--following:focus-visible .uprofile-btn__off { display: inline; }

/* Statische Zustände (Anfrage gesendet / Freunde) */
.uprofile-btn--chip { cursor: default; color: var(--c-text-muted); }
.uprofile-btn--friends {
    color: var(--c-success);
    border-color: rgba(67,233,123,.4);
    background: rgba(67,233,123,.1);
}

/* Badge-Reihe im Kopf: gezackte Siegel-Badges à 24×24px, rechtsbündig über der Statistik. */
.uprofile__badgerow {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin: 0;
}
.uprofile__badgerow .profile-badge {
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    box-shadow: none;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    cursor: default;
}
/* Die gezackte Siegelform (wie die Referenz-Badges) als Maske über der Farbfläche. */
.uprofile__badgerow .profile-badge::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--badge-color, #7c6cf6);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.33 2.19c-1.4-.46-2.91-.2-3.92.81s-1.26 2.52-.8 3.91c-1.31.67-2.2 1.91-2.2 3.34s.89 2.67 2.2 3.34c-.46 1.39-.21 2.9.8 3.91s2.52 1.26 3.91.81c.67 1.31 1.91 2.19 3.34 2.19s2.68-.88 3.34-2.19c1.39.45 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34z'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.uprofile__badgerow .profile-badge > span { position: relative; z-index: 1; }
.uprofile__badgerow .profile-badge img { position: relative; z-index: 1; width: 13px; height: 13px; }

/* Statistik wie die Referenz: Label klein oben, große fette Zahl darunter (ohne Kasten). */
.uprofile__stats {
    display: flex;
    gap: var(--space-6);
    list-style: none;
    margin: 0;
    padding: 0;
}
.uprofile__stats li { display: flex; flex-direction: column; align-items: flex-start; }
.uprofile__stats span { color: var(--c-text-muted); font-size: .82rem; }
.uprofile__stats strong { font-size: 1.6rem; font-weight: 800; line-height: 1.15; margin-top: 2px; }

.uprofile__tabs { margin: var(--space-6) var(--space-2) 0; }
.uprofile__panel { padding: var(--space-5) var(--space-2) var(--space-6); }
.uprofile__panel-title { font-size: 1.2rem; margin: 0 0 var(--space-4); }

/* Moderne dunkle Inhaltskarte (Übersicht, Badges). */
.uprofile__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    max-width: 760px;
}
.uprofile__card-title { font-size: 1.2rem; margin: 0 0 var(--space-3); }
.uprofile__bio { color: var(--c-text); white-space: pre-line; line-height: 1.6; margin: 0; }

/* „Mitglied seit" o. ä. als ruhige Fakten-Liste unter der Bio. */
.uprofile__facts {
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border-soft);
}
.uprofile__fact { display: flex; align-items: baseline; gap: var(--space-3); }
.uprofile__fact dt { color: var(--c-text-muted); font-size: .85rem; min-width: 110px; }
.uprofile__fact dd { color: var(--c-text); font-weight: 600; margin: 0; }

.uprofile__posts { display: flex; flex-direction: column; gap: var(--space-3); }
.uprofile-post {
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    background: var(--c-surface);
    padding: var(--space-4);
}
.uprofile-post__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}
.uprofile-post__title { font-weight: 700; color: var(--c-text); }
.uprofile-post__title:hover { color: var(--c-accent); }
.uprofile-post__cat {
    flex: 0 0 auto;
    font-size: .75rem;
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    padding: 2px 10px;
}
.uprofile-post__preview { color: var(--c-text-muted); margin: var(--space-2) 0 0; }
.uprofile-post__meta { color: var(--c-text-dim); font-size: .8rem; margin: var(--space-2) 0 0; }

/* Linke Sidebar-Profilkarte ohne Bearbeiten (auf fremdem Profil) */
.dash-sidebar__avatar-btn--static { cursor: default; }

/* Freundschaftsanfragen: Annehmen/Ablehnen als Mini-Formulare nebeneinander */
.dash-freq__form { display: contents; }

/* Schmaler Desktop / Tablet: rechte Kopfspalte rückt unter die Identität. */
@media (max-width: 860px) {
    .uprofile__aside {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-4);
    }
    .uprofile__badgerow { justify-content: flex-start; }
}

/* Mobile: Profil-Kopf gestapelt (Avatar über der Identität). */
@media (max-width: 640px) {
    .uprofile__cover { height: 160px; }
    .uprofile__head { margin-top: -48px; gap: var(--space-4); }
    .uprofile__main { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .uprofile__avatar { width: 96px; height: 96px; font-size: 2.2rem; }
    .uprofile__identity { padding-bottom: 0; }
    .uprofile__actions { width: 100%; }
    .uprofile__actions .uprofile-btn { flex: 1 1 auto; }
    .uprofile__stats { width: 100%; justify-content: space-between; gap: var(--space-3); }
    .uprofile__card { padding: var(--space-5); }
}

/* =====================================================================
   Beiträge: Feed, Beitragskarte, Hashtags & @Markierungen
   ===================================================================== */
.dash-compose__tag-hint--low { color: var(--c-warn); }

.dash-feed { display: flex; flex-direction: column; gap: var(--space-3); }

.post-item {
    position: relative;            /* Anker für das Drei-Punkte-Menü */
    display: flex;
    gap: 12px;
    padding: var(--space-4);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    background: var(--c-surface);
    transition: border-color .15s;
}
.post-item:hover { border-color: var(--c-border); }
.post-item.is-menu-open { z-index: 30; }   /* offenes Menü über folgende Karten */
.post-item--pinned { border-color: color-mix(in srgb, var(--c-accent) 30%, var(--c-border-soft)); }
.post-item__pinned {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 6px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--c-accent);
}
.post-item__avatar { flex: 0 0 auto; text-decoration: none; }
.post-item__avatar:hover { text-decoration: none; }
.post-item__body { flex: 1 1 auto; min-width: 0; }
.post-item__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding-right: 30px;   /* Platz für das Drei-Punkte-Menü oben rechts */
}
.post-item__name { font-weight: 600; color: var(--c-text); }
.post-item__name:hover { color: var(--c-accent); text-decoration: none; }
/* Autoren-Badges neben dem Namen (kleine Siegel + optionale Plus-Pille). */
.post-badges { display: inline-flex; align-items: center; gap: 4px; align-self: center; }
.post-badge {
    --badge-color: var(--c-accent);
    flex: 0 0 auto;
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .58rem; font-weight: 800; color: #fff; line-height: 1;
    background: var(--badge-color);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    text-decoration: none;
}
.post-badge--more {
    width: auto; min-width: 18px; padding: 0 6px; border-radius: var(--radius-sm);
    background: var(--c-surface-2); color: var(--c-text-muted);
    border: 1px solid var(--c-border); box-shadow: none; font-weight: 700;
}
.post-badge--more:hover { color: var(--c-text); border-color: var(--c-text-muted); }
.post-badge--plus {
    width: auto; padding: 1px 8px 1px 6px; gap: 3px; border-radius: var(--radius-sm);
    font-size: .68rem; font-weight: 800; letter-spacing: .01em;
    background: var(--c-gradient-purple); color: #fff; box-shadow: none;
}
.post-badge--plus svg { width: 11px; height: 11px; flex: 0 0 auto; }
/* MALU Team: offizielles Teammitglied – mit MALU-Logo + „MALU", in der Markenfarbe. */
.post-badge--team {
    width: auto; padding: 1px 9px 1px 6px; gap: 4px; border-radius: var(--radius-sm);
    font-size: .68rem; font-weight: 800; letter-spacing: .02em;
    background: color-mix(in srgb, var(--c-accent) 16%, var(--c-surface));
    border: 1px solid color-mix(in srgb, var(--c-accent) 50%, transparent);
    color: var(--c-accent); box-shadow: none;
}
.post-badge--team .post-badge__logo {
    width: 14px; height: 14px; flex: 0 0 auto; display: block; border-radius: var(--radius-xs);
}
.post-item__time { font-size: .8rem; color: var(--c-text-dim); }
.post-item__cat {
    font-size: .72rem;
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    padding: 1px 9px;
}
.post-item__text {
    color: var(--c-text);
    margin: 6px 0 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
/* Aktionen am Beitrag: Like (echtes Toggle) + Kommentar (öffnet den Beitrag) */
.post-item__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.post-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text-muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: background .14s, color .14s, border-color .14s, transform .08s;
}
.post-action:hover { background: var(--c-surface-2); color: var(--c-text); }
.post-action:active { transform: scale(.95); }
.post-action__icon { width: 20px; height: 20px; flex-shrink: 0; }
.post-action__label { font-weight: 600; }
.post-action__count {
    min-width: 6px; font-variant-numeric: tabular-nums;
    color: var(--c-text-dim);
}
.post-action__count[hidden] { display: none; }
/* Zähler nur zeigen, wenn > 0 wäre ideal – serverseitig bleibt 0 sichtbar als „0".
   Auf sehr schmalen Screens das Wort-Label ausblenden, Icon + Zahl bleiben. */
@media (max-width: 400px) {
    .post-action__label { display: none; }
}
/* Like (Herz) */
.post-action--like:hover { color: var(--c-rose); border-color: color-mix(in srgb, var(--c-rose) 40%, var(--c-border)); }
.post-action--like.is-active {
    color: var(--c-rose);
    border-color: color-mix(in srgb, var(--c-rose) 45%, transparent);
    background: color-mix(in srgb, var(--c-rose) 12%, transparent);
}
.post-action--like.is-active .post-action__icon { fill: var(--c-rose); }
/* Kommentar (Sprechblase) */
.post-action--comment:hover { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-border)); }

/* ── Unterstützungs-Reaktionen (Hilfreich/Unterstützend/Mutig/Danke) ─── */
.post-item__actions { flex-wrap: wrap; }
.post-reactions { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.post-react {
    --rc: var(--c-accent);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: var(--radius-pill);
    border: 1px solid var(--c-border); background: transparent;
    color: var(--c-text-muted); font: inherit; font-size: .82rem; font-weight: 600;
    line-height: 1; cursor: pointer; text-decoration: none;
    transition: background .14s, color .14s, border-color .14s, transform .08s;
}
.post-react__icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; }
.post-react__icon svg { width: 100%; height: 100%; }
.post-react__count { font-variant-numeric: tabular-nums; }
.post-react__count[hidden] { display: none; }
.post-react:hover {
    color: var(--rc);
    border-color: color-mix(in srgb, var(--rc) 45%, var(--c-border));
    background: color-mix(in srgb, var(--rc) 10%, transparent);
}
.post-react:active { transform: scale(.96); }
.post-react:focus-visible { outline: 2px solid var(--rc); outline-offset: 2px; }
.post-react.is-active {
    color: var(--rc);
    border-color: color-mix(in srgb, var(--rc) 55%, transparent);
    background: color-mix(in srgb, var(--rc) 16%, transparent);
}
.post-react.is-active .post-react__icon svg { fill: color-mix(in srgb, var(--rc) 24%, transparent); }
.post-react--helpful    { --rc: var(--c-accent); }
.post-react--supportive { --rc: #2dd4bf; }
.post-react--brave      { --rc: var(--c-community); }
.post-react--thanks     { --rc: #f472b6; }
/* Schmale Screens: Wort-Labels ausblenden, Icon + Zahl bleiben kompakt. */
@media (max-width: 540px) {
    .post-react__label { display: none; }
    .post-react { padding: 7px 10px; }
}

/* Inline-Kommentare unter dem Beitrag */
.post-comments {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border-soft);
}
.post-comments__list { display: flex; flex-direction: column; gap: 10px; }
.post-comments__empty,
.post-comments__loading { font-size: .85rem; color: var(--c-text-muted); margin: 0; }
.comment { display: flex; gap: 10px; }
.comment__avatar { flex: 0 0 auto; width: 30px; height: 30px; font-size: .72rem; text-decoration: none; }
.comment__body {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    padding: 8px 12px;
}
/* Dezentes Melden-Icon an Kommentaren (Beitragsdetail) */
.comment__report-btn {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--c-text-dim);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: color .12s, background .12s;
}
.comment__report-btn:hover { color: var(--c-warn); background: var(--hairline); }
.comment__report-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.comment__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.comment__author { font-size: .85rem; font-weight: 600; color: var(--c-text); text-decoration: none; }
.comment__author:hover { color: var(--c-accent); }
.comment__time { font-size: .72rem; color: var(--c-text-dim); }
.comment__text {
    font-size: .9rem;
    color: var(--c-text);
    line-height: 1.5;
    margin-top: 2px;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.comment__actions { display: flex; gap: 14px; margin-top: 6px; }
.comment__act {
    font: inherit;
    font-size: .76rem;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    color: var(--c-text-dim);
    cursor: pointer;
}
.comment__act:hover { color: var(--c-accent); text-decoration: underline; }
.comment__act--danger:hover { color: var(--c-danger); }
/* Kommentar-Editor (inline, wie beim Beitrag) */
.comment.is-editing .comment__text,
.comment.is-editing .comment__actions { display: none; }
.comment__editform { display: none; margin-top: 4px; }
.comment.is-editing .comment__editform { display: block; }
.comment__editfield,
.comment__replyfield {
    width: 100%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.45;
    padding: 7px 10px;
    resize: vertical;
    outline: none;
}
.comment__editfield:focus,
.comment__replyfield:focus { border-color: var(--c-accent); }
.comment__editactions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.comment__act--save { color: var(--c-accent); }

/* Antworten (2 Ebenen): eingerückter Strang + Antwort-Formular */
.comment__replies {
    margin-top: 10px;
    margin-left: 32px;
    padding-left: 12px;
    border-left: 1px solid var(--c-border-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.comment__replyform { display: none; margin-top: 6px; }
.comment.is-replying .comment__replyform { display: block; }
.comment.is-editing .comment__replyform { display: none; }
/* Schreibfeld */
.post-comments__form { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.post-comments__field {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-text);
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.45;
    padding: 9px 12px;
    resize: vertical;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.post-comments__field:focus {
    border-color: var(--c-accent);
    box-shadow: var(--focus-ring);
}
.post-comments__send {
    flex: 0 0 auto;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    background: var(--c-accent);
    color: #0e0e1a;
    border: none;
    border-radius: var(--radius-md);
    padding: 9px 16px;
    cursor: pointer;
    transition: filter .12s;
}
.post-comments__send:hover { filter: brightness(1.05); }
/* Drei-Punkte-Menü am Beitrag (oben rechts) */
.post-menu { position: absolute; top: 10px; right: 10px; }
.post-menu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--c-text-dim);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.post-menu__btn:hover { background: var(--hairline); color: var(--c-text); }
.post-menu__btn svg { width: 18px; height: 18px; }
.post-menu__list {
    position: absolute;
    top: calc(100% + 4px); right: 0;
    min-width: 160px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 6px;
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Geschlossen, solange das hidden-Attribut gesetzt ist (schlägt das display:flex
   oben dank höherer Spezifität; JS toggelt nur noch [hidden]). */
.post-menu__list[hidden] { display: none; }
.post-menu__form { margin: 0; }
.post-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: .86rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--c-text);
    cursor: pointer;
    padding: 8px 10px;
    transition: background .12s, color .12s;
}
.post-menu__item:hover { background: var(--c-surface); }
.post-menu__item--danger { color: var(--c-danger); }
.post-menu__item--danger:hover { background: color-mix(in srgb, var(--c-danger) 14%, transparent); }

/* Inline-Editor für eigene Beiträge (Aufgabe 5) */
.post-item__editform { display: none; margin: 0 0 10px; }
.post-item.is-editing .post-item__editform { display: block; }
.post-item.is-editing .post-item__text { display: none; }
.post-item__editfield {
    width: 100%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-text);
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.55;
    padding: 9px 12px;
    resize: vertical;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.post-item__editfield:focus {
    border-color: var(--c-accent);
    box-shadow: var(--focus-ring);
}
.post-item__editactions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}
.post-item__editcancel,
.post-item__editsave {
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    cursor: pointer;
    border: 1px solid var(--c-border);
}
.post-item__editcancel { background: transparent; color: var(--c-text-muted); }
.post-item__editcancel:hover { color: var(--c-text); }
.post-item__editsave {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #0e0e1a;
}
.post-item__editsave:hover { filter: brightness(1.05); }

/* Hashtags & @Markierungen im Beitragstext.
   Hashtags immer lila, @Markierungen immer hellblau. */
.post-tag     { color: var(--c-hashtag); font-weight: 500; }
.post-mention { color: var(--c-accent);  font-weight: 500; }
.post-tag:hover,
.post-mention:hover { text-decoration: underline; }

/* =====================================================================
   Melden: dezenter Button am Beitrag, eigener Button am Profil, Dialog
   ===================================================================== */
/* Profil melden – nutzt die uprofile-btn-Basis, dezent wie --ghost */
.uprofile-btn--report { background: transparent; color: var(--c-text-muted); }
.uprofile-btn--report:hover { border-color: var(--c-danger); color: var(--c-danger); }

/* ---- Melden-Dialog ---------------------------------------------- */
.report-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 950;
}
.report-backdrop.is-open { display: block; }
.report-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 951;
    overflow-y: auto;
    padding: 20px 12px 40px;
}
.report-modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
.report-modal__panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 420px;
    padding: 20px;
    margin: auto;
    box-shadow: var(--shadow-modal);
}
/* Desktop + Tablet: breiteres Panel, damit die Meldegründe waagerecht
   nebeneinander passen (auf dem Handy bleibt es schmal + senkrecht). */
@media (min-width: 768px) {
    .report-modal__panel { max-width: 620px; }
}
.report-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.report-modal__title { font-size: 1.05rem; font-weight: 700; color: var(--c-text); margin: 0; }
.report-modal__close {
    background: none; border: none; cursor: pointer;
    color: var(--c-text-muted); padding: 5px; display: flex; border-radius: var(--radius-sm);
}
.report-modal__close:hover { color: var(--c-text); background: var(--hairline); }
.report-modal__target { font-size: .85rem; color: var(--c-text-muted); margin: 0 0 14px; }
.report-modal__target:empty { display: none; }
/* Desktop + Tablet: Meldegründe waagerecht als umbrechende Chips. */
.report-modal__reasons { border: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.report-modal__legend {
    font-size: .82rem; font-weight: 600; color: var(--c-text-muted);
    padding: 0; margin: 0 0 8px;
}
.report-modal__reason {
    display: inline-flex; align-items: center;
    padding: 8px 14px; cursor: pointer; user-select: none;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    font-size: .85rem; line-height: 1.2; color: var(--c-text-muted);
    transition: background .12s, border-color .12s, color .12s;
}
.report-modal__reason:hover {
    border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
    color: var(--c-text);
}
/* Radio visuell ausblenden (a11y bleibt: fokussierbar + Label umschließt Input);
   der ganze Chip ist die Auswahl. */
.report-modal__reason input {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; margin: 0; pointer-events: none;
}
.report-modal__reason:has(input:checked) {
    border-color: var(--c-accent);
    background: color-mix(in srgb, var(--c-accent) 18%, var(--c-surface-2));
    color: var(--c-text);
    font-weight: 600;
}
.report-modal__reason:has(input:focus-visible) { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Handy: gleiche Chip-/Button-Optik wie Desktop – die Chips brechen im schmalen
   Modal automatisch um (gestapelt, aber weiterhin anklickbare Buttons). */
.report-modal__dlabel {
    display: block; font-size: .82rem; font-weight: 600;
    color: var(--c-text-muted); margin: 4px 0 6px;
}
.report-modal__details {
    width: 100%;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    color: var(--c-text);
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.5;
    padding: 9px 12px;
    resize: vertical;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.report-modal__details:focus {
    border-color: var(--c-accent);
    box-shadow: var(--focus-ring);
}
.report-modal__foot {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
}
.report-modal__intro {
    font-size: .88rem; color: var(--c-text-muted); line-height: 1.5; margin: 0 0 12px;
}
/* Krisen-Hinweis (nur bei „Selbstverletzung / akute Sorge") */
.report-modal__crisis {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 4px 0 14px;
    padding: 11px 13px;
    background: color-mix(in srgb, var(--c-warn) 12%, var(--c-surface));
    border: 1px solid color-mix(in srgb, var(--c-warn) 40%, var(--c-border));
    border-radius: var(--radius-md);
}
.report-modal__crisis svg { color: var(--c-warn); flex-shrink: 0; margin-top: 1px; }
.report-modal__crisis p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--c-text); }
.report-modal__crisis a { color: var(--c-warn); font-weight: 600; }
.report-modal__error {
    margin: 10px 0 0; font-size: .85rem; color: var(--c-danger, #ef4444);
}
/* Ruhige Bestätigungs-Ansicht nach dem Absenden */
.report-modal__done { text-align: center; padding: 14px 8px 4px; }
.report-modal__done-icon { display: inline-flex; color: var(--c-accent); }
.report-modal__done-icon svg { width: 40px; height: 40px; }
.report-modal__done-text {
    margin: 12px auto 0; max-width: 320px;
    font-size: .95rem; line-height: 1.5; color: var(--c-text);
}
.report-modal__done .report-modal__foot { justify-content: center; }

/* --- Generischer Bestätigungsdialog (data-confirm, z. B. Blockieren) --- */
.confirm-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    z-index: 960;
}
.confirm-backdrop.is-open { display: block; }
.confirm-modal {
    display: none; position: fixed; inset: 0; z-index: 961;
    align-items: center; justify-content: center; padding: 20px;
}
.confirm-modal.is-open { display: flex; }
.confirm-modal__panel {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); width: 100%; max-width: 380px; padding: 22px;
    box-shadow: var(--shadow-modal);
}
.confirm-modal__text { margin: 0 0 18px; font-size: .98rem; line-height: 1.5; color: var(--c-text); }
.confirm-modal__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* --- Blockierliste (/settings/blocked) --- */
.blocklist { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.blocklist__row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.blocklist__avatar { flex-shrink: 0; text-decoration: none; }
.blocklist__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.blocklist__name { font-weight: 600; color: var(--c-text); text-decoration: none; }
.blocklist__name:hover { color: var(--c-accent); }
.blocklist__kind { font-size: .76rem; font-weight: 600; }
.blocklist__kind--block { color: var(--c-danger, #ef4444); }
.blocklist__kind--mute  { color: var(--c-text-muted); }
.blocklist__form { flex-shrink: 0; }
@media (max-width: 500px) {
    .blocklist__row { flex-wrap: wrap; }
    .blocklist__form, .blocklist__form .btn { width: 100%; }
}

/* =====================================================================
   Benachrichtigungen-Seite (Ziel der Glocke im Header)
   ===================================================================== */

.notif-page { max-width: 680px; }
.notif-page__head { margin: 0 0 14px; }
.notif-page__title { font-size: 1.25rem; font-weight: 700; color: var(--c-text); margin: 0; }

.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.notif-item--unread {
    border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
    background: color-mix(in srgb, var(--c-accent) 7%, var(--c-surface));
}
.notif-item__avatar { flex-shrink: 0; text-decoration: none; }
.notif-item__body { min-width: 0; flex: 1; }
.notif-item__text { margin: 0 0 4px; font-size: .92rem; color: var(--c-text); line-height: 1.5; }
.notif-item__actor { color: var(--c-accent); font-weight: 600; text-decoration: none; }
.notif-item__actor:hover { text-decoration: underline; }
.notif-item__excerpt {
    margin: 0 0 6px;
    font-size: .88rem;
    color: var(--c-text-muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.notif-item__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.notif-item__time { font-size: .78rem; color: var(--c-text-dim); }
.notif-item__link { font-size: .8rem; font-weight: 600; color: var(--c-accent); text-decoration: none; }
.notif-item__link:hover { text-decoration: underline; }
.notif-item__gone { font-size: .78rem; color: var(--c-text-dim); font-style: italic; }

.notif-empty {
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-lg);
    color: var(--c-text-muted);
}
.notif-empty__icon { display: inline-flex; color: var(--c-text-dim); }
.notif-empty__icon svg { width: 40px; height: 40px; }
.notif-empty__title { font-size: 1rem; font-weight: 600; color: var(--c-text); margin: 10px 0 4px; }
.notif-empty__sub { font-size: .9rem; margin: 0; }

/* Kopf der Hashtag-Seite */
.hashtag-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 2px 0 18px;
}
.hashtag-head__badge {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-accent);
    background: var(--c-accent-glow);
    border-radius: var(--radius);
}
.hashtag-head__title { margin: 0; font-size: 1.5rem; }
.hashtag-head__count { margin: 2px 0 0; color: var(--c-text-muted); font-size: .85rem; }

/* =====================================================================
   Entdecken-Bereich (Suche, Themen, Updates, Beta-Feedback)
   ---------------------------------------------------------------------
   Gemeinsamer .discover-Wrapper. Funktioniert in beiden Layouts: in der
   Dashboard-Shell (eingeloggt) sitzt er in .dash-main, im Basis-Layout
   (ausgeloggt) zentriert er sich selbst. Ruhiger, eigenständiger MALU-Look.
   ===================================================================== */
.discover {
    max-width: 720px;
    margin: 0 auto;
}
/* Im öffentlichen Basis-Layout etwas Außenabstand geben. */
.site-main .discover { padding: var(--space-5) var(--space-4) var(--space-7); }

/* Breitenvarianten (greifen in beiden Layouts):
   --wide / --split nutzen den Platz für Karten/Spalten, --feed bleibt als
   Lesespalte angenehm schmal. */
.discover--wide,
.discover--split { max-width: 1080px; }
.discover--feed  { max-width: 760px; }

/* Eingeloggt (Dashboard-Shell): den Main-Bereich breiter nutzen und links
   ausrichten – neben der rechten Sidebar, kein schmaler, schwebender Block. */
.dash-main .discover       { max-width: 1080px; margin-inline: 0; }
.dash-main .discover--feed { max-width: 760px; }

.discover__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 2px 0 20px;
}
.discover__badge {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c-accent);
    background: var(--c-accent-glow);
    border-radius: var(--radius);
}
.discover__badge svg { width: 24px; height: 24px; }
.discover__badge--tag    { color: var(--c-hashtag); background: rgba(167,139,250,.14); }
.discover__badge--beta   { color: var(--c-hashtag); background: rgba(167,139,250,.14); }
.discover__badge--update { color: var(--c-success); background: rgba(67,233,123,.12); }
.discover__badge--search { color: var(--c-accent); background: var(--c-accent-glow); }
.discover__badge--new    { color: var(--c-accent); background: var(--c-accent-glow); }
.discover__badge--support{ color: var(--c-success); background: rgba(67,233,123,.12); }
.discover__title { margin: 0; font-size: 1.5rem; font-weight: 800; color: var(--c-text); }
.discover__lead  { margin: 3px 0 0; color: var(--c-text-muted); font-size: .92rem; line-height: 1.45; }

.discover__section {
    margin: 26px 0 12px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

/* Hinweis-/Feature-Karte (z. B. Beta-Feedback auf /themen). */
.discover__feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color .15s, transform .15s, background .15s;
}
.discover__feature:hover {
    border-color: var(--c-hashtag);
    background: var(--c-surface-2);
    transform: translateY(-1px);
    text-decoration: none;
}
.discover__feature-icon {
    width: 42px; height: 42px;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-hashtag);
    background: rgba(167,139,250,.14);
    border-radius: var(--radius);
}
.discover__feature-icon svg { width: 22px; height: 22px; }
.discover__feature-body { flex: 1 1 auto; min-width: 0; }
.discover__feature-title { display: block; color: var(--c-text); font-size: 1rem; font-weight: 700; }
.discover__feature-sub { display: block; color: var(--c-text-muted); font-size: .85rem; line-height: 1.35; }
.discover__feature-go { flex: 0 0 auto; color: var(--c-text-muted); }
.discover__feature-go svg { width: 20px; height: 20px; }

/* Tag-Wolke (Hashtags, Themen, Beta-Hashtags). */
.discover__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}
.discover-tag {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.discover-tag:hover {
    border-color: var(--c-hashtag);
    background: var(--c-surface-2);
    transform: translateY(-1px);
    text-decoration: none;
}
.discover-tag__name  { color: var(--c-hashtag); font-weight: 700; font-size: .92rem; line-height: 1.1; }
.discover-tag__count { color: var(--c-text-dim); font-size: .72rem; }
.discover-tag--soft .discover-tag__name { color: var(--c-text); }
.discover-tag--beta { border-color: rgba(167,139,250,.4); }
.discover-tag--beta .discover-tag__name { color: var(--c-hashtag); }

/* Profil-Treffer in der Suche. */
.discover-people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.discover-person__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.discover-person__link:hover { border-color: var(--c-accent); background: var(--c-surface-2); text-decoration: none; }
.discover-person__name { color: var(--c-text); font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Suchfeld auf der Entdecken-Seite. */
.discover-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.discover-search__icon {
    position: absolute;
    left: 14px;
    color: var(--c-text-muted);
    pointer-events: none;
    display: flex;
}
.discover-search__icon svg { width: 18px; height: 18px; }
.discover-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px 12px 42px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    color: var(--c-text);
    font-size: .95rem;
}
.discover-search__input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: var(--focus-ring);
}
.discover-search__btn { flex: 0 0 auto; border-radius: var(--radius-pill); }
.discover__result-count { margin: 0 0 4px; color: var(--c-text-muted); font-size: .88rem; }

/* Empty-/Leerzustände. */
.discover__empty {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-5);
    text-align: center;
}
.discover__empty--lg { padding: var(--space-7) var(--space-5); }
.discover__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    margin-bottom: 12px;
    color: var(--c-text-muted);
    background: var(--c-bg);
    border-radius: 50%;
}
.discover__empty-icon svg { width: 26px; height: 26px; }
.discover__empty-title { margin: 0 0 4px; color: var(--c-text); font-size: 1.05rem; font-weight: 700; }
.discover__empty-sub { margin: 0; color: var(--c-text-muted); font-size: .9rem; line-height: 1.45; }
.discover__footnote { margin: 22px 0 0; color: var(--c-text-dim); font-size: .8rem; line-height: 1.5; }

.discover__compose { margin-bottom: 8px; }
.service-grid--discover { grid-template-columns: 1fr; }

/* ── MALU-Updates: News-Karten (offizielle Team-Beiträge) ─────────── */
.update-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.update-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 18px 20px 14px;
}
.update-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.update-card__avatar {
    width: 38px; height: 38px;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-accent-glow);
    border-radius: var(--radius-md);
}
.update-card__avatar img { width: 24px; height: 24px; }
.update-card__source { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.update-card__author { display: inline-flex; align-items: center; gap: 5px; color: var(--c-text); font-weight: 700; font-size: .95rem; }
.update-card__verified { display: inline-flex; width: 15px; height: 15px; align-items: center; justify-content: center; color: #06222e; background: var(--c-accent); border-radius: 50%; }
.update-card__verified svg { width: 10px; height: 10px; }
.update-card__byline { color: var(--c-text-dim); font-size: .78rem; }
.update-card__tag {
    flex: 0 0 auto;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius-pill);
}
.update-card__tag--new      { color: #06222e; background: var(--c-accent); }
.update-card__tag--improved { color: var(--c-success); background: rgba(67,233,123,.12); }
.update-card__tag--note     { color: var(--c-hashtag); background: rgba(167,139,250,.14); }
.update-card__title { margin: 0 0 6px; font-size: 1.12rem; font-weight: 700; color: var(--c-text); }
.update-card__text { margin: 0; color: var(--c-text-muted); font-size: .94rem; line-height: 1.55; }
.update-card__foot {
    display: flex; align-items: center; gap: 16px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--c-border-soft, var(--c-border));
    color: var(--c-text-dim);
}
.update-card__react { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.update-card__react svg { width: 16px; height: 16px; }
.update-card__soon {
    margin-left: auto;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 8px; border-radius: var(--radius-pill);
    color: var(--c-text-muted); background: var(--c-surface-2); border: 1px solid var(--c-border);
}

/* =====================================================================
   News & Updates (öffentliche Übersicht /news + Detailseite)
   ===================================================================== */
.news-list { display: grid; gap: 14px; margin: 0; padding: 0; }

.news-card {
    display: flex; flex-direction: column;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s ease, transform .15s ease;
}
.news-card:hover { border-color: var(--c-accent); transform: translateY(-1px); }
.news-card__cover { display: block; aspect-ratio: 16 / 7; background: var(--c-surface-2); }
.news-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__body { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.news-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.news-card__date { color: var(--c-text-dim); font-size: .8rem; margin-left: auto; }
.news-card__title { margin: 0; font-size: 1.16rem; font-weight: 800; line-height: 1.3; }
.news-card__title a { color: var(--c-text); }
.news-card__title a:hover { color: var(--c-accent); text-decoration: none; }
.news-card__teaser { margin: 0; color: var(--c-text-muted); font-size: .94rem; line-height: 1.55; }
.news-card__foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.news-card__author { color: var(--c-text-muted); font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.news-card__role {
    font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill);
    color: var(--c-accent); background: var(--c-accent-glow);
}
.news-card__more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--c-accent); font-size: .85rem; font-weight: 700; }
.news-card__more svg { width: 15px; height: 15px; }

/* Kategorie-Badges (geteilt: Übersicht + Detail) */
.news-cat {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap;
    color: var(--c-text-muted); background: var(--c-surface-2); border: 1px solid var(--c-border);
}
.news-cat--update      { color: var(--c-accent);  background: var(--c-accent-glow); border-color: transparent; }
.news-cat--beta        { color: var(--c-hashtag); background: rgba(167,139,250,.14); border-color: transparent; }
.news-cat--maintenance { color: var(--c-warn);    background: var(--c-warn-bg);     border-color: transparent; }
.news-cat--security    { color: var(--c-danger);  background: rgba(244,67,54,.12);  border-color: transparent; }
.news-cat--community   { color: var(--c-success); background: rgba(67,233,123,.12); border-color: transparent; }
.news-cat--development { color: var(--c-hashtag);          background: color-mix(in srgb, var(--c-hashtag) 14%, transparent); border-color: transparent; }
.news-cat--note        { color: var(--c-text-muted); background: var(--c-surface-2); }
.news-cat--pinned      { color: var(--c-accent);  background: transparent; border-color: var(--c-accent); }

/* Detailseite */
.news-detail__back { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-muted); font-size: .9rem; font-weight: 600; margin-bottom: 16px; }
.news-detail__back:hover { color: var(--c-accent); text-decoration: none; }
.news-detail__back svg { width: 18px; height: 18px; }
.news-article {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
}
.news-article__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.news-article__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.news-article__title { margin: 0; font-size: 1.7rem; font-weight: 800; line-height: 1.25; color: var(--c-text); }
.news-article__byline { display: flex; align-items: center; gap: 10px; }
.news-article__avatar { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.news-article__avatar img { width: 18px; height: 18px; }
.news-article__author { color: var(--c-text); font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.news-article__cover { margin: 0 0 18px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-border); }
.news-article__cover img { width: 100%; height: auto; display: block; }
.news-article__caption { margin: 0; padding: 8px 12px; color: var(--c-text-dim); font-size: .8rem; background: var(--c-surface-2); }
.news-article__body { color: var(--c-text); font-size: 1rem; line-height: 1.7; }
.news-article__body p { margin: 0 0 14px; }
.news-article__body p:last-child { margin-bottom: 0; }

/* =====================================================================
   Privates Beta-Feedback (eigene Übersicht /feedback)
   ===================================================================== */
.form-label__opt { color: var(--c-text-dim); font-weight: 400; font-size: .85em; }

.feedback-mine { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.feedback-mine__item {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.feedback-mine__main { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.feedback-mine__cat { font-size: .74rem; font-weight: 700; color: var(--c-text-muted); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--c-surface-2); border: 1px solid var(--c-border); white-space: nowrap; }
.feedback-mine__title { color: var(--c-text); font-weight: 600; font-size: .94rem; }
.feedback-mine__side { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.feedback-mine__date { color: var(--c-text-dim); font-size: .8rem; }
.feedback-status {
    font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill);
    color: var(--c-text-muted); background: var(--c-surface-2); border: 1px solid var(--c-border); white-space: nowrap;
}
.feedback-status--new    { color: var(--c-warn);    background: var(--c-warn-bg);     border-color: transparent; }
.feedback-status--info   { color: var(--c-accent);  background: var(--c-accent-glow); border-color: transparent; }
.feedback-status--ok     { color: var(--c-success); background: rgba(67,233,123,.12); border-color: transparent; }
.feedback-status--danger { color: var(--c-danger);  background: rgba(244,67,54,.12);  border-color: transparent; }
.feedback-status--muted  { color: var(--c-text-dim); background: var(--c-surface-2); }

/* =====================================================================
   Housekeeping – Detail-Helfer (Definitionsliste, Prosa, Notizen)
   ===================================================================== */
.hk-back { display: inline-block; color: var(--c-text-muted); font-size: .85rem; font-weight: 600; margin-bottom: 8px; }
.hk-back:hover { color: var(--c-accent); text-decoration: none; }
.hk-deflist { display: grid; gap: 8px; margin: 0 0 16px; }
.hk-deflist > div { display: flex; gap: 10px; flex-wrap: wrap; }
.hk-deflist dt { color: var(--c-text-dim); font-size: .85rem; min-width: 180px; margin: 0; }
.hk-deflist dd { color: var(--c-text); font-size: .9rem; margin: 0; font-weight: 600; }
.hk-prose { color: var(--c-text); font-size: .96rem; line-height: 1.65; }
.hk-prose p { margin: 0 0 12px; }
.hk-prose p:last-child { margin-bottom: 0; }
.hk-notes { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.hk-notes__item { padding: 10px 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.hk-notes__meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.hk-notes__meta strong { color: var(--c-text); font-size: .85rem; }
.hk-notes__meta time { color: var(--c-text-dim); font-size: .78rem; }
.hk-notes__body { margin: 0; color: var(--c-text-muted); font-size: .9rem; line-height: 1.5; }

/* =====================================================================
   Beta-Onboarding (fokussiertes Layout + ruhiger Schritt-Modus)
   ===================================================================== */
.onb-body { background: var(--c-bg); min-height: 100vh; }
.onb {
    min-height: 100vh; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 14px; padding: var(--space-5) var(--space-4);
}
.onb__card {
    width: 100%; max-width: 560px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    padding: 26px 28px;
}
.onb__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.onb__logo { width: 30px; height: 30px; border-radius: var(--radius-sm); }
.onb__wordmark { font-size: 1.1rem; font-weight: 800; letter-spacing: .04em; color: var(--c-text); }
.onb__beta-pill {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 2px 9px; border-radius: var(--radius-pill);
    color: var(--c-hashtag); background: rgba(167,139,250,.14);
}
.onb__foot { margin: 0; }
.onb__foot a { color: var(--c-text-dim); font-size: .85rem; }
.onb__foot a:hover { color: var(--c-accent); }

.onb-note {
    margin: 0 0 16px; padding: 10px 12px; font-size: .86rem; line-height: 1.5;
    color: var(--c-text-muted); background: var(--c-surface-2);
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
}

/* Fortschritt */
.onb-progress { margin-bottom: 18px; }
.onb-progress__text { margin: 0 0 8px; color: var(--c-text-dim); font-size: .8rem; font-weight: 600; }
.onb-progress__dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.onb-progress__dot {
    flex: 1 1 0; height: 5px; border-radius: var(--radius-pill);
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    transition: background-color .2s ease, border-color .2s ease;
}
.onb-progress__dot.is-active { background: var(--c-accent); border-color: transparent; }

/* Schritte */
.onb-steps { margin: 0; }
.onb-step { animation: onb-fade .25s ease; }
.onb-step[hidden] { display: none !important; }   /* hidden/display-Falle vermeiden */
.onb-step + .onb-step { margin-top: 22px; }        /* No-JS: Abstand zwischen Schritten */
.onb-step__title { margin: 0 0 8px; font-size: 1.35rem; font-weight: 800; color: var(--c-text); line-height: 1.25; }
.onb-step__title:focus { outline: none; }
.onb-step__title:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: var(--radius-xs); }
.onb-step__lead { margin: 0 0 10px; color: var(--c-text); font-size: 1rem; line-height: 1.6; }
.onb-step__text { margin: 0 0 10px; color: var(--c-text-muted); font-size: .94rem; line-height: 1.6; }
.onb-step__note { margin: 6px 0 0; color: var(--c-text-muted); font-size: .9rem; }
.onb-step__note--strong { color: var(--c-text); font-weight: 700; }
.onb-step__cta { margin-top: 6px; }

.onb-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.onb-list li { display: flex; }
.onb-list__on, .onb-list__soon {
    display: inline-flex; align-items: center; gap: 8px; width: 100%;
    padding: 9px 12px; border-radius: var(--radius-sm);
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    color: var(--c-text); font-size: .92rem; font-weight: 600;
}
/* Status nicht nur über Farbe: „on" mit Häkchen-Punkt, „soon" mit Tag-Text. */
.onb-list__on::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-success); flex: 0 0 auto;
}
.onb-list__soon { color: var(--c-text-muted); }
.onb-list__soon::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--c-text-dim); flex: 0 0 auto;
}
.onb-tag {
    margin-left: auto; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 8px; border-radius: var(--radius-pill);
    color: var(--c-warn); background: var(--c-warn-bg);
}

.onb-rules { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.onb-rules li { color: var(--c-text-muted); font-size: .94rem; line-height: 1.5; }

.onb-help-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.onb-divider { margin: 22px 0; border: 0; border-top: 1px solid var(--c-border); }

.onb-finish { display: flex; flex-direction: column; gap: 14px; }
.onb-confirm { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.onb-confirm input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--c-accent); }
.onb-confirm span { color: var(--c-text); font-size: .94rem; line-height: 1.5; }
.onb-finish__btn { align-self: flex-start; }

.onb-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.onb-nav [data-onb-prev] { margin-right: auto; }
.onb-nav [data-onb-next] { margin-left: auto; }

@keyframes onb-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .onb-step { animation: none; }
    .onb-progress__dot { transition: none; }
}

@media (max-width: 520px) {
    .onb__card { padding: 22px 18px; }
    .onb-step__title { font-size: 1.2rem; }
    .onb-finish__btn { align-self: stretch; }
}

/* =====================================================================
   Hilfsangebote-Verzeichnis 1.0 – Ergänzungen (Karte/Detail/HK)
   ===================================================================== */
.service-card__cat {
    margin-left: auto; font-size: .74rem; font-weight: 700;
    padding: 2px 9px; border-radius: var(--radius-pill);
    color: var(--c-text-muted); background: var(--c-surface-2); border: 1px solid var(--c-border);
}
.tag--crisis { color: var(--c-warn); background: var(--c-warn-bg); border-color: transparent; }

.service-detail__type { margin: 0 0 10px; color: var(--c-text-muted); font-size: .95rem; }

.service-crisis-note {
    display: flex; gap: 12px; align-items: flex-start;
    margin: 0 0 16px; padding: 12px 14px;
    background: var(--c-warn-bg); border: 1px solid rgba(255,167,38,.35);
    border-radius: var(--radius-sm);
}
.service-crisis-note__icon { color: var(--c-warn); flex: 0 0 auto; margin-top: 1px; }
.service-crisis-note__icon svg { width: 20px; height: 20px; }
.service-crisis-note p { margin: 0; color: var(--c-text-muted); font-size: .9rem; line-height: 1.55; }
.service-crisis-note strong { color: var(--c-text); }

/* Housekeeping: Status/Permission-Subpanel im Bearbeiten-Bereich */
.hk-subpanel {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border);
    display: flex; flex-direction: column; gap: 12px;
}

/* =====================================================================
   Hilfsangebote / Anlaufstellen – Politur (Desktop)
   ===================================================================== */
.support-emergency {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 0 0 var(--space-5);
    padding: 14px 16px;
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-border);
    border-radius: var(--radius);
}
.support-emergency__icon { flex: 0 0 auto; color: var(--c-warn); display: flex; margin-top: 2px; }
.support-emergency__icon svg { width: 22px; height: 22px; }
.support-emergency__body strong { display: block; color: var(--c-text); font-size: .95rem; margin-bottom: 2px; }
.support-emergency__body p { margin: 0; color: var(--c-text-muted); font-size: .87rem; line-height: 1.5; }

.support-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--space-5);
}
.support-cat {
    padding: 7px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    color: var(--c-text-muted);
    font-size: .86rem;
    text-decoration: none;
    transition: border-color .15s, color .15s, background .15s;
}
.support-cat:hover { border-color: var(--c-accent); color: var(--c-text); text-decoration: none; }
.support-cat--active { background: var(--c-accent); border-color: var(--c-accent); color: #06222e; font-weight: 600; }

.support-empty__title { margin: 0 0 4px; color: var(--c-text); font-weight: 700; }
.support-empty__sub { margin: 0; color: var(--c-text-muted); font-size: .9rem; line-height: 1.45; }

.support-disclaimer {
    margin: var(--space-5) 0 0;
    color: var(--c-text-dim);
    font-size: .8rem;
    line-height: 1.55;
}

/* =====================================================================
   Themen: zweispaltiger Filterbereich INNERHALB des Main-Bereichs
   (nicht die globale App-Sidebar – die bleibt ganz links bestehen).
   ===================================================================== */
.topics-split { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 1000px) {
    .topics-split { grid-template-columns: 300px minmax(0, 1fr); }
    .topics-aside { position: sticky; top: var(--space-4); }
}
.topics-group { margin-bottom: 20px; }
.topics-group__title { margin: 0 0 10px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); }
.topics-group__hint { margin: 8px 0 0; color: var(--c-text-dim); font-size: .8rem; line-height: 1.45; }
.topic-pills { display: flex; flex-direction: column; gap: 6px; }
.topic-pill {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.topic-pill:hover { border-color: var(--c-hashtag); background: var(--c-surface-2); transform: translateX(2px); text-decoration: none; }
.topic-pill__name { color: var(--c-hashtag); font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-pill__count { flex: 0 0 auto; color: var(--c-text-dim); font-size: .76rem; background: var(--c-bg); border-radius: var(--radius-pill); padding: 1px 8px; }
.topic-pill--active { border-color: var(--c-hashtag); background: rgba(167,139,250,.12); }
.topic-pill--active .topic-pill__name { color: var(--c-hashtag); }
.topic-pill--active .topic-pill__count { color: var(--c-hashtag); background: rgba(167,139,250,.18); }

.topics-feature {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-top: 4px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.topics-feature:hover { border-color: var(--c-hashtag); background: var(--c-surface-2); transform: translateY(-1px); text-decoration: none; }
.topics-feature__icon { width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--c-hashtag); background: rgba(167,139,250,.14); border-radius: var(--radius-md); }
.topics-feature__icon svg { width: 20px; height: 20px; }
.topics-feature__body { display: flex; flex-direction: column; min-width: 0; }
.topics-feature__title { color: var(--c-text); font-weight: 700; font-size: .95rem; }
.topics-feature__sub { color: var(--c-text-muted); font-size: .82rem; }

.topics-main__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.topics-main__title { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--c-hashtag); }
.topics-main__count { color: var(--c-text-dim); font-size: .85rem; }

/* =====================================================================
   Beta-Feedback: Hero (stärkerer Beta-Charakter)
   ===================================================================== */
.beta-hero {
    position: relative; overflow: hidden;
    margin: 0 0 18px;
    padding: 24px 22px;
    border: 1px solid rgba(167,139,250,.32);
    border-radius: var(--radius-lg, 16px);
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(167,139,250,.18), transparent 60%),
        linear-gradient(135deg, rgba(124,58,237,.16), rgba(109,211,255,.06));
}
.beta-hero__main { position: relative; }
.beta-hero__badge { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--c-hashtag); background: rgba(167,139,250,.18); border-radius: var(--radius); vertical-align: middle; }
.beta-hero__badge svg { width: 24px; height: 24px; }
.beta-hero__pill { display: inline-block; margin-left: 10px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-hashtag); background: rgba(167,139,250,.18); border: 1px solid rgba(167,139,250,.35); border-radius: var(--radius-pill); padding: 3px 10px; vertical-align: middle; }
.beta-hero__title { margin: 12px 0 4px; font-size: 1.6rem; font-weight: 800; color: var(--c-text); }
.beta-hero__lead { margin: 0 0 14px; color: var(--c-text-muted); font-size: .98rem; line-height: 1.5; max-width: 560px; }
.beta-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.beta-chip { display: inline-block; padding: 6px 12px; font-weight: 700; font-size: .85rem; color: var(--c-hashtag); background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.35); border-radius: var(--radius-pill); text-decoration: none; transition: background .15s, transform .15s; }
.beta-chip:hover { background: rgba(167,139,250,.2); transform: translateY(-1px); text-decoration: none; }
.beta-hero__note { margin: 0; color: var(--c-text-dim); font-size: .82rem; }

/* =====================================================================
   Hilfsangebote: Städte-Schnellauswahl + vorgeschlagene Kacheln
   ===================================================================== */
.support-cities { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--space-5); }
.support-cities__label { color: var(--c-text-dim); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.support-city { padding: 7px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-pill); color: var(--c-text-muted); font-size: .86rem; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.support-city:hover { border-color: var(--c-accent); color: var(--c-text); text-decoration: none; }
.support-city--active { background: var(--c-accent); border-color: var(--c-accent); color: #06222e; font-weight: 600; }

.support-featured { margin: 0 0 var(--space-5); }
.support-featured__title { margin: 0 0 12px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); }
.support-featured__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 760px) { .support-featured__grid { grid-template-columns: repeat(3, 1fr); } }
.support-feature-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px 16px 14px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.support-feature-card__ribbon { align-self: flex-start; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #06222e; background: var(--c-accent); border-radius: var(--radius-pill); padding: 2px 9px; }
.support-feature-card__name { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--c-text); }
.support-feature-card__place { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--c-text-muted); font-size: .85rem; }
.support-feature-card__place svg { width: 14px; height: 14px; flex: 0 0 auto; }
.support-feature-card__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.support-feature-card__rating { color: #e6b800; font-weight: 600; font-size: .85rem; }
.support-feature-card__more { margin-top: 4px; align-self: flex-start; }

/* =====================================================================
   Hilfsangebote: kompakte, horizontale Filterleiste
   (ersetzt den großen linken Filterblock – breite Suche oben, Felder darunter)
   ===================================================================== */
.help-filter {
    display: flex; flex-direction: column; gap: 12px;
    margin: 0 0 var(--space-4); padding: 14px 16px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.help-filter__searchrow { display: flex; align-items: center; gap: 10px; }
.help-filter__icon { flex: 0 0 auto; display: flex; color: var(--c-text-dim); }
.help-filter__icon svg { width: 20px; height: 20px; }
.help-filter__search {
    flex: 1 1 auto; min-width: 0;
    padding: 10px 12px; font-size: .95rem; color: var(--c-text);
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.help-filter__search:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); }
.help-filter__submit { flex: 0 0 auto; }
.help-filter__fields { display: flex; flex-wrap: wrap; gap: 10px; }
.help-filter__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 140px; }
.help-filter__flabel { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--c-text-dim); }
.help-filter__field .form-input { margin: 0; }
.help-filter__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.help-filter__checks { display: flex; flex-wrap: wrap; gap: 16px; }
.help-filter__checks .form-check { margin: 0; }
.help-filter__buttons { display: flex; align-items: center; gap: 8px; }
.help-results { margin-top: var(--space-2); }
.help-results .support-count { margin: 0 0 var(--space-4); }

/* =====================================================================
   MALU-Support (/support): Plattform-Hilfe – Ticket + Live-Support
   (eigene Optik, getrennt von den Hilfsangeboten oben)
   ===================================================================== */
.support-options { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin: 0 0 var(--space-5); }
@media (min-width: 760px) { .support-options { grid-template-columns: 1fr 1fr; } }
.support-option {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 20px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg, 16px);
}
.support-option__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; color: var(--c-accent); background: var(--c-accent-glow); border-radius: var(--radius);
}
.support-option__icon svg { width: 24px; height: 24px; }
.support-option--live .support-option__icon { color: var(--c-text-muted); background: var(--c-surface-2); }
.support-option__title { margin: 6px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 1.12rem; font-weight: 700; color: var(--c-text); }
.support-option__text { flex: 1 1 auto; margin: 0; color: var(--c-text-muted); font-size: .92rem; line-height: 1.5; }
.support-option__cta { margin-top: 10px; }
.support-soon-pill { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-pill); padding: 3px 9px; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }

.support-form { padding: 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg, 16px); scroll-margin-top: 80px; }
.support-form__title { margin: 0 0 var(--space-4); font-size: 1.2rem; font-weight: 800; color: var(--c-text); }
.support-form__textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.support-form__err { margin: 6px 0 0; color: var(--c-danger); font-size: .82rem; }
.support-form__hints { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 var(--space-4); }
.support-form__hint { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--c-text-muted); font-size: .85rem; line-height: 1.5; }
.support-form__hint svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--c-text-dim); }
.support-form__hint--warn { color: var(--c-text); }
.support-form__hint--warn svg { color: var(--c-warn); }
.support-form__foot { display: flex; justify-content: flex-end; }

/* =====================================================================
   Community: breite Desktop-Ansicht (Mobile bleibt .mc, per Breite getauscht)
   ===================================================================== */
.community-desktop { display: none; }
.community-mobile  { display: block; }
@media (min-width: 768px) {
    .community-desktop { display: block; }
    .community-mobile  { display: none; }
}

.community-hero { text-align: center; max-width: 640px; margin: 0 auto 22px; }
.community-hero__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; color: var(--c-accent); background: var(--c-accent-glow); border-radius: var(--radius-lg); }
.community-hero__icon svg { width: 28px; height: 28px; }
.community-hero__title { margin: 14px 0 6px; font-size: 1.7rem; font-weight: 800; color: var(--c-text); }
.community-hero__lead { margin: 0; color: var(--c-text-muted); font-size: .98rem; line-height: 1.55; }

.community-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.community-tab { padding: 8px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-pill); color: var(--c-text-muted); font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.community-tab:hover { border-color: var(--c-accent); color: var(--c-text); }
.community-tab.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #06222e; }

.community-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 1000px) { .community-cols { grid-template-columns: minmax(0,1fr) 300px; } }
.community-section { margin: 0 0 12px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); }
.community-main .community-section:not(:first-child) { margin-top: 24px; }

.community-grid { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .community-grid { grid-template-columns: repeat(2, 1fr); } }
.community-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.community-card__cover { width: 44px; height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); }
.community-card__cover svg { width: 22px; height: 22px; color: #fff; }
.community-card--cyan   .community-card__cover { background: linear-gradient(135deg,#06b6d4,#3b82f6); }
.community-card--violet .community-card__cover { background: linear-gradient(135deg,#7c3aed,var(--c-hashtag)); }
.community-card--blue   .community-card__cover { background: linear-gradient(135deg,#3b82f6,#1d4ed8); }
.community-card--green  .community-card__cover { background: linear-gradient(135deg,#22c55e,#16a34a); }
.community-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.community-card__name { color: var(--c-text); font-weight: 700; font-size: .96rem; }
.community-card__sub  { color: var(--c-text-muted); font-size: .84rem; line-height: 1.35; }
.community-card__meta { color: var(--c-text-dim); font-size: .76rem; margin-top: 3px; }
.community-card__btn { flex: 0 0 auto; align-self: flex-start; font-size: .72rem; font-weight: 700; color: var(--c-text-muted); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-pill); padding: 4px 12px; }

.community-side { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px; }
.community-rank { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.community-rank__item { display: flex; align-items: center; gap: 12px; }
.community-rank__num { width: 26px; height: 26px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; color: var(--c-text-muted); background: var(--c-bg); border-radius: 50%; }
.community-rank__body { display: flex; flex-direction: column; min-width: 0; }
.community-rank__name { color: var(--c-text-muted); font-weight: 600; font-size: .9rem; }
.community-rank__meta { color: var(--c-text-dim); font-size: .76rem; }
.community-side__hint { margin: 0; color: var(--c-text-dim); font-size: .8rem; line-height: 1.45; }

/* =====================================================================
   Nutzer-Einstellungen (/settings)
   ---------------------------------------------------------------------
   Ruhiges, hochwertiges dunkles Design mit weichen Cards und einem
   eigenständigen MALU-Toggle (cyan→violett, sanfte Animation). Lebt in
   der Dashboard-App-Shell; rendert in .dash-main.
   ===================================================================== */
/* Kontrollzentrum: nutzt die volle Breite des Hauptbereichs (linksbündig),
   statt schmal in der Mitte zu kleben. Cap hält die Lesbarkeit auf XXL-Screens. */
.settings { max-width: 1200px; margin: 0; }

.settings__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.settings__badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: var(--radius-lg); color: var(--c-accent);
    background: var(--c-accent-glow); border: 1px solid rgba(109,211,255,0.25); }
.settings__badge svg { width: 24px; height: 24px; }
.settings__title { margin: 2px 0 4px; font-size: 1.7rem; font-weight: 800; }
.settings__lead { margin: 0; color: var(--c-text-muted); font-size: .96rem; line-height: 1.5; }

.settings__note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px;
    padding: 12px 14px; border-radius: var(--radius); font-size: .86rem; line-height: 1.5;
    color: var(--c-text-muted); background: var(--c-accent-glow);
    border: 1px solid rgba(109,211,255,0.22); }
.settings__note svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--c-accent); }
.settings__note strong { color: var(--c-text); }

.settings__jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.settings__chip { padding: 7px 14px; border-radius: var(--radius-pill); font-size: .84rem;
    font-weight: 600; color: var(--c-text-muted); background: var(--c-surface);
    border: 1px solid var(--c-border); transition: border-color .15s, color .15s, background .15s; }
.settings__chip:hover { border-color: var(--c-accent); color: var(--c-text); text-decoration: none; }
.settings__chip--danger:hover { border-color: var(--c-danger); color: #ffb4ad; }

.settings__save { min-height: 1.1em; margin: -6px 0 14px; font-size: .85rem; font-weight: 600;
    color: var(--c-success); transition: opacity .2s; }
.settings__save.is-error { color: var(--c-danger); }

/* --- Karten-Raster ---------------------------------------------------
   Basis = eine Spalte (Karten füllen den Hauptbereich in voller Breite).
   Ab genügend Platz im Hauptbereich (Viewport ≥ 1340px, also nach Abzug der
   beiden Sidebars ~700px nutzbar) genau ZWEI Spalten – nie drei, damit die
   geplanten Paare (Mitteilungen|Privatsphäre, Darstellung|Beta) sauber sitzen
   und keine einsame Lücke entsteht. Greift sicher auf 1366/1440/1920. */
.settings__grid { display: grid; gap: 20px; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 1340px) { .settings__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Breite Karten spannen über beide Spalten (Profil, Sicherheit, Account). */
.set-card--wide { grid-column: 1 / -1; }

/* --- Cards ----------------------------------------------------------- */
.set-card { background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-lg); padding: 22px 24px; scroll-margin-top: 80px;
    transition: border-color .18s ease, box-shadow .18s ease; }
.set-card:hover { border-color: var(--c-border-strong, rgba(255,255,255,0.14)); }

.set-card__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.set-card__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius); color: var(--c-accent);
    background: var(--c-accent-glow); border: 1px solid rgba(109,211,255,0.22); }
.set-card__icon svg { width: 20px; height: 20px; }
.set-card__heading { min-width: 0; }
.set-card__title { margin: 1px 0 4px; font-size: 1.15rem; font-weight: 700; }
.set-card__sub { margin: 0; color: var(--c-text-muted); font-size: .88rem; line-height: 1.45; }

/* Ehrliche Fußnote: „gespeichert, Wirkung folgt mit dem Feature". */
.set-card__foot { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0;
    padding-top: 14px; border-top: 1px solid var(--c-border-soft);
    color: var(--c-text-dim); font-size: .8rem; line-height: 1.45; }
.set-card__foot svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--c-success); }

/* --- Liste aus Schaltern/Zeilen ------------------------------------- */
.set-list { display: flex; flex-direction: column; }

/* --- Toggle-Komponente ---------------------------------------------- */
.set-toggle, .set-row { display: flex; align-items: center; justify-content: space-between;
    gap: 18px; padding: 14px 0; border-top: 1px solid var(--c-border-soft); }
.set-list > .set-toggle:first-child, .set-list > .set-row:first-child { border-top: 0; }

.set-toggle__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-toggle__label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
    color: var(--c-text); font-weight: 600; font-size: .95rem; }
.set-toggle__desc { color: var(--c-text-muted); font-size: .84rem; line-height: 1.45; }
.set-toggle__desc--warn { color: var(--c-warn); }

.set-toggle--disabled .set-toggle__label { color: var(--c-text-muted); }
.set-toggle--disabled .set-toggle__desc { color: var(--c-text-dim); }

/* Pills (Bald verfügbar / Aktiv) */
.set-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-pill);
    font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.4; }
.set-pill--soon { color: var(--c-warn); background: var(--c-warn-bg); border: 1px solid var(--c-warn-border); }
.set-pill--on { color: var(--c-success); background: rgba(67,233,123,0.12); border: 1px solid rgba(67,233,123,0.35); }

/* Statisches Status-Chip (z. B. „Einmalig vergeben") – Aktion ohne Button. */
.set-tag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 600;
    color: var(--c-text-muted); background: var(--c-surface-2); border: 1px solid var(--c-border); white-space: nowrap; }
.set-tag svg { width: 14px; height: 14px; }

/* Der eigentliche Schalter: echtes Checkbox-Input, visuell als Schiene. */
.set-switch { position: relative; flex: 0 0 auto; width: 50px; height: 28px; }
.set-switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer; z-index: 2; }
.set-switch__input:disabled { cursor: not-allowed; }
.set-switch__track { position: absolute; inset: 0; border-radius: var(--radius-pill);
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    transition: background .2s ease, border-color .2s ease; }
.set-switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--c-text-muted);
    transition: transform .2s ease, background .2s ease; box-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* AN-Zustand: dezenter MALU-Verlauf (cyan→violett) mit sanftem Glow. */
.set-switch__input:checked + .set-switch__track {
    background: linear-gradient(135deg, var(--c-accent), var(--c-hashtag));
    border-color: transparent; box-shadow: 0 0 12px rgba(109,211,255,0.25); }
.set-switch__input:checked + .set-switch__track .set-switch__thumb {
    transform: translateX(22px); background: #0f0f10; }

/* Sichtbarer Tastatur-Fokus auf der Schiene. */
.set-switch__input:focus-visible + .set-switch__track {
    outline: 2px solid var(--c-accent); outline-offset: 2px; }

.set-switch__input:disabled + .set-switch__track { opacity: .55; }

/* Zeilen mit Aktion statt Schalter (z. B. „Verwalten") */
.set-row .btn { flex: 0 0 auto; }

/* --- Unterabschnitte (Sicherheit) ----------------------------------- */
.set-sub { padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--c-border-soft); }
.set-sub:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.set-sub__title { margin: 0 0 8px; font-size: .98rem; font-weight: 700; color: var(--c-text); }
.set-sub__lead { margin: 0 0 14px; color: var(--c-text-muted); font-size: .82rem; line-height: 1.5; }
.set-sub__lead strong { color: var(--c-text); }

/* Zwei-Spalten-Inhalt in breiten Karten (Sicherheit: Passwort | Konto-Schutz).
   Gleicher Breakpoint wie das Karten-Raster, damit Innen- und Außenlayout
   gemeinsam umschalten und die Spalten nie zu schmal werden. */
.set-split { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 1340px) {
    .set-card--wide .set-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
    /* In der 2-Spalten-Variante keine störenden Trennlinien oben. */
    .set-card--wide .set-split > .set-sub { padding-top: 0; margin-top: 0; border-top: 0; }
}

/* --- Profil-Zusammenfassung ----------------------------------------- */
.set-profile { display: grid; grid-template-columns: 1fr; gap: 18px; }
/* In der breiten Profilkarte: Identität links, Detail-Raster rechts. */
@media (min-width: 1340px) {
    .set-card--wide .set-profile { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
}
.set-profile__id { display: flex; flex-direction: column; gap: 2px; }
.set-profile__name { font-size: 1.15rem; font-weight: 700; color: var(--c-text); }
.set-profile__handle { color: var(--c-accent); font-size: .9rem; margin-bottom: 4px; }
.set-profile__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; }
.set-profile__item { background: var(--c-bg); border: 1px solid var(--c-border-soft);
    border-radius: var(--radius); padding: 10px 12px; min-width: 0; }
.set-profile__item dt { color: var(--c-text-dim); font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
.set-profile__item dd { margin: 0; color: var(--c-text); font-size: .9rem; word-break: break-word;
    display: flex; align-items: center; gap: 8px; }
.set-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%;
    border: 1px solid var(--c-border); flex: 0 0 auto; }
.set-muted { color: var(--c-text-dim); }

/* --- Aktionen / Formularfelder -------------------------------------- */
.set-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* In der schmalen Identitäts-Spalte: Buttons gestapelt, volle Breite. */
.set-actions--stack { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 18px; }
.set-actions--stack .btn { width: 100%; text-align: center; }
@media (min-width: 1340px) {
    .set-card--wide .set-actions--stack { max-width: 300px; }
}
/* Abgesetzte Zeile unter einem Block (z. B. „Benutzernamen ändern"). */
.set-list--bordered { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--c-border-soft); }
.set-form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.set-field { display: flex; flex-direction: column; gap: 5px; }
.set-field__label { font-size: .85rem; font-weight: 600; color: var(--c-text-muted); }
.set-field__hint { margin: 0; font-size: .78rem; color: var(--c-text-dim); }
.set-input { width: 100%; padding: 10px 12px; background: var(--c-bg); color: var(--c-text);
    border: 1px solid var(--c-border); border-radius: var(--radius); font-size: .92rem;
    font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.set-input:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); }
.set-input.is-invalid { border-color: var(--c-danger); }
.set-form__err { margin: 0; color: var(--c-danger); font-size: .82rem; }

/* --- Danger-Button --------------------------------------------------- */
.btn-danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.btn-danger:hover { filter: brightness(1.08); color: #fff; }
.btn-danger:disabled, .btn-danger[disabled] { opacity: .5; cursor: not-allowed; filter: none; }

/* --- Gefahrenbereich (Account löschen) ------------------------------
   Klar abgegrenzt, aber nicht grell: dezenter roter Rahmen, ruhige Fläche. */
.set-danger { margin-top: 22px; padding: 20px; border-radius: var(--radius-lg);
    border: 1px solid rgba(244,67,54,0.32); background: rgba(244,67,54,0.045); }
.set-danger__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.set-danger__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius); color: var(--c-danger);
    background: rgba(244,67,54,0.12); border: 1px solid rgba(244,67,54,0.3); }
.set-danger__icon svg { width: 22px; height: 22px; }
.set-danger__title { margin: 2px 0 2px; font-size: 1.05rem; font-weight: 700; color: #ff8a80; }
.set-danger__sub { margin: 0; color: var(--c-text-muted); font-size: .86rem; }
/* Auf breiten Karten: Erklärtext links, Bestätigungs-Formular rechts. */
.set-danger__body { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1340px) {
    .set-card--wide .set-danger__body { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 32px; align-items: start; }
}
.set-danger__prep { margin: 0 0 14px; padding: 11px 13px; border-radius: var(--radius);
    background: var(--c-warn-bg); border: 1px solid var(--c-warn-border);
    color: var(--c-text); font-size: .85rem; line-height: 1.55; }
.set-danger__prep strong { color: var(--c-warn); }
.set-danger__legal { margin: 0; color: var(--c-text-muted); font-size: .82rem; line-height: 1.6; }
.set-danger__form { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }

/* =====================================================================
   App-weite Darstellungs-Schalter (body-Klassen aus den Einstellungen)
   ===================================================================== */
/* Reduzierte Animationen: blendet Bewegungen/Übergänge weitgehend aus. */
body.malu-reduced-motion *,
body.malu-reduced-motion *::before,
body.malu-reduced-motion *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}
/* Kompakte Ansicht: engere Abstände (zunächst in den Einstellungen). */
body.malu-compact .settings__grid { gap: 14px; }
body.malu-compact .set-card { padding: 16px 18px; }
body.malu-compact .set-toggle,
body.malu-compact .set-row { padding: 11px 0; }
body.malu-compact .set-card__head { margin-bottom: 12px; }

/* =====================================================================
   Mobile: Settings sauber gestapelt, gut antippbar, kein Querscrollen.
   ===================================================================== */
@media (max-width: 768px) {
    .settings { max-width: 100%; }
    /* Alles gestapelt; minmax(330px) würde sonst auf schmalen Handys überlaufen. */
    .settings__grid { grid-template-columns: 1fr; gap: 16px; }
    .set-card { padding: 16px; border-radius: var(--radius); }
    .set-card__head { gap: 12px; margin-bottom: 14px; }
    .set-card__icon { width: 36px; height: 36px; }
    .set-profile__grid { grid-template-columns: 1fr 1fr; }
    .set-form, .set-danger__form { max-width: 100%; }
    .set-actions--stack { max-width: 100%; }
    /* Etwas größere Tap-Fläche für den Schalter auf dem Handy. */
    .set-switch { width: 52px; height: 30px; }
    .set-switch__thumb { width: 22px; height: 22px; }
    .set-switch__input:checked + .set-switch__track .set-switch__thumb { transform: translateX(22px); }
    .set-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* Sehr schmale Handys: Profil-Detailraster einspaltig (kein Querscrollen). */
@media (max-width: 420px) {
    .set-profile__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   SECTION 23 – Chats / Nachrichten (privater 1:1-Textchat)
   ---------------------------------------------------------------------
   Eigenständiger App-Bereich. Lebt in der bestehenden Dashboard-Shell
   (Header bleibt), aber ohne linke Nav-Sidebar und ohne rechte Standard-
   Sidebar (Layout-Flags $showLeftSidebar/$showRightSidebar = false).
   Mobile-first: je Route ist auf dem Handy nur EINE Spalte sichtbar
   (Übersicht = Liste, Detail = Verlauf); Desktop blendet die Spalten zu
   einem echten Chat-App-Layout zusammen.
   ===================================================================== */

/* Chat-Seite: Hauptbereich randlos & app-artig (überschreibt .dash-main). */
.chat-page .dash-main { padding: 0; max-width: none; }
.chat-page .dash-layout { min-height: 0; }

/* Grundgerüst (Handy): nur eine sichtbare Spalte je Ansicht. */
.chat-app { background: var(--c-bg); }
.chat-main { display: none; }
.chat-info { display: none; }
.chat-app--detail .chat-list { display: none; }

/* --- Chat-Tabs (Freunde / Anfragen / Archiviert) ------------------ */
.chat-tabs {
    display: flex; gap: 3px; padding: 6px 12px 12px;
    border-bottom: 1px solid var(--c-border);
}
.chat-tab {
    flex: 1; padding: 8px 6px; border: none; border-radius: var(--radius);
    background: transparent; color: var(--c-text-dim);
    font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
    position: relative;
}
.chat-tab--active {
    color: var(--c-accent);
    background: var(--c-accent-glow);
    box-shadow: inset 0 -2px 0 var(--c-accent);
}
.chat-tab:not(:disabled):hover { background: var(--c-surface-2); color: var(--c-text); }
.chat-tab:disabled { cursor: default; opacity: .5; }
.chat-tab__soon {
    display: inline-block; margin-left: 4px;
    font-size: .58rem; font-weight: 700; text-transform: uppercase;
    color: var(--c-text-dim); vertical-align: middle;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: var(--radius-pill); padding: 1px 5px;
}
.chat-tab__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; margin-left: 5px; padding: 0 4px;
    font-size: .62rem; font-weight: 800; line-height: 1; vertical-align: middle;
    color: #0f0f10; background: var(--c-accent); border-radius: var(--radius-pill);
}

/* Umschaltbare Tab-Panels der Chat-Liste */
.chat-list__panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-list__panel[hidden] { display: none; }

/* Anfragen-Zeile (Annehmen/Ablehnen) */
.chat-request__actions { display: flex; gap: 8px; padding: 0 14px 12px 62px; }
.chat-request__actions form { flex: 0 0 auto; }

/* Anfrage-Banner + Hinweis im Verlauf */
.chat-request-banner {
    margin: 0 auto 16px; max-width: 460px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: 12px 16px; box-shadow: 0 1px 6px rgba(0,0,0,.15);
}
.chat-request-banner__text { margin: 0 0 10px; font-size: .9rem; line-height: 1.5; color: var(--c-text); }
.chat-request-banner__actions { display: flex; gap: 8px; }
.chat-request-banner__actions form { flex: 0 0 auto; }
.chat-request-hint {
    margin: 0 auto 16px; max-width: 460px; text-align: center;
    font-size: .82rem; color: var(--c-text-muted); line-height: 1.5;
}

/* Archivieren-Button aktiv (Chat ist archiviert) */
.chat-action-btn--archive.is-active { background: rgba(59,130,246,.28); color: #fff; }

/* --- Chat-Liste (linke Spalte) ----------------------------------- */
.chat-list {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    box-shadow: 2px 0 14px rgba(0,0,0,.14);
}
.chat-list__head { padding: 18px 16px 8px; }
.chat-list__title { font-size: 1.35rem; font-weight: 800; margin: 0; color: var(--c-text); letter-spacing: -.02em; }
.chat-list__search { position: relative; display: flex; align-items: center; margin: 0 12px 8px; }
.chat-list__search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--c-text-dim); pointer-events: none; }
.chat-list__search-input {
    width: 100%; padding: 9px 12px 9px 36px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    color: var(--c-text); font: inherit; font-size: .88rem;
    transition: border-color .15s, box-shadow .15s;
}
.chat-list__search-input::placeholder { color: var(--c-text-dim); }
.chat-list__search-input:focus { outline: none; border-color: var(--c-accent); background: var(--c-bg); box-shadow: var(--focus-ring); }
.chat-list__items { list-style: none; margin: 0; padding: 4px 8px 14px; overflow-y: auto; flex: 1; min-height: 0; }
.chat-list__items li { list-style: none; }
.chat-list__hint { padding: 12px 16px; color: var(--c-text-dim); font-size: .88rem; }

.chat-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 10px; border-radius: var(--radius);
    text-decoration: none; color: var(--c-text);
    transition: background .13s ease, box-shadow .13s;
    border: 1px solid transparent;
}
.chat-row:hover { background: var(--c-surface-2); text-decoration: none; border-color: var(--c-border-soft); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.chat-row--active {
    background: var(--c-accent-glow);
    border-color: rgba(109,211,255,.22);
    box-shadow: inset 3px 0 0 var(--c-accent), 0 1px 6px rgba(109,211,255,.08);
}
.chat-row__avatar-wrap { position: relative; flex-shrink: 0; }
.chat-status {
    position: absolute; right: -1px; bottom: -1px;
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid var(--c-surface); background: var(--c-text-dim);
}
.chat-status--online { background: var(--c-success); box-shadow: 0 0 5px var(--c-success); }
.chat-status--offline { background: var(--c-text-dim); }
.chat-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-row__name { font-weight: 700; font-size: .93rem; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-row__time { font-size: .7rem; color: var(--c-text-dim); flex-shrink: 0; }
.chat-row__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-row__preview { font-size: .84rem; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.chat-row__preview--muted { color: var(--c-text-dim); font-style: italic; }
.chat-row__you { color: var(--c-text-dim); }
.chat-row--unread .chat-row__preview,
.chat-row--unread .chat-row__name { color: var(--c-text); font-weight: 700; }
.chat-row__badge {
    flex-shrink: 0; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: var(--radius-pill); background: var(--c-accent); color: #0f0f10;
    font-size: .7rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 8px rgba(109,211,255,.4);
}

/* --- Empty-States ------------------------------------------------ */
.chat-empty { text-align: center; padding: 36px 20px; }
.chat-empty__icon { display: inline-flex; width: 44px; height: 44px; color: var(--c-text-dim); opacity: .35; margin-bottom: 14px; }
.chat-empty__icon svg { width: 100%; height: 100%; }
.chat-empty__title { font-weight: 700; color: var(--c-text); margin: 0 0 6px; font-size: 1rem; }
.chat-empty__text { color: var(--c-text-muted); font-size: .88rem; margin: 0; line-height: 1.65; }
.chat-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 12px; }
.chat-empty__link { font-size: .85rem; font-weight: 600; color: var(--c-accent); text-decoration: none; }
.chat-empty__link:hover { text-decoration: underline; }
.chat-empty__link--home { color: var(--c-text-muted); }
.chat-empty--thread {
    margin: auto; padding: 40px 28px;
    background: var(--c-surface); border: 1px solid var(--c-border-soft);
    border-radius: var(--radius); max-width: 300px; width: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

/* --- Mittlerer Empty-State (Desktop, keine Auswahl) -------------- */
.chat-placeholder { margin: auto; text-align: center; max-width: 340px; padding: 28px; }
.chat-placeholder__icon {
    display: inline-flex; width: 56px; height: 56px; margin-bottom: 16px;
    color: var(--c-text-dim); opacity: .45;   /* ruhig statt Glow */
}
.chat-placeholder__icon svg { width: 100%; height: 100%; }
.chat-placeholder__title { font-size: 1.2rem; font-weight: 700; color: var(--c-text); margin: 0 0 8px; }
.chat-placeholder__text { color: var(--c-text-muted); font-size: .92rem; margin: 0; line-height: 1.65; }
.chat-placeholder__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.chat-placeholder__btn { text-decoration: none; }

/* --- Verlauf (mittlere Spalte) ----------------------------------- */
.chat-thread { display: flex; flex-direction: column; min-height: 0; background: var(--c-bg); }
.chat-thread__head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid var(--c-border);
    background: var(--c-surface); flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    min-height: 60px;
}
.chat-thread__back {
    display: none;
    align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 50%; color: var(--c-text);
    background: transparent; border: none; cursor: pointer;
    transition: background .13s;
}
.chat-thread__back svg { width: 21px; height: 21px; }
.chat-thread__back:hover { background: var(--c-surface-2); }
.chat-thread__peer {
    display: flex; align-items: center; gap: 11px;
    text-decoration: none; min-width: 0; flex: 1;
}
.chat-thread__avatar-wrap { position: relative; flex-shrink: 0; }
.chat-thread__peer-text { min-width: 0; }
.chat-thread__peer-name {
    display: block; font-weight: 700; color: var(--c-text);
    font-size: .97rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-thread__peer-meta { display: block; font-size: .74rem; color: var(--c-text-dim); }
.chat-thread__peer-status--online { color: var(--c-success); font-weight: 600; }
.chat-thread__peer-status--offline { color: var(--c-text-dim); }

/* Header-Action-Buttons */
.chat-thread__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.chat-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid transparent; background: var(--c-surface-2);
    color: var(--c-text-dim); cursor: not-allowed; opacity: .72;
    transition: filter .14s, box-shadow .14s, opacity .14s;
}
.chat-action-btn svg { width: 17px; height: 17px; }
.chat-action-btn:not(:disabled) { cursor: pointer; opacity: 1; }
.chat-action-btn:not(:disabled):hover { filter: brightness(1.2); box-shadow: 0 2px 10px rgba(0,0,0,.3); }

/* Archivieren – blau */
.chat-action-btn--archive {
    background: rgba(59,130,246,.13); border-color: rgba(59,130,246,.32);
    color: rgba(96,165,250,.92);
}
/* Blockieren – violett */
.chat-action-btn--block {
    background: rgba(139,92,246,.13); border-color: rgba(139,92,246,.32);
    color: rgba(167,139,250,.92);
}
/* Melden – amber */
.chat-action-btn--report {
    background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.32);
    color: rgba(251,191,36,.92);
}
/* Löschen – rot */
.chat-action-btn--delete {
    background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.32);
    color: rgba(248,113,113,.92);
}

.chat-thread__scroll {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 24px 24px 14px; display: flex; flex-direction: column; gap: 4px;
    scrollbar-width: thin; scrollbar-color: var(--c-border) transparent;
}
.chat-thread__scroll::-webkit-scrollbar { width: 5px; }
.chat-thread__scroll::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: var(--radius-pill); }

.chat-thread__privacy {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    margin: 0 auto 20px; padding: 6px 18px; max-width: max-content;
    font-size: .72rem; color: var(--c-text-dim); text-align: center;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-pill);
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
}
.chat-thread__privacy svg { width: 13px; height: 13px; flex-shrink: 0; }

.chat-day { text-align: center; margin: 12px 0 8px; }
.chat-day span {
    font-size: .7rem; color: var(--c-text-dim);
    background: var(--c-surface); border: 1px solid var(--c-border-soft);
    padding: 3px 14px; border-radius: var(--radius-pill);
    letter-spacing: .03em;
}

/* Nachrichten-Bubbles */
.chat-msg { display: flex; flex-direction: column; max-width: 68%; }
.chat-msg--mine { align-self: flex-end; align-items: flex-end; }
.chat-msg--theirs { align-self: flex-start; align-items: flex-start; }
.chat-msg__bubble {
    padding: 11px 16px; border-radius: var(--radius-xl);
    font-size: .92rem; line-height: 1.52; color: var(--c-text);
    word-wrap: break-word; overflow-wrap: anywhere;
}
.chat-msg--theirs .chat-msg__bubble {
    background: #1c1c25;
    border: 1px solid var(--hairline);
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.chat-msg--mine .chat-msg__bubble {
    background: linear-gradient(135deg, rgba(109,211,255,.3) 0%, rgba(75,187,230,.16) 100%);
    border: 1px solid rgba(109,211,255,.52);
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,.2), 0 0 20px rgba(109,211,255,.14);
    color: #e8f5ff;
}
.chat-msg__foot { display: flex; align-items: center; gap: 2px; margin: 3px 6px 0; }
.chat-msg--mine .chat-msg__foot { flex-direction: row-reverse; }
.chat-msg__time { font-size: .66rem; color: var(--c-text-dim); }

/* Drei-Punkte-Menü je Nachricht (Melden / Kopieren) */
.chat-msg__menu { position: relative; display: inline-flex; }
.chat-msg__menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: transparent; border: none; color: var(--c-text-dim);
    cursor: pointer; opacity: .5;
    transition: opacity .12s, background .12s, color .12s;
}
.chat-msg__menu-btn svg { width: 15px; height: 15px; }
.chat-msg:hover .chat-msg__menu-btn,
.chat-msg__menu-btn[aria-expanded="true"] { opacity: 1; }
.chat-msg__menu-btn:hover { background: var(--hairline); color: var(--c-text); }
.chat-msg__menu-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; opacity: 1; }
.chat-msg__menu-list {
    position: absolute; bottom: calc(100% + 4px); z-index: 40;
    min-width: 150px; padding: 5px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.5);
    display: flex; flex-direction: column; gap: 2px;
}
.chat-msg--theirs .chat-msg__menu-list { left: 0; }
.chat-msg--mine   .chat-msg__menu-list { right: 0; }
.chat-msg__menu-list[hidden] { display: none; }
.chat-msg__menu-item {
    display: block; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer;
    font: inherit; font-size: .86rem; color: var(--c-text);
    padding: 8px 10px; border-radius: var(--radius-sm); white-space: nowrap;
}
.chat-msg__menu-item:hover { background: var(--c-surface-2); }
.chat-msg__menu-item--report { color: rgba(251,191,36,.95); }
.chat-msg__menu-item--report:hover { background: rgba(251,191,36,.12); }
@media (max-width: 768px) {
    /* Auf Mobile immer sichtbar + größere Tap-Fläche. */
    .chat-msg__menu-btn { opacity: .85; width: 34px; height: 34px; }
    .chat-msg__menu-btn svg { width: 17px; height: 17px; }
}

/* --- Eingabebereich ---------------------------------------------- */
.chat-compose {
    display: flex; align-items: flex-end; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--c-border);
    background: var(--c-surface); flex-shrink: 0;
    box-shadow: 0 -2px 12px rgba(0,0,0,.2);
}
.chat-compose__tools { display: flex; align-items: flex-end; gap: 2px; flex-shrink: 0; padding-bottom: 5px; }
.chat-compose__tool-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid transparent; background: transparent;
    color: var(--c-text-dim); cursor: pointer;
    transition: background .13s, color .13s, border-color .13s;
}
.chat-compose__tool-btn svg { width: 19px; height: 19px; }
.chat-compose__tool-btn:not(:disabled):hover { background: var(--c-surface-2); color: var(--c-accent); border-color: var(--c-border); }
.chat-compose__tool-btn:disabled { cursor: not-allowed; opacity: .38; }

.chat-compose__field-wrap { flex: 1; min-width: 0; position: relative; }
.chat-compose__input {
    display: block; width: 100%; resize: none; overflow: hidden;
    scrollbar-width: none;
    max-height: 140px; padding: 11px 16px;
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-xl);
    color: var(--c-text); font: inherit; font-size: .93rem; line-height: 1.44;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.chat-compose__input::-webkit-scrollbar { display: none; }
.chat-compose__input::placeholder { color: var(--c-text-dim); }
.chat-compose__input:focus { outline: none; border-color: var(--c-accent); background: var(--c-bg); box-shadow: var(--focus-ring); }
.chat-compose__counter {
    display: block; text-align: right; font-size: .68rem; color: var(--c-text-dim);
    margin-top: 5px; padding-right: 4px;
    transition: color .15s;
}
.chat-compose__counter--warn { color: var(--c-accent); font-weight: 600; }

/* Emoji-Panel */
.chat-compose__emoji-panel {
    position: absolute; bottom: calc(100% + 10px); left: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
    padding: 10px; width: 168px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.38);
    z-index: 50;
    transform-origin: bottom left;
    transition: opacity .18s ease, transform .2s cubic-bezier(.34,1.4,.6,1), visibility .2s;
}
/* Geschlossen: ausgeblendet + nicht klickbar, aber animierbar – daher KEIN
   display:none (das wäre nicht animierbar). display:grid oben überschreibt
   ohnehin das UA-[hidden]{display:none}; das Schließen läuft über
   opacity/visibility/transform. JS toggelt nur noch [hidden]. */
.chat-compose__emoji-panel[hidden] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.95);
    pointer-events: none;
}
.chat-emoji-btn {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; padding: 0;
    border: none; background: transparent; cursor: pointer;
    font-size: 1.3rem; line-height: 1; border-radius: var(--radius-sm);
    transition: background .1s, transform .1s;
}
.chat-emoji-btn:hover { background: var(--c-surface-2); transform: scale(1.18); }

.chat-compose__send {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 44px; padding: 0 20px; border: none; border-radius: var(--radius-pill);
    background: var(--c-gradient-cta); color: #0f0f10;
    font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
    transition: filter .13s, box-shadow .13s;
    box-shadow: 0 2px 14px rgba(109,211,255,.3);
}
.chat-compose__send:hover { filter: brightness(1.12); box-shadow: 0 4px 20px rgba(109,211,255,.45); }
.chat-compose__send svg { width: 17px; height: 17px; }

/* --- Rechte Info-Spalte ------------------------------------------ */
.chat-info {
    flex-direction: column; gap: 14px; padding: 20px 16px;
    border-left: 1px solid var(--c-border); background: var(--c-surface);
    overflow-y: auto; min-height: 0;
    box-shadow: -2px 0 14px rgba(0,0,0,.12);
}
.chat-info__card {
    text-align: center; padding: 20px 14px 16px;
    background: var(--c-surface-2); border: 1px solid var(--c-border-soft);
    border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.chat-info__avatar { margin: 0 auto 12px; }
.chat-info__name { font-weight: 800; font-size: 1.05rem; color: var(--c-text); margin: 0 0 2px; }
.chat-info__handle { font-size: .82rem; color: var(--c-text-dim); margin: 0 0 8px; }
.chat-info__status {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .82rem; color: var(--c-text-muted); margin: 0 0 12px;
}
.chat-info__status .chat-status { position: static; border: none; width: 9px; height: 9px; }
.chat-info__bio {
    font-size: .85rem; color: var(--c-text-muted); line-height: 1.55;
    margin: 0 0 12px; text-align: left;
    padding: 8px 10px; background: var(--c-bg); border-radius: var(--radius-sm);
    border: 1px solid var(--c-border-soft);
}
.chat-info__profile { width: 100%; display: block; text-align: center; font-size: .88rem; }

/* Meta-Infos (Mitglied seit etc.) */
.chat-info__meta {
    padding: 10px 12px; background: var(--c-surface-2);
    border: 1px solid var(--c-border-soft); border-radius: var(--radius);
}
.chat-info__meta-row {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--c-text-muted);
}
.chat-info__meta-row svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--c-text-dim); }

.chat-info__note {
    display: flex; gap: 10px; padding: 11px 12px;
    background: var(--c-surface-2); border: 1px solid var(--c-border-soft); border-radius: var(--radius);
}
.chat-info__note svg { width: 16px; height: 16px; color: var(--c-accent); flex-shrink: 0; margin-top: 1px; }
.chat-info__note p { margin: 0; font-size: .8rem; color: var(--c-text-muted); line-height: 1.5; }

.chat-info__actions { }
.chat-info__actions-title {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--c-text-dim); margin: 0 0 8px; font-weight: 700;
}
.chat-info__action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-info__action {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; border-radius: var(--radius-sm);
    font-size: .85rem; color: var(--c-text-dim); cursor: not-allowed;
}
.chat-info__action svg { width: 15px; height: 15px; flex-shrink: 0; }
.chat-info__action--warn { color: rgba(251,191,36,.7); }
.chat-info__action--danger { color: rgba(248,113,113,.65); }
.chat-info__soon {
    margin-left: auto;
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--c-text-dim); background: var(--c-surface-2);
    border: 1px solid var(--c-border); border-radius: var(--radius-pill); padding: 2px 8px;
}

/* Topbar-Chats-Icon: aktiver Zustand + Sidebar-Badge (ungelesen). */
.dash-dtop__icon-btn--active { color: var(--c-accent); }
.dash-nav__badge-count {
    margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--radius-pill); background: var(--c-accent); color: #0f0f10;
    font-size: .68rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}

/* --- Chats: Handy (< 768px) -------------------------------------- */
@media (max-width: 767px) {
    .chat-app--index .chat-list { display: flex; min-height: calc(100vh - 160px); }

    .chat-page--detail .m-bottomnav,
    .chat-page--detail .m-fab { display: none; }
    .chat-page--detail .dash-layout { padding: 0; min-height: 0; }

    .chat-app--detail {
        position: fixed;
        top: calc(56px + env(safe-area-inset-top, 0px));
        left: 0; right: 0; bottom: 0;
        display: flex;
    }
    .chat-app--detail .chat-thread { flex: 1; min-height: 0; width: 100%; }
    .chat-thread__back { display: inline-flex; }
    .chat-compose { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
    .chat-compose__send { padding: 0; width: 42px; }
    .chat-compose__send-label { display: none; }
    .chat-thread__actions { display: none; }
    .chat-compose__counter { display: none; }
}

/* --- Chats: Desktop (≥ 768px) – echtes App-Layout, volle Höhe ---- */
@media (min-width: 768px) {
    .chat-app { height: calc(100vh - 56px); overflow: hidden; }

    .chat-app--index,
    .chat-app--detail { display: grid; grid-template-columns: 300px minmax(0, 1fr); }

    .chat-list { display: flex; }
    .chat-main { display: flex; }
    .chat-app--detail .chat-list { display: flex; }
    .chat-main--empty { align-items: center; justify-content: center; }
}

/* Dreispaltig (≥ 1100px): rechte Info-Spalte einblenden. */
@media (min-width: 1100px) {
    .chat-app--detail { grid-template-columns: 300px minmax(0, 1fr) 300px; }
    .chat-app--detail .chat-info { display: flex; }
}

@media (min-width: 1440px) {
    .chat-app--detail { grid-template-columns: 340px minmax(0, 1fr) 340px; }
}

@media (min-width: 1920px) {
    .chat-app--detail { grid-template-columns: 360px minmax(0, 1fr) 380px; }
}

/* =====================================================================
   HOUSEKEEPING – Adminbereich (Phase 1: Übersicht, Nutzer, Rollen,
   Audit, Sicherheit). Eigene, schlanke Admin-Shell. Dark Mode, klare
   Tabellen/Karten, sichtbare Fokuszustände, deutliche Status-Badges.
   ===================================================================== */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn-warn { background: var(--c-warn); color: #0f0f10; border-color: var(--c-warn); }
.btn-warn:hover { filter: brightness(1.08); color: #0f0f10; }

.hk-body { background: var(--c-bg); color: var(--c-text); min-height: 100vh; }

/* Topbar */
.hk-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: 0 var(--space-5); height: 56px;
    background: var(--c-surface); border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 20;
}
.hk-topbar__brand { display: flex; align-items: center; gap: var(--space-2); }
.hk-topbar__logo { font-weight: 800; letter-spacing: .04em; color: var(--c-accent); }
.hk-topbar__tag {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--c-text-muted); border: 1px solid var(--c-border); border-radius: var(--radius-pill); padding: 2px 8px;
}
.hk-topbar__right { display: flex; align-items: center; gap: var(--space-3); }
.hk-topbar__user { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: .9rem; }
.hk-topbar__exit { color: var(--c-text-muted); font-size: .9rem; }
.hk-topbar__exit:hover { color: var(--c-accent); }
.hk-topbar__logout { margin: 0; }

/* Shell: Sidebar + Inhalt */
.hk-shell { display: grid; grid-template-columns: 1fr; gap: 0; }
.hk-sidebar { border-bottom: 1px solid var(--c-border); background: var(--c-surface); }
.hk-sidebar__nav { display: flex; flex-wrap: wrap; gap: 4px; padding: var(--space-3) var(--space-4); }
.hk-nav__item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: var(--radius-sm);
    color: var(--c-text-muted); font-weight: 600; font-size: .92rem;
}
.hk-nav__item:hover { background: var(--hover-bg); color: var(--c-text); }
.hk-nav__item--active { background: var(--c-accent-glow); color: var(--c-accent); }
.hk-nav__item--soon { opacity: .55; cursor: default; }
.hk-nav__soon {
    font-size: .65rem; text-transform: uppercase; letter-spacing: .06em;
    border: 1px solid var(--c-border); border-radius: var(--radius-pill); padding: 1px 6px; color: var(--c-text-dim);
}
.hk-main { padding: var(--space-5); max-width: 1180px; margin: 0 auto; width: 100%; }

/* Seitenkopf */
.hk-page__head { margin-bottom: var(--space-5); }
.hk-page__title { font-size: 1.6rem; margin: 0; }
.hk-page__id, .hk-page__title .hk-page__id { color: var(--c-text-dim); font-weight: 500; font-size: 1.1rem; }
.hk-page__lead { color: var(--c-text-muted); margin: 6px 0 0; max-width: 70ch; }
.hk-link { color: var(--c-accent); font-size: .9rem; }
.hk-subtitle { font-size: 1rem; margin: var(--space-4) 0 var(--space-2); }
.hk-note { color: var(--c-text-dim); font-size: .85rem; margin: var(--space-3) 0 0; }
.hk-field-hint { color: var(--c-text-dim); font-size: .78rem; }

/* Kennzahlen-Karten */
.hk-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.hk-stat-card {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: var(--space-4); box-shadow: var(--shadow-sm); color: var(--c-text);
}
a.hk-stat-card:hover { border-color: var(--c-accent); }
.hk-stat-card__label { color: var(--c-text-muted); font-size: .85rem; }
.hk-stat-card__value { font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.hk-stat-card__sub { color: var(--c-text-dim); font-size: .8rem; }
.hk-inline-code { font-size: .72rem; color: var(--c-text-dim); }

/* Panels + zweispaltiges Raster */
.hk-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.hk-panel {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: var(--space-5); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4);
}
.hk-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hk-panel__title { font-size: 1.1rem; margin: 0 0 var(--space-3); }
.hk-panel__user { margin: 0 0 var(--space-2); }
.hk-defs { display: grid; gap: 8px; margin: 0; }
.hk-defs > div { display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--c-border-soft); padding-bottom: 6px; }
.hk-defs dt { color: var(--c-text-muted); font-size: .88rem; }
.hk-defs dd { margin: 0; text-align: right; }

/* Chips */
.hk-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.hk-role-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--c-glass); border: 1px solid var(--c-border); border-radius: var(--radius-pill);
    padding: 3px 10px; font-size: .8rem; color: var(--c-text);
}
.hk-chip-x { display: inline; margin: 0; }
.hk-chip-x__btn { background: none; border: none; color: var(--c-text-dim); cursor: pointer; display: inline-flex; align-items: center; line-height: 1; padding: 0 2px; }
.hk-chip-x__btn:hover { color: var(--c-danger); }

/* Inline-/Filterformulare */
.hk-inline-form, .hk-filter { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-4); }
.hk-filter__group { display: flex; flex-direction: column; gap: 4px; }
.hk-filter__label { font-size: .82rem; color: var(--c-text-muted); }
.hk-actions-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0; }
.hk-actions-row form { margin: 0; }
.hk-sanction-form { border-top: 1px solid var(--c-border-soft); margin-top: var(--space-4); padding-top: var(--space-3); }
.hk-sanction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }

/* Tabellen */
.hk-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); }
.hk-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.hk-table th, .hk-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--c-border-soft); vertical-align: top; }
.hk-table thead th { background: var(--c-surface-2); color: var(--c-text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.hk-table tbody tr:hover { background: var(--c-glass); }
.hk-table__id { color: var(--c-text-dim); }
.hk-cell-details { max-width: 280px; word-break: break-word; }

/* Status-Badges */
.hk-badge { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill); font-size: .76rem; font-weight: 700; border: 1px solid transparent; }
.hk-badge--ok { background: color-mix(in srgb, var(--c-success) 12%, transparent); color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 35%, transparent); }
.hk-badge--warn { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-border); }
.hk-badge--danger { background: color-mix(in srgb, var(--c-danger) 12%, transparent); color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 35%, transparent); }
.hk-badge--muted { background: var(--c-glass); color: var(--c-text-muted); border-color: var(--c-border); }

/* Hinweis-Banner */
.hk-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); border: 1px solid var(--c-border); }
.hk-alert--danger { background: rgba(244,67,54,.1); border-color: rgba(244,67,54,.4); }
.hk-alert--warn { background: var(--c-warn-bg); border-color: var(--c-warn-border); }

/* Aktivitäts-Feeds */
.hk-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hk-feed__item { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--c-border-soft); padding-bottom: 6px; }
.hk-feed__action { font-size: .85rem; color: var(--c-text); }
.hk-feed__action--danger { color: var(--c-danger); }
.hk-feed__meta { font-size: .76rem; color: var(--c-text-dim); }

/* Rechte-Liste / Matrix */
.hk-perms { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hk-matrix__role { text-align: center; }
.hk-matrix__cell { text-align: center; }
.hk-matrix__desc { display: block; color: var(--c-text-dim); font-size: .72rem; }
.hk-tick { color: var(--c-success); font-weight: 800; }
.hk-dash { color: var(--c-border); }

/* Blätterung */
.hk-pager { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.hk-pager__info { color: var(--c-text-muted); font-size: .85rem; }

@media (min-width: 860px) {
    .hk-shell { grid-template-columns: 220px minmax(0, 1fr); }
    .hk-sidebar { border-bottom: none; border-right: 1px solid var(--c-border); min-height: calc(100vh - 56px); }
    .hk-sidebar__nav { flex-direction: column; flex-wrap: nowrap; position: sticky; top: 56px; }
    .hk-nav__item { width: 100%; }
    .hk-cols { grid-template-columns: 1fr 1fr; }
}

/* --- Housekeeping Phase 2: Support-Tool (Badges, Zähler, Verlauf) --- */
.hk-badge--info { background: color-mix(in srgb, var(--c-accent) 12%, transparent); color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 35%, transparent); }
.hk-count-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--c-glass); border: 1px solid var(--c-border); border-radius: var(--radius-pill);
    padding: 4px 12px; font-size: .82rem; color: var(--c-text-muted);
}
.hk-count-chip strong { color: var(--c-text); }

/* --- Housekeeping: MALU Anlaufstellen (Reiter, Merkmal-Raster, Editor) --- */
/* Zähler-Chips werden hier auch als Reiter benutzt, deshalb ein Aktiv-Zustand. */
a.hk-count-chip { text-decoration: none; transition: border-color .15s, color .15s; }
a.hk-count-chip:hover { border-color: var(--c-accent); color: var(--c-text); text-decoration: none; }
.hk-count-chip--active {
    background: color-mix(in srgb, var(--c-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
    color: var(--c-text);
}
.hk-count-chip--active strong { color: var(--c-accent); }

/* Zwischenüberschrift innerhalb eines Panels. */
.hk-panel__subtitle {
    margin: var(--space-5) 0 var(--space-2);
    font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--c-text-dim);
}

/* Ankreuzfelder in mehreren Spalten, bricht von selbst um. */
.hk-checkgrid {
    display: grid; gap: 6px var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    margin-bottom: var(--space-3);
}
.hk-checkgrid .form-check { margin: 0; }

/* Der Editor ist ohne Pflege-Recht komplett gesperrt. Das muss man sehen. */
.hk-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.hk-fieldset:disabled { opacity: .72; }
.hk-fieldset:disabled .form-input { cursor: not-allowed; }

.hk-thread { display: flex; flex-direction: column; gap: var(--space-3); }
.hk-msg {
    border: 1px solid var(--c-border); border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4); background: var(--c-surface-2);
}
.hk-msg--user { border-left: 3px solid var(--c-text-dim); }
.hk-msg--team { border-left: 3px solid var(--c-accent); }
.hk-msg--note { border-left: 3px solid var(--c-warn); background: var(--c-warn-bg); }
.hk-msg__head { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: 6px; flex-wrap: wrap; }
.hk-msg__author { font-weight: 700; font-size: .9rem; }
.hk-msg__meta { color: var(--c-text-dim); font-size: .76rem; }
.hk-msg__body { margin: 0; white-space: pre-wrap; word-break: break-word; }

/* --- Nutzerseite /support: eigene Tickets --- */
.support-mytickets { margin-bottom: var(--space-5); }
.support-ticket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.support-ticket-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 10px 14px;
}
.support-ticket-row__link { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.support-ticket-row__subject { font-weight: 600; color: var(--c-text); }
.support-ticket-row__meta { color: var(--c-text-dim); font-size: .78rem; }
.support-ticket-row__status {
    flex: none; font-size: .76rem; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-pill);
    border: 1px solid var(--c-border); color: var(--c-text-muted); background: var(--c-glass);
}
.support-ticket-row__status--open { color: var(--c-warn); border-color: var(--c-warn-border); background: var(--c-warn-bg); }
.support-ticket-row__status--answered { color: var(--c-success); border-color: rgba(67,233,123,.35); background: rgba(67,233,123,.12); }
.support-ticket-row__status--closed { color: var(--c-text-dim); }

/* =====================================================================
   HOUSEKEEPING – Admin-Center-Ausbau (Branding, Gruppen-Nav, Auth, Charts)
   ===================================================================== */

/* Topbar mit Logo */
.hk-topbar__brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.hk-topbar__logo-img { width: 26px; height: 26px; display: block; }
.hk-topbar__wordmark { font-weight: 800; letter-spacing: .04em; color: var(--c-text); }
.hk-topbar__uname { font-weight: 600; }

/* Gruppierte Sidebar-Navigation */
.hk-nav__group {
    margin: var(--space-3) 0 4px; padding: 0 8px;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--c-text-dim); font-weight: 700;
}
.hk-sidebar__nav .hk-nav__group:first-child { margin-top: 0; }
.hk-nav__item { justify-content: space-between; }
.hk-nav__label { display: inline-flex; align-items: center; }

/* App-Sidebar: Housekeeping-Eintrag dezent als Team-Zugang hervorheben */
.dash-nav__item--hk { color: var(--c-accent); }
.dash-nav__item--hk .dash-nav__icon { color: var(--c-accent); }

/* Auth-Karte (Gate + 2FA-Setup) */
.hk-auth-body { background: var(--c-bg); color: var(--c-text); min-height: 100vh; }
.hk-auth {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: var(--space-5);
}
.hk-auth__card {
    width: 100%; max-width: 440px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    box-shadow: var(--shadow-md, 0 10px 40px rgba(0,0,0,.45)); padding: var(--space-6);
}
.hk-auth__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.hk-auth__logo { width: 40px; height: 40px; }
.hk-auth__brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.hk-auth__wordmark { font-weight: 800; letter-spacing: .04em; font-size: 1.1rem; }
.hk-auth__tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.hk-auth__title { font-size: 1.4rem; margin: 0 0 var(--space-2); }
.hk-auth__lead { color: var(--c-text-muted); margin: 0 0 var(--space-4); font-size: .92rem; }
.hk-auth__form .form-submit { width: 100%; margin-top: var(--space-2); }
.hk-auth__foot { margin: var(--space-4) 0 0; text-align: center; }
.hk-auth__foot a { color: var(--c-text-muted); font-size: .85rem; }
.hk-auth__foot a:hover { color: var(--c-accent); }

/* Sparkline im Dashboard */
.hk-spark { width: 100%; height: 56px; display: block; }

/* Mod-Tool: Zitat des gemeldeten Inhalts */
.hk-quote {
    margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--c-border); background: var(--c-surface-2);
    border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-word;
    color: var(--c-text);
}

/* --- Inhalte: Badges- & News-Verwaltung --- */
.hk-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }
.hk-check { display: flex; align-items: center; gap: 8px; margin: var(--space-3) 0 0; font-size: .9rem; color: var(--c-text); cursor: pointer; }
.hk-check input { width: 16px; height: 16px; }
.hk-row--active { background: var(--c-glass); }
.hk-row-actions { white-space: nowrap; }
.hk-row-actions form { display: inline; margin: 0; }
.hk-subtle { display: block; color: var(--c-text-dim); font-size: .78rem; margin-top: 2px; }
.hk-danger { color: var(--c-danger); }
.hk-danger:hover { color: var(--c-danger); border-color: var(--c-danger); }
textarea.form-input { resize: vertical; min-height: 64px; font-family: inherit; }

/* --- System & Wartung: Einstellungs-Editor --- */
.hk-settings { display: grid; gap: var(--space-3); }
.hk-setting { border: 1px solid var(--c-border-soft); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.hk-setting__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hk-setting__key { font-weight: 600; font-size: .9rem; color: var(--c-text); }
.hk-setting__type { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-dim); border: 1px solid var(--c-border); border-radius: var(--radius-pill); padding: 1px 8px; }
.hk-setting__desc { margin: 4px 0 8px; color: var(--c-text-muted); font-size: .82rem; }

/* =====================================================================
   LIVE-SUPPORT – Arbeitsflaeche des Teams (/team/support) und
   Nutzeransicht eines Anliegens (/support/tickets/{id})
   ---------------------------------------------------------------------
   Praefixe: tsc- (Team-Support-Console), tsu- (Ticket, Nutzersicht).

   WARUM NEUE NAMEN
   Die alte Konsole hiess .sup-*. Denselben Namen .sup-grid benutzt aber
   auch die oeffentliche Seite /contact fuer ihre drei Support-Karten, und
   weil die Konsole spaeter in dieser Datei stand, hat sie /contact
   ueberschrieben: aus drei gleichen Spalten wurden 360px | 692px und eine
   Karte rutschte in die zweite Zeile. Mit eigenen Namen ist das weg.

   GESTALTUNGSREGELN
   1. Eine Knopfleiste, immer an derselben Stelle, immer in derselben
      Reihenfolge. Es erscheint nur, was gerade wirklich geht.
   2. Ein Eingabefeld fuer Antwort UND Notiz. Bei "Interne Notiz" faerbt
      sich das Feld sichtbar um, damit niemand versehentlich intern an den
      Nutzer schreibt. Reines CSS ueber :has(), also auch ohne Skript.
   3. Farbe sagt nie allein etwas aus, jeder Status steht als Text da.
   ===================================================================== */
.dash-dtop__icon-btn--support { color: var(--c-accent); }

.tsc, .tsu {
    --tsc-r:    14px;
    --tsc-r-sm: 10px;
    width: 100%;
}
.tsc h1, .tsc h2, .tsu h1 { margin: 0; font-weight: 600; }
.tsc :focus-visible, .tsu :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* --- Kopf -------------------------------------------------------------- */
.tsc-kopf {
    display: flex; flex-wrap: wrap; gap: 12px 20px;
    align-items: flex-start; justify-content: space-between;
    margin-bottom: 18px;
}
.tsc-kopf h1 { font-size: 1.5rem; letter-spacing: -.015em; }
.tsc-kopf__lead { color: var(--c-text-muted); margin: 3px 0 0; font-size: .89rem; }
.tsc-kopf__zahl {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: .88rem; color: var(--c-text-muted);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-pill); padding: 7px 15px;
}
.tsc-kopf__zahl strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
.tsc-punkt { width: 8px; height: 8px; border-radius: 50%; background: #5a6579; flex: 0 0 auto; }
.tsc-punkt--an { background: var(--c-warn); }

/* --- Raster ------------------------------------------------------------ */
.tsc-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) {
    .tsc-raster { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
}

/* --- Warteschlange ----------------------------------------------------- */
.tsc-spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tsc-reiter { display: flex; flex-wrap: wrap; gap: 5px; }
.tsc-reiter__t {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; min-height: 38px;
    border: 1px solid var(--c-border); border-radius: var(--radius-pill);
    background: var(--c-surface); color: var(--c-text-muted);
    text-decoration: none; font-size: .85rem;
    transition: border-color .15s, color .15s, background .15s;
}
.tsc-reiter__t:hover { color: var(--c-text); border-color: var(--c-accent); }
.tsc-reiter__t.is-aktiv {
    background: rgba(109, 211, 255, .12); border-color: var(--c-accent); color: var(--c-accent);
}
.tsc-reiter__n {
    font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--c-surface-2); border-radius: var(--radius-pill); padding: 1px 7px;
    color: var(--c-text);
}
.tsc-reiter__t.is-aktiv .tsc-reiter__n { background: rgba(109, 211, 255, .2); color: var(--c-accent); }

.tsc-eintraege {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 7px;
    max-height: 62vh; overflow-y: auto;
}
.tsc-e {
    display: flex; flex-direction: column; gap: 5px;
    padding: 11px 13px; text-decoration: none;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--tsc-r-sm); color: var(--c-text);
    transition: border-color .15s, background .15s;
}
.tsc-e:hover { border-color: var(--c-accent); }
.tsc-e.is-aktiv { border-color: var(--c-accent); background: rgba(109, 211, 255, .08); }
.tsc-e__k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tsc-e__b { font-size: .9rem; font-weight: 600; line-height: 1.35; }
.tsc-e__m { font-size: .76rem; color: var(--c-text-dim); }
.tsc-e__w { margin-left: auto; font-size: .74rem; color: var(--c-text-dim); white-space: nowrap; }
/* Wer laenger als eine Stunde wartet, faellt auf. Nur ein Hinweis fuers
   Team, dem Nutzer wurde nie eine Frist zugesagt. */
.tsc-e__w--lang { color: var(--c-warn); font-weight: 600; }
.tsc-leer {
    padding: 22px 16px; text-align: center; font-size: .87rem; color: var(--c-text-muted);
    border: 1px dashed var(--c-border); border-radius: var(--tsc-r-sm);
}

/* --- Status und Kennzeichen -------------------------------------------- */
.tsc-st {
    display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill);
    font-size: .72rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.tsc-st--offen       { background: var(--c-warn-bg); color: var(--c-warn); border-color: var(--c-warn-border); }
.tsc-st--arbeit      { background: rgba(109,211,255,.12); color: var(--c-accent); border-color: rgba(109,211,255,.35); }
.tsc-st--beantwortet { background: rgba(67,233,123,.12); color: var(--c-success); border-color: rgba(67,233,123,.35); }
.tsc-st--zu          { background: var(--c-glass); color: var(--c-text-muted); border-color: var(--c-border); }
.tsc-prio {
    display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill);
    font-size: .7rem; font-weight: 700; border: 1px solid var(--c-border); color: var(--c-text-muted);
}
.tsc-prio--urgent { color: var(--c-danger); border-color: rgba(248,99,90,.5); }
.tsc-prio--high   { color: var(--c-warn); border-color: var(--c-warn-border); }
.tsc-esk {
    display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill);
    font-size: .7rem; font-weight: 700;
    background: rgba(248,99,90,.14); color: var(--c-danger); border: 1px solid rgba(248,99,90,.4);
}

/* --- Gespraech --------------------------------------------------------- */
.tsc-gespraech {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--tsc-r); padding: 16px 18px;
}
.tsc-nichts { padding: 50px 20px; text-align: center; color: var(--c-text-muted); }
.tsc-nichts p { margin: 0 0 6px; font-size: .92rem; }
.tsc-nichts strong { color: var(--c-text); }

.tsc-g__kopf {
    display: flex; flex-wrap: wrap; gap: 10px 16px;
    align-items: flex-start; justify-content: space-between;
    padding-bottom: 13px; border-bottom: 1px solid var(--c-border-soft);
}
.tsc-g__b { font-size: 1.06rem; line-height: 1.3; }
.tsc-g__m { margin: 4px 0 0; font-size: .8rem; color: var(--c-text-dim); }
.tsc-g__m strong { color: var(--c-text-muted); font-weight: 600; }
.tsc-g__zeichen { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- Knopfleiste -------------------------------------------------------
   Immer an derselben Stelle, immer in derselben Reihenfolge. Vorher lagen
   sieben einzelne Formulare uebereinander verteilt, und man musste jedes
   Mal suchen, wo "Schliessen" gerade steht. */
.tsc-aktionen {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start;
    padding: 13px 0; border-bottom: 1px solid var(--c-border-soft);
}
.tsc-aktionen > form { margin: 0; }
.tsc-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 38px; padding: 8px 15px; cursor: pointer;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: var(--tsc-r-sm); color: var(--c-text);
    font: inherit; font-size: .86rem; font-weight: 600; list-style: none;
    transition: border-color .15s, background .15s, color .15s;
}
.tsc-knopf:hover { border-color: var(--c-accent); color: var(--c-accent); }
.tsc-knopf--haupt {
    background: rgba(109, 211, 255, .13); border-color: rgba(109, 211, 255, .4); color: var(--c-accent);
}
.tsc-knopf--haupt:hover { background: rgba(109, 211, 255, .22); }
.tsc-knopf--gefahr { color: var(--c-danger); border-color: rgba(248,99,90,.4); }
.tsc-knopf--gefahr:hover { background: rgba(248,99,90,.14); border-color: var(--c-danger); color: var(--c-danger); }
.tsc-knopf[disabled] { opacity: .55; cursor: default; }

/* Klappbereiche als <details>: das kann jeder Browser von sich aus, es
   braucht dafuer kein Skript. */
.tsc-klapp { position: relative; }
.tsc-klapp > summary::-webkit-details-marker { display: none; }
.tsc-klapp > summary::marker { content: ""; }
.tsc-klapp[open] > summary { border-color: var(--c-accent); color: var(--c-accent); }
.tsc-klapp__inhalt {
    margin-top: 8px; padding: 14px 15px; width: min(340px, 86vw);
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: var(--tsc-r-sm);
}
@media (min-width: 700px) {
    .tsc-klapp[open] .tsc-klapp__inhalt {
        position: absolute; z-index: 30; top: 100%; left: 0;
        box-shadow: var(--shadow-lg);
    }
    .tsc-klapp--rechts[open] .tsc-klapp__inhalt { left: auto; right: 0; }
}
.tsc-klapp__inhalt form { margin: 0; }
.tsc-klapp__inhalt .form-input { width: 100%; margin-bottom: 10px; }
.tsc-l { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .05em;
         text-transform: uppercase; color: var(--c-text-dim); margin-bottom: 5px; }
.tsc-reihe { display: flex; gap: 7px; align-items: flex-start; }
.tsc-reihe .form-input { margin-bottom: 0; }
.tsc-trenner { border: 0; border-top: 1px solid var(--c-border); margin: 14px 0; }
.tsc-hinweis { font-size: .78rem; color: var(--c-text-dim); margin: 0 0 10px; line-height: 1.5; }
.tsc-hinweis--zu { margin: 10px 0 0; }

/* --- Verlauf ----------------------------------------------------------- */
.tsc-verlauf {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px 2px; min-height: 180px; max-height: 46vh; overflow-y: auto;
}
.tsc-z { display: flex; }
.tsc-z--team { justify-content: flex-end; }
.tsc-z--notiz { justify-content: center; }
.tsc-z--system { justify-content: center; }
.tsc-b {
    max-width: min(560px, 82%); padding: 9px 13px;
    border-radius: var(--tsc-r); border: 1px solid var(--c-border);
    background: var(--c-surface-2);
}
.tsc-z--nutzer .tsc-b { border-bottom-left-radius: 4px; }
.tsc-z--team .tsc-b {
    background: rgba(109, 211, 255, .1); border-color: rgba(109, 211, 255, .3);
    border-bottom-right-radius: 4px;
}
/* Interne Notiz: gelb und mittig. Sie gehoert weder links noch rechts,
   weil sie nie Teil des Gespraechs mit dem Nutzer ist. */
.tsc-z--notiz .tsc-b {
    max-width: min(620px, 92%);
    background: var(--c-warn-bg); border-color: var(--c-warn-border);
}
.tsc-b__k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin: 0 0 4px; }
.tsc-b__a { font-size: .79rem; font-weight: 700; color: var(--c-text); }
.tsc-b__n {
    font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--c-warn);
}
.tsc-b__t { margin-left: auto; font-size: .72rem; color: var(--c-text-dim); font-variant-numeric: tabular-nums; }
.tsc-b__x { margin: 0; font-size: .89rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

.tsc-sys {
    margin: 0; font-size: .78rem; color: var(--c-text-dim); text-align: center;
    padding: 4px 13px; background: var(--c-glass); border-radius: var(--radius-pill);
    line-height: 1.5;
}
.tsc-sys__t { margin-left: 8px; font-variant-numeric: tabular-nums; opacity: .8; }
/* Interne Systemzeile (Uebergabe, Abgabe, Eskalation): gelb wie die interne
   Notiz. In der Konsole muss auf einen Blick klar sein, was beim Nutzer
   ankommt und was nicht. In der Nutzeransicht gibt es diese Zeilen gar nicht. */
.tsc-sys--intern {
    background: var(--c-warn-bg); color: var(--c-text-muted);
    border: 1px solid var(--c-warn-border); border-radius: var(--tsc-r-sm);
    text-align: left; padding: 7px 11px;
}
.tsc-sys__n {
    display: inline-block; margin-right: 7px;
    font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--c-warn);
}
/* Bewusst ohne :has(): die Zeile nimmt einfach die volle Breite, der
   Flex-Vater zentriert sie dann von selbst ueber die ganze Spalte. */
.tsc-sys--intern { width: 100%; }

/* --- Schreiben ---------------------------------------------------------
   EIN Feld, davor ein sichtbarer Umschalter. Vorher standen zwei gleich
   aussehende Felder untereinander, "Antwort" und "Interne Notiz", und eine
   Notiz an den Nutzer zu schicken war ein Vertipper weit weg. */
.tsc-senden { margin: 0; padding-top: 13px; border-top: 1px solid var(--c-border-soft); }
/* Die beiden Auswahlfelder liegen als GESCHWISTER direkt im Formular, vor
   dem Textfeld. Nur so erreicht der ~-Selektor das Textfeld und den Hinweis
   darunter. Bewusst OHNE :has(): das hier ist die Absicherung gegen den
   teuersten Fehler des Werkzeugs, sie darf nicht an einer neueren
   Selektor-Funktion haengen. */
.tsc-um__r { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tsc-um { display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 9px;
          background: var(--c-surface-2); border: 1px solid var(--c-border);
          border-radius: var(--radius-pill); }
.tsc-um__o { display: inline-flex; align-items: center; cursor: pointer; }
.tsc-um__o span {
    display: inline-block; padding: 6px 14px; min-height: 32px; line-height: 20px;
    border-radius: var(--radius-pill); font-size: .82rem; font-weight: 600;
    color: var(--c-text-muted); white-space: nowrap;
}
#tsc-art-antwort:checked ~ .tsc-um .tsc-um__o:not(.tsc-um__o--notiz) span {
    background: rgba(109, 211, 255, .16); color: var(--c-accent);
}
#tsc-art-notiz:checked ~ .tsc-um .tsc-um__o--notiz span {
    background: var(--c-warn-bg); color: var(--c-warn);
}
#tsc-art-antwort:focus-visible ~ .tsc-um .tsc-um__o:not(.tsc-um__o--notiz) span,
#tsc-art-notiz:focus-visible ~ .tsc-um .tsc-um__o--notiz span {
    outline: 2px solid var(--c-accent); outline-offset: 2px;
}

.tsc-feld {
    width: 100%; padding: 11px 13px; resize: vertical; min-height: 76px;
    background: var(--c-bg); border: 1px solid var(--c-border);
    border-radius: var(--tsc-r-sm); color: var(--c-text);
    font: inherit; font-size: .92rem; line-height: 1.5;
}
.tsc-feld:focus { border-color: var(--c-accent); }
.tsc-feld.is-invalid { border-color: var(--c-danger); }

/* Die Umfaerbung ist der eigentliche Schutz: man SIEHT, dass der Text nicht
   rausgeht. Ohne Uebergang, damit die Warnung sofort da ist. */
#tsc-art-notiz:checked ~ .tsc-feld {
    background: rgba(255, 167, 38, .07);
    border-color: var(--c-warn-border);
}
.tsc-senden__fuss { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 9px; }
.tsc-senden__wohin { margin: 0; font-size: .79rem; color: var(--c-text-dim); }
.tsc-wohin--notiz { display: none; color: var(--c-warn); }
#tsc-art-notiz:checked ~ .tsc-senden__fuss .tsc-wohin--antwort { display: none; }
#tsc-art-notiz:checked ~ .tsc-senden__fuss .tsc-wohin--notiz { display: inline; }

/* --- Nutzeransicht eines Anliegens (/support/tickets/{id}) -------------- */
.tsu { max-width: 800px; margin-inline: auto; }
.tsu-kopf { margin-bottom: 14px; }
.tsu-zurueck {
    display: inline-flex; align-items: center; gap: 6px; min-height: 38px;
    color: var(--c-text-muted); text-decoration: none; font-size: .86rem;
}
.tsu-zurueck:hover { color: var(--c-text); }
.tsu-b { font-size: 1.3rem; letter-spacing: -.015em; margin: 4px 0 0; }
.tsu-m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font-size: .82rem; color: var(--c-text-dim); }

.tsu .tsc-verlauf {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--tsc-r); padding: 16px; max-height: 56vh;
}
.tsu-senden { margin-top: 14px; }
.tsu-l { display: block; font-size: .84rem; color: var(--c-text-muted); margin-bottom: 6px; }
.tsu-senden__fuss { display: flex; justify-content: flex-end; margin-top: 9px; }
.tsu-fehler { color: var(--c-danger); font-size: .84rem; margin: 6px 0 0; }

/* "Erledigt" bewusst leise: erledigt ist meistens gut ausgegangen, das
   soll nicht wie ein Rauswurf aussehen. */
.tsu-erledigt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 16px 0 0; }
.tsu-erledigt__k {
    background: none; border: 0; padding: 6px 0; cursor: pointer;
    color: var(--c-text-muted); font: inherit; font-size: .85rem; text-decoration: underline;
}
.tsu-erledigt__k:hover { color: var(--c-text); }
.tsu-erledigt__h { font-size: .78rem; color: var(--c-text-dim); }
.tsu-zu {
    margin-top: 14px; padding: 16px 18px;
    background: var(--c-glass); border: 1px solid var(--c-border-soft); border-radius: var(--tsc-r);
}
.tsu-zu p { margin: 0 0 6px; font-size: .88rem; color: var(--c-text-muted); }
.tsu-zu p:last-child { margin-bottom: 0; }
.tsu-zu strong { color: var(--c-text); }
.tsu-zu a { color: var(--c-accent); text-decoration: none; }
.tsu-zu a:hover { text-decoration: underline; }

/* Erledigte Anliegen auf /support: zugeklappt, damit die Liste darueber
   zeigt, worauf man noch wartet, und kein Archiv wird. Geloescht wird nichts,
   sonst koennte niemand mehr nachlesen, was zugesagt wurde. */
.support-erledigt { margin: var(--space-4) 0 0; }
.support-erledigt__auf {
    cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 8px 2px;
    color: var(--c-text-muted); font-size: .88rem;
}
.support-erledigt__auf::-webkit-details-marker { color: var(--c-text-dim); }
.support-erledigt__auf:hover { color: var(--c-text); }
.support-ticket-list--erledigt { opacity: .78; margin-top: var(--space-2); }
.support-ticket-list--erledigt .support-ticket-row__subject { font-weight: 500; }

/* Neue Antwort in der eigenen Ticketliste (/support) */
.support-ticket-row__neu {
    display: inline-block; margin-right: 8px; padding: 1px 8px;
    border-radius: var(--radius-pill); font-size: .68rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    background: rgba(67,233,123,.14); color: var(--c-success); border: 1px solid rgba(67,233,123,.4);
}
.support-ticket-row--neu { border-color: rgba(67,233,123,.35); }

/* --- Handy ------------------------------------------------------------- */
@media (max-width: 620px) {
    .tsc-kopf { gap: 10px; }
    .tsc-gespraech { padding: 13px 12px; }
    .tsc-eintraege { max-height: none; }
    .tsc-verlauf { max-height: 52vh; }
    .tsc-b { max-width: 94%; }
    /* Zwei mal zwei statt drei plus einer: gleich breite Knoepfe sind auf
       dem Handy leichter zu treffen und wandern nicht, wenn sich die
       Beschriftung aendert ("Uebernehmen" / "Abgeben"). */
    .tsc-aktionen > form, .tsc-klapp { flex: 1 1 calc(50% - 4px); min-width: 0; }
    .tsc-knopf { width: 100%; }
    .tsc-klapp__inhalt { width: 100%; }
    .tsc-um { display: flex; width: 100%; }
    .tsc-um__o { flex: 1 1 0; }
    .tsc-um__o span { width: 100%; text-align: center; padding-inline: 6px; }
    .tsc-senden__fuss { flex-direction: column; align-items: stretch; }
    .tsc-senden__fuss .tsc-knopf { width: 100%; }
}

/* =================================================================
   Öffentliche Index-/Login-Seite (.mlogin) – zweigeteilt:
   links MALU-Hero + Produktvorschau, rechts Login-Card.
   ================================================================= */
.mlogin {
    position: relative;
    min-height: calc(100vh - 72px);   /* abzüglich der sticky Topbar */
    display: flex;
    align-items: center;
    padding: var(--space-7) var(--space-5);
    overflow: hidden;
}
/* Ruhige Hintergrund-Glows hinter der ganzen Sektion. */
.mlogin::before,
.mlogin::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}
.mlogin::before { width: 460px; height: 460px; top: -120px; left: -120px; background: radial-gradient(circle, rgba(109,211,255,.22), transparent 70%); }
.mlogin::after  { width: 520px; height: 520px; bottom: -160px; right: -100px; background: radial-gradient(circle, rgba(167,139,250,.20), transparent 70%); }

.mlogin__grid {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;   /* ~60% / 40% */
    gap: var(--space-8);
    align-items: center;
}

/* ── Linker Hero ─────────────────────────────────────────────── */
.mlogin__eyebrow {
    font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--c-accent); margin: 0 0 var(--space-4);
}
.mlogin__claim {
    font-size: clamp(2.4rem, 4.4vw, 3.6rem);
    line-height: 1.05; font-weight: 800; letter-spacing: -.02em;
    color: var(--c-text); margin: 0 0 var(--space-5); max-width: 14ch;
}
.mlogin__lead {
    font-size: 1.12rem; line-height: 1.6; color: var(--c-text-muted);
    max-width: 46ch; margin: 0 0 var(--space-7);
}

/* ── Produktvorschau (schwebende Karten) ─────────────────────── */
.mlogin__stage { position: relative; height: 320px; max-width: 540px; }
.mlogin__glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.mlogin__glow--cyan   { width: 220px; height: 220px; top: -20px; left: 40px;  background: radial-gradient(circle, rgba(79,172,254,.35), transparent 70%); }
.mlogin__glow--violet { width: 240px; height: 240px; bottom: -30px; right: 30px; background: radial-gradient(circle, rgba(167,139,250,.32), transparent 70%); }

.mlogin-card {
    position: absolute;
    background: linear-gradient(180deg, var(--hairline-soft), rgba(255,255,255,0)), var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 14px;
    backdrop-filter: blur(4px);
    animation: mloginFloat 7s ease-in-out infinite;
}
.mlogin-card--post { width: 280px; top: 8px; left: 0; z-index: 3; animation-delay: 0s; }
.mlogin-card--chat { width: 250px; top: 150px; right: -36px; z-index: 4; animation-delay: -2.3s; }
.mlogin-card--help { width: 250px; bottom: -6px; left: 40px; z-index: 2; display: flex; align-items: center; gap: 12px; animation-delay: -4.6s; }
@keyframes mloginFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.mlogin-card__row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mlogin-card__id { display: flex; flex-direction: column; min-width: 0; }
.mlogin-card__name { font-size: .9rem; font-weight: 700; color: var(--c-text); line-height: 1.2; }
.mlogin-card__meta { font-size: .74rem; color: var(--c-text-dim); line-height: 1.3; }
.mlogin-card__meta--online { color: var(--c-success); }
.mlogin-card__text { font-size: .88rem; line-height: 1.5; color: var(--c-text); margin: 0 0 10px; }

.mlogin-ava {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 800; color: #0f0f10;
}
.mlogin-ava--a    { background: var(--c-gradient-cyan); }
.mlogin-ava--b    { background: var(--c-gradient-purple); color: #fff; }

.mlogin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mlogin-chip {
    font-size: .74rem; font-weight: 600; color: var(--c-hashtag);
    background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.25);
    border-radius: var(--radius-pill); padding: 2px 9px;
}
.mlogin-card__react { display: flex; align-items: center; gap: 6px; }
.mlogin-heart { width: 18px; height: 18px; color: #f5576c; display: inline-flex; }
.mlogin-heart svg { width: 100%; height: 100%; }
.mlogin-card__count { font-size: .8rem; color: var(--c-text-muted); font-weight: 600; }

.mlogin-bubble { font-size: .84rem; line-height: 1.45; margin: 0 0 6px; padding: 7px 11px; border-radius: var(--radius); max-width: 88%; }
.mlogin-bubble--in  { background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-bottom-left-radius: 4px; }
.mlogin-bubble--out { background: var(--c-accent-glow); color: var(--c-text); border: 1px solid rgba(109,211,255,.3); margin-left: auto; border-bottom-right-radius: 4px; }

.mlogin-card__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.mlogin-card__icon svg { width: 22px; height: 22px; }
.mlogin-card__icon--teal { background: var(--c-gradient-green); }

/* ── Rechte Login-Card ───────────────────────────────────────── */
.mlogin__aside { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); justify-self: center; width: 100%; max-width: 420px; }
.mlogin__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}
.mlogin__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: var(--space-4); }
.mlogin__brand-logo { width: 40px; height: 40px; }
.mlogin__brand-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--c-text); }
.mlogin__card-lead { font-size: .95rem; color: var(--c-text-muted); margin: 0 0 var(--space-5); line-height: 1.5; }
.mlogin__form { margin: 0; }
.mlogin__input { font-size: 1rem; }
.mlogin__submit { width: 100%; margin-top: var(--space-2); font-size: 1rem; padding: 13px; }

.mlogin__recover { display: inline-block; margin-top: var(--space-4); font-size: .88rem; color: var(--c-accent); text-decoration: none; }
.mlogin__recover:hover { text-decoration: underline; }

.mlogin__divider { display: flex; align-items: center; text-align: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--c-text-dim); font-size: .8rem; }
.mlogin__divider::before, .mlogin__divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }

.mlogin__create {
    width: 100%; padding: 13px; font-size: 1rem; font-weight: 700;
    background: transparent; color: var(--c-accent);
    border: 1px solid rgba(109,211,255,.4); border-radius: var(--radius);
    text-align: center; text-decoration: none;
    transition: background-color .15s, border-color .15s;
}
.mlogin__create:hover { background: var(--c-accent-glow); border-color: var(--c-accent); }

.mlogin__about-link { text-align: center; margin: var(--space-4) 0 0; font-size: .88rem; color: var(--c-text-muted); }
.mlogin__about-link a { font-size: .88rem; color: var(--c-text-muted); text-decoration: none; }
.mlogin__about-link a:hover { color: var(--c-text); text-decoration: underline; }

/* ── Card-Modus „Wiederherstellungscode" (nach Registrierung) ─── */
.mlogin__card-eyebrow { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-success); margin: 0 0 var(--space-2); }
.mlogin__card-title { font-size: 1.4rem; font-weight: 800; color: var(--c-text); margin: 0 0 var(--space-3); letter-spacing: -.01em; }
.mlogin__accent { color: var(--c-accent); font-weight: 700; }
.mlogin__code {
    display: flex; align-items: center; gap: var(--space-3);
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: var(--space-3) var(--space-4);
    margin: var(--space-4) 0 var(--space-3);
}
.mlogin__code-value {
    flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.05rem; font-weight: 700; color: var(--c-accent);
    letter-spacing: .04em; word-break: break-all;
}
.mlogin__code-copy { flex: 0 0 auto; padding: 6px 12px; font-size: .85rem; }
.mlogin__code-hint { font-size: .82rem; color: var(--c-text-muted); margin: 0 0 var(--space-5); line-height: 1.5; }

.mlogin__crisis {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: .85rem; color: var(--c-text-muted); margin: 0; text-align: center;
}
.mlogin__crisis svg { flex: 0 0 auto; color: var(--c-warn); }
.mlogin__crisis a { color: var(--c-accent); text-decoration: none; font-weight: 600; }
.mlogin__crisis a:hover { text-decoration: underline; }

/* Krisenhilfe-Link in der öffentlichen Topbar dezent hervorheben. */
/* Krisenhilfe: ruhig statt schreiend - gedaempfter Text mit warmem Punkt,
   volle Warn-Farbe erst beim Hover. Die orange Krisen-Zeile im Footer bleibt. */
.site-nav__link--crisis { color: var(--c-text-muted); font-weight: 600; }
.site-nav__link--crisis::before {
    content: ''; display: inline-block; width: 7px; height: 7px;
    border-radius: 50%; background: var(--c-warn); margin-right: 8px; vertical-align: 1px;
}
.site-nav__link--crisis:hover { color: var(--c-warn); }

/* ── Responsive: ab 960px zweispaltig, darunter gestapelt ────── */
@media (max-width: 960px) {
    .mlogin { min-height: 0; padding: var(--space-6) var(--space-4) var(--space-7); }
    .mlogin__grid { grid-template-columns: 1fr; gap: var(--space-6); max-width: 460px; }
    .mlogin__hero { text-align: center; }
    .mlogin__claim { max-width: none; }
    .mlogin__lead { max-width: none; margin-bottom: 0; }
    /* Produktvorschau auf kleinen Screens ausblenden (kein Quetschen, kein Scroll). */
    .mlogin__stage { display: none; }
    .mlogin__aside { max-width: 460px; }
}
@media (min-width: 961px) and (max-width: 1100px) {
    .mlogin__grid { gap: var(--space-6); }
    .mlogin__stage { max-width: 460px; }
}

/* Reduced Motion: keine schwebenden Karten. */
@media (prefers-reduced-motion: reduce) {
    .mlogin-card { animation: none; }
}



/* ===================================================================
   Startseiten-Feed: Kopf, ruhige Impulse, Sidebar-Extras (Phase: Feed-Politur)
   =================================================================== */

/* ── Interner Footer (eingeloggte Seiten) ──────────────────────── */
.dash-footer {
    border-top: 1px solid var(--c-border);
    background: var(--c-surface);
    padding: 16px 20px;
}
.dash-footer__inner {
    max-width: 1180px; margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 18px;
}
.dash-footer__nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dash-footer__nav a { font-size: .82rem; color: var(--c-text-muted); text-decoration: none; }
.dash-footer__nav a:hover { color: var(--c-text); text-decoration: underline; }
.dash-footer__nav a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.dash-footer__crisis { color: var(--c-warn); font-weight: 600; }
.dash-footer__meta { font-size: .76rem; color: var(--c-text-dim); margin: 0; }
/* Im fokussierten Chat kein Footer (eigene Vollbild-Ansicht). */
.chat-page .dash-footer { display: none; }
/* Auf dem Handy Platz über der festen Bottom-Navigation lassen. */
@media (max-width: 767px) {
    .dash-footer { padding-bottom: calc(16px + 72px); }
    .dash-footer__inner { justify-content: flex-start; }
}

/* ── Feed-Kopf ─────────────────────────────────────────────────── */
.dash-feedhead { margin: 2px 0 16px; }
.dash-feedhead__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--c-text); margin: 0 0 2px; }
.dash-feedhead__sub { font-size: .9rem; color: var(--c-text-muted); margin: 0; }

/* ── Empty-State: Aktionen ─────────────────────────────────────── */
.dash-feed-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.dash-feed-empty__actions .btn { text-decoration: none; }

/* ── Linke Sidebar: ruhige Extras unten ────────────────────────── */
.dash-sidebar__extra {
    margin-top: auto; padding: 12px;
    display: flex; flex-direction: column; gap: 3px;
    border-top: 1px solid var(--c-border);
}
.dash-beta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 600; color: var(--c-text-muted);
    padding: 2px 6px 8px;
}
.dash-beta__dot {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    background: var(--c-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 22%, transparent);
}
.dash-sidebar__mini {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: var(--radius-sm);
    font-size: .85rem; color: var(--c-text-muted); text-decoration: none;
    transition: background .13s, color .13s;
}
.dash-sidebar__mini svg { width: 17px; height: 17px; flex: 0 0 auto; }
.dash-sidebar__mini:hover { background: var(--c-glass); color: var(--c-text); }
.dash-sidebar__mini:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

/* ── Responsive + Reduced Motion ───────────────────────────────── */
@media (max-width: 420px) {
    .dash-feedhead__title { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .post-react:active { transform: none; }
}

/* =====================================================================
   Anonymität: Hinweis-Banner „Bitte ändere deinen Benutzernamen"
   Erscheint app-weit im eingeloggten Bereich (username_change_required).
   ===================================================================== */
.uc-banner {
    display: flex;
    gap: var(--space-3, 12px);
    align-items: flex-start;
    margin: 0 0 var(--space-4, 16px);
    padding: 14px 16px;
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-border);
    border-radius: var(--radius);
}
.uc-banner__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background: rgba(255,167,38,0.18);
    color: var(--c-warn-text);
}
.uc-banner__icon svg { width: 18px; height: 18px; }
.uc-banner__body { min-width: 0; }
.uc-banner__title {
    margin: 0 0 2px;
    font-weight: 700;
    color: var(--c-text);
}
.uc-banner__text { margin: 0; color: var(--c-text-muted); }
.uc-banner__reason {
    margin: 6px 0 0;
    color: var(--c-text-muted);
    font-size: 0.92rem;
}
.uc-banner__reason-label { color: var(--c-text); font-weight: 600; }
.uc-banner__btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    background: var(--c-accent);
    color: #0b1620;
    font-weight: 600;
    border-radius: var(--radius-sm);
}
.uc-banner__btn:hover { background: var(--c-accent-dim); text-decoration: none; }

/* Neutrales MALU-Logo als Avatar für System-Mitteilungen (ohne handelnde Person). */
.dash-notif__avatar--malu,
.notif-item__avatar--malu {
    background: var(--c-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dash-notif__avatar--malu img,
.notif-item__avatar--malu img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* =====================================================================
   Einstellungen – Kachel-Layout (responsive Grid)
   Handy: 1 Spalte · Tablet/Desktop: 2 Spalten · „Konto löschen" volle Breite.
   ===================================================================== */
.settings--calm { max-width: 1080px; margin: 0; }
.settings--calm .settings__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}
/* Ab Tablet-Breite zwei gleich breite Kacheln nebeneinander. */
@media (min-width: 760px) {
    .settings--calm .settings__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    /* Konto löschen spannt immer über die volle Breite (klar abgesetzt unten). */
    .settings--calm .settings__grid > #account { grid-column: 1 / -1; }
}
/* Etwas mehr Luft auf großen Screens, aber Formulare bleiben gut lesbar. */
@media (min-width: 1180px) {
    .settings--calm .settings__grid { gap: 20px; }
}
/* Kacheln: gleichmäßige Innenabstände, ruhige Höhe. */
.settings--calm .set-card { height: 100%; }

/* Kurzer Bio-Text in der Profilzusammenfassung */
.set-profile__bio { margin: 6px 0 0; color: var(--c-text-muted); font-size: .9rem; line-height: 1.5; }

/* Untergruppe mit klarer Trennlinie darüber (unabhängig von der Position) */
.set-sub--bordered { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--c-border-soft); }

/* Konto-löschen-Karte: ruhige, rötliche Akzentierung statt greller Box */
.set-card--danger { border-color: rgba(244,67,54,0.30); background:
    linear-gradient(180deg, rgba(244,67,54,0.05), transparent 120px), var(--c-surface); }
.set-card--danger:hover { border-color: rgba(244,67,54,0.45); }
.set-card--danger .set-danger__form { max-width: none; }

/* Kurzer Fließtext in einer Einstellungs-Kachel (z. B. Wiederherstellungscode) */
.set-card__text { margin: 0 0 12px; color: var(--c-text-muted); font-size: .9rem; line-height: 1.55; }

/* =====================================================================
   Einheitliche Badge-Komponente (.mbadge) + Profil-Überarbeitung
   Verwendet in Profilkopf, Beiträgen und der Badge-Übersicht (badge_chip_html
   / badge_card_html). Größen: sm (Beiträge) · md (Profil) · lg (Badge-Karten).
   ===================================================================== */
.mbadge-row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; vertical-align: middle; }

.mbadge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    line-height: 1;
    color: var(--mbadge-tone, var(--c-text-muted));
    outline: none;
    vertical-align: middle;
    text-decoration: none;
}
.mbadge__icon { display: inline-flex; align-items: center; justify-content: center; }
.mbadge__icon svg, .mbadge__icon img { display: block; }
.mbadge__label { font-weight: 700; letter-spacing: .2px; white-space: nowrap; }

/* Icon-Größen je Kontext */
.mbadge--sm .mbadge__icon svg, .mbadge--sm .mbadge__icon img { width: 18px; height: 18px; }
.mbadge--md .mbadge__icon svg, .mbadge--md .mbadge__icon img { width: 24px; height: 24px; }
.mbadge--lg .mbadge__icon svg, .mbadge--lg .mbadge__icon img { width: 30px; height: 30px; }

/* Achievement-Badge = rundes Icon-Abzeichen mit getönter Fläche */
.mbadge--badge {
    border-radius: 50%;
    background: var(--c-surface-2);
    background: color-mix(in srgb, var(--mbadge-tone) 16%, var(--c-surface));
    border: 1px solid var(--c-border);
    border-color: color-mix(in srgb, var(--mbadge-tone) 48%, transparent);
}
.mbadge--badge.mbadge--sm { width: 26px; height: 26px; }
.mbadge--badge.mbadge--md { width: 34px; height: 34px; }
.mbadge--badge.mbadge--lg { width: 46px; height: 46px; }

/* Team- und Plus-Pille (Icon + Label) */
.mbadge--team, .mbadge--plus {
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    background: color-mix(in srgb, var(--mbadge-tone) 16%, var(--c-surface));
    border: 1px solid var(--c-border);
    border-color: color-mix(in srgb, var(--mbadge-tone) 48%, transparent);
    color: color-mix(in srgb, var(--mbadge-tone) 72%, #ffffff);
}
.mbadge--sm.mbadge--team, .mbadge--sm.mbadge--plus { padding: 3px 8px 3px 5px; font-size: .72rem; }
.mbadge--md.mbadge--team, .mbadge--md.mbadge--plus { padding: 4px 11px 4px 6px; font-size: .82rem; }
.mbadge--team .mbadge__icon img { border-radius: var(--radius-xs); }

/* +N-Verweis auf alle Badges */
.mbadge--more {
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-weight: 700;
    padding: 0 8px;
}
.mbadge--sm.mbadge--more { height: 26px; min-width: 26px; font-size: .72rem; }
.mbadge--md.mbadge--more { height: 34px; min-width: 34px; font-size: .8rem; }
.mbadge--more:hover { color: var(--c-text); border-color: var(--c-text-muted); }

/* Fokus sichtbar (Tastatur) */
.mbadge:focus-visible { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--mbadge-tone, var(--c-accent)); }

/* Tooltip im MALU-Stil – erscheint bei Hover UND Fokus (auch per Tap fokussierbar) */
.mbadge__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 40;
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
}
.mbadge:hover .mbadge__tip,
.mbadge:focus .mbadge__tip,
.mbadge:focus-visible .mbadge__tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mbadge__tip-title { display: block; font-weight: 700; font-size: .82rem; color: var(--c-text); }
.mbadge__tip-desc { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.4; color: var(--c-text-muted); }

/* Badge-Übersicht (Badges-Tab): Karten mit großem Icon + Name + Beschreibung */
.badge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.badge-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius); }
.badge-card__icon.mbadge {
    flex: 0 0 auto; width: 54px; height: 54px; padding: 0; border-radius: var(--radius-lg); justify-content: center;
    background: color-mix(in srgb, var(--mbadge-tone) 18%, var(--c-surface));
    border: 1px solid color-mix(in srgb, var(--mbadge-tone) 48%, transparent);
    color: var(--mbadge-tone);
}
.badge-card__icon .mbadge__icon svg, .badge-card__icon .mbadge__icon img { width: 30px; height: 30px; }
.badge-card__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.badge-card__name { font-weight: 700; color: var(--c-text); }
.badge-card__desc { color: var(--c-text-muted); font-size: .86rem; line-height: 1.45; }

/* Empty-State Badges */
.badge-empty { text-align: center; padding: 26px 16px; }
.badge-empty__icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-muted); }
.badge-empty__icon svg { width: 26px; height: 26px; }
.badge-empty__text { margin: 12px 0 2px; font-weight: 700; color: var(--c-text); }
.badge-empty__sub { margin: 0; color: var(--c-text-muted); font-size: .88rem; }

/* --- Profilkopf neu ausgerichtet: Avatar · Identität · Statistik --- */
.uprofile__head { align-items: flex-end; justify-content: flex-start; gap: 20px 30px; }
.uprofile__identity { flex: 1 1 320px; min-width: 0; padding-bottom: var(--space-2); }
.uprofile__name { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; margin: 0; }
.uprofile__handle { color: var(--c-text-muted); margin: 10px 0 0; }
.uprofile__badges { margin: 11px 0 0; }
.uprofile__bio-lead { color: var(--c-text); margin: 12px 0 0; max-width: 60ch; line-height: 1.55; white-space: pre-line; }
.uprofile__stats { flex: 0 0 auto; display: flex; gap: 26px; margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.uprofile__stats li { display: flex; flex-direction: column; align-items: flex-start; }
.uprofile__stats span { color: var(--c-text-muted); font-size: .82rem; }
.uprofile__stats strong { font-size: 1.5rem; font-weight: 800; line-height: 1.15; margin-top: 2px; }

/* „Über"-Karte */
.uprofile__about-empty { color: var(--c-text-muted); margin: 0; }
.uprofile__meta { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0;
    color: var(--c-text-muted); font-size: .9rem; }
.uprofile__meta svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Mobile: Kopf gestapelt, Statistik als Reihe, Badges links */
@media (max-width: 768px) {
    .uprofile__head { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: -48px; }
    .uprofile__identity { flex: 1 1 auto; width: 100%; padding-bottom: 0; }
    .uprofile__badges { justify-content: flex-start; }
    .uprofile__stats { width: 100%; justify-content: space-between; gap: var(--space-3); }
    .mbadge__tip { left: 0; transform: translateY(4px); }
    .mbadge:hover .mbadge__tip,
    .mbadge:focus .mbadge__tip,
    .mbadge:focus-visible .mbadge__tip { transform: translateY(0); }
}

/* =====================================================================
   Profil-Header v2 – Feedback: Name/@Handle UNTER dem Banner (nur der Avatar
   überlappt), Badges rechts ÜBER Follower/Folge ich/Posts, Zahlen dezent
   hervorgehoben, Bio klar lesbar.
   ===================================================================== */
.uprofile__head {
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 28px;
    margin-top: 0;                 /* Kopf beginnt UNTER dem Banner */
    padding: 0 var(--space-4);
}
.uprofile__main {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1 1 420px;
    min-width: 0;
}
.uprofile__avatar { margin-top: -56px; flex: 0 0 auto; }   /* nur der Avatar überlappt den Banner */
.uprofile__identity { flex: 1 1 auto; min-width: 0; padding-top: 10px; padding-bottom: 0; }
.uprofile__name { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; margin: 0; }
.uprofile__handle { color: var(--c-text-muted); margin: 10px 0 0; font-size: .96rem; }

/* Bio klar erkennbar */
.uprofile__bio-lead {
    color: var(--c-text);
    margin: 12px 0 0;
    max-width: 60ch;
    font-size: 1rem;
    line-height: 1.55;
    white-space: pre-line;
}

/* Rechte Spalte: Badges oben, Statistik darunter */
.uprofile__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 0;
    flex: 0 0 auto;
}
.uprofile__badges { margin: 0; justify-content: flex-end; }

/* Statistik dezent hervorgehoben (kleine Kärtchen) */
.uprofile__stats { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.uprofile__stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 80px;
    padding: 9px 14px;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}
.uprofile__stats strong { font-size: 1.35rem; font-weight: 800; line-height: 1.1; color: var(--c-text); }
.uprofile__stats span { color: var(--c-text-muted); font-size: .78rem; }

/* Mobile: gestapelt; Badges + Statistik links; Statistik als volle Reihe */
@media (max-width: 768px) {
    .uprofile__head { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 0; }
    .uprofile__main { flex-direction: row; align-items: flex-start; gap: 14px; }
    .uprofile__avatar { margin-top: -46px; }
    .uprofile__identity { padding-top: 6px; }
    .uprofile__aside { align-items: flex-start; padding-top: 0; }
    .uprofile__badges { justify-content: flex-start; }
    .uprofile__stats { width: 100%; }
    .uprofile__stats li { flex: 1 1 0; min-width: 0; }
}

/* Profil-Übersicht: mehrere Karten (Über, Badges-Vorschau, Neueste Beiträge) */
.uprofile__overview { display: grid; grid-template-columns: 1fr; gap: 16px; }
.uprofile__card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.uprofile__card-head .uprofile__card-title { margin: 0; }
.uprofile__card-link { flex: 0 0 auto; font-size: .86rem; font-weight: 600; color: var(--c-accent); }
.uprofile__card-link:hover { color: var(--c-accent-dim); text-decoration: none; }
/* Beiträge in der Übersicht randlos an die Karte anschließen */
.uprofile__overview .uprofile__card .dash-feed { display: flex; flex-direction: column; gap: 12px; }

/* Zwei Badge-Reihen im Profil: Desktop rechts (--d), Mobile unter dem Handle (--m).
   Standard = Desktop: die Mobile-Reihe ist aus; malu-mobile.css dreht das < 768px um. */
.uprofile__badges--m { display: none; }

/* =====================================================================
   „Neu"-Markierung fuer News/Updates: dezenter hellblauer MALU-Glow +
   blauer Rand + kleiner „Neu"-Badge. Keine Vollflaeche, keine Animation.
   Verschwindet, sobald der Bereich geoeffnet wurde (Seen-Tracking).
   ===================================================================== */
.dash-topic-link--new {
    box-shadow: 0 0 0 1px rgba(109,211,255,.55), 0 0 16px rgba(109,211,255,.24);
}
.dash-topic-link--new:hover,
.dash-topic-link--new:focus-visible {
    box-shadow: 0 0 0 1px rgba(109,211,255,.72), 0 0 20px rgba(109,211,255,.32);
}
.dash-topic-link__new {
    margin-left: auto;
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(109,211,255,.16);
    border: 1px solid rgba(109,211,255,.50);
    color: #aee7ff;
    font-size: .68rem; font-weight: 700; letter-spacing: .03em; line-height: 1.4;
}

/* =====================================================================
   News/Updates – Interaktion: kompakte Aktionsleiste direkt unter dem
   Artikelinhalt (Reaktionen links, Kommentieren rechts) + Kommentare
   inkl. einer Antwort-Ebene darunter. Ruhig, MALU-Dark.
   ===================================================================== */
.news-actions {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--c-border);
}
.news-actions .post-reactions { flex-wrap: wrap; }
.news-actions__comment { flex: 0 0 auto; }

/* Kommentarbereich unter dem Artikel (eigene Karte, klar getrennt) */
.news-comments-block {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-top: 16px;
    box-shadow: var(--shadow-sm);
}

/* Kommentar-/Antwortformular */
.news-comment-form { margin: 0 0 20px; }
.news-comment-reply { margin: 8px 0 2px; }
.news-comment-form__field {
    width: 100%; box-sizing: border-box;
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius);
    color: var(--c-text); padding: 11px 13px; font: inherit; font-size: .92rem;
    resize: vertical; min-height: 68px; transition: border-color .15s, box-shadow .15s;
}
.news-comment-form__field:focus {
    border-color: var(--c-accent); outline: none; box-shadow: var(--focus-ring);
}
.news-comment-form__hint { margin: 6px 2px 0; font-size: .76rem; color: var(--c-text-dim); }
.news-comment-form__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* Kommentarliste (nutzt die .comment-Bausteine wie im Feed) + Antworten eingerückt */
.news-comments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.news-comments .comment { margin: 0; }
.comment__replies-wrap { list-style: none; }
.comment__replies {
    list-style: none; margin: 12px 0 0 22px; padding: 0 0 0 16px;
    border-left: 2px solid var(--c-border);
    display: flex; flex-direction: column; gap: 14px;
}

@media (max-width: 767px) {
    .news-comments-block { padding: 16px 15px; margin-top: 12px; }
    .news-comment-form__foot .btn { flex: 1 1 auto; text-align: center; }
    .comment__replies { margin-left: 10px; padding-left: 12px; }
}

/* =====================================================================
   News/Updates – Aktionsleiste responsiv (Tablet + Handy).
   Tablet: Reaktionen links + Kommentieren rechts in einer Zeile.
   Handy: gestapelt – Reaktionen als volle Reihe, Kommentieren breit darunter.
   „Kommentieren" bleibt auch auf sehr kleinen Screens beschriftet (Toggle!).
   ===================================================================== */
.news-actions__comment .post-action__label { display: inline; }

@media (max-width: 600px) {
    .news-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .news-actions .post-reactions { width: 100%; justify-content: space-between; gap: 6px; }
    .news-actions .post-react { flex: 0 1 auto; justify-content: center; }
    .news-actions__comment { width: 100%; justify-content: center; min-height: 44px; }
    /* Reaktions-Buttons gut tippbar auf dem Handy. */
    .news-actions .post-react { min-height: 40px; }
}

/* Tablet-Bereich: etwas mehr Luft, Reaktionen dürfen umbrechen ohne die
   Kommentieren-Schaltfläche zu verdrängen. */
@media (min-width: 601px) and (max-width: 1024px) {
    .news-actions { gap: 12px; }
    .news-actions .post-reactions { flex: 1 1 auto; }
    .news-actions__comment { flex: 0 0 auto; }
}

/* =====================================================================
   COMMUNITY TAB V1 (.cmty-*)
   Eigener Bereich unter /community: Übersicht, Erstellen, Community-Seite
   (Feed) und Verwalten. Dark Mode, MALU-Karten, ORANGE als Community-Akzent.
   Responsive: 1 Spalte mobil, 2 Spalten ab 640px; keine horizontale
   Scrollbar. Beitragskarten nutzen die bestehenden .post-item-Styles
   (Reaktionen/Kommentare/Antworten unverändert).
   ===================================================================== */
/* Volle Breite der Hauptspalte nutzen (nicht mittig zusammengestaucht). */
.cmty { max-width: none; margin: 0; }
.cmty--narrow { max-width: 900px; }
.cmty--page   { max-width: none; }

/* --- Kopf der Übersicht / Unterseiten --- */
.cmty-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.cmty-head__title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.55rem; font-weight: 800; color: var(--c-text); }
.cmty-head__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius); color: var(--c-community); background: color-mix(in srgb, var(--c-community) 12%, transparent); }
.cmty-head__icon svg { width: 22px; height: 22px; }
.cmty-head__lead { margin: 0; color: var(--c-text-muted); font-size: .95rem; line-height: 1.5; }
.cmty-head--sub .cmty-head__title { font-size: 1.3rem; }
.cmty-head__create { flex: 0 0 auto; }

/* --- Buttons --- */
.cmty-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: .88rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.cmty-btn svg { width: 15px; height: 15px; }
.cmty-btn--primary { background: var(--c-community); color: #2b1503; }
.cmty-btn--primary:hover { background: #fda85e; }
.cmty-btn--ghost { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text-muted); }
.cmty-btn--ghost:hover { border-color: var(--c-community); color: var(--c-text); }
.cmty-btn--member { background: color-mix(in srgb, var(--c-community) 12%, transparent); border-color: color-mix(in srgb, var(--c-community) 40%, transparent); color: var(--c-community); cursor: default; }
.cmty-btn--pending { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text-muted); cursor: default; }
.cmty-btn--danger { background: transparent; border-color: rgba(244,67,54,.45); color: var(--c-danger); }
.cmty-btn--danger:hover { background: rgba(244,67,54,.1); }
.cmty-btn--sm { padding: 6px 12px; font-size: .8rem; }

/* --- Abschnitte / Meldungen --- */
.cmty-section { display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-text-muted); }
.cmty-section__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-community) 16%, transparent); color: var(--c-community); font-size: .74rem; }
.cmty-alert { margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(244,67,54,.4); border-radius: var(--radius); background: rgba(244,67,54,.08); color: #ff8a80; font-size: .9rem; }
.cmty-note { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text-muted); font-size: .88rem; line-height: 1.5; }

/* --- Karten der Übersicht --- */
/* Raster wächst vertikal: 1 Spalte mobil, 2 auf Tablet, DREI Gruppen je Reihe
   ab Desktop (die Sortierung nach Mitgliederzahl kommt aus Community::browse). */
.cmty-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px)  { .cmty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cmty-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Karten-Hintergrund: gewählter Community-Banner (per --cmty-card-bg aus der View),
   unter einer dunklen Überlagerung, damit Texte im Dark Mode lesbar bleiben.
   Layout als Grid: Icon links vom Text, die Buttons als VOLLE Zeile darunter –
   so bleiben Name/Beschreibung auch bei 3 Karten je Reihe gut lesbar. */
.cmty-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px 12px; padding: 14px; background: linear-gradient(160deg, rgba(15,15,16,.80), rgba(15,15,16,.93) 62%), var(--cmty-card-bg, var(--c-surface)); border: 1px solid var(--c-border); border-radius: var(--radius); min-width: 0; }
.cmty-card__icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid; text-decoration: none; }
.cmty-card__icon svg { width: 22px; height: 22px; }
.cmty-card__body { min-width: 0; }
.cmty-card__name { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .98rem; font-weight: 700; }
.cmty-card__name a { color: var(--c-text); text-decoration: none; overflow-wrap: break-word; }
.cmty-card__name a:hover { color: var(--c-community); }
.cmty-card__handle { margin: 1px 0 0; color: var(--c-community); font-size: .8rem; font-weight: 600; overflow-wrap: break-word; }
.cmty-card__desc { margin: 6px 0 0; color: var(--c-text-muted); font-size: .85rem; line-height: 1.45; overflow-wrap: break-word; }
.cmty-card__meta { margin: 8px 0 0; display: flex; align-items: center; gap: 5px; color: var(--c-text-dim); font-size: .78rem; }
.cmty-card__meta svg { width: 13px; height: 13px; }
.cmty-card__actions { grid-column: 1 / -1; display: flex; align-items: stretch; gap: 8px; align-self: end; }
.cmty-card__actions form { flex: 1 1 auto; display: flex; }
.cmty-card__actions .cmty-btn { flex: 1 1 auto; padding: 7px 12px; font-size: .8rem; min-height: 36px; }

/* --- Chips / Verifizierungs-Badge --- */
.cmty-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 700; }
.cmty-chip svg { width: 11px; height: 11px; }
.cmty-chip--private { background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-muted); }
.cmty-chip--official { background: rgba(109,211,255,.1); border: 1px solid rgba(109,211,255,.4); color: var(--c-accent); }
.cmty-chip--official img { width: 12px; height: 12px; }
.cmty-verified { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-community); color: #2b1503; flex: 0 0 auto; }
.cmty-verified svg { width: 12px; height: 12px; }
.cmty-verified--sm { width: 16px; height: 16px; }
.cmty-verified--sm svg { width: 10px; height: 10px; }

/* --- Empty-State --- */
.cmty-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 18px; background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--radius); text-align: center; }
.cmty-empty__icon { color: var(--c-text-dim); }
.cmty-empty__icon svg { width: 34px; height: 34px; }
.cmty-empty__title { margin: 0; color: var(--c-text); font-weight: 700; }
.cmty-empty__sub { margin: 0 0 6px; color: var(--c-text-muted); font-size: .88rem; }

/* --- Formular (Erstellen / Verwalten) --- */
.cmty-form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 16px; }
/* Verwalten: Karte als Wrapper (Einstellungen-Formular + Gefahrenzone unten). */
.cmty-form__main { display: flex; flex-direction: column; gap: 16px; }
.cmty-form__divider { border-top: 1px solid var(--c-border); margin: 4px 0 0; }
.cmty-form__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .cmty-form__grid { grid-template-columns: 1fr 1fr; } }
.cmty-field { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cmty-field__label { color: var(--c-text); font-size: .86rem; font-weight: 700; }
.cmty-field__input { width: 100%; padding: 10px 12px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); color: var(--c-text); font: inherit; font-size: .92rem; }
.cmty-field__input:focus { outline: none; border-color: var(--c-accent); box-shadow: var(--focus-ring); }   /* System-Fokus statt Modul-Orange (einheitlich) */
.cmty-field__input[aria-invalid="true"] { border-color: var(--c-danger); }
.cmty-field__textarea { resize: vertical; min-height: 74px; }
.cmty-field__hint { margin: 0; color: var(--c-text-dim); font-size: .78rem; line-height: 1.4; }
.cmty-field__static { margin: 0; padding: 10px 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); color: var(--c-text-muted); font-weight: 600; }
.cmty-field__handle { display: flex; align-items: center; gap: 0; }
.cmty-field__handle > span { padding: 10px 0 10px 12px; background: var(--c-bg); border: 1px solid var(--c-border); border-right: 0; border-radius: 10px 0 0 10px; color: var(--c-community); font-weight: 700; }
.cmty-field__handle .cmty-field__input { border-radius: 0 10px 10px 0; border-left: 0; padding-left: 4px; }
.cmty-form__foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* Auswahl-Kacheln (Sichtbarkeit / Posting-Regel) */
.cmty-choice-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .cmty-choice-row { grid-template-columns: 1fr 1fr; } }
.cmty-choice { display: block; cursor: pointer; position: relative; }
.cmty-choice input { position: absolute; opacity: 0; pointer-events: none; }
.cmty-choice__box { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: border-color .15s, background .15s; }
.cmty-choice input:checked + .cmty-choice__box { border-color: var(--c-community); background: color-mix(in srgb, var(--c-community) 8%, transparent); }
.cmty-choice input:focus-visible + .cmty-choice__box { outline: 2px solid var(--c-community); outline-offset: 2px; }
.cmty-choice__title { color: var(--c-text); font-weight: 700; font-size: .9rem; }
.cmty-choice__sub { color: var(--c-text-muted); font-size: .8rem; line-height: 1.4; }

/* Icon-/Farb-/Banner-Auswahl */
.cmty-pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cmty-pick { position: relative; cursor: pointer; }
.cmty-pick input { position: absolute; opacity: 0; pointer-events: none; }
.cmty-pick__icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-text-muted); transition: border-color .15s, color .15s; }
.cmty-pick__icon svg { width: 20px; height: 20px; }
.cmty-pick input:checked + .cmty-pick__icon { border-color: var(--c-community); color: var(--c-community); background: color-mix(in srgb, var(--c-community) 10%, transparent); }
.cmty-pick__dot { display: block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; }
.cmty-pick input:checked + .cmty-pick__dot { border-color: var(--c-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-community) 35%, transparent); }
.cmty-pick__banner { display: block; width: 64px; height: 34px; border-radius: var(--radius-sm); border: 2px solid transparent; }
.cmty-pick input:checked + .cmty-pick__banner { border-color: var(--c-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-community) 35%, transparent); }
.cmty-pick input:focus-visible + .cmty-pick__icon,
.cmty-pick input:focus-visible + .cmty-pick__dot,
.cmty-pick input:focus-visible + .cmty-pick__banner { outline: 2px solid var(--c-community); outline-offset: 2px; }

/* --- Community-Seite: Header --- */
.cmty-back { margin: 0 0 12px; }
.cmty-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-text-muted); font-size: .85rem; text-decoration: none; }
.cmty-back a:hover { color: var(--c-community); }
.cmty-back svg { width: 14px; height: 14px; }
.cmty-hero { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.cmty-hero__banner { height: 96px; }
.cmty-hero__row { display: flex; align-items: flex-start; gap: 14px; padding: 0 18px 16px; flex-wrap: wrap; }
.cmty-hero__icon { width: 68px; height: 68px; margin-top: -30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid; background-color: var(--c-surface); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.cmty-hero__icon svg { width: 30px; height: 30px; }
.cmty-hero__text { flex: 1 1 260px; min-width: 0; padding-top: 10px; }
.cmty-hero__name { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.3rem; font-weight: 800; color: var(--c-text); overflow-wrap: anywhere; }
.cmty-hero__meta { margin: 4px 0 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--c-text-muted); font-size: .85rem; }
.cmty-hero__handle { color: var(--c-community); font-weight: 700; overflow-wrap: anywhere; }
.cmty-hero__dot { color: var(--c-text-dim); }
.cmty-hero__desc { margin: 8px 0 0; color: var(--c-text-muted); font-size: .9rem; line-height: 1.5; overflow-wrap: anywhere; }
.cmty-hero__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; }

/* --- Regeln / gesperrter Bereich / Mitglieder-Zeile --- */
.cmty-rules { margin-bottom: 16px; padding: 12px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-community); border-radius: var(--radius); }
.cmty-rules__title { margin: 0 0 4px; color: var(--c-text); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cmty-rules__text { margin: 0; color: var(--c-text-muted); font-size: .87rem; line-height: 1.55; overflow-wrap: anywhere; }
.cmty-locked { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 38px 18px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); text-align: center; }
.cmty-locked__icon { color: var(--c-text-dim); }
.cmty-locked__icon svg { width: 36px; height: 36px; }
.cmty-locked__title { margin: 0; color: var(--c-text); font-weight: 800; font-size: 1.05rem; }
.cmty-locked__sub { margin: 0 0 8px; color: var(--c-text-muted); font-size: .9rem; }
/* Mitglieder: umbrechendes Raster (mehrere Reihen, keine gequetschte
   Überlapp-Zeile). Avatar ~34px + 8px Lücke -> mind. 7 je Reihe ab ~300px. */
.cmty-members { display: block; margin-bottom: 16px; padding: 12px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.cmty-members__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cmty-members__title { color: var(--c-text); font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cmty-members__count { color: var(--c-text-muted); font-size: .82rem; font-weight: 600; }
.cmty-members__row { display: flex; flex-wrap: wrap; gap: 8px; }
.cmty-members__avatar { flex: 0 0 auto; }
.cmty-members__more { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 50%; background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-muted); font-size: .76rem; font-weight: 700; }

/* --- Composer --- */
.cmty-composer { margin-bottom: 18px; padding: 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 10px; }
.cmty-composer__field { width: 100%; padding: 10px 12px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); color: var(--c-text); font: inherit; font-size: .92rem; resize: vertical; min-height: 68px; }
.cmty-composer__field:focus { outline: none; border-color: var(--c-community); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-community) 18%, transparent); }
.cmty-composer__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cmty-composer__hint { color: var(--c-text-dim); font-size: .78rem; }

/* --- Feed --- */
.cmty-feed { display: flex; flex-direction: column; gap: 12px; }

/* --- Verwalten: Listen (Anfragen / Mitglieder) --- */
.cmty-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cmty-list__item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); flex-wrap: wrap; }
.cmty-list__body { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.cmty-list__name { color: var(--c-text); font-weight: 700; font-size: .9rem; text-decoration: none; overflow-wrap: anywhere; }
.cmty-list__name:hover { color: var(--c-community); }
.cmty-list__meta { color: var(--c-text-dim); font-size: .78rem; }
.cmty-list__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Community-Markierung (@handle) in Beitragstexten: ORANGE ---
   Nutzer-Markierungen (.post-mention) bleiben hellblau (var(--c-accent)). */
.post-cmention { color: var(--c-community); font-weight: 600; }
.post-cmention:hover { text-decoration: underline; }

/* Community-Chip an Beitragskarten im normalen Feed */
.post-item__community { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-community) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-community) 35%, transparent); color: var(--c-community); font-size: .72rem; font-weight: 700; text-decoration: none; max-width: 100%; }
.post-item__community svg { width: 11px; height: 11px; flex: 0 0 auto; }
.post-item__community:hover { background: color-mix(in srgb, var(--c-community) 18%, transparent); }

/* Globale Suche: Community-Treffer (Zeile mit Gruppen-Icon, Name, Meta, Chips). */
.discover-cmty__icon svg { width: 16px; height: 16px; }
.discover-cmty__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.discover-cmty__body .discover-person__name { white-space: normal; overflow: visible; text-overflow: clip; }
/* Chips (Privat/Offiziell) dürfen unter den Namen umbrechen, statt ihn zu quetschen. */
.discover-person__link:has(.discover-cmty__body) { flex-wrap: wrap; }
.discover-cmty__body { flex-basis: 60%; }
.discover-cmty__meta { color: var(--c-community); font-size: .78rem; font-weight: 600; overflow-wrap: break-word; }
.discover-person__link .cmty-chip { flex: 0 0 auto; }

/* Community-Hinweise im Stil der Willkommens-Karte (.dash-hello): gleiche
   Optik wie auf der Startseite, Fehler-Variante rot getönt. malu.js blendet
   .dash-hello nach 30 Sekunden automatisch aus. */
.cmty-hello { margin-bottom: 16px; }
.cmty-hello--error { border-color: rgba(244,67,54,.45); background: rgba(244,67,54,.06); }
.cmty-hello--error .dash-hello__title { color: #ff8a80; }

/* Wichtig-Hinweis (Erstellen/Verwalten): Werbeverbot + Nutzungsbedingungen. */
.cmty-warn { margin: 0 0 16px; padding: 12px 16px; background: color-mix(in srgb, var(--c-community) 6%, transparent); border: 1px solid color-mix(in srgb, var(--c-community) 35%, transparent); border-left: 3px solid var(--c-community); border-radius: var(--radius); }
.cmty-warn__title { margin: 0 0 4px; color: var(--c-text); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cmty-warn__text { margin: 0; color: var(--c-text-muted); font-size: .86rem; line-height: 1.55; }
.cmty-warn__text a { color: var(--c-community); }

/* Badge-Kürzel-Feld (4 Buchstaben, Grossbuchstaben-Optik). */
.cmty-field__input--badge { max-width: 140px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

/* Gruppen-Badge-Chip: gleiche Pille wie das Team-Badge, klickbar zur Community. */
.mbadge--cmty:hover { filter: brightness(1.15); }

/* Gruppen-Badge-Auswahl im „Profil anpassen"-Modal (avm). */
.avm__badge-row { display: flex; flex-direction: column; gap: 8px; }
.avm__badge-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); color: var(--c-text-muted); font: inherit; font-size: .88rem; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.avm__badge-btn:hover { border-color: var(--c-community); }
.avm__badge-btn.is-selected { border-color: var(--c-community); background: color-mix(in srgb, var(--c-community) 8%, transparent); }
.avm__badge-btn:focus-visible { outline: 2px solid var(--c-community); outline-offset: 2px; }
.avm__badge-none { font-weight: 700; }
.avm__badge-name { font-weight: 600; min-width: 0; overflow-wrap: break-word; }

/* Gruppen-Badge-Auswahl (Profil bearbeiten). */
.cmty-badgepick { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.cmty-badgepick__item { display: block; cursor: pointer; position: relative; }
.cmty-badgepick__item input { position: absolute; opacity: 0; pointer-events: none; }
.cmty-badgepick__box { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); transition: border-color .15s, background .15s; }
.cmty-badgepick__item input:checked + .cmty-badgepick__box { border-color: var(--c-community); background: color-mix(in srgb, var(--c-community) 8%, transparent); }
.cmty-badgepick__item input:focus-visible + .cmty-badgepick__box { outline: 2px solid var(--c-community); outline-offset: 2px; }
.cmty-badgepick__name { color: var(--c-text-muted); font-size: .88rem; font-weight: 600; }
.cmty-badgepick__none { color: var(--c-text-muted); font-size: .88rem; font-weight: 700; }

/* Gefahrenzone (Verwalten): Community dauerhaft löschen. */
.cmty-danger { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; background: rgba(244,67,54,.05); border: 1px solid rgba(244,67,54,.35); border-radius: var(--radius); flex-wrap: wrap; }
.cmty-danger__text { flex: 1 1 260px; min-width: 0; }
.cmty-danger__title { margin: 0 0 3px; color: var(--c-text); font-weight: 700; font-size: .92rem; }
.cmty-danger__sub { margin: 0; color: var(--c-text-muted); font-size: .82rem; line-height: 1.45; }
@media (max-width: 767px) {
    .cmty-danger form { width: 100%; display: flex; }
    .cmty-danger .cmty-btn { flex: 1 1 auto; }
}

/* Sidebar-Widget „Deine Gruppen" (unter den Kontakten, Desktop/Tablet):
   nutzt die Kontakte-Zeilen (.dash-cside), nur das Icon ist der Community-Kreis. */
.dash-groups__icon svg { width: 16px; height: 16px; }
.dash-groups__all { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-border-soft); color: var(--c-community); font-size: .82rem; font-weight: 600; text-decoration: none; text-align: center; }
.dash-groups__all:hover { text-decoration: underline; }

/* --- Housekeeping: kleine Ergänzungen für das Communities-Modul --- */
.hk-filter__group--btn { align-self: end; }
.hk-table__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* --- Mobile (<768px): Community-Bereich in der Handy-Shell --- */
@media (max-width: 767px) {
    .cmty-head { flex-direction: column; align-items: stretch; }
    .cmty-head__title { font-size: 1.3rem; }
    .cmty-head__icon { width: 36px; height: 36px; }
    .cmty-head__icon svg { width: 19px; height: 19px; }
    .cmty-head__create { width: 100%; }
    /* Hero kompakter: Banner niedriger, Icon kleiner, Name nicht gequetscht. */
    .cmty-hero__banner { height: 72px; }
    .cmty-hero__row { padding: 0 14px 14px; gap: 10px; }
    .cmty-hero__icon { width: 56px; height: 56px; margin-top: -24px; }
    .cmty-hero__icon svg { width: 24px; height: 24px; }
    .cmty-hero__name { font-size: 1.15rem; }
    /* Formulare/Composer: weniger Innenabstand, volle Tippflächen. */
    .cmty-form { padding: 14px; }
    .cmty-composer { padding: 12px; }
    .cmty-composer__field { min-height: 80px; }
    .cmty-field__input { min-height: 44px; }
    .cmty-members__row { gap: 6px; }
    .cmty-section { margin-top: 20px; }
    .cmty-card__actions .cmty-btn { min-height: 42px; }
    .cmty-hero__actions { width: 100%; }
    .cmty-hero__actions form { flex: 1 1 auto; display: flex; }
    .cmty-hero__actions .cmty-btn { flex: 1 1 auto; min-height: 42px; }
    .cmty-btn { min-height: 40px; }
    .cmty-composer__foot { flex-direction: column; align-items: stretch; }
    .cmty-composer__foot .cmty-btn { width: 100%; }
    .cmty-list__actions { width: 100%; }
    .cmty-list__actions form { flex: 1 1 auto; display: flex; }
    .cmty-list__actions .cmty-btn { flex: 1 1 auto; }
}

/* Tablet (768–1024px): 2-spaltige Karten mit etwas mehr Luft; Buttons gut
   tippbar, Karten-Aktionen bleiben rechts ohne Überlappung. */
@media (min-width: 768px) and (max-width: 1024px) {
    .cmty-grid { gap: 14px; }
    .cmty-hero__row { padding: 0 16px 14px; }
    .cmty-btn { min-height: 40px; }
    .cmty-form__grid { gap: 14px; }
}

/* ================================================================
   Beitrags-Einzelseite (D6): Feed-Karte im Lesefokus der App-Shell
   ================================================================ */
.post-show { display: flex; flex-direction: column; gap: 14px; }
.post-show__back {
    display: inline-flex; align-items: center; gap: 8px;
    width: fit-content;
    color: var(--c-text-muted); font-size: .9rem; font-weight: 600;
    text-decoration: none;
    transition: color var(--t-fast);
}
.post-show__back:hover { color: var(--c-text); text-decoration: none; }
.post-show__back svg { width: 16px; height: 16px; }
/* Kommentare auf der Einzelseite: server-gerendert, immer sichtbar */
.post-show .post-comments { border-top: 1px solid var(--hairline); margin-top: 4px; padding-top: 12px; }


/* =====================================================================
   15. MOMENTE & GESTALTETE BEITRÄGE (Feature "Momente", 12.07.2026)
   ---------------------------------------------------------------------
   Leiste über dem Feed, Viewer-Overlay (Desktop zentriert / Handy Vollbild),
   Canvas-Editor mit schwebenden Werkzeugen, Kennzeichen (vmark), Sidebar-
   Widget, Profil-Ergänzungen (MALUS-Leiste, Karten-Raster, Icon-Tabs) und
   Archiv. Ruhig, dunkel, MALU-Töne – bewusst kein Instagram-Look.
   ===================================================================== */

/* ------------------------------------------------ Kennzeichen (vmark) */
/*
   AUSRICHTUNG DES KENNZEICHENS (korrigiert 22.07.2026)
   ---------------------------------------------------------------------
   Vorher stand hier vertical-align: -0.18em. Das haengte das Zeichen zu
   tief, und zwar umso weiter, je groesser die Schrift: gemessen 2,8 px
   in der Kontaktleiste, 7 px bei 28er Schrift. Aufgefallen ist es an
   einem verifizierten Konto in der Kontaktleiste.

   Der Grund: bei Grundlinien-Ausrichtung sitzt die UNTERKANTE des
   Zeichens auf der Grundlinie. Wie weit die Mitte dann danebenliegt,
   haengt von der Zeichenhoehe ab, ein fester em-Wert kann das nicht
   treffen.

   vertical-align: middle setzt die Mitte des Zeichens auf
   Grundlinie plus halbe x-Hoehe. Der Rest-Versatz zur optischen
   Textmitte ist danach KONSTANT 0,17em, unabhaengig von Schrift- und
   Zeichengroesse (nachgemessen ueber sechs Kombinationen von 12,5 bis
   28 px). Deshalb genau diese eine Verschiebung.

   Ergebnis: hoechstens 0,5 px Abweichung in allen geprueften Groessen.
   top wirkt rein optisch, es verschiebt nichts im Textfluss.
*/
.vmark {
    /* GROESSE: eine Stelle fuer alle vier Arten und alle Seiten.
       Vorher gaben zwoelf Aufrufstellen sieben verschiedene Pixelwerte
       vor, dadurch war dasselbe Kennzeichen je nach Seite anders gross.

       FESTE 14 px, bewusst nicht em: das Kennzeichen ist eine Auszeich-
       nung des Kontos und soll ueberall dasselbe Zeichen sein. Mit em
       waere es im Profil (27 px Schrift) mehr als doppelt so gross wie
       in der Momente-Leiste (11 px Schrift). 14 px liegt im mittleren
       Bereich der Schriftgroessen und haelt auch das Team-Logo lesbar,
       das ohne gefuellten Kreis auskommt und deshalb schwaecher wirkt. */
    width: 14px; height: 14px;
    margin-left: 4px;
    flex: 0 0 auto;

    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #0f0f10;

    /* HOEHE: vertical-align: middle setzt die Mitte des Zeichens auf
       Grundlinie + halbe x-Hoehe (0,543em / 2 = 0,272em). Sitzen soll es
       aber auf der Mitte der Grossbuchstaben (0,747em / 2 = 0,374em).
       Die Differenz von 0,102em fehlt und wird hier nachgeholt. Beide
       Werte sind Schriftkonstanten, der Ausgleich gilt also in jeder
       Schriftgroesse. top verschiebt nur optisch, nicht im Textfluss. */
    vertical-align: middle; position: relative; top: -0.102em;
}
.vmark svg { width: 68%; height: 68%; }
.vmark--verified { background: var(--c-accent); }
.vmark--pro      { background: #e11d48; color: #fff; }
.vmark--plus     { background: var(--c-community); }
.vmark--team     { border-radius: 6px; object-fit: contain; background: none; }

/* ------------------------------------------------ Leiste über dem Feed */
.mbar { background: var(--c-surface); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); padding: 14px 16px 10px; margin-bottom: var(--space-5); }
.mbar__row { display: flex; gap: 18px; align-items: flex-start; overflow-x: auto;
    scrollbar-width: thin; padding-bottom: 4px; }
.mbar__item { flex: 0 0 auto; text-align: center; width: 66px; }
.mbar__circle { display: flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; background: none;
    border: 2px solid transparent; padding: 0; cursor: pointer; transition: transform var(--t-fast); }
.mbar__circle:hover { transform: translateY(-1px); }
.mbar__circle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mbar__circle--new  { border-color: var(--c-accent); box-shadow: 0 0 10px rgba(109,211,255,.28); }
.mbar__circle--seen { border-color: #4a5563; }
.mbar__circle--create { border: 2px dashed #3a3a44; position: relative; }
.mbar__inner { display: flex; align-items: center; justify-content: center; overflow: hidden;
    width: 46px; height: 46px; border-radius: 50%; background: var(--c-surface-2);
    color: var(--c-text); font-size: 17px; font-weight: 500; }
.mbar__inner img { width: 60%; height: 60%; object-fit: contain; }
.mbar__inner--create { position: relative; }
.mbar__plus { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--c-accent); color: #0f0f10; font-size: 14px;
    line-height: 17px; font-weight: 600; border: 2px solid var(--c-surface);
    display: flex; align-items: center; justify-content: center; z-index: 2; }
.mbar__name { margin: 6px 0 0; font-size: 11px; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbar__name--seen { color: var(--c-text-muted); }
/* Die feste Pixelgroesse hier ist entfallen: sie war der letzte Ort, an dem
   ein Kennzeichen anders gross war als der Rest. Es gilt die Grundregel. */
.mbar__empty { margin: 4px 0; font-size: 12.5px; color: var(--c-text-muted); align-self: center; }

/* ------------------------------------------------ Viewer (Overlay) */
body.mviewer-open, body.medit-open { overflow: hidden; }
.mviewer { position: fixed; inset: 0; z-index: 1200; display: flex;
    align-items: center; justify-content: center; }
.mviewer[hidden] { display: none; }
.mviewer__backdrop { position: absolute; inset: 0; background: rgba(8,8,10,.82); }
.mviewer__stage { position: relative; display: flex; align-items: center; gap: 14px; max-width: 96vw; }
.mviewer__nav { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline);
    background: rgba(21,21,24,.7); color: var(--c-text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
.mviewer__nav svg { width: 18px; height: 18px; }
.mviewer__nav:hover { color: var(--c-text); border-color: var(--c-border); }
.mviewer__frame { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Story-Abschnitte wie bei Instagram (13.07.2026): ein Segment je Story
   der Sequenz - erledigte voll, kommende leer, das aktive fuellt sich. */
.mviewer__progress { width: min(400px, 86vw); display: flex; gap: 4px; }
.mviewer__seg { flex: 1; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,.22); overflow: hidden;
    position: relative; cursor: pointer; }
/* Unsichtbar vergroesserte Tippflaeche: 3 px waeren am Handy zu klein. */
.mviewer__seg::before { content: ""; position: absolute;
    left: -2px; right: -2px; top: -10px; bottom: -10px; }
.mviewer__seg-fill { display: block; height: 100%; width: 0;
    background: var(--c-accent); border-radius: 2px; }
.mviewer__card { position: relative; width: min(400px, 86vw); min-height: 480px;
    border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,.07);
    display: flex; flex-direction: column; padding: 14px; overflow: hidden; }
.mviewer__pattern { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.mviewer__close { position: absolute; top: 10px; right: 10px; z-index: 6;
    width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(15,15,16,.5); color: var(--c-text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; }
.mviewer__close svg { width: 15px; height: 15px; }
.mviewer__head { position: relative; z-index: 5; display: flex; flex-direction: column;
    align-items: center; gap: 5px; padding: 2px 34px 0; }
.mviewer__ident { display: flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.mviewer__ident:hover .mviewer__name { text-decoration: underline; }
.mviewer__avatar { width: 26px; height: 26px; font-size: 11px; }
.mviewer__name { font-size: 13.5px; font-weight: 500; color: var(--c-text); }
.mviewer__mark { display: inline-flex; align-items: center; }
.mviewer__mark .vmark { top: 0; }   /* Flex-Wrapper, siehe .nameline .vmark */
.mviewer__ago { font-size: 12px; color: var(--c-text-muted); white-space: nowrap; }
.mviewer__mood { font-size: 11.5px; border: 1px solid; border-radius: var(--radius-pill);
    padding: 2px 10px; background: rgba(15,15,16,.35); }
.mviewer__body { position: relative; z-index: 5; flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 12px 10px; }
.mviewer__text { margin: 0; width: 100%; line-height: 1.55; color: var(--c-text);
    overflow-wrap: break-word; white-space: pre-wrap; }
.mviewer__tags { margin: 10px 0 0; font-size: 12.5px; }
.mviewer__tags a { color: var(--c-hashtag); text-decoration: none; }
.mviewer__tags a:hover { text-decoration: underline; }
.mviewer__poll { position: relative; z-index: 5; border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius); background: rgba(15,15,16,.5); padding: 9px; margin-bottom: 10px; }
.mviewer__poll-q { margin: 0 0 7px; font-size: 12.5px; color: var(--c-text); text-align: center; }
.mviewer__poll-opt { display: block; width: 100%; text-align: left; margin-bottom: 5px;
    border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm);
    background: rgba(28,34,43,.6); color: var(--c-text); font-size: 12.5px;
    padding: 7px 10px; cursor: pointer; }
.mviewer__poll-opt:hover { border-color: rgba(109,211,255,.5); }
.mviewer__poll-bar { position: relative; height: 26px; border-radius: var(--radius-sm);
    background: rgba(28,34,43,.6); overflow: hidden; margin-bottom: 5px; }
.mviewer__poll-bar.is-mine { outline: 1px solid rgba(109,211,255,.5); }
.mviewer__poll-fill { position: absolute; inset: 0 auto 0 0; background: rgba(109,211,255,.16); }
.mviewer__poll-label { position: absolute; left: 10px; top: 5px; font-size: 12px; color: var(--c-text); }
.mviewer__poll-pct { position: absolute; right: 10px; top: 5px; font-size: 12px; color: var(--c-text-muted); }
.mviewer__poll-note { margin: 3px 0 0; font-size: 11px; color: var(--c-text-muted); text-align: center; }
.mviewer__foot { position: relative; z-index: 5; display: flex; flex-direction: column; gap: 7px; }
.mviewer__reactions { display: flex; gap: 8px; justify-content: center; }
.mviewer__react { display: inline-flex; align-items: center; gap: 4px; min-width: 38px; height: 38px;
    padding: 0 9px; border-radius: var(--radius-pill); border: 1px solid #3a3a44;
    background: rgba(21,21,24,.5); font-size: 16px; cursor: pointer; color: var(--c-text); }
.mviewer__react.is-active { border-color: rgba(109,211,255,.55); background: rgba(109,211,255,.1); }
.mviewer__react-count { font-size: 11.5px; color: var(--c-text-muted); }
.mviewer__ownerbar p { margin: 0; text-align: center; font-size: 11px; color: var(--c-text-muted); }
.mviewer__actions { display: flex; gap: 8px; justify-content: center; }
.mviewer__action { border: 1px solid rgba(255,255,255,.14); background: rgba(21,21,24,.5);
    color: var(--c-text-muted); font-size: 11.5px; border-radius: var(--radius-pill);
    padding: 4px 12px; cursor: pointer; }
.mviewer__action:hover { color: var(--c-text); }
.mviewer__action--danger {
    color: #ff9d9d;
    border-color: rgba(244,67,54,.45);
    background: rgba(244,67,54,.14);
    display: inline-flex; align-items: center; gap: 5px;
}
.mviewer__action--danger svg { width: 13px; height: 13px; }
.mviewer__action--danger:hover { color: #ffc6c6; border-color: rgba(244,67,54,.65); background: rgba(244,67,54,.22); }
.mviewer__counter { margin: 0; font-size: 11.5px; color: var(--c-text-muted); }
.mviewer__tap { display: none; }

/* ------------------------------------------------ Editor (Canvas) */
.medit { position: fixed; inset: 0; z-index: 1200; display: flex;
    align-items: center; justify-content: center; }
.medit[hidden] { display: none; }
.medit__backdrop { position: absolute; inset: 0; background: rgba(8,8,10,.82); }
.medit__panel { position: relative; width: min(440px, 94vw); background: #111114;
    border: 1px solid var(--c-border); border-radius: var(--radius-xl);
    padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.medit__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.medit__ident { display: flex; align-items: center; gap: 7px; }
.medit__ident-name { font-size: 13px; font-weight: 500; color: var(--c-text); }
.medit__avatar { width: 24px; height: 24px; font-size: 10px; }
.medit__count { font-size: 11.5px; color: var(--c-text-muted); }
.medit__tool { width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.16); background: rgba(21,21,24,.5);
    color: var(--c-text); display: flex; align-items: center; justify-content: center; }
.medit__tool svg { width: 17px; height: 17px; }
.medit__tool:hover, .medit__tool.is-active,
.medit__tool[aria-expanded="true"], .medit__tool[aria-pressed="true"] {
    border-color: rgba(109,211,255,.55); color: var(--c-accent); }
.medit__tool--close { background: #1a1a1f; border-color: #2f2f36; color: var(--c-text-muted); }
.medit__moodring { width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid #9aa6b2; }
.medit__canvas { position: relative; min-height: 420px; border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,.07); overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; }
.medit__canvas-pattern { position: absolute; inset: 0; pointer-events: none; }
.medit__text { position: relative; z-index: 3; width: 100%; background: none; border: none;
    resize: none; color: var(--c-text); padding: 20px 58px 20px 20px; line-height: 1.55;
    font-size: 19px; text-align: center; min-height: 150px; }
.medit__text:focus { outline: none; }
.medit__text::placeholder { color: rgba(230,238,246,.45); }
.medit__poll { position: absolute; z-index: 4; left: 16px; right: 58px; top: 62%;
    transform: translateY(-50%); border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius); background: rgba(15,15,16,.55); padding: 12px 8px 8px; }
.medit__poll-drag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-pill);
    background: #1c242c; color: var(--c-text-muted); font-size: 9.5px; padding: 1px 8px;
    cursor: grab; touch-action: none; }
.medit__poll-drag:active { cursor: grabbing; }
.medit__poll-q, .medit__poll-opt { display: block; width: 100%; margin-bottom: 5px;
    background: rgba(28,34,43,.6); border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-sm); color: var(--c-text); font-size: 12.5px; padding: 6px 9px; }
.medit__poll-q:focus, .medit__poll-opt:focus { outline: none; border-color: rgba(109,211,255,.5); }
.medit__poll-btns { display: flex; justify-content: space-between; gap: 8px; }
.medit__poll-add, .medit__poll-remove { background: none; border: none; cursor: pointer;
    font-size: 11px; color: var(--c-text-muted); padding: 2px; }
.medit__poll-add:hover { color: var(--c-accent); }
.medit__poll-remove:hover { color: var(--c-danger); }
.medit__tagsrow { position: absolute; z-index: 4; left: 14px; bottom: 12px; right: 58px; }
.medit__tags { background: rgba(15,15,16,.5); border: none; border-radius: var(--radius-pill);
    color: var(--c-hashtag); font-size: 12px; padding: 5px 11px; width: min(220px, 100%); }
.medit__tags:focus { outline: 1px solid rgba(167,139,250,.4); }
.medit__tags::placeholder { color: rgba(167,139,250,.55); }
.medit__rail { position: absolute; z-index: 5; top: 10px; right: 8px;
    display: flex; flex-direction: column; gap: 9px; align-items: center; }
.medit__railitem { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.medit__tool-label { font-size: 9px; color: #dfe7ee; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.medit__panelbox { position: absolute; z-index: 6; top: 10px; right: 54px; width: 240px;
    max-height: calc(100% - 20px); overflow-y: auto; background: rgba(17,17,20,.96);
    border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 11px; }
.medit__panel-title { margin: 0 0 6px; font-size: 10.5px; color: var(--c-text-muted);
    text-transform: uppercase; letter-spacing: .04em; }
.medit__panel-title + .medit__panel-title, .medit__chips + .medit__panel-title,
.medit__swatches + .medit__panel-title { margin-top: 10px; }
.medit__panel-hint { margin: 8px 0 0; font-size: 10.5px; color: var(--c-text-dim); }
.medit__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.medit__chip { border: 1px solid #2f2f36; background: #17171b; color: var(--c-text-muted);
    border-radius: var(--radius-pill); font-size: 11px; padding: 4px 10px; cursor: pointer; }
.medit__chip.is-active { color: var(--c-accent); border-color: rgba(109,211,255,.5);
    background: rgba(109,211,255,.07); }
.medit__swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.medit__swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    border: 1px solid #2f2f36; }
.medit__swatch.is-active { border: 2px solid var(--c-accent); }
.medit__swatch--none { background: #17171b; color: var(--c-text-muted); font-size: 13px; line-height: 1; }
.medit__moods { display: flex; flex-wrap: wrap; gap: 5px; }
.medit__moodchip { border: 1px solid #2f2f36; background: #17171b; color: var(--c-text-muted);
    border-radius: var(--radius-pill); font-size: 11px; padding: 4px 9px; cursor: pointer; }
.medit__moodchip.is-active { color: var(--c-text); border-color: rgba(109,211,255,.5);
    background: rgba(109,211,255,.07); }
.medit__emojigrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.medit__emoji { background: none; border: none; border-radius: var(--radius-sm);
    font-size: 17px; padding: 3px; cursor: pointer; }
.medit__emoji:hover { background: rgba(255,255,255,.06); }
.medit__bottom { display: flex; align-items: center; gap: 9px; }
.medit__vis { position: relative; }
.medit__vis-btn { display: flex; align-items: center; gap: 5px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.16); background: rgba(21,21,24,.5);
    border-radius: 10px; color: var(--c-text); font-size: 11.5px; padding: 6px 10px; }
.medit__vis-icon { display: inline-flex; color: var(--c-accent); }
.medit__vis-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 7;
    background: #17171b; border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: 5px; min-width: 150px; }
.medit__vis-item { display: block; width: 100%; text-align: left; background: none; border: none;
    color: var(--c-text); font-size: 12px; padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer; }
.medit__vis-item:hover { background: rgba(109,211,255,.08); }
.medit__kind { display: inline-flex; margin-left: auto; padding: 2px;
    border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-pill);
    background: rgba(21,21,24,.5); }
.medit__kind-btn { border: none; background: none; color: var(--c-text-muted);
    font-size: 11px; padding: 4px 11px; border-radius: var(--radius-pill); cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast); }
.medit__kind-btn.is-active { background: rgba(109,211,255,.16); color: var(--c-accent);
    font-weight: 600; }
.medit__kindhint { margin: 7px 2px 0; font-size: 10.5px; color: var(--c-text-dim);
    text-align: center; }
.medit__share { border: none; cursor: pointer; white-space: nowrap;
    background: rgba(109,211,255,.85); color: #0f0f10; font-size: 12px; font-weight: 600;
    border-radius: var(--radius-pill); padding: 7px 16px; }
.medit__share:hover { background: var(--c-accent); }

/* ------------------------------------------------ Sidebar-Widget rechts */
.mside__row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; padding: 6px 8px; border-radius: var(--radius);
    cursor: pointer; color: var(--c-text); }
.mside__row:hover { background: var(--c-glass); }
.mside__circle { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: 2px solid #4a5563; }
.mside__circle--new { border-color: var(--c-accent); box-shadow: 0 0 8px rgba(109,211,255,.25); }
.mside__inner { width: 28px; height: 28px; border-radius: 50%; background: var(--c-surface-2);
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    color: var(--c-text); overflow: hidden; }
.mside__inner img { width: 62%; height: 62%; object-fit: contain; }
.mside__text { min-width: 0; }
.mside__name { display: block; font-size: 13px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mside__meta { display: block; font-size: 11px; color: var(--c-text-muted); }

/* ------------------------------------------------ Profil: MALUS + Raster */
/* Name + Kennzeichen wie die Vorlage: eng nebeneinander, vertikal mittig,
   kein Umbruch (uebersteuert bewusst beide aelteren uprofile__name-Bloecke). */
.uprofile__name { display: inline-flex; align-items: center; gap: 7px;
    flex-wrap: nowrap; max-width: 100%; }
.uprofile__marks { display: inline-flex; align-items: center; flex: 0 0 auto;
    margin: 0; }
.uprofile__marks .vmark { margin-left: 0; top: 0; }   /* Flex-Wrapper, siehe .nameline .vmark */
.uprofile__grpbadge { margin-top: 8px; display: flex; justify-content: flex-end; }
.umalus { margin: 16px 0 6px; background: var(--c-surface);
    border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 14px 16px; }
.umalus__head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.umalus__title { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--c-text);
    letter-spacing: .08em; }
.umalus__edit { display: block; margin: 3px auto 0; background: none; border: none;
    color: var(--c-text-dim); cursor: pointer; font-size: 10px; padding: 1px 6px;
    border-radius: var(--radius-pill); }
.umalus__edit:hover { color: var(--c-accent); background: rgba(109,211,255,.07); }
.umalus__create:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.umalus__create .umalus__circle--new { display: flex; align-items: center;
    justify-content: center; flex: 0 0 auto; margin: 0; }
.umalus__hint { font-size: 11px; color: var(--c-text-muted); }
.umalus__link { margin-left: auto; font-size: 11.5px; color: var(--c-text-muted);
    border: 1px solid #2f2f36; border-radius: var(--radius-pill); padding: 2px 10px;
    text-decoration: none; }
.umalus__link:hover { color: var(--c-text); border-color: var(--c-border); }
.umalus__row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 4px; }
.umalus__item { flex: 0 0 auto; text-align: center; width: 66px; }
.umalus__circle { width: 54px; height: 54px; margin: 0 auto; border-radius: 50%;
    border: 2px solid #3a4552; display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; padding: 0; }
.umalus__circle:hover { border-color: var(--c-accent); }
.umalus__circle--new { border-style: dashed; border-color: #3a3a44; color: var(--c-accent); font-size: 20px; background: none; }
.umalus__name { margin: 5px 0 0; font-size: 11px; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umalus__meta { margin: 1px 0 0; font-size: 10px; color: var(--c-text-dim); }

.ugrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ugrid__card { position: relative; border-radius: var(--radius); overflow: hidden;
    border: 1px solid rgba(255,255,255,.06); min-height: 118px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 26px 10px; background: none; }
.ugrid__card:hover { border-color: rgba(109,211,255,.4); }
.ugrid__pattern { position: absolute; inset: 0; pointer-events: none; }
.ugrid__text { position: relative; z-index: 2; margin: 0; font-size: 12px; line-height: 1.5;
    color: var(--c-text); max-height: 5.5em; overflow: hidden; overflow-wrap: break-word; width: 100%; }
.ugrid__pin { position: absolute; z-index: 3; top: 6px; right: 7px; color: var(--c-accent); }
.ugrid__pin svg { width: 12px; height: 12px; }
.ugrid__pollmark { position: absolute; z-index: 3; top: 6px; left: 7px; color: var(--c-text-muted); }
.ugrid__pollmark svg { width: 12px; height: 12px; }
.ugrid__counts { position: absolute; z-index: 3; left: 8px; bottom: 6px;
    font-size: 10.5px; color: #cdd6df; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.ugrid__hidden { position: absolute; z-index: 3; right: 8px; bottom: 6px;
    font-size: 10px; color: var(--c-warn); }
.ugrid__tools { position: absolute; z-index: 4; right: 6px; bottom: 4px; display: none; gap: 2px; }
.ugrid__card:hover .ugrid__tools { display: inline-flex; }
.ugrid__tools form { display: inline; }
.ugrid__tools button { background: rgba(15,15,16,.6); border: 1px solid rgba(255,255,255,.14);
    border-radius: 6px; color: var(--c-text-muted); cursor: pointer; font-size: 10px;
    padding: 2px 6px; }
.ugrid__tools button:hover { color: var(--c-text); }
.ugrid--classic { position: relative; background: var(--c-surface-2); }
.uprofile__tabs-icons .tabs__link svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; }

/* ------------------------------------------------ Archiv */
.march__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.march__title { margin: 0; font-size: 20px; }
.march__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--c-text-muted); }
.march__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.march__item { background: var(--c-surface); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.march__preview { position: relative; min-height: 110px; display: flex; align-items: center;
    justify-content: center; padding: 20px 12px; cursor: pointer; border: none; background: none; width: 100%; }
.march__preview:hover { opacity: .92; }
.march__ptext { position: relative; z-index: 2; margin: 0; font-size: 12px; line-height: 1.5;
    color: var(--c-text); max-height: 4.5em; overflow: hidden; overflow-wrap: break-word; width: 100%; }
.march__badge { position: absolute; z-index: 3; top: 6px; left: 7px; font-size: 9.5px;
    border-radius: var(--radius-pill); padding: 2px 7px; background: rgba(15,15,16,.55);
    color: var(--c-text-muted); border: 1px solid rgba(255,255,255,.12); }
.march__badge--active { color: var(--c-accent); border-color: rgba(109,211,255,.4); }
.march__badge--hidden { color: var(--c-warn); border-color: rgba(255,167,38,.4); }
.march__body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 7px; }
.march__stats { margin: 0; font-size: 11px; color: var(--c-text-muted); }
.march__row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.march__row form { display: inline-flex; }
.march__btn { border: 1px solid #2f2f36; background: none; color: var(--c-text-muted);
    font-size: 10.5px; border-radius: var(--radius-pill); padding: 3px 9px; cursor: pointer; }
.march__btn:hover { color: var(--c-text); border-color: var(--c-border); }
.march__btn--danger { color: #ff9d9d; border-color: rgba(244,67,54,.45); background: rgba(244,67,54,.12); }
.march__btn--danger:hover { color: #ffc6c6; border-color: rgba(244,67,54,.65); background: rgba(244,67,54,.2); }
.march__select { background: #17171b; border: 1px solid #2f2f36; color: var(--c-text-muted);
    font-size: 10.5px; border-radius: var(--radius-sm); padding: 3px 6px; max-width: 130px; }
.march__pager { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.march__pager a, .march__pager span { font-size: 12.5px; color: var(--c-text-muted);
    border: 1px solid #2f2f36; border-radius: var(--radius-sm); padding: 5px 12px; text-decoration: none; }
.march__pager a:hover { color: var(--c-text); border-color: var(--c-border); }
.march__pager .is-current { color: var(--c-accent); border-color: rgba(109,211,255,.5); }
.march__malus { background: var(--c-surface); border: 1px solid var(--hairline);
    border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 18px; }

/* ------------------------------------------------ Handy (<= 720px) */
@media (max-width: 720px) {
    .mviewer__stage { max-width: 100vw; width: 100%; height: 100%; gap: 0; }
    .mviewer__nav { display: none; }
    .mviewer__frame { width: 100%; height: 100%; gap: 0; }
    .mviewer__progress { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px);
        left: 12px; right: 12px; width: auto; z-index: 9; }
    .mviewer__card { width: 100%; height: 100%; min-height: 0; border-radius: 0; border: none;
        padding-top: calc(env(safe-area-inset-top, 0px) + 24px);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); }
    .mviewer__counter { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
        left: 0; right: 0; text-align: center; z-index: 9; }
    .mviewer__tap { display: block; position: absolute; top: 90px; bottom: 150px; width: 32%; z-index: 4; }
    .mviewer__tap--prev { left: 0; }
    .mviewer__tap--next { right: 0; }
    .medit { align-items: stretch; }
    .medit__panel { width: 100%; border-radius: 0; border: none;
        padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); }
    .medit__canvas { flex: 1; min-height: 0; }
    .medit__panelbox { right: 50px; width: min(240px, calc(100vw - 70px)); }
    .medit__kindhint { display: none; }
    .ugrid { grid-template-columns: repeat(3, 1fr); }
    .ugrid__tools { display: inline-flex; }
    .mbar { padding: 12px 12px 8px; }
}
@media (max-width: 480px) {
    .ugrid { grid-template-columns: repeat(2, 1fr); }
}

/* Reduzierte Animationen (bestehende Einstellung) respektieren. */
body.malu-reduced-motion .mbar__circle--new { box-shadow: none; }
body.malu-reduced-motion .mviewer__progress-fill { transition: none; }

/* Karten-Raster: Klick-Overlay (Karte selbst ist ein <div>, damit die
   Eigentümer-Werkzeuge als Formulare gültig bleiben). */
.ugrid__open { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.ugrid__tools { z-index: 5; }

/* Bio schlicht wie bei Instagram (13.07.2026); @Handle als hellblauer Chip. */
.uprofile__at { display: inline-block; color: var(--c-accent);
    background: rgba(109,211,255,.08); border: 1px solid rgba(109,211,255,.25);
    border-radius: var(--radius-pill); padding: 0 9px 1px; font-size: .9em;
    line-height: 1.5; }

/* Handy: Zahlen-Block direkt unter Name/Handle (vor Bio und Buttons). */
@media (max-width: 640px) {
    .uprofile__head { flex-direction: column; align-items: stretch; }
    .uprofile__main, .uprofile__identity { display: contents; }
    .uprofile__avatar-wrap { order: 1; align-self: flex-start; }
    .uprofile__name   { order: 2; }
    .uprofile__handle { order: 3; }
    .uprofile__aside  { order: 4; margin-top: 4px; padding-bottom: 0; }
    .uprofile__bio-lead { order: 5; max-width: none; }
    .uprofile__actions  { order: 6; margin-top: var(--space-3); }
}

/* MALUS: Sortier-Pfeile erscheinen am Desktop erst beim Daraufzeigen. */
@media (hover: hover) and (pointer: fine) {
    .umalus__edit { opacity: 0; transition: opacity var(--t-fast); }
    .umalus__item:hover .umalus__edit,
    .umalus__item:focus-within .umalus__edit { opacity: 1; }
}
.umalus__circle--new { cursor: pointer; background: none; }

/* Zahnrad + "Einstellungen" auf dem eigenen Profil (Korrektur 13.07.2026). */
.uprofile-btn--gear { display: inline-flex; align-items: center; gap: 6px; }
.uprofile-btn--gear svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Composer: sanfter Fragenwechsel alle 10 Minuten (13.07.2026). */
.dash-compose__heading { transition: opacity .35s ease, transform .35s ease; }
.dash-compose__heading--swap { opacity: 0; transform: translateY(-5px); }
body.malu-reduced-motion .dash-compose__heading { transition: none; }


/* ------------------------------------------------ MALUS-Baukasten (Profil) */
.malumod { position: fixed; inset: 0; z-index: 1200; display: flex;
    align-items: center; justify-content: center; }
.malumod[hidden] { display: none; }
.malumod__backdrop { position: absolute; inset: 0; background: rgba(8,8,10,.82); }
.malumod__panel { position: relative; width: min(600px, 94vw); max-height: 90vh;
    overflow-y: auto; background: #111114; border: 1px solid var(--c-border);
    border-radius: var(--radius-xl); padding: 14px; display: flex;
    flex-direction: column; gap: 10px; }
.malumod__head { display: flex; align-items: center; justify-content: space-between; }
.malumod__title { margin: 0; font-size: 15px; color: var(--c-text); }
.malumod__close { width: 28px; height: 28px; border-radius: 9px; cursor: pointer;
    border: 1px solid #2f2f36; background: #1a1a1f; color: var(--c-text-muted);
    display: flex; align-items: center; justify-content: center; }
.malumod__close svg { width: 14px; height: 14px; }
.malumod__rowfields { display: flex; gap: 8px; }
.malumod__input { flex: 1; background: #17171b; border: 1px solid #2f2f36;
    border-radius: var(--radius); color: var(--c-text); font-size: 13px;
    padding: 9px 11px; }
.malumod__input:focus { outline: none; border-color: rgba(109,211,255,.5); }
.malumod__input--emoji { flex: 0 0 64px; text-align: center; }
.malumod__label { margin: 2px 0 0; font-size: 10.5px; color: var(--c-text-muted);
    text-transform: uppercase; letter-spacing: .05em; }
.malumod__covers { display: flex; flex-wrap: wrap; gap: 7px; }
.malumod__cover input { position: absolute; opacity: 0; pointer-events: none; }
.malumod__cover span { display: block; width: 26px; height: 26px;
    border-radius: 50%; border: 1px solid #2f2f36; cursor: pointer; }
.malumod__cover input:checked + span { border: 2px solid var(--c-accent); }
.malumod__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 721px) { .malumod__grid { grid-template-columns: repeat(4, 1fr); } }
.malumod__loading { grid-column: 1 / -1; margin: 6px 0; font-size: 12px;
    color: var(--c-text-muted); }
.malumod__item { position: relative; min-height: 150px; border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.08); overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column; justify-content: center;
    padding: 34px 8px 20px; animation: malumodItemIn .3s ease both; }
@keyframes malumodItemIn { from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; } }
body.malu-reduced-motion .malumod__item { animation: none; }
.malumod__item-date { position: absolute; top: 6px; left: 6px; z-index: 2;
    display: flex; flex-direction: column; align-items: center; min-width: 34px;
    padding: 3px 6px; border-radius: 9px; background: rgba(15,15,16,.72);
    color: var(--c-text); font-size: 9px; line-height: 1.2; }
.malumod__item-date strong { font-size: 13px; font-weight: 700; }
.malumod__item input { position: absolute; opacity: 0; pointer-events: none; }
.malumod__item-text { font-size: 10.5px; line-height: 1.45; color: var(--c-text);
    text-align: center; overflow: hidden; max-height: 4.3em; overflow-wrap: break-word; }
.malumod__item-meta { position: absolute; left: 6px; bottom: 4px; font-size: 8.5px;
    color: rgba(230,238,246,.65); }
.malumod__item-check { position: absolute; top: 7px; right: 7px; width: 20px;
    height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55);
    background: rgba(15,15,16,.35); transition: background var(--t-fast), border-color var(--t-fast); }
.malumod__item input:checked ~ .malumod__item-check { background: var(--c-accent);
    border-color: var(--c-accent); }
.malumod__item input:checked ~ .malumod__item-check::after { content: ''; position: absolute;
    inset: 5px 4px 7px 6px; border: solid #0f0f10; border-width: 0 0 2px 2px;
    transform: rotate(-45deg); }
.malumod__item:has(input:checked) { outline: 2px solid rgba(109,211,255,.55); }
.malumod__foot { display: flex; align-items: center; justify-content: space-between;
    gap: 10px; }
.malumod__count { font-size: 11.5px; color: var(--c-text-muted); }
@media (max-width: 480px) { .malumod__grid { grid-template-columns: repeat(2, 1fr); } }


/* Namenszeile: Kennzeichen ueberall eng (4px) + mittig am Namen, ohne dass
   Flex-Gaps der Umgebung dazwischenfunken (Vorgabe 13.07.2026). */
.nameline { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
/* Flex-Wrapper: hier richtet align-items: center schon aus. Die optische
   Verschiebung von -0.17em aus der .vmark-Regel kaeme obendrauf und zoege
   das Kennzeichen zu hoch. Deshalb hier zurueckgenommen. Gilt fuer jeden
   Wrapper um .vmark, der selbst display:flex oder inline-flex ist. */
.nameline .vmark { margin-left: 0; top: 0; }
/* Die Sonderregel fuer Kontaktleiste, Chat und Entdecken ist entfallen.
   Sie wiederholte nur den alten, falschen Versatz; jetzt gilt ueberall
   dieselbe Ausrichtung aus der Grundregel oben. */


/* Baukasten v2 (13.07.2026): Kopf wie Referenz, zwei Schritte, Vorschau. */
.malumod__headbtn { background: none; border: none; cursor: pointer;
    color: var(--c-text-muted); font-size: 13px; padding: 4px 2px; }
.malumod__headbtn:hover { color: var(--c-text); }
.malumod__headbtn--next { color: var(--c-accent); font-weight: 600; }
.malumod__headbtn--next:disabled { color: var(--c-text-dim); cursor: default; }
.malumod__step { display: flex; flex-direction: column; gap: 10px; }
.malumod__previewwrap { display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 6px 0 2px; }
.malumod__preview { width: 74px; height: 74px; font-size: 26px; border-width: 2px;
    display: flex; align-items: center; justify-content: center; cursor: default; }
.malumod__previewname { margin: 0; font-size: 12.5px; color: var(--c-text); }
@media (max-width: 720px) {
    .malumod { align-items: stretch; }
    .malumod__panel { width: 100%; max-height: none; height: 100%; border-radius: 0;
        border: none; padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
}

/* Composer: kontextabhaengige Hashtag-Vorschlaege (Ein-/Ausblenden + Stagger). */
.dash-compose__chips--suggest { opacity: 0; transform: translateY(-4px);
    transition: opacity .22s ease, transform .22s ease; }
.dash-compose__chips--suggest.is-open { opacity: 1; transform: none; }
.dash-compose__chip--in { animation: composeChipIn .3s ease both; }
@keyframes composeChipIn { from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; } }
body.malu-reduced-motion .dash-compose__chips--suggest,
body.malu-reduced-motion .dash-compose__chip--in { transition: none; animation: none; }


/* Baukasten: Emoji-Auswahl per Klick (13.07.2026). */
.malumod__emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px; max-height: 128px; overflow-y: auto; padding: 2px; }
.malumod__emoji { background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
    font-size: 19px; line-height: 1; padding: 7px 0; cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast); }
.malumod__emoji:hover { background: rgba(255,255,255,.06); }
.malumod__emoji.is-active { border-color: rgba(109,211,255,.6); background: rgba(109,211,255,.08); }
.malumod__emoji--none { color: var(--c-text-muted); font-size: 15px; }


/* Sortieren per Ziehen (13.07.2026): stylisches Anheben + Live-Umsortieren. */
[data-sortable] [data-sort-id] { cursor: grab; touch-action: pan-y; user-select: none;
    -webkit-user-select: none; transition: transform .18s ease, opacity .18s ease; }
[data-sortable] [data-sort-id].is-dragging { cursor: grabbing; z-index: 60;
    position: relative; transition: none; opacity: .92;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(109,211,255,.25)); }
[data-sortable].is-sorting [data-sort-id]:not(.is-dragging) { opacity: .75; }
[data-sortable].is-sorting .umalus__edit,
[data-sortable].is-sorting .ugrid__tools { opacity: 0 !important; }


/* =====================================================================
   STORYS-ENTDECKEN (/storys, 13.07.2026): alle sichtbaren Storys der
   letzten 24 h in drei Ebenen - Offiziell ueber MALU Pro & Plus ueber
   Community. Kreise = mbar-Markup (gleiche Ringe, gleicher Viewer).
   ===================================================================== */
.storys { max-width: 1100px; }
.storys__head { margin: 4px 0 24px; }
.storys__title { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.storys__sub { margin: 0; color: var(--c-text-muted); font-size: .92rem; line-height: 1.5; }
/* Bewusst OHNE Abschnitts-Beschriftungen (Wunsch 13.07.2026): die
   Reihenfolge bildet die Ebenen ab, die Kennzeichen erklaeren den Rang. */
.storys__row { display: flex; flex-wrap: wrap; gap: 16px 10px; }
.storys__empty {
    padding: 26px 22px;
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--hairline);
}
.storys__empty-title { margin: 0 0 6px; font-weight: 700; }
.storys__empty-sub { margin: 0; color: var(--c-text-muted); font-size: .9rem; line-height: 1.55; }
@media (max-width: 560px) {
    .storys__title { font-size: 1.3rem; }
    .storys__row { gap: 14px 6px; }
}


/* =====================================================================
   GESTALTUNG & EREIGNISSE (Update 031, Freigabe 13.07.2026)
   Saison-/Ereignis-Layouts fuer ALLE Nutzer, geschaltet im Housekeeping
   (body.theme-<slug> aus layouts/dashboard.php; Ereignis > Saison).
   Drei ruhige Bausteine je Theme:
     1. Header-Overlay (::before) - MISCHT sich mit der Tageszeit-Farbe,
        ersetzt sie nicht (geringe Deckkraft).
     2. Akzentlinie unter dem Header (::after), 3 px Verlauf.
     3. Partikel (partials/season-deko.php) - wenige, langsam, leise;
        "Bewegung reduzieren" blendet sie komplett aus.
   ===================================================================== */

/* --- Baustein 1+2: Header (Desktop-Topbar) --------------------------- */
@media (min-width: 768px) {
    body[class*="theme-"] .dash-dtop::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    body[class*="theme-"] .dash-dtop::after {
        content: "";
        position: absolute;
        left: 0; right: 0; top: 100%;
        height: 3px;
        pointer-events: none;
    }
    .theme-fruehling .dash-dtop::before   { background: linear-gradient(100deg, rgba(134,201,154,.14), rgba(240,171,203,.12)); }
    .theme-fruehling .dash-dtop::after    { background: linear-gradient(90deg, #86c99a, #f0abcb); }
    .theme-sommer .dash-dtop::before      { background: linear-gradient(100deg, rgba(251,191,36,.13), rgba(56,189,248,.11)); }
    .theme-sommer .dash-dtop::after       { background: linear-gradient(90deg, #fbbf24, #38bdf8); }
    .theme-herbst .dash-dtop::before      { background: linear-gradient(100deg, rgba(232,150,90,.15), rgba(180,95,60,.10)); }
    .theme-herbst .dash-dtop::after       { background: linear-gradient(90deg, #e8965a, #b45f3c); }
    .theme-winter .dash-dtop::before      { background: linear-gradient(100deg, rgba(159,212,245,.13), rgba(219,234,254,.08)); }
    .theme-winter .dash-dtop::after       { background: linear-gradient(90deg, #9fd4f5, #dbeafe); }
    .theme-pride .dash-dtop::before       { background: linear-gradient(100deg, rgba(167,139,250,.10), rgba(244,114,182,.08)); }
    .theme-pride .dash-dtop::after        { background: linear-gradient(90deg, #e24b4a, #ef9f27, #f5d90a, #97c459, #378add, #7f77dd); }
    .theme-muttertag .dash-dtop::before   { background: linear-gradient(100deg, rgba(249,168,197,.14), rgba(244,192,209,.09)); }
    .theme-muttertag .dash-dtop::after    { background: linear-gradient(90deg, #f9a8c5, #f4c0d1); }
    .theme-vatertag .dash-dtop::before    { background: linear-gradient(100deg, rgba(147,184,221,.13), rgba(95,137,180,.09)); }
    .theme-vatertag .dash-dtop::after     { background: linear-gradient(90deg, #93b8dd, #5f89b4); }
    .theme-weihnachten .dash-dtop::before { background: linear-gradient(100deg, rgba(134,201,154,.14), rgba(227,201,135,.11)); }
    .theme-weihnachten .dash-dtop::after  { background: linear-gradient(90deg, #86c99a, #e3c987); }
    .theme-ramadan .dash-dtop::before     { background: linear-gradient(100deg, rgba(28,36,64,.35), rgba(227,201,135,.10)); }
    .theme-ramadan .dash-dtop::after      { background: linear-gradient(90deg, #e3c987, #8ea4e8); }
}

/* Hinweiszeile in Housekeeping-Karten (Gestaltung & Ereignisse). */
.hk-card__hint { margin: -4px 0 12px; font-size: .85rem; color: var(--c-text-muted); }

/* --- Baustein 3: Partikel (season-deko.php) -------------------------- */
.season-deko {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 55;               /* ueber dem Inhalt, unter Topbar (90) und Overlays */
    overflow: hidden;
}
.season-deko__p {
    position: absolute;
    top: -36px;
    opacity: 0;
    line-height: 1;
    animation-name: season-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.season-deko__p--float { animation-name: season-float; }
@keyframes season-fall {
    0%   { transform: translateY(-4vh) translateX(0)     rotate(0deg);   opacity: 0; }
    8%   { opacity: .38; }
    50%  { transform: translateY(48vh) translateX(16px)  rotate(16deg); }
    90%  { opacity: .3; }
    100% { transform: translateY(106vh) translateX(-10px) rotate(-12deg); opacity: 0; }
}
@keyframes season-float {
    0%   { transform: translateY(92vh) translateX(0)    scale(.9);  opacity: 0; }
    12%  { opacity: .32; }
    50%  { transform: translateY(48vh) translateX(12px) scale(1.05); }
    88%  { opacity: .26; }
    100% { transform: translateY(4vh)  translateX(-8px) scale(.95); opacity: 0; }
}
/* Farbton der Text-Glyphen je Theme (Emoji behalten ihre eigene Farbe). */
.theme-winter .season-deko__p      { color: #cfe9fb; }
.theme-weihnachten .season-deko__p { color: #dff0e2; }
.theme-ramadan .season-deko__p     { color: #e9d49c; }
.theme-muttertag .season-deko__p   { color: #f6b6ce; }
.theme-sommer .season-deko__p      { color: #ffe9a8; }
/* Ruhe-Schalter: Einstellung "Bewegung reduzieren" UND Systemvorgabe. */
body.malu-reduced-motion .season-deko { display: none; }
@media (prefers-reduced-motion: reduce) {
    .season-deko { display: none; }
}


/* MALU loeschen im Bearbeiten-Modal (13.07.2026): dezenter roter
   Text-Knopf unter den Covers, nur im Edit-Modus sichtbar; die
   enthaltenen Momente bleiben im Archiv (Hinweiszeile). */
.malumod__danger {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}
.malumod__delete {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(244,67,54,.45);
    background: rgba(244,67,54,.14);
    color: #ffb0b0;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .14s, border-color .14s;
}
.malumod__delete svg { width: 16px; height: 16px; flex: 0 0 auto; }
.malumod__delete:hover { background: rgba(244,67,54,.22); border-color: rgba(244,67,54,.65); color: #ffc6c6; }
.malumod__delete:disabled { opacity: .55; cursor: default; }
.malumod__danger-hint { margin: 8px 0 0; font-size: .78rem; color: var(--c-text-muted); }


/* =====================================================================
   ARCHIV-GALERIE (13.07.2026): ruhige Datums-Karten wie im
   MALUS-Baukasten - nur Datum + Story/Beitrag-Kennzeichnung, Klick
   oeffnet den Viewer (dort liegen Anpinnen/Loeschen). Ersetzt die
   fruehere Verwaltungs-Liste mit Formularen.
   ===================================================================== */
.march__tabs { display: flex; gap: 8px; margin: 0 0 18px; }
.march__tab {
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: .86rem; font-weight: 600;
    text-decoration: none;
    transition: color .14s, background .14s, border-color .14s;
}
.march__tab:hover { color: var(--c-text); background: var(--hairline-soft); }
.march__tab.is-active {
    color: #0f1016;
    background: var(--c-accent);
    border-color: var(--c-accent);
}
.march__galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.march__karte {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s;
}
.march__karte:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); }
.march__karte:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.march__datum {
    position: absolute; top: 8px; left: 8px;
    display: flex; flex-direction: column; align-items: center;
    min-width: 40px; padding: 5px 7px;
    border-radius: 9px;
    background: rgba(10,11,16,.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    line-height: 1.1;
}
.march__datum-tag { font-size: 15px; font-weight: 800; color: #fff; }
.march__datum-monat { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: #c7cfdc; text-transform: uppercase; }
.march__art {
    position: absolute; top: 8px; right: 8px;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    background: rgba(10,11,16,.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.march__art--moment  { color: #8fdcff; }
.march__art--beitrag { color: #c4b5fd; }
.march__gesperrt {
    position: absolute; left: 8px; right: 8px; bottom: 8px;
    padding: 4px 8px; text-align: center;
    border-radius: 8px;
    background: rgba(244,67,54,.22);
    border: 1px solid rgba(244,67,54,.4);
    color: #ffb0b0;
    font-size: 10px; font-weight: 700;
}
.march__ktext {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 12px 20px;
    font-size: 12px; line-height: 1.45;
    overflow: hidden;
    word-break: break-word;
}
@media (max-width: 560px) {
    .march__galerie { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 9px; }
    .march__ktext { font-size: 11px; padding: 36px 9px 14px; }
    .march__tab { padding: 6px 13px; }
}


/* =====================================================================
   ROTIERENDES CLAIM-WORT auf der Index-Seite (13.07.2026):
   "Verbunden statt <wort>." - das Schluss-Wort wechselt alle 3 s sanft
   (altes Wort gleitet nach oben aus, neues von unten ein), die Breite
   des Wrappers animiert mit, damit der Satz-Punkt nie springt.
   Wort im MALU-Markenverlauf (cyan -> violett). JS: pages/home.php.
   ===================================================================== */
.rotwort {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    text-align: left;
    white-space: nowrap;
    transition: width .35s ease;
}
.rotwort b {
    position: absolute;
    left: 0; top: 0;
    opacity: 0;
    transform: translateY(55%);
    white-space: nowrap;
    font-weight: inherit;
    color: var(--c-accent);   /* MALU-Hellblau (Wunsch 13.07.2026) */
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}
.rotwort b.is-visible {
    position: relative;
    opacity: 1;
    transform: none;
}
.rotwort b.is-out {
    opacity: 0;
    transform: translateY(-55%);
}
@media (prefers-reduced-motion: reduce) {
    .rotwort b { transition: none; }
}


/* =====================================================================
   HASHTAG-SEITE: klare Trennung (13.07.2026) - eigener Abschnitt fuer
   "Storys & gestaltete Beitraege" (Karten im Archiv-Galerie-Stil mit
   Datum, Story/Beitrag-Chip und Autor-Pille) ueber dem Abschnitt
   "Beitraege aus dem Feed". Kein Vermischen mehr.
   ===================================================================== */
.topics-sec { margin: 4px 0 12px; }
.topics-sec__title {
    margin: 0 0 3px;
    font-size: .8rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-text);
}
.topics-sec__hint { margin: 0; font-size: .8rem; color: var(--c-text-muted); }
.march__wer {
    position: absolute; left: 8px; bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    background: rgba(10,11,16,.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #c7cfdc;
    font-size: 10px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* =====================================================================
   16. PROGRESSION (Phase A, 16.07.2026) – Level & XP, ruhig und dezent.
       .dash-level  = kleines Widget in der linken Sidebar,
       .uplevel     = Level-Karte im Profil (unter den Profilzahlen).
       Bewusst KEINE grellen Effekte, keine Countdowns, kein Druck.
   ===================================================================== */

/* --- Sidebar-Widget ------------------------------------------------- */
.dash-level {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--c-border-soft);
    border-radius: 14px;
    background: var(--c-glass);
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}
.dash-level:hover,
.dash-level:focus-visible {
    border-color: var(--c-border);
    background: var(--c-surface-2);
}
.dash-level__ring {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 2px solid var(--c-accent-dim);
    border-radius: 50%;
    color: var(--c-accent);
    font-size: .8rem; font-weight: 800;
    background: var(--c-accent-glow);
}
.dash-level__body { flex: 1; min-width: 0; }
.dash-level__title {
    display: block;
    color: var(--c-text);
    font-size: .8rem; font-weight: 700;
}
.dash-level__xp {
    display: block;
    margin-top: 1px;
    color: var(--c-text-muted);
    font-size: .7rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-level__bar {
    display: block;
    margin-top: 6px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    overflow: hidden;
}
.dash-level__fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--c-accent-dim), var(--c-accent));
    transition: width .4s ease;
}

/* --- Profil: Level-Karte -------------------------------------------- */
.uplevel {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--c-border-soft);
    border-radius: 14px;
    background: var(--c-glass);
}
.uplevel__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px;
}
.uplevel__badge {
    color: var(--c-accent);
    font-size: .8rem; font-weight: 800;
    letter-spacing: .02em;
}
.uplevel__xp {
    color: var(--c-text-muted);
    font-size: .72rem;
    white-space: nowrap;
}
.uplevel__bar {
    margin-top: 7px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    overflow: hidden;
}
.uplevel__fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--c-accent-dim), var(--c-accent));
    transition: width .4s ease;
}

/* Reduzierte Bewegung: Balken springen statt zu gleiten. */
@media (prefers-reduced-motion: reduce) {
    .dash-level__fill, .uplevel__fill { transition: none; }
}

/* --- Fortschritts-Seite (/fortschritt, Phase B) ---------------------- */
.fs { max-width: 720px; margin: 0 auto; }
.fs__head { margin: 4px 0 16px; }
.fs__title { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--c-text); }
.fs__sub { margin: 4px 0 0; font-size: .85rem; color: var(--c-text-muted); }
.fs__foot {
    margin: 18px 2px 8px;
    font-size: .75rem; color: var(--c-text-dim);
}

.fs-level {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--c-border-soft);
    border-radius: 16px;
    background: var(--c-surface);
}
.fs-level__ring {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border: 3px solid var(--c-accent-dim);
    border-radius: 50%;
    color: var(--c-accent);
    font-size: 1.2rem; font-weight: 800;
    background: var(--c-accent-glow);
}
.fs-level__body { flex: 1; min-width: 0; }
.fs-level__name { margin: 0; font-size: 1rem; font-weight: 800; color: var(--c-text); }
.fs-level__xp { margin: 2px 0 0; font-size: .8rem; color: var(--c-text-muted); }
.fs-level__bar {
    margin-top: 9px; height: 6px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    overflow: hidden;
}
.fs-level__fill {
    display: block; height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--c-accent-dim), var(--c-accent));
    transition: width .4s ease;
}

.fs-block { margin-top: 18px; }
.fs-block__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin: 0 2px 8px;
}
.fs-block__title { margin: 0; font-size: .95rem; font-weight: 800; color: var(--c-text); }
.fs-block__hint { margin: 0; font-size: .75rem; color: var(--c-text-dim); }

.fs-missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fs-mission {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--c-border-soft);
    border-radius: 14px;
    background: var(--c-surface);
}
.fs-mission--done { opacity: .78; }
.fs-mission__check {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: 2px solid var(--c-border);
    border-radius: 50%;
    color: var(--c-success);
}
.fs-mission--done .fs-mission__check { border-color: var(--c-success); }
.fs-mission__check svg { width: 14px; height: 14px; }
.fs-mission__body { flex: 1; min-width: 0; }
.fs-mission__title { display: block; font-size: .85rem; font-weight: 700; color: var(--c-text); }
.fs-mission__desc {
    display: block; margin-top: 1px;
    font-size: .74rem; color: var(--c-text-muted);
}
.fs-mission__bar {
    display: block; margin-top: 7px; height: 4px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    overflow: hidden;
}
.fs-mission__fill {
    display: block; height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--c-accent-dim), var(--c-accent));
    transition: width .4s ease;
}
.fs-mission--done .fs-mission__fill { background: var(--c-success); }
.fs-mission__meta {
    flex: 0 0 auto; text-align: right;
    display: flex; flex-direction: column; gap: 2px;
}
.fs-mission__count { font-size: .74rem; color: var(--c-text-muted); }
.fs-mission__xp { font-size: .74rem; font-weight: 700; color: var(--c-accent); }

.fs-history {
    list-style: none; margin: 0; padding: 4px 2px;
    display: grid; gap: 2px;
}
.fs-history__row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 7px 12px;
    border-radius: 10px;
}
.fs-history__row:nth-child(odd) { background: var(--c-glass); }
.fs-history__label { font-size: .8rem; color: var(--c-text); }
.fs-history__meta { display: flex; align-items: center; gap: 10px; }
.fs-history__chip {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    font-size: .68rem; color: var(--c-text-muted);
}
.fs-history__xp { font-size: .78rem; font-weight: 700; color: var(--c-accent); }
.fs-history__xp--neg { color: var(--c-text-muted); }
.fs-history__time { font-size: .72rem; color: var(--c-text-dim); white-space: nowrap; }

@media (max-width: 560px) {
    .fs-mission { flex-wrap: wrap; }
    .fs-mission__meta { flex-direction: row; gap: 10px; width: 100%; justify-content: flex-end; }
    .fs-history__time { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fs-level__fill, .fs-mission__fill { transition: none; }
}

/* (Der Rang-Chip im Desktop-Header wurde am 16.07.2026 auf Besitzer-
   Wunsch wieder entfernt – Rang/Level leben im Sidebar-Widget, in der
   Profil-Levelkarte und im Fortschritts-Tab.) */

/* --- Rang-Chip in der Level-Karte (Fortschritts-Panel) ---------------- */
.fs-level__rank {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 9px;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: .72rem; font-weight: 800;
    letter-spacing: .03em;
    vertical-align: 2px;
}

/* --- Housekeeping: Fortschritts-Panel (XP-Vergabe, 16.07.2026) -------- */
.hk-kv { margin: 0 0 10px; color: var(--c-text); font-size: .9rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hk-list--tight { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.hk-list--tight li { font-size: .8rem; color: var(--c-text-muted); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hk-list--tight strong { color: var(--c-text); }

/* --- Rang-Icons + Level-Up-Karte (16.07.2026) ------------------------- */
.rank-icon { vertical-align: -2px; }

/* Overlay: ruhige Aufstiegs-Karte, mittig, schließt sich selbst. */
.lvlup {
    position: fixed; inset: 0;
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 11, 16, 0);
    opacity: 0;
    transition: opacity .35s ease, background .35s ease;
    cursor: pointer;
}
.lvlup--in { opacity: 1; background: rgba(10, 11, 16, .45); }
.lvlup__card {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    min-width: 240px; max-width: 90vw;
    padding: 26px 34px 22px;
    border: 1px solid var(--c-border);
    border-radius: 18px;
    background: var(--c-surface);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    transform: translateY(10px) scale(.96);
    transition: transform .45s cubic-bezier(.2, .9, .3, 1.15);
    text-align: center;
}
.lvlup--in .lvlup__card { transform: translateY(0) scale(1); }
.lvlup__ring {
    display: flex; align-items: center; justify-content: center;
    width: 62px; height: 62px;
    border: 3px solid var(--lv-color, var(--c-accent));
    border-radius: 50%;
    color: var(--lv-color, var(--c-accent));
    font-size: 1.35rem; font-weight: 800;
    margin-bottom: 4px;
}
/* Rang-Aufstieg: dezenter Farbschein um den Ring – kein Konfetti. */
.lvlup__card--rank .lvlup__ring {
    animation: lvlup-glow 1.8s ease-in-out 2;
}
@keyframes lvlup-glow {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 26px 2px var(--lv-color, var(--c-accent)); }
}
.lvlup__title { margin: 0; color: var(--lv-color, var(--c-accent)); font-size: 1.02rem; font-weight: 800; }
.lvlup__sub   { margin: 0; color: var(--c-text-muted); font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
    .lvlup, .lvlup__card { transition: none; }
    .lvlup__card--rank .lvlup__ring { animation: none; }
    .lvlup { opacity: 1; background: rgba(10, 11, 16, .45); }
    .lvlup__card { transform: none; }
}

/* --- Sichtbarkeits-Pillen (Einstellungen → Momente & Beiträge, 17.07.2026)
   Segmented-Control statt Dropdown: wischbar (Touch) / mit Maus ziehbar
   (data-topic-strip). Passt optisch zu den Schaltern. -------------------- */
.set-seg-field { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; }
.set-momente__save { margin-top: 4px; }
/* Damit die Pillen-Leiste ihre Karte NICHT über die (Handy-)Breite dehnt,
   sondern intern horizontal scrollt: Grid-Karte + Formular dürfen unter die
   intrinsische Breite ihrer Kinder schrumpfen (min-width:0-Kette). */
.settings__grid > .set-card { min-width: 0; }
.set-momente { min-width: 0; }

.set-seg {
    display: flex;
    gap: 8px;
    margin: 8px 0 2px;
    padding: 4px;
    max-width: 100%;
    border: 1px solid var(--c-border-soft);
    border-radius: 16px;
    background: var(--c-surface-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                 /* Firefox: keine Scrollbar */
}
.set-seg::-webkit-scrollbar { display: none; }   /* WebKit: keine Scrollbar */
.set-seg.is-swiping { scroll-snap-type: none; cursor: grabbing; }

.set-seg__opt {
    flex: 1 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    color: var(--c-text-muted);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.set-seg__opt:hover { color: var(--c-text); background: var(--c-glass); }
.set-seg__input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}
.set-seg__icon { display: inline-flex; }
.set-seg__icon svg { width: 16px; height: 16px; display: block; }

/* Aktive Pille: Markenfarbe, hebt sich klar ab. */
.set-seg__opt.is-active {
    color: #0b1220;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dim));
    box-shadow: 0 2px 8px rgba(109,211,255,.25);
}
/* Tastatur-Fokus sichtbar (Radio ist visuell versteckt). */
.set-seg__input:focus-visible + .set-seg__icon {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .set-seg__opt { transition: none; }
    .set-seg { scroll-behavior: auto; }
}

/* --- Rich-Text-Editor News/Updates (Housekeeping, 17.07.2026) ---------- */
.rte {
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: var(--c-surface-2);
    overflow: hidden;
}
.rte__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface);
}
.rte__btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--c-text);
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.rte__btn:hover { background: var(--c-glass); border-color: var(--c-border-soft); }
.rte__btn:active { background: var(--c-accent-glow); }
.rte__sep { width: 1px; height: 20px; margin: 0 4px; background: var(--c-border); }
.rte__area {
    min-height: 220px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 14px 16px;
    color: var(--c-text);
    font-size: .95rem;
    line-height: 1.6;
    outline: none;
}
.rte__area:focus { box-shadow: inset 0 0 0 2px var(--c-accent-glow); }
.rte__area:empty::before {
    content: attr(data-placeholder);
    color: var(--c-text-dim);
    pointer-events: none;
}
/* Formatierung im Editor UND in der oeffentlichen Ausgabe (.news-body). */
.rte__area h2, .news-body h2 { font-size: 1.3rem; font-weight: 800; margin: 18px 0 8px; color: var(--c-text); }
.rte__area h3, .news-body h3 { font-size: 1.1rem; font-weight: 700; margin: 16px 0 6px; color: var(--c-text); }
.rte__area h4, .news-body h4 { font-size: 1rem; font-weight: 700; margin: 14px 0 6px; color: var(--c-text); }
.rte__area p, .news-body p { margin: 0 0 12px; }
.rte__area a, .news-body a { color: var(--c-accent); text-decoration: underline; }
.rte__area ul, .rte__area ol, .news-body ul, .news-body ol { margin: 0 0 12px; padding-left: 22px; }
.rte__area li, .news-body li { margin: 2px 0; }
.rte__area blockquote, .news-body blockquote {
    margin: 0 0 12px; padding: 8px 14px;
    border-left: 3px solid var(--c-accent-dim);
    background: var(--c-glass);
    color: var(--c-text-muted);
    border-radius: 0 8px 8px 0;
}
.rte__area pre, .news-body pre {
    margin: 0 0 12px; padding: 12px 14px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 8px; overflow-x: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85rem;
}
.rte__area img, .news-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0; }

/* --- News-Liste (Housekeeping): Thumbnail + Schalter (17.07.2026) ------ */
.hk-news-thumb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 40px;
    border-radius: 8px;
    border: 1px solid var(--c-border);
    background-color: var(--c-surface-2);
    background-size: cover; background-position: center;
    color: var(--c-text-dim);
}
.hk-news-thumb svg { width: 20px; height: 20px; }
.hk-switch {
    position: relative;
    width: 42px; height: 24px;
    padding: 0; border: 0;
    border-radius: 999px;
    background: var(--c-border);
    cursor: pointer;
    transition: background .18s ease;
}
.hk-switch.is-on { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-dim)); }
.hk-switch__dot {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s ease;
}
.hk-switch.is-on .hk-switch__dot { transform: translateX(18px); }
.hk-switch:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.hk-news-table td { vertical-align: middle; }
.news-comments-off { margin: 14px 0; padding: 12px 16px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-glass); color: var(--c-text-muted); font-size: .9rem; text-align: center; }

/* =====================================================================
   MALU GAMES (Etappe 1, 17.07.2026) – Uebersicht, Raeume, Lobby.
   Ruhig, im MALU-Stil, responsive.
   ===================================================================== */
.games { max-width: 720px; margin: 0 auto; }
.games__head { margin: 4px 0 16px; }
.games__back { display: inline-block; margin-bottom: 8px; font-size: .82rem; color: var(--c-text-muted); text-decoration: none; }
.games__back:hover { color: var(--c-accent); }
.games__title { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--c-text); }
.games__sub { margin: 4px 0 0; font-size: .88rem; color: var(--c-text-muted); }
.games__foot { margin: 18px 2px 8px; font-size: .75rem; color: var(--c-text-dim); }

/* --- Beitritt per Code --- */
.games-join { margin: 14px 0 18px; padding: 14px 16px; border: 1px solid var(--c-border-soft); border-radius: 14px; background: var(--c-glass); }
.games-join__label { display: block; margin-bottom: 8px; font-size: .82rem; font-weight: 700; color: var(--c-text); }
.games-join__row { display: flex; gap: 8px; }
.games-join__input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .15em; font-weight: 700;
    padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface-2); color: var(--c-text); }
.games-join__input:focus { outline: none; box-shadow: 0 0 0 2px var(--c-accent-glow); }

/* --- Spiel-Kacheln --- */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.game-card { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--c-border-soft); border-radius: 16px;
    background: var(--c-surface); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.game-card:hover { border-color: var(--c-border); transform: translateY(-2px); }
.game-card__art { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: 12px; background: var(--c-accent-glow); color: var(--c-accent); }
.game-card__art svg { width: 26px; height: 26px; }
.game-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.game-card__name { font-size: 1rem; font-weight: 800; color: var(--c-text); }
.game-card__desc { font-size: .8rem; color: var(--c-text-muted); }
.game-card__meta { margin-top: 4px; font-size: .74rem; color: var(--c-text-dim); }
.game-card__meta strong { color: var(--c-accent); }

/* --- Raum eroeffnen + Raumliste --- */
.games-new { margin: 4px 0 20px; padding: 14px 16px; border: 1px solid var(--c-border-soft); border-radius: 14px; background: var(--c-glass); }
.games-new__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.games-new__field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--c-text-muted); }
.games-new__field .form-input { min-width: 140px; }
.games-new__btn { flex: 0 0 auto; }
.games-sec__title { margin: 18px 0 8px; font-size: .95rem; font-weight: 800; color: var(--c-text); }
.games-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.games-room { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--c-border-soft);
    border-radius: 12px; background: var(--c-surface); }
.games-room__code { font-weight: 800; letter-spacing: .12em; color: var(--c-accent); }
.games-room__players { flex: 1; font-size: .82rem; color: var(--c-text-muted); }
.games-room__full { font-size: .78rem; color: var(--c-text-dim); }

/* --- Lobby --- */
.lobby-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px;
    padding: 14px 16px; border: 1px dashed var(--c-border); border-radius: 14px; background: var(--c-glass); }
.lobby-code__label { font-size: .8rem; color: var(--c-text-muted); }
.lobby-code__value { font-size: 1.35rem; font-weight: 800; letter-spacing: .22em; color: var(--c-accent);
    background: none; border: 0; cursor: pointer; padding: 0; }
.lobby-code__value:hover { text-decoration: underline; }
.lobby-code__hint { font-size: .78rem; color: var(--c-success); }
.lobby-players { margin-bottom: 18px; }
.lobby-players__count { display: inline-block; min-width: 22px; padding: 0 6px; border-radius: var(--radius-pill);
    background: var(--c-surface-2); color: var(--c-text-muted); font-size: .78rem; text-align: center; }
.lobby-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.lobby-player { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-border-soft);
    border-radius: 12px; background: var(--c-surface); }
.lobby-player__name { flex: 1; min-width: 0; font-size: .85rem; font-weight: 600; color: var(--c-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-player__host { font-size: .68rem; font-weight: 700; color: var(--c-accent);
    padding: 1px 7px; border: 1px solid var(--c-accent-dim); border-radius: var(--radius-pill); }
.lobby-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lobby-actions__hint { font-size: .8rem; color: var(--c-text-muted); }

@media (prefers-reduced-motion: reduce) { .game-card:hover { transform: none; } }

/* =====================================================================
   MALU GAMES – Store, Detailseite, Vollbild (Publisher, 17.07.2026).
   Steam-artige Praesentation. --game-accent je Spiel setzt den Farbton.
   ===================================================================== */

/* --- Store-Uebersicht --- */
.gstore { max-width: 960px; margin: 0 auto; }
.gstore__hero { padding: 8px 0 20px; }
.gstore__brand { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .18em;
    text-transform: uppercase; color: var(--c-accent); }
.gstore__title { margin: 6px 0 4px; font-size: 1.7rem; font-weight: 800; color: var(--c-text); }
.gstore__sub { margin: 0; font-size: .9rem; color: var(--c-text-muted); }
.gstore__empty { padding: 30px 0; }

.gstore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gcard { display: flex; flex-direction: column; border: 1px solid var(--c-border-soft); border-radius: 16px;
    overflow: hidden; background: var(--c-surface); text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.gcard:hover { transform: translateY(-3px); border-color: var(--game-accent, var(--c-accent));
    box-shadow: 0 14px 34px rgba(0,0,0,.4); }
.gcard__cover { position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center;
    background-color: color-mix(in srgb, var(--game-accent, var(--c-accent)) 22%, var(--c-surface-2));
    display: flex; align-items: center; justify-content: center; }
.gcard__cover-fallback { font-size: 2.4rem; font-weight: 800; color: var(--game-accent, var(--c-accent)); opacity: .7; }
.gcard__live { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: var(--radius-pill);
    background: rgba(10,11,16,.72); color: var(--c-success); font-size: .68rem; font-weight: 700; }
.gcard__body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.gcard__name { font-size: 1rem; font-weight: 800; color: var(--c-text); }
.gcard__genre { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--game-accent, var(--c-accent)); }
.gcard__tag { margin-top: 2px; font-size: .78rem; color: var(--c-text-muted); }

.gstore-code { margin: 22px auto 8px; max-width: 420px; text-align: center; }
.gstore-code__label { display: block; margin-bottom: 8px; font-size: .8rem; color: var(--c-text-muted); }
.gstore-code__row { display: flex; gap: 8px; justify-content: center; }
.gstore-code__input { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; text-align: center;
    padding: 8px 12px; border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface-2); color: var(--c-text); }

/* --- Detailseite --- */
.gdetail { max-width: 860px; margin: 0 auto; }
.gdetail__back { display: inline-block; margin-bottom: 12px; font-size: .82rem; color: var(--c-text-muted); text-decoration: none; }
.gdetail__back:hover { color: var(--game-accent, var(--c-accent)); }
.gdetail__hero { border-radius: 18px; overflow: hidden; background: var(--c-surface-2);
    background-size: cover; background-position: center; min-height: 260px; display: flex; align-items: flex-end; }
.gdetail__hero-in { padding: 22px 24px; width: 100%; }
.gdetail__genre { margin: 0 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--game-accent, var(--c-accent)); }
.gdetail__title { margin: 0; font-size: 2rem; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.gdetail__tagline { margin: 6px 0 0; font-size: 1rem; color: #dfe7f0; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.gdetail__pub { margin: 10px 0 0; font-size: .78rem; color: #c7cfdc; }
.gdetail__pub strong { color: #fff; }
.gdetail__play { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0; }
.gdetail__playbtn { font-size: 1rem; padding: 12px 28px; }
.gdetail__soon { font-size: .85rem; color: var(--c-text-muted); }
.gdetail__about { margin: 4px 0 20px; color: var(--c-text); line-height: 1.6; font-size: .95rem; }

.gdetail-sec { margin: 22px 0; }
.gdetail-sec__title { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; color: var(--c-text); }

/* Screenshots (wischbare Leiste) */
.gshots { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity;
    scrollbar-width: none; }
.gshots::-webkit-scrollbar { display: none; }
.gshots.is-swiping { cursor: grabbing; }
.gshot { flex: 0 0 auto; width: 320px; max-width: 78vw; aspect-ratio: 16 / 9; border-radius: 12px;
    border: 1px solid var(--c-border-soft); background-size: cover; background-position: center; scroll-snap-align: start; }

/* Updates / Patch Notes */
.gupdates { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gupdate { padding: 14px 16px; border: 1px solid var(--c-border-soft); border-radius: 14px; background: var(--c-surface); }
.gupdate__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.gupdate__ver { padding: 1px 8px; border-radius: var(--radius-pill); font-size: .7rem; font-weight: 800;
    color: var(--game-accent, var(--c-accent)); border: 1px solid var(--game-accent, var(--c-accent)); }
.gupdate__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--c-text); flex: 1; }
.gupdate__date { font-size: .74rem; color: var(--c-text-dim); }

/* --- Vollbild-Spiel --- */
.play-body { margin: 0; height: 100vh; overflow: hidden; background: #06070c; }
.playscene { display: flex; flex-direction: column; height: 100vh; height: 100dvh;
    overflow: hidden; overscroll-behavior: none; }
.playbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(8,9,14,.85); border-bottom: 1px solid var(--c-border);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.playbar__title { font-size: .9rem; font-weight: 800; color: var(--c-text); }
.playbar__lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.playbar__tools { display: flex; align-items: center; gap: 6px; }
.playbar__exit { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius-pill);
    border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text);
    text-decoration: none; font-size: .82rem; font-weight: 700; transition: background .15s ease, border-color .15s ease; }
.playbar__exit:hover { border-color: var(--game-accent, var(--c-accent)); background: var(--c-surface); }
.playbar__exit svg { width: 16px; height: 16px; }
.playstage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.playstage__canvas { display: block; width: 100%; height: 100%; }
.playstage__soon { text-align: center; padding: 24px; }
.playstage__spark { display: inline-flex; color: var(--game-accent, var(--c-accent)); }
.playstage__spark svg { width: 54px; height: 54px; }
.playstage__title { margin: 10px 0 4px; font-size: 1.4rem; font-weight: 800; color: var(--c-text); }
.playstage__text { margin: 0 0 16px; font-size: .9rem; color: var(--c-text-muted); }

@media (prefers-reduced-motion: reduce) { .gcard:hover { transform: none; } }
@media (max-width: 560px) {
    .gdetail__title { font-size: 1.5rem; }
    .gdetail__hero { min-height: 200px; }
}

/* --- Sternenflug: HUD + Overlays (17.07.2026) -------------------------- */
.sf-hud {
    position: absolute; top: 10px; left: 12px; right: 12px;
    display: flex; align-items: center; gap: 12px;
    pointer-events: none;
    z-index: 5;
}
.sf-hud__score {
    font-size: 1.3rem; font-weight: 800; color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
    min-width: 70px;
}
.sf-hud__lives { color: var(--game-accent, var(--c-accent)); font-size: .95rem; letter-spacing: .2em; }
.sf-hud__right { margin-left: auto; display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.sf-hud__best { font-size: .8rem; color: #c7cfdc; }
.sf-hud__best b { color: #fff; }
.sf-hud__btn {
    width: 34px; height: 34px;
    border: 1px solid var(--c-border); border-radius: 50%;
    background: rgba(10,11,18,.6); color: #dfe7f0;
    font-size: .8rem; font-weight: 700; cursor: pointer;
}
.sf-hud__btn:hover { border-color: var(--game-accent, var(--c-accent)); }
.sf-hud__btn.is-off { opacity: .4; }

.sf-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,6,12,.55);
    z-index: 6;
}
.sf-overlay__card {
    text-align: center;
    padding: 28px 34px;
    border: 1px solid var(--c-border);
    border-radius: 18px;
    background: rgba(13,15,26,.92);
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
    max-width: 88vw;
}
.sf-overlay__title { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; color: #fff; }
.sf-overlay__text { margin: 0 0 2px; font-size: .92rem; color: #c7cfdc; }
.sf-overlay__hint { margin: 0 0 16px; font-size: .78rem; color: #8b94a5; }
.sf-overlay__btn { font-size: 1rem; padding: 11px 30px; }
.sf-overlay__best { margin: 12px 0 0; font-size: .8rem; color: #8b94a5; }
.sf-overlay__score { margin: 4px 0; font-size: 1.05rem; color: #dfe7f0; }
.sf-overlay__score b, .sf-overlay__best b { color: var(--game-accent, var(--c-accent)); }
.sf-overlay__xp { margin: 8px 0 14px; font-size: .95rem; font-weight: 700; color: var(--c-success); }
.sf-overlay__actions { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }

/* Spielflaeche: kein Scroll/Zoom beim Steuern mit dem Finger. */
.playstage__canvas { touch-action: none; }
/* hidden-Attribut gewinnt gegen display:flex (HUD + Overlays). */
.sf-hud[hidden], .sf-overlay[hidden] { display: none; }
/* Seitliche Safe-Areas (Notch im Querformat): Playbar + Spiel-HUD. */
.playbar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}
.sf-hud {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
}

/* --- Housekeeping Anlaufstellen: Vorschau und Anzeige (22.07.2026) -----
   Die Vorschau bindet die ECHTE Mitglieder-Karte ein. Deshalb gibt es hier
   bewusst KEINE Regeln, die in die Karte hineingreifen: sie soll im
   Housekeeping genauso aussehen wie im Verzeichnis. Gestaltet wird nur der
   Rahmen darum.

   Der Rahmen traegt zusaetzlich die Klasse .anl-seite. Deren lokale
   Farbfassung gilt damit auch hier, sonst erschiene dieselbe Karte im
   Housekeeping in anderen Farben und die Vorschau waere nur halb ehrlich.
   Die Seitenabstaende von .anl-seite werden wieder aufgehoben, die gehoeren
   zur Vollseite und nicht in ein Feld im Housekeeping. */
.anl-vorschau {
    padding: var(--space-4);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius);
    max-width: 560px;
}
.anl-vorschau.anl-seite { margin: 0; padding: var(--space-4); }
.anl-vorschau > * { max-width: 100%; }

/* Hinweise, die man wirklich lesen soll: Datenschutz und Anzeigenpflicht. */
.anl-hinweis {
    display: block;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--c-accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: color-mix(in srgb, var(--c-accent) 8%, transparent);
    line-height: 1.5;
}

/* --- Lichtjäger: HUD (17.07.2026) -------------------------------------- */
.as-hud {
    position: absolute; top: 10px;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; pointer-events: none; z-index: 5;
}
.as-hud[hidden] { display: none; }
/* Ein Layout fuer alle Geraete: Balken LINKS, Infos RECHTS.
   Desktop/Tablet etwas groesser, Handy kompakt (Media-Query unten). */
.as-hud__bars { display: flex; flex-direction: column; gap: 6px; width: 260px; }
.as-hud__info { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; text-align: right; pointer-events: auto; }
.as-hud__knoepfe { display: flex; gap: 6px; }
.as-bar { display: flex; align-items: center; gap: 8px; }
.as-bar__label {
    width: 44px; font-size: .64rem; font-weight: 700; letter-spacing: .05em;
    color: #aab3c6; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.as-bar__track {
    flex: 1; height: 8px; border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
}
.as-bar__fill { display: block; height: 100%; border-radius: 999px; transition: width .18s ease; }
.as-bar__fill--hull { background: linear-gradient(90deg, #ff8a3d, #ff5c3d); }
.as-bar__fill--shield { background: linear-gradient(90deg, #4fc3ff, #7c8cff); }
.as-hud__stats { display: flex; align-items: baseline; gap: 14px; margin-top: 2px; }
.as-hud__score { font-size: 1.25rem; font-weight: 800; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.as-hud__kerne { font-size: .85rem; font-weight: 700; color: #ffd97a; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.as-hud__right { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
/* Handy: gleiches Layout, nur kompakter. */
@media (max-width: 520px) {
    .as-hud__bars { width: 150px; gap: 5px; }
    .as-hud__bars .as-bar__label { width: 38px; font-size: .58rem; }
    .as-hud__score { font-size: 1.05rem; }
}

/* =====================================================================
   MALU Anlaufstellen, oeffentliche Seite (Praefix .anl-)  22.07.2026
   ---------------------------------------------------------------------
   Portierung des freigegebenen Entwurfs anlaufstellen-entwurf.html.

   FARBFASSUNG: Der Entwurf benutzt eine hellere, blaugraue Palette. Sie gilt
   ZUNAECHST NUR auf dieser Seite und steht deshalb als lokale Variablen auf
   .anl-seite. Die globalen Tokens ganz oben in dieser Datei bleiben
   unveraendert, der Rest der App merkt davon nichts.

   FARBE = STATUS. Gruen heisst geoeffnet, orange schliesst bald, rot keine
   freien Plaetze. Alle Symbole laufen in der Akzentfarbe, es gibt keine
   Farbe je Kategorie. Jede Statusaussage steht zusaetzlich als Text da,
   niemals nur als Farbe.
   ===================================================================== */

/*
   KEINE eigenen Farben mehr.

   Hier stand bis 22.07.2026 eine lokale, hellere Fassung nur fuer dieses
   Modul. Das Ergebnis war eine sichtbare Naht: die Seitenleiste war neutral
   dunkelgrau, die Modulflaeche fast gleich hell, aber blaustichig. Zwei Toene,
   die sich in der Helligkeit kaum, im Farbton aber deutlich unterscheiden,
   liest das Auge nicht als zwei Bereiche, sondern als Fehler.

   Die hellere Fassung steht jetzt global ganz oben in dieser Datei. Das Modul
   erbt sie wie jede andere Seite auch, und der Streifen ist weg.
*/
.anl-seite {
    --anl-r:      14px;
    --anl-r-sm:   10px;
    --anl-r-pill: 999px;

    /* Kein Ausbluten ueber die Raender mehr. Das war nur noetig, solange die
       Modulflaeche eine eigene Hintergrundfarbe hatte und den Hauptbereich
       randlos fuellen musste. Jetzt sitzt die Seite in denselben Abstaenden
       wie jede andere Seite der App. */
    padding-bottom: 90px;
}

/* Volle Breite des Hauptbereichs. Eine feste Obergrenze liess links und
   rechts grosse leere Flaechen stehen, obwohl die Seite gerade von Breite
   lebt: mehr Karten je Reihe statt groesserer Karten. */
.anl-inhalt { max-width: none; margin: 0; display: flex; flex-direction: column; gap: 44px; }

/* WICHTIG: Alle Abschnitte liegen INNERHALB des Formulars. Der Abstand muss
   deshalb hier stehen, nicht nur auf .anl-inhalt, sonst kleben Suchblock,
   Themen, Arten und Ergebnisliste aufeinander. Genau das war der Fall. */
.anl-form { display: flex; flex-direction: column; gap: 44px; }
.anl-seite h1, .anl-seite h2, .anl-seite h3 { margin: 0; font-weight: 600; }
.anl-seite :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.anl-link { color: var(--c-accent); text-decoration: none; }
.anl-link:hover { text-decoration: underline; }

/* --- 1. Kopf ---------------------------------------------------------- */
.anl-einstieg { display: flex; flex-direction: column; gap: 18px; }
.anl-top { display: flex; align-items: center; gap: 15px; }
.anl-top__mark {
    width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: rgba(109, 211, 255, .13);
    border: 1px solid rgba(109, 211, 255, .3);
    color: var(--c-accent);
}
.anl-top h1 { font-size: 1.62rem; letter-spacing: -.015em; }
.anl-top__lead { color: var(--c-text-muted); margin: 2px 0 0; font-size: .94rem; }

/* --- 2. Krisenhilfe ----------------------------------------------------
   Bewusst als <details>: das Auf- und Zuklappen kann jeder Browser von sich
   aus, auch ohne JavaScript. Ohne Skript startet der Block offen, die
   Nummern stehen also immer da. anlaufstellen.js klappt ihn nur zu. */
.anl-krise__btn {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    cursor: pointer; padding: 12px 16px; min-height: 44px;
    background: var(--c-glass);
    border: 1px solid var(--c-border);
    border-left: 2px solid var(--c-danger);
    border-radius: 0 var(--anl-r-sm) var(--anl-r-sm) 0;
    color: var(--c-text-muted); font: inherit; font-size: .88rem;
    list-style: none;
}
.anl-krise__btn::-webkit-details-marker { display: none; }
.anl-krise__btn::marker { content: ""; }
.anl-krise__btn:hover { color: var(--c-text); }
.anl-krise__btn > svg:first-child { color: var(--c-danger); flex: 0 0 auto; }
.anl-krise__btn b { color: var(--c-text); font-weight: 600; }
.anl-krise__chev { margin-left: auto; transition: transform .18s; flex: 0 0 auto; }
.anl-krise[open] .anl-krise__chev { transform: rotate(180deg); }
.anl-krise__inhalt {
    padding: 16px 18px; margin-top: -1px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 2px solid var(--c-danger);
    border-radius: 0 0 var(--anl-r-sm) 0;
}
.anl-krise__reihe { display: flex; flex-wrap: wrap; gap: 9px 28px; font-size: .9rem; color: var(--c-text-muted); }
.anl-krise__reihe b { color: var(--c-text); font-variant-numeric: tabular-nums; }
.anl-krise__fuss { margin: 12px 0 0; font-size: .85rem; color: var(--c-text-dim); }

/* --- 3. Suchblock ------------------------------------------------------ */
.anl-suche { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--anl-r); padding: 24px; }
.anl-suche__t { font-size: 1.02rem; margin-bottom: 3px; }
.anl-suche__s { color: var(--c-text-muted); font-size: .88rem; margin: 0 0 18px; }
.anl-suche__grid { display: grid; grid-template-columns: 1.7fr 1fr auto; gap: 14px; align-items: end; }
.anl-feld { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.anl-feld__l {
    font-size: .71rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--c-text-dim); padding: 0;
}
.anl-eingabe {
    display: flex; align-items: center; gap: 11px;
    background: var(--c-bg); border: 1px solid var(--c-border);
    border-radius: var(--anl-r-sm); padding: 0 15px; height: 52px; color: var(--c-text-muted);
}
/* EIN Fokusring, nicht zwei.
   Der Rahmen sieht aus wie das Eingabefeld, also gehoert der Ring an ihn.
   Das eigentliche <input> darf deshalb keinen eigenen zeichnen. Das "outline: 0"
   unten reicht dafuer NICHT: die allgemeine Regel .anl-seite :focus-visible ist
   spezifischer und hat gewonnen, dadurch lagen zwei Kaesten uebereinander. */
.anl-eingabe:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.anl-seite .anl-eingabe input:focus,
.anl-seite .anl-eingabe input:focus-visible { outline: none; box-shadow: none; }
.anl-eingabe input { background: none; border: 0; outline: 0; color: var(--c-text); font: inherit; width: 100%; height: 100%; }
/* Auf den ganzen Rahmen klicken laesst sich ohnehin, weil er ein <label> ist.
   Der Zeiger sagt das jetzt auch. */
.anl-eingabe { cursor: text; }
.anl-radius {
    display: flex; gap: 5px; background: var(--c-bg);
    border: 1px solid var(--c-border); border-radius: var(--anl-r-sm); padding: 5px; height: 52px;
}
.anl-radius__opt { flex: 1; display: block; min-width: 44px; }
.anl-radius__opt input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.anl-radius__opt span {
    display: grid; place-items: center; height: 100%; border-radius: 7px;
    color: var(--c-text-muted); font-size: .85rem; cursor: pointer;
}
.anl-radius__opt:hover span { color: var(--c-text); }
.anl-radius__opt input:checked + span { background: var(--c-accent); color: #0a2430; font-weight: 600; }
.anl-radius__opt input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.anl-btn {
    height: 52px; padding: 0 30px; border: 0; border-radius: var(--anl-r-sm);
    background: var(--c-accent); color: #0a2430; font: inherit; font-weight: 600;
    font-size: .98rem; cursor: pointer; white-space: nowrap;
}
.anl-btn:hover { background: var(--c-accent-dim); }
.anl-reihe {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-border-soft);
}
.anl-reihe--blank { margin-top: 0; padding-top: 0; border-top: 0; }
.anl-reihe__l { font-size: .77rem; color: var(--c-text-dim); margin-right: 2px; }
.anl-hinweis-ort { margin: 14px 0 0; font-size: .85rem; color: var(--c-warn); }
/* Die Naeherung ist kein Fehler, nur eine Auskunft. Deshalb ruhig statt orange. */
.anl-hinweis-ort--info { color: var(--c-text-muted); }

/* --- 4./5. Auswahlbloecke --------------------------------------------- */
.anl-block { display: flex; flex-direction: column; gap: 16px; }
.anl-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.anl-block__t { font-size: 1.06rem; }
.anl-block__s { color: var(--c-text-dim); font-size: .84rem; }

.anl-themen { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 11px; }
.anl-thema {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 14px 15px; min-height: 44px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--anl-r-sm); cursor: pointer; text-align: left;
    font: inherit; color: var(--c-text); transition: border-color .16s, background .16s;
}
.anl-thema:hover { border-color: var(--c-accent); }
.anl-thema[aria-pressed="true"] { border-color: var(--c-accent); background: rgba(109, 211, 255, .13); }
.anl-thema__i {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: rgba(109, 211, 255, .17); color: var(--c-accent);
}
.anl-thema__n { font-weight: 500; font-size: .91rem; line-height: 1.25; min-width: 0; }
.anl-thema__ok { margin-left: auto; color: var(--c-accent); display: none; flex: 0 0 auto; }
.anl-thema[aria-pressed="true"] .anl-thema__ok { display: block; }

.anl-arten { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 11px; }
.anl-art {
    display: flex; align-items: center; gap: 12px; padding: 13px 15px; min-height: 44px;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--anl-r-sm); cursor: pointer; text-align: left;
    font: inherit; color: var(--c-text-muted); transition: border-color .16s, background .16s, color .16s;
}
.anl-art:hover { border-color: var(--c-accent); color: var(--c-text); }
.anl-art[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-text); background: rgba(109, 211, 255, .11); }
.anl-art__i {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: rgba(109, 211, 255, .16); color: var(--c-accent);
}
.anl-art__n { font-size: .88rem; line-height: 1.25; min-width: 0; }
.anl-art__ok { margin-left: auto; color: var(--c-accent); display: none; flex: 0 0 auto; }
.anl-art[aria-pressed="true"] .anl-art__ok { display: block; }

.anl-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; min-height: 44px; border-radius: var(--anl-r-pill);
    background: var(--c-bg); border: 1px solid var(--c-border);
    color: var(--c-text-muted); font: inherit; font-size: .84rem;
    text-decoration: none; cursor: pointer;
    transition: border-color .16s, color .16s, background .16s;
}
.anl-chip:hover { border-color: var(--c-accent); color: var(--c-text); }
.anl-chip[aria-pressed="true"] { border-color: var(--c-accent); color: var(--c-text); background: rgba(109, 211, 255, .14); }

/* --- 6./7./8. Ergebnisleiste, Eingrenzen, aktive Filter ---------------- */
.anl-ergebnis { display: flex; flex-direction: column; gap: 18px; }
.anl-leiste {
    display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
    flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--c-border);
}
.anl-leiste__t { font-size: 1.06rem; }
.anl-leiste__t span { color: var(--c-text-muted); font-weight: 400; }
.anl-leiste__hint { color: var(--c-text-dim); font-size: .82rem; }
.anl-aktiv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.anl-aktiv__c {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 8px 5px 13px; min-height: 44px; border-radius: var(--anl-r-pill);
    background: rgba(109, 211, 255, .14); border: 1px solid rgba(109, 211, 255, .35);
    color: var(--c-text); font: inherit; font-size: .83rem; text-decoration: none;
}
.anl-aktiv__x { color: var(--c-accent); display: grid; place-items: center; padding: 2px; }
.anl-aktiv__reset {
    background: none; border: 0; color: var(--c-text-dim); font: inherit; font-size: .83rem;
    cursor: pointer; text-decoration: underline; padding: 5px 4px; min-height: 44px;
}
.anl-aktiv__reset:hover { color: var(--c-text); }

/* --- 9. Kartenraster --------------------------------------------------- */
/* auto-fill statt fester Spaltenzahl: auf einem breiten Bildschirm entstehen
   MEHR Karten je Reihe, nicht groessere. Die Karte bleibt kompakt, so wie sie
   gedacht ist, und die Flaeche wird trotzdem genutzt. */
.anl-treffer { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 14px; }
.anl-karte {
    display: flex; flex-direction: column; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--anl-r);
    overflow: hidden; transition: border-color .18s, transform .18s;
}
.anl-karte:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.anl-karte__bild {
    position: relative; height: 74px; background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border-soft);
    display: grid; place-items: center; color: var(--c-accent);
}
.anl-karte__zeile { position: absolute; inset: 0 0 auto 0; height: 3px; }
.anl-karte__b { padding: 13px 14px 0; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.anl-kopf { display: flex; align-items: flex-start; gap: 6px; justify-content: space-between; }
.anl-kat { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-dim); line-height: 1.4; }
/* Anzeige-Kennzeichnung. Bewusst NEUTRAL und unauffaellig: das ist eine
   Offenlegung, kein Guetesiegel. Ein huebsches Abzeichen wuerde wie eine
   Auszeichnung wirken und genau den falschen Eindruck erzeugen. */
.anl-anzeige {
    flex: 0 0 auto; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
    font-weight: 700; color: #0f1620; background: #8d97a8; padding: 2px 7px;
    border-radius: 4px; margin-top: 1px;
}
.anl-karte--anzeige { border-color: #4a5468; }
.anl-karte__n { font-size: .94rem; font-weight: 600; line-height: 1.3; }
.anl-karte__n a { color: inherit; text-decoration: none; }
.anl-karte__n a:hover { color: var(--c-accent); }
.anl-status { display: flex; align-items: center; gap: 7px; font-size: .8rem; line-height: 1.35; }
.anl-status .anl-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.anl-ok   { color: var(--c-success); }
.anl-warn { color: var(--c-warn); }
.anl-dan  { color: var(--c-danger); }
.anl-mut  { color: var(--c-text-dim); }
.anl-bg-ok   { background: var(--c-success); }
.anl-bg-warn { background: var(--c-warn); }
.anl-bg-dan  { background: var(--c-danger); }
.anl-bg-mut  { background: #5a6579; }
.anl-meta { color: var(--c-text-muted); font-size: .8rem; }
.anl-meta b { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.anl-karte__fuss { margin-top: auto; padding-top: 4px; }
.anl-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.anl-tag {
    font-size: .71rem; padding: 2px 8px; border-radius: var(--anl-r-pill);
    background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-muted);
}
.anl-bestaetigt { font-size: .7rem; color: var(--c-text-dim); padding: 8px 0 12px; }

.anl-wege { display: flex; background: var(--c-border); gap: 1px; border-top: 1px solid var(--c-border); margin-top: auto; }
.anl-weg {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 4px; min-height: 44px; background: var(--c-surface);
    color: var(--c-text-muted); text-decoration: none; font-size: .71rem;
    transition: background .15s, color .15s;
}
.anl-weg:hover { background: var(--c-surface-2); color: var(--c-accent); }
.anl-weg--haupt { background: rgba(109, 211, 255, .1); color: var(--c-accent); }
.anl-weg--haupt:hover { background: rgba(109, 211, 255, .17); }

/* --- 10. Leerer Zustand, Fehler, Blaetterleiste ------------------------ */
.anl-leer {
    padding: 40px 24px; text-align: center; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--anl-r);
}
.anl-leer h3 { font-size: 1rem; margin-bottom: 6px; }
.anl-leer p { color: var(--c-text-muted); font-size: .89rem; margin: 0 0 16px; }
.anl-leer__aus { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.anl-fehler {
    padding: 20px 22px; background: rgba(255, 107, 107, .1);
    border: 1px solid rgba(255, 107, 107, .4); border-left: 2px solid var(--c-danger);
    border-radius: var(--anl-r-sm); color: var(--c-text);
}
.anl-fehler p { margin: 6px 0 0; color: var(--c-text-muted); font-size: .89rem; }
.anl-blaettern { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .85rem; color: var(--c-text-muted); }

/* --- Detailseite ------------------------------------------------------- */
.anl-zurueck { display: inline-flex; align-items: center; gap: 7px; color: var(--c-text-muted); text-decoration: none; font-size: .86rem; min-height: 44px; }
.anl-zurueck:hover { color: var(--c-text); }
.anl-detail { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.anl-spalte { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.anl-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--anl-r); padding: 20px 22px; }
.anl-panel__t { font-size: .95rem; margin-bottom: 12px; }
.anl-text { color: var(--c-text-muted); font-size: .92rem; margin: 0; }
.anl-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; font-size: .88rem; }
.anl-dl dt { color: var(--c-text-dim); }
.anl-dl dd { margin: 0; color: var(--c-text); min-width: 0; overflow-wrap: anywhere; }
.anl-plan { width: 100%; border-collapse: collapse; font-size: .88rem; }
.anl-plan th, .anl-plan td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--c-border-soft); vertical-align: top; }
.anl-plan th { font-weight: 500; color: var(--c-text-muted); white-space: nowrap; }
.anl-plan tr:last-child th, .anl-plan tr:last-child td { border-bottom: 0; }
.anl-plan .anl-heute th, .anl-plan .anl-heute td { background: rgba(109, 211, 255, .09); color: var(--c-text); }
.anl-heute__mark { color: var(--c-accent); font-size: .74rem; margin-left: 6px; }
.anl-haftung { color: var(--c-text-dim); font-size: .82rem; line-height: 1.6; margin: 0; }
.anl-herkunft { color: var(--c-text-dim); font-size: .8rem; margin: 0; }

/* --- Bruchstellen ------------------------------------------------------ */
/* Die Spaltenzahl der Trefferliste regelt auto-fill von selbst, dafuer
   braucht es keine Bruchstellen mehr. */
@media (max-width: 1100px) {
    .anl-detail  { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
    .anl-inhalt, .anl-form { gap: 34px; }
    .anl-suche__grid { grid-template-columns: 1fr; }
    .anl-radius { overflow-x: auto; }
    .anl-top h1 { font-size: 1.3rem; }
}
@media (max-width: 560px) { .anl-treffer { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
    .anl-seite *, .anl-seite *::before, .anl-seite *::after { transition: none !important; animation: none !important; }
    .anl-karte:hover { transform: none; }
}

/* --- Astrion: Sektor, Mineralien, Basis-Fenster (17.07.2026) ----------- */
.as-statejson { display: none; }
.as-hud__sektor { font-size: .8rem; font-weight: 700; color: #ffb46a; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.as-hud__mins { display: flex; gap: 10px; margin-top: 3px; }
.as-min { font-size: .74rem; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.as-min--eisen { color: #cdd6e4; }
.as-min--bronze { color: #e8a76a; }
.as-min--obsidian { color: #b98cff; }
.as-min--uranium { color: #8cff5c; }
.sf-hud__btn--wide { width: auto; padding: 0 12px; border-radius: 999px; font-size: .74rem; }

/* Koop: Mitspieler-Chips im HUD (Name + Sektor) */
.as-mates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.as-mates[hidden] { display: none; }
.as-mate {
    font-size: .7rem; font-weight: 700; color: #9fb6cf;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(10, 14, 24, .6); border: 1px solid rgba(124, 200, 255, .25);
}
.as-mate.is-hier { color: #cfe7ff; border-color: rgba(124, 200, 255, .6); cursor: pointer; }

/* Update-Menü: Schiffs-Vorschau */
.as-preview {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    margin-bottom: 12px; padding: 10px;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 40%, rgba(124, 200, 255, .08), rgba(8, 10, 18, .6));
    border: 1px solid rgba(124, 200, 255, .18);
}
.as-preview canvas { display: block; }
.as-preview__name { font-size: .8rem; font-weight: 800; color: #dfe7f0; }

/* Piloten-Level im HUD */
.as-hud__pilot {
    font-size: .74rem; font-weight: 700; color: #ffd97a;
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.as-hud__ammo {
    font-size: .74rem; font-weight: 700; color: #ff9a5c;
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* Gilde + Überfall */
.as-guild__head { font-weight: 800; color: #eef2f8; margin: 10px 0 6px; font-size: .95rem; }
.as-guild__code { font-size: .8rem; color: #ffd97a; margin-bottom: 8px; }
.as-guild__form { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.as-guild__form .as-chat__input { height: 36px; flex: 1; min-width: 120px; }
.as-guild__list { display: flex; flex-direction: column; gap: 6px; }
.as-guild__row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 12px; border-radius: 12px;
    background: rgba(20, 24, 38, .6); border: 1px solid rgba(124, 200, 255, .12);
}
.as-guild__row--log { font-size: .76rem; color: #b9c2d4; }
.as-guild__name { font-weight: 700; color: #eef2f8; }
.as-guild__rang { font-size: .74rem; color: #9fb6cf; margin-left: auto; }
.as-guild__rang.is-anfuehrer { color: #ffd97a; }
.as-guild__rang.is-offizier { color: #7cc8ff; }
.as-raidmsg {
    padding: 8px 12px; border-radius: 12px; font-size: .82rem; font-weight: 700;
    margin-bottom: 8px;
}
.as-raidmsg.is-sieg { background: rgba(60, 160, 90, .18); color: #7ce8a2; }
.as-raidmsg.is-fehl { background: rgba(200, 70, 70, .16); color: #ff9a8c; }
.as-raidmsg[hidden] { display: none; }

/* Koop: Raum-Chat unten links (Minimap sitzt rechts). z-index 7 =
   ueber den Overlays, damit man schon vor dem Starten chatten kann. */
.as-chat {
    position: absolute;
    left: max(12px, env(safe-area-inset-left));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: min(300px, 70vw);
    display: flex; flex-direction: column; gap: 6px;
    z-index: 7;
}
.as-chat[hidden] { display: none; }
.as-chat__log {
    max-height: 150px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 3px;
    padding: 8px; border-radius: 12px;
    background: rgba(8, 10, 18, .55);
    border: 1px solid rgba(124, 200, 255, .18);
}
.as-chat__log:empty { display: none; }
.as-chat__msg { font-size: .74rem; color: #dfe7f0; overflow-wrap: break-word; position: relative; padding-right: 32px; }
.as-chat__msg b { color: #7cc8ff; font-weight: 700; }
.as-chat__msg--sys { color: #9aa3b5; font-style: italic; }
/* Melden (⚑) + Moderation (⚙) am Chat (Update 066) */
.as-chat__akt { position: absolute; right: 0; top: 0; display: inline-flex; gap: 1px; opacity: .55; }
.as-chat__msg:hover .as-chat__akt { opacity: 1; }
.as-chat__flag {
    border: none; background: transparent; cursor: pointer; color: #7d8699;
    font-size: .8rem; line-height: 1; padding: 1px 3px; border-radius: 4px;
}
.as-chat__flag:hover { color: #ffb27a; background: rgba(255, 255, 255, .08); }
.as-chat__flag--mod:hover { color: #7cc8ff; }
.as-modmenu {
    position: fixed; z-index: 60; min-width: 184px; max-width: 210px;
    background: #12161f; border: 1px solid rgba(124, 200, 255, .28);
    border-radius: 10px; padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.as-modmenu__title { font-size: .68rem; color: #9aa3b5; padding: 3px 6px 5px; font-weight: 700; }
.as-modmenu__item {
    display: block; width: 100%; text-align: left; border: none; background: transparent;
    color: #dfe7f0; font-size: .76rem; padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.as-modmenu__item:hover { background: rgba(124, 200, 255, .14); }
.as-chat__form { display: flex; gap: 6px; }
.as-chat__input {
    flex: 1; min-width: 0; height: 34px; padding: 0 12px; border-radius: 999px;
    background: rgba(8, 10, 18, .55);
    border: 1px solid rgba(124, 200, 255, .25);
    color: #eef2f8; font-size: .8rem; outline: none;
}
.as-chat__input:focus { border-color: rgba(124, 200, 255, .6); }
.as-chat__input::placeholder { color: #7d8699; }
.as-chat__send { flex: 0 0 auto; }

.as-base { text-align: left; max-width: 560px; width: 92vw; max-height: 84vh; overflow-y: auto; }
.as-base__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* Werkstatt-Vorrat: die einzelnen Mineralien sind die Kaufwaehrung und
   stehen darum vorn und groesser; die Gesamtsumme ist nur noch eine dezente
   Platz-Anzeige darunter (frueher stand sie oben und wurde mit der Kauf-
   waehrung verwechselt). */
.as-base__vorrat { margin: 6px 0 4px; font-size: .8rem; color: #aeb8c6; }
.as-base__mins { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 8px; font-size: .95rem; }
.as-base__lager { margin: 0 0 12px; font-size: .72rem; color: #7f8a99; }
.as-base__lager b { color: #aeb8c6; font-weight: 600; }

/* Tages-Bestenliste (Top 3 heute) */
.as-rang { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.as-rang__eintrag { display: flex; align-items: center; gap: 8px; font-size: .82rem; }
.as-rang__platz { width: 17px; height: 17px; flex: 0 0 auto; display: inline-flex;
    align-items: center; justify-content: center; border-radius: 50%;
    background: #2a3342; color: #aeb8c6; font-size: .66rem; font-weight: 700; }
.as-rang__eintrag--1 .as-rang__platz { background: #ffd97a; color: #1a1a1f; }
.as-rang__eintrag--2 .as-rang__platz { background: #cdd6e4; color: #1a1a1f; }
.as-rang__eintrag--3 .as-rang__platz { background: #e8a76a; color: #1a1a1f; }
.as-rang__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: #dfe7f0; }
.as-rang__score { flex: 0 0 auto; color: #ffd97a; font-weight: 700; font-variant-numeric: tabular-nums; }
.as-rang__leer { list-style: none; font-size: .76rem; color: #7f8a99; line-height: 1.4; }
.as-rang[hidden] { display: none; }
.as-rang__umschalt { display: flex; gap: 5px; margin-bottom: 8px; }
.as-rang__tab {
    flex: 1 1 auto; padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, .12); background: transparent;
    color: #aab3c6; cursor: pointer; border-radius: 6px;
    font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
    -webkit-tap-highlight-color: transparent;
}
.as-rang__tab.is-active { background: var(--game-accent, #ff6a3d); border-color: transparent; color: #140905; }
.as-base__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.as-base__tab {
    padding: 7px 16px; border-radius: 999px;
    border: 1px solid var(--c-border); background: transparent;
    color: #c7cfdc; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.as-base__tab.is-active { background: var(--game-accent, #ff6a3d); border-color: transparent; color: #140905; }
.as-base__auto { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: .8rem; color: #c7cfdc; cursor: pointer; }
.as-base__auto input { margin-top: 2px; }
.as-base__hint { margin: 14px 0 0; font-size: .72rem; color: #8b94a5; }

/* Tauschen: Rohstoff-Umtausch im Upgrade-Fenster */
.as-tausch { display: flex; flex-direction: column; gap: 10px; }
.as-tausch__row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.as-tausch__feld { display: flex; flex-direction: column; gap: 4px;
    font-size: .62rem; color: #8b94a5; text-transform: uppercase; letter-spacing: .1em; }
.as-tausch__feld select, .as-tausch__feld input {
    min-width: 96px; padding: 7px 9px; font-size: .9rem;
    color: #eef2f8; background: #17202f;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px;
    color-scheme: dark;   /* native Klappliste + Spinner dunkel, kein weisser Grund */
}
.as-tausch__feld option { background: #17202f; color: #eef2f8; }
.as-tausch__feld input { width: 96px; }
.as-tausch__pfeil { align-self: center; margin: 16px 0 6px; color: var(--game-accent, #ff6a3d); font-size: 1.1rem; }
.as-tausch__kurs { margin: 0; font-size: .82rem; color: #dfe7f0; }
.as-tausch__btn { align-self: flex-start; }
.as-tausch__note { margin: 2px 0 0; font-size: .78rem; color: #cdd6e4; }

.as-ships { display: grid; gap: 10px; }
.as-ship {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--c-border);
    border-radius: 12px; background: rgba(255,255,255,.03);
}
.as-ship.is-active { border-color: var(--game-accent, #ff6a3d); }
.as-ship__canvas { width: 64px; height: 64px; flex: 0 0 auto; }
.as-ship__body { flex: 1; min-width: 0; }
.as-ship__name { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 800; color: #fff; }
.as-ship__badge { font-size: .64rem; font-weight: 700; color: var(--game-accent, #ff6a3d); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; }
.as-ship__stats { margin-top: 2px; font-size: .72rem; color: #aab3c6; }
.as-ship__price { margin-top: 3px; font-size: .74rem; display: flex; gap: 10px; flex-wrap: wrap; }
.as-ship__actions { flex: 0 0 auto; }

.as-upgrades { display: grid; gap: 8px; }
.as-upg {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border: 1px solid var(--c-border);
    border-radius: 12px; background: rgba(255,255,255,.03);
}
.as-upg__body { flex: 1; min-width: 0; }
.as-upg__name { font-size: .85rem; font-weight: 800; color: #fff; }
.as-upg__lvl { color: var(--game-accent, #ff6a3d); }
.as-upg__cost { margin-top: 2px; font-size: .72rem; display: flex; gap: 10px; flex-wrap: wrap; }
.btn-sm.as-buy { flex: 0 0 auto; }

/* --- Astrion: HUD Taktik-Optik (19.07.2026) ----------------------------
   Flache halbtransparente Panels, abgeschnittene Ecken, EINE Akzentfarbe
   (--game-accent aus der DB), Grossbuchstaben mit letter-spacing.
   Block muss am DATEIENDE stehen, er ueberschreibt gleichrangige Regeln
   weiter oben per Reihenfolge. Bewusst KEIN backdrop-filter auf den
   Panels, sie liegen ueber dem staendig neu gemalten Spiel-Canvas. */

.as-hud { align-items: flex-start; gap: 12px; }

/* Grundbox: gilt fuer Gleiter, Einsatz UND Funk, alle sehen gleich aus */
.as-panel {
    --as-cut: 10px;
    position: relative;
    width: 260px;
    max-width: 46vw;
    color: #dfe7f0;
    background: rgba(9, 11, 17, .66);
    border: 1px solid rgba(255, 255, 255, .10);
    clip-path: polygon(
        var(--as-cut) 0, 100% 0,
        100% calc(100% - var(--as-cut)),
        calc(100% - var(--as-cut)) 100%,
        0 100%, 0 var(--as-cut));
    pointer-events: auto; /* Boxen schlucken Taps, kein Versehens-Flug */
}
.as-panel--einsatz { width: 240px; }
.as-panel--funk { width: min(300px, 70vw); max-width: none; }
.as-panel::before { /* Akzentlinie oben */
    content: ""; position: absolute; top: 0; left: var(--as-cut); right: 0;
    height: 2px; background: var(--game-accent, #ff6a3d);
}

/* Kopf ist ein Button: ganze Flaeche klickbar, gut am Handy */
.as-panel__head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin: 0; padding: 6px 10px 6px 12px;
    border: 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: transparent; color: inherit; font: inherit;
    text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.as-panel__title {
    margin-right: auto; white-space: nowrap;
    font-size: .6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .16em; color: #aab3c6;
}
.as-panel__head:hover .as-panel__title { color: #eef2f8; }
.as-panel__wert { /* Punkte bleiben auch zugeklappt sichtbar */
    font-size: .82rem; font-weight: 800; color: #fff;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.as-panel__chev {
    flex: 0 0 auto; width: 7px; height: 7px; margin: -2px 1px 0 4px;
    border-right: 1.5px solid #8b94a5;
    border-bottom: 1.5px solid #8b94a5;
    transform: rotate(45deg);           /* offen: zeigt nach unten */
    transition: transform .15s ease;
}
.as-panel.is-zu .as-panel__chev { transform: rotate(-45deg); }
.as-panel.is-zu .as-panel__head { border-bottom-color: transparent; }
.as-panel.is-zu .as-panel__body { display: none; }

.as-panel__body {
    display: flex; flex-direction: column; gap: 7px;
    padding: 9px 12px 10px;
}

/* Balken eckig und flach */
.as-panel .as-bar { gap: 8px; }
.as-panel .as-bar__label {
    width: 42px; font-size: .56rem; font-weight: 800;
    letter-spacing: .14em; color: #8b94a5; text-shadow: none;
}
.as-panel .as-bar__track {
    height: 9px; border-radius: 0;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
.as-panel .as-bar__fill { border-radius: 0; }
.as-panel .as-bar__fill--hull { background: var(--game-accent, #ff6a3d); }
.as-panel .as-bar__fill--shield { background: #cfe0f2; }

/* Sektor: erste Zeile rechts, Akzentfarbe, Grossbuchstaben */
.as-panel .as-hud__sektor {
    font-size: .64rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--game-accent, #ff6a3d); text-shadow: none;
}

/* Wertzeilen: Label links, Wert rechts */
.as-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.as-row__label {
    font-size: .56rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .14em; color: #8b94a5;
}
.as-row__wert {
    font-size: .8rem; font-weight: 800; color: #eef2f8;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Mineralzeile: eigene Sektion mit Haarlinie, Farben bleiben semantisch */
.as-panel .as-hud__mins {
    margin: 0; padding-top: 7px; gap: 4px 8px;
    flex-wrap: wrap; justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.as-panel .as-min {
    font-size: .68rem; text-shadow: none;
    letter-spacing: .02em; font-variant-numeric: tabular-nums;
}

/* Mitspieler-Chips eckig, nur im Astrion-Scope */
.as-panel .as-mates { margin-top: 2px; }
[data-game="astrion"] .as-mate {
    border-radius: 0;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    background: rgba(9, 11, 17, .6);
    border-color: rgba(255, 255, 255, .16);
}
[data-game="astrion"] .as-mate.is-hier { border-color: var(--game-accent, #ff6a3d); color: #eef2f8; }

/* Runde HUD-Knoepfe werden eckig, NUR bei Astrion
   (Sternenflug behaelt seine runden Knoepfe) */
[data-game="astrion"] .sf-hud__btn {
    border-radius: 0;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
    background: rgba(9, 11, 17, .66);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #c7cfdc;
}
[data-game="astrion"] .sf-hud__btn:hover { border-color: var(--game-accent, #ff6a3d); color: #fff; }

/* Funk-Panel: Log verliert seine eigene Box, das Panel IST die Box */
[data-game="astrion"] .as-chat__log {
    padding: 0; border: 0; border-radius: 0; background: transparent;
}
[data-game="astrion"] .as-chat__input {
    border-radius: 0;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    background: rgba(9, 11, 17, .66);
    border: 1px solid rgba(255, 255, 255, .14);
}
[data-game="astrion"] .as-chat__input:focus { border-color: var(--game-accent, #ff6a3d); }
[data-game="astrion"] .as-chat__send { border-radius: 0; }
/* WICHTIG: hidden-Sicherung. Die gescopten Regeln oben haben hoehere
   Spezifitaet und stehen NACH .as-chat[hidden]. Diese Zeile stellt
   sicher, dass der versteckte Chat versteckt bleibt. */
[data-game="astrion"] .as-chat[hidden] { display: none; }

/* Fenster (Start, Pause, Basis) in derselben Formsprache */
[data-game="astrion"] .sf-overlay__card {
    border-radius: 0;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    background: rgba(10, 12, 19, .94);
    border: 1px solid rgba(255, 255, 255, .10);
    border-top: 2px solid var(--game-accent, #ff6a3d);
}
[data-game="astrion"] .as-base__tab {
    border-radius: 0;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    text-transform: uppercase; letter-spacing: .08em; font-size: .72rem;
}
[data-game="astrion"] .as-base { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
[data-game="astrion"] .as-base::-webkit-scrollbar { width: 8px; }
[data-game="astrion"] .as-base::-webkit-scrollbar-track { background: transparent; }
[data-game="astrion"] .as-base::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
[data-game="astrion"] .as-preview,
[data-game="astrion"] .as-ship,
[data-game="astrion"] .as-upg,
[data-game="astrion"] .as-guild__row {
    border-radius: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* --- Astrion: Sektoren-Box (Klapp-Panel, 19.07.2026) -----------------
   Kleine Box MITTIG oben zwischen Gleiter (links) und Einsatz (rechts).
   Zeigt jeden Sektor als kleine Grafik. Reihenfolge per order. */
.as-hud { flex-wrap: wrap; }
.as-panel--stern { order: 2; width: auto; max-width: 250px; flex: 0 1 auto; }
.as-panel--einsatz { order: 3; }
[data-game="astrion"] .as-stern__wrap {
    display: flex; align-items: center; gap: 3px;
}
[data-game="astrion"] .as-stern {
    display: flex; align-items: flex-end; gap: 5px;
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; padding: 2px 0 5px; scroll-behavior: smooth;
    /* Kein Wischbalken (Besitzer-Wunsch): Navigation nur per Klick. */
    scrollbar-width: none; -ms-overflow-style: none;
}
[data-game="astrion"] .as-stern::-webkit-scrollbar { display: none; }
[data-game="astrion"] .as-stern__node { cursor: pointer; }
[data-game="astrion"] .as-stern__nav {
    flex: 0 0 auto; width: 18px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04); color: #c7cfdc;
    border: 1px solid rgba(255,255,255,.12);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
[data-game="astrion"] .as-stern__nav:hover { border-color: var(--game-accent, #ff6a3d); color: #fff; }
[data-game="astrion"] .as-stern__node {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    flex: 0 0 auto; opacity: .6;
}
[data-game="astrion"] .as-stern__node.is-done { opacity: .85; }
[data-game="astrion"] .as-stern__node.is-now { opacity: 1; }
[data-game="astrion"] .as-stern__tile {
    display: block; width: 46px; height: 30px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,.14);
}
[data-game="astrion"] .as-stern__node.is-now .as-stern__tile {
    border-color: var(--game-accent, #ff6a3d);
    box-shadow: 0 0 8px var(--game-accent, #ff6a3d);
}
[data-game="astrion"] .as-stern__num {
    font-size: .56rem; font-weight: 800; color: #aab3c6; font-variant-numeric: tabular-nums;
}
[data-game="astrion"] .as-stern__node.is-now .as-stern__num { color: #eef2f8; }

/* --- Astrion: Update-Shop (Item-Karten + Detail, 19.07.2026) ---------- */
[data-game="astrion"] .as-shop { display: grid; grid-template-columns: 1fr minmax(200px, 240px); gap: 12px; align-items: start; }
[data-game="astrion"] .as-shop__list { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 4px; min-width: 0; }
[data-game="astrion"] .as-shop__card { display: grid; grid-template-columns: 46px 1fr; gap: 10px; align-items: center; padding: 8px 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); border-left: 2px solid rgba(255,255,255,.12); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); cursor: pointer; text-align: left; transition: border-color .12s, background .12s; }
[data-game="astrion"] .as-shop__card:hover { background: rgba(255,255,255,.06); }
[data-game="astrion"] .as-shop__card.is-active { border-color: var(--game-accent, #ff6a3d); border-left-color: var(--game-accent, #ff6a3d); background: rgba(255,106,61,.10); }
[data-game="astrion"] .as-shop__card.is-elite { border-left-color: #8cff5c; }
[data-game="astrion"] .as-shop__ic { width: 46px; height: 46px; display: block; flex: 0 0 auto; }
[data-game="astrion"] .as-shop__ct { min-width: 0; }
[data-game="astrion"] .as-shop__cname { font-size: .82rem; font-weight: 800; color: #eef2f8; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
[data-game="astrion"] .as-shop__clvl { font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--game-accent, #ff6a3d); }
[data-game="astrion"] .as-shop__cprice { margin-top: 3px; font-size: .72rem; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 8px; }
[data-game="astrion"] .as-shop__tag, [data-game="astrion"] .as-shop__badge { font-size: .54rem; font-weight: 900; letter-spacing: .08em; padding: 1px 7px; background: #8cff5c; color: #08210a; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
[data-game="astrion"] .as-shop__detail { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: radial-gradient(circle at 50% 28%, rgba(124,200,255,.09), rgba(8,10,18,.66)); border: 1px solid rgba(255,255,255,.10); border-top: 2px solid var(--game-accent, #ff6a3d); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
[data-game="astrion"] .as-shop__preview { position: relative; display: flex; align-items: center; justify-content: center; padding: 6px 0; }
[data-game="astrion"] .as-shop__preview canvas { display: block; }
[data-game="astrion"] .as-shop__badge { position: absolute; top: 4px; right: 4px; }
[data-game="astrion"] .as-shop__badge[hidden] { display: none; }
[data-game="astrion"] .as-shop__name { font-size: 1rem; font-weight: 800; color: #fff; }
[data-game="astrion"] .as-shop__lvl { font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--game-accent, #ff6a3d); }
[data-game="astrion"] .as-shop__desc { margin: 2px 0; font-size: .76rem; color: #aab3c6; line-height: 1.35; }
[data-game="astrion"] .as-shop__price { display: flex; flex-wrap: wrap; gap: 10px; font-size: .84rem; font-weight: 800; font-variant-numeric: tabular-nums; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
[data-game="astrion"] .as-shop__buy { margin-top: 4px; width: 100%; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
[data-game="astrion"] .as-shop__buy:disabled { opacity: .5; cursor: not-allowed; }
[data-game="astrion"] .as-shop__note { margin: 0; font-size: .68rem; color: #8b94a5; }
[data-game="astrion"] .as-shop__note[hidden] { display: none; }

/* --- Astrion: Titelleiste im Taktik-Stil (19.07.2026) ------------------
   play.php bleibt unveraendert, alles laeuft ueber den Scope
   [data-game="astrion"] auf .playscene. Andere Spiele behalten ihre
   bisherige Leiste. */
[data-game="astrion"] .playbar {
    position: relative;
    background: rgba(7, 8, 13, .94);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: none; backdrop-filter: none; /* Perf */
}
[data-game="astrion"] .playbar::after { /* Akzent-Auslauf unten links */
    content: ""; position: absolute; left: 0; bottom: -1px;
    width: 140px; height: 1px;
    background: linear-gradient(90deg, var(--game-accent, #ff6a3d), transparent);
}
[data-game="astrion"] .playbar__title {
    position: relative;
    padding: 5px 10px 5px 16px;
    font-size: .78rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .3em;
    color: #eef2f8;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
[data-game="astrion"] .playbar__title::before { /* Akzent-Kerbe */
    content: ""; position: absolute; left: 8px; top: 0;
    width: 26px; height: 2px;
    background: var(--game-accent, #ff6a3d);
}
[data-game="astrion"] .playbar__exit {
    border-radius: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
}
[data-game="astrion"] .playbar__exit:hover {
    border-color: var(--game-accent, #ff6a3d);
    background: rgba(255, 255, 255, .07);
}

/* Desktop etwas groesser, gleiche Struktur */
@media (min-width: 1100px) {
    .as-hud .as-panel { width: 280px; }
    .as-hud .as-panel--einsatz { width: 256px; }
    .as-panel__wert { font-size: .9rem; }
}

/* Handy kompakt, gleiche Struktur. Beide Boxen teilen sich die Breite
   (robust auf 375px), Chat schmaler, Titelleiste enger. */
@media (max-width: 520px) {
    /* 2-Spalten-Raster: links Gleiter + Sektoren gestapelt (kein grosser
       Abstand), rechts Einsatz ueber beide Zeilen. */
    .as-hud { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; row-gap: 6px; align-items: start; }
    .as-hud .as-panel { --as-cut: 7px; width: auto; max-width: none; min-width: 0; }
    .as-panel__head { padding: 5px 7px 5px 9px; gap: 6px; }
    .as-panel__title { font-size: .52rem; letter-spacing: .12em; }
    .as-panel__wert { font-size: .72rem; }
    .as-panel__body { padding: 7px 9px 8px; gap: 5px; }
    .as-panel .as-bar__label { width: 32px; font-size: .5rem; letter-spacing: .1em; }
    .as-panel .as-bar__track { height: 7px; }
    .as-panel .as-hud__sektor { font-size: .56rem; }
    .as-row__label { font-size: .5rem; }
    .as-row__wert { font-size: .7rem; }
    .as-panel .as-min { font-size: .58rem; }
    .as-panel--funk { width: min(260px, 64vw); }
    .as-chat__log { max-height: 110px; }
    [data-game="astrion"] .playbar__title { font-size: .66rem; letter-spacing: .2em; padding: 4px 8px 4px 13px; }
    [data-game="astrion"] .playbar__exit { font-size: .64rem; padding: 6px 10px; }
    /* Basis-Fenster: alle vier Tabs muessen auf 375px passen */
    [data-game="astrion"] .as-base { padding: 20px 14px; }
    [data-game="astrion"] .as-base__tabs { flex-wrap: wrap; }
    [data-game="astrion"] .as-base__tab {
        flex: 1 1 auto; text-align: center;
        padding: 6px 8px; font-size: .62rem; letter-spacing: .04em;
    }
    /* Mineralien oben als 2x2-Raster statt schiefem Umbruch */
    [data-game="astrion"] .as-base__mins {
        display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
    }
    /* Schiffs- und Upgrade-Karten kompakter */
    [data-game="astrion"] .as-ship { padding: 8px 10px; gap: 8px; }
    [data-game="astrion"] .as-ship__canvas { width: 52px; height: 52px; }
    [data-game="astrion"] .as-ship__name { font-size: .84rem; }
    [data-game="astrion"] .as-ship__stats { font-size: .68rem; }
    [data-game="astrion"] .as-upg { padding: 8px 10px; gap: 8px; }
    /* Sektoren-Box klappt auf dem Handy in eine eigene Zeile (Gleiter
       + Einsatz bleiben oben nebeneinander). */
    /* Gleiter oben links, Sektoren direkt darunter (Zeile 2 links),
       Einsatz rechts ueber beide Zeilen. */
    .as-hud > .as-panel:first-child { grid-column: 1; grid-row: 1; }
    .as-hud .as-panel--stern { grid-column: 1; grid-row: 2; width: auto; max-width: none; }
    .as-hud .as-panel--einsatz { grid-column: 2; grid-row: 1 / span 2; }
    [data-game="astrion"] .as-stern { max-width: none; }
    /* Shop: Detail stapelt unter die Liste und klebt unten. */
    [data-game="astrion"] .as-shop { grid-template-columns: 1fr; }
    [data-game="astrion"] .as-shop__list { max-height: none; padding-right: 0; }
    [data-game="astrion"] .as-shop__detail { position: sticky; bottom: 0; z-index: 2; background: rgba(10,12,19,.97); }
    [data-game="astrion"] .as-shop__card { padding: 7px 9px; gap: 8px; }
    [data-game="astrion"] .as-shop__ic { width: 40px; height: 40px; }
}

/* =====================================================================
   ASTRION · HUD als Icon-Leiste (23.07.2026)
   Frueher lagen bis zu vier Panels dauerhaft oben und verstellten die
   Sicht. Jetzt steht oben links nur eine schmale Icon-Reihe; jedes Icon
   blendet seine Box animiert ein und wieder aus. EINE Spalte fuer alle
   Geraete - ersetzt das alte Zeilen-/Raster-Layout. Steht bewusst hinter
   den Media-Queries, damit es deren Breiten-/Grid-Regeln per Reihenfolge
   sicher ueberschreibt.
   ===================================================================== */
.as-hud {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; justify-content: flex-start;
    gap: 8px; right: auto; width: min(300px, 82vw);
}

/* Icon-Reihe: das Einzige, was dauerhaft oben steht */
.as-tabs { display: flex; flex-wrap: wrap; gap: 6px; pointer-events: auto; }
.as-tab {
    --as-cut: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; margin: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(9, 11, 17, .66);
    color: #aab3c6; cursor: pointer; -webkit-tap-highlight-color: transparent;
    clip-path: polygon(var(--as-cut) 0, 100% 0, 100% calc(100% - var(--as-cut)),
        calc(100% - var(--as-cut)) 100%, 0 100%, 0 var(--as-cut));
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.as-tab svg { width: 20px; height: 20px; display: block; }
.as-tab:hover { color: #eef2f8; border-color: rgba(255, 255, 255, .24); }
.as-tab.is-an { color: #140905; background: var(--game-accent, #ff6a3d); border-color: transparent; }

/* Box faehrt beim Einblenden herunter, beim Ausblenden wieder zu.
   is-anim kommt erst nach dem ersten Zeichnen dazu (Engine), damit die
   Standard-zu-Boxen beim Laden nicht kurz aufblitzen. */
.as-panel { overflow: hidden; max-height: 360px; transform-origin: top center; }
.as-panel.is-anim {
    transition: max-height .3s ease, opacity .22s ease,
                transform .22s ease, margin-top .22s ease;
}
.as-hud .as-panel { width: 100%; max-width: none; order: 0; }
.as-panel--funk { max-height: 600px; }        /* Chat darf hoeher werden */
.as-panel.is-zu {
    max-height: 0; margin-top: -8px; opacity: 0;
    transform: translateY(-6px); pointer-events: none; border-color: transparent;
}
.as-panel.is-zu::before { opacity: 0; }
.as-panel.is-zu .as-panel__body { display: flex; }  /* alte display:none aufheben: ganze Box kollabiert */

/* Warnung, wenn ein Lauf nicht starten kann (Anmeldung abgelaufen o. ae.):
   mittig oben, damit der Spieler es sicher sieht. */
.as-warn {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    z-index: 8; max-width: 82vw; pointer-events: auto;
    padding: 8px 14px; border: 1px solid #ff6a6a;
    background: rgba(40, 10, 10, .92); color: #ffd7d7;
    font-size: .82rem; font-weight: 700; text-align: center; border-radius: 8px;
}
.as-warn[hidden] { display: none; }

@media (max-width: 520px) {
    .as-hud { width: min(280px, 82vw); }
    .as-tab { width: 34px; height: 34px; }
    .as-tab svg { width: 18px; height: 18px; }
    .as-hud .as-panel { --as-cut: 7px; }
}

/* =====================================================================
   ÖFFENTLICHE KRISENHILFE (/krisenhilfe)
   ---------------------------------------------------------------------
   Eigene, gescopte Klassen im Stil des Anlaufstellen-Moduls (Flaeche =
   --c-surface, Rand = --c-border, ruhige Radien). Die Seite ist oeffentlich
   und laeuft im Basis-Layout, sie darf deshalb nichts von .anl- erben.

   GESTALTUNGSREGELN
   1. Kein Alarm-Rot ueber die ganze Seite. Nur der Notruf-Block traegt Rot,
      damit Rot etwas bedeutet und nicht zur Tapete wird.
   2. Jede Nummer ist ein Knopf mit mindestens 44 Pixel Hoehe. Diese Seite
      wird auf dem Handy geoeffnet, oft mit zittrigen Haenden.
   3. Farbe sagt nie allein etwas aus. "Gerade nicht besetzt" steht als Text
      da, nicht als roter Punkt.
   ===================================================================== */
.kh-seite {
    --kh-r:    14px;
    --kh-r-sm: 10px;
    padding: var(--space-7) 0 var(--space-8);
}
.kh-inhalt {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.kh-seite h1, .kh-seite h2, .kh-seite h3 { margin: 0; font-weight: 600; }
.kh-seite :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* --- 1. Kopf ---------------------------------------------------------- */
.kh-kopf { display: flex; align-items: flex-start; gap: 15px; }
.kh-kopf__mark {
    width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: rgba(109, 211, 255, .13);
    border: 1px solid rgba(109, 211, 255, .3);
    color: var(--c-accent);
}
.kh-kopf h1 { font-size: 1.62rem; letter-spacing: -.015em; }
.kh-kopf__lead { color: var(--c-text-muted); margin: 5px 0 0; font-size: .96rem; max-width: 62ch; }

/* --- 2. Notruf --------------------------------------------------------
   Der einzige rote Block der Seite. Bewusst nicht klappbar: wer akut in
   Gefahr ist, soll nichts oeffnen muessen, bevor die Nummer dasteht. */
.kh-notruf {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-danger);
    border-radius: 0 var(--kh-r) var(--kh-r) 0;
    padding: 18px 20px;
}
.kh-notruf__t {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 14px; font-size: .95rem; font-weight: 600; color: var(--c-text);
}
.kh-notruf__t > svg { color: var(--c-danger); flex: 0 0 auto; }
.kh-notruf__nrn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kh-notruf__nr {
    display: flex; flex-direction: column; gap: 2px; min-height: 60px;
    justify-content: center; padding: 10px 16px;
    background: rgba(248, 99, 90, .1);
    border: 1px solid rgba(248, 99, 90, .38);
    border-radius: var(--kh-r-sm);
    color: var(--c-text); text-decoration: none;
    transition: background .15s, border-color .15s;
}
.kh-notruf__nr:hover { background: rgba(248, 99, 90, .18); border-color: var(--c-danger); }
.kh-notruf__nr b { font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.kh-notruf__nr span { font-size: .8rem; color: var(--c-text-muted); }
.kh-notruf__f { margin: 14px 0 0; font-size: .87rem; color: var(--c-text-muted); }

/* --- 3. Bloecke -------------------------------------------------------- */
.kh-block { display: flex; flex-direction: column; gap: 16px; }
.kh-block__kopf h2 { font-size: 1.12rem; }
.kh-block__s { color: var(--c-text-muted); font-size: .89rem; margin: 5px 0 0; max-width: 68ch; }
.kh-block__s a {
    /* Etwas Luft drumherum: die Nummer steht mitten im Satz, soll sich auf
       dem Handy aber trotzdem treffen lassen. */
    display: inline-block; padding: 2px 6px; margin: 0 1px;
    background: rgba(109, 211, 255, .1); border-radius: 6px;
    color: var(--c-accent); text-decoration: none; font-variant-numeric: tabular-nums;
}
.kh-block__s a:hover { background: rgba(109, 211, 255, .18); }

/* auto-fill statt fester Spaltenzahl: auf breiten Bildschirmen entstehen
   mehr Karten je Reihe, nicht groessere. */
.kh-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }

/* --- 4. Karte ---------------------------------------------------------- */
.kh-karte {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--kh-r);
    padding: 16px 17px;
}
.kh-karte__kopf { display: flex; align-items: center; gap: 11px; }
.kh-karte__mark {
    width: 34px; height: 34px; border-radius: var(--kh-r-sm); flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    color: var(--c-accent);
}
.kh-karte__n { font-size: .97rem; line-height: 1.3; }
.kh-karte__fuer { color: var(--c-text-muted); font-size: .87rem; margin: 0; }

/* Nummern als Knoepfe. Mehrere Nummern derselben Stelle stehen
   gleichberechtigt nebeneinander, es gibt keine "Hauptnummer": bei der
   TelefonSeelsorge sind alle drei gleich richtig. */
.kh-nrn { display: flex; flex-wrap: wrap; gap: 8px; }
.kh-nr {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 8px 14px;
    background: rgba(109, 211, 255, .1);
    border: 1px solid rgba(109, 211, 255, .28);
    border-radius: var(--radius-pill);
    color: var(--c-accent); text-decoration: none;
    font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums;
    transition: background .15s, border-color .15s;
}
.kh-nr:hover { background: rgba(109, 211, 255, .18); border-color: var(--c-accent); }
.kh-nr > svg { flex: 0 0 auto; }

.kh-web { margin: 0; }
.kh-web a {
    display: inline-flex; align-items: center; gap: 7px; min-height: 32px;
    color: var(--c-text-muted); text-decoration: none; font-size: .85rem;
}
.kh-web a:hover { color: var(--c-accent); text-decoration: underline; }
.kh-web svg { flex: 0 0 auto; }

.kh-karte__fuss {
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid var(--c-border-soft);
    display: flex; flex-direction: column; gap: 5px;
}
.kh-wann { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: .84rem; color: var(--c-text); }
.kh-wann > svg { flex: 0 0 auto; margin-top: 2px; color: var(--c-text-dim); }
/* Gedaempft, nicht rot: das ist eine Information, keine Warnung. Die
   Alternative steht direkt darueber in der Blockeinleitung. */
.kh-zu { margin: 0; font-size: .82rem; color: var(--c-warn); }
.kh-hinweis { margin: 0; font-size: .8rem; color: var(--c-text-dim); }

/* --- 5. Schluss -------------------------------------------------------- */
.kh-fuss {
    background: var(--c-glass);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--kh-r);
    padding: 18px 20px;
}
.kh-fuss p { margin: 0 0 10px; font-size: .88rem; color: var(--c-text-muted); }
.kh-fuss p:last-child { margin-bottom: 0; }
.kh-fuss strong { color: var(--c-text); }
.kh-fuss a { color: var(--c-accent); text-decoration: none; }
.kh-fuss a:hover { text-decoration: underline; }
.kh-fuss__stand { font-size: .8rem !important; color: var(--c-text-dim) !important; }

/* --- Handy ------------------------------------------------------------- */
@media (max-width: 560px) {
    .kh-inhalt { gap: 32px; }
    .kh-kopf__mark { display: none; }   /* Platz fuer die Ueberschrift */
    .kh-notruf__nrn { grid-template-columns: 1fr; }
    .kh-liste { grid-template-columns: 1fr; }
    .kh-nr { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   LIVE-SUPPORT-FENSTER (sw-) – kleines Chatfenster mit Bot
   ---------------------------------------------------------------------
   Liegt einmal im Dashboard-Layout. Unten rechts als Fenster, auf dem
   Handy als volle Flaeche.

   WARUM DER RUNDE KNOPF NICHT IMMER DA IST
   Er erscheint nur bei laufendem Gespraech. Ein dauerhaft schwebender
   Hilfe-Knopf auf einer Plattform fuer psychische Gesundheit wird
   schnell mit Krisenhilfe verwechselt, und die steht woanders und ist
   etwas ganz anderes. Angefangen wird auf /support.

   Der Knopf sitzt ueber der mobilen Fussleiste (.m-bottomnav) und unter
   den Vollbild-Overlays. Hoechster z-index sonst im Haus: 960.
   ===================================================================== */
.sw {
    --sw-r: 16px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 940;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;          /* nur die Kinder sind anklickbar */
}
.sw > * { pointer-events: auto; }
.sw[hidden] { display: none; }

/* --- Runder Knopf ------------------------------------------------------ */
.sw-knubbel {
    position: relative;
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 48px; padding: 12px 18px; cursor: pointer;
    background: var(--c-gradient-cta); border: 0;
    border-radius: var(--radius-pill);
    color: #0d1117; font: inherit; font-size: .9rem; font-weight: 700;
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.sw-knubbel:hover { filter: brightness(1.06); }
.sw-knubbel[hidden] { display: none; }
.sw-knubbel__ic { display: inline-flex; }
.sw-knubbel__ic svg { width: 20px; height: 20px; }
.sw-knubbel__punkt {
    position: absolute; top: 6px; right: 8px;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--c-danger); border: 2px solid var(--c-bg);
}
.sw-knubbel__punkt[hidden] { display: none; }

/* Meldet sich das Team, wird der ganze Knopf rot und die Beschriftung
   wechselt auf "Neue Antwort". Farbe allein sagt hier nichts: wer Rot nicht
   von Blau unterscheiden kann, liest den Text. */
.sw-knubbel--neu {
    background: var(--c-danger);
    color: #1a0f0f;
    box-shadow: 0 10px 26px rgba(248, 99, 90, .4);
}
.sw-knubbel--neu .sw-knubbel__punkt { background: #fff; }
@media (prefers-reduced-motion: no-preference) {
    .sw-knubbel--neu { animation: sw-melden 1.6s ease-out 3; }
}
@keyframes sw-melden {
    0%   { transform: scale(1); }
    12%  { transform: scale(1.06); }
    24%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* --- Fenster ----------------------------------------------------------- */
/* Feste, grosszuegige Groesse statt "so hoch wie der Inhalt". Ein Chatfenster,
   das bei jeder Nachricht seine Hoehe aendert, ist unruhig, und beim Tippen
   sprang der Rand vorher hin und her. Der Knopf ist waehrenddessen weg (siehe
   support-widget.js), das Fenster darf seinen Platz also ganz nutzen. */
.sw-fenster {
    display: flex; flex-direction: column;
    width: min(400px, calc(100vw - 32px));
    height: min(640px, calc(100vh - 40px));
    max-height: calc(100vh - 40px);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--sw-r);
    box-shadow: 0 24px 64px rgba(0,0,0,.55);
    overflow: hidden;
}
.sw-fenster[hidden] { display: none; }

.sw-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 14px;
    background: var(--c-surface-2);
    border-bottom: 1px solid var(--c-border);
}
.sw-kopf__wer { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sw-kopf__logo {
    width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: rgba(109, 211, 255, .13); border: 1px solid rgba(109, 211, 255, .3);
}
.sw-kopf__t { margin: 0; font-size: .95rem; font-weight: 600; color: var(--c-text); }
/* Anwesenheit steht als TEXT da, nicht nur als Punkt: "gerade niemand da"
   muss man lesen koennen, nicht erraten. */
.sw-kopf__da { margin: 1px 0 0; font-size: .76rem; color: var(--c-text-dim); }
.sw-kopf__da::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
    border-radius: 50%; background: #5a6579; vertical-align: middle;
}
.sw-kopf__da--an { color: var(--c-success); }
.sw-kopf__da--an::before { background: var(--c-success); }
.sw-kopf__aktionen { display: flex; gap: 4px; flex: 0 0 auto; }
.sw-kopf__ic {
    flex: 0 0 auto; width: 36px; height: 36px; cursor: pointer;
    display: grid; place-items: center;
    background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--c-text-muted);
}
.sw-kopf__ic:hover { color: var(--c-text); border-color: var(--c-border); }
.sw-kopf__ic svg { grid-area: 1 / 1; }
/* Ton an: durchgestrichenes Symbol aus. Ton aus: umgekehrt. */
.sw-kopf__ic .sw-ton-aus { display: none; }
.sw-kopf__ic.is-aus .sw-ton-an  { display: none; }
.sw-kopf__ic.is-aus .sw-ton-aus { display: block; color: var(--c-text-dim); }

/* --- Koerper ----------------------------------------------------------- */
.sw-koerper {
    flex: 1 1 auto; overflow-y: auto;
    padding: 14px; display: flex; flex-direction: column; gap: 9px;
    min-height: 0;      /* darf schrumpfen, scrollt dann statt zu ueberlaufen */
}

.sw-z { display: flex; }
.sw-z--nutzer { justify-content: flex-end; }
.sw-z--system { justify-content: center; }
.sw-b {
    max-width: 86%; padding: 9px 12px;
    border-radius: 13px; border: 1px solid var(--c-border);
    background: var(--c-surface-2);
}
.sw-z--nutzer .sw-b {
    background: rgba(109, 211, 255, .12); border-color: rgba(109, 211, 255, .3);
    border-bottom-right-radius: 4px;
}
.sw-z--team .sw-b { border-bottom-left-radius: 4px; }
.sw-b__x { margin: 0; font-size: .88rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sw-b__t { display: block; margin-top: 3px; font-size: .68rem; color: var(--c-text-dim); font-variant-numeric: tabular-nums; }
.sw-sys {
    margin: 0; padding: 3px 11px; text-align: center;
    font-size: .75rem; color: var(--c-text-dim);
    background: var(--c-glass); border-radius: var(--radius-pill);
}

/* Themen und Fragen als volle Knoepfe: gross genug fuers Handy, und man
   sieht auf einen Blick, dass man tippen kann. */
.sw-thema {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 11px 13px; min-height: 44px;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: 11px; color: var(--c-text);
    font: inherit; font-size: .86rem; line-height: 1.4;
}
.sw-thema:hover { border-color: var(--c-accent); color: var(--c-accent); }

.sw-wahl { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.sw-wahl__k {
    flex: 1 1 auto; cursor: pointer;
    padding: 9px 13px; min-height: 40px;
    background: none; border: 1px solid var(--c-border);
    border-radius: var(--radius-pill); color: var(--c-text-muted);
    font: inherit; font-size: .82rem; font-weight: 600;
}
.sw-wahl__k:hover { color: var(--c-text); border-color: var(--c-accent); }
/* Der Weg zum Menschen ist immer der hervorgehobene Knopf. Er wird nie
   versteckt und nie kleiner als die anderen. */
.sw-wahl__k--haupt {
    background: rgba(109, 211, 255, .13); border-color: rgba(109, 211, 255, .4); color: var(--c-accent);
}
.sw-wahl__k--haupt:hover { background: rgba(109, 211, 255, .22); }

.sw-link {
    display: inline-block; align-self: flex-start;
    padding: 8px 13px; min-height: 40px; line-height: 24px;
    background: var(--c-surface-2); border: 1px solid var(--c-border);
    border-radius: var(--radius-pill);
    color: var(--c-accent); text-decoration: none; font-size: .83rem; font-weight: 600;
}
.sw-link:hover { border-color: var(--c-accent); }

.sw-uebergabe { display: flex; flex-direction: column; gap: 8px; }
.sw-fehler { margin: 0; font-size: .8rem; color: var(--c-danger); }
.sw-warte {
    margin: 4px 0 0; padding: 9px 12px; font-size: .8rem; color: var(--c-text-muted);
    background: var(--c-glass); border: 1px dashed var(--c-border); border-radius: 11px;
}
.sw-ende { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.sw-ende p { margin: 0; font-size: .85rem; color: var(--c-text-muted); }

/* --- Fuss -------------------------------------------------------------- */
.sw-fuss { border-top: 1px solid var(--c-border); padding: 10px 12px; background: var(--c-surface-2); }
.sw-fuss[hidden] { display: none; }
.sw-senden { display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.sw-feld {
    flex: 1 1 auto; min-width: 0; resize: none; overflow-y: auto;
    padding: 10px 12px; min-height: 42px; max-height: 90px;
    background: var(--c-bg); border: 1px solid var(--c-border);
    border-radius: 12px; color: var(--c-text);
    font: inherit; font-size: .88rem; line-height: 1.45;
}
.sw-feld:focus { border-color: var(--c-accent); outline: none; }
.sw-feld--gross { max-height: none; min-height: 76px; resize: vertical; }
.sw-ab {
    flex: 0 0 auto; width: 42px; height: 42px; cursor: pointer;
    display: grid; place-items: center;
    background: var(--c-gradient-cta); border: 0; border-radius: 12px; color: #0d1117;
}
.sw-ab:hover { filter: brightness(1.06); }
.sw-ab[disabled] { opacity: .5; cursor: default; }
.sw-fuss__h { margin: 8px 0 0; font-size: .72rem; color: var(--c-text-dim); }
.sw-fuss__h a { color: var(--c-accent); text-decoration: none; }
.sw-fuss__h a:hover { text-decoration: underline; }

.sw :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* --- Handy: volle Flaeche ---------------------------------------------- */
/* 767px und darunter zeigt malu-mobile.css Topbar und Fussleiste. Genau dort
   muss der Knopf hoeher sitzen und das Fenster die volle Flaeche nehmen. Die
   Grenze war vorher 560px: auf einem 700px breiten Tablet lag der Knopf damit
   mitten auf der Fussleiste. */
@media (max-width: 767px) {
    /* Ueber der mobilen Fussleiste bleiben (60px + Home-Indicator). */
    .sw { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px) + 62px); }
    .sw-fenster {
        position: fixed; inset: 0;
        width: 100vw; height: 100dvh; max-height: none;
        border: 0; border-radius: 0;
    }
    .sw-koerper { padding: 14px 12px; }
    .sw-b { max-width: 92%; }
    .sw-fuss { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* --- FAQ-Gruppen (dieselbe Wissensliste, oeffentliche Seite) ------------ */
.faq-gruppe + .faq-gruppe { margin-top: var(--space-6); }
.faq-gruppe__t {
    font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--c-text-dim); margin: 0 0 var(--space-3);
}
.faq-item__link { color: var(--c-accent); text-decoration: none; font-weight: 600; }
.faq-item__link:hover { text-decoration: underline; }

/* Live-Kennzeichen in der Warteschlange der Konsole */
.tsc-live {
    display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill);
    font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    background: rgba(67,233,123,.15); color: var(--c-success); border: 1px solid rgba(67,233,123,.45);
}

/* =====================================================================
   SUPPORT-BEWERTUNG (Update 058)
   ---------------------------------------------------------------------
   Drei Orte, ein Stern:
     .tsb-s    Anzeige-Stern (Auswertung und Konsole)
     .tsu-*    Formular auf der Ticketseite, OHNE Skript bedienbar
     .sw-*     Sterne im Live-Fenster

   Das Formular auf der Ticketseite arbeitet mit fuenf Radiofeldern in
   UMGEKEHRTER Reihenfolge im Markup und row-reverse im Layout. Dadurch
   faerbt "input:checked ~ label" genau die Sterne 1 bis N ein, ganz ohne
   Skript. Wer kein JavaScript hat, kann trotzdem bewerten.
   ===================================================================== */

/* --- Anzeige-Sterne ---------------------------------------------------- */
/* Leerer Stern mit festem, sichtbarem Ton. var(--c-border) kam auf dem
   dunklen Grund bei knapp 7 Prozent Weiss heraus, da sah man nicht mehr,
   dass ueberhaupt fuenf Sterne zum Antippen dastehen. */
.tsb-s { color: #5a6579; font-size: 1.05em; line-height: 1; }
.tsb-s--an { color: var(--c-warn); }

/* --- Auswertungsseite -------------------------------------------------- */
.tsb { width: 100%; max-width: 980px; }
.tsb h1, .tsb h2 { margin: 0; font-weight: 600; }
.tsb :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.tsb-kopf {
    display: flex; flex-wrap: wrap; gap: 12px 20px;
    align-items: flex-start; justify-content: space-between; margin-bottom: 20px;
}
.tsb-kopf h1 { font-size: 1.5rem; letter-spacing: -.015em; margin-top: 4px; }
.tsb-kopf__lead { color: var(--c-text-muted); margin: 3px 0 0; font-size: .89rem; }
.tsb-zurueck {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
    color: var(--c-text-muted); text-decoration: none; font-size: .86rem;
}
.tsb-zurueck:hover { color: var(--c-text); }
.tsb-zeitraum { display: flex; flex-wrap: wrap; gap: 5px; }
.tsb-zeitraum__t {
    display: inline-flex; align-items: center; min-height: 38px; padding: 7px 13px;
    border: 1px solid var(--c-border); border-radius: var(--radius-pill);
    background: var(--c-surface); color: var(--c-text-muted);
    text-decoration: none; font-size: .84rem;
}
.tsb-zeitraum__t:hover { color: var(--c-text); border-color: var(--c-accent); }
.tsb-zeitraum__t.is-aktiv { background: rgba(109,211,255,.12); border-color: var(--c-accent); color: var(--c-accent); }

.tsb-zahlen { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
@media (min-width: 820px) { .tsb-zahlen { grid-template-columns: 1.1fr 1fr 1fr; } }
.tsb-karte {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 14px; padding: 18px 20px;
}
.tsb-karte__t { margin: 0 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
                text-transform: uppercase; color: var(--c-text-dim); }
.tsb-karte__u { margin: 8px 0 0; font-size: .84rem; color: var(--c-text-muted); }
/* Warum-Zeile: erklaert die Zahl statt sie nur hinzustellen. */
.tsb-karte__warum { margin: 10px 0 0; font-size: .78rem; color: var(--c-text-dim); line-height: 1.5; }
.tsb-gross { margin: 0; font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--c-text); font-variant-numeric: tabular-nums; }
.tsb-gross span { font-size: .95rem; font-weight: 500; color: var(--c-text-dim); margin-left: 8px; }
.tsb-gross--leer { color: var(--c-text-dim); }
.tsb-mittel { margin: 0; font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--c-text); font-variant-numeric: tabular-nums; }
.tsb-sterne { margin: 8px 0 0; font-size: 1.2rem; letter-spacing: 2px; }
.tsb-sterne--klein { font-size: .95rem; letter-spacing: 1px; }

.tsb-balken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tsb-balken li { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--c-text-muted); }
.tsb-balken__n { width: 34px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tsb-balken__spur { flex: 1 1 auto; height: 8px; background: var(--c-surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.tsb-balken__voll { display: block; height: 100%; background: var(--c-warn); border-radius: var(--radius-pill); }
.tsb-balken__z { width: 26px; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; color: var(--c-text); }

.tsb-stimmen h2 { font-size: 1.1rem; }
.tsb-stimmen__s { color: var(--c-text-muted); font-size: .85rem; margin: 5px 0 16px; max-width: 70ch; }
.tsb-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .tsb-liste { grid-template-columns: 1fr 1fr; } }
.tsb-stimme {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 12px; padding: 13px 15px;
}
.tsb-stimme__k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 7px; }
.tsb-stimme__m { font-size: .76rem; color: var(--c-text-dim); }
.tsb-stimme__x { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--c-text); }
.tsb-stimme__x--leer { color: var(--c-text-dim); font-style: italic; }
.tsb-stimme__b { margin: 8px 0 0; font-size: .76rem; color: var(--c-text-dim); }
.tsb-leer {
    padding: 26px 20px; text-align: center; color: var(--c-text-muted); font-size: .89rem;
    border: 1px dashed var(--c-border); border-radius: 12px;
}
.tsb-fuss {
    margin: 26px 0 0; padding: 15px 18px; font-size: .82rem; line-height: 1.6;
    color: var(--c-text-muted);
    background: var(--c-glass); border: 1px solid var(--c-border-soft); border-radius: 12px;
}
.tsb-fuss strong { color: var(--c-text); }

/* --- In der Konsole am Ticket ------------------------------------------ */
.tsc-kopf__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tsc-note { display: inline-flex; align-items: center; gap: 3px; letter-spacing: 1px; }
.tsc-note__t { margin-left: 6px; font-size: .72rem; color: var(--c-text-dim); letter-spacing: 0; }
.tsc-notetext {
    margin: 10px 0 0; padding: 9px 13px; font-size: .85rem; line-height: 1.55;
    color: var(--c-text-muted);
    background: var(--c-glass); border-left: 2px solid var(--c-warn); border-radius: 0 8px 8px 0;
}

/* --- Formular auf der Ticketseite (ohne Skript bedienbar) --------------- */
.tsu-bew {
    margin: 16px 0 0; padding: 16px 18px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px;
}
.tsu-bew__f { margin: 0 0 10px; font-size: .95rem; font-weight: 600; color: var(--c-text); }
.tsu-sterne { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: 12px; }
.tsu-stern__r { position: absolute; opacity: 0; width: 0; height: 0; }
.tsu-stern {
    cursor: pointer; padding: 4px 3px; font-size: 1.9rem; line-height: 1;
    color: #5a6579; transition: color .12s;
}
/* Der angeklickte Stern UND alle danach im Markup (= kleinere Werte). */
.tsu-stern__r:checked ~ .tsu-stern { color: var(--c-warn); }
.tsu-sterne:hover .tsu-stern { color: #5a6579; }
.tsu-stern:hover, .tsu-stern:hover ~ .tsu-stern { color: var(--c-warn) !important; }
.tsu-stern__r:focus-visible + .tsu-stern { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }
.tsu-bew textarea { margin-top: 4px; }
.tsu-bew__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.tsu-bew__h { font-size: .78rem; color: var(--c-text-dim); }

/* --- Sterne im Live-Fenster -------------------------------------------- */
.sw-bew { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sw-bew__f { margin: 0; font-size: .88rem; font-weight: 600; color: var(--c-text); }
.sw-sterne { display: flex; gap: 2px; }
.sw-stern {
    background: none; border: 0; cursor: pointer; padding: 4px 3px;
    font-size: 1.7rem; line-height: 1; color: #5a6579; transition: color .12s;
}
.sw-stern.is-an { color: var(--c-warn); }
.sw-dank {
    margin: 6px 0 0; padding: 9px 12px; font-size: .84rem; color: var(--c-text-muted);
    background: var(--c-glass); border-radius: 11px; text-align: center;
}

/* --- Astrion: Hüllen-Warnchip (Phase 0.2, 25.07.2026) ------------------
   Steht bewusst am Dateiende im Astrion-Scope. Sanfter Puls, kein
   Stroboskop; bei reduzierter Bewegung (OS oder In-App) steht er still. */
[data-game="astrion"] .as-hullwarn {
    position: absolute; left: 50%; top: 58px; transform: translateX(-50%);
    z-index: 7; pointer-events: none;
    padding: 6px 16px;
    background: rgba(62, 14, 10, 0.78);
    border: 1px solid rgba(255, 92, 60, 0.6);
    color: #ffd2c2;
    font: 700 12px/1.2 system-ui, sans-serif;
    letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    animation: as-hullwarn-puls 1.7s ease-in-out infinite;
}
[data-game="astrion"] .as-hullwarn[hidden] { display: none; }
[data-game="astrion"] .as-hullwarn.is-krit {
    background: rgba(84, 10, 6, 0.85);
    border-color: #ff5c3c;
    color: #ffe0d6;
    animation-duration: 1.1s;
}
@keyframes as-hullwarn-puls {
    0%, 100% { opacity: 0.82; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    [data-game="astrion"] .as-hullwarn { animation: none; }
}
body.malu-reduced-motion [data-game="astrion"] .as-hullwarn { animation: none; }

/* --- Astrion: Lautstärke-Regler im Pause-Fenster (0.2 Punkt 5) --------- */
[data-game="astrion"] .as-laut {
    display: flex; flex-direction: column; gap: 10px;
    margin: 14px 0 18px; text-align: left;
}
[data-game="astrion"] .as-laut__zeile {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
}
[data-game="astrion"] .as-laut__name {
    width: 64px; flex: 0 0 auto;
    font: 700 12px/1.2 system-ui, sans-serif;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--c-text-muted);
}
[data-game="astrion"] .as-laut input[type="range"] {
    flex: 1; min-width: 140px;
    accent-color: var(--game-accent, #ff6a3d);
}

/* --- Astrion: Mitarbeiter-Testmodus (Update 063) ---------------------
   Nur sichtbar, wenn der Server das Recht bestätigt hat (Markup wird
   sonst gar nicht gerendert). Klar als Test gekennzeichnet. */
[data-game="astrion"] .as-dbg__toggle {
    position: absolute; left: 12px; bottom: 12px; z-index: 8;
    padding: 6px 12px;
    background: #7a1fa2; border: 1px solid #c77bff; color: #fff;
    font: 800 11px/1 system-ui, sans-serif; letter-spacing: 0.12em;
    border-radius: 8px; cursor: pointer;
}
[data-game="astrion"] .as-dbg {
    position: absolute; left: 12px; bottom: 48px; z-index: 9;
    width: min(300px, 88vw); max-height: 76vh; overflow-y: auto;
    padding: 12px 14px;
    background: rgba(18, 10, 26, 0.96);
    border: 1px solid #7a1fa2; border-radius: 12px;
    color: var(--c-text); font-size: 0.82rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
[data-game="astrion"] .as-dbg[hidden] { display: none; }
/* In-Game Mod-Tool (Update 066): „MOD"-Knopf neben TEST, eigenes Panel. */
[data-game="astrion"] .as-mod__toggle {
    position: absolute; left: 74px; bottom: 12px; z-index: 8;
    padding: 6px 12px;
    background: #0e5a4f; border: 1px solid #2fd6b6; color: #fff;
    font: 800 11px/1 system-ui, sans-serif; letter-spacing: 0.12em;
    border-radius: 8px; cursor: pointer;
}
[data-game="astrion"] .as-mod {
    position: absolute; left: 12px; bottom: 48px; z-index: 9;
    width: min(320px, 88vw); max-height: 70vh; overflow-y: auto;
    padding: 12px 14px;
    background: rgba(8, 20, 18, 0.96);
    border: 1px solid #0e5a4f; border-radius: 12px;
    color: var(--c-text); font-size: 0.82rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
[data-game="astrion"] .as-mod[hidden] { display: none; }
[data-game="astrion"] .as-mod__head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
[data-game="astrion"] .as-mod__title { font-weight: 800; letter-spacing: .04em; }
[data-game="astrion"] .as-mod__hint { font-size: .72rem; color: #9aa3b5; margin: 0 0 8px; }
[data-game="astrion"] .as-mod__leer { font-size: .78rem; color: #9aa3b5; margin: 4px 0; }
[data-game="astrion"] .as-mod__row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 2px; border-top: 1px solid rgba(255, 255, 255, .06);
}
[data-game="astrion"] .as-mod__name { font-size: .8rem; color: #dfe7f0; }
[data-game="astrion"] .as-mod__act {
    border: 1px solid rgba(47, 214, 182, .4); background: transparent; color: #7fe6d2;
    cursor: pointer; border-radius: 6px; padding: 3px 9px; font-size: .9rem;
}
[data-game="astrion"] .as-mod__act:hover { background: rgba(47, 214, 182, .15); }
[data-game="astrion"] .as-dbg__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
[data-game="astrion"] .as-dbg__title {
    font: 800 12px/1 system-ui, sans-serif; letter-spacing: 0.1em;
    text-transform: uppercase; color: #d7a8ff;
}
[data-game="astrion"] .as-dbg__grp { margin: 10px 0; }
[data-game="astrion"] .as-dbg__lbl {
    display: block; margin-bottom: 5px;
    font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--c-text-muted);
}
[data-game="astrion"] .as-dbg__lbl2 { margin-right: 6px; color: var(--c-text-muted); font-size: 0.76rem; }
[data-game="astrion"] .as-dbg__row {
    display: flex; align-items: center; gap: 8px; margin: 5px 0;
}
[data-game="astrion"] .as-dbg__row--test {
    padding: 8px; margin-bottom: 6px;
    background: rgba(199,123,255,0.12); border-radius: 8px;
    align-items: flex-start;
}
[data-game="astrion"] .as-dbg__seg { display: flex; align-items: center; margin: 5px 0; flex-wrap: wrap; gap: 4px; }
[data-game="astrion"] .as-dbg__sekt,
[data-game="astrion"] .as-dbg__spawn { display: flex; flex-wrap: wrap; gap: 4px; }
[data-game="astrion"] .as-dbg button:not(.sf-hud__btn):not(.btn),
[data-game="astrion"] .as-dbg__toggle {
    -webkit-appearance: none; appearance: none;
}
[data-game="astrion"] .as-dbg__seg button,
[data-game="astrion"] .as-dbg__sekt button,
[data-game="astrion"] .as-dbg__spawn button {
    padding: 4px 9px; min-width: 30px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
    color: var(--c-text); border-radius: 6px; cursor: pointer;
    font-size: 0.78rem;
}
[data-game="astrion"] .as-dbg__seg button.is-active {
    background: #7a1fa2; border-color: #c77bff; color: #fff;
}
[data-game="astrion"] .as-dbg__mins { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
[data-game="astrion"] .as-dbg__mins label { display: flex; align-items: center; gap: 3px; font-size: 0.82rem; }
[data-game="astrion"] .as-dbg__mins input {
    width: 78px; padding: 3px 6px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
    color: var(--c-text); border-radius: 6px;
}
[data-game="astrion"] .as-dbg__acts { display: flex; flex-direction: column; gap: 5px; }
[data-game="astrion"] .as-dbg__cmp {
    font-size: 0.72rem; line-height: 1.5; color: var(--c-text-muted);
    word-break: break-word; margin-bottom: 5px;
}
[data-game="astrion"] .as-dbg__note {
    margin: 8px 0 0; padding: 6px 8px; font-size: 0.78rem;
    background: rgba(124,200,255,0.1); border-radius: 6px; color: #bfe6ff;
}
[data-game="astrion"] .as-dbg__note[hidden] { display: none; }

/* --- Astrion: Waffen-Vergleich (0.3, Update 064) --------------------- */
[data-game="astrion"] .as-wvgl {
    display: flex; flex-direction: column; gap: 3px; margin: 8px 0;
}
[data-game="astrion"] .as-wvgl__row {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.82rem;
}
[data-game="astrion"] .as-wvgl__lab { color: var(--c-text-muted); }
[data-game="astrion"] .as-wvgl__val { font-weight: 700; color: var(--c-text); }
[data-game="astrion"] .as-wvgl__val.is-plus { color: #7cff9a; }
[data-game="astrion"] .as-wvgl__val.is-minus { color: #ff8f6a; }

/* --- Astrion: Reaktor-Zielkonflikt (0.3, Update 065) ------------------ */
[data-game="astrion"] .as-rkvgl {
    display: flex; flex-direction: column; gap: 4px; margin: 8px 0;
}
[data-game="astrion"] .as-rkvgl__row {
    font-size: 0.82rem; font-weight: 600; color: var(--c-text-muted);
}
[data-game="astrion"] .as-rkvgl__row.is-plus { color: #7cff9a; }
[data-game="astrion"] .as-rkvgl__row.is-minus { color: #ff8f6a; }