/* Mitarbeiterportal — Gestaltung.
   Eine Arbeitsoberfläche, kein Schaufenster: viel Weißraum, ruhige Farben,
   und Farbe nur dort, wo sie etwas bedeutet (Anwesenheit, Differenz, Warnung). */

/* ⚠ Diese Regel MUSS stehen bleiben, und zwar mit !important.
   Der Browser blendet ein Element mit dem Attribut `hidden` über seine eigene
   Vorgabe `[hidden] { display: none }` aus — die hat aber die schwächste
   Spezifität überhaupt. Jede eigene Regel mit `display` schlägt sie.
   Genau das ist hier zweimal passiert: `.anmelde-huelle { display: grid }`
   und `.infocenter { display: flex }`. Der Code setzt korrekt
   `el.hidden = true`, sichtbar blieb trotzdem beides — die Anmeldemaske
   verschwand nach dem Anmelden nie und schob die Anwendung um eine volle
   Bildschirmhöhe nach unten, das Infocenter lag dauerhaft über dem Inhalt.
   Wer Sichtbarkeit umschaltet, nimmt `el.hidden`; dann greift diese Regel. */
[hidden] { display: none !important; }

:root {
  --grund: #f0f0f0;
  --karte: #ffffff;
  --rand: #e2e2e2;
  --rand-stark: #cdcdcd;
  --text: #1f1f1f;
  --text-leise: #6b6b6b;
  --text-still: #9a9a9a;
  --rot: #d8392b;
  --rot-dunkel: #b32e22;
  --blau: #2f6fa8;
  /* Zustandsfarben innerhalb der Palette (Vorgabe 16.09.2026: nur Blaugrau/Weiss/
     Blau/Rot/Grau): positiv/erfolgreich = Blau, Pause/wartend = Grau. */
  --gruen: #2f7fc4;
  --gelb: #9a9a9a;
  --soll: #d6e6f5;
  --soll-rand: #a9c9e6;
  --ist: #d9f4f8;
  --ist-rand: #9fd9e3;
  --diff: #f6d4d4;
  --diff-rand: #e79b9b;
  --leiste: #1d2a36;      /* wie Anmeldung und CRM-Seitenleiste */
  --leiste-hell: #263544;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 14px/1.5 var(--schrift);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blau); }

/* ───────────────────────────────────────────────────── Marke / Logo */
.marke {
  display: flex; align-items: baseline; gap: 2px; padding: 20px 16px 18px;
  font-weight: 800; letter-spacing: .5px; background: var(--leiste);
}
.marke-hc { color: #2f7fc4; font-size: 26px; }
.marke-g { color: var(--rot); font-size: 26px; }
.marke-portal { color: #fff; font-size: 15px; letter-spacing: 3px; margin-left: 3px; }
.marke.gross { background: none; justify-content: center; padding: 0 0 22px; }
.marke.gross .marke-hc, .marke.gross .marke-g { font-size: 30px; }

/* ───────────────────────────────────────────────────── Anmeldung */
.anmelde-huelle {
  min-height: 100%; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, #1d2a36, #101820);
}
.anmelde-karte {
  width: min(380px, 100%); background: #fff; border-radius: 6px; padding: 30px 28px 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.anmelde-karte h1 { margin: 0 0 18px; font-size: 19px; font-weight: 600; }
.anmelde-karte label { display: block; margin-bottom: 14px; font-size: 12.5px; color: var(--text-leise); }
.anmelde-karte input {
  width: 100%; margin-top: 5px; padding: 10px 11px; border: 1px solid var(--rand-stark);
  border-radius: 4px; background: #fff;
}
.anmelde-karte input:focus { outline: 2px solid var(--blau); outline-offset: -1px; border-color: var(--blau); }
.fuss { margin: 16px 0 0; font-size: 11.5px; color: var(--text-still); text-align: center; }
.fehler { margin: 0 0 12px; color: var(--rot); font-size: 13px; }

/* ───────────────────────────────────────────────────── Grundraster */
#app { display: grid; grid-template-columns: 180px 1fr; grid-template-rows: 62px 1fr; min-height: 100vh; }
.seitenleiste {
  grid-row: 1 / 3; background: var(--leiste); color: #d8d8d8;
  display: flex; flex-direction: column; position: relative;
}
.kopf {
  background: #fff; border-bottom: 1px solid var(--rand);
  display: flex; align-items: center; justify-content: space-between; padding: 0 22px; gap: 16px;
}
main { padding: 22px; overflow-x: hidden; }

/* ───────────────────────────────────────────────────── Seitenleiste */
.ich { padding: 12px 0 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.ich-knopf {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 14px 6px;
  background: none; border: 0; color: #f0f0f0; font-weight: 600; font-size: 13.5px; cursor: pointer; text-align: left;
}
.ich-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.caret { color: #888; font-size: 11px; }
.punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--rot); flex: none; }
.punkt.anwesend { background: var(--blau); }
.punkt.pause { background: var(--gelb); }
.ich-menue {
  position: absolute; z-index: 30; left: 10px; right: 10px; top: 92px;
  background: #fff; border-radius: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.35); overflow: hidden;
}
.ich-menue button {
  display: block; width: 100%; padding: 9px 12px; background: none; border: 0; text-align: left;
  color: var(--text); font-size: 13px; cursor: pointer;
}
.ich-menue button:hover { background: #f2f2f2; }
.salden-mini { padding: 4px 14px 0; font-size: 12.5px; color: #b9b9b9; line-height: 1.7; }
.salden-mini b { color: #fff; font-weight: 600; }

nav { padding: 6px 0; flex: 1; }
nav a {
  display: flex; align-items: center; gap: 11px; padding: 10px 16px; color: #c3ccd6;
  text-decoration: none; font-size: 13.5px; border-left: 3px solid transparent;
}
nav a:hover { background: var(--leiste-hell); color: #fff; }
nav a.aktiv { color: #fff; border-left-color: var(--rot); background: rgba(255,255,255,.08); font-weight: 600; }
nav a svg { flex: none; opacity: .9; }
/* Bereiche und Unterpunkte (seit 16.09.2026) */
nav .nav-gruppe { padding: 14px 16px 4px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #8f9ba8; font-weight: 700; }
nav a.nav-unter { padding: 7px 16px 7px 44px; font-size: 13px; color: #aeb8c4; }
nav a.nav-unter.aktiv { color: #fff; background: none; border-left-color: transparent; font-weight: 600; }
.version {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px; font-size: 12px;
  color: #8f9ba8; border-top: 1px solid rgba(255,255,255,.1);
}

/* ───────────────────────────────────────────────────── Kopfzeile */
.kopf-links { font-size: 15px; font-weight: 600; color: var(--text-leise); }
.kopf-rechts { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.sprache { display: flex; align-items: center; gap: 6px; color: var(--text-leise); }
.sprache select { border: 0; background: none; cursor: pointer; padding: 4px 2px; }
.kopf-knopf { background: none; border: 0; color: var(--text-leise); cursor: pointer; padding: 6px; border-radius: 4px; }
.kopf-knopf:hover { background: #f2f2f2; color: var(--text); }
.kopf-link { background: none; border: 0; color: var(--text-leise); cursor: pointer; font-size: 14px; padding: 6px 2px; }
.kopf-link:hover { color: var(--rot); }

/* ───────────────────────────────────────────────────── Karten */
.karte {
  background: var(--karte); border: 1px solid var(--rand); border-radius: 4px;
  margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.karte-kopf {
  display: flex; align-items: center; gap: 9px; padding: 15px 20px; cursor: pointer;
  font-size: 16px; font-weight: 600; user-select: none;
}
.karte-kopf.starr { cursor: default; }
.karte-kopf .pfeil { color: var(--text-leise); font-size: 13px; transition: transform .15s; }
.karte-kopf.zu .pfeil { transform: rotate(-90deg); }
.karte-kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 13px; }
.karte-koerper { padding: 0 20px 20px; }
.karte-kopf + .karte-koerper { padding-top: 2px; }
.karte.leer .karte-kopf { border-bottom: 0; }
.karte-trenn { border-top: 1px solid var(--rand); }

h2.titel { margin: 4px 0 14px; font-size: 22px; font-weight: 600; }
.leise { color: var(--text-leise); }
.still { color: var(--text-still); }
.klein { font-size: 12.5px; }

/* ───────────────────────────────────────────────────── Knöpfe / Formulare */
.knopf {
  background: var(--rot); color: #fff; border: 0; border-radius: 4px; padding: 10px 18px;
  font-size: 14px; cursor: pointer;
}
.knopf:hover { background: var(--rot-dunkel); }
.knopf:disabled { background: #d5d5d5; color: #8a8a8a; cursor: not-allowed; }
.knopf.voll { width: 100%; }
.knopf.hell { background: #fff; color: var(--text); border: 1px solid var(--rand-stark); }
.knopf.hell:hover { background: #f5f5f5; }
.knopf.klein { padding: 6px 12px; font-size: 13px; }
.knopf.gruen { background: var(--gruen); }
.knopf.gruen:hover { background: #256aa6; }

.feld { display: block; margin-bottom: 14px; }
.feld > span { display: block; font-size: 12px; color: var(--text-leise); margin-bottom: 4px; }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 10px 11px; border: 1px solid var(--rand-stark); border-radius: 4px; background: #fff;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--blau); outline-offset: -1px; }
.feld-reihe { display: flex; gap: 12px; }
.feld-reihe > * { flex: 1; }
.kasten { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 13px; }
.kasten input { width: 15px; height: 15px; }

/* ───────────────────────────────────────────────────── Tabellen */
table.liste { width: 100%; border-collapse: collapse; }
table.liste th {
  text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text-leise);
  padding: 12px 10px; border-bottom: 1px solid var(--rand);
}
table.liste td { padding: 11px 10px; border-bottom: 1px solid #efefef; font-size: 13.5px; }
table.liste tr:hover td { background: #fafafa; }
table.liste tr.frei td { background: #f6f6f6; color: var(--text-leise); }
table.liste tr.frei:hover td { background: #f1f1f1; }
table.liste .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.liste .mitte { text-align: center; }
.datum-link { color: var(--blau); cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.datum-link:hover { text-decoration: underline; }
.plus { color: var(--gruen); }
.minus { color: var(--rot); }
.null { color: var(--text-leise); }
.tabelle-scroll { overflow-x: auto; }

.blaettern {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 12px 4px 0; font-size: 12.5px; color: var(--text-leise);
}
.blaettern button {
  background: none; border: 0; cursor: pointer; color: var(--text-leise); padding: 4px 6px; border-radius: 3px;
}
.blaettern button:hover:not(:disabled) { background: #f0f0f0; color: var(--text); }
.blaettern button:disabled { opacity: .35; cursor: default; }
.blaettern select { border: 1px solid var(--rand); border-radius: 3px; padding: 3px 6px; }

/* ───────────────────────────────────────────────────── Kacheln / Statistik */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 18px; }
.kachel { border-radius: 4px; padding: 14px 16px; border-left: 4px solid; }
.kachel .kachel-name { font-size: 12.5px; color: var(--text-leise); }
.kachel .kachel-wert { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kachel.soll { background: #eaf2fa; border-color: #7fb0dc; }
.kachel.diff { background: #fdeceb; border-color: #e9938c; }
.kachel.ist  { background: #e6f7fa; border-color: #79cbd8; }
.kachel.neutral { background: #f4f4f4; border-color: #c9c9c9; }

/* Dashboard-Kopf (seit 16.09.2026, wie im CRM): Kennzahlen mit Symbol, Modul-Raster, Abschnitte. */
h2.abschnitt { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-leise); font-weight: 700; margin: 18px 0 10px; }
h2.abschnitt:first-child { margin-top: 0; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kennzahl { background: #fff; border: 1px solid var(--rand); border-radius: 6px; padding: 16px 18px 14px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.kennzahl:hover { border-color: var(--blau); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.kennzahl .kz-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: #f0f0f0; color: var(--text-leise); margin-bottom: 12px; }
.kennzahl.warnung .kz-icon { background: #fbe6e3; color: var(--rot); }
.kennzahl.gut .kz-icon { background: #d6e6f5; color: var(--blau); }
.kennzahl .kz-name { font-size: 12.5px; color: var(--text-leise); }
.kennzahl .kz-wert { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kennzahl.warnung .kz-wert { color: var(--rot); }
.kennzahl .kz-unten { font-size: 12px; color: var(--text-still); margin-top: 2px; }
.modulkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 8px; }
.modulkachel { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--rand); border-radius: 6px; text-decoration: none; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.modulkachel:hover { border-color: var(--blau); }
.modulkachel .mk-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background: #f0f0f0; color: var(--text-leise); }
.modulkachel .mk-titel { display: block; font-weight: 600; }
.modulkachel .mk-unten { display: block; font-size: 12.5px; color: var(--text-leise); margin-top: 2px; }
@media (max-width: 760px) { .kennzahlen { grid-template-columns: 1fr 1fr; gap: 10px; } .kennzahl { padding: 12px 14px; } .kennzahl .kz-wert { font-size: 20px; } }

.hinweis-kasten {
  display: flex; gap: 11px; align-items: flex-start; background: #eaf2fa; border-left: 4px solid #7fb0dc;
  border-radius: 4px; padding: 13px 15px; margin-top: 18px; font-size: 13px; color: #21506f;
}
.hinweis-kasten.warn { background: #f0f0f0; border-color: var(--text-still); color: #4a4a4a; }
.hinweis-kasten.rot { background: #fdeceb; border-color: #e9938c; color: #8d2a22; }

.reiter { display: flex; gap: 26px; border-bottom: 1px solid var(--rand); margin: 16px 0 6px; }
.reiter button {
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 2px;
  color: var(--text-leise); cursor: pointer; font-size: 14px;
}
.reiter button.aktiv { color: var(--rot); border-bottom-color: var(--rot); }

.diagramm { width: 100%; height: 340px; }
.diagramm text { font-size: 11px; fill: var(--text-leise); }
.diagramm .achse { stroke: #e6e6e6; }
.diagramm .null-linie { stroke: #333; stroke-width: 1.2; }

.legende { display: flex; gap: 20px; justify-content: center; font-size: 12px; color: var(--text-leise); margin-bottom: 6px; flex-wrap: wrap; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 26px; height: 12px; border-radius: 2px; display: inline-block; border: 1px solid; }

/* ───────────────────────────────────────────────────── Stempeluhr */
.uhr { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }
.uhr-zeit { font-size: 46px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.uhr-datum { color: var(--text-leise); font-size: 13.5px; }
.uhr-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.stempel {
  min-width: 150px; padding: 18px 22px; border-radius: 5px; border: 0; cursor: pointer;
  color: #fff; font-size: 16px; font-weight: 600; display: flex; flex-direction: column; gap: 3px; align-items: center;
}
.stempel small { font-weight: 400; font-size: 11.5px; opacity: .85; }
.stempel.kommen { background: var(--blau); }
.stempel.kommen:hover { background: #256aa6; }
.stempel.pause { background: #6b6b6b; }
.stempel.pause:hover { background: #4a4a4a; }
.stempel.gehen { background: var(--rot); }
.stempel.gehen:hover { background: var(--rot-dunkel); }
.zustand { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.zustand .punkt { width: 13px; height: 13px; }
.tagesband { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: 13.5px; }
.tagesband div span { color: var(--text-leise); }
.tagesband div b { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────────────── Planer (Workflow) */
.planer-werkzeuge { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.planer-werkzeuge .rechts { margin-left: auto; display: flex; gap: 2px; }
.stufe {
  border: 1px solid var(--rand-stark); background: #fff; padding: 6px 13px; cursor: pointer; font-size: 13px;
}
.stufe:first-child { border-radius: 4px 0 0 4px; }
.stufe:last-child { border-radius: 0 4px 4px 0; }
.stufe.aktiv { background: #f0f0f0; font-weight: 600; }
.planer { overflow-x: auto; border: 1px solid var(--rand); border-radius: 4px; }
table.planer-tabelle { border-collapse: collapse; font-size: 12px; }
table.planer-tabelle th, table.planer-tabelle td { border: 1px solid #e8e8e8; }
table.planer-tabelle .monat { background: #fafafa; font-weight: 600; color: var(--text-leise); padding: 8px; text-align: center; }
table.planer-tabelle .tag-kopf { width: 26px; min-width: 26px; text-align: center; padding: 4px 0; font-weight: 600; }
table.planer-tabelle .tag-kopf small { display: block; font-weight: 400; color: var(--text-leise); }
table.planer-tabelle .name-spalte {
  position: sticky; left: 0; background: #fff; z-index: 2; min-width: 210px; padding: 7px 10px; text-align: left;
  border-right: 2px solid #333;
}
table.planer-tabelle td.zelle { height: 30px; padding: 0; }
table.planer-tabelle .we { background: #eeeeee; }
table.planer-tabelle .feiertag { background: #e4e4e4; text-align: center; color: #777; }
table.planer-tabelle .heute { background: #fdeeec; }
table.planer-tabelle .heute-kopf { color: var(--rot); }
/* ⚠ Die Zellen heissen .zelle (seiten.js), nicht .abw — ohne diese Regel hat der
   absolute .abw-block keinen Bezugsrahmen und legt sich ueber die ganze Seite. */
table.planer-tabelle td.zelle, table.planer-tabelle .abw { position: relative; }
.abw-block { position: absolute; inset: 2px; border-radius: 2px; }
.abw-block.halb { inset: 2px 2px 2px 50%; }
.abw-block.beantragt { opacity: .45; border: 1px dashed rgba(0,0,0,.4); }
.planer-fuss { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-leise); margin-top: 10px; }
.planer-fuss span { display: inline-flex; align-items: center; gap: 6px; }
.planer-fuss i { width: 14px; height: 14px; border-radius: 2px; display: inline-block; }

/* ───────────────────────────────────────────────────── Kalender */
.kalender-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.kalender-kopf h3 { flex: 1; text-align: center; margin: 0; font-size: 30px; font-weight: 400; }
.kalender { width: 100%; border-collapse: collapse; table-layout: fixed; }
.kalender th {
  padding: 10px; font-size: 13px; font-weight: 600; border: 1px solid var(--rand); background: #fff;
}
.kalender td { border: 1px solid var(--rand); vertical-align: top; height: 118px; padding: 0; }
.kal-tag { display: flex; flex-direction: column; height: 100%; }
.kal-zahl { text-align: right; padding: 5px 7px 2px; font-size: 13px; }
.kal-fremd { color: #c4c4c4; }
.kal-ist { background: #ebebeb; padding: 3px 7px; font-size: 12px; }
.kal-heute { background: #eaf2fa; }
.kal-heute .kal-zahl { color: var(--rot); font-weight: 600; }
.kal-block { padding: 2px 7px; font-size: 12px; color: #444; display: flex; align-items: center; gap: 5px; }
.kal-block i { width: 6px; height: 6px; border-radius: 50%; background: #bbb; display: inline-block; flex: none; }
.kal-abw { margin: 3px 6px; padding: 2px 6px; border-radius: 3px; font-size: 11.5px; color: #143; }
.kal-we { background: #fafafa; }

/* ───────────────────────────────────────────────────── Infocenter */
.infocenter {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: #fff;
  box-shadow: -8px 0 28px rgba(0,0,0,.18); z-index: 40; display: flex; flex-direction: column;
}
.ic-kopf {
  display: flex; align-items: center; justify-content: space-between; padding: 19px 22px;
  font-size: 15px; letter-spacing: 1px; color: var(--text-leise); border-bottom: 1px solid var(--rand);
}
.ic-kopf button { background: none; border: 0; font-size: 17px; cursor: pointer; color: var(--text-leise); }
.ic-koerper { overflow-y: auto; padding: 16px 22px 30px; }
.ic-suche { width: 100%; padding: 9px 11px 9px 32px; border: 1px solid var(--rand-stark); border-radius: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 8px 50% / 16px no-repeat; }
.ic-einstellungen { margin: 14px 0 8px; }
.ic-einstellungen summary { cursor: pointer; font-size: 12px; letter-spacing: .5px; color: var(--text-leise); }
.ic-raster { display: flex; gap: 16px; margin: 10px 0; flex-wrap: wrap; }
.ic-raster label { flex: 1; min-width: 150px; font-size: 12px; color: var(--text-leise); }
.ic-raster select { width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid var(--blau); border-radius: 4px; }
.ic-zeile { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid #f0f0f0; }
.ic-zeile .name { font-weight: 600; font-size: 13.5px; flex: 1; }
.ic-zeile .status { color: var(--text-leise); font-size: 13px; }
.ic-gruppe { margin-top: 18px; font-size: 12px; letter-spacing: .5px; color: var(--text-still); text-transform: uppercase; }
.ic-kopfzeile { display: flex; padding: 8px 2px; font-size: 11.5px; letter-spacing: .5px;
  color: var(--text-still); text-transform: uppercase; border-bottom: 1px solid var(--rand); }
.ic-kopfzeile .name { flex: 1; margin-left: 22px; }
.ic-zahlen { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-leise); margin: 12px 0 4px; }

/* ───────────────────────────────────────────────────── Meldung / Dialog */
.meldung {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90;
  background: #232323; color: #fff; padding: 12px 20px; border-radius: 4px; font-size: 13.5px;
  box-shadow: 0 8px 26px rgba(0,0,0,.3); max-width: min(520px, 92vw);
}
.meldung.fehler { background: var(--rot); }
.meldung.erfolg { background: var(--gruen); }

dialog {
  border: 0; border-radius: 6px; padding: 0; width: min(560px, 94vw);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
/* Die Personensicht der Personalabteilung braucht Platz für die Monatstabelle. */
dialog:has(.monat-kopf) { width: min(820px, calc(100vw - 20px)); }
dialog::backdrop { background: rgba(0,0,0,.45); }
.dlg-kopf { padding: 18px 22px 0; font-size: 17px; font-weight: 600; }
.dlg-koerper { padding: 14px 22px 4px; max-height: 65vh; overflow-y: auto; }
.dlg-fuss { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; }

.marken { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; }
.marken.beantragt { background: #f0f0f0; color: #4a4a4a; }
.marken.genehmigt { background: #d6e6f5; color: #2f6fa8; }
.marken.abgelehnt { background: #fdeceb; color: #8d2a22; }
.marken.storniert { background: #f0f0f0; color: #6b6b6b; }

.zwei-spalten { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
/* ⚠ Grid-Kinder haben min-width:auto — eine breite Tabelle weitet sonst die Spalte
   über den Bildschirm hinaus, statt im .tabelle-scroll zu scrollen. */
.zwei-spalten > * { min-width: 0; }
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 1100px) { .zwei-spalten { grid-template-columns: 1fr; } }
/* Menüknopf nur auf schmalen Bildschirmen */
.menue-knopf { display: none; background: none; border: 0; padding: 6px; margin-left: -6px; color: var(--text-leise); cursor: pointer; border-radius: 4px; }
.menue-knopf:hover { background: #f2f2f2; color: var(--text); }
.schleier { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 45; }

/* ⚠ Mobil: die Seitenleiste verlässt das Raster (fixed) — dann muss das Raster
   EINSPALTIG werden. Mit `0 1fr` rutschte die Kopfzeile in die 0-px-Spalte und
   `main` in die 62-px-Kopfzeile: nichts war bedienbar (16.09. gemessen: main
   375×62, header 44×62). */
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 56px 1fr; }
  .seitenleiste { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: 230px; height: 100%; grid-row: auto;
    transform: translateX(-100%); transition: transform .2s; overflow-y: auto; box-shadow: 8px 0 28px rgba(0,0,0,.25); }
  .seitenleiste.offen { transform: none; }
  .kopf { grid-column: 1; grid-row: 1; padding: 0 12px; gap: 10px; position: sticky; top: 0; z-index: 30; }
  .menue-knopf { display: inline-flex; }
  .kopf-rechts { gap: 8px; }
  .kopf-link { font-size: 12.5px; }
  .sprache select { max-width: 92px; }
  main { grid-column: 1; grid-row: 2; padding: 12px; }
  .karte-koerper { padding: 14px; }
  .kacheln { grid-template-columns: 1fr; gap: 10px; }
  .uhr-zeit { font-size: 40px; }
  .uhr { gap: 14px; }
  .uhr-knoepfe { margin-left: 0; width: 100%; }
  .stempel { min-width: 0; flex: 1; padding: 16px 8px; font-size: 15px; }
  .infocenter { width: 100%; }
  table.liste th, table.liste td { padding: 8px 6px; font-size: 12.5px; }
  .tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .planer { overflow-x: auto; }
  dialog { width: calc(100vw - 20px); max-width: none; }
}

.nachricht-zeile { padding: 12px 2px; border-bottom: 1px solid #f0f0f0; }

/* Personensicht der Personalabteilung */
.monat-kopf { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.buchung-chip { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.buchung-chip.verwaist { color: var(--rot); text-decoration: underline dotted; }
.chip-x { background: none; border: 0; color: var(--text-still); font-size: 14px; line-height: 1; padding: 0 2px; cursor: pointer; border-radius: 3px; }
.chip-x:hover { color: var(--rot); background: #fdeceb; }
.nachtrag-form { margin-top: 14px; padding: 14px; border: 1px solid var(--rand); border-radius: 4px; background: #fafafa; }
.nachricht-zeile.ungelesen { border-left: 3px solid var(--blau); padding-left: 10px; }
.nachricht-zeile .betreff { font-weight: 600; font-size: 13.5px; }
.nachricht-zeile .zeit { color: var(--text-still); font-size: 11.5px; }
.nachricht-zeile p { margin: 4px 0 6px; font-size: 13px; color: var(--text-leise); white-space: pre-wrap; }
.nachricht-werkzeuge { display: flex; gap: 10px; }
.nachricht-werkzeuge button { background: none; border: 0; color: var(--blau); cursor: pointer; font-size: 12px; padding: 0; }

.leer-hinweis { text-align: center; color: var(--text-leise); padding: 26px 10px; font-size: 14px; }
.lade { color: var(--text-still); padding: 20px 2px; font-size: 13px; }

/* ───────────────────────────────────────── Genehmigungsbaum (Stammdaten) */
.baum ul { list-style: none; margin: 4px 0 0; padding-left: 18px; border-left: 1px solid var(--rand); }
.baum > ul { padding-left: 0; border-left: 0; }
.baum-abteilung { margin: 6px 0 10px; }
.baum-titel { font-weight: 600; }
.baum-person { padding: 2px 0; font-size: 13.5px; }
.etikett { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: var(--blau); color: #fff; font-size: 11px; vertical-align: 1px; }
.warn { color: var(--rot); }

/* Demo-Leiste (nur Vorführ-Instanz) */
.demo-leiste { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 14px; background: #fff3cd; color: #5c4400; font-size: 13px; border-bottom: 1px solid #f0d78a; }
.demo-titel { font-weight: 600; margin-right: 4px; }
.demo-knopf { border: 1px solid #d8b955; background: #fff; color: #5c4400; border-radius: 4px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.demo-knopf.aktiv { background: #5c4400; color: #fff; border-color: #5c4400; }
.demo-knopf small { opacity: .75; }