/* Spido Alphatest - was es bei Julia nicht gibt.

   Geladen NACH Julias app.css und spido-basis.css (statisch/julia/, dort nie von
   Hand aendern - siehe werkzeuge/julia-uebernehmen.py).

   DIE EINE REGEL DIESER DATEI: jede Regel haengt an einer EIGENEN Klasse unter
   `.spido`. Kein nacktes `button`, `label`, `input`, `h1`, `table`. Genau solche
   Regeln lagen bis zum 13.09.2026 im <style> jeder Seite und haben Julias
   Gestaltung ueberstimmt: ihre Textlinks wurden zu lila Pillen, ihre
   versteckten Knoepfe sichtbar.

   Werte kommen aus ihren Marken (spido-tokens.css), nicht aus eigenen Farben. */

/* =========================================================================
   M0 · DIE MARKEN AUS CLAUDE DESIGN (Julia, 02.10.2026)

   „Claude Design ist ab jetzt die führende UX-/Designinstanz für das
   Spido-Frontend." Und: „Tokenschicht ergänzen, bestehende Tokens nicht
   unkontrolliert ersetzen."

   DESHALB ERGÄNZEN UND NICHT ÜBERSCHREIBEN. Die Werte stehen hier unter
   eigenen Namen (`--cd-*`) und nicht als Neudefinition von `--spido-*`.
   Wer eine Fläche auf die neue Marke zieht, schreibt das an EINER Regel —
   und wer nachsehen will, was sich geändert hat, findet es an dieser
   Schreibweise. Eine stille Umdefinition von `--spido-bg` hätte dagegen
   JEDE Seite auf einmal verschoben, auch die Referenzbereiche.

   GEMESSEN AM 02.10.2026: die violette Familie des Designs deckt sich
   Zeichen für Zeichen mit `julia/spido-tokens.css` —
   `#6D28D9` = `--spido-purple`, `#5B21B6` = `--spido-purple-tief`,
   `#7C3AED` = `--spido-purple-hell`. Sie steht hier deshalb NICHT noch
   einmal; eine zweite Schreibweise derselben Farbe ist eine Stelle zu viel.

   NICHT HIER: die Schrift. Figtree bleibt bis M11 außen vor, und eine
   Abhängigkeit von Google Fonts kommt nicht in diese Anwendung.
   ========================================================================= */
:root{
  /* Flächen */
  --cd-flaeche:        #F6F4F0;   /* App-Hintergrund */
  --cd-flaeche-leiste: #FBFAF7;
  --cd-flaeche-panel:  #FFFEFC;
  --cd-flaeche-spido:  #F8F4FE;   /* Fläche eines Spido-Hinweises */
  --cd-flaeche-du:     #EDE8DE;   /* die Blase des Benutzers */
  /* Linien */
  --cd-linie:          #ECE7DE;
  --cd-linie-panel:    #EEE9E0;
  /* Schrift */
  --cd-text:           #26221E;
  --cd-text-2:         #6B645C;
  --cd-text-label:     #6F6860;
  /* Die vier Interaktionsarten (Screen 09) */
  --cd-vorgang-flaeche: #F1EBFA;
  --cd-vorgang-text:    #5B21B6;
  --cd-kontur-violett:  #D7CBEF;  /* sekundärer Knopf */
  --cd-kontur-neutral:  #DDD6CA;  /* neutraler Knopf */
  --cd-kontur-frage:    #CFC8BC;  /* der ?-Kreis */
  --cd-tooltip:         #2A2520;
  /* Zustände. „Fehlender Wert" ist eine eigene Farbe und kein Grau:
     nicht vorhanden ist etwas anderes als nicht zutreffend. */
  --cd-fehlwert:       #7E22CE;
  --cd-faellig:        #B45309;
  --cd-ok:             #15803D;
  /* Radien und Schatten */
  --cd-radius-panel:   15px;
  --cd-radius-pille:   999px;
  --cd-schatten-panel: 0 14px 40px rgba(44,34,14,.06);
  --cd-schatten-zeile: 0 12px 32px rgba(44,34,14,.07);
  /* Die Hauptnavigation. Julia, 02.10.2026: „Desktop-Hauptnavigation =
     228 px gemäß Claude Design. Damit wird die frühere 78-px-Festlegung
     für den normalen Desktop-Split-View ersetzt." */
  --cd-leiste:         228px;
}

/* ---- Meldungen nach einer Aktion ("Gespeichert.", Fehler) ----------------
   Julias `.note` und `.msg.err` tragen Farbe und Schrift; hier nur der Abstand,
   weil sie bei ihr immer in einer Karte stehen und hier ueber dem Seitenkopf. */
.spido .meldezeile{margin:0 0 var(--spido-space-md,16px)}
.spido p.msg.err.meldezeile{padding:10px 14px;border-radius:10px;
  background:var(--spido-rot-050,#fdecea)}

/* ---- Die Karte der Seiten, die noch nicht auf Julias Markup stehen --------
   Verwaltung, Bogenseite, Abrufverwaltung, Zweiter Faktor einrichten. Sie
   bekommen Julias Flaeche und Schrift, aber ihr Inneres ist noch das alte.
   Alles hier haengt an `.karte` - auf Julias Seiten gibt es sie als <div> nicht. */
.spido div.karte{background:#fff;border-radius:var(--spido-radius-karte,16px);
  box-shadow:var(--spido-schatten-papier,0 1px 10px rgba(0,0,0,.05));
  padding:24px 26px;margin:0 0 20px}
.spido div.karte > :first-child{margin-top:0}
.spido div.karte h2{margin:1.4rem 0 .5rem}
.spido div.karte label{display:block;margin:14px 0 4px;font-size:var(--spido-body-klein,14px);
  color:var(--spido-text-leise)}
.spido div.karte :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea){
  width:100%;box-sizing:border-box;padding:11px 13px;font:inherit;
  border:1px solid var(--spido-linie,#e7e3de);border-radius:10px;background:#fff}
.spido div.karte button:not(.btn):not(.lnk):not(.rm):not(.leise){
  display:inline-flex;align-items:center;margin-top:16px;padding:10px 20px;border:0;
  border-radius:10px;background:var(--spido-purple);color:#fff;font:inherit;
  font-weight:600;cursor:pointer}
.spido div.karte button.leise{background:transparent;color:var(--spido-purple);
  border:1px solid var(--spido-linie,#e7e3de);border-radius:10px;padding:6px 14px;
  font:inherit;font-size:.85rem;cursor:pointer}
.spido div.karte table{width:100%;border-collapse:collapse;margin-top:12px;
  font-size:var(--spido-body-klein,14px)}
.spido div.karte :is(th,td){text-align:left;padding:9px 8px;vertical-align:top;
  border-bottom:1px solid var(--spido-linie,#eee)}
.spido div.karte th{color:var(--spido-text-leise);font-weight:600}

/* ---- Eigene Hinweisarten --------------------------------------------------- */
.spido .klein{font-size:var(--spido-body-klein,14px);color:var(--spido-text-leise)}
.spido .hinweis{background:#fff6e5;border-left:3px solid #d98b12;padding:10px 14px;
  margin:14px 0;border-radius:6px;font-size:var(--spido-body-klein,14px)}
.spido .gut{background:var(--spido-salbei-050,#eaf7ee);border-left:3px solid var(--spido-gruen,#2e7d4f);
  padding:10px 14px;margin:14px 0;border-radius:6px}
.spido .fehler{background:#fdecea;border-left:3px solid #c0392b;padding:10px 14px;
  margin:14px 0;border-radius:6px}
.spido .fehlertext{color:#b42318}
/* DIE UNBELEGTE ANTWORT (Freigabe Alex, 05.10.2026, siehe spido360/herkunft.py).
   Die Klasse stand im Bereiniger (`bereinigen.KLASSEN`), hatte hier aber KEINE
   Regel - der Marker waere ein gewoehnlicher Absatz gewesen, und damit genau
   das Gegenteil einer sichtbaren Trennung.
   STAERKER ALS `.hinweis`, SCHWAECHER ALS `.fehler`: eine Antwort ohne Quelle
   ist kein Fehler, aber auch keine Auskunft. Deshalb ein eigener Ton statt
   eines der beiden vorhandenen - zwei Dinge, die gleich aussehen, werden
   gleich gelesen. */
.spido .warnung{background:#fff4ed;border-left:3px solid #d2601a;padding:10px 14px;
  margin:0 0 12px;border-radius:6px;font-size:var(--spido-body-klein,14px);
  color:#8a3c0c}
.spido .warnung strong{color:#7c2d12}
/* Im Chat sitzt sie direkt ueber der Antwort und darf dort schmaler sein. */
.spido .spureintrag .ergebnis > .warnung:first-child{margin-top:0;font-size:13px}

/* ---- Was Spido aus den Unterlagen gelesen hat ------------------------------
   Gibt es bei Julia nicht, und ohne das kann die Fachkraft nicht pruefen, nur
   glauben: der Wert gross, das woertliche Zitat klein darunter, dann die Quelle.
   Gebaut wie ihre `.kv`-Zeilen im Profil. */
.spido .gelesen{margin:0 0 var(--spido-space-lg,24px)}
.spido .gelesen .kv{grid-template-columns:200px 1fr;margin:0 0 12px}
.spido .gelesen .beleg{display:block;color:var(--spido-text-leise);
  font-size:var(--spido-body-klein,14px);font-style:italic}
.spido .gelesen .quelle{display:block;color:var(--spido-text-leise);font-size:13px}
@media (max-width:640px){ .spido .gelesen .kv{grid-template-columns:1fr} }

/* Julias Dateiliste traegt ein "×" als <button class="rm">. Hier steckt es in
   einem Formular (Entfernen ist ein POST) - das Formular darf die Zeile nicht
   umbrechen. */
.spido ul.files form.rmform{display:contents}

/* ---- Die Bogenseite ---------------------------------------------------------
   Diese Regeln stehen bei Julia NICHT im Blatt, sondern im <style> von
   beispiel.html (Stand dda5cf8). Abgeschrieben, damit die Bogenseite dieselbe
   Exportzeile, dieselbe Ebenenmarke und dieselbe Aktionszeile hat. Aendert sie
   dort etwas, gehoert es hier nachgezogen - oder bei ihr ins Blatt. */
.spido #menue{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  max-width:780px;margin:0 auto 12px}
.spido .dokstand{max-width:780px;margin:0 auto 12px;font-size:14px;
  line-height:1.55;color:var(--spido-text-leise)}
.spido .dokebene{display:inline-block;margin-right:8px;padding:3px 10px;
  border-radius:var(--spido-radius-pille);font-size:11.5px;
  font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.spido .dokebene.org{background:var(--spido-lavendel-cta);color:var(--spido-purple)}
.spido .dokebene.ent{background:var(--spido-terracotta-hell);color:var(--spido-terracotta-tief)}
.spido .dokebene.fin{background:var(--spido-salbei-050);color:var(--spido-gruen)}
.spido #dokaktionen{max-width:780px;margin:18px auto 0;display:flex;
  gap:16px;align-items:center;flex-wrap:wrap}
@media print{
  .spido #menue,.spido .rueck,.spido .dokstand,.spido #dokaktionen,.spido .dokzusatz,
  .spido .seitenleiste{display:none!important}
  .spido .doksheet{box-shadow:none;border:none}
}

/* Die Felder IM Blatt. Bei Julia schreibt man direkt in den Text
   (contenteditable); hier sind es Felder, weil Rohtext sich vollstaendig escapen
   laesst und zurueckgeschicktes HTML nicht. Damit das Blatt trotzdem wie ein
   Blatt aussieht, sind die Felder Schreibzeilen: kein Kasten, eine Linie. */
.spido .bogenmaske h3{margin:28px 0 6px}
.spido .bogenmaske label{display:block;margin:12px 0 2px;font-size:13px;
  color:var(--spido-text-leise)}
.spido .bogenmaske :is(input:not([type=radio]):not([type=checkbox]),textarea){
  width:100%;box-sizing:border-box;font:inherit;color:var(--spido-text);
  background:transparent;border:0;border-bottom:1px solid var(--spido-linie);
  border-radius:0;padding:5px 2px}
.spido .bogenmaske textarea{border:1px solid var(--spido-linie);border-radius:8px;
  padding:8px 10px;resize:vertical}
.spido .bogenmaske :is(input,textarea):focus{outline:none;
  border-color:var(--spido-purple);background:var(--spido-purple-050)}
.spido .bogenmaske .wahlzeile{display:flex;flex-wrap:wrap;gap:6px 16px;margin:4px 0 10px}
.spido .bogenmaske .wahlzeile.lang{flex-direction:column;gap:6px}
.spido .bogenmaske label.wahl{display:inline-flex;align-items:center;gap:6px;margin:0;
  font-size:15px;color:var(--spido-text)}
/* Frage, Kreuze und Bemerkung als EINE Zeile - so setzt die Vorlage sie auch. */
.spido .bogenmaske .fragezeile{border-top:1px solid var(--spido-linie);padding:8px 0 4px}
.spido .bogenmaske .fragezeile .fragetext{margin-bottom:3px}
.spido .bogenmaske .fragezeile .wahlzeile{margin:0 0 5px}
.spido .bogenmaske input.bemerkung{margin:0}
.spido .bogenmaske p.regel{font-size:14px;line-height:1.45;color:var(--spido-text-2);
  margin:8px 0;border-left:3px solid var(--spido-linie);padding:6px 11px}
.spido .bogenmaske p.hinweis{border-left-color:var(--spido-linie);background:var(--spido-bg-2)}
/* Der Massnahmenplan ist ein Block reiner Text und wird als solcher kopiert.
   Feste Laufweite, damit die Stichpunktstriche untereinander stehen. */
.spido .bogenmaske textarea[name="mp_plan"]{font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:14px;line-height:1.5}

/* Was unter dem Blatt steht: Akte, finale Fassung, Unterschrift, Abruf. Dieselbe
   Breite wie Blatt und Exportzeile. */
.spido .dokzusatz{max-width:780px;margin:var(--spido-space-xl,40px) auto 0}
.spido .dokzusatz .bogen{margin-top:12px;padding:16px;background:#fff;
  border:1px solid var(--spido-linie);border-radius:14px;overflow-x:auto}

/* Zugeklappte Nebenwege (Patient ohne Unterlagen, Unterlage nachreichen, Akte):
   gebaut wie Julias "Verlauf anzeigen". */
.spido details.nebenweg{margin:var(--spido-space-md,16px) 0 0}
.spido details.nebenweg > summary{cursor:pointer;font-size:14.5px;font-weight:600;
  color:var(--spido-text-leise);list-style:none}
.spido details.nebenweg > summary::-webkit-details-marker{display:none}
.spido details.nebenweg > summary::after{content:' ↓'}
.spido details.nebenweg[open] > summary::after{content:' ↑'}
.spido details.nebenweg > summary:hover{color:var(--spido-purple)}
.spido details.nebenweg > form{margin-top:12px}

/* Stand einer Neukundenaufnahme in der Patientenliste (Julia, 16.09.2026:
   "muss erkenntlich sein, wenn eine Neukundenaufnahme noch nicht fertig
   abgeschlossen ist"). Kein Statusabzeichen wie frueher an jeder Zeile: nur
   die Aufnahmen, die noch laufen oder haengen, tragen eines - eine fertige
   Zeile bleibt eine ruhige Zeile. */
.spido .fallzeile .fzstand{
  font-size:13px;font-weight:var(--spido-fw-halb,600);line-height:1;
  padding:5px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--spido-linie);color:var(--spido-text-leise);
  background:var(--spido-bg-2,#f6f6f8);
}
.spido .fallzeile .fzstand.laeuft{
  color:var(--spido-purple);border-color:color-mix(in srgb,var(--spido-purple) 35%,#fff);
  background:color-mix(in srgb,var(--spido-purple) 8%,#fff);
}
.spido .fallzeile .fzstand.laeuft::before{
  content:'';display:inline-block;width:7px;height:7px;margin-right:6px;
  border-radius:50%;background:currentColor;vertical-align:middle;
  animation:fzpuls 1600ms ease-in-out infinite;
}
.spido .fallzeile .fzstand.stockt{color:#8a1c1c;border-color:#e0b4b4;background:#fdf3f3}
@keyframes fzpuls{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .spido .fallzeile .fzstand.laeuft::before{animation:none}
}

/* Finale Unterlagen (Julia, 16.09.2026): Zuordnung je Datei und Sternebewertung. */
.spido .finalliste li{flex-wrap:wrap}
.spido .finalzuordnung{margin-left:auto}
.spido .finalzuordnung select{font:inherit;font-size:14px;padding:6px 8px;border-radius:8px;
  border:1px solid var(--spido-linie);background:#fff;max-width:18rem}
.spido .finalfragen{display:flex;flex-direction:column;gap:6px}
.spido .sterne{display:inline-flex;flex-direction:row-reverse;gap:4px;margin:4px 0 6px}
.spido .sterne input{position:absolute;opacity:0;width:1px;height:1px}
.spido .sterne label{font-size:34px;line-height:1;cursor:pointer;color:#d6d6de;
  transition:color var(--spido-zeit-schnell,120ms) ease}
.spido .sterne label:hover,.spido .sterne label:hover ~ label,
.spido .sterne input:checked ~ label{color:#f2b01e}
.spido .sterne input:focus-visible + label{outline:2px solid var(--spido-purple);outline-offset:2px;border-radius:4px}

/* Kostenfreier Test - gross und unuebersehbar (Julia, 16.09.2026: "mit dem grossen
   Verweis, dass alles kostenfrei ist als Testnutzer"). */
.spido .kostenfrei-hinweis,.spido .note.kostenfrei{
  font-size:17px;line-height:1.45;padding:14px 16px;border-radius:12px;
  border:1px solid #9fd5b4;border-left:5px solid #1f8a4c;background:#eef8f1;color:#14532d}
.spido .vereinbarungen .vereinbarung{display:flex;gap:12px;align-items:flex-start;
  margin:0 0 12px;text-align:left;line-height:1.5}
.spido .vereinbarungen .vereinbarung input{margin-top:4px;width:19px;height:19px;flex:0 0 19px}
.spido .legal table.avvtab{width:100%;border-collapse:collapse;margin:8px 0 12px;font-size:15px}
.spido .legal table.avvtab th,.spido .legal table.avvtab td{border:1px solid var(--spido-linie);
  padding:8px 10px;text-align:left;vertical-align:top}

/* Spido 360 (Julia, 24.09.2026): drei Zonen - Menue, Spur, Vorschau rechts.
   Die Anordnung folgt heutigen Chatoberflaechen; das Verhalten ausdruecklich
   nicht (siehe openspec .../spido360-modul/design.md). Auf schmalen Geraeten
   fallen die Zonen untereinander: Spur zuerst, dann Vorschau, dann Menue -
   wer auf dem Telefon nachsieht, will das Ergebnis und nicht die Gliederung. */
.spido .auftragszeile{display:flex;gap:8px;align-items:center;margin:0 0 6px}
.spido .auftragszeile input{flex:1 1 auto;font:inherit;padding:12px 14px;border-radius:12px;
  border:1px solid var(--spido-linie,#e7e3de);background:#fff}
.spido .auftragszeile button{flex:0 0 auto;padding:12px 16px}
.spido .auftragszeile input:disabled,.spido .auftragszeile button:disabled{
  opacity:.55;cursor:not-allowed}

/* Spido 360, Arbeitsraum (24.09.2026): Menue, Spur, Arbeitsansicht.
   Die rechte Spalte ist KEINE Vorschau - dort wird gearbeitet. Sie bekommt
   deshalb die meiste Flaeche, sobald ein Dokument offen ist (.breit). */
.spido .zbereich{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--spido-text-leise)}
.spido .ztrenner{border:0;border-top:1px solid var(--spido-linie,#e7e3de);margin:14px 0}
.spido .zeintrag{display:flex;align-items:baseline;gap:6px;width:100%;text-align:left;
  padding:6px 8px;margin:0 0 2px;border-radius:8px;font:inherit;font-size:15px;
  color:inherit;text-decoration:none;background:none;border:0;cursor:pointer}
.spido .zeintrag:hover{background:#f4f0fd}
.spido .zeintrag.aktiv{background:#f0e9ff;color:var(--spido-purple);font-weight:600}
.spido .zeintrag.leise,.spido .zeintrag.zoffen{color:var(--spido-text-leise)}
/* EINE NUMMER BRICHT NIE UM - egal in welcher Liste sie steht.

   Julia hat das am 29.09.2026 zweimal gemeldet ("bei 1.03.09 springt die 9
   in die nächste Zeile"). Beim ersten Mal habe ich die Regel an
   `.spido .gliederung .znummer` geschrieben - und die Gliederung im
   Arbeitsraum heisst `kgliederung`. Die Regel zielte ins Leere, und die
   Nummern brachen weiter um.

   Deshalb steht sie jetzt hier, an der Klasse selbst: eine Nummer ist ein
   Zeichen, kein Satz, und das gilt ueberall. */
.spido .znummer{font-variant-numeric:tabular-nums;font-size:13px;
  color:var(--spido-text-leise);white-space:nowrap;overflow-wrap:normal;
  word-break:keep-all}
.spido .zzahl{margin-left:auto;font-size:13px;color:var(--spido-text-leise)}
.spido .zbauen{margin-left:auto;font-size:13px;color:var(--spido-purple)}
.spido .zbau{margin:0}

/* Die Spur: was geschehen ist, nicht was gesagt wurde. */
.spido .spurlauf{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.spido .spureintrag{padding:10px 12px;border-radius:12px;font-size:15px;line-height:1.45}
.spido .spureintrag.du{background:#f0e9ff;align-self:flex-end;max-width:90%}
.spido .spureintrag.spido{background:#fff;border:1px solid var(--spido-linie,#e7e3de)}

/* Profilkarten - keine einzige lange Abfrage. */
.spido .profilkarte{background:#fff;border-radius:var(--spido-radius-karte,16px);
  box-shadow:var(--spido-schatten-papier,0 1px 10px rgba(0,0,0,.05));
  padding:14px 18px;margin:0 0 12px}
.spido .profilkarte>summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:2px}
.spido .profilkarte>summary::-webkit-details-marker{display:none}
.spido .profilkarte[open]>summary{margin-bottom:10px;padding-bottom:8px;
  border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .zstand{font-size:12px;font-weight:600;padding:1px 7px;border-radius:99px;margin-left:6px}
.spido .zstand.vorgeschlagen{background:#fef3c7;color:#92400e}
.spido .zstand.bestaetigt{background:#e8f5ec;color:#166534}
.spido .fhint.ohnewirkung{color:#92400e}
.spido .mehrfach{display:flex;flex-direction:column;gap:4px}
/* Die Stellen sind seit dem 28.09.2026 kein Feld je Stelle mehr, sondern
   eine Zeile je Person - siehe MASTERDESIGN weiter unten. */
.spido .stellen label{display:block;margin:0 0 6px;font-size:13px;
  color:var(--spido-text-leise)}

/* Dokument: Kopf, Werkzeugleiste, Editor, Exportmenue.

   BEREINIGT AM 25.09.2026 nach Julias Entwicklerspezifikation, Punkte 10-17.
   Der Kopf trug Nummer, Titel, Fassung, Stand, Freigabestand und "entspricht
   dem Master" - und all das stand im Dokument noch einmal. Geblieben ist der
   Titel. */
.spido .dokkopf{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px}
.spido .dokkopf h1{margin:0;font-size:22px}
/* Auch `.dokkopf` und `.zbereich` gab es im Markup nicht mehr - entfernt am 29.09.2026. */

/* Punkt 16: ein Sachverhalt, eine Meldung. Die Einblendung bestaetigt kurz und
   technisch ("gespeichert"); alles, was dauerhaft gilt, steht in den Hinweisen
   und nicht zusaetzlich hier. */
.spido .einblendung{background:#eef8f1;border:1px solid #9fd5b4;
  border-left:5px solid #1f8a4c;border-radius:12px;padding:10px 14px;
  margin:0 0 14px;line-height:1.5}
.spido .einblendung p{margin:0}
.spido .einblendung p + p{margin-top:6px}

/* Punkt 15: Hinweise sagen, was zu tun ist. */
.spido .hinweiskopf{margin:0 0 6px;font-weight:600}

/* Punkt 17: Ergebnisse ja, Dauerchat nein. */
.spido .dokergebnisse{margin:16px 0 0}
.spido .dokfuss{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 4px}
.spido .arbeitsraum.nurarbeit .zarbeit{max-width:none}
.spido .exportmenue>summary{cursor:pointer;list-style:none;display:inline-block}
.spido .exportmenue>summary::-webkit-details-marker{display:none}
/* EIN AKTIONSMENUE SCROLLT NICHT (Julia, 29.09.2026, als globale Regel):
   "Toolbars und Aktionsmenues duerfen nicht vertikal scrollbar sein. Wenn
   ein Menue nicht passt: Schrift/Spacing moderat verdichten, Menue sinnvoll
   breiter machen ... Aber keine Scrollbar in einem kleinen Aktionsmenue."

   Breiter statt hoeher: 14 rem sind rund 224 px, und damit passen
   "Aenderungsverlauf" und "Querformat" nebeneinander in eine Zeile. */
.spido .exportfach{position:absolute;right:0;top:calc(100% + 4px);z-index:5;background:#fff;
  border:1px solid var(--spido-linie,#e7e3de);border-radius:10px;padding:6px;
  min-width:14rem;max-width:20rem;overflow:visible;
  box-shadow:0 6px 22px rgba(0,0,0,.10)}
/* JEDE ZEILE SIEHT GLEICH AUS - ob Verweis oder Knopf. Vorher war das
   Querformat ein `.fachtat` ohne Anordnung, und sein Sinnbild hat sich
   genommen, was da war: eine Kachel von hundert Pixeln. */
.spido .exportfach a,.spido .exportfach .fachzeile{display:flex;
  align-items:center;gap:10px;width:100%;min-height:38px;padding:7px 10px;
  border:0;background:none;border-radius:7px;color:inherit;text-align:left;
  text-decoration:none;font:inherit;font-size:14px;cursor:pointer}
.spido .exportfach a:hover,.spido .exportfach .fachzeile:hover{background:#f4f0fd}
.spido .exportfach svg{width:17px;height:17px;flex:0 0 auto}
/* ============================================================================
   DIE DOKUMENTANSICHT (Julias Korrektur vom 25.09.2026)

   "Die Ansicht soll eher an Word/Google Docs im Browser erinnern als an eine
   Landingpage." Rechts liegt eine ruhige weisse Flaeche, darueber nur zwei
   Schaltflaechen und eine schmale Hinweiszeile. Alles 20-30 % kleiner als
   vorher; die Zielgroessen stehen in ihrer Vorgabe und hier im Code.

   DIESELBEN KLASSEN STEHEN IM SEITENSTIL (web.py, _SEITENSTIL) fuer A4. Andere
   Masse, derselbe Aufbau. Wer hier eine Klasse aendert, aendert sie dort mit -
   sonst sieht dasselbe Dokument am Bildschirm anders aus als im Ausdruck, und
   bei 250 Mastern merkt es niemand rechtzeitig.
   ========================================================================= */
.spido .dokflaeche{max-width:58rem}
.spido .dokaktionen{display:flex;justify-content:flex-end;align-items:center;gap:8px;
  margin:0 0 10px;position:relative}
/* HIER STAND `height: 42px` FUER DIESELBEN KNOEPFE - wirkungslos, weil sie
   weiter unten 36 px bekommen ("Die Aktionen sollen nicht mit dem Dokument
   um Aufmerksamkeit konkurrieren"). Eine Stelle, nicht zwei. */
.spido .dokaktionen .exportmenue{position:relative}
.spido .btn.speichern[disabled]{opacity:.45;cursor:default;box-shadow:none}
.spido .btn.speichern.aktiv{box-shadow:0 0 0 3px #ede6ff}

/* Der Hinweis ist eine ZEILE, kein Balken: er sagt, was fehlt, und wohin. */
.spido .dhinweis{margin:0 0 10px;font-size:14px}
.spido .dhinweis>summary{cursor:pointer;list-style:none;display:flex;gap:8px;
  align-items:baseline;flex-wrap:wrap;padding:7px 12px;border-radius:9px;
  background:#fdf6ee;border:1px solid #f0dcc4;color:#7c4a12}
.spido .dhinweis>summary::-webkit-details-marker{display:none}
.spido .dhinweis .dwas{color:#8a6440}
.spido .dhinweis .dansehen{margin-left:auto;color:var(--spido-purple);white-space:nowrap}
.spido .dhinweisfach{list-style:none;margin:8px 0 0;padding:10px 14px;border-radius:9px;
  background:#fff;border:1px solid var(--spido-linie,#e7e3de);line-height:1.5}
.spido .dhinweisfach li + li{margin-top:10px;padding-top:10px;
  border-top:1px solid var(--spido-linie,#e7e3de)}

/* Die Meldung zu einer Aktualisierung - schmal, nicht als Warnflaeche. */
.spido .dmeldung{background:#eef4ff;border:1px solid #bfd3f6;border-left:4px solid #2563eb;
  border-radius:9px;padding:8px 12px;margin:0 0 10px;font-size:14px;line-height:1.5}
.spido .dmeldung.aus{background:#f6f5f8;border-color:var(--spido-linie,#e7e3de);
  border-left-color:#9aa0ac;color:var(--spido-text-leise)}

/* Die Werkzeugleiste sitzt UEBER dem Dokument und erscheint erst beim Bearbeiten. */
.spido .wkzleiste{display:flex;flex-wrap:wrap;gap:4px;padding:5px;margin:0 0 8px;
  border:1px solid var(--spido-linie,#e7e3de);border-radius:10px;background:#faf9fc}
/* IN DER ARBEITSFLAECHE SCHWEBT SIE. Im Blatt hat sie rund 40 px Hoehe
   verbraucht und damit jeden Seitenumbruch darunter verschoben - Lesen und
   Bearbeiten zeigten dasselbe Dokument in zwei Formatierungen. Jetzt liegt
   sie darueber, wie die Kopfzeile, und das Blatt bleibt unberuehrt. */
.spido .wflaeche > .wkzleiste{position:absolute;top:42px;left:50%;
  transform:translateX(-50%);z-index:7;margin:0;
  background:rgba(255,255,255,.96);
  box-shadow:0 2px 8px rgba(60,45,30,.12)}
.spido .wflaeche > .wkzleiste[hidden]{display:none}
.spido button.wkz{min-width:30px;height:28px;padding:0 7px;border-radius:6px;
  border:1px solid transparent;background:none;font:inherit;font-size:13px;cursor:pointer}
.spido button.wkz:hover{background:#efeaf8;border-color:var(--spido-linie,#e7e3de)}

/* DAS DOKUMENT. Eine Flaeche, die aussieht wie ein Blatt - weil es eines ist. */
.spido .dokument{background:#fff;border:1px solid var(--spido-linie,#e7e3de);
  border-radius:10px;box-shadow:var(--spido-schatten-papier,0 1px 10px rgba(0,0,0,.05));
  padding:34px 40px 26px}
.spido .dokument .dkopf{border-bottom:1px solid var(--spido-linie,#e7e3de);
  padding-bottom:14px;margin:0 0 20px}
.spido .dokument .dtraeger{margin:0 0 10px;font-size:13px;color:var(--spido-text-leise)}
.spido .dokument .dnummer{margin:0 0 2px;font-size:14px;letter-spacing:.04em;
  color:var(--spido-text-leise)}
.spido .dokument .dtitel{margin:0;font-size:26px;line-height:1.25;font-weight:600}
.spido .dokument .dfuss{border-top:1px solid var(--spido-linie,#e7e3de);margin-top:26px;
  padding-top:12px;font-size:13px;color:var(--spido-text-leise)}
/* NUR DIE SEITENZAHL am Fuss eines Briefes (MYS-232) - die Begruendung steht in
   `dokument.css` bei derselben Regel. Eine Stufe ueber der Zeile darueber:
   `.spido .dokument .dfuss` ist (0,3,0), diese Regel (0,4,0). */
.spido .dokument .dfuss.dfuss--nurzahl{border-top:0;padding-top:0;margin-top:0}

/* Der Inhalt - und nur er - ist beschreibbar. */
.spido .dinhalt{min-height:18rem}
/* DER RAHMEN DARF NICHTS VERSCHIEBEN. Julia: "der lila Rahmen darf zu
   keinerlei Änderung der Formatierung führen." `outline` liegt zwar
   ausserhalb des Layouts — mit `outline-offset: 10px` ragte er aber 10 px
   über das Blatt hinaus und wurde vom `overflow: hidden` des Blattes
   abgeschnitten, was ihn oben und unten anders aussehen liess als seitlich.
   Ohne Abstand sitzt er am Inhalt und schneidet nirgends. */
.spido .dinhalt[contenteditable="true"]{outline:2px solid #ede6ff;outline-offset:2px;
  border-radius:4px}
.spido .dinhalt[contenteditable="true"]:focus{outline-color:var(--spido-purple)}
.spido .dinhalt :is(th,td){
  text-align:left;vertical-align:top}
.spido .dokverlauf{margin-top:18px}
.spido .dokverlauf ul{list-style:none;padding:0;margin:0}
.spido .dokverlauf li{padding:8px 0;border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .neubau{display:flex;align-items:baseline;gap:10px;margin-top:10px;flex-wrap:wrap}
.spido .neubau button.lnk{background:none;border:0;font:inherit;cursor:pointer;
  color:var(--spido-purple);text-decoration:underline;padding:0}

/* Spido 360 ab 24.09.2026, zweite Fassung der Navigation (Julias Spezifikation
   "Grundnavigation & Pflegedienstprofil"): eigene Leiste statt der MySpido-Leiste,
   Eingang mit zwei Tueren, und KEINE dauerhafte rechte Informationsspalte -
   die Flaeche rechts gehoert der Arbeit. */
.spido .leiste360 .zzurueck{display:flex;align-items:center;gap:4px;margin:2px 0 14px;
  font-size:14px;color:var(--spido-text-leise);text-decoration:none}
.spido .leiste360 .zzurueck:hover{color:var(--spido-purple)}
.spido .leiste360 .zzurueck svg{width:16px;height:16px}
.spido .zeintrag.gross{font-size:16px;font-weight:600;padding:9px 10px}
.spido .zeintrag.klein{font-size:14px;padding:5px 8px 5px 14px}
.spido .zleer{padding:2px 8px 6px 14px;margin:0}
.spido .zgruppe>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;
  gap:6px;padding:6px 8px;border-radius:8px;font-size:15px}
.spido .zgruppe>summary::-webkit-details-marker{display:none}
.spido .zgruppe>summary:hover{background:#f4f0fd}
.spido .zgruppe[open]>summary{font-weight:600}
.spido .zordner{margin-right:2px}

/* KEIN EINGANG MEHR (Julia, 25.09.2026). Die zwei Tuerkarten sind weg: wer in
   MySpido auf Spido 360° klickt, steht sofort in der Maske. Was die Karten
   entschieden haben - Handbuch oder Unterlagen - entscheidet jetzt die Leiste,
   und die steht ohnehin immer da. */

/* Die Begruessung: "Ganz oben wird der Benutzer begruesst mit der Frage, wie
   kann ich Dir helfen." Die Spur sitzt unten (justify-content:flex-end);
   margin-bottom:auto hebt allein die Begruessung nach ganz oben und laesst
   alles andere, wo es ist. Oben eine Frage, unten die Zeile, dazwischen Luft. */
.spido .zgruss{margin:0 auto auto;max-width:52rem;width:100%;
  font-size:30px;line-height:1.25;font-weight:600;letter-spacing:-.01em}

/* Der Hinweistext steht ganz fein UNTER der Zeile - nicht als Kasten davor.
   Wer ihn braucht, liest ihn; wer ihn kennt, sieht ihn nicht mehr. */
.spido .zspur > .fhint.zfein{font-size:13px;line-height:1.45;margin-top:8px}

/* Arbeitsraum: Spido in der Mitte, Arbeitsansicht rechts. Die Navigation ist
   die Leiste - deshalb zwei Spalten im Inhalt und nicht drei. */
.spido .zarbeit{background:#fff;border-radius:var(--spido-radius-karte,16px);
  box-shadow:var(--spido-schatten-papier,0 1px 10px rgba(0,0,0,.05));padding:20px 24px}
.spido .zarbeit .seitenkopf{margin-bottom:14px}
.spido ul.files.schlicht li{display:block;padding:8px 0;border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .hinweisliste{margin:0;padding-left:20px;color:#9a3412}

/* Aktualisierungen (24.09.2026). Ein Hinweis, der nach einer Entscheidung
   weiter mahnt, wird ignoriert - deshalb zwei Gestalten: offen und entschieden. */
.spido .aktbanner{background:#eef4ff;border:1px solid #bfd3f6;border-left:5px solid #2563eb;
  border-radius:12px;padding:12px 16px;margin:0 0 14px;line-height:1.5}
.spido .aktbanner.aus{background:#f6f5f8;border-color:var(--spido-linie,#e7e3de);
  border-left-color:#9aa0ac;color:var(--spido-text-leise)}
.spido .aktliste{list-style:none;padding:0;margin:0 0 16px}
.spido .aktliste li{padding:10px 0;border-bottom:1px solid var(--spido-linie,#e7e3de);
  line-height:1.5}
.spido .zstand.aus{background:#eceaf0;color:#4b5563}
.spido .zeintrag.warn{color:#1d4ed8;font-weight:600}
.spido .aktwahl{margin:6px 0 18px}
.spido .aktwahl button.lnk{background:none;border:0;font:inherit;cursor:pointer;
  color:var(--spido-purple);text-decoration:underline;padding:0 6px}
.spido .dokvorschau{border:1px solid var(--spido-linie,#e7e3de);border-radius:12px;
  background:#fff;padding:16px 18px;margin:0 0 16px;font-size:15px;line-height:1.55;
  max-height:26rem;overflow:auto}
.spido .dokvorschau.alt{background:#faf9fb;color:#3f3f46}
.spido .dokvorschau table{width:100%;border-collapse:collapse;margin:8px 0}
.spido .dokvorschau :is(th,td){border:1px solid var(--spido-linie,#e7e3de);padding:5px 8px;
  text-align:left;vertical-align:top}

/* Unterlagen (24.09.2026): Schutzklasse sichtbar, aber nicht laut. */
.spido .schloss{font-size:13px;color:#7c2d12;background:#fff7ed;border:1px solid #fed7aa;
  border-radius:99px;padding:1px 9px;white-space:nowrap}
.spido .hochladen{margin-top:4px}
.spido .hochladen input[type=file]{font:inherit;font-size:14px}
.spido label.bewusst{display:flex;gap:9px;align-items:flex-start;margin:10px 0 4px;
  font-size:15px;line-height:1.45}
.spido label.bewusst input{margin-top:3px;width:18px;height:18px;flex:0 0 18px}
.spido .fundstelle{display:block;margin-top:4px;font-size:14px;color:#3f3f46;
  background:#faf9fb;border-left:3px solid var(--spido-linie,#e7e3de);padding:4px 10px}
.spido .bezugform{margin-top:8px}
.spido .spureintrag.laeuft{border-left:4px solid var(--spido-purple);background:#f7f4fe}
.spido .spureintrag.fehl{border-left:4px solid #8a1c1c;background:#fdecea;color:#7f1d1d}
.spido .spureintrag .ergebnis{margin:0 0 8px}
.spido .spureintrag .ergebnis :is(h2,h3){font-size:15px;font-weight:600;margin:10px 0 4px}
.spido .spureintrag .ergebnis ul{margin:4px 0 8px;padding-left:20px}
.spido .spureintrag form{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:6px}
.spido .fhint.bezug{margin:0 0 6px}
.spido .rgruppe{margin:12px 0 4px;font-size:14px;font-weight:600;color:var(--spido-text-leise)}
.spido .rgruppe:first-child{margin-top:0}

/* Groessenverhaeltnisse (Julia, 24.09.2026, an einer Chatoberflaeche gezeigt):
   schmale Leiste links, der ganze Rest ist Arbeitsflaeche, und die Eingabe
   steht unten in der Mitte - mit Luft ringsum. KEINE dauerhafte dritte Spalte.

   Zwei Zustaende statt zweier fester Spalten:
     .nurspido   nichts offen  -> Spido hat die Flaeche, eine Spalte, mittig
     .mitarbeit  etwas offen   -> die Arbeit hat die Flaeche, Spido unten angeheftet

   WARUM DAS WICHTIG IST UND NICHT NUR HUEBSCH: Der Pflegedienst soll hier
   spaeter seinen ganzen Posteingang ablegen. Wer einer Oberflaeche seinen
   Schriftverkehr anvertraut, muss auf einen Blick sehen, woran er ist - eine
   Flaeche, ein Ort zum Tippen, keine drei konkurrierenden Spalten. */
.spido .arbeitsraum{display:block}
.spido .arbeitsraum.nurspido{max-width:52rem;margin:0 auto}

/* =========================================================================
   DER COMPOSER STEHT UNTEN UND IST SO BREIT WIE DAS GESPRÄCH (29.09.2026)

   Julia, 12:58 Uhr, mit zwei Bildschirmfotos: „der composer steht ganz unten
   zu schmal, darüber sind immer mit viel abstand die prompts. das soll ja so
   aussehen, wie bei chat gpt."

   ZWEI URSACHEN, beide mit `werkzeuge/composer-probe.py` im Browser gemessen
   und nicht aus dem Blatt geschlossen:

   1. ZU SCHMAL — `.spurlauf` und `.auftragszeile` tragen `margin-left:auto;
      margin-right:auto`, um mittig zu stehen. Ihr Elternteil `.zspur` war
      `display:flex; flex-direction:column`. In einem Flex-Behälter schaltet
      ein `auto`-Rand in der Querachse das Dehnen ab — beide schrumpften auf
      ihre Inhaltsbreite: gemessen 356 px und 286 px statt 768 px. Die
      `max-width` war die ganze Zeit richtig; sie kam nur nie zum Tragen.

      Deshalb `width:100%`: damit greift `max-width:48rem` wieder, und die
      `auto`-Ränder tun wieder das, wofür sie da sind.

   2. DIE LÜCKE — `min-height:min(58vh,30rem)` (gemessen: 480 px) zusammen mit
      `justify-content:flex-end` schob ALLES an den unteren Rand. Der Platz,
      der übrigblieb, stand über der ersten Nachricht. Von oben sieht das aus,
      als wäre der Composer verschwunden — genau so hat Julia es um 12:39
      gemeldet.

   STATTDESSEN DIE BAUWEISE, DIE `mitchat` SCHON BENUTZT: die Anwendung nimmt
   die volle Höhe, der Verlauf rollt in der Mitte, der Composer sitzt fest am
   unteren Rand. Das ist es, was „wie bei ChatGPT" technisch heißt — und es
   braucht keine geratene Zahl für die Höhe der Schale.

   `100dvh` und nicht `100vh`: auf einem Telefon wandert die Adressleiste beim
   Rollen ein und aus. Der Druckblock weiter unten hebt Höhe und Überlauf mit
   `!important` wieder auf; ohne das stünde im PDF eine Seite statt aller.
   ========================================================================= */
/* `grid-template-rows:minmax(0,1fr)` IST DER TEIL, DER WIRKLICH ZWINGT.
   `.spido.app` ist ein Gitter. Eine Zeile mit `auto` richtet sich nach ihrem
   Inhalt, AUCH wenn das Gitter eine feste Hoehe hat - der Inhalt laeuft dann
   einfach hinaus und `overflow:hidden` schneidet ihn ab. Gemessen: Schale
   1046 px, Inhalt 1214 px, Composer 168 px unterhalb des sichtbaren Bereichs.
   `minmax(0,1fr)` gibt der Zeile genau die Hoehe der Schale und erlaubt ihr,
   kleiner als ihr Inhalt zu sein - erst damit greift `min-height:0` darunter. */
.spido.app:has(.arbeitsraum.nurspido){height:100dvh;min-height:0;overflow:hidden;
  grid-template-rows:minmax(0,1fr)}
/* `padding:0` GEHOERT DAZU. Ohne ihn beginnt der Inhalt 23 px unter der
   Oberkante, die Schale ist trotzdem genau 100dvh hoch - und die unteren
   29 px, in denen der Composer steht, schneidet `overflow:hidden` ab. Die
   `mitchat`-Fassung weiter unten macht es aus demselben Grund so. */
/* `height:100%` UND NICHT NUR `min-height:0`. Die Gitterzeile ist 1046 px
   hoch und `min-height` steht auf 0 - trotzdem mass `<main>` 1214 px, weil es
   sich an seinem Inhalt ausrichtete statt an seiner Zeile. Eine ausdrueckliche
   Hoehe von 100 % rechnet gegen die Zeile und beendet den Streit. Dieselbe
   Zeile steht aus demselben Grund in der `mitchat`-Fassung weiter unten. */
.spido.app:has(.arbeitsraum.nurspido) > .main{min-height:0;height:100%;
  overflow:hidden;padding:0;display:flex;flex-direction:column}
/* `width:100%` AN JEDEM GLIED DER KETTE - aus demselben Grund wie unten am
   Composer. `.wrap` und `.arbeitsraum` stehen beide mittig durch einen
   `auto`-Rand; sobald ihr Elternteil ein Flex-Behaelter ist, schaltet dieser
   Rand das Dehnen ab, und sie schrumpfen auf ihren Inhalt. Beim ersten Anlauf
   waren es dadurch 452 px und 356 px statt 1180 und 832 - derselbe Fehler,
   nur zwei Ebenen hoeher. */
.spido.app:has(.arbeitsraum.nurspido) .wrap{min-height:0;flex:1 1 auto;
  width:100%;padding-top:0;padding-bottom:0;display:flex;flex-direction:column}
.spido .arbeitsraum.nurspido{min-height:0;flex:1 1 auto;width:100%;
  display:flex;flex-direction:column}
.spido .arbeitsraum.nurspido .zspur{min-height:0;flex:1 1 auto;display:flex;
  flex-direction:column;padding-bottom:14px}
/* Der Aussenabstand UNTER der Zeile faellt weg - er zaehlt zur Hoehe der Spur,
   ist aber nichts, was man sieht. Die Spur ragte dadurch 6 px aus dem Fenster.
   Die Luft unter dem Composer kommt jetzt aus dem Innenabstand der Spur, und
   die steht dort, wo sie auch gemessen wird. */
.spido .arbeitsraum.nurspido .zspur > .auftragszeile{margin-bottom:0}
/* Der Verlauf nimmt den Platz und rollt in sich - der Composer bleibt stehen. */
.spido .arbeitsraum.nurspido .zspur > .spurlauf{width:100%;flex:1 1 auto;
  min-height:0;overflow-y:auto}
/* Warnsatz und Zeile behalten ihre Höhe und dehnen sich auf die volle Breite. */
.spido .arbeitsraum.nurspido .zspur > .zwarnung,
.spido .arbeitsraum.nurspido .zspur > .fhint,
.spido .arbeitsraum.nurspido .zspur > .auftragszeile{width:100%;flex:0 0 auto}
.spido .arbeitsraum.mitarbeit .zarbeit{margin-bottom:1rem}

/* Angeheftet: Spido rueckt an den unteren Rand und nimmt nur, was er braucht.

   DER WEICHE RAND LIEGT UEBER DEM BLOCK UND NICHT IN IHM (MYS-312, Fund 3,
   Julia am 29.10.2026). Hier stand der Verlauf AUF dem Block selbst:
   `linear-gradient(rgba(250,249,251,0) 0%, #faf9fb 22%)`. Das heisst, die
   oberen 22 % SEINER EIGENEN HOEHE sind durchsichtig - und was dort darunter
   liegt, wird mitgezeichnet. Bei einer Trefferliste ist das genau der Fall:
   Gemessen am 29.10.2026 bei drei Fensterhoehen (1500x1000, 1280x800,
   1440x650) lagen 12 von 13, 10 von 10 und 8 von 9 Zeilen der Liste HINTER
   dem Block - Julias zwei Texte auf einer Zeile.

   Der Block traegt jetzt einen VOLLEN Hintergrund; der Verlauf sitzt als
   schmaler Streifen DARUEBER (`::before`, 28 px), damit Inhalt weiterhin
   weich darunter verschwindet statt an einer harten Kante abzuschneiden.
   Die Hoehe des Streifens haengt nicht mehr an der Hoehe des Blocks. */
.spido .zspur.angeheftet{position:sticky;bottom:0;z-index:4;margin:0 -8px;padding:10px 8px 6px;
  background:var(--spido-hintergrund,#faf9fb)}
.spido .zspur.angeheftet::before{content:"";position:absolute;left:0;right:0;
  top:-28px;height:28px;pointer-events:none;
  background:linear-gradient(to bottom, rgba(250,249,251,0) 0%,
                             var(--spido-hintergrund,#faf9fb) 100%)}
.spido .zspur.angeheftet .spurlauf{max-height:min(38vh,22rem);overflow:auto;
  margin-bottom:10px}
.spido .zspur.angeheftet > .fhint:last-of-type{display:none}

/* Die Eingabezeile: breit, mittig, mit Luft - wie in der Vorlage. */
.spido .auftragszeile{max-width:52rem;margin-left:auto;margin-right:auto;
  gap:10px;padding:0}
.spido .auftragszeile input{padding:14px 18px;border-radius:16px;font-size:16px;
  box-shadow:0 1px 10px rgba(0,0,0,.05)}
.spido .auftragszeile button{border-radius:14px;padding:13px 18px}
.spido .zspur > .fhint{max-width:52rem;margin-left:auto;margin-right:auto}
.spido .spurlauf{max-width:52rem;margin-left:auto;margin-right:auto}

/* Die Arbeitsansicht darf die ganze Breite nehmen - sie ist der Grund, warum
   jemand hier ist. */
.spido .arbeitsraum.mitarbeit .zarbeit{max-width:none}
@media (max-width:820px){
  .spido .arbeitsraum.nurspido{max-width:none}
  .spido .zspur.angeheftet .spurlauf{max-height:32vh}
  .spido .zgruss{font-size:23px}
}
.spido .eingangskarte{border-left:4px solid var(--spido-purple)}
.spido .vorschlaggrund{margin:0 0 10px;padding:6px 10px;background:#f7f4fe;border-radius:8px}
.spido .eingangsadresse{background:#f0f7f2;border:1px solid #c9e4d3;border-radius:10px;
  padding:8px 12px;margin:0 0 12px}
.spido .herkunftszeile{margin:0 0 6px}

/* Fortbildungen: Lernkarten, Test, Ergebnis. */
.spido section.karte{background:#fff;border:1px solid var(--spido-linie,#e7e3de);
  border-radius:14px;padding:16px 20px;margin:0 0 12px}
.spido section.karte.fall{border-left:4px solid var(--spido-purple);background:#faf8ff}
.spido .kartenzahl{margin:0 0 4px;font-size:13px;color:var(--spido-text-leise)}
.spido section.karte h3{margin:0 0 8px;font-size:17px}
.spido section.karte blockquote{margin:10px 0 0;padding:8px 12px;background:#f4f0fd;
  border-left:3px solid var(--spido-purple);border-radius:0 8px 8px 0}
.spido fieldset.testfrage{border:1px solid var(--spido-linie,#e7e3de);border-radius:12px;
  padding:12px 16px;margin:0 0 10px}
.spido fieldset.testfrage legend{font-weight:600;padding:0 6px}
.spido .testergebnis{list-style:none;padding:0;margin:0 0 16px}
.spido .testergebnis li{padding:10px 12px;border-radius:10px;margin:0 0 8px;line-height:1.5}
.spido .testergebnis li.gut{background:#f0f7f2;border:1px solid #c9e4d3}
.spido .testergebnis li.schlecht{background:#fdecea;border:1px solid #f3c6c0}

/* ============================================================================
   COMPACT UI (Julias Spezifikation "Compact UI & originalgetreue
   Dokumentdarstellung", 25.09.2026)

   "Spido soll nicht wie eine große, luftige Consumer-Webseite aussehen, sondern
   wie eine moderne professionelle Arbeitsoberfläche: kompakt, übersichtlich,
   informationsreich und ruhig."

   WARUM ALS TOKEN-UEBERSCHREIBUNG UND NICHT ALS HUNDERT EINZELREGELN: Julias
   Blaetter sind token-basiert. Ihre Werte sind fuer die oeffentliche Seite
   richtig - --spido-h2 ist dort eine Abschnittsueberschrift bis 44px und
   --spido-luft ein Abstand bis 150px. In einer Arbeitsoberflaeche sind beide
   falsch. Hier steht deshalb EIN Satz Werte fuer `.spido.app`, den Bereich
   hinter der Anmeldung. Ihre Dateien bleiben unberuehrt; die oeffentliche Seite
   sieht aus wie vorher, und wer die Verdichtung zurueckdrehen will, loescht
   diesen einen Block.

   Die Zielgroessen stammen aus ihrer Tabelle: Text 14-16, Label 14-15,
   Seitentitel 24-28, Kartentitel 17-19, Eingabehoehe 38-44, Knopf 38-42,
   Kartenpolster 16-24, Formularzeilen 12-16.
   ========================================================================= */
.spido.app{
  --spido-h2:         clamp(23px,2vw,27px);
  --spido-h2-klein:   clamp(17px,1.5vw,19px);
  --spido-h3:         19px;
  --spido-lead:       17px;
  --spido-body-gross: 15.5px;
  --spido-body:       15px;
  --spido-body-klein: 14px;
  --spido-mini:       12px;
  --spido-label:      11px;
  --spido-lh-text:    1.5;
  --spido-lh-weit:    1.55;
  --spido-space-md:   18px;
  --spido-space-lg:   26px;
  --spido-space-xl:   38px;
  --spido-space-2xl:  52px;
  --spido-pad:        clamp(16px,2.4vw,34px);
  --spido-luft:       clamp(26px,4vh,44px);
  --spido-content-max: 1400px;
  --spido-radius-karte: 14px;
  --spido-knopf-padding:       11px 20px;
  --spido-knopf-padding-klein: 8px 15px;
  --spido-knopf-size:          15px;
  --spido-knopf-size-klein:    14px;
}
/* Eingabehoehe 38-44 px statt 50. Die Schriftgroesse bleibt auf dem Telefon bei
   16 px - darunter zoomt iOS beim Fokus in jedes Feld hinein, und danach steht
   die Seite verschoben da. Julias Begruendung, ihre Regel, hier nur wiederholt,
   weil unsere spaeter im Stapel steht und sonst gewinnt. */
.spido.app .field{margin-bottom:14px}
.spido.app .field label{margin-bottom:5px}
.spido.app .field input,.spido.app .field select{padding:10px 13px;font-size:15px}
.spido.app textarea{padding:10px 13px;font-size:15px;min-height:72px}
.spido.app .inhalt{padding-top:clamp(16px,2.2vh,28px)}
@media(max-width:840px){
  .spido.app .field input,.spido.app .field select,.spido.app textarea{font-size:16px}
}

/* Das Profil ist eine Uebersicht, kein Fragebogen: zwei bis drei Felder
   nebeneinander, solange der Platz da ist. "Das erzeugt enormes Scrollen" -
   Julia ueber die einspaltige Fassung. Textflaechen und Tabellen (Stellen,
   Mehrfachauswahl, Produkte) nehmen die ganze Zeile, sonst werden sie unlesbar. */
/* HIER STANDEN FUENF REGELN FUER `.feldraster` - eine Klasse, die es im
   Markup nicht gibt. Sie zielten ins Leere, kosteten nichts und liessen
   jeden glauben, das Feldraster sei gestaltet.

   Gefunden von `werkzeuge/klassen-probe.py`, nachdem sie gelernt hatte,
   auch nach blinden Selektoren zu suchen - derselbe Fehler, der Julias
   Nummernumbruch zweimal ueberleben liess: eine Regel an
   `.spido .gliederung .znummer`, waehrend die Gliederung `kgliederung`
   heisst. */
.spido .fhint.fwarum{color:var(--spido-text-leise);font-size:12.5px}
.spido .bstand{margin-left:auto;font-size:13px;color:var(--spido-text-leise);
  white-space:nowrap}
.spido .bstand.fertig{color:#1f8a4c;font-weight:600}
.spido .profilkarte>summary{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}

/* ---------------------------------------------------------------------------
   DOKUMENT + SPIDO, SONST NICHTS (Julia, 25.09.2026)

   "Sie soll sich im geöffneten Zustand fast wie 'Dokument + Spido' anfühlen,
   nicht wie 'Dokument innerhalb eines Verwaltungssystems'."

   Die linke Navigation ist beim geoeffneten Dokument ganz weg - `ohneleiste`
   nimmt dem Raster seine erste Spalte, sonst stuende das Dokument in den 248px,
   die fuer die Leiste reserviert sind. Zurueck geht es ueber den kleinen
   Verweis oben links.
   -------------------------------------------------------------------------*/
.spido.app.ohneleiste{grid-template-columns:minmax(0,1fr)}

.spido .dokleiste{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.spido .dzurueck{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;
  color:var(--spido-text-leise);text-decoration:none}
.spido .dzurueck:hover{color:var(--spido-purple)}
.spido .dzurueck svg{width:15px;height:15px}
.spido .dokleiste .dokaktionen{margin-left:auto;margin-bottom:0}

/* Der Hinweis steht einfach da: eine Zeile, kein Kasten, kein Aufklappen. */
.spido .dhinweiszeile{margin:0 0 10px;font-size:13px;line-height:1.5;
  color:var(--spido-text-2)}
.spido .dhinweiszeile .dpunkt{color:#c2410c;margin-right:5px}

/* Die Dokumentflaeche: Zielgroessen aus Julias Tabelle vom 25.09.2026 -
   Titel 22-24, Nummer 12-13, Text 14-15, Zwischenueberschrift 16-17,
   Tabelle 13-14, Fusszeile 11-12. Unten Platz, damit die letzten Zeilen
   ueber die Promptzeile hinweggescrollt werden koennen. */
.spido .dokflaeche{max-width:48rem;padding-bottom:104px}
.spido .dokument{padding:22px 28px 18px}
.spido .dokument .dkopf{padding-bottom:9px;margin:0 0 14px}
.spido .dokument .dtitel{font-size:22px}
.spido .dokument .dnummer{margin:3px 0 0;font-size:12.5px}
.spido .dokument .dfuss{margin-top:18px;padding-top:9px;font-size:11.5px}
/* HIER STAND EINE ZWEITE FASSUNG DER DOKUMENTMASSE, kleiner fuer den
   Arbeitsmodus - und weiter unten eine dritte, die sie im Blatt wieder
   aufhob. Das Dokument gestaltet jetzt `dokument.css`, und zwar in
   Millimetern: das Blatt ist in beiden Welten 210 mm breit. */
/* Die Aktionen sollen nicht mit dem Dokument um Aufmerksamkeit konkurrieren. */
.spido .dokaktionen .btn{height:36px;line-height:36px;padding:0 13px;font-size:13.5px}

/* DIE PROMPTZEILE: klein, unten, immer da. "Ungefähr in der Dimensionierung
   hier in ChatGPT" - also keine Flaeche ueber die ganze Breite, sondern eine
   schwebende Zeile. Sie bleibt auch beim geoeffneten Dokument stehen: Spido
   kennt den Zusammenhang und braucht keinen Knopf dafuer. */
.spido .promptzeile{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;
  z-index:30;display:flex;gap:8px;align-items:center;width:min(760px,calc(100% - 48px));
  padding:6px 6px 6px 16px;border-radius:26px;background:#fff;
  border:1px solid var(--spido-linie,#e7e3de);box-shadow:0 6px 24px rgba(60,45,30,.13)}
.spido .promptzeile input{flex:1 1 auto;border:0;outline:none;background:none;
  font:inherit;font-size:15px;padding:9px 0;color:var(--spido-text)}
.spido .promptzeile input::placeholder{color:var(--spido-text-leise);opacity:.75}
.spido .promptzeile .btn{flex:0 0 auto;height:36px;width:36px;padding:0;
  border-radius:50%;line-height:36px;font-size:15px}
@media(max-width:840px){
  .spido .promptzeile{width:calc(100% - 24px);bottom:10px}
}

/* =========================================================================
   DIE ARBEITSFLÄCHE (Julia, 28.09.2026 — „Spido Arbeitsfläche nach
   ChatGPT-Prinzip", Abschnitte 1 bis 13)

   „Sobald ein Objekt geöffnet ist: Chat links – Arbeitsobjekt rechts. Kein
   Chat-Overlay von unten und kein Dokument über dem Prompt."

   ABSCHNITT 6 IST DER KERN, und er beschreibt einen Fehler: „Die Breite des
   Workspace darf niemals den Dokumentinhalt responsiv neu umbrechen."

   Genau das tat die Ansicht bis heute. `.dokflaeche` hatte `max-width:48rem`,
   und für den Arbeitsmodus stand ein zweiter Satz Schriftgrößen bereit —
   Text 16 → 14,5 px, Titel 22 → 22 px, Tabelle 15 → 13,5 px. Wer das
   Fenster schmaler zog, bekam ein anderes Dokument: andere Zeilenumbrüche,
   andere Tabellenspalten, andere Seitenzahl. „Ich erkenne eindeutig dasselbe
   Dokument wieder" war damit nicht zu halten.

   DIE LÖSUNG IST EINE FESTE SEITE, KEIN FLUSS. Das Blatt ist 210 × 297 mm
   groß — in Millimetern, nicht in Prozent — mit denselben Rändern, die
   `@page` beim Drucken setzt (20 mm oben/unten, 18 mm seitlich). Damit ist
   die Textbreite 174 mm, immer, unabhängig vom Fenster. Was der Viewer
   ändert, ist allein der MASSSTAB: `transform: scale()`. Eine skalierte
   Seite hat dieselben Umbrüche wie eine unskalierte — sie ist nur kleiner.

   ECHTE SEITEN OHNE SEITENRECHNUNG (Abschnitt 9: „Immer nur eine Seite im
   Mittelpunkt"). Der Inhalt läuft in CSS-Spalten von genau einer Seitenhöhe;
   der Browser bricht ihn dabei selbst um und beachtet `break-inside`, hält
   also Tabellenzeilen zusammen und lässt keine Überschrift allein am Fuß
   stehen. Seite 2 zu zeigen heißt, den Inhalt um eine Spaltenbreite nach
   links zu schieben. Kein Nachrechnen von Zeilenhöhen im Server, keine
   zweite Darstellung, und die Umbrüche sind dieselben wie im Druck.

   WARUM NICHT EIN LANGES BLATT MIT SCHNITTMARKEN: weil ein Schnitt mitten
   durch einen Absatz genau das wäre, was ein Seitenviewer verhindern soll —
   und weil „das permanente vertikale Scrollen durch Dokumente" (Abschnitt 9)
   dann geblieben wäre.
   ========================================================================= */

/* --- Die Aufteilung (Abschnitt 4): nicht 50:50 ---------------------------
   „Chat ca. 34–38 %, Workspace ca. 62–66 %." Bei sehr breiten Bildschirmen
   bekommt der Chat eine Maximalbreite, damit das Dokument den Rest erhält -
   sonst wächst die Chatspalte ins Leere, während die Seite klein bleibt. */
/* DIE AUFTEILUNG STEHT WEITER UNTEN - an EINER Stelle, gesucht mit
   "DIE AUFTEILUNG (Abschnitt 4)". Hier stand sie zuerst auch, und damit waere
   sie die vierte Definition von `grid-template-columns` fuer dieselbe Klasse
   gewesen: 15-20rem (25.09.), 21-26rem (25.09. abends), 30-34rem (25.09.
   nachts). Die spaeteste gewinnt, die frueheren sind toter Text - und wer die
   Breite aendern will, findet zuerst die falsche. */
.spido .arbeitsraum.mitchat .dokspalte{min-width:0;display:flex;
  flex-direction:column;background:#f6f4f1}

/* MAXIMIEREN (Abschnitt 13): „rechte Arbeitsfläche wird groß, Chat wird
   temporär ausgeblendet". Es ist ein Zustand der Schale und keine zweite
   Seite - der Chat ist verborgen, nicht fort, und das Gespräch bleibt exakt
   stehen. */
.spido .arbeitsraum.mitchat.gross{grid-template-columns:1fr}
.spido .arbeitsraum.mitchat.gross > .chatspalte{display:none}
/* GESCHLOSSEN (Abschnitt 3): „Spido-Chat bekommt sofort wieder die gesamte
   verfügbare Breite. Gespräch bleibt exakt an derselben Stelle erhalten." */
.spido .arbeitsraum.mitchat.zu{grid-template-columns:1fr}
.spido .arbeitsraum.mitchat.zu .dokspalte{display:none}
.spido .arbeitsraum.mitchat.zu > .chatspalte{max-width:none;border-right:0}

/* --- Die Werkzeugleiste über der Seite (Abschnitt 11) -------------------- */
/* DIE FLAECHE SCROLLT, DIE BUEHNE NICHT. Unter dem Blatt stehen die
   Nebensachen - Ergebnisse und Aenderungsverlauf -, und die sind nur
   erreichbar, wenn man an ihnen vorbeirollen kann. In der Buehne haben sie
   nichts zu suchen: dort schieben sie das Blatt hinaus (siehe den Kommentar
   bei `{unten}` in web.py). */
.spido .wflaeche{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;
  overflow-y:auto}
/* EINE KOPFZEILE, 44 bis 52 px (V2, Abschnitt 9). Vorher waren es drei:
   Rueckweg und Titel, darunter Massstab und Aktionen, darunter die Marken
   HANDBUCH und VORLAGE als eigene Reihe. Julias Befund: "Der aktuelle
   Screenshot verwendet im Verhaeltnis zum Dokument zu viel Flaeche fuer UI."

   `flex-wrap` gibt es hier nicht mehr. Es war gut gemeint - bei zu wenig
   Breite rutschten die Aktionen in eine zweite Zeile - und damit wuchs
   ausgerechnet dann die Bedienung, wenn am wenigsten Platz ist. Stattdessen
   weicht der Titel (`text-overflow`): er steht ohnehin auch in der Gliederung
   daneben. */
/* DIE LEISTE SCHWEBT ÜBER DER SEITE (Julia, 28.09.2026 abends): „Dafür kann
   die Seitenansicht dann oben über das Menüband laufen."

   Damit kostet sie keine Höhe mehr. Das ist der letzte Platz, den es hier zu
   holen gab: die Seite beginnt jetzt ganz oben im Viewer und endet ganz
   unten, und zwischen Blattrand und Viewerrand liegen 6 px statt 14 plus
   einer 40 px hohen Zeile.

   `pointer-events` trennt dabei Aussehen und Bedienung: die Leiste selbst
   lässt Klicks durch auf das Blatt darunter, ihre Knöpfe nicht. Ohne das
   läge ein unsichtbarer Streifen über dem oberen Blattrand, und wer dort in
   den Text klicken will, träfe ihn nicht. */
.spido .wkopf{position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:5px;flex-wrap:nowrap;
  height:38px;padding:0 8px 0 6px;background:none;border:0;
  pointer-events:none}
.spido .wkopf > *{pointer-events:auto}
.spido .wflaeche{position:relative}
/* Die Knöpfe bekommen einen eigenen hellen Grund, damit sie auf dem weißen
   Blatt UND auf dem grauen Hintergrund lesbar bleiben. */
.spido .wkopf .dzurueck,
.spido .wtaten{background:rgba(255,255,255,.9);border-radius:9px;
  box-shadow:0 1px 4px rgba(60,45,30,.08)}
.spido .wtaten{padding:2px 3px}
/* Was zum Objekt gehört, aber nicht aufs Blatt, steht unter der Leiste. */
.spido .woben{padding:40px 12px 0}
.spido .woben:empty{display:none}
/* Der Rückweg steht links im Kopf - dort, wo Abschnitt 25 später die
   Objekthistorie ‹ / › vorsieht. NUR DER PFEIL: das Wort daneben ("QM-Handbuch")
   war eine gute Absicht und kostete in jeder Kopfzeile so viel Breite wie drei
   Aktionen. Der Tooltip sagt es weiterhin, und wohin es zurückgeht, steht
   links in der Gliederung ohnehin. */
/* „Handbuch bleibt stehen aber ganz links mit dem Pfeil zusammen." */
/* "‹ QM-Handbuch" IST EIN WEG, KEINE SCHALTFLAECHE (Julia, 29.09.2026):
   "Oben links ueber dem Dokument ist aktuell ein relativ grosser
   pillenfoermiger Button. Den wuerde ich vereinfachen zu: ‹ QM-Handbuch
   ohne grosse Kapsel oder hoechstens mit sehr subtiler Hoverflaeche.
   13-14 px reichen. Die Hierarchie ist ohnehin klar, weil links bereits das
   Handbuch sichtbar ist." */
.spido .wkopf .dzurueck{display:inline-flex;align-items:center;gap:4px;
  flex:0 0 auto;height:32px;padding:0 6px 0 2px;border-radius:7px;
  color:var(--spido-text-2,#4a4441);text-decoration:none;font-size:13.5px}
.spido .dzurwort{white-space:nowrap}
.spido .wkopf .dzurueck:hover{background:rgba(31,28,26,.045);
  color:var(--spido-purple,#7c3aed)}
.spido .wkopf .dzurueck svg{width:16px;height:16px;flex:0 0 auto}
/* Titel 15-17 px semibold (Abschnitt 10): "Nicht wie eine Seitenüberschrift
   behandeln." */
/* 10-15 % kompakter (Julias Nachtrag): Kopfzeile 46 -> 40 px, Titel
   15,5 -> 15 px, Klickflaechen 32 -> 30 px. Das sind 6 px Hoehe, die dem
   Blatt zugutekommen - und unter 15 px wird der Titel zur Beschriftung. */
.spido .wtitel{margin:0;font-size:15px;font-weight:600;line-height:1.2;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* DIE MARKEN AM TITEL, 11-12 px, ohne eigene Zeile (Abschnitt 11): "Sie dürfen
   keine eigene Bildschirmzeile beanspruchen." Vorher war das ein eigener
   Absatz unter dem Kopf - eine ganze Zeile für zwei Wörter, die sich nie
   ändern. */
.spido .wmarken{flex:0 1 auto;min-width:0;display:flex;gap:4px;
  align-items:center;overflow:hidden;white-space:nowrap}
/* "HANDBUCH hinter dem Titel kann kleiner/dezenter werden." */
.spido .wmarke{font-size:10px;letter-spacing:.06em;opacity:.75;
  color:var(--spido-text-leise,#6b6b73)}
.spido .wmarke + .wmarke::before{content:"· ";color:var(--spido-linie,#e7e3de)}
.spido .wunterzeile{margin:0;padding:4px 12px;font-size:11.5px;background:#fff;
  color:var(--spido-text-leise,#6b6b73);
  border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .wtaten{margin-left:auto;display:flex;align-items:center;gap:4px;
  flex:0 0 auto}
/* Klickfläche 32-36 px, Symbol 16-18 px (Abschnitt 10): "Nicht 40-50 px große
   sichtbare Symbole." */
.spido .wtat{height:30px;width:30px;padding:0;border:0;border-radius:7px;
  background:none;color:var(--spido-text-2,#4a4441);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.spido .wtat svg{width:17px;height:17px}
/* Der Speicherstand ist ein Haken (Abschnitt 12), kein Satz. */
.spido .wtaten .dstand{display:inline-flex;align-items:center;width:26px;
  height:32px;justify-content:center;color:#1f8a4c}
.spido .wtaten .dstand svg{width:15px;height:15px}
.spido .wtaten .dstand.laeuft{color:var(--spido-text-leise,#6b6b73)}
.spido .wtaten .dstand.fehl{color:#b3261e}
/* Im Mehr-Fach stehen Knöpfe und Verweise nebeneinander - sie sollen gleich
   aussehen. */
.spido .wmehrzeile{display:block;width:100%;text-align:left;border:0;
  background:none;font:inherit;font-size:13px;padding:7px 12px;cursor:pointer;
  color:inherit}
.spido .wmehrzeile:hover{background:#f6f4f1}
.spido .wfachtitel{margin:0;padding:8px 12px 3px;font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--spido-text-leise,#6b6b73)}
.spido .wmehrzeile[aria-pressed="true"]{color:var(--spido-purple,#7c3aed);
  font-weight:600}
.spido .wmehrzeile[aria-pressed="true"]::after{content:" ✓"}
.spido .wtat:hover{background:#f2efe9;color:var(--spido-purple,#7c3aed)}
.spido .wtat:focus-visible{outline:2px solid var(--spido-purple,#7c3aed);outline-offset:1px}
.spido .wtat[disabled]{opacity:.35;cursor:default}
.spido .wtat[disabled]:hover{background:none;color:var(--spido-text-2,#4a4441)}

/* --- Die Bühne: hier liegt die Seite ------------------------------------- */
/* DIE BUEHNE BRINGT IHRE HOEHE SELBST MIT und verlaesst sich nicht darauf,
   dass die Spalte darueber eine hat. Die Anordnung von `mitchat` steht auf
   `align-items:start` (25.09.2026, abgenommen): die Spalten sind so hoch wie
   ihr Inhalt. Eine Buehne mit `flex:1` waere darin unendlich hoch, der
   Seitenfuss mit ‹ 2 / 4 › rutschte aus dem Bild, und `overflow:auto` griffe
   nie. Deshalb eine Rechnung statt eines Anteils - und `min-height`, damit
   auf einem flachen Fenster nicht ein Streifen uebrig bleibt. */
/* DIE BÜHNE. Rand 16-24 px (Abschnitt 16): "Aktuell liegt die Seite mit sehr
   großzügigem Abstand in der Dokumentfläche. Reduzieren."

   KEIN WAAGERECHTES ROLLEN im Normalzustand (Abschnitte 6 und 18). Das war auf
   Julias Bild zu sehen, und die Ursache war nicht der Rand: `transform` ändert
   am Platzbedarf im Fluss nichts, eine auf 75 % verkleinerte Seite belegte
   weiterhin 210 mm. Deshalb trägt jetzt `#wskala` die gerechnete Größe und
   `#wblatt` die Verkleinerung — ein Platzhalter außen, die Seite innen. Bei
   100 % ist waagerechtes Rollen ausdrücklich erlaubt; dann steht `vollmass`
   daran.

   Die Höhenrechnung: vorher 215 px für Kopf und Fuß, jetzt 150 — die
   Kopfzeile ist 46 px hoch und die Fußleiste ist ganz entfallen. */
/* IM EINGEPASSTEN ZUSTAND GIBT ES NICHTS ZU ROLLEN (Julia, 28.09.2026 abends,
   Abschnitt 27 - sie nennt es ausdrücklich eine globale Acceptance Condition):
   "Es darf dafür weder horizontal noch vertikal gescrollt werden müssen."
   Und Abschnitt 28 verbietet "Scrollzwang für eine normale
   A4-Gesamtseitenansicht" ausdrücklich.

   `overflow:hidden` ist deshalb die richtige Voreinstellung und nicht `auto`:
   eine Rollleiste, die nie gebraucht wird, verschwindet zwar von selbst — sie
   nimmt aber vorher Breite weg, und das verfälscht die Rechnung, die dafür
   sorgt, dass sie nicht gebraucht wird.

   Die Höhe setzt das Skript (gemessen, nicht gerechnet); hier steht nur eine
   Untergrenze für den Fall, dass es nicht läuft.

   Bei bewusster Vergrößerung auf 75 % oder 100 % ist beides erlaubt
   (Abschnitt 12: "Bei 100 % darf Scrollen innerhalb der Dokumentfläche
   entstehen"). */
/* HOECHSTENS 16 PX (Julias Abnahmekriterium): "Zwischen Viewer-Toolbar und
   Blatt sowie zwischen Blatt und unterem Viewerrand dürfen jeweils maximal
   16 px ungenutzter vertikaler Raum liegen." Hier 14, damit auch der Schatten
   des Blattes noch hineinpasst. */
/* 6 PX STATT 14. Julia: „Oben soll sie noch zwei Zentimeter höher sein und
   unten noch zwei Zentimeter nach unten verlängert werden ... Die Seite ist
   noch zu klein und verschenkt nach oben und unten zu viel Platz." Zusammen
   mit der schwebenden Leiste ist damit alles geholt, was der Bildschirm
   hergibt — mehr ginge nur, indem die Seite unten abgeschnitten würde. */
.spido .wbuehne{position:relative;min-height:12rem;overflow:hidden;
  padding:6px 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
/* EIN BOGEN ROLLT, ER WIRD NICHT EINGEPASST (MYS-266, 21.10.2026).
   Er nimmt den Platz der Bühne ein, aber er ist nicht sie: in ihr steht ein
   A4-Blatt, das der Seitenbau gebaut und `einpassen()` auf die Fläche
   gerechnet hat. Ein Bogen kommt als `iframe srcdoc` (oder als Folge von
   SIS-Seitenbildern) und bricht seine Seiten selbst um — von außen ist er
   EIN Block von rund 2.100 px. Eingepasst wäre er bei Skala 0,36 sichtbar
   und nicht lesbar; deshalb `overflow:auto` statt `hidden` und kein
   `justify-content:center`, das einen zu hohen Inhalt oben abschneidet.
   Die Begründung in ganzer Länge steht an `_renderflaeche` in `web.py`. */
.spido .wbogen{position:relative;min-height:12rem;overflow:auto;
  padding:44px 14px 14px;
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  flex:1 1 auto}
.spido .wbuehne.vollmass{overflow:auto}
/* Vergrößert beginnt die Seite oben, nicht in der Mitte: `justify-content`
   zentriert sonst einen Inhalt, der höher ist als die Bühne, und man landet
   mitten im Text. */
.spido .wbuehne.vollmass{justify-content:flex-start}
/* UND DASSELBE WAAGERECHT (16.10.2026) - dieselbe Falle eine Achse weiter,
   und dort ist sie schlimmer als "mitten im Text". `align-items: center`
   zentriert auch ein Blatt, das BREITER ist als die Buehne: der Ueberhang
   geht dann nach BEIDEN Seiten, und was links hinausragt, ist mit keinem
   Rollbalken erreichbar - ein Flexkasten gibt in die Startrichtung keinen
   Rollbereich frei. Julia, 16.10.2026, mit Bildschirmfoto zu 1.03.04:
   "links ist abgeschnitten und ich kann nicht blaettern".
   `margin-inline: auto` an der Skala statt der Zentrierung am Kasten
   zentriert weiter, solange Platz ist, und loest sich auf 0 auf, sobald
   keiner mehr da ist - dann beginnt das Blatt links und ist vollstaendig
   erreichbar. NUR im Vollmass: eingepasst ist das Blatt nie breiter als die
   Buehne, und dort bleibt die Zentrierung, die Julia abgenommen hat. */
.spido .wbuehne.vollmass{align-items:flex-start}
.spido .wbuehne.vollmass > .wskala{margin-inline:auto}
/* Die Größe setzt das Skript — hier steht nur, dass die Seite nicht mitwächst. */
.spido .wbuehne > .wskala{flex:0 0 auto;position:relative}

/* DAS BLATT. Feste Millimeter - das ist der ganze Punkt von Abschnitt 6. */
/* DAS BLATT UND DER STAPEL.

   HIER STAND EIN SPALTENLAYOUT. Der Inhalt lief in CSS-Spalten von einer
   Seitenhoehe, und eine Spalte war eine Seite. Das war elegant und hat
   viermal nicht funktioniert: in einem Spaltenlayout entscheidet der Browser,
   was wohin kommt, er kennt keinen Tabellenkopf, der sich wiederholt, und
   `break-after: avoid` am Kopf heisst fuer ihn "schiebe ihn so weit nach
   hinten, bis er beim Koerper steht" - also ans Ende der Spalte davor. Genau
   dort hat Julia ihn viermal gesehen.

   Jetzt baut das Skript die Seiten selbst (siehe `_BLATTSKRIPT`). Hier steht
   nur noch, wie eine Seite aussieht. */
.spido .dstapel{display:flex;flex-direction:column;gap:0}
/* DAS BLATT IST EINE SPALTE: Kopf, Inhalt, Fuss. Die Inhaltsflaeche nimmt,
   was die beiden uebriglassen - vorher stand ihre Hoehe als 257 mm fest im
   Stilblatt, und das stimmte nur, solange keine Fusszeile im Blatt war.
   Jede gebaute Seite hat jetzt eine (Julias Mastervorgabe), und auf der
   ersten steht zusaetzlich der Kopf. Zwei feste Zahlen fuer drei
   verschiedene Seitenaufbauten koennen nicht stimmen; eine Spalte braucht
   keine. */
/* DIE MASSE STEHEN IN `dokument.css`, NICHT HIER. Sie standen an drei
   Stellen und ergaben drei verschiedene Blaetter; jetzt gibt es je Mass eine
   Zahl, und sie kommt aus dem Master. Wer sie sucht: `:root` ganz oben in
   `dokument.css`. */
.spido .dblatt{width:var(--blatt-breite,210mm);height:var(--blatt-hoehe,297mm);
  padding:var(--blatt-rand-oben,12mm) var(--blatt-rand-seite,12mm)
          var(--blatt-rand-unten,17mm);
  box-sizing:border-box;
  display:flex;flex-direction:column;
  background:#fff;overflow:hidden;position:relative;
  box-shadow:0 2px 14px rgba(60,45,30,.16)}
.spido .dblatt[hidden]{display:none}
.spido .dblatt.quer{width:var(--blatt-hoehe,297mm);height:var(--blatt-breite,210mm)}
/* Die Schreibflaeche einer Seite - genau die Masse, die auch `@page` setzt. */
.spido .dblatt > .dokument{display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;width:100%}
.spido .dblatt .dkopf{flex:0 0 auto}
.spido .dblatt .dfuss{flex:0 0 auto;margin-top:auto}
/* DIE SEITENZAHL SCHWEBT IN DER ECKE DER FUSSZEILE.

   Sie stand als zweites Flex-Kind daneben - und das war ein Messfehler mit
   Folgen: beim Verteilen des Inhalts ist sie noch leer, den Text bekommt sie
   erst, wenn die Zahl der Seiten feststeht. Dadurch wurde die Fusszeile
   NACH dem Verteilen breiter belegt, der lange vorgegebene Text brach in
   eine zweite Zeile um, die Fusszeile wuchs, und der Inhalt lief unten aus
   dem Blatt hinaus - gemessen an 1.03.09, 1.13.02, 2.04.01 und 2.04.02.

   Absolut in der Ecke, und der Platz dafuer steht als `padding-right` von
   Anfang an fest. Damit ist die Hoehe der Fusszeile beim Verteilen dieselbe
   wie hinterher. */
.spido .dblatt .dfuss{position:relative;padding-right:30mm}
.spido .dseitenzahl{position:absolute;right:0;bottom:0;white-space:nowrap}
.spido .dseite{flex:1 1 auto;min-height:0;overflow:hidden}
/* DIE QUELLE IST SICHTBAR, BIS DIE SEITEN STEHEN.

   Sie war von Anfang an versteckt - und am 28.09.2026 abends war deshalb
   GAR NICHTS zu sehen, als das Skript beim zweiten Durchlauf den Stapel
   leerte. Ein Dokument, das nur existiert, wenn ein Javascript durchlaeuft,
   ist ein Dokument auf Widerruf.

   Jetzt steht hier das ganze Dokument, bis das Skript `fertig` setzt. Ohne
   Javascript, bei einem Fehler oder in einem Browser, der anders rechnet,
   sieht man eine lange Seite statt einer leeren - unschoen, aber
   vollstaendig.

   `display:none` waere auch im versteckten Zustand falsch: ein solches
   Element hat keine Hoehe, und das Skript muesste raten. */
.spido .dquelle{width:var(--blatt-breite,210mm);margin:0 auto;background:#fff;padding:var(--blatt-rand-oben,12mm) var(--blatt-rand-seite,12mm) var(--blatt-rand-unten,17mm);box-sizing:border-box;
  box-sizing:border-box}
.spido .dquelle.fertig{position:absolute;left:-10000px;top:0;
  visibility:hidden;pointer-events:none;padding:0;background:none}
/* Eine Tabellenfortsetzung schliesst oben buendig an - ohne den Abstand, den
   eine neue Tabelle sonst bekommt. */
.spido .dseite table[data-fortsetzung]{margin-top:0}

/* ZEILEN HINZUFUEGEN (MYS-208, Julia 14.10.2026: „Bei allen
   Handbuchdokumenten muss das möglich sein.").

   SIE LIEGT IM BLATTRAND UND NICHT IM FLUSS, und das ist die ganze
   Begruendung dieser Regeln. Julia, 28.09.2026 abends: „Auch darf es keinen
   Unterschied geben zwischen der normalen Ansicht und der Aenderungsansicht
   bzgl. der Formatierung. ... Die Ansicht muss komplett deckungsgleich
   sein." Ein Knopf im Fluss - und eine Knopfzeile in der Tabelle ist einer -
   macht das Blatt im Bearbeitungsmodus hoeher und verschiebt die Umbrueche.
   `position:absolute` im `.dblatt` aendert keine Zeile Layout; dieselbe
   Begruendung wie beim Lupenfall und bei der Werkzeugleiste.

   `translate(-100%,-100%)` setzt die untere rechte Ecke der Bedienung an die
   untere LINKE Ecke der Tabelle: sie steht damit im seitlichen Blattrand
   (12 mm) neben dem Ende der Tabelle und ueberdeckt keinen Fachinhalt.

   DIE GROESSE HAENGT AM GEGENMASS. Der ganze Stapel steht unter
   `transform: scale(s)`; `--dok-gegenmass` ist `1/s` und wird von
   `einpassen()` in `dokumentrenderer.js` gesetzt - ohne es waere der Knopf
   bei eingepasstem Blatt fuenf Pixel gross. */
.spido .dblatt .dzeilen{position:absolute;z-index:3;
  display:flex;flex-direction:column;gap:2px;
  transform:translate(-100%,-100%);
  font-size:calc(11px * var(--dok-gegenmass,1));line-height:1;
  margin-left:-2px}
.spido .dblatt .dzeilen button{width:1.75em;height:1.75em;padding:0;
  font:inherit;font-weight:600;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #d9d4e8;border-radius:50%;background:#fff;color:#6d28d9;
  box-shadow:0 1px 3px rgba(60,45,30,.14)}
.spido .dblatt .dzeilen button:hover{background:#efeaf8}
.spido .dblatt .dzeilen button[disabled]{opacity:.3;cursor:default;
  box-shadow:none}

.spido .dblatt .dokument{padding:0;border:0;box-shadow:none;border-radius:0;
  max-width:none;background:none}
/* Und hier stand die dritte - sie stellte im Blatt wieder her, was die
   zweite weggenommen hatte. `dokument.css` macht beide ueberfluessig. */
.spido .dblatt .dinhalt{min-height:0}

/* NEBENSACHEN UNTER DER SEITE. Änderungsverlauf und was Spido zu diesem
   Dokument getan hat, gehören zum Objekt - aber nicht auf das Blatt und nicht
   in die Leiste. Sie stehen unter der Seite und scrollen mit ihr: wer sie
   sucht, findet sie; wer das Dokument liest, sieht sie nicht. */
.spido .wnebensache{width:min(var(--blatt-breite,210mm),100%);margin:14px 0 0;padding:0 14px;
  font-size:13px}
.spido .wnebensache:empty{display:none}
/* Die Zeile, die erscheint, wenn die Seitenaufteilung nicht geklappt hat.
   Sie ist ein Hinweis und keine Warnung: das Dokument steht darunter, nur
   eben ungeteilt. */
.spido .wnotzeile{margin:8px auto;padding:6px 12px;width:min(var(--blatt-breite,210mm),100%);
  font-size:12.5px;color:var(--spido-text-2,#4a4441);
  background:#fdf6e3;border:1px solid #e8d9a8;border-radius:8px}
.spido .wnebensache h3{font-size:13px;margin:14px 0 6px}

/* Die vorhandenen Dokumentaktionen stehen jetzt in der Leiste der
   Arbeitsfläche. Sie behalten ihr Aussehen, nur die Höhe wird angeglichen -
   28 px wie die übrigen Knöpfe dort, sonst springt die Zeile. */
/* EINE TOOLBAR, EINE GEOMETRIE (Julia, 29.09.2026): "Momentan wirken ✓ ·
   Stift · Drucker · Download · … · 100 % · X wie einzelne Elemente
   unterschiedlicher Systeme. Alle Controls bekommen dieselbe
   Toolbar-Geometrie: Iconbox 32 x 32 px, Icon selbst ca. 17-18 px, gleiche
   vertikale Mitte, gleiche Strichstaerke, gleicher Abstand."

   Die Groessen standen vorher an fuenf Stellen verschieden: 28 px fuer die
   Dokumentaktionen, 26 px in der Seitenleiste, der Massstab als Textknopf
   mit eigener Breite. Hier steht die eine Zahl, die fuer alle gilt. */
.spido .wtaten{display:flex;align-items:center;gap:4px}
.spido .wtaten .tat,.spido .wtaten .wtat,.spido .wtaten summary{
  width:32px;height:32px;display:inline-flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.spido .wtaten .tat svg,.spido .wtaten .wtat svg,
.spido .wtaten summary svg{width:17px;height:17px}
.spido .wtaten .tat.mittext{width:auto;padding:0 9px;gap:5px}
.spido .wtaten .tat.mittext{width:auto;padding:0 9px;gap:5px}
.spido .wtaten .dstand{font-size:11.5px;margin-right:4px;white-space:nowrap}
/* DER ZOOM IST EIN KNOPF MIT ZWEI ZUSTAENDEN (Julia, 29.09.2026): "nur ein
   plus erscheinen, um die 100% Groesse von heute zu erreichen und von dort
   sieht man das Minus, dann wird die Seite wieder eingepasst. Andere
   Groessen gibt es nicht."

   Beide Sinnbilder stehen im Markup; sichtbar ist immer genau eines. Das
   spart ein Skript, das Pfade austauscht - und der Knopf kann seine Groesse
   nicht aendern, waehrend man darauf klickt. */
.spido .wmasstab .wzoomzu{display:none}
.spido .wmasstab[aria-pressed="true"] .wzoomauf{display:none}
.spido .wmasstab[aria-pressed="true"] .wzoomzu{display:inline-flex}
.spido .wmasstab{width:32px;padding:0}
.spido .wtaten .tatform{display:inline-flex;margin:0}
.spido .wtaten .exportmenue{position:relative}

/* --- DIE SEITENZAHL SCHWEBT (Abschnitt 17) ------------------------------
   "Sehr klein und schwebend bzw. am unteren Rand des Dokumentbereichs.
   Richtwert Höhe: 32-36 px. Keine große eigene Fußzeile."

   Sie hatte eine: eine Reihe über die ganze Breite mit eigenem Hintergrund,
   dem Seitenkasten und dem Knopf für die Übersicht — rund 50 px, die das Blatt
   nach oben gedrückt haben. Jetzt liegt sie über der Seite und nimmt keinen
   Platz im Fluss (negativer oberer Abstand), und bei einem einseitigen
   Dokument ist sie gar nicht da. */
.spido .wseite{position:sticky;bottom:6px;align-self:center;z-index:3;
  display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 3px;
  margin-top:-32px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--spido-linie,#e7e3de);border-radius:18px;
  box-shadow:0 1px 6px rgba(60,45,30,.1)}
.spido .wseite[hidden]{display:none}
.spido .wseite output{min-width:3.4rem;text-align:center;font-size:12px;
  color:var(--spido-text-2,#4a4441)}
.spido .wseite .wtat{height:26px;width:26px}
.spido .wseite .wtat svg{width:15px;height:15px}
/* Die Seitenübersicht (Abschnitt 10): Thumbnails, Klick führt zur Seite. */
.spido .wminiaturen{display:none;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:10px 14px;background:#f6f4f1;
  border-top:1px solid var(--spido-linie,#e7e3de)}
.spido .wminiaturen.auf{display:flex}
.spido .wmini{width:74px;height:105px;padding:0;background:#fff;cursor:pointer;
  border:1px solid var(--spido-linie,#e7e3de);border-radius:3px;
  font:inherit;font-size:12px;color:var(--spido-text-leise,#6b6b73);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}
.spido .wmini[aria-current="true"]{border-color:var(--spido-purple,#7c3aed);
  box-shadow:0 0 0 2px var(--spido-purple-hell,#f5f0ff);
  color:var(--spido-purple,#7c3aed);font-weight:600}

/* DRUCKEN (Punkt 11). Kein eigener Weg und keine zweite Darstellung: der
   Browser druckt dieselbe Seite, und hier verschwindet alles, was nicht das
   Dokument ist - Navigation, Knoepfe, Hinweise der Anwendung. Ueber
   `visibility` und nicht ueber `display`, weil das unabhaengig davon wirkt, wie
   die Schale drumherum gerade heisst: eine umbenannte Klasse darf nicht dazu
   fuehren, dass die Navigation mitgedruckt wird. */
@media print{
  /* WAS NICHT DAS DOKUMENT IST, VERSCHWINDET - und zwar ueber `display`, nicht
     nur ueber `visibility`. Ein Element, das nur unsichtbar ist, behaelt
     seinen Platz: die Leiste, die Buehne und die Miniaturen schoben die erste
     Seite nach unten und erzeugten ein leeres erstes Blatt. */
  .spido .wkopf,.spido .woben,.spido .wseite,.spido .wminiaturen,
  .spido .wnebensache,.spido .wwerkzeug,.spido .dquelle{display:none!important}
  /* DIE ZEILENBEDIENUNG IST NIE PAPIER (MYS-208). Gebaut wird sie ohnehin
     nur im Bearbeitungsmodus und nie auf der Druckseite (`druck` in
     `dokumentrenderer.js`); wer aber aus der Bearbeitung heraus Strg+P
     drueckt, druckt das Blatt, auf dem sie steht. Der Riegel liegt deshalb
     an beiden Enden. */
  .spido .dblatt .dzeilen{display:none!important}
  .spido *{visibility:hidden}
  .spido .dblatt,.spido .dblatt *{visibility:visible}
  /* HIER STAND `.dokument { position: absolute; left: 0; top: 0 }` - UND DAS
     WAR DER GRUND, WARUM JULIA DIE DRUCKANSICHT DREIMAL GEMELDET HAT.

     Die Regel war richtig, solange EIN Dokumentkoerper auf der Seite stand.
     Seit jede gebaute Seite ihren eigenen `<article class="dokument">`
     traegt, legt sie ALLE SEITEN AUF DIESELBE STELLE. Der Browser druckte
     ein Knaeuel aus uebereinanderliegenden Seiten, und `break-after: page`
     konnte nichts trennen, was gar nicht im Fluss stand.

     Nichts liegt mehr absolut. Die Seiten stehen untereinander, so wie am
     Bildschirm, und alles darum herum gibt seinen Platz her. */
  .spido .wbuehne{display:block!important;overflow:visible!important;
    height:auto!important;padding:0!important;min-height:0!important}
  .spido .wskala{width:auto!important;height:auto!important;
    transform:none!important;margin:0!important}
  .spido .dokument{border:0;box-shadow:none;border-radius:0;background:#fff}
  .spido .dinhalt{min-height:0}
  /* DAS BLATT IST FUER DEN BILDSCHIRM. Beim Drucken macht `@page` die
     Seitengroesse - das Blatt gibt seine feste Hoehe her, damit eine Seite,
     die knapp ueberlaeuft, kein zweites leeres Blatt nach sich zieht. */
  /* EIN GEBAUTES BLATT IST EINE DRUCKSEITE - GENAU EINE.

     Hier stand `width:auto; height:auto`: das Blatt gab seine Geometrie her
     und der Browser durfte neu rechnen. Das Ergebnis war ein Blatt, das
     knapp ueber die Druckseite hinausragte und eine zweite anfing -
     gemessen am 29.09.2026: Pflegevisite 3 Seiten am Bildschirm, 4 im PDF;
     Basishygieneplan 5 gegen 7.

     `@page` gibt 20 mm oben, 16 mm unten und 18 mm seitlich ab - es bleiben
     174 x 261 mm. Genau das bekommt das Blatt, und seinen eigenen Rand legt
     es dafuer ab: er steckt schon in den Seitenraendern. Damit ist eine
     Blattseite eine Druckseite, und die Seitenzahl am Bildschirm ist die
     Seitenzahl auf dem Papier.

     Das ist auch Julias Regel aus der Architekturentscheidung vom
     29.09.2026: feste A4-Geometrie, kein Reflow. Beim Drucken gilt sie
     genauso wie am Bildschirm. */
  /* DIESELBEN MASSE WIE AM BILDSCHIRM, NICHT AEHNLICHE. Hier standen
     174 × 261 mm, waehrend das Blatt am Bildschirm 174 × 257 mm Satzspiegel
     hatte - vier Millimeter Unterschied zwischen Vorschau und Papier, an
     einer Stelle, an der beide dasselbe zeigen sollen. Jetzt rechnen beide
     mit den abgeleiteten Werten aus `dokument.css`. */
  .spido .dblatt{width:var(--satz-breite,186mm);height:var(--satz-hoehe,268mm);
    padding:0;overflow:hidden;
    box-sizing:border-box;box-shadow:none;display:flex;flex-direction:column}
  .spido .dblatt.quer{width:var(--satz-breite-quer,273mm);
    height:var(--satz-hoehe-quer,181mm)}
  .spido .dblatt > .dokument{display:block;height:auto}
  /* `!important` GEGEN DEN INLINE-STIL. Das Blaettern setzt `transform` am
     Element selbst, und ein Inline-Stil schlaegt jede gewoehnliche Regel -
     gedruckt wurde eine um zwei Spalten verschobene Seite. Das Skript raeumt
     ihn bei `beforeprint` ohnehin weg; diese Zeile ist der Gurt dazu, fuer
     den Fall dass kein Javascript laeuft. */
  /* BEIM DRUCKEN STEHEN ALLE SEITEN UNTEREINANDER. Das Skript blendet sie
     bei `beforeprint` ein und nimmt die Skalierung heraus; hier bekommt jede
     einen Seitenumbruch dahinter, damit eine Blattseite auch ein Blatt wird.
     Dieselbe Seitenfolge wie am Bildschirm - keine zweite Rechnung. */
  .spido .dstapel{transform:none!important;display:block}
  .spido .dblatt{break-after:page;page-break-after:always}
  .spido .dblatt:last-child{break-after:auto;page-break-after:auto}
  .spido .dseite{height:auto;overflow:visible;display:block}
  /* DIE SCHALE GIBT IHRE HOEHE HER.

     `.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit))` traegt
     `height: 100dvh; overflow: hidden` - fuer den Bildschirm genau richtig,
     beim Drucken toedlich: der Browser bekommt eine Seite von
     Bildschirmhoehe, und alles danach faellt unter `overflow: hidden`.

     GEMESSEN AM 29.09.2026: Pflegevisite 3 Seiten am Bildschirm, 1 Seite im
     PDF. Die Regel steht in keiner Medienabfrage und galt deshalb auch auf
     Papier - sie war der Grund, warum die Druckansicht dreimal nicht
     stimmte, und sie stand ausserhalb des Druckblocks, in dem ich
     gesucht habe.

     `werkzeuge/darstellung-probe.py --pdf` zaehlt ab jetzt beide Seiten
     und vergleicht sie. */
  .spido.app,
  .spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)){height:auto!important;
    min-height:0!important;overflow:visible!important;display:block!important}
  .spido .arbeitsraum,.spido .dokspalte,.spido .main{display:block!important;
    height:auto!important;min-height:0!important;overflow:visible!important}
  .spido .chatspalte,.spido .kontextspalte{display:none!important}
  .spido .dquelle{display:none}
}
.spido .dblatt .dinhalt{min-height:0}

/* NEBENSACHEN UNTER DER SEITE. Änderungsverlauf und was Spido zu diesem
   Dokument getan hat, gehören zum Objekt - aber nicht auf das Blatt und nicht
   in die Leiste. Sie stehen unter der Seite und scrollen mit ihr: wer sie
   sucht, findet sie; wer das Dokument liest, sieht sie nicht. */
.spido .wnebensache{width:min(var(--blatt-breite,210mm),100%);margin:14px 0 0;padding:0 14px;
  font-size:13px}
.spido .wnebensache:empty{display:none}
.spido .wnebensache h3{font-size:13px;margin:14px 0 6px}

/* Die vorhandenen Dokumentaktionen stehen jetzt in der Leiste der
   Arbeitsfläche. Sie behalten ihr Aussehen, nur die Höhe wird angeglichen -
   28 px wie die übrigen Knöpfe dort, sonst springt die Zeile. */
/* HIER STANDEN 28 PX FUER DIESELBEN KNOEPFE - und weil diese Regel SPAETER
   steht, hat sie die einheitliche Toolbargeometrie weiter oben geschlagen.
   Gefunden von `werkzeuge/stilblatt-probe.py`, noch bevor Julia es sah.
   Die Groessen stehen jetzt an einer Stelle, bei `.wtaten`. */
.spido .wtaten .dstand{font-size:11.5px;margin-right:4px;white-space:nowrap}
.spido .wtaten .tatform{display:inline-flex;margin:0}
.spido .wtaten .exportmenue{position:relative}

/* --- DIE SEITENZAHL SCHWEBT (Abschnitt 17) ------------------------------
   "Sehr klein und schwebend bzw. am unteren Rand des Dokumentbereichs.
   Richtwert Höhe: 32-36 px. Keine große eigene Fußzeile."

   Sie hatte eine: eine Reihe über die ganze Breite mit eigenem Hintergrund,
   dem Seitenkasten und dem Knopf für die Übersicht — rund 50 px, die das Blatt
   nach oben gedrückt haben. Jetzt liegt sie über der Seite und nimmt keinen
   Platz im Fluss (negativer oberer Abstand), und bei einem einseitigen
   Dokument ist sie gar nicht da. */
.spido .wseite{position:sticky;bottom:6px;align-self:center;z-index:3;
  display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 3px;
  margin-top:-32px;
  background:rgba(255,255,255,.94);
  border:1px solid var(--spido-linie,#e7e3de);border-radius:18px;
  box-shadow:0 1px 6px rgba(60,45,30,.1)}
.spido .wseite[hidden]{display:none}
.spido .wseite output{min-width:3.4rem;text-align:center;font-size:12px;
  color:var(--spido-text-2,#4a4441)}
.spido .wseite .wtat{height:26px;width:26px}
.spido .wseite .wtat svg{width:15px;height:15px}
/* Die Seitenübersicht (Abschnitt 10): Thumbnails, Klick führt zur Seite. */
.spido .wminiaturen{display:none;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:10px 14px;background:#f6f4f1;
  border-top:1px solid var(--spido-linie,#e7e3de)}
.spido .wminiaturen.auf{display:flex}
.spido .wmini{width:74px;height:105px;padding:0;background:#fff;cursor:pointer;
  border:1px solid var(--spido-linie,#e7e3de);border-radius:3px;
  font:inherit;font-size:12px;color:var(--spido-text-leise,#6b6b73);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px}
.spido .wmini[aria-current="true"]{border-color:var(--spido-purple,#7c3aed);
  box-shadow:0 0 0 2px var(--spido-purple-hell,#f5f0ff);
  color:var(--spido-purple,#7c3aed);font-weight:600}

/* DRUCKEN - DIE REGELN STEHEN WEITER OBEN, BEI `.dstapel`.

   HIER STAND EIN ZWEITER `@media print`-BLOCK, und in ihm die Zeile
   `.spido .dokument { position: absolute; left: 0; top: 0 }`. Das war der
   Grund, warum Julia die Druckansicht dreimal gemeldet hat - und warum die
   Korrektur am ersten Block nichts brachte: dieser Block stand SPAETER im
   Stilblatt und hat den ersten ueberschrieben.

   Seit jede gebaute Seite ihren eigenen `<article class="dokument">`
   traegt, legt die Regel alle Seiten auf dieselbe Stelle. Ein Knaeuel,
   durch das kein `break-after: page` schneiden kann - denn nichts davon
   steht noch im Fluss.

   ZWEI BLOECKE FUER DASSELBE SIND EINER ZU VIEL. Im Kommentar des alten
   Blocks stand bereits "eine Stelle, nicht zwei" - und daneben stand er
   selbst. `werkzeuge/darstellung-probe.py` prueft ab jetzt jede Druckregel
   daraufhin, ob sie die Seiten uebereinanderlegt, egal in welchem Block
   sie steht. */

/* Die Farbe des QM-Handbuchs (Julia, 25.09.2026). Sie kommt heute aus dem
   Master und wird spaeter von der Hausfarbe des Pflegedienstes gesetzt: "Alle
   QM-Dokumente eines Pflegedienstes bilden zusammen ein einheitliches
   QM-Handbuch und verwenden deshalb dieselbe Dokument-Designvorlage."

   Die Abschnittsbalken sind das sichtbarste Merkmal des Originals - weisse
   Schrift auf dunkler Flaeche. Ohne Farbe bleibt es bei der ruhigen Fassung;
   erfunden wird keine. */
.spido .dokument .dinhalt h2{background:var(--dok-farbe,transparent);
  color:var(--dok-farbe-text,inherit);padding:4px 9px;border-radius:3px}
.spido .dokument[style*="--dok-farbe"] .dtitel{color:var(--dok-farbe)}
.spido .dokument .dinhalt .fig svg{width:100%;height:auto}
/* ---------------------------------------------------------------------------
   HANDBUCHDESIGN (Julia, 25.09.2026): Logo, Hausfarbe und die Vorschau.

   "Das ist eigentlich der wichtigste Teil. Im Bereich Gestaltung & Dokumente
   sollte der Benutzer direkt sehen: So sieht dein QM-Handbuch aus." Deshalb
   liegen Einstellung und Vorschau nebeneinander und nicht untereinander -
   wer die Farbe schiebt, sieht die Wirkung, ohne zu scrollen.
   -------------------------------------------------------------------------*/
.spido .designblock{display:grid;gap:20px 26px;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));align-items:start}
.spido .designspalte h3.fgroup:first-child{margin-top:0}
.spido .logovorschau{max-width:14rem;max-height:6rem;display:block;margin:0 0 10px;
  background:#fff;border:1px solid var(--spido-linie,#e7e3de);border-radius:8px;
  padding:8px;object-fit:contain}
.spido .logoform{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.spido .logoform input[type=file]{font:inherit;font-size:14px}
.spido .farbform{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spido .farbform input[type=color]{width:52px;height:36px;padding:2px;cursor:pointer;
  border:1px solid var(--spido-linie,#e7e3de);border-radius:8px;background:#fff}
.spido .musterblatt{max-width:none;pointer-events:none}
.spido .musterblatt .dinhalt{min-height:0}

/* Das Logo im Dokumentkopf - genau dort, wo der Master es vorsieht. */
.spido .dokument .dlogo{display:block;max-height:52px;max-width:200px;
  object-fit:contain;margin:0 0 12px}

/* ---------------------------------------------------------------------------
   DREI ZONEN (Julia, 25.09.2026): "Gedacht war, dass die Ansicht rechts
   erscheint und in der Mitte noch eine kleine Chatmöglichkeit bleibt, so wie
   es auch bei ChatGPT ist."

   Ich hatte die Leiste beim geoeffneten Dokument ganz entfernt - eine Zone zu
   viel. Links die Leiste (jetzt ohne Handbuchgliederung), in der Mitte eine
   schmale Gespraechsspalte, rechts das Dokument.
   -------------------------------------------------------------------------*/
.spido .arbeitsraum.mitchat{display:grid;align-items:start}
/* DIE CARD GILT DEM GESPRAECH, NICHT DER GLIEDERUNG.

   Julia, 29.09.2026: "Die derzeitige abgerundete grosse Box um Gliederung
   und Composer entfaellt vollstaendig ... weisser Hintergrund, keine
   Rundung, kein umlaufender Rahmen, kein Schatten, kein unterer
   Kartenabschluss. Sie laeuft optisch vom oberen bis zum unteren
   verfuegbaren Viewport."

   Die Gliederungsspalte traegt BEIDE Klassen - `chatspalte kontextspalte`.
   Ihre eigene Regel weiter unten setzt `border: 0; border-radius: 0`, aber
   diese hier ist spezifischer (drei Klassen gegen eine) und hat gewonnen.
   `:not(.kontextspalte)` trennt das sauber: eine Card fuer das Gespraech,
   eine randlose Spalte fuer die Gliederung.

   Und das ist genau der Fall, den `stilblatt-probe.py` NICHT findet - sie
   vergleicht gleiche Selektoren, und diese beiden sind verschieden. Wer
   zwei Regeln fuer dasselbe Element schreibt, muss ihre Spezifitaet
   kennen. */
.spido .arbeitsraum.mitchat .chatspalte:not(.kontextspalte){position:sticky;
  top:14px;max-height:calc(100vh - 28px);display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--spido-linie,#e7e3de);border-radius:12px;
  padding:10px 12px}
.spido .arbeitsraum.mitchat .chatspalte .spurlauf{max-width:none;margin:0;
  overflow-y:auto;flex:1 1 auto;min-height:0}
.spido .arbeitsraum.mitchat .chatspalte .auftragszeile{max-width:none;margin:8px 0 0;
  gap:6px}
.spido .arbeitsraum.mitchat .chatspalte .auftragszeile input{padding:9px 12px;
  font-size:14px;border-radius:12px;box-shadow:none}
.spido .arbeitsraum.mitchat .chatspalte .auftragszeile button{padding:9px 12px;
  border-radius:11px}
.spido .arbeitsraum.mitchat .chatspalte > .fhint{max-width:none;margin:6px 0 0;
  font-size:11.5px}
.spido .arbeitsraum.mitchat .chatspalte .spureintrag{font-size:13.5px}
.spido .arbeitsraum.mitchat .dokspalte{min-width:0}
.spido .arbeitsraum.mitchat .dokflaeche{max-width:none;padding-bottom:0}
/* Die schwebende Zeile gibt es in dieser Anordnung nicht: das Gespraech hat
   seine eigene Spalte. */
.spido .arbeitsraum.mitchat .promptzeile{display:none}
/* Was bei schmalen Bildschirmen gilt, steht NACH der Aufteilung - siehe
   "DIE AUFTEILUNG (Abschnitt 4)". Hier stand es bis zum 28.09.2026, und damit
   vor ihr: ein Media Query hat keine hoehere Spezifitaet als eine gewoehnliche
   Regel, es entscheidet die Reihenfolge. Die Regel war wirkungslos, sobald
   weiter unten noch einmal `grid-template-columns` gesetzt wurde. */

/* Die Gliederung im Arbeitsbereich - 28 Gruppen, zugeklappt. */
.spido .gliederung .zgruppe{margin:0 0 2px}
.spido .gliederung .zeintrag{font-size:14px}

/* NOCH KLEINER UND WENIGER WEISS (Julia, 25.09.2026: "Insgesamt ist es immer
   noch zu groß mit zu viel weiß"). */
.spido .dokument{padding:18px 22px 14px}
.spido .dokument .dkopf{padding-bottom:7px;margin:0 0 11px}
.spido .dokument .dtitel{font-size:20px}
.spido .dinhalt{min-height:0}
.spido .zarbeit{padding:14px 18px}
.spido .dokleiste{margin:0 0 8px}

/* EXPORTIEREN AUF EINER EBENE mit Speichern und Drucken. Das <summary> des
   Aufklappers ist kein <button>: ohne gleiche Hoehe und gleiche Grundlinie
   stand es einen Hauch tiefer als die beiden daneben. */
.spido .dokaktionen{align-items:center}
.spido .dokaktionen .exportmenue>summary.btn{height:36px;line-height:36px;
  padding:0 13px;font-size:13.5px;display:inline-flex;align-items:center;
  box-sizing:border-box;margin:0}

/* Die Lenkungszeile in Minischrift (Julia, 25.09.2026): "Die Versionen sollen
   unten unter dem Dokument höchstens in Minischrift stehen, so dass sie gar
   nicht auffallen." Sie muss da sein - Arbeitsregel R-095 - aber sie ist
   Verwaltung und nicht Inhalt. */
.spido .dokument .dfuss{font-size:10px;line-height:1.35;opacity:.75;
  margin-top:14px;padding-top:7px}
.spido .dokument .dtraeger{margin:0 0 6px;font-size:11.5px}

/* Wenn rechts gearbeitet wird, tritt die Leiste zurueck (Julia, 25.09.2026:
   "Wenn die Anzeige rechts angezeigt wird, dann müsste das Menü kleiner
   werden"). Gilt fuer jede Ansicht mit Arbeitsbereich. */
/* HIER STAND `grid-template-columns: 196px minmax(0,1fr)` - UND SIE HAT
   NICHTS GETAN. Weiter unten steht dieselbe Angabe fuer denselben Selektor
   noch einmal, mit 60 px, und die spaetere Regel gewinnt. Die 196 px waren
   Julias Vorgabe vom 25.09., die 60 px ihre Praezisierung vom 28.09. - dass
   die alte Zeile stehen blieb, hat niemand gemerkt, weil sie wirkungslos
   ist. Wer sie aendert, aendert nichts.

   `werkzeuge/stilblatt-probe.py` findet solche Zeilen ab jetzt. Die Breite
   der Leiste steht weiter unten, bei Julias Praezisierung. */
.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)) .seitenleiste{padding:16px 10px 14px}
.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)) .seitenleiste .zeintrag{font-size:13.5px;padding:5px 7px}
.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)) .seitenleiste .zeintrag.gross{font-size:14px;padding:7px 8px}
.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)) .marke-logo{font-size:15px}

/* Und insgesamt noch eine Stufe kleiner. */
.spido.app{--spido-body:14.5px;--spido-body-klein:13.5px;--spido-h2:clamp(21px,1.8vw,25px)}
.spido .zarbeit{padding:12px 16px}
.spido .seitenkopf{margin-bottom:10px}
.spido .dokument{padding:16px 20px 12px}

/* Die drei Schritte einer Fortbildung (Julia, 25.09.2026): lesen, lernen,
   antworten - und jederzeit unterbrechen. Der Balken oben sagt, wo man steht. */
.spido .fbschritte{display:flex;gap:8px;list-style:none;margin:0 0 10px;padding:0;
  flex-wrap:wrap}
.spido .fbschritt{display:flex;align-items:center;gap:6px;font-size:13px;
  color:var(--spido-text-leise);padding:4px 10px;border-radius:99px;
  background:var(--spido-bg-2,#f7f3ee)}
.spido .fbschritt.jetzt{background:#f0e9ff;color:var(--spido-purple);font-weight:600}
.spido .fbnr{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;background:#fff;font-size:11px}
.spido .fbunterlagen{list-style:none;padding:0;margin:0 0 10px}
.spido .fbunterlagen li{padding:6px 0;border-bottom:1px solid var(--spido-linie,#e7e3de);
  font-size:14px}
.spido .fbgelesen{font-size:12px;color:#1f8a4c}
.spido .fbnavi{display:flex;gap:14px;align-items:center;margin-top:12px}
/* Ein erledigter Schritt ist anklickbar - zurueck, nie vor (Julia, 25.09.2026).
   Er sieht aus wie die anderen; nur der Zeiger und der Tooltip verraten, dass
   man ihn anfassen kann. Ein zweiter Knopfstil in einer Schrittleiste waere
   eine zweite Aktion, und es ist dieselbe. */
.spido .fbschritt.zurueck{padding:0;background:none}
.spido .fbschritt.zurueck form{margin:0}
.spido .fbzurueck{display:flex;align-items:center;gap:6px;font:inherit;font-size:13px;
  color:var(--spido-text);padding:4px 10px;border-radius:99px;border:0;cursor:pointer;
  background:var(--spido-bg-2,#f7f3ee)}
.spido .fbzurueck:hover{background:#f0e9ff;color:var(--spido-purple)}

/* Die Kennzeichen (Julia, 25.09.2026): "Ich würde nicht wieder große farbige
   Kästen bauen. Lieber kleine Badges." Sie sagen drei Dinge - woher der Inhalt
   stammt, dass er im Handbuch gilt, und ob man daraus Dokumente erzeugen kann. */
.spido .dabzeichen{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  margin:0 0 8px;font-size:11px}
.spido .dabz{display:inline-block;padding:1px 7px;border-radius:99px;
  letter-spacing:.06em;font-weight:600;color:var(--spido-text-leise);
  background:var(--spido-bg-2,#f7f3ee);border:1px solid var(--spido-linie,#e7e3de)}
.spido .dabz.klC{color:#7c4a12;background:#fdf6ee;border-color:#f0dcc4}
.spido .dabz.klE{color:#1d4ed8;background:#eef4ff;border-color:#bfd3f6}
/* In der Gliederung genuegt ein Buchstabe. */
.spido .zkl{margin-left:auto;font-size:10.5px;color:var(--spido-text-leise);
  letter-spacing:.06em}

/* Der Speicherstand statt eines Knopfes (Abschnitt 14). Er sagt, was ist, und
   verlangt nichts. */
.spido .dstand{font-size:12px;color:var(--spido-text-leise);margin-right:2px;
  white-space:nowrap}
.spido .dabz.klI{color:#3d5c47;background:#f2f6ed;border-color:#c9d8b4}
.spido .vorlageform{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  margin:14px 0 0}
.spido .ordnerliste{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:2px 16px;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));font-size:14px}

/* ============================================================================
   DIE SPIDO-DOKUMENTLEISTE (Julia, 25.09.2026)

   "Das ist viel eleganter als überall große Buttons wie Speichern, Drucken,
   Exportieren, Aus Vorlage erstellen nebeneinander."

   Eine Familie, ein Strichgewicht, jedes Symbol mit Tooltip. Bekannte
   Standardaktionen nur als Symbol; was niemand erraten kann - "Aus Vorlage
   erstellen", "Ins QM-Handbuch aufnehmen" - mit Text daneben.
   ========================================================================= */
.spido .tat{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 7px;
  border:0;border-radius:7px;background:none;color:var(--spido-text-2,#4a4441);
  cursor:pointer;font:inherit;font-size:13px;text-decoration:none}
.spido .tat:hover{background:#f1ecfb;color:var(--spido-purple)}
.spido .tat svg{width:18px;height:18px;flex:0 0 18px}
.spido .tat.mittext{padding:0 10px 0 8px}
.spido .tatform{display:inline-flex;margin:0}

/* ALLE AUF EINER HOEHE (Julia, 25.09.2026: "die müssten alle auf eine Höhe
   gesetzt werden die Icons").

   Die Ursache war eine Spezifitaetsfrage, keine Geschmacksfrage: weiter oben
   steht `.spido .exportmenue>summary{display:inline-block}` (0,3,1), und das
   schlaegt `.spido .tat{display:inline-flex}` (0,2,0). Exportieren und Mehr
   waren deshalb inline-block und ihr Symbol sass auf der SCHRIFT-Grundlinie,
   waehrend Bearbeiten und Drucken es mittig im Flexkasten trugen. Zwei
   Ausrichtungen in einer Leiste - und drei Pixel Versatz sieht man.

   Hier wird beides festgenagelt: dieselbe Hoehe, dieselbe Ausrichtung, und das
   Symbol als Block, damit unter ihm keine Zeilenabstandslinie mehr liegt. */
.spido .dokaktionen{align-items:center}
.spido .dokaktionen>*{align-self:center}
.spido .dokaktionen .exportmenue{display:inline-flex;align-items:center;height:30px}
.spido .dokaktionen .exportmenue>summary.tat,
.spido .dokleiste .exportmenue>summary.tat{display:inline-flex;align-items:center;
  justify-content:center;height:30px;line-height:0;list-style:none}
.spido .dokaktionen .exportmenue>summary.tat::-webkit-details-marker{display:none}
.spido .dokaktionen .tat,
.spido .dokaktionen .tatform>.tat{height:30px;min-width:30px;justify-content:center;
  line-height:0}
.spido .dokaktionen .tat.mittext{justify-content:flex-start;line-height:1}
.spido .tat svg,.spido .dstand svg{display:block}
.spido .dstand{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  color:var(--spido-text-leise);margin-right:4px;white-space:nowrap}
.spido .dstand svg{width:15px;height:15px;color:#1f8a4c}

/* Dokument: A4-nah, ruhig, kompakt (Abschnitte 9 bis 12 der Spezifikation). */
.spido .dokflaeche{max-width:62rem}
.spido .dokument{border-radius:5px;padding:26px 30px 20px;
  box-shadow:0 1px 4px rgba(60,45,30,.08)}
.spido .dinhalt li + li{margin-top:2px}
.spido .dokument .dtitel{font-size:22px}
/* Kapitelbalken: 30-32px hoch, 16-17px halbfett - keine 45er Balken. */
/* Die Fortbildungsuebersicht - eine Tabelle, die man ausdrucken kann. */
.spido .fbtabelle{width:100%;border-collapse:collapse;font-size:14px}
.spido .fbtabelle th{text-align:left;font-weight:600;border-bottom:1px solid
  var(--spido-linie,#e7e3de);padding:5px 7px}
.spido .fbtabelle td{padding:4px 7px;border-bottom:1px solid var(--spido-linie,#e7e3de);
  vertical-align:top}
.spido .fbtabelle tr.pkopf td{padding-top:12px;border-bottom:0}
.spido .zbestanden{color:#1f8a4c}
.spido .zversucht{color:#9a3412}

/* ============================================================================
   DIE MASSE AUS JULIAS SPEZIFIKATION VOM 25.09.2026 - jetzt vollstaendig.

   Sie hatte recht: mehrere Vorgaben standen in der Spezifikation und nicht im
   Blatt. Das hier ist der letzte Block zu diesem Thema; was darin steht, gilt,
   und frueheres wird davon ueberschrieben.

       Navigation im Arbeitsmodus   56-64px, nur Symbole, Tooltip
       Spido-Spalte                 380-440px
       Dokument                     max 900-1000px
       UI-Text 14-15 · Sekundaer 12-13 · Dokumenttitel 22-24
       Fliesstext 15 · Tabellen 14 · Kapitel 16-17 halbfett · Fuss 11-12
       Abstaende gegenueber vorher 30-40 % weniger
   ========================================================================= */

/* --- Navigation: im Arbeitsmodus eine Icon-Rail -------------------------- */
/*
   JEDE REGEL HIER GILT NUR IN DER LEISTE, und zwar seit dem 25.09.2026 aus
   einem konkreten Grund: sie stand vorher auf `.spido .zeintrag`, und dieselbe
   Klasse traegt auch jede Zeile der Handbuchgliederung. Im Arbeitsmodus wurde
   damit JEDE Dokumentzeile 40 Pixel breit und mittig ausgerichtet - Nummer und
   Titel liefen nach beiden Seiten aus dem Kasten heraus und ueberlappten sich.
   Genau das hat Julia am 25.09.2026 im Inhaltsverzeichnis gesehen.

   Eine Klasse, zwei Orte: das ist der Fehler, nicht die Regel. `.seitenleiste`
   davor haelt sie dort, wo sie gemeint ist.
*/
.spido .seitenleiste .zeintrag{display:flex;align-items:center;gap:9px}
.spido .zicon{display:inline-flex;flex:0 0 18px}
.spido .zicon svg{width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spido .seitenleiste .ztext{flex:1 1 auto;min-width:0}

/* DIE SCHMALE LEISTE ERST, WENN ZWEI SPALTEN DA SIND (Julia, 28.09.2026
   abends): „wenn ich im Menü auf QM-Handbuch gehe, dann soll zunächst die
   breite Menüleiste, wie auch zum Beispiel bei der Neukundenaufnahme stehen
   bleiben. Aktuell springt die sofort nach links, das ist nicht nötig, da in
   der Mitte zwischen den Seiten sehr viel weiß ist ... Erst bei der
   Gliederungsansicht plus Seitenansicht wird die Menüleiste klein oder beim
   Chat plus Seitenansicht."

   Die Regel hing an `.mitchat`, und die Handbuchübersicht trägt diese Klasse
   auch — sie hat nur keine zweite Spalte darin. `:not(.nurarbeit)` trennt
   das: wo wirklich zwei Spalten stehen, weicht die Navigation; wo eine steht,
   bleibt sie breit. */
/* 228 PX STATT 78 (Julia, 02.10.2026, Entscheidung 2 zur
   DESIGN-INTEGRATION):

     „Desktop-Hauptnavigation = 228 px gemäß Claude Design. Damit wird die
     frühere 78-px-Festlegung für den normalen Desktop-Split-View ersetzt."

   WAS HIER STAND UND WARUM ES FÄLLT. Am 28.09.2026 wurde die Leiste im
   Split View auf 60 px gestaucht, um der Seite Platz zu geben, am 29.09. auf
   78 px verbreitert, damit „spido" nicht als „spid" abschnitt. Alle neun
   Referenzscreens aus Claude Design zeigen die Leiste dagegen durchgehend
   mit Beschriftung — gemessen an ihren festen Breiten: 228 px in jedem
   einzelnen, auch in den dreispaltigen (02, 03, 04, 07, 08).

   Damit fallen auch die Stauchungen: `.ztext` und `.zbereich` werden wieder
   angezeigt, die Einträge behalten ihre Form, das Logo seine Breite. Es
   bleibt nur, was unabhängig von der Breite gilt — die Leiste scrollt nicht
   („Die Hauptnavigation darf auf normalen Desktop-Höhen nicht vertikal
   scrollen"), und `.zzurueck` steht in einer Zeile.

   NOCH OFFEN: außerhalb des Split View ist die Leiste 248 px breit
   (`julia/spido-basis.css:857`). Julias Entscheidung nennt ausdrücklich den
   Split View; die 20 px Unterschied bleiben deshalb stehen und sind als
   Frage vermerkt, statt sie hier nebenbei mitzuentscheiden — eine Änderung
   an der Grundbreite verschiebt alle Referenzbereiche. */
.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)){
  grid-template-columns:var(--cd-leiste,228px) minmax(0,1fr)}
.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)) .seitenleiste{overflow:hidden}
.spido .zzurueck{display:flex;align-items:center;gap:9px}

/* Die Gliederung ist eine Liste von Dokumenten, keine Navigationsleiste: die
   Nummer steht in fester Breite links, der Titel darf umbrechen, die Kennung
   rechts. So bleibt eine Spalte eine Spalte, auch bei 234 Zeilen. */
.spido .gliederung .zeintrag{display:flex;align-items:baseline;gap:8px;width:auto;
  height:auto;justify-content:flex-start;padding:4px 8px 4px 14px}
/* EINE NUMMER BRICHT NICHT UM (Julia, 29.09.2026): "Das Menü links springt
   jetzt um bei den Nummern, zum Beispiel bei 1.03.09 springt die 9 in die
   nächste Zeile, das darf nicht sein."

   `flex: 0 0 4.6em` legt die Breite fest, verbietet aber den Umbruch nicht -
   und seit die Gliederung breiter wurde und `overflow-wrap: break-word` in
   ihr gilt, hat der Browser die Nummer mitten durchgebrochen. Eine Nummer
   ist ein Zeichen, kein Satz. */
/* 68 PX FESTE SPALTE (Julia, 29.09.2026): "Nummernspalte: feste Breite ca.
   65-70 px, white-space: nowrap, kein Umbruch, kein Shrinking der Nummer."
   Und fuer BEIDE Gliederungen - die in der Leiste und die im Arbeitsraum. */
.spido .gliederung .znummer,
.spido .kgliederung .znummer{flex:0 0 68px}
.spido .gliederung .zkl{flex:0 0 auto}
/* Das Vorlagenzeichen ist ein Sinnbild in Schriftgroesse, kein Restzeichen. */

/* --- DIE AUFTEILUNG (Abschnitt 4) --------------------------------------- */
/* DIE EINE STELLE, an der steht, wie breit das Gespraech ist. Vorher gab es
   drei davon, alle mit "Julia, 25.09.2026" begruendet und nur die letzte
   wirksam.

   JULIA, 28.09.2026: "Nicht 50:50. Das Dokument braucht mehr Platz. Als
   Ausgangspunkt: Chat ca. 34-38 %, Workspace ca. 62-66 %." Also Anteile und
   keine rem-Spanne: eine feste Spanne ist auf einem 27-Zoll-Schirm ein
   Drittel und auf einem Notebook die Haelfte.

   UND EINE OBERGRENZE (Abschnitt 4): "Bei einem sehr breiten Bildschirm kann
   der Chat eine definierte Maximalbreite bekommen, damit das Dokument
   zusaetzlichen Raum erhaelt." Ohne sie waechst die Gespraechsspalte ins
   Leere, waehrend die Seite klein bleibt - ein Blatt will nicht breiter sein
   als ein Blatt, aber es will ganz zu sehen sein.

   Frueher stand hier zusaetzlich `gap:18px`. Die Luecke ist jetzt 0: die
   Arbeitsflaeche hat einen eigenen Hintergrund und setzt sich dadurch ab.
   Ein Spalt dazwischen zeigte die Seite darunter durch. */
.spido .arbeitsraum.mitchat{grid-template-columns:minmax(0,36fr) minmax(0,64fr);
  gap:0}
.spido .arbeitsraum.mitchat > .chatspalte{max-width:34rem;min-width:0}
@media (max-width:1400px){
  /* Schmaler wird zuerst das Gespraech, nicht die Seite. */
  .spido .arbeitsraum.mitchat{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
}

/* EIN OBJEKT IST KEIN BLATT (Julia, 02.10.2026, aus dem echten Alphatest):

     „Aktuell ist der Chat deutlich zu schmal und die Kundenansicht erhält zu
     viel Raum ... Spido-Gespräch = primärer Arbeitsraum. Kundenansicht =
     kontextuelle Vertiefung."

   DIE 34:66 OBEN BLEIBEN — sie gelten einem DOKUMENT, und dafür sind sie
   richtig („Das Dokument braucht mehr Platz", 28.09.2026). Eine Kundenakte
   ist etwas anderes: sie wird gelesen, nicht bearbeitet, und das Gespräch
   bleibt der Ort der Arbeit.

   DIE ZAHL IST GEMESSEN, NICHT GESETZT. Im Referenzentwurf
   `02-kunde-umfangreich.html`: Fenster 1440, Navigation 228 fest, `<main>`
   bekommt 1212, darin `<aside>` mit `width:560px; flex:0 0 auto` und
   `margin-right:16`. Für das Gespräch bleiben 1212 − 560 − 16 = 636.

       636 : 560  =  53,1 : 46,9

   Angeschrieben an `:has(.kdakte, .pansicht)` — also genau dort, wo rechts
   ein Mensch steht: `.kdakte` ist die Kundenakte aus dem Claude-Entwurf (M4c),
   `.pansicht` die Mitarbeiteransicht. Nicht bei einer Quelle und nicht bei
   einem Handbuchdokument. */
/* A2 (M4d, 02.10.2026): 52,5 : 47,5 statt 53 : 47. Nachgerechnet am Entwurf
   bei 1440 px innen - Arbeitsraum 1212, Akte 560 + 16 margin = 576 = 47,5 %,
   Chatraum 636 = 52,5 %. Mit 53:47 kam die Akte auf 554 px heraus, sechs zu
   wenig.

   UND MINDESTBREITEN STATT STAUCHUNG (Punkt 7). Julia: „Arbeitsfähigkeit vor
   zwanghafter Viewport-Anpassung. Lieber sinnvolle Mindestbreiten und
   horizontales Verschieben als einen zu schmalen Chat oder eine zu schmale
   Akte."

   SO MACHT ES DER ENTWURF: sein äußeres Element trägt `width:1440px` FEST;
   wird das Fenster schmaler, bleibt es 1440 breit und der Body bekommt eine
   waagerechte Rolle. Eine feste Breite wäre hier falsch - Spido soll auf einem
   27-Zoll-Schirm die Fläche nutzen. Dieselbe Wirkung bei kleinem Fenster
   bringt `minmax(<mindestens>, <anteil>fr)`: oberhalb von 1440 px teilen die
   Anteile, darunter halten die Mindestbreiten, und die Fläche ragt hinaus.
   Die Rolle dafür steht weiter unten an der Schale. */
.spido .arbeitsraum.mitchat:has(.pansicht){
  grid-template-columns:minmax(636px,52.5fr) minmax(576px,47.5fr)}

/* A1: DER CHAT IST EIN BLOCK VON 560 PX, MITTIG IN SEINER SPALTE.

   Im Entwurf steht das Gespräch nicht in der Spalte, sondern IN der Spalte:
   `<div width:560px>` in einem 636 px breiten Raum - 38 px Luft links, 38
   rechts. Bis M4c stand hier `max-width:44rem` (704 px); die Spalte ist aber
   nur 636 breit, die Grenze griff also nie und der Chat wurde gestreckt. Das
   war der sichtbar größte Unterschied zum Entwurf.

   Die 560 px gelten der ARBEITSFLÄCHE, nicht der Spalte: Verlauf und Composer
   stehen beide darin, der Composer ist damit automatisch ebenso breit. */
.spido .arbeitsraum.mitchat:has(.pansicht) > .chatspalte{max-width:none}
.spido .arbeitsraum.mitchat:has(.pansicht) > .chatspalte > .zspur{
  width:100%;max-width:560px;margin:0 auto}

/* =========================================================================
   DER BOOKVIEW: DAS QM-HANDBUCH ALS AUFGESCHLAGENES BUCH

   JULIA, 28.09.2026 abends: „Nach Klick auf QM-Handbuch darf keine lange
   vertikale Liste mehr erscheinen und es darf auf dieser Ebene kein
   vertikales Scrollen geben." Und zur Abgrenzung: „Bitte nicht die bestehende
   /QM-Handbuch-Liste weiter umbauen ... Damit ist auch technisch klar, dass
   ‚Buchansicht' nicht nur ein anderes CSS für die jetzige Liste bedeutet."

   Das ist der Grund, warum hier kein `columns` über eine Liste gelegt wird,
   sondern ein eigener Aufbau steht: Kopf, Buch, Blätternavigation, Composer —
   vier Zeilen, die zusammen genau in den Viewport passen. Die Buchhöhe misst
   das Skript und zieht ab, was darunter noch kommt.

   „Keine künstliche fotorealistische Buchgrafik nötig. Es soll wie ein
   modernes digitales Buch wirken: zwei klare Seiten, dezente Mittelfalz,
   sehr leichter Schatten, papierähnlicher Hintergrund, keine unnötigen
   Rahmen." Genau das und nichts weiter: ein weißes Feld, eine 1-px-Linie in
   der Mitte, ein Schatten mit 10 % Deckung.

   WIE PAGINIERT WIRD: wie beim Dokumentblatt. Der Inhalt läuft in Spalten
   von einer Buchseitenhöhe; zwei Spalten sind sichtbar, eine Doppelseite.
   Wie viele Einträge darauf passen, ergibt sich aus der Höhe — nicht aus
   einer Zahl, die jemand pflegen müsste.
   ========================================================================= */
.spido .bookview{display:flex;flex-direction:column;min-height:0;height:100%;
  padding:14px 16px 10px;gap:8px}
.spido .buchkopf h1{margin:0;font-size:21px;line-height:1.2}
.spido .buch{position:relative;flex:0 0 auto;overflow:hidden;
  background:#fff;border-radius:4px;
  box-shadow:0 1px 10px rgba(60,45,30,.10);padding:18px 22px}
/* Zwei Spalten = zwei Buchseiten. Die Lücke ist der Falzbereich. */
/* Der Falzbereich war 56 px breit. Julia, 28.09.2026 abends: in der Mitte
   zwischen den Seiten sei sehr viel Weiss, das lasse sich gut
   zusammenschieben - mit der breiten Navigation daneben wird der Platz
   gebraucht. */
.spido .buchlauf{height:100%;column-count:2;column-gap:38px;column-fill:auto;
  transition:transform .14s ease-out}
.spido .buchlauf > *{break-inside:avoid-column}
/* Die Mittelfalz: eine Linie, kein Grafikeffekt. */
.spido .falz{position:absolute;top:18px;bottom:18px;left:50%;width:1px;
  background:var(--spido-linie,#e7e3de);pointer-events:none}

.spido .buchrubrik{margin:0 0 10px;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--spido-text-leise,#6b6b73);
  break-after:avoid-column}
/* Eine Zeile im Buch: Nummer und Titel, anklickbar, ohne Kasten.
   „Die aktuelle violette Markierung über die komplette Bildschirmbreite
   entfällt ebenfalls. Hover/Selection nur sehr dezent innerhalb der
   jeweiligen Buchseite." — deshalb kein Hintergrund über die ganze Breite,
   sondern nur die Schrift, die anspringt. */
.spido .buchzeile{display:flex;gap:8px;align-items:baseline;
  padding:5px 6px;margin:0 0 2px;border-radius:5px;
  text-decoration:none;color:inherit;font-size:14px;line-height:1.35}
/* KEINE FLAECHE BEIM UEBERFAHREN. Julia am Abend des 28.09.2026: "Die lila
   Hinterlegung von 1.21 Fuhrpark wuerde ich in dieser Uebersicht entfernen,
   solange kein Dokument bzw. Kapitel aktiv ausgewaehlt wurde. Sie sieht
   momentan so aus, als waere Fuhrpark gerade geoeffnet, obwohl man eigentlich
   nur das Inhaltsverzeichnis betrachtet."

   Sie hatte es schon eine Runde vorher gesagt - "Hover/Selection nur sehr
   dezent innerhalb der jeweiligen Buchseite" -, und ich hatte trotzdem eine
   Flaeche gebaut. In einem gesetzten Inhaltsverzeichnis gibt es keine
   Hinterlegungen; was auf einen Verweis hinweist, ist die Schrift. */
.spido .buchzeile:hover{color:var(--spido-purple,#7c3aed)}
.spido .buchzeile:hover .buchtext{text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
.spido .buchzeile:focus-visible{outline:2px solid var(--spido-purple,#7c3aed);
  outline-offset:1px;border-radius:4px}
.spido .buchnummer{flex:0 0 auto;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--spido-text-leise,#6b6b73)}
.spido .buchzeile:hover .buchnummer{color:inherit}
.spido .buchtext{min-width:0}
/* --- DIE HIERARCHIE IM BUCH (Julia, 28.09.2026 abends) -------------------
   "Dokumenttitel ca. 1 Schriftstufe kleiner und eingerückt. Dadurch bleibt
   die Hierarchie sofort verständlich."

   Kapitel 14 px, Dokumente 12,5 px, 14 px eingerückt. Mehr braucht es nicht:
   in einem gesetzten Inhaltsverzeichnis trägt die Einrückung die Gliederung,
   nicht ein Rahmen oder eine Farbe. */
.spido .buchkapitel{margin:0 0 9px}
.spido .buchzeile.kapitel{font-weight:600;margin:0 0 1px}
.spido .buchdok{display:flex;gap:7px;align-items:baseline;
  padding:2px 6px 2px 20px;text-decoration:none;color:inherit;
  font-size:12.5px;line-height:1.35}
.spido .buchdok:hover{color:var(--spido-purple,#7c3aed)}
.spido .buchdok:hover .buchtext{text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
.spido .buchdok:focus-visible{outline:2px solid var(--spido-purple,#7c3aed);
  outline-offset:1px;border-radius:4px}
.spido .buchdok .buchnummer{font-size:11.5px}
/* Ein Master, der noch nicht gebaut ist, steht da wie die anderen - er wird
   beim Klick erzeugt. Nur blasser, damit der Unterschied erkennbar bleibt. */
.spido .buchdok.noch .buchtext,
.spido .buchzeile.noch .buchtext{color:var(--spido-text-leise,#6b6b73)}

/* KEINE ÜBERSCHRIFT ALLEIN AM SPALTENENDE (Julias Abschnitt 3):

       if remaining_space < chapter_heading + first_document:
           move chapter to next column/page

   Genau das ist `break-after: avoid-column` auf der Kapitelzeile: der Browser
   nimmt die Überschrift mit in die nächste Spalte, wenn darunter nicht
   mindestens eine Zeile Platz hat. Eine eigene Rechnung braucht es dafür
   nicht — und sie wäre auch falsch, weil der Server die Höhen nicht kennt.

   `break-inside: avoid` auf der ganzen Gruppe wäre zu streng: ein Kapitel mit
   zwanzig Dokumenten ist höher als eine Buchseite, und dann bricht der
   Browser doch — nur an einer schlechteren Stelle. Es soll ja „wie ein
   gesetztes Inhaltsverzeichnis wirken", und dort laufen lange Kapitel über
   den Seitenrand. */
.spido .buchzeile.kapitel{break-after:avoid-column}
.spido .buchdok{break-inside:avoid-column}

/* Die zweite Ebene: links der Kapitelkopf, rechts die Dokumente. Er bricht
   die Spalte ab und steht damit allein auf der linken Seite. */
.spido .buchkapitelkopf{break-after:column;padding-right:10px}
.spido .buchzurueck{display:inline-flex;align-items:center;gap:4px;
  margin:0 0 14px;font-size:12.5px;text-decoration:none;
  color:var(--spido-text-2,#4a4441)}
.spido .buchzurueck:hover{color:var(--spido-purple,#7c3aed)}
.spido .buchzurueck svg{width:15px;height:15px}
.spido .buchkapitelnummer{margin:0;font-size:12.5px;
  color:var(--spido-text-leise,#6b6b73)}
.spido .buchkapiteltitel{margin:2px 0 0;font-size:19px;font-weight:600;
  line-height:1.25}

/* ‹ 1 / 3 › - klein, mittig, keine eigene Fläche. */
.spido .buchnav{flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;gap:4px;height:32px}
.spido .buchnav output{min-width:3.4rem;text-align:center;font-size:12.5px;
  color:var(--spido-text-2,#4a4441)}
.spido .buchnav .wtat{height:28px;width:28px}
.spido .buchnav .wtat svg{width:16px;height:16px}
/* Der Composer unten - derselbe wie überall, 48-54 px hoch. */
.spido .buchcomposer{flex:0 0 auto;max-width:56rem;width:100%;margin:0 auto}
.spido .buchcomposer .auftragszeile{margin:0;max-width:none}
.spido .buchcomposer .zwarnung{margin:0 0 3px;font-size:10.5px}
.spido .buchfuss{flex:0 0 auto;padding:4px 0 0;font-size:12.5px}

/* =========================================================================
   DER VIEWER IST EINE VIEWPORT-ANWENDUNG, KEINE WEBSEITE

   JULIA, 28.09.2026 abends: „Sobald ein Dokument rechts geöffnet ist, ist der
   Dokumentviewer eine Viewport-Anwendung, keine normale Webseite. Viewer-Höhe
   = 100dvh. Es darf keinen äußeren vertikalen Seitenabstand ober- oder
   unterhalb des Viewers geben."

   Sie hat „grob 100–130 px verschenkte Fläche" geschätzt. Es waren 140.

   WOHER SIE KAMEN. In `julia/spido-tokens.css` steht

       --spido-luft: clamp(90px, 13vh, 150px)

   und in `julia/spido-basis.css`

       .spido.app > .main { padding: 0 0 var(--spido-luft) }

   Bei 1080 px Höhe sind das 140 px unter dem Inhalt. Für eine Textseite, die
   nach unten ausläuft, ist dieser Abstand richtig — er ist einer der Gründe,
   warum Spido nicht wie eine Verwaltungsmaske aussieht. Für einen Viewer, der
   ein Blatt einpassen soll, ist er 140 px, die dem Blatt fehlen: es wird
   dadurch rund 12 % kleiner.

   DESHALB WIRD HIER NICHT DER WERT GEÄNDERT, SONDERN DER FALL AUSGENOMMEN.
   `--spido-luft` gilt weiter überall sonst. Nur wo ein Arbeitsraum steht,
   ist die Seite eine Anwendung: volle Höhe, kein äußerer Abstand, kein
   äußeres Rollen. `alphatest.css` wird nach Julias Blättern geladen und ist
   genau für solche Fälle gedacht.

   `100dvh` und nicht `100vh`: auf einem Telefon wandert die Adressleiste
   beim Rollen ein und aus, und `vh` rechnet mit der eingefahrenen Höhe -
   die Seite wäre dort immer ein Stück zu hoch.
   ========================================================================= */
.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)){height:100dvh;min-height:0;overflow:hidden}
.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)) > .main{padding:0;min-height:0;overflow:hidden}
.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)) .wrap{padding:0;max-width:none;min-height:0}
.spido.app:has(.arbeitsraum.mitchat:not(.nurarbeit)) .arbeitsraum{min-height:0;height:100%}

/* PUNKT 7 (M4d, Julia, 02.10.2026): WAAGERECHT SCHIEBEN STATT STAUCHEN.

     „Die Gesamtarbeitsfläche darf breiter als der sichtbare Browserbereich
     sein ... Lieber sinnvolle Mindestbreiten und horizontales Verschieben als
     einen zu schmalen Chat oder eine zu schmale Akte. Die horizontale
     Scrollleiste ist in dieser Arbeitsansicht kein Fehler."

   DREI ZEILEN ZUSAMMEN ERGEBEN DAS. Die Mindestbreiten stehen an den Spalten
   (636 + 576, weiter oben); hier wird dafür gesorgt, dass die Schale sie nicht
   abschneidet: `overflow:hidden` wird waagerecht zu `auto`, und `min-width`
   hält die Arbeitsfläche auf ihrer Summe. Senkrecht bleibt es bei `hidden` —
   dort rollt der Chat beziehungsweise die Akte für sich.

   NUR BEI OFFENER KUNDENAKTE. Der Dokument-Split behält sein Verhalten; dort
   soll ein Blatt mitgehen, wenn das Fenster schmaler wird. */
/* KEIN `:has()` IN EINEM `:has()`. Der erste Anlauf schrieb
   `:has(.arbeitsraum.mitchat:has(.kdakte))` - das ist nach der Spezifikation
   unzulaessig und matcht nie; gemessen blieb `overflow-x: hidden`, bei 1000 px
   fiel der Chat auf 0 px zusammen. Derselbe Gegenstand ohne Verschachtelung:
   `.mitchat .kdakte` als Nachfahre. */
/* ACHTUNG, 17.10.2026 — DIESE DREI REGELN TREFFEN SEIT MYS-203 NICHTS MEHR,
   UND SIE SIND DER EINZIGE TRAEGER VON JULIAS PUNKT 7.

   `kdakte` gibt es im Markup nicht mehr (die alte Kundenansicht ist ersatzlos
   gefallen). Die Regeln stehen absichtlich noch hier und sind NICHT auf einen
   anderen Gegenstand umgeschrieben worden, denn das waere eine Entscheidung
   ueber eine Gestalt und keine Aufraeumarbeit.

   WAS DAMIT OFFEN IST, gemessen und nicht vermutet: die Spaltenregel weiter
   oben (`minmax(636px,52.5fr) minmax(576px,47.5fr)`) gilt auch fuer
   `:has(.pansicht)`, die Mitarbeiteransicht verlangt also ebenfalls 1212 px.
   Die drei Schalenregeln hier — `overflow-x:auto` und die Mindestbreiten
   1212/1440 — hat `.pansicht` aber NIE getragen (nachgezaehlt: 0 von 3).
   Punkt 7 war immer nur an der Kundenakte verdrahtet; seit sie weg ist, gilt
   er fuer nichts. Ob die Mitarbeiteransicht ihn bekommt, gehoert Julia.
   Steht in MYS-203 als Vorlage. */
.spido.app:has(.arbeitsraum.mitchat .kdakte){overflow-x:auto;overflow-y:hidden;
  min-width:0}
.spido.app:has(.arbeitsraum.mitchat .kdakte) > .main{overflow-x:visible;
  min-width:0}
/* Die Arbeitsflaeche haelt ihre Summe: 636 Chatraum + 576 Akte. Darunter ragt
   sie hinaus, und die Rolle oben macht sie erreichbar. */
.spido .arbeitsraum.mitchat:has(.kdakte){min-width:1212px}
/* Und die Schale gibt die Navigation nicht her: 228 + 1212. */
.spido.app:has(.arbeitsraum.mitchat .kdakte){min-width:1440px}

/* =========================================================================
   FORTBILDUNGEN (Julia, 28.09.2026 abends)

   „Keine Diagramm-Orgie. Zahlen + Abweichungen + konkrete Personen."
   Deshalb hier keine Balken, keine Kreise, keine Farbflaechen - Zahlen in
   ihrer normalen Schrift, und genau eine Warnfarbe fuer das, was ueberfaellig
   ist.
   ========================================================================= */
.spido .fbreiter{margin-bottom:14px}
/* "+ FORTBILDUNG ZUWEISEN" IST DIE HAUPTAKTION DIESER SEITE - und sieht
   jetzt auch so aus.

   Julia, 29.09.2026, zu einem Bildschirmfoto: "man kann oben rechts nicht
   erkennen. Bitte anders farbig markieren." Auf ihrem Bild steht lila
   Schrift auf lila Flaeche.

   HIER STAND LILA AUF HELLEM LILA - `--spido-purple` auf
   `--spido-purple-hell`. Die zweite Farbe ist in KEINEM der vier
   Stilblaetter definiert; es galt also ueberall der Rueckfallwert #f5f0ff,
   fast weiss. Auf Julias Bildschirm offenbar nicht. Nachmessen liess sich
   das nicht (werkzeuge/farbe-messen.py sagt 5,1:1 in Ruhe wie im Fokus) -
   aber eine Farbe, die sich auf einen Rueckfallwert verlaesst, ist in
   jedem Fall die falsche Wahl fuer die wichtigste Schaltflaeche einer
   Seite.

   Jetzt: weisse Schrift auf kraeftigem Lila, wie jeder Hauptknopf in
   Julias Designvorlage (`.btn` in julia/app.css). Der Unterschied zu den
   Reitern daneben ist damit eindeutig - und er bleibt es, egal welche
   Fassung eines Stilblattes ein Browser gerade geladen hat. */
/* DIESE KLASSE GEHOERT EINEM KNOPF UND SONST NIEMANDEM.

   Am 29.09.2026 habe ich sie zusaetzlich an das <aside> der
   Zuweisungsmaske geschrieben - und damit war die ganze Seite eine lila
   Flaeche mit dunkler Schrift darauf. Julia: "man kann es nicht lesen."

   Das ist derselbe Fehler wie beim `janein`-Fall vom 28.09.: eine Klasse
   vergeben, ohne nachzusehen, was sie im Stilblatt schon bedeutet. Nur dass
   ich diesmal beide Seiten selbst geschrieben habe, im Abstand von zwei
   Stunden.

   `werkzeuge/klassen-probe.py` prueft ab jetzt: eine Klasse, die eine
   Flaeche faerbt, steht an genau einer Stelle im Markup. */
.spido .fbzuweisen{margin-left:auto;align-self:center;padding:7px 14px;
  font-size:13px;font-weight:600;text-decoration:none;border-radius:8px;
  color:#fff;background:var(--spido-purple,#7c3aed);
  box-shadow:0 1px 3px rgba(60,45,30,.14)}
.spido .fbzuweisen:hover{background:#6d28d9;color:#fff}
.spido .fbzuweisen:focus-visible{outline:2px solid #4c1d95;outline-offset:2px}

/* HIER STANDEN DIE REGELN FUER EIN FENSTER UEBER DER SEITE. Julia hat es am
   29.09.2026 verlangt und eine Stunde spaeter wieder verworfen: "hier doch
   kein Fenster oeffnen ... sondern wenn ich klicke, klappen darunter die
   Fortbildungen auf." Ein Fenster loest das Sichtbarkeitsproblem und schafft
   ein neues - es verdeckt die Liste. Siehe den Absatz an derselben Stelle in
   web.py. */

/* DIE ZUWEISUNGSMASKE: EINE ARBEITSMASKE, KEINE LANDINGPAGE.

   Julia, 29.09.2026: "die Seite ist im Moment viel zu grossflaechig fuer
   eine sehr einfache Aktion ... Die komplette Zuweisung sollte ohne Scrollen
   auf einem Bildschirm funktionieren ... Und optisch wuerde ich hier gar
   keine grosse Card-in-Card-Welt mehr bauen."

   Deshalb keine Rubrik um das Formular: der Seitenkopf sagt schon, worum es
   geht. Das Auswahlfeld bekommt die Breite, die sein Inhalt braucht - nicht
   die der Seite ("Ca. 500-650 px reichen"). */
.spido .zuweismaske .fbzeile1{margin:0 0 18px}
.spido .fbkursfeld{max-width:40rem}
.spido .fbkursfeld select{width:100%}
/* Z8 (14.10.2026): der Weg zur Voransicht steht unter dem Auswahlfeld und
   nicht daneben - daneben haette er die Feldbreite gesprengt. */
.spido .fbansehen{display:inline-block;margin-top:6px;font-size:.9rem}
/* Die Faelligkeit steht rechts neben der Ueberschrift der Liste: sie gilt
   fuer alle, die man ankreuzt, und nicht fuer den Letzten. */
.spido .fbzeile2{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin:0 0 8px;flex-wrap:wrap}
.spido .fbzeile2 h3{margin:0;font-size:15px}
.spido .fbzeile2 .field{margin:0}
.spido .fbwahltabelle{margin:0}
.spido .fbwahltabelle th.fbkast,.spido .fbwahltabelle td:first-child{
  width:2.4rem;text-align:center}
/* WER NICHT WAEHLBAR IST, STEHT TROTZDEM DA - ausgegraut und mit Grund
   (Julia: "Bereits erfolgreich absolvierte Mitarbeiter wuerde ich nicht
   einfach verschwinden lassen. Das koennte irritieren."). */
.spido .fbwahltabelle tr.fbaus td{color:var(--spido-text-leise,#6b6b73)}
.spido .fbgewaehlt{margin:10px 0 14px;font-weight:600}

/* EINE ZEILE KLAPPT AUF (Julia, 29.09.2026). Der Pfeil sagt, was passiert;
   die offene Zeile bleibt farblich verbunden mit dem, was unter ihr steht -
   sonst sieht der aufgeklappte Block aus wie eine neue Tabelle. */
.spido .fbliste tr.anklickbar > td{border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .fbauflink{display:flex;align-items:center;gap:8px;
  text-decoration:none;color:inherit}
.spido .fbauflink:hover{color:var(--spido-purple)}
.spido .fbpfeil{flex:0 0 auto;width:1em;color:var(--spido-text-leise,#6b6b73);
  font-size:11px}
.spido .fbliste tr.auf > td{background:var(--spido-lavendel-cta,#f0eafb);
  border-bottom:0}
.spido .fbliste tr.auf .fbauflink{font-weight:600;color:var(--spido-purple)}
.spido .fbaufklapp > td{background:var(--spido-bg-lavendel,#f7f5fc);
  padding:4px 14px 16px;border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .fbaufkopf{margin:0 0 8px;font-size:12.5px;
  color:var(--spido-text-2,#4a4441)}
/* Die innere Tabelle traegt keinen eigenen Rahmen - sie gehoert zur Zeile
   darueber und nicht neben sie. */
.spido .fbaufklapp .fbtabelle{margin:0;background:#fff;border-radius:8px}
.spido .fbaufklapp .fbtabelle th{background:transparent}

/* DER ZEITRAUM STEHT UEBER JEDER AUSWERTUNG (Julia, 29.09.2026)/* DER ZEITRAUM STEHT UEBER JEDER AUSWERTUNG (Julia, 29.09.2026): "Das sollte
   als zentrale Regel fuer saemtliche Auswertungen der Fortbildungen
   gelten." Eine Zeile, vier Woerter, das gewaehlte hervorgehoben - kein
   Aufklappmenue fuer vier Moeglichkeiten. */
.spido .fbzeitzeile{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  margin:0 0 14px}
.spido .fbzeitzeile .fhint{margin-right:6px}
.spido .fbzeit{padding:3px 10px;border-radius:99px;font-size:12.5px;
  text-decoration:none;color:var(--spido-text-2,#4a4441);
  border:1px solid transparent}
.spido .fbzeit:hover{background:var(--spido-flaeche-2,#f6f4f1)}
.spido .fbzeit.aktiv{background:var(--spido-lavendel-cta,#f5f0ff);
  color:var(--spido-purple,#7c3aed);font-weight:600}

/* DIE DREI ZAHLEN SIND WEGE, NICHT NUR ZAHLEN (Julia: "Der obere Block wird
   zum klickbaren Filter"). Sie sehen deshalb anfassbar aus - aber ruhig:
   ein Rahmen, der erst beim Ueberfahren auftaucht. */
.spido .fbzahlen{display:flex;gap:14px;flex-wrap:wrap}
.spido .fbzahl{display:flex;flex-direction:column;font-size:13.5px;
  padding:10px 16px;border-radius:12px;text-decoration:none;color:inherit;
  border:1px solid transparent;min-width:9rem}
.spido a.fbzahl:hover{border-color:var(--spido-linie,#e7e3de);
  background:var(--spido-flaeche-2,#f6f4f1)}
.spido a.fbzahl.aktiv{border-color:var(--spido-purple,#7c3aed);
  background:var(--spido-lavendel-cta,#f5f0ff)}
.spido .fbzahl strong{font-size:26px;font-weight:600;line-height:1.1}
.spido .fbzahl .fhint{font-size:11.5px}
.spido .fbzahl.warn strong{color:#b3261e}

/* Eine Zeile: Titel, Dauer, Stand - anklickbar, ohne Kasten. */
.spido .fbliste{display:flex;flex-direction:column}
.spido .fbzeile{display:grid;grid-template-columns:1fr auto auto;gap:6px 14px;
  align-items:baseline;padding:8px 6px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .fbzeile:last-child{border-bottom:0}
/* Was zu tun ist, steht rechts in derselben Zeile (Julia, 29.09.2026):
   "Genau eine Zeile pro Fortbildung. Das Zertifikat gehoert rechts in
   dieselbe Zeile und nicht darunter." */
.spido .fbtat{color:var(--spido-purple,#7c3aed);font-size:13px;
  white-space:nowrap}
/* DIE TRENNUNG ZWISCHEN STEUERUNG UND EIGENEM (Julia: "Leitungs-/
   Steuerungsinformationen und die persoenlichen Fortbildungen des
   eingeloggten Nutzers laufen ineinander"). */
.spido .fbtrenner{border:0;border-top:1px solid var(--spido-linie,#e7e3de);
  margin:34px 0 0}
.spido .fbeigene{display:block;margin-top:6px}
/* Eine Tabellenzeile, die auf ein Blatt fuehrt. */
.spido .fbtabelle tr.anklickbar:hover{background:var(--spido-flaeche-2,#f6f4f1)}
/* HIER STANDEN DIE REGELN FUER EINEN EIGENEN FORTBILDUNGSNACHWEIS. Julia am
   29.09.2026: "der Fortbildungsnachweis kann weg." Er ist ueberfluessig,
   seit die Jahresuebersicht aus dem Master 1.17.01 entsteht - und die wird
   wie jedes andere Dokument gestaltet, von `dokument.css`. Zwei Formate fuer
   einen Nachweis waeren zwei Stellen zum Pflegen und die Frage, welches bei
   einer Pruefung gilt. */
.spido .fbzeile:hover .fbtitel{color:var(--spido-purple,#7c3aed);
  text-decoration:underline;text-underline-offset:2px}
.spido .fbtitel{font-size:14.5px}
.spido .fbdauer{font-size:12px;color:var(--spido-text-leise,#6b6b73)}
.spido .fbstand{font-size:12.5px;color:var(--spido-text-2,#4a4441);
  white-space:nowrap}
.spido .fbstand.ok{color:#1f8a4c}
.spido .fbstand.faellig{color:#b3261e}
.spido .fbnochmal{margin:0 0 8px 6px;font-size:12.5px;color:#b3261e}

.spido .fbletzte{list-style:none;margin:0;padding:0;font-size:13.5px}
.spido .fbletzte li{padding:4px 6px;border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .fbletzte li:last-child{border-bottom:0}
.spido .fbwann{display:inline-block;min-width:5.5rem;
  color:var(--spido-text-leise,#6b6b73)}

/* Die Tabellen der drei uebrigen Reiter. */
.spido .fbtabelle{width:100%;border-collapse:collapse;font-size:13.5px}
.spido .fbtabelle :is(th,td){text-align:left;padding:6px 8px;
  border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .fbtabelle th{font-weight:600;font-size:12px;
  color:var(--spido-text-leise,#6b6b73)}
.spido .fbtabelle .z{text-align:center}
.spido .fbtabelle .warn{color:#b3261e;font-weight:600}

/* DIE MATRIX. „Bei vielen Fortbildungen horizontal scrollbar; Name bleibt
   sticky links, Kopfzeile sticky oben." */
.spido .fbmatrixrahmen{overflow:auto;max-height:60vh}
.spido .fbmatrix th.fbname{position:sticky;left:0;background:#fff;
  text-align:left;font-weight:400;font-size:13px;color:inherit;
  min-width:11rem;z-index:1}
.spido .fbmatrix tr > th:first-child{z-index:2}
.spido .fbmatrix thead th,.spido .fbmatrix tr:first-child th{position:sticky;top:0;
  background:#fff;z-index:1}
.spido .fbmatrix td{font-size:15px;line-height:1}
.spido .fbz-bestanden{color:#1f8a4c}
.spido .fbz-offen{color:var(--spido-text-2,#4a4441)}
.spido .fbz-ueberfaellig{color:#b3261e;font-weight:600}
.spido .fbz-nicht{color:var(--spido-linie,#c8ced1)}
.spido .fblegende{margin:8px 0 0}

/* Das Zuweisen-Panel. */
.spido .fbzuweisform .field.schmal{max-width:12rem}
.spido .fbpersonen{display:grid;gap:2px 16px;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  max-height:22rem;overflow:auto;padding:6px 0}
.spido .fbperson{display:flex;align-items:center;gap:7px;font-size:13.5px;
  padding:3px 2px}
.spido .fbperson.fballe{border-bottom:1px solid var(--spido-linie,#e7e3de);
  padding-bottom:7px;margin-bottom:4px}

/* --- DER LINKE ARBEITSKONTEXT (V2, Abschnitte 3, 5 und 24) ---------------
   „Ein rechts geöffnetes Arbeitsobjekt erzeugt niemals automatisch einen neuen
   leeren Spido-Bereich. Stattdessen wird der vorhandene linke Arbeitskontext
   erhalten."

   Zwei Breiten, weil zwei Inhalte: eine Gliederung braucht 220-280 px
   (Abschnitt 3: „nicht ein Drittel des Bildschirms"), ein Gespräch deutlich
   mehr. Wer Spido öffnet, bekommt die breitere Spalte — und das Dokument passt
   sich danach von selbst wieder ein. */
/* ZUSTAND A (Abschnitt 2): die Handbuchuebersicht traegt nur sich selbst.
   Keine Gespraechsspalte, die nichts zu sagen hat. */
.spido .arbeitsraum.mitchat.nurarbeit{grid-template-columns:1fr}
.spido .arbeitsraum.mitchat.nurarbeit > .chatspalte{display:none}
/* Das Buch ist genauso eine Viewport-Anwendung wie der Dokumentviewer:
   „Auf der Handbuchstartseite darf der Browser nicht nach unten gescrollt
   werden müssen, um weiterzublättern oder Spido zu erreichen." */
.spido .arbeitsraum.mitchat.nurarbeit .dokspalte{min-height:0;height:100%;
  background:#f6f4f1}
/* 340 PX STATT 260 (Julia, 29.09.2026): "Die Handbuchspalte darf dafuer
   minimal breiter werden, etwa 330-350 px. Sie soll genuegend Platz haben,
   damit Dokumentnamen weniger umbrechen."

   Die 18 px, die die Hauptnavigation dazubekommen hat, und diese 80 gehen
   von der Dokumentflaeche ab - und das ist vertretbar, weil das Blatt
   ohnehin skaliert wird: es wird ein Prozent kleiner dargestellt, nicht
   beschnitten. Eine Gliederung, in der jeder zweite Titel umbricht, kostet
   mehr Zeit als ein Prozent Blattbreite. */
.spido .arbeitsraum.mitgliederung{grid-template-columns:340px minmax(0,1fr)}
.spido .arbeitsraum.mitgliederung.spidoauf{
  grid-template-columns:minmax(0,34fr) minmax(0,66fr)}
.spido .arbeitsraum.mitgliederung > .chatspalte{max-width:none}
/* Die Kontextspalte ist eine Spalte und keine Karte: sie reicht von oben bis
   unten und trägt ihren eigenen Rollbereich (Abschnitt 18). */
/* UEBER DIE GANZE HOEHE (Julia, 29.09.2026): "Die Handbuchnavigation nutzt
   die gesamte verfuegbare Hoehe. Nur der Inhalt der Gliederung darf
   vertikal scrollen." Die 96 px Abzug stammten aus einer Zeit, in der
   ueber der Spalte noch eine Kopfzeile stand. */
.spido .kontextspalte{position:sticky;top:0;height:100dvh;
  display:flex;flex-direction:column;min-height:0;padding:0;
  background:#fff;border:0;border-right:1px solid var(--spido-linie,#e7e3de);
  border-radius:0;box-shadow:none}
/* Eine dezente Rolle, kein massiver Balken ("ca. 5-6 px, neutral grau"). */
.spido .kgliederung{scrollbar-width:thin;scrollbar-color:#c9c4bd transparent}
.spido .kgliederung::-webkit-scrollbar{width:6px}
.spido .kgliederung::-webkit-scrollbar-thumb{background:#c9c4bd;
  border-radius:3px}
.spido .kgliederung::-webkit-scrollbar-track{background:transparent}
.spido .kteil{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.spido .kteil[hidden]{display:none}

/* DASSELBE FÜR DAS GESPRÄCH IN DER SPALTE (P2, 02.10.2026).

   Die Gliederung rollt seit dem 29.09.2026 in sich, der Composer bleibt
   stehen (`.kgliederung` oben). Für den Chat in derselben Spalte fehlte die
   Fortsetzung: `.kontextspalte` ist 100dvh hoch, aber die `.zspur` darin
   wuchs mit dem Verlauf einfach weiter.

   GEMESSEN AM 02.10.2026 im Fenster 1600×1000 (`werkzeuge/p2-bezug-probe.py`):
   Spur 1032 px hoch, der Composer bei y = 1106 — 106 px UNTER dem unteren
   Fensterrand und mit `elementFromPoint` nicht erreichbar. Julias Abnahme für
   P2 nennt genau diesen Fall: „langer Antworttext + rechtes Panel, Composer
   bleibt benutzbar."

   Vorher fiel es nicht auf, weil in dieser Spalte entweder die Gliederung
   stand oder ein Gespräch zu EINEM Objekt, das selten lang wird. Mit P2 steht
   dort regelmäßig der ganze Chat.

   Das Vorbild ist `.arbeitsraum.nurspido .zspur` — dieselben vier Zeilen,
   dieselbe Begründung: der Verlauf nimmt den Platz und rollt in sich, Warnsatz
   und Zeile behalten ihre Höhe. Keine fünfte Fassung einer Höhenregel. */
.spido .arbeitsraum.mitchat > .chatspalte > .zspur{min-height:0;flex:1 1 auto;
  display:flex;flex-direction:column}
/* Dieselbe dezente Rolle wie an der Gliederung („ca. 5-6 px, neutral grau") -
   nicht die kräftige Standardrolle des Browsers. Zwei Rollbereiche
   nebeneinander, die verschieden aussehen, lesen sich als zwei Bauteile. */
.spido .arbeitsraum.mitchat > .chatspalte > .zspur > .spurlauf{min-height:0;
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#c9c4bd transparent}
.spido .arbeitsraum.mitchat > .chatspalte > .zspur > .spurlauf::-webkit-scrollbar{width:6px}
.spido .arbeitsraum.mitchat > .chatspalte > .zspur > .spurlauf::-webkit-scrollbar-thumb{
  background:#c9c4bd;border-radius:3px}
.spido .arbeitsraum.mitchat > .chatspalte > .zspur > .spurlauf::-webkit-scrollbar-track{
  background:transparent}
/* `width: 100%` ist kein Beiwerk - es stand im Vorbild und ich hatte es
   zuerst weggelassen. In einem Flexcontainer löst der Browser `margin: auto`
   zu einem Pixelwert auf, und `referenz-probe.py` meldete prompt
   `fortbildung-jahr · p · marginLeft: 0px -> 98.6px`: dieselbe Lage am
   Bildschirm, aber eine andere Rechnung dahinter. Mit voller Breite bleibt
   die Rechnung dieselbe wie vorher. */
.spido .arbeitsraum.mitchat > .chatspalte > .zspur > .zwarnung,
.spido .arbeitsraum.mitchat > .chatspalte > .zspur > .fhint,
.spido .arbeitsraum.mitchat > .chatspalte > .zspur > .auftragszeile{width:100%;
  flex:0 0 auto}
.spido .arbeitsraum.mitchat > .chatspalte > .zspur > .auftragszeile{margin-bottom:0}


/* KEINE WAAGERECHTE ROLLE (Julia, 29.09.2026): "Die jetzige horizontale
   Scrollbar unten muss vollstaendig verschwinden. Texte umbrechen innerhalb
   der verfuegbaren Breite." Und: nur die Liste rollt, nicht die ganze
   Spalte - der Composer bleibt stehen. */
.spido .kgliederung{overflow-y:auto;overflow-x:hidden;padding:10px 8px 0;
  scrollbar-width:thin;overscroll-behavior:contain}
.spido .kgliederung *{min-width:0;overflow-wrap:break-word}
/* DER COMPOSER SITZT UNTEN IN DER SPALTE (Abschnitt 8): "Unter dem Buch
   befindet sich permanent ein kompakter Spido-Composer ... Höhe etwa 48-54 px.
   Der Composer darf nicht wie ein eigener großer Bereich wirken. Er gehört
   visuell zum unteren Arbeitsrand."

   Vorher stand dort ein Knopf „✦ Spido fragen", der die Gliederung gegen
   einen Chat tauschte — ein Klick ohne Ergebnis. Jetzt schreibt man direkt,
   und beim Senden wird links der Chat (Abschnitt 17). */
/* DER COMPOSER SCHWEBT UEBER DIE GANZE BREITE (Julia, 29.09.2026): "Der
   Composer ist aktuell zu klein und wirkt unten in die Ecke gedrueckt. Er
   soll unten ueber nahezu die gesamte Breite der Handbuchspalte schweben
   ... Breite: calc(100% - 24px) ... Hoehe ungefaehr 48-52 px, nicht
   hoeher. Der Rahmen soll deutlich dezenter sein als aktuell. Weniger
   Kapsel, mehr leichter Composer." */
/* DER COMPOSER SCHWEBT AM UNTEREN RAND (Julia, 29.09.2026): "Die Composer
   Zeile mit Frag Spido soll am unteren linken Rand schweben, (wie sonst auch
   in der Mitte) und breiter sein als die Menüspalte."

   Er stand im Fluss der Spalte und nahm ihre Breite an. Jetzt liegt er
   darueber - haftend am unteren Rand, mit einem Rand von 12 px links und
   rechts, und er darf ueber die Spalte hinausragen wie die Promptzeile in
   der Mitte. */
.spido .kcomposer{position:sticky;bottom:0;z-index:4;
  flex:0 0 auto;padding:8px 12px 12px;background:transparent;
  border-top:0}
.spido .kcomposer .auftragszeile{margin:0;max-width:none;gap:6px;
  min-height:50px;width:100%;border-radius:12px;
  border:1px solid var(--spido-linie,#e7e3de);
  box-shadow:0 1px 4px rgba(60,45,30,.06);padding:0 8px}
.spido .kcomposer .auftragszeile textarea{font-size:13.5px;padding:8px 0}
.spido .kcomposer .zwarnung{margin:0 0 6px;font-size:10.5px;text-align:left;
  padding:0 2px}
/* Die beiden Zeichen bilden eine Gruppe, sie stehen nicht verteilt
   ("und nicht: 📎           🎙           Frag Spido"). */
/* "die Klammer und das Mikrofon sind zu weit auseinander, das nimmt zu viel
   Platz ein. die müssen enger gestellt werden." (Julia, 29.09.2026) */
.spido .kcomposer .zwerkzeuge{display:inline-flex;gap:0;flex:0 0 auto;
  margin-right:2px}
.spido .kcomposer .zwerkzeug{width:26px;height:30px;display:inline-flex;
  align-items:center;justify-content:center}
.spido .kcomposer .zwerkzeug svg{width:19px;height:19px}
.spido .kcomposer .zsenden{width:38px;height:38px;flex:0 0 auto}
.spido .kcomposer .zsenden svg{width:18px;height:18px}
/* =========================================================================
   DER COMPOSER SCHWEBT (Julia, 29.09.2026, „Abschließende Korrektur")

   Punkt 3: „Dadurch wirkt Frag Spido wie eine Funktion des Handbuchmenüs. Das
   ist semantisch falsch. Spido ist global und liegt über der Oberfläche."

   Ihre Maße, Punkt 4 und 5, hier eins zu eins:

       position   fixed              width          480–560 px  → 520
       bottom     18–22 px  → 20     height         48–52 px    → 50
       left       Navigation + 30–40 px             radius  16–18 px → 17
       Klammer und Mikrofon je 17–18 px, Abstand dazwischen ca. 14 px
       Text 15 px · Senden 38–40 px · innen links/rechts 14–16 px
       alle Elemente align-items:center

   `left` rechnet mit der Breite der Navigation, weil der Composer links von
   ihr beginnen soll — die Zahl ist nicht geraten, sie steht im selben Blatt.

   AM 02.10.2026 NACHGEZOGEN: die Navigation ist im Split View von 78 auf
   228 px gewachsen (Julias Entscheidung 2). `left` stand als feste 114 px da
   — 78 + 36 —, und der Composer wäre jetzt zur Hälfte unter der Leiste
   gelegen. Statt einer neuen festen Zahl rechnet die Regel ab hier mit der
   Marke selbst: wer die Breite wieder ändert, ändert sie an einer Stelle.

   Dass er nach rechts über die Verzeichnisspalte hinausragt, ist Absicht:
   „Er darf nach rechts über die Grenze des Verzeichnisses hinausragen. Das ist
   ausdrücklich gewollt." Deshalb `position:fixed` und nicht `sticky` — ein
   haftendes Element bleibt im Kasten seiner Spalte.
   ========================================================================= */
.spido .kcomposer.schwebt{position:fixed;
  left:calc(var(--cd-leiste,228px) + 36px);bottom:20px;z-index:30;
  width:520px;max-width:calc(100vw - var(--cd-leiste,228px) - 72px);
  padding:0;background:transparent;border:0}
/* Punkt 6: der Hinweis gehört zum schwebenden Element, nicht zwischen Menü
   und Composer. „12 px, sehr dezent." Dann bewegt sich beides gemeinsam. */
/* DER HINWEIS BRAUCHT EINEN RUECKEN. Ein schwebendes Element hat keinen
   eigenen Hintergrund - und darunter rollt das Verzeichnis durch. Im ersten
   Bild stand "Spido kann Fehler machen" mitten in der Zeile "1.18
   Stellenbeschreibungen": zwei Texte uebereinander, beide unlesbar.
   Die Zeile selbst hat Weiss, der Hinweis hatte nichts. */
.spido .kcomposer.schwebt .zwarnung{margin:0 auto 5px;font-size:12px;
  text-align:center;display:table;padding:2px 10px;border-radius:8px;
  background:rgba(250,249,251,.94);backdrop-filter:blur(3px)}
.spido .kcomposer.schwebt .auftragszeile{margin:0;width:100%;max-width:none;
  height:50px;min-height:50px;border-radius:17px;padding:0 15px;gap:14px;
  align-items:center;background:#fff;
  border:1px solid var(--spido-linie,#e7e3de);
  /* „einen sehr dezenten Schatten, damit eindeutig erkennbar ist: dieses
     Element schwebt über der Anwendung." */
  box-shadow:0 6px 20px rgba(60,45,30,.13),0 1px 3px rgba(60,45,30,.07)}
/* Ein gleichmäßiger Abstand von 14 px trennt Klammer, Mikrofon, Text und
   Senden — „Keine riesigen Abstände zwischen Büroklammer und Mikrofon."
   Der kommt aus `gap` und nicht aus Rändern an den einzelnen Knöpfen; sonst
   zählt man drei Zahlen zusammen, um eine Lücke zu erklären. */
.spido .kcomposer.schwebt .ztat{width:18px;height:18px;margin:0;padding:0;
  align-self:center;flex:0 0 auto}
.spido .kcomposer.schwebt .ztat svg{width:18px;height:18px}
.spido .kcomposer.schwebt .auftragszeile textarea{font-size:15px;padding:0;
  align-self:center;min-height:0;line-height:1.35}
.spido .kcomposer.schwebt .zsenden{width:39px;height:39px;flex:0 0 auto;
  align-self:center}
.spido .kcomposer.schwebt .zsenden svg{width:18px;height:18px}

/* =========================================================================
   DIE VERZEICHNISSPALTE BESTEHT NUR NOCH AUS INHALT (Punkt 7)

   „Keine eigene Card. Kein Footer. Kein Composer. Keine zusätzliche untere
   Fläche. Nur weißer Hintergrund + rechte Abgrenzung + sehr dezente
   Scrollbar."

   Der Innenabstand unten hält die letzten Einträge frei vom schwebenden
   Composer: 50 px Zeile + 20 px Abstand + Hinweis + Luft. Ohne ihn liegt das
   letzte Dokument des Handbuchs unter der Eingabezeile und ist nicht
   anklickbar.
   ========================================================================= */
.spido .arbeitsraum.mitgliederung > .chatspalte{background:#fff}
.spido .arbeitsraum.mitgliederung .kgliederung{padding-bottom:104px}

/* Punkt 1: kein Aufklappen. Der Gruppenkopf ist eine Überschrift, kein Knopf.
   Er behält die Maße des früheren <summary>, damit sich das Verzeichnis nicht
   sichtbar verschiebt — nur der Pfeil und der Klick fallen weg. */
.spido .zgruppekopf{display:flex;align-items:baseline;gap:6px;
  margin:10px 0 2px;padding:6px 8px;font-size:14px;font-weight:600;
  line-height:1.375;color:var(--spido-text,#2e2a27)}
.spido .zgruppe > .zgruppekopf:first-child{margin-top:0}

/* DIE ZEICHEN HINTER DEN EINTRAEGEN SIND FORT (Julia, 29.09.2026, 16:42 Uhr):
   „Die kleinen Symbole in der Menüleiste sollen noch verschwinden. Diese
   gestapelten Blätter oder die Kästchen. Sie dürfen nicht angezeigt werden."

   Hier standen sechs Regeln für `.zmarke` und `.zvorlage`. Sie fallen MIT dem
   Markup weg und nicht erst später: `klassen-probe.py` hat sie sofort als „ins
   Leere gezielt" gemeldet, und eine Regel, die kein Element trifft, ist kein
   Stil, sondern ein Irrtum, der jemanden glauben lässt, etwas sei geregelt. */

/* =========================================================================
   FINALE TYPOGRAFIE DER HANDBUCHNAVIGATION (Julia, 29.09.2026, 16:29 Uhr)

   „Die Handbuchnavigation ist visuell der Dokumentansicht untergeordnet ...
   Ziel: rechts ist der Arbeitsinhalt dominant, links die Navigation ruhig
   und kompakt."

       Kapitelüberschrift   14 px semibold   (stand auf 15)
       Dokumenteintrag      13 px regular    (stand auf 13,5)
       aktiver Eintrag      13 px semibold
       Dokumentnummer       12,5 px, nowrap  (stand auf 13)
       Zeilenhöhe           1,375            (stand auf 1,6)

   DER ABSTAND ZWISCHEN DEN EINTRÄGEN: „um ca. 10–15 % gegenüber dem
   aktuellen Stand reduzieren". Er steckt nicht zwischen den Kästen —
   die Einträge sind gestapelte Links ohne Außenabstand —, sondern IM
   Kasten: Zeilenhöhe plus Innenabstand. Gemessen vorher 31,8 px, nachher
   27,9 px. Das sind 12,3 % und liegt damit in ihrem Band.

   Der Innenabstand bleibt bei 5 px; die Verkleinerung kommt allein aus der
   Zeilenhöhe. Weniger Innenabstand hätte die Trefferfläche verkleinert —
   und die Einträge sind Links, die man mit der Maus treffen muss.

   DIE SPALTENBREITE BLEIBT: „damit Dokumenttitel nicht unnötig umbrechen."
   Hier wird nichts an `max-width` gedreht.
   ========================================================================= */
.spido.app .kgliederung .zeintrag.klein{font-size:13px;line-height:1.375}
.spido .kgliederung .znummer{font-size:12.5px}

/* Punkt 2: „Hintergrund: sehr helles Spido-Lila. Schrift etwas
   dunkler/semibold." DUNKLER, nicht lila — eine lila Schrift auf lila Fläche
   ist derselbe Fehler, den ich am 29.09. schon zweimal gebaut habe. */
.spido .kgliederung .zeintrag.aktiv{background:#f0e9ff;border-radius:8px;
  color:var(--spido-text,#2e2a27);font-weight:600}
.spido .kgliederung .zeintrag.aktiv .znummer{color:var(--spido-purple,#6d28d9)}

/* =========================================================================
   DIE VERDICHTETE PATIENTENANSICHT (Julia, 02.10.2026, Nachtauftrag P1)

   „Beim Öffnen von Almut Birkmoser darf rechts nicht mehr der Eindruck eines fast
   leeren Datensatzes entstehen."

   ALLES UNTER `.pansicht` — keine globale Regel. Julias Punkt 7: „Keine
   globalen CSS-Änderungen, wenn lokale/scoped Styles möglich sind."
   Neukundenaufnahme, Fortbildungen, Dokumentdarstellung und die globale
   Navigation werden damit nicht berührt; der Referenzprüfstand misst es.

   Maße aus der Dichteregel vom 29.09.2026: 15 px Fließtext, 1,45 Zeilenhöhe,
   13 px sekundär. Designreferenz sind Neukundenaufnahme und Fortbildungen —
   das Pflegedienstprofil ausdrücklich nicht.
   ========================================================================= */
.spido .pansicht .pblock{margin:0 0 18px}
.spido .pansicht .pblock:last-child{margin-bottom:0}
/* Die Abschnittsüberschrift trägt dieselbe Stufe wie in den Fortbildungen. */
.spido .pansicht .fgroup{margin:0 0 6px}
.spido .pansicht .files{margin:0}
.spido .pansicht .files li{padding:5px 0;line-height:1.45}

/* Stammdaten als Paare: Wort links, Wert rechts, auf einer Linie.
   Eine Anschrift steht in EINER Zeile - Straße, PLZ und Ort einzeln
   untereinander wären drei Zeilen für eine Angabe. */
/* DIE MASSE STEHEN SEIT M4b IM ABSCHNITT „DIE KUNDENAKTE" weiter unten -
   `150px minmax(0,1fr)`, 7/16 px Abstand, 13,5 px. Die Fassung von P1
   (`auto 1fr`, 3/14 px, 14 px) stand bis zum 02.10.2026 noch hier und war
   toter Text: `stilblatt-probe` meldete sie als "still ueberschrieben".
   Geblieben ist, was dort nicht noch einmal gesagt wird. */
.spido .pansicht .pdaten dd{margin:0}

/* Was nicht belegt ist, steht leiser da - und verschwindet nicht.
   „Zum Pflegegrad liegt nichts vor" ist eine Auskunft; sie wegzulassen hieße,
   jemanden im Glauben zu lassen, es sei nichts zu klären. */
.spido .pansicht .pwissen.leise{color:var(--spido-text-2,#4a4441)}

/* --- M4: fehlender Wert und kleine Marke (Claude Design) ----------------- */
/* JULIA, 02.10.2026: „Fehlende Information ist ein regulärer Spido-Zustand.
   `unbekannt/nicht vorhanden in Spido` darf nicht mit `trifft nicht zu`
   gleichgesetzt werden."

   DESHALB HAT DER STRICH EINE FARBE UND KEIN GRAU. Der Entwurf setzt ihn auf
   `#7E22CE` — dieselbe Familie wie ein Verweis, nur ohne Ziel. Ein graues „—"
   läse sich wie „gibt es nicht"; dieses hier sagt „hier gehört etwas hin, und
   Spido hat es noch nicht". Der Satz dazu steht im `title`, damit er nicht nur
   Farbe ist. */
.spido .pansicht .pfehlt{color:var(--cd-fehlwert,#7E22CE);font-weight:600;
  cursor:help}
/* Eine Marke ist ein Wort, keine Kachel: dieselbe Zeile, nur leiser. */
.spido .pansicht .pmarke{font-size:12.5px;color:var(--cd-text-label,#6F6860)}
.spido .pansicht .pmarke-ok{color:var(--cd-ok,#15803D)}
.spido .pansicht .pmarke-faellig{color:var(--cd-faellig,#B45309)}
.spido .pansicht .pmarke-fehlt{color:var(--cd-fehlwert,#7E22CE)}
/* Stehen zwei Listen in einem Abschnitt — Vorgänge und Aufgaben —, rücken sie
   zusammen: der Mensch davor liest einen Block, nicht zwei. */
.spido .pansicht .pblock > .files + .files{margin-top:0;
  border-top:1px solid var(--cd-linie,#ECE7DE)}

/* =========================================================================
   M4c · DIE KUNDENAKTE (Julia, 02.10.2026) — ERSATZLOS GEFALLEN (MYS-203)

   HIER STANDEN 54 REGELN `.spido .kdakte .kd-*`, die Uebersetzung des
   Entwurfs `02-kunde-umfangreich.html` in Klassen. Die alte Kundenansicht ist
   am 16.10.2026 ersatzlos gefallen; an ihre Stelle tritt `_objekt_kunde` nach
   dem Muster von `_objekt_mitarbeiter` — eine ganze Seite (`objekte.css`,
   Zonen aus `objektansicht`) und kein Beistellpanel im Gespraech. Damit gibt
   es die Klasse `kdakte` im Markup nicht mehr, und keine dieser Regeln hat
   noch ein Element getroffen.

   WARUM SIE WEG SIND UND NICHT NUR UNBENUTZT DALIEGEN: eine Regel, die kein
   Element trifft, ist kein Stil, sondern ein Irrtum — sie laesst jemanden
   glauben, eine Gestalt sei noch da. `klassen-probe.py` hat genau eine davon
   gemeldet (`.spido .kdakte .kd-mehr .lnk`, weil `.lnk` es sonst noch gibt);
   die anderen 53 waren still, und still ist hier das Gefaehrliche.

   DIE GESTALT SELBST IST NICHT VERLOREN: der Entwurf liegt unveraendert in
   `pruefstand-darstellung/`, und was Julia an ihm entschieden hat, steht in
   M4b/M4c/M4d im Vermerk. Was gefallen ist, ist die Verdrahtung, nicht die
   Entscheidung.
   ========================================================================= */

/* =========================================================================
   M4b · DIE KUNDENAKTE NACH `02-kunde-umfangreich.html` (Julia, 02.10.2026)

   „Claude Design ist für die visuelle Darstellung die Sollreferenz ... Sie
   soll wie eine ruhige, hochwertige Kundenakte wirken und nicht wie eine
   Folge vorhandener Spido-Listen."

   JEDE ZAHL HIER IST AUS DEM REFERENZARTEFAKT ABGELESEN, keine ist geschätzt.
   Die Quelle steht jeweils dabei. Alles hängt unter `.pansicht` — die
   Dokumentansicht, die Neukundenaufnahme und die Fortbildungen sehen davon
   nichts.
   ========================================================================= */

/* DIE KARTE. Entwurf: `background:#FFFEFC; border:1px solid #E9E4DA;
   border-radius:16px; box-shadow:0 14px 40px rgba(44,34,14,0.06)`, Kopf
   `padding:24px 20px 0 32px`, Inhalt `padding:0 32px 24px`. Bisher trug sie
   die allgemeine `.zarbeit`-Gestalt mit 20px/24px ringsum und einem flachen
   Schatten — eine Karte wie jede andere. */
.spido .pansicht{background:var(--cd-flaeche-panel,#FFFEFC);
  border:1px solid #E9E4DA;border-radius:16px;
  box-shadow:var(--cd-schatten-panel,0 14px 40px rgba(44,34,14,.06));
  padding:24px 32px}
.spido .pansicht .seitenkopf{margin:0 0 4px;padding:0}

/* DER KOPF. Entwurf: Objektart 11px/700, Sperrung 0.09em, Versalien, #6F6860 —
   darüber steht „KUNDE", darunter der Name 23px/700 mit −0.01em, darunter die
   Unterzeile 13px in #6B645C. Der Name war bisher die `h1` der Seite in ihrer
   allgemeinen Größe. */
/* DIE SELEKTOREN SIND BEWUSST LAENGER ALS NOETIG. Weiter unten im Blatt
   stehen `.spido .objektsicht .fgroup` (Zeile ~3019) und in Julias Basis
   `:is(.spido.app,.spido.flow) .seitenkopf h1` — beide mit gleicher oder
   hoeherer Gewichtung und SPAETERER Stellung. Gemessen am 02.10.2026: der
   Name kam mit 26,9 px statt 23 px heraus, das Abschnittslabel mit 13 px
   statt 11 px. Eine `.objektsicht`-Regel zu loeschen waere der kuerzere Weg
   gewesen und haette die Mitarbeiterseite und die Vorhabensicht mitgenommen;
   `!important` waere der schnellere und haette niemandem gesagt, warum. */
.spido .pansicht .pobjektart{margin:0;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--cd-text-label,#6F6860)}
.spido.app .objektsicht.pansicht h1{margin:4px 0 0;font-size:23px;
  font-weight:700;letter-spacing:-.01em;line-height:1.2;
  color:var(--cd-text,#26221E)}
.spido.app .objektsicht.pansicht .kontext{margin:6px 0 0;font-size:13px;
  line-height:1.45;color:var(--cd-text-2,#6B645C)}

/* DIE ABSCHNITTE. Entwurf: Label 11px/700, 0.09em, Versalien, #6F6860, dazu
   `margin:24px 0 8px; padding-top:20px` und eine Haarlinie `#EEE9E0` darüber —
   fünfmal im Blatt, und NICHT über dem ersten Abschnitt. Bisher: 13px, 0.06em,
   18px Abstand, keine Linie. */
.spido .pansicht .pblock{margin:0}
.spido .objektsicht.pansicht .fgroup{margin:24px 0 8px;padding-top:20px;
  border-top:1px solid var(--cd-linie-panel,#EEE9E0);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cd-text-label,#6F6860)}
/* Der erste Abschnitt trägt keine Linie: darüber steht der Name, und eine
   Linie zwischen Name und erstem Abschnitt teilte den Kopf vom Blatt ab. */
.spido .objektsicht.pansicht .pblock:first-of-type .fgroup{margin-top:24px;
  padding-top:0;border-top:0}

/* DER FLIESSTEXT. Entwurf durchgehend 13.5px mit Zeilenhöhe 1.5 (im ersten
   Abschnitt 1.55), Sekundäres 12px in #6F6860. */
.spido .pansicht{font-size:13.5px;line-height:1.5}
.spido .pansicht .files li{padding:0;border:0;line-height:1.5}
.spido .pansicht .files{display:flex;flex-direction:column;gap:8px}
.spido .pansicht .pmarke{font-size:12px}
.spido .pansicht .fhint{font-size:12px;color:var(--cd-text-label,#6F6860)}

/* „AUF EINEN BLICK". Entwurf: `grid-template-columns:150px minmax(0,1fr);
   row-gap:7px; column-gap:16px; font-size:13.5px; line-height:1.5`. Bisher
   `auto 1fr` mit 3px/14px und 14px Schrift — die Wertspalte begann dadurch bei
   jedem Kunden woanders. */
.spido .pansicht .pdaten{display:grid;grid-template-columns:150px minmax(0,1fr);
  row-gap:7px;column-gap:16px;margin:0;font-size:13.5px;line-height:1.5}
.spido .pansicht .pdaten dt{font-size:13.5px;
  color:var(--cd-text-label,#6F6860)}

/* QUELLEN UND LISTEN: der Name links, die Meta rechts, beide auf einer Zeile.
   Entwurf: der Verweis 13.5px/600 ohne Unterstreichung, die Angabe daneben
   12px grau mit `flex:0 0 auto`.

   JULIA: „Der aktuelle lange violette Dateiname dominiert die Ansicht zu
   stark ... Der fachliche Inhalt des Kunden muss wichtiger wirken als seine
   Quellen." Der Titel wird deshalb NICHT gekürzt und bleibt ganz anklickbar —
   er verliert nur sein Übergewicht: dieselbe Größe wie der Fließtext, normale
   Laufweite, und die Zeile bricht statt zu drängen. */
/* KEINE ZEILENLINIEN. Der Entwurf trennt ABSCHNITTE mit einer Haarlinie und
   Zeilen gar nicht - `gap:8px` genuegt. `.spido ul.files.schlicht li` setzt
   weiter oben ein `border-bottom` und wiegt (0,3,2) gegen meine (0,3,1);
   gemessen: unter jedem Eintrag lag ein Strich, und die Akte sah aus wie eine
   Tabelle. Deshalb hier derselbe Ankerpunkt mit einer Klasse mehr. */
.spido .objektsicht.pansicht ul.files li{display:flex;gap:10px;
  align-items:baseline;padding:0;border:0}
/* Die Angabe steht DIREKT hinter dem Namen, nicht am rechten Rand - so wie im
   Entwurf (`display:flex; gap:10px`, der Zusatz mit `flex:0 0 auto`). Rechts
   ausgerichtet haette sie eine zweite Spalte vorgetaeuscht, die es nicht gibt. */
.spido .pansicht .files li > .fhint{flex:0 0 auto}
.spido .pansicht .files .lnk{font-size:13.5px;font-weight:600;
  color:var(--spido-purple,#6D28D9);text-decoration:none;min-width:0;
  overflow-wrap:anywhere}
.spido .pansicht .files .lnk:hover{color:var(--spido-purple-tief,#5B21B6);
  text-decoration:underline;text-underline-offset:2px}

/* GESUNDHEIT & PFLEGE: hier liefert der Core einen SATZ und keinen Wert
   (C-3 bleibt Befund). Julia: „diesen nicht künstlich kürzen ... lediglich so
   gestalten, dass er die Ansicht nicht optisch zerstört."

   Also: der Gegenstand als Beschriftung in derselben Spaltenbreite wie „Auf
   einen Blick" — 150 px —, der Satz daneben im Fließtext. Damit steht der
   lange Text dort, wo sonst ein kurzer Wert stünde, und die Spaltenkante
   bleibt über beide Abschnitte hinweg dieselbe. */
.spido .pansicht .pwissen{display:grid;
  grid-template-columns:150px minmax(0,1fr);column-gap:16px;align-items:baseline}
.spido .pansicht .pwissen > strong{font-weight:400;
  color:var(--cd-text-label,#6F6860)}
/* Der Beleg gehoert unter den Satz, in dessen Spalte - nicht in die
   Beschriftungsspalte und nicht an den rechten Rand. Er steht dafuer IM
   Wertteil (`.pwert`), nicht als drittes Rasterkind daneben. */
.spido .pansicht .pwissen > .pwert{min-width:0}
.spido .pansicht .pwissen .fhint{display:block;margin-top:2px;text-align:left}

/* =========================================================================
   P2: EIN OBJEKT RECHTS, OHNE DEN CHAT ZU VERLASSEN (Julia, 02.10.2026)

   „Klick auf `Almut Birkmoser`: P1-Patientenansicht rechts öffnen. Der Chat bleibt
   links erhalten. Composer und Arbeitskontext dürfen nicht verloren gehen.
   Kein Navigationssprung auf eine neue Vollseite, wenn Split View möglich
   ist."

   DIE SCHALE IST NICHT DIE ANSICHT. `.opanel` trägt nur den Weg heraus; was
   darin steht, ist unverändert P1 (`.pansicht`) oder die Quelle
   (`.oquellsicht`). Deshalb musste für P2 keine Regel unter `.pansicht`
   angefasst werden — P1 ist Fixpunkt.

   Alles unter `.opanel` beziehungsweise `.oquellsicht`. Keine globale Regel.
   ========================================================================= */
.spido .opanel{position:relative;min-height:0;display:flex;
  flex-direction:column;flex:1 1 auto}
/* Der Weg heraus liegt in der Ecke des Objekts, nicht in einer Werkzeugzeile:
   eine Zeile nur für ein × wäre eine Zone für ein Zeichen. */
.spido .opanelzu{position:absolute;top:10px;right:12px;z-index:2;
  width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;border-radius:6px;font-size:17px;line-height:1;
  text-decoration:none;color:var(--spido-text-leise,#7a736d)}
.spido .opanelzu:hover{background:var(--spido-flaeche,#fffdfa);
  color:var(--spido-text,#241f1c)}
/* Platz für das × — der Kopf des Objekts darf nicht darunter liegen. */
.spido .opanel > .zarbeit > .seitenkopf .kopftext{padding-right:34px}

/* DIE QUELLE: der Browser zeigt das PDF, Spido zeigt nur, wo es steht.
   `<object>` füllt die Spalte; die Seite steht im `#page=n` der Datei und
   wird hier nicht gezählt. */
.spido .oquellsicht{min-height:0;display:flex;flex-direction:column;
  flex:1 1 auto}
.spido .oquellsicht .oquelle{flex:1 1 auto;min-height:320px;width:100%;
  border:1px solid var(--spido-linie,#e7e3de);border-radius:8px;
  background:var(--spido-flaeche,#fffdfa)}
.spido .oquellsicht .ozeile{margin:10px 0 0;display:flex;flex-wrap:wrap;
  gap:8px;flex:0 0 auto}

/* =========================================================================
   DIE VORSCHAU EINES VORHABENS (Julia, 29.09.2026)

   „Spido arbeitet vor, dann Human in the Loop." Die Seite, auf der ein
   Mensch sieht, was hinausgehen soll — bevor es hinausgeht.

   DER BELEG STEHT KLEINER UNTER DEM ERGEBNIS, nicht daneben: man liest
   zuerst „Anna Meier · anna.meier@…" und prüft erst dann gegen die Zeile aus
   der Liste. Umgekehrt läse man die Liste und übersähe den Fehler.
   ========================================================================= */
.spido .vtaten{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.spido .vtat{margin:0}
.spido .vliste{margin:0 0 18px}
.spido .vzeile{padding:8px 0;border-bottom:1px solid var(--spido-linie,#e7e3de);
  line-height:1.45}
.spido .vzeile:last-child{border-bottom:0}
.spido .vmail{color:var(--spido-text-2,#4a4441)}
/* Was nicht hinausgeht, steht leiser da - aber es steht da. */
.spido .vzeile.leise{opacity:.72}
.spido .vzeile.fertig .vmail{color:#15803d}
.spido .vzeile.fehl{border-left:3px solid #8a1c1c;padding-left:10px}
.spido .vbeleg{font-size:12px;color:var(--spido-text-leise,#6b6b73)}

/* „‹ Handbuch" im Gespräch (Abschnitt 17): der Weg zurück zur Gliederung. */
.spido .kzurueck{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  margin:0;padding:8px 10px;font-size:12.5px;text-decoration:none;
  color:var(--spido-text-2,#4a4441);
  border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .kzurueck:hover{color:var(--spido-purple,#7c3aed)}
.spido .kzurueck svg{width:15px;height:15px}
/* SCHMALE BILDSCHIRME: CHAT ODER ARBEITSFLÄCHE (Abschnitt 29).
   „Der Split-Screen ist zunächst eine Desktoplogik ... Nicht versuchen, beide
   Spalten auf ein Tablet/Telefon zu quetschen."

   Bis heute wurden sie untereinander gestapelt — erst das Dokument, darunter
   das Gespräch. Das ist genau das Quetschen: zwei halbe Ansichten und
   Scrollen zwischen ihnen. Jetzt liegt die Arbeitsfläche allein da, und × im
   Kopf führt zum Gespräch zurück. Ein Weg hin, ein Weg her.

   Diese Regeln stehen absichtlich ganz unten: eine frühere Fassung stand vor
   der Aufteilung und wurde von ihr überschrieben. */
@media (max-width:1100px){
  .spido .arbeitsraum.mitchat{grid-template-columns:minmax(0,1fr)}
  .spido .arbeitsraum.mitchat > .chatspalte{display:none;max-width:none}
  .spido .arbeitsraum.mitchat.zu > .chatspalte{display:flex}
  .spido .arbeitsraum.mitchat.zu .dokspalte{display:none}
  /* NICHT BEIM KUNDEN-SPLIT (M4d, Punkt 7). Julia: „Navigation, Chat und
     Kundenakte sollen bei geringer verfügbarer Breite nicht immer weiter
     zusammengestaucht werden, nur damit alles gleichzeitig vollständig in den
     Viewport passt." Gemessen bei 1000 px: die Regel darüber blendete die
     Chatspalte aus, der Chat fiel auf 0 px. Für ein DOKUMENT bleibt sie
     richtig — ein Blatt soll mitgehen, wenn es eng wird. */
  /* AUCH DIESE AUSNAHME TRIFFT SEIT MYS-203 NICHTS MEHR (17.10.2026), und
     hier wiegt es schwerer als oben: ohne sie greift die Regel drei Zeilen
     darueber, und die setzt `.chatspalte` auf `display:none`. Unter 1100 px
     verschwindet der Chat neben einer Objektansicht also ganz. Fuer
     `.pansicht` war das schon vor MYS-203 so — die Ausnahme stand nie an ihr.
     Nicht umgeschrieben, aus demselben Grund wie oben: das gehoert Julia. */
  .spido .arbeitsraum.mitchat:has(.kdakte){
    grid-template-columns:minmax(636px,52.5fr) minmax(576px,47.5fr)}
  .spido .arbeitsraum.mitchat:has(.kdakte) > .chatspalte{display:flex}
  .spido.app:has(.arbeitsraum.mitchat .kdakte){
    grid-template-columns:var(--cd-leiste,228px) minmax(0,1fr)}
  /* EIN FESTER MASSSTAB FUER SCHMALE BILDSCHIRME WAERE HIER FALSCH. Er stand
     hier: 42 %, damit eine A4-Seite auf ein Telefon passt. Seit V2 rechnet
     das Blatt ihn selbst aus der tatsaechlich verfuegbaren Breite - eine
     Zahl im Stilblatt waere auf jedem zweiten Geraet die falsche, und Julias
     Punkt war genau der: "Der Nutzer muss dafuer nichts einstellen."
     Auch die Gliederung weicht hier; sie kommt ueber × zurueck. */
  .spido .arbeitsraum.mitgliederung{grid-template-columns:minmax(0,1fr)}
  .spido .arbeitsraum.mitgliederung > .chatspalte{display:none}
  .spido .arbeitsraum.mitgliederung.zu > .chatspalte{display:flex}
  .spido .kontextspalte{position:static;height:auto;max-height:60vh}
  /* Keine eigene Hoehenrechnung mehr: das Skript misst, wo die Buehne
     anfaengt, und das gilt auf einem Telefon genauso. */
}

/* --- Typografie: UI ------------------------------------------------------ */
.spido.app{--spido-body:14.5px;--spido-body-klein:13px;--spido-mini:12px}
.spido.app .zeintrag{font-size:14px}
.spido.app .zeintrag.klein{font-size:13.5px}
.spido.app .fhint{font-size:12.5px}
.spido.app h1{font-size:23px;line-height:1.25}
.spido.app .seitenkopf{margin-bottom:8px}
.spido.app .kontext{font-size:13px;line-height:1.45}
.spido.app .fgroup{font-size:13px;margin:12px 0 5px}

/* --- Typografie: Dokument ------------------------------------------------ */
.spido .dokument{padding:24px 28px 18px;border-radius:5px}
.spido .dokument .dkopf{padding-bottom:8px;margin:0 0 12px}
.spido .dokument .dtitel{font-size:23px;line-height:1.2}
.spido .dokument .dnummer{font-size:12.5px;margin:2px 0 0}
.spido .dokument .dtraeger{font-size:12px;margin:0 0 5px}
.spido .dokument .dfuss{font-size:11px;margin-top:14px;padding-top:7px}
.spido .dinhalt{min-height:0}
/* Das Logo im Dokumentkopf - links, wie der Master es vorsieht. */
.spido .dokument .dlogo{max-height:46px;max-width:180px;margin:0 0 9px}

/* =========================================================================
   DIE ZEILE KANN DREIERLEI (Julia, 25.09.2026, abends)

   Tippen, eine Datei mitgeben ("quasi als Posteingang über den Prompt") und
   sprechen. Die beiden Symbole sitzen IM Eingabefeld-Zug, nicht als eigene
   Knopfreihe darunter - eine Zeile bleibt eine Zeile.
   ========================================================================= */
.spido .auftragszeile .ztat{flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;
  background:none;color:var(--spido-text-leise,#6b6b73);cursor:pointer;line-height:0}
.spido .auftragszeile .ztat svg{display:block;width:19px;height:19px;stroke:currentColor;
  fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spido .auftragszeile .ztat:hover{background:#f1ecfb;color:var(--spido-purple)}
/* Waehrend der Aufnahme ist das Mikrofon rot und pulst - man soll nicht raten
   muessen, ob gerade zugehoert wird. */
.spido .auftragszeile .ztat.laeuft{color:#c0322b;background:#fdecea;
  animation:zpuls 1.4s ease-in-out infinite}
.spido .auftragszeile .ztat.wartet{color:var(--spido-purple);opacity:.55}
@keyframes zpuls{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){
  .spido .auftragszeile .ztat.laeuft{animation:none}
}

/* Aus dem Handbuch entfernen: im Menü "Mehr", abgesetzt und in Warnfarbe.
   Es steht nicht neben Drucken - eine Handlung, die man einmal im Jahr braucht
   und nie versehentlich, gehört nicht in die Reihe der täglichen. */
.spido .exportfach .gefahr{color:#c0322b;border-top:1px solid var(--spido-linie,#e7e3de);
  margin-top:4px;padding-top:7px}
.spido .exportfach .gefahr:hover{background:#fdecea}
.spido .entferntliste{margin-top:14px;opacity:.75}
.spido .entferntliste>summary{font-size:13px;color:var(--spido-text-leise)}

/* "Über die Promptleiste schreiben wir seeehr klein und hell" (Julia,
   wörtlich). Er steht DARÜBER, weil sie das so gesagt hat — beim Umbau der
   Startmaske hatte ich ihn nach unten geschoben, weil es dort in jedem Chat
   steht, den sie kennt. Das war meine Meinung gegen ihre Anweisung.
   Der Satz ist leiser als jeder andere Text auf der Seite. */
.spido .zwarnung{margin:0 auto 6px;font-size:11px;line-height:1.4;text-align:center;
  color:#a6a2ad;max-width:48rem}
.spido .arbeitsraum.mitchat .chatspalte .zwarnung{text-align:left;font-size:10.5px}
@media print{ .spido .zwarnung{display:none} }

/* "Spido arbeitet ..." - der Hinweis waehrend der Bearbeitung
   (0-SICHTBARARBEITET, 15.10.2026). Julia hat nochmal gedrueckt, weil nicht
   sichtbar war, dass die Anfrage schon laeuft; bei einer Netzsuche sind das
   mehrere Sekunden, in denen der Browser nur dasteht.
   Er sitzt dort, wo der Warnsatz sitzt, und ist genauso leise - er soll
   bemerkt und nicht gelesen werden. `hidden` blendet ihn aus, bis das
   Formular abgeschickt wird; der gesperrte Knopf steht daneben. */
.spido .zarbeitet{margin:4px auto 0;font-size:11px;line-height:1.4;
  text-align:center;color:#6f6a79;max-width:48rem}
.spido .zarbeitet[hidden]{display:none}
.spido .arbeitsraum.mitchat .chatspalte .zarbeitet{text-align:left;font-size:10.5px}
.spido .auftragszeile .zsenden:disabled{opacity:.45;cursor:default}
@media print{ .spido .zarbeitet{display:none} }

/* =========================================================================
   DAS PFLEGEDIENSTPROFIL ALS COCKPIT (Julia, 28.09.2026, Abschnitte 16 bis 22)

   Die Anforderung ist ausdrücklich messbar: "Auf einem normalen
   Desktopbildschirm müssen mindestens 3–4 Profilbereiche bzw. deren
   wesentliche Inhalte gleichzeitig erfassbar sein. Das ist eine verbindliche
   UX-Anforderung."

   Mit acht aufgeklappten Formularbereichen schaffte die Seite nicht einmal
   einen. Ein Feld braucht in der Leseansicht EINE ZEILE statt fünfzig Pixel
   Höhe — das ist der ganze Unterschied.

   Keine Karten, keine Rahmen um jeden Abschnitt (Abschnitt 19: "keine
   unnötigen riesigen weißen Cards"). Was gliedert, ist eine dünne Linie.
   ========================================================================= */
.spido .profilcockpit{padding:12px 16px}
.spido .pseitenkopf{display:flex;align-items:flex-start;gap:20px;
  padding-bottom:10px;border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .pseitenkopf h1{margin:0;font-size:20px;line-height:1.2}
.spido .pseitenkopf .kontext{margin:3px 0 0;font-size:13px;line-height:1.4}
.spido .pgesamt{margin-left:auto;text-align:right;white-space:nowrap}
.spido .pgesamt strong{font-size:17px}
.spido .pgesamt .fhint{display:block;font-size:11.5px}
.spido .pnochnicht{margin:7px 0 2px;font-size:11.5px}

/* Reiter statt Abschnittsliste (Abschnitt 3): Stammdaten, Organisation,
   Betrieb — welche erscheinen, entscheidet die Lizenz. */
.spido .preiterzeile{display:flex;gap:2px;margin:8px 0 0;flex-wrap:wrap;
  border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .preiter{padding:6px 12px;font-size:13.5px;color:var(--spido-text-2,#4a4441);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.spido .preiter:hover{color:var(--spido-purple)}
.spido .preiter.aktiv{color:var(--spido-purple);border-bottom-color:currentColor;
  font-weight:600}

/* Der Speicherstand oben rechts (Abschnitt 9) - kein Knopf, nur eine Auskunft. */
.spido .pspeicherstand{display:block;font-size:12px;min-height:1.2em;
  color:var(--spido-text-leise,#6b6b73)}
.spido .pspeicherstand.fertig{color:#1f8a4c}
.spido .pspeicherstand.fehl{color:#b3261e}

/* EIN RASTER MIT UNTERSCHIEDLICHEN BREITEN (Abschnitt 6): "Nicht jedes Feld
   erhält dieselbe Breite. PLZ → sehr schmal, Straße → breit." Die Spaltenzahl
   kommt aus der Feldart, nicht aus einer Aufzählung von Feldnamen — sonst
   müsste jedes neue Feld hier nachgetragen werden. */

/* =========================================================================
   MASTERDESIGN: DIE RUBRIK

   JULIA, 28.09.2026: "Hier einen Designweg wählen, der als Masterdesign
   hinterlegt wird und immer wieder greift. die gesamt Oberfläche soll
   wiederkehrende Designelement haben."

   DIES IST DAS ELEMENT. Jede Gruppe von Angaben — im Profil, in der
   Administration, in einer Arbeitsansicht — besteht aus:

       <section class="rubrik">
         <header class="rubrikkopf">
           <h2>Überschrift</h2>
           <p class="rubriknote">eine Zeile, worum es geht</p>
         </header>
         <div class="rubrikinhalt"> … </div>
       </section>

   Gebaut wird sie nur an einer Stelle: `_rubrik()` in app/spido360/web.py.
   Wer hier die Abstände ändert, ändert sie in der ganzen Oberfläche — und wer
   eine neue Gruppe braucht, bekommt das Aussehen geschenkt.

   DREI ENTSCHEIDUNGEN, die Julias vier Punkte einlösen:

   1. STÄRKERE ÜBERSCHRIFT ("Allgemeine Angaben und Erscheinungsbild könnten
      stärker als Überschriften in den Vordergrund treten"). Die alte
      `.pgruppe` war 13 px, grau, gesperrt, in Großbuchstaben — eine
      Beschriftung, keine Überschrift. Jetzt 15 px, halbfett, in der
      Textfarbe: sie führt das Auge, statt sich zu entschuldigen.

   2. ABSÄTZE OPTISCH TRENNEN ("und Absätze wieder optisch trennen"). Eine
      feine Linie ÜBER jeder Rubrik, nicht unter der Überschrift. Damit
      gliedert die Linie die Seite und rahmt nicht den Titel — die erste
      Rubrik braucht deshalb keine.

   3. KOMPAKTER ("Schriftgröße könnte generell kleiner werden", "so dass
      alles locker auf einer Seite ist"). Felder 38 → 32 px hoch, Eingaben
      14,5 → 13,5 px, Rasterabstand 12 → 9 px. Das sind rund 30 Prozent
      weniger Höhe je Feldzeile; die neun Stammdaten passen damit ohne
      Rollen auf ein Bild.

   WARUM NICHT KLEINER: 13,5 px ist die untere Grenze für eine Eingabe, in
   der jemand eine IK-Nummer korrekturliest. Auf schmalen Geräten stehen
   16 px, sonst zoomt iOS beim Hineintippen (Regel weiter unten).
   ========================================================================= */
.spido .rubrik{margin:0;padding:14px 0 0;border-top:1px solid var(--spido-linie,#e7e3de)}
.spido .rubrik:first-of-type{padding-top:8px;border-top:0}
.spido .rubrikkopf{margin:0 0 9px}
.spido .rubrikkopf h2{margin:0;font-size:15px;font-weight:600;line-height:1.3;
  letter-spacing:0;text-transform:none;color:var(--spido-text,#241f1c)}
.spido .rubriknote{margin:2px 0 0;font-size:11.5px;line-height:1.45;
  color:var(--spido-text-leise,#6b6b73);max-width:46rem}
.spido .rubrikinhalt{margin:0}

/* Eine Rubrik in einer Rubrik gibt es nicht — aber ein Gestaltungsblock
   bringt eigene Formulare mit, und die sollen nicht doppelt eingerückt sein. */
.spido .rubrikinhalt > .designblock{margin:0}

/* Der alte Gruppentitel. Er entsteht nicht mehr (siehe `_rubrik`), die Regel
   bleibt einen Stand lang stehen, damit ein zwischengespeichertes Blatt aus
   dem Browser nicht ohne Abstand dasteht. */
.spido .pgruppe{margin:18px 0 8px;font-size:15px;font-weight:600;
  color:var(--spido-text,#241f1c)}

.spido .pfelder{display:grid;gap:9px 12px;
  grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.spido .pfelder .field{margin:0;min-width:0}
/* Kurze Angaben brauchen keine Spaltenbreite: PLZ, IK, Farbwerte. */
.spido .pfelder .field:has(input[id*="plz"]){max-width:8rem}
.spido .pfelder .field:has(input[id*="ik"]){max-width:12rem}
/* Was Fließtext ist, nimmt die ganze Zeile. */
.spido .pfelder .field:has(textarea),
.spido .pfelder .field:has(.mehrfach),
.spido .pfelder .field:has(.stellen){grid-column:1/-1}
.spido .profilcockpit .field label{display:block;font-size:12px;margin-bottom:3px;
  color:var(--spido-text-2,#4a4441)}
.spido .profilcockpit :is(input,select){height:32px;font-size:13.5px;width:100%;
  padding:0 9px}
.spido .profilcockpit textarea{font-size:13.5px;padding:6px 9px}
/* Die Erklärung steht hinter dem ⓘ und nicht unter dem Feld (Abschnitt 17). */
.spido .profilcockpit .fwarum{display:none}
.spido .pwarum{cursor:help;font-size:12px;color:var(--spido-text-leise,#6b6b73);
  margin-left:4px}
/* "Noch nicht angegeben" ist kein Fehler (Abschnitt 10). */
.spido .profilcockpit .fohne{font-size:11.5px;color:var(--spido-text-leise,#6b6b73);
  margin:3px 0 0}
/* =========================================================================
   LEITUNG UND VERTRETUNG: EINE ZEILE JE PERSON, MIT STELLENANTEIL

   JULIA, 28.09.2026: "Für mehrere sollte mit Klick jemand hinzugefügt werden
   können. also vielleicht ein lila plus Zeichen und dann in derselben Zeile
   könnte noch eine weitere stehen mit ihrem Stellenanteil."

   Drei Spalten: die Stelle links, die Besetzung mittig, das Plus rechts. Die
   Bezeichnung steht damit EINMAL und nicht über jedem Namen — das war der
   Grund, warum dieses Feld vorher die ganze Breite nahm und trotzdem unruhig
   aussah.

   DER ANTEIL IST FREITEXT UND KEINE ZAHL. Ein Dienst schreibt "100 %", der
   nächste "30 Std./Woche", der dritte "0,75 VK" — alle drei sind richtig, und
   ein Eingabefeld, das nur Prozent annimmt, würde zwei davon abweisen. Was
   der Versorgungsvertrag verlangt, ist eine nachvollziehbare Angabe, kein
   bestimmtes Format.
   ========================================================================= */
.spido .stellen{display:grid;gap:7px}
.spido .stelle{display:grid;grid-template-columns:12rem 1fr 2rem;gap:8px;
  align-items:start}
.spido .stellebez{font-size:12px;line-height:1.35;padding-top:8px;
  color:var(--spido-text-2,#4a4441)}
.spido .stellezeilen{display:grid;gap:5px;min-width:0}
.spido .stellezeile{display:grid;grid-template-columns:1fr 7rem;gap:6px;min-width:0}
/* Das Plus: lila, rund, ohne Fläche — ein Angebot, kein Knopf im Vordergrund. */
.spido .plus{width:26px;height:26px;margin-top:3px;padding:0;
  border:1px solid var(--spido-linie,#e7e3de);border-radius:50%;
  background:#fff;color:var(--spido-purple,#7c3aed);
  font-size:17px;line-height:1;cursor:pointer}
.spido .plus:hover{border-color:var(--spido-purple,#7c3aed);
  background:var(--spido-purple-hell,#f5f0ff)}
.spido .plus:focus-visible{outline:2px solid var(--spido-purple,#7c3aed);
  outline-offset:1px}
@media (max-width:640px){
  .spido .stelle{grid-template-columns:1fr 2rem}
  .spido .stellebez{grid-column:1/-1;padding-top:0;font-weight:600}
}

/* NUR LESEN. Ohne `care_service_profile.edit` ist das Profil eine Ansicht -
   `<fieldset disabled>` traegt aber einen Rahmen und eigene Abstaende, die
   hier nichts zu suchen haben. Die Felder sehen aus wie sonst, nur blasser. */
.spido .pnurlesen{border:0;margin:0;padding:0;min-width:0}
.spido .pnurlesen :is(input,select,textarea){background:#faf9f7;color:#4a4441;
  cursor:default}
.spido .hinweis.leise{margin:8px 0 0;font-size:12px;
  color:var(--spido-text-leise,#6b6b73)}

.spido .profilcockpit .designblock{gap:18px}
.spido .btn.klein{height:34px;line-height:34px;padding:0 14px;font-size:13.5px}

/* =========================================================================
   DIE ARBEITSKACHELN DER STARTSEITE (Julia, 28.09.2026, Abschnitte 10 bis 14)

   "Prompt-first, nicht Prompt-only." Unter dem Composer steht eine kompakte
   Arbeitsübersicht — keine Modulübersicht.

   Abschnitt 13 gibt die Maße vor: Breite 200–280 px, Höhe 100–150 px, Titel
   15–16 px semibold, Inhalte 13–14 px. "Keine klassischen Dashboard-Monster."
   Deshalb: kein Schatten, kein Farbfeld, keine Diagramme — ein feiner Rahmen
   und Typografie.
   ========================================================================= */
.spido .kachelbereich{margin:30px auto 0;max-width:62rem;text-align:left}
.spido .kueberschrift{margin:0 0 10px;font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--spido-text-leise,#6b6b73);
  text-align:center}
.spido .kachelreihe{display:grid;gap:12px;justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(200px,260px))}
.spido .kachel{border:1px solid var(--spido-linie,#e7e3de);border-radius:12px;
  padding:11px 13px;background:#fff;min-height:104px;max-height:158px;overflow:hidden}
.spido .kkopf{display:flex;align-items:baseline;gap:8px;margin:0 0 7px}
.spido .ktitel{font-size:15px;font-weight:600;color:inherit;text-decoration:none}
a.ktitel:hover{color:var(--spido-purple)}
.spido .kzahl{margin-left:auto;font-size:12px;color:var(--spido-text-leise,#6b6b73);
  white-space:nowrap}
.spido .kliste{list-style:none;padding:0;margin:0}
.spido .kliste>li{padding:3px 0;font-size:13.5px;line-height:1.35}
.spido .klink{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.spido .klink:hover{color:var(--spido-purple);border-bottom-color:currentColor}
.spido .kliste .fhint{font-size:12px}
.spido .kmehr{font-size:12.5px;padding-top:4px}
@media (max-width:620px){
  .spido .kachelreihe{grid-template-columns:1fr}
  .spido .kachel{max-height:none}
}

/* =========================================================================
   STAND · OFFEN · VERLAUF (Julias Spezifikation vom 28.09.2026)

   Abschnitt 42: "Keine großen Cards für jede Information. Stand/Offen/Verlauf
   dürfen visuell durch Typografie, leichte Trennlinien, kleine Statussymbole
   und Abstände gegliedert werden. Nicht alles in dick umrandete Kacheln
   packen." Deshalb steht hier kein einziger Rahmen.
   ========================================================================= */
.spido .objektsicht h1{font-size:23px;line-height:1.25}
.spido .objektsicht .fgroup{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--spido-text-leise,#6b6b73);margin:18px 0 7px;font-weight:600}
.spido .objektsicht .ostand{margin:0 0 8px;font-size:14.5px;line-height:1.5}
.spido .objektsicht .ostand+.btn{margin-top:2px}

/* "Offen": ein voller Punkt heißt Handlungsbedarf, ein leerer vorgemerkt. */
.spido .offenliste{list-style:none;padding:0;margin:0}
.spido .opunkt{display:flex;gap:9px;align-items:baseline;padding:5px 0;font-size:14.5px;
  line-height:1.45}
.spido .ozeichen{flex:0 0 auto;font-size:11px;color:var(--spido-text-leise,#6b6b73);
  line-height:1.6}
.spido .opunkt.dringend .ozeichen{color:#c2410c}
.spido .opunkt .fhint{font-size:12.5px}

/* Der Verlauf: drei Spalten, keine Tabelle, keine Rahmen. Die Zeit steht in
   Ziffern gleicher Breite, damit die Spalte nicht zappelt. */
.spido .verlauf{list-style:none;padding:0;margin:0}
.spido .vzeile{display:grid;grid-template-columns:5.6rem 8.5rem 1fr;gap:10px;
  padding:6px 0;border-bottom:1px solid var(--spido-linie,#e7e3de);font-size:14px;
  line-height:1.45}
.spido .vzeile:last-child{border-bottom:0}
.spido .vzeit{color:var(--spido-text-leise,#6b6b73);font-size:12.5px;
  font-variant-numeric:tabular-nums}
.spido .vwer{display:flex;align-items:center;gap:5px;font-weight:600;font-size:13px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spido .vstern{display:inline-flex;flex:0 0 auto}
.spido .vstern svg{width:13px;height:13px}
@media (max-width:760px){
  .spido .vzeile{grid-template-columns:1fr;gap:1px}
  .spido .vwer{font-size:12.5px}
}

/* Stammdaten und Listen dominieren die Ansicht nicht (Abschnitte 18 und 21):
   sie stehen darunter und klappen auf. */
.spido .oweiteres{margin-top:20px;border-top:1px solid var(--spido-linie,#e7e3de);
  padding-top:10px}
.spido .oweiteres>summary{cursor:pointer;list-style:none;font-size:13.5px;
  color:var(--spido-text-leise,#6b6b73)}
.spido .oweiteres>summary::-webkit-details-marker{display:none}
.spido .oweiteres>summary::before{content:"▸ ";font-size:11px}
.spido .oweiteres[open]>summary::before{content:"▾ "}

/* =========================================================================
   DIE BETREIBERLISTE DER PFLEGEDIENSTE (Julia, 28.09.2026)

   "Hier ist die Ansicht zu groß, ich sehe weder Namen noch die vollständigen
   Zeilen."

   Der Name stand im HTML und war trotzdem unsichtbar: `.files .fname` trägt in
   Julias Blatt `overflow:hidden` und darf schrumpfen, und in einer Zeile mit
   acht Schaltflächen schrumpft er auf null. Die Formulare machen es schlimmer,
   weil `form.rmform{display:contents}` sie auflöst — aus vier Formularen
   werden acht Flex-Kinder.

   Jetzt zwei Reihen: oben wer und wie viel, darunter was man tun kann. Die
   Aktionsreihe darf umbrechen, statt aus dem Bild zu laufen.
   ========================================================================= */
/* DER RIEGEL GILT FÜR JEDE LISTE, nicht nur für diese eine. `.files .fname`
   trägt `overflow:hidden` und darf schrumpfen — in einer vollen Zeile schrumpft
   er auf null, und der Name verschwindet lautlos. Das kann die Benutzerliste
   genauso treffen wie die der Pflegedienste. Eine Mindestbreite kostet nichts
   und macht aus dem Verschwinden ein Abschneiden mit Auslassungspunkten: dann
   sieht man wenigstens, dass da etwas steht. */
.spido ul.files .fname{min-width:9rem}

/* Die Seite selbst kompakter - sie stand als einzige noch in den ursprünglichen
   Größen, während Spido 360 längst kleiner ist. */
.spido .betriebssicht h1{font-size:23px;line-height:1.25}
.spido .betriebssicht h2{font-size:17px;margin:18px 0 8px}
.spido .betriebssicht .kontext{font-size:13px;line-height:1.45}
.spido .betriebssicht .fhint{font-size:12.5px;line-height:1.45}
.spido .betriebssicht .seitenkopf{margin-bottom:10px}
.spido .betriebssicht .field label{font-size:13px}

.spido ul.files.dienste>li{display:block;padding:10px 0}
.spido .dienste .dzeile{display:flex;align-items:flex-start;gap:12px}
/* Der Name bekommt festen Platz und darf umbrechen. Er ist die einzige Angabe
   in der Zeile, ohne die der Rest bedeutungslos ist. */
.spido .dienste .fname{flex:1 1 16rem;min-width:11rem;white-space:normal;
  overflow:visible;font-size:14.5px;font-weight:600}
.spido .dienste .fsize{flex:0 1 auto;white-space:normal;text-align:right;
  font-size:12.5px;line-height:1.4}
.spido .dienste .fhint{font-weight:400;font-size:12px}
/* Die Schaltflächen darunter, umbrechend, kleiner - es sind acht. */
.spido .dienste .dtaten{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  margin:7px 0 0 26px}
.spido .dienste .dtaten .rmform{display:contents}
.spido .dienste .dtaten .fmehr{font-size:12.5px}
.spido .dienste .dtaten input{font-size:12.5px;padding:3px 7px;max-width:11rem}
@media (max-width:900px){
  .spido .dienste .dzeile{flex-wrap:wrap}
  .spido .dienste .fsize{text-align:left}
  .spido .dienste .dtaten{margin-left:0}
}

/* =========================================================================
   DIE STARTMASKE (Julias Spezifikation vom 28.09.2026)

   "Die gesamte Fläche rechts der Navigation gehört dem Chat." Solange kein
   Arbeitsobjekt offen ist, gibt es keine dritte Spalte — auch keine leere.
   ========================================================================= */

/* --- Navigation: 220 bis 240 px, nicht 328 (Abschnitt 3) ----------------- */
.spido.app{grid-template-columns:230px minmax(0,1fr)}
.spido.app .seitenleiste{padding:18px 12px 14px}
.spido.app .marke-logo{font-size:15px}
.spido .zspidozeile{display:flex;align-items:center;gap:4px}
.spido .zspidozeile>.zeintrag{flex:1 1 auto}
.spido .zneu{margin:0;flex:0 0 auto}
.spido .ztat.klein{width:26px;height:26px;border-radius:7px}
.spido .ztat.klein svg{width:15px;height:15px}
.spido .zverlaufform{margin:0}
.spido .zverlaufform .zeintrag{width:100%}
@media (max-width:1100px){ .spido.app{grid-template-columns:200px minmax(0,1fr)} }

/* --- Der leere Start: mittig, mit viel Luft (Abschnitte 5 und 25) --------- */
/* NUR AUF DER LEEREN STARTSEITE, NICHT IMMER (29.09.2026).

   Hier stand `.spido .arbeitsraum.nurspido{max-width:none}` ohne Bedingung -
   und hat damit die 52 rem aus Zeile 509 in JEDEM Fall aufgehoben, auch wenn
   ein Gespräch läuft. Gemessen: `max-width` war `none`, der Arbeitsraum
   1084 px breit statt 832.

   Gemeint war die leere Startfläche, auf der Begrüßung und Kacheln Platz
   brauchen. `:has(.zstartflaeche)` sagt genau das - und sagt es an der
   Stelle, an der es gilt. */
.spido .arbeitsraum.nurspido:has(.zstartflaeche){max-width:none}
/* Auch hier spezifischer als `.arbeitsraum.nurspido .zspur` weiter oben, das
   die Spur an den UNTEREN Rand schiebt. Auf der leeren Startseite gehoert sie
   in die Mitte. */
.spido .arbeitsraum.nurspido .zspur.zstartflaeche,
.spido .zspur.zstartflaeche{display:flex;min-height:min(72vh,44rem);
  align-items:center;justify-content:center;flex-direction:row}
.spido .zstart{width:100%;max-width:48rem;text-align:center}
.spido .zmarkegross{margin:0 0 6px}
.spido .zmarkegross svg{width:34px;height:34px}
.spido .zstarttitel{margin:0 0 10px;font-size:17px;font-weight:600;
  color:var(--spido-text-2,#4a4441)}
.spido .zstart .zgruss{margin:0 0 22px;font-size:23px;font-weight:500;
  line-height:1.3;max-width:none}
.spido .zstart .auftragszeile{margin:0 auto}
/* Prompt-Starter: "maximal 3–4 sehr dezente Beispiele" — sie sollen einladen,
   nicht anbieten. Deshalb keine Knopffarbe, nur ein feiner Rahmen. */
.spido .zstarterreihe{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:16px 0 0}
.spido .zstarter{font:inherit;font-size:13px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--spido-linie,#e7e3de);background:none;cursor:pointer;
  color:var(--spido-text-leise,#6b6b73)}
.spido .zstarter:hover{background:#f4f0fd;color:var(--spido-purple);
  border-color:#e0d6f7}

/* --- Der Composer (Abschnitte 6 und 7) ----------------------------------- */
.spido .auftragszeile{max-width:48rem;margin-left:auto;margin-right:auto;
  display:flex;align-items:flex-end;gap:6px;padding:6px 8px;border-radius:18px;
  border:1px solid var(--spido-linie,#e7e3de);background:#fff;
  box-shadow:0 1px 10px rgba(0,0,0,.05)}
.spido .auftragszeile:focus-within{border-color:#cdbdf2;
  box-shadow:0 1px 14px rgba(109,40,217,.10)}
.spido .auftragszeile textarea{flex:1 1 auto;min-width:0;font:inherit;font-size:15px;
  line-height:1.45;padding:10px 4px;border:0;background:none;resize:none;
  overflow-y:hidden;color:inherit;min-height:24px}
.spido .auftragszeile textarea:focus{outline:none}
/* Spezifischer als die alten Regeln fuer `.auftragszeile button` weiter oben -
   sonst gewinnt deren Innenabstand und der Senden-Knopf wird ein Klotz. */
.spido .auftragszeile .zsenden{flex:0 0 auto;width:34px;height:34px;border:0;
  border-radius:11px;background:var(--spido-purple,#6d28d9);color:#fff;
  font-size:16px;cursor:pointer;line-height:1;padding:0}
.spido .auftragszeile .zsenden:hover{filter:brightness(1.08)}
.spido .auftragszeile .ztat{align-self:flex-end;margin-bottom:2px;padding:0}

/* --- Das Gespräch (Abschnitte 9 bis 12) ---------------------------------- */
/* JULIAS DICHTEREGEL vom 29.09.2026 („SPIDO CHAT DENSITY RULE"): höchstens
   800 px Lesebreite, 15 px Fließtext, Zeilenhöhe 1,45. Und: „Auch der
   vertikale Abstand sollte deutlich kleiner werden. Frage und Antwort
   gehören optisch als Gespräch zusammen." 18 px trennten sie zu sehr. */
.spido .spurlauf{max-width:48rem;margin:0 auto 16px;gap:12px}
/* Die Nachricht des Benutzers: kompakte Blase, rechtsbündig.
   „max-width: 60–65 %" — sie stand auf 68 und lief damit über ihre eigene
   Vorgabe hinaus. */
.spido .spureintrag.du{background:#f3edff;align-self:flex-end;max-width:64%;
  padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.45}
/* Spidos Antwort steht FREI — kein Kasten, kein Rahmen, keine Fläche.
   "Die Hauptfläche selbst ist der Chat." */
.spido .spureintrag.spido{background:none;border:0;padding:0;font-size:15px;
  line-height:1.45}
/* „Spido-Kennung: 14 px semibold" — sie stand auf 13. */
.spido .zabsender{display:flex;align-items:center;gap:6px;margin:0 0 5px;
  font-size:14px;font-weight:600;color:var(--spido-text-2,#4a4441)}
.spido .zabsender .zstern{display:inline-flex}
.spido .zabsender svg{width:15px;height:15px}
.spido .zantwort{max-width:48rem}
/* DIE STUFEN INNERHALB EINER ANTWORT (Julia, 29.09.2026, Punkt 2). Sie hat
   sie verbindlich festgelegt, weil „die jetzige Antwort für eine
   Arbeitssoftware zu groß" war:

       Fließtext                15 px
       Zwischenüberschrift      15 px semibold  (stand auf 16 px)
       sekundäre Information    13 px
       kleine Metadaten         12 px

   Eine Zwischenüberschrift, die größer ist als ihr Text, macht aus einer
   Antwort ein Dokument. Sie soll gliedern, nicht rufen. */
.spido .zantwort :is(h1,h2,h3,h4){font-size:15px;font-weight:600;
  margin:12px 0 4px;line-height:1.35}
.spido .zantwort :is(h1,h2,h3,h4):first-child{margin-top:0}
.spido .zantwort p{margin:0 0 8px}
.spido .zantwort :is(ul,ol){margin:4px 0 8px;padding-left:20px}
.spido .zantwort li{margin:0 0 3px}
.spido .zantwort .fhint,.spido .spureintrag.spido > .fhint{font-size:13px}
.spido .zantwort small,.spido .zantwort .meta{font-size:12px}
.spido .spureintrag.spido.laeuft,
.spido .spureintrag.spido.fehl{padding:0 0 0 12px}
.spido .spureintrag.spido.fehl{color:#7f1d1d;background:none}

/* --- Typografie (Abschnitt 13) ------------------------------------------- */
.spido.app .seitenleiste .zeintrag{font-size:14.5px}
.spido.app .seitenleiste .zeintrag.klein{font-size:13.5px}
.spido .spureintrag,.spido .auftragszeile textarea{font-size:15px;line-height:1.45}
.spido .zstart .zgruss{font-size:23px}

/* =========================================================================
   DER BOGEN: ausfuellbare Kaestchen, wie die Vorlage sie vorsieht

   Julia am 25.09.2026: "Beim Erstgespräch passen die ausfüllbaren Kästchen
   nicht mehr. Die sind oben zu klein. Das muss an die Vorlage angepasst
   werden."

   Die Master tragen die Breiten selbst - <colgroup><col style="width:30mm">
   fuer die Beschriftung, der Rest gehoert dem Feld. Damit das ankommt, muss
   die Tabelle FESTE Spalten haben: bei table-layout:auto rechnet der Browser
   die Breiten aus dem Inhalt neu, und ein leeres Feld bekommt dann genau so
   wenig Platz, wie leer ist - das war der schmale Streifen im Bild.
   ========================================================================= */
.spido .dinhalt table.kopf,
.spido .dinhalt table:has(col){table-layout:fixed;width:100%}
.spido .dinhalt td:has(> input.f),
.spido .dinhalt td.c{vertical-align:middle}

/* Ein Feld fuellt seine Zelle. Es traegt keinen eigenen Rahmen - den hat die
   Zelle schon; zwei Rahmen ineinander sind ein Kaestchen im Kaestchen. */
.spido .dinhalt input.f,
.spido .dinhalt input[type="text"],
.spido .dinhalt input[type="date"],
.spido .dinhalt input[type="time"]{width:100%;min-width:0;box-sizing:border-box;
  font:inherit;font-size:14px;line-height:1.4;padding:3px 4px;min-height:24px;
  border:0;background:transparent;color:inherit}
.spido .dinhalt input.f:focus,
.spido .dinhalt input[type="text"]:focus{outline:2px solid var(--spido-purple,#6d28d9);
  outline-offset:-2px;border-radius:3px;background:#fff}
/* Ausserhalb einer Tabelle steht das Feld auf einer Schreiblinie. */
.spido .dinhalt p input.f,.spido .dinhalt li input.f,
.spido .dinhalt .zeile input.f{border-bottom:1px solid var(--spido-linie,#c8ced1);
  border-radius:0}

/* Das Ankreuzkaestchen: quadratisch, in Schriftgroesse, nicht in Browsergroesse. */
.spido .dinhalt input[type="checkbox"],
.spido .dinhalt input[type="radio"]{width:13px;height:13px;min-height:0;margin:0 5px 0 0;
  vertical-align:-1px;accent-color:var(--dok-farbe,#24424e);flex:0 0 auto}
.spido .dinhalt label{display:inline-flex;align-items:center;margin-right:14px;
  white-space:nowrap}
/* AUSSER IN EINEM KREUZFELD - DORT MUSS DER TEXT UMBRECHEN.

   Julia, 29.09.2026, zur Pflegevisite: "regelmäßige Kontrolle des
   PflegeverlaufsBeschwerdeVeränderung des Pflegezustands ... der Text läuft
   ineinander."

   `white-space: nowrap` ist fuer ein einzelnes Kaestchen mit einem Wort
   daneben richtig - "☐ ja" soll nicht zwischen Kaestchen und Wort brechen.
   In einem Kreuzfeld stehen aber ganze Saetze ("Antrag auf Anpassung des
   Pflegegrads"), und dort ist dieselbe Regel toedlich: der Text bleibt
   einzeilig, laeuft aus seiner Spalte und legt sich ueber den Nachbarn.

   DREI ANLAEUFE IN `dokument.css` HABEN NICHTS AUSGERICHTET - inline-flex
   zu grid, grid zu Textfluss -, weil diese Zeile hier jedes Mal gewonnen
   hat. Gemessen hat es `werkzeuge/darstellung-probe.py`, nachdem sie
   gelernt hatte, `getComputedStyle` mitzumelden: "white-space:nowrap,
   display:flex" stand im Befund, und damit war die Suche vorbei.

   Hier steht die Ausnahme und nicht in `dokument.css`: eine Regel schlaegt
   man am besten dort, wo sie steht. */
.spido .dinhalt .kreuz label{display:block;white-space:normal;
  margin-right:0;padding-left:5.4mm;text-indent:-5.4mm;
  overflow-wrap:break-word;line-height:1.35}
.spido .dinhalt .kreuz label .cb{display:inline;margin-right:1.4mm;
  text-indent:0}
/* "Wohnsituation alleinemit Angehörigen:im Heim" - ohne Abstand klebten die
   Wahlmoeglichkeiten aneinander. */
/* `.janein` IST HIER HERAUSGENOMMEN. Die Klasse liegt im Masterbestand auf
   32 Tabellen und auf keinem Label; `display: inline-flex` hat aus jeder
   dieser Tabellen einen Flex-Container gemacht, in dem Kopf und Koerper
   nebeneinander standen. Siehe die ausfuehrliche Begruendung in
   `dokument.css`. */
.spido .dinhalt .cb{display:inline-flex;align-items:center;
  gap:5px;margin-right:14px}
.spido .dinhalt .kreuz{margin-right:10px}

/* Der Unterschriftsblock, den die Master mitbringen. */
.spido .dinhalt .sigline{min-height:26px}
.spido .dinhalt .siglabel,.spido .dinhalt .signame,
.spido .dinhalt .sigblock{margin-top:16px}
/* Im Druck sind Felder keine Eingaben mehr, sondern Linien auf Papier. */
@media print{
  .spido .dinhalt input.f,
  .spido .dinhalt input[type="text"]{border-bottom:.5pt solid #c8ced1}
}

/* =========================================================================
   NAVIGATION NACH JULIAS SPEZIFIKATION VOM 25.09.2026 (Abschnitte 8, 16, 46)

   Vier Arbeitsbereiche oben, zwei Verwaltungseintraege unten, und darunter
   klein der zweite Weg zu den Datenobjekten. Die Rail im Arbeitsmodus steht
   auf 60 px - Abschnitt 12 nennt 56 bis 64.
   ========================================================================= */

/* Der sekundaere Zugang ist leiser als ein Arbeitsbereich: kleiner, blasser.
   Abschnitt 46: "aber nicht prominent zwischen den Arbeitsbereichen." */
.spido .zeintrag.klein{color:var(--spido-text-leise,#6b6b73)}
.spido .zeintrag.klein .zicon svg{stroke-width:1.5}

/* Die Objektuebersicht - eine Liste mit Zahlen, absichtlich keine Kachelwand.
   Julia am 25.09.2026 zu den Kacheln: "es passen einige Layoutthemen
   grundsaetzlich noch nicht. Schrift zu gross, Kachel, etc." */
.spido .datenliste{list-style:none;padding:0;margin:0}
.spido .datenliste>li{display:block;padding:9px 2px;
  border-bottom:1px solid var(--spido-linie,#e7e3de)}
.spido .datenliste>li:last-child{border-bottom:0}
.spido .datenliste .zzahl{float:right;font-size:12.5px;
  color:var(--spido-text-leise,#6b6b73)}

/* "+ Datei hinzufuegen" ist die eine prominente Aktion des Posteingangs
   (Abschnitt 8). Aufgeklappt steht das Feld darunter - keine zweite Seite. */
.spido .eingangsaktion{margin:0 0 6px}
.spido .eingangsaktion>summary{display:inline-flex;align-items:center;gap:7px;
  cursor:pointer;list-style:none}
.spido .eingangsaktion>summary::-webkit-details-marker{display:none}
.spido .eingangsaktion>summary svg{width:16px;height:16px;stroke:currentColor;
  fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(180deg)}
.spido .eingangsaktion[open]>summary svg{transform:none}
.spido .eingangsaktion>.hochladen{margin-top:10px}

/* =========================================================================
   DIE ANTWORTBAUSTEINE — acht Stück, keine capability-spezifische Variante

   Julia, 30.09.2026 (Interaction System, Stufe 1). Was hier steht, gestaltet
   ZUSTÄNDE des Antwortvertrags: `response_type`, `groups`, `items`,
   `references`, `primary_action`, `routing.candidates`, `approval`.

   ES GIBT KEINE REGEL, DIE EINE FÄHIGKEIT KENNT. `werkzeuge/interaktion-probe.py`
   stellt eine erfundene Fähigkeit dar (`bewaesserungsplan_erstellen`) und prüft,
   dass sie ohne eine einzige neue Regel aussieht wie jede andere.

   RUHIG, NICHT NERVÖS (Abschnitt 14): keine Alarmfarben, keine Banner. Eine
   Ausnahme fällt dadurch auf, dass sie oben steht und einen Grund trägt —
   nicht dadurch, dass sie rot leuchtet.
   ========================================================================= */

/* --- 1 Antwortrenderer: der Rahmen jeder Antwort ------------------------- */
.spido .aantwort{display:flex;flex-direction:column;gap:7px}
.spido .asatz{margin:0;line-height:1.5}
/* Eine Warnung ist ein Satz mit mehr Gewicht, kein Kasten. */
/* Ein Fehler sagt, was nicht ging - und nie, wie der Code dazu heisst. */
.spido .afehler .asatz{color:var(--spido-text-2,#4a4441)}
.spido .afehler::before{content:"";width:3px;align-self:stretch;
  background:var(--spido-linie,#e7e3de);border-radius:2px;
  position:absolute;left:-11px;top:2px;bottom:2px}
.spido .afehler{position:relative}

/* --- 1b Wovon die Antwort handelt (P2, 02.10.2026) ----------------------- */
/* Julia: „Wenn eine Spido-Antwort im Patientenkontext ein `subject` mit
   stabiler Patienten-ID enthält, soll der Patient in der Antwort direkt
   anklickbar sein."

   SIE STEHT ÜBER DEM SATZ UND IST KEINE KARTE. Der Pfeil ist derselbe wie an
   der Kontextmarke am Composer (`.kpfeil`): dort sagt er „darüber reden wir",
   hier „davon handelt das". Zwei Zeichen für denselben Gedanken wären zwei
   Sprachen. Alles unter `.aantwort` — keine globale Regel. */
.spido .aantwort .abezug{margin:0;font-size:13px;
  color:var(--spido-text-leise,#7a736d)}
.spido .aantwort .abezug .aref{font-size:13px;border-bottom-style:dotted}

/* --- 1c Die festen Hinweistexte der Redaktion (MYS-235, 21.10.2026) ------ */
/* Sie stehen ÜBER dem Satz, wie der Bezug darüber — und aus demselben Grund
   wie `Ohne Quelle`: „ein Vorbehalt unter dem Text wird zu spät gelesen"
   (Spezifikation 28). Der erste Hinweis ist bei allen 17 Personalmustern der
   Rechtsvorbehalt, der verabredungsgemäß aus dem Blatt genommen wurde.

   RUHIG, NICHT NERVÖS (Abschnitt 14 dieses Blattes): kein Kasten, keine
   Alarmfarbe, kein Banner. Was den Hinweis tragen lässt, ist die kräftigere
   Schrift und die Linie links — dieselbe Linie, die der Fehler eine Regel
   weiter oben benutzt. Er fällt dadurch auf, dass er oben steht.

   DIE ÜBRIGEN HINTER EINEM ABRUF: die Redaktion führt zu einem Muster bis zu
   zwanzig Hinweise (1.19.04). Zwanzig Absätze über der Antwort schieben die
   Antwort aus dem Bild, und „Die Antwort steht im Vordergrund" ist Alex'
   Vorgabe vom 15.10.2026. */
.spido .ahinweise{display:flex;flex-direction:column;gap:5px;
  padding-left:11px;border-left:3px solid var(--spido-linie,#e7e3de);
  border-radius:2px}
.spido .ahinweis{margin:0;line-height:1.5;font-size:13.5px;
  color:var(--spido-text-2,#4a4441)}
.spido .ahinweismehr>summary{font-size:13px;cursor:pointer;
  color:var(--spido-text-leise,#7a736d)}
.spido .ahinweismehr>ul{margin:6px 0 0;padding-left:18px;
  display:flex;flex-direction:column;gap:5px;
  font-size:13.5px;line-height:1.5;color:var(--spido-text-2,#4a4441)}

/* --- 2 Referenzbaustein: ein Muster für alle fünf Arten ------------------ */
.spido .arefzeile{margin:1px 0 0;display:flex;flex-wrap:wrap;gap:6px 10px}
.spido .aref{font-size:13.5px;text-decoration:none;
  border-bottom:1px solid var(--spido-linie,#e7e3de);padding-bottom:1px}
.spido .aref:hover{border-bottom-color:currentColor}
/* Eine Quelle ohne Ziel bleibt lesbar und führt nirgendwohin. */
.spido .aref-ohne{font-size:13.5px;color:var(--spido-text-leise,#7a736d)}

/* =========================================================================
   M2 · DAS INTERAKTIONSVOKABULAR (Claude Design, Screen 09)

   „Vier Interaktionsarten, direkt im Text — kein Link-Symbol, keine
   zusätzlichen Öffnen-Icons."

   SIE LIEGEN AUF DEM VORHANDENEN VERTRAG, ES KOMMT KEIN NEUER DAZU:

       Objekt       entity_reference / document_reference / source_reference
       Vorgang      action_reference / task_reference
       Aktion       primary_action (gefüllt) · secondary_actions (Kontur)
       Erklärung    routing.reason bzw. action.reason

   DAS GILT IM GESPRÄCH, NICHT ÜBERALL. Die Regeln hängen deshalb unter
   `.aantwort` und nicht an `.aref` allein — in einer Dokumentliste oder im
   Posteingang steht derselbe Baustein und soll dort bleiben, wie er ist.
   ========================================================================= */

/* OBJEKT: der Name selbst ist der Verweis. Kein Symbol, keine Unterstreichung
   — „Der Name selbst ist farblich hervorgehoben und klickbar". */
.spido .aantwort .aref{font-weight:600;color:var(--spido-purple,#6D28D9);
  border-bottom:0;padding-bottom:0}
.spido .aantwort .aref:hover{color:var(--spido-purple-tief,#5B21B6);
  text-decoration:underline;text-underline-offset:2px}

/* VORGANG: dasselbe, dazu eine dezente Fläche. „Dezenter Hintergrund
   unterscheidet Vorgänge von Objekten." Die Unterscheidung kommt aus der
   Referenzart im Vertrag und nicht aus dem Wort. */
.spido .aantwort .aref[data-art="vorgang"],
.spido .aantwort .aref[data-rolle="vorgang"]{
  color:var(--cd-vorgang-text,#5B21B6);background:var(--cd-vorgang-flaeche,#F1EBFA);
  border-radius:var(--cd-radius-pille,999px);padding:1px 9px}
.spido .aantwort .aref[data-rolle="vorgang"]:hover{text-decoration:none;
  background:#E9DFF7}

/* Die Bezugszeile bleibt leiser als der Satz — sie sagt, worum es geht, und
   ist nicht die Aussage. */
.spido .aantwort .abezug .aref{font-weight:600;font-size:13px}

/* AKTION: Pillen. „eine primäre Empfehlung (gefüllt), Alternativen (Kontur),
   Neutrales (grau konturiert)." Der dritte Fall ist neu und hing bisher an
   derselben Klasse wie der zweite. */
/* DIESELBEN DREI STUFEN AUCH AN DER ZEILE (`.awahlen`, MYS-271). Dort stehen
   seit dem 21.10.2026 die benannten Antworten einer Rückfrage als Knöpfe —
   „weiterbearbeiten" / „neu anlegen" —, gebaut von derselben Funktion wie die
   Knöpfe der Antwort (`darstellung._knopf`). Eine zweite Gestalt für dasselbe
   Bedienelement wäre genau die zweite Wahrheit, die der Antwortvertrag
   abgeschafft hat: ein Knopf, der an der Zeile anders aussieht als zwei Zeilen
   darunter, sieht aus wie etwas anderes. */
.spido .aantwort .ataten{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:2px}
.spido .aantwort .ataten .btn,
.spido .aantwort .awahlen .btn{border-radius:var(--cd-radius-pille,999px);
  padding:9px 16px;font-size:13px;font-weight:600;box-shadow:none}
.spido .aantwort .ataten .btn.gefuellt,
.spido .aantwort .awahlen .btn.gefuellt{background:var(--spido-purple,#6D28D9);
  color:#fff;border:1px solid var(--spido-purple,#6D28D9)}
.spido .aantwort .ataten .btn.gefuellt:hover,
.spido .aantwort .awahlen .btn.gefuellt:hover{background:var(--spido-purple-tief,#5B21B6)}
.spido .aantwort .ataten .btn.ghost,
.spido .aantwort .awahlen .btn.ghost{background:#fff;
  color:var(--cd-vorgang-text,#5B21B6);
  border:1px solid var(--cd-kontur-violett,#D7CBEF);text-decoration:none}
.spido .aantwort .ataten .btn.ghost:hover,
.spido .aantwort .awahlen .btn.ghost:hover{background:var(--cd-vorgang-flaeche,#F1EBFA);
  color:var(--cd-vorgang-text,#5B21B6);text-decoration:none}
/* Neutral: was weder Empfehlung noch Alternative ist — „Später", „Ändern". */
.spido .aantwort .ataten .btn.neutral,
.spido .aantwort .awahlen .btn.neutral{background:#fff;color:#4A443D;
  border:1px solid var(--cd-kontur-neutral,#DDD6CA)}
.spido .aantwort .ataten .btn.neutral:hover,
.spido .aantwort .awahlen .btn.neutral:hover{background:#FBFAF7;color:#26221E}
.spido .aantwort .atatform{margin:0;display:inline-flex}

/* ERKLÄRUNG (`.afrage`): ZURÜCKGENOMMEN AM 21.10.2026, MYS-263 Befund 4.
   Der Knopf las `routing.reason` — ein Protokollfeld („Angabe fehlt",
   „aufgelöst"). Die vollständige Begründung steht bei
   `darstellung.ERKLAERUNG_ZURUECK`; hier steht sie, damit niemand die Regeln
   aus einem alten Entwurf wieder einsetzt, ohne den Grund zu kennen. Mit dem
   Knopf sind gegangen: der Kreis, der dunkle Hinweis und die Auflage
   „auch ohne Maus" (`:focus`) vom 20.10. — die Auflage GILT WEITER für jedes
   Element, das einen Hinweis beim Überfahren zeigt, sie hat hier nur kein
   Element mehr. */

/* --- 3 Action Review: Ausnahmen zuerst, der Normalfall als Zahl ---------- */
.spido .agruppen{list-style:none;margin:0;padding:0;display:flex;
  flex-wrap:wrap;gap:4px 14px}
.spido .agruppe{font-size:13.5px;color:var(--spido-text-2,#4a4441)}
/* Die Entscheidung trägt etwas mehr Gewicht als die übrigen Zahlen - sie ist
   das, wovon der Nutzer weitermachen muss. */
.spido .agruppe-needs_decision{font-weight:var(--spido-fw-halb,600)}
/* DIE ZEILEN DER AUSWAHLLISTE STEHEN JETZT IN `antwortmarken.css`, UND ZWAR
   OHNE `.spido`-VORSILBE — verschoben am 22.10.2026 (Lauf 479, MYS-263).

   DER GRUND IST GEMESSEN: dieses Blatt wird auf den Claude-Seiten GAR NICHT
   geladen (an `/aufnahme` nachgesehen — `alphatest.css` kommt dort nur noch in
   zwei HTML-Kommentaren vor, in keinem `<link>`), und der Körper dieser Seiten
   trägt die Klasse `.spido` nicht. Beides einzeln hätte gereicht: die Regeln
   standen da, und auf der Seite, auf der Julia arbeitet, galt keine einzige.
   Die Zeile fiel damit auf den Fluss zurück — vier Felder hintereinander, ohne
   Abstand, ohne den Trennpunkt und ohne eigene Zeile für die Begründung. GENAU
   DAS HAT JULIA AM 22.10. WIEDER GEMELDET, nachdem die Zeilen am 21.10. gebaut
   und mit 39 grün / 0 rot abgenommen worden waren: das Messmittel prüfte das
   MARKUP, und das Markup war richtig.

   EINE STELLE JE SACHE (U9): sie stehen dort und NICHT zusätzlich hier — zwei
   Fassungen derselben Maße würden auseinanderlaufen, und das verbietet der Kopf
   von `antwortmarken.css` ausdrücklich. Für Julias Schale ändert das nichts:
   sie lädt `antwortmarken.css` ebenfalls, und keine andere Regel im Baum zielt
   auf diese Klassen (nachgesehen in allen Blättern beider Welten). */
/* Der Normalfall und das Erledigte: eine Zeile, kein Block. */
.spido .aruhig{margin:1px 0 0;font-size:13.5px;color:var(--spido-text-leise,#7a736d)}
/* Ab 13 Ausnahmen tritt „Alle ansehen" an ihre Stelle (E4). */
.spido .aviele{margin:2px 0 0;font-size:14px}

/* --- 4 Entscheidungsbaustein: innerhalb des Reviews, keine eigene Seite -- */
.spido .aentscheidung{flex-direction:column;align-items:flex-start}
/* Kästchen UND Knöpfe stehen hier — der Abstand ist für beide gebaut: eng
   zwischen Kästchen in einer Zeile (4px), weit genug zwischen zwei Knöpfen,
   dass niemand den falschen trifft (16px, MYS-271). */
.spido .awahlen{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:3px;
  align-items:center}
.spido .awahl{display:inline-flex;align-items:center;gap:6px;font-size:14px;
  cursor:pointer}
.spido .awahl input{margin:0}

/* --- 5 Knöpfe: der Hauptweg trägt die Zahl ------------------------------- */
.spido .ataten{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:3px}
.spido .atatform{margin:0}

/* --- 6 Vorschlagszeile: candidates zum Antippen (E1) --------------------- */
.spido .avorschlaege{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.spido .avorschlag{font:inherit;font-size:13.5px;cursor:pointer;
  padding:4px 11px;border-radius:999px;
  border:1px solid var(--spido-linie,#e7e3de);background:none;
  color:inherit;text-align:left}
.spido .avorschlag:hover{border-color:var(--spido-purple,#6d28d9)}

/* --- 7 Automatisch ausgeführt: ruhig, in der Zeile (E6) ------------------ */
.spido .aselbst{font-size:13px;color:var(--spido-text-leise,#7a736d)}
.spido .awarum{font:inherit;font-size:13px;background:none;border:0;padding:0;
  color:inherit;text-decoration:underline;cursor:pointer}

/* --- 8 Kontextmarke am Composer (E3) ------------------------------------- */
/* IMPLIZIT UND AUSDRÜCKLICH SEHEN VERSCHIEDEN AUS, und das ist der ganze
   Punkt: einen Fokus hat der Nutzer nicht gewählt - er entsteht dadurch, dass
   etwas offen ist. Eine Auswahl hat er getroffen. Wer beides gleich zeichnet,
   lässt ihn für eine Entscheidung halten, was keine war. */
.spido .kmarken{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.spido .kmarke{display:inline-flex;align-items:center;gap:5px;
  font-size:13px;line-height:1;padding:4px 7px 4px 9px;border-radius:999px;
  max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spido .kfokus{color:var(--spido-text-leise,#7a736d);
  border:1px dashed var(--spido-linie,#e7e3de)}
.spido .kauswahl{color:var(--spido-purple,#6d28d9);
  border:1px solid currentColor;font-weight:var(--spido-fw-halb,600)}
.spido .kpfeil{opacity:.7}
.spido .kweg{font:inherit;background:none;border:0;padding:0 0 0 2px;
  color:inherit;cursor:pointer;opacity:.6;line-height:1}
.spido .kweg:hover{opacity:1}
/* Die Marken sitzen IM Composer, über dem Feld - nicht daneben und nicht in
   einer eigenen Box (Julia: „Keine zusätzliche Context Box"). */
.spido .auftragszeile .kmarken{grid-column:1/-1;padding:0 2px 5px}

/* --- 9 Auswahlmodus in Objektlisten (E2) --------------------------------- */
/* Haken erscheinen ERST im Auswahlmodus. Eine Liste, in der immer Kästchen
   stehen, sieht nach Formular aus, auch wenn niemand etwas auswählen will. */
.spido .oliste .owahl{display:none}
.spido .oliste.waehlt .owahl{display:inline-flex;margin-right:9px}
.spido .oliste.waehlt .ozeile{cursor:pointer}
.spido .oleiste{position:sticky;bottom:0;display:none;
  align-items:center;gap:12px;padding:9px 12px;
  background:var(--spido-flaeche,#fff);
  border-top:1px solid var(--spido-linie,#e7e3de)}
.spido .oliste.waehlt ~ .oleiste,.spido .oleiste.an{display:flex}
.spido .ozahl{font-weight:var(--spido-fw-halb,600)}

/* Produktauswahl aus der zentralen Produktstammliste (E-J40, 12.10.2026).
   Das Wahlfeld steht unter der Flaeche und ist bewusst schmaler als sie: es
   ist ein Werkzeug, keine zweite Eingabe. Die Hinweise darunter tragen die
   Farbe nicht als Warnung - "nicht in der Produktstammliste" ist kein Fehler,
   und "Sicherheitsdatenblatt wird noch ergaenzt" ist kein Mangel des Dienstes. */
.pwahl { margin-top: .4rem; width: 100%; font-size: .9rem; }
.phinweise { margin: .35rem 0 0; padding-left: 1.1rem; list-style: disc; }
.phinweise li { font-size: .85rem; line-height: 1.35; color: var(--grau-700, #555); }
.phinweise li.pfremd { color: var(--grau-700, #555); }
.phinweise li.psdb { color: var(--grau-700, #555); }