/*
 * Designrichtung B für Verwaltung, Mitarbeiter-App und Anmeldung
 * (23.09.2026). Der Kundenlink hat sie schon (kunde.css).
 *
 * Fraunces über Manrope, warmer Grund #F7F4EE, Terrakotta #B04D14 als
 * Akzent, Grün #2F6F5E für "läuft / bestätigt", Rot #A63D2F für "fehlt".
 * Karten weiß mit feiner Linie und 18 px Radius, Knöpfe als Pillen.
 *
 * Diese Datei wird **zuletzt** geladen und setzt sich über die älteren
 * Designrunden in app.css und employee.css hinweg (V23, V26, das violette
 * Verwaltungsthema). Die Selektoren beginnen deshalb mit body.<app>, um
 * deren Gewicht zu schlagen. Neue Farben gehören hierher, nicht dorthin.
 */

:root {
    --b-grund: #F7F4EE;
    --b-karte: #FFFFFF;
    --b-sand: #FCFBF8;
    --b-tinte: #1F1B16;
    --b-leise: #6B645B;
    --b-linie: #E6E0D6;
    --b-trenner: #EFEAE1;
    --b-fuell: #E9E2D6;
    --b-akzent: #B04D14;
    --b-akzent-dunkel: #9A4413;
    --b-warm: #FBEBDD;
    --b-gruen: #2F6F5E;
    --b-gruen-weich: #E4F0EB;
    --b-rot: #A63D2F;
    --b-rot-weich: #F9E3E0;
    --b-gelb: #8A5A12;
    --b-gelb-weich: #FAF0DA;
    --b-tafel: #1F1B16;
    --b-tafel-schrift: #9BE3A8;
    --b-radius: 18px;
    --b-serif: "Praxis Next", system-ui, -apple-system, "Segoe UI", sans-serif;   /* Praxis Next auch für Überschriften (03.10.2026), vorher Fraunces */
    --b-sans: "Praxis Next", system-ui, -apple-system, "Segoe UI", sans-serif;   /* vorher Manrope */
}

/* ======================================================================
   Verwaltung
   ====================================================================== */

body.admin-dashboard-app {
    --admin-ink: var(--b-tinte);
    --admin-muted: var(--b-leise);
    --admin-line: var(--b-linie);
    --admin-canvas: var(--b-grund);
    --admin-green: var(--b-gruen);
    --admin-radius: var(--b-radius);
    --admin-shadow: none;
    --verf-ja: var(--b-gruen);
    --verf-ja-soft: var(--b-gruen-weich);
    --verf-vielleicht: var(--b-gelb);
    --verf-vielleicht-soft: var(--b-gelb-weich);
    --verf-nein: var(--b-rot);
    --verf-nein-soft: var(--b-rot-weich);
    background: var(--b-grund);
    color: var(--b-tinte);
    font-family: var(--b-sans);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
body.admin-dashboard-app :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--b-akzent); outline-offset: 2px; }
body.admin-dashboard-app input[type="checkbox"], body.admin-dashboard-app input[type="radio"] { accent-color: var(--b-akzent); }
body.admin-dashboard-app a { color: var(--b-akzent); }
body.admin-dashboard-app a:hover { color: var(--b-akzent-dunkel); }

/* Testinstanz-Hinweis (Cloud-Auftrag A, 26.09.2026): unübersehbar auf jeder
   Seite, wenn app.testinstanz an ist - Heiko hielt sie sonst für die Live-App.
   Sticky statt fixed: reserviert von selbst seinen Platz, deckt also nichts
   zu - nur die eigene Kopfleiste (auch sticky) bekommt ihr "top" versetzt. */
.testinstanz-balken {
    position: sticky; top: 0; z-index: 500;
    display: flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 16px; box-sizing: border-box;
    background: var(--b-rot); color: #fff;
    font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.admin-dashboard-app.hat-testinstanz-balken .b-kopf { top: 30px; }

/* --- Kopfleiste ------------------------------------------------------ */
.b-kopf {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 28px;
    height: 64px; padding: 0 40px; box-sizing: border-box;
    background: var(--b-karte); border-bottom: 1px solid var(--b-linie);
}
body.admin-dashboard-app .b-marke {
    display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
    font-family: var(--b-serif); font-size: 20px; font-weight: 600; color: var(--b-tinte); text-decoration: none;
}
.b-marke-zeichen { width: 26px; height: 26px; border-radius: 8px; background: var(--b-akzent); }
.b-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
body.admin-dashboard-app .b-nav > a, .b-nav-mehr > summary {
    padding: 8px 14px; border-radius: 999px; color: var(--b-leise); font-weight: 600; font-size: 14px;
    text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none;
}
.b-nav-mehr > summary::-webkit-details-marker { display: none; }
.b-nav-mehr > summary::after { content: " ▾"; font-size: 11px; }
body.admin-dashboard-app .b-nav > a:hover, .b-nav-mehr > summary:hover { color: var(--b-tinte); background: var(--b-grund); }
body.admin-dashboard-app .b-nav > a[aria-current="page"], .b-nav-mehr > summary[aria-current="page"] { background: var(--b-grund); color: var(--b-tinte); }
.b-nav-mehr, .b-konto { position: relative; }
.b-nav-menue {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; display: grid; min-width: 220px; padding: 6px;
    background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: 14px; box-shadow: 0 16px 36px rgba(31, 27, 22, .12);
}
.b-nav-menue.is-rechts { left: auto; right: 0; }
body.admin-dashboard-app .b-nav-menue a, .b-nav-menue button {
    display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none;
    color: var(--b-tinte); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
body.admin-dashboard-app .b-nav-menue a:hover, .b-nav-menue button:hover, body.admin-dashboard-app .b-nav-menue a[aria-current="page"] { background: var(--b-grund); }
.b-nav-menue form { margin: 0; display: block; }
.b-konto-name { padding: 8px 12px 6px; color: var(--b-leise); font-size: 12px; font-weight: 700; }
.b-kopf-rechts { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.b-konto > summary {
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--b-fuell); color: var(--b-tinte); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none;
}
.b-konto > summary::-webkit-details-marker { display: none; }

/* --- Knöpfe: Pillen ---------------------------------------------------- */
body.admin-dashboard-app :is(.b-knopf, .admin-primary-action, .admin-secondary-action, button.primary, .primary, .job-route-again) {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 40px; padding: 9px 18px; border-radius: 999px;
    font-family: var(--b-sans); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: none;
}
body.admin-dashboard-app :is(.b-knopf.is-akzent, .admin-primary-action, button.primary, .primary) {
    background: var(--b-akzent); border: 1px solid var(--b-akzent); color: #fff;
}
body.admin-dashboard-app :is(.b-knopf.is-akzent, .admin-primary-action, button.primary, .primary):hover {
    background: var(--b-akzent-dunkel); border-color: var(--b-akzent-dunkel); color: #fff;
}
body.admin-dashboard-app :is(.admin-secondary-action, .job-route-again) {
    background: var(--b-karte); border: 1px solid var(--b-linie); color: var(--b-tinte);
}
body.admin-dashboard-app :is(.admin-secondary-action, .job-route-again):hover { border-color: var(--b-tinte); color: var(--b-tinte); background: var(--b-karte); }

/* --- Seitenaufbau ----------------------------------------------------- */
body.admin-dashboard-app .container {
    width: min(1360px, calc(100% - 80px)); margin: 32px auto 56px; padding: 0;
}
body.admin-dashboard-app :is(.admin-dashboard-heading h1, .admin-page-heading h1, .container > h1) {
    margin: 0; font-family: var(--b-serif); font-size: 32px; font-weight: 500; letter-spacing: -.01em; color: var(--b-tinte);
}
body.admin-dashboard-app .admin-page-heading p, body.admin-dashboard-app .admin-dashboard-heading p { color: var(--b-leise); font-size: 15px; }
body.admin-dashboard-app :is(h2, h3) { font-family: var(--b-serif); font-weight: 500; letter-spacing: 0; color: var(--b-tinte); }
body.admin-dashboard-app :is(.admin-form-surface h2, .offer-grid h2, .admin-team-planner-heading h2, .admin-section-heading h2, .admin-pending-responses h2, .catalog-form h2, .services-form h2) {
    font-family: var(--b-serif); font-size: 20px; font-weight: 500; letter-spacing: 0;
}
body.admin-dashboard-app .admin-kicker { color: var(--b-akzent); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body.admin-dashboard-app .admin-back-link { color: var(--b-leise); font-weight: 600; font-size: 13px; text-decoration: none; }
body.admin-dashboard-app .admin-back-link:hover { color: var(--b-tinte); }
body.admin-dashboard-app :is(.hint, .field-note, .offer-hint) { color: var(--b-leise); }

/* --- Karten ------------------------------------------------------------ */
body.admin-dashboard-app :is(.admin-roster-wrap, .admin-form-surface, .admin-detail-summary, .admin-team-planner, .admin-pending-responses, .planning-workspace > section, .offer-caveats, .items-summe, .job-toll-form) {
    background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: var(--b-radius); box-shadow: none;
}
body.admin-dashboard-app :is(.admin-team-picker-dialog, .admin-team-picker-sheet) { border-radius: 20px; background: var(--b-karte); }
body.admin-dashboard-app .admin-team-picker-dialog::backdrop { background: rgba(31, 27, 22, .36); backdrop-filter: none; }
body.admin-dashboard-app .offer-caveats { background: var(--b-warm); border-color: #EFD2B9; }
body.admin-dashboard-app .offer-caveats h2 { color: var(--b-akzent-dunkel); }
body.admin-dashboard-app .offer-caveats.is-gut { background: var(--b-gruen-weich); border-color: #C5DED4; }

/* --- Felder ------------------------------------------------------------ */
body.admin-dashboard-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    border: 1px solid var(--b-linie); border-radius: 12px; background: var(--b-karte); color: var(--b-tinte);
    font-family: var(--b-sans); font-size: 14px; box-shadow: none;
}
body.admin-dashboard-app :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { border-color: var(--b-akzent); outline: 2px solid rgba(194, 87, 26, .18); outline-offset: 0; }
body.admin-dashboard-app input[readonly] { background: var(--b-sand); color: var(--b-leise); }
body.admin-dashboard-app label { color: var(--b-leise); font-weight: 600; }
body.admin-dashboard-app fieldset legend { font-family: var(--b-serif); font-size: 19px; font-weight: 500; color: var(--b-tinte); }
body.admin-dashboard-app input[data-vorschlag] { background: var(--b-warm); border-color: #EFD2B9; }

/* --- Tabellen ----------------------------------------------------------- */
body.admin-dashboard-app :is(.admin-roster th, .admin-people-table th, .admin-detail-table th, .jobs-table th, .catalog-table th) {
    color: var(--b-leise); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
body.admin-dashboard-app :is(.admin-roster tbody tr, .admin-people-table tbody tr, .admin-detail-table tbody tr, .jobs-table tbody tr):hover { background: var(--b-sand); }
body.admin-dashboard-app :is(table td, table th) { border-color: var(--b-trenner); }
body.admin-dashboard-app .admin-avatar { background: var(--b-fuell); color: var(--b-tinte); font-weight: 700; }

/* --- Monatsumschalter, Kennzahlen, Hinweise ------------------------------- */
body.admin-dashboard-app :is(.admin-month-switcher a, .admin-month-switcher strong) {
    background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: 999px; color: var(--b-tinte);
}
body.admin-dashboard-app .admin-month-summary strong,
body.admin-dashboard-app .offer-variant-price,
body.admin-dashboard-app .items-summe strong { font-family: var(--b-serif); font-weight: 500; }
body.admin-dashboard-app .notice { border-radius: 14px; border: 1px solid var(--b-linie); background: var(--b-karte); font-weight: 600; }
body.admin-dashboard-app .notice-success { background: var(--b-gruen-weich); border-color: #C5DED4; color: var(--b-gruen); }
body.admin-dashboard-app .notice-error { background: var(--b-rot-weich); border-color: #EFC9C3; color: var(--b-rot); }

/* --- Planung: Kalender und Aufträge des Tages ------------------------------ */
body.admin-dashboard-app .calendar-day { border-radius: 14px; border-color: var(--b-linie); background: var(--b-karte); }
body.admin-dashboard-app .calendar-day.is-selected { border: 2px solid var(--b-akzent); }
body.admin-dashboard-app .calendar-day.is-planned { background: var(--b-gruen-weich); border-color: #C5DED4; }
body.admin-dashboard-app .calendar-day.is-draft { background: var(--b-warm); border-color: #EFD2B9; }
body.admin-dashboard-app .planning-job { border-radius: 16px; border-color: var(--b-linie); }
body.admin-dashboard-app .planning-job.is-active { border-color: var(--b-akzent); box-shadow: 0 0 0 1px var(--b-akzent); }
body.admin-dashboard-app .planning-job strong { font-family: var(--b-serif); font-size: 16px; font-weight: 500; }
body.admin-dashboard-app .planning-auftrag { background: var(--b-sand); border-color: var(--b-linie); }
/* Tagesplanung als Overlay statt Dauerformular (Paket D, 27.09.2026): die
   Karten-Optik von .admin-team-planner kommt jetzt vom Overlay selbst. */
body.admin-dashboard-app .admin-planning-dialog .admin-team-planner {
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    border-radius: 0 !important; background: none !important; box-shadow: none !important;
}
body.admin-dashboard-app .admin-planning-dialog .admin-team-planner-heading {
    margin-bottom: 18px !important; flex-direction: row !important; align-items: flex-start !important;
}

/* --- Auftrag, Angebot, Stände --------------------------------------------- */
body.admin-dashboard-app .job-team-list li.is-accepted small { color: var(--b-gruen); }
body.admin-dashboard-app .offer-variant-db { color: var(--b-gruen); }
body.admin-dashboard-app .offer-decided { background: var(--b-gruen-weich); color: var(--b-gruen); }
body.admin-dashboard-app .offer-decided.is-loss, body.admin-dashboard-app .offer-variant.is-loss .offer-variant-db { color: var(--b-rot); }

@media (max-width: 1100px) {
    .b-kopf { gap: 16px; padding: 0 20px; }
    .b-nav { overflow-x: auto; scrollbar-width: none; }
    .b-nav::-webkit-scrollbar { display: none; }
    body.admin-dashboard-app .b-knopf.is-akzent { padding: 9px 14px; }
}
@media (max-width: 720px) {
    body.admin-dashboard-app .container { width: calc(100% - 32px); margin-top: 20px; }
    body.admin-dashboard-app :is(.admin-dashboard-heading h1, .admin-page-heading h1) { font-size: 26px; }
}

/* ======================================================================
   Mitarbeiter-App
   ====================================================================== */

body.employee-app {
    --ink: var(--b-tinte);
    --muted: var(--b-leise);
    --canvas: var(--b-grund);
    --surface: var(--b-karte);
    --line: var(--b-linie);
    --green: var(--b-gruen);
    --danger: var(--b-rot);
    --card-radius: 20px;
    --card-shadow: none;
    background: var(--b-grund);
    color: var(--b-tinte);
    font-family: var(--b-sans);
}
body.employee-app :where(button, a, input, textarea, select, summary):focus-visible { outline: 3px solid rgba(194, 87, 26, .45); outline-offset: 3px; }

/* Überschrift: links, Fraunces, darüber leise die Zeile. */
body.employee-app .mobile-page-header { text-align: left; justify-content: flex-start; }
body.employee-app .mobile-page-header h1 { font-family: var(--b-serif); font-size: 28px; font-weight: 500; letter-spacing: -.01em; color: var(--b-tinte); }
body.employee-app .mobile-page-header p { color: var(--b-leise); font-size: 14px; font-weight: 600; }
body.employee-app :is(h2, h3) { font-family: var(--b-serif); font-weight: 500; letter-spacing: 0; }
body.employee-app .recent-history > header h2 { font-family: var(--b-serif); font-size: 21px; font-weight: 500; }

/* Karten */
body.employee-app :is(.today-status, .recent-card, .deployment-featured, .deployment-row, .heute-einsatz, .stand-karte, .availability-prompt, .empty-state, .more-card, .more-list, .archive-day) {
    background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: 20px; box-shadow: none;
}

/* Reiterleiste: vier Reiter, der aktive mit warmer Pille */
body.employee-app .mobile-tabbar {
    grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--b-karte); border-top: 1px solid var(--b-linie);
}
body.employee-app .mobile-tab { gap: 3px; font-size: 11px; font-weight: 600; color: var(--b-leise) !important; }
body.employee-app .mobile-tab .ph { font-size: 22px; }
body.employee-app .mobile-tab-icon { display: flex; padding: 3px 16px; border-radius: 999px; }
body.employee-app .mobile-tab.is-active { color: var(--b-tinte) !important; font-weight: 700; }
body.employee-app .mobile-tab.is-active .mobile-tab-icon { background: var(--b-warm); color: var(--b-akzent); }

/* Stempeluhr: dunkler Hauptknopf, Laufzeit in Fraunces, Grün für "läuft" */
body.employee-app .focus-clock .clock-action { background: var(--b-tinte); color: #fff; border: 0; }
body.employee-app .focus-clock.is-running .clock-action { background: var(--b-rot-weich); color: var(--b-rot); }
body.employee-app .clock-action-label { font-weight: 700; }
body.employee-app .focus-clock.is-running .clock-state { color: var(--b-gruen); font-weight: 600; }
body.employee-app .today-content b { font-family: var(--b-serif); font-weight: 500; }

/* Am Umzugstag steht die Uhr in einer schmalen Leiste oben, nicht als große
   Scheibe unten (Designprüfung 26.09.2026, Punkt 1) - dieselben Klassen,
   dieselbe Logik in app.js, nur die Form ändert sich. Die alten Designrunden
   in employee.css setzen auf .focus-clock-module ein eigenes Spaltenraster
   (u. a. 52px erste Spalte) - das galt einem anderen Aufbau und passt hier
   nicht, deshalb zurückgesetzt. */
body.employee-app .focus-clock-module:has(.focus-clock.is-schmal) {
    display: block !important;
    /* Die Leiste ist selbst die Karte - keine Karte um die Karte (26.09.2026). */
    padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important;
}
body.employee-app .focus-clock.is-schmal {
    position: relative; display: flex !important; flex-direction: row; align-items: center;
    justify-content: space-between; gap: 10px; align-self: stretch !important;
    width: 100% !important; max-width: none !important; height: auto; aspect-ratio: auto !important;
    box-sizing: border-box; margin: 0 0 16px; padding: 10px 14px !important; border: 1px solid var(--b-linie) !important;
    border-radius: 16px; background: var(--b-karte); box-shadow: none; overflow: visible;
}
/* Der Ring (Wasser-Animation für die große Uhr) gehört hier nicht hin. */
body.employee-app .focus-clock.is-schmal::before,
body.employee-app .focus-clock.is-schmal::after { content: none !important; display: none !important; }
body.employee-app .focus-clock.is-schmal .today-status {
    position: relative; z-index: 2; width: auto; min-width: 0; min-height: 0; margin: 0; padding: 0;
    display: flex; align-items: center; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
    flex: 1 1 auto;
}
body.employee-app .focus-clock.is-schmal .today-content { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; width: auto; row-gap: 0; }
body.employee-app .focus-clock.is-schmal .clock-state { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--b-leise); white-space: nowrap; }
body.employee-app .focus-clock.is-schmal.is-running .clock-state { color: var(--b-gruen); }
body.employee-app .focus-clock.is-schmal .today-content b { font-size: 14px; white-space: nowrap; }
body.employee-app .focus-clock.is-schmal .today-content b::before { content: "· "; font-weight: 400; color: var(--b-leise); }
body.employee-app .focus-clock.is-schmal .clock-job-choice { font-size: 12px; }
body.employee-app .focus-clock.is-schmal .clock-action {
    width: auto !important; height: auto !important; min-height: 40px !important; flex: none;
    display: inline-flex; align-items: center; gap: 6px; padding: 0 14px !important; border-radius: 999px; white-space: nowrap;
}
body.employee-app .focus-clock.is-schmal .clock-action .ph-fill { font-size: 17px !important; }
body.employee-app .focus-clock.is-schmal .clock-action-label { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 0; color: inherit; }

/* Knöpfe */
body.employee-app :is(.assignment-accept, .stand-weiter) { background: var(--b-akzent); border: 1px solid var(--b-akzent); color: #fff; border-radius: 999px; }
body.employee-app .assignment-decline { border-radius: 999px; border: 1px solid var(--b-linie); background: var(--b-karte); color: var(--b-tinte); }
body.employee-app .stand-weiter { background: var(--b-tinte); border-color: var(--b-tinte); border-radius: 16px; }
body.employee-app :is(.history-add, .route-address .secondary-action, .einsatz-telefon, .deployment-route) { color: var(--b-akzent); }
body.employee-app .deployment-route { background: var(--b-warm); border-radius: 999px; }
body.employee-app .stand-aufgabe-knoepfe button.is-fertig { background: var(--b-gruen); border-color: var(--b-gruen); }
body.employee-app .stand-balken span { background: var(--b-akzent); }
body.employee-app .stand-prozent, body.employee-app .heute-einsatz-zeit { font-family: var(--b-serif); font-weight: 500; }

/* Heute: der Einsatz des Tages mit warmem Kopf wie im Entwurf */
body.employee-app .heute-einsatz { border-radius: 20px; }
body.employee-app .heute-einsatz-text strong { font-family: var(--b-serif); font-size: 17px; font-weight: 500; }
body.employee-app .stand-karte { border-top-left-radius: 20px; border-top-right-radius: 20px; }

/* Hinweise */
body.employee-app .notice { border-radius: 16px; }
body.employee-app .notice-success { background: var(--b-gruen-weich); color: var(--b-gruen); }
body.employee-app .notice-error { background: var(--b-rot-weich); color: var(--b-rot); }

/* ======================================================================
   Anmeldung
   ====================================================================== */
body.login-app { --ink: var(--b-tinte); --muted: var(--b-leise); --canvas: var(--b-grund); --green: var(--b-akzent); background: var(--b-grund); font-family: var(--b-sans); }
body.login-app .login-heading h1 { font-family: var(--b-serif); font-weight: 500; letter-spacing: -.01em; }
body.login-app .login-field { border-color: var(--b-linie); border-radius: 14px; }
body.login-app .login-field:focus-within { border-color: var(--b-akzent); box-shadow: 0 0 0 3px rgba(194, 87, 26, .15); }
body.login-app .login-submit, body.login-app .login-submit:active { background: var(--b-akzent); border-radius: 999px; font-weight: 700; }

/* ======================================================================
   Nachgeschärft nach dem ersten Blick
   ====================================================================== */

/* Der Grund reicht bis unten - auch wenn die Seite kürzer ist als das Fenster. */
html:has(body.admin-dashboard-app), html:has(body.employee-app), html:has(body.login-app) { background: var(--b-grund); }

/* Abschnittsüberschriften in Formularen stehen in der Karte, nicht auf
   ihrer Linie (so zeichnet der Browser <legend> sonst). */
body.admin-dashboard-app fieldset.admin-form-surface > legend {
    float: left; width: 100%; margin: 0 0 14px; padding: 0;
}
body.admin-dashboard-app fieldset.admin-form-surface > legend + * { clear: both; }
body.admin-dashboard-app fieldset legend small { display: block; margin-top: 2px; font-family: var(--b-sans); font-size: 12.5px; font-weight: 500; color: var(--b-leise); }

/* Mitarbeiter-App: Kopf wie im Entwurf - Datum oben, Gruß darunter, links. */
body.employee-app .home-page-header { min-height: 0; margin: 0 0 20px; padding: 8px 0 0; text-align: left; justify-content: flex-start; }
body.employee-app .home-page-header > * { transform: none; }
body.employee-app .home-page-header > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
body.employee-app .home-page-header h1 { font-family: var(--b-serif); font-size: 28px; font-weight: 500; letter-spacing: -.01em; }
body.employee-app .home-page-header p { margin: 0; font-size: 13px; }
body.employee-app .mobile-page-back { color: var(--b-tinte); }
body.employee-app :is(.recent-card .ph, .recent-card i, .history-add i) { color: var(--b-akzent); }

/* Der Einsatz des Tages: warmer Kopf wie im Entwurf, darunter die Karte. */
body.employee-app .heute-einsaetze { margin: 0 0 18px; }
body.employee-app .heute-einsatz { background: var(--b-warm); border-color: #EFD2B9; }
body.employee-app .heute-einsatz-zeit { color: var(--b-akzent); }
body.employee-app .heute-einsatz .ph { color: var(--b-akzent); }

/* ======================================================================
   Übersicht der Verwaltung (Entwurf B-Dashboard)
   ====================================================================== */
.b-uebersicht { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-bottom: 40px; align-items: start; }
.b-uebersicht-haupt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.b-uebersicht-seite { display: grid; gap: 16px; }
.b-gruss h1 { font-family: var(--b-serif); font-weight: 500; font-size: 36px; letter-spacing: -0.01em; margin: 0; color: var(--b-tinte); }
.b-gruss p { margin: 6px 0 0; color: var(--b-leise); font-size: 15px; }
.b-leise { color: var(--b-leise); font-size: 14px; }
.b-karte { background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: var(--b-radius); padding: 20px 22px; }
.b-karte h2, .b-abschnitt-kopf h2 { font-family: var(--b-serif); font-weight: 500; font-size: 20px; margin: 0 0 12px; color: var(--b-tinte); }
.b-abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.b-abschnitt-kopf a { color: var(--b-akzent-dunkel); font-weight: 600; font-size: 14px; text-decoration: none; }
.b-leer { background: var(--b-karte); border: 1px dashed var(--b-linie); border-radius: var(--b-radius); padding: 22px; color: var(--b-leise); margin: 0; }
.b-leer a { color: var(--b-akzent-dunkel); font-weight: 600; }

.b-heute { display: grid; background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: var(--b-radius); overflow: hidden; }
.b-heute-haupt { padding: 22px 24px; display: grid; gap: 10px; min-width: 0; }
.b-heute-zeile { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.b-heute h2 { font-family: var(--b-serif); font-weight: 500; font-size: 26px; margin: 0; }
.b-heute h2 a { color: var(--b-tinte); text-decoration: none; }
.b-heute h2 a:hover { color: var(--b-akzent-dunkel); }
.b-marker { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; }
.b-marker > span { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.b-marker.is-laeuft { background: var(--b-gruen-weich); color: var(--b-gruen); }
.b-marker.is-gut { background: var(--b-gruen-weich); color: var(--b-gruen); }
.b-marker.is-leise { background: var(--b-trenner); color: var(--b-leise); }
.b-strecke { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 600; color: var(--b-tinte); }
.b-strecke i { color: var(--b-akzent); }

.b-plakette { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--b-trenner); color: var(--b-leise); white-space: nowrap; }
.b-plakette.is-gut { background: var(--b-gruen-weich); color: var(--b-gruen); }
.b-plakette.is-offen { background: var(--b-gelb-weich); color: var(--b-gelb); }
.b-plakette.is-fehlt { background: var(--b-rot-weich); color: var(--b-rot); }

.b-aufgabe { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--b-trenner); color: var(--b-tinte); text-decoration: none; }
.b-aufgabe:first-of-type { border-top: 0; padding-top: 2px; }
.b-aufgabe > span:last-child { display: grid; gap: 2px; }
.b-aufgabe strong { font-size: 14px; }
.b-aufgabe small { color: var(--b-leise); font-size: 13px; }
.b-aufgabe:hover strong { color: var(--b-akzent-dunkel); }
.b-punkt { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--b-leise); }
.b-aufgabe.is-offen .b-punkt { background: var(--b-gelb); }
.b-aufgabe.is-fehlt .b-punkt { background: var(--b-rot); }
.b-aufgabe.is-angebot .b-punkt { background: var(--b-akzent); }
.b-aufgabe.is-geaendert .b-punkt { background: var(--b-gruen); }
.b-aufgabe.is-push .b-punkt { background: var(--b-leise); }
.b-aufgabe.is-fehler .b-punkt { background: var(--b-rot); }
.b-aufgabe.is-angesehen .b-punkt { background: var(--b-gruen); }
.b-aufgabe.is-ungeoeffnet .b-punkt { background: var(--b-gelb); }
.b-aufgabe.is-angenommen .b-punkt, .b-aufgabe.is-bewertung .b-punkt { background: var(--b-gruen); }
.b-aufgabe.is-bewertung-schlecht .b-punkt { background: var(--b-rot); }
.b-kennzahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.b-kennzahlen div { background: var(--b-sand); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; }
.b-kennzahlen span { color: var(--b-leise); font-size: 13px; }
.b-kennzahlen strong { font-family: var(--b-serif); font-weight: 500; font-size: 22px; }

@media (max-width: 1080px) {
    .b-uebersicht { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .b-gruss h1 { font-size: 28px; }
}
body.admin-dashboard-app .b-aufgabe strong { color: var(--b-tinte); }
body.admin-dashboard-app .b-aufgabe:hover strong { color: var(--b-akzent-dunkel); }

/* Planungskalender: der Kundenname bricht zweizeilig um statt abzuschneiden
   (V6, Paket D, 27.09.2026), Personenzahl und Zustand bleiben einzeilig. */
body.admin-dashboard-app .calendar-day { min-width: 0; overflow: hidden; }
body.admin-dashboard-app .calendar-day > span {
    max-width: 100%; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.25;
}
body.admin-dashboard-app .calendar-day > small { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) {
    body.admin-dashboard-app .calendar-day > span,
    body.admin-dashboard-app .calendar-day > small:not(.calendar-state):not(.calendar-availability) { display: none; }
}

/* Häkchen bleiben Häkchen - ältere Regeln ziehen Eingaben in Zeilen auf volle Breite. */
body.admin-dashboard-app input[type="checkbox"], body.admin-dashboard-app input[type="radio"] { width: 20px; height: 20px; min-height: 0; flex: none; margin: 0; padding: 0; box-shadow: none; }
body.admin-dashboard-app label.is-check { display: flex; flex-direction: row; align-items: center; gap: 10px; align-self: end; min-height: 46px; font-weight: 600; }

/* ======================================================================
   Mitarbeiter-App: Einsätze (Entwurf B-Einsaetze)
   ====================================================================== */
.b-wochenleiste { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 16px; }
.b-wochenleiste > * { display: grid; justify-items: center; gap: 2px; padding: 10px 0 8px; border-radius: 14px; background: transparent; border: 0; font: inherit; color: var(--b-tinte); }
.b-wochenleiste small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--b-leise); }
.b-wochenleiste strong { font-family: var(--b-serif); font-weight: 500; font-size: 20px; line-height: 1.1; }
.b-wochenleiste i { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.b-wochenleiste .hat-einsatz i { background: var(--b-akzent); }
.b-wochenleiste button { cursor: pointer; }
.b-wochenleiste .is-vorbei { opacity: .5; }
.b-wochenleiste .is-heute { background: var(--b-tinte); color: #fff; opacity: 1; }
.b-wochenleiste .is-heute small { color: rgba(255, 255, 255, .7); }
.b-wochenleiste .is-heute.hat-einsatz i { background: #F0A36E; }
body.employee-app .deployment-kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; }
body.employee-app .deployment-kunde { display: block; font-family: var(--b-serif); font-weight: 500; font-size: 20px; line-height: 1.25; color: var(--b-tinte); margin-top: 4px; }
body.employee-app .deployment-row .deployment-kunde { font-size: 17px; }
body.employee-app .deployment-strecke { display: block; font-weight: 600; color: var(--b-tinte); }
body.employee-app .deployment-row-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
body.employee-app .deployment-row .deployment-kopfzeile strong { font-size: 14px; color: var(--b-leise); font-weight: 700; }
body.employee-app .deployment-featured-open { display: grid; gap: 6px; text-align: left; }
body.employee-app .availability-day-label { white-space: nowrap; min-width: 58px; }
/* "Zeiten" (Cloud-Auftrag M7, 27.09.2026): Wochen statt Monate, je Tag eine
   schmale Zeile statt der Karte mit Datum und Dauer. */
body.employee-app .archive-week { margin: 28px 0; }
body.employee-app .archive-week > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 12px; }
body.employee-app .archive-week > header h2 { margin: 0; font-size: 15px; font-weight: 550; color: var(--b-leise); }
body.employee-app .archive-week > header strong { font-size: 14px; font-weight: 600; color: var(--b-tinte); white-space: nowrap; }
body.employee-app .archive-day { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 14px 16px; font-size: 14px; }
body.employee-app .archive-day-zeile { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; }
body.employee-app .archive-day > i { flex-shrink: 0; color: var(--b-leise); font-size: 18px; }
/* Heute: Einsatzkopf und Fortschritt sind eine Karte. */
body.employee-app .heute-einsatz:has(+ .stand-karte) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
body.employee-app .heute-einsatz + .stand-karte { margin-top: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
body.employee-app .stand-kopf strong { font-family: var(--b-serif); font-weight: 500; font-size: 20px; }
/* Die vier Schritte als Leiste, wie in der Übersicht der Verwaltung. */
body.employee-app .stand-schritte { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; border: 0; }
body.employee-app .stand-schritte li { display: grid; align-content: start; gap: 2px; padding: 8px 0 0; border: 0; border-top: 4px solid var(--b-fuell); font-size: 11.5px; line-height: 1.3; color: var(--b-leise); }
body.employee-app .stand-schritte li.is-erledigt { border-top-color: var(--b-akzent); color: var(--b-tinte); font-weight: 600; }
body.employee-app .stand-schritte small { font-weight: 400; color: var(--b-leise); }
body.employee-app .stand-schritte li.is-erledigt span::before { content: none; }

/* ======================================================================
   Zeitplan (Auftrag, Tageskarte der Mitarbeitenden) - 24.09.2026
   ====================================================================== */
.zeitplan { list-style: none; margin: 4px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--b-linie); display: grid; }
.zeitplan-punkt { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; }
.zeitplan-punkt::before { content: ""; position: absolute; left: -21px; top: 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--b-karte); border: 2px solid var(--b-akzent); }
.zeitplan-punkt.is-treff::before, .zeitplan-punkt.is-heim::before { border-color: var(--b-leise); }
.zeitplan-punkt > strong { font-family: var(--b-serif); font-weight: 500; font-size: 20px; color: var(--b-tinte); font-variant-numeric: tabular-nums; }
.zeitplan-punkt > span { display: grid; gap: 2px; color: var(--b-tinte); font-weight: 600; font-size: 14px; }
.zeitplan-punkt small { font-weight: 400; color: var(--b-leise); font-size: 12px; }
.zeitplan-punkt .zeitplan-tag { display: inline-block; justify-self: start; font-weight: 700; color: var(--b-akzent-dunkel); background: var(--b-warm); border-radius: 999px; padding: 1px 8px; }
.zeitplan-dauer { display: flex; gap: 8px; margin-left: 68px; padding: 2px 0; font-size: 13px; color: var(--b-leise); }
.zeitplan-dauer span:first-child { font-weight: 700; }
.zeitplan-gesamt { margin: 10px 0 0; font-size: 14px; color: var(--b-leise); }
.zeitplan-gesamt strong { color: var(--b-tinte); }
.zeitplan-weicht { display: block; margin-top: 4px; color: var(--b-gelb); font-weight: 700; font-size: 12px; }
.zeitplan-heim, .zeitplan-hinweis { grid-column: 1 / -1; margin: 6px 0 0; font-size: 14px; color: var(--b-leise); }
.zeitplan-heim strong { color: var(--b-tinte); }
.zeitplan-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--b-gelb); font-weight: 600; }
.stand-heim { margin: 10px 0 0; font-size: 13px; color: var(--b-leise); }
.stand-heim strong { color: var(--b-tinte); }
body.employee-app .stand-schritte li:not(.is-erledigt) small { color: var(--b-akzent-dunkel); font-weight: 600; }

/* Ablauf am Umzugstag (Mitarbeitende): sechs Punkte untereinander,
   Treffpunkt bis zurück im Fuchsbau - gleiche Reihenfolge wie überall. */
body.employee-app .stand-ablauf { list-style: none; margin: 14px 0 0; padding: 12px 0 0 16px; border-top: 1px solid var(--b-trenner); display: grid; gap: 0; }
body.employee-app .stand-ablauf li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 14px; color: var(--b-leise); }
body.employee-app .stand-ablauf li::before { content: ""; position: absolute; left: -16px; top: 11px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--b-fuell); background: var(--b-karte); }
body.employee-app .stand-ablauf li::after { content: ""; position: absolute; left: -11px; top: 22px; bottom: -8px; width: 2px; background: var(--b-fuell); }
body.employee-app .stand-ablauf li:last-child::after { content: none; }
body.employee-app .stand-ablauf li.is-erledigt { color: var(--b-tinte); }
body.employee-app .stand-ablauf li.is-erledigt::before { background: var(--b-akzent); border-color: var(--b-akzent); }
body.employee-app .stand-ablauf li.is-erledigt::after { background: var(--b-akzent); }
body.employee-app .stand-ablauf li.is-jetzt { color: var(--b-tinte); font-weight: 700; }
body.employee-app .stand-ablauf li.is-jetzt::before { border-color: var(--b-akzent); border-width: 3px; }
body.employee-app .stand-ablauf strong { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
body.employee-app .stand-ablauf li:not(.is-erledigt) strong { color: var(--b-akzent-dunkel); }

/* Angaben des Kunden auf der Seite "Umzugsgut" (Aufnahme, 24.09.2026) */
.aufnahme-bericht { display: grid; gap: 16px; }
.aufnahme-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.aufnahme-kopf h2 { margin: 0; }
.aufnahme-weg { font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--b-warm); color: var(--b-akzent-dunkel); }
.aufnahme-fakten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.aufnahme-fakten dt { color: var(--b-leise); }
.aufnahme-fakten dd { margin: 0; }
.aufnahme-notiz { white-space: pre-line; }
.aufnahme-raeume { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.aufnahme-raum { background: var(--b-sand); border: 1px solid var(--b-trenner); border-radius: 14px; padding: 12px 14px; }
.aufnahme-raum h3 { margin: 0 0 6px; font-family: var(--b-serif); font-weight: 500; font-size: 17px; }
.aufnahme-raum ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.aufnahme-offen { background: var(--b-gelb-weich); color: var(--b-gelb); border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.aufnahme-offen ul { margin: 6px 0 0; padding-left: 18px; }
.aufnahme-liste summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.aufnahme-liste pre { white-space: pre-wrap; font-family: var(--b-sans); font-size: 14px; background: var(--b-sand); border-radius: 12px; padding: 12px; }
.aufnahme-fotos { display: grid; gap: 14px; }
.aufnahme-fotoraum h3 { margin: 0 0 8px; font-size: 15px; }
.aufnahme-fotoraum h3 small { color: var(--b-leise); font-weight: 600; }
.aufnahme-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.aufnahme-raster a { display: block; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 10px; overflow: hidden; background: var(--b-fuell); }
.aufnahme-raster img { width: 100%; height: 100%; object-fit: cover; }

/* ======================================================================
   Auftrag: Kopf, Weg, nächster Schritt, Reiter, Überblick (24.09.2026)
   ====================================================================== */
.auftrag-kopf { display: grid; gap: 10px; margin-bottom: 22px; }
.auftrag-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.auftrag-titel h1 { margin: 0; font-family: var(--b-serif); font-weight: 500; font-size: clamp(28px, 4vw, 38px); line-height: 1.1; color: var(--b-tinte); }
.auftrag-status { font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--b-trenner); color: var(--b-leise); }
.auftrag-status.is-bestaetigt, .auftrag-status.is-laeuft { background: var(--b-gruen-weich); color: var(--b-gruen); }
.auftrag-status.is-angefragt { background: var(--b-gelb-weich); color: var(--b-gelb); }
.auftrag-status.is-erledigt, .auftrag-status.is-abgerechnet { background: var(--b-fuell); color: var(--b-tinte); }
.auftrag-fakten { margin: 0; color: var(--b-leise); font-size: 15px; }

.auftrag-weg { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.auftrag-weg li { display: grid; gap: 6px; font-size: 13px; color: var(--b-leise); }
.auftrag-weg li i { height: 5px; border-radius: 3px; background: var(--b-fuell); }
.auftrag-weg li.is-fertig { color: var(--b-tinte); }
.auftrag-weg li.is-fertig i { background: var(--b-gruen); }
.auftrag-weg li.is-jetzt { color: var(--b-tinte); font-weight: 800; }
.auftrag-weg li.is-jetzt i { background: var(--b-akzent); }
@media (max-width: 700px) { .auftrag-weg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.auftrag-naechstes { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 20px; margin-top: 6px; padding: 18px 20px; border-radius: var(--b-radius); background: var(--b-warm); border: 1px solid #EFD2B9; }
.auftrag-naechstes > div:first-child { display: grid; gap: 3px; max-width: 62ch; }
.auftrag-naechstes-marke { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--b-akzent-dunkel); }
.auftrag-naechstes strong { font-family: var(--b-serif); font-weight: 500; font-size: 22px; color: var(--b-tinte); }
.auftrag-naechstes p { margin: 0; color: var(--b-leise); font-size: 14.5px; }
.auftrag-naechstes-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.auftrag-naechstes-knoepfe form { margin: 0; }

.auftrag-reiter { display: flex; gap: 4px; overflow-x: auto; margin-top: 10px; padding-bottom: 2px; border-bottom: 1px solid var(--b-linie); scrollbar-width: none; }
.auftrag-reiter::-webkit-scrollbar { display: none; }
.auftrag-reiter a { flex: none; padding: 10px 14px; font-size: 14.5px; font-weight: 700; color: var(--b-leise); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.auftrag-reiter a:hover { color: var(--b-tinte); }
.auftrag-reiter a.is-aktiv { color: var(--b-tinte); border-bottom-color: var(--b-akzent); }
.auftrag-abschnitt { margin: 0; font-family: var(--b-serif); font-weight: 500; font-size: 24px; }

.auftrag-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.auftrag-kachel { display: grid; gap: 8px; align-content: start; background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: var(--b-radius); padding: 18px 20px; }
.auftrag-kachel.is-umzugsgut { grid-column: 1 / -1; background: var(--b-karte); border-color: var(--b-akzent); }
.auftrag-kachel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.auftrag-kachel-kopf h2 { margin: 0; font-family: var(--b-serif); font-weight: 500; font-size: 20px; }
.auftrag-kachel-kopf a { font-size: 13.5px; font-weight: 700; color: var(--b-akzent-dunkel); text-decoration: none; }
.auftrag-gross { margin: 0; font-family: var(--b-serif); font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--b-tinte); }
.auftrag-gross small { font-family: var(--b-sans); font-size: 13px; color: var(--b-leise); }
.auftrag-gross.is-leer { font-size: 22px; color: var(--b-leise); }
.auftrag-leise { margin: 0; color: var(--b-leise); font-size: 14px; }
.auftrag-hinweis { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--b-gelb-weich); color: var(--b-gelb); font-size: 13.5px; font-weight: 600; }
.auftrag-kachel-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.auftrag-name { margin: 0; font-weight: 700; font-size: 16px; color: var(--b-tinte); }
.auftrag-name small { font-weight: 500; color: var(--b-leise); }
.auftrag-kontakt { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.auftrag-kontakt li { display: flex; align-items: center; gap: 8px; }
.auftrag-kontakt i { color: var(--b-leise); }
.auftrag-kontakt a { color: var(--b-tinte); font-weight: 600; }
.auftrag-link { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--b-leise); }
.auftrag-ablauf, .auftrag-strecke { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.auftrag-ablauf dt, .auftrag-strecke dt { color: var(--b-leise); }
.auftrag-ablauf dd, .auftrag-strecke dd { margin: 0; font-variant-numeric: tabular-nums; }
.auftrag-team { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.auftrag-team small { color: var(--b-leise); }
.auftrag-team li.is-pending small { color: var(--b-gelb); }
.auftrag-team li.is-declined { color: var(--b-leise); text-decoration: line-through; }

/* Reiter "Einsatz": die Karten stehen nebeneinander über die ganze Breite */
.job-form-grid.is-einsatz { display: block; }
.job-form-grid.is-einsatz .job-form-main { display: none; }
.job-form-grid.is-einsatz .job-form-side { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.job-form-grid.is-kunde .job-form-side, .job-form-grid.is-kalkulation .job-form-side { align-content: start; }
body.admin-dashboard-app .b-knopf:not(.is-akzent) { background: var(--b-karte); border: 1px solid var(--b-linie); color: var(--b-tinte); }
body.admin-dashboard-app .b-knopf:not(.is-akzent):hover { border-color: var(--b-tinte); }
body.admin-dashboard-app .auftrag-reiter a { color: var(--b-leise); }
body.admin-dashboard-app .auftrag-reiter a:hover, body.admin-dashboard-app .auftrag-reiter a.is-aktiv { color: var(--b-tinte); }
body.admin-dashboard-app .auftrag-kachel { margin: 0; }
body.admin-dashboard-app .auftrag-kacheln { margin-bottom: 24px; }
.auftrag-status.is-geplant { background: var(--b-gruen-weich); color: var(--b-gruen); }
/* Umzugsgut: Kopf mit Telefonaufnahme, Einzelbearbeitung zum Aufklappen */
.items-kopf-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
body.admin-dashboard-app .items-kopf-rechts .items-summe { display: grid; justify-items: end; gap: 0; padding: 0; background: none; border: 0; min-width: 0; }
.items-kopf-rechts .items-summe strong { font-family: var(--b-serif); font-weight: 500; font-size: 26px; line-height: 1.1; }
.items-kopf-rechts .items-summe small { color: var(--b-leise); }
.items-bearbeiten { margin-top: 18px; }
.items-bearbeiten > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 18px; border: 1px dashed var(--b-linie); border-radius: var(--b-radius); background: var(--b-sand); }
.items-bearbeiten > summary::-webkit-details-marker { display: none; }
.items-bearbeiten > summary span { font-weight: 800; color: var(--b-tinte); }
.items-bearbeiten > summary span::before { content: "▸ "; color: var(--b-leise); }
.items-bearbeiten[open] > summary span::before { content: "▾ "; }
.items-bearbeiten > summary small { color: var(--b-leise); }
.items-bearbeiten[open] > summary { margin-bottom: 16px; }

/* Team im Auftrag einteilen (24.09.2026) */
.team-wahl { grid-column: 1 / -1; }
.team-anzahl { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 18px; }
.team-anzahl label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; color: var(--b-leise); }
.team-anzahl input { width: 90px; font-size: 18px; font-weight: 700; }
.team-anzahl .hint { flex: 1 1 280px; margin: 0; }
.team-vorschlag-hinweis { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--b-warm); color: var(--b-akzent-dunkel); font-size: 13.5px; font-weight: 600; }
.team-warnung { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--b-rot-weich); color: var(--b-rot); font-size: 13.5px; font-weight: 700; }
.team-kandidaten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.team-kandidaten li { border: 1.5px solid var(--b-linie); border-radius: 14px; background: var(--b-karte); }
.team-kandidaten li.is-gewaehlt { border-color: var(--b-akzent); background: var(--b-warm); }
.team-kandidaten li.is-belegt:not(.is-gewaehlt) { opacity: .6; }
.team-kandidaten label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; cursor: pointer; }
.team-name { font-weight: 700; flex: 1 1 auto; }
.team-c1 { font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 6px; background: var(--b-tinte); color: #fff; margin-left: 4px; }
.team-chip { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.team-chip.is-ja { background: var(--b-gruen-weich); color: var(--b-gruen); }
.team-chip.is-vielleicht { background: var(--b-gelb-weich); color: var(--b-gelb); }
.team-chip.is-nein { background: var(--b-rot-weich); color: var(--b-rot); }
.team-chip.is-offen { background: var(--b-trenner); color: var(--b-leise); }
.team-antwort, .team-belegt { width: 100%; padding-left: 30px; font-size: 12px; color: var(--b-leise); }
.team-antwort.is-accepted { color: var(--b-gruen); font-weight: 700; }
.team-antwort.is-declined, .team-belegt { color: var(--b-rot); }
.team-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.team-zaehler { font-weight: 800; color: var(--b-tinte); }

.auftrag-kachel.is-vorschlag { background: var(--b-sand); }
.auftrag-vorschlag { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.auftrag-vorschlag li { display: flex; gap: 10px; align-items: baseline; }
.auftrag-vorschlag i { color: var(--b-akzent); }
.auftrag-vorschlag small { color: var(--b-leise); margin-left: 4px; }
.auftrag-kachel-knoepfe form { margin: 0; }

/* Pünktlichkeitsmarke an erreichten Meilensteinen - wie auf der
   Anzeigetafel am Flughafen (24.09.2026). Nur im Guten. */
.p-marke { display: inline-block; margin-left: 6px; padding: 2px 7px 1px; border-radius: 4px; background: var(--b-tafel); color: var(--b-tafel-schrift); font: 700 10.5px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; }
.b-ablauf .p-marke { margin: 0; }
body.employee-app .stand-ablauf strong .p-marke { margin: 0 8px 0 0; }

/* Nachmeldung des Kunden auf der Team-Karte (24.09.2026) */
.stand-nachgemeldet { display: grid; gap: 2px; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--b-gelb-weich); color: var(--b-tinte); font-size: 14px; }
.stand-nachgemeldet strong { font-size: 13px; color: var(--b-gelb); }
.stand-nachgemeldet small { font-size: 12px; color: var(--b-rot); font-weight: 600; }
.stand-nachgemeldet.is-eng { background: var(--b-rot-weich); }
.hint.is-warnung { color: var(--b-rot); font-weight: 600; }
body.employee-app .stand-ablauf .stand-folgetag { font-size: 11px; font-weight: 600; color: var(--b-leise); }
.b-aufgabe.is-nachmeldung .b-punkt { background: var(--b-rot); }
.b-push form { display: grid; gap: 8px; justify-items: start; }
.b-push small { font-size: 13px; color: var(--b-leise); }

/* "So läuft dein nächster Einsatz" auf der Startseite (24.09.2026) -
   dieselben Perlen wie im Kundenlink */
body.employee-app .naechster-einsatz { display: grid; gap: 12px; margin: 0 0 16px; padding: 18px 18px 16px; background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: var(--b-radius); }
body.employee-app .naechster-einsatz h2 { margin: 0; font-family: var(--b-serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--b-tinte); }
body.employee-app .naechster-einsatz-kopf { margin: -4px 0 0; font-size: 14px; color: var(--b-leise); }
body.employee-app .naechster-einsatz-kopf strong { display: block; color: var(--b-tinte); font-weight: 700; }
body.employee-app .naechster-einsatz-antwort { justify-self: start; padding: 7px 14px; border-radius: 999px; background: var(--b-warm); color: var(--b-akzent-dunkel); font-size: 13px; font-weight: 700; text-decoration: none; }
body.employee-app .perlen { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
body.employee-app .perlen li { display: flex; gap: 12px; align-items: stretch; }
body.employee-app .perle { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; padding-top: 1px; }
body.employee-app .perle i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--b-linie); background: var(--b-karte); }
body.employee-app .perle b { width: 2px; flex-grow: 1; min-height: 14px; background: var(--b-linie); }
body.employee-app .perlen-text { display: flex; flex-direction: column; gap: 1px; padding-bottom: 12px; min-width: 0; }
body.employee-app .perlen-text strong { font-size: 15px; font-weight: 600; color: var(--b-tinte); }
body.employee-app .perlen-text span { font-size: 13px; color: var(--b-leise); overflow-wrap: anywhere; }
body.employee-app .naechster-einsatz-leise { margin: 0; font-size: 14px; color: var(--b-leise); }
body.employee-app .naechster-einsatz-mehr { justify-self: start; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--b-akzent-dunkel); text-decoration: none; }

/* Einsatzkarte ("Alles zum Einsatz", 24.09.2026) im Aufbau der Startseite */
body.employee-app .einsatz-karte .day-detail-header { margin-bottom: 16px; }
body.employee-app .einsatz-karte .day-detail-header .eyebrow { font-size: 13px; font-weight: 700; color: var(--b-leise); }
body.employee-app .einsatz-karte .day-detail-header h2 { font-family: var(--b-serif); font-weight: 500; font-size: 25px; line-height: 1.2; letter-spacing: 0; color: var(--b-tinte); overflow-wrap: anywhere; }
body.employee-app .einsatz-karte .day-detail-header h2:focus { outline: none; }
body.employee-app .einsatz-karte-unter { margin: 6px 0 0; font-size: 14px; color: var(--b-leise); }
body.employee-app .einsatz-karte-leise { margin: 4px 0 0; font-size: 13px; color: var(--b-leise); }
body.employee-app .einsatz-karte .assignment-response { margin: 0 0 6px; padding: 16px; border: 0; border-radius: 16px; background: var(--b-warm); }
body.employee-app .einsatz-karte .assignment-response p strong { font-family: var(--b-serif); font-weight: 500; font-size: 20px; color: var(--b-tinte); }
body.employee-app .einsatz-karte .assignment-response p span { color: var(--b-leise); }
body.employee-app .einsatz-karte .assignment-response button { border-radius: 999px; min-height: 46px; }
body.employee-app .einsatz-karte .assignment-decline { background: var(--b-karte); border: 1px solid var(--b-linie); color: var(--b-tinte); }
body.employee-app .einsatz-karte .einsatz-abschnitt { margin-top: 24px; }
body.employee-app .einsatz-karte .einsatz-abschnitt h3 { margin: 0 0 12px; font-family: var(--b-serif); font-weight: 500; font-size: 20px; color: var(--b-tinte); }
body.employee-app .einsatz-karte .einsatz-ort { margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-sand); }
body.employee-app .einsatz-karte .einsatz-ort:last-child { border-bottom: 1px solid var(--b-linie); margin-bottom: 0; }
body.employee-app .einsatz-karte .einsatz-ort-art { color: var(--b-akzent-dunkel); letter-spacing: .05em; }
body.employee-app .einsatz-karte .einsatz-ort p { color: var(--b-tinte); font-weight: 600; }
body.employee-app .einsatz-karte .einsatz-ort small { color: var(--b-leise); }
body.employee-app .einsatz-karte .deployment-route { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: var(--b-karte); border: 1px solid var(--b-linie); color: var(--b-akzent-dunkel); font-weight: 600; font-size: 14px; text-decoration: none; }
body.employee-app .einsatz-karte .shift-context-list > div { border-bottom: 1px solid var(--b-trenner); }
body.employee-app .einsatz-karte .shift-context-list span { color: var(--b-leise); }
body.employee-app .einsatz-karte-telefon { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 10px; padding: 9px 16px; border-radius: 999px; background: var(--b-gruen-weich); color: var(--b-gruen); font-weight: 700; font-size: 15px; text-decoration: none; }
body.employee-app .einsatz-karte-telefon small { font-weight: 500; color: var(--b-leise); }
body.employee-app .einsatz-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.employee-app .einsatz-kacheln > div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-sand); min-width: 0; }
body.employee-app .einsatz-kacheln > div.is-breit { grid-column: 1 / -1; }
body.employee-app .einsatz-kacheln span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--b-akzent-dunkel); }
body.employee-app .einsatz-kacheln strong { font-size: 16px; font-weight: 600; color: var(--b-tinte); overflow-wrap: anywhere; }
body.employee-app .einsatz-box { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-sand); }
body.employee-app .einsatz-box h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--b-akzent-dunkel); }
body.employee-app .einsatz-box ul { margin: 0; padding: 0; list-style: none; }
body.employee-app .einsatz-box li { padding: 7px 0; border-top: 1px solid var(--b-trenner); font-size: 15px; color: var(--b-tinte); }
body.employee-app .einsatz-box li:first-child { border-top: 0; padding-top: 2px; }
body.employee-app .einsatz-team .einsatz-box { margin-top: 0; padding: 14px 10px; }

/* Uhr wie ein Play-Knopf (24.09.2026): Rückmeldung im Moment des Tippens */
body.employee-app .focus-clock .clock-action { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background-color .18s ease, color .18s ease; }
body.employee-app .focus-clock .clock-action:active { transform: scale(.9); }
body.employee-app .focus-clock .clock-action.is-getippt { animation: uhr-tipp .28s ease-out; }
@keyframes uhr-tipp { 0% { transform: scale(.88); } 60% { transform: scale(1.07); } 100% { transform: scale(1); } }
body.employee-app .focus-clock.is-saving .clock-state { opacity: .8; }
body.employee-app .clock-state.is-fehler { color: var(--b-rot); font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
    body.employee-app .focus-clock .clock-action, body.employee-app .focus-clock .clock-action.is-getippt { transition: none; animation: none; }
}
/* Stopp-Symbol rot auf Rosa - employee.css erzwang Weiß (!important), das war kaum zu sehen */
body.employee-app .focus-clock.is-running .clock-action { color: var(--b-rot) !important; }

/* Wetter am Umzugstag (24.09.2026) - Kacheln wie .einsatz-kacheln, Symbol im runden Feld */
.wetter { display: grid; gap: 10px; }
.wetter-titel { margin: 0; font-family: var(--b-serif); font-weight: 500; font-size: 18px; color: var(--b-tinte); }
.wetter-orte { display: grid; gap: 8px; }
.wetter-ort { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-sand); }
.wetter-symbol { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--b-karte); border: 1px solid var(--b-trenner); font-size: 26px; color: var(--b-akzent); }
.wetter-text { display: grid; gap: 2px; min-width: 0; }
.wetter-kopf { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--b-akzent-dunkel); overflow-wrap: anywhere; }
.wetter-text strong { font-size: 16px; font-weight: 600; color: var(--b-tinte); }
.wetter-text small { font-size: 13px; color: var(--b-leise); }
.wetter-hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wetter-hinweise li { padding: 8px 12px; border-radius: 12px; background: var(--b-gelb-weich); color: var(--b-gelb); font-size: 14px; font-weight: 600; }
.wetter-quelle { margin: 0; font-size: 11px; color: var(--b-leise); }
.auftrag-kachel.is-wetter .wetter-ort { background: var(--b-karte); }
.b-wetter { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--b-tinte); white-space: nowrap; }
.b-wetter i { font-size: 17px; color: var(--b-akzent); }
.wetter-text { flex: 1; }
.wetter-temp { flex: none; display: grid; justify-items: end; line-height: 1; }
.wetter-temp b { font-family: var(--b-serif); font-weight: 500; font-size: 30px; color: var(--b-tinte); }
.wetter-temp small { margin-top: 4px; font-size: 14px; color: var(--b-leise); }
/* Am Umzugstag: das Wetter als eigene Karte unter dem Live-Stand */
body.employee-app .heute-wetter { margin: 12px 0 16px; padding: 16px 18px; background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: var(--b-radius); }

/* "Wann kannst du?" ab heute, nach Wochen (25.09.2026) */
body.employee-app .availability-week { display: grid; gap: 10px; margin: 0 0 22px; }
body.employee-app .availability-week-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.employee-app .availability-week-head h2 { margin: 0; font-family: var(--b-serif); font-weight: 500; font-size: 20px; color: var(--b-tinte); }
body.employee-app .availability-week-head form { display: block; margin: 0; }
body.employee-app .availability-all { border: 1px solid var(--b-linie); background: var(--b-karte); color: var(--b-gruen); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
body.employee-app .availability-all:hover { background: var(--b-gruen-weich); }
body.employee-app .availability-day-label { display: grid; gap: 0; }
body.employee-app .availability-day-label small { font-size: 12px; font-weight: 700; color: var(--b-akzent); }
body.employee-app .availability-weiter { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 18px; padding: 12px; border-radius: 14px; border: 1px dashed var(--b-linie); color: var(--b-leise); font-weight: 700; font-size: 14px; text-decoration: none; }
body.employee-app .availability-weiter:hover { color: var(--b-tinte); border-color: var(--b-leise); }
body.employee-app .availability-day { scroll-margin-top: 90px; }

/* "Verpasse keine Anfrage" - Benachrichtigungen einschalten (25.09.2026) */
body.employee-app .push-karte { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 16px; padding: 16px; border-radius: var(--b-radius); background: var(--b-warm); }
body.employee-app .push-karte[hidden] { display: none; }
body.employee-app .push-karte-symbol { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--b-karte); color: var(--b-akzent); font-size: 21px; }
body.employee-app .push-karte-text { display: grid; gap: 6px; min-width: 0; }
body.employee-app .push-karte-text strong { font-family: var(--b-serif); font-weight: 500; font-size: 19px; color: var(--b-tinte); }
body.employee-app .push-karte-text p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--b-leise); }
body.employee-app .push-karte form { display: grid; gap: 8px; margin: 4px 0 0; }
body.employee-app .push-karte [data-push-status] { font-size: 13px; color: var(--b-akzent-dunkel); }
body.employee-app .push-karte [data-push-status]:empty,
body.employee-app .push-karte [data-push-status][data-push-state="inactive"],
body.employee-app .push-karte [data-push-status][data-push-state="loading"] { display: none; }
body.employee-app .push-karte-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
body.employee-app .push-karte-knoepfe button { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--b-linie); background: var(--b-karte); color: var(--b-tinte); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
body.employee-app .push-karte-knoepfe .push-karte-ja { background: var(--b-akzent); border-color: var(--b-akzent); color: #fff; }
body.employee-app .push-karte-knoepfe .push-karte-spaeter { border-color: transparent; background: none; color: var(--b-leise); }

/* "Mehr" (25.09.2026): Profil, Gruppen, Kalender-Abo, Hilfe */
body.employee-app .mehr-profil { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; padding: 18px; border-radius: var(--b-radius); background: var(--b-karte); border: 1px solid var(--b-linie); }
body.employee-app .mehr-profil-bild { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--b-warm); color: var(--b-akzent-dunkel); font-family: var(--b-serif); font-size: 24px; }
body.employee-app .mehr-profil-bild img { width: 100%; height: 100%; object-fit: cover; }
body.employee-app .mehr-profil-text { display: grid; gap: 4px; min-width: 0; }
body.employee-app .mehr-profil-text strong { font-family: var(--b-serif); font-weight: 500; font-size: 21px; color: var(--b-tinte); overflow-wrap: anywhere; }
body.employee-app .mehr-profil-text form { display: inline; margin: 0; }
body.employee-app .mehr-profil-aendern { font-size: 14px; font-weight: 700; color: var(--b-akzent); cursor: pointer; }
body.employee-app .mehr-profil-aendern:focus-within { outline: 2px solid var(--b-akzent); outline-offset: 2px; border-radius: 4px; }
body.employee-app .mehr-profil-entfernen { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--b-leise); cursor: pointer; }
body.employee-app .mehr-gruppe { margin: 22px 4px 8px; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--b-leise); }
body.employee-app .mehr-aufklapp { padding: 0; }
body.employee-app .mehr-aufklapp[open] > summary > .ph:last-child { transform: rotate(90deg); }
body.employee-app .mehr-aufklapp-inhalt { display: grid; gap: 12px; padding: 0 20px 20px; font-size: 14px; line-height: 1.5; color: var(--b-tinte); }
body.employee-app .mehr-aufklapp-inhalt p { margin: 0; }
body.employee-app .mehr-aufklapp-inhalt form { display: grid; gap: 2px; justify-items: start; margin: 0; }
body.employee-app .mehr-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
body.employee-app .mehr-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--b-linie); background: var(--b-karte); color: var(--b-tinte); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
body.employee-app .mehr-knopf.is-haupt { background: var(--b-akzent); border-color: var(--b-akzent); color: #fff; }
body.employee-app .mehr-knopf i { font-size: 18px; }
body.employee-app .mehr-textknopf { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--b-akzent); cursor: pointer; }
body.employee-app .mehr-leise { font-size: 13px; color: var(--b-leise); }
body.employee-app .mehr-anleitung { margin: 0; padding: 0 20px 20px 42px; display: grid; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--b-leise); }
body.employee-app .mehr-anleitung strong { display: block; color: var(--b-tinte); font-size: 15px; }

/* Fotos von fertiger Montage (25.09.2026) - freiwillig, ein Tippen öffnet die Kamera */
body.employee-app .stand-aufgaben li { flex-wrap: wrap; }
body.employee-app .stand-foto { display: flex; }
body.employee-app .stand-foto-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 12px; border: 1px solid var(--b-linie); border-radius: 12px; background: var(--b-karte); color: var(--b-tinte); font-size: 14px; font-weight: 600; cursor: pointer; }
body.employee-app .stand-foto-knopf i { font-size: 18px; color: var(--b-akzent); }
body.employee-app .stand-foto-knopf:focus-within { outline: 2px solid var(--b-akzent); outline-offset: 2px; }
body.employee-app .stand-foto.is-laedt .stand-foto-knopf { opacity: .55; pointer-events: none; }
body.employee-app .stand-foto-meldung { flex-basis: 100%; font-size: 13px; line-height: 1.4; color: var(--b-rot); }

/* Overlays wie bei Airbnb (27.09.2026, O1): sichtbar nur ✕ oder ←, kein
   Griff. Ziehen nach unten, Tipp daneben und Escape schließen trotzdem.
   Am PC ein Fenster in der Mitte statt eines Blatts von unten. */
body .sheet-grab span { display: none !important; }
@media (min-width: 900px) {
    body .day-detail-dialog, body.employee-app .day-detail-dialog {
        inset: 0; margin: auto; height: fit-content; width: min(100% - 48px, 560px);
        max-height: min(88dvh, 820px); border-radius: 20px; transform: translateY(12px);
    }
    body .day-detail-dialog[open].is-visible { transform: none; }
    body .day-detail-dialog .day-detail-sheet, body.employee-app .day-detail-dialog .day-detail-sheet {
        max-height: min(88dvh, 820px); border-radius: 20px; border-bottom: 1px solid var(--b-linie);
        padding-bottom: 26px; box-shadow: 0 24px 64px rgba(32, 27, 20, .22);
    }
}
/* Die Verwaltung nutzt den Overlay-Baustein seit Paket D (27.09.2026) auch -
   die Zugzone selbst war bisher nur für die Mitarbeiter-App gestylt. */
body.admin-dashboard-app .sheet-grab {
    display: grid; place-items: center; width: 100%; height: 36px; min-height: 36px;
    margin: -34px 0 16px; padding: 0; border: 0; border-radius: 0;
    background: transparent; touch-action: none; cursor: grab;
}
body.admin-dashboard-app .sheet-grab:active { cursor: grabbing; }

/* Montagefotos als Galerie, mit Großansicht (26.09.2026, fotoansicht.js) */
.mf { display: grid; gap: 8px; margin-top: 12px; }
.mf-titel { margin: 0; font-size: 14px; font-weight: 700; color: var(--b-tinte); }
.mf-titel span { margin-left: 4px; font-weight: 600; color: var(--b-leise); font-variant-numeric: tabular-nums; }
.mf-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.mf-raster li { display: grid; gap: 4px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.mf-bild { display: block; border-radius: 12px; overflow: hidden; background: var(--b-fuell); }
.mf-bild img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mf-bild:focus-visible { outline: 2px solid var(--b-akzent); outline-offset: 2px; }
.mf-text { display: grid; gap: 1px; min-width: 0; font-size: 13px; line-height: 1.3; }
.mf-text strong { font-weight: 600; color: var(--b-tinte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-text small { font-size: 12px; color: var(--b-leise); }

.fotoansicht { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #0d0c0b; color: #fff; overflow: hidden; }
.fotoansicht::backdrop { background: #0d0c0b; }
.fotoansicht[open] { display: grid; }
.fotoansicht figure { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; height: 100%; padding: max(56px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom)); }
.fotoansicht img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; }
.fotoansicht figcaption { display: grid; gap: 2px; padding: 12px 20px 4px; text-align: center; }
.fotoansicht figcaption strong { font-size: 16px; font-weight: 600; }
.fotoansicht figcaption small { font-size: 13px; color: rgba(255, 255, 255, .7); }
.fotoansicht-zahl { position: absolute; top: max(18px, calc(env(safe-area-inset-top) + 10px)); left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.fotoansicht button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 22px; cursor: pointer; }
.fotoansicht button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fotoansicht-zu { top: max(8px, env(safe-area-inset-top)); left: 12px; }   /* ✕ oben links wie bei Airbnb (27.09.2026) */
.fotoansicht-blaettern { top: 50%; transform: translateY(-50%); }
.fotoansicht-blaettern.is-zurueck { left: 12px; }
.fotoansicht-blaettern.is-weiter { right: 12px; }
.fotoansicht-blaettern[hidden] { display: none; }
html.fotoansicht-offen { overflow: hidden; }
@media (hover: none) { .fotoansicht-blaettern { display: none; } }
.auftrag-kachel.is-montagefotos { grid-column: 1 / -1; }
.auftrag-kachel.is-montagefotos .mf { margin-top: 0; }
.mf-raster a { text-decoration: none; }

/* Fehlerprotokoll (25.09.2026) */
.fehler-liste { display: grid; gap: 0; }
.fehler-eintrag { border-top: 1px solid var(--b-trenner); padding: 12px 0; }
.fehler-eintrag:first-child { border-top: 0; }
.fehler-eintrag summary { display: grid; gap: 2px; cursor: pointer; list-style: none; }
.fehler-eintrag summary::-webkit-details-marker { display: none; }
.fehler-eintrag .fehler-zeit { font-size: 12px; font-weight: 700; color: var(--b-rot); font-variant-numeric: tabular-nums; }
.fehler-eintrag strong { font-size: 15px; overflow-wrap: anywhere; }
.fehler-eintrag small { font-size: 13px; color: var(--b-leise); }
.fehler-eintrag dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; margin: 10px 0 0; font-size: 13px; }
.fehler-eintrag dt { color: var(--b-leise); }
.fehler-eintrag dd { margin: 0; overflow-wrap: anywhere; }

/* Kundenlink versenden (25.09.2026) */
.link-senden { display: grid; gap: 10px; margin-top: 10px; }
.link-senden-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.link-senden-knoepfe .b-knopf { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
.link-senden-knoepfe .b-knopf i { font-size: 17px; }
.link-senden-text summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--b-akzent-dunkel); }
.link-senden-text p { margin: 8px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--b-sand); border: 1px solid var(--b-trenner); font-size: 13px; line-height: 1.5; color: var(--b-tinte); }
.link-senden-stand { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--b-leise); }
.link-senden-stand li { display: flex; align-items: center; gap: 6px; }
.link-senden-stand li.is-ja { color: var(--b-gruen); }
.link-senden-stand i { font-size: 16px; }

/* Arbeitszeiten im Monat - eigene Seite unter "Team" (25.09.2026) */
.b-seite { display: grid; gap: 20px; margin-bottom: 40px; }
.b-umschalter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--b-fuell); justify-self: start; }
.b-umschalter a { padding: 7px 16px; border-radius: 999px; color: var(--b-leise); font-weight: 700; font-size: 14px; text-decoration: none; }
.b-umschalter a[aria-current="page"] { background: var(--b-karte); color: var(--b-tinte); box-shadow: 0 1px 2px rgba(31, 27, 22, .08); }
.b-seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.b-seitenkopf h1 { font-family: var(--b-serif); font-weight: 500; font-size: 36px; letter-spacing: -0.01em; margin: 0; color: var(--b-tinte); }
.b-seitenkopf p { margin: 6px 0 0; color: var(--b-leise); font-size: 15px; }
.b-monat { display: inline-flex; align-items: center; gap: 8px; }
.b-monat strong { min-width: 150px; text-align: center; font-size: 15px; }
.b-monat a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--b-linie); background: var(--b-karte); color: var(--b-tinte); text-decoration: none; }
.b-monat a:hover { border-color: var(--b-leise); }
.b-kennzahlen.is-drei { grid-template-columns: repeat(3, 1fr); }
.zeiten-liste { padding: 6px 22px; }
.zeiten-zeile { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(160px, 1.6fr) 60px 90px 130px 18px; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--b-trenner); color: var(--b-tinte); text-decoration: none; }
.zeiten-zeile:first-of-type { border-top: 0; }
.zeiten-zeile:hover .zeiten-person strong { color: var(--b-akzent-dunkel); }
.zeiten-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zeiten-person > span:last-child { display: grid; gap: 1px; min-width: 0; }
.zeiten-person strong { font-size: 15px; overflow-wrap: anywhere; }
.zeiten-person small { font-size: 13px; color: var(--b-leise); }
.zeiten-bild { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--b-warm); color: var(--b-akzent-dunkel); font-size: 13px; font-weight: 700; }
.zeiten-bild img { width: 100%; height: 100%; object-fit: cover; }
.zeiten-laeuft { display: inline-flex; align-items: center; gap: 6px; color: var(--b-gruen) !important; font-weight: 700; }
.zeiten-laeuft i { width: 8px; height: 8px; border-radius: 50%; background: var(--b-gruen); }
.zeiten-verlauf { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 22px; align-items: end; }
.zeiten-verlauf i { display: block; height: 4px; border-radius: 2px; background: var(--b-trenner); }
.zeiten-verlauf i.is-wenig { height: 9px; background: #B9D6CB; }
.zeiten-verlauf i.is-mittel { height: 15px; background: #6FA893; }
.zeiten-verlauf i.is-viel { height: 22px; background: var(--b-gruen); }
.zeiten-zahl { display: grid; gap: 1px; text-align: right; font-variant-numeric: tabular-nums; }
.zeiten-zahl small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--b-leise); }
.zeiten-zahl b { font-size: 15px; }
.zeiten-zahl em { font-style: normal; font-size: 12px; color: var(--b-gruen); }
.zeiten-pfeil { color: var(--b-leise); }
.zeiten-stand { margin: 0; font-size: 13px; }
@media (max-width: 860px) {
    .zeiten-zeile { grid-template-columns: 1fr auto auto; gap: 8px 14px; }
    .zeiten-verlauf { grid-column: 1 / -1; grid-row: 2; }
    .zeiten-zahl:nth-of-type(3) { display: none; }
    .zeiten-pfeil { display: none; }
    .b-kennzahlen.is-drei { grid-template-columns: 1fr 1fr; }
}
.b-umschalter + .admin-page-heading { margin-top: 16px; }
body.admin-dashboard-app .zeiten-zeile, body.admin-dashboard-app .zeiten-zeile:hover { color: var(--b-tinte); }
body.admin-dashboard-app .zeiten-zeile:hover .zeiten-person strong { color: var(--b-akzent-dunkel); }
body.admin-dashboard-app .b-umschalter a { color: var(--b-leise); }
body.admin-dashboard-app .b-umschalter a[aria-current="page"] { color: var(--b-tinte); }
body.admin-dashboard-app .b-monat a { color: var(--b-tinte); }
.b-wetter-pfeil { margin: 0 4px; color: var(--b-leise); }

/* Wetter - Variante A "Wegstrecke" (25.09.2026, zum Testen) */
.wetter.is-weg { gap: 12px; }
.wetter-weg-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.wetter-lage { font-size: 13px; font-weight: 700; color: var(--b-leise); }
.wetter-lage.is-trocken { color: var(--b-gruen); }
.wetter-lage.is-nass { color: var(--b-rot); }
.wetter-weg { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: stretch; padding: 12px; border: 1px solid var(--b-linie); border-radius: 16px; background: var(--b-sand); }
.wetter-weg.is-ein-ort { grid-template-columns: minmax(0, 1fr); }
.wetter-punkt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wetter-punkt.is-ziel { align-items: flex-end; text-align: right; }
.wetter-punkt > small { font-size: 12px; color: var(--b-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wetter-punkt > b { font-size: 14px; font-weight: 700; color: var(--b-tinte); hyphens: auto; overflow-wrap: break-word; }
.wetter-art { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--b-akzent-dunkel); }
.wetter-grad { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--b-serif); font-weight: 500; font-size: 28px; line-height: 1; color: var(--b-tinte); }
.wetter-grad i { align-self: center; font-size: 24px; color: var(--b-akzent); }
.wetter-grad small { font-family: var(--b-sans, inherit); font-size: 14px; color: var(--b-leise); }
.wetter-marke { margin-top: 6px; align-self: flex-start; padding: 2px 9px; border-radius: 999px; background: var(--b-rot-weich); color: var(--b-rot); font-size: 12px; font-weight: 700; }
.wetter-punkt.is-ziel .wetter-marke { align-self: flex-end; }
.wetter-fahrt { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; color: var(--b-leise); }
.wetter-fahrt i { position: relative; font-size: 18px; background: var(--b-sand); padding: 0 4px; }
.wetter-fahrt small { font-size: 12px; }
.wetter-linie { position: absolute; left: 2px; right: 2px; top: 50%; border-top: 1.5px dashed var(--b-linie); transform: translateY(-10px); }

/* Losgefahren (25.09.2026): am Treffpunkt der erste, beim Kunden der zweite Knopf */
body.employee-app .stand-weiter.is-still { background: var(--b-karte); border: 1px solid var(--b-linie); color: var(--b-tinte); }
/* Beladen/Entladen anhalten (26.09.2026): ein Knopf, ruhig, damit er nicht mit dem nächsten Schritt verwechselt wird */
body.employee-app .stand-anhalten { width: 100%; min-height: 48px; margin: 4px 0 4px; padding: 8px 14px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-karte); color: var(--b-tinte); font: inherit; font-size: 15px; font-weight: 600; }
body.employee-app .stand-anhalten.is-weiter { border-color: var(--b-gruen); background: var(--b-gruen-weich); color: var(--b-gruen); }
body.employee-app .stand.is-angehalten .stand-balken span { background: var(--b-leise); }
body.employee-app .stand-hinweis { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--b-leise); }

/* Einsatzkarte im Stufenprinzip (27.09.2026): Fotokopf wie bei Airbnb,
   Titel, drei Kennzahlen, Zeilen mit Aktion; Ablauf, Wetter, Umzug, Team,
   Fotos als Unter-Overlays (.ek-unter). */
.einsatz-karte { padding-left: 20px !important; padding-right: 20px !important; }
.einsatz-karte.hat-fotos { padding-top: 0 !important; position: relative; }
.einsatz-karte > .ek-foto, .einsatz-karte > .ek-inhalt { max-width: none !important; }
.einsatz-karte.hat-fotos > .sheet-grab { position: absolute; top: 0; left: 64px; right: 64px; z-index: 3; margin: 0 !important; height: 40px; }
.ek-foto { position: relative; margin: 0 -20px; }
.ek-bahn { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ek-bahn::-webkit-scrollbar { display: none; }
.ek-bild { position: relative; flex: 0 0 100%; scroll-snap-align: start; height: 250px; padding: 0; border: 0; border-radius: 0; background: var(--b-fuell); cursor: pointer; }
.ek-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ek-etikett { position: absolute; left: 14px; bottom: 30px; max-width: calc(100% - 100px); padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #1F1B16; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-etikett b { color: #B04D14; }
.ek-zaehler { position: absolute; right: 14px; bottom: 30px; padding: 4px 9px; border-radius: 8px; background: rgba(20, 16, 12, .72); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.ek-zurueck { position: absolute; top: 14px; left: 14px; z-index: 4; display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .95); color: #1F1B16; font-size: 20px; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); }
.ek-inhalt { position: relative; display: grid; gap: 14px; }
.hat-fotos .ek-inhalt { margin: -20px -20px 0; padding: 20px 20px 0; background: var(--b-karte); border-radius: 22px 22px 0 0; }
.ek-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ek-kopf h2 { margin: 0; font-family: var(--b-serif); font-size: 24px; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.ek-kopf p { margin: 4px 0 0; color: var(--b-leise); font-size: 14px; }
.ek-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; margin: 0; padding: 10px 0; border-block: 1px solid var(--b-linie); text-align: center; }
.ek-zahlen div + div { border-left: 1px solid var(--b-linie); }
.ek-zahlen dt { order: 2; color: var(--b-leise); font-size: 12px; }
.ek-zahlen div { display: flex; flex-direction: column; }
.ek-zahlen dd { margin: 0; font-family: var(--b-serif); font-size: 19px; font-weight: 600; }
.ek-zeilen { list-style: none; margin: 0; padding: 0; display: grid; }
.ek-zeilen li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--b-linie); }
.ek-zeilen li.is-leise { color: var(--b-leise); }
.ek-zeilen li > span:nth-child(2), .ek-zeilen button > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.ek-zeilen strong { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.ek-zeilen small { color: var(--b-leise); font-size: 13px; line-height: 1.35; }
.ek-symbol { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--b-akzent-weich, #FBEBDD); color: var(--b-akzent); font-size: 17px; font-weight: 800; }
.ek-aktion { justify-self: end; padding: 8px 14px; border: 1px solid var(--b-linie); border-radius: 999px; color: var(--b-tinte); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ek-mehr li { padding: 0; }
.ek-mehr button { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ek-mehr li { grid-template-columns: 1fr; }
.ek-pfeil { color: var(--b-leise); font-size: 18px; }
.ek-kuerzel { display: flex; align-items: center; margin-top: 3px; }
.ek-kuerzel > * { width: 26px !important; height: 26px !important; min-width: 26px; margin-left: -6px; border: 2px solid var(--b-karte); border-radius: 50%; font-size: 10px !important; }
.ek-kuerzel > *:first-child { margin-left: 0; }
.ek-kuerzel > span:last-child:not([class]) { display: grid; place-items: center; background: var(--b-fuell); color: var(--b-tinte); font-weight: 700; }
.ek-unterkopf { justify-content: flex-start !important; align-items: center !important; gap: 12px !important; margin-bottom: 14px; }
.ek-unterkopf h2 { font-family: var(--b-serif); font-size: 20px; font-weight: 500; margin: 0; }
.ek-gruppe { display: grid; gap: 6px; margin-bottom: 18px; }
.ek-gruppe h3 { margin: 0; font-family: var(--b-serif); font-size: 17px; font-weight: 500; }
.ek-gruppe p { margin: -4px 0 2px; color: var(--b-leise); font-size: 13px; }
.ek-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ek-raster a { display: block; border-radius: 8px; overflow: hidden; background: var(--b-fuell); }
.ek-raster img { display: block; width: 100%; height: 130px; object-fit: cover; }
.ek-raster.is-eins a { grid-column: 1 / -1; }
.ek-raster.is-eins img { height: 200px; }
.ek-live .is-offen { opacity: .7; }
@media (min-width: 900px) { .ek-bild { height: 300px; } }
.ek-live li { position: relative; }
.ek-live .is-erledigt .perle i { background: var(--b-gruen); border-color: var(--b-gruen); }
.ek-live .is-erledigt .perle b { background: var(--b-gruen); }
.ek-live .is-jetzt .perle i { border-color: var(--b-akzent); border-width: 3px; }
.ek-live .is-jetzt strong { color: var(--b-akzent); }

/* ------------------------------------------------------------------
   "Heute" der Mitarbeitenden (Startansichten 27.09.2026, SM1-SM4, M1-M4):
   eine Karte für jetzt, "Danach" zum Wischen, zwei Zeilen mit Zahl.
   ------------------------------------------------------------------ */
body.employee-app .jetzt-marke {
    justify-self: start; align-self: start; display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: var(--b-fuell); color: var(--b-leise); font: 800 12px/1.3 var(--b-sans); letter-spacing: .02em;
}
body.employee-app .jetzt-marke.is-orange { background: var(--b-warm); color: var(--b-akzent); }
body.employee-app .jetzt-marke.is-gelb { background: var(--b-gelb-weich); color: var(--b-gelb); }

/* Die große Karte (nächster Einsatz, Anfrage, Änderung) */
body.employee-app .jetzt-karte {
    display: grid; margin: 0 0 22px; border: 1px solid var(--b-linie); border-radius: 20px;
    background: var(--b-karte); overflow: hidden;
}
body.employee-app .jetzt-karte.is-anfrage { border-color: var(--b-akzent); }
body.employee-app .jetzt-karte-link { display: grid; color: inherit; text-decoration: none; }
body.employee-app .jetzt-foto { display: block; height: 190px; background: var(--b-warm); }
body.employee-app .jetzt-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.employee-app :is(.jetzt-foto, .danach-foto, .jetzt-live-foto).is-leer { display: grid; place-items: center; color: var(--b-akzent); }
body.employee-app .jetzt-foto.is-leer { height: 110px; font-size: 38px; }
body.employee-app .jetzt-text { display: grid; gap: 4px; padding: 14px 16px 16px; }
body.employee-app .jetzt-text strong { font: 500 22px/1.2 var(--b-serif); color: var(--b-tinte); margin-top: 4px; }
body.employee-app .jetzt-text small { font-size: 14px; line-height: 1.45; color: var(--b-leise); }
body.employee-app .jetzt-text .jetzt-wann { color: var(--b-tinte); font-weight: 700; }
body.employee-app .jetzt-karte.is-leer .jetzt-text { padding: 18px 16px; }
body.employee-app .jetzt-karte.is-leer .jetzt-text strong { font-size: 19px; margin: 0; }
body.employee-app .jetzt-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0 16px 16px; }
body.employee-app .jetzt-knoepfe.is-eins { grid-template-columns: 1fr; }
body.employee-app .jetzt-knoepfe :is(button, a) {
    min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px;
    font: 700 15px var(--b-sans); text-decoration: none; cursor: pointer;
}

/* Umzugstag: die Live-Karte mit Kopf (Foto, Kunde, Navi) */
body.employee-app .jetzt-live {
    margin: 0 0 22px; border: 1px solid var(--b-gruen); border-radius: 20px; background: var(--b-karte); overflow: hidden;
}
body.employee-app .jetzt-live-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 12px; border-bottom: 1px solid var(--b-trenner); }
body.employee-app .jetzt-live-titel { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
body.employee-app .jetzt-live-foto { flex: none; width: 64px; height: 52px; border-radius: 12px; overflow: hidden; background: var(--b-warm); font-size: 24px; }
body.employee-app .jetzt-live-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.employee-app .jetzt-live-titel > span:last-child { display: grid; min-width: 0; }
body.employee-app .jetzt-live-titel strong { font: 500 18px/1.2 var(--b-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.employee-app .jetzt-live-titel small { font-size: 13.5px; color: var(--b-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.employee-app .jetzt-navi {
    flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px;
    background: var(--b-warm); color: var(--b-akzent); font-weight: 700; font-size: 14px; text-decoration: none;
}
/* Die Stand-Karte ist hier Teil der Live-Karte - keine Karte in der Karte. */
body.employee-app .jetzt-live .stand-karte { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
body.employee-app .jetzt-live > .jetzt-zeile { border-top: 1px solid var(--b-trenner); padding: 12px 16px; }

/* Zeilen mit Pfeil - in der Live-Karte (Montage, Ablauf, Wetter) */
body.employee-app .jetzt-zeile {
    width: 100%; min-height: 52px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    margin: 0; padding: 10px 0; border: 0; background: none; color: var(--b-tinte); font: inherit; text-align: left; cursor: pointer;
}
body.employee-app .stand .jetzt-zeile { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--b-trenner); }
body.employee-app .stand-montage .jetzt-zeile { margin-top: 6px; }
body.employee-app .jetzt-zeile > span:nth-child(2) { display: grid; min-width: 0; }
body.employee-app .jetzt-zeile strong { font-size: 15px; font-weight: 700; }
body.employee-app .jetzt-zeile small { font-size: 13.5px; color: var(--b-leise); }
body.employee-app .jetzt-zeile > .ph-caret-right { color: var(--b-leise); }
body.employee-app .jetzt-symbol {
    width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px;
    background: var(--b-warm); color: var(--b-akzent); font-size: 17px;
}
body.employee-app .stand-unter-titel { margin: 18px 0 6px; font: 700 13px var(--b-sans); letter-spacing: .03em; text-transform: uppercase; color: var(--b-leise); }
body.employee-app .stand-unter .stand-ablauf { border-top: 0; margin-top: 4px; }

/* SM3: Danach */
body.employee-app .danach { margin: 0 0 22px; }
body.employee-app .heute-abschnitt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; }
body.employee-app .heute-abschnitt h2 { margin: 0; font: 500 20px var(--b-serif); }
body.employee-app .heute-abschnitt a { min-height: 44px; display: inline-flex; align-items: center; color: var(--b-akzent); font-weight: 700; font-size: 14px; text-decoration: none; }
body.employee-app .danach-bahn {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -16px; padding: 0 16px 4px; scroll-padding-inline: 16px;
}
body.employee-app .danach-bahn::-webkit-scrollbar { display: none; }
body.employee-app .danach-karte { flex: none; width: 168px; scroll-snap-align: start; display: grid; gap: 4px; align-content: start; color: inherit; text-decoration: none; }
body.employee-app .danach-foto { display: block; height: 112px; border-radius: 14px; overflow: hidden; background: var(--b-warm); font-size: 26px; }
body.employee-app .danach-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
body.employee-app .danach-karte .jetzt-marke { margin-top: 4px; font-size: 11px; padding: 2px 8px; }
body.employee-app .danach-karte strong { font-size: 14px; font-weight: 700; margin-top: 2px; }
body.employee-app .danach-karte small { font-size: 13.5px; color: var(--b-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SM4: zwei Zeilen mit Zahl */
body.employee-app .heute-zeilen { list-style: none; margin: 0 0 22px; padding: 0 16px; border: 1px solid var(--b-linie); border-radius: 18px; background: var(--b-karte); }
body.employee-app .heute-zeilen li + li { border-top: 1px solid var(--b-trenner); }
body.employee-app .heute-zeilen a {
    min-height: 60px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
    padding: 10px 0; color: var(--b-tinte); text-decoration: none;
}
body.employee-app .heute-zeilen a > span:nth-child(2) { display: grid; min-width: 0; }
body.employee-app .heute-zeilen strong { font-size: 15px; font-weight: 700; }
body.employee-app .heute-zeilen small { font-size: 13.5px; color: var(--b-leise); }
body.employee-app .heute-zeilen .ph-caret-right { color: var(--b-leise); }
body.employee-app .heute-zahl { font-weight: 800; font-size: 14px; color: var(--b-akzent); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.employee-app .heute-zahl.is-still { color: var(--b-tinte); font: 500 17px var(--b-serif); }

@media (min-width: 900px) {
    body.employee-app .jetzt-foto { height: 240px; }
    body.employee-app .danach-bahn { margin: 0; padding: 0 0 4px; }
}

/* ===============================================================   Übersicht der Verwaltung im Stufenprinzip (Paket B, 27.09.2026)
   ====================================================================== */

/* V4: die Live-Karte kompakt, der Ablauf im Overlay "Stand ansehen" */
.b-balken { display: block; width: 100%; height: 10px; border: 0; border-radius: 999px; background: var(--b-fuell); overflow: hidden; -webkit-appearance: none; appearance: none; }
.b-balken::-webkit-progress-bar { background: var(--b-fuell); border-radius: 999px; }
.b-balken::-webkit-progress-value { background: var(--b-akzent); border-radius: 999px; }
.b-balken::-moz-progress-bar { background: var(--b-akzent); border-radius: 999px; }
.b-balken.is-angehalten::-webkit-progress-value { background: var(--b-leise); }
.b-balken.is-angehalten::-moz-progress-bar { background: var(--b-leise); }
.b-heute-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 2px; }
.b-heute-team-zeile { display: flex; align-items: flex-start; gap: 8px; margin: 0; min-width: 0; color: var(--b-tinte); font-size: 14px; }
.b-heute-team-zeile i { color: var(--b-leise); font-size: 18px; margin-top: 1px; }
.b-heute-team-zeile em { font-style: normal; font-weight: 700; }
.b-heute-team-zeile .is-fehlt { color: var(--b-rot); }
body.admin-dashboard-app .b-heute-fuss .b-knopf, body.admin-dashboard-app .b-stand-link { min-height: 44px; }
.b-stand-dialog .day-detail-header h2 { font-family: var(--b-serif); font-weight: 500; font-size: 24px; color: var(--b-tinte); }
.b-stand-dialog .day-detail-header .eyebrow { margin: 0 0 4px; color: var(--b-leise); font-size: 13px; font-weight: 600; }
.b-stand-dialog .day-detail-sheet { display: grid; gap: 18px; background: var(--b-karte); border-color: var(--b-linie); }
.b-stand-dialog .day-detail-close { background: var(--b-trenner); color: var(--b-tinte); }
.b-ablauf { list-style: none; margin: 0; padding: 0; display: grid; }
.b-ablauf li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 0 0 16px; color: var(--b-leise); font-size: 14px; }
.b-ablauf li:last-child { padding-bottom: 0; }
.b-ablauf li:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: -2px; width: 2px; background: var(--b-fuell); }
.b-ablauf li.is-erledigt:not(:last-child)::before { background: var(--b-akzent); }
.b-ablauf-perle { width: 14px; height: 14px; margin: 3px 0 0 2px; border-radius: 50%; border: 2px solid var(--b-fuell); background: var(--b-karte); box-sizing: border-box; }
.b-ablauf li.is-erledigt .b-ablauf-perle { border-color: var(--b-akzent); background: var(--b-akzent); }
.b-ablauf-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.b-ablauf li.is-erledigt strong { color: var(--b-tinte); }
.b-ablauf strong { font-weight: 600; }
.b-ablauf small { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-stand-link { justify-self: start; }
/* Die Zugzone der Overlays gab es bisher nur in der Mitarbeiter-App */
body.admin-dashboard-app .day-detail-dialog .sheet-grab {
    display: block; width: 100%; height: 28px; min-height: 28px; margin: -20px 0 -18px; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; touch-action: none; cursor: grab;
}
body.admin-dashboard-app .day-detail-dialog.is-dragging { transition: none !important; transform: translateY(var(--sheet-drag-y, 0px)) !important; }

/* SV4: Diese Woche - heute und sechs Tage als Spalten, am Handy drei */
.b-tage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.b-tag { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 132px; padding: 10px 8px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-karte); }
.b-tag.is-heute { border-color: var(--b-akzent); box-shadow: inset 0 3px 0 var(--b-akzent); }
.b-tag.is-frei { background: var(--b-sand); border-style: dashed; }
body.admin-dashboard-app .b-tag-kopf { display: grid; gap: 0; min-height: 44px; align-content: center; padding: 0 4px; color: var(--b-leise); font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; }
body.admin-dashboard-app .b-tag-kopf strong { font-family: var(--b-serif); font-weight: 500; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--b-tinte); }
.b-tag.is-heute .b-tag-kopf span { color: var(--b-akzent); }
.b-tag-frei { padding: 0 4px; color: var(--b-leise); font-size: 13px; }
body.admin-dashboard-app .b-tag-auftrag { display: grid; gap: 3px; min-width: 0; min-height: 44px; padding: 8px; border-radius: 10px; background: var(--b-sand); border-left: 3px solid var(--b-gruen); color: var(--b-tinte); text-decoration: none; }
body.admin-dashboard-app .b-tag-auftrag:hover { background: var(--b-warm); }
.b-tag-auftrag.is-fehlt { border-left-color: var(--b-rot); }
.b-tag-auftrag.is-offen { border-left-color: var(--b-gelb); }
.b-tag-auftrag.is-entwurf { border-left-color: var(--b-fuell); }
.b-tag-auftrag small { color: var(--b-leise); font-size: 12px; font-variant-numeric: tabular-nums; }
.b-tag-auftrag strong { font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.b-tag-auftrag .b-wetter { font-size: 12px; }
.b-tag-auftrag .b-wetter i { font-size: 15px; }
.b-tag-stand { font-size: 12.5px; font-weight: 700; color: var(--b-gruen); font-variant-numeric: tabular-nums; }
.b-tag-auftrag.is-fehlt .b-tag-stand { color: var(--b-rot); }
.b-tag-auftrag.is-offen .b-tag-stand { color: var(--b-gelb); }
.b-tag-auftrag.is-entwurf .b-tag-stand { color: var(--b-leise); }
body.admin-dashboard-app .b-tag-mehr { padding: 4px; font-size: 12.5px; font-weight: 700; color: var(--b-akzent-dunkel); text-decoration: none; }
@media (max-width: 720px) {
    .b-tage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* SV5: Zahlen des Monats als Kacheln, jede führt zur gefilterten Auftragsliste */
.b-monat-kacheln { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
body.admin-dashboard-app .b-monat-kachel { display: grid; gap: 4px; align-content: start; min-height: 88px; padding: 14px 16px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-karte); color: var(--b-tinte); text-decoration: none; }
body.admin-dashboard-app .b-monat-kachel:hover { border-color: var(--b-akzent); }
.b-monat-kachel strong { font-family: var(--b-serif); font-weight: 500; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.b-monat-kachel span { color: var(--b-leise); font-size: 13px; line-height: 1.3; }
.b-monat-kachel.is-achtung strong { color: var(--b-rot); }
@media (max-width: 1080px) { .b-monat-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .b-monat-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.b-filter { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 4px 4px 4px 16px; border-radius: 999px; background: var(--b-warm); color: var(--b-tinte); font-size: 14px; }
body.admin-dashboard-app .b-filter a { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -6px -2px -6px 0; border-radius: 50%; color: var(--b-tinte); text-decoration: none; }
body.admin-dashboard-app .b-filter a:hover { background: var(--b-karte); }

/* SV6: Verwaltung am Handy - unter 900 px eine untere Leiste statt der
   Reiter oben; "Mehr" öffnet ein Overlay. Am PC bleibt die obere Navigation. */
.b-unten { display: none; }
@media (max-width: 899px) {
    body.admin-dashboard-app .b-nav, body.admin-dashboard-app .b-konto { display: none; }
    body.admin-dashboard-app .b-kopf { flex-wrap: nowrap; height: 60px; padding: 0 16px; }
    body.admin-dashboard-app { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    body.admin-dashboard-app .items-fuss { bottom: calc(72px + env(safe-area-inset-bottom)); }
    .b-unten {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        background: var(--b-karte); border-top: 1px solid var(--b-linie);
    }
    body.admin-dashboard-app .b-unten-reiter {
        display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 4px 0;
        border: 0; border-radius: 12px; background: none; box-shadow: none; cursor: pointer;
        color: var(--b-leise); font-family: var(--b-sans); font-size: 11.5px; font-weight: 600; text-decoration: none;
    }
    .b-unten-reiter i { font-size: 24px; }
    body.admin-dashboard-app .b-unten-reiter[aria-current="page"] { color: var(--b-akzent); }
}
.b-mehr-dialog .day-detail-sheet { display: grid; gap: 14px; background: var(--b-karte); border-color: var(--b-linie); }
.b-mehr-dialog .day-detail-header h2 { font-family: var(--b-serif); font-weight: 500; font-size: 24px; color: var(--b-tinte); }
.b-mehr-dialog .day-detail-header .eyebrow { margin: 0 0 4px; color: var(--b-leise); font-size: 13px; font-weight: 600; }
.b-mehr-dialog .day-detail-close { background: var(--b-trenner); color: var(--b-tinte); }
.b-mehr-liste { display: grid; border: 1px solid var(--b-linie); border-radius: 14px; overflow: hidden; }
.b-mehr-titel { margin: 0; padding: 10px 16px 4px; color: var(--b-leise); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.b-mehr-liste form { margin: 0; display: block; }
body.admin-dashboard-app .b-mehr-liste a, body.admin-dashboard-app .b-mehr-liste button {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px;
    border: 0; border-top: 1px solid var(--b-trenner); border-radius: 0; background: none; box-shadow: none;
    color: var(--b-tinte); font-family: var(--b-sans); font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
body.admin-dashboard-app .b-mehr-liste > a:first-child, body.admin-dashboard-app .b-mehr-titel + a { border-top: 0; }
body.admin-dashboard-app .b-mehr-liste a:hover, body.admin-dashboard-app .b-mehr-liste button:hover, body.admin-dashboard-app .b-mehr-liste a[aria-current="page"] { background: var(--b-grund); }
.b-mehr-liste i { font-size: 20px; color: var(--b-leise); }
=======
/* Vorschau eines Auftrags aus der Liste (Paket D, 27.09.2026). */
.jobs-preview-schritt { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--b-leise); font-size: 14px; }
.jobs-preview-preis { margin: 6px 0 20px; font-family: var(--b-serif); font-size: 28px; font-weight: 600; color: var(--b-tinte); }

/* Nach dem Zusammenführen (27.09.2026) */
/* Zeiten: drei Kennzahlen in einer Reihe, auch am Handy. */
body.employee-app .b-kennzahlen.is-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.employee-app .b-kennzahlen.is-drei div { padding: 10px 12px; }
body.employee-app .b-kennzahlen.is-drei strong { font-size: 20px; }
/* Übersicht am Handy: "Zu erledigen" gleich nach dem Umzug heute, vor Woche und Zahlen (V4). */
@media (max-width: 1080px) {
    .b-uebersicht-haupt, .b-uebersicht-seite { display: contents; }
    .b-uebersicht-haupt > :not(.b-gruss):not(.b-heute) { order: 2; }
    .b-uebersicht-seite > * { order: 3; }
    .b-uebersicht-seite > :first-child { order: 1; }
}

/* ------------------------------------------------------------------
   Neuer Auftrag in drei Schritten (27.09.2026, N1-N10)
   ------------------------------------------------------------------ */
.na-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 14px; }
.na-stufen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.na-stufen li > * { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--b-fuell); color: var(--b-leise); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.na-stufen li.is-fertig > * { background: var(--b-gruen-weich); color: var(--b-gruen); }
.na-stufen li.is-jetzt > * { background: var(--b-tinte); color: var(--b-grund); }
.na-seite { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; margin: 18px 0 60px; }
@media (max-width: 960px) { .na-seite { grid-template-columns: 1fr; } }
.na-haupt { display: grid; gap: 12px; min-width: 0; }
.na-pille { background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: 18px; padding: 16px 18px; display: grid; gap: 12px; }
.na-pille.is-wichtig { border-color: var(--b-akzent); }
.na-pille-kopf { display: flex; gap: 12px; align-items: flex-start; }
.na-pille-kopf h2 { margin: 0; font: 500 18px/1.25 var(--b-serif); }
.na-pille-kopf p { margin: 2px 0 0; color: var(--b-leise); font-size: 13.5px; }
.na-nr { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--b-warm); color: var(--b-akzent); font-weight: 800; font-size: 13px; }
.na-nr.is-fertig { background: var(--b-gruen-weich); color: var(--b-gruen); }
.na-felder { display: grid; gap: 10px; min-width: 0; }
.na-felder.is-zwei { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.na-felder.is-zwei > .is-voll { grid-column: 1 / -1; }
.na-feld { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--b-leise); }
.na-feld input, .na-feld textarea, .na-option select { font: 500 15px var(--b-sans); color: var(--b-tinte); border: 1px solid var(--b-linie); border-radius: 12px; padding: 10px 12px; background: var(--b-sand); min-height: 44px; width: 100%; box-sizing: border-box; }
.na-feld.na-schmal { max-width: 240px; }
.na-zeile { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 6px 12px; align-items: center; font-size: 14px; }
.na-zeile > span:first-child { font-size: 13px; font-weight: 700; color: var(--b-leise); }
.na-zeile > :nth-child(n+3) { grid-column: 2; }
@media (max-width: 560px) { .na-zeile { grid-template-columns: 1fr; } .na-zeile > :nth-child(n+3) { grid-column: 1; } }
.na-zeile small { color: var(--b-leise); font-size: 12.5px; }
.na-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.na-chip { position: relative; }
.na-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.na-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--b-linie); border-radius: 999px; background: var(--b-karte); font-weight: 600; font-size: 14px; cursor: pointer; }
.na-chip input:checked + span { background: var(--b-tinte); border-color: var(--b-tinte); color: var(--b-grund); }
.na-chip.is-warm input:checked + span { background: var(--b-akzent); border-color: var(--b-akzent); color: #fff; }
.na-chip input:focus-visible + span { outline: 2px solid var(--b-akzent); outline-offset: 2px; }
.na-stepper { display: inline-flex; align-items: center; justify-self: start; border: 1px solid var(--b-linie); border-radius: 999px; background: var(--b-karte); overflow: hidden; }
.na-stepper button { width: 42px; height: 40px; border: 0; background: none; color: var(--b-akzent); font-size: 18px; font-weight: 800; cursor: pointer; }
.na-stepper input { width: 58px; border: 0; background: none; text-align: center; font: 700 15px var(--b-sans); color: var(--b-tinte); -moz-appearance: textfield; }
.na-stepper input::-webkit-inner-spin-button, .na-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.na-stepper output { min-width: 56px; font-weight: 700; font-size: 13.5px; color: var(--b-leise); }
.na-stepper[data-min="-2"] input { width: 44px; }
.na-kurz { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.na-kurz input { width: 84px; font: 600 15px var(--b-sans); border: 1px solid var(--b-linie); border-radius: 10px; padding: 8px 10px; background: var(--b-sand); }
.na-adresse { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; }
@media (max-width: 760px) { .na-adresse { grid-template-columns: 1fr; } }
.na-sv { margin: 0; display: grid; gap: 6px; }
.na-sv a { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--b-linie); background: var(--b-fuell); aspect-ratio: 16 / 10; }
.na-sv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.na-sv figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--b-leise); }
.na-sv-marke { font-weight: 800; color: var(--b-tinte); }
.na-via { padding: 12px 18px; }
.na-via summary { cursor: pointer; color: var(--b-akzent); font-weight: 700; min-height: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.na-via summary small { color: var(--b-leise); font-weight: 500; }
.na-via[open] { gap: 12px; }
.na-leistung { display: grid; grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr); gap: 8px 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--b-trenner); }
.na-leistung:first-of-type { border-top: 0; }
@media (max-width: 700px) { .na-leistung { grid-template-columns: 1fr; } }
.na-check { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; min-height: 40px; cursor: pointer; }
.na-check input { width: 20px; height: 20px; }
.na-notiz-klein { font: 14px var(--b-sans); border: 1px solid var(--b-linie); border-radius: 10px; padding: 8px 10px; background: var(--b-sand); min-width: 0; width: 100%; box-sizing: border-box; }
.na-link, .na-link-knopf { color: var(--b-akzent); font-weight: 700; font-size: 13.5px; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; justify-self: start; }
.na-hinweis { margin: 0; font-size: 13px; color: var(--b-leise); }
.na-hinweis.is-warnung { color: var(--b-gelb); font-weight: 600; }
.na-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.na-option { position: relative; display: block; cursor: pointer; }
.na-option > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.na-option > span { display: grid; gap: 4px; height: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--b-linie); border-radius: 16px; background: var(--b-karte); }
.na-option > input:checked + span { border-color: var(--b-akzent); box-shadow: 0 0 0 3px var(--b-warm); }
.na-option > input:focus-visible + span { outline: 2px solid var(--b-akzent); outline-offset: 2px; }
.na-option b { font: 500 17px/1.2 var(--b-serif); }
.na-option small { color: var(--b-leise); font-size: 12.5px; }
.na-option .na-preis { color: var(--b-tinte); font-weight: 700; }
.na-option select { min-height: 40px; padding: 6px 10px; font-size: 14px; }
.na-marke { justify-self: start; font-style: normal; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; background: var(--b-gruen-weich); color: var(--b-gruen); }
.na-marke.is-gelb { background: var(--b-gelb-weich); color: var(--b-gelb); }
.na-laderaum { display: block; height: 8px; border-radius: 9px; background: var(--b-fuell); overflow: hidden; margin: 2px 0; }
.na-laderaum i { display: block; height: 100%; border-radius: 9px; background: var(--b-gruen); }
.na-laderaum i.is-eng { background: var(--b-gelb); }
.na-laderaum-0 { width: 0%; }
.na-laderaum-10 { width: 10%; }
.na-laderaum-20 { width: 20%; }
.na-laderaum-30 { width: 30%; }
.na-laderaum-40 { width: 40%; }
.na-laderaum-50 { width: 50%; }
.na-laderaum-60 { width: 60%; }
.na-laderaum-70 { width: 70%; }
.na-laderaum-80 { width: 80%; }
.na-laderaum-90 { width: 90%; }
.na-laderaum-100 { width: 100%; }
.na-seitenkarte { position: sticky; top: 84px; display: grid; gap: 12px; padding: 18px; border: 1px solid var(--b-linie); border-radius: 18px; background: var(--b-karte); }
.na-seitenkarte h2 { margin: 0; font: 500 17px var(--b-serif); }
.na-preis-gross { margin: 0; font: 500 28px/1.1 var(--b-serif); font-variant-numeric: tabular-nums; }
.na-seitenkarte dl { margin: 0; display: grid; gap: 6px; }
.na-seitenkarte dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.na-seitenkarte dt { color: var(--b-leise); }
.na-seitenkarte dd { margin: 0; font-weight: 700; text-align: right; }
.na-knopf { min-height: 46px; border-radius: 999px; border: 1px solid var(--b-akzent); background: var(--b-akzent); color: #fff; font: 700 15px var(--b-sans); cursor: pointer; padding: 0 16px; }
.na-knopf.is-still { background: var(--b-karte); color: var(--b-tinte); border-color: var(--b-linie); }
.na-knopf.is-leise { background: none; border-color: transparent; color: var(--b-leise); min-height: 36px; }
@media (max-width: 960px) { .na-seitenkarte { position: static; } }
/* Notiz zum Auftrag in der Einsatzkarte (27.09.2026) */
body.employee-app .ek-notiz, .ek-notiz { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--b-gelb-weich); color: var(--b-tinte); font-size: 14.5px; line-height: 1.45; }
.ek-notiz .ph { color: var(--b-gelb); font-size: 18px; margin-top: 1px; }
.na-seite [hidden] { display: none !important; }
.na-stepper output { padding-left: 8px; }
.na-chip.is-warm input:not([value="1"]):checked + span { background: var(--b-tinte); border-color: var(--b-tinte); color: var(--b-grund); }
/* Umzugsgut als Overlay im neuen Auftrag (27.09.2026): breiter, die Liste scrollt im Blatt. */
@media (min-width: 900px) { body .day-detail-dialog.na-umzugsgut { width: min(100% - 48px, 860px); max-width: 860px; } }
.na-umzugsgut .day-detail-sheet { display: grid; gap: 14px; }
.na-umzugsgut .day-detail-sheet > * { max-width: none; }
.na-sv.is-laedt a { background: linear-gradient(100deg, var(--b-fuell) 30%, var(--b-sand) 50%, var(--b-fuell) 70%) 0 0 / 300% 100%; animation: na-sv-laedt 1.2s linear infinite; }
.na-sv.is-laedt img { opacity: 0; }
@keyframes na-sv-laedt { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { .na-sv.is-laedt a { animation: none; } }

/* ------------------------------------------------------------------
   Overlays wie ein natives iOS-Blatt (Heiko, 28.09.2026)
   - gleitet von unten herein (Kurve und Dauer wie UIKit-Sheets),
     schließt schneller wieder nach unten
   - das Blatt lässt sich nicht seitlich verschieben
   - ✕ bzw. ← bleiben beim Scrollen oben stehen
   - der Hintergrund ist gesperrt (app.js, html.overlay-offen)
   ------------------------------------------------------------------ */
html.overlay-offen body { position: fixed; left: 0; right: 0; overflow: hidden; }
body .day-detail-sheet { overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 899px) {
    body .day-detail-dialog, body.employee-app .day-detail-dialog {
        opacity: 1 !important;
        transform: translate3d(0, 100%, 0);
        transition: transform .32s cubic-bezier(.32, .72, 0, 1), display .34s allow-discrete, overlay .34s allow-discrete;
        will-change: transform;
    }
    body .day-detail-dialog[open].is-visible, body.employee-app .day-detail-dialog[open].is-visible {
        transform: translate3d(0, 0, 0);
        transition: transform .5s cubic-bezier(.32, .72, 0, 1), display .5s allow-discrete, overlay .5s allow-discrete;
    }
    body .day-detail-dialog.is-dragging, body.employee-app .day-detail-dialog.is-dragging {
        transition: none !important; transform: translate3d(0, var(--sheet-drag-y, 0px), 0) !important;
    }
    body .day-detail-dialog::backdrop { transition: background-color .32s ease, backdrop-filter .32s ease, display .34s allow-discrete, overlay .34s allow-discrete; }
    body .day-detail-dialog.is-visible::backdrop { transition-duration: .5s; }
}
@media (prefers-reduced-motion: reduce) {
    body .day-detail-dialog, body .day-detail-dialog[open].is-visible { transition: opacity .2s ease !important; transform: none !important; }
}

/* Kopf mit ✕ oder ← bleibt oben stehen, mit weißem Grund über die ganze Breite. */
body .day-detail-sheet > .day-detail-header, body .einsatz-karte:not(.hat-fotos) .ek-kopf {
    position: sticky; top: 0; z-index: 5;
    background: var(--b-karte, #fff);
    box-shadow: 0 0 0 100vmax var(--b-karte, #fff); clip-path: inset(0 -100vmax);
    padding-top: 10px; padding-bottom: 10px;
}
body.employee-app .day-detail-sheet > .day-detail-header { margin-top: -10px; }

/* Einsatzkarte mit Fotos: ← schwebt über dem Foto und bleibt beim Scrollen;
   ist das Foto vorbei, erscheint eine weiße Leiste mit dem Titel. */
.ek-schwebe { position: sticky; top: 0; z-index: 6; height: 0; margin: 0 -20px; }
.ek-schwebe .ek-zurueck { position: absolute; top: 14px; left: 14px; }
.ek-schwebe-leiste {
    position: absolute; top: 0; left: 0; right: 0; height: 68px;
    display: flex; align-items: center; justify-content: center; padding: 0 64px;
    background: var(--b-karte, #fff); border-bottom: 1px solid var(--b-linie);
    opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.ek-schwebe-leiste span { font: 500 16px/1.2 var(--b-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.einsatz-karte.is-gescrollt .ek-schwebe-leiste { opacity: 1; }
.einsatz-karte.is-gescrollt .ek-zurueck { box-shadow: none; background: var(--b-fuell); }
.einsatz-karte.hat-fotos > .sheet-grab { width: auto !important; }
.einsatz-karte > .ek-schwebe { max-width: none !important; }
/* Kein Fokusrahmen um Titel, die nur für Bildschirmleser den Fokus bekommen,
   und keiner um die unsichtbare Zugzone (28.09.2026). */
.day-detail-dialog h2[tabindex="-1"]:focus, .day-detail-dialog .sheet-grab:focus { outline: none !important; box-shadow: none; }

/* Fotos verwalten (F4, 28.09.2026) */
.fotos-verwalten .day-detail-sheet { display: grid; gap: 16px; }
.fv-hochladen { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--b-linie); border-radius: 16px; background: var(--b-sand); }
.fv-hochladen select { font: 500 15px var(--b-sans); min-height: 44px; border: 1px solid var(--b-linie); border-radius: 12px; padding: 0 10px; background: var(--b-karte); }
.fv-datei { position: relative; }
.fv-datei input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fv-datei span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 1.5px dashed var(--b-akzent); border-radius: 14px; color: var(--b-akzent); font-weight: 700; background: var(--b-karte); }
.fv-datei input:focus-visible + span { outline: 2px solid var(--b-akzent); outline-offset: 2px; }
.fv-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fv-foto { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 8px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-karte); }
.fv-foto img { width: 72px; height: 54px; object-fit: cover; border-radius: 10px; display: block; grid-row: span 2; }
.fv-foto.is-aus img { opacity: .35; }
.fv-foto.is-aus .fv-text { color: var(--b-leise); }
.fv-text { display: grid; min-width: 0; }
.fv-text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-text small { font-size: 12.5px; color: var(--b-leise); }
.fv-titel { font-size: 11px; font-weight: 800; color: var(--b-gruen); background: var(--b-gruen-weich); border-radius: 999px; padding: 1px 7px; margin-right: 4px; }
.fv-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.fv-knoepfe button { width: 40px; height: 40px; min-height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--b-linie); border-radius: 50%; background: var(--b-karte); color: var(--b-tinte); font-size: 17px; cursor: pointer; }
.fv-knoepfe button:disabled { opacity: .3; cursor: default; }
.fv-knoepfe button.is-weg { color: var(--b-rot); }
.fv-vorschau { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fv-vorschau img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.auftrag-kachel-link { background: none; border: 0; padding: 0; color: var(--b-akzent); font: inherit; font-weight: 700; cursor: pointer; }
body .fv-foto .fv-knoepfe { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 6px !important; margin: 0; padding: 0; border: 0; background: none; }
body .fv-foto .fv-knoepfe button { flex: none; width: 40px !important; height: 40px; min-width: 0; margin: 0; }
body .fv-foto .fv-knoepfe input[type="hidden"] { display: none; }
@media (max-width: 480px) {
    body .fv-foto { grid-template-columns: 64px minmax(0, 1fr); }
    body .fv-foto img { width: 64px; height: 48px; }
    body .fv-foto .fv-knoepfe { gap: 4px !important; }
    body .fv-foto .fv-knoepfe button { width: 38px !important; height: 38px; min-height: 38px; font-size: 16px; }
}
/* Eigene Beschriftung der Fotos (28.09.2026) */
body .fv-foto .fv-beschriftung { grid-column: 1 / -1; display: flex; gap: 6px; margin: 2px 0 0; padding: 0; border: 0; background: none; }
body .fv-foto .fv-beschriftung input[name="text"] { flex: 1 1 auto; min-width: 0; font: 500 14px var(--b-sans); border: 1px solid var(--b-linie); border-radius: 10px; padding: 8px 10px; background: var(--b-sand); min-height: 40px; }
body .fv-foto .fv-beschriftung button { flex: none; width: auto; min-height: 40px; padding: 0 12px; border: 1px solid var(--b-linie); border-radius: 999px; background: var(--b-karte); color: var(--b-akzent); font: 700 13px var(--b-sans); cursor: pointer; }
.ek-raster a { position: relative; }
.ek-bildtext { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 4px 8px; border-radius: 8px; background: rgba(20, 17, 13, .66); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aufgaben fürs Team (28.09.2026) */
.ta-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ta-haken { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-karte); color: var(--b-tinte); font: 500 15px/1.4 var(--b-sans); text-align: left; cursor: pointer; min-height: 52px; }
.ta-kasten { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--b-linie); display: grid; place-items: center; color: transparent; font-size: 16px; background: var(--b-karte); }
.is-erledigt .ta-kasten { background: var(--b-gruen); border-color: var(--b-gruen); color: #fff; }
.ta-text { display: grid; gap: 2px; min-width: 0; }
.ta-text small { font-size: 12.5px; color: var(--b-leise); }
.is-erledigt .ta-text { color: var(--b-leise); text-decoration: line-through; text-decoration-color: var(--b-linie); }
.is-erledigt .ta-text small { text-decoration: none; }
.ek-symbol.is-offen { background: var(--b-akzent); color: #fff; }
.ta-verwaltung { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
body .ta-zeile { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 0; border: 0; background: none; }
body .ta-zeile button { width: auto !important; min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
body .ta-zeile .ta-weg { width: 36px !important; height: 36px; border-radius: 50%; color: var(--b-leise); font-size: 16px; }
body .ta-neu { display: flex !important; gap: 8px; margin-top: 8px; padding: 0; border: 0; background: none; }
body .ta-neu input { flex: 1 1 auto; min-width: 0; font: 500 14px var(--b-sans); border: 1px solid var(--b-linie); border-radius: 12px; padding: 8px 12px; min-height: 42px; background: var(--b-sand); }
body .ta-neu button { flex: none; width: auto !important; }
body .ta-haken { justify-content: flex-start !important; }

/* Immer der aktuelle Stand (28.09.2026): Hinweis und Ziehen zum Aktualisieren */
body.employee-app .neu-hinweis {
    position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 10px); transform: translateX(-50%); z-index: 50;
    min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--b-tinte); color: var(--b-grund);
    font: 700 14px var(--b-sans); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); cursor: pointer; white-space: nowrap;
}
body.employee-app .ziehen-anzeige {
    position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 40;
    width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; display: grid; place-items: center;
    background: var(--b-karte); color: var(--b-leise); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); font-size: 18px;
    opacity: 0; transform: translateY(calc(var(--ziehen, 0px) * .5 - 40px)) rotate(calc(var(--ziehen, 0px) * 3deg)); pointer-events: none;
}
body.employee-app .ziehen-anzeige.is-sichtbar { opacity: 1; }
body.employee-app .ziehen-anzeige.is-bereit { color: var(--b-akzent); }
body.employee-app .ziehen-anzeige.is-laedt i { animation: ziehen-dreht .8s linear infinite; }
@keyframes ziehen-dreht { to { transform: rotate(360deg); } }

/* Änderungen konkret (28.09.2026) */
.ek-aenderungen { display: grid; gap: 8px; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--b-gelb-weich); color: var(--b-tinte); }
.ek-aenderungen.is-wichtig { border: 1px solid var(--b-gelb); }
.ek-aenderungen h3 { margin: 0; font: 700 13px var(--b-sans); letter-spacing: .03em; text-transform: uppercase; color: var(--b-gelb); }
.ek-aenderungen ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.4; }
.ek-aenderungen li.is-wichtig { font-weight: 700; }
.ek-aenderungen li.is-leise { color: var(--b-leise); list-style: none; margin-left: -18px; font-size: 13px; }
.ek-aenderungen form { margin: 4px 0 0; }
.ek-aenderungen button { width: 100%; min-height: 46px; border-radius: 999px; font: 700 15px var(--b-sans); cursor: pointer; }
.ek-aenderungen .ek-gesehen { border: 1px solid var(--b-gelb); background: var(--b-karte); color: var(--b-tinte); }
.ek-neu { display: inline-block; font-style: normal; font-size: 11px; font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 999px; background: var(--b-akzent); color: #fff; vertical-align: 1px; }
body.employee-app .neu-meldung {
    position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); z-index: 50; max-width: 460px; margin: 0 auto;
    padding: 12px 16px; border-radius: 14px; background: var(--b-tinte); color: var(--b-grund); font: 600 14px/1.4 var(--b-sans);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22); transition: opacity .5s ease, transform .5s ease;
}
body.employee-app .neu-meldung.is-weg { opacity: 0; transform: translateY(12px); }

/* Stundennachweis (28.09.2026): Nachtragen und Bearbeiten, nicht im Ausdruck */
@media print { .nicht-drucken { display: none !important; } }
body .jh-nachtragen { display: flex !important; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0; padding: 0; border: 0; background: none; }
body .jh-nachtragen label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--b-leise); min-width: 240px; }
body .jh-nachtragen select { min-height: 44px; font: 500 15px var(--b-sans); border: 1px solid var(--b-linie); border-radius: 12px; padding: 0 10px; background: var(--b-karte); }
body .jh-nachtragen button { width: auto !important; }

/* Einsatzkarte ohne Doppeltes (28.09.2026): Anrufen neben dem Namen, "Neue Fotos" am Titelfoto */
.ek-titel { display: flex; align-items: center; gap: 10px; }
.ek-anruf { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--b-akzent-weich, #FBEBDD); color: var(--b-akzent); font-size: 18px; text-decoration: none; }
.ek-anruf:active { transform: scale(.94); }
.ek-anruf.is-spaeter { background: transparent; border: 1px solid var(--b-linie); color: var(--b-leise); }
.ek-foto-neu { position: absolute; left: 14px; bottom: 30px; padding: 4px 9px; border-radius: 8px; background: var(--b-akzent); color: #fff; font-size: 12px; font-weight: 800; pointer-events: none; }
.einsatz-box > p { margin: 4px 0 0; }

/* Aufgaben auf dem Heute-Tab (28.09.2026) - dieselbe Zeile wie Wetter */
body.employee-app .jetzt-symbol.is-offen { background: var(--b-akzent); color: #fff; }
body.employee-app .jetzt-karte > .jetzt-zeile { border-top: 1px solid var(--b-trenner); padding: 12px 16px; }
/* "neu" in der Aufgabenliste als kleines Etikett, nicht als Balken */
.ta-text .ek-neu { justify-self: start; }
.is-erledigt .ta-text .ek-neu { display: none; }

/* 60-30-10 (Heiko, 29.09.2026): Orange heißt "hier handeln" - nur für die
   Haupthandlung, Offenes und Neues. Symbole, Nummern und Navi sind neutral,
   die Notiz eine normale Zeile; Gelb bleibt Änderungen zum Bestätigen. */
:root { --b-symbol: #F1ECE4; }
.ek-symbol, body.employee-app .jetzt-symbol { background: var(--b-symbol); color: var(--b-tinte); }
.ek-symbol.is-offen, body.employee-app .jetzt-symbol.is-offen { background: var(--b-akzent); color: #fff; }
.ek-anruf { background: var(--b-symbol); color: var(--b-tinte); }
body.employee-app .jetzt-navi { background: none; border: 1px solid var(--b-linie); color: var(--b-tinte); }
body.employee-app .stand-weiter { background: var(--b-akzent); border-color: var(--b-akzent); }
body.employee-app .ek-notiz, .ek-notiz { background: none; border-radius: 0; padding: 12px 0; border-block: 1px solid var(--b-trenner); }
.ek-notiz .ph { color: var(--b-leise); }
body.employee-app :is(.jetzt-foto, .jetzt-live-foto, .danach-foto) { background: var(--b-symbol); }
.na-nr { background: var(--b-symbol); color: var(--b-tinte); }
.na-stepper button { color: var(--b-tinte); }
body.employee-app .jetzt-live-foto { color: var(--b-tinte); }

/* Raster nach Airbnb (Heiko, 29.09.2026): Linien-Symbole ohne Kachel, keine
   Trennlinien zwischen Zeilen, viel Luft, fette serifenlose Überschriften,
   runder Pfeil statt Textlink, Tab-Leiste ohne Pille. */
.ek-inhalt { gap: 22px; }
.ek-zeilen li, .ek-mehr button { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 18px; align-items: start; min-height: 0; padding: 14px 0; border: 0; }
.ek-mehr li { padding: 0; border: 0; }
.ek-zeilen strong { font-size: 16.5px; font-weight: 600; white-space: normal; }
.ek-zeilen small { font-size: 15px; line-height: 1.45; margin-top: 2px; }
.ek-zeilen .ek-aktion, .ek-pfeil { align-self: center; }
.ek-symbol, body.employee-app .jetzt-symbol { width: 28px; height: 28px; margin-top: 1px; background: none; border-radius: 0; color: var(--b-tinte); font-size: 26px; }
.ek-symbol.is-ort { border: 1.75px solid var(--b-tinte); border-radius: 50%; font-size: 13px; }
.ek-symbol.is-offen, body.employee-app .jetzt-symbol.is-offen { background: none; color: var(--b-akzent); }
.ek-zahlen { padding: 16px 0; }
.ek-zahlen dd { font-family: var(--b-sans); font-size: 20px; font-weight: 700; }
.ek-notiz { padding: 16px 0; font-size: 15px; }
body.employee-app .jetzt-zeile { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 18px; padding: 14px 0; }
body.employee-app .jetzt-zeile strong { font-size: 16.5px; font-weight: 600; }
body.employee-app .jetzt-zeile small { font-size: 15px; line-height: 1.45; }
body.employee-app :is(.jetzt-live, .jetzt-karte) > .jetzt-zeile { border-top: 0; padding: 14px 20px; }
body.employee-app .heute-abschnitt { align-items: center; margin: 0 0 14px; }
body.employee-app .heute-abschnitt h2 { font: 700 22px/1.2 var(--b-sans); letter-spacing: -.01em; }
body.employee-app .heute-pfeil { flex: none; width: 36px; height: 36px; min-height: 0 !important; justify-content: center; border-radius: 50%; background: var(--b-symbol); color: var(--b-tinte) !important; font-size: 18px; }
body.employee-app .danach { margin: 0 0 36px; }
body.employee-app .danach-karte { width: 200px; gap: 2px; }
body.employee-app .danach-foto { height: 200px; border-radius: 18px; margin-bottom: 8px; }
body.employee-app .danach-karte strong { font-size: 16px; font-weight: 600; }
body.employee-app .danach-karte small { font-size: 14.5px; }
body.employee-app .mobile-tab .ph { font-size: 26px; }
body.employee-app .mobile-tab-icon { padding: 2px 0; }
body.employee-app .mobile-tab.is-active .mobile-tab-icon { background: none; color: var(--b-akzent); }
body.employee-app .mobile-tab.is-active { color: var(--b-akzent) !important; }
.ek-mehr li { display: block; }
.ek-notiz { gap: 18px; } .ek-notiz .ph { flex: none; width: 28px; font-size: 24px; color: var(--b-tinte); }
/* Symbole mittig zum Text (Heiko, 29.09.2026) */
.ek-zeilen li, .ek-mehr button, body.employee-app .jetzt-zeile { align-items: center; }
.ek-symbol, body.employee-app .jetzt-symbol { margin-top: 0; }
.ek-notiz { align-items: center; }
.ek-notiz .ph { margin-top: 0; }
/* Doch oben wie bei Airbnb (Heiko, 29.09.2026): Symbol auf Höhe der fetten
   Titelzeile - Titel 16,5 px mit ca. 22 px Zeilenhöhe, Symbol 28 px -> 3 px hoch. */
.ek-zeilen li, .ek-mehr button, body.employee-app .jetzt-zeile, .ek-notiz { align-items: start; }
.ek-zeilen strong, body.employee-app .jetzt-zeile strong { line-height: 22px; }
.ek-symbol, body.employee-app .jetzt-symbol, .ek-notiz .ph { margin-top: -3px; }
.ek-notiz span { line-height: 22px; }

/* Tageskarte in Abschnitten (Heiko, 29.09.2026): fette Überschrift, darunter
   Zeilen mit Stichwort und je einer grauen Zeile pro Angabe - wie bei Airbnb. */
.ek-abschnitt { margin: 10px 0 2px; font: 700 20px/1.25 var(--b-sans); letter-spacing: -.01em; color: var(--b-tinte); }
.ek-inhalt > section { padding-top: 6px; border-top: 1px solid var(--b-trenner); }
.ek-mehr li.ek-zeile { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 14px 0; }
.ek-zeilen small + small { margin-top: 0; }
.ek-zeilen small { display: block; }
.ek-gesichter { display: flex; align-self: start; margin-top: -2px; }
.ek-team { grid-template-columns: auto minmax(0, 1fr) auto !important; }
.ek-gesicht { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px; border: 2px solid var(--b-karte); border-radius: 50%; overflow: hidden; background: var(--b-symbol); color: var(--b-tinte); font-size: 12px; font-weight: 700; }
.ek-gesicht:first-child { margin-left: 0; }
.ek-gesicht img { width: 100%; height: 100%; object-fit: cover; }
.ek-wetter { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--b-tinte); font: 700 13px var(--b-sans); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); cursor: pointer; }
.ek-wetter .ph { font-size: 16px; }
/* Karten-App wählen */
.navi-wahl-text { margin: 0 0 16px; color: var(--b-leise); font-size: 15px; line-height: 1.45; }
.navi-wahl-knoepfe { display: grid; gap: 10px; padding-bottom: 8px; }
.navi-wahl-knoepfe button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-karte); color: var(--b-tinte); font: 700 16px var(--b-sans); cursor: pointer; }
.navi-wahl-knoepfe .ph { font-size: 22px; }
.navi-einstellung select { margin-left: auto; max-width: 46%; padding: 8px 10px; border: 1px solid var(--b-linie); border-radius: 10px; background: var(--b-karte); color: var(--b-tinte); font: 600 14px var(--b-sans); }
body.employee-app .einsatz-karte h3.ek-abschnitt { font: 700 20px/1.25 var(--b-sans); letter-spacing: -.01em; text-transform: none; }
.ek-zahlen + section, .ek-aenderungen + section, .assignment-response + section { border-top: 0; }

/* Eine Stufenleiter für die ganze Mitarbeiter-App (Heiko, 29.09.2026) - wie in
   der Tageskarte: Seitentitel 28 Serif, Abschnitt 20 fett, Zeilentitel 16,5,
   Unterzeile 15 grau, klein 13. Zeilen 14 px Luft, Symbole 28 px, 18 px Abstand. */
body.employee-app {
    --t-abschnitt: 700 20px/1.25 var(--b-sans);
    --t-zeile: 600 16.5px/22px var(--b-sans);
    --t-unter: 400 15px/1.45 var(--b-sans);
}
body.employee-app :is(h2, h3):not(.mobile-page-header *, .home-page-header *, .ek-kopf *) { font: var(--t-abschnitt); letter-spacing: -.01em; }
body.employee-app :is(.mehr-gruppe, .deployment-month, .recent-history > header h2) { margin: 28px 0 10px; font: var(--t-abschnitt); letter-spacing: -.01em; text-transform: none; color: var(--b-tinte); }
body.employee-app .day-detail-header h2, body.employee-app .ek-unterkopf h2 { font: var(--t-abschnitt); }
/* Zeilen überall gleich: Menü (Mehr), Einsätze, Live-Karte */
body.employee-app :is(.menu-row, .deployment-row) { gap: 18px; padding-block: 14px; }
body.employee-app :is(.menu-copy strong, .deployment-kunde, .deployment-row-copy strong) { font: var(--t-zeile); }
body.employee-app :is(.menu-copy small, .deployment-row-copy small, .deployment-strecke, .deployment-facts) { font: var(--t-unter); color: var(--b-leise); }
body.employee-app .menu-icon { width: 28px; height: 28px; background: none; color: var(--b-tinte); font-size: 26px; }
body.employee-app .menu-icon .ph { font-size: 26px; }
/* Unter-Overlays: Ablauf, Team, Aufgaben, Wetter */
body.employee-app :is(.perlen-text strong, .ta-text, .team-member small) { font-size: 16.5px; }
body.employee-app :is(.perlen-text > span, .einsatz-karte-leise, .ta-text small) { font-size: 15px; }
body.employee-app .einsatz-box h4 { font: 700 13px var(--b-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--b-leise); }
body.employee-app .einsatz-box li, body.employee-app .einsatz-box > p { font-size: 15px; line-height: 1.45; }
/* Live-Karte am Umzugstag */
body.employee-app .stand :is(h2, h3) { font: var(--t-abschnitt); }
body.employee-app .jetzt-live-titel strong, body.employee-app .jetzt-text strong { font: var(--t-zeile); }
body.employee-app .jetzt-live-titel small, body.employee-app .jetzt-text small { font: var(--t-unter); color: var(--b-leise); }
/* Zeiten: Tageszeilen und Wochenkopf in derselben Stufenleiter */
body.employee-app .archive-day-zeile { font-size: 16px; line-height: 1.4; }
body.employee-app .archive-day { padding-block: 14px; }
body.employee-app .archive-week :is(h2, h3, header strong) { font: var(--t-abschnitt); }
body.employee-app .archive-week :is(h2, h3, header strong) { font: 700 17px/1.3 var(--b-sans); }

/* ======================================================================
   1:1 nach airbnb.de (ausgemessen am 29.09.2026, Handy 375 px).
   Übernommen: Grund, Grau, Linien, Schriftstufen, Abstände, Radien, Knöpfe.
   Nicht übernommen: die Schrift "Cereal" (lizenzpflichtig) - statt ihr seit
   03.10.2026 Praxis Next (Heikos Hausschrift, Serverlizenz), vorher die
   Systemschrift -, Logo und Markenfarbe.
   ====================================================================== */
:root {
    --b-grund: #FFFFFF;
    --b-karte: #FFFFFF;
    --b-tinte: #222222;
    --b-leise: #6C6C6C;
    --b-linie: #DDDDDD;
    --b-trenner: #EBEBEB;
    --b-symbol: #F7F7F7;
    --b-sans: "Praxis Next", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, system-ui, sans-serif;   /* seit 03.10.2026 Praxis Next, vorher die Systemschrift */
    --b-serif: var(--b-sans);
}
body.employee-app {
    --t-titel: 500 26px/30px var(--b-sans);
    --t-abschnitt: 600 22px/26px var(--b-sans);
    --t-zeile: 500 16px/20px var(--b-sans);
    --t-unter: 400 14px/18px var(--b-sans);
    background: #FFFFFF;
}
body.employee-app .mobile-shell { padding-left: 24px; padding-right: 24px; background: #FFFFFF; }
/* Seitentitel */
body.employee-app :is(.mobile-page-header h1, .home-page-header h1, .ek-kopf h2) { font: var(--t-titel); letter-spacing: 0; }
body.employee-app :is(.mobile-page-header p, .home-page-header p, .ek-kopf p) { font: var(--t-unter); color: var(--b-leise); }
/* Abschnitte: Linie, 32 px Luft, 22/26 600 */
body.employee-app :is(h2, h3):not(.mobile-page-header *, .home-page-header *, .ek-kopf *),
body.employee-app :is(.mehr-gruppe, .deployment-month, .heute-abschnitt h2, .day-detail-header h2, .ek-unterkopf h2),
body.employee-app .einsatz-karte h3.ek-abschnitt { font: var(--t-abschnitt); letter-spacing: 0; text-transform: none; color: var(--b-tinte); }
body.employee-app .ek-inhalt { gap: 0; }
body.employee-app .ek-inhalt > section { padding: 32px 0 8px; border-top: 1px solid var(--b-linie); }
body.employee-app .ek-abschnitt { margin: 0 0 8px; }
/* Zeilen: Symbol 24, 16 Abstand, 24 zwischen Einträgen */
body.employee-app :is(.ek-zeilen li, .ek-mehr button, .ek-mehr li.ek-zeile, .jetzt-zeile, .menu-row, .deployment-row) { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 16px; padding-block: 12px; }
body.employee-app .ek-team { grid-template-columns: auto minmax(0, 1fr) auto !important; }
body.employee-app :is(.ek-symbol, .jetzt-symbol, .menu-icon) { width: 24px; height: 24px; margin-top: -2px; font-size: 24px; }
body.employee-app .menu-icon .ph { font-size: 24px; }
body.employee-app .ek-symbol.is-ort { font-size: 12px; border-width: 1.5px; }
body.employee-app :is(.ek-zeilen strong, .jetzt-zeile strong, .menu-copy strong, .deployment-kunde, .deployment-row-copy strong, .jetzt-live-titel strong, .jetzt-text strong, .danach-karte strong) { font: var(--t-zeile); }
body.employee-app :is(.ek-zeilen small, .jetzt-zeile small, .menu-copy small, .deployment-row-copy small, .deployment-strecke, .deployment-facts, .jetzt-live-titel small, .jetzt-text small, .danach-karte small, .archive-day-zeile) { font: var(--t-unter); color: var(--b-leise); }
body.employee-app .ek-zeilen small + small { margin-top: 0; }
/* Kacheln oben wie Airbnbs Kennzahlen */
body.employee-app .ek-zahlen { padding: 16px 0; border-color: var(--b-linie); }
body.employee-app .ek-zahlen dd { font: 600 18px/22px var(--b-sans); }
body.employee-app .ek-zahlen dt { font: 400 12px/16px var(--b-sans); color: var(--b-leise); }
/* Karten, Fotos, Knöpfe */
body.employee-app :is(.today-status, .recent-card, .deployment-featured, .deployment-row, .heute-einsatz, .stand-karte, .availability-prompt, .empty-state, .more-card, .more-list, .archive-day, .jetzt-karte, .jetzt-live, .settings-surface, .mehr-profil) { border-radius: 20px; border-color: var(--b-linie); }
body.employee-app :is(.danach-foto, .jetzt-foto) { border-radius: 20px; }
body.employee-app :is(.assignment-accept, .assignment-decline, .stand-weiter, .ek-gesehen) { min-height: 48px; border-radius: 999px; font: 500 16px var(--b-sans); }
body.employee-app :is(.ek-aktion, .jetzt-navi) { border-color: var(--b-tinte); font: 500 14px var(--b-sans); }
/* Tab-Leiste: 10/12, Symbole 24 */
body.employee-app .mobile-tab { font: 500 10px/12px var(--b-sans); }
body.employee-app .mobile-tab .ph { font-size: 24px; }
body.employee-app .mobile-tabbar { border-top-color: var(--b-linie); }
body.employee-app .ek-inhalt > :is(.ek-zahlen, .ek-aenderungen, .assignment-response) + section { border-top: 0; padding-top: 24px; }
body.employee-app .ek-gesicht { background: var(--b-trenner); }

/* Heute-Karten wie Airbnbs Unterkunftskarten (29.09.2026): Foto mit 20 px
   Radius, Text direkt darunter ohne Kastenrand. Titel 16/20 500 #222, Datum
   14/18 #222, Rest 14/18 grau - keine zweite Schriftstärke im Kopf.
   Etiketten weiß auf dem Foto wie "Gäste-Favorit", 13 px 600. */
body.employee-app .jetzt-karte:not(.jetzt-live) { border: 0; background: none; overflow: visible; }
body.employee-app .jetzt-karte-link { position: relative; }
body.employee-app .jetzt-karte .jetzt-foto { border-radius: 20px; overflow: hidden; }
body.employee-app .jetzt-karte:not(.is-leer) .jetzt-text { padding: 12px 0 0; gap: 2px; }
body.employee-app :is(.jetzt-text, .danach-karte) strong { font: 500 16px/20px var(--b-sans); color: var(--b-tinte); margin: 0; }
body.employee-app :is(.jetzt-text, .danach-karte) small { font: 400 14px/18px var(--b-sans); color: var(--b-leise); }
body.employee-app :is(.jetzt-text, .danach-karte) .jetzt-wann { font: 400 14px/18px var(--b-sans); color: var(--b-tinte); }
body.employee-app .jetzt-marken { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
body.employee-app .danach-karte { position: relative; }
body.employee-app .danach-karte > .jetzt-marke { position: absolute; top: 10px; left: 10px; margin: 0; }
body.employee-app .jetzt-marke, body.employee-app .jetzt-marke:is(.is-orange, .is-gelb) {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
    background: #FFFFFF; color: var(--b-tinte); font: 600 13px/16px var(--b-sans); letter-spacing: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
body.employee-app .jetzt-marke:is(.is-orange, .is-gelb)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--b-akzent); }
body.employee-app .jetzt-karte .jetzt-knoepfe { padding: 12px 0 0; }
body.employee-app .danach-karte .jetzt-marke { font-size: 12px; padding: 5px 9px; }

/* ======================================================================
   Designprüfung nach Airbnb, umgesetzt am 29.09.2026:
   A1 A2 A3 A4 A6 A7 A9 B4 B7 C7. Drei Regeln: Orange = tun,
   Schwarz = gewählt, alles andere neutral.
   ====================================================================== */

/* A2 - ein Etikett für alles: im Text grau mit Punkt, auf Fotos weiß */
.b-plakette, .auftrag-status, .b-status, body.employee-app .b-plakette {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: none !important;
    color: var(--b-leise) !important; font: 500 13px/16px var(--b-sans); letter-spacing: 0; text-transform: none; white-space: nowrap;
}
:is(.b-plakette, .auftrag-status, .b-status)::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--b-linie); }
:is(.b-plakette, .b-status).is-gut::before, .auftrag-status:is(.is-bestaetigt, .is-erledigt)::before { background: var(--b-gruen); }
:is(.b-plakette, .b-status).is-offen::before, .auftrag-status:is(.is-angefragt, .is-entwurf)::before { background: var(--b-akzent); }
:is(.b-plakette, .b-status).is-fehlt::before { background: var(--b-rot); }
.p-marke { margin-left: 6px; padding: 0; border-radius: 0; background: none; color: var(--b-gruen); font: 500 13px/16px var(--b-sans); letter-spacing: 0; text-transform: none; }
body.employee-app .jetzt-marke.is-gut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--b-gruen); }

/* A4 - ein Hauptknopf: orange, 48 px. Schwarz nur für "gewählt", Rot nur für Beenden */
body.employee-app :is(button.primary, .primary, .focus-clock .clock-action) { min-height: 48px; border: 0; border-radius: 999px; background: var(--b-akzent); color: #FFFFFF; font: 500 16px var(--b-sans); }
body.employee-app .focus-clock.is-running .clock-action { background: var(--b-rot-weich); color: var(--b-rot); }
body.employee-app button.primary .ph-check { display: none; }

/* A6 - Orange nur zum Handeln: Links dunkel und unterstrichen, Zahlen und Uhrzeiten dunkel */
body.employee-app :is(.history-add, .mehr-profil-aendern, .heute-abschnitt a:not(.heute-pfeil), .heute-zahl, .availability-weiter),
body.admin-dashboard-app :is(.b-abschnitt-kopf a, .auftrag-kachel-kopf a) {
    color: var(--b-tinte) !important; text-decoration: underline; text-underline-offset: 3px; font-weight: 500;
}
body.employee-app .history-add .ph-fill { display: none; }
body.employee-app .heute-zahl { text-decoration: none; font-weight: 600; }
body.employee-app .stand-ablauf strong, body.employee-app .stand-ablauf li.is-jetzt strong, .zeitplan-punkt strong, .perlen-text strong { color: var(--b-tinte) !important; }
body.employee-app .stand-ablauf li.is-jetzt { color: var(--b-tinte); font-weight: 600; }
body.employee-app .logout-card :is(a, button) { color: var(--b-tinte) !important; text-decoration: underline; text-underline-offset: 3px; }
body.employee-app .logout-card .ph { display: none; }

/* A7 - Blätter von unten: ✕ links, Titel mittig. Vollbild-Karte: ← links */
body.employee-app .day-detail-header { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
body.employee-app .day-detail-header > .day-detail-close { grid-column: 1; grid-row: 1; justify-self: start; }
body.employee-app .day-detail-header > :not(.day-detail-close) { grid-column: 2; grid-row: 1; text-align: center; min-width: 0; }
body.employee-app .day-detail-header h2 { margin: 0 !important; font: 600 16px/20px var(--b-sans) !important; text-align: center; }
body.employee-app .day-detail-header p { text-align: center; }
body.employee-app .day-detail-close { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--b-tinte); font-size: 18px; cursor: pointer; }
body.employee-app .day-detail-close:hover { background: var(--b-symbol); }
body.employee-app .einsatz-karte:not(.hat-fotos) .ek-kopf { flex-direction: column; align-items: stretch; gap: 12px; }
body.employee-app .ek-zurueck-oben { order: -1; align-self: flex-start; margin-left: -8px; }
/* Unter-Overlays der Tageskarte: Titel mittig, ✕ links */
body.employee-app .ek-unterkopf { padding-bottom: 12px; border-bottom: 1px solid var(--b-linie); margin-bottom: 8px; }

/* A1 - Einsätze wie Airbnbs "Reisen" */
body.employee-app .reisen { display: grid; gap: 32px; margin-top: 8px; }
body.employee-app .reisen-naechster .jetzt-foto { height: 220px; }
body.employee-app .reisen-liste h2 { margin: 0 0 8px; font: 600 22px/26px var(--b-sans); }
body.employee-app .reisen-liste ul { list-style: none; margin: 0; padding: 0; display: grid; }
body.employee-app .reisen-zeile { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border: 0; border-bottom: 1px solid var(--b-linie); background: none; color: var(--b-tinte); font: inherit; text-align: left; cursor: pointer; }
body.employee-app .reisen-liste li:last-child .reisen-zeile { border-bottom: 0; }
body.employee-app .reisen-bild { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--b-symbol); color: var(--b-leise); font-size: 24px; }
body.employee-app .reisen-bild img { width: 100%; height: 100%; object-fit: cover; }
body.employee-app .reisen-text { display: grid; gap: 2px; min-width: 0; }
body.employee-app .reisen-text strong { font: 500 16px/20px var(--b-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.employee-app .reisen-text small { font: 400 14px/18px var(--b-sans); color: var(--b-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.employee-app .reisen-text .jetzt-wann { color: var(--b-tinte); }
body.employee-app .reisen-text .b-status { margin-top: 4px; }
body.employee-app .reisen-zeile > .ph-caret-right { color: var(--b-leise); }
body.employee-app .availability-entry { margin-top: 4px; }

/* A8 nebenbei - Platzhalter ohne Farbe */
body.employee-app :is(.jetzt-foto, .danach-foto, .jetzt-live-foto, .reisen-bild).is-leer { background: var(--b-symbol); color: var(--b-leise); }

/* A3 - Wann kannst du?: keine Farbflächen, gewählt ist dunkel, Zustand als Punkt */
body.employee-app .availability-day { border: 0 !important; border-bottom: 1px solid var(--b-linie) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; padding: 14px 0 !important; }
body.employee-app .availability-day-label { position: relative; padding-left: 16px; }
body.employee-app .availability-day-label::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--b-linie); box-sizing: border-box; }
body.employee-app .availability-day.is-ja .availability-day-label::before { background: var(--b-gruen); border-color: var(--b-gruen); }
body.employee-app .availability-day.is-vielleicht .availability-day-label::before { background: #C79A2E; border-color: #C79A2E; }
body.employee-app .availability-day.is-nein .availability-day-label::before { background: var(--b-rot); border-color: var(--b-rot); }
body.employee-app .availability-day-label small { color: var(--b-leise); font-weight: 500; }
body.employee-app .availability-choices { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; border: 1px solid var(--b-linie); border-radius: 999px; padding: 2px; }
body.employee-app .availability-choice { min-height: 40px; border: 0 !important; border-radius: 999px !important; background: none !important; color: var(--b-tinte) !important; font: 500 14px/16px var(--b-sans) !important; }
body.employee-app .availability-choice.is-chosen { background: var(--b-tinte) !important; color: #FFFFFF !important; }
body.employee-app .availability-planned { color: var(--b-leise) !important; }
body.employee-app .availability-planned .ph { color: var(--b-gruen); }
body.employee-app .availability-all { border: 1px solid var(--b-tinte); background: none; color: var(--b-tinte); border-radius: 999px; font: 500 14px var(--b-sans); }

/* A9 - Zeiten als Liste: Titel, Unterzeile, Dauer rechts, Linien statt Kästen */
body.employee-app .zeiten-zahlen { margin: 16px 0 8px; border-block: 1px solid var(--b-linie); }
body.employee-app .archive-week header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 24px 0 4px; }
body.employee-app .archive-week header :is(h2, strong) { font: 600 17px/22px var(--b-sans) !important; color: var(--b-tinte); }
body.employee-app .archive-days { display: grid; gap: 0; }
body.employee-app .archive-day { width: 100%; display: grid !important; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; min-height: 0; padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid var(--b-linie) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--b-tinte); text-align: left; }
body.employee-app .archive-day-text { display: grid; gap: 2px; min-width: 0; }
body.employee-app .archive-day-text strong { font: 500 16px/20px var(--b-sans); }
body.employee-app .archive-day-text small { font: 400 14px/18px var(--b-sans); color: var(--b-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.employee-app .archive-day-dauer { font: 600 16px/20px var(--b-sans); font-variant-numeric: tabular-nums; }
body.employee-app .archive-day > .ph-caret-right { color: var(--b-leise); }
body.employee-app .archive-filter select { border-radius: 12px; border-color: var(--b-linie); }

/* B4 - Aufgaben am Umzugstag direkt in der Live-Karte */
body.employee-app .jetzt-aufgaben { display: grid; gap: 4px; padding: 16px 20px 20px; border-top: 1px solid var(--b-linie); }
body.employee-app .jetzt-aufgaben h3 { margin: 0; font: 600 18px/22px var(--b-sans); }
body.employee-app .jetzt-aufgaben-zahl { font: 400 14px/18px var(--b-sans); color: var(--b-leise); }
body.employee-app .ta-kurz { margin: 8px 0 0; }
.alle-anzeigen { width: 100%; min-height: 48px; margin-top: 12px; border: 1px solid var(--b-tinte); border-radius: 12px; background: none; color: var(--b-tinte); font: 500 16px var(--b-sans); cursor: pointer; }

/* B7 - leere Zustände mit Weg nach vorne */
.leer-zustand { display: grid; justify-items: start; gap: 8px; padding: 32px 0; }
.leer-zustand .ph { font-size: 32px; color: var(--b-tinte); }
.leer-zustand h2 { margin: 4px 0 0; font: 600 22px/26px var(--b-sans); }
.leer-zustand p { margin: 0; font: 400 16px/22px var(--b-sans); color: var(--b-leise); max-width: 34ch; }
.leer-knopf { display: inline-flex; align-items: center; min-height: 48px; margin-top: 12px; padding: 0 22px; border-radius: 12px; background: var(--b-akzent); color: #FFFFFF !important; font: 500 16px var(--b-sans); text-decoration: none; }
body.employee-app .jetzt-karte.is-leer .jetzt-text { display: grid; justify-items: start; gap: 4px; }

/* C7 - weiche Übergänge: Foto gleitet ins Detail, Seitenwechsel blenden über */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(ek-bild) { animation-duration: .38s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.day-detail-dialog.ohne-gleiten .day-detail-sheet, .day-detail-dialog.ohne-gleiten::backdrop { transition: none !important; }
/* Feinschliff nach den Screenshots */
body.employee-app .archive-day-text { justify-items: start; text-align: left; }
body.employee-app .archive-day-text strong { text-align: left; justify-self: start; }
body.employee-app .availability-day { display: grid !important; grid-template-columns: 92px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
body.employee-app .availability-day-label { min-width: 0 !important; white-space: nowrap; }
body.employee-app .availability-day-note { grid-column: 1 / -1; }
body.employee-app .availability-choice { font-size: 13px !important; line-height: 15px !important; padding: 4px 6px !important; }
body.employee-app .ta-kurz { display: grid; gap: 0; }
body.employee-app .ta-kurz li { border: 0 !important; border-bottom: 1px solid var(--b-linie) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body.employee-app .ta-kurz li:last-child { border-bottom: 0 !important; }
body.employee-app .ta-kurz .ta-haken { padding: 12px 0 !important; }
body.employee-app .archive-day .archive-day-text strong { margin-left: 0; color: var(--b-tinte); font-weight: 500; white-space: normal; }
body.employee-app .ta-kurz .ta-haken { border: 0 !important; border-radius: 0 !important; background: none !important; }
body.employee-app .heute-zahl { text-decoration: none !important; }
body.employee-app :is(.today-status, .heute-zeile) b, body.employee-app .heute-wert { text-decoration: none !important; }
body.employee-app .archive-day-text small { display: block; min-width: 0; }

/* Nachberechnen vor der Rechnung (30.09.2026) */
.nachberechnen { display: grid; gap: 16px; }
.nachberechnen-stunden, .nachberechnen-neu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; align-items: end; margin: 0; }
.nachberechnen-stunden { grid-template-columns: minmax(0, 260px) auto; }
.nachberechnen-stunden .hint { grid-column: 1 / -1; margin: 0; }
.nachberechnen :is(label) { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.nachberechnen :is(input, select) { min-height: 44px; padding: 0 12px; border: 1px solid var(--b-linie); border-radius: 12px; font: 400 16px var(--b-sans); background: var(--b-karte); color: var(--b-tinte); }
.nachberechnen .is-breit { grid-column: 1 / -1; }
.nachberechnen-neu > button { justify-self: start; }
.nachberechnen-link { padding: 0; border: 0; background: none; color: var(--b-tinte); font: 500 14px var(--b-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nachberechnen-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.nachberechnen-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--b-linie); }
.nachberechnen-liste li > span { display: grid; gap: 2px; }
.nachberechnen-liste small { color: var(--b-leise); font-size: 14px; }
.nachberechnen-liste b { font-variant-numeric: tabular-nums; font-weight: 600; }
.nachberechnen-liste form { margin: 0; }
.nachberechnen-weg { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--b-leise); cursor: pointer; }
.nachberechnen-weg:hover { background: var(--b-symbol); color: var(--b-tinte); }
@media (max-width: 760px) { .nachberechnen-neu, .nachberechnen-stunden { grid-template-columns: minmax(0, 1fr); } }
.nachberechnen-stunden { grid-template-columns: minmax(0, 260px) max-content; }
.nachberechnen-stunden > button, .nachberechnen > form:not([class]) { justify-self: start; }
.nachberechnen > form:not([class]) { display: block; margin: -8px 0 0; }

/* ======================================================================
   Verwaltung nach der Prozesskarte (30.09.2026): sieben Stufen, Stufenlisten,
   "Als Nächstes". Stufe = Ziffer im Kreis; erledigt schwarz gefüllt, aktuell
   schwarzer Ring und fett, kommend grau. Ein Hauptknopf je Bildschirm.
   ====================================================================== */
.b-nav-stufe { margin-left: 2px; font-size: 12px; font-weight: 500; color: var(--b-leise); }
.stufen-nr { flex: none; box-sizing: border-box; width: 24px; height: 24px; border: 1.75px solid var(--b-tinte); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--b-sans); color: var(--b-tinte); }

/* Stufenleiste im Auftrag */
.auftrag-weg { gap: 0; margin: 12px 0 0; padding: 14px 0; border-block: 1px solid var(--b-linie); }
.auftrag-weg li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--b-leise); }
.auftrag-weg li i { box-sizing: border-box; flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: none; border: 1.5px solid var(--b-linie); font: 700 12px/1 var(--b-sans); font-style: normal; color: var(--b-leise); }
.auftrag-weg li.is-fertig { color: var(--b-tinte); }
.auftrag-weg li.is-fertig i { background: var(--b-tinte); border-color: var(--b-tinte); color: #FFFFFF; }
.auftrag-weg li.is-jetzt { color: var(--b-tinte); font-weight: 700; }
.auftrag-weg li.is-jetzt i { background: none; border: 2.5px solid var(--b-tinte); color: var(--b-tinte); }
/* Ohne Angebot entfallen Angebot und Zusage (02.10.2026): ruhig, gestrichelt, nicht als offen gezählt. */
.auftrag-weg li.is-entfaellt { color: var(--b-leise); }
.auftrag-weg li.is-entfaellt i { background: none; border: 1.5px dashed var(--b-linie); color: var(--b-leise); }
@media (max-width: 700px) { .auftrag-weg { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 10px; } }

/* Nächster Schritt: neutral, genau ein oranger Knopf */
.auftrag-naechstes { background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: 20px; padding: 20px 24px; }
.auftrag-naechstes-marke { color: var(--b-leise) !important; font: 500 13px var(--b-sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
.auftrag-naechstes strong { font: 600 22px/26px var(--b-sans); }
.auftrag-naechstes .b-knopf { min-height: 44px; border-radius: 999px; }
.auftrag-naechstes .b-knopf:not(.is-akzent) { background: var(--b-karte); border: 1px solid var(--b-tinte); color: var(--b-tinte); }

/* Übersicht: Stufen mit Anzahl */
.b-stufen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--b-linie); border-radius: 20px; overflow: hidden; }
.b-stufen a { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; color: var(--b-tinte); text-decoration: none; }
.b-stufen a + a { border-left: 1px solid var(--b-linie); }
.b-stufen a:hover { background: var(--b-symbol); }
.b-stufen-kopf { display: flex; align-items: center; gap: 8px; font: 600 14px var(--b-sans); }
.b-stufen strong { font: 700 26px/30px var(--b-sans); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .b-stufen { grid-template-columns: repeat(4, minmax(0, 1fr)); } .b-stufen a:nth-child(5) { border-left: 0; } .b-stufen a:nth-child(n+5) { border-top: 1px solid var(--b-linie); } }

/* Listen je Stufe und "Als Nächstes" */
.b-naechstes h2, .stufen-kopf h1 { font-family: var(--b-sans); }
.stufen-seite { display: grid; gap: 24px; max-width: 1040px; }
.stufen-kopf { display: grid; gap: 4px; }
.stufen-kopf h1 { margin: 0; font: 700 32px/36px var(--b-sans); }
.stufen-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.stufen-filter a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--b-linie); border-radius: 999px; color: var(--b-tinte); text-decoration: none; font: 500 14px var(--b-sans); }
.stufen-filter a[aria-current="page"] { background: var(--b-tinte); border-color: var(--b-tinte); color: #FFFFFF; }
.stufen-filter a span { color: inherit; opacity: .7; font-variant-numeric: tabular-nums; }
.stufen-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.stufen-liste li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--b-linie); }
.stufen-liste li:last-child { border-bottom: 0; }
.stufen-text { display: grid; gap: 3px; min-width: 0; }
.stufen-text a { color: var(--b-tinte); text-decoration: none; }
.stufen-text a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.stufen-text strong { font: 500 16px/20px var(--b-sans); }
.stufen-text small { font: 400 14px/18px var(--b-sans); color: var(--b-leise); }
.stufen-liste form { margin: 0; }
.stufen-knopf { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 1px solid var(--b-tinte); border-radius: 999px; background: var(--b-karte); color: var(--b-tinte); text-decoration: none; font: 500 15px var(--b-sans); white-space: nowrap; cursor: pointer; }
.stufen-knopf:hover { background: var(--b-symbol); }
@media (max-width: 700px) { .stufen-liste li { grid-template-columns: 28px minmax(0, 1fr); } .stufen-liste li > :last-child { grid-column: 2; justify-self: start; } }
.b-unten { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
/* Feinschliff Verwaltung nach Stufen */
body.admin-dashboard-app :is(.stufen-text a, .stufen-knopf, .b-stufen a, .stufen-filter a:not([aria-current="page"])) { color: var(--b-tinte); }
body.admin-dashboard-app .b-stufen strong { color: var(--b-tinte); }
.b-stufen a { padding: 14px 12px; gap: 6px; min-width: 0; }
.b-stufen-kopf { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 13px; min-width: 0; }
.b-nav a, .b-nav summary { white-space: nowrap; }
@media (max-width: 1400px) { .b-nav-stufe { display: none; } body.admin-dashboard-app .b-nav :is(a, summary) { padding-left: 9px; padding-right: 9px; } }
@media (max-width: 1180px) { body.admin-dashboard-app .b-kopf-rechts .b-knopf { font-size: 0; gap: 0; padding: 0 12px; } body.admin-dashboard-app .b-kopf-rechts .b-knopf .ph { font-size: 18px; } }

/* Stufe 5 Vorbereitung als Checkliste (30.09.2026) */
.auftrag-vorbereitung { display: grid; gap: 8px; margin: 0 0 24px; padding: 20px 24px; border: 1px solid var(--b-linie); border-radius: 20px; background: var(--b-karte); scroll-margin-top: 90px; }
.auftrag-vorbereitung h2 { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 22px/26px var(--b-sans); }
.vorbereitung-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.vorbereitung-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, auto); gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--b-linie); }
.vorbereitung-liste li:last-child { border-bottom: 0; }
.vorbereitung-text { display: grid; gap: 2px; min-width: 0; }
.vorbereitung-text strong { font: 500 16px/20px var(--b-sans); }
.vorbereitung-text small { font: 400 14px/18px var(--b-sans); color: var(--b-leise); }
.vorbereitung-aktion { justify-self: end; }
.vorbereitung-aktion form { margin: 0; }
.vorbereitung-form { display: flex; gap: 8px; align-items: center; }
.vorbereitung-form input { min-height: 40px; width: 200px; padding: 0 12px; border: 1px solid var(--b-linie); border-radius: 12px; font: 400 15px var(--b-sans); }
.vorbereitung-wahl { display: inline-grid; grid-template-columns: repeat(2, auto); padding: 2px; border: 1px solid var(--b-linie); border-radius: 999px; }
.vorbereitung-wahl button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--b-tinte); font: 500 14px var(--b-sans); cursor: pointer; }
.vorbereitung-wahl button[aria-pressed="true"] { background: var(--b-tinte); color: #FFFFFF; }
.vorbereitung-link { padding: 0; border: 0; background: none; color: var(--b-tinte); font: 500 14px var(--b-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 760px) { .vorbereitung-liste li { grid-template-columns: minmax(0, 1fr) auto; } .vorbereitung-aktion { grid-column: 1 / -1; justify-self: start; } .vorbereitung-form { flex-wrap: wrap; } }
.vorbereitung-liste li { grid-template-columns: minmax(0, 1fr) 90px auto; }
@media (min-width: 761px) { .vorbereitung-form { flex-wrap: nowrap; } .vorbereitung-form input { width: 190px; } }

/* Paket C (30.09.2026): Stufenleiste als Navigation, Überblick nach Stufen */
.auftrag-weg-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 12px; padding: 12px 0; border-block: 1px solid var(--b-linie); }
.auftrag-weg-nav .auftrag-weg { margin: 0; padding: 0; border: 0; }
.auftrag-weg-ueberblick { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--b-linie); border-radius: 999px; color: var(--b-tinte) !important; text-decoration: none; font: 500 14px var(--b-sans); }
.auftrag-weg-ueberblick[aria-current="page"] { background: var(--b-tinte); border-color: var(--b-tinte); color: #FFFFFF !important; }
.auftrag-weg li a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px 0 0; border-radius: 999px; color: inherit !important; text-decoration: none; }
.auftrag-weg li a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.auftrag-weg li.is-hier a span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; color: var(--b-tinte); }
.auftrag-unterseiten { display: flex; gap: 8px; margin-top: 12px; }
.auftrag-unterseiten a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--b-linie); border-radius: 999px; color: var(--b-tinte) !important; text-decoration: none; font: 500 14px var(--b-sans); }
.auftrag-unterseiten a[aria-current="page"] { background: var(--b-tinte); border-color: var(--b-tinte); color: #FFFFFF !important; }
@media (max-width: 900px) { .auftrag-weg-nav { grid-template-columns: minmax(0, 1fr); } }

.auftrag-stufen { display: grid; gap: 0; margin-top: 8px; }
.auftrag-stufe { border-bottom: 1px solid var(--b-linie); }
.auftrag-stufe > summary { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; cursor: pointer; list-style: none; }
.auftrag-stufe > summary::-webkit-details-marker { display: none; }
.auftrag-stufe > summary::after { content: ""; }
.auftrag-stufe-nr { box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--b-sans); border: 1.5px solid var(--b-linie); color: var(--b-leise); }
.auftrag-stufe-nr.is-fertig { background: var(--b-tinte); border-color: var(--b-tinte); color: #FFFFFF; }
.auftrag-stufe-nr.is-jetzt { border: 2.5px solid var(--b-tinte); color: var(--b-tinte); }
.auftrag-stufe-nr.is-entfaellt { border: 1.5px dashed var(--b-linie); color: var(--b-leise); }
.auftrag-stufe.is-entfaellt .auftrag-stufe-titel strong { color: var(--b-leise); font-weight: 500; }
.auftrag-stufe-titel { display: grid; gap: 2px; min-width: 0; }
.auftrag-stufe-titel strong { font: 600 18px/22px var(--b-sans); }
.auftrag-stufe.is-offen .auftrag-stufe-titel strong { color: var(--b-leise); font-weight: 500; }
.auftrag-stufe-titel small { font: 400 14px/18px var(--b-sans); color: var(--b-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auftrag-stufe-stand { font: 500 13px var(--b-sans); color: var(--b-leise); }
.auftrag-stufe.is-jetzt .auftrag-stufe-stand { color: var(--b-akzent); }
.auftrag-stufe[open] > summary { padding-bottom: 12px; }
.auftrag-stufe > .auftrag-kacheln, .auftrag-stufe > .auftrag-vorbereitung { margin: 0 0 24px 48px; }
.auftrag-stufe > .auftrag-vorbereitung + .auftrag-kacheln { margin-top: 0; }
@media (max-width: 700px) { .auftrag-stufe > .auftrag-kacheln, .auftrag-stufe > .auftrag-vorbereitung { margin-left: 0; } }
/* Orange Rahmen der Umzugsgut-Kachel (alter Stil) neutral */
.auftrag-kachel.is-umzugsgut { border-color: var(--b-linie); }
/* Versteckte Formularteile bleiben versteckt, auch wenn eine Regel display setzt */
.job-form[hidden], .job-form-actions[hidden], .admin-form-surface[hidden] { display: none !important; }
/* Checkliste in der Stufe: Überschrift steht schon in der Stufenzeile */
.auftrag-stufe .auftrag-vorbereitung > .auftrag-kachel-kopf { display: none; }
/* Handy: Stufenleiste als eine wischbare Reihe */
@media (max-width: 700px) {
    .auftrag-weg-nav .auftrag-weg { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .auftrag-weg-nav .auftrag-weg::-webkit-scrollbar { display: none; }
    .auftrag-weg-nav .auftrag-weg li { flex: none; }
    .auftrag-weg-ueberblick { justify-self: start; }
}

/* ======================================================================
   Designsystem 1.0 (Heiko, 30.09.2026): Akzent 5,1:1, Erledigt, Problem,
   Titel 26/30 fett. Gilt für Verwaltung und Team-App.
   ====================================================================== */
:root {
    --b-akzent: #C4410C;
    --b-akzent-dunkel: #A33609;
    --b-gruen: #1E7B3C;
    --b-rot: #C62828;
    --b-auf-tinte: #FFFFFF;
}
body.employee-app { --t-titel: 700 26px/30px var(--b-sans); }
/* Heute: "Danach" als Liste (30.09.2026) */
body.employee-app .danach.reisen-liste ul { list-style: none; margin: 0; padding: 0; display: grid; }
body.employee-app a.reisen-zeile { text-decoration: none; }
/* Tageskarte: feste Leiste unten (30.09.2026) */
body.employee-app .einsatz-karte .ek-leiste { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px -20px -20px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--b-linie); background: var(--b-karte); }
body.employee-app .ek-leiste-text { display: grid; gap: 2px; min-width: 0; }
body.employee-app .ek-leiste-text strong { font: 600 16px/20px var(--b-sans); }
body.employee-app .ek-leiste-text small { font: 400 14px/18px var(--b-sans); color: var(--b-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.employee-app .ek-leiste-knopf { flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--b-akzent); color: #FFFFFF !important; text-decoration: none; font: 500 16px var(--b-sans); }
body.employee-app .ek-leiste-knoepfe { flex: none; display: flex; gap: 8px; margin: 0; }
body.employee-app .ek-leiste-knoepfe button { min-height: 48px; padding: 0 16px; }
body.employee-app .ek-anfrage { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--b-linie); }
body.employee-app .ek-anfrage h3 { margin: 0; font: 600 22px/26px var(--b-sans); }
body.employee-app .ek-anfrage p { margin: 0; font: 400 14px/18px var(--b-sans); color: var(--b-leise); }
/* Live-Karte: Schrittliste direkt in der Karte (30.09.2026) */
body.employee-app .stand-live { display: inline-flex; align-items: center; gap: 6px; font: 400 13px var(--b-sans); color: var(--b-leise); }
body.employee-app .stand-live span { width: 8px; height: 8px; border-radius: 50%; background: var(--b-gruen); }
body.employee-app .stand-schritte { list-style: none; margin: 12px 0; padding: 0; display: grid; }
body.employee-app .stand-schritte li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; font: 400 16px/20px var(--b-sans); color: var(--b-tinte); }
body.employee-app .stand-schritt-punkt { box-sizing: border-box; justify-self: center; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--b-linie); background: var(--b-karte); }
body.employee-app .stand-schritte li.is-erledigt .stand-schritt-punkt { background: var(--b-tinte); border-color: var(--b-tinte); }
body.employee-app .stand-schritte li.is-jetzt .stand-schritt-punkt { border: 3px solid var(--b-tinte); }
body.employee-app .stand-schritte li.is-jetzt .stand-schritt-name { font-weight: 600; }
body.employee-app .stand-schritte li.is-spaeter { color: var(--b-leise); }
body.employee-app .stand-schritt-zeit { font: 400 14px var(--b-sans); color: var(--b-leise); font-variant-numeric: tabular-nums; }
/* Zeiten: Monate als Knöpfe (30.09.2026) */
body.employee-app .zeiten-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
body.employee-app .zeiten-monate { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
body.employee-app .zeiten-monate a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--b-linie); border-radius: 999px; color: var(--b-tinte); text-decoration: none; font: 500 14px var(--b-sans); }
body.employee-app .zeiten-monate a[aria-current="page"] { background: var(--b-tinte); border-color: var(--b-tinte); color: var(--b-auf-tinte); }
body.employee-app .zeiten-monate .archive-filter { margin: 0; }
body.employee-app .zeiten-monate select { min-height: 36px; padding: 0 12px; border: 1px solid var(--b-linie); border-radius: 999px; background: var(--b-karte); color: var(--b-tinte); font: 500 14px var(--b-sans); }
body.employee-app .zeiten-nachtragen { color: var(--b-tinte); font: 500 14px var(--b-sans); text-decoration: underline; text-underline-offset: 3px; }
/* Nachtragen: Beginn/Ende nebeneinander, Auftrag zum Antippen, Speichern unten fest (30.09.2026) */
body.employee-app .eintrag-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.employee-app .eintrag-auftrag { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
body.employee-app .eintrag-auftrag legend { padding: 0; margin-bottom: 8px; font: 500 14px var(--b-sans); color: var(--b-tinte); }
body.employee-app .eintrag-wahl { display: grid !important; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 52px; padding: 0 16px; border: 1px solid var(--b-linie); border-radius: 12px; font: 500 16px var(--b-sans) !important; cursor: pointer; }
body.employee-app .eintrag-wahl:has(input:checked) { border: 2px solid var(--b-tinte); }
body.employee-app .eintrag-wahl input { width: 20px; height: 20px; margin: 0; accent-color: var(--b-tinte); }
body.employee-app .employee-form-actions { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px -24px 0; padding: 12px 24px; border-top: 1px solid var(--b-linie); background: var(--b-karte); }
body.employee-app .employee-form-actions .button { border: 0; background: none; color: var(--b-tinte); text-decoration: underline; text-underline-offset: 3px; font: 500 15px var(--b-sans); }
body.employee-app .employee-form-actions .primary { padding: 0 28px; }
body.employee-app .form-card { border: 0; box-shadow: none; padding: 0; background: none; }

/* ======================================================================
   Dunkelmodus der Team-App nach Designsystem 1.0 (30.09.2026). Folgt der
   Einstellung des iPhones. Werte aus dem Designsystem; Text auf Orange ist
   dort dunkel (#121212), weil helles Orange sonst zu wenig Kontrast hat.
   ====================================================================== */

body.employee-app .archive-day-text { grid-template-columns: minmax(0, 1fr); }
body.employee-app .stand ol.stand-schritte { grid-template-columns: minmax(0, 1fr) !important; grid-auto-flow: row !important; }
body.employee-app .stand ol.stand-schritte li { width: auto !important; }
body.employee-app .stand ol.stand-schritte li::before, body.employee-app .stand ol.stand-schritte li::after { content: none !important; }
body.employee-app .ek-leiste-knoepfe button { width: auto !important; flex: none; margin: 0 !important; }

body.employee-app .stand ol.stand-schritte li { border: 0 !important; background: none !important; padding: 6px 0 !important; }
body.employee-app .archive-day-text > * { min-width: 0; max-width: 100%; }
body.employee-app form.ek-leiste-knoepfe { display: flex !important; gap: 8px; }

body.employee-app .ek-leiste-knoepfe button { padding: 0 14px !important; }

/* Navigation nach Heikos Vorschlag (30.09.2026): Stammdaten und Archiv leicht abgesetzt. */
.b-nav-trenner { flex: none; width: 1px; height: 20px; margin: 0 8px; background: var(--b-linie); }

/* Übersicht: Zuletzt bearbeitet, Handlungsbedarf in "Als Nächstes", Umsatz rechts. */
.b-zuletzt { display: flex; flex-direction: column; gap: 12px; }
.b-zuletzt ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.b-zuletzt li + li { border-top: 1px solid var(--b-linie); }
body.admin-dashboard-app .b-zuletzt a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; color: var(--b-tinte); text-decoration: none; }
.b-zuletzt a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.b-zuletzt a > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b-zuletzt strong { font-size: 16px; line-height: 20px; font-weight: 500; }
.b-zuletzt small { font-size: 14px; line-height: 18px; color: var(--b-leise); }
.b-entwurf-marke { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--b-akzent); color: var(--b-auf-akzent, #fff); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; }
.stufen-liste li.is-handeln { box-shadow: inset 3px 0 0 var(--b-akzent); padding-left: 16px; }
.b-kennzahlen > a.b-kennzahl-umsatz { grid-column: 1 / -1; background: var(--b-sand); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; color: inherit; text-decoration: none; }
.b-kennzahlen > a.b-kennzahl-umsatz:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.b-entwurf-marke { color: #fff; }
.stufen-liste .stufen-text { min-width: 0; }
.stufen-liste .b-status { white-space: normal; overflow-wrap: anywhere; }

/* Umzug → Planung (30.09.2026): Reiter, je Auftrag eine Karte mit den Punkten. */
.planung-reiter { display: flex; gap: 24px; border-bottom: 1px solid var(--b-linie); margin: 0 0 24px; }
.planung-reiter a { padding: 0 0 12px; color: var(--b-leise); font-size: 16px; line-height: 20px; font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.planung-reiter a:hover { color: var(--b-tinte); }
.planung-reiter a[aria-current="page"] { color: var(--b-tinte); border-bottom-color: var(--b-tinte); font-weight: 600; }
body.admin-dashboard-app main > .planung-reiter { max-width: 1280px; }
.planung-auftrag { padding: 24px; border: 1px solid var(--b-linie); border-radius: 20px; background: var(--b-karte, #fff); display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; scroll-margin-top: 90px; }
.planung-auftrag-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.planung-auftrag-kopf h2 { margin: 0; font-size: 22px; line-height: 26px; font-weight: 600; }
.planung-auftrag-kopf h2 a { color: var(--b-tinte); text-decoration: none; }
.planung-auftrag-kopf h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.planung-auftrag-kopf p { margin: 4px 0 0; }
.vorbereitung-liste li.is-erledigt .vorbereitung-text strong { color: var(--b-leise); }
.vorbereitung-aktion { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.vorbereitung-form input[type="date"] { min-height: 40px; padding: 0 10px; border: 1px solid var(--b-linie); border-radius: 10px; font: inherit; }
.stufen-seite .planung-reiter, .stufen-seite .planung-auftrag { margin: 0; }
body.admin-dashboard-app .planung-reiter a { color: var(--b-leise); }
body.admin-dashboard-app .planung-reiter a:hover, body.admin-dashboard-app .planung-reiter a[aria-current="page"] { color: var(--b-tinte); }
@media (min-width: 761px) {
    .vorbereitung-aktion .vorbereitung-form { display: flex !important; flex-wrap: nowrap; align-items: center; gap: 8px; }
    .vorbereitung-form input[name="ref"] { width: 220px; min-height: 40px; }
}
.planung-titel h1 { margin: 0 0 24px; font: 700 32px/36px var(--b-sans); }
body.admin-dashboard-app main > .planung-reiter { margin-bottom: 32px; }
.planung-monat-titel { margin: 0; font-size: 22px; line-height: 26px; font-weight: 600; }

/* Unterpunkte als Umschalter (Heiko, 30.09.2026) - derselbe wie bisher bei Team (.b-umschalter). */
.b-bereich-umschalter { margin: 0 0 24px; }
@media (max-width: 899px) {
    body.admin-dashboard-app .b-bereich-umschalter { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
    body.admin-dashboard-app .b-bereich-umschalter::-webkit-scrollbar { display: none; }
}
.b-bereich-umschalter a { white-space: nowrap; }

/* Besichtigung (01.10.2026): Kachel in Stufe 2, Mailvorschau, Übersicht. */
.besichtigung-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.besichtigung-form input { min-height: 40px; padding: 0 10px; border: 1px solid var(--b-linie); border-radius: 10px; font: 400 15px var(--b-sans); background: var(--b-karte, #fff); color: var(--b-tinte); }
.b-besichtigungen .b-entwurf-marke { background: var(--b-tinte); color: var(--b-auf-tinte); }
.besichtigung-seite { max-width: 760px; }
.besichtigung-mail { display: grid; gap: 20px; }
.besichtigung-kopf { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--b-linie); }
.besichtigung-kopf dt { color: var(--b-leise); }
.besichtigung-kopf dd { margin: 0; overflow-wrap: anywhere; }
.besichtigung-text { font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.besichtigung-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.besichtigung-knoepfe form { margin: 0; }
.besichtigung-knoepfe p { margin: 0; }
.b-zurueck { color: var(--b-leise); text-decoration: none; }
.b-zurueck:hover { color: var(--b-tinte); }
.services-texte textarea[name$="betreff]"] { min-height: 0; height: 64px; }

/* Kontakte (02.10.2026): Liste, Formular, Suche in der Neuen Anfrage, Rechnungsempfänger. */
.kontakte-suche { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.kontakte-suche input[type="search"] { flex: 1 1 280px; min-height: 44px; padding: 0 14px; border: 1px solid var(--b-linie); border-radius: 12px; font: 400 16px var(--b-sans); background: var(--b-karte, #fff); color: var(--b-tinte); }
.kontakte-suche a { color: var(--b-leise); }
.kontakte-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.kontakte-liste li + li { border-top: 1px solid var(--b-linie); }
body.admin-dashboard-app .kontakte-liste a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: 16px; align-items: center; padding: 14px 4px; color: var(--b-tinte); text-decoration: none; }
.kontakte-liste a:hover .kontakt-name strong { text-decoration: underline; text-underline-offset: 3px; }
.kontakt-name, .kontakt-nah, .kontakt-zahl { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.kontakt-name strong { font-size: 16px; line-height: 20px; font-weight: 500; }
.kontakt-nah { font-size: 14px; line-height: 18px; }
.kontakte-liste small { font-size: 14px; line-height: 18px; color: var(--b-leise); }
.kontakt-zahl { text-align: right; white-space: nowrap; }
@media (max-width: 760px) { body.admin-dashboard-app .kontakte-liste a { grid-template-columns: minmax(0, 1fr) auto; } .kontakt-nah { grid-column: 1 / -1; order: 3; } }
.kontakt-seite { max-width: 820px; }
.kontakt-formular { display: grid; gap: 16px; }
.kontakt-knoepfe { display: flex; gap: 12px; align-items: center; }
.kontakt-auftraege ul { list-style: none; margin: 0; padding: 0; display: grid; }
.kontakt-auftraege li + li { border-top: 1px solid var(--b-linie); }
body.admin-dashboard-app .kontakt-auftraege a { display: grid; gap: 2px; padding: 10px 0; color: var(--b-tinte); text-decoration: none; }
.kontakt-auftraege small { color: var(--b-leise); }
.kontakt-loeschen { margin-top: 8px; }
.na-kontakt { display: grid; gap: 8px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--b-linie); }
.na-kontakt-status { margin: 0; font-size: 14px; line-height: 18px; color: var(--b-leise); }
.na-kontakt-status strong { color: var(--b-tinte); font-weight: 600; }
.na-check { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; color: var(--b-tinte); cursor: pointer; }
.na-check input { width: 20px; height: 20px; accent-color: var(--b-akzent); }
.rechnung-an-name { margin: 0 0 4px; font-size: 16px; line-height: 22px; }
.rechnung-an-wahl { margin-top: 12px; }
.kontakt-vorschlaege small { color: var(--b-leise); margin-left: 4px; }
.rechnung-an .vorbereitung-link { padding: 0; text-align: left; justify-content: flex-start; }

/* Formularfelder im Dunkelmodus (Heiko, 02.10.2026): die alte Grundregel in app.css gibt
   Feldern einen weißen Grund, die Schrift wurde im Dunkelmodus aber hell - weiß auf weiß,
   man sah beim Tippen nichts (Passwort ändern beim ersten Login). Jetzt dunkler Grund,
   helle Schrift, auch bei Browser-Vorschlägen (Autofill). */


/* Immer hell (Heiko, 02.10.2026): der Dunkelmodus ist raus, egal was das Betriebssystem wählt.
   Der Browser darf Formularfelder, Rollbalken und Seiten auch nicht von selbst abdunkeln. */
:root { color-scheme: light only; }

/* Zahlungen, offene Posten, Gutschriften (02.10.2026). */
.belege-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
body.admin-dashboard-app .belege-leiste a { display: inline-grid; gap: 1px; padding: 8px 16px; border: 1px solid var(--b-linie); border-radius: 14px; color: var(--b-tinte); text-decoration: none; font-size: 14px; line-height: 18px; }
.belege-leiste a small { color: var(--b-leise); }
body.admin-dashboard-app .belege-leiste a[aria-current="page"] { background: var(--b-tinte); border-color: var(--b-tinte); color: var(--b-auf-tinte); }
body.admin-dashboard-app .belege-leiste a[aria-current="page"] small { color: inherit; opacity: .8; }
.zahlung-summe { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 12px 0 8px; }
.zahlung-summe dt { color: var(--b-leise); }
.zahlung-summe dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.zahlung-summe .is-offen { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--b-linie); font-size: 18px; line-height: 22px; font-weight: 600; color: var(--b-tinte); }
.zahlung-hinweis { margin: 0 0 12px; font-size: 14px; line-height: 18px; color: var(--b-leise); }
.zahlung-hinweis.is-ueberfaellig { color: var(--b-rot); font-weight: 600; }
.zahlung-hinweis.is-erstatten { padding: 10px 12px; border-radius: 12px; background: var(--b-warm); color: var(--b-akzent-dunkel); }
.zahlung-liste { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; border-top: 1px solid var(--b-linie); }
.zahlung-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--b-linie); }
.zahlung-liste li > span { display: grid; gap: 1px; }
.zahlung-liste small { color: var(--b-leise); font-size: 13px; }
.zahlung-liste form { margin: 0; }
.zahlung-betrag { font-variant-numeric: tabular-nums; font-weight: 500; }
.zahlung-form { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--b-linie); }
.zahlung-form h3 { margin: 0; font-size: 16px; line-height: 20px; font-weight: 600; }
.zahlung-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zahlung-felder label { display: grid; gap: 4px; font-size: 14px; }
.rechnung-korrektur form { display: grid; gap: 10px; }
.korrektur-art { margin: 0; padding: 0; border: 0; }
.rechnung-korrektur label { display: grid; gap: 4px; font-size: 14px; }

.rechnungen-summen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 8px; }
body.admin-dashboard-app .rechnungen-summen a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--b-linie); border-radius: 16px; color: var(--b-tinte); text-decoration: none; }
.rechnungen-summen span { color: var(--b-leise); font-size: 14px; }
.rechnungen-summen strong { font-size: 24px; line-height: 30px; font-weight: 600; }
.rechnungen-summen small { color: var(--b-leise); font-size: 13px; }
.rechnungen-summen a.is-achtung { border-color: var(--b-rot); }
.rechnungen-summen a.is-achtung strong { color: var(--b-rot); }
.rechnungen-jahre { margin-top: -4px; }
.rechnungen-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.rechnungen-liste li + li { border-top: 1px solid var(--b-linie); }
body.admin-dashboard-app .rechnungen-liste a { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1fr) 170px; gap: 16px; align-items: center; padding: 14px 4px; color: var(--b-tinte); text-decoration: none; }
.rechnungen-liste a:hover .rg-kunde strong { text-decoration: underline; text-underline-offset: 3px; }
.rechnungen-liste a > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.rechnungen-liste small { color: var(--b-leise); font-size: 14px; line-height: 18px; }
.rechnungen-liste strong { font-size: 16px; line-height: 20px; font-weight: 500; }
.rechnungen-liste .is-storniert { text-decoration: line-through; color: var(--b-leise); }
.rg-betrag { text-align: right; font-variant-numeric: tabular-nums; }
.rg-stand { justify-items: end; }
.b-kennzahlen div.is-achtung strong { color: var(--b-rot); }
.b-aufgabe.is-ueberfaellig .b-punkt { background: var(--b-rot); }
.b-aufgabe.is-ungestellt .b-punkt { background: var(--b-gelb); }
@media (max-width: 760px) {
    body.admin-dashboard-app .rechnungen-liste a { grid-template-columns: minmax(0, 1fr) auto; }
    .rg-nr { grid-column: 1; } .rg-stand { grid-column: 2; grid-row: 1; } .rg-kunde { grid-column: 1; } .rg-betrag { grid-column: 2; grid-row: 2; }
    .zahlung-felder { grid-template-columns: 1fr; }
}

/* Kopfzeile wie bei Airbnb (Heiko, 02.10.2026): Logo links, Hauptnavigation in der Mitte,
   Aktionen rechts. Der aktive Punkt: dunkle, fette Schrift und ein 2-px-Strich auf der
   Linie der Kopfzeile. Inaktive Punkte sind grau. */
body.admin-dashboard-app .b-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; }
body.admin-dashboard-app .b-marke { grid-column: 1; justify-self: start; }
body.admin-dashboard-app .b-marke img { display: block; height: 30px; width: auto; }
body.admin-dashboard-app .b-nav { grid-column: 2; align-items: stretch; align-self: stretch; gap: 2px; justify-content: center; }
body.admin-dashboard-app .b-kopf-rechts { grid-column: 3; justify-self: end; margin-left: 0; }
body.admin-dashboard-app .b-nav > a,
body.admin-dashboard-app .b-nav-mehr > summary {
    position: relative; display: flex; align-items: center; height: 64px; padding: 0 14px; border-radius: 0; background: none;
    color: var(--b-leise); font-size: 14px; line-height: 20px; font-weight: 500; box-sizing: border-box;
}
body.admin-dashboard-app .b-nav-mehr { display: flex; align-items: stretch; }
body.admin-dashboard-app .b-nav > a:hover,
body.admin-dashboard-app .b-nav-mehr > summary:hover,
body.admin-dashboard-app .b-nav-mehr[open] > summary { background: none; color: var(--b-tinte); }
body.admin-dashboard-app .b-nav > a[aria-current="page"],
body.admin-dashboard-app .b-nav-mehr > summary[aria-current="page"] { background: none; color: var(--b-tinte); font-weight: 600; }
body.admin-dashboard-app .b-nav > a[aria-current="page"]::after,
body.admin-dashboard-app .b-nav-mehr > summary[aria-current="page"]::before {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--b-tinte);
}
body.admin-dashboard-app .b-nav-mehr > summary[aria-current="page"]::after { position: static; height: auto; background: none; content: " ▾"; }
body.admin-dashboard-app .b-nav-trenner { align-self: center; height: 20px; }
body.admin-dashboard-app .b-nav-menue { top: calc(100% + 4px); }
body.admin-dashboard-app .b-nav-menue a:hover, body.admin-dashboard-app .b-nav-menue button:hover { background: var(--b-symbol, #F7F7F7); }
body.admin-dashboard-app .b-nav-menue a[aria-current="page"] { background: var(--b-symbol, #F7F7F7); font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
body.admin-dashboard-app .b-nav-menue a[aria-current="page"]::after { content: "✓"; font-size: 13px; }
@media (max-width: 1100px) { body.admin-dashboard-app .b-nav > a, body.admin-dashboard-app .b-nav-mehr > summary { padding: 0 10px; } body.admin-dashboard-app .b-nav > a[aria-current="page"]::after, body.admin-dashboard-app .b-nav-mehr > summary[aria-current="page"]::before { left: 10px; right: 10px; } }

/* Menüs per Hover (02.10.2026): eine unsichtbare Brücke zwischen Beschriftung und Menü, damit die Maus
   beim Hinüberfahren nicht aus dem Menü fällt. */
body.admin-dashboard-app .b-nav-menue { top: calc(100% + 6px); }
body.admin-dashboard-app .b-nav-menue::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }

/* Stationen mit Aufgaben (02.10.2026): eine Kette von Orten in fester Reihenfolge. */
.na-stationenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.na-station { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--b-linie); border-radius: 14px; background: var(--b-sand); }
.na-station-inhalt { display: grid; gap: 10px; min-width: 0; }
.na-station-knoepfe { display: flex; flex-direction: column; gap: 4px; }
.na-station-knoepfe button { width: 36px; height: 36px; border: 1px solid var(--b-linie); border-radius: 50%; background: var(--b-karte); color: var(--b-tinte); font: 600 16px var(--b-sans); cursor: pointer; }
.na-station-knoepfe button:hover { border-color: var(--b-tinte); }
.na-station-knoepfe button[hidden] { display: none; }
@media (max-width: 560px) {
    .na-station { grid-template-columns: 28px minmax(0, 1fr); }
    .na-station-knoepfe { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
}
.ek-stationen-hinweis { margin: 0 0 8px; color: var(--b-leise); font-size: 13px; }
.stationen-kette { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stationen-kette li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.stationen-kette small { display: block; color: var(--b-leise); font-size: 13px; }

/* Arbeitsplätze und Transportmittel (02.10.2026) */
.na-arbeitsplatzliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.na-arbeitsplatz { display: grid; grid-template-columns: minmax(70px, 0.7fr) minmax(70px, 0.7fr) minmax(110px, 1fr) minmax(160px, 2fr) auto; gap: 8px; align-items: end; padding: 10px 12px; border: 1px solid var(--b-linie); border-radius: 12px; background: var(--b-sand); }
.na-arbeitsplatz .na-feld { min-width: 0; }
.na-ap-weg { width: 36px; height: 36px; border: 1px solid var(--b-linie); border-radius: 50%; background: var(--b-karte); color: var(--b-tinte); font: 600 16px var(--b-sans); cursor: pointer; }
.na-ap-weg[hidden] { display: none; }
.na-ap-einfuegen textarea { width: 100%; box-sizing: border-box; font: 14px var(--b-sans); border: 1px solid var(--b-linie); border-radius: 12px; padding: 10px 12px; background: var(--b-sand); }
@media (max-width: 700px) {
    .na-arbeitsplatz { grid-template-columns: 1fr 1fr; }
    .na-arbeitsplatz .na-ap-umfang { grid-column: 1 / -1; }
    .na-ap-weg { justify-self: end; grid-column: 2; }
}
.na-transport { display: grid; gap: 8px; }
.na-transport-zeile { display: grid; grid-template-columns: minmax(130px, 1.2fr) minmax(90px, 0.7fr) minmax(130px, 1fr); gap: 10px; align-items: center; }
.na-transport-zeile .na-kurz { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--b-leise); }
.na-transport-zeile .na-kurz input.na-t-menge { width: 72px; }
.na-transport-zeile .na-kurz input.na-t-preis { width: 130px; }
.na-transport-zeile .na-kurz input { width: 90px; font: 500 15px var(--b-sans); color: var(--b-tinte); border: 1px solid var(--b-linie); border-radius: 10px; padding: 8px 10px; background: var(--b-sand); }
@media (max-width: 560px) { .na-transport-zeile { grid-template-columns: 1fr 1fr; } .na-transport-zeile .na-check { grid-column: 1 / -1; } }

/* Mehrtägige Aufträge (02.10.2026) */
.na-tage { display: grid; gap: 8px; margin-top: 6px; }
.na-tageliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.na-tag { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(110px, 0.7fr) minmax(180px, 2fr) auto; gap: 8px; align-items: end; padding: 10px 12px; border: 1px solid var(--b-linie); border-radius: 12px; background: var(--b-sand); }
.na-tag .na-feld { min-width: 0; }
@media (max-width: 700px) { .na-tag { grid-template-columns: 1fr 1fr; } .na-tag .na-tag-notiz { grid-column: 1 / -1; } .na-tag .na-ap-weg { justify-self: end; grid-column: 2; } }
.ek-tag-hinweis { margin: 4px 0 0; color: var(--b-akzent); font-weight: 600; font-size: 14px; }

/* Orte (03.10.2026) */
.na-ort-merken { font-size: 13px; color: var(--b-leise); }
.ort-vorschlaege small { color: var(--b-leise); }

.orte-hinweis { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--b-warm); color: var(--b-akzent-dunkel); font-size: 14px; }
.orte-hinweis a { color: inherit; font-weight: 700; }
.orte-offen { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--b-warm); color: var(--b-akzent-dunkel); font-size: 13px; font-weight: 600; }
.orte-adressen { display: grid; gap: 16px; }
.orte-adresszeile { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(180px, 1fr) minmax(200px, 1.4fr); gap: 12px; align-items: end; padding: 10px 0; border-top: 1px solid var(--b-linie); }
.orte-adresszeile:first-of-type { border-top: 0; }
.orte-adresszeile label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--b-leise); }
.orte-adresszeile select, .orte-adresszeile input { min-height: 44px; padding: 0 12px; border: 1px solid var(--b-linie); border-radius: 12px; background: var(--b-sand); font: 500 15px var(--b-sans); color: var(--b-tinte); }
.orte-adresszeile-name { display: grid; gap: 2px; }
.orte-adresszeile-name small { color: var(--b-leise); font-size: 13px; }
@media (max-width: 760px) { .orte-adresszeile { grid-template-columns: 1fr; } }

/* Aufgaben je Station (03.10.2026) */
.ta-gruppe { margin: 18px 0 6px; font: 600 16px/20px var(--b-sans); color: var(--b-tinte); }
.ta-gruppe small { margin-left: 6px; font-weight: 500; color: var(--b-leise); }
.ta-station { font-style: normal; font-weight: 600; margin-right: 4px; color: var(--b-leise); }
.ek-aufgaben-zaehler { color: var(--b-akzent) !important; font-weight: 600; }

/* To-Do-Liste einlesen (03.10.2026) */
.todo-entwurf { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--b-akzent); border-radius: 14px; background: var(--b-warm); }
.todo-entwurf p { margin: 0; font-size: 14px; }
.todo-entwurf-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.todo-marke { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--b-gruen-weich); color: var(--b-gruen); font-size: 13px; font-weight: 600; }
.todo-marke.is-aus { background: var(--b-sand); color: var(--b-leise); }
.todo-ok { color: var(--b-gruen); font-weight: 600; }
.todo-warn { color: var(--b-akzent-dunkel); font-weight: 700; }
.todo-hinweis { color: var(--b-leise); }
.todo-ueberschrift { font-weight: 700; }
.todo-liste-hinweise { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.todo-nicht { background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.todo-nicht summary { cursor: pointer; font-weight: 600; }
.todo-nicht ul { margin: 6px 0; padding-left: 18px; }
.todo-station-name { margin: 8px 0 0 !important; }
.todo-wartet { color: var(--b-leise); font-size: 14px; }
.todo-wartet i { display: inline-block; animation: todo-dreht 1s linear infinite; }
@keyframes todo-dreht { to { transform: rotate(360deg); } }

/* Aufträge auswählen und löschen (03.10.2026) */
.jobs-wahl { text-align: left; vertical-align: middle; }
.jobs-wahl input { width: 20px; height: 20px; cursor: pointer; accent-color: var(--b-akzent); }
.admin-jobs-row.is-gewaehlt { background: var(--b-warm); }
.jobs-auswahlleiste { position: sticky; bottom: 16px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 16px; background: var(--b-karte); border: 1px solid var(--b-linie); border-radius: 16px; box-shadow: 0 8px 24px rgba(34, 34, 34, .16); }
.jobs-auswahlleiste[hidden] { display: none; }
.jobs-auswahlleiste span { margin-right: auto; }
body.admin-dashboard-app .b-knopf.is-gefahr, .b-knopf.is-gefahr { background: var(--b-rot); border: 1px solid var(--b-rot); color: #fff; font-weight: 600; }
body.admin-dashboard-app .b-knopf.is-gefahr:hover, .b-knopf.is-gefahr:hover { filter: brightness(.92); }
.auftrag-loeschen { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--b-linie); border-radius: 999px; color: var(--b-rot); font-size: 14px; font-weight: 600; text-decoration: none; background: var(--b-karte); }
.auftrag-loeschen:hover { border-color: var(--b-rot); background: var(--b-rot-weich); }
.loeschen-seite .admin-form-surface { margin-bottom: 16px; }
.loeschen-liste ul, .loeschen-nummern ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.loeschen-liste li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--b-linie); }
.loeschen-liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.loeschen-folge { color: var(--b-leise); font-size: 13px; }
.loeschen-folge.is-bleibt { color: var(--b-tinte); }
.loeschen-warn { color: var(--b-rot); font-weight: 600; }

/* Einsatzwechsel (03.10.2026) */
.einsatzwechsel-wahl { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--b-linie); border-radius: 12px; cursor: pointer; background: var(--b-karte); }
.einsatzwechsel-wahl input { margin-top: 4px; accent-color: var(--b-akzent); }
.einsatzwechsel-wahl span { display: grid; gap: 2px; }
.einsatzwechsel-wahl small { color: var(--b-leise); font-size: 13px; }
.einsatzwechsel-wahl:has(input:checked) { border-color: var(--b-akzent); background: var(--b-warm); }

/* Tagesfolge (03.10.2026) */
.tagesfolge-person { margin-bottom: 16px; }
.tagesfolge-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; }
.tagesfolge-liste li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--b-linie); }
.tagesfolge-liste li:first-child { border-top: 0; }
.tagesfolge-nr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--b-sand); font-weight: 650; }
.tagesfolge-text { display: grid; gap: 2px; }
.tagesfolge-text a { color: inherit; text-decoration: none; }
.tagesfolge-text a:hover strong { text-decoration: underline; }
.tagesfolge-text small { color: var(--b-leise); font-size: 13px; }
.tagesfolge-liste .ist-knapp .tagesfolge-verzug { color: var(--b-akzent-dunkel); font-weight: 600; }
.tagesfolge-liste .tagesfolge-pfeile { display: flex; flex-direction: row; gap: 6px; margin: 0; }
.tagesfolge-pfeile button { width: 38px; height: 38px; border: 1px solid var(--b-linie); border-radius: 10px; background: var(--b-karte); cursor: pointer; }
.tagesfolge-pfeile button:disabled { opacity: .35; cursor: default; }
.tagesfolge-status { font-weight: 600; }
.tagesfolge-status.is-laeuft, .tagesfolge-status.is-unterwegs { color: var(--b-akzent); }

/* Warnung bei langen Tagen (03.10.2026) */
body.admin-dashboard-app .notice-warning, body.employee-app .notice-warning { background: var(--b-warm); border-color: var(--b-akzent); color: var(--b-akzent-dunkel); }
.lang-hinweis { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; background: var(--b-warm); border: 1px solid var(--b-akzent); border-radius: 12px; color: var(--b-akzent-dunkel); font-size: 14px; }
.lang-hinweis i { flex: none; margin-top: 2px; }
.zeiten-verlauf i.is-lang { outline: 2px solid var(--b-akzent); outline-offset: 1px; }
.archive-day-dauer.ist-lang { color: var(--b-akzent-dunkel); }
.archive-day-dauer .lang-marke { display: block; margin: 2px 0 0; text-align: center; }