/* usunu Gestaltung (E1f, M53): reduziert. Eine Grauleiter ohne Blaustich für alles und genau ein Akzent, Violett, nur
   für Zeichen, Claim-Akzent, Hauptknopf und Anführungszeichen. Kein Verlauf. Hell und dunkel folgen der Einstellung
   des Geräts oder der Wahl im Fuss (M58); der Akzent ist für Hell dunkler, damit er auf Weiss lesbar bleibt. Inter liegt lokal (OFL, public/fonts).
   Kontraste nach WCAG AA gerechnet: gedämpft 5.5:1 hell und 6.1:1 dunkel auf der zweiten Fläche, Akzent auf seiner
   Tönung 6.4:1 hell und 8.9:1 dunkel. Mobil zuerst. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-wght.woff2") format("woff2"); }

:root {
  --bg: #fafafa;
  --flaeche: #ffffff;
  --flaeche-2: #f4f4f5;
  --linie: #e4e4e7;
  --linie-2: #c9c9cf;
  --feld-rand: #8a8a93;
  --text: #0b0b0c;
  --text-2: #3f3f46;
  --gedaempft: #63636b;
  --akzent: #6d28d9;
  --akzent-text: #ffffff;
  --akzent-hell: #f3efff;
  --akzent-dunkel: #5b21b6;
  --knopf: #0b0b0c;
  --knopf-text: #ffffff;
  --knopf-hover: #27272a;
  --band: #0b0b0c;
  --band-text: #f2f2f3;
  --band-gedaempft: #a1a1aa;
  --fehler: #b42318;
  --fehler-hell: #fdecea;
  --fehler-text: #ffffff;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08);
  --schrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Breite von Kopf, Inhalt und Fuss (Kaspar 2026-10-20: «man könnte alles auch ein wenig breiter machen»). */
  --mass-feed: 56rem;
  --mass-huelle: 72rem;
  --radius: 0.875rem;
  --radius-knopf: 0.5rem;
  /* Bild neben dem Namen (M80): sechs ruhige Töne, Schrift darauf mindestens 7:1. */
  --bild-0-grund: #efe7ff; --bild-0-text: #4c1d95;
  --bild-1-grund: #fdf0d5; --bild-1-text: #7a4a00;
  --bild-2-grund: #dff3ea; --bild-2-text: #14532d;
  --bild-3-grund: #e3eefc; --bild-3-text: #1e3a8a;
  --bild-4-grund: #fce7ef; --bild-4-text: #831843;
  --bild-5-grund: #ececef; --bild-5-text: #27272a;
}
/* Darstellung (M58): ohne Wahl folgt usunu dem Gerät; der Schalter im Fuss setzt data-theme auf html (thema.js).
   Die dunklen Werte stehen deshalb zweimal: für die Wahl «dunkel» und für «automatisch» bei dunklem Gerät. */
:root[data-theme="dark"] {
  --bg: #0b0b0c;
  --flaeche: #151517;
  --flaeche-2: #1d1d20;
  --linie: #2a2a2e;
  --linie-2: #3f3f46;
  --feld-rand: #6b6b73;
  --text: #f2f2f3;
  --text-2: #c7c7cc;
  --gedaempft: #9a9aa2;
  --akzent: #a78bfa;
  --akzent-text: #0b0b0c;
  --akzent-hell: #221a38;
  --akzent-dunkel: #c4b5fd;
  --knopf: #f2f2f3;
  --knopf-text: #0b0b0c;
  --knopf-hover: #d4d4d8;
  --band: #18181b;
  --band-text: #f2f2f3;
  --band-gedaempft: #a1a1aa;
  --fehler: #f87171;
  --fehler-hell: #3a1616;
  --fehler-text: #0b0b0c;
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 50px rgba(0, 0, 0, 0.45);
  --bild-0-grund: #3b2a63; --bild-0-text: #ede4ff;
  --bild-1-grund: #4a3712; --bild-1-text: #fdeccc;
  --bild-2-grund: #163a2a; --bild-2-text: #d6f2e3;
  --bild-3-grund: #1d3354; --bild-3-text: #dbe8fb;
  --bild-4-grund: #4a1d31; --bild-4-text: #fbdbe6;
  --bild-5-grund: #2e2e33; --bild-5-text: #e9e9ec;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0c;
    --flaeche: #151517;
    --flaeche-2: #1d1d20;
    --linie: #2a2a2e;
    --linie-2: #3f3f46;
    --feld-rand: #6b6b73;
    --text: #f2f2f3;
    --text-2: #c7c7cc;
    --gedaempft: #9a9aa2;
    --akzent: #a78bfa;
    --akzent-text: #0b0b0c;
    --akzent-hell: #221a38;
    --akzent-dunkel: #c4b5fd;
    --knopf: #f2f2f3;
    --knopf-text: #0b0b0c;
    --knopf-hover: #d4d4d8;
    --band: #18181b;
    --band-text: #f2f2f3;
    --band-gedaempft: #a1a1aa;
    --fehler: #f87171;
    --fehler-hell: #3a1616;
    --fehler-text: #0b0b0c;
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 50px rgba(0, 0, 0, 0.45);
    --bild-0-grund: #3b2a63; --bild-0-text: #ede4ff;
    --bild-1-grund: #4a3712; --bild-1-text: #fdeccc;
    --bild-2-grund: #163a2a; --bild-2-text: #d6f2e3;
    --bild-3-grund: #1d3354; --bild-3-text: #dbe8fb;
    --bild-4-grund: #4a1d31; --bild-4-text: #fbdbe6;
    --bild-5-grund: #2e2e33; --bild-5-text: #e9e9ec;
  }
}
* { box-sizing: border-box; }
/* Der Hintergrund auch auf html: sonst nimmt WebKit unter dem ersten Bildschirm Weiss an (axe, dunkler Modus). */
html { color-scheme: light dark; -webkit-text-size-adjust: 100%; background: var(--bg); }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-reduced-motion: no-preference) { html:has(body.seite-ueber) { scroll-behavior: smooth; } }
body {
  margin: 0; font-family: var(--schrift); font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--bg);
  overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11";
}
a { color: var(--text); text-decoration-color: var(--linie-2); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.sprung { position: absolute; left: -10000px; top: 0; }
.sprung:focus { left: 1rem; top: 1rem; background: var(--flaeche); padding: 0.5rem 0.75rem; border-radius: 0.5rem; z-index: 30; }
.unsichtbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* `hidden` gilt immer: Eine Klasse mit display (z. B. .einstiege) zeigte sonst Knöpfe, bevor das Skript sie verdrahtet. */
[hidden] { display: none !important; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9375rem; }

/* Typografie */
h1, h2, h3 { font-weight: 500; letter-spacing: -0.03em; color: var(--text); }
h1 { font-size: 2.125rem; line-height: 1.1; margin: 0 0 1rem; }
h2 { font-size: 1.5rem; line-height: 1.2; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.125rem; line-height: 1.3; margin: 0 0 0.375rem; letter-spacing: -0.015em; }
@media (min-width: 40rem) { h1 { font-size: 2.75rem; } h2 { font-size: 1.75rem; } }
.einleitung { font-size: 1.125rem; max-width: 42rem; color: var(--text-2); }
.gedaempft { color: var(--gedaempft); }

/* Rahmen und Kopf */
.kopf-band { width: 100%; background: var(--bg); border-bottom: 1px solid var(--linie); }
.kopf, .inhalt, .fuss-innen { max-width: var(--mass-feed); margin: 0 auto; padding: 1rem; }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; min-height: 4.5rem; }
.seite-oeffentlich .kopf { max-width: var(--mass-huelle); padding: 0.75rem 1rem; }
@media (min-width: 48rem) { .seite-oeffentlich .kopf { padding: 0.75rem 2rem; } }
.seite-start .kopf-band { border-bottom: 0; }
/* Die Marke bricht nie («usu / nu» neben sechs Tabs) und gibt keinen Platz ab. */
.marke { display: inline-flex; flex: none; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.375rem; letter-spacing: -0.06em; white-space: nowrap; overflow-wrap: normal; color: var(--text); text-decoration: none; }
.marke-zeichen { width: 1.625rem; height: 1.625rem; flex: none; }
.marke-zeichen path, .moment-zeichen path { fill: none; stroke-width: 4; stroke-linecap: round; }
.marke-zeichen .oben, .moment-zeichen .oben { stroke: var(--akzent); }
.marke-zeichen .unten, .moment-zeichen .unten { stroke: var(--text); }
.kopf-rechts { display: flex; align-items: center; gap: 0.75rem; }
.sprachwahl { display: inline-flex; gap: 0.125rem; font-size: 0.875rem; }
.sprachwahl a { color: var(--gedaempft); text-decoration: none; padding: 0.5rem 0.375rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.sprachwahl a[aria-current="page"] { color: var(--text); font-weight: 600; }
.kopf-anmelden { color: var(--text); text-decoration: none; font-size: 0.9375rem; font-weight: 500; padding: 0.5rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.inhalt { padding-top: 1.5rem; padding-bottom: 3rem; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-weight: 600; color: var(--knopf-text); background: var(--knopf);
  border: 0; border-radius: var(--radius-knopf); padding: 0.875rem 1.25rem; min-height: 3rem; cursor: pointer; width: 100%; text-decoration: none; line-height: 1.25;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.knopf:hover { background: var(--knopf-hover); }
.knopf[aria-busy="true"] { opacity: 0.75; cursor: progress; }
.knopf-akzent, .knopf-lavendel { background: var(--akzent); color: var(--akzent-text); }
.knopf-akzent:hover, .knopf-lavendel:hover { background: var(--akzent-dunkel); }
.knopf-hell, .knopf-ruhig { background: var(--flaeche-2); color: var(--text); border: 1px solid var(--linie); }
.knopf-hell:hover, .knopf-ruhig:hover { background: var(--linie); }
a.knopf { text-align: center; }
.knopf-klein { width: auto; min-height: 2.75rem; padding: 0.625rem 1rem; }
.knopf-warnung { background: var(--fehler); color: var(--fehler-text); }
.knopf-warnung:hover { background: var(--fehler); filter: brightness(0.92); }
.knopf-text {
  font: inherit; color: var(--text); background: none; border: 0; padding: 0.5rem 0.25rem; min-height: 2.75rem;
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--linie-2); text-underline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } }
@media (min-width: 40rem) { .knopf { width: auto; } .formular .knopf { width: 100%; } }

/* Karten, Formulare */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem 1.25rem; }
.karte h2 { margin-top: 0; }
.karte-warnung { border-color: var(--fehler); margin-top: 1.5rem; }
.formular { display: grid; gap: 1rem; margin-top: 1rem; }
.feld { display: grid; gap: 0.375rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.feld label, .feld legend { font-weight: 500; font-size: 0.9375rem; }
.feld legend { margin-bottom: 0.375rem; }
.feld input[type="email"], .feld input[type="text"], .feld input[type="url"], .feld textarea, .feld select, .anmelden-zeile input {
  width: 100%; font: inherit; padding: 0.8125rem 0.9375rem; border: 1px solid var(--feld-rand); border-radius: var(--radius-knopf); background: var(--flaeche); color: var(--text);
}
.feld textarea { resize: vertical; min-height: 6rem; }
.wahl { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; padding: 0.25rem 0; }
.wahl input { margin-top: 0.3rem; width: 1.125rem; height: 1.125rem; flex: none; accent-color: var(--akzent); }
.feld-fehler input, .feld-fehler textarea, .feld-fehler select { border-color: var(--fehler); }
.feld-reihe { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .feld-reihe { grid-template-columns: 1fr 1fr; } }
.fehlertext { color: var(--fehler); font-size: 0.9375rem; margin: 0; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.hinweis, .hilfe { font-size: 0.875rem; color: var(--gedaempft); margin: 0; }
.hinweis-box { background: var(--akzent-hell); color: var(--text); border: 1px solid var(--linie); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.inline { display: inline; margin: 0; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 1rem 0 0; }

/* Allgemeine Abschnitte (Antworten, Recht) */
.abschnitt { margin-top: 2.5rem; }
.schritte { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.raster { display: grid; gap: 1rem; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem; }
@media (min-width: 48rem) { .schritte, .raster { grid-template-columns: repeat(3, 1fr); } }
.prinzipien { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.antwort { border-top: 1px solid var(--linie); padding-top: 0.5rem; }
.antwort h2 { margin-top: 1rem; }
.quellen { font-size: 0.875rem; color: var(--gedaempft); }
.adresse { font-style: normal; margin: 0.5rem 0 1rem; }
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.angaben dd { margin: 0; }

/* ===== Mitgliederbereich: Feed, Beitragskarte, Kontakte, Gespräch, Composer ===== */
/* Filter des Feeds (M83): Art als Chips, daneben Ort und «Filter»; am Handy zwei Zeilen, am Laptop eine. «Filter»
   öffnet ein Feld unter der Zeile mit Ort, Umkreis (M82), Stand und Sprache. */
.filter { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin: 0.75rem 0 1rem; }
.filter-typen, .filter-ort { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.filter .chip, .filter-mehr summary { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.875rem; padding: 0.3125rem 0.75rem; min-height: 2.25rem; line-height: 1.5rem; }
.filter .chip svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.filter-mehr summary { list-style: none; cursor: pointer; }
.filter-mehr summary::-webkit-details-marker { display: none; }
.filter-mehr[open] summary { background: var(--flaeche-2); }
.filter-formular { position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); z-index: 5; display: grid; gap: 0.75rem; padding: 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.filter-paar { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: 0.5rem; }
.filter-formular label { display: grid; gap: 0.25rem; min-width: 0; font-size: 0.875rem; font-weight: 500; }
.filter-formular input, .filter-formular select { width: 100%; min-width: 0; }
.filter-knoepfe { display: flex; align-items: center; gap: 1rem; margin: 0; }
@media (min-width: 48rem) { .filter-formular { right: auto; width: 32rem; } }
.chip {
  display: inline-block; padding: 0.5rem 0.875rem; min-height: 2.75rem; line-height: 1.75rem; border: 1px solid var(--linie);
  border-radius: 999px; background: var(--flaeche); color: var(--text); text-decoration: none;
}
.chip[aria-current="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
button.chip { font: inherit; font-size: 0.9375rem; cursor: pointer; text-align: left; line-height: 1.4; }
.chip-aktiv { background: var(--akzent-hell); border-color: var(--linie); color: var(--akzent-dunkel); }
.aktive-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.75rem 0 1.25rem; }
.filter select, .filter input, .formular-klein select, .formular-klein input[type="text"], .formular-klein input[type="number"], .aufnahme-ablehnen select {
  font: inherit; min-height: 2.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--feld-rand); border-radius: var(--radius-knopf);
  background: var(--flaeche); color: var(--text); max-width: 100%;
}
.filter select, .filter input { flex: 1 1 9rem; }

/* Der Feed ruhiger (M83): kleiner Titel, Karten mit weniger Polster. */
.feed-titel { font-size: 1.875rem; margin-bottom: 0.25rem; }
.feed-unterzeile { margin-top: 0; font-size: 0.9375rem; }
@media (min-width: 48rem) { .feed-titel { font-size: 2.25rem; } }
.feed { display: grid; gap: 0.625rem; }
.beitrag { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.875rem 1rem 0.75rem; }
/* Kopf der Karte (M80): Bild mit Initialen, Name mit dem Zeichen der Gründungsrunde, Ort und Zeit, «⋯» rechts. */
.beitrag-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.bild { width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; background: var(--bild-grund); color: var(--bild-text); }
.bild-0 { --bild-grund: var(--bild-0-grund); --bild-text: var(--bild-0-text); }
.bild-1 { --bild-grund: var(--bild-1-grund); --bild-text: var(--bild-1-text); }
.bild-2 { --bild-grund: var(--bild-2-grund); --bild-text: var(--bild-2-text); }
.bild-3 { --bild-grund: var(--bild-3-grund); --bild-text: var(--bild-3-text); }
.bild-4 { --bild-grund: var(--bild-4-grund); --bild-text: var(--bild-4-text); }
.bild-5 { --bild-grund: var(--bild-5-grund); --bild-text: var(--bild-5-text); }
.beitrag-wer { min-width: 0; line-height: 1.3; }
.beitrag-wer .gruender { margin-left: 0.3125rem; vertical-align: -1px; }
.beitrag-wer .meta { display: block; font-size: 0.8125rem; }
.autor { font-weight: 600; }
.meta { color: var(--gedaempft); font-size: 0.875rem; }
.marken { display: flex; flex-wrap: wrap; gap: 0.375rem; width: 100%; margin-top: 0.375rem; }
.marke-typ, .marke-stand, .marke-bezahlt { font-size: 0.8125rem; font-weight: 500; line-height: 1.5rem; padding: 0 0.625rem; border-radius: 999px; }
.marke-typ, .marke-suche { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.marke-biete { background: var(--flaeche-2); color: var(--text); }
.marke-idee { background: transparent; color: var(--text-2); border: 1px solid var(--linie-2); }
.marke-stand { background: var(--flaeche-2); border: 1px solid var(--linie); color: var(--text); }
.beitrag-text { margin: 0.625rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.beitrag-link { margin: 0.5rem 0 0; overflow-wrap: anywhere; }
/* Fuss der Karte (M81): links die Art, rechts ruhig «Kontakt aufnehmen». */
.beitrag-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.beitrag-fuss .marken { width: auto; margin: 0; }
.beitrag-fuss .marke-typ, .beitrag-fuss .marke-stand { font-size: 0.75rem; line-height: 1.375rem; }
.beitrag-aktion { margin-left: auto; display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.beitrag-kontakt { font-weight: 500; padding: 0.375rem 0.875rem; min-height: 2.25rem; border: 1px solid var(--feld-rand); border-radius: 999px; color: var(--text); text-decoration: none; white-space: nowrap; }
.beitrag-kontakt:hover { background: var(--flaeche-2); }
.bezahlt-hinweis { color: var(--text-2); font-weight: 500; }
/* «⋯» (M81): Melden mit Grund und Blockieren, selten gebraucht, darum klein. */
.mehr { position: relative; }
.mehr summary { list-style: none; cursor: pointer; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: var(--gedaempft); font-size: 1.25rem; line-height: 1; }
.mehr summary::-webkit-details-marker { display: none; }
.mehr[open] summary, .mehr summary:hover { background: var(--flaeche-2); }
.mehr-menue { position: absolute; right: 0; top: 2.5rem; z-index: 4; width: 16rem; max-width: calc(100vw - 3rem); display: grid; gap: 0.25rem; padding: 0.75rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 0.75rem; box-shadow: var(--schatten); }
.mehr-melden { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.375rem 0.5rem; }
.mehr-melden label { grid-column: 1 / -1; font-size: 0.8125rem; color: var(--gedaempft); }
.mehr-melden select { font: inherit; font-size: 0.875rem; min-width: 0; min-height: 2.5rem; padding: 0.25rem 0.5rem; border: 1px solid var(--feld-rand); border-radius: var(--radius-knopf); background: var(--flaeche); color: var(--text); }
.mehr-blockieren { border-top: 1px solid var(--linie); margin-top: 0.25rem; padding-top: 0.5rem; }
.mehr-blockieren .knopf-text { color: var(--fehler); }
.mehr-blockieren small { display: block; color: var(--gedaempft); font-size: 0.75rem; }
.formular-klein { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.5rem 0; }
.formular-klein label { font-size: 0.9375rem; }
.leer { background: var(--flaeche); border: 1px dashed var(--linie-2); border-radius: var(--radius); padding: 1.5rem 1.25rem; }
.leer h2 { margin-top: 0; }
.weiter { margin-top: 1.5rem; }
.beispiele .beitrag { border-style: dashed; }
.beispiele .autor { color: var(--gedaempft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; }

.anfrage { margin-bottom: 0.75rem; }
.anfrage .meta { color: var(--text); font-size: 1rem; margin: 0; }
.anfrage .aktionen + .hilfe { margin-top: 0.75rem; }
.zeile { margin: 0; padding: 0.75rem 0; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.zeile-dran a { font-weight: 600; }
.marke-dran, .dran-marke { font-size: 0.8125rem; font-weight: 600; line-height: 1.5rem; padding: 0 0.625rem; border-radius: 999px; background: var(--fehler-hell); color: var(--fehler); }
.zitat { margin: 0 0 1rem; padding: 0.75rem 1rem; border-left: 3px solid var(--akzent); background: var(--flaeche); border-radius: 0 0.5rem 0.5rem 0; }
.zitat p { margin: 0; overflow-wrap: anywhere; }
.nachrichten { display: grid; gap: 0.75rem; margin: 1rem 0 1.5rem; }
.nachricht { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.75rem 1rem; max-width: 92%; justify-self: start; }
.nachricht-eigen { background: var(--akzent-hell); justify-self: end; }
.nachricht-eigen .meta { color: var(--text-2); }
.nachricht p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.nachricht .meta { margin-bottom: 0.25rem; }

/* Tab-Leiste (M34): am Handy unten im Daumenbereich, ab Tablet im Kopf; «du bist dran» (CL3). */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(6, 1fr); background: var(--flaeche); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); }
.tabs a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-height: 3.5rem; padding: 0.375rem 0.125rem; font-size: 0.6875rem; color: var(--gedaempft); text-decoration: none; }
/* Sechs Tabs auf 390 px (M71 B): «Gespräche» bleibt ein Wort, nie «Gespräch / e». */
.tabs a > span:not(.tab-zahl):not(.unsichtbar) { white-space: nowrap; overflow-wrap: normal; }
.tabs a[aria-current="page"] { color: var(--text); font-weight: 600; }
.tabs svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tab-zahl { position: absolute; top: 0.25rem; left: calc(50% + 0.375rem); min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 999px; background: var(--fehler); color: var(--fehler-text); font-size: 0.75rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
body.mitglied { padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
@media (min-width: 48rem) {
  .tabs { position: static; display: flex; gap: 0.25rem; border: 1px solid var(--linie); background: var(--flaeche-2); padding: 0.3125rem; border-radius: 999px; }
  .tabs a { flex-direction: row; gap: 0.375rem; min-height: 2.5rem; padding: 0.375rem 0.875rem; font-size: 0.9375rem; border-radius: 999px; color: var(--text-2); }
  .tabs a[aria-current="page"] { background: var(--flaeche); color: var(--text); }
  .tabs svg { width: 1.125rem; height: 1.125rem; }
  .tab-zahl { position: static; margin-left: 0.125rem; }
  body.mitglied { padding-bottom: 0; }
}
/* Tablet (768 bis 1024 px): sechs Tabs und die Marke auf einer Zeile, darum etwas enger. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .tabs { gap: 0.125rem; }
  .tabs a { padding: 0.375rem 0.5rem; font-size: 0.875rem; }
}

/* Composer und Anfrage: Leitfragen (CL1), Einstiegssätze (CL2), Zähler. */
.leitfragen > div { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.leitfragen-titel { margin: 0 0 0.25rem; font-weight: 600; font-size: 0.9375rem; }
.leitfragen ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; font-size: 0.9375rem; }
.einstiege { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.einstiege .hilfe { width: 100%; }
.zaehler:empty { display: none; }

/* Gründungsmitglieder (M35) und Einführungen (M46) */
.gruender { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.8125rem; font-weight: 600; color: var(--akzent-dunkel); }
.gruender .marke-zeichen { width: 0.9375rem; height: 0.9375rem; }
.gruender-moment { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.25rem; padding: 1rem 1.125rem; border-radius: var(--radius); background: var(--akzent-hell); border: 1px solid var(--linie); font-weight: 500; }
.einfuehrungen { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.5rem; }
.einfuehrungen li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--linie); }
.einfuehrungen input { flex: 1 1 16rem; font: inherit; font-size: 0.875rem; padding: 0.5rem 0.625rem; border: 1px solid var(--linie-2); border-radius: var(--radius-knopf); background: var(--flaeche-2); color: var(--text); }

/* ===== Dein Agent (D22, M84, M89): die Frage beim Verbinden, Einstellungen → Agenten ===== */
.zurueck-zeile { margin: 0 0 0.25rem; }
.zurueck-zeile .zurueck { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-2); text-decoration: none; }
.oauth-entscheid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0.75rem; }
.agenten-liste { list-style: none; padding: 0; margin: 0; }
.agenten-liste li { padding: 0.75rem 0; border-bottom: 1px solid var(--linie); }
.agenten-liste li:first-child { padding-top: 0; }
.agenten-liste li:last-child { padding-bottom: 0; border-bottom: 0; }
.agent-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.agent-meta { margin: 0.25rem 0 0; font-size: 0.875rem; }
.agent-trennen summary { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.875rem; color: var(--gedaempft); cursor: pointer; }
.agent-trennen form { display: grid; justify-items: start; gap: 0.5rem; }
.agent-trennen p { margin: 0; }
.agenten-verbinden label { display: block; font-weight: 600; margin-bottom: 0.375rem; }
.agenten-verbinden input, .hinweis-box input[readonly] { width: 100%; font: inherit; font-size: 0.875rem; padding: 0.5rem 0.625rem; border: 1px solid var(--linie-2); border-radius: var(--radius-knopf); background: var(--flaeche-2); color: var(--text); }
.hinweis-box input[readonly] { margin-top: 0.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.agenten-anleitung { display: grid; gap: 0.625rem; margin: 1rem 0; padding-left: 1.25rem; color: var(--text-2); }
.befehl { display: block; margin-top: 0.375rem; padding: 0.5rem 0.625rem; border: 1px solid var(--linie); border-radius: var(--radius-knopf); background: var(--flaeche-2); font-size: 0.8125rem; overflow-wrap: anywhere; }
.agenten-verbinden .hilfe + .hilfe { margin-top: 0.5rem; }
.agenten-verlauf { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.375rem; font-size: 0.875rem; }
.agenten-verlauf time { margin-right: 0.375rem; color: var(--gedaempft); }

/* ===== Brain (J12, D19, M60–M65): Liste, Notiz ansehen und schreiben; am Laptop Liste, Schreiben, Ansehen ===== */
.brain-titel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brain-titel h1 { margin: 0; }
.brain-titel form { margin: 0; }
.brain-titel-klein { margin: 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.03em; }
.brain-titel-klein a { text-decoration: none; }
.brain-neu { width: auto; }
.privat { display: flex; align-items: center; gap: 0.375rem; margin: 0.375rem 0 1.25rem; font-size: 0.875rem; color: var(--gedaempft); }
.privat svg { width: 0.9375rem; height: 0.9375rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notizen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.notizen a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.125rem 1rem; padding: 0.875rem 0; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--text); }
.notizen b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notizen a:hover b { text-decoration: underline; text-decoration-color: var(--linie-2); }
.notizen time { color: var(--gedaempft); font-size: 0.8125rem; white-space: nowrap; }
.notizen span { grid-column: 1 / -1; color: var(--gedaempft); font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notizen a[aria-current="page"] { background: var(--flaeche-2); margin: 0 -0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; border-radius: 0.5rem; }
.zaehler-brain { display: grid; gap: 0.375rem; margin: 1.25rem 0 0; font-size: 0.8125rem; color: var(--gedaempft); }
.zaehler-brain progress { -webkit-appearance: none; appearance: none; width: 100%; height: 0.25rem; border: 0; border-radius: 999px; background: var(--linie); overflow: hidden; }
.zaehler-brain progress::-webkit-progress-bar { background: var(--linie); }
.zaehler-brain progress::-webkit-progress-value { background: var(--text-2); }
.zaehler-brain progress::-moz-progress-bar { background: var(--text-2); }

.brain-raster { display: grid; gap: 0.75rem; }
.brain-seitenleiste { display: none; }
.notiz-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
.notiz-leiste .zurueck { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-2); text-decoration: none; }
.notiz-leiste .status { margin-left: auto; font-size: 0.8125rem; color: var(--gedaempft); }
.umschalter { display: inline-flex; padding: 0.1875rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); }
.umschalter a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; color: var(--gedaempft); text-decoration: none; font-size: 0.9375rem; }
.umschalter a[aria-current="page"] { background: var(--flaeche-2); color: var(--text); font-weight: 500; }
.brain-raster[data-modus="ansehen"] .brain-schreiben, .brain-raster[data-modus="schreiben"] .brain-ansehen { display: none; }
.brain-formular { display: grid; gap: 0.5rem; }
/* 1rem im Feld: iOS zoomt sonst beim Tippen hinein. */
.quelle { width: 100%; min-height: 60vh; padding: 0.875rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; line-height: 1.65; tab-size: 2;
  border: 1px solid var(--feld-rand); border-radius: var(--radius); background: var(--flaeche); color: var(--text); resize: vertical; }
/* Breite nach Wort: am Handy passt die ganze Leiste auf 390 px, ohne seitlich zu scrollen und ohne abzuschneiden. */
.einfuegen { display: flex; gap: 0.375rem; }
.einfuegen[hidden] { display: none; }
.einfuegen button { flex: 1 1 auto; min-height: 2.75rem; padding: 0 0.375rem; font: inherit; font-size: 0.8125rem; white-space: nowrap;
  border: 1px solid var(--linie-2); border-radius: var(--radius-knopf); background: var(--flaeche); color: var(--text-2); cursor: pointer; }
.einfuegen button:hover { color: var(--text); border-color: var(--feld-rand); }
.brain-aktionen { margin: 0; }
.mit-autosave .brain-aktionen { display: none; }
.brain-konflikt { display: grid; gap: 0.625rem; }
.brain-konflikt[hidden] { display: none; }
.brain-konflikt p { margin: 0; }
.brain-konflikt-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.brain-loeschen { margin-top: 1.5rem; font-size: 0.9375rem; }
.brain-loeschen summary { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--gedaempft); cursor: pointer; }
.brain-loeschen form { display: grid; justify-items: start; gap: 0.5rem; padding: 0.5rem 0 0; }
.brain-loeschen p { margin: 0; }
/* Der eigene Agent im Brain (M88) und Entwürfe weiterverwenden (M92). */
.notiz-agent { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; margin: 0; font-size: 0.8125rem; color: var(--gedaempft); }
.notiz-agent a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-2); }
.brain-teilen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin-top: 1.5rem; }
.brain-teilen .hilfe { flex-basis: 100%; }
.in-gespraech summary { list-style: none; }
.in-gespraech summary::-webkit-details-marker { display: none; }
.in-gespraech ul { list-style: none; padding: 0; margin: 0.25rem 0 0; }
.in-gespraech a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text); }
.in-gespraech p { margin: 0.5rem 0 0; }

/* Die Notiz als Text (M62): Markdown aus App\Domain\Markdown; Überschriften sind dort eine Stufe tiefer. */
.md > :first-child { margin-top: 0; }
.md h2 { font-size: 1.75rem; line-height: 1.15; margin: 1.5rem 0 0.75rem; }
.md h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; margin: 1.75rem 0 0.5rem; }
.md h4, .md h5, .md h6 { font-size: 1rem; font-weight: 600; letter-spacing: 0; margin: 1.25rem 0 0.25rem; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .md-tabelle, .md .diagramm { margin: 0 0 0.875rem; }
.md p, .md li { color: var(--text-2); }
.md ul, .md ol { padding-left: 1.25rem; }
.md li + li { margin-top: 0.25rem; }
.md li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.25rem; }
.md li:has(> input:checked) { color: var(--gedaempft); text-decoration: line-through; text-decoration-color: var(--linie-2); }
.md input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0 0.5rem 0 0; vertical-align: -0.2em; accent-color: var(--text); }
.md blockquote { margin-left: 0; padding-left: 1rem; border-left: 2px solid var(--akzent); color: var(--text-2); font-style: italic; }
.md code { padding: 0.1em 0.35em; border-radius: 0.3rem; background: var(--flaeche-2); font-size: 0.875em; }
.md pre { padding: 0.75rem 0.875rem; overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius-knopf); background: var(--flaeche-2); }
.md pre code { padding: 0; background: none; font-size: 0.875rem; }
.md .md-tabelle { overflow-x: auto; }
.md table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
/* In Zellen nur an Wortgrenzen umbrechen (der Seitenstandard «anywhere» schnitt «Questio n»); breite Tabellen scrollen. */
.md th, .md td { padding: 0.5rem 0.625rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); overflow-wrap: break-word; min-width: 5rem; }
.md th { font-weight: 600; color: var(--text); }
.md hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--linie); }
.md img { max-width: 100%; }
/* Diagramme (M63): Mermaid zeichnet im abgeschotteten Rahmen; die Höhe meldet der Rahmen selbst. */
.diagramm { padding: 0.5rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.diagramm iframe { display: block; width: 100%; height: 12rem; border: 0; background: transparent; }

@media (min-width: 64rem) {
  .inhalt.brain-notiz { max-width: 84rem; }
  .brain-raster { grid-template-columns: 17rem minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
  .einfuegen button { flex: 0 0 auto; padding: 0 0.875rem; font-size: 0.875rem; }
  .brain-seitenleiste { display: block; grid-column: 1; grid-row: 1 / 5; position: sticky; top: 1rem; }
  .notiz-leiste { grid-column: 2 / 4; grid-row: 1; min-height: 2.75rem; }
  .notiz-leiste .zurueck, .umschalter { display: none; }
  .notiz-leiste .status { margin-left: 0; }
  .brain-raster[data-modus] .brain-schreiben, .brain-raster[data-modus] .brain-ansehen { display: block; }
  .brain-schreiben { grid-column: 2; grid-row: 2; }
  .brain-ansehen { grid-column: 3; grid-row: 2; }
  .brain-teilen { grid-column: 2 / 4; grid-row: 3; }
  .brain-loeschen { grid-column: 2 / 4; grid-row: 4; }
  .quelle { min-height: 70vh; font-size: 0.9375rem; }
}

/* ===== Wisdom (J13, D20, M67–M71): Liste mit Suche und Schlagwörtern, Seite zum Lesen ===== */
.wisdom-absender { margin: 0.25rem 0 1rem; font-size: 0.9375rem; }
.wisdom-suche { display: flex; gap: 0.5rem; margin: 0 0 0.75rem; }
.wisdom-suche input { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: 0.5rem 0.75rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--feld-rand); border-radius: var(--radius-knopf); background: var(--flaeche); color: var(--text); }
.wisdom-suche .knopf { width: auto; }
/* Am Handy eine Zeile zum Wischen, ab Tablet umbrechend. */
.wisdom-schlagwoerter { display: flex; gap: 0.5rem; margin: 0 0 1rem; padding-bottom: 0.25rem; overflow-x: auto; }
.wisdom-schlagwoerter .chip { flex: none; white-space: nowrap; }
@media (min-width: 48rem) { .wisdom-schlagwoerter { flex-wrap: wrap; overflow: visible; } }
.wisdom-liste span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Jeden Tag ein Topic (M75 E): das von heute als Karte, darunter «Bisher». */
.wisdom-heute-label { margin: 1.5rem 0 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--akzent); text-transform: uppercase; letter-spacing: 0.08em; }
.wisdom-heute { display: block; text-decoration: none; color: inherit; margin: 0 0 2rem; }
.wisdom-heute h2 { margin: 0 0 0.375rem; font-size: 1.5rem; }
.wisdom-heute p { margin: 0; color: var(--text-2); }
.wisdom-heute:hover h2 { text-decoration: underline; text-underline-offset: 0.2em; }
.wisdom-bisher { margin: 0 0 0.75rem; }
.wisdom-zurueck { margin: 0; }
.wisdom-zurueck .zurueck { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-2); text-decoration: none; }
.wisdom-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: -0.25rem 0 1.25rem; }
.wisdom-tags a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; border: 1px solid var(--linie); border-radius: 999px; color: var(--text-2); text-decoration: none; }
.wisdom-tags a:hover { color: var(--text); border-color: var(--linie-2); }
.wisdom-text h2 { font-size: 1.375rem; line-height: 1.25; margin: 2rem 0 0.75rem; }
.wisdom-text h3 { font-size: 1.125rem; }
.wisdom-fuss { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: 0.875rem; }

/* ===== Die Tür (E1f, M45 A): Claim, der halb sichtbare Raum, zwei Türen, Werkzeuge, Gründungsrunde ===== */
.inhalt-start { max-width: none; padding: 0; }
.huelle { max-width: var(--mass-huelle); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .huelle { padding: 0 2rem; } }
.tuer-oben { text-align: center; max-width: 56rem; margin: 0 auto; padding: 2.5rem 1rem 0; }
@media (min-width: 48rem) { .tuer-oben { padding-top: 3.5rem; } }
.tuer-motto { font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 1.5rem; }
.claim { font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: 1; letter-spacing: -0.06em; font-weight: 500; margin: 0 auto; text-wrap: balance; }
/* Die Tür v4 (M95): eine Zeile, wer drin ist. */
.tuer-wer { max-width: 22rem; margin: 1.25rem auto 0; font-size: 1.125rem; line-height: 1.45; color: var(--text-2); text-wrap: balance; }
@media (min-width: 48rem) { .tuer-wer { max-width: 38rem; margin-top: 1.5rem; font-size: 1.3125rem; } }
.claim em { font-style: normal; color: var(--akzent); }
.raum { position: relative; max-width: var(--mass-huelle); margin: 2.5rem auto 0; padding: 0 1rem; }
@media (min-width: 48rem) { .raum { margin-top: 3rem; padding: 0 2rem; } }
/* Der Raum (M95): oben Platz für das Schild, lesbar nur die Etiketten, Inhalt und Bild bleiben unscharf (D4). */
.drinnen { position: absolute; inset: 0 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 3rem 1.25rem 1.25rem; border-radius: 1.25rem; background: var(--flaeche); border: 1px solid var(--linie); overflow: hidden; }
@media (min-width: 48rem) { .drinnen { inset: 0 2rem; grid-template-columns: repeat(3, 1fr); padding: 3rem 1.5rem 1.5rem; } }
.drinnen-karte { background: var(--flaeche-2); border-radius: 0.75rem; padding: 1rem; }
.drinnen-karte b { font-size: 0.75rem; font-weight: 600; line-height: 1.35; color: var(--text); }
.drinnen-karte i, .drinnen-punkt { filter: blur(3px); }
.drinnen-karte i { display: block; height: 0.5rem; border-radius: 0.25rem; background: var(--linie); margin: 0.6rem 0; }
.drinnen-karte i:nth-of-type(2) { width: 80%; } .drinnen-karte i:nth-of-type(3) { width: 60%; }
.drinnen-punkt { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--gedaempft); vertical-align: middle; margin-right: 0.5rem; }
.drinnen-karte:nth-child(3n + 1) .drinnen-punkt { background: var(--akzent); }
.schild { position: absolute; top: 0.875rem; left: 2rem; z-index: 2; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); background: var(--bg); border: 1px solid var(--linie); border-radius: 999px; padding: 0.25rem 0.625rem; }
@media (min-width: 48rem) { .schild { left: 3rem; } }
/* Über den Türen bleibt eine Reihe des Raums sichtbar (M95). */
.tueren { position: relative; z-index: 1; display: grid; gap: 1rem; max-width: 52rem; margin: 0 auto; padding: 9.75rem 0.75rem 1.25rem; }
@media (min-width: 44rem) { .tueren { grid-template-columns: 1fr 1fr; padding: 8.75rem 1.5rem 1.5rem; } }
.tueren-eins { max-width: 26rem; grid-template-columns: 1fr !important; padding-bottom: 4.5rem; }
.tuer-karte { background: var(--bg); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: 0.75rem; align-content: start; box-shadow: var(--schatten); margin: 0; }
.tuer-titel { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; }
.tuer-text { margin: 0; color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; }
.tuer-karte .feld label:not(.wahl) { font-size: 0.875rem; }
.tuer-karte .knopf { width: 100%; }
.anmelden-zeile { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; max-width: 36rem; margin: 0 auto; padding: 0 0.75rem 1.5rem; }
.anmelden-zeile label { font-size: 0.9375rem; color: var(--text-2); }
.anmelden-zeile input { flex: 1 1 12rem; width: auto; padding: 0.625rem 0.75rem; }
.anmelden-zeile .fehlertext { width: 100%; text-align: center; }
.tuer-fein { position: relative; z-index: 1; text-align: center; font-size: 0.8125rem; color: var(--gedaempft); max-width: 40rem; margin: 0 auto; padding: 0 1rem 1.5rem; }
.stimme { max-width: 52rem; margin: 4.5rem auto 0; padding: 0 1.25rem; text-align: center; }
.stimme blockquote { margin: 0; font-size: clamp(1.625rem, 4vw, 2.5rem); font-weight: 400; letter-spacing: -0.035em; line-height: 1.2; }
.stimme blockquote::before { content: "«"; color: var(--akzent); }
.stimme blockquote::after { content: "»"; color: var(--akzent); }
.stimme figcaption { margin: 1rem 0 0; font-size: 0.875rem; color: var(--gedaempft); }
.leisten { max-width: var(--mass-huelle); margin: 4rem auto 0; padding: 0 1.25rem; text-align: center; display: grid; gap: 2rem; }
.leiste-titel { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 1rem; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.25rem; color: var(--gedaempft); }
.logos a { color: inherit; text-decoration: none; }
.logo { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.logo svg { width: 1.375rem; height: 1.375rem; fill: currentColor; }
.logo-text { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; }
.runde { text-align: center; margin: 3rem 0 4rem; padding: 0 1rem; color: var(--text-2); }
.runde strong { color: var(--text); }

/* ===== Über usunu (/about): die bisherige Startseite, reduziert eingefärbt ===== */
.pille { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0.4375rem 1rem; border: 1px solid var(--linie-2); border-radius: 999px; font-size: 0.9375rem; color: var(--text); }
.pille .marke-zeichen { width: 1.125rem; height: 1.125rem; }
.held { padding: 3rem 0 0; overflow: hidden; }
.held-inhalt { text-align: center; display: grid; justify-items: center; }
.held .claim { max-width: 15ch; margin-bottom: 1.25rem; }
.held-satz { font-size: clamp(1.0625rem, 2.2vw, 1.25rem); line-height: 1.55; color: var(--text-2); max-width: 38rem; margin: 0 0 2rem; text-wrap: pretty; }
.buehne { position: relative; margin-top: 3rem; padding: 2rem 0 3rem; }
.buehne-boegen { display: none; }
.buehne-raster { position: relative; display: grid; gap: 1rem; max-width: 62rem; margin: 0 auto; }
@media (min-width: 52rem) { .buehne-raster { grid-template-columns: 1fr 1.15fr; align-items: start; gap: 1.25rem; } }
.schwebe { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--schatten); text-align: left; }
.schwebe p { margin: 0; }
.schwebe .blase { margin: 0 0 0.5rem; }
.schwebe .meta { margin-bottom: 0.5rem; }
.schwebe-spalte { display: grid; gap: 1rem; }
.schwebe-zahl { display: flex; align-items: center; gap: 1rem; }
.gold-zahl { font-size: clamp(3rem, 7vw, 4.25rem); line-height: 1; font-weight: 300; letter-spacing: -0.04em; color: var(--text); white-space: nowrap; }
.schwebe-zahl small { display: block; color: var(--text-2); font-size: 0.9375rem; line-height: 1.4; }
.schwebe-dunkel { background: var(--band); border-color: var(--band); color: var(--band-text); }
.schwebe-dunkel .anfrage-wer, .schwebe-dunkel .klein { color: var(--band-gedaempft); }
.anfrage-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem !important; font-weight: 600; }
.anfrage-wer { color: var(--gedaempft); font-size: 0.875rem; margin-bottom: 0.75rem !important; }
.anfrage-notiz { font-size: 1.0625rem; line-height: 1.5; margin-bottom: 1rem !important; }
.anfrage-knoepfe { display: flex; gap: 0.5rem; }
.anfrage-knoepfe span { flex: 1; text-align: center; border-radius: var(--radius-knopf); padding: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.anfrage-ja { background: var(--akzent); color: var(--akzent-text); }
.anfrage-spaeter { border: 1px solid var(--band-gedaempft); color: var(--band-text); }
.klein { font-size: 0.8125rem; color: var(--gedaempft); }
.buehne-beispiel { position: relative; text-align: center; margin: 1.25rem 0 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gedaempft); }
.teil { padding: 4.5rem 0; background: var(--bg); border-top: 1px solid var(--linie); }
.teil-hell { background: var(--flaeche); }
@media (min-width: 60rem) { .teil { padding: 6.5rem 0; } }
.mit-schiene { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 60rem) { .mit-schiene { grid-template-columns: 14rem 1fr; gap: 3rem; } .mit-schiene > .schiene, .mit-schiene > div > .schiene { padding-top: 0.875rem; } }
.schiene { margin: 0; display: flex; align-items: center; gap: 0.625rem; color: var(--text-2); font-size: 1.0625rem; }
.schiene::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--akzent); flex: none; }
.schiene-liste { list-style: none; padding: 0; margin: 1.5rem 0 0; display: none; gap: 0.75rem; font-size: 0.875rem; }
@media (min-width: 60rem) { .schiene-liste { display: grid; } }
.schiene-liste a { color: var(--gedaempft); text-decoration: none; }
.teil-titel { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.045em; font-weight: 500; margin: 0 0 1.25rem; max-width: 22ch; text-wrap: balance; }
.teil-text { font-size: 1.0625rem; color: var(--text-2); max-width: 46rem; margin: 0; }
.ziffern { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 2rem; }
@media (min-width: 48rem) { .ziffern { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.ziffern li { border-left: 1px solid var(--linie-2); padding: 0 1.5rem; }
.ziffer { display: block; font-size: 4rem; line-height: 1; font-weight: 300; letter-spacing: -0.04em; color: var(--text); margin-bottom: 0.75rem; }
.ziffern h3 { font-size: 1.375rem; font-weight: 500; }
.ziffern p { margin: 0; color: var(--gedaempft); font-size: 0.9375rem; }
.panels { display: grid; gap: 1.25rem; }
.panel { display: grid; gap: 1.5rem; background: var(--bg); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.75rem 1.5rem; }
@media (min-width: 52rem) { .panel { grid-template-columns: 1fr 1fr; padding: 2.5rem; gap: 2.5rem; min-height: 22rem; } }
.panel-text { display: flex; flex-direction: column; }
.panel-wer { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gedaempft); }
.panel h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; letter-spacing: -0.03em; margin: 0 0 1.5rem; }
.panel-zitat { margin: auto 0 0; padding-left: 1.25rem; border-left: 3px solid var(--akzent); color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; }
.panel-bild { display: grid; place-items: center; background: var(--flaeche-2); border-radius: 0.625rem; padding: 1.5rem; min-height: 14rem; }
.panel-bild .schwebe { width: 100%; max-width: 22rem; }
.blase { max-width: 85%; padding: 0.625rem 0.875rem; border-radius: 0.75rem; background: var(--flaeche); border: 1px solid var(--linie); font-size: 0.9375rem; margin: 0 0 0.5rem; }
.blase-eigen { margin-left: auto; background: var(--akzent-hell); }
.schloss { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.75rem !important; font-size: 0.8125rem; color: var(--gedaempft); }
.jetzt-raster { display: grid; gap: 1.5rem; align-items: end; margin-top: 2.5rem; }
@media (min-width: 52rem) { .jetzt-raster { grid-template-columns: auto 1fr; gap: 3rem; } }
.jetzt-zahl { margin: 0; font-size: clamp(5rem, 16vw, 10rem); line-height: 0.85; font-weight: 300; letter-spacing: -0.05em; color: var(--text); }
.band { background: var(--band); color: var(--band-text); padding: 4.5rem 0; }
@media (min-width: 60rem) { .band { padding: 6.5rem 0; } }
.band .schiene, .band .teil-titel { color: var(--band-text); }
.haken { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; }
@media (min-width: 52rem) { .haken { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.haken li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; padding: 1.25rem 1rem; border-radius: 0.375rem; }
.haken li:nth-child(4n + 1), .haken li:nth-child(4n + 2) { background: rgba(255, 255, 255, 0.04); }
.haken li::before { content: ""; width: 1rem; height: 0.5rem; margin-top: 0.4rem; border-left: 2px solid var(--band-text); border-bottom: 2px solid var(--band-text); transform: rotate(-45deg); }
.haken strong { display: block; font-weight: 500; font-size: 1.125rem; }
.haken span { color: var(--band-gedaempft); font-size: 0.9375rem; }
.aufruf-teil { padding: 4rem 0; }
.aufruf { border-radius: var(--radius); padding: 4rem 1.5rem; text-align: center; display: grid; justify-items: center; background: var(--akzent-hell); border: 1px solid var(--linie); }
@media (min-width: 52rem) { .aufruf { padding: 6rem 3rem; } }
.aufruf h2 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.045em; font-weight: 500; margin: 0 0 1rem; max-width: 18ch; text-wrap: balance; }
.aufruf p { max-width: 38rem; margin: 0 0 2rem; color: var(--text-2); font-size: 1.0625rem; }
.linkliste { list-style: none; padding: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--linie-2); }
.linkliste li { border-bottom: 1px solid var(--linie-2); }
.linkliste a { display: grid; grid-template-columns: 1.5rem 1fr 1.5rem; gap: 1rem; align-items: center; padding: 1.125rem 0.5rem; text-decoration: none; font-size: 1.0625rem; color: var(--text); }
.linkliste a:hover { background: var(--flaeche-2); }
.linkliste svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--gedaempft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.teil .beispiele { margin-top: 2rem; }
@media (min-width: 52rem) { .teil .beispiele { grid-template-columns: repeat(2, 1fr); } }

/* ===== Fuss: zentriert, Links, Kleingedrucktes ===== */
.fuss { background: var(--bg); border-top: 1px solid var(--linie); color: var(--text); }
.fuss-innen { max-width: 48rem; padding: 2rem 1rem 2.5rem; text-align: center; }
.fuss-recht { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem; font-size: 0.875rem; }
.fuss-recht a { color: var(--text); display: inline-block; padding: 0.5rem 0; min-height: 2.75rem; line-height: 1.75rem; }
.fuss-klein { margin: 1.5rem auto 0; font-size: 0.75rem; line-height: 1.65; color: var(--gedaempft); max-width: 46rem; display: grid; gap: 0.625rem; }
.fuss-klein p { margin: 0; }
.fuss-zeile { margin: 1.5rem 0 0; color: var(--gedaempft); font-size: 0.75rem; }
/* Sprachen (M59): eine ruhige Zeile; die kommenden führen auf «kommt bald». Darstellung (M58): drei kleine Knöpfe. */
.fuss-sprachen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1rem; margin-top: 0.5rem; font-size: 0.8125rem; }
.fuss-sprachen a { color: var(--gedaempft); text-decoration: none; display: inline-block; padding: 0.5rem 0; min-height: 2.75rem; line-height: 1.75rem; }
.fuss-sprachen a:hover { color: var(--text); }
.fuss-sprachen a[aria-current="page"] { color: var(--text); font-weight: 600; }
.thema { display: inline-flex; gap: 0.125rem; margin-top: 0.75rem; padding: 0.1875rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); }
.thema[hidden] { display: none; }
.thema button { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--gedaempft); cursor: pointer; }
.thema button:hover { color: var(--text); }
.thema button[aria-pressed="true"] { background: var(--flaeche-2); color: var(--text); }
.thema svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.thema svg .voll { fill: currentColor; stroke: none; }
.fuss-kompakt .thema { margin-top: 0.5rem; }
.fuss-kompakt .fuss-innen { padding: 1rem; max-width: var(--mass-feed); }
.fuss-kompakt .fuss-zeile { margin-top: 0.25rem; }

/* Der Moment (Plan §5.2, Journey als Event): die zwei u des Zeichens finden sich. «schliesst» beim Einlass und bei
   der Verbindung, «wartet» vor der Tür (die beiden atmen aufeinander zu). Bei «weniger Bewegung» steht es still. */
.moment { display: grid; justify-items: center; text-align: center; gap: 0.25rem; margin: 0.5rem 0 1.25rem; }
.moment p { margin: 0; max-width: 34rem; color: var(--text-2); }
.moment-titel { margin: 0.5rem 0 0.25rem; }
h1.moment-titel { text-align: center; margin: 0.25rem 0 1.25rem; }
.moment-zeichen { width: 4rem; height: 4rem; overflow: visible; flex: none; }
.moment-zeichen path { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .moment-schliesst .oben { animation: moment-oben 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .moment-schliesst .unten { animation: moment-unten 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .moment-wartet .oben { animation: wartet-oben 1.6s ease-in-out infinite alternate; }
  .moment-wartet .unten { animation: wartet-unten 1.6s ease-in-out infinite alternate; }
}
@keyframes moment-oben { from { transform: translateY(-8px) rotate(-14deg); opacity: 0.25; } }
@keyframes moment-unten { from { transform: translateY(8px) rotate(-14deg); opacity: 0.25; } }
@keyframes wartet-oben { from { transform: translateY(-4px); } to { transform: translateY(0); } }
@keyframes wartet-unten { from { transform: translateY(4px); } to { transform: translateY(0); } }
.moment-box { background: var(--akzent-hell); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.125rem 1.25rem; margin: 0 0 1.5rem; }
.moment-box-kopf { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.625rem; font-weight: 600; font-size: 1.125rem; }
.moment-box .moment-zeichen { width: 2.25rem; height: 2.25rem; }
.moment-liste { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.375rem; color: var(--text-2); }

/* Aufnahme (D21 E): Wartezustand ohne Tabs; die Ankunft ersetzt den Titel des Feeds durch eine Zeile mit dem sich
   schliessenden Zeichen, damit der volle Feed schon auf dem ersten Bildschirm steht. */
body.mitglied.ohne-tabs { padding-bottom: 0; }
.warten-label { margin: 1.5rem 0 0.5rem; font-size: 0.8125rem; color: var(--gedaempft); }
.warten-fuss { margin-top: 2rem; font-size: 0.875rem; }
.drin-kopf { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.75rem; }
.drin-kopf .moment-zeichen { width: 2.5rem; height: 2.5rem; }
.drin-kopf h1 { margin: 0; }
.drin-satz { margin: 0 0 1.5rem; color: var(--text-2); }
/* Aufnahme im Betrieb: kompakte Liste, «Nicht aufnehmen» je Beitrag, der Knopf für alle steht darunter. */
.aufnahme { margin-bottom: 3rem; }
.aufnahme-liste { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--linie); }
.aufnahme-liste li { padding: 0.875rem 0; border-bottom: 1px solid var(--linie); }
.aufnahme-liste p { margin: 0 0 0.375rem; overflow-wrap: break-word; }
.aufnahme-liste .meta { font-size: 0.875rem; color: var(--gedaempft); }
.aufnahme-ablehnen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.aufnahme-ablehnen select { width: auto; min-height: 2.5rem; font-size: 0.875rem; }
/* Ein Hinweis mit mehreren Absätzen (Ablehnung, M79): ohne die Abstände der Absätze an den Rändern. */
.hinweis-absaetze > p { margin: 0; }
.hinweis-absaetze > p + p { margin-top: 0.5rem; }
.aufnahme-alle { margin-top: 1.25rem; }
.weiter-titel { font-size: 1.125rem; margin: 2rem 0 0.5rem; }
.weiter-schritte { margin: 0 0 1.5rem; padding-left: 1.25rem; display: grid; gap: 0.5rem; color: var(--text-2); }

/* Gespräch: Melden oder blockieren als ruhiger Textlink unten (M81, wie «⋯» an der Karte, nur ausgeschrieben). */
.schutz { margin: 1.5rem 0 0.5rem; }
.schutz summary { cursor: pointer; color: var(--gedaempft); font-size: 0.875rem; min-height: 2.75rem; line-height: 2.75rem; display: inline-block; }
.schutz[open] summary { color: var(--text); }

/* ===== «Über usunu» v2 (M96): Bilder für den eigenen Agenten, das Brain und Wisdom, aus den Teilen der Bühne ===== */
.bild-klein, .bild-wisdom-heute { margin: 0 0 0.625rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gedaempft); }
.bild-wisdom-heute { margin-bottom: 0.375rem; font-weight: 600; color: var(--akzent-dunkel); }
.bild-chat .blase { max-width: 100%; }
.bild-notiz-agent { display: flex; flex-wrap: wrap; gap: 0 0.625rem; margin: 0 0 0.75rem; font-size: 0.75rem; color: var(--gedaempft); }
.bild-notiz-agent span { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.bild-notiz-titel { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.bild-notiz-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.375rem; font-size: 0.875rem; color: var(--text-2); }
.bild-notiz-liste li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.5rem; align-items: start; }
.bild-notiz-liste li::before { content: ''; width: 0.875rem; height: 0.875rem; margin-top: 0.2rem; border: 1.5px solid var(--linie-2); border-radius: 0.2rem; }
.bild-notiz-liste li.erledigt { color: var(--gedaempft); text-decoration: line-through; }
.bild-notiz-liste li.erledigt::before { background: var(--text); border-color: var(--text); }
.bild-notiz-liste li.neu { color: var(--text); }
.bild-wisdom-titel { margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }

/* ===== Jeder Kreis ist ein Beweis (E1l, D23): Kreis, Spiegel, Wand, Werkzeug, Seiten je Persona, Signal ===== */
/* Das Zeichen als Kreis: geschlossen ist ein Paar, offen (die Bögen auseinander) sind Suchende. */
.kreis-zeichen { width: 1.375rem; height: 1.375rem; flex: none; overflow: visible; }
.kreis-zeichen path { fill: none; stroke-width: 4; stroke-linecap: round; }
.kreis-zeichen .oben { stroke: var(--akzent); }
.kreis-zeichen .unten { stroke: var(--text); }
.kreis-offen .oben { transform: translateY(-3px); }
.kreis-offen .unten { transform: translateY(3px); }
.beweis-zeile { display: inline-flex; align-items: center; gap: 0.625rem; margin: 1.25rem 0 0; font-size: 1.0625rem; color: var(--text-2); }
.beweis-zeile .kreis-zeichen { width: 1.75rem; height: 1.75rem; }

/* «Ich habe …» (M101): drei Hälften als Radio, ohne JavaScript umschaltbar (Geschwister-Selektor). */
.waehler-teil { padding: 2rem 1rem 0; }
.waehler { max-width: 34rem; margin: 0 auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 1.25rem; padding: 1.25rem; box-shadow: var(--schatten); }
@media (min-width: 48rem) { .waehler { padding: 1.75rem; } }
.waehler-frage { margin: 0 0 0.75rem; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gedaempft); }
.waehler-radio { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.waehler-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.waehler-tab { padding: 0.5rem 0.9rem; min-height: 2.75rem; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--linie-2); font-size: 0.9375rem; background: var(--flaeche); color: var(--text); cursor: pointer; }
.waehler-panel { display: none; }
#haelfte-gebaut:checked ~ .waehler-gebaut, #haelfte-markt:checked ~ .waehler-markt, #haelfte-idee:checked ~ .waehler-idee { display: block; }
#haelfte-gebaut:checked ~ .waehler-tabs [for="haelfte-gebaut"], #haelfte-markt:checked ~ .waehler-tabs [for="haelfte-markt"], #haelfte-idee:checked ~ .waehler-tabs [for="haelfte-idee"] { background: var(--text); color: var(--bg); border-color: var(--text); }
#haelfte-gebaut:focus-visible ~ .waehler-tabs [for="haelfte-gebaut"], #haelfte-markt:focus-visible ~ .waehler-tabs [for="haelfte-markt"], #haelfte-idee:focus-visible ~ .waehler-tabs [for="haelfte-idee"] { outline: 3px solid var(--akzent); outline-offset: 2px; }
.waehler-fein { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--gedaempft); text-align: center; }

/* Der Spiegel: eine grosse, leichte Zahl und ein Satz; ohne Zahl der Satz für «früh». */
.spiegel { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin: 1.25rem 0; padding-top: 1.25rem; border-top: 1px solid var(--linie); text-align: left; }
.spiegel p { margin: 0; color: var(--text-2); font-size: 0.9375rem; line-height: 1.45; }
.spiegel .spiegel-zahl { font-size: 3.5rem; font-weight: 300; letter-spacing: -0.05em; line-height: 0.9; color: var(--text); }
.spiegel .spiegel-frueh { grid-column: 1 / -1; font-size: 1.0625rem; color: var(--text); }

/* Zuletzt geschlossen und der Puls (Zielbild §4.1). */
.kreise-teil { padding: 3rem 0; }
.kreise-label { margin: 0 0 1rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gedaempft); }
.kreise-wand { display: grid; gap: 0.75rem; }
@media (min-width: 48rem) { .kreise-wand { grid-template-columns: 1fr 1fr; } }
.kreise-wand-gross { display: grid; gap: 1rem; }
@media (min-width: 52rem) { .kreise-wand-gross { grid-template-columns: repeat(3, 1fr); } }
.kreis-klein { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1rem 1.125rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.kreis-klein h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.kreis-gross { display: grid; gap: 0.875rem; align-content: start; padding: 1.5rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.kreis-gross h3 { margin: 0; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.kreis-gross blockquote { margin: 0; padding-left: 0.875rem; border-left: 2px solid var(--akzent); color: var(--text-2); font-size: 0.9375rem; }
.kreis-gross cite { display: block; margin-top: 0.375rem; font-style: normal; font-size: 0.8125rem; color: var(--gedaempft); }
.kreis-meta { margin: 0.2rem 0 0; font-size: 0.8125rem; color: var(--gedaempft); }
.kreis-paar { position: relative; display: flex; width: 3.25rem; height: 3.25rem; flex: none; }
.kreis-paar span { width: 50%; height: 100%; display: grid; align-items: center; font-weight: 600; font-size: 0.8125rem; }
.kreis-paar span:first-child { border-radius: 999px 0 0 999px; justify-items: end; padding-right: 0.3rem; background: var(--bild-0-grund); color: var(--bild-0-text); }
.kreis-paar span:last-child { border-radius: 0 999px 999px 0; justify-items: start; padding-left: 0.3rem; background: var(--bild-3-grund); color: var(--bild-3-text); }
.kreis-paar.ton-1 span:first-child { background: var(--bild-1-grund); color: var(--bild-1-text); }
.kreis-paar.ton-1 span:last-child { background: var(--bild-2-grund); color: var(--bild-2-text); }
.kreis-paar.ton-2 span:first-child { background: var(--bild-4-grund); color: var(--bild-4-text); }
.kreis-paar.ton-2 span:last-child { background: var(--bild-0-grund); color: var(--bild-0-text); }
.kreis-paar::after { content: ""; position: absolute; left: calc(50% - 0.5px); top: 0.25rem; bottom: 0.25rem; width: 1px; background: var(--flaeche); }
.kreis-gross .kreis-paar { width: 4rem; height: 4rem; }
.kreise-mehr { margin: 1.25rem 0 0; text-align: center; }
.kreise-mehr a { color: var(--text); font-weight: 500; }
.puls { display: flex; gap: 0.75rem; align-items: center; width: max-content; max-width: calc(100% - 2rem); margin: 2rem auto 0; font-size: 0.875rem; color: var(--text-2); padding: 0.625rem 1rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); }
.puls::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hell); }

/* «Dein erster Beitrag in 60 Sekunden» (M102). */
.werkzeug { max-width: 34rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
.werkzeug h1 { font-size: clamp(1.875rem, 6vw, 2.75rem); letter-spacing: -0.04em; line-height: 1.05; margin: 0 0 0.5rem; text-align: center; text-wrap: balance; }
.werkzeug-satz { text-align: center; color: var(--text-2); margin: 0 0 1.5rem; }
.werkzeug-schritte { display: flex; gap: 0.375rem; justify-content: center; margin: 0 0 1.25rem; }
.werkzeug-schritte i { width: 2.5rem; height: 0.25rem; border-radius: 999px; background: var(--akzent); }
.werkzeug-antworten { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.werkzeug-antworten li { font-size: 0.8125rem; padding: 0.375rem 0.75rem; border-radius: 999px; background: var(--flaeche-2); color: var(--text-2); }
.werkzeug-antworten b { color: var(--text); font-weight: 600; }
.vorschau { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.125rem; box-shadow: var(--schatten); }
.vorschau-kopf { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.vorschau-bild { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--akzent-hell); }
.vorschau-wer { margin: 0; font-weight: 600; }
.vorschau-meta { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--gedaempft); }
.vorschau textarea { width: 100%; min-height: 9rem; border: 1px solid var(--linie-2); border-radius: 0.5rem; padding: 0.75rem; font: inherit; font-size: 1rem; line-height: 1.5; color: var(--text); background: var(--bg); resize: vertical; }
.vorschau textarea:focus { outline: 3px solid var(--akzent); outline-offset: 1px; }
.vorschau-hilfe { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--gedaempft); }
.werkzeug-eintreten { display: grid; gap: 1rem; }
.werkzeug-fragen { margin-top: 1.5rem; border-top: 1px solid var(--linie); padding-top: 1rem; }
.werkzeug-fragen summary { cursor: pointer; font-weight: 500; min-height: 2.75rem; display: flex; align-items: center; }
.werkzeug-fragen[open] summary { margin-bottom: 1rem; }
.werkzeug-fragen form { display: grid; gap: 1.25rem; }
.pillen-wahl { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.pillen-wahl legend { width: 100%; margin: 0 0 0.5rem; font-weight: 500; font-size: 0.9375rem; }
.pille-wahl { position: relative; }
.pille-wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pille-wahl span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--flaeche); font-size: 0.9375rem; color: var(--text); }
.pille-wahl input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }
.pille-wahl input:focus-visible + span { outline: 3px solid var(--akzent); outline-offset: 2px; }

/* Seiten je Persona, Kreise, Signal (M103, M104). */
.mitte-held { text-align: center; max-width: 56rem; margin: 0 auto; padding: 2.5rem 1rem 3.5rem; display: grid; justify-items: center; }
@media (min-width: 48rem) { .mitte-held { padding-top: 3.5rem; } }
.mitte-held .held-satz { margin: 1.25rem auto 1.75rem; }
.pille .kreis-zeichen { width: 1.125rem; height: 1.125rem; }
.rechner { width: 100%; max-width: 40rem; margin: 1rem auto 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 1.25rem; padding: 1.5rem; box-shadow: var(--schatten); display: grid; gap: 1.25rem; text-align: left; }
.regler { display: grid; gap: 0.5rem; }
.regler label { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; color: var(--text-2); }
.regler output { color: var(--text); font-weight: 600; white-space: nowrap; }
.regler input { width: 100%; min-height: 2.75rem; accent-color: var(--akzent); }
.rechner-ergebnis { border-top: 1px solid var(--linie); padding-top: 1.25rem; display: grid; gap: 0.25rem; }
.rechner-ergebnis p { margin: 0; color: var(--text-2); }
.rechner-ergebnis .rechner-gross { font-size: clamp(2.75rem, 9vw, 4rem); font-weight: 300; letter-spacing: -0.05em; line-height: 1; color: var(--text); }
.rechner-live .rechner-knopf { display: none; }
.quelle-zeile { margin: 1.5rem 0 0; font-size: 0.8125rem; color: var(--gedaempft); }
.beispiel-etikett { display: inline-block; margin: 0 0 1rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--flaeche-2); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gedaempft); }
.zitat-gross { margin: 0 0 2rem; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--text); }
.zitat-gross cite { display: block; margin-top: 0.75rem; font-size: 0.9375rem; font-style: normal; letter-spacing: 0; color: var(--gedaempft); }
.zeitleiste { list-style: none; padding: 0; margin: 0; }
.zeitleiste li { position: relative; display: grid; grid-template-columns: 5.25rem 1fr; gap: 1rem; padding: 0 0 1.5rem 1.5rem; }
.zeitleiste li::before { content: ""; position: absolute; left: 0; top: 0.375rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--akzent); }
.zeitleiste li::after { content: ""; position: absolute; left: calc(0.3125rem - 0.5px); top: 1.125rem; bottom: 0; width: 1px; background: var(--linie-2); }
.zeitleiste li:last-child::after { display: none; }
.zeitleiste li:last-child::before { background: var(--akzent); }
.zeitleiste b { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gedaempft); padding-top: 0.125rem; }
.chat-bild { max-width: 34rem; width: 100%; margin: 0.5rem auto 0; }
.chat-bild .blase { max-width: 100%; }
.chat-bild .bild-klein { margin: 0 0 0.75rem; font-size: 0.8125rem; color: var(--gedaempft); }
.chat-links { margin: 0; }
.buehne-beispiel-links { text-align: left; }
.adressen { display: grid; gap: 0.5rem; margin: 1.75rem 0 0; width: 100%; max-width: 34rem; }
.adressen p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--linie); border-radius: 0.625rem; background: var(--flaeche); font-size: 0.9375rem; text-align: left; }
.adressen span { color: var(--gedaempft); }
.adressen code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875rem; color: var(--text); word-break: break-all; }
.zweispaltig { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .zweispaltig { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.regeln-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.regeln-liste li { display: grid; gap: 0.125rem; padding-left: 1.75rem; position: relative; }
.regeln-liste li::before { content: ""; position: absolute; left: 0.25rem; top: 0.4rem; width: 0.875rem; height: 0.4375rem; border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(-45deg); }
.regeln-liste span { color: var(--text-2); font-size: 0.9375rem; }
.kreis-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }
.kreis-filter a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--linie-2); font-size: 0.9375rem; color: var(--text); text-decoration: none; }
.kreis-filter a[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.kreise-leer { display: grid; justify-items: center; text-align: center; gap: 0.5rem; max-width: 34rem; margin: 0 auto; }
.kreise-leer .kreis-zeichen { width: 3rem; height: 3rem; margin-bottom: 0.5rem; }
.kreise-leer h2 { margin: 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.kreise-leer p { margin: 0; color: var(--text-2); }
.balken { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.balken li { display: grid; gap: 0.375rem; }
.balken-kopf { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; }
.balken-kopf small { color: var(--gedaempft); font-size: 0.875rem; }
.balken-spur { display: block; width: 100%; height: 0.5rem; }
.balken-grund { fill: var(--flaeche-2); }
.balken-wert { fill: var(--akzent); }

/* Kreis schliessen im Gespräch (M100). */
.gespraech-titel { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.kreis-am-namen { display: inline-flex; }
.kreis-am-namen .kreis-zeichen { width: 1.5rem; height: 1.5rem; }
.kreis-box { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.kreis-zu { background: var(--akzent-hell); }
.kreis-box .hinweis-box { margin-bottom: 1rem; }
.kreis-titel { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.5rem; font-size: 1.25rem; font-weight: 500; }
.kreis-vorschlag summary, .kreis-erzaehlen summary { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; cursor: pointer; font-weight: 500; }
.kreis-vorschlag form, .kreis-erzaehlen form { display: grid; gap: 0.75rem; justify-items: start; }
.kreis-erzaehlen form input[type="text"], .kreis-erzaehlen form textarea, .kreis-nachklang input[type="text"] { width: 100%; border: 1px solid var(--feld-rand); border-radius: 0.5rem; padding: 0.625rem 0.75rem; font: inherit; background: var(--flaeche); color: var(--text); }
.kreis-nachklang { display: grid; gap: 0.75rem; justify-items: start; margin: 1rem 0; }
.einwilligung { border: 0; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.einwilligung legend { font-weight: 500; margin-bottom: 0.25rem; }
.kreis-stimme-betrieb { border-left: 2px solid var(--linie-2); padding-left: 0.875rem; margin: 0.75rem 0; }
.kreis-stimme-betrieb p { margin: 0.125rem 0; }

/* Fuss: die Wege zu den Seiten um die Beweise. */
.fuss-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem; font-size: 0.875rem; margin-bottom: 0.5rem; }
.fuss-wege a { color: var(--text); display: inline-block; padding: 0.5rem 0; min-height: 2.75rem; line-height: 1.75rem; }