/* InnoZeit – Designschicht „Bau-Profi“: dunkle Navigationsleiste mit Sicherheitsgelb als Merkzeichen, weiße Flächen
   mit feiner Kontur auf kühlem Grau, eigenes Blau. Lädt als letzte Datei nach styles.css, apple.css und heute.css und
   überschreibt nur Tokens und Bausteine; Verhalten (Tastatur, Dialoge, iPhone) bleibt in apple.css.
   Ergebnis der UX-Durchsicht vom 08.11.2026 (Designsystem, Mobil, Datenansichten, Barrierefreiheit, Navigation).
   Textfarben haben mindestens 4,5:1 auf ihrer tatsächlichen Fläche, Ränder und Fokus mindestens 3:1. */
:root {
  --bg: #eef1f5; --surface: #ffffff; --surface-2: #f5f7fa; --surface-sunken: #e4e8ee;
  --fill: rgba(15, 28, 46, .06); --fill-strong: rgba(15, 28, 46, .11);
  --fg: #111827; --fg-2: #374151; --muted: #556070; --line: #d8dee6; --hairline: rgba(15, 28, 46, .12);
  --field-line: #8a94a3;
  --accent: #1d5fb8; --accent-fill: #1d5fb8; --accent-hover: #174f9c; --accent-soft: #e6effb; --on-accent: #ffffff;
  --focus: #1d5fb8;
  --brand-ink: #0f1c2e; --brand-ink-2: #1a2b42; --brand-signal: #f2a900;
  --nav-fg: rgba(255, 255, 255, .78);
  --signal: #9a4a00; --danger: #b4232a; --ok: #1b7232; --work: #1b7232; --travel: #0b5f8f; --sick: #b4232a;
  --vac: #8f4f00; --late: #a8410a; --absent: #374151; --masked: #5f6875; --edu: #4338ca; --comp: #7432a0;
  --weather: #006b79; --missing: #b4232a;
  --material: rgba(255, 255, 255, .9);
  --shadow-1: 0 1px 2px rgba(15, 28, 46, .06), 0 0 0 1px rgba(15, 28, 46, .07);
  --shadow-2: 0 4px 12px rgba(15, 28, 46, .08), 0 0 0 1px rgba(15, 28, 46, .06);
  --shadow-float: 0 12px 32px rgba(15, 28, 46, .18), 0 2px 6px rgba(15, 28, 46, .08);
  --radius-s: 8px; --radius: 12px; --radius-l: 16px;
  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --surface: #131c2b; --surface-2: #182334; --surface-sunken: #0e1624;
    --fill: rgba(255, 255, 255, .07); --fill-strong: rgba(255, 255, 255, .12);
    --fg: #e8edf4; --fg-2: #c3cbd6; --muted: #9aa6b6; --line: #26344a; --hairline: rgba(255, 255, 255, .1);
    --field-line: #6b7a90;
    --accent: #6aa8ff; --accent-fill: #2f6fd0; --accent-hover: #3a7be0; --accent-soft: rgba(106, 168, 255, .15); --on-accent: #ffffff;
    --focus: #6aa8ff;
    --brand-ink: #070d18; --brand-ink-2: #111b2b;
    --signal: #f5b342; --danger: #ff7a7a; --ok: #3ccf7e; --work: #3ccf7e; --travel: #5cc2f2; --sick: #ff7a7a;
    --vac: #f5b342; --late: #ff9a4d; --absent: #cfd6df; --masked: #9aa6b6; --edu: #a5a2ff; --comp: #d394ff;
    --weather: #4fd0e3; --missing: #ff7a7a;
    --material: rgba(19, 28, 43, .88);
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, .07);
    --shadow-2: 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 16px rgba(0, 0, 0, .4);
    --shadow-float: 0 16px 40px rgba(0, 0, 0, .55);
  }
  /* Weiße Schrift auf hellen Dunkelmodus-Statusfarben wäre unter 3:1 */
  button.danger, #toast.error { background: #c42b33; color: #fff; border-color: #c42b33; }
  #toast.warn, .sync-badge.offline { color: #111827; }
}

body { font-size: 15px; letter-spacing: -.005em; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
h3 { font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.page-head h1 .mono, td.mono { font-family: var(--font); font-size: inherit; font-variant-numeric: tabular-nums; }
.page-head h1 .mono { font-weight: 500; color: var(--muted); }
td.mono { color: var(--muted); }

/* ---------- Shell ---------- */
.topbar {
  min-height: 56px; gap: 14px; background: var(--surface); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.brand { font-size: 17px; font-weight: 700; }
.brand img { border-radius: 8px; }
.brand small { margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--line); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sync-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; }
.sync-badge.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, var(--surface)); }
.user-btn { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px 4px 4px; border-radius: 10px; }
.user-btn:hover { background: var(--fill); }
.user-btn .avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--brand-ink); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.user-btn .who { display: grid; text-align: right; line-height: 1.2; min-width: 0; }
@media (max-width: 599px) { .user-btn .who { display: none; } .user-btn { padding: 4px; } }

@media (min-width: 900px) {
  .shell { grid-template-columns: 248px minmax(0, 1fr); }
  .topbar .brand { min-width: 222px; }
  nav.side {
    position: sticky; top: 56px; height: calc(100dvh - 56px); overflow-y: auto;
    background: var(--brand-ink); border: 0; padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
  }
  nav.side a {
    position: relative; color: var(--nav-fg); font-size: 14.5px; font-weight: 500; padding: 9px 12px; min-height: 40px;
    border-radius: var(--radius-s); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color .15s, color .15s;
  }
  nav.side a .ico { opacity: .85; }
  nav.side a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  nav.side a.active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--brand-signal); }
  nav.side a.active .ico { opacity: 1; color: var(--brand-signal); }
  main.content { padding: 28px 32px 48px; }
  nav.side .nav-group {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255, 255, 255, .55); padding: 18px 12px 6px;
  }
  nav.side .nav-group:first-child { padding-top: 2px; }
}

/* Auswahllisten: eigener Pfeil statt nativem */
select:not([multiple]) {
  appearance: none; -webkit-appearance: none; padding-right: 34px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23556070' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
}

/* Ladezustand: Knopf bleibt gesperrt, zeigt einen Kreisel statt Text */
button[aria-busy="true"] { position: relative; color: transparent !important; }
button[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: iz-spin .7s linear infinite;
}
button:not(.primary)[aria-busy="true"]::after { border-color: var(--fill-strong); border-top-color: var(--accent); }
@keyframes iz-spin { to { transform: rotate(360deg); } }

/* Dialoge blenden kurz ein */
.modal-back { animation: iz-fade .18s ease-out; }
.modal { animation: iz-rise .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes iz-fade { from { opacity: 0; } }
@keyframes iz-rise { from { opacity: 0; transform: translateY(12px); } }
.page { max-width: 1320px; gap: 22px; }
/* Akte: Reiterinhalt ist eine zweite .page – ohne das schrumpft er auf Inhaltsbreite und steht in der Mitte */
.page .page { max-width: none; margin: 0; width: 100%; }
.page-head { padding-bottom: 2px; }
.page-head > .muted:last-child { margin-left: auto; }

/* ---------- Flächen ---------- */
.card, .table-wrap, .member-list, .stat, .mt-stat, .hero-card { border: 0; box-shadow: var(--shadow-1); border-radius: var(--radius); }
.card { padding: 20px 22px; }
.card .table-wrap, .card .member-list { box-shadow: 0 0 0 1px var(--line); }
.stats { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.page-head .stats { flex: 1 1 420px; }
.stat { padding: 14px 16px; gap: 4px; box-shadow: var(--shadow-1), inset 3px 0 0 transparent; }
.stat.pos { box-shadow: var(--shadow-1), inset 3px 0 0 var(--ok); }
.stat.neg { box-shadow: var(--shadow-1), inset 3px 0 0 var(--danger); }
.stat-label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.stat-value { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.hero-card { box-shadow: var(--shadow-2); }
.hero-card.is-done { box-shadow: var(--shadow-2), inset 0 0 0 2px var(--ok); }

.banner { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; border-radius: var(--radius-s); padding: 11px 14px; box-shadow: inset 4px 0 0 var(--late); }
.banner.warn { background: color-mix(in srgb, var(--late) 9%, var(--surface)); }
.banner.info { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.banner.ok { background: color-mix(in srgb, var(--ok) 10%, var(--surface)); box-shadow: inset 4px 0 0 var(--ok); }
.banner a { font-weight: 600; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); background: var(--surface); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.card .empty { box-shadow: none; background: var(--surface-2); }

/* ---------- Tabellen ---------- */
th {
  background: var(--surface-2); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1;
}
td { padding: 10px 14px; font-size: 14px; vertical-align: middle; border-bottom: 1px solid var(--hairline); }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
tr.clickable:hover td { background: var(--accent-soft); }
tfoot td { background: var(--surface-2); border-top: 1px solid var(--line); font-weight: 650; }
.neg { color: var(--danger); font-weight: 600; }
.pos { color: var(--ok); font-weight: 600; }
td .chip { font-size: 12px; padding: 2px 9px; }
@media (min-width: 900px) { .table-wrap { max-height: calc(100dvh - 200px); overflow: auto; } }

/* ---------- Knöpfe ---------- */
button, .btn { border-radius: var(--radius-s); }
button:not(.primary):not(.ghost):not(.danger):not(.icon-btn):not(.link):not(.member):not(.cal-day):not(.choice):not(.sync-badge):not(.user-btn):not(.od-main):not(.all-present):not(.confirm-btn):not(.time-chip):not(.toast-action):not([aria-pressed="true"]):not(:is(.tabs, .quick, .modal-head, .stepper) *),
.btn:not(.primary) {
  background: var(--surface); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line);
}
button:not(.primary):not(.ghost):not(.danger):not(.icon-btn):not(.link):not(.member):not(.cal-day):not(.choice):not(.sync-badge):not(.user-btn):not(.od-main):not(.all-present):not(.confirm-btn):not(.time-chip):not(.toast-action):not([aria-pressed="true"]):not(:is(.tabs, .quick, .modal-head, .stepper) *):hover,
.btn:not(.primary):hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--field-line); }
.tabs button, .quick button, .modal-head button { box-shadow: none; }
.quick button:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--line); }
button.primary, .btn.primary { background: var(--accent-fill); color: #fff; box-shadow: 0 1px 2px rgba(15, 28, 46, .2); }
button.primary:hover, .btn.primary:hover { background: var(--accent-hover); filter: none; }
button.danger { background: var(--danger); color: #fff; }
button.ghost { color: var(--accent); }
button:disabled, .btn[aria-disabled="true"] { opacity: .45; }
.tabs { background: var(--surface-sunken); padding: 3px; }
.tabs button { color: var(--fg-2); }
.tabs button.active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-2); }

/* ---------- Eingaben ---------- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--field-line); border-radius: var(--radius-s);
  transition: box-shadow .15s;
}
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover { box-shadow: inset 0 0 0 1px var(--fg-2); }
.stepper, .stepper input[type="date"], .date-pick input[type="date"] { box-shadow: none; }
.stepper { background: var(--surface); box-shadow: inset 0 0 0 1px var(--field-line); border-radius: var(--radius-s); }
.booking-edit { background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
input[type="checkbox"] { border-color: var(--field-line); }

/* ---------- Fokus: deckende Farbe, nie mit Transparenz gemischt ---------- */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus) !important; outline-offset: 2px;
}
.date-pick:focus-within { outline-color: var(--focus); }
nav.side a:focus-visible { outline-color: var(--brand-signal) !important; outline-offset: -3px; }
html { scroll-padding-top: 72px; scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Anmeldung ---------- */
.login {
  background:
    linear-gradient(180deg, var(--brand-ink) 0 38%, transparent 38%),
    var(--bg);
}
.login form { box-shadow: var(--shadow-float); border-radius: var(--radius-l); padding: 32px 28px; gap: 16px; max-width: 400px; }
.login .brand { font-size: 24px; }
.login .brand img { width: 34px; height: 34px; }
.login button.primary { min-height: 48px; font-size: 16px; }
.demo-users { line-height: 1.7; padding-top: 12px; border-top: 1px solid var(--line); }
.demo-users code { font-family: var(--font); font-weight: 600; color: var(--fg-2); background: var(--fill); padding: 1px 6px; border-radius: 5px; }

/* ---------- Dialoge und Hinweise ---------- */
.modal { border-radius: var(--radius-l) var(--radius-l) 0 0; }
@media (min-width: 640px) { .modal { border-radius: var(--radius-l); } }
.modal-back { background: rgba(7, 13, 24, .45); }
.modal-head { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--line); }
.modal-foot { border-top: 1px solid var(--line); }
#toast { background: var(--brand-ink); color: #fff; box-shadow: var(--shadow-float); }

/* ---------- Heute ---------- */
.member-list { border-radius: var(--radius); }
.member::after { border-color: var(--muted); }
.member .chip.c-none { color: var(--fg-2); background: var(--fill-strong); }
.heute-head .heute-site { font-size: 20px; }
.heute-head select.heute-site { font-size: 18px; }
.chip { font-weight: 650; }

/* ---------- Handy auf der Baustelle (lädt zuletzt, daher gelten die 48 px wieder) ---------- */
@media (max-width: 899px) {
  body { font-size: 16px; }
  h1 { font-size: 26px; }
  button, .btn, input, select, textarea { min-height: 48px; }
  button.small, .btn.small { min-height: 44px; padding-inline: 14px; font-size: 15px; }
  .modal button.small.ghost { min-width: 88px; }

  .member { min-height: 60px; padding: 10px 14px 10px 4px; gap: 4px 10px; }
  .member .name { font-size: 17px; font-weight: 600; }
  .member .detail { font-size: 14px; color: var(--fg-2); }
  .member .chip { font-size: 14px; padding: 5px 11px; }
  .member-row { grid-template-columns: 56px minmax(0, 1fr); }
  .member-row .pick { min-height: 60px; box-shadow: inset -1px 0 0 var(--hairline); }
  .member-row .pick input { width: 28px; height: 28px; }

  .heute-head .heute-kol, .date-pick, .heute-head select.heute-site { min-height: 48px; }
  .heute-head .stepper .icon-btn { min-width: 48px; min-height: 48px; font-size: 24px; }
  .heute-head select.heute-site { flex-basis: 100%; }

  nav.bottom { overflow-x: visible; background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--line); }
  nav.bottom a { flex: 1 1 0; min-width: 0; min-height: 58px; font-size: 12px; font-weight: 500; color: var(--fg-2); }
  nav.bottom a .ico { opacity: .75; }
  nav.bottom a.active { color: var(--accent); font-weight: 650; box-shadow: inset 0 3px 0 var(--accent); }
  nav.bottom a.active .ico { opacity: 1; }

  .report-bar button { min-height: 56px; font-size: 17px; }
  .report-bar button.all-present { min-height: 64px; }
  .list-tools .link { min-height: 48px; font-size: 16px; }

  .modal-foot .actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
  .modal-foot .actions > :only-child { grid-column: 1 / -1; }
  .modal-foot .actions button { min-height: 54px; font-size: 17px; }
  .quick button { font-size: 16px; border-radius: 14px; }
  .time-chip strong { font-size: 19px; }
  .booking-edit { gap: 10px; padding: 14px; }

  .hero-time { font-size: 44px; }
  .confirm-btn { min-height: 76px; }
  .wrong-btn { min-height: 56px; background: var(--fill); }
  .wd-name, .wd-h { font-size: 13px; }
  main.content { padding-block: 16px 32px; }
}

/* ---------- Formularraster: Beschriftung, Feld und Hinweis je Zeile auf einer Linie ---------- */
/* Ohne das streckt sich jede Feldgruppe auf die Zeilenhöhe und Felder neben langen Beschriftungen werden höher */
.field { align-content: start; }
/* Höchstens 4 Spalten: breite Bildschirme ergeben ruhige Reihen statt 6 + 1 */
.form-grid { grid-template-columns: repeat(auto-fill, minmax(max(180px, calc((100% - 48px) / 4)), 1fr)); }
@supports (grid-template-rows: subgrid) {
  .form-grid { row-gap: 0; column-gap: 16px; }
  .form-grid > .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; margin-bottom: 16px; }
  .form-grid > .field > label { align-self: end; }
  .form-grid > :not(.field) { margin-bottom: 16px; }
}

/* ---------- Quittung mit Unterschrift ---------- */
.receipt-text { font-size: 16px; line-height: 1.5; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius, 10px); background: var(--fill, #f2f4f7); }
/* Die Fläche bleibt auch im Dunkelmodus weiß: so sieht die Unterschrift aus wie auf Papier */
.receipt-tr { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline, #d8dde5); font-size: 14px; color: var(--muted); }
.sig-pad { position: relative; border: 1px solid var(--field-line); border-radius: var(--radius, 10px); background: #fff; overflow: hidden; }
.sig-canvas { display: block; width: 100%; height: 200px; touch-action: none; cursor: crosshair; }
img.sig-canvas { object-fit: contain; cursor: default; }
.sig-line { position: absolute; left: 16px; right: 16px; bottom: 36px; border-top: 1px solid #9aa3af; padding-top: 4px;
  font-size: 12px; color: #5b6472; pointer-events: none; user-select: none; }
@media (max-width: 899px) { .sig-canvas { height: 240px; } }

/* ---------- Selbst stempeln ---------- */
.stamp-card { display: grid; gap: 12px; }
.stamp-btn { width: 100%; min-height: 64px; font-size: 19px; font-weight: 600; border-radius: 14px; border: 0; color: #fff; }
.stamp-btn.in { background: var(--accent); }
.stamp-btn.out { background: var(--brand-ink); }
.stamp-btn[aria-busy="true"] { opacity: .7; }
.stamp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stamp-list li { display: grid; grid-template-columns: 64px 56px 1fr; align-items: baseline; gap: 8px; }
.stamp-art { color: var(--muted); }
.stamp-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* ---------- Präferenzen ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --muted: #3a4250; --hairline: #8a94a3; --line: #8a94a3; }
  .topbar, nav.bottom, .report-bar, .multi-bar, .modal-head, #toast, .update-banner { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); color: var(--fg); }
  .chip { box-shadow: inset 0 0 0 1px currentColor; }
}
@media (forced-colors: active) {
  input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; border: 0; }
  .chip, .sync-badge, button, .btn { border: 1px solid ButtonText; }
  :focus-visible { outline-color: Highlight !important; }
  nav.side a.active { outline: 2px solid Highlight; }
}

/* Sprachwahl Deutsch/Türkisch (Anmeldung, Benutzermenü) */
.lang-switch { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 8px; }
.lang-switch button.active { background: var(--accent, #0a84ff); color: #fff; border-color: transparent; }