/* ===========================================================================
   PERSONALPLANUNG — Oberflaeche
   ===========================================================================

   Umsetzung von MD Personal/01_DESIGNSYSTEM.md.

   In dieser Datei steht KEIN einziger Hex-Wert. Alle Farben, Schriften,
   Abstaende und Rundungen kommen aus public/css/marke.css. Wer eine Farbe
   sucht, findet sie dort — und nur dort.

   Zwei Bereiche, eine Datei:
     p-*    Mitarbeiter-Bereich — eine Spalte, riesige Knoepfe, Handy zuerst
     pc-*   Admin-Cockpit       — Kacheln, Ampel, Uebersicht

   Klassen mit "ist-" sind Zustaende (ist-aktiv, ist-gruen), keine Bausteine.
   =========================================================================== */

/* ===========================================================================
   GRUNDLAGE
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.personal {
  margin: 0;
  font-family: var(--sans);
  /* 17px Grundschrift — im Mitarbeiter-Bereich wird unten auf 19px erhoeht. */
  font-size: var(--schrift-normal);
  line-height: 1.6;
  color: var(--text);
  background: var(--flaeche);
  /* Randabstand auf Geraeten mit Aussparung (iPhone-Notch). */
  padding-bottom: env(safe-area-inset-bottom);
}

body.personal--mitarbeiter {
  font-size: var(--schrift-gross);
  /* Platz fuer die feste untere Leiste, damit nichts darunter verschwindet. */
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 var(--luft-2);
  color: var(--text);
}

h1 { font-size: var(--schrift-riesig); }
h2 { font-size: var(--schrift-titel); }
h3 { font-size: var(--schrift-gross); }

p { margin: 0 0 var(--luft-3); }

a { color: var(--petrol); }

img { max-width: 100%; height: auto; }

/* Sichtbarer Fokusrahmen — wer mit der Tastatur bedient, muss sehen, wo er ist. */
:focus-visible {
  outline: 3px solid var(--bordeaux-hell);
  outline-offset: 3px;
  border-radius: var(--luft-1);
}

/* Nur fuer Vorleseprogramme sichtbar. */
.p-nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   KOPF UND RAHMEN
   =========================================================================== */

.p-kopf {
  background: var(--nacht);
  color: var(--text-hell);
  padding: var(--luft-3) var(--luft-3);
  padding-top: calc(var(--luft-3) + env(safe-area-inset-top));
}

.p-kopf__innen {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-2);
}

.p-marke {
  display: flex;
  align-items: center;
  gap: var(--luft-2);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.p-marke__bild { height: 34px; width: auto; display: block; }

.p-marke__wort {
  font-family: var(--display);
  font-size: var(--schrift-gross);
  color: var(--gold-hell);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sprachumschalter — zwei klar tippbare Flaechen, kein Klappmenue. */
.p-sprache { display: flex; gap: var(--luft-1); }

.p-sprache__wahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 44px;
  padding: 0 var(--luft-2);
  border-radius: var(--rund-voll);
  border: 2px solid var(--gold-tief);
  background: transparent;
  color: var(--gold-hell);
  font-family: var(--sans);
  font-size: var(--schrift-klein);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.p-sprache__wahl.ist-aktiv {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--nacht);
}

.p-inhalt {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: var(--luft-4) var(--luft-3) var(--luft-5);
}

.p-inhalt--breit { max-width: var(--breite-cockpit); }

/* ===========================================================================
   KNOEPFE — die wichtigste Regel des Design-Systems
   ===========================================================================

   Ein Knopf ist IMMER eine farbige, erhabene Flaeche mit Rundung und Schatten.
   Niemals nur unterstrichener Text. Mindestens 56px hoch, damit der Daumen
   sicher trifft. Beim Tippen wandert er sichtbar nach unten.
   =========================================================================== */

.p-knopf {
  /* Aufbau */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--luft-2);
  width: 100%;
  min-height: var(--knopf-hoehe);
  padding: var(--luft-2) var(--luft-4);
  margin: 0;

  /* Aussehen */
  border: 0;
  border-radius: var(--rund-voll);
  background: var(--bordeaux);
  color: var(--text-hell);
  box-shadow: var(--schatten-knopf);

  /* Schrift */
  font-family: var(--sans);
  font-size: var(--schrift-gross);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}

.p-knopf:hover { background: var(--bordeaux-hell); }

/* Sichtbare Reaktion beim Tippen: der Knopf wird gedrueckt. */
.p-knopf:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16), 0 4px 10px rgba(26, 23, 48, 0.18);
  background: var(--bordeaux-tief);
}

.p-knopf[disabled],
.p-knopf.ist-aus {
  background: var(--linie-satt);
  color: var(--text-leise);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Hauptaktion — der eine grosse Knopf, den man jetzt braucht. */
/*
 * Der Hauptknopf traegt seit dem Umbau (16.08.2026) den Blau-Verlauf der
 * Verwaltung. Gruen ist im Personalmodul die AMPELFARBE fuer „anwesend, alles
 * gut" — ein gruener Knopf daneben liest sich wie ein Zustand und nicht wie
 * eine Aktion.
 */
.p-knopf--haupt {
  min-height: var(--knopf-hoehe-gross);
  font-size: var(--schrift-titel);
  border-radius: var(--rund-voll);
  background: linear-gradient(135deg, #1c79c2 0%, #33a2da 100%);
  box-shadow: 0 8px 20px rgba(30, 123, 196, 0.32);
}
.p-knopf--haupt:hover  { box-shadow: 0 11px 26px rgba(30, 123, 196, 0.42); }
.p-knopf--haupt:active { background: linear-gradient(135deg, #17699f 0%, #2a8ec0 100%); }

/* Nebenaktion — heller, nur Rahmen. Trotzdem klar ein Knopf. */
.p-knopf--neben {
  background: var(--karte);
  color: var(--text);
  border: 2px solid var(--linie-satt);
  box-shadow: 0 2px 0 var(--linie-satt), 0 6px 16px rgba(26, 23, 48, 0.08);
}
.p-knopf--neben:hover  { background: var(--flaeche); }
.p-knopf--neben:active { background: var(--creme-tief); box-shadow: 0 1px 0 var(--linie-satt); }

/* Warn-Aktion — z. B. "Krank melden". Deutlich unterscheidbar. */
.p-knopf--warn {
  background: var(--rot);
}
.p-knopf--warn:hover  { background: var(--rot); }
.p-knopf--warn:active { background: var(--rot-tief); }

/* Kleiner Knopf fuer Listenzeilen. Bleibt 48px hoch — noch gut tippbar. */
.p-knopf--klein {
  width: auto;
  min-height: 48px;
  padding: var(--luft-1) var(--luft-3);
  font-size: var(--schrift-klein);
  border-radius: var(--rund);
}

.p-knopf--breit { width: 100%; }
.p-knopf--schmal { width: auto; }

.p-knopf__zeichen { font-size: 1.3em; line-height: 1; }

/* Zwei Knoepfe nebeneinander, auf schmalen Geraeten untereinander. */
.p-knopfreihe {
  display: flex;
  flex-direction: column;
  gap: var(--luft-2);
  margin-top: var(--luft-3);
}

@media (min-width: 520px) {
  .p-knopfreihe { flex-direction: row; }
  .p-knopfreihe > * { flex: 1; }
}

/* ===========================================================================
   KARTEN
   =========================================================================== */

.p-karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten);
  padding: var(--luft-4);
  margin-bottom: var(--luft-3);
}

.p-karte--ruhig { box-shadow: none; }
.p-karte__titel { margin-bottom: var(--luft-2); }

/* Begruessung ganz oben: wer bin ich, wo arbeite ich heute. */
.p-hallo {
  background: var(--nacht);
  color: var(--text-hell);
  border-radius: var(--rund-gross);
  padding: var(--luft-4);
  margin-bottom: var(--luft-4);
}
.p-hallo h1 { color: var(--gold-hell); margin-bottom: var(--luft-1); }
.p-hallo p  { margin: 0; color: var(--creme-tief); }

/* ===========================================================================
   AMPEL — Farbe NIE allein, immer mit Symbol und Wort
   =========================================================================== */

.p-ampel {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-1);
  padding: var(--luft-1) var(--luft-3);
  border-radius: var(--rund-voll);
  font-size: var(--schrift-klein);
  font-weight: 600;
  border: 2px solid transparent;
  white-space: nowrap;
}

.p-ampel--gruen { background: var(--gruen-flaeche); color: var(--gruen-tief); border-color: var(--gruen); }
.p-ampel--gelb  { background: var(--gelb-flaeche);  color: var(--gelb-tief);  border-color: var(--gelb); }
.p-ampel--rot   { background: var(--rot-flaeche);   color: var(--rot-tief);   border-color: var(--rot); }
.p-ampel--grau  { background: var(--flaeche);       color: var(--text-leise); border-color: var(--linie-satt); }

.p-ampel__zeichen { font-size: 1.1em; line-height: 1; }

/* ===========================================================================
   FORTSCHRITT — "Schritt 2 von 4" plus Balken
   =========================================================================== */

.p-fortschritt { margin-bottom: var(--luft-4); }

.p-fortschritt__text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--luft-2);
  font-size: var(--schrift-klein);
  font-weight: 600;
  color: var(--text-leise);
  margin-bottom: var(--luft-1);
}

.p-fortschritt__balken {
  height: 14px;
  background: var(--creme-tief);
  border-radius: var(--rund-voll);
  overflow: hidden;
}

.p-fortschritt__fuellung {
  height: 100%;
  background: var(--gruen);
  border-radius: var(--rund-voll);
  transition: width 0.3s ease;
}

/* ===========================================================================
   FORMULARE
   =========================================================================== */

.p-feld { margin-bottom: var(--luft-3); }

.p-feld__label {
  display: block;
  font-weight: 600;
  font-size: var(--schrift-normal);
  margin-bottom: var(--luft-1);
}

.p-feld__hinweis {
  display: block;
  font-size: var(--schrift-klein);
  color: var(--text-leise);
  margin-top: var(--luft-1);
}

.p-feld__pflicht { color: var(--rot); font-weight: 700; }

.p-eingabe {
  display: block;
  width: 100%;
  min-height: var(--knopf-hoehe);
  padding: var(--luft-2) var(--luft-3);
  font-family: var(--sans);
  /* 16px oder mehr — darunter zoomt iOS beim Antippen automatisch hinein. */
  font-size: var(--schrift-gross);
  color: var(--text);
  background: var(--weiss);
  border: 2px solid var(--linie-satt);
  border-radius: var(--rund);
}

.p-eingabe:focus {
  border-color: var(--petrol);
  outline: none;
  box-shadow: 0 0 0 3px var(--info-flaeche);
}

.p-eingabe.ist-fehler { border-color: var(--rot); background: var(--rot-flaeche); }

select.p-eingabe { appearance: none; background-image: none; }
textarea.p-eingabe { min-height: 120px; resize: vertical; }

/* Datei-Upload: der echte Knopf ist unsichtbar, das Label ist der Knopf. */
.p-upload { display: block; margin-bottom: var(--luft-3); }
.p-upload__eingabe {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.p-upload__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--luft-2);
  width: 100%;
  min-height: var(--knopf-hoehe);
  padding: var(--luft-2) var(--luft-3);
  border: 2px dashed var(--linie-satt);
  border-radius: var(--rund);
  background: var(--karte);
  color: var(--text);
  font-size: var(--schrift-normal);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--linie-satt);
}
.p-upload__knopf:hover { background: var(--flaeche); border-color: var(--petrol); }
.p-upload__eingabe:focus-visible + .p-upload__knopf {
  outline: 3px solid var(--bordeaux-hell);
  outline-offset: 3px;
}
.p-upload.ist-fertig .p-upload__knopf {
  border-style: solid;
  border-color: var(--gruen);
  background: var(--gruen-flaeche);
  color: var(--gruen-tief);
}

/* ===========================================================================
   MELDUNGEN
   =========================================================================== */

.p-meldung {
  display: flex;
  align-items: flex-start;
  gap: var(--luft-2);
  padding: var(--luft-3);
  border-radius: var(--rund);
  border-left: 6px solid var(--linie-satt);
  background: var(--flaeche);
  margin-bottom: var(--luft-3);
  font-size: var(--schrift-normal);
}

.p-meldung--gut  { background: var(--gruen-flaeche); border-left-color: var(--gruen); color: var(--gruen-tief); }
.p-meldung--warn { background: var(--gelb-flaeche);  border-left-color: var(--gelb);  color: var(--gelb-tief); }
.p-meldung--rot  { background: var(--rot-flaeche);   border-left-color: var(--rot);   color: var(--rot-tief); }
.p-meldung--info { background: var(--info-flaeche);  border-left-color: var(--info);  color: var(--info); }

.p-meldung__zeichen { font-size: 1.4em; line-height: 1.1; }
.p-meldung__text { margin: 0; }

/* Grosses gruenes Haekchen nach einer erfolgreichen Aktion. */
.p-erfolg { text-align: center; padding: var(--luft-4) 0; }

.p-erfolg__zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 108px;
  margin: 0 auto var(--luft-3);
  border-radius: 50%;
  background: var(--gruen-flaeche);
  border: 5px solid var(--gruen);
  color: var(--gruen);
  font-size: 56px;
  line-height: 1;
}

.p-erfolg__titel { color: var(--gruen-tief); }

/* ===========================================================================
   LISTEN UND CHECKLISTE
   =========================================================================== */

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

.p-zeile {
  display: flex;
  align-items: center;
  gap: var(--luft-3);
  flex-wrap: wrap;
  padding: var(--luft-3);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  margin-bottom: var(--luft-2);
  box-shadow: var(--schatten);
}

.p-zeile__zeichen {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--flaeche);
  font-size: 22px;
}

.p-zeile__text { flex: 1 1 200px; min-width: 0; }
.p-zeile__name { font-weight: 600; margin: 0; }
.p-zeile__leise { color: var(--text-leise); font-size: var(--schrift-klein); margin: 0; }
.p-zeile__tat { flex: 0 0 auto; }

.p-zeile.ist-gruen { border-left: 6px solid var(--gruen); }
.p-zeile.ist-gelb  { border-left: 6px solid var(--gelb); }
.p-zeile.ist-rot   { border-left: 6px solid var(--rot); }

/* ===========================================================================
   MENUEFUEHRUNG OBEN (Mitarbeiter)
   ===========================================================================

   Fabi (14.08.2026): „design vom mitarbeiter account umgebut … angepasst an
   unser backend design. Menü führung oben"

   Bis dahin lag hier eine App-Leiste am unteren Rand mit vier Zielen. Der
   Bereich hat inzwischen sieben: Stunden, Vertrag und Abrechnungen kamen dazu
   und waren nur über Verweise auf der Startseite erreichbar.

   🔴 Waagerecht scrollbar und NICHT umbrechend. Sieben Wörter passen auf ein
      Telefon nicht nebeneinander; brächen sie um, würde der Kopf drei Zeilen
      hoch und schöbe den Inhalt aus dem Bild — auf dem Gerät, auf dem dieser
      Bereich hauptsächlich benutzt wird.
   =========================================================================== */

.p-navi {
  border-top: 1px solid var(--linie);
  background: var(--karte);
}

.p-navi__innen {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--luft-2, 16px);
  display: flex;
  gap: 2px;

  /*
   * Scrollen ohne sichtbaren Balken: der Balken laege über den Punkten und
   * verdeckte auf kurzen Bildschirmen deren Unterkante.
   */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.p-navi__innen::-webkit-scrollbar { display: none; }

.p-navi__punkt {
  flex: 0 0 auto;
  padding: 13px 14px 11px;
  text-decoration: none;
  color: var(--text-leise);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;

  /*
   * Der Balken sitzt immer da, nur durchsichtig. Würde er erst beim aktiven
   * Punkt entstehen, wäre dieser zwei Pixel höher als seine Nachbarn und die
   * ganze Zeile sprunghaft.
   */
  border-bottom: 2px solid transparent;
}

.p-navi__punkt:hover,
.p-navi__punkt:focus-visible {
  color: var(--text);
}

.p-navi__punkt.ist-aktiv {
  color: var(--bordeaux);
  border-bottom-color: var(--bordeaux);
}

@media (max-width: 600px) {
  .p-navi__innen { padding: 0 10px; }
  .p-navi__punkt { padding: 12px 11px 10px; font-size: 13.5px; }
}

/* ===========================================================================
   ADMIN-COCKPIT
   =========================================================================== */

.pc-kopf {
  background: var(--nacht);
  color: var(--text-hell);
  padding: var(--luft-3);
}

.pc-kopf__innen {
  max-width: var(--breite-cockpit);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-3);
  flex-wrap: wrap;
}

.pc-navi {
  display: flex;
  gap: var(--luft-1);
  flex-wrap: wrap;
  max-width: var(--breite-cockpit);
  margin: 0 auto;
  padding: var(--luft-2) var(--luft-3) 0;
}

.pc-navi__punkt {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-1);
  min-height: 48px;
  padding: var(--luft-1) var(--luft-3);
  border-radius: var(--rund-voll);
  background: var(--karte);
  border: 2px solid var(--linie);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--schrift-klein);
  box-shadow: 0 2px 0 var(--linie);
}

.pc-navi__punkt:hover { background: var(--creme); }
.pc-navi__punkt.ist-aktiv { background: var(--bordeaux); border-color: var(--bordeaux); color: var(--text-hell); }

.pc-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--luft-3);
  margin-bottom: var(--luft-4);
}

.pc-kachel {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  box-shadow: var(--schatten);
  padding: var(--luft-3);
}

.pc-kachel__zahl {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.1;
  margin: 0;
}

.pc-kachel__wort { color: var(--text-leise); font-size: var(--schrift-klein); margin: 0; }

.pc-kachel.ist-gruen .pc-kachel__zahl { color: var(--gruen); }
.pc-kachel.ist-gelb  .pc-kachel__zahl { color: var(--gelb); }
.pc-kachel.ist-rot   .pc-kachel__zahl { color: var(--rot); }

/* Tabellen nur dort, wo eine Kartenliste unuebersichtlich waere.
   Auf schmalen Geraeten scrollt die Tabelle in ihrem eigenen Kasten. */
.pc-tabellenkasten { overflow-x: auto; margin-bottom: var(--luft-4); }

.pc-tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--karte);
  border-radius: var(--rund);
  overflow: hidden;
  font-size: var(--schrift-klein);
}

.pc-tabelle th,
.pc-tabelle td {
  text-align: left;
  padding: var(--luft-2) var(--luft-3);
  border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}

.pc-tabelle th {
  background: var(--creme);
  font-weight: 700;
  white-space: nowrap;
}

.pc-tabelle tr:last-child td { border-bottom: 0; }

/* ===========================================================================
   HILFSKLASSEN
   =========================================================================== */

.p-mitte       { text-align: center; }
.p-leise       { color: var(--text-leise); }
/* Grosse Zahl auf einen Blick — Cockpit-Ampel, Wochenstunden.
   Stand vorher als style-Attribut in zwei Vorlagen. */
.p-grosszahl {
  font-family: var(--display);
  font-size: 40px;
  line-height: 1.1;
  margin: var(--luft-2) 0;
}

.p-grosszahl--gruen { font-size: 64px; color: var(--gruen); }

.p-klein       { font-size: var(--schrift-klein); }
.p-gross       { font-size: var(--schrift-titel); }
.p-abstand-oben { margin-top: var(--luft-4); }
.p-ohne-abstand { margin-bottom: 0; }

.p-trenner {
  height: 1px;
  background: var(--linie);
  border: 0;
  margin: var(--luft-4) 0;
}

/* Wer weniger Bewegung eingestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Beleg-Vorschau auf der Unterlagen-Checkliste
   ---------------------------------------------------------------------------
   Wer ein Ausweisfoto hochlaedt, soll sehen, WAS angekommen ist. Deshalb wird
   das Bild gezeigt und nicht nur "hochgeladen" behauptet. Gross genug, dass
   man erkennt, ob die Nummer lesbar ist — und antippbar, um es ganz zu sehen.
   --------------------------------------------------------------------------- */

.p-beleg {
  margin-top: var(--luft-3);
  padding-top: var(--luft-3);
  border-top: 1px solid var(--linie);
}

.p-beleg__rahmen {
  display: block;
  margin: var(--luft-2) 0;
  border: 2px solid var(--linie-satt);
  border-radius: var(--rund);
  overflow: hidden;
  background: var(--flaeche);
}

.p-beleg__bild {
  display: block;
  width: 100%;
  /* Hoch genug, dass eine Ausweiszeile lesbar bleibt, ohne die Karte zu
     sprengen. `contain` statt `cover`: bei einem Ausweis darf nichts
     abgeschnitten werden — sonst prueft man die Vorschau und uebersieht
     genau den Rand, der fehlt. */
  max-height: 260px;
  object-fit: contain;
}

.p-beleg__pdf {
  display: flex;
  align-items: center;
  gap: var(--luft-2);
  margin: var(--luft-2) 0;
  padding: var(--luft-2) var(--luft-3);
  min-height: 56px;
  border: 2px solid var(--linie-satt);
  border-radius: var(--rund);
  background: var(--flaeche);
  color: var(--text);
  text-decoration: none;
}

.p-beleg__pdf-zeichen { font-size: 28px; }

.p-beleg__pdf-name {
  display: block;
  font-weight: 600;
  word-break: break-all;
}

/* --------------------------------------------------------------------------
   Passwort sichtbar machen
   --------------------------------------------------------------------------
   Gleiche Klassen wie in der Verwaltung (admin.css), weil derselbe Umschalter
   sie setzt: /js/passwort-auge.js. Dieser Bereich laedt admin.css nicht mit,
   deshalb steht der Block hier noch einmal.
   -------------------------------------------------------------------------- */

.a-pw { position: relative; display: block; }
.a-pw > input { width: 100%; }

.a-pw__auge {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: #6d7d8e;
  cursor: pointer;
}

.a-pw__auge:hover,
.a-pw__auge[aria-pressed='true'] { color: #143f74; }

.a-pw__auge:focus-visible {
  outline: 2px solid #143f74;
  outline-offset: 1px;
}

/* --- Fenster (dialog) -----------------------------------------------------
   Fabi (14.08.2026): „soll er ein popup erhalten mit genau diesem fenster."

   Bewusst das native <dialog>: Verdunklung, Escape und Tastaturfokus bringt
   es mit. Hier steht nur, wie es aussieht — mittig, so breit wie eine Karte,
   auf schmalen Schirmen mit Rand. */
.p-fenster {
  border: 0;
  border-radius: 14px;
  padding: 22px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background-color: var(--p-karte, #fff);
  color: inherit;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.p-fenster::backdrop {
  background-color: rgba(20, 12, 30, 0.55);
}

.p-fenster .p-knopfreihe {
  margin-top: 18px;
}

/* ===========================================================================
   AUSWAHL — Ankreuzfelder und Wahlknöpfe, die ein Daumen trifft
   ===========================================================================

   🔴 Es gab diese Form bis zum 24.08.2026 nicht.

      Die einzige Stelle, die sie brauchte, war `views/lager/movil/huette.ejs`
      (abholen / zurückbringen, „ohne Gegenzeichnung"), und dort standen
      nackte `<label>` mit dem Standard-Ankreuzfeld des Browsers: rund
      13 Pixel Antippfläche. Der Rest dieser App ist auf 56 Pixel gebaut
      (`--knopf-hoehe`) — das ist kein Zufall, sondern der Grund, warum man
      sie im Stehen mit einer Hand bedienen kann.

      Warum es so lange fehlte: In `views/personal/` gibt es KEIN einziges
      `type="radio"`. Die App fragt sonst nie „entweder / oder" — sie zeigt
      Knöpfe. Die Lageransicht ist die erste Stelle mit einer echten Wahl.

   🔴 Die ganze Zeile ist die Schaltfläche, nicht nur das Kästchen.

      Deshalb trägt das `<label>` die Form und nicht ein `<div>` darum: Ein
      Label schaltet sein Feld, wenn man irgendwo darauf tippt. Ein Kästchen
      allein zu treffen, während man mit Handschuhen in einer kalten Hütte
      steht, ist der Unterschied zwischen „geht" und „geht nicht".

      `:has(input:checked)` färbt die getroffene Zeile. Die Auswahl ist damit
      auf einen Blick zu sehen, ohne auf den Punkt im Kästchen zu schauen —
      dieselbe Regel wie überall im Haus: nie die Farbe allein, aber auch nie
      nur das kleine Zeichen.
   =========================================================================== */

.p-wahl {
  display: flex;
  align-items: center;
  gap: var(--luft-2);
  min-height: var(--knopf-hoehe);
  padding: var(--luft-2) var(--luft-3);
  margin-bottom: var(--luft-1);
  background: var(--weiss);
  border: 2px solid var(--linie-satt);
  border-radius: var(--rund);
  font-size: var(--schrift-gross);
  color: var(--text);
  cursor: pointer;
}

/* 22 statt der üblichen 13 Pixel: das Kästchen soll man auch dann sehen,
   wenn die Sonne auf das Telefon scheint. */
.p-wahl input[type="radio"],
.p-wahl input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--petrol);
  margin: 0;
}

.p-wahl:has(input:checked) {
  border-color: var(--petrol);
  background: var(--info-flaeche);
}

/* Fokus liegt am Feld, sichtbar sein muss die ganze Zeile. */
.p-wahl:focus-within {
  border-color: var(--petrol);
  box-shadow: 0 0 0 3px var(--info-flaeche);
}