:root {
  /* Werkstatt-Palette: warmes Papier, Tinte, Kobalt-Akzent */
  --ink: #1b1c22;          /* Text & dunkle Flächen */
  --bg: #131A2B;           /* Hero-Tinte = NACHTBLAU (Markenfarbe, 19.08.) */
  --bg-soft: #1B2540;      /* helleres Nachtblau */
  --card: #ffffff;
  --paper: #f1f0ec;        /* App-Hintergrund (Stundenzettel-Papier) */
  --text: #1b1c22;
  --muted: #6c6e78;
  --border: #e5e3dc;       /* warme Haarlinie */
  --border-strong: #d7d4cb;
  /* Flaechen-Stufen. Bis 2026-07-30 standen diese Toene ueber 60x fest im
     Stylesheet (#fff, #f3f2ee, #faf9f6 …). Als Marken lassen sie sich fuer das
     dunkle Thema an EINER Stelle umstellen — vorher haette man 60 Zeilen
     einzeln nachziehen muessen und dabei welche vergessen. */
  --sanft: #faf9f6;        /* leicht abgesetzte Flaeche in einer Karte */
  --sanft-2: #fbfbf9;      /* Verlauf-Anfang (Stempeluhr) */
  --sanft-3: #f7f6f2;      /* Verlauf/Flaeche etwas kraeftiger */
  --hover: #f3f2ee;        /* Ueberfahren */
  --spur: #eceae3;         /* leere Spur eines Balkens, inaktive Flaeche */
  --text-2: #3a3b44;       /* Beschriftung, etwas leiser als --text */
  --glanz: #ffffff;        /* Glanzkante oben auf gewoelbten Flaechen */
  --toast-bg: #1b1c22;     /* eigene Marke: im dunklen Thema wird der Toast HELL */
  --toast-text: #ffffff;
  /* ══ MTO-Markenfarben: NACHTBLAU & MESSING (festgelegt 2026-08-19) ══
     Loesen Koralle/Indigo ab — die stammten aus einem anderen Projekt
     (TripHar) und waren nie fuer diese Marke gewaehlt.

     WARUM DREI MESSING-WERTE und nicht einer: Ein Ton, der als Zeichen auf
     Weiss UND auf Nachtblau gleich gut sitzt (#A87330), ist als Knopf-Flaeche
     mit weisser Schrift zu hell — dort kaeme nur 4,07:1 heraus, verlangt sind
     4,50. Deshalb traegt die Bedienfarbe einen dunkleren Ton, die Marke ihren
     eigenen. Gemessen, nicht geschaetzt:
       --primary  #8F6128 : weisse Schrift 5,37:1 · als Text auf Papier 4,71:1
       --messing  #A87330 : auf Weiss 4,07:1 · auf Nachtblau 4,26:1  (Zeichen)
       dunkles Thema #C9954A : auf dunklem Grund 6,77:1
     Aendert jemand einen davon, bitte NACHRECHNEN, nicht nach Augenmass. */
  --primary: #8F6128;      /* MESSING – die Bedienfarbe (Knoepfe, Links, Aktiv) */
  --primary-dark: #734E20; /* dunkleres Messing fuer Hover */
  --primary-tint: #F6EDE0; /* helle Messing-Toenung (Flaechen, Plaketten) */
  --secondary: #131A2B;    /* NACHTBLAU – der zweite Marken-Pol (Verlauf, Tiefe) */
  /* Die Zeichenfarbe der Marke. Bewusst NICHT --primary: Das Logo soll auf
     hellem wie dunklem Grund identisch aussehen, ein Knopf muss dagegen
     weisse Schrift tragen koennen. Zwei Aufgaben, zwei Werte. */
  --messing: #A87330;
  --nachtblau: #131A2B;
  /* Zustandsfarbe Homeoffice (Buchungsart 0406). Hing bis 2026-08-19 an --secondary und
     erbte damit das alte Marken-Indigo. Nachtblau kann die Rolle NICHT
     uebernehmen: ein fast schwarzer Knopf ist im dunklen Thema unsichtbar.
     Deshalb ein eigenes Token — Stahlblau aus der Nachtblau-Familie, klar
     unterscheidbar von Messing, Gruen und Orange. Weisse Schrift: 6,71:1. */
  --mobil: #3E5C8A;
  --mobil-dark: #334C73;
  --success: #16a34a;
  --danger: #dc2626;
  --radius: 14px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(20, 22, 31, 0.05), 0 14px 30px rgba(20, 22, 31, 0.07);
  --shadow-sm: 0 1px 2px rgba(20, 22, 31, 0.06);
  /* EIN Mass fuer beide Seiten: App und Verwaltung stehen exakt gleich breit
     und gleich weit vom Rand. Sonst springt der Modus-Umschalter beim Wechsel
     von links aussen in die Mitte. Nicht auseinanderlaufen lassen. */
  --mass: 1080px;
  --rand: clamp(16px, 4vw, 40px);
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Das hidden-Attribut versteckt ueber display:none aus dem BROWSER-STANDARD —
   jede eigene display-Regel (flex, inline-flex, grid …) ist staerker und
   haengt es aus. Genau das ist hier zweimal passiert: ein ausgeblendeter Knopf
   und ein ausgeblendeter Umschalter blieben sichtbar. Diese eine Zeile stellt
   sicher, dass hidden ueberall haelt — auch bei allem, was noch kommt. */
[hidden] { display: none !important; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand { font-family: var(--font-display); }

a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 6vw, 80px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -0.3px; }
/* Der alte Marken-PUNKT ist weg — an seiner Stelle steht seit 2026-08-19 das
   echte Zeichen (Eule im Zifferblatt, `js/logo.js`). Er war ausserdem noch blau
   (#8aa0ff) und damit die letzte sichtbare Spur der alten Farben.

   Der RING des Zeichens nimmt `currentColor` und wechselt mit der Schrift mit;
   die EULE bleibt fest #A87330 — auf jedem Grund, in jedem Thema. Begruendung
   steht in js/logo.js. */
.mto-marke { display: inline-flex; align-items: center; flex: none; }
.mto-marke svg { display: block; }
/* Die Aussparungen im Gefieder muessen die FLAECHE treffen, auf der das Zeichen
   liegt — sonst leuchtet im dunklen Thema ein weisses Gesicht heraus. */
.mto-marke { --zeichen-aussparung: var(--card, #fff); }
:root[data-theme="dark"] .mto-marke { --zeichen-aussparung: var(--paper, #16171c); }


.mockup {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 22px;
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.mockup .timer-face {
  font-family: var(--font-display);
  font-size: 46px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: center; padding: 20px 0; letter-spacing: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.mockup .bar { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); margin: 10px 0; }
.mockup .bar.fill { background: linear-gradient(90deg, #A87330, #8F6128); }
.mockup .row { display: flex; justify-content: space-between; color: #c7ccd8; font-size: 14px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }

.features {
  background: var(--sanft-2);
  padding: clamp(50px, 8vw, 90px) clamp(20px, 6vw, 80px);
  border-top: 1px solid var(--border);
}
.features h2 { text-align: center; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.8px; }
.features .sub { text-align: center; color: var(--muted); margin-top: 10px; }
.feature-grid {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.feature {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.feature .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--primary-tint); font-size: 22px; margin-bottom: 14px; }
.feature h3 { font-size: 18px; letter-spacing: -0.3px; }
.feature p { color: var(--muted); margin-top: 8px; font-size: 15px; }

.footer { text-align: center; padding: 34px; color: var(--muted); background: var(--sanft-2); border-top: 1px solid var(--border); }

@media (max-width: 860px) {
  .mockup { order: -1; }
}

/* ---------- Buttons ----------
 * ZWEI Groessen fuer die ganze Anwendung, mehr nicht: .btn (normal) und
 * .btn-sm (klein). Die Hoehe kommt aus min-height, NICHT aus dem Innenabstand
 * — sonst ist ein Knopf mit Zeichen ("⟳") ein paar Pixel niedriger als einer
 * ohne, und in einer Reihe steht dann alles auf verschiedenen Hoehen. Genau
 * das war im Projekte-Fenster zu sehen: "Anlegen" klein, "Schliessen" gross.
 * Wer eine neue Groesse braucht, braucht in Wahrheit eine der beiden. */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  border: none; border-radius: 10px; padding: 0 20px; min-height: 46px;
  font-weight: 600; font-size: 15px; line-height: 1.2;
  transition: transform .05s ease, background .15s ease, box-shadow .15s ease, opacity .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(143, 97, 40, 0.26); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }
.btn-light { background: var(--card); color: var(--primary); }
.btn-light:hover { background: #f2f3fb; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text); }
.btn-outline:hover { background: var(--hover); }
.app-account { text-align: center; padding: 28px 0 8px; }
.app-account .btn { color: var(--danger); border-color: #f0c9c9; }
.app-account .btn:hover { background: #fdf3f3; }
.btn-pause { background: #f59e0b; color: #fff; }
.btn-pause:hover { background: #d97706; }
.btn-pause.running { background: #b45309; }
.btn-mobile { background: #16a34a; color: #fff; }
.btn-mobile:hover { background: #15803d; }
.btn-mobile.running { background: #b91c1c; }
.btn-sm { padding: 0 14px; min-height: 38px; font-size: 13.5px; border-radius: 9px; box-shadow: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Auth-Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 22, 31, 0.6); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--card); color: var(--text); border-radius: var(--radius-lg); width: 100%; max-width: 420px;
  padding: 30px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.modal h2 { font-size: 24px; letter-spacing: -0.5px; }
.modal .tabs { display: flex; gap: 6px; background: var(--paper); padding: 5px; border-radius: 10px; margin: 18px 0 22px; }
.modal .tabs button { flex: 1; border: none; background: transparent; padding: 9px; border-radius: 7px; font-weight: 600; color: var(--muted); }
.modal .tabs button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

label.field { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--text-2); }
label.field input, label.field select, .input {
  width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--border-strong);
  border-radius: 9px; font-size: 15px; font-family: inherit; background: var(--card); color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}
label.field input:focus, .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }

.form-msg { font-size: 14px; margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; display: none; }
.form-msg.error { display: block; background: #fdf3f3; color: var(--danger); }
.form-msg.success { display: block; background: #f0fdf4; color: var(--success); }

/* ---------- App ---------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-header {
  background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
}
/* Innere Huelle: gleiches Mass wie .container darunter und wie .a-topbar-in in
   der Verwaltung. Ohne sie stuende die Marke hier am Bildschirmrand und
   drueben in der Mitte. */
.kopf-innen {
  width: 100%; max-width: var(--mass); margin: 0 auto; padding: 14px var(--rand);
  display: flex; align-items: center;
}
/* Die Teile stehen LINKS aneinander, das Konto schiebt sich nach rechts —
   genau wie in der Verwaltung. Mit space-between waere der Umschalter in die
   Mitte gerutscht und haette beim Wechsel gesprungen. */
.kopf-innen > .user-box { margin-left: auto; }
.app-header .brand { color: var(--text); }
.app-version { font-size: 11px; font-weight: 500; color: var(--muted); font-family: var(--font-body); }
/* (Der blaue Schein um den alten Punkt ist mit dem Punkt entfallen.) */
.user-box { display: flex; align-items: center; gap: 14px; }
.avatar { width: 38px; height: 38px; border-radius: 11px; background: var(--primary); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); }
.user-name { font-size: 14px; font-weight: 600; }
.user-mail { font-size: 12px; color: var(--muted); }

.container { width: 100%; max-width: var(--mass); margin: 0 auto; padding: 26px var(--rand); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.card h3 { font-size: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; letter-spacing: -0.2px; }

/* Signatur: die Stempeluhr als Instrument-Anzeige */
.timer-display {
  font-family: var(--font-display);
  font-size: 54px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
  padding: 22px 12px; letter-spacing: 2px; color: var(--ink);
  background: linear-gradient(180deg, var(--sanft-2) 0%, #f2f1ec 100%);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: inset 0 1px 0 var(--glanz), inset 0 -16px 26px rgba(20, 22, 31, 0.03);
}
.timer-meta { text-align: center; color: var(--muted); font-size: 14px; margin: 12px 0 16px; min-height: 20px; }
.timer-controls { display: flex; gap: 10px; }
.timer-controls .btn { flex: 1; }
.timer-stack { display: flex; flex-direction: column; gap: 10px; }
/* Die Stempel-Knoepfe sind die Hauptsache der Seite und duerfen groesser
   sein — aber alle GLEICH gross. Hoehe wieder ueber min-height, nicht ueber
   den Innenabstand: sonst war "🏠 mobiles Arbeiten" wegen des Zeichens einen
   Tick hoeher als "▶ Kommen". (Das Haus-Zeichen ist inzwischen weg und die
   Buchungsart heisst „Homeoffice" — die Regel bleibt: gleiche Hoehe.) */
.timer-stack .btn { width: 100%; padding: 0 16px; min-height: 54px; font-size: 16px; }
.punch-add-row .btn { flex: 1; }
.timer-fields { display: flex; gap: 10px; margin-bottom: 16px; }
.timer-fields > * { flex: 1; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; box-shadow: var(--shadow-sm); }
.stat .num { font-family: var(--font-display); font-size: 27px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.stat .lbl { font-size: 12px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .6px; font-weight: 500; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
td.dur { font-variant-numeric: tabular-nums; font-weight: 600; font-family: var(--font-display); }
.proj-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.proj-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn { border: none; background: transparent; font-size: 15px; padding: 5px; border-radius: 6px; color: var(--muted); }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
tr.day-sep td { background: var(--hover); border-top: 2px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
  font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink);
  padding: 10px 8px; font-family: var(--font-display); }
.day-sep-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.day-sep-totals { font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--primary); white-space: nowrap; font-variant-numeric: tabular-nums; }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 7px; background: var(--hover); border: 1px solid var(--border); border-radius: 20px; padding: 6px 12px; font-size: 13px; }
.chip button { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; }

.section-title { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 14px; }
.section-title h2 { font-size: 20px; letter-spacing: -0.4px; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-text); padding: 12px 20px; border-radius: 10px; font-size: 14px;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 100; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.error { background: var(--danger); }

.form-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-inline .full { grid-column: 1 / -1; }

/* Datumsbereich-Kalender */
.field-label { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.daterange-trigger { text-align: left; cursor: pointer; width: 100%; }
.daterange-pop { position: absolute; z-index: 40; left: 0; margin-top: 6px; width: 288px; max-width: 92vw;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; }
.dr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 700; }
.dr-head button { border: 1px solid var(--border-strong); background: var(--card); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dr-wd { font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 0; }
.dr-day { border: none; background: transparent; padding: 8px 0; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--text); }
.dr-day:hover { background: var(--hover); }
.dr-day.in-range { background: var(--primary-tint); }
.dr-day.sel { background: var(--primary); color: #fff; font-weight: 700; }

.punch-add { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.punch-add-title { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .6px; }
.punch-add-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.punch-add-row .input { flex: 1; min-width: 110px; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.kommen { background: #dcfce7; color: #15803d; }
.badge.gehen { background: #fee2e2; color: #b91c1c; }
.badge.pause { background: #fef3c7; color: #92400e; }

/* ---------- Übersicht ---------- */
.month-nav { display: flex; align-items: center; gap: 10px; }
.month-nav button { border: 1px solid var(--border-strong); background: var(--card); border-radius: 8px; width: 34px; height: 34px; font-size: 18px; line-height: 1; color: var(--text); }
.month-nav button:hover { background: var(--hover); }
.month-nav span { font-weight: 700; min-width: 140px; text-align: center; font-family: var(--font-display); letter-spacing: -0.2px; }

.view-toggle { display: inline-flex; gap: 4px; background: var(--paper); padding: 4px; border-radius: 10px; margin-bottom: 16px; }
.view-toggle button { border: none; background: transparent; padding: 7px 18px; border-radius: 7px; font-weight: 600; color: var(--muted); font-size: 14px; cursor: pointer; }
.view-toggle button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin-bottom: 0; }
.mini-stat { background: var(--sanft); border: 1px solid var(--border); border-radius: 10px; padding: 12px 6px; text-align: center; }
.mini-stat .n { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }
.mini-stat .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; font-weight: 500; }

.day-row, .proj-row { display: grid; grid-template-columns: 96px 1fr 62px; align-items: center; gap: 10px; padding: 7px 0; }
.day-row .d-label { font-size: 13px; color: var(--muted); }
.proj-row .p-label { font-size: 13px; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bar-track { background: var(--spur); border-radius: 6px; height: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: var(--primary); transition: width .3s ease; }
.row-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.overview-empty { color: var(--muted); text-align: center; padding: 24px 0; }

/* ---------- Monatsblatt ---------- */
/* Sieht der Admin das Blatt EINER ANDEREN Person, muss das unuebersehbar sein —
   sonst druckt oder beurteilt er fremde Stunden im Glauben, es seien seine.
   Traegt no-print: aufs Papier gehoert der Name im Blattkopf, nicht dieser
   Bildschirm-Hinweis. */
.fremd-hinweis {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 10px 14px; border-radius: 10px;
  background: var(--primary-tint); color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  font-size: 14px; font-weight: 600;
}
.sheet-controls { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sheet-controls .spacer { flex: 1; }
.soll-field { font-size: 13px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.soll-field input { width: 80px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; font-family: inherit; }

.sheet { padding: 28px; }
.sheet-head { border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 16px; }
.sheet-head h1 { font-size: 22px; letter-spacing: -0.5px; }
.sheet-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }

.sheet-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sheet-table th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; padding: 8px 8px; border-bottom: 1px solid var(--border); }
.sheet-table td { padding: 7px 8px; border-bottom: 1px solid #efeee7; }
.sheet-table .c-num, .sheet-table th.c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-table .c-time, .sheet-table th.c-time { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-table .c-date { white-space: nowrap; color: var(--muted); }
.sheet-table .c-day { font-weight: 600; }
.sheet-table tr.weekend td { background: var(--sanft); color: var(--muted); }
.sheet-table tr.today td { background: var(--primary-tint); }
.sheet-table td.strong { font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.sheet-table tr.day-total td { border-top: 1px dashed var(--border-strong); }
.sheet-table tr.day-total td.c-desc { font-weight: 700; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .4px; }
.sheet-table td.pos { color: var(--success); font-weight: 600; }
.sheet-table td.neg { color: var(--danger); font-weight: 600; }
.sheet-table tfoot .sum-row td { border-top: 2px solid var(--ink); border-bottom: none;
  font-weight: 700; font-size: 15px; padding-top: 12px; font-family: var(--font-display); }
.sheet-table tfoot .sum-row td:first-child { text-transform: uppercase; letter-spacing: .4px; font-size: 13px; }

.sheet-legend { margin-top: 16px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.sheet-legend .hint { font-style: italic; }

@media print {
  body { background: var(--card); }
  .no-print { display: none !important; }
  .app-shell, .container { display: block; padding: 0; margin: 0; max-width: none; }
  .sheet { box-shadow: none; border: none; padding: 0; }
  .table-scroll { overflow: visible !important; }
  .sheet-table tr.weekend td { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet-table tr.today td { background: transparent !important; }
  .sheet-table td.pos { color: #000; }
  .sheet-table td.neg { color: #000; }
  @page { margin: 1.4cm; }
}

/* ---------- Tabellen auf kleinen Screens horizontal scrollbar ---------- */
.table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-card > table { min-width: 640px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .sheet-table { min-width: 560px; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Mobil-Anpassungen ---------- */
@media (max-width: 640px) {
  .container { padding: 16px var(--rand); }
  .card { padding: 16px; }
  .card h3 { font-size: 15px; }

  /* Eingaben mind. 16px -> verhindert Auto-Zoom auf iOS */
  .input, label.field input, label.field select { font-size: 16px; }

  /* Kopfzeile kompakt: Version & Name ausblenden, Avatar/Refresh/Abmelden bleiben */
  .kopf-innen { padding: 10px var(--rand); gap: 8px; }
  .app-header .brand { font-size: 16px; white-space: nowrap; }
  .app-version { display: none; }
  .user-box { gap: 8px; margin-left: auto; }
  /* Nur das Symbol, dafuer als quadratische Flaeche mit ordentlichem
     Tippziel (42 px) und groesserem Zeichen — 13 px waren am Daumen nicht zu
     treffen und kaum zu sehen. */
  #refresh-btn .rb-label { display: none; }
  #refresh-btn {
    padding: 0; width: 42px; height: 42px; flex: 0 0 auto;
    font-size: 19px; line-height: 1; border-radius: 11px;
  }
  .user-box .avatar { width: 30px; height: 30px; font-size: 13px; }
  .user-mail, .user-name { display: none; }

  /* Statistik */
  .stats { gap: 8px; }
  .stat { padding: 12px 6px; }
  .stat .num { font-size: 21px; }
  .stat .lbl { font-size: 10px; }

  /* Stempeluhr */
  .timer-display { font-size: 44px; }
  .timer-controls .btn { padding: 0 16px; min-height: 54px; font-size: 16px; }
  .punch-add-row .input { min-width: 0; flex: 1 1 46%; }
  .punch-add-row .btn { flex: 1 1 46%; }

  /* Formulare untereinander */
  .form-inline { grid-template-columns: 1fr; }

  /* Übersicht */
  .section-title { flex-wrap: wrap; gap: 10px; }
  .section-title h2 { font-size: 18px; }
  .month-nav span { min-width: 108px; font-size: 15px; }
  .mini-stats { gap: 8px; }
  .day-row, .proj-row { grid-template-columns: 78px 1fr 56px; }

  /* Monatsblatt */
  .sheet { padding: 18px 14px; }
  .sheet-head h1 { font-size: 18px; }
  .sheet-controls { gap: 10px; }
  .soll-field { flex: 1 1 100%; }

  /* grössere Touch-Ziele */
  .icon-btn { padding: 8px; font-size: 17px; }

  /* Landingpage */
  .nav { padding: 16px; flex-wrap: wrap; gap: 8px; }
  .badges { gap: 16px; }
  .modal { padding: 24px 20px; }
}

/* ═══ App-Hauptseite (nur body.seite-app) ════════════════════════════════
 * Hallmark · scope: app-Seite (keine Makrostruktur — Werkzeug, kein Marketing)
 * pre-emit critique: P4 H5 E4 S4 R5 V4 · theme: markengebunden (brand.js AKTIV)
 * Nur ANGEHAENGT: styles.css tragen zehn weitere Seiten — geteilte Regeln
 * werden hier ueberschrieben, nie veraendert. Alle IDs/Klassen, an denen
 * app.js haengt, bleiben unangetastet.
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Kopfzeile: zwei Zeilen — oben wer, unten wohin ──
 * Vorher standen Marke, Orte und Konto in EINER Zeile. Ausgemessen brauchen
 * die drei zusammen rund 1280 px: unter 1600 px wurde der letzte Ort
 * ("Firma verwalten") abgeschnitten, am Tablet blieb von der Leiste ein
 * 50-px-Stummel. Deshalb bekommt die Orte-Leiste auf JEDER Breite ihre eigene
 * Zeile — gleiches Bild am Handy wie am Rechner, nichts wird beschnitten.
 * Zeile 1 = Marke + Konto, Zeile 2 = die Orte, dazwischen ein Trennstrich. */
.kopf-app .kopf-innen {
  flex-wrap: wrap; gap: 8px 14px;
  /* 10 px, nicht 12: die Verwaltung setzt ihre Kopfzeile auf 64 px Hoehe und
     zentriert — die Marke sitzt dort bei y10. Mit 12 px sassen Marke und
     Umschalter auf den beiden Seiten 2 px unterschiedlich hoch und zuckten
     beim Wechsel. Waagrecht stehen sie seit heute exakt gleich; senkrecht
     jetzt auch. Wer eine der beiden Zahlen anfasst, misst die andere nach. */
  padding-top: 10px;
  padding-bottom: 0;   /* die Orte-Zeile bringt ihren eigenen Abstand mit */
}
/* Die Orte-Leiste darf die SEITE nie breiter machen: min-width 0 erlaubt ihr
   zu schrumpfen, overflow-x laesst sie in sich selbst rollen. Ohne das schob
   die Leiste am Handy die ganze Seite nach rechts (5 Orte passen nicht in
   390 px) — alles war verschoben und rechts abgeschnitten. */
.kopf-app .kopf-orte {
  display: flex; align-items: center; gap: 0;
  order: 3; flex: 1 0 100%; width: 100%; min-width: 0;
  /* zieht den Trennstrich ueber die volle Breite: die negativen Raender
     heben genau das Innenmass der Kopfzeile auf */
  margin: 0 calc(-1 * var(--rand));
  padding: 4px var(--rand) 6px;
  border-top: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.kopf-app .kopf-orte::-webkit-scrollbar { display: none; }
.kopf-app .kopf-orte .ort {
  position: relative; flex: 0 0 auto;
  padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 14px;
  color: var(--muted); white-space: nowrap;
  transition: color .12s ease, background .12s ease;
  /* „Projekte" ist ein <button> (oeffnet ein Fenster), die anderen Orte sind
     Links — beide muessen gleich aussehen. */
  background: none; border: none; font-family: inherit; cursor: pointer;
}
/* Trennstriche zwischen den Orten. Als Pseudo-Element im Zwischenraum, nicht
   als border: so bleibt die Hover-Flaeche ein sauberes Rechteck und der Strich
   wandert beim Ueberfahren nicht mit. */
.kopf-app .kopf-orte .ort + .ort::before {
  content: ''; position: absolute; left: -1px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--border);
}
.kopf-app .kopf-orte .ort:hover { color: var(--text); background: var(--hover); }
.kopf-app .kopf-orte .ort:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Offene Antraege: app.js setzt btn-warn — die Klasse war NIE definiert,
   die Hervorhebung lief ins Leere. Jetzt traegt sie die Markenfarbe. */
.kopf-app .ort.btn-warn { color: var(--primary); background: var(--primary-tint); }
/* Konto rechts aussen in der oberen Zeile; senkrechte Bereichs-Trenner
   braucht es nicht mehr, seit Marke und Konto allein auf ihrer Zeile stehen. */
.kopf-app .user-box { gap: 10px; margin-left: auto; }
.kopf-app .wer { text-align: left; }
.kopf-app .user-box .btn.leise {
  border-color: transparent; color: var(--muted); padding: 7px 10px;
}
.kopf-app .user-box .btn.leise:hover { background: var(--hover); color: var(--text); }
/* Aktualisieren ist ein WERKZEUG, kein Ort — es soll leiser sein als die
   Reiter, aber als Knopf erkennbar bleiben. Ohne Rahmen war es am Handy nur
   noch ein blasses Zeichen zwischen Marke und Avatar; jetzt traegt es Rahmen
   und volle Textfarbe. */
/* „Aktualisieren" ist am Rechner nur noch das Symbol.
   Grund: seit Umschalter und Hell/Dunkel-Knopf hinter der Marke stehen (damit
   sie beim Seitenwechsel nicht springen), braucht die erste Zeile 1044 px und
   hat 1000 — der Konto-Block rutschte in eine zweite Zeile. Mit dem Wort
   „Aktualisieren" fallen 94 px weg und alles passt wieder nebeneinander.
   Die Beschriftung war ohnehin überflüssig: der Knopf steht direkt neben dem
   Hell/Dunkel-Knopf, ist genauso gebaut und trägt seinen Zweck im `title`. */
.kopf-app #refresh-btn .rb-label { display: none; }
.kopf-app .werkzeug {
  border-color: var(--border); color: var(--text); background: var(--card);
}
.kopf-app .werkzeug:hover { background: var(--hover); border-color: var(--muted); }

/* ── Statistik: EIN Streifen statt drei schwebender Kaertchen ── */
.seite-app .stats { grid-template-columns: repeat(3, 1fr); gap: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  background: var(--card); }
.seite-app .stat { border: none; border-radius: 0; box-shadow: none; padding: 18px 12px; }
.seite-app .stat + .stat { border-left: 1px solid var(--border); }
/* Nur HEUTE traegt die Markenfarbe — drei gleich laute Zahlen sind keine
   Hierarchie. Woche/Gesamt in Tinte. */
.seite-app .stat .num { color: var(--ink); }
.seite-app .stat:first-child .num { color: var(--primary); }

/* ── Spalten: links das taegliche Werkzeug, rechts das Seltene ── */
.seite-app .grid { grid-template-columns: 1.08fr 0.92fr; align-items: start; }
@media (max-width: 820px) { .seite-app .grid { grid-template-columns: 1fr; } }
.seite-app .spalte { display: flex; flex-direction: column; gap: 22px; }

/* ── Kartentitel: Haarlinie drunter statt Emoji davor ── */
.seite-app .card h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); font-weight: 600;
  padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}

/* ── Stempeluhr: die eine grosse Sache der Seite ── */
.seite-app .timer-display { font-size: 58px; }

/* ── Nachtragen: der Aufklapper ist ein KNOPF (details, ohne JS) ──
   Vorher sah er wie eine Beschriftung aus und wurde uebersehen. Jetzt
   traegt er dieselbe Form wie die Stempel-Knoepfe darueber, aber in der
   ruhigen Umriss-Variante: gleich auffindbar, ohne dem gruenen "Kommen"
   die Hauptrolle streitig zu machen. */
.seite-app .nachtragen { margin-top: 10px; }
.seite-app .nachtragen > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 14px 16px; margin: 0;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--card); color: var(--text);
  font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0;
  transition: background .15s ease, border-color .15s ease;
}
.seite-app .nachtragen > summary::-webkit-details-marker { display: none; }
.seite-app .nachtragen > summary:hover { background: var(--hover); border-color: var(--muted); }
.seite-app .nachtragen > summary:active { transform: translateY(1px); }
.seite-app .nachtragen > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Der Pfeil sitzt rechts und zeigt an, dass sich hier etwas oeffnet */
.seite-app .nachtragen .pfeil {
  width: 16px; height: 16px; margin-left: auto; color: var(--muted);
  transition: transform .15s ease;
}
.seite-app .nachtragen[open] .pfeil { transform: rotate(180deg); }
/* Aufgeklappt: Knopf und Flaeche gehoeren sichtbar zusammen */
.seite-app .nachtragen[open] > summary {
  margin-bottom: 0; background: var(--hover);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent;
}
.seite-app .nachtragen[open] .nachtragen__flaeche {
  border-top-left-radius: 0; border-top-right-radius: 0;
}
@media (prefers-reduced-motion: reduce) { .seite-app .nachtragen .pfeil { transition: none; } }

/* ── Kartenkoepfe fuer Uebersicht + Zeiten ── */
.seite-app .karten-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.seite-app .karten-kopf h2 { font-size: 18px; letter-spacing: -0.3px; }
.seite-app .karten-kopf__l, .seite-app .karten-kopf__r {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.seite-app .karten-kopf .view-toggle { margin-bottom: 0; }
.seite-app .karte-kopfzeile { margin-top: 26px; }

/* Tabelle rollt in ihrem eigenen Container — der Kartenkopf bleibt stehen */
.seite-app .table-card { overflow-x: visible; padding: 22px; }
/* Rollrahmen fuer breite Tabellen. Das Rollen selbst gehoert zur KLASSE (jede
   Seite braucht es), die negativen Raender aber nur zur App-Karte: dort ziehen
   sie die Tabelle bis an den Kartenrand. Auf der Projekte-Seite steckt sie in
   einem Kasten mit 16 px Innenabstand — mit den -22 px lief die Seite bei
   320 px um 184 px nach rechts aus. Erst zu eng gescoped, dann zu weit; hier
   steht jetzt beides getrennt. */
.tabelle-rollen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.seite-app .tabelle-rollen { margin: 0 -22px; padding: 0 22px; }
.seite-app .tabelle-rollen > table { min-width: 640px; }
/* Die Personen-Tabelle der Projekte braucht weniger: vier schmale Spalten. */
.seite-projekte .tabelle-rollen > table { min-width: 420px; }

/* ── Handy ── */
@media (max-width: 640px) {
  .kopf-app .kopf-innen { gap: 8px; padding-top: 10px; }
  /* Am Handy zaehlt jede Zeile der KLEBENDEN Kopfzeile. Zwei Zeilen: oben
     Marke und Konto (dort steht seit 2026-08-02 auch der Umschalter, direkt
     links vom Hell/Dunkel-Knopf), darunter NUR die Orte-Leiste.
     "Meine Zeiten" wird dabei zu "Zeiten".

     Vorher teilte sich der Umschalter die zweite Zeile mit den Orten und nahm
     ihnen 127 von 390 px weg — sichtbar waren 240 px von 474 px Inhalt, also
     zwei der vier Orte. Manuel am 2026-08-02: „den Umschalter kannst du
     raufheben neben die Helligkeit, dann ist darunter mehr Platz fuer die
     Chips." Genau das. */
  .kopf-app .modus-schalter__w .lang { display: none; }
  .kopf-app .modus-schalter__w { padding: 6px 10px; font-size: 13px; }
  /* Der Trennstrich als eigenes Element: er muss ueber die VOLLE Breite
     laufen, darunter steht die Orte-Leiste allein. */
  .kopf-app .kopf-innen::after {
    content: ''; order: 3; flex: 0 0 100%;
    height: 1px; background: var(--border); margin: 2px calc(-1 * var(--rand)) 0;
  }
  .kopf-app .kopf-orte {
    /* Die Leiste hat ihre Zeile jetzt fuer sich — volle Breite.
       `flex-basis` MUSS 100 % bleiben und darf nie auf 0 zurueck: der
       Trennstrich darueber ist `flex: 0 0 100%` und fuellt seine Zeile
       komplett, es bleiben 0 px frei — und ein Element mit Basis 0 „passt" in
       0 px hinein. Genau so rutschte die Leiste frueher neben den Strich und
       war nur noch ein 56 px breiter Stummel am rechten Rand: alle vier Orte
       waren am Handy praktisch nicht erreichbar. Aufgefallen ist das nie, weil
       wir den Kopf immer als ADMIN geprueft haben — dort erzwang der sichtbare
       Umschalter den Umbruch. Fuer Mitarbeitende ist er `hidden`, also fiel
       die Stuetze weg. */
    order: 5; flex: 1 1 100%; width: auto;
    margin: 0 calc(-1 * var(--rand)); padding: 4px var(--rand) 4px;
    border-top: none;
  }
  /* Umschalter und Hell/Dunkel stehen seit 2026-08-04 hinter der MARKE (damit
     sie beim Seitenwechsel nicht springen — siehe kopf.js). Am Handy rutschen
     sie per `order` in die ZWEITE Zeile zum Konto-Block, sonst passte die
     erste Zeile nicht: Marke 203 + Umschalter 123 + Knopf 42 = 368 von 358
     verfuegbaren Pixeln bei 390 px Schirm. */
  .kopf-app .modus-schalter { order: 1; flex: 0 0 auto; margin: 0; }
  .kopf-app .thema-schalter { order: 2; flex: 0 0 auto; }
  /* Die zwei Zeilen werden FEST gesetzt, statt sie dem Umbruch zu ueberlassen:
     Marke oben, Konto-Block darunter. Sonst haengt die Zeilenzahl davon ab, ob
     der Umschalter da ist — und der taucht erst auf, wenn der Server die Rolle
     bestaetigt hat. Genau das ruckelte: gemessen 0,155 beim ersten Aufruf,
     weil der Kopf von zwei auf drei Zeilen sprang. Mit fester Aufteilung
     aendert der Umschalter nur noch den Inhalt SEINER Zeile. */
  .kopf-app .brand { flex: 0 0 100%; order: 0; }
  /* `flex: 1 1 auto` statt `100%`: der Konto-Block teilt sich die zweite Zeile
     mit Umschalter und Hell/Dunkel-Knopf. Mit `100%` braeuchte er eine eigene
     dritte Zeile — der Kopf waere ein Fuenftel des Schirms. */
  .kopf-app .user-box { order: 3; flex: 1 1 auto; justify-content: flex-end; margin-left: 0; }
  /* Der Umschalter braucht Platz, den es am Handy nicht geschenkt gibt.
     Gemessen: der Konto-Block war mit ihm 365 px breit und schrumpft nicht
     (alle Beschriftungen sind `nowrap`) — ab 375 px lief die Seite dadurch
     nach rechts hinaus. Passwort ist deshalb aus (Regel unten), Abmelden
     bleibt — das war Manuels Vorgabe und ist der einzige Weg hier heraus.

     KORREKTUR 2026-08-11: Hier stand vorher auch der Aktualisieren-Knopf auf
     `display: none`, mit der Begruendung, am Handy ziehe man die Seite zum
     Neuladen nach unten. Das ist FALSCH, sobald die App am Startbildschirm
     liegt (Schritt 1): dort gibt es kein Adressfeld, auf iOS auch kein Ziehen
     zum Neuladen. Am wichtigsten Geraet gab es damit gar keinen Weg mehr, die
     Zahlen aufzufrischen. Der Knopf steht jetzt bei den Werkzeugen neben
     Hell/Dunkel (siehe kopf.js) und braucht im Konto-Block keinen Platz mehr. */
  /* Die zweizeilige Kopfzeile steht schon in den Grundregeln — am Handy nur
     enger stellen. Das Innenmass der Kopfzeile ist hier 12 px (Regel oben in
     der gemeinsamen Datei), die Raender der Orte-Zeile muessen dazu passen. */
  .kopf-app .kopf-orte { margin: 0 calc(-1 * var(--rand)); padding: 4px var(--rand) 4px; }
  .kopf-app .kopf-orte .ort { padding: 8px 12px; font-size: 13.5px; }
  /* Nur Passwort verstecken — Abmelden muss am Handy erreichbar bleiben */
  .kopf-app .user-box #pw-btn { display: none; }
  .kopf-app .wer { display: none; }
  /* Der Avatar geht am Handy mit — er macht dem Aktualisieren-Knopf Platz.
     Gerechnet bei 390 px: 358 px stehen zur Verfuegung, gebraucht werden
     Umschalter 123 + Hell/Dunkel 42 + Aktualisieren 42 + Avatar 30 + Abmelden
     89 samt vier Zwischenraeumen = 358. Exakt an der Kante, und es brach um:
     der Konto-Block rutschte in eine EIGENE Zeile, der Kopf wuchs von 159 auf
     209 px. Ohne den Avatar sind es 320 px und alles steht in einer Zeile.
     Der Avatar ist hier ohnehin nur ein Kreis mit einem Buchstaben: Name und
     E-Mail sind am Handy schon ausgeblendet (Regel darueber), er zeigt also
     nichts, was nicht danebensteht. Ein Knopf, den man braucht, geht vor
     Schmuck, den man nicht liest.

     Was davon uebrig bleibt, gemessen: Fuer einen MITARBEITER — also fuer die
     Leute, die taeglich am Handy stempeln — steht alles bis hinunter zu 320 px
     in einer Zeile, der Kopf bleibt bei 159 px. Der Umschalter ist bei ihnen
     gar nicht da (er erscheint erst, wenn der Server die Admin-Rolle
     bestaetigt). Nur ein ADMIN auf einem Geraet schmaler als 370 px bekommt
     eine dritte Zeile (209 px). Das ist die seltene Paarung, und ausgerechnet
     der Admin ist der, dem der Knopf am meisten nuetzt. Bewusst so gelassen,
     statt "Abmelden" auf ein Symbol zu kuerzen — Abmelden muss lesbar bleiben,
     das war Manuels Vorgabe. */
  .kopf-app .user-box .avatar { display: none; }
  .seite-app .stat { padding: 12px 6px; }
  .seite-app .timer-display { font-size: 46px; }
  .seite-app .karten-kopf__l, .seite-app .karten-kopf__r { gap: 10px; }
  .seite-app .table-card { padding: 16px; }
  .seite-app .tabelle-rollen { margin: 0 -16px; padding: 0 16px; }
}

/* ── Live-Vorschau im manuellen Eintrag ──
   Steht direkt ueber dem Knopf: die Folge der Buchung liest man, BEVOR man
   sie ausloest. Ruhige Flaeche, kein Warnton — es ist eine Information. */
.seite-app .vorschau {
  grid-column: 1 / -1;
  background: var(--paper); border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 10px; padding: 10px 12px; margin-top: 4px;
  font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.seite-app .vorschau[hidden] { display: none; }

/* ── Stunden & Urlaub (Fenster aus der Kopfzeile) ── */
.seite-app .konto-zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 0 4px; border-top: 1px solid var(--border);
}
.seite-app .konto-zeile:first-child { border-top: none; padding-top: 4px; }
.seite-app .konto-l { font-weight: 600; }
.seite-app .konto-w { font-family: var(--font-display); font-size: 22px; }
.seite-app .konto-klein { font-size: 13px; font-weight: 500; color: var(--muted); }
.seite-app .konto-hint { color: var(--muted); font-size: 12.5px; line-height: 1.5; padding-bottom: 8px; }

/* ── Nachtragen: aufgeklappt eine eigene, abgesetzte Flaeche ── */
.seite-app .nachtragen__flaeche {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
}
/* flex: 1 allein reichte nicht: ein Flex-Kind schrumpft nie unter die
   Inhaltsbreite seines Inhalts, und ein <input type="date"> bringt mit
   Datumsformat + Kalendersymbol eine kraeftige Mindestbreite mit. Am Handy
   schoben sich Datum und Uhrzeit deshalb uebereinander. min-width: 0 erlaubt
   das Schrumpfen, die Basis von 130 px laesst sie vorher sauber umbrechen. */
.seite-app .nachtrag-feld {
  flex: 1 1 130px; min-width: 0;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
/* Datum und Uhrzeit exakt gleich hoch wie die Knoepfe darunter (38 px). Ohne
   feste Hoehe bestimmt das Betriebssystem die Groesse des Datums-/Zeitfeldes —
   auf dem iPhone werden die beiden dadurch unterschiedlich hoch und stehen
   schief zur Knopfreihe. */
.seite-app .nachtrag-feld .input {
  margin-top: 4px; width: 100%; min-width: 0;
  /* Innenabstand bleibt: iOS setzt den Text von Datums-/Zeitfeldern oben in
     den Inhaltsbereich statt ihn zu zentrieren — ohne Abstand klebt er am
     Rand. min-height sorgt trotzdem fuer die gleiche Hoehe wie die Knoepfe. */
  min-height: 42px; padding: 8px 12px; font-size: 15px; text-align: left;
}
/* Drei benannte Zeilen: links das Etikett, rechts das Stempel-Paar */
.seite-app .nachtrag-zeile {
  display: grid; grid-template-columns: minmax(96px, 128px) 1fr 1fr;
  gap: 8px; align-items: center; margin-top: 10px;
}
.seite-app .nachtrag-zeile__l { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.seite-app .nachtrag-zeile .btn { background: var(--card); }
/* Derselbe Farbcode wie bei der Stempeluhr darueber: Kommen gruen, Gehen rot,
   Pause orange, Homeoffice stahlblau. Vorher waren die sechs Knoepfe sechs
   gleiche weisse Rechtecke — man musste jedes lesen. Bewusst getoent statt
   vollflaechig: sechs satte Farbflaechen in einer aufgeklappten Lade waeren
   lauter als die eigentliche Stempeluhr. Die Beschriftung bleibt, die Farbe
   ist die Abkuerzung fuer alle, die sie schon kennen. */
.seite-app .aktion-kommen { --a: #16a34a; }
.seite-app .aktion-gehen  { --a: #dc2626; }
.seite-app .aktion-pause  { --a: #d97706; }
.seite-app .aktion-mobil  { --a: #15803d; }
.seite-app .nachtrag-zeile .btn[class*="aktion-"] {
  border-color: color-mix(in srgb, var(--a) 42%, transparent);
  color: var(--a);
  background: color-mix(in srgb, var(--a) 7%, var(--card));
}
.seite-app .nachtrag-zeile .btn[class*="aktion-"]:hover {
  background: color-mix(in srgb, var(--a) 14%, var(--card));
  border-color: var(--a);
}
@media (max-width: 400px) {
  .seite-app .nachtrag-zeile { grid-template-columns: 1fr 1fr; }
  .seite-app .nachtrag-zeile__l { grid-column: 1 / -1; margin-bottom: -4px; }
}

/* ── Projekte: erklaert, ordentliches Formular, Farbwahl als runder Punkt ── */
.seite-app .karten-hinweis {
  color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: -6px 0 14px;
}
/* Das Projekte-Fenster traegt jetzt eine Liste mit Beschreibungen und ein
   Formular, das anlegt UND aendert — 420 px waren dafuer zu eng. */
.seite-app #projekt-modal .modal { max-width: 520px; }
.projekt-form { display: flex; flex-direction: column; gap: 10px; }
.projekt-form__zeile { display: flex; gap: 10px; align-items: stretch; }
.projekt-form__knoepfe { display: flex; gap: 10px; }
.projekt-form__knoepfe .btn { flex: 1; }
.projekt-form .input { flex: 1; min-width: 0; }

/* ── Projektliste: jede Zeile ist aufrufbar ── */
.projekt-liste {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 18px; max-height: 46vh; overflow-y: auto;
}
.projekt-leer { color: var(--muted); font-size: 14px; padding: 10px 2px; }
.projekt-zeile {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--card);
}
.projekt-zeile__auf {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: none; border: none; font-family: inherit;
  text-align: left; cursor: pointer; border-radius: 10px; color: inherit;
}
/* Firmenweite Projekte gehoeren dem Admin — nicht anklickbar, aber auch nicht
   ausgegraut: sie sind gueltig und buchbar, nur nicht hier aenderbar. */
.projekt-zeile__auf[disabled] { cursor: default; opacity: 1; }
.projekt-zeile__auf:not([disabled]):hover { background: var(--sanft-3); }
.projekt-zeile__auf:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.projekt-zeile__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.projekt-zeile__n {
  font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px;
}
.projekt-zeile__b {
  font-size: 12.5px; color: var(--muted); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.projekt-zeile__firma {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: var(--paper); border-radius: 5px; padding: 2px 6px;
}
.projekt-zeile__x {
  flex: none; width: 34px; height: 34px; margin-right: 6px; border-radius: 8px;
  border: none; background: none; color: var(--muted); font-size: 18px; cursor: pointer;
}
.projekt-zeile__x:hover { background: #fdf3f3; color: var(--danger); }
.projekt-zeile__x:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Der native Farbwaehler ist ein karges Viereck — hier als runder Farbpunkt
   mit Rahmen, klickbar wie zuvor (das input liegt unsichtbar darueber). */
.projekt-farbe {
  position: relative; width: 44px; flex: none; border: 1px solid var(--border-strong);
  border-radius: 9px; display: grid; place-items: center; cursor: pointer; background: var(--card);
}
/* Das input bleibt selbst sichtbar — so zeigt der Punkt immer die ECHTE
   gewaehlte Farbe, ohne eine Zeile JS. Die Swatch-Pseudoelemente formen
   das native Viereck zum runden Punkt. */
.projekt-farbe input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: none; padding: 10px; background: none; cursor: pointer;
}
.projekt-farbe input::-webkit-color-swatch-wrapper { padding: 0; }
.projekt-farbe input::-webkit-color-swatch { border: 1px solid rgba(0,0,0,.15); border-radius: 50%; }
.projekt-farbe input::-moz-color-swatch { border: 1px solid rgba(0,0,0,.15); border-radius: 50%; }
.projekt-farbe:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Projekt-Reichweite: fuer wen ist das Projekt? ── */
.projekt-abt {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.projekt-abt__w {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border: 1px solid var(--border); border-radius: 9px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--card);
}
.projekt-abt__w:hover { background: var(--sanft-3); }
.projekt-abt__w input { width: auto; margin: 0; accent-color: var(--primary); }
/* Trennt die eigenen Projekte von denen, die man nur zur Ansicht sieht.
   Ohne diese Zeile stuenden fremde private Projekte kommentarlos zwischen
   den eigenen — und man wuerde sich fragen, warum man sie nicht buchen kann. */
.projekt-trenner {
  margin: 16px 0 6px; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.projekt-trenner span {
  display: block; margin-top: 3px;
  font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12.5px;
}

/* ── Modus-Umschalter: eigene Zeiten ↔ Firma ──
 * Manuel wollte einen Umschalter und schlug "wie ein zweites Profil" vor.
 * Bewusst KEIN Profil-Umschalter: es ist dieselbe Person mit denselben
 * Rechten — nur die Ansicht wechselt. Ein Profil-Wechsler verspricht eine
 * zweite Identitaet, die es nicht gibt, und man wuerde sich fragen, unter
 * welchem Namen man gerade stempelt.
 * Stattdessen ein Zweiweg-Schalter: beide Seiten immer sichtbar, die aktive
 * markiert. Man liest jederzeit ab, in welcher Welt man ist. Er liegt in
 * BEIDEN Kopfzeilen an derselben Stelle, sonst waere es kein Schalter,
 * sondern zwei Links.  */
/* Der Umschalter traegt die FIRMENFARBE — Manuel, 2026-07-30: „mach den
   Umschalter generell in der Firmen Farbe das es sich besser abhebt."
   Die Rille ist die Toenung, das aktive Segment die Farbe selbst.
   Warum das aktive Segment 20 % abgedunkelt wird: weisser Text auf der reinen
   Koralle ergibt 4,16:1 und liegt damit UNTER der Lesbarkeitsgrenze von 4,5:1
   (gemessen). Mit 80 % Farbe + 20 % Schwarz sind es 4,5:1 — dieselbe Farbe, nur
   einen Ton tiefer. Bei einer eigenen Firmenfarbe gilt dieselbe Rechnung
   automatisch mit. */
.modus-schalter {
  display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px;
  background: var(--primary-tint); border-radius: 11px;
}
.modus-schalter__w {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 13px; border-radius: 8px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: var(--text-2); text-decoration: none;
  transition: color .12s ease, background .12s ease;
}
.modus-schalter__w:hover { color: var(--text); background: rgba(255, 255, 255, .35); }
.modus-schalter__w[aria-current="page"] {
  background: color-mix(in srgb, var(--primary) 80%, #000); color: #fff;
  box-shadow: none;
}
.modus-schalter__w:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Gebuchte Zeit je Projekt ──
 * Steht unter dem Projektnamen, nicht daneben: drei Zahlen neben einem Namen
 * ergeben in einem 520-px-Fenster eine Zeile, die niemand mehr liest.
 * Wer zustaendig ist, klappt die Namensliste auf. */
.projekt-std {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  padding: 7px 12px 9px 34px; margin-top: -2px;
  font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--border);
}
.projekt-std b { color: var(--text); font-variant-numeric: tabular-nums; }
.projekt-std__eigen { color: var(--muted); font-style: italic; }
.projekt-std__wer {
  margin-left: auto; color: var(--primary); font-weight: 600;
}
/* Die aufklappbare Fassung: summary traegt dieselbe Zeile, der Pfeil sitzt
   links im eingerueckten Bereich. */
.seite-app details.projekt-std { display: block; padding: 0; }
.seite-app details.projekt-std > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  padding: 7px 12px 9px 34px; cursor: pointer; list-style: none;
}
.seite-app details.projekt-std > summary::-webkit-details-marker { display: none; }
.seite-app details.projekt-std > summary:hover { background: var(--sanft-3); }
.projekt-wer {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  margin: 0 0 6px; padding: 0 12px;
}
.projekt-wer th {
  text-align: left; font-weight: 600; color: var(--muted);
  padding: 4px 10px; border-top: 1px solid var(--border);
}
.projekt-wer th:not(:first-child), .projekt-wer td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.projekt-wer td { padding: 4px 10px; }
.projekt-wer tbody tr:nth-child(odd) { background: var(--sanft); }
/* Die Zeile mit Name und Knopf darf nicht mehr nebeneinander stehen, sobald
   Stunden darunter haengen — sonst rutscht der Loesch-Knopf in die Mitte. */
.projekt-zeile { flex-wrap: wrap; }
.projekt-zeile > details.projekt-std,
.projekt-zeile > .projekt-std { flex: 1 0 100%; }

/* ── Fenster: der Hintergrund bleibt stehen ──
 * Ohne das scrollt hinter dem ausgegrauten Hintergrund weiter die Seite —
 * man verliert seine Stelle und weiss nach dem Schliessen nicht mehr, wo man
 * war. position:fixed statt nur overflow:hidden, weil Safari am iPhone sonst
 * trotzdem scrollt; js/fenster.js merkt sich die Stelle und stellt sie
 * beim Schliessen wieder her. */
body.fenster-offen {
  position: fixed; left: 0; right: 0; width: 100%; overflow: hidden;
}
/* Der Platz der Bildlaufleiste bleibt IMMER reserviert.
 *
 * „Wenn ich das aufrufe verschiebt es sich ein bisschen" (Manuel, 2026-07-31).
 * Genau daran lag es: sobald `body` fest steht, hat die Seite nichts mehr zu
 * rollen — die Leiste verschwindet, das Fenster wird um ihre Breite breiter,
 * und alles Zentrierte rutscht zur Seite. Nachgemessen mit einer klassischen
 * Leiste: Fensterbreite 1265 -> 1280 px, Inhalt um 7-8 px versetzt.
 *
 * `stable` haelt die Rinne frei, auch wenn gerade nichts rollt. Damit aendert
 * sich beim Oeffnen nichts mehr an der Breite. Wer keine klassische Leiste hat
 * (Handy, macOS mit ueberlagernder Leiste), merkt von der Regel nichts —
 * dort ist die Rinne 0 breit. */
html { scrollbar-gutter: stable; }
/* Ist das Fenster hoeher als der Schirm, rollt ES — nicht die Seite dahinter.
   overscroll-behavior haelt den Schwung am Ende im Fenster. */
.modal-backdrop { overflow-y: auto; overscroll-behavior: contain; }
.modal { max-height: none; margin: auto; }

/* ── Projekt-Ueberblick: ein Balken je Projekt ──
 * Dieselbe Darstellung wie auf der Landingpage. Sie beantwortet die Frage,
 * die eine Liste aus Zahlen nicht beantwortet: worauf geht die Zeit? Die
 * Laenge ist der ANTEIL an der Projektzeit im gewaehlten Zeitraum, die Farbe
 * die des Projekts — so erkennt man dieselbe Baustelle in Balken und Liste. */
.seite-app #projekt-modal .modal { max-width: 640px; }
.projekt-ueberblick:not(:empty) {
  margin-top: 18px; padding: 16px 16px 12px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--sanft);
}
.pu-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pu-summe {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  letter-spacing: -.5px; font-variant-numeric: tabular-nums;
}
.pu-sub { color: var(--muted); font-size: 13px; }
.pu-schalter { margin-left: auto; }
.pu-liste { display: flex; flex-direction: column; gap: 9px; }
.pu-zeile {
  display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(60px, 2fr) auto;
  align-items: center; gap: 10px;
}
.pu-name {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pu-balken {
  height: 10px; border-radius: 6px; background: var(--spur); overflow: hidden;
}
.pu-balken__f { display: block; height: 100%; border-radius: 6px; transition: width .3s ease; }
.pu-wert {
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}
.pu-anteil { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
@media (max-width: 480px) {
  /* Auf schmalen Schirmen Name oben, Balken und Wert darunter — drei Spalten
     ergeben bei 360 px drei unlesbare Streifen. */
  .pu-zeile { grid-template-columns: 1fr auto; }
  .pu-name { grid-column: 1 / -1; }
}

/* Anlegen/Ändern eingeklappt am Ende des Fensters */
.projekt-neu { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.projekt-neu > summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: 14px;
  color: var(--primary); padding: 6px 2px;
}
.projekt-neu > summary::-webkit-details-marker { display: none; }
.projekt-neu > summary:hover { text-decoration: underline; }
.projekt-neu[open] > summary { color: var(--muted); margin-bottom: 8px; }

/* ═══ Runde 2: Ruhe, Zustand, weniger Doppeltes ══════════════════════════
 * Hallmark · scope: app-Seite · pre-emit critique: P5 H5 E4 S5 R5 V4
 * Drei Befunde aus der Prüfung vom 2026-07-30:
 *   1. Zwei Reihen grosser Zahlen sagten dasselbe (Kacheln oben vs. Übersicht).
 *   2. Der eigene Zustand (anwesend? Pause?) stand nur als kleiner Text unter
 *      einem grossen grauen 00:00:00 — die lauteste Fläche trug die geringste
 *      Aussage.
 *   3. Zwei Titel-Sprachen auf einer Seite: „STEMPELUHR" gesperrt in
 *      Grossbuchstaben neben „Übersicht" in gemischter Schrift.
 * ──────────────────────────────────────────────────────────────────────── */

/* ── Heute-Band ──
   Ein Streifen, drei Aussagen: Zustand · Fortschritt im Tages-Soll · die zwei
   Zahlen, nach denen man wirklich schaut. Nicht drei gleich laute Kacheln:
   der Zustand steht links (dort beginnt der Blick), die Zahlen rechts. */
.seite-app .heute-band {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 10px 26px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 14px 18px; margin-bottom: 22px;
}
.seite-app .hb-jetzt { display: flex; align-items: center; gap: 9px; min-width: 0; }
.seite-app .hb-status {
  font-weight: 600; font-size: 14.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Der Punkt trägt den Zustand als Farbe — derselbe Code wie bei den Knöpfen:
   grün anwesend, orange Pause, indigo mobil, grau nichts. */
.seite-app .hb-punkt {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--border-strong);
}
.seite-app .hb-punkt[data-zustand="an"]    { background: var(--success); box-shadow: 0 0 0 4px rgba(22, 163, 74, .16); }
.seite-app .hb-punkt[data-zustand="pause"] { background: #d97706; box-shadow: 0 0 0 4px rgba(217, 119, 6, .16); }
.seite-app .hb-punkt[data-zustand="mobil"] { background: var(--secondary); box-shadow: 0 0 0 4px rgba(91, 75, 214, .16); }

.seite-app .hb-tag { min-width: 0; }
.seite-app .hb-tag-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.seite-app .hb-l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.seite-app .hb-w { font-variant-numeric: tabular-nums; white-space: nowrap; }
.seite-app .hb-w b { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.3px; }
.seite-app .hb-soll { font-size: 12.5px; color: var(--muted); margin-left: 6px; }
.seite-app .hb-soll.erfuellt { color: var(--success); font-weight: 600; }
.seite-app .hb-bar { height: 8px; border-radius: 5px; background: var(--spur); overflow: hidden; }
.seite-app .hb-bar-f {
  display: block; height: 100%; width: 0; border-radius: 5px;
  background: var(--primary); transition: width .35s ease;
}
.seite-app .hb-bar.voll .hb-bar-f { background: var(--success); }

.seite-app .hb-zahlen { display: flex; gap: 8px; }
.seite-app .hb-z {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  border: none; background: none; cursor: pointer; font-family: inherit;
  padding: 6px 10px; border-radius: 9px; text-align: right;
  transition: background .12s ease;
}
.seite-app .hb-z:hover { background: var(--hover); }
.seite-app .hb-z:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.seite-app .hb-zn {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.3px; color: var(--ink);
}
.seite-app .hb-zl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 500; }

@media (max-width: 900px) {
  /* Der Fortschritt braucht Breite; ab hier bekommt er seine eigene Zeile,
     statt zwischen Zustand und Zahlen zu einem Streifen zusammenzufallen. */
  .seite-app .heute-band { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .seite-app .hb-tag { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 420px) {
  .seite-app .heute-band { padding: 12px 14px; }
  .seite-app .hb-zahlen { gap: 2px; }
  .seite-app .hb-z { padding: 4px 6px; }
  .seite-app .hb-zn { font-size: 15.5px; }
}

/* ── Eine Titel-Sprache ──
   Vorher: Karten-Titel in gesperrten Grossbuchstaben, Abschnitts-Titel in
   gemischter Schrift. Jetzt beide gleich — gemischt, ruhig, mit Haarlinie.
   Grossbuchstaben bleiben den kleinen Beschriftungen (Kacheln, Tabellenkopf). */
.seite-app .card h3 {
  font-family: var(--font-display);
  font-size: 15.5px; text-transform: none; letter-spacing: -0.2px;
  color: var(--ink); font-weight: 600;
}
.seite-app .karten-kopf h2 {
  font-family: var(--font-display);
  font-size: 15.5px; letter-spacing: -0.2px; font-weight: 600;
}

/* ── Die Uhr zeigt den Zustand, nicht nur die Zahl ──
   Ruht sie, tritt sie zurück: kleinere Ziffern, blasse Farbe. Läuft sie,
   trägt sie die Farbe des Zustands. Man erkennt seinen Stand jetzt aus dem
   Augenwinkel und muss nicht die Zeile darunter lesen. */
.seite-app .timer-display { transition: color .2s ease, border-color .2s ease, background .2s ease; }
.seite-app .card[data-zustand="ruht"] .timer-display {
  font-size: 42px; color: var(--muted); letter-spacing: 1px;
}
.seite-app .card[data-zustand="ruht"] .timer-meta { color: var(--text); font-weight: 600; }
.seite-app .card[data-zustand="an"] .timer-display {
  color: #12703a; border-color: #bfe3cd;
  background: linear-gradient(180deg, #f6fdf8 0%, #eaf7ef 100%);
}
.seite-app .card[data-zustand="pause"] .timer-display {
  color: #9a5700; border-color: #f0d9ad;
  background: linear-gradient(180deg, #fffcf5 0%, #fdf3e2 100%);
}
.seite-app .card[data-zustand="mobil"] .timer-display {
  color: #3f34a3; border-color: #cdc7f3;
  background: linear-gradient(180deg, #f9f8ff 0%, #efedfd 100%);
}
.seite-app .card[data-zustand="an"] .timer-meta    { color: #12703a; font-weight: 600; }
.seite-app .card[data-zustand="pause"] .timer-meta { color: #9a5700; font-weight: 600; }
.seite-app .card[data-zustand="mobil"] .timer-meta { color: #3f34a3; font-weight: 600; }

/* ── Homeoffice ist nicht dasselbe wie Kommen ──
   Beide Knöpfe waren grün — gleiche Farbe für zwei verschiedene Handlungen.
   Homeoffice trägt ein eigenes Stahlblau: erkennbar anders, ohne eine
   Warnfarbe zu belegen. Der Nachtrag-Knopf darunter zieht mit (Farbcode muss
   an beiden Stellen derselbe sein, sonst lernt man ihn nicht). */
.seite-app .btn-mobile { background: var(--mobil); }
.seite-app .btn-mobile:hover { background: var(--mobil-dark); }
.seite-app .btn-mobile.running { background: #b91c1c; }
.seite-app .aktion-mobil { --a: var(--mobil); }

/* ── Gruppen im manuellen Eintrag: Was / Wann ──
   Sieben gleich laute Felder waren eine Wand. Zwei Zwischentitel geben ihr
   eine Ordnung, ohne ein Feld zu entfernen. */
.seite-app .feld-gruppe {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px;
  font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 10px; margin: 4px 0 -2px;
}
.seite-app .feld-gruppe::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.seite-app .feld-opt {
  font-size: 11px; font-weight: 500; color: var(--muted); text-transform: none;
  letter-spacing: 0; margin-left: 4px;
}
.seite-app .feld-dauer {
  font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--sanft-3); border: 1px solid var(--border);
  border-radius: 9px; padding: 9px 12px; font-variant-numeric: tabular-nums;
}
.seite-app .feld-dauer.warn {
  color: #9a2020; background: #fdf3f3; border-color: #f2cfcf; font-variant-numeric: normal;
}

/* Die rechte Spalte traegt jetzt ein Formular mit Gruppen und Dauer-Zeile und
   braucht mehr Platz als die Uhr, die vor allem aus Knoepfen besteht.
   ZWINGEND in einer min-width-Abfrage: diese Datei wird angehaengt, also
   stuende die Regel NACH dem Einspalter bei 820 px und wuerde ihn ueberschreiben
   — am Handy standen dann zwei Spalten in 375 px und die Seite lief 440 px
   breit nach rechts aus. Genau einmal passiert, hier festgehalten. */
@media (min-width: 821px) {
  .seite-app .grid { grid-template-columns: 0.95fr 1.05fr; }
}

/* ── Nachbesserung nach dem ersten Blick auf die neue Seite ──────────────── */

/* 1) EIN Primär-Knopf, nicht drei.
   Kommen · Pause · Homeoffice standen als drei satte Farbflächen
   untereinander — grün, orange, indigo. Drei gleich laute Knöpfe sind keine
   Rangfolge, sondern ein Jahrmarkt. „Kommen" ist die Handlung des Tages und
   bleibt gefüllt; Pause und Homeoffice sind Nebenwege und werden
   getönt. LÄUFT einer von beiden, füllt er sich (dann ist er der Zustand,
   nicht die Möglichkeit) — das erledigt die Klasse .running.
   Nur in der Stempeluhr: derselbe Farbname am Absende-Knopf des Formulars
   muss gefüllt bleiben, dort ist er die Haupthandlung. */
.seite-app .timer-stack .btn-pause {
  background: #fdf3e2; color: #9a5700; border: 1px solid #f0d9ad;
}
.seite-app .timer-stack .btn-pause:hover { background: #fbe9cd; border-color: #e3c489; }
.seite-app .timer-stack .btn-mobile {
  background: #efedfd; color: #3f34a3; border: 1px solid #cdc7f3;
}
.seite-app .timer-stack .btn-mobile:hover { background: #e4e0fb; border-color: #b9b1ee; }
/* Läuft es, ist es kein Angebot mehr, sondern ein Zustand: volle Farbe. */
.seite-app .timer-stack .btn-pause.running {
  background: #b45309; color: #fff; border-color: #b45309;
}
.seite-app .timer-stack .btn-mobile.running {
  background: #b91c1c; color: #fff; border-color: #b91c1c;
}

/* 2) Die Markenfarbe nicht an jede Zahl verteilen.
   In der Übersicht waren alle drei Zahlen koralle — auch „0:00 min Pause".
   Wenn alles Akzent ist, ist nichts Akzent. Zahlen stehen in Tinte; Farbe
   trägt nur, was eine Aussage hat (der Saldo, den app.js einfärbt). */
.seite-app .mini-stat .n { color: var(--ink); }

/* 3) „Wann" als eine Zeile: Datum · Von · Bis.
   Bei zwei Spalten rutschte „Bis" allein in die nächste Zeile und die Gruppe
   sah zerrissen aus. Sechs Spalten erlauben Halbe (3) und Drittel (2), ohne
   die Feld-Reihenfolge oder eine ID anzutasten. Nur das Haupt-Formular —
   das gleich aufgebaute Formular im Bearbeiten-Fenster bleibt zweispaltig. */
.seite-app #manual-form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.seite-app #manual-form > .field,
.seite-app #manual-form > .feld-dauer { grid-column: span 3; }
.seite-app #manual-form > .full { grid-column: 1 / -1; }
/* Datum ganz, darunter Von und Bis als Paar. Drei Drittel wären zwar eine
   schöne Zeile, aber die rechte Karte ist je nach Breite nur 450–600 px weit
   — ein Datumsfeld mit Kalendersymbol wird darin abgeschnitten („07/30/202…").
   Ein Feld, das seinen Inhalt nicht zeigt, ist keine Platzersparnis. */
.seite-app #manual-form > #manual-date-field { grid-column: 1 / -1; }
.seite-app #manual-form > #manual-von-field,
.seite-app #manual-form > #manual-bis-field { grid-column: span 3; }

/* 4) Der Zustand darf am Handy nicht abgeschnitten werden.
   Bei 375 px blieb von „Nicht eingestempelt" ein „Nicht eingestem…". Der
   Zustand ist die wichtigste Aussage des Bandes — er bekommt seine eigene
   Zeile, bevor er gekürzt wird. */
@media (max-width: 560px) {
  .seite-app .heute-band { grid-template-columns: 1fr; gap: 12px; }
  .seite-app .hb-jetzt { order: 1; }
  .seite-app .hb-tag { order: 2; grid-column: auto; }
  .seite-app .hb-zahlen {
    order: 3; justify-content: space-between;
    border-top: 1px solid var(--border); padding-top: 10px;
  }
  .seite-app .hb-z { align-items: flex-start; text-align: left; padding-left: 0; }
  .seite-app .hb-status { white-space: normal; }
}

/* 5) Am Handy wieder EIN Feld pro Zeile.
   Die Sechs-Spalten-Regel für „Wann" gilt nur, solange Platz da ist. Unter
   640 px stellt die gemeinsame Datei `.form-inline` auf eine Spalte — weil
   diese Datei ANGEHÄNGT wird, muss die Rücknahme hier noch einmal stehen,
   sonst gewinnt die spätere Sechs-Spalten-Regel und aus zwei Feldern werden
   zwei Schlitze von je 165 px. */
@media (max-width: 640px) {
  .seite-app #manual-form { grid-template-columns: 1fr; }
  .seite-app #manual-form > .field,
  .seite-app #manual-form > .feld-dauer,
  .seite-app #manual-form > .full,
  .seite-app #manual-form > #manual-date-field,
  .seite-app #manual-form > #manual-von-field,
  .seite-app #manual-form > #manual-bis-field { grid-column: 1 / -1; }
}

/* ═══ Gemeinsame Kopfzeile: der Ort, auf dem man steht ═══════════════════════
 * Seit 2026-07-30 trägt jede Seite dieselbe Kopfzeile (js/kopf.js). Damit man
 * weiß, wo man ist, wird der aktive Ort markiert — sonst sehen vier Orte auf
 * vier Seiten gleich aus und man navigiert im Blindflug.
 * ─────────────────────────────────────────────────────────────────────────── */
/* Drei Klassen tief, damit sie `.kopf-app .kopf-orte .ort` schlägt — die Regel
   dort setzt `background: none` und `font-weight: 600` und war spezifischer als
   eine zweiteilige Auswahl. Nur der Schatten kam vorher an. */
.kopf-app .kopf-orte .ort--hier {
  color: var(--ink); background: var(--spur); font-weight: 700;
  /* Der Reiter-Strich als INNERER Schatten, nicht als Pseudo-Element unter dem
     Kasten: die Leiste rollt in sich (`overflow-x: auto`) und schneidet damit
     auch oben und unten ab — ein Strich bei `bottom: -6px` war unsichtbar.
     Innen liegende Schatten werden nicht abgeschnitten. */
  box-shadow: inset 0 -2px 0 var(--primary);
}
/* Die Marke ist jetzt ein Link nach Hause (statt eines toten Schriftzugs) —
   sie ersetzt zusammen mit den Orten den alten „← Zur App"-Knopf. */
.kopf-app .brand { text-decoration: none; color: var(--text); }
.kopf-app .brand:hover { opacity: .82; }
.kopf-app .brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

/* Die Kopfzeile steht auf Unterseiten ohne `body.seite-app`. Alles, was die
   zweizeilige Anordnung braucht, hängt an `.kopf-app` — hier nur noch, was aus
   dem Seiten-Bereich kommen würde. */
.kopf-app .kopf-innen { flex-wrap: wrap; }

/* Anträge-Seite: sie hat ihre eigene, hellere Palette. Die Kopfzeile bringt
   ihren Hintergrund selbst mit, damit sie sich nicht in der Seite verliert. */
body:not(.seite-app) .kopf-app { background: rgba(255, 255, 255, 0.92); }

/* ── Manueller Eintrag: klarer lesbar ────────────────────────────────────────
 * „mach den Bereich manuellen Eintrag auch noch schöner und übersichtlicher"
 * (Manuel, 2026-07-30). Drei kleine Dinge, die zusammen viel ausmachen:
 * die Beschriftung trägt ihre Hilfe direkt bei sich, das Zeitfeld lässt sich
 * mit einem Griff füllen, und unten steht in Worten, was gespeichert wird.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Beschriftungszeile mit Platz für „jetzt" am rechten Rand */
.seite-app .feld-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* „jetzt" ist ein Angebot, kein Befehl: klein, in der Markenfarbe, ohne Fläche.
   Es darf dem Feld darunter nicht die Aufmerksamkeit nehmen. */
.seite-app .feld-jetzt {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--primary);
  padding: 2px 7px; border-radius: 7px; letter-spacing: 0;
  transition: background .12s ease;
}
.seite-app .feld-jetzt:hover { background: var(--primary-tint); }
.seite-app .feld-jetzt:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Die farbige Kante an der Buchungsart (Farbe setzt app.js nach Art) braucht
   etwas Innenabstand, sonst klebt der Text daran. */
.seite-app #manual-kind { padding-left: 12px; }

/* Zusammenfassung: ruhiger Kasten, aber mit den Zahlen in Halbfett — man soll
   sie im Vorbeigehen lesen können. */
.seite-app .feld-dauer { line-height: 1.45; }
.seite-app .fd-klein { color: var(--muted); font-weight: 500; }

/* ═══ Dunkles Thema ══════════════════════════════════════════════════════════
 * „können wir einen dunkel hell hintergrund machen sodass der user wechseln
 * kann wenns ihm beliebt" (Manuel, 2026-07-30).
 *
 * Umgesetzt über die Flächen-Marken oben: hier werden nur deren WERTE getauscht,
 * nicht 60 einzelne Regeln. Gesetzt wird `data-theme` am <html> — von
 * js/thema.js, noch VOR dem ersten Zeichnen (sonst blitzt die helle Fläche auf,
 * bevor dunkel greift).
 *
 * Bewusst KEIN reines Schwarz: die App ist warm gehalten (Papier, Tinte), also
 * bleibt auch das dunkle Thema warm-neutral. Reines #000 mit reinem #fff darauf
 * flimmert bei langem Lesen — und man liest hier Zahlenkolonnen.
 *
 * Die Landingpage lädt js/thema.js NICHT und bleibt hell: sie ist Werbung, ihr
 * dunkler Hero-Bereich ist Gestaltung, keine Einstellung.
 * ─────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #16171c;        /* Seitenfläche */
  --card: #1e2027;         /* Karte */
  --sanft: #24262e;
  --sanft-2: #262832;
  --sanft-3: #2b2d37;
  --hover: #2c2e38;
  --spur: #343642;
  --border: #31333d;
  --border-strong: #43454f;
  --text: #e7e7ea;
  --text-2: #c4c5cb;
  --muted: #9b9ca4;
  --ink: #e7e7ea;          /* nur noch Textfarbe (die eine Fläche hat eigene Marken) */
  --glanz: rgba(255, 255, 255, 0.06);
  /* Der Toast dreht sich um: helle Fläche, dunkler Text — sonst verschwindet er
     im dunklen Thema in der Seite. */
  --toast-bg: #f0efeb;
  --toast-text: #1b1c22;
  /* Im dunklen Thema traegt Messing heller auf: #8F6128 kaeme auf dem dunklen
     Grund nur auf 3,3:1 und waere als Text zu schwach. #C9954A schafft 6,77:1.
     Der Knopf dreht dafuer die Schrift auf dunkel (siehe .btn-primary unten) —
     weisse Schrift auf hellem Messing waere sonst der naechste Fehler. */
  --primary: #C9954A;
  --primary-dark: #B07F38;
  --primary-tint: rgba(168, 115, 48, 0.22);
  /* Schatten tragen im Dunkeln nicht: dort trennt die Kante, nicht der Schatten. */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 30px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Flächen, die als Verlauf oder mit eigener Tönung gebaut sind, brauchen einen
   eigenen dunklen Satz — ein Verlauf lässt sich nicht über eine Marke drehen. */
/* Der Hauptknopf dreht im dunklen Thema die SCHRIFT um, nicht die Flaeche.
   Grund: Messing traegt dort heller (#C9954A statt #8F6128), damit es als Text
   ueberhaupt lesbar ist. Weisse Schrift auf hellem Messing kaeme nur auf
   1,7:1 — unlesbar. Dunkle Schrift darauf: 6,77:1.
   Dieselbe Falle wie beim Aktionsmenue am 18.08.: eine Farbe umstellen und die
   Schrift darauf vergessen. */
:root[data-theme="dark"] .btn-primary { color: #14161f; }
:root[data-theme="dark"] .a-wrap .btn-primary,
:root[data-theme="dark"] .a-topbar .btn-primary { color: #fff; }

:root[data-theme="dark"] .app-header { background: rgba(30, 32, 39, 0.88); }
:root[data-theme="dark"] body:not(.seite-app) .kopf-app { background: rgba(30, 32, 39, 0.92); }
:root[data-theme="dark"] .seite-app .timer-display {
  background: linear-gradient(180deg, #262832 0%, #1f212a 100%);
}
/* Zustandsfarben der Uhr: im Dunkeln getönte Flächen statt Pastell, und der
   Text muss heller sein als die Fläche — nicht dunkler wie im hellen Thema. */
:root[data-theme="dark"] .seite-app .card[data-zustand="an"] .timer-display {
  color: #5fd394; border-color: #2c5b41;
  background: linear-gradient(180deg, #1d2c24 0%, #18251e 100%);
}
:root[data-theme="dark"] .seite-app .card[data-zustand="pause"] .timer-display {
  color: #f0b45c; border-color: #5c4526;
  background: linear-gradient(180deg, #2c2519 0%, #251f15 100%);
}
:root[data-theme="dark"] .seite-app .card[data-zustand="mobil"] .timer-display {
  color: #a79cf5; border-color: #413a76;
  background: linear-gradient(180deg, #23213a 0%, #1e1c31 100%);
}
:root[data-theme="dark"] .seite-app .card[data-zustand="an"] .timer-meta { color: #5fd394; }
:root[data-theme="dark"] .seite-app .card[data-zustand="pause"] .timer-meta { color: #f0b45c; }
:root[data-theme="dark"] .seite-app .card[data-zustand="mobil"] .timer-meta { color: #a79cf5; }

/* Getönte Nebenweg-Knöpfe (Pause, Homeoffice) */
:root[data-theme="dark"] .seite-app .timer-stack .btn-pause {
  background: #2c2519; color: #f0b45c; border-color: #5c4526;
}
:root[data-theme="dark"] .seite-app .timer-stack .btn-pause:hover { background: #362d1e; }
:root[data-theme="dark"] .seite-app .timer-stack .btn-mobile {
  background: #23213a; color: #a79cf5; border-color: #413a76;
}
:root[data-theme="dark"] .seite-app .timer-stack .btn-mobile:hover { background: #2b2848; }

/* Zusammenfassung im Formular + Warnzustand */
:root[data-theme="dark"] .seite-app .feld-dauer.warn {
  color: #f4a3a3; background: #2d1e1e; border-color: #5c3030;
}

/* Eingabefelder: im Dunkeln muss das Feld dunkler sein als die Karte, sonst
   sieht ein Formular aus wie eine Reihe leuchtender Kästen. */
:root[data-theme="dark"] .input,
:root[data-theme="dark"] label.field input,
:root[data-theme="dark"] label.field select,
:root[data-theme="dark"] label.field textarea {
  background: #191b21; color: var(--text); border-color: var(--border-strong);
}
:root[data-theme="dark"] .input::placeholder { color: #7e7f88; }
/* Die eingebauten Symbole in Datums-/Zeitfeldern sind schwarz gezeichnet und
   verschwinden auf dunklem Grund — umkehren. */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.75);
}

/* Umschalter im Kopf: das aktive Segment und der aktive Ort brauchen im Dunkeln
   eine hellere Fläche, nicht eine dunklere. */
:root[data-theme="dark"] .kopf-app .kopf-orte .ort--hier { background: #33353f; }
:root[data-theme="dark"] .view-toggle button.active { background: #3a3c47; color: var(--text); }
:root[data-theme="dark"] .modal { background: var(--card); }

/* Tabellen-Tagestrenner */
:root[data-theme="dark"] tr.day-sep td { background: #262832; }

/* ── Der Umschalter selbst ──
   Sitzt im Kopf bei den Werkzeugen: gleiche Form wie „Aktualisieren", damit die
   Zeile ruhig bleibt. Zeigt das ZIEL, nicht den Zustand — wer im hellen Thema
   ist, sieht den Mond („dunkel einschalten"). */
.thema-schalter {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  width: 42px; height: 38px; flex: 0 0 auto; padding: 0;
  border-radius: 10px; cursor: pointer; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease;
}
.thema-schalter:hover { background: var(--hover); border-color: var(--muted); }
.thema-schalter:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 640px) {
  .thema-schalter { width: 42px; height: 42px; font-size: 18px; }
}

/* Zahlenspalten: rechtsbündig und mit gleich breiten Ziffern, damit
   untereinander stehende Betraege vergleichbar sind.
   Stand bis 2026-08-11 im <style>-Block von admin.html — seit „Mein Team"
   (/team) brauchen es ZWEI Seiten, und die zweite haette es dort nicht
   gefunden. Eine Zeile, die zwei Seiten teilen, gehoert in die gemeinsame
   Datei; eine Kopie waere genau der Weg, auf dem Tabellen auseinanderlaufen. */
.a-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Saldo in der Team-Tabelle: dieselbe Bedeutung wie im Monatsblatt
   (`.sheet-table td.pos/.neg` weiter oben), deshalb dieselben Farben.
   Mehr Wertung als Vorzeichen und Farbe findet bewusst nicht statt. */
.tabelle td.pos { color: var(--success); font-weight: 600; }
.tabelle td.neg { color: var(--danger); font-weight: 600; }

/* ── Dunkles Thema für Verwaltung und Anträge ──
   Diese zwei Seiten bringen eigene Farbmarken (`--a-*`) in einem <style>-Block
   mit. Der dunkle Satz steht trotzdem HIER, an einer Stelle mit allen anderen —
   `:root[data-theme="dark"]` (Attribut-Auswahl) ist spezifischer als das `:root`
   im Seiten-Block und gewinnt, obwohl der später kommt.
   Würde man ihn in die Seiten schreiben, gäbe es drei Orte für ein Thema. */
:root[data-theme="dark"] {
  --a-paper: #16171c;
  --a-card: #1e2027;
  --a-ink: #e7e7ea;
  --a-ink-2: #9b9ca4;
  --a-line: #31333d;
}
:root[data-theme="dark"] .a-topbar { background: rgba(30, 32, 39, 0.9); }
:root[data-theme="dark"] .a-linkbtn { background: var(--a-card); color: var(--a-ink); }
:root[data-theme="dark"] .a-linkbtn:hover { background: #2c2e38; }
/* Zustands-Plaketten (genehmigt/abgelehnt/offen) sind hell getönt gebaut —
   im Dunkeln muss die Fläche dunkel und die Schrift hell sein, nicht umgekehrt. */
:root[data-theme="dark"] .st-genehmigt { background: #1d2c24; color: #7ee0a6; }
:root[data-theme="dark"] .st-abgelehnt { background: #2d1e1e; color: #f4a3a3; }

/* Der Hinweis „offene Anträge" trägt im hellen Thema Koralle auf Koralle-Tönung.
   Im Dunkeln ergibt dieselbe Kombination nur 2,85:1 — gemessen, nicht geschätzt,
   und damit unter der Lesbarkeitsgrenze von 4,5:1. Ein Hinweis, den man nicht
   lesen kann, ist kein Hinweis. Hellere Koralle: über 6:1. */
:root[data-theme="dark"] .kopf-app .ort.btn-warn { color: #ff96ab; }
:root[data-theme="dark"] .projekt-neu > summary { color: #ff96ab; }

/* Im Dunkeln nur der Ueberfahr-Schimmer: eine weisse Aufhellung wuerde dort
   leuchten. */
:root[data-theme="dark"] .modus-schalter__w:hover { background: rgba(255, 255, 255, .08); }

/* Die Reiterleiste der Verwaltung ist mit einem festen oklch-Wert gebaut (nicht
   über eine Marke) und blieb deshalb im dunklen Thema ein helles Band — mit
   blassem Text darauf, der aktive Reiter war praktisch nicht zu finden. */
:root[data-theme="dark"] .a-tabs { background: rgba(30, 32, 39, 0.9); }

/* ═══ Projekte als eigene Seite (body.seite-projekte) ════════════════════════
 * Hallmark · scope: Projekte-Seite · pre-emit critique: P5 H5 E4 S5 R5 V4
 * „mach das übersichtlicher mit den Projekten mit einer eigenen Seite, nicht so
 * einen kleinen Feld" (Manuel, 2026-07-30).
 *
 * Vorher lag alles in einem 640-px-Fenster über der App: Überblick, Liste und
 * Anlegen übereinander. Bei 26 Personen in einem Projekt scrollte man in einem
 * Kästchen im Kästchen. Jetzt zwei Spalten: links die Projekte (das, weswegen
 * man herkommt), rechts der Überblick und das Anlegen.
 * ─────────────────────────────────────────────────────────────────────────── */
.seite-projekte .pj-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.seite-projekte h1 {
  font-family: var(--font-display); font-size: 26px; letter-spacing: -0.5px;
}
.seite-projekte .pj-hinweis {
  color: var(--muted); font-size: 14px; margin-top: 4px; max-width: 58ch; line-height: 1.5;
}
/* minmax(0, …) statt blankem fr — und min-width: 0 an den Kindern.
   Eine fr-Spur hat als Mindestbreite AUTO, also die Mindestbreite ihres
   Inhalts. Die Personen-Tabelle bringt 420 px mit, damit wuchs die Spur auf
   488 px und die ganze Seite lief bei 375 px Schirm 504 px breit nach rechts
   aus — obwohl die Tabelle in einem Rollrahmen steckt. Ein Rollrahmen hilft
   erst, wenn sein Elternteil schrumpfen DARF. */
.seite-projekte .pj-raster {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
  gap: 22px; align-items: start;
}
.seite-projekte .pj-raster > *,
.seite-projekte .pj-karte,
.seite-projekte .pj-inhalt { min-width: 0; }
.seite-projekte .pj-spalte { display: flex; flex-direction: column; gap: 22px; }
.seite-projekte .card h3 {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 600;
  letter-spacing: -0.2px; color: var(--ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.seite-projekte .pj-anzahl { color: var(--muted); font-weight: 500; }

/* ── Ein Projekt: Kopfzeile zum Auf- und Zuklappen, darunter der Inhalt ──
   Der ganze Balken ist der Umschalter — ein Klickziel, das man auch am Daumen
   trifft, und mit Tastatur bedienbar (es ist ein echter <button>). */
.seite-projekte .pj-liste { display: flex; flex-direction: column; gap: 10px; }
.seite-projekte .pj-karte {
  border: 1px solid var(--border); border-radius: 12px; background: var(--sanft);
  overflow: hidden;
  transition: border-color .12s ease, background .12s ease;
}
.seite-projekte .pj-karte.ist-auf { border-color: var(--border-strong); background: var(--card); }
.seite-projekte .pj-titel {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border: none; background: none; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--text);
}
.seite-projekte .pj-titel:hover { background: var(--hover); }
.seite-projekte .pj-titel:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.seite-projekte .pj-titel__t { flex: 1 1 auto; min-width: 0; }
.seite-projekte .pj-name {
  font-family: var(--font-display); font-weight: 600; font-size: 15.5px;
  letter-spacing: -0.2px; display: block;
}
.seite-projekte .pj-marke {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); display: block; margin-top: 2px;
}
.seite-projekte .pj-beschreibung {
  display: block; font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.45;
}
/* Die drei Zahlen stehen schon in der zugeklappten Zeile: das ist die Frage,
   mit der man herkommt („wie viel steckt da drin?"). Erst fürs WER muss man
   aufklappen. */
.seite-projekte .pj-zahlen {
  display: flex; gap: 16px; flex: 0 0 auto;
  font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.seite-projekte .pj-zahlen b { font-family: var(--font-display); color: var(--ink); font-size: 14px; }
.seite-projekte .pj-pfeil {
  width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted);
  transition: transform .18s ease;
}
.seite-projekte .pj-karte.ist-auf .pj-pfeil { transform: rotate(180deg); }

.seite-projekte .pj-inhalt {
  padding: 4px 16px 16px; border-top: 1px solid var(--border);
}
.seite-projekte .pj-wer-kopf {
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  font-weight: 600; color: var(--muted); margin: 12px 0 8px;
}
.seite-projekte .projekt-wer { width: 100%; border-collapse: collapse; }
.seite-projekte .projekt-wer th, .seite-projekte .projekt-wer td {
  padding: 8px 6px; font-size: 13.5px; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.seite-projekte .projekt-wer th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
}
.seite-projekte .projekt-wer td:first-child { font-variant-numeric: normal; }
.seite-projekte .pj-nurlesen { color: var(--muted); font-size: 13.5px; margin: 12px 0; line-height: 1.5; }
.seite-projekte .pj-aktionen { display: flex; gap: 8px; margin-top: 14px; }
.seite-projekte .pj-loeschen { color: var(--danger); }
.seite-projekte .pj-loeschen:hover { background: #fdf3f3; border-color: #f2cfcf; }
.seite-projekte .projekt-trenner {
  font-size: 12px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600;
  color: var(--muted); margin: 18px 0 4px;
}
.seite-projekte .projekt-trenner span {
  display: block; text-transform: none; letter-spacing: 0; font-weight: 500; margin-top: 2px;
}
.seite-projekte .projekt-leer { color: var(--muted); font-size: 14px; line-height: 1.55; padding: 8px 0; }

/* Das Formular zeigt an, ob es anlegt oder ändert — sonst speichert man
   versehentlich über ein bestehendes Projekt. */
.seite-projekte #pj-form-karte.ist-aendern { border-color: var(--primary); }
.seite-projekte #pj-form-karte.ist-aendern h3 { color: var(--primary); }

@media (max-width: 900px) {
  .seite-projekte .pj-raster { grid-template-columns: minmax(0, 1fr); }
  /* Am Handy zuerst der Überblick und das Anlegen? Nein — die Liste. Wer die
     Seite öffnet, will seine Projekte sehen, nicht ein leeres Formular. */
  .seite-projekte .pj-spalte { order: 2; }
}
@media (max-width: 640px) {
  .seite-projekte h1 { font-size: 22px; }
  /* Die drei Zahlen unter den Namen, nicht daneben: nebeneinander bleiben bei
     360 px drei abgeschnittene Streifen. */
  .seite-projekte .pj-titel { flex-wrap: wrap; }
  /* Die drei Zahlen dürfen UMBRECHEN. Mit `nowrap` waren sie 420 px breit und
     schoben die ganze Seite nach rechts (gemessen: 504 px Dokument bei 375 px
     Schirm). Umbrechen darf die Gruppe, die einzelne Zahl nicht — „1256,50 h
     Monat" auf zwei Zeilen wäre unlesbar. */
  .seite-projekte .pj-zahlen {
    flex: 1 0 100%; gap: 6px 14px; margin-top: 8px; font-size: 12px;
    flex-wrap: wrap; white-space: normal;
  }
  .seite-projekte .pj-zahlen > span { white-space: nowrap; }
  .seite-projekte .pj-pfeil { position: absolute; right: 16px; top: 18px; }
  .seite-projekte .pj-karte { position: relative; }
  .seite-projekte .pj-titel__t { flex-basis: calc(100% - 46px); }
}
:root[data-theme="dark"] .seite-projekte .pj-loeschen:hover {
  background: #2d1e1e; border-color: #5c3030;
}

/* ── Logo hochladen (Verwaltung → Einrichtung) ───────────────────────────────
   Die Vorschau ist ein KARIERTES Feld: ein Logo mit durchsichtigem Rand sieht
   auf weißem Grund aus wie ein Logo mit weißem Rand — und fällt erst im dunklen
   Thema auf. Auf dem Karo sieht man die Durchsichtigkeit sofort. */
.logo-feld { margin-top: 14px; }
.logo-reihe { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.logo-vorschau {
  flex: 0 0 auto; width: 128px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden;
  background-color: var(--card);
  background-image:
    linear-gradient(45deg, var(--spur) 25%, transparent 25%, transparent 75%, var(--spur) 75%),
    linear-gradient(45deg, var(--spur) 25%, transparent 25%, transparent 75%, var(--spur) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.logo-vorschau img { max-width: 116px; max-height: 52px; width: auto; height: auto; }
.logo-vorschau__leer { font-size: 12px; color: var(--muted); font-weight: 600; }
.logo-knoepfe { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Die Dateiauswahl ist ein <label> um ein verstecktes <input type=file>: das
   eingebaute Feld sieht auf jedem System anders aus und lässt sich nicht
   gestalten. So trägt es dieselbe Form wie jeder andere Knopf. */
.logo-waehlen { cursor: pointer; align-self: flex-start; }
.logo-hinweis { margin-top: 0; max-width: 42ch; line-height: 1.45; }
.logo-url-lade { margin-top: 12px; }
.logo-url-lade > summary {
  cursor: pointer; list-style: none; font-size: 13px; font-weight: 600;
  color: var(--muted); padding: 4px 0;
}
.logo-url-lade > summary::-webkit-details-marker { display: none; }
.logo-url-lade > summary::before { content: '＋ '; }
.logo-url-lade[open] > summary::before { content: '− '; }
.logo-url-lade > summary:hover { color: var(--text); }

/* Überblick und Anlegen bleiben stehen, während man die Liste durchscrollt.
   Bei einem aufgeklappten Projekt mit 26 Personen ist die Liste über zwei
   Bildschirme lang — ohne das sind die Balken und das Formular weg, sobald man
   unten ist, und man müsste zum Anlegen erst wieder nach oben. */
@media (min-width: 901px) {
  .seite-projekte .pj-spalte {
    position: sticky;
    /* Die Kopfzeile klebt oben (zwei Zeilen, rund 120 px) — darunter beginnt es. */
    top: 132px;
    max-height: calc(100vh - 152px);
    overflow-y: auto;
    padding-right: 2px; margin-right: -2px;
  }
}

/* Der Überblick steht über beiden Spalten: in der schmalen rechten Spalte
   wurden die Projektnamen abgeschnitten, und ein Balken ohne lesbare
   Beschriftung ist kein Überblick. */
.seite-projekte .pj-ueberblick-karte { margin-bottom: 22px; }

/* ── Firmenlogo in der Kopfzeile ─────────────────────────────────────────────
   „ich finde das logo ist immer noch sehr klein" (Manuel, 2026-07-31) —
   zweiter Anlauf. Weg von 24 (inline aus brand.js) über 34 auf jetzt **44 px**.

   Warum vorher zu vorsichtig: Die 96-px-Breitengrenze stammte aus einer
   Messung im Layout VOR der gemeinsamen Kopfzeile, als Marke, Umschalter und
   Konto in EINER Zeile lagen — dort kippte ein breites Logo das Konto in eine
   dritte Zeile. Die Kopfzeile bricht inzwischen von sich aus um.
   Neu nachgemessen (2026-07-31) mit einem 3:1-Schriftzug als Logo, bei 1280,
   1100, 1024 und 900 px:
       34 px → Kopfzeile 156 px      44 px → 161 px      52 px → 169 px
   Kein Umbruch, kein Überlauf, bei keiner Breite. 44 px kostet also 5 px
   Kopfzeilenhöhe und ist deutlich sichtbar; 52 px wären möglich, lassen die
   Marke daneben aber klein wirken.

   `max-width` + `object-fit` bleiben Pflicht: ein Logo ist oft ein breiter
   Schriftzug, ohne Grenze schöbe ein 800-px-Bild die Zeile auseinander.
   150 px entspricht dem gemessenen 3:1-Fall bei 44 px Höhe. */
.brand-logo {
  height: 44px; width: auto; max-width: 150px; object-fit: contain;
  margin-right: 10px; vertical-align: middle; border-radius: 7px;
  flex: 0 0 auto;
}
/* Der Platz fürs Logo ist IMMER reserviert — auch bevor es da ist.
   Das Logo kommt aus `/api/branding` und wird nachträglich in die Marke
   gehängt. Ohne diese Zeile wuchs die Kopfzeile in dem Moment um rund 23 px
   (44 px Logo gegen ~21 px Schriftzug) und schob die ganze Seite nach unten —
   gemessen als Layout-Sprung `div.a-card y:175→198`. Eine reservierte
   Mindesthöhe kostet nichts, wenn kein Logo kommt: die Marke ist ohnehin so
   hoch wie der Avatar daneben. */
.brand, .a-brand { min-height: 44px; }
@media (max-width: 640px) {
  /* Am Handy zählt jede Zeile — hier bleibt es kleiner, aber ebenfalls
     größer als bisher (28 → 34 px). */
  .brand-logo { height: 34px; max-width: 120px; margin-right: 8px; }
  .brand, .a-brand { min-height: 34px; }
}
/* Ist ein Logo da, trägt es die Marke — der farbige Punkt daneben wäre ein
   zweites Zeichen für dieselbe Sache. brand.js blendet ihn aus; hier steht es
   noch einmal für den Fall, dass die Marke erst später entsteht. */
.brand:has(.brand-logo) .dot { display: none; }

/* ═══ Datums- und Zeitfelder am Handy ════════════════════════════════════════
 * „Mobile Format passt noch nicht" (Manuel, 2026-07-30, Bildschirmfoto vom
 * iPhone: der WANN-Bereich im manuellen Eintrag).
 *
 * Am iPhone rendert Safari `type="date"` und `type="time"` als NATIVES
 * Bedienelement. Das sieht dort anders aus als überall sonst in der App:
 *   • der Wert steht MITTIG, während jede andere Beschriftung und jeder andere
 *     Feldinhalt linksbündig ist — das Datum wirkte dadurch wie ein Knopf und
 *     nicht wie ein ausgefülltes Feld,
 *   • das Element bringt eine eigene Höhe mit, die nicht zu unseren Feldern passt.
 *
 * Diese Regel gilt bewusst für ALLE Seiten (auch die Firmenverwaltung hat fünf
 * solche Felder) — sie nimmt nur den Fremdkörper heraus und stellt her, was auf
 * dem Desktop ohnehin schon so aussieht. Sie fügt keinen Seiten-Stil hinzu.
 * ─────────────────────────────────────────────────────────────────────────── */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none;
  text-align: left;
  /* 44 px ist die kleinste Fläche, die sich am Handy zuverlässig treffen lässt
     (Apple-Richtlinie). Unsere Felder liegen mit Innenabstand knapp darüber —
     hier festgehalten, damit sie es auch bleiben, wenn das native Element weg ist. */
  min-height: 44px;
}
/* Der eigentliche Wert steckt bei WebKit in einem eigenen Element im
   Schatten-Baum. `text-align` am Feld erreicht ihn NICHT — deshalb diese zweite
   Auswahl. Ohne sie bleibt das Datum am iPhone mittig, egal was oben steht. */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
}
/* Das Kalender-/Uhr-Symbol von Chrome verschwindet mit `appearance: none` nicht
   von selbst — es soll bleiben, sonst fehlt am Desktop der Weg zum Auswahlfeld. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  /* .55 ergab im hellen Thema 4,8 : 1 — sichtbar, aber am Handy zu leise.
     .7 sind 8,7 : 1 und stehen noch hinter dem Wert zurück. */
  opacity: .7; cursor: pointer;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Im dunklen Thema muss das Symbol WEISS GEZWUNGEN werden.
 * „die buttons sieht man fast nicht im dunklen modus" (Manuel, 2026-07-30).
 *
 * Nachgemessen wurde der Kontrast zwischen Symbol und Feldfläche (Bildpunkte
 * ausgelesen, nicht nach Augenmaß beurteilt):
 *   nur `opacity` .55 / .7 / .85 / 1  ->  1.11 · 1.14 · 1.16 · 1.17
 *   `filter: invert(1)`               ->  1.22
 *   `filter: brightness(0) invert(1)` ->  17.21
 * Das Symbol ist im dunklen Thema also SELBST dunkel — `color-scheme: dark`
 * (das js/thema.js setzt) hellt genau dieses Element nicht auf, und Deckkraft
 * kann daran nichts ändern: sie macht ein dunkles Symbol nur blasser.
 * `invert(1)` allein greift ebenfalls nicht — erst `brightness(0)` macht daraus
 * eine Fläche, die sich umkehren lässt.
 *
 * Gewählt: .8 statt voller Deckkraft. Reines Weiß käme auf 17,2 : 1 und wäre
 * damit LAUTER als der Wert im Feld daneben (rund 13 : 1) — das Symbol ist eine
 * Hilfe, nicht der Inhalt. Mit .8 sind es 11,3 : 1.
 *
 * Nur fürs dunkle Thema: im hellen macht dieselbe Regel das Symbol weiß auf
 * weiß (gemessen: Kontrast 1,0 — unsichtbar). */
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
  opacity: .8;
}
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
:root[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ── „Von" und „Bis" gehören am Handy NEBENEINANDER ──────────────────────────
 * Vorher stand jedes der drei WANN-Felder über die ganze Breite: drei Kästen
 * von je 74 px, zusammen 222 px — das war der halbe sichtbare Bereich für eine
 * einzige Zeitangabe. „Von" und „Bis" sind zusammen EINE Angabe (ein Zeitraum)
 * und lesen sich nebeneinander auch schneller als untereinander. Das Datum
 * bleibt über die ganze Breite: es steht für sich.
 * ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .seite-app #manual-form { grid-template-columns: 1fr 1fr; }
  /* Alles außer den beiden Zeitfeldern bleibt einzeilig. Ausdrücklich
     aufgezählt statt über `> *`, damit später hinzukommende Felder nicht
     stillschweigend in eine halbe Spalte rutschen. */
  .seite-app #manual-form > .field,
  .seite-app #manual-form > .feld-gruppe,
  .seite-app #manual-form > .feld-dauer,
  .seite-app #manual-form > .full,
  .seite-app #manual-form > #manual-date-field { grid-column: 1 / -1; }
  .seite-app #manual-form > #manual-von-field { grid-column: 1 / 2; }
  .seite-app #manual-form > #manual-bis-field { grid-column: 2 / -1; }
  /* Zwei Felder nebeneinander sind schmal — der Innenabstand darf dem Wert
     nicht den Platz nehmen. */
  .seite-app #manual-von-field .input,
  .seite-app #manual-bis-field .input { padding-left: 9px; padding-right: 6px; }
}

/* „jetzt" muss man am Handy auch TREFFEN können.
 * Als randloser Text von 12 px war die Fläche rund 30 × 20 px — unter dem, was
 * sich mit dem Daumen zuverlässig trifft. Genau dieser Knopf ist aber die
 * Abhilfe für ein leeres Zeitfeld (am iPhone zeigt ein leeres `type="time"`
 * nichts an, das Feld sieht dann kaputt aus). Deshalb bekommt er am Handy eine
 * sichtbare Fläche und Höhe — auf dem Desktop bleibt er das leise Angebot,
 * das er war. */
@media (max-width: 640px) {
  .seite-app .feld-jetzt {
    border: 1px solid var(--border-strong);
    padding: 5px 10px; min-height: 30px; font-size: 12.5px;
    background: var(--card);
  }
  /* Die Beschriftungszeile darf durch den größeren Knopf nicht umbrechen. */
  .seite-app .feld-kopf { gap: 6px; min-width: 0; }
}

/* ═══ Seite „Stunden & Urlaub" (/konto) ══════════════════════════════════════
 * „hier soll sich eine Seite öffnen wie bei den anderen Tabs und dann auch die
 * letzten genehmigten und zukünftige Anträge stehen." (Manuel, 2026-07-31)
 *
 * Vorher war das ein Fenster von 480 px. Darin hatten zwei Zahlen Platz — eine
 * Antragsliste nicht. Und ein Fenster ist kein Ort: man kann es nicht
 * verlinken, nicht als Lesezeichen speichern und nicht im Verlauf finden.
 * ─────────────────────────────────────────────────────────────────────────── */
/* Die Karten-Kopfzeile (Titel links, Knopf rechts) hing bisher nur an
   `.seite-app`. Auf der Konto-Seite standen Titel, Knopf und Hinweis deshalb
   dreizeilig untereinander.
   
   ⚠️ Der erste Versuch hieß `.container .karten-kopf` — und war ein Fehler:
   die App-Seite hat BEIDE Klassen, und bei gleicher Spezifität gewinnt die
   spätere Regel. Damit bekam sie still `gap: 12px` statt 14 und
   `margin-bottom: 4px` statt 16 — nachgemessen, nicht vermutet. Im Kommentar
   stand daneben „die App-Regeln bleiben unberührt". Das war schlicht falsch.
   
   Deshalb jetzt eine EIGENE Seitenklasse. `body.seite-konto` kann per
   Konstruktion nichts anderes treffen — anders als `.container`, das jede
   Seite hat. Wer hier eine weitere Seite anhängt, gibt ihr ebenfalls eine
   eigene Klasse und listet sie hier auf. */
.seite-konto .karten-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.seite-konto .karten-kopf h2 { margin: 0; font-size: 18px; letter-spacing: -0.3px; }
.seite-konto .karten-kopf__l, .seite-konto .karten-kopf__r {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}

.seite-konto .seiten-titel { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 4px; }
.seite-konto .seiten-unter { color: var(--muted); margin: 0 0 18px; font-size: .95rem; }

/* Abstand zwischen den Karten dieser Seite.
   
   ⚠️ Der fehlte (gefunden 2026-08-04, Manuel: „das passt nicht ganz"): die drei
   Karten stehen DIREKT im `.container` und bekamen deshalb von niemandem einen
   Abstand — gemessen y451–593, y593–724, y724–882, also lückenlos aneinander.
   Optisch war es ein Block mit Trennlinien statt drei Karten.
   Auf der App-Seite fällt das nicht auf, weil die Karten dort in `.spalte`
   liegen (`display:flex; gap:22px`) — den Behälter gibt es hier nicht.
   Bewusst dieselben 22 px wie dort: eine Seite, ein Rhythmus. */
.seite-konto .container > .card + .card { margin-top: 22px; }

/* Die zwei Zahlen, wegen derer man herkommt: groß, nebeneinander, oben.
   Der Abstand war `var(--rand)` und damit auf breiten Schirmen 40 px — fast
   das Doppelte des Karten-Rhythmus. Jetzt überall dieselben 22 px. */
.ko-raster {
  display: grid; gap: 22px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ko-zahl { text-align: left; }
.ko-zahl__w { font-family: var(--font-display); font-size: 2.4rem; line-height: 1.1; font-weight: 700; }
.ko-zahl__l { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-top: 2px; }
.ko-zahl__h { font-size: .88rem; color: var(--text-2); margin: 10px 0 0; line-height: 1.45; }

/* Ein Antrag als Zeile. Bewusst keine Tabelle: die Angaben sind unterschiedlich
   lang (Begründung, Kommentar), und am Handy bricht eine Tabelle unschön. */
.ko-antrag { padding: 12px 0; border-top: 1px solid var(--border); }
.ko-antrag:first-child { border-top: none; padding-top: 4px; }
.ko-antrag__k { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ko-antrag__z { color: var(--text-2); font-size: .92rem; margin-top: 3px; }
.ko-antrag__n { color: var(--muted); font-size: .87rem; margin-top: 3px; }
.ko-leise { font-style: normal; }
.ko-leer { color: var(--muted); font-size: .92rem; margin: 6px 0 0; }

/* Status als Plakette — derselbe Gedanke wie im Änderungsprotokoll: die Farbe
   ist Zugabe, der Zustand steht immer ausgeschrieben daneben. */
.ko-st { display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  background: var(--sanft-2); color: var(--text-2);
  border: 1px solid var(--border-strong); }
.ko-st--gut   { background: #ecfdf3; color: #067647; border-color: #06764733; }
.ko-st--stopp { background: #fef3f2; color: #b42318; border-color: #b4231833; }
.ko-st--offen { background: #fffaeb; color: #b54708; border-color: #b5470833; }
/* Dunkles Thema: getönte dunkle Fläche, heller Text — helle Pastellflächen
   leuchten auf einer dunklen Seite. Gemessen am 2026-07-31 im
   Änderungsprotokoll: 15 : 1 gegen die Zeile, viel zu laut. */
:root[data-theme="dark"] .ko-st--gut   { background: #14291f; color: #5fd394; border-color: #5fd39455; }
:root[data-theme="dark"] .ko-st--stopp { background: #2e1b1c; color: #ff9a95; border-color: #ff9a9555; }
:root[data-theme="dark"] .ko-st--offen { background: #2d2416; color: #e8b45f; border-color: #e8b45f55; }

/* ── Rasterspalten duerfen schrumpfen (2026-08-02) ────────────────────────── */
/* Beim Vermessen der Kopfzeile aufgefallen: die App-Seite lief auf schmalen
   Schirmen nach rechts hinaus — 4 px bei 360, 44 px bei 320. Ursache ist eine
   Voreinstellung von CSS-Grid, die man leicht uebersieht: ein Rasterfeld hat
   `min-width: auto` und schrumpft deshalb NIE unter die Mindestbreite seines
   Inhalts. Die Spalte war `1fr`, wurde aber trotzdem 348 px breit, weil eine
   Karte darin so viel verlangt — und schob die Seite mit sich.
   `min-width: 0` gibt die Erlaubnis zu schrumpfen; was drin wirklich breit ist
   (die Tabellen), rollt ohnehin in seinem eigenen Kasten. Bewusst auf die
   App-Seite begrenzt — `.grid` tragen auch die oeffentlichen Seiten.

   Dasselbe im Formular „Manueller Eintrag": dort verlangten die Auswahlfelder
   ueber ihre laengste Zeile 314 px und schoben die Seite bei 320 px um 27 px
   hinaus. Ein Auswahlfeld darf seinen Text kuerzen — es muss nicht die Seite
   verbiegen. */
.seite-app .grid > *,
.seite-app #manual-form > * { min-width: 0; }

/* ── Sehr schmale Geraete (2026-08-02) ───────────────────────────────────── */
/* Ab hier passt die obere Kopfzeile nicht mehr in ihrer normalen Groesse:
   gemessen bei 320 px braucht der Konto-Block mit dem Umschalter 313 px, frei
   sind 288. Statt etwas wegzulassen wird enger gestellt — Umschalter,
   Abmelden und die Abstaende geben je ein paar Pixel ab. Was hier NICHT
   verschwindet: Abmelden (der einzige Weg heraus) und der Umschalter selbst
   (er ist der Grund dieser Zeile). */
@media (max-width: 340px) {
  .kopf-app .user-box { gap: 8px; }
  .kopf-app .user-box .modus-schalter__w { padding: 5px 8px; font-size: 12.5px; }
  .kopf-app .user-box .btn.leise { padding: 6px 8px; font-size: 12.5px; }
  .kopf-app .user-box .avatar { width: 28px; height: 28px; font-size: 12px; }
}

/* ── Hinweis „Zum Startbildschirm hinzufügen" (2026-08-04) ────────────────── */
/* Ruhig, einzeilig, wegklickbar. Er steht ÜBER dem Heute-Band, weil er nur
   beim ersten Mal da ist und danach nie wieder — unten hätte ihn niemand
   gesehen. Farben aus den Marken, damit er sich im dunklen Thema mitdreht. */
.startbild {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 14px; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--hover);
  font-size: 13.5px; line-height: 1.45; color: var(--text-2);
}
.startbild__txt { flex: 1 1 auto; min-width: 0; }
.startbild__txt b { color: var(--text); font-weight: 600; }
.startbild__zu {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: 15px; line-height: 1;
  background: none; border: none; color: var(--muted); padding: 2px 4px; border-radius: 6px;
}
.startbild__zu:hover { color: var(--text); background: var(--border); }
.startbild__zu:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Wartende Stempel (ohne Netz entstanden) ──────────────────────────────── */
/* Auffällig genug, dass niemand glaubt, der Stempel sei verloren — ruhig
   genug, dass es nicht wie ein Fehler aussieht. Es IST keiner: die Zeit ist
   festgehalten, es fehlt nur die Leitung. */
.warte-hinweis {
  margin: 0 0 14px; padding: 11px 13px;
  border: 1px solid #d0870055; border-radius: 12px;
  background: #d087000f; color: var(--text-2);
  font-size: 13.5px; line-height: 1.45; text-align: left;
}
.warte-hinweis b { color: var(--text); }
:root[data-theme="dark"] .warte-hinweis { border-color: #e8b45f44; background: #2d241666; }

/* ══ Hilfe-Fuss (js/hilfe.js) ═══════════════════════════════════════════════
   NEUE Komponente, keine Aenderung an den gemeinsamen Regeln — die tragen
   zehn Seiten.

   `margin-top: auto` drueckt den Fuss in `.app-shell` (Flex-Spalte, 100vh)
   ans untere Ende, statt ihn direkt unter den Inhalt zu setzen. Auf kurzen
   Seiten steht er damit unten am Bildschirm und nicht mitten im Weissraum.
   Auf den Seiten OHNE `.app-shell` (Verwaltung, Antraege) ist `auto` als
   oberer Abstand unwirksam und der Fuss folgt einfach dem Inhalt — deshalb
   zusaetzlich ein fester Mindestabstand. */
.hilfe {
  margin-top: auto;
  padding: 28px 0 34px;
  border-top: 1px solid var(--line);
}
.app-shell > .hilfe { margin-top: auto; }
body > .hilfe { margin-top: 40px; }
.hilfe__t {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.hilfe__z {
  margin: 0 0 8px; max-width: 68ch;
  font-size: 14px; line-height: 1.6; color: var(--muted);
}
.hilfe__z:last-child { margin-bottom: 0; }
.hilfe__z b { color: var(--text); font-weight: 600; }
.hilfe__z a {
  color: var(--primary); text-decoration: none;
  /* Eine Adresse ohne Leerzeichen sprengt am Handy sonst die Zeile. */
  overflow-wrap: anywhere;
  border-bottom: 1px solid transparent;
}
.hilfe__z a:hover { border-bottom-color: var(--primary); }
.hilfe__z a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

/* ── Hinweis „bei dir zählt die Stempeluhr" (2026-09-03) ─────────────────────
   Steht über dem manuellen Eintrag, wenn eine Person nicht selbst erfassen
   darf. Bewusst ein ruhiger Kasten und KEINE Warnfarbe: Das ist eine
   betriebliche Einstellung, kein Fehler der Person — Rot würde ihr sagen, sie
   hätte etwas falsch gemacht. Nur unter `.seite-app`, wie es die Regel für
   diese gemeinsam genutzte Datei verlangt. */
.seite-app .hinweis-kasten {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--mobil);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 68ch;
}