/* Zeiterfassung - Oberflaeche im Stil eines Werkstattgeraets.
   Bewusst ohne Web-Schriften: die App laeuft im LAN, ggf. ohne Internet. */

:root {
  --grund:    #111a21;
  --pult:     #18232b;
  --pult-hell:#202d36;
  --kante:    #293840;
  --text:     #e3ebf0;
  --leise:    #8698a4;
  --signal:   #f0993f;
  --ruhe:     #5f8299;
  --warnung:  #f0685c;
  --gut:      #4fbb87;

  /* Markenfarbe: traegt die Flaeche, fordert nichts. Dasselbe Indigo wie
     das Gehaeuse - Geraet an der Wand und App auf dem Handy gehoeren
     sichtbar zusammen. Im Dunkeln gedaempft in der Flaeche und
     aufgehellt in der Schrift; ein Indigo, das auf Weiss sitzt, waere
     hier ein Loch. */
  --marke:      #1f2950;
  --auf-marke:  #dde3f5;
  --marke-text: #93a4ec;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ziffern: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  --raum-1: 0.5rem;
  --raum-2: 1.15rem;
  --raum-3: 2rem;
  --raum-4: 3.25rem;

  --breite: 80rem;
  --rand: 1.75rem;

  /* Schrift auf farbigen Flaechen. Dunkel, weil die Flaechen hell sind. */
  --auf-signal:      #1c1206;
  --auf-signal-tief: #150e04;
  --auf-ruhe:        #06121a;
  --auf-gut:         #052214;

  /* Eine Stufe tiefer als --pult, fuer eingelassene Flaechen. */
  --flaeche-tief: #141e25;

  /* Aufhellungen fuer Beruehrung und Schwebezustand. In der hellen
     Fassung werden daraus Abdunklungen. */
  --schleier-1: rgba(255, 255, 255, 0.03);
  --schleier-2: rgba(255, 255, 255, 0.06);
  --schleier-3: rgba(255, 255, 255, 0.08);
  --schleier-dialog: rgba(6, 11, 15, 0.72);
}

* { box-sizing: border-box; }

/* Grundfarbe fuer Verweise. Ohne sie nimmt der Browser sein Blau und fuer
   besuchte sein Violett - beides passt in keine der beiden Fassungen.
   Absichtlich die geringste Spezifitaet: Jede vorhandene Regel behaelt
   ihre eigene Farbe. */

a { color: var(--marke-text); }
a:visited { color: var(--marke-text); }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

main {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum-3) var(--rand) 5rem;
}

/* --- Kein Netz ---

   Deckt den ganzen Bildschirm des Wandgeraets zu. Bewusst ohne Schliessen:
   Solange keine Verbindung steht, waere jede Bedienung eine Luege. */

.keinnetz {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: color-mix(in srgb, var(--grund) 94%, transparent);
  backdrop-filter: blur(3px);
}

.keinnetz[hidden] { display: none; }

.keinnetz__kasten {
  max-width: 30rem;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--warnung) 45%, transparent);
  border-radius: 14px;
  padding: 2rem;
  background: var(--pult);
}

.keinnetz__titel {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--warnung);
}

.keinnetz__text {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text);
}

/* --- Streifen fuer offene Versendungen ---

   Sitzt zwischen Kopfzeile und Inhalt, in Signalfarbe, ohne Schliesskreuz.
   Er verschwindet erst, wenn der Rapport draussen oder abgehakt ist. */

.streifen {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0.7rem var(--rand);
  background: color-mix(in srgb, var(--signal) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  font-size: 0.9rem;
  color: var(--text);
}

.streifen__punkt {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--signal);
}

.streifen__text { flex: 1 1 12rem; }

.streifen__weg {
  flex: none;
  color: var(--signal);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Am Wandgeraet nur ein Punkt, kein Text. */

/* Nach OBEN rechts: Unten sitzen jetzt die beiden Bedienpunkte, und drei
   Punkte in derselben Ecke waeren nicht auseinanderzuhalten. Bedienung
   unten, Zustand oben. */
.ruhe__punkt {
  position: absolute;
  right: 1.6rem;
  top: 1.6rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0.85;
}

/* --- Kopfzeile --- */

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  flex-wrap: wrap;
  padding: var(--raum-2) max(var(--rand), calc((100% - var(--breite)) / 2));
  background: var(--marke);
  color: var(--auf-marke);
}

.marke {
  display: flex;
  align-items: center;
  color: var(--auf-marke);
}

/* Die Wortmarke fuehrt ihre Farbe ueber `currentColor` - damit sitzt sie
   auf der Indigoleiste weiss und im Assistenten in der Textfarbe, ohne
   dass es zwei Dateien braucht. */

.marke__zeichen {
  /* Einzige Stelle, an der die Groesse der Wortmarke steht. */
  height: 1.45rem;
  width: auto;
  display: block;
}

.marke--assistent {
  color: var(--marke-text);
  margin-bottom: var(--raum-3);
}

.marke--assistent .marke__zeichen { height: 1.9rem; }

/* Der Rueckweg am Geraet. Deutlicher als die uebrigen Reiter - er ist
   dort der einzige Ausgang. */

.kopf a.zurueck-uhr {
  opacity: 1;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--auf-marke) 45%, transparent);
  border-radius: 8px;
  padding: 0.3rem 0.8rem;
}

/* Die Ecke fuers Zuruecksetzen. Unsichtbar, aber gross genug, um sie mit
   dem Finger zuverlaessig zu treffen. Ab dem dritten Antippen ein leiser
   Schimmer - sonst tippt jemand ins Leere und weiss nicht, ob es zaehlt. */

/* Die zwei Wege auf der Ruecksetzseite. Kurz gehalten, damit beide auf
   den Schirm passen - der zweite lag vorher unter dem Rand und blieb
   unbemerkt. Die Formulare erscheinen erst nach dem Antippen. */

.wahl {
  border: 1px solid var(--kante);
  border-radius: 12px;
  padding: var(--raum-3);
  margin-bottom: var(--raum-3);
}

.wahl__titel {
  font-size: 1.05rem;
  margin: 0 0 0.3rem;
}

.wahl__text {
  color: var(--leise);
  font-size: 0.95rem;
  margin: 0 0 var(--raum-2);
}

/* Der Firmenname zum Abtippen - gross genug, dass niemand ihn fuer
   eine Beschriftung haelt und stattdessen sein Passwort eintippt. */
.abtippen {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.25rem;
  color: var(--signal);
  margin: 0.2rem 0 0.6rem;
  word-break: break-word;
}

.wahl__fehler {
  margin: 0 0 var(--raum-2);
}

.wahl__form {
  margin-top: var(--raum-3);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--kante);
}

/* --- Die beiden Eckpunkte ---

   Rechts blau fuers Wartungsmenue, links rot fuers Zuruecksetzen. Leise
   genug, dass sie das Bild nicht stoeren; deutlich genug, dass man sie
   findet, wenn man sie sucht.

   Die Trefferflaeche ist viel groesser als der sichtbare Punkt - auf
   einem Touchscreen trifft niemand acht Millimeter zuverlaessig. */

.eckpunkt {
  position: fixed;
  bottom: 0;
  /* GERECHNET, nicht geschaetzt. Der Bildschirm misst 7 Zoll bei
     720x1280, also 210 dpi - ein Pixel sind 0,121 mm. Auf `.geraetseite`
     gilt `font-size: 20px`, ein rem ist also 20 px.

         4,5 rem =  90 px = 10,9 mm   (vorher)
         6,5 rem = 130 px = 15,7 mm   (jetzt)

     Empfohlen werden 15,5 mm (Apple) bzw. 12,7 mm (Google); 10 mm gilt
     als unterste Grenze fuer einen Daumen. Der Knopf lag knapp darueber
     UND klebt in der Ecke, wo ein Teil der Fingerkuppe schon neben dem
     Glas liegt. Sieben Sekunden stillzuhalten war damit viel verlangt.

     Der sichtbare Punkt und der Bogen aendern sich nicht: Der Punkt sitzt
     mittig in der Flaeche, der Bogen hat mit 12 rem eine feste Groesse.
     Beide ruecken einen halben Zentimeter weiter von der Ecke weg - was
     der Bedienung eher hilft als schadet. */
  width: 6.5rem;
  height: 6.5rem;
  /* Ohne das darf der Browser die Beruehrung als Wischen beanspruchen und
     bricht den Zeigervorgang mit `pointercancel` ab. `preventDefault()`
     im `pointerdown` verhindert das NICHT - allein `touch-action` tut es. */
  touch-action: none;
  z-index: 300;
  border: 0;
  background: transparent;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Der sichtbare Punkt selbst, mittig in der Trefferflaeche. */
.eckpunkt::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
}

.eckpunkt--wartung { right: 0; }
.eckpunkt--wartung::after { background: var(--ruhe); }

/* Liegt eine Versendung offen, wird derselbe Punkt orange. Ein Punkt,
   zwei Farben: Die Stelle und die Bedienung bleiben gleich, nur die
   Farbe sagt «hier gibt es etwas zu tun». So bleiben es zwei Punkte auf
   dem Bildschirm statt drei. */
.eckpunkt--offen::after {
  background: var(--signal);
  opacity: 0.85;
}

.eckpunkt--ruecksetzen { left: 0; }
.eckpunkt--ruecksetzen::after { background: #e0655a; }

/* Waehrend des Haltens waechst er und wird heller - sonst weiss niemand,
   ob der Druck ankommt. */
/* Ein VIERTELBOGEN, der sich in genau der Haltezeit fuellt.

   Skript 95 hatte einen vollen Ring in Knopfgroesse - der liegt genau
   unter dem Finger und ist damit unsichtbar. Der Bogen ragt stattdessen
   diagonal ins Bild: beim Knopf unten rechts nach oben links, beim
   Knopf unten links nach oben rechts.

   GERECHNET: Bei 12 rem Kantenlaenge und Radius 44 von 100 liegt er
   5,28 rem vom Mittelpunkt entfernt. Eine Fingerkuppe misst rund
   1,5 rem im Halbmesser - also gut dreimal so weit draussen, wie der
   Finger reicht. */
.eckpunkt__bogen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12rem;
  height: 12rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.eckpunkt__bogen path {
  stroke: currentColor;
  transition: none;
}

.eckpunkt--wartung .eckpunkt__bogen { color: var(--mint, #a8e6df); }
.eckpunkt--ruecksetzen .eckpunkt__bogen { color: #e0655a; }

.eckpunkt--haelt .eckpunkt__bogen { opacity: 1; }

.eckpunkt--haelt .eckpunkt__bogen path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--haltedauer, 7s) linear;
}

@media (prefers-reduced-motion: reduce) {
  .eckpunkt--haelt .eckpunkt__bogen path {
    transition: none;
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
}

/* Der alte volle Ring aus Skript 95 - bleibt fuer den Fall, dass eine
   Seite ihn noch benutzt. Er stoert nicht, wo es keinen gibt.

   GROESSER ALS DIE FINGERKUPPE - sonst sieht man ihn nicht, weil der
   Finger daraufliegt. Deshalb fuellt er die ganze Trefferflaeche aus,
   nicht nur den sichtbaren Punkt.

   Er zeigt mehr als den Fortschritt: Wer sieht, dass der Ring
   zurueckspringt, weiss, dass etwas abgebrochen hat. Vorher war das
   ununterscheidbar von «zu kurz gedrueckt». */
.eckpunkt__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 0.15s;
}

.eckpunkt__ring circle {
  stroke: currentColor;
  transition: none;
}

.eckpunkt--wartung .eckpunkt__ring { color: var(--mint, #a8e6df); }
.eckpunkt--ruecksetzen .eckpunkt__ring { color: #e0655a; }

/* Beim Halten: Ring einblenden und in `--haltedauer` volllaufen
   lassen. `linear`, damit die verbleibende Zeit ablesbar ist - eine
   beschleunigte Anzeige waere eine Luege. */
.eckpunkt--haelt .eckpunkt__ring { opacity: 1; }

.eckpunkt--haelt .eckpunkt__ring circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--haltedauer, 7s) linear;
}

@media (prefers-reduced-motion: reduce) {
  /* Kein Volllaufen, aber sichtbar bleiben: Dass ueberhaupt etwas
     passiert, gehoert gezeigt. */
  .eckpunkt--haelt .eckpunkt__ring circle {
    transition: none;
    stroke-dashoffset: 0;
    opacity: 0.5;
  }
}

.eckpunkt--haelt::after {
  opacity: 1;
  transform: scale(1.6);
}

.ruecksetzecke--warm {
  background: radial-gradient(circle at bottom right,
              color-mix(in srgb, var(--signal) 22%, transparent), transparent 70%);
}

.kopf a.zurueck-uhr:hover {
  background: color-mix(in srgb, var(--auf-marke) 14%, transparent);
}

.kopf nav {
  display: flex;
  gap: 1.5rem;
  flex: 1;
  justify-content: flex-end;
}

.kopf a {
  color: var(--auf-marke);
  opacity: 0.78;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

/* Der aktive Reiter arbeitet mit Deckkraft und Gewicht statt mit einer
   zweiten Farbe - auf der Markenflaeche waere Orange ein Fremdkoerper. */
.kopf a[aria-current="page"] {
  opacity: 1;
  font-weight: 600;
  border-bottom-color: currentColor;
}

.kopf a:hover { opacity: 1; }

/* --- Zweispaltiges Grundgeruest auf breiten Schirmen --- */

.gitter {
  display: grid;
  gap: var(--raum-4);
  align-items: start;
}

@media (min-width: 60rem) {
  .gitter { grid-template-columns: 26rem 1fr; }
}

/* --- Pult: die Statusanzeige --- */

.pult {
  border: 1px solid var(--kante);
  border-radius: 12px;
  background: var(--pult);
  padding: var(--raum-4) var(--raum-3);
  text-align: center;
}

.pult--laeuft { border-color: color-mix(in srgb, var(--signal) 45%, var(--kante)); }

.pult__person {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
}

.pult__lage {
  margin: var(--raum-2) 0 0;
  color: var(--signal);
  font-size: 0.95rem;
}

.pult__lage--still { color: var(--leise); }

.punkt {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: var(--raum-1);
  border-radius: 50%;
  background: var(--signal);
  vertical-align: 1px;
}

.zaehlwerk {
  font-family: var(--ziffern);
  font-size: clamp(3.75rem, 16vw, 5.25rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: var(--raum-2) 0 0;
  color: var(--signal);
}

.zaehlwerk--still { color: var(--ruhe); }

.pult__notiz {
  margin: var(--raum-1) 0 0;
  color: var(--leise);
  font-size: 0.85rem;
}

.pult__uhr {
  margin: var(--raum-3) 0 0;
  color: var(--leise);
  font-size: 0.85rem;
  font-family: var(--ziffern);
}

/* --- Knopf --- */

.knopf {
  display: block;
  width: 100%;
  margin: var(--raum-3) auto 0;
  padding: 1.25rem 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--signal);
  color: var(--auf-signal);
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.knopf--gehen { background: var(--ruhe); color: var(--auf-ruhe); }
.knopf:hover { filter: brightness(1.08); }
.knopf:active { transform: translateY(1px); }

.knopf--klein {
  width: auto;
  margin: 0;
  padding: 0.6rem 1.1rem;
  font-size: 0.95rem;
}

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* --- Stundenkonto --- */

.konto {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--kante);
  border-radius: 10px;
  background: var(--pult);
}

.konto__wert {
  font-family: var(--ziffern);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  color: var(--signal);
}

.konto__wert--minus { color: var(--warnung); }
.konto__wert--plus { color: var(--gut); }
.konto__text { color: var(--leise); font-size: 0.9rem; }

/* --- Tagesliste mit Band --- */

.ueberschrift {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
  font-weight: 600;
  margin: var(--raum-4) 0 var(--raum-2);
}

.gitter .ueberschrift:first-child { margin-top: 0; }

.tage { list-style: none; margin: 0; padding: 0; }

.tag {
  padding: var(--raum-2) 0;
  border-top: 1px solid var(--kante);
}

.tag:last-child { border-bottom: 1px solid var(--kante); }

.tag__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--raum-2);
}

.tag__datum { color: var(--leise); font-size: 0.9rem; }

.tag__summe {
  font-family: var(--ziffern);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  white-space: nowrap;
}

.offen {
  font-family: var(--schrift);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--signal);
}

.tag__diff {
  margin-left: 0.6rem;
  font-family: var(--ziffern);
  font-size: 0.85rem;
  color: var(--leise);
}

.tag__diff--minus { color: var(--warnung); }
.tag__diff--plus { color: var(--gut); }

/* Das Band zeigt den Tag von 05:00 bis 20:00 - man sieht die Form des Tages,
   nicht nur die Summe. */
/* Das Band bildet den Tag von 05:00 bis 20:00 ab. Der Hintergrund trägt ein
   Stundenraster, damit die Balken ablesbar werden und nicht nur schweben. */
.band {
  position: relative;
  height: 15px;
  margin: 0.65rem 0 0.45rem;
  border-radius: 4px;
  background:
    repeating-linear-gradient(to right,
      var(--kante) 0, var(--kante) 1px,
      transparent 1px, transparent calc(100% / 15));
  background-color: var(--flaeche-tief);
  box-shadow: inset 0 0 0 1px var(--kante);
  overflow: hidden;
}

.band__stueck {
  position: absolute;
  top: 2px;
  bottom: 2px;
  min-width: 4px;
  border-radius: 3px;
  background: var(--ruhe);
}

.band__stueck--offen { background: var(--signal); }

.band__mittag {
  position: absolute;
  top: 0; bottom: 0;
  left: 46.67%;
  width: 1px;
  background: color-mix(in srgb, var(--leise) 45%, transparent);
}

.tag__zeiten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-family: var(--ziffern);
  font-size: 0.8rem;
  color: var(--leise);
}

.tag__soll { margin-left: auto; }

/* --- Bilanz --- */

.bilanz {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.bilanz__wert {
  font-family: var(--ziffern);
  font-variant-numeric: tabular-nums;
  font-size: 2.75rem;
}

.bilanz__text { color: var(--leise); font-size: 0.9rem; }

/* --- Formulare --- */

.anmeldung {
  max-width: 23rem;
  margin: 15vh auto 0;
}

.anmeldung h1 {
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
  font-weight: 600;
  margin: 0 0 var(--raum-3);
}

/* Die Wortmarke auf den Anmeldeseiten. Sie steht auf dem Seitengrund,
   nicht auf der Indigoleiste - `currentColor` gibt ihr deshalb die
   Markenfarbe statt Weiss. */

/* `.anmeldung .anmeldung__marke` statt nur `.anmeldung__marke`: Auf
   login.html steht die Marke in einem <h1>, und `.anmeldung h1` waere
   sonst spezifischer - die Marke bekaeme die graue Ueberschriftenfarbe.
   Auf login_code.html steht sie in einem <span> und waere indigo.
   Derselbe Baustein duerfte nicht zwei Farben haben. */

.anmeldung .anmeldung__marke {
  display: block;
  color: var(--marke-text);
  margin: 0 0 var(--raum-3);
}

.anmeldung__marke .marke__zeichen { height: 2rem; }

/* --- Die Ruecksetzseite ---

   Dort werden Daten geloescht. Sie soll auf den ersten Blick anders
   aussehen als alles andere - dunkles Rot statt Indigo. Kein Signalrot,
   das schreit, sondern ein Ton, der sagt: hier aufpassen.

   Geprueft: Text (14.2), gedaempfter Text (6.6) und die Warnfarbe der
   Ueberschrift (7.3) liegen alle ueber der Grenze. */

/* Das Wartungsmenue steht auf demselben Verlauf wie die Stempeluhr - es
   gehoert zum Geraet und soll nicht aussehen, als komme es von woanders. */

body.wartungs-seite {
  background: linear-gradient(180deg, #1b2340 0%, var(--grund) 65%);
  min-height: 100vh;
}

/* Die Sperrseite. Kein Rot - es ist kein Schaden, sondern eine
   Einstellung, die nicht passt. Der gedaempfte Ton sagt: Hier stimmt
   etwas nicht, aber nichts ist kaputt. */

body.gesperrt-seite {
  background: linear-gradient(180deg, #2e2718 0%, #1a1710 70%);
  min-height: 100vh;
}

.gesperrt-seite h1 { color: var(--signal); }

.gesperrt__adresse {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.3rem, 5vw, 2rem);
  color: var(--signal);
  margin: var(--raum-3) 0 var(--raum-2);
  word-break: break-all;
}

.gesperrt-seite .notiz,
.gesperrt-seite .assistent__text { color: rgba(255,255,255,0.75); }

.gesperrt__warten { opacity: 0.7; margin-top: var(--raum-4); }

body.ruecksetz-seite {
  background: linear-gradient(180deg, #3a161c 0%, #241016 70%);
  min-height: 100vh;
}

.ruecksetz-seite h1 {
  color: #ff8a7a;
}

.ruecksetz-seite .wahl {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.18);
}

.ruecksetz-seite .wahl__text,
.ruecksetz-seite .notiz {
  color: rgba(255, 255, 255, 0.72);
}

.ruecksetz-seite label {
  color: rgba(255, 255, 255, 0.85);
}

.ruecksetz-seite input {
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}

.ruecksetz-seite .verweis {
  color: rgba(255, 255, 255, 0.8);
}

.anmeldung__marke--klein { margin-bottom: var(--raum-2); }
.anmeldung__marke--klein .marke__zeichen { height: 1.4rem; }

/* --- Die Anmeldeseiten auf der Markenflaeche ---

   Die Flaeche folgt `--marke` und wird im dunklen System eine Spur
   tiefer. Alles DARAUF steht dagegen fest: Beide Indigotoene sind dunkel,
   weisse Felder und ein helles Orange passen auf beide.

   Damit sieht die Anmeldeseite fuer alle gleich aus - unabhaengig davon,
   was jemand unter Konto -> Darstellung gewaehlt hat. Das ist hier ein
   Vorteil: Beim Anmelden ist noch niemand angemeldet, die Wahl also gar
   nicht bekannt. Vorher richtete sich die Seite nach dem Betriebssystem
   und sprang beim Anmelden auf die persoenliche Fassung um. */

body.anmelde-seite {
  background: var(--marke);
  min-height: 100vh;
}

.anmelde-seite .anmeldung .anmeldung__marke { color: #ffffff; }

.anmelde-seite .anmeldung h1 { color: rgba(255, 255, 255, 0.8); }
.anmelde-seite .anmeldung label { color: rgba(255, 255, 255, 0.88); }
.anmelde-seite .anmeldung .notiz,
.anmelde-seite .anmeldung summary { color: rgba(255, 255, 255, 0.75); }
.anmelde-seite .anmeldung a { color: #ffffff; }

/* Weisse Felder auf der dunklen Flaeche, in beiden Fassungen gleich. */

.anmelde-seite .anmeldung input {
  background: #ffffff;
  color: #16202c;
  border-color: rgba(255, 255, 255, 0.35);
}

.anmelde-seite .anmeldung input:hover,
.anmelde-seite .anmeldung input:focus {
  border-color: #ffffff;
}

/* Die Ausfuellhilfe muss hier ebenfalls Weiss bekommen - die allgemeine
   Regel weiter oben nimmt `--pult`, und das waere in der dunklen Fassung
   ein dunkles Feld auf einem weissen. */

.anmelde-seite input:-webkit-autofill,
.anmelde-seite input:-webkit-autofill:hover,
.anmelde-seite input:-webkit-autofill:focus,
.anmelde-seite input:-webkit-autofill:active {
  -webkit-text-fill-color: #16202c;
  -webkit-box-shadow: 0 0 0 100px #ffffff inset;
  caret-color: #16202c;
}

/* Das helle Orange aus der dunklen Fassung - auf Indigo hebt es sich ab,
   das gedaempfte aus der hellen Fassung waere dort matt. */

.anmelde-seite .anmeldung .knopf {
  background: #f0993f;
  color: #1c1206;
}

.anmelde-seite .anmeldung .knopf--rand {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

/* `.fehler` hat keinen Rahmen - nur Flaeche und Schrift setzen. */

.anmelde-seite .anmeldung .fehler {
  background: rgba(0, 0, 0, 0.28);
  color: #ffd2c9;
}

/* --- Groessen im Anmeldeformular ---

   Die allgemeine Regel fuer `.knopf` bleibt unberuehrt: Auf «Heute» ist
   das Kommen/Gehen, am Wandgeraet wird er mit dem Finger getroffen, und
   dort ist gross richtig. Hier sitzt jemand am Rechner und tippt. */

.anmeldung .knopf {
  padding: 0.85rem 1rem;
  font-size: 1.05rem;
  margin-top: var(--raum-2);
}

/* Etwas groesser als sonst - hier steht sonst nichts auf der Seite, und
   ein Passwort tippt man ungern in kleine Felder. Nicht unter 1 rem:
   Darunter zoomt iOS beim Antippen von selbst hinein. */

.anmeldung input {
  padding: 0.85rem 0.95rem;
  font-size: 1.05rem;
}

.anmeldung label {
  font-size: 0.95rem;
  color: var(--text);
}

label {
  display: block;
  margin: var(--raum-2) 0 0.4rem;
  font-size: 0.85rem;
  color: var(--leise);
}

input, select {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--kante);
  border-radius: 8px;
  background: var(--pult);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

input:hover, select:hover { border-color: var(--ruhe); }

/* Ausgefuellte Felder behalten die eigene Farbe. Ohne das legt Chrome
   sein Hellblau darueber - auf einer dunklen Seite ein Fremdkoerper, und
   auf der Anmeldeseite standen so helle neben dunklen Feldern. */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 100px var(--pult) inset;
  caret-color: var(--text);
  transition: background-color 100000s ease-in-out 0s;
}

.formular { max-width: 26rem; }
.formular .knopf { margin-top: var(--raum-3); }

.karte {
  border: 1px solid var(--kante);
  border-radius: 14px;
  background: var(--pult);
  padding: var(--raum-4) var(--raum-3);
  margin-bottom: var(--raum-3);
}

.fehler, .hinweis {
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin: 0 0 var(--raum-3);
}

.fehler { background: color-mix(in srgb, var(--warnung) 18%, transparent); color: var(--warnung); }
.hinweis { background: color-mix(in srgb, var(--ruhe) 22%, transparent); color: var(--text); }

.leer, .notiz {
  color: var(--leise);
  font-size: 0.85rem;
  margin: var(--raum-1) 0 0;
}

/* --- Tabellen --- */

.tabelle-rahmen { overflow-x: auto; }

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}

.tabelle th {
  text-align: left;
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leise);
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--kante);
  white-space: nowrap;
}

.tabelle td {
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--kante);
}

.tabelle .zahl {
  font-family: var(--ziffern);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 1rem;
}

.tabelle .zahl--stark { color: var(--text); font-weight: 600; }

/* --- Sollstunden-Gitter: sieben Tage, die auch Platz haben --- */

.stunden-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 0.6rem;
  margin-top: var(--raum-2);
  max-width: 40rem;
}

.stunden-gitter label {
  margin: 0 0 0.35rem;
  text-align: center;
  font-size: 0.8rem;
}

.stunden-gitter input {
  padding: 0.7rem 0.4rem;
  text-align: center;
  font-family: var(--ziffern);
  font-size: 1.05rem;
}

.wechsler { max-width: 26rem; margin-bottom: var(--raum-3); }

/* --- Personenliste --- */

.personen { list-style: none; margin: 0; padding: 0; }

.personen > li {
  padding: var(--raum-3) 0;
  border-top: 1px solid var(--kante);
}

.personen > li:last-child { border-bottom: 1px solid var(--kante); }

.personen__kopf {
  display: flex;
  gap: var(--raum-2);
  align-items: baseline;
  flex-wrap: wrap;
}

.personen__name { font-size: 1.05rem; }
.personen__login { color: var(--leise); font-family: var(--ziffern); font-size: 0.85rem; }
.personen__rolle { margin-left: auto; color: var(--leise); font-size: 0.8rem; }

.pin-zeile {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  margin-top: var(--raum-2);
  flex-wrap: wrap;
}

.pin-zeile label { margin: 0 0 0.4rem; white-space: nowrap; }
.pin-zeile > div { flex: 1 1 12rem; max-width: 20rem; }

/* --- Kiosk: gebaut für ein 7-Zoll-Wandgerät im Hochformat (720 x 1280) --- */

.kiosk-seite {
  /* Oben das Indigo der Marke, unten der bisherige Ton. Der Verlauf
     endet bei 65 %, damit die Uhr in der Bildmitte auf ruhigem Grund
     steht und nicht auf einer Farbkante.

     Geprueft: Uhr (11.1), Text (13.1) und Signalfarbe (6.9) bleiben auch
     auf dem hellsten Punkt des Verlaufs weit ueber der Grenze. */
  background: linear-gradient(180deg, #1b2340 0%, var(--grund) 65%);
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

.kiosk {
  margin: auto;
  padding: var(--raum-3) var(--rand);
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

.kiosk__kopf { margin-bottom: var(--raum-4); }

.kiosk__uhr {
  font-family: var(--ziffern);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.5rem, 16vw, 6rem);
  line-height: 1;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.02em;
}

.kiosk__datum {
  margin: 0.6rem 0 0;
  color: var(--leise);
  font-size: 1rem;
}

.kiosk__meldung {
  padding: 1.1rem 1rem 0.9rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gut) 22%, transparent);
  color: var(--gut);
  font-size: 1.15rem;
  margin: 0 0 var(--raum-3);
}

.kiosk__meldungstext { margin: 0 0 0.8rem; }

.kiosk__meldung--fehler {
  background: color-mix(in srgb, var(--warnung) 20%, transparent);
  color: var(--warnung);
}

.kiosk__leute {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--raum-2);
}

.kachel {
  width: 100%;
  /* Feste Hoehe in beiden Zustaenden. Sonst wird die Kachel hoeher, sobald
     "laeuft seit" und der Zaehler dazukommen - der Streifen am unteren Rand
     wandert dann mit und es sieht aus, als waeren es zwei Balken. */
  min-height: 15.5rem;
  padding: var(--raum-3) var(--raum-3) 0;
  border: 1px solid var(--kante);
  border-radius: 16px;
  background: var(--pult);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
}

.kachel:active { background: var(--pult-hell); }

/* Farbe zeigt den Zustand, nicht die Handlung: wer angestempelt ist, hat
   eine warm getönte Kachel mit ruhig atmendem Rand. Das sieht man auch aus
   drei Metern Entfernung, ohne dass es blinkt. */
.kachel--laeuft {
  border-color: color-mix(in srgb, var(--signal) 55%, var(--kante));
  background: color-mix(in srgb, var(--signal) 9%, var(--pult));
  animation: atmen 4s ease-in-out infinite;
}

@keyframes atmen {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 26%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--signal) 0%, transparent); }
}

.pulspunkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--signal);
  vertical-align: 1px;
  animation: pulsen 2s ease-in-out infinite;
}

@keyframes pulsen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

.kachel__dauer {
  font-family: var(--ziffern);
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--signal);
  margin-top: 0.2rem;
}

.kachel__kopf {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-bottom: var(--raum-3);
  /* Platz fuer Name, Lage und Zaehler - auch wenn der Zaehler fehlt */
  min-height: 8.5rem;
  justify-content: flex-start;
}

.kachel__name { font-size: 2rem; line-height: 1.15; }

.kachel__lage {
  font-size: 0.95rem;
  color: var(--leise);
}

.kachel--laeuft .kachel__lage { color: var(--signal); }

/* Die Handlung sitzt als Leiste am unteren Rand der Kachel statt als
   Pille in der Mitte - so wirkt sie als Teil der Fläche, nicht als
   aufgeklebtes Element. */
/* Die Aktionsleiste bleibt farblos - sie sagt, was der Tipp bewirkt, und
   soll nicht mit der Zustandsfarbe konkurrieren. */
.kachel__aktion {
  display: block;
  margin: 0 calc(var(--raum-3) * -1);
  padding: 1.1rem 0;
  border-top: 1px solid var(--kante);
  border-radius: 0 0 15px 15px;
  background: var(--schleier-1);
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.kachel:active .kachel__aktion { background: var(--schleier-3); }

/* --- Zifferntastatur --- */

.pinfeld { max-width: 22rem; margin: 0 auto; }

.pinfeld__frage { font-size: 1.5rem; margin: 0 0 0.4rem; }

.pinfeld__punkte {
  font-family: var(--ziffern);
  font-size: 1.9rem;
  letter-spacing: 0.25em;
  color: var(--signal);
  margin: 0 0 var(--raum-3);
  min-height: 2.4rem;
}

.tasten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}

.taste {
  padding: 1.15rem 0;
  border: 1px solid var(--kante);
  border-radius: 12px;
  background: var(--pult);
  color: var(--text);
  font-family: var(--ziffern);
  font-size: 1.8rem;
  cursor: pointer;
}

.taste:active { background: var(--pult-hell); }
.taste--still { color: var(--leise); font-family: var(--schrift); font-size: 1.4rem; }

.taste--los {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--auf-signal);
  font-family: var(--schrift);
  font-size: 1.2rem;
  font-weight: 600;
}

.kiosk__zurueck {
  display: inline-block;
  margin-top: var(--raum-3);
  color: var(--leise);
  font-size: 1rem;
}

/* Querformat oder flaches Fenster: Uhr kleiner, Kacheln nebeneinander */
@media (orientation: landscape) and (max-height: 40rem) {
  .kiosk { max-width: 52rem; padding: var(--raum-2) var(--rand); }
  .kiosk__kopf { margin-bottom: var(--raum-2); }
  .kiosk__uhr { font-size: 2.75rem; }
  .kiosk__datum { font-size: 0.85rem; }
  .kiosk__leute { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
  .kachel { min-height: 8rem; padding: var(--raum-2); }
  .kachel__name { font-size: 1.5rem; }
  .taste { padding: 0.75rem 0; font-size: 1.4rem; }
  .pinfeld__punkte { font-size: 1.5rem; margin-bottom: var(--raum-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==== Etappe 3: Abwesenheiten ==== */

.konten {
  display: grid;
  gap: var(--raum-2);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-bottom: var(--raum-3);
}

.konten .konto { margin-top: 0; align-items: center; }
.konten .konto__text { line-height: 1.35; }

.kalender__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-2);
}

.kalender__kopf .ueberschrift { margin-top: 0; }

.kalender__blaettern { display: flex; gap: 0.75rem; }

.kalender__blaettern a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--kante);
  border-radius: 8px;
  color: var(--leise);
  text-decoration: none;
  font-size: 1.2rem;
}

.kalender__blaettern a:hover { color: var(--text); border-color: var(--ruhe); }

.kalender {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
}

.kalender th {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leise);
  font-weight: 600;
  padding-bottom: 0.6rem;
}

.ktag {
  height: 6.5rem;
  vertical-align: top;
  padding: 0;
  border-radius: 9px;
  background: var(--flaeche-tief);
  border: 1px solid transparent;
  overflow: hidden;
}

.ktag__zahl { font-family: var(--ziffern); font-size: 1.05rem; color: var(--leise); }

.ktag__text {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Tage aus dem Nachbarmonat: sichtbar, damit Blöcke über die Monatsgrenze
   erkennbar bleiben - aber durch Schraffur und Monatskürzel unverwechselbar. */
.ktag--fremd { opacity: 0.5; }

.ktag--fremd .ktag__flaeche {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 5px,
    color-mix(in srgb, var(--leise) 16%, transparent) 5px,
    color-mix(in srgb, var(--leise) 16%, transparent) 6px);
}

.ktag__monat {
  margin-left: 0.25rem;
  font-family: var(--schrift);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--leise);
  vertical-align: 1px;
}
.ktag--arbeit { background: var(--pult); }
.ktag--arbeit .ktag__zahl { color: var(--text); }

.ktag--ferien    { background: color-mix(in srgb, var(--ruhe) 40%, var(--pult)); }
.ktag--abbau     { background: color-mix(in srgb, var(--signal) 32%, var(--pult)); }
.ktag--krankheit,
.ktag--unfall    { background: color-mix(in srgb, var(--warnung) 30%, var(--pult)); }
.ktag--unbezahlt { background: var(--pult); border-color: var(--kante); }
.ktag--sonstiges { background: color-mix(in srgb, var(--ruhe) 25%, var(--pult)); }
.ktag--feiertag  { background: var(--pult); border-color: var(--ruhe); }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  list-style: none;
  margin: var(--raum-3) 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--leise);
}

.legende li { display: flex; align-items: center; gap: 0.4rem; }

.punkt--ferien    { background: color-mix(in srgb, var(--ruhe) 70%, var(--text)); }
.punkt--abbau     { background: var(--signal); }
.punkt--krankheit { background: var(--warnung); }
.punkt--feiertag  { background: transparent; border: 1px solid var(--ruhe); }

.feldpaar {
  display: grid;
  gap: var(--raum-2);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.feldpaar label { margin-top: 0; }

.verweis {
  background: none;
  border: 0;
  padding: 0;
  color: var(--leise);
  font-family: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.verweis:hover { color: var(--warnung); }

/* ==== Etappe 3b: Adminübersicht und mehr Luft ==== */

/* Auf sehr breiten Schirmen darf der Kalender die volle Breite nutzen */
@media (min-width: 90rem) {
  body.weit main { max-width: 92rem; }
}

.ktag--heute { outline: 2px solid var(--signal); outline-offset: -2px; }

/* --- Übersicht über alle Personen --- */

.leute {
  display: grid;
  gap: var(--raum-2);
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.person {
  border: 1px solid var(--kante);
  border-radius: 14px;
  background: var(--pult);
  padding: var(--raum-3);
}

.person--laeuft { border-color: color-mix(in srgb, var(--signal) 45%, var(--kante)); }

/* --- Schlanke Personenkachel (Etappe: Uebersicht) --------------------
   Vorher trug die Kachel alles: Stammdaten, Merkmale, Vertragstabelle und
   sieben verschieden breite Textverweise. Bei vier Kacheln nebeneinander
   lief die Tabelle aus dem Rahmen, und laengere Namen verschoben den Rest.
   Jetzt: Name, zwei Werte, ein Knopf - alles Weitere im Dialog.          */

.person {
  display: flex;
  flex-direction: column;
}

/* Name auf eigener Zeile, Rolle darunter. Vorher standen beide
   nebeneinander; der Name brach dann bei «Anna Brunner» um, bei
   «Dino Marti» nicht - und die Kacheln wurden verschieden hoch. */
/* ZWEI KLASSEN, NICHT EINE. `.person__kopf { display: flex }` steht
   WEITER UNTEN in dieser Datei und gewann gegen die einfache Regel - der
   Name blieb im Flex-Element, wurde vom langen Zusatz «ausgetreten
   2026-05-29» zusammengedrueckt, und `overflow-wrap: anywhere` brach ihn
   Buchstabe fuer Buchstabe untereinander. Mit zwei Klassen gilt diese
   Regel unabhaengig von der Reihenfolge. */
.person__kopf.person__kopf--gestapelt {
  display: block;
  margin-bottom: var(--raum-2);
}

/* Die Regel gilt auch fuer `<span>`: Im Verlauf ist die Kachel ein
   Verweis, also sind Kopf und Name `<span>` statt `<div>`. `display:
   block` macht daraus trotzdem eigene Zeilen. */
.person__kopf.person__kopf--gestapelt .person__name {
  display: block;
  /* Zwei Zeilen Platz, auch wenn nur eine gebraucht wird: So stehen die
     Werte darunter in jeder Kachel auf derselben Hoehe. Laengere Namen -
     auch fremdsprachige - brechen um, statt die Kachel zu sprengen. */
  min-height: 2.6em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.person__kopf.person__kopf--gestapelt .person__lage {
  display: block;
  margin-top: 0.15rem;
}

/* Die zwei Werte, die man taeglich sucht. `auto` statt fester Breite,
   damit lange Zahlen wie «+180:58» nicht abgeschnitten werden. */
.werte--zwei {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raum-2);
  margin: 0 0 var(--raum-3);
}

/* Der Knopf sitzt unten und ist in JEDER Kachel gleich breit - dafuer
   `margin-top: auto` in der Flexspalte oben. Ohne das haengt er bei
   kuerzeren Kacheln in der Mitte. */
/* --- Hilfe unter «Konto» ---------------------------------------------
   Aufklappbar, damit die Seite nicht ueberladen wirkt. Wer eine Frage
   hat, klappt sie auf; wer keine hat, sieht nur die Zeilen.            */

/* --- Fragen in der Hilfe -----------------------------------------------
   HEISST `hilfefrage`, NICHT `hilfe`.

   `.hilfe` war bereits vergeben - fuer das kleine runde Fragezeichen neben
   Beschriftungen: `display: inline-flex; width: 1rem; height: 1rem`. Und
   diese Regel steht WEITER UNTEN in der Datei, gewinnt also.

   Die sieben aufklappbaren Fragen wurden dadurch zu ein Zentimeter breiten
   Kreisen zusammengequetscht und standen als schmale Spalten nebeneinander.
   Am Bildschirm unlesbar - beim Rendern unauffaellig, denn der Text ist ja
   da.

   Vor jedem neuen Klassennamen:  grep -n "^\.name" app/static/style.css   */

/* Lebende Vorschau der Wochenstunden. Eigener Name - `pensum` und
   `vorschau` sind noch frei (geprueft mit grep). */
.pensumvorschau {
  margin: var(--raum-2) 0 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--kante);
  border-radius: 8px;
  background: var(--pult-hell);
}

.pensumvorschau strong { font-family: var(--ziffern); font-size: 1.15rem; }

.hilfeblock { padding: var(--raum-3); }
.hilfeblock .block__titel { padding: 0; border: 0; margin-bottom: var(--raum-2); }

.hilfefrage {
  display: block;
  border-top: 1px solid var(--kante);
  padding: var(--raum-2) 0;
}

.hilfefrage:last-of-type { border-bottom: 1px solid var(--kante); }

.hilfefrage > summary {
  cursor: pointer;
  padding: 0.4rem 0;
  font-weight: 600;
  list-style: none;
}

.hilfefrage > summary::-webkit-details-marker { display: none; }

/* Eigenes Zeichen statt des Dreiecks: Es dreht sich beim Aufklappen. */
.hilfefrage > summary::before {
  content: "\203A";
  display: inline-block;
  width: 1.2rem;
  color: var(--leise);
  transition: transform 0.15s ease;
}

.hilfefrage[open] > summary::before { transform: rotate(90deg); }

.hilfefrage > p {
  margin: var(--raum-2) 0 0 1.2rem;
  max-width: 42rem;
}

.person__oeffnen {
  width: 100%;
  margin-top: auto;
  padding: 0.7rem 1rem;
}

/* Breiter Dialog fuer die Einzelheiten. Der schmale Standarddialog ist
   fuer Formulare gedacht; hier stehen Tabellen drin. */
/* BREITE, nicht max-width. `.dialog` setzt `width: min(30rem, ...)` -
   eine feste Breite sticht jede `max-width`, und das Fenster blieb bei
   30 rem. Die sechs Reiter brachen deshalb auf zwei Zeilen um: vier oben,
   zwei darunter, mittig - das sah aus wie ein Versehen.
   `min(...)` haelt es auf schmalen Schirmen weiterhin im Rahmen. */
/* ZWEI KLASSEN, und darum unabhaengig von der Reihenfolge.
   Zweimal danebengegriffen, bevor das sass:
     Skript 132 setzte `max-width` - eine feste `width` sticht das.
     Skript 133 setzte `width`, aber die Regel steht in dieser Datei VOR
       `.dialog` (Zeile 1863) UND vor einer zweiten `.dialog--breit`
       (Zeile 2227, 38rem). Bei gleicher Spezifitaet gewinnt die spaetere.
   `.dialog.dialog--person` zaehlt zwei Klassen und schlaegt beide. */
.dialog.dialog--person { width: min(62rem, calc(100vw - 2rem)); }

/* --- Kopfzeile der Jahresansicht ------------------------------------
   ZWEI KLASSEN, wie an diesem Projekt gelernt: `.kalender__kopf` und
   `.wechsler` stehen beide WEITER OBEN in dieser Datei und wuerden eine
   Einzelklasse stechen.                                                */

/* Der Kopf benutzt `.gitter` - Spaltenbreite und Abstand kommen von dort.
   Hier bleibt nur, was zusaetzlich gilt. */
.gitter.jahr__kopf {
  align-items: center;
  margin-bottom: var(--raum-3);
}

/* Die seitliche Polsterung entspricht der von `.karte`: Damit steht der
   Name genau ueber dem Wort «MONATE» und die Knoepfe buendig mit der
   rechten Innenkante der Kachel - nicht mit ihrem Rand. */
.jahr__rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  padding-inline: var(--raum-3);
}

@media (max-width: 60rem) {
  .jahr__rechts { padding-inline: 0; }
}

/* --- Verweise in der Rapport-Spalte als kleine Knoepfe ---------------
   Unterstrichene Textlinks sehen aus wie Fliesstext, der zufaellig
   anklickbar ist. Es sind Handlungen - «ansehen», «PDF», «abschliessen»,
   «oeffnen» - und die gehoeren als Flaeche gezeigt. */
.monatsknoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.monatsknoepfe form { margin: 0; }

.monatsknoepfe a,
.monatsknoepfe .verweis {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--kante);
  border-radius: 7px;
  background: none;
  color: var(--leise);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.monatsknoepfe a:hover,
.monatsknoepfe .verweis:hover {
  border-color: var(--ruhe);
  background: var(--pult-hell);
  color: var(--text);
}

/* Der Waehler nimmt nur so viel Platz, wie er braucht - vorher waren es
   26 rem in einer eigenen Zeile, rechts daneben nichts. */
.wechsler.jahr__wechsler {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: none;
  margin: 0;
}

/* Der Waehler fuellt die linke Spalte ganz aus - eine durchgehende
   Kopfzeile statt eines schmalen Feldes mit Luft daneben. */
.wechsler.jahr__wechsler select { margin: 0; width: 100%; }

/* Der Titel schiebt die Blaetterknoepfe nach rechts. `flex: 1` statt
   fester Breite: Bei einem langen Namen waechst er, bei einem kurzen
   bleibt der Rest zusammen. */
.ueberschrift.jahr__titel {
  flex: 1;
  margin: 0;
}

@media (max-width: 48rem) {
  .ueberschrift.jahr__titel { flex-basis: 100%; }
}

/* Und die Reiter bleiben in EINER Zeile. Passt es einmal nicht - kleiner
   Bildschirm, laengere Woerter -, wird geschoben statt umgebrochen. */
.preiter {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* --- Reiter im Personendialog ---------------------------------------
   Eigene Namen: `reiter` und `wreiter` sind vergeben, und Kollisionen im
   Stilblatt waren an diesem Projekt schon dreimal die Fehlerursache.     */

.preiter {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: var(--raum-2) 0 var(--raum-3);
  border-bottom: 1px solid var(--kante);
}

.preiter__knopf {
  flex: 1 1 auto;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--text);
  opacity: 0.6;
  font: inherit;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.preiter__knopf[aria-selected="true"] {
  opacity: 1;
  border-bottom-color: var(--signal);
  font-weight: 600;
}

.preiter__knopf:hover { opacity: 0.9; }
.preiter__knopf:focus-visible { outline: 2px solid var(--signal); outline-offset: -3px; }

/* Ein Blatt fuellt den Dialog. `min-height` haelt die Hoehe ruhig, damit
   das Fenster beim Wechseln nicht springt. */
.pblatt { min-height: 14rem; }

/* Ueberschriften im Formular. Vorher standen Adresse, Austritt, Chip und
   «Stempeln in der App» ohne Gliederung untereinander - man suchte jedes
   Feld einzeln. */
.feldgruppe {
  margin: var(--raum-4) 0 var(--raum-2);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--kante);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leise);
}

.feldgruppe:first-of-type { margin-top: var(--raum-2); }

/* Tabellen duerfen schieben statt auszubrechen. DAS war der sichtbare
   Fehler: Die Vertragstabelle lief rechts aus der Kachel heraus, und die
   Wochentage standen nicht mehr ueber ihren Zahlen. */
.tabellenrahmen {
  overflow-x: auto;
  margin: var(--raum-2) 0;
}

.tabellenrahmen .tabelle { min-width: 26rem; }

/* Gleich grosse Knoepfe im Raster statt sieben verschieden breiter
   Textverweise nebeneinander. */
/* ZWEI SPALTEN, nicht `auto-fit`. Mit `auto-fit` standen bei vier
   Knoepfen drei nebeneinander und einer allein darunter - das sah aus wie
   ein Versehen. Zwei mal zwei ist ruhiger. */
.dialog__taten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raum-2);
  margin: var(--raum-3) 0 var(--raum-2);
}

@media (max-width: 30rem) {
  .dialog__taten { grid-template-columns: 1fr; }
}

/* Die Verweise am Fuss: ruhige Flaechen statt nackter Textlinks, damit
   sie zu den Knoepfen daruber passen. */
.person__ansehen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: var(--raum-2) 0 0;
}

.person__ansehen a {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--kante);
  border-radius: 8px;
  color: var(--leise);
  text-decoration: none;
  font-size: 0.95rem;
}

.person__ansehen a:hover {
  border-color: var(--ruhe);
  background: var(--pult-hell);
  color: var(--text);
}

.dialog__taten .knopf {
  width: 100%;
  margin: 0;
  padding: 0.7rem 1rem;
}

.person__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-2);
  margin-bottom: var(--raum-2);
}

.person__name { font-size: 1.25rem; }

.person__lage {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leise);
  white-space: nowrap;
}

.person--laeuft .person__lage { color: var(--signal); }

/* Kennzahlen sitzen in einem Raster mit haarfeinen Trennlinien: der
   Kantenfarbton scheint durch die Lücken, die Felder selbst tragen die
   Kartenfarbe. Das gibt Struktur ohne zusätzliche Rahmen. */
.werte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--kante);
  border: 1px solid var(--kante);
  border-radius: 10px;
  overflow: hidden;
}

.werte div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--pult);
  padding: 0.85rem 1rem;
}

.werte dt {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--leise);
}

.werte dd {
  margin: 0;
  font-family: var(--ziffern);
  font-variant-numeric: tabular-nums;
  font-size: 1.4rem;
  line-height: 1.15;
}

.werte .minus { color: var(--warnung); }
.werte .plus { color: var(--gut); }

/* Was etwas aendert, steht als Knopf beisammen. Was nur woandershin fuehrt,
   kommt darunter als Verweis - so ist auf einen Blick klar, was was tut. */
.person__fuss {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: var(--raum-3);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--kante);
  font-size: 0.9rem;
}

.person__fuss > button.verweis,
.person__fuss .fussform button.verweis {
  border: 1px solid var(--kante);
  border-radius: 8px;
  padding: 0.42rem 0.85rem;
  background: transparent;
  color: var(--leise);
  white-space: nowrap;
}

.person__fuss > button.verweis:hover,
.person__fuss .fussform button.verweis:hover {
  background: var(--pult-hell);
  color: var(--text);
  border-color: var(--ruhe);
}

.person__ansehen {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: var(--raum-2) 0 0;
  font-size: 0.88rem;
}

.person__ansehen a { color: var(--leise); }
.person__ansehen a:hover { color: var(--text); }

.person__fuss a { color: var(--leise); }
.person__fuss a:hover { color: var(--text); }

.warnzeile {
  margin-top: var(--raum-2);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warnung) 16%, transparent);
  color: var(--warnung);
  font-size: 0.88rem;
}

/* --- Personenwahl im Verlauf: zugleich Übersicht --- */

.leute--wahl { margin-bottom: var(--raum-3); }

a.person {
  display: block;
  text-decoration: none;
  color: inherit;
}

a.person:hover { background: var(--pult-hell); }

.person--gewaehlt {
  border-color: var(--ruhe);
  box-shadow: inset 3px 0 0 var(--marke-text);
}

.person__kopf { display: flex; }

.person__zahlen {
  display: flex;
  gap: 1.5rem;
  font-family: var(--ziffern);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: var(--leise);
}

.person__zahlen .minus { color: var(--warnung); }
.person__zahlen .plus { color: var(--gut); }

.werte--breit { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

.person__zeitraum { margin-left: auto; color: var(--leise); }
.person__zeitraum a { color: var(--leise); }
.person__zeitraum a.gewaehlt { color: var(--marke-text); }

/* --- Anklickbare Kalendertage --- */

.ktag__flaeche {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  padding: 0.6rem 0.65rem;
  border: 0;
  border-radius: 9px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ktag__flaeche:hover { background: var(--schleier-2); }
.ktag__flaeche--starr { cursor: default; }
.ktag__flaeche--starr:hover { background: none; }

.ktag__text { margin-top: 0; }

/* --- Dialogfenster --- */

.dialog {
  width: min(30rem, calc(100vw - 2rem));
  padding: var(--raum-3);
  border: 1px solid var(--kante);
  border-radius: 14px;
  background: var(--pult);
  color: var(--text);
}

.dialog::backdrop { background: var(--schleier-dialog); }

.dialog__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  margin-bottom: var(--raum-1);
}

.dialog__kopf .ueberschrift { margin: 0; font-size: 1.1rem; letter-spacing: 0.04em; text-transform: none; color: var(--text); }

.dialog__zu {
  border: 0;
  background: none;
  color: var(--leise);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
}

.dialog__zu:hover { color: var(--text); }

.dialog__loeschen {
  margin-top: var(--raum-2);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--kante);
  text-align: center;
}

.dialog .knopf { margin-top: var(--raum-3); }

/* --- Personenkarten --- */

.person--still { opacity: 0.6; }

/* Fliessende Angaben ohne Kaestchen. Fehlt ein Eintrag, entsteht keine
   Luecke - das Raster fuellt sich einfach anders. */
.stamm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.85rem 1.4rem;
  margin: 0 0 var(--raum-2);
}

.stamm div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.stamm dd.lang { overflow-wrap: anywhere; }

/* Zugang und Ausstattung als kurze Merkmale statt als Tabellenzeilen */
.merkmale {
  list-style: none;
  margin: 0 0 var(--raum-2);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.merkmal {
  font-size: 0.82rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--kante);
  color: var(--leise);
  white-space: nowrap;
}

.merkmal--an {
  color: var(--text);
  border-color: color-mix(in srgb, var(--gut) 45%, var(--kante));
  background: color-mix(in srgb, var(--gut) 10%, transparent);
}

.stamm dt {
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--leise);
}

.stamm dd { margin: 0; font-size: 0.95rem; }

.tabelle--schmal { font-size: 0.9rem; margin-top: var(--raum-2); }
.tabelle--schmal td, .tabelle--schmal th { padding: 0.45rem 0.6rem 0.45rem 0; }

.verlaufsblock { margin-top: var(--raum-2); }

.verlaufsblock summary {
  cursor: pointer;
  color: var(--leise);
  font-size: 0.9rem;
}

.verlaufsblock summary:hover { color: var(--text); }

.person__fuss button.verweis {
  text-decoration: none;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--kante);
  border-radius: 7px;
  color: var(--text);
  font-size: 0.9rem;
}

.person__fuss button.verweis:hover {
  color: var(--signal);
  border-color: var(--signal);
  background: none;
}

.person .stamm + .werte, .person .werte { margin-top: var(--raum-2); }
.person .tabelle--schmal { margin-top: var(--raum-3); }

.kalender__blaettern .knopf--klein { margin-left: 0.5rem; }

/* --- Erklärungen --- */

.hilfe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin-left: 0.3rem;
  border: 1px solid var(--kante);
  border-radius: 50%;
  font-size: 0.62rem;
  font-family: var(--schrift);
  color: var(--leise);
  cursor: help;
  vertical-align: 1px;
}

.hilfe:hover { color: var(--text); border-color: var(--ruhe); }

/* --- Tagesband mit Stundenraster --- */

.bandkopf {
  position: relative;
  height: 1.1rem;
  margin: 0 0 0.2rem;
  font-family: var(--ziffern);
  font-size: 0.7rem;
  color: var(--leise);
}

.bandkopf span {
  position: absolute;
  transform: translateX(-50%);
}

.bandkopf span:first-child { transform: none; }
.bandkopf span:last-child { transform: translateX(-100%); }

/* --- Korrekturen im Verlauf --- */

.etikett {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal) 22%, transparent);
  color: var(--signal);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.etikett--ruhe {
  background: color-mix(in srgb, var(--ruhe) 28%, transparent);
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
}

.tag__aendern { margin-left: 0.9rem; font-size: 0.85rem; }

.korrektur {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--leise);
  border-left: 2px solid var(--kante);
  padding-left: 0.7rem;
}

/* --- Einstellungen und Jahresansicht --- */

.schalter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--raum-2);
  color: var(--text);
  font-size: 0.98rem;
}

.schalter input { width: auto; }

.logo-vorschau {
  max-height: 2.5rem;
  max-width: 12rem;
  vertical-align: middle;
  margin-left: 0.5rem;
}

input[type="file"] { padding: 0.55rem; }

.uebertragzeile {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: var(--raum-2);
}

.uebertragzeile > div { flex: 1 1 12rem; }
.uebertragzeile label { margin-top: 0; }

.tabelle .minus { color: var(--warnung); }
.tabelle .plus { color: var(--gut); }
.kuenftig { opacity: 0.4; }

code {
  font-family: var(--ziffern);
  font-size: 0.9em;
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  background: var(--schleier-2);
}

.etikett--warnung {
  background: color-mix(in srgb, var(--warnung) 22%, transparent);
  color: var(--warnung);
}

/* --- Einstellungen als Liste statt als Kachelfeld --- */

.einstellungen {
  max-width: 58rem;
  margin: 0 auto;
}

/* .zeile ist ein Raster - ohne diese Regel gewinnt display:grid gegen das
   hidden-Attribut, und ausgeblendete Zeilen bleiben sichtbar. */
.zeile[hidden] { display: none; }

.block {
  border: 1px solid var(--kante);
  border-radius: 12px;
  background: var(--pult);
  margin-bottom: var(--raum-2);
  overflow: hidden;
}

.block__titel {
  margin: 0;
  padding: var(--raum-2) var(--raum-3);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
  border-bottom: 1px solid var(--kante);
}

/* Ein Hinweis, der als einziges im Block steht - etwa «Alle Rapporte sind
   draussen». Der Innenabstand haengt sonst an `.zeile`, und ohne eine
   solche klebte der Satz am Rand. */

.block > .leer {
  margin: 0;
  padding: var(--raum-2) var(--raum-3);
}

.zeile {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(13rem, 22rem);
  gap: var(--raum-3);
  align-items: center;
  padding: var(--raum-2) var(--raum-3);
  border-bottom: 1px solid var(--kante);
}

.zeile:last-child { border-bottom: 0; }

.zeile__text label, .zeile__text .label {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
}

.zeile__text .notiz { margin-top: 0.2rem; }

.zeile__feld {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  justify-self: end;
  width: 100%;
}

.zeile__feld input, .zeile__feld select { margin: 0; }
.zeile__feld form { margin: 0; }
.zeile__feld--schmal input, .zeile__feld--schmal select { max-width: 9rem; }

.zeile__feld .schalter { margin: 0; }

@media (max-width: 44rem) {
  .zeile { grid-template-columns: 1fr; }
  .zeile__feld { justify-self: stretch; }
}

.knopf--rand {
  background: none;
  border: 1px solid var(--kante);
  color: var(--text);
  margin: 0;
  white-space: nowrap;
}

.knopf--rand:hover { border-color: var(--ruhe); filter: none; background: var(--pult-hell); }

.speicherzeile {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 var(--raum-3);
}

.logo-vorschau { max-height: 1.8rem; max-width: 7rem; }

input[type="file"] { padding: 0.45rem; font-size: 0.8rem; flex: 1 1 10rem; }

.schluessel {
  flex: 1 1 12rem;
  font-family: var(--ziffern);
  font-size: 0.8rem;
  padding: 0.45rem 0.6rem;
  color: var(--leise);
}

.schluessel:focus { color: var(--text); }

/* --- Feiertage im Dialogfenster --- */

.dialog--breit { width: min(38rem, calc(100vw - 2rem)); }

.dialog--breit .kalender__blaettern { align-items: center; }

.feiertagsliste {
  list-style: none;
  margin: var(--raum-2) 0 0;
  padding: 0;
  max-height: 22rem;
  overflow-y: auto;
}

.feiertagsliste li {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  padding: 0.55rem 0;
  border-top: 1px solid var(--kante);
}

.feiertagsliste li:last-child { border-bottom: 1px solid var(--kante); }

.feiertag__datum {
  font-family: var(--ziffern);
  font-variant-numeric: tabular-nums;
  color: var(--leise);
  font-size: 0.9rem;
  white-space: nowrap;
}

.feiertag__name { flex: 1; }

.feiertag__neu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.7rem;
  align-items: end;
  margin-top: var(--raum-3);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--kante);
}

.feiertag__neu label { margin-top: 0; }
.feiertag__neu-weit { grid-column: span 2; }
.feiertag__neu .knopf { margin: 0; }

.monatsknoepfe {
  /* Bewusst kein Flexbereich. Auf einer Tabellenzelle nimmt das der Zelle
     ihre Zellennatur: Sie richtet sich nicht mehr an der Zeile aus, und
     ihre Trennlinie sitzt neben denen der Nachbarspalten. */
  font-size: 0.88rem;
}

.monatsknoepfe > * { display: inline-block; vertical-align: baseline; }
.monatsknoepfe > * + * { margin-left: 0.85rem; }

.monatsknoepfe a { color: var(--leise); }
.monatsknoepfe a:hover { color: var(--text); }
.monatsknoepfe form { display: inline-block; }

.schluessel {
  max-width: 26rem;
  font-family: var(--ziffern);
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  margin-top: var(--raum-1);
  color: var(--leise);
}

.schluessel:focus { color: var(--text); }

.notiz--eingerueckt { margin-top: var(--raum-2); }

.schluesselkarte { max-width: 44rem; }

.schluesselzeile {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
}

.schluesselzeile .schluessel { flex: 1 1 18rem; margin-top: 0; }
.schluesselzeile form { margin: 0; }

.kalender__blaettern a.knopf {
  width: auto;
  height: auto;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 0.5rem 0.9rem;
}

.korrektur--warnung {
  border-left-color: var(--warnung);
  color: color-mix(in srgb, var(--warnung) 80%, var(--text));
}

/* --- Zwei-Faktor --- */

.zeile--breit { grid-template-columns: 1fr; }

.block--wichtig { border-color: var(--signal); }
.block--wichtig .block__titel { color: var(--signal); border-bottom-color: var(--signal); }

.qr {
  display: inline-block;
  padding: 0.9rem;
  margin: var(--raum-2) 0;
  background: #fff;
  border-radius: 10px;
  line-height: 0;
}

.qr svg { width: 200px; height: 200px; }

.geheimnis {
  font-family: var(--ziffern);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  color: var(--text);
  background: var(--pult-hell);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  display: inline-block;
  margin: 0 0 var(--raum-2);
}

.notfallcodes {
  list-style: none;
  margin: var(--raum-2) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.5rem;
  max-width: 34rem;
}

.notfallcodes li {
  font-family: var(--ziffern);
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  background: var(--pult-hell);
  border-radius: 7px;
  text-align: center;
}

.notfall { margin-top: var(--raum-3); }
.notfall summary { cursor: pointer; color: var(--leise); font-size: 0.9rem; }
.notfall form { margin-top: var(--raum-2); }

.person__fuss .fussform { margin: 0; display: inline-flex; }

.zeile__feld a.knopf { text-decoration: none; display: inline-block; }

.kiosk__abweichung {
  margin: 0.7rem auto 0;
  max-width: 26rem;
  padding: 0.6rem 0.9rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--warnung) 16%, transparent);
  color: var(--warnung);
  font-size: 0.9rem;
  line-height: 1.35;
}

.kiosk__abweichung[hidden] { display: none; }

.protokoll { margin-top: var(--raum-2); font-size: 0.88rem; }
.protokoll td, .protokoll th { padding: 0.35rem 0.6rem 0.35rem 0; }
.protokoll--fehl td:nth-child(2) { color: var(--warnung); }

.warnzeile--stark {
  border-left: 3px solid var(--warnung);
  background: color-mix(in srgb, var(--warnung) 12%, transparent);
  color: var(--warnung);
  padding: 0.8rem 1rem;
  border-radius: 8px;
  line-height: 1.45;
}

.pult__hinweis {
  margin: var(--raum-2) 0;
  padding: 0.7rem 1rem;
  border: 1px dashed var(--kante);
  border-radius: 10px;
  color: var(--leise);
  font-size: 0.95rem;
}

/* --- Einrichtungsassistent --- */

/* --- Der Einrichtungsassistent auf dem Geraetebildschirm ---

   `geraetseite` steht am <html>-Element der Einrichtungsseite. Die
   groessere Grundschrift dort zieht alles mit, was in `rem` gerechnet ist -
   also Schrift, Abstaende, Felder und Knoepfe zugleich. Eine einzelne
   Zahl statt zwanzig einzelner Regeln.

   Am Rechner im Browser faellt das nicht ins Gewicht: Der Assistent
   laeuft nur mit STANDALONE=1, also auf dem Geraet. */

html.geraetseite { font-size: 20px; }

/* Kein Mauszeiger auf dem Geraet. Es hat einen Touchscreen; ein Zeiger
   oben links sieht nach Fehler aus. Gilt nur fuer Geraeteseiten - wer die
   Verwaltung am Rechner oeffnet, braucht seinen Zeiger. */

.geraetseite, .geraetseite * { cursor: none; }

/* --- Bildschirmtastatur ---

   Nur auf dem Geraet geladen. Die Tasten sind so gross, dass sie sich mit
   dem Finger sicher treffen lassen: bei 720 Pixeln Breite und elf Tasten
   je Reihe bleiben rund 60 Pixel - etwa die Breite einer Fingerkuppe. */

.tastatur {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--pult-hell);
  border-top: 1px solid var(--kante);
  padding: 0.4rem 0.3rem calc(0.4rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px var(--schleier-dialog);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.tastatur[hidden] { display: none; }

.tastatur__leiste {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0.4rem 0.45rem;
}

.tastatur__was {
  flex: 1 1 auto;
  font-size: 0.8rem;
  color: var(--leise);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tastatur__nebenknopf {
  flex: none;
  appearance: none;
  border: 1px solid var(--kante);
  background: var(--pult);
  color: var(--text);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.8rem;
}

.tastatur__reihe {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}

.tastatur__taste {
  flex: 1 1 0;
  min-width: 0;
  appearance: none;
  border: 1px solid var(--kante);
  background: var(--pult);
  color: var(--text);
  border-radius: 8px;
  /* Hoch genug, um mit dem Finger sicher getroffen zu werden. */
  height: 3rem;
  font: inherit;
  font-size: 1.15rem;
}

.tastatur__taste:active { background: var(--pult-hell); border-color: var(--ruhe); }

.tastatur__taste--breit { flex: 1.5 1 0; font-size: 0.95rem; }
.tastatur__taste--leer { flex: 5 1 0; font-size: 0.9rem; color: var(--leise); }

.tastatur__taste--tun {
  background: var(--signal);
  color: var(--auf-signal);
  border-color: transparent;
  font-weight: 600;
}

.assistent-seite {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  /* Wie bei der Kioskseite: Beim Tippen soll nicht versehentlich Text
     markiert werden und ein Auswahlmenue aufspringen. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* In Feldern muss Markieren moeglich bleiben - sonst laesst sich ein
   vertipptes WLAN-Passwort nicht mehr berichtigen. */
.assistent-seite input,
.assistent-seite select,
.kiosk-seite input,
.kiosk-seite select {
  -webkit-user-select: text;
  user-select: text;
}

.assistent {
  margin: auto;
  padding: var(--raum-4) var(--rand);
  width: 100%;
  max-width: 34rem;
}

.assistent h1 { font-size: 1.7rem; margin: 0 0 var(--raum-2); }

.assistent__zaehler {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--leise);
}

.assistent__balken {
  height: 3px;
  border-radius: 2px;
  background: var(--kante);
  margin-bottom: var(--raum-3);
  overflow: hidden;
}

.assistent__balken span {
  display: block;
  height: 100%;
  background: var(--marke-text);
  transition: width 0.3s ease;
}

.assistent__text { line-height: 1.55; margin: 0 0 var(--raum-2); }

.assistent__hinweis {
  padding: 0.7rem 0.9rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--gut) 16%, transparent);
  color: var(--gut);
  font-size: 0.92rem;
  margin: 0 0 var(--raum-2);
}

.assistent label { display: block; margin-top: var(--raum-2); }
.assistent input, .assistent select { width: 100%; }
.assistent .knopf { margin-top: var(--raum-3); width: 100%; text-align: center;
  text-decoration: none; display: block; }
.assistent .notiz { margin-top: 0.3rem; }

.netzzeile { display: flex; gap: 0.6rem; align-items: center; }
.netzzeile select, .netzzeile input { flex: 1 1 auto; }
.netzzeile .knopf { margin-top: 0; width: auto; white-space: nowrap; }

.assistent__nebenweg { margin-top: var(--raum-3); text-align: center; }

.assistent__adresse {
  font-family: var(--ziffern);
  font-size: 1.25rem;
  color: var(--marke-text);
  background: var(--pult);
  border-radius: 9px;
  padding: 0.8rem 1rem;
  margin: var(--raum-2) 0 0.3rem;
  text-align: center;
  word-break: break-all;
}

/* Sperre nach dem Stempeln: der Streifen leert sich, solange der Knopf
   nicht gedrueckt werden kann. Das ist ehrlicher als eine Warnung im
   Nachhinein - man sieht vorher, dass es noch nicht geht. */

.kachel { position: relative; overflow: hidden; }

.kachel--gesperrt {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.kachel__sperre {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 0;
  background: var(--signal);
  border-radius: 0 3px 3px 0;
  pointer-events: none;
  opacity: 0.85;
}

/* --- Ruhemodus ---------------------------------------------------------
   Im Ruhezustand zeigt das Wandgerät nur die Uhr. Das ist die Anzeige, die
   den ganzen Tag im Laden hängt - sie soll unaufdringlich wirken und darf
   keine Namen preisgeben. */

/* Die grosse Ziffernuhr gilt nur noch, wo KEINE runde Uhr daneben steht.
   Frueher galt sie in der Ruheanzeige immer und schlug mit ihren drei
   Klassen (0,3,0) jede einfachere Regel - die kleine Fassung kam nie zum
   Zug, obwohl sie spaeter im Stilblatt steht. */
.kiosk-seite.ruht .kiosk__uhr:not(.kiosk__uhr--klein) {
  font-size: clamp(5rem, 26vw, 11rem);
}
.kiosk-seite.ruht .kiosk__datum { font-size: 1.35rem; }

/* Die Ruheanzeige fuellt den Bildschirm fest aus. Ohne das entsteht ein
   Rollbalken, und die Uhr sitzt nicht in der Mitte des Displays, sondern
   in der Mitte dessen, was neben der Marke uebrig bleibt. */

.kiosk-seite.ruht { overflow: hidden; }

.ruhe {
  position: fixed;
  inset: 0;
  cursor: pointer;
}

/* Die Marke sitzt oben, wo hinter dem Bildschirm die Antenne montiert wird.
   Rund ein Drittel der Breite - gross genug, dass klar ist, wohin die Karte
   gehoert, ohne den Bildschirm zu beherrschen. */

.nfcfeld {
  position: absolute;
  top: 2mm;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.nfcfeld__zeichen {
  /* Schmaler als frueher (33 %): Die Pfeile waren lauter als die Uhr, und
     auf einem Geraet, das den ganzen Tag an der Wand haengt, ermuedet
     das. Die Farbe bleibt die Signalfarbe - nach der Regel aus Skript 12
     gehoert Orange dorthin, wo zum Handeln aufgefordert wird, und die
     Pfeile sind das Einzige, was das tut. Nur eine Spur tiefer im Ton,
     weil `--signal` auf diesem Display ins Gelbliche kippt. */
  width: min(24vw, 11rem);
  height: auto;
  color: #e8873a;
}

/* Die drei Winkel steigen nacheinander auf und verblassen oben. Bewegt
   wird nur der Winkel selbst, nicht das ganze Zeichen - so bleibt die
   Stelle, auf die die Karte gehoert, an ihrem Platz. */

@keyframes winkelsteigen {
  0%        { opacity: 0;   transform: translateY(14px); }
  25%       { opacity: 1; }
  70%       { opacity: 1;   transform: translateY(0); }
  100%      { opacity: 0;   transform: translateY(-6px); }
}

.winkel { animation: winkelsteigen 2.6s ease-out infinite; }
.winkel--2 { animation-delay: 0.25s; }
.winkel--3 { animation-delay: 0.5s; }

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt das
   Zeichen ruhig - nach oben heller werdend, damit die Richtung trotzdem
   ablesbar bleibt. */

@media (prefers-reduced-motion: reduce) {
  .winkel { animation: none; opacity: 0.45; }
  .winkel--2 { opacity: 0.7; }
  .winkel--3 { opacity: 1; }
}

.nfcfeld__pfeil { stroke: currentColor; opacity: 0.9; }

.nfcfeld__karte,
.nfcfeld__strich { stroke: currentColor; }

.nfcfeld__chip { fill: currentColor; }

/* Die Karte hebt sich sanft zum Pfeil hin - als wuerde sie aufgelegt */
.nfcfeld__karte,
.nfcfeld__chip,
.nfcfeld__strich { animation: aufkarte 3s ease-in-out infinite; }

@keyframes aufkarte {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50%      { transform: translateY(-2.5px); opacity: 1; }
}

.nfcfeld__text {
  margin: 0;
  color: var(--leise);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}

/* Uhr und Datum mittig in der verbleibenden Flaeche */
/* Uhr genau in der Mitte des Bildschirms, unabhaengig von der Marke */
/* --- Die runde Uhr auf der Ruheanzeige --- */

/* --- Personenseite --- */

/* Ohne Uhr braucht der Kopf kaum noch Platz - er traegt nur noch die
   Warnung bei abweichender Uhrzeit. */
.kiosk__kopf--schlank { padding-bottom: 0; min-height: 0; }

/* --- Assistent --- */

.assistent__zurueck {
  margin: 0 0 var(--raum-3);
}

/* PLZ und Ort nebeneinander: Die PLZ braucht wenig Platz, und zwei
   volle Zeilen fuer eine vierstellige Zahl waeren Verschwendung. */
/* Eine Trennlinie mit Wort in der Mitte. Ohne sie sah der Hinweis auf
   ein anderes Netz aus, als gehoere er zum «Weiter» darueber. */
/* Die Nachbildung, die kurz das zuletzt getippte Zeichen zeigt. Sie liegt
   genau ueber dem Passwortfeld und uebernimmt dessen Aussehen - sonst
   springt das Bild beim Tippen.

   `pointer-events: none`, damit ein Tipp weiterhin das echte Feld
   trifft. */
.schaufenster {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: center;
  padding: 0.7rem 1rem;
  border-radius: var(--rund, 10px);
  background: var(--feld, #1b232c);
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Der Rahmen des Felds darunter soll durchscheinen. */
.schaufenster { border: 1px solid transparent; }

/* Trennt Netz und Geraet im Wartungsmenue - dort, wo frueher ein
   Zwischentitel stand. */
/* Ein Hinweis, der auffaellt, ohne zu erschrecken. Kein Rot: Es ist
   nichts kaputt, es ist eine Einstellung, die jemand treffen sollte. */
/* Wenn der Waechter aufgibt. Ueber allem, damit es auch dann zu sehen
   ist, wenn die Seite darunter halb gebaut ist - genau dann kommt es
   vor. */
.waechter {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: var(--raum-3);
  text-align: center;
  background: #3a161c;
  color: #ffd9d3;
  font-size: 1.05rem;
  line-height: 1.4;
}

.warnkasten {
  border: 1px solid var(--signal);
  border-radius: 10px;
  padding: var(--raum-2) var(--raum-3);
  margin: var(--raum-4) 0 0;
  color: var(--text);
  background: color-mix(in srgb, var(--signal) 10%, transparent);
  line-height: 1.5;
}

/* Der Fortschritt der Sicherung. Kein Kreisel: Hier ist bekannt, wie
   viel noch kommt, und das gehoert gezeigt. */
/* Reiter im Wartungsmenue. Auf einem 7-Zoll-Bildschirm im Hochformat
   ist Blaettern laestig - drei Abschnitte nebeneinander sind schneller
   als drei untereinander.

   Sie tragen die Beschriftung selbst, nicht nur eine Farbe: Ein Reiter,
   den man erst antippen muss, um zu sehen, was drin ist, spart nichts. */
/* Die Ueberschrift der Wartung: kleiner als sonst. Sie sagt nur, wo man
   ist - der Platz gehoert den Reitern darunter. */
.wartung__titel {
  font-size: 1.5rem;
  margin: 0 0 var(--raum-2);
}

/* Eine Zeile statt eines Kastens. Der Hinweis muss ueber den Reitern
   bleiben, aber er darf sie nicht nach unten druecken. */
.warnstreifen {
  margin: 0 0 var(--raum-2);
  padding: 0.4rem 0.7rem;
  border-left: 3px solid var(--signal);
  background: color-mix(in srgb, var(--signal) 10%, transparent);
  border-radius: 0 6px 6px 0;
  font-size: 0.92rem;
}

.wreiter {
  display: flex;
  gap: 0;
  margin: var(--raum-4) 0 var(--raum-3);
  border-bottom: 1px solid var(--kante);
}

.wreiter__knopf {
  flex: 1;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--text-schwach, var(--text));
  opacity: 0.65;
  font: inherit;
  font-size: 1rem;
  /* Grosszuegig hoch: Das ist ein Touchscreen, und die Finger sind oft
     nicht die saubersten. */
  padding: 0.9rem 0.4rem;
  cursor: pointer;
  transition: opacity .15s, border-color .15s;
}

.wreiter__knopf[aria-selected="true"] {
  opacity: 1;
  border-bottom-color: var(--signal);
  font-weight: 600;
}

.wreiter__knopf:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -3px;
}

/* `display: flex` wuerde das eingebaute `hidden` schlagen - derselbe
   Fehler wie beim Assistenten in Skript 59. Deshalb ausdruecklich. */
/* Eine Mindesthoehe, damit die Seite beim Wechseln nicht schrumpft.

   NICHT die Hoehe des laengsten Blatts: Unter «Sicherung» stuende dann
   ein riesiges Loch. Nur so viel, dass die kurzen Blaetter den
   Bildschirm fuellen und der Balken am Rand nicht springt.

   `dvh` statt `vh`: Auf einem Telefon zaehlt die Adresszeile mit, und
   `vh` rechnet sie weg - dann waere die Hoehe zu gross und es gaebe
   unnoetig Rand. */
/* Die Wartungsseite steht OBEN, nicht in der Mitte.

   `.assistent` hat `margin: auto` in einem Flex-Kasten ueber die volle
   Hoehe - das zentriert senkrecht. Beim Assistenten ist das richtig: Ein
   einzelner Schritt mit drei Feldern sieht mittig besser aus.

   Auf der Wartungsseite ist es falsch. Dort haengt die Position der
   Reiter davon ab, wie lang das gerade offene Blatt ist - und beim
   Wechseln wandert die ganze Seite.

   `0 auto` statt `auto`: waagrecht weiter zentriert, senkrecht oben. */
.wartungs-seite .assistent { margin: 0 auto; }

/* Die Mindesthoehe bleibt: Sie haelt den Bildlaufbalken ruhig, wenn ein
   sehr kurzes Blatt offen ist. Ein anderes Problem als das Zentrieren -
   in Skript 79 habe ich die beiden verwechselt. */
.blatt {
  min-height: 42vh;
  min-height: 42dvh;
}

.blatt[hidden] { display: none; }

/* Die Geraetenummer gross genug, um sie vom Bildschirm abzulesen,
   waehrend man telefoniert. Mit Zwischenraum: `4A7B-2C9D` liest sich
   in zwei Haelften besser als am Stueck. */
.grossnummer {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 1.7rem;
  letter-spacing: 0.12em;
  margin: 0.2rem 0 var(--raum-2);
  color: var(--text);
}

/* Angaben als Tabelle, nicht als Liste: Zwei Spalten lassen sich
   ueberfliegen, wenn man eine bestimmte Zahl sucht. */
.angaben { width: 100%; border-collapse: collapse; margin: var(--raum-3) 0; }

.angaben th {
  text-align: left;
  font-weight: 400;
  opacity: 0.7;
  padding: 0.45rem 0.8rem 0.45rem 0;
  white-space: nowrap;
  vertical-align: top;
}

.angaben td {
  padding: 0.45rem 0;
  text-align: right;
  vertical-align: top;
}

.fortschritt {
  height: 0.5rem;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: 999px;
  overflow: hidden;
  margin: var(--raum-2) 0;
}

.fortschritt span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--signal);
  border-radius: 999px;
  transition: width 0.4s ease-out;
}

.wartung__trenner {
  border: 0;
  border-top: 1px solid var(--kante);
  margin: var(--raum-4) 0 var(--raum-3);
}

.trennung {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  margin: var(--raum-4) 0 var(--raum-3);
  color: var(--leise);
  font-size: 0.9rem;
}

.trennung::before,
.trennung::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kante);
}

.ortzeile {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--raum-2);
}

.ortzeile input { width: 100%; }

/* `[hidden]` MUSS hier ausdruecklich stehen: Das eingebaute
   `display: none` des Merkmals verliert sonst gegen `display: flex`,
   und die Meldung «Verbindung wird aufgebaut» steht dauernd da -
   auch bevor jemand auf «Verbinden» getippt hat. */
.assistent__laeuft[hidden] { display: none; }

.assistent__laeuft {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--leise);
  margin-top: var(--raum-2);
}

/* Ein Punkt, der atmet. Kein Kreisel: Der wuerde auf dem Geraet die
   ganze Zeit Aufmerksamkeit ziehen, und das Verbinden dauert nur
   Sekunden. */
@keyframes laeuft_atmen {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.laeuft__punkt {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--signal);
  animation: laeuft_atmen 1.2s ease-in-out infinite;
  flex: none;
}

.kiosk__suche {
  position: relative;
  margin: 0 auto var(--raum-3);
  max-width: 32rem;
}

.kiosk__suche input {
  width: 100%;
  font-size: 1.15rem;
  padding: 0.7rem 2.6rem 0.7rem 1rem;
}

.kiosk__suche-weg {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--leise);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

.kiosk__nichts {
  text-align: center;
  color: var(--leise);
  margin: var(--raum-4) 0;
}

.analoguhr {
  /* Fuellt den Schirm fast aus. Auf dem 7-Zoll-Geraet im Hochformat sind
     78 % der Breite rund 560 Punkte - gross genug, um quer durch den Raum
     abgelesen zu werden. Die Obergrenze greift erst auf breiten
     Bildschirmen. */
  width: min(78vw, 30rem);
  height: auto;
  display: block;
  margin: 0 auto var(--raum-2);
}

/* Der lange Druck aufs Wartungsmenue soll die ganze Uhr treffen, nicht
   nur einen zufaellig erwischten Strich. Die Einzelteile geben ihre
   Zeigerereignisse deshalb an die Flaeche weiter. */
.analoguhr * { pointer-events: none; }

.uhr__ring { stroke: color-mix(in srgb, var(--text) 16%, transparent); }
.uhr__strich { stroke: color-mix(in srgb, var(--text) 35%, transparent); }
.uhr__strich--gross { stroke: var(--ruhe); opacity: 0.55; }

.uhr__zeiger { stroke-linecap: round; }
.uhr__stunde, .uhr__minute { stroke: var(--ruhe); }
.uhr__sekunde { stroke: var(--signal); }
.uhr__mitte { fill: var(--ruhe); }

/* Neben der runden Uhr braucht die Ziffernanzeige nicht mehr die halbe
   Seite. Sie bleibt fuer alle, die die genaue Minute wollen. */

/* Drei Klassen, damit sie gegen `.kiosk-seite.ruht .kiosk__uhr` besteht.
   Weniger waere zu wenig - das war der Fehler beim ersten Anlauf. */
.kiosk-seite.ruht .kiosk__uhr.kiosk__uhr--klein {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  color: var(--ruhe);
  opacity: 0.9;
  letter-spacing: 0.04em;
}

.ruhe__uhr {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

/* Einzelansicht nach dem Aufwecken: dieselbe Kachel, nur grösser - so
   erkennt man aus einigen Metern, wer gewählt ist und was der Tipp tut. */

.kiosk__leute--einzeln { grid-template-columns: 1fr; }

.kachel--gross { min-height: 22rem; }
.kachel--gross .kachel__kopf { min-height: 13rem; }
.kachel--gross .kachel__name { font-size: 2.4rem; }
.kachel--gross .kachel__lage { font-size: 1.2rem; }
.kachel--gross .kachel__dauer { font-size: 4.2rem; }
.kachel--gross .kachel__aktion { font-size: 1.7rem; padding: 1.15rem 0; }

/* Bestätigung im Ruhemodus: sitzt an der Stelle der Marke, damit sie nicht
   hinter der Ruhefläche verschwindet. Gross genug, um sie im Vorbeigehen
   zu lesen. */

.ruhe__bestaetigung {
  position: absolute;
  top: 2mm;
  left: 50%;
  transform: translateX(-50%);
  width: min(88vw, 34rem);
  padding: 1.4rem 1.6rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--gut) 20%, var(--pult));
  color: var(--gut);
  text-align: center;
}

.ruhe__bestaetigung p {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.35;
}

.ruhe__bestaetigung--fehler {
  background: color-mix(in srgb, var(--warnung) 20%, var(--pult));
  color: var(--warnung);
}

/* --- Reiter in den Einstellungen ---------------------------------------
   Die Seite war zu lang geworden. Alles bleibt in einem Formular; die
   Reiter blenden nur um. Ohne JavaScript sind alle Bereiche sichtbar. */

.reiter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--raum-3);
  border-bottom: 1px solid var(--kante);
  padding-bottom: 0.6rem;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--grund);
}

/* Schiebt den Speichern-Knopf ans rechte Ende der Leiste */
.reiter__speichern { margin-left: auto; }

.reiter__knopf {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--leise);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 1rem;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.reiter__knopf:hover { background: var(--pult); color: var(--text); }

.reiter__knopf--aktiv {
  background: var(--pult-hell);
  color: var(--text);
  border-color: var(--kante);
}

.reiter[hidden] { display: none; }

/* `stretch` statt `center`: Der Knopf wird genau so hoch wie das Feld
   daneben. Mit `center` blieb oben und unten ein anderer Rest, weil die
   beiden Kaesten verschieden hoch sind - und das sieht man. */

.kartenzeile { display: flex; gap: 0.6rem; align-items: stretch; }
.kartenzeile input { flex: 1 1 auto; font-family: var(--ziffern); }

.kartenzeile .knopf {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* ======================================================================
   Handy
   ======================================================================

   Bisher gab es fast nichts fuer schmale Bildschirme. Drei Dinge stoerten:
   die Notch verdeckte die Kopfzeile, der Kalender wurde in Tagen mit
   Eintrag unleserlich, und die Tagesliste brach ungluecklich um.

   Die Sicherheitsabstaende kommen von `env(safe-area-inset-*)`. Das
   funktioniert nur zusammen mit `viewport-fit=cover` in der Kopfzeile der
   Seite - das steht dort bereits. */

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.kopf {
  padding-top: calc(var(--raum-2) + env(safe-area-inset-top));
}

@media (max-width: 44rem) {

  :root { --rand: 1rem; --raum-4: 2.25rem; }

  /* Die Kopfzeile ist auf dem Handy ein aufklappbares Menue - siehe weiter
     unten bei .menue */

  /* --- Kalender ------------------------------------------------------
     Die Zellen waren fuer Fingerbreite zu klein beschriftet, und der Text
     in belegten Tagen quoll ueber. Jetzt niedriger, engerer Abstand, und
     der Text bricht sauber ab. */

  .kalender { border-spacing: 3px; }

  .ktag { height: 4.2rem; }
  .ktag__zahl { font-size: 0.9rem; }
  .ktag__monat { display: none; }

  .ktag__text {
    margin-top: 0.15rem;
    font-size: 0.66rem;
    line-height: 1.15;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .kalender th { font-size: 0.68rem; letter-spacing: 0.06em; }

  /* --- Tagesliste ----------------------------------------------------
     Datum und Summe standen in einer Zeile und wurden auseinandergerissen.
     Jetzt Datum oben, Zahlen darunter - beides bleibt lesbar. */

  .tag__kopf { flex-wrap: wrap; gap: 0.35rem var(--raum-2); }
  .tag__datum { flex: 1 1 100%; }

  .tag__zeiten { gap: 0.6rem; font-size: 0.74rem; }
  .tag__soll { margin-left: auto; }

  /* --- Tabellen ------------------------------------------------------
     Nur die wirklich breiten - Vertraege mit sieben Wochentagen, Rapporte.
     Zweispalter mit Text muessen umbrechen duerfen, sonst zieht ein langer
     Begriff wie "Uebertrag aus Vorjahren" die ganze Karte in die Breite. */

  .tabelle--schmal {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Die Monatsuebersicht hat sieben Spalten. Auf Bildschirmbreite
     gequetscht waere sie unleserlich - also darf sie breiter sein und im
     eigenen Rahmen rollen. */
  .tabelle-rahmen {
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--rand) * -1);
    padding-inline: var(--rand);
  }

  .tabelle-rahmen .tabelle {
    min-width: 33rem;
    white-space: nowrap;
    font-size: 0.88rem;
  }

  /* --- Nichts darf ueber den Rand hinaus ------------------------------
     Sonst laesst sich die ganze Seite herauszoomen und alles wird winzig. */

  html, body { max-width: 100%; overflow-x: hidden; }
  main, .karte, .gitter, .gitter > * { min-width: 0; max-width: 100%; }
  .karte { overflow-wrap: anywhere; }

  /* --- Uebertrag von Hand -------------------------------------------- */

  .uebertragzeile { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .uebertragzeile .knopf { width: 100%; }

  /* --- Reiter in den Einstellungen ---------------------------------- */

  .reiter {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    /* Sie klebt beim Blaettern oben - dort sitzt die Notch */
    padding-top: max(0.4rem, env(safe-area-inset-top));
  }

  .reiter::-webkit-scrollbar { display: none; }
  .reiter__knopf { flex: 0 0 auto; }
  .reiter__speichern { position: sticky; right: 0; }

  /* --- Personenkarten ----------------------------------------------- */

  .stamm { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.7rem 1rem; }
  .merkmal { font-size: 0.76rem; padding: 0.26rem 0.6rem; }
  .person__fuss { gap: 0.4rem; }
  .person__fuss > button.verweis { padding: 0.38rem 0.7rem; font-size: 0.85rem; }

  /* --- Fenster ------------------------------------------------------- */

  .dialog {
    width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

/* Ganz schmal: der Kalender braucht noch weniger Beiwerk */
@media (max-width: 26rem) {
  .kalender { border-spacing: 2px; }
  .ktag { height: 3.6rem; }
  .ktag__text { -webkit-line-clamp: 1; font-size: 0.6rem; }
  .legende { font-size: 0.72rem; gap: 0.5rem 0.9rem; }
}

/* --- Hauptmenü ---------------------------------------------------------
   Auf breiten Schirmen bleibt alles wie bisher: Titel links, Reihe rechts.
   Auf dem Handy klappt die Reihe auf Knopfdruck auf.

   Ohne JavaScript bleibt der Knopf verborgen und die Reihe sichtbar - dann
   laesst sie sich seitlich schieben. Lieber so als eine Navigation, an die
   niemand mehr herankommt. */

.menue__knopf {
  display: none;
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  color: var(--auf-marke);
}

@media (max-width: 44rem) {

  .kopf {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.4rem;
  }

  .marke { order: -1; align-self: flex-start; padding-bottom: 0.3rem; }

  .menue__knopf:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0;
    font-size: 1.05rem;
  }

  /* Drei Striche, die sich beim Öffnen zu einem Kreuz drehen */
  .menue__strich,
  .menue__strich::before,
  .menue__strich::after {
    display: block;
    width: 1.3rem;
    height: 2px;
    background: var(--auf-marke);
    border-radius: 2px;
    transition: transform 0.2s ease, background 0.2s ease;
  }

  .menue__strich { position: relative; }
  .menue__strich::before,
  .menue__strich::after { content: ""; position: absolute; left: 0; }
  .menue__strich::before { top: -6px; }
  .menue__strich::after  { top: 6px; }

  .kopf--offen .menue__strich { background: transparent; }
  .kopf--offen .menue__strich::before { transform: translateY(6px) rotate(45deg); }
  .kopf--offen .menue__strich::after  { transform: translateY(-6px) rotate(-45deg); }

  .menue__jetzt { font-weight: 500; }

  /* Solange der Knopf da ist, ist die Reihe eingeklappt */
  .menue__knopf:not([hidden]) ~ nav { display: none; }
  .kopf--offen .menue__knopf:not([hidden]) ~ nav { display: flex; }

  .kopf nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: var(--raum-2);
  }

  .kopf nav a {
    padding: 0.8rem 0;
    font-size: 1rem;
    border-bottom: 0;
  }

  .kopf nav a[aria-current="page"] { opacity: 1; font-weight: 600; }
}

/* Hinweis auf Buchungen, die noch nicht zählen */
.notiz--hinweis {
  padding: 0.6rem 0.8rem;
  border-left: 2px solid var(--signal);
  background: color-mix(in srgb, var(--signal) 8%, transparent);
  border-radius: 0 8px 8px 0;
}

/* --- Persönliches Menü am Wandgerät ------------------------------------
   Aufgeteilt auf die ganze Höhe: Name oben, der Stempelknopf im Mittelpunkt,
   Zahlen und weitere Wege darunter. Alles fingerbreit. */

.menue {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  min-height: 78vh;
  min-height: 78dvh;
}

.menue__kopf { text-align: center; }

.menue__name {
  margin: 0;
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  font-weight: 500;
}

.menue__lage {
  margin: 0.45rem 0 0;
  color: var(--leise);
  font-size: 1.15rem;
}

.menue__tat { flex: 1 1 auto; display: flex; }

/* Der Knopf, um den es geht */
.grossknopf {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 0;
  border-radius: 18px;
  background: var(--signal);
  color: var(--auf-signal-tief);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--raum-3);
  transition: filter 0.15s;
}

.grossknopf:hover { filter: brightness(1.06); }
.grossknopf:active { filter: brightness(0.94); }

.grossknopf--gehen { background: var(--gut); color: var(--auf-gut); }

.grossknopf__wort {
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.grossknopf__dauer {
  font-family: var(--ziffern);
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  opacity: 0.75;
}

.grossknopf.kachel--gesperrt { opacity: 0.45; pointer-events: none; }

/* Die drei Zahlen darunter */
.menue__zahlen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--kante);
  border: 1px solid var(--kante);
  border-radius: 12px;
  overflow: hidden;
}

.menue__zahlen > div {
  background: var(--pult);
  padding: 0.9rem 0.5rem;
  text-align: center;
}

.menue__wert {
  display: block;
  font-family: var(--ziffern);
  font-size: clamp(1.1rem, 4.5vw, 1.5rem);
}

.menue__was {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Weitere Wege */
.menue__weiteres {
  display: grid;
  /* `auto-fit`, nicht `1fr 1fr`: Fehlt «Rapport senden», weil kein
     Mailzugang eingerichtet ist, blieb rechts eine Luecke. So fuellt
     ein einzelner Knopf die Breite und zwei teilen sie sich. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.7rem;
}

.flachform { margin: 0; display: contents; }

.flachknopf {
  appearance: none;
  border: 1px solid var(--kante);
  background: var(--pult);
  color: var(--text);
  font: inherit;
  font-size: 1.15rem;
  /* 96 px = 11,6 mm auf dem 7-Zoll-Schirm (210 dpi). Vorher ergab
     `padding: 1rem` 44 px, also 5,3 mm - halb so viel, wie ein Finger
     braucht. `min-height` und nicht mehr `padding`, damit die Hoehe
     nicht mit der Schriftgroesse mitwaechst. */
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}

.flachknopf:hover { background: var(--pult-hell); border-color: var(--ruhe); }

.flachknopf--still { grid-column: 1 / -1; color: var(--leise); }

/* Eigene Zeiten am Wandgerät */
.eigenetage { list-style: none; margin: var(--raum-3) 0; padding: 0; }

.eigenertag { padding: 0.8rem 0; border-bottom: 1px solid var(--kante); }

.eigenertag__kopf {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-size: 1.05rem;
}

.eigenertag__datum { flex: 1 1 auto; }
.eigenertag__ist { font-family: var(--ziffern); }
.eigenertag__diff { font-family: var(--ziffern); font-size: 0.92rem; min-width: 4.2rem; text-align: right; }

.eigenertag__zeiten {
  margin: 0.3rem 0 0;
  font-family: var(--ziffern);
  font-size: 0.85rem;
  color: var(--leise);
}


/* --- Helle Fassung -------------------------------------------------------

   Ohne das Merkmal `data-thema` am <html>-Element bleibt alles wie bisher.
   Drei Moeglichkeiten sind vorgesehen:

     data-thema="dunkel"  wie bisher, ausdruecklich gewaehlt
     data-thema="hell"    helle Fassung, ausdruecklich gewaehlt
     data-thema="system"  richtet sich nach dem Betriebssystem

   ACHTUNG: Die beiden Bloecke unten muessen Zeichen fuer Zeichen gleich
   bleiben. Wer einen aendert, aendert den anderen mit. */

html[data-thema="hell"] {
  /* Weisser Grund, leicht getoente Kacheln. Umgekehrt zum ersten Versuch,
     der den Grund toente und die Kacheln weiss liess - das sah aus wie
     schwebende Karten. So erkennt das Auge die Struktur, ohne dass etwas
     ueber etwas anderem zu stehen scheint. */
  --grund:    #ffffff;
  --pult:     #f4f6fa;
  --pult-hell:#eceff6;
  --kante:    #dde2ec;

  /* Schrift */
  --text:     #16202c;
  --leise:    #5e6b7c;

  /* Markenfarbe, siehe oben. */
  --marke:      #33417e;
  --auf-marke:  #ffffff;
  --marke-text: #33417e;

  /* Deutlich dunkler als in der dunklen Fassung. Ein helles Orange auf
     Weiss ist kaum zu lesen; dieses traegt weisse Schrift mit Kontrast
     4.8 und ist auch als Verweisfarbe fuer kleine Schrift brauchbar. */
  --signal:   #b65f07;
  --ruhe:     #476b82;
  --warnung:  #b3382c;
  --gut:      #1a7f52;

  /* Alle vier Signalfarben sind hier so dunkel, dass Weiss darauf gehoert. */
  --auf-signal:      #ffffff;
  --auf-signal-tief: #ffffff;
  --auf-ruhe:        #ffffff;
  --auf-gut:         #ffffff;

  /* Nur das, was wirklich eingelassen ist: Tagesbalken, Tabellenkoepfe. */
  --flaeche-tief: #e4e9f2;

  /* Aus Aufhellungen werden Abdunklungen */
  --schleier-1: rgba(0, 0, 0, 0.025);
  --schleier-2: rgba(0, 0, 0, 0.045);
  --schleier-3: rgba(0, 0, 0, 0.07);
  --schleier-dialog: rgba(22, 35, 44, 0.45);
}

@media (prefers-color-scheme: light) {
  html[data-thema="system"] {
  /* Weisser Grund, leicht getoente Kacheln. Umgekehrt zum ersten Versuch,
     der den Grund toente und die Kacheln weiss liess - das sah aus wie
     schwebende Karten. So erkennt das Auge die Struktur, ohne dass etwas
     ueber etwas anderem zu stehen scheint. */
  --grund:    #ffffff;
  --pult:     #f4f6fa;
  --pult-hell:#eceff6;
  --kante:    #dde2ec;

  /* Schrift */
  --text:     #16202c;
  --leise:    #5e6b7c;

  /* Markenfarbe, siehe oben. */
  --marke:      #33417e;
  --auf-marke:  #ffffff;
  --marke-text: #33417e;

  /* Deutlich dunkler als in der dunklen Fassung. Ein helles Orange auf
     Weiss ist kaum zu lesen; dieses traegt weisse Schrift mit Kontrast
     4.8 und ist auch als Verweisfarbe fuer kleine Schrift brauchbar. */
  --signal:   #b65f07;
  --ruhe:     #476b82;
  --warnung:  #b3382c;
  --gut:      #1a7f52;

  /* Alle vier Signalfarben sind hier so dunkel, dass Weiss darauf gehoert. */
  --auf-signal:      #ffffff;
  --auf-signal-tief: #ffffff;
  --auf-ruhe:        #ffffff;
  --auf-gut:         #ffffff;

  /* Nur das, was wirklich eingelassen ist: Tagesbalken, Tabellenkoepfe. */
  --flaeche-tief: #e4e9f2;

  /* Aus Aufhellungen werden Abdunklungen */
  --schleier-1: rgba(0, 0, 0, 0.025);
  --schleier-2: rgba(0, 0, 0, 0.045);
  --schleier-3: rgba(0, 0, 0, 0.07);
  --schleier-dialog: rgba(22, 35, 44, 0.45);
  }
}