/* Pompadour Zeiterfassung – ruhige Oberfläche, große Typografie, ein Farbakzent.
   Farben/Typografie kommen als CSS-Variablen aus der zentralen Theme-Konfiguration (White-Label). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.45;
  min-height: 100vh; display: flex; flex-direction: column;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: .01em; }
h1 { font-size: 1.7rem; margin: .2em 0 .6em; }
h2 { font-size: 1.25rem; margin: 1.2em 0 .5em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .muted { color: var(--muted); }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 16px; flex: 1; }
.foot { text-align: center; padding: 18px; color: var(--muted); font-size: .8rem; }

/* Kopfzeile */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--font-display); font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 34px; width: auto; }
.brand small { display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-family: var(--font-body); }
.mainnav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.mainnav a { padding: 7px 11px; border-radius: 8px; color: var(--text); font-size: .95rem; }
.mainnav a.akt { background: var(--accent); color: #fff; }
.mainnav a:hover { text-decoration: none; }
.admin-link { border: 1px solid var(--accent); color: var(--accent) !important; }

/* F51: nie eine scrollbare/abgeschnittene Reiterzeile – wenn die Breite nicht
   reicht, schaltet JS auf die Kompakt-Variante (Alltags-Reiter + 'Mehr…') um. */
.subnav {
  display: flex; gap: 2px; overflow: hidden; padding: 8px 16px; border-bottom: 1px solid var(--line);
  font-size: .88rem; white-space: nowrap;
}
.subnav.kompakt { overflow: visible; } /* Platz reicht dann; 'Mehr…'-Menü darf überlappen */
.subnav.kompakt .nur-desktop { display: none; }
.subnav.kompakt .subnav-mehr { display: block; margin-left: auto; }
.subnav a { padding: 5px 9px; border-radius: 6px; color: var(--muted); }
.subnav a.akt { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }

.badge {
  display: inline-block; min-width: 18px; padding: 1px 5px; margin-left: 5px;
  background: var(--rot); color: #fff; border-radius: 9px; font-size: .72rem; text-align: center; font-weight: 700;
}
.badge.gelb { background: var(--gelb); }

/* Karten & Tabellen */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px; margin-bottom: 16px;
}
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
tr.sum td { font-weight: 700; border-top: 2px solid var(--line); }
.r { text-align: right; }
.tabelle-scroll { overflow-x: auto; }
.nur-karte { display: none; } /* sichtbar nur im Handy-Karten-Layout (F24/F27) */

/* Formulare */
label { display: block; font-size: .82rem; color: var(--muted); margin: 10px 0 3px; }
input, select, textarea {
  width: 100%; padding: 10px 12px; font-size: 1rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
input[type="checkbox"] { width: auto; }
/* F73: Farbwähler als sichtbares Farbfeld mit Hex-Wert daneben */
.farbwahl { display: flex; gap: 8px; align-items: center; }
.farbwahl input[type="color"] {
  width: 64px; height: 42px; padding: 3px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.farbwahl input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.farbwahl input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.farbwahl .farbwert { font-size: .9rem; color: var(--muted); }
.zeile { display: flex; gap: 10px; flex-wrap: wrap; }
.zeile > * { flex: 1; min-width: 130px; }
/* F127: Felder einer Zeile auf gemeinsamer Grundlinie – unterschiedlich lange
   (ein-/mehrzeilige) Beschriftungen drücken die Eingabefelder sonst auf
   verschiedene Höhen. Label wächst, das Feld sitzt unten bündig. */
.zeile > div { display: flex; flex-direction: column; }
.zeile > div > label { flex: 1 0 auto; display: flex; align-items: flex-end; }
.zeile > div > small { order: 10; }
/* B2 (F127-Nachtrag): Selects haben eine intrinsische Mindestbreite (längste
   Option) und liefen damit aus ihrer Flex-Spalte in die Nachbarspalte
   (Überlappung Modell ↔ 'Gültig ab') – in Zeilen-Spalten hart unterbinden */
.zeile > div > select, .zeile > div > input { min-width: 0; max-width: 100%; }
/* B2 (F127-Nachtrag): Am Desktop reserviert jedes Label zwei Zeilen und die
   Felder sitzen oben bündig – so verschieben weder mehrzeilige Labels noch
   unterschiedlich hohe Hilfetexte UNTER den Feldern die Grundlinie. Mobil
   (gestapelt, funktionierte bereits) bleibt alles beim Alten. */
@media (min-width: 769px) {
  .zeile > div > label { flex: 0 0 auto; min-height: 2.9em; }
}
/* Datums-/Zeitfelder (F6): Safari/iOS erzwingt beim nativen Appearance eine
   intrinsische Breite und ignoriert width:100% – deshalb Appearance abschalten
   und als Block rendern. Damit sitzen die Felder auf allen Browsern symmetrisch
   mit vollem, gleichem Rand in der Karte. */
input[type="time"], input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px; /* Tap-Ziel + einheitliche Höhe nach appearance:none */
  text-align: left;
}
/* iOS zentriert den Wert von Datums-/Zeitfeldern – links ausrichten wie andere Felder */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; }
.zeile-2er > * { flex: 1 1 45%; min-width: 120px; }
@media (max-width: 400px) { .zeile-2er > * { flex-basis: 100%; } }
.knopf {
  display: inline-block; padding: 11px 20px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 1rem; font-weight: 600; font-family: inherit;
  line-height: 1.3; /* F104: <a>- und <button>-Knöpfe exakt gleich hoch */
}
.knopf:hover { filter: brightness(1.08); text-decoration: none; }
.knopf.zweit { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.knopf.klein { padding: 6px 12px; font-size: .85rem; }
.knopf.rot { background: var(--rot); }
form.inline { display: inline; }
/* B3 (F24-Nachtrag): Datums-/Zeitwerte brechen nie mitten im Wert um */
.nowrap { white-space: nowrap; }

.fehler { background: color-mix(in srgb, var(--rot) 12%, transparent); border: 1px solid var(--rot); color: var(--rot); padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }
.ok { background: color-mix(in srgb, var(--gruen) 14%, transparent); border: 1px solid var(--gruen); color: var(--gruen); padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }
.hinweis-box { background: color-mix(in srgb, var(--gelb) 12%, transparent); border: 1px solid var(--gelb); padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; }

/* Login */
.login-seite { max-width: 380px; margin: 6vh auto; text-align: center; }
.login-seite .logo { max-width: 210px; margin: 0 auto 18px; display: block; }
.login-seite form { text-align: left; }
@media (prefers-color-scheme: dark) { .login-seite .logo { filter: none; } }

/* Stempel-Seite */
/* B1.1: kompakt – die ganze Stempelseite passt ohne Scrollen auf eine iPhone-Höhe */
.stempel-bereich { text-align: center; padding: 8px 0 4px; }
.status-zeile { font-size: 1.05rem; margin-bottom: 4px; }
/* Zahlen immer in der gut lesbaren Body-Schrift mit Tabellenziffern (F3);
   die Serifen-Displayschrift bleibt den Überschriften vorbehalten */
.live-timer { font-size: 2.4rem; font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
/* F151: Buttons je Zustand – ein großer 'Kommen' (volle Breite) bzw. 50/50 */
.stempel-knoepfe {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 420px; margin: 12px auto 6px;
}
.stempel-knoepfe.einzeln { grid-template-columns: 1fr; }
.stempel-knopf {
  min-height: 58px; font-size: 1.2rem; border-radius: 18px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-weight: 700; font-family: inherit;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.stempel-knopf.zweit { background: var(--card); color: var(--accent); border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: none; }
.stempel-knopf:active { transform: scale(.97); }

/* F151: Stempelseite 'Ring-Fokus' – Tages-Fortschrittsring um den Live-Timer.
   Farben kommen als White-Label-Variablen (--ring-arbeit/--ring-pause) aus
   Einstellungen → Firmendaten & Branding; Dark Mode hellt automatisch auf. */
/* B1.2: Haupt-Ring minimal kleiner */
.tagesring-wrap { position: relative; width: min(240px, 68vw); margin: 2px auto 0; }
.tagesring-wrap svg { width: 100%; height: auto; display: block; }
.ring-spur { fill: none; stroke: var(--line); stroke-width: 11; }
.ring-seg { fill: none; stroke-width: 11; }
/* B1.7: ohne Soll neutraler dünner Ring – die farbigen Segmente bleiben lesbar */
g.ohne-soll .ring-spur { stroke-width: 4; }
g.ohne-soll .ring-seg { stroke-width: 8; }
.ring-seg.arbeit { stroke: var(--ring-arbeit); }
.ring-seg.pause { stroke: var(--ring-pause); }
.ring-seg.gutschrift { stroke: color-mix(in srgb, var(--ring-arbeit) 45%, transparent); }
/* C5/F175: mehr Seitenabstand zur Ringlinie – die unteren/oberen Textzeilen
   liegen dort, wo der Kreis schmaler wird; die Soll-Spanne (.ring-plan) steht
   jetzt UNTER dem Ring, der Statustext ist eine Stufe kleiner */
.ring-mitte {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; padding: 17% 20%;
  text-align: center;
}
/* Ziffern in der Body-Schrift mit Tabellenziffern (F3) – keine Serifen-Ziffern */
.ring-mitte .live-timer { font-size: clamp(2.2rem, 11vw, 3rem); margin: 0; line-height: 1.1; }
.ring-soll { font-size: .88rem; line-height: 1.25; }
.ring-plan { font-size: .85rem; text-align: center; margin: 8px auto 0; }
.ring-trenner { width: 56px; border-top: 1px solid var(--line); margin: 5px 0; }
.ring-status { font-size: .8rem; line-height: 1.3; }
.ueberlauf-badge {
  display: inline-block; margin-left: 6px; padding: 0 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--ring-arbeit) 16%, transparent);
  color: var(--ring-arbeit); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: .88rem;
}

/* F151: Mini-Ringe Woche/Monat ('bis heute'-Soll, F4/F30).
   B1.2: deutlich kleiner (Nebeninformation); B1.10: eindeutige Unterzeile
   'Soll bis heute: …' unter dem Ring statt kryptischer Werte im Ring. */
.mini-ringe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-ring-karte { margin-bottom: 10px; padding: 6px 6px 4px; text-align: center; }
.mini-ring-wrap { position: relative; width: min(84px, 100%); margin: 0 auto; }
.mini-ring-wrap svg { width: 100%; height: auto; display: block; }
.mini-ring-mitte {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 16%;
}
.mini-ring-label { font-size: .7rem; color: var(--muted); }
.mini-ring-wert { font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.mini-ring-unterzeile { font-size: .72rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.ueberlauf-badge.klein { font-size: .7rem; padding: 0 6px; margin-left: 4px; }

/* Fortschrittsbalken Ist vs. Soll */
.fortschritt { margin: 10px 0; }
.fortschritt .kopf { display: flex; justify-content: space-between; font-size: .85rem; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.balken { height: 10px; background: var(--line); border-radius: 6px; overflow: hidden; }
.balken > i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.balken > i.ueber { background: var(--gruen); }

/* Ampel */
/* Status-Punkte (F38): eigenes Farbschema, klar getrennt vom Wochentyp-Gold */
.ampel { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; background: #b9b2a6; }
.ampel.gruen { background: var(--gruen); opacity: .55; }
.ampel.gelb { background: var(--gelb); }
.ampel.hinweis { background: var(--hinweisfarbe); }
.ampel.rot { background: var(--rot); }
.ampel.grau { background: #b9b2a6; }
:root { --hinweisfarbe: #d97b16; } /* F91: Hinweis = Bernstein/Orange, klar getrennt vom Auffälligkeits-Rot */

/* Zeitleiste im Admin-Dashboard */
/* Tagesverlauf (F48): Soll-Spanne nur als feiner Rahmen, Ist als kräftiger
   Balken, Stundenmarken als dezente Striche; F53: Abwesenheit schraffiert */
.zeitleiste { position: relative; height: 16px; background: color-mix(in srgb, var(--line) 40%, transparent); border-radius: 5px; min-width: 220px; }
/* F92: Arbeit = gedämpftes Grün (gemeinsames Farbschema mit dem Salon-Monitor);
   Gold bleibt Marken-/Dekofarbe – die Gelb-Kollision Arbeit/Pause entfällt */
.zeitleiste .block { position: absolute; top: 0; height: 100%; background: var(--gruen); border-radius: 4px; }
.zeitleiste .block.pause { background: var(--gelb); }
.zeitleiste .block.offen { opacity: .55; }
.zeitleiste .block.soll { background: transparent; border: 1.5px solid var(--muted); opacity: .6; }
.zeitleiste .block.soll.abwesend {
  background: repeating-linear-gradient(45deg, transparent, transparent 4px,
    color-mix(in srgb, var(--muted) 45%, transparent) 4px,
    color-mix(in srgb, var(--muted) 45%, transparent) 7px);
  border-style: dashed; opacity: .9;
}
.zeitleiste .stundenmarke { position: absolute; top: 2px; bottom: 2px; width: 1px; background: color-mix(in srgb, var(--muted) 35%, transparent); }
.achse-beschriftung { display: flex; justify-content: space-between; font-size: .65rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; }
.legende-kasten { display: inline-block; width: 22px; height: 10px; border-radius: 3px; vertical-align: baseline; background: var(--gruen); }
.legende-kasten.soll { background: transparent; border: 1.5px solid var(--muted); }
.legende-kasten.pause { background: var(--gelb); }
.legende-kasten.abwesend {
  background: repeating-linear-gradient(45deg, transparent, transparent 4px,
    color-mix(in srgb, var(--muted) 45%, transparent) 4px,
    color-mix(in srgb, var(--muted) 45%, transparent) 7px);
  border: 1px dashed var(--muted);
}
.zeitleiste-zelle { min-width: 240px; }

.status-pille { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: .76rem; font-weight: 600; }
.status-pille.offen, .status-pille.beantragt, .status-pille.storno_beantragt { background: color-mix(in srgb, var(--gelb) 20%, transparent); color: var(--gelb); }
.status-pille.uebernommen, .status-pille.angepasst, .status-pille.genehmigt, .status-pille.akzeptiert, .status-pille.korrigiert { background: color-mix(in srgb, var(--gruen) 18%, transparent); color: var(--gruen); }
.status-pille.abgelehnt, .status-pille.storniert { background: color-mix(in srgb, var(--rot) 15%, transparent); color: var(--rot); }

.tages-gruppe { border-bottom: 1px solid var(--line); padding: 10px 0; }
.tages-gruppe .tag-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tages-gruppe .intervall { display: flex; gap: 14px; color: var(--muted); font-size: .92rem; padding: 2px 0 0 4px; flex-wrap: wrap; }

.saldo-pos { color: var(--gruen); font-weight: 600; }
.saldo-neg { color: var(--rot); font-weight: 600; }

.kachel-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kachel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
/* F36: Aktions-Buttons als zwei gleich große Hälften über die volle Breite –
   gleiche Höhe/Rahmen, Text mittig (darf umbrechen). Nur auf sehr schmalen
   Screens untereinander, dann beide in voller Breite und exakt gleich groß. */
.aktions-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.aktions-reihe .knopf {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; padding: 8px 12px;
  text-align: center; white-space: normal; line-height: 1.25;
}
@media (max-width: 330px) {
  .aktions-reihe { grid-template-columns: 1fr; }
}

/* F34: Korrekturantrag – Beschriftungen und Werte mittig über/in den Feldern */
.form-zentriert label { text-align: center; }
.form-zentriert input, .form-zentriert textarea { text-align: center; }
.form-zentriert input[type="date"]::-webkit-date-and-time-value,
.form-zentriert input[type="time"]::-webkit-date-and-time-value { text-align: center; }

/* F35: Tageszeile – beschriftete Werte (Ist · Soll · Saldo) mit Luft dazwischen.
   F44: konsequent rechtsbündig am Kartenrand – auch wenn die Zeile umbricht.
   F41: Werte kleiner und nicht fett, das fette Datum bleibt der Zeilen-Anker. */
.tag-werte { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; }
.tag-werte .wert { display: inline-flex; align-items: baseline; gap: 5px; }
.tag-werte .wert small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.tag-werte .wert b { font-variant-numeric: tabular-nums; font-weight: 400; font-size: .92em; }
.tag-werte .korrigieren-link { color: var(--muted); font-size: .82rem; margin-left: 10px; }

/* F33: heutigen Tag in der Tagesliste dezent hervorheben */
.tages-gruppe.tag-heute {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 10px;
  padding-left: 8px; padding-right: 8px;
  margin-left: -8px; margin-right: -8px;
}

/* F30: kleine Kennzahlen-Felder (Beschriftung oben, Wert darunter) */
.kachel.mini { padding: 8px 12px; }
.kachel.mini b { font-size: 1.05rem; }
.kachel-reihe.mini { gap: 8px; }
.kachel b { display: block; font-size: 1.3rem; font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.kachel .zusatz { font-size: .78rem; color: var(--muted); text-transform: none; letter-spacing: 0; }
.kachel span { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* F57: Filterleisten – am Handy standardmäßig eingeklappt ('Filter ▸' mit
   Chips der aktiven Filter), am Desktop offen (JS setzt open); Zurücksetzen-Link */
details.filter-karte {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 16px; margin-bottom: 16px;
}
details.filter-karte > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-weight: 600; padding: 4px 0;
}
details.filter-karte > summary::-webkit-details-marker { display: none; }
details.filter-karte > summary::before { content: '▸'; color: var(--accent); transition: transform .15s; }
details.filter-karte[open] > summary::before { transform: rotate(90deg); }
.filter-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; font-weight: 400; }
.filter-chips span {
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  border-radius: 9px; padding: 1px 8px; font-size: .75rem;
}
details.filter-karte form { padding: 8px 0 6px; }

/* ==== F54: Karten-Layout am Handy – ein Datensatz = eine Karte, nie
   horizontale Scroll-Tabellen. Aktivierung per Klasse 'karten-tabelle' am
   Tabellen-Container; Zellen tragen ihr Label als data-l-Attribut, die erste
   Zelle wird mit 'karte-kopf' zum Kartenkopf (Name/Datum). Desktop unverändert. */
@media (max-width: 768px) {
  .karten-tabelle { overflow-x: visible; }
  .karten-tabelle table, .karten-tabelle tbody { display: block; width: 100%; }
  .karten-tabelle tr {
    display: block; background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; padding: 10px 12px; margin: 0 0 10px;
  }
  .karten-tabelle tr:has(> th) { display: none; } /* Kopfzeile: Labels stehen an den Zellen */
  .karten-tabelle td {
    display: flex; gap: 10px; align-items: baseline;
    border-bottom: 0; padding: 3px 0; text-align: left !important;
  }
  .karten-tabelle td[data-l]::before {
    content: attr(data-l); flex: 0 0 92px;
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  }
  .karten-tabelle td.karte-kopf {
    display: block; font-weight: 700; font-size: 1.02rem;
    border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 6px;
  }
  .karten-tabelle td.karte-aktion { display: block; padding-top: 8px; }
  .karten-tabelle td.zeitleiste-zelle { display: block; }
  .karten-tabelle td.karte-leer { display: none; }
  .karten-tabelle td.karte-doppelt { display: none; } /* steckt am Handy schon im Kartenkopf */
  .karten-tabelle .nur-karte { display: inline; } /* Zusatzinfo nur im Karten-Layout (F24/F27) */
  .karten-tabelle td.karte-aktion form, .karten-tabelle td.karte-aktion .zeile { width: 100%; min-width: 0 !important; }
  .karten-tabelle tr.sum { border-style: dashed; }
}

/* F32: Segment-Umschalter (Monat / Woche) */
.segment { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.segment a { padding: 7px 14px; font-size: .88rem; color: var(--muted); text-decoration: none; }
.segment a.akt { background: var(--accent); color: #fff; font-weight: 600; }
.segment a:hover { text-decoration: none; }

/* F17: Wochentyp-Badges – Früh = warmer Goldton, Spät = Pflaumenton.
   Farbe ist Zusatzinfo, der Text bleibt immer stehen (Barrierefreiheit). */
.wt {
  display: inline-block; padding: 1px 8px; border-radius: 9px;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.wt-frueh { background: #f2e2bd; color: #7a5a12; }
.wt-spaet { background: #dcd4ee; color: #453a78; }
.wt-neutral { background: var(--line); color: var(--muted); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .wt-frueh { background: #4d3d14; color: #f0d18a; }
  :root:not([data-theme="hell"]) .wt-spaet { background: #37305a; color: #c8bcf5; }
}
:root[data-theme="dunkel"] .wt-frueh { background: #4d3d14; color: #f0d18a; }
:root[data-theme="dunkel"] .wt-spaet { background: #37305a; color: #c8bcf5; }

/* F7: feste untere Tab-Leiste (nur Handy) */
.tabbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--muted); font-size: .68rem; text-decoration: none;
  /* F153: Pill-Grundform + sanfter Farbübergang beim Tab-Wechsel */
  padding: 4px 6px; border-radius: 10px; transition: background-color .25s ease, color .25s ease;
}
/* F153: aktiver Tab als dezente Pill in der White-Label-Akzentfarbe –
   color-mix auf transparent funktioniert im Hell- wie im Dunkel-Thema */
.tabbar a.akt { color: var(--accent); font-weight: 700; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tabbar a:hover { text-decoration: none; }
.tab-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--rot); margin-left: 3px; }
/* F50: Admin-Tab mit Zahl (offene Anträge + offene Radar-Hinweise) */
.tab-zahl {
  display: inline-block; min-width: 15px; height: 15px; line-height: 15px;
  border-radius: 8px; background: var(--rot); color: #fff; font-style: normal;
  font-size: .62rem; font-weight: 700; text-align: center; padding: 0 3px; margin-left: 3px;
}

/* F19: 'Mehr…'-Menü der Admin-Navigation (nur Handy) */
.subnav-mehr { display: none; position: relative; }
.subnav-mehr summary { list-style: none; cursor: pointer; padding: 5px 9px; border-radius: 6px; color: var(--accent); font-weight: 600; }
.subnav-mehr summary::-webkit-details-marker { display: none; }
.subnav-mehr .mehr-menue {
  position: absolute; right: 0; top: 110%; z-index: 40; min-width: 180px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; box-shadow: 0 6px 24px rgba(0,0,0,.15);
}
.subnav-mehr .mehr-menue a { padding: 8px 10px; border-radius: 6px; color: var(--text); }
.subnav-mehr .mehr-menue a.akt { color: var(--accent); font-weight: 700; background: color-mix(in srgb, var(--accent) 12%, transparent); }

@media (max-width: 768px) {
  /* F71: Formularfelder im Hochformat untereinander in voller Kartenbreite */
  .zeile:not(.zeile-2er) > * { flex-basis: 100%; min-width: 0; }
  .tabbar { display: flex; }
  body { padding-bottom: 64px; }
  /* B1.1: Fußzeile am Handy ausblenden – sie stünde unsichtbar unter der
     Tab-Leiste und kostete nur Scroll-Höhe (Branding steht im Kopf) */
  .foot { display: none; }
  /* Kopf am Handy: nur Logo, Navigation läuft über die Tab-Leiste */
  .mainnav { display: none; }
}

/* F75: editierbare Stempel-Liste */
.stempel-editor .se-zeile { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.stempel-editor .se-zeile select { flex: 0 0 110px; }
.stempel-editor .se-zeile input[type="time"] { flex: 0 0 110px; }
.stempel-editor .se-entfernen { flex: 0 0 auto; padding: 6px 10px; }
/* Stilpunkt Runde 5: Auto-Stopp-Badge klebte an der Uhrzeit */
.stempel-editor .se-zeile .status-pille { flex: 0 0 auto; margin-left: 6px; }

@media print {
  .topbar, .subnav, .foot, .knopf, .tabbar, .kein-druck { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .card { border: 0; padding: 0; }
  /* Breite Tabellen vollständig aufs Blatt (F18) */
  table { font-size: 8.5pt; }
  th, td { padding: 4px 5px; }
  .tabelle-scroll { overflow: visible; }
  /* F160/A2: Planer-Drucke FARBIG – im Runde-6-Jahresdruck fehlten alle
     Balken/Hintergrundfarben; gilt auch für den Monatsansicht-Druck */
  .up-tabelle, .up-tabelle *, .legende-kasten, .up-bes, .up-zelle-demo, .up-zelle-demo-neutral {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* A2: Jahres-Aushang – 3 Monats-Matrizen + Legende je Querformat-Seite,
     Zellen kompakt, Monatsblock nie über den Seitenumbruch reißen */
  .aushang-umbruch { break-after: page; }
  .aushang-monat { break-inside: avoid; }
  .aushang-monat .card { margin-bottom: 8px; border: 0; }
  .aushang .up-tabelle th, .aushang .up-tabelle td { min-width: 0; padding: 1px 1px; font-size: 6.8pt; }
  .aushang .up-tabelle .name { min-width: 0; white-space: nowrap; padding-right: 6px; }
  .aushang .up-zelle { min-width: 0; font-size: 6.2pt; line-height: 1.5; }
  .aushang .up-monatstitel { margin: 2px 0 3px; font-size: 10pt; }
  .aushang-legende { margin-bottom: 4px; }
  .aushang-legende .muted, .aushang-legende .muted * { font-size: 7pt !important; }
  /* F105: Druck immer tabellarisch – das Karten-Stapel-Layout (Handy) gilt im
     Druck nie, sonst füllen 3 Tage zwei Seiten */
  .karten-tabelle tr { display: table-row !important; }
  .karten-tabelle td:not(.kein-druck) { display: table-cell !important; padding: 4px 5px; border-bottom: 1px solid #ddd; }
  .karten-tabelle td[data-l]::before { content: none !important; }
}
@media (max-width: 640px) {
  .wrap { padding: 12px; }
  h1 { font-size: 1.4rem; }
  .live-timer { font-size: 2.1rem; }
  th, td { padding: 6px 5px; font-size: .85rem; }
}

/* --- Urlaubsplaner (Runde 6, A1/A2) --- */
:root {
  /* Feste Farbpalette je Wirkung der Abwesenheitsart (A2) – bewusst keine
     Farb-Verwaltung je Art (White-Label schlank halten) */
  --abw-urlaub: #3d6ea5;
  --abw-krank: #b3402e;
  --abw-berufsschule: #7a4fa3;
  --abw-stundenabbau: #2e8578;
  --abw-unbezahlt: #806a55;
  --abw-feiertag: #b07d1e;
  --abw-sonstiges: #5f6b72;
}
.up-tabelle { border-collapse: collapse; width: 100%; }
.up-tabelle th, .up-tabelle td { text-align: center; padding: 3px 2px; min-width: 26px; font-size: .8rem; border-bottom: 1px solid var(--line); }
.up-tabelle th { font-weight: 600; line-height: 1.15; }
.up-tabelle th .muted { font-size: .68rem; font-weight: 400; }
.up-tabelle .name { text-align: left; min-width: 130px; position: sticky; left: 0; background: var(--card); z-index: 1; padding-right: 8px; }
.up-tabelle .up-we { background: color-mix(in srgb, var(--muted) 8%, transparent); }
.up-tabelle .up-heute { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.up-zelle { display: block; border-radius: 4px; color: #fff; font-size: .72rem; line-height: 1.7; min-width: 22px; text-decoration: none; }
a.up-zelle:hover { filter: brightness(1.12); }
/* beantragt = schraffiert/abgeschwächt (A2) */
.up-zelle.beantragt { background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255, 255, 255, .5) 3px 6px); }
.abw-urlaub { background-color: var(--abw-urlaub); }
.abw-krank { background-color: var(--abw-krank); }
.abw-berufsschule { background-color: var(--abw-berufsschule); }
.abw-stundenabbau { background-color: var(--abw-stundenabbau); }
.abw-unbezahlt { background-color: var(--abw-unbezahlt); }
.abw-feiertag { background-color: var(--abw-feiertag); }
.abw-sonstiges { background-color: var(--abw-sonstiges); }
.up-frei { display: block; height: 18px; border-radius: 4px; background: color-mix(in srgb, var(--muted) 22%, transparent); }
.up-feiertag { background: color-mix(in srgb, var(--abw-feiertag) 25%, transparent); color: var(--gelb); font-weight: 700; }
.up-zelle-demo.beantragt { background-color: var(--abw-urlaub); background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255, 255, 255, .5) 3px 6px); }
/* A3: Besetzungs-Zeile im Urlaubsplaner */
.up-besetzung td { border-top: 2px solid var(--line); }
.up-bes { display: inline-block; font-size: .72rem; font-variant-numeric: tabular-nums; border-radius: 4px; padding: 0 3px; }
.up-bes.rot { background: color-mix(in srgb, var(--rot) 18%, transparent); color: var(--rot); font-weight: 700; }
.up-bes.gelb { background: color-mix(in srgb, var(--gelb) 22%, transparent); color: var(--gelb); font-weight: 700; }
/* F160: Sprungleiste Jan–Dez der 3-Monats-Ansicht – sticky unter der Topbar
   (deren Höhe liefert app.js als --topbar-h, weil sie je nach Umbruch variiert) */
.up-sprungleiste { position: sticky; top: var(--topbar-h, 0px); z-index: 15; background: var(--bg); padding: 8px 0 10px; margin: 0 0 14px; border-bottom: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.up-sprungleiste a { font-size: .82rem; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; }
.up-sprungleiste a.akt { background: var(--accent); border-color: var(--accent); color: #fff; }
.up-sprungleiste a.fenster { background: color-mix(in srgb, var(--accent) 16%, var(--card)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* F160: Tages-Kopf-Link der 3-Monats-Ansicht – volle Zelle, unaufdringlich */
.up-tag-link { display: block; color: inherit; text-decoration: none; }
.up-tag-link:hover { text-decoration: none; color: var(--accent); }
/* F157: Monats-/Zeitraum-Label mit fester Mindestbreite (längster Monatsname),
   damit ‹ ›/„Heute“ beim Blättern nicht springen; 3-Monats-Label ist länger */
.up-zeitraum-label { display: inline-block; min-width: 15ch; text-align: center; }
.up-zeitraum-label.gross { min-width: 28ch; }
/* F155: mehr Luft zwischen den Matrix-Zeilen am Desktop (mobil unverändert –
   dort zählt jede Zeile Höhe, damit alles ohne Scrollen erfassbar bleibt).
   F155-Rest (Runde 8): Mitarbeiternamen am Desktop etwas größer und fetter –
   in Monats- UND 3-Monats-Ansicht (der Monitor skaliert separat, F167). */
@media (min-width: 769px) {
  .up-tabelle td { padding-top: 7px; padding-bottom: 7px; }
  .up-tabelle td.name { font-size: .92rem; font-weight: 600; }
}
/* F156 (+Nachtrag): fixierte Namensspalte + Datums-Kopfzeile opak und ÜBER der
   Scroll-Ebene – die Chips (.up-zelle) schoben sich beim Horizontal-Scrollen
   je nach Browser über bzw. unter die Spalte. Kopfzellen brauchen dafür eine
   OPAKE Mischfarbe auf Basis var(--card) statt transparenter Überlagerung;
   die Chips bekommen eine definierte (niedrige) Stapel-Ebene. */
.up-tabelle .name { z-index: 3; }
.up-tabelle tr:first-child th { position: sticky; top: 0; background: var(--card); z-index: 2; }
.up-tabelle tr:first-child th.name { z-index: 4; }
.up-tabelle tr:first-child th.up-we { background: color-mix(in srgb, var(--muted) 8%, var(--card)); }
.up-tabelle tr:first-child th.up-heute { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.up-zelle, .up-frei, .up-bes { position: relative; z-index: 0; }
/* F156: im Scroll-Container darf links/rechts kein Card-Innenabstand liegen –
   sonst scheinen gescrollte Chips im Padding-Streifen NEBEN der fixierten
   Namensspalte durch. Der Abstand wandert in die Randzellen der Matrix. */
.card.tabelle-scroll:has(.up-tabelle) { padding-left: 0; padding-right: 0; }
.card.tabelle-scroll .up-tabelle .name { padding-left: 16px; }
.card.tabelle-scroll .up-tabelle th:last-child, .card.tabelle-scroll .up-tabelle td:last-child { padding-right: 16px; }
.card.tabelle-scroll .up-monatstitel { padding: 0 16px; }
/* Runde 7 (A1/A2): Monats-Überschrift über einer Matrix des gemeinsamen
   Partials – sticky-links, damit sie beim Horizontal-Scrollen sichtbar bleibt
   (sie liegt im Scroll-Container der Tabelle) */
.up-monatstitel { margin: 0 0 8px; font-size: 1.05rem; position: sticky; left: 0; width: max-content; }
.up-monatstitel a { text-decoration: none; }

/* C1/F166 (Runde 8): Einstellungen – Speicher-Zonen. Ein dezenter Rahmen
   bündelt die Blöcke, für die der jeweilige Speichern-Knopf gilt; der Knopf
   liegt sichtbar INNERHALB der Zone (die Zuordnung war vorher nur Position). */
.einstellungs-zone {
  border: 1.5px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 18px; padding: 14px 14px 16px; margin: 0 0 30px;
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.einstellungs-zone .zonen-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.einstellungs-zone .zonen-fuss .muted { font-size: .85rem; }

/* B9 (Runde 8): Besetzungszahl als Klickziel + Popover mit den Tooltip-Infos
   (Tap-tauglich – title-Attribute sind am Touch-Gerät unerreichbar) */
button.up-bes-klick { border: 0; background: none; cursor: pointer; font-family: inherit; color: inherit; }
.up-bes-popover {
  position: fixed; z-index: 60; max-width: 300px; line-height: 1.55;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: .85rem; text-align: left;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.up-bes-popover .pop-titel { font-weight: 700; margin-bottom: 2px; }
.up-bes-popover .pop-rot { color: var(--rot); font-weight: 700; }
.up-bes-popover .pop-gelb { color: var(--gelb); font-weight: 700; }
.up-bes-popover .pop-ok { color: var(--gruen); }

/* B8 (Runde 8): leere Admin-Zellen als Klickfläche – öffnet den Direkteintrag
   mit Mitarbeiter + Datum vorbefüllt; dezenter Hover als Affordanz */
a.up-eintrag { display: block; }
a.up-eintrag-leer { height: 18px; border-radius: 4px; }
a.up-eintrag:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* A5: neutrale Darstellung fremder Abwesenheiten in der Mitarbeiter-Sicht */
:root { --abw-neutral: #6a7480; }
.abw-neutral { background-color: var(--abw-neutral); }
.up-zelle-demo-neutral.beantragt { background-color: var(--abw-neutral); background-image: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255, 255, 255, .5) 3px 6px); }

/* B1.1: ArbZG-/Storno-Hinweise auf der Stempelseite kompakt */
.stempel-bereich .hinweis-box { padding: 8px 10px; font-size: .85rem; margin-bottom: 4px; }