/* =====================================================================
   Oberflaeche der Dokumentations-App.

   Uebernommen aus mockup/oberflaeche.src.html — dem Entwurf, den der Kunde
   in Stufe 1 gesehen und freigegeben hat. Die Farben und Abstaende sind
   gegen das Design-Handbuch gerechnet; wer hier etwas aendert, rechnet die
   Kontraste nach (Abschnitt 3 und 10 des Handbuchs).

   Die Schriften liegen im Abbild. Es wird nichts von Google geladen.
   ===================================================================== */
/* =====================================================================
   Schriften. Liegen als WOFF2 im Abbild bzw. hier eingebettet.
   Es wird nichts von Google geladen — wie bei der Website und wie es
   die Inhaltssicherheitsrichtlinie der Anwendung ohnehin verlangt.
   ===================================================================== */
@font-face {
  font-family: 'Raleway';
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/statisch/schriften/raleway-latin-variable.woff2) format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/statisch/schriften/source-sans-3-latin-variable.woff2) format('woff2');
}

/* =====================================================================
   Farben und Schriften — Design-Handbuch, Abschnitt 3 und 4.
   Kein #000000. Terrakotta nie als Textfarbe auf hellem Grund.
   Salbei nie als Fließtextfarbe.
   ===================================================================== */
:root {
  --zb-salbei:        #6D7A71;
  --zb-terrakotta:    #BA806A;
  --zb-papier:        #EFEADD;
  --zb-tiefgruen:     #2E3630;
  --zb-salbei-dunkel: #59655D;
  --zb-grau:          #5F6A62;
  --zb-grau-hell:     #A9B2AB;
  --zb-terra-dunkel:  #8F5B45;
  --zb-terra-hell:    #D9A88E;
  --zb-weiss:         #FFFFFF;

  --zb-font-display: "Raleway", "Avenir Next", "Segoe UI", sans-serif;
  --zb-font-text:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Abgeleitet, nur für Flächen und Linien — keine neuen Markenfarben */
  --zb-karte:   #F7F4EC;
  /* Die Haengemappe: Papier mit einem Hauch Salbei, dunkler als der Grund.
     Heller waere falsch herum -- eine Mappe liegt UNTER dem Blatt, und das
     sieht man nur, wenn sie den dunkleren Ton hat. */
  --zb-mappe:   #E5E1D4;
  /* Der Ton des BLATTES, auf dem etwas liegt. Ausserhalb der Mappe ist das
     die Karte, in der Mappe das weisse Blatt. Eine Variable und kein
     Sonderfall je Baustein: Die Rollverlaeufe der Tabellen muessen
     denselben Ton treffen, sonst schimmert ein Rand, der nichts bedeutet. */
  --zb-blatt:   #F7F4EC;
  --zb-linie:   rgba(46, 54, 48, .14);
  --zb-linie-2: rgba(46, 54, 48, .07);
  --zb-radius:  6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--zb-font-text);
  font-size: 1.0625rem;      /* 17 px */
  line-height: 1.65;
  color: var(--zb-tiefgruen);
  background: var(--zb-papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--zb-font-display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--zb-tiefgruen);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: 2.5rem;  font-weight: 300; line-height: 1.15; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { margin: 0 0 .8em; }
p:last-child { margin-bottom: 0; }

a { color: var(--zb-terra-dunkel); }
:focus-visible { outline: 2px solid var(--zb-terrakotta); outline-offset: 2px; }

.eyebrow {
  font-family: var(--zb-font-display);
  font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--zb-grau);
}
.sekundaer { font-size: .9375rem; line-height: 1.55; color: var(--zb-grau); }

/* =====================================================================
   Anwendungsrahmen — 100dvh, nur der Inhalt scrollt (Plan, Abschnitt 9)
   ===================================================================== */
/* display:flex sticht die hidden-Regel des Browsers aus - deshalb ausdrücklich */
.bildschirm[hidden] { display: none; }
.app {
  height: calc(100dvh - 2.9rem);
  min-height: 34rem;
  display: flex; flex-direction: column;
  background: var(--zb-papier);
}
.app-kopf {
  flex: none;
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem 1.25rem;
  background: var(--zb-papier);
  border-bottom: 1px solid var(--zb-linie);
}
.marke { display: flex; align-items: center; gap: .7rem; padding: 7px; text-decoration: none; }
.marke svg { display: block; height: 34px; width: auto; }
.marke .titel {
  font-family: var(--zb-font-display); font-weight: 300;
  font-size: 1.375rem; color: var(--zb-tiefgruen); letter-spacing: .01em;
}

.hauptnav { display: flex; gap: .2rem; margin-left: 1rem; scrollbar-width: none; }
.hauptnav::-webkit-scrollbar, .reiter::-webkit-scrollbar { display: none; }
.hauptnav a {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--zb-font-display); font-size: .9375rem; font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none; color: var(--zb-grau);
  padding: .4rem .75rem; border-radius: var(--zb-radius);
}
.hauptnav a:hover { color: var(--zb-tiefgruen); background: rgba(46,54,48,.05); }
.hauptnav a[aria-current="page"] { color: var(--zb-tiefgruen); box-shadow: inset 0 -2px 0 var(--zb-terrakotta); }
.hauptnav .zaehler {
  display: inline-block; min-width: 1.25rem; text-align: center;
  margin-left: .35rem; padding: 0 .3rem; border-radius: 99px;
  background: var(--zb-terra-dunkel); color: var(--zb-weiss);
  font-family: var(--zb-font-text); font-size: .75rem; font-weight: 600;
}

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.suche {
  display: flex; align-items: center; gap: .4rem;
  border: 1px solid var(--zb-linie); border-radius: 99px;
  background: var(--zb-weiss); padding: .3rem .8rem; min-width: 17rem;
}
.suche input {
  border: 0; outline: 0; background: transparent; flex: 1;
  font-family: var(--zb-font-text); font-size: .9375rem; color: var(--zb-tiefgruen);
}
.suche .lupe { color: var(--zb-grau); }
.benutzer {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9375rem; color: var(--zb-grau);
}
.benutzer .kreis {
  width: 2rem; height: 2rem; border-radius: 99px;
  background: var(--zb-salbei-dunkel); color: var(--zb-weiss);
  display: grid; place-items: center;
  font-family: var(--zb-font-display); font-weight: 600; font-size: .875rem;
}

.app-haupt { flex: 1; overflow: auto; }
/* Bezug fuer die Linie unter den Reitern. */
.reiter { position: relative; }
.bahn { max-width: 78rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
/* DIE HAENGEMAPPE (Ansage 26.10.2026, deutlicher gemacht).

   Wo Reiter stehen, liegt der Inhalt auf einer FLAECHE, und der Reiter
   sitzt daran: kein Abstand dazwischen, gemeinsamer Rand, unten die
   abgerundeten Ecken. Die Mappe ist breiter als ihr Reiter -- genau das
   macht eine Haengemappe aus, und genau daran erkennt man sie.

   Drei Toene uebereinander, und keiner davon ist neu: Papier traegt die
   Mappe, die Mappe traegt die Blaetter.

       Papier  #EFEADD   der Grund, auf dem alles liegt
       Mappe   #F7F4EC   die Flaeche unter den Reitern
       Blatt   #FFFFFF   was darauf liegt

   Sie gilt auf JEDEM Reiter und nicht nur dort, wo der Inhalt zufaellig
   eine Karte ist. Vorher endete sie am Reiter "Sitzungen", weil dort
   zwei Spalten beginnen und keine Karte. */
/* DER RAND BLEIBT STEHEN, WENN GEBLAETTERT WIRD (Ansage 26.10.2026).
   Vorher rollte die ganze Mappe mit dem Inhalt aus dem Bild, und oben
   blieb eine abgeschnittene Flaeche ohne Kante. Jetzt rollt der INHALT in
   der Mappe: Der Rahmen steht, wie der Deckel einer Akte steht, wenn man
   darin blaettert. */
.reiter ~ .app-haupt {
  display: flex; overflow: hidden;
  /* OHNE DAS SCROLLT DAS FENSTER. Ein Flex-Kind schrumpft nicht unter
     seine Inhaltsgroesse, solange `min-height` auf `auto` steht -- die
     Mappe drueckte die Anwendung ueber den Schirm, und man hatte zwei
     Rollbalken nebeneinander: den der Mappe und den des Fensters. */
  min-height: 0;
}
.reiter ~ .app-haupt > .bahn {
  /* DIE MAPPE IST IMMER GLEICH BREIT. Als Flex-Kind nimmt ein Block die
     Breite seines INHALTS -- auf dem Reiter "Sitzungen" war die Mappe
     dadurch schmaler als auf "Ueberblick", und beim Umschalten sprang die
     ganze Seite. Nachgemessen: linke Kante einmal bei 76px, einmal
     woanders. `width: 100%` gegen `max-width: 78rem` haelt sie fest. */
  width: 100%;
  overflow-y: auto; overscroll-behavior: contain;
  /* Ein schmaler, stiller Balken: Er gehoert zur Mappe und nicht ins
     Bild. Breit und grau war er das Auffaelligste auf der Seite.

     UND SEIN PLATZ IST IMMER DA. Ohne `scrollbar-gutter: stable` ist die
     Mappe bei langem Inhalt schmaler als bei kurzem -- beim Wechsel
     zwischen den Reitern sprang deshalb die ganze Seite um die Breite
     eines Rollbalkens hin und her (gemeldet 26.10.2026). */
  scrollbar-width: thin;
  scrollbar-color: rgba(46, 54, 48, .22) transparent;
  scrollbar-gutter: stable;
  margin: 0 auto 1.1rem;
  padding-top: 1.25rem;
  background: var(--zb-mappe);
  border: 1px solid var(--zb-linie); border-top: 0;
  /* Der Falz: Eine Haengemappe ist unten gefaltet, und dort ist das
     Material doppelt. Drei Pixel in einem dunkleren Ton -- keine neue
     Farbe, nur mehr davon. */
  border-bottom: 3px solid rgba(46, 54, 48, .16);
  border-radius: 0 0 var(--zb-radius) var(--zb-radius);
  /* Nur aussen unten ein Hauch Tiefe. Die helle Kante innen oben, die
     hier einmal stand, lief als heller Strich QUER DURCH DEN GEWAEHLTEN
     REITER und trennte ihn von seiner Mappe -- nachgemessen Pixel fuer
     Pixel: (243,241,236) auf Hoehe der Oberkante, ueber die ganze
     Breite. Eine Materialkante, die das Material zerschneidet, ist
     keine. */
  box-shadow: 0 10px 20px -16px rgba(46, 54, 48, .6);
}
/* Was auf der Mappe liegt, liegt wirklich darauf. */
.reiter ~ .app-haupt > .bahn .karte {
  box-shadow: 0 1px 2px rgba(46, 54, 48, .05);
}
/* Was auf der Mappe liegt, ist ein Blatt und keine zweite Mappe. */
.reiter ~ .app-haupt > .bahn { --zb-blatt: var(--zb-weiss); }
/* Eine Meldung steht oben auf der Mappe, mit Luft zum Reiter. */
.reiter ~ .app-haupt > .bahn > .meldung { margin-bottom: 1rem; }

/* =====================================================================
   Bausteine
   ===================================================================== */
.karte {
  background: var(--zb-blatt);
  border: 1px solid var(--zb-linie);
  border-radius: var(--zb-radius);
  padding: 1rem 1.1rem;
}
.karte-kopf {
  display: flex; align-items: baseline; gap: .75rem;
  margin-bottom: .6rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--zb-linie-2);
}
.karte-kopf h3 { flex: 1; }
/* Was im Kopf nach rechts gehoert -- eine Marke neben einer Beschriftung,
   die selbst keine Ueberschrift ist. */
.karte-kopf > .rechts { margin-left: auto; }

/* Der Fuss der Karte: Zustand und Handlung stehen am Ende und rechts, nicht
   vor dem ersten Wort. Gebraucht werden sie, wenn gelesen ist. */
.karte-fuss {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: .5rem .75rem; margin-top: .9rem;
}
/* Was am Fuss haengt, klappt nach OBEN auf -- nach unten liefe es aus der
   Karte heraus und beim letzten Element der Seite aus dem Bild. */
.karte-fuss .chip-inhalt, .karte-fuss .menuefeld {
  top: auto; bottom: calc(100% + .4rem); left: auto; right: 0;
}
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.knopf {
  font-family: var(--zb-font-text); font-size: .9375rem; font-weight: 600;
  /* Ein Knopf, der ein Link ist, traegt sonst die Unterstreichung eines
     Links -- und sieht aus, als waere er versehentlich markiert. */
  text-decoration: none; display: inline-block;
  padding: .4rem .95rem; border-radius: var(--zb-radius); cursor: pointer;
  border: 1px solid var(--zb-salbei-dunkel);
  background: var(--zb-salbei-dunkel); color: var(--zb-weiss);
}
.knopf:hover { background: var(--zb-tiefgruen); border-color: var(--zb-tiefgruen); }
.knopf.still { background: transparent; color: var(--zb-tiefgruen); border-color: var(--zb-linie); }
.knopf.still:hover { background: rgba(46,54,48,.05); color: var(--zb-tiefgruen); }

.marke-feld {
  display: inline-block; padding: .05rem .5rem; border-radius: 99px;
  font-size: .8125rem; font-weight: 600; line-height: 1.5;
  background: rgba(109,122,113,.16); color: var(--zb-tiefgruen);
}
.marke-feld.warn { background: rgba(186,128,106,.22); color: var(--zb-tiefgruen); box-shadow: inset 0 0 0 1px var(--zb-terrakotta); }
.marke-feld.fertig { background: var(--zb-salbei-dunkel); color: var(--zb-weiss); }
/* =====================================================================
   Eingeklappt: Hauptnavigation, Benutzer, Handlungen am Chip
   21.10.2026.

   Drei Dinge standen dauerhaft im Kopf, die beim Arbeiten nicht gebraucht
   werden: die Navigation (zwei Zeilen), der eigene Name neben den eigenen
   Initialen, und zwei Knoepfe neben einer Ueberschrift. Sie stecken jetzt
   hinter einem Griff.

   `details` und kein eigenes Fenster: Es traegt sich selbst, auch ohne
   JavaScript, Esc schliesst es, und der Browser kuemmert sich um die
   Tastatur. Dass es offen ist, sieht man am Griff.
   ===================================================================== */
.hauptnav, .benutzermenue, .chip-tat { position: relative; }
.hauptnav > summary, .benutzermenue > summary, .chip-tat > summary {
  list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: .5rem; border-radius: var(--zb-radius);
}
.hauptnav > summary::-webkit-details-marker,
.benutzermenue > summary::-webkit-details-marker,
.chip-tat > summary::-webkit-details-marker { display: none; }

.hauptnav > summary {
  padding: .4rem .65rem; color: var(--zb-tiefgruen);
  font-family: var(--zb-font-display); font-weight: 600; font-size: .9375rem;
}
.hauptnav > summary:hover { background: rgba(46,54,48,.05); }
/* Drei Striche. Gezeichnet und nicht als Zeichen gesetzt -- ein Glyph
   haengt an der Schrift, und die liegt hier im Abbild. */
.hauptnav .balken {
  width: 1.1rem; height: .7rem; flex: none;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
  position: relative;
}
.hauptnav .balken::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px);
  border-top: 2px solid currentColor;
}
.hauptnav[open] .balken { opacity: .5; }

.benutzermenue > summary { padding: .15rem; }
.chip-tat > summary { padding: 0; }
.chip-tat .marke-feld { cursor: pointer; }

/* Das Feld haengt unter dem Griff und schiebt nichts weg. Rechts
   ausgerichtet, wo der Griff rechts sitzt -- sonst liefe es aus dem Bild. */
.menuefeld {
  position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0;
  min-width: 12rem; display: flex; flex-direction: column; gap: .15rem;
  padding: .45rem; border-radius: var(--zb-radius);
  background: var(--zb-karte); border: 1px solid var(--zb-linie);
  box-shadow: 0 8px 24px rgba(46,54,48,.14);
}
.benutzermenue .menuefeld { left: auto; right: 0; }
.menuefeld a:not(.knopf) {
  display: block; padding: .5rem .6rem; border-radius: var(--zb-radius);
  text-decoration: none; color: var(--zb-tiefgruen);
  font-family: var(--zb-font-display); font-weight: 600; font-size: .9375rem;
}
.menuefeld a:not(.knopf):hover { background: rgba(46,54,48,.06); }
.menuefeld a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--zb-terrakotta); }
.menuefeld p { margin: .2rem .6rem .5rem; }
.menuefeld .knopf, .menuefeld form { width: 100%; }
.menuefeld .knopf { width: 100%; text-align: center; }

/* Reiter „Material" — Fotos, Befunde, Briefe.
 *
 * Ein Gitter und keine Liste: Was hier liegt, erkennt man am Bild und nicht
 * am Dateinamen. Auf dem Handy eine Spalte, dann zwei, dann drei -- die
 * Breite entscheidet und nicht ein Breakpoint, deshalb `auto-fill`.
 */
.materialgitter {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.materialstueck { margin: 0; }
.materialstueck img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--zb-radius); border: 1px solid var(--zb-linie);
  background: var(--zb-grau-hell); display: block;
}
.materialstueck .kein-bild {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--zb-radius); border: 1px dashed var(--zb-linie);
  background: var(--zb-grau-hell); color: var(--zb-salbei-dunkel);
  font-family: var(--zb-font-display); font-weight: 600; letter-spacing: .06em;
  text-decoration: none;
}
.materialstueck figcaption { margin-top: .4rem; font-size: .9375rem; line-height: 1.45; }
/* Entferntes bleibt stehen und sieht entfernt aus. Eine Akte, aus der etwas
   spurlos verschwindet, ist keine. */
.materialstueck.fort { opacity: .6; }

/* Der Zustand als Bedienelement.
 *
 * Wo ein Zustand sich aendern laesst, geschieht das AN DIESER STELLE und
 * nicht am Ende eines langen Formulars: Der Chip sagt, wo der Eintrag
 * steht, und traegt den naechsten Schritt gleich mit. Bei einem
 * Sitzungsprotokoll ueber zwei Bildschirmseiten ist das Ende weit weg, am
 * Handy sehr weit.
 *
 * Der Knopf gehoert zu einem Formular, das weiter unten steht (`form="..."`);
 * abgeschickt wird also alles, was dort eingetragen wurde. Fehlt dabei ein
 * Pflichtfeld -- die Begruendung bei einer Korrektur --, springt der Browser
 * von selbst dorthin. Das ist kein Umweg, sondern die Antwort auf die Frage,
 * warum nichts passiert ist.
 */
.marke-feld.zustand {
  border: 0; cursor: pointer; font-family: inherit;
  padding: .25rem .7rem;
}
/* Dass hier etwas dahinterliegt, zeigt sich beim Hinfassen und nicht im
   Namen: Der Chip heisst weiter "Entwurf" und nicht "Entwurf aendern". */
.marke-feld.zustand::after {
  content: "›"; margin-left: .35rem; opacity: .55; font-weight: 700;
}
.marke-feld.zustand:hover::after, .marke-feld.zustand:focus-visible::after { opacity: 1; }
.marke-feld.zustand.warn:hover { background: rgba(186,128,106,.34); }
.marke-feld.zustand.fertig:hover { background: var(--zb-tiefgruen); }
.marke-feld.zustand:focus-visible { outline: 2px solid var(--zb-terrakotta); outline-offset: 2px; }

/* Im Zustandsfenster: die Handlung links, der Rueckweg daneben. Abbrechen
   ist kein Nebenausgang -- es steht gleichberechtigt da, nur leiser. */
.menuezeile { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
dialog.zustandsmenue { max-width: 32rem; }

/* Der Satz, der frueher neben dem Knopf stand. Er erklaert die Sache und
   nicht mehr den Knopf, also steht er ruhiger da. */
.abschluss-hinweis { margin-top: 1rem; }

/* Ein Kartenkopf ohne Ueberschrift: Dann haelt er die Marken nach links und
   braucht die Linie darunter nicht -- es gibt nichts zu trennen. */
.karte-kopf:not(:has(h3)) {
  border-bottom: 0; padding-bottom: 0; margin-bottom: .2rem;
  justify-content: flex-start;
}

/* Was eine Maschine geschrieben hat, sieht man, ohne es zu suchen -- aber es
   schreit auch nicht. Keine Warnfarbe: Der Text ist nicht falsch, er ist
   nur nicht von einem Menschen. */
.marke-feld.maschine {
  background: transparent; color: var(--zb-salbei-dunkel);
  box-shadow: inset 0 0 0 1px var(--zb-salbei);
  font-weight: 600; letter-spacing: .04em;
}

/* ---------------------------------------------------------------- *
 * Der Ueberblick: Eckdaten als Tabelle, Herkunft als Hinweis.
 * ---------------------------------------------------------------- */
.ki-zeile { margin: 0; }
.kopf-knoepfe { display: flex; align-items: center; gap: .5rem; }

/* Das Aenderungsfenster. Die Anzeige darf dadurch Anzeige bleiben. */
dialog.editor {
  width: min(44rem, 92vw); max-height: 85vh; overflow-y: auto;
  padding: 1.5rem 1.75rem; border: 0; border-radius: var(--zb-radius);
  background: var(--zb-karte); color: var(--zb-tiefgruen);
  box-shadow: 0 18px 50px rgba(46,54,48,.26);
}
dialog.editor::backdrop { background: rgba(46,54,48,.42); }
dialog.editor h3 {
  font-family: var(--zb-font-display); font-size: 1.25rem; margin: 0 0 .25rem;
}
dialog.editor .feldzeile { margin-top: 1rem; }
dialog.editor textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--zb-font-text); font-size: .9375rem; line-height: 1.6;
}
dialog.editor code {
  font-size: .8125rem; background: rgba(46,54,48,.06);
  padding: .05rem .3rem; border-radius: 3px;
}


/* Alles Erklaerende hinter dem Chip. Ein Absatz, der immer dasteht, wird nach
   dem zweiten Lesen uebersehen und kostet trotzdem jedes Mal die Hoehe, die
   dem Inhalt fehlt. Ohne JavaScript: <details> mit dem Chip als <summary>. */
.chip-hinweis { position: relative; }
.chip-hinweis summary { list-style: none; cursor: pointer; }
.chip-hinweis summary::-webkit-details-marker { display: none; }
.chip-hinweis[open] summary .marke-feld { box-shadow: inset 0 0 0 2px var(--zb-salbei); }
.chip-inhalt {
  position: absolute; z-index: 20; top: calc(100% + .4rem); right: 0;
  width: min(26rem, 80vw); padding: .85rem 1rem;
  background: var(--zb-weiss); border: 1px solid var(--zb-linie);
  border-radius: var(--zb-radius); box-shadow: 0 6px 20px rgba(46,54,48,.14);
  font-size: .875rem; line-height: 1.55; color: var(--zb-grau);
}
.chip-inhalt p { margin: 0 0 .55rem; }
.chip-inhalt p:last-child { margin-bottom: 0; }

/* Der Ueberblick soll auf einen Bildschirm passen: Tabelle links, Text
   rechts, und die Abstaende enger als im langen Sitzungsprotokoll. */
.ueberblick-raster {
  display: grid; gap: 0 2.25rem; align-items: start;
  grid-template-columns: minmax(15rem, 21rem) 1fr;
  margin-top: .6rem;
}
.ueberblick-raster .abschnitt[data-feld="tabelle"] { grid-column: 1; grid-row: 1 / span 2; }
.ueberblick-raster .abschnitt[data-feld="wichtig"] { grid-column: 2; grid-row: 1; }
.ueberblick-raster .abschnitt[data-feld="entwicklung"] { grid-column: 2; grid-row: 2; }
.ueberblick-raster h4 {
  margin-top: 1.1rem; font-size: .9375rem;
}
.ueberblick-raster .abschnitt[data-feld="tabelle"] h4,
.ueberblick-raster .abschnitt[data-feld="wichtig"] h4 { margin-top: 0; }
.ueberblick-raster h4::before { width: 1.5rem; height: 2px; margin-bottom: .4rem; }
/* Keine Lesebreite hier. Die 62 Zeichen sind fuer langen Fliesstext da --
   ein Stichpunkt von zwoelf Woertern soll die Spalte nutzen, die er hat,
   und nicht mittendrin umbrechen, waehrend rechts der Kasten leer bleibt. */
.ueberblick-raster .fliess {
  font-size: .9375rem; line-height: 1.6; max-width: none;
}
.ueberblick-raster .stichpunkte li, .ueberblick-raster li { margin-bottom: .3rem; }
.ueberblick-raster table.eckdaten td,
.ueberblick-raster table.eckdaten th { padding: .22rem .7rem .22rem 0; font-size: .875rem; }

@media (max-width: 1100px) {
  .ueberblick-raster { grid-template-columns: 1fr; }
  .ueberblick-raster .abschnitt { grid-column: 1 !important; grid-row: auto !important; }
  .ueberblick-raster .abschnitt + .abschnitt h4 { margin-top: 1.4rem; }
}

/* Zum Nachschlagen, nicht zum Lesen: schmale erste Spalte, klare Zeilen. */
table.eckdaten { width: 100%; border-collapse: collapse; max-width: 48rem; }
table.eckdaten th {
  text-align: left; vertical-align: top; white-space: nowrap;
  width: 1%; padding: .3rem 1rem .3rem 0;
  font-family: var(--zb-font-display); font-size: .8125rem; font-weight: 600;
  color: var(--zb-salbei-dunkel);
}
table.eckdaten td {
  vertical-align: top; padding: .3rem 0;
  font-size: .9375rem; line-height: 1.5; color: var(--zb-tiefgruen);
}
table.eckdaten tr + tr th, table.eckdaten tr + tr td {
  border-top: 1px solid var(--zb-linie-2);
}
/* Eine Zahl, die die Anwendung gezaehlt hat und nicht das Modell. Der
   gepunktete Strich ist der uebliche Hinweis auf eine Erlaeuterung --
   dort steht, was im Text des Ueberblicks stand. */
table.eckdaten td.gezaehlt {
  text-decoration: underline dotted var(--zb-grau-hell);
  text-underline-offset: .2rem; cursor: help;
}
/* Ein Sprungziel ohne Ueberschrift: Die Gliederung verweist auf die
   Eckdaten, die seit dem 26.10.2026 keine Ueberschrift mehr tragen. */
.sprungziel { display: block; height: 0; }

table.liste { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.liste th {
  text-align: left; font-family: var(--zb-font-display); font-weight: 600;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--zb-grau); padding: 0 .6rem .4rem 0; border-bottom: 1px solid var(--zb-linie);
}
table.liste td { padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--zb-linie-2); vertical-align: top; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste td.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--zb-grau); }

/* Zustandskette */
.kette { display: flex; align-items: stretch; gap: .5rem; margin: 1rem 0 .25rem; }
.kette .glied {
  flex: 1; min-width: 0;
  background: var(--zb-karte); border: 1px solid var(--zb-linie);
  border-radius: var(--zb-radius); padding: .85rem .9rem;
  display: flex; flex-direction: column; gap: .15rem;
  text-align: left;
  font: inherit; color: inherit; cursor: pointer;
}
.kette .glied:hover { border-color: var(--zb-salbei); }
.kette .zahl {
  font-family: var(--zb-font-display); font-weight: 300;
  font-size: 2.25rem; line-height: 1.1; color: var(--zb-tiefgruen);
  font-variant-numeric: tabular-nums;
}
.kette .was {
  font-family: var(--zb-font-display); font-weight: 600; font-size: .875rem;
  line-height: 1.3; color: var(--zb-tiefgruen);
}
.kette .tun { font-size: .8125rem; line-height: 1.4; color: var(--zb-grau); }
.kette .glied.handeln { border-color: var(--zb-terrakotta); border-width: 1px; box-shadow: inset 0 -3px 0 var(--zb-terrakotta); }
.kette .glied.handeln .zahl { color: var(--zb-terra-dunkel); }
.kette .glied.fertig { background: var(--zb-salbei-dunkel); border-color: var(--zb-salbei-dunkel); }
.kette .glied.fertig .zahl, .kette .glied.fertig .was { color: var(--zb-weiss); }
.kette .glied.fertig .tun { color: var(--zb-papier); }
.kette .glied.leer .zahl { color: var(--zb-grau-hell); }
.kette .pfeil { align-self: center; color: var(--zb-grau-hell); font-size: 1.1rem; flex: none; }

.hinweisleiste {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .75rem; padding: .55rem .9rem;
  border: 1px solid var(--zb-terrakotta); border-radius: var(--zb-radius);
  background: rgba(186,128,106,.10);
  font-size: .9375rem;
}
.hinweisleiste .wort { font-weight: 600; color: var(--zb-tiefgruen); }

/* Reiter der Akte */
/* Die Reiter sitzen AM INHALT und nicht in einer eigenen Leiste darueber:
   Sie gehoeren zu dem, was sie umschalten. Deshalb dieselbe Bahn, dieselbe
   Breite, und die Linie darunter ist die Oberkante des Inhalts. */
.reiter {
  flex: none; display: flex; gap: .1rem;
  max-width: 78rem; width: 100%; margin: 0 auto;
  padding: .5rem 1.25rem 0;
  background: transparent;
  overflow-x: auto; scrollbar-width: none;
}
/* DIE OBERKANTE DER MAPPE, und sie gehoert nach UNTEN.
   Hier stand `position: absolute` ohne `top` oder `bottom` -- dann landet
   ein Pseudoelement an seiner statischen Stelle, und die ist bei diesem
   Flex-Container OBEN. Die Linie lief also ueber den Reitern quer durchs
   Bild, statt die Kante zu sein, an der sie haengen. Gemeldet am
   26.10.2026, zweimal: Beim ersten Mal habe ich die Unterkante des
   Aktendeckels entfernt und diese hier uebersehen. */
.reiter::after {
  content: ""; position: absolute; left: 0; right: 0; top: auto; bottom: 0;
  border-bottom: 1px solid var(--zb-linie);
}
.reiter button {
  position: relative; z-index: 1;
  font-family: var(--zb-font-display); font-weight: 600; font-size: .9375rem;
  letter-spacing: .03em; white-space: nowrap;
  background: transparent; border: 0; cursor: pointer;
  color: var(--zb-grau); padding: .55rem .85rem .5rem;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--zb-radius) var(--zb-radius) 0 0;
  margin-bottom: -1px;
}
/* Der gewaehlte Reiter haengt am Inhalt: gleiche Flaeche, gleiche Linie,
   und unten offen. Das ist der ganze Unterschied zwischen einer Leiste
   ueber dem Inhalt und einem Reiter an ihm. */
.reiter button[aria-selected="true"] {
  background: var(--zb-mappe); border-color: var(--zb-linie);
}
/* Die ungewaehlten Reiter sind flache Fahnen und keine blanken Woerter:
   In einer Registratur sieht man die anderen Mappen hinter der offenen.
   Sehr zurueckhaltend -- sie sollen dastehen, nicht mitreden. */
.reiter button:not([aria-selected="true"]) {
  background: rgba(255, 255, 255, .32);
  border-color: rgba(46, 54, 48, .07);
  /* Sie STEHEN auf der Kante und ragen nicht hinein: Das eine Pixel
     Ueberstand gehoert allein der gewaehlten Mappe, sonst franst die
     Linie unter der Leiste aus -- sieben Fahnen, sieben Versaetze. */
  border-bottom: 1px solid rgba(46, 54, 48, .07);
  margin-bottom: 0;
}
.reiter button:hover { color: var(--zb-tiefgruen); }
.reiter button:not([aria-selected="true"]):hover {
  background: rgba(255, 255, 255, .6);
}
.reiter button[aria-selected="true"] {
  color: var(--zb-tiefgruen);
  /* Die Reiterfahne: oben der Terrakottastreifen, innen oben die helle
     Kante des Materials. Drei Pixel statt zwei -- der gewaehlte Reiter
     traegt die Akte, das darf man sehen. */
  box-shadow: inset 0 3px 0 var(--zb-terrakotta),
              inset 0 4px 0 rgba(255, 255, 255, .5);
  padding-top: .62rem;
}

/* Die Register IN der Mappe -- die drei Teile der Verwaltung.
   Sie sind KEINE zweite Reiterreihe: Zwei gleich starke Reihen
   uebereinander waeren zwei Ebenen, die aussehen wie eine. Also
   Karteikarten auf dem Blatt, flach, mit einem Halbsatz darunter, der
   sagt, was dort liegt -- die drei Namen allein tragen es nicht. */
.register {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  margin-bottom: 1.1rem;
}
.register a {
  display: block; padding: .6rem .75rem;
  border: 1px solid var(--zb-linie); border-radius: var(--zb-radius);
  background: var(--zb-blatt); text-decoration: none;
  color: var(--zb-tiefgruen);
}
.register a:hover { border-color: var(--zb-salbei); }
.register a b {
  font-family: var(--zb-font-display); font-size: .9375rem; font-weight: 600;
}
.register a .sekundaer { display: block; font-size: .8125rem; line-height: 1.35; }
/* Das gewaehlte Register traegt die Marke der Akte und liegt vorn. */
.register a[aria-current="page"] {
  border-color: var(--zb-salbei-dunkel);
  box-shadow: inset 0 2px 0 var(--zb-terrakotta);
}

/* Aktendeckel */
/* Der Deckel laeuft ueber die ganze Breite, sein INHALT aber in derselben
   Bahn wie Reiter und Karten: Sonst beginnt der Name der Klientin auf einem
   breiten Schirm woanders als die Akte darunter. Das `max()` haelt den
   Innenabstand auf schmalen Schirmen bei 1.25rem. */
.deckel {
  flex: none; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem max(1.25rem, calc((100% - 78rem) / 2 + 1.25rem)) .7rem;
  background: var(--zb-papier);
  /* KEINE Linie unter dem Deckel (Ansage 26.10.2026): Sie lief quer ueber
     die ganze Breite, dicht ueber den Reitern, und zerschnitt genau die
     Stelle, an der die Mappe an ihrem Reiter haengt. Deckel und Mappe
     trennt jetzt der Farbunterschied -- Papier gegen Mappe. */
}
.deckel .name { font-family: var(--zb-font-display); font-size: 1.5rem; font-weight: 400; }
/* Das Alter in Klammern: eine Angabe ueber die Klientin, aber keine, die den
   Namen ueberstimmt -- deshalb kleiner und ruhiger. Der Zeiger sagt, dass
   etwas dahintersteht (die Zeile, aus der die Zahl stammt). */
.deckel .alter { font-size: .75em; color: var(--zb-grau); cursor: help; }
.deckel .meta { font-size: .9375rem; color: var(--zb-grau); }
.deckel .rechts { margin-left: auto; display: flex; gap: .5rem; }

/* Zwei Spalten: Liste links, Inhalt rechts */
.zweispalt { display: grid; grid-template-columns: 17rem 1fr; gap: 1.25rem; }
.spaltenliste { display: flex; flex-direction: column; gap: .3rem; }
.spaltenliste button {
  text-align: left; font: inherit; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--zb-radius);
  padding: .5rem .65rem; color: var(--zb-tiefgruen);
}
.spaltenliste button:hover { background: rgba(46,54,48,.05); }
.spaltenliste button[aria-current="true"] { background: var(--zb-karte); border-color: var(--zb-linie); box-shadow: inset 3px 0 0 var(--zb-terrakotta); }
.spaltenliste .datum { display: block; font-size: .9375rem; font-weight: 600; }
.spaltenliste .zeile { display: block; font-size: .8125rem; color: var(--zb-grau); }

/* Die Liste bleibt stehen, waehrend rechts der Text laeuft. Ein langes
   Protokoll ist sonst genau das, wogegen die Sprungmarken gedacht waren:
   Wer unten im Text steht, sieht die Gliederung nicht mehr.

   align-self: start ist noetig und nicht Geschmack. Ein Rasterelement wird
   sonst auf die volle Zeilenhoehe gestreckt, und was so hoch ist wie seine
   Zeile, hat keinen Weg zu kleben -- es steht oben und sieht aus, als taete
   es nichts.

   max-height und overflow fangen den anderen Fall: Eine Akte mit elf
   Sitzungen und sieben Sprungmarken ist hoeher als mancher Bildschirm. Dann
   rollt die Spalte in sich, statt unten abgeschnitten zu werden. */
.zweispalt > .spaltenliste {
  position: sticky;
  top: 1rem;
  align-self: start;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  /* Luft fuer den eigenen Rollbalken, damit er nicht auf der Schrift liegt. */
  padding-right: .25rem;
}

/* Transkript neben Eintrag */
.gegenueber { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.feld { margin-bottom: .9rem; }
.feld:last-child { margin-bottom: 0; }
.feld .bezeichner {
  font-family: var(--zb-font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--zb-grau);
  display: block; margin-bottom: .15rem;
}
.rohtext { font-size: .9375rem; line-height: 1.6; color: var(--zb-grau); }

.freigabeleiste {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-top: 1rem; padding: .75rem .9rem;
  border: 1px solid var(--zb-linie); border-radius: var(--zb-radius);
  background: var(--zb-papier);
}
.freigabeleiste .text { flex: 1; min-width: 14rem; font-size: .9375rem; color: var(--zb-grau); }

/* Verlauf */
.hypothese { border-left: 3px solid var(--zb-salbei); padding-left: .85rem; margin-bottom: 1.1rem; }
.hypothese:last-child { margin-bottom: 0; }
.hypothese .satz { font-size: 1.0625rem; margin-bottom: .35rem; }
.beleg { font-size: .9375rem; line-height: 1.55; margin-bottom: .2rem; }
.beleg .art {
  font-family: var(--zb-font-display); font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  display: inline-block; min-width: 6.5rem; color: var(--zb-grau);
}
.beleg.gegen .art { color: var(--zb-terra-dunkel); }
.quelle { color: var(--zb-terra-dunkel); text-decoration: underline; text-underline-offset: 2px; }

.anmerkung {
  background: rgba(186,128,106,.10); border: 1px solid rgba(186,128,106,.35);
  border-radius: var(--zb-radius); padding: .6rem .75rem; margin-bottom: .6rem;
  font-size: .9375rem;
}
.anmerkung .wer { font-size: .8125rem; color: var(--zb-grau); display: block; }

/* Protokoll */
.kette-eintrag {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--zb-linie-2);
  font-size: .9375rem;
}
.pruef { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .8125rem; color: var(--zb-grau); word-break: break-all; }
.siegel {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .9rem; border-radius: var(--zb-radius);
  background: var(--zb-salbei-dunkel); color: var(--zb-weiss); font-size: .9375rem;
}
.siegel .haken { font-size: 1.4rem; }

/* Eingangskorb */
.posten { display: grid; grid-template-columns: 11rem 1fr 13rem; gap: 1rem; align-items: start; }
.posten .zeitspalte { font-variant-numeric: tabular-nums; }
.posten .zeitspalte .uhr { font-family: var(--zb-font-display); font-size: 1.25rem; }
.posten .knoepfe { display: flex; flex-direction: column; gap: .4rem; }
.auswahl {
  width: 100%; font: inherit; font-size: .9375rem;
  padding: .35rem .5rem; border: 1px solid var(--zb-linie);
  border-radius: var(--zb-radius); background: var(--zb-weiss); color: var(--zb-tiefgruen);
}

/* Handy */
.handy-buehne { display: grid; grid-template-columns: 20rem 1fr; gap: 2rem; align-items: start; }
.handy {
  width: 20rem; height: 40rem; border-radius: 2.2rem;
  border: 10px solid var(--zb-tiefgruen); background: var(--zb-papier);
  padding: 1.25rem 1.1rem; display: flex; flex-direction: column; overflow: hidden;
}
.aufnahmeknopf {
  width: 10rem; height: 10rem; border-radius: 99px; margin: 0 auto;
  border: 0; cursor: pointer;
  background: var(--zb-terra-dunkel); color: var(--zb-weiss);
  font-family: var(--zb-font-display); font-size: 1.125rem; font-weight: 600;
  display: grid; place-items: center; line-height: 1.25;
}
.aufnahmeknopf:hover { background: #7d4f3b; }
.pegel { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 2.5rem; margin: 1rem 0; }
.pegel i { width: 4px; background: var(--zb-salbei); border-radius: 2px; display: block; }

/* Genogramm: siehe den Block am Ende dieser Datei. Hier stand bis zum
   28.10.2026 eine zweite Fassung aus der Zeit, als der Reiter noch leer
   war -- sie blies die Zeichnung auf die volle Breite auf. Zwei Bloecke
   fuer dieselbe Klasse an zwei Stellen zieht irgendwann jemand nur halb
   nach. */

/* Material */
.material { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.material .stueck {
  border: 1px solid var(--zb-linie); border-radius: var(--zb-radius);
  background: var(--zb-karte); padding: .6rem .7rem; font-size: .875rem;
}
.material .stueck .art { font-size: 1.5rem; color: var(--zb-salbei); }

.abstand { margin-top: 1.25rem; }
.abstand-klein { margin-top: .75rem; }

/* Auf dem Handy scrollt die Seite und nicht der Rahmen; die Suche zieht sich
   hinter die Akte zurück, damit in der Kopfzeile nichts überläuft. */
@media (max-width: 820px) {
  .app { height: auto; min-height: 0; }
  .app-haupt { overflow: visible; }
  /* Am Handy rollt die SEITE und nicht die Mappe: Ein Rollbereich im
     Rollbereich ist dort eine Falle -- der Daumen trifft mal das eine,
     mal das andere. Die Mappe bleibt als Flaeche, nur ohne eigenen
     Rollbereich. */
  .reiter ~ .app-haupt { display: block; overflow: visible; }
  .reiter ~ .app-haupt > .bahn { overflow-y: visible; }
  .app-kopf { flex-wrap: wrap; row-gap: .3rem; padding: .5rem .9rem; }
  .marke { padding: 5px; }
  .marke svg { height: 28px; }
  .marke .titel { font-size: 1.125rem; }
  .hauptnav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .hauptnav a { padding: .35rem .5rem; }
  .kopf-rechts { margin-left: auto; }
  .suche { display: none; }
  .bahn { padding: 1rem .9rem 2.5rem; }
  .deckel { padding: .7rem .9rem .6rem; }
  .deckel .rechts { margin-left: 0; width: 100%; }
  .reiter { padding: 0 .9rem; }
  h1 { font-size: 2rem; }
}

@media (max-width: 1100px) {
  .kette { flex-wrap: wrap; }
  .kette .glied { flex: 1 1 9rem; }
  .kette .pfeil { display: none; }
  .zweispalt, .gegenueber, .raster-2, .raster-3, .handy-buehne { grid-template-columns: 1fr; }
  /* Einspaltig steht die Liste ueber dem Text. Klebte sie, haetten wir einen
     Block, der den halben Bildschirm belegt und mit nach unten faehrt. */
  .zweispalt > .spaltenliste {
    position: static; max-height: none; overflow-y: visible; padding-right: 0;
  }
  .material { grid-template-columns: repeat(2, 1fr); }
  .posten { grid-template-columns: 1fr; }
  .suche { min-width: 10rem; }
}

/* =====================================================================
   Anmeldung — zweigeteilt wie beim Controlling: links Logo und Zitat auf
   farbiger Flaeche, rechts allein das Formular. Darunter steht, wo man
   ist: „Dokumentation der Sitzungen".
   ===================================================================== */
.anmeldung { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }
.anmeldung .seite {
  background: var(--zb-salbei-dunkel); color: var(--zb-papier);
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem 3.5rem; gap: 1.5rem;
}
.anmeldung .seite svg { height: 64px; width: auto; }
.anmeldung .seite .zitat {
  font-family: var(--zb-font-display); font-weight: 300; font-size: 1.75rem;
  line-height: 1.3; text-wrap: balance;
}
.anmeldung .seite .wo { font-size: 1rem; color: var(--zb-papier); opacity: .85; }
.anmeldung .formular {
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem; max-width: 32rem;
}
.anmeldung .formular h1 { font-size: 2rem; margin-bottom: .3rem; }
.feldzeile { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .9rem; }
.feldzeile label {
  font-family: var(--zb-font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--zb-grau);
}
.feldzeile input, .feldzeile textarea, .feldzeile select {
  font: inherit; font-size: 1.0625rem; padding: .5rem .7rem;
  border: 1px solid var(--zb-linie); border-radius: var(--zb-radius);
  background: var(--zb-weiss); color: var(--zb-tiefgruen);
}
.meldung {
  border: 1px solid var(--zb-terrakotta); background: rgba(186,128,106,.12);
  border-radius: var(--zb-radius); padding: .6rem .9rem; margin-bottom: 1rem;
  font-size: .9375rem;
}
.meldung.gut { border-color: var(--zb-salbei); background: rgba(109,122,113,.12); }

/* Formulare in der Akte */
.eingabe { display: grid; gap: .9rem; }
.eingabe textarea { min-height: 4.5rem; resize: vertical; }
.knopfzeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.leer {
  text-align: center; padding: 3rem 1rem; color: var(--zb-grau);
  border: 1px dashed var(--zb-linie); border-radius: var(--zb-radius);
}
.fruehere {
  border-left: 3px solid var(--zb-linie); padding-left: .85rem;
  margin-top: .8rem; font-size: .9375rem;
}
.fruehere summary {
  cursor: pointer; color: var(--zb-terra-dunkel);
  font-family: var(--zb-font-display); font-weight: 600; font-size: .875rem;
}
/* ---------------------------------------------------------------- *
 * Gliederung links, Fliesstext rechts.
 *
 * Ein Eintrag wird gelesen, bevor er geaendert wird. Deshalb steht er als
 * Text da und nicht als Formular: Eingabefelder laden zum Tippen ein, und
 * in einer anfuegenden Akte ist jedes Tippen ein neuer Eintrag.
 * ---------------------------------------------------------------- */
.sprungmarken {
  display: flex; flex-direction: column;
  margin: .15rem 0 .35rem .85rem;
  border-left: 2px solid var(--zb-linie);
  padding-left: .6rem;
}
.sprungmarken a {
  font-size: .8125rem; line-height: 1.45; padding: .18rem 0;
  color: var(--zb-grau); text-decoration: none;
}
.sprungmarken a:hover,
.sprungmarken a:focus-visible { color: var(--zb-terra-dunkel); text-decoration: underline; }

.protokoll { margin-top: 1rem; }
/* Zweiter Anlauf. Erst war die Ueberschrift kleiner als der Text, den sie
   anfuehrt (0.9375 gegen 1rem); dann versal und gesperrt bei 0.75rem -- das
   las sich als Kleingedrucktes, also wieder leiser statt lauter. Eine
   Abschnittsueberschrift in einem langen Text braucht das Naheliegende:
   groesser, fetter, dunkler als der Fliesstext.

   Dazu ein kurzer Terrakottastrich darueber. Terrakotta als Flaeche ist nach
   der CI erlaubt, als Text auf hellem Grund nicht -- deshalb ein Strich und
   keine farbige Schrift. */
.protokoll h4 {
  font-family: var(--zb-font-display);
  font-size: 1.125rem; font-weight: 700; line-height: 1.3;
  color: var(--zb-tiefgruen);
  margin: 2.25rem 0 .5rem;
  /* Damit die Sprungmarke die Ueberschrift nicht an den Rand klebt. */
  scroll-margin-top: 1.25rem;
}
.protokoll h4::before {
  content: ""; display: block;
  width: 2.25rem; height: 3px; border-radius: 2px;
  background: var(--zb-terrakotta);
  margin-bottom: .6rem;
}
.protokoll > :first-child h4, .protokoll > h4:first-child { margin-top: 0; }

/* Stichpunkte im Ueberblick: eine Zeile, ein Punkt. */
.stichpunkte .fliess ul { margin: 0; padding-left: 1.15rem; }
.stichpunkte .fliess li { margin-bottom: .4rem; line-height: 1.6; }
.stichpunkte .fliess li::marker { color: var(--zb-terrakotta); }
.stichpunkte .fliess li:last-child { margin-bottom: 0; }
.protokoll h4:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.protokoll .fliess {
  /* pre-wrap: Absaetze, die jemand beim Diktieren gesetzt hat, bleiben
     Absaetze. Ohne das waere ein Protokoll eine einzige Wand. */
  white-space: pre-wrap;
  font-size: 1rem; line-height: 1.75; color: var(--zb-tiefgruen);
  max-width: 62ch;
}

/* ---------------------------------------------------------------- *
 * An Ort und Stelle aendern.
 *
 * Die Felder standen frueher gesammelt unter dem Text. Wer den dritten
 * Abschnitt aendern wollte, las oben und tippte unten. Jetzt steht das Feld
 * da, wo der Abschnitt steht -- gleiche Breite, gleiche Schrift, gleicher
 * Zeilenabstand, damit beim Umschalten nichts springt.
 * ---------------------------------------------------------------- */
.bearbeitungshinweis { margin: 0 0 .25rem; }

.bearbeitbar .fliess {
  cursor: text; border-radius: var(--zb-radius);
  margin: 0 -.5rem; padding: .25rem .5rem;
  border-left: 2px solid transparent;
}
.bearbeitbar .fliess:hover { background: rgba(46,54,48,.04); }
.bearbeitbar .fliess:focus-visible {
  outline: 2px solid var(--zb-salbei); outline-offset: 2px;
}
.fliess.leer-feld { color: var(--zb-grau-hell); font-style: italic; }

/* Das Feld muss aussehen wie der Text, den es ersetzt. */
.abschnitt textarea {
  display: block; box-sizing: border-box;
  font-family: var(--zb-font-text); font-size: 1rem; line-height: 1.75;
  color: var(--zb-tiefgruen); background: var(--zb-weiss);
  border: 1px solid var(--zb-linie); border-radius: var(--zb-radius);
  margin: 0 -.5rem; padding: .25rem .5rem;
  width: calc(100% + 1rem);
  resize: none; overflow: hidden; min-height: 2.5rem;
}
.abschnitt textarea:focus {
  outline: none; border-color: var(--zb-salbei);
  box-shadow: 0 0 0 3px rgba(109,122,113,.18);
}
/* Eine Anzeige oder ein Feld -- nie beides. Ein display aus einer Klasse
   schlaegt das [hidden] des Browsers, darum hier ausdruecklich. */
.abschnitt [hidden] { display: none; }

/* Was geaendert, aber noch nicht geschrieben ist, muss man sehen. */
.geaendert-marke {
  display: none; margin-left: .6rem; vertical-align: middle;
  font-family: var(--zb-font-display);
  font-size: .6875rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--zb-terra-dunkel);
}
.abschnitt.geaendert > h4 > .geaendert-marke { display: inline; }
.abschnitt.geaendert > .fliess,
.abschnitt.geaendert > textarea { border-left: 2px solid var(--zb-terrakotta); }
.offen-hinweis {
  margin-top: 1rem; padding: .5rem .7rem;
  border-left: 3px solid var(--zb-terrakotta);
  background: rgba(186,128,106,.08); color: var(--zb-terra-dunkel);
}

/* Ein leerer Abschnitt steht in der Gliederung, aber leise. */
.sprungmarken a.leer { color: var(--zb-grau-hell); }
.sprungmarken a.leer:hover { color: var(--zb-terra-dunkel); }

.treffer { border-bottom: 1px solid var(--zb-linie-2); padding: .7rem 0; }
.treffer mark { background: rgba(186,128,106,.35); color: var(--zb-tiefgruen); }

@media (max-width: 820px) {
  .anmeldung { grid-template-columns: 1fr; min-height: 0; }
  .anmeldung .seite { padding: 2rem 1.25rem; }
  .anmeldung .formular { padding: 2rem 1.25rem; max-width: none; }
}

/* --------------------------------------------------------------------
   Schlagworte am Eintrag und das Vokabular
   Stufe 4, Schritt 4. Vier Facetten untereinander, je eine Zeile Marken
   und ein Feld. Bewusst schmucklos: Das hier wird nach jeder Sitzung
   benutzt, und was man oft benutzt, soll leise sein.
   -------------------------------------------------------------------- */
.schlagworte { margin-top: 1.6rem; border-top: 1px solid var(--zb-linie);
               padding-top: 1rem; }
.schlagworte h4 { margin: 0 0 .2rem; }
.schlagworte .facette { margin-top: .8rem; }
.facette-kopf { font-size: .82rem; letter-spacing: .04em;
                text-transform: uppercase; color: var(--zb-grau); }
.marken { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
          margin: .3rem 0; }
.knopf.klein { padding: .18rem .5rem; font-size: .8rem; }
.vokabelliste { list-style: none; padding: 0; margin: .5rem 0 0;
                columns: 2; column-gap: 2rem; }
.vokabelliste li { break-inside: avoid; margin-bottom: .45rem; }
@media (max-width: 40rem) { .vokabelliste { columns: 1; } }
.liste { width: 100%; border-collapse: collapse; }
.liste th { text-align: left; font-size: .82rem; letter-spacing: .04em;
            text-transform: uppercase; color: var(--zb-grau);
            border-bottom: 1px solid var(--zb-linie); padding: .3rem .5rem; }
.liste td { padding: .45rem .5rem; border-bottom: 1px solid var(--zb-linie);
            vertical-align: top; }

/* Die Bewertung eines KI-Entwurfs: zugeklappt, freiwillig, leise. Wer sie
   ausfuellt, tut es neben der Freigabe und nicht statt ihrer. */
.bewertung { margin-top: 1rem; border: 1px solid var(--zb-linie);
             border-radius: var(--zb-radius); padding: .7rem .9rem; }
.bewertung summary { cursor: pointer; }
.bewertung[open] summary { margin-bottom: .5rem; }

/* Anmerkungen am Verlaufsprotokoll — der Regelkreis. Sie stehen unter dem
   Abschnitt, auf den sie sich beziehen, und sind als Stimme eines Menschen
   erkennbar: eingerückt, mit Balken, nicht als Fließtext der Akte. */
.anmerkung { border-left: 3px solid var(--zb-terrakotta);
             padding: .4rem .7rem; margin: .4rem 0 .4rem 1rem;
             background: var(--zb-grau-hell); border-radius: 0 4px 4px 0; }
.anmerkung.eingegangen { border-left-color: var(--zb-salbei); }
.anmerkungsform { display: flex; gap: .4rem; margin: .3rem 0 1.2rem 1rem; }
.anmerkungsform input { flex: 1; }

/* Eine Abfolge von Schritten, nicht eine Aufzaehlung von Punkten: Luft
   zwischen den Zeilen, damit man beim Arbeiten die Stelle wiederfindet. */
.schrittliste { margin: .2rem 0 .6rem; padding-left: 1.3rem; }
.schrittliste li { margin-bottom: .55rem; line-height: 1.55; }

/* =====================================================================
   Das Handy — gemessen am 20.10.2026, nachgezogen am selben Tag.

   Riki arbeitet fast immer am Handy. Bis hierhin ist dieses Stylesheet
   desktop first: fuenf Media Queries, alle `max-width`, die engste bei
   820px. Ein 390-Pixel-Geraet bekam damit das Tablet-Layout, und das war
   an fuenf Stellen eines zu viel (konzept/handy-befund-2026-10-20.md).

   Dieser Block ist die Reparatur und nicht der Umbau. Er nimmt die fuenf
   Funde heraus; ob das Ganze eines Tages auf `min-width` umgestellt wird,
   steht weiter offen und ist eine eigene Entscheidung.

   560px und nicht 430: Handys im Hochformat reichen von 320 bis 430, und
   ab 600 faengt das Tablet an. Dazwischen ist Platz fuer die Grenze.
   ===================================================================== */
@media (max-width: 560px) {

  /* --- 1. Listen rollen in sich, nicht die ganze Seite ---------------
     Vier Seiten rollten quer, weil eine Tabelle breiter war als das
     Geraet: gewischt wurde dann der Bildschirm, und Kopf und Navigation
     wanderten mit weg. `display: block` gibt der Tabelle einen eigenen
     Rollbereich; thead und tbody behalten ihr Tabellenlayout.

     Der Schatten rechts ist kein Schmuck. Er haengt an
     `background-attachment: local` und ist nur da, solange wirklich
     etwas ausserhalb steht — ein Hinweis, der sich selbst zuruecknimmt. */
  table.liste, table.eckdaten {
    display: block; overflow-x: auto; scrollbar-width: thin;
    background:
      linear-gradient(to right, var(--zb-blatt) 30%, transparent) left center,
      linear-gradient(to left,  var(--zb-blatt) 30%, transparent) right center,
      radial-gradient(farthest-side at 0 50%, rgba(46,54,48,.16), rgba(46,54,48,0)) left center,
      radial-gradient(farthest-side at 100% 50%, rgba(46,54,48,.16), rgba(46,54,48,0)) right center;
    background-repeat: no-repeat;
    background-size: 2.5rem 100%, 2.5rem 100%, .9rem 100%, .9rem 100%;
    background-attachment: local, local, scroll, scroll;
  }
  /* Kein `white-space: nowrap`: Gemessen hat es die Tabelle im
     Vorschlagsfach auf 1049px getrieben statt auf 513. Umbrechen laesst
     sie schmal und den Rollweg kurz — und kurzer Rollweg ist der Sinn
     der Sache, nicht die gerade Zeile. */
  table.liste th { white-space: nowrap; }

  /* --- 0. Der Weg zum Inhalt ist kurz -------------------------------
     Gemessen am 21.10.2026 an einer echten Akte: 600 von 844 Pixeln gingen
     drauf, bevor der erste Inhalt kam -- 71 % des Schirms fuer Kopf,
     Aktendeckel und Reiterleiste. Auf dem Geraet, an dem fast immer
     gearbeitet wird, faengt die Akte damit unter dem Falz an.

     Was hier verschwindet, verschwindet nicht, weil Platz knapp ist,
     sondern weil es nichts sagt: der eigene Name neben den eigenen
     Initialen, "Akte seit" (steht im Ueberblick), die Behandlerin der
     eigenen Akte, und ein Knopf fuer den Export, den man selten drueckt. */
  .nur-breit { display: none; }

  .app-kopf { padding: .4rem .9rem; row-gap: .2rem; }
  .marke { padding: .35rem .25rem; gap: .5rem; }
  .marke svg { height: 24px; }
  .marke .titel { font-size: 1rem; }
  .benutzer { gap: .4rem; font-size: .9375rem; }
  .deckel { padding: .5rem .9rem .45rem; row-gap: .35rem; }
  .deckel .name { font-size: 1.35rem; line-height: 1.2; }
  .deckel .meta { font-size: .875rem; line-height: 1.35; }
  .deckel .rechts { margin-top: .1rem; }
  /* Die Marken stehen in der Metazeile und nicht darunter: Eine Zeile, die
     nur ein Woertchen traegt, ist am Handy eine Zeile zu viel. */
  .deckel > .marke-feld { margin-top: -.15rem; }
  .reiter { padding-top: 0; padding-bottom: 0; }

  /* --- 2. Die Navigation bricht um, statt zu verschwinden ------------
     Sie brauchte 636px und bekam 361; "Diktat", "Suche" und "Vokabular"
     lagen jenseits des Randes. Gerollt werden konnte sie, aber
     `scrollbar-width: none` blendete jeden Hinweis darauf aus — und
     ausgerechnet "Diktat" fehlte als erstes.

     Umbrechen statt rollen: Es kostet eine Zeile Hoehe und versteckt
     dafuer nichts. Was man nicht sieht, benutzt man nicht. */
  .hauptnav {
    flex-wrap: wrap; overflow-x: visible; row-gap: .1rem;
    justify-content: flex-start; margin-left: -.4rem;
  }
  .hauptnav a { padding: .4rem .4rem; font-size: .875rem; letter-spacing: .02em; }
  /* Das aufgeklappte Menue ragte bis 405px hinaus (gemessen 24.10.2026):
     `min-width: 12rem` plus der Einzug des Griffs ergibt mehr, als der
     Schirm hat. Es spannt jetzt von Rand zu Rand — dort, wo ohnehin
     nichts anderes steht, solange es offen ist. */
  .hauptnav .menuefeld {
    left: 0; right: 0; min-width: 0; width: auto;
  }

  /* --- 3. Die Reiter der Akte ebenso --------------------------------
     817px auf 390: Material, Geschaeft und Protokoll standen draussen.
     Der Reiter "Geschaeft" traegt den Rechnungsknopf. */
  /* AM HANDY SIND DIE FAHNEN CHIPS UND HAENGEN NICHT.
     Bei zwei oder drei Zeilen kann nur die letzte an der Mappe haengen --
     eine gewaehlte Fahne in der ersten Zeile zeigte eine Verbindung, die
     es nicht gibt. Also geschlossene Form, und die Auswahl erkennt man an
     der Flaeche statt an der Kante. `row-gap: 0` liess die Zeilen
     ausserdem aneinanderkleben; gemeldet am 26.10.2026 als "die Tabs
     quetschen sich zusammen". */
  .reiter button {
    border-radius: var(--zb-radius);
    border-bottom: 1px solid rgba(46, 54, 48, .07);
    margin-bottom: 0;
  }
  .reiter button[aria-selected="true"] {
    background: var(--zb-mappe); border-color: var(--zb-linie);
    box-shadow: inset 0 3px 0 var(--zb-terrakotta);
  }
  .reiter {
    flex-wrap: wrap;
    /* Luft zwischen den Zeilen, aber abgezaehlte. */
    gap: .25rem .3rem;
    overflow-x: visible;
    padding-left: .9rem; padding-right: .9rem;
  }
  /* GESPART WIRD IN DER BREITE UND NICHT IN DER HOEHE. Mit `.45rem`
     vertikal war der Chip 31px hoch -- unter der Trefferflaeche von 32,
     und damit ein Fund je Reiter auf jeder Aktenseite: 36 statt 6.

     Nachgemessen bei 390px: 361px nutzbar, die sieben Chips brauchen
     zusammen 643px. In drei Zeilen geht das auf, in zwei nicht -- dafuer
     fehlten rund 20px je Zeile. Schrift, Polster und Sperrung knapper
     gesetzt bringen sie, und die gesparte Zeile bringt 34px Vorspann. */
  .reiter button {
    padding: .5rem .4rem; font-size: .78rem; letter-spacing: .01em;
  }
  /* Drei Register nebeneinander sind am Handy drei Streifen. */
  .register { grid-template-columns: 1fr; gap: .4rem; }
  .register a { padding: .55rem .7rem; }

  /* --- 4. Kein Zoom beim Antippen -----------------------------------
     Safari zoomt in jedes Feld mit einer Schrift unter 16px hinein und
     verschiebt dabei die Seite. Die Textfelder waren mit 1.0625rem
     richtig gesetzt; die Auswahlfelder erben diese Regel nicht, und
     darunter war "Akte waehlen" im Eingangskorb — der Schritt nach
     jedem Diktat. */
  select, input, textarea, .auswahl { font-size: 1.0625rem; }

  /* --- 5. Ziele fuer einen Daumen, nicht fuer eine Maus --------------
     Apple und Google nennen 44px. Im Vorschlagsfach lagen 17 Ziele
     unter 32: "aufnehmen", "lenken" und "verwerfen" im Abstand eines
     halben Fingers, und jede der drei erzeugt eine Zeile, die nur ueber
     einen zweiten bewussten Schritt zurueckgeht. */
  .knopf { padding: .6rem 1rem; min-height: 2.75rem; }
  .knopf.klein { padding: .5rem .8rem; font-size: .875rem; min-height: 2.5rem; }
  .liste td .knopf, .liste td form { margin-bottom: .3rem; }
  /* Die drei Entscheidungen untereinander statt nebeneinander: In einer
     Tabellenzelle von 390px nebeneinander trifft der Daumen das Falsche. */
  .liste td form { display: block; }
  .liste td form + form { margin-top: .35rem; }
  .liste td select { width: 100%; min-height: 2.5rem; }
  /* Links in Listen und im Kopf bekommen Flaeche, ohne Knopf zu werden. */
  .liste td a { display: inline-block; padding: .35rem 0; }
  .benutzer a.sekundaer { display: inline-block; padding: .5rem .25rem; }
  /* Das Zugeklappte im Vorschlagsfach ist auch ein Ziel. */
  summary { padding: .4rem 0; }
  /* Der Chip am KARTENFUSS war 21px hoch — gemessen am 24.10.2026, und
     zwar an dem, was am selben Tag entstanden ist: Im Kartenkopf trug der
     Chip die Hoehe der Ueberschrift neben sich, am Fuss steht er allein. */
  .karte-fuss > details > summary,
  .karte-fuss .marke-feld {
    display: inline-flex; align-items: center; min-height: 34px;
    padding-top: .25rem; padding-bottom: .25rem;
  }

  /* --- 4. Entscheiden heisst nicht erst wischen ---------------------
     Im Vorschlagsfach standen "aufnehmen", "lenken" und "verwerfen" in
     der letzten Spalte und damit ausserhalb des Rollbereichs, den die
     Tabelle seit dem 21.10.2026 hat. Eine Liste darf man wegrollen; eine
     Entscheidung muss dastehen.

     Deshalb ist die Zeile am Handy keine Zeile mehr, sondern eine Karte:
     Vorschlag oben, Herkunft klein darunter, die Knoepfe in voller
     Breite. Kein Rollbereich, kein Schatten — es gibt nichts mehr, was
     ausserhalb stuende. */
  table.entscheidungen,
  table.entscheidungen tbody,
  table.entscheidungen tr,
  table.entscheidungen td { display: block; width: auto; }
  table.entscheidungen { overflow: visible; background: none; }
  table.entscheidungen thead { display: none; }
  table.entscheidungen tr {
    border: 1px solid var(--zb-linie); border-radius: var(--zb-radius);
    padding: .55rem .7rem .65rem; margin-bottom: .6rem;
  }
  table.entscheidungen td { border: 0; padding: 0; }
  table.entscheidungen td.wer, table.entscheidungen td.wann {
    display: inline-block; font-size: .875rem;
  }
  table.entscheidungen td.wer::after { content: " ·"; }
  table.entscheidungen td.wann { margin-left: .3rem; }
  table.entscheidungen td.tat {
    display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem;
  }
  table.entscheidungen td.tat form {
    display: flex; gap: .35rem; margin: 0; flex: 1 1 auto;
  }
  table.entscheidungen td.tat form + form { margin-top: 0; }
  table.entscheidungen td.tat select { flex: 1 1 7rem; width: auto; min-width: 0; }
  table.entscheidungen td.tat .knopf { flex: 0 0 auto; margin-bottom: 0; }
  /* Der Zustand ist hier anfassbar und kein Aufkleber. */
  .marke-feld.zustand { padding: .5rem .9rem; font-size: .875rem; }
  /* Im Fenster untereinander: nebeneinander trifft der Daumen das Falsche,
     und eine der beiden Entscheidungen laesst sich nicht zuruecknehmen. */
  .menuezeile { flex-direction: column; }
  .menuezeile .knopf { width: 100%; }
  /* Und er darf unter die Ueberschrift rutschen, statt die Karte zu
     dehnen: "freigegeben · korrigieren" neben einem Datum passt auf
     390px nicht in eine Zeile, und die Seite rollte quer. */
  .karte-kopf { flex-wrap: wrap; row-gap: .4rem; align-items: center; }
  .karte-kopf h3 { flex: 1 1 100%; }
  /* Der Verweis auf die Anleitung steht im Bewertungsblock und war 18px
     hoch -- ein Link ist auch ein Ziel. */
  .bewertung a { display: inline-block; padding: .35rem 0; }

  /* --- 6. Karten schrumpfen mit, statt die Seite zu dehnen ----------
     Ein Grid-Kind hat `min-width: auto` und weigert sich, schmaler zu
     werden als sein Inhalt. Sobald in einer Karte eine Liste steht, hat
     die Karte das Dashboard auf 570px gedehnt — die Seite rollte quer,
     obwohl die Liste laengst ihren eigenen Rollbereich hatte. */
  .raster-2 > *, .raster-3 > *, .zweispalt > *, .karte { min-width: 0; }
  /* Dasselbe eine Ebene tiefer, und hier faellt es besonders auf: Ein
     `input[type=file]` bringt die Breite seines Knopfes samt Dateiname mit
     und schiebt das Formular auseinander -- im Reiter „Material" waren das
     425px statt 390. */
  .eingabe > *, .feldzeile, .knopfzeile { min-width: 0; }
  .feldzeile input, .feldzeile select, .feldzeile textarea { max-width: 100%; }
  input[type="file"] { max-width: 100%; }

  /* Zwei Knoepfe nebeneinander passen nicht neben einen Doppelnamen. */
  .kopf-knoepfe { flex-wrap: wrap; }
}

/* Die frueheren Regeln zu `.anmeldung` und `.benutzermenue` stehen weiter
   oben und greifen nicht mehr: Das Markup traegt seit dem 28.10.2026 die
   gemeinsamen Klassen `.anmelde-buehne` und `.profil`. Sie bleiben vorerst
   stehen, statt sie im selben Lauf herauszuschneiden — ein Schnitt ueber
   einen Bereich hat hier schon einmal 226 fremde Regeln mitgenommen. */

/* =====================================================================
   GEMEINSAM — dieser Abschnitt steht WOERTLICH GLEICH in
   `doku-zusammenbesser`, `controlling-zusammenbesser` und
   `print-zusammenbesser`. Wer hier etwas aendert, aendert es in allen
   dreien (Ansage Guy, 28.10.2026).

   Deshalb keine Variablen der jeweiligen Anwendung: feste Markenfarben
   aus dem Handbuch und eine eigene Schriftvariable. Das Controlling steht
   sonst noch auf der alten Palette — an diesen beiden Stellen nicht.
   ===================================================================== */

/* Der Abschnitt bringt seine Schriften selbst mit. Das Controlling fuehrt
   sonst Montserrat; ohne diese beiden Zeilen saehe sein Anmeldeschirm anders
   aus als die der anderen, und „gleich" waere er nur im Aufbau. Die Dateien
   liegen in jedem Abbild unter demselben Weg; nichts kommt von Google. */
@font-face {
  font-family: "Raleway";
  font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/statisch/schriften/raleway-latin-variable.woff2) format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/statisch/schriften/source-sans-3-latin-variable.woff2) format("woff2");
}

.anmelde-buehne, .profil {
  --gemeinsam-anzeige: "Raleway", "Avenir Next", "Segoe UI", sans-serif;
  --gemeinsam-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Auch der Fliesstext gehoert dazu: Die Felder erben sonst die Schrift der
   jeweiligen Anwendung, und dann stehen in der einen Montserrat-Ziffern und
   in der anderen Source-Sans-Ziffern. */
.anmelde-buehne, .profil-klappe { font-family: var(--gemeinsam-text); }

/* --- Anmeldung ------------------------------------------------------- */
/* DER ANMELDESCHIRM IST IN ALLEN EIGENEN ZUSAMMENBESSER-ANWENDUNGEN GLEICH.
   Raster vom Controlling, Farben und Schriften aus dem Handbuch (Ansage
   Guy, 28.10.2026). Wer ihn hier aendert, aendert ihn auch in
   `doku-zusammenbesser` und `controlling-zusammenbesser`.

   Zwei Flaechen ueber die volle Hoehe. Die linke traegt Salbei dunkel und
   das Logo in der Negativfassung; die rechte den Papierton. Der Sprung
   zwischen den Haelften ist deutlich, aber beide bleiben Markenflaechen —
   kein Schwarz, kein Weiss.

   Feste Markenfarben statt Tokens: EIN Aussehen, unabhaengig davon, welche
   Variablen die jeweilige Anwendung sonst fuehrt. Das Controlling steht
   heute noch auf der alten Palette; an dieser Stelle nicht. */

.anmelde-buehne {
  min-height: 100dvh;
  display: grid; grid-template-columns: 1fr;
  background: #EFEADD;                       /* Papier */
}

/* Drei Reihen: Das Logo steht in der mittleren und damit in der wirklichen
   senkrechten Mitte der Flaeche, der Spruch sitzt am Fuss der unteren. Die
   beiden Randreihen sind `minmax(0, 1fr)` und nicht `1fr` — sonst schoebe
   die Hoehe des Spruchs die untere Reihe auf und das Logo saesse messbar zu
   hoch. */
.anmelde-signatur {
  background: #59655D; color: #EFEADD;       /* Salbei dunkel auf Papier */
  display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  padding: 3rem 2rem;
}

/* Der Block ist so breit wie das Logo und so hoch wie das Logo — mehr nicht.
   Der Spruch haengt absolut darunter und zaehlt fuer die Hoehe nicht mit.
   Genau das haelt das Logo in der senkrechten Mitte: Ein langer Spruch
   reicht weiter nach unten, statt das Logo nach oben zu schieben. */
.signatur-block { grid-row: 2; width: min(88%, 300px); position: relative; }

.anmelde-logo { display: block; width: 100%; height: auto; }

/* Rechts an der Logokante ausgerichtet, nicht links: Das Lockup laeuft dort
   mit „ZUSAMMEN" und „BESSER" auf eine gemeinsame Kante aus, und der Block
   nimmt sie auf.

   Linksbuendig mit Balken an der Kante — die aelteste Form, ein Zitat als
   Zitat zu kennzeichnen, und die einzige, die ohne waagerechte Linie
   auskommt. Der Balken steht in Terrakotta hell: Das normale Terrakotta
   waere auf dem dunklen Grund zu leise (Handbuch, Abschnitt 3).

   Nicht kursiv, obwohl das bei Zitaten die Gewohnheit ist: Kursiv ist eine
   Auszeichnung fuer ein paar Woerter, ueber drei Zeilen wird der Grauwert
   unruhig. Anfuehrungszeichen und Balken zeichnen bereits aus. */
.spruch {
  position: absolute; top: 100%; right: 0; margin: 1.5rem 0 0;
  width: 85%;
  padding: .1rem 0 .1rem 1rem; border: 0;
  border-left: 2px solid #D9A88E;            /* Terrakotta hell */
}
.spruch p {
  margin: 0 0 .5rem;
  font-family: var(--gemeinsam-anzeige); font-weight: 300;
  font-size: .9375rem; line-height: 1.6; font-style: normal;
  text-wrap: pretty;
}
.spruch cite {
  display: block; font-style: normal;
  font-size: .75rem; font-weight: 400; line-height: 1.6; opacity: .9;
}
/* Werk und Jahr eine Spur leiser als der Name — die Fundstelle belegt, sie
   soll nicht mitreden. */
.spruch cite span { display: block; opacity: .8; }

.anmelde-feldseite { display: grid; place-items: center; padding: 2rem 1.5rem; }

/* Frei stehend: kein Rahmen, kein Hintergrund, kein Schatten. Das ist der
   Kern der Wirkung — neben dem Formular steht nichts, was den Blick haelt. */
.anmelde-karte {
  width: 100%; max-width: 23.75rem;
  background: transparent; border: 0; padding: 0; color: #2E3630;
}

.marke-zeile {
  margin: 0 0 .75rem;
  font-family: var(--gemeinsam-anzeige);
  font-size: .75rem; font-weight: 600; line-height: 1.55;
  letter-spacing: .22em; text-transform: uppercase; color: #5F6A62;
}

/* Groesse und Abstaende wie im Controlling, aber **mager**: Das Handbuch
   (Abschnitt 4) setzt Ueberschriften auf 400 und ausdruecklich nicht fett.
   Die 800 des Controllings gehoeren zu dessen alter Palette. */
.anmelde-karte h1 {
  font-family: var(--gemeinsam-anzeige);
  font-size: 2.125rem; font-weight: 400; letter-spacing: .01em;
  line-height: 1.2; margin: 0 0 1.5rem; color: #2E3630;
}

.anmelde-karte .meldung { margin: 0 0 1.4rem; background: #FFFFFF; }

/* 16 px zwischen zwei Feldgruppen und ebenso vom letzten Feld zum Knopf —
   der untere Abstand hier leistet beides. */
.feld { display: block; margin: 0 0 1rem; }
.feld span {
  display: block;
  font-family: var(--gemeinsam-anzeige);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  line-height: 1.55; text-transform: uppercase; color: #5F6A62;
  margin-bottom: .5rem;
}
/* Eckig, und zwar Feld wie Knopf. Hoehen fest, damit sie in allen drei
   Anwendungen gleich sind. 17 px im Feld, sonst zoomt iOS beim Antippen. */
.feld input {
  width: 100%; height: 46px; padding: 10px 12px;
  font: inherit; font-size: 1.0625rem; font-weight: 400;
  color: #2E3630; background: #FFFFFF;
  border: 2px solid #6D7A71; border-radius: 0;
}
.feld input:focus-visible { border-color: #BA806A; outline: 2px solid #BA806A; }

.anmelde-karte .knopf {
  width: 100%; height: 46px; border-radius: 0;
  background: #59655D; border-color: #59655D; color: #FFFFFF;
}
.anmelde-karte .knopf:hover { background: #2E3630; border-color: #2E3630; }

@media (min-width: 48rem) {
  .anmelde-buehne { grid-template-columns: minmax(20rem, 42%) 1fr; }
  .anmelde-signatur { padding: 3.5rem; }
  .signatur-block { width: min(100%, 360px); }
  .anmelde-feldseite { padding: 3rem 2rem; justify-items: start; }
  .anmelde-karte { max-width: 25rem; }
}

/* Schmal steht der Spruch im Fluss und nicht absolut: Auf einem Telefon
   haengt er sonst aus der farbigen Flaeche heraus und liegt im Papierton.
   Das Logo darf dort ein Stueck wandern — ueberlappender Text nicht. */
@media (max-width: 47.99rem) {
  .anmelde-signatur { grid-template-rows: auto; align-content: center; }
  .spruch { position: static; width: 100%; margin: 1.25rem 0 0; }
}

/* --- Benutzerbereich ------------------------------------------------- */
/* IN ALLEN EIGENEN ZUSAMMENBESSER-ANWENDUNGEN GLEICH. Vorbild ist das
   Controlling; dazugekommen sind die Kacheln zu den Schwesteranwendungen.
   Wer das hier aendert, aendert es auch in `doku-zusammenbesser` und
   `controlling-zusammenbesser`. Feste Markenfarben statt Tokens, damit es
   ueberall gleich aussieht. */

.profil { position: relative; }

/* Der Ausloeser ist eine Pille, nicht nur der Kreis: Der Rand liegt im
   Ruhezustand durchsichtig da und wird bei Hover und im offenen Zustand
   sichtbar. So bleibt der Kopf ruhig, und der Knopf antwortet trotzdem. */
.profil > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .4rem .2rem .2rem;
  min-height: 44px;
  border: 1px solid transparent; border-radius: 999px;
  transition: border-color .12s, background .12s;
}
.profil > summary::-webkit-details-marker { display: none; }
.profil > summary::marker { content: ""; }
.profil > summary:hover { border-color: #C9CFC9; }
.profil[open] > summary { border-color: #C9CFC9; background: #FFFFFF; }
.profil > summary:focus-visible { outline: 2px solid #BA806A; outline-offset: 2px; }

.profil-pfeil { flex: 0 0 auto; color: #5F6A62; transition: transform .15s; }
.profil[open] .profil-pfeil { transform: rotate(180deg); color: #2E3630; }

.profil-kreis {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: #59655D; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--gemeinsam-anzeige);
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  user-select: none;
}

.profil-klappe {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 20;
  min-width: 17rem;
  /* Rechts verankert, aber nie breiter als der Bildschirm: sonst klebt die
     Klappe auf schmalen Geraeten am Rand oder schiebt die Seite auf. */
  max-width: calc(100vw - 1.5rem);
  background: #FFFFFF; color: #2E3630;
  border: 1px solid #E5E1D4;
  box-shadow: 0 12px 28px rgba(46, 54, 48, .18);
  padding: .4rem;
}

.profil-wer {
  display: grid; gap: .15rem;
  padding: .5rem .6rem .6rem;
  border-bottom: 1px solid #E5E1D4; margin-bottom: .3rem;
}
.profil-wer strong { font-family: var(--gemeinsam-anzeige); font-size: .9rem; line-height: 1.3; }
/* Ein langer Login soll die Klappe nicht aufziehen. */
.profil-wer small { color: #5F6A62; font-size: .75rem; overflow-wrap: anywhere; }

.profil-klappe > a,
.profil-abmelden button {
  display: block; width: 100%; text-align: left;
  padding: .5rem .6rem;
  text-decoration: none; font-size: .85rem; font-weight: 600; color: #5F6A62;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; line-height: inherit;
}
.profil-klappe > a:hover,
.profil-abmelden button:hover { background: #EFEADD; color: #2E3630; }

/* Die Kacheln: drei nebeneinander, die eigene mitgezaehlt und gekennzeichnet.
   Nebeneinander statt untereinander, weil sie zusammen EINE Sache sind — wo
   sonst noch etwas liegt. Untereinander laesen sie sich wie drei weitere
   Menuepunkte. */
.profil-kacheln {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem;
  padding: .3rem 0; margin: .3rem 0;
  border-top: 1px solid #E5E1D4; border-bottom: 1px solid #E5E1D4;
}
/* `.profil-kacheln .kachel` und nicht nur `.kachel`: Das Controlling traegt
   weiter oben ein `.profil-klappe a { background: none; ... }`, das die
   Kacheln sonst schlaegt — es ist spezifischer als eine einzelne Klasse.
   Der Abschnitt soll sich selbst tragen und nicht davon abhaengen, was in
   der jeweiligen Anwendung darueber steht. */
.profil-kacheln .kachel {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .55rem .25rem; min-height: 68px;
  text-decoration: none; text-align: center;
  color: #5F6A62; background: #EFEADD;
  border: 1px solid transparent;
}
.profil-kacheln a.kachel:hover { background: #FFFFFF; border-color: #BA806A; color: #2E3630; }
.profil-kacheln a.kachel:focus-visible { outline: 2px solid #BA806A; outline-offset: 1px; }
.profil-kacheln .kachel-zeichen { width: 20px; height: 20px; flex: 0 0 auto; }
.profil-kacheln .kachel-name {
  font-family: var(--gemeinsam-anzeige);
  font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  line-height: 1.25; text-transform: uppercase; hyphens: auto;
}
/* Die eigene Anwendung: kein Ziel, sondern eine Ortsangabe. Deshalb kein
   Zeigefinger, kein Hover — und der Salbeiton, den auch der Kreis traegt. */
.profil-kacheln .kachel.hier {
  background: #59655D; color: #FFFFFF; cursor: default;
}

/* Abmelden ist von den uebrigen Punkten abgesetzt — es beendet etwas,
   waehrend die anderen nur woandershin fuehren. */
.profil-abmelden { margin-top: .3rem; }

/* ===== Ende des gemeinsamen Abschnitts ===== */




/* --------------------------------------------------------------------
   Genogramm — Zeichnung links, Arbeit rechts.

   Die Zeichnung steht zuerst im Quelltext und damit am Handy oben: Sie
   ist der Grund, warum es diesen Reiter gibt. Die Figuren tragen den Ton
   des Blattes (`--zb-blatt`) und nicht Weiss, sonst leuchten sie auf der
   Mappe wie aufgeklebt.
   -------------------------------------------------------------------- */
.genogramm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1rem;
  align-items: start;
}
.g-tafel { padding: 1rem 1rem .75rem; }
/* Die Zeichnung rollt in sich und nicht die Seite -- eine Familie wird
   breiter als jeder Schirm, sobald eine Generation vier Geschwister hat. */
.g-rollbar { overflow-x: auto; scrollbar-gutter: stable; }
/* `max-width` und nicht `width`: Ein Genogramm ist eine massstaebliche
   Zeichnung. Auf die Containerbreite gestreckt bekaeme eine Familie aus
   drei Personen Figuren wie Scheunentore, und die Strichstaerken stimmten
   nicht mehr. Schrumpfen darf sie -- dafuer steht sie am Handy. */
.g-bild { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.g-legende { margin: .6rem 0 0; font-size: .8125rem; }

.g-figur rect, .g-figur circle, .g-figur polygon {
  fill: var(--zb-blatt);
  stroke: var(--zb-tiefgruen);
  stroke-width: 2;
}
.g-tot { stroke: var(--zb-tiefgruen); stroke-width: 1.5; }
.g-linie { stroke: var(--zb-grau); stroke-width: 1.5; fill: none; }
.g-schnitt { stroke: var(--zb-terra-dunkel); stroke-width: 2; }
.g-name {
  font-family: var(--zb-font-display);
  font-size: 12px; font-weight: 600;
  fill: var(--zb-tiefgruen); text-anchor: middle;
}
.g-jahr, .g-rolle { font-size: 11px; fill: var(--zb-grau); text-anchor: middle; }

.g-arbeit h3 { margin-top: 0; }
.g-liste { list-style: none; margin: 0 0 1rem; padding: 0; }
.g-liste li {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .5rem; padding: .45rem 0;
  border-bottom: 1px solid var(--zb-linie-2);
}
.g-person { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.g-person .sekundaer { font-size: .8125rem; }
.g-klappe { border-top: 1px solid var(--zb-linie); padding-top: .5rem; }
.g-klappe > summary {
  cursor: pointer; font-family: var(--zb-font-display);
  font-weight: 600; padding: .35rem 0;
}
.g-klappe .eingabe { margin-top: .5rem; }
.feldzeile.ankreuz { display: flex; align-items: center; gap: .5rem; }
.feldzeile.ankreuz label { font-weight: 400; }
.feldzeile.ankreuz input { width: 1.15rem; height: 1.15rem; }
.g-stand { margin: 1rem 0 0; font-size: .8125rem; }

@media (max-width: 1100px) {
  .genogramm { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .g-tafel { padding: .75rem .5rem .5rem; }
  /* Am Handy rollt die Seite und nicht die Zeichnung in ihr: Ein
     Rollbereich im Rollbereich ist eine Falle fuer den Daumen. Die
     Zeichnung wird stattdessen ganz hineingerechnet. */
  .g-rollbar { overflow-x: visible; }
  /* Kein Umbruch: Sonst sprang der Knopf je nach Laenge des Namens mal
     neben die Zeile und mal darunter, und die Liste wurde unruhig. */
  .g-liste li { flex-wrap: nowrap; }
  /* Ein Kästchen von 13px trifft kein Daumen. Gemessen am 28.10.2026,
     und es war der einzige harte Fund dieses Reiters. */
  .feldzeile.ankreuz input { width: 2rem; height: 2rem; }
}