/* MILO Oberfläche (AP-13). Tokens aus dem freigegebenen Entwurf v2 (ENT-036); dunkel zuerst, hell über die Systemeinstellung (ENT-011). */

:root {
  --font: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --canvas: #0A0B0E; --surface: #121419; --surface-raised: #171A20; --surface-hover: #1C1F26; --overlay: #1A1D24;
  --text: #EDEEF0; --text-2: #A1A6B0; --text-3: #80858F;
  --separator: rgba(255, 255, 255, .07); --separator-strong: rgba(255, 255, 255, .12);
  --focus: #5E9BFF; --danger: #FF6B6B;
  --primary-bg: #EDEEF0; --primary-fg: #0A0B0E;

  /* Personenfarben p1–p11; jede ≥ 4,5:1 auf Canvas und Flächen (geprüft in AP-13). */
  --p1: #6AA8FF; --p2: #F0A35E; --p3: #4CC9A7; --p4: #C792EA; --p5: #F07FA8; --p6: #9ED46A;
  --p7: #E2C15B; --p8: #7FD4E8; --p9: #FF8A7A; --p10: #B4A7FF; --p11: #D4B48C;

  --shadow-float: 0 12px 40px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-raised: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .4);

  --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --fs-display: 2.125rem; --fs-title: 1.375rem; --fs-body: 1rem; --fs-sub: .875rem; --fs-cap: .75rem;
  --touch: 44px;
  --t-fast: 140ms; --t-std: 240ms; --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --canvas: #F5F5F7; --surface: #FFFFFF; --surface-raised: #FAFAFB; --surface-hover: #F1F1F4; --overlay: #FFFFFF;
    --text: #16181D; --text-2: #5C616B; --text-3: #686D77;
    --separator: rgba(16, 18, 24, .08); --separator-strong: rgba(16, 18, 24, .14);
    --focus: #2F6FDB; --danger: #C8323A;
    --primary-bg: #16181D; --primary-fg: #FFFFFF;
    /* p1/p2 gegenüber v2 abgedunkelt: #2F6FDB und #B35F22 lagen auf Canvas unter 4,5:1. */
    --p1: #2A64C8; --p2: #A3561E; --p3: #167A63; --p4: #8A4FB8; --p5: #B83D6E; --p6: #4E7A1E;
    --p7: #8A6D0E; --p8: #1F7A8C; --p9: #B8402F; --p10: #5B4FC4; --p11: #7D6440;
    --shadow-float: 0 12px 40px rgba(16, 18, 24, .14), 0 2px 6px rgba(16, 18, 24, .08);
    --shadow-raised: 0 1px 2px rgba(16, 18, 24, .06);
    color-scheme: light;
  }
}

*, *::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: 100dvh; background: var(--canvas); color: var(--text);
  font: 400 var(--fs-body)/1.5 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "kern", "tnum" 0;
}
main { outline: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }

/* ---------- Anmeldeflächen ---------- */
/* Inhalt im oberen Drittel statt exakt mittig: ruhiger auf hohen Phones, Tastatur verdeckt nichts. */
.auth {
  min-height: 100dvh; display: grid; justify-items: center; align-content: start;
  padding: calc(env(safe-area-inset-top) + clamp(var(--s6), 14vh, 160px)) var(--s4) calc(env(safe-area-inset-bottom) + var(--s6));
}
.auth-karte { width: 100%; max-width: 400px; display: grid; gap: var(--s5); }
.marke { font: 600 var(--fs-sub)/1 var(--font-display); letter-spacing: .14em; color: var(--text-2); }
.titel { font: 700 var(--fs-display)/1.1 var(--font-display); letter-spacing: -.02em; }
.unter { color: var(--text-2); font-size: var(--fs-body); }
.stapel { display: grid; gap: var(--s3); }

/* ---------- Bedienelemente ---------- */
.knopf {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--touch); padding: 0 var(--s5); border-radius: var(--r-md); border: 1px solid transparent;
  font: 600 var(--fs-body)/1 var(--font); cursor: pointer; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.knopf:active { transform: scale(.985); }
.knopf[aria-busy="true"] { opacity: .6; cursor: progress; transform: none; }
.knopf.primaer { background: var(--primary-bg); color: var(--primary-fg); }
.knopf.zweit { background: var(--surface-raised); color: var(--text); border-color: var(--separator-strong); }
.knopf.zweit:hover { background: var(--surface-hover); }
.knopf.still { background: transparent; color: var(--text-2); padding: 0 var(--s3); }
.knopf.still:hover { color: var(--text); }
.knopf.gefahr { background: transparent; color: var(--danger); border-color: var(--separator-strong); }
.knopf.breit { width: 100%; }
/* Nach den Varianten, damit ein gesperrter Primärknopf nicht aktiv aussieht. */
.knopf[disabled], .knopf[disabled]:hover { background: var(--surface-raised); color: var(--text-3); border-color: var(--separator); cursor: not-allowed; transform: none; }
.link { color: var(--text-2); font-size: var(--fs-sub); text-underline-offset: 3px; justify-self: center; padding: var(--s2); }
.link:hover { color: var(--text); }

.feld { display: grid; gap: var(--s2); }
.feld label { font-size: var(--fs-sub); font-weight: 500; color: var(--text-2); }
.feld input[type="text"], .feld input[type="url"] {
  width: 100%; min-height: var(--touch); padding: 0 var(--s3); border-radius: var(--r-md);
  border: 1px solid var(--separator-strong); background: var(--surface); color: var(--text);
  font: 400 var(--fs-body)/1.2 var(--font);
}
.feld input.mono { font-family: var(--font-mono); letter-spacing: .04em; }
.feld input[aria-invalid="true"] { border-color: var(--danger); }
.fehler { color: var(--danger); font-size: var(--fs-sub); }
.haken { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; font-size: var(--fs-sub); color: var(--text-2); cursor: pointer; }
.haken input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--primary-bg); }

/* ---------- Codes ---------- */
.codes {
  list-style: none; margin: 0; padding: var(--s4); display: grid; grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr)); gap: var(--s2) var(--s5);
  background: var(--surface); border: 1px solid var(--separator); border-radius: var(--r-lg);
  font: 500 var(--fs-sub)/1.6 var(--font-mono); letter-spacing: .02em; user-select: all;
}
.codes li { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Konto ---------- */
.seite {
  max-width: 640px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + var(--s6)) var(--s4) calc(env(safe-area-inset-bottom) + var(--s7));
  display: grid; gap: var(--s6);
}
.kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.person { display: flex; align-items: center; gap: var(--s3); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--person) 18%, var(--surface)); color: var(--person);
  font: 600 var(--fs-body)/1 var(--font-display); box-shadow: inset 0 0 0 1.5px var(--person);
}
[data-farbe="p1"] { --person: var(--p1); } [data-farbe="p2"] { --person: var(--p2); } [data-farbe="p3"] { --person: var(--p3); }
[data-farbe="p4"] { --person: var(--p4); } [data-farbe="p5"] { --person: var(--p5); } [data-farbe="p6"] { --person: var(--p6); }
[data-farbe="p7"] { --person: var(--p7); } [data-farbe="p8"] { --person: var(--p8); } [data-farbe="p9"] { --person: var(--p9); }
[data-farbe="p10"] { --person: var(--p10); } [data-farbe="p11"] { --person: var(--p11); }
.name { font: 650 var(--fs-title)/1.2 var(--font-display); letter-spacing: -.01em; }
.rolle { font-size: var(--fs-sub); color: var(--text-2); }

.abschnitt { display: grid; gap: var(--s2); }
.abschnitt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 0 var(--s1); }
.abschnitt h2 { font: 600 var(--fs-sub)/1.4 var(--font); color: var(--text-2); letter-spacing: .01em; }
.liste { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-raised); overflow: hidden; }
.zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s2) var(--s2) var(--s4); }
.zeile + .zeile { border-top: 1px solid var(--separator); }
.zeile-text { display: grid; gap: 2px; min-width: 0; }
.zeile-titel { font-weight: 500; overflow-wrap: anywhere; }
.zeile-info { font-size: var(--fs-sub); color: var(--text-2); }
.marker { font-size: var(--fs-cap); font-weight: 600; color: var(--text-2); border: 1px solid var(--separator-strong); border-radius: var(--r-pill); padding: 2px 8px; white-space: nowrap; }
.leer { padding: var(--s4); color: var(--text-2); font-size: var(--fs-sub); }

.hinweis { color: var(--text-2); font-size: var(--fs-sub); padding: 0 var(--s1); }
.fuss { padding-top: var(--s2); }

/* ---------- App-Rahmen (Entwurf v2): Tableiste Phone, Seitenleiste ab 768 px ---------- */
:root { --chrome: rgba(22, 24, 30, .72); --chrome-solid: #16181E; --chrome-edge: rgba(255, 255, 255, .09); --sidebar: #0D0F13; }
@media (prefers-color-scheme: light) { :root { --chrome: rgba(250, 250, 252, .74); --chrome-solid: #FAFAFC; --chrome-edge: rgba(16, 18, 24, .08); --sidebar: #EFEFF2; } }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.rahmen { min-height: 100dvh; }
.seitenleiste { display: none; }
.inhalt { outline: none; }
.tableiste {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 10px); z-index: 20;
  display: flex; gap: 2px; padding: 5px; border-radius: 24px; background: var(--chrome); border: 1px solid var(--chrome-edge);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: var(--shadow-float);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tableiste { background: var(--chrome-solid); } }
@media (prefers-reduced-transparency: reduce) { .tableiste { background: var(--chrome-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.tableiste a { display: grid; justify-items: center; gap: 2px; min-width: 64px; min-height: 48px; place-content: center; padding: 0 var(--s2); border-radius: 18px; color: var(--text-3); font-size: 10px; font-weight: 600; text-decoration: none; }
.tableiste a[aria-current="page"] { color: var(--text); background: var(--surface-hover); }
.tableiste .ic { width: 22px; height: 22px; }

.ansicht { max-width: 720px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + var(--s5)) var(--s4) calc(env(safe-area-inset-bottom) + 112px); display: grid; gap: var(--s4); }
.seiten-titel { font: 700 var(--fs-display)/1.1 var(--font-display); letter-spacing: -.02em; }
.unterzeile { color: var(--text-2); font-size: var(--fs-sub); margin-top: 2px; }
.chips { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s4)); padding: 2px var(--s4); }
.chip { flex: none; min-height: 34px; padding: 0 var(--s3); border-radius: var(--r-pill); border: 1px solid var(--separator-strong); background: transparent; color: var(--text-2); font: 500 var(--fs-sub)/1 var(--font); cursor: pointer; display: inline-flex; align-items: center; }
.chip[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-fg); border-color: transparent; }
.chip-neu .ic { width: 16px; height: 16px; }
.schnell { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 0 var(--s4); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-raised); color: var(--text-3); }
.schnell-eingabe { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 400 var(--fs-body)/1.4 var(--font); min-height: 44px; }
.schnell-eingabe:focus { outline: none; }
.schnell:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.gruppen-titel { font: 600 var(--fs-sub)/1.4 var(--font); color: var(--text-2); padding: 0 var(--s1) var(--s2); list-style: none; }
.gruppen-titel.warn { color: var(--danger); }
details.erledigt > summary { cursor: pointer; }
.gruppe { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-raised); overflow: hidden; }
.aufgabe { display: flex; align-items: stretch; gap: var(--s1); padding-left: var(--s3); }
.aufgabe + .aufgabe { border-top: 1px solid var(--separator); }
.check-btn { flex: none; width: var(--touch); min-height: 52px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; padding: 0; }
.check { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--text-3); display: grid; place-items: center; color: transparent; transition: background var(--t-fast) var(--ease); }
.check .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.done .check { background: var(--text-3); border-color: var(--text-3); color: var(--canvas); }
.zeile-haupt { flex: 1; min-width: 0; display: grid; gap: 2px; align-content: center; justify-items: start; text-align: left; padding: var(--s2) var(--s4) var(--s2) 0; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.zeile-haupt:hover { background: var(--surface-hover); }
.zeile-titel { font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.done .zeile-titel { color: var(--text-3); text-decoration: line-through; }
.zeile-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--fs-sub); color: var(--text-2); align-items: center; }
.zeile-meta .ic { width: 14px; height: 14px; }
.leer-hinweis { color: var(--text-2); text-align: center; padding: var(--s6) var(--s4); }

/* ---------- Kalender (Agenda) ---------- */
.kalender-kopf { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); }
.kalender-aktionen { display: flex; flex-wrap: wrap; gap: var(--s2); }
.termin { display: flex; align-items: stretch; }
.termin + .termin { border-top: 1px solid var(--separator); }
.termin-zeit { flex: none; width: 5.5rem; display: grid; align-content: center; gap: 0; padding: var(--s2) 0 var(--s2) var(--s4); font-size: var(--fs-sub); font-weight: 500; font-variant-numeric: tabular-nums; }
.termin-zeit .bis { color: var(--text-3); font-weight: 400; }
.zeile-haupt.statisch { cursor: default; }
.zeile-haupt.statisch:hover { background: transparent; }
.termin.belegt .zeile-titel { color: var(--text-3); font-weight: 400; }

/* ---------- Blatt (Detail, Dialoge) ---------- */
.blatt { width: min(560px, 100vw); max-height: 88dvh; margin: auto auto 0; padding: 0; border: 1px solid var(--separator-strong); border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--overlay); color: var(--text); box-shadow: var(--shadow-float); overflow-y: auto; }
.blatt::backdrop { background: rgba(0, 0, 0, .45); }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s2) 0 var(--s5); }
.blatt-titel { font: 650 var(--fs-title)/1.2 var(--font-display); }
.blatt-inhalt { display: grid; gap: var(--s4); padding: var(--s3) var(--s5) calc(env(safe-area-inset-bottom) + var(--s5)); }
.blatt-aktionen { display: flex; justify-content: space-between; gap: var(--s3); padding-top: var(--s2); }
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.feld input[type="date"], .feld input[type="time"], .feld select, .feld textarea {
  width: 100%; min-height: var(--touch); padding: var(--s2) var(--s3); border-radius: var(--r-md); border: 1px solid var(--separator-strong);
  background: var(--surface); color: var(--text); font: 400 var(--fs-body)/1.4 var(--font);
}
.feld textarea { resize: vertical; }
.feld input:disabled, .feld select:disabled, .feld textarea:disabled { opacity: .7; }

@media (min-width: 768px) {
  .rahmen { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
  .tableiste { display: none; }
  .seitenleiste { display: flex; flex-direction: column; gap: var(--s4); position: sticky; top: 0; height: 100dvh; padding: var(--s5) var(--s3); background: var(--sidebar); border-right: 1px solid var(--separator); }
  .marke-zeile { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); font: 650 var(--fs-body)/1 var(--font-display); }
  .marke-zeichen { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-bg); color: var(--primary-fg); font-size: 14px; }
  .nav { display: grid; gap: 2px; }
  .nav a { display: flex; align-items: center; gap: var(--s3); min-height: 36px; padding: 0 var(--s2); border-radius: var(--r-sm); color: var(--text-2); text-decoration: none; font-weight: 500; }
  .nav a:hover { background: var(--surface-hover); color: var(--text); }
  .nav a[aria-current="page"] { background: var(--surface-hover); color: var(--text); }
  .ansicht { padding: var(--s7) var(--s6) var(--s7); }
  .chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .aufgabe { padding-left: var(--s2); }
  .check-btn { width: 36px; min-height: 40px; }
  .check { width: 18px; height: 18px; }
  .zeile-haupt { padding: 6px var(--s3) 6px 0; }
  .blatt { margin: auto; border-radius: var(--r-xl); }
}

/* ---------- Meldung ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + var(--s5)); z-index: 60;
  max-width: calc(100vw - 2 * var(--s4)); padding: 10px 14px; border-radius: var(--r-md);
  background: var(--overlay); color: var(--text); border: 1px solid var(--separator-strong); box-shadow: var(--shadow-float);
  font-size: var(--fs-sub);
}
.toast.fehler-meldung { color: var(--danger); }

@media (min-width: 900px) {
  .seite { padding-top: var(--s7); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}
@media (forced-colors: active) {
  .knopf, .liste, .codes, .feld input { border: 1px solid CanvasText; }
  .avatar { forced-color-adjust: none; }
}
.inhalt .seite { padding-bottom: calc(env(safe-area-inset-bottom) + 112px); }

/* ---------- Einkauf und Board (AP-15, AP-16) ---------- */
.zeile-statisch { cursor: default; }
.zeile-statisch:hover { background: transparent; }
.aufgabe .knopf.still { align-self: center; min-height: 36px; flex: none; }
.board-formular { display: grid; gap: var(--s3); justify-items: end; }
.board-formular .feld { width: 100%; }
.nachricht { display: flex; align-items: flex-start; gap: var(--s2); padding: var(--s3) var(--s2) var(--s3) var(--s4); }
.nachricht + .nachricht { border-top: 1px solid var(--separator); }
.nachricht-inhalt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nachricht-kopf { display: flex; gap: var(--s3); align-items: baseline; font-size: var(--fs-sub); color: var(--text-2); }
.nachricht-absender { font-weight: 600; color: var(--text); }
.nachricht-text { white-space: pre-wrap; overflow-wrap: anywhere; }