/* Stile der Oberflaeche.
 *
 * Bis PAYCHECK-93 stand das hier als <style>-Block in index.html. Der Umzug
 * gehoert zur Trennung von Markup und allem anderen; am Aussehen aendert er
 * nichts. Stilangaben direkt am Element (style="...") gibt es weiterhin --
 * das ist eine bewusste Entscheidung, siehe die Entscheidungsnotiz zu
 * PAYCHECK-91.
 */
/* ==========================================================================
   FARBEN — Cteam-Branding aus dem Wireframe.
   Blau #00397a (Primary), Gold #f9b11f (Highlight).
   Alle Farben stehen hier und nur hier.
   ========================================================================== */
:root{
  --blau:        #00397a;
  --blau-hell:   #0a4a92;
  --blau-blass:  #eef2f8;
  --gold:        #f9b11f;
  --gold-blass:  #fff7e6;
  --gold-text:   #a06a00;
  --gruen:       #3a6a3a;
  --gruen-blass: #eef6ee;
  --gruen-linie: #a9c8a9;
  --rot:         #c2352b;
  --rot-blass:   #fdf0ef;
  --rot-linie:   #f3d3d0;
  --flaeche:     #ffffff;
  --papier:      #f6f7f9;
  --linie:       #dddddd;
  --linie-hell:  #eeeeee;
  --text:        #2b2b2b;
  --gedaempft:   #8a8a8a;

  /* Marke von AI in Action -- ausdruecklich NICHT die Farben des Kunden. Sie
     gelten allein fuer die Karte am Fuss der Seitenleiste, die ins App-Portal
     fuehrt (PAYCHECK-371). Die Werte stammen aus dem Design-System der Website
     (Repo Homepage, design.md) und sind dieselben, die der App Store traegt.
     Wer das Cteam-Branding aendert, fasst diese beiden nicht an. */
  --marke-blau:   #4b4bf2;
  --marke-orange: #e96e22;
}

/* ==========================================================================
   SCHRIFTEN DER MARKE — nur fuer die Karte am Fuss der Seitenleiste.
   Beide Dateien liegen im Repo und werden mitgeliefert, nicht nachgeladen:
   die Content-Security-Policy laesst kein fremdes Ziel zu (PAYCHECK-94), und
   eine Schrift von einem fremden Server wuerde bei jedem Aufruf die Adresse
   des Abrechners dorthin melden. Herkunft und Pruefsumme je Datei stehen in
   marke/HERKUNFT.md und werden maschinell geprueft.
   Die uebrige Oberflaeche bleibt bei ihrer Systemschrift.
   ========================================================================== */
@font-face{
  font-family:Commissioner;
  font-style:normal;
  font-weight:100 900;          /* Variable Font, wght 100-900 */
  font-display:swap;
  src:url('marke/commissioner.woff2') format('woff2');
}

@font-face{
  font-family:'Contrail One';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('marke/contrail-one.woff2') format('woff2');
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--papier); color:var(--text);
  font:14px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}
h1,h2,h3{margin:0; font-weight:600}
.versteckt{display:none !important}
.gedaempft{color:var(--gedaempft)}
.klein{font-size:12px}

/* ---------- Bausteine ---------- */
.knopf{
  padding:7px 14px; border:1px solid var(--blau); background:var(--flaeche); color:var(--blau);
  border-radius:4px; cursor:pointer; font:inherit; font-weight:600;
}
.knopf:hover{background:var(--blau-blass)}
.knopf.voll{background:var(--blau); color:#fff}
.knopf.voll:hover{background:var(--blau-hell)}
.knopf:disabled{opacity:.4; cursor:not-allowed}
.knopf.klein{padding:5px 10px; font-size:12px}
input[type=text],input[type=email],input[type=password]{
  font:inherit; width:100%; padding:9px 11px; border:1px solid var(--linie); border-radius:4px;
}
select{font:inherit; padding:6px 9px; border:1px solid var(--linie); border-radius:4px; background:var(--flaeche)}

.pille{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid}
.pille.offen{background:var(--gold-blass); color:var(--gold-text); border-color:var(--gold)}
.pille.erledigt{background:var(--gruen-blass); color:var(--gruen); border-color:#a9c8a9}
/* "nicht pruefbar" (PAYCHECK-455). Gold schied aus (hiesse offene Arbeit, es
   gibt aber nichts abzuhaken) und Gruen auch (hiesse erledigt).

   Zuerst stand hier neutrales Grau. Der Betreiber hat es am 01.10.2026 am
   laufenden Stand gesehen und als zu unauffaellig verworfen: Grau liest sich
   wie "unwichtig", dabei sagt die Pille, dass bei dieser Person UEBERHAUPT
   NICHT geprueft wurde -- die Zeile daneben traegt eine 0, und die sieht sonst
   aus wie "alles in Ordnung".

   Pastellrot also, aus demselben Satz wie .melde.fehler. Dass es damit wie ein
   Fehler aussieht, ist in Kauf genommen und kein Versehen: Ein Fehler der
   Abrechnerin ist es nicht, aber etwas, das jemand anfassen muss, bevor die
   Zahl etwas wert ist. */
.pille.unklar{background:var(--rot-blass); color:var(--rot); border-color:var(--rot-linie)}

/* Die Statusflaeche eines Fehltags ist zugleich der Schalter (PAYCHECK-446).
   Der schaltbare Stil haengt an einer EIGENEN Klasse: die Pille daneben traegt
   auch die Fehltage-Zahl in der Kolonnenliste, die Zahl am Mitarbeiterkopf und
   die Abweichungszahl der Abrechnungsliste -- Zahlen, die niemand anklickt.
   Bekaeme .pille selbst Zeigerhand und Hover, sahen sie wie Knoepfe aus. */
.pille-schalter{font:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:filter .12s}
.pille-schalter:hover{filter:brightness(.94)}
.pille-schalter:active{transform:translateY(1px)}
.pille-schalter:focus-visible{outline:2px solid var(--blau); outline-offset:2px}

.abzeichen{
  display:inline-block; background:var(--blau); color:#fff; font-weight:700;
  padding:7px 14px; border-radius:4px; letter-spacing:.2px;
}

/* ==========================================================================
   BILDSCHIRM 0 — Meldung (PAYCHECK-118)
   Nur fuer den Fall, dass die Anmeldung gar nicht zustande kommt. Auf dem
   Regelweg bekommt ihn niemand zu sehen.
   ========================================================================== */
#bildschirm-meldung{min-height:100%; display:grid; place-items:center; padding:24px}
.meldungs-karte{
  width:100%; max-width:340px; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:6px; padding:28px 26px; text-align:center;
}
.meldungs-karte .abzeichen{margin-bottom:22px}
.anmelde-fuss{margin-top:16px; font-size:12px; color:var(--gedaempft); font-style:italic}
.demo-konten{margin-top:18px; border-top:1px dashed var(--linie); padding-top:12px; text-align:left}
.demo-konten button{
  background:none; border:none; padding:3px 0; color:var(--blau); cursor:pointer;
  font:inherit; font-size:12px; display:block; text-align:left;
}
.demo-konten button:hover{text-decoration:underline}

/* ==========================================================================
   BILDSCHIRM 1 — Anwendung: feste Seitenleiste + Inhalt
   ========================================================================== */
#bildschirm-app{display:flex; min-height:100vh}

.seitenleiste{
  width:250px; flex:none; background:var(--blau); color:#fff;
  border-left:6px solid var(--gold); padding:18px 0; display:flex; flex-direction:column;
}
.seitenleiste .abzeichen{background:rgba(255,255,255,.14); margin:0 16px 22px; text-align:center}
.nav-punkt{
  display:block; width:100%; text-align:left; background:none; border:none; color:#fff;
  padding:10px 16px; font:inherit; font-size:12px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; cursor:pointer; opacity:.85;
}
.nav-punkt:hover:not(:disabled){background:rgba(255,255,255,.10); opacity:1}
.nav-punkt[aria-current="true"]{background:rgba(255,255,255,.18); opacity:1}
.nav-punkt:disabled{opacity:.35; cursor:not-allowed}
.trenner{border-top:1px dashed rgba(255,255,255,.35); margin:16px}
.gruppen-titel{
  padding:0 16px 8px; font-size:11px; letter-spacing:.8px; text-transform:uppercase; opacity:.65;
}
.postfach{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none;
  border:none; color:#fff; padding:8px 16px; font:inherit; cursor:pointer; opacity:.9;
}
.postfach:hover{background:rgba(255,255,255,.10); opacity:1}
.postfach[aria-current="true"]{background:rgba(255,255,255,.18); opacity:1; border-left:3px solid var(--gold); padding-left:13px}
.postfach .zaehler{
  margin-left:auto; min-width:24px; text-align:center; font-size:11px; font-weight:700;
  border-radius:999px; padding:1px 7px; background:rgba(255,255,255,.18);
}
.postfach .zaehler.treffer{background:var(--gold); color:#3a2600}
/* Abgearbeitet (PAYCHECK-229). Heller Grund mit dunkelgruener Schrift -- die
   Seitenleiste ist dunkel, ein dunkles Gruen waere dort nicht zu lesen. */
.postfach .zaehler.fertig{background:var(--gruen-blass); color:var(--gruen)}

/* ---------- Der Weg ins App-Portal (PAYCHECK-371) ----------
   Eine weisse Kachel auf dem Cteam-Blau, in Form und Farben wie eine Kachel im
   App Store. Sie steht am Fuss der Leiste: `margin-top:auto` schiebt sie nach
   unten, egal wie viele Zeitraeume darueber stehen.

   Das Anheben steckt ausschliesslich in der :hover-Regel. Der Ruhezustand ist
   das Grundbild -- so vom Betreiber am 29.09.2026 an der Vorschau abgenommen;
   die Bewegung beim Ueberfahren ist dieselbe wie bei den Knoepfen auf
   ai-in-action.de und sagt nur: hier laesst sich klicken. */
.portal-karte{
  display:flex; align-items:center; gap:10px;
  margin:auto 12px 12px; padding:10px 12px;   /* oben auto: schiebt die Karte an den Fuss */
  background:var(--flaeche); border-radius:12px; text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
  transition:transform .15s, box-shadow .15s;
}
.portal-karte:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.30)}
/* Die Tastatur soll dieselbe Rueckmeldung bekommen wie die Maus. */
.portal-karte:focus-visible{outline:2px solid var(--marke-orange); outline-offset:2px}
.portal-karte img{flex:none; width:30px; height:30px}
.portal-text{display:flex; flex-direction:column; line-height:1.25; min-width:0}
/* Die Zierschrift ist allein der Wortmarke vorbehalten -- wie auf der Website. */
.portal-marke{font-family:'Contrail One', sans-serif; font-size:14px; color:var(--marke-blau)}
.portal-ziel{font-family:Commissioner, sans-serif; font-size:12px; font-weight:600; color:var(--marke-orange)}
.portal-pfeil{margin-left:auto; color:var(--marke-orange); font-size:16px; line-height:1}

.arbeitsflaeche{flex:1; display:flex; flex-direction:column; min-width:0}
.kopfzeile{
  display:flex; align-items:center; gap:12px; padding:12px 20px;
  background:var(--flaeche); border-bottom:1px solid var(--linie);
}
.benutzer-chip{
  margin-left:auto; display:flex; align-items:center; gap:8px; border:1px solid var(--linie);
  border-radius:999px; padding:4px 12px 4px 5px; font-size:13px;
}
.benutzer-chip .kreis{width:22px; height:22px; border-radius:50%; background:var(--blau-blass);
  border:1px solid var(--linie); display:grid; place-items:center; font-size:10px; font-weight:700; color:var(--blau)}
.inhalt{padding:20px; flex:1}

/* Ein Streifen fuer Hinweise, die in jedem Bereich ankommen muessen. Die
   Meldezeile im Einlese-Bereich taugt dafuer nicht: beim Sichten der Fehltage
   ist der ganze Bereich ausgeblendet. Normalerweise ist der Streifen nicht da
   -- einer, der immer steht, wird zum Moebelstueck und bald nicht mehr
   gelesen. */
.hinweis-streifen{
  display:none; padding:11px 20px; font-size:13px;
  background:var(--gold-blass); color:var(--gold-text);
  border-bottom:1px solid var(--gold);
}
.hinweis-streifen.sichtbar{display:block}
/* Meldungen zum Einlesen tragen im Streifen dieselben Farben wie unten an der
   Flaeche: gruen heisst geschafft, rot heisst nicht geschafft. Das Gold bleibt
   den Anmelde- und Berechtigungshinweisen vorbehalten -- die sind weder das
   eine noch das andere. */
.hinweis-streifen.gut{background:var(--gruen-blass); color:var(--gruen); border-bottom-color:var(--gruen-linie)}
.hinweis-streifen.fehler{background:var(--rot-blass); color:var(--rot); border-bottom-color:var(--rot-linie)}

.karte{background:var(--flaeche); border:1px solid var(--linie); border-radius:4px}
.karten-kopf{display:flex; align-items:flex-start; gap:12px; padding:16px 18px; flex-wrap:wrap}
.karten-kopf h2{font-size:16px}
/* flex-wrap seit PAYCHECK-202: mit dem zweiten Schalter stehen vier Elemente
   in dieser Zeile. Auf breitem Schirm aendert das nichts; auf schmalem
   rutscht der letzte Knopf in die naechste Zeile, statt hinauszuragen. */
.karten-kopf .knoepfe{margin-left:auto; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px}
/* Schieber statt Ankreuzfeld (PAYCHECK-179). Das Ankreuzfeld bleibt bestehen und
   traegt weiterhin die Aktion -- es wird nur unsichtbar gemacht und ueber :checked
   gestaltet. So bleiben Tastatur und Vorlesehilfen unveraendert; ein nachgebauter
   Schalter aus div-Elementen koennte das nicht. */
.schalter{display:flex; align-items:center; gap:8px; white-space:nowrap; cursor:pointer;
  color:var(--blau); font-weight:600; user-select:none}
.schalter input{position:absolute; width:1px; height:1px; opacity:0; margin:0}
.schalter .bahn{
  position:relative; flex:none; width:34px; height:19px; border-radius:999px;
  background:#cfd6e0; transition:background .15s ease;
}
.schalter .knauf{
  position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%;
  background:var(--flaeche); box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .15s ease;
}
.schalter input:checked + .bahn{background:var(--blau)}
.schalter input:checked + .bahn .knauf{transform:translateX(15px)}
.schalter input:focus-visible + .bahn{outline:2px solid var(--blau); outline-offset:2px}

table{width:100%; border-collapse:collapse}
th{
  text-align:left; font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  color:var(--gedaempft); font-weight:700; padding:8px 18px; border-bottom:1px solid var(--linie);
}
td{padding:11px 18px; border-bottom:1px solid var(--linie-hell)}
tr:last-child td{border-bottom:none}
tr.gruppe td{background:var(--blau-blass); font-weight:600; color:var(--blau); font-size:13px; padding:7px 18px}
td.rechts, th.rechts{text-align:right}

.leer{padding:44px 18px; text-align:center; color:var(--gedaempft)}

/* Die beiden Einlese-Karten nebeneinander (PAYCHECK-326).
   Vorher standen sie untereinander, und die Seite war um eine volle
   Kartenhoehe gewachsen, ohne dass der Inhalt das braucht -- jede Karte traegt
   nur eine Ablageflaeche und eine Meldezeile.

   Warum auto-fit mit Mindestbreite und keine eigene Bildschirmregel: So fallen
   die Karten von selbst untereinander, sobald keine zwei Spalten mehr
   hineinpassen -- etwa wenn die Seitenleiste und ein schmaler Schirm
   zusammenkommen. Das Stylesheet kennt sonst nur eine Regel fuer den Druck;
   eine zweite allein fuer diesen Fall waere mehr, als die Aufgabe braucht.

   Die gleiche Hoehe kommt vom Strecken, das ein Raster von sich aus tut. Sie
   wird hier NICHT festgeschrieben: Sobald eine der beiden Karten eine Meldung
   anzeigt, wachsen beide mit -- eine feste Hoehe wuerde die Meldung
   abschneiden. */
.einlese-flaechen{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:16px;
  margin-bottom:16px;
}

/* Bericht einlesen */
/* Die Flaeche ist selbst der Knopf (PAYCHECK-88). Warum ein <button> und kein
   <div>: nur so ist sie mit der Tabulatortaste erreichbar und laesst sich
   waehrend des Uploads sperren, damit derselbe Bericht nicht zweimal losgeht. */
.ablage{
  display:block; width:100%; font:inherit; color:inherit; cursor:pointer;
  border:2px dashed var(--linie); border-radius:4px; background:var(--papier);
  padding:16px 18px; text-align:center;
}
.ablage:hover:not(:disabled){border-color:var(--blau); background:var(--blau-blass)}
.ablage:focus-visible{outline:2px solid var(--blau); outline-offset:2px}
.ablage.aktiv{border-color:var(--blau); background:var(--blau-blass)}
.ablage:disabled{cursor:default; opacity:.75}
.ablage .haupt{display:block; font-size:14px}
.ablage .haupt b{font-weight:700}
.ablage .neben{display:block; font-size:12px; color:var(--gedaempft); margin-top:3px}
.ablage .laden{display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--blau); font-size:14px}

/* Waehrend des Einlesens: Kreisel und wandernder Balken. Beides sagt dasselbe,
   aber der Balken bleibt auch dann sichtbar, wenn die Flaeche schmal wird. */
.kreisel{
  width:16px; height:16px; flex:0 0 16px; border-radius:50%;
  border:2px solid var(--linie); border-top-color:var(--blau);
  animation:dreh .8s linear infinite;
}
@keyframes dreh{to{transform:rotate(360deg)}}
.balken{height:3px; background:var(--linie-hell); border-radius:2px; overflow:hidden; margin-top:10px}
.balken i{display:block; height:100%; width:40%; background:var(--blau); animation:wandern 1.1s ease-in-out infinite}
@keyframes wandern{0%{margin-left:-40%} 100%{margin-left:100%}}

/* Die Meldezeile. Sie bleibt stehen, bis die naechste Datei kommt -- vor
   PAYCHECK-86 wurde sie im Erfolgsfall geleert, und niemand sah, dass der
   Bericht angekommen war. */
.melde{margin-top:12px; padding:11px 14px; border-radius:4px; font-size:14px}
.melde.gut{background:var(--gruen-blass); color:var(--gruen); border:1px solid var(--gruen-linie)}
.melde.fehler{background:var(--rot-blass); color:var(--rot); border:1px solid var(--rot-linie)}
.kennzahlen{display:flex; gap:0; border-top:1px solid var(--linie-hell); flex-wrap:wrap}
.kennzahl{padding:14px 18px; border-right:1px solid var(--linie-hell); min-width:130px}
.kennzahl .wert{font-size:22px; font-weight:700}
.kennzahl .titel{font-size:12px; color:var(--gedaempft)}
.kennzahl .wert.treffer{color:var(--gold-text)}
/* Abgearbeitet (PAYCHECK-229): dieselbe Fundzahl, aber nichts mehr zu tun.
   Hier faerbt nur die Schrift -- die Kachel traegt keinen Hintergrund. */
.kennzahl .wert.fertig{color:var(--gruen)}


.jahr-titel{
  padding:10px 16px 4px; font-size:11px; font-weight:700; letter-spacing:.8px;
  opacity:.55;
}

tr.klickbar{cursor:pointer}
tr.klickbar:hover td{background:var(--blau-blass)}
tr.klickbar:hover td:first-child{box-shadow:inset 3px 0 0 var(--gold)}

/* Reiter je Mitarbeiter */
/* Die Zeile mit dem Schalter ueber der Reiterleiste (PAYCHECK-225). Sie sitzt
   zwischen Kartenkopf und Reitern; der Zaehler rutscht ans rechte Ende. */
.ma-filterzeile{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:2px 18px 12px;
}

.ma-reiter{
  display:flex; flex-wrap:wrap; gap:4px; padding:0 18px 12px;
  border-bottom:1px solid var(--linie);
}
.ma-reiter-knopf{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--flaeche); border:1px solid var(--linie); border-bottom:none;
  border-radius:4px 4px 0 0; padding:8px 12px; cursor:pointer;
  font:inherit; font-size:13px; color:var(--text);
}
.ma-reiter-knopf:hover{background:var(--blau-blass)}
.ma-reiter-knopf[aria-current="true"]{
  background:var(--blau); color:#fff; border-color:var(--blau); font-weight:600;
}
/* Die Reiter IN einer Person (PAYCHECK-527, Entwurf PAYCHECK-526):
   "Fehltage" und "Entgeltabrechnung". Unterstrichen statt als Kartenreiter,
   damit sie sich von den Mitarbeiter-Reitern darueber unterscheiden. */
/* Der Satz ueber der Kolonnenliste, wenn die Abrechnung fehlt oder
   ausgefallen ist (PAYCHECK-528). */
.hinweis-zeile{margin:0 18px 12px; padding:8px 12px; border-radius:4px;
  background:var(--gold-blass); color:var(--gold-text); border:1px solid var(--gold)}

.person-kopf{
  padding:14px 18px 6px; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
}
.person-reiter{display:flex; flex-wrap:wrap; gap:4px; padding:0 18px; border-bottom:1px solid var(--linie)}
.person-reiter-knopf{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; margin-bottom:-1px;
  background:none; border:0; border-bottom:3px solid transparent; cursor:pointer;
  font:inherit; font-weight:600; color:var(--gedaempft);
}
.person-reiter-knopf:hover{color:var(--blau)}
.person-reiter-knopf:focus-visible{outline:2px solid var(--blau); outline-offset:-2px}
.person-reiter-knopf[aria-current="true"]{color:var(--blau); border-bottom-color:var(--blau)}
.person-reiter-knopf .ma-zaehler.treffer{background:var(--gold); color:#3a2600}
.person-reiter-knopf .ma-zaehler.fertig{background:var(--gruen-blass); color:var(--gruen)}

.ma-zaehler{
  min-width:20px; text-align:center; font-size:11px; font-weight:700;
  border-radius:999px; padding:1px 6px; background:var(--linie-hell); color:var(--gedaempft);
}
.ma-zaehler.treffer{background:var(--gold); color:#3a2600}
/* Abgearbeitet: dieselbe Zahl, andere Aussage (PAYCHECK-229). Gruen wie die
   Pille "Erledigt" -- die Farbe muss ueberall dasselbe bedeuten. */
.ma-zaehler.fertig{background:var(--gruen-blass); color:var(--gruen); border:1px solid var(--gruen-linie)}
.ma-reiter-knopf[aria-current="true"] .ma-zaehler{background:rgba(255,255,255,.25); color:#fff}
.ma-reiter-knopf[aria-current="true"] .ma-zaehler.treffer{background:var(--gold); color:#3a2600}
.ma-reiter-knopf[aria-current="true"] .ma-zaehler.fertig{
  background:var(--gruen-blass); color:var(--gruen); border-color:var(--gruen-linie);
}

/* ---------- Reiterleiste des Pruefbereichs (PAYCHECK-407) ----------
   Zwei Sichten auf denselben Monat: Fehltage und Entgeltabrechnung.

   Der offene Reiter haengt an der Karte darunter. Das entsteht so: Sein
   unterer Rand ist in Flaechenfarbe gezeichnet und um einen Pixel nach unten
   geschoben, wodurch die Trennlinie der Leiste an dieser Stelle verdeckt
   wirkt. Damit dort nicht zwei Linien uebereinanderliegen, traegt die Karte
   darunter `oben-offen` und gar keinen oberen Rand. */
.reiterleiste{
  display:flex; flex-wrap:wrap; gap:4px;
  border-bottom:1px solid var(--linie);
}
.reiter{
  padding:11px 20px; border:1px solid transparent; border-bottom:0;
  border-radius:4px 4px 0 0; background:transparent; color:var(--gedaempft);
  font:inherit; font-weight:600; cursor:pointer;
}
.reiter:hover{background:var(--blau-blass); color:var(--blau)}
.reiter:focus-visible{outline:2px solid var(--blau); outline-offset:-2px}
.reiter[aria-current="true"]{
  border-color:var(--linie); border-bottom:1px solid var(--flaeche);
  margin-bottom:-1px; background:var(--flaeche); color:var(--blau); font-weight:700;
}
.karte.oben-offen{border-top:0; border-radius:0 0 4px 4px}

/* "keine" statt einer Null (PAYCHECK-407). Gruen wie die Pille "Erledigt" --
   die Farbe muss ueberall dasselbe bedeuten: hier ist nichts zu tun. Bei den
   Fehltagen steht an dieser Stelle noch das graue "keine"; beide
   gleichzuziehen ist nicht Sache dieses Tickets. */
.keine{color:var(--gruen); font-weight:600}

/* ---------- Reiter "Fehlende Personen" (PAYCHECK-429) ----------
   Zwei Listen untereinander, jede mit ihrer Ueberschrift. Die zweite bekommt
   eine Trennlinie nach oben -- ohne sie laesen sich die beiden Tabellen wie
   eine einzige. */
.personen-liste + .personen-liste{border-top:1px solid var(--linie)}
.personen-titel{
  margin:0; padding:16px 18px 8px;
  font-size:13px; font-weight:700; color:var(--text);
}

/* Der Knopf unter der Meldung "ein Beleg fehlt" (PAYCHECK-407). */
.leer-knopf{margin-top:16px}

/* Stunden lassen sich untereinander nur vergleichen, wenn die Ziffern gleich
   breit sind. */
td.zahl, th.zahl{text-align:right; font-variant-numeric:tabular-nums}
td.zahl.differenz{font-weight:700}

@media print{
  .seitenleiste,.kopfzeile,.knoepfe{display:none !important}
  .karte{border:none}
}

/* ==========================================================================
   STARTZUSTAND (PAYCHECK-47)
   Welcher Bildschirm zu sehen ist, entscheidet das Skript im Seitenkopf.
   Ohne Startklasse ist keiner zu sehen: lieber einen Wimpernschlag leer
   als einen Wimpernschlag falsch.
   ========================================================================== */
#bildschirm-meldung,
#bildschirm-app,
#bildschirm-laden          {display:none}
html.start-meldung #bildschirm-meldung {display:grid}
html.start-app     #bildschirm-app     {display:flex}
html.start-laden   #bildschirm-laden   {display:grid}

/* Die Ladeflaeche: nur zu sehen, solange nichts feststeht. Bewusst ohne Text --
   eine Meldung waere eine Behauptung ueber etwas, das gleich vorbei ist. */
#bildschirm-laden{min-height:100vh; place-items:center; padding:24px; background:var(--blau)}
#bildschirm-laden .abzeichen{background:rgba(255,255,255,.14); color:#fff}

/* ---------- Rueckfrage vor dem Loeschen (PAYCHECK-209) ----------
   Die erste Rueckfrage der Anwendung ueberhaupt. Sie liegt ueber allem und
   faengt den Klick daneben ab -- wer neben die Karte tippt, soll nicht aus
   Versehen den Knopf darunter treffen. */
.knopf-abstand{display:inline-block; width:14px}

.schleier{
  position:fixed; inset:0; z-index:60;
  background:rgba(20,28,40,.42);
  display:flex; align-items:center; justify-content:center;
}
.schleier.versteckt{display:none}

.rueckfrage{
  background:var(--flaeche); border-radius:6px; box-shadow:0 12px 32px rgba(0,0,0,.22);
  width:min(420px, 88vw); padding:22px;
}
.rueckfrage h3{margin:0 0 8px; font-size:16px}
.rueckfrage p{margin:0 0 18px; font-size:13px; color:#555}
.rueckfrage-knoepfe{display:flex; gap:8px; justify-content:flex-end}
/* Die Felder im Fenster "Vertragstyp aendern" (PAYCHECK-520) untereinander. */
.vt-felder{display:grid; gap:10px; margin:0 0 12px}
.vt-felder label{display:grid; gap:4px; font-size:13px}
/* Das Suchfeld im Bereich Stammdaten (PAYCHECK-522): ohne eigene Breite schnitt
   es "Personalnummer suchen" ab. */
#stammdaten-suche{width:16rem; max-width:100%; margin:0 0 12px}

/* Die Eingabezeile der Regelpflege (PAYCHECK-442).
   Eine Zeile, die bei zu wenig Platz umbricht statt zu schrumpfen: Ein
   Datumsfeld, dessen Kalendersymbol nicht mehr hineinpasst, ist unbedienbar.
   Die Felder tragen ihre Mindestbreite selbst, der Rest verteilt sich. */
.regel-eingabe{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px;
}
.regel-eingabe input, .regel-eingabe select{
  padding:9px 11px; border:1px solid var(--linie); border-radius:8px;
  font:inherit; color:inherit; background:#fff; min-width:0;
}
/* Land und Person sind Auswahllisten mit Namen (PAYCHECK-496/-497) --
   "Kroatien (HR)" passt nicht in die 84px des frueheren Zweizeichenfelds. */
.regel-eingabe #regel-land, .regel-eingabe #schreibweise-land{width:220px}
.regel-eingabe #ausnahme-pernr{flex:1 1 240px}
.regel-eingabe #regel-wert, .regel-eingabe #ausnahme-wert{width:120px}
.regel-eingabe #schreibweise-wort{flex:1 1 220px}
/* Die Kopfzeile, solange eine Regel bearbeitet wird (PAYCHECK-499): sie muss
   auffallen, damit eine Korrektur nicht wie eine Neuanlage aussieht. */
.bearbeitungs-kopf{
  margin-top:14px; padding:9px 12px; border-radius:8px;
  background:rgba(37,99,235,.08); border-left:3px solid var(--blau); font-weight:600;
}
.regel-eingabe input:disabled, .regel-eingabe select:disabled{background:#f3f4f6; cursor:not-allowed}
.regel-eingabe input:focus-visible, .regel-eingabe select:focus-visible{
  outline:2px solid var(--blau); outline-offset:1px;
}

/* Die Meldezeile je Karte -- dieselben Farben wie beim Hinweisstreifen, damit
   "gut" und "fehler" ueberall dasselbe bedeuten. */
#regel-meldung, #schreibweise-meldung, #ausnahme-meldung{margin-top:10px; min-height:1em}
#regel-meldung.gut, #schreibweise-meldung.gut, #ausnahme-meldung.gut{color:var(--gruen)}
#regel-meldung.fehler, #schreibweise-meldung.fehler, #ausnahme-meldung.fehler{color:var(--rot)}