/* Meine Schichten — Mitarbeiter-Oberfläche. Mobile zuerst, kein Framework.
   Flex-„gap" fehlt in Safari < 14.1, darum Abstände über Grid-gap oder Ränder. */

:root {
  --navy: #0a1f33;
  --navy-hell: #16324f;
  --rot: #D9383A;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --radius: 0.75rem;
  --radius-klein: 0.5rem;
  --schatten: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --fokus: 0 0 0 3px rgba(10, 31, 51, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--slate-50);
  color: var(--slate-900);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  min-height: 100vh;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
a { color: var(--navy); }
button { font: inherit; color: inherit; }
i[class*="fa-"] { line-height: 1; }

/* Fokus sichtbar, aber nur bei Tastatur, wo der Browser das unterscheiden kann */
:focus { outline: 3px solid var(--navy); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.kopf :focus { outline-color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: #fff; color: var(--navy); padding: 0.75rem 1rem; border-radius: var(--radius-klein);
}
.sprung:focus { top: 0.5rem; }

/* ---------- Kopf ---------- */
.kopf {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 10;
  background: var(--navy); color: #fff;
  padding-top: env(safe-area-inset-top);
}
.kopf-innen {
  max-width: 40rem; margin: 0 auto; min-height: 3.5rem; padding: 0 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.marke {
  color: #fff; text-decoration: none; font-weight: 700; font-size: 0.95rem; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-right: 0.5rem;
}
.marke i { margin-right: 0.5rem; font-size: 1.1rem; }
.kopf-rechts { display: flex; align-items: center; flex: none; }
.kopf-name { font-weight: 600; margin-right: 0.5rem; max-width: 4.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knopf-kopf {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; padding: 0 0.6rem;
}
/* Schmale Handys: erst das Kalender-Symbol weglassen, ganz schmal auch den Vornamen */
@media (max-width: 26rem) { .marke i { display: none; } .kopf-name { max-width: 4rem; } }
@media (max-width: 22rem) { .kopf-name { display: none; } }
.knopf-kopf i { color: #f28b8c; margin-right: 0.4rem; }
.knopf-kopf:hover { background: var(--navy-hell); }

/* ---------- Inhalt ---------- */
.inhalt {
  max-width: 40rem; margin: 0 auto; padding: 1rem 1rem 3rem;
  padding-left: calc(1rem + env(safe-area-inset-left));
  padding-right: calc(1rem + env(safe-area-inset-right));
}
.inhalt:focus { outline: none; }
.inhalt > * + * { margin-top: 1rem; }

.laden { color: var(--slate-500); text-align: center; padding: 2rem 0; }
.laden i { margin-right: 0.4rem; }

.karte {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 1rem;
}
.karte-titel { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; }
.seiten-titel { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.untertitel { color: var(--slate-500); margin-top: 0.25rem; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 1rem;
  border-radius: var(--radius-klein); border: 1px solid transparent;
  font-weight: 600; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.knopf[disabled], .knopf[aria-busy="true"] { opacity: 0.6; cursor: default; }
.knopf-primaer { background: var(--navy); color: #fff; width: 100%; font-size: 1.05rem; min-height: 3rem; }
.knopf-primaer:hover:not([disabled]) { background: var(--navy-hell); }
.knopf-sekundaer { background: #fff; color: var(--navy); border-color: var(--slate-300); }
.knopf-sekundaer:hover:not([disabled]) { background: var(--slate-100); }
.knopf-icon { padding: 0; font-size: 1.25rem; }
.knopf i + span, .knopf span + i { margin-left: 0.5rem; }
.link-knopf {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.25rem;
  color: var(--navy); font-weight: 600; text-decoration: underline;
}

/* ---------- Formulare ---------- */
.formular { display: grid; grid-row-gap: 1rem; gap: 1rem; }
.karte .formular, .karte .meldung, .karte > .formular-fuss { margin-top: 1rem; }
.feld-gruppe { display: grid; grid-row-gap: 0.375rem; gap: 0.375rem; }
.etikett { font-weight: 600; font-size: 0.95rem; }
.feld {
  width: 100%; min-height: 3rem; padding: 0.625rem 0.875rem;
  border: 1px solid var(--slate-300); border-radius: var(--radius-klein);
  font: inherit; font-size: 1rem; color: var(--slate-900); background: #fff;
  -webkit-appearance: none; appearance: none;
}
.feld:focus { border-color: var(--navy); box-shadow: var(--fokus); outline: none; }
.feld[aria-invalid="true"] { border-color: var(--rot); }
.passwort-zeile { position: relative; }
.passwort-zeile .feld { padding-right: 3.25rem; }
.passwort-auge {
  position: absolute; right: 0.25rem; top: 50%; margin-top: -1.375rem;
  width: 2.75rem; height: 2.75rem; border: 0; background: transparent;
  color: var(--slate-500); border-radius: var(--radius-klein); cursor: pointer; font-size: 1.1rem;
}
.passwort-auge:hover { color: var(--navy); background: var(--slate-100); }
.hinweis { color: var(--slate-500); font-size: 0.9rem; }
.formular-fuss { text-align: center; }

.meldung {
  border-radius: var(--radius-klein); padding: 0.75rem 1rem; font-size: 0.95rem;
  display: flex; align-items: flex-start;
}
.meldung:empty { display: none; }
.meldung i { margin-right: 0.6rem; margin-top: 0.2rem; flex: none; }
.meldung-fehler { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.meldung-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.meldung-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.meldung-zeile { display: flex; flex-wrap: wrap; align-items: center; }
.meldung-zeile .knopf { margin-left: auto; margin-top: 0.5rem; }

/* ---------- Nächste Schichten ---------- */
.naechste li { padding: 0.625rem 0; border-top: 1px solid var(--slate-100); }
.naechste li:first-child { padding-top: 0; border-top: 0; }
.naechste li:last-child { padding-bottom: 0; }
.naechste-datum { font-weight: 700; }
.naechste-rest { color: var(--slate-700); }
.leer { color: var(--slate-500); }

/* ---------- Wochen-Navigator ---------- */
.navigator {
  display: flex; flex-wrap: wrap; align-items: center;
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 0.5rem;
}
.navigator-mitte { flex: 1; min-width: 0; text-align: center; padding: 0 0.25rem; font-size: 1rem; font-weight: 400; }
.navigator-kw { font-weight: 700; display: block; }
.navigator-spanne { color: var(--slate-500); font-size: 0.9rem; display: block; }
.navigator-extra { display: flex; align-items: center; margin-left: 0.25rem; }
.navigator-extra > * + * { margin-left: 0.25rem; }
.navigator .knopf-sekundaer { border-color: transparent; }
.knopf-heute { padding: 0 0.75rem; font-size: 0.95rem; }
.durchgestrichen { text-decoration: line-through; color: var(--slate-500); }
/* Schmale Handys: „Heute" und „Neu laden" rutschen in eine zweite Zeile */
@media (max-width: 26rem) {
  .navigator-extra {
    flex-basis: 100%; justify-content: center; margin: 0.375rem 0 0;
    padding-top: 0.375rem; border-top: 1px solid var(--slate-100);
  }
}

/* ---------- Tage ---------- */
.tage { display: grid; grid-row-gap: 0.75rem; gap: 0.75rem; }
.tag { padding: 0; overflow: hidden; }
.tag-heute { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy), var(--schatten); }
.tag-kopf {
  display: flex; align-items: baseline; padding: 0.75rem 1rem 0.5rem;
}
.tag-wochentag { font-weight: 700; font-size: 1.05rem; }
.tag-datum { color: var(--slate-500); margin-left: 0.5rem; }
.tag-heute .tag-kopf { background: var(--navy); color: #fff; padding-bottom: 0.75rem; }
.tag-heute .tag-datum { color: rgba(255, 255, 255, 0.8); }
.chip-heute {
  margin-left: auto; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: #fff; color: var(--navy); border-radius: 999px; padding: 0.1rem 0.6rem;
}
.tag-inhalt { padding: 0.25rem 1rem 0.875rem; }
.tag-inhalt > * + * { margin-top: 0.75rem; }

.frei { color: var(--slate-500); font-style: italic; padding: 0.25rem 0; }

.schicht {
  border-left: 4px solid var(--farbe, var(--slate-300)); padding: 0.125rem 0 0.125rem 0.75rem;
}
.schicht-zeit { font-size: 1.375rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.25; }
.schicht-zeit.durchgestrichen { text-decoration: line-through; color: var(--slate-500); }
.schicht-offen { font-size: 1rem; font-weight: 600; color: var(--slate-700); }
.schicht-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 0.375rem; }
.schicht-meta > * { margin-right: 0.5rem; margin-bottom: 0.25rem; }
.schicht-haus { color: var(--slate-700); font-size: 0.95rem; }

.pille {
  display: inline-flex; align-items: center; font-size: 0.85rem; font-weight: 600;
  color: var(--slate-700); background: var(--slate-100); border-radius: 999px; padding: 0.15rem 0.7rem 0.15rem 0.5rem;
}
.pille::before {
  content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.4rem;
  background: var(--farbe, var(--slate-500)); flex: none;
}

.badge {
  display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; padding: 0.15rem 0.6rem;
}
.badge-rot { background: #fee2e2; color: #991b1b; }
.badge-amber { background: #fef3c7; color: #92400e; }
.badge-blau { background: #dbeafe; color: #1e40af; }

/* Gestempelte Zeiten */
.zeit {
  background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--radius-klein);
  padding: 0.5rem 0.75rem; font-size: 0.95rem; color: var(--slate-700);
}
.zeit-zeile { display: flex; flex-wrap: wrap; align-items: center; }
.zeit-zeile > i { color: var(--slate-500); margin-right: 0.5rem; }
/* Reicht der Platz nicht für Text und Chip nebeneinander, rutscht der Chip in die nächste Zeile */
.zeit-text { flex: 1 1 12rem; min-width: 0; }
.zeit-hinweis { font-size: 0.875rem; color: var(--slate-500); margin-top: 0.25rem; }
.chip {
  display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 600;
  border-radius: 999px; padding: 0.15rem 0.6rem; margin-top: 0.375rem; white-space: nowrap;
}
.chip i { margin-right: 0.3rem; }
.chip-offen { background: var(--slate-200); color: var(--slate-700); }
.chip-gruen { background: #dcfce7; color: #166534; }
.chip-abgerechnet { background: #e0e7ff; color: #3730a3; }

/* Kollegen */
.kollegen { border-top: 1px solid var(--slate-100); }
.kollegen summary {
  display: flex; align-items: center; min-height: 2.75rem; cursor: pointer;
  font-weight: 600; color: var(--slate-700); list-style: none; -webkit-tap-highlight-color: transparent;
}
.kollegen summary::-webkit-details-marker { display: none; }
.kollegen summary::before {
  content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.75rem;
  margin-right: 0.6rem; color: var(--slate-500); transition: transform 0.15s ease;
}
.kollegen[open] summary::before { transform: rotate(90deg); }
.kollegen-bereich { margin-top: 0.5rem; }
.kollegen-bereich-name { font-size: 0.85rem; font-weight: 700; color: var(--slate-500); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; }
.kollegen-bereich-name::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.4rem;
  background: var(--farbe, var(--slate-300)); flex: none;
}
.kollegen li { padding: 0.3rem 0 0.3rem 0.9rem; font-size: 0.95rem; }
.kollegen li .gestrichen { text-decoration: line-through; color: var(--slate-500); }

/* ---------- Fuß ---------- */
.fuss { color: var(--slate-500); font-size: 0.875rem; text-align: center; padding: 0.5rem 0 0; }
.fuss p + p { margin-top: 0.375rem; }

/* ---------- Leiste unten: Schichten · Urlaub ---------- */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: #fff; border-top: 1px solid var(--slate-200);
  box-shadow: 0 -1px 3px rgba(15, 23, 42, 0.06);
  padding-bottom: env(safe-area-inset-bottom);
}
.leiste-innen { display: flex; max-width: 40rem; margin: 0 auto; }
.leiste a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 3.5rem; margin-top: -1px; border-top: 3px solid transparent;
  color: var(--slate-500); text-decoration: none; font-size: 0.8rem; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.leiste a i { font-size: 1.25rem; margin-bottom: 0.2rem; }
.leiste a:hover { color: var(--navy); background: var(--slate-50); }
.leiste a[aria-current="page"] { color: var(--navy); border-top-color: var(--navy); }
/* Der Inhalt braucht unten Luft, sonst steht die letzte Karte hinter der Leiste */
body.mit-leiste .inhalt { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }

/* ---------- Urlaub ---------- */
.konto-frei { display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 0.75rem; }
.konto-gross {
  font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  color: var(--navy); margin-right: 0.5rem; font-variant-numeric: tabular-nums;
}
.konto-einheit { font-size: 1.05rem; font-weight: 600; color: var(--slate-700); }
.konto-erklaerung { flex-basis: 100%; color: var(--slate-500); font-size: 0.875rem; margin-top: 0.25rem; }
.konto-liste { margin: 0; }
.konto-zeile {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  padding: 0.5rem 0; border-top: 1px solid var(--slate-100);
}
.konto-zeile dt { color: var(--slate-700); }
.konto-zeile dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.konto-zeile .konto-hinweis { flex-basis: 100%; font-weight: 400; font-size: 0.875rem; color: #92400e; margin-top: 0.125rem; }
.konto-rest { border-top: 2px solid var(--slate-300); }
.konto-rest dt, .konto-rest dd { font-weight: 700; }
.stand { color: var(--slate-500); font-size: 0.875rem; margin-top: 0.75rem; }

/* minmax(0, …): ein type=date hat in Chrome eine eigene Mindestbreite, mit „1fr" allein liefe
   das zweite Feld auf schmalen Handys rechts aus der Karte */
.datum-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-column-gap: 0.75rem; gap: 0.75rem; }
.datum-paar .feld { min-width: 0; padding-left: 0.625rem; padding-right: 0.5rem; }
.feld-text { min-height: 4.5rem; resize: vertical; line-height: 1.4; }
.vorschau { font-weight: 600; color: var(--slate-700); }
.vorschau:empty { display: none; }
.vorschau-ok { color: #166534; }
.vorschau-fehler { color: #991b1b; }

.knopf-gefahr { background: var(--rot); color: #fff; }
.knopf-gefahr:hover:not([disabled]) { background: #b92d2f; }

.antraege li, .abwesenheiten li { padding: 0.75rem 0; border-top: 1px solid var(--slate-100); }
.antraege li:first-child, .abwesenheiten li:first-child { padding-top: 0; border-top: 0; }
.antraege li:last-child, .abwesenheiten li:last-child { padding-bottom: 0; }
.antrag-kopf { display: flex; flex-wrap: wrap; align-items: center; }
.antrag-zeit { font-weight: 700; margin-right: 0.5rem; }
.antrag-meta, .antrag-grund { color: var(--slate-700); font-size: 0.95rem; margin-top: 0.25rem; }
.antrag-grund { color: #991b1b; }
.antrag-aktion { margin-top: 0.5rem; }
.antrag-aktion .meldung { margin-top: 0.5rem; }
.bestaetigen { background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-klein); padding: 0.75rem; }
.bestaetigen-text { font-weight: 600; color: #991b1b; margin-bottom: 0.5rem; }
.bestaetigen-knoepfe { display: flex; flex-wrap: wrap; }
.bestaetigen-knoepfe .knopf { margin-right: 0.5rem; margin-top: 0.25rem; }
.badge-gruen { background: #dcfce7; color: #166534; }
.badge-grau { background: var(--slate-200); color: var(--slate-700); }
.abw-art { font-weight: 700; }
.abw-tage { color: var(--slate-500); }

/* ---------- Skelett ---------- */
.skelett-zeile { height: 0.9rem; border-radius: 999px; background: var(--slate-200); margin-top: 0.75rem; }
.skelett-zeile:first-child { margin-top: 0; }
.skelett-zeile.kurz { width: 40%; }
.skelett-zeile.mittel { width: 65%; }
.skelett .skelett-zeile { animation: pulsieren 1.4s ease-in-out infinite; }
@keyframes pulsieren { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (min-width: 40rem) {
  .inhalt { padding-top: 1.5rem; }
  .kopf-name { max-width: 14rem; }
}

/* ---------- Zeiten bestätigen (Schichtleitung) ---------- */
.karte-link { display: block; text-decoration: none; color: inherit; border-left: 4px solid var(--navy); }
.karte-link-titel { display: block; font-weight: 700; }
.karte-link-text { display: block; font-size: 0.875rem; color: var(--slate-500); margin-top: 0.25rem; }
.zeit-karte { margin-top: 0.75rem; }
.zeit-erledigt { opacity: 0.75; }
.zeit-kopf { display: flex; flex-wrap: wrap; align-items: center; }
.zeit-kopf > * { margin: 0 0.5rem 0.25rem 0; }
.zeit-person { font-weight: 700; font-size: 1.05rem; }
.zeit-daten { display: grid; grid-template-columns: auto 1fr; grid-gap: 0.15rem 0.75rem; margin: 0.5rem 0 0; font-size: 0.9375rem; }
.zeit-daten dt { color: var(--slate-500); }
.zeit-daten dd { margin: 0; font-variant-numeric: tabular-nums; }
.zeit-marken { margin-top: 0.5rem; }
.zeit-marken > * { margin: 0 0.4rem 0.4rem 0; }
.chip-orange { background: #ffedd5; color: #9a3412; }
.chip-blau { background: #e0f2fe; color: #075985; }
.zeit-knoepfe { display: grid; grid-gap: 0.5rem; margin-top: 0.75rem; }
.knopf-gruen { background: #166534; color: #fff; min-height: 3rem; width: 100%; }
.knopf-gruen:hover:not([disabled]) { background: #14532d; }
.zeit-rueckfrage { margin-top: 0.75rem; }
.zeit-rueckfrage summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; color: var(--navy); }
.zeit-rueckfrage .feld { margin: 0.25rem 0 0.5rem; width: 100%; }


/* ---------- Glocke und Meldungen (Benachrichtigungen, 0165) ---------- */
.glocke {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem; margin-right: 0.25rem; color: #fff; text-decoration: none; font-size: 1.15rem;
}
.glocke-zahl {
  position: absolute; top: 0.3rem; right: 0.15rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem;
  border-radius: 0.6rem; background: var(--rot); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1.15rem; text-align: center;
}
.meldungs-liste > li + li { margin-top: 0.75rem; }
.meldungs-karte { display: block; text-decoration: none; color: inherit; }
.meldung-ungelesen { border-left: 4px solid var(--navy); }
.meldungs-kopf { display: flex; align-items: center; }
.meldungs-kopf > * + * { margin-left: 0.5rem; }
.meldungs-titel { font-weight: 700; }
.meldungs-text { display: block; margin-top: 0.25rem; }
.meldungs-zeit { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--slate-500); }
.schalter-liste { margin-top: 0.75rem; }
.schalter-zeile { display: flex; align-items: flex-start; min-height: 2.75rem; padding: 0.375rem 0; }
.schalter-zeile label { flex: 1; cursor: pointer; }
.schalter-box { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0.75rem 0 0; flex: none; accent-color: var(--navy); }