:root {
    color-scheme: light;
    --page: #f7f7f5;
    --surface: #ffffff;
    --ink: #141413;
    --ink-2: #55544f;
    --muted: #8f8d86;
    --grid: #ebeae5;
    --border: rgba(20,20,19,0.07);
    --shadow: 0 1px 2px rgba(20,20,19,0.05), 0 4px 16px rgba(20,20,19,0.04);
    --good: #006300;
    --bad: #c93b3b;
    --warn: #d99000;
    --accent: #2a78d6;
    --track: #eeede9;
    --hover: #f2f1ed;
  }
  @media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) {
      color-scheme: dark;
      --page: #101010;
      --surface: #1c1c1b;
      --ink: #f5f5f3;
      --ink-2: #b9b8b0;
      --muted: #85847d;
      --grid: #2b2b29;
      --border: rgba(255,255,255,0.08);
      --shadow: 0 1px 2px rgba(0,0,0,0.4);
      --good: #3fbf3f;
      --bad: #e66767;
      --warn: #e0a83a;
      --accent: #4a90e2;
      --track: #2a2a28;
      --hover: #262624;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --page: #101010;
    --surface: #1c1c1b;
    --ink: #f5f5f3;
    --ink-2: #b9b8b0;
    --muted: #85847d;
    --grid: #2b2b29;
    --border: rgba(255,255,255,0.08);
    --shadow: 0 1px 2px rgba(0,0,0,0.4);
    --good: #3fbf3f;
    --bad: #e66767;
    --warn: #e0a83a;
    --accent: #4a90e2;
    --track: #2a2a28;
    --hover: #262624;
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  .wrap { max-width: 960px; margin: 0 auto; padding: 40px 24px 80px; }

  /* ---------- Header ---------- */
  header { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
  header h1 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
  header .tag { font-size: 12px; color: var(--muted); font-weight: 500; }
  .seg { display: inline-flex; background: var(--track); border-radius: 10px; padding: 3px; gap: 2px; margin-left: auto; }
  .seg button {
    font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-2);
    background: transparent; border: none; border-radius: 8px; padding: 6px 16px; cursor: pointer;
  }
  .seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
  .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* ---------- Zyklus-Zeile ---------- */
  .cycle-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
  .cycle-row h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
  .cycle-row button.switch {
    font: inherit; font-size: 13px; color: var(--muted); background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 6px;
  }
  .cycle-row button.switch:hover { background: var(--hover); color: var(--ink-2); }
  .cycle-row .meta { font-size: 13.5px; color: var(--muted); margin-left: auto; }

  /* ---------- KPI-Karten ---------- */
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
  .tile {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow); padding: 20px 22px 18px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .tile .label { font-size: 13px; font-weight: 550; color: var(--muted); }
  .tile .value { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
  .tile .goal { font-size: 13px; color: var(--muted); }
  .bar { position: relative; height: 4px; border-radius: 2px; background: var(--track); margin: 14px 0 10px; }
  .bar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--accent); }
  .bar .pace { position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--muted); opacity: 0.8; }
  .tile .status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 550; }
  .tile .status .dot { width: 7px; height: 7px; border-radius: 50%; }
  .tile .status.ok { color: var(--good); } .tile .status.ok .dot { background: var(--good); }
  .tile .status.behind { color: var(--warn); } .tile .status.behind .dot { background: var(--warn); }
  .tile .week { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
  .tile .week b { font-weight: 650; }
  .tile .week b.up { color: var(--good); }
  .tile .week b.down { color: var(--bad); }

  /* ---------- Details (zugeklappt) ---------- */
  details.origin { margin-top: 28px; }
  details.origin summary {
    cursor: pointer; font-size: 13px; font-weight: 550; color: var(--muted);
    list-style: none; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 8px;
  }
  details.origin summary::-webkit-details-marker { display: none; }
  details.origin summary::before { content: "▸"; font-size: 10px; }
  details.origin[open] summary::before { content: "▾"; }
  details.origin summary:hover { background: var(--hover); color: var(--ink-2); }
  details.origin summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .origin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 12px; }
  .origin-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 20px; }
  .origin-card h3 { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0 0 8px; }
  .origin-card ul { list-style: none; margin: 0; padding: 0; }
  .origin-card li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13px; }
  .origin-card li .k { color: var(--ink-2); }
  .origin-card li .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* ---------- Erfassen ---------- */
  .capture-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
  .capture-head h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
  .seg.kw { margin-left: auto; }
  .seg.kw button { padding: 5px 13px; font-size: 13px; }

  .sheet {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: var(--shadow); padding: 8px 22px 18px; overflow-x: auto;
  }
  table.person-grid { border-collapse: collapse; width: 100%; font-size: 14px; }
  .person-grid th {
    text-align: right; font-size: 12px; font-weight: 550; color: var(--muted);
    padding: 14px 14px 8px 6px; border-bottom: 1px solid var(--grid); white-space: nowrap;
  }
  .person-grid th.person { text-align: left; padding-left: 0; }
  .person-grid td.name, .person-grid th.person, .person-grid .sum td:first-child {
    position: sticky; left: 0; background: var(--surface); z-index: 1;
  }
  .person-grid .group-row th {
    text-align: left; font-size: 11px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--muted); border-bottom: none; padding: 18px 6px 0;
  }
  .person-grid td { padding: 4px 6px; border-bottom: 1px solid var(--grid); }
  .person-grid tbody tr:last-child td { border-bottom: none; }
  .person-grid td.name { font-weight: 600; white-space: nowrap; padding-left: 0; }
  .person-grid td.num { text-align: right; }
  .person-grid td.gap, .person-grid th.gap { width: 28px; border-bottom: none; }
  .person-grid tbody td.gap { border-bottom: 1px solid var(--grid); border-left: 1px solid var(--grid); }
  .person-grid input {
    font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right;
    color: var(--ink); background: transparent; border: none; border-radius: 8px;
    width: 56px; padding: 8px; -moz-appearance: textfield; appearance: textfield;
  }
  .person-grid input::-webkit-outer-spin-button, .person-grid input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .person-grid input:hover { background: var(--hover); }
  .person-grid input:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--hover); }
  .person-grid .sum td { border-top: 1px solid var(--grid); border-bottom: none; padding: 10px 6px 6px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 13.5px; }
  .person-grid .sum td:first-child { padding-left: 0; }
  .person-grid .sum td.num { padding-right: 14px; }
  .capture-foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
  .capture-foot .note { font-size: 12.5px; color: var(--muted); }

  .btn {
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
    background: var(--ink); color: var(--page); border: none; border-radius: 10px; padding: 9px 20px;
  }
  .btn:hover { opacity: 0.85; }
  .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn.quiet { background: none; color: var(--ink-2); border: 1px solid var(--grid); font-weight: 500; padding: 5px 12px; font-size: 13px; border-radius: 8px; }
  .btn.quiet:hover { background: var(--hover); opacity: 1; }

  /* ---------- Verwaltung ---------- */
  .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
  .caption { font-size: 12px; color: var(--muted); margin: 12px 2px 0; }
  @media (max-width: 640px) { .cycle-row .meta { margin-left: 0; flex-basis: 100%; } }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 18px 22px; }
  .card h3 { font-size: 14px; font-weight: 650; margin: 0 0 12px; }
  table.plain { border-collapse: collapse; width: 100%; font-size: 14px; }
  .plain td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--grid); }
  .plain tr:last-child td { border-bottom: none; }
  .plain .dim { color: var(--muted); font-size: 13px; }
  .state { font-size: 12px; font-weight: 600; }
  .state.on { color: var(--good); }
  .state.planned { color: var(--muted); }
  form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 4px 0 14px; }
  label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
  input.box, select.box {
    font: inherit; font-size: 14px; color: var(--ink); background: var(--page);
    border: 1px solid var(--grid); border-radius: 8px; padding: 8px 10px; width: 100%;
  }
  input.box:focus-visible, select.box:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

  section[hidden] { display: none; }
  footer { margin-top: 56px; font-size: 12px; color: var(--muted); }

/* --- App-Ergänzungen (nicht im Mockup) --- */
.seg a { font-size: 13.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; border-radius: 8px; padding: 6px 16px; }
.seg a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.10); }
.seg a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tile .week b.flat { color: var(--muted); }
.login-box { max-width: 340px; margin: 12vh auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.login-box h1 { font-size: 17px; margin: 0; }
.login-box .fehler { color: var(--bad); font-size: 13px; }
.leer-hinweis { color: var(--muted); font-size: 14px; margin-top: 24px; }
.seg.kw a { padding: 4px 13px 5px; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.3; }
.seg.kw .kw-sub { font-size: 10.5px; font-weight: 500; color: var(--muted); }
.seg.kw a[aria-current="page"] .kw-sub { color: var(--ink-2); }
.leer-hinweis a { color: var(--accent); }
.cycle-switch { position: relative; }
.cycle-switch summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.cycle-switch summary::-webkit-details-marker { display: none; }
.cycle-switch summary:hover { background: var(--hover); color: var(--ink-2); }
.cycle-switch nav { position: absolute; top: 100%; left: 0; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; min-width: 140px; }
.cycle-switch nav a { color: var(--ink); text-decoration: none; font-size: 13.5px; padding: 6px 10px; border-radius: 6px; }
.cycle-switch nav a:hover { background: var(--hover); }
.btn.quiet { text-decoration: none; }