/* InnoZeit – Apple-Anmutung (nach Human Interface Guidelines): Systemschrift, gruppierte Listen, getönte
   Knöpfe, Materialien mit Unschärfe. Lädt nach styles.css und überschreibt nur Tokens und Bausteine.
   Statusfarben sind die barrierearmen Apple-Varianten (Kontrast ≥ 4,5:1 als Text auf Weiß). */
:root {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f2f2f7;
  --fill: rgba(118, 118, 128, .12);
  --fill-strong: rgba(118, 118, 128, .2);
  --fg: #1c1c1e;
  --muted: #636366;
  --line: #d1d1d6;
  --hairline: rgba(60, 60, 67, .22);
  --accent: #0071e3;
  --accent-fill: #0071e3;
  --accent-soft: rgba(0, 113, 227, .1);
  --on-accent: #ffffff;
  --signal: #b25000;
  --danger: #d70015;
  --ok: #248a3d;
  --work: #248a3d;
  --travel: #0071a4;
  --sick: #d70015;
  --vac: #b25000;
  --late: #c93400;
  --absent: #3a3a3c;
  --masked: #6c6c70;
  --edu: #3634a3;
  --comp: #8944ab;
  --weather: #008299;
  --missing: #d70015;
  --material: rgba(255, 255, 255, .78);
  --shadow-float: 0 8px 30px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .06);
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --surface: #1c1c1e; --surface-2: #2c2c2e; --fill: rgba(118, 118, 128, .24); --fill-strong: rgba(118, 118, 128, .36);
    --fg: #ffffff; --muted: #98989d; --line: #38383a; --hairline: rgba(84, 84, 88, .6);
    --accent: #0a84ff; --accent-fill: #0071e3; --accent-soft: rgba(10, 132, 255, .18); --on-accent: #ffffff;
    --signal: #ffd60a; --danger: #ff453a; --ok: #30d158; --work: #30d158; --travel: #64d2ff; --sick: #ff453a; --vac: #ffd60a;
    --late: #ff9f0a; --absent: #d1d1d6; --masked: #98989d; --edu: #7d7aff; --comp: #da8fff; --weather: #40c8e0; --missing: #ff453a;
    --material: rgba(30, 30, 30, .72); --shadow-float: 0 8px 30px rgba(0, 0, 0, .5);
  }
}

body { font-size: 16px; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
h1, h2, .heute-site { font-family: var(--font-display); letter-spacing: -.022em; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); padding-inline: 4px; }

/* Materialien: Kopf- und Tab-Leiste durchscheinend mit Unschärfe */
.topbar, nav.bottom {
  background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.topbar { border-bottom: .5px solid var(--hairline); }
nav.bottom { border-top: .5px solid var(--hairline); }
.brand { font-family: var(--font-display); letter-spacing: -.02em; }
.brand img { border-radius: 7px; }
nav.bottom a { font-size: 10.5px; font-weight: 500; padding-top: 7px; }
nav.bottom a.active { font-weight: 600; }
.ico svg { width: 24px; height: 24px; display: block; }
nav.side .ico svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  nav.side { background: var(--surface-2); border-right: .5px solid var(--hairline); }
  nav.side a { border-radius: 8px; padding: 8px 10px; }
  nav.side a:hover { background: var(--fill); }
  nav.side a.active { background: var(--accent-fill); color: #fff; }
}
.sync-badge { border: 0; background: var(--fill); }
.sync-badge.ok { background: color-mix(in srgb, var(--ok) 14%, transparent); }

/* Gruppierte Inhalte: weiße Flächen ohne Rahmen auf grauem Grund */
.card, .stat, .table-wrap, .member-list, .login form { border: 0; border-radius: var(--radius); }
.card { padding: 16px 18px; }
.stat-label { text-transform: none; letter-spacing: 0; font-size: 13px; }
.stat-value { font-size: 22px; font-weight: 600; font-family: var(--font-display); }
th { text-transform: none; letter-spacing: 0; font-size: 13px; background: transparent; }
th, td { border-bottom: .5px solid var(--hairline); padding: 11px 12px; }
tr.clickable:hover td { background: var(--fill); }
.login form { box-shadow: var(--shadow-float); border-radius: 18px; padding: 28px; }

/* Knöpfe: gefüllt (primär), getönt (Standard), schlicht (ghost) */
button, .btn {
  border: 0; border-radius: 10px; background: var(--fill); color: var(--accent); font-weight: 600; min-height: 44px; padding: 10px 16px;
  transition: background-color .15s, transform .1s, filter .15s;
}
button:hover, .btn:hover { border-color: transparent; background: var(--fill-strong); }
button:active, .btn:active { transform: scale(.97); }
button.primary, .btn.primary { background: var(--accent-fill); color: #fff; }
button.primary:hover, .btn.primary:hover { filter: brightness(1.08); background: var(--accent-fill); }
button.danger { background: var(--danger); }
button.ghost { background: transparent; color: var(--accent); }
button.ghost:hover { background: var(--fill); }
button.small { min-height: 34px; padding: 6px 12px; font-size: 14px; border-radius: 8px; }
.icon-btn { color: var(--accent); background: transparent; }
@media (prefers-reduced-motion: reduce) { button, .btn { transition: none; } button:active, .btn:active { transform: none; } }

input, select, textarea { border: 0; border-radius: 10px; background: var(--fill); min-height: 44px; padding: 10px 12px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.field label { font-weight: 500; }
/* Runde Häkchen wie in iOS */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 50%;
  border: 1.5px solid #c7c7cc; background: var(--surface) center / 14px no-repeat; cursor: pointer; flex: none;
}
input[type="checkbox"]:checked {
  border-color: var(--accent-fill); background-color: var(--accent-fill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="checkbox"]:disabled { opacity: .35; cursor: default; }

.stepper { border: 0; background: var(--fill); border-radius: 10px; }
.stepper input[type="date"] { background: transparent; }
/* Reiter als Segment-Steuerung */
.tabs { border: 0; background: var(--fill); border-radius: 10px; padding: 2px; gap: 2px; width: fit-content; max-width: 100%; }
.tabs button { border: 0; border-radius: 8px; min-height: 34px; padding: 6px 14px; color: var(--fg); font-weight: 500; background: transparent; }
.tabs button.active { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* Status als getönte Kapseln statt Umrandung */
.chip { border: 0; background: color-mix(in srgb, currentColor 13%, transparent); padding: 3px 10px; font-weight: 600; }
.banner, .error-box { border: 0; border-radius: var(--radius); font-weight: 500; }
.banner.warn { background: color-mix(in srgb, var(--late) 13%, var(--surface)); }
.banner.info { background: var(--accent-soft); }
.banner.ok { background: color-mix(in srgb, var(--ok) 13%, var(--surface)); }

/* Heute: gruppierte Liste mit eingerückten Trennlinien und Hinweispfeil */
.member-list { overflow: hidden; }
.member { border-bottom: 0; }
.member-list > .member + .member { box-shadow: inset 0 .5px 0 var(--hairline); }
.member { grid-template-columns: minmax(0, 1fr) auto 12px; color: var(--fg); min-height: 60px; }
.member::after { content: ""; width: 8px; height: 8px; border: solid #c4c4c7; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-left: 2px; }
.member .detail { grid-column: 1 / 3; }
.member:hover, .member:active { background: var(--fill); transform: none; }
.member .name { font-weight: 500; font-size: 16.5px; }
.all-present { border-radius: 14px; min-height: 58px; }
.heute-site { font-size: 26px; }
.report-bar, .multi-bar {
  border: 0; border-radius: 18px; background: var(--material); box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.report-bar button { border-radius: 12px; }
.progress-track { height: 6px; border-radius: 99px; background: var(--fill); overflow: hidden; }

/* Tageseditor */
.booking-edit { border: 0; background: var(--surface-2); border-radius: var(--radius); }
.booking-edit input, .booking-edit select { background: var(--surface); }
.abs-line { border: 0; background: var(--surface-2); border-radius: var(--radius); }
.booking-edit.is-new, .abs-line.is-new { box-shadow: inset 0 0 0 2px var(--accent); }
.quick { gap: 8px; }
.quick button { border-radius: 99px; min-height: 40px; padding-inline: 16px; font-size: 14.5px; }
.quick button[aria-pressed="true"] { background: var(--accent-fill); color: #fff; }
.ask-panel { border: 0; background: var(--accent-soft); border-radius: 14px; }
.time-chip { border-radius: 12px; background: var(--surface); }
.time-chip[aria-pressed="true"] { background: var(--accent-fill); color: #fff; }
.quick button.asking { box-shadow: inset 0 0 0 2px var(--accent-fill); }
/* Mobil: die Regeln oben (40 px, small 34 px) überschreiben sonst die 52/44 px aus styles.css */
@media (max-width: 899px) {
  .quick button { min-height: 52px; }
  .time-chip { min-height: 52px; }
  .modal button.small { min-height: 44px; }
}
.day-result { border: 0; background: var(--surface); box-shadow: inset 4px 0 0 var(--tone, var(--line)), 0 0 0 .5px var(--hairline); border-radius: 14px; }
.removed-line { border-radius: 10px; background: var(--fill); }

/* Dialog als Blatt (Sheet) mit runder Schließen-Taste */
.modal-back { background: rgba(0, 0, 0, .32); }
.modal { border-radius: 16px 16px 0 0; box-shadow: var(--shadow-float); }
@media (min-width: 640px) { .modal { border-radius: 16px; } }
.modal-head { border-bottom: .5px solid var(--hairline); background: var(--material); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.modal-head h2 { font-size: 17px; font-weight: 600; }
.modal-head button { width: 30px; height: 30px; min-height: 30px; min-width: 30px; padding: 0; border-radius: 50%; background: var(--fill); color: var(--muted); font-size: 15px; }
/* Schließen: sichtbar 30 px, Trefferfläche 44 px (Handschuhe) */
.modal-head .modal-close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 7px; background-clip: content-box; margin: -7px -7px -7px 0; }
.modal-foot { border-top: .5px solid var(--hairline); }
#toast { border-radius: 99px; background: color-mix(in srgb, var(--fg) 88%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 11px 20px; }
.update-banner { border: 0; border-radius: 16px; box-shadow: var(--shadow-float); background: var(--material); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.user-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-weight: 600; font-size: 15px; }
@media (min-width: 600px) { .user-btn { max-width: 38vw; } }
.user-btn small { white-space: nowrap; }

/* Auswahlknöpfe (z. B. Schlechtwetter-Ursache): gewählt = volle Akzentfarbe, damit es auf getönter Fläche eindeutig ist */
.choice[aria-pressed="true"], .choice.active { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.multi-mode .choice { min-height: 44px; font-size: 15px; }

/* ---------- iPhone: Verhalten wie eine App ----------
   Kein grauer Tipp-Blitz (Knöpfe haben eigenes :active), keine Schriftvergrößerung im Querformat,
   kein Doppeltipp-Zoom auf Bedienelementen. Ziehen-zum-Neuladen der Seite bleibt erhalten; nur Dialoge
   halten das Scrollen bei sich, damit die Seite dahinter nicht mitrollt. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button, .btn, a, label, select, summary, input[type="checkbox"], input[type="radio"], .member, .cal-day { touch-action: manipulation; }
.modal-back, .modal { overscroll-behavior: contain; }
/* Programmatischer Startfokus auf der Dialog-Überschrift ohne Rahmen; Tastaturfokus bleibt sichtbar */
.modal-head h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Querformat: Dialog nicht unter Kamera-Aussparung und Home-Leiste */
.modal-back { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (min-width: 640px) {
  .modal-back { padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
}
/* Bildschirmtastatur (lib/ui.js setzt --vvt/--vvh aus window.visualViewport): Der Dialog-Hintergrund deckt nur
   den sichtbaren Bereich ab, die feste Fußzeile mit „Speichern“ bleibt über der Tastatur. */
.modal-back.vv { top: var(--vvt, 0px); bottom: auto; height: var(--vvh, 100%); }
.modal-back.vv .modal { max-height: min(92dvh, calc(var(--vvh) - 8px)); }
@media (min-width: 640px) { .modal-back.vv .modal { max-height: min(92dvh, calc(var(--vvh) - 48px)); } }

/* Hinweis über Bottom-Nav und Home-Leiste; ist die Meldeleiste sichtbar, darüber. Bei offenem Dialog oben. */
body:has(.report-bar:not([hidden])) #toast { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  #toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  body:has(.report-bar:not([hidden])) #toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
body:has(.modal-back) #toast { top: calc(12px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translateX(-50%) translateY(-20px); }
body:has(.modal-back) #toast.show { transform: translateX(-50%) translateY(0); }