/* =====================================================================
   H4M-Dashboard · Oberfläche
   =====================================================================
   Nach dem Entwurf „Praxisverwaltung mehrerer Professionen" aus Claude
   Design. Zwei Dinge sind bewusst anders als dort:

   Der Entwurf lädt Schriften von Google Fonts und Symbole von unpkg.
   Beides sind Fremdaufrufe bei jedem Seitenaufruf. Google Fonts per
   Hotlink ist in Österreich und Deutschland mehrfach beanstandet
   worden, und ein System, das später Patientendaten trägt, sollte gar
   nicht erst dritte Server über seine Benutzung informieren. Also:
   Symbole als eingebettetes SVG in den Vorlagen — und die Schriften
   liefern wir seit dem 22.09.2026 selbst aus (`public/schriften/`),
   statt nur ihre Namen zu nennen. Bis dahin stand hier ein reiner
   Systemstapel, und weil Fraunces auf kaum einem Rechner liegt, liefen
   alle Überschriften als Georgia — die Anwendung sah nie so aus wie der
   Entwurf, ohne dass der Grund sichtbar war.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Schriften — selbst ausgeliefert, nichts von außen.

   Drei Familien, alle drei unter der SIL Open Font License 1.1 (die
   Lizenztexte liegen als `OFL-*.txt` daneben, das verlangt die Lizenz
   bei Weitergabe). Alle drei sind VARIABLE Schriften: eine Datei je
   Zeichensatz trägt den ganzen Strichstärkenbereich, deshalb sechs
   Dateien für drei Familien und nicht neunzehn. `font-weight` als
   Bereich anzugeben ist bei einer variablen Schrift Pflicht — mit
   einem einzelnen Wert rechnet der Browser die übrigen Stärken selbst
   aus (falsches Fett) statt die Achse zu stellen.

   `local(…)` zuerst: Wer die Schrift installiert hat, lädt nichts.
   `font-display: swap`: Der Text steht sofort da, im Systemersatz, und
   wechselt, sobald die Datei da ist — eine leere Seite wäre schlimmer
   als ein kurzer Sprung.
   `unicode-range` trennt Latin von Latin-Ext: Deutsche Texte holen die
   85-kB-Datei gar nicht erst, sie kommt erst bei einem Namen wie Kovač.

   Die Adressen sind RELATIV zu dieser Datei: `stil.css` liegt unter
   `/statisch/`, also löst `schriften/…` von selbst richtig auf — auch
   wenn der Präfix in `main.ts` einmal ein anderer wird. Die
   `?v=`-Kennzeichnung der Stilvorlage gilt für sie nicht (eine Query
   zählt bei der Auflösung nicht mit); eine geänderte Schrift bekommt
   deshalb einen neuen Dateinamen, sie wird nicht überschrieben.

   Die CSP im `Caddyfile` braucht dafür `font-src 'self'` — ohne den
   Eintrag verwirft `default-src 'none'` jede dieser Dateien, und zwar
   lautlos.

   DIESELBEN SECHS BLÖCKE STEHEN IN `pdf.css`: Die erzeugten Blätter sind
   ein eigenes Dokument, das Chromium ohne diese Datei lädt, und ein
   Dokument muss seine Schriften selbst deklarieren. Wer eine
   Schriftdatei umbenennt, ändert BEIDE Dateien — sonst kommt das PDF im
   Systemersatz heraus, ohne dass auf dem Bildschirm etwas auffällt.
   --------------------------------------------------------------------- */

@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900;
  font-display: swap;
  src: local("Inter"), url("schriften/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 100 900;
  font-display: swap;
  src: local("Inter"), url("schriften/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Fraunces; font-style: normal; font-weight: 100 900;
  font-display: swap;
  src: local("Fraunces"), url("schriften/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Fraunces; font-style: normal; font-weight: 100 900;
  font-display: swap;
  src: local("Fraunces"), url("schriften/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800;
  font-display: swap;
  src: local("JetBrains Mono"), url("schriften/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800;
  font-display: swap;
  src: local("JetBrains Mono"), url("schriften/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Flächen */
  --grund:          #FAF7F2;
  --flaeche:        #FFFFFF;
  --flaeche-hover:  #F4EFE7;
  --linie:          #E8E0D2;

  /* Schrift */
  --text:           #1B1810;
  --text-stark:     #3B3526;
  --ruhig:          #6E6553;
  --zart:           #A89B85;

  /* Akzent */
  --akzent:         #2F6F5E;
  --akzent-dunkel:  #1B4438;
  --akzent-hell:    #EAF1EE;

  /* Zustände */
  --warnung:        #8E3F26;
  --warnung-hell:   #FBEEE8;
  --gold:           #C68B3C;

  /* Tönungen — Fläche und Schrift immer als Paar.
     Der Entwurf färbt Avatare und Abzeichen und lässt nur die Tabelle
     selbst ruhig; genau daher kommt sein Eindruck. Diese acht Werte
     standen bisher als einzige des Entwurfs nicht in dieser Datei,
     und deshalb wirkte die Seite grauer als die Vorlage. */
  --ton-gruen-flaeche: #EAF1EE;  --ton-gruen-schrift: #245A4B;
  --ton-gold-flaeche:  #FBF2E4;  --ton-gold-schrift:  #7A5316;
  --ton-rost-flaeche:  #F6D8C9;  --ton-rost-schrift:  #8E3F26;
  --ton-sand-flaeche:  #F4EFE7;  --ton-sand-schrift:  #6E6553;
  /* Drei weitere fuer die Ressourcen-Kategorien (0053): Hellblau fuer
     UE und Rosé fuer Praxen wie in der alten Praxisplanung, Lila fuer
     Raeume. OE traegt das Gold, ADL das Gruen, Sonstiges den Sand. */
  --ton-blau-flaeche:  #E4F0F7;  --ton-blau-schrift:  #23506B;
  --ton-rosa-flaeche:  #F9E6E4;  --ton-rosa-schrift:  #7E3F3A;
  --ton-lila-flaeche:  #EDE8F5;  --ton-lila-schrift:  #4F3D78;

  --radius:         16px;   /* Karten */
  --radius-klein:   10px;   /* Schaltflächen, Felder, Menüpunkte */

  --schrift:        Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-titel:  Fraunces, Georgia, "Times New Roman", serif;
  --schrift-zahl:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --uebergang:      140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

/* Nur für Vorleseprogramme: sichtbar für sie, unsichtbar am Bildschirm.
   `display:none` ginge nicht — das versteckt es auch vor ihnen. */
.nur-vorlese {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

body {
  margin: 0;
  font: 15px/1.5 var(--schrift);
  font-feature-settings: "ss01", "cv11";
  color: var(--text);
  background: var(--grund);
}

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-dunkel); }
::selection { background: #C9DBD3; color: #0F2A22; }

/* ---------------------------------------------------------------------
   Kopfleiste
   --------------------------------------------------------------------- */
.leiste {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 24px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.marke { display: flex; align-items: center; gap: 10px; }
.marke .zeichen {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-weight: 600; font-size: 13px;
}
.marke .wort {
  font-family: var(--schrift-titel);
  font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em;
}

/* Der Kontextwechsel — in einem mandantenfähigen System die wichtigste
   Orientierung überhaupt. Deshalb eine Schaltfläche und kein Textlink. */
.kontextwahl {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--flaeche);
  color: var(--text-stark);
  font: inherit; font-weight: 500;
  transition: background var(--uebergang), border-color var(--uebergang);
}
.kontextwahl:hover { background: var(--flaeche-hover); border-color: var(--zart); }
/* `_symbole.njk` gibt dem `<svg>` keine Groesse mit; ohne diese Regel
   waechst es auf die Vorgabe des Browsers. */
.kontextwahl svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* Ein langer Praxisname darf die Leiste nicht sprengen: Bei 360px
   Breite lief die Kopfleiste sonst nach rechts aus dem Bild. Der Name
   wird abgeschnitten, Marke und Person bleiben ganz. */
.kontextwahl { min-width: 0; }
.kontextwahl > span { min-width: 0; }
.kontextwahl strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.marke, .leiste .rechts { flex: 0 0 auto; }
.kontextwahl .art {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ruhig); font-weight: 600;
}

.leiste .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.person { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; }
.person .name { font-size: 14px; font-weight: 600; line-height: 1.15; }
.person .rolle { font-size: 12px; color: var(--ruhig); line-height: 1.15; }

/* ---------------------------------------------------------------------
   Gerüst: Menü links, Inhalt rechts
   --------------------------------------------------------------------- */
.rahmen { display: flex; min-height: calc(100vh - 64px); }

.menue {
  flex: 0 0 240px; width: 240px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 16px;
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
}
.menue ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.menue a {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 14px;
  border-radius: var(--radius-klein);
  color: var(--text-stark); font-weight: 500;
  transition: background var(--uebergang);
}
.menue a:hover { background: var(--flaeche-hover); color: var(--text-stark); }
.menue a[aria-current] { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.menue svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* Management, Einstellungen und Plattform folgen dem Hauptmenue mit
   etwas Abstand und einer feinen Linie -- nicht mehr ganz unten am
   Rand (Flo, 08.10.2026). Bis dahin schob `margin-top: auto` sie ans
   Ende der Spalte, und auf einem hohen Bildschirm lagen sie weit weg
   vom Rest. Ohne einen Punkt darin faellt die Gruppe samt Linie weg. */
.menue .unten { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.menue .unten:not(:has(li)) { display: none; }

/* Management klappt auf (Flo, 08.10.2026): ein `<details>`, dessen
   Kopf aussieht wie ein Menuepunkt, mit einem Pfeil rechts. Darunter
   die Reiter des Bereichs, eingerueckt an einer feinen Linie, die unter
   dem Symbol beginnt -- als Baum, nicht als zweite Liste gleichrangiger
   Punkte. Eingeklappt und am Telefon steht stattdessen der einfache
   Link (`li.kurz`). */
.menue li.kurz { display: none; }
.menue details.menuegruppe > summary {
  display: flex; align-items: center; gap: 12px;
  height: 48px; padding: 0 14px; list-style: none; cursor: pointer;
  border-radius: var(--radius-klein);
  color: var(--text-stark); font-weight: 500;
  transition: background var(--uebergang);
}
.menue details.menuegruppe > summary::-webkit-details-marker { display: none; }
.menue details.menuegruppe > summary:hover { background: var(--flaeche-hover); }
.menue details.menuegruppe > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.menue details.menuegruppe > summary.aktiv { color: var(--akzent-dunkel); }
.menue details.menuegruppe > summary > span { flex: 1 1 auto; }
.menue details.menuegruppe > summary > svg:last-child {
  width: 16px; height: 16px; color: var(--ruhig); transition: transform var(--uebergang);
}
.menue details.menuegruppe[open] > summary > svg:last-child { transform: rotate(180deg); }
.menue .unterpunkte {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 6px 24px; padding-left: 10px; border-left: 1px solid var(--linie);
}
.menue .unterpunkte a { height: 38px; padding: 0 12px; font-size: 14px; font-weight: 400; }
.menue .unterpunkte a[aria-current] { font-weight: 500; }
@media (min-width: 60.01rem) {
  body:has(.menue-schalter:checked) .menue li.gruppe { display: none; }
  body:has(.menue-schalter:checked) .menue li.kurz { display: block; }
}

/* ---------------------------------------------------------------------
   Menü einklappen
   ---------------------------------------------------------------------
   Der Zustand steckt in einem Kontrollkästchen, nicht in Javascript.
   Damit klappt das Menü auch dann, wenn ein Skript nicht lädt; das
   Skript in `oberflaeche.js` merkt sich nur, wie es zuletzt stand.

   `body:has(…)` statt eines Geschwisterselektors, weil Kopfleiste und
   Rahmen in `layout.njk` in verschiedenen Blöcken liegen und deshalb
   keine Geschwister sind. */
.menue-schalter { position: absolute; opacity: 0; pointer-events: none; }

.menue-knopf {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  color: var(--text-stark); cursor: pointer;
  transition: background var(--uebergang);
}
.menue-knopf:hover { background: var(--flaeche-hover); }
.menue-knopf svg { width: 18px; height: 18px; }
.menue-schalter:focus-visible + .menue-knopf { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Nur am Schreibtisch. Am Telefon ist der Knopf ausgeblendet, aber
   oberflaeche.js stellt den gemerkten Zustand trotzdem her -- ohne die
   Grenze stand das Menue dort eingeklappt da, und nichts konnte es
   wieder oeffnen. */
@media (min-width: 60.01rem) {
  body:has(.menue-schalter:checked) .menue { flex-basis: 72px; width: 72px; padding: 20px 12px; }
  body:has(.menue-schalter:checked) .menue a { justify-content: center; padding: 0; gap: 0; }
  body:has(.menue-schalter:checked) .menue a > span { display: none; }
}

/* Lesbare Breite fuer Text und Formulare -- aber nicht fuer den
   Kalender: Der lebt von Spalten, und jede weggelassene Spalte ist eine
   Behandlerin, die man nicht sieht. `breiteSeite` im Controller hebt
   die Grenze auf (Flo, 14.09.2026). */
.spalte { flex: 1 1 auto; min-width: 0; padding: 24px; max-width: 76rem; }
.spalte.breit { max-width: none; }

/* ---------------------------------------------------------------------
   Brotkrumen und Seitentitel
   --------------------------------------------------------------------- */
.krumen { font-size: 13px; color: var(--ruhig); margin: 0 0 4px; }
.krumen a { color: var(--ruhig); }
.krumen a:hover { color: var(--text-stark); }
.krumen .trenner { margin: 0 .4rem; color: var(--zart); }
.krumen [aria-current] { color: var(--text-stark); font-weight: 500; }

h1 {
  font-family: var(--schrift-titel);
  font-size: 28px; font-weight: 500; letter-spacing: -0.01em;
  margin: 0 0 1.2rem;
}
h2 { font-size: 17px; font-weight: 600; margin: 0 0 .3rem; letter-spacing: -0.005em; }
h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ruhig); margin: 1.6rem 0 .5rem;
}
p { margin: .5rem 0; }
.ruhig { color: var(--ruhig); font-size: 14px; }
/* Abstand nach oben, wo ein Formular oder Absatz nach einem anderen
   Block steht. Als Klasse und nicht als `style=""`: Das sperrt die CSP
   des Servers (`style-src 'self'`). */
.abstand-oben { margin-top: 1rem; }

/* ---------------------------------------------------------------------
   Karten
   --------------------------------------------------------------------- */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.karte + .karte { margin-top: 16px; }
.karte > h2:first-child, .karte > h1:first-child { margin-top: 0; }

.meldung, .fehler {
  border-radius: var(--radius-klein);
  padding: .7rem 1rem;
  font-size: 14px;
  margin: 0 0 16px;
}
.meldung { color: var(--akzent-dunkel); background: var(--akzent-hell); border: 1px solid #C9DBD3; }
.fehler  { color: var(--warnung);      background: var(--warnung-hell); border: 1px solid #F0D6CB; }
/* Erklaerung, weder Erfolg noch Fehler: „hier steht nichts, und zwar
   deshalb". Als Block -- `.hinweis` ist ein Abzeichen fuer ein Wort und
   trug an mehreren Stellen ganze Absaetze. */
.meldung.still { color: var(--ruhig); background: var(--flaeche-hover); border-color: var(--linie); }

/* Wohin ein Formular nach dem Speichern zurückspringt (17.10.2026,
   `_kartenmeldung.njk`): die Karte mit etwas Luft über dem Kopf; ein
   Speicherknopf am Ende eines langen Formulars (`.mitte`) in die Mitte
   des Fensters -- dort stand er, als man ihn drückte, und die Felder
   darüber bleiben sichtbar. */
.sprungziel { scroll-margin-top: 16px; }
.sprungziel.mitte { scroll-margin-top: 45vh; }
/* Die Meldung zu einer Tabellenzeile steht als eigene Zeile darunter. */
table.liste tr.zeilenmeldung td { padding-top: 0; }
table.liste tr.zeilenmeldung .meldung, table.liste tr.zeilenmeldung .fehler { margin: 0; }
/* Der Bericht eines Importlaufs: Filter, Seiten, die eben bearbeitete Zeile (23.10.2026). */
.berichtfilter { margin: 1rem 0 .4rem; }
.berichtfilter form.suche { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 40rem; }
.berichtfilter form.suche input[type="search"] { flex: 1 1 16rem; }
.seitenzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: .6rem 0; font-size: 13px; }
.seitenzeile .seitenwahl { display: inline-flex; gap: 12px; align-items: center; }
table.liste tr.bearbeitet > td { background: var(--akzent-hell); }
table.liste tr.festgehalten > td { opacity: .75; }
/* Nachname ergänzen im Klientenimport (0254): Feld und Knopf in einer Zeile. */
table.liste form.nachnameform { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
table.liste form.nachnameform input.schmal { width: 9rem; }

/* ---------------------------------------------------------------------
   Schaltflächen — drei Bedeutungen, drei Aussehen. „Austragen" darf
   nicht aussehen wie „Speichern".
   --------------------------------------------------------------------- */
button, .knopf {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  font: inherit; font-weight: 600;
  color: #fff; background: var(--akzent);
  border: 1px solid transparent; border-radius: var(--radius-klein);
  cursor: pointer; text-decoration: none;
  transition: background var(--uebergang), border-color var(--uebergang);
}
button:hover, .knopf:hover { background: var(--akzent-dunkel); color: #fff; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

button.zweit, .knopf.zweit {
  background: var(--flaeche); color: var(--text-stark);
  border-color: var(--linie); font-weight: 500;
}
button.zweit:hover, .knopf.zweit:hover { background: var(--flaeche-hover); color: var(--text-stark); }

button.gefahr, .knopf.gefahr {
  background: var(--flaeche); color: var(--warnung);
  border-color: #F0D6CB; font-weight: 500;
}
button.gefahr:hover { background: var(--warnung-hell); color: var(--warnung); }

/* Schlicht = ein Textlink, der zufällig ein Formular abschickt. */
button.schlicht {
  height: auto; padding: 0; gap: 0;
  color: var(--ruhig); background: none; border: none;
  font-weight: 500; text-decoration: underline;
}
button.schlicht:hover { background: none; color: var(--text-stark); }

.klein, button.klein, .knopf.klein { height: 34px; padding: 0 12px; font-size: 13px; }

/* ---------------------------------------------------------------------
   Formulare
   --------------------------------------------------------------------- */
label { display: block; margin: 0 0 .3rem; font-weight: 600; font-size: 13px; color: var(--text-stark); }
/* `input[type="image"]` ist KEIN Eingabefeld, sondern ein Bild (die
   Schmerzkarte, 0142). Es hier mitzunehmen hatte eine Folge, die man
   nicht vermutet: Die HTML-Attribute `width`/`height` sind nur
   Darstellungshinweise und verlieren gegen JEDE Autorenregel -- also
   reservierte der Browser vor dem Laden KEINEN Platz, und wenn das Bild
   eintraf, ruckte alles darunter nach unten. Stand ein `#…`-Anker in der
   Adresse (nach jedem gesetzten Punkt), sprang die Seite dabei wieder
   nach oben. */
input:not([type="image"]), select, textarea {
  width: 100%; height: 44px; padding: 0 .8rem;
  font: inherit; color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche);
}
input:focus-visible, select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--akzent); }

form.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 1rem; }
form.raster .breit { grid-column: 1 / -1; }
/* In einer Karte macht die Karte den Abstand, nicht das Formular. */
.karte > form.raster { margin-top: 0; }
form.raster button { margin-top: .2rem; justify-self: start; }
form.reihe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
form.reihe select, form.reihe input { width: auto; min-width: 14rem; }

/* ---------------------------------------------------------------------
   Listen — EINE Variante für alle Tabellen. Vorher stand dieselbe Idee
   fünfmal in dieser Datei, je einmal für Mitglieder, Verträge, Matrix,
   Köpfe und die Verwaltung.
   --------------------------------------------------------------------- */
table.liste { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 14px; }
table.liste th {
  text-align: left; padding: 0 12px .6rem 0;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ruhig); border-bottom: 1px solid var(--linie);
}
table.liste td { padding: .7rem 12px .7rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.liste tr:last-child td { border-bottom: 0; }
table.liste td:last-child, table.liste th:last-child { padding-right: 0; }
table.liste .aktionen { white-space: nowrap; text-align: right; }
table.liste .aktionen > * + * { margin-left: 6px; }
table.liste input, table.liste select { height: 36px; font-size: 13px; }
table.liste .zahl { font-family: var(--schrift-zahl); font-size: 13px; }

/* Matrix: mittig, weil Kästchen keine Textspalten sind. */
table.matrix th:not(:first-child), table.matrix td:not(:first-child) { text-align: center; width: 7rem; }
table.matrix td:first-child { font-weight: 600; }
/* Die zweite Matrix einer Einheitsgruppe (0166): das eigene Personal. */
details.personalmatrix { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linie); }
details.personalmatrix > summary .ruhig { font-weight: 400; }
details.personalmatrix > form { margin-top: .6rem; }

.hinweis {
  display: inline-block; margin-left: .5rem;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--akzent-dunkel); background: var(--akzent-hell);
}
.hinweis.still { color: var(--ruhig); background: var(--flaeche-hover); }
.selbst { color: var(--akzent); font-weight: 600; font-size: 13px; }
.karte.stillgelegt { opacity: .55; }
ul.mitgliederliste { list-style: none; margin: .4rem 0 0; padding: 0; }
ul.mitgliederliste li {
  display: flex; align-items: center; gap: .8rem;
  padding: .5rem 0; border-bottom: 1px solid var(--linie); font-size: 14px;
}
ul.mitgliederliste li:last-child { border-bottom: 0; }
ul.mitgliederliste form { margin: 0; }
/* Rechte: mehrere Personen auf einmal aufnehmen (22.10.2026) -- ein Chip
   je Person, die noch nicht in der Gruppe ist. */
details.aufklapp.aufnehmen { margin: .6rem 0 .4rem; }
fieldset.personenwahl {
  display: flex; flex-wrap: wrap; gap: 6px;
  border: 0; padding: 0; margin: .6rem 0 .8rem; min-width: 0;
}
fieldset.personenwahl label.chipwahl { font-size: 13px; font-weight: 500; padding: 5px 12px 5px 8px; }
/* Rechte: das Seitenmenü der Gruppen (22.10.2026). Links neben den
   Karten, klebt beim Rollen; schmal steht es als Chipzeile oben. */
.rechteseite { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 20px; align-items: start; }
.rechteinhalt { min-width: 0; }
nav.gruppennav {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 14px 8px 10px;
}
nav.gruppennav .ueber {
  display: block; padding: 0 10px 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ruhig);
}
nav.gruppennav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
nav.gruppennav a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-klein);
  color: var(--text-stark); text-decoration: none; font-size: 14px;
}
nav.gruppennav a .name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
nav.gruppennav a .zahl { font-family: var(--schrift-zahl); font-size: 12px; color: var(--ruhig); }
nav.gruppennav a:hover { background: var(--flaeche-hover); }
nav.gruppennav a[aria-current="location"] { background: var(--akzent-hell); color: var(--akzent-dunkel); }
nav.gruppennav a.still { color: var(--ruhig); }
nav.gruppennav li.trenner {
  margin: 8px 10px 2px; padding-top: 8px; border-top: 1px solid var(--linie);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ruhig);
}
nav.gruppennav li.trenner:empty { padding-top: 0; margin-bottom: 4px; }
@media (max-width: 60rem) {
  .rechteseite { grid-template-columns: 1fr; }
  nav.gruppennav { position: static; max-height: none; padding: 12px; }
  nav.gruppennav ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  nav.gruppennav a { padding: 4px 10px; border: 1px solid var(--linie); border-radius: 999px; font-size: 13px; }
  nav.gruppennav li.trenner { flex: 1 1 100%; margin: 4px 0 0; }
  nav.gruppennav li.trenner:empty { height: 0; margin: 2px 0; padding: 0; border: 0; }
}
ul.schlicht-liste { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--ruhig); }

/* Filterknöpfe (Herkunft in der Service-Einheit) */
nav.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0 .2rem; }
nav.filter a {
  padding: .4rem .9rem; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); color: var(--text-stark);
  font-size: 13px; white-space: nowrap;
  transition: background var(--uebergang), border-color var(--uebergang);
}
nav.filter a:hover { background: var(--flaeche-hover); border-color: var(--zart); }
nav.filter a[aria-current] {
  border-color: var(--akzent); background: var(--akzent-hell);
  color: var(--akzent-dunkel); font-weight: 600;
}

/* Kennzahlen auf der Übersicht */
dl.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin: 1.2rem 0 0; }
dl.zahlen dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ruhig); }
dl.zahlen dd { margin: .3rem 0 0; font-family: var(--schrift-titel); font-size: 32px; font-weight: 500; }

/* Angaben untereinander, Beschriftung klein darueber -- fuer einen
   Datensatz, der keine Liste ist (die Abwesenheit im Lichtkasten). */
dl.angaben { margin: 0; }
dl.angaben dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ruhig); }
dl.angaben dd { margin: .3rem 0 0; }
dl.angaben dd + dt { margin-top: 1rem; }

/* ---------------------------------------------------------------------
   Anmeldung und Kontextwahl — ohne Gerüst, mittig
   --------------------------------------------------------------------- */
body.schmal main { max-width: 30rem; margin: 8vh auto 3rem; padding: 0 1rem; }
main { max-width: none; margin: 0; padding: 0; }
ul.wahl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Praxen in Einrichtung (0199): je Praxis Kopf, Wege und die Übergabe. */
ul.einrichtungsliste { list-style: none; margin: 0; padding: 0; }
ul.einrichtungsliste > li { padding: 14px 0; border-top: 1px solid var(--linie); }
ul.einrichtungsliste > li:first-child { border-top: 0; padding-top: 4px; }
ul.einrichtungsliste .kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
ul.einrichtungsliste .wege { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
ul.einrichtungsliste form.reihe label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; max-width: 46rem; }
ul.einrichtungsliste form.reihe label input { width: auto; min-width: 0; margin-top: 3px; }
/* Die Kontextwahl schickt ein Formular (button), die Praxiswahl in Mein
   Bereich und Einstellungen einen Link (a.knopf). Dieselbe Frage,
   dasselbe Aussehen. */
ul.wahl button, ul.wahl .knopf {
  width: 100%; height: auto; padding: .9rem 1rem;
  justify-content: flex-start; text-align: left;
  color: var(--text-stark); background: var(--flaeche);
  border-color: var(--linie); font-weight: 500;
}
ul.wahl button:hover, ul.wahl .knopf:hover { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent-dunkel); }
ul.wahl button.aktiv { border-color: var(--akzent); background: var(--akzent-hell); }
.abmelden { margin-top: 1rem; text-align: center; }

/* ---------------------------------------------------------------------
   Schmale Bildschirme: Menü wird eine Reihe, Listen werden Karten.
   Die Umbruchregel steht EINMAL und gilt für jede Tabelle mit
   data-spalte an den Zellen.
   --------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .rahmen { display: block; }
  .menue {
    width: auto; flex: none; flex-direction: row; gap: 6px;
    padding: 10px 16px; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid var(--linie);
  }
  .menue ul { flex-direction: row; gap: 6px; }
  .menue a { height: 40px; white-space: nowrap; border: 1px solid var(--linie); }
  /* Die untere Gruppe stand hier einmal auf `display: none` -- damit
     waren Management, Einstellungen und Plattform am Telefon
     unerreichbar, ohne dass es jemandem auffiel: Am Schreibtisch sind
     sie ja da. Sie wird jetzt Fortsetzung derselben waagrechten Reihe,
     durch einen Strich abgesetzt. */
  .menue .unten {
    margin-top: 0; padding-top: 0; border-top: 0;
    padding-left: 6px;
    border-left: 1px solid var(--linie);
  }
  .menue li.gruppe { display: none; }
  .menue li.kurz { display: block; }
  .spalte { padding: 16px; }
  .leiste { gap: 12px; padding: 0 16px; }
  .leiste .person .name, .leiste .person .rolle { display: none; }
}

@media (max-width: 44rem) {
  /* Am Telefon bleibt von der Marke das Zeichen; das Wort nähme dem
     Praxisnamen den Platz. */
  .marke .wort { display: none; }
  form.raster { grid-template-columns: 1fr; }
  table.liste, table.liste thead, table.liste tbody,
  table.liste tr, table.liste th, table.liste td { display: block; }
  table.liste thead { display: none; }
  table.liste tr {
    border: 1px solid var(--linie); border-radius: 12px;
    padding: .8rem 1rem; margin-bottom: 10px;
  }
  table.liste td {
    border: 0; padding: .3rem 0; width: auto !important; text-align: right;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  }
  table.liste td::before { content: attr(data-spalte); color: var(--ruhig); font-size: 12px; text-align: left; }
  table.liste td:first-child {
    display: block; text-align: left; font-weight: 600;
    padding-bottom: .5rem; margin-bottom: .4rem; border-bottom: 1px solid var(--linie);
  }
  table.liste td:first-child::before { content: none; }
  table.liste .aktionen { text-align: left; flex-wrap: wrap; }
  /* Die Summenzeile bleibt eine Zeile, auch wenn die Tabelle zu Karten wird. */
  table.liste tfoot { display: block; }
  table.liste tfoot tr { display: flex; justify-content: flex-end; gap: 8px; border: 0; padding: 0; margin: 0; }
  table.liste tfoot th { display: inline; padding: 0; }
  table.liste tfoot th:empty { display: none; }
}

/* ---------------------------------------------------------------------
   Seitenkopf, Reiter und Filterzeile — nach dem Entwurf
   --------------------------------------------------------------------- */
.seitenkopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 8px 0 18px;
}
.seitenkopf .ueber {
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 4px;
}
.seitenkopf h1 { font-size: 36px; letter-spacing: -0.02em; margin: 0; }
.seitenkopf .aktionen { display: flex; gap: 10px; }

/* Reiter: die aktive trägt eine 2px-Linie unter sich, keine Kachel. */
nav.reiter {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 0 2px;
  border-bottom: 1px solid var(--linie);
}
nav.reiter a {
  padding: 0 2px 14px; color: var(--ruhig); font-weight: 400;
  box-shadow: none; transition: color var(--uebergang);
}
nav.reiter a:hover { color: var(--text-stark); }
nav.reiter a[aria-current] {
  color: var(--akzent-dunkel); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--akzent);
}

.filterzeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 4px;
}
.filterzeile input[type="search"] { width: auto; min-width: 15rem; flex: 0 1 22rem; }
.filterzeile select { width: auto; min-width: 12rem; }
.filterzeile .zaehler { margin-left: auto; font-size: 14px; color: var(--ruhig); }
/* Warnung ueber dem Kalender: eine Doppelbuchung ist nichts, was man
   erst in der Spalte finden soll. Der Anker fuehrt auf die Karte. */
.filterzeile .warnzeile {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
  border: 1px solid #E0B4A4; border-radius: 999px; background: var(--warnung-hell);
  font-size: 13px; font-weight: 600; color: var(--warnung); text-decoration: none;
}
.filterzeile .warnzeile:hover { background: #F6E2D9; }
.filterzeile .warnzeile svg { width: 15px; height: 15px; flex: 0 0 auto; }
.filterzeile.warnungen { gap: 8px; }

@media (max-width: 60rem) {
  .seitenkopf h1 { font-size: 28px; }
  .filterzeile .zaehler { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------------
   Gesichter — Profilbild, sonst Initialen
   ---------------------------------------------------------------------
   Der Kreis ist immer da. Ob ein Bild hinterlegt ist, ändert nur
   seinen Inhalt, nicht das Raster — sonst springt die Zeilenhöhe,
   sobald jemand ein Bild hochlädt.
   --------------------------------------------------------------------- */
.gesicht {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 999px; overflow: hidden;
  font-size: 13px; font-weight: 600; line-height: 1;
  background: var(--ton-sand-flaeche); color: var(--ton-sand-schrift);
  user-select: none;
}
.gesicht img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gesicht.gruen { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.gesicht.gold  { background: var(--ton-gold-flaeche);  color: var(--ton-gold-schrift); }
.gesicht.rost  { background: var(--ton-rost-flaeche);  color: var(--ton-rost-schrift); }
.gesicht.sand  { background: var(--ton-sand-flaeche);  color: var(--ton-sand-schrift); }
.gesicht.gross { width: 84px; height: 84px; font-size: 27px; }

/* Die Person in einer Listenzeile: Kreis, darüber Name, darunter Adresse. */
.personenzelle { display: flex; align-items: center; gap: 12px; min-width: 0; }
.personenzelle .wer { min-width: 0; }
.personenzelle .wer strong { display: block; font-weight: 600; }
.personenzelle .wer .zart {
  display: block; font-size: 12px; color: var(--ruhig);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Getöntes Abzeichen — Profession, Rolle, Herkunft. */
.ton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--ton-sand-flaeche); color: var(--ton-sand-schrift);
}
.ton.gruen { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.ton.gold  { background: var(--ton-gold-flaeche);  color: var(--ton-gold-schrift); }
.ton.rost  { background: var(--ton-rost-flaeche);  color: var(--ton-rost-schrift); }
.ton.sand  { background: var(--ton-sand-flaeche);  color: var(--ton-sand-schrift); }
.ton.blau  { background: var(--ton-blau-flaeche);  color: var(--ton-blau-schrift); }
.ton.rosa  { background: var(--ton-rosa-flaeche);  color: var(--ton-rosa-schrift); }
.ton.lila  { background: var(--ton-lila-flaeche);  color: var(--ton-lila-schrift); }

/* Ressourcen: das hochgeladene Symbol in der Liste und im Editor.
   `object-fit: contain` -- ein Symbol wird nicht beschnitten, und der
   Hintergrund bleibt frei, weil ein PNG mit Transparenz kommt. */
.symbol-klein { width: 32px; height: 32px; object-fit: contain; display: block; }
table.liste td.symbolzelle { width: 32px; padding-right: 8px; }
.bildfeld .symbolvorschau img { max-height: 128px; border: 0; }

/* Apartments am Standort (0072): Symbol links, Name und Info rechts. */
.apartmentkopf { display: flex; gap: 16px; align-items: flex-start; margin-bottom: .6rem; }
.apartmentkopf .symbol {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 12px;
  background: var(--grund); display: grid; place-items: center;
}
.apartmentkopf .symbol img { width: 56px; height: 56px; object-fit: contain; display: block; }
.apartmentkopf h2 { margin: 0 0 .25rem; }
.apartmentkopf p { margin: 0; }
/* Die Kategorie wird an ihrem Abzeichen gewaehlt -- so sieht man, wie
   sie im Kalender aussieht. Ohne Rahmen um das Feld: Das sind vier
   Marken, kein Kasten. */
fieldset.tonwahl { margin: 0; padding: 0; border: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
fieldset.tonwahl legend { display: block; margin: 0 0 .3rem; padding: 0; font-weight: 600; font-size: 13px; color: var(--text-stark); }
fieldset.tonwahl label.ton { margin: 0; cursor: pointer; }
fieldset.tonwahl input[type="radio"] { width: 14px; height: 14px; margin: 0; accent-color: currentColor; }

/* ---------------------------------------------------------------------
   Lichtkasten — Bearbeiten liegt über der Liste, nicht in ihr
   ---------------------------------------------------------------------
   Aufgezogen über `:target`, also über die Adresse der Seite. Damit
   funktioniert er ohne eine Zeile Javascript, die Zurück-Taste
   schließt ihn, und ein geöffneter Kasten ist verlinkbar.
   --------------------------------------------------------------------- */
.lichtkasten { display: none; }
.lichtkasten:target { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.lichtkasten .schleier { position: absolute; inset: 0; background: rgba(27, 24, 16, .45); }
.lichtkasten .kasten {
  position: relative;
  width: min(38rem, 100%); max-height: 88vh; overflow: auto;
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(27, 24, 16, .22);
}
.lichtkasten .kastenkopf, dialog.dialog .kastenkopf { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.lichtkasten .kastenkopf h2, dialog.dialog .kastenkopf h2 { font-family: var(--schrift-titel); font-size: 22px; font-weight: 500; margin: 0; }
.lichtkasten .zu, dialog.dialog .zu {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 999px; color: var(--ruhig); font-size: 18px; line-height: 1;
}
.lichtkasten .zu:hover, dialog.dialog .zu:hover { background: var(--flaeche-hover); color: var(--text-stark); }
.lichtkasten form { margin: 0; }

/* ---------------------------------------------------------------------
   Dialog — das native <dialog>, für Anlegen-Formulare auf /plattform
   ---------------------------------------------------------------------
   Ohne Javascript öffnet ihn die Adresse (`:target`) wie den
   Lichtkasten: ohne Schleier und ohne Escape, aber vollständig
   bedienbar; „Abbrechen" ist ein Link auf `#`. Mit Javascript hängt
   `oberflaeche.js` showModal() an die Links, die auf einen Dialog
   zeigen — Schleier, Escape und Fokus bringt dann der Browser mit.
   --------------------------------------------------------------------- */
dialog.dialog {
  position: relative;
  width: min(40rem, calc(100vw - 40px)); max-height: 88vh; overflow: auto;
  margin: auto; padding: 24px;
  color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(27, 24, 16, .22);
}
dialog.dialog[open] { position: fixed; }
dialog.dialog::backdrop { background: rgba(27, 24, 16, .45); }
dialog.dialog:target { display: block; position: fixed; inset: 0; z-index: 50; }
dialog.dialog form.raster { margin-top: 0; }
dialog.dialog .fehler { margin-top: 0; }

/* Die Fusszeile eines Formulars: links Hinweis oder Abbrechen, rechts
   der Knopf. Stand einmal nur als `.lichtkasten .fusszeile` -- die
   Importuebernahme, der Auszug und der Servicevertrag benutzten sie
   ausserhalb, und dort stand ihr Knopf ungestylt links. */
.fusszeile {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie);
}
.fusszeile .rechts { margin-left: auto; }

/* Bildwahl im Kasten: Kreis links, Schaltflächen rechts. */
.bildwahl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.bildwahl input[type="file"] {
  width: auto; height: auto; padding: 8px 10px;
  font-size: 13px; background: var(--grund);
}
.bildwahl .wie { font-size: 12px; color: var(--ruhig); margin: .35rem 0 0; }
/* Das Fotoformular des Klienten: Feld und Knopf in einer Zeile neben dem Kreis. */
.bildwahl form.fotoform { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; flex: 1 1 20rem; margin: 0; }
.bildwahl form.fotoform > div { flex: 1 1 16rem; min-width: 0; }
.bildwahl form.fotoform .zart { display: block; margin-top: .3rem; }
.bildwahl form.fotoform button { margin-top: 1.55rem; }

/* Karten und Fotos eines Standorts — ein Block je Bild.
   `.bildwahl` daneben ist eine Flex-ZEILE und taugt nur fuer die
   Knoepfe; Ueberschrift, Vorschau und Formulare darin haetten
   nebeneinander gestanden. */
.bildfeld { margin: 1.4rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--linie); }
.bildfeld:first-of-type { margin-top: .6rem; padding-top: 0; border-top: 0; }
.bildfeld h3 { margin: 0 0 .2rem; }
.bildfeld .wie { font-size: 12px; color: var(--ruhig); margin: .35rem 0 0; }
.bildfeld .vorschau { display: block; margin: .7rem 0; }
/* Ohne diese Grenze rendert eine Karte in ihrer natuerlichen Groesse --
   1600 Pixel breit -- und schiebt die Knoepfe daneben aus dem Bild.
   Ein globales `img { max-width: 100% }` gibt es hier nicht; die
   einzige Bildregel im Stylesheet gilt dem Profilbild. */
.bildfeld .vorschau img {
  display: block; max-width: 100%; max-height: 260px; width: auto; height: auto;
  border: 1px solid var(--linie); border-radius: var(--radius);
}

@media (max-width: 44rem) {
  .lichtkasten:target { padding: 0; place-items: end stretch; }
  .lichtkasten .kasten { max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; }
}

@media (max-width: 60rem) {
  .menue-knopf { display: none; }
}

/* Breite Schaltflächen auf der Anmeldeseite — dort ist je Zeile nur
   eine, und eine halbe Zeile breit sähe nach Nebensache aus. */
button.breit, .knopf.breit { width: 100%; justify-content: center; margin-top: .6rem; }

/* „oder" zwischen den beiden Anmeldewegen, mit Linien links und rechts. */
.trennwort {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--zart); font-size: 13px;
}
.trennwort::before, .trennwort::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--linie);
}

/* Die Person in der Kopfleiste führt zu „Mein Konto". */
a.person { color: inherit; }
a.person:hover { background: var(--flaeche-hover); color: inherit; }

/* Ein Lichtkasten, der schon offen ankommt — die Akte wird einzeln
   nachgeladen, `:target` allein würde ihn erst nach dem Sprung öffnen. */
.lichtkasten.offen {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 20px;
}
.lichtkasten .kasten.breit { width: min(52rem, 100%); }
.lichtkasten h3 { margin: 1.1rem 0 -.2rem; }
.lichtkasten h3:first-of-type { margin-top: .2rem; }
.lichtkasten textarea { height: auto; padding: .6rem .8rem; resize: vertical; }

/* Eine Textarea erbt oben die feste Hoehe von 44px -- richtig fuer ein
   Eingabefeld, unbrauchbar fuer eine Wegbeschreibung. Bis zur
   Standortseite standen alle Textareas in einem Lichtkasten, und die
   Regel darueber genuegte. */
textarea { height: auto; min-height: 88px; padding: .6rem .8rem; resize: vertical; }

/* Mehrzeiliger Text, wie er eingegeben wurde. KEIN nl2br und kein
   `| safe`: Beides waere eine Stelle, an der HTML aus einer Eingabe in
   die Seite kaeme -- und die gibt es im ganzen Repo nicht. Das
   Autoescaping bleibt an, die Umbrueche macht das Stylesheet. */
.fliesstext { white-space: pre-line; }

/* ---------------------------------------------------------------------
   Formatierter Text (21.10.2026, `_formatiert.njk`): Fett, Kursiv,
   Unterstrichen, Aufzählung, Nummerierung. Anzeige und Editor zeichnen
   dasselbe Markup -- was man schreibt, steht nach dem Speichern genau
   so da. Jede Zeile ist ein Absatz ohne Abstand, wie in einem Textfeld.
   --------------------------------------------------------------------- */
.formatiert { overflow-wrap: anywhere; }
.formatiert p { margin: 0; }
.formatiert ul, .formatiert ol { margin: .15em 0; padding-left: 1.5em; }
.formatiert li { margin: 0; padding-left: .15em; }
.formatiert li::marker { color: var(--ruhig); }
.formatiert u { text-underline-offset: .15em; }

/* Der Editor: Leiste und Fläche in einem Rahmen. Ohne Javascript gibt es
   beides nicht, dann steht das Textfeld mit der Schreibweise da. */
.formatfeld { display: flex; flex-direction: column; gap: 6px; }
.formatrahmen {
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche);
}
.formatrahmen:focus-within { border-color: var(--akzent); }
.formatleiste {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border-bottom: 1px solid var(--linie); background: var(--grund);
  border-radius: var(--radius-klein) var(--radius-klein) 0 0;
}
.formatleiste button {
  height: 30px; width: 32px; padding: 0; justify-content: center;
  font-size: 14px; color: var(--text-stark); background: none;
  border: 1px solid transparent; border-radius: 6px;
}
.formatleiste button:hover { background: var(--flaeche); border-color: var(--linie); color: var(--text); }
.formatleiste button[aria-pressed="true"] {
  background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent-dunkel);
}
.formatleiste .trenner { width: 1px; height: 18px; margin: 0 4px; background: var(--linie); }
.formatiert.eingabe {
  position: relative; min-height: 150px; max-height: 60vh; overflow-y: auto;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.55; color: var(--text);
  outline: none; cursor: text;
}
/* Der Platzhalter: Ein leerer Editor trägt `<p><br></p>`, `:empty`
   greift also nie -- die Klasse setzt das Skript. */
.formatiert.eingabe.leer::before {
  content: attr(data-platzhalter); position: absolute; top: 10px; left: 12px; right: 12px;
  color: var(--zart); pointer-events: none;
}
.lichtkasten input[readonly], .lichtkasten textarea[readonly] {
  background: var(--grund); color: var(--ruhig);
}

/* ---------------------------------------------------------------------
   Wochenraster der Schichtplanung
   ---------------------------------------------------------------------
   Baut auf `table.liste matrix` auf — dieselbe Bauform wie die
   Rechtematrix, nur mit Wochentagen statt Bereichen. Die Tabelle bleibt
   grau; Farbe steckt allein in `.ton` und `.gesicht`, wie im Entwurf.
   --------------------------------------------------------------------- */
table.raster td { vertical-align: top; }
table.raster th:not(:first-child):not(:last-child),
table.raster td:not(:first-child):not(:last-child) { width: auto; min-width: 6.5rem; }
table.raster td:last-child { width: 9rem; text-align: right; }

/* Ein Zeitblock in der Zelle. Mehrere untereinander — das ist die
   Mittagspause, sichtbar als Abstand statt als fehlendes Häkchen. */
.zeitblock {
  display: block;
  font-family: var(--schrift-zahl);
  font-size: 11.5px; font-weight: 500;
  padding: 3px 7px;
}
.zeitblock + .zeitblock { margin-top: 3px; }
/* Mit Standortfilter: ein Block an einem anderen Standort (22.10.2026).
   Er bleibt stehen, damit der Tag nicht frei aussieht, tritt aber
   zurueck -- gestrichelt wie die Spalte „anderswo" im Kalender. */
.zeitblock.anderswo {
  background: transparent; color: var(--ruhig);
  border: 1px dashed var(--linie);
}

.hinweis.warn { color: var(--warnung); background: var(--warnung-hell); }

/* Ein Tag ohne Arbeit — gesetzlicher Feiertag oder freier Tag der
   Praxis. Die Zelle wird ruhiger und nicht lauter: Es ist kein Fehler,
   sondern ein Tag, an dem nichts zu tun ist. */
.raster td.freitag { background: var(--grund); }

/* ---------------------------------------------------------------------
   Der Pausenregler
   ---------------------------------------------------------------------
   Eine Zahl von 0 bis 5 je Wochentag. Sie bestimmt, wie viele Zeitpaare
   der Tag zeigt: 0 Pausen = ein Block, 1 Pause = zwei Blöcke.

   Der Zustand steckt in einer Radiogruppe, das Aussehen in `:has()` —
   dasselbe Mittel, mit dem das Menü einklappt. Kein Javascript, kein
   Neuladen: Klick auf „2", zwei Felder erscheinen.

   Die Zahl wird nirgends gespeichert. Sie ist `Anzahl Blöcke − 1` und
   wird beim Öffnen daraus abgeleitet — eine eigene Spalte könnte mit
   den tatsächlichen Blöcken auseinanderlaufen.
   --------------------------------------------------------------------- */
.tag { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.tag:last-of-type { border-bottom: 0; }
.tagkopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.tagkopf strong { font-size: 14px; }

.pausen { display: inline-flex; align-items: center; gap: 0; }
.pausen .reglertext {
  margin-right: 8px; font-size: 12px; color: var(--ruhig);
  letter-spacing: .04em;
}
.pausen input { position: absolute; opacity: 0; pointer-events: none; }
.pausen label {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; margin: 0;
  border: 1px solid var(--linie); border-left-width: 0;
  background: var(--flaeche);
  font-size: 12px; font-weight: 500; color: var(--ruhig);
  cursor: pointer;
  transition: background var(--uebergang), color var(--uebergang);
}
.pausen label:first-of-type { border-left-width: 1px; border-radius: 8px 0 0 8px; }
.pausen label:last-of-type  { border-radius: 0 8px 8px 0; }
.pausen label:hover { background: var(--flaeche-hover); }
.pausen input:checked + label {
  background: var(--akzent-hell); color: var(--akzent-dunkel);
  border-color: var(--akzent); font-weight: 600;
}
.pausen input:focus-visible + label { outline: 2px solid var(--akzent); outline-offset: 1px; }

.paare { display: flex; flex-direction: column; gap: 6px; }
.paar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paar input[type="time"] { width: auto; flex: 0 0 7.5rem; height: 38px; font-size: 14px; }
.paar select { width: auto; flex: 1 1 12rem; height: 38px; font-size: 13px; }
.paar .bis { color: var(--zart); }

/* So viele Paare, wie der Regler sagt. Sechs Regeln, einmal
   geschrieben, für alle sieben Tage. */
.tag:has(.pausen input[value="0"]:checked) .paare .paar:nth-child(n+2),
.tag:has(.pausen input[value="1"]:checked) .paare .paar:nth-child(n+3),
.tag:has(.pausen input[value="2"]:checked) .paare .paar:nth-child(n+4),
.tag:has(.pausen input[value="3"]:checked) .paare .paar:nth-child(n+5),
.tag:has(.pausen input[value="4"]:checked) .paare .paar:nth-child(n+6),
.tag:has(.pausen input[value="5"]:checked) .paare .paar:nth-child(n+7) {
  display: none;
}

@media (max-width: 44rem) {
  .tagkopf { flex-wrap: wrap; }
  .paar input[type="time"] { flex: 1 1 6.5rem; }
  /* Der Lichtkasten der Schichtwoche wird auf schmalen Geräten zum
     Blatt von unten -- die Regel für `:target` erreicht `.offen` nicht. */
  .lichtkasten.offen { padding: 0; place-items: end stretch; }
  .lichtkasten.offen .kasten { max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; }
}

/* Ein Abzeichen, das zugleich ein Link ist — die Abwesenheit im Raster
   führt in ihren Lichtkasten. */
a.hinweis { text-decoration: none; }
a.hinweis:hover { background: var(--flaeche-hover); color: var(--text-stark); }

/* Kontrollkästchen mit Beschriftung in einer Zeile. */
label:has(> input[type="checkbox"]) {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500; margin-top: .4rem;
}

/* ---------------------------------------------------------------------
   Was ohne Javascript nichts täte, wird auch nicht gezeigt
   ---------------------------------------------------------------------
   `oberflaeche.js` setzt `mit-js` auf den Körper, sobald es läuft. Ein
   Regler, der sich nicht ziehen lässt, wäre schlimmer als kein Regler.
   --------------------------------------------------------------------- */
.nur-mit-js { display: none; }
body.mit-js .nur-mit-js { display: block; }
/* Das Gegenstück: ein Knopf, den nur braucht, wer ohne Javascript kommt. */
body.mit-js .nur-ohne-js { display: none; }

/* ---------------------------------------------------------------------
   Die Zeitachse des Dienstplans
   ---------------------------------------------------------------------
   Nach dem Entwurf: Stundenmarken oben, eine Schiene, darauf die
   Blöcke als Balken und an ihren Enden runde Griffe.
   --------------------------------------------------------------------- */
.achse {
  position: relative;
  height: 56px;
  margin: 10px 0 12px;
  touch-action: none;
}
.achse .marken { position: absolute; inset: 0 0 auto 0; height: 16px; }
.achse .marken span {
  position: absolute; top: 0; transform: translateX(-50%);
  font-family: var(--schrift-zahl); font-size: 11px; color: var(--ruhig);
}
.achse .schiene {
  position: absolute; left: 0; right: 0; top: 26px;
  height: 10px; border-radius: 999px; background: var(--flaeche-hover);
}
.achse .balken {
  position: absolute; top: 26px; height: 10px;
  border-radius: 999px; background: var(--akzent);
}
.achse .griff {
  position: absolute; top: 19px; width: 16px; height: 16px;
  margin-left: -8px;
  border-radius: 999px; border: 2px solid var(--akzent-dunkel);
  background: var(--flaeche);
  box-shadow: 0 2px 6px rgba(27, 24, 16, .18);
  cursor: ew-resize; touch-action: none;
}
.achse .griff:hover { border-color: var(--text-stark); }

/* Die gerechnete Dauer je Block, rechts neben den Feldern. */
.paar .dauer {
  flex: 0 0 4rem; text-align: right;
  font-family: var(--schrift-zahl); font-size: 12px; color: var(--ruhig);
}

/* „Tag leeren" sitzt rechts in der Tageszeile. */
.tagkopf .tagleeren { margin-left: auto; }

/* Ein leerer Tag zeigt seinen Vorschlag: gestrichelt und blass. Ohne
   das erschiene der Regler erst, wenn schon etwas eingetragen ist —
   also genau dann nicht, wenn man ihn braucht. */
.achse .balken.vorschlag {
  background: transparent;
  border: 1px dashed var(--zart);
  cursor: pointer;
}
.achse .balken.vorschlag:hover { background: var(--flaeche-hover); }
.achse .griff.vorschlag { border-color: var(--zart); }
.achse .griff.vorschlag:hover { border-color: var(--akzent); }

/* --- Modulwahl im Servicevertrag ---------------------------------- */
/* Eine Liste von Kaestchen mit Erklaerung darunter. Kein Raster: Die
   Erklaerungen sind unterschiedlich lang, und in Spalten gezwaengt
   stuenden sie schlechter lesbar nebeneinander. */
.modulwahl { list-style: none; display: grid; gap: 4px; margin: 12px 0 18px; }
.modulwahl label {
  display: flex; gap: 12px; align-items: start;
  padding: 10px 12px; border-radius: var(--radius);
}
.modulwahl label:hover { background: var(--flaeche-hover); }
.modulwahl input { margin-top: 3px; flex: none; }
.modulwahl span { display: grid; gap: 2px; }

/* --- Versandeinstellung (Einstellungen › E-Mail) ------------------- */
/* Das Verfahren schaltet die passende Feldgruppe sichtbar -- ueber
   `:has()` und den gewaehlten Radio, ohne Javascript. Ohne CSS stehen
   beide Gruppen da; die Datenbank prueft, dass nur die passende
   gefuellt ist. */
form.mail-einstellung .verfahren { display: flex; gap: 1.2rem; flex-wrap: wrap; }
form.mail-einstellung .verfahren label {
  display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0;
}
form.mail-einstellung input[type="radio"] { width: 18px; height: 18px; accent-color: var(--akzent); }
form.mail-einstellung fieldset.gruppe {
  margin: 0; padding: 12px 16px 16px;
  border: 1px solid var(--linie); border-radius: var(--radius);
}
form.mail-einstellung fieldset.gruppe legend { padding: 0 6px; font-weight: 600; font-size: 13px; }
form.mail-einstellung .gruppe .raster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px;
}
form.mail-einstellung:has(input[name="verfahren"][value="smtp"]:checked) .m365 { display: none; }
form.mail-einstellung:has(input[name="verfahren"][value="microsoft365"]:checked) fieldset.smtp { display: none; }
form.testen { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 1.2rem; }
@media (max-width: 40rem) {
  form.mail-einstellung .gruppe .raster { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Plattform-Kataloge: Farbpalette einer Profession
   ---------------------------------------------------------------------
   Das Farbfeld ist ein SVG mit `fill` -- kein `style=""`, das sperrt
   die CSP des Servers. Ein `<input type="color">` zeigt seine Farbe
   selbst, braucht also nichts. */
.palette { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.farbfeld { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--linie); }
/* In einer Ueberschrift (Produktliste, Editor) und im Stufenradio steht
   das Feld in der Zeile, nicht darueber. */
h1 .farbfeld, h3 .farbfeld, fieldset.tonwahl .farbfeld,
td[data-spalte="Produkt"] > .farbfeld { vertical-align: middle; margin-right: 6px; }
fieldset.tonwahl label.ton { display: inline-flex; align-items: center; gap: 4px; }
input[type="color"].farbe { width: 64px; padding: 3px; cursor: pointer; }
.farbwahl { display: flex; gap: 8px; align-items: center; }
.farbwahl input.farbcode { width: 8rem; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
fieldset.stufen { margin: 0; padding: 0; border: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
fieldset.stufen legend { display: block; margin: 0 0 .3rem; padding: 0; font-weight: 600; font-size: 13px; color: var(--text-stark); }
/* Zehn Stufen (0217): je Stufe das Feld und die Nummer darunter; der
   Grundton ist kein Feld, sondern die Grundfarbe -- er steht als Fläche
   in derselben Größe da, mit Rahmen. */
fieldset.stufen .stufe { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; font-weight: 400; }
fieldset.stufen .stufe input[type="color"].farbe { width: 52px; }
fieldset.stufen .stufe small { font-size: 11px; color: var(--ruhig); }
fieldset.stufen .stufe.grund .farbfeld { width: 52px; height: 44px; border: 2px solid var(--text-stark); border-radius: 8px; box-sizing: border-box; }
fieldset.stufen .stufe.grund small { color: var(--text-stark); font-weight: 600; }
/* Die Farbwahl im Produkteditor (0217): ein Satz unter den Stufen. */
fieldset.farbwahlprodukt > p { flex-basis: 100%; margin: 4px 0 0; }
form.raster .knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; }
form.raster .knopfreihe button { margin-top: 0; }
table.liste input.schmal, form.reihe input.schmal { width: 7rem; min-width: 0; }
table.liste tr.stillgelegt td { opacity: .55; }

/* ---------------------------------------------------------------------
   Klienten: Liste, Stamm, Vereinbarungen, Beziehungen
   ---------------------------------------------------------------------
   Aufklappen laeuft ueber <details>/<summary> -- ohne Javascript, wie
   der Lichtkasten ueber :target. Der Professions-Balken je Praxis ist
   eine Reihe Farbfelder (SVG, siehe Palette oben), die Stufe 3 der
   Profession. */
details.aufklapp > summary {
  cursor: pointer; font-weight: 600; color: var(--text-stark);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
details.aufklapp > summary::-webkit-details-marker { display: none; }
details.aufklapp > summary::before {
  content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s;
}
details.aufklapp[open] > summary::before { transform: rotate(45deg); }
details.aufklapp.karte > summary { margin: 0; }
details.aufklapp > form.raster { margin-top: 1rem; }
.beziehung details.aufklapp { margin-top: .6rem; }
.beziehung details.aufklapp > summary { font-size: 13px; }

.vereinbarung, .beziehung, .einwilligung, .abwesenheit {
  padding: .8rem 0; border-top: 1px solid var(--linie);
}
.vereinbarung:first-of-type, .beziehung:first-of-type, .abwesenheit:first-of-type { border-top: 0; }
/* Klienten-Abwesenheiten (0075): eine Zeile je Eintrag, aufgehobene und
   vergangene zurueckgenommen, das Formular zum Aendern aufklappbar. */
.abwesenheit h3 { margin: 0 0 .2rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.abwesenheit h3 .zart { font-weight: 400; }
.abwesenheit > p { margin: 0; }
.abwesenheit > p.fliesstext { margin-top: .3rem; }
.abwesenheit.beendet, .abwesenheit.vorbei, table.liste tr.vorbei { opacity: .6; }
.abwesenheit details.aufklapp { margin-top: .6rem; }
.abwesenheit details.aufklapp > summary { font-size: 13px; }
.abwesenheit details.aufklapp > form.reihe { margin-top: .8rem; }
.vereinbarung h3, .einwilligung h3 { margin: 0 0 .3rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vereinbarung.beendet { opacity: .6; }
.vereinbarung form.raster { margin-top: .6rem; }
.einwilligungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.einwilligung form.reihe { margin-top: .4rem; }
.einwilligung form.reihe input[name="hinweis"] { flex: 1 1 14rem; }
/* Reiter Vereinbarungen: eine Karte je Praxis, darin Einwilligungen und Dokumente. */
.karte > .vereinbarung { padding: 0; border-top: 0; }
.vereinbarung h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vereinbarung h3 { margin-top: 1rem; }
.einwilligung h4 { margin: 0 0 .3rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.vereinbarung details { margin-top: .4rem; }
.vereinbarung details > summary { font-size: 13px; cursor: pointer; }
ul.dokumente { list-style: none; margin: 0; padding: 0; }
ul.dokumente li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: .3rem 0; border-top: 1px solid var(--linie); }
ul.dokumente li:first-child { border-top: 0; }
form.inzeile { display: inline; margin: 0; }
form.reihe input[type="file"] { min-width: 0; }
.beziehung .rollen { margin: .4rem 0 0 52px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
label.kandidat { display: flex; align-items: center; gap: 8px; padding: .3rem 0; }
label.kandidat input { width: auto; margin: 0; }
form.raster .wie, form.reihe .wie {
  display: block; margin: 0 0 .3rem; font-weight: 600; font-size: 13px; color: var(--text-stark);
}
form.raster label + label, form.raster .wie + label { margin-top: .3rem; }

@media (max-width: 60rem) {
  .einwilligungen { grid-template-columns: 1fr; }
  .beziehung .rollen { margin-left: 0; }
}

/* Import: die Firmenzuordnung des Klientenlaufs — ein Formular im
   Bericht, mit Überschrift und Absatz als Rasterzeilen. */
form.raster.zuordnung { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
form.raster.zuordnung h3 { margin: 0; font-size: .95rem; }
form.raster.zuordnung p { margin: 0; }
/* Befundimport: die Praxiswahl je Zeile, Auswahl und Knopf in einer Reihe. */
form.zeilenwahl { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
form.zeilenwahl select { width: auto; min-width: 10rem; }

/* ---------------------------------------------------------------------
   Klient › Übersicht — nach dem Entwurf (Patientenakte › Übersicht)
   ---------------------------------------------------------------------
   Kopf mit Foto, Name und Kundennummer, Professions-Chips der
   behandelnden Praxen; darunter Abschnitte mit Eyebrow-Überschrift:
   Stammdaten als Karten im Raster, Vereinbarungen und Beziehungen als
   Zeilen. Die Seite ändert nichts, jede Zeile führt auf ihren Reiter.
   --------------------------------------------------------------------- */
.seitenkopf.klientenkopf { align-items: center; }
.seitenkopf.klientenkopf .personenzelle { gap: 18px; }
.seitenkopf.klientenkopf .gesicht.gross { width: 58px; height: 58px; font-size: 20px; }
.seitenkopf.klientenkopf h1 {
  font-size: 28px; font-weight: 500; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.seitenkopf.klientenkopf h1 .kennung {
  font-family: var(--schrift-zahl); font-size: 13px; font-weight: 400;
  letter-spacing: 0; color: var(--ruhig);
}
.seitenkopf.klientenkopf .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.seitenkopf.klientenkopf .zart { font-size: 14px; color: var(--ruhig); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  background: var(--flaeche-hover); color: var(--text-stark);
}
.chip .farbfeld { width: 10px; height: 10px; border-radius: 999px; border: 0; }

.abschnitt { margin: 0 0 24px; }
.abschnitt > h2.ueber {
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--akzent); margin: 0 0 10px;
}
.abschnitt > p.ruhig { margin: 8px 0 0; font-size: 14px; }

.stammkarten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.stammkarte {
  padding: 14px 16px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 12px; min-width: 0;
}
.stammkarte .wie { display: block; font-size: 13px; color: var(--ruhig); margin-bottom: 4px; }
.stammkarte strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.stammkarte strong .ruhig { font-weight: 400; }
.stammkarte .mono { font-family: var(--schrift-zahl); font-size: 13px; }
.stammkarte .zart { display: block; margin-top: 4px; }
.stammkarte.breit { grid-column: 1 / -1; }
.stammkarte .fliesstext { margin: 0; }

.zeilen { display: flex; flex-direction: column; gap: 8px; }
.vereinbarungszeile, .beziehungszeile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 12px; min-width: 0;
}
a.vereinbarungszeile { color: inherit; box-shadow: none; transition: background var(--uebergang); }
a.vereinbarungszeile:hover { background: var(--flaeche-hover); }
.vereinbarungszeile.beendet { opacity: .6; }
.vereinbarungszeile .farbbalken { flex: 0 0 auto; width: 10px; height: 32px; border-radius: 3px; overflow: hidden; }
.vereinbarungszeile .was, .beziehungszeile .was { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vereinbarungszeile .was strong, .beziehungszeile .was strong {
  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vereinbarungszeile .was .ruhig, .beziehungszeile .was .ruhig { font-size: 13px; }
.vereinbarungszeile .mono { font-family: var(--schrift-zahl); font-size: 13px; }
.pille {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  background: var(--akzent-hell); color: var(--akzent-dunkel);
}
.pille.aus { background: var(--flaeche-hover); color: var(--ruhig); }
.pille.warn { background: var(--warnung-hell); color: var(--warnung); }
.beziehungszeile .rollen { display: flex; gap: 6px; flex-wrap: wrap; }
.beziehungszeile .rollen .pille { background: var(--flaeche-hover); color: var(--text-stark); font-size: 13px; }
.beziehungszeile .kontakt { font-size: 13px; text-align: right; }

@media (max-width: 60rem) {
  .seitenkopf.klientenkopf h1 { font-size: 24px; }
  .vereinbarungszeile, .beziehungszeile { flex-wrap: wrap; }
  .beziehungszeile .kontakt { text-align: left; flex-basis: 100%; }
}

/* ---------------------------------------------------------------------
   Befundvorlage (0066): der Bogen als Karten je Gruppe, der Editor
   ---------------------------------------------------------------------
   Der Farbbalken ist ein SVG wie bei den Vereinbarungen -- kein
   `style=""`, das sperrt die CSP. Die Felder stehen als nummerierte
   Liste, weil die Reihenfolge im Bogen die Aussage ist. */
.befundgruppe .gruppenkopf { display: flex; align-items: center; gap: 14px; }
.befundgruppe .gruppenkopf .farbbalken { flex: 0 0 auto; width: 10px; height: 32px; border-radius: 3px; overflow: hidden; }
.befundgruppe .gruppenkopf .was { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.befundgruppe .gruppenkopf h2 { margin: 0; }
.befundgruppe .gruppenkopf .ruhig { font-size: 13px; }
ol.befundfelder { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: feld; }
ol.befundfelder li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--linie);
}
ol.befundfelder li::before {
  counter-increment: feld; content: counter(feld);
  flex: 0 0 2rem; font-family: var(--schrift-zahl); font-size: 13px; color: var(--ruhig); padding-top: 2px;
}
ol.befundfelder li.stillgelegt { opacity: .55; }
ol.befundfelder .was { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
ol.befundfelder .was strong { font-weight: 600; }
ol.befundfelder .was .ruhig { font-size: 13px; }
ol.befundfelder .chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; max-width: 40%; }

/* Editor: Titel und Hinweis untereinander in einer Zelle, die
   Professionen als ankreuzbare Chips. */
fieldset.wahl { margin: 0; padding: 0; border: 0; display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; }
fieldset.wahl legend { display: block; margin: 0 0 .3rem; padding: 0; font-weight: 600; font-size: 13px; color: var(--text-stark); }
fieldset.wahl label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; cursor: pointer; }
fieldset.wahl input[type="radio"], fieldset.wahl input[type="checkbox"] { width: auto; height: auto; margin: 0; }
fieldset.wahl small { flex-basis: 100%; }
/* Vertrag ändern (0229): „ab einem Tag" oder Korrektur -- zwei Kästen zur
   Wahl; das Feld der anderen Wahl tritt zurück (ohne Javascript, `:has`). */
fieldset.wahlgruppe { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
fieldset.wahlgruppe legend { margin: 0 0 .3rem; padding: 0; font-weight: 600; font-size: 13px; color: var(--text-stark); }
fieldset.wahlgruppe label.wahl {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px;
  border: 1px solid var(--linie); border-radius: 10px; font-weight: 400; line-height: 1.45; cursor: pointer;
}
fieldset.wahlgruppe label.wahl:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
fieldset.wahlgruppe label.wahl:has(input:disabled) { cursor: not-allowed; color: var(--ruhig); }
fieldset.wahlgruppe input[type="radio"] { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--akzent); }
form.vertragsaenderung:has(input[name="wie"][value="ab"]:checked) .nur-korrektur,
form.vertragsaenderung:has(input[name="wie"][value="korrektur"]:checked) .nur-ab { opacity: .4; }
/* Im Kalender (0240): die Standorte unter „Nur an diesen Standorten",
   eingerückt unter ihre Wahl; sie treten zurück, solange sie nicht gilt. */
fieldset.kalenderwahl .kalenderorte { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 2px 40px; }
fieldset.kalenderwahl:not(:has(input[name="kalender"][value="standorte"]:checked)) .kalenderorte { opacity: .45; }
fieldset.kalenderwahl > p.wie { margin: 2px 0 0; }
label.chipwahl {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 6px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--flaeche-hover); color: var(--text-stark); cursor: pointer;
}
label.chipwahl:has(input:checked) { background: var(--akzent-hell); color: var(--akzent-dunkel); }
label.chipwahl input { width: auto; height: auto; margin: 0; }
label.chipwahl .farbfeld { width: 10px; height: 10px; border-radius: 999px; border: 0; margin: 0; }
table.liste.befundfelder td.titel { min-width: 18rem; }
table.liste.befundfelder td.titel input + input { margin-top: 6px; }
table.liste.befundfelder .professionen { display: flex; gap: 6px; flex-wrap: wrap; max-width: 22rem; }
table.liste.befundfelder select { min-width: 10rem; }
form.raster.neuesfeld { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
form.raster.neuesfeld h3 { margin: 0; font-size: .95rem; }

@media (max-width: 60rem) {
  ol.befundfelder li { flex-wrap: wrap; }
  ol.befundfelder .chips { max-width: none; justify-content: flex-start; flex-basis: 100%; padding-left: calc(2rem + 14px); }
}

/* ---------------------------------------------------------------------
   Dialogseite: Anamnese (0069) und Klientenvertrag (0072)
   ---------------------------------------------------------------------
   Nach dem Entwurf Patientenakte › Modal: Schleier über der ganzen
   Seite, darauf eine Karte auf `--grund` mit weißem Kopf, links die
   Sprungmarken je Gruppe, rechts der Bogen -- nur die rechte Spalte
   rollt. Kein <dialog>: Die Seite IST der Dialog, und ohne Javascript
   führt das Kreuz einfach zurück. Farben sind SVG-Rechtecke, kein
   `style=""` (CSP). */
/* Der Rand wächst mit dem Bildschirm, statt immer 32px zu sein: Auf
   einem kleinen Laptop zählt jeder Pixel, auf einem großen Schirm darf
   der Kasten ruhig etwas Luft haben (Flo, 18.09.2026). */
.dialogseite-schleier {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 2.5vh, 32px) clamp(12px, 2.5vw, 40px);
  background: rgba(27, 24, 16, .4);
}
/* Beim BUCHEN bleibt der Kalender sichtbar (Flo, 23.09.2026): Man legt
   einen Termin in einen Tag, den man vor sich haben will -- welche
   Spalte frei ist, wer daneben sitzt, wo die Luecke war. Nur dieses
   eine Overlay wird heller; bei Akte, Vertrag, Aufgabe und Anamnese
   ist der Hintergrund Beiwerk und darf zurueckweichen.
   Kein Blur: Es gibt im ganzen Stylesheet keine einzige solche Regel,
   und ein Raster liest sich durch einen hellen Schleier ohnehin
   besser als durch einen verwischten. */
.dialogseite-schleier:has(> .terminneu) { background: rgba(27, 24, 16, .14); }
/* Die Höhe füllt, was der Schleier übrig lässt -- bis 1100px. Vorher war
   bei 860px Schluss, und auf einem hohen Schirm stand der Kasten als
   kleine Insel in der Mitte. Ein kurzes Formular (Aufgabe, Termin) soll
   dabei nicht zur leeren Halle werden, deshalb bleibt eine Obergrenze;
   die Klientenakte hat sie nicht, s. u. */
.dialogseite-kasten {
  width: min(1080px, 100%); height: 100%; max-height: min(1100px, 100%);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--grund); border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 64px rgba(27, 24, 16, .28);
}
/* Die Klientenakte ist keine Maske, sondern ein Arbeitsplatz: Reiterspalte
   links, Karten rechts. Sie nimmt die Breite, die da ist -- bis 1600px --,
   und die volle Höhe. Erst damit stehen in der Buchungsplanung mehrere
   Therapietage nebeneinander, statt untereinander zu rutschen. Die
   Schriftgrößen bleiben, wie sie sind; breiter heißt hier mehr Karten
   nebeneinander, nicht längere Zeilen -- die Raster darin sind
   `auto-fit`. */
.dialogseite-kasten.klientakte { width: min(1600px, 100%); max-height: 100%; }
/* Breiter heisst mehr nebeneinander, nicht laengere Zeilen: Fließtext
   bleibt auf lesbarer Breite, sonst laufen Notizen und Hinweise ueber
   den halben Schirm. */
.klientakte .fliesstext, .klientakte .hinweis.gold p { max-width: 78ch; }

.dialogseite-kasten > .kopf {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 28px 18px; background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.dialogseite-kasten > .kopf .personenzelle { gap: 18px; }
.dialogseite-kasten > .kopf .gesicht.gross { width: 58px; height: 58px; font-size: 20px; }
.dialogseite-kasten > .kopf .ueber {
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 2px;
}
.dialogseite-kasten > .kopf h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.dialogseite-kasten > .kopf .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.dialogseite-kasten > .kopf .zart { font-size: 14px; color: var(--ruhig); }
.dialogseite-kasten > .kopf .zart strong { color: var(--text-stark); font-weight: 600; }
.dialogseite-kasten > .kopf .aktionen { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dialogseite-kasten .zu {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  color: var(--ruhig); box-shadow: none; transition: background var(--uebergang);
}
.dialogseite-kasten .zu:hover { background: var(--flaeche-hover); color: var(--text-stark); }

.dialogseite-kasten > .rumpf { flex: 1 1 auto; min-height: 0; display: flex; }
.dialogseite-kasten > .rumpf.allein {
  /* Ohne Reiterspalte rollt der Rumpf selbst -- sonst haengt das Ende eines
     langen Formulars (Aufgabe, Anamnese) unsichtbar unter dem Kasten. */
  display: block; overflow-y: auto; padding: 24px 28px 32px; scroll-padding-top: 16px;
}
.dialogseite-kasten > .rumpf.allein .fehler { margin-top: 0; }
/* Das Buchungsformular ist breiter als eine Aufgabe -- Schritt 1 legt
   sechs Felder nebeneinander, und die Teilnehmerkarten brauchen Platz.
   Die Obergrenze bleibt (ein Formular soll keine leere Halle werden). */
.dialogseite-kasten.terminneu { width: min(1240px, 100%); }
.dialogseite-kasten.terminneu > .rumpf.allein > .karte { margin-bottom: 14px; }
.dialogseite-kasten .spalte {
  flex: 0 0 216px; padding: 16px 12px; overflow-y: auto;
  background: var(--flaeche); border-right: 1px solid var(--linie);
}
.dialogseite-kasten .spalte ul { list-style: none; margin: 0; padding: 0; }
.dialogseite-kasten .spalte li a {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px;
  border-radius: var(--radius-klein); color: var(--text); font-size: 14px; box-shadow: none;
  transition: background var(--uebergang);
}
.dialogseite-kasten .spalte li a:hover { background: var(--flaeche-hover); }
.dialogseite-kasten .spalte li a span:first-of-type { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialogseite-kasten .spalte .farbfeld { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 999px; border: 0; }
.dialogseite-kasten .spalte .zahl {
  flex: 0 0 auto; font-family: var(--schrift-zahl); font-size: 12px; color: var(--ruhig);
  padding: 1px 7px; border-radius: 999px; background: var(--flaeche-hover);
}
.dialogseite-kasten .spalte .zusatz {
  margin-top: 16px; padding: 14px 12px 0; border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.dialogseite-kasten .spalte .zusatz .ueber {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent);
}
.dialogseite-kasten .spalte .zusatz a.chip { box-shadow: none; }
.dialogseite-kasten .spalte .zusatz a.chip:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.dialogseite-kasten .spalte .zusatz small { font-size: 12px; line-height: 1.4; }

.dialogseite-kasten .inhalt { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 24px 28px 32px; scroll-padding-top: 16px; }
.dialogseite-kasten .inhalt > .meldung, .dialogseite-kasten .inhalt > .fehler { margin: 0 0 16px; }
.dialogseite-kasten .befundgruppe { padding: 18px 20px; border-radius: 14px; scroll-margin-top: 16px; }
.dialogseite-kasten .befundgruppe + .befundgruppe { margin-top: 16px; }
.dialogseite-kasten .befundgruppe .gruppenkopf h2 { font-size: 18px; }

.dialogseite-kasten .feld { padding: 14px 0 12px; border-top: 1px solid var(--linie); }
.dialogseite-kasten .feld:first-of-type { margin-top: 14px; }
.dialogseite-kasten .feld label { margin-bottom: 6px; }
.dialogseite-kasten .feld textarea {
  min-height: 0; padding: .55rem .8rem; resize: vertical; field-sizing: content; line-height: 1.45;
}
.dialogseite-kasten .feld textarea[readonly] { background: var(--grund); color: var(--text-stark); }
.dialogseite-kasten .feld textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.dialogseite-kasten .feld .quelle { display: block; margin-top: 6px; font-size: 13px; color: var(--ruhig); }
.dialogseite-kasten .feld .quelle strong { color: var(--text-stark); font-weight: 600; }
.dialogseite-kasten .feld .quelle .pille { margin-left: 6px; font-size: 11px; padding: 2px 8px; }
.dialogseite-kasten .feld .titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }

/* Ein fremder Eintrag: derselbe Farbbalken links wie bei den
   Vereinbarungen, schreibgeschützt -- er gehört einer anderen Praxis. */
.dialogseite-kasten .feld .fremd {
  margin-top: 10px; padding: 10px 14px;
  border-left: 4px solid var(--akzent); border-radius: 0 10px 10px 0;
  background: var(--akzent-hell);
}
.dialogseite-kasten .feld .fremd.eigen { border-left-color: var(--linie); background: var(--grund); }
.dialogseite-kasten .feld .fremd .quelle { margin-top: 0; }
.dialogseite-kasten .feld .fremd .fliesstext { margin: 6px 0 0; font-size: 14px; }

/* Der Verlauf: alle Fassungen aller sichtbaren Praxen, jüngste zuerst --
   die Änderungsverfolgung. Ersetzte Fassungen stehen gedämpft. */
.dialogseite-kasten details.verlauf { margin-top: 8px; }
.dialogseite-kasten details.verlauf > summary { font-size: 13px; color: var(--ruhig); }
.dialogseite-kasten details.verlauf ol { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--linie); }
.dialogseite-kasten details.verlauf li { padding: 6px 0; }
.dialogseite-kasten details.verlauf li + li { border-top: 1px dashed var(--linie); }
.dialogseite-kasten details.verlauf li .quelle { margin-top: 0; }
.dialogseite-kasten details.verlauf li .fliesstext { margin: 4px 0 0; font-size: 14px; }
.dialogseite-kasten details.verlauf li.ersetzt .fliesstext { color: var(--ruhig); }
.dialogseite-kasten details.verlauf li.fremd .quelle strong { color: var(--akzent-dunkel); }
.dialogseite-kasten .befundgruppe.frueher { opacity: .9; }

.dialogseite-kasten > .fuss {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; background: var(--flaeche); border-top: 1px solid var(--linie);
}
.dialogseite-kasten > .fuss .ruhig { font-size: 13px; }
.dialogseite-kasten > .fuss .aktionen { display: flex; gap: 10px; flex: 0 0 auto; }
.dialogseite-kasten form.unsichtbar { display: none; }

@media (max-width: 60rem) {
  .dialogseite-schleier { padding: 0; }
  .dialogseite-kasten { max-height: none; border-radius: 0; }
  .dialogseite-kasten > .kopf { padding: 14px 16px; }
  .dialogseite-kasten > .kopf h1 { font-size: 22px; }
  .dialogseite-kasten > .kopf .zart { display: none; }
  .dialogseite-kasten > .rumpf { flex-direction: column; }
  .dialogseite-kasten .spalte {
    flex: 0 0 auto; overflow: visible; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--linie);
  }
  .dialogseite-kasten .spalte ul { display: flex; gap: 4px; overflow-x: auto; }
  .dialogseite-kasten .spalte li a { height: 36px; white-space: nowrap; }
  .dialogseite-kasten .spalte .zusatz { margin-top: 8px; padding-top: 8px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .dialogseite-kasten .spalte .zusatz small { flex-basis: 100%; }
  .dialogseite-kasten .inhalt { padding: 16px; }
  .dialogseite-kasten > .fuss { flex-wrap: wrap; padding: 12px 16px; }
}


/* ---------------------------------------------------------------------
   Klientenvertrag (0072): die Vertragskarte nach dem Entwurf
   (Patientenakte › Verträge) und die Vertragsseite im Dialog-Look.

   Der Farbbalken links trägt die Professionen der Praxis, die Tönung im
   Kopf ist derselbe Ton bei 16 % -- beides als SVG, weil die CSP kein
   `style=""` zulässt. Der Fortschritt ist ein SVG mit drei Rechtecken:
   Grund, geplant (blass), erledigt (voll).
   --------------------------------------------------------------------- */
.vertragskarte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px;
  overflow: hidden; margin-bottom: 12px;
}
.vertragskarte.abgeschlossen { opacity: .72; }
.vertragskarte.abgeschlossen:hover { opacity: 1; }
/* Seit dem 12.10.2026 kompakt (Design-Artefakt „H4M Vertragskarte“, Flo:
   „etwas kompakter“): Der Kopf traegt Praxis, Haupttherapeut:in und
   Standort in einer Zeile, rechts die Status-Pille und „Vertrag
   oeffnen“ -- der eigene Fuss und die Angaben darunter sind weg. */
.vertragskarte > header {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--linie);
}
.vertragskarte > header .toenung {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.vertragskarte > header > * { position: relative; }
.vertragskarte > header .farbbalken { flex: 0 0 auto; width: 4px; height: 34px; border-radius: 2px; overflow: hidden; }
.vertragskarte > header .was { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vertragskarte > header a.titel { font-weight: 600; font-size: 15px; color: var(--text); box-shadow: none; }
.vertragskarte > header a.titel:hover { color: var(--akzent-dunkel); }
.vertragskarte > header .zart { font-size: 12.5px; }
.vertragskarte > header .zart a.klient { font-weight: 600; color: var(--text); box-shadow: none; }
.vertragskarte > header .zart a.klient:hover { color: var(--akzent-dunkel); }
.vertragskarte > header .knopf { flex: 0 0 auto; }
/* Der Status kraeftig (Flo: „Den Status etwas kraeftiger bitte“): volle
   Flaeche, weisse Schrift. Weiss auf Akzent und auf Ruhig haelt 4,5:1. */
.vertragskarte > header .pille.status {
  flex: 0 0 auto; padding: 5px 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--akzent); color: #FFFFFF;
}
.vertragskarte > header .pille.status.aus { background: var(--ruhig); }

/* Die Notiz zum Vertrag (Flo: „Vertragsnotizen im Hauptfeld“) -- dort,
   wo bis dahin Praxis, Haupttherapeut:in und Standort ein zweites Mal
   standen. Reiner Text wie jede Notiz. */
.vertragskarte .notiz {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 14px 0; padding: 8px 12px;
  background: var(--grund); border: 1px solid var(--linie); border-radius: 8px;
  font-size: 13.5px; color: var(--text);
}
.vertragskarte .notiz svg { flex: 0 0 auto; margin-top: 3px; color: var(--ruhig); }
.vertragskarte .notiz p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Laufzeit und erledigt · gebucht · verordnet in EINER Zeile, der Balken
   schmal daneben; bei einem beendeten Vertrag das Ende vorne. */
.vertragskarte .kurz {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px;
  padding: 10px 14px 12px; font-size: 14px;
}
.vertragskarte .kurz > span { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; min-width: 0; }
.vertragskarte .kurz .wie, .vertragskarte .abrechnungsblock.zeile .wie { font-size: 12px; color: var(--ruhig); }
.vertragskarte .kurz strong { font-weight: 500; }
.vertragskarte .kurz .stand { align-items: center; gap: 8px; }
.vertragskarte .kurz .stand .mono { font-family: var(--schrift-zahl); font-size: 13px; }
.vertragskarte .kurz .stand .balken { display: block; width: 110px; height: 6px; border-radius: 999px; overflow: hidden; }
.vertragskarte .kurz .beendigung .ruhig { font-size: 13px; }

/* Warum ein Vertrag auf der gewaehlten Arbeitsliste steht (0159), und
   der Weg, es zu erledigen. Unmittelbar unter dem Kopf: Auf der Liste
   ist das die Auskunft, wegen der man die Karte ansieht. Mahnen traegt
   den Warnton -- dort geht es um Geld, das fehlt. */
.vertragskarte .lagezeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 6px 14px; border-bottom: 1px solid var(--linie);
  background: var(--akzent-hell); color: var(--akzent-dunkel); font-size: 13px;
}
.vertragskarte .lagezeile.warn { background: var(--warnung-hell); color: var(--warnung); }
.vertragskarte .lagezeile svg { flex: 0 0 auto; }
.vertragskarte .lagezeile p { margin: 0; flex: 1 1 16rem; }
.vertragskarte .lagezeile .knopf { flex: 0 0 auto; }
.vertragskarte > .lagezeile + .merkmale { padding-top: 10px; margin-top: 0; }

/* Die Chipzeile unter dem Kartenkopf. Sie nennt sechs Dinge und laesst
   keines weg -- was fehlt, steht blass da. Ein Chip, der nur bei
   Zutreffen erscheint, beantwortet die Frage nach dem Nachfolger nicht:
   Man weiss nie, ob man ihn uebersehen hat. */
.vertragskarte .merkmale {
  position: relative; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px 0; margin: 0;
}
.merkmal {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); font-size: 12px; font-weight: 500; color: var(--text-stark);
}
.merkmal svg { width: 13px; height: 13px; flex: 0 0 auto; }
.merkmal.fehlt { color: var(--zart); border-color: var(--linie); background: transparent; font-weight: 400; }
.merkmal.warn { color: var(--warnung); border-color: var(--warnung-hell); background: var(--warnung-hell); }

/* Der Abrechnungsblock -- in der Karte und noch einmal, kleiner, an
   einem verknuepften Vertrag. Bei offener Zahlung getoent. */
.abrechnungsblock {
  background: #FAF7F2; border-top: 1px solid var(--linie); padding: 12px 18px;
}
/* Kompakt (12.10.2026): Ueberschrift und Posten in EINER Zeile. */
.abrechnungsblock.zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; padding: 8px 14px;
}
.abrechnungsblock.zeile .ueber { margin: 0; font-size: 11px; }
.abrechnungsblock.zeile > span { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; }
.abrechnungsblock.zeile strong { font-weight: 500; }
.abrechnungsblock.zeile.offen strong { color: var(--warnung); }
.abrechnungsblock.offen { background: var(--warnung-hell); border-color: var(--warnung-hell); }
.abrechnungsblock .ueber {
  margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--akzent);
}
.abrechnungsblock.offen .ueber { color: var(--warnung); }
.abrechnungsblock .ueber .pille { letter-spacing: 0; text-transform: none; margin-left: 8px; }

/* Vorgaenger und Nachfolger: derselbe Baum wie im Reiter Vereinbarungen
   (0094) -- Stamm als border-left, die Elle je Karte als ::before. */
.vertragskarte .verknuepfte { padding: 10px 14px 12px; border-top: 1px solid var(--linie); }
.vertragskarte .verknuepfte > .ueber {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--akzent);
}
.verknuepfung {
  background: var(--grund); border: 1px solid var(--linie); border-radius: 12px;
  overflow: hidden; padding: 12px 14px;
}
.verknuepfung + .verknuepfung { margin-top: 10px; }
.verknuepfung .kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verknuepfung .kopf .pfeil { display: inline-flex; color: var(--ruhig); }
.verknuepfung .kopf .pfeil svg { width: 16px; height: 16px; }
.verknuepfung .kopf strong { font-weight: 600; }
.verknuepfung p { margin: 4px 0 0; font-size: 13px; }
.verknuepfung .knopf { margin-top: 10px; }
.verknuepfung .abrechnungsblock {
  margin: 12px -14px -12px; border-top: 1px solid var(--linie); background: var(--flaeche);
}

@media (max-width: 60rem) {
  .vertragskarte > header { flex-wrap: wrap; }
}

/* Ein Warnkasten vor einer Handlung, die sich schwer zurücknehmen lässt
   -- Symbol links, Text daneben, wie der Hinweiskasten der
   Buchungsplanung. (`fieldset.zustaendige .warnkasten` weiter unten ist
   derselbe Kasten, dort aber nur bei leerer Auswahl sichtbar; die
   speziellere Regel gewinnt.) */
p.warnkasten {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--ton-gold-schrift); background: var(--ton-gold-flaeche);
  color: var(--ton-gold-schrift); font-size: 13px; line-height: 1.6;
}
p.warnkasten svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

/* Die Termine, die in eine Abwesenheit fallen (0239) -- eine Zeile je
   Termin, Tag und Zeit in Ziffernschrift, ein Klick in den Kalender. */
ul.betroffene { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
ul.betroffene li + li { border-top: 1px solid var(--linie); }
ul.betroffene a { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 7px 4px; color: inherit; text-decoration: none; }
ul.betroffene a:hover { background: var(--flaeche-hover); }
ul.betroffene .mono { font-family: var(--schrift-zahl); white-space: nowrap; }

/* Eine Handlung am Fuß einer Karte: Knopf und der Satz, der sagt, was
   sie tut. Der Satz gehoert daneben und nicht in den Knopf -- ein Knopf
   heisst, was er tut, und erklaert es nicht. */
.fussformular {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.fussformular .zart { flex: 1 1 260px; min-width: 0; }
/* Mit Rückfrage: Die Wahl steht über dem Knopf, der Satz darunter. */
.fussformular.mit-wahl { flex-direction: column; align-items: stretch; }
.fussformular.mit-wahl button { align-self: flex-start; }
fieldset.belegtwahl {
  border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
fieldset.belegtwahl legend { padding: 0 6px; font-size: 13px; color: var(--ruhig); }
fieldset.belegtwahl .kaestchen { font-size: 14px; }

/* Die Probe der Serie (0105): eine Zeile je Termin, der entstuende --
   und bei einer Kollision ein Kaestchen, das sie zulaesst. */
form.probe { margin-top: 14px; }
ol.probezeilen { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
ol.probezeilen li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 2px 8px; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche);
  font-size: 13px; line-height: 1.5;
}
ol.probezeilen li.parallel { border-color: var(--ton-gold-schrift); background: var(--ton-gold-flaeche); }
ol.probezeilen li.uebersprungen, ol.probezeilen li.schon_gebucht { background: var(--grund); color: var(--ruhig); }
ol.probezeilen .wann { flex: 0 0 auto; font-family: var(--schrift-zahl); font-size: 12px; }
ol.probezeilen .was { flex: 1 1 260px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
ol.probezeilen .zart { font-size: 13px; }
ol.probezeilen .kaestchen { font-size: 14px; font-weight: 500; }
/* Eine Gruppe je Therapietag (0111): die Kandidaten untereinander,
   genau einer waehlbar. Eine Liste kann schnell ein Dutzend Zeilen
   haben, also so flach wie moeglich -- „nur etwas groesser als die
   Schrift" (Flo, 23.09.2026). Die Falle dabei: `.filterchip` traegt
   `height: 34px`, und ein einziger davon in der Zeile gab ihr diese
   Hoehe, egal wie klein die Polsterung war. Hier steht deshalb
   `height: auto`. */
fieldset.vorschlagstag { border: 0; margin: 0 0 8px; padding: 0; }
fieldset.vorschlagstag legend {
  padding: 0 0 3px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ruhig);
}
/* Termin verschieben (24.09.2026): kompakt und DURCHSICHTIG -- man
   will den Kalender dahinter sehen, um zu erkennen, wohin man zieht
   (Flo). Derselbe helle Schleier wie beim Buchungsformular. */
.dialogseite-schleier:has(> .umbuchen) { background: rgba(27, 24, 16, .14); }
.dialogseite-kasten.umbuchen { max-width: 620px; }
.dialogseite-kasten.umbuchen .rumpf { padding: 14px 18px 18px; }
.umbuchen .wenbetrifft {
  margin: 0 0 6px; font-size: 13px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.umbuchen .wenbetrifft .pille { padding: 0 7px; font-size: 10px; line-height: 16px; }
.umbuchung {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 12px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
}
.umbuchung .vorher, .umbuchung .nachher { display: flex; flex-direction: column; gap: 1px; }
.umbuchung .vorher { opacity: .55; }
.umbuchung .zart { font-size: 12px; }
.umbuchung .pfeil { font-size: 18px; color: var(--ruhig); }
/* Warnungen als ZEILE, nicht als Karte und nicht als Kasten -- vier
   Kaesten untereinander waren hoeher als der Kalender darunter (Flo,
   25.09.2026). Nur die Praxiswarnung behaelt ihre Flaeche: Sie ist
   eine Entscheidung, die anderen sind Hinweise. */
.umbuchen .kasten {
  display: flex; align-items: flex-start; gap: 6px; margin: 0 0 3px;
  padding: 0; font-size: 12px; line-height: 1.45; color: var(--ruhig);
}
.umbuchen .kasten.warn { color: var(--warnung); }
.umbuchen .kasten.warn svg { opacity: .8; }
/* Die Praxiswarnung traegt Flaeche, weil an ihr eine Entscheidung
   haengt -- sie hat als einzige einen `strong`-Vorspann. */
.umbuchen .kasten.praxis {
  margin: 0 0 6px; padding: 7px 10px; border-radius: 8px; font-size: 13px;
  background: var(--warnung-hell);
}
.umbuchen .kasten.praxis.hinweis { background: var(--grund); border: 1px solid var(--linie); color: var(--text); }
/* Das Makro `symbol()` setzt KEINE Groesse -- ein SVG ohne `width`
   fuellt seinen Container, und in einer 12px-Zeile wird daraus ein
   Klotz (Flo, 25.09.2026). Jede Stelle, die ein Symbol in Fliesstext
   setzt, gibt ihm deshalb selbst eine Groesse. */
.umbuchen .kasten svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.umbuchen .kasten.praxis svg { width: 16px; height: 16px; }
.umbuchen .fehlertext { color: var(--warnung); font-weight: 500; }
/* Derselbe Hinweiskasten im Termin-Overlay -- im Reiter „Serie" steht
   er bei der Folgeverordnung. Ohne eigene Regel fehlte dem Symbol die
   Groesse, und es fuellte den Absatz (Flo, 28.09.2026): dieselbe
   Falle wie oben, nur eine Vorlage weiter. Eng gefasst auf
   `p.kasten`, weil `.kasten` unter `.lichtkasten` etwas ganz anderes
   ist -- der Rahmen des Lichtkastens. */
.dialogseite-kasten p.kasten {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 8px 0 0; padding: 8px 11px; border-radius: 8px;
  font-size: 13px; line-height: 1.5; background: var(--grund); color: var(--ruhig);
}
.dialogseite-kasten p.kasten.warn { background: var(--warnung-hell); color: var(--warnung); }
.dialogseite-kasten p.kasten svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.umbuchform {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.umbuchform label { display: flex; flex-direction: column; gap: 2px; }
.umbuchform label .wie { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ruhig); }
.umbuchform input[type="date"], .umbuchform input[type="time"] { width: 9.5rem; }
.umbuchform input[type="number"] { width: 5.5rem; }
/* Die Serienfrage ist eine Entscheidung, kein Feld unter Feldern --
   als Kaestchen zwischen Tag, Beginn und Dauer ging sie unter (Flo,
   25.09.2026). Eigener Kasten -- aber NUR, wenn es wirklich etwas zu
   entscheiden gibt. Gibt es nichts mitzunehmen, ist es eine schlichte
   Zeile: Sie soll bestaetigen, dass man nichts uebersehen hat, und
   sonst nichts (Flo: „reicht eine Zeile. Ist derzeit viel zu
   groß!"). */
.seriefrage.aktiv {
  margin: 10px 0 0; padding: 8px 11px; border-radius: 8px;
  border: 1px solid var(--akzent); background: var(--akzent-hell);
}
.seriefrage.ruht { margin: 8px 0 0; }
.seriefrage .kaestchen { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 13px; }
.seriefrage .kaestchen input { margin: 2px 0 0; flex: 0 0 auto; }
.seriefrage .kaestchen span span.zart { display: block; font-size: 12px; margin-top: 1px; }
.seriefrage p.zart {
  display: flex; align-items: center; gap: 5px; margin: 0;
  font-size: 12px; line-height: 1.4; color: var(--ruhig);
}
.seriefrage p.zart svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: .7; }
.umbuchform .knopfzeile { display: flex; gap: 8px; align-items: center; }
/* Die Folgetermine zur Wahl (0117) -- je Zeile ein Kaestchen, wie bei
   „Serie pruefen" (0105). Frei ist vorgewaehlt, belegt nicht. */
.folgewahl { margin-top: 10px; }
.folgewahl > .ueber {
  margin: 0 0 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ruhig);
}
.folgewahl ol.probezeilen { margin-bottom: 0; }
.folgewahl .wann { white-space: nowrap; }
.folgewahl .wann .zart { opacity: .6; margin: 0 1px; }
p.probehinweis { margin: 10px 0 0; font-size: 12px; }

/* Die Karte, die zieht -- und die Zelle, auf die sie fallen darf. */
.termin[draggable="true"] { cursor: grab; }
.termin[draggable="true"]:active { cursor: grabbing; }
/* Die gezogene Karte wird DURCHLAESSIG, nicht nur blass: Wer einen
   Termin um eine Viertelstunde verschieben will, zielt auf eine Zelle,
   die unter seiner eigenen Karte liegt -- und die faengt das Ereignis
   ab. Es sah aus, als blockiere der Termin sich selbst (Flo,
   25.09.2026). `pointer-events: none` gilt erst ab `dragstart`, das
   Ziehen selbst ist da schon im Gang. */
.termin.zieht { opacity: .35; }
.kalenderrahmen.imzug .termin, .kalenderrahmen.imzug .slotwahl { pointer-events: none; }
.spur .frei.dropbereit { background: rgba(47, 111, 94, .05); }
.spur .frei.dropziel { background: var(--akzent-hell); outline: 2px dashed var(--akzent); outline-offset: -2px; }

/* Vertretung (0113): ruhiges Kennzeichen, keine Warnung -- sie ist
   gewollt und aendert an der Abrechnung nichts. */
.marke.vertretung {
  background: var(--ton-gold-flaeche); color: var(--ton-gold-schrift);
  border: 1px solid var(--ton-gold-schrift);
}

ol.probezeilen li.ohne { background: transparent; border-style: dashed; }
/* Die Wahlzeile IST die Zeile -- `flex: 1` laesst die Wege rechts
   daneben stehen statt darunter. */
ol.probezeilen .wahlzeile {
  flex: 1 1 auto; display: flex; align-items: center; gap: 7px; cursor: pointer; min-width: 0;
}
ol.probezeilen .wahlzeile input[type="radio"] { margin: 0; flex: 0 0 auto; width: 13px; height: 13px; }
ol.probezeilen .wahlzeile .wann { flex: 0 0 auto; font-size: 12px; }
ol.probezeilen .wahlzeile .was {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
ol.probezeilen .wahlzeile .was .zart { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
ol.probezeilen .wahlzeile .pille {
  padding: 0 6px; font-size: 10px; line-height: 16px; flex: 0 0 auto;
}
ol.probezeilen li:has(.wahlzeile input:checked) {
  border-color: var(--akzent); background: var(--akzent-hell);
}

/* Die Wege zu weiteren Vorschlaegen stehen RECHTS in derselben Zeile
   -- als schlichte Textlinks, nicht als Chips: Ein Chip ist 34px hoch
   und waere allein schon hoeher als die ganze Zeile. */
ol.probezeilen .weitere {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px; margin-left: auto;
}
ol.probezeilen .weitere .wie { display: none; }
ol.probezeilen .weitere .filterchip {
  height: auto; padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 11px; font-weight: 400; color: var(--ruhig); text-decoration: underline;
  text-underline-offset: 2px;
}
ol.probezeilen .weitere .filterchip:hover { background: none; color: var(--akzent-dunkel); }
fieldset.vorschlagstag p.verwerfen { margin: 2px 0 0; font-size: 11px; }

/* Ein Kandidat in zwei Zeilen (0210, Flo 15.10.2026: „etwas
   uebersichtlicher"): oben wann, wer, Vertrag und Wochen, darunter je
   Einheit Produkt, Geraete-Variante und Geraete; rechts die Wege. Die
   Zeilen der Einheiten sind selbst `li` -- die Regeln fuer
   `ol.probezeilen li` (Rahmen, Flaeche) nehmen sie hier zurueck. */
ol.probezeilen li.kandidat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px;
  align-items: center; padding: 5px 10px;
}
ol.probezeilen li.kandidat .wahlzeile { grid-column: 1; flex-wrap: wrap; row-gap: 2px; }
ol.probezeilen li.kandidat .wahlzeile .wann { font-size: 12px; }
ol.probezeilen li.kandidat .wahlzeile .wann strong { font-weight: 600; }
ol.probezeilen li.kandidat .wer {
  display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ruhig);
}
ol.probezeilen li.kandidat .pille { padding: 0 6px; font-size: 10px; line-height: 16px; flex: 0 0 auto; }
ol.probezeilen .einheitenzeilen {
  grid-column: 1; list-style: none; margin: 0; padding: 0 0 0 20px;
  display: flex; flex-direction: column; gap: 1px;
}
ol.probezeilen .einheitenzeilen li {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 12px; line-height: 1.5; color: var(--ruhig);
}
ol.probezeilen .einheitenzeilen .produkt { color: var(--text); font-weight: 500; }
ol.probezeilen .einheitenzeilen .mono { font-family: var(--schrift-zahl); font-size: 11px; }
ol.probezeilen li.kandidat .weitere {
  grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 1px; margin: 0;
}
ol.probezeilen li.kandidat .weitere .sprung { display: inline-flex; align-items: baseline; gap: 6px; }
ol.probezeilen li.kandidat .weitere .wie {
  display: inline; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ruhig);
}
ol.probezeilen li.kandidat .weitere .anderer { font-weight: 500; }
@media (max-width: 52rem) {
  ol.probezeilen li.kandidat { grid-template-columns: minmax(0, 1fr); }
  ol.probezeilen li.kandidat .weitere {
    grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline;
    gap: 2px 12px; padding-left: 20px;
  }
}

/* Umplanen ab einem Stichtag (0112). Die Einstiegszeile steht ueber
   der Vorschlagsliste, „nur die Behandler:in wechseln" als Aufklapper
   darunter -- es ist die seltenere der beiden Handlungen. */
.vorschlaege form.umplanung { margin: 6px 0 4px; }
.vorschlaege form.umplanung .zart { font-size: 11px; }
details.gleichezeit { margin: 6px 0 10px; }
details.gleichezeit > summary {
  cursor: pointer; font-size: 13px; color: var(--akzent-dunkel); list-style: none;
}
details.gleichezeit > summary::-webkit-details-marker { display: none; }
details.gleichezeit > summary::before { content: '▸ '; color: var(--ruhig); }
details.gleichezeit[open] > summary::before { content: '▾ '; }
details.gleichezeit form { margin: 6px 0 4px; }
details.gleichezeit p.zart { font-size: 12px; margin: 0; }

/* Schmal: die Wege rutschen unter die Wahlzeile, statt sie
   zusammenzuquetschen. */
@media (max-width: 52rem) {
  ol.probezeilen .weitere { flex: 1 0 100%; margin-left: 20px; }
  ol.probezeilen .wahlzeile .was { white-space: normal; }
}

/* Die Woche, die fortgeschrieben wird -- eine Zeile je Termin. */
ul.musterwoche { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
ul.musterwoche li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--grund); border: 1px solid var(--linie); border-radius: 10px;
}
ul.musterwoche .mono { font-family: var(--schrift-zahl); font-size: 13px; }
ul.musterwoche .ruhig { font-size: 13px; }

/* Der Block der vergangenen Vertraege -- zugeklappt, weil er der
   seltenere Blick ist, mit Zaehlzeile und Warnzeichen bei offener
   Zahlung. */
details.aufklapp.vergangene { margin-top: 24px; }
details.aufklapp.vergangene > summary { display: flex; align-items: center; gap: 12px; }
details.aufklapp.vergangene > summary .was { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
details.aufklapp.vergangene > summary .zart { font-size: 13px; }
details.aufklapp.vergangene > summary .warnzeichen { display: inline-flex; color: var(--warnung); }
details.aufklapp.vergangene > summary .warnzeichen svg { width: 18px; height: 18px; }
details.aufklapp.vergangene[open] > summary { margin-bottom: 14px; }

/* Die Vertragsseite: Reiter, die es noch nicht gibt, stehen grau da,
   statt zu fehlen -- der Entwurf zeigt fünf, gebaut sind zwei. */
.dialogseite-kasten .spalte li .spaeter {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px;
  color: var(--zart); font-size: 14px; cursor: default;
}
.dialogseite-kasten .spalte li .spaeter span:first-of-type { flex: 1 1 auto; }
.dialogseite-kasten .spalte li .spaeter .zart { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.dialogseite-kasten .spalte .zusatz .mono { font-family: var(--schrift-zahl); font-size: 15px; }
.vertragsseite .inhalt .meldung.still { background: var(--flaeche-hover); color: var(--ruhig); }
.vertragsseite .inhalt > .karte { margin-bottom: 16px; }
.vertragsseite .inhalt > .karte > h2 { margin-top: 0; }
.vertragsseite .angaben {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 20px;
}
.vertragsseite .angaben > div { display: flex; flex-direction: column; gap: 2px; }
.vertragsseite .angaben .wie { font-size: 13px; color: var(--ruhig); }
/* Die Buchungsübersicht im Reiter Buchungen (0079): Kennzahlen als
   `.angaben`, die Leistungen als Tabelle -- eine Zeile außerhalb des
   Vertrags ist rot markiert, weil sie vor der Rechnung in eine Position
   gehört --, darunter die Behandler:innen. Wer nicht die Haupttherapeut:in
   ist, bekommt den Warnton: Das ist die Zeile, die beim Abrechnen
   auffallen soll, wie im Beispiel aus Wix. */
.vertragsseite .buchungsuebersicht h3 { margin: 18px 0 8px; font-size: 14px; }
.vertragsseite .buchungsuebersicht .hinweis { margin-top: 12px; }
.vertragsseite .buchungsuebersicht .hinweis a { color: inherit; }
.vertragsseite .leistungstabelle tr.ausserhalb td { background: var(--warnung-hell); }
.vertragsseite .leistungstabelle tr.ausserhalb td:first-child { box-shadow: inset 3px 0 0 var(--warnung); }
.behandlerliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.behandlerliste li {
  padding: 8px 12px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.behandlerliste li .wer { flex: 1 1 auto; display: flex; flex-direction: column; }
.behandlerliste li .zahlen { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--schrift-zahl); }
.behandlerliste li.fremd { border-color: var(--warnung); background: var(--warnung-hell); }
.behandlerliste li.fremd .wer strong, .behandlerliste li.fremd .zahlen strong { color: var(--warnung); }
/* Ein schaltbarer Rahmen: Das Häkchen in der Legende schaltet die Felder
   darin frei. Ohne Häkchen sind sie ausgegraut und nehmen keine Eingabe an --
   reines CSS über :has(), dasselbe Muster wie bei der Mail-Einstellung.
   Abgeschickt werden die Felder trotzdem; der Controller verwirft sie, wenn
   das Häkchen fehlt. Intensivwoche und Sponsoring sind so gebaut. */
fieldset.schaltbar {
  border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px 14px 14px; margin: 0;
}
fieldset.schaltbar legend { padding: 0 6px; font-weight: 500; }
fieldset.schaltbar legend label { display: inline-flex; align-items: center; gap: 8px; }
fieldset.schaltbar legend label input { width: auto; margin: 0; }
fieldset.schaltbar:not(:has(legend input:checked)) > .raster {
  opacity: .45; pointer-events: none;
}
/* Umgekehrt geschaltet: Hier graut das HAEKCHEN die Felder aus, weil es
   sie gegenstandslos macht. „Alle Behandler zulassen" heisst gerade,
   dass die Liste darunter nichts mehr entscheidet (0099). */
fieldset.schaltbar.umgekehrt:not(:has(legend input:checked)) > .raster {
  opacity: 1; pointer-events: auto;
}
fieldset.schaltbar.umgekehrt:has(legend input:checked) > .raster {
  opacity: .45; pointer-events: none;
}
/* Der Aufmerksamkeitsgrad: drei Stufen nebeneinander, Symbol vor dem Wort. */
.buchungsplanung .gradwahl { display: flex; gap: 6px; flex-wrap: wrap; }
.buchungsplanung .gradwahl .chipwahl { flex: 1 1 0; min-width: 96px; justify-content: center; }
.buchungsplanung .gradwahl .chipwahl span { display: inline-flex; align-items: center; gap: 6px; }
.buchungsplanung .gradwahl svg { width: 15px; height: 15px; flex: 0 0 auto; }
.buchungsplanung .feldgruppe .wie { display: block; font-size: 13px; color: var(--ruhig); margin-bottom: 4px; }
.buchungsplanung fieldset.behandlerwahl { margin-top: 14px; }
.buchungsplanung fieldset.behandlerwahl .chipzeile { display: flex; gap: 6px; flex-wrap: wrap; }
/* Die Uhrzeiten der Klienten-Abwesenheit stehen nebeneinander. */
fieldset.schaltbar.zeitspanne > .raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.vertragsseite fieldset.schaltbar .wie { display: block; font-size: 13px; color: var(--ruhig); margin-bottom: 4px; }
.vertragsseite fieldset.schaltbar .fliesstext { margin: 0; }

/* Kopf des Vertrags: die Eyebrow ist das Anzeigefeld aus Wix, das Geburtsdatum
   steht beim Namen, Praxis und Haupttherapeut:in tragen ein Symbol. Kompakter
   als der Klientenkopf, weil die Reiter darunter den Platz brauchen. */
.vertragsseite > .kopf { padding: 16px 28px 14px; }
.vertragsseite > .kopf .gesicht.gross { width: 48px; height: 48px; font-size: 17px; }
.vertragsseite > .kopf h1 { font-size: 24px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vertragsseite > .kopf h1 small { font-size: 14px; font-weight: 400; letter-spacing: 0; }
.vertragsseite > .kopf .chips { margin: 4px 0 0; }
.vertragsseite > .kopf .chip svg:not(.farbfeld) { width: 14px; height: 14px; color: var(--ruhig); }
.vertragsseite > .kopf .chip.pause { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.vertragsseite > .kopf .chip.pause svg { color: currentColor; }

/* Positionen: eine Karte je Position mit zwei umbrechenden Zeilen -- statt
   einer Tabelle, die mit sieben Spalten waagrecht aus dem Fenster lief. Die
   Felder hängen über `form=` an ihrem Formular vor der Liste. */
.positionen { display: grid; gap: 8px; }
.positionen .position {
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  padding: 8px 10px; display: grid; gap: 6px; background: var(--flaeche);
}
.positionen .zeile { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; min-width: 0; }
.positionen .zeile > * { min-width: 0; }
.positionen .wachsend { flex: 1 1 14rem; }
.positionen input, .positionen select { height: 36px; padding: 0 .6rem; width: auto; }
.positionen input.kurz { width: 5rem; flex: 0 0 auto; }
.positionen select.kurz { width: auto; flex: 0 0 auto; }
.positionen select.produkt { flex: 1 1 12rem; max-width: 100%; }
.positionen label.inline { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.positionen .wie { font-size: 12px; color: var(--ruhig); white-space: nowrap; }
.positionen .knoepfe { display: inline-flex; gap: 4px; flex: 0 0 auto; margin-left: auto; }
.positionen .zeile.zart { font-size: 13px; }
.positionen form.position.neu { border-color: var(--akzent); }
.positionen .summe { white-space: nowrap; }
.gesamtzeile { display: flex; gap: 8px; align-items: baseline; justify-content: flex-end; margin: 10px 0 0; }
.gesamtzeile .wie { font-size: 12px; color: var(--ruhig); }
table.liste tfoot th { padding-top: 10px; border-bottom: 0; font-size: 13px; text-transform: none; letter-spacing: 0; color: inherit; }
/* Produkt hinzufügen: erst wählen (GET), dann kommt die Seite mit der Vorbelegung zurück. */
.produktwahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.produktwahl .wachsend { flex: 1 1 16rem; }
.produktwahl select { width: 100%; }
/* Übersicht: die Positionen nur als Tabelle; breit scrollt sie in ihrem Rahmen. */
.tabellenrahmen { overflow-x: auto; max-width: 100%; }
.filterzeile .kaestchen { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }

/* ====================================================================
   Klientenliste (Entwurf „Patienten") und die Akte als Overlay
   ====================================================================
   Der Entwurf zeigt keine Tabelle, sondern ein Raster aus Zeilen, und
   jede Zeile ist anklickbar. Hier ist jede Zeile deshalb EIN <a> mit
   `display: grid` -- ohne Javascript, ohne Kästchen. Breiter als das
   Fenster rollt sie in ihrem `.tabellenrahmen`. */
.klientliste { min-width: 1180px; }
.klientliste .kopfzeile, .klientliste .zeile {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 1.5fr .5fr .6fr 1fr 1.2fr 1fr .8fr .8fr;
  padding: 14px 4px;
}
.klientliste .kopfzeile {
  padding-top: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--linie); background: var(--grund);
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ruhig);
}
.klientliste .zeile {
  border-bottom: 1px solid var(--flaeche-hover); color: var(--text);
  box-shadow: none; transition: background var(--uebergang);
}
.klientliste .zeile:last-child { border-bottom: 0; }
.klientliste .zeile:hover { background: var(--grund); }
.klientliste .zeile > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klientliste .zeile .wer { display: flex; align-items: center; gap: 12px; }
.klientliste .zeile .name { min-width: 0; }
.klientliste .zeile .name strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.klientliste .zeile .name .zart {
  display: block; font-size: 12px; color: var(--ruhig);
  overflow: hidden; text-overflow: ellipsis;
}
.klientliste .zeile .zahl { font-family: var(--schrift-zahl); font-size: 14px; }
.klientliste .zeile .farben { display: flex; gap: 5px; overflow: visible; }
.klientliste .zeile .farben .farbfeld { flex: 0 0 auto; width: 10px; height: 22px; border-radius: 3px; border: 0; }
.klientliste .zeile .praxen { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.klientliste .zeile .praxen .zart { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Die Akte: derselbe Dialog-Look wie Anamnese und Vertrag, dazu die
   Symbole in der Reiterspalte -- der Entwurf hat sie dort. */
.klientakte .spalte li svg, .personalakte .spalte li svg { flex: 0 0 auto; width: 18px; height: 18px; }
.klientakte .spalte li a[aria-current], .personalakte .spalte li a[aria-current] { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 600; }
.klientakte .spalte li .spaeter svg, .personalakte .spalte li .spaeter svg { opacity: .6; }

/* Die Personalliste (12.10.2026): EINE Liste fuer das eigene Personal
   der Einheit und das der betreuten Praxen, nach dem Entwurf
   (Management › Personal) -- Person, Profession, Rolle, Standort, Pensum,
   Pfeil. Jede Zeile ist EIN Link wie in der Klientenliste und oeffnet die
   Mitarbeiterseite. Aus der Einheit gliedern Gruppenzeilen nach
   Arbeitgeber. */
.personalliste { min-width: 880px; }
.personalliste .kopfzeile, .personalliste .zeile {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: 1.7fr 1fr 1fr .9fr .5fr .6fr 20px;
  padding: 12px 4px;
}
.personalliste .kopfzeile {
  padding-top: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--linie); background: var(--grund);
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ruhig);
}
.personalliste .zeile {
  border-bottom: 1px solid var(--flaeche-hover); color: var(--text);
  box-shadow: none; transition: background var(--uebergang);
}
.personalliste .zeile:hover { background: var(--grund); }
.personalliste .zeile > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.personalliste .zeile .wer { display: flex; align-items: center; gap: 12px; }
.personalliste .zeile .name { min-width: 0; display: flex; flex-direction: column; }
.personalliste .zeile .name strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.personalliste .zeile .name .zart { font-size: 12px; color: var(--ruhig); overflow: hidden; text-overflow: ellipsis; }
.personalliste .zeile .pillen { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.personalliste .zeile .pillen .pille { font-size: 11px; }
.personalliste .zeile .zahl { font-family: var(--schrift-zahl); font-size: 14px; }
.personalliste .zeile .pfeil { display: grid; place-items: center; color: var(--zart); }
.personalliste .zeile:hover .pfeil { color: var(--akzent); }
/* Aufräumen in einer Praxis in Einrichtung (0227): die Zeile ist ein
   Label, das Häkchen steht dort, wo sonst der Pfeil steht. */
.personalliste .zeile.waehlbar { cursor: pointer; }
.personalliste .zeile.waehlbar:has(input:checked) { background: var(--flaeche-hover); }
.personalliste .zeile .wahl { display: grid; place-items: center; overflow: visible; }
.personalliste .zeile .wahl input { width: 18px; height: 18px; margin: 0; }
.personalliste .gruppenkopf a.zart { margin-left: auto; font-size: 12px; }
.personalliste .gruppenkopf {
  display: flex; align-items: center; gap: 10px; padding: 18px 4px 8px;
  border-bottom: 1px solid var(--linie); color: var(--akzent-dunkel);
}
.personalliste .gruppenkopf strong { font-family: var(--schrift-titel); font-size: 17px; font-weight: 500; }
.personalliste .gruppenkopf .zart { font-size: 13px; color: var(--ruhig); }
.personalliste .gruppenkopf svg { flex: 0 0 auto; color: var(--akzent); }
.personalliste .leer { margin: 10px 4px 6px; }
/* Ausgetreten (19.10.2026): steht nur mit dem Statusfilter da, blass und
   mit Pille -- „sichtbar machen, wenn jemand nicht mehr aktiv ist". */
.personalliste .zeile.ausgetreten { background: var(--grund); }
.personalliste .zeile.ausgetreten .name strong,
.personalliste .zeile.ausgetreten > span:not(.wer):not(.pfeil):not(.wahl) { color: var(--ruhig); }
.personalliste .zeile.ausgetreten .gesicht { filter: grayscale(1); opacity: .55; }

/* Die Mitarbeiterseite: derselbe Rahmen wie die Klientenakte -- breit,
   volle Hoehe, links die Reiter mit Symbol. */
.dialogseite-kasten.personalakte { width: min(1400px, 100%); max-height: 100%; }
.personalakte .fliesstext { max-width: 78ch; }
.personalakte > .kopf a.chip { box-shadow: none; }
.personalakte > .kopf a.chip:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.personalakte .inhalt > .karte:first-child { margin-top: 0; }
.personalakte .kartenkopf { justify-content: space-between; align-items: center; margin-bottom: 12px; }
.personalakte .kartenkopf h2 { margin: 0; }

/* Ein Knopf, den es noch nicht gibt: Er steht da, damit man sieht, was
   kommt -- und tut nichts. Wie die Reiter mit „später" im Overlay. */
.knopf.spaeter, .knopf.spaeter:hover {
  background: var(--flaeche); color: var(--zart); border: 1px solid var(--linie);
  cursor: default; box-shadow: none;
}
/* Ansicht, Tagwechsel, Standort und Datum stehen seit dem 22.09.2026
   in EINER Leiste direkt ueber dem Raster (`.kalenderleiste`, s. u.)
   und nicht mehr im Seitenkopf -- alles, was den Ausschnitt bestimmt,
   unmittelbar bei dem, was es verstellt. */
.ansichtswahl { display: inline-flex; gap: 4px; }
.ansichtswahl [aria-current] { background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: #C9DBD3; }

/* Zwei Buchstaben statt eines Symbols -- das Kuerzel der Praxis aus
   dem Entwurf. Es steht im Firmenchip und im Spaltenkopf. */
.kuerzel {
  flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 20px; height: 16px; padding: 0 4px;
  border-radius: 5px; font-size: 9px; font-weight: 600; letter-spacing: .04em;
  background: var(--ton-sand-flaeche); color: var(--ton-sand-schrift);
}
.kuerzel.ton-gruen { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.kuerzel.ton-rost  { background: var(--ton-rost-flaeche);  color: var(--ton-rost-schrift); }
.kuerzel.ton-gold  { background: var(--ton-gold-flaeche);  color: var(--ton-gold-schrift); }
.chipfilter .filterchip .kuerzel { margin-right: 2px; }
.filterchip.aktiv .kuerzel { background: rgba(255, 255, 255, .7); color: var(--akzent-dunkel); }

/* Kunden- und Vertragszeile ueber dem Kalender (Entwurf, 14.09.2026,
   ueberarbeitet 22.09.2026): links der Kunde als Aufklapper mit Suche,
   daneben die Verordnung als Auswahlfeld, rechts die Knoepfe und das
   Abzeichen, das den Schritt nennt. */
.kundenzeile { padding: 16px 18px; margin-bottom: 14px; }
.kundenzeile .zeile { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0; }
.kundenzeile .feld { flex: 1 1 260px; min-width: 220px; display: block; position: relative; }
.kundenzeile .feld .ueber {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 6px;
}
.kundenzeile .feld label { display: block; }
.kundenzeile .feld select { width: 100%; height: 44px; }
.kundenzeile .feld select:disabled { background: var(--flaeche-hover); color: var(--zart); }
.kundenzeile .feld .wie { display: block; margin-top: 5px; font-size: 12px; color: var(--ruhig); }
/* Ohne Javascript braucht das Vertragsfeld einen Knopf; mit Javascript
   schickt sich das Formular selbst ab und der Knopf ist weg. */
.kundenzeile .feld > button.nur-ohne-js { margin-top: 6px; }

/* Die Kundenwahl: ein Aufklapper, der aussieht wie ein Feld. Bei
   dreihundert Klienten ist eine <select>-Liste kein Suchen, sondern
   Scrollen -- deshalb ein Suchfeld darin. Ohne Javascript ist die
   Suche ein GET auf dieselbe Seite, und der Server laesst den
   Aufklapper offen, solange gesucht wird (`open` in der Vorlage). */
.kundenwahl { position: relative; display: block; }
.kundenwahl > summary.wahlfeld {
  display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--grund); cursor: pointer; list-style: none;
}
.kundenwahl > summary::-webkit-details-marker { display: none; }
.kundenwahl > summary.wahlfeld:hover { border-color: var(--akzent); }
.kundenwahl > summary.wahlfeld svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ruhig); }
.kundenwahl > summary.wahlfeld .was {
  flex: 1 1 auto; min-width: 0; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kundenwahl > summary.wahlfeld.leer .was { color: var(--ruhig); }
.kundenwahl > summary.wahlfeld .nr { flex: 0 0 auto; font-size: 12px; color: var(--ruhig); }
.kundenwahl > .aufklapp {
  position: absolute; z-index: 20; top: 100%; left: 0; width: 100%; min-width: 280px;
  margin-top: 4px; padding: 10px;
  border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche);
  box-shadow: 0 12px 32px rgba(27, 24, 16, .14);
}
.kundenwahl .suche { display: flex; gap: 6px; margin: 0; }
.kundenwahl .suche input { flex: 1 1 auto; min-width: 0; height: 36px; }
.kundenwahl .kopfzeile { display: flex; align-items: center; gap: 8px; margin: 8px 2px 6px; }
.kundenwahl .kopfzeile .ueber {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ruhig);
}
.kundenwahl .kopfzeile .aufheben { flex: 0 0 auto; font-size: 12px; font-weight: 600; }
.kundenwahl .treffer {
  list-style: none; margin: 0; padding: 0;
  max-height: 248px; overflow: auto; display: flex; flex-direction: column; gap: 4px;
}
.kundenwahl .treffer a {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border: 1px solid var(--linie); border-radius: 9px; background: var(--grund);
  color: var(--text); text-decoration: none;
}
.kundenwahl .treffer a:hover { border-color: var(--akzent); background: var(--flaeche-hover); }
.kundenwahl .treffer a.gewaehlt { border-color: var(--akzent); background: var(--akzent-hell); }
.kundenwahl .treffer .gesicht { flex: 0 0 auto; width: 26px; height: 26px; font-size: 10px; }
.kundenwahl .treffer .was {
  flex: 1 1 auto; min-width: 0; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kundenwahl .treffer .meta { flex: 0 0 auto; font-size: 12px; color: var(--ruhig); }
.kundenwahl .leerzeile { margin: 6px 2px; font-size: 13px; }

.kundenzeile .knoepfe { flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px; }
.kundenzeile .knoepfe .reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.kundenzeile .knoepfe .knopf, .kundenzeile .knoepfe button, .kundenzeile .knoepfe summary { height: 44px; }
.kundenzeile .knoepfe .knopf svg { width: 17px; height: 17px; }
.kundenzeile .stand {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--grund);
  font-size: 12px; color: var(--ruhig);
}
.kundenzeile .stand svg { width: 13px; height: 13px; }
.kundenzeile .stand.halb { background: #FBF2E4; border-color: #EBD9B4; color: #7A5316; }
.kundenzeile .stand.bereit { background: var(--akzent-hell); border-color: #C9DBD3; color: var(--akzent-dunkel); }

/* „+ Termin" oeffnet das Menue der Buchungsarten (Entwurf). Vorher gab
   es beides -- einen Knopf, der sofort bucht, und darunter einen
   Aufklapper „Andere Buchungsart". Zwei Wege zur selben Sache waren
   einer zu viel. */
.buchungsarten { position: relative; display: inline-block; }
.buchungsarten > summary {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; list-style: none;
}
.buchungsarten > summary::-webkit-details-marker { display: none; }
.buchungsarten > .aufklapp {
  position: absolute; z-index: 20; top: 48px; right: 0; width: 300px; padding: 10px;
  border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche);
  box-shadow: 0 12px 32px rgba(27, 24, 16, .18);
}
.buchungsarten ul, .slotwahl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.buchungsarten li a, .buchungsarten li .spaeter, .slotwahl li a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--grund); color: var(--text); text-decoration: none; box-shadow: none;
}
.buchungsarten li a:hover, .slotwahl li a:hover { background: var(--flaeche-hover); }
.buchungsarten li .spaeter { color: var(--zart); }
.buchungsarten li svg, .slotwahl li svg { flex: 0 0 auto; width: 17px; height: 17px; }
.buchungsarten li span, .slotwahl li span { display: flex; flex-direction: column; min-width: 0; }
.buchungsarten li small, .slotwahl li small { font-size: 12px; color: var(--ruhig); }
.slotwahl li a { padding: 8px 11px; gap: 10px; }
.slotwahl li strong { font-size: 13px; }

/* Das Menü „Was eintragen?" an einer freien Viertelstunde (12.10.2026).
   Die Zeile selbst ist die gewählte Viertelstunde (markiert wie beim
   Überfahren), der Kasten hängt darunter -- am Tagesende darüber, in der
   rechten Hälfte des Kalenders nach links, damit er nicht aus dem Rahmen
   läuft. Über den Karten (1), unter den klebenden Köpfen (5) und der
   Zeitspalte (6): Beim Rollen soll er nicht durch sie hindurchscheinen.
   `scroll-margin-top` hält ihn vom klebenden Kopf frei, wenn der Anker
   `#slotwahl` den Rahmen dorthin rollt. */
.kalender .slotwahl {
  position: relative; z-index: 4; margin: 0 2px; border-radius: 4px;
  background: var(--akzent-hell); outline: 2px solid var(--akzent); outline-offset: -2px;
  scroll-margin-top: 140px; scroll-margin-bottom: 24px;
}
.kalender .slotwahl > .kasten {
  position: absolute; top: calc(100% + 4px); left: 0; width: 300px; max-width: 80vw;
  padding: 10px; box-sizing: border-box;
  border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche);
  box-shadow: 0 12px 32px rgba(27, 24, 16, .18);
}
.kalender .slotwahl.links > .kasten { left: auto; right: 0; }
.kalender .slotwahl.oben > .kasten { top: auto; bottom: calc(100% + 4px); }
/* Klappt er nach oben auf, muss der Anker mehr Platz lassen: sonst rollt
   der Rahmen die Zeile unter den Kopf, und der Kasten darueber verschwindet
   dahinter. 104px Kopf plus der Kasten selbst. */
.kalender .slotwahl.oben { scroll-margin-top: 440px; }
.kalender .slotwahl .slotkopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 2px 8px; font-size: 13px; min-width: 0;
}
.kalender .slotwahl .slotkopf > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kalender .slotwahl .slotkopf a {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; color: var(--ruhig);
}
.kalender .slotwahl .slotkopf a:hover { background: var(--flaeche-hover); color: var(--text); }

/* Die Terminvorschlaege aus der Buchungsplanung -- der eine Block des
   Entwurfs, den es noch nicht gibt. Er steht da und sagt, was kommt. */
.vorschlaege { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie); scroll-margin-top: 80px; }
.vorschlaege > summary {
  display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none;
}
.vorschlaege > summary::-webkit-details-marker { display: none; }
.vorschlaege > summary > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--akzent); }
.vorschlaege > summary > span { flex: 1 1 auto; min-width: 0; }
.vorschlaege .ueber {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--akzent);
}
.vorschlaege small { display: block; margin-top: 3px; font-size: 13px; color: var(--ruhig); }
.vorschlaege.spaeter > summary > svg, .vorschlaege.spaeter .ueber { color: var(--zart); }
.vorschlaege > p { margin: 10px 0 0; font-size: 13px; }
/* Die Wahl der Suche: zwei Chipzeilen und eine schmale Zeile mit „ab"
   und „Tage dazwischen". Die Chips sind Links -- sie schneiden nur zu,
   und die Wahl steht in der Adresse. */
.vorschlagswahl { margin-top: 12px; padding: 12px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--grund); }
.vorschlagswahl .chipfilter { margin-bottom: 8px; }
.vorschlagswahl .chipfilter:last-of-type { margin-bottom: 0; }
.vorschlagswahl form.filterzeile { margin: 10px 0 0; gap: 10px; }
.vorschlagswahl form.filterzeile label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.vorschlagswahl form.filterzeile input[type="date"],
.vorschlagswahl form.filterzeile select { height: 32px; width: auto; min-width: 0; font-size: 13px; }
.vorschlaege form.probe { margin-top: 12px; }
.vorschlaege .probezeilen .was strong { font-size: 13px; }

/* ====================================================================
   Buchungsformular: Kunden- und Vertragsauswahl (0083)
   ====================================================================
   Nach dem Entwurf: je Platz eine Karte mit dem Menschen (Gesicht,
   Name, Kundennummer) und darunter seine Verordnungen als waehlbare
   Kacheln mit dem Balken erledigt · gebucht · verordnet. Die Karte
   steht auch leer da -- dann sagt sie, was fehlt. */
.klientenwahl { align-items: end; }
.teilnehmerkarte {
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche);
  padding: 14px 16px; margin-top: 4px;
}
.teilnehmerkarte > .kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teilnehmerkarte > .kopf .platznummer {
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px;
  background: var(--flaeche-hover); font-size: 12px; color: var(--ruhig);
}
.teilnehmerkarte > .kopf .knopf { margin-left: auto; }
.teilnehmerkarte .wer { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.teilnehmerkarte .wer .name { display: flex; flex-direction: column; line-height: 1.3; }
.teilnehmerkarte .wer .name .zart { font-size: 12px; color: var(--ruhig); }
.teilnehmerkarte .vertragswahl { border: 0; padding: 0; margin: 14px 0 0; }
.teilnehmerkarte .vertragswahl legend {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--akzent); padding: 0; margin-bottom: 8px;
}
/* Die Leiste der Ressourcenabschnitte (25.09.2026). Sie ist nur das
   Bild der beiden Auswahlfelder je Zeile -- dasselbe Verhältnis wie
   bei der Zeitachse des Dienstplans. Ohne Javascript ist sie
   ausgeblendet (`.nur-mit-js`). */
.zeitachse {
  position: relative; margin: 4px 0 10px; border-radius: 6px;
  background: var(--grund); border: 1px solid var(--linie); min-height: 26px;
}
.zeitachse.zieht { cursor: grabbing; }
/* Die Zeitskala: Beginn und Ende beschriftet, dazwischen ein Strich je
   Viertelstunde. Ohne sie sieht die Leiste aus wie ein leerer Kasten. */
.zeitachse .skala { position: absolute; inset: 0; pointer-events: none; }
.zeitachse .skala .strich {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--linie);
  font-size: 9px; color: var(--ruhig); white-space: nowrap;
}
.zeitachse .skala .strich.rand { background: var(--ruhig); opacity: .45; padding-left: 3px; }
.zeitachse .skala .strich.rand:last-child { padding: 0 3px 0 0; transform: translateX(-100%); }
.zeitachse .abschnitt {
  position: absolute; height: 22px; margin: 2px 0;
  display: flex; align-items: stretch; border-radius: 5px;
  background: var(--akzent-hell); border: 1px solid var(--akzent);
  overflow: hidden; min-width: 18px;
}
/* Ein abgewaehlter Abschnitt ist weg. `display: flex` schlaegt das
   `[hidden]` des Browsers -- ohne diese Zeile stapelten sich alle
   abgewaehlten Balken links oben zu einem kleinen Kasten, der zu
   keinem Geraet gehoerte (Flo, 25.09.2026). */
.zeitachse .abschnitt[hidden] { display: none; }
.zeitachse .abschnitt .mitte {
  flex: 1 1 auto; display: flex; align-items: center; gap: 6px;
  padding: 0 4px; cursor: grab; min-width: 0; overflow: hidden;
}
.zeitachse .abschnitt .wer {
  font-size: 11px; font-weight: 500; color: var(--akzent-dunkel);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Wem das Geraet in der Gruppe gehoert. Es steht zwischen Ressource
   und Uhrzeit und schrumpft als Erstes: Der Name ist die Zugabe, das
   Geraet die Auskunft. */
.zeitachse .abschnitt .fuerwen {
  font-size: 10px; color: var(--akzent-dunkel); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 3 auto;
}
.zeitachse .abschnitt .fuerwen:not(:empty)::before { content: '· '; }
.zeitachse .abschnitt .wann { font-size: 10px; color: var(--akzent-dunkel); white-space: nowrap; }
.zeitachse .abschnitt .griff {
  flex: 0 0 6px; cursor: ew-resize; background: var(--akzent); opacity: .55;
}
.zeitachse .abschnitt .griff:hover { opacity: 1; }
/* Ohne Schreibrecht ist die Leiste nur ein Bild: keine Griffe, kein
   Greifzeiger. */
.zeitachse .abschnitt.starr .griff { display: none; }
.zeitachse .abschnitt.starr .mitte { cursor: default; }
ul.abschnitte li.ressourcenzeile { display: block; }
/* Die Teilnehmerkarte: kompakt (25.09.2026). Eine Zeile für den
   Menschen, eine für die Verordnung, rechts Status und der Weg in die
   Buchungsauswahl. Was nicht hineinpasst, steht im `title` -- die
   Karte soll sich auf einen Blick lesen lassen. */
.karte.teilnehmerkarte { padding: 10px 14px; }
.teilnehmerkarte .personenzelle { align-items: center; gap: 10px; }
.teilnehmerkarte .personenzelle h2 { margin: 0; font-size: 15px; }
.teilnehmerkarte .vertragzeile {
  display: block; font-size: 12px; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.teilnehmerkarte .vertragzeile .warn { font-weight: 500; }
.teilnehmerkarte .personenzelle .rechts {
  margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
.teilnehmerkarte .angaben { margin-top: 6px; }
.teilnehmerkarte > p.zart, .teilnehmerkarte > p.hinweis { margin: 6px 0 0; font-size: 12px; }

/* Belegte Ressourcen in der Auswahl (25.09.2026). Nicht gesperrt --
   die Datenbank entscheidet, ob es geht, und ein Raum kann bis zur
   Kapazitaet mehrfach belegt sein. Nur gekennzeichnet. */
.ressourcenzeile label.inline .pille { padding: 0 6px; font-size: 10px; line-height: 15px; }
.ressourcenzeile label.istbelegt { opacity: .6; }
.ressourcenzeile label.istbelegt strong { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Eine Ressource, EINE Zeile (25.09.2026). Die Spaltennamen stehen
   einmal oben, am Feld selbst als `aria-label`. */
.ressourcenkopf {
  display: flex; align-items: center; gap: 8px; margin: 6px 0 2px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ruhig);
}
.ressourcenkopf .was { flex: 1 1 auto; }
.ressourcenkopf .kurz { flex: 0 0 auto; }
.ressourcenzeile {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-bottom: 3px;
}
.ressourcenzeile > label.inline {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
  font-size: 13px; white-space: nowrap; overflow: hidden;
}
.ressourcenzeile > label.inline strong { overflow: hidden; text-overflow: ellipsis; }
.ressourcenzeile > label.inline .zart { overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.ressourcenzeile > label.kurz { flex: 0 0 auto; margin: 0; }
.ressourcenzeile > label.kurz select { height: 28px; padding: 0 6px; font-size: 12px; }
/* „für" darf breiter sein als die zwei Uhrzeiten. */
.ressourcenzeile > label.kurz:nth-of-type(1) select { max-width: 9rem; }
.ressourcenkopf .kurz:nth-of-type(1) { width: 9rem; }
.ressourcenkopf .kurz:nth-of-type(2), .ressourcenkopf .kurz:nth-of-type(3) { width: 5.5rem; }
.ressourcenzeile > label.kurz:nth-of-type(2) select,
.ressourcenzeile > label.kurz:nth-of-type(3) select { width: 5.5rem; }

@media (max-width: 52rem) {
  .ressourcenkopf { display: none; }
  .ressourcenzeile { flex-wrap: wrap; }
  .ressourcenzeile > label.inline { flex: 1 0 100%; }
}

/* Die zweite Zeile der Vertragskachel (25.09.2026): was verordnet
   ist, bei wem und seit wann. Klein und ruhig -- sie erklärt die
   Kachel, sie ist nicht ihre Überschrift. */
.vertragskachel .wasdrin {
  font-size: 11px; line-height: 1.45; display: block; margin-top: 1px;
}
.vertragskachel .wasdrin .warn svg { width: 12px; height: 12px; vertical-align: -1px; }

.vertragskachel {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--grund);
  cursor: pointer;
}
.vertragskachel:hover { background: var(--flaeche-hover); }
.vertragskachel input { flex: 0 0 auto; width: auto; margin: 2px 0 0; }
.vertragskachel:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.vertragskachel .inhalt { flex: 1 1 auto; min-width: 0; }
.vertragskachel .zeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vertragskachel .zeile .mono { margin-left: auto; font-size: 13px; color: var(--ruhig); }
.vertragskachel .standbalken { display: block; width: 100%; height: 6px; margin-top: 7px; }
.vertragskachel.leer { background: transparent; }

/* ====================================================================
   Journal (0082)
   ====================================================================
   Nach dem Entwurf, Block „Notizen und Aufgaben": Zeilen auf `--grund`
   mit feinem Rahmen, links die Uhrzeit als Marke, darueber die kleine
   Metazeile, darunter der Satz. Ein Tag ist eine Gruppe mit
   Datumszeile -- die Zeitleiste liest sich von oben nach unten. */
.journal .kastenkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.journal .kastenkopf h2 { margin: 0; }
.journaltag { margin-top: 18px; }
.journaltag:first-of-type { margin-top: 12px; }
.journaltag > .tag {
  font-family: var(--schrift-zahl); font-size: 12px; color: var(--ruhig);
  padding-bottom: 6px; border-bottom: 1px solid var(--linie); margin-bottom: 8px;
}
.journal .eintrag {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 12px; margin-bottom: 6px;
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.journal .eintrag .zeit {
  flex: 0 0 auto; width: 3.2em; font-family: var(--schrift-zahl); font-size: 12px;
  color: var(--zart); padding-top: 2px;
}
.journal .eintrag .was { min-width: 0; flex: 1 1 auto; }
.journal .eintrag .satz { font-size: 14px; text-wrap: pretty; }
.journal .eintrag .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 3px; font-size: 12px; color: var(--ruhig);
}
.journal .eintrag .meta .ton { font-size: 11px; padding: 1px 8px; }
.journal .eintrag .meta .felder { font-family: var(--schrift-zahl); font-size: 11px; color: var(--zart); }

/* ====================================================================
   Kalender und Termin (0077)
   ==================================================================== */
/* Ohne Inline-Stile (CSP `style-src 'self'`): Die Lage einer Karte im
   Raster ist eine Klasse je Viertelstunde -- `.v-N` Beginn, `.b-N` Ende
   als Zeile im Grid, 1..97 fuer 00:00..24:00. Der Doku-Streifen unten an
   der Karte ist `.doku-N` mit N Minuten (2.5rem je Viertelstunde). Die
   Farben der Profession kommen als `fill` eines SVG, nicht als Stil. */
.v-1{grid-row-start:1} .v-2{grid-row-start:2} .v-3{grid-row-start:3} .v-4{grid-row-start:4} .v-5{grid-row-start:5} .v-6{grid-row-start:6} .v-7{grid-row-start:7} .v-8{grid-row-start:8} .v-9{grid-row-start:9} .v-10{grid-row-start:10} .v-11{grid-row-start:11} .v-12{grid-row-start:12} .v-13{grid-row-start:13} .v-14{grid-row-start:14} .v-15{grid-row-start:15} .v-16{grid-row-start:16} .v-17{grid-row-start:17} .v-18{grid-row-start:18} .v-19{grid-row-start:19} .v-20{grid-row-start:20} .v-21{grid-row-start:21} .v-22{grid-row-start:22} .v-23{grid-row-start:23} .v-24{grid-row-start:24} .v-25{grid-row-start:25} .v-26{grid-row-start:26} .v-27{grid-row-start:27} .v-28{grid-row-start:28} .v-29{grid-row-start:29} .v-30{grid-row-start:30} .v-31{grid-row-start:31} .v-32{grid-row-start:32} .v-33{grid-row-start:33} .v-34{grid-row-start:34} .v-35{grid-row-start:35} .v-36{grid-row-start:36} .v-37{grid-row-start:37} .v-38{grid-row-start:38} .v-39{grid-row-start:39} .v-40{grid-row-start:40} .v-41{grid-row-start:41} .v-42{grid-row-start:42} .v-43{grid-row-start:43} .v-44{grid-row-start:44} .v-45{grid-row-start:45} .v-46{grid-row-start:46} .v-47{grid-row-start:47} .v-48{grid-row-start:48} .v-49{grid-row-start:49} .v-50{grid-row-start:50} .v-51{grid-row-start:51} .v-52{grid-row-start:52} .v-53{grid-row-start:53} .v-54{grid-row-start:54} .v-55{grid-row-start:55} .v-56{grid-row-start:56} .v-57{grid-row-start:57} .v-58{grid-row-start:58} .v-59{grid-row-start:59} .v-60{grid-row-start:60} .v-61{grid-row-start:61} .v-62{grid-row-start:62} .v-63{grid-row-start:63} .v-64{grid-row-start:64} .v-65{grid-row-start:65} .v-66{grid-row-start:66} .v-67{grid-row-start:67} .v-68{grid-row-start:68} .v-69{grid-row-start:69} .v-70{grid-row-start:70} .v-71{grid-row-start:71} .v-72{grid-row-start:72} .v-73{grid-row-start:73} .v-74{grid-row-start:74} .v-75{grid-row-start:75} .v-76{grid-row-start:76} .v-77{grid-row-start:77} .v-78{grid-row-start:78} .v-79{grid-row-start:79} .v-80{grid-row-start:80} .v-81{grid-row-start:81} .v-82{grid-row-start:82} .v-83{grid-row-start:83} .v-84{grid-row-start:84} .v-85{grid-row-start:85} .v-86{grid-row-start:86} .v-87{grid-row-start:87} .v-88{grid-row-start:88} .v-89{grid-row-start:89} .v-90{grid-row-start:90} .v-91{grid-row-start:91} .v-92{grid-row-start:92} .v-93{grid-row-start:93} .v-94{grid-row-start:94} .v-95{grid-row-start:95} .v-96{grid-row-start:96} .v-97{grid-row-start:97}
.b-1{grid-row-end:1} .b-2{grid-row-end:2} .b-3{grid-row-end:3} .b-4{grid-row-end:4} .b-5{grid-row-end:5} .b-6{grid-row-end:6} .b-7{grid-row-end:7} .b-8{grid-row-end:8} .b-9{grid-row-end:9} .b-10{grid-row-end:10} .b-11{grid-row-end:11} .b-12{grid-row-end:12} .b-13{grid-row-end:13} .b-14{grid-row-end:14} .b-15{grid-row-end:15} .b-16{grid-row-end:16} .b-17{grid-row-end:17} .b-18{grid-row-end:18} .b-19{grid-row-end:19} .b-20{grid-row-end:20} .b-21{grid-row-end:21} .b-22{grid-row-end:22} .b-23{grid-row-end:23} .b-24{grid-row-end:24} .b-25{grid-row-end:25} .b-26{grid-row-end:26} .b-27{grid-row-end:27} .b-28{grid-row-end:28} .b-29{grid-row-end:29} .b-30{grid-row-end:30} .b-31{grid-row-end:31} .b-32{grid-row-end:32} .b-33{grid-row-end:33} .b-34{grid-row-end:34} .b-35{grid-row-end:35} .b-36{grid-row-end:36} .b-37{grid-row-end:37} .b-38{grid-row-end:38} .b-39{grid-row-end:39} .b-40{grid-row-end:40} .b-41{grid-row-end:41} .b-42{grid-row-end:42} .b-43{grid-row-end:43} .b-44{grid-row-end:44} .b-45{grid-row-end:45} .b-46{grid-row-end:46} .b-47{grid-row-end:47} .b-48{grid-row-end:48} .b-49{grid-row-end:49} .b-50{grid-row-end:50} .b-51{grid-row-end:51} .b-52{grid-row-end:52} .b-53{grid-row-end:53} .b-54{grid-row-end:54} .b-55{grid-row-end:55} .b-56{grid-row-end:56} .b-57{grid-row-end:57} .b-58{grid-row-end:58} .b-59{grid-row-end:59} .b-60{grid-row-end:60} .b-61{grid-row-end:61} .b-62{grid-row-end:62} .b-63{grid-row-end:63} .b-64{grid-row-end:64} .b-65{grid-row-end:65} .b-66{grid-row-end:66} .b-67{grid-row-end:67} .b-68{grid-row-end:68} .b-69{grid-row-end:69} .b-70{grid-row-end:70} .b-71{grid-row-end:71} .b-72{grid-row-end:72} .b-73{grid-row-end:73} .b-74{grid-row-end:74} .b-75{grid-row-end:75} .b-76{grid-row-end:76} .b-77{grid-row-end:77} .b-78{grid-row-end:78} .b-79{grid-row-end:79} .b-80{grid-row-end:80} .b-81{grid-row-end:81} .b-82{grid-row-end:82} .b-83{grid-row-end:83} .b-84{grid-row-end:84} .b-85{grid-row-end:85} .b-86{grid-row-end:86} .b-87{grid-row-end:87} .b-88{grid-row-end:88} .b-89{grid-row-end:89} .b-90{grid-row-end:90} .b-91{grid-row-end:91} .b-92{grid-row-end:92} .b-93{grid-row-end:93} .b-94{grid-row-end:94} .b-95{grid-row-end:95} .b-96{grid-row-end:96} .b-97{grid-row-end:97}
.doku-1{height:calc(1 * 2.5rem / 15)} .doku-2{height:calc(2 * 2.5rem / 15)} .doku-3{height:calc(3 * 2.5rem / 15)} .doku-4{height:calc(4 * 2.5rem / 15)} .doku-5{height:calc(5 * 2.5rem / 15)} .doku-6{height:calc(6 * 2.5rem / 15)} .doku-7{height:calc(7 * 2.5rem / 15)} .doku-8{height:calc(8 * 2.5rem / 15)} .doku-9{height:calc(9 * 2.5rem / 15)} .doku-10{height:calc(10 * 2.5rem / 15)} .doku-11{height:calc(11 * 2.5rem / 15)} .doku-12{height:calc(12 * 2.5rem / 15)} .doku-13{height:calc(13 * 2.5rem / 15)} .doku-14{height:calc(14 * 2.5rem / 15)} .doku-15{height:calc(15 * 2.5rem / 15)} .doku-16{height:calc(16 * 2.5rem / 15)} .doku-17{height:calc(17 * 2.5rem / 15)} .doku-18{height:calc(18 * 2.5rem / 15)} .doku-19{height:calc(19 * 2.5rem / 15)} .doku-20{height:calc(20 * 2.5rem / 15)} .doku-21{height:calc(21 * 2.5rem / 15)} .doku-22{height:calc(22 * 2.5rem / 15)} .doku-23{height:calc(23 * 2.5rem / 15)} .doku-24{height:calc(24 * 2.5rem / 15)} .doku-25{height:calc(25 * 2.5rem / 15)} .doku-26{height:calc(26 * 2.5rem / 15)} .doku-27{height:calc(27 * 2.5rem / 15)} .doku-28{height:calc(28 * 2.5rem / 15)} .doku-29{height:calc(29 * 2.5rem / 15)} .doku-30{height:calc(30 * 2.5rem / 15)}

/* `position: relative` traegt den Datums-Aufklapper: Er haengt absolut
   unter seinem Knopf und darf dabei nicht aus der Zeile herausfallen. */
.tagwahl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; position: relative; }
/* Die Legende des Entwurfs: eine Karte, die jede Marke erklaert, die auf
   einer Terminkarte vorkommen kann. Sie steht OFFEN da und nicht hinter
   einem Aufklapper (Entwurf, 22.09.2026) -- wer die Zeichen nicht kennt,
   klappt nichts auf, weil er nicht weiss, dass es etwas zu klappen gibt. */
.legende .zeichen {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  font-size: 13px; color: var(--ruhig);
}
.legende .zeichen > span { display: inline-flex; align-items: center; gap: 7px; }
.legende .zeichen svg { width: 15px; height: 15px; flex: 0 0 auto; }
.legende .zeichen .gruen, .legende .zeichen span.gruen { color: #4F8A5B; }
.legende .zeichen .bernstein { color: #C68B3C; }
.legende .zeichen .rot { color: var(--warnung); }
.legende .zeichen .marke {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px;
  background: var(--flaeche-hover); font-size: 12px; color: var(--text-stark);
}
.legende .zeichen .marke.gruppe { background: rgba(27, 24, 16, .72); color: #fff; }
.legende .zeichen .marke.produkt {
  background: rgba(27, 24, 16, .72); color: #fff;
  font-family: var(--schrift-zahl); letter-spacing: .02em;
}
.legende .zeichen .marke.gruppe svg { width: 13px; height: 13px; }
.legende .probe { display: inline-flex; align-items: center; gap: 6px; }
.legende .probe::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--linie);
  background: var(--flaeche);
}
.legende .probe.geplant::before { background: var(--akzent-hell); border-left: 3px solid var(--akzent); }
.legende .probe.ausgefallen::before { background: var(--warnung-hell); border-left: 3px solid var(--warnung); }
.legende .probe.schraffur::before { background: repeating-linear-gradient(135deg, #EFE9DF 0 3px, #F7F2EA 3px 6px); }
.legende .probe.ausserhalb::before { background: repeating-linear-gradient(135deg, #EFE9DF 0 4px, #F7F2EA 4px 8px); }
.legende .probe.anderswo::before { background: var(--flaeche-hover); border-style: dashed; }
.legende .probe.kachel::before { background: rgba(255, 255, 255, .78); border-radius: 5px; }
.legende .probe.belegt::before { background: var(--akzent); border-color: var(--akzent); border-radius: 3px; }
.legende .probe.doppelt::before { background: var(--warnung-hell); border-color: #E0B4A4; border-left: 3px solid var(--warnung); width: 10px; }
.legende .zeichen .nummer {
  flex: 0 0 auto; width: 15px; height: 15px; display: inline-grid; place-items: center;
  border-radius: 999px; background: rgba(27, 24, 16, .1);
  font-family: var(--schrift-zahl); font-size: 10px; font-weight: 600; color: var(--ruhig);
}

/* Beruf und Praxis als Chipzeile -- Links, kein Formular. */
.chipfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.chipfilter .wie { font-size: 13px; color: var(--ruhig); margin-right: 2px; }
.filterchip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche);
  font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; box-shadow: none;
  transition: background var(--uebergang);
}
.filterchip:hover { background: var(--flaeche-hover); color: var(--text-stark); }
.filterchip.aktiv { background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: #C9DBD3; }
.filterchip.spaeter, .filterchip.spaeter:hover { color: var(--zart); background: var(--flaeche); cursor: default; }
.filterchip .farbfeld { width: 8px; height: 8px; border-radius: 2px; border: 0; }
.filterchip svg { width: 15px; height: 15px; }

/* Feiertag und freie Tage stehen neben dem Datum. */
.kalenderkopf h1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* Die Pille im Titel (heute, diese Woche, Feiertag) erbt sonst die
   Titelschrift -- Fraunces in 12px liest sich wie ein Druckfehler. */
.kalenderkopf h1 .pille { font-family: var(--schrift); }
.pille.feiertag { background: var(--warnung-hell); color: var(--warnung); }
.pille.ruhetag { background: var(--ton-gold-flaeche); color: var(--ton-gold-schrift); }

/* Der Rahmen ist die Karte des Entwurfs und rollt in beide Richtungen:
   waagrecht, sobald die Mindestbreiten der Spalten nicht mehr
   hineingehen, und senkrecht im Kasten selbst. Erst dadurch KANN der
   Spaltenkopf kleben (`position: sticky` wirkt am naechsten rollenden
   Vorfahren) -- vorher rollte die ganze Seite, und beim langen Tag war
   nicht mehr zu sehen, wessen Spalte man vor sich hat.
   Die Hoehe: der Bildschirm abzueglich dessen, was darueber steht.
   Ein voller Tag ist 13 Stunden a 160px, also gut 2000px -- den zeigt
   kein Bildschirm, auch der Entwurf rollt darin (er setzt 1600px in
   einem Kasten mit `calc(100vh - 340px)`). Wir nehmen mehr als er:
   Flo, 22.09.2026, „den Kalender laenger machen" -- damals `260px`,
   weil die Legende darunter noch in Sicht kommen sollte. Seit dem
   12.10.2026 steht sie im Rahmen (s. u.), und es sind `72px`.
   **Die eine Zahl, an der man dreht, ist diese.** Kleiner = laenger.
   Der klebende Spaltenkopf klebt am RAHMEN und nicht am Fenster -- ist
   der Rahmen oben aus dem Bild gerollt, ist er es auch. Weil unter dem
   Rahmen nichts mehr kommt, steht er ganz hinuntergerollt vollstaendig
   im Fenster, solange die Zahl groesser ist als der untere Rand der
   Spalte (24px). */
.kalenderrahmen {
  overflow: auto; max-width: 100%; max-height: calc(100vh - 72px); min-height: 460px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  overscroll-behavior: contain;
}
/* Seit dem 12.10.2026 rollt die Legende IM Rahmen mit, unter dem Raster
   (Flo: „damit mehr Zeilen sichtbar werden"). Unter dem Rahmen brauchte
   sie gut 300px Seite; jetzt endet die Seite mit dem Rahmen, und der
   darf fast das ganze Fenster nehmen -- `72px` statt `260px` oben: Ganz
   hinuntergerollt bleiben 48px Seite darüber, damit sich die Seite auch
   am Rand noch zurückrollen lässt (der Rahmen hält das Rollen mit
   `overscroll-behavior: contain` bei sich). `sticky; left: 0`: Rollt
   der Kalender waagrecht, bleibt die Legende im Bild statt mit den
   Spalten nach links zu wandern. */
.kalenderrahmen > .legende {
  position: sticky; left: 0; margin: 0;
  border: 0; border-top: 1px solid var(--linie); border-radius: 0;
}
/* `min-width: 100%` und nicht `max-content`: Mit `max-content` war der
   Kalender immer so breit wie der laengste Kartentext -- er rollte auch
   dann, wenn drei Spalten bequem ins Fenster gepasst haetten. Jetzt
   fuellen die Spalten die Breite (`flex-grow`), und erst wenn ihre
   Mindestbreiten nicht mehr hineingehen, rollt der Rahmen. */
.kalender { display: flex; align-items: stretch; min-width: 100%; gap: 0; }
/* Die Zeitspalte -- bewusst nicht `.leiste`: So heisst die Kopfleiste der
   Seite (`header.leiste`, 64px hoch, flex), und derselbe Name im Kalender
   quetschte die Stundenmarken in eine Zeile. Links fixiert beim Scrollen. */
/* Die Zeitspalte liegt ueber allem: Beim waagrechten Rollen schiebt
   sie sich sonst UNTER die klebenden Spaltenkoepfe, und man laese die
   Uhrzeit durch einen fremden Namen hindurch. */
.kalender .zeitspalte { flex: 0 0 68px; width: 68px; position: sticky; left: 0; z-index: 6; background: var(--grund); }
.kalender .behandlerspalte { flex: 1 1 200px; min-width: 168px; border-left: 1px solid var(--linie); }
.kalender .behandlerspalte:last-child { border-right: 1px solid var(--linie); }
/* Der Spaltenkopf des Entwurfs: Gesicht und Name in einer Kopfzeile,
   darunter Praxis, Schicht und die Auslastungsleiste.
   Die Hoehe ist FEST -- die Koepfe aller Spalten muessen gleich hoch
   sein, sonst faengt das Raster daneben auf verschiedenen Hoehen an. */
.kalender .behandler {
  height: 104px; display: flex; flex-direction: column; align-items: stretch;
  justify-content: center; gap: 5px; padding: 10px 12px;
  border-bottom: 1px solid var(--linie); background: var(--flaeche); position: sticky; top: 0;
  box-sizing: border-box;
  /* Ueber der Jetzt-Linie (4), den Karten (1) und den Spuren (1) --
     sonst scheint beim Rollen die rote Linie durch den Kopf. */
  z-index: 5;
}
.kalender .behandler.leer { background: var(--grund); border-bottom-color: transparent; }
.kalender .behandler .kopfzeile { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.kalender .behandler .kopfzeile > .gesicht { flex: 0 0 auto; width: 30px; height: 30px; font-size: 11px; }
.kalender .behandler .wer { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.kalender .behandler .wer strong { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.kalender .behandler .wer strong .name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kalender .behandler .wer strong .farbfeld { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; border: 0; }
.kalender .behandler .wer strong > svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--text-stark); }
.kalender .behandler .firma {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 10px; letter-spacing: .01em; color: var(--ruhig);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kalender .behandler .zart { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kalender .behandler .zahl { flex: 0 0 auto; margin-left: auto; padding-left: 8px; font-weight: 400; font-size: 12px; color: var(--ruhig); }

/* Die Auslastung: wie viel von der Schicht schon verplant ist. Die
   Fuellung ist ein SVG-Rechteck und kein `style="width:…"` -- die CSP
   erlaubt keinen Inline-Stil; `fill` kommt aus dieser Datei. */
.kalender .behandler .auslastung {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 10px; color: var(--ruhig);
}
.kalender .behandler .auslastung .balken {
  flex: 1 1 auto; min-width: 0; height: 4px; border-radius: 2px;
  background: var(--flaeche-hover); overflow: hidden;
}
.kalender .behandler .auslastung .balken svg { display: block; width: 100%; height: 100%; }
.kalender .behandler .auslastung .balken rect { fill: var(--akzent); }
/* Ueber dem Soll -- der Balken steht dann voll und faerbt sich. */
.kalender .behandler .auslastung.ueber .balken rect { fill: var(--warnung); }
.kalender .behandler .auslastung.ueber { color: var(--warnung); font-weight: 600; }

/* Die Ressourcenspalte hat keinen Menschen im Kopf: Ihre Symbolreihe
   soll unten stehen, also muss `.wer` dort wachsen duerfen. */
.kalender .ressourcenspalte .behandler { justify-content: flex-start; }
.kalender .ressourcenspalte .behandler .wer { flex: 1 1 auto; }

/* Die Spur: ein Grid mit einer Zeile je Viertelstunde, 2.5rem hoch
   (160px je Stunde wie im Entwurf). Alles darin -- freie Zellen, Karten,
   Anhang, Jetzt-Linie -- liegt in denselben Zeilen, eine Spalte. */
.kalender .spur {
  display: grid; grid-template-columns: 1fr; grid-auto-rows: 2.5rem; position: relative;
  background: var(--flaeche); padding: 10px 0;
}
.kalender .zeitspalte .spur { background: var(--grund); }
.kalender .spur > * { grid-column: 1; min-width: 0; }
/* Die Zeitleiste: eine Marke je voller Stunde, mittig auf der Linie
   (halbe Zeilenhoehe nach oben gezogen), in der zarten Schriftfarbe des
   Entwurfs und ohne Strich zur Spalte. Die Schlussmarke haengt am
   unteren Rand der letzten Zeile -- die einzige Zutat, die der Entwurf
   nicht hat: Sie sagt, wo der Tagesrahmen der Praxis endet. Die Spur hat oben und unten
   10px Luft, damit 07:00 und 20:00 nicht abgeschnitten werden. */
.kalender .stunde {
  position: relative; align-self: start; height: 1.1em; line-height: 1.1em; margin-top: -0.55em;
  font-family: var(--schrift-zahl); font-size: 12px; color: var(--zart); text-align: right;
  padding-right: 12px; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap;
}
.kalender .stunde.ende { align-self: end; margin: 0 0 -0.55em; }
/* Das Linienraster: nur die volle Stunde, und die so leise wie im
   Entwurf (`--flaeche-hover`, 1px je 160px) -- keine Halbstunden, keine
   Viertelstunden, kein Strich von der Marke zur Spalte. Die letzte Zelle
   schliesst das Raster unten ab. */
.kalender .frei {
  display: block; border-top: 1px solid transparent; box-sizing: border-box; text-decoration: none;
  z-index: 0;
}
.kalender .frei.voll { border-top-color: var(--flaeche-hover); }
.kalender .frei.letzte { border-bottom: 1px solid var(--linie); }
.kalender .frei.ausser { background: repeating-linear-gradient(135deg, #EFE9DF 0 3px, #F7F2EA 3px 6px); }
.kalender a.frei:hover { background: var(--akzent-hell); outline: 1px dashed var(--akzent); outline-offset: -2px; }
/* Die Luecke: eine gestrichelte Pille mitten in der freien Strecke
   (Entwurf). Sie faengt keine Klicks ab -- darunter liegen die freien
   Viertelstunden, und die sind der Weg ins Formular. Unter 2.5rem
   Hoehe verschwindet sie, sonst quetschte sie sich in eine
   Viertelstunde, in der ohnehin nichts Platz hat. */
.kalender .luecke {
  display: flex; align-items: center; justify-content: center;
  z-index: 1; pointer-events: none; overflow: hidden; min-height: 0;
}
.kalender .luecke .pille {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px;
  border: 1px dashed #D6CCBA; border-radius: 999px; background: var(--grund);
  font-family: var(--schrift-zahl); font-size: 11px; color: var(--ruhig); white-space: nowrap;
}
.kalender .luecke .pille svg { width: 11px; height: 11px; flex: 0 0 auto; }

/* Die genehmigte Abwesenheit in der Spur (09.10.2026): eine Schraffur
   ueber der Strecke, in der die Behandler:in fehlt -- in Blau fuer
   Urlaub, wie die Zelle der Woche und der Balken des Monats, sonst im
   Sandton. Ueber den freien Zellen (0), unter den Karten (1, spaeter im
   Markup): Ein Termin trotz Abwesenheit bleibt lesbar und klickbar. Die
   Flaeche laesst den Zeiger durch, nur die Pille faengt ihn fuer den
   `title`. Die Pille klebt oben, damit sie beim Rollen im Bild bleibt. */
.kalender .abwesenheit {
  z-index: 1; pointer-events: none; min-height: 0; margin: 0 2px;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 6px;
  background: repeating-linear-gradient(135deg, rgba(196, 184, 164, .30) 0 4px, rgba(247, 242, 234, .55) 4px 8px);
  border-left: 3px solid var(--zart); border-radius: 6px;
}
.kalender .abwesenheit.urlaub {
  background: repeating-linear-gradient(135deg, rgba(150, 190, 220, .38) 0 4px, rgba(238, 245, 250, .6) 4px 8px);
  border-left-color: #5D8FB2;
}
.kalender .abwesenheit .pille {
  position: sticky; top: 112px; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; max-width: calc(100% - 12px);
  border-radius: 999px; background: var(--ton-sand-flaeche); color: var(--ton-sand-schrift);
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kalender .abwesenheit.urlaub .pille { background: var(--ton-blau-flaeche); color: var(--ton-blau-schrift); }
.kalender .abwesenheit .pille svg { width: 12px; height: 12px; flex: 0 0 auto; }
.kalender .abwesenheit .pille .mono { font-weight: 400; }
/* Im Kopf: ganztags eine eigene Zeile an der Stelle der Auslastung. */
.kalender .behandler .abwesendzeile {
  display: flex; align-items: center; gap: 5px; min-width: 0; align-self: flex-start; max-width: 100%;
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--ton-sand-flaeche); color: var(--ton-sand-schrift);
}
.kalender .behandler .abwesendzeile.urlaub { background: var(--ton-blau-flaeche); color: var(--ton-blau-schrift); }
.kalender .behandler .abwesendzeile svg { width: 12px; height: 12px; flex: 0 0 auto; }
.kalender .behandler .abwesendzeile span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kalender .jetzt {
  align-self: start; height: 0; border-top: 2px solid #B23A3A; z-index: 4; pointer-events: none;
  position: relative;
}
.kalender .zeitspalte .jetzt::before {
  content: ""; position: absolute; right: -5px; top: -5px; width: 8px; height: 8px; border-radius: 999px; background: #B23A3A;
}

/* Die Terminkarte: Toenung der Profession als Flaeche, Balken links,
   Inhalt darueber. Karten liegen ueber den freien Zellen (z-index). */
.kalender .termin {
  /* Der Anker der Warnzeile fuehrt hierher; ohne den Abstand laege die
     Karte danach unter dem klebenden Spaltenkopf (84px). */
  scroll-margin-top: 92px;
  position: relative; z-index: 1; margin: 1px 4px 1px 3px; border-radius: 10px;
  border: 1px solid var(--linie); border-left: 3px solid var(--akzent); background: var(--flaeche);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  box-sizing: border-box; min-height: 0;
}
.kalender .termin:hover { box-shadow: 0 2px 8px rgba(27, 24, 16, .12); }
.kalender .termin .toenung { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.kalender .termin .farbbalken { position: absolute; left: 0; top: 0; width: 3px; height: 100%; z-index: 1; }
.kalender .termin .inhalt {
  position: relative; z-index: 1; padding: 4px 8px; display: flex; flex-direction: column; gap: 1px;
  font-size: 12px; line-height: 1.3; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.kalender .termin .zeit { font-size: 11px; color: var(--ruhig); white-space: nowrap; }
.kalender .termin .titel { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kalender .termin .wer { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kalender .termin .womit { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Die Kopfzeile der Karte: Zeit, Stand der Verordnung, Doku-Zeichen --
   wie im Entwurf. Beim Gruppentermin ist sie kraeftig eingefaerbt. */
.kalender .termin .kopf {
  position: relative; overflow: visible; flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0;
  margin: -4px -8px 2px; padding: 3px 8px 2px;
}
/* Die Toenung der Kopfzeile ist ein SVG-Rechteck und keine
   CSS-Flaeche: Die Farbe kommt aus der Profession und waere sonst ein
   Inline-Stil, den die CSP verwirft. Alles Weitere liegt darueber. */
.kalender .termin .kopf .kopfton { position: absolute; inset: 0; width: 100%; height: 100%; }
.kalender .termin .kopf > *:not(.kopfton) { position: relative; z-index: 1; }
.kalender .termin .kopf .zeit { flex: 0 0 auto; }
.kalender .termin .kopf .marke {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 500;
  background: rgba(255, 255, 255, .72); color: var(--text-stark); white-space: nowrap;
}
.kalender .termin .kopf .marke svg { width: 12px; height: 12px; }
/* Das Produktkuerzel neben dem Verordnungsstand -- gleiche Form wie die
   Gruppenmarke, nur kraeftig: Es sagt, WAS hier stattfindet. */
.kalender .termin .kopf .marke.produkt {
  background: rgba(27, 24, 16, .72); color: #fff;
  font-family: var(--schrift-zahl); letter-spacing: .02em;
}
.kalender .termin .kopf .warn { flex: 0 0 auto; display: inline-flex; color: var(--warnung); }
.kalender .termin .kopf .warn svg { width: 13px; height: 13px; }
.kalender .termin .dokuzeichen { flex: 0 0 auto; margin-left: auto; display: inline-flex; color: #C68B3C; }
.kalender .termin .dokuzeichen.fertig { color: #4F8A5B; }
.kalender .termin .dokuzeichen svg { width: 14px; height: 14px; }
/* Neben der Doku zwei ruhige Zeichen (Flo, 25.09.2026): dass eine
   Verordnung dahintersteht und dass die Folgeverordnung angelegt ist.
   Sie stehen rechts in einer Reihe mit der Doku -- `margin-left: auto`
   traegt schon das erste Zeichen der Reihe. */
.kartenzeichen {
  flex: 0 0 auto; display: inline-flex; margin-left: 3px; color: var(--ruhig); opacity: .8;
}
.kartenzeichen.nachfolger { color: #4F8A5B; opacity: .9; }
.kalender .termin .kartenzeichen svg { width: 13px; height: 13px; }
.kalender .termin.gruppe .kopf .kartenzeichen { color: rgba(255, 255, 255, .8); }
/* In halber Breite bleibt nur die Doku -- alles Weitere steht im Overlay. */
.kalender .termin.halb-links .kopf .kartenzeichen,
.kalender .termin.halb-rechts .kopf .kartenzeichen { display: none; }

/* Die Ressourcen als Kacheln: Symbol, Name, Beginn. Das Symbol ist das
   hochgeladene Bild der Ressource (0052) -- sonst das Zeichen ihrer Art. */
.kalender .termin { min-height: 22px; }
.kalender .termin .kacheln { display: flex; flex-direction: column; gap: 0; margin-top: 3px; min-width: 0; min-height: 0; overflow: hidden; }
/* Ressourcen mit derselben Anfangszeit stehen nebeneinander in einer
   Zeile; erst eine andere Zeit beginnt eine neue. Die Uhrzeit traegt
   damit die ZEILE und nicht jede Kachel -- bei „Raum ab 09:00, Geraet
   ab 09:00" stand sie vorher zweimal. */
.kalender .termin .kachelzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-width: 0; }
.kalender .termin .kachelzeile > .kachel { flex: 0 1 auto; min-width: 0; }
.kalender .termin .kachelzeile > .wann { margin-left: auto; flex: 0 0 auto; font-size: 10px; color: var(--ruhig); }
.kalender .termin .reschip .wann { margin-left: 2px; flex: 0 0 auto; color: var(--ruhig); }

/* -------------------------------------------------------------------
   Zwei gleichzeitige Termine nebeneinander (Entwurf
   „kalender-parallel"): Uebereinander verdeckt der eine den anderen,
   und man sieht nur an der Warnzeile, dass es ihn gibt.

   In der halben Breite traegt die Kopfzeile nur das Noetigste --
   Warnung, Zeit, Verordnungsstand. Produktmarke und Doku-Zeichen
   entfallen, damit nichts beschnitten wird; beides steht im Overlay.
   ------------------------------------------------------------------- */
.kalender .termin.halb-links  { margin-right: calc(50% + 2px); }
.kalender .termin.halb-rechts { margin-left: calc(50% + 2px); }
.kalender .termin.doppelt { border-color: #E0B4A4; border-left-color: var(--warnung); }
.kalender .termin.doppelt .farbbalken rect { fill: #8E3F26; }
.kalender .termin.doppelt .kopf .warn { color: var(--warnung); order: -1; }
.kalender .termin.halb-links .kopf .marke.produkt,
.kalender .termin.halb-rechts .kopf .marke.produkt,
.kalender .termin.halb-links .kopf .dokuzeichen,
.kalender .termin.halb-rechts .kopf .dokuzeichen { display: none; }
.kalender .termin.halb-links .kopf,
.kalender .termin.halb-rechts .kopf { gap: 4px; }
.kalender .termin.halb-links .doku .mono,
.kalender .termin.halb-rechts .doku .mono { overflow: hidden; text-overflow: ellipsis; }
.kalender .termin .kachel {
  display: flex; align-items: center; gap: 6px; min-width: 0; height: 20px;
  padding: 0 6px; border-radius: 5px; background: rgba(255, 255, 255, .78);
}
.kalender .termin .kachel svg, .kalender .termin .kachel img { flex: 0 0 auto; width: 14px; height: 14px; object-fit: contain; }
.kalender .termin .kachel .was { min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalender .termin .kachel .wann { margin-left: auto; flex: 0 0 auto; font-size: 10px; color: var(--ruhig); }

/* Der Gruppentermin: kraeftige Kopfzeile, darunter je Teilnehmer eine
   Zeile mit Initialen, Name, Stand und den eigenen Kacheln. */
.kalender .termin.gruppe .kopf { background: rgba(27, 24, 16, .72); color: #fff; }
.kalender .termin.gruppe .kopf .zeit { color: rgba(255, 255, 255, .82); }
.kalender .termin.gruppe .kopf .dokuzeichen { color: #F0B44A; }
.kalender .termin.gruppe .kopf .dokuzeichen.fertig { color: #A8DDB5; }
.kalender .termin .mitglieder { display: flex; flex-direction: column; gap: 4px; margin-top: 3px; min-width: 0; }
.kalender .termin .mitglied {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 3px 5px 4px; border-radius: 6px; background: rgba(255, 255, 255, .78);
}
.kalender .termin .mitglied.abgesagt { opacity: .6; }
.kalender .termin .mitglied.abgesagt .name { text-decoration: line-through; }
.kalender .termin .mitglied .zeile { display: flex; align-items: center; gap: 5px; min-width: 0; }
.kalender .termin .mitglied .name {
  flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kalender .termin .mitglied .zart { flex: 0 0 auto; font-size: 10px; }
/* Die Ressourcen einer Teilnehmerin als kleine Pillen unter ihrem
   Namen -- darunter auch die des ganzen Termins: Der Raum gehoert
   allen, und eine eigene Zeile dafuer hat der Entwurf nicht mehr. */
.kalender .termin .mitglied .chips { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 1px; }
.kalender .termin .reschip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0;
  padding: 1px 6px; border-radius: 5px; background: var(--flaeche-hover);
  font-size: 10px; color: var(--text-stark);
}
.kalender .termin .reschip svg, .kalender .termin .reschip img { width: 11px; height: 11px; flex: 0 0 auto; object-fit: contain; }
.kalender .termin .reschip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kalender .termin.ausserhalb { border-left-color: var(--warnung); }
.kalender .termin .chip { align-self: flex-start; font-size: 11px; padding: 1px 7px; margin-top: 2px; }
.kalender .termin .ausfall { font-size: 11px; font-weight: 600; color: #8E3F26; }
/* Der Doku-Streifen am Kartenfuss traegt seinen Text selbst (Entwurf
   „H4M Kalender") -- die fruehere eigene Zeile darueber entfaellt.
   Seine Hoehe sind die Doku-Minuten im Raster (`doku-N`); passt der
   Text nicht hinein, faellt er weg statt die Karte zu sprengen. */
.kalender .termin .doku {
  position: relative; z-index: 1; flex: 0 0 auto; border-top: 1px dashed var(--linie);
  background: #EFE9DF;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; overflow: hidden;
}
.kalender .termin .doku .mono { font-size: 9px; line-height: 1; color: var(--ruhig); white-space: nowrap; }
.kalender .termin.ausgefallen { border-left-color: var(--warnung); background: var(--warnung-hell); }
.kalender .termin.ausgefallen .toenung { display: none; }
.kalender .termin.aufgehoben { border-left-color: var(--zart); background: var(--flaeche-hover); opacity: .7; }
.kalender .termin.aufgehoben .toenung { display: none; }
.kalender .termin.aufgehoben .titel { text-decoration: line-through; }
.kalender .termin.sperre {
  border-left-color: var(--ruhig); border-style: dashed;
  background: repeating-linear-gradient(135deg, #EFE9DF 0 3px, #F7F2EA 3px 6px);
}
.kalender .termin.sperre .toenung { display: none; }
.kalender .termin.anderswo { border-style: dashed; opacity: .75; }
.kalender .termin.vorbei .inhalt { opacity: .8; }
/* Rüstzeit und angehaengte Doku: belegt, aber keine Therapie. */
.kalender .anhang {
  position: relative; z-index: 1; margin: 0 4px 0 3px; border-left: 3px solid var(--linie);
  background: repeating-linear-gradient(135deg, #EFE9DF 0 3px, #F7F2EA 3px 6px);
  font-size: 10px; color: var(--ruhig); padding: 1px 8px; white-space: nowrap; overflow: hidden;
  box-sizing: border-box; border-radius: 0 0 6px 6px; pointer-events: none;
}
/* Die Vorbereitung (0216) steht ueber der Karte: rund oben, nicht unten. */
.kalender .anhang.vorlauf { border-radius: 6px 6px 0 0; }

/* Der Kalenderfilter: Tag, Standort, Beruf, Praxis in einer Zeile. */
/* Alles ueber dem Kalender steht enger als sonst auf einer Seite: Was
   hier an Hoehe weggeht, fehlt unten im Tag. */
.kalenderkopf ~ .chipfilter { margin-bottom: 6px; }
.kalenderkopf ~ .kundenzeile { margin-bottom: 10px; }
.kalenderkopf ~ .filterzeile { margin: 0 0 8px; }

/* -------------------------------------------------------------------
   Die Steuerzeile des Kalenders (Entwurf „H4M Kalender", 22.09.2026):
   Standort, Datum, Tagwechsel und Ansicht sitzen direkt UEBER dem
   Raster und nicht mehr im Seitenkopf -- alles, was den Ausschnitt
   bestimmt, unmittelbar bei dem, was es verstellt. Der Seitenkopf ist
   damit frei fuer die Tagesinfo.
   ------------------------------------------------------------------- */
.kalenderleiste { margin: 0 0 8px; }
.kalenderleiste .aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kalenderleiste .ansichtswahl { margin-left: auto; }
.kalenderleiste .standortwahl { display: flex; align-items: center; gap: 6px; margin: 0; }
.kalenderleiste .standortwahl select { width: auto; min-width: 13rem; font-size: 13px; }
/* EINE Zeile, und alles darin steht auf derselben Linie. Zwei Dinge
   haben das vorher verhindert: `.tagwahl` trug noch ein `margin-top`
   aus der Zeit, als sie im Seitenkopf stand, und ein `.knopf.klein`
   ist 34px hoch, ein Auswahlfeld 32 -- zwei Pixel, die die Zeile
   wackeln lassen. Hier sind alle 32. */
.kalenderleiste .tagwahl { margin-top: 0; flex-wrap: nowrap; }
.kalenderleiste .knopf,
.kalenderleiste button,
.kalenderleiste select,
.kalenderleiste .datumknopf { height: 32px; }
.datumwahl { display: flex; align-items: center; gap: 6px; margin: 0; }
/* Nur das Zeichen: Das Datum steht schon in der Ueberschrift, der Knopf
   oeffnet bloss den Waehler. Das Feld bleibt bedienbar, es liegt nur
   unsichtbar ueber der ganzen Flaeche -- samt dem Knopf des Browsers,
   damit jeder Klick den Waehler oeffnet. */
.datumknopf {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche);
  color: var(--text-stark); cursor: pointer;
}
.datumknopf:hover { background: var(--flaeche-hover); }
.datumknopf svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ruhig); }
.datumknopf input[type="date"] {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  font: inherit; font-family: var(--schrift-zahl); font-size: 13px; color: transparent; cursor: pointer;
}
.datumknopf input[type="date"]::-webkit-datetime-edit,
.datumknopf input[type="date"]::-webkit-inner-spin-button { display: none; }
.datumknopf input[type="date"]:focus { outline: none; }
.datumknopf input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}

/* Kleine Tagesinfo im Seitenkopf: was den Tag praegt, ohne den
   Kalender zu durchsuchen -- Abwesenheiten und engmaschig betreute
   Klient:innen. Beide Zahlen sind gerechnet; fehlt das Recht, fehlt
   der Posten, statt eine Null zu zeigen, die auch „darf ich nicht
   sehen" heissen koennte. */
.tagesinfo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  align-self: flex-start; padding: 2px 10px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche);
}
.tagesinfo .titel { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ruhig); }
.tagesinfo .posten {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; background: var(--grund); font-size: 13px; color: var(--text-stark); text-decoration: none;
}
.tagesinfo a.posten:hover { background: var(--flaeche-hover); }
.tagesinfo .posten svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ruhig); }
.tagesinfo .posten .zahl { font-weight: 600; }
.tagesinfo .posten.stark { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.tagesinfo .posten.stark svg { color: var(--akzent); }

/* -------------------------------------------------------------------
   Die Ressourcenspalte als SPUREN (Entwurf, 22.09.2026): eine schmale
   Bahn je Raum und Geraet ueber den ganzen Tag, belegte Strecken als
   Balken. Vorher stand hier je Viertelstunde eine Zahl -- „4 von 13
   frei". Das sagt nicht, WELCHES Geraet frei ist, und genau das ist
   die Frage beim Buchen.

   Ein Balken ist kein Link. `app.ressource_belegung()` (0080) ist
   `security definer` und gibt nur eine Personenzahl heraus -- am
   geteilten Standort belegt die Nachbarpraxis dasselbe Geraet, und
   wessen Termin das ist, duerfen wir nicht sagen.
   ------------------------------------------------------------------- */
.kalender .ressourcenspalte { flex: 0 0 300px; min-width: 180px; border-left: 2px solid var(--linie); }
.kalender .ressourcenspalte .behandler, .kalender .ressourcenspalte .spur { background: var(--grund); }
/* Die Symbolreihe im Kopf steht UNTEN und liegt damit genau ueber den
   Bahnen, zu denen sie gehoert. */
.kalender .ressourcenspalte .spurkoepfe { display: flex; gap: 2px; margin-top: auto; }
.kalender .ressourcenspalte .spurkopf {
  flex: 1 1 0; min-width: 0; height: 20px; display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: 5px; background: var(--flaeche);
}
.kalender .ressourcenspalte .spurkopf svg,
.kalender .ressourcenspalte .spurkopf img { width: 12px; height: 12px; object-fit: contain; }
/* Die Bahnen liegen als EIN Element ueber dem ganzen Raster und teilen
   sich die Breite; jede Bahn ist selbst wieder ein Raster mit
   denselben Zeilen, damit `v-N`/`b-N` darin gilt. */
.kalender .ressourcenspalte .spuren {
  display: flex; gap: 2px; padding: 0 12px; z-index: 1; pointer-events: none;
}
.kalender .ressourcenspalte .bahn {
  flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: 1fr; grid-auto-rows: 2.5rem;
  border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); overflow: hidden;
}
.kalender .ressourcenspalte .bahn > * { grid-column: 1; }
.kalender .ressourcenspalte .belegt {
  margin: 1px; border-radius: 4px; background: var(--akzent); pointer-events: auto;
}
/* Voll heisst: kein Platz mehr. Teilbelegt bleibt heller -- ein Raum
   mit Belegung 2, von dem einer belegt ist, nimmt noch jemanden. */
.kalender .ressourcenspalte .belegt:not(.voll) { background: #9BC0B4; }
/* Ein Geraet in einem Raum (0208) steht rechts neben seinem Raum, mit
   gestricheltem Rand -- der Raum zaehlt es mit. Mehr Personen, als der
   Raum traegt (nach einer nachtraeglichen Zuordnung), im Warnton. */
.kalender .ressourcenspalte .spurkopf.imraum,
.kalender .ressourcenspalte .bahn.imraum { border-style: dashed; }
.kalender .ressourcenspalte .belegt.ueber { background: var(--warnung); }

/* Neuer Termin */
.praxisliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.praxisliste a { display: block; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--radius-klein); text-decoration: none; }
.praxisliste a:hover { background: var(--flaeche-hover); }
.ressourcenwahl { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 10px 12px; }
.ressourcenwahl legend { font-size: 13px; color: var(--ruhig); padding: 0 4px; }
.ressourcenwahl .ressourcenzeile { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 0; border-top: 1px solid #F1ECE3; }
.ressourcenwahl .ressourcenzeile:first-of-type { border-top: 0; }
.ressourcenwahl .ressourcenzeile label.inline { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 14rem; min-width: 0; }
.ressourcenwahl .ressourcenzeile select { height: 34px; padding: 0 .5rem; width: auto; }
.ressourcenwahl .ressourcenzeile select.kurz { width: auto; }

/* Das Termin-Overlay */
.terminseite > .kopf .farbbalken { flex: 0 0 auto; width: 4px; height: 58px; border-radius: 2px; overflow: hidden; }
.terminseite > .kopf .chip.warn { background: var(--warnung-hell); color: var(--warnung); }
.terminseite .teilnehmerliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.terminseite .teilnehmerliste li { display: flex; align-items: center; gap: 10px; }
.terminseite .teilnehmerliste .wer { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.terminseite .teilnehmerliste .pille { flex: 0 0 auto; }
.terminseite .teilnehmerkarte > .personenzelle { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.terminseite .teilnehmerkarte > .personenzelle .wer { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.terminseite .teilnehmerkarte h2 { margin: 0; font-size: 17px; }
.terminseite .teilnehmerkarte details.absage { margin-top: 10px; }
.terminseite .teilnehmerkarte details.absage > summary { cursor: pointer; color: var(--akzent-dunkel); font-weight: 600; }
.terminseite .teilnehmerkarte details.absage form { margin-top: 10px; }
.terminseite .teilnehmerkarte form.reihe { margin-top: 10px; }
.terminseite .abschnitte { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.terminseite .abschnitte li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid #F1ECE3; }
.terminseite .abschnitte li:first-child { border-top: 0; }
.terminseite .abschnitte form.inline { margin-left: auto; }
.terminseite .fassung { padding: 8px 0; border-top: 1px solid #F1ECE3; }
.terminseite .fassung .fliesstext { margin: 4px 0 0; }
.terminseite .fassung .formatiert { margin-top: 4px; }

/* Der Termin nach dem Entwurf „H4M Termin-Overlay" (Flo, 12.10.2026).
   Kompakter: Angaben dicht nebeneinander statt in einem Raster, der Weg
   zum Ändern als kleiner Knopf neben der Überschrift. */
.terminseite .kartenkopf { align-items: center; justify-content: space-between; }
/* „Termine als PDF" neben „Kommende Termine" im Vertrag (21.10.2026). */
.vertragsseite .kartenkopf { align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vertragsseite .kartenkopf h2 { margin: 0; }
.terminseite .kartenkopf h2 { margin: 0; }
.terminseite .kartenkopf + form { margin-top: 12px; }
.terminseite .angaben .zart, .terminseite .kartenkopf h2 .zart { color: var(--ruhig); font-weight: 400; }
.terminseite .angaben .warn, .terminteilnahme .stand .warn { color: var(--warnung); font-weight: 600; }
.terminseite .angaben.dicht { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 12px; }
.terminseite .teilnehmerliste li > .knopf { flex: 0 0 auto; }
/* Ob die Doku erledigt ist, steht am Reiter -- dieselben Zeichen und
   Farben wie auf der Kalenderkarte (`.dokuzeichen`). */
.dialogseite-kasten .spalte .dokustand { flex: 0 0 auto; display: inline-flex; color: #C68B3C; }
.dialogseite-kasten .spalte .dokustand.fertig { color: #4F8A5B; }
.terminseite .pille.dokupille { display: inline-flex; align-items: center; gap: 6px; }

/* Die Teilnehmerkarte im Reiter „Teilnehmer": drei Teile, durch feine
   Linien getrennt -- der Mensch, seine Verordnung mit Balken, was sich an
   der Teilnahme ändern lässt. `.teilnehmerkarte .wer` gehört dem
   Buchungsformular (eine Zeile mit Abstand oben) und wird hier
   zurückgenommen. */
.karte.teilnehmerkarte.terminteilnahme { padding: 20px 22px; }
.terminteilnahme .tnkopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.terminteilnahme .tnkopf > .gesicht { width: 46px; height: 46px; font-size: 15px; flex: 0 0 auto; }
.terminteilnahme .tnkopf .wer {
  flex: 1 1 220px; min-width: 0; margin: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
}
.terminteilnahme .tnkopf .wer .zeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.terminteilnahme .tnkopf .wer h2 { font-size: 19px; }
.terminteilnahme .tnkopf .wer .zart { font-size: 13px; }
.terminteilnahme .tnkopf .rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.terminteilnahme .tnteil { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
.terminteilnahme .tnteil > .zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px;
}
.terminteilnahme .tnteil .stand { font-size: 13px; }
.terminteilnahme .tnteil .zart { color: var(--ruhig); }
.terminteilnahme .standbalken { display: block; width: 100%; height: 6px; margin-top: 8px; }
/* Produkteditor (16.10.2026): Kassenpositionen mehrfach verknüpfen,
   Preise in Einrichtung ändern (0222). */
details.positionswahl { margin-top: 12px; }
details.positionswahl > summary { cursor: pointer; font-weight: 600; }
details.positionswahl .positionsgruppen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 12px; margin: 10px 0;
}
details.positionswahl fieldset { border: 1px solid var(--linie); border-radius: 10px; padding: 8px 12px; margin: 0; }
details.positionswahl legend { font-weight: 600; padding: 0 4px; }
details.positionswahl label { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 14px; }
details.positionswahl label input { flex: 0 0 auto; width: auto; height: auto; }
details.positionswahl label.fremd { opacity: .6; }
details.preisaendern > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.preisaendern > summary::-webkit-details-marker { display: none; }
details.preisaendern[open] { min-width: 22rem; }
details.preisaendern form { margin-top: 8px; }

/* Was die Plattform zur Kasse sagt (0221), bei der Klientin. */
.kasseninfo { font-size: 13px; margin: 6px 0 0; max-width: 60ch; }
.stammkarte .pille.warn { margin-top: 6px; align-self: flex-start; }

/* Kassenpositionen aus einer CSV-Datei (16.10.2026). */
#csv p.fein { font-size: 12px; line-height: 1.6; margin: 0 0 10px; }
table.kassencsv .fein { font-size: 12px; margin-top: 2px; }
table.kassencsv .warn, .karte strong.warn { color: var(--warnung); }
table.kassencsv tr.fehler td { background: var(--warnung-hell); }
.pille.gruen { background: var(--akzent-hell); color: var(--akzent); }

/* Die Vorschau der Uebernahme (0219) -- was je Produkt mitkommt. */
td.symbolzelle { width: 36px; }
details.uebernahmevorschau { margin-top: 6px; }
details.uebernahmevorschau > summary { cursor: pointer; font-size: 13px; color: var(--akzent); }
details.uebernahmevorschau .inhalt { margin-top: 8px; max-width: 46rem; }
details.uebernahmevorschau img.foto { display: block; max-width: 180px; max-height: 120px; border-radius: 8px; margin-bottom: 8px; }
details.uebernahmevorschau dl.zahlen {
  margin: 0 0 6px; gap: 8px 18px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
details.uebernahmevorschau dl.zahlen dt { font-size: 11px; }
details.uebernahmevorschau dl.zahlen dd { font-family: inherit; font-size: 14px; margin-top: 2px; }
details.uebernahmevorschau p.fein { margin: 4px 0; }

/* Die Kassenposition (0218) -- unter der Verordnung, eine Zeile. */
.terminteilnahme .tnteil > .kassenzeile { margin-top: 10px; font-size: 13px; }
.terminteilnahme .kassenzeile .warn,
.teilnehmerliste .wer .warn,
.buchungsuebersicht td .warn { color: var(--warnung); }
.terminteilnahme .tnteil > .ueber {
  margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ruhig);
}
.terminteilnahme .tnteil > .angaben + .zart { margin: 6px 0 12px; font-size: 13px; }
.terminteilnahme .tnteil > details.absage:first-of-type { margin-top: 0; }
.terminteilnahme .tnteil > details.absage + details.absage { margin-top: 8px; }
.terminteilnahme .tnteil form.reihe { flex-wrap: wrap; align-items: center; }

/* Die Musterwoche einer Serie als Zeile statt als Kästchen; was sie
   ist, steht im `title` von „Wiederholt sich". */
.terminseite .musterzeile { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0; font-size: 13px; }
.terminseite .musterzeile > .wie { flex: 0 0 auto; color: var(--ruhig); cursor: help; }
.terminseite .musterzeile ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.terminseite .musterzeile .mono { font-family: var(--schrift-zahl); }

/* Terminzeilen in Listen (Klientenakte, Mein Tag) */
.terminliste { display: grid; gap: 6px; }
.terminzeile {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche);
  text-decoration: none; color: var(--text);
}
.terminzeile:hover { background: var(--flaeche-hover); }
.terminzeile .farbbalken { flex: 0 0 auto; width: 4px; height: 40px; border-radius: 2px; overflow: hidden; }
.terminzeile .wann { flex: 0 0 9rem; display: flex; flex-direction: column; line-height: 1.3; }
.terminzeile .was { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 14px; }
.terminzeile .was .zart { font-size: 13px; }
.terminzeile .pille { flex: 0 0 auto; }
.terminzeile.ausgefallen { border-left: 3px solid var(--warnung); }
.terminzeile.aufgehoben { opacity: .7; }
.terminzeile.aufgehoben .was strong { text-decoration: line-through; }
.terminzeile.sperre { border-style: dashed; }
table.liste td.warn { color: var(--warnung); font-weight: 600; }

/* -------------------------------------------------------------------
   Woche und Monat des Kalenders (Entwurf „Praxis Verwaltung",
   Ansichten Woche und Monat; 09.10.2026). Dieselbe Karte wie der Tag,
   rollt waagrecht, sobald die Spalten nicht mehr hineingehen.
   Alle Balken sind SVG-Rechtecke mit `width` als Attribut -- die CSP
   verwirft jeden Inline-Stil.
   ------------------------------------------------------------------- */
.wochenrahmen, .monatsrahmen {
  overflow-x: auto; max-width: 100%;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
}
.wochenraster .balken svg, .monatswoche .balken svg { display: block; width: 100%; height: 100%; }

/* --- Woche --------------------------------------------------------- */
.wochenraster { display: grid; min-width: 1060px; }
.wochenraster.tage-6 { grid-template-columns: 236px repeat(6, minmax(0, 1fr)) 132px; }
.wochenraster.tage-7 { grid-template-columns: 236px repeat(7, minmax(0, 1fr)) 132px; min-width: 1180px; }
.wochenraster > * { min-width: 0; box-sizing: border-box; }
.wochenraster .kopf { background: var(--grund); border-bottom: 1px solid var(--linie); }
.wochenraster .kopf.wer, .wochenraster .kopf.summe {
  padding: 14px 20px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ruhig);
}
.wochenraster .kopf.summe { padding: 14px 16px; text-align: right; border-left: 1px solid var(--linie); }
.wochenraster .kopf.tag {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border-left: 1px solid var(--linie); text-decoration: none; color: var(--text);
}
.wochenraster .kopf.tag:hover { background: var(--flaeche-hover); }
.wochenraster .kopf.tag .name { font-size: 13px; font-weight: 600; }
.wochenraster .kopf.tag .datum { font-size: 12px; color: var(--ruhig); }
.wochenraster .kopf.tag.heute { background: var(--akzent-hell); }
.wochenraster .kopf.tag.heute .name { color: var(--akzent-dunkel); }
.wochenraster .kopf.tag .pille { align-self: flex-start; margin-top: 3px; font-size: 10px; }

.wochenraster .firmenzeile {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 11px 20px;
  background: var(--grund); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  font-size: 14px; font-weight: 600;
}
.wochenraster .firmenzeile .kuerzel { height: 20px; min-width: 20px; border-radius: 6px; }

.wochenraster .wer {
  display: flex; align-items: center; gap: 11px; padding: 10px 20px;
  border-bottom: 1px solid var(--flaeche-hover);
}
.wochenraster .wer .gesicht { flex: 0 0 auto; width: 32px; height: 32px; font-size: 12px; }
.wochenraster .wer .text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wochenraster .wer strong { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; }
.wochenraster .wer strong .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wochenraster .wer .farbfeld { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; border: 0; }
.wochenraster .wer .schicht {
  font-size: 11px; color: var(--ruhig); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wochenraster .zelle {
  display: block; padding: 8px; text-decoration: none; color: var(--text);
  border-left: 1px solid var(--flaeche-hover); border-bottom: 1px solid var(--flaeche-hover);
}
.wochenraster .zelle:hover .tageskarte, .wochenraster .zelle:hover .frei { box-shadow: 0 2px 8px rgba(27, 24, 16, .12); }
/* Die Karte eines Tages: getönt in der Farbe der Profession (SVG mit
   `fill-opacity`, wie die Kopfzeile der Terminkarte), links der
   Farbbalken. Ohne Beruf bleibt sie sandfarben. */
.tageskarte {
  position: relative; overflow: hidden; min-height: 64px; display: flex; flex-direction: column;
  gap: 6px; padding: 8px 9px 8px 12px; border-radius: 10px; background: var(--ton-sand-flaeche);
  transition: box-shadow var(--uebergang);
}
.tageskarte:has(> .toenung) { background: var(--flaeche); }
.tageskarte > .toenung { position: absolute; inset: 0; width: 100%; height: 100%; }
.tageskarte > .farbbalken { position: absolute; left: 0; top: 0; width: 3px; height: 100%; }
.tageskarte > :not(svg) { position: relative; z-index: 1; }
.tageskarte .reihe { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tageskarte .zahl { font-size: 13px; font-weight: 500; color: var(--text); }
.tageskarte .wort { font-size: 11px; color: var(--text-stark); }
.tageskarte .warnzeichen { margin-left: auto; display: inline-flex; color: var(--warnung); }
.tageskarte .balken { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .72); overflow: hidden; }
.tageskarte .balken rect { fill: var(--akzent); }
.tageskarte .balken.ueber rect { fill: var(--warnung); }
.tageskarte .stunden { font-size: 11px; color: var(--ruhig); white-space: nowrap; }
.tageskarte .pille.offen { margin-left: auto; }
.tageskarte .abwesend {
  display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ton-blau-schrift);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tageskarte .abwesend svg { flex: 0 0 auto; }
.tageskarte.leer .zahl, .tageskarte.leer .wort { color: var(--ruhig); }
.tageskarte.warn { box-shadow: inset 0 0 0 1px #E0B4A4; }
.pille.offen { padding: 1px 7px; background: var(--warnung-hell); color: var(--warnung); font-size: 10px; font-weight: 600; }
.wochenraster .frei {
  min-height: 64px; display: flex; align-items: center; justify-content: center; padding: 4px 6px;
  border-radius: 10px; text-align: center; font-size: 11px; color: var(--ruhig);
  background: repeating-linear-gradient(135deg, #EFE9DF 0 4px, #F7F2EA 4px 8px);
  transition: box-shadow var(--uebergang);
}
.wochenraster .frei.urlaub {
  background: repeating-linear-gradient(135deg, #DCEAF3 0 4px, #EEF5FA 4px 8px); color: var(--ton-blau-schrift);
}

.wochenraster .summe {
  display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 6px;
  padding: 10px 16px; text-align: right; font-size: 13px; color: var(--text-stark);
  border-left: 1px solid var(--flaeche-hover); border-bottom: 1px solid var(--flaeche-hover);
}
.wochenraster .summe .balken { display: block; height: 6px; border-radius: 999px; background: var(--flaeche-hover); overflow: hidden; }
.wochenraster .summe .balken rect { fill: var(--akzent); }
.wochenraster .summe .zart { font-size: 11px; }
.wochenraster .summe.ueber { color: var(--warnung); }
.wochenraster .summe.ueber .balken rect { fill: var(--warnung); }

.wochenraster .fuss {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  background: var(--grund); border-top: 1px solid var(--linie); border-bottom: 0;
  font-size: 13px; color: var(--text-stark);
}
.wochenraster .fuss.wer { flex-direction: row; align-items: center; padding: 14px 20px; font-weight: 600; color: var(--text); }
.wochenraster .fuss.tag, .wochenraster .fuss.summe { border-left: 1px solid var(--linie); }
.wochenraster .fuss.summe { align-items: flex-end; justify-content: center; padding: 12px 16px; }
.wochenraster .fuss.ueber > .mono:first-child { color: var(--warnung); font-weight: 600; }
.wochenraster .fuss .berufbalken { display: flex; gap: 3px; }
.wochenraster .fuss .berufbalken .balken {
  flex: 1 1 0; display: block; height: 6px; border-radius: 999px; background: var(--flaeche-hover); overflow: hidden;
}

/* --- Monat --------------------------------------------------------- */
.monatsraster { min-width: 980px; }
.monatskopf { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--grund); border-bottom: 1px solid var(--linie); }
.monatskopf span {
  padding: 12px 14px; border-left: 1px solid var(--linie);
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-stark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.monatskopf span:first-child { border-left: 0; }
.monatskopf .wochenende { color: var(--ruhig); }

/* Eine Woche ist ein Raster aus sieben Spalten. Zeile 1 trägt die
   Tageszahl, darunter liegen die Bahnen der Balken (je 22px), die
   letzte Zeile ist der Rumpf mit den Berufsbalken. Die Fläche des
   Tages (`.monatstag`, der Link) spannt über alle Zeilen, Kopf und
   Rumpf liegen darüber und lassen den Klick durch. */
.monatswoche {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 134px;
  border-top: 1px solid var(--flaeche-hover);
}
.monatskopf + .monatswoche { border-top: 0; }
.monatswoche.bahnen-0 { grid-template-rows: auto 1fr; }
.monatswoche.bahnen-1 { grid-template-rows: auto 22px 1fr; }
.monatswoche.bahnen-2 { grid-template-rows: auto repeat(2, 22px) 1fr; }
.monatswoche.bahnen-3 { grid-template-rows: auto repeat(3, 22px) 1fr; }
.monatswoche.bahnen-4 { grid-template-rows: auto repeat(4, 22px) 1fr; }
.monatswoche .sp-1 { grid-column-start: 1; } .monatswoche .sp-2 { grid-column-start: 2; }
.monatswoche .sp-3 { grid-column-start: 3; } .monatswoche .sp-4 { grid-column-start: 4; }
.monatswoche .sp-5 { grid-column-start: 5; } .monatswoche .sp-6 { grid-column-start: 6; }
.monatswoche .sp-7 { grid-column-start: 7; }
.monatswoche .sl-1 { grid-column-end: span 1; } .monatswoche .sl-2 { grid-column-end: span 2; }
.monatswoche .sl-3 { grid-column-end: span 3; } .monatswoche .sl-4 { grid-column-end: span 4; }
.monatswoche .sl-5 { grid-column-end: span 5; } .monatswoche .sl-6 { grid-column-end: span 6; }
.monatswoche .sl-7 { grid-column-end: span 7; }
.monatswoche .bahn-1 { grid-row: 2; } .monatswoche .bahn-2 { grid-row: 3; }
.monatswoche .bahn-3 { grid-row: 4; } .monatswoche .bahn-4 { grid-row: 5; }

.monatstag {
  grid-row: 1 / -1; border-left: 1px solid var(--flaeche-hover); text-decoration: none;
  transition: background var(--uebergang);
}
.monatstag.sp-1 { border-left: 0; }
.monatstag:hover { background: var(--grund); }
.monatstag.fremd { background: #FCFAF6; }
.monatstag.zu { background: repeating-linear-gradient(135deg, #F4EFE7 0 4px, #FAF7F2 4px 8px); }
.monatstag.heute { box-shadow: inset 0 0 0 2px #C9DBD3; }

.tageskopf, .tagesrumpf { position: relative; z-index: 1; min-width: 0; pointer-events: none; }
.tageskopf { grid-row: 1; display: flex; align-items: center; gap: 8px; padding: 11px 12px 5px; }
.tageskopf .nummer {
  flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px;
  font-size: 13px; color: var(--text-stark);
}
.tageskopf .nummer.heute { background: var(--akzent); color: #fff; font-weight: 600; }
.tageskopf .zahl { font-size: 12px; color: var(--ruhig); }
.tageskopf .warnzeichen { margin-left: auto; display: inline-flex; color: var(--warnung); }
.tageskopf .kw { margin-left: auto; font-size: 10px; color: var(--zart); white-space: nowrap; }
.tageskopf .warnzeichen + .kw { margin-left: 4px; }
.tageskopf.fremd .nummer, .tageskopf.fremd .zahl { color: var(--zart); }

.tagesrumpf { grid-row: -2 / -1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 5px 12px 11px; }
.tagesrumpf.fremd { opacity: .55; }
.tagesrumpf .beruf { display: flex; align-items: center; gap: 7px; }
.tagesrumpf .farbfeld { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; border: 0; }
.tagesrumpf .balken { flex: 1 1 auto; min-width: 0; display: block; height: 6px; border-radius: 999px; background: var(--flaeche-hover); overflow: hidden; }
.tagesrumpf .beruf .mono { flex: 0 0 auto; font-size: 10px; color: var(--ruhig); }
/* Je Praxis aufgeklappt (12.10.2026): unter jedem Beruf eine Zeile je
   Praxis, eingerückt, mit dem Kürzel statt des Farbfelds -- in einem
   Siebtel der Breite ist kein Platz für den Namen; den trägt der Titel
   des Tages und die Legende. */
.tagesrumpf .beruf.jepraxis { gap: 5px; margin: -2px 0 0 15px; }
.tagesrumpf .beruf.jepraxis .kuerzel {
  flex: 0 0 auto; height: 14px; min-width: 20px; padding: 0 3px;
  border-radius: 4px; font-size: 9px;
}
.tagesrumpf .beruf.jepraxis .balken { height: 5px; }
/* Der Griff zum Aufklappen (12.10.2026, Flo: „wenn ich die Physiobalken
   aufklappe"): Ein Beruf, der im Monat aus mehreren Praxen kommt, ist ein
   Link -- der Rumpf lässt sonst jeden Klick zum Tag durch, diese Zeile
   und die Praxiszeilen darunter fangen ihn. Ein Pfeil davor sagt es;
   Zeilen ohne Griff bekommen dieselbe leere Spalte, damit die Balken
   untereinander bündig bleiben. */
.tagesrumpf a.beruf {
  pointer-events: auto; color: inherit; text-decoration: none; box-shadow: none;
  margin: -2px -5px; padding: 2px 5px; border-radius: 5px;
}
.tagesrumpf a.beruf.jepraxis { margin: -3px -5px -1px 10px; }
.tagesrumpf a.beruf:hover { background: var(--flaeche-hover); }
.tagesrumpf a.beruf.klappt.auf { background: var(--grund); }
.tagesrumpf .beruf .klapp { flex: 0 0 10px; display: inline-flex; margin-right: -3px; color: var(--text); }
.tagesrumpf .beruf .klapp svg { transition: transform var(--uebergang); }
.tagesrumpf a.beruf.auf .klapp svg, .filterzeile .aufklappwahl .aktiv .klapp svg { transform: rotate(90deg); }
.tagesrumpf a.beruf:hover .klapp { color: var(--text-stark); }
.filterzeile .aufklappwahl { order: -1; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filterzeile .aufklappwahl .wie { font-size: 13px; }
.filterzeile .aufklappwahl .klapp { display: inline-flex; color: var(--ruhig); margin-right: -4px; }
.filterzeile .aufklappwahl .farbfeld { width: 9px; height: 9px; border-radius: 2px; border: 0; }
.legende .probe-klapp { display: inline-flex; vertical-align: middle; color: var(--text); }
.legende .kuerzel { height: 18px; min-width: 22px; border-radius: 5px; font-size: 10px; vertical-align: middle; }
.tagesrumpf .fuss { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.tagesrumpf .quote { margin-left: auto; font-size: 11px; color: var(--ruhig); }
.tagesrumpf .quote.ueber { color: var(--warnung); font-weight: 600; }
.tagesrumpf .zu { display: flex; align-items: center; justify-content: center; min-height: 40px; text-align: center; font-size: 11px; color: var(--ruhig); }
.tagesrumpf .weitere { font-size: 10px; color: var(--ruhig); }

/* Urlaub, Abwesenheit und Intensivwoche als Balken über die Tage. Wer
   in die Vorwoche oder die nächste weiterläuft, hat an der Seite keine
   Rundung und keinen Rand -- der Balken geht in der Zeile darunter
   weiter. Nur die Intensivwoche ist ein Link (in ihren Vertrag). */
.spanne {
  position: relative; z-index: 2; align-self: center; min-width: 0; height: 20px; margin: 1px 4px;
  display: flex; align-items: center; gap: 5px; padding: 0 7px; border-radius: 6px;
  font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-decoration: none;
  border-left: 3px solid transparent;
}
.spanne > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.spanne > svg { flex: 0 0 auto; }
.spanne.offen-links { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; padding-left: 9px; }
.spanne.offen-rechts { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.spanne.urlaub { background: var(--ton-blau-flaeche); color: var(--ton-blau-schrift); border-left-color: #5D8FB2; }
.spanne.abwesend { background: var(--ton-sand-flaeche); color: var(--ton-sand-schrift); border-left-color: var(--zart); }
.spanne.intensiv { background: var(--ton-lila-flaeche); color: var(--ton-lila-schrift); border-left-color: #7B67A8; }
a.spanne.intensiv:hover { background: #E2DBF0; color: var(--ton-lila-schrift); }
/* Die Intensivwoche nennt ihren Vertrag (21.10.2026, Flo: „den
   Vertragsstatus und die Buchungskennzahlen"): Status als kleine volle
   Pille im Lila des Balkens, blass bei einem abgeschlossenen Vertrag,
   dahinter erledigt | gebucht | verordnet. Wird es eng, kuerzt sich der
   Name -- Status und Zahlen bleiben stehen. Weiss auf #6B5797 haelt gut 6:1. */
.spanne > .vstatus, .spanne > .vstand { flex: 0 0 auto; overflow: visible; }
.spanne > .name { flex: 0 1 auto; min-width: 2ch; }
.spanne > .vstatus {
  padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  line-height: 14px; background: #6B5797; color: #FFFFFF;
}
.spanne > .vstatus.aus { background: var(--ruhig); }
.spanne > .vstand { font-size: 10.5px; font-weight: 600; }
.legende .spanne.probe-spanne { display: inline-flex; flex: 0 0 auto; margin: 0; }
.legende .zeichen > span > .mono:first-child { flex: 0 0 auto; white-space: nowrap; }

.legende .probe.auslastung::before { height: 6px; border-radius: 999px; border: 0; background: linear-gradient(90deg, var(--akzent) 60%, var(--flaeche-hover) 60%); }
.legende .probe.berufsbalken::before { height: 6px; border-radius: 999px; border: 0; background: linear-gradient(90deg, #91ABDA 70%, var(--flaeche-hover) 70%); }
.legende .probe.urlaubsfeld::before { background: repeating-linear-gradient(135deg, #DCEAF3 0 4px, #EEF5FA 4px 8px); }
.legende .fein { margin: 10px 0 0; }

@media (max-width: 60rem) {
  .wochenraster.tage-6 { grid-template-columns: 180px repeat(6, minmax(0, 1fr)) 112px; min-width: 900px; }
  .wochenraster.tage-7 { grid-template-columns: 180px repeat(7, minmax(0, 1fr)) 112px; min-width: 1000px; }
  .wochenraster .wer { padding: 8px 12px; }
  .monatsraster { min-width: 760px; }
  .monatswoche { min-height: 112px; }
}

@media (max-width: 60rem) {
  .terminzeile { flex-wrap: wrap; }
  .terminzeile .wann { flex: 1 1 auto; }
  .terminzeile .was { flex-basis: 100%; }

  /* Der Kalender am schmalen Gerät: Ein Tagesplan mit acht Spalten
     passt auf kein Telefon, also rollt er waagrecht -- die Zeitspalte
     bleibt dabei stehen (`position: sticky`). Alles andere wird
     schmaler, nichts wird weggelassen. */
  .kalenderkopf h1 { font-size: 26px; }
  .kalenderkopf .aktionen { flex-wrap: wrap; row-gap: 8px; }
  .chipfilter { gap: 6px; }
  .filterchip { height: 30px; padding: 0 11px; font-size: 13px; }
  .kalenderleiste .standortwahl, .kalenderleiste .standortwahl select { flex: 1 1 10rem; min-width: 0; }
  .kalenderleiste .ansichtswahl { margin-left: 0; }
  .legende .zeichen { gap: 8px 14px; font-size: 12px; }

  .kalender .zeitspalte { flex-basis: 48px; width: 48px; }
  .kalender .stunde { font-size: 11px; padding-right: 8px; }
  .kalender .behandlerspalte { flex-basis: 168px; min-width: 168px; }
  .kalender .behandler { padding: 8px; gap: 4px; }
  .kalender .behandler .kopfzeile > .gesicht { width: 28px; height: 28px; font-size: 10px; }
  .kalender .termin .inhalt { padding: 3px 6px; }
  .kalender .termin .kopf { margin: -3px -6px 2px; padding: 2px 6px; gap: 4px; }
  .kalender .termin .titel { font-size: 12px; }
  .kalender .ressourcenspalte { flex: 0 0 180px; min-width: 150px; }
  .kalender .ressourcenspalte .spuren { padding: 0 6px; }
  .kundenzeile .knoepfe { flex: 1 1 100%; }
  .kundenzeile .knoepfe .reihe .knopf, .kundenzeile .knoepfe .reihe button,
  .kundenzeile .knoepfe .reihe .buchungsarten { flex: 1 1 auto; justify-content: center; }
  /* Am kleinen Schirm brechen Kopf und Kundenzeile um und stehen
     hoeher -- der Kalender bekommt dafuer fast das ganze Fenster. */
  .kalenderrahmen { max-height: calc(100vh - 140px); min-height: 380px; }
}

@media (max-width: 40rem) {
  /* Noch enger: Die Kacheln in der Karte zeigen nur ihr Symbol, der
     Name steht im Titel. Die Spalte der freien Ressourcen wird zur
     reinen Zahlenspalte. */
  .kalenderkopf .aktionen { width: 100%; }
  .kalenderkopf .tagwahl, .kalenderkopf .ansichtswahl { margin-top: 0; }
  .kalender .behandlerspalte { flex-basis: 144px; min-width: 144px; }
  .kalender .termin .kachel .was { display: none; }
  .kalender .termin .kachelzeile > .wann { display: none; }
  .kalender .termin .kachel { width: 22px; justify-content: center; padding: 0; }
  .kalender .termin .reschip span { display: none; }
  .kalender .termin .mitglied .zart { display: none; }
  .kalender .termin .doku .mono { display: none; }
  .kalender .luecke .pille { padding: 0 5px; font-size: 10px; }
  /* Die Spuren bleiben -- sie sind der Sinn der Spalte; nur die
     Symbolreihe im Kopf faellt weg, weil ein 12px-Symbol in einer
     8px-Bahn nichts mehr erklaert. */
  .kalender .ressourcenspalte { flex: 0 0 120px; min-width: 110px; }
  .kalender .ressourcenspalte .spurkoepfe { display: none; }
  .kalender .ressourcenspalte .spuren { padding: 0 4px; gap: 1px; }
}

/* =====================================================================
   Aufgaben und Kommunikation (0084)
   ---------------------------------------------------------------------
   Die Liste nach dem Entwurf „Aufgaben": ein Abschnitt je Gruppe mit
   getöntem Kopf, darunter je Aufgabe eine Zeile -- Farbbalken der
   Gruppe, Erledigt-Kästchen, Titel und Chips, rechts die Zuständigen
   als Gesichter und der Stift. Die Gruppenfarbe ist eine Ton-Klasse
   der Anwendung (`gruen` für Management, dann gold · rost · blau ·
   rosa · lila · sand nach Reihenfolge), keine Spalte und kein
   Inline-Stil -- die Caddy-CSP verwirft `style="…"`.
   ===================================================================== */
.gesicht.klein { width: 28px; height: 28px; padding: 0; font-size: 11px; }
.gesicht.blau { background: var(--ton-blau-flaeche); color: var(--ton-blau-schrift); }
.gesicht.rosa { background: var(--ton-rosa-flaeche); color: var(--ton-rosa-schrift); }
.gesicht.lila { background: var(--ton-lila-flaeche); color: var(--ton-lila-schrift); }

/* Gestapelte Gesichter -- jedes weitere rückt unter das vorige. */
.gesichter { display: inline-flex; align-items: center; }
.gesichter .gesicht { border: 2px solid var(--flaeche); box-sizing: content-box; }
.gesichter .gesicht + .gesicht { margin-left: -8px; }
.gesichter .gesicht.mehr { font-size: 11px; }

/* Ein Ton-Punkt im Gruppen-Chip, wie das Farbquadrat im Beruf-Chip. */
.filterchip .punkt { width: 8px; height: 8px; border-radius: 999px; background: var(--ton-sand-schrift); flex: 0 0 auto; }
.filterchip .punkt.gruen { background: var(--ton-gruen-schrift); }
.filterchip .punkt.gold  { background: var(--ton-gold-schrift); }
.filterchip .punkt.rost  { background: var(--ton-rost-schrift); }
.filterchip .punkt.blau  { background: var(--ton-blau-schrift); }
.filterchip .punkt.rosa  { background: var(--ton-rosa-schrift); }
.filterchip .punkt.lila  { background: var(--ton-lila-schrift); }
.filterchip .zahl {
  font-family: var(--schrift-zahl); font-size: 12px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; background: var(--grund); color: var(--ruhig);
}
.filterchip.aktiv .zahl { background: rgba(255, 255, 255, .6); color: var(--akzent-dunkel); }

.pille.bald { background: var(--ton-gold-flaeche); color: var(--ton-gold-schrift); }
dl.zahlen dd.warn { color: var(--warnung); }

/* Die Karte auf der Sichtenseite trägt Reiter, Chips und Suche
   untereinander. */
.karte > nav.filter { margin-bottom: 12px; }
.karte > .chipfilter + .filterzeile { margin-top: 4px; }

.aufgabenliste { display: flex; flex-direction: column; gap: 22px; margin-top: 1.2rem; }

.gruppenabschnitt > .kopf { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.gruppenabschnitt > .kopf .zaehler {
  font-family: var(--schrift-zahl); font-size: 13px; color: var(--ruhig);
}
.gruppenabschnitt > .kopf .linie { flex: 1; height: 1px; background: var(--linie); }

.aufgabenzeile {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px 14px 18px; margin: 0 0 8px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 3px solid var(--ton-sand-schrift); border-radius: 12px;
  transition: background var(--uebergang), border-color var(--uebergang);
}
.aufgabenzeile:hover { border-color: var(--akzent-hell); border-left-color: inherit; }
.aufgabenzeile.gruen { border-left-color: var(--ton-gruen-schrift); }
.aufgabenzeile.gold  { border-left-color: var(--ton-gold-schrift); }
.aufgabenzeile.rost  { border-left-color: var(--ton-rost-schrift); }
.aufgabenzeile.blau  { border-left-color: var(--ton-blau-schrift); }
.aufgabenzeile.rosa  { border-left-color: var(--ton-rosa-schrift); }
.aufgabenzeile.lila  { border-left-color: var(--ton-lila-schrift); }
.aufgabenzeile.hoch  { border-left-width: 6px; padding-left: 15px; }
.aufgabenzeile.erledigt { background: var(--grund); }
.aufgabenzeile.erledigt .titel { text-decoration: line-through; color: var(--ruhig); }

/* Das Kästchen ist ein Knopf -- es schickt ein Formular ab. */
.aufgabenzeile .haken { flex: 0 0 auto; margin-top: 1px; }
.aufgabenzeile .kaestchen {
  width: 22px; height: 22px; min-height: 0; padding: 0; margin: 0;
  display: grid; place-items: center;
  border: 2px solid var(--zart); border-radius: 6px; background: var(--flaeche);
  color: var(--flaeche); box-shadow: none; cursor: pointer;
  transition: border-color var(--uebergang), background var(--uebergang);
}
.aufgabenzeile .kaestchen:hover { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent-dunkel); }
.aufgabenzeile .kaestchen[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.aufgabenzeile .kaestchen svg { width: 14px; height: 14px; }
.aufgabenzeile .kaestchen .nur-lesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.aufgabenzeile .was { flex: 1 1 auto; min-width: 0; }
.aufgabenzeile .titel {
  display: block; font-size: 16px; font-weight: 500; color: var(--text-stark); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis;
}
.aufgabenzeile .titel:hover { color: var(--akzent-dunkel); }
.aufgabenzeile .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.aufgabenzeile .chips .chip { font-weight: 500; }
.aufgabenzeile .chips .chip svg { width: 13px; height: 13px; color: var(--ruhig); }
.aufgabenzeile .chips a.chip { text-decoration: none; }
.aufgabenzeile .chips a.chip:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.aufgabenzeile .chips .ruhig { font-size: 12px; }

.aufgabenzeile .wer { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; margin-left: auto; }
.aufgabenzeile .wer .pille svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.aufgabenzeile .stift {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--linie); border-radius: 9px; background: var(--flaeche);
  color: var(--ruhig); text-decoration: none; transition: background var(--uebergang);
}
.aufgabenzeile .stift:hover { background: var(--flaeche-hover); color: var(--text-stark); }
.aufgabenzeile .stift svg { width: 15px; height: 15px; }

/* Die kompakte Zeile in der Klientenakte -- ohne Klienten-Chip, enger. */
.aufgabenzeile.kompakt { padding: 10px 12px 10px 14px; }
.aufgabenzeile.kompakt .titel { font-size: 15px; }

/* Leer -- der Entwurf zeigt einen gestrichelten Rahmen, mittig. */
.karte.leer {
  text-align: center; padding: 40px 24px; margin-top: 1.2rem;
  border-style: dashed; background: transparent; color: var(--ruhig);
}
.karte.leer p { margin: 0; }
.karte.leer p + p { margin-top: .4rem; font-size: 14px; }

/* Die Karte „Braucht Aufmerksamkeit" auf der Startseite: Kopf mit
   Eyebrow und Pillen, darunter die kompakten Zeilen; leer nur ein Satz. */
.aufmerksamkeit { margin-bottom: 1.2rem; }
.aufmerksamkeit > .kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
}
.aufmerksamkeit > .kopf .ueber {
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 4px;
}
.aufmerksamkeit > .kopf h2 { margin: 0; font-size: 20px; }
.aufmerksamkeit > .kopf .pillen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aufmerksamkeit .aufgabenliste { gap: 10px; margin-top: 1rem; }
.aufmerksamkeit p.leer { margin: 1rem 0 0; color: var(--ruhig); }

/* ---------------------------------------------------------------------
   Die zugeschnittene Startseite (0122)

   Jede Kachel ist eine Karte mit demselben Kopf wie „Braucht
   Aufmerksamkeit" -- Eyebrow, Titel, rechts die Knoepfe. Die Listen
   darin sind alle gleich gebaut: links die Zeit (mono, feste Breite),
   dann die Sache, rechts die Beiwerk-Zeile. So liest sich die Seite
   von oben nach unten als eine Spalte und nicht als drei Entwuerfe.
   --------------------------------------------------------------------- */
.karte.kachel { margin-bottom: 1.2rem; }
.karte.kachel > .kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap; margin-bottom: 4px;
}
.karte.kachel > .kopf .ueber {
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 4px;
}
.karte.kachel > .kopf h2 { margin: 0; font-size: 20px; }
.karte.kachel > .kopf h2.leise { color: var(--ruhig); font-weight: 500; }
.karte.kachel > .kopf .pillen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.karte.kachel p.leer { margin: .8rem 0 0; color: var(--ruhig); }
.karte.kachel.gesperrt { border-style: dashed; }

.wochenliste, .geburtstage, .offeneklienten {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.wochenliste li, .geburtstage li, .offeneklienten li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 6px 8px; border-radius: var(--radius-klein);
}
.wochenliste li:nth-child(odd), .geburtstage li:nth-child(odd),
.offeneklienten li:nth-child(odd) { background: var(--grund); }
.wochenliste .wann, .geburtstage .wann, .offeneklienten .wann {
  flex: 0 0 auto; min-width: 8.5rem; font-size: 13px; color: var(--ruhig);
}
.offeneklienten .wann, .geburtstage .wann { min-width: 4rem; }
.wochenliste .was, .geburtstage .was, .offeneklienten .was {
  flex: 1 1 12rem; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.offeneklienten a.was { color: inherit; text-decoration: none; }
.offeneklienten a.was:hover strong { text-decoration: underline; }
.wochenliste .wie, .geburtstage .wie, .offeneklienten .wie { flex: 0 0 auto; font-size: 12px; }
/* Heute hervorheben -- der Tag, an dem man steht. */
.wochenliste li.heute, .geburtstage li.heute { background: var(--akzent-hell); }
.wochenliste li.heute .wann, .geburtstage li.heute .wann { color: var(--akzent-dunkel); }
.wochenliste li.ausgefallen { opacity: .6; }
.wochenliste li.ausgefallen strong { text-decoration: line-through; }

.zuschnitthinweis { margin-top: 1.4rem; font-size: 13px; }

/* Der Zuschnitt unter Management: zwei Listen nebeneinander, darunter
   die Kacheln zum Ankreuzen. */
.zuschnittziele { display: flex; gap: 24px; flex-wrap: wrap; margin-top: .8rem; }
.zuschnittziele > div { flex: 1 1 18rem; min-width: 0; }
.zuschnittziele .ueber {
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--akzent); margin: 0 0 6px;
}
.zielliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.zielliste a {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; border-radius: var(--radius-klein);
  color: inherit; text-decoration: none;
}
.zielliste a:hover { background: var(--flaeche-hover); }
.zielliste a[aria-current="page"] { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.kachelliste { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kachelliste .kaestchen { display: flex; align-items: flex-start; gap: 10px; }
.kachelliste .kaestchen > span { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kachelliste .kaestchen .zart { flex: 1 1 100%; font-size: 12px; }

/* Der Kopf eines Akte-Reiters mit Zähler und Knopf (Aufgaben, Kommunikation). */
.reiterkopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
}
.reiterkopf h2 { margin: 0; }
.reiterkopf p.zart { margin: 4px 0 0; }
.reiterkopf .aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* Der Zähler am Menüpunkt Aufgaben -- bleibt auch im eingeklappten
   Menü sichtbar, als Ausnahme der Regel, die dort die Texte ausblendet. */
.menue .abzeichen {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-grid; place-items: center; border-radius: 999px;
  font-family: var(--schrift-zahl); font-size: 11px; font-weight: 600;
  background: var(--warnung); color: #fff;
}
@media (min-width: 60.01rem) {
  body:has(.menue-schalter:checked) .menue a { position: relative; }
  body:has(.menue-schalter:checked) .menue a > span.abzeichen {
    display: inline-grid; position: absolute; top: 4px; right: 4px; margin: 0;
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px;
  }
}

@media (max-width: 60rem) {
  .aufgabenzeile { flex-wrap: wrap; }
  .aufgabenzeile .was { flex-basis: calc(100% - 36px); }
  .aufgabenzeile .wer { width: 100%; margin-left: 36px; justify-content: space-between; }
  .aufgabenzeile .stift { width: 30px; height: 30px; }
}

/* --- Das Aufgaben-Overlay (Dialog „Aufgabe bearbeiten" des Entwurfs) ---
   Zwei Formulare übereinander: Schritt 1 (GET, Betreiber und Gruppe) und
   Schritt 2 (POST, die Felder). Die Pillen sind echte Radios und
   Kästchen — das native Feld bleibt zugänglich, nur klein; die Pille
   färbt sich über `:has(input:checked)`. Der Warnkasten der Zuständigen
   und das Zahlenfeld des Auslösers hängen ebenfalls an `:has()`, ohne
   Javascript. */
.aufgabenseite { max-width: 720px; }
.aufgabenseite > .kopf .chip.warn { background: var(--warnung-hell); color: var(--warnung); }
.pille.ok { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.aufgabenseite .wahlschritt { display: grid; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--linie); }
.aufgabenseite .wahlschritt .wie, .aufgabenseite .aufgabenfelder .wie { display: block; flex-basis: 100%; margin: 0; font-size: 12px; color: var(--ruhig); font-weight: 400; }
fieldset.pillen { gap: 8px; }
fieldset.pillen legend { margin-bottom: .45rem; }
fieldset.pillen legend .zart { font-weight: 400; color: var(--ruhig); }
label.pillwahl {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--flaeche); color: var(--text-stark); border: 1px solid var(--linie); cursor: pointer;
}
label.pillwahl:hover { background: var(--flaeche-hover); }
label.pillwahl:has(input:checked) { background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: transparent; }
label.pillwahl.gruen:has(input:checked) { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
label.pillwahl.gold:has(input:checked)  { background: var(--ton-gold-flaeche);  color: var(--ton-gold-schrift); }
label.pillwahl.rost:has(input:checked)  { background: var(--ton-rost-flaeche);  color: var(--ton-rost-schrift); }
label.pillwahl.blau:has(input:checked)  { background: var(--ton-blau-flaeche);  color: var(--ton-blau-schrift); }
label.pillwahl.rosa:has(input:checked)  { background: var(--ton-rosa-flaeche);  color: var(--ton-rosa-schrift); }
label.pillwahl.lila:has(input:checked)  { background: var(--ton-lila-flaeche);  color: var(--ton-lila-schrift); }
label.pillwahl.sand:has(input:checked)  { background: var(--ton-sand-flaeche);  color: var(--ton-sand-schrift); }
label.pillwahl input { width: 12px; height: 12px; margin: 0; accent-color: currentColor; }
label.pillwahl svg { width: 14px; height: 14px; flex: 0 0 auto; }
label.pillwahl .zart { font-weight: 400; color: var(--ruhig); }
.aufgabenfelder fieldset.rahmenlos { display: contents; }
.aufgabenfelder fieldset.rahmenlos:disabled label.pillwahl,
.aufgabenfelder fieldset.rahmenlos:disabled label.chipwahl { opacity: .55; cursor: default; }
label.chipwahl.person { padding: 3px 12px 3px 4px; font-size: 13px; }
label.chipwahl.person .gesicht.klein { width: 26px; height: 26px; font-size: 11px; }
fieldset.zustaendige .warnkasten {
  display: none; margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  border: 1px solid var(--ton-gold-schrift); background: var(--ton-gold-flaeche); color: var(--ton-gold-schrift);
}
fieldset.zustaendige:not(:has(input:checked)) .warnkasten { display: block; }
fieldset.ausloeser .einheiten { display: none; align-items: center; gap: 8px; font-size: 13px; }
fieldset.ausloeser .einheiten input { width: 5rem; }
fieldset.ausloeser:has(input[value="verordnungsende"]:checked) .einheiten { display: inline-flex; }
.aufgabenseite details.verlauf { margin-top: 20px; }
.aufgabenseite details.verlauf li .quelle .mono { font-family: var(--schrift-zahl); font-size: 12px; }
.aufgabenseite .fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie);
}
.aufgabenseite .fuss > button[type="submit"] { flex: 1 1 12rem; min-height: 46px; }
.aufgabenseite .fuss form.inzeile { margin: 0; }
.aufgabenseite .fuss details.aufklapp.gefahr { margin: 0; }
.aufgabenseite .fuss details.aufklapp.gefahr summary { color: var(--warnung); border: 1px solid #E4C3C3; border-radius: 10px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.aufgabenseite .fuss details.aufklapp.gefahr form.inzeile { display: flex; margin-top: 8px; align-items: center; gap: 10px; }
@media (max-width: 60rem) {
  .aufgabenseite .fuss > button[type="submit"] { flex-basis: 100%; }
}

/* --- Der Reiter Kommunikation als Chatverlauf (0084, 0248) ---------
   Flo, 23.10.2026: „Elemente die eingehen linksbündig und Elemente die
   rausgehen rechtsbündig, wie in einem Chatverlauf. Vielleicht mit einer
   etwas anderen Farbe." Eingehend: helle Fläche mit Rand, die Ecke unten
   links spitz; ausgehend: der helle Akzent, rechts, die Ecke unten rechts
   spitz. Der älteste Eintrag steht oben, über dem ersten eines Tages der
   Tag. Ein offener Rückruf trägt einen Rand im Warnton, Aufgehobenes
   steht gedämpft in einem Aufklapper darunter. */
.chatverlauf { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.chatlegende { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 0 0 4px; font-size: 12px; }
.chatlegende .punkt { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.chatlegende .punkt.ein { background: var(--flaeche); border: 1px solid var(--linie); }
.chatlegende .punkt.aus { background: var(--akzent-hell); border: 1px solid var(--akzent); }
.chatsprung { align-self: center; font-size: 12.5px; }
.chatverlauf .neuester { scroll-margin-top: 16px; }
.chattag { display: flex; justify-content: center; margin: 8px 0 2px; }
.chattag span {
  font-size: 12px; font-weight: 600; color: var(--ruhig);
  background: var(--flaeche-hover); border-radius: 999px; padding: 3px 12px;
}
.blase {
  display: grid; gap: 6px; max-width: min(78%, 760px); min-width: min(280px, 100%);
  padding: 10px 14px 12px; border-radius: 16px; border: 1px solid var(--linie);
  background: var(--flaeche); color: inherit; text-decoration: none;
}
.blase.eingehend { align-self: flex-start; border-bottom-left-radius: 4px; }
.blase.ausgehend {
  align-self: flex-end; border-bottom-right-radius: 4px;
  background: var(--akzent-hell); border-color: var(--akzent-hell);
}
a.blase:hover { border-color: var(--akzent); }
a.blase:hover .titel { color: var(--akzent-dunkel); text-decoration: underline; }
.blase .blasenkopf { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ruhig); min-width: 0; }
.blase .blasenkopf .zeichen { display: inline-flex; flex: 0 0 auto; }
.blase .blasenkopf .art { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blase .blasenkopf .wann { margin-left: auto; white-space: nowrap; padding-left: 10px; }
.blase .titel { font-size: 14px; color: var(--text-stark); }
.blase .vorschau {
  margin: 0; font-size: 13px; color: var(--ruhig);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blase .fliesstext { margin: 0; font-size: 13.5px; }
.blase .blasenfuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.blase .blasenfuss .wer { margin-left: auto; }
.blase .blasenfuss form.inzeile { margin: 0; }
.blase .blasenfuss button.schlicht { font-size: 12px; padding: 2px 6px; }
.blase .pille svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }
.blase.ungelesen .titel::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--akzent); margin-right: 6px; vertical-align: 2px;
}
.blase.rueckruf { border-color: var(--warnung); box-shadow: inset 3px 0 0 var(--warnung); }
.blase.aufgehoben { opacity: .6; }
.blase.aufgehoben .titel { text-decoration: line-through; }
details.aufgehobene { margin-top: 18px; }
details.aufgehobene > summary { cursor: pointer; font-size: 13px; color: var(--ruhig); }
@media (max-width: 40rem) {
  .blase { max-width: 92%; }
}

/* Eine Ebene über dem Chatverlauf: eine Mail, eine neue Mail, die
   Telefonnotiz. Derselbe Dialog-Look wie die Akte, ein Schleier darüber;
   der Verlauf bleibt sichtbar dahinter. */
.dialogseite-schleier.ebene { z-index: 60; background: rgba(27, 24, 16, .28); }
.dialogseite-kasten.kommebene { width: min(980px, 100%); height: auto; max-height: 100%; }
.dialogseite-kasten.kommebene > .kopf h1 { font-size: 22px; overflow-wrap: anywhere; }
/* Ein Anhang in der Vorschau braucht die volle Höhe, wie die Dokumentansicht. */
.dialogseite-kasten.kommebene.anhangsicht { width: min(1240px, 100%); height: 100%; }
.dialogseite-kasten.kommebene.anhangsicht > .rumpf.dokumentrumpf > .vorschau { flex: 1 1 auto; min-width: 0; }

/* Suche und Anzahl über dem Verlauf (0249). */
.kommsuche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 4px; }
.kommsuche input[type="search"] { flex: 1 1 260px; min-width: 0; }
.kommsuche select { width: auto; }
/* Ein Tag: eine Outlook-Kategorie an einer Mail, ein Vertrag an einer Notiz. */
.pille.tag { background: var(--ton-blau-flaeche); color: var(--ton-blau-schrift); }
button.pille.tag.knopfpille { background: var(--ton-blau-flaeche); color: var(--ton-blau-schrift); }
button.pille.tag.knopfpille:hover { background: var(--warnung-hell); color: var(--warnung); }
.mailtags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; }
.mailtags form.inzeile { margin: 0; }
.mailtags details.tagwahl { flex-basis: 100%; }
.mailtags details.tagwahl > summary { cursor: pointer; color: var(--akzent-dunkel); font-size: 13px; }
.mailtags details.tagwahl form.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.mailtags details.tagwahl form.reihe select, .mailtags details.tagwahl form.reihe input { width: auto; flex: 0 1 240px; }
.blase form.vertragswahl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.blase form.vertragswahl select { width: auto; height: 30px; font-size: 12.5px; padding: 0 8px; }
.blase form.vertragswahl button.schlicht { font-size: 12px; padding: 2px 6px; }

/* Eine Mail und das Formular zum Schreiben (0248). */
.mailkopf { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 12px 0 0; font-size: 13.5px; }
.mailkopf dt { color: var(--ruhig); }
.mailkopf dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mailtext { margin: 16px 0 0; padding: 16px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); font-size: 14px; max-height: 60vh; overflow: auto; }
.mailanhaenge { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.mailanhaenge > li { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; }
.mailanhaenge .zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mailanhaenge .zeile .name { font-weight: 600; overflow-wrap: anywhere; }
.mailanhaenge details > summary { cursor: pointer; font-size: 13px; color: var(--akzent-dunkel); }
.mailanhaenge form.raster { margin-top: 10px; }
.empfaengerwahl { display: grid; gap: 6px; }
.empfaengerwahl .empfaenger {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
  padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px;
}
.empfaengerwahl .empfaenger .wer { min-width: 0; overflow-wrap: anywhere; }
.empfaengerwahl .empfaenger .wer small { display: block; color: var(--ruhig); }
.empfaengerwahl .rollenwahl { display: inline-flex; gap: 4px; }
.empfaengerwahl .rollenwahl label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--linie); border-radius: 999px; cursor: pointer; }
.empfaengerwahl .rollenwahl label:has(input:checked) { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent-dunkel); }
.empfaengerwahl .rollenwahl input { width: auto; height: auto; margin: 0; }
.empfaengerwahl .rollenwahl label { margin: 0; font-weight: 400; height: auto; line-height: 1.4; }
.empfaengerwahl > legend { display: block; margin: 0 0 .3rem; padding: 0; font-weight: 600; font-size: 13px; color: var(--text-stark); }
.aktenwahl { display: grid; gap: 4px; max-height: 220px; overflow: auto; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 10px; }
.aktenwahl label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
@media (max-width: 40rem) {
  .empfaengerwahl .empfaenger { grid-template-columns: 1fr; }
}
button.pille { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
button.pille svg { width: 12px; height: 12px; }
button.pille.rueckruf { background: var(--warnung-hell); color: var(--warnung); }
button.pille.rueckruf:hover { background: var(--warnung); color: #fff; }
button.pille.knopfpille { background: var(--flaeche-hover); color: var(--ruhig); }
button.pille.knopfpille:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.pille.ok svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }
.reiterkopf .zart .warn { color: var(--warnung); font-weight: 600; }
.blase .pille.warn svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }

/* ---------------------------------------------------------------------
   Buchungsplanung (0087) -- der Reiter der Klientenakte nach dem
   Entwurf vom 14.09.2026. Ein Formular, mehrere Karten: Allgemein,
   Therapietage und Einheiten, Mögliche Therapiezeiten (die
   Schicht-Zeitachse, `.tag`/`.paare`), Notizen, Änderungsstatus.
   Farben sind die Tokens; die Tageskarte trägt den grünen Ton
   (--ton-gruen-*), der Hinweiskasten den goldenen (--ton-gold-*).
   --------------------------------------------------------------------- */
.buchungsplanung { display: grid; gap: 14px; }
.buchungsplanung .karte { margin: 0; }
.buchungsplanung .karte > h3 { margin: 0 0 4px; font-size: 16px; }
.buchungsplanung .karte > h3 + p.zart { margin: 0 0 12px; }
.buchungsplanung .reiterkopf h3 { margin: 0; font-size: 16px; }
.buchungsplanung .ueber {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--akzent); margin: 0 0 2px;
}
.buchungsplanung .ueber.gruen { color: var(--ton-gruen-schrift); }
.buchungsplanung .unsichtbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  border: 0; padding: 0; margin: -1px;
}
.buchungsplanung .zahl { font-family: var(--schrift-zahl); }
.buchungsplanung .statuslog { display: grid; justify-items: end; gap: 3px; text-align: right; font-size: 12px; }
/* Der Hinweiskasten über den Therapietagen. „.hinweis" allein ist eine
   PILLE — inline-block, Radius 999px, 11px Schrift —, und ein ganzer
   Absatz darin sah aus wie ein zerlaufener Aufkleber. Hier ist es ein
   Kasten nach dem Entwurf: Symbol links, Text daneben, 13px auf 1.6. */
.buchungsplanung .hinweis.gold {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 14px 0 0; padding: 14px 16px; border-radius: var(--radius-klein);
  background: var(--ton-gold-flaeche); color: var(--ton-gold-schrift);
  border: 1px solid #EBD9B4;
  font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.6;
}
.buchungsplanung .hinweis.gold svg { flex: 0 0 17px; width: 17px; height: 17px; margin-top: 2px; }
.buchungsplanung .hinweis.gold p { margin: 0; }
.buchungsplanung .hinweis.gold strong { color: inherit; font-weight: 600; }
.buchungsplanung .raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.buchungsplanung .raster label { display: grid; gap: 4px; }
.buchungsplanung .raster label.chipwahl { display: inline-flex; align-self: end; margin-top: 22px; padding: 6px 12px 6px 8px; font-size: 13px; }
.buchungsplanung label.chipwahl .zart { font-weight: 400; }
.buchungsplanung p.zart button.schlicht { height: auto; padding: 0 4px; font-size: inherit; text-decoration: underline; }

/* Ein Block: Kopf mit Vertrag, Haupttherapeut:in, Tagesanzahl, rechts die Wochensumme. */
.buchungsplanung .block { margin-top: 14px; padding: 14px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.buchungsplanung .block + .block { margin-top: 12px; }
.buchungsplanung .blockkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.buchungsplanung .blockkopf .felder { display: flex; align-items: flex-end; gap: 10px 14px; flex-wrap: wrap; }
.buchungsplanung .blockkopf .felder .ueber { flex-basis: 100%; }
.buchungsplanung .blockkopf label { display: grid; gap: 4px; font-size: 12px; color: var(--ruhig); min-width: 11rem; }
.buchungsplanung .blockkopf select { height: 36px; font-size: 13px; }
.buchungsplanung .blockkopf .summe { display: grid; justify-items: end; gap: 2px; text-align: right; }
.buchungsplanung .blockkopf .summe strong { font-size: 18px; color: var(--ton-gruen-schrift); }
.buchungsplanung .blockkopf .summe .zart { font-size: 12px; }
/* „…mit dem Griff ziehen" steht mitten im Satz -- `.nur-mit-js` setzt
   sonst `display: block`, und das Wort brach in eine eigene Zeile. */
body.mit-js .buchungsplanung .hinweis span.nur-mit-js { display: inline; }
/* Der gewählte Vertrag eines Blocks (13.10.2026): zwei Zeilen und der
   Balken erledigt · gebucht -- dieselben Angaben wie die Vertragskachel
   im Buchungsformular, nur zum Lesen. */
.buchungsplanung .vertragsinfo {
  margin-top: 12px; padding: 8px 12px; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--grund); font-size: 13px;
}
.buchungsplanung .vertragsinfo.leer { border-style: dashed; background: transparent; }
.buchungsplanung .vertragsinfo .zeile { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.buchungsplanung .vertragsinfo .zeile.zart { margin-top: 6px; font-size: 12px; }
.buchungsplanung .vertragsinfo .zeile.zart > span + span::before { content: "·"; margin-right: 10px; color: var(--zart); }
.buchungsplanung .vertragsinfo .stand { margin-left: auto; }
.buchungsplanung .vertragsinfo .stand .warn,
.buchungsplanung .vertragsinfo .zeile .warn { color: var(--warnung); }
.buchungsplanung .vertragsinfo .oeffnen { font-size: 12px; white-space: nowrap; }
.buchungsplanung .vertragsinfo .standbalken { display: block; width: 100%; height: 6px; margin-top: 7px; }
.buchungsplanung .vertragsinfo .notiz { margin: 6px 0 0; font-size: 12px; color: var(--ruhig); max-width: 78ch; }
.buchungsplanung button.gefahr.schlicht { color: var(--warnung); }

/* Die Therapietage: ein Raster aus Karten mit grünem Kopf. */
.buchungsplanung .tage { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 12px; margin-top: 14px; }
.buchungsplanung .therapietag { border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--grund); overflow: hidden; }
.buchungsplanung .therapietag > .tagkopf {
  margin: 0; padding: 8px 12px; background: var(--ton-gruen-flaeche); border-bottom: 1px solid #D6E3DE;
}
.buchungsplanung .therapietag > .tagkopf .zahl { color: var(--ton-gruen-schrift); font-weight: 600; font-size: 13px; }
.buchungsplanung .einheitenzahl {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; font-size: 12px; color: var(--ruhig);
}
.buchungsplanung .schritte { display: inline-flex; align-items: center; gap: 8px; }
.buchungsplanung .schritte button {
  width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--text-stark); font-size: 16px;
}
.buchungsplanung .schritte button:hover { background: var(--flaeche-hover); color: var(--text-stark); }
.buchungsplanung .schritte button:disabled { opacity: .4; cursor: default; }
.buchungsplanung .schritte strong { min-width: 1.2em; text-align: center; font-size: 14px; }
.buchungsplanung .reihenfolge { margin: 0 12px 8px; padding: 6px 10px 6px 8px; font-size: 12px; border-radius: var(--radius-klein); }

/* Eine Einheit: weiße Karte mit Nummer, Dauer-Chips, Produkt, drei Geräteplätzen. */
.buchungsplanung .einheiten { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 8px; }
/* Eine Einheit ist eine kompakte Karte von gleicher Grundhöhe (Flo, 18.09.2026):
   Kopf, Produkt, Geräte. Ohne Geräte ist sie genau so hoch wie mit einer
   Zeile — erst die zweite Zeile macht sie größer. Vorher standen vier
   leere Geräteplätze auf Vorrat, und jede Einheit war so hoch wie die
   vollste. */
.buchungsplanung .einheit {
  padding: 8px 10px; background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 3px solid var(--ton-gruen-schrift); border-radius: var(--radius-klein);
  display: grid; gap: 6px; align-content: start; min-height: 124px;
}
.buchungsplanung .einheit.ziehend { opacity: .45; }
.buchungsplanung .therapietag.ziel { outline: 2px dashed var(--akzent); outline-offset: 2px; }
.buchungsplanung .einheitkopf { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.buchungsplanung .einheitkopf .wort { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buchungsplanung .einheitkopf button.weg {
  width: 20px; height: 20px; padding: 0; display: inline-grid; place-items: center; flex: 0 0 auto;
  border: 0; border-radius: 999px; background: transparent; color: var(--zart); font-size: 13px; line-height: 1;
}
.buchungsplanung .einheitkopf button.weg:hover { background: var(--warnung-hell); color: var(--warnung); }
/* Der Griff: nur mit Javascript sichtbar, denn ohne es zieht nichts. */
.buchungsplanung .griff {
  flex: 0 0 auto; cursor: grab; color: var(--zart); font-size: 13px; line-height: 1;
  padding: 2px 1px; letter-spacing: -2px;
}
.buchungsplanung .griff:active { cursor: grabbing; }
.buchungsplanung .einheitkopf .nummer {
  width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); font-family: var(--schrift-zahl); font-size: 11px;
}
.buchungsplanung .dauern { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }
.buchungsplanung .dauern .chipwahl.klein { height: auto; padding: 2px 8px; font-size: 11px; }
.buchungsplanung .dauern .chipwahl input { position: absolute; opacity: 0; pointer-events: none; }
.buchungsplanung .dauern .zart { font-size: 11px; }
.buchungsplanung label.produkt { display: flex; align-items: center; gap: 8px; margin: 0; }
.buchungsplanung label.produkt select { height: 36px; font-size: 13px; flex: 1; }
.buchungsplanung label.produkt .farbfeld { flex: 0 0 10px; }
.buchungsplanung label.produkt .punkt { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 999px; border: 1px dashed var(--zart); }
/* Die Ressourcen einer Einheit (0100, Auswahl nach dem Entwurf am
   18.09.2026): eine Zeile je Variante, in der Zeile bis zu zwei Zellen.
   Untereinander sind es Alternativen, oben bevorzugt; nebeneinander
   heißt „beide zugleich". Jede Zelle ist ein Chip mit ihren Handlungen,
   kein Auswahlfeld — gewählt wird aus der Liste im Aufklapper. */
.buchungsplanung .ressourcen { display: grid; gap: 3px; }
.buchungsplanung .ressourcen > .zart { font-size: 11px; line-height: 1.3; }
.buchungsplanung .ressourcen .zeile {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 2px 4px 2px 6px; border-radius: 8px; background: var(--ton-gruen-flaeche);
}
.buchungsplanung .ressourcen .zeile.ziehend { opacity: .45; }
.buchungsplanung .ressourcen .zeile.ziel { box-shadow: 0 -2px 0 0 var(--akzent); }
.buchungsplanung .ressourcen .prio { font-size: 11px; color: var(--ton-gruen-schrift); min-width: 1em; }
.buchungsplanung .ressourcen .und { font-size: 12px; color: var(--ton-gruen-schrift); }
.buchungsplanung .ressourcen .chip {
  display: inline-flex; align-items: center; gap: 2px; min-width: 0;
  padding: 2px 2px 2px 8px; border-radius: 999px;
  background: var(--flaeche); border: 1px solid #D6E3DE;
  font-size: 12px; color: var(--text-stark);
}
.buchungsplanung .ressourcen .chip .was { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem; }
.buchungsplanung .ressourcen .chip button {
  width: 20px; height: 20px; padding: 0; display: inline-grid; place-items: center; flex: 0 0 auto;
  border: 0; border-radius: 999px; background: transparent; color: var(--ruhig); font-size: 13px; line-height: 1;
}
.buchungsplanung .ressourcen .chip button:hover { background: var(--flaeche-hover); color: var(--text-stark); }
.buchungsplanung .ressourcen .chip button.weg:hover { color: var(--warnung); }
.buchungsplanung .ressourcen .zeile > button.verbinden {
  margin-left: auto; width: 22px; height: 22px; padding: 0; flex: 0 0 auto;
  border: 1px solid transparent; border-radius: 8px; background: transparent;
  color: var(--ton-gruen-schrift); font-size: 13px; line-height: 1;
}
.buchungsplanung .ressourcen .zeile > button.verbinden:hover { background: var(--flaeche); border-color: #D6E3DE; }

/* Der Aufklapper ist das Popover des Entwurfs -- ohne Javascript, weil
   <details> das von selbst kann. Je Ressource ein Knopf: ein Klick, eine
   Zeile.

   Die Liste steht IM FLUSS und schwebt nicht darüber: Die Tageskarte
   schneidet mit „overflow: hidden" ab, und eine absolut gesetzte Liste
   war damit unerreichbar -- aufgeklappt wurde sie, sichtbar nicht (Flo,
   18.09.2026: „Ressourcen nicht wählbar, da die Seite nicht länger
   wird"). Jetzt wächst die Karte, und die Seite wird länger. */
.buchungsplanung .ressourcenwahl { min-width: 0; }
.buchungsplanung .zeile .ressourcenwahl[open] { flex: 1 1 100%; }
.buchungsplanung .ressourcenwahl > summary {
  list-style: none; cursor: pointer; font-size: 12px; color: var(--akzent-dunkel);
  padding: 2px 8px; border: 1px dashed var(--linie); border-radius: 999px; width: max-content; background: var(--flaeche);
}
.buchungsplanung .ressourcenwahl > summary::-webkit-details-marker { display: none; }
.buchungsplanung .ressourcenwahl.neu > summary { border-radius: 8px; }
.buchungsplanung .ressourcenwahl[open] > summary { background: var(--flaeche-hover); }
.buchungsplanung .ressourcenwahl .liste {
  margin-top: 4px; max-height: 13rem; overflow: auto; display: grid; gap: 2px; padding: 6px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.buchungsplanung .ressourcenwahl .liste p.zart { margin: 0 0 4px; font-size: 11px; }
.buchungsplanung .ressourcenwahl .liste button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%;
  height: auto; padding: 5px 8px; border: 0; border-radius: 8px; background: transparent;
  font-size: 12px; color: var(--text); text-align: left;
}
.buchungsplanung .ressourcenwahl .liste button:hover { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.buchungsplanung .ressourcenwahl .liste button .zart { font-size: 11px; flex: 0 0 auto; }

/* Mögliche Therapiezeiten: die Schicht-Zeitachse, ein Tag je Wochentag. */
.buchungsplanung .woche .tag { padding: 12px 0; }
.buchungsplanung .woche .tagkopf .zahl { font-size: 13px; color: var(--ton-gruen-schrift); font-weight: 600; }
.buchungsplanung .zeitknoepfe { display: flex; gap: 4px 6px; flex-wrap: wrap; margin-top: 6px; }
.buchungsplanung .zeitknoepfe button {
  height: 28px; padding: 0 10px; font-size: 12px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); color: var(--ruhig);
}
.buchungsplanung .zeitknoepfe button:hover { border-color: var(--ton-gruen-schrift); color: var(--ton-gruen-schrift); background: var(--flaeche); }

/* Notizen: Eingabezeile, dann die Liste mit Kästchen und Meta. */
.buchungsplanung .notizen .zaehler {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 6px;
  border-radius: 999px; background: var(--akzent-hell); color: var(--akzent-dunkel);
  font-family: var(--schrift-zahl); font-size: 12px; vertical-align: 3px;
}
.buchungsplanung .neuenotiz { display: flex; gap: 8px; margin-top: 10px; }
.buchungsplanung .neuenotiz input { flex: 1; }
.buchungsplanung .neuenotiz button { flex: 0 0 auto; }
.buchungsplanung .notizliste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.buchungsplanung .notizliste label.chipwahl {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-klein);
  background: var(--flaeche); border: 1px solid var(--linie); font-weight: 400; font-size: 13.5px; color: var(--text);
}
.buchungsplanung .notizliste label.chipwahl:has(input:checked) { background: var(--flaeche-hover); color: var(--ruhig); }
.buchungsplanung .notizliste label.chipwahl input { margin-top: 3px; }
.buchungsplanung .notizliste label.chipwahl > span { display: grid; gap: 2px; }
.buchungsplanung .notizliste .meta { font-size: 11px; }
.buchungsplanung .notizliste li.erledigt .text { text-decoration: line-through; }

/* Änderungsstatus: zwei Optionskarten; der Warnsatz steht nur, solange keine gewählt ist. */
.buchungsplanung .optionen { margin: 10px 0 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.buchungsplanung .option {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); font-weight: 600;
}
.buchungsplanung .option input { width: auto; height: auto; margin: 4px 0 0; }
.buchungsplanung .option > span { display: grid; gap: 2px; }
.buchungsplanung .option svg { width: 18px; height: 18px; color: var(--ruhig); }
.buchungsplanung .option .zart { font-weight: 400; font-size: 12px; }
.buchungsplanung .option:has(input:checked) { border-color: var(--ton-gruen-schrift); background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.buchungsplanung .option:has(input:checked) svg { color: var(--ton-gruen-schrift); }
.buchungsplanung .statuswahl .fehlt { margin-top: 10px; }
.buchungsplanung .statuswahl:has(input[name="status"]:checked) .fehlt { display: none; }
.buchungsplanung .speichern { margin: 12px 0 0; }
.buchungsplanung .speichern button.breit { height: 52px; font-size: 15px; margin-top: 0; }
.praxisliste.planungen a .pille { margin-left: 8px; }
.praxisliste.planungen .gesperrt { display: block; padding: 10px 12px; border: 1px dashed var(--linie); border-radius: var(--radius-klein); color: var(--ruhig); }
.praxisliste.planungen li > * > .zart { display: block; margin-top: 2px; font-size: 12px; }
@media (max-width: 60rem) {
  .buchungsplanung .raster, .buchungsplanung .optionen { grid-template-columns: 1fr; }
  .buchungsplanung .statuslog { justify-items: start; text-align: left; }
}

/* /plattform/speicher: Kennzahlen des Objektspeichers, drei Pflegeknöpfe, Schlüssellisten des Abgleichs. */
dl.angaben.zugang { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; align-items: baseline; }
dl.angaben.zugang dd, dl.angaben.zugang dd + dt { margin: 0; }
dl.angaben.zugang + form { margin-top: 14px; }
.speicherseite .speicherstand { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.speicherseite .speicherstand > div {
  display: grid; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche-hover);
  font-size: 12px; color: var(--ruhig);
}
.speicherseite .speicherstand .zahl { font-family: var(--schrift-zahl); font-size: 22px; font-weight: 600; color: var(--text); }
.speicherseite .speicherstand > div.warn { border-color: #F0D6CB; background: var(--warnung-hell); }
.speicherseite .speicherstand > div.warn .zahl { color: var(--warnung); }
.speicherseite .pflege { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.speicherseite .pflege form { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.speicherseite .pflege h3 { margin: 0; font-size: 15px; }
.speicherseite .pflege p { margin: 0; }
.speicherseite .pflege button { justify-self: start; margin-top: 4px; }
.speicherseite .kaestchen { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.speicherseite .kaestchen input { width: auto; height: auto; margin: 0; }
.speicherseite ul.schluessel { margin: 6px 0 12px; padding-left: 1.2rem; font-size: 13px; }
.speicherseite h3 { margin: 14px 0 4px; font-size: 15px; }

/* ---------------------------------------------------------------------
   Dokumente und Medien (0090) — die Liste der Akte, der Personalakte und
   der Praxis, dazu das Upload-Formular. Kein Inline-Stil: Vorschaubild
   und Symbol sind Bild und SVG, die Farbe kommt aus den Tönen.
   --------------------------------------------------------------------- */
.karte.dokumente .reiterkopf { margin-bottom: 8px; }
.dokumentliste { list-style: none; margin: 12px 0 0; padding: 0; }
.dokumentliste .dokument {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--linie);
}
.dokumentliste .dokument:first-child { border-top: 0; padding-top: 4px; }
.dokumentliste .zeichen {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--flaeche-hover); color: var(--ruhig);
}
.dokumentliste .zeichen svg { width: 22px; height: 22px; }
.dokumentliste .foto .zeichen { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.dokumentliste .video .zeichen { background: var(--ton-lila-flaeche); color: var(--ton-lila-schrift); }
.dokumentliste .vorschau {
  flex: 0 0 120px; width: 120px; height: 68px; object-fit: cover;
  border-radius: 10px; background: var(--flaeche-hover);
}
.dokumentliste .inhalt { flex: 1 1 auto; min-width: 0; }
.dokumentliste .kopf { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.dokumentliste .kopf strong { font-size: 15px; color: var(--text-stark); overflow-wrap: anywhere; }
.dokumentliste .inhalt > p { margin: 4px 0 0; font-size: 13px; }
.dokumentliste .dateiname { font-family: var(--schrift-zahl); }
.dokumentliste .notiz { color: var(--text); }
.dokumentliste .entfernt .kopf strong, .dokumentliste .entfernt .zeichen { opacity: .55; }
.dokumentliste .aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
/* Die Aufklapper der Zeile sehen wie Knöpfe aus; der Pfeil des
   Aufklappers wäre im Knopf ein zweites Zeichen. */
.dokumentliste details.aufklapp > summary::before { display: none; }
.dokumentliste details.aufklapp[open] { flex-basis: 100%; }
.dokumentliste details.aufklapp[open] > summary { margin-bottom: 8px; }
.dokumentliste details.aufklapp.gefahr > summary { color: var(--warnung); border-color: #E4C3C3; }
.dokumentliste video { display: block; width: 100%; max-width: 640px; max-height: 360px; border-radius: 10px; background: #000; }
.dokumentliste form.pflegen { display: grid; gap: 10px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.dokumentliste form.pflegen label:has(textarea) { grid-column: 1 / -1; }
.dokumentliste form.pflegen textarea { min-height: 60px; }
.dokumentliste form.pflegen button { justify-self: start; }
.dokumentliste form.inzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dokumentliste form.inzeile .zart { font-size: 13px; flex: 1 1 18rem; }
/* `.hochladen` ist seit 0091 der Rumpf des Ablege-Dialogs — der
   Abstand nach oben und die Trennlinie stammen aus der Zeit, als es ein
   Abschnitt unter der Liste war. */
.hochladen h3 { margin: 0 0 4px; font-size: 15px; }
.hochladen form.upload { margin-top: 10px; }
.hochladen form.upload textarea { min-height: 60px; }
.hochladen form.upload .zart { margin: 0; font-size: 13px; }
.hochladen .fortschritt { width: 100%; height: 10px; accent-color: var(--akzent); }
.hochladen .uploadstatus:empty { display: none; }
.hochladen .aktionen { margin-top: 2px; }
@media (max-width: 40rem) {
  .dokumentliste .vorschau { flex-basis: 80px; width: 80px; height: 46px; }
  .dokumentliste form.pflegen, .hochladen form.upload { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Ablage der Klientenakte — die Reiter Dokumente und Medien (0091)
   ---------------------------------------------------------------------
   Nach dem Entwurf vom 16.09.2026: Kopfzeile mit Zähler und Filtern,
   eine Ablagefläche, dann die Liste. Die Fläche ist das Label des
   Dateifelds — ohne Javascript ein großer Knopf, mit Javascript ein
   Ziel zum Ziehen (oberflaeche.js, Abschnitt 7). Der Vollbildblick
   läuft über `:target` und braucht keine Zeile Javascript.
   --------------------------------------------------------------------- */
.ablage { display: flex; flex-direction: column; gap: 12px; }
.ablagekopf { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; }
.ablagekopf .ueber { margin: 0; }
.ablagekopf p.zart { margin: 4px 0 0; font-size: 13px; }
.ablagekopf .werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ablagekopf .werkzeuge form { margin: 0; }
.ablagekopf .werkzeuge label { margin: 0; }
.ablagekopf .werkzeuge select { height: 34px; }
.ablagekopf .knopf svg { width: 15px; height: 15px; }
/* Der Knopf über der Liste in Personalakte und Einstellungen. */
.ablegenzeile { margin: 0 0 10px; }
.ablegenzeile .knopf svg { width: 15px; height: 15px; }

/* Die Liste: dieselbe Zeile wie in der Personalakte, nur mit Miniatur
   und Sichtbarkeits-Pille. Die gemeinsamen Regeln stehen oben bei
   `.dokumentliste` — hier steht nur, was dazukommt. */
.medienliste { list-style: none; margin: 0; padding: 0; }
.medienliste .dokument {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-top: 1px solid var(--linie);
}
.medienliste .dokument:first-child { border-top: 0; padding-top: 2px; }
.medienliste .inhalt { flex: 1 1 auto; min-width: 0; }
.medienliste .kopf { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.medienliste .kopf strong { font-size: 15px; color: var(--text-stark); overflow-wrap: anywhere; }
.medienliste .inhalt > p { margin: 4px 0 0; font-size: 13px; }
.medienliste .dateiname { font-family: var(--schrift-zahl); }
.medienliste .notiz { color: var(--text); }
.medienliste .aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 8px; }
.medienliste .aktionen .zart { flex: 1 1 16rem; font-size: 13px; }
.medienliste .entfernt .kopf strong, .medienliste .entfernt .miniatur { opacity: .55; }
.medienliste details.aufklapp > summary::before { display: none; }
.medienliste details.aufklapp[open] { flex-basis: 100%; }
.medienliste details.aufklapp[open] > summary { margin-bottom: 8px; }
.medienliste details.aufklapp.gefahr > summary { color: var(--warnung); border-color: #E4C3C3; }
.medienliste form.pflegen { display: grid; gap: 10px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.medienliste form.pflegen label.breit, .medienliste form.pflegen .aktionen.breit { grid-column: 1 / -1; }
.medienliste form.pflegen textarea { min-height: 60px; }
.medienliste form.inzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.medienliste form.inzeile .zart { font-size: 13px; flex: 1 1 18rem; }

/* Die Miniatur: 76×56 wie im Entwurf, mit der Laufzeit unten rechts. */
.medienliste .miniatur {
  position: relative; flex: 0 0 76px; width: 76px; height: 56px;
  border-radius: 9px; overflow: hidden; background: var(--flaeche-hover);
  display: grid; place-items: center;
}
.medienliste .miniatur img { width: 100%; height: 100%; object-fit: cover; }
.medienliste .miniatur .zeichen { display: grid; place-items: center; color: var(--ruhig); }
.medienliste .miniatur .zeichen svg { width: 20px; height: 20px; }
.medienliste .foto .miniatur .zeichen { color: var(--ton-gruen-schrift); }
.medienliste .video .miniatur .zeichen { color: var(--ton-lila-schrift); }
.medienliste .miniatur .dauer {
  position: absolute; right: 4px; bottom: 4px;
  padding: 1px 5px; border-radius: 5px;
  background: rgba(27, 24, 16, .72); color: #fff;
  font-family: var(--schrift-zahl); font-size: 11px;
}

/* Sichtbarkeit: wem die Zeile gehört, und ob sie freigegeben ist. */
.pille.sicht { display: inline-flex; align-items: center; gap: 5px; }
.pille.sicht svg { width: 12px; height: 12px; }
.pille.sicht { background: var(--flaeche-hover); color: var(--ruhig); }
.pille.sicht.offen { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.medienliste .fremd .miniatur { outline: 2px solid var(--akzent-hell); outline-offset: -2px; }

/* Das Ablegen liegt in einem <dialog> — etwas breiter als die
   Anlegen-Formulare auf /plattform, weil die Fläche Platz braucht. */
dialog.dialog.ablegen { width: min(46rem, calc(100vw - 40px)); }
dialog.dialog.ablegen .rumpf { display: block; }

/* ---- Mit Handy ablegen (0155) ---------------------------------------
   Am Rechner ein Dialog mit dem QR-Code, auf dem Handy eine schmale
   Seite ohne Menue. Die Farbe des Codes steht als `fill` im SVG der
   Vorlage -- Schwarz auf Weiss, weil jeder Leser das am sichersten
   liest; der Rahmen gibt die Ruhezone sichtbar dazu. */
dialog.dialog.handy { width: min(42rem, calc(100vw - 40px)); }
dialog.dialog.handy .rumpf { display: block; }
.qrkasten { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.qrkasten > div { flex: 1 1 15rem; min-width: 0; }
.qrkasten > div p { margin: 0 0 8px; }
svg.qrcode { flex: 0 0 auto; width: 232px; height: 232px; border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.qrkasten .adresse { word-break: break-all; font-size: 12px; margin: 6px 0 0; }
.qrkasten .aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.knopf .zaehler {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 11px; line-height: 18px; text-align: center;
  color: var(--flaeche); background: var(--akzent);
}
ul.handycodes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
ul.handycodes li {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
ul.handycodes li > span:first-child { flex: 1 1 12rem; }
ul.handycodes form { margin: 0; }

body.handyablage main { margin-top: 4vh; }
/* Nicht `.marke`: Die ist fuer die Kopfleiste gebaut und laesst auf
   schmalen Schirmen das Wort weg. Und nicht `.klein`: Das ist die feste
   Hoehe der kleinen Knoepfe, ein Absatz damit laeuft aus der Karte. */
body.handyablage .handykopf {
  display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-size: 13px; font-weight: 600; color: var(--ruhig);
}
body.handyablage .handykopf .zeichen {
  flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 999px; background: var(--akzent); color: #fff; font-size: 10px; font-weight: 600;
}
body.handyablage h1 { margin: 2px 0 4px; }
.handyform { display: grid; gap: 12px; margin-top: 16px; }
.handyform .aufnahme {
  display: grid; gap: 6px; padding: 14px;
  border: 1px dashed var(--linie); border-radius: var(--radius-klein); background: var(--flaeche);
}
.handyform .aufnahme:not(.still) { border: 1px solid var(--akzent); background: var(--akzent-hell); }
.handyform .aufnahme > svg { width: 24px; height: 24px; color: var(--akzent); }
.handyform .aufnahme .wie { font-size: 16px; font-weight: 600; }
.handyform input[type="file"] { height: auto; padding: 8px 0; border: 0; background: transparent; }
.handyform button[type="submit"] { width: 100%; height: 52px; font-size: 16px; }
body.handyablage p.handyfuss { font-size: 12px; margin: 16px 0 0; }
.ablegen form.upload { margin-top: 0; }
.ablegen form.upload textarea { min-height: 60px; }
.ablegen form.upload .zart { margin: 0; font-size: 13px; }
.ablegen .fortschritt { width: 100%; height: 10px; accent-color: var(--akzent); }
.ablegen .uploadstatus:empty { display: none; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 18px; text-align: center;
  border: 1px dashed var(--linie); border-radius: var(--radius);
  background: var(--grund); cursor: pointer;
}
.dropzone:hover, .dropzone:focus-within { background: var(--flaeche-hover); border-color: var(--akzent); }
.dropzone.bereit { background: var(--akzent-hell); border-color: var(--akzent); }
.dropzone svg { width: 20px; height: 20px; color: var(--ruhig); }
.dropzone .wie { font-weight: 500; color: var(--text-stark); }
.dropzone .zart { font-size: 13px; }
.dropzone input[type="file"] { max-width: 100%; }

/* Vollbild: Foto und Video über dem Kasten des Lichtkastens. */
.lichtkasten.schau .kasten { width: min(60rem, 100%); }
.lichtkasten.schau .grossbild,
.lichtkasten.schau video {
  display: block; width: 100%; max-height: 70vh; object-fit: contain;
  border-radius: 10px; background: #000;
}
@media (max-width: 40rem) {
  .medienliste .miniatur { flex-basis: 60px; width: 60px; height: 44px; }
  .medienliste form.pflegen, .ablegen form.upload { grid-template-columns: 1fr; }
}

/* Die Filterzeile der Ablage: Art und Praxis als Dropdown statt als
   Linkliste — die Arten sind ein Katalog und werden länger. */
.filterzeile.klein { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; margin: 0; }
.filterzeile.klein label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
.filterzeile.klein label .wie { color: var(--ruhig); }
.filterzeile.klein select { height: 34px; font-size: 14px; }
/* Ein Wert, der feststeht — der Vertrag im Overlay seines Vertrags. */
label.nurlesbar { display: block; }
label.nurlesbar .wert {
  display: block; margin-top: 4px; padding: 8px 10px;
  background: var(--flaeche-hover); border-radius: 8px; color: var(--text-stark);
}
label.nurlesbar .wert.mono { font-family: var(--schrift-zahl); }

/* „Sichtbar für": die Praxen des Klienten als Häkchenreihe (0093).
   Wer keine Einwilligung hat, steht gesperrt da statt zu fehlen — eine
   Praxis, die gar nicht auftaucht, sieht aus wie ein Fehler. */
.sichtwahl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 0; margin: 0; padding: 0; }
.sichtwahl legend { padding: 0; margin-bottom: 6px; font-size: 13px; color: var(--ruhig); }
.sichtwahl .chipwahl.fest { opacity: .8; }
.sichtwahl .chipwahl.gesperrt { opacity: .55; cursor: not-allowed; }
.sichtwahl .chipwahl.gesperrt span { text-decoration: line-through; text-decoration-thickness: 1px; }

/* =====================================================================
   Reiter „Vereinbarungen" der Klientenakte (0094)
   =====================================================================
   Nach dem Entwurf vom 17.09.2026. Der Schnitt ist eine Karte je
   EINWILLIGUNGSART mit einer Zeile je Praxis -- deshalb wiederholen
   sich hier zwei Bausteine: das Monogramm der Praxis und die Zeile mit
   Name, Metazeile, Zustandspille und Aktion. Beide gibt es auch in der
   Karte „Vereinbarung je Praxis" und in „Verbundene Software", also
   stehen ihre Regeln einmal und gelten in allen dreien.
   ===================================================================== */

/* Das Monogramm: zwei Zeichen im Ton der Praxis. Kein Bild -- eine
   Praxis hat keines, und die Farbe allein ordnet die Zeile schon zu. */
.monogramm {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
  display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}

/* Anlegen: eine Zeile, kein Formularblock -- das Anlegen ist die
   seltenere Handlung und soll die Matrix nicht nach unten schieben. */
form.anlegezeile {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
}
form.anlegezeile label { flex: 1 1 260px; min-width: 200px; display: block; font-size: 13px; color: var(--ruhig); }
form.anlegezeile select { width: 100%; margin-top: 6px; }
p.nachzeile { margin: -6px 0 14px; }

.einwilligungskarte > header,
.kartenkopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.einwilligungskarte > header h3, .kartenkopf h3 { margin: 0; }
.einwilligungskarte > header .alle { margin-left: auto; }
.einwilligungskarte > p.fliesstext { margin: 6px 0 0; font-size: 13px; }

/* Ein Knopf, der wie ein Link aussieht: „Alle erteilen" ist eine
   Abkürzung, kein zweiter Hauptweg -- und ein <a> wäre es nicht, weil
   es schreibt. */
button.alsLink {
  border: none; background: none; padding: 0; min-height: 0;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--akzent-dunkel); cursor: pointer;
}
button.alsLink:hover { text-decoration: underline; }

/* Die Sammelzeile „Für alle Praxen". */
form.sammelzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding: 11px 13px;
  background: var(--grund); border: 1px solid var(--linie); border-radius: 10px;
}
form.sammelzeile .wie { font-size: 12px; font-weight: 600; color: var(--text-stark); }
form.sammelzeile input[name="hinweis"],
form.sammelzeile input[name="bezeichnung"] { flex: 1 1 200px; min-width: 170px; }
form.sammelzeile > .zart { flex: 1 1 100%; }

details.sammeldokument { margin-top: 10px; }
details.sammeldokument > summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-stark);
}
details.sammeldokument > summary::marker { color: var(--ruhig); }
details.sammeldokument form.sammelzeile { margin-top: 8px; }

/* Die Zeilen -- in allen drei Karten dieselbe Gestalt. */
.praxiszeilen { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

.praxiszeile {
  padding: 11px 13px; border: 1px solid var(--linie);
  border-radius: 10px; background: var(--grund);
}
.praxiszeile.beendet { opacity: .62; }

.praxiszeile > summary {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
.praxiszeile > summary::-webkit-details-marker { display: none; }

.praxiszeile .wer, .systeme .wer { flex: 1 1 160px; min-width: 0; }
.praxiszeile .wer .name, .systeme .wer .name {
  display: block; font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.praxiszeile .wer .meta, .systeme .wer .meta {
  display: block; font-size: 12px; color: var(--ruhig);
}

/* Ob das unterschriebene Blatt da ist, steht an der zugeklappten Zeile --
   sonst sähe man es erst nach dem Aufklappen. */
.blattmarke {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 7px;
  background: var(--flaeche-hover); font-size: 12px; color: var(--ruhig);
}
.blattmarke svg { width: 14px; height: 14px; }
.blattmarke.fehlt { background: var(--warnung-hell); color: var(--warnung); }

/* Die Zustandspille. `gilt` ist der einzige Zustand mit eigener Farbe --
   „nicht erteilt" ist kein Fehler, sondern der Normalfall vor der
   Unterschrift, und Rot dafür wäre eine Behauptung. */
.pille.gilt { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }

/* Der Aufklapp-Hinweis am rechten Rand der Zeile. */
.praxiszeile > summary .auf {
  flex: 0 0 auto; padding: 5px 12px;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche);
  font-size: 13px; font-weight: 500; color: var(--text-stark);
}
.praxiszeile > summary:hover .auf { background: var(--flaeche-hover); }
.praxiszeile[open] > summary .auf { background: var(--flaeche-hover); }

.praxiszeile > .inhalt {
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 8px;
}
.praxiszeile > .inhalt form.reihe { margin: 0; flex-wrap: wrap; }
.praxiszeile > .inhalt p { margin: 0; }

/* Die abgelegten Blätter -- die Liste ist kurz, also keine Tabelle. */
ul.blaetter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
ul.blaetter li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--flaeche); font-size: 13px;
}
ul.blaetter li form.inzeile { margin-left: auto; }

/* ---------------------------------------------------------------------
   Der Rest des Reiters „Vereinbarungen" (0095, Entwurf vom 17.09.2026).

   „Vereinbarung je Praxis" ist gestrichen; was einer Praxis allein
   gehört (Notiz, Laufzeit), liegt zugeklappt ganz unten. Neu: die
   Anlege-Kacheln, die aufklappbare Sammelzeile und der Verlauf je Punkt
   in den Einzelheiten einer Zeile.
   --------------------------------------------------------------------- */

/* Anlegen: ein Feld, darunter zwei Kacheln als Absender. Ohne
   Javascript gibt es keinen „gewählten Modus" -- welche Kachel man
   drückt, IST die Wahl. */
form.anlegen {
  padding: 16px 18px; margin-bottom: 14px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
}
form.anlegen > label { display: block; font-size: 13px; color: var(--ruhig); }
form.anlegen > label select { display: block; width: 100%; max-width: 32rem; margin-top: 6px; }
form.anlegen .modi {
  margin-top: 10px; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
form.anlegen button.modus {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 0; padding: 10px 12px; text-align: left;
  border: 1px solid var(--linie); border-radius: 10px;
  background: var(--grund); color: var(--text); font: inherit; cursor: pointer;
}
form.anlegen button.modus:hover { border-color: var(--akzent); background: var(--akzent-hell); }
form.anlegen button.modus .was { font-size: 13px; font-weight: 600; }
form.anlegen button.modus .dazu { font-size: 12px; color: var(--ruhig); }
form.anlegen button.modus .zahl {
  display: inline-block; padding: 1px 7px; border-radius: 6px;
  background: var(--flaeche-hover); font-weight: 600;
}
form.anlegen > p.zart { margin: 10px 0 0; }

/* Der Hinweis auf beendete Vereinbarungen steht im Kopf -- dort, wo
   früher die Karte „Vereinbarung je Praxis" davon erzählt hat. */
p.beendethinweis { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 8px 0 0; }
p.beendethinweis .pille svg { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }

/* Die Abkürzungen einer Karte -- aufklappbar, weil sie nicht der
   Normalfall sind. */
details.sammlung { margin-top: 12px; }
details.sammlung > summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  height: 32px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--flaeche); font-size: 13px; font-weight: 500; color: var(--text-stark);
  list-style: none;
}
details.sammlung > summary::-webkit-details-marker { display: none; }
details.sammlung > summary:hover { background: var(--flaeche-hover); }
details.sammlung > summary svg { width: 14px; height: 14px; }
details.sammlung form.sammelzeile { margin-top: 8px; }

/* Der Verlauf eines Punktes bei einer Praxis. */
.verlaufsspur { margin-top: 4px; }
.verlaufsspur .wie {
  display: block; margin: 0 0 6px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--zart);
}
.verlaufsspur ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.verlaufsspur li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-stark); }
.verlaufsspur .marke {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center;
}
.verlaufsspur .marke svg { width: 12px; height: 12px; }
.verlaufsspur .marke.gilt { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.verlaufsspur .marke.aus  { background: var(--flaeche-hover); color: var(--ruhig); }
.verlaufsspur .satz { flex: 1; min-width: 0; }
.verlaufsspur p.zart { margin: 0; }

/* „Verbundene Software" -- wieder eine eigene Karte unter den Punkten. */
.softwarezeile {
  padding: 11px 13px; border: 1px solid var(--linie);
  border-radius: 10px; background: var(--grund);
}
.softwarezeile > .kopf { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.softwarezeile > .kopf .name { font-size: 14px; font-weight: 500; }
.softwarezeile > ul {
  list-style: none; margin: 9px 0 0; padding: 9px 0 0;
  border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 6px;
}
.softwarezeile > ul li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 11px; border: 1px solid var(--linie); border-radius: 9px; background: var(--flaeche);
}
.softwarezeile .wer { flex: 1 1 160px; min-width: 0; }
.softwarezeile .wer .name { display: block; font-size: 13px; font-weight: 500; }
.softwarezeile .wer .meta { display: block; font-size: 12px; color: var(--ruhig); }
.softwarezeile .wie { font-size: 12px; color: var(--ruhig); }
.kennung {
  padding: 4px 9px; border-radius: 7px;
  background: var(--flaeche-hover); font-size: 12px; color: var(--text-stark);
}

/* Anlegen liegt in einer Kiste: die seltenste Handlung der Seite. */
details.anlegekiste {
  margin-bottom: 14px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 12px;
}
details.anlegekiste > summary {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 14px 18px; list-style: none;
}
details.anlegekiste > summary::-webkit-details-marker { display: none; }
details.anlegekiste > summary:hover { background: var(--flaeche-hover); border-radius: 12px; }
details.anlegekiste[open] > summary { border-bottom: 1px solid var(--linie); border-radius: 12px 12px 0 0; }
details.anlegekiste > summary svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--akzent); }
details.anlegekiste > summary .titel { display: block; font-size: 14px; font-weight: 600; }
details.anlegekiste > summary .dazu { display: block; font-size: 12px; color: var(--ruhig); }
details.anlegekiste form.anlegen { border: none; border-radius: 0; margin: 0; }

/* Die Praxiszeile: schneidet alles Folgende auf eine Praxis zu. */
nav.praxischips {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
nav.praxischips .wie {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ruhig); margin-right: 4px;
}
nav.praxischips a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 8px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); font-size: 13px; font-weight: 500; color: var(--ruhig);
}
nav.praxischips a:not(:has(.monogramm)) { padding-left: 12px; }
nav.praxischips a:hover { background: var(--flaeche-hover); color: var(--text); }
nav.praxischips a.aktiv {
  background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent-dunkel);
}
nav.praxischips a.beendet .name { text-decoration: line-through; }

/* Die gewählte Vereinbarung selbst -- nur mit Praxisfilter sichtbar. */
details.vereinbarungskopf {
  margin-bottom: 14px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 12px;
}
details.vereinbarungskopf.beendet { opacity: .7; }
details.vereinbarungskopf > summary {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 13px 16px; cursor: pointer; list-style: none;
}
details.vereinbarungskopf > summary::-webkit-details-marker { display: none; }
details.vereinbarungskopf > summary .wer { flex: 1 1 160px; min-width: 0; }
details.vereinbarungskopf > summary .wer .name { display: block; font-size: 15px; font-weight: 600; }
details.vereinbarungskopf > summary .wer .meta { display: block; font-size: 12px; color: var(--ruhig); }
details.vereinbarungskopf > summary .auf {
  flex: 0 0 auto; padding: 5px 12px; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--grund);
  font-size: 13px; font-weight: 500; color: var(--text-stark);
}
details.vereinbarungskopf[open] > summary .auf,
details.vereinbarungskopf > summary:hover .auf { background: var(--flaeche-hover); }
details.vereinbarungskopf > .inhalt {
  padding: 14px 16px 16px; border-top: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 10px;
}
details.vereinbarungskopf > .inhalt > .wie {
  display: block; margin: 0; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ruhig);
}
details.vereinbarungskopf .notiz { display: flex; gap: 6px; align-items: center; }
details.vereinbarungskopf .notiz input { flex: 1; min-width: 0; }
details.vereinbarungskopf p { margin: 0; }
/* Die Laufzeit ist eine AUSKUNFT („läuft offen"), das Beenden eine
   Handlung dahinter. Als Datumsfeld im Kopf las es sich wie eine Angabe,
   die zur Vereinbarung gehört -- sie braucht aber keine. */
.laufzeit { padding-top: 10px; border-top: 1px solid var(--linie); }
.laufzeit > p.zart { margin: 0 0 8px; }
.laufzeit details.aufklapp.gefahr > summary {
  display: inline-block; cursor: pointer; padding: 7px 13px;
  border: 1px solid #E4C3C3; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--warnung);
}
.laufzeit details.aufklapp.gefahr > summary:hover { background: var(--warnung-hell); }
.laufzeit form.beenden {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 9px;
}
.laufzeit form.beenden label { font-size: 12px; color: var(--ruhig); }
.laufzeit button svg { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.laufzeit details p.zart { margin: 8px 0 0; }
ul.blaetter li.archivzeile { border-style: dashed; }

/* Der Baum: Mit gewählter Praxis hängen die Karten als Äste an ihrer
   Vereinbarung. Der Stamm ist ein `border-left` an der Liste, die Elle
   je Karte ein `::before` -- zwei Regeln, kein Markup. Ohne Praxisfilter
   fehlt beides: Dann gehören die Karten keiner Praxis, sie vergleichen
   alle, und ein Stamm ohne Wurzel wäre eine falsche Behauptung. */
.baumliste { display: flex; flex-direction: column; gap: 12px; }
.baumliste.verzweigt {
  margin-left: 22px; padding-left: 20px;
  border-left: 2px solid var(--linie);
}
.baumliste.verzweigt > .karte { position: relative; }
.baumliste.verzweigt > .karte::before {
  content: ""; position: absolute; left: -22px; top: 26px;
  width: 20px; height: 2px; background: var(--linie);
}
/* Der Stamm beginnt unmittelbar unter der Vereinbarung, die ihn trägt. */
details.vereinbarungskopf:has(+ .baumliste.verzweigt) { margin-bottom: 0; }
.baumliste.verzweigt { margin-top: 12px; }

@media (max-width: 40rem) {
  .baumliste.verzweigt { margin-left: 8px; padding-left: 12px; }
  .baumliste.verzweigt > .karte::before { left: -14px; width: 12px; }
}

/* Die Blätter -- kurze Liste, also keine Tabelle. */
ul.blaetter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
ul.blaetter li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; border: 1px solid var(--linie);
  border-radius: 8px; background: var(--flaeche); font-size: 13px;
}
ul.blaetter li form.inzeile { margin-left: auto; }
form.blattablage { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
form.blattablage input[type="file"] { flex: 1 1 180px; min-width: 0; font-size: 12px; }

/* Der Sofort-Knopf sitzt IM summary; er darf nicht wie ein Aufklapper
   aussehen und braucht deshalb keinen eigenen Abstand nach rechts. */
.praxiszeile > summary form.sofort { margin: 0; }

@media (max-width: 40rem) {
  .praxiszeile > summary .auf { width: 100%; text-align: center; }
  form.sammelzeile input[type="date"] { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------
   Terminplan erzeugen (0123)

   Die Hinweise auf dieser Seite sind Kaesten und keine Pillen: `.hinweis`
   allein ist ein Abzeichen fuer EIN Wort (inline-block, Radius 999px,
   11px, fett), und ein ganzer Absatz darin sah aus wie ein zerlaufener
   Aufkleber -- dieselbe Lehre wie bei der Buchungsplanung. Das Symbol
   sitzt auf der Hoehe der ERSTEN Zeile und hat Schriftgroesse; ohne eine
   gesetzte Groesse fuellt ein SVG seinen Container (Flo, 28.09.2026:
   „das Symbol ist wieder viel zu gross und soll auf Schriftgroesse in
   eine Zeile").
   --------------------------------------------------------------------- */
.terminplanseite .hinweis, .dokumentansicht .hinweis, #verordnungsblatt .hinweis, .marketingseite .hinweis {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 12px; padding: 10px 13px;
  border-radius: var(--radius-klein);
  background: var(--akzent-hell); color: var(--akzent-dunkel);
  border: 1px solid #CFE0D9;
  font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.55;
}
.terminplanseite .hinweis.warn, #verordnungsblatt .hinweis.warn, .marketingseite .hinweis.warn {
  background: var(--warnung-hell); color: var(--warnung); border-color: #EBD2C7;
}
.terminplanseite .hinweis svg, .dokumentansicht .hinweis svg, #verordnungsblatt .hinweis svg, .marketingseite .hinweis svg {
  flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px;
}
.terminplanseite .hinweis p, .dokumentansicht .hinweis p, #verordnungsblatt .hinweis p { margin: 0; }
.terminplanseite .hinweis b, .terminplanseite .hinweis strong { font-weight: 600; color: inherit; }
.terminplanseite .hinweis code {
  font-family: var(--schrift-zahl); font-size: 12px;
  padding: 1px 4px; border-radius: 4px; background: rgba(27, 24, 16, .06);
}
.terminplanseite .hinweiszeile { margin: 0 0 6px; font-size: 12.5px; }

/* Die Kaestchenlisten sind volle Zeilen: Name links, Zahl rechts. Als
   schrumpfende Chips stand die Zahl mitten im Satz. */
.terminplanseite ol.probezeilen li { width: 100%; }
.terminplanseite ol.probezeilen .wahlzeile { flex: 1 1 auto; }
.terminplanseite ol.probezeilen .wann { margin-left: auto; padding-left: 12px; }

/* Der Fuss liegt hier IM Rumpf (wie bei der Aufgabe) und nicht als
   direktes Kind des Kastens -- `.dialogseite-kasten > .fuss` greift
   also nicht. */
.terminplanseite .fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie);
}
.terminplanseite .fuss .zart { flex: 1 1 14rem; font-size: 12.5px; }

/* Ein Formularraster mit Hinweis unter dem Feld: `.wie` waere hier die
   fette Beschriftung, der Hinweis ist `.zart` und steht darunter.

   NUR die Feld-Labels: `.wahlzeile`, `.chipwahl` und `.pillwahl` sind
   waagrechte Kaestchenzeilen, und eine Spalte daraus zu machen stellte
   das Haekchen ueber den Text. `fieldset.wahl label` setzt ausserdem
   `align-items: center` -- in einer Spalte zentriert das die
   Beschriftung ueber dem Feld, deshalb hier ausdruecklich linksbuendig. */
.terminplanseite form.raster label:not(.wahlzeile):not(.chipwahl):not(.pillwahl) {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  font-weight: 600; font-size: 13px;
}
.terminplanseite form.raster label:not(.chipwahl) > input:not([type="checkbox"]),
.terminplanseite form.raster label > select { font-weight: 400; width: 100%; }
.terminplanseite form.raster label > .zart { font-weight: 400; font-size: 12px; }
.terminplanseite form.raster > fieldset { margin: 0; }
/* `fieldset.wahl` zentriert seine Elemente -- richtig fuer eine Reihe
   Pillen, falsch fuer Felder mit Hinweis darunter. */
.terminplanseite fieldset.zeitraum { align-items: flex-start; gap: 12px 20px; }
.terminplanseite fieldset.zeitraum label { min-width: 12rem; }

/* Die Kaestchenlisten (Praxen, Verordnungen) sind die Probezeilen des
   Kalenders -- dieselbe Sache: eine Zeile, ein Haken, rechts eine Zahl. */
.terminplanseite ol.probezeilen { margin-top: 8px; }
.terminplanseite ol.probezeilen .wahlzeile input[type="checkbox"] { width: 13px; height: 13px; }
.terminplanseite ol.probezeilen .was strong { font-weight: 600; }
.terminplanseite .fuss .zart { margin-right: auto; max-width: 42ch; }

/* =====================================================================
   Therapiesicht (0126)
   =====================================================================
   Die Therapeutensicht aus dem Kalender: der Mensch, der Termin und das
   Nötige auf einer Seite. Nach dem Entwurf aus Claude Design, Projekt
   „H4M Therapiesicht" (Flo, 29.09.–01.10.2026) — Vorbild war die
   Wix-Ansicht „Patientenakte".

   Derselbe Rahmen wie Klientenakte und Vertrag (`.dialogseite-kasten`,
   `.kopf`, `.rumpf`, `.spalte`); neu ist nur, was darin steht. Flos
   Entwurf hat seine Regeln mehrfach angehängt („letzter gewinnt") --
   hier stehen sie zusammengefasst, damit jede Regel einmal da ist.
   ===================================================================== */

/* Breiter als Akte und Vertrag: Zwei Spalten Befund neben einem
   Ressourcenplan brauchen Platz, und das ist ein Arbeitsplatz. */
.dialogseite-kasten.therapiesicht { max-width: 1600px; }

/* OHNE RÜCKWEG steht die Seite allein. Normalerweise ist sie ein
   Overlay mit `zurueck=`, und das Kreuz führt dorthin zurück, wo man
   herkam (Flo, 01.10.2026: „Statt in einem neuen Tab bitte als Overlay,
   dass man beim Schließen wieder auf der gleichen Seite ankommt").

   Wer sie direkt aufruft -- aus einem Lesezeichen, oder weil jemand den
   Link doch in einem neuen Tab öffnet -- bekommt `.allein`: kein
   Schleier, kein Rand, volle Breite. Ein durchsichtiger Schleier nützt
   nur, wenn etwas dahinter liegt; allein wäre er ein grauer Rand um
   nichts. Dass das überhaupt geht, liegt daran, dass unsere Overlays
   keine `<dialog>`-Elemente sind, sondern echte Seiten mit eigener
   Adresse. */
body.allein .dialogseite-schleier { position: static; background: none; padding: 0; display: block; }
body.allein .dialogseite-kasten { max-width: none; height: 100vh; border-radius: 0; box-shadow: none; }

/* ---------------------------------------------------------------------
   Gruppentherapie: ein Reiter je Teilnehmer, ganz oben
   ---------------------------------------------------------------------
   Bei einem Gruppentermin behandelt man mehrere Menschen in derselben
   Stunde. Statt die Seite je Teilnehmer neu zu laden, stehen sie als
   Reiter über dem Kopf -- der Termin bleibt, der Mensch wechselt.
   --------------------------------------------------------------------- */
.gruppenreiter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 6px;
  padding: 10px 28px 0; background: var(--grund); border-bottom: 1px solid var(--linie);
}
.gruppenreiter .gruppe-info { flex: 1 1 100%; font-size: 12px; color: var(--ruhig); margin-bottom: 6px; }
.gruppenreiter .gruppe-info b { color: var(--text-stark); }
.preiter {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px 8px 10px; line-height: 1.2; margin-bottom: -1px;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ruhig);
  background: transparent; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--radius-klein) var(--radius-klein) 0 0; cursor: pointer; text-decoration: none;
}
.preiter:hover { color: var(--text); background: var(--flaeche-hover); }
.preiter[aria-selected="true"], .preiter[aria-current="page"] {
  color: var(--text); background: var(--flaeche); border-color: var(--linie);
  box-shadow: inset 0 2px 0 var(--akzent);
}
.preiter .kuerzel {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  font-size: 13px; font-weight: 700;
  background: var(--ton-sand-flaeche); color: var(--ton-sand-schrift);
}
/* Der Radius gehört ans Bild selbst: `overflow: hidden` am
   Grid-Container beschneidet ein ersetztes Element nicht zuverlässig. */
.preiter .kuerzel img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.preiter .kuerzel.gruen { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.preiter .kuerzel.rost  { background: var(--ton-rost-flaeche);  color: var(--ton-rost-schrift); }
.preiter .kuerzel.gold  { background: var(--ton-gold-flaeche);  color: var(--ton-gold-schrift); }
.preiter .kuerzel.blau  { background: var(--ton-blau-flaeche);  color: var(--ton-blau-schrift); }
.preiter .kuerzel.lila  { background: var(--ton-lila-flaeche);  color: var(--ton-lila-schrift); }
.preiter .kuerzel.rosa  { background: var(--ton-rosa-flaeche);  color: var(--ton-rosa-schrift); }
.preiter .hinweis {
  font-family: var(--schrift-zahl); font-size: 10.5px; font-weight: 700;
  padding: 0 6px; border-radius: 999px; background: var(--warnung-hell); color: var(--warnung);
}

.therapiesicht > .kopf .gesicht.gross { width: 96px; height: 96px; font-size: 30px; }
.therapiesicht > .kopf h1 { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.therapiesicht > .kopf h1 small { white-space: nowrap; }

/* Die Einwilligungen als Chip — grün erteilt, rot nicht. Was ein
   Therapeut wissen muss, bevor er das Handy zückt. */
.chip.foto { display: inline-flex; align-items: center; gap: 5px; }
.chip.foto.ja   { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.chip.foto.nein { background: var(--warnung-hell); color: var(--warnung); }

/* ---------------------------------------------------------------------
   Die Erinnerungen — als ZEILE, nicht als Einblender
   ---------------------------------------------------------------------
   Die Wix-Vorlage hat ein Popup, das nach 400 ms hereinfährt und
   weggeklickt wird. Ein Hinweis, den man wegklickt, ist beim nächsten
   Mal weg -- die Sache, auf die er zeigt, ist es nicht. Hier bleibt er,
   bis er erledigt ist, und jeder ist ein Anker auf seinen Block.
   Dasselbe Muster wie die Warnzeile des Kalenders (0104).
   --------------------------------------------------------------------- */
.merkzeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 28px; background: var(--warnung-hell); border-bottom: 1px solid #EBD2C7;
}
.merkzeile .was { font-size: 12.5px; font-weight: 600; color: var(--warnung); }
.merkzeile a.merk {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--flaeche); border: 1px solid #EBD2C7;
  font-size: 12px; font-weight: 600; color: var(--warnung); text-decoration: none;
}
.merkzeile a.merk:hover { background: #FCE4DA; }
.merkzeile a.merk.gut { border-color: #E8D6B0; background: var(--ton-gold-flaeche); color: var(--ton-gold-schrift); }

/* ---------------------------------------------------------------------
   Die Blöcke — alles untereinander, aufklappbar
   ---------------------------------------------------------------------
   `<details>`, also ohne Javascript bedienbar.
   --------------------------------------------------------------------- */
details.block { margin-bottom: 10px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); overflow: hidden; }
details.block > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; background: var(--grund); border-bottom: 1px solid transparent;
}
details.block > summary::-webkit-details-marker { display: none; }
details.block > summary:hover { background: var(--flaeche-hover); }
details.block[open] > summary { border-bottom-color: var(--linie); }
details.block > summary .pfeil { flex: 0 0 auto; color: var(--zart); transition: transform .14s; }
details.block[open] > summary .pfeil { transform: rotate(90deg); }
details.block > summary h2 {
  flex: 1 1 auto; margin: 0; font-family: var(--schrift);
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-stark);
}
details.block > summary .zaehler { flex: 0 0 auto; font-family: var(--schrift-zahl); font-size: 12px; color: var(--ruhig); }
details.block > summary .knoepfe { flex: 0 0 auto; display: flex; gap: 6px; }
details.block > .inhalt { padding: 10px 14px; }

/* Ein Block, hinter dem noch nichts liegt: sichtbar, aber abgeschaltet
   -- dieselbe Regel wie bei den Reitern der Klientenakte und den
   Knöpfen des Kalenders. Der Entwurf ist die Karte dessen, was kommt. */
details.block.spaeter > summary { opacity: .5; cursor: default; }
details.block.spaeter > summary .pfeil { visibility: hidden; }

/* Der Block, um den es gerade geht. */
details.block.jetzt { border-color: var(--akzent); }
details.block.jetzt > summary { background: var(--akzent-hell); }
details.block.jetzt > summary h2 { color: var(--akzent-dunkel); }

/* ---------------------------------------------------------------------
   HEUTE — der Termin, um den es geht
   --------------------------------------------------------------------- */
.heutezeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 10px; }
.heutezeile .zeit { font-family: var(--schrift-zahl); font-size: 17px; font-weight: 600; color: var(--text); }
.heutezeile .leistung { font-size: 14px; font-weight: 600; color: var(--text-stark); }
.heutezeile .wo { font-size: 12.5px; color: var(--ruhig); }
.heutezeile .rechts { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* Verordnung und Nachfolger als Ampel: Was muss ich wissen, bevor ich
   anfange? Grün heißt, es läuft; rot heißt, jemand muss etwas tun. */
.vozeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
  margin: -2px 0 10px; padding: 8px 12px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); font-size: 12.5px; color: var(--text-stark); text-decoration: none;
}
.vozeile:hover { background: var(--flaeche-hover); }
.ampel { display: inline-flex; align-items: center; gap: 7px; }
.ampel b { font-weight: 600; }
.ampel i { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ampel.gruen i { background: var(--ton-gruen-schrift); }
.ampel.gelb i  { background: var(--gold); }
.ampel.rot i   { background: var(--warnung); }
.ampel.rot { color: var(--warnung); }

.dokufeld { display: flex; flex-direction: column; gap: 6px; }
.dokufeld textarea {
  width: 100%; min-height: 110px; resize: vertical;
  font: inherit; font-size: 13.5px; line-height: 1.55;
  padding: 10px 12px; border: 1px solid var(--linie);
  border-radius: var(--radius-klein); background: var(--flaeche); color: var(--text);
}
.dokufeld textarea:focus { outline: none; border-color: var(--akzent); }
.dokufeld .fuss { display: flex; align-items: center; gap: 10px; }
.dokufeld .fuss .zart { margin-right: auto; }

/* Die letzte Dokumentation daneben — man schreibt selten ins Leere. */
.letztedoku {
  position: relative; margin-top: 10px; padding: 9px 40px 9px 12px;
  background: var(--grund); border-left: 2px solid var(--linie);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
.letztedoku .kopfzeile { font-size: 11px; font-weight: 600; color: var(--ruhig); margin-bottom: 3px; }
.letztedoku p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-stark); }
.letztedoku .formatiert { font-size: 12.5px; line-height: 1.55; color: var(--text-stark); }
.letztedoku.weiter { margin-top: 6px; }

/* Kopiersymbol: Wer die letzte Einheit fortschreibt, fängt oft mit dem
   an, was zuletzt dastand. */
.kopiersymbol {
  position: absolute; top: 6px; right: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 1px solid transparent;
  border-radius: var(--radius-klein); background: none; color: var(--ruhig); cursor: pointer;
}
.kopiersymbol:hover { background: var(--flaeche); border-color: var(--linie); color: var(--text-stark); }
.kopiersymbol.ok { color: var(--ton-gruen-schrift); background: var(--ton-gruen-flaeche); }
/* `.nur-mit-js` setzt `display: block` -- das Symbol bleibt mittig. */
body.mit-js .kopiersymbol { display: inline-flex; }

/* Die Ressourcen der Therapiesicht sind DIESELBE Leiste wie im Reiter
   „Ressourcen" eines Termins (`.zeitachse`, `.ressourcenzeile`,
   25.09.2026) -- dasselbe Teilstück `_ressourcenleiste.njk`, dieselben
   Feldnamen, dasselbe Skript (`oberflaeche.js`, Abschnitt 12). Ein
   eigener Plan stand hier bis zum 01.10.2026 und ist entfallen: Zwei
   Fassungen derselben Sache laufen auseinander, und das Ziehen findet
   seine Elemente über feste Klassen. Die paar Regeln, die der Rahmen
   der Therapiesicht dazu braucht, stehen bei den Blöcken. */
.therapiesicht .abschnittform, .therapiesicht .abschnitte { margin-top: 4px; }
.therapiesicht .probe .probezeilen { margin-top: 8px; }

/* ---------------------------------------------------------------------
   ZIELE & ASSESSMENTS — der Datenbereich, den es noch nicht gibt
   ---------------------------------------------------------------------
   Die Regeln stehen schon hier, damit der Block fertig ist, sobald die
   Tabellen da sind. Bis dahin steht er als `.spaeter` auf der Seite.
   --------------------------------------------------------------------- */
ul.zielliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
details.ziel { border: 1px solid var(--linie); border-left: 3px solid var(--akzent); border-radius: var(--radius-klein); background: var(--flaeche); }
details.ziel > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; padding: 9px 12px; }
details.ziel > summary::-webkit-details-marker { display: none; }
details.ziel > summary:hover { background: var(--grund); }
details.ziel[open] > summary { border-bottom: 1px solid var(--linie); }
details.ziel > summary .pfeil { flex: 0 0 auto; color: var(--zart); transition: transform .14s; }
details.ziel[open] > summary .pfeil { transform: rotate(90deg); }
details.ziel .titel { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.4; }
details.ziel > .inhalt { padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; }
details.ziel.faellig { border-left-color: var(--warnung); background: var(--warnung-hell); }
details.ziel.faellig > summary:hover { background: #FCE4DA; }
details.ziel.bald { border-left-color: var(--gold); }
details.ziel.zu { border-left-color: var(--linie); opacity: .72; }
.zielsatz { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-stark); }
.zielsatz.warn { color: var(--warnung); font-weight: 600; }
.planzeile { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--linie); }
.planzeile:first-child { border-top: 0; }
.planzeile .kat { flex: 0 0 8.5rem; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--akzent); padding-top: 2px; }
.planzeile .plan { flex: 1 1 auto; font-size: 12.5px; line-height: 1.5; color: var(--text-stark); white-space: pre-line; }
.asszeile { display: flex; flex-wrap: wrap; gap: 6px; }
.asskachel { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--grund); text-decoration: none; color: inherit; }
.asskachel:hover { background: var(--flaeche-hover); border-color: var(--zart); }
.asskachel.offen { border-style: dashed; background: var(--flaeche); }
.asskachel .kuerzel { font-family: var(--schrift-zahl); font-size: 12px; font-weight: 700; color: var(--text-stark); }
.asskachel .wert { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.asskachel .wert.gut { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.asskachel .wert.mittel { background: var(--ton-gold-flaeche); color: var(--ton-gold-schrift); }
.asskachel .wert.schlecht { background: var(--warnung-hell); color: var(--warnung); }
.asskachel .wert.neutral { background: var(--ton-sand-flaeche); color: var(--ton-sand-schrift); }
.asskachel .anzahl { font-family: var(--schrift-zahl); font-size: 10.5px; font-weight: 700; color: var(--flaeche); background: var(--ruhig); border-radius: 999px; padding: 0 5px; }
.asskachel .hinzu { font-size: 12px; font-weight: 600; color: var(--ruhig); }
/* Der Verlauf als Balkenreihe: vier Balken sagen „wird besser" oder
   „wird schlechter", und mehr soll eine Kachel nicht sagen. Keine
   Bibliothek, und die Höhe als Klasse statt als Inline-Stil. */
.verlauf { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; }
.verlauf i { width: 4px; border-radius: 1px; background: var(--zart); }
.verlauf i.h1 { height: 3px; } .verlauf i.h2 { height: 6px; }
.verlauf i.h3 { height: 9px; } .verlauf i.h4 { height: 12px; } .verlauf i.h5 { height: 15px; }
.verlauf i.jetzt { background: var(--akzent); }

/* ---------------------------------------------------------------------
   Anamnese im Kurzschnitt
   --------------------------------------------------------------------- */
.befundgruppe + .befundgruppe { margin-top: 12px; }
.befundgruppe > h3 { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--akzent); }
.befundzeile { display: flex; gap: 12px; padding: 3px 0; border-top: 1px solid var(--linie); }
.befundzeile:first-of-type { border-top: 0; }
/* `.feld` und `.text` sind in dieser Datei schon vergeben (Anamnese-
   Seite, 0069) und brächten Rand und Polsterung mit. Eigene Namen sind
   sauberer als ein Wettrennen um die Spezifität. */
.befundzeile .feldname { flex: 0 0 10rem; font-size: 12px; font-weight: 600; color: var(--ruhig); }
.befundzeile .feldtext { flex: 1 1 auto; font-size: 12.5px; line-height: 1.45; color: var(--text-stark); white-space: pre-line; }

/* ---------------------------------------------------------------------
   Kleinteile
   --------------------------------------------------------------------- */
.therapiesicht .filterzeile.eng { margin: 0 0 10px; }
.therapiesicht .block > .inhalt > .wie { margin: 14px 0 5px; }
.therapiesicht .block > .inhalt > .wie:first-child { margin-top: 0; }
.therapiesicht .block > .inhalt > details.aufklapp { margin-top: 10px; }
.therapiesicht .block > .inhalt > .alle-doku { display: inline-block; margin-top: 8px; font-size: 12px; }
.therapiesicht .ziel .inhalt > div > .wie { margin-bottom: 5px; }
.therapiesicht .befundgruppe + p.zart { margin-top: 10px; }
.therapiesicht details.weitere-doku, .therapiesicht details.dokuschnell { margin-top: 10px; }
.therapiesicht details.weitere-doku > summary, .therapiesicht details.dokuschnell > summary { font-size: 12.5px; font-weight: 600; }
.therapiesicht details.weitere-doku > summary .zart, .therapiesicht details.dokuschnell > summary .zart { font-weight: 400; }
.therapiesicht details.weitere-doku .alle-doku { display: inline-block; margin-top: 8px; font-size: 12px; }
.therapiesicht .dokuschnell .letztedoku:last-of-type { margin-bottom: 12px; }

@media (max-width: 60rem) {
  .befundzeile, .planzeile { flex-direction: column; gap: 2px; }
  .befundzeile .feldname, .planzeile .kat { flex: none; }
  .merkzeile, .gruppenreiter { padding-left: 16px; padding-right: 16px; }
  .resliste .reskopf { display: none; }
  .resliste .reswahl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resliste .was { grid-column: 1 / -1; }
}

/* Ein abgeschalteter Menüpunkt trägt eine Pille „später". Sie darf die
   Spalte nicht sprengen: Der Name ist die Auskunft, die Pille der
   Zusatz — also schrumpft die Pille zuerst. */
.therapiesicht .spalte .spaeter { display: flex; align-items: center; gap: 10px; min-width: 0; }
.therapiesicht .spalte .spaeter > span:not(.pille) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.therapiesicht .spalte .spaeter .pille { flex: 0 1 auto; min-width: 0; overflow: hidden; }

/* ---------------------------------------------------------------------
   Das Doku-Symbol der Terminkarte ist ein LINK (01.10.2026)
   ---------------------------------------------------------------------
   Flo: „Therapieansicht bitte über den Kalender öffnen wenn man auf das
   Doku Symbol klickt." Die Karte ist selbst ein `<a>` (sie führt ins
   Termin-Overlay), und ein Link im Link ist ungültiges HTML — der
   Browser wirft den inneren weg. Das Symbol liegt deshalb als
   GESCHWISTER in derselben Rasterzelle und darin oben rechts: optisch
   fast dort, wo es vorher in der Kopfzeile stand.

   `z-index` über der Karte, damit der Klick ihn trifft; der Rest der
   Karte führt weiterhin zum Termin.
   --------------------------------------------------------------------- */
.kalender .dokuknopf {
  grid-row-end: span 1;
  justify-self: end; align-self: start;
  z-index: 3; position: relative;
  margin: 2px 6px 0 0; padding: 2px;
  display: inline-flex; border-radius: 6px;
  color: var(--warnung); background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 0 1px rgba(142, 63, 38, .18);
}
.kalender .dokuknopf svg { width: 13px; height: 13px; }
.kalender .dokuknopf:hover { background: var(--flaeche); box-shadow: 0 0 0 1px var(--warnung); }
.kalender .dokuknopf.fertig { color: var(--ton-gruen-schrift); box-shadow: 0 0 0 1px rgba(36, 90, 75, .18); }
.kalender .dokuknopf.fertig:hover { box-shadow: 0 0 0 1px var(--ton-gruen-schrift); }
/* Bei zwei gleichzeitigen Terminen steht die Karte auf halber Breite --
   das Symbol gehört in dieselbe Hälfte. */
.kalender .dokuknopf.halb-links { grid-column: 1; }
.kalender .dokuknopf.halb-rechts { grid-column: 2; }

/* ---------------------------------------------------------------------
   ASSESSMENT-BOGEN — Zahlenzeile, Kommentar, Stoppuhr und Klicker
   ---------------------------------------------------------------------
   Der Bogen (0129) benutzt `.feld` und `.quelle` der Anamnese weiter;
   hier stehen nur die Stücke, die es dort nicht gibt.

   Die Eingabehilfen (0132) hängen an `.nur-mit-js` — ohne Javascript
   gibt es sie nicht, und das Zahlenfeld genügt. Die Wahrheit steht
   immer im Feld; Uhr und Zähler sind nur sein Bild.
   --------------------------------------------------------------------- */
.feld .zahlzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feld .zahlzeile input[type="number"] { width: 7rem; }
.feld .kommentarzeile { margin-top: 5px; width: 100%; font-size: 12.5px; }
.feld .kommentarzeile::placeholder { color: var(--zart); }

.eingabehilfe { display: inline-flex; align-items: center; gap: 5px; }
.eingabehilfe button {
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 10px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--text-stark); cursor: pointer;
}
.eingabehilfe button:hover { background: var(--flaeche-hover); border-color: var(--zart); }

/* Die laufende Zeit bzw. der Zählerstand: Zahlenschrift und feste
   Breite, damit die Zeile beim Hochlaufen nicht zuckt. */
.eingabehilfe .uhr, .eingabehilfe .zaehler {
  font-family: var(--schrift-zahl); font-size: 15px; font-weight: 700;
  color: var(--text-stark); min-width: 4.5rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
.eingabehilfe .zaehler { min-width: 2.8rem; text-align: center; }

/* Läuft die Uhr, ist der Knopf der auffällige — man sucht ihn im
   Behandlungsmoment und nicht vorher. */
.eingabehilfe.stoppuhr.laeuft .uhr { color: var(--akzent); }
.eingabehilfe.stoppuhr.laeuft .los {
  background: var(--akzent); border-color: var(--akzent); color: #fff;
}
.eingabehilfe.klicker .auf {
  background: var(--ton-gruen-flaeche); border-color: #CBDDD6; color: var(--ton-gruen-schrift);
}

/* ── Die Legende eines Verfahrens (0143) ─────────────────────────────
   Was die Punktzahl bedeutet: je Band ein Bereich und seine Deutung.
   Der Ton kommt aus `assessment_einstufung` und ist derselbe wie an der
   Kachel -- eine Farbe, zwei Orte, eine Bedeutung.                     */
details.legende {
  margin: 0 0 16px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); padding: 10px 14px;
}
details.legende > summary {
  font-weight: 600; font-size: 13px; cursor: pointer; color: var(--text-stark);
}
details.legende[open] > summary { margin-bottom: 8px; }
.legendenblock + .legendenblock { margin-top: 12px; }
.legendenblock h3 { font-size: 12px; margin: 0 0 5px; color: var(--ruhig); font-weight: 600; }
ul.baender { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
ul.baender li { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
ul.baender .band {
  flex: 0 0 auto; min-width: 5.5rem; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px;
  border-radius: 999px; padding: 2px 9px;
  background: var(--flaeche-hover); color: var(--ruhig);
}
ul.baender .band.gut      { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
ul.baender .band.mittel   { background: var(--ton-gold-flaeche);  color: var(--ton-gold-schrift); }
ul.baender .band.schlecht { background: var(--ton-rost-flaeche);  color: var(--ton-rost-schrift); }
ul.baender .was { color: var(--text); }

/* ── Texte aus den Formularen (0144) ─────────────────────────────────
   Einleitung über dem Bogen, Anleitung unter dem Abschnittskopf,
   Stufenerklärung an der Aufgabe bzw. als gemeinsame Skala.            */
.einleitung { margin: 0 0 12px; font-size: 13px; color: var(--text); max-width: 78ch; }
.anleitung {
  margin: 0 0 12px; font-size: 12.5px; color: var(--text); max-width: 78ch;
  padding: 8px 12px; border-left: 3px solid var(--akzent-hell); background: var(--flaeche);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}
details.stufenerklaerung { margin-top: 5px; font-size: 12px; }
details.stufenerklaerung > summary { cursor: pointer; color: var(--ruhig); }
dl.stufenliste { margin: 6px 0 0; display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 4px 12px; }
dl.stufenliste dt { font-weight: 600; font-size: 12px; display: flex; align-items: center; gap: 6px; }
dl.stufenliste dd { margin: 0; font-size: 12px; color: var(--text); max-width: 78ch; }
@media (max-width: 40rem) { dl.stufenliste { grid-template-columns: 1fr; } dl.stufenliste dd { margin-bottom: 6px; } }
svg.verlaufsbild { flex: 0 0 auto; background: var(--flaeche); border-radius: 4px; }
/* Auf der Plattformseite: die Beschreibung einer Stufe unter ihrer Zeile,
   eingerückt auf die Höhe der Beschriftung. */
textarea.stufenhinweis { height: auto; min-height: 2.2rem; margin: 2px 0 8px 3.2rem; width: calc(100% - 3.2rem); font-size: 12.5px; padding: 6px 10px; }
svg.verlaufsbild polyline { fill: none; stroke: #dc2626; stroke-width: 2; stroke-linejoin: round; }

/* Normwert neben der Kennzahl (0147): Ton aus dem Vergleich. */
.chip.norm { font-weight: 400; }
.chip.norm.gut      { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.chip.norm.schlecht { background: var(--ton-rost-flaeche);  color: var(--ton-rost-schrift); }

/* Zusammengesetzte Aufgabe (0149): eine Karte, die Teile nebeneinander,
   bei wenig Breite untereinander -- Zeit und FAS brauchen je ihren Platz. */
.aufgabengruppe { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.aufgabengruppe > .feldtitel { margin-bottom: 4px; }
.aufgabengruppe .teile { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 4px 18px; }
.aufgabengruppe .feld.teil { border: 0; padding: 4px 0; }
.aufgabengruppe .feld.teil > label { font-size: 12px; color: var(--ruhig); }

/* Der Vorspann des Bogens (07.10.2026): Anleitung/Bewertung und
   Auswertung als zwei Aufklapper, oben in der rechten Spalte. Er rollt
   mit dem Bogen und steht aufgeklappt in voller Länge -- eine eigene
   Rollfläche war zu eng (Flo). */
.vorspannbereich { margin: 0 0 16px; }
details.vorspann {
  margin: 0 0 8px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche); padding: 8px 14px;
}
details.vorspann > summary {
  cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 13px;
}
details.vorspann > summary .titel { font-weight: 600; color: var(--text-stark); }
details.vorspann > summary .kurz { color: var(--ruhig); font-size: 12.5px; }
details.vorspann[open] > summary { margin-bottom: 8px; }
details.vorspann[open] > summary .kurz { display: none; }
details.vorspann .einleitung { margin: 0 0 10px; }
.vorspannteil + .vorspannteil, .einleitung + .vorspannteil { margin-top: 10px; }
.vorspannteil > h3 { font-size: 12px; margin: 0 0 6px; color: var(--ruhig); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.vorspannteil .legendenblock h4 { font-size: 12px; margin: 0 0 5px; color: var(--ruhig); font-weight: 600; }

/* Die Rechenregel hat sich seit dem Abschluss geändert (0152). */
.ergebnishinweis {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 8px; padding: 10px 14px;
  background: var(--ton-gold-flaeche); color: var(--ton-gold-schrift);
  border-radius: var(--radius-klein); font-size: 13px; line-height: 1.5;
}
.ergebnishinweis svg { flex: 0 0 16px; margin-top: 2px; }
.ergebnishinweis p { margin: 0 0 4px; }
.ergebnishinweis ul.abweichungen { margin: 0 0 8px; padding-left: 18px; }
.ergebnishinweis form { margin: 0; }

/* Die Auswertung im Bogen: je Kennzahl eine Zeile. Die Hauptzahl kräftig. */
table.auswertungstabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
table.auswertungstabelle th { text-align: left; font-weight: 500; padding: 5px 10px 5px 0; white-space: nowrap; }
table.auswertungstabelle td { padding: 5px 10px 5px 0; vertical-align: baseline; }
table.auswertungstabelle td.wert { font-family: var(--schrift-zahl); font-weight: 600; white-space: nowrap; }
table.auswertungstabelle tr.haupt th, table.auswertungstabelle tr.haupt td.wert { font-weight: 700; }
table.auswertungstabelle tr + tr { border-top: 1px solid var(--linie); }
table.auswertungstabelle .band {
  display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600;
  background: var(--flaeche-hover); color: var(--ruhig);
}
table.auswertungstabelle .band.gut      { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
table.auswertungstabelle .band.mittel   { background: var(--ton-gold-flaeche);  color: var(--ton-gold-schrift); }
table.auswertungstabelle .band.schlecht { background: var(--ton-rost-flaeche);  color: var(--ton-rost-schrift); }

/* ── Die Schmerzkarte (0142) ─────────────────────────────────────────
   Zwei Körperumrisse nebeneinander; ein Klick setzt einen Punkt. Das
   Bild erzeugt der Server samt Punkten -- hier wird nichts positioniert,
   die CSP verwirft ohnehin jedes `style="…"`.                          */
.feld .feldtitel { font-weight: 600; font-size: 13px; margin: 0 0 6px; }
.koerperkarte { display: flex; gap: 22px; flex-wrap: wrap; }
.kartenseite { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kartenseite figcaption {
  font-size: 12px; font-weight: 600; display: flex; align-items: baseline; gap: 6px;
}
.kartenseite figcaption .ruhig { font-weight: 400; font-size: 11.5px; }
/* Der Umriss steht auf heller Fläche und zeigt mit dem Zeiger, dass er
   anklickbar ist -- ein Bild tut das von sich aus nicht. */
.kartenseite form { display: block; line-height: 0; }
/* KEINE Groesse hier: Die steht in den `width`/`height`-Attributen, und
   die rechnet der Server aus dem Seitenverhaeltnis des Umrisses. Eine
   Regel an dieser Stelle schluege die Attribute und naehme dem Browser
   den Platzhalter -- s. o. bei `input:not([type="image"])`. */
.kartenseite input[type="image"], .kartenseite img {
  padding: 4px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px;
}
.kartenseite input[type="image"] { cursor: crosshair; }
.kartenseite input[type="image"]:hover { border-color: var(--zart); }
.kartenseite input[type="image"]:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Je Punkt ein Knopf mit seiner Nummer -- dieselbe Nummer steht im
   Punkt, sonst wüsste niemand, welcher Knopf welchen meint. */
.punktliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.punktliste form { display: inline; line-height: normal; }
/* `height: auto` gegen die globalen 44 Pixel jedes Knopfes -- hier ist
   es ein Abzeichen und kein Knopf in Knopfgroesse. */
.punktliste .nr {
  height: auto; font: inherit; font-size: 11px; line-height: 1; cursor: pointer;
  background: var(--ton-rost-flaeche); border: 1px solid #E3C9C0; color: var(--ton-rost-schrift);
  border-radius: 999px; padding: 3px 7px;
}
.punktliste .nr:hover { background: #F6E3DC; }

/* ── Anamnesebogen im Rahmen der Therapiesicht (06.10.2026) ──────────
   Flo: „Können wir alle Menüpunkte in der Therapieansicht im Fenster der
   Therapieansicht öffnen." Der Bogen bringt eine eigene linke Spalte mit
   (die Sprungmarken je Befundgruppe) -- im Therapierahmen steht dort
   schon das Therapiemenü, also legt sie sich quer über den Bogen.
   Dieselbe Liste, nur andere Klassen (`_anamnese-gruppen.njk`).         */
.rumpf.quer { display: block; }
.rumpf.quer > .bogen { padding: 0; overflow: visible; }

nav.querleiste { border: 0; padding: 0 0 12px; margin: 0 0 14px;
  border-bottom: 1px solid var(--linie); }
nav.querleiste ul { display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0; }
nav.querleiste li { margin: 0; }
nav.querleiste a { display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); color: inherit; text-decoration: none;
  font-size: 12px; line-height: 1.2; }
nav.querleiste a:hover { background: var(--flaeche-hover); }
nav.querleiste .zahl { font-family: var(--schrift-zahl); font-size: 11px;
  color: var(--ruhig); }
nav.querleiste .zusatz { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin-top: 10px; }
nav.querleiste .zusatz .ueber { margin: 0; }
nav.querleiste .zusatz small { flex: 1 1 100%; }

/* ── Verlauf je Aufgabe (0129, Oberfläche 06.10.2026) ────────────────
   Zeilen sind Aufgaben, Spalten Messungen. Die Tabelle kann breit
   werden (MAL-30 hat sechzig Zeilen, FMA-OE dreiundsechzig), also
   rollt sie in ihrem `.tabellenrahmen` — und die erste Spalte bleibt
   dabei stehen, sonst weiß man beim Rollen nicht mehr, welche Aufgabe
   man liest.                                                          */
.verlaufstabelle th[scope="row"] { position: sticky; left: 0; z-index: 1;
  background: var(--flaeche); font-weight: 500; text-align: left;
  max-width: 26rem; }
.verlaufstabelle thead th:first-child { position: sticky; left: 0; z-index: 2;
  background: var(--flaeche); }
.verlaufstabelle td { white-space: nowrap; }
/* Die Hauptkennzahl ist die Zahl, die auf der Kachel steht. */
.verlaufstabelle tr.haupt th[scope="row"],
.verlaufstabelle tr.haupt td { font-weight: 600; }

/* ── Ziele und Trainingsplan (Oberfläche 07.10.2026) ─────────────────
   Die Karten selbst gibt es seit 0126 (`details.ziel`, `.planzeile`);
   hier kommt dazu, was die Liste und die Messverfahren brauchen.       */
/* `.zielliste` ist schon zweimal belegt -- die Sprungmarken des
   Anamnesebogens und die `ul` der Zielkarten aus 0126. Die Liste der
   Karten heisst deshalb `.zielkarten`: Ein dritter Sinn fuer denselben
   Namen waere eine Falle fuer den Naechsten.                           */
.zielkarten { display: flex; flex-direction: column; gap: 8px; }

/* Ein vorgesehenes Verfahren. `offen` heißt: noch nie gemessen — und das
   ist eine Aussage, keine Lücke (0139).                                */
.zielverfahren { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.zielverfahren .chip { display: inline-flex; align-items: center; gap: 6px; }
.zielverfahren .chip.offen { border-style: dashed; color: var(--ruhig); }
.zielverfahren .chip .zahl { font-family: var(--schrift-zahl); font-weight: 600; }
.zielverfahren .chip form.inzeile { display: inline; margin: 0; }
.zielverfahren .chip button { padding: 0 4px; line-height: 1; min-height: 0;
  border: 0; background: none; color: var(--ruhig); }
.zielverfahren .chip button:hover { color: var(--warnung); background: none; }

/* ---------------------------------------------------------------------
   Assessment-Bericht erzeugen und der Reiter Berichte (0153)

   Die Seite traegt `.terminplanseite` mit -- Hinweise, Kaestchenzeilen
   und Fuss sind dieselben. Hier steht nur, was dazukommt: je Verfahren
   eine Tabelle der Messungen mit der Reihe, und die Namen der Reihen.
   Die Farben der Reihen sind dieselben wie auf dem Blatt (`pdf.css`).
   --------------------------------------------------------------------- */
.berichtseite .reihe1 { --reihe: var(--akzent); }
.berichtseite .reihe2 { --reihe: var(--gold); }
.berichtseite .reihe3 { --reihe: var(--ton-blau-schrift); }
.berichtseite .reihe4 { --reihe: var(--ton-lila-schrift); }
.berichtseite .reihe5 { --reihe: var(--warnung); }

.berichtverfahren {
  width: 100%; margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche);
}
.berichtverfahren.aus { background: var(--grund); }
.berichtverfahren.aus table, .berichtverfahren.aus .reihennamen { opacity: .5; }
.berichtverfahren .kopfzeile { display: flex; width: 100%; gap: 8px; align-items: baseline; }
.berichtverfahren .kopfzeile .was { flex: 1 1 auto; }
.berichtverfahren .kopfzeile .wann { font-family: var(--schrift-zahl); font-size: 12px; color: var(--ruhig); }

table.berichtwahl { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; table-layout: fixed; }
/* Gleiche Spalten in jeder Tabelle -- sonst springt die Reihe je Verfahren. */
table.berichtwahl th:nth-child(1) { width: 26px; }
table.berichtwahl th:nth-child(2) { width: 7.5rem; }
table.berichtwahl th:nth-child(3) { width: 8rem; }
table.berichtwahl th:nth-child(5) { width: 5rem; }
table.berichtwahl th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--ruhig);
  padding: 0 8px 4px 0; border-bottom: 1px solid var(--linie);
}
table.berichtwahl td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--flaeche-hover); vertical-align: top; }
table.berichtwahl input[type="checkbox"] { width: auto; height: auto; margin: 2px 0 0; }
table.berichtwahl select { width: 4.2rem; height: 32px; padding: 0 6px; }
table.berichtwahl .zart { font-size: 12px; }

.reihennamen { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
/* Gegen die Spaltenregel der Formularlabels oben (`form.raster label:not(…)`)
   -- eine Reihe ist EINE Zeile: Marke, Name, Zahl. */
.terminplanseite form.raster .reihennamen label.reihenname:not(.wahlzeile) {
  flex-direction: row; align-items: center; gap: 8px; width: 100%; font-weight: 400;
}
.reihennamen input[type="text"] { flex: 1 1 auto; height: 34px; }
.reihenmarke {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px;
  width: 22px; height: 22px; border-radius: 999px; background: var(--reihe); color: #fff;
  font-size: 11px; font-weight: 700;
}

ul.berichtarten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ul.berichtarten li {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche);
}
ul.berichtarten li.spaeter { background: var(--grund); color: var(--ruhig); }
ul.berichtarten .symbolfeld svg { width: 22px; height: 22px; }
ul.berichtarten .was { flex: 1 1 auto; }
ul.berichtarten .was p { margin: 4px 0 0; font-size: 13px; }

@media (max-width: 40rem) {
  table.berichtwahl th:nth-child(4), table.berichtwahl td:nth-child(4) { display: none; }
}

/* Die Kommentare unter jeder Messung -- für den Bericht überschreibbar.
   Eine eigene Zeile der Tabelle, eingerückt unter das Datum; ohne
   Trennlinie zur Messung darüber, damit beides als eines gelesen wird. */
table.berichtwahl tr:has(+ tr.kommentarzeile) td { border-bottom: 0; padding-bottom: 2px; }
table.berichtwahl tr.kommentarzeile td { padding-top: 0; padding-bottom: 10px; }
.terminplanseite form.raster label.kommentarfeld:not(.wahlzeile) {
  gap: 2px; margin: 0 0 6px; font-weight: 400; width: 100%;
}
.berichtseite label.kommentarfeld .wie { font-size: 12px; font-weight: 500; color: var(--ruhig); }
.berichtseite label.kommentarfeld textarea {
  width: 100%; min-height: 32px; padding: 6px 10px; font: inherit; font-size: 13px; font-weight: 400;
  line-height: 1.45; resize: vertical;
}
/* Die Aufgabenkommentare stehen zugeklappt -- bei der BBS sind es schnell
   vier; aufgeklappt, sobald einer davon geändert ist. Ein geschlossenes
   <details> schickt seine Felder trotzdem mit. */
.berichtseite details.aufgabenkommentare { margin: 2px 0 0; }
.berichtseite details.aufgabenkommentare > summary {
  cursor: pointer; font-size: 12px; font-weight: 500; color: var(--akzent-dunkel); margin-bottom: 6px;
}
.berichtseite label.kommentarfeld .ton { font-size: 10.5px; }

/* =====================================================================
   Urkunde erzeugen (0154) -- die Seite vor dem Blatt
   ===================================================================== */

.terminplanseite fieldset.urkundenkopf { align-items: flex-start; gap: 12px 20px; }
.terminplanseite fieldset.urkundenkopf > label { min-width: 14rem; flex: 1 1 14rem; }
.terminplanseite fieldset.urkundenkopf > label.breit { flex-basis: 100%; }
.berichtseite textarea { width: 100%; font: inherit; font-weight: 400; padding: 6px 10px; resize: vertical; }

/* Das Foto der Titelseite: Kacheln mit Vorschaubild. Gegen die
   Spaltenregel der Formularlabels (`form.raster label:not(…)`) mit der
   höheren Spezifität, wie bei den Reihennamen. */
.fotowahl { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.terminplanseite form.raster .fotowahl label.fotokachel:not(.wahlzeile) {
  position: relative; flex-direction: column; align-items: flex-start; gap: 4px;
  width: 120px; padding: 8px; font-weight: 400; font-size: 12px; line-height: 1.3;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); cursor: pointer;
}
.fotowahl label.fotokachel:has(input:checked) { border-color: var(--akzent); box-shadow: 0 0 0 2px var(--akzent-hell); }
.fotowahl label.fotokachel input { position: absolute; top: 6px; right: 6px; width: auto; height: auto; margin: 0; }
.fotowahl label.fotokachel img,
.fotowahl label.fotokachel .leerbild {
  display: block; width: 102px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--grund);
}
.fotowahl label.fotokachel .leerbild { display: flex; align-items: center; justify-content: center; color: var(--ruhig); }
.fotowahl label.fotokachel .leerbild svg { width: 28px; height: 28px; }

/* Je Auszeichnung eine Karte: Kategorie, Titel, Foto nebeneinander, der
   Text darunter über die ganze Breite. */
ol.auszeichnungswahl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; counter-reset: ausz; }
ol.auszeichnungswahl > li {
  display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 2fr) minmax(10rem, 1.4fr); gap: 8px 12px;
  padding: 10px 12px 12px 36px; position: relative; counter-increment: ausz;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche);
}
ol.auszeichnungswahl > li::before {
  content: counter(ausz); position: absolute; left: 12px; top: 12px;
  font-family: var(--schrift-zahl); font-size: 12px; color: var(--ruhig);
}
ol.auszeichnungswahl > li > label.breit { grid-column: 1 / -1; }
@media (max-width: 52rem) {
  ol.auszeichnungswahl > li { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Medien bearbeiten (0157)
   ---------------------------------------------------------------------
   Das Foto wird auf einer Canvas bearbeitet (oberflaeche.js, Abschnitt
   15): links das Bild auf dunklem Grund -- an Helligkeit und Kontrast
   sieht man auf Weiss nicht, was man tut --, rechts die Werkzeuge. Die
   Canvas skaliert wie ein Bild: Breite und Hoehe `auto` mit zwei
   Obergrenzen haelt das Seitenverhaeltnis, und das Skript rechnet die
   Mausposition ueber `getBoundingClientRect()` zurueck. `touch-action`
   aus, sonst rollt ein Finger auf dem Tablet die Seite statt einen
   Rahmen aufzuziehen.
   --------------------------------------------------------------------- */
.dialogseite-kasten.bildbearbeitungsseite { width: min(1400px, 100%); }
body.mit-js .bildbearbeitung.nur-mit-js { display: grid; }
.bildbearbeitung { grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.bildbearbeitung .leinwandrahmen {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; border-radius: 14px; background: rgba(27, 24, 16, .92);
}
.bildbearbeitung .leinwand {
  display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto;
  cursor: crosshair; touch-action: none; border-radius: 4px;
}
.bildbearbeitung .leinwand.greifbar { cursor: move; }
.bildbearbeitung .leinwand.pixeln { cursor: cell; }
.bildbearbeitung .bbstatus { margin: 0; font-size: 13px; color: #E9E2D3; text-align: center; }
.bildbearbeitung .werkzeuge { display: flex; flex-direction: column; gap: 12px; }
.bildbearbeitung .werkzeuge .karte { padding: 14px 16px; }
.bildbearbeitung .werkzeuge .karte + .karte { margin-top: 0; }
.bildbearbeitung .werkzeuge h2 {
  margin: 0 0 10px; font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--akzent);
}
.bildbearbeitung .werkzeugwahl { display: flex; flex-wrap: wrap; gap: 6px; }
.bildbearbeitung .werkzeughilfe { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.45; }
.bildbearbeitung .formatwahl { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; }
.bildbearbeitung .formatwahl select { height: 34px; font-size: 14px; }
.bildbearbeitung .knopfreihe { display: flex; flex-wrap: wrap; gap: 6px; }
.bildbearbeitung .regler { display: block; font-size: 13px; }
.bildbearbeitung .regler + .regler { margin-top: 10px; }
.bildbearbeitung .regler .wie { display: flex; justify-content: space-between; color: var(--ruhig); }
.bildbearbeitung .regler output { font-family: var(--schrift-zahl); color: var(--text-stark); }
.bildbearbeitung input[type="range"] {
  height: 28px; padding: 0; border: 0; background: none; accent-color: var(--akzent);
}
.bbformular { margin-top: 20px; }
.bbformular .aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.bildbearbeitungsseite .bildvorschau { display: block; max-width: 100%; max-height: 60vh; margin-top: 14px; border-radius: 10px; }
@media (max-width: 60rem) {
  .bildbearbeitung { grid-template-columns: 1fr; }
}

/* In der Liste und im Lichtkasten: Der Knopf „Bild bearbeiten" haengt an
   `.nur-mit-js`, und das setzt `display: block` -- in einer Knopfzeile
   gehoert er in die Reihe. */
body.mit-js .medienliste .aktionen > .knopf.nur-mit-js { display: inline-flex; }
.lichtkasten.schau .schaufuss { align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
body.mit-js .lichtkasten.schau .schaufuss.nur-mit-js { display: flex; }
.lichtkasten.schau .schaufuss .zart { font-size: 12.5px; }

/* Der Abspielbereich eines Videos: zwei Zeitfelder unter dem Player, je
   mit einem Knopf, der die Stelle des Players uebernimmt (nur mit
   Javascript -- ohne tippt man die Zeit). */
.lichtkasten form.abspielbereich { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linie); }
form.abspielbereich .ueber {
  margin: 0 0 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--akzent);
}
form.abspielbereich .fehler { margin: 0 0 8px; }
form.abspielbereich .zeitfelder { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; }
form.abspielbereich .zeitfelder label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ruhig); }
form.abspielbereich .zeitfelder input { width: 7.5rem; height: 34px; font-family: var(--schrift-zahl); }
body.mit-js form.abspielbereich button.nur-mit-js { display: inline-flex; }
form.abspielbereich .aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
form.abspielbereich > .zart { margin: 8px 0 0; font-size: 12.5px; }
/* `form.raster` setzt `display: grid` und schlaegt damit `.nur-mit-js` --
   ohne Javascript stuende das Speicherformular ohne Editor da. */
.bbformular.nur-mit-js { display: none; }
body.mit-js .bbformular.nur-mit-js { display: grid; }

/* =====================================================================
   Datenbank in der Plattformverwaltung (0161): die Prüfliste „Bereit für
   echte Patientendaten?", die Meldekästen und die Bestätigungen.
   ===================================================================== */
.pruefliste { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.pruefliste li {
  display: grid; grid-template-columns: minmax(12rem, 1.1fr) 2fr auto auto;
  gap: 4px 14px; align-items: center; padding: 10px 0 10px 12px;
  border-bottom: 1px solid var(--linie); border-left: 3px solid transparent;
}
/* Die Farbe steht links als Streifen UND als Wort in der Pille -- nie allein. */
.pruefliste li.gruen { border-left-color: var(--ton-gruen-schrift); }
.pruefliste li.gelb  { border-left-color: var(--gold); }
.pruefliste li.rot   { border-left-color: var(--warnung); }
.pruefliste .titel { font-weight: 600; color: var(--text); text-decoration: none; }
.pruefliste .titel:hover { text-decoration: underline; }
.pruefliste .satz { font-size: 14px; color: var(--ruhig); min-width: 0; overflow-wrap: anywhere; }
.pruefliste .herkunft {
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--zart);
}
@media (max-width: 52rem) {
  .pruefliste li { grid-template-columns: 1fr auto; }
  .pruefliste .satz { grid-column: 1 / -1; grid-row: 2; }
  .pruefliste .herkunft { display: none; }
}
p.fussnote { font-size: 13px; margin-top: 14px; }
.fehlertext { color: var(--warnung); }

.meldekaesten { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 14px; }
.meldekasten { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 14px 16px; min-width: 0; }
.meldekasten.gescheitert { border-color: var(--ton-rost-flaeche); background: var(--warnung-hell); }
.meldekasten h3 { margin: 0 0 8px; font-size: 15px; }
.meldekasten p { margin: 0 0 8px; }
.meldekasten .mono { font-family: var(--schrift-zahl); font-size: 13px; }
/* Die Beschriftung darf umbrechen, der Wert bekommt den Rest -- sonst
   nimmt „Zeilensicherheit erzwungen" die halbe Breite, und ein Dateiname
   bricht Zeichen fuer Zeichen. */
.meldekasten dl.angaben.zugang { font-size: 13px; grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }
.meldekasten dl.angaben.zugang dt { font-size: 11px; }
.meldekasten dl.angaben.zugang dd { overflow-wrap: anywhere; min-width: 0; }

.bestaetigung { padding: 14px 0; border-top: 1px solid var(--linie); }
.bestaetigung:first-of-type { border-top: 0; }
.bestaetigung h3 { margin: 0 0 6px; font-size: 15px; }
.bestaetigung form.zeilenwahl { margin-top: 8px; }

/* Das rote „!“ am Menüpunkt Buchungsplanung (0162): Die Planung steht „in
   Änderung“. Es sitzt als Punkt an der Ecke des Symbols und nimmt dem Wort
   keinen Platz -- in der 216px-Spalte wurde aus „Buchungsplanung“ sonst
   „Buchungsplan…“. Ein Zeichen, kein Ton allein: `aria-label` sagt es dem
   Screenreader, `title` der Maus. */
.dialogseite-kasten .spalte li a { position: relative; }
.ausruf {
  position: absolute; left: 22px; top: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--warnung); color: #fff; box-shadow: 0 0 0 2px var(--flaeche);
  font-size: 10px; font-weight: 700; line-height: 1;
}

/* ---------------------------------------------------------------------
   Management › Umsatz (0164/0165): Auswertung, Prüfung, Verrechnungskonto.
   Kein eigener Entwurf in Claude Design -- gebaut aus Karte, `dl.zahlen`,
   `table.liste` und Filterchips. Kleiner Text heißt hier `.fein`:
   `.klein` ist eine Knopfgröße mit fester Höhe und schnitte Text ab.
   --------------------------------------------------------------------- */
.fein { font-size: 12px; line-height: 1.5; }
p.fein { margin: .6rem 0 0; }

.umsatzwahl .zeitwahl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.umsatzwahl .zeitraum { font-family: var(--schrift-titel); font-size: 22px; font-weight: 500; min-width: 10rem; text-align: center; }
.umsatzwahl .knopf.pfeil { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.umsatzwahl .chipfilter { margin: 0 0 0 8px; }
.umsatzwahl .filterzeile { margin: 0 0 0 auto; }
.umsatzwahl .filterzeile select { min-width: 8rem; }
.umsatzwahl > nav.filter { margin-top: 14px; }

.umsatzkopf { justify-content: space-between; align-items: center; margin-bottom: 4px; }
.umsatzkopf h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.umsatzkopf .mono { font-family: var(--schrift-zahl); font-size: 13px; color: var(--ruhig); }
.umsatzkopf .pille svg { vertical-align: -2px; margin-right: 3px; }
.umsatzerklaerung { margin: 1rem 0 0; font-size: 13px; line-height: 1.6; }

.fakturazeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie);
}
.fakturazeile > div { display: flex; flex-direction: column; gap: 2px; }
.fakturazeile strong { font-family: var(--schrift-zahl); font-size: 18px; font-weight: 500; }
.fakturazeile .ruhig { font-size: 12px; }
.fakturazeile a.pille { text-decoration: none; margin-left: auto; }
.fakturazeile a.pille svg { vertical-align: -2px; margin-right: 3px; }

/* Zahlen rechtsbündig -- sonst lassen sich Beträge nicht untereinander lesen. */
table.umsatztabelle th.zahl, table.umsatztabelle td.zahl { text-align: right; white-space: nowrap; }
table.umsatztabelle td .pille.fein { margin-top: 4px; font-size: 11px; padding: 2px 8px; }
table.umsatztabelle tr.storniert td { color: var(--ruhig); }
/* Die Storno-Pille traegt einen ganzen Satz -- mit `nowrap` (aus `.pille`)
   schob sie die Betragsspalten aus dem Rahmen. */
table.umsatztabelle .pille.umbruch { white-space: normal; }
table.umsatztabelle tr.storniert td.zahl { text-decoration: line-through; }
table.umsatztabelle form.inline { display: inline; margin: 0; }
table.umsatztabelle .aktionen details.aufklapp { display: inline-block; text-align: left; }
table.umsatztabelle .aktionen details.aufklapp[open] { display: block; }

/* Drei Tabellen nebeneinander, solange Platz ist -- sonst untereinander. */
.umsatzraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 28px; margin-top: .6rem; }
.umsatzraster > div { min-width: 0; }
.umsatzraster h3 { margin: .6rem 0 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ruhig); }
.umsatzraster table.liste { margin-top: .4rem; }
/* Zwei Karten nebeneinander (Buchen, Vertretungsanteil). */
.umsatzraster.zwei { margin-top: 16px; gap: 16px; }
.umsatzraster.zwei > .karte + .karte { margin-top: 0; }

ul.saldenliste { list-style: none; margin: .6rem 0 0; padding: 0; }
ul.saldenliste li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: .55rem 0; border-bottom: 1px solid var(--linie); font-size: 14px;
}
ul.saldenliste li:last-child { border-bottom: 0; }
.saldo { font-family: var(--schrift-zahl); font-weight: 600; }
.saldo.schuld { color: var(--warnung); }
.saldo.guthaben { color: var(--akzent-dunkel); }

/* Die Prüfung: je Hinweis ein Kasten mit Zahl, wie die Knöpfe unter dem Wix-Bericht. */
.pruefknoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: .8rem; }
a.pruefknopf {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--radius-klein);
  color: var(--ruhig); text-decoration: none; font-size: 13px; background: var(--flaeche);
}
a.pruefknopf strong { font-family: var(--schrift-zahl); font-size: 18px; font-weight: 500; color: var(--ruhig); }
a.pruefknopf:hover { background: var(--flaeche-hover); }
a.pruefknopf.offen { color: var(--text-stark); border-color: var(--ton-gold-schrift); background: var(--ton-gold-flaeche); }
a.pruefknopf.offen strong { color: var(--ton-gold-schrift); }
a.pruefknopf.schwer { color: var(--warnung); border-color: var(--warnung); background: var(--warnung-hell); }
a.pruefknopf.schwer strong { color: var(--warnung); }

.monatsreihe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .6rem; }
.monatsreihe a.pille { text-decoration: none; font-family: var(--schrift-zahl); }
.monatsreihe a.pille svg { vertical-align: -2px; margin-right: 3px; }

form.raster.kompakt { grid-template-columns: minmax(0, 1fr); min-width: 15rem; margin-top: .6rem; }

/* Der Verlauf (Umsatz › Verlauf): ein SVG mit Attributen -- die CSP
   verwirft Inline-Stil, also stehen die Farben hier. Das Paar ist gegen
   Farbsehschwäche, Kontrast und Sättigung geprüft (dataviz-Validator,
   09.10.2026): #0E7A5A nah am Akzent, #BF8330 nah am Gold. Das
   Markengrün selbst (#2F6F5E) ist als Diagrammfarbe zu grau. */
.verlaufsrahmen { overflow-x: auto; margin-top: .6rem; }
svg.verlaufschart { display: block; width: 100%; min-width: 640px; height: auto; }
svg.verlaufschart .gitter { stroke: var(--linie); stroke-width: 1; }
svg.verlaufschart .grundlinie { stroke: var(--zart); stroke-width: 1; }
svg.verlaufschart .achse { fill: var(--ruhig); font-family: var(--schrift-zahl); font-size: 11px; font-variant-numeric: tabular-nums; }
svg.verlaufschart .achse.jahr { fill: var(--zart); }
svg.verlaufschart .kappe { fill: var(--text-stark); font-family: var(--schrift-zahl); font-size: 11px; font-weight: 600; }
svg.verlaufschart .leer { fill: var(--zart); font-size: 11px; }
svg.verlaufschart .treffer { fill: transparent; }
.verlaufschart .eigen, .legende .eigen { fill: #0E7A5A; }
.verlaufschart .extern, .legende .extern { fill: #BF8330; }
svg.verlaufschart a.monat:hover .treffer, svg.verlaufschart a.monat:focus-visible .treffer { fill: var(--flaeche-hover); }
svg.verlaufschart a.monat:focus-visible { outline: none; }
ul.legende { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--ruhig); }
ul.legende li { display: inline-flex; align-items: center; gap: 6px; }
table.umsatztabelle tr.ohnezahl td { color: var(--ruhig); }
table.umsatztabelle .delta.auf { color: var(--akzent-dunkel); }
table.umsatztabelle .delta.ab { color: var(--warnung); }
table.verlaufsmatrix td.zart { color: var(--zart); }
table.verlaufsmatrix th:first-child, table.verlaufsmatrix td:first-child {
  position: sticky; left: 0; background: var(--flaeche); min-width: 11rem;
}
table.verlaufsmatrix td.zahl, table.verlaufsmatrix th.zahl { padding-left: 10px; }
table.verlaufsmatrix tfoot th { border-top: 1px solid var(--linie); padding-top: .6rem; }

@media (max-width: 60rem) {
  .umsatzwahl .filterzeile { margin-left: 0; }
  .fakturazeile a.pille { margin-left: 0; }
}
table.verlaufsmatrix th .teilstand { color: var(--warnung); font-weight: 600; }

/* ---------------------------------------------------------------------
   Interne Termine (0176): Besprechung, Mitarbeitergespräch, Wartung,
   Team-Event. Der Lila-Ton aus den Ressourcen-Kategorien (0053) --
   kein Professionsblau, denn behandelt wird niemand --, und
   gestrichelt, wo man nur sieht, DASS die Zeit belegt ist.
   --------------------------------------------------------------------- */
.kalender .termin.intern {
  border-left-color: var(--ton-lila-schrift);
  background: var(--ton-lila-flaeche);
}
.kalender .termin.intern .kopf { background: rgba(79, 61, 120, .12); }
.kalender .termin.intern.belegt {
  border-style: dashed; border-left-style: solid; cursor: default;
  background: repeating-linear-gradient(135deg, var(--ton-lila-flaeche) 0 3px, var(--flaeche) 3px 6px);
}
.kalender .termin.intern.belegt:hover { box-shadow: none; }
.kalender .termin.intern .womit { display: flex; align-items: center; gap: 4px; color: var(--ruhig); }
.kalender .termin.intern .womit svg { flex: 0 0 auto; }
.marke.intern {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 600; line-height: 1.4;
  background: var(--ton-lila-flaeche); color: var(--ton-lila-schrift);
  border: 1px solid currentColor;
}
.marke.intern svg { width: 11px; height: 11px; }
.marke.vertraulich { display: inline-flex; align-items: center; color: var(--ton-lila-schrift); background: none; padding: 0; }

/* Die Spalten des eigenen Personals der Einheit: dieselbe Spalte, der
   Name der Einheit im Kopf in ihrer Tönung. */
.kalender .einheitspalte .behandler .firma.einheit { color: var(--ton-lila-schrift); font-weight: 600; }
.filterchip.umschalter { border-style: dashed; }
.filterchip.umschalter.aktiv { border-style: solid; }

/* Wer ist dabei (10.10.2026, Flo: „aufgeräumter"): je Praxis bzw.
   Einheit eine Zeile, die aufklappt -- Kürzel, Name, die Gewählten,
   ein Pfeil. Die Gewählten sind Pillen, und welche zu sehen ist,
   entscheidet das Kästchen an DERSELBEN Stelle in `.personen` (die
   Vorlage hält beide Listen gleich geordnet, das erste Kind ist
   „alle"). So stimmt die Zeile nach jedem Klick, ohne Javascript.
   Die Regeln reichen für 60 Personen je Praxis -- so viele nimmt das
   Formular auch an (`teil` wird auf 60 gekürzt). */
fieldset.teilwahl { display: grid; gap: 0; }
fieldset.teilwahl > legend { margin-bottom: 6px; }
.teilwahl .orggruppe { border: 1px solid var(--linie); border-top-width: 0; background: var(--flaeche); }
.teilwahl .orggruppe:first-of-type { border-top-width: 1px; border-radius: 10px 10px 0 0; }
.teilwahl .orggruppe:last-of-type { border-radius: 0 0 10px 10px; }
.teilwahl .orggruppe:only-of-type { border-radius: 10px; }
.teilwahl .orggruppe > summary {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; list-style: none;
  min-height: 38px;
}
.teilwahl .orggruppe > summary::-webkit-details-marker { display: none; }
.teilwahl .orggruppe > summary:hover { background: var(--flaeche-hover); }
.teilwahl .orggruppe .orgname { flex: 0 0 auto; min-width: 9rem; font-size: 13px; font-weight: 600; }
.teilwahl .orggruppe .gewaehlte { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.teilwahl .orggruppe .gewaehlte .pille { display: none; font-size: 11px; }
.teilwahl .orggruppe .gewaehlte .leer { color: var(--ruhig); font-size: 12px; }
.teilwahl .orggruppe .auf { flex: 0 0 auto; display: inline-flex; color: var(--ruhig); transition: transform .15s; }
.teilwahl .orggruppe:not([open]) .auf { transform: rotate(-90deg); }
.teilwahl .orggruppe .personen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 6px;
  padding: 4px 10px 10px 38px;
}
.teilwahl .orggruppe .personen label.chipwahl { justify-content: flex-start; }
.teilwahl .orggruppe .personen label.chipwahl.alle { grid-column: 1 / -1; justify-self: start; background: transparent; border: 1px dashed var(--linie); }
.teilwahl .orggruppe .personen label.chipwahl.alle:has(input:checked) { background: var(--akzent-hell); border-style: solid; border-color: var(--akzent); }
/* „alle" gewählt: die einzelnen Kästchen treten zurück, die Zeile sagt „alle". */
.teilwahl .orggruppe:has(input.alle:checked) .personen label.person { opacity: .5; pointer-events: none; }
.teilwahl .orggruppe:has(input.alle:checked) .gewaehlte > .pille.alle { display: inline-flex; }
.teilwahl .orggruppe:has(.personen input:checked) .gewaehlte > .leer { display: none; }
.orggruppe:has(.personen > :nth-child(2) input:checked) .gewaehlte > :nth-child(2),
.orggruppe:has(.personen > :nth-child(3) input:checked) .gewaehlte > :nth-child(3),
.orggruppe:has(.personen > :nth-child(4) input:checked) .gewaehlte > :nth-child(4),
.orggruppe:has(.personen > :nth-child(5) input:checked) .gewaehlte > :nth-child(5),
.orggruppe:has(.personen > :nth-child(6) input:checked) .gewaehlte > :nth-child(6),
.orggruppe:has(.personen > :nth-child(7) input:checked) .gewaehlte > :nth-child(7),
.orggruppe:has(.personen > :nth-child(8) input:checked) .gewaehlte > :nth-child(8),
.orggruppe:has(.personen > :nth-child(9) input:checked) .gewaehlte > :nth-child(9),
.orggruppe:has(.personen > :nth-child(10) input:checked) .gewaehlte > :nth-child(10),
.orggruppe:has(.personen > :nth-child(11) input:checked) .gewaehlte > :nth-child(11),
.orggruppe:has(.personen > :nth-child(12) input:checked) .gewaehlte > :nth-child(12),
.orggruppe:has(.personen > :nth-child(13) input:checked) .gewaehlte > :nth-child(13),
.orggruppe:has(.personen > :nth-child(14) input:checked) .gewaehlte > :nth-child(14),
.orggruppe:has(.personen > :nth-child(15) input:checked) .gewaehlte > :nth-child(15),
.orggruppe:has(.personen > :nth-child(16) input:checked) .gewaehlte > :nth-child(16),
.orggruppe:has(.personen > :nth-child(17) input:checked) .gewaehlte > :nth-child(17),
.orggruppe:has(.personen > :nth-child(18) input:checked) .gewaehlte > :nth-child(18),
.orggruppe:has(.personen > :nth-child(19) input:checked) .gewaehlte > :nth-child(19),
.orggruppe:has(.personen > :nth-child(20) input:checked) .gewaehlte > :nth-child(20),
.orggruppe:has(.personen > :nth-child(21) input:checked) .gewaehlte > :nth-child(21),
.orggruppe:has(.personen > :nth-child(22) input:checked) .gewaehlte > :nth-child(22),
.orggruppe:has(.personen > :nth-child(23) input:checked) .gewaehlte > :nth-child(23),
.orggruppe:has(.personen > :nth-child(24) input:checked) .gewaehlte > :nth-child(24),
.orggruppe:has(.personen > :nth-child(25) input:checked) .gewaehlte > :nth-child(25),
.orggruppe:has(.personen > :nth-child(26) input:checked) .gewaehlte > :nth-child(26),
.orggruppe:has(.personen > :nth-child(27) input:checked) .gewaehlte > :nth-child(27),
.orggruppe:has(.personen > :nth-child(28) input:checked) .gewaehlte > :nth-child(28),
.orggruppe:has(.personen > :nth-child(29) input:checked) .gewaehlte > :nth-child(29),
.orggruppe:has(.personen > :nth-child(30) input:checked) .gewaehlte > :nth-child(30),
.orggruppe:has(.personen > :nth-child(31) input:checked) .gewaehlte > :nth-child(31),
.orggruppe:has(.personen > :nth-child(32) input:checked) .gewaehlte > :nth-child(32),
.orggruppe:has(.personen > :nth-child(33) input:checked) .gewaehlte > :nth-child(33),
.orggruppe:has(.personen > :nth-child(34) input:checked) .gewaehlte > :nth-child(34),
.orggruppe:has(.personen > :nth-child(35) input:checked) .gewaehlte > :nth-child(35),
.orggruppe:has(.personen > :nth-child(36) input:checked) .gewaehlte > :nth-child(36),
.orggruppe:has(.personen > :nth-child(37) input:checked) .gewaehlte > :nth-child(37),
.orggruppe:has(.personen > :nth-child(38) input:checked) .gewaehlte > :nth-child(38),
.orggruppe:has(.personen > :nth-child(39) input:checked) .gewaehlte > :nth-child(39),
.orggruppe:has(.personen > :nth-child(40) input:checked) .gewaehlte > :nth-child(40),
.orggruppe:has(.personen > :nth-child(41) input:checked) .gewaehlte > :nth-child(41),
.orggruppe:has(.personen > :nth-child(42) input:checked) .gewaehlte > :nth-child(42),
.orggruppe:has(.personen > :nth-child(43) input:checked) .gewaehlte > :nth-child(43),
.orggruppe:has(.personen > :nth-child(44) input:checked) .gewaehlte > :nth-child(44),
.orggruppe:has(.personen > :nth-child(45) input:checked) .gewaehlte > :nth-child(45),
.orggruppe:has(.personen > :nth-child(46) input:checked) .gewaehlte > :nth-child(46),
.orggruppe:has(.personen > :nth-child(47) input:checked) .gewaehlte > :nth-child(47),
.orggruppe:has(.personen > :nth-child(48) input:checked) .gewaehlte > :nth-child(48),
.orggruppe:has(.personen > :nth-child(49) input:checked) .gewaehlte > :nth-child(49),
.orggruppe:has(.personen > :nth-child(50) input:checked) .gewaehlte > :nth-child(50),
.orggruppe:has(.personen > :nth-child(51) input:checked) .gewaehlte > :nth-child(51),
.orggruppe:has(.personen > :nth-child(52) input:checked) .gewaehlte > :nth-child(52),
.orggruppe:has(.personen > :nth-child(53) input:checked) .gewaehlte > :nth-child(53),
.orggruppe:has(.personen > :nth-child(54) input:checked) .gewaehlte > :nth-child(54),
.orggruppe:has(.personen > :nth-child(55) input:checked) .gewaehlte > :nth-child(55),
.orggruppe:has(.personen > :nth-child(56) input:checked) .gewaehlte > :nth-child(56),
.orggruppe:has(.personen > :nth-child(57) input:checked) .gewaehlte > :nth-child(57),
.orggruppe:has(.personen > :nth-child(58) input:checked) .gewaehlte > :nth-child(58),
.orggruppe:has(.personen > :nth-child(59) input:checked) .gewaehlte > :nth-child(59),
.orggruppe:has(.personen > :nth-child(60) input:checked) .gewaehlte > :nth-child(60),
.orggruppe:has(.personen > :nth-child(61) input:checked) .gewaehlte > :nth-child(61) { display: inline-flex; }
.teilwahl .orggruppe:has(input.alle:checked) .gewaehlte > .pille.wer { display: none; }
@media (max-width: 40rem) {
  .teilwahl .orggruppe .orgname { min-width: 0; }
  .teilwahl .orggruppe .personen { padding-left: 10px; }
}

/* Das Formular: Personen und Ressourcen je Herkunft gruppiert. */
.dialogseite-kasten.intern .personengruppe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px;
}
.dialogseite-kasten.intern .personengruppe > .zart { flex: 0 0 100%; font-size: 12px; font-weight: 600; }
.dialogseite-kasten.intern label.chipwahl.belegt { background: var(--warnung-hell); }
.dialogseite-kasten.intern .internwann { display: flex; align-items: center; gap: 6px; font-size: 15px; }
.dialogseite-kasten.intern ul.kurzliste { margin: .4rem 0 1rem; padding-left: 1.1rem; }
/* Wiederkehrende interne Termine (0177): die Zeile „Teil einer Serie",
   die Wahl „nur diesen / alle folgenden" und die Probeliste -- dieselbe
   `ol.probezeilen` wie bei „Serie prüfen" (0105), mit dem Kästchen
   vorne, weil hier jede Zeile wählbar ist. */
.dialogseite-kasten.intern .serienzeile {
  display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 10px;
  border-left: 3px solid var(--ton-lila-schrift); background: var(--ton-lila-flaeche); border-radius: 8px; font-size: 14px;
}
.dialogseite-kasten.intern .serienzeile svg { flex: 0 0 auto; color: var(--ton-lila-schrift); }
/* Im Kalender gezogen (10.10.2026): noch nicht gespeichert -- im Ton des
   Dropziels, nicht in Lila, denn es ist eine offene Handlung. */
.dialogseite-kasten.intern .serienzeile.gezogen { border-left-color: var(--akzent); background: var(--akzent-hell); }
.dialogseite-kasten.intern .serienzeile.gezogen svg { color: var(--akzent); }
.dialogseite-kasten.intern fieldset.umfang { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.dialogseite-kasten.intern fieldset.umfang .wie { flex: 0 0 100%; margin: 0; }
.dialogseite-kasten.intern .aufklapp.gefahr .kaestchen { font-size: 14px; }
.dialogseite-kasten.intern .aufklapp.verlaengern summary { display: inline-flex; align-items: center; gap: 6px; }
.dialogseite-kasten.intern .aufklapp.verlaengern form { display: grid; gap: 8px; max-width: 46rem; }
ol.serienliste { max-height: 22rem; overflow-y: auto; }
ol.serienliste li .kaestchen { display: inline-flex; align-items: center; gap: 6px; }
ol.serienliste li.kollision { border-color: var(--ton-gold-schrift); background: var(--ton-gold-flaeche); }
ol.serienliste li.ausgelassen, ol.serienliste li.fehler { background: var(--grund); color: var(--ruhig); }

ul.internliste { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 6px; }
ul.internliste li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px;
  border-left: 3px solid var(--ton-lila-schrift); background: var(--ton-lila-flaeche); border-radius: 8px; font-size: 14px; }

/* Die Wochentage einer Serie (0183): sieben Chips in einer Reihe, der
   Satz darunter über die ganze Breite. */
fieldset.wahl.wochentage .wie { flex-basis: 100%; margin: 0; }
/* Die Termine einer Serie zur Auswahl (0177) stehen über die ganze
   Breite: `fieldset.wahl` setzt seine Kinder in eine Reihe, und die Liste
   stand bis zum 12.10.2026 als schmale Spalte neben ihrem eigenen Satz --
   bei einer Bürozeit an drei Tagen sind es schnell zwölf Zeilen. */
fieldset.wahl.serienwahl > .wie,
fieldset.wahl.serienwahl > ol.probezeilen { flex-basis: 100%; }

/* Die Produkte der Service-Einheit (0184): eine Zeile je Produkt, die
   zum Bearbeiten aufklappt. */
ul.einheitprodukte { list-style: none; margin: 12px 0; padding: 0; border-top: 1px solid var(--linie); }
ul.einheitprodukte > li { border-bottom: 1px solid var(--linie); }
ul.einheitprodukte > li.aus summary strong { color: var(--ruhig); }
ul.einheitprodukte summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 2px; cursor: pointer; }
ul.einheitprodukte summary .beschreibung { flex-basis: 100%; padding-left: 34px; font-size: 13px; }
ul.einheitprodukte form { padding: 4px 0 16px; }

/* Gespräch der Service-Einheit (0184) im Formular des internen Termins:
   Produkt, die gewählten Klient:innen als Chips, darunter die Wahl. */
fieldset.wahl.gespraech { align-items: flex-end; }
fieldset.wahl.gespraech > label { flex: 1 1 260px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-weight: 600; font-size: 13px; }
fieldset.wahl.gespraech .klientwahl { flex: 1 1 320px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
fieldset.wahl.gespraech .klientwahl > label:not(.chipwahl) { flex: 1 1 240px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-weight: 600; font-size: 13px; }
fieldset.wahl.gespraech > .wie { flex-basis: 100%; margin: 0; }

/* Ein Gespräch der Einheit mit Klient:in (0184): grün statt lila -- hier
   kommt jemand, anders als zur Besprechung. */
.kalender .termin.intern.gespraech { border-left-color: var(--ton-gruen-schrift); background: var(--ton-gruen-flaeche); }
.kalender .termin.intern.gespraech .kopf { background: rgba(47, 111, 94, .12); }
.marke.intern.gespraech { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
ul.kurzliste.gespraeche li.aus strong { color: var(--ruhig); text-decoration: line-through; }
ul.einheitprodukte .zart { color: var(--ruhig); }

/* =====================================================================
   Die Vorschau eines Dokuments (0185)

   Links das Dokument auf grauem Grund, rechts die Kommentare -- beide
   rollen fuer sich, der Kopf steht. Die Seiten zeichnet Abschnitt 16 von
   `oberflaeche.js`; Groesse und Lage der Markierungen setzt das Skript
   ueber CSSOM, hier steht nur, wie sie aussehen.
   ===================================================================== */
.dialogseite-kasten.dokumentansicht { width: min(1600px, 100%); max-height: 100%; }
/* `hidden` setzt das Skript; ohne diese Zeile gewaenne `button {
   display: inline-flex }` bzw. `.nur-mit-js`, und der Knopf
   „Kommentieren" stuende dauerhaft da. */
.dokumentansicht [hidden] { display: none !important; }
.dokumentansicht > .kopf .wer { min-width: 0; }
.dokumentansicht > .kopf h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dokumentansicht > .kopf .aktionen .knopf { white-space: nowrap; }

.dokumentrumpf { display: flex; min-height: 0; }
.dokumentansicht .vorschau {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  background: #EDE7DC;
}
.dokumentansicht .vorschauleiste {
  flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
body.mit-js .dokumentansicht .vorschauleiste.nur-mit-js { display: flex; }
.dokumentansicht .vorschauleiste button.klein { min-width: 34px; justify-content: center; }
.dokumentansicht .vorschauleiste .zoomwert {
  min-width: 4.2em; text-align: center; font-family: var(--schrift-zahl); font-size: 12.5px; color: var(--text-stark);
}
.dokumentansicht .vorschauleiste .trenner { width: 1px; height: 22px; background: var(--linie); margin: 0 4px; }
.dokumentansicht .vorschauleiste .schalter {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-weight: 500; font-size: 13px; color: var(--text-stark); cursor: pointer;
}
.dokumentansicht .vorschauleiste .seitenstand { margin-left: auto; font-size: 12.5px; }

.dokumentansicht .seiten {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  outline: none;
}
/* Zentriert wird ueber die Raender, nicht ueber `align-items: center`:
   Das schoebe eine gezoomte Seite, die breiter ist als die Flaeche, nach
   BEIDEN Seiten hinaus, und den linken Teil erreichte kein Rollbalken. */
.dokumentansicht .seiten > * { margin-inline: auto; }
.dokumentansicht .seiten > .hinweis, .dokumentansicht .seiten > .vorschaustand { align-self: stretch; max-width: 60ch; margin: 0 auto; }
.dokumentansicht .seite {
  /* Die Variablen braucht die Textebene von PDF.js; `--scale-factor`
     setzt das Skript je Seite beim Zeichnen. */
  --scale-factor: 1;
  --user-unit: 1;
  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
  --scale-round-x: 1px;
  --scale-round-y: 1px;
  position: relative; flex: 0 0 auto;
  background: #fff; box-shadow: 0 1px 3px rgba(27, 24, 16, .18), 0 6px 18px rgba(27, 24, 16, .08);
}
.dokumentansicht .seite > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dokumentansicht .seite.bild img { display: block; max-width: 100%; }
body.mit-js .dokumentansicht .seite.bild img { max-width: none; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
/* Zwischen Zoom und Neuzeichnen gehoert die Textebene zu einem anderen
   Massstab -- unsichtbar, bis die Seite neu gezeichnet ist. */
.dokumentansicht .seite.veraltet > .textLayer { visibility: hidden; }
.dokumentansicht .seitenvideo { max-width: 100%; max-height: 100%; background: #000; border-radius: 8px; }

/* ---- Die Textebene ---------------------------------------------------
   Aus `pdfjs-dist/web/pdf_viewer.css` (Mozilla, Apache License 2.0),
   auf das gekuerzt, was Markieren und Kopieren brauchen. Die Spans sind
   durchsichtig und liegen genau ueber der Schrift auf der Canvas. */
.dokumentansicht .textLayer {
  position: absolute; inset: 0; overflow: clip; opacity: 1;
  text-align: initial; line-height: 1; letter-spacing: normal; word-spacing: normal;
  -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none;
  transform-origin: 0 0; caret-color: CanvasText; z-index: 1;
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
}
.dokumentansicht .textLayer :is(span, br) {
  color: transparent; position: absolute; white-space: pre; cursor: text;
  transform-origin: 0% 0%; -webkit-user-select: text; user-select: text;
}
.dokumentansicht .textLayer > :not(.markedContent),
.dokumentansicht .textLayer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.dokumentansicht .textLayer .markedContent { display: contents; }
.dokumentansicht .textLayer span[role="img"] { -webkit-user-select: none; user-select: none; cursor: default; }
.dokumentansicht .textLayer ::selection { background: rgba(47, 111, 94, .28); color: transparent; }
.dokumentansicht .textLayer br::selection { background: transparent; }
.dokumentansicht .textLayer .endOfContent {
  display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default;
  -webkit-user-select: none; user-select: none;
}
.dokumentansicht .textLayer.selecting .endOfContent { top: 0; }

/* ---- Markierungen der Kommentare -------------------------------------
   Ueber der Textebene, aber ohne Klicks: Sonst liesse sich markierter
   Text nicht noch einmal markieren. Ein Klick auf die Seite sieht im
   Skript nach, in welcher Markierung er liegt. */
.dokumentansicht .markierungen { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dokumentansicht .markierung {
  position: absolute; border-radius: 2px;
  background: rgba(198, 139, 60, .26); box-shadow: inset 0 -2px 0 rgba(198, 139, 60, .7);
  mix-blend-mode: multiply;
}
.dokumentansicht .markierung.aktiv { background: rgba(198, 139, 60, .45); box-shadow: 0 0 0 2px var(--gold); }
.dokumentansicht .markierung.entwurf {
  background: rgba(47, 111, 94, .16); box-shadow: none; outline: 2px dashed var(--akzent); outline-offset: 1px;
}
.dokumentansicht .seiten.rahmenmodus { cursor: crosshair; }
.dokumentansicht .seiten.rahmenmodus .textLayer { pointer-events: none; }
.dokumentansicht .seiten.rahmenmodus .seite { user-select: none; -webkit-user-select: none; }
.dokumentansicht .schwebeknopf {
  position: absolute; z-index: 5; height: 32px; padding: 0 12px; font-size: 13px;
  box-shadow: 0 6px 18px rgba(27, 24, 16, .22);
}

/* ---- Die Kommentarspalte ---------------------------------------------- */
.dokumentansicht .kommentarspalte {
  flex: 0 0 360px; min-width: 0; overflow-y: auto;
  padding: 18px 20px 24px; border-left: 1px solid var(--linie); background: var(--grund);
  display: flex; flex-direction: column; gap: 12px;
}
.dokumentansicht .kommentarspalte > .kastenkopf { display: flex; align-items: baseline; justify-content: space-between; }
.dokumentansicht .kommentarspalte > .kastenkopf h2 { margin: 0; }
.dokumentansicht .kommentarspalte > .meldung, .dokumentansicht .kommentarspalte > .fehler { margin: 0; }
.dokumentansicht .kommentarspalte .leer { margin: 0; }
ol.kommentare { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ol.kommentare .kommentar {
  padding: 12px 14px; border-radius: var(--radius-klein);
  background: var(--flaeche); border: 1px solid var(--linie);
  scroll-margin-top: 12px; transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
ol.kommentare .kommentar[data-bereiche] { cursor: pointer; }
ol.kommentare .kommentar:target, ol.kommentare .kommentar.aktiv { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(198, 139, 60, .25); }
.kommentar .zitat, .gewaehltestelle .zitat {
  margin: 0 0 8px; padding: 2px 0 2px 10px; border-left: 3px solid var(--gold);
  font-size: 13px; line-height: 1.5; color: var(--text-stark);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.kommentar .stelle { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; color: var(--ruhig); }
.kommentar .stelle svg { width: 14px; height: 14px; }
.kommentar .fliesstext { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-line; }
.kommentar .meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px;
  margin-top: 8px; font-size: 12px; color: var(--ruhig);
}
.kommentar .meta strong { color: var(--text-stark); font-weight: 600; }
.kommentar .handlungen { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: 12.5px; }
.kommentar .handlungen:empty { display: none; }
.kommentar .handlungen form.inline { display: inline; margin: 0 0 0 auto; }
.kommentar .handlungen a.zurstelle { color: var(--akzent); text-decoration: none; font-weight: 500; }
body.mit-js .kommentar .handlungen a.zurstelle.nur-mit-js { display: inline; }
.kommentar .handlungen button.link {
  height: auto; padding: 0; background: none; border: none; color: var(--ruhig);
  font-weight: 500; font-size: 12.5px; text-decoration: underline;
}
.kommentar .handlungen button.link:hover { background: none; color: var(--warnung); }

.dokumentansicht .kommentarform {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border-radius: var(--radius-klein); background: var(--flaeche); border: 1px solid var(--linie);
  scroll-margin-top: 12px;
}
.dokumentansicht .kommentarform label { margin: 0; }
.dokumentansicht .kommentarform textarea { min-height: 5.5rem; resize: vertical; }
.dokumentansicht .kommentarform .hilfe { margin: 0; font-size: 12px; line-height: 1.5; }
body.mit-js .dokumentansicht .kommentarform .hilfe .nur-mit-js { display: inline; }
.dokumentansicht .kommentarform button[type="submit"] { align-self: flex-start; }
.gewaehltestelle {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px 8px 10px;
  border-radius: 8px; background: var(--akzent-hell);
}
.gewaehltestelle[hidden] { display: none; }
.gewaehltestelle > div { flex: 1 1 auto; min-width: 0; }
.gewaehltestelle .ueber { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); }
.gewaehltestelle .zitat { margin: 4px 0 0; }
.gewaehltestelle button.zu { width: 28px; height: 28px; padding: 0; justify-content: center; background: none; color: var(--ruhig); border: 1px solid var(--linie); }
.dokumentansicht .kommentarspalte > .fuss { margin: auto 0 0; font-size: 12px; line-height: 1.5; }

/* Schmal: das Dokument oben, die Kommentare darunter -- beides rollt
   dann mit der Seite. */
@media (max-width: 60rem) {
  .dokumentrumpf { flex-direction: column; overflow-y: auto; }
  .dokumentansicht .vorschau { flex: 0 0 auto; min-height: 60vh; }
  .dokumentansicht .kommentarspalte { flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--linie); overflow: visible; }
  .dokumentansicht > .kopf { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   Die Verordnung eines Vertrags (0186) -- eine Zeile wie in der Ablage:
   Zeichen, Name und Datum, der Stempel als Pille, rechts die Knoepfe.
   Darunter die Wahl, eine andere zuzuordnen.
   --------------------------------------------------------------------- */
#verordnungsblatt .verordnungsblatt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 10px 12px; margin: 0 0 12px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
  background: var(--flaeche);
}
#verordnungsblatt .verordnungsblatt .zeichen { color: var(--akzent); display: inline-flex; }
#verordnungsblatt .verordnungsblatt .was { display: flex; flex-direction: column; gap: 2px; min-width: 12rem; flex: 1 1 14rem; }
#verordnungsblatt .verordnungsblatt .knoepfe { display: inline-flex; gap: 8px; align-items: center; margin-left: auto; }
#verordnungsblatt .verordnungsblatt form.inline { display: inline; margin: 0; }
#verordnungsblatt .verordnungswahl { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 6px; }
#verordnungsblatt .verordnungswahl label { flex: 1 1 22rem; margin: 0; }
#verordnungsblatt .fuss { margin: 12px 0 0; }
.pille.stempel { display: inline-flex; align-items: center; gap: 5px; background: var(--akzent-hell); color: var(--akzent-dunkel); }
.pille.stempel svg { flex: 0 0 12px; }

/* ---------------------------------------------------------------------
   Schulungen (0188/0189): die Liste unter Management › Personal, das
   Overlay einer Schulung und „Meine Schulungen".
   Karten statt Tabelle -- jede Schulung ist ein eigener Vorgang mit
   Zielgruppe und Stand. Der Fortschritt ist ein SVG-Rechteck mit
   `width`-Attribut (kein Inline-Stil, CSP).
   --------------------------------------------------------------------- */
ul.schulungsliste {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px;
}
.schulungskarte > a {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 16px 18px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); color: inherit; box-shadow: none;
  transition: background var(--uebergang), border-color var(--uebergang);
}
.schulungskarte > a:hover { background: var(--flaeche-hover); border-color: var(--zart); }
.schulungskarte.still { opacity: .6; }
.schulungskarte .kopfzeile { display: flex; align-items: flex-start; gap: 12px; }
.schulungskarte .was { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.schulungskarte .was strong { font-weight: 600; }
.schulungskarte .was .ruhig { font-size: 13px; }
.schulungskarte .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.schulungskarte p.fein { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--ruhig); }
.symbolfeld {
  flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--radius-klein); background: var(--akzent-hell); color: var(--akzent-dunkel);
}
.symbolfeld.gross { width: 58px; height: 58px; border-radius: 16px; }
.schulungskarte .stand { display: flex; flex-direction: column; gap: 6px; }
.schulungskarte .stand .zahlen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
svg.balken { width: 100%; height: 6px; border-radius: 3px; overflow: hidden; }
svg.balken .grund { fill: var(--flaeche-hover); }
svg.balken .voll { fill: var(--akzent); }
nav.filter .trenner { width: 1px; align-self: stretch; background: var(--linie); margin: 0 4px; }

/* Das Overlay. Die Felder stehen hier IN ihrer Beschriftung -- `font:
   inherit` gaebe ihnen sonst deren 13px und das Fett mit. */
.dialogseite-kasten.schulungsseite { width: min(1240px, 100%); }
.schulungsseite label > :is(input, select, textarea),
form.quizbogen label > textarea { font-weight: 400; font-size: 15px; margin-top: .3rem; }
.schulungsseite label > textarea { height: auto; padding: .6rem .8rem; line-height: 1.5; }
.schulungsseite .raster.innen > p.fein, .schulungsseite form.raster > p.fein { grid-column: 1 / -1; margin: 0; }
.schulungsseite fieldset.formblock { border: 0; margin: 0; padding: 0; min-width: 0; }
.schulungsseite .raster.innen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.schulungsseite .raster.innen .breit, .schulungsseite fieldset.formblock.breit { grid-column: 1 / -1; }
.schulungsseite fieldset.schaltbar > .raster { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.schulungsseite .mit-einheit { display: inline-flex; align-items: center; gap: 8px; }
.schulungsseite .mit-einheit input { width: 6rem; }
.schulungsseite fieldset.zielgruppe {
  border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px 14px 14px; margin: 0;
}
.schulungsseite fieldset.zielgruppe legend { padding: 0 6px; font-weight: 600; }
.schulungsseite fieldset.zielgruppe .zeile { display: grid; grid-template-columns: 7rem 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--linie); }
.schulungsseite fieldset.zielgruppe .zeile:first-of-type { border-top: 0; }
.schulungsseite fieldset.zielgruppe .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.schulungsseite .zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.schulungsseite details.aufklapp.karte > summary h2 { margin: 0; font-size: 18px; }
.schulungsseite details.aufklapp.karte { margin-bottom: 16px; }
details.aufklapp.gefahr.klein { margin-top: .4rem; }
details.aufklapp.gefahr.klein > summary { font-size: 13px; color: var(--warnung); }
details.aufklapp.gefahr.klein > form.reihe { margin-top: .5rem; }
.schulungsseite .karte + .karte { margin-top: 16px; }

ul.nachweisliste, ul.dateiliste { list-style: none; margin: .6rem 0 0; padding: 0; }
ul.nachweisliste li, ul.dateiliste li {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--linie);
}
ul.nachweisliste li:first-child, ul.dateiliste li:first-child { border-top: 0; }
ul.nachweisliste .was { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
ul.nachweisliste li.aufgehoben { opacity: .55; }
ul.nachweisliste li.aufgehoben .was strong { text-decoration: line-through; }
ul.dateiliste li svg { color: var(--akzent); }
ul.dateiliste li details { flex-basis: 100%; }

/* Wartung eines Geräts (0214): der Stand in einer Zeile, darunter das
   Wartungsbuch mit seinen Nachweisen. */
.wartungsstand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: .2rem 0 .8rem; }
#wartung > details.aufklapp { margin: .6rem 0; }
#wartung > details.aufklapp > summary { cursor: pointer; font-weight: 600; }
#wartung > details.aufklapp > form { margin-top: .8rem; }
#wartung h3 { margin: 1.2rem 0 .2rem; font-size: 15px; }
ul.wartungsbuch ul.dateiliste { margin-top: .3rem; }
ul.wartungsbuch ul.dateiliste li { padding: 4px 0; border-top: 0; }

.schulungsseite section.termin.still { opacity: .6; }
.schulungsseite .terminblock { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; margin-top: 12px; }
.schulungsseite .terminblock .wie { display: block; font-weight: 600; font-size: 13px; color: var(--text-stark); margin-bottom: .3rem; }
.schulungsseite .terminblock p { margin: .2rem 0; }
.schulungsseite .anwesenheit { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: .6rem; }

/* Das Quiz als Sammelformular: eine Karte je Frage, die Antworten mit
   ihrem Haekchen „richtig" davor. Leere Plaetze treten zurueck. */
ol.quizfragen { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: frage; display: flex; flex-direction: column; gap: 12px; }
ol.quizfragen > li { padding: 14px 16px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); }
ol.quizfragen > li.leer { background: var(--grund); border-style: dashed; }
ol.quizfragen label.frage { display: block; font-weight: 600; font-size: 13px; color: var(--text-stark); }
ol.quizfragen label.frage textarea { margin-top: .3rem; }
ol.quizfragen ul.antworten { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 6px 14px; }
ol.quizfragen ul.antworten li { display: flex; align-items: center; gap: 8px; }
ol.quizfragen label.richtig { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; margin: 0; }
ol.quizfragen label.richtig input { width: auto; margin: 0; }
.quizformular > button { margin-top: 1rem; }

/* „Meine Schulung": Lernstoff, Quizbogen, Ergebnis. */
.lernstoff { max-width: 78ch; }
.lerndatei { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.lerndatei video, .lerndatei img { max-width: min(100%, 960px); border-radius: var(--radius-klein); background: #000; }
.lerndatei img { background: none; border: 1px solid var(--linie); }
.lerndatei p { margin: 0; }
.lerndatei { width: 100%; }
.lerndatei p.lernkopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lerndatei p.entsperrt, #lernstoff p.entsperrt { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
#lernstoff p.entsperrt[hidden] { display: none; }

/* Der Folienmodus (0192): eine Folie auf einer dunklen Bühne, darunter die
   Leiste. Die Größe der Canvas setzt das Skript (CSSOM, kein Inline-Stil). */
figure.folien { margin: 0; width: 100%; max-width: 960px; }
figure.folien .buehne { position: relative; background: #2b2a27; border-radius: var(--radius-klein);
  min-height: 240px; padding: 0; overflow: hidden; }
body.mit-js figure.folien .buehne.nur-mit-js { display: flex; align-items: center; justify-content: center; }
figure.folien canvas { display: block; background: #fff; cursor: pointer; }
figure.folien .folienstand { position: absolute; inset: auto 0 12px; margin: 0; text-align: center;
  color: #e8e4dc; font-size: 13px; }
figure.folien .folienstand[hidden] { display: none; }
figure.folien .folienleiste { align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
body.mit-js figure.folien .folienleiste.nur-mit-js { display: flex; }
figure.folien .folienleiste button { height: 34px; min-width: 34px; padding: 0 12px; font-size: 13px; }
figure.folien .folienleiste button[data-folie="zurueck"],
figure.folien .folienleiste button[data-folie="weiter"] { font-size: 18px; padding: 0 10px; }
figure.folien .folienzahl { font-size: 13px; color: var(--text-stark); min-width: 9ch; text-align: center; }
figure.folien .folienname { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
figure.folien:focus { outline: none; }
figure.folien:focus-visible .buehne { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Im Vollbild: die Bühne nimmt den Schirm, die Leiste bleibt unten. */
figure.folien:fullscreen { max-width: none; background: #1d1c1a; display: flex; flex-direction: column;
  padding: 12px; box-sizing: border-box; }
figure.folien:fullscreen .buehne { flex: 1 1 auto; background: transparent; }
figure.folien:fullscreen .folienleiste { color: #e8e4dc; }
figure.folien:fullscreen .folienzahl, figure.folien:fullscreen .folienname, figure.folien:fullscreen a { color: #e8e4dc; }
.folienseite > .rumpf.allein figure.folien { max-width: none; }

/* =====================================================================
   Checklisten: Pre-, On- und Offboarding (0193) -- die Punkte eines
   Laufs, „Für Sie offen" und die Vorlage.
   ===================================================================== */
ul.checkpunkte { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
li.checkpunkt {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--linie);
}
li.checkpunkt:first-child { border-top: none; }
ul.checkpunkte.meine li.checkpunkt { grid-template-columns: minmax(0, 1fr) auto auto; }
li.checkpunkt .haken {
  width: 20px; height: 20px; border: 1.5px solid var(--linie-kraeftig, var(--linie)); border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1;
  color: #fff; margin-top: 1px;
}
li.checkpunkt.erledigt .haken, li.checkpunkt.automatisch .haken { background: var(--akzent); border-color: var(--akzent); }
li.checkpunkt.entfaellt .haken { background: var(--flaeche-hover); border-color: var(--linie); color: var(--ruhig); }
li.checkpunkt.entfaellt .was strong { text-decoration: line-through; color: var(--ruhig); font-weight: 500; }
li.checkpunkt.ueberfaellig .haken { border-color: var(--warnung); }
li.checkpunkt .was { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
li.checkpunkt .was strong { font-weight: 600; }
li.checkpunkt .pille { white-space: nowrap; }
li.checkpunkt details.beschreibung summary { cursor: pointer; color: var(--akzent-dunkel, var(--akzent)); }
li.checkpunkt details.beschreibung p { margin: 4px 0 0; max-width: 78ch; }
form.hakenform { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
form.hakenform input[type="text"] { width: 14rem; height: 34px; font-size: 13px; }
@media (max-width: 52rem) {
  li.checkpunkt { grid-template-columns: 22px minmax(0, 1fr); }
  ul.checkpunkte.meine li.checkpunkt { grid-template-columns: minmax(0, 1fr); }
  li.checkpunkt .pille, form.hakenform { grid-column: 2; justify-self: start; }
  ul.checkpunkte.meine li.checkpunkt .pille,
  ul.checkpunkte.meine form.hakenform { grid-column: 1; }
  form.hakenform input[type="text"] { width: 100%; }
}
.checklauf .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.checklauf .stand { display: flex; flex-direction: column; gap: 6px; max-width: 28rem; }
.checklauf.still { opacity: .7; }
.checklauf .laufaktionen { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* Die Vorlage: ein Punkt je Zeile, aufgeklappt das Formular. Links der
   Griff zum Ziehen (nur mit Javascript), rechts ↑/↓ (auch ohne). Die
   Punkte der Einheit stehen in einer Praxis grau dazwischen. */
ul.vorlagepunkte { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
ul.vorlagepunkte > li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 0 10px; align-items: start;
  border-top: 1px solid var(--linie); scroll-margin-top: 96px;
}
ul.vorlagepunkte > li:first-child { border-top: none; }
ul.vorlagepunkte > li > .punktzeile { grid-column: 2; min-width: 0; }
ul.vorlagepunkte > li > .griff {
  grid-column: 1; padding-top: 9px; color: var(--ruhig); cursor: grab; user-select: none;
  font-size: 16px; line-height: 1; text-align: center;
}
ul.vorlagepunkte > li > .griff:active { cursor: grabbing; }
ul.vorlagepunkte > li > .schieber { grid-column: 3; display: flex; gap: 4px; padding-top: 6px; }
ul.vorlagepunkte > li > .schieber button { height: 28px; min-width: 28px; padding: 0 6px; font-size: 14px; line-height: 1; }
ul.vorlagepunkte > li.fremd { background: var(--grund); }
ul.vorlagepunkte > li.fremd .punktzeile { color: var(--ruhig); }
ul.vorlagepunkte > li.fremd .punktzeile .titel { font-weight: 500; }
ul.vorlagepunkte > li.ziehend { opacity: .45; }
ul.vorlagepunkte > li.ziel-vor { box-shadow: inset 0 3px 0 var(--akzent); }
ul.vorlagepunkte.ziel-ende { box-shadow: inset 0 -3px 0 var(--akzent); }
ul.vorlagepunkte > li:target { background: var(--akzent-hell); transition: background 1.2s; }
.griffzeichen { color: var(--ruhig); }
.punktzeile > summary, ul.vorlagepunkte div.punktzeile {
  display: flex; flex-direction: column; gap: 4px; padding: 9px 0; list-style: none;
}
.punktzeile > summary { cursor: pointer; }
.punktzeile > summary::-webkit-details-marker { display: none; }
.punktzeile .titel { font-weight: 600; }
.punktzeile .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.punktzeile .chip.auto { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.punktzeile.still .titel { color: var(--ruhig); text-decoration: line-through; }
.punktzeile[open] { padding-bottom: 14px; }
.punktzeile[open] > summary { border-bottom: 1px dashed var(--linie); margin-bottom: 10px; }
form.punktform fieldset.frist { display: flex; gap: 8px; align-items: end; border: none; padding: 0; margin: 0; }
form.punktform fieldset.frist legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; }
form.punktform fieldset.frist input { width: 6rem; }
/* Schulung bzw. Dokumentenart nur, wenn die Prüfung danach fragt. */
form.punktform:not(:has(select[name="pruefung"] option[value="schulung"]:checked)) .nur-schulung,
form.punktform:not(:has(select[name="pruefung"] option[value="dokument"]:checked)) .nur-dokument { display: none; }
form.quizbogen ol { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
form.quizbogen legend .nummer { font-family: var(--schrift-zahl); color: var(--ruhig); margin-right: 4px; }
/* Offen ist blau -- die Akzentfarbe ist schon „erledigt". */
.pille.anstehend { background: var(--ton-blau-flaeche); color: var(--ton-blau-schrift); }
details.aufklapp > summary .fein { font-weight: 400; }
form.quizbogen fieldset { border: 0; margin: 0; padding: 0; }
form.quizbogen legend { font-weight: 600; color: var(--text-stark); margin-bottom: .4rem; padding: 0; }
form.quizbogen label.antwort { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 400; cursor: pointer; }
form.quizbogen label.antwort input { width: auto; height: auto; margin: 0; }
form.quizbogen > button { margin-top: 1.2rem; }
.quizergebnis.bestanden { border-color: var(--ton-gruen-schrift); background: var(--ton-gruen-flaeche); }
.quizergebnis.nicht { border-color: var(--warnung); background: var(--warnung-hell); }
ol.quizauswertung { list-style: none; margin: .6rem 0 1rem; padding: 0; }
ol.quizauswertung li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
ol.quizauswertung li .zeichen { display: inline-flex; }
ol.quizauswertung li.richtig .zeichen { color: var(--ton-gruen-schrift); }
ol.quizauswertung li.falsch .zeichen { color: var(--warnung); }

@media (max-width: 60rem) {
  .schulungsseite .raster.innen, .schulungsseite .terminblock { grid-template-columns: 1fr; }
  .schulungsseite fieldset.zielgruppe .zeile { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Umfragen (0191): Ergebnisbalken, Freitexte, der Fragen-Editor und der
   Bogen der Befragten. Das Overlay teilt sich die Regeln der Schulung
   (`.schulungsseite`).
   --------------------------------------------------------------------- */
ul.ergebnisbalken { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ul.ergebnisbalken li { display: grid; grid-template-columns: minmax(8rem, 16rem) 1fr 7rem; gap: 12px; align-items: center; }
ul.ergebnisbalken .was { font-size: 14px; }
ul.ergebnisbalken svg.balken { height: 10px; border-radius: 5px; }
ul.ergebnisbalken .zahl { font-size: 13px; color: var(--ruhig); text-align: right; }
.ergebnisfrage .kartenkopf h3 { font-size: 16px; }
.ergebnisfrage + .ergebnisfrage { margin-top: 14px; }
ul.freitexte { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ul.freitexte li { padding: 10px 14px; border-left: 3px solid var(--linie); background: var(--grund); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.umfrageseite .fragenzeile { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 10px; align-items: end; margin: .6rem 0; }
.umfrageseite .fragenzeile .kandidat { padding-bottom: 10px; }
.umfrageseite ol.quizfragen label.frage + .fragenzeile { margin-top: .8rem; }
.umfrageseite ol.quizfragen label.frage textarea { height: auto; padding: .6rem .8rem; font-weight: 400; font-size: 15px; }
.skalawahl { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
form.quizbogen label.antwort.stufe { padding: 4px 8px; border: 1px solid var(--linie); border-radius: var(--radius-klein); }
form.quizbogen label.antwort.freitext { display: block; }
form.quizbogen label.antwort.freitext textarea { height: auto; padding: .6rem .8rem; }
.hinweis-anonym { margin: .6rem 0 0; padding: 10px 14px; border-radius: var(--radius-klein); background: var(--ton-blau-flaeche); color: var(--ton-blau-schrift); font-size: 14px; }

@media (max-width: 60rem) {
  ul.ergebnisbalken li { grid-template-columns: 1fr; gap: 4px; }
  ul.ergebnisbalken .zahl { text-align: left; }
  .umfrageseite .fragenzeile { grid-template-columns: 1fr; }
}
/* Eine Frage oder ein Termintag ist ein Satz, kein Ueberschriftchen --
   `.karte h3` setzt Versalien mit Sperrung. */
.schulungsseite .kartenkopf h3 { text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 600; color: var(--text-stark); }
/* Was zur gewaehlten Art nicht passt, tritt zurueck -- ueber :has() an
   der gewaehlten Option, ohne Javascript. Ohne :has() steht alles da,
   und der Server verwirft, was nicht passt. */
.umfrageseite ol.quizfragen > li:not(:has(option[value="skala"]:checked)) .nur-skala { visibility: hidden; }
.umfrageseite ol.quizfragen > li:not(:has(option[value="einfach"]:checked)):not(:has(option[value="mehrfach"]:checked)) .nur-wahl { display: none; }
.dialogseite-kasten .spalte .zusatz small.warnsatz { color: var(--warnung); }


/* =====================================================================
   Marketing: Firmenschild und Logo (0196)

   Links die Angaben, rechts das Schild bzw. Logo, wie es herauskommt --
   dieselbe SVG-Zeichnung wie im PDF. Die Vorschau klebt beim Rollen,
   damit man beim Tippen unten im Formular oben noch sieht, was es tut.
   ===================================================================== */
.marketingseite {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 20px; align-items: start; margin-top: 1rem;
}
@media (max-width: 72rem) { .marketingseite { grid-template-columns: 1fr; } }
.marketingseite > form.karte { margin: 0; }
.marketingseite .vorschauspalte { position: sticky; top: 84px; display: grid; gap: 16px; align-content: start; }
.marketingseite .vorschauspalte > .karte { margin: 0; }
.marketingseite .vorschauspalte h2 { margin: 0 0 6px; font-size: 16px; }
@media (max-width: 72rem) { .marketingseite .vorschauspalte { position: static; } }
.marketingseite .hinweis p { margin: 0; }
.marketingseite .hinweis { margin: 12px 0 0; }
.marketingseite form .hinweis { margin: 0; }

.marketingseite fieldset.abschnitt {
  margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--linie);
  display: grid; gap: 12px;
}
.marketingseite fieldset.abschnitt:first-of-type { border-top: 0; padding-top: 0; }
.marketingseite fieldset.abschnitt > legend {
  padding: 0; margin: 0 0 6px; font-family: var(--schrift-titel); font-size: 17px; font-weight: 600;
  color: var(--text-stark);
}
.marketingseite fieldset.abschnitt > .raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.marketingseite fieldset.abschnitt > .raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.marketingseite fieldset.abschnitt > .raster > .breit { grid-column: 1 / -1; }
@media (max-width: 40rem) {
  .marketingseite fieldset.abschnitt > .raster,
  .marketingseite fieldset.abschnitt > .raster.drei { grid-template-columns: 1fr; }
}
.marketingseite fieldset.abschnitt small { display: block; margin-top: 4px; font-weight: 400; color: var(--ruhig); font-size: 12px; }
.marketingseite fieldset.abschnitt .zeile { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.marketingseite fieldset.abschnitt .zeile small { margin: 0; flex: 1 1 18rem; }
.marketingseite .wahl.senkrecht { display: grid; gap: 7px; }
.marketingseite .wahl.senkrecht label { display: flex; gap: 8px; align-items: baseline; font-weight: 400; margin: 0; }
.marketingseite .wahl.senkrecht input { width: auto; height: auto; margin: 0; }
.marketingseite .wahl.senkrecht .wie { font-size: 13px; font-weight: 600; color: var(--text-stark); }

/* Das Schild: ein Blatt Papier auf der Karte. */
figure.schildvorschau { margin: 0; }
svg.schildbild {
  display: block; width: 100%; height: auto; background: #FFFFFF;
  border: 1px solid var(--linie); border-radius: 3px;
  box-shadow: 0 1px 2px rgba(40, 30, 10, .06), 0 10px 28px rgba(40, 30, 10, .10);
}
figure.schildvorschau figcaption {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px;
  font-size: 12.5px; color: var(--ruhig);
}
figure.schildvorschau figcaption span { display: inline-flex; align-items: center; gap: 6px; }
figure.schildvorschau figcaption .farbfeld,
.logovorschau .farbfeld { width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }

/* Das Logo: groß auf weißem Grund, darunter in Briefkopf- und Signaturgröße. */
.logoflaeche {
  display: flex; justify-content: center; align-items: center;
  padding: 36px 28px; background: #FFFFFF;
  border: 1px solid var(--linie); border-radius: var(--radius-klein, 8px);
}
svg.logobild { display: block; width: 100%; height: auto; max-height: 300px; }
.logogroessen { display: flex; flex-wrap: wrap; gap: 22px 36px; align-items: flex-end; margin: 18px 0 6px; }
.logogroessen > div { display: grid; gap: 6px; justify-items: start; }
.logogroessen svg.logobild.mittel { width: auto; height: 52px; max-width: 100%; }
.logogroessen svg.logobild.klein { width: auto; height: 26px; max-width: 100%; }
/* Feld unter Beschriftung, in jeder Zeile auf derselben Höhe — wie in der
   Buchungsplanung. Als Block standen die Felder einer Reihe um ein paar
   Pixel versetzt. */
.marketingseite fieldset.abschnitt .raster > label { display: grid; gap: 4px; margin: 0; align-content: start; }
.marketingseite fieldset.abschnitt .raster > label.kandidat { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.marketingseite fieldset.abschnitt .raster > label.kandidat input { width: auto; height: auto; }
.marketingseite fieldset.abschnitt > label { display: grid; gap: 4px; margin: 0; max-width: 16rem; }

/* ---------------------------------------------------------------------
   Übernahme aus Wix (0201): Vorschau für Produkte und Ressourcen.
   Die Zuordnung (Firma, Beruf, Standort) als Raster aus Auswahlfeldern,
   darunter die Zeilen; was nicht angehakt ist, steht blass.
   --------------------------------------------------------------------- */
.wixzuordnung {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 14px 16px; margin: 1rem 0;
}
.wixzuordnung .fein { color: var(--ruhig); margin: .3rem 0 0; }
.karte .knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; }
.wixvorschau tr.abgewaehlt td { color: var(--ruhig); }
.wixvorschau tr.abgewaehlt td strong { font-weight: 500; }
.wixvorschau ul.hinweise {
  margin: .35rem 0 0; padding-left: 1rem;
  font-size: 12px; line-height: 1.5; color: var(--ruhig);
}
.wixvorschau td[data-spalte="Preise"] { white-space: nowrap; }
/* Personalakten aus der Mitarbeiter-Datei (0230): je Feld eine Pille, keine Werte. */
.aktevorschau .feldpillen { display: flex; flex-wrap: wrap; gap: 4px; }
.aktevorschau .feldpillen .pille { font-size: 11px; }
.aktevorschau td .fein { margin: .3rem 0 0; font-size: 12px; color: var(--ruhig); }
/* Ressourcen (0208): ein Geraet steht eingerueckt unter seinem Raum. */
table.liste tr.imraum td[data-spalte="Ressource"] { padding-left: 1.75rem; }
/* Ressourcen (0201, seit 15.10.2026 ein Standort je Zeile): die Wahl des Standorts. */
.wixvorschau td[data-spalte="Steht an"] select { min-width: 12rem; }
.wixvorschau td[data-spalte="Steht an"] .fein { margin: .3rem 0 0; font-size: 12px; color: var(--ruhig); }
.wixvorschau td[data-spalte="Steht an"] .ton { display: inline-block; margin-top: .3rem; }

/* ---------------------------------------------------------------------
   Support (0203): die Ticketliste, der Dialog „Ticket aufgeben" und das
   Ticket als Overlay mit seinem Verlauf.
   --------------------------------------------------------------------- */
nav.filter .trenner { width: 1px; align-self: stretch; background: var(--linie); margin: 0 4px; }
ul.ticketliste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 8px; }
a.ticketzeile {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 6px 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px;
  background: var(--flaeche); color: inherit; text-decoration: none;
}
a.ticketzeile:hover { background: var(--flaeche-hover); border-color: var(--zart); }
a.ticketzeile .nummer { font-family: var(--schrift-zahl); font-size: 13px; color: var(--ruhig); }
a.ticketzeile .was { display: grid; gap: 2px; min-width: 0; }
a.ticketzeile .was strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ticketzeile .was .fein, a.ticketzeile .wo .fein { color: var(--ruhig); }
a.ticketzeile .wo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
@media (max-width: 52rem) {
  a.ticketzeile { grid-template-columns: 1fr; }
  a.ticketzeile .wo { justify-content: flex-start; }
}
dialog.dialog.breit { width: min(46rem, calc(100vw - 40px)); }
/* Vier Kategorien (0238) -- zwei Spalten, sonst stünde eine allein in der zweiten Zeile. */
fieldset.kategoriewahl { border: 0; padding: 0; margin: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
fieldset.kategoriewahl legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--text-stark); }
label.kachelwahl {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px;
  border: 1px solid var(--linie); border-radius: 10px; cursor: pointer; font-weight: 400;
}
label.kachelwahl:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
label.kachelwahl input { width: auto; height: auto; margin-top: 3px; }
label.kachelwahl > span { display: grid; gap: 2px; }
label.kachelwahl .fein { color: var(--ruhig); }

ol.ticketverlauf { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 10px; }
ol.ticketverlauf .eintrag {
  border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; background: var(--flaeche);
}
ol.ticketverlauf .eintrag.einheit, ol.ticketverlauf .eintrag.plattform { background: var(--akzent-hell); }
ol.ticketverlauf .eintrag.notiz { background: var(--ton-sand-flaeche); border-style: dashed; }
ol.ticketverlauf .eintrag.ereignis { background: transparent; padding: 8px 14px; }
ol.ticketverlauf .wer { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
ol.ticketverlauf .wer .fein { color: var(--ruhig); }
ol.ticketverlauf p.fliesstext { margin: .5rem 0 0; }
ul.anhaenge { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
ul.anhaenge a { display: grid; gap: 4px; font-size: 13px; color: inherit; }
ul.anhaenge img {
  max-width: 220px; max-height: 140px; object-fit: contain; border-radius: 8px;
  border: 1px solid var(--linie); background: #fff;
}
.ticketseite .karte { margin-top: 1rem; }
.ticketseite { max-width: 880px; }
dialog.dialog.breit form.raster .knopfreihe { align-items: center; }

/* ---------------------------------------------------------------------
   Organigramm (0204): je Firma eine Karte, darin EIN Raster aus
   Personenkarten -- die Leitung zuerst, am Rand erkennbar -- mit drei
   Sorten Chips. Kompakt und mit den Farben der Profession seit dem
   15.10.2026 (Flo, im Designer „H4M Organigramm"): Der Kopf steht in einer
   Zeile, die Personenkarten sind klein, jede Praxis trägt am linken Rand
   einen Balken in der Farbe ihrer Profession (bei zwei geteilt, Muster der
   Vertragskarte), und ein Punkt steht vor jeder Profession und vor dem
   Beruf. Die Farbe ist ein SVG-fill aus dem Katalog -- kein Inline-Stil.
   --------------------------------------------------------------------- */
nav.filter.ansichtwahl { margin: 0; align-self: center; }
.orglegende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: .8rem 0 0; color: var(--ruhig); }
p.orglegende.orgberufe { margin-top: .4rem; }
.karte.orgfirma { padding: 14px 18px; }
.karte.orgfirma + .karte.orgfirma { margin-top: 10px; }
.orgfirma > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orgfirma > header > svg { width: 18px; height: 18px; color: var(--akzent); flex: 0 0 auto; }
.orgfirma > header > div:not(.pillen) { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.orgfirma > header h2 { margin: 0; font-size: 15px; }
.orgfirma > header .fein { color: var(--ruhig); font-size: 13px; }
.orgfirma > header .pillen { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.orgfirma > header .pille { padding: 2px 8px; font-size: 11px; }
.orgfirma.einheit { border-left: 4px solid var(--akzent); }
.orgfirma.eigene { box-shadow: 0 0 0 2px var(--akzent-hell); }
.orgfirma.praxis { position: relative; overflow: hidden; }
.orgfirma.praxis > svg.farbbalken { position: absolute; left: 0; top: 0; width: 4px; height: 100%; }
.orgberufe { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.orgberuf { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.orgberufe .farbfeld, li.orgkarte .fein .farbfeld {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 999px; border: 0;
}
li.orgkarte .fein .farbfeld { width: 7px; height: 7px; margin-right: 5px; vertical-align: 1px; }
ul.orgraster {
  list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
li.orgkarte {
  display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche);
}
/* Die Leitung trägt einen Rand im Akzent -- eine Fläche verschluckte die grünen Chips. */
li.orgkarte.leitung { border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); }
li.orgkarte .gesicht { width: 32px; height: 32px; font-size: 12px; }
li.orgkarte .wer { display: grid; gap: 0; min-width: 0; line-height: 1.3; }
li.orgkarte .name { font-weight: 600; color: var(--text-stark); font-size: 14px; }
li.orgkarte a.name { text-decoration: none; }
li.orgkarte a.name:hover { text-decoration: underline; }
li.orgkarte .fein { color: var(--ruhig); font-size: 12px; }
li.orgkarte .orgchips { margin-top: 3px; gap: 3px; }
li.orgkarte .orgchip { padding: 0 7px; font-size: 11px; }
.orgchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.orgchip {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.5;
  background: var(--ton-sand-flaeche); color: var(--ton-sand-schrift);
}
.orgchip.verantwortung { background: var(--ton-gruen-flaeche); color: var(--ton-gruen-schrift); }
.orgchip.zustaendigkeit { background: var(--ton-gold-flaeche); color: var(--ton-gold-schrift); }
.orgchip.spezialisierung { background: var(--ton-blau-flaeche, var(--akzent-hell)); color: var(--ton-blau-schrift, var(--akzent-dunkel)); }
/* Die Karte gibt es im Raster (li) und im Baum (div) -- dieselben Regeln. */
div.orgkarte {
  display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px; text-align: left;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche);
}
div.orgkarte.leitung { border-color: var(--akzent); box-shadow: inset 3px 0 0 var(--akzent); }
div.orgkarte .gesicht { width: 32px; height: 32px; font-size: 12px; }
div.orgkarte .wer { display: grid; gap: 0; min-width: 0; line-height: 1.3; }
div.orgkarte .name { font-weight: 600; color: var(--text-stark); font-size: 14px; }
div.orgkarte a.name { text-decoration: none; }
div.orgkarte a.name:hover { text-decoration: underline; }
div.orgkarte .fein { color: var(--ruhig); font-size: 12px; }
div.orgkarte .fein .farbfeld { flex: 0 0 auto; width: 7px; height: 7px; margin-right: 5px; vertical-align: 1px; border-radius: 999px; border: 0; }
div.orgkarte .orgchips { margin-top: 3px; gap: 3px; }
div.orgkarte .orgchip { padding: 0 7px; font-size: 11px; }
.orgkarte .orglinie { font-style: italic; }
p.orgohne { margin: 14px 0 0; color: var(--ruhig); }
/* Das Raster je Abteilung: eine Überschrift über jeder Gruppe. */
p.orgrasterkopf { margin: 12px 0 0; font-size: 12px; font-weight: 600; color: var(--text-stark); }
p.orgrasterkopf .fein { font-weight: 400; color: var(--ruhig); }
p.orgrasterkopf.ohne { color: var(--ruhig); font-weight: 500; }
p.orgrasterkopf + ul.orgraster { margin-top: 6px; }
/* Vorgesetzte von einem anderen Standort: gestrichelt, die Fläche wie der Grund. */
div.orgkarte.anderswo { border-style: dashed; border-color: var(--zart); background: var(--grund); }
div.orgkarte.anderswo.leitung { box-shadow: inset 3px 0 0 var(--zart); }
/* Vorgesetzte eines Treffers, die selbst nicht passen: blass, ohne Chips. */
div.orgkarte.kontext { border-style: dashed; background: var(--grund); }
div.orgkarte.kontext.leitung { border-color: var(--zart); box-shadow: inset 3px 0 0 var(--zart); }
div.orgkarte.kontext .name, div.orgkarte.kontext a.name { color: var(--ruhig); font-weight: 500; }

/* Die Abteilung an der Karte (0233) -- umrandet, damit sie sich von den
   Chips der drei Angaben abhebt; die Leitung im Akzent. */
.orgabtzeile { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.orgabt {
  display: inline-block; padding: 0 7px; border: 1px solid var(--linie); border-radius: 999px;
  font-size: 11px; line-height: 1.5; color: var(--text-stark); background: var(--flaeche); white-space: nowrap;
}
.orgabt.leitet { border-color: var(--akzent); color: var(--akzent-dunkel, var(--akzent)); font-weight: 600; }
/* Die Abteilungen im Kopf einer Firma: Wege in den Filter. */
nav.orgabteilungen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
nav.orgabteilungen > .fein { color: var(--ruhig); font-size: 12px; margin-right: 2px; }
nav.orgabteilungen a {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--linie);
  border-radius: 999px; font-size: 12px; color: var(--text-stark); text-decoration: none; background: var(--flaeche);
}
nav.orgabteilungen a:hover { border-color: var(--zart); }
nav.orgabteilungen a[aria-current] { border-color: var(--akzent); background: var(--akzent-hell); }
nav.orgabteilungen a .zahl { font-family: var(--schrift-zahl); font-size: 11px; color: var(--ruhig); }

/* ---------------------------------------------------------------------
   Die Linien zu den Vorgesetzten (0206): ein Baum aus verschachtelten
   Listen. Von oben nach unten: unter jeder Karte ein senkrechter Strich,
   darunter ein waagrechter über alle, die an sie berichten, und zu jeder
   ein Strich hinab -- gezeichnet mit ::before/::after, kein Javascript.

   Jede Ebene steht auf derselben Höhe (20.10.2026, Flo: „Wenn es einen
   Vorgesetzten gibt, diesen eine Ebene darüber darstellen"): Der Baum ist
   ein Raster mit einer Zeile je Ebene (`tiefe-N`, der Dienst rechnet N),
   und jede Liste darunter übernimmt die restlichen Zeilen als Subgrid.
   So bekommen alle Karten einer Ebene dieselbe Zeile -- auch über die
   Äste hinweg --, und die Karte füllt sie (gleich hoch, der Strich
   beginnt an ihrem unteren Rand). Spalten bleiben je Liste eigen.

   Der Rahmen der Abteilung (`.orgband`, am selben Tag: „jetzt müsste noch
   die Abteilung zusammengefasst werden") liegt in derselben Zeile hinter
   der Karte und reicht über ihren Rand hinaus. Jede Karte eines Teams
   zeichnet ihr Stück: das erste mit linkem Rand und Namen, das letzte mit
   rechtem, die dazwischen nur oben und unten, und jedes reicht bis an den
   Rand seines Platzes -- deshalb kein Abstand zwischen den Spalten,
   sondern Polsterung in jeder. Die Breite rechnet von der Mitte aus
   (50 % + halbe Karte + Rand), weil die Karte in einem breiteren Platz
   mittig steht.

   Der Rahmen rollt waagrecht, wenn der Baum breiter ist als die Seite;
   `width: max-content` mit Auto-Rändern zentriert, ohne den linken Teil
   unerreichbar zu machen. Am Telefon derselbe Baum eingerückt, die Linie
   von links.
   --------------------------------------------------------------------- */
.orgbaumrahmen { overflow-x: auto; margin-top: 12px; padding-bottom: 6px; }
.orgbandname { display: block; font-size: 11px; font-weight: 600; line-height: 14px; color: var(--ruhig); white-space: nowrap; }
ul.orgbaum, ul.orgbaum ul { list-style: none; margin: 0; padding: 0; }
ul.orgbaum li { position: relative; }
@media (min-width: 40rem) {
  ul.orgbaum {
    display: grid; grid-auto-flow: column; column-gap: 0;
    width: max-content; margin: 0 auto; padding-bottom: 12px;
  }
  ul.orgbaum > li { padding: 20px 14px 0; }
  ul.orgbaum.tiefe-1 { grid-template-rows: auto; }
  ul.orgbaum.tiefe-2 { grid-template-rows: repeat(2, auto); }
  ul.orgbaum.tiefe-3 { grid-template-rows: repeat(3, auto); }
  ul.orgbaum.tiefe-4 { grid-template-rows: repeat(4, auto); }
  ul.orgbaum.tiefe-5 { grid-template-rows: repeat(5, auto); }
  ul.orgbaum.tiefe-6 { grid-template-rows: repeat(6, auto); }
  ul.orgbaum.tiefe-7 { grid-template-rows: repeat(7, auto); }
  ul.orgbaum.tiefe-8 { grid-template-rows: repeat(8, auto); }
  ul.orgbaum.tiefe-9 { grid-template-rows: repeat(9, auto); }
  ul.orgbaum.tiefe-10 { grid-template-rows: repeat(10, auto); }
  ul.orgbaum.tiefe-11 { grid-template-rows: repeat(11, auto); }
  ul.orgbaum.tiefe-12 { grid-template-rows: repeat(12, auto); }
  /* Jede Person nimmt die Zeilen ihrer Liste, die Karte die erste davon. */
  ul.orgbaum li {
    grid-row: 1 / -1; display: grid; grid-template-rows: subgrid;
    grid-template-columns: auto; justify-items: center;
  }
  ul.orgbaum li > .orgkarte { grid-row: 1; grid-column: 1; align-self: stretch; width: 15rem; position: relative; z-index: 1; }
  ul.orgbaum li > ul {
    grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; grid-auto-flow: column;
    position: relative; padding-top: 16px;
  }
  ul.orgbaum ul > li { padding: 30px 14px 0; }
  /* senkrecht von der Karte hinab */
  ul.orgbaum ul::before {
    content: ''; position: absolute; top: 0; left: 50%; height: 16px;
    border-left: 1.5px solid var(--zart);
  }
  /* waagrecht über die Geschwister, senkrecht zu jeder Karte */
  ul.orgbaum ul > li::before, ul.orgbaum ul > li::after {
    content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 30px;
    border-top: 1.5px solid var(--zart); z-index: 2;
  }
  ul.orgbaum ul > li::after { right: auto; left: 50%; border-left: 1.5px solid var(--zart); }
  ul.orgbaum ul > li:first-child::before, ul.orgbaum ul > li:last-child::after { border-top: 0; }
  ul.orgbaum ul > li:last-child::before { border-right: 1.5px solid var(--zart); border-top-right-radius: 7px; }
  ul.orgbaum ul > li:first-child::after { border-top-left-radius: 7px; }
  /* Ein einziges Kind: ein gerader Strich -- der Abstand bleibt, sonst stünde es höher als seine Ebene. */
  ul.orgbaum ul > li:only-child::before { display: none; }
  ul.orgbaum ul > li:only-child::after { border-top: 0; border-top-left-radius: 0; }

  /* Der Rahmen der Abteilung: ein Stück je Karte, hinter ihr. */
  ul.orgbaum li > .orgband {
    grid-row: 1; grid-column: 1; align-self: stretch; justify-self: stretch;
    position: relative; z-index: 0; margin: -20px -14px -10px;
    background: var(--grund); border: 1px solid var(--linie); border-left: 0; border-right: 0;
  }
  ul.orgbaum li > .orgband.anfang {
    justify-self: end; width: calc(50% + 7.5rem + 24px); margin-left: 0;
    border-left: 1px solid var(--linie); border-radius: 10px 0 0 10px;
  }
  ul.orgbaum li > .orgband.ende {
    justify-self: start; width: calc(50% + 7.5rem + 24px); margin-right: 0;
    border-right: 1px solid var(--linie); border-radius: 0 10px 10px 0;
  }
  ul.orgbaum li > .orgband.anfang.ende {
    justify-self: center; width: calc(15rem + 20px); margin-left: 0; margin-right: 0;
    border-radius: 10px;
  }
  .orgbandname { position: absolute; top: 3px; left: 11px; }
  ul.orgbaum li > .orgband:not(.anfang) .orgbandname { display: none; }
}
@media (max-width: 39.99rem) {
  ul.orgbaum { display: grid; gap: 10px; }
  /* Am Telefon steht ein Team nicht nebeneinander -- die Abteilung als Zeile über jeder Karte. */
  ul.orgbaum li > .orgband { display: block; margin: 0 0 3px; }
  ul.orgbaum li > .orgband .orgbandname { position: static; }
  ul.orgbaum ul { margin-left: 15px; }
  ul.orgbaum ul > li { padding: 8px 0 0 16px; border-left: 1.5px solid var(--zart); }
  ul.orgbaum ul > li:last-child { border-left-color: transparent; }
  /* der Haken zur Karte: hinab und nach rechts */
  ul.orgbaum ul > li::before {
    content: ''; position: absolute; left: -1.5px; top: 0; width: 14px; height: 26px;
    border-left: 1.5px solid var(--zart); border-bottom: 1.5px solid var(--zart);
    border-bottom-left-radius: 7px;
  }
}

/* ---------------------------------------------------------------------
   Die Pflegeseite der Abteilungen (0233): eine Tabelle mit Formularen je
   Zeile (`form=`), ↑/↓ statt Ziehen.
   --------------------------------------------------------------------- */
table.abteilungen td { vertical-align: middle; }
table.abteilungen td input, table.abteilungen td select { min-width: 12rem; }
table.abteilungen td.verschieben { white-space: nowrap; width: 1%; }
table.abteilungen td.verschieben form, table.abteilungen td.knopfzelle form { display: inline-block; margin: 0 4px 0 0; }
table.abteilungen td.knopfzelle { white-space: nowrap; text-align: right; }
/* Stilllegen geht erst, wenn niemand mehr darin steht -- der Knopf sagt es im title. */
table.abteilungen td.knopfzelle button:disabled { opacity: .45; cursor: not-allowed; }
ul.schlicht { list-style: none; margin: .6rem 0 0; padding: 0; }
.karte ul.schlicht li.reihe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.karte ul.schlicht li.reihe form { margin: 0; }

dl.organgaben { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: .8rem 0 0; }
dl.organgaben dt { color: var(--ruhig); font-size: 13px; }
dl.organgaben dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
table.orgthemen td { vertical-align: top; }
table.orgthemen td.thema { width: 30%; font-weight: 600; color: var(--text-stark); }
table.orgthemen .orgwer { display: inline-block; margin: 0 14px 4px 0; }
table.orgthemen .orgwer .fein { color: var(--ruhig); margin-left: 4px; }

/* =====================================================================
   Anamnese: zwei Bögen, Zwischenüberschriften, Feldarten, Body Chart
   (0243)
   ===================================================================== */

/* Der erste Absendeknopf des Formulars -- den drückt die Eingabetaste.
   Unsichtbar, aber da: `display: none` nähme ihn manchem Browser als
   Vorgabe weg, und dann setzte die Eingabetaste einen Punkt aufs Bild. */
.vorgabeknopf {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none;
}

/* `.verlauf` heisst auch die kleine Verlaufsgrafik der Assessments
   (inline-flex, 15px hoch) -- sie zerdrueckte jedes aufgeklappte
   <details class="verlauf"> der Anamnese, auch den der Textfelder. */
.dialogseite-kasten details.verlauf { display: block; height: auto; }

.dialogseite-kasten .bogenwahl {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px;
}
.dialogseite-kasten .bogenwahl .chips { display: flex; gap: 6px; }
.dialogseite-kasten .bogenwahl .zart { font-size: 13px; }

/* Die Fahnen: rot und gelb, als kleines gefülltes Fähnchen. */
.fahne { display: inline-flex; flex: 0 0 auto; }
.fahne svg path:first-child { fill: currentColor; fill-opacity: .9; }
.fahne.rot  { color: #DC2626; }
.fahne.gelb { color: #CA9A04; }

.dialogseite-kasten .fahnenkarte { padding: 12px 16px; border-radius: 14px; margin: 0 0 16px; }
.dialogseite-kasten .fahnenkarte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dialogseite-kasten .fahnenkarte li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.dialogseite-kasten .fahnenkarte li .fahne { align-self: center; }
.dialogseite-kasten .fahnenkarte li a { color: var(--text-stark); text-decoration: none; }
.dialogseite-kasten .fahnenkarte li a:hover { text-decoration: underline; }
.dialogseite-kasten .fahnenkarte li.rot a { font-weight: 600; }
.dialogseite-kasten .fahnenkarte li .zart { font-size: 12px; }

.dialogseite-kasten .fahnenfeld .titel { font-weight: 600; }
.dialogseite-kasten .fahnenliste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.dialogseite-kasten .fahnenliste li { display: flex; align-items: center; gap: 8px; }
.dialogseite-kasten .fahnenliste li input { flex: 1 1 auto; min-width: 0; height: 36px; }
.dialogseite-kasten .fahnenliste li.neu .fahne { opacity: .35; }
.dialogseite-kasten .fahnenliste li.leer { font-size: 13px; }

/* Zwischenüberschrift einer Gruppe: eine Linie links bündelt ihre Felder. */
.dialogseite-kasten .befundabschnitt {
  margin-top: 16px; padding: 4px 0 2px 14px; border-left: 3px solid var(--linie);
}
.dialogseite-kasten .befundabschnitt > h3 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--text-stark);
}
.dialogseite-kasten .befundabschnitt .feld:first-of-type { margin-top: 8px; }
.dialogseite-kasten .icf {
  display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--flaeche-hover);
  font-family: var(--schrift-zahl); font-size: 11px; font-weight: 500; color: var(--ruhig); vertical-align: middle;
}
.dialogseite-kasten h2 .icf { font-size: 12px; }
.dialogseite-kasten .schwerpunkt {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px;
  background: var(--flaeche-hover); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-stark);
}
.dialogseite-kasten .schwerpunkt .farbfeld { width: 8px; height: 8px; border-radius: 999px; border: 0; margin: 0; }

/* Ja/Nein und Auswahl: Chips statt einer Liste. */
.dialogseite-kasten fieldset.wahlfeld { margin: 0; border: 0; border-top: 1px solid var(--linie); min-inline-size: 0; }
.dialogseite-kasten fieldset.wahlfeld > legend { float: left; width: 100%; padding: 0; margin-bottom: 6px; font-weight: 500; }
.dialogseite-kasten fieldset.wahlfeld .antworten { clear: both; display: flex; gap: 6px; flex-wrap: wrap; }
.dialogseite-kasten fieldset.wahlfeld label.chipwahl { margin: 0; padding: 5px 12px 5px 8px; font-size: 13px; }
.dialogseite-kasten fieldset.wahlfeld label.chipwahl:has(input:disabled) { cursor: default; opacity: .8; }
.dialogseite-kasten fieldset.wahlfeld .ergaenzung { margin-top: 8px; height: 36px; }

/* Meilensteine als Tabelle: Alter, Bemerkung. */
.dialogseite-kasten .befundabschnitt .tabellenrahmen { margin-top: 10px; }
.dialogseite-kasten table.meilensteine th[scope="row"] { font-weight: 500; white-space: nowrap; }
.dialogseite-kasten table.meilensteine td { width: 40%; }
.dialogseite-kasten table.meilensteine td:first-of-type { width: 22%; }
.dialogseite-kasten table.meilensteine input { width: 100%; height: 34px; }
.dialogseite-kasten table.meilensteine small { display: block; margin-top: 4px; font-size: 12px; }

/* ---- Body Chart ----------------------------------------------------- */
.dialogseite-kasten .bodychart .titel { font-weight: 600; }
.dialogseite-kasten .bodychart > .zart { margin: 4px 0 0; font-size: 13px; }

.bodychart .bc-werkzeuge {
  display: none; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 12px;
  padding: 6px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); width: fit-content;
}
body.mit-js .bodychart .bc-werkzeuge.nur-mit-js { display: flex; }
.bodychart .bc-werkzeuge .werkzeug {
  height: 34px; padding: 0 10px; gap: 6px; border-radius: 9px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--text-stark); border: 1px solid transparent;
}
.bodychart .bc-werkzeuge .werkzeug:hover { background: var(--flaeche-hover); }
.bodychart .bc-werkzeuge .werkzeug[aria-pressed="true"] {
  background: var(--akzent-hell); color: var(--akzent-dunkel); border-color: #C9DBD3;
}
.bodychart .bc-werkzeuge .farbknopf {
  width: 26px; height: 26px; min-width: 0; padding: 0; border-radius: 999px; overflow: hidden;
  border: 2px solid transparent; background: transparent;
}
.bodychart .bc-werkzeuge .farbknopf svg { width: 100%; height: 100%; border-radius: 999px; }
.bodychart .bc-werkzeuge .farbknopf[aria-pressed="true"] { border-color: var(--text-stark); box-shadow: 0 0 0 2px #fff inset; }
.bodychart .bc-werkzeuge .trenner { width: 1px; height: 22px; background: var(--linie); margin: 0 4px; }

/* Vier Ansichten (0245): gleich hoch, die Breite folgt dem Umriss. */
.bodychart .bc-ansichten { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.bodychart .bc-ansicht { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bodychart .bc-ansicht .bc-bild {
  display: block; width: auto; height: auto; padding: 0; margin: 0;
  border: 1px solid var(--linie); border-radius: 12px; background: #fff; cursor: crosshair;
}
.bodychart .bc-ansicht img.bc-bild { cursor: default; }
.bodychart .bc-ansicht figcaption { font-size: 12px; color: var(--ruhig); }
/* Die Zeichenfläche des Skripts liegt genau über dem Bild. */
/* 1px: der Rand des Bildes. */
.bodychart .bc-ansicht svg.bc-flaeche {
  position: absolute; left: 1px; top: 1px; touch-action: none; cursor: crosshair;
  border-radius: 11px;
}
.bodychart .bc-ansicht svg.bc-flaeche .hervor { filter: drop-shadow(0 0 4px rgba(0, 0, 0, .45)); }
.bodychart .bc-ansichten.klein { gap: 10px; }
.bodychart .bc-ansichten.klein .bc-ansicht img { width: auto; height: 220px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; }

.bodychart .bc-neu {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 13px;
}
body.mit-js .bodychart .bc-neu.nur-ohne-js { display: none; }
.bodychart .bc-neu select { width: auto; height: 34px; }
.bodychart .bc-neu input { flex: 1 1 14rem; min-width: 0; height: 34px; }
.bodychart .bc-neu small { flex-basis: 100%; }

.bodychart .bc-legende { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.bodychart .bc-zeile {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px;
}
.bodychart .bc-zeile.hervor { background: var(--flaeche-hover); }
.bodychart .bc-zeile .bc-nr { flex: 0 0 auto; }
.bodychart .bc-zeile .bc-art { flex: 0 0 9rem; font-size: 12px; color: var(--ruhig); }
.bodychart .bc-zeile input.bc-text { flex: 1 1 auto; min-width: 0; height: 34px; }
.bodychart .bc-zeile span.bc-text { flex: 1 1 auto; font-size: 14px; }
.bodychart .bc-zeile select.bc-farbe { flex: 0 0 auto; width: auto; height: 34px; }
.bodychart .bc-zeile .bc-weg { margin: 0; font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.bodychart .bc-zeile .bc-weg input { width: auto; height: auto; }
body.mit-js .bodychart .bc-zeile .bc-weg { display: none; }
.bodychart .bc-zeile .bc-entfernen {
  flex: 0 0 auto; width: 30px; height: 30px; min-width: 0; padding: 0; border-radius: 8px;
  background: transparent; color: var(--ruhig); border: 1px solid var(--linie);
}
body.mit-js .bodychart .bc-zeile .bc-entfernen.nur-mit-js { display: inline-flex; align-items: center; justify-content: center; }
.bodychart .bc-zeile .bc-entfernen:hover { color: var(--warnung); border-color: var(--warnung); }
.bodychart .bc-leer { margin: 10px 0 0; font-size: 13px; }
body.mit-js .bodychart .bc-leer .nur-mit-js { display: inline; }
.bodychart:has(> .bc-legende.eigen > li) > .bc-leer { display: none; }
.bodychart .fremd .bc-ansichten, .bodychart details.verlauf .bc-ansichten { margin-top: 8px; }

@media (max-width: 40rem) {
  .bodychart .bc-zeile { flex-wrap: wrap; }
  .bodychart .bc-zeile .bc-art { flex-basis: auto; }
  .bodychart .bc-zeile input.bc-text { flex-basis: 100%; order: 5; }
  .bodychart .bc-ansichten { gap: 12px; }
}

/* Die Fahnen im Kurzschnitt der Therapiesicht (0243). */
.fahnenzeilen { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.fahnenzeilen li { display: flex; align-items: baseline; gap: 6px; font-size: 14px; }
.fahnenzeilen li .fahne { align-self: center; }
.fahnenzeilen li.rot { font-weight: 600; }
.fahnenzeilen li .zart { font-weight: 400; font-size: 12px; }
.dialogseite-kasten table.meilensteine tbody th {
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--text-stark);
}

/* Die Befundvorlage der Plattform: Bogen und Zwischenueberschrift (0243). */
.chips.bogenreiter { display: flex; gap: 6px; margin: 0 0 16px; }
ol.befundfelder li.abschnittskopf {
  display: block; padding: 12px 0 2px; border-top: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--akzent);
}
ol.befundfelder li.abschnittskopf .icf, .befundgruppe h2 .icf {
  display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--flaeche-hover);
  font-family: var(--schrift-zahl); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ruhig);
}

/* Der niedrige Kopf der Anamnese (21.10.2026): eine Zeile Name und
   Profession, eine Zeile Angaben. Nur hier -- Klientenakte und Vertrag
   behalten ihren Kopf. */
.dialogseite-kasten.kompakt > .kopf { padding: 18px 28px; gap: 12px; }
.dialogseite-kasten.kompakt > .kopf .personenzelle { gap: 14px; }
.dialogseite-kasten.kompakt > .kopf .gesicht { width: 50px; height: 50px; font-size: 17px; }
.dialogseite-kasten.kompakt > .kopf .wer { min-width: 0; }
.dialogseite-kasten.kompakt > .kopf .wer .zeile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dialogseite-kasten.kompakt > .kopf h1 {
  font-size: 24px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dialogseite-kasten.kompakt > .kopf .chips { margin: 0; flex-wrap: nowrap; }
.dialogseite-kasten.kompakt > .kopf .wer .zart {
  display: block; margin-top: 4px; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dialogseite-kasten.kompakt > .kopf .wer .zart strong { display: inline; }
.dialogseite-kasten.kompakt > .kopf .wer .zart .ueber {
  display: inline; margin: 0; font-size: 11px; letter-spacing: .14em;
}
.dialogseite-kasten.kompakt > .kopf .zu { width: 34px; height: 34px; }
@media (max-width: 60rem) {
  .dialogseite-kasten.kompakt > .kopf { padding: 10px 16px; }
  .dialogseite-kasten.kompakt > .kopf h1 { font-size: 19px; }
  .dialogseite-kasten.kompakt > .kopf .chips { display: none; }
}

/* Freie Tage der Einheit: für wen ein Tag gilt, und die Tage je Praxis
   (22.10.2026). Mit „Alle betreuten Praxen" treten die einzelnen zurück. */
fieldset.giltfuer { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 10px 14px 12px; margin: 0; }
fieldset.giltfuer legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
fieldset.giltfuer .reihe { display: flex; flex-wrap: wrap; gap: 8px; }
fieldset.giltfuer .reihe + .reihe { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--linie); }
fieldset.giltfuer:has(input[name="alle_praxen"]:checked) .einzelne { opacity: .45; pointer-events: none; }
fieldset.giltfuer label.chipwahl:has(input:disabled) { opacity: .55; cursor: default; }
fieldset.giltfuer p { margin: 8px 0 0; font-size: 13px; }
ul.praxenfrei { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: 8px; }
ul.praxenfrei li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
ul.praxenfrei .tage { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }

/* Telefonie (0250): Einstellungen › Telefonie der Einheit. */
.knopfzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 1rem; }
.hinweis.schluesselkasten { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-klein); padding: 12px 14px; margin: 1rem 0 0; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.hinweis.schluesselkasten p { margin: 0 0 .4rem; }
code.schluessel { display: inline-block; font-family: var(--schrift-zahl); font-size: 13px; padding: 6px 10px; background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow-wrap: anywhere; user-select: all; }
ul.telefonliste { list-style: none; margin: .8rem 0 0; padding: 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
ul.telefonliste > li { padding: 10px 14px; }
ul.telefonliste > li + li { border-top: 1px solid var(--linie); }
ul.telefonliste > li.gewaehlt { background: var(--flaeche-hover); }
ul.telefonliste .zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
ul.telefonliste .zeile .knopf { margin-left: auto; }
fieldset.telefonwahl label { display: flex; gap: 8px; align-items: baseline; font-weight: 400; }
fieldset.telefonwahl label input { width: auto; }
/* Webanfragen (0251): das Beispiel für die Webseite, die Nachricht einer offenen Anfrage. */
pre.codeblock { margin: .6rem 0; padding: 10px 12px; font-family: var(--schrift-zahl); font-size: 12px; line-height: 1.5;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); overflow-x: auto; white-space: pre; }
ul.telefonliste > li > .fliesstext { margin: .6rem 0; max-width: 78ch; }
/* Ein Anhang, der hier nicht aufgeht (0249). */
.anhanghinweis { display: flex; gap: 8px; align-items: center; margin: 1rem; color: var(--ruhig); }
.anhanghinweis p { margin: 0; }