/* =====================================================================
   NEXPERTO Insights - Design
   ---------------------------------------------------------------------
   Die Farben stammen aus dem offiziellen Logo (NexpertoLogo_2024_RGB_Claim
   aus dem Markenportal). Es enthaelt genau vier Farben:

     #0B71B9  Blau        Bildmarke, Primaerfarbe
     #32A2DB  Hellblau    Bildmarke, Akzent
     #E72F2A  Rot         Bildmarke, nur Signal und Flaeche
     #575757  Grau        Wortmarke und Claim

   Manche Farbe steht zweimal drin. Nicht jede traegt Text: Gemessen gegen
   Weiss erreicht Hellblau nur 2,87:1 und Rot 4,34:1 - beides zu wenig fuer
   Fliesstext. Fuer sie gibt es abgedunkelte Textvarianten, derselbe Ton
   dunkler. Die Marke bleibt erkennbar, der Text lesbar.

   Gruen und Orange gehoeren nicht zur Marke. Eine Ampel braucht sie
   trotzdem; gewaehlt sind gedeckte Toene, die neben Blau und Rot nicht
   schreien.

   Dieselben Werte stehen noch einmal in `app/web/marke.py` - eine Mail kann
   kein Stylesheet laden. Wer hier etwas aendert, aendert es dort mit.
   ===================================================================== */

:root {
  /* Markenfarben, unveraendert aus dem Logo */
  --blau: #0B71B9;
  --hellblau: #32A2DB;
  --rot-signal: #E72F2A;
  --grau: #575757;

  /* Abgeleitete Toene */
  --blau-dunkel: #08548A;
  --blau-hell: #2A89BA;
  --hellblau-blass: #EAF5FB;
  --hellblau-rand: #BCE0F2;
  --hellblau-text: #2579A4;
  --rot: #C42723;              /* textsicher, 5,74:1 */
  --rot-blass: #FCECEB;

  /* Signalfarben ausserhalb der Marke */
  --gruen: #16794C;
  --gruen-blass: #E7F5EE;
  --gelb: #B85C00;             /* textsicher, 4,60:1 - Farbton 30 Grad */
  --gelb-signal: #E8760D;      /* nur Flaechen und Balken */
  --gelb-blass: #FCF0E4;

  /* Neutrale Toene - im Grau der Wortmarke, ohne Blaustich */
  --text: #333333;
  --text-gedaempft: #575757;
  --text-blass: #8A8A8A;
  --rand: #E4E4E4;
  --rand-stark: #CBCBCB;
  --flaeche: #ffffff;
  --flaeche-grau: #F5F6F7;
  --hintergrund: #EFF1F3;

  --radius: 14px;
  --radius-klein: 9px;
  --schatten-xs: 0 1px 2px rgba(40, 40, 40, .05);
  --schatten: 0 1px 3px rgba(40, 40, 40, .06), 0 4px 12px rgba(40, 40, 40, .05);
  --schatten-hoch: 0 4px 10px rgba(40, 40, 40, .08), 0 14px 34px rgba(40, 40, 40, .10);
  --ueberblende: .18s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--hintergrund);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--blau); text-decoration-color: var(--hellblau-rand); text-underline-offset: 2px; }
a:hover { color: var(--hellblau); }

/* =====================================================================
   Kopfzeile
   ===================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 3.25rem;
  padding: 0 1.5rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  color: var(--text);
  flex-wrap: wrap;
  box-shadow: 0 1px 3px rgba(40, 40, 40, .06);
}

/* Das Logo steht auf hellem Grund - so, wie es im Markenportal vorliegt.
   Eine Negativfassung fuer dunklen Grund liegt uns nicht vor, und die
   Wortmarke selbst einzufaerben waere ein Eingriff ins Logo. */
/* Kein Link: Die Marke ist eine Angabe, kein Bedienelement - ein Klick
   darauf wuerde nur Erwartungen wecken, die die Kopfzeile schon erfuellt. */
.brand { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; }
.brand img { height: 30px; width: auto; display: block; }
.brand .anwendung {
  font-size: .82rem; font-weight: 700; color: var(--blau);
  text-transform: uppercase; letter-spacing: .12em;
  padding-left: .8rem; border-left: 1px solid var(--rand-stark);
  white-space: nowrap;
}

.topbar nav { display: flex; gap: .15rem; flex: 1; flex-wrap: wrap; }
.topbar nav a {
  color: var(--text-gedaempft); text-decoration: none;
  padding: .95rem .8rem; font-size: .93rem; font-weight: 500;
  border-bottom: 3px solid transparent;
  display: flex; align-items: center; gap: .4rem;
  transition: color var(--ueberblende), background var(--ueberblende);
}
.topbar nav a:hover { color: var(--blau); background: var(--flaeche-grau); }
.topbar nav a.aktiv { color: var(--blau); border-bottom-color: var(--blau); font-weight: 600; }

.topbar .user {
  display: flex; align-items: center; gap: .9rem;
  color: var(--text-gedaempft); font-size: .88rem;
}
.topbar .user form { margin: 0; }
.topbar .user .linklike { color: var(--text-gedaempft); }
.topbar .user .linklike:hover { color: var(--blau); }

.badge {
  background: var(--hellblau); color: #fff; border-radius: 20px;
  padding: .05rem .48rem; font-size: .75rem; font-weight: 700; line-height: 1.5;
}

main { max-width: 1300px; margin: 0 auto; padding: 1.9rem 1.5rem 4rem; }

/* =====================================================================
   Überschriften & Seitenkopf
   ===================================================================== */

h1 { font-size: 1.65rem; margin: 0 0 .3rem; color: var(--blau); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.2rem; margin: 2.2rem 0 .85rem; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: .82rem; margin: 1.3rem 0 .55rem; color: var(--text-gedaempft);
     text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

.seitenkopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.erklaerung { color: var(--text-gedaempft); margin: .2rem 0 0; font-size: .92rem; }
.stichtag-notiz { font-weight: 400; color: var(--text-gedaempft); font-size: .95rem; }

/* =====================================================================
   Kacheln (Kennzahlen)
   ===================================================================== */

.kacheln { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.kachel {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten-xs);
  padding: 1.05rem 1.4rem; min-width: 175px;
  color: var(--text-gedaempft); font-size: .88rem;
  position: relative; overflow: hidden;
}
.kachel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--hellblau);
}
.kachel .zahl {
  display: block; font-size: 1.95rem; font-weight: 700; color: var(--blau);
  line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.kachel.warnung::before { background: var(--gelb); }
.kachel.warnung .zahl { color: var(--gelb); }

/* Klickbare Kachel: führt zur Aufschlüsselung der Einzelgeräte */
a.kachel.klickbar {
  text-decoration: none; display: block; cursor: pointer;
  transition: box-shadow var(--ueberblende), transform var(--ueberblende), border-color var(--ueberblende);
}
a.kachel.klickbar:hover {
  box-shadow: var(--schatten-hoch); border-color: var(--hellblau-rand);
  transform: translateY(-2px);
}
.kachel-titel { display: block; margin-top: .15rem; color: var(--text); font-weight: 500; }
.kachel-hinweis {
  display: block; margin-top: .5rem; font-size: .8rem;
  color: var(--hellblau); font-weight: 600; opacity: 0;
  transform: translateX(-4px); transition: opacity var(--ueberblende), transform var(--ueberblende);
}
a.kachel.klickbar:hover .kachel-hinweis { opacity: 1; transform: translateX(0); }

/* =====================================================================
   Kundenkacheln (Übersicht)
   ===================================================================== */

.kartengitter {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten-xs);
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .7rem;
  transition: box-shadow var(--ueberblende), border-color var(--ueberblende), transform var(--ueberblende);
}
.karte:hover { box-shadow: var(--schatten); border-color: var(--rand-stark); transform: translateY(-2px); }
.karte.inaktiv { opacity: .58; }
.karte.markiert { border-color: var(--hellblau); box-shadow: 0 0 0 2px var(--hellblau-blass); }

.karte-kopf { display: flex; align-items: flex-start; gap: .6rem; }
.karte-kopf input[type=checkbox] { margin-top: .25rem; flex-shrink: 0; }
.karte-titel { flex: 1; min-width: 0; }
.karte-titel a {
  font-weight: 650; font-size: 1.02rem; text-decoration: none; color: var(--text);
  display: block; overflow-wrap: anywhere;
}
.karte-titel a:hover { color: var(--blau); }
.karte-titel small { color: var(--text-blass); font-size: .82rem; }

.karte-inhalt { display: flex; flex-wrap: wrap; gap: .4rem; }
.karte-fuss {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--rand); padding-top: .65rem; margin-top: auto;
  font-size: .82rem; color: var(--text-gedaempft);
}
.karte-fuss a { font-weight: 600; text-decoration: none; }

/* Bestands-Chip, z.B. "12 Access Point" */
.chip {
  display: inline-flex; align-items: baseline; gap: .32rem;
  background: var(--hellblau-blass); color: var(--blau-dunkel);
  border: 1px solid var(--hellblau-rand);
  border-radius: 20px; padding: .12rem .62rem; font-size: .82rem;
}
.chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.chip.leer { background: var(--flaeche-grau); color: var(--text-blass); border-color: var(--rand); }

/* =====================================================================
   Quellen-Tags (Herkunft eines Mandanten/Assets)
   ===================================================================== */

.quelle-tag {
  display: inline-flex; align-items: center;
  padding: .1rem .5rem; border-radius: 6px;
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--flaeche-grau); color: var(--text-gedaempft);
  border: 1px solid var(--rand);
}
.quelle-tag.gross { font-size: .95rem; padding: .28rem .8rem; border-radius: 8px; text-transform: none; letter-spacing: 0; }
/* Wiedererkennbare Farbe je Quelle */
.quelle-tag.q-unifi      { background: #e9f6fd; color: #0067a3; border-color: #b8e3f5; }
.quelle-tag.q-ninja      { background: #eef3ea; color: #4a6a2a; border-color: #d3e3c4; }
.quelle-tag.q-watchguard { background: #fdeaea; color: #b3121c; border-color: #f3c4c4; }
.quelle-tag.q-mailstore  { background: #f0edfa; color: #4b3b8f; border-color: #d6cdf0; }

/* Quellen-Block in der Kundenansicht */
.quellen-block { margin-bottom: 1.6rem; }
.quellen-kopf {
  display: flex; align-items: center; gap: .8rem;
  padding-bottom: .6rem; margin-bottom: .9rem;
  border-bottom: 2px solid var(--rand);
}
.quelle-alle { font-size: .85rem; font-weight: 600; text-decoration: none; }

/* =====================================================================
   Tabellen
   ===================================================================== */

.tabellen-rahmen {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten-xs);
  overflow-x: auto; margin-bottom: 1.3rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: .62rem .9rem; text-align: left; }
thead th {
  background: var(--flaeche-grau); font-weight: 700; font-size: .78rem;
  color: var(--text-gedaempft); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--rand); white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--rand); transition: background var(--ueberblende); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--hellblau-blass); }
tbody tr.inaktiv td:not(.auswahl) { opacity: .55; }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.auswahl, th.auswahl { width: 2.5rem; text-align: center; }
td.meldung { font-size: .85rem; color: var(--text-gedaempft); white-space: pre-line; max-width: 34ch; }
td.aktionen-spalte { text-align: right; white-space: nowrap; }

code {
  background: var(--flaeche-grau); padding: .1rem .38rem;
  border-radius: 5px; font-size: .85em; color: var(--text-gedaempft);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* =====================================================================
   Status & Hinweise
   ===================================================================== */

.status {
  font-size: .76rem; padding: .16rem .6rem; border-radius: 20px;
  background: var(--flaeche-grau); color: var(--text-gedaempft);
  font-weight: 700; white-space: nowrap; display: inline-block;
}
.status.success, .status.aktiv { background: var(--gruen-blass); color: var(--gruen); }
.status.partial { background: var(--gelb-blass); color: var(--gelb); }
.status.failed  { background: var(--rot-blass); color: var(--rot); }
.status.running { background: var(--hellblau-blass); color: var(--blau); }

.hinweis {
  padding: .75rem 1.05rem; border-radius: var(--radius-klein); margin-bottom: 1.3rem;
  border: 1px solid; border-left-width: 4px; font-size: .92rem;
}
.hinweis.erfolg  { background: var(--gruen-blass); border-color: var(--gruen); color: var(--gruen); }
.hinweis.fehler  { background: var(--rot-blass); border-color: var(--rot); color: var(--rot); }
.hinweis.warnung { background: var(--gelb-blass); border-color: var(--gelb); color: var(--gelb); }
.hinweis.info    { background: var(--hellblau-blass); border-color: var(--hellblau); color: var(--blau-dunkel); }
.hinweis a { color: inherit; }

.leer-hinweis {
  background: var(--flaeche); border: 1px dashed var(--rand-stark);
  border-radius: var(--radius); padding: 2.75rem 1.5rem; text-align: center;
  color: var(--text-gedaempft);
}
.leer-symbol {
  width: 3rem; height: 3rem; margin: 0 auto .8rem; border-radius: 50%;
  background: var(--gruen-blass); color: var(--gruen);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}

/* =====================================================================
   Formulare
   ===================================================================== */

fieldset {
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche); margin-bottom: 1.3rem; padding: 1.2rem 1.35rem;
  box-shadow: var(--schatten-xs);
}
legend { font-weight: 700; padding: 0 .45rem; color: var(--blau); font-size: .95rem; }

label { display: block; margin-bottom: 1rem; font-size: .9rem; font-weight: 600; }
label small { display: block; font-weight: 400; color: var(--text-gedaempft); margin-top: .25rem; }
label.zeile { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
label.zeile input { width: auto; margin: 0; }

input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=search], input[type=file], select, textarea {
  display: block; width: 100%; max-width: 480px; margin-top: .3rem;
  padding: .55rem .7rem; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  font-size: .95rem; font-family: inherit; background: #fff; color: var(--text);
  transition: border-color var(--ueberblende), box-shadow var(--ueberblende);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--hellblau);
  box-shadow: 0 0 0 3px var(--hellblau-blass);
}
textarea { min-height: 5rem; resize: vertical; }
input[type=checkbox], input[type=radio] {
  width: 1.1rem; height: 1.1rem; accent-color: var(--blau); cursor: pointer;
}

button, .button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem; border: 1px solid var(--blau);
  background: var(--blau); color: #fff; border-radius: var(--radius-klein); cursor: pointer;
  font-size: .9rem; font-family: inherit; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background var(--ueberblende), border-color var(--ueberblende), transform var(--ueberblende);
}
button:hover, .button:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); color: #fff; }
button:active, .button:active { transform: translateY(1px); }

button.sekundaer, .button.sekundaer {
  background: var(--flaeche); color: var(--blau); border-color: var(--rand-stark);
}
button.sekundaer:hover, .button.sekundaer:hover { background: var(--flaeche-grau); color: var(--blau); border-color: var(--hellblau-rand); }

button.gefahr, .button.gefahr { background: var(--rot); border-color: var(--rot); }
button.gefahr:hover { background: #b8000c; border-color: #b8000c; }

button.klein, .button.klein { padding: .35rem .7rem; font-size: .82rem; }

button.linklike {
  background: none; border: none; color: inherit; padding: 0;
  text-decoration: underline; font-weight: 400;
}
button.linklike:hover { background: none; color: #fff; }

button:disabled { opacity: .5; cursor: not-allowed; }

.aktionen { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.aktionen form { margin: 0; }

/* Werkzeugleiste über Listen: Suche, Filter, Ansichtswechsel */
.werkzeugleiste {
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten-xs);
  padding: .8rem 1.05rem; margin-bottom: 1.3rem;
}
.werkzeugleiste form { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0; }
.werkzeugleiste input[type=search] { margin-top: 0; min-width: 260px; }
.werkzeugleiste label { margin-bottom: 0; }
.werkzeugleiste .trenner { flex: 1; }

.inline-form {
  display: flex; gap: .9rem; align-items: flex-end; flex-wrap: wrap;
  background: var(--flaeche); padding: 1.15rem 1.3rem;
  border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten-xs);
}
.inline-form label { margin-bottom: 0; }
.inline-form input { margin-top: .3rem; }

/* Umschalter Auto/Kacheln/Liste */
.ansicht-wechsel { display: flex; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); overflow: hidden; }
.ansicht-wechsel a {
  padding: .45rem .85rem; font-size: .85rem; text-decoration: none; font-weight: 600;
  color: var(--text-gedaempft); background: var(--flaeche);
  border-right: 1px solid var(--rand);
}
.ansicht-wechsel a:last-child { border-right: none; }
.ansicht-wechsel a.aktiv { background: var(--blau); color: #fff; }

/* Leiste für Massenaktionen, erscheint bei Auswahl */
.massenleiste {
  display: none; gap: .6rem; align-items: center; flex-wrap: wrap;
  background: var(--hellblau-blass); border: 1px solid var(--hellblau-rand);
  border-radius: var(--radius-klein); padding: .7rem 1.05rem; margin-bottom: 1rem;
}
.massenleiste.sichtbar { display: flex; }
.massenleiste .anzahl { font-weight: 700; color: var(--blau-dunkel); }

/* =====================================================================
   Zuordnungs-Vorschläge
   ===================================================================== */

.vorschlag-block { margin-bottom: 2rem; }
.vorschlag-block h2 { display: flex; align-items: center; gap: .6rem; }
.block-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--blau); color: #fff; font-size: .9rem; font-weight: 700;
}

.vorschlag-gitter {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.vorschlag-karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten-xs);
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .85rem;
  transition: box-shadow var(--ueberblende), border-color var(--ueberblende);
}
.vorschlag-karte:hover { box-shadow: var(--schatten); border-color: var(--rand-stark); }
.vorschlag-karte form { margin: 0; display: flex; flex-direction: column; gap: .85rem; }

.vorschlag-ziel { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.ziel-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-blass); font-weight: 700;
}
.vorschlag-ziel strong { font-size: 1.05rem; color: var(--text); }
.score-pill {
  margin-left: auto; background: var(--gruen-blass); color: var(--gruen);
  font-size: .76rem; font-weight: 700; padding: .12rem .55rem; border-radius: 20px;
}

.vorschlag-mandanten { display: flex; flex-direction: column; gap: .4rem; }
.mandant-chip {
  display: flex; align-items: center; gap: .55rem;
  background: var(--flaeche-grau); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); padding: .4rem .6rem; font-size: .9rem;
}

/* Abwaehlbare Quelle in einem Vorschlag: angehakt = wird zugeordnet.
   Abgewaehltes tritt sichtbar zurueck, damit vor dem Bestaetigen klar ist,
   was uebrig bleibt. */
.mandant-chip.auswaehlbar {
  cursor: pointer; margin: 0; font-weight: 400;
  transition: border-color var(--ueberblende), background var(--ueberblende),
              opacity var(--ueberblende);
}
.mandant-chip.auswaehlbar:hover { border-color: var(--hellblau-rand); }
.mandant-chip.auswaehlbar input[type="checkbox"] { margin: 0; flex: none; }
.mandant-chip.auswaehlbar:has(input[type="checkbox"]:not(:checked)) {
  opacity: .5; text-decoration: line-through; background: transparent;
}

.vorschlag-aktion { display: flex; gap: .5rem; }
.vorschlag-aktion button { width: 100%; justify-content: center; }

/* Einzelzuordnung (Rest) */
.zuordnung-zeile {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); box-shadow: var(--schatten-xs);
  padding: .8rem 1.05rem; margin-bottom: .6rem;
}
.zuordnung-zeile > .kennung { flex: 1; min-width: 220px; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.zuordnung-zeile small { color: var(--text-blass); font-size: .82rem; }
.zuordnung-zeile form { display: flex; gap: .5rem; align-items: center; margin: 0; }
.zuordnung-zeile select { width: auto; min-width: 220px; margin-top: 0; }

/* =====================================================================
   Modulkarten
   ===================================================================== */

.modul-karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten-xs);
  padding: 1.15rem 1.3rem; margin-bottom: 1rem;
  border-left: 4px solid var(--rand-stark);
}
.modul-karte.ist-aktiv { border-left-color: var(--hellblau); }
.modul-kopf { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.modul-kopf h2 { margin: 0; font-size: 1.12rem; }
.kurzinfo {
  display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem;
  margin: .9rem 0; font-size: .9rem;
}
.kurzinfo dt { color: var(--text-gedaempft); }
.kurzinfo dd { margin: 0; }

/* =====================================================================
   Verlaufsdiagramm (serverseitig erzeugtes SVG)
   ===================================================================== */

.diagramm-rahmen {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten-xs);
  padding: 1.3rem; margin-bottom: 1.3rem; overflow-x: auto;
}
.diagramm { width: 100%; height: auto; min-width: 520px; display: block; }

.diagramm-legende {
  display: flex; flex-wrap: wrap; gap: .5rem 1.3rem;
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--rand);
  font-size: .87rem; color: var(--text-gedaempft);
}
.legende-eintrag { display: inline-flex; align-items: center; gap: .4rem; }
.legende-farbe { width: .85rem; height: .3rem; border-radius: 2px; display: inline-block; }

/* Rohdaten-Anzeige (Diagnose der Kundenquelle) */
pre.rohdaten {
  background: #0f2233; color: #d6e4f0;
  border: 1px solid var(--blau-dunkel); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; overflow-x: auto; margin-bottom: 1.3rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  max-height: 32rem;
}

/* Zusatzfelder in der Aufschlüsselung */
td.details { font-size: .82rem; color: var(--text-gedaempft); max-width: 40ch; }
.detail-paar { display: inline-block; margin: 0 .5rem .2rem 0; white-space: nowrap; }
.detail-paar span { color: var(--blau); font-weight: 600; text-transform: capitalize; }
.detail-paar span::after { content: ":"; }

/* =====================================================================
   Anmeldung
   ===================================================================== */

.login-box {
  max-width: 390px; margin: 9vh auto; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 2.4rem; box-shadow: var(--schatten-hoch);
  border-top: 4px solid var(--blau);
}
.login-box h1 { text-align: center; margin-bottom: 1.8rem; font-size: 1.45rem; }
.login-box h1 span { color: var(--hellblau); }
.login-box button { width: 100%; justify-content: center; margin-top: .5rem; }
.login-box input { max-width: none; }


/* ============================================================
   Zuordnungsseite: Reiter, Sammelleiste, Schnellwahl
   ============================================================ */

.reiter-leiste {
  display: flex; gap: .25rem; margin: 1.2rem 0 1rem;
  border-bottom: 2px solid var(--rand);
}
.reiter {
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; padding: .6rem .9rem; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--text-blass);
  display: flex; align-items: center; gap: .5rem;
  transition: color var(--ueberblende), border-color var(--ueberblende);
}
.reiter:hover { color: var(--text); }
.reiter.aktiv { color: var(--blau); border-bottom-color: var(--blau); }
.reiter-zahl {
  background: var(--flaeche-grau); border-radius: 999px;
  padding: .1rem .5rem; font-size: .8rem; font-weight: 600;
}
.reiter.aktiv .reiter-zahl { background: var(--hellblau-blass); color: var(--blau); }

/* Ohne JavaScript bleiben beide Abschnitte sichtbar. Erst wenn die
   Reiterlogik greift, wird umgeschaltet. */
body.hat-reiter .reiter-inhalt { display: none; }
body.hat-reiter .reiter-inhalt.aktiv { display: block; }

.sammelleiste {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--flaeche-grau); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); padding: .6rem .8rem; margin: .8rem 0;
  position: sticky; top: 0; z-index: 5;
}
.sammelleiste.unten { position: static; }
.alle-waehlen {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  font-weight: 600; cursor: pointer;
}
.auswahl-zahl { color: var(--text-blass); font-size: .9rem; margin-right: auto; }

/* Kopfzeile einer Vorschlagskarte ist zugleich das Auswahlfeld. */
.vorschlag-ziel.waehlbar {
  display: flex; align-items: center; gap: .6rem; cursor: pointer; margin: 0;
}
.vorschlag-ziel.waehlbar input[type="checkbox"] { margin: 0; flex: none; }
.ziel-text { display: flex; flex-direction: column; gap: .1rem; margin-right: auto; }
.ziel-text small { color: var(--text-blass); }
.vorschlag-karte.markiert {
  border-color: var(--blau);
  box-shadow: 0 0 0 1px var(--blau) inset;
}

/* Einzelzuordnung */
.zuordnung-formular { display: flex; flex-direction: column; gap: .4rem; }
.zuordnung-eingabe { display: flex; gap: .4rem; }
.zuordnung-eingabe input[type="text"] { min-width: 16rem; }
.schnellwahl { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip-knopf {
  background: var(--flaeche-grau); border: 1px solid var(--rand);
  border-radius: 999px; padding: .2rem .6rem; font-size: .82rem;
  cursor: pointer; font-family: inherit; color: var(--text);
  transition: border-color var(--ueberblende), background var(--ueberblende);
}
.chip-knopf:hover { border-color: var(--hellblau-rand); background: var(--hellblau-blass); }
.chip-wert { color: var(--text-blass); }


/* ============================================================
   Vertragsuebersicht
   ============================================================ */

/* Kacheln, die zugleich Filter sind. */
a.kachel { text-decoration: none; color: inherit; }
a.kachel:hover { border-color: var(--hellblau-rand); }
.kachel.markiert { border-color: var(--blau); box-shadow: 0 0 0 1px var(--blau) inset; }

.filterleiste { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 .6rem; }
.filterleiste input[type="search"] { min-width: 20rem; }

.art-filter { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.art-filter .chip-knopf { text-decoration: none; display: inline-block; }
.art-filter .chip-knopf.aktiv {
  background: var(--hellblau-blass); border-color: var(--blau); color: var(--blau);
  font-weight: 600;
}

table.vertraege td { vertical-align: top; }
table.vertraege td small { display: block; color: var(--text-blass); font-size: .8rem; }
table.vertraege .blass { color: var(--text-blass); }
table.vertraege tr.zeile-warnung td { background: var(--warn-blass, #fff8e6); }

.marke {
  display: inline-block; border-radius: 999px; padding: .05rem .45rem;
  font-size: .75rem; background: var(--flaeche-grau); border: 1px solid var(--rand);
  color: var(--text-blass); white-space: nowrap;
}
.marke.warnung { background: #fff2cc; border-color: #e0b400; color: #7a5c00; }

.artikelsicht {
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  padding: .6rem .8rem; margin-bottom: 1rem; background: var(--flaeche-grau);
}
.artikelsicht summary { cursor: pointer; }
.artikelsicht table { margin-top: .8rem; background: #fff; }
table .num { text-align: right; white-space: nowrap; }

table.vertraege td small.abweichend { color: var(--text-blass); font-style: italic; }


/* ============================================================
   Dynamische Tabellen: Spaltenauswahl und PDF-Export
   ============================================================ */

/* Werkzeugleiste über einer Liste: Anzahl links, Auswahlklappen rechts. */
.listen-werkzeuge {
  display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin: 1rem 0 .7rem;
}
.listen-werkzeuge > .erklaerung { margin: 0; margin-right: auto; }

.spaltenwahl {
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--flaeche); box-shadow: var(--schatten-xs);
}
.spaltenwahl > summary {
  cursor: pointer; padding: .4rem .8rem; font-size: .88rem; font-weight: 600;
  white-space: nowrap; border-radius: var(--radius-klein);
  transition: background var(--ueberblende);
}
.spaltenwahl > summary:hover { background: var(--hellblau-blass); }
.spaltenwahl[open] {
  /* Geöffnet über die volle Breite, sonst passen die Kästchen nicht daneben. */
  flex-basis: 100%; padding-bottom: .3rem;
}
.spaltenwahl[open] > summary { border-bottom: 1px solid var(--rand); border-radius: 0; }
.spaltenwahl form { margin: 0; padding: .7rem .8rem .2rem; }

/* Mehrspaltig, damit auch 26 Felder ohne Scrollen überblickbar bleiben. */
.spaltenliste {
  display: grid; gap: .15rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.spaltenfeld {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .45rem;
  align-items: baseline; margin: 0; padding: .18rem .3rem;
  border-radius: var(--radius-klein); cursor: pointer; font-size: .9rem;
}
.spaltenfeld:hover { background: var(--flaeche-grau); }
.spaltenfeld input { margin: 0; }
.spaltenfeld .spaltenname { font-weight: 500; }
.spaltenfeld small {
  grid-column: 2; color: var(--text-blass); font-size: .78rem; line-height: 1.25;
}

.spaltenwahl-fuss {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--rand);
}
.spaltenwahl-fuss .erklaerung { margin: 0; font-size: .82rem; }

/* Der PDF-Knopf ist eine Ausgabe, keine Filtereinstellung - farblich abgesetzt. */
.pdf-wahl > summary { color: var(--blau); }

/* =====================================================================
   Technikerauslastung
   ---------------------------------------------------------------------
   Neun Spalten sind viel. Drei Entscheidungen halten sie beisammen:

   * **Gruppierte Kopfzeile** - oben die Kategorie, darunter nur die Einheit.
     "Ticketzeit nicht abrechenbar h" als eine Zeile waere unlesbar.
   * **Der Name bleibt beim Scrollen stehen** (sticky erste Spalte). Ohne ihn
     ist eine Zahl weit rechts niemandem mehr zuzuordnen.
   * **Unter 900 px wird jede Zeile eine Karte.** Die Beschriftung kommt aus
     `data-spalte` - deshalb steht sie im Template an jeder Zelle.
   ===================================================================== */

.tabellen-rahmen {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

table.auslastung { min-width: 780px; }

table.auslastung thead th {
  background: var(--flaeche-grau);
  font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-gedaempft); font-weight: 700;
  padding: .5rem .75rem; white-space: nowrap;
}
table.auslastung thead tr.gruppen th.gruppe {
  text-align: center; border-left: 1px solid var(--rand); border-right: 1px solid var(--rand);
  color: var(--blau);
}
table.auslastung thead tr.einheiten th { padding-top: 0; font-size: .7rem; }
table.auslastung thead tr.gruppen th[rowspan] { vertical-align: bottom; }

table.auslastung tbody tr:nth-child(even) { background: rgba(18, 42, 66, .018); }
table.auslastung tbody tr:hover { background: var(--hellblau-blass); }

table.auslastung td, table.auslastung tbody th { padding: .55rem .75rem; }

/* Der Mitarbeitername bleibt beim seitlichen Scrollen stehen. */
table.auslastung th.spalte-name {
  position: sticky; left: 0; z-index: 2;
  text-align: left; font-weight: 600; white-space: nowrap;
  vertical-align: top;
  background: var(--flaeche);
  box-shadow: 1px 0 0 var(--rand);
}
table.auslastung thead th.spalte-name { z-index: 3; background: var(--flaeche-grau); }
table.auslastung tbody tr:nth-child(even) th.spalte-name { background: #f8fafc; }
table.auslastung tbody tr:hover th.spalte-name { background: var(--hellblau-blass); }
table.auslastung tfoot th.spalte-name { background: var(--flaeche-grau); }

table.auslastung tfoot th, table.auslastung tfoot td {
  background: var(--flaeche-grau); font-weight: 700;
  border-top: 2px solid var(--rand-stark); padding: .6rem .75rem;
}

.stundenwert { font-variant-numeric: tabular-nums; }

/* --- Quote: Zahl mit schlankem Balken darunter ---------------------------- */

.quote { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; min-width: 4.4rem; }
.quote-wert { font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1.2; }

.quote-balken {
  position: relative; width: 100%; height: 4px;
  background: var(--flaeche-grau); border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--rand);
}
.quote-balken span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }

.gruen   { color: var(--gruen); }
.orange  { color: var(--gelb); }
.rot     { color: var(--rot); }
.neutral { color: var(--text-blass); }

.quote-balken span.gruen   { background: var(--gruen); }
.quote-balken span.orange  { background: var(--gelb-signal); }
.quote-balken span.rot     { background: var(--rot); }
.quote-balken span.neutral { background: var(--rand-stark); }

.kachel .zahl.gruen  { color: var(--gruen); }
.kachel .zahl.orange { color: var(--gelb); }
.kachel .zahl.rot    { color: var(--rot); }

/* Zeilen ohne Grundlage (Urlaub, Krankheit) sollen nicht wie ein schlechter
   Wert aussehen - sie werden zurueckgenommen statt eingefaerbt. */
tr.ohne-grundlage th.spalte-name, tr.ohne-grundlage td { color: var(--text-gedaempft); }
td.zeilenvermerk { text-align: center; color: var(--text-gedaempft); }

/* Interne Zeiten in der Einzelansicht leicht abgesetzt. */
tr.intern td { background: var(--hellblau-blass); }

.abwesend {
  display: inline-block; padding: .05rem .5rem; border-radius: 999px;
  background: var(--hellblau-blass); color: var(--blau);
  border: 1px solid var(--hellblau-rand);
  font-size: .78rem; font-weight: 500; white-space: nowrap;
}

/* --- Kennzahlenkacheln: passen sich der Breite an ------------------------- */

.kacheln {
  display: grid; gap: .9rem; margin-bottom: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.kachel { width: auto; min-width: 0; }

/* --- Zeitraumwahl: Tag/Woche/Monat und Pfeile ------------------------------
   Der gewaehlte Ausschnitt steht ausgeschrieben zwischen den Pfeilen. Ohne ihn
   waere nach ein paar Klicks nicht mehr erkennbar, welche Woche man ansieht. */

.zeitraumwahl {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: .55rem .8rem; margin-bottom: 1.25rem;
  box-shadow: var(--schatten-xs);
}
.einheitenwahl { display: flex; gap: .25rem; background: var(--flaeche-grau);
                 border-radius: 999px; padding: .18rem; }
.einheitenwahl .chip-knopf { border-color: transparent; background: transparent; }
.einheitenwahl .chip-knopf.aktiv {
  background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600;
  box-shadow: var(--schatten-xs);
}

.zeitraumschritt { display: flex; align-items: center; gap: .4rem; margin: 0 auto; }

.schritt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--rand-stark); background: var(--flaeche);
  color: var(--blau); text-decoration: none; font-size: 1.05rem; line-height: 1;
  transition: background var(--ueberblende), border-color var(--ueberblende);
}
.schritt:hover { background: var(--hellblau-blass); border-color: var(--hellblau-rand); }
.schritt.gesperrt { color: var(--text-blass); border-style: dashed; cursor: not-allowed; }

.zeitraumtitel {
  font-weight: 650; font-size: 1.05rem; min-width: 15rem; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- Einstellungen: Schwellwerte und Zeitformat --------------------------- */

.schwellen { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.schwellen label { display: flex; align-items: center; gap: .4rem; margin: 0; }
.schwellen input[type="number"] {
  width: 5.5rem; font-family: inherit; padding: .35rem .5rem;
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
}
.schwellen .erklaerung { display: flex; align-items: center; gap: .4rem; margin: 0; }

.ampelpunkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.ampelpunkt.gruen  { background: var(--gruen); }
.ampelpunkt.orange { background: var(--gelb-signal); }
.ampelpunkt.rot    { background: var(--rot); }

.formatwahl { display: flex; flex-wrap: wrap; gap: .6rem; }
.formatoption {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
  padding: .5rem .85rem; cursor: pointer; background: var(--flaeche);
  transition: border-color var(--ueberblende), background var(--ueberblende);
}
.formatoption:hover { border-color: var(--hellblau-rand); }
.formatoption.aktiv { border-color: var(--blau); background: var(--hellblau-blass); font-weight: 600; }

/* Zuordnungszustand in der Mitarbeiterliste. */
.marke.offen { background: var(--gelb-blass); color: var(--gelb); }

/* Zeitraumfelder im Formular fuer den manuellen Lauf. */
.zeitraum { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.zeitraum label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem;
                  color: var(--text-gedaempft); margin: 0; }
.zeitraum input[type="date"] { font-family: inherit; font-size: .9rem; padding: .35rem .5rem;
                               border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); }


/* =====================================================================
   Schmale Bildschirme
   ---------------------------------------------------------------------
   Zwei Stufen. Bis 900 px reicht Umbrechen; darunter wird aus jeder
   Tabellenzeile eine Karte, weil neun Spalten auf einem Telefon nicht
   nebeneinander passen und seitliches Scrollen in einer Tabelle die
   Zuordnung zerstoert.
   ===================================================================== */

@media (max-width: 900px) {
  main { padding: 1.1rem .9rem 3rem; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.08rem; margin-top: 1.8rem; }

  .topbar { gap: .6rem; padding: 0 .9rem; }
  .brand { padding: .7rem 0; font-size: 1rem; }
  .topbar nav {
    order: 3; width: 100%; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: .55rem .6rem; font-size: .88rem; white-space: nowrap; }
  .topbar .user { margin-left: auto; font-size: .8rem; gap: .5rem; }

  .zeitraumwahl { gap: .5rem; }
  .zeitraumschritt { order: -1; width: 100%; justify-content: space-between; margin: 0; }
  .zeitraumtitel { min-width: 0; flex: 1; }
  .einheitenwahl { flex: 1; }
  .einheitenwahl .chip-knopf { flex: 1; text-align: center; }

  /* Tabelle wird zur Kartenliste - nur dort, wo das Template es vorsieht
     (`karten-mobil`). Andere Tabellen scrollen weiterhin seitlich. */
  .karten-mobil table { min-width: 0; }
  .karten-mobil thead { display: none; }
  .karten-mobil table,
  .karten-mobil tbody,
  .karten-mobil tfoot,
  .karten-mobil tr,
  .karten-mobil td,
  .karten-mobil tbody th,
  .karten-mobil tfoot th { display: block; width: auto; }

  .tabellen-rahmen.karten-mobil {
    overflow-x: visible; border: none; background: none; box-shadow: none; padding: 0;
  }

  .karten-mobil tr {
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--radius-klein); box-shadow: var(--schatten-xs);
    margin-bottom: .7rem; padding: .55rem .85rem .35rem;
  }
  .karten-mobil tbody tr:nth-child(even) { background: var(--flaeche); }

  .karten-mobil th.spalte-name,
  .karten-mobil tbody tr > *:first-child {
    position: static; box-shadow: none; background: none !important;
    font-size: 1rem; padding: 0 0 .4rem; text-align: left;
    border-bottom: 1px solid var(--rand); margin-bottom: .35rem;
    white-space: normal;
  }

  .karten-mobil td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .3rem 0; text-align: right;
    border-bottom: 1px dashed var(--rand);
  }
  .karten-mobil tr td:last-child { border-bottom: none; }
  .karten-mobil td::before {
    content: attr(data-spalte);
    color: var(--text-gedaempft); font-size: .82rem; font-weight: 500;
    text-align: left; flex: 1; min-width: 0;
  }
  .karten-mobil tbody tr > td:first-child::before { content: none; }
  .karten-mobil td.zeilenvermerk { justify-content: center; padding: .3rem 0 .5rem; border: none; }
  .karten-mobil td.zeilenvermerk::before { content: none; }

  .quote { flex-direction: row; align-items: center; gap: .5rem; min-width: 0; }
  .quote-balken { width: 60px; flex: none; }

  .karten-mobil tfoot tr { border-color: var(--rand-stark); border-width: 2px; }
  .karten-mobil tfoot th, .karten-mobil tfoot td { border-top: none; background: none; }

  .seitenkopf { flex-direction: column; align-items: stretch; }
  .schwellen { gap: .75rem 1.25rem; }
  .formatwahl { flex-direction: column; }
  .formatoption { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .kacheln { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; }
  .kachel { padding: .7rem .8rem; }
  .kachel .zahl { font-size: 1.35rem; }
  .zeitraumtitel { font-size: .95rem; }
  .aktionen { flex-wrap: wrap; }
  .aktionen .button, .aktionen button { flex: 1; text-align: center; }
}

/* Auf groben Zeigern (Touch) grossere Trefferflaechen. */
@media (pointer: coarse) {
  .topbar nav a { padding-top: .8rem; padding-bottom: .8rem; }
  .chip-knopf { padding: .38rem .8rem; }
  .schritt { width: 2.6rem; height: 2.6rem; }
}

/* Angeschnittener Zeitraum: Die laufende Woche endet bei gestern, weil der
   heutige Tag unvollstaendig ist. Der Titel nennt weiter den Kalenderzeitraum,
   der Zusatz sagt, wie weit tatsaechlich gerechnet wurde. */
.zeitraumhinweis { color: var(--text-blass); font-weight: 400; white-space: nowrap; }

/* Logo auf der Anmeldeseite - dort steht es allein und darf groesser sein. */
.login-logo { display: block; height: 38px; width: auto; margin: 0 auto 1.1rem; }
.login-box h1 { font-size: 1.15rem; text-align: center; color: var(--text-gedaempft);
                font-weight: 500; margin: 0 0 1.4rem; }

/* Die Bildmarke als dezenter Hintergrund der Kennzahlenkacheln waere zu viel -
   stattdessen traegt jede Kachel oben einen schmalen Streifen in Markenblau
   (siehe .kachel::before weiter oben). */

/* Abwesenheiten stehen unter dem Namen, nicht dahinter. Bei einer Woche oder
   einem Monat sind es mehrere Eintraege - nebeneinander sprengen sie die
   Spalte und schieben die Zahlen nach rechts. Die Zeile wird dadurch hoeher,
   und das ist richtig so: Der Grund gehoert zur Person. */
.namenszelle { display: flex; flex-direction: column; gap: .28rem; align-items: flex-start; }
.namenszelle .vermerke { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 22rem; white-space: normal; }
.namenszelle .abwesend { font-size: .74rem; padding: .02rem .42rem; }

/* Die Kennzahlen im Kopf einer Tageskarte - erfasst und abrechenbar
   nebeneinander, jeweils beschriftet. Nur eine Zahl ohne Beschriftung war
   nicht zu deuten. */
.tagesquoten { display: flex; gap: 1.1rem; align-items: center; margin-left: auto; }
.tagesquote { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.tagesquote .beschriftung {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-blass); line-height: 1;
}
.tagesquote .wert { font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }

@media (max-width: 900px) {
  .namenszelle .vermerke { max-width: none; }
  .tagesquoten { margin-left: 0; width: 100%; justify-content: flex-start; gap: 1.5rem; }
}

/* --- Anmeldung ueber Microsoft --------------------------------------------
   Der Knopf folgt Microsofts Vorgabe fuer "Mit Microsoft anmelden": heller
   Grund, dunkle Schrift, das Vierfarbquadrat davor. Wiedererkennbar zu sein
   ist hier wichtiger als zur eigenen Marke zu passen - man klickt, was man
   kennt. */


/* --- Segmentschalter -------------------------------------------------------
   Loest die Aufklappmenues in der Mitarbeiterliste ab. Drei Zustaende
   nebeneinander: Man sieht ohne Klick, was gilt, und braucht einen Klick statt
   zwei. Der aktive Knopf ist abgeschaltet - ein Klick darauf waere ohne
   Wirkung und wuerde nur die Seite neu laden. */

.segment {
  display: inline-flex; margin: 0; padding: .15rem;
  background: var(--flaeche-grau); border: 1px solid var(--rand);
  border-radius: 999px; gap: .1rem;
}
.segment-knopf {
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 500; color: var(--text-gedaempft);
  padding: .28rem .7rem; border-radius: 999px; white-space: nowrap;
  transition: background var(--ueberblende), color var(--ueberblende);
}
.segment-knopf:hover:not([disabled]) { background: var(--flaeche); color: var(--blau); }
.segment-knopf.aktiv {
  background: var(--flaeche); color: var(--blau); font-weight: 650;
  box-shadow: var(--schatten-xs); cursor: default;
}
.segment-knopf.aktiv.negativ { color: var(--rot); }
.segment-knopf[disabled] { opacity: 1; }

/* --- Kippschalter fuer die Abteilungen ------------------------------------ */

.kippschalter { display: inline-flex; align-items: center; gap: .6rem; margin: 0; }
.kippschalter button {
  position: relative; width: 2.9rem; height: 1.6rem; flex: none;
  border-radius: 999px; border: 1px solid var(--rand-stark);
  background: var(--flaeche-grau); cursor: pointer; padding: 0;
  transition: background var(--ueberblende), border-color var(--ueberblende);
}
.kippschalter button::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--flaeche); box-shadow: var(--schatten-xs);
  transition: transform var(--ueberblende);
}
.kippschalter button.an { background: var(--blau); border-color: var(--blau); }
.kippschalter button.an::after { transform: translateX(1.25rem); }
.kippschalter .beschriftung { font-size: .85rem; color: var(--text-gedaempft); }
.kippschalter button.an + .beschriftung { color: var(--blau); font-weight: 600; }

/* --- Info-Box über den Reitern -------------------------------------------- */

.infobox {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--hellblau-blass); border: 1px solid var(--hellblau-rand);
  border-radius: var(--radius); padding: .85rem 1.1rem; margin-bottom: 1.3rem;
  font-size: .92rem; line-height: 1.5;
}
.infobox .symbol {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--blau); color: #fff; font-weight: 700; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.infobox p { margin: 0 0 .4rem; }
.infobox p:last-child { margin-bottom: 0; }
.infobox strong { color: var(--blau); }

/* Ausgeblendete Zeilen bleiben erkennbar zurueckgenommen. */
tr.ausgeblendet td, tr.ausgeblendet th { opacity: .55; }

/* Werkzeugleiste ueber Listen: Zaehler links, Schalter rechts. */
.listen-werkzeuge {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: .8rem;
}
.listen-werkzeuge .wachstum { flex: 1; }

/* Aufklappbare Aktionen je Benutzerkonto - die selteneren Eingriffe
   (Passwort, Notfallzugang, Löschen) stehen nicht dauerhaft in der Zeile. */
.kontoaktionen summary { list-style: none; cursor: pointer; display: inline-block; }
.kontoaktionen summary::-webkit-details-marker { display: none; }
.kontoaktionen-inhalt {
  display: flex; flex-direction: column; gap: .7rem;
  margin-top: .6rem; padding: .8rem; min-width: 15rem;
  background: var(--flaeche-grau); border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.kontoaktionen-inhalt form { margin: 0; }
.kontoaktionen-inhalt label { margin: 0 0 .4rem; }

/* Nummerierte Anleitung im Einrichtungsblock. */
.schrittliste { margin: .4rem 0 0; padding-left: 1.3rem; }
.schrittliste li { margin-bottom: .6rem; }

/* Nur für Screenreader. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* =====================================================================
   Anwesenheit - die Tafel des laufenden Tages
   ---------------------------------------------------------------------
   Alles auf eine Bildschirmseite: schmale Zaehlleiste statt Kacheln,
   Anwesende und Abwesende nebeneinander, dichte Karten. Wer morgens
   draufschaut, soll nicht scrollen muessen.

   Karten statt einer Tabelle: Gefragt ist nicht der Vergleich von Zahlen,
   sondern ein Blick ueber die Abteilung. Ein farbiger Punkt links traegt
   die Aussage, die Schrift daneben erklaert sie - Farbe allein waere fuer
   Farbfehlsichtige keine Auskunft.
   ===================================================================== */

.aktualisierung { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.aktualisierung .erklaerung { margin: 0; font-variant-numeric: tabular-nums; }
.aktualisierung .veraltet { color: var(--rot); }

/* Die Erklaerung wird einmal gelesen - eingeklappt kostet sie keinen Platz. */
.hinweisklapp { margin-bottom: 1rem; }
.hinweisklapp summary {
  cursor: pointer; font-size: .88rem; color: var(--text-gedaempft);
  padding: .25rem 0;
}
.hinweisklapp summary:hover { color: var(--blau); }
.hinweisklapp .infobox { margin-top: .6rem; }

/* Zahlen als eine Zeile statt als fuenf Kacheln. */
.zaehlleiste {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem;
}
.zaehler {
  display: inline-flex; align-items: baseline; gap: .35rem;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 999px; padding: .3rem .8rem;
  font-size: .85rem; color: var(--text-gedaempft);
  box-shadow: var(--schatten-xs);
}
.zaehler strong {
  font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--text);
}
.zaehler.gruen  strong { color: var(--gruen); }
.zaehler.orange strong { color: var(--gelb); }
.zaehler.rot    strong { color: var(--rot); }

/* Anwesende breit, Abwesende schmal daneben. */
.tafel-spalten {
  display: grid; gap: 1.6rem;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  align-items: start;
}
.tafel-spalten h2 { margin-top: 0; }

.abteilungsblock { margin-bottom: .9rem; }
.abteilungsblock h3 {
  display: flex; align-items: center; gap: .45rem;
  margin: .9rem 0 .4rem;
}
.abteilungsblock:first-of-type h3 { margin-top: .2rem; }
.blockzahl {
  font-size: .72rem; font-weight: 600; letter-spacing: 0;
  background: var(--flaeche-grau); border: 1px solid var(--rand);
  border-radius: 999px; padding: .05rem .45rem; color: var(--text-blass);
}
/* Zweite Ebene: die einzelne Abteilung innerhalb ihrer Oberabteilung. */
.untergruppe {
  margin: .5rem 0 .3rem; font-size: .78rem; color: var(--text-blass);
  text-transform: none; letter-spacing: 0;
}

.praesenz-liste {
  display: grid; gap: .45rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.tafel-weg .praesenz-liste { grid-template-columns: 1fr; }

.praesenz-karte {
  display: flex; align-items: flex-start; gap: .55rem;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius-klein); padding: .45rem .65rem;
  box-shadow: var(--schatten-xs);
  border-left: 3px solid var(--rand-stark);
}
.praesenz-karte.gruen   { border-left-color: var(--gruen); }
.praesenz-karte.orange  { border-left-color: var(--gelb-signal); }
.praesenz-karte.rot     { border-left-color: var(--rot); }
.praesenz-karte.neutral { border-left-color: var(--rand-stark); }

.praesenz-karte .ampelpunkt { margin-top: .34rem; }
.praesenz-text { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.praesenz-name { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.praesenz-zustand { font-size: .8rem; color: var(--text-gedaempft); line-height: 1.35; }
.praesenz-zustand.gruen  { color: var(--gruen); font-weight: 600; }
.praesenz-zustand.orange { color: var(--gelb); font-weight: 600; }
.praesenz-zustand.rot    { color: var(--rot); font-weight: 600; }
.praesenz-seit { color: var(--text-blass); font-weight: 400; }

.praesenz-vermerke { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .15rem; }
.praesenz-vermerke .marke { font-size: .7rem; }

/* Abwesende: keine Ampel, kein Alarm - nur Name und Grund. */
.abwesend-karte { border-left-color: var(--hellblau-rand); background: var(--flaeche-grau); }
.tafel-weg .praesenz-karte {
  border-left-color: var(--hellblau-rand); background: var(--flaeche-grau);
}

@media (max-width: 1100px) {
  .tafel-spalten { grid-template-columns: 1fr; }
  .tafel-weg .praesenz-liste {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}

/* --- Mitarbeiterliste: beide Quellen in einer Spalte ---------------------- */

.systemmarken { display: flex; gap: .25rem; flex-wrap: wrap; }
/* Eine fehlende Seite bleibt sichtbar, aber zurueckgenommen - so sieht man
   auf einen Blick, welche der beiden fehlt, statt nur dass etwas fehlt. */
.systemmarken .marke { opacity: .4; }
.systemmarken .marke.quelle-da {
  opacity: 1; background: var(--hellblau-blass);
  border-color: var(--hellblau-rand); color: var(--hellblau-text);
}
table.mitarbeiterliste td { vertical-align: middle; }

/* Datum neben der Überschrift der Anwesenheitstafel - gleiche Zeile, aber
   erkennbar nachrangig gegenüber dem Seitennamen. */
.kopfdatum { font-weight: 400; color: var(--text-gedaempft); font-size: .92em; }

/* Zeiteinträge mit Bemerkungstext: Der Text steckt im Tooltip der Zeile.
   Ohne sichtbaren Hinweis würde ihn niemand suchen - der Mauszeiger ist
   der Hinweis, die gepunktete Linie unter der Ticketspalte der zweite. */
tr.hat-bemerkung { cursor: help; }
tr.hat-bemerkung td[data-spalte="Ticket"] {
  text-decoration: underline dotted var(--rand-stark);
  text-underline-offset: 3px;
}
tr.hat-bemerkung:hover td[data-spalte="Ticket"] {
  text-decoration-color: var(--blau);
}

/* =====================================================================
   OPOSmon - offene Posten und Zahlungsmoral
   ===================================================================== */

table.opos td, table.opos th { padding: .5rem .7rem; }
table.opos tbody tr:nth-child(even) { background: rgba(18, 42, 66, .018); }
table.opos tbody tr:hover { background: var(--hellblau-blass); }
table.opos tbody th { text-align: left; font-weight: 600; vertical-align: top; }
table.opos .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Der Verwendungszweck unter dem Kundennamen darf die Spalte nicht sprengen. */
table.opos .namenszelle .erklaerung {
  display: block; max-width: 26rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* --- OPOSmon: eine Karte je Kunde ----------------------------------------
   Bei drei Dutzend Gruppen verschwimmen in einer durchlaufenden Tabelle die
   Grenzen, und genau die Gruppe ist hier die Aussage. Der farbige Streifen
   links richtet sich nach dem längsten Verzug - so sieht man beim
   Überfliegen, wo es brennt. */

.opos-gruppe {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-left: 4px solid var(--rand-stark);
  border-radius: var(--radius); box-shadow: var(--schatten-xs);
  margin-bottom: .9rem; overflow: hidden;
}
.opos-gruppe.rot     { border-left-color: var(--rot); }
.opos-gruppe.orange  { border-left-color: var(--gelb-signal); }
.opos-gruppe.neutral { border-left-color: var(--rand-stark); }

.opos-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .7rem 1rem; background: var(--flaeche-grau);
  border-bottom: 1px solid var(--rand);
}
.opos-kunde { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.opos-name { font-weight: 700; font-size: 1.02rem; }
.opos-vermerke { display: flex; flex-wrap: wrap; gap: .25rem; }
.opos-vermerke .rot-marke {
  background: var(--rot-blass); border-color: var(--rot); color: var(--rot);
}
.opos-vermerke .orange-marke {
  background: var(--gelb-blass); border-color: var(--gelb); color: var(--gelb);
}

.opos-summe { text-align: right; display: flex; flex-direction: column; gap: .1rem; }
.opos-summe .betrag {
  font-size: 1.25rem; font-weight: 700; color: var(--blau);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.opos-summe .erklaerung { margin: 0; font-size: .8rem; }

/* Die Belege der Gruppe - schmaler gesetzt als eine eigenständige Tabelle. */
table.opos-posten { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.opos-posten th, table.opos-posten td {
  padding: .4rem .7rem; text-align: left; border-bottom: 1px solid var(--rand);
}
table.opos-posten thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-blass); font-weight: 700; border-bottom: 1px solid var(--rand);
}
table.opos-posten tbody tr:last-child td { border-bottom: none; }
table.opos-posten .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.opos-posten td.zweck {
  max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-gedaempft);
}
/* Die auslösenden Zeilen abheben - sonst ist nicht erkennbar, warum die
   Gruppe überhaupt in der Liste steht. */
table.opos-posten tr.ist-ueberfaellig td { background: var(--gelb-blass); }
table.opos-posten tbody tr:hover td { background: var(--hellblau-blass); }

.opos-gesamt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  background: var(--flaeche); border: 1px solid var(--rand-stark);
  border-radius: var(--radius); padding: .8rem 1.1rem; margin-top: 1.2rem;
  font-size: .95rem;
}
.opos-gesamt strong {
  font-size: 1.3rem; color: var(--blau); font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .opos-kopf { flex-direction: column; }
  .opos-summe { text-align: left; }
  /* Die Belegtabelle wird zur Liste - acht Spalten passen nicht. */
  table.opos-posten thead { display: none; }
  table.opos-posten, table.opos-posten tbody,
  table.opos-posten tr, table.opos-posten td { display: block; width: auto; }
  table.opos-posten tr { padding: .5rem .3rem; border-bottom: 1px solid var(--rand); }
  table.opos-posten td { border: none; display: flex; justify-content: space-between; gap: 1rem; }
  table.opos-posten td::before {
    content: attr(data-spalte); color: var(--text-blass); font-size: .78rem;
  }
}

/* Hinweis unter dem Anmeldeformular. */
.anmelde-fuss { text-align: center; margin-top: .9rem; font-size: .85rem; }

/* Freischaltung der Hauptmenüpunkte je Konto - eine Spalte mit Haken. */
.rechtewahl { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; }
.rechtewahl label {
  display: flex; align-items: center; gap: .35rem; margin: 0;
  font-size: .82rem; white-space: nowrap; cursor: pointer;
}
.rechtewahl input[type="checkbox"] { margin: 0; }
.rechtewahl button { margin-top: .25rem; }

/* Vom letzten Speichern oder Verbindungstest beanstandete Felder. Nur der
   Rahmen und ein blasser Grund - ein rot gefülltes Feld wäre kaum zu lesen. */
input.fehlerhaft, select.fehlerhaft {
  border-color: var(--rot); background: var(--rot-blass);
  box-shadow: 0 0 0 2px rgba(196, 39, 35, .12);
}
input.fehlerhaft:focus, select.fehlerhaft:focus { border-color: var(--rot); }
label:has(> input.fehlerhaft), label:has(> select.fehlerhaft) { color: var(--rot); }

/* Untermenü der Einstellungen - zweite Ebene unter den Reitern. Flacher als
   die Reiter selbst, damit die Hierarchie sichtbar bleibt. */
.unterreiter {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin: -.6rem 0 1.3rem; padding: .35rem;
  background: var(--flaeche-grau); border: 1px solid var(--rand);
  border-radius: 999px; width: fit-content; max-width: 100%;
}
.unterreiter-punkt {
  padding: .28rem .8rem; border-radius: 999px; text-decoration: none;
  font-size: .85rem; color: var(--text-gedaempft); white-space: nowrap;
  transition: background var(--ueberblende), color var(--ueberblende);
}
.unterreiter-punkt:hover { background: var(--hellblau-blass); color: var(--blau); }
.unterreiter-punkt.aktiv {
  background: var(--flaeche); color: var(--blau); font-weight: 650;
  box-shadow: var(--schatten-xs);
}

/* Kontenliste kompakter: Die Zeilen tragen Formulare, sonst wird die Tabelle
   unnötig hoch. */
table.kontenliste td, table.kontenliste tbody th { padding: .4rem .6rem; vertical-align: middle; }
table.kontenliste .namenszelle { gap: .1rem; }
table.kontenliste .vermerke { gap: .3rem; }
table.kontenliste .segment-knopf { padding: .15rem .5rem; font-size: .78rem; }
table.kontenliste .rechtewahl label { font-size: .78rem; }
table.kontenliste .rechtewahl button { padding: .12rem .5rem; font-size: .75rem; }