/*
 * Dashboard – lila Glas-Look (Apple-inspiriert)
 * Grundsätze: Lesbarkeit und eindeutige Statusfarben vor Effekten.
 * Statusfarben liegen immer auf soliden Flächen (nicht auf Glas), Badges tragen stets Text.
 * Materialgewicht: Navigation = schwereres, dunkleres Glas; Karten = leichteres Glas;
 * innere Flächen ohne eigenen Blur (kein Glas auf Glas).
 */

:root {
  color-scheme: dark;

  /* Grundfarben */
  --bg-0: #0d0720;
  --accent: #b69cff;
  --accent-solid: #6542e8;
  --focus: #e6dbff;

  /* Text – auf dunklem Violett geprüft (Kontrast deutlich über 4.5:1) */
  --text: #f6f3ff;
  --text-2: rgba(238, 232, 255, 0.84);
  --text-3: rgba(228, 220, 255, 0.72);

  /* Materialien */
  --glass: rgba(255, 255, 255, 0.075);
  --glass-heavy: rgba(20, 11, 42, 0.66);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-edge: rgba(255, 255, 255, 0.26);
  --inner: rgba(8, 4, 22, 0.38);
  --inner-border: rgba(255, 255, 255, 0.09);
  --solid-surface: #22163f;
  --field-bg: #1a1035;
  --field-border: rgba(255, 255, 255, 0.24);

  /* Größere Flächen = stärkerer Blur + tieferer Schatten */
  --blur-s: blur(14px) saturate(150%);
  --blur-m: blur(24px) saturate(165%);
  --blur-l: blur(36px) saturate(170%);
  --shadow-s: 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-m: 0 10px 30px rgba(0, 0, 0, 0.34);
  --shadow-l: 0 24px 60px rgba(0, 0, 0, 0.44);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nav-w: 15.5rem;

  /* Statusfarben: Kennfarbe, solide Hintergrundfläche, Textfarbe */
  --ok: #30d158;        --ok-bg: #12351f;      --ok-fg: #9af2b5;
  --cond: #ffd60a;      --cond-bg: #383010;    --cond-fg: #ffe772;
  --missing: #ff9f0a;   --missing-bg: #3d2508; --missing-fg: #ffc46e;
  --bad: #ff453a;       --bad-bg: #431517;     --bad-fg: #ffaaa3;
  --off: #a1a1aa;       --off-bg: #2a2734;     --off-fg: #dcdbe3;
  --info: #b69cff;      --info-bg: #2c2052;    --info-fg: #ddd1ff;
  --crit: #e6dbff;      --crit-bg: #3b2a6e;    --crit-fg: #f3edff;
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font: 100%/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-optical-sizing: auto;
  color: var(--text);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
}

/* Ruhiger, nicht animierter Farbverlauf als feste Ebene hinter allem */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70rem 50rem at -5% -10%, rgba(124, 77, 255, 0.42), transparent 60%),
    radial-gradient(55rem 42rem at 110% 5%, rgba(176, 82, 214, 0.26), transparent 55%),
    radial-gradient(50rem 40rem at 50% 120%, rgba(72, 52, 212, 0.30), transparent 60%),
    linear-gradient(165deg, #1b0f3d 0%, #120a2a 45%, #0b0619 100%);
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: #d4c6ff; }

/* Typografie: größenabhängiges Tracking und Zeilenabstand */
h1 {
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 700;
}
h2 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.014em;
  font-weight: 650;
}
h3 {
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.008em;
  font-weight: 600;
}
.eyebrow {
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--text-3);
}
.caption {
  font-size: 0.8125rem;
  line-height: 1.45;
  letter-spacing: 0.008em;
}
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Fokus immer sichtbar bei Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: var(--solid-surface);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-m);
}
.skip-link:focus { top: max(1rem, env(safe-area-inset-top)); }

/* ---------- Layout ---------- */

.app {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  min-height: 100vh;
}
.app.no-nav { grid-template-columns: minmax(0, 1fr); }

.nav {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem 0.875rem;
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-left: max(0.875rem, env(safe-area-inset-left));
  background: var(--glass-heavy);
  -webkit-backdrop-filter: var(--blur-l);
  backdrop-filter: var(--blur-l);
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--shadow-m);
  z-index: 20;
}
.nav[hidden] { display: none; }

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.5rem;
}
.nav-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 9px;
  background: var(--accent-solid);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.nav-brand-text {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  overflow-y: auto;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: -0.003em;
  transition: background-color 160ms ease, color 160ms ease, transform 120ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.nav-link:active { transform: scale(0.97); transition-duration: 60ms; }
.nav-link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.nav-glyph {
  display: inline-grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.9375rem;
  line-height: 1;
}
.nav-link[aria-current="page"] .nav-glyph { background: var(--accent-solid); color: #fff; }

.nav-footer {
  margin-top: auto;
  padding: 0.75rem 0.5rem 0;
  border-top: 1px solid var(--glass-border);
  display: grid;
  gap: 0.375rem;
}
.nav-user { font-weight: 600; letter-spacing: -0.005em; }

.main {
  width: 100%;
  max-width: 78rem;
  padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem;
  padding-top: max(2rem, env(safe-area-inset-top));
  padding-right: max(clamp(1rem, 3vw, 2.5rem), env(safe-area-inset-right));
}
.main:focus { outline: none; }

.view > * + * { margin-top: 1.25rem; }
.stack > * + * { margin-top: 1rem; }
.stack-s > * + * { margin-top: 0.5rem; }

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.grid-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.grid-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* ---------- Seitenkopf ---------- */

.page-header { display: grid; gap: 0.375rem; }
.page-header h1:focus { outline: none; }
.page-header h1:focus-visible { outline: 3px solid var(--focus); }
.page-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page-subtitle { color: var(--text-2); font-size: 1rem; letter-spacing: -0.003em; }

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
}
.subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.375rem 1rem;
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.9375rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--inner-border);
  transition: background-color 160ms ease, transform 120ms var(--ease);
}
.subnav a:hover { background: rgba(255, 255, 255, 0.11); color: var(--text); }
.subnav a:active { transform: scale(0.97); }
.subnav a[aria-current="page"] { background: rgba(255, 255, 255, 0.18); color: #fff; font-weight: 650; }

/* ---------- Karten / Materialien ---------- */

.card {
  position: relative;
  padding: 1.25rem;
  border-radius: var(--radius-l);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur-m);
  backdrop-filter: var(--blur-m);
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-edge); /* heller oberer Rand = Lichtkante */
  box-shadow: var(--shadow-m);
}
.card > * + * { margin-top: 0.875rem; }
.card-small {
  padding: 1rem;
  border-radius: var(--radius-m);
  -webkit-backdrop-filter: var(--blur-s);
  backdrop-filter: var(--blur-s);
  box-shadow: var(--shadow-s);
}
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
.card-head h2, .card-head h3 { margin: 0; }

/* Innere Flächen: kein eigener Blur, damit nicht Glas auf Glas liegt */
.inset {
  padding: 0.875rem 1rem;
  border-radius: var(--radius-m);
  background: var(--inner);
  border: 1px solid var(--inner-border);
}

/* ---------- Kennzahlen ---------- */

.metric { display: grid; gap: 0.25rem; text-decoration: none; color: inherit; }
.metric-label { font-size: 0.875rem; color: var(--text-2); letter-spacing: 0; font-weight: 550; }
.metric-value {
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.metric-note { font-size: 0.8125rem; color: var(--text-3); letter-spacing: 0.008em; }
a.metric-card { color: inherit; text-decoration: none; transition: transform 120ms var(--ease), background-color 160ms ease; }
a.metric-card:hover { background: rgba(255, 255, 255, 0.1); }
a.metric-card:active { transform: scale(0.97); }
.metric.tone-cond .metric-value { color: var(--cond-fg); }
.metric.tone-bad .metric-value { color: var(--bad-fg); }

/* ---------- Badges (Status immer mit Text, Farbe nur zusätzlich) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: 0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  background: var(--off-bg);
  color: var(--off-fg);
}
.badge::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge.tone-ok      { background: var(--ok-bg);      color: var(--ok-fg);      border-color: rgba(48, 209, 88, 0.45); }
.badge.tone-cond    { background: var(--cond-bg);    color: var(--cond-fg);    border-color: rgba(255, 214, 10, 0.45); }
.badge.tone-missing { background: var(--missing-bg); color: var(--missing-fg); border-color: rgba(255, 159, 10, 0.5); }
.badge.tone-bad     { background: var(--bad-bg);     color: var(--bad-fg);     border-color: rgba(255, 69, 58, 0.5); }
.badge.tone-off     { background: var(--off-bg);     color: var(--off-fg);     border-color: rgba(161, 161, 170, 0.4); }
.badge.tone-info    { background: var(--info-bg);    color: var(--info-fg);    border-color: rgba(182, 156, 255, 0.45); }
.badge.tone-crit    { background: var(--crit-bg);    color: var(--crit-fg);    border-color: rgba(230, 219, 255, 0.6); }
.badge.tone-ok::before      { background: var(--ok); }
.badge.tone-cond::before    { background: var(--cond); }
.badge.tone-missing::before { background: var(--missing); }
.badge.tone-bad::before     { background: var(--bad); }
.badge.tone-off::before     { background: var(--off); }
.badge.tone-crit::before    { border-radius: 2px; transform: rotate(45deg); }

/* ---------- Hinweise / Zustände ---------- */

.notice {
  padding: 0.875rem 1rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--inner-border);
  background: var(--solid-surface);
  color: var(--text);
}
.notice > * + * { margin-top: 0.5rem; }
.notice-title { font-weight: 650; letter-spacing: -0.005em; }
.notice.tone-ok      { background: var(--ok-bg);      border-color: rgba(48, 209, 88, 0.5); }
.notice.tone-cond    { background: var(--cond-bg);    border-color: rgba(255, 214, 10, 0.5); }
.notice.tone-missing { background: var(--missing-bg); border-color: rgba(255, 159, 10, 0.55); }
.notice.tone-bad     { background: var(--bad-bg);     border-color: rgba(255, 69, 58, 0.55); }
.notice.tone-info    { background: var(--info-bg);    border-color: rgba(182, 156, 255, 0.45); }
.notice.tone-off     { background: var(--off-bg);     border-color: rgba(161, 161, 170, 0.4); }

.loading { color: var(--text-2); padding: 1rem 0; }
.empty {
  text-align: center;
  padding: 2rem 1rem;
  border-radius: var(--radius-m);
  background: var(--inner);
  border: 1px dashed rgba(255, 255, 255, 0.2);
}
.empty > * + * { margin-top: 0.5rem; }
.empty-title { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.01em; }

.auth-page {
  max-width: 36rem;
  margin: 12vh auto 0;
}

/* ---------- Schlüssel/Wert-Listen ---------- */

.kv {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: 0.5rem 1rem;
  font-size: 0.9375rem;
}
.kv dt { color: var(--text-2); }
.kv dd { font-weight: 550; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 120ms var(--ease), background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.16); color: var(--text); }
/* Press-Feedback sofort beim Drücken */
.btn:active:not(:disabled) { transform: scale(0.97); transition-duration: 60ms; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent-solid);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--shadow-s);
}
.btn-primary:hover { background: #7352f2; color: #fff; }
.btn-danger {
  background: var(--bad-bg);
  border-color: rgba(255, 69, 58, 0.6);
  color: #ffd7d3;
}
.btn-danger:hover { background: #561b1e; color: #ffe3e0; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--accent); }
.btn-quiet:hover { background: rgba(255, 255, 255, 0.08); color: #d4c6ff; }
.btn-small { padding: 0.375rem 0.75rem; font-size: 0.875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Segmentierte Steuerung (Filter) */
.segmented {
  display: inline-flex;
  padding: 0.25rem;
  gap: 0.25rem;
  border-radius: 14px;
  background: var(--inner);
  border: 1px solid var(--inner-border);
}
.segmented button {
  appearance: none;
  min-height: 44px;
  min-width: 44px;
  padding: 0.375rem 0.875rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 550;
  cursor: pointer;
  transition: background-color 160ms ease, transform 120ms var(--ease);
}
.segmented button:active { transform: scale(0.97); }
.segmented button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ---------- Formulare ---------- */

.form-grid {
  display: grid;
  gap: 0.875rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.field { display: grid; gap: 0.375rem; align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field-label { font-size: 0.875rem; font-weight: 600; color: var(--text-2); letter-spacing: 0.002em; }
.req { color: var(--missing-fg); }
.field-hint { font-size: 0.8125rem; color: var(--text-3); letter-spacing: 0.008em; }
.field-error { font-size: 0.8125rem; color: var(--bad-fg); font-weight: 600; }
.field-error:empty { display: none; }

.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 1rem; /* verhindert Zoom auf iOS */
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: rgba(228, 220, 255, 0.55); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--accent);
}
[aria-invalid="true"] { border-color: var(--bad) !important; }

input[type="checkbox"], input[type="radio"] {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: #8f6cff;
  flex: none;
}
.check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  cursor: pointer;
  font-weight: 550;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.form-section {
  padding: 1rem;
  border-radius: var(--radius-m);
  background: var(--inner);
  border: 1px solid var(--inner-border);
}
.form-section > legend {
  float: left;
  width: 100%;
  margin-bottom: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.008em;
}
.form-section > legend + * { clear: both; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.radio-list { display: grid; gap: 0.25rem; }
.radio-option { display: grid; gap: 0.125rem; }
.radio-option .field-hint { padding-left: 2rem; }

/* ---------- Status-Kurzlagen ---------- */

.status-counts { display: grid; gap: 0.375rem; }
.status-counts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.status-counts .count { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.0625rem; }

.connector-list { display: grid; gap: 0.5rem; }
.connector {
  padding: 0.75rem 0.875rem;
  border-radius: 12px;
  background: var(--inner);
  border: 1px solid var(--inner-border);
}
.connector-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 0.75rem; }
.connector-name { font-weight: 600; }
.connector-reason { margin-top: 0.375rem; font-size: 0.875rem; color: var(--text-2); }
.metric-empty { color: var(--text-3); }

/* ---------- To-dos ---------- */

.todo-list { display: grid; gap: 0.5rem; }
.todo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 0.25rem;
  border-radius: 14px;
  background: var(--inner);
  border: 1px solid var(--inner-border);
  transition: opacity 160ms ease;
}
.todo.is-busy { opacity: 0.6; }
.todo-check {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.todo-body { padding-top: 0.55rem; min-width: 0; }
.todo-title { font-weight: 600; overflow-wrap: anywhere; }
.todo.is-done .todo-title { text-decoration: line-through; color: var(--text-3); }
.todo-notes { margin-top: 0.25rem; font-size: 0.9375rem; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.todo-meta { margin-top: 0.375rem; }
.todo-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: flex-end; }
.todo-edit {
  grid-column: 1 / -1;
  padding: 0.5rem 0.5rem 0.25rem 0.75rem;
}
.day-group + .day-group { margin-top: 1rem; }
.day-group h3 { margin-bottom: 0.5rem; }

/* ---------- Fitomat: Objektliste ---------- */

.object-list { display: grid; gap: 0.5rem; container-type: inline-size; container-name: objlist; }
.object-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 1rem;
  min-height: 44px;
  padding: 0.875rem 1rem;
  border-radius: 14px;
  background: var(--inner);
  border: 1px solid var(--inner-border);
  color: var(--text);
  text-decoration: none;
  transition: background-color 160ms ease, transform 120ms var(--ease);
}
.object-row:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.object-row:active { transform: scale(0.985); }
.object-main { display: grid; gap: 0.125rem; min-width: 0; }
.object-title { font-weight: 650; letter-spacing: -0.005em; overflow-wrap: break-word; word-break: normal; hyphens: auto; }
.object-sub { font-size: 0.875rem; color: var(--text-2); overflow-wrap: anywhere; }
.object-facts { font-size: 0.875rem; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
/* Nach tatsächlich verfügbarer Inhaltsbreite stapeln (nicht nach Fensterbreite): Badge, Titel, Fakten je Zeile */
@container objlist (max-width: 40rem) {
  .object-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .object-facts { text-align: left; }
}

/* ---------- Tabelle Gebietspunkte ---------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}
.toolbar .field { flex: 1 1 16rem; }

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-m);
  background: var(--inner);
  border: 1px solid var(--inner-border);
  -webkit-overflow-scrolling: touch;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 56rem;
}
table.data th, table.data td {
  text-align: left;
  vertical-align: top;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
table.data th {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--text-2);
  background: #1d1240;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tr.is-dup td { background: rgba(255, 159, 10, 0.07); }
table.data .cell-sub { display: block; font-size: 0.8125rem; color: var(--text-3); }

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

/* Gebietspunkt-Auswahl im Objektformular */
.picker-results { display: grid; gap: 0.375rem; margin-top: 0.5rem; }
.picker-results li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.picker-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }

/* ---------- Objektdetail ---------- */

.status-panel {
  padding: 1.5rem;
  border-radius: var(--radius-l);
  border: 1px solid;
  box-shadow: var(--shadow-l);
  background: var(--off-bg);
  border-color: rgba(161, 161, 170, 0.4);
}
.status-panel > * + * { margin-top: 0.5rem; }
.status-title {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 750;
}
.status-panel .status-explain { color: var(--text); opacity: 0.92; }
.status-panel.tone-ok      { background: var(--ok-bg);      border-color: rgba(48, 209, 88, 0.55); }
.status-panel.tone-cond    { background: var(--cond-bg);    border-color: rgba(255, 214, 10, 0.55); }
.status-panel.tone-missing { background: var(--missing-bg); border-color: rgba(255, 159, 10, 0.6); }
.status-panel.tone-bad     { background: var(--bad-bg);     border-color: rgba(255, 69, 58, 0.6); }
.status-panel.tone-ok .status-title      { color: var(--ok-fg); }
.status-panel.tone-cond .status-title    { color: var(--cond-fg); }
.status-panel.tone-missing .status-title { color: var(--missing-fg); }
.status-panel.tone-bad .status-title     { color: var(--bad-fg); }
.status-figure { font-weight: 600; font-variant-numeric: tabular-nums; }

.reason-list { display: grid; gap: 0.5rem; }
.reason-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 12px;
  background: var(--inner);
  border: 1px solid var(--inner-border);
}
.reason-list li > span:last-child { flex: 1 1 14rem; }

/* Checkliste */
.checklist-page + .checklist-page { margin-top: 1.5rem; }
.checklist-page > h3 { margin-bottom: 0.75rem; }
.checklist { display: grid; gap: 0.75rem; }
.check-item {
  padding: 1rem;
  border-radius: var(--radius-m);
  background: var(--inner);
  border: 1px solid var(--inner-border);
}
.check-item.is-critical { border-left: 4px solid var(--crit); }
.check-item.is-dirty { border-color: rgba(182, 156, 255, 0.6); }
.check-item.is-done .check-item-label { color: var(--text-2); }
.check-item legend {
  float: left;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.625rem;
  margin-bottom: 0.5rem;
}
.check-item legend + * { clear: both; }
.check-item-pos { font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.check-item-label { font-weight: 600; letter-spacing: -0.003em; }
.check-item-notes { display: grid; gap: 0.25rem; margin-bottom: 0.75rem; }
.check-item-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
}
.check-item .form-grid { margin-top: 0.25rem; }

/* Entscheidungen und Verlauf */
.decision-list, .audit-list { display: grid; gap: 0.5rem; }
.decision {
  padding: 0.875rem 1rem;
  border-radius: 14px;
  background: var(--inner);
  border: 1px solid var(--inner-border);
}
.decision > * + * { margin-top: 0.375rem; }
.decision-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
.decision-action { font-weight: 650; }
.audit-list { max-height: 28rem; overflow-y: auto; }
.audit-list li {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.9375rem;
}
.audit-list li:last-child { border-bottom: 0; }
.audit-time { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.audit-detail { color: var(--text-2); overflow-wrap: anywhere; white-space: pre-wrap; }

/* ---------- Toasts ---------- */

.toast-region {
  position: fixed;
  z-index: 60;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem 0.75rem 1rem;
  border-radius: 14px;
  background: var(--solid-surface); /* solide Fläche: Meldung liegt über beliebigem Inhalt */
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-m);
  animation: toast-in 220ms var(--ease) both;
}
.toast.tone-ok  { background: var(--ok-bg);  border-color: rgba(48, 209, 88, 0.55); }
.toast.tone-bad { background: var(--bad-bg); border-color: rgba(255, 69, 58, 0.6); }
.toast-text { flex: 1; padding-top: 0.15rem; font-weight: 550; overflow-wrap: anywhere; }
.toast-close {
  appearance: none;
  flex: none;
  width: 44px; height: 44px;
  margin: -0.5rem 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 1.25rem;
  cursor: pointer;
}
.toast-close:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Bewegungen (dezent) ---------- */

.view { animation: view-in 240ms var(--ease) both; }

@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Mobil: untere Tab-Leiste ---------- */

@media (max-width: 47.5em) {
  .app { display: block; }

  .nav {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    height: auto;
    flex-direction: row;
    gap: 0;
    padding: 0.375rem max(0.5rem, env(safe-area-inset-right)) calc(0.375rem + env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
    border-right: 0;
    border-top: 1px solid var(--glass-edge);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  }
  .nav-brand, .nav-footer { display: none; }

  /* 9 Bereiche: horizontal scrollbar statt gequetscht */
  .nav-list {
    flex-direction: row;
    gap: 0.25rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-list::-webkit-scrollbar { display: none; }
  .nav-list li { flex: 1 0 auto; scroll-snap-align: start; }
  .nav-link {
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    min-width: 4.5rem;
    min-height: 52px;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.01em;
    text-align: center;
  }
  .nav-glyph { width: 1.625rem; height: 1.5rem; }

  .main {
    padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) calc(6.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  }

  .card { padding: 1rem; border-radius: var(--radius-m); }
  .object-row { grid-template-columns: minmax(0, 1fr); }
  .object-facts { text-align: left; }
  .todo { grid-template-columns: auto minmax(0, 1fr); }
  .todo-actions { grid-column: 2; justify-content: flex-start; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
  .kv dd { margin-bottom: 0.5rem; }
  .audit-list li { grid-template-columns: minmax(0, 1fr); }
  .toast-region { top: auto; bottom: calc(5.5rem + env(safe-area-inset-bottom)); left: 1rem; right: 1rem; width: auto; }
}

/* ---------- Barrierefreiheit: Systemeinstellungen ---------- */

/* Reduzierte Bewegung: keine Skalierungen/Verschiebungen, nur kurze Überblendungen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active:not(:disabled), .nav-link:active, .subnav a:active,
  .segmented button:active, .object-row:active, a.metric-card:active {
    transform: none;
  }
  .view, .toast { animation: fade-in 150ms ease both; }
}

/* Reduzierte Transparenz: solide Flächen, kein Blur */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: #20153d;
    --glass-heavy: #150c2e;
    --inner: #170e33;
  }
  .card, .nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Erhöhter Kontrast: nahezu solide Flächen, klare Ränder, helle Sekundärtexte */
@media (prefers-contrast: more) {
  :root {
    --glass: #1a1036;
    --glass-heavy: #100826;
    --glass-border: rgba(255, 255, 255, 0.7);
    --glass-edge: #ffffff;
    --inner: #140b2c;
    --inner-border: rgba(255, 255, 255, 0.55);
    --text-2: #ffffff;
    --text-3: #eee8ff;
    --field-border: #ffffff;
    --field-bg: #0f0824;
  }
  .card, .nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .badge, .notice, .status-panel { border-width: 2px; }
  a { text-decoration: underline; }
  .nav-link[aria-current="page"], .subnav a[aria-current="page"], .segmented button[aria-pressed="true"] {
    outline: 2px solid #fff;
    outline-offset: -2px;
  }
}

/* Windows-Kontrastmodus */
@media (forced-colors: active) {
  .badge, .notice, .card, .status-panel { border: 1px solid CanvasText; }
  .nav-link[aria-current="page"] { outline: 2px solid Highlight; }
}

.plain-list { list-style: none; padding: 0; margin: 0; }

.checkbox-row { display: flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; }
.checkbox-row input { width: 1.25rem; height: 1.25rem; flex: none; }
form.stack-s select, form.stack-s textarea { width: 100%; }

.inquiry-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; }

.demo-banner { position: sticky; top: 0; z-index: 50; padding: 0.5rem 1rem; text-align: center; font-weight: 600; background: #ffd60a; color: #1a1300; }

.search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.5rem 0; }

/* Leo-Liste aktualisieren */
.badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.card-inner { padding: 0.75rem 0; border-top: 1px solid var(--line, rgba(128, 128, 128, 0.3)); }

/* Bewertungsring (Standortliste): Prozent mittig nur bei belastbarer Bewertung */
.score-ring { display: inline-flex; flex: 0 0 auto; }
.score-ring svg { display: block; }
.score-ring .ring-track { stroke: var(--line, rgba(255, 255, 255, 0.25)); stroke-width: 5; }
.score-ring .ring-arc { stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray 240ms ease; }
.score-ring .ring-arc.tone-ok { stroke: var(--ok-fg, #30d158); }
.score-ring .ring-arc.tone-bad { stroke: var(--bad-fg, #ff453a); }
.score-ring .ring-label { fill: currentColor; font-size: 12px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .score-ring .ring-arc { transition: none; } }