/* > **Gepflegt von:** `frag-anna-website`
   Erzeugt von `npm run gestaltung` aus `stil/teile/oberflaeche.css`. Stand: siehe gestaltung-manifest.json.
   Nicht von Hand ändern: Änderungen hier gehen beim nächsten Lauf verloren.
   Gehört etwas hinein, schreib es in deine Abschlussmeldung.

   Braucht tokens.css davor. Alle Klassen tragen das Präfix o-, damit nichts mit konto.css oder eurem k-Stil kollidiert. Am Ende der Baustein Vorbehalt (.o-vorbehalt, auch für PDFs). Gesetz: ../GESETZ-APP-OBERFLAECHE.md. */

/* Bausteine für die Betreiber-Oberfläche und das Büro-Konto der App (GESETZ-APP-OBERFLAECHE.md).
   Präfix o-, damit nichts mit konto.css oder dem k-Stil der App kollidiert. Braucht tokens.css davor.
   Mobil zuerst: Alles gilt ab 320 px; die Regeln unter @media (min-width: …) erweitern nur.
   Diese Datei wird von der Website NICHT geladen (build.mjs sammelt sie nicht ein); sie wird mit
   npm run gestaltung nach _gemeinsam/gestaltung/oberflaeche.css abgegeben. Quelle bleibt hier. */

/* ─── Grundfläche und Seite ───────────────────────────────────────────────── */
.o-seite { font-family: var(--schrift); font-size: 1rem; line-height: 1.5; color: var(--nacht); background: var(--papier-handy); -webkit-font-smoothing: antialiased; }
.o-seite *, .o-seite *::before, .o-seite *::after { box-sizing: border-box; }
/* Nur Textlinks sind grün. Knöpfe, Chips und Kalendertage als <a> behalten ihre Farbe (App-Werft, 26.09.2026: a.o-knopf
   stand grün auf grün, 1,0 : 1). :where() hält die Spezifität niedrig, damit die Bausteine gewinnen. */
.o-seite :where(a:not(.o-knopf, .o-chip, .o-tag, .o-textknopf)) { color: var(--gruen-tief); text-underline-offset: 3px; }
.o-seite :where(a:not(.o-knopf, .o-chip, .o-tag, .o-textknopf)):hover { color: var(--gruen-druck); }
.o-seite :focus-visible { outline: 3px solid var(--gruen-hell); outline-offset: 2px; border-radius: var(--r-8); }
.o-seite p { margin: 0; text-wrap: pretty; }
.o-seite h1, .o-seite h2, .o-seite h3 { margin: 0; font-weight: 600; color: var(--nacht); text-wrap: balance; }
.o-seite h1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -.02em; }
.o-seite h2 { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.01em; }
.o-seite h3 { font-size: 1.0625rem; line-height: 1.4; }
.o-seite .o-klein { font-size: .875rem; line-height: 1.5; color: var(--schiefer); }
/* Links im Nebentext und im Satz einer Zeile: 44 px Tippfläche, ohne die Zeile zu strecken (Innen- gegen Außenabstand). */
.o-klein a, .o-zeile-was a:not(.o-knopf), .o-einleitung a, .o-tabelle td a, .o-leer a:not(.o-knopf) { display: inline-block; padding: 12px 0; margin: -12px 0; }
.o-seite .o-neben-text { color: var(--schiefer); }
.o-inhalt { max-width: 840px; margin: 0 auto; padding: var(--a5) var(--a4) var(--a8); }
.o-kopf { display: grid; gap: var(--a3); margin-bottom: var(--a6); }
.o-kopf .o-einleitung { color: var(--schiefer); max-width: 62ch; }
/* Kopf-Skala (Layoutsystem, App-Werft und Jonathan 30.09.2026): Titel → Einleitung 12 px (gap a3), Einleitung → Reiter 24 px (gap + a3),
   Kopf → Inhalt 32 px (a6). Reiter stehen IM Kopf; unten kein Fokus-Rand von o-chips (-2 px), sonst wären es 30 statt 32 px. */
.o-kopf > .o-chips { margin-top: var(--a3); margin-bottom: 0; }
.o-seite .o-eyebrow, .o-eyebrow { font-size: .8125rem; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen-tief); }
.o-gruppe { display: grid; gap: var(--a3); }
.o-gruppe + .o-gruppe, .o-mit-neben + .o-gruppe, .o-hinweis + .o-gruppe { margin-top: var(--a7); } /* auch nach der Hauptspalte (App-Werft, 25.09.2026) */
.o-gruppe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a4); }
@media (min-width: 600px) { .o-inhalt { padding: var(--a6) var(--a5) var(--a9); } .o-seite h1 { font-size: 2.2rem; } .o-seite { background: var(--papier); } }
@media (min-width: 1200px) {
  /* Nebenspalte »Heute«: die Wirkung der Einstellung, in Zahlen, neben der Karte. Darunter 1200 px steht sie über der Karte. */
  .o-mit-neben { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--a5); align-items: start; }
  .o-inhalt--breit { max-width: 1160px; }
}

/* ─── Karte: eine Ebene tief, nie Karte in Karte ─────────────────────────── */
.o-karte { display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-20); box-shadow: var(--schatten-1); }
/* Leise Karte: ohne Schatten, mit Linie. Auf der Papier-Grundfläche der Seite wäre eine Papier-Karte unsichtbar
   (Foto 25.09.2026: die Spalte »Heute« schwebte als loser Text). */
.o-karte--still { background: var(--weiss); border-color: var(--linie); box-shadow: none; }
.o-karte-inhalt { padding: var(--a5); }
.o-karte-fuss { margin-top: auto; }
@media (min-width: 600px) { .o-karte-inhalt { padding: 28px 32px; } }

/* ─── Zeile: eine Einstellung, ein Datensatz. Links Name und Satz, rechts die Bedienung ── */
.o-zeile { display: grid; gap: var(--a3); padding: var(--a4) var(--a5); }
.o-zeile + .o-zeile { border-top: 1px solid var(--linie); }
.o-zeile-was { display: grid; gap: 4px; min-width: 0; }
.o-zeile-was b { font-weight: 600; color: var(--nacht); }
.o-zeile-was p { color: var(--schiefer); font-size: .9375rem; overflow-wrap: anywhere; }
.o-zeile-tun { display: flex; align-items: center; justify-content: flex-end; gap: var(--a3); flex-wrap: wrap; }
.o-zeile-herkunft { grid-column: 1 / -1; font-size: .875rem; color: var(--schiefer); }
.o-zeile-herkunft a, .o-zeile-herkunft button { font: inherit; }
.o-zeile-herkunft a { display: inline-block; padding: 12px 0; margin: -12px 0; }
@media (min-width: 600px) {
  .o-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 20px 24px; }
}
/* Die Karte misst sich selbst, nicht das Fenster: Neben der Konto-Navigation ist sie schmaler als im Beispiel, und
   eine Zahl mit Einheit quetschte den Satz auf zwölf Zeichen je Zeile (App-Werft, 25.09.2026, 600 bis 900 px). Ist die
   Karte schmaler als 560 px, steht die Bedienung unter dem Satz, linksbündig. */
.o-karte { container-type: inline-size; }
@container (max-width: 560px) {
  .o-zeile { grid-template-columns: minmax(0, 1fr); }
  .o-zeile-tun { justify-content: flex-start; }
}

/* Variante: Bedienung unter dem Satz, für Zeilen mit Etikett UND Knopf (Wächter-Tafel je Land; App-Werft, 26.09.2026),
   damit der Satz nicht auf ein Drittel der Karte gedrückt wird. */
.o-zeile--unten { grid-template-columns: minmax(0, 1fr); }
.o-zeile--unten .o-zeile-tun { justify-content: flex-start; }

/* ─── Schalter: ein Häkchen-Feld, das wie ein Schalter aussieht; Tippfläche 44 px ── */
.o-schalter { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; user-select: none; }
.o-schalter input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.o-schalter-bahn { position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--nacht-20); transition: background-color .18s var(--kurve); flex: none; }
.o-schalter-bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--weiss); box-shadow: 0 1px 2px rgba(14, 39, 68, .3); transition: transform .18s var(--kurve); }
.o-schalter input:checked + .o-schalter-bahn { background: var(--gruen-tief); }
.o-schalter input:checked + .o-schalter-bahn::after { transform: translateX(20px); }
.o-schalter input:focus-visible + .o-schalter-bahn { outline: 3px solid var(--gruen-hell); outline-offset: 2px; }
.o-schalter input:disabled + .o-schalter-bahn { opacity: .5; }
.o-schalter-wort { font-weight: 500; min-width: 2.2em; }

/* ─── Felder: Beschriftung über dem Feld, Fehler am Feld, eine Spalte ─────── */
.o-feld { display: grid; gap: 6px; }
.o-feld > label, .o-feld-name { font-size: .875rem; font-weight: 500; color: var(--nacht); }
.o-eingabe { min-height: 44px; padding: 0 14px; border: 1px solid var(--linie); border-radius: var(--r-12); background: var(--weiss); font: inherit; color: var(--nacht); width: 100%; }
.o-eingabe:focus-visible { border-color: var(--gruen-tief); outline: 3px solid var(--gruen-hell); outline-offset: 0; }
.o-eingabe[aria-invalid="true"] { border-color: var(--fehler); }
.o-feld-fehler { font-size: .875rem; color: var(--fehler); }
.o-feld-hilfe { font-size: .875rem; color: var(--schiefer); }
.o-textfeld { min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
/* Zahl mit Einheit dahinter: Das Feld ist so breit wie die Zahl, die Einheit steht als Wort daneben. */
.o-zahl { display: inline-flex; align-items: center; gap: 8px; }
.o-zahl .o-eingabe { width: calc(8ch + 28px); text-align: right; font-variant-numeric: tabular-nums; }
.o-zahl-einheit { color: var(--schiefer); white-space: nowrap; }

/* ─── Knöpfe: am Knopf steht, was passiert ───────────────────────────────── */
.o-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--r-12); border: 1.5px solid transparent; background: var(--gruen-tief); color: var(--weiss); font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color .18s var(--kurve), border-color .18s var(--kurve), transform .12s var(--kurve); }
/* hidden gewinnt immer (App L422, 01.10.2026): .o-knopf setzt display und hob damit hidden auf, Sofort-Formulare zeigten ihren Knopf.
   Gilt für jeden o-Baustein, damit derselbe Fehler bei keinem anderen wiederkommt. */
[class^="o-"][hidden], [class*=" o-"][hidden] { display: none !important; }
.o-knopf:hover { background: var(--gruen-druck); color: var(--weiss); }
.o-knopf:active { transform: translateY(1px); }
.o-knopf--zweit { background: var(--weiss); color: var(--nacht); border-color: var(--nacht-20); }
.o-knopf--zweit:hover { background: var(--papier); color: var(--nacht); border-color: var(--nacht-30); }
.o-knopf--zweit:active { background: var(--papier-druck); }
.o-knopf--gefahr { background: var(--weiss); color: var(--fehler); border-color: var(--fehler); }
.o-knopf--gefahr:hover { background: var(--fehler-zart); color: var(--fehler); }
.o-knopf:disabled, .o-knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.o-knopf svg { width: 20px; height: 20px; flex: none; }
.o-textknopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-weight: 500; color: var(--gruen-tief); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.o-textknopf:hover { color: var(--gruen-druck); }
.o-textknopf:active { color: var(--nacht); transform: translateY(1px); }
.o-knoepfe { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: center; }
.o-knoepfe > form { display: contents; } /* zwei Formulare in einer Knopfreihe (App, 26.09.2026) */

/* ─── Etiketten und Zustände: drei Farben, eine Form ─────────────────────── */
.o-etikett { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--papier); color: var(--schiefer); font-size: .75rem; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; letter-spacing: .01em; }
.o-etikett--gut { background: var(--gruen-zart); color: var(--gruen-druck); }      /* freigegeben, gepostet, an */
.o-etikett--warn { background: var(--warn-zart); color: var(--warn-tief); }                /* fällig, pausiert, wartet */
.o-etikett--fehler { background: var(--fehler-zart); color: var(--fehler); }      /* gesperrt, Fehler */
.o-etikett--still { background: transparent; border: 1px solid var(--linie); }    /* Entwurf, Vorrat, Archiv */
.o-etikett--neu { background: var(--neu-zart); color: var(--neu-tief); }   /* neu bei ANNA, noch nicht entschieden */
.o-neu-flaeche { background: var(--neu-zart); border-left: 3px solid var(--neu); border-radius: var(--r-12); }
.o-neu-punkt { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--neu); color:var(--weiss); font-size:.6875rem; font-weight:700; line-height:1; }
.o-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ─── Hinweiskarte: ein Symbol, ein Satz, ein Link zur Abhilfe ────────────── */
.o-hinweis { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r-12); background: var(--weiss); border: 1px solid var(--linie); color: var(--nacht); font-size: .9375rem; }
.o-hinweis svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--schiefer); }
.o-hinweis--warn { background: var(--warn-zart); border-color: transparent; }
.o-hinweis--warn svg { color: var(--warn); }
.o-hinweis--fehler { background: var(--fehler-zart); border-color: transparent; }
.o-hinweis--fehler svg { color: var(--fehler); }
.o-hinweis--gut { background: var(--gruen-zart); border-color: transparent; }
.o-hinweis--gut svg { color: var(--gruen-druck); }
/* Der Link im Satz: 44 px Tippfläche über Innenabstand mit negativem Außenabstand, damit die Zeile nicht wächst;
   --gruen-druck, weil --gruen-tief auf --fehler-zart nur 4,4 : 1 schafft (Prüfung 25.09.2026). */
.o-hinweis a { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 500; white-space: nowrap; color: var(--gruen-druck); }

/* ─── Quittung: Rückmeldung in der Zeile, nicht als Balken oben ───────────── */
.o-quittung { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 500; color: var(--gruen-tief); opacity: 0; transition: opacity .2s var(--kurve); }
.o-quittung[data-zeigt] { opacity: 1; }
.o-quittung svg { width: 16px; height: 16px; }

/* ─── Symbolkachel: 48 px, schrumpft nie ─────────────────────────────────── */
.o-symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-12); background: var(--papier); color: var(--nacht); flex: none; }
.o-karte--still .o-symbol { background: var(--weiss); }
.o-symbol svg { width: 22px; height: 22px; }

/* ─── Chips: Filter, die wie Reiter wirken; Tippfläche 44 px ─────────────── */
.o-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.o-chips::-webkit-scrollbar { display: none; }
/* Chips als Auswahl in einem Feld brechen um, statt zu wischen: Eine Wahl darf nicht halb aus dem Bild ragen (Foto
   Einrichten, 26.09.2026: »Keine Vo…«). Filterreihen über Listen bleiben wischbar. */
.o-feld .o-chips, .o-zeile-tun .o-chips { flex-wrap: wrap; overflow: visible; }
.o-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--weiss); color: var(--nacht); font: inherit; font-size: .9375rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.o-chip:hover { border-color: var(--nacht-30); }
.o-chip:active { background: var(--papier-druck); }
/* Chips als Knöpfe tragen aria-pressed, Chips als Links (Filter in der Adresse) aria-current; beide sehen gleich aus.
   App-Werft, 25.09.2026: aria-pressed gehört nur auf Knöpfe. */
.o-chip[aria-pressed="true"], .o-chip[aria-selected="true"], .o-chip[aria-current="true"], .o-chip[aria-current="page"] { background: var(--nacht); color: var(--weiss); border-color: var(--nacht); }
.o-chip[aria-pressed="true"]:active, .o-chip[aria-current]:active { background: var(--nacht-tief); }
.o-chip .o-zaehler { font-size: .8125rem; opacity: .75; font-variant-numeric: tabular-nums; }
/* ─── Filterleiste: ein eigener Baustein, keine Reiter (Regel filter_reiter) ─────────────────────────────────────────────────
   o-chips nur für die Bereiche-Navigation (Reiter). Filter stehen als eine Zeile mit Namen, kleiner und leichter: 36 statt 44 px,
   Ecken 8 statt rund, aktiv hell statt Nachtblau. Unter 600 px wieder 44 px Tippfläche. */
.o-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2); margin-bottom: var(--a5); }
.o-filter-name { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--schiefer); margin-right: var(--a1); }
.o-filter .o-chip { min-height: 36px; padding: 0 12px; font-size: .875rem; border-radius: var(--r-8); background: transparent; }
.o-filter .o-chip[aria-current], .o-filter .o-chip[aria-pressed="true"] { background: var(--papier-druck); color: var(--nacht); border-color: var(--nacht-30); }
@media (max-width: 599px) { .o-filter .o-chip { min-height: 44px; } }

/* ─── Kennzahlen (»Heute«) ───────────────────────────────────────────────── */
.o-heute { display: grid; gap: var(--a4); padding: var(--a5); }
.o-heute-zahl { display: grid; gap: 2px; }
.o-heute-zahl b { font-size: 1.75rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.o-heute-zahl span { color: var(--schiefer); font-size: .875rem; }
/* Ein Wort statt einer Zahl (»Unser eigener Server geo.frag-anna.de«): Textgröße, sonst schreit es. App-Werft, 25.09.2026. */
.o-heute-zahl b.o-heute-wort { font-size: 1.0625rem; line-height: 1.35; letter-spacing: 0; }
@media (min-width: 600px) and (max-width: 1199px) { .o-heute { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

/* ─── Kennzahlen-Reihe: leise Karten mit Zahl und Satz, so viele nebeneinander, wie Platz ist (Überblick) ── */
.o-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--a5); align-items: stretch; }
.o-kennzahlen > .o-karte { padding: var(--a5); }

/* ─── Nebeneinander: links der Text, rechts die Vorschau (Mail-Editor); unter 900 px untereinander ── */
.o-nebeneinander { display: grid; gap: var(--a5); align-items: start; }
@media (min-width: 900px) { .o-nebeneinander { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.o-nebeneinander > .o-vorschau { max-width: none; position: sticky; top: var(--a5); }
.o-vorschau-betreff { font-weight: 600; color: var(--nacht); margin-bottom: 6px; }
.o-vorschau--mail .o-vorschau-kopf { align-items: flex-start; }

/* ─── Tabelle: Zahlen rechts und tabellarisch, Kopf klebt, am Handy Karten ── */
.o-tabelle-huelle { border: 1px solid var(--linie); border-radius: var(--r-20); background: var(--weiss); overflow: hidden; }
.o-tabelle { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.o-tabelle th, .o-tabelle td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.o-tabelle thead th { position: sticky; top: 0; background: var(--papier); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--nacht); z-index: 1; }
.o-tabelle tbody tr:last-child > * { border-bottom: 0; }
.o-tabelle .o-zahl-spalte { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 599px) {
  /* Kopfzeile am Handy weg; die Spaltennamen stehen je Zelle in data-titel. (Versteckt statt geclippt, sonst meldet
     senkrechtAbgeschnitten() die Kopfzeile als verlorenen Text, 25.09.2026.) */
  .o-tabelle thead { display: none; }
  .o-tabelle tr { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--linie); }
  .o-tabelle tr:last-child { border-bottom: 0; }
  .o-tabelle td { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 8px; padding: 0; border: 0; text-align: left; }
  .o-tabelle td::before { content: attr(data-titel); color: var(--schiefer); font-size: .8125rem; }
  .o-tabelle .o-zahl-spalte { text-align: left; }
}

/* ─── Leerer Zustand: was hier entsteht, der eine Knopf, ein ruhiges Symbol ── */
.o-leer { display: grid; justify-items: center; text-align: center; gap: var(--a3); padding: var(--a7) var(--a5); }
.o-leer .o-symbol { width: 56px; height: 56px; }
.o-leer p { color: var(--schiefer); max-width: 40ch; }

/* ─── Ladezustand: Skelette in der Form des Inhalts, keine Sprünge ────────── */
.o-skelett { display: block; height: 1em; border-radius: 6px; background: linear-gradient(90deg, var(--papier) 0%, #ECEEEA 50%, var(--papier) 100%); background-size: 200% 100%; animation: o-schimmer 1.4s linear infinite; }
.o-skelett--zeile { height: 60px; border-radius: 0; }
.o-skelett--kurz { width: 40%; }
@keyframes o-schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ─── Beitrag (Redaktionsplan): Karte mit Kopf, aufklappbarem Text und Fuß ── */
.o-beitraege { display: grid; gap: var(--a4); }
.o-beitrag { padding: 0; }
.o-beitrag > summary { list-style: none; cursor: pointer; padding: var(--a4) var(--a5); display: grid; gap: 8px; }
.o-beitrag > summary::-webkit-details-marker { display: none; }
.o-beitrag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .875rem; color: var(--schiefer); }
.o-beitrag-titel { font-size: 1.0625rem; font-weight: 600; color: var(--nacht); }
.o-beitrag-pfeil { justify-self: end; width: 20px; height: 20px; color: var(--schiefer); transition: transform .18s var(--kurve); }
.o-beitrag-meta, .o-beitrag-titel { grid-column: 1; }
.o-beitrag[open] .o-beitrag-pfeil { transform: rotate(180deg); }
.o-beitrag-koerper { padding: 0 var(--a5) var(--a5); display: grid; gap: var(--a4); border-top: 1px solid var(--linie); padding-top: var(--a4); }
.o-beitrag-text { white-space: pre-line; max-width: 62ch; }
.o-beitrag-bild { width: 100%; max-width: 320px; border-radius: var(--r-12); border: 1px solid var(--linie); }
.o-belege { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .875rem; color: var(--schiefer); }
.o-belege li { padding-left: 16px; position: relative; overflow-wrap: anywhere; }
.o-belege li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 1.5px; background: var(--gruen); }
.o-beitrag-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); }
.o-beitrag-fuss .o-datum { margin-left: auto; font-size: .875rem; color: var(--schiefer); }
@media (max-width: 599px) { .o-beitrag-pfeil { grid-column: 1; } }
@media (min-width: 600px) { .o-beitrag > summary { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .o-beitrag-pfeil { grid-column: 2; grid-row: 1 / 3; } }

/* ─── Vorschau: so sieht der Beitrag auf LinkedIn aus. Papier ohne Schatten, damit es ein Beispiel bleibt und kein
   zweiter Rahmen in der Karte (§2.5). Maße von der App-Werft (k-li, 25.09.2026), hier an die Quelle geholt. ── */
.o-vorschau { max-width: 560px; padding: 14px 16px; border-radius: var(--r-12); background: var(--papier); }
.o-vorschau-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.o-vorschau-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gruen-zart); color: var(--gruen-druck); font-weight: 700; font-size: .9375rem; flex: none; }
.o-vorschau-name { font-size: .9375rem; font-weight: 600; color: var(--nacht); }
.o-vorschau-zeile { font-size: .8125rem; color: var(--schiefer); }
.o-vorschau-text { margin: 0; font-size: .9375rem; line-height: 1.5; white-space: pre-line; color: var(--nacht); }
.o-vorschau-mehr { color: var(--schiefer); }

/* ─── Mehr: Aufklapper für Nebensächliches (Demografie, Verlauf, Ränge). Die Zusammenfassung sieht aus wie ein
   Textknopf und sagt, was aufgeht (»Durchschnitt je Sorte anzeigen«). App-Werft MM5b, 26.09.2026, an die Quelle. ── */
.o-mehr > summary:not(.o-knopf) { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-weight: 500; color: var(--gruen-tief); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.o-mehr > summary::-webkit-details-marker { display: none; }
.o-mehr > summary::after { content: "▾"; font-size: .875rem; text-decoration: none; transition: transform .18s var(--kurve); }
.o-mehr[open] > summary::after { transform: rotate(180deg); }
.o-mehr > summary:hover { color: var(--gruen-druck); }
.o-mehr > :not(summary) { margin-top: var(--a3); }

/* ─── Datei: Feld für Uploads (Screenshots, Export). Sieht aus wie ein Feld, der Knopf steht im Feld; mehrere Dateien
   über multiple. Ohne diesen Baustein rendert der Browser sein rohes Steuerelement (Foto Martin, 26.09.2026). ── */
.o-datei { display: block; width: 100%; min-height: 44px; padding: 7px 10px; border: 1px dashed var(--nacht-30); border-radius: var(--r-12); background: var(--weiss); font: inherit; color: var(--schiefer); cursor: pointer; }
.o-datei::file-selector-button { font: inherit; font-weight: 600; color: var(--nacht); background: var(--papier); border: 1px solid var(--nacht-20); border-radius: var(--r-8); padding: 6px 12px; margin-right: 10px; cursor: pointer; }
.o-datei:hover { border-color: var(--nacht); }
.o-datei:focus-visible { border-color: var(--gruen-tief); outline: 3px solid var(--gruen-hell); outline-offset: 0; }

/* ─── Ampel (KONZEPT-AMPEL-MELDUNGEN): Zeichen mit Form, Zähler oben, Meldungskarte mit den Feldern aus §2 ── */
.o-ampel-zeichen { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.o-ampel-zeichen svg { width: 22px; height: 22px; }
.o-ampel-zeichen--rot { color: var(--ampel-rot); }
.o-ampel-zeichen--orange { color: var(--ampel-orange); }
.o-ampel-zeichen--gruen { color: var(--ampel-gruen); }
.o-ampel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); }
.o-ampel-feld { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: var(--a4) var(--a5); border-radius: var(--r-20); border: 1px solid var(--linie); background: var(--weiss); color: var(--nacht); text-decoration: none; }
.o-ampel-feld b { font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.o-ampel-feld > span:last-child { grid-column: 1 / -1; font-size: .875rem; color: var(--schiefer); }
.o-ampel-feld--rot { background: var(--ampel-rot-zart); border-color: transparent; }
.o-ampel-feld--rot b, .o-ampel-feld--rot > span:last-child { color: var(--ampel-rot-tief); }
.o-ampel-feld--orange { background: var(--ampel-orange-zart); border-color: transparent; }
.o-ampel-feld--orange b, .o-ampel-feld--orange > span:last-child { color: var(--ampel-orange-tief); }
/* Gruppentitel in der Farbe ihrer Ampel statt im Grün der Eyebrows (»ROT · 1« in Grün las sich falsch). */
.o-eyebrow--rot { color: var(--ampel-rot-tief); }
.o-eyebrow--orange { color: var(--ampel-orange-tief); }
.o-ampel-feld[aria-current] { outline: 2px solid var(--nacht); outline-offset: 2px; }
.o-ampel-satz { margin-top: var(--a4); font-weight: 600; }
@media (max-width: 599px) { .o-ampel { grid-template-columns: minmax(0, 1fr); } }

.o-meldung { border-left: 4px solid var(--linie); }
.o-meldung--rot { border-left-color: var(--ampel-rot); }
.o-meldung--orange { border-left-color: var(--ampel-orange); }
.o-meldung--gruen { border-left-color: var(--ampel-gruen); }
.o-meldung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.o-meldung-wort { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.o-meldung--rot .o-meldung-wort { color: var(--ampel-rot-tief); }
.o-meldung--orange .o-meldung-wort { color: var(--ampel-orange-tief); }
.o-meldung--gruen .o-meldung-wort { color: var(--ampel-gruen-tief); }
.o-meldung-was { font-size: 1.0625rem; font-weight: 600; margin-top: 6px; }
.o-meldung-felder { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 8px 16px; margin: var(--a4) 0 0; }
.o-meldung-felder dt { color: var(--schiefer); font-size: .875rem; }
.o-meldung-felder dd { margin: 0; }
.o-meldung-felder dd a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.o-meldung-schritte { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.o-meldung-code { font-family: var(--mono); font-size: .8125rem; color: var(--schiefer); }
@media (max-width: 599px) { .o-meldung-felder { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .o-meldung-felder dd { margin-bottom: 8px; } }

/* ─── Kalender: sieben Spalten, jeder Tag eine Tippfläche, Punkte je Beitrag ── */
.o-kalender { display: grid; gap: var(--a3); }
.o-kalender-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a3); }
.o-kalender-monat { font-weight: 600; white-space: nowrap; }
.o-kalender-kopf .o-knopf { min-width: 44px; padding: 0 12px; }
.o-kalender-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.o-kalender-tage .o-wochentag { text-align: center; font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--schiefer); padding: 4px 0; }
.o-tag { display: grid; gap: 4px; align-content: start; justify-items: center; min-height: 44px; padding: 6px 2px; border-radius: var(--r-8); border: 1px solid transparent; background: var(--weiss); font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--nacht); cursor: pointer; }
.o-tag:hover { border-color: var(--linie); }
.o-tag:active { background: var(--papier-druck); }
.o-tag--fremd { color: var(--schiefer); font-weight: 400; } /* --nacht-30 wäre 1,9 : 1; auch Nebentage bleiben lesbar */
.o-tag--heute { border-color: var(--gruen-tief); font-weight: 600; }
.o-tag[aria-pressed="true"] { background: var(--nacht); color: var(--weiss); }
.o-tag-punkte { display: flex; gap: 3px; height: 6px; }
.o-tag-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--gruen); }
.o-tag-punkte i.warn { background: var(--warn); }
.o-tag-punkte i.still { background: var(--nacht-20); }
/* Feste Zellenhöhe (30.09.2026): keine Zeile springt, wenn ein Tag Punkte trägt; »heute« nur über o-tag--heute. Ersetzt 44/56 px. */
.o-kalender-tage .o-tag { height: 52px; min-height: 52px; }
/* Pfeile mindestens 12 px vom Kartenrand (Messung rand). */
.o-kalender.o-karte-inhalt { padding: var(--a4); }
/* Legende unter Kalender und Karten: Punkt und Wort bleiben zusammen. */
.o-legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2); }
.o-legende > span { display: inline-flex; align-items: center; gap: var(--a1); white-space: nowrap; }
.o-legende .o-tag-punkte { display: inline-flex; height: auto; }
/* Aufklapper eigener Einträge mit dem Innenabstand einer Kartenzeile. */
.o-eigene > summary { padding: var(--a4) var(--a5); }

/* ─── Bewegung: nur transform und opacity, kurz, abschaltbar ─────────────── */
.o-erscheint { animation: o-erscheint .2s var(--kurve); }
@keyframes o-erscheint { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .o-seite *, .o-seite *::before, .o-seite *::after { animation: none !important; transition: none !important; }
}

/* Baustein »Vorbehalt« (Jonathan 02.10.2026 über Uschi: »sehr gut gelöst, das sollte überall ähnlich auf allen Seiten gelöst werden«).
   EINE Quelle für Website und App: Die Website lädt die Datei über data-stil="vorbehalt" am Baustein (bausteine/vorbehalt.mjs);
   npm run gestaltung hängt sie an _gemeinsam/gestaltung/oberflaeche.css an (Formular, Konto, PDFs der App).
   Dünne grüne Linie links, ruhiger Text. Der Text kommt, wie er aus den Daten kommt; der Baustein formt nur.
   Markup: <div class="o-vorbehalt" role="note"><p>Satz</p>…</div>. Prüfung 82: Ein Vorbehaltssatz außerhalb ist rot. */
.o-vorbehalt { margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--gruen-tief); font-size: .875rem; line-height: 1.45; color: var(--nacht); text-align: left; }
.o-vorbehalt p { margin: 0; }
.o-vorbehalt p + p { margin-top: 6px; }
/* Direkt unter einem Absatz (Karten, Einleitung) etwas Luft, sonst klebt die Linie am Text. */
p + .o-vorbehalt { margin-top: 10px; }
/* Auf dunklem Grund: Linie und Text hell genug (Kontrast wie .etikett--dunkel). */
.sektion--dunkel .o-vorbehalt { border-left-color: var(--gruen-hell); color: var(--auf-dunkel-2); }
/* Druck: dieselbe Linie, schwarz-weiß tauglich (keine Farbe nötig, um sie zu sehen), nie über zwei Seiten zerrissen. */
@media print {
  .o-vorbehalt { border-left: 2px solid #000; color: #000; break-inside: avoid; }
}