/* Familienplaner – Color-Block-Design: kräftige, flächige Farben */

:root {
  /* Grundfarben */
  --bg: #fff7ea;
  --surface: #ffffff;
  --surface-2: #f1e8d8;
  --text: #15173b;
  --muted: #5f6283;
  --ink: #15173b;
  --ink-text: #ffffff;
  --line: #e7dcc8;
  --danger: #d7263d;

  /* Signalfarben der Bereiche */
  --c-kalender: #0b9e5e;
  --c-aufgaben: #8b3dff;
  --c-einkauf: #f2504b;
  --c-essen: #ff8a00;
  --c-pinnwand: #2b2f6b;
  --yellow: #ffd23f;
  --pink: #ff6fae;
  --section: var(--c-kalender);

  /* Blöcke für Tagesköpfe */
  --head-bg: var(--ink);
  --head-text: #ffffff;
  /* Heute in Kalender-Grün, damit es sich klar vom gelben „Privat“ abhebt */
  --today-bg: var(--c-kalender);
  --today-text: #ffffff;
  --today-tint: var(--surface);

  /* Feiertage (rot) und Schulferien (lavendel) – unabhängig von Arbeit/Privat */
  --holiday-bg: #ffe0e0;
  --holiday-text: #c1121f;
  --ferien-bg: #ebe4ff;
  --ferien-text: #4c2bb0;

  /* Geburtstage: Regenbogen aus den Farben der App */
  --rainbow: repeating-linear-gradient(135deg, #e63946 0 40px, #ff7a00 40px 80px, #ffd23f 80px 120px,
    #0b9e5e 120px 160px, #0096c7 160px 200px, #8b3dff 200px 240px);
  --outline: -2px -2px 0 #15173b, 2px -2px 0 #15173b, -2px 2px 0 #15173b, 2px 2px 0 #15173b,
    0 -2px 0 #15173b, 0 2px 0 #15173b, -2px 0 0 #15173b, 2px 0 0 #15173b;
  --outline-icon: drop-shadow(1.5px 0 0 #15173b) drop-shadow(-1.5px 0 0 #15173b)
    drop-shadow(0 1.5px 0 #15173b) drop-shadow(0 -1.5px 0 #15173b);

  --cat-arbeit: #3d6bff;
  --cat-privat: #ffdc6e;

  /* Text auf farbigen Flächen und Schriftstärke – das sanfte Design ändert beides */
  --on-accent: #ffffff;
  --rainbow-text: #ffffff;
  --fw-heavy: 900;

  --radius: 18px;
  --gap: 10px;
  --tap: 44px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs: 15px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1130;
    --surface: #1b1e45;
    --surface-2: #272b5c;
    --text: #f5f3ff;
    --muted: #a9abd0;
    --line: #2f3468;
    --head-bg: #343a85;
    --holiday-bg: #4a1d27;
    --holiday-text: #ffb3ba;
    --ferien-bg: #2e2763;
    --ferien-text: #d3c8ff;
    color-scheme: dark;
  }
}

/* Jeder Wochentag hat seine eigene Farbe (bewusst ohne Grün, Gelb und Arbeits-Blau,
   damit Heute, Privat und Arbeit unverwechselbar bleiben) */
.wd-0 { --head-bg: #e63946; }
.wd-1 { --head-bg: #ff7a00; }
.wd-2 { --head-bg: #ff4fa3; }
.wd-3 { --head-bg: #8b3dff; }
.wd-4 { --head-bg: #0096c7; }
.wd-5 { --head-bg: #3a3fb8; }
.wd-6 { --head-bg: #00727d; }

body[data-tab="kalender"] { --section: var(--c-kalender); }
body[data-tab="aufgaben"] { --section: var(--c-aufgaben); }
body[data-tab="einkauf"] { --section: var(--c-einkauf); }
body[data-tab="essen"] { --section: var(--c-essen); }
body[data-tab="pinnwand"] { --section: var(--c-pinnwand); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Knöpfe ---------- */
.btn {
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: 999px;
  border: 0;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
}
.btn.primary { background: var(--ink); color: var(--ink-text); }
.btn.danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 2px currentColor; }
.btn.small { min-height: 34px; padding: 0 14px; font-size: 0.9em; }
.btn:active, .icon-btn:active, .tile:active, .fab:active { transform: scale(0.96); }

@media (prefers-color-scheme: dark) {
  .btn.primary { background: var(--yellow); color: #15173b; }
}

.icon-btn {
  width: var(--tap);
  height: var(--tap);
  border-radius: 999px;
  border: 0;
  background: var(--ink);
  color: var(--ink-text);
  display: inline-grid;
  place-items: center;
  flex: none;
}

.link-btn { border: 0; background: none; color: var(--muted); text-decoration: underline; font-size: 0.8em; font-weight: 600; padding: 4px; }

/* ---------- Symbole ---------- */
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.icon-btn .icon { width: 22px; height: 22px; }
.fab .icon { width: 30px; height: 30px; stroke-width: 2.6; }
.tabs button, .mode-switch button, .btn, .person-chip, .cat-pick label > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.icon.warn { color: var(--danger); }
.avatar .icon { width: 16px; height: 16px; }
.stack { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Login ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; background: var(--c-kalender); }
.login-card {
  background: var(--surface);
  padding: 28px;
  border-radius: 24px;
  width: min(380px, 100%);
  display: grid;
  gap: 14px;
  box-shadow: 10px 10px 0 var(--yellow);
}
.login-card h1 { margin: 0; font-size: 1.6em; font-weight: var(--fw-heavy); }
.error { color: var(--danger); margin: 0; font-weight: 700; }
.login-card .link-btn { justify-self: center; }
.server-warn { padding: 10px 14px; border-radius: 12px; background: #fff1c2; color: #5c3b00; }
.legal-links { margin: 0; text-align: center; font-size: 0.8em; color: var(--muted); }
.legal-links a { color: inherit; }

/* ---------- Mitglieder & Einladungen ---------- */
.member-row select { width: auto; min-height: 36px; padding: 4px 8px; }
.role-badge { padding: 3px 10px; border-radius: 999px; background: var(--surface); font-size: 0.8em; font-weight: 800; }
.modal .invite-form { display: grid; gap: 10px; padding: 0; }
.qr-box { display: grid; place-items: center; }
.qr-box .qr { width: min(240px, 70vw); height: auto; border-radius: 12px; }
.invite-link .row-buttons { justify-content: center; }
.account-more { margin-top: 8px; }
.account-more summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.account-more .row-buttons { margin-top: 8px; }
.pair-code-big { font-size: 3em; font-weight: var(--fw-heavy); letter-spacing: 0.12em; text-align: center; padding: 12px; border-radius: 16px;
  background: var(--surface-2); font-variant-numeric: tabular-nums; }
.pair-code-input { font-size: 1.8em !important; letter-spacing: 0.2em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Layout ---------- */
.app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Kopfleiste: Farbblock in der Farbe des aktuellen Bereichs */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  flex-wrap: wrap;
  background: var(--section);
  color: var(--on-accent);
  transition: background 0.25s;
}
.brand { display: flex; align-items: baseline; gap: 12px; margin-right: auto; min-width: 0; }
.brand-name { font-weight: var(--fw-heavy); font-size: 1.4em; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall-clock { display: none; }

.tabs, .mode-switch {
  display: flex;
  background: rgb(255 255 255 / 0.18);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.tabs button, .mode-switch button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--on-accent);
  font-weight: 800;
  white-space: nowrap;
}
.tabs button.active { background: #fff; color: var(--section); }
.mode-switch button[aria-checked="true"] { background: var(--ink); color: #fff; }
.mode-switch button[data-mode="arbeit"][aria-checked="true"] { background: var(--cat-arbeit); color: var(--cat-arbeit-text, #fff); box-shadow: inset 0 0 0 3px #fff; }
.mode-switch button[data-mode="privat"][aria-checked="true"] { background: var(--cat-privat); color: var(--cat-privat-text, #111); box-shadow: inset 0 0 0 3px #fff; }

.top-actions { display: flex; align-items: center; gap: 8px; }
.topbar .icon-btn { background: rgb(255 255 255 / 0.18); color: var(--on-accent); }
.offline { background: var(--yellow); color: #15173b; font-weight: 800; font-size: 0.85em; padding: 6px 12px; border-radius: 999px; }

/* Personen-Leiste: vollflächige Farbchips */
.people-bar {
  display: flex;
  gap: 8px;
  padding: 12px 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.person-chip {
  min-height: 40px;
  padding: 0 16px 0 5px;
  border-radius: 999px;
  border: 0;
  background: var(--p);
  color: var(--pt, #fff);
  font-weight: 800;
  white-space: nowrap;
  flex: none;
}
.person-chip .avatar { box-shadow: 0 0 0 2px var(--pt, #fff); }
.person-chip.off { background: transparent; color: var(--text); box-shadow: inset 0 0 0 3px var(--p); opacity: 0.6; }
.person-chip.off .avatar { box-shadow: none; }
.person-chip.add-chip { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.person-chip.add-chip .avatar { box-shadow: none; }

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 0.72em;
  font-weight: var(--fw-heavy);
  flex: none;
}

.main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 16px 16px; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- Kalender ---------- */
.cal-toolbar { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; padding: 8px 0 12px; }
.nav-group { display: flex; gap: 6px; align-items: center; }
.nav-group .btn { background: var(--today-bg); color: var(--today-text); }
.cal-title { margin: 0; font-size: 1.6em; font-weight: var(--fw-heavy); letter-spacing: -0.02em; flex: 1; min-width: 140px; }

.seg { display: flex; background: var(--surface-2); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-weight: 800;
  white-space: nowrap;
}
.seg button.active { background: var(--section); color: var(--on-accent); }

.cal-wrap { flex: 1; min-height: 0; display: flex; gap: 14px; }
.cal-body { flex: 1; min-width: 0; display: flex; flex-direction: column; touch-action: pan-y; }
.wall-side { display: none; }

/* Monat */
.month-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; gap: 6px; }
.month-heads {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  text-align: center;
  font-weight: var(--fw-heavy);
  font-size: 0.85em;
}
.month-heads div { background: var(--head-bg); color: var(--head-text); border-radius: 10px; padding: 6px 0; }
.month {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(76px, auto);
  gap: 6px;
}
.day-cell {
  background: var(--surface);
  border-radius: 12px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  text-align: left;
}
.day-cell.other { background: var(--surface-2); }
.day-cell.other .day-num { opacity: 0.45; }
.day-cell.past > .ev, .day-cell.past > .more { opacity: 0.5; }
.day-cell.is-today { background: var(--today-tint); box-shadow: inset 0 0 0 3px var(--today-bg); }
.day-num {
  font-weight: var(--fw-heavy);
  font-size: 0.95em;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  flex: none;
}
.is-today .day-num { background: var(--today-bg); color: var(--today-text); }
.more { font-size: 0.8em; color: var(--muted); font-weight: 800; padding-left: 4px; }

/* Termin-Kärtchen: Hintergrund = Arbeit/Privat, Balken + Initialen = Person */
.ev {
  --bar: var(--p1, #888);
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 4px 6px 4px 12px;
  border: 0;
  border-radius: 9px;
  background-color: var(--cat-bg);
  color: var(--cat-fg);
  font-size: 0.85em;
  text-align: left;
  position: relative;
  overflow: hidden;
  line-height: 1.25;
}
.ev::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--bar);
  box-shadow: 2px 0 0 #fff;
}
.ev.arbeit { --cat-bg: var(--cat-arbeit); --cat-fg: var(--cat-arbeit-text, #fff); }
.ev.privat { --cat-bg: var(--cat-privat); --cat-fg: var(--cat-privat-text, #111); }
/* Schraffur für Arbeit – in Textfarbe, damit sie auf hellen und dunklen Farben sichtbar ist */
body.pattern .ev.arbeit, .ev.arbeit.striped {
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--cat-fg) 16%, transparent) 9px 12px);
}
.ev .time { font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; flex: none; }
.ev .title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ev .cat-icon { flex: none; width: 1em; height: 1em; }
.ev .badges { display: flex; gap: 2px; flex: none; }
.ev .badges .avatar { width: 20px; height: 20px; font-size: 0.6em; box-shadow: 0 0 0 2px #fff; }
.ev.big { padding: 9px 10px 9px 16px; font-size: 0.95em; align-items: flex-start; flex-wrap: wrap; border-radius: 12px; }
.ev.big::before { width: 9px; }
.ev.big .title { white-space: normal; flex-basis: 100%; order: 2; font-size: 1.05em; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.ev.big .meta { order: 3; flex-basis: 100%; font-size: 0.85em; font-weight: 600; opacity: 0.9; }
.ev.big .badges { margin-left: auto; }
.ev.big .badges .avatar { width: 24px; height: 24px; font-size: 0.66em; }

/* Verknüpfte Kalender */
.ev.external { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cat-fg) 35%, transparent); }
.cal-list { display: flex; flex-direction: column; gap: 6px; }
.cal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  text-align: left;
}
.cal-row.has-error { box-shadow: inset 0 0 0 2px var(--danger); }
.cal-row.has-error .sub { color: var(--danger); }
.cal-row .badges { display: flex; gap: 2px; margin-left: auto; }
.cal-row .badges .avatar { width: 26px; height: 26px; font-size: 0.65em; }
.cal-cat { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.cal-cat.arbeit { background: var(--cat-arbeit); color: var(--cat-arbeit-text, #fff); }
.cal-cat.privat { background: var(--cat-privat); color: var(--cat-privat-text, #111); }
.cal-name { display: flex; flex-direction: column; font-weight: 800; min-width: 0; }
.cal-status { margin: -6px 0 0; font-weight: 700; color: var(--muted); }
.cal-status.error { color: var(--danger); }
.cal-help { background: var(--surface-2); border-radius: 12px; padding: 10px 14px; font-size: 0.9em; }
.cal-help summary { font-weight: 800; cursor: pointer; }
.cal-help p { margin: 8px 0 0; }
.ext-when { margin: -6px 0 0; font-weight: 800; }
.modal-inner > p { margin: 0; }
.ext-notes { white-space: pre-line; background: var(--surface-2); border-radius: 12px; padding: 10px 14px; margin: 0; }
.ext-source { color: var(--muted); font-size: 0.9em; margin: 0; }
.ext-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-weight: 700; }

/* Erinnerungen */
.push-section { display: grid; gap: 10px; }
.push-section p { margin: 0; }
.push-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--c-kalender);
  color: var(--on-accent);
  font-weight: var(--fw-heavy);
}
.field-label { font-weight: 800; font-size: 0.9em; margin-bottom: 6px; }
.push-cats { display: flex; gap: 18px; flex-wrap: wrap; }
.push-cats .icon { margin-right: -4px; }
.push-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Wetter */
.wx-icon { width: 1.5em; height: 1.5em; flex: none; vertical-align: middle; }
.wx-icon.inline { width: 1.3em; height: 1.3em; }
.wx {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.92);
  color: #15173b;
  font-size: 0.8em;
  font-weight: 800;
  flex: none;
  white-space: nowrap;
}
.wx .wx-icon { width: 1.6em; height: 1.6em; }
.wx-min { opacity: 0.6; font-weight: 700; }
.wx-min::before { content: "/"; margin: 0 1px; }
.col-head .wx + .today-badge { margin-left: 6px; }
.col-head .wd-short { display: none; font-weight: 800; }
/* Schmale Spalten: Wochentag kurz, Wetter nur mit Höchstwert */
@container (max-width: 270px) {
  .col-head .wd { display: none; }
  .col-head .wd-short { display: inline; }
}
@container (max-width: 160px) {
  .col-head .wx-min { display: none; }
}
.day-top .wx { margin-left: auto; order: 2; background: var(--surface-2); padding: 1px 6px 1px 2px; font-size: 0.72em; }
.day-top .wx .wx-icon { width: 1.5em; height: 1.5em; }
.family .fh .wx { margin: 0; font-size: 0.78em; }
.wall-weather { display: none; }
body.wall .wall-weather:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.5em;
  font-weight: 300;
  padding: 2px 14px 2px 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.18);
}
body.wall .wall-weather .wx-icon { width: 1.3em; height: 1.3em; }
.day-weather { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); }
.day-weather .wx-icon { width: 2.4em; height: 2.4em; }
.day-weather > span { display: flex; flex-direction: column; }
.weather-current { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); }
.weather-current .wx-icon { width: 2em; height: 2em; }
.weather-current > span { display: flex; flex-direction: column; flex: 1; }
.weather-search { display: flex; gap: 8px; }

/* Feiertage & Schulferien */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.78em;
  font-weight: 800;
  white-space: nowrap;
}
.tag span { overflow: hidden; text-overflow: ellipsis; }
.tag.holiday { background: var(--holiday-bg); color: var(--holiday-text); }
.tag.ferien { background: var(--ferien-bg); color: var(--ferien-text); }
.day-tags { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.day-tags .tag { font-size: 0.82em; padding: 5px 8px; }
.agenda-day .day-tags { flex-direction: row; flex-wrap: wrap; margin-bottom: 8px; }
.day-top { display: flex; align-items: center; gap: 4px; min-width: 0; }
.day-top .tag { flex: 0 1 auto; padding: 2px 6px; font-size: 0.72em; }
.day-cell.ferien { background: color-mix(in srgb, var(--ferien-bg) 55%, var(--surface)); }
.day-cell.holiday .day-num { color: var(--holiday-text); }
.family .fh { flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.fh-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 100%; }
.fh-tags .tag { font-size: 0.72em; padding: 2px 6px; }
.holiday-banner-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 18px;
  border-radius: var(--radius);
  background: var(--holiday-text);
  color: #fff;
  font-size: 1.1em;
}
.holiday-banner-item .icon { width: 1.4em; height: 1.4em; }

/* Geburtstage: Torte + Alter, zählen als privat */
.ev.birthday .age {
  flex: none;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: var(--fw-heavy);
  font-size: 0.85em;
}
.ev.birthday.big .age { order: 1; }
.ev.birthday .title { font-weight: var(--fw-heavy); }

.bday-banner { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.bday-banner-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--rainbow);
  color: var(--rainbow-text);
  font-size: 1.15em;
  /* Weiße Schrift mit schwarzem Rand, damit sie auf jedem Regenbogen-Streifen lesbar ist */
  text-shadow: var(--outline);
  letter-spacing: 0.03em;
}
.bday-banner-item .icon { width: 1.5em; height: 1.5em; filter: var(--outline-icon); }

.bday-list { display: flex; flex-direction: column; gap: 6px; }
.bday-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  text-align: left;
}
.bday-row > .icon { margin-left: auto; color: var(--muted); }
.bday-when {
  flex: none;
  min-width: 70px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: var(--fw-heavy);
  font-size: 0.85em;
}
.bday-when.now { background: var(--rainbow); text-shadow: var(--outline); }
.bday-name { display: flex; flex-direction: column; font-weight: 800; min-width: 0; }
.bday-next { margin: -6px 0 0; font-weight: 800; color: var(--muted); }
.bday-year { align-self: end; min-height: var(--tap); }

.type-switch { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; background: var(--surface-2); border-radius: 999px; padding: 4px; }
.type-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-weight: var(--fw-heavy);
  font-size: 1.05em;
}
.type-switch button.active { background: var(--section); color: var(--on-accent); }

/* Woche */
.week {
  flex: 1;
  display: grid;
  grid-template-columns: var(--week-cols, repeat(7, minmax(0, 1fr)));
  gap: 8px;
  min-height: 0;
}
.week-col {
  container-type: inline-size;
  background: var(--surface);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
/* Heute: Wochentag behält seine Farbe, dazu grüner Rahmen und „Heute“-Plakette */
.week-col.is-today { outline: 4px solid var(--today-bg); }
.col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--head-bg);
  color: var(--head-text);
  cursor: pointer;
}
.today-badge {
  flex: none;
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--today-bg);
  color: var(--today-text);
  box-shadow: 0 0 0 2px #fff;
  font-size: 0.75em;
  font-weight: var(--fw-heavy);
}
.col-head .wd { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-head .num { flex: none; font-weight: var(--fw-heavy); font-size: 1.6em; line-height: 1; letter-spacing: -0.03em; }
.col-events { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.col-meal {
  margin: 0 8px 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--c-essen);
  color: var(--on-accent);
  font-size: 0.85em;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@container (max-width: 150px) {
  .ev.big .time .end { display: none; }
  .ev.big { padding-left: 14px; }
}

/* Familie (Personen × Tage) */
.family {
  flex: 1;
  display: grid;
  grid-template-columns: 130px repeat(7, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: minmax(min-content, 1fr);
  gap: 6px;
  overflow: auto;
}
.family > div { background: var(--surface); border-radius: 12px; padding: 6px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.family .ev { flex-wrap: wrap; row-gap: 2px; }
.family .ev .title { order: 2; flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
.family .fh { background: var(--head-bg); color: var(--head-text); font-weight: var(--fw-heavy); text-align: center; font-size: 0.9em; position: sticky; top: 0; z-index: 1; padding: 8px 4px; }
.family .fh:empty { background: transparent; }
.family .fh.is-today { box-shadow: inset 0 0 0 4px var(--today-bg); }
.family .fh .today-badge { margin-left: 0; }
.family .fp { flex-direction: row !important; align-items: center; gap: 8px; font-weight: var(--fw-heavy); background: var(--p); color: var(--pt, #fff); position: sticky; left: 0; z-index: 1; }
.family .fp .avatar { box-shadow: 0 0 0 2px var(--pt, #fff); }
.family .fc { cursor: pointer; min-height: 72px; }
.family .fc.is-today { box-shadow: inset 0 0 0 4px var(--today-bg); }

/* Liste */
.agenda { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding-bottom: 90px; }
.agenda-day h3 { display: inline-block; margin: 0 0 8px; font-size: 1em; font-weight: var(--fw-heavy); background: var(--head-bg); color: var(--head-text); padding: 6px 14px; border-radius: 999px; }
.agenda-day.is-today h3 { outline: 4px solid var(--today-bg); outline-offset: 2px; }
.agenda-day .list { display: flex; flex-direction: column; gap: 6px; }
.empty { color: var(--muted); padding: 24px; text-align: center; font-weight: 600; }

/* ---------- Aufgaben, Essen ---------- */
.panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
}
.panel h3 { display: flex; align-items: center; gap: 8px; }
.list-view { display: grid; gap: 14px; align-content: start; overflow-y: auto; padding: 14px 0 90px; }
.list-view h2 { margin: 4px 0; }
.add-row { display: flex; gap: 8px; flex-wrap: wrap; }
.add-row.colored { background: var(--section); }
.add-row input[type="text"], .add-row select, .add-row input[type="date"] { flex: 1; min-width: 120px; width: auto; border-color: transparent; }
.add-row input[name="title"] { flex: 3; min-width: 200px; }
input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="time"], input[type="search"], select, textarea {
  min-height: var(--tap);
  padding: 8px 12px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--surface);
  width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--section); outline-offset: 0; border-color: transparent; }
textarea { min-height: 80px; resize: vertical; }

.check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 6px 4px;
  border-bottom: 2px solid var(--surface-2);
}
.check-item:last-child { border-bottom: 0; }
.check-item input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--c-aufgaben); flex: none; }
.check-item .label { flex: 1; min-width: 0; font-weight: 600; }
.check-item.done .label { text-decoration: line-through; color: var(--muted); }
.sub, .check-item .sub { font-size: 0.85em; color: var(--muted); font-weight: 500; }
.check-item .del { border: 0; background: transparent; color: var(--muted); width: 36px; height: 36px; }
.task-groups { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.task-groups .panel { padding: 0 14px 8px; overflow: hidden; }
.group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -14px 6px;
  padding: 12px 14px;
  font-size: 1.1em;
  font-weight: var(--fw-heavy);
  background: var(--p, var(--ink));
  color: var(--pt, #fff);
}
.group-title .avatar { box-shadow: 0 0 0 2px var(--pt, #fff); }
.group-title .sub { color: inherit; opacity: 0.85; font-weight: 700; }

.meals { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.meal-day { display: grid; gap: 8px; padding: 0 0 12px; overflow: hidden; }
.meal-day label { font-weight: var(--fw-heavy); background: var(--head-bg); color: var(--head-text); padding: 10px 14px; }
.meal-day textarea { margin: 0 12px; width: auto; }
.meal-day.is-today { outline: 4px solid var(--today-bg); }
.meal-day label { display: flex; align-items: center; gap: 8px; }

/* ---------- Einkauf (Kacheln wie bei Bring!) ---------- */
.shop { display: flex; flex-direction: column; gap: 18px; overflow-y: auto; padding: 14px 0 90px; max-width: 1100px; width: 100%; margin: 0 auto; }
.shop-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 6px 4px 18px;
  box-shadow: inset 0 0 0 3px var(--c-einkauf);
  position: sticky;
  top: 0;
  z-index: 2;
}
.shop-search .icon { width: 24px; height: 24px; color: var(--c-einkauf); }
.shop-search input { border: 0; background: transparent; font-size: 1.1em; font-weight: 600; }
.shop-search input:focus-visible { outline: 0; }
.shop-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.15em; font-weight: var(--fw-heavy); }
.shop-head .count { background: var(--c-einkauf); color: var(--on-accent); border-radius: 999px; padding: 2px 10px; font-size: 0.85em; }
.shop-head .link-btn { margin-left: auto; }
.shop-empty { margin: 0; padding: 18px; background: var(--surface); border-radius: var(--radius); color: var(--muted); font-weight: 600; grid-column: 1 / -1; }
.shop-hint { margin: 8px 0 0; font-size: 0.8em; color: var(--muted); font-weight: 600; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.tile-grid.small { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.tile {
  aspect-ratio: 1;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  min-width: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.1s, background 0.15s;
}
.tile.on { background: var(--c-einkauf); color: var(--on-accent); }
.tile-icon { font-size: 2.3em; line-height: 1; }
.tile-icon.letters {
  font-size: 1.3em;
  font-weight: var(--fw-heavy);
  width: 1.9em;
  height: 1.9em;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  text-transform: uppercase;
}
.tile.on .tile-icon.letters { background: rgb(255 255 255 / 0.25); color: var(--on-accent); }
.tile-icon.inline { font-size: 1.2em; }
.tile-name { font-weight: 800; font-size: 0.82em; text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tile-spec { font-size: 0.72em; font-weight: 600; opacity: 0.85; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-grid.small .tile-icon { font-size: 1.7em; }
.tile-grid.small .tile-name { font-size: 0.72em; }
#shop-results { background: var(--surface-2); padding: 10px; border-radius: var(--radius); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Hilfe ---------- */
.help-search { position: static; box-shadow: inset 0 0 0 3px var(--section); }
.help-search .icon { color: var(--section); }
.help-topics { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.help-topic { background: var(--surface-2); border-radius: 14px; }
.help-topic summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-weight: var(--fw-heavy);
  cursor: pointer;
  list-style: none;
}
.help-topic summary::-webkit-details-marker { display: none; }
.help-topic summary::after { content: "+"; margin-left: auto; font-size: 1.3em; color: var(--muted); }
.help-topic[open] summary::after { content: "–"; }
.help-topic summary .icon { color: var(--section); width: 1.3em; height: 1.3em; }
.help-body { padding: 0 16px 14px; line-height: 1.5; }
.help-body ul, .help-body ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.help-body dt { font-weight: 800; margin-top: 8px; }
.help-body dd { margin: 2px 0 0; }
.help-body .icon { width: 1em; height: 1em; }
.help-none { margin: 0; color: var(--muted); font-weight: 600; }
.settings-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.welcome h2 { font-size: 1.6em; }
.welcome-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.welcome-steps li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.welcome-steps .step {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--section);
  color: var(--on-accent);
  font-weight: var(--fw-heavy);
  font-size: 1.2em;
}
.welcome-steps .icon { width: 1em; height: 1em; }

/* ---------- Bilder ---------- */
.ev-pic { font-style: normal; }
.task-pic {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 1.4em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.task-pic .icon { vertical-align: 0; }
.task-pic.empty { background: transparent; width: 32px; }
.task-pic.empty .icon { width: 18px; height: 18px; opacity: 0.45; }
.add-row .task-pic { width: var(--tap); height: var(--tap); background: var(--surface); }
.pic-field { display: flex; align-items: center; gap: 12px; }
.pic-field > span { display: flex; flex-direction: column; font-size: 0.9em; }
.pic-current {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 16px;
  background: var(--surface-2);
  font-size: 2em;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.pic-grid { display: grid; gap: 10px; max-height: 50vh; overflow-y: auto; padding: 4px; background: var(--surface-2); border-radius: 14px; }
.pic-group { display: grid; gap: 4px; }
.pic-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.pic-buttons button { width: 48px; height: 48px; border: 0; border-radius: 12px; background: var(--surface); font-size: 1.7em; }
.pic-buttons button:active { transform: scale(0.92); }

/* ---------- Kinderansicht ---------- */
.kid {
  --kid-fs: 18px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  font-size: var(--kid-fs);
  background: color-mix(in srgb, var(--p) 14%, var(--bg));
  user-select: none;
  -webkit-user-select: none;
}
.kid-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 24px;
  background: var(--kid-head, var(--p));
  color: var(--pt);
}
.kid-avatars { display: flex; }
.kid-avatars .kid-avatar + .kid-avatar { margin-left: -10px; }
/* Mehrere Kinder: neutraler Hintergrund, weiße Schrift mit Rand auf dem Farbverlauf */
.kid.multi { background: var(--bg); }
.kid.multi .kid-head { color: #fff; text-shadow: var(--outline); }
.kid.multi .kid-head .avatar { text-shadow: none; }
.kid.multi .kid-exit { color: #fff; }
.kid.multi .kid-exit-ring { --pt: #fff; }
.kid-avatar.small { width: 40px; height: 40px; font-size: 0.75em; }
.kid-whose { display: flex; gap: 2px; }
.kid-whose .avatar { width: 32px; height: 32px; font-size: 0.65em; }
.kid-card:has(.kid-whose) { grid-template-columns: auto auto 1fr auto; }
.kid-tasks h2 { color: var(--text); }
.kid-head h1 { margin: 0; font-size: 1.7em; font-weight: var(--fw-heavy); flex: 1; }
.kid-avatar { width: 56px; height: 56px; font-size: 1em; box-shadow: 0 0 0 3px var(--pt); }
.kid-now { display: flex; align-items: center; gap: 10px; font-size: 1.3em; font-weight: 800; }
.kid-now .kid-clock { width: 46px; height: 46px; }
.kid-now .wx-icon { width: 1.6em; height: 1.6em; }
.kid-exit {
  position: relative;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.25);
  color: inherit;
  display: grid;
  place-items: center;
  opacity: 0.6;
}
.kid-exit .icon { width: 20px; height: 20px; }
.kid-exit-ring { position: absolute; inset: -3px; border-radius: 999px; background: conic-gradient(var(--pt) var(--hold, 0%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.kid-exit.holding { opacity: 1; }
.kid-exit.holding .kid-exit-ring { animation: hold 3s linear forwards; }
@property --hold { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes hold { to { --hold: 100%; } }

.kid-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.kid-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 0;
  border-radius: 20px;
  background: var(--head-bg);
  color: var(--head-text);
  opacity: 0.75;
}
.kid-day.sel { opacity: 1; box-shadow: 0 0 0 4px var(--bg), 0 0 0 8px var(--head-bg); transform: translateY(-2px); }
.kid-wd { font-weight: var(--fw-heavy); font-size: 0.85em; }
.kid-num { font-weight: var(--fw-heavy); font-size: 1.5em; line-height: 1; }
.kid-mini { font-size: 1.1em; min-height: 1.3em; letter-spacing: 1px; white-space: nowrap; overflow: hidden; max-width: 100%; }

.kid-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; min-height: 0; }
.kid-panel { background: var(--surface); border-radius: 28px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; }
.kid-panel h2 { margin: 0; font-size: 1.6em; font-weight: var(--fw-heavy); display: flex; align-items: center; gap: 12px; }
.kid-wx { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75em; padding: 2px 12px 2px 6px; border-radius: 999px; background: var(--surface-2); }
.kid-wx .wx-icon { width: 1.6em; height: 1.6em; }
.kid-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kid-tag { padding: 6px 14px; border-radius: 999px; font-weight: 800; }
.kid-tag.holiday { background: var(--holiday-bg); color: var(--holiday-text); }
.kid-tag.ferien { background: var(--ferien-bg); color: var(--ferien-text); }
.kid-cards { display: flex; flex-direction: column; gap: 10px; }
.kid-card {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 22px;
  background: var(--surface-2);
}
.kid-when { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; font-size: 0.8em; }
.kid-when .kid-clock { width: 52px; height: 52px; }
.kid-allday { font-size: 2.4em; line-height: 1.1; }
.kid-pic { font-size: 3em; line-height: 1; }
.kid-title { font-weight: 800; font-size: 1.05em; }
.kid-empty { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; font-weight: 800; color: var(--muted); text-align: center; }
.kid-empty span { font-size: 3em; }
.kid-countdown { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 22px; background: var(--rainbow); color: var(--rainbow-text); text-shadow: var(--outline); font-size: 1.05em; font-weight: 700; }
.kid-countdown > span { display: flex; flex-direction: column; }
.kid-countdown-pic { font-size: 2.6em; line-height: 1; text-shadow: none; }
.kid-moons { font-size: 1.2em; letter-spacing: 2px; text-shadow: none; }
.kid-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.kid-task {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  aspect-ratio: 1;
  padding: 10px;
  border: 0;
  border-radius: 26px;
  background: var(--p);
  color: var(--pt);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--p) 60%, #000);
  text-align: center;
}
.kid-task:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--p) 60%, #000); }
.kid-task .kid-pic { font-size: 3.4em; }
.kid-task .kid-title { font-size: 0.9em; line-height: 1.2; }
.kid-task.done { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.kid-task.done .kid-pic { opacity: 0.45; }
.kid-check { position: absolute; top: 8px; right: 12px; font-size: 1.6em; font-weight: var(--fw-heavy); color: var(--c-kalender); }

.confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(var(--r)); } }
.cheer {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 40px;
  border-radius: 32px;
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--ink);
  animation: pop 0.5s cubic-bezier(.2, 1.6, .5, 1) both;
}
.cheer span { font-size: 5em; line-height: 1.1; }
.cheer b { font-size: 2em; font-weight: var(--fw-heavy); color: var(--text); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } }

@media (min-width: 761px) and (max-width: 1100px) {
  .kid.multi .kid-main { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kid.multi .kid-today { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .kid { --kid-fs: 16px; }
  .kid-main { grid-template-columns: 1fr !important; }
  .kid-head { gap: 10px; padding: 8px 10px; }
  .kid-head h1 { font-size: 1.15em; line-height: 1.2; }
  .kid-avatar { width: 40px; height: 40px; font-size: 0.75em; }
  .kid.multi .kid-now { display: none; }
  .kid-card { gap: 10px; padding: 10px 12px; }
  .kid-when { min-width: 48px; }
  .kid-when .kid-clock { width: 40px; height: 40px; }
  .kid-card .kid-pic { font-size: 2.3em; }
  .kid-whose .avatar { width: 26px; height: 26px; font-size: 0.55em; }
  .kid-now .kid-clock { display: none; }
  .kid-days { gap: 4px; }
  .kid-day { border-radius: 14px; padding: 6px 2px; }
  .kid-mini { display: none; }
  .kid-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Pinnwand ---------- */
.board-toolbar { display: flex; align-items: center; gap: 10px; }
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.board.small { grid-template-columns: 1fr; gap: 8px; }
.note {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
  padding: 16px 16px 12px;
  border: 0;
  border-radius: 6px 6px 22px 6px;
  background: var(--note-bg, var(--note));
  color: #15173b;
  text-align: left;
  box-shadow: 4px 4px 0 rgb(21 23 59 / 0.85);
  transform: rotate(-0.6deg);
}
.board .note:nth-child(even) { transform: rotate(0.7deg); }
.board .note:nth-child(3n) { transform: rotate(-0.2deg); }
.note:active { transform: scale(0.98); }
.note-text { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 800; font-size: 1.15em; line-height: 1.3; }
.note-meta { display: flex; align-items: center; gap: 6px; font-size: 0.8em; font-weight: 700; opacity: 0.75; }
.note-meta .avatar { width: 22px; height: 22px; font-size: 0.6em; }
.note.small { min-height: 0; padding: 10px 12px 8px; transform: none; box-shadow: 3px 3px 0 rgb(21 23 59 / 0.85); }
.note.small .note-text { font-size: 1em; }
.board-empty { grid-column: 1 / -1; margin: 0; color: var(--muted); font-weight: 600; }
.board-expired summary { font-weight: 800; cursor: pointer; color: var(--muted); margin-bottom: 10px; }
.board-expired .note { opacity: 0.55; }
.note-input { background: var(--note-bg, var(--note)); color: #15173b; font-weight: 800; font-size: 1.1em; border-color: transparent; }
.note-colors { display: flex; gap: 8px; }
.note-colors input { position: absolute; opacity: 0; pointer-events: none; }
.note-colors span { display: block; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; box-shadow: inset 0 0 0 2px rgb(0 0 0 / 0.1); }
.note-colors input:checked + span { box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 3px var(--text); }
.note-colors input:focus-visible + span { outline: 3px solid var(--section); }

/* ---------- Bildschirmschoner ---------- */
.screensaver { position: fixed; inset: 0; z-index: 50; background: #0b0d22; overflow: hidden; cursor: pointer; }
.screensaver.no-photos { background: radial-gradient(circle at 20% 20%, #2f5bff55, transparent 50%), radial-gradient(circle at 80% 70%, #e0457b55, transparent 55%), #15173b; }
.ss-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.ss-photo.show { opacity: 1; }
.ss-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(30px) brightness(0.55); }
.ss-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: kenburns linear forwards; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.ss-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 120px 48px 40px;
  background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
  color: #fff;
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
}
.no-photos .ss-info { top: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: none; padding: 40px; }
.ss-time { font-size: clamp(64px, 12vw, 160px); font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.no-photos .ss-time { font-size: clamp(90px, 22vw, 260px); }
.ss-date { font-size: 1.8em; font-weight: 700; margin: 6px 0 14px; display: flex; align-items: center; gap: 10px; }
.no-photos .ss-date { justify-content: center; }
.ss-date .wx-icon { width: 1.4em; height: 1.4em; }
.ss-line { font-size: 1.3em; font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 10px; }
.ss-line .icon { width: 1.1em; height: 1.1em; }

/* Foto-Verwaltung */
.modal label.btn { display: inline-flex; font-size: 0.9em; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.photo-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgb(21 23 59 / 0.75);
  color: #fff;
  display: grid;
  place-items: center;
}
.photo-thumb button .icon { width: 16px; height: 16px; }

/* ---------- Rezepte ---------- */
.meal-tabs { justify-self: start; }
.meal-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.meal-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 12px; }
.meal-actions .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.85em; }
.chip.recipe-chip { background: var(--c-essen); color: var(--on-accent); }
.recipe-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.recipe-search { position: static; flex: 1; min-width: 220px; box-shadow: inset 0 0 0 3px var(--c-essen); }
.recipe-search .icon { color: var(--c-essen); }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.recipe-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 110px;
  padding: 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  box-shadow: inset 0 6px 0 var(--c-essen);
}
.recipe-icons { font-size: 1.8em; line-height: 1; letter-spacing: 2px; color: var(--c-essen); }
.recipe-icons.small { font-size: 1.3em; min-width: 2.2em; text-align: center; }
.recipe-title { font-weight: var(--fw-heavy); font-size: 1.05em; }
.recipe-empty { display: grid; gap: 10px; justify-items: start; }
.recipe-empty p { margin: 0; }
.recipe-view h3 { margin: 0 0 8px; font-size: 1.05em; }
.recipe-cols { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .recipe-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.ingredient-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ingredient-list li { display: flex; align-items: center; gap: 8px; }
.ing-icon { width: 1.6em; text-align: center; font-size: 1.15em; flex: none; }
.ing-amount { font-weight: 800; }
.recipe-steps { white-space: pre-line; margin: 0; line-height: 1.5; }
.plan-row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; background: var(--surface-2); padding: 10px; border-radius: 14px; }
.plan-row label { flex: 1; min-width: 180px; }
.ingredient-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.ing-pill { background: var(--surface-2); border-radius: 999px; padding: 4px 10px; font-size: 0.85em; }
.picker-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.check-tools { display: flex; gap: 6px; }
.ingredient-check { display: flex; flex-direction: column; max-height: 55vh; overflow-y: auto; }
.modal .ingredient-check .check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
  font-size: 1em;
  flex: none;
}
.ingredient-check .ing-line strong { font-weight: 800; }
.ingredient-check .ing-amount { color: var(--muted); margin-left: 4px; }
.ingredient-check .label { display: flex; flex-direction: column; }
.ingredient-check .check-item:has(input:not(:checked)) :is(.label, .ing-icon) { opacity: 0.5; }
.hint-tag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: 0.9em; }
.chip { border: 0; border-radius: 999px; background: var(--surface-2); padding: 8px 14px; font-weight: 800; }

/* ---------- FAB, Modal, Toast ---------- */
.fab {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: 66px;
  height: 66px;
  border-radius: 22px;
  border: 0;
  background: var(--yellow);
  color: #15173b;
  box-shadow: 5px 5px 0 var(--ink);
  display: grid;
  place-items: center;
  z-index: 5;
}

.modal {
  border: 0;
  border-radius: 24px;
  padding: 0;
  width: min(580px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  background: var(--surface);
  color: var(--text);
  box-shadow: 10px 10px 0 var(--section);
}
.modal::backdrop { background: rgb(15 17 48 / 0.55); }
.modal form, .modal .modal-inner { display: grid; gap: 14px; padding: 22px; }
.modal h2 { margin: 0; font-size: 1.45em; font-weight: var(--fw-heavy); letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }
.modal .row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.modal label { display: grid; gap: 4px; font-weight: 800; font-size: 0.9em; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.modal .actions .spacer { flex: 1; }
.toggle-line { display: flex !important; align-items: center; gap: 10px; grid-template-columns: none !important; }
.toggle-line input { width: 22px; height: 22px; accent-color: var(--section); }

.cat-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-pick label { cursor: pointer; }
.cat-pick input { position: absolute; opacity: 0; pointer-events: none; }
.cat-pick label > span { min-height: 52px; border-radius: 14px; font-weight: var(--fw-heavy); opacity: 0.5; }
.cat-pick input:checked + span { opacity: 1; box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 3px var(--text); }
.cat-pick input:focus-visible + span { outline: 3px solid var(--yellow); }

.person-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.person-pick label { cursor: pointer; }
.person-pick input { position: absolute; opacity: 0; pointer-events: none; }
.person-pick label > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px var(--p);
  font-weight: 800;
}
.person-pick input:checked + span { background: var(--p); color: var(--pt, #fff); }
.person-pick input:checked + span .avatar { box-shadow: 0 0 0 2px var(--pt, #fff); }
.person-pick input:checked + span::after { content: "✓"; font-weight: var(--fw-heavy); }
.person-pick input:focus-visible + span { outline: 3px solid var(--yellow); }

.scope-pick { display: flex; gap: 14px; flex-wrap: wrap; padding: 12px; background: var(--surface-2); border-radius: 12px; font-weight: 700; }
.scope-pick label { display: flex !important; align-items: center; gap: 6px; }

.day-sheet .list { display: flex; flex-direction: column; gap: 6px; }

/* Einstellungen */
.settings-section { display: grid; gap: 10px; }
.settings-section h3 { margin: 8px 0 0; font-size: 1.1em; font-weight: var(--fw-heavy); }
.settings-section p { margin: 0; color: var(--muted); font-size: 0.9em; }
.person-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; background: var(--surface-2); border-radius: 14px; }
.person-row input[type="text"] { flex: 1; min-width: 120px; }
.person-row > select { width: auto; flex: 0 1 220px; }
.relation-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; width: 100%; font-size: 0.9em; font-weight: 700; }
.relation-row small { font-weight: 500; color: var(--muted); }
.group-chips { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); flex-shrink: 0; }
.group-chip { border: 0; border-radius: 999px; padding: 6px 12px; background: transparent; color: var(--text); font: inherit; font-weight: 800; font-size: 0.9em; white-space: nowrap; cursor: pointer; }
.group-chip.on { background: var(--ink, var(--text)); color: var(--surface); }
.color-field { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.color-field input[type="color"] { width: 48px; height: 44px; border: 2px solid var(--line); border-radius: 12px; padding: 2px; background: var(--surface); }
.swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.swatch { width: 32px; height: 32px; border-radius: 10px; border: 0; padding: 0; }
.swatch.selected { box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 3px var(--text); }
.swatch { display: inline-grid; place-items: center; font-size: .72rem; font-weight: 800; }
.swatch .icon, .swatch svg { width: 16px; height: 16px; }
.swatch.used { opacity: .75; }
.swatch.used.selected { opacity: 1; }
.swatch-divider { flex-basis: 100%; font-size: .75rem; font-weight: 700; color: var(--muted, #666); margin-top: 4px; }
.preview { display: grid; gap: 6px; }
.share-url { font-family: ui-monospace, monospace; font-size: 0.8em; word-break: break-all; background: var(--surface-2); padding: 8px; border-radius: 10px; }
.cat-colors { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 4px 4px 0 var(--yellow);
  z-index: 10;
}

/* ---------- Wandkalender-Modus ---------- */
body.wall { --fs: 16px; --tap: 52px; }
body.wall .tabs,
body.wall #settings-btn { display: none; }
body.wall .brand-name { font-size: 1.7em; }
body.wall .wall-clock {
  display: inline;
  font-size: 1.7em;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
body.wall .cal-title { font-size: 1.8em; }
body.wall .wall-side {
  flex-direction: column;
  gap: 12px;
  width: 300px;
  flex: none;
  overflow-y: auto;
}
/* Seitenleiste nur auf großen Bildschirmen, sonst kompakte Knöpfe oben */
@media (min-width: 1500px) {
  body.wall .wall-side { display: flex; }
}
@media (max-width: 1499px) {
  body.wall .wall-quick { display: flex; }
}
.wall-quick { display: none; gap: 8px; }
.quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  font-weight: 800;
  color: var(--on-accent);
}
.quick-btn[data-quick="meal"] { background: var(--c-essen); }
.quick-btn[data-quick="tasks"] { background: var(--c-aufgaben); }
.quick-btn[data-quick="shopping"] { background: var(--c-einkauf); }
.quick-btn .icon { width: 1.3em; height: 1.3em; }
.quick-btn .quick-text { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-btn .count {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: #fff;
  color: #15173b;
  display: inline-grid;
  place-items: center;
  font-size: 0.85em;
  font-weight: var(--fw-heavy);
}
.wall-modal .panel { padding: 0; }
.wall-modal h3 { margin: 0 0 10px; font-size: 1.3em; font-weight: var(--fw-heavy); }
.wall-side .panel h3 { margin: 0 0 8px; font-size: 1.1em; font-weight: var(--fw-heavy); }
.wall-side .today-big { font-size: 1.1em; font-weight: var(--fw-heavy); margin-bottom: 8px; }

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 900px) {
  .tabs button span, .mode-switch button span { display: none; }
  .quick-btn .quick-text { display: none; }
}

@media (max-width: 700px) {
  .app { height: auto; min-height: 100%; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .topbar { padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
  .main { padding: 0 8px 8px; }
  .people-bar { padding: 10px 12px 4px; }
  .brand { flex: 1; }
  .brand-name { font-size: 1.2em; }
  #wall-toggle { display: none; }
  /* Bereiche als Navigationsleiste am unteren Rand, jeder in seiner Farbe */
  .tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    border-radius: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--surface);
    box-shadow: 0 -2px 0 var(--line);
    justify-content: space-around;
  }
  .tabs button {
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-height: 54px;
    border-radius: 14px;
    font-size: 0.75em;
    color: var(--muted);
  }
  .tabs button span { display: inline; }
  .tabs button .icon { width: 24px; height: 24px; }
  .tabs button.active { background: var(--section); color: var(--on-accent); }
  .mode-switch button { padding: 0 11px; }
  .fab { bottom: calc(88px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 18px; }
  .cal-toolbar { gap: 8px; }
  .cal-title { font-size: 1.15em; min-width: 0; }
  .cal-toolbar .seg { order: 3; width: 100%; }
  .cal-toolbar .seg button { flex: 1; padding: 0 6px; }
  .month-heads, .month { gap: 3px; }
  .month { grid-auto-rows: minmax(60px, auto); }
  .day-cell { border-radius: 8px; padding: 3px; }
  .month .ev .title, .month .ev .time, .month .ev .badges, .month .ev .cat-icon, .month .ev .age { display: none; }
  .month .ev { height: 9px; padding: 0; border-radius: 4px; }
  .day-top .tag span { display: none; }
  .day-top .wx .wx-max { display: none; }
  .day-top .wx { padding: 0; background: none; }
  .day-top .tag { padding: 2px 4px; }
  .month .ev::before { width: 4px; box-shadow: none; }
  .week { grid-template-columns: 1fr; overflow-y: auto; }
  .week-col { min-height: auto; }
  .col-events { overflow: visible; }
  .family { grid-template-columns: 96px repeat(7, minmax(110px, 1fr)); }
  .tile-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
  .tile-icon { font-size: 2em; }
  .modal .row { grid-template-columns: 1fr; }
  .note { min-height: 96px; }
  .cat-colors { grid-template-columns: 1fr; }
}

/* Persönliches Bild statt Buchstaben */
.avatar.has-emoji { font-size: 1em; }
.avatar-emoji { font-size: 1.15em; line-height: 1; }
.ev .badges .avatar.has-emoji, .cal-row .badges .avatar.has-emoji { font-size: 0.8em; }
.avatar-btn { border: 0; padding: 0; background: none; border-radius: 999px; cursor: pointer; position: relative; }
.avatar-btn .avatar { width: 40px; height: 40px; font-size: .9rem; }
.avatar-btn::after { content: '✎'; position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 11px; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line); }
.avatar-picker { flex-basis: 100%; display: grid; gap: 6px; padding-top: 4px; }
.avatar-picker[hidden] { display: none; }
.avatar-choices { display: flex; flex-wrap: wrap; gap: 5px; }
.avatar-choice { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font-size: 1.4rem; padding: 0; }
.avatar-choice.letters { font-size: .85rem; font-weight: var(--fw-heavy); }
.avatar-choice.selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--text); }

/* ---------- Design „Sanft“: Beige, Pastell, ruhige Schrift ---------- */
html[data-theme="sanft"] {
  --bg: #f5efe6;
  --surface: #fffcf7;
  --surface-2: #efe6da;
  --text: #4a4039;
  --muted: #8c8076;
  --ink: #7d6e62;
  --ink-text: #fffcf7;
  --line: #e5d9ca;
  --danger: #b4545a;

  --c-kalender: #b7d3bd;
  --c-aufgaben: #d5c9e8;
  --c-einkauf: #f0c6be;
  --c-essen: #f3d4ae;
  --c-pinnwand: #c5cfe0;
  --yellow: #f1dfae;
  --pink: #f0c4d4;
  --on-accent: #4a4039;

  --head-text: #4a4039;
  --today-bg: #8fbf9b;
  --today-text: #2f3a31;

  --holiday-bg: #f6dcd9;
  --holiday-text: #a14f4f;
  --ferien-bg: #e9e2f2;
  --ferien-text: #6b5a8c;

  --rainbow: repeating-linear-gradient(135deg, #f2c6c6 0 40px, #f5d6b5 40px 80px, #f3e6b3 80px 120px,
    #c6dfc9 120px 160px, #c3dbe8 160px 200px, #dacfea 200px 240px);
  --rainbow-text: #4a4039;
  --outline: none;
  --outline-icon: none;

  --fw-heavy: 700;
  color-scheme: light;
}

html[data-theme="sanft"] .wd-0 { --head-bg: #f0c9c6; }
html[data-theme="sanft"] .wd-1 { --head-bg: #f4d7bb; }
html[data-theme="sanft"] .wd-2 { --head-bg: #f1cede; }
html[data-theme="sanft"] .wd-3 { --head-bg: #dcd1ec; }
html[data-theme="sanft"] .wd-4 { --head-bg: #c8dde9; }
html[data-theme="sanft"] .wd-5 { --head-bg: #ccd2ea; }
html[data-theme="sanft"] .wd-6 { --head-bg: #c3ddd8; }

html[data-theme="sanft"] .tabs button.active { background: var(--surface); color: var(--text); }
html[data-theme="sanft"] .topbar .icon-btn { background: rgb(255 255 255 / 0.45); }
html[data-theme="sanft"] .mode-switch button[aria-checked="true"] { color: var(--ink-text); }
html[data-theme="sanft"] .btn.primary { background: var(--ink); color: var(--ink-text); }
html[data-theme="sanft"] .shop-search .icon,
html[data-theme="sanft"] .help-search .icon,
html[data-theme="sanft"] .help-topic summary .icon,
html[data-theme="sanft"] .recipe-search .icon,
html[data-theme="sanft"] .recipe-icons,
html[data-theme="sanft"] .kid-check { color: var(--muted); }
html[data-theme="sanft"] .kid-task { box-shadow: 0 4px 14px rgb(74 64 57 / 0.12); }
html[data-theme="sanft"] .kid-task:active { box-shadow: 0 1px 4px rgb(74 64 57 / 0.12); }

/* Design-Auswahl in den Einstellungen */
.theme-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-pick label { display: block; cursor: pointer; }
.theme-pick input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card { display: grid; gap: 8px; padding: 10px; border-radius: 16px; border: 3px solid var(--line); background: var(--surface); }
.theme-pick input:checked + .theme-card { border-color: var(--text); }
.theme-pick input:focus-visible + .theme-card { outline: 3px solid var(--text); outline-offset: 2px; }
.theme-swatches { display: flex; height: 34px; border-radius: 10px; overflow: hidden; }
.theme-swatches span { flex: 1; }
.theme-card b { font-size: 1em; }
.theme-card small { color: var(--muted); }
html[data-theme="sanft"] .fab { box-shadow: 0 6px 18px rgb(74 64 57 / 0.18); }
html[data-theme="sanft"] .cheer { box-shadow: 0 10px 30px rgb(74 64 57 / 0.18); }
html[data-theme="sanft"] .note, html[data-theme="sanft"] .note-input { --note-bg: color-mix(in srgb, var(--note) 50%, #fffcf7); color: var(--text); }
html[data-theme="sanft"] .note { box-shadow: 0 4px 14px rgb(74 64 57 / 0.14); }

/* ---------- Kinderansicht für Schulkinder: Bilder + kurze Wörter ---------- */
.kid.school .kid-title { font-size: 1.2em; line-height: 1.25; letter-spacing: 0.02em; hyphens: auto; overflow-wrap: break-word; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kid.school .kid-task .kid-title { font-size: 1.1em; }
.kid-digital { font-size: 1.3em; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.kid-when .kid-time { font-size: 1.7em; font-variant-numeric: tabular-nums; line-height: 1; }
.kid-until { font-size: 1.05em; font-weight: 700; color: var(--muted); }
.kid.school .kid-when { min-width: 86px; }
.kid-card { position: relative; }
.kid-card.past { opacity: 0.45; }
.kid-card.now { box-shadow: 0 0 0 4px var(--today-bg); }
.kid-badge { position: absolute; top: -10px; left: 14px; padding: 2px 12px; border-radius: 999px; font-weight: var(--fw-heavy);
  font-size: 0.85em; letter-spacing: 0.04em; text-transform: uppercase; }
.kid-badge.now { background: var(--today-bg); color: var(--today-text); }
.kid-badge.next { background: var(--yellow); color: var(--text); }
.kid-pack { background: var(--surface-2); border-radius: 20px; padding: 10px 14px; display: grid; gap: 8px; }
.kid-pack-title { font-size: 1.1em; }
.kid-pack-items { display: flex; flex-wrap: wrap; gap: 8px; }
.kid-pack-item { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--surface); font-weight: 800; font-size: 1.05em; }
.kid-pack-pic { font-size: 1.5em; line-height: 1; }
/* Kita: große Bildkacheln, Wort klein darunter */
.kid-pack.kita .kid-pack-items { gap: 10px; }
.kid-pack.kita .kid-pack-item { flex-direction: column; gap: 2px; min-width: 84px; padding: 10px 8px 6px; border-radius: 18px; }
.kid-pack.kita .kid-pack-pic { font-size: 2.6em; }
.kid-pack.kita .kid-pack-word { font-size: 0.75em; font-weight: 700; color: var(--muted); }
.kid-progress { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px;
  border-radius: 18px; background: var(--surface-2); font-size: 1.15em; }
.kid-stars { font-size: 1.4em; letter-spacing: 2px; }
.star-empty { color: var(--muted); }
.kid-level-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kid-level-pick label { cursor: pointer; }
.kid-level-pick input { position: absolute; opacity: 0; pointer-events: none; }
.kid-level-pick label > span { display: grid; gap: 4px; padding: 12px; border-radius: 16px; border: 3px solid var(--line); height: 100%; }
.kid-level-pick input:checked + span { border-color: var(--text); }
.kid-level-pick input:focus-visible + span { outline: 3px solid var(--text); outline-offset: 2px; }
.kid-level-pick small { color: var(--muted); }
/* Tablet quer: Kopf und Tage bleiben stehen, nur die Spalten scrollen */
@media (min-width: 800px) and (orientation: landscape) {
  .kid.school { height: 100vh; height: 100dvh; }
  .kid.school .kid-main { grid-template-rows: minmax(0, 1fr); }
}
html[data-theme="sanft"] body.pattern .ev.arbeit, html[data-theme="sanft"] .ev.arbeit.striped {
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--cat-fg) 8%, transparent) 9px 12px);
}
html[data-theme="sanft"] .ev.external { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cat-fg) 15%, transparent); }

/* ---------- Stundenplan ---------- */
.tt-list { display: grid; gap: 14px; padding-bottom: 80px; overflow-y: auto; }
.tt-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.tt-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--p); color: var(--pt); }
.tt-head h3 { margin: 0; flex: 1; font-size: 1.2em; font-weight: var(--fw-heavy); }
.tt-head .avatar { box-shadow: 0 0 0 2px var(--pt); }
.tt-scroll { overflow-x: auto; }
.tt { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; min-width: 560px; }
.tt th { font-weight: var(--fw-heavy); font-size: 0.9em; }
.tt thead th { background: var(--head-bg); color: var(--head-text); border-radius: 10px; padding: 6px 4px; }
.tt thead th:first-child { background: none; width: 92px; }
.tt thead th small { display: block; font-size: 0.75em; font-weight: 700; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt thead th.is-today { box-shadow: 0 0 0 3px var(--today-bg); }
.tt-time { text-align: left; color: var(--muted); font-size: 0.8em !important; white-space: nowrap; }
.tt-time b { color: var(--text); margin-right: 4px; }
.tt-time span { display: block; font-weight: 700; }
.tt td { height: 44px; padding: 0; border-radius: 10px; background: var(--surface-2); vertical-align: middle; }
.tt td.is-today { background: color-mix(in srgb, var(--today-bg) 12%, var(--surface-2)); }
.tt td.free { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface) 8px 14px); }
.tt-subject { display: flex; align-items: center; gap: 6px; height: 100%; min-height: 44px; padding: 4px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--s) 35%, var(--surface)); font-weight: 800; font-size: 0.9em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tt-subject > span { font-size: 1.3em; flex: none; }
.tt-subject.now { box-shadow: 0 0 0 3px var(--today-bg); }
.tt-add { display: flex; flex-wrap: wrap; gap: 8px; }
.row-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-picker .row-buttons .btn { display: inline-flex; align-items: center; gap: 8px; }

/* Editor */
.tt-edit { min-width: 620px; }
.tt-edit td { background: none; height: auto; }
.tt-edit td input { width: 100%; min-height: 40px; padding: 6px 8px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); font-weight: 700; }
.modal:has(.tt-editor) { width: min(920px, calc(100% - 24px)); }
.tt-edit-time { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center; }
.tt-edit-time b { grid-row: span 2; }
.tt-edit-time input { width: 100%; padding: 3px 6px; border-radius: 8px; border: 2px solid var(--line); background: var(--surface); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.tt-edit thead th:first-child { width: 96px; }
.tt-edit-rows { display: flex; gap: 8px; }

/* Kinderansicht (Schulkind): Stunden des Tages als Bildkacheln */
.kid-lessons { display: grid; gap: 8px; padding: 10px 14px; border-radius: 20px; background: var(--surface-2); }
.kid-lessons-title { display: flex; align-items: center; gap: 8px; font-size: 1.1em; }
.kid-lessons-title span { font-weight: 700; color: var(--muted); }
.kid-lessons-title .avatar { width: 28px; height: 28px; font-size: 0.6em; }
.kid-lesson-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px; }
.kid-lesson { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; padding: 8px 6px;
  border-radius: 16px; background: color-mix(in srgb, var(--s) 40%, var(--surface)); }
.kid-lesson-pic { font-size: 2em; line-height: 1; }
.kid-lesson-word { font-weight: 800; font-size: 0.85em; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kid-lesson.past { opacity: 0.45; }
.kid-lesson.now { box-shadow: 0 0 0 4px var(--today-bg); }
.kid-lesson { position: relative; }
.kid-lesson-count { position: absolute; top: -6px; right: -4px; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--ink-text); font-weight: var(--fw-heavy); font-size: 0.75em; }
.tt-ab-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tt-ab-bar[hidden] { display: none; }
.tt-this-week { display: flex !important; align-items: center; gap: 8px; }
.tt-week { margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.7em; vertical-align: middle; }

/* Stufe pro Kind beim Einrichten der Kinderansicht */
.kid-stages { display: grid; gap: 8px; }
.kid-stage-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.kid-stage-row[hidden] { display: none; }
.kid-stage-row > b { flex: 1; }
.kid-countdown-max { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 0.9em; font-weight: 700; }
.kid-countdown-max select { flex: 1; min-height: 38px; }
.seg.small label { cursor: pointer; }
.seg.small input { position: absolute; opacity: 0; pointer-events: none; }
.seg.small span { display: block; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 0.9em; }
.seg.small input:checked + span { background: var(--ink); color: var(--ink-text); }
.seg.small input:focus-visible + span { outline: 3px solid var(--text); }

/* Eigene Einpack-Regeln */
.pack-rules { display: grid; gap: 6px; }
.pack-rule { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: var(--surface-2); }
.pack-rule-pic { font-size: 1.6em; line-height: 1; }
.pack-rule-text { flex: 1; display: grid; }
.pack-rule-text small { color: var(--muted); font-weight: 700; }
.pack-rule .del { border: 0; background: none; color: var(--muted); width: 36px; height: 36px; border-radius: 999px; }
.pack-days { display: flex; flex-wrap: wrap; gap: 6px; }
.day-chip { cursor: pointer; display: block !important; }
.day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.day-chip span { display: grid; place-items: center; width: 48px; height: 40px; border-radius: 12px; background: var(--surface-2); font-weight: var(--fw-heavy); }
.day-chip input:checked + span { background: var(--head-bg); color: var(--head-text); }
.day-chip input:focus-visible + span { outline: 3px solid var(--text); }
.pack-pics { display: flex; flex-wrap: wrap; gap: 5px; }
.pack-pics label { cursor: pointer; display: block !important; }
.pack-pics input { position: absolute; opacity: 0; pointer-events: none; }
.pack-pics span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 2px solid var(--line); font-size: 1.4rem; background: var(--surface); }
.pack-pics input:checked + span { border-color: var(--text); box-shadow: 0 0 0 2px var(--text); }
.pack-pics input:focus-visible + span { outline: 3px solid var(--text); outline-offset: 2px; }
.kid-pack-item .avatar { width: 22px; height: 22px; font-size: 0.55em; }

/* Personen-Leiste: lange drücken = nur diese Person */
.person-chip { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.person-chip.all-chip { background: var(--ink); color: var(--ink-text); --pt: var(--ink-text); }
.person-chip.all-chip .avatar { box-shadow: none; background: var(--surface); color: var(--text); }

/* Kinderansicht im sanften Design: lesbar auf Pastell */
html[data-theme="sanft"] .kid-day { opacity: 1; }
html[data-theme="sanft"] .kid-day:not(.sel) { filter: saturate(0.9); }
html[data-theme="sanft"] .kid.multi .kid-head,
html[data-theme="sanft"] .kid.multi .kid-exit { color: var(--text); }
html[data-theme="sanft"] .kid.multi .kid-exit-ring { --pt: var(--text); }
html[data-theme="sanft"] .kid-exit { background: rgb(255 255 255 / 0.5); }
.kid-design { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.kid-design > b { flex: 1; }

/* ---------- Kita-Schließtage & Bringen/Abholen ---------- */
.tag.closure { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.kid-tag.closure { background: var(--surface-2); color: var(--text); }
.care-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; padding: 4px 8px; border: 0; border-radius: 10px;
  background: var(--surface-2); color: var(--text); font-size: 0.78em; font-weight: 800; text-align: left; }
.care-chip .avatar { width: 20px; height: 20px; font-size: 0.6em; }
.care-chip span { white-space: nowrap; }
.care-chip.changed { box-shadow: inset 0 0 0 2px var(--today-bg); }
.fc .care-chip { margin-bottom: 4px; }
.care-chip.conflict { background: #fff1c2; color: #5c3b00; box-shadow: inset 0 0 0 2px #d99a00; }
.care-away { font-weight: 900; }

/* ---------- Urlaub & Abwesenheiten ---------- */
.tag.away { border: 0; background: var(--p); color: var(--pt); font: inherit; font-size: 0.78em; font-weight: 800; cursor: pointer; }
.away-band { display: block; width: 100%; margin-bottom: 4px; padding: 4px 8px; border: 2px dashed var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font-size: 0.78em; font-weight: 800; text-align: left; cursor: pointer; }
.kid-tag.away { background: var(--surface-2); color: var(--text); }
.ev.away-conflict { box-shadow: inset 0 0 0 2px #d99a00; }
.ev-away-text { font-weight: 800; }
.away-hint { margin: 6px 0 0; padding: 8px 12px; border-radius: 12px; background: #fff1c2; color: #5c3b00; font-weight: 700; font-size: 0.9em; }
.away-kinds { grid-template-columns: repeat(2, 1fr); }
.away-kinds label > span { display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text); }
button.pack-rule { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.care-stack { margin-bottom: 8px; }
.care-table { border-collapse: separate; border-spacing: 6px; width: 100%; min-width: 420px; }
.care-table thead th { font-size: 0.85em; text-align: left; }
.care-table tbody th span { display: grid; place-items: center; width: 44px; height: 38px; border-radius: 10px; background: var(--head-bg); color: var(--head-text); }
.care-table select, .care-table input { width: 100%; min-height: 40px; }
.care-table input { max-width: 90px; }
/* Kinderansicht: Gesichter statt Text */
.kid-care { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 14px; border-radius: 20px; background: var(--surface-2); }
.kid-care-part { display: inline-flex; align-items: center; gap: 8px; }
.kid-care-part small { color: var(--muted); font-weight: 800; font-size: 0.85em; }
.kid-care-pic { font-size: 1.8em; line-height: 1; }
.kid-care-face { width: 44px; height: 44px; font-size: 0.9em; }
.kid-care-kid { width: 32px; height: 32px; font-size: 0.65em; }
.kid-care .kid-clock { width: 40px; height: 40px; }

/* ---------- Essen: Lieblingsessen, Portionen, Kinderansicht ---------- */
.meal-pic { margin-left: auto; font-size: 1.3em; }
.meal-day label { display: flex; align-items: center; gap: 6px; }
.fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 55vh; overflow-y: auto; }
.fav-meal { display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border: 0; border-radius: 16px; background: var(--surface-2); color: var(--text); text-align: center; }
.fav-pic { font-size: 2.2em; line-height: 1.1; }
.fav-name { font-weight: 800; }
.portions { display: inline-flex; align-items: center; gap: 8px; }
.portions .icon-btn.small { width: 36px; height: 36px; font-size: 1.3em; font-weight: 900; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.portions-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.portion-list { display: grid; gap: 6px; }
.portion-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); font-weight: 700; }
.kid-meal { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 20px; background: var(--surface-2); }
.kid-meal-pic { font-size: 3em; line-height: 1; }
.kid-meal small { display: block; color: var(--muted); font-weight: 800; }
.kid-meal b { font-size: 1.15em; }
.fav-add { display: flex; gap: 8px; }
.fav-add input { flex: 1; min-height: 44px; }
.fav-cell { position: relative; display: grid; }
.fav-del { position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 999px; border: 0;
  background: var(--danger); color: #fff; display: grid; place-items: center; }
.fav-del .icon { width: 16px; height: 16px; }
.fav-grid.editing .fav-meal { opacity: 0.8; cursor: default; }
.fav-grid { padding: 8px 8px 2px 0; }

/* Datensicherung */
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.file-btn { display: inline-flex !important; align-items: center; cursor: pointer; }
.backup-list summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.apikey-new { margin-top: 8px; }
.apikey-new summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.apikey-new label { display: block; margin-top: 6px; }
.apikey-result { margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 8px; }
.apikey-result .share-url { background: var(--surface); user-select: all; }
.apikey-result code { word-break: break-all; }
.backup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 12px; background: var(--surface-2); margin-top: 6px; font-size: 0.9em; }

/* Wichtige Nummern */
.contacts { margin-top: 18px; display: grid; gap: 10px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface); }
.contact-pic { font-size: 1.8em; line-height: 1; }
.contact-text { flex: 1 1 150px; min-width: 0; display: grid; hyphens: auto; overflow-wrap: break-word; }
/* Ist der Name lang, rutschen Nummer und Stift gemeinsam in die nächste Zeile statt ihn zu überdecken */
.contact-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.contact-text small { color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-call { white-space: nowrap; }
.contact .icon-btn.small { width: 36px; height: 36px; background: var(--surface-2); }
.contacts > .btn { justify-self: start; }
.doc .contact-text small { white-space: normal; }
.doc.bald { box-shadow: inset 0 0 0 2px #d99a00; }
.doc.abgelaufen { box-shadow: inset 0 0 0 2px var(--danger); }
.doc-badge { padding: 3px 10px; border-radius: 999px; font-size: 0.8em; font-weight: 800; background: #fff1c2; color: #5c3b00; }
.doc.abgelaufen .doc-badge { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: var(--danger); }
.contact.emergency { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 45%, transparent); }

/* Funktionen ein-/ausschalten */
.feature-group { display: grid; gap: 6px; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.feature-toggle { display: flex !important; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); cursor: pointer; font-weight: 700 !important; }
.feature-toggle input { width: 22px; height: 22px; flex: none; accent-color: var(--c-kalender); }
.feature-toggle small { display: block; color: var(--muted); font-weight: 600; }
.feature-toggle:has(input:not(:checked)) { opacity: 0.6; }

/* Mehrere Einkaufslisten */
.shop-lists { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.shop-list-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 0;
  background: var(--surface-2); color: var(--text); font-weight: 800; white-space: nowrap; }
.shop-list-chip.active { background: var(--c-einkauf); color: var(--on-accent); }
.shop-list-chip .count { background: var(--surface); color: var(--text); border-radius: 999px; padding: 0 8px; font-size: 0.8em; }
.shop-list-chip.ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.shop-list-chip .icon { width: 16px; height: 16px; }

/* Aufgaben im Wechsel */
.rot-pick { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rot-pick[hidden] { display: none; }
.rot-person { cursor: pointer; }
.rot-person input { position: absolute; opacity: 0; pointer-events: none; }
.rot-person > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 800; box-shadow: inset 0 0 0 2px var(--p); }
.rot-person input:checked + span { background: var(--p); color: var(--pt); }
.rot-person input:focus-visible + span { outline: 3px solid var(--text); }
.add-row.colored .rot-pick .sub { color: var(--on-accent); opacity: 0.9; }

/* Kinderansicht: Wochentag, Datum mit Monatsbild, Jahreszeiten */
.kid-date-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kid-date-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 18px; border-radius: 999px; font-size: 1.15em; }
.kid-date-chip[class*="wd-"] { background: var(--head-bg); color: var(--head-text); }
.kid-date-chip.month { background: var(--surface); color: var(--text); }
.kid-date-pic { font-size: 1.6em; line-height: 1; }
.kid-seasons { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--surface); margin-left: auto; }
.kid-season { display: inline-flex; align-items: center; gap: 6px; font-size: 1.3em; opacity: 0.35; filter: grayscale(0.6); padding: 2px 6px; border-radius: 999px; }
.kid-season.now { opacity: 1; filter: none; font-size: 1.7em; background: var(--surface-2); padding: 2px 14px 2px 8px; }
.kid-season.now b { font-size: 0.6em; color: var(--text); }
@media (max-width: 700px) { .kid-seasons { margin-left: 0; } }

/* Gezeichnete Bilder (z. B. Laterne) verhalten sich wie ein Emoji */
.pic-svg { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.25em; }

/* Checklisten */
.checklist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.checklist-card { display: grid; justify-items: start; gap: 6px; padding: 14px 16px; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: left; }
.checklist-pic { font-size: 2em; line-height: 1; }
.checklist-name { font-weight: var(--fw-heavy); font-size: 1.1em; }
.checklist-bar { width: 100%; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.checklist-bar span { display: block; height: 100%; background: var(--c-aufgaben); border-radius: 999px; }
.checklist-items { display: grid; gap: 2px; max-height: 55vh; overflow-y: auto; }
.checklist-items .check-item { display: flex !important; align-items: center; gap: 10px; }
.checklist-items .check-item .label { flex: 1; font-weight: 700; }
.checklist-items .check-item.done .label { text-decoration: line-through; color: var(--muted); }
.checklist-done-title { margin-top: 8px; font-weight: 800; }

/* Geschenkideen */
.gifts { margin-top: 18px; display: grid; gap: 10px; }
.gift-locked { display: grid; gap: 8px; }
.gift-locked p { margin: 0; }
.gift-owner { display: grid; gap: 4px; font-weight: 800; max-width: 340px; }
.gift-add { display: flex; flex-wrap: wrap; gap: 8px; }
.gift-add input[name="text"] { flex: 2; min-width: 180px; }
.gift-add input[name="link"] { flex: 1; min-width: 140px; }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.gift-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.check-item.gift .label { flex: 1; font-weight: 700; }
.check-item.gift.done .label { text-decoration: line-through; color: var(--muted); }
.check-item.gift a { text-decoration: none; }

/* Vorsorge (U-Heft) */
.checkup-list { display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; }
.checkup-list details summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.checkup-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.checkup-row.due { box-shadow: inset 0 0 0 3px var(--today-bg); }
.checkup-row.missed { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 50%, transparent); }
.checkup-row.done { opacity: 0.75; }
.checkup-status { font-size: 1.5em; line-height: 1; }
.checkup-text { flex: 1; min-width: 160px; display: grid; }
.checkup-text small { color: var(--muted); font-weight: 600; }
.checkup-banner-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 10px 16px; border: 0; border-radius: 16px;
  background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 3px var(--today-bg); font-size: 1.05em; text-align: left; margin-bottom: 8px; }
.checkup-banner-item span { color: var(--muted); font-weight: 700; }

/* Kleider- & Schuhgrößen */
.sizes { margin-top: 18px; display: grid; gap: 10px; }
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.size-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface); }
.size-card.stale { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--holiday-text) 45%, transparent); }
.size-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.size-text small { color: var(--muted); font-weight: 600; }
.size-text .size-stale { color: var(--text); }
.size-values { display: flex; flex-wrap: wrap; gap: 6px; }
.size-chip { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: .92em; }
.size-card .icon-btn.small { width: 36px; height: 36px; background: var(--surface-2); flex: none; }
.gift-sizes { margin: -2px 0 6px; }

/* Impfungen */
.vax-group { display: grid; gap: 6px; }
.vax-group + .vax-group { margin-top: 8px; }
.vax-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 2px 0; }
.vax-group-head .spacer { flex: 1; }
.vax-row .checkup-text b .sub { font-weight: 700; }
.checkup-row.late { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 40%, transparent); }
.vax-sub { margin: 14px 0 6px; }
.vax-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; align-items: center; }
.vax-add input[type="text"] { grid-column: 1 / -1; }
@media (max-width: 640px) { .vax-add { grid-template-columns: 1fr 1fr; } .vax-add .btn { grid-column: 1 / -1; justify-self: start; } }
.vax-row .icon-btn.small { width: 36px; height: 36px; background: var(--surface); color: var(--muted); flex: none; }

/* Taschengeld */
.pocket { margin-top: 18px; display: grid; gap: 10px; }
.pocket-card { display: grid; gap: 8px; align-content: space-between; padding: 12px; border-radius: var(--radius); background: var(--surface); }
.pocket-top { display: flex; align-items: center; gap: 10px; }
.pocket-text { flex: 1; min-width: 0; display: grid; }
.pocket-text small { color: var(--muted); font-weight: 600; }
.pocket-sum { font-size: 1.35em; font-weight: 900; white-space: nowrap; }
.pocket-sum.big { font-size: 2.2em; }
.pocket-sum.neg, .pocket-row .neg { color: var(--danger); }
.pocket-actions { display: flex; gap: 8px; align-items: center; }
.pocket-actions .icon-btn.small { margin-left: auto; width: 36px; height: 36px; background: var(--surface-2); }
.piggy-goal { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-weight: 700; font-size: .92em; }
.piggy-goal small { color: var(--muted); font-weight: 700; }
.piggy-bar { grid-column: 1 / -1; height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.piggy-bar span { display: block; height: 100%; border-radius: inherit; background: var(--p, var(--c-pinnwand, #f5a623)); min-width: 6px; }
.pocket-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.pocket-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto auto; gap: 8px; margin: 10px 0; align-items: center; }
@media (max-width: 640px) { .pocket-book { grid-template-columns: 1fr 1fr; } .pocket-book input { grid-column: 1 / -1; } }
.pocket-history { display: grid; gap: 4px; max-height: 32vh; overflow-y: auto; }
.pocket-row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto 36px; gap: 8px; align-items: center; padding: 4px 8px; border-radius: 12px; background: var(--surface-2); }
.pocket-row .pos { color: inherit; }
.pocket-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pocket-row .icon-btn.small { width: 32px; height: 32px; background: transparent; color: var(--muted); }
.pocket-settings { margin-top: 12px; }
.pocket-settings summary { cursor: pointer; font-weight: 800; padding: 6px 0; }
.kid-piggy { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin-top: 12px; padding: 12px 14px;
  border-radius: 22px; background: color-mix(in srgb, var(--p) 16%, var(--surface)); }
.kid-piggy-pic { font-size: 2.6em; line-height: 1; }
.kid-piggy-text { display: grid; }
.kid-piggy-text b { font-size: 1.6em; }
.kid-piggy-text small { font-weight: 700; opacity: .8; }
.kid-piggy .piggy-goal { grid-column: 1 / -1; }

/* Packliste am Termin */
.cl-kid { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; font-size: 1.05em;
  cursor: pointer; opacity: .3; filter: grayscale(1); }
.cl-kid.on { opacity: 1; filter: none; background: var(--surface-2); }
.check-item .cl-kid-done { width: 22px; height: 22px; font-size: .55em; margin-left: 6px; vertical-align: middle; }
.cl-hint { margin: 6px 0 0; }
.kid-trip { background: var(--surface-2); border-radius: 20px; padding: 10px 14px; display: grid; gap: 10px; }
.kid-trip-when { font-size: .8em; font-weight: 800; color: var(--muted); margin-left: 6px; }
.kid-trip-kid { display: flex; gap: 10px; align-items: flex-start; }
.kid-trip-name .avatar { width: 40px; height: 40px; }
.kid-trip-items { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.kid-trip-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 88px; max-width: 120px;
  padding: 10px 8px 6px; border: 0; border-radius: 18px; background: var(--surface); font: inherit; cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--text) 12%, transparent); }
.kid-trip-item .kid-pack-pic { font-size: 2.6em; }
.kid-trip-item .kid-pack-word { font-size: .75em; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.15; }
.kid-trip-item.packed { opacity: .55; box-shadow: none; }
.kid-trip-item.packed .kid-pack-pic { filter: grayscale(.6); }
.kid-trip-item .kid-check { position: absolute; top: 4px; right: 6px; font-weight: 900; color: var(--ok, #1a9b5b); font-size: 1.3em; }
.kid-trip-item:active { transform: translateY(2px); }

/* Kinderansicht: zwischen den Kindern umschalten */
.kid-filter { display: flex; gap: 10px; flex-wrap: wrap; }
.kid-filter-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border: 0; border-radius: 999px;
  background: var(--surface); font: inherit; font-size: 1.05em; cursor: pointer; box-shadow: 0 3px 0 color-mix(in srgb, var(--text) 10%, transparent); }
.kid-filter-btn .avatar { width: 40px; height: 40px; }
.kid-filter-faces { display: inline-flex; }
.kid-filter-faces .avatar + .avatar { margin-left: -14px; }
.kid-filter-btn.sel { background: var(--p, var(--ink)); color: var(--pt, var(--ink-text)); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--p, var(--ink)); }
.kid-filter-btn:active { transform: translateY(2px); }
@media (max-width: 640px) {
  .kid-filter { gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 6px; }
  .kid-filter-btn { flex: none; font-size: .95em; gap: 6px; padding: 4px 12px 4px 4px; }
  .kid-filter-btn .avatar { width: 30px; height: 30px; }
  .kid-filter-faces .avatar + .avatar { margin-left: -12px; }
}

/* Sterne & Belohnungen */
.stars { margin-top: 18px; display: grid; gap: 10px; }
.stars > .sub { margin: 0; }
.reward-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.star-ready { font-weight: 800; font-size: .92em; }
.star-goal .piggy-bar span { background: #f5b301; }
.kid-stars-box { background: color-mix(in srgb, #ffd23f 22%, var(--surface)); }
.star-add { grid-template-columns: minmax(0, 1fr) auto auto auto; }
@media (max-width: 640px) { .star-add { grid-template-columns: 1fr 1fr 1fr; } .star-add input { grid-column: 1 / -1; } }
.checkup-row .btn:disabled { opacity: .4; cursor: default; }

/* Packliste pro Person */
.cl-row { display: grid; }
.cl-faces { display: inline-flex; gap: 4px; flex: none; }
.cl-face { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; position: relative; opacity: .4; filter: grayscale(.6); }
.cl-face .avatar { width: 30px; height: 30px; font-size: .7em; }
.cl-face.packed { opacity: 1; filter: none; }
.cl-face.packed::after { content: "✓"; position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ok, #1a9b5b); color: #fff; font-size: 11px; font-weight: 900; display: grid; place-items: center; }
.cl-who { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; opacity: .55; }
.cl-who.on, .cl-who[aria-expanded="true"] { opacity: 1; background: var(--surface-2); color: var(--text); }
.cl-assign, .cl-new-who, .cl-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 2px; }
.cl-assign { padding: 4px 8px 10px 40px; }
.cl-assign .chip .avatar, .cl-new-who .chip .avatar, .cl-filter .chip .avatar { width: 22px; height: 22px; font-size: .55em; }
.cl-filter .chip .sub { font-weight: 800; }
.chip.on { background: var(--ink); color: var(--ink-text); }
.chip.on .sub { color: inherit; opacity: .8; }
.cl-kid { width: auto; min-width: 34px; padding: 0 5px; white-space: nowrap; font-size: .8em; border-radius: 999px; }

/* Babysitter-Infos */
#bs-form textarea { min-height: 2.6em; }
.bs-share { display: flex; gap: 8px; flex-wrap: wrap; }
.bs-share input { flex: 1 1 220px; font-size: .85em; }
.bs-preview { background: #f6f3fb; border-radius: 16px; padding: 12px; }

/* Feiern: Kindergeburtstag planen */
.party-card .checklist-pic .avatar { width: 44px; height: 44px; }
.party-hint { text-align: left; }
.party-scroll { max-height: 64vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.party-scroll > * { flex: none; }
.party-scroll .checklist-items { max-height: none; }
.party-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.party-notes { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.party-guests { display: grid; gap: 6px; }
.party-guest { display: grid; grid-template-columns: auto minmax(70px, auto) minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 6px 8px; border-radius: 12px; background: var(--surface-2); }
.party-guest.abgesagt b { text-decoration: line-through; opacity: .6; }
.party-status { border: 0; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .85em; font-weight: 800; cursor: pointer; background: var(--surface); white-space: nowrap; }
.party-guest.zugesagt .party-status { background: color-mix(in srgb, var(--ok, #1a9b5b) 18%, var(--surface)); }
.party-guest input { min-width: 0; font-size: .9em; padding: 6px 8px; }
.party-ablauf { display: grid; gap: 4px; }
.party-step { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; background: var(--surface-2); }
.party-step-add { grid-template-columns: 7em minmax(0, 1fr) auto; }
@media (max-width: 640px) {
  .party-guest { grid-template-columns: auto minmax(0, 1fr) auto; }
  .party-guest input { grid-column: 1 / -1; grid-row: 2; }
}
.fav-add.party-step-add { display: grid; }
.party-scroll .checklist-items { overflow: visible; }
.party-step .del, .party-guest .del { border: 0; background: transparent; color: var(--muted); width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0; }
.party-step .del .icon, .party-guest .del .icon { width: 18px; height: 18px; }

/* Persönliche Termine */
.ev-lock { font-size: .85em; }
.tag.clock { background: #e8e1ff; color: #3b2a8c; }
.kid-tag.clock { background: #e8e1ff; color: #3b2a8c; }
.holiday-banner-item.clock-banner { background: #e8e1ff; color: #3b2a8c; }
.clock-banner span { margin-left: 4px; }
.att-section { display: grid; gap: 6px; }
.att-list { display: grid; gap: 6px; }
.att-list:empty { display: none; }
.att-item { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 12px; padding: 6px 8px; }
.att-item a, .att-item > span { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; font-weight: 700; }
.att-item a span, .att-item > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.att-icon { width: 48px; height: 48px; display: grid; place-items: center; font-size: 1.8em; flex: none; }
.att-item.pending { opacity: .75; }
.att-item .del { border: 0; background: transparent; color: var(--muted); width: 36px; height: 36px; border-radius: 999px; cursor: pointer; flex: none; }
.att-section .file-btn { justify-self: start; }
.ev-clip { font-size: .85em; }
.push-week { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.push-week select { width: auto; }
.tpl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tpl-chip { display: inline-flex; align-items: center; gap: 2px; }
.tpl-chip .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; }
.tpl-chip .chip svg, .tpl-chip .chip img { width: 1.4em; height: 1.4em; }
.tpl-del { border: 0; background: var(--surface-2); border-radius: 999px; width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer; }
.task-lock { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; padding: 0 6px; }
.personal-line { background: var(--surface-2); border-radius: 12px; padding: 8px 10px; }

/* ---------- Ferienbetreuung ---------- */
.tag.hcare { border: 0; background: color-mix(in srgb, #f2b705 22%, var(--surface)); color: var(--text); font: inherit; font-size: 0.78em; font-weight: 800; cursor: pointer; }
.kid-tag.hcare { background: color-mix(in srgb, #f2b705 22%, var(--surface)); color: var(--text); }
.hcare-period { min-width: 0; padding: 12px; border-radius: 16px; background: var(--surface-2); }
.hcare-period h3 { margin: 0; }
.hcare-period h3 small { font-weight: 600; color: var(--muted); }
.hcare-status { margin: 4px 0 8px; font-weight: 800; }
.hcare-scroll { overflow-x: auto; margin-bottom: 8px; }
.hcare-grid { border-collapse: separate; border-spacing: 4px; }
.hcare-grid thead th { font-size: 0.72em; font-weight: 700; color: var(--muted); text-align: center; white-space: nowrap; }
.hcare-grid thead th span { display: block; font-weight: 900; color: var(--text); }
.hcare-grid tbody th { position: sticky; left: 0; background: var(--surface-2); }
.hcare-grid tbody th .avatar { width: 28px; height: 28px; }
.hcare-cell { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--surface);
  font: inherit; font-size: 1.1em; cursor: pointer; }
span.hcare-cell { cursor: default; opacity: 0.7; }
.hcare-cell.open { background: #fff1c2; color: #5c3b00; font-weight: 900; box-shadow: inset 0 0 0 2px #d99a00; }
.hcare-period .pack-rules { margin-bottom: 8px; }

/* ---------- Einwilligung Gesundheitsdaten ---------- */
.consent-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.consent-list li { padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.consent-field { display: grid; gap: 6px; font-weight: 800; font-size: 0.9em; }
.consent-field .btn { justify-self: start; }

/* ---------- Schulzettel ---------- */
#note-form [hidden] { display: none !important; }
/* ---------- Import ---------- */
#import-body { display: grid; gap: 12px; }
#import-body textarea { width: 100%; }
.import-list { display: grid; gap: 4px; max-height: 40vh; overflow-y: auto; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.import-row { display: flex !important; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--surface); font-weight: 600 !important; }
.import-row span { display: grid; }
.import-row small { font-weight: 500; color: var(--muted); }
.import-row.exists { opacity: 0.6; }
#import { grid-template-columns: minmax(0, 1fr); }
#import-body { grid-template-columns: minmax(0, 1fr); }
#import .seg { display: flex; flex-wrap: wrap; }
#import .seg button { flex: 1 1 auto; }
#import-body .file-btn { justify-self: start; }
#import .seg button { font-size: 0.85em; padding-inline: 8px; }
/* ---------- Drucken ---------- */
#print-sheet { display: none; }
.print-btn { flex: none; }
@media print {
  @page { size: A4; margin: 10mm; }
  body.printing > *:not(#print-sheet) { display: none !important; }
  body.printing { background: #fff !important; }
  body.printing #print-sheet { display: block; }
  /* Ohne Druckknopf (Strg+P): wenigstens Bedienelemente weglassen */
  .tabs, .people-bar, .cal-toolbar, .fab, .toast, #offline { display: none !important; }
}
.psheet { color: #000; background: #fff; font: 10pt/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.psheet header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid #000; margin-bottom: 6px; }
.psheet h1 { font-size: 15pt; margin: 0 0 4px; }
.psheet header span { font-size: 8pt; color: #555; }
.psheet ul { list-style: none; margin: 0; padding: 0; }
.psheet small { color: #444; }
.pweek, .pmonth { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pweek th, .pweek td, .pmonth th, .pmonth td { border: 1px solid #999; padding: 4px; vertical-align: top; text-align: left; }
.pweek thead th { background: #eee; font-size: 9pt; }
.pweek thead th span { font-weight: 400; }
.pweek.tage tbody td { height: 120mm; }
.pweek.personen tbody td { height: 24mm; }
.pweek .prow { width: 22mm; border-left: 4px solid var(--p, #999); background: #f6f6f6; }
.pweek li, .pmonth li { margin: 0 0 3px; padding-left: 4px; border-left: 3px solid var(--p, transparent); break-inside: avoid; }
.pweek li.pcare { border-left-color: #999; font-size: 8pt; color: #333; }
.pweek li.ptask { border-left: 0; padding-left: 0; }
.pmeals td { font-size: 9pt; background: #fafafa; height: auto !important; }
.pmeals th[hidden] { display: none; }
.ptags { font-size: 7.5pt; font-weight: 400; }
.ptag { display: inline-block; margin: 1px 4px 0 0; }
.pmonth td { height: 26mm; font-size: 8pt; }
.pmonth td.other { color: #999; background: #fafafa; }
.pnum { font-weight: 800; font-size: 10pt; }
.pshop { break-inside: avoid-page; margin-bottom: 8mm; }
.pshop h2 { font-size: 13pt; margin: 6px 0; }
.pshop > .pgroup { break-inside: avoid; }
.pshop { columns: 2; column-gap: 10mm; }
.pshop h2 { column-span: all; }
.pgroup h3 { font-size: 10pt; margin: 6px 0 2px; border-bottom: 1px solid #ccc; }
.pgroup li { font-size: 11pt; padding: 2px 0; }
@media print { .psheet.landscape { page: quer; } @page quer { size: A4 landscape; } }

/* ---------- UV-Index (Farben nach WHO-Skala) ---------- */
.uv { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; font-size: 0.72em; font-weight: 900; line-height: 1.5; white-space: nowrap; }
.uv-maessig { background: #ffe14d; color: #3d3200; }
.uv-hoch { background: #ff9a1f; color: #3b1d00; }
.uv-sehrhoch { background: #e2231a; color: #fff; }
.uv-extrem { background: #7b4fd6; color: #fff; }
.kid-tag.uv { background: #fff3c4; color: #3d3200; white-space: normal; }

/* ---------- Datum und Uhrzeit immer deutsch (siehe js/datumsfelder.js) ---------- */
.de-field { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.de-field > input.de-date, .de-field > input.de-time { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.de-time-field { max-width: 9em; }
.de-native { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; min-width: 0 !important;
  padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.de-pick { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: var(--surface-2); font-size: 1.15em; cursor: pointer; }
.add-row .de-field { flex: 1 1 170px; min-width: 170px; }
.add-row .de-field > input { border-color: transparent; padding-inline: 12px; }