/* Puls — Grundgestaltung.
   Puls hat keine eigene Primärfarbe: die Fläche bleibt neutral, die Farbe kommt vom
   Mandanten (--mandant) und bedeutet immer dasselbe — in wessen Unternehmen man
   gerade arbeitet. Farbe wird sonst nur für Zustände benutzt, nie zur Zierde. */
/* **Die Marken stehen in `puls-ui.css`** (24.09.2026). Hier blieb nur, was es dort unter
   einem anderen Namen gibt — als Verweis, damit nicht zwei Dateien dieselbe Farbe
   festlegen und beim nächsten Umbau auseinanderlaufen. */
:root {
  --radius: var(--r-klein);
}

/* `box-sizing`, `img { max-width }` und die Grundeinstellung des `body` stehen seit dem
   24.09.2026 in `puls-ui.css` — sie galten für jede Oberfläche und standen dreimal da. */

/* ------------------------------------------------------- Die Seitenleiste */
/* **Die Navigation steht links** (09.10.2026, Renés Idee 23: „Ich habe dir zwei Screens
   hochgeladen und möchte das gesamte Admin Tool so angepasst haben" — Metronic
   `layout-21` und `demo1`).

   Sie löst Renés Idee 20 vom Vormittag **strukturell**: Der waagerechte Kopf war
   gerechnet 1.150 Pixel breit (Marke 110 + Unternehmen 230 + Suche 220 + Navigation 380
   + Konto 120 + Lücken) und gab an vier Stellen nach — jedes Nachgeben war eine Auskunft
   weniger. **Senkrecht kann nichts umbrechen**, und der Platz nach unten kostet nichts.

   Gebaut als **Raster am `body`**: zwei Spalten, die Leiste in der ersten, `main` in der
   zweiten. Dafür braucht es keinen einzigen Wrapper — `<main>` steht in der Vorlage
   weiterhin für sich, und auf der Anmeldeseite (kein `wer`, also kein `.mitleiste`)
   bleibt es eine gewöhnliche Spalte. Ein `<script>` ist `display: none` und damit kein
   Rasterfeld.

   **Kein Code von Metronic** — das ist ein gekauftes Tailwind-Theme (KeenThemes). Puls
   lädt keine fremde Bibliothek, und Tailwind wäre ein zweites Stilsystem neben dem
   Gestaltungskanon. Übernommen ist die Struktur, geschrieben hier. */
:root {
  --leiste: 260px;
}

body.mitleiste {
  display: grid;
  grid-template-columns: var(--leiste) minmax(0, 1fr);
  min-height: 100vh;
}
body.mitleiste > main { grid-column: 2; }

/* Die Leiste bleibt stehen, während der Inhalt rollt — bei zwanzig Punkten ist das der
   Unterschied zwischen einer Navigation und einer Liste am Seitenanfang. Sie rollt
   **selbst**, falls die Punkte einmal nicht mehr auf den Bildschirm passen. */
.seitenleiste {
  grid-column: 1; grid-row: 1; align-self: start;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 14px 14px;
  background: var(--grund); border-right: 1px solid var(--linie);
  box-shadow: inset 3px 0 0 var(--mandant);
}

.leistenkopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.marke { font-weight: 700; font-size: 19px; letter-spacing: .5px; text-decoration: none; color: var(--text); }
/* **Die Wortmarke in der Leiste** (15.09.2026, Renés Lieferung). Eng auf `.leistenkopf`
   bezogen: `.marke` ist im Admin-Tool auch die farbige Pille an Vorhaben, Ideen und
   Landkarte — eine Regel ohne diesen Bezug hätte aus jeder dieser Pillen einen
   Flächenkasten gemacht. Gezeigt wird die **kleine** Zeichnung ohne Untertitel. */
.leistenkopf > .marke { display: flex; align-items: center; min-width: 0; }
.leistenkopf > .marke img { display: block; height: 22px; width: auto; }
/* Der zweite Weg aus der Schublade — nur am Telefon sichtbar (siehe unten). */
.menuezu, .mobilleiste { display: none; }

/* Die Anmeldung zeigt die ganze Zeichnung — dort ist Platz für den Untertitel
   „Mein Team. Mein Tag. Alles im Blick.“, und sie ist die einzige Seite, auf der sich
   das System vorstellt. Sie wächst nicht über 300 Punkte hinaus und auf einem schmalen
   Telefon nicht über die Spalte. */
.anmeldemarke { margin: 0 0 14px; }
.anmeldemarke img { display: block; width: 100%; max-width: 300px; height: auto; }

/* ======================================================================
   Der Unternehmensschalter (15.09.2026, Renés Fund: „Das Dropdown sieht so alt aus und
   sehr versetzt“) — in der Leiste über die ganze Breite, und **die Klappe steht im
   Fluss**: Die Leiste rollt, und ein schwebender Kasten wird an ihrer Kante
   abgeschnitten.
   ====================================================================== */
.hauswahl { position: relative; }
.hauswahl > summary { display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; padding: 7px 9px; border-radius: var(--radius); font-size: 13.5px;
  border: 1px solid var(--linie); background: var(--flaeche); }
.hauswahl > summary::-webkit-details-marker { display: none; }
.hauswahl > summary::after { content: ""; width: 0; height: 0; margin-left: auto;
  border: 4px solid transparent; border-top-color: var(--gedaempft); }
.hauswahl[open] > summary::after { border-top-color: transparent;
  border-bottom-color: var(--gedaempft); margin-top: -4px; }
.hauswahl > summary:hover { border-color: var(--mandant); }
.hauswahl .punkt { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin: 0; }
.hauswahl .kuerzel { font-weight: 700; letter-spacing: .3px; }
.hauswahl > summary .name { color: var(--gedaempft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.hauswahl.einzeln { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  color: var(--gedaempft); padding: 7px 9px; }
.hauswahl .klappe { margin-top: 6px; background: var(--grund);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 6px; }
.hauswahl .klappekopf { margin: 4px 9px 7px; font-size: 11.5px; color: var(--gedaempft); }
.hauswahl .klappe form { margin: 0; }
.hauswahl .hauszeile { display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 5px; background: none; font: inherit;
  font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; }
.hauswahl .hauszeile:hover { background: var(--flaeche); }
.hauswahl .hauszeile.hier { background: var(--flaeche); font-weight: 600; }
.hauswahl .hauszeile .kuerzel { min-width: 26px; color: var(--gedaempft); font-size: 11.5px;
  letter-spacing: .3px; }

/* ======================================================================
   Die Navigation (19.09.2026 die Gruppen, 09.10.2026 senkrecht).

   **Die Gruppen stehen offen** (`<details open>` in der Vorlage): Waagerecht waren
   Klappen nötig, weil zehn Wörter nebeneinander keine Ordnung ergeben — senkrecht ist
   die Überschrift die Ordnung, und jeder Punkt ist einen Klick entfernt statt zwei.
   Zuklappen geht weiter, ohne Skript.

   **Die Erklärung je Punkt liegt im `title`** und nicht als zweite Zeile: Zwanzig Punkte
   mit Unterzeile wären eine Wand, und im Admin-Tool gilt Renés Vorgabe vom 13.09.2026 —
   *mehr mit Mouse-over arbeiten statt lange Sätze.*
   ====================================================================== */
.hauptnavigation { display: flex; flex-direction: column; gap: 2px; }
.hauptnavigation a { display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: var(--radius); color: var(--gedaempft);
  text-decoration: none; font-size: 13.5px; }
.hauptnavigation a:hover { background: var(--flaeche); color: var(--text); }
/* **Wo man steht, trägt eine Fläche und einen Strich in Mandantenfarbe** — Farbe allein
   ist keine Information für jeden (WCAG 1.4.1), deshalb zusätzlich das Fettgewicht. */
.hauptnavigation a.hier { background: var(--flaeche); color: var(--text); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--mandant); }

.navgruppe { margin-top: 8px; }
.navgruppe > summary { cursor: pointer; list-style: none; display: flex;
  align-items: center; gap: 5px; padding: 4px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gedaempft); }
.navgruppe > summary::-webkit-details-marker { display: none; }
.navgruppe > summary::after { content: ""; width: 0; height: 0; margin-left: auto;
  border: 4px solid transparent; border-top-color: var(--linie); }
.navgruppe[open] > summary::after { border-top-color: transparent;
  border-bottom-color: var(--linie); margin-top: -4px; }
.navgruppe > summary:hover { color: var(--text); }
.navgruppe > summary:hover::after { border-top-color: var(--gedaempft); }
.navgruppe[open] > summary:hover::after { border-top-color: transparent;
  border-bottom-color: var(--gedaempft); }
.navgruppe .klappe { display: flex; flex-direction: column; gap: 2px; }

/* **Das Konto steht unten** (09.10.2026, Ideen 20 und 23) — derselbe runde Knopf mit
   Initialen wie in Puls_Dienstplan seit dem 15.09.2026, hier mit dem Namen daneben:
   *zwei Bauformen für dieselbe Sache sind das Gegenteil von Wiedererkennung.*

   `margin-top: auto` schiebt es an den Fuß der Leiste, und **die Klappe öffnet nach
   oben**: Nach unten läge sie außerhalb des Bildschirms. */
.ich { position: relative; margin-top: auto; }
.ich > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 9px; padding: 6px; border-radius: var(--radius); }
.ich > summary:hover { background: var(--flaeche); }
.ich > summary::-webkit-details-marker { display: none; }
.ich .initialen { flex: 0 0 auto;
  width: var(--hoehe-klein, 36px); height: var(--hoehe-klein, 36px); border-radius: 50%;
  background: var(--mandant); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 12.5px; letter-spacing: .3px; }
.ich .kontoname { font-size: 13.5px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.ich .klappe { position: absolute; z-index: 60; bottom: calc(100% + 8px); left: 0; right: 0;
  background: var(--grund); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: 0 10px 28px rgba(16, 24, 40, .12); padding: 6px; }
.ich .klappename { margin: 6px 9px 8px; font-weight: 700; }
.ich .klappe a, .ich .klappe button { display: block; width: 100%; padding: 7px 9px;
  border-radius: 5px; border: 0; background: none; font: inherit; font-size: 13.5px;
  color: var(--text); text-align: left; cursor: pointer; text-decoration: none; }
.ich .klappe a:hover, .ich .klappe button:hover { background: var(--flaeche); }
.ich .klappe form { margin: 0; }

/* **Am Telefon wird die Leiste eine Schublade** — mit `:target`, also ohne Skript.
   Ein `<details>` wäre der naheliegende Weg und der falsche: Es müsste am Rechner offen
   und am Telefon zu sein, und das kann kein `@media` entscheiden. Der Griff liegt in
   einem festen Streifen oben; dort stehen Marke, Farbpunkt und Kürzel **zum Lesen** —
   gewechselt wird in der Schublade. */
@media (max-width: 900px) {
  body.mitleiste { display: block; padding-top: 52px; }
  .mobilleiste { display: flex; align-items: center; gap: 10px;
    position: fixed; inset: 0 0 auto 0; z-index: 150; height: 52px; padding: 0 12px;
    background: var(--grund); border-bottom: 1px solid var(--linie);
    box-shadow: inset 0 -3px 0 var(--mandant); }
  .mobilleiste img { display: block; }
  .mobilleiste .punkt { margin: 0 0 0 auto; }
  .mobilleiste .kuerzel { font-weight: 700; font-size: 13px; letter-spacing: .3px; }
  .menueauf { display: flex; align-items: center; justify-content: center;
    width: var(--hoehe-klein, 36px); height: var(--hoehe-klein, 36px);
    border-radius: var(--radius); color: var(--text); text-decoration: none; }
  .menueauf:hover { background: var(--flaeche); }

  .seitenleiste { position: fixed; z-index: 200; inset: 0 auto 0 0;
    width: 272px; max-width: 86vw; height: 100%;
    transform: translateX(-102%); transition: transform .18s ease-out;
    box-shadow: none; border-right: 1px solid var(--linie); }
  .seitenleiste:target { transform: none; box-shadow: 0 0 0 100vmax rgba(16, 24, 40, .35); }
  .menuezu { display: flex; align-items: center; justify-content: center;
    width: var(--hoehe-klein, 36px); height: var(--hoehe-klein, 36px); flex: 0 0 auto;
    border-radius: var(--radius); color: var(--gedaempft); text-decoration: none;
    font-size: 15px; }
  .menuezu:hover { background: var(--flaeche); color: var(--text); }
}
/* Wer Bewegung abgestellt hat, hat einen Grund dafür — eine Schublade ist kein Anlass,
   ihn zu übergehen (dieselbe Regel wie bei Puls_Spiele). */
@media (prefers-reduced-motion: reduce) {
  .seitenleiste { transition: none; }
}

/* ----------------------------------------------------------------- Fläche */
main { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; }
main.schmal { max-width: 460px; }
h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 32px 0 10px; }
.hinweis { color: var(--gedaempft); margin: 0 0 24px; }

.karte { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }

/* ---------------------------------------------------------------- Tabelle */
table { width: 100%; border-collapse: collapse; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: 13px; font-weight: 600; color: var(--gedaempft); text-transform: uppercase; letter-spacing: .4px; }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--flaeche); }
td a { color: var(--text); }

/* --------------------------------------------------------------- Formular */
label { margin-top: var(--a4); }
label:first-child, .feld > label, .karte.zeile label { margin-top: 0; }
label .neben { font-weight: 400; color: var(--gedaempft); }
.feldhinweis { color: var(--gedaempft); font-size: .84rem; margin: var(--a1) 0 0; }

/* **Knöpfe und Meldungen stehen in `puls-ui.css`** (24.09.2026). Sie standen hier und in
   `dienstplan.css` mit verschiedenen Maßen — 9 gegen 9 Pixel Innenabstand sah gleich aus,
   ergab aber mit verschiedenen Rundungen zwei Knopfformen in einem System. */

/* ---------------------------------------------------------------- Marken */
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: baseline; }
/* `.merkmal` steht in `puls-ui.css`; `aus` ist die Besonderheit des Admin-Tools. */
.merkmal.aus { color: var(--fehler-text); background: var(--fehler-fein); }
.rechts { text-align: right; }
/* **Die zweite Zeile unter einem Namen** — die Erklärung, die in der Tabelle mitläuft.
   Sie stand bis zum 15.09.2026 nur in `dienstplan.css`, wurde aber auch in fünf Vorlagen
   des Admin-Tools benutzt (Struktur, Arbeitsbereich, Konto, Ausbau): Dort lief sie
   ungestaltet in derselben Größe wie der Name mit. */
.wochensumme { display: block; margin-top: 3px; color: var(--gedaempft); font-size: 12px; }

.kopfzeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }

/* ------------------------------------------------- Am Telefon (13.09.2026)
   Der letzte offene Punkt aus Baustein 1 der E2N-Abnahmeliste. Das Admin-Tool ist ein
   Werkzeug am Schreibtisch — aber René liest es unterwegs, und eine Seite, die man
   seitwärts schieben muss, liest niemand.

   Die Regel dabei: **nichts wegnehmen, nur umbrechen.** Wer am Telefon weniger sieht,
   sucht es am Rechner vergeblich. Breite Tabellen bekommen deshalb einen eigenen
   Schieber statt gekürzter Spalten — eine Tabelle darf wandern, die Seite nicht. */
@media (max-width: 860px) {
  .kopfzeile { flex-direction: column; gap: 12px; }
  .kopfzeile form, .kopfzeile .schaltergruppe { width: 100%; }
  /* Eine Tabelle wandert in ihrem eigenen Rahmen — die Seite bleibt stehen. */
  .karte > table, .tafel > table { display: block; overflow-x: auto; }
}

@media (max-width: 640px) {
  /* In der Schublade ist Platz für den ganzen Namen — die Regeln der Leiste stehen beim
     Streifen oben (`@media (max-width: 900px)`). Hier geht es nur noch um die Fläche. */
  main { padding: 16px 12px 48px; }

  h1 { font-size: 22px; }
  h2 { font-size: 17px; }

  /* Zahlenkacheln: zwei je Reihe statt einer langen Schlange. */
  .zahlen { gap: 8px; }
  .zahl { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 10px 12px; }
  .zahl .wert { font-size: 21px; }

  .hauswand { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .kacheln, .modulwand { grid-template-columns: 1fr; }

  /* Jede Zeile aus Feldern bricht um, statt sich zu quetschen. */
  .zeile { flex-direction: column; align-items: stretch; }
  .zeile > div { flex: 1 1 auto !important; }
  .knopfzeile { flex-wrap: wrap; }
  .knopfzeile button, .knopfzeile .knopf { flex: 1 1 auto; }

  /* Ein Fenster füllt am Telefon den Schirm — ein Kasten in der Mitte mit 8 Pixeln
     Rand ringsum ist am Telefon kein Fenster, sondern ein Ärgernis. */
  dialog.popup { width: 100%; max-width: none; max-height: 100%; margin: 0;
    border-radius: 0; }
  dialog.popup .popupteil { max-height: none; }

  table { font-size: 13px; }
  table th, table td { padding: 7px 8px; }
}

/* --------------------------------------------------------------- Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.kachel {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  background: var(--grund); border: 1px solid var(--linie); border-left: 3px solid var(--mandant);
  border-radius: var(--radius); padding: 16px 18px; text-decoration: none; color: var(--text);
}
.kachel:hover { border-color: var(--mandant); }
.kachel.offen { border-left-color: var(--linie); }
.kachelname { font-weight: 600; }
.kachelerklaerung { color: var(--gedaempft); font-size: 13px; flex: 1; }

/* ------------------------------------------------------------ Suchzeile */
.suchzeile { display: flex; gap: 10px; margin-bottom: 18px; }
.suchzeile input[type=text] { max-width: 320px; }
.suchzeile select { max-width: 200px; }
.karte.zeile { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.karte.zeile > div { flex: 1; min-width: 200px; }
.karte.zeile label { margin-top: 0; }
.karte.knopfzeile { display: flex; gap: 12px; align-items: center; }

/* Rechtematrix: viele Spalten, deshalb eigener Rollbereich statt gequetschter Tabelle. */
.matrix { overflow-x: auto; }
.matrix table { min-width: 760px; }
.matrix select { min-width: 130px; }
.matrix td { vertical-align: middle; }

/* Die Reihe aus Wahlknöpfen: Module und Arbeitsbereiche eines Unternehmens, Filter über
   einer Liste. **Sie hieß `.schalter` und kollidierte damit mit der Schaltfläche des
   Kanons** (umbenannt am 24.10.2026, Renés Notiz an Idee 8) — dieselbe Dopplung stand in
   `dienstplan.css`, und dort hat sie die Kästchen im Mitteilungsfenster unsichtbar
   gemacht. *Eine Datei, die für alle neun Oberflächen gilt, darf keinen Namen belegen,
   den eine davon schon anders benutzt* — und umgekehrt. */
/* Die **Form** der Wahlreihe steht im Kanon (Abschnitt 8b) — hier nur der Zustand:
   Im Admin-Tool trägt der gewählte Filter die **Mandantenfarbe**, denn sie sagt, in
   wessen Unternehmen man arbeitet. */
.wahlreihe button.an { background: var(--mandant); border-color: var(--mandant);
  color: #fff; }
.wahlreihe button.aus { background: var(--grund); border-color: var(--linie);
  color: var(--gedaempft); }
.wahlreihe button[disabled] { opacity: .55; cursor: default; }
h3 { font-size: 14px; font-weight: 600; margin: 20px 0 4px; color: var(--gedaempft);
     text-transform: uppercase; letter-spacing: .4px; }

/* Einmalig sichtbare Zugangsdaten: deutlich, aber nicht als Fehler. */
.karte.hervor { border-left: 3px solid var(--mandant); }
.nachricht {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 14px 16px; white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; overflow-x: auto; margin: 0;
}

/* Ein Geheimnis, das absichtlich lesbar ist (Kennwort des Eingangs): groß genug zum
   Abtippen, deutlich genug, um es nicht mit Fließtext zu verwechseln. */
code.geheimnis { font-size: 17px; letter-spacing: 1px; background: #F4F6F8;
  border: 1px solid #DDE2E7; border-radius: 6px; padding: 4px 10px; user-select: all; }


/* ------------------------------------------------------------------ Fenster */
/* Dieselbe Machart wie in Puls_Dienstplan: Hinzufügen und Bearbeiten laufen über ein
   Fenster. Die Formen sind hier eigenständig — das Admin-Tool hat ein eigenes
   Stylesheet, und das soll so bleiben. */
dialog.popup { border: none; border-radius: 10px; padding: 0; width: min(640px, 94vw);
  box-shadow: 0 24px 60px rgba(0,0,0,.28); color: var(--text); background: #fff; }
dialog.popup::backdrop { background: rgba(16, 21, 28, .55); }
.popupkopf { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 20px 22px 12px; }
.popupkopf h2 { margin: 0; font-size: 20px; }
.popupkopf p { margin: 2px 0 0; font-size: 13px; }
.schliessen { font-size: 24px; line-height: 1; padding: 0 6px; background: none;
  border: none; cursor: pointer; }
/* Der **eine** Rollbereich des Fensters. Gerechnet statt geschätzt: Der Kopf und die
   Reiter darüber brauchen rund 150 Pixel, der Rest gehört dem Inhalt — `70vh` ließ auf
   einem Bildschirm von 730 Pixeln 200 Pixel ungenutzt und schnitt trotzdem ab. */
.popupteil { padding: 18px 22px 22px; max-height: calc(100vh - 150px); overflow-y: auto; }
.popupteil .knopfzeile { margin-top: 18px; }
.popupteil .reihe { display: flex; gap: 14px; flex-wrap: wrap; }
.popupteil .reihe > div { flex: 1; min-width: 150px; }

/* -------------------------------------------------------------- Vorhaben */
.vorhaben { margin-bottom: 10px; }
.vorhaben .kartenkopf { display: flex; align-items: flex-start; gap: 14px;
  justify-content: space-between; }
.vorhabentext { margin: 8px 0 0; white-space: pre-wrap; }
.notizen { margin-top: 12px; border-top: 1px solid var(--linie); padding-top: 10px; }
.notiz { margin: 0 0 6px; font-size: 13px; white-space: pre-wrap; }
.vorschau { background: #F2F4F6; border: 1px solid var(--linie); border-radius: 6px;
  padding: 12px 14px; font-size: 12.5px; overflow-x: auto; white-space: pre-wrap; }
.vorschau.lang { max-height: 70vh; overflow-y: auto; }

/* Rechte je Person (12.09.2026) — die Tafel auf der Kontoseite.
   Drei Spalten, die zusammen die Frage beantworten, die René gestellt hat: Was gibt
   die Rolle, was gilt wirklich, und wie ändere ich es für diesen einen Menschen. */
.rechtetafel td, .rechtetafel th { vertical-align: middle; }
.rechtetafel .modulzeile td { background: var(--flaeche); font-weight: 700; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--gedaempft); }
.rechtetafel tr.ausgeschaltet { opacity: .55; }
.rechtetafel .stufenform { display: flex; gap: 6px; align-items: center; }
.rechtetafel .stufenform select { max-width: 150px; }
.stufe { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px;
  padding: 2px 9px; background: #E8F1FA; color: #2A5FA8; }
.stufe.schreiben { background: #E6F4EE; color: #26634A; }
.stufe.nichts { background: var(--flaeche); color: var(--gedaempft); }

.hinweisfeld { background: #FFF9EE; border: 1px solid #F0DFBC; border-radius: var(--radius);
  padding: 12px 16px; margin: 0 0 16px; color: #6B5218; }
.hinweisfeld a { color: #6B5218; }

/* Die Modultafel am Konto — dieselbe Bauform wie die Rechtetafel, damit man die drei
   Stufen als eine Abfolge liest und nicht als zwei Systeme. */
.modultafel { margin-bottom: 18px; }
.modultafel td, .modultafel th { vertical-align: middle; }
.modultafel tr.ausgeschaltet { opacity: .55; }
.modultafel .stufenform { display: flex; gap: 6px; align-items: center; }
.modultafel .stufenform select { max-width: 160px; }

/* Die Modulwand auf der Startseite (12.09.2026, Renés Vorgabe: „alle Module in
   Kachelform … was haben wir? Worauf bezieht sich das Modul, lässt es sich verbinden?
   Wie kommen die Mitarbeiter auf das Modul?“).

   Jede Kachel ist ein Steckbrief, nicht ein Knopf: Sie wird gelesen. Deshalb eine
   Definitionsliste darin statt vier Absätze — Bezug, Zugang, Daten, Verbindungen
   stehen bei jedem Modul an derselben Stelle, und man vergleicht sie mit dem Auge.
   Der farbige Streifen links ist der Stand; ein zugeschaltetes Modul bleibt sichtbar,
   nur blass. */
.modulwand { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px; margin-bottom: 26px; }
.modulkachel { background: var(--grund); border: 1px solid var(--linie);
  border-left: 5px solid var(--stand); border-radius: var(--radius); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; }
.modulkachel.zu { opacity: .62; }
.modulkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.modulkopf h3 { margin: 0; font-size: 17px; }
.standmarke { color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 11.5px;
  font-weight: 700; white-space: nowrap; }
.modulsatz { margin: 0; color: var(--gedaempft); font-size: 13.5px; }

dl.steckbrief { margin: 0; display: grid; grid-template-columns: 108px 1fr;
  gap: 5px 10px; font-size: 13px; }
dl.steckbrief dt { color: var(--gedaempft); font-weight: 600; }
dl.steckbrief dd { margin: 0; }
.verbindung { display: inline-block; border: 1px solid var(--linie); border-radius: 4px;
  padding: 1px 7px; margin: 0 4px 4px 0; font-size: 12px; background: var(--flaeche); }
.verbindung.zu { opacity: .5; border-style: dashed; }

.modulstand { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.modulstand .knopf { margin-left: auto; }
.modulrechte { display: flex; flex-wrap: wrap; gap: 6px; }
.rechtchip { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: #E8F1FA; color: #2A5FA8; text-decoration: none; }
.rechtchip.aus { background: var(--flaeche); color: var(--gedaempft); }

/* Die Tafel der Arbeitsbereiche unter Unternehmen (12.09.2026). Sie beantwortet die
   Frage, die vorher offen war: Was ist dieser Bereich, und führt er eine
   Tagesansicht? */
.bereichstafel { margin: 12px 0 6px; }
.bereichstafel td, .bereichstafel th { vertical-align: middle; }
.bereichstafel .zeile { margin: 0; align-items: center; }
.bereichstafel .zeile button { width: auto; }

/* ------------------------------------------------------------- Landkarte
   Renés Wunsch vom 12.09.2026: eine Zeichnung, die zeigt, wie alles zusammenhängt —
   mit der Möglichkeit, an jeden Kasten eine Notiz zu hängen.

   Die Tafeln sind SVG, weil eine Zeichnung eine Zeichnung ist: Sie skaliert auf jedem
   Bildschirm, bleibt beim Vergrößern scharf und lässt sich ausdrucken. Auf schmalen
   Geräten wird sie nicht umgebrochen (das ginge nur, indem man sie zerschneidet),
   sondern seitlich verschiebbar — dieselbe Lösung wie bei breiten Tabellen. */
.tafel { background: var(--grund); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 8px;
  overflow-x: auto; }
/* **Nur die Zeichnung selbst, nicht jedes SVG in einer Tafel** (20.09.2026). Die Regel
   galt ohne `>` für alles, was irgendwo in einer `.tafel` steckt — und blies damit die
   neuen Modulsymbole auf 760 Pixel Mindestbreite auf (Renés Fund: „alle wild im Block“).
   Die Sparklines blieben verschont, weil `.kpi .funke` zwei Klassen hat und gewinnt; ein
   frisches Symbol mit **einer** Klasse verliert. **Eine Regel, die über einen ganzen
   Container greift, ist eine Falle für alles, was später hineinkommt.** */
.tafel > svg { display: block; width: 100%; min-width: 760px; height: auto; }

.kasten { cursor: pointer; }
.kasten .rahmen { fill: var(--grund); stroke: var(--linie); stroke-width: 1.5; }
.kasten .streifen { rx: 0; }
.kasten:hover .rahmen { stroke: var(--mandant); stroke-width: 2; }
.kasten:focus { outline: none; }
.kasten:focus .rahmen { stroke: var(--mandant); stroke-width: 2.5; }
.kasten .titel { font: 600 15px var(--schrift); fill: var(--text); }
.kasten .unter { font: 400 12px var(--schrift); fill: var(--gedaempft); }
.kasten .zahl { font: 600 11.5px var(--schrift); fill: var(--gedaempft);
  letter-spacing: .2px; }
/* „Fehlt noch“ heißt: die Stelle ist im Plan offengehalten, aber nichts steht darin. */
.kasten.fehlt .rahmen { stroke-dasharray: 6 5; fill: var(--flaeche); }
.kasten.fehlt .titel { fill: var(--gedaempft); }
.kasten.geplant .rahmen { stroke-dasharray: 6 5; }
/* „Fremd“ ist etwas anderes als „fehlt“: Es läuft — nur eben nicht in Puls. Deshalb
   ein voller, aber andersfarbiger Rahmen auf getönter Fläche, nicht gestrichelt. */
.kasten.fremd .rahmen { fill: #FFF9EE; stroke: #D7B877; stroke-width: 2; }
.kasten.fremd:hover .rahmen { stroke: #B88E2B; }
.notizmarke { fill: var(--warnung); }
.notizmarke.erledigt { fill: var(--gedaempft); }
.notizzahl { font: 700 11px var(--schrift); fill: #fff; text-anchor: middle; }

.pfeil { fill: none; stroke: #A8B0BA; stroke-width: 1.6; }
.pfeil.geplant { stroke-dasharray: 5 4; }
marker path { fill: #A8B0BA; }
.kantentext { font: 400 11.5px var(--schrift); fill: var(--gedaempft); }
.bandtext { font: 400 11.5px var(--schrift); fill: var(--gedaempft); }
.bandtext.stark { font-weight: 700; fill: var(--text); }
.band { stroke: var(--linie); stroke-width: 1; }

.legende { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  margin: 0 0 16px; font-size: 12.5px; color: var(--gedaempft); }
.legendenpunkt { display: inline-flex; align-items: center; gap: 6px; }
.legendenpunkt i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.legendenpunkt.gestrichelt i { background: var(--flaeche);
  border: 1.5px dashed #A8B0BA; }
.legendenpunkt i.notiz { border-radius: 50%; background: var(--warnung); }
.legendenpunkt.fremdzeichen i { background: #FFF9EE; border: 2px solid #D7B877; }

/* Die Notizen im Fenster: Text links, die beiden Knöpfe rechts — und eine
   eingearbeitete Notiz bleibt stehen, nur blass. Wer wissen will, warum etwas so ist,
   liest den Weg dorthin. */
.notizzeile { display: flex; gap: 12px; align-items: flex-start;
  justify-content: space-between; border-bottom: 1px solid var(--linie);
  padding-bottom: 6px; margin-bottom: 6px; }
.notizzeile:last-child { border-bottom: none; }
.notizzeile.erledigt { opacity: .55; }
.notizknoepfe { display: flex; gap: 12px; flex: none; }
.notizknoepfe form { display: inline; }
tr.erledigt { opacity: .6; }
.renes-wort { margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--mandant);
  background: var(--flaeche); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px; }
ul.punkte { margin: 12px 0 0; padding-left: 20px; }
ul.punkte li { margin-bottom: 5px; }

/* ------------------------------------------------- Dashboard (13.09.2026)
   Renés Vorgabe: „Das Dashboard braucht wichtige Kennzahlen und wenig Schriften —
   wichtige Details statt viel Erklärung. Mehr mit Mouse-over arbeiten statt lange
   Sätze.“ Deshalb: die Zahl groß, das Wort klein, der Satz im `title`.

   `.zahlen` gab es bisher nur in myPuls und im Dienstplan — die Kennzahlenseite des
   Admin-Tools stand deshalb ungestaltet da. Jetzt hier, mit denselben Namen: Wer die
   Reihe einmal verstanden hat, versteht sie in jedem Modul. */
.zahlen { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0 18px; }
.zahl {
  flex: 1 1 150px; min-width: 130px; border: 1px solid var(--linie);
  border-radius: 8px; padding: 12px 14px; background: var(--grund);
  text-decoration: none; color: inherit; display: block;
}
a.zahl:hover { border-color: var(--mandant); }
.zahl.hervor { border-color: var(--warnung); box-shadow: inset 3px 0 0 var(--warnung); }
.zahl .wert { display: block; font-size: 26px; font-weight: 700; line-height: 1.15;
  letter-spacing: -.5px; }
.zahl .wert.minus { color: var(--warnung); }
.zahl .wert.plus { color: var(--gut); }
.zahl .was { display: block; color: var(--gedaempft); font-size: 12.5px; margin-top: 2px; }

/* Die Häuser der Gruppe — Farbe als Zuordnung, nicht als Zierde. Ein Klick wechselt
   den Mandanten; deshalb ist jede Kachel ein Knopf und kein Kasten mit Verweis. */
.hauswand { display: grid; gap: 12px; margin: 10px 0 18px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hauskachel-form { margin: 0; display: flex; }
.hauskachel {
  flex: 1; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--grund); border: 1px solid var(--linie); border-radius: 8px;
  padding: 12px 14px; border-left: 4px solid var(--haus, var(--gedaempft));
}
.hauskachel:hover { border-color: var(--haus, var(--mandant)); }
.hauskachel.aktiv { background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--haus); }
.hauskuerzel { display: block; font-size: 20px; font-weight: 700; color: var(--haus); }
.hausname { display: block; font-size: 12.5px; color: var(--gedaempft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hauszahlen { display: flex; gap: 12px; margin-top: 8px; font-size: 14px;
  font-weight: 600; }
.hauszahlen .minus { color: var(--warnung); }

/* Der Fortschrittsbalken auf /ausbau. */
.fortschrittsbalken span { display: block; height: 100%; }
table.schmal td { padding-top: 4px; padding-bottom: 4px; font-size: 13px; }

/* Die Suche über alles — im Kopf, weil sie von überall gebraucht wird. */
/* In der Seitenleiste nimmt die Suche die ganze Breite — sie muss keine Pixel
   mehr gegen die Navigation verteidigen (09.10.2026, Idee 23). */
.suchfeld { margin: 0; }
.suchfeld input { width: 100%; padding: 6px 10px; font-size: 13.5px;
  border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); }
.suchfeld input:focus { background: var(--grund); outline: 2px solid var(--mandant);
  outline-offset: -1px; }

/* **Soll gegen Ist im Wachbericht** (13.09.2026, Renés Vorgabe): Die tatsächliche Zahl
   ist grün, wenn sie zum Soll passt, und orange, wenn nicht. Zusätzlich zur Farbe steht
   die Abweichung als Zahl daneben — Farbe allein ist keine Information für jeden. */
.besetzung { display: inline-block; font-weight: 700; padding: 1px 8px; border-radius: 12px;
             font-variant-numeric: tabular-nums; }
.besetzung.stimmt { background: #E9F5EC; color: #1E7B39; border: 1px solid #BFE3CA; }
.besetzung.weicht { background: #FDF1E7; color: #9A5B14; border: 1px solid #F0D2B0; }
.besetzung .soll { font-weight: 500; opacity: .75; font-size: 12px; }

/* **Die Leiste eines Moduls** (13.09.2026, Renés Einwand „die Buttons hängen überall
   herum“). Sie steht auf jeder Seite des Sicherheitsdienstes an derselben Stelle und
   zeigt, was es dort gibt — Knöpfe bleiben für das, was auf der Seite selbst getan wird. */
.modulleiste { display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 22px;
               border-bottom: 1px solid var(--linie); }
.modulleiste a { padding: 9px 14px; color: var(--gedaempft); text-decoration: none;
                 font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent;
                 margin-bottom: -1px; border-radius: 6px 6px 0 0; }
.modulleiste a:hover { color: var(--text); background: var(--flaeche); }
.modulleiste a.hier { color: var(--text); border-bottom-color: var(--mandant, #8A8F98); }

/* Ein Block innerhalb einer Karte: Überschrift, Inhalt, darunter die Erklärung. */
.abschnitt + .abschnitt { margin-top: 22px; padding-top: 18px;
                          border-top: 1px solid var(--linie); }
.abschnitt h3 { margin: 0 0 4px; font-size: 15px; }
.abschnitt .worum { margin: 0 0 12px; color: var(--gedaempft); font-size: 13px; }

/* **Ein Monat als Zeile, die sich öffnet** (13.09.2026, Renés Einwand: „Die Übersicht bei
   Finanzen ist viel zu lang — wie wäre es, wenn es eine Zeile gibt pro Monat, die sich
   als Dropdown aufmachen lässt“). Zwölf aufgeschlagene Formulare sind keine Übersicht. */
.monatszeile { padding: 0; }
.monatszeile > summary { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap;
                         padding: 12px 16px; cursor: pointer; list-style: none; }
.monatszeile > summary::-webkit-details-marker { display: none; }
.monatszeile > summary::before { content: "▸"; color: var(--gedaempft); font-size: 12px; }
.monatszeile[open] > summary::before { content: "▾"; }
.monatszeile[open] > summary { border-bottom: 1px solid var(--linie); }
.monatszeile > summary:hover { background: var(--flaeche); }
.monatszeile .monat { font-weight: 700; font-variant-numeric: tabular-nums;
                      min-width: 70px; }
.monatszeile .stunden, .monatszeile .anteil { color: var(--gedaempft); font-size: 13px;
                                              min-width: 90px; }
.monatszeile .betrag { font-variant-numeric: tabular-nums; font-weight: 600;
                       min-width: 110px; text-align: right; }
.monatszeile .betrag.plus { color: var(--gut); }
.monatszeile .betrag.minus { color: var(--warnung); }
.monatszeile .klappinhalt { padding: 16px; }

/* **Kacheln mit Beträgen brauchen mehr Platz** (13.09.2026, Renés Einwand: „Die
   Umsatz-Kacheln wirken zu klein oder die Zahlen darin zu groß“). Eine sechsstellige
   Summe passt nicht in dieselbe Kachel wie eine Prozentzahl — also wächst die Kachel
   mit ihrem Inhalt, statt die Zahl zu quetschen. */
.zahl.geld { min-width: 165px; }
.zahl.geld .wert { font-size: 20px; letter-spacing: -0.2px; }

/* **Eine Auswahl ist kein Formular, sondern ein Schalter** (13.09.2026, Renés Einwand:
   „Das Anzeigen des Jahres als Dropdown ist viel zu lang — der Button Zeigen daneben“).
   Ein Feld mit Beschriftung darüber beansprucht drei Zeilen Höhe und die halbe Breite;
   für die Wahl eines Monats oder Jahres genügt eine Zeile in Inhaltsbreite. */
.wahlzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
             margin: 0 0 16px; }
.wahlzeile label { margin: 0; color: var(--gedaempft); font-size: 13px; font-weight: 600; }
.wahlzeile select { width: auto; min-width: 0; padding: 6px 26px 6px 9px; }
.wahlzeile button { padding: 7px 14px; }
.wahlzeile .zahlen { margin: 0; }

/* ===================================================================
   Das Dashboard des Admin-Tools (13.09.2026, neu nach Renés Einwand:
   „sehr zusammengebaut … einzelne Module verstecken sich irgendwo …
   lebhafter, aber übersichtlich“).
   =================================================================== */

/* **Die Sichtwahl** — ganze Gruppe oder ein Haus. Sie ändert die Zahlen, nicht den
   Mandanten; deshalb sieht sie aus wie ein Filter und nicht wie ein Wechsel. */
.sichtwahl { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.sichtwahl a { padding: 6px 14px; border-radius: 20px; text-decoration: none;
               font-weight: 600; font-size: 13.5px; color: var(--gedaempft);
               border: 1px solid var(--linie); background: var(--grund); }
.sichtwahl a:hover { color: var(--text); border-color: var(--gedaempft); }
.sichtwahl a.hier { color: #fff; background: var(--haus, var(--text));
                    border-color: var(--haus, var(--text)); }

/* Die Kennzahlen oben dürfen größer sein als anderswo — sie sind der erste Blick. */
.zahlen.gross .zahl { min-width: 128px; padding: 14px 16px; }
.zahlen.gross .wert { font-size: 30px; }
.zahlen.gross .zahl.geld .wert { font-size: 22px; }

/* **Die Modulwand** — jede Kachel trägt die Farbe ihres Moduls, eine Zahl aus dem
   Betrieb und den Bezug, an dem sie hängt. Die Farbe ist Wiedererkennung: Wer die
   Kachel einmal gesehen hat, findet sie beim nächsten Mal, ohne zu lesen. */
.modulwand { display: grid; gap: 12px; margin: 0 0 26px;
             grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.modulkachel { display: flex; flex-direction: column; gap: 8px; text-decoration: none;
               color: var(--text); background: var(--grund); border: 1px solid var(--linie);
               border-radius: var(--radius); padding: 14px 16px 12px;
               border-top: 3px solid var(--modul, var(--gedaempft)); transition: none; }
.modulkachel:hover { border-color: var(--modul, var(--gedaempft));
                     box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.modulkachel .kopf { display: flex; align-items: baseline; gap: 8px; }
.modulkachel .name { font-weight: 700; font-size: 15px; color: var(--modul, var(--text)); }
.modulkachel .stand { font-size: 11.5px; color: var(--gedaempft); border: 1px solid var(--linie);
                      border-radius: 10px; padding: 1px 7px; }

/* **Das Symbol in seinem Feld** (20.09.2026, Plan 2.46 Nr. 344). Die Fläche trägt die
   Modulfarbe mit 12 % Deckung — kräftig genug zur Wiedererkennung, ruhig genug, dass
   zehn Kacheln nebeneinander nicht flimmern. `color-mix` steht in jedem Browser seit
   2023; wo es fehlt, greift die Zeile davor, und die Kachel bleibt benutzbar. */
.modulkachel .symbolfeld { position: relative; width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center; border-radius: 13px;
  background: var(--flaeche); color: var(--modul, var(--gedaempft));
  background: color-mix(in srgb, var(--modul, #4A5568) 12%, transparent); }
.modulkachel:hover .symbolfeld {
  background: color-mix(in srgb, var(--modul, #4A5568) 20%, transparent); }
/* Das Symbol trägt seine Maße im Attribut (24/26 Punkte). `min-width: 0` und `flex: none`
   stehen da, damit eine breite Regel wie die oben es nie wieder auseinanderzieht. */
.modulsymbol { display: block; width: auto; height: auto; min-width: 0; flex: none; }

/* **Die Marke am Symbol** — wie die Zahl an einer App auf dem Telefon. Sie steht nur da,
   wenn wirklich etwas offen ist (`gruppe.modulzahlen` schreibt keine Null). */
.modulkachel .marke { position: absolute; top: -6px; right: -7px; min-width: 21px;
  height: 21px; padding: 0 5px; border-radius: 999px; background: #C4442B; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 21px; text-align: center;
  font-variant-numeric: tabular-nums; border: 2px solid var(--grund); }

.modulkachel .klemmt { color: #A53722; font-size: 13px; font-weight: 600; }
.modulkachel .ruhig { color: var(--gedaempft); font-size: 12.5px; }
.modulkachel .fuss { color: var(--gedaempft); font-size: 12px; line-height: 1.35;
                     display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                     overflow: hidden; }

/* Das Protokoll klappt auf — es beantwortet keine Frage des Morgens. */
.karte.letzte { padding: 0; }
.karte.letzte > summary { padding: 12px 16px; cursor: pointer; font-weight: 600;
                          color: var(--gedaempft); }
.karte.letzte > summary:hover { color: var(--text); }
.karte.letzte table { margin: 0; }

/* **Tafeln** — Karten nebeneinander, jede mit einer Frage im Kopf. */
.tafeln { display: grid; gap: 14px; margin: 0 0 24px;
          grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.tafel { background: var(--grund); border: 1px solid var(--linie);
         border-radius: var(--radius); padding: 16px 18px; }
.tafel.voll { margin: 0 0 24px; }
.tafel > header { display: flex; align-items: baseline; justify-content: space-between;
                  gap: 12px; margin-bottom: 12px; }
.tafel > header h2 { margin: 0; font-size: 15px; }
.tafel > header .gedaempft { font-size: 12.5px; }

/* **Eine Zeile, die sich öffnet** (13.09.2026, Renés Einwand zur Länge der
   Unternehmensseite). Dasselbe Muster wie bei den Finanzmonaten: In der Zeile steht,
   was man wissen will; was man ändern will, liegt eine Klappe tiefer. */
.karte.zeilenkarte { padding: 0; margin-bottom: 8px; }
.zeilenkarte > summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                         padding: 12px 16px; cursor: pointer; list-style: none; }
.zeilenkarte > summary::-webkit-details-marker { display: none; }
.zeilenkarte > summary::before { content: "▸"; color: var(--gedaempft); font-size: 12px; }
.zeilenkarte[open] > summary::before { content: "▾"; }
.zeilenkarte[open] > summary { border-bottom: 1px solid var(--linie); }
.zeilenkarte > summary:hover { background: var(--flaeche); }
.zeilenkarte .kuerzel { font-weight: 700; min-width: 34px; }
.zeilenkarte .name { flex: 1 1 auto; }
.zeilenkarte .zahlen { display: flex; gap: 14px; color: var(--gedaempft); font-size: 12.5px;
                       margin: 0; }
.zeilenkarte .zahlen span { padding: 0; border: 0; background: none; min-width: 0; }
.zeilenkarte .klappinhalt { padding: 16px; }

/* ===================================================================
   Portfolio-Dashboard, zweiter Anlauf (13.09.2026, nach Renés Kritik:
   „nicht zeitgemäß … nicht tiefgründig aussagekräftig“).
   Dichter, ruhiger, mit Vergleich statt Verlinkung.
   =================================================================== */

/* **Die Kennzahlenkarten** — Label, Zahl, Veränderung, Verlauf. Sie sind bewusst
   **nicht** verlinkt: Drei Zahlen, die auf dieselbe Seite führen, sind Dekoration. */
.kpiband { display: grid; gap: 12px; margin: 0 0 18px;
           grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpi { position: relative; overflow: hidden; background: var(--grund);
       border: 1px solid var(--linie); border-radius: var(--radius);
       padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.kpi .label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
              color: var(--gedaempft); font-weight: 700; }
.kpi .wertzeile { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kpi .wert { font-size: 31px; font-weight: 700; line-height: 1.1; letter-spacing: -.5px;
             font-variant-numeric: tabular-nums; }
.kpi .neben { font-size: 12.5px; color: var(--gedaempft); }
.kpi .fuss { font-size: 11.5px; color: var(--gedaempft); margin-top: 2px; }
.kpi .funke { display: block; width: 100%; height: 26px; margin-top: 8px;
              color: var(--mandant, #8A8F98); opacity: .5; }

/* Die Veränderung: Richtung, Zahl, Farbe — in einem Chip, nicht im Fließtext. */
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px;
         font-weight: 700; padding: 2px 7px; border-radius: 12px;
         font-variant-numeric: tabular-nums; background: var(--flaeche);
         color: var(--gedaempft); }
.delta.hoch { background: #E9F5EC; color: #1E7B39; }
.delta.runter { background: #FDF1E7; color: #9A5B14; }

/* **Die Portfolio-Tabelle** — je Haus eine Zeile, je Spalte dieselbe Frage. */
table.portfolio { width: 100%; border-collapse: collapse; }
table.portfolio th, table.portfolio td { padding: 9px 10px; border-bottom: 1px solid var(--linie);
                                         vertical-align: middle; }
table.portfolio thead th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
                           color: var(--gedaempft); font-weight: 700; text-align: left;
                           border-bottom: 1px solid var(--linie); white-space: nowrap; }
table.portfolio .rechts { text-align: right; }
table.portfolio .zahl { font-variant-numeric: tabular-nums; font-weight: 600; }
table.portfolio .zahl.warn { color: var(--warnung); }
table.portfolio .zusatz { color: var(--gedaempft); font-weight: 500; font-size: 12px;
                          margin-left: 4px; }
table.portfolio tbody tr:hover { background: var(--flaeche); }
table.portfolio tbody tr.aktiv { box-shadow: inset 3px 0 0 var(--haus); }
table.portfolio tbody tr.still { opacity: .55; }
table.portfolio tfoot th { border-bottom: 0; border-top: 2px solid var(--linie);
                           font-size: 13px; }
table.portfolio .haus form { margin: 0; }
table.portfolio .haus button { display: flex; align-items: center; gap: 8px; background: none;
                               border: 0; padding: 0; font: inherit; color: var(--text);
                               cursor: pointer; text-align: left; }
table.portfolio .haus .punkt { width: 9px; height: 9px; border-radius: 50%;
                               background: var(--haus); display: inline-block; }
table.portfolio .haus .kuerzel { font-weight: 700; }
table.portfolio .haus .kurz { color: var(--gedaempft); font-size: 13px; }
table.portfolio .haus button:hover .kurz { color: var(--text); }

/* Der Auslastungsring: ein `conic-gradient`, kein Skript. */
.ringzeile { display: inline-flex; align-items: center; gap: 8px; }
.ring { width: 26px; height: 26px; border-radius: 50%;
        background: conic-gradient(var(--haus, #4A5568) calc(var(--anteil) * 1%),
                                   var(--flaeche) 0);
        position: relative; flex: 0 0 auto; }
.ring::after { content: ""; position: absolute; inset: 6px; border-radius: 50%;
               background: var(--grund); }
.ring.gesamt { background: conic-gradient(var(--text) calc(var(--anteil) * 1%),
                                          var(--flaeche) 0); }
.ringwert { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--gedaempft); }

.stundenbalken { display: block; height: 7px; border-radius: 4px; background: var(--flaeche);
                 overflow: hidden; min-width: 90px; }
.stundenbalken > span { display: block; height: 100%; border-radius: 4px;
                        background: var(--haus, #4A5568); }
.stundenwert { font-size: 12px; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.verlaufzelle { width: 90px; }
.verlaufzelle .funke { width: 84px; height: 22px; color: var(--haus, #8A8F98); opacity: .75; }

/* „Zu tun“ als Liste mit Pfeil — anklickbar, weil dahinter wirklich etwas liegt. */
.tunliste { display: flex; flex-direction: column; }
.tunzeile { display: flex; align-items: center; gap: 10px; padding: 9px 6px;
            text-decoration: none; color: var(--text); border-bottom: 1px solid var(--linie); }
.tunzeile:last-child { border-bottom: 0; }
.tunzeile:hover { background: var(--flaeche); }
.tunzeile .wert { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 34px;
                  font-size: 17px; }
.tunzeile .was { flex: 1 1 auto; font-size: 14px; }
.tunzeile .pfeil { color: var(--gedaempft); }
.tunzeile.dringend .wert { color: var(--warnung); }

/* **Das Plus an der rechten Seite** (13.09.2026, Renés Vorgabe zur Unternehmensseite:
   „Um ein Unternehmen hinzuzufügen wieder ein Plus an der rechten Seite. Nicht auf der
   Seite.“). Es stand in `dienstplan.css` und fehlte im Admin-Tool — das Zeichen war da,
   der Knopf nicht: ein nacktes Pluszeichen neben der Überschrift. Ein Knopf, den man
   für einen Tippfehler halten kann, ist keiner. */
.plus {
  width: var(--hoehe); height: var(--hoehe); border-radius: var(--r-klein); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; text-decoration: none;
  background: var(--text); color: #fff; border: 1px solid var(--text);
}
.plus:hover { background: var(--mandant); border-color: var(--mandant); }

/* Eine Zahl im Filterchip — sie sagt, was hinter dem Wort steckt, bevor man klickt. */
.sichtwahl .anzahl { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 2px; }
.sichtwahl a.hier .anzahl { opacity: .85; }

/* Eine Klappe **in** der Klappe: Was selten gebraucht wird (umbenennen, entfernen),
   liegt eine Stufe tiefer als das, was täglich geschieht (eine Notiz anhängen). */
.unterklappe { margin-top: 14px; border-top: 1px solid var(--linie); padding-top: 10px; }
.unterklappe > summary { cursor: pointer; color: var(--gedaempft); font-size: 13px;
                         font-weight: 600; list-style: none; }
.unterklappe > summary::-webkit-details-marker { display: none; }
.unterklappe > summary::before { content: "▸ "; font-size: 11px; }
.unterklappe[open] > summary::before { content: "▾ "; }
.unterklappe > summary:hover { color: var(--text); }

/* Die Zeile eines Vorhabens: Marke, Titel, die Nebensachen grau dahinter. */
.zeilenkarte.vorhaben > summary .marke { font-size: 11.5px; padding: 2px 9px; }
.zeilenkarte.vorhaben .vorhabentext { white-space: pre-wrap; margin: 0 0 12px; }

/* **Zwei Wege im Fenster** — wenn die eigentliche Frage lautet „welches von beiden?“,
   ist die Antwort keine Auswahlliste, sondern zwei Karten mit je einem Satz. */
.wegkarte { display: block; text-decoration: none; color: var(--text); padding: 12px 14px;
            border: 1px solid var(--linie); border-radius: var(--radius);
            margin-bottom: 10px; background: var(--grund); }
.wegkarte:hover { border-color: var(--mandant); background: var(--flaeche); }
.wegkarte strong { display: block; margin-bottom: 3px; }
.wegkarte span { color: var(--gedaempft); font-size: 13px; line-height: 1.45; display: block; }

/* Rolle und Haus als Pille — die Farbe trägt die Zuordnung, wie überall in Puls. */
.rollenpille { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
               border: 1px solid var(--linie); border-radius: 14px; padding: 1px 9px 1px 6px;
               margin: 1px 4px 1px 0; white-space: nowrap; }
table.kontenliste { margin: 0; }
table.kontenliste thead th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
                             color: var(--gedaempft); }
table.kontenliste tbody tr:hover { background: var(--flaeche); }

/* **Die Zahlenkarte im ganzen System** (13.09.2026, nach Renés Kritik „nicht zeitgemäß“).
   Sie steht auf vierzehn Seiten — Dienstplan, Wachberichte, myPuls, Kennzahlen —, und sie
   hier zu schärfen wirkt überall, ohne vierzehn Vorlagen anzufassen: Ziffern in fester
   Breite (damit Zahlen untereinander stehen), das Wort darunter klein und gesperrt wie
   auf den Kennzahlenkarten des Dashboards. Mehr nicht: Eine Karte, die sich beim
   Daraufzeigen hebt, ist Zierde und keine Auskunft. */
.zahl .wert { font-variant-numeric: tabular-nums; }
.zahl .was { letter-spacing: .03em; }
a.zahl { transition: none; }

/* **Befunde** — was aus der Reihe fällt. Sie stehen zwischen den Kennzahlen und der
   Portfolio-Tabelle: erst die Lage, dann das, was daran auffällt, dann die Einzelheiten.
   Anders als die Kennzahlen **sind** sie verlinkt — hier gibt es etwas anzusehen. */
.befunde { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; }
.befund { display: flex; align-items: center; gap: 10px; text-decoration: none;
          color: var(--text); background: var(--grund); border: 1px solid var(--linie);
          border-left: 3px solid var(--haus, var(--gedaempft));
          border-radius: var(--radius); padding: 9px 14px; font-size: 13.5px; }
.befund:hover { background: var(--flaeche); }
.befund .haus { font-weight: 700; color: var(--haus); min-width: 30px; }
.befund .satz { flex: 1 1 auto; }
.befund .pfeil { color: var(--gedaempft); font-size: 17px; }
.befund.warnung { background: #FCF7F5; border-color: #EBD7D0; border-left-color: var(--warnung); }
.befund.gut { background: #F5FAF7; border-color: #D4E6DB; border-left-color: var(--gut); }

/* ===================================================================
   Das Ideenboard (15.09.2026, Renés Wunsch: „Ein Board als Ideensammler“).
   Drei Spalten, je Stand eine — die Karte wandert nach rechts, statt in
   einem Formular ihren Zustand zu wechseln.
   =================================================================== */
.board { display: grid; gap: 14px; align-items: start; margin-top: 16px;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.boardspalte { background: var(--flaeche); border: 1px solid var(--linie);
               border-radius: var(--radius); padding: 14px 14px 10px; min-width: 0; }
.boardspalte > h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 2px;
                    font-size: 15px; }
.boardspalte > h2 .marke { font-size: 11.5px; padding: 2px 9px; color: #fff;
                           border-radius: 999px; letter-spacing: 0; }
.boardspalte > h2 .anzahl { color: var(--gedaempft); font-weight: 600; font-size: 13px; }
/* Eine Karte im Board ist schmal — ihre Kopfzeile bricht deshalb um, statt den Titel
   abzuschneiden. Abgeschnittene Zeilen waren hier schon einmal der Fehler. */
.ideenkarte { margin-bottom: 8px; padding: 0; background: var(--grund); }
.ideenkarte > summary { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px;
                        cursor: pointer; list-style: none; }
.ideenkarte > summary::-webkit-details-marker { display: none; }
.ideenkarte > summary::before { content: "▸"; color: var(--gedaempft); font-size: 12px; }
.ideenkarte[open] > summary::before { content: "▾"; }
.ideenkarte[open] > summary { border-bottom: 1px solid var(--linie); }
.ideenkarte > summary:hover { background: var(--flaeche); }
.ideenkarte .name { flex: 1 1 200px; font-weight: 600; }
.ideenkarte .zahlen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                      color: var(--gedaempft); font-size: 12px; flex: 1 1 100%; }
.ideenkarte .klappinhalt { padding: 12px; }
.ideenkarte .knopfzeile { flex-wrap: wrap; gap: 6px; margin: 10px 0; }
/* Ein Treffer aus einem anderen Unternehmen ist ein Knopf, kein Verweis — er wechselt
   den Mandanten mit. Aussehen soll er trotzdem wie ein Verweis. */
form.treffer { display: inline; margin: 0; }
form.treffer button.leer { padding: 0; font-weight: 400; color: var(--blau, #2E7BC4);
  text-decoration: underline; text-underline-offset: 2px; }
form.treffer button.leer:hover { color: var(--text); }

.marke.klein { font-size: 11px; font-weight: 600; letter-spacing: 0; color: #fff;
               padding: 1px 8px; border-radius: 999px; }

/* **Die Module oben auf der Startseite** (15.09.2026, Renés Zuruf: „Ich möchte die
   Module auf der Startseite sehen — damit ich persönlich dort auch direkten Zugriff
   habe“). Die Wand steht jetzt über der Unternehmenstabelle; darunter die Module der
   anderen Unternehmen als Knöpfe, die den Mandanten gleich mitwechseln. */
.modultafel .modulwand { margin-bottom: 0; }
.modulanderswo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                 margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.modulanderswo > .gedaempft { font-size: 12.5px; }
.modulanderswo form { display: inline; }
.modulanderes { display: inline-flex; align-items: center; gap: 5px;
                border: 1px solid var(--linie); border-left: 3px solid var(--modul, var(--gedaempft));
                border-radius: 999px; padding: 3px 8px 3px 11px; background: var(--grund); }
.modulanderes .name { font-size: 12.5px; font-weight: 600; color: var(--modul, var(--text)); }
.modulchip { background: var(--flaeche); border: 1px solid var(--linie);
             border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700;
             color: var(--haus, var(--text)); cursor: pointer; letter-spacing: .02em; }
.modulchip:hover { border-color: var(--haus, var(--gedaempft)); background: var(--grund); }

/* Ein Hinweis, der eine **Lücke** benennt statt etwas zu erklären (15.09.2026, für die
   Stunden ohne hinterlegten Lohn). Er sieht anders aus als ein gewöhnlicher Hinweis,
   weil er etwas verlangt: Eine Zahl, die zu niedrig ist, ohne falsch auszusehen, ist
   schlimmer als keine. */
p.fehlt { margin: 10px 0 0; padding: 10px 14px; font-size: 13px; line-height: 1.5;
          border-left: 3px solid var(--warnung); background: var(--flaeche);
          border-radius: 0 var(--radius) var(--radius) 0; }

/* **Was ein Konto sieht** (15.09.2026, Renés Frage nach dem Zugang des Objektleiters).
   Offene Seiten stehen normal, zugesperrte durchgestrichen und blass — beides mit
   Zeichen, nicht nur mit Farbe: Ein Häkchen liest auch, wer Rot von Grün nicht
   unterscheidet. */
.schaltergruppe { display: flex; flex-wrap: wrap; gap: 6px; }
.schaltergruppe .pille { display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--linie); border-radius: 999px; padding: 3px 11px;
  font-size: 12.5px; background: var(--grund); }
.schaltergruppe .pille.zu { color: var(--gedaempft); background: var(--flaeche);
  text-decoration: line-through; text-decoration-color: var(--linie); }

/* ------------------------------------------------------- Zweiter Faktor (17.09.2026)
   Drei kleine Bausteine, die es sonst nirgends gibt: die Tafel mit dem QR-Code, der
   Schlüssel zum Abtippen und die Liste der Ersatzcodes. Alle drei zeigen Zeichenfolgen,
   die jemand **ablesen** muss — deshalb durchgehend eine Schreibmaschinenschrift mit
   Sperrung: In einer Proportionalschrift sind l, I und 1 nebeneinander nicht zu trennen,
   und ein falsch abgetippter Ersatzcode fällt erst auf, wenn man ihn braucht. */
.qrtafel { display: flex; justify-content: center; padding: 18px; margin: 14px 0;
  background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); }
.qrtafel svg { display: block; }
code.geheimnis { display: inline-block; font-size: 16px; letter-spacing: 0.12em;
  padding: 6px 12px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); user-select: all; }
.codeliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; list-style: none; padding: 0; margin: 14px 0; }
.codeliste li { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 8px 12px; text-align: center; }
.codeliste code { font-size: 15px; letter-spacing: 0.06em; user-select: all; }
/* Eine nummerierte Anleitung — drei Schritte, die man abarbeitet, keine Aufzählung. */
ol.ablauf { margin: 12px 0; padding-left: 22px; }
ol.ablauf li { margin: 6px 0; }
.merkmal.warnung { color: var(--warnung); border-color: #E9C9C0; background: #FBF0ED; }

/* **Eine Zeile, die weiterführt statt aufzuklappen** (17.09.2026, Fuhrpark). Dieselbe
   Form wie eine Klappzeile — nur ohne Dreieck, weil sie nichts öffnet, sondern auf den
   Steckbrief des Fahrzeugs geht. Ein Klappdreieck an einer Zeile, die die Seite
   wechselt, verspricht etwas Falsches. */
.zeilenkarte > .summenzeile { display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; padding: 12px 16px; }
.zeilenkarte > .summenzeile:hover { background: var(--flaeche); }
.zeilenkarte > .summenzeile a { text-decoration: none; }
.zeilenkarte > .summenzeile a:hover { text-decoration: underline; }

/* Der Steckbrief: zwei Spalten am Schreibtisch, eine am Telefon. Die schmale Spalte
   trägt, was man im Blick behält (Fristen, Zuweisung), die breite die Listen. */
.zweispalter { display: grid; gap: 16px; grid-template-columns: 2fr 1fr; align-items: start; }
@media (max-width: 900px) { .zweispalter { grid-template-columns: 1fr; } }

/* ------------------------------------------------- Fahrzeugkacheln (18.09.2026)
   Renés Wunsch: „Ähnlich wie bei der Mitarbeiterübersicht kann ich in Kachel oder in
   Liste wechseln.“ Dieselbe Idee wie dort, aber ein anderes Bildformat: Ein Mensch wird
   quadratisch gezeigt, ein Fahrzeug im Querformat — sonst ist vom Transporter nur die
   Fahrertür zu sehen. */
/* `.ansichtswahl` steht seit dem 24.10.2026 im Kanon (Abschnitt 8b) — sie lag hier
   und in `dienstplan.css`. **44 Pixel, nicht 38** gilt weiter (09.10.2026, Renés
   Durchgang): Es ist ein Fingerziel, und der Kanon setzt dafür `--hoehe`. */

.fahrzeugkacheln { display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.fkachel { background: var(--grund); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; }
.fkachel.ausser-dienst { opacity: 0.55; }
.fbild { display: block; position: relative; aspect-ratio: 16 / 10; background: var(--flaeche); }
.fbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ohne Bild steht der Ortskürzel des Kennzeichens da — besser als eine graue Fläche,
   und es ist die Angabe, die man ohnehin zuerst liest. */
.fleer { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 26px; font-weight: 700; color: var(--linie);
  letter-spacing: 0.06em; }
.fmarke { position: absolute; top: 8px; right: 8px; font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px; background: var(--grund); color: var(--gedaempft);
  border: 1px solid var(--linie); }
.fmarke.warnung { color: var(--warnung); border-color: #E9C9C0; background: #FBF0ED; }
.fkachelfuss { padding: 10px 12px 12px; }
.fkachelfuss .zahlen { margin: 6px 0 0; gap: 10px; font-size: 12.5px; }
.fkachelfuss .zahlen span { padding: 0; border: 0; background: none; min-width: 0;
  color: var(--gedaempft); }
.fname { font-weight: 700; text-decoration: none; color: var(--text); }
.fname:hover { text-decoration: underline; }
.warnton { color: var(--warnung); font-size: 12.5px; }
/* In der Liste steht dasselbe Bild als Miniatur — man erkennt den Wagen auch dort. */
.fminibild { width: 64px; }
.fminibild img { width: 56px; height: 36px; object-fit: cover; border-radius: 4px;
  display: block; }
/* Das Titelbild im Steckbrief: groß genug, um etwas zu sehen, begrenzt genug, um die
   Seite nicht zu sprengen. */
.titelbild { max-height: 260px; width: 100%; object-fit: cover; border-radius: var(--radius);
  display: block; }

/* **Der Halter als Zähler, nicht als Fläche** (18.09.2026, Renés Einwand: „Stylisch sind
   die Unternehmen dort nicht angezeigt … ein kleiner Button sieht besser aus, wie ein
   Zähler“). Vorher war die Mandantenfarbe der Hintergrund einer Marke — bei Orange ein
   Block, der die Kachel beherrschte. Jetzt trägt ein Punkt die Farbe und der Rest bleibt
   ruhig: Die Zuordnung ist genauso schnell zu sehen, ohne dass sie den Blick nimmt. */
.hausmarke { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  font-weight: 600; padding: 1px 8px 1px 6px; border-radius: 20px; background: var(--grund);
  border: 1px solid var(--linie); color: var(--gedaempft); white-space: nowrap; }
.hausmarke .punkt { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.hausmarke.offen { color: var(--warnung); border-color: #E9C9C0; background: #FBF0ED; }

/* ---------------------------------- Offene Fragen (22.09.2026, Plan 2.52)
   Renés Seite zum Antworten. Die Frage steht im Plan, die Antwort hier — beides
   nebeneinander, damit man beim Schreiben sieht, worauf man antwortet. */
.fragenkarte { padding: 0; margin-bottom: 10px; }
.fragenkarte > summary { padding: 13px 16px; cursor: pointer; display: flex;
  align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fragenkarte > summary:hover { background: var(--flaeche); }
.fragenkarte > summary .feldhinweis { flex-basis: 100%; margin: 2px 0 0; }
.fragenkarte > *:not(summary) { margin-left: 16px; margin-right: 16px; }
.fragenkarte > *:last-child { margin-bottom: 14px; }
.fragentext { margin: 4px 0 10px; line-height: 1.45; }
.karte.vorschlag { background: var(--flaeche); border-left: 4px solid var(--mandant, #2A5FA8);
  margin-bottom: 12px; line-height: 1.45; }
.fragenantwort textarea { width: 100%; }
/* Die Zahl an einem Leistenpunkt — heute nur bei den offenen Fragen (22.09.2026).
   Klein und ruhig: Sie soll mitlaufen, nicht rufen. Eine Null steht nie da. */
.leistenzahl { display: inline-block; min-width: 19px; padding: 0 6px; margin-left: 6px;
  border-radius: 999px; background: #C4442B; color: #fff; font-size: 11.5px;
  font-weight: 700; line-height: 19px; text-align: center;
  font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- Der Wachbericht der Schicht
   **Zwei Dinge, die Renés Ablauf vom 17.10.2026 verlangt** (Idee 25, zweite Runde).

   Die **Namenswand**: „die Ansicht der zur Verfügung stehenden Mitarbeiter laut
   Dienstplan ist in einem Button-Format, die er dann einfach nach und nach anklicken
   kann." Jeder Name ist ein Knopf — die Höhe kommt aus dem Kanon (`--hoehe`), hier steht
   nur, wie sie sich umbrechen. Jede Kachel ist ein eigenes kleines Formular, damit es
   ohne Skript geht; deshalb trägt die Wand das `flex` und nicht das Formular.

   Das **Berichtsraster**: „Alles ist weiterhin in einem Tab zu sehen. Wer ist aktuell
   anwesend? Was hat der Schichtleiter aktuell geschrieben." Links die Texte, rechts die
   Besetzung — und unter 1000 Pixeln untereinander, denn auf einem Tablet im Hochformat
   wären zwei Spalten zwei halbe. */
.namenswand { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.namenswand form { margin: 0; }
.namenswand button { font-weight: 600; }

.berichtsraster { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px; align-items: start; }
.berichtsraster > aside { display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 14px; }
@media (max-width: 1000px) {
  .berichtsraster { grid-template-columns: minmax(0, 1fr); }
  .berichtsraster > aside { position: static; }
}

/* ------------------------------------------------------------------ Druck
   **Eine Leiste gehört nicht auf Papier** (09.10.2026, mit der Seitenleiste dazu): Ohne
   diese Regel trägt jeder Ausdruck eine 260 Pixel breite leere Spalte und oben den
   Streifen des Telefons. Dieselbe Haltung wie die Druckansicht des Dienstplans seit dem
   12.09.2026 — Leiste und Werkzeuge fallen weg, die Farben bleiben: Sie tragen die
   Zuordnung. */
@media print {
  body.mitleiste { display: block; padding-top: 0; }
  .seitenleiste, .mobilleiste { display: none !important; }
  main { max-width: none; padding: 0; }
}

/* ---------------------------------------------------------------- Lumi (18.10.2026)
   Renés Idee 26: ein Chatfenster im Admin-Tool. **Wenige Klassen, alle im Fenster** —
   der Rest kommt aus dem Kanon (`.popup`, `.liste`, `.knopf`, `.merkmal`). */

/* **Ein Gespräch in Sprechblasen** (18.10.2026, Renés Vorgabe: „Die eingegebenen Fragen
   vom Nutzer stehen wie in einer Sprechblase auf der rechten Seite in einer leicht
   blauen Hintergrundfarbe, und die Antwort … in einer Sprechblase in leicht grau
   hinterlegt mit der Beschriftung: Lumi oder der Nutzer").

   **Keine neuen Farben**: Das Blau ist `--info-fein`, das Grau `--flaeche-tief` — beide
   stehen im Kanon. *Tokens sind die einzige Quelle* (Idee 22), und zwei fast gleiche
   Grautöne nebeneinander sind der Anfang einer zweiten Palette. */
.lumiverlauf { display: flex; flex-direction: column; gap: var(--a3); }
.lumiblase {
  max-width: 85%; padding: 8px 12px; border-radius: 14px;
  background: var(--flaeche-tief); color: var(--text);
}
.lumiblase > :last-child { margin-bottom: 0; }
.lumiwer { font-size: 12px; font-weight: 600; color: var(--gedaempft);
           margin-bottom: 2px; display: flex; gap: 6px; align-items: baseline; }
.lumiwer .zeit { font-weight: 400; }
/* Ich rechts und blau, Lumi links und grau — die Ecke zeigt zum Sprecher. */
.lumiblase.ich { align-self: flex-end; background: var(--info-fein);
                 border-end-end-radius: 4px; }
.lumiblase.lumi { align-self: flex-start; border-end-start-radius: 4px; }
/* **Unsicher bleibt sichtbar**: ein Streifen, keine zweite Farbe — *ein Hinweiszeichen,
   das auch über einer klaren Auskunft steht, warnt irgendwann vor nichts.* */
.lumiblase.lumi.unsicher { border-inline-start: 3px solid var(--warnung); }
.lumiblase table.liste { margin: 8px 0; background: var(--grund); }

/* **Die drei Punkte** (Renés „tauchen drei Punkte auf, die animiert sind, wie als würde
   man darauf warten"). Sie entstehen erst beim Abschicken und sind eine **Zugabe des
   Skripts**: Ohne Skript kommt die Antwort mit der neuen Seite, und das ist derselbe
   Weg. `prefers-reduced-motion` wird beachtet — wer das eingestellt hat, hat einen
   Grund dafür. */
.lumidenkt { display: inline-flex; gap: 5px; align-items: center; padding: 2px 0; }
.lumidenkt i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--leise);
  display: inline-block; animation: lumipunkt 1.3s infinite ease-in-out;
}
.lumidenkt i:nth-child(2) { animation-delay: .18s; }
.lumidenkt i:nth-child(3) { animation-delay: .36s; }
@keyframes lumipunkt {
  0%, 70%, 100% { opacity: .3; transform: translateY(0); }
  35%           { opacity: 1;  transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .lumidenkt i { animation: none; opacity: .6; }
}
.lumisterne { display: flex; gap: 6px; align-items: center; margin-top: 8px;
              flex-wrap: wrap; }
.lumizeile { display: flex; gap: 8px; margin-top: 16px; }
.lumizeile input[type="text"] { flex: 1 1 auto; min-width: 0; }
.lumiknopf { white-space: nowrap; }

/* **Eine Gruppe der Lumi-Kartei ist eine Klappe** (21.10.2026, Ausbau 3.145): Zwölf
   Gruppen mit 44 Feldern wären im Gesprächsfenster eine Wand. Die Form steht hier und
   **nicht im Kanon**: Nur `grundgeruest.html` bindet `_lumi_fenster.html` ein — *eine
   Datei, die für alle neun Oberflächen gilt, darf keinen Namen belegen, den eine davon
   schon anders benutzt* (die Lehre von `.raster` vom 26.09.2026; `.nebenklappe` in
   `mypuls.css` ist genau so ein Name). Ohne Skript, wie jedes Klappmenü in Puls. */
.karteigruppe { border: 1px solid var(--linie); border-radius: var(--r-klein);
                padding: var(--a2) var(--a3); margin: 0 0 var(--a2); }
.karteigruppe > summary { cursor: pointer; display: flex; gap: var(--a2);
                          align-items: baseline; flex-wrap: wrap; min-height: 0; }
.karteigruppe > summary::marker { content: ""; }
.karteigruppe > summary::-webkit-details-marker { display: none; }
.karteigruppe > summary::before { content: "\25B8";
                                  color: var(--gedaempft);
                                  margin-inline-end: 2px; }
.karteigruppe[open] > summary::before { content: "\25BE"; }
.kgzahl { color: var(--gedaempft); font-size: .85rem; }