/* Gemeinsames Aussehen von Wartungshinweis und Anwendung.
   Eine Datei statt Stilregeln in jeder Maske: Sonst driften die beiden
   auseinander, sobald jemand nur an einer Stelle etwas aendert. */

:root {
  --karte:      rgba(255, 255, 255, .70);
  --unschaerfe: 16px;
  --text:       #131c28;
  --gedaempft:  #475364;
  --linie:      rgba(19, 28, 40, .16);
  --rand:       rgba(255, 255, 255, .55);
  --akzent:     #0f4d84;
  --akzent-hell:rgba(255, 255, 255, .55);
  --feld:       rgba(255, 255, 255, .78);
  --feld-rand:  rgba(19, 28, 40, .22);
  --warn:       #8f2f22;
  --warn-grund: rgba(190, 80, 60, .14);
  --grund:      #20323a;
  --schleier:   rgba(10, 26, 30, .26);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --karte:      rgba(16, 22, 29, .62);
    --unschaerfe: 18px;
    --text:       #eef2f8;
    --gedaempft:  #aab4c2;
    --linie:      rgba(238, 242, 248, .16);
    --rand:       rgba(238, 242, 248, .18);
    --akzent:     #a8c9ee;
    --akzent-hell:rgba(238, 242, 248, .12);
    --feld:       rgba(238, 242, 248, .10);
    --feld-rand:  rgba(238, 242, 248, .26);
    --warn:       #f0a598;
    --warn-grund: rgba(190, 80, 60, .22);
    --grund:      #0e1a1f;
    --schleier:   rgba(6, 14, 18, .55);
  }
}
:root[data-theme="dark"] {
  --karte: rgba(16, 22, 29, .62); --unschaerfe: 18px;
  --text: #eef2f8; --gedaempft: #aab4c2;
  --linie: rgba(238, 242, 248, .16); --rand: rgba(238, 242, 248, .18);
  --akzent: #a8c9ee; --akzent-hell: rgba(238, 242, 248, .12);
  --feld: rgba(238, 242, 248, .10); --feld-rand: rgba(238, 242, 248, .26);
  --warn: #f0a598; --warn-grund: rgba(190, 80, 60, .22);
  --grund: #0e1a1f; --schleier: rgba(6, 14, 18, .55);
}

* { box-sizing: border-box; }

/* Der Grund gehoert an html, nicht nur an body: Mit min-height: 100vh
   allein endet die Flaeche dort, wo der Ansichtsbereich endet -
   darunter scheint das Weiss des Browsers durch. */
html { background: var(--grund); }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  color: var(--text);
  font: 16px/1.65 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background-image: linear-gradient(var(--schleier), var(--schleier)), url("hintergrund.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* KEIN background-attachment: fixed - auf iOS springt und verzerrt das. */
}
body.breit { align-items: flex-start; }

main {
  width: 100%;
  max-width: 38rem;
  background: var(--karte);
  -webkit-backdrop-filter: blur(var(--unschaerfe)) saturate(120%);
  backdrop-filter: blur(var(--unschaerfe)) saturate(120%);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: clamp(30px, 5vw, 48px);
  box-shadow: 0 2px 6px rgba(8, 20, 26, .16), 0 20px 56px rgba(8, 20, 26, .30);
}
main.weit { max-width: 62rem; }

/* Ohne Weichzeichner stuende der Text bei 70 % Deckkraft auf dem blanken
   Foto. Dann lieber deckender. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  main { background: rgba(255, 255, 255, .93); }
  :root[data-theme="dark"] main { background: rgba(16, 22, 29, .93); }
}

h1 {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 3.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.unterzeile { margin: 0 0 26px; color: var(--gedaempft); font-size: .95rem; }
p { margin: 0 0 16px; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 28px 0 22px; }

/* ------------------------------------------------------------ Formular */
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.feld { margin-bottom: 18px; }
.hinweis-feld { color: var(--gedaempft); font-size: .85rem; margin: 6px 0 0; }

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: var(--text);
  background: var(--feld);
  border: 1px solid var(--feld-rand);
  border-radius: 8px;
}
input:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
  border-color: transparent;
}

button {
  font: inherit;
  font-weight: 600;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid var(--akzent);
  background: var(--akzent);
  color: #fff;
  cursor: pointer;
}
:root[data-theme="dark"] button { color: #0e1a1f; }
button:hover { filter: brightness(1.08); }
button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* --------------------------------------------------------- Meldungen */
.meldung {
  background: var(--warn-grund);
  border: 1px solid var(--warn);
  color: var(--warn);
  border-radius: 8px;
  padding: 11px 14px;
  margin: 0 0 20px;
  font-size: .94rem;
}

/* ------------------------------------------------------------ Tabelle */
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
th { font-weight: 600; color: var(--gedaempft); font-size: .86rem; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.umbruch { overflow-x: auto; }

/* ------------------------------------------------------- Kopf der App */
.kopf {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 12px; margin-bottom: 22px;
}
.kopf .wer { color: var(--gedaempft); font-size: .92rem; }
.kopf a { color: var(--akzent); }

.fuss { margin-top: 26px; color: var(--gedaempft); font-size: .85rem; }
.fuss a { color: var(--akzent); }

/* =====================================================================
   ARBEITSFLAECHE (alles hinter der Anmeldung)
   KEIN FOTO, VOLLE BREITE. Das Bild gehoert vor die Anmeldung - dort
   ist es Visitenkarte. Hinter der Anmeldung wird gearbeitet: Eine
   Tabelle mit zehntausend Zeilen braucht jeden Pixel und einen ruhigen
   Grund, auf dem das Auge die Zeile haelt.
   ===================================================================== */
body.anwendung {
  display: block;                 /* keine Zentrierung, keine Karte */
  padding: 0;
  min-height: 100vh;
  background-image: none;         /* das Foto ausdruecklich weg */
  background-color: var(--app-grund);
}
:root {
  --app-grund:  #eef1f5;
  --app-blatt:  #ffffff;
  --app-leiste: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-grund:  #0f141a;
    --app-blatt:  #161c24;
    --app-leiste: #131920;
  }
}
:root[data-theme="dark"] {
  --app-grund: #0f141a; --app-blatt: #161c24; --app-leiste: #131920;
}
body.anwendung { color: var(--text); }

/* Kopfleiste ueber die ganze Breite, Inhalt darunter. */
.leiste {
  background: var(--app-leiste);
  border-bottom: 1px solid var(--linie);
  padding: 12px clamp(16px, 2.5vw, 28px);
}
.rahmen { padding: clamp(14px, 2vw, 22px) clamp(16px, 2.5vw, 28px) 40px; }

main.arbeit {
  width: 100%;
  max-width: none;                /* die ganze Breite nutzen */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Tabelle und Filter bekommen eigene Flaechen, damit die Seite nicht
   auseinanderfaellt, wenn die Karte wegfaellt. */
.blatt {
  background: var(--app-blatt);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.blatt > .umbruch { padding: 0; }

/* Schmale Formulare bleiben schmal, auch auf breiter Flaeche - eine
   Eingabezeile ueber 1800 Pixel liest niemand gern. */
.schmal {
  max-width: 30rem;
  background: var(--app-blatt);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 34px);
}

.marke-admin {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--akzent); background: var(--akzent-hell);
  border: 1px solid var(--linie);
  border-radius: 4px; padding: 2px 7px; margin-left: 6px;
}

/* ------------------------------------------------------------ Filter */
.filter {
  background: var(--app-blatt);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.filter select, .filter input[type="text"] { background: var(--app-grund); }
.filterzeile {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px;
}
.filterzeile + .filterzeile { margin-top: 12px; }
.filterzeile > div { flex: 1 1 11rem; min-width: 0; }
.filterzeile > div.fgross { flex: 2 1 20rem; }
.filter label { font-size: .82rem; margin-bottom: 4px; }

.filter select, .filter input[type="text"] {
  width: 100%; padding: 8px 10px; font: inherit; font-size: .93rem;
  color: var(--text); background: var(--karte);
  border: 1px solid var(--feld-rand); border-radius: 7px;
}
.filter button { padding: 8px 18px; font-size: .93rem; }

.haken {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 500; font-size: .92rem; margin: 0;
  flex: 0 0 auto; white-space: nowrap;
}
.haken input { width: 16px; height: 16px; accent-color: var(--akzent); }
.zuruecksetzen { color: var(--gedaempft); font-size: .9rem; align-self: center; }

/* ----------------------------------------------------------- Tabelle */
table.liste { font-size: .9rem; }
table.liste th, table.liste td { padding: 9px 14px; }
table.liste thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--app-blatt);
  border-bottom: 1px solid var(--linie);
}
table.liste th a { color: var(--gedaempft); text-decoration: none; white-space: nowrap; }
table.liste th a:hover { color: var(--akzent); text-decoration: underline; }
table.liste tbody tr:hover { background: var(--akzent-hell); }
table.liste td { vertical-align: top; }
td.mitte, th.mitte { text-align: center; }

/* Die eigenen Datensaetze bekommen eine Kante, keine Flaeche: Eine
   eingefaerbte Zeile konkurriert mit der Statusfarbe. */
table.liste tr.meine td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }

.fahne {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: 1px 6px; border-radius: 4px; margin-left: 5px;
  background: var(--akzent-hell); color: var(--akzent);
  border: 1px solid var(--linie);
}
.fahne-warn { background: var(--warn-grund); color: var(--warn); border-color: var(--warn); }

.status {
  display: inline-block; font-size: .82rem;
  padding: 2px 8px; border-radius: 10px;
  background: var(--akzent-hell); border: 1px solid var(--linie);
  white-space: nowrap;
}
/* DREI STELLEN DER ARBEITSSTRECKE TRAGEN FARBE, der Rest nicht:
   der Anfang (reserviert, Stufe 0) in zartem Blau, das Ziel (aktiver
   Vermittler, Stufe 60) in Gruen. Beendet-ohne-Erfolg wird
   zurueckgenommen statt eingefaerbt - "PV verstorben" braucht keine
   Farbe, sondern Zurueckhaltung. Die Schritte dazwischen bleiben
   neutral: Faerbte man jede Stufe, hiesse das, keine hervorzuheben.

   Die Farben stehen halbtransparent da und nicht als fester Ton. So
   mischen sie sich in beiden Themen mit dem Grund darunter, und es gibt
   nicht zwei Werte, die auseinanderlaufen koennen. */
.status-start { background: rgba(60, 130, 200, .14); border-color: rgba(60, 130, 200, .45); }
.status-ziel  { background: rgba(40, 150, 90, .16);  border-color: rgba(40, 150, 90, .5); }
.status-aus   { background: transparent; color: var(--gedaempft); border-style: dashed; }

/* Die Beraternummer in der Liste: ein Verweis, aber ein leiser. Sie steht
   in jeder Zeile und soll die Namen nicht ueberstrahlen - deshalb in
   Ziffernbreite gesetzt und erst beim Darueberfahren unterstrichen. */
.pb-verweis {
  font-size: .82rem; font-variant-numeric: tabular-nums;
  color: var(--gedaempft); text-decoration: none;
}
.pb-verweis:hover { color: var(--akzent); text-decoration: underline; }

.zugriff { font-size: .78rem; color: var(--gedaempft); }
.zugriff-ja { color: var(--akzent); font-weight: 600; }

/* Schmale Schirme: Spalten der Reihe nach ausblenden, statt die
   Tabelle zu quetschen. Die Kennnummer und der Name bleiben immer. */
@media (max-width: 1100px) { .weg-mittel { display: none; } }
@media (max-width: 800px)  { .weg-klein  { display: none; } }

/* ---------------------------------------------------------- Blaettern */
.blaettern {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 18px; font-size: .92rem;
}
.blaettern a, .blaettern strong, .blaettern .luecke {
  display: inline-block; padding: 5px 10px; border-radius: 6px;
  border: 1px solid transparent; text-decoration: none;
}
.blaettern a { color: var(--akzent); border-color: var(--linie); }
.blaettern a:hover { background: var(--akzent-hell); }
.blaettern .hier { background: var(--akzent); color: #fff; }
:root[data-theme="dark"] .blaettern .hier { color: #0e1a1f; }
.blaettern .luecke { color: var(--gedaempft); }

.leer {
  padding: 28px; text-align: center; color: var(--gedaempft);
  border: 1px dashed var(--linie); border-radius: 10px;
}

/* ===================================================== Detailmaske === */
.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.karte { padding: 18px 20px 20px; }
.karte h2 {
  margin: 0 0 14px; font-size: 1rem; font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid var(--linie);
}
.karte hr { margin: 14px 0; }

/* Beschriftung links, Wert rechts - eine Spalte fuer das Auge, damit
   man beim Ueberfliegen nicht suchen muss. Bei schmalem Fenster
   untereinander, sonst wird der Wert zur Briefmarke. */
.fz {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 4px 12px;
  align-items: baseline;
  padding: 5px 0;
}
.fz.hoch { align-items: start; }
.fl { color: var(--gedaempft); font-size: .88rem; font-weight: 600; margin: 0; }
.fw { min-width: 0; }
.fz input[type="text"], .fz input[type="date"], .fz select, .fz textarea {
  width: 100%; padding: 7px 10px; font: inherit; font-size: .93rem;
  color: var(--text); background: var(--app-grund);
  border: 1px solid var(--feld-rand); border-radius: 6px;
}
.fz textarea { resize: vertical; line-height: 1.5; }
.notiz-lesen {
  background: var(--app-grund); border: 1px solid var(--linie);
  border-radius: 6px; padding: 8px 10px; font-size: .93rem;
  max-height: 14rem; overflow-y: auto;
}
@media (max-width: 600px) { .fz { grid-template-columns: 1fr; } }

.klein { color: var(--gedaempft); font-size: .82rem; }

.knopfzeile {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 20px;
}

ul.altverlauf {
  margin: 0; padding: 0; list-style: none;
  max-height: 20rem; overflow-y: auto;
  font-size: .88rem;
}
ul.altverlauf li {
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--linie);
  margin-bottom: 2px;
}
ul.altverlauf li:hover { border-left-color: var(--akzent); }

/* Die Zeile in der Liste als Ganzes anklickbar machen, ohne dass der
   Link die Zellen auseinandertreibt. */
table.liste td a.zeilenlink { color: inherit; text-decoration: none; }
table.liste td a.zeilenlink:hover { color: var(--akzent); text-decoration: underline; }

/* Pflichtfeldmarkierung. Ein Sternchen, keine Farbe allein - Farbe ist
   fuer Farbenblinde keine Information. */
.pflicht { color: var(--warn); font-weight: 700; }

/* --------------------------------------------------- Verwaltung */
.klein-knopf {
  font-size: .8rem; font-weight: 600;
  padding: 4px 9px; border-radius: 5px;
  border: 1px solid var(--linie);
  background: var(--app-grund); color: var(--akzent);
  cursor: pointer;
}
.klein-knopf:hover { background: var(--akzent-hell); border-color: var(--akzent); }

/* DAS AUGE IM PASSWORTFELD.
   Der Knopf sitzt IM Feld, nicht daneben: Danebenliegend waere er ein
   zweites Bedienelement in der Reihe und wuerde auf dem Telefon die
   Eingabe schmaler machen. Das Feld bekommt rechts so viel Polster,
   dass der getippte Text nicht unter das Auge laeuft. */
.pw-feld { position: relative; }
.pw-feld input { padding-right: 44px; }

.pw-auge {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gedaempft);
  cursor: pointer;
}
.pw-auge:hover  { color: var(--akzent); background: var(--akzent-hell); }
.pw-auge:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Der Strich liegt nur ueber dem Auge, solange das Passwort verborgen
   ist - offenes Auge heisst: Du siehst es gerade. */
.pw-auge .strich       { display: inline; }
.pw-auge.offen .strich { display: none; }
.pw-auge.offen         { color: var(--akzent); }

/* DER SPERRKASTEN auf der Anmeldeseite.
   Er steht unter der roten Zeile und sagt, was zu tun ist. Ruhiger
   als die Fehlermeldung darueber: Die Meldung ist die schlechte
   Nachricht, der Kasten die Loesung - und eine Loesung soll nicht
   aussehen wie ein zweiter Fehler. */
.sperrkasten {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--app-grund);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  border-radius: 8px;
}
.sperrkasten-text {
  margin: 0 0 12px;
  font-size: .92rem;
  line-height: 1.5;
}
.sperrkasten-knopf {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid var(--akzent);
  background: var(--akzent);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.sperrkasten-knopf:hover {
  background: var(--app-grund);
  color: var(--akzent);
}

/* DER SPERRHINWEIS in der Benutzerverwaltung.
   Er steht nur da, wenn jemand nicht hereinkommt, und traegt den
   Grund gleich bei sich - der Knopf allein wuerde die Frage
   offenlassen, wovon er entsperrt. Warnfarbe, aber gedaempft: Es ist
   ein Hinweis, keine Stoerung. */
.sperrhinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px; padding: 6px 10px;
  background: var(--warn-grund);
  border: 1px solid var(--warn);
  border-radius: 6px;
}
.sperrhinweis .klein { color: var(--warn); }
.knopf-entsperren {
  border-color: var(--warn) !important;
  color: var(--warn) !important;
}
.knopf-entsperren:hover {
  background: var(--warn) !important;
  color: var(--app-grund) !important;
}

/* Das einmalig angezeigte Startpasswort - gross, in fester Schrittweite
   und auswaehlbar. Es wird abgetippt oder kopiert, nicht gelesen. */
.startpasswort {
  font-family: Consolas, "Courier New", monospace;
  font-size: 1.5rem; font-weight: 700; letter-spacing: .04em;
  background: var(--app-grund); border: 1px solid var(--akzent);
  border-radius: 8px; padding: 12px 16px; margin: 0;
  user-select: all;
}

/* Der Schalterstand - gross und eindeutig. Wer hier steht, will auf
   einen Blick wissen, ob die Anwendung oeffentlich ist. */
.schalterstand {
  font-size: 1.1rem; font-weight: 700;
  padding: 10px 14px; border-radius: 8px; margin: 0 0 14px;
  border: 1px solid;
}
.schalterstand.an  { color: var(--warn); border-color: var(--warn); background: var(--warn-grund); }
.schalterstand.aus { color: #1c6b3a; border-color: #1c6b3a; background: rgba(40,150,90,.14); }

/* Der eingeklappte Verwaltungszugang auf dem Wartungshinweis.
   Zurueckhaltend: Er soll gefunden werden, nicht auffallen. */
.verwaltungszugang { margin-top: 26px; border-top: 1px solid var(--linie); padding-top: 14px; }
.verwaltungszugang > summary {
  cursor: pointer; color: var(--gedaempft); font-size: .88rem;
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.verwaltungszugang > summary::-webkit-details-marker { display: none; }
.verwaltungszugang > summary::before { content: "▸"; font-size: .8em; }
.verwaltungszugang[open] > summary::before { content: "▾"; }
.verwaltungszugang > summary:hover { color: var(--akzent); }

/* ------------------------------------------------- Zaehlband, Ausgabe,
   Seitengroesse und Sprungfeld. Dazugekommen am 19.09.2026. */

/* Die Seitengroesse ist kein Filter, sondern eine Ansichtssache -
   deshalb schmal und rechts neben dem Haken, nicht in der Filterreihe
   oben. */
.filterzeile > label.proseite { flex: 0 0 auto; margin: 0 0 0 auto; align-self: center; }
.filterzeile > select#gr { flex: 0 0 auto; width: auto; padding: 8px 10px; font: inherit;
  font-size: .93rem; color: var(--text); background: var(--app-grund);
  border: 1px solid var(--feld-rand); border-radius: 7px; }

.ausgabe {
  flex: 0 0 auto; align-self: center;
  padding: 8px 14px; font-size: .88rem; text-decoration: none;
  color: var(--akzent); background: var(--app-grund);
  border: 1px solid var(--linie); border-radius: 7px; white-space: nowrap;
}
.ausgabe:hover { background: var(--akzent-hell); border-color: var(--akzent); }
/* Zaehlband: eine Reihe anklickbarer Zahlen.
 *
 * NAME UND ZAHL NEBENEINANDER, nicht uebereinander. Das halbiert die
 * Hoehe, ohne dass die Schrift weiter schrumpfen muss - gestapelt war
 * die Beschriftung schon auf zehn Pixel herunter, und
 * "Erstgespraech/Ueberdenken" will gelesen werden.
 *
 * Die Reihenfolge bleibt Zahl, dann Name ("3.765 reserviert") - so
 * steht es im Text und so liest es ein Vorleseprogramm vor. Kein
 * umsortiertes Layout, das anders klingt, als es aussieht.
 *
 * Als flache Pillen brechen sie auf schmalen Schirmen in eine zweite
 * Zeile um, statt waagerecht zu scrollen. Bei dieser Groesse kostet
 * das weniger Platz als ein Schiebebalken, und man sieht alle zehn
 * Status auf einen Blick.
 */

.zaehlband {
  display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 6px;
}
.zb {
  flex: 0 0 auto;
  display: flex; flex-direction: row; align-items: baseline; gap: 5px;
  padding: 4px 10px; text-decoration: none; white-space: nowrap;
  color: var(--text); background: var(--app-blatt);
  border: 1px solid var(--linie); border-radius: 999px;
}
.zb:hover { border-color: var(--akzent); }
.zb-zahl { font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.zb-name { font-size: .72rem; color: var(--gedaempft); }
.zb-hier { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }

/* Dieselbe Lesart wie bei der Statuspille in der Zeile: 0 ist der
   Anfang, 60 das Ziel, ab 100 ist der Vorgang ohne Erfolg beendet. */
.zb-start { background: rgba(60, 130, 200, .14); border-color: rgba(60, 130, 200, .45); }
.zb-start:hover { border-color: rgba(60, 130, 200, .8); }
.zb-ziel .zb-zahl { color: #1c6b3a; }
:root[data-theme="dark"] .zb-ziel .zb-zahl { color: #7fd0a2; }
.zb-aus  .zb-zahl { color: var(--gedaempft); font-weight: 600; }

.sprung {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; font-size: .88rem; color: var(--gedaempft);
}
.sprung input[type="number"] {
  width: 5.5rem; padding: 6px 8px; font: inherit; font-size: .88rem;
  color: var(--text); background: var(--app-grund);
  border: 1px solid var(--feld-rand); border-radius: 6px;
}
.sprung button { padding: 6px 14px; font-size: .88rem; }

@media (max-width: 640px) {
  .filterzeile > label.proseite { margin-left: 0; }
  .ausgabe { width: 100%; text-align: center; }
}

/* Kein Knopf, sondern eine Auskunft: Die Auswahl ist zu gross fuer
   einen Durchgang. Sieht bewusst nicht anklickbar aus. */
.ausgabe-zu {
  color: var(--gedaempft); background: transparent;
  border-style: dashed; cursor: default;
}

/* ------------------------------------------- Mitlaufende Speicherleiste
   Erscheint nur, wenn sich wirklich etwas geaendert hat. Dazugekommen
   am 19.09.2026, weil der Speichern-Knopf mitten auf der Seite steht
   und darunter noch zwei Verlaufstabellen kommen. */
.speicherleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: var(--app-leiste);
  border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .10);
}
/* [hidden] muss staerker sein als display:flex, sonst zeigt die Leiste
   sich trotz des Attributs. */
.speicherleiste[hidden] { display: none; }

.sl-text { flex: 1 1 auto; font-size: .9rem; color: var(--warn); font-weight: 600; }
.speicherleiste button { padding: 8px 18px; font-size: .92rem; }
.sl-verwerfen {
  background: transparent; color: var(--gedaempft);
  border: 1px solid var(--linie);
}
.sl-verwerfen:hover { color: var(--text); border-color: var(--feld-rand); }

/* Platz schaffen, damit die Leiste nichts verdeckt - nur solange sie
   da ist. */
body.hat-leiste { padding-bottom: 68px; }

@media (max-width: 560px) {
  .speicherleiste { padding: 8px 12px; gap: 8px; }
  .sl-text { font-size: .82rem; }
  .speicherleiste button { padding: 7px 12px; font-size: .86rem; }
}

/* Marke fuer einen Filter, der gesetzt ist, aber kein Bedienfeld mehr
   hat - "nur meine Vermittler" kommt von den Verweisen auf "Mein Konto". */
.filtermarke {
  flex: 0 0 auto; align-self: center;
  padding: 5px 11px; font-size: .82rem; font-weight: 600;
  color: var(--akzent); background: var(--akzent-hell);
  border: 1px solid var(--akzent); border-radius: 999px;
}

/* Die primaere Beraternummer: der Anmeldename. Alle anderen Nummern eines
   Benutzers sind reine Bearbeitungsrechte. */
.marke-primaer {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  padding: 1px 8px; font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--akzent); background: var(--akzent-hell);
  border: 1px solid var(--akzent); border-radius: 999px;
}

/* Benutzerdaten aendern: eingeklappt in der Benutzerzeile. Sichtbar
   waeren es bei achtzehn Benutzern vierundfuenfzig Eingabefelder. */
.daten-aendern {
  display: inline-block; vertical-align: middle; margin-left: 8px;
}
.daten-aendern[open] { display: block; margin: 8px 0 0; }
.daten-aendern > summary {
  cursor: pointer; font-size: .82rem; color: var(--akzent);
  list-style: none; display: inline-block;
  padding: 3px 9px; border: 1px solid var(--linie); border-radius: 6px;
}
.daten-aendern > summary::-webkit-details-marker { display: none; }
.daten-aendern > summary:hover { background: var(--akzent-hell); border-color: var(--akzent); }
.daten-aendern[open] > summary { margin-bottom: 8px; }

.daten-aendern label {
  display: block; margin: 6px 0 2px; font-size: .74rem; color: var(--gedaempft);
}
.daten-aendern input[type="text"] {
  width: 100%; max-width: 22rem; padding: 5px 8px; font: inherit; font-size: .85rem;
  color: var(--text); background: var(--app-grund);
  border: 1px solid var(--feld-rand); border-radius: 6px;
}
.daten-aendern button { margin-top: 8px; }
.daten-aendern .zuruecksetzen { margin-left: 10px; font-size: .82rem; }

/* Loeschen in der Zugriffsspalte - nur der Administrator sieht es.
   Gedaempft, nicht rot: Es ist ein Weg zur Rueckfrage, noch keine Tat. */
.zugriff-weg { color: var(--warn); font-size: .74rem; }
.zugriff-weg:hover { text-decoration: underline; }

/* Der Knopf, der es dann wirklich tut. */
.knopf-warnung {
  padding: 9px 20px; font: inherit; font-size: .95rem; font-weight: 600;
  color: #fff; background: var(--warn);
  border: 1px solid var(--warn); border-radius: 8px; cursor: pointer;
}
.knopf-warnung:hover { filter: brightness(1.1); }

/* Umhaengen in der Zugriffsspalte - neben dem Loeschen, aber in der
   Akzentfarbe: Es ist eine Zuteilung, keine Vernichtung. */
.zugriff-um { color: var(--akzent); font-size: .74rem; margin-right: 8px; }
.zugriff-um:hover { text-decoration: underline; }