/* Lohnuebergabe - Akzent und Sonderbausteine fuer den Bildschirm. Das gemeinsame Bild kommt aus firmen.css,
   der Ausdruck aus styles.css. Farben nur ueber die Variablen aus firmen.css. */
:root {
  --g: linear-gradient(135deg, #a78bfa 0%, #7c3aed 60%, #2e1065 120%);
  --accent: #7c3aed;
}

nav.tabs { flex-wrap: wrap; }
@media (max-width: 560px) {
  nav.tabs button { font-size: 13px; padding: 10px 2px; }
}
.muster { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); font-weight: 600; font-size: 14px; }
#gError { margin-bottom: 10px; }
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.kopf h3 { min-width: 0; overflow-wrap: anywhere; }
.abweichung { color: var(--warn); font-weight: 600; }
p.abweichung { margin-top: 8px; }
.liste { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 8px; }
.liste li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
.liste li > span:first-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; flex: 1; }
.liste li form { display: flex; gap: 6px; align-items: center; flex: none; }
.liste li input { width: 9em; min-width: 0; }
.badge.offen { color: var(--warn); }
.badge.hat { color: var(--ok); }
.badge.aus { color: var(--muted); }
#monatWahl { margin-top: 4px; }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tabelle { overflow-x: auto; margin-top: 10px; }
table.ueb { border-collapse: collapse; font-size: 13px; min-width: 100%; }
table.ueb th, table.ueb td { padding: 6px 8px; border-top: 1px solid var(--border); text-align: left; font-weight: 400; white-space: nowrap; }
table.ueb th { font-weight: 600; color: var(--muted); font-size: 12px; }
table.ueb td.zahl, table.ueb th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.ueb tr.summe td { font-weight: 700; border-top: 2px solid var(--border-stark); }
table.ueb td.name { white-space: normal; min-width: 10em; overflow-wrap: anywhere; }
button:disabled { opacity: .5; cursor: default; }   /* wie Besucherliste: firmen.css kennt keinen gesperrten Knopf (Sichtprobe M2) */
/* Reiter Senden (I91 M2) */
.card > form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.card > form input { flex: 1; min-width: 10em; max-width: 26em; }
.card > form input[name="code"] { flex: none; width: 7em; min-width: 0; letter-spacing: 2px; }
.card > button.klein { margin-top: 8px; }
.card h4 { margin-top: 18px; }      /* Meldungen der Automatik (I91 M3) */
table.kv td.text { word-break: normal; }   /* Befund: Woerter ganz lassen (break-all gilt fuer SHA-256) */
table.kv { border-collapse: collapse; font-size: 14px; margin-top: 10px; }
table.kv th { text-align: left; font-weight: 600; color: var(--muted); padding: 4px 14px 4px 0; vertical-align: top; }
table.kv td { padding: 4px 0; overflow-wrap: anywhere; word-break: break-all; }