/* =============================================================================
   Wissensblock: Oberfläche
   -----------------------------------------------------------------------------
   Aufbau: schlanker Kopf, fester Baum links, Lesespalte rechts. Ab 1000px
   nebeneinander, darunter wird der Baum zur Schublade.

   Farben stehen ausschließlich als Merkmale hier oben. Eine helle und eine dunkle
   Fassung, umgeschaltet über data-thema am Wurzelelement, voreingestellt nach der
   Einstellung des Betriebssystems. Wer eine Farbe direkt in eine Regel schreibt,
   nimmt der dunklen Fassung genau dort die Möglichkeit, etwas anderes zu tun.
   ============================================================================= */

:root {
  color-scheme: light;

  --grund: #f6f7f9;
  --flaeche: #ffffff;
  --flaeche-hoch: #ffffff;
  --leiste: #fbfcfd;
  --rand: #e4e7ec;
  --rand-stark: #cdd3dc;
  --text: #16202c;
  --text-leise: #5a6877;
  --text-still: #8792a2;

  --akzent: #2563eb;
  --akzent-dunkel: #1d4ed8;
  --akzent-blass: #eef4ff;
  --akzent-rand: #c7d9fd;

  --gut: #15803d;
  --gut-blass: #ecfdf3;
  --gut-rand: #a7e8c0;
  --warn: #b45309;
  --warn-blass: #fffaeb;
  --warn-rand: #fde09a;
  --schlecht: #b42318;
  --schlecht-blass: #fef3f2;
  --schlecht-rand: #fbc7c2;
  --lila: #7e22ce;
  --lila-blass: #f6ecff;

  --code-grund: #0f172a;
  --code-text: #e2e8f0;
  --mark: #fde68a;

  --radius-klein: 7px;
  --radius: 10px;
  --radius-gross: 14px;

  --schatten-klein: 0 1px 2px rgba(16, 24, 40, .05);
  --schatten: 0 1px 3px rgba(16, 24, 40, .07), 0 10px 26px -10px rgba(16, 24, 40, .14);
  --schatten-hoch: 0 2px 6px rgba(16, 24, 40, .09), 0 20px 40px -14px rgba(16, 24, 40, .22);

  --kopf-hoehe: 56px;
  --leiste-breite: 292px;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --schrift-fest: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}

:root[data-thema="dunkel"] {
  color-scheme: dark;

  --grund: #0e1420;
  --flaeche: #161d2b;
  --flaeche-hoch: #1c2536;
  --leiste: #121a27;
  --rand: #283346;
  --rand-stark: #3a475e;
  --text: #e6ebf3;
  --text-leise: #9aa7ba;
  --text-still: #6f7d93;

  --akzent: #5b8dff;
  --akzent-dunkel: #7ba3ff;
  --akzent-blass: #1a2740;
  --akzent-rand: #2f4570;

  --gut: #57c98a;
  --gut-blass: #14291e;
  --gut-rand: #2a5c41;
  --warn: #e0a758;
  --warn-blass: #2b2114;
  --warn-rand: #5c4526;
  --schlecht: #f08b82;
  --schlecht-blass: #2d1917;
  --schlecht-rand: #5e2f2b;
  --lila: #c084fc;
  --lila-blass: #2a1c3d;

  --code-grund: #0a0f1a;
  --code-text: #d7e0ee;
  --mark: #6b5a1f;

  --schatten-klein: 0 1px 2px rgba(0, 0, 0, .4);
  --schatten: 0 1px 3px rgba(0, 0, 0, .45), 0 10px 26px -10px rgba(0, 0, 0, .6);
  --schatten-hoch: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 40px -14px rgba(0, 0, 0, .7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --grund: #0e1420; --flaeche: #161d2b; --flaeche-hoch: #1c2536; --leiste: #121a27;
    --rand: #283346; --rand-stark: #3a475e;
    --text: #e6ebf3; --text-leise: #9aa7ba; --text-still: #6f7d93;
    --akzent: #5b8dff; --akzent-dunkel: #7ba3ff; --akzent-blass: #1a2740; --akzent-rand: #2f4570;
    --gut: #57c98a; --gut-blass: #14291e; --gut-rand: #2a5c41;
    --warn: #e0a758; --warn-blass: #2b2114; --warn-rand: #5c4526;
    --schlecht: #f08b82; --schlecht-blass: #2d1917; --schlecht-rand: #5e2f2b;
    --lila: #c084fc; --lila-blass: #2a1c3d;
    --code-grund: #0a0f1a; --code-text: #d7e0ee; --mark: #6b5a1f;
    --schatten-klein: 0 1px 2px rgba(0, 0, 0, .4);
    --schatten: 0 1px 3px rgba(0, 0, 0, .45), 0 10px 26px -10px rgba(0, 0, 0, .6);
    --schatten-hoch: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 40px -14px rgba(0, 0, 0, .7);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.6 var(--schrift);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--akzent); text-underline-offset: .15em; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--akzent-blass); color: var(--akzent-dunkel); }

/* ——————————————————————————— Kopf ——————————————————————————— */

.kopf {
  position: sticky; top: 0; z-index: 40; height: var(--kopf-hoehe);
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rand);
}
.kopf-innen { height: 100%; display: flex; align-items: center; gap: .7rem; padding: 0 1rem; }

.baum-schalter {
  display: none; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text-leise); cursor: pointer; padding: 0;
}
.baum-schalter svg { width: 18px; height: 18px; }
.baum-schalter:hover { background: var(--grund); color: var(--text); }

.marke { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--text); flex: 0 0 auto; }
.marke-zeichen {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(140deg, var(--akzent), var(--akzent-dunkel));
  color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .02em;
}
/* Der Würfel steht im Kästchen, nicht daneben: 18 von 28 Pixeln, damit rundherum
   Luft bleibt und die Form auch klein noch als Würfel lesbar ist. */
.marke-wuerfel { width: 18px; height: 18px; display: block; }
.marke-text { font-weight: 650; font-size: .98rem; letter-spacing: -.012em; }

.suchfeld { position: relative; flex: 1 1 auto; max-width: 520px; margin: 0 auto; }
.such-lupe {
  position: absolute; left: .68rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-still); pointer-events: none;
}
.suchfeld input[type="search"] {
  width: 100%; padding: .5rem .8rem .5rem 2.15rem;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  font: inherit; font-size: .92rem; background: var(--grund); color: var(--text);
  transition: border-color .13s ease, background .13s ease, box-shadow .13s ease;
}
.suchfeld input[type="search"]::placeholder { color: var(--text-still); }
.suchfeld input[type="search"]:focus {
  outline: none; background: var(--flaeche); border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-blass);
}

.vorschlaege {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 50;
  background: var(--flaeche-hoch); border: 1px solid var(--rand); border-radius: var(--radius);
  box-shadow: var(--schatten-hoch); overflow: hidden auto; max-height: 60vh; padding: .25rem;
}
.vorschlaege button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: .45rem .6rem; font: inherit; font-size: .9rem; cursor: pointer;
  color: var(--text); border-radius: 6px;
}
.vorschlaege button:hover, .vorschlaege button.aktiv { background: var(--akzent-blass); }
.vorschlaege .pfad { display: block; font-size: .76rem; color: var(--text-still); }
.vorschlaege .art {
  font-size: .66rem; color: var(--text-still); float: right;
  text-transform: uppercase; letter-spacing: .05em; padding-top: .18em;
}

.nav { display: flex; gap: .12rem; flex: 0 0 auto; }
.nav a {
  text-decoration: none; color: var(--text-leise); padding: .4rem .66rem;
  border-radius: var(--radius-klein); font-size: .88rem; font-weight: 500; white-space: nowrap;
  transition: background .13s ease, color .13s ease;
}
.nav a:hover { background: var(--grund); color: var(--text); }
.nav a.aktiv { background: var(--akzent-blass); color: var(--akzent-dunkel); font-weight: 600; }
.nav a b {
  display: inline-block; margin-left: .32rem; background: var(--warn); color: #fff;
  border-radius: 999px; padding: 0 .4em; font-size: .72em; font-weight: 700; vertical-align: .05em;
}

.konto { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.konto-name {
  font-size: .84rem; color: var(--text-leise); max-width: 11rem; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.konto-name:hover { color: var(--akzent); }
.konto-warnung {
  display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .25rem;
  border-radius: 50%; background: var(--warn); color: #fff; font-size: .68rem; font-weight: 800;
  vertical-align: .05em;
}

.thema-schalter {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text-leise); cursor: pointer;
}
.thema-schalter:hover { background: var(--grund); color: var(--text); }
.thema-schalter svg { width: 16px; height: 16px; }
.thema-hell, .thema-dunkel { display: none; }
:root[data-thema="dunkel"] .thema-hell { display: block; }
:root:not([data-thema="dunkel"]) .thema-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]):not([data-thema="dunkel"]) .thema-dunkel { display: none; }
  :root:not([data-thema="hell"]):not([data-thema="dunkel"]) .thema-hell { display: block; }
}

/* ——————————————————————————— Rahmen und Seitenleiste ——————————————————————————— */

.rahmen { display: flex; width: 100%; align-items: flex-start; }

.seitenleiste {
  width: var(--leiste-breite); flex: 0 0 var(--leiste-breite);
  position: sticky; top: var(--kopf-hoehe); height: calc(100vh - var(--kopf-hoehe));
  display: flex; flex-direction: column;
  background: var(--leiste); border-right: 1px solid var(--rand);
}
.seitenleiste-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .75rem .85rem .5rem;
}
.seitenleiste-titel {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-still);
}
.seitenleiste-werkzeuge { display: flex; gap: .2rem; }
.baum-rahmen { flex: 1 1 auto; overflow-y: auto; padding: 0 .5rem 1rem; scrollbar-width: thin; }
.leer-hinweis { padding: .5rem .35rem; line-height: 1.5; }

.seitenleiste-fuss { border-top: 1px solid var(--rand); padding: .65rem .85rem; }
.ablage-klein {
  display: flex; gap: .55rem; align-items: center; text-decoration: none;
  border: 1px dashed var(--rand-stark); border-radius: var(--radius);
  padding: .55rem .65rem; color: var(--text-leise); font-size: .8rem; line-height: 1.35;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ablage-klein:hover { border-color: var(--akzent); background: var(--akzent-blass); color: var(--akzent-dunkel); }
.ablage-klein svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--akzent); }
.ablage-klein strong { color: var(--text); font-weight: 650; }
.zahlen { margin: .55rem 0 0; font-size: .78rem; text-align: center; }

.schatten-schleier { display: none; }
main { flex: 1 1 auto; min-width: 0; padding: 1.5rem 1.9rem 5rem; }

/* ——————————————————————————— Baum ——————————————————————————— */

.baum { list-style: none; margin: 0; padding: 0; }
.baum .baum { margin-left: .78rem; padding-left: .3rem; border-left: 1px solid var(--rand); }
.baum li.zu > .baum { display: none; }

.baum-zeile {
  display: flex; align-items: center; gap: .1rem; border-radius: var(--radius-klein);
  padding-right: .3rem; position: relative;
}
.baum-zeile:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.baum-zeile.aktiv { background: var(--akzent-blass); }
.baum-zeile.aktiv::before {
  content: ""; position: absolute; left: -.3rem; top: .25rem; bottom: .25rem;
  width: 2px; border-radius: 2px; background: var(--akzent);
}
.baum-zeile.aktiv .baum-titel { color: var(--akzent-dunkel); font-weight: 650; }

.baum-knopf {
  border: 0; background: none; cursor: pointer; color: var(--text-still);
  width: 20px; height: 26px; padding: 0; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 4px;
}
.baum-knopf svg { width: 13px; height: 13px; transition: transform .15s ease; }
.baum-knopf[aria-expanded="true"] svg { transform: rotate(90deg); }
.baum-knopf:hover { color: var(--text); }
.baum-blatt { width: 20px; flex: 0 0 auto; }
.baum-titel {
  flex: 1 1 auto; min-width: 0; padding: .32rem .2rem; font-size: .875rem; line-height: 1.35;
  color: var(--text); text-decoration: none; overflow-wrap: anywhere;
}
.baum-mass {
  font-size: .68rem; color: var(--text-still); background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 999px; padding: 0 .4em; flex: 0 0 auto;
}
.baum-mehr, .baum-laedt { padding: .22rem 0 .22rem 1.4rem; font-size: .8rem; color: var(--text-still); }
.baum-mehr a { color: var(--text-still); text-decoration: none; }
.baum-mehr a:hover { color: var(--akzent); text-decoration: underline; }

/* ——————————————————————————— Flächen ——————————————————————————— */

.blatt, .karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-gross);
  box-shadow: var(--schatten-klein); margin: 0 0 1rem;
}
.blatt { padding: 1.7rem 2rem; }
.karte { padding: 1.1rem 1.3rem; }
.blatt h2, .karte h2 { font-size: 1.08rem; margin: 0 0 .7rem; letter-spacing: -.01em; }
.blatt h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 .4rem; letter-spacing: -.025em; }
.blatt h3 { font-size: 1rem; margin: 1.7rem 0 .6rem; letter-spacing: -.005em; }
.blatt-achtung { border-left: 3px solid var(--warn); }

.brotkrumen {
  display: flex; gap: .35rem; flex-wrap: wrap; align-items: center;
  font-size: .82rem; margin: 0 0 .7rem; color: var(--text-still);
}
.brotkrumen a { color: var(--text-leise); text-decoration: none; }
.brotkrumen a:hover { color: var(--akzent); text-decoration: underline; }

.blatt-kopf {
  display: flex; gap: 1.2rem; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; padding-bottom: 1rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--rand);
}
.blatt-kopf-text { flex: 1 1 18rem; min-width: 0; }
.blatt-kurztext { color: var(--text-leise); margin: .35rem 0 .5rem; font-size: 1rem; }
.blatt-knoepfe { display: flex; gap: .35rem; flex-wrap: wrap; flex: 0 0 auto; }
.blatt-fuss { margin-top: 2.2rem; padding-top: .8rem; border-top: 1px solid var(--rand); }
.blatt-fuss p { margin: 0; }

.leiste { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 .9rem; }
.leiste h1 { font-size: 1.55rem; margin: 0; letter-spacing: -.025em; }
.leiste h2 { margin: 0; font-size: 1.1rem; }
.leiste-eng { margin: 1.2rem 0 .4rem; }
.leiste-knoepfe { display: flex; gap: .35rem; flex-wrap: wrap; }
/* Zwei Handbreiten, die frueher als style-Attribut am Element standen. Raus
   daraus, damit im Dokument kein einziges Attribut mehr Gestaltung traegt. */
.leiste-knoepfe.abstand-y { margin: .8rem 0; }
.feld.abstand-o { margin-top: 1rem; }
/* Der Warnhinweis in der Seitenleiste: derselbe Kasten, andere Farbe. Er soll
   auffallen, ohne dass man ihn fuer einen Fehler der Anwendung haelt. */
/* ————————————————————— MCP ————————————————————— */

/* Das Geheimnis wird genau einmal gezeigt. Der Kasten soll das auch aussehen lassen:
   auffällig genug, dass niemand darüber hinwegliest und die Seite dann neu lädt. */
.token-frisch {
  margin: .8rem 0; padding: .8rem; border-radius: .4rem;
  border: 1px solid var(--gut-rand); background: var(--gut-blass);
}
.token-frisch pre {
  margin: .6rem 0 0; padding: .6rem; overflow-x: auto;
  background: var(--code-grund); color: var(--code-text);
  border-radius: .3rem; font-size: .74rem; line-height: 1.45;
}
/* Eine abgewiesene Zeile im Leseprotokoll ist die interessantere. Sie wird deshalb
   nicht ausgegraut, sondern angestrichen. */
.zeile-abgewiesen td { background: var(--warn-blass); }

/* ————————————————————— Marken auf der Startseite ————————————————————— */

/* Klein und ruhig: die Marke soll die Zeile einordnen, nicht mit dem Titel um
   Aufmerksamkeit ringen. Farbe trägt Bedeutung, deshalb steht sie immer auch als
   Wort da, für alle, die Farben schlecht unterscheiden. */
.start-marken {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem;
  margin-top: .1rem; font-size: .64rem; line-height: 1.3;
  /* Etwas Laufweite: unter .7rem laufen die Buchstaben sonst zusammen. Das ist
     billiger zu lesen als Kursiv, das in einer Grotesk nur eine Schraegstellung
     ist und bei dieser Groesse vor allem die Umlaute verschmiert. */
  letter-spacing: .012em;
}
/* Heisst „etikett" und nicht „marke": `.marke` ist seit jeher die Wortmarke im
   Kopf, und die stand weiter oben mit `display: flex`. Meine spaetere Regel hat sie
   ueberschrieben, aus dem Flex wurde ein Inline-Block, und Zeichen und Name des
   Wikis standen uebereinander statt nebeneinander. */
.etikett {
  display: inline-block; padding: .02rem .3rem; border-radius: .2rem;
  font-size: .63rem; font-weight: 600; letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
}
/*
 * Nur „Neu" traegt Farbe. Eine Aktualisierung ist der Normalfall, und was an neun
 * von zehn Zeilen bunt leuchtet, ordnet nichts mehr ein. So faellt der Blick auf
 * das, was wirklich dazugekommen ist.
 *
 * Bernstein waere hier falsch, obwohl es naheliegt: in diesem Stylesheet bedeutet
 * es bereits „noch nicht geprueft" (Freigabeband) und „hinsehen" (gescheiterte
 * Anmeldungen). Dazu ist Gelb auf hellem Grund der schlechteste Fall fuer Kontrast,
 * und Gruen gegen Bernstein trennt eine Rot-Gruen-Sehschwaeche schlecht, Gruen gegen
 * Grau dagegen jeder.
 *
 * Die Toene kommen aus den Themenvariablen und nicht als feste Werte: sonst steht
 * das Etikett im dunklen Thema als dunkler Fleck auf dunklem Grund. Genau das war
 * es, bis es hier auffiel.
 */
.etikett-neu {
  background: var(--gut-blass); color: var(--gut); border-color: var(--gut-rand);
}
.etikett-aktualisiert {
  background: var(--grund); color: var(--text-leise); border-color: var(--rand);
}

/* ————————————————————— „Das gibt es schon" ————————————————————— */

/* Der Kasten stellt eine Frage, deshalb hebt er sich ab, ohne nach Fehler
   auszusehen: eine frühere Fassung zu finden ist ein Glücksfall, keine Panne. */
.schon-da {
  margin: 0 0 .8rem; padding: .7rem .8rem;
  border: 1px solid var(--rand); border-left: 4px solid var(--akzent);
  border-radius: .4rem; background: var(--akzent-blass); line-height: 1.4;
}
.schon-da-kopf { margin: 0 0 .5rem; }
.schon-da-liste { list-style: none; margin: 0 0 .6rem; padding: 0; }
.schon-da-liste li { margin: 0 0 .25rem; }
.schon-da-liste label { display: flex; gap: .45rem; align-items: flex-start; cursor: pointer; }
.schon-da-liste input { margin-top: .2rem; flex: 0 0 auto; }
.schon-da-wahl { display: grid; gap: .3rem; }
.schon-da-fuss { margin: .55rem 0 0; }

/* ————————————————————— Freigabe ————————————————————— */

/* Das Band steht über dem Text und sagt zuerst, was gilt. Farbe trägt hier
   Bedeutung, deshalb steht die Aussage immer auch als Wort darin: eine Ampel
   allein hilft niemandem, der Farben schlecht unterscheidet. */
.freigabeband {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem; margin: 0 0 .9rem; padding: .6rem .8rem;
  border-radius: .4rem; border-left: 4px solid var(--rand, #d5d5d5);
  background: var(--grund); line-height: 1.35;
}
.freigabeband-text { flex: 1 1 16rem; }
.freigabeband-knoepfe { display: flex; gap: .4rem; flex-wrap: wrap; }
.freigabeband-knoepfe form { margin: 0; }
.freigabeband-freigegeben { border-left-color: var(--gut); }
.freigabeband-geaendert  { border-left-color: var(--warn); }
.freigabeband-entwurf    { border-left-color: var(--lila); }
.freigabeband-altbestand { border-left-color: var(--text-still); }

.freigabeliste { list-style: none; margin: .8rem 0 0; padding: 0; }
.freigabeliste li { border-top: 1px solid var(--rand); }
.freigabeliste li:first-child { border-top: 0; }
.freigabeliste a {
  display: block; padding: .55rem .5rem; text-decoration: none; color: inherit;
  border-radius: .3rem; line-height: 1.35;
}
.freigabeliste a:hover { background: var(--grund); }
/* „trennlinie", nicht „trenner": `.trenner` ist weiter unten schon vergeben, fuer
   eine Linie mit Text darin. Zwei Regeln fuer denselben Namen mischen sich, und das
   Ergebnis haengt daran, welche zufaellig weiter unten steht. */
.trennlinie { border: 0; border-top: 1px solid var(--rand); margin: 1rem 0 .7rem; }

/* ————————————————————— Fassungen einer Seite ————————————————————— */

.fassungen { list-style: none; margin: .8rem 0 0; padding: 0; counter-reset: none; }
.fassung {
  display: flex; align-items: flex-start; gap: .5rem;
  border-left: 3px solid var(--rand); padding: .1rem 0 .1rem .7rem; margin: 0 0 .15rem;
}
.fassung-kopf {
  display: flex; align-items: flex-start; gap: .6rem; flex: 1;
  text-decoration: none; color: inherit; padding: .4rem .5rem; border-radius: .3rem;
}
.fassung-kopf:hover { background: var(--grund); }
.fassung-nr {
  flex: 0 0 1.7rem; height: 1.7rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grund); font-size: .78rem; font-variant-numeric: tabular-nums;
}
.fassung-text { flex: 1; line-height: 1.35; }
.fassung-notiz { font-style: italic; }
.fassung-gewaehlt { border-left-color: var(--akzent); }
.fassung-gewaehlt .fassung-nr { background: var(--akzent); color: var(--flaeche); }
.marke-jetzt {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  background: var(--grund); border-radius: .25rem; padding: .05rem .35rem;
  margin-left: .35rem; vertical-align: .08em;
}
.fassung-form { margin: .4rem 0 0; }

/* Der Zeilenvergleich. Bewusst schlicht: zwei Farben, ein Zeichen davor, und der
   Text in gleicher Breite, damit Einrückungen als Einrückungen zu sehen sind. */
.zeilendiff {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .8rem; line-height: 1.45;
  border: 1px solid var(--rand); border-radius: .35rem;
  overflow-x: auto; margin-top: .6rem;
}
.dz { padding: .05rem .6rem .05rem 1.4rem; position: relative; white-space: pre-wrap;
      word-break: break-word; }
.dz-rein { background: var(--gut-blass); }
.dz-raus { background: var(--schlecht-blass); }
.dz-rein::before { content: "+"; position: absolute; left: .5rem; opacity: .65; }
.dz-raus::before { content: "−"; position: absolute; left: .5rem; opacity: .65; }
.dz-luecke {
  text-align: center; color: var(--text-leise); font-size: .72rem;
  padding: .2rem .6rem; background: var(--grund);
  border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
}
.zaehler-rein { color: var(--gut); font-weight: 600; }
.zaehler-raus { color: var(--schlecht); font-weight: 600; margin-right: .3rem; }

.ablage-klein.ablage-warnung { border-color: var(--warn-rand); color: var(--warn); }

.leise { color: var(--text-leise); font-size: .89rem; }
.rechts { text-align: right; white-space: nowrap; }
.mitte { text-align: center; margin-top: 1rem; }
.gross { font-size: 1.1rem; }
.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.2rem; align-items: center; }
.fussnotiz { margin-top: 1.2rem; }
.willkommen p { max-width: 62ch; }

/* ——————————————————————————— Knöpfe ——————————————————————————— */

.taste {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .44rem .78rem; border-radius: var(--radius-klein); border: 1px solid var(--rand-stark);
  background: var(--flaeche); color: var(--text); font: inherit; font-size: .86rem; font-weight: 500;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .13s ease, border-color .13s ease, color .13s ease, transform .08s ease;
}
.taste:hover { background: var(--grund); border-color: var(--text-still); }
.taste:active { transform: translateY(1px); }
.taste-stark { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.taste-stark:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.taste-still { border-color: transparent; color: var(--text-leise); background: none; }
.taste-still:hover { background: var(--grund); border-color: var(--rand); color: var(--text); }
.taste-klein { padding: .25rem .52rem; font-size: .78rem; }
.taste-breit { width: 100%; justify-content: center; margin-top: .3rem; }
.taste[disabled] { opacity: .5; cursor: default; transform: none; }
.taste-mass { background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 0 .4em; font-size: .78em; font-weight: 600; }
.taste:not(.taste-stark) .taste-mass { background: var(--grund); color: var(--text-leise); }

/* ——————————————————————————— Formulare ——————————————————————————— */

.feld { display: block; margin-bottom: .8rem; }
.feld > span { display: block; font-size: .8rem; color: var(--text-leise); margin-bottom: .28rem; font-weight: 500; }
.feld em, .feld > span em { display: block; margin-top: .25rem; font-style: normal; font-size: .8rem; }
.feld input, .feld select, .feld textarea, .einzeiler input {
  width: 100%; padding: .5rem .65rem; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  font: inherit; font-size: .93rem; background: var(--flaeche); color: var(--text);
  transition: border-color .13s ease, box-shadow .13s ease;
}
.feld textarea { resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .einzeiler input:focus {
  outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-blass);
}
.gitter { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.gitter-vier { grid-template-columns: 1fr; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .7rem; }
.schalter { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; cursor: pointer; }
.einzeiler { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; align-items: center; }
.einzeiler input { flex: 1 1 14rem; width: auto; }
.liste form, .gruppenwahl form { display: inline; margin: 0; }

/* ——————————————————————————— Meldungen ——————————————————————————— */

.hinweis, .fehler, .erfolg {
  padding: .65rem .9rem; border-radius: var(--radius-klein); font-size: .9rem;
  border: 1px solid; border-left-width: 3px; margin: 0 0 1rem;
}
.hinweis { background: var(--warn-blass); border-color: var(--warn-rand); border-left-color: var(--warn); }
.fehler { background: var(--schlecht-blass); border-color: var(--schlecht-rand); border-left-color: var(--schlecht); }
.erfolg { background: var(--gut-blass); border-color: var(--gut-rand); border-left-color: var(--gut); }
.hinweis p:first-child, .fehler p:first-child, .erfolg p:first-child { margin-top: 0; }
.hinweis p:last-child, .fehler p:last-child, .erfolg p:last-child { margin-bottom: 0; }
.hinweis code, .erfolg code, .fehler code {
  background: color-mix(in srgb, var(--text) 8%, transparent); padding: .05em .35em; border-radius: 4px;
  font-family: var(--schrift-fest); font-size: .88em;
}

.marken { display: flex; gap: .3rem; flex-wrap: wrap; margin: .35rem 0 0; }
.marke-klein {
  font-size: .76rem; padding: .12rem .5rem; border-radius: 6px; font-weight: 500;
  background: var(--grund); border: 1px solid var(--rand); color: var(--text-leise); text-decoration: none;
}
.marke-klein:hover { border-color: var(--akzent); color: var(--akzent-dunkel); background: var(--akzent-blass); }

.stand, .rolle {
  font-size: .73rem; padding: .14rem .5rem; border-radius: 5px; white-space: nowrap; font-weight: 700;
  letter-spacing: .015em;
}
.stand-posteingang { background: var(--warn-blass); color: var(--warn); }
.stand-aufgenommen { background: var(--gut-blass); color: var(--gut); }
.rolle-leser { background: var(--grund); color: var(--text-leise); }
.rolle-autor { background: var(--akzent-blass); color: var(--akzent-dunkel); }
.rolle-verwalter { background: var(--warn-blass); color: var(--warn); }
.rolle-admin { background: var(--lila-blass); color: var(--lila); }

/* ——————————————————————————— Inhaltsverzeichnis und Abschnitte ——————————————————————————— */

.inhaltsverzeichnis {
  background: var(--leiste); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .9rem 1.15rem; margin: 0 0 1.9rem;
}
.ivz-titel {
  font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-still); display: block; margin-bottom: .45rem;
}
.inhaltsverzeichnis ul, .inhaltsverzeichnis ol { list-style: none; margin: 0; padding: 0; }
.inhaltsverzeichnis li { padding: .13rem 0; font-size: .89rem; }
.inhaltsverzeichnis a { color: var(--text-leise); text-decoration: none; }
.inhaltsverzeichnis a:hover { color: var(--akzent); text-decoration: underline; }
.inhaltsverzeichnis li.tiefe-2, .inhaltsverzeichnis li.ebene-2 { padding-left: 1rem; }
.inhaltsverzeichnis li.tiefe-3, .inhaltsverzeichnis li.ebene-3 { padding-left: 2rem; }
.inhaltsverzeichnis li.tiefe-4, .inhaltsverzeichnis li.ebene-4,
.inhaltsverzeichnis li.ebene-5, .inhaltsverzeichnis li.ebene-6 { padding-left: 3rem; }

.abschnitt { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }
.abschnitt + .abschnitt { margin-top: 2.5rem; padding-top: 1.7rem; border-top: 1px solid var(--rand); }
.abschnitt-kopf { display: flex; align-items: baseline; gap: .8rem; justify-content: space-between; }
.abschnitt-kopf h2 { font-size: 1.42rem; margin: 0 0 .5rem; letter-spacing: -.018em; }
.abschnitt-kopf h3 { font-size: 1.18rem; margin: 0 0 .45rem; }
.abschnitt-kopf h4, .abschnitt-kopf h5, .abschnitt-kopf h6 { font-size: 1.02rem; margin: 0 0 .4rem; }
.abschnitt-werkzeuge { display: flex; gap: .6rem; flex: 0 0 auto; opacity: 0; transition: opacity .15s ease; }
.abschnitt:hover .abschnitt-werkzeuge, .abschnitt:focus-within .abschnitt-werkzeuge { opacity: 1; }
.abschnitt-werkzeuge a { font-size: .78rem; color: var(--text-still); text-decoration: none; }
.abschnitt-werkzeuge a:hover { color: var(--akzent); text-decoration: underline; }

/* ——————————————————————————— Gerendertes Markdown ——————————————————————————— */

.md { line-height: 1.72; overflow-wrap: break-word; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1 { font-size: 1.55rem; margin: 2.1rem 0 .6rem; letter-spacing: -.018em; }
.md h2 { font-size: 1.28rem; margin: 2rem 0 .55rem; letter-spacing: -.012em; }
.md h3 { font-size: 1.1rem; margin: 1.7rem 0 .4rem; }
.md h4, .md h5, .md h6 { font-size: 1rem; margin: 1.5rem 0 .35rem; color: var(--text-leise); }
.md p { margin: .9rem 0; }
.md ul, .md ol { margin: .9rem 0; padding-left: 1.5rem; }
.md li { margin: .3rem 0; }
.md li::marker { color: var(--text-still); }
.md li.aufgabe { list-style: none; margin-left: -1.3rem; }
.md blockquote {
  margin: 1.2rem 0; padding: .6rem 0 .6rem 1.1rem;
  border-left: 3px solid var(--akzent); color: var(--text-leise);
}
.md blockquote > :first-child { margin-top: 0; }
.md blockquote > :last-child { margin-bottom: 0; }
.md code {
  background: var(--grund); border: 1px solid var(--rand); padding: .08em .35em;
  border-radius: 5px; font-size: .87em; font-family: var(--schrift-fest);
}
.md pre.code {
  background: var(--code-grund); color: var(--code-text); padding: 1rem 1.15rem;
  border-radius: var(--radius); overflow-x: auto; font-size: .84rem; line-height: 1.62;
  margin: 1.2rem 0; font-family: var(--schrift-fest);
  border: 1px solid color-mix(in srgb, var(--code-text) 12%, transparent);
}
.md pre.code code { background: none; border: 0; color: inherit; padding: 0; font-size: 1em; }
.md img { max-width: 100%; height: auto; border-radius: var(--radius); }
.md hr { border: 0; border-top: 1px solid var(--rand); margin: 2.1rem 0; }
.md .tabelle-rahmen { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--rand); border-radius: var(--radius); }
.md table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.md th, .md td { border-bottom: 1px solid var(--rand); padding: .58rem .8rem; text-align: left; vertical-align: top; }
.md th { background: var(--leiste); font-weight: 650; font-size: .82rem; letter-spacing: .01em; }
.md tr:last-child td { border-bottom: 0; }
.wikilink { border-bottom: 1px dashed var(--akzent); text-decoration: none; }
mark { background: var(--mark); padding: 0 .15em; border-radius: 3px; color: inherit; }

/* ——————————————————————————— Listen, Kacheln, Blättern ——————————————————————————— */

.kachelraster { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); margin-bottom: 1.2rem; }
.kachel {
  display: flex; flex-direction: column; gap: .3rem; text-decoration: none; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1rem 1.15rem; box-shadow: var(--schatten-klein);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.kachel:hover { border-color: var(--akzent); box-shadow: var(--schatten); transform: translateY(-1px); }
.kachel strong { font-size: 1rem; }

.unterseiten-block { margin-top: 2.3rem; padding-top: 1.2rem; border-top: 1px solid var(--rand); }
.unterseiten, .dateiliste { list-style: none; margin: 0; padding: 0; }
.unterseiten li { padding: .72rem 0; border-bottom: 1px solid var(--rand); }
.unterseiten li:last-child { border-bottom: 0; }
.unterseiten li > a { font-weight: 650; text-decoration: none; }
.unterseiten li > a:hover { text-decoration: underline; }
.unterseiten p { margin: .2rem 0 0; }
.pfadzeile { margin-left: .5rem; font-size: .78rem; }
.dateiliste li { padding: .3rem 0; display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline; }

.liste { width: 100%; border-collapse: collapse; font-size: .9rem; }
.liste th, .liste td { border-bottom: 1px solid var(--rand); padding: .62rem .5rem; text-align: left; vertical-align: top; }
.liste th { font-size: .71rem; color: var(--text-still); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.liste tr:last-child td { border-bottom: 0; }
.liste tr.gesperrt td { opacity: .55; }

.blaettern { display: flex; gap: .7rem; justify-content: space-between; margin-bottom: 2rem; }
.blaettern-ziel {
  display: flex; flex-direction: column; gap: .1rem; flex: 1 1 0; min-width: 0;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .68rem .9rem; text-decoration: none; color: var(--text); font-size: .88rem;
  transition: border-color .13s ease;
}
.blaettern-ziel:hover { border-color: var(--akzent); }
.blaettern-ziel.rechts { text-align: right; }
.blaettern-ziel strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.treffer { list-style: none; margin: 0; padding: 0; }
.treffer-eintrag { padding: 1.05rem 1.3rem; margin-bottom: .7rem; }
.treffer-titel { font-weight: 650; font-size: 1.02rem; text-decoration: none; }
.treffer-titel:hover { text-decoration: underline; }
.treffer-pfad { font-size: .78rem; color: var(--text-still); margin: .1rem 0 .4rem; }
.treffer-auszug { margin: .2rem 0; font-size: .92rem; color: var(--text-leise); }

/* ——————————————————————————— Ablage und Aufnahme ——————————————————————————— */

.ablage {
  border: 2px dashed var(--rand-stark); border-radius: var(--radius-gross); background: var(--flaeche);
  padding: 2.7rem 1.2rem; text-align: center; margin-bottom: 1rem; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ablage:hover, .ablage:focus-visible { border-color: var(--akzent); background: var(--akzent-blass); outline: none; }
.ablage.bereit { border-color: var(--akzent); background: var(--akzent-blass); }
.ablage-innen { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.ablage-bild { width: 44px; height: 44px; color: var(--akzent); }
.ablage strong { font-size: 1.15rem; letter-spacing: -.012em; }
.ablage-oder { color: var(--text-still); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; }

.ablage-schleier {
  position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--akzent) 12%, transparent);
  backdrop-filter: blur(3px); display: grid; place-items: center; pointer-events: none;
}
.ablage-schleier-innen {
  background: var(--flaeche-hoch); border: 2px dashed var(--akzent); border-radius: var(--radius-gross);
  padding: 2.2rem 3.2rem; text-align: center; box-shadow: var(--schatten-hoch);
}
.ablage-schleier-innen svg { width: 40px; height: 40px; color: var(--akzent); margin-bottom: .4rem; }
.ablage-schleier-innen strong { display: block; font-size: 1.25rem; margin-bottom: .2rem; }
.ablage-schleier-innen span { color: var(--text-leise); font-size: .9rem; }

.einfuegen summary { cursor: pointer; font-size: .95rem; }
.einfuegen-innen { margin-top: .9rem; }
.einfuegen-knoepfe { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.einfuegen textarea { font-family: var(--schrift-fest); font-size: .88rem; }

.stapel { display: flex; flex-direction: column; }
.vorschlag { border-left: 3px solid var(--rand); }
.vorschlag[data-zustand="warten"] { border-left-color: var(--warn); }
.vorschlag[data-zustand="bereit"] { border-left-color: var(--akzent); }
.vorschlag[data-zustand="fertig"] { border-left-color: var(--gut); }
.vorschlag[data-zustand="fehler"] { border-left-color: var(--schlecht); }
.vorschlag-kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.vorschlag-kopf strong { flex: 1 1 auto; word-break: break-word; font-size: .95rem; }
.vorschlag-stand {
  font-size: .71rem; padding: .16rem .55rem; border-radius: 999px; background: var(--grund);
  color: var(--text-leise); font-weight: 700; letter-spacing: .03em;
}
.vorschlag[data-zustand="warten"] .vorschlag-stand { background: var(--warn-blass); color: var(--warn); }
.vorschlag[data-zustand="bereit"] .vorschlag-stand { background: var(--akzent-blass); color: var(--akzent-dunkel); }
.vorschlag[data-zustand="fertig"] .vorschlag-stand { background: var(--gut-blass); color: var(--gut); }
.vorschlag[data-zustand="fehler"] .vorschlag-stand { background: var(--schlecht-blass); color: var(--schlecht); }
/* Der Ringel sitzt in der Pille, dort schaut man ohnehin hin. Kleiner als sonst,
   damit die Pille eine Pille bleibt und die Kopfzeile nicht aufgeht. */
.vorschlag-stand { display: inline-flex; align-items: center; gap: .35rem; }
.vorschlag-stand .ringel {
  width: 9px; height: 9px; flex: 0 0 9px; border-width: 1.5px;
  border-color: currentColor; border-top-color: transparent; opacity: .75; vertical-align: 0;
}
/* Und der Balken unter den Schritten: er beantwortet die zweite Frage, naemlich
   wie lange das schon laeuft. Die Pille hat dafuer keinen Platz. */
.karte-lauf { margin: .1rem 0 .5rem; }
.karte-lauf .fortschritt { min-width: 180px; }
.vorschlag-knoepfe { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .8rem; }

.aufteilung { border-top: 1px solid var(--rand); padding-top: .8rem; margin-top: .4rem; }
.abschnitte { list-style: none; margin: .55rem 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.abschnitte li {
  display: flex; align-items: center; gap: .55rem; padding: .35rem .55rem;
  border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--flaeche);
}
.abschnitte li.empfohlen { background: var(--akzent-blass); border-color: var(--akzent-rand); }
.abschnitte input[type="text"] {
  flex: 1 1 auto; min-width: 0; padding: .28rem .45rem; border: 1px solid transparent;
  border-radius: 6px; font: inherit; font-size: .88rem; background: transparent; color: var(--text);
}
.abschnitte input[type="text"]:focus { background: var(--flaeche-hoch); border-color: var(--akzent); outline: none; }
.abschnitte .mass { font-size: .75rem; color: var(--text-still); white-space: nowrap; }

/* ——————————————————————————— Schrittkette ——————————————————————————— */

.schritte { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .1rem; }
.schritte li {
  display: flex; align-items: center; gap: .35rem; flex: 0 1 auto;
  font-size: .78rem; color: var(--text-still); padding: .2rem .5rem .2rem .2rem; position: relative;
}
.schritte li:not(:last-child)::after {
  content: ""; width: .9rem; height: 1px; background: var(--rand-stark); margin-left: .3rem;
}
.schritt-nr {
  display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 1px solid var(--rand-stark); font-size: .67rem; font-weight: 800; flex: 0 0 auto;
  background: var(--flaeche);
}
.schritte li[data-stand="fertig"] { color: var(--gut); }
.schritte li[data-stand="fertig"] .schritt-nr { background: var(--gut); border-color: var(--gut); color: #fff; font-size: 0; }
.schritte li[data-stand="fertig"] .schritt-nr::before { content: "✓"; font-size: .7rem; }
.schritte li[data-stand="jetzt"] { color: var(--akzent-dunkel); font-weight: 650; }
.schritte li[data-stand="jetzt"] .schritt-nr {
  background: var(--akzent); border-color: var(--akzent); color: #fff; box-shadow: 0 0 0 3px var(--akzent-blass);
}
.schritte-fuss { margin: -.5rem 0 .9rem; font-size: .8rem; }
.schritte-gross { gap: .3rem .2rem; margin-bottom: 1.1rem; }
.schritte-gross li {
  flex-direction: row; align-items: flex-start; font-size: .84rem;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .65rem .85rem; flex: 1 1 11rem;
}
.schritte-gross li:not(:last-child)::after { display: none; }
.schritte-gross li em { display: block; font-style: normal; font-size: .76rem; color: var(--text-still); font-weight: 400; }
.schritte-gross .schritt-nr { margin-top: .05rem; }

/* ——————————————————————————— Chat ——————————————————————————— */

.chat { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; width: min(440px, calc(100vw - 2.4rem)); }
.chat-knopf {
  margin-left: auto; display: flex; align-items: center; gap: .45rem;
  padding: .62rem 1.05rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--akzent); color: #fff; font: inherit; font-size: .9rem; font-weight: 650;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--akzent) 40%, transparent);
  transition: background .13s ease, transform .1s ease;
}
.chat-knopf:hover { background: var(--akzent-dunkel); transform: translateY(-1px); }
.chat-knopf svg { width: 17px; height: 17px; }

.chat-fenster {
  background: var(--flaeche-hoch); border: 1px solid var(--rand); border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch); overflow: hidden; margin-bottom: .6rem;
  max-height: min(78vh, 760px); display: flex; flex-direction: column;
}
.chat-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .6rem .9rem; border-bottom: 1px solid var(--rand); background: var(--leiste);
}
.chat-koerper { padding: .9rem; overflow-y: auto; flex: 1 1 auto; }
.chat-eingabe {
  width: 100%; min-height: 6.5rem; padding: .6rem .7rem; border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein); font: inherit; font-size: .92rem; resize: vertical;
  background: var(--flaeche); color: var(--text);
}
.chat-eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-blass); }
.chat-knoepfe { display: flex; gap: .45rem; align-items: center; margin-top: .6rem; flex-wrap: wrap; }
.chat-ziel {
  background: var(--leiste); border: 1px solid var(--rand); border-radius: var(--radius-klein);
  padding: .58rem .72rem; margin-bottom: .7rem; font-size: .88rem;
}
.chat-ziel .pfad { font-weight: 650; word-break: break-word; }
.chat-ziel .art { color: var(--text-leise); }

.chat-reiter { display: flex; gap: .15rem; background: var(--grund); padding: .15rem; border-radius: var(--radius-klein); }
.chat-reiter-knopf {
  border: 0; background: none; font: inherit; font-size: .84rem; font-weight: 650;
  padding: .3rem .8rem; border-radius: 6px; cursor: pointer; color: var(--text-leise);
}
.chat-reiter-knopf:hover { color: var(--text); }
.chat-reiter-knopf.aktiv { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-klein); }
.chat-reiter-knopf[data-modus="fragen"].aktiv { color: var(--gut); }
.chat-reiter-knopf[data-modus="ablegen"].aktiv { color: var(--akzent-dunkel); }
#chat[data-modus="fragen"] .chat-fenster { border-color: var(--gut-rand); }
#chat[data-modus="fragen"] .taste-stark { background: var(--gut); border-color: var(--gut); }
#chat[data-modus="fragen"] .chat-eingabe:focus { border-color: var(--gut); box-shadow: 0 0 0 3px var(--gut-blass); }
.chat-hinweis-lesen {
  background: var(--gut-blass); border: 1px solid var(--gut-rand); border-radius: var(--radius-klein);
  padding: .45rem .7rem; font-size: .82rem; margin: 0 0 .6rem; color: var(--gut);
}

.rueckfrage { border: 1px solid var(--akzent-rand); background: var(--akzent-blass); border-radius: var(--radius); padding: .75rem .85rem; margin-top: .7rem; }
.rueckfrage-text { margin: 0 0 .55rem; font-weight: 650; font-size: .92rem; }
.rueckfrage-wahl {
  display: block; width: 100%; text-align: left; margin-bottom: .35rem;
  background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  padding: .48rem .68rem; font: inherit; font-size: .88rem; cursor: pointer; color: var(--text);
}
.rueckfrage-wahl:hover { border-color: var(--akzent); }
.rueckfrage-wahl strong { display: block; }
.rueckfrage-wahl .leise { font-size: .78rem; }

.antwort { font-size: .93rem; line-height: 1.62; margin-top: .7rem; }
.quellen { margin-top: .8rem; border-top: 1px solid var(--rand); padding-top: .5rem; }
.quellen-titel { font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-still); }
.quellen ol { margin: .3rem 0 0; padding-left: 1.4rem; font-size: .84rem; }
.quellen li { margin: .12rem 0; }
.quellen.unbelegt .quellen-titel { color: var(--warn); }
.quellen.unbelegt a { color: var(--text-leise); }

/* ——— „Das wurde schon gefragt" ———
   Die Antwort aus dem Archiv sieht aus wie jede andere. Damit sie nicht fuer eine
   frische gehalten wird, steht der Kopf darueber und nicht klein darunter. */
.archiv-kopf {
  border-left: 3px solid var(--akzent-rand); background: var(--akzent-blass);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  padding: .45rem .7rem; margin-bottom: .7rem; font-size: .84rem; color: var(--text-leise);
}

.aehnliche { margin-top: .8rem; border-top: 1px dashed var(--rand); padding-top: .5rem; }
.aehnliche ul { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .84rem; }
.aehnliche li { margin: .12rem 0; }

/* Empfehlung. Erst ab genuegend Stimmen, und nur als Summe: unterhalb der Schwelle
   erzeugt die Anzeige gar kein Element, das hier zu gestalten waere. */
.empfehlung {
  margin: .5rem 0 0; font-size: .82rem; color: var(--text-leise);
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--rand); border-radius: 999px; padding: .12rem .6rem;
}
.empfehlung.empfohlen {
  color: var(--gut); background: var(--gut-blass); border-color: var(--gut-rand); font-weight: 600;
}

/* Fragentreffer auf der Suchseite und das Suchfeld in der Fragenliste. */
.gefragt-block { border-left: 3px solid var(--akzent-rand); }
.gefragt-liste { list-style: none; margin: .6rem 0 0; padding: 0; }
.gefragt-liste > li { padding: .5rem 0; border-top: 1px solid var(--rand); }
.gefragt-liste > li:first-child { border-top: 0; }

.fragen-suche { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.fragen-suche .feld { flex: 1 1 18rem; margin: 0; }

.unterschied { border: 1px solid var(--rand); border-radius: var(--radius-klein); overflow: hidden; margin: .6rem 0; }
.unterschied-teil {
  padding: .55rem .72rem; font-size: .85rem; line-height: 1.55; white-space: pre-wrap;
  font-family: var(--schrift-fest); max-height: 15rem; overflow: auto;
}
.unterschied-teil.raus { background: var(--schlecht-blass); border-bottom: 1px solid var(--rand); }
.unterschied-teil.rein { background: var(--gut-blass); }
.unterschied-kopf {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-still); padding: .35rem .72rem; background: var(--leiste); border-bottom: 1px solid var(--rand);
}

/* ——————————————————————————— Editor ——————————————————————————— */

.bearbeiten-flaeche { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.bearbeiten-flaeche textarea {
  width: 100%; padding: 1rem; border: 1px solid var(--rand-stark); border-radius: var(--radius);
  font-family: var(--schrift-fest); font-size: .89rem; line-height: 1.72; resize: vertical;
  min-height: 26rem; tab-size: 2; background: var(--flaeche); color: var(--text);
}
.bearbeiten-flaeche textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-blass); }
.vorschau {
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.2rem;
  background: var(--flaeche); overflow-y: auto; max-height: 46rem;
}

/* ——————————————————————————— Anmeldung ——————————————————————————— */

body.seite-anmelden { background: var(--leiste); }
.anmeldeflaeche { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem 1rem; }
.anmeldekarte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-gross);
  box-shadow: var(--schatten); padding: 2rem; width: min(400px, 100%);
}
.anmeldekarte h1 { font-size: 1.28rem; margin: 0 0 .4rem; letter-spacing: -.018em; }
.anmeldekarte form { margin-top: .4rem; }
.anmeldekarte .codefeld { letter-spacing: .2em; }
.marke-gross { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.1rem; margin-bottom: 1.2rem; }
.trenner { display: flex; align-items: center; gap: .7rem; margin: 1rem 0; color: var(--text-still); font-size: .78rem; }
.trenner::before, .trenner::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--rand); }

/* ——————————————————————————— Zweiter Faktor ——————————————————————————— */

.codefeld { font-family: var(--schrift-fest); font-size: 1.25rem; letter-spacing: .3em; text-align: center; }
.zweifaktor-raster { display: grid; grid-template-columns: 1fr; gap: 1.4rem; align-items: start; margin: 1.2rem 0; }
.qr-rahmen {
  background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
  padding: .8rem; display: grid; place-items: center; width: max-content;
}
.qr-rahmen img { display: block; width: 220px; height: 220px; }
.geheimnis code {
  display: inline-block; font-size: 1.05rem; letter-spacing: .12em; padding: .5rem .7rem;
  background: var(--grund); border: 1px solid var(--rand); border-radius: var(--radius-klein); user-select: all;
  font-family: var(--schrift-fest);
}
.notfallcodes { list-style: none; margin: .8rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .4rem; }
.notfallcodes li {
  font-family: var(--schrift-fest); font-size: 1rem; background: var(--grund);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  padding: .45rem .7rem; text-align: center; letter-spacing: .05em; user-select: all;
}

/* ——————————————————————————— Sichtbarkeit ——————————————————————————— */

.schutzband {
  display: inline-flex; align-items: center; gap: .35rem; margin: .45rem 0 0;
  font-size: .79rem; font-weight: 650; color: var(--warn);
  background: var(--warn-blass); border: 1px solid var(--warn-rand); border-radius: 6px;
  padding: .18rem .5rem;
}
.schutzband svg { width: 14px; height: 14px; flex: 0 0 auto; }
.sichtbarkeit {
  background: var(--leiste); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.05rem 1.25rem; margin: 0 0 1.4rem;
}
.sichtbarkeit h2 { font-size: 1rem; margin: 0 0 .5rem; }
.sichtbarkeit .schalter { align-items: flex-start; font-weight: 500; margin: .55rem 0; }
/* Gilt jetzt ueberall und nicht nur unter .sichtbarkeit. Dort war das Muster
   zuhause, und wer es woanders abschreibt, bekam „MCP-Zugang einschaltenSolange
   aus, kann niemand …" in einer Zeile. */
.schalter em { display: block; font-style: normal; font-weight: 400; font-size: .82rem; margin-top: .15rem; }
.gruppenwahl { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 1rem; }
.gruppenwahl-kasten {
  margin: .2rem 0 .6rem 1.6rem; padding: .55rem; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
}
.marke-wahl {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem;
  border: 1px solid var(--rand); border-radius: 999px; padding: .2rem .6rem; cursor: pointer;
  background: var(--flaeche);
}
.marke-wahl:hover { border-color: var(--akzent); }
.marke-wahl input { margin: 0; }

/* Ankreuzfeld mit Erklaerung darunter. Die runde Pille oben taugt dafuer nicht:
   sie richtet mittig aus und ist auf eine Zeile gebaut. */
.marke-wahl.wahl-gross {
  display: flex; align-items: flex-start; gap: .5rem;
  border-radius: var(--radius-klein, .4rem); padding: .5rem .7rem;
  line-height: 1.4; width: 100%;
}
.marke-wahl.wahl-gross input { margin-top: .18rem; flex: 0 0 auto; }
.marke-wahl.wahl-gross em {
  display: block; font-style: normal; font-size: .8rem; margin-top: .15rem;
  color: var(--text-leise);
}
/* Die beiden Werkzeuge, bei denen Inhalt im Wortlaut herausgeht. Angestrichen, nicht
   gesperrt: ob das ein Problem ist, haengt am Modell des Assistenten, und das weiss
   nur der Mensch vor dem Bildschirm. */
.marke-wahl.wahl-achtung { border-color: var(--warn-rand); background: var(--warn-blass); }
.marke-wahl.wahl-achtung:hover { border-color: var(--warn); }

/* Kein eigener Abstand noetig: .gruppenwahl ist ein Flexkasten mit gap, und die
   volle Breite schiebt jede Zeile ohnehin auf eine eigene. */

/* ——————————————————————————— Verlauf ——————————————————————————— */

.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li {
  display: grid; grid-template-columns: 9.5rem 7.5rem 1fr auto; gap: .6rem; align-items: baseline;
  padding: .58rem .2rem; border-bottom: 1px solid var(--rand); font-size: .9rem;
}
.verlauf li:last-child { border-bottom: 0; }
.verlauf .zeit { color: var(--text-still); font-size: .82rem; font-variant-numeric: tabular-nums; }
.verlauf .was {
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 5px; background: var(--grund); color: var(--text-leise);
  justify-self: start;
}
.verlauf .was-angelegt { background: var(--gut-blass); color: var(--gut); }
.verlauf .was-geaendert { background: var(--akzent-blass); color: var(--akzent-dunkel); }
.verlauf .was-geloescht, .verlauf .was-original-geloescht { background: var(--schlecht-blass); color: var(--schlecht); }
.verlauf .was-chat, .verlauf .was-sichtbarkeit, .verlauf .was-freigabe,
.verlauf .was-zweifaktor { background: var(--lila-blass); color: var(--lila); }
.verlauf .notiz { color: var(--text-leise); font-size: .85rem; }
.verlauf .zurueck { color: var(--text-still); }

/* ——————————————————————————— Breiten ——————————————————————————— */

@media (min-width: 760px) {
  .gitter { grid-template-columns: 1fr 1fr; }
  .feld-breit { grid-column: 1 / -1; }
  .bearbeiten-flaeche.zweispaltig { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) { .zweifaktor-raster { grid-template-columns: auto 1fr; } }
@media (min-width: 900px) { .gitter-vier { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 1000px) {
  .baum-schalter { display: grid; }
  .seitenleiste {
    position: fixed; top: var(--kopf-hoehe); left: 0; z-index: 45;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--schatten-hoch); width: min(86vw, 330px); flex-basis: auto;
  }
  body.baum-offen .seitenleiste { transform: none; }
  body.baum-offen .schatten-schleier {
    display: block; position: fixed; inset: var(--kopf-hoehe) 0 0 0; z-index: 44;
    background: rgba(8, 12, 20, .45);
  }
  main { padding: 1.2rem 1rem 5rem; }
  .blatt { padding: 1.35rem 1.2rem; border-radius: var(--radius); }
  .blatt h1 { font-size: 1.5rem; }
  .marke-text, .konto-name { display: none; }
  .nav a { padding: .4rem .5rem; font-size: .84rem; }
}

@media (max-width: 620px) {
  .nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--flaeche); border-top: 1px solid var(--rand);
    justify-content: space-around; padding: .3rem .2rem;
  }
  .nav a { flex: 1 1 0; text-align: center; font-size: .76rem; padding: .45rem .2rem; }
  main { padding-bottom: 4.5rem; }
  .blatt-knoepfe { width: 100%; }
  .blaettern { flex-direction: column; }
  .blaettern-ziel.rechts { text-align: left; }
  .abschnitt-werkzeuge { opacity: 1; }
  .chat { right: .6rem; left: .6rem; bottom: 3.6rem; width: auto; }
  .verlauf li { grid-template-columns: 1fr; gap: .15rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ——————————————————————————— Druck ———————————————————————————
   Ein Wiki wird ausgedruckt. Dann zählt der Text, nicht die Bedienung. */

@media print {
  .kopf, .seitenleiste, .chat, .blatt-knoepfe, .blaettern, .abschnitt-werkzeuge,
  .ablage-schleier, .schatten-schleier, .sichtbarkeit, .inhaltsverzeichnis .ivz-titel { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding: 0; }
  .rahmen { display: block; }
  .blatt, .karte { border: 0; box-shadow: none; padding: 0; margin: 0 0 1rem; }
  .md pre.code { background: #f4f4f4; color: #000; border: 1px solid #ccc; }
  .md a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .md a[href^="seite.php"]::after, .wikilink::after { content: ""; }
  .abschnitt { break-inside: avoid-page; }
  .md h1, .md h2, .md h3, .abschnitt-kopf { break-after: avoid-page; }
}

/* ——————————————————————————— Betriebsband ——————————————————————————— */

.betriebsband {
  background: var(--warn-blass); border-bottom: 1px solid var(--warn-rand);
  color: var(--warn); padding: .55rem 1.2rem; font-size: .85rem;
}
.betriebsband strong { font-weight: 700; }
.betriebsband ul { margin: .2rem 0 0; padding-left: 1.2rem; }
.betriebsband li { margin: .1rem 0; }
@media print { .betriebsband { display: none !important; } }

/* ——————————————————————————— Abgleich ——————————————————————————— */

.stand-verzeichnis { background: var(--lila-blass); color: var(--lila); }
.stand-eigen { background: var(--akzent-blass); color: var(--akzent-dunkel); }
.kennung { font-family: var(--schrift-fest); font-size: .72rem; word-break: break-all; }

/* ——————————————————————————— Kennzahlen ——————————————————————————— */

.kennzahlen { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 1.2rem; }
.kennzahl {
  flex: 1 1 8rem; background: var(--leiste); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: .7rem .9rem; font-size: .78rem; color: var(--text-leise);
}
.kennzahl span {
  display: block; font-size: 1.3rem; font-weight: 700; color: var(--text);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: .1rem;
}
.kennzahl.stark { border-color: var(--akzent-rand); background: var(--akzent-blass); }
.kennzahl.stark span { color: var(--akzent-dunkel); }

/* ——————————————————————————— Mikrofon ——————————————————————————— */

.mikro {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--rand-stark); border-radius: 50%; background: var(--flaeche);
  color: var(--text-leise); cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.mikro svg { width: 17px; height: 17px; }
.mikro:hover { border-color: var(--akzent); color: var(--akzent); }
.mikro.nimmt-auf {
  background: var(--schlecht); border-color: var(--schlecht); color: #fff;
  animation: mikro-puls 1.4s ease-out infinite;
}
.mikro.arbeitet { border-color: var(--akzent); color: var(--akzent); }
.mikro.arbeitet svg { animation: mikro-dreht 1s linear infinite; }
@keyframes mikro-puls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--schlecht) 55%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
@keyframes mikro-dreht { to { transform: rotate(360deg); } }

/* ——————————————————————————— Festgehaltene Fragen ——————————————————————————— */

.frage-eintrag { padding: 1.3rem 1.6rem; }
.frage-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.frage-kopf h2 { font-size: 1.12rem; margin: 0 0 .3rem; letter-spacing: -.012em; }
.frage-herkunft { margin: 0 0 .9rem; font-size: .82rem; }
.frage-kurz { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: .5rem .8rem; margin-bottom: .45rem; }
.frage-kurz summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.frage-kurz summary .leise { font-weight: 400; margin-left: .4rem; font-size: .8rem; }
.frage-kurz .antwort { margin-top: .6rem; }

.merken-kasten {
  border: 1px solid var(--warn-rand); background: var(--warn-blass);
  border-radius: var(--radius); padding: .8rem .9rem; margin-top: .7rem;
}
.merken-warnung { margin: 0 0 .6rem; font-size: .85rem; color: var(--warn); }
.merken-kasten .feld > span { color: var(--warn); }
.merken-kasten input[type="text"] { background: var(--flaeche); }

/* Die Antwort im Chat ist gerendertes Markdown, aber in einem engen Fenster. */
.chat .antwort.md { font-size: .9rem; line-height: 1.6; }
.chat .antwort.md h1, .chat .antwort.md h2, .chat .antwort.md h3 { font-size: 1rem; margin: .9rem 0 .35rem; }
.chat .antwort.md ul, .chat .antwort.md ol { padding-left: 1.25rem; margin: .55rem 0; }
.chat .antwort.md li { margin: .22rem 0; }
.chat .antwort.md p { margin: .55rem 0; }
.chat .antwort.md pre.code { font-size: .78rem; padding: .7rem .8rem; }

/* ——————————————————————————— Fragen: Stufen und Werkzeuge ——————————————————————————— */

.frage-privat { border-left: 3px solid var(--warn); }
.frage-verborgen { border-left: 3px solid var(--lila); opacity: .88; }
.frage-kopf > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.frage-werkzeuge {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rand);
}
.frage-werkzeuge form { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.frage-werkzeuge .loeschform { margin-left: auto; }
.frage-werkzeuge .loeschform input[type="text"] {
  width: 11rem; padding: .22rem .45rem; border: 1px solid var(--rand); border-radius: 6px;
  font: inherit; font-size: .78rem; background: var(--flaeche); color: var(--text);
}
.loeschkonzept { border-left: 3px solid var(--rand-stark); }
.loeschkonzept .schritte-gross { margin-top: .8rem; }

@media (max-width: 620px) {
  .frage-werkzeuge .loeschform { margin-left: 0; width: 100%; }
  .frage-werkzeuge .loeschform input[type="text"] { flex: 1 1 auto; width: auto; }
}

/* ——————————————————————————— Stapelgruppierung ——————————————————————————— */

.gruppenvorschlag { border-left: 3px solid var(--akzent); }
.gruppe {
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  padding: .75rem .9rem; margin: .7rem 0; background: var(--leiste);
}
.gruppe-einzeln { border-style: dashed; background: none; }
.gruppe .feld { margin-bottom: .4rem; }
.gruppe-dateien {
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.gruppe-dateien li {
  font-size: .78rem; background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 999px; padding: .12rem .6rem; font-family: var(--schrift-fest);
}

/* ——————————————————— Werkzeuge in einer Listenzeile ——————————————————— */
/* Die Löschform steht in derselben Zelle wie Original und Einordnen. Sie bekommt
   eine eigene Zeile, damit Grundfeld und Kreuzchen nicht die Tabelle sprengen. */
.zeilen-werkzeuge {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: flex-end;
}
.zeilen-werkzeuge form { display: inline-flex; gap: .3rem; align-items: center; margin: 0; flex-wrap: wrap; }
.zeilen-werkzeuge .loeschform { flex-basis: 100%; justify-content: flex-end; }
.zeilen-werkzeuge .loeschform input[type="text"] {
  width: 9rem; padding: .22rem .45rem; border: 1px solid var(--rand); border-radius: 6px;
  font: inherit; font-size: .78rem; background: var(--flaeche); color: var(--text);
}
.schalter-klein { font-size: .78rem; gap: .25rem; }

@media (max-width: 620px) {
  .zeilen-werkzeuge, .zeilen-werkzeuge .loeschform { justify-content: flex-start; }
  .zeilen-werkzeuge .loeschform input[type="text"] { flex: 1 1 auto; width: auto; }
}

/* ——————————————————————— Wie gut war die Antwort? ———————————————————————
   Drei Stufen. Der doppelte Daumen ist bewusst der auffaelligste, damit der
   Unterschied zu „passt“ auch optisch einer ist und nicht bloss ein Zeichen mehr. */
.bewertung {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--rand);
}
.bewertung-frage { font-size: .8rem; color: var(--text-leise); margin-right: .2rem; }
.daumen {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border: 1px solid var(--rand); border-radius: 999px;
  background: var(--flaeche); color: var(--text-leise); font: inherit; font-size: .78rem;
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.daumen:hover { border-color: var(--akzent); color: var(--text); }
.daumen-zeichen { font-size: .85rem; line-height: 1; letter-spacing: -.12em; }
.daumen[data-wertung="2"] .daumen-zeichen { letter-spacing: -.2em; padding-right: .12em; }
.daumen.gewaehlt { background: var(--akzent-blass); border-color: var(--akzent); color: var(--akzent-dunkel); }
.daumen[data-wertung="-1"].gewaehlt { background: var(--warn-blass); border-color: var(--warn); color: var(--warn); }
.bewertung-dank { font-size: .78rem; color: var(--gut); margin-left: .3rem; }

.bewertung-nachfrage {
  margin-top: .5rem; padding: .6rem .7rem; border: 1px solid var(--rand);
  border-left: 3px solid var(--warn); border-radius: 8px; background: var(--grund);
}
.bewertung-nachfrage p { margin: 0 0 .45rem; }
.bewertung-nachfrage .gruende { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
.bewertung-nachfrage .feld { margin: 0 0 .5rem; }

/* Die Arbeitsliste in der Verwaltung. */
.bewertung-zeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.wertung { font-size: .75rem; border-radius: 999px; padding: .1rem .5rem; white-space: nowrap; }
.wertung-2 { background: var(--gut-blass); color: var(--gut); }
.wertung-1 { background: var(--akzent-blass); color: var(--akzent-dunkel); }
.wertung--1 { background: var(--warn-blass); color: var(--warn); }
.bewertung-erledigt { opacity: .6; }

/* ——————————————————————— Struktur umbauen (Ordnen-Modus) ———————————————————————
   Der Modus muss man sehen: ein Baum, in dem jeder Fehlgriff eine Seite verschiebt,
   waere ein Minenfeld. Deshalb faerbt sich die Leiste, und die Zeilen bekommen einen
   Griff-Cursor. */
.struktur-leiste {
  margin: 0 .5rem .5rem; padding: .55rem .65rem; border-radius: 8px;
  border: 1px solid var(--akzent); background: var(--akzent-blass);
}
.struktur-leiste p { margin: 0 0 .5rem; font-size: .76rem; line-height: 1.45; }

body.ordnen .baum-zeile { cursor: grab; }
body.ordnen .baum-zeile:active { cursor: grabbing; }
body.ordnen .baum-titel { cursor: inherit; }
.baum-zeile.haengt, li.haengt > .baum-zeile { opacity: .45; }

/* Drei Ablegestellen, drei Bilder: Strich oben, Strich unten, Rahmen ringsum. */
.baum-zeile.ziel-vor { box-shadow: inset 0 2px 0 0 var(--akzent); }
.baum-zeile.ziel-nach { box-shadow: inset 0 -2px 0 0 var(--akzent); }
.baum-zeile.ziel-hinein {
  outline: 2px solid var(--akzent); outline-offset: -2px;
  background: var(--akzent-blass); border-radius: 6px;
}

.baum-plus {
  margin-left: .2rem; width: 18px; height: 18px; flex: 0 0 18px; padding: 0;
  border: 1px solid var(--rand); border-radius: 5px; background: var(--flaeche);
  color: var(--text-leise); font: inherit; font-size: .8rem; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.baum-plus:hover { border-color: var(--akzent); color: var(--akzent-dunkel); }

.baum-wurzelziel {
  margin: .4rem .5rem .2rem; padding: .5rem; border: 1px dashed var(--rand-stark);
  border-radius: 8px; text-align: center; font-size: .74rem; color: var(--text-leise);
}
.baum-wurzelziel.ziel-hinein {
  border-color: var(--akzent); border-style: solid;
  background: var(--akzent-blass); color: var(--akzent-dunkel);
}

/* ——————————————————————— Bilder am Beitrag ——————————————————————— */
.hinweis-bilder { border-left: 3px solid var(--akzent); }
.hinweis-bilder h2 { margin-top: 0; }
.was-passiert { margin: .6rem 0 .4rem; padding-left: 1.1rem; }
.was-passiert li { margin-bottom: .35rem; line-height: 1.5; }

.anhaenge {
  margin: .7rem 0; padding: .6rem .7rem; border: 1px solid var(--rand);
  border-radius: 8px; background: var(--grund);
}
.anhang-liste { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 0; padding: 0; }
.anhang-liste li {
  width: 92px; display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
.anhang-liste img {
  width: 92px; height: 68px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rand);
  background: var(--flaeche);
}
.anhang-pdf {
  width: 92px; height: 68px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche);
  font-size: .72rem; font-weight: 600; color: var(--warn); letter-spacing: .04em;
}
.anhang-name {
  font-size: .68rem; color: var(--text-leise); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px;
}

/* ——————————————————————— Galerie auf der Seite ——————————————————————— */
.galerie-block h2 { margin: 0; }
.galerie { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: 1rem; }
.galerie-stueck {
  display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start;
  padding: .8rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche);
}
.galerie-stueck img {
  width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--rand); display: block;
}
.galerie-pdf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  min-height: 130px; border: 1px dashed var(--rand-stark); border-radius: 8px;
  text-decoration: none; color: var(--text-leise); padding: .6rem; text-align: center;
  font-size: .78rem; word-break: break-word;
}
.galerie-pdf-zeichen { font-size: 1.1rem; font-weight: 700; color: var(--warn); letter-spacing: .05em; }
.galerie-text .feld { margin-bottom: .5rem; }
.galerie-knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }

/* Bilder im Fliesstext bekommen Luft und bleiben im Rahmen. */
.md img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--rand); }

@media (max-width: 620px) {
  .galerie-stueck { grid-template-columns: 1fr; }
}

/* ——————————————————————— Postfächer ——————————————————————— */
.postfach { margin-bottom: 1rem; }
.postfach-aus { opacity: .7; }
.postfach h3 { margin: 0; font-size: 1rem; }
.postfach h3 .leise { font-weight: 400; font-size: .8rem; margin-left: .4rem; }
.postfach details { margin-top: .6rem; }
.postfach summary { cursor: pointer; font-size: .85rem; color: var(--text-leise); }
.postfach-form { margin-top: .7rem; }
.kasten-warnung {
  margin: .8rem 0; padding: .7rem .85rem; border: 1px solid var(--rand);
  border-left: 3px solid var(--warn); border-radius: 8px; background: var(--grund);
}
.kasten-warnung .was-passiert { margin-bottom: 0; }
.reihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .6rem 0; }
.reihe .feld { margin: 0; }

/* ——————————————————— Markierte Stelle mit der KI ändern ——————————————————— */
.auswahl-knopf {
  position: absolute; z-index: 40; display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem; border: 1px solid var(--akzent); border-radius: 999px;
  background: var(--akzent); color: #fff; font: inherit; font-size: .78rem;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.auswahl-knopf svg { width: 15px; height: 15px; }
.auswahl-knopf:hover { filter: brightness(1.08); }

.ki-modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; padding: 1rem; background: rgba(15, 20, 30, .45);
}
.ki-modal-innen {
  width: min(880px, 100%); max-height: 88vh; overflow-y: auto; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.ki-modal-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--rand);
}
.ki-modal-koerper { padding: .9rem; }
.ki-auswahl { margin-bottom: .8rem; }
.ki-auswahl blockquote {
  margin: .25rem 0 0; padding: .5rem .7rem; border-left: 3px solid var(--akzent);
  background: var(--grund); border-radius: 0 6px 6px 0; font-size: .88rem; line-height: 1.5;
  max-height: 9rem; overflow-y: auto;
}
.ki-gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .5rem 0; }
.ki-gegenueber pre {
  max-height: 16rem; overflow: auto; white-space: pre-wrap; word-break: break-word;
  margin: .2rem 0 0;
}
.ki-neu { outline: 2px solid transparent; }
.ki-neu:focus { outline-color: var(--akzent); }

@media (max-width: 720px) {
  .ki-gegenueber { grid-template-columns: 1fr; }
}

/* ——————————————————— PDF: Vorschau statt grauem Kasten ——————————————————— */
.galerie-pdfbild { position: relative; display: block; }
.galerie-pdfbild img {
  width: 100%; height: auto; display: block; border-radius: 8px;
  border: 1px solid var(--rand); background: #fff;
}
.pdf-marke {
  position: absolute; left: .5rem; top: .5rem;
  background: var(--warn); color: #fff; font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; padding: .1rem .45rem; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.anhang-ist-pdf { position: relative; }
.anhang-ist-pdf::after {
  content: 'PDF'; position: absolute; left: 4px; top: 4px;
  background: var(--warn); color: #fff; font-size: .58rem; font-weight: 600;
  padding: 0 .25rem; border-radius: 3px;
}
/* Ein PDF-Verweis im Fliesstext bekommt Luft, damit das Zeichen davor wirkt. */
.md a[href^="medium.php"] { text-decoration-thickness: 1px; }

/* ——————————————————— Schwebende Meldung in der Verwaltung ——————————————————— */
.meldung-schwebt {
  position: fixed; left: 50%; transform: translateX(-50%); top: 1rem; z-index: 70;
  display: flex; align-items: center; gap: .6rem;
  max-width: min(720px, calc(100% - 2rem));
  padding: .6rem .8rem; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  font-size: .88rem; line-height: 1.45;
  transition: opacity .5s ease, transform .5s ease;
}
.meldung-schwebt span { flex: 1 1 auto; }
.meldung-gut { background: var(--gut-blass); border: 1px solid var(--gut); color: var(--gut); }
.meldung-fehler { background: var(--warn-blass); border: 1px solid var(--warn); color: var(--warn); }
.meldung-geht { opacity: 0; transform: translateX(-50%) translateY(-8px); }

@media (max-width: 620px) {
  .meldung-schwebt { top: .5rem; }
}

/* ——————————————————— Anhänge an eine vorhandene Seite ——————————————————— */
.anhang-ablage {
  margin: .8rem 0; padding: 1rem; text-align: center;
  border: 2px dashed var(--rand-stark); border-radius: 10px; background: var(--grund);
}
.anhang-ablage p { margin: 0 0 .5rem; }
.anhang-ablage.ablage-bereit { border-color: var(--akzent); background: var(--akzent-blass); }
#anhang-stand { min-height: 1.2em; margin-top: .5rem; }

/* Ein Formular in der Knopfleiste soll sich wie ein Knopf verhalten. */
.leiste-form { display: inline-flex; margin: 0; }

/* Ein angehängtes PDF auslesen: eigene Zeile über den übrigen Knöpfen. */
.pdf-auslesen {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin-bottom: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rand);
  font-size: .8rem;
}

/* Fortschrittsbalken in der Auftragsliste. */
.balken {
  height: 6px; border-radius: 3px; background: var(--rand); overflow: hidden;
  margin-top: .25rem; max-width: 160px;
}
.balken span { display: block; height: 100%; background: var(--akzent); }

/* ——————————————————— Fortschritt eines langen Vorgangs ———————————————————
   Eine Zeile Text allein lässt offen, ob noch etwas passiert. Bei zehn Minuten
   Laufzeit ist der Ringel der Unterschied zwischen „läuft" und „hängt". */
.ringel {
  display: inline-block; width: 13px; height: 13px; flex: 0 0 13px;
  border: 2px solid var(--rand-stark); border-top-color: var(--akzent);
  border-radius: 50%; animation: ringel 0.8s linear infinite; vertical-align: -2px;
}
@keyframes ringel { to { transform: rotate(360deg); } }
/* Eigenes Flex, unabhaengig vom Elternteil: faellt die Klasse am Feld aus, ist der
   Text trotzdem da und lesbar, statt auf null Breite zusammenzufallen. */
.fortschritt { display: inline-flex; flex-direction: column; gap: .2rem; min-width: 220px; vertical-align: middle; }
.fortschritt .balken { max-width: none; margin: 0; }
.fortschritt .balken > span { transition: width .3s ease; }
.fortschritt-text { font-size: .76rem; color: var(--text-leise); }
/* Die Klasse setzt MDWiki.fortschritt() selbst. An Attributnamen gebunden war sie
   vorher an genau zwei Feldern richtig und am dritten unsichtbar. */
.fortschritt-feld,
[data-pdf-stand], [data-auftrag-stand] { display: inline-flex; align-items: center; gap: .5rem; }
.fortschritt-feld { flex: 1 1 260px; }

/* Unbestimmte Dauer: der Balken wandert, statt einen Anteil zu behaupten, den
   niemand kennt. Bei einer Suche ueber hunderte Passagen plus KI-Aufruf ist jede
   Prozentzahl geraten, und geraten ist schlechter als ehrlich unbestimmt. */
.balken.unbestimmt { position: relative; overflow: hidden; }
.balken.unbestimmt > span {
  width: 38%; transition: none;
  animation: wandern 1.4s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes wandern {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(263%); }
}

@media (prefers-reduced-motion: reduce) {
  .ringel { animation: none; border-top-color: var(--rand-stark); }
  .fortschritt .balken > span { transition: none; }
  .balken.unbestimmt > span { animation: none; width: 100%; opacity: .45; }
}

/* Vor dem Ausgeben, nicht danach: was das Auslesen kosten würde. */
.pruefung {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 1px solid var(--warn-rand);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  background: var(--warn-blass);
}
.pruefung p { margin: 0 0 .4rem; }
.pruefung .vorschlag-knoepfe { margin-top: .8rem; }

/* Die wiederhergestellte Frage ist erkennbar eine von vorhin, kein frisches Ergebnis. */
.chat-altfrage {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 .7rem; padding: .45rem .6rem;
  border-left: 2px solid var(--rand-stark); border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: .8rem;
}

/* „Diese Datei hängt schon an …" — Hinweis, kein Fehler: dieselbe Datei darf an
   zwei Seiten hängen. Gemeint ist der Fall, in dem das niemand wollte. */
.anhang-dublette { margin-top: .6rem; }
.anhang-dublette a { font-weight: 600; }

/* ——————————————————————— Eintrag einsprechen ———————————————————————
   Der Knopf in der Seitenleiste sieht aus wie die Ablagefläche darüber, weil er
   dieselbe Frage beantwortet: wie kommt etwas hier herein. */
.ablage-diktat {
  width: 100%; margin-top: .4rem; text-align: left; cursor: pointer;
  background: none; font-family: inherit;
}

.diktat-schleier {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center;
  justify-content: center; padding: 1rem; background: rgba(16, 24, 40, .45);
}
.diktat-fenster {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius-gross);
  box-shadow: var(--schatten-hoch); width: min(640px, 100%); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.diktat-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--rand); background: var(--leiste);
}
.diktat-koerper { padding: .9rem; overflow: auto; }
.diktat-koerper .feld { margin-top: .7rem; }
.diktat-fuss { margin: .7rem 0 0; }

.diktat-steuer { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .8rem 0 .5rem; }
.diktat-knopf {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  border: 1px solid var(--rand-stark); border-radius: 999px; background: var(--flaeche);
  padding: .45rem .95rem; font: inherit; font-weight: 600; color: var(--text);
}
.diktat-knopf:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent-dunkel); }
.diktat-knopf:disabled { opacity: .55; cursor: default; }
.diktat-punkt {
  width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: var(--schlecht);
}
/* Nur während der Aufnahme pulst der Punkt. Ein Punkt, der immer pulst, sagt nichts. */
.diktat-knopf.nimmt-auf { border-color: var(--schlecht); color: var(--schlecht); }
.diktat-knopf.nimmt-auf .diktat-punkt { animation: diktat-puls 1.2s ease-in-out infinite; }
@keyframes diktat-puls { 50% { opacity: .25; transform: scale(.8); } }

.diktat-uhr { font-variant-numeric: tabular-nums; font-size: 1.1rem; font-weight: 650; }
.diktat-rest { font-size: .8rem; }

/* Der Pegel ist kein Schmuck: er beweist, dass das Mikrofon etwas hört. Ein stummes
   Mikrofon merkt man sonst erst an zehn Minuten leerem Text. */
.diktat-pegel {
  height: 5px; border-radius: 3px; background: var(--rand); overflow: hidden; margin-bottom: .6rem;
}
.diktat-pegel span {
  display: block; height: 100%; width: 0; background: var(--gut); transition: width .1s linear;
}

.diktat-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
#diktat-text { font-family: var(--schrift); line-height: 1.5; }
#diktat-text[readonly] { background: var(--grund); color: var(--text-leise); }

@media (prefers-reduced-motion: reduce) {
  .diktat-knopf.nimmt-auf .diktat-punkt { animation: none; }
  .diktat-pegel span { transition: none; }
}

/* ——————————————————————————— Mindmap ———————————————————————————
   Gezeichnet aus einer verschachtelten Liste im Seitentext. Die Liste ist die
   Wahrheit, das Bild eine Ansicht davon: deshalb bleibt der Inhalt durchsuchbar,
   exportierbar und im Verlauf zurücknehmbar. */
.mindmap { margin: 1.1rem 0; padding: 0; }
.mindmap-buehne {
  position: relative; overflow: auto; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius); padding: .4rem;
}
.mm-svg { display: block; max-width: none; }

.mm-linie { fill: none; stroke: var(--rand-stark); stroke-width: 1.6; }

.mm-kasten {
  fill: var(--flaeche-hoch); stroke: var(--rand-stark); stroke-width: 1.2;
}
.mm-text {
  font: 13px var(--schrift); fill: var(--text); dominant-baseline: middle;
  pointer-events: none; user-select: none;
}
.mm-wurzel .mm-kasten { fill: var(--akzent-blass); stroke: var(--akzent-rand); stroke-width: 1.6; }
.mm-wurzel-text { font-weight: 650; fill: var(--akzent-dunkel); }

.mm-knoten { cursor: default; }
[data-darf-schreiben] .mm-knoten { cursor: pointer; }
[data-darf-schreiben] .mm-knoten:hover .mm-kasten { stroke: var(--akzent); }
.mm-knoten:focus { outline: none; }
.mm-knoten:focus .mm-kasten,
.mm-knoten.gewaehlt .mm-kasten { stroke: var(--akzent); stroke-width: 2.2; }

/* Das Umbenennen sitzt über dem Knoten, nicht in einem Dialog daneben: sonst
   verliert man beim Tippen aus den Augen, welchen Knoten man gerade ändert. */
.mm-eingabe {
  position: absolute; z-index: 2; font: 13px var(--schrift); padding: 0 .5rem;
  border: 2px solid var(--akzent); border-radius: 8px; background: var(--flaeche-hoch);
  color: var(--text); box-shadow: var(--schatten-klein);
}

.mindmap-leiste {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .5rem;
}
.mindmap-vorschau { margin-top: .9rem; }

@media print {
  .mindmap-leiste { display: none; }
  .mindmap-buehne { overflow: visible; border-color: var(--rand); }
}

/* Die Belegmarke am Knoten: die Nummer der Quelle, und zugleich die Fläche, die
   dorthin führt. Im Text stehende Klammern hätte das Layout mitgemessen. */
.mm-marke { cursor: pointer; }
.mm-marke-kreis { fill: var(--akzent-blass); stroke: var(--akzent-rand); stroke-width: 1; }
.mm-marke-text {
  font: 700 9px var(--schrift); fill: var(--akzent-dunkel); text-anchor: middle;
  dominant-baseline: middle; pointer-events: none; user-select: none;
}
.mm-marke:hover .mm-marke-kreis { fill: var(--akzent); stroke: var(--akzent); }
.mm-marke:hover .mm-marke-text { fill: #fff; }

.mindmap-form { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; margin: .9rem 0 .4rem; }
.mindmap-form .feld { flex: 1 1 22rem; margin: 0; }
#mindmap-buehne { min-height: 6rem; }

/* Antworten in der Fragenliste stehen zugeklappt: fünfundzwanzig ausgeschriebene
   Antworten sind eine Wand, durch die niemand scrollt. Wer aus der Suche kommt,
   bekommt seinen Eintrag offen (fragen.js). */
.frage-antwort > summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--akzent-dunkel);
  padding: .2rem 0; list-style: none; display: inline-flex; align-items: center; gap: .35rem;
}
.frage-antwort > summary::-webkit-details-marker { display: none; }
.frage-antwort > summary::before {
  content: '▸'; font-size: .8em; transition: transform .15s ease;
}
.frage-antwort[open] > summary::before { transform: rotate(90deg); }
.frage-antwort[open] > summary { margin-bottom: .3rem; }
.frage-antwort > summary:hover { text-decoration: underline; }

/* Der Eintrag, auf den gesprungen wurde, hebt sich kurz ab: sonst sucht man in einer
   langen Liste erst, wo man gelandet ist. */
.frage-eintrag.hervorgehoben { box-shadow: 0 0 0 2px var(--akzent-rand); }

.veraltet-marke { color: var(--warn); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .frage-antwort > summary::before { transition: none; }
}

/* Neu beantworten und neu zeichnen: der alte Stand links, der neue rechts. Dieselbe
   Form wie beim Chat-Vorschlag, damit „vorher/nachher" überall gleich aussieht. */
.frage-vergleich, .mindmap-vergleich {
  margin-top: .9rem; padding-top: .8rem; border-top: 2px solid var(--akzent-rand);
}
.frage-vergleich h3, .mindmap-vergleich h3 { margin: 0 0 .3rem; font-size: .96rem; }
.frage-vergleich-quellen { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.frage-vergleich-quellen .quellen { flex: 1 1 14rem; }
.unterschied-teil.md { white-space: normal; font-family: var(--schrift); }

/* Der Unterschied zweier Mindmaps als Knotenliste: zwei Bilder zu vergleichen heisst,
   mit den Augen zu suchen, was anders ist. */
.mindmap-diff { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .6rem 0; }
.mm-diff-teil { flex: 1 1 16rem; font-size: .85rem; }
.mm-diff-teil ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.mm-diff-teil.rein strong { color: var(--gut); }
.mm-diff-teil.raus strong { color: var(--schlecht); }

/* Der Unterschied zwischen Auffrischen und Danebenzeichnen steht als Zeile da,
   nicht im Tooltip: was zwei Knöpfe unterscheidet, muss man lesen können, ohne mit
   der Maus darauf zu warten. */
.mindmap-erklaerung { margin: .2rem 0 .5rem; }
.mindmap-erklaerung strong { color: var(--text); }

/* ——————————————————— Bild neben dem Text ———————————————————
   Ein Plan oder eine Kennzahlentafel gehört neben den Absatz, den sie erklärt,
   nicht ans Ende. Der gespeicherte Text bleibt unberührt: die Figur wird nach dem
   Rendern am Überschriftenanker eingehängt. */
.medium-schwebt {
  margin: .2rem 0 .8rem; padding: .45rem; border: 1px solid var(--rand);
  border-radius: var(--radius-klein); background: var(--flaeche);
  max-width: 320px; font-size: .82rem;
}
.medium-schwebt img { display: block; width: 100%; height: auto; border-radius: var(--radius-klein); }
.medium-schwebt figcaption { margin-top: .4rem; color: var(--text-leise); line-height: 1.45; }
.medium-schwebt .figur-datei { display: inline-block; margin-top: .35rem; font-weight: 600; }

.medium-rechts { float: right; clear: right; margin-left: 1.1rem; }
.medium-links  { float: left;  clear: left;  margin-right: 1.1rem; }

/* Überschriften und Trennlinien dürfen nicht in die Figur hineinlaufen. */
.md h1, .md h2, .md h3, .md hr { clear: both; }

/* Schmal wird aus „daneben" ein „darüber": eine 320px-Figur neben 360px Text ist
   kein Umfluss mehr, sondern eine Spalte aus einzelnen Wörtern. */
@media (max-width: 760px) {
  .medium-rechts, .medium-links { float: none; margin: .6rem 0 1rem; max-width: 100%; }
}

@media print {
  .medium-schwebt { break-inside: avoid; }
}

/* Platzierung und Abschnitt stehen nebeneinander: sie sind eine Entscheidung in
   zwei Teilen, „rechts" ohne „rechts wovon" ist keine Angabe. */
.gitter-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 620px) { .gitter-zwei { grid-template-columns: 1fr; } }

/* Erklären, dann fragen. Ein Knopf sagt, was er heisst, nicht was er anrichtet:
   was gleich passiert, steht in Stichpunkten, denn ein Absatz vor einem Knopf wird
   nicht gelesen. */
.erklaer-modal .ki-modal-innen { width: min(560px, 100%); }
.erklaer-was { font-weight: 600; margin: 0 0 .5rem; }
.erklaer-punkte { margin: 0 0 .7rem; padding-left: 1.2rem; font-size: .88rem; line-height: 1.55; }
.erklaer-punkte li { margin: .25rem 0; }
.erklaer-kosten {
  margin: 0 0 .3rem; padding: .5rem .65rem; font-size: .84rem;
  background: var(--akzent-blass); border: 1px solid var(--akzent-rand);
  border-radius: var(--radius-klein); color: var(--text-leise);
}

/* Kuratiertes in der Vorschlagsliste hebt sich ab: eine festgehaltene Frage hat
   jemand ausdrücklich aufgeschrieben, ein Seitentitel ist einfach da. */
.vorschlaege .art-frage { color: var(--akzent-dunkel); font-weight: 700; }
.vorschlaege .art-mindmap { color: var(--lila); font-weight: 700; }

/* Kachel mit Gesicht: ein Bild neben dem Titel macht aus einer Liste von Namen eine
   Übersicht, die man wiedererkennt. */
/* Das Bild liegt über die volle Kachelbreite oben auf, quadratisch.
   Es zieht sich bis an die Kanten, deshalb der negative Innenabstand: eine Karte mit
   einem Rand rings um das Bild sieht aus wie ein Bild in einem Kasten, nicht wie
   eine Karte. `cover` schneidet zu, statt zu verzerren — ein gestauchtes Foto fällt
   sofort auf, ein beschnittenes fast nie. */
.kachel-bild { padding-top: 0; overflow: hidden; }
.kachel-vorschau {
  display: block; width: calc(100% + 2.3rem); margin: 0 -1.15rem .7rem;
  aspect-ratio: 1 / 1; object-fit: cover; object-position: center;
  background: var(--grund);
  /* Oben rund wie die Kachel, unten gerade: dort geht es in den Text über. */
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.kachel-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.kachel-text strong { line-height: 1.3; }

/* Platzhalter für Kacheln ohne Bild.
   Ein weicher Verlauf und der Anfangsbuchstabe, sehr blass: das liest sich als
   Absicht, während eine leere graue Fläche wie ein fehlendes Bild aussieht. Der
   Farbton kommt aus der Kennung der Seite, ist je Bereich also immer derselbe —
   man erkennt seine Kachel wieder, ohne dass jemand Farben pflegen müsste. */
.kachel-platzhalter {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 22% 18%, hsl(var(--kachel-ton) 30% 97%) 0%, transparent 60%),
    linear-gradient(145deg, hsl(var(--kachel-ton) 22% 94%) 0%, hsl(var(--kachel-ton) 16% 87%) 100%);
  color: hsl(var(--kachel-ton) 24% 72%);
  font-size: 2.9rem; font-weight: 700; line-height: 1; user-select: none;
}
/* Dunkel in beiden Faellen: ausdruecklich gewaehlt, und nach Systemeinstellung,
   solange nicht ausdruecklich hell gewaehlt wurde. Dasselbe Muster wie oben bei den
   Farbmerkmalen — ohne die Medienabfrage waere es auch bei hellem System dunkel. */
:root[data-thema="dunkel"] .kachel-platzhalter {
  background:
    radial-gradient(120% 90% at 22% 18%, hsl(var(--kachel-ton) 18% 26%) 0%, transparent 60%),
    linear-gradient(145deg, hsl(var(--kachel-ton) 16% 22%) 0%, hsl(var(--kachel-ton) 14% 16%) 100%);
  color: hsl(var(--kachel-ton) 16% 42%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .kachel-platzhalter {
    background:
      radial-gradient(120% 90% at 22% 18%, hsl(var(--kachel-ton) 18% 26%) 0%, transparent 60%),
      linear-gradient(145deg, hsl(var(--kachel-ton) 16% 22%) 0%, hsl(var(--kachel-ton) 14% 16%) 100%);
    color: hsl(var(--kachel-ton) 16% 42%);
  }
}

/* Geändert, gefragt, gezeichnet: dieselbe Frage dreimal, also drei gleiche Kästen
   in einer Zeile. Wird es zu schmal, erst zwei, dann einer — drei Spalten aus je
   zwei Wörtern sind keine Übersicht mehr. */
.start-spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1180px) { .start-spalten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .start-spalten { grid-template-columns: 1fr; } }
.start-spalten .gefragt-liste > li { padding: .4rem 0; }
.start-spalten .treffer-titel { font-size: .92rem; }
.start-spalten .leiste-eng { margin-bottom: .2rem; }

/* Empfehlung in einer schmalen Spalte: nur die Zahl, der ganze Satz steht im Titel.
   Weiterhin erst ab der Schwelle, und weiterhin nur als Summe. */
.empfehlung-kurz {
  font-weight: 700; color: var(--text-leise); white-space: nowrap;
}
.empfehlung-kurz.empfohlen { color: var(--gut); }

/* Der Posteingang meldet sich nur, wenn etwas darin liegt — dann aber sichtbar.
   Ein Knopf, der immer „0 offen" sagt, wird nach drei Tagen nicht mehr gesehen. */
.ablage-offen {
  margin-top: .4rem; border-style: solid; border-color: var(--warn-rand);
  background: var(--warn-blass);
}
.ablage-offen:hover { border-color: var(--warn); background: var(--warn-blass); color: var(--warn); }
.ablage-offen svg { color: var(--warn); }
.ablage-offen strong { color: var(--warn); }

/* In der Verwaltung steht links das Menü der Abschnitte statt des Baums: die Seite
   ist sehr lang, der Baum nützt dort niemandem, das Springen jedem. */
.verwaltungsmenue { display: flex; flex-direction: column; gap: .1rem; padding: .3rem .2rem; overflow-y: auto; flex: 1 1 auto; }
.verwaltungsmenue a {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  padding: .42rem .6rem; border-radius: var(--radius-klein); text-decoration: none;
  color: var(--text-leise); font-size: .88rem;
}
.verwaltungsmenue a:hover { background: var(--akzent-blass); color: var(--akzent-dunkel); }
.verwaltungsmenue a.aktiv {
  background: var(--akzent-blass); color: var(--akzent-dunkel); font-weight: 650;
  box-shadow: inset 2px 0 0 var(--akzent);
}
.verwaltungsmenue b {
  background: var(--warn); color: #fff; border-radius: 999px;
  padding: 0 .38rem; font-size: .72rem; font-weight: 700;
}

/* Offene Einbettungen sind kein Fehler, aber eine Lücke: die Seite steht im Wiki und
   wird trotzdem nicht gefunden, solange kein Wort wörtlich übereinstimmt. */
.ablage-einbettung { border-color: var(--akzent-rand); background: var(--akzent-blass); }
.ablage-einbettung svg, .ablage-einbettung strong { color: var(--akzent-dunkel); }
.ablage-einbettung:hover { border-color: var(--akzent); background: var(--akzent-blass); color: var(--akzent-dunkel); }

/* Knöpfe neben Datumsfeldern: das Feld trägt eine Beschriftung über sich, der Knopf
   nicht. Mittig ausgerichtet stand er deshalb auf halber Höhe des Feldes. Unten
   ausgerichtet stehen Feldunterkante und Knopfunterkante auf einer Linie. */
.einzeiler { align-items: flex-end; }
.einzeiler .feld { margin: 0; }
.einzeiler .taste { height: 2.35rem; display: inline-flex; align-items: center; }

/* Passwortfelder untereinander, nicht über die volle Breite: drei Felder à 60 Zeichen
   sehen aus wie ein Formular für etwas Grosses. */
.gitter-schmal { max-width: 26rem; }
.gitter-schmal .feld { margin-bottom: .5rem; }