/* ==========================================================================
   comments.css — CA-Serie (04.09.2026): Kommentar-Modul Theming & Mobile
   ==========================================================================
   Erste konsequent MOBILE-FIRST autorierte Fläche: Basis = 320px Phone,
   Erweiterungen via min-width. Gehört in @layer components (nach theme_3,
   vor mobile.css) — vgl. docs/MOBILE_THEME_LT7_KONZEPT_import-layer.md:
   - schlägt layer(bootstrap) & design_system/theme_3 (gleicher Layer, später
     in der Dokumentreihenfolge),
   - verliert kontrolliert gegen layer(overrides) → mobile.css bleibt finale
     Override-Schicht.

   Konsumiert ausschliesslich --color-*, --font-size-*, --space-* und
   --touch-target-* Tokens aus default.css (DK2-Regel: Dark :root + Light-Blöcke
   flippen die Tokens, diese Datei braucht KEINE eigenen Theme-Overrides). Das
   Markup liefert module/kommentar/index.php (CA1: keine Inline-Styles mehr
   außer --cmt-level als Layout-Steuergröße).
   BUGFIX CH-Nachzug (04.09.): Die frühere Schreibweise der Token-Liste
   (Globus-Stern unmittelbar vor Schrägstrich, z.B. --color-…/--font-size-…)
   hat den Header-Kommentar vorzeitig beendet und die GESAMTE Datei zu 0
   geparsten Rules verschluckt (Stylesheet seit CA2 dormant!).

   JS-Verträge (community.js): .community-vote-widget/-btn/-score (State via
   Bootstrap-Utilities text-success/-danger/-muted — unten explizit auf Token-
  Ebene gespiegelt), .debate-filter-pill(.active), .comment-sort-select,
   .comment-reaction-btn, .quick-reply-box(.d-none), .inline-quick-reply-form,
   .comment-report-btn, .md-comment-item[data-comment-type].
   ========================================================================== */
@layer components {

  /* ---- 1 · Modul-Wrapper: Container für @container-Queries ---------------- */
  .md-comment-module-wrapper {
    container-type: inline-size;
    container-name: comments;
    color: var(--color-text-body);
    font-size: var(--font-size-base, 1rem);
  }

  /* ---- 2 · Header: Label, Zähler, Filter-Zeile ---------------------------- */
  .md-comment-header {
    border-bottom: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.2);
  }
  .md-comment-header-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
  }
  .md-comment-header-label {
    font-size: var(--font-size-sm, 0.8125rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-heading);
  }
  .md-comment-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full, 9999px);
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    background: rgba(var(--color-green-rgb, 52, 211, 153), 0.15);
    color: var(--color-green, #34d399);
    border: 1px solid rgba(var(--color-green-rgb, 52, 211, 153), 0.3);
  }

  /* Mobile-first: Filter-Pills als horizontale Scroll-Zeile statt 3-zeiligem
     Wrap; Sortierung darunter in voller Breite. */
  .md-comment-filter-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-3, 0.75rem);
  }
  .debate-filter-group {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2, 0.5rem);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .debate-filter-group::-webkit-scrollbar { display: none; }
  .md-filter-pill {
    scroll-snap-align: start;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: var(--touch-target-min, 44px);
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-sm, 0.8125rem);
    font-weight: 600;
    white-space: nowrap;
    background: transparent;
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.35);
    color: var(--color-text-secondary, var(--color-text-body));
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--ease-out, ease),
                color var(--duration-fast, 150ms) var(--ease-out, ease),
                border-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-filter-pill:hover { border-color: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.5); color: var(--color-text); }
  .md-filter-pill.active,
  .md-filter-pill.btn-primary {
    background: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.16);
    border-color: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.5);
    color: var(--color-accent-cyan, #22d3ee);
  }
  .md-comment-sort {
    min-height: var(--touch-target-min, 44px);
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-full, 9999px);
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-size: var(--font-size-sm, 0.8125rem);
    background: var(--color-surface-card, #131c33);
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.35);
    color: var(--color-text-body, #f1f5f9);
    cursor: pointer;
  }

  /* ---- 3 · Tags-Bar + Amendment-Button ------------------------------------ */
  .md-comment-tags-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem);
    border-radius: var(--radius-lg, 12px);
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.5);
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.2);
  }
  .md-comment-tags {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .md-comment-tags::-webkit-scrollbar { display: none; }
  .md-comment-tags-label,
  .md-comment-tags-empty {
    flex: 0 0 auto;
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #a1b1c7);
  }
  .md-tag-btn,
  .md-tag-add-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 36px;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-full, 9999px);
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.6);
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.3);
    color: var(--color-text-link, #38bdf8);
    cursor: pointer;
    transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease),
                color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-tag-btn:hover, .md-tag-add-btn:hover { border-color: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.5); }
  .md-tag-count {
    padding: 0 0.35rem;
    border-radius: var(--radius-full, 9999px);
    background: rgba(var(--color-line-rgb, 148, 163, 184), 0.18);
    color: var(--color-text-secondary, var(--color-text-body));
  }
  .md-amendment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--touch-target-min, 44px);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-sm, 0.8125rem);
    font-weight: 700;
    font-family: var(--mono-stack, ui-monospace, monospace);
    background: var(--color-accent-cyan, #22d3ee);
    color: #06202e;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.3);
    transition: filter var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-amendment-btn:hover { filter: brightness(1.1); }

  /* ---- 4 · Verifizierte Ergänzungen (Amendments) --------------------------- */
  .md-amendment-list { display: grid; gap: var(--space-2, 0.5rem); }
  .md-amendment-card {
    padding: var(--space-3, 0.75rem);
    border-radius: var(--radius-lg, 12px);
    background: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.08);
    border: 1px solid rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.35);
  }
  .md-amendment-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1, 0.25rem);
    margin-bottom: var(--space-1, 0.25rem);
  }
  .md-amendment-headmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1, 0.25rem);
  }
  .md-amendment-title { color: var(--color-text-heading); font-size: var(--font-size-sm, 0.8125rem); }
  .md-amendment-author { color: var(--color-accent-cyan, #22d3ee); }
  .md-amendment-body {
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--color-text-body);
    line-height: var(--line-height-base, 1.65);
    overflow-wrap: anywhere;
  }
  .md-amendment-source {
    margin-top: var(--space-1, 0.25rem);
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #a1b1c7);
    overflow-wrap: anywhere;
  }
  .md-amendment-source a { color: var(--color-accent-cyan, #22d3ee); }

  /* ---- 5 · Thread-Liste & Kommentar-Karten --------------------------------- */
  .md-comment-list { scroll-margin-top: calc(var(--nav-height, 60px) + var(--space-4, 1rem)); }
  .md-comment-tree,
  .md-comment-children {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
  }
  .md-comment-item { margin: 0; }
  .md-comment-card {
    padding: var(--space-3, 0.75rem);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface-card, #131c33);
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.22);
    transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  @media (hover: hover) and (pointer: fine) {
    .md-comment-card:hover { border-color: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.4); }
  }
  .md-comment-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.4);
  }

  /* Kopfzeile: Meta oben, Aktionen darunter (wrap) — Platz für 360px */
  .md-comment-headrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-1, 0.25rem);
  }
  .md-comment-headmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    min-width: 0;
  }
  .md-comment-reply-chip {
    flex-basis: 100%;
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #a1b1c7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .md-comment-title {
    color: var(--color-text-heading, #ffffff);
    font-weight: 700;
    font-size: var(--font-size-sm, 0.8125rem);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
  a.md-comment-title:hover { color: var(--color-accent-cyan, #22d3ee); }
  .md-comment-title-hint { font-size: var(--font-size-xs, 0.75rem); color: var(--color-accent-cyan, #22d3ee); }
  .md-comment-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.55rem;
    border-radius: var(--radius-full, 9999px);
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #a1b1c7);
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.55);
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.25);
  }

  /* Aktionen: Vote-Pill, Antworten, Melden — Touch-Targets mobil 44px,
     mit echtem gap statt p-0-Grafik-Buttons (Fehltipp-Schutz). */
  .md-comment-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
  }
  .md-comment-vote-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-full, 9999px);
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.6);
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.3);
  }
  .md-comment-vote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target-min, 44px);
    min-height: var(--touch-target-min, 44px);
    border: none;
    background: none;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--color-text-muted, #a1b1c7);
    cursor: pointer;
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease),
                color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  /* Vote-State-Klassen, wie sie community.js (handleVoteClick) auf die Buttons
     und den Score setzt — explizit auf Token-Ebene gespiegelt, damit die
     Bootstrap-Utilities trotz Layerordnung gewinnen. */
  .md-comment-vote-btn.text-muted { color: var(--color-text-muted, #a1b1c7); }
  .md-comment-vote-btn.text-success { color: var(--color-green, #34d399); }
  .md-comment-vote-btn.text-danger { color: var(--color-red, #f87171); }
  .md-comment-vote-score {
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-weight: 700;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #a1b1c7);
  }
  .md-comment-vote-score.is-positive { color: var(--color-green, #34d399); }
  .md-comment-vote-score.is-negative { color: var(--color-red, #f87171); }
  .md-comment-vote-score.text-success { color: var(--color-green, #34d399); }
  .md-comment-vote-score.text-danger { color: var(--color-red, #f87171); }
  .md-comment-vote-score.text-muted { color: var(--color-text-muted, #a1b1c7); }
  .md-comment-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 38px;
    padding: 0.25rem 0.85rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    background: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.12);
    border: 1px solid rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.35);
    color: var(--color-accent-cyan, #22d3ee);
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-comment-reply-btn:hover { background: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.2); }
  .md-comment-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 38px;
    border: none;
    background: none;
    padding: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted, #a1b1c7);
    opacity: 0.55;
    cursor: pointer;
  }
  .md-comment-report-btn:hover { opacity: 1; }

  /* ---- 6 · Kommentar-Text (Lesbarkeit, CVEs/URLs, Code) --------------------- */
  .md-comment-body {
    margin-top: var(--space-2, 0.5rem);
    color: var(--color-text-body, #f1f5f9);
    font-size: 1rem;
    line-height: 1.6;
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }
  /* Re-Skin der von kommentar_format_body emittierten bg-dark/text-info-
     Utilities (Light-Theme-fähig, schlägt layer(bootstrap) via Layerordnung). */
  .md-comment-body .code-snippet-box {
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.85);
    border-color: rgba(var(--color-line-rgb, 148, 163, 184), 0.3);
  }
  .md-comment-body .code-snippet-box pre {
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-accent-cyan, #22d3ee);
    overflow-x: auto;
  }
  .md-comment-body > code,
  .md-comment-body code:not(pre code) {
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.75);
    color: var(--color-accent-cyan, #22d3ee);
    border-color: rgba(var(--color-line-rgb, 148, 163, 184), 0.3);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm, 4px);
  }
  .md-comment-body img,
  .md-comment-body iframe,
  .md-comment-body video {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md, 8px);
  }

  /* ---- 7 · Emoji-Reaktionen -------------------------------------------------- */
  .md-comment-reactions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    margin-top: var(--space-2, 0.5rem);
    padding-top: var(--space-2, 0.5rem);
    border-top: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.15);
  }
  .md-comment-reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 38px;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.6);
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.3);
    color: var(--color-text-secondary, var(--color-text-body));
    cursor: pointer;
    transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease),
                background var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-comment-reaction-btn:hover { border-color: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.5); }
  .md-comment-reaction-btn.is-active[data-emoji="🔥"] {
    border-color: rgba(var(--color-red-rgb, 248, 113, 113), 0.6);
    color: var(--color-red, #f87171);
    background: rgba(var(--color-red-rgb, 248, 113, 113), 0.1);
  }
  .md-comment-reaction-btn.is-active[data-emoji="🛡️"] {
    border-color: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.6);
    color: var(--color-accent-cyan, #22d3ee);
    background: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.1);
  }
  .md-comment-reaction-btn.is-active[data-emoji="💡"] {
    border-color: rgba(var(--color-blue-rgb, 96, 165, 250), 0.6);
    color: var(--color-blue, #60a5fa);
    background: rgba(var(--color-blue-rgb, 96, 165, 250), 0.1);
  }
  .md-comment-reaction-btn.is-active[data-emoji="⚠️"] {
    border-color: rgba(245, 166, 35, 0.6);
    color: var(--color-accent, #f5a623);
    background: rgba(245, 166, 35, 0.1);
  }

  /* ---- 8 · Quick-Reply -------------------------------------------------------- */
  .md-comment-quick-reply {
    margin-top: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 8px);
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.8);
    border: 1px solid rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.35);
  }
  .md-comment-quick-reply-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-2, 0.5rem);
  }
  .md-comment-quick-reply-label {
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-accent-cyan, #22d3ee);
    min-width: 0;
  }
  .md-comment-quick-reply-label strong { color: var(--color-text-heading); overflow-wrap: anywhere; }
  .md-comment-quick-reply-close {
    flex: 0 0 auto;
    border: none;
    background: none;
    padding: 0.25rem 0.5rem;
    min-height: 38px;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #a1b1c7);
    cursor: pointer;
  }
  .md-comment-quick-reply-close:hover { color: var(--color-text); }
  .md-comment-quick-reply-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-2, 0.5rem);
  }
  .md-comment-submit-btn--sm {
    grid-column: 1 / -1;
    justify-self: start;
  }

  /* ---- 9 · Antworten-Toggle & Einklapp-Logik (CA1) -----------------------------
     Basis (mobil): Children-Listen ab Ebene 2 serverseitig .is-collapsed.
     Desktop ≥768px: klassisches Threading — CSS öffnet .is-collapsed wieder,
     außer der User hat manuell getoggelt (is-user-toggled). */
  .md-replies-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--space-2, 0.5rem);
    padding: 0.3rem 0.9rem;
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    background: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.08);
    border: 1px dashed rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.4);
    color: var(--color-accent-cyan, #22d3ee);
    cursor: pointer;
    min-height: 38px;
  }
  .md-replies-toggle:hover { background: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.15); }
  .md-comment-children.is-collapsed { display: none; }

  /* ---- 10 · Empty State --------------------------------------------------------- */
  .md-comment-empty-state {
    text-align: center;
    padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
    border-radius: var(--radius-lg, 12px);
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.6);
    border: 1px dashed rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.25);
  }
  .md-comment-empty-icon { font-size: 1.75rem; margin-bottom: var(--space-2, 0.5rem); color: var(--color-accent-cyan, #22d3ee); }
  .md-comment-empty-title { font-size: var(--font-size-base, 1rem); font-weight: 700; color: var(--color-text-heading); margin-bottom: var(--space-1, 0.25rem); }
  .md-comment-empty-text { font-size: var(--font-size-sm, 0.8125rem); color: var(--color-text-muted, #a1b1c7); margin: 0; }

  /* ---- 11 · Formular -------------------------------------------------------------- */
  .md-comment-form { scroll-margin-top: calc(var(--nav-height, 60px) + var(--space-4, 1rem)); }
  .md-comment-form-card {
    padding: var(--space-4, 1rem);
    border-radius: var(--radius-lg, 12px);
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.85);
    border: 1px solid rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.25);
  }
  .md-comment-reply-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin-bottom: var(--space-3, 0.75rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 8px);
    background: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.1);
    border: 1px solid rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.3);
  }
  .md-comment-reply-indicator.d-none { display: none; }
  .md-comment-reply-indicator-label { font-size: var(--font-size-sm, 0.8125rem); color: var(--color-text-body); }
  .md-comment-reply-indicator-label strong { color: var(--color-accent-cyan, #22d3ee); }
  .md-comment-cancel-btn {
    border: 1px solid rgba(var(--color-red-rgb, 248, 113, 113), 0.5);
    background: none;
    border-radius: var(--radius-full, 9999px);
    padding: 0.25rem 0.75rem;
    min-height: 38px;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-red, #f87171);
    cursor: pointer;
  }
  .md-comment-form-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--font-size-base, 1rem);
    font-weight: 700;
    color: var(--color-text-heading);
    margin-bottom: var(--space-3, 0.75rem);
  }
  /* 16px+ auf MOBIL stoppt den iOS Focus-Zoom — bewusst kein 15px-Inline. */
  .md-comment-input,
  .md-comment-input.form-control,
  .md-comment-input.form-select {
    display: block;
    width: 100%;
    font-size: max(1rem, 16px);
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface-card, #131c33);
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.35);
    color: var(--color-text-body, #f1f5f9);
  }
  .md-comment-input::placeholder { color: var(--color-text-muted, #a1b1c7); opacity: 1; }
  .md-comment-input:focus {
    background: var(--color-surface-card, #131c33);
    color: var(--color-text-body, #f1f5f9);
    border-color: rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.6);
    box-shadow: 0 0 0 var(--focus-ring-width, 3px) rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.25);
  }
  .md-comment-input-addon {
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.7);
    border-color: rgba(var(--color-line-rgb, 148, 163, 184), 0.35);
    color: var(--color-text-muted, #a1b1c7);
  }
  .md-comment-textarea { min-height: 6.5rem; resize: vertical; }
  .md-comment-form-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-1, 0.25rem);
  }
  .md-comment-format-hint { font-size: var(--font-size-xs, 0.75rem); color: var(--color-text-muted, #a1b1c7); }
  .md-comment-format-hint code {
    color: var(--color-accent-cyan, #22d3ee);
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.7);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-sm, 4px);
  }
  .md-comment-char-counter {
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #a1b1c7);
  }
  .md-comment-char-counter.is-limit { color: var(--color-red, #f87171); }
  .md-comment-dsgvo-link { color: var(--color-text-link, #38bdf8); }
  .md-comment-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    border: none;
    border-radius: var(--radius-full, 9999px);
    padding: 0.6rem 1.4rem;
    min-height: 46px;
    font-size: var(--font-size-base, 1rem);
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-accent-cyan, #22d3ee), var(--color-text-link, #38bdf8));
    color: #06202e;
    cursor: pointer;
    transition: filter var(--duration-fast, 150ms) var(--ease-out, ease),
                transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-comment-submit-btn:hover:not(:disabled) { filter: brightness(1.08); }
  .md-comment-submit-btn:disabled { opacity: 0.65; cursor: wait; }

  /* ---- 12 · Desktop-Enhancements (min-width, mobile-first invertiert) --------- */
  @media (min-width: 768px) {
    .md-comment-filter-row,
    .md-comment-tags-bar {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .debate-filter-group { flex-wrap: wrap; overflow-x: visible; }
    .md-comment-sort { width: auto; min-height: 36px; }
    .md-filter-pill { min-height: 36px; }
    .md-comment-vote-btn { min-width: 34px; min-height: 34px; }
    .md-comment-reply-btn, .md-comment-reaction-btn { min-height: 32px; }
    .md-comment-report-btn, .md-comment-quick-reply-close, .md-comment-cancel-btn { min-height: 32px; }
    .md-comment-avatar { width: 44px; height: 44px; }
    .md-comment-card { padding: var(--space-4, 1rem); }
    /* Klassisches Threading: Einrückung + Fadenlinie, Antwort-Chip redundant */
    .md-comment-reply-level {
      padding-inline-start: calc(var(--cmt-level, 1) * 1.25rem);
      margin-inline-start: 0.25rem;
      border-left: 2px solid rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.25);
    }
    .md-comment-reply-chip { display: none; }
    .md-replies-toggle { display: none; }
    .md-comment-children.is-collapsed:not(.is-user-toggled) { display: flex; }
    .md-comment-quick-reply-foot { grid-template-columns: 1fr 1fr auto; }
    .md-comment-submit-btn--sm { grid-column: auto; }
    .md-amendment-head { flex-direction: row; align-items: center; justify-content: space-between; }
  }

  /* ---- 13 · Container-Query: schmale Spalten (auch außerhalb des Viewports,
     z. B. Modul in Sidebar) — ersetzt weitere Viewport-MQs ------------------- */
  @container comments (max-width: 420px) {
    .md-comment-avatar { width: 34px; height: 34px; }
    .md-comment-main { gap: var(--space-2, 0.5rem) !important; }
    .md-comment-headrow { flex-direction: column; align-items: stretch; }
    .md-comment-actions { justify-content: flex-start; }
  }

  /* ---- 14 · Amendment-Dialog (native <dialog>, von community.js erzeugt) ------ */
  .ca-amendment-dialog {
    width: min(560px, calc(100vw - 2rem));
    max-height: min(85dvh, 720px);
    padding: 0;
    border: 1px solid rgba(var(--color-fastpass-rgb, 34, 211, 238), 0.35);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface, #0f1629);
    color: var(--color-text-body, #f1f5f9);
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.5));
  }
  .ca-amendment-dialog::backdrop {
    background: rgba(2, 6, 23, 0.65);
    backdrop-filter: blur(4px);
  }
  .ca-amendment-dialog form { padding: var(--space-4, 1rem); display: grid; gap: var(--space-3, 0.75rem); }
  .ca-amendment-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin: 0;
    font-size: var(--font-size-lg, 1rem);
    color: var(--color-text-heading);
  }
  .ca-amendment-article {
    margin: 0;
    font-family: var(--mono-stack, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #a1b1c7);
    overflow-wrap: anywhere;
  }
  .ca-amendment-field {
    display: grid;
    gap: var(--space-1, 0.25rem);
    font-size: var(--font-size-sm, 0.8125rem);
    font-weight: 600;
    color: var(--color-text-secondary, var(--color-text-body));
  }
  .ca-amendment-field input,
  .ca-amendment-field select,
  .ca-amendment-field textarea {
    font-size: max(1rem, 16px); /* iOS Focus-Zoom-Stop */
    font-weight: 400;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface-card, #131c33);
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.35);
    color: var(--color-text-body, #f1f5f9);
  }
  .ca-amendment-field textarea { resize: vertical; min-height: 7rem; }
  .ca-amendment-grid { display: grid; gap: var(--space-3, 0.75rem); }
  @media (min-width: 576px) {
    .ca-amendment-grid { grid-template-columns: 1fr 1fr; }
  }
  .ca-amendment-note, .ca-amendment-error {
    margin: 0;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #a1b1c7);
  }
  .ca-amendment-error { color: var(--color-red, #f87171); }
  .ca-amendment-foot { display: flex; justify-content: flex-end; gap: var(--space-2, 0.5rem); }
  .ca-amendment-cancel {
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full, 9999px);
    background: none;
    border: 1px solid rgba(var(--color-line-rgb, 148, 163, 184), 0.4);
    color: var(--color-text-secondary, var(--color-text-body));
    cursor: pointer;
  }
  .ca-amendment-submit {
    min-height: 44px;
    padding: 0.5rem 1.3rem;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: linear-gradient(135deg, var(--color-accent-cyan, #22d3ee), var(--color-text-link, #38bdf8));
    color: #06202e;
    font-weight: 700;
    cursor: pointer;
  }
  .ca-amendment-submit:disabled { opacity: 0.65; cursor: wait; }

  /* ---- 15 · Motion & Input-Modi ------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .md-comment-card,
    .md-comment-vote-btn,
    .md-filter-pill,
    .md-comment-submit-btn,
    .md-comment-reply-btn,
    .md-comment-reaction-btn { transition: none; }
  }
  @media (pointer: coarse) {
    /* WCAG 2.5.5: keine übereinander liegenden 44px-Hitareas — gap sitzt bereits
       an .md-comment-actions/.debate-filter-group. */
    .md-comment-form-card { padding: var(--space-4, 1rem) var(--space-3, 0.75rem); }
  }
  /* SWOT GX20 (04.09.2026): Touch-Navigation (MT4-Muster) — der Meldebutton ist
     mit opacity .55 nur per :hover voll opak; auf Touch blieb er dauerhaft
     gedimmt (WCAG-Kontrast). Chat-/DM-Pendants lösen das identisch. */
  @media (hover: none) {
    .md-comment-report-btn { opacity: 1; }
  }
}