/* Mitarbeiter-Dienstplan, mobil zuerst.
   Farben und Masse aus der Designvorlage "Mitarbeiter-Schichtplan mobil". */

:root {
  --mp-bg: #f4f6fa;
  --mp-surface: #ffffff;
  --mp-line: #e6eaf1;
  --mp-line-soft: #f1f5f9;
  --mp-ink: #0f172a;
  --mp-ink-2: #64748b;
  --mp-ink-3: #94a3b8;
  --mp-ink-4: #cbd5e1;
  --mp-muted: #b6c0cf;
  --mp-brand: #2563eb;
  --mp-brand-dark: #1d4ed8;
  --mp-brand-deep: #1e3a8a;
  --mp-brand-tint: #dbeafe;
  --mp-vacation: #2563eb;
  --mp-vacation-bg: #f5f9ff;
  --mp-vacation-badge: #dbeafe;
  --mp-vacation-ink: #1d4ed8;
  --mp-sick: #f59e0b;
  --mp-sick-bg: #fffdf5;
  --mp-sick-badge: #fef3c7;
  --mp-sick-ink: #b45309;
  --mp-radius: 16px;
  --mp-radius-sm: 12px;
}

.mp {
  display: none;
  flex-direction: column;
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--mp-bg);
  font-family: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--mp-ink);
}

.mp.active { display: flex; }
body.mp-open { background: var(--mp-bg); }

/* ── Kopf ───────────────────────────────────────────────────────────────── */
/* Der Kopf ist ausserhalb des scrollenden Bereichs (.mp__body) und dadurch von
   selbst fixiert - genau das Prinzip aus dem Planungsmodus (sp-app/grid-wrapper),
   kein position:sticky noetig. */

.mp__header {
  position: relative;
  flex-shrink: 0;
  z-index: 5;
}

.mp__headershadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s ease;
  background: linear-gradient(to bottom, rgba(15, 23, 42, .36), rgba(15, 23, 42, 0));
}
.mp__header.is-scrolled .mp__headershadow { opacity: 1; }

/* Analog am unteren Rand: sichtbar sobald unterhalb noch Inhalt folgt, nicht nur
   waehrend des Scrollens - siehe updateMobileBottomShadow(). */
.mp__bottomshadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s ease;
  background: linear-gradient(to top, rgba(15, 23, 42, .36), rgba(15, 23, 42, 0));
  z-index: 4;
}
.mp__bottomshadow.is-visible { opacity: 1; }

/* Nach-oben-Knopf (mobil) - erscheint nach etwas Scrollen, siehe
   updateScrollTopButton() in mitarbeiter-plan.js. .mp__content ist bereits
   position:relative (siehe oben), landet also innerhalb der sichtbaren
   Tab-Flaeche und nie ueber der Tableiste, die ausserhalb von .mp__content
   liegt. */
.mp__scrolltop {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 6;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--mp-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.mp__scrolltop.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mp__scrolltop:active { background: var(--mp-brand-dark); }
.mp__scrolltop .material-icons { font-size: 22px; }

.mp__top {
  background: var(--mp-surface);
  border-bottom: 1px solid var(--mp-line);
  padding: 14px 20px 12px;
}

.mp__brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mp__brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }

.mp__mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--mp-brand-deep);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
}

.mp__wordmark {
  font-size: 16px;
  font-weight: 800;
  color: var(--mp-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Firmenname links ersetzt den frueheren NuKlaroPlan-Schriftzug im Kopf - der
   Produktname steht dafuer klein rechts, wie bei "powered by"-Zeilen ueblich. */
.mp__poweredby {
  font-size: 10px;
  font-weight: 600;
  color: var(--mp-ink-3);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 10px;
}
.mp__poweredby span { color: var(--mp-ink-2); font-weight: 700; }

.mp__monthrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  gap: 8px;
}
/* [hidden] allein reicht nicht - die display:flex-Regel oben ist eine Autoren-
   Regel und schlaegt die UA-Regel fuer [hidden], unabhaengig von der Spezifitaet. */
.mp__monthrow[hidden] { display: none; }

.mp__navbtn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-size: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: inherit;
}

.mp__navbtn:disabled { opacity: .4; cursor: default; }

/* Als Knopf (oeffnet die Monats-/Jahresauswahl, siehe monthPickerBtn/wire() in
   mitarbeiter-plan.js) statt eines reinen Textblocks - Button-Reset noetig,
   damit es weiterhin wie eine schlichte Ueberschrift aussieht, nicht wie ein
   Formular-Button. */
.mp__monthlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
}
.mp__monthlabel:active { background: var(--mp-line-soft); }
.mp__month { font-size: 17px; font-weight: 700; color: var(--mp-ink); }
/* Zeigt an, dass sich hier etwas oeffnen laesst - derselbe Pfeil wie an anderen
   aufklappbaren Stellen der App. */
.mp__monthlabel-caret { font-size: 20px; color: var(--mp-ink-3); }

/* ── Inhalt ─────────────────────────────────────────────────────────────── */
/* .mp__content haelt die beiden Tab-Flaechen (Plan/Urlaub, per [hidden]
   umgeschaltet - siehe switchMobileView()) plus den unteren Schatten. Eigener
   position:relative-Rahmen, damit .mp__bottomshadow (bottom:0) am unteren Rand
   dieser Flaeche sitzt statt hinter der Tabbar zu verschwinden. min-height:0 ist
   noetig, weil .mp__content selbst ein flex:1-Kind ist - sonst wuerde das
   verschachtelte flex:1 von .mp__body nicht schrumpfen und das Scrollen bricht. */
.mp__content {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* position:absolute+inset:0 statt flex:1 - so kann #planBody per translateX
   waagerecht verschoben werden (Wischen zum Monatswechsel, siehe wire() in
   mitarbeiter-plan.js), ohne das Flex-Layout von .mp__content durcheinander zu
   bringen. Aendert am sichtbaren Ergebnis nichts, da .mp__content bereits eine
   feste Hoehe hat (flex:1 vom Elternteil) und immer nur eine der Flaechen
   tatsaechlich sichtbar ist (die andere traegt [hidden]). touch-action: pan-y
   ueberlaesst nur senkrechtes Scrollen dem Browser selbst - waagerechte Gesten
   bekommen so zuverlaessig das eigene touchmove, ohne gegen ein bereits vom
   Betriebssystem uebernommenes Scrollen/eine Zurueck-Geste anzukaempfen. */
.mp__body {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px 16px 32px;
  touch-action: pan-y;
  transform: translateX(0);
}
.mp__body > *:last-child { margin-bottom: 0; }
/* Nur waehrend des Zurueckschnappens/Uebernehmens eines Wischens gesetzt (siehe
   wire() in mitarbeiter-plan.js) - waehrend des Ziehens selbst KEIN Uebergang,
   die Position soll exakt am Finger haengen, nicht hinterherfedern. */
.mp__body.is-settling { transition: transform .22s ease; }

/* Vorschau-Flaechen fuer den Vor-/Folgemonat (siehe ladePeekMonate() in
   mitarbeiter-plan.js) - ausserhalb des sichtbaren Bereichs geparkt, in Ruhe
   also unsichtbar. Beim Wischen bewegt wire() alle drei Flaechen gemeinsam per
   translateX, so dass der Nachbarmonat foermlich hereingezogen wird, statt nur
   einen Hinweis einzublenden. */
.mp__body--peek {
  pointer-events: none;
  overflow: hidden;
}
#planPeekPrev { transform: translateX(-100%); }
#planPeekNext { transform: translateX(100%); }

/* Schwarzer Schleier ueber der einziehenden Vorschau-Flaeche, der mit dem
   Zieh-Fortschritt zunehmend durchsichtig wird (siehe bewegeKarussell() in
   mitarbeiter-plan.js) - gibt dem Hereinziehen etwas Tiefe, statt dass der neue
   Monat sofort in voller Helligkeit dasteht. Wie beim Panel selbst waehrend des
   Ziehens KEIN Uebergang (haengt exakt am Finger), nur beim Zurueckschnappen/
   Uebernehmen (is-settling, ueber setzeUebergang() gemeinsam mit den Panels
   gesetzt). */
.mp__body-scrim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.mp__body-scrim.is-settling { transition: opacity .22s ease; }

.mp__next {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  border: none;
  background: linear-gradient(135deg, var(--mp-brand-deep), var(--mp-brand));
  border-radius: var(--mp-radius);
  padding: 16px 18px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .25);
  margin-bottom: 18px;
}

/* Farbe folgt dem Frueh-/Spaet-/Nachtschicht-Modell (wie Streifen/Zeiten-Pille in
   der Tagesliste) - der Verlauf und der Schatten bleiben als Effekt erhalten, nur
   die Basisfarbe wechselt. Fruehschicht braucht deutlich dunkleren Text als Spaet/
   Nacht, sonst reicht der Kontrast auf dem hellen Gelb nicht - ein reines Amber war
   dafuer noch zu hell, deshalb hier fast schwarzbraun statt nur "warm gedaempft". */
.mp__next--nacht { background: linear-gradient(135deg, var(--mp-brand-deep), var(--mp-brand)); box-shadow: 0 8px 20px rgba(37, 99, 235, .25); }
.mp__next--spaet { background: linear-gradient(135deg, #4c1d95, #7c3aed); box-shadow: 0 8px 20px rgba(124, 58, 237, .28); }
.mp__next--frueh { background: linear-gradient(135deg, #eab308, #fde047); box-shadow: 0 8px 20px rgba(234, 179, 8, .3); color: #3a220a; }

/* Keine kommende Schicht gefunden (siehe naechsteSchicht() in
   mitarbeiter-plan.js) - gedaempft statt farbig, damit klar ist, dass hier
   nichts ansteht statt nur eine Farbe zu fehlen. */
.mp__next--empty {
  background: var(--mp-surface);
  border: 1px dashed var(--mp-line);
  box-shadow: none;
  color: var(--mp-ink-2);
  cursor: default;
}
.mp__next--empty .mp__next-label { color: var(--mp-ink-3); }
.mp__next-empty-text { font-size: 14px; font-weight: 600; margin-top: 4px; }

.mp__next-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mp__next-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #bfdbfe;
}

/* Volle Deckkraft statt eines transparenten Tons auf dem Gelb - Transparenz zieht
   die Farbe sonst wieder Richtung Hintergrund und frisst den Kontrast wieder auf. */
.mp__next--frueh .mp__next-label { color: #5c3a17; }

/* Als eigene Pille statt nur fett - hebt sich dadurch deutlich vom Verlauf ab,
   statt nur eine Nuance heller/dunkler als der Rest des Labels zu sein. Immer
   Weiss/Schwarz statt an die Kategorie angepasst (Heute, Morgen, in X Tagen -
   alle Varianten), damit sie auf jeder der drei Hintergrundfarben gleich gut
   lesbar ist. */
.mp__next-when {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
}

.mp__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  animation: mp-pulse 2s infinite;
}

@keyframes mp-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
@media (prefers-reduced-motion: reduce) { .mp__pulse { animation: none } }

.mp__next-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.mp__next-day { font-size: 20px; font-weight: 800; }

.mp__next-timerow { display: flex; align-items: center; gap: 10px; }
.mp__next-times { font-size: 16px; font-weight: 800; }

.mp__next-sub { font-size: 13px; color: #dbeafe; margin-top: 2px; }
.mp__next--frueh .mp__next-sub { color: #5c3a17; }

.mp__next-obj {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, .18);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 13px;
  font-weight: 700;
}
.mp__next-obj .material-icons { font-size: 15px; }

.mp__next--frueh .mp__next-obj { background: rgba(58, 34, 10, .16); color: #3a220a; }

.mp__stats { display: flex; gap: 10px; margin-bottom: 18px; }

.mp__stat {
  flex: 1;
  min-width: 0;
  background: var(--mp-surface);
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--mp-line);
}

.mp__stat-num { font-size: 22px; font-weight: 800; color: var(--mp-ink); }
.mp__stat-num span { font-size: 12px; font-weight: 600; color: var(--mp-ink-3); }
.mp__stat-num.is-accent { color: var(--mp-brand); }
.mp__stat-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--mp-ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* "Schichten"-Kennzahl als Knopf (oeffnet die Monatsuebersicht, siehe
   oeffneMonatsUebersicht()/wire() in mitarbeiter-plan.js) - Hintergrund/Rahmen
   kommen weiterhin von .mp__stat (Klassen-Spezifitaet schlaegt die UA-Vorgaben
   des <button>), hier nur die Buttonvorgaben zuruecksetzen, die abweichen wuerden. */
.mp__stat--tap {
  position: relative;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.mp__stat--tap:active { background: var(--mp-line-soft); }
.mp__stat-caret {
  position: absolute;
  top: 10px;
  right: 8px;
  font-size: 16px;
  color: var(--mp-ink-3);
}

/* Stundenuebersicht: die drei Kacheln bleiben unveraendert - kein flex-grow,
   kein scale auf ihnen, ihre Groesse ist damit strukturell immer gleich. Das
   Panel ist ein 4. Kind, absolut ueber der ganzen Zeile (inset:0), zweistufiger
   Ablauf beim Aufklappen (siehe toggleStundenUebersicht() in
   mitarbeiter-plan.js):
   1) "Leinwand" waechst per clip-path von der "Stunden gesamt"-Kachel aus nach
      rechts auf volle Breite, waehrend die erste Folie im Track (identische
      Beschriftung "Stunden gesamt") durchgehend sichtbar/lesbar bleibt - kein
      Content-Wechsel in dieser Phase.
   2) erst danach rollt .mp__hours-panel-track eine Folie nach oben (translateY)
      und zeigt die Aufschluesselung; die alte Folie rollt dabei aus dem
      sichtbaren Bereich nach oben, die neue kommt von unten nach.
   Beim Zuklappen exakt umgekehrt und zeitlich gespiegelt: erst rollt der Track
   zurueck (Stunden-Beschriftung kommt von oben rein, Daten rollen nach unten
   weg), danach erst schrumpft die Leinwand. */
.mp__stats { position: relative; }

.mp__hours-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Im Ruhezustand HINTER den drei Kacheln (siehe unten): die schon auf
     Kachelbreite zugeschnittene Flaeche (zeigt dort dieselbe Beschriftung wie
     die echte Kachel) darf sie nicht verdecken - erst beim Aufklappen kommt das
     Panel nach vorne. z-index wechselt beim Oeffnen sofort, beim Schliessen
     erst NACHDEM Rollen UND Zuschneiden fertig sind (180ms + 220ms) - dieselbe
     Verzoegerungstechnik wie bei .mp__detail weiter oben, nur auf die
     Gesamtdauer der zwei nacheinander laufenden Schritte abgestimmt. */
  z-index: -1;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: 14px;
  pointer-events: none;
  /* Startgroesse = Breite der "Stunden gesamt"-Kachel (Zeile: 3 gleiche Kacheln,
     2 Zwischenraeume von je 10px, siehe .mp__stats gap). */
  clip-path: inset(0 calc(100% - (100% - 20px) / 3) 0 0 round 14px);
  /* Beim Zuklappen: erst rollen (0 Verzoegerung, 180ms, siehe -track), dann -
     erst NACH diesen 180ms - zuegig zurueckschrumpfen (220ms), damit das
     Wieder-Einfahren nicht zu spaet wirkt. */
  transition: clip-path .22s ease .18s, z-index 0s linear .4s;
}
.mp__stats.is-hours-expanded .mp__hours-panel {
  z-index: 1;
  pointer-events: auto;
  clip-path: inset(0 0% 0 0 round 14px);
  /* Beim Aufklappen: Leinwand zuerst (0 Verzoegerung), etwas gemaechlicher
     (380ms) als vorher, damit das Ausfahren nicht zu schnell wirkt - erst
     danach rollt der Track (siehe dort). */
  transition: clip-path .38s ease, z-index 0s linear 0s;
}

.mp__hours-panel-track {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 200%;
  transform: translateY(0%);
  transition: transform .18s ease;
}
.mp__stats.is-hours-expanded .mp__hours-panel-track {
  transform: translateY(-50%);
  /* Die Leinwand (.mp__hours-panel) braucht formal 380ms, WIRKT wegen ease aber
     schon nach ca. 340ms fertig ausgefahren (ease bremst zum Ende hin stark ab -
     die letzten Millimeter sind kaum noch wahrnehmbar). Bei voller 380ms-
     Verzoegerung entstand dadurch eine kurze, spuerbare Haengephase zwischen
     "sieht fertig aus" und "Rollwechsel startet". Verzoegerung deshalb auf genau
     diese gefuehlte Fertig-Marke gekuerzt statt auf die exakte 380ms. */
  transition: transform .25s ease .34s;
}

.mp__hours-panel-slide {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  padding: 12px 14px;
}
.mp__hours-panel-slide--label { flex-direction: column; align-items: flex-start; justify-content: center; }

.mp__hours-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--mp-line-soft);
  color: var(--mp-ink-2);
  cursor: pointer;
  padding: 0;
}
.mp__hours-panel-close .material-icons { font-size: 16px; }
.mp__hours-panel-close:active { background: var(--mp-ink-4); }

.mp__hours-panel-body { gap: 22px; }
.mp__hours-mini { display: flex; flex-direction: column; gap: 2px; }
.mp__hours-mini-val { font-size: 20px; font-weight: 800; color: var(--mp-ink); }
.mp__hours-mini-val.is-done { color: #15803d; }
.mp__hours-mini-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--mp-ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mp__kw {
  font-size: 11px;
  font-weight: 700;
  color: var(--mp-ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 4px 6px;
}

.mp__week { margin-bottom: 6px; }
.mp__days { display: flex; flex-direction: column; gap: 6px; }

.mp__day {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: var(--mp-surface);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  cursor: default;
  color: inherit;
}

.mp__day.is-vacation { background: var(--mp-vacation-bg); }
.mp__day.is-sick { background: var(--mp-sick-bg); }
.mp__day.is-today { border-color: var(--mp-brand); border-width: 1.5px; }

/* Die ganze Zeile oeffnet jetzt die Schichtdetails (data-day am Wurzel-Div, siehe
   dayHtml() in mitarbeiter-plan.js), nicht mehr nur der Pfeil-Knopf. */
.mp__day.is-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mp__day.is-tappable:active { background: var(--mp-line-soft); }

/* Hervorhebung/Abdunkeln waehrend die Detailansicht ein-/ausschiebt, siehe
   markiereGeoeffneteSchicht() in mitarbeiter-plan.js. Gleiche Dauer wie der
   .mp__detail-Uebergang, damit beides zusammen wirkt. */
.mp__day { transition: opacity .28s ease, background .28s ease, border-color .28s ease; }
.mp__day.is-opening { border-color: var(--mp-brand); border-width: 1.5px; background: var(--mp-brand-tint); }
.mp__day.is-dimmed { opacity: .35; }

/* Eigener, dezenter Farbton statis-vacation/is-sick: das sind admin-bestaetigte
   Abwesenheiten, ein Wunschfrei-Tag ist dagegen nur ein noch unbestaetigter
   Wunsch des Mitarbeiters. */
.mp__day.is-wunschfrei { background: #f0fdf4; border-color: #86efac; }

.mp__daynum { width: 46px; text-align: center; flex-shrink: 0; }
.mp__daynum-n { font-size: 18px; font-weight: 800; color: var(--mp-ink); }
.mp__daynum-d { font-size: 11px; font-weight: 600; color: var(--mp-ink-3); text-transform: uppercase; }
.mp__day.is-weekend .mp__daynum-n { color: var(--mp-ink-3); }
.mp__day.is-weekend .mp__daynum-d { color: var(--mp-ink-4); }
.mp__day.is-sunday .mp__daynum-n { color: #dc2626; }
.mp__day.is-sunday .mp__daynum-d { color: #dc2626; }

/* Ersetzt an dieser Stelle den Wochentag - welcher Wochentag heute ist, ist
   zweitrangig, sobald die Zeile ohnehin als "heute" hervorgehoben ist. */
.mp__daynum-today {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mp-brand);
  border-radius: 999px;
  padding: 2px 6px;
}

.mp__stripe {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  background: #e2e8f0;
  flex-shrink: 0;
}

/* Schichtzeilen: Streifen und Zeiten-Pille haben dieselbe Farbe (schichtKategorie) -
   ohne Luecke und mit stumpfer Nahtkante wirken sie wie ein durchgehendes Element
   statt zwei separaten Farbflaechen. */
.mp__day.is-tappable .mp__stripe {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -12px;
}
.mp__day.is-tappable .mp__timepill {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.mp__daymain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mp__daytitle { font-size: 16px; font-weight: 700; color: var(--mp-ink); }
.mp__day.is-free .mp__daytitle { color: var(--mp-muted); }
.mp__daysub { font-size: 13px; color: var(--mp-ink-2); }

.mp__dayobj {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp__dayobj .material-icons { font-size: 15px; color: var(--mp-ink); }

.mp__timepill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  border-radius: 8px;
  padding: 6px 10px;
}
.mp__timepill-value { font-size: 14px; font-weight: 800; }
.mp__timepill-sep { font-size: 13px; font-weight: 700; flex-shrink: 0; }

/* Buendelt den optionalen Anpassungs-Hinweis und die immer sichtbare Schicht-Art-
   Pille - so muss nur ein Element rechtsbuendig andocken, egal ob eines oder beide
   Kinder vorhanden sind. */
.mp__timepill-tail {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Hinweis auf eine Anpassung gelb markiert - eigener Hintergrund statt reiner
   Textfarbe, damit es auch auf der gelben Fruehschicht-Pille selbst lesbar bleibt. */
.mp__timepill-note {
  font-size: 11px;
  font-weight: 800;
  background: #fde047;
  color: #713f12;
  padding: 3px 8px;
  border-radius: 999px;
}

.mp__timepill-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .24);
  color: #fff;
}

.mp__timepill--frueh { background: #eab308; }
.mp__timepill--frueh .mp__timepill-value { color: #422006; }
.mp__timepill--frueh .mp__timepill-sep { color: rgba(66, 32, 6, .65); }
.mp__timepill--frueh .mp__timepill-type { background: rgba(66, 32, 6, .16); color: #422006; }

.mp__timepill--spaet { background: #7c3aed; }
.mp__timepill--spaet .mp__timepill-value { color: #fff; }
.mp__timepill--spaet .mp__timepill-sep { color: rgba(255, 255, 255, .75); }

.mp__timepill--nacht { background: #2563eb; }
.mp__timepill--nacht .mp__timepill-value { color: #fff; }
.mp__timepill--nacht .mp__timepill-sep { color: rgba(255, 255, 255, .75); }

.mp__badge {
  font-size: 11px;
  font-weight: 800;
  border-radius: 7px;
  padding: 4px 8px;
  flex-shrink: 0;
  background: #eef2ff;
  color: #3730a3;
}

.mp__chevron {
  color: var(--mp-brand);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 10px;
  margin: -10px -6px;
  border-radius: 8px;
  align-self: center;
}

.mp__chevron:hover { background: rgba(37, 99, 235, .08); color: var(--mp-brand-dark); }

.mp__empty {
  display: grid;
  place-items: center;
  padding: 48px 16px;
  text-align: center;
  color: var(--mp-ink-3);
}

.mp__empty-icon { font-size: 32px; }
.mp__empty-text { font-size: 14px; margin-top: 8px; max-width: 260px; }

/* Entprellter Monatswechsel (siehe blaetternEntprellt() in mitarbeiter-plan.js) -
   ersetzt den (jetzt falschen) alten Monat sofort, waehrend im Hintergrund
   gewartet wird, ob noch weiter geblaettert wird, bevor wirklich geladen wird. */
.mp__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 16px;
  color: var(--mp-ink-3);
}
.mp__loading-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--mp-line);
  border-top-color: var(--mp-brand);
  animation: mp-loading-spin .7s linear infinite;
}
.mp__loading-text { font-size: 13px; font-weight: 600; }
@keyframes mp-loading-spin { to { transform: rotate(360deg); } }

/* ── Detail ─────────────────────────────────────────────────────────────── */

/* Schiebt statt hart umzuschalten (display:none/flex liesse sich nicht animieren) -
   Dauer muss zu DETAIL_UEBERGANG_MS in mitarbeiter-plan.js passen (eigenes Tempo,
   bewusst etwas langsamer als der Monatswechsel-Uebergang). visibility ist
   zeitversetzt: beim Oeffnen sofort sichtbar (damit man den Einschub sieht), beim
   Schliessen erst NACH dem Zurueckschieben unsichtbar (sonst wuerde das Ausblenden
   den Uebergang abschneiden) - ausserdem so aus Tab-Reihenfolge/Screenreader raus,
   solange geschlossen.
   Der Rueckweg (detailBackBtn -> closeDetail() -> .active entfernt) braucht keine
   eigene Animation: derselbe Uebergang laeuft automatisch rueckwaerts. */
.mp__detail {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: var(--mp-bg);
  z-index: 20;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s ease, visibility 0s linear .28s;
}

.mp__detail.active {
  transform: translateX(0);
  visibility: visible;
  transition: transform .28s ease, visibility 0s linear 0s;
}

.mp__detail-top {
  background: #fff;
  padding: 14px 16px;
  border-bottom: 1px solid var(--mp-line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.mp__detail-title { font-size: 16px; font-weight: 800; color: var(--mp-ink); }
.mp__detail-sub { font-size: 12px; color: var(--mp-ink-2); }
.mp__detail-body { flex: 1; overflow-y: auto; padding: 16px; }

.mp__hero {
  border-radius: var(--mp-radius);
  padding: 18px;
  color: #fff;
  margin-bottom: 14px;
  background: var(--mp-brand);
}

/* Farbe folgt dem Frueh-/Spaet-/Nachtschicht-Modell wie ueberall sonst in der
   Mitarbeiter-Ansicht - Fruehschicht braucht dunklen statt hellen Text, sonst
   waere er auf dem Gelb kaum lesbar. */
.mp__hero--nacht { background: var(--mp-brand); }
.mp__hero--spaet { background: #7c3aed; }
.mp__hero--frueh { background: #eab308; color: #3a220a; }

.mp__hero-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.mp__hero-name { font-size: 24px; font-weight: 800; }

.mp__hero-type {
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.mp__hero--frueh .mp__hero-type {
  background: rgba(58, 34, 10, .16);
}

.mp__hero-times { display: flex; gap: 20px; margin-top: 16px; }
.mp__hero-key { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.mp__hero-val { font-size: 19px; font-weight: 800; margin-top: 2px; }

.mp__card {
  background: #fff;
  border-radius: var(--mp-radius);
  border: 1px solid var(--mp-line);
  overflow: hidden;
  margin-bottom: 14px;
}

.mp__map { height: 150px; background: #e8edf3; position: relative; overflow: hidden; }
.mp__map svg { width: 100%; height: 100%; display: block; }

.mp__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
}

.mp__pin-body {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #dc2626;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}

.mp__pin-dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; transform: rotate(45deg); }

.mp__addr { padding: 14px 16px; }
.mp__addr-row { display: flex; align-items: flex-start; gap: 10px; }

.mp__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eff6ff;
  color: var(--mp-brand);
  display: grid;
  place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}
.mp__icon .material-icons { font-size: 20px; }

.mp__addr-name { font-size: 14px; font-weight: 700; color: var(--mp-ink); }
.mp__addr-lines { font-size: 13px; color: var(--mp-ink-2); margin-top: 2px; }

.mp__nav {
  width: 100%;
  margin-top: 12px;
  background: var(--mp-brand);
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.mp__nav:hover { background: var(--mp-brand-dark); }

/* ── Namen-Menü (mobil/App) ─────────────────────────────────────────────────
   Teilt sich .mp__sheet (Hintergrund/Positionierung/active) mit dem
   Einstellungen-Blatt darunter, bekommt aber eine eigene, kuerzere Karte statt
   .mp__sheet-card - kein Scrollbereich noetig fuer zwei Zeilen. */

.mp__menu-card {
  background: #fff;
  width: 100%;
  border-radius: 20px 20px 0 0;
  padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
}

.mp__menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 8px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--mp-line-soft);
}

.mp__menu-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--mp-brand-deep);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
}

.mp__menu-headtext { min-width: 0; }
.mp__menu-name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--mp-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp__menu-firma {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--mp-ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp__menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 8px;
  border: none;
  border-radius: 10px;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--mp-ink);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.mp__menu-item:active { background: var(--mp-line-soft); }
.mp__menu-item .material-icons { font-size: 21px; color: var(--mp-ink-2); }
.mp__menu-item--danger { color: #dc2626; }
.mp__menu-item--danger .material-icons { color: #dc2626; }

/* ── Konto-Blatt ────────────────────────────────────────────────────────── */

.mp__sheet {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 30;
  align-items: flex-end;
}

.mp__sheet.active { display: flex; }

.mp__sheet-card {
  background: #fff;
  width: 100%;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 28px;
  max-height: 80vh;
  overflow-y: auto;
}

.mp__sheet-title { font-size: 17px; font-weight: 800; margin: 0 0 2px; }
.mp__sheet-sub { font-size: 13px; color: var(--mp-ink-2); margin: 0 0 16px; }

/* Kopfzeile mit eigenem Schliessen-Knopf statt der sonst ueblichen Aktion ganz
   unten (siehe .mp__sheet-actions) - bei einer Jahreszeile + Monatsraster
   darunter waere ein Knopf am Ende zu weit vom Antippen der Kopfzeile entfernt. */
.mp__sheet-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mp__sheet-closebtn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--mp-line-soft);
  color: var(--mp-ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.mp__sheet-closebtn .material-icons { font-size: 19px; }

/* Jahre wie eine Radio-Auswahl: genau eines aktiv, wechselt nur, welches Jahr
   das Monatsraster darunter zeigt - noch kein Monatswechsel. */
.mp__yearpicker { display: flex; gap: 8px; margin-bottom: 18px; }
.mp__yearpicker-btn {
  flex: 1;
  border: 1.5px solid var(--mp-line);
  background: #fff;
  color: var(--mp-ink-2);
  border-radius: 11px;
  padding: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}
.mp__yearpicker-btn.is-active { border-color: var(--mp-brand); background: var(--mp-brand-tint); color: var(--mp-brand-dark); }

/* Monate als aufgeklappte Dropdown-Liste statt eines Rasters - eine Zeile pro
   Monat, volle Breite, wie die aufgeklappten Optionen eines <select>. */
.mp__monthlist {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mp-line);
  border-radius: 12px;
  overflow: hidden;
}
.mp__monthlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--mp-line-soft);
  background: #fff;
  color: var(--mp-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 16px;
  cursor: pointer;
  text-align: left;
}
.mp__monthlist-item:last-child { border-bottom: none; }
.mp__monthlist-item:active { background: var(--mp-line-soft); }
/* Der Monat, der gerade tatsaechlich angezeigt wird (nur wenn das ausgewaehlte
   Jahr oben auch state.jahr entspricht - siehe zeichneMonatsMenu()) - Haekchen
   plus Hervorhebung, wie eine ausgewaehlte Option in einem <select>. */
.mp__monthlist-item.is-current { background: var(--mp-brand-tint); color: var(--mp-brand-dark); font-weight: 800; }
.mp__monthlist-check { font-size: 19px; color: var(--mp-brand-dark); }

/* Monatsuebersicht (mobil): Mini-Kalender mit vollen Wochenreihen, gefuellt via
   calendarCells()/ovCellHtml() in mitarbeiter-plan.js - Tage mit Schicht in der
   jeweiligen Schichtfarbe (siehe Schichtfarbkonzept), Abwesenheiten in denselben
   Farben wie an den anderen Stellen der App. */
.mp__ov-card { max-height: 88vh; overflow-y: auto; }

.mp__ov-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.mp__ov-dow div {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--mp-ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mp__ov-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.mp__ovcell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}
.mp__ovcell-num { font-size: 13px; font-weight: 600; color: var(--mp-ink); }
.mp__ovcell.is-muted .mp__ovcell-num { color: var(--mp-ink-3); opacity: .5; }
.mp__ovcell.is-sunday .mp__ovcell-num { color: #dc2626; }
/* Als ::after statt direktem box-shadow auf der Zelle: has-farbe deckt die Zelle
   inzwischen komplett mit den opaken Kinderelementen ab (.mp__ovcell-edge/-fill,
   siehe unten) und uebermalte damit den inset-box-shadow der Zelle selbst -
   ::after wird nach den Kindern gemalt, liegt also sichtbar oben drauf. */
.mp__ovcell.is-today::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px var(--mp-brand);
  pointer-events: none;
}
.mp__ovcell.is-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mp__ovcell.is-tappable:active { background: var(--mp-line-soft); }
/* Kante + abgeschwaechte Flaeche wie im Schichtplan-Raster der Admin-Ansicht
   (Vorlage 3A "Zweifarbig geteilt") - dieselben Farben wie zuvor (ovFarbe() in
   mitarbeiter-plan.js), nur nicht mehr vollflaechig. .mp__ovcell-num traegt bei
   has-farbe keine eigene Textfarbe mehr (siehe CSS-Regeln oben) - die kommt seit
   dem Umbau direkt inline via contrastColor(), weil sie gegen die individuell
   gemischte Flaechenfarbe berechnet wird, nicht gegen zwei feste Faelle. */
.mp__ovcell-edge { width: 4px; flex-shrink: 0; align-self: stretch; }
.mp__ovcell-fill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

/* Haken statt vollflaechigem Gruen fuer eine bereits beendete Schicht - so bleibt
   die eigentliche Schichtfarbe (Frueh/Spaet/Nacht) weiterhin erkennbar, "erledigt"
   kommt stattdessen als kleines Abzeichen oben drauf (Position wie die "Heute"-
   Markierung: eigenes, absolut positioniertes Element ueber den Kind-Flaechen). */
.mp__ovcell-done {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 8px;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .85);
  pointer-events: none;
}

.mp__ov-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
/* Pillen in der jeweiligen Schichtfarbe (background + color per Inline-Style
   in mitarbeiter.html) statt eines kleinen Punkts - auf einen Blick erkennbar,
   welche Farbe wofuer steht. */
.mp__ov-legenditem {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Hochfahr-Animation nur fuer dieses eine Sheet (die anderen .mp__sheet-Nutzungen -
   Monatsauswahl, Namen-/Einstellungen-Menue - bleiben unveraendert). Braucht
   dasselbe Prinzip wie .mp__detail: display:none/flex liesse sich nicht
   animieren, deshalb dauerhaft display:flex und stattdessen ueber
   transform/visibility ein-/ausblenden. */
#shiftsOverviewSheet {
  display: flex;
  background: rgba(15, 23, 42, 0);
  visibility: hidden;
  pointer-events: none;
  transition: background .26s ease, visibility 0s linear .26s;
}
#shiftsOverviewSheet.active {
  background: rgba(15, 23, 42, .45);
  visibility: visible;
  pointer-events: auto;
  transition: background .26s ease, visibility 0s linear 0s;
}
#shiftsOverviewSheet .mp__sheet-card {
  transform: translateY(100%);
  transition: transform .26s ease;
}
#shiftsOverviewSheet.active .mp__sheet-card {
  transform: translateY(0);
}

.mp__kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--mp-line-soft); font-size: 14px; }
.mp__kv:last-of-type { border-bottom: none; }
.mp__kv-key { color: var(--mp-ink-2); }
.mp__kv-val { font-weight: 700; }
.mp__kv.is-strong .mp__kv-val { color: var(--mp-brand); }

.mp__consent {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--mp-line-soft);
}

.mp__consent-note { margin: 6px 0 0; font-size: 12px; color: var(--mp-ink-3); }

/* ── Einstellungszeile mit Schalter ─────────────────────────────────────────
   Fuer echte An/Aus-Funktionen (Karten-Einwilligung, Benachrichtigungen) -
   anders als .acheck (Kaestchen, fuer einmalige Zustimmungen wie beim
   Datenschutz-Haken auf der Anmeldeseite) bewusst ein Schalter, wie man es aus
   Apps kennt: Text/Beschreibung links, Schalter rechts, nie umbrechend. */
.mp__settingsrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mp__settingsrow[hidden] { display: none; }
.mp__settingsrow-text { font-size: 13px; color: var(--mp-ink-2); line-height: 1.45; }

.mp__switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
  cursor: pointer;
}
.mp__switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.mp__switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--mp-ink-4);
  transition: background .18s ease;
}
.mp__switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .3);
  transition: transform .18s ease;
}
.mp__switch input:checked + .mp__switch-track { background: var(--mp-brand); }
.mp__switch input:checked + .mp__switch-track .mp__switch-thumb { transform: translateX(18px); }
.mp__switch input:focus-visible + .mp__switch-track { outline: 2px solid var(--mp-brand-dark); outline-offset: 2px; }
.mp__switch input:disabled { cursor: default; }
.mp__switch input:disabled + .mp__switch-track { opacity: .6; }

/* Wunschfrei-Banner: dieselbe Zeile wie im Konto-Blatt, hier aber als auffaellige
   Flaeche zwischen Kopf und Tagesliste statt in einer Karte - deshalb eigener
   Hintergrund/Innenabstand oben auf .mp__settingsrow drauf. */
.mp__wunschfrei-banner {
  background: var(--mp-brand-tint);
  padding: 10px 20px;
  border-bottom: 1px solid var(--mp-line);
  flex-shrink: 0;
}
.mp__wunschfrei-banner .mp__settingsrow-text { color: var(--mp-brand-dark); font-weight: 600; }

/* Knopf "Wunschfrei eintragen" - oeffnet #wunschfreiSheet (siehe
   beginneWunschfrei() in mitarbeiter-plan.js), speichert selbst nichts mehr -
   das passiert jetzt ueber den "Übernehmen"-Knopf im Kalender-Sheet. */
.mp__wunschfrei-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--mp-brand);
  background: #fff;
  color: var(--mp-brand-dark);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.mp__wunschfrei-btn:disabled { cursor: default; opacity: .6; }

@keyframes mp-wunschfrei-spin { to { transform: rotate(360deg); } }

/* Wunschfrei-Kalender (mobil, siehe #wunschfreiSheet): eigener Mini-Kalender im
   Sheet statt der kompletten Tagesliste zum Markieren - Raster/Groesse lehnen
   sich an .mp__ov-grid/.mp__ovcell an (dasselbe Sheet-Muster), die Kacheln sind
   hier aber tatsaechlich antippbar statt nur Anzeige. */
.mp__wf-hint { margin: 0 0 14px; font-size: 13px; color: var(--mp-brand-dark); font-weight: 600; }

.mp__wf-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}

.mp__wfcell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid var(--mp-line);
  background: #fff;
  font-family: inherit;
  padding: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.mp__wfcell.is-muted { border-color: transparent; background: none; }
.mp__wfcell-num { font-size: 13px; font-weight: 700; color: var(--mp-ink); }
.mp__wfcell.is-muted .mp__wfcell-num { color: var(--mp-ink-3); opacity: .5; }
.mp__wfcell.is-sunday .mp__wfcell-num { color: #dc2626; }
.mp__wfcell.is-today { border-color: var(--mp-brand); border-width: 1.5px; }

/* Belegte Tage (Schicht/Abwesenheit) sind nicht antippbar - eine duenne, farbige
   Unterkante (dieselbe Farbe wie der Streifen in der Tagesliste, siehe
   stripeFor()) zeigt auf einen Blick, WARUM: als box-shadow statt echter
   Kantenlinie, damit sie den Rahmen der Zelle nicht mit veraendert. */
.mp__wfcell.is-belegt { background: var(--mp-line-soft); box-shadow: inset 0 -3px 0 var(--wf-farbe, transparent); }
.mp__wfcell.is-belegt .mp__wfcell-num { color: var(--mp-ink-3); }

.mp__wfcell.is-tappable { cursor: pointer; }
.mp__wfcell.is-tappable:active { background: var(--mp-brand-tint); border-color: var(--mp-brand); }

/* Markierter Tag: dieselben Farben wie die "W"-Markierung in der Tagesliste
   (.mp__day.is-wunschfrei), damit beide Ansichten erkennbar zusammengehoeren. */
.mp__wfcell.is-marked { border-style: solid; border-color: #86efac; background: #f0fdf4; }
.mp__wfcell.is-marked .mp__wfcell-num { color: #15803d; }
.mp__wfcell-check {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #15803d;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .85);
  pointer-events: none;
}

.mp__wf-save-spinner {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  display: none;
  margin-right: 7px;
  animation: mp-wunschfrei-spin .7s linear infinite;
}
#wunschfreiSheetSaveBtn { display: flex; align-items: center; justify-content: center; }
#wunschfreiSheetSaveBtn.is-saving .mp__wf-save-spinner { display: inline-block; }

/* Dieselbe Hochfahr-Animation wie #shiftsOverviewSheet statt des abrupten
   display:none/flex-Wechsels der uebrigen Sheets - fuer den neuen Haupt-
   Einstiegspunkt zum Wunschfrei-Eintragen passender als ein hartes Ein-/
   Ausblenden. */
#wunschfreiSheet {
  display: flex;
  background: rgba(15, 23, 42, 0);
  visibility: hidden;
  pointer-events: none;
  transition: background .26s ease, visibility 0s linear .26s;
}
#wunschfreiSheet.active {
  background: rgba(15, 23, 42, .45);
  visibility: visible;
  pointer-events: auto;
  transition: background .26s ease, visibility 0s linear 0s;
}
#wunschfreiSheet .mp__sheet-card {
  transform: translateY(100%);
  transition: transform .26s ease;
}
#wunschfreiSheet.active .mp__sheet-card {
  transform: translateY(0);
}

/* Karte erst nach Einwilligung: bis dahin ein Kasten, der erklaert, warum. */
.mp__mapgate {
  padding: 18px 16px;
  text-align: center;
  background: #f8fafc;
  border-bottom: 1px solid var(--mp-line);
}

.mp__mapgate-text { font-size: 13px; color: var(--mp-ink-2); line-height: 1.5; margin: 0 0 10px; }

.mp__mapgate-btn {
  border: 1px solid var(--mp-brand);
  background: #fff;
  color: var(--mp-brand);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.mp__mapframe { width: 100%; height: 190px; border: 0; display: block; }

.mp__sheet-actions { display: flex; gap: 10px; margin-top: 18px; }

.mp__btn {
  flex: 1;
  border-radius: 11px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--mp-line);
  background: #fff;
  color: var(--mp-ink);
}

.mp__btn--primary { background: var(--mp-brand); border-color: var(--mp-brand); color: #fff; }

/* .mp__btn setzt flex:1, das wirkt nur innerhalb eines Flex-Elternteils
   (.mp__sheet-actions) - fuer den alleinstehenden Installieren-Button hier
   stattdessen volle Breite. */
.mp__btn-block { display: block; width: 100%; margin-top: 16px; }
/* [hidden] allein reicht nicht - display:block oben ist eine Autoren-Regel und
   schlaegt die UA-Regel fuer [hidden], unabhaengig von der Spezifitaet (siehe
   dieselbe Falle bei .mp__monthrow weiter oben). Ohne das blieb der Installieren-
   Button immer sichtbar, auch wenn die App schon installiert war. */
.mp__btn-block[hidden] { display: none; }

/* ── Untere Tableiste (mobil) ───────────────────────────────────────────────
   App-artige Navigation statt reinem Kopf-Avatar: Plan/Urlaub als gleichwertige
   Reiter, der Name als dritter Reiter oeffnet dasselbe Konto-Blatt wie zuvor der
   Avatar oben (siehe openSheet() in mitarbeiter-login.js). env(safe-area-inset-*)
   haelt die Leiste auf Geraeten mit Home-Indikator/Notch frei. */

.mp__tabbar {
  display: flex;
  flex-shrink: 0;
  z-index: 5;
  background: var(--mp-surface);
  border-top: 1px solid var(--mp-line);
  padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}

.mp__tabbtn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--mp-ink-3);
  font-family: inherit;
  cursor: pointer;
}

.mp__tabbtn .material-icons { font-size: 22px; }

.mp__tabbtn-label {
  font-size: 11px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp__tabbtn.is-active { color: var(--mp-brand-dark); }

.mp__tabbtn-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mp-brand-tint);
  color: var(--mp-brand-dark);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 10px;
}

/* ── Desktop: Sidebar, Kalendergitter, Detail-Panel ─────────────────────────
   Nach der Designvorlage "Einsatzplan Desktop" - ohne Legende, Sidebar
   vorerst nur mit Mein Plan/Urlaub. Eigener Baum neben .mp/.mp__detail,
   nicht dasselbe Markup umgeflossen: die Informationsarchitektur ist zu
   unterschiedlich (Wochenliste vs. Kalendergitter mit Seiten-Panel). Beide
   Baeume bekommen bei jedem Laden dieselben Daten, welcher sichtbar ist
   entscheidet ausschliesslich die Medienabfrage unten - kein JS-Umschalten
   noetig, ein Grössern des Fensters wirkt sofort. */

.mpd { display: none; }

.mpd__side {
  width: 216px;
  flex-shrink: 0;
  background: #0f1e3d;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
}

.mpd__brand { display: flex; align-items: center; gap: 9px; padding: 0 6px 20px; }

.mpd__mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--mp-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.mpd__wordmark { font-size: 16px; font-weight: 800; color: #fff; }
.mpd__wordmark span { color: #60a5fa; }

.mpd__nav { display: flex; flex-direction: column; gap: 2px; }

.mpd__navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: none;
  background: none;
  color: #cbd5e1;
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.mpd__navicon { opacity: .75; }
.mpd__navitem:hover { background: rgba(255, 255, 255, .06); }
.mpd__navitem.is-active { background: rgba(37, 99, 235, .25); color: #fff; font-weight: 600; }
.mpd__navitem.is-active .mpd__navicon { opacity: .9; }

.mpd__user {
  margin-top: auto;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 14px 6px 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.mpd__useravatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mp-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.mpd__userinfo { min-width: 0; }
.mpd__username { display: block; font-size: 13px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpd__userfirma { display: block; font-size: 11px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mpd__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.mpd__view { display: none; flex: 1; min-height: 0; flex-direction: column; }
.mpd__view.is-active { display: flex; }

.mpd__topbar {
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid var(--mp-line);
  padding: 16px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mpd__topbar--simple { justify-content: flex-start; }
.mpd__viewtitle { font-size: 22px; font-weight: 800; color: var(--mp-ink); }
.mpd__topleft { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mpd__monthnav { display: flex; gap: 6px; flex-shrink: 0; }

.mpd__navbtn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  display: grid;
  place-items: center;
}

.mpd__navbtn:hover { border-color: #cbd5e1; }
.mpd__navbtn:disabled { opacity: .4; cursor: default; }
.mpd__monthlabel { font-size: 22px; font-weight: 800; color: var(--mp-ink); }

.mpd__stats { display: flex; gap: 18px; align-items: center; flex-shrink: 0; }
.mpd__stat { text-align: right; }
.mpd__stat-num { font-size: 18px; font-weight: 800; color: var(--mp-ink); }
.mpd__stat-num span { font-size: 11px; color: var(--mp-ink-3); font-weight: 600; }
.mpd__stat-num.is-accent { color: var(--mp-brand); }
.mpd__stat-label { font-size: 11px; color: var(--mp-ink-2); }

.mpd__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 26px;
  background: #fff;
  border-bottom: 1px solid var(--mp-line);
  flex-shrink: 0;
}

.mpd__legend-pill { font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; }
.mpd__legend-pill--frueh { background: #eab308; color: #422006; }
.mpd__legend-pill--spaet { background: #7c3aed; color: #fff; }
.mpd__legend-pill--nacht { background: #2563eb; color: #fff; }

.mpd__planbody { flex: 1; min-height: 0; display: flex; }

.mpd__calendarwrap {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mpd__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; flex-shrink: 0; }
.mpd__dow > div { font-size: 11px; font-weight: 700; color: var(--mp-ink-3); letter-spacing: .09em; text-transform: uppercase; padding-left: 4px; }
.mpd__dow > div:last-child { color: var(--mp-ink); }

.mpd__grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(104px, 1fr); gap: 8px; }

.mpd__cell {
  min-width: 0;
  min-height: 0;
  background: #fff;
  border: 1.5px solid var(--mp-line);
  border-radius: 11px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: default;
  font-family: inherit;
  text-align: left;
  color: inherit;
}

.mpd__cell.is-muted { background: #f8fafc; }
.mpd__cell.is-weekend:not(.is-muted) { background: #fbfcfe; }
.mpd__cell.is-sunday:not(.is-muted) { background: #e9edf3; }
.mpd__cell.is-sunday:not(.is-muted) .mpd__cellnum { color: #dc2626; }
.mpd__cell.is-tappable { cursor: pointer; }
.mpd__cell.is-tappable:hover { border-color: #cbd5e1; }
.mpd__cell.is-selected { border-color: var(--mp-brand); background: #f2f7ff; }
.mpd__cell.is-vacation { background: var(--mp-vacation-bg); }
.mpd__cell.is-sick { background: var(--mp-sick-bg); }

.mpd__celltoday {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mp-brand);
  border-radius: 999px;
  padding: 2px 8px;
}

.mpd__cellhead { display: flex; align-items: center; justify-content: space-between; }
.mpd__cellnum-group { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mpd__cellnum { font-size: 14px; font-weight: 700; color: var(--mp-ink); }
.mpd__cell.is-muted .mpd__cellnum { color: var(--mp-ink-4); }
.mpd__cellbadge { font-size: 10px; font-weight: 800; border-radius: 5px; padding: 2px 5px; }

.mpd__cellentry { margin-top: 6px; min-width: 0; flex: 1; border-left: 3px solid #e2e8f0; padding-left: 7px; display: flex; flex-direction: column; gap: 3px; }
.mpd__celltitle { font-size: 14px; font-weight: 700; color: var(--mp-ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mpd__cellfree {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mp-muted);
  font-size: 13px;
  font-weight: 600;
}

.mpd__celltimes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 7px 4px;
  margin-bottom: 10px;
}

.mpd__celltimes-value { font-size: 15px; font-weight: 800; }
.mpd__celltimes-sep { font-size: 14px; font-weight: 700; flex-shrink: 0; }

.mpd__celltimes--frueh { background: #eab308; }
.mpd__celltimes--frueh .mpd__celltimes-value { color: #422006; }
.mpd__celltimes--frueh .mpd__celltimes-sep { color: rgba(66, 32, 6, .65); }

.mpd__celltimes--spaet { background: #7c3aed; }
.mpd__celltimes--spaet .mpd__celltimes-value { color: #fff; }
.mpd__celltimes--spaet .mpd__celltimes-sep { color: rgba(255, 255, 255, .75); }

.mpd__celltimes--nacht { background: #2563eb; }
.mpd__celltimes--nacht .mpd__celltimes-value { color: #fff; }
.mpd__celltimes--nacht .mpd__celltimes-sep { color: rgba(255, 255, 255, .75); }

.mpd__celllocation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  background: #eef2ff;
  color: var(--mp-ink);
  padding: 5px 12px;
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mpd__celllocation .material-icons { font-size: 15px; }

.mpd__cellshiftname {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: #eef2ff;
  color: var(--mp-ink-2);
  padding: 5px 12px;
  border-radius: 999px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mpd__empty { grid-column: 1 / -1; display: grid; place-items: center; height: 100%; text-align: center; color: var(--mp-ink-3); }
.mpd__empty-icon { font-size: 32px; }
.mpd__empty-text { font-size: 14px; margin-top: 8px; max-width: 320px; }

.mpd__detail {
  width: 340px;
  flex-shrink: 0;
  background: #fff;
  border-left: 1px solid var(--mp-line);
  overflow-y: auto;
  padding: 20px;
}

.mpd__detail-placeholder { height: 100%; display: grid; place-items: center; color: var(--mp-ink-3); text-align: center; padding: 24px; }
.mpd__detail-placeholder-icon { font-size: 30px; }
.mpd__detail-placeholder-text { font-size: 13px; margin-top: 8px; }

.mpd__detail-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--mp-ink-3); font-weight: 700; }
.mpd__detail-date { font-size: 18px; font-weight: 800; margin-top: 4px; color: var(--mp-ink); }

.mpd__urlaubwrap { max-width: 420px; padding: 24px 26px; }
.mpd__urlaubcard { background: #fff; border: 1px solid var(--mp-line); border-radius: var(--mp-radius); padding: 4px 20px; }

.mpd__urlaubhint {
  margin-top: 16px;
  border: 1px dashed var(--mp-ink-4);
  border-radius: var(--mp-radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--mp-ink-2);
  background: #f8fafc;
}

@media (min-width: 1080px) {
  body.mp-open .mp.active { display: none; }
  body.mp-open .mp__detail.active { display: none; }
  body.mp-open .mpd {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* ── Live-Aktualisierung: Hinweis-Toast ────────────────────────────────────
   Erscheint kurz, wenn der Server ueber die offene Verbindung eine Aenderung
   am gerade angezeigten Plan meldet (siehe oeffneStream() in mitarbeiter-plan.js).
   Bewusst oben, klein und nicht blockierend, statt zentriert wie versionToast im
   Planungswerkzeug - hier soll die laufende Ansicht nicht verdeckt werden. */

.plan-changed-toast {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
}

.plan-changed-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.plan-changed-toast-card {
  background: var(--mp-brand-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(30,58,138,.28);
}

/* ── Live-Aktualisierung: einzelne Tageszelle markieren ────────────────────
   Neue Schicht: auffaelliger und laenger sichtbarer Puls (--mp-brand als rgba,
   115,99,235 = #2563eb). Weggefallene Schicht: bewusst kuerzer und neutral grau
   statt farbig - ein jetzt leerer Tag soll nicht wie eine Fehlermeldung wirken
   und nicht lange nachhaengen. Dauer wird in mitarbeiter-plan.js gesetzt
   (HIGHLIGHT_DAUER_MS), muss zu den Sekundenwerten hier passen. */

@keyframes mpShiftAdded {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,.45); background-color: rgba(37,99,235,.14); }
  55%  { box-shadow: 0 0 0 9px rgba(37,99,235,0); background-color: rgba(37,99,235,.08); }
  100% { box-shadow: 0 0 0 9px rgba(37,99,235,0); background-color: transparent; }
}

.mp__day.is-shift-added,
.mpd__cell.is-shift-added {
  animation: mpShiftAdded 6s ease-out;
}

@keyframes mpShiftRemoved {
  0%   { background-color: rgba(100,116,139,.16); }
  100% { background-color: transparent; }
}

.mp__day.is-shift-removed,
.mpd__cell.is-shift-removed {
  animation: mpShiftRemoved 2.2s ease-out;
}

/* ── "Noch nicht gesehen"-Punkt ─────────────────────────────────────────────
   Bleibt bestehen (keine Animation, kein Ausblenden von selbst) bis zum
   naechsten Laden NACH dem Ansehen - anders als der Live-Puls oben, der nur den
   Moment einer Aenderung waehrend des Zusehens markiert. Bewusst dezent: ein
   kleiner Punkt statt Farbe/Rahmen an der ganzen Zelle. */

.mp__day.is-unseen,
.mpd__cell.is-unseen {
  position: relative;
}

.mp__day.is-unseen::after,
.mpd__cell.is-unseen::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mp-brand);
  box-shadow: 0 0 0 2px var(--mp-surface);
}