/* Markenfarben aus den Design-Tokens von ab-tax.de uebernommen (Webflow-Variablen
   `--_primitives---colors--*`, abgerufen 2026-07-30), damit Portal und Passwort-Tresor
   dasselbe Bild ergeben. Dieselben Werte stehen im Theme-Block von
   infra/psono/config.webclient.json — wer hier eine Farbe aendert, muss sie dort
   mitaendern, sonst driften die beiden Oberflaechen auseinander. */
:root {
  --marke-dunkel: #020f18;
  --marke-blau: #224366;
  --marke-blaugrau: #7396b4;
  --marke-text: #2c3942;
  --marke-flaeche: #f6f8f9;
  --marke-linie: #edf1f4;

  --kopf-hoehe: 52px;
  --leiste-breite: 267px;
  --leiste-breite-schmal: 56px;
}

/* Bewusst KEIN `color-scheme: light dark`: die Markenfarben sind fuer helle Flaechen
   definiert, und der Tresor kennt keinen Dunkelmodus. Ein Portal, das je nach
   Systemeinstellung anders aussieht als der Tresor daneben, widerspricht dem Zweck. */
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  margin: 0;
  line-height: 1.5;
  color: var(--marke-text);
  background: #fff;
}

/* ---------- Kopfleiste ---------- */
#kopfleiste {
  height: var(--kopf-hoehe);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  background: var(--marke-dunkel);
  color: #fff;
  padding: 0 1.25rem;
}
.kopf-titel { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
#logo { height: 20px; width: auto; display: block; flex: none; }
.kopf-trenner {
  width: 1px; height: 20px; background: var(--marke-blaugrau); opacity: 0.6; flex: none;
}
h1 {
  margin: 0; font-size: 0.95rem; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#benutzer-info { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
#logout-form { margin: 0; }
#logout-form button {
  background: transparent; color: #fff; border: 1px solid var(--marke-blaugrau);
}
#logout-form button:hover { background: #ffffff1a; border-color: #fff; }

/* ---------- Grundriss ---------- */
#rahmen {
  display: grid;
  grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
  min-height: calc(100vh - var(--kopf-hoehe));
}
#rahmen.eingeklappt { grid-template-columns: var(--leiste-breite-schmal) minmax(0, 1fr); }

#seitenleiste {
  background: var(--marke-dunkel);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.75rem 0;
  overflow: hidden;
}
#navigation { display: flex; flex-direction: column; }

.nav-eintrag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.6rem 1rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #cfd8e0;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.nav-eintrag:hover { background: #ffffff12; color: #fff; }
.nav-eintrag.aktiv {
  background: #ffffff1a;
  color: #fff;
  border-left-color: var(--marke-blaugrau);
  font-weight: 600;
}
.nav-sinnbild {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav-text { display: flex; flex-direction: column; min-width: 0; }
.nav-titel { white-space: nowrap; }
.nav-zusatz { font-size: 0.7rem; font-weight: 400; color: var(--marke-blaugrau); white-space: nowrap; }

#einklappen {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0; padding: 0.5rem 1rem;
  border: 0; border-radius: 0; background: transparent;
  color: var(--marke-blaugrau); font: inherit; font-size: 0.8rem; cursor: pointer;
}
#einklappen:hover { background: #ffffff12; color: #fff; }
/* Der Pfeil ist reine Dekoration und dreht sich mit dem Zustand; die Beschriftung
   daneben tragt die Bedeutung (und aria-expanded am Knopf den Zustand). */
.einklappen-pfeil {
  width: 20px; flex: none; text-align: center;
}
.einklappen-pfeil::before { content: '‹‹'; }
#rahmen.eingeklappt .einklappen-pfeil::before { content: '››'; }

/* Eingeklappt: nur Sinnbilder. Die Beschriftung bleibt als title/aria-label
   erhalten (siehe app.js), damit der Zustand nicht ratbar wird. */
#rahmen.eingeklappt .nav-text,
#rahmen.eingeklappt .nav-pfeil,
#rahmen.eingeklappt .einklappen-text { display: none; }
#rahmen.eingeklappt .nav-eintrag,
#rahmen.eingeklappt #einklappen { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
#rahmen.eingeklappt .nav-eintrag { border-left-width: 0; }
#rahmen.eingeklappt .nav-eintrag.aktiv { box-shadow: inset 3px 0 0 var(--marke-blaugrau); }

/* Auf schmalen Anzeigen ist die volle Leiste zu teuer: dort immer schmal, der
   Einklappknopf bleibt trotzdem bedienbar (er schaltet dann nur die Breite, die
   das Raster ohnehin vorgibt). */
@media (max-width: 700px) {
  #rahmen { grid-template-columns: var(--leiste-breite-schmal) minmax(0, 1fr); }
  #rahmen .nav-text, #rahmen .einklappen-text { display: none; }
  #rahmen .nav-eintrag, #rahmen #einklappen { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
}

/* Breiter als die frueheren 54rem: die Leseansicht traegt rechts eine Themenspalte
   und der Editor zwei Spalten nebeneinander. `margin: 0 auto` zentriert die
   Begrenzung im verbleibenden Grid-Platz neben der Navigation — ohne das haengt
   auf breiten Monitoren der gesamte Leerraum einseitig rechts (FB, 2026-07-31). */
main { width: 100%; padding: 1.75rem 2rem; max-width: 72rem; margin: 0 auto; box-sizing: border-box; }
#modul-titel { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 600; color: var(--marke-dunkel); }

/* Zahl am Navigationspunkt: „neu seit deinem letzten Besuch" (Entwurf §7). */
.nav-zahl {
  margin-left: auto; flex: none;
  min-width: 1.25rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--marke-blaugrau); color: var(--marke-dunkel);
  font-size: 0.7rem; font-weight: 700; text-align: center; line-height: 1.35;
}
#rahmen.eingeklappt .nav-zahl { display: none; }

.demo-hinweis {
  font-size: 0.8rem; color: var(--marke-text); opacity: 0.8;
  border-left: 3px solid var(--marke-blaugrau);
  padding-left: 0.75rem; margin: 0 0 1.75rem;
}

/* Trennlinie ueber dem ersten angekuendigten Modul: „bald verfuegbar" ist ein
 * anderer Zustand als die echten, klickbaren Module darueber. */
.nav-eintrag.nav-trenner { margin-top: 0.5rem; border-top: 0.5px solid #ffffff26; }

/* Angekuendigte, noch nicht gebaute Module: sichtbar, aber klar als nicht
 * anklickbar erkennbar — kein Hover-Feedback, gedaempfte Farbe. Gilt auch fuer
 * die Kopfzeile einer aufklappbaren Gruppe (das Modul selbst ist Dummy; nur
 * das Auf-/Zuklappen ist echt) und ihre Unterpunkte. */
.nav-platzhalter { opacity: 0.5; cursor: default; }
.nav-platzhalter:hover { background: none; color: inherit; }
.nav-gruppe-kopf { cursor: pointer; }
.nav-gruppe-kopf:hover { background: #ffffff12; }
.nav-pfeil { margin-left: auto; font-size: 0.7rem; flex: none; }
/* `display:flex` hier UND das `hidden`-Attribut in app.js wollen beide ueber
 * `display` entscheiden — Autorenregeln schlagen dabei immer die eingebaute
 * `[hidden]{display:none}`-Regel des Browsers, das Attribut haette also nie
 * gewirkt. Deshalb steuert eine eigene Klasse `.offen` die Sichtbarkeit, statt
 * des `hidden`-Attributs (Fund FB, 2026-07-31: Auf-/Zuklappen wirkungslos). */
.nav-untergruppe { display: none; flex-direction: column; padding-left: 3rem; font-size: 0.8rem; }
.nav-untergruppe.offen { display: flex; }
/* 3rem = Textbeginn der Elternzeile (1rem Innenabstand + 20px Sinnbild + 0.75rem
 * Abstand) — sonst wirken die Unterpunkte trotz Einzug nicht als „darunter".
 * Kleinere Schrift/weniger Innenabstand als bei den Hauptpunkten: Unterpunkte
 * sind sichtbar nachrangig (FB, 2026-07-31: Einzug wirkte zu grossflaechig). */
.nav-untereintrag {
  display: flex; align-items: center; padding: 0.3rem 1rem 0.3rem 0; color: #cfd8e0;
}
.nav-untereintrag .nav-zusatz { font-size: 0.68rem; }
.nav-untergruppe-leer {
  margin: 0.2rem 0 0.4rem 3rem; padding-right: 1rem; font-size: 0.72rem;
  font-style: italic; color: var(--marke-blaugrau);
}
#rahmen.eingeklappt .nav-untergruppe.offen { display: none; }

/* ---------- Leseansicht: Kartenstrom + Themenspalte (Entwurf §4) ---------- */
.news-werkzeuge {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
}
.news-suche { max-width: 22rem; }

.news-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: 1.75rem;
  align-items: start;
}
/* Unter 820px ist die Spalte daneben nicht mehr lesbar breit — dann wandert sie
   unter den Strom, statt beide zu quetschen. */
@media (max-width: 820px) {
  .news-raster { grid-template-columns: minmax(0, 1fr); }
  .themenspalte { order: -1; }
}

.themenspalte {
  border-left: 1px solid var(--marke-linie); padding-left: 1rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.spalten-titel {
  margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--marke-blaugrau);
}
.thema-eintrag {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  margin: 0; padding: 0.35rem 0.5rem; border: 0; border-radius: 6px;
  background: transparent; color: var(--marke-text);
  font: inherit; font-size: 0.87rem; text-align: left; cursor: pointer;
}
.thema-eintrag:hover { background: var(--marke-linie); }
.thema-eintrag.aktiv { background: var(--marke-flaeche); font-weight: 600; color: var(--marke-dunkel); }
.thema-name { flex: 1; min-width: 0; }
.thema-zahl {
  flex: none; min-width: 1.25rem; padding: 0 0.35rem; border-radius: 999px;
  background: var(--marke-blau); color: #fff;
  font-size: 0.7rem; font-weight: 700; text-align: center;
}
.thema-archiv { margin-top: 0.5rem; border-top: 1px solid var(--marke-linie); border-radius: 0; }

.post {
  border: 1px solid var(--marke-linie);
  border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 0.9rem;
}
/* Angeheftet traegt links einen vollen Balken — zusammen mit der beschrifteten
   Pille also zwei Merkmale, nicht nur Farbe (Barrierefreiheit, Gate B). */
.post.pinned { border-color: var(--marke-blau); border-left-width: 3px; }
.post-kopf { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.verfasser-kreis {
  flex: none; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--marke-blau); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
}
.post-absender { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.post-verfasser { font-size: 0.88rem; font-weight: 600; color: var(--marke-dunkel); }
.post-zustand { display: flex; gap: 0.35rem; flex: none; margin-left: auto; }
.post h3 { margin: 0 0 0.3rem; font-size: 1.08rem; }
.post-titel { color: var(--marke-dunkel); text-decoration: none; }
.post-titel:hover { text-decoration: underline; }
.post-anfang {
  margin: 0 0 0.5rem; font-size: 0.9rem;
  /* Zwei Zeilen, dann Auslassung — der Server kuerzt den Text schon grob, das hier
     haelt Karten unterschiedlicher Textlaenge auf gleicher Hoehe. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.weiterlesen { font-size: 0.85rem; color: var(--marke-blau); }

/* ---------- Beitrag (Entwurf §5) ---------- */
.zurueck-knopf {
  display: inline-block; margin-bottom: 1rem;
  font-size: 0.85rem; color: var(--marke-blau); text-decoration: none;
}
.zurueck-knopf:hover { text-decoration: underline; }
.beitrag-detail { max-width: 44rem; }
.beitrag-detail h3 { margin: 0 0 0.25rem; font-size: 1.4rem; color: var(--marke-dunkel); }
.beitrag-detail > .meta { margin: 0 0 1.25rem; }
.beitrag-detail > .post-zustand { margin: 0 0 0.5rem; }
.beitrag-text > :first-child { margin-top: 0; }

/* ---------- Redaktion: Editor (Entwurf §6) ---------- */
.editor { margin-bottom: 2rem; }
.editor-kopfzeile { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
.editor-titel { flex: 1; }
.editor-thema { flex: none; width: 12rem; }
.editor-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 820px) {
  .editor-spalten { grid-template-columns: 1fr; }
}
.editor-marke {
  display: block; margin-bottom: 0.25rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--marke-blaugrau);
}
.editor-werkzeugleiste { display: flex; gap: 0.25rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.werkzeug-knopf {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; margin-right: 0;
}
.sinnbild-knopf-bild { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.editor-text { min-height: 14rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.vorschau-flaeche {
  min-height: 14rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--marke-linie); border-radius: 6px;
  background: var(--marke-flaeche); font-size: 0.9rem; overflow-wrap: anywhere;
}
.vorschau-flaeche > :first-child { margin-top: 0; }
.editor-knoepfe { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; }
.editor-meldung { margin: 0.5rem 0 0; font-size: 0.85rem; }

/* ---------- Redaktion: Arbeitsliste ---------- */
.redaktion-gruppe {
  margin: 1.5rem 0 0.5rem; font-size: 0.95rem; color: var(--marke-dunkel);
}
/* Notbremse (Plan W1, 2026-08-03): zwischen ~821 und ~1131px Fensterbreite reicht der
   verfuegbare Platz (Fenster minus Seitenleiste minus Innenabstand) nicht fuer die
   Tabelle, aber der einzige Umbruch liegt bei 820px *Fensterbreite* statt bei der
   tatsaechlich verfuegbaren Breite. Bis das mit Container-Queries sauber geloest ist
   (Block 2, U8), soll die Liste SCROLLEN statt die Seite zu zerreissen. */
.redaktion-listen { overflow-x: auto; }
.redaktion-zeile {
  display: grid;
  /* Die Aktionsspalte hat eine FESTE Breite. Mit `auto` waere sie je Zeile so breit
     wie ihre Knoepfe — und weil jede Zeile ein eigenes Raster ist, staenden dann
     Spaltenkoepfe und Werte nicht uebereinander. */
  grid-template-columns: minmax(0, 1fr) 7.5rem 8.5rem 9rem 22rem;
  /* Mindestbreite, damit die Spalten nicht bis zur Unlesbarkeit schrumpfen, bevor die
     Liste zu scrollen beginnt — siehe Kommentar an .redaktion-listen. */
  min-width: 50rem;
  align-items: center; gap: 0.75rem;
  padding: 0.5rem 0; border-bottom: 0.5px solid var(--marke-linie);
}
/* Auf schmalen Anzeigen taugt die Tabelle nicht — dann untereinander. */
@media (max-width: 820px) {
  .redaktion-zeile { grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 0.25rem; }
  .redaktion-kopfzeile { display: none; }
}
.redaktion-kopfzeile {
  border-bottom: 1px solid var(--marke-linie);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--marke-blaugrau);
}
.redaktion-titel { font-size: 0.92rem; min-width: 0; }
.redaktion-aktionen { display: flex; flex-wrap: wrap; gap: 0.15rem; justify-content: flex-end; }
@media (max-width: 820px) {
  .redaktion-aktionen { justify-content: flex-start; }
}
.meta { font-size: 0.78rem; color: var(--marke-blaugrau); }

/* ---------- Mitarbeiterkonten ---------- */
.konto {
  border: 1px solid var(--marke-linie); border-radius: 8px;
  padding: 0.75rem 1rem; margin-bottom: 0.6rem;
}
.konto-kopf { display: flex; align-items: baseline; gap: 0.6rem; }
.konto-name { font-size: 0.95rem; font-weight: 600; color: var(--marke-dunkel); }
.konto .rechte-wahl { margin: 0.5rem 0 0.6rem; }
.badge {
  font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  margin-left: 0.4rem; vertical-align: 0.1rem;
}
.badge.new { background: var(--marke-blau); color: #fff; }
.badge.draft { background: var(--marke-blaugrau); color: #fff; }
.badge.withdrawn { background: #a33; color: #fff; }
.badge.pin { background: var(--marke-dunkel); color: #fff; }
.badge.archived { background: var(--marke-linie); color: var(--marke-text); }

a { color: var(--marke-blau); }

/* Textknopf statt gefuelltem Knopf: fuer alles, was eine Nebenhandlung ist
   (Bearbeiten, Anheften, Zurueckziehen). Die Klasse ist gleichzeitig die Ausnahme
   von der allgemeinen Knopfregel weiter unten. */
.leise {
  margin: 0; padding: 0.2rem 0.45rem;
  border: 0; border-radius: 5px; background: transparent;
  color: var(--marke-blau); font: inherit; font-size: 0.82rem; cursor: pointer;
}
.leise:hover { background: var(--marke-linie); color: var(--marke-dunkel); }
/* Verwerfen ist nicht umkehrbar — es sieht anders aus als seine Nachbarn. */
.leise.gefahr { color: #a33; }
.leise.gefahr:hover { background: #a3333314; color: #a33; }

/* Der gefuellte Knopf ist der Grundfall — in `:where()` und damit mit GEWICHT NULL.
 *
 * Warum unbedingt so: die frueheren Fassungen grenzten Ausnahmen einzeln aus
 * (`button:not(.nav-eintrag):not(.nav-fuss):not(.leise)`). Das hat am 2026-07-30
 * dreimal denselben Fehler erzeugt — jeder neue Knopf, der anders aussehen soll,
 * wird stillschweigend blau gefuellt, bis jemand die Liste erweitert (Kachel, dann
 * „Weiterlesen", dann die Themenspalte). Und `:not(#einklappen)` hob die ganze Regel
 * zusaetzlich auf ID-Gewicht und ueberstimmte damit auch Klassenregeln.
 *
 * `:where()` setzt die Gewichtung auf 0. Damit gewinnt JEDE Klassenregel — ohne
 * Ausnahmeliste, die man pflegen muss. Wer einen abweichenden Knopf baut, muss nur
 * Hintergrund, Rahmen und Textfarbe selbst setzen, wie `.leise` es tut. */
:where(button) {
  cursor: pointer; font: inherit;
  padding: 0.35rem 0.8rem; border-radius: 6px; margin-right: 0.4rem;
  border: 1px solid var(--marke-blau); background: var(--marke-blau); color: #fff;
}
:where(button:hover) {
  background: var(--marke-dunkel); border-color: var(--marke-dunkel);
}
.schreiben-knopf { margin-left: auto; flex: none; }

input, textarea, select {
  font: inherit; padding: 0.4rem; width: 100%; box-sizing: border-box;
  border: 1px solid var(--marke-linie); border-radius: 6px; color: var(--marke-text);
  background: #fff;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--marke-blau); outline-offset: 1px; }
textarea { min-height: 6rem; }
fieldset { border: 1px solid var(--marke-linie); border-radius: 8px; margin-bottom: 2rem; }
.rechte-wahl { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.rechte-wahl label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.rechte-wahl input { width: auto; }
/* Rollenbündel als Eingabehilfe über den Rechte-Kästen — setzt nur die Kästen, die
   Auflösung macht der Server noch einmal. */
.buendel-wahl { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
/* Sperrzustand muss ohne Farbe erkennbar sein, deshalb Text und nicht nur ein Punkt. */
.konto-gesperrt {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a33;
  border: 1px solid #a33;
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}
#detail { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--marke-linie); }
#einmalpasswort { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
.fehler { color: #a33; font-weight: 600; }

/* Beendete Sitzung. Bewusst am unteren Rand über die volle Breite und nicht als kleine
   Zeile im Inhalt: der bisherige Zustand — Portal offen, darunter ein unscheinbares
   „Kein Zugriff (HTTP 401)" — hat am 2026-08-02 dazu geführt, dass die beendete Sitzung
   erst beim manuellen Neuladen aufgefallen ist. Kein automatischer Sprung zum Login,
   damit ein angefangener Beitrag nicht verlorengeht. */
#sitzung-beendet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.25rem;
  background: #a33;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 -2px 12px rgb(0 0 0 / 0.25);
}
#sitzung-beendet button {
  background: #fff;
  color: #a33;
  border: none;
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  width: auto;
}