/* ==========================================================================================
   OfficeOmni Community 3.0 – das ERP-Forum (Spec 2026-09-30-community-erp-forum-design.md)

   Leitidee: Das Forum ist eine Vorgangsliste. Jede Zeile zeigt Art, Status, Bereich, Beteiligte und Zahlen wie
   die Belegliste der App – ruhig, tabellarisch, dicht. Das eine auffällige Element ist der Status-Stempel
   (.cf-stamp) in der Formsprache eines Bürostempels; alles andere bleibt zurückhaltend.

   ☠️ Diese Datei wird auf JEDER Seite geladen (GlobaleStile.razor): alle Regeln hängen an .cf bzw. tragen das
   Präfix cf-. Bootstrap, Tailwind (Preflight) und MudBlazor sind ebenfalls geladen – Listen, Überschriften und
   Links darum innerhalb von .cf ausdrücklich setzen.
   ========================================================================================== */

.cf {
    --cf-font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --cf-mono: 'IBM Plex Mono', Consolas, 'Cascadia Mono', monospace;
    --cf-ink: #14263f;
    --cf-text: #2a3b52;
    --cf-muted: #5a6a80;
    --cf-faint: #7f8da1;
    --cf-line: #d9e1eb;
    --cf-line-soft: #e8edf3;
    --cf-line-strong: #c5d1df;
    --cf-ground: #f3f6fa;
    --cf-paper: #ffffff;
    --cf-hover: #f7f9fc;
    --cf-blue: #1d4ed8;
    --cf-blue-dark: #1a3fae;
    --cf-blue-wash: #eaf0ff;
    --cf-green: #157347;
    --cf-green-wash: #e8f5ee;
    --cf-amber: #9a5b00;
    --cf-amber-wash: #fdf3e2;
    --cf-violet: #5b3cc4;
    --cf-violet-wash: #f1edfd;
    --cf-red: #b42318;
    --cf-kopf: 65px;
    --cf-leiste: 52px;
    background: var(--cf-ground);
    color: var(--cf-text);
    font-family: var(--cf-font);
    font-size: 15px;
    line-height: 1.6;
    min-height: 70vh;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 72px;
}
.cf *, .cf *::before, .cf *::after { box-sizing: border-box; }
/* Grundwerte mit :where() – Spezifität 0, damit jede Komponentenklasse sie überschreibt. */
:where(.cf) :is(h1, h2, h3, h4) { font-family: var(--cf-font); color: var(--cf-ink); margin: 0; letter-spacing: -.012em; font-weight: 650; line-height: 1.3; }
:where(.cf) p { margin: 0; }
:where(.cf) :is(ul, ol) { margin: 0; padding: 0; }
:where(.cf) a { color: var(--cf-blue); text-decoration: none; }
:where(.cf) a:hover { color: var(--cf-blue-dark); }
:where(.cf) :is(button, input, select, textarea) { font-family: var(--cf-font); }
.cf :is(a, button, input, select, textarea, summary, label, [tabindex]):focus-visible { outline: 3px solid #7ea0ef; outline-offset: 2px; border-radius: 6px; }
.cf .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400; font-size: 20px; line-height: 1; flex-shrink: 0; }
.cf .cf-fill { font-variation-settings: 'FILL' 1, 'wght' 400; }
.cf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.cf-wrap { width: 100%; max-width: 1216px; margin: 0 auto; padding: 0 24px; }
.cf-num-tab { font-variant-numeric: tabular-nums; }

/* ---------- Schaltflächen ---------- */
.cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--cf-line-strong); background: var(--cf-paper); color: var(--cf-ink); font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.cf-btn:hover { background: #f4f7fb; border-color: #b3c2d5; color: var(--cf-ink); text-decoration: none; }
.cf-btn .material-symbols-outlined { font-size: 19px; }
.cf-btn:disabled, .cf-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.cf-btn--primary { background: var(--cf-blue); border-color: var(--cf-blue); color: #fff; }
.cf-btn--primary:hover { background: var(--cf-blue-dark); border-color: var(--cf-blue-dark); color: #fff; }
.cf-btn--quiet { border-color: transparent; background: transparent; color: var(--cf-muted); font-weight: 500; padding: 0 9px; min-height: 34px; }
.cf-btn--quiet:hover { background: #eaf0f6; border-color: transparent; color: var(--cf-ink); }
.cf-btn--quiet[aria-pressed="true"] { color: var(--cf-blue); }
.cf-btn--gruen { color: var(--cf-green); border-color: #9fcdb3; }
.cf-btn--gruen:hover { background: var(--cf-green-wash); border-color: #7fbd9b; color: #0f5c38; }
.cf-btn--gefahr { color: var(--cf-red); }
.cf-btn--gefahr:hover { background: #fdf0ef; color: #8f1c13; }
.cf-btn--gross { min-height: 44px; padding: 0 18px; font-size: 15px; }
.cf-btn--klein { min-height: 32px; padding: 0 10px; font-size: 13px; }
.cf-iconbtn { width: 38px; min-height: 38px; padding: 0; }

/* ---------- Community-Leiste (Unternavigation) ---------- */
.cf-bar { position: sticky; top: var(--cf-kopf); z-index: 900; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--cf-line); }
.cf-bar__inner { display: flex; align-items: center; gap: 18px; height: var(--cf-leiste); }
.cf-bar__brand { display: inline-flex; align-items: center; gap: 8px; color: var(--cf-ink); font-weight: 700; font-size: 15px; white-space: nowrap; }
.cf-bar__brand:hover { color: var(--cf-ink); }
.cf-bar__brand .material-symbols-outlined { color: var(--cf-blue); font-size: 22px; }
.cf-bar__nav { display: flex; align-self: stretch; gap: 2px; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
.cf-bar__nav::-webkit-scrollbar { display: none; }
.cf-bar__nav a { display: flex; align-items: center; gap: 6px; padding: 0 11px; color: var(--cf-muted); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.cf-bar__nav a:hover { color: var(--cf-ink); }
.cf-bar__nav a[aria-current="page"] { color: var(--cf-ink); font-weight: 600; border-bottom-color: var(--cf-blue); }
.cf-bar__actions { margin-left: auto; display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.cf-bell { position: relative; }
.cf-bell__zahl { position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; border: 2px solid #fff; background: #d92d20; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.cf-popover-schleier { position: fixed; inset: 0; z-index: 940; background: transparent; }
.cf-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 950; width: min(380px, calc(100vw - 24px)); background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(20, 38, 63, .16); overflow: hidden; }
/* Das Popover nimmt beim Öffnen den Fokus auf (tabindex -1): der Ring der Tastatur-Fokusregel oben setzt border-radius 6px – hier bleibt die Rundung des Popovers. */
.cf .cf-popover:focus-visible { border-radius: 12px; }
.cf-popover__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--cf-line-soft); }
.cf-popover__head h2 { font-size: 15px; }
.cf-popover__foot { display: block; padding: 10px 14px; border-top: 1px solid var(--cf-line-soft); font-size: 14px; font-weight: 600; text-align: center; }

/* ---------- Kopf der Übersicht ---------- */
.cf-head { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 32px; align-items: end; padding: 30px 0 24px; }
.cf-head h1 { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.022em; }
.cf-head__lead { margin-top: 8px; max-width: 62ch; color: var(--cf-muted); font-size: 16px; }
.cf-search { position: relative; margin-top: 18px; }
.cf-search__feld { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px; background: var(--cf-paper); border: 1px solid var(--cf-line-strong); border-radius: 10px; box-shadow: 0 1px 2px rgba(20, 38, 63, .05); }
.cf-search__feld:focus-within { border-color: var(--cf-blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, .16); }
.cf-search__feld > .material-symbols-outlined { color: var(--cf-faint); }
.cf-search input { flex: 1; min-width: 0; padding: 10px 6px; border: 0; outline: 0; background: transparent; color: var(--cf-ink); font-size: 16px; }
.cf-search input::placeholder { color: #7d8ba0; opacity: 1; }
.cf .cf-search input:focus-visible { outline: 0; }
.cf-search__vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: 10px; box-shadow: 0 16px 40px rgba(20, 38, 63, .15); overflow: hidden; }
.cf-search__vorschlaege a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--cf-text); font-size: 14px; }
.cf-search__vorschlaege a + a { border-top: 1px solid var(--cf-line-soft); }
.cf-search__vorschlaege a:hover, .cf-search__vorschlaege a:focus-visible { background: var(--cf-hover); color: var(--cf-ink); }
.cf-search__alle { font-weight: 600; color: var(--cf-blue) !important; }
.cf-search__hinweise { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; font-size: 13px; color: var(--cf-muted); }

/* Forum in Zahlen: ein kleiner Auszug wie aus einem Kontoblatt, mit Punktlinien. */
.cf-ledger { background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: 10px; padding: 14px 16px 12px; }
.cf-ledger__titel { font-size: 13px; font-weight: 600; color: var(--cf-muted); margin-bottom: 6px; }
.cf-ledger dl { margin: 0; display: grid; gap: 3px; }
.cf-ledger dl > div { display: flex; align-items: baseline; font-size: 14px; }
.cf-ledger dt { flex: 1; display: flex; align-items: baseline; color: var(--cf-text); font-weight: 400; }
.cf-ledger dt::after { content: ""; flex: 1; min-width: 12px; margin: 0 8px; border-bottom: 1px dotted #aebbcc; transform: translateY(-4px); }
.cf-ledger dd { margin: 0; font-weight: 600; color: var(--cf-ink); font-variant-numeric: tabular-nums; }
.cf-ledger a { color: inherit; }
.cf-ledger a:hover { color: var(--cf-blue); }

/* ---------- Seitenaufbau ---------- */
.cf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; align-items: start; }
.cf-main { min-width: 0; }
.cf-rail { display: grid; gap: 16px; min-width: 0; }
.cf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.cf-section-head h2 { font-size: 20px; }
.cf-section-head p, .cf-section-head > span { color: var(--cf-muted); font-size: 14px; }
.cf-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 18px; font-size: 13px; color: var(--cf-muted); }
.cf-crumbs a { color: var(--cf-muted); }
.cf-crumbs a:hover { color: var(--cf-ink); text-decoration: underline; text-underline-offset: 3px; }
.cf-crumbs .material-symbols-outlined { font-size: 16px; color: var(--cf-faint); }

/* ---------- Karteireiter + Blatt ---------- */
.cf-tabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--cf-line); overflow-x: auto; scrollbar-width: none; }
.cf-tabs::-webkit-scrollbar { display: none; }
.cf-tab { display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; padding: 9px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; color: var(--cf-muted); font-size: 14px; font-weight: 500; white-space: nowrap; background: none; cursor: pointer; }
.cf-tab:hover { color: var(--cf-ink); background: rgba(255, 255, 255, .55); }
.cf-tab[aria-current="page"], .cf-tab[aria-selected="true"] { background: var(--cf-paper); border-color: var(--cf-line); color: var(--cf-ink); font-weight: 600; }
.cf-tab .material-symbols-outlined { font-size: 18px; }
.cf-tab__zahl { padding: 0 7px; border-radius: 999px; background: #e9eef5; color: var(--cf-muted); font-size: 12px; font-weight: 600; line-height: 1.6; font-variant-numeric: tabular-nums; }
.cf-sheet { background: var(--cf-paper); border: 1px solid var(--cf-line); border-top: 0; border-radius: 0 0 10px 10px; }
.cf-sheet--rund { border-top: 1px solid var(--cf-line); border-radius: 10px; }
.cf-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border-bottom: 1px solid var(--cf-line-soft); color: var(--cf-muted); font-size: 13px; }
.cf-toolbar__rechts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cf-feld-inline { display: inline-flex; align-items: center; gap: 7px; }
.cf-select { min-height: 34px; padding: 0 28px 0 10px; border: 1px solid var(--cf-line-strong); border-radius: 7px; background-color: var(--cf-paper); color: var(--cf-ink); font-size: 13.5px; max-width: 100%; }
.cf-filterzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cf-filterzeile strong { font-weight: 600; color: var(--cf-text); }

/* ---------- Vorgangsliste ---------- */
.cf-list { list-style: none; margin: 0; padding: 0; }
.cf-list__kopf, .cf-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) repeat(2, 58px) 138px; gap: 0 14px; align-items: center; padding: 0 16px; }
.cf-list__kopf { padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--cf-line-soft); background: #fbfcfe; color: var(--cf-faint); font-size: 12px; }
.cf-list__kopf .cf-num { font-weight: 500; }
.cf-row { position: relative; padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--cf-line-soft); }
.cf-list > .cf-row:first-child { border-top: 0; }
.cf-row:hover { background: var(--cf-hover); }
.cf-row--pin { box-shadow: inset 3px 0 0 #d8a31a; }
.cf-row--neu .cf-row__titel::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--cf-blue); vertical-align: middle; }
.cf-row__status { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.cf-row__art { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-muted); font-size: 12.5px; }
.cf-row__art .material-symbols-outlined { font-size: 16px; }
.cf-row__main { min-width: 0; }
.cf-row__titel { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--cf-ink); overflow-wrap: anywhere; }
.cf-row__titel a { color: inherit; }
.cf-row__titel a::after { content: ""; position: absolute; inset: 0; }
.cf-row__titel a:hover { color: var(--cf-blue); }
.cf-row__titel .material-symbols-outlined { font-size: 17px; color: #b4830f; vertical-align: -3px; margin-right: 3px; }
.cf-row__auszug { margin-top: 2px; color: var(--cf-muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cf-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 7px; color: var(--cf-muted); font-size: 13px; }
.cf-row__meta a, .cf-row__status a, .cf-row__aktiv a { position: relative; z-index: 1; }
.cf-person { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-text); min-width: 0; }
.cf-person__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cf-person:hover .cf-person__name { text-decoration: underline; text-underline-offset: 3px; }
.cf-num { text-align: right; font-variant-numeric: tabular-nums; }
.cf-num strong { display: block; font-size: 16px; font-weight: 600; color: var(--cf-ink); line-height: 1.3; }
.cf-num span { display: block; font-size: 11.5px; color: var(--cf-faint); }
.cf-num--null strong { color: #9aa6b6; font-weight: 500; }
.cf-num--gruen strong { color: var(--cf-green); }
.cf-row__aufrufe { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-faint); font-variant-numeric: tabular-nums; }
.cf-row__aufrufe .material-symbols-outlined { font-size: 16px; }
.cf-row__aktiv { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13px; color: var(--cf-muted); }
.cf-row__aktiv > div { min-width: 0; }
.cf-row__aktiv-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.cf-row__aktiv strong { display: block; color: var(--cf-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Status-Stempel ---------- */
.cf-stamp { --c: #5a6a80; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border: 1.5px solid var(--c); border-radius: 5px; background: color-mix(in srgb, var(--c) 7%, #fff); box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 2.5px color-mix(in srgb, var(--c) 38%, transparent); color: var(--c); font-size: 12px; font-weight: 650; line-height: 1.45; letter-spacing: .01em; white-space: nowrap; }
.cf-stamp .material-symbols-outlined { font-size: 15px; }
.cf-stamp--geloest { --c: var(--cf-green); }
.cf-stamp--offen { --c: var(--cf-amber); }
.cf-stamp--beantwortet { --c: #2c5d9f; }
.cf-stamp--neu { --c: #52627a; }
.cf-stamp--pruefung { --c: var(--cf-violet); }
.cf-stamp--geplant { --c: #1f56c4; }
.cf-stamp--umsetzung { --c: #a05a00; }
.cf-stamp--umgesetzt { --c: var(--cf-green); }
.cf-stamp--abgelehnt { --c: #6f7887; }
.cf-stamp--anleitung { --c: #2f6a78; }
.cf-stamp--ankuendigung { --c: #7a4a9e; }
.cf-stamp--diskussion { --c: #4c5d78; }
.cf-stamp--gesperrt { --c: #6f7887; }
.cf-stamp--gross { padding: 5px 13px 5px 10px; border-width: 2px; border-radius: 7px; font-size: 15px; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3.5px color-mix(in srgb, var(--c) 42%, transparent); transform: rotate(-3deg); transform-origin: center; }
.cf-stamp--gross .material-symbols-outlined { font-size: 19px; }

/* ---------- Avatare, Chips, Plaketten ---------- */
.cf-avatar { --h: 214; width: 28px; height: 28px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 50%; background: hsl(var(--h) 62% 91%); color: hsl(var(--h) 46% 27%); font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1; user-select: none; }
.cf-avatar--m { width: 36px; height: 36px; font-size: 13px; }
.cf-avatar--l { width: 72px; height: 72px; font-size: 26px; }
.cf-avatar--team { background: var(--cf-ink); color: #fff; }
.cf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 7px; border: 1px solid var(--cf-line); border-radius: 999px; background: var(--cf-paper); color: #34496a; font-size: 12.5px; line-height: 1.65; white-space: nowrap; cursor: default; }
.cf-chip .material-symbols-outlined { font-size: 15px; color: #3e67c7; }
a.cf-chip, button.cf-chip { cursor: pointer; }
a.cf-chip:hover, button.cf-chip:hover { border-color: #b2c2d8; background: #f4f7fc; color: var(--cf-ink); }
.cf-chip[aria-pressed="true"], .cf-chip.is-aktiv { border-color: #95b0ef; background: var(--cf-blue-wash); color: #183f9e; }
.cf-chip__zahl { color: var(--cf-faint); font-variant-numeric: tabular-nums; }
.cf-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 4px; font-size: 11.5px; font-weight: 650; line-height: 1; white-space: nowrap; }
.cf-badge .material-symbols-outlined { font-size: 13px; }
.cf-badge--team { background: var(--cf-ink); color: #fff; }
.cf-badge--starter { background: var(--cf-blue-wash); color: #1e3f96; }
.cf-badge--loesung { background: var(--cf-green-wash); color: var(--cf-green); }
.cf-badge--grau { background: #edf1f6; color: var(--cf-muted); }

/* ---------- Seitenleiste ---------- */
.cf-block { background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: 10px; padding: 16px; }
.cf-block h2 { font-size: 15px; font-weight: 650; margin-bottom: 10px; }
.cf-block > p { color: var(--cf-muted); font-size: 14px; }
.cf-block__foot { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; }
.cf-block--aufruf { background: var(--cf-ink); border-color: var(--cf-ink); color: #dbe5f3; }
.cf-block--aufruf h2 { color: #fff; font-size: 17px; margin-bottom: 6px; }
.cf-block--aufruf p { color: #c3d0e2; font-size: 14px; }
.cf-block--aufruf .cf-btn { margin-top: 14px; width: 100%; }
.cf-block--aufruf .cf-btn--primary { background: #fff; border-color: #fff; color: var(--cf-ink); }
.cf-block--aufruf .cf-btn--primary:hover { background: #e7eef8; border-color: #e7eef8; color: var(--cf-ink); }
.cf-block--aufruf .cf-btn:not(.cf-btn--primary) { background: transparent; border-color: #50658a; color: #fff; margin-top: 8px; }
.cf-block--aufruf .cf-btn:not(.cf-btn--primary):hover { background: rgba(255, 255, 255, .08); }
.cf-rail-list { list-style: none; margin: 0 -8px; padding: 0; display: grid; gap: 1px; }
.cf-rail-list a, .cf-rail-list > li > span { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; color: var(--cf-text); font-size: 14px; line-height: 1.4; }
.cf-rail-list a:hover { background: var(--cf-hover); color: var(--cf-ink); }
.cf-rail-list .material-symbols-outlined { font-size: 19px; color: #4f6f9f; }
.cf-rail-list__text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.cf-rail-list__text small { display: block; color: var(--cf-muted); font-size: 12.5px; }
.cf-count { margin-left: auto; color: var(--cf-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cf-hinweis { display: flex; gap: 8px; align-items: flex-start; color: var(--cf-muted); font-size: 13px; line-height: 1.55; }
.cf-hinweis .material-symbols-outlined { font-size: 18px; margin-top: 1px; }

/* ---------- Themenbereiche ---------- */
.cf-bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; }
.cf-bereich { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px; background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: 10px; color: var(--cf-text); }
.cf-bereich:hover { border-color: #b2c2d8; box-shadow: 0 2px 10px rgba(20, 38, 63, .06); color: var(--cf-text); }
.cf-bereich__icon { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: #edf2fc; color: #2f5bb8; }
.cf-bereich__titel { font-size: 14.5px; font-weight: 650; color: var(--cf-ink); line-height: 1.35; }
.cf-bereich__text { color: var(--cf-muted); font-size: 13px; line-height: 1.5; }
.cf-bereich__zahl { grid-column: 2; margin-top: 2px; color: var(--cf-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* ---------- Seitenwahl ---------- */
.cf-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--cf-line-soft); color: var(--cf-muted); font-size: 13px; }
.cf-pager__nummern { display: flex; align-items: center; gap: 4px; }
.cf-pager__nummern a, .cf-pager__nummern button, .cf-pager__nummern span { min-width: 34px; height: 34px; padding: 0 8px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--cf-text); font-size: 13.5px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cf-pager__nummern span { cursor: default; }
.cf-pager__nummern a:hover, .cf-pager__nummern button:hover { background: #eaf0f6; color: var(--cf-ink); }
.cf-pager__nummern [aria-current="page"] { background: var(--cf-ink); color: #fff; font-weight: 600; }

/* ---------- Leer, Hinweise, Laden ---------- */
.cf-empty { padding: 44px 24px; text-align: center; }
.cf-empty > .material-symbols-outlined { font-size: 38px; color: #7d97bd; }
.cf-empty h2, .cf-empty h3 { margin: 12px 0 6px; font-size: 18px; }
.cf-empty p { max-width: 54ch; margin: 0 auto; color: var(--cf-muted); font-size: 14.5px; }
.cf-empty__aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.cf-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid #f0d49e; border-radius: 9px; background: #fff8ea; color: #6b4a12; font-size: 14px; line-height: 1.5; }
.cf-alert .material-symbols-outlined { font-size: 20px; margin-top: 1px; }
.cf-alert--fehler { border-color: #f1c4be; background: #fdf1f0; color: #8a2419; }
.cf-alert--info { border-color: #c8d7f6; background: #eff4ff; color: #1d3a83; }
.cf-alert--ok { border-color: #b6dcc6; background: #eef8f2; color: #145c38; }
.cf-alert .cf-btn { margin-left: auto; }
.cf-laden { padding: 16px; }

/* ---------- Thema ---------- */
.cf-thread { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
.cf-thread__head { padding: 14px 0 22px; }
.cf-thread__zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.cf-thread__titel { font-size: 30px; line-height: 1.22; font-weight: 700; letter-spacing: -.02em; max-width: 46ch; overflow-wrap: anywhere; }
.cf-thread__stempel { flex-shrink: 0; padding-top: 6px; }
.cf-thread__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; color: var(--cf-muted); font-size: 14px; }
.cf-thread__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.cf-thread__meta .material-symbols-outlined { font-size: 18px; color: var(--cf-faint); }
.cf-thread__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cf-mod { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 14px; padding: 8px 10px; border: 1px dashed #b9c6d8; border-radius: 9px; background: #f8fafc; font-size: 13px; color: var(--cf-muted); }
.cf-mod > strong { color: var(--cf-text); font-weight: 600; margin-right: 4px; display: inline-flex; align-items: center; gap: 5px; }
.cf-mod .cf-select { min-height: 32px; }
.cf-post { display: grid; grid-template-columns: 60px minmax(0, 1fr); background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: 10px; scroll-margin-top: calc(var(--cf-kopf) + var(--cf-leiste) + 16px); }
.cf-post + .cf-post { margin-top: 12px; }
.cf-post--frage { border-color: #c7d3e3; }
.cf-post--loesung { border-color: #9fcdb3; box-shadow: inset 4px 0 0 var(--cf-green); }
.cf-post--ziel { box-shadow: 0 0 0 3px rgba(29, 78, 216, .18); }
.cf-post--loesung.cf-post--ziel { box-shadow: inset 4px 0 0 var(--cf-green), 0 0 0 3px rgba(21, 115, 71, .2); }
.cf-post--ausgeblendet { background: repeating-linear-gradient(-45deg, #fafbfd 0 10px, #f3f5f8 10px 20px); }
.cf-vote { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 0; border-right: 1px solid var(--cf-line-soft); }
.cf-vote__knopf { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--cf-line); border-radius: 10px; background: var(--cf-paper); color: var(--cf-muted); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.cf-vote__knopf:hover:not(:disabled) { border-color: #9db4e6; color: var(--cf-blue); background: #f5f8ff; }
.cf-vote__knopf[aria-pressed="true"] { border-color: #93adea; background: var(--cf-blue-wash); color: var(--cf-blue); }
.cf-vote__knopf:disabled { cursor: default; opacity: .6; }
.cf-vote strong { font-size: 16px; font-weight: 650; color: var(--cf-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.cf-vote small { font-size: 11px; color: var(--cf-faint); }
.cf-post__body { min-width: 0; padding: 14px 20px 12px; }
.cf-post__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.cf-post__autor { display: inline-flex; align-items: center; gap: 8px; color: var(--cf-ink); font-weight: 600; }
.cf-post__autor:hover .cf-post__name { text-decoration: underline; text-underline-offset: 3px; }
.cf-post__zeit { color: var(--cf-muted); font-size: 13px; }
.cf-post__anker { margin-left: auto; color: var(--cf-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.cf-post__anker:hover { color: var(--cf-ink); }
.cf-post__bearbeitet { margin-top: 8px; color: var(--cf-faint); font-size: 12.5px; }
.cf-post__ausgeblendet { margin-top: 10px; display: flex; align-items: center; gap: 8px; color: var(--cf-muted); font-size: 14px; font-style: italic; }
.cf-post__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--cf-line-soft); }
.cf-post__aktionen .cf-rechts { margin-left: auto; }
.cf-bestaetigen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 8px; background: #fdf1f0; color: #8a2419; font-size: 13px; }
.cf-loesung { margin: 12px 0 0; padding: 14px 16px; border: 1px solid #b6dcc6; border-radius: 10px; background: var(--cf-green-wash); }
.cf-loesung__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: #0f5c38; font-size: 14px; font-weight: 650; }
.cf-loesung__kopf .material-symbols-outlined { color: var(--cf-green); }
.cf-loesung__text { margin-top: 6px; color: #1e4a33; font-size: 14.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cf-loesung a { font-weight: 600; color: #0f5c38; }
.cf-idee-box { margin: 12px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: center; padding: 14px 16px; border: 1px solid #d6cdf6; border-radius: 10px; background: var(--cf-violet-wash); }
.cf-idee-box__stimme { display: flex; align-items: center; gap: 12px; }
.cf-idee-box__zahl strong { display: block; font-size: 22px; font-weight: 700; color: var(--cf-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cf-idee-box__zahl span { font-size: 12.5px; color: var(--cf-muted); }
.cf-idee-box__notiz { color: #3e2f7a; font-size: 14px; }
.cf-idee-box__notiz strong { color: #2e2266; }
.cf-antworten-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 26px 0 12px; }
.cf-antworten-kopf h2 { font-size: 19px; }
.cf-reply { margin-top: 18px; padding: 18px 20px; background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: 10px; scroll-margin-top: calc(var(--cf-kopf) + var(--cf-leiste) + 16px); }
.cf-reply h2 { font-size: 17px; margin-bottom: 4px; }
.cf-reply > p { color: var(--cf-muted); font-size: 14px; margin-bottom: 12px; }
.cf-reply__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; color: var(--cf-muted); font-size: 13px; }
.cf-thread-rail { position: sticky; top: calc(var(--cf-kopf) + var(--cf-leiste) + 16px); display: grid; gap: 14px; }
.cf-aktionen-block { display: grid; gap: 8px; }
.cf-aktionen-block .cf-btn { justify-content: flex-start; width: 100%; }
.cf-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.cf-kennzahlen strong { display: block; font-size: 18px; font-weight: 650; color: var(--cf-ink); font-variant-numeric: tabular-nums; }
.cf-kennzahlen span { font-size: 12px; color: var(--cf-muted); }
.cf-zurueck { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-size: 14px; font-weight: 600; }

/* Beitragsinhalt (bereinigtes HTML aus dem Editor) */
.cf-content { max-width: 76ch; margin-top: 10px; color: var(--cf-text); font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; }
.cf-content > :last-child { margin-bottom: 0; }
.cf-content p { margin: 0 0 .85em; }
.cf-content h1, .cf-content h2, .cf-content h3, .cf-content h4 { margin: 1.2em 0 .5em; line-height: 1.35; }
.cf-content h1 { font-size: 21px; }
.cf-content h2 { font-size: 19px; }
.cf-content h3, .cf-content h4 { font-size: 16.5px; }
.cf-content ul { list-style: disc; padding-left: 1.35em; margin: .3em 0 .95em; }
.cf-content ol { list-style: decimal; padding-left: 1.45em; margin: .3em 0 .95em; }
.cf-content li { margin: .2em 0; }
.cf-content li::marker { color: #6c7f99; }
.cf-content a { color: var(--cf-blue); text-decoration: underline; text-underline-offset: 2px; }
.cf-content strong, .cf-content b { font-weight: 650; color: var(--cf-ink); }
.cf-content blockquote { margin: 1em 0; padding: 8px 14px; border-left: 3px solid #b3c3d9; border-radius: 0 7px 7px 0; background: #f4f7fa; color: #3b5070; }
.cf-content blockquote p:last-child { margin-bottom: 0; }
.cf-content code { padding: 1px 5px; border-radius: 4px; background: #eef2f7; font-family: var(--cf-mono); font-size: .9em; }
.cf-content pre { margin: 1em 0; padding: 12px 14px; border-radius: 8px; background: #102038; color: #e3eaf4; font-family: var(--cf-mono); font-size: 13.5px; line-height: 1.55; white-space: pre; overflow-x: auto; }
.cf-content pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.cf-content hr { border: 0; border-top: 1px solid var(--cf-line); margin: 1.4em 0; }
.cf-content s, .cf-content strike, .cf-content del { color: var(--cf-muted); }

/* ---------- Neues Thema ---------- */
.cf-compose { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.cf-step { padding: 18px 20px; background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: 10px; }
.cf-step + .cf-step { margin-top: 12px; }
.cf-step__kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.cf-step__nr { width: 24px; height: 24px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 50%; background: var(--cf-ink); color: #fff; font-size: 12px; font-weight: 700; transform: translateY(-1px); }
.cf-step__kopf h2 { font-size: 16px; }
.cf-step__kopf p { color: var(--cf-muted); font-size: 13.5px; }
.cf-arten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cf-art { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--cf-line); border-radius: 10px; background: var(--cf-paper); cursor: pointer; transition: border-color .15s, background-color .15s; }
.cf-art:hover { border-color: #aebfd6; }
.cf-art input { position: absolute; opacity: 0; pointer-events: none; }
.cf-art:has(input:checked) { border-color: var(--cf-blue); background: #f6f8ff; box-shadow: 0 0 0 1px var(--cf-blue); }
.cf-art:has(input:focus-visible) { outline: 3px solid #7ea0ef; outline-offset: 2px; }
.cf-art__icon { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; background: #edf2fc; color: #2f5bb8; }
.cf-art strong { display: block; color: var(--cf-ink); font-size: 14.5px; font-weight: 650; }
.cf-art small { display: block; margin-top: 1px; color: var(--cf-muted); font-size: 13px; line-height: 1.45; }
.cf-feld { display: grid; gap: 6px; }
.cf-feld + .cf-feld { margin-top: 14px; }
.cf-feld > label, .cf-feld__label { color: var(--cf-ink); font-size: 14px; font-weight: 600; }
.cf-input, .cf-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--cf-line-strong); border-radius: 8px; background: var(--cf-paper); color: var(--cf-ink); font-size: 15px; line-height: 1.45; }
.cf-input:focus, .cf-textarea:focus, .cf-select:focus { border-color: var(--cf-blue); box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); outline: 0; }
.cf-feld__fuss { display: flex; justify-content: space-between; gap: 12px; color: var(--cf-muted); font-size: 12.5px; }
.cf-aehnlich { margin-top: 10px; padding: 10px 12px; border: 1px solid #efd8a4; border-radius: 9px; background: #fffaf0; }
.cf-aehnlich > strong { display: flex; align-items: center; gap: 6px; color: #6b4a12; font-size: 13.5px; font-weight: 650; }
.cf-aehnlich ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.cf-aehnlich a { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--cf-ink); font-size: 14px; }
.cf-aehnlich a:hover { color: var(--cf-blue); }
.cf-bereichswahl { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-vorschau { margin-top: 12px; padding: 14px 16px; border: 1px dashed #b7c6da; border-radius: 10px; background: #fbfcfe; }
.cf-vorschau__label { color: var(--cf-muted); font-size: 12.5px; font-weight: 600; }
.cf-vorschau h3 { margin-top: 6px; font-size: 18px; }
.cf-compose__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.cf-compose__fuss p { margin-right: auto; color: var(--cf-muted); font-size: 13px; }
.cf-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cf-schritte li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.cf-schritte .material-symbols-outlined { font-size: 20px; color: var(--cf-green); }
.cf-schritte strong { display: block; color: var(--cf-ink); font-weight: 600; }
.cf-schritte span { color: var(--cf-muted); font-size: 13.5px; }
.cf-als { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* ---------- Ideen ---------- */
.cf-ideen-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 28px 0 20px; }
.cf-ideen-kopf h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.cf-ideen-kopf p { margin-top: 6px; max-width: 64ch; color: var(--cf-muted); font-size: 16px; }
.cf-idee { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) 132px; gap: 0 16px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--cf-line-soft); }
.cf-list > .cf-idee:first-child { border-top: 0; }
.cf-idee:hover { background: var(--cf-hover); }
.cf-idee__stimme { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border: 1px solid var(--cf-line); border-radius: 10px; background: var(--cf-paper); }
.cf-idee__stimme strong { font-size: 18px; font-weight: 700; color: var(--cf-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.cf-idee__stimme span { font-size: 11px; color: var(--cf-faint); }
.cf-idee__status { justify-self: end; }

/* ---------- Profil, Mein Bereich, Moderation ---------- */
.cf-profil-kopf { display: flex; align-items: center; gap: 20px; padding: 26px 0 22px; }
.cf-profil-kopf h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cf-profil-kopf p { margin-top: 4px; color: var(--cf-muted); font-size: 14.5px; }
.cf-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.cf-kachel { padding: 14px 16px; background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: 10px; }
.cf-kachel strong { display: block; font-size: 24px; font-weight: 700; color: var(--cf-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.cf-kachel span { color: var(--cf-muted); font-size: 13px; }
.cf-eintraege { list-style: none; margin: 0; padding: 0; }
.cf-eintrag { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--cf-line-soft); }
.cf-eintraege > .cf-eintrag:first-child { border-top: 0; }
.cf-eintrag:hover { background: var(--cf-hover); }
.cf-eintrag--ungelesen { background: #f6f9ff; }
.cf-eintrag--ungelesen::before { content: ""; position: absolute; left: 6px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: var(--cf-blue); }
.cf-eintrag__icon { width: 32px; height: 32px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #edf2fc; color: #2f5bb8; }
.cf-eintrag__icon--gruen { background: var(--cf-green-wash); color: var(--cf-green); }
.cf-eintrag__icon--violett { background: var(--cf-violet-wash); color: var(--cf-violet); }
.cf-eintrag__text { min-width: 0; flex: 1; font-size: 14px; color: var(--cf-text); }
.cf-eintrag__text a { color: var(--cf-ink); font-weight: 600; }
.cf-eintrag__text a::after { content: ""; position: absolute; inset: 0; }
.cf-eintrag__was { display: block; color: var(--cf-muted); font-size: 13px; }
.cf-eintrag__titel { display: block; }
.cf-eintrag__text small { display: block; margin-top: 2px; color: var(--cf-muted); font-size: 12.5px; }
.cf-eintrag__auszug { margin-top: 3px; color: var(--cf-muted); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cf-einstellungen { display: grid; gap: 16px; max-width: 560px; padding: 18px 20px; }
.cf-schalter { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.cf-schalter input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--cf-blue); }
.cf-schalter small { display: block; color: var(--cf-muted); font-size: 13px; }
.cf-meldung { padding: 14px 16px; border-top: 1px solid var(--cf-line-soft); display: grid; gap: 8px; }
.cf-meldung:first-child { border-top: 0; }
.cf-meldung__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; color: var(--cf-muted); }
.cf-meldung__kopf strong { color: var(--cf-ink); }
.cf-meldung__zitat { padding: 8px 12px; border-left: 3px solid var(--cf-line-strong); background: #f7f9fc; color: var(--cf-text); font-size: 14px; }
.cf-meldung__aktionen { display: flex; flex-wrap: wrap; gap: 6px; }

/* Dialog „Beitrag melden“ */
.cf-dialog { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 16px; background: rgba(15, 27, 46, .45); }
.cf-dialog__box { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px; background: var(--cf-paper); border-radius: 12px; box-shadow: 0 24px 64px rgba(15, 27, 46, .3); }
.cf-dialog__box h2 { font-size: 18px; }
.cf-dialog__box > p { margin-top: 6px; color: var(--cf-muted); font-size: 14px; }
.cf-gruende { display: grid; gap: 6px; margin-top: 14px; }
.cf-gruende label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--cf-line); border-radius: 8px; font-size: 14px; cursor: pointer; }
.cf-gruende label:has(input:checked) { border-color: var(--cf-blue); background: #f6f8ff; }
.cf-dialog__fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Textseiten (Regeln, Abmelden) */
.cf-text-seite { max-width: 780px; padding: 18px 0 0; }
.cf-text-seite h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.cf-text-seite > p { margin-top: 8px; color: var(--cf-muted); font-size: 16px; }
.cf-regeln { margin-top: 22px; padding: 6px 24px; background: var(--cf-paper); border: 1px solid var(--cf-line); border-radius: 10px; }
.cf-regeln section { padding: 18px 0; border-top: 1px solid var(--cf-line-soft); }
.cf-regeln section:first-child { border-top: 0; }
.cf-regeln h2 { font-size: 17px; margin-bottom: 6px; }
.cf-regeln p { color: var(--cf-text); font-size: 15px; }
.cf-regeln p + p { margin-top: 8px; }

/* ---------- Breiten ---------- */
@media (max-width: 1180px) {
    .cf-list__kopf, .cf-row { grid-template-columns: 96px minmax(0, 1fr) repeat(2, 54px) 124px; gap: 0 12px; }
    .cf-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; }
    .cf-thread { grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; }
}
@media (max-width: 1024px) {
    .cf { --cf-kopf: 48px; }
}
@media (max-width: 920px) {
    .cf-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cf-layout, .cf-thread, .cf-compose { grid-template-columns: minmax(0, 1fr); }
    .cf-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-thread-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-list__kopf { display: none; }
    .cf-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding-top: 14px; padding-bottom: 14px; }
    .cf-row__status { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    .cf-row__main { grid-column: 1 / -1; }
    .cf-row .cf-num { display: none; }
    .cf-row__aktiv { grid-column: 1 / -1; gap: 6px; }
    .cf-row__aktiv .cf-avatar { display: none; }
    .cf-row__aktiv > div { display: flex; flex-wrap: wrap; gap: 0 6px; }
    .cf-row__aktiv .cf-row__aktiv-label { position: static; width: auto; height: auto; clip: auto; color: var(--cf-faint); }
    .cf-row__aktiv strong::after { content: ","; }
    .cf-row__zahlen-mobil { display: inline-flex !important; }
    .cf-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-idee { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 14px; }
    .cf-idee__status { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) {
    .cf-wrap { padding: 0 16px; }
    .cf-bar__brand span:not(.material-symbols-outlined) { display: none; }
    .cf-bar__inner { gap: 8px; }
    .cf-bar__nav a { padding: 0 8px; font-size: 13.5px; }
    .cf-frage-knopf-text { display: none; }
    .cf-head { padding: 20px 0 18px; }
    .cf-head h1 { font-size: 26px; }
    .cf-head__lead { font-size: 15px; }
    .cf-rail, .cf-thread-rail { grid-template-columns: minmax(0, 1fr); }
    .cf-thread__zeile { flex-direction: column-reverse; gap: 12px; }
    .cf-thread__titel { font-size: 24px; }
    .cf-post { grid-template-columns: minmax(0, 1fr); }
    .cf-vote { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 14px 0; border-right: 0; }
    .cf-vote small { display: none; }
    .cf-post__body { padding: 10px 14px 10px; }
    .cf-arten { grid-template-columns: minmax(0, 1fr); }
    .cf-step { padding: 16px 14px; }
    .cf-tab { padding: 8px 11px; font-size: 13.5px; }
    .cf-toolbar { padding: 10px 12px; }
    .cf-toolbar__rechts { margin-left: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .cf-toolbar__rechts .cf-feld-inline, .cf-toolbar__rechts .cf-select { width: 100%; min-width: 0; }
    /* Ein einzelner Knopf (etwa „Alle als gelesen markieren“) war in die halbe Spalte gezwängt. */
    .cf-toolbar__rechts > .cf-btn:only-child { grid-column: 1 / -1; justify-self: start; }
    .cf-feld-inline__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .cf-row, .cf-list__kopf { padding-left: 12px; padding-right: 12px; }
    .cf-pager { flex-direction: column; }
    .cf-profil-kopf { gap: 14px; }
    .cf-avatar--l { width: 56px; height: 56px; font-size: 20px; }
    .cf-idee-box { grid-template-columns: minmax(0, 1fr); }
    .cf-kacheln { gap: 8px; }
    .cf-regeln { padding: 4px 16px; }
}
.cf-row__zahlen-mobil { display: none !important; align-items: center; gap: 10px; color: var(--cf-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cf-row__zahlen-mobil span { display: inline-flex; align-items: center; gap: 3px; }
.cf-row__zahlen-mobil .material-symbols-outlined { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
    .cf *, .cf *::before, .cf *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}