/*
  Komponentenschicht — wiederverwendbare UI-Bausteine.
  Nutze ausschliesslich --wm-*-Tokens, keine rohen Hex-Werte.
*/

/* ── TEXT-UTILITIES ──────────────────────────────────────────── */

/* Akzentfarbe fuer Inline-Symbole (z.B. ∅ im About-Text) */
.wm-accent {
    color: var(--wm-accent-text);
}

/* ── NAV ─────────────────────────────────────────────────────── */

/* Fixiere Nav oben und setze Design-Token-Hintergrund */
.wm-nav {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--wm-bg-surface);
    border-bottom: 1px solid var(--wm-border);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition: transform 0.3s ease-in-out;
}

/* ── SPRACH-UMSCHALTER ──────────────────────────────────────── */

.wm-lang-switch a {
    font-family: var(--wm-font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--wm-text-secondary);
    text-decoration: none;
}

/* Aktive Sprache: dauerhaft unterstrichen */
.wm-lang-switch .wm-lang-active {
    color: var(--wm-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--wm-accent-text);
}

/* Inaktive Sprache: Unterstrich nur bei Hover */
.wm-lang-switch .wm-lang-inactive:hover {
    color: var(--wm-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--wm-accent-text);
}

.wm-lang-sep {
    color: var(--wm-text-muted);
}

/* ── LOGO WORTMARKE ──────────────────────────────────────────── */

/* Halte Link ungestylt */
.wm-logo-link {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.wm-logo-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Wortmarke: "with" + ∅-SVG + "ut-me" als Einheit */
.wm-logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--wm-font-display);
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.5px;
    color: var(--wm-text-primary);
    line-height: 1;
    white-space: nowrap;   /* Wortmarke nie umbrechen */
    flex-shrink: 0;        /* im überfüllten Nav-Flex nicht quetschen */
}

/* Logo-Spalte gegen Schrumpfen schützen — Logo bleibt immer voll sichtbar */
.wm-nav-logo,
.wm-nav-logo > li {
    flex-shrink: 0;
}

/* Senke SVG-Symbol zur Textgrundlinie ab (DevTools-kalibriert) */
.wm-logo-symbol {
    flex-shrink: 0;
    position: relative;
    bottom: 1px;
}

/* ── SUCHE ───────────────────────────────────────────────────── */

/* Binde Suchfeld an Farbsystem */
.wm-search-input {
    background-color: var(--wm-bg-page) !important;
    border-color: var(--wm-border) !important;
    color: var(--wm-text-primary) !important;
}

.wm-search-input::placeholder {
    color: var(--wm-text-muted) !important;
    opacity: 1;
}

/* Tuerkis-Akzent fuer Such-Button */
.wm-search-btn {
    background-color: var(--wm-accent-surface) !important;
    border-color: var(--wm-accent-surface) !important;
    color: #ffffff !important;
}

.wm-search-btn:hover,
.wm-search-btn:focus-visible {
    background-color: var(--wm-accent-hover) !important;
    border-color: var(--wm-accent-hover) !important;
    color: #ffffff !important;
}

/* Such-Layout (früher Inline-Styles) — Desktop-Basis: mittig, expandierend */
.wm-nav-search {
    flex-grow: 1;
    justify-content: center;
}

.wm-nav-search-item {
    width: 100%;
    max-width: 500px;
    position: relative;   /* Positionierungskontext für #search-results */
}

/* Lupen-Toggle + Schließen-Button: Standard aus, nur Mobile sichtbar */
.wm-search-toggle,
.wm-search-close {
    display: none;
}

.wm-search-toggle {
    min-width: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--wm-text-secondary);
    cursor: pointer;
    border-radius: var(--wm-radius-sm);
}

.wm-search-toggle:hover {
    color: var(--wm-accent-surface);
}

/* ── SUCHE MOBILE (≤991px): Lupe → Overlay über der Nav-Zeile ── */
@media (max-width: 991px) {
    /* Lupen-Button sichtbar */
    .wm-search-toggle {
        display: inline-flex;
    }

    /* Suche standardmäßig ausgeblendet; als Overlay über die Nav-Zeile positioniert */
    .wm-nav-search {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: none;
        flex-grow: 0;
        margin: 0;
        padding: 0.75rem 1rem;   /* deckt die Nav-Zeile (padding 0.75rem) ab */
        background: var(--wm-bg-surface);
        border-bottom: 1px solid var(--wm-border);
        z-index: 1010;           /* über Nav(999), unter Drawer-Overlay(1060) */
        align-items: center;
        gap: 0.5rem;
    }

    .wm-nav-search.wm-nav-search--open {
        display: flex;
    }

    /* Suchfeld nimmt volle Breite; Schließen-Button daneben */
    .wm-nav-search-item {
        max-width: none;
        flex-grow: 1;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .wm-nav-search-item form {
        flex-grow: 1;
    }

    /* Schließen-Button (X) sichtbar */
    .wm-search-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
        padding: 0.5rem;
        background: transparent;
        border: none;
        color: var(--wm-text-secondary);
        cursor: pointer;
        border-radius: var(--wm-radius-sm);
        flex-shrink: 0;
    }

    .wm-search-close:hover {
        color: var(--wm-accent-surface);
    }
}

/* ── LAYOUT ──────────────────────────────────────────────────── */

/* Lese-Breite für textlastige Seiten (About, Datenschutz, Topic-Detail) */
.wm-readable {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Startseiten-Grid: Sidebar links, Content rechts */
.wm-layout-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: gestapelt */
    gap: 2rem;
    align-items: start;
}

@media (min-width: 992px) {
    .wm-layout-grid {
        grid-template-columns: 250px 1fr; /* Desktop: Sidebar 250px + Content */
    }
}

/* ── KATEGORIE-FILTER ────────────────────────────────────────── */

/* Pico-Default margin-bottom (1rem) auf <details> neutralisieren */
.wm-filter-aside details {
    margin-bottom: 0;
}

/* Oberkategorie-<li>: kein border, kein padding — Linie sitzt am summary */
.wm-filter-aside nav > ul > li {
    padding-top: 0;
    padding-bottom: 0;
}

/* Unterkategorie-Listen: Einrückung, kein margin */
.wm-filter-aside details ul {
    padding-left: 0.5rem;
    margin: 0;
}

/* Unterkategorie-<li>: Padding vom <li> auf <a> verschoben */
.wm-filter-aside details ul li {
    padding: 0;
    margin: 0;
}

/* Unterkategorie-Link-Basis — vertikales padding = summary-padding für Symmetrie */
.wm-filter-aside details ul li a {
    display: flex;
    align-items: flex-start; /* └ bleibt oben, Label bricht in eigener Spalte um */
    padding: 0.6rem var(--pico-nav-element-spacing-horizontal, 1rem);
    margin: 0;
    cursor: pointer;
    font-size: 0.875rem;
    overflow-wrap: normal; /* Picos globales break-word überschreiben */
    word-break: normal;    /* nur an Wortgrenzen umbrechen */
}

/* Oberkategorie-Toggles: Linie + symmetrisches padding */
.wm-filter-aside details summary {
    display: block;
    cursor: pointer;
    border-top: 1px solid var(--wm-border); /* Linie immer am fixen summary, nicht am variablen li */
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0; /* neutralisiert Picos details[open] > summary { margin-bottom: ~1rem } */
    font-size: 0.875rem;
}

/* Erste Oberkategorie: keine Linie oben */
.wm-filter-aside nav > ul > li:first-child details summary {
    border-top: none;
}

/* Fokus-Ring: türkiser Outline, bündig am Element (ersetzt Picos farblich unsichtbaren Fokus) */
.wm-filter-aside details summary:focus-visible {
    outline: 2px solid var(--wm-accent-text);
    outline-offset: 0;
}

.wm-filter-aside details ul li a:focus-visible {
    outline: 2px solid var(--wm-accent-text);
    outline-offset: 0;
}

/* Sub-Link: normaler Text */
.wm-filter-link {
    color: var(--wm-text-primary);
    text-decoration: none;
}

.wm-filter-link:hover {
    color: var(--wm-accent-text);
}

/* Sub-Link: aktiv — türkis; Unterstreichung gezielt nur auf Namen-Label */
.wm-filter-link--active {
    color: var(--wm-accent-text) !important;
}

.wm-filter-link--active .wm-filter-label {
    text-decoration: underline; /* WCAG 1.4.1: nicht-farblicher Aktiv-Marker nur am Namen */
}

/* └-Span: dekorativ, nicht unterstrichen, kein Umbruch vom Namen */
.wm-filter-arrow {
    color: var(--wm-text-muted);
    margin-right: 0.25rem;
    white-space: nowrap;
    text-decoration: none;
}

/* Reset-Elemente */
.wm-filter-reset-item {
    margin-top: 1.5rem;
}

.wm-filter-reset {
    width: 100%;
    text-align: center;
    background-color: transparent !important;
    border: 2px solid var(--wm-accent-text) !important;
    color: var(--wm-accent-text) !important;
}

.wm-filter-reset:hover,
.wm-filter-reset:focus-visible {
    background-color: var(--wm-accent-text) !important;
    color: var(--wm-bg-surface) !important;
    border-color: var(--wm-accent-text) !important;
}

/* ── VERWANDTE THEMEN (Detail-Sidebar) ───────────────────────── */

/* Rahmenlos wie .wm-filter-aside — kein background, kein border */
.wm-related-aside {
    font-size: 0.875rem;
}

.wm-related-heading {
    font-size: 0.95rem;
    color: var(--wm-text-primary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wm-border); /* dezente Trennlinie wie Sidebar */
}

.wm-related-placeholder {
    font-size: 0.85rem;
    color: var(--wm-text-muted);
    font-style: italic;
}

/* Mobile (<992px): Grid stapelt — Artikel zuerst, Verwandte Themen ans Ende.
   Scope via .wm-detail-grid, damit die Timeline (nur .wm-layout-grid) unberührt bleibt. */
@media (max-width: 991px) {
    .wm-detail-grid .wm-layout-main { order: 1; }
    .wm-detail-grid .wm-detail-sidebar { order: 2; }
}

/* ── OFF-CANVAS-DRAWER (Mobile <992px) ───────────────────────── */

/* Trigger-Button: Standard aus, nur mobil sichtbar */
.wm-drawer-toggle {
    display: none;
}

.wm-drawer-toggle-icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* Overlay: fixed vollflächig, abgedunkelt */
.wm-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1060;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.wm-drawer-overlay.wm-drawer-open {
    opacity: 1;
}

/* Body-Scroll-Sperre wenn Drawer offen */
body.wm-drawer-active {
    overflow: hidden;
}

@media (max-width: 991px) {
    /* Trigger sichtbar; Padding = .wm-sort-toggle für gleiche Höhe in der Flex-Zeile */
    .wm-drawer-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: var(--wm-bg-surface);
        border: 1px solid var(--wm-border);
        border-radius: var(--wm-radius-md, 8px);
        color: var(--wm-text-primary);
        font-size: 0.9rem;
        cursor: pointer;
    }

    .wm-drawer-toggle:hover {
        border-color: var(--wm-accent-surface);
    }

    /* Panel als Off-Canvas: fixed, links versteckt, schiebt bei .wm-drawer-open ein */
    .wm-drawer-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background: var(--wm-bg-surface);
        border-right: 1px solid var(--wm-border);
        padding: 1.5rem 1rem;
        overflow-y: auto;
        z-index: 1065;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        -webkit-overflow-scrolling: touch;
    }

    .wm-drawer-panel.wm-drawer-open {
        transform: translateX(0);
    }
}

/* Ab 992px: Panel ist normale Grid-Spalte, kein Off-Canvas; Overlay nie sichtbar */
@media (min-width: 992px) {
    .wm-drawer-panel {
        position: static;
        transform: none;
    }

    .wm-drawer-overlay {
        display: none !important;
    }
}

/* ── USER-DRAWER (Mobile ≤991px, von RECHTS) ─────────────────── */

/* User-Hamburger-Trigger: Standard aus (Desktop), nur mobil sichtbar */
.wm-user-drawer-toggle {
    display: none;
}

/* Panel + Overlay auf Desktop nie sichtbar */
.wm-user-drawer-panel {
    display: none;
}

.wm-user-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1060;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.wm-user-drawer-overlay.wm-user-drawer-open {
    opacity: 1;
}

/* Body-Scroll-Sperre wenn Drawer offen */
body.wm-user-drawer-active {
    overflow: hidden;
}

/* Drawer-Items (vertikale Links) */
.wm-user-drawer-item {
    display: block;
    padding: 0.75rem 0.5rem;
    color: var(--wm-text-primary);
    text-decoration: none;
    border-radius: var(--wm-radius-sm);
    font-size: 0.95rem;
}

.wm-user-drawer-item:hover {
    background: var(--wm-bg-page);
    color: var(--wm-accent-text);
}

.wm-user-drawer-logout {
    color: var(--wm-accent-text);
    margin-top: 0.5rem;
    border-top: 1px solid var(--wm-border);
    padding-top: 1rem;
}

.wm-user-drawer-lang {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--wm-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* DE|EN-Kürzel: Mono, rechtsbündig neben dem Label */
.wm-user-drawer-lang-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--wm-font-mono);
    font-size: 0.85rem;
}

/* Sprach-Links im Drawer — übernehmen die Farben/Marker des Inline-wm-lang-switch */
.wm-user-drawer-lang a {
    color: var(--wm-text-secondary);
    text-decoration: none;
    letter-spacing: 0.5px;
}

.wm-user-drawer-lang .wm-lang-active {
    color: var(--wm-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--wm-accent-text);
}

.wm-user-drawer-lang .wm-lang-inactive:hover {
    color: var(--wm-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--wm-accent-text);
}

/* Theme-Gruppe: kein Trennstrich zur Sprache — bildet mit ihr EINEN Einstellungs-Block */
.wm-user-drawer-theme {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Gemeinsames Gruppen-Label (Sprache + Design): Label links, Wert rechts */
.wm-user-drawer-group-label {
    font-size: 0.85rem;
    color: var(--wm-text-muted);
}

@media (max-width: 991px) {
    /* Hamburger sichtbar — Icon-Button-Stil wie Lupe/Theme-Toggle */
    .wm-user-drawer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.35rem;
        background: transparent;
        border: none;
        color: var(--wm-text-primary);
        cursor: pointer;
        border-radius: var(--wm-radius-sm);
    }

    .wm-user-drawer-toggle:hover {
        color: var(--wm-accent-text);
    }

    /* Panel als Off-Canvas: fixed, rechts versteckt, schiebt bei .wm-user-drawer-open ein */
    .wm-user-drawer-panel {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background: var(--wm-bg-surface);
        border-left: 1px solid var(--wm-border);
        padding: 1.5rem 1rem;
        overflow-y: auto;
        z-index: 1065;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        -webkit-overflow-scrolling: touch;
    }

    .wm-user-drawer-panel.wm-user-drawer-open {
        transform: translateX(0);
    }

    /* Inline-User-Menü-Elemente (Neu/Admin/Username/Logout/Login/DE|EN) ausblenden — sie sind im Drawer.
       Lupe (wm-search-toggle), Theme-Toggle, User-Hamburger bleiben sichtbar (keine wm-nav-user-inline-Klasse). */
    .wm-nav-user-inline {
        display: none;
    }
}

/* ── SORTIER-DROPDOWN ─────────────────────────────────────────── */

.wm-sort-wrap {
    position: relative;
    display: flex;
    align-items: center;          /* Filter- und Sort-Button vertikal mittig auf gleicher Linie */
    justify-content: flex-end;    /* Desktop: rechtsbündig (nur Dropdown sichtbar) */
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Mobile: Filter-Button links, Dropdown rechts — eine Zeile */
@media (max-width: 991px) {
    .wm-sort-wrap {
        justify-content: space-between;
    }
}

/* Trigger: türkis-akzentuiert, Hover/offen gefüllt */
.wm-sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-accent-surface);
    border-radius: var(--wm-radius-md);
    color: var(--wm-accent-text);
    font-size: 0.9rem;
    white-space: nowrap;          /* kein Zeilenumbruch — gleiche Höhe wie Filter-Button */
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.wm-sort-toggle:hover,
.wm-sort-toggle[aria-expanded="true"] {
    background: var(--wm-accent-surface);
    color: #ffffff;
}

.wm-sort-toggle:focus-visible {
    outline: 2px solid var(--wm-accent-text);
    outline-offset: 2px;
}

.wm-sort-label {
    opacity: 0.85;
}

.wm-sort-current {
    font-weight: 600;
}

.wm-sort-caret {
    font-size: 0.8rem;
    line-height: 1;
}

/* Menü: absolut unter dem Button; z-index 900 (über Content, unter Nav 999/Overlay 1060/Modal 1100) */
.wm-sort-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 220px;
    max-width: calc(100vw - 2rem);
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-accent-surface);
    border-radius: var(--wm-radius-md);
    box-shadow: 0 4px 16px var(--wm-accent-tint);
    z-index: 900;
}

.wm-sort-menu[hidden] {
    display: none;
}

.wm-sort-menu li {
    margin: 0;
    padding: 0;
    list-style: none; /* überschreibt Picos li{list-style:square} direkt am <li> */
}

.wm-sort-option {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: var(--wm-radius-sm);
    color: var(--wm-text-primary);
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
}

.wm-sort-option:hover {
    background: var(--wm-accent-tint);
    color: var(--wm-accent-text);
}

/* Aktive Sortierung: türkis + Haken */
.wm-sort-option--active {
    color: var(--wm-accent-text);
    font-weight: 600;
}

.wm-sort-option--active::before {
    content: "\2713\00a0"; /* ✓ + geschütztes Leerzeichen */
}

.wm-sort-option:focus-visible {
    outline: 2px solid var(--wm-accent-text);
    outline-offset: -2px;
}

/* Checkbox + Radio: türkiser Akzent (überschreibt Browser-Default und --pico-primary-Fallback) */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--wm-accent-surface);
}

/* Tuerkis-Akzent fuer Nav-Buttons (Login/Logout) */
.wm-nav-btn {
    background-color: var(--wm-accent-surface) !important;
    border-color: var(--wm-accent-surface) !important;
    color: #ffffff !important;
}

.wm-nav-btn:hover,
.wm-nav-btn:focus-visible {
    background-color: var(--wm-accent-hover) !important;
    border-color: var(--wm-accent-hover) !important;
    color: #ffffff !important;
}

/* ── THEME-TOGGLE ────────────────────────────────────────────── */

/* Mindest-Touch-Ziel 40x40px, dezentes Icon-Button-Design */
.wm-theme-toggle {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: transparent;
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius-sm);
    color: var(--wm-text-secondary);
    cursor: pointer;
    line-height: 1;
    /* Pico-Button-Defaults zuruecksetzen */
    font-size: inherit;
    margin: 0;
}

.wm-theme-toggle:hover {
    border-color: var(--wm-accent-surface);
    color: var(--wm-accent-surface);
    background: transparent;
}

/* ── HERO ────────────────────────────────────────────────────── */

/* Zentrierter Hero-Bereich unter dem Nav */
.wm-hero {
    text-align: center;
    margin-top: 2.5rem;
    margin-bottom: 3rem;
    padding: 0 1rem;
}

/* Grosse Wortmarke: "with" + ∅-SVG(40px) + "ut-me" */
.wm-hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: var(--wm-font-display);
    font-weight: 500;
    font-size: 2.875rem;
    letter-spacing: -0.5px;
    color: var(--wm-text-primary);
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

/* Senke SVG-Symbol zur Textgrundlinie der grossen Wortmarke ab (DevTools-kalibriert) */
.wm-hero-logo-symbol {
    flex-shrink: 0;
    position: relative;
    bottom: 1px;
}

/* Mono-Tagline unterhalb der grossen Wortmarke */
.wm-hero-tagline {
    font-family: var(--wm-font-mono);
    font-size: 0.8125rem;
    letter-spacing: 2px;
    color: var(--wm-text-muted);
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Tuerkises ∅-Symbol links der Tagline */
.wm-hero-tagline-symbol {
    color: var(--wm-accent-text);
    font-size: 1.1em;
    line-height: 1;
}

/* ── FOOTER ──────────────────────────────────────────────────── */

/* Fixierter Footer am unteren Bildschirmrand */
.wm-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--wm-bg-surface);
    border-top: 1px solid var(--wm-border);
    padding: 0.5rem 0;
    text-align: center;
    font-family: var(--wm-font-body);
    font-size: 0.8125rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

.wm-footer-copy {
    color: var(--wm-text-muted);
    margin-bottom: 0.2rem;
}

/* Footer-Links in Akzentfarbe */
.wm-footer-nav a {
    color: var(--wm-accent-text);
    text-decoration: none;
    margin: 0 0.5rem;
}

.wm-footer-nav a:hover {
    color: var(--wm-accent-hover);
    text-decoration: none;
}

/* Platz unterhalb des Inhalts fuer den fixierten Footer */
body {
    padding-bottom: 5rem;
}

/* Mobile: Footer aus dem Fixed-Modus in den Fluss holen — verhindert Ueberlappung langer
   Formulare (Register). Kein body-Flex, damit die sticky-Nav oben haften bleibt. */
@media (max-width: 991px) {
    .wm-footer {
        position: static;
    }

    body {
        padding-bottom: 0;
    }

    /* Content-Ueberschriften nicht mitten im Wort brechen (Pico-break-word aufheben);
       font-size reduziert, damit lange Woerter (Datenschutzerklaerung) in eine Zeile passen */
    .wm-readable h1 {
        overflow-wrap: normal;
        font-size: 1.6rem;
    }
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */

/* Suchfeld auf schmalem Screen auf volle Breite strecken */
@media (max-width: 768px) {
    .wm-hero-logo {
        font-size: 2rem;
    }

    .wm-hero-logo-symbol {
        /* SVG-Groesse skaliert via width/height-Attribut im HTML */
    }
}

@media (max-width: 480px) {
    .wm-hero-logo {
        font-size: 1.6rem;
    }
}

/* ── TOPIC-CARDS ─────────────────────────────────────────────── */

/* Alle Ecken rund, Akzent nur im Hover (Variante C) */
.wm-card {
    position: relative;
    padding: 1.25rem 1.25rem 0 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius-lg);
    overflow: hidden; /* Schneidet Pico-Header-Margin an Ecken sauber ab */
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .wm-card { transition: none; }
}

.wm-card:hover {
    border-color: var(--wm-accent-surface);
    box-shadow: 0 4px 16px var(--wm-accent-tint);
}

/* Pico setzt auf article>header negative Margins + Sectioning-BG — alles zuruecksetzen */
.wm-card > header {
    margin: 0 0 0.75rem 0;
    padding: 0;
    border-bottom: none;
    background: transparent;
}

.wm-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

/* Kategorie-Badge */
.wm-badge {
    font-family: var(--wm-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--wm-radius-sm);
    white-space: nowrap;
}

.wm-badge--primary {
    background: var(--wm-badge-primary-bg);
    color: var(--wm-accent-text);
}

.wm-badge--neutral {
    background: var(--wm-badge-neutral-bg);
    color: var(--wm-text-secondary);
}

/* Kartentitel */
.wm-card-title {
    font-family: var(--wm-font-display);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
}

.wm-card-title-link {
    color: var(--wm-text-primary);
    text-decoration: none;
}

.wm-card-title-link:hover {
    color: var(--wm-accent-text);
    text-decoration: none;
}

/* Meta-Zeile unter dem Titel */
.wm-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    font-family: var(--wm-font-mono);
    font-size: 0.75rem;
    color: var(--wm-text-muted);
}

.wm-card-author {
    color: var(--wm-accent-text);
    text-decoration: none;
}

.wm-card-author:hover {
    color: var(--wm-accent-hover);
    text-decoration: none;
}

/* TL;DR-Block */
.wm-tldr-block {
    font-family: var(--wm-font-body);
    font-size: 0.9rem;
    color: var(--wm-text-secondary);
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem;
    border-left: 2px solid var(--wm-accent-tint);
    border-radius: 0 var(--wm-radius-sm) var(--wm-radius-sm) 0;
    line-height: 1.55;
}

/* TL;DR-Block auf Detailseite — etwas groessere Darstellung */
.wm-tldr-block--detail {
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
    background: var(--wm-bg-page);
    border-left-color: var(--wm-accent-surface);
}

/* Label ordnet sich dem TL;DR-Text unter */
.wm-tldr-label {
    font-family: var(--wm-font-mono);
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--wm-text-muted);
    margin-right: 0.5rem;
}

/* Footer-Zeile der Card — Pico article>footer-Margins/Padding hart neutralisieren */
.wm-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid var(--wm-border);
    background: transparent;
    margin-top: 0.75rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.wm-vote-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* "Ohne mich"-Button: Marken-Tuerkis, kompakt, Touch-Ziel >=40px */
.wm-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 6px 13px;
    min-height: 40px;
    background: var(--wm-accent-surface);
    border: 2px solid var(--wm-accent-surface);
    border-radius: var(--wm-radius-md);
    color: #ffffff;
    font-family: var(--wm-font-body);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin: 0;
    width: auto;
    line-height: 1.3;
}

.wm-vote-btn:hover {
    background: var(--wm-accent-hover);
    border-color: var(--wm-accent-hover);
    color: #ffffff;
}

/* Voted-Zustand: gedaempft/neutral (kein Farbakzent) */
.wm-vote-btn--voted {
    background: transparent;
    border-color: var(--wm-border);
    color: var(--wm-text-muted);
}

.wm-vote-btn--voted:hover {
    background: transparent;
    border-color: var(--wm-text-muted);
    color: var(--wm-text-secondary);
}

/* Stimmen-Zaehler neben dem Button */
.wm-vote-count {
    font-family: var(--wm-font-mono);
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
}

.wm-vote-count strong {
    color: var(--wm-text-primary);
    font-weight: 600;
}

.wm-vote-count-label {
    color: var(--wm-text-secondary);
    margin-left: 0.2rem;
}

/* Schwebendes Tooltip-Popup — generisch für alle [data-wm-tooltip]-Elemente */
.wm-tooltip {
    position: fixed;                          /* umgeht overflow:hidden der Cards */
    z-index: 1050;                            /* über Nav(999)/Footer(1000), unter Modal(1100) */
    background: var(--wm-bg-surface);
    color: var(--wm-text-primary);
    border: 1px solid var(--wm-accent-tint);
    border-radius: var(--wm-radius-md);
    padding: 0.4rem 0.7rem;
    font-family: var(--wm-font-mono);
    font-size: 0.8rem;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.wm-tooltip.is-visible {
    opacity: 1;
}

/* Favorit-Button (Herz-SVG) */
.wm-fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: transparent;
    border: none;
    color: var(--wm-text-muted);
    cursor: pointer;
    border-radius: var(--wm-radius-sm);
    transition: color 0.15s;
    margin: 0;
    width: auto;
}

.wm-fav-btn:hover {
    color: var(--wm-coral-text);
    background: transparent;
}

.wm-fav-btn--active {
    color: var(--wm-coral-surface);
}

.wm-fav-btn--active:hover {
    color: var(--wm-coral-text);
    background: transparent;
}

/* Teilen-Button: wie .wm-fav-btn, aber Hover türkis (Marken-Akzent) */
.wm-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    margin: 0; /* Pico-Default button-margin-bottom neutralisieren (sonst vertikaler Versatz) */
    background: transparent;
    border: none;
    color: var(--wm-text-muted);
    cursor: pointer;
    border-radius: var(--wm-radius-sm);
    transition: color 0.15s;
}

.wm-share-btn:hover {
    color: var(--wm-accent-text);
    background: transparent;
}

/* Feedback-Zustand nach "Link kopiert" (JS setzt/entfernt die Klasse) */
.wm-share-btn--copied {
    color: var(--wm-accent-text);
}

/* Rechte Gruppe der Interaktions-Bar: Favorit + Teilen nebeneinander */
.wm-action-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* ── LEERE ZUSTAENDE ──────────────────────────────────────────── */

.wm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3.5rem 1rem;
    text-align: center;
}

.wm-empty-icon {
    opacity: 0.30;
    color: var(--wm-text-muted);
}

.wm-empty-state p {
    font-size: 0.9375rem;
    color: var(--wm-text-secondary);
    max-width: 28rem;
    margin: 0;
}

/* ── DETAILSEITE ──────────────────────────────────────────────── */

/* Meta-Zeile (Autor, Datum, Kategorien) */
.wm-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: center;
    font-family: var(--wm-font-mono);
    font-size: 0.8125rem;
    color: var(--wm-text-muted);
    margin-bottom: 1.25rem;
}

.wm-detail-meta a {
    color: var(--wm-accent-text);
    text-decoration: none;
}

.wm-detail-meta a:hover {
    color: var(--wm-accent-hover);
}

/* Quelle-Zeile */
.wm-source-line {
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
    color: var(--wm-text-secondary);
}

.wm-source-line a {
    color: var(--wm-accent-text);
    text-decoration: none;
    word-break: break-all;
}

.wm-source-line a:hover {
    color: var(--wm-accent-hover);
}

/* Interaktionsleiste (Vote + Favorit) auf Detailseite */
.wm-interaction-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding: 0.875rem 1.25rem;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius-md);
}

/* "Kommentar posten"-Button: Tuerkis wie Ohne-mich-Button */
.wm-post-btn {
    display: inline-block;
    padding: 7px 18px;
    background: var(--wm-accent-surface);
    border: 2px solid var(--wm-accent-surface);
    border-radius: var(--wm-radius-md);
    color: #ffffff;
    font-family: var(--wm-font-body);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin: 0;
    width: auto;
}

.wm-post-btn:hover {
    background: var(--wm-accent-hover);
    border-color: var(--wm-accent-hover);
    color: #ffffff;
}

/* Kommentar-Eingabe-Container */
.wm-comment-form-box {
    margin-bottom: 2.5rem;
    padding: 1.25rem;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius-md);
}

.wm-comment-form-box label {
    color: var(--wm-text-secondary);
    font-family: var(--wm-font-mono);
    font-size: 0.8125rem;
}

.wm-comment-form-box textarea {
    background: var(--wm-bg-page);
    border-color: var(--wm-border);
    color: var(--wm-text-primary);
}

.wm-comment-form-box textarea::placeholder {
    color: var(--wm-text-muted);
}

/* ── KOMMENTAR-THREADS ────────────────────────────────────────── */

/* Basis-Kommentar-Karte */
.wm-comment-base {
    margin-bottom: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border);
    border-left: 2px solid var(--wm-accent-surface);
    border-radius: 0 var(--wm-radius-md) var(--wm-radius-md) 0;
    position: relative;
    z-index: 2;
}

/* Eigener Beitrag: Korallen-Kante */
.wm-comment-own {
    border-left-color: var(--wm-coral-surface);
}

/* Verbindungslinie zwischen verschachtelten Ebenen */
.replies-wrapper {
    border-left: 2px solid var(--wm-border);
    padding-left: 1.25rem;
    margin-left: 1rem;
    margin-top: -0.5rem;
    padding-top: 0.75rem;
    transition: border-color 0.15s;
}

.replies-wrapper.active-thread {
    border-left-color: var(--wm-accent-surface);
}

/* Mobile Mention (tiefe Nesting-Ebenen) */
.mobile-mention {
    display: none;
    font-weight: 600;
    color: var(--wm-accent-text);
    margin-right: 0.35rem;
}

@media (max-width: 768px) {
    .replies-wrapper.depth-5, .replies-wrapper.depth-6, .replies-wrapper.depth-7,
    .replies-wrapper.depth-8, .replies-wrapper.depth-9, .replies-wrapper.depth-10 {
        padding-left: 0; margin-left: 0; border-left: none; margin-top: 0; padding-top: 0;
    }
    .mobile-mention { display: inline; }
}

/* Kommentar-Kopfzeile */
.wm-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wm-border);
}

.wm-comment-author {
    font-weight: 600;
    color: var(--wm-accent-text);
    text-decoration: none;
}

.wm-comment-author:hover {
    color: var(--wm-accent-hover);
}

/* "DU"-Label bei eigenen Beitraegen */
.wm-du-label {
    font-family: var(--wm-font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: var(--wm-coral-bg);
    color: var(--wm-coral-text);
    padding: 1px 5px;
    border-radius: var(--wm-radius-sm);
    margin-left: 0.35rem;
    vertical-align: middle;
}

.wm-comment-time {
    font-family: var(--wm-font-mono);
    font-size: 0.75rem;
    color: var(--wm-text-muted);
    margin-left: 0.5rem;
}

/* Aktions-Buttons (Antworten, Loeschen) */
.wm-comment-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.wm-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--wm-accent-text);
    cursor: pointer;
    font-family: var(--wm-font-body);
    width: auto;
}

.wm-reply-btn:hover {
    color: var(--wm-accent-hover);
    background: none;
}

.wm-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--wm-text-muted);
    cursor: pointer;
    font-family: var(--wm-font-body);
    width: auto;
}

.wm-delete-btn:hover {
    color: var(--wm-text-secondary);
    background: none;
}

/* Kommentartext */
.wm-comment-text {
    font-family: var(--wm-font-body);
    color: var(--wm-text-primary);
    margin-bottom: 0;
    line-height: 1.6;
}

/* Ausgeblendeter Kommentar */
.wm-comment-hidden {
    color: var(--wm-text-muted);
    font-style: italic;
    opacity: 0.75;
}

/* Moderationshinweis am eigenen, noch nicht freigegebenen Kommentar */
.wm-comment-pending {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--wm-text-muted);
}

/* Antwort-Formular */
.wm-reply-form {
    display: none;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px dashed var(--wm-border);
}

.wm-inline-reply-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    resize: vertical;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius-sm);
    background: var(--wm-bg-card);
    color: var(--wm-text-primary);
    font-family: var(--wm-font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.wm-inline-reply-textarea:focus {
    border-color: var(--wm-accent-surface);
    outline: none;
}

.wm-reply-btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.wm-reply-send-btn {
    width: auto;
    margin-bottom: 0;
    padding: 7px 18px;
    min-height: 40px;
    background: var(--wm-accent-surface);
    border: 2px solid var(--wm-accent-surface);
    color: #ffffff;
    border-radius: var(--wm-radius-md);
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s;
}

.wm-reply-send-btn:hover {
    background: var(--wm-accent-hover);
    border-color: var(--wm-accent-hover);
    color: #ffffff;
}

.wm-reply-cancel-btn {
    width: auto;
    margin-bottom: 0;
    padding: 7px 16px;
    min-height: 40px;
    font-size: 0.875rem;
    background: transparent;
    border: 1px solid var(--wm-border);
    color: var(--wm-text-secondary);
    border-radius: var(--wm-radius-md);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.wm-reply-cancel-btn:hover {
    border-color: var(--wm-text-secondary);
    color: var(--wm-text-primary);
}

/* Pico-Override: [type=submit] setzt width:100% (Spez. 0,1,0) — hier hoehere Spez. (0,2,0) */
.wm-reply-btn-row .wm-reply-send-btn,
.wm-reply-btn-row .wm-reply-cancel-btn {
    width: auto;
    flex: 0 0 auto;
}

/* ── RESPONSIVE PHASE 3 ──────────────────────────────────────── */

@media (max-width: 768px) {
    .wm-card {
        padding: 1rem 0.875rem 0 0.875rem;
    }

    .wm-interaction-bar {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .wm-comment-header {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
}

@media (max-width: 480px) {
    .wm-card-title {
        font-size: 1.1rem;
    }
}

/* Suchvorschlag-Item: Hover-Highlight (ersetzt Inline-onmouseover, CSP-konform) */
.wm-search-suggestion-item:hover {
    background: var(--pico-form-element-background-color);
}

/* ── ERSTBESUCHER-MODAL ──────────────────────────────────── */

/* Overlay: fixed, full-viewport, zentriert — rgba-Abdunklung als einzige Ausnahme (kein Theme-Farbwert) */
.wm-modal-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
}

.wm-modal-overlay[hidden] {
    display: none;
}

/* Modal-Box */
.wm-modal-box {
    position: relative;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius-lg);
    max-width: 480px;
    width: 90vw;
    padding: 2rem 2rem 1.75rem;
    color: var(--wm-text-primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* Text-Absatz */
.wm-modal-box p {
    font-family: var(--wm-font-body);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
    color: var(--wm-text-primary);
}

/* Schließen-Button */
.wm-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--wm-text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: var(--wm-radius-sm);
    padding: 0;
    margin: 0;
    line-height: 1;
    width: auto;
}

.wm-modal-close:hover {
    color: var(--wm-text-primary);
    background: transparent;
}

/* ── PROFILSEITE ──────────────────────────────────────────── */

.wm-profile-card {
    text-align: center;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius-lg);
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
}

.wm-profile-name {
    font-family: var(--wm-font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--wm-text-primary);
    margin: 0 0 0.5rem 0;
}

.wm-profile-since {
    font-family: var(--wm-font-mono);
    font-size: 0.8125rem;
    color: var(--wm-text-muted);
    margin: 0;
}

/* Tab-Navigation */
.wm-tab-link {
    color: var(--wm-text-secondary);
    text-decoration: none;
    font-family: var(--wm-font-body);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    display: inline-block;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.wm-tab-link:hover {
    color: var(--wm-accent-text);
    text-decoration: none;
    border-bottom-color: var(--wm-accent-tint);
}

.wm-tab-link.wm-tab-active {
    color: var(--wm-accent-text);
    font-weight: 500;
    border-bottom-color: var(--wm-accent-surface);
}

.wm-tab-count {
    font-family: var(--wm-font-mono);
    font-size: 0.75rem;
    color: var(--wm-text-muted);
}

/* Karten in Profil-Tabs (Variante C: alle Ecken rund, Hover-Akzent) */
.wm-profile-item {
    margin: 0;
    padding: 1rem;
    background: var(--wm-bg-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--wm-radius-md);
    transition: border-color 0.15s;
}

.wm-profile-item:hover {
    border-color: var(--wm-accent-surface);
}

/* ── COOKIE-HINWEIS ───────────────────────────────────────── */

/* Fixierter Banner unten; z-index 1040: über Nav(999)/Footer(1000), unter Tooltip(1050)/Modal(1100) */
.wm-cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background-color: var(--wm-bg-surface);
    border-top: 1px solid var(--wm-border);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
}

.wm-cookie-notice-text {
    color: var(--wm-text-secondary);
    font-size: 0.875rem;
    max-width: 720px;
}

.wm-cookie-notice-btn {
    white-space: nowrap;
    flex-shrink: 0;
}