/* Alltagsduo-Dashboard – Gestaltung im Stil von iOS/macOS (Systemschrift, Systemfarben, Glas-Flächen) */

/* ------------------------------------------------------------ Farben und Maße */
:root {
  color-scheme: light dark;
  --bg: #f2f2f7;
  --flaeche: #ffffff;
  --flaeche-2: #f7f7fa;
  --text: #000000;
  --text-2: rgba(60, 60, 67, 0.78);
  --text-3: rgba(60, 60, 67, 0.73);
  --linie: rgba(60, 60, 67, 0.16);
  --linie-stark: rgba(60, 60, 67, 0.3);
  --fuell: rgba(120, 120, 128, 0.12);
  --fuell-2: rgba(120, 120, 128, 0.2);
  --akzent: #007aff;
  --akzent-text: #0064d1;
  --akzent-voll: #0064d1; /* gefüllte Flächen mit weißer Schrift (WCAG 4,5:1) */
  --rot-voll: #d70015;
  --rot-text: #d70015;
  --rand-steuer: rgba(60, 60, 67, 0.6); /* Rand von Abhak-Kreisen und Schaltern (3:1) */
  --schalter-an: #248a3d;
  --heute: #ff3b30;
  --glas: rgba(255, 255, 255, 0.72);
  --glas-rand: rgba(255, 255, 255, 0.6);
  --schatten: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.06);
  --schatten-gross: 0 12px 48px rgba(0, 0, 0, 0.18);
  --rot: #ff3b30; --orange: #ff9500; --gelb: #ffcc00; --gruen: #34c759; --mint: #00c7be; --tuerkis: #30b0c7;
  --blau: #007aff; --indigo: #5856d6; --lila: #af52de; --pink: #ff2d55; --braun: #a2845e; --grau: #8e8e93;
  --tinte: black; /* zum Abdunkeln von Farbtext für genug Kontrast */
  --radius: 12px;
  --radius-gross: 18px;
  --kurve: cubic-bezier(0.32, 0.72, 0, 1);
  --schnell: 160ms;
  --seitenleiste: 264px;
  font-size: 93.75%; /* 15 px am Mac */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --flaeche: #1c1c1e;
    --flaeche-2: #232325;
    --text: #ffffff;
    --text-2: rgba(235, 235, 245, 0.72);
    --text-3: rgba(235, 235, 245, 0.55);
    --linie: rgba(84, 84, 88, 0.55);
    --linie-stark: rgba(110, 110, 115, 0.7);
    --fuell: rgba(118, 118, 128, 0.24);
    --fuell-2: rgba(118, 118, 128, 0.36);
    --akzent: #0a84ff;
    --akzent-text: #409cff;
    --akzent-voll: #0a6cd6;
    --rot-voll: #e0301e;
    --rot-text: #ff6961;
    --rand-steuer: #6e6e73;
    --schalter-an: #30d158;
    --heute: #ff453a;
    --glas: rgba(30, 30, 32, 0.72);
    --glas-rand: rgba(255, 255, 255, 0.1);
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.3);
    --schatten-gross: 0 12px 48px rgba(0, 0, 0, 0.6);
    --rot: #ff453a; --orange: #ff9f0a; --gelb: #ffd60a; --gruen: #30d158; --mint: #63e6e2; --tuerkis: #40c8e0;
    --blau: #0a84ff; --indigo: #5e5ce6; --lila: #bf5af2; --pink: #ff375f; --braun: #ac8e68; --grau: #98989d;
    --tinte: white;
  }
}

/* iPhone: Schriftgröße folgt der Einstellung „Textgröße“ (Dynamic Type) */
@media (pointer: coarse) {
  :root { font-size: 106.25%; }
  @supports (font: -apple-system-body) {
    :root { font: -apple-system-body; }
  }
}

.f-rot { --f: var(--rot); } .f-orange { --f: var(--orange); } .f-gelb { --f: var(--gelb); } .f-gruen { --f: var(--gruen); }
.f-mint { --f: var(--mint); } .f-tuerkis { --f: var(--tuerkis); } .f-blau { --f: var(--blau); } .f-indigo { --f: var(--indigo); }
.f-lila { --f: var(--lila); } .f-pink { --f: var(--pink); } .f-braun { --f: var(--braun); } .f-grau { --f: var(--grau); }

/* ------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.38;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 2.05rem; line-height: 1.12; font-weight: 700; letter-spacing: -0.022em; }
h2 { font-size: 1.27rem; line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; }
h3 { font-size: 1rem; font-weight: 600; }
a { color: var(--akzent-text); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; opacity: 0.45; }
button, a, [role="button"], label, .segment, .chip { touch-action: manipulation; }
button, .tab, .chip, .segment, .nav-eintrag, .kalender-schalter { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { max-width: 100%; }
svg.icon { flex: none; display: block; }
.rechts { margin-left: auto; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 70%, transparent); outline-offset: 2px; border-radius: 8px; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprunglink { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--akzent-voll); color: #fff; font-weight: 600; }
.sprunglink:focus { top: 12px; }
.leise-text { color: var(--text-2); }
.klein { font-size: 0.87rem; }
.rot { color: var(--rot-text) !important; }

/* Eingabefelder: mindestens 16 px, sonst zoomt das iPhone hinein */
input[type="text"], input[type="password"], input[type="search"], input[type="date"], input[type="time"], select, textarea {
  font-size: max(16px, 1rem);
  background: transparent;
  border: 0;
  outline: 0;
  min-width: 0;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 60%, transparent); outline-offset: 1px; }
/* Randlose Felder in Gruppen (wie bei iOS): Fokus als zarte Hinterlegung statt Rahmen */
.titel-feld:focus-visible, .ort-feld:focus-visible, .notiz-feld:focus-visible, .breit:focus-visible, .notiz-titel:focus-visible,
.schnell-neu input:focus-visible, .suchfeld input:focus-visible, .kommentar-form textarea:focus-visible {
  outline: none; background: color-mix(in srgb, var(--akzent) 7%, transparent); border-radius: 6px;
}
.schnell-neu:focus-within, .suchfeld:focus-within, .kommentar-form:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--akzent) 55%, transparent) inset, var(--schatten); }
.schnell-neu input:focus-visible, .suchfeld input:focus-visible, .kommentar-form textarea:focus-visible { background: transparent; }
dialog:focus-visible { outline: none; }
.frage-knopf:focus-visible { outline: none; background: var(--fuell-2); }
::placeholder { color: var(--text-3); opacity: 1; }
select { appearance: none; -webkit-appearance: none; padding: 6px 26px 6px 10px; border-radius: 9px; background: var(--fuell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 9px center; color: var(--text); cursor: pointer; max-width: 100%; }
input[type="date"], input[type="time"] { padding: 6px 10px; border-radius: 9px; background: var(--fuell); color: var(--text); min-height: 34px; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.6; }

/* ------------------------------------------------------------ Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--akzent-voll); color: #fff; font-weight: 600;
  transition: transform var(--schnell) ease-out, filter var(--schnell) ease-out, background var(--schnell);
}
.knopf:active { transform: scale(0.97); filter: brightness(0.92); }
.knopf.zweit { background: var(--fuell); color: var(--akzent-text); }
.knopf.klein { min-height: 32px; padding: 0 13px; font-size: 0.93rem; }
.knopf.gross { min-height: 50px; width: 100%; font-size: 1.05rem; border-radius: 14px; }
.text-knopf { display: inline-flex; align-items: center; gap: 4px; color: var(--akzent-text); font-weight: 500; min-height: 36px; padding: 0 4px; border-radius: 8px; }
.text-knopf.fett { font-weight: 650; }
.text-knopf:active { opacity: 0.55; }
.symbol-knopf {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  color: var(--akzent-text); transition: background var(--schnell), transform var(--schnell) ease-out;
}
.symbol-knopf:active { transform: scale(0.92); background: var(--fuell); }
.symbol-knopf.gefuellt { background: var(--fuell); }
.symbol-knopf.klein { width: 30px; height: 30px; color: var(--text-3); }
.symbol-knopf.an { color: color-mix(in srgb, var(--orange) 55%, var(--tinte)); background: color-mix(in srgb, var(--orange) 16%, transparent); }
.knopf-gruppe { display: inline-flex; align-items: center; gap: 2px; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { filter: brightness(1.06); }
  .knopf.zweit:hover { background: var(--fuell-2); }
  .symbol-knopf:hover { background: var(--fuell); }
  .text-knopf:hover { opacity: 0.75; }
}

.badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--rot-voll); color: #fff; font-size: 0.75rem; font-weight: 650; line-height: 1;
}
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--f, var(--grau)); flex: none; }
.avatar {
  display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  /* getönt mit dunkler Schrift: lesbar (WCAG) für alle Personenfarben, auch Orange */
  background: color-mix(in srgb, var(--f) 24%, var(--flaeche));
  color: color-mix(in srgb, var(--f) 45%, var(--tinte)); font-weight: 700; line-height: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 35%, transparent);
}

/* ------------------------------------------------------------ Aufbau: Seitenleiste (Mac) und Tab-Leiste (iPhone) */
.app { min-height: 100dvh; }
.seitenleiste {
  position: fixed; inset: 10px auto 10px 10px; width: var(--seitenleiste);
  display: flex; flex-direction: column; gap: 6px; padding: 18px 12px 12px;
  border-radius: 22px; overflow-y: auto;
  background: var(--glas); border: 0.5px solid var(--glas-rand);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: var(--schatten);
  z-index: 10;
}
.marke { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 700; font-size: 1.07rem; letter-spacing: -0.01em; }
.marke img { border-radius: 7px; }
.seiten-uhr { display: grid; gap: 1px; padding: 14px 10px 14px; margin: 4px 0 6px; border-bottom: 0.5px solid var(--linie); }
.seiten-zeit { font-size: 2.15rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.seiten-uhr span { font-weight: 500; }
.seiten-uhr .leise { color: var(--text-2); font-weight: 400; font-size: 0.93rem; }
.nav-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-eintrag {
  display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px; border-radius: 10px;
  color: var(--text); font-weight: 500; transition: background var(--schnell);
}
.nav-eintrag .icon { color: var(--akzent); }
.nav-eintrag .badge { margin-left: auto; }
.nav-eintrag.aktiv { background: var(--fuell-2); }
.nav-eintrag:active { background: var(--fuell-2); }
@media (hover: hover) and (pointer: fine) { .nav-eintrag:hover { background: var(--fuell); } .nav-eintrag.aktiv:hover { background: var(--fuell-2); } }
.seitenleiste-fuss { margin-top: auto; padding-top: 8px; border-top: 0.5px solid var(--linie); }
.seitenleiste-fuss .icon { color: var(--text-3); }

.inhalt { margin-left: calc(var(--seitenleiste) + 20px); min-height: 100dvh; outline: none; }
.seite { max-width: 1180px; margin: 0 auto; padding: 26px 28px 48px; }
.tableiste { display: none; }
.nur-schmal { display: none !important; }

@media (max-width: 899px) {
  .seitenleiste { display: none; }
  .inhalt { margin-left: 0; padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  .seite { padding: calc(14px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
  .nur-schmal { display: inline-flex !important; }
  .tableiste {
    display: flex; position: fixed; z-index: 10;
    left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    height: 64px; padding: 0 6px; border-radius: 32px;
    background: var(--glas); border: 0.5px solid var(--glas-rand);
    -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--text-2); font-size: 0.66rem; font-weight: 600; border-radius: 26px; margin: 5px 0;
    transition: background var(--schnell), color var(--schnell);
  }
  .tab.aktiv { color: var(--akzent-text); background: var(--fuell); }
  .tab:active { background: var(--fuell-2); }
  .tab-symbol { position: relative; }
  .tab-symbol .badge { position: absolute; top: -5px; left: 15px; min-width: 18px; height: 18px; font-size: 0.68rem; padding: 0 5px; }
  h1 { font-size: 2.1rem; }
}

.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; min-height: 44px; }
.gruss { color: var(--text-2); font-weight: 500; margin-bottom: 2px; }
.profil-link { border-radius: 50%; }

.laden { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.laden-kreis { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--fuell-2); border-top-color: var(--akzent); animation: drehen 0.8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ Karten, Listen, Chips */
.karte { background: var(--flaeche); border-radius: var(--radius-gross); padding: 18px 18px 16px; box-shadow: var(--schatten); }
.karte + .karte { margin-top: 16px; }
.karte h2 { margin-bottom: 4px; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.karte-aktionen { display: flex; gap: 4px; }
.karte-unter { color: var(--text-2); font-size: 0.8rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 6px; }
.listen-titel { display: flex; align-items: baseline; gap: 8px; font-size: 1.2rem; margin: 22px 4px 8px; }
.listen-titel .anzahl { color: var(--text-3); font-weight: 500; font-size: 1rem; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 34px; padding: 0 14px; border-radius: 17px;
  background: var(--flaeche); color: var(--text); font-weight: 500; font-size: 0.93rem; box-shadow: 0 0 0 0.5px var(--linie) inset;
  transition: background var(--schnell), color var(--schnell), transform var(--schnell) ease-out;
}
.chip:active { transform: scale(0.96); }
.chip.an { background: var(--akzent-voll); color: #fff; box-shadow: none; }
.chip.leise { color: var(--akzent-text); background: transparent; box-shadow: 0 0 0 1px var(--linie) inset; }
.chip-zahl { font-size: 0.8rem; font-weight: 650; padding: 1px 7px; border-radius: 9px; background: var(--fuell); }
.chip.an .chip-zahl { background: rgba(0, 0, 0, 0.2); }
.chip-eingabe { flex: none; width: 160px; min-height: 34px; padding: 0 14px; border-radius: 17px; background: var(--flaeche) !important; box-shadow: 0 0 0 2px var(--akzent) inset; }
.mini-chip { display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); font-size: 0.8rem; }

.leer { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 48px 20px; color: var(--text-3); }
.leer-titel { color: var(--text); font-weight: 650; font-size: 1.13rem; margin-top: 6px; }
.leer-text { color: var(--text-2); max-width: 34ch; margin-bottom: 8px; }

/* Abhak-Kreis wie in Apple Erinnerungen (echte Checkbox, nur anders gezeichnet) */
input.rund {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 24px; height: 24px; border-radius: 50%; border: 1.6px solid var(--rand-steuer); cursor: pointer;
  display: grid; place-items: center; transition: background var(--schnell), border-color var(--schnell), transform var(--schnell) ease-out;
}
input.rund.p3 { border-color: var(--rot-text); }
input.rund.p2 { border-color: color-mix(in srgb, var(--orange) 60%, var(--tinte)); }
input.rund:active { transform: scale(0.88); }
input.rund::after { content: ""; width: 12px; height: 12px; border-radius: 50%; transform: scale(0); transition: transform 220ms var(--kurve); background: currentColor; }
input.rund:checked { border-color: var(--akzent); color: var(--akzent); }
input.rund:checked::after { transform: scale(1); }
input.rund:focus-visible { outline-offset: 3px; border-radius: 50%; }

/* Schalter wie bei iOS */
input.schalter {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; position: relative; cursor: pointer;
  width: 51px; height: 31px; border-radius: 16px; background: var(--fuell-2); transition: background 220ms var(--kurve);
  box-shadow: inset 0 0 0 1px var(--rand-steuer);
}
input.schalter::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.04); transition: transform 260ms var(--kurve);
}
input.schalter:checked { background: var(--schalter-an); box-shadow: none; }
input.schalter:checked::after { transform: translateX(20px); }
input.schalter:focus-visible { border-radius: 16px; }

/* Segmentierte Auswahl */
.segmente { display: inline-flex; padding: 2px; border-radius: 10px; background: var(--fuell); gap: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segment { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 30px; padding: 0 12px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background var(--schnell), box-shadow var(--schnell); }
.segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segment.an { background: var(--flaeche); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04); font-weight: 600; }
@media (prefers-color-scheme: dark) { .segment.an { background: #636366; } }
.segment:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--akzent) 60%, transparent); }

/* ------------------------------------------------------------ Übersicht */
.uhr-karte { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px 24px; margin-bottom: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--indigo) 14%, var(--flaeche)), var(--flaeche) 60%); }
.uhr { font-size: clamp(3.4rem, 9vw, 4.8rem); font-weight: 200; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.uhr-datum { display: grid; gap: 2px; }
.uhr-tag { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.012em; }
.uhr-kw { color: var(--text-2); font-weight: 500; }
.uhr-naechster { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--akzent-text); font-weight: 550; }
.uebersicht-raster { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.uebersicht-raster .karte + .karte { margin-top: 0; }
@media (max-width: 1100px) { .uebersicht-raster { grid-template-columns: 1fr; } }
.heute-liste, .neu-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.heute-termin { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px 10px 16px; border-radius: 12px; background: color-mix(in srgb, var(--f) 11%, transparent); overflow: hidden; }
.heute-termin.vorbei { opacity: 0.55; }
.heute-termin:active { filter: brightness(0.95); }
.farb-balken { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--f); }
.heute-zeit { display: grid; min-width: 52px; font-weight: 650; font-variant-numeric: tabular-nums; font-size: 0.93rem; }
.heute-zeit small { color: var(--text-2); font-weight: 500; font-size: 0.85rem; }
.heute-text { display: grid; min-width: 0; }
.heute-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heute-meta { color: var(--text-2); font-size: 0.87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neu-eintrag { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 12px; color: var(--text); transition: background var(--schnell); }
.neu-eintrag:active { background: var(--fuell); }
@media (hover: hover) and (pointer: fine) { .neu-eintrag:hover { background: var(--fuell); } .heute-termin:hover { filter: brightness(0.97); } }
.neu-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.neu-titel { display: flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neu-zeit { color: var(--text-3); font-size: 0.8rem; white-space: nowrap; }

/* ------------------------------------------------------------ Aufgaben */
.aufgaben-seite { max-width: 860px; }
.schnell-neu { display: flex; align-items: center; gap: 12px; padding: 4px 14px; min-height: 52px; margin: 6px 0 4px; border-radius: 14px; background: var(--flaeche); box-shadow: var(--schatten); }
.schnell-neu input { flex: 1; padding: 10px 0; }
.plus-kreis { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fuell); color: var(--akzent); flex: none; }
.aufgaben-liste { list-style: none; margin: 0; padding: 0 4px 0 14px; background: var(--flaeche); border-radius: 14px; box-shadow: var(--schatten); }
.aufgaben-liste.kompakt { background: none; box-shadow: none; padding: 0; }
.aufgabe { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px 8px 0; }
.aufgabe + .aufgabe::before { content: ""; position: absolute; top: 0; left: 36px; right: 0; border-top: 0.5px solid var(--linie); }
.aufgabe-knopf { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; padding: 4px 0; border-radius: 8px; }
.aufgabe-titel { font-weight: 500; overflow-wrap: anywhere; }
.aufgabe .prio { color: var(--rot-text); font-weight: 700; }
.aufgabe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--text-2); font-size: 0.85rem; }
.aufgabe-meta span { display: inline-flex; align-items: center; gap: 4px; }
.aufgabe-meta .notiz-schnipsel { color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.aufgabe.erledigt .aufgabe-titel { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--text-3); }
.aufgabe-person { flex: none; display: inline-flex; }
.aufgabe-person .beide { display: inline-flex; }
.aufgabe-person .beide .avatar + .avatar { margin-left: -7px; box-shadow: 0 0 0 2px var(--flaeche); }
.aufgabe-person .beide .avatar:first-child { box-shadow: 0 0 0 2px var(--flaeche); }

/* ------------------------------------------------------------ Kalender */
.kalender-seite { max-width: none; display: flex; flex-direction: column; }
.kalender-kopf { flex-wrap: wrap; align-items: center; }
.kalender-titel { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kw-plakette { padding: 2px 10px; border-radius: 10px; background: var(--fuell); color: var(--text-2); font-weight: 600; font-size: 0.87rem; }
.kalender-steuerung { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.kalender-filter { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -6px 0 14px; }
.kalender-schalter { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-weight: 500; cursor: pointer; }
.kalender-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kalender-haken { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1.8px solid color-mix(in srgb, var(--f) 72%, black); color: transparent; transition: background var(--schnell); }
.kalender-schalter input:checked + .kalender-haken { background: color-mix(in srgb, var(--f) 72%, black); color: #fff; }
@media (prefers-color-scheme: dark) {
  .kalender-haken { border-color: var(--f); }
  .kalender-schalter input:checked + .kalender-haken { background: var(--f); color: #000; }
}
.kalender-schalter:has(input:focus-visible) .kalender-haken { outline: 3px solid color-mix(in srgb, var(--akzent) 60%, transparent); outline-offset: 2px; }

.monat { display: grid; background: var(--flaeche); border-radius: var(--radius-gross); box-shadow: var(--schatten); overflow: hidden; min-height: calc(100dvh - 210px); }
.monat-kopfzeile, .monat-woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.monat-wt { padding: 10px 10px 8px; text-align: right; font-size: 0.8rem; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 0.5px solid var(--linie); }
.monat-tag { display: flex; flex-direction: column; min-width: 0; min-height: 104px; padding: 4px; border-right: 0.5px solid var(--linie); border-bottom: 0.5px solid var(--linie); }
.monat-woche .monat-tag:last-child { border-right: 0; }
.monat-woche:last-child .monat-tag { border-bottom: 0; }
.monat-tag.wochenende, .monat-wt.wochenende { background: color-mix(in srgb, var(--fuell) 35%, transparent); }
.monat-tag.fremd .tag-zahl { color: var(--text-3); }
.tag-zahl { align-self: flex-end; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 15px; font-weight: 550; font-variant-numeric: tabular-nums; }
.monat-tag.heute .tag-zahl { background: var(--rot-voll); color: #fff; font-weight: 700; }
.monat-tag.gewaehlt:not(.heute) .tag-zahl { background: var(--fuell-2); }
@media (hover: hover) and (pointer: fine) { .tag-zahl:hover { background: var(--fuell); } .monat-tag.heute .tag-zahl:hover { background: var(--rot-voll); } }
.monat-eintraege { flex: 1; display: grid; align-content: start; gap: 2px; min-width: 0; padding-top: 2px; }
.chip-eintrag {
  display: flex; align-items: center; gap: 5px; min-width: 0; width: 100%; padding: 2px 6px; border-radius: 6px; text-align: left;
  font-size: 0.8rem; line-height: 1.3; font-weight: 500; color: var(--text);
}
.chip-eintrag .punkt { width: 7px; height: 7px; }
.chip-eintrag.ganz { background: color-mix(in srgb, var(--f) 22%, transparent); color: color-mix(in srgb, var(--f) 45%, var(--tinte)); font-weight: 600; }
.chip-eintrag.erledigt .chip-text { text-decoration: line-through; color: var(--text-3); }
.chip-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-zeit { color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 0.75rem; }
.mini-kreis { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--f); flex: none; }
.mini-kreis.voll { background: var(--f); }
.mehr-knopf { text-align: left; padding: 1px 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-2); border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .chip-eintrag:hover, .mehr-knopf:hover { background: var(--fuell); } .chip-eintrag.ganz:hover { filter: brightness(0.96); } }

/* Monat am iPhone: kleine Zellen mit Punkten, darunter die Liste des gewählten Tages */
.monat.schmal { min-height: 0; }
.monat.schmal .monat-wt { text-align: center; padding: 8px 0 6px; font-size: 0.72rem; }
.monat.schmal .monat-tag { min-height: 52px; align-items: center; padding: 3px 0 4px; border-right: 0; }
.monat.schmal .tag-zahl { align-self: center; min-width: 34px; height: 34px; border-radius: 17px; padding: 0; font-size: 1.03rem; }
.punkte { display: flex; gap: 3px; height: 6px; margin-top: 1px; }
.punkte .punkt { width: 5px; height: 5px; }
.tagesliste { margin-top: 18px; }
.tagesliste-kopf { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 8px; }
.eintrag-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.listen-eintrag { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--flaeche); box-shadow: var(--schatten); overflow: hidden; }
.listen-eintrag.erledigt .listen-eintrag-titel { text-decoration: line-through; color: var(--text-3); }
.listen-eintrag-knopf { flex: 1; min-width: 0; display: grid; text-align: left; gap: 1px; }
.listen-eintrag-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.listen-eintrag-meta { display: flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 0.87rem; flex-wrap: wrap; }
.listen-eintrag-kal { color: color-mix(in srgb, var(--f) 45%, var(--tinte)); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.leise-text + .leise-text { margin-top: 4px; }
.agenda { display: grid; gap: 14px; }
.agenda-tag h2 { font-size: 1.05rem; margin: 0 0 6px; }
.agenda-tag h2 .text-knopf { color: var(--text); padding: 0; font-weight: 650; }
.agenda-tag.heute h2 .text-knopf { color: var(--rot-text); }
.agenda-tag .leise-text { padding: 0 4px; font-size: 0.93rem; }

/* Tages- und Wochenraster */
.raster { --stunde: 48px; display: flex; flex-direction: column; background: var(--flaeche); border-radius: var(--radius-gross); box-shadow: var(--schatten); overflow: hidden; height: calc(100dvh - 200px); min-height: 420px; }
.raster-kopf, .raster-ganztags { display: grid; grid-template-columns: 58px repeat(var(--tage), minmax(0, 1fr)); border-bottom: 0.5px solid var(--linie); }
.raster-ecke { border-right: 0.5px solid var(--linie); }
.raster-ecke.klein { font-size: 0.7rem; color: var(--text-3); padding: 6px 4px; text-align: right; }
.raster-tagkopf { display: flex; justify-content: center; align-items: center; padding: 8px 4px; border-right: 0.5px solid var(--linie); }
.raster-tagkopf:last-child { border-right: 0; }
.raster-tagkopf .text-knopf { color: var(--text); gap: 6px; }
.raster-wt { color: var(--text-2); font-weight: 550; }
.raster-datum { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.raster-tagkopf.heute .raster-datum { background: var(--rot-voll); color: #fff; }
.raster-tagkopf.heute .raster-wt { color: var(--rot-text); }
.raster-ganztags-tag { display: grid; align-content: start; gap: 2px; padding: 4px; border-right: 0.5px solid var(--linie); min-width: 0; }
.raster-scroller { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.raster-flaeche { position: relative; display: grid; grid-template-columns: 58px repeat(var(--tage), minmax(0, 1fr)); }
.raster-stunden { position: absolute; inset: 0; pointer-events: none; }
.stunde { position: absolute; left: 0; right: 0; height: 0; border-top: 0.5px solid var(--linie); }
.stunde span { position: absolute; left: 0; width: 50px; top: -0.6em; text-align: right; font-size: 0.72rem; color: var(--text-3); font-variant-numeric: tabular-nums; background: var(--flaeche); padding-right: 2px; }
.raster-spalte { grid-row: 1; position: relative; border-right: 0.5px solid var(--linie); cursor: copy; }
.raster-spalte:nth-child(2) { grid-column: 2; } .raster-spalte:nth-child(3) { grid-column: 3; } .raster-spalte:nth-child(4) { grid-column: 4; }
.raster-spalte:nth-child(5) { grid-column: 5; } .raster-spalte:nth-child(6) { grid-column: 6; } .raster-spalte:nth-child(7) { grid-column: 7; } .raster-spalte:nth-child(8) { grid-column: 8; }
.raster-spalte:last-child { border-right: 0; }
.raster-spalte.wochenende { background: color-mix(in srgb, var(--fuell) 30%, transparent); }
.block-eintrag {
  position: absolute; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; text-align: left;
  padding: 3px 7px 3px 9px; border-radius: 7px; font-size: 0.8rem; line-height: 1.25; cursor: pointer;
  background: color-mix(in srgb, var(--f) 20%, var(--flaeche)); color: color-mix(in srgb, var(--f) 45%, var(--tinte));
  box-shadow: inset 3px 0 0 var(--f);
  transition: filter var(--schnell);
}
.block-eintrag.aufgabe { background: color-mix(in srgb, var(--f) 9%, var(--flaeche)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--f) 45%, transparent); }
.block-eintrag.erledigt { opacity: 0.6; }
.block-eintrag.erledigt .block-titel { text-decoration: line-through; }
.block-eintrag.flach { flex-direction: row; gap: 6px; align-items: center; padding-top: 1px; padding-bottom: 1px; }
.block-titel { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.block-zeit { font-variant-numeric: tabular-nums; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.block-eintrag:active { filter: brightness(0.93); }
@media (hover: hover) and (pointer: fine) { .block-eintrag:hover { filter: brightness(0.96); } }
.jetzt-linie { position: absolute; left: -4px; right: 0; height: 2px; background: var(--heute); pointer-events: none; z-index: 2; }
.jetzt-linie span { position: absolute; left: -2px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--heute); }

@media (max-width: 899px) {
  .kalender-kopf { gap: 10px; }
  .kalender-titel { flex: 1; min-width: 0; order: 1; }
  .kalender-neu { order: 2; }
  .kalender-steuerung { order: 3; width: 100%; justify-content: space-between; margin-left: 0; }
  .kalender-titel h1 { font-size: 1.75rem; }
  .raster { height: calc(100dvh - 270px - env(safe-area-inset-bottom, 0px)); --stunde: 48px; }
  .raster-kopf, .raster-ganztags, .raster-flaeche { grid-template-columns: 48px repeat(var(--tage), minmax(0, 1fr)); }
  .stunde span { width: 42px; }
}

/* ------------------------------------------------------------ Notizen */
.notizen-layout.zweispaltig { display: grid; grid-template-columns: minmax(290px, 360px) 1fr; min-height: 100dvh; }
.notiz-spalte { padding: 26px 18px 40px 28px; border-right: 0.5px solid var(--linie); min-width: 0; }
.notizen-layout:not(.zweispaltig) .notiz-spalte { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 24px; border-right: 0; }
.notiz-editor-spalte { min-width: 0; background: var(--flaeche); }
.notiz-editor-spalte > .leer { min-height: 70dvh; align-content: center; }
.suchfeld { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 40px; margin-bottom: 12px; border-radius: 11px; background: var(--fuell); color: var(--text-3); }
.suchfeld input { flex: 1; padding: 8px 0; color: var(--text); }
.suchfeld input::-webkit-search-cancel-button { opacity: 0.6; }
.notiz-liste { list-style: none; margin: 0; padding: 4px 0; background: var(--flaeche); border-radius: 14px; box-shadow: var(--schatten); }
.zweispaltig .notiz-liste { background: transparent; box-shadow: none; padding: 0; }
.notiz-eintrag { display: grid; gap: 2px; padding: 11px 14px; margin: 0 4px; border-radius: 11px; color: var(--text); transition: background var(--schnell); }
.notiz-liste li + li .notiz-eintrag { box-shadow: 0 -0.5px 0 var(--linie); }
.notiz-eintrag.aktiv, .notiz-liste li + li .notiz-eintrag.aktiv { background: color-mix(in srgb, var(--gelb) 30%, var(--flaeche)); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .notiz-eintrag:not(.aktiv):hover { background: var(--fuell); } }
.notiz-eintrag-titel { display: flex; align-items: center; gap: 4px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notiz-eintrag-meta { display: flex; gap: 8px; color: var(--text-2); font-size: 0.9rem; min-width: 0; }
.notiz-eintrag-zeit { flex: none; font-weight: 500; }
.notiz-eintrag-vorschau { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
.notiz-eintrag-fuss { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.f-orange.icon, .icon.f-orange { color: color-mix(in srgb, var(--orange) 55%, var(--tinte)); }

.notiz-editor { max-width: 860px; margin: 0 auto; padding: 18px 34px 60px; }
.seite-notizen .notiz-editor { min-height: 100dvh; }
.notiz-leiste { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 0; margin-bottom: 4px;
  background: color-mix(in srgb, var(--flaeche) 85%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.zurueck-link { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; min-height: 38px; margin-left: -6px; }
.speicher-status { color: var(--text-3); font-size: 0.85rem; }
.speicher-status.fehler, .speicher-status.konflikt { color: var(--rot-text); font-weight: 600; }
.notiz-aktionen { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.klein-auswahl { font-size: 0.9rem !important; min-height: 32px; }
.notiz-info { color: var(--text-3); font-size: 0.85rem; margin: 6px 0 2px; }
.notiz-titel { width: 100%; font-size: 1.9rem !important; font-weight: 700; letter-spacing: -0.02em; padding: 4px 0 6px; }
.konflikt { padding: 14px 16px; margin: 6px 0 10px; border-radius: 14px; background: color-mix(in srgb, var(--orange) 16%, var(--flaeche)); }
.konflikt-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.werkzeugleiste { position: sticky; top: 54px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 4px; margin: 6px 0 10px; border-radius: 12px; background: var(--fuell); overflow-x: auto; scrollbar-width: none; }
.werkzeug { display: inline-grid; place-items: center; min-width: 36px; height: 34px; padding: 0 9px; border-radius: 8px; font-size: 0.95rem; color: var(--text); flex: none; }
.werkzeug.an { background: var(--flaeche); color: var(--akzent-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
@media (prefers-color-scheme: dark) { .werkzeug.an { background: #636366; color: #fff; } }
.werkzeug .w-titel { font-weight: 700; }
.werkzeug .w-ueber { font-weight: 650; }
.werkzeug-trenner { width: 1px; height: 20px; background: var(--linie-stark); margin: 0 4px; flex: none; }
@media (hover: hover) and (pointer: fine) { .werkzeug:not(.an):hover { background: var(--fuell-2); } }

.notiz-inhalt { min-height: 240px; outline: none; font-size: 1.07rem; line-height: 1.55; padding-bottom: 20px; overflow-wrap: anywhere; caret-color: var(--orange); }
.notiz-inhalt:focus-visible { outline: none; }
.notiz-inhalt p, .notiz-inhalt div { margin: 0 0 0.35em; }
.notiz-inhalt h2 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.7em 0 0.3em; }
.notiz-inhalt h3 { font-size: 1.22rem; font-weight: 650; margin: 0.6em 0 0.25em; }
.notiz-inhalt ul, .notiz-inhalt ol { margin: 0 0 0.5em; padding-left: 1.6em; }
.notiz-inhalt li { margin: 0.12em 0; }
.notiz-inhalt ul.checkliste { list-style: none; padding-left: 0; }
.notiz-inhalt ul.checkliste > li { position: relative; padding-left: 32px; min-height: 1.55em; }
.notiz-inhalt ul.checkliste > li::before {
  content: ""; position: absolute; left: 2px; top: 0.2em; width: 20px; height: 20px; border-radius: 50%;
  border: 1.6px solid var(--rand-steuer); cursor: pointer; box-sizing: border-box;
}
.notiz-inhalt ul.checkliste > li[data-checked="true"] { color: var(--text-3); }
.notiz-inhalt ul.checkliste > li[data-checked="true"]::before {
  /* dunkleres Orange, damit der weiße Haken sich genug abhebt (3:1) */
  border-color: color-mix(in srgb, var(--orange) 72%, black);
  background: color-mix(in srgb, var(--orange) 72%, black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
@media (prefers-color-scheme: dark) {
  .notiz-inhalt ul.checkliste > li[data-checked="true"]::before {
    border-color: var(--orange);
    background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
  }
}
.notiz-inhalt blockquote { margin: 0 0 0.5em; padding-left: 12px; border-left: 3px solid var(--linie-stark); color: var(--text-2); }

.notiz-bereich { margin-top: 26px; padding-top: 18px; border-top: 0.5px solid var(--linie); }
.bereich-titel { font-size: 1.05rem; margin-bottom: 10px; }
.kommentar-liste { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.kommentar { display: flex; align-items: flex-start; gap: 10px; }
.kommentar-blase { flex: 1; min-width: 0; padding: 9px 13px; border-radius: 16px; background: var(--fuell); }
.kommentar-kopf { display: flex; gap: 8px; align-items: baseline; font-size: 0.9rem; }
.kommentar-kopf time { color: var(--text-3); font-size: 0.8rem; }
.kommentar-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.kommentar-form { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 22px; box-shadow: 0 0 0 1px var(--linie-stark) inset; }
.kommentar-form textarea { flex: 1; resize: none; padding: 8px 0; max-height: 200px; line-height: 1.4; }
.kommentar-form .symbol-knopf { width: 34px; height: 34px; background: var(--akzent-voll); color: #fff; }

@media (max-width: 899px) {
  .notiz-editor { padding: calc(4px + env(safe-area-inset-top, 0px)) 16px 40px; background: var(--flaeche); min-height: 100dvh; }
  .seite-notizen { background: var(--bg); }
  .notiz-titel { font-size: 1.65rem !important; }
  .werkzeugleiste { top: 54px; }
}

/* ------------------------------------------------------------ Blätter (Dialoge) */
dialog { color: var(--text); }
dialog.blatt {
  width: min(560px, 100vw - 32px); max-height: min(860px, 100dvh - 48px); padding: 0; border: 0; border-radius: 22px;
  background: var(--bg); box-shadow: var(--schatten-gross); overflow: hidden; display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
dialog.blatt:not([open]) { display: none; }
dialog.blatt[open] { animation: blatt-auf 380ms var(--kurve); }
dialog::backdrop { background: rgba(0, 0, 0, 0.32); animation: dimmen 280ms ease-out; }
@keyframes blatt-auf { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
@keyframes dimmen { from { opacity: 0; } }
.blatt-kopf {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-height: 56px; padding: 6px 14px;
  border-bottom: 0.5px solid var(--linie); background: var(--glas); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.blatt-kopf h2 { font-size: 1.05rem; font-weight: 650; text-align: center; }
.blatt-kopf > .text-knopf { justify-self: start; }
.blatt-rechts { justify-self: end; }
.blatt-inhalt { overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.blatt-info { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 0.9rem; margin: 0 6px 10px; }
.fehler-zeile { padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: color-mix(in srgb, var(--rot) 13%, var(--flaeche)); color: color-mix(in srgb, var(--rot) 45%, var(--tinte)); font-weight: 550; }
.gruppe { background: var(--flaeche); border-radius: 14px; margin-bottom: 18px; overflow: hidden; }
.gruppe-titel { color: var(--text-2); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 16px 7px; }
.titel-feld { display: block; width: 100%; padding: 13px 16px 6px; font-size: 1.15rem !important; font-weight: 600; }
.ort-feld { display: block; width: 100%; padding: 6px 16px 13px; color: var(--text); }
.notiz-feld { display: block; width: 100%; padding: 8px 16px 13px; resize: none; line-height: 1.4; min-height: 44px; }
.gruppe > .titel-feld + .notiz-feld, .gruppe > .titel-feld + .ort-feld { border-top: 0.5px solid var(--linie); padding-top: 11px; }
.zeile { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 7px 14px 7px 16px; }
.zeile + .zeile { box-shadow: 0 -0.5px 0 var(--linie); }
.zeile.hoch { flex-wrap: wrap; row-gap: 6px; }
.zeile.unter { min-height: 46px; padding-left: 56px; }
.zeile-symbol { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--f); color: #fff; flex: none; }
.zeile-text { flex: 1; min-width: 0; }
.zeile-text.leise { color: var(--text-2); }
.zeile select { max-width: 60%; }
.zeile .wert { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.zeitwahl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wochentage { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-knopf { min-width: 40px; height: 34px; padding: 0 8px; border-radius: 17px; background: var(--fuell); font-weight: 600; font-size: 0.9rem; }
.tag-knopf.an { background: var(--akzent-voll); color: #fff; }
.tag-knopf:disabled { opacity: 1; }
.breit { flex: 1; min-width: 0; padding: 8px 0; }
.unteraufgabe { min-height: 48px; }
.unteraufgabe input.rund { width: 22px; height: 22px; }
.aktion-zeile { display: block; width: 100%; text-align: left; min-height: 50px; padding: 0 16px; color: var(--akzent-text); font-weight: 500; }
.aktion-zeile + .aktion-zeile { box-shadow: 0 -0.5px 0 var(--linie); }
.aktion-zeile:active { background: var(--fuell); }

@media (max-width: 899px) {
  /* Am iPhone kommt das Blatt von unten */
  dialog.blatt { width: 100vw; max-width: 100vw; max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px))); margin: auto 0 0; border-radius: 22px 22px 0 0; }
  @keyframes blatt-auf { from { transform: translateY(100%); } }
}

/* Rückfragen (Alert) */
dialog.frage { width: min(330px, 100vw - 40px); padding: 0; border: 0; border-radius: 18px; background: var(--glas); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--schatten-gross); text-align: center; overflow: hidden; }
dialog.frage[open] { animation: frage-auf 260ms var(--kurve); }
@keyframes frage-auf { from { opacity: 0; transform: scale(1.08); } }
.frage-text { padding: 20px 18px 16px; display: grid; gap: 4px; }
.frage-text h2 { font-size: 1.06rem; font-weight: 650; }
.frage-text p { color: var(--text-2); font-size: 0.93rem; overflow-wrap: anywhere; }
.frage-knoepfe { display: grid; }
.frage-knopf { min-height: 46px; border-top: 0.5px solid var(--linie-stark); color: var(--akzent-text); font-size: 1.03rem; font-weight: 500; }
.frage-knopf.destruktiv { color: var(--rot-text); }
.frage-knopf.abbrechen { font-weight: 650; }
.frage-knopf:active { background: var(--fuell); }
@media (hover: hover) and (pointer: fine) { .frage-knopf:hover { background: var(--fuell); } }

/* Hinweis (Toast) – als Popover über allem */
.hinweis[popover] {
  inset: auto 0 calc(24px + env(safe-area-inset-bottom, 0px)) 0; margin: 0 auto; width: fit-content; max-width: calc(100vw - 32px);
  border: 0; padding: 12px 18px; border-radius: 16px; font-weight: 550; color: var(--text);
  background: var(--glas); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); text-align: center;
}
.hinweis[popover]:popover-open { animation: hinweis-auf 320ms var(--kurve); }
.hinweis.fehler { background: var(--rot-voll); color: #fff; }
@keyframes hinweis-auf { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@media (max-width: 899px) { .hinweis[popover] { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }

/* ------------------------------------------------------------ Anhänge */
.anhaenge { display: grid; }
.anhang-liste { list-style: none; margin: 0; padding: 0; }
.anhang { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-bottom: 0.5px solid var(--linie); }
.anhang-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--text); }
.anhang-bild { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; background: var(--fuell); }
.anhang-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--fuell); color: var(--akzent); flex: none; }
.anhang-name { display: grid; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang-name small { color: var(--text-3); font-weight: 400; font-size: 0.8rem; }
.anhang-neu { position: relative; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 16px; color: var(--akzent-text); font-weight: 500; cursor: pointer; }
.anhang-neu:active { background: var(--fuell); }
.anhang-neu:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--akzent) 60%, transparent); outline-offset: -3px; }
.datei-eingabe { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.notiz-bereich .anhaenge { background: var(--flaeche-2); border-radius: 14px; overflow: hidden; }

/* ------------------------------------------------------------ Einstellungen und Formulare */
.einstellungen { max-width: 760px; }
.konto { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.konto > div { flex: 1; min-width: 180px; }
.konto-name { font-size: 1.2rem; font-weight: 650; }
.formular { display: grid; gap: 12px; margin-top: 12px; }
.formular label { display: grid; gap: 5px; font-weight: 550; font-size: 0.93rem; color: var(--text-2); }
.formular input { padding: 11px 14px; border-radius: 12px; background: var(--fuell); color: var(--text); font-weight: 400; }
.abo-liste { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 4px; }
.abo { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border-bottom: 0.5px solid var(--linie); }
.abo-name { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-weight: 550; }
.anleitung { margin: 6px 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--fuell); }
.anleitung summary { cursor: pointer; font-weight: 600; }
.anleitung ol { margin: 10px 0 0; padding-left: 1.3em; display: grid; gap: 6px; color: var(--text-2); }
.verwalten-liste { list-style: none; margin: 10px 0; padding: 0; }
.verwalten-liste li { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 0.5px solid var(--linie); }
.farb-wahl { width: 92px; flex: none; font-size: 0.85rem !important; }
.verwalten-neu { display: flex; gap: 10px; align-items: center; }
.verwalten-neu input { padding: 9px 14px; border-radius: 12px; background: var(--fuell); }

/* ------------------------------------------------------------ Anmelden */
.anmelden { min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top, 0px)) 16px max(24px, env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--indigo) 22%, var(--bg)), var(--bg) 70%); }
.anmelden-karte { width: min(400px, 100%); display: grid; justify-items: center; gap: 6px; padding: 32px 26px 24px; border-radius: 26px; background: var(--glas); border: 0.5px solid var(--glas-rand);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--schatten-gross); text-align: center; }
.anmelden-logo { border-radius: 17px; box-shadow: 0 6px 20px rgba(88, 86, 214, 0.35); margin-bottom: 8px; }
.anmelden-zeit { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.anmelden .formular { width: 100%; text-align: left; }
.anmelden .formular input { background: var(--flaeche); box-shadow: 0 0 0 0.5px var(--linie-stark) inset; }
.anmelden .knopf.gross { margin-top: 6px; }

/* ------------------------------------------------------------ Barrierefreiheit: weniger Bewegung, weniger Transparenz, mehr Kontrast */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .laden-kreis { animation: none; border-top-color: var(--akzent); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glas: var(--flaeche); }
  .seitenleiste, .tableiste, .blatt-kopf, .frage, .hinweis[popover], .anmelden-karte, .notiz-leiste { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --linie: rgba(60, 60, 67, 0.5); --text-2: rgba(60, 60, 67, 0.95); --text-3: rgba(60, 60, 67, 0.8); --glas: var(--flaeche); }
  @media (prefers-color-scheme: dark) { :root { --linie: rgba(160, 160, 165, 0.7); --text-2: rgba(235, 235, 245, 0.92); --text-3: rgba(235, 235, 245, 0.75); } }
  .chip, .karte, .gruppe { box-shadow: 0 0 0 1px var(--linie) inset; }
}
@media (forced-colors: active) {
  input.rund, input.schalter, .kalender-haken { border: 2px solid CanvasText; }
  .chip.an, .segment.an, .nav-eintrag.aktiv { outline: 2px solid Highlight; }
}