/* ============================================================================
   Medicent CRM — was nur diese Anwendung betrifft.

   Farben, Schrift, Knöpfe, Karten, Tabellen und Formulare stehen in
   marke.css und sind in allen Medicent-Anwendungen gleich. Hier steht
   nur, was es sonst nirgends gibt: die Seitenleiste, die Anmeldeseite,
   der gekennzeichnete Kasten der Verwaltung und der Gesprächsstrang.

   Die Seitenleiste und die Anmeldeseite sind von der Zeiterfassung
   übernommen — Zeile für Zeile. Wer zwischen den fünf Anwendungen
   wechselt, soll nicht erst suchen müssen, wo oben links etwas steht.
   Wer hier etwas an der Leiste ändert, sollte dort nachsehen.

   marke.css muss vorher geladen sein — diese Datei baut auf ihren
   Farbnamen auf.
   ========================================================================= */


/* --------------------------------------------------------- Seitenleiste
   Die Homepage hat keine Seitenleiste. Was sie hat, ist eine weiße
   Kopfzeile mit einer einzigen Haarlinie darunter und runde orange Knöpfe.
   Genau so ist die Leiste gebaut: weiß, eine Linie zur Trennung, und der
   aktive Punkt als orange Pille — dieselbe Form wie der Knopf
   „Rückruf anfordern" im Kopf der Homepage.

   Dieselbe Bauart hat die Leiste im OPZ Lager/Fakturierung. Wer hier etwas
   ändert, sollte dort nachsehen. */

:root { --leiste: 244px; }

body.mitseitenleiste { display: flex; min-height: 100vh; align-items: stretch; }

.seitenleiste {
  width: var(--leiste); flex: none;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--grund); border-right: 1px solid var(--linie);
}
.inhaltsspalte { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Die Leiste lässt sich zuklappen — derselbe Baustein wie im OPZ Lager,
   damit beide Anwendungen sich gleich bedienen lassen.

   Zugeklappt bleibt eine schmale Schiene stehen statt gar nichts: Das
   Zeichen sagt weiterhin, in welcher Anwendung man ist, und der Schalter
   bleibt da, wo man ihn eben gedrückt hat. Eine Schaltfläche, die nach
   dem Drücken woanders ist, sucht man beim nächsten Mal.

   Der Nutzen hier ist die Monatsübersicht: Die Tagestabelle hat acht
   Spalten, und auf einem Laptop sind 200 Pixel mehr der Unterschied
   zwischen „erfasste Zeiten" und „08:00–1…". */
.leistenkopf {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--linie);
}
.leistenkopf .marke { flex: 1; min-width: 0; border-bottom: none; }
.leistenschalter {
  flex: none; width: 34px; border: none; background: none; cursor: pointer;
  color: var(--grau2); font-size: 17px; line-height: 1; padding: 0;
  border-left: 1px solid var(--linie2);
}
.leistenschalter:hover { background: var(--flaeche); color: var(--text); }
.leistenschalter::before { content: "\2039\2039"; letter-spacing: -2px; }
.versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

html.leiste-zu .seitenleiste { width: 46px; }
html.leiste-zu .leistenkopf { flex-direction: column; }
html.leiste-zu .leistenkopf .marke {
  padding: 12px 0 8px; justify-content: center; gap: 0;
}
html.leiste-zu .leistenkopf .marke span,
html.leiste-zu .seitenleiste nav,
html.leiste-zu .angemeldet { display: none; }
html.leiste-zu .leistenkopf .marke img { height: 26px; width: 26px; }
html.leiste-zu .leistenschalter {
  width: 100%; height: 34px; border-left: none;
  border-top: 1px solid var(--linie2);
}
html.leiste-zu .leistenschalter::before { content: "\203A\203A"; }

/* Hausmarke: das Zeichen bringt seinen orangen Kreis selbst mit, es braucht
   keinen Hintergrund dahinter. Maße, Abstände und Schriftgrade sind die
   des OPZ Lagers - wer zwischen den beiden Anwendungen wechselt, soll
   nicht erst suchen müssen, wo oben links etwas steht. */
.marke {
  display: flex; align-items: center; gap: 11px;
  padding: 22px 18px 20px; border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none;
}
.marke:hover { text-decoration: none; }
.marke img { flex: none; width: 34px; height: 34px; border-radius: 50%; }
.marke strong {
  display: block;
  font-size: 14px; font-weight: 700; letter-spacing: .07em;
  color: var(--text);
}
.marke small {
  display: block;
  font-size: 11.5px; color: var(--grau2); letter-spacing: .02em;
}

.seitenleiste nav {
  flex: 1; display: flex; flex-direction: column; padding: 14px 12px 18px;
}
.seitenleiste .gruppe { display: flex; flex-direction: column; margin-top: 18px; }
.seitenleiste .gruppe.unten { margin-top: auto; padding-top: 18px; }

/* Die Gruppentitel standen in Grau auf Weiß - man sah sie kaum. Jetzt
   ein oranges Band quer durch die Leiste, weiß beschriftet, genau wie im
   OPZ Lager. Es läuft bis an beide Ränder (daher das negative Außenmaß
   gegen die 12 Pixel Innenabstand von nav) und hat eckige Kanten; so
   verwechselt es niemand mit dem laufenden Menüpunkt, der als runde
   Pille eingerückt sitzt. Das Orange ist etwas tiefer als das der
   Pille, damit die weiße Schrift in dieser kleinen Größe wirklich
   trägt. */
.gruppentitel {
  display: block; margin: 0 -12px 7px; padding: 5px 25px;
  background: #B06410; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase;
}

/* Pillenform wie die Knöpfe der Homepage - und wie im OPZ Lager */
.seitenleiste .eintrag {
  display: block; margin-bottom: 2px; padding: 8px 13px;
  border-radius: var(--rund-pille);
  color: var(--grau); font-size: 14px; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.seitenleiste .eintrag:hover {
  background: var(--flaeche); color: var(--text); text-decoration: none;
}
.seitenleiste .eintrag.an {
  background: var(--akzent); color: #fff; font-weight: 600;
}
.seitenleiste .eintrag.an:hover { background: var(--akzent-dunkel); color: #fff; }
.seitenleiste .eintrag.unter { padding-left: 17px; }

.angemeldet {
  padding: 13px 18px 16px; border-top: 1px solid var(--linie);
  font-size: 13px; color: var(--grau);
}
.angemeldet .wer { display: block; font-weight: 700; color: var(--text); }
.angemeldet .rolle {
  display: inline-block; margin-top: 5px; padding: 1px 9px;
  border-radius: 11px; background: var(--pille); color: var(--grau2);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.angemeldet a {
  display: inline-block; margin-top: 9px;
  color: var(--grau); text-decoration: none;
  border-bottom: 1px solid var(--linie);
}
.angemeldet a:hover { color: var(--akzent-dunkel); border-bottom-color: var(--akzent); }

/* Schmale Fenster: die Leiste legt sich nach oben */
@media (max-width: 860px) {
  body.mitseitenleiste { display: block; }
  .seitenleiste { width: auto; height: auto; position: static; }
  .seitenleiste nav {
    flex-direction: row; flex-wrap: wrap; gap: 2px; padding: 0 10px 12px;
  }
  .seitenleiste .gruppe {
    flex-direction: row; flex-wrap: wrap; gap: 2px; margin-top: 0;
  }
  .seitenleiste .gruppe.unten { margin-top: 0; padding-top: 0; }
  .gruppentitel { display: none; }
  .seitenleiste .eintrag.unter { padding-left: 12px; }
  .angemeldet { display: flex; align-items: center; gap: 10px; }
  .angemeldet .wer { display: inline; }
  .angemeldet a { margin-top: 0; }
}


/* ---------------------------------------------------- Inhalt und Fußzeile */

/* Die volle Breite. Eine Personenliste hat fuenfzehn Spalten - bei
   1240px bleibt rechts Rasen liegen, waehrend die Mailadressen
   abgeschnitten werden. Fliesstext bekommt seine Grenze darum einzeln:
   Eine Zeile ueber die ganze Breite eines 34-Zoll-Schirms liest
   niemand gern. */
main {
  width: 100%; flex: 1;
  margin: 0 auto; padding: 26px 30px 50px;
}
main > .kopfzeile .unterzeile,
main > .meldung,
main > p { max-width: 90ch; }

/* Wie die Fußzeile der Homepage: weiß, eine Haarlinie darüber. */
footer {
  padding: 18px 30px 24px;
  border-top: 1px solid var(--linie); background: var(--grund);
  text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--grau2);
}
footer code {
  padding: 1px 6px; border-radius: 4px;
  background: var(--pille); font-size: 12px;
}


/* --------------------------------------------------------- Anmeldeseite
   Der helle Orangeton der Homepage-Kopfzone als Grund, die Karte darauf. */

body.anmeldeseite {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  /* Das Haus als Hintergrund - darueber ein dunkler Schleier. Ohne
     ihn stuende die Fusszeile mal auf Himmel, mal auf Asphalt, und
     waere einmal lesbar und einmal nicht. Der Schleier macht den
     Untergrund gleichmaessig, egal wie das Bild beschnitten wird. */
  background-color: var(--akzent-hell);
  background-image:
    linear-gradient(rgba(27, 26, 24, .42), rgba(27, 26, 24, .58)),
    url("haus.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* Auf dem Telefon bleibt ein festgesetzter Hintergrund beim Scrollen
   haengen oder ruckelt - dort laeuft er mit. */
@media (max-width: 760px) {
  body.anmeldeseite { background-attachment: scroll; }
}
.anmeldekasten {
  width: 100%; max-width: 380px; padding: 34px 32px;
  background: var(--grund);
  border: 1px solid var(--akzent-rand); border-radius: var(--rund-karte);
  /* Kraeftiger als vorher: Der Kasten steht jetzt auf einem Foto und
     muss sich davon abheben, nicht von einer ruhigen Flaeche. */
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34);
}
.anmeldekasten .zeichen { display: block; width: 44px; margin: 0 auto 14px; }
.anmeldekasten .wortmarke {
  text-align: center;
  font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: var(--text);
}
.anmeldekasten .unterzeile { margin: 5px 0 24px; color: var(--grau2); }
/* Nur der Absendeknopf, nicht jeder Knopf im Kasten - sonst erwischt
   es auch das Auge am Kennwortfeld. */
.anmeldekasten button[type="submit"] { width: 100%; }
.anmeldefuss {
  margin-top: 20px; font-size: 12.5px; color: rgba(255, 255, 255, .88);
  text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* Der Haken „Anmeldenamen merken" — wie in den Schwesteranwendungen. */
.feld.merken {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--grau);
}
.feld.merken input { width: auto; height: auto; margin: 0; flex: none;
                     accent-color: var(--akzent); }

/* Steht der Haken in einer Feldzeile NEBEN einem Eingabefeld, dann
   gehoert er auf dessen Hoehe. Das Feld daneben traegt seine
   Beschriftung darueber, der Haken nicht - ohne diese Zeile sitzt er
   darum am oberen Rand der Zelle und damit ueber der Mitte des
   Feldes. 'end' plus die Hoehe eines Eingabefelds setzt ihn genau auf
   dessen Mitte, egal wie lang die Beschriftung daneben ist. */
.feldzeile > .feld.merken {
  margin-bottom: 0; align-self: end; min-height: var(--hoch);
}


/* ============================================ Die Grenze zur Verwaltung

   Dieser Kasten ist die wichtigste Gestaltungsentscheidung im ganzen
   Programm. Was darin steht, kommt aus der Medicent Verwaltung und ist
   HIER NICHT ÄNDERBAR. Also darf er auch nicht aussehen wie die Karte
   darunter, in die man hineinschreiben kann.

   Darum: ein lila Band an der linken Kante statt der üblichen
   Haarlinie, ein leicht getönter Grund, und oben ein Schild, das die
   Herkunft nennt. Lila, weil die vier Hausfarben (Orange für das
   Eigene, Grün für Erledigtes, Rot für Fehler, Grau für Ruhendes) schon
   besetzt sind — eine fünfte Bedeutung braucht eine fünfte Farbe.

   Dass eine Verknüpfung „extra gekennzeichnet" sein muss, ist eine
   Vorgabe und keine Geschmacksfrage: Ohne sie sieht niemand, welche
   Angabe gepflegt wird und welche nur als Stand dasteht. */

/* Die fuenfte Farbe. marke.css kennt vier Bedeutungen - Orange fuer das
   Eigene, Gruen fuer Erledigtes, Rot fuer Fehler, Grau fuer Ruhendes -
   und sie sind alle besetzt. 'fremde Herkunft, nur lesbar' braucht eine
   eigene, sonst heisst dieselbe Farbe zweierlei.

   ACHTUNG: marke.css hat eine Klasse '.marker.lila', die trotz ihres
   Namens orange ist (sie zeigt dort den Hausakzent). Sie wird hier NICHT
   umdefiniert - eine gemeinsame Datei in einer Anwendung anders zu
   faerben, waere genau die Art Ueberraschung, die man spaeter sucht.
   Der CRM-Marker heisst darum '.marker.verwaltung'. */
:root {
  --lila:       #6d4f9c;
  --lila-tief:  #553c7d;
  --lila-rand:  #cdc1e6;
  --lila-hell:  #f6f3fc;
}

.marker.verwaltung {
  background: var(--lila-hell); color: var(--lila-tief);
  box-shadow: inset 0 0 0 1px var(--lila-rand);
}

.karte.verwaltung {
  border-color: var(--lila-rand);
  border-left: 4px solid var(--lila);
  background: var(--lila-hell);
}
.karte.verwaltung .herkunft {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.karte.verwaltung .feldname,
.karte .feldname {
  display: block; margin-bottom: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--grau2);
}
.karte.verwaltung strong { display: block; font-size: 14.5px; }
.karte.verwaltung .klein { display: block; color: var(--grau2); }

/* Die Zeile einer verknüpften Person in der Liste: nur ein Hauch, nicht
   der ganze Kasten. Die Kennzeichnung trägt der Marker in der Spalte
   „Im Haus" — die Zeilenfarbe ist nur die Wiederholung davon fürs Auge
   beim Überfliegen. */
/* Frueher lag die Verknuepfung in der letzten Spalte; seit es zwei
   gibt (Mieter und OP-Nutzer), steht die Kennzeichnung an den Markern
   selbst. Die Zeile bleibt unaufdringlich - ein eingefaerbter Streifen
   quer durch die Liste liest sich schlechter als ein Wort an der
   richtigen Stelle. */
.marker.opz { background: var(--flaeche); color: var(--grau);
              border: 1px solid var(--linie); }

/* Fälliges und Erledigtes in Tabellen */
tr.faellig td { background: #fff6ec; }
tr.faellig td:first-child { font-weight: 700; color: var(--akzent-dunkel); }
tr.erledigt td { color: var(--grau2); }
tr.erledigt td:nth-child(2) { text-decoration: line-through; }


/* ----------------------------------------------------- Gesprächsstrang
   Der Verlauf einer Person: ein Strang von oben nach unten, neueste
   Zeile zuerst. Links die Zeit, rechts was war — damit das Auge beim
   Überfliegen eine Kante hat.

   Die Art steht als Marker im Text und nicht als Farbe des ganzen
   Eintrags: Ein Verlauf aus fünf verschiedenfarbigen Blöcken liest
   sich nicht. */

ol.strang { list-style: none; margin: 18px 0 0; padding: 0; }
ol.strang li {
  display: flex; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--linie2);
}
ol.strang li:first-child { border-top: none; }
ol.strang .zeit {
  flex: none; width: 118px;
  font-size: 12px; color: var(--grau2);
  font-variant-numeric: tabular-nums;
}
ol.strang .text { margin-top: 4px; white-space: pre-wrap; }
/* Eine uebernommene Mail bringt Signatur und Haftungsklausel mit und
   wird dreissig Zeilen lang. Ohne Deckel schiebt ein einziger solcher
   Eintrag den ganzen Strang auseinander. Gekuerzt wird aber nichts:
   Was da ist, bleibt lesbar - man muss nur in dem Kasten rollen. */
ol.strang li.art-mail .text { max-height: 13em; overflow: auto; }
ol.strang .klein { margin-top: 4px; color: var(--grau2); }
/* Protokollierte Post ist fremde Korrespondenz — sie bekommt eine
   eigene Kante, damit man sie nicht mit einer eigenen Notiz
   verwechselt. */
ol.strang li.art-mail { border-left: 3px solid var(--lila);
                        padding-left: 11px; }


/* ------------------------------------------------------------ Protokoll
   Festbreitenschrift, damit die Spalten des Logfiles fluchten. */

pre.protokoll {
  margin: 0; padding: 13px 15px;
  border: 1px solid var(--linie); border-radius: var(--rund-feld);
  background: var(--flaeche); color: var(--text);
  font-family: Consolas, "Courier New", monospace;
  font-size: 12.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}

/* Abstand zwischen zwei Rastern untereinander — marke.css kennt nur den
   Abstand INNERHALB eines Rasters. */
.raster { margin-bottom: 18px; }
.karte + h2, .raster + h2 { margin-top: 26px; }


/* =====================================================================
   Spaltenwahl — UEBERNOMMEN. Herkunft: OPZ Lager, von dort in die
   Monatsfakturierung, von dort hierher. Unverändert bis auf die
   Farbnamen: Die Fakturierung trägt eine ältere Fassung von marke.css
   mit anderen Namen (--linie-s, --weiss, --grau-l, --sand). Hier stehen
   die heutigen. Wird der Baustein im OPZ gepflegt, gehört er in allen
   Anwendungen nachgezogen.
   ===================================================================== */
.gitterkopf {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 10px;
}
.gitterkopf .suche {
  flex: 1; min-width: 210px; max-width: 420px;
  padding: 7px 14px; border: 1px solid var(--feldrand);
  border-radius: var(--rund-pille); font-size: 13.5px; font-family: inherit;
  background: var(--grund);
}
.gitterkopf .zaehler { font-size: 12.2px; color: var(--grau2); }


button.winzig, a.knopf.winzig {
  font-size: 11px; font-weight: 600; padding: 2px 10px;
  background: none; border: 1px solid var(--feldrand); color: var(--grau);
  text-decoration: none; line-height: 1.7; height: auto; min-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
button.winzig:hover, a.knopf.winzig:hover {
  background: var(--flaeche); border-color: var(--linie); color: var(--text);
}

/* ----------------------------------------------------- Spaltendialog */

dialog.spaltendialog {
  border: 1px solid var(--linie); border-radius: var(--rund-karte);
  padding: 22px 24px; max-width: 420px; width: 90vw;
  color: var(--text); background: var(--grund);
}
dialog.spaltendialog::backdrop { background: rgba(27, 26, 24, .35); }
dialog.spaltendialog h2 { margin-top: 0; border: none; padding: 0; }
.spaltenliste { list-style: none; margin: 14px 0 18px; padding: 0;
                max-height: 52vh; overflow-y: auto; }
.spaltenliste li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 8px; border-bottom: 1px solid var(--linie2);
}
.spaltenliste li:last-child { border-bottom: none; }
.spaltenliste label { display: flex; align-items: center; gap: 8px;
                      cursor: pointer; }
.spaltenliste span { display: flex; gap: 4px; }
.spaltenliste button.winzig { padding: 1px 8px; }

/* Der Griff zum Ziehen: ein Feld, das man anfassen kann, und ein
   Strich dort, wo die Zeile landen wird. */
.spaltenliste li { background: var(--grund); }
.spaltenliste li:focus-visible { outline: 2px solid var(--akzent);
                                 outline-offset: -2px; }
.spaltenliste .griff {
  cursor: grab; color: var(--grau2); font-size: 15px; line-height: 1;
  padding: 2px 6px; border: 1px solid var(--linie2); border-radius: 6px;
  user-select: none;
}
.spaltenliste .griff:hover { color: var(--akzent-dunkel);
                             border-color: var(--akzent-rand); }
.spaltenliste li.zieht { opacity: .45; }
.spaltenliste li.darueber { box-shadow: inset 0 2px 0 var(--akzent); }
.spaltenliste li.darunter { box-shadow: inset 0 -2px 0 var(--akzent); }


/* Einzeilig: Eine Liste, in der jede Zeile gleich hoch ist, laesst sich
   mit dem Auge abfahren. Sobald eine Zelle umbricht, muss man suchen,
   wo die naechste Zeile anfaengt. Was nicht hineinpasst, wird gekuerzt -
   vollstaendig steht es im title und in der Maske dahinter. */
table.einzeilig td, table.einzeilig th {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 230px;
}
/* Die Namensspalte wird nicht gekuerzt: Ein halber Name ist
   schlimmer als eine breite Spalte. Frueher stand hier ".z" -
   das heisst im Haus aber "zentriert", und so standen die Namen
   mittig und ihre Anfangsbuchstaben in einer Zickzacklinie. */
table.einzeilig td.ganz, table.einzeilig th.ganz { max-width: none; }


/* Die Liste selbst: stillgelegte Zeilen blasser, wie in der
   Fakturierung. */
table.liste tr.inaktiv { opacity: .55; }


/* ======================================================== Ansichten
   Eine Reiterleiste wie bei den Karteikästen, die das Haus früher
   hatte: „Alle" steht immer da, die gespeicherten daneben. Gemeinsame
   zuerst — wer eine Ansicht für alle anlegt, legt eine Hausregel fest,
   und die gehört nach vorne. */

.ansichtsleiste {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin: 18px 0 0; padding-bottom: 0;
  border-bottom: 1px solid var(--linie);
}
.ansichtsleiste .reiter {
  padding: 7px 15px; border: 1px solid transparent; border-bottom: none;
  border-radius: var(--rund-feld) var(--rund-feld) 0 0;
  color: var(--grau); font-size: 13.5px; text-decoration: none;
  position: relative; bottom: -1px;
}
.ansichtsleiste .reiter:hover {
  background: var(--flaeche); color: var(--text); text-decoration: none;
}
.ansichtsleiste .reiter.an {
  background: var(--grund); border-color: var(--linie);
  color: var(--text); font-weight: 600;
}
.ansichtsleiste .reiterwahl {
  margin-left: auto; align-self: center;
  max-width: 15em; height: var(--hoch-klein); padding: 0 8px;
  border: 1px solid var(--feldrand); border-radius: var(--rund-feld);
  font-family: inherit; font-size: 13px; background: var(--grund);
  color: var(--grau);
}
.ansichtsleiste .stern { color: var(--akzent); }
.ansichtsleiste .fuerAlle { color: var(--lila); font-weight: 700; }

/* Der Reiter ist jetzt eine Huelle mit Anker, Zeichen und Kreuz darin -
   das Kreuz kann nicht IM Anker stehen, ein Knopf in einem Link waere
   weder bedienbar noch gueltig. */
.ansichtsleiste .reiter {
  display: inline-flex; align-items: center; gap: 6px;
}
.ansichtsleiste .reiter > a {
  color: inherit; text-decoration: none;
}
.ansichtsleiste .reiter[draggable="true"] { cursor: grab; }
.ansichtsleiste .reiter.zieht { opacity: .45; cursor: grabbing; }
.ansichtsleiste .reiterweg { display: inline-flex; margin: 0; }
/* Das Kreuz bleibt verborgen, bis der Zeiger auf dem Reiter steht -
   sonst stuenden fuenf Loeschknoepfe in einer Leiste, die man zum
   Umschalten benutzt. Mit der Tastatur ist es trotzdem erreichbar,
   darum auch bei :focus-within. */
.ansichtsleiste .reiterweg .weg {
  opacity: 0; font-size: 11px; line-height: 1;
  padding: 2px 3px; border: none; background: none;
  color: var(--grau2); cursor: pointer;
}
.ansichtsleiste .reiter:hover .weg,
.ansichtsleiste .reiter:focus-within .weg { opacity: 1; }
.ansichtsleiste .reiterweg .weg:hover { color: var(--rot); }

/* Wonach gefiltert wird, steht in der Kopfzeile des Kastens - damit
   das Einklappen kein Verstecken ist. */
details.filterkasten > summary .kriterien {
  font-weight: 400; color: var(--grau2);
}
details.filterkasten[open] > summary .kriterien { display: none; }

.ansichtskopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--linie); border-top: none;
  border-radius: 0 0 var(--rund-karte) var(--rund-karte);
  background: var(--flaeche);
}
.ansichtskopf .knopfzeile { margin: 0; gap: 6px; }
.ansichtskopf form { display: inline; }


/* ---------------------------------------------------- Der Filterkasten
   Zugeklappt, solange nicht gefiltert wird: Wer nur jemanden sucht,
   soll nicht an einem Baukasten vorbeischauen müssen. Sobald eine
   Regel gilt, steht er offen — sonst wüsste niemand, warum die Liste
   kurz ist. */

details.filterkasten { margin-top: 18px; }
details.filterkasten > summary {
  cursor: pointer; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
/* Ein summary mit 'display: flex' zeigt in Chrome KEIN Dreieck mehr -
   das eingebaute ::marker faellt dabei weg. Ohne Zeichen sieht der
   Kasten aber aus wie eine Ueberschrift, und niemand kommt auf die
   Idee, darauf zu klicken. Darum ein eigenes, das sich dreht. */
details.filterkasten > summary::marker,
details.filterkasten > summary::-webkit-details-marker { display: none; }
details.filterkasten > summary::before {
  content: "\25B8"; flex: none;
  color: var(--grau2); font-size: 12px;
  transition: transform .12s ease;
}
details.filterkasten[open] > summary::before { transform: rotate(90deg); }
details.filterkasten[open] > summary { margin-bottom: 14px; }

.regeln { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.regelzeile {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.regelzeile select, .regelzeile input {
  height: var(--hoch); padding: 0 11px;
  border: 1px solid var(--feldrand); border-radius: var(--rund-feld);
  font-family: inherit; font-size: 14px; background: var(--grund);
}
.regelzeile .regelfeld { min-width: 210px; }
.regelzeile .regelvergleich { min-width: 160px; }
.regelzeile .regelwert { flex: 1; min-width: 150px; }
.regelzeile .regelhinweis { flex-basis: 100%; margin: 0 0 4px 4px; }
/* ------------------------------------------- Kaestchen statt Dropdown
   Fach und Spital: vierzig Eintraege, von denen ein Arzt meistens
   einen und manchmal zwei hat. Ein Kasten mit fester Hoehe, in dem
   gescrollt wird - so bleibt die Maske gleich hoch, egal wie lang die
   gepflegte Liste inzwischen ist. */

.kastenwahl {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 11.5em; overflow-y: auto;
  padding: 7px 10px;
  border: 1px solid var(--feldrand); border-radius: var(--rund-feld);
  background: var(--grund);
}
.kastenwahl .kaestchen {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 1.5; cursor: pointer;
}
.kastenwahl .kaestchen input { margin: 0; flex: none; }
.kastenwahl .kaestchen:hover { color: var(--akzent-dunkel); }
.kastenwahl .kaestchen.stillgelegt { color: var(--grau2); font-style: italic; }

.ansichtspeichern {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linie2);
}


/* ======================================================= Der Trichter
   Die Stufen als Balken, von oben nach unten schmaler. Ein Trichter
   ist kein Balkendiagramm: Die Breite zeigt, wie viele es BIS HIERHER
   geschafft haben, nicht wie viele gerade hier stehen. */

.trichter { margin: 18px 0 24px; }
.trichter .stufe {
  position: relative; display: flex; justify-content: space-between;
  align-items: center; gap: 12px;
  padding: 9px 14px; margin-bottom: 3px;
  border: 1px solid var(--linie); border-radius: var(--rund-feld);
  background: var(--grund); overflow: hidden;
}
.trichter .balken {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--akzent-hell); border-right: 2px solid var(--akzent-rand);
}
.trichter .stufe.ziel .balken {
  background: var(--gruen-hell); border-right-color: var(--gruen-rand);
}
.trichter .wie, .trichter .zahl { position: relative; }
.trichter .wie { font-weight: 600; font-size: 14px; }
.trichter .zahl {
  font-variant-numeric: tabular-nums; font-weight: 700;
  white-space: nowrap;
}
.trichter .zahl .klein { font-weight: 400; color: var(--grau2); }


/* ------------------------------------------------- Die Stufentabelle */

/* ------------------------------------------ Abschnitte zum Zuklappen

   Die Einstellungen sind auf fuenf Abschnitte gewachsen, zwei davon
   mit dreissig Zeilen. Wer unten einen Wert aendern will, soll nicht
   an zwei Listen vorbeiscrollen muessen, die ihn gerade nicht
   angehen. Welcher Abschnitt offen ist, merkt sich der Browser
   (app.js). */

details.abschnitt { margin: 18px 0; }
details.abschnitt > summary {
  cursor: pointer;
  /* 'inside' statt 'outside': Draussen haengt das Dreieck am linken
     Rand der Karte und klebt fast am Rahmen. Drinnen steht es im
     Textfluss, also hinter dem Innenabstand der Karte - und bekommt
     mit dem Abstand am h2 Luft zur Beschriftung. */
  list-style-position: inside;
  margin: 0 0 2px; padding: 2px 0;
}
details.abschnitt > summary::marker { color: var(--grau2); }
details.abschnitt > summary h2 {
  display: inline; margin: 0 0 0 6px; font-size: 17px;
}
details.abschnitt[open] > summary { margin-bottom: 14px; }
details.abschnitt > summary:hover h2 { color: var(--akzent-dunkel); }

/* Die lange Liste rollt, ihr Kopf bleibt stehen - und die Knopfzeile
   steht ausserhalb des Rollkastens, also immer sichtbar. Ohne das
   muesste man bei dreissig Faechern erst ans Ende scrollen, um
   speichern zu koennen, und haette die Spaltenueberschriften
   unterwegs verloren. */
.rollkasten {
  max-height: 26em; overflow-y: auto;
  border: 1px solid var(--linie2); border-radius: var(--rund-feld);
}
.rollkasten table { margin: 0; }
/* Auf der Uebersicht darf er hoeher sein als in den
   Einstellungen: Dort ist er eine Liste neben anderen,
   hier ist er der Arbeitsvorrat des Tages. */
.rollkasten.hoch { max-height: 32em; }
.rollkasten thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--grund);
  box-shadow: inset 0 -1px 0 var(--linie);
}

/* ---------------------------------------------------- Die Rechtetabelle
   Eine Zeile je Recht, eine Spalte je Rolle. Der Haken steht mittig,
   die Erklaerung darunter - wer die Tabelle liest, soll nicht
   nachschlagen muessen, was "mailprotokoll" heisst. */

table.rechtetabelle td.z, table.rechtetabelle th.z { text-align: center; }
table.rechtetabelle .nurhaken {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
table.rechtetabelle .nurhaken input { accent-color: var(--akzent); }
table.rechtetabelle .schloss { font-size: 11px; opacity: .55; }
/* Was von Hand gedreht wurde, faellt auf. Das ist die eigentliche
   Auskunft dieser Seite - der Rest ist die Voreinstellung. */
table.rechtetabelle td.abweichend { background: var(--akzent-hell); }
table.rechtetabelle tr.gruppenzeile th {
  background: var(--flaeche); text-align: left;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grau2); padding-top: 14px;
}

/* ------------------------------------------- Auswahl und Sammelhandlungen
   Zeichengleich mit dem OPZ Lager - wer dort Zeilen anhakt, findet
   hier dieselbe Leiste an derselben Stelle. */

/* Die Vergleichstabelle: Was sich unterscheidet, faellt ins Auge.
   Eine Tabelle mit zwanzig Zeilen, von denen sich drei unterscheiden,
   liest niemand Zeile fuer Zeile durch - und genau diese drei sind der
   Grund, warum man vergleicht. */
table.vergleich th[scope="row"] {
  text-align: left; font-weight: 600; white-space: nowrap;
  color: var(--grau); width: 1%;
}
table.vergleich tr.anders > * { background: var(--akzent-hell); }
table.vergleich tr.anhang > * { background: var(--flaeche); }
table.vergleich td, table.vergleich th { vertical-align: top; }

th.auswahlspalte, td.auswahlspalte {
  width: 34px; text-align: center;
  padding-left: 10px; padding-right: 4px;
}
.auswahlleiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--akzent-hell); border: 1px solid var(--akzent-rand);
  border-radius: var(--rund-feld); padding: 8px 14px; margin: 0 0 10px;
}
.auswahlleiste .anzahl { font-weight: 600; font-size: 13.2px; }
button.winzig.gefahr { border-color: var(--rot-rand); color: var(--rot); }
button.winzig.gefahr:hover { background: var(--rot-hell);
                             border-color: var(--rot); }

/* Der Kasten, in dem Vergleich und Zusammenfuehren stehen. Er zeigt,
   was der Server schickt - ein Formular darin ist ein gewoehnliches
   Formular. */
dialog.auswahlkasten {
  border: 1px solid var(--linie); border-radius: var(--rund-karte);
  padding: 22px 24px; max-width: 1100px; width: 92vw;
  max-height: 86vh; overflow: auto;
  background: var(--grund); color: var(--text);
}
/* Die Vorschau: zwei Rahmen nebeneinander, Handy und Schreibtisch.
   Der Text steht in einem iframe und nicht in dieser Seite - sonst
   faerbte unser Stilblatt mit, und man saehe nicht, was der
   Empfaenger sieht. */
/* Die Werkzeuge ueber dem HTML-Feld. Sie fuegen Markup ein, sie
   formatieren nicht unmittelbar - warum, steht in app.js. */
.schreibwerkzeug {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px 8px; margin-bottom: -1px;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund-feld) var(--rund-feld) 0 0;
  background: var(--flaeche);
}
.schreibwerkzeug .trenner {
  width: 1px; height: 18px; margin: 0 4px; background: var(--linie);
}
.schreibwerkzeug .klein { margin-left: auto; color: var(--grau2); }
/* ------------------------------------------- Der Rundschreiben-Editor

   GESCHRIEBEN WIRD IN HANDYBREITE. 390 Pixel sind das, was ein
   Mobiltelefon zeigt - und die Mehrheit liest Post dort. Wer in einem
   1200 Pixel breiten Feld schreibt, setzt Saetze, die auf dem Telefon
   ueber fuenf Zeilen laufen, und merkt es erst in der Vorschau.
   Dieselbe Breite steht darum auch im linken Rahmen der Vorschau. */

.schreibhuelle { max-width: 390px; }
.schreibflaeche {
  min-height: 24em; max-height: 60vh; overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--feldrand);
  border-top: none;
  border-radius: 0 0 var(--rund-feld) var(--rund-feld);
  background: #fff; color: #222;
  /* Wie im Mail, nicht wie im Programm: Arial, 11pt. Sonst schreibt
     man in einer Schrift und verschickt eine andere. */
  font-family: Arial, sans-serif; font-size: 11pt; line-height: 1.5;
}
.schreibflaeche:focus-visible { outline: 2px solid var(--akzent); }
.schreibflaeche p { margin: 0 0 1em; }
.schreibflaeche h2 { font-size: 15pt; color: #333; margin: 0 0 .6em; }
.schreibflaeche a { color: var(--akzent-dunkel); }
.schreibflaeche img { max-width: 100%; height: auto; }
.schreibhuelle textarea.quelltext {
  width: 100%; min-height: 24em;
  border-top: none; border-radius: 0 0 var(--rund-feld) var(--rund-feld);
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
}

.schreibwerkzeug {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--feldrand);
  border-radius: var(--rund-feld) var(--rund-feld) 0 0;
  background: var(--flaeche);
}
.schreibwerkzeug .trenner {
  width: 1px; height: 18px; margin: 0 4px; background: var(--linie);
}
.schreibwerkzeug .klein {
  flex-basis: 100%; color: var(--grau2); margin-top: 2px;
}
.schreibwerkzeug button.an {
  background: var(--akzent-hell); border-color: var(--akzent-rand);
}

/* Das kleine Fenster an „Bild" und „Farbe". Es steht neben dem Knopf
   und verschwindet beim naechsten Klick daneben - ein <dialog> wuerde
   die halbe Seite verdunkeln, nur um fuenf Farben zu zeigen. */
.werkzeugklapp {
  position: absolute; top: 100%; left: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  max-width: 460px; min-width: 230px; margin-top: 4px; padding: 8px;
  background: var(--grund); border: 1px solid var(--linie);
  border-radius: var(--rund-feld);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.werkzeugklapp .farbtupfer { padding-left: 6px; }
.werkzeugklapp input[type="color"] {
  width: 32px; height: var(--hoch-klein); padding: 2px;
  border: 1px solid var(--feldrand); border-radius: var(--rund-feld);
  background: var(--grund); cursor: pointer;
}

dialog.vorschaukasten { max-width: 1400px; }
.vorschauen {
  display: flex; gap: 18px; align-items: flex-start; margin-top: 12px;
}
.vorschauen > div { display: flex; flex-direction: column; gap: 6px; }
.vorschauen > .breit { flex: 1; min-width: 0; }
iframe.schau {
  border: 1px solid var(--linie); border-radius: var(--rund-feld);
  background: #fff; height: 62vh;
}
iframe.schau.handy { width: 390px; flex: none; }
iframe.schau.tisch { width: 100%; }
@media (max-width: 1000px) {
  .vorschauen { flex-direction: column; }
  iframe.schau.handy { width: 100%; max-width: 390px; }
}

dialog.auswahlkasten::backdrop { background: rgba(0, 0, 0, .35); }
dialog.auswahlkasten h2 { margin: 0 0 12px; font-size: 18px; }
dialog.auswahlkasten .schliessen { position: absolute; top: 14px; right: 16px; }

table.stufentabelle { margin-top: 10px; }
table.stufentabelle td { vertical-align: top; }
table.stufentabelle .griffspalte { width: 28px; }
table.stufentabelle .griff {
  cursor: grab; color: var(--grau2); font-size: 15px; line-height: 1;
  padding: 2px 5px; border: 1px solid var(--linie2); border-radius: 6px;
  user-select: none; display: inline-block;
}
table.stufentabelle .griff:hover { color: var(--akzent-dunkel);
                                   border-color: var(--akzent-rand); }
table.stufentabelle .griff:focus-visible { outline: 2px solid var(--akzent); }
table.stufentabelle tr.zieht { opacity: .45; }
table.stufentabelle tr.stillgelegt { opacity: .6; background: var(--flaeche); }
table.stufentabelle tr.stillgelegt input[type="text"] { font-style: italic; }

/* marke.css gibt Auswahlfeldern die volle Breite - in einer Kopfzeile,
   die nebeneinander steht, sprengt das die Zeile. */
.gitterkopf select {
  width: auto; max-width: 260px; height: 30px; padding: 0 10px;
  border: 1px solid var(--feldrand); border-radius: var(--rund-feld);
  font-family: inherit; font-size: 13px; background: var(--grund);
}
.gitterkopf .zaehler { margin-right: auto; }

/* Auch hier: marke.css gibt Auswahlfeldern die volle Breite. In einer
   Regelzeile, die Feld, Vergleich und Wert nebeneinander stellt, bricht
   das jede Zeile um. */
.regelzeile select, .regelzeile input { width: auto; }
.regelzeile .regelfeld { flex: 0 1 230px; }
.regelzeile .regelvergleich { flex: 0 1 180px; }
.regelzeile .regelwert { flex: 1 1 180px; min-width: 140px; }
.regelzeile .regelweg { flex: none; }

/* ------------------------------------------------------- Posteingang
   Eine offene Anfrage ohne nächsten Schritt ist die, die liegen
   bleibt. Sie bekommt deshalb einen Rand, der auffällt – nicht die
   ganze Zeile rot, das schreit, sondern eine Kante links. */
tr.ohne-schritt td:first-child { box-shadow: inset 3px 0 0 var(--rot); }
.kennzahl.warnend { border-color: var(--rot-rand); background: var(--rot-hell); }
.kennzahl.warnend .wert { color: var(--rot); }
.filterleiste { display: flex; gap: 10px; align-items: center;
                flex-wrap: wrap; margin: 18px 0; }
.filterleiste select { width: auto; max-width: 260px; }
.filterleiste .feld.merken { margin: 0; }

/* =================================================== Der HTML-Editor
   SunEditor liegt unter static/fremd/ und bringt seine eigene Optik
   mit: Arial, scharfe Ecken, ein kaltes Grau. Neben den Karten des
   Hauses sieht das aus wie ein fremdes Fenster im Fenster.

   DARUM HIER UND NICHT DORT: Die mitgelieferte CSS-Datei wird beim
   naechsten Fassungswechsel ausgetauscht; jede Aenderung darin waere
   dann weg - und die Pruefsummen in HERKUNFT.md stimmten nicht mehr.
   Was hier steht, ueberlebt den Austausch. */
/* DAS 'body' DAVOR IST KEIN SCHMUCK. suneditor.min.css wird im
   Kopf-Block der Rundschreiben-Maske geladen, also NACH diesem
   Stilblatt. Die Bibliothek setzt '.sun-editor { font-family:
   Helvetica Neue }' - gleiche Spezifitaet wie unsere Regel, und bei
   Gleichstand gewinnt die spaetere. Im Bild-Fenster stand darum
   weiter Helvetica. Ein Waehler mehr dreht das um, ohne dass jede
   Seite der Anwendung die Editor-CSS mitschleppen muss.

   Der Waehler '*' nimmt alles mit: Die Bibliothek beschriftet ihre
   Fenster mit <label> und <div>, und die erben zwar - aber nur, wenn
   ueber ihnen schon das Richtige steht. */
body .sun-editor,
body .sun-editor * {
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Ausgenommen: Was im Schreibbereich steht, gehoert dem Rundschreiben
   und nicht uns. Dort gilt die Schrift, die der Verfasser gewaehlt
   hat - sonst saehe die Vorschau anders aus als die Mail. */
body .sun-editor .sun-editor-editable,
body .sun-editor .sun-editor-editable * {
  font-family: inherit;
}
.sun-editor {
  border: 1px solid var(--feldrand);
  border-radius: var(--rund-feld);
  color: var(--text);
}

/* Die Leiste: dieselbe helle Flaeche wie die Kartenkoepfe, und die
   Linie darunter in unserem Ton statt in Grau. */
.sun-editor .se-toolbar {
  background: var(--flaeche);
  outline: none;
  border-bottom: 1px solid var(--linie);
}
.sun-editor .se-toolbar-separator-vertical { background-color: var(--linie); }
.sun-editor .se-btn-module-border {
  border: 1px solid var(--linie);
  border-radius: var(--rund-feld);
  background: var(--grund);
}

/* Die Knoepfe: rund wie unsere, und beim Darueberfahren der warme
   Akzent statt des blauen Standardgraus. */
.sun-editor .se-btn {
  border-radius: 8px;
  color: var(--grau);
  font-size: 13px;
}
.sun-editor .se-btn:enabled:hover,
.sun-editor .se-btn:enabled:focus {
  background: var(--akzent-hell);
  color: var(--akzent-dunkel);
  border-color: var(--akzent-rand);
}
.sun-editor .se-btn:enabled.active {
  background: var(--akzent-hell);
  color: var(--akzent-dunkel);
}
.sun-editor .se-btn-select .txt { font-size: 13px; }

/* Die Klappmenues (Schriftart, Groesse, Format) und das Fenster fuer
   Bild und Verweis. */
.sun-editor .se-list-layer,
.sun-editor .se-dialog-content {
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  box-shadow: 0 10px 28px rgba(27, 26, 24, .14);
}
.sun-editor .se-list-inner li button:hover,
.sun-editor .se-list-inner li button.active {
  background: var(--akzent-hell);
  color: var(--akzent-dunkel);
}
.sun-editor .se-dialog-header,
.sun-editor .se-dialog-footer { border-color: var(--linie); }
.sun-editor .se-dialog input,
.sun-editor .se-dialog select {
  border: 1px solid var(--feldrand);
  border-radius: var(--rund-feld);
}
.sun-editor .se-dialog .se-btn-primary {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}

/* Der Schreibbereich. Die Zeilenhoehe des Hauses, damit ein Text hier
   so aussieht wie auf jeder anderen Maske. */
.sun-editor .se-wrapper-inner {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}
.sun-editor .se-resizing-bar {
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
}
.sun-editor .se-resizing-bar .se-navigation { color: var(--grau2); }



/* ================================================= Die Klappkarte
   Eine 'karte mitkopf', deren Kopfband man anklicken kann.

   WARUM DIE PERSONENAKTE SIE BRAUCHT: Vorher standen Stammdaten und
   Verlauf nebeneinander auf halber Breite - das Stammdatenfeld war
   enger als noetig, und im Verlauf lief jede Mail ueber zwanzig
   Zeilen. Darunter hingen vier weitere Karten in derselben halben
   Spalte. Jetzt steht jede ueber die ganze Breite, und was gerade
   nicht interessiert, ist zu. Welche offen ist, merkt sich der
   Browser (app.js, 'details[data-merken]').

   ZUGEKLAPPT STEHT DIE ZAHL DANEBEN. Das ist der eigentliche Gewinn:
   Man sieht, ob sich das Aufklappen lohnt, ohne aufzuklappen. */
details.klappkarte { padding: 0; overflow: hidden; }
details.klappkarte > summary {
  margin: 0; padding: 13px 18px;
  background: var(--flaeche);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
details.klappkarte[open] > summary {
  border-bottom: 1px solid var(--linie);
}
/* Ein summary mit 'display: flex' zeigt in Chrome kein Dreieck mehr -
   dieselbe Stelle wie beim Filterkasten. Also eines von Hand. */
details.klappkarte > summary::marker,
details.klappkarte > summary::-webkit-details-marker { display: none; }
details.klappkarte > summary::before {
  content: "\25B8"; color: var(--grau2);
  transition: transform .12s ease;
}
details.klappkarte[open] > summary::before { transform: rotate(90deg); }
details.klappkarte > summary h3 {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--text);
}
details.klappkarte > summary:hover h3 { color: var(--akzent-dunkel); }
/* Die Zahl rechts aussen: wie viele Anfragen, wie viele Spurzeilen -
   oder ob eine Einwilligung vorliegt. */
details.klappkarte > summary .zusatz {
  margin-left: auto; color: var(--grau2);
  font-size: 13px; font-weight: 400;
}
details.klappkarte > *:not(summary) {
  padding-left: 18px; padding-right: 18px;
}
details.klappkarte > *:last-child { padding-bottom: 16px; }

/* ====================================== Der Name bleibt oben stehen

   Eine Akte ist lang geworden: 29 Verlaufszeilen, und beim Lesen der
   dritten Mail weiss man nicht mehr, bei wem man eigentlich ist. Der
   Kopf bleibt darum haengen.

   DIE NEGATIVEN AUSSENABSTAENDE gleichen das Polster von 'main' aus
   (26px oben, 30px seitlich). Ohne sie bliebe links und rechts ein
   Streifen Seitenhintergrund stehen, durch den der Inhalt sichtbar
   durchfaehrt. */
.kopfzeile.haftend {
  position: sticky; top: 0; z-index: 5;
  margin: -26px -30px 20px; padding: 14px 30px 12px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
/* In der haftenden Zeile zaehlt die Hoehe: Was staendig dasteht, darf
   nicht ein Viertel des Bildschirms fressen. */
.kopfzeile.haftend h1 { font-size: 21px; }
.kopfzeile.haftend .unterzeile { margin-bottom: 0; font-size: 13.5px; }

/* ------------------------------------ Die Kaesten der Nachbarhaeuser

   'karte verwaltung' hat keinen Kartenkopf, sondern die Herkunftszeile
   mit dem Marker. Die wird hier zum Schalter - und traegt zugeklappt
   die Kundennummer, damit das Zuklappen kein Verstecken ist. */
details.klappinfo > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
details.klappinfo > summary::marker,
details.klappinfo > summary::-webkit-details-marker { display: none; }
details.klappinfo > summary::before {
  content: "\25B8"; color: var(--grau2); flex: none;
  transition: transform .12s ease;
}
details.klappinfo[open] > summary::before { transform: rotate(90deg); }
details.klappinfo > summary .zusatz {
  margin-left: auto; font-size: 13px; color: var(--grau);
}
/* Offen steht dieselbe Angabe gleich darunter noch einmal - einmal
   reicht. */
details.klappinfo[open] > summary .zusatz { display: none; }

/* ------------------------------------- Mehrfachauswahl im Fenster
   Der Knopf sieht aus wie ein Eingabefeld, denn er steht an dessen
   Stelle. Nur der Pfeil verraet, dass sich etwas oeffnet. */
.mehrwahl { position: relative; }
.mehrwahlknopf {
  display: block; width: 100%; min-height: var(--hoch);
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--feldrand); border-radius: var(--rund-feld);
  background: var(--grund); color: var(--text);
  font: inherit; font-size: 14px; line-height: 1.45;
  text-align: left; cursor: pointer;
}
.mehrwahlknopf:hover {
  border-color: var(--akzent); background: var(--grund);
}
.mehrwahlknopf:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}
.mehrwahlknopf.leer { color: var(--grau2); }
.mehrwahl::after {
  content: "\25BE"; position: absolute; right: 12px; top: 10px;
  color: var(--grau2); pointer-events: none;
}
/* Im Fenster darf die Liste laenger sein als in der Maske - sie ist
   ja das Einzige, was dort steht. */
dialog.mehrwahlfenster { max-width: 460px; }
dialog.mehrwahlfenster .kastenwahl {
  max-height: 58vh; border: none; padding: 0;
}
dialog.mehrwahlfenster .knopfzeile { margin-top: 16px; }

/* ------------------------------- Das Rundschreiben auf der Seite
   Die Breite eines Outlook-Fensters am Schreibtisch. Hoch genug, dass
   ein uebliches Rundschreiben ohne Rollen hineinpasst - laenger
   gescrollt wird im Rahmen selbst, nicht auf der Seite. */
iframe.schau.gross {
  display: block; width: 100%; min-height: 560px; height: 62vh;
  border: 1px solid var(--linie); border-radius: var(--rund-feld);
  background: #fff;
}

/* Das Fenster zum Bearbeiten. Breiter als die uebrigen Kaesten: Der
   Editor steht darin in Handybreite, daneben brauchen Name, Betreff
   und Liste ihren Platz. */
dialog.bearbeitenkasten { max-width: 760px; }
dialog.bearbeitenkasten .knopfzeile { margin-top: 18px; }