/* Spedit — mobil-first. Ein Stylesheet, System-Font (SF Pro), kein Framework.
   ponytail: System-Font statt Web-Font — offline-sicher fürs Baustellen-PWA, premium auf iPhone. */
:root {
  --navy: #1b3a5e;
  --navy-2: #2c4f7c;
  --navy-deep: #112a45;
  --ink: #151d29;
  --muted: #687385;
  --line: #e7ebf2;          /* Hairline, sehr leicht — Tiefe kommt aus Schatten, nicht Rahmen */
  --bg: #f2f5f9;
  --bg-2: #eaeef5;
  --card: #ffffff;
  --accent: #df6f1d;
  --accent-soft: #fbe6d6;
  --ok: #2e7d57;
  --ok-soft: #e6f4ec;
  --warn: #b9770e;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(17,30,56,.05), 0 1px 1px rgba(17,30,56,.04);
  --shadow: 0 1px 2px rgba(17,30,56,.05), 0 8px 22px -10px rgba(17,30,56,.16);
  --shadow-lg: 0 14px 36px -12px rgba(17,30,56,.26);
  --spring: cubic-bezier(.32,.72,0,1);
}
* { box-sizing: border-box; }
:root { color-scheme: light; }   /* hell-only — kein schwarzer Erst-Frame im System-Dark-Mode */
/* Tab-/Seitenwechsel ohne Gap-Frame: alte Seite bleibt stehen, bis die neue gerendert
   ist (Cross-Document View Transition) — die native WebView-Schicht (im Dark Mode
   schwarz, bis zum nächsten App-Build) wird nie sichtbar. Alte Browser ignorieren es. */
@view-transition { navigation: auto; }
html, body { margin: 0; }
html { background: var(--bg); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -.011em;
  padding-bottom: calc(60px + env(safe-area-inset-bottom));   /* Platz fuer bottomnav */
}

/* App-Bar */
.appbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: .55rem; flex-wrap: nowrap;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: calc(env(safe-area-inset-top) + .62rem) .9rem .62rem;
  box-shadow: 0 2px 14px -8px rgba(8,18,33,.7);
}
.brand { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
  font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; }
.brand-bolt { width: 1.05rem; height: 1.05rem; color: #ffc24b; flex: 0 0 auto; }
.brand-ai { color: #9fb6d6; font-weight: 600; }
.appbar-sub { font-size: .8rem; color: #a9bcd8; flex: 1 1 0; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar-actions { display: flex; align-items: center; gap: .1rem; flex: 0 0 auto; margin-left: auto; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 2.05rem; height: 2.05rem; border-radius: 11px; color: #cfdaec; background: transparent;
  border: 0; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background .25s var(--spring), transform .25s var(--spring); }
.icon-btn svg { width: 1.18rem; height: 1.18rem; }
.icon-btn:active { background: rgba(255,255,255,.14); transform: scale(.92); }
.appbar-user { margin: 0; display: inline-flex; align-items: center; gap: .05rem; }
.appbar-name { font-size: .8rem; color: #a9bcd8; max-width: 5.5rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
/* Name = Link zum Profil -> nie ganz ausblenden, nur kuerzen */
@media (max-width: 410px) { .appbar-name { max-width: 3.6rem; } }

.content { padding: 1.1rem 1rem; max-width: 720px; margin: 0 auto; }

/* App-Shell (eingeloggte App): Body steht, nur .content scrollt.
   Grund: WKWebView verschiebt position:fixed beim Body-Scroll (iOS-Bug → Bottom-Nav
   «wandert»), und Quer-Overflow einzelner Elemente pant sonst die ganze Seite. */
html { height: 100%; }
body.app { height: 100%; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
body.app .appbar { flex: 0 0 auto; }
body.app .content { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; padding: 0; max-width: none; margin: 0; }
body.app .content-inner { max-width: 720px; margin: 0 auto; padding: 1.1rem 1rem 1.6rem; }
body.app .bottomnav { position: static; flex: 0 0 auto; }

/* Oeffentliche Seiten (spedit.ch ohne Login: Funktionen, AGB, Datenschutz, Impressum, Kontakt) */
.public-nav { display: flex; align-items: center; gap: 1rem; margin-left: auto; }
.public-nav a { color: #cfdaec; text-decoration: none; font-size: .88rem; font-weight: 600; }
.public-nav a.btn { color: #fff; }
.public-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem;
  max-width: 720px; margin: 2rem auto 0; padding: 1.2rem 1rem calc(env(safe-area-inset-bottom) + 1.2rem);
  border-top: 1px solid var(--line); font-size: .82rem; }
.public-footer a { color: var(--muted); text-decoration: none; }
.public-footer-copy { color: var(--muted); margin-left: auto; }
.public-h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.public-lead { color: var(--muted); margin: 0 0 1.4rem; }
.func-item { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; }
.func-item img { width: 100%; border-radius: 14px; border: 1px solid var(--line); }
.func-item h2 { font-size: 1.1rem; margin: 0; }
.legal h2 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
.legal p, .legal li { color: var(--navy-2); }
.legal address { font-style: normal; line-height: 1.7; }

/* Stat-Kacheln */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 1.2rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; }
.stat-num { display: block; font-size: 1.7rem; font-weight: 700; color: var(--navy); line-height: 1; }
.stat-lbl { font-size: .78rem; color: var(--muted); }

.section-h { font-size: .82rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 1.4rem 0 .6rem; }

/* Dashboard-Sektionen einklappbar (native details/summary) */
summary.section-h { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; gap: .4rem; list-style: none; }
summary.section-h::-webkit-details-marker { display: none; }
summary.section-h::before { content: ""; width: .48rem; height: .48rem; flex: 0 0 auto;
  border-right: 1.8px solid var(--muted); border-bottom: 1.8px solid var(--muted);
  transform: rotate(45deg) translateY(-15%); transition: transform .2s var(--spring); }
details.dash-sec:not([open]) > summary.section-h::before { transform: rotate(-45deg); }
.ma-count.alert { background: #c0392b; color: #fff; }

/* Projekt-Karten */
.cards, .agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: .8rem .9rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
}
.card-main { display: flex; flex-direction: column; min-width: 0; }
.komm { font-size: .72rem; font-weight: 700; color: var(--accent); letter-spacing: .3px; }
.card-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sub { font-size: .8rem; color: var(--muted); }

.badge { font-size: .72rem; font-weight: 600; padding: .25rem .55rem; border-radius: 999px; white-space: nowrap; background: #eef1f6; color: var(--navy-2); }
/* Phasen-Badges klar getoent — nie Button-Weiss (sieht sonst tappbar aus) */
.status-anfrage, .status-offerte { background: #e6f1fb; color: #1a5d97; }
.status-auftrag { background: #faeeda; color: #854f0b; }
.status-ausführung { background: #fef2e6; color: var(--warn); }
.status-abnahme { background: #e9f5ef; color: var(--ok); }
.status-abgerechnet { background: #e9f0ec; color: #4a7a5c; }
.status-archiviert { background: #eef1f6; color: var(--muted); }

/* Agenda */
.agenda-item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; display: flex; gap: .8rem; align-items: center; }
.agenda-date { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; min-width: 3.2rem; }
.agenda-body { display: flex; flex-direction: column; min-width: 0; }
.agenda-sub { font-size: .8rem; color: var(--muted); }

.empty { color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 12px; padding: 1rem; }
code { background: #eef1f6; padding: .1rem .35rem; border-radius: 5px; font-size: .85em; }

/* Bottom-Nav (mobil-Pattern) — 7 Tabs passen auf 360px: SVG-Icons + kompakte Labels */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 20px -14px rgba(17,30,56,.4);
}
.navitem {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: .5rem .1rem; text-decoration: none; color: var(--muted); font-size: .61rem;
  font-weight: 500; letter-spacing: -.01em; position: relative;
  transition: color .2s var(--spring);
}
.navitem > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navitem.active { color: var(--navy); font-weight: 600; }
.navitem.active::before { content: ""; position: absolute; top: 0; width: 1.4rem; height: 2.5px;
  border-radius: 0 0 3px 3px; background: var(--accent); }
.navicon { width: 1.42rem; height: 1.42rem; display: flex; align-items: center; justify-content: center; }
.navicon svg { width: 100%; height: 100%; }
.navitem:active .navicon { transform: scale(.9); transition: transform .2s var(--spring); }

@media (min-width: 600px) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* Ablage/Admin sind Desktop-Arbeit — auf dem Handy/in der App ausblenden
   (User-Entscheid 2026-07-10; Breite als App-Proxy) */
@media (max-width: 899px) { .navitem.nav-desktop { display: none; } }

/* --- Schritt 2: Projektakte --- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .62rem .95rem; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #fff; color: var(--navy); font-weight: 600; font-size: .9rem; text-decoration: none;
  cursor: pointer; -webkit-appearance: none; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--spring), box-shadow .25s var(--spring), background .2s var(--spring);
}
.btn svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.btn:active { transform: scale(.975); box-shadow: var(--shadow-sm); }
.btn-primary { background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%);
  color: #fff; border-color: var(--navy); box-shadow: 0 1px 2px rgba(17,30,56,.12), 0 8px 18px -8px rgba(27,58,94,.55); }
.btn-primary:active { box-shadow: 0 1px 2px rgba(17,30,56,.12); }

/* Karte als Link (ganze Flaeche klickbar, touch-freundlich) */
.card-link { padding: 0; }
.card-hit { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .8rem .9rem; text-decoration: none; color: inherit; width: 100%; }

.back { display: inline-block; color: var(--muted); text-decoration: none; font-size: .85rem; margin-bottom: .6rem; }

/* Formular */
.form { display: flex; flex-direction: column; gap: .9rem; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.form input, .form select {
  font-size: 1rem; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink); -webkit-appearance: none; width: 100%;
}
.form input:focus, .form select:focus { outline: 2px solid var(--navy-2); border-color: var(--navy-2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.form-row label { min-width: 0; }   /* Grid-Blowout: intrinsisch breite Inputs (file) sprengen sonst die Spalte */
.form input[type=file] { font-size: .85rem; padding: .55rem .6rem; overflow: hidden; }
/* Kompakter Foto-/Datei-Knopf: nativer file-Input versteckt (dessen iOS-Statustext
   «Keine ausgewählt» wird in schmalen Spalten unschön abgeschnitten). */
.foto-pick-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-size: .95rem; font-weight: 600; color: var(--navy); background: #fff;
  border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; cursor: pointer; }
.foto-pick-name { font-weight: 400; font-size: .78rem; color: var(--muted); min-height: 1em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .4rem; }

/* Rapport: Speichern klebt am unteren Rand des Scrollbereichs, solange das (lange)
   Formular im Bild ist -- der Knopf darf nie erst nach Runterscrollen auftauchen. */
.rapport-form .form-actions { position: sticky; bottom: 0; z-index: 5;
  margin: 0 -1rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom) / 2);
  background: var(--bg); box-shadow: 0 -8px 14px -12px rgba(8,18,33,.5); }
.rapport-form .form-actions .btn { width: 100%; }

/* Rapport: mehrere Zeitspannen + Stoppuhr */
.btn-sm { font-size: .82rem; padding: .4rem .7rem; }
.zeit-block { margin-bottom: 1rem; }
.zeit-h { display: block; font-size: .85rem; font-weight: 600; color: var(--navy-2); margin-bottom: .4rem; }
.zeit-hint { font-weight: 400; color: var(--muted, #7a808a); font-size: .78rem; }
.spanne { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.spanne input[type=time] { flex: 1; min-width: 0; font-size: 1rem; padding: .55rem .5rem; border: 1px solid var(--line); border-radius: 10px; }
.bis-sep { color: var(--muted, #7a808a); }
.spanne-x { flex: none; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: #9a3329; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.zeit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .2rem; }
.uhr-anzeige { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; color: var(--navy); }

/* Heute/Monat-Umschalter (Segmented Control) + grosse Stoppuhr */
.rap-tabs { display: flex; background: #e7ebf1; border: 1px solid var(--line); border-radius: 14px; padding: 3px; margin-bottom: 1rem; }
.rap-tab { flex: 1; padding: .7rem 0; font-size: 1.05rem; font-weight: 700; border: none; border-radius: 11px; background: transparent; color: var(--muted, #7a808a); cursor: pointer; }
.rap-tab.active { background: var(--navy); color: #fff; }
.uhr-gross { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: .3rem 0 1.1rem; }
.uhr-btn-gross { width: 5.5rem; height: 5.5rem; border-radius: 50%; border: none; background: var(--navy); color: #fff; font-size: 2.3rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(10,22,40,.3); }
.uhr-btn-gross.laeuft { background: #9a3329; }
.uhr-gross .uhr-anzeige { font-size: 1.35rem; }
.uhr-projekt { font-size: .78rem; background: #e8eef7; color: var(--navy); border-radius: 999px; padding: .25rem .7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uhr-projekt i { font-style: normal; opacity: .55; }
.heute-datum { margin: 0 0 1rem; font-size: .95rem; font-weight: 600; color: var(--navy-2, var(--navy)); }

/* Monat-Tab: Tages-Einträge bearbeiten / nacherfassen */
.rap-edit summary { cursor: pointer; list-style: none; }
.rap-edit summary::-webkit-details-marker { display: none; }
.rap-chevron { flex: none; font-size: 1.4rem; line-height: 1; color: var(--muted, #7a808a); transition: transform .15s; }
.rap-edit[open] > summary .rap-chevron { transform: rotate(90deg); }
.rap-edit-form { margin: .8rem 0 .4rem; padding: .8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.add-box .rap-edit-form { border: none; padding: 0 0 .8rem; background: transparent; }
.stat-num.plain { color: var(--navy-2, var(--navy)); }
.ferien-strip { display: flex; justify-content: space-between; align-items: center; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .9rem; margin-bottom: 1rem; font-size: .85rem; color: var(--muted, #7a808a); }
.ferien-strip b { color: var(--navy); }
.ferien-strip b.neg { color: #c0392b; }
.rap-cal tbody td.cal-sel { background: var(--navy); color: #fff; font-weight: 600; }  /* schlaegt cal-ok/low/miss (spaeter im File) via Spezifitaet */
.zeit-total { margin: .5rem 0 0; font-size: .9rem; font-weight: 600; color: #1d6b42; }
.alert { background: #fdecea; color: #b42318; border: 1px solid #f6c9c4; border-radius: 10px; padding: .7rem .9rem; font-size: .9rem; }

/* Parkdienst (Zusatzmodul) */
.badge.fz-gesperrt { background: #fdecea; color: #9a3329; }
.badge.fz-archiviert { background: #ececec; color: #667; }
.fz-alert { margin: .4rem 0 .8rem; }
.fz-card { flex-wrap: wrap; }                       /* schmale Screens: Aktionen unter den Inhalt */
.fz-card .card-main { flex: 1 1 15rem; min-width: 0; }
.fz-actions { display: flex; align-items: center; gap: .4rem; flex: none; margin-left: auto; }
.fz-actions form { display: flex; gap: .4rem; }

/* Akte */
.akte-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .8rem; }
.akte-title { font-size: 1.3rem; margin: 0; flex: 1 1 60%; }
.status-form { margin: 0; }
.status-form select { font-size: .85rem; font-weight: 600; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: #eef1f6; color: var(--navy-2); -webkit-appearance: none; }
.meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 0 0 1rem; }
.meta div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; }
.meta dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.meta dd { margin: .15rem 0 0; font-weight: 600; }
.akte-actions { margin-bottom: .4rem; }
.akte-sec { margin-top: 1.4rem; }

/* Ein-/ausklappbare Akte-Sektionen: Summary = Sektions-Titel, Add-Aktionen bleiben ausserhalb sichtbar */
.sec-fold > summary { list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.sec-fold > summary::-webkit-details-marker { display: none; }
.sec-fold > summary.section-h { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; }
.sec-fold > summary.section-h::after { content: '▾'; font-size: 1.1rem; line-height: 1; color: var(--muted); transition: transform .15s; }
.sec-fold:not([open]) > summary.section-h::after { transform: rotate(-90deg); }
.fold-count { order: 1; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; background: #c0392b; color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1.3rem; text-align: center; border-radius: 4px; }
.sec-fold[open] > summary .fold-count { display: none; }
.add-below { margin-top: .6rem; }  /* Block-Card aus .add-inline; nur Abstand unter der Sektion */

.empty.sm { padding: .7rem .9rem; font-size: .88rem; }
.agenda-item.done strong { text-decoration: line-through; color: var(--muted); }

.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.task { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .15rem; }
.task.done .task-body span:first-child, .task.done > span:first-child { text-decoration: line-through; color: var(--muted); }
.task-sub { font-size: .78rem; color: var(--muted); }
.task-row { display: flex; align-items: center; gap: .6rem; }
.task-body, .task-hit { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.task-toggle, .task-del { margin: 0; flex: none; }
.task-check, .task-x {
  -webkit-appearance: none; cursor: pointer; border-radius: 8px; min-width: 2.2rem; min-height: 2.2rem;
  font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.task-check { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.task.done .task-check { background: #fff; color: var(--navy); }
.task-x { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.task-x:active, .task-check:active { transform: translateY(1px); }
.task-done .task-hit > span:first-child { text-decoration: line-through; color: var(--muted); }
.task-done .task-check { background: #fff; color: var(--navy); }

/* «Alle N ›»-Zeile unter gekappten Dashboard-Listen + Kontroll-Seite */
.sec-more { display: block; text-align: center; margin-top: .5rem; }
.kontrolle-h { display: flex; align-items: center; gap: .4rem; }
.kontrolle-summe { margin-left: auto; font-size: .78rem; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }
.kontrolle-alle { margin-top: .5rem; text-align: right; }

/* --- Disposition / Gantt-Plantafel --- */
.plan-toolbar { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.plan-span { font-size: 1rem; margin: 0; flex: 1; text-align: center; }
.nav-btn { padding: .45rem .8rem; font-size: 1.1rem; line-height: 1; }

.view-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: .8rem; }
.view-btn {
  font-size: .74rem; font-weight: 600; color: var(--navy-2); background: #fff;
  border: 1px solid var(--line); border-radius: 999px; padding: .32rem .6rem;
  text-decoration: none; cursor: pointer; list-style: none; display: inline-block;
}
.view-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.view-frei { position: relative; }
.view-frei summary::-webkit-details-marker { display: none; }
.frei-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; padding: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.frei-form input[type=date] { font-size: .9rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; }

/* Anzeigen-Dropdown: Lanes/Marker im Plan ein-/ausblenden (Zustand in localStorage, app.js). */
.gantt-show .show-pop {
  position: absolute; top: 100%; left: 0; z-index: 6; margin-top: .4rem;
  display: flex; flex-direction: column; gap: .45rem; padding: .65rem .8rem;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); white-space: nowrap;
}
.show-pop label { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: var(--navy-2); cursor: pointer; }
.show-pop input { width: 1rem; height: 1rem; }
.lg { width: .7rem; height: .7rem; display: inline-block; flex: none; }
.lg-mark { background: var(--navy-2); transform: rotate(45deg); }
.lg-term { background: #2c7a7b; border-radius: 2px; }
.lg-task { background: #d08a1f; border-radius: 50%; }
.gantt.hide-marks .g-mark { display: none; }
.gantt.hide-termine .lane-termine { display: none; }
.gantt.hide-tasks .lane-tasks { display: none; }
.g-term { position: absolute; z-index: 2; transform: translateX(-50%); }
.g-term .term-sq { display: block; width: .62rem; height: .62rem; border-radius: 2px; background: #2c7a7b; }
.g-term .term-sq.done { background: #9aa531; opacity: .6; }
/* Punkte in den Termin-/Aufgaben-Listen — Farben wie die Gantt-Marker */
.lane-dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; vertical-align:middle; margin-right:.15rem; }
.dot-term { background:#2c7a7b; border-radius:2px; }
.dot-task { background:#d08a1f; }
.dot-done { background:#9aa531; }

.gantt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.gantt { width: max-content; min-width: 100%; }

.g-lane { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.g-lane:last-child { border-bottom: 0; }
.g-name {
  position: sticky; left: 0; z-index: 3; flex: 0 0 var(--nw); width: var(--nw);
  background: var(--card); border-right: 1px solid var(--line);
  padding: .4rem .6rem; font-weight: 600; font-size: .85rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.g-name .rolle { font-weight: 500; font-size: .68rem; color: var(--muted); text-transform: capitalize; }
.g-track { position: relative; flex: 0 0 calc(var(--dw) * var(--n)); width: calc(var(--dw) * var(--n)); }

/* Hintergrund-Raster */
.g-bg { position: absolute; inset: 0; display: flex; z-index: 0; }
.g-bgcell { flex: 0 0 var(--dw); width: var(--dw); border-right: 1px solid #eef1f6; }
.g-bgcell.we { background: #f7f8fb; }
.g-bgcell.today { background: #fff6ec; box-shadow: inset 0 0 0 1px #f4cfa6; }
.g-bgcell.bnd { border-left: 1px solid #cfd6e2; }
.g-daycell.bnd { border-left: 1px solid #43618a; }

/* Kopf */
.g-head .g-name { background: var(--navy); }
.g-head .g-track { display: flex; background: var(--navy); }
.g-daycell { flex: 0 0 var(--dw); width: var(--dw); color: #cdd8e8; text-align: center; padding: .35rem 0; border-right: 1px solid #2c4f7c; }
.g-daycell .wd { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .3px; }
.g-daycell .dnum { display: block; font-size: .9rem; font-weight: 700; color: #fff; }
.g-daycell.we { color: #91a3c0; }
.g-daycell.we .dnum { color: #b9c6db; }
.g-daycell.today { background: var(--accent); }
.g-daycell.today .wd, .g-daycell.today .dnum { color: #fff; }

/* Einsatz-Balken */
.g-lane:not(.g-head):not(.g-term-lane) .g-track { height: 2.7rem; }
.g-bar {
  position: absolute; top: 5px; height: calc(2.7rem - 10px); z-index: 1;
  border-radius: 7px; color: #fff; display: flex; align-items: center;
  padding: 0 .45rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.g-bar-lbl { font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-bar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.g-bar.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Fixtermine-Lane */
.g-term-lane { background: #fcfcfd; }
.g-term-lane .g-name { background: #fcfcfd; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; }
.g-termin {
  position: absolute; z-index: 1; height: 1.4rem; max-width: calc(var(--dw) * 4);
  display: flex; align-items: center; gap: .3rem; padding: 0 .45rem;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: .7rem; font-weight: 600; white-space: nowrap; overflow: hidden;
}
.g-termin .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--muted)); flex: 0 0 auto; }
.typ-montage { --tc: #2c4f7c; } .typ-lieferung { --tc: #16859e; }
.typ-abnahme { --tc: #2e7d57; } .typ-besprechung { --tc: #8e44ad; } .typ-sonstiges { --tc: #5d6d7e; }

/* Projekt-Palette */
.proj-c0 { background: #2c4f7c; } .proj-c1 { background: #2e7d57; } .proj-c2 { background: #b9770e; }
.proj-c3 { background: #8e44ad; } .proj-c4 { background: #c0392b; } .proj-c5 { background: #16859e; }
.proj-c6 { background: #5d6d7e; } .proj-c7 { background: #c0398f; }

.legend { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0; }
.leg { font-size: .72rem; font-weight: 600; color: #fff; padding: .2rem .55rem; border-radius: 999px; }

/* App-weites «+ Hinzufuegen»-Muster: gestrichelte Karte, aufgeklappt wird sie zur Flaeche */
.add-box { margin-top: 1rem; background: transparent; border: 1.5px dashed #b9c2d0; border-radius: 12px; padding: .15rem .9rem; }
.add-box > summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: .55rem 0; text-align: center; list-style: none; }
.add-box > summary::-webkit-details-marker { display: none; }
/* Affordanz: aufklappbar traegt ˅, navigierende Add-Links tragen › (Advisor-Review) */
.add-box:not([open]) > summary::after { content: ' ˅'; color: var(--muted, #7a808a); font-weight: 400; }
.add-inline::after { content: ' ›'; color: var(--muted, #7a808a); }
.add-box[open] { background: var(--card); border: 1px solid var(--line); }
.add-box[open] > summary { text-align: left; }
.add-box .form { padding-bottom: .8rem; }

/* --- Gesamtplanung / Ziele-Gantt --- */
/* Segmented Control wie im Rapport-Tab (app-weites Umschalter-Muster) */
.plan-tabs { display: flex; background: #e7ebf1; border: 1px solid var(--line); border-radius: 14px; padding: 3px; margin-bottom: .9rem; }
.plan-tab { flex: 1; text-align: center; padding: .6rem 0; font-size: .95rem; font-weight: 700; color: var(--muted);
  text-decoration: none; border-radius: 11px; }
.plan-tab.active { background: var(--navy); color: #fff; }
.komm-sm { display: block; font-size: .66rem; font-weight: 700; color: var(--muted); }
.g-name a { color: inherit; text-decoration: none; }
.g-name a:hover { text-decoration: underline; }
.ziel-line { font-size: .85rem; color: var(--navy-2); margin: -.3rem 0 1rem; display: flex; flex-wrap: wrap; gap: .8rem; }

.g-pbar { position: absolute; top: calc(50% - 5px); height: 10px; z-index: 1;
  border-radius: 6px; opacity: .8; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.g-pbar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.g-pbar.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Balken-Link: kein eigener Box-Fluss (display:contents) -> absolut positionierter
   Balken bleibt unverändert; nur klickbar + Zeiger. */
.g-barlink { display: contents; }
.g-barlink .g-bar, .g-barlink .g-pbar { cursor: pointer; }

.g-mark { position: absolute; z-index: 2; transform: translateX(-50%); }
.g-ziel { position: absolute; z-index: 3; top: 50%; transform: translate(-50%, -50%); }
.rhomb { display: block; transform: rotate(45deg); border-radius: 2px; }
.g-mark .rhomb { width: 11px; height: 11px; background: #fff; border: 2px solid var(--navy-2); }
.g-mark.done .rhomb { background: var(--navy-2); }
.g-ziel .rhomb { width: 17px; height: 17px; background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); }

.leg-mark { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--navy-2); }
.leg-mark .rhomb { width: 11px; height: 11px; }
.leg-mark .rhomb.ziel { background: var(--accent); }
.leg-mark .rhomb.mark { background: #fff; border: 2px solid var(--navy-2); }
.leg-mark .rhomb.mark.done { background: var(--navy-2); }

/* --- Beleg-Eingang / Bestellzuordnung --- */
.upload-box { margin-bottom: 1.2rem; }
.upload-label { display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: 1.1rem; border: 2px dashed var(--navy-2); border-radius: 12px; background: var(--card);
  color: var(--navy); font-weight: 600; cursor: pointer; text-align: center; }
.upload-label small { color: var(--muted); font-weight: 400; }
.upload-icon { font-size: 1.6rem; line-height: 1; }
.upload-label input[type=file] { display: none; }

.beleg-card { flex-direction: column; align-items: stretch; gap: .6rem; }
.vorschlag { display: block; font-size: .8rem; color: var(--navy-2); margin-top: .2rem; }
.vorschlag.none { color: var(--accent); }
.konf { font-size: .72rem; font-weight: 700; color: #fff; background: var(--navy-2);
  border-radius: 999px; padding: .05rem .4rem; margin-left: .2rem; }
.zuordnen-form { display: flex; gap: .4rem; }
.zuordnen-form select { flex: 1; min-width: 0; font-size: .85rem; padding: .45rem .5rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; }

.via { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  padding: .05rem .4rem; border-radius: 4px; }
.via-auto { background: #e7f3ec; color: #1d6b42; }
.via-bestätigt { background: #e7eef7; color: #25517f; }
.via-manuell { background: #f0eef5; color: #6d4e8e; }

/* --- Rapport / Zeiterfassung --- */
.sync-status { font-size: .8rem; font-weight: 600; padding: .5rem .8rem; border-radius: 10px; margin-bottom: 1rem; }
.sync-status.ok { background: transparent; box-shadow: none; padding: 0; font-size: .78rem; color: #4a7a5c; }  /* Dauerzustand leise; laut nur Queue/Offline */
.sync-status.syncing { background: #fff6ec; color: #9a6213; }
.sync-status.offline { background: #fdecea; color: #9a3329; }
.rapport-form { margin-bottom: 1.4rem; }
#queue-sec:has(#queue-list:empty) { display: none; }   /* leere Sync-Liste ausblenden */
.queue-item { background: #fff6ec; border: 1px solid #f4cfa6; border-radius: 10px;
  padding: .5rem .8rem; font-size: .85rem; color: #7a4e12; list-style: none; }
.section-h.sm { font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.add-inline { display: block; text-align: center; border: 1.5px dashed #b9c2d0; border-radius: 12px; padding: .55rem .9rem; margin-top: 1rem; font-size: .9rem; font-weight: 600; color: var(--navy); text-decoration: none; }

/* --- Persönliches Dashboard --- */
.hello { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; margin-bottom: 1.2rem; }
.hello-name { font-size: 1.5rem; margin: 0; }
.hello-rolle { font-size: .82rem; color: var(--muted); }
.whoami { flex: 0 0 auto; }
.whoami-btn { list-style: none; cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--navy);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .7rem; }
.whoami summary::-webkit-details-marker { display: none; }
.whoami-form { position: absolute; right: 1rem; margin-top: .5rem; z-index: 5; display: flex; flex-wrap: wrap; gap: .4rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .7rem; box-shadow: 0 6px 20px rgba(0,0,0,.12); max-width: 17rem; }
.whoami-form select { font-size: .85rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; flex: 1 1 100%; }
.whoami-form .hint { flex: 1 1 100%; font-size: .7rem; color: var(--muted); margin: 0; }
.dash-sec { margin-bottom: 1.4rem; }
.task-hit { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; color: inherit; }
.rel { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--navy); background: #e7eef7; border-radius: 4px; padding: .05rem .35rem; margin-right: .3rem; }

/* --- Team / Mitarbeiter-Stammdaten --- */
.ma-group { font-size: .9rem; margin: 1.3rem 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.ma-count { font-size: .72rem; font-weight: 600; color: var(--muted); background: #eef1f6; border-radius: 999px; padding: .1rem .5rem; }
.ma-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--navy);
  color: #fff; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: .3px;
}
.ma-avatar.lg { width: 52px; height: 52px; font-size: 1rem; }
.akte-head .ma-avatar { margin-right: .2rem; }
.pnr { font-size: .72rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted-tag { font-size: .68rem; font-weight: 600; color: var(--muted); background: #eef1f6; padding: .1rem .4rem; border-radius: 5px; }
.ok-tag { color: var(--ok); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .4rem; }
.chip { font-size: .74rem; background: #eef1f6; color: var(--navy-2); padding: .22rem .6rem; border-radius: 999px; }

/* Stellvertretung: grün = übernommen als Stv. */
.stv-item { border-left: 3px solid #3a8a3f; background: #f2f8f2; }
.stv-tag { color: #2f7a34; font-weight: 600; }
.stv-banner { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  background: #f2f8f2; border: 1px solid #bcd9bd; border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1rem; }
.stv-banner-text { font-size: .95rem; }
.stv-end-btn { font-size: 1rem; padding: .65rem 1.3rem; }
.stv-info { background: #f2f8f2; border: 1px solid #bcd9bd; border-radius: 12px; padding: .6rem .9rem; margin-bottom: 1rem; }
.stv-info-line { margin: 0; font-size: .9rem; }
.stv-legende { margin: .25rem 0 0; font-size: .76rem; color: #2f7a34; }
.stv-optin { display: flex; gap: .5rem; align-items: flex-start; font-size: .85rem; }
.stv-optin .task-sub { display: block; margin-top: .15rem; }
.stv-hint { font-size: .78rem; color: var(--muted, #667); margin: .2rem 0 0; }

/* Schritt 9 — Login + Abmelden */
.login-wrap { max-width: 420px; margin: 1.5rem auto; }
.login-h { font-size: 1.4rem; margin: 0 0 1rem; color: var(--navy); }
.login-opt { font-weight: 400; font-size: .72rem; color: var(--muted); }
.login-hint, .hint { font-size: .76rem; color: var(--muted); }
.login-hint { margin-top: 1rem; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.logout-form { margin: 0; }
.appbar-user { margin: 0 0 0 auto; display: flex; align-items: center; gap: .4rem; }
.appbar-name { font-size: .8rem; color: #b9c6db; }
.appbar-logout { background: transparent; border: 0; color: #b9c6db; font-size: 1rem; cursor: pointer; padding: .1rem .3rem; }

/* Plantafel-Filterleiste (Schritt: Dispo-Filter, nur see_all) */
.notif-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.notif-head .back { margin: 0; }
.push-fold { margin-bottom: 1rem; }
.filter-fold { margin: -.4rem 0 .8rem; }
.filter-fold > summary { list-style: none; }
.filter-fold > summary::-webkit-details-marker { display: none; }
.filter-fold[open] > summary { margin-bottom: .4rem; }
.plan-filter { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; padding: .55rem .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.plan-filter select { font-size: .85rem; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy-2); }
.plan-filter .filter-reset { font-size: .8rem; color: var(--navy-2); text-decoration: none; margin-left: auto; }
.plan-filter .filter-reset:hover { text-decoration: underline; }
/* Multi-Select-Dropdown (Export: Mitarbeitende) — natives <details>, Checkboxen im Panel */
.ma-dropdown { position: relative; }
.ma-dropdown summary { list-style: none; cursor: pointer; font-size: .85rem; padding: .4rem .55rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--navy-2); }
.ma-dropdown summary::-webkit-details-marker { display: none; }
.ma-dropdown summary::after { content: " ▾"; font-size: .7rem; }
.ma-dropdown-panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 14rem;
  max-height: 16rem; overflow-y: auto; padding: .5rem .6rem; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.ma-dropdown-panel label { display: flex; gap: .45rem; align-items: center; font-size: .85rem;
  padding: .25rem 0; color: var(--navy-2); white-space: nowrap; }
.g-empty .g-name { color: var(--navy-2); font-style: italic; font-weight: 500; }

/* --- In-App-Benachrichtigungen: Glocke + Badge + Liste --- */
.notif-bell { position: relative; margin-left: auto; color: #fff; text-decoration: none; font-size: 1.1rem; line-height: 1; padding: .1rem .2rem; }
.notif-bell + .appbar-user { margin-left: .4rem; }
.notif-badge { position: absolute; top: -.4rem; right: -.45rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
  background: var(--accent); color: #fff; font-size: .66rem; font-weight: 700; line-height: 1.05rem; text-align: center;
  border-radius: 999px; box-shadow: 0 0 0 1.5px var(--navy); }

.notifs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.notif { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.notif.unread { border-left: 3px solid var(--accent); }
.notif-form { margin: 0; }
.notif-hit { width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: .7rem .9rem; display: flex; flex-direction: column; gap: .2rem; color: inherit; }
.notif.unread .notif-text { font-weight: 600; }
.notif-sub { font-size: .78rem; color: var(--muted); }

/* Dokumenten-System: Intelligenter Upload, Ordner-Liste, Datenablage */
.smart-upload { margin: 0 0 .4rem; }
.smart-summary { display: inline-block; cursor: pointer; list-style: none; }
.smart-summary::-webkit-details-marker { display: none; }
.smart-body { margin-top: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .9rem; }
.smart-hint { margin: 0 0 .7rem; font-size: .82rem; color: var(--muted); }
.flash-ok { background: #e7f3ec; color: #1d6b42; border: 1px solid #bfe0cd; border-radius: 10px;
  padding: .6rem .8rem; font-size: .85rem; font-weight: 600; margin: 1rem 0 0; }

.ordner-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ordner { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .6rem .9rem; }
.ordner-name { font-weight: 600; color: var(--navy); font-size: .9rem; }
.ordner-empty { font-size: .8rem; color: var(--muted); margin-left: .4rem; }
.doc-list { list-style: none; margin: .4rem 0 0; padding: 0 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; }
.doc-item { font-size: .88rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.doc-item a { color: var(--navy-2); text-decoration: none; }
.doc-item a:hover { text-decoration: underline; }

/* --- Kostenübersicht (nur Kader / see_margin) --- */
.nur-kader { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: #9a6213; background: #fff6ec; border: 1px solid #f4cfa6; border-radius: 999px; padding: .08rem .45rem; vertical-align: middle; }
table.kosten { width: 100%; border-collapse: collapse; font-size: .85rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.kosten th, table.kosten td { padding: .45rem .7rem; text-align: left; border-bottom: 1px solid var(--line); }
table.kosten thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); background: #f7f8fb; }
table.kosten td.num, table.kosten th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.kosten tfoot td { font-weight: 700; border-bottom: 0; background: #f7f8fb; }
.kosten-marge { margin-top: .7rem; }
.kosten-marge .pos { color: #1d6b42; font-weight: 600; }
.kosten-marge .neg { color: var(--accent); font-weight: 600; }
.kosten-hint { font-size: .72rem; color: var(--muted); margin: .5rem 0 0; }

/* Admin: Stundensätze editieren */
.satz-form { gap: .5rem; }
.satz-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .8rem; }
.satz-name { font-weight: 600; color: var(--navy); }
.satz-input { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
.satz-input input { width: 5rem; text-align: right; font-variant-numeric: tabular-nums;
  padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; }

/* Datenablage: Treffer-Zeile + Pagination */
.treffer { font-size: .78rem; color: var(--muted); margin: .2rem 0 .8rem; }
.plan-filter input[type=search] { flex: 1 1 9rem; min-width: 0; font-size: .85rem; padding: .4rem .55rem;
  border: 1px solid var(--line); border-radius: 8px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 1.2rem 0 .4rem; }
.pager-info { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   Visual polish (ergänzender Layer — überschreibt oben).
   Soft Structuralism: Tiefe via weichem Schatten statt 1px-Rahmen,
   ruhigere Radien, klarere Hierarchie. Ein Block, propagiert app-weit.
   ============================================================ */

/* Schwebende Flächen mit diffusem Ambient-Schatten statt harter Linie */
.stat, .card, .agenda-item, .empty, .task, .ordner, .notif, .beleg-card,
.smart-body, .satz-row, .frei-form, .plan-filter, .add-box[open], .sync-status,
.gantt-scroll, .meta div, table.kosten, .login-card {
  box-shadow: var(--shadow-sm);
}
.stat, .card, .agenda-item, .empty, .task, .ordner, .notif {
  border-color: transparent; border-radius: var(--r);
}

/* Karten: ruhige, physische Interaktion */
.card { transition: transform .28s var(--spring), box-shadow .28s var(--spring); }
.card:active { transform: scale(.99); }

/* Stat-Kacheln größer und ruhiger */
.stats { gap: .7rem; }
.stat { padding: .9rem 1rem; }
.stat-num { font-size: 1.85rem; letter-spacing: -.02em; }

/* Section-Header feiner */
.section-h { font-size: .73rem; letter-spacing: .9px; font-weight: 700; }

/* Status-Pillen: klar, ruhig, mit Innenkontur */
.badge { padding: .3rem .72rem; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(17,30,56,.05); }

/* ---- Phasen-Stepper: „Wo steht das Projekt?" auf einen Blick ----
   Bus-Faktor: fällt der Projektleiter aus, sieht jede Vertretung sofort,
   in welcher Lebenszyklus-Phase das Projekt steckt. 7 Segmente + Klartext-Zeile. */
.phaseblock { margin: 0 0 1.2rem; }
.phasebar { display: flex; gap: .3rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.phasebar li { flex: 1 1 0; height: 6px; border-radius: 999px; background: var(--bg-2);
  transition: background .4s var(--spring); }
.phasebar li.done { background: var(--navy-2); }
.phasebar li.now  { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.phasenow { margin: 0; font-size: .82rem; color: var(--muted); font-weight: 500; letter-spacing: -.01em; }
.phasenow strong { color: var(--navy); font-weight: 700; }
.phasenow .nx { color: var(--muted); }

/* Projektkopf etwas großzügiger */
.akte-title { letter-spacing: -.02em; }
.akte-head { margin-bottom: 1rem; }

/* „Nächster Schritt"-Streifen auf der Dashboard-Karte */
.card-sub .rel { box-shadow: inset 0 0 0 1px rgba(27,58,94,.08); }


/* ---------- Ferien (Antrag + Planung) ---------- */
.btn-ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.ferien-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1rem; }
.ferien-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--muted); font-weight: 600; }
.ferien-form input, .ferien-form select { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: .5rem; font: inherit; background: #fff; }
.ferien-note { flex: 1; min-width: 10rem; }
.ferien-row { align-items: center; }
.ferien-actions { display: flex; gap: .4rem; margin-left: auto; }
.ferien-plan-link { margin-left: auto; font-size: .8rem; }
.badge.ferien-offen { background: #fdf3e0; color: var(--warn); }
.badge.ferien-bewilligt { background: var(--ok-soft); color: var(--ok); }
.badge.ferien-abgelehnt { background: #fbeaea; color: #b3423a; }

/* Rapport-Monatskalender (Meine Zeiterfassung) */
.rap-cal { width: 100%; max-width: 24rem; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.rap-cal th { font-size: .7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; padding: .15rem 0; }
.rap-cal td { text-align: center; font-size: .85rem; padding: .35rem 0; border-radius: 6px; background: var(--bg); color: var(--navy); }
.rap-cal td.cal-out { background: transparent; }
.rap-cal td.cal-ok { background: #2e7d57; color: #fff; font-weight: 600; }
.rap-cal td.cal-low { background: #df6f1d; color: #fff; font-weight: 600; }
.rap-cal td.cal-miss { background: #c0392b; color: #fff; font-weight: 600; }
.rap-cal td.cal-ferien { background: #9aa4b2; color: #fff; font-weight: 600; }
.rap-cal td.cal-heute { outline: 2px solid var(--navy); outline-offset: -2px; }
.cal-legende { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; font-size: .78rem; color: var(--muted); margin: .5rem 0 0; }
.cal-dot { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; margin-right: .35rem; vertical-align: -1px; }
.cal-dot.cal-ok { background: #2e7d57; }
.cal-dot.cal-low { background: #df6f1d; }
.cal-dot.cal-miss { background: #c0392b; }
.cal-dot.cal-ferien { background: #9aa4b2; }
.rap-stats { margin: 0 0 1rem; }
.stat-num.neg { color: #c0392b; }
.stat-num.pos { color: var(--ok); }
.rap-cal td a { display: block; color: inherit; text-decoration: none; margin: -.35rem 0; padding: .35rem 0; }

/* Administration: kompakte Zuteilungszeilen */
.admin-check { display:flex; align-items:center; gap:.3rem; font-size:.8rem; white-space:nowrap; }
.admin-check input { width:auto; }