/* ═══════════════════════════════════════════════════════════════
   Zuruf — Design System v1.0
   Ersetzt style-modern.css. Lädt nach style.css (Dark-Basis).
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. FONT (self-hosted, DSGVO-konform — kein Google-CDN) ──────── */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2")}

/* ── 1. DESIGN TOKENS ──────────────────────────────────────────── */

:root {
  /* ── Brand / Primary → Lavendel (Richtung B) ── */
  --z-primary:       #7b6ef6;
  --z-primary-dark:  #6354e0;
  --z-primary-soft:  #eeebfe;
  --z-primary-on:    #ffffff;
  --z-primary-grad:  linear-gradient(120deg,#7b6ef6,#c59bf0);

  /* ── Personen: Basis (=FAMILIE) + Soft-Tint (Pastell-Flächen) + Vivid (Kinder-Energie) ── */
  --z-mama:  #e91e63;  --z-mama-soft: #fce4ee;  --z-mama-vivid: #ff2d78;
  --z-papa:  #2196f3;  --z-papa-soft: #e1eefd;  --z-papa-vivid: #1e90ff;
  --z-anna:  #9c27b0;  --z-anna-soft: #efe2fa;  --z-anna-vivid: #9b30ff;
  --z-ben:   #ff9800;  --z-ben-soft:  #fdebd9;  --z-ben-vivid:  #ff8a00;

  /* ── Surfaces Light → kühles Off-White (Lavendel-Stich) ── */
  --z-paper:     #f1f0fa;
  --z-surface-1: #ffffff;
  --z-surface-2: #f6f5fc;
  --z-surface-3: #ecebf6;

  /* ── Ink Light ── */
  --z-ink-1:  #26243a;
  --z-ink-2:  #5c5a72;
  --z-ink-3:  #8b89a6;

  /* ── Lines Light ── */
  --z-line-1: #ecebf6;
  --z-line-2: #dedcec;

  /* ── Semantic (B-stimmig) ── */
  --z-success:     #34c08a;
  --z-success-bg:  #ddf5ec;
  --z-warning:     #e8a33d;
  --z-warning-bg:  #fcefd6;
  --z-error:       #e5667d;
  --z-error-bg:    #fce4e9;

  /* ── Spacing ── */
  --z-s1: 4px;   --z-s2: 8px;   --z-s3: 12px;
  --z-s4: 16px;  --z-s5: 20px;  --z-s6: 24px;
  --z-s8: 32px;

  /* ── Radius ── */
  --z-r-xs:   8px;
  --z-r-sm:   12px;
  --z-r-md:   18px;
  --z-r-lg:   24px;
  --z-r-xl:   28px;
  --z-r-full: 999px;

  /* ── Schatten → weich, violett getönt (Richtung B) ── */
  --z-sh-sm: 0 4px 16px rgba(90,80,170,.07);
  --z-sh-md: 0 8px 24px rgba(90,80,170,.09), 0 2px 8px rgba(90,80,170,.05);
  --z-sh-lg: 0 12px 34px rgba(90,80,170,.11), 0 4px 12px rgba(90,80,170,.06);
  --z-sh-xl: 0 20px 48px rgba(90,80,170,.14);

  /* ── Clay-Schatten NUR für Energie-Layer (Gamification/Kinder) ── */
  --z-clay:    0 5px 0 rgba(44,36,53,.12);
  --z-clay-sm: 0 3px 0 rgba(44,36,53,.10);

  /* ── Font (self-hosted in Phase 1.2) ── */
  --z-font: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ── Transitions ── */
  --z-ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --z-t-fast: 140ms;
  --z-t-mid:  220ms;
  --z-t-slow: 380ms;

  /* ── Backward-compatible vars (app.js inline-styles nutzen diese) ── */
  --bg:     var(--z-paper);
  --bg2:    rgba(244,243,251,.92);
  --bg3:    var(--z-surface-2);
  --card:   var(--z-surface-1);
  --border: var(--z-line-1);
  --text:   var(--z-ink-1);
  --muted:  var(--z-ink-2);
  --hint:   var(--z-ink-3);
  --r:      var(--z-r-sm);

  /* ── app-* vars (in app.js inline-styles mit Fallback genutzt) ── */
  --app-primary:      var(--z-primary);
  --app-primary-soft: var(--z-primary-soft);
  --app-paper:        var(--z-paper);
  --app-paper-2:      var(--z-surface-3);
  --app-surface:      var(--z-surface-1);
  --app-surface-soft: var(--z-surface-2);
  --app-ink:          var(--z-ink-1);
  --app-muted:        var(--z-ink-2);
  --app-line:         var(--z-line-1);
  --app-danger:       var(--z-error);
  --app-ok:           var(--z-success);

  /* ── Person-vars (dynamisch von applyModernThemeVars gesetzt) ── */
  --person-current: var(--z-primary);
  --kid-1:          var(--z-anna);
  --kid-2:          var(--z-ben);
}

/* ── 2. DARK MODE ──────────────────────────────────────────────── */

[data-theme="dark"] {
  --z-paper:     #15141c;
  --z-surface-1: #1e1c28;
  --z-surface-2: #262433;
  --z-surface-3: #2f2c3d;
  --z-ink-1:     #ecebf5;
  --z-ink-2:     #a9a6be;
  --z-ink-3:     #76738c;
  --z-line-1:    #2c2a38;
  --z-line-2:    #3a3750;

  --bg2: rgba(30,28,40,.96);
  --z-primary-soft: rgba(123,110,246,.20);
}

/* ── 3. BASE ───────────────────────────────────────────────────── */

body {
  font-family: var(--z-font);
  background: var(--body-bg,
    radial-gradient(ellipse at 8%  0%,   rgba(183,170,255,.30) 0%, transparent 40%),
    radial-gradient(ellipse at 92% 5%,   rgba(240,160,200,.22) 0%, transparent 38%),
    radial-gradient(ellipse at 20% 72%,  rgba(160,196,255,.18) 0%, transparent 42%),
    radial-gradient(ellipse at 80% 90%,  rgba(200,160,255,.16) 0%, transparent 38%),
    linear-gradient(160deg, #f2f1fa 0%, #eceaf7 100%));
  color: var(--z-ink-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background: var(--body-bg-dark,
    radial-gradient(ellipse at 8%  0%,   rgba(100,80,220,.28) 0%, transparent 42%),
    radial-gradient(ellipse at 92% 5%,   rgba(180,60,140,.20) 0%, transparent 40%),
    radial-gradient(ellipse at 20% 75%,  rgba(60,80,200,.18)  0%, transparent 44%),
    radial-gradient(ellipse at 80% 90%,  rgba(120,60,200,.18) 0%, transparent 40%),
    linear-gradient(160deg, #13121e 0%, #0e0d1a 100%));
  background-attachment: fixed;
}

#app {
  max-width: 520px;
  background: transparent;
}

@media (max-width: 520px) {
  #app { max-width: none; }
  .hdr { padding-top: 16px; }
  .body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}

button, input, textarea, select { font-family: inherit; }

input, textarea, select {
  background:              rgba(255,255,255,.55);
  backdrop-filter:         blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color:            rgba(255,255,255,.72);
  color:                   var(--z-ink-1);
  border-radius:           var(--z-r-sm);
  box-shadow:              inset 0 1px 0 rgba(255,255,255,.90), 0 1px 6px rgba(90,80,170,.06);
}
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select {
  background:   rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  box-shadow:   inset 0 1px 0 rgba(255,255,255,.06);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--z-primary);
  box-shadow:   0 0 0 3px rgba(123,110,246,.13);
  outline:      none;
}

/* Inline-style farbige Buttons → immer weißer Text */
[style*="#176b64"], [style*="background:#283593"],
[style*="background:#1b5e20"], [style*="background: #283593"],
[style*="background: #1b5e20"] {
  color: #fff !important;
}

/* ── 4. HEADER ─────────────────────────────────────────────────── */

.hdr {
  background:              rgba(255,255,255,.50);
  backdrop-filter:         blur(40px) saturate(1.9) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(1.9) brightness(1.05);
  border-bottom:           1px solid rgba(255,255,255,.70);
  padding:                 10px 16px 6px;
  box-shadow:              0 1px 0 rgba(255,255,255,.9), 0 4px 20px rgba(90,80,170,.08);
}

[data-theme="dark"] .hdr {
  background:              rgba(255,255,255,.06);
  border-bottom-color:     rgba(255,255,255,.10);
  box-shadow:              0 1px 0 rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.25);
}

.hdr-top        { padding-bottom: 6px; }

.hdr-weekday {
  color:          var(--z-ink-1);
  font-size:      19px;
  font-weight:    800;
  letter-spacing: -0.025em;
  line-height:    1.15;
}

.hdr-date {
  color:          var(--z-ink-2);
  font-size:      14px;
  font-weight:    600;
  letter-spacing: 0.01em;
}

.hdr-name {
  color:          var(--z-ink-1);
  font-size:      19px;
  font-weight:    800;
  letter-spacing: -0.025em;
}

.hdr-sub {
  color:          var(--z-ink-2);
  font-size:      14px;
  font-weight:    600;
}

.hdr-avatar {
  width:          44px;
  height:         44px;
  border-radius:  50%;
  border:         2.5px solid var(--z-line-1);
  background:     var(--z-surface-2);
}

.logout-btn {
  background:     var(--z-surface-2);
  color:          var(--z-ink-2);
  border:         1px solid var(--z-line-1);
  border-radius:  var(--z-r-full);
  padding:        8px 16px;
  font-size:      15px;
  min-height:     38px;
}

/* ── 5. HEADER-TABS ────────────────────────────────────────────── */

.tabs {
  display:    flex;
  gap:        6px;
  overflow-x: auto;
  padding:    2px 0 6px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex:          0 0 auto;
  background:    transparent;
  border:        1.5px solid transparent;
  border-radius: var(--z-r-full);
  color:         var(--z-ink-2);
  padding:       8px 16px;
  font-size:     15px;
  font-weight:   700;
  min-height:    40px;
  transition:    all var(--z-t-fast);
}

.tab.on {
  background:  var(--z-primary);
  border-color: var(--z-primary);
  color:       #fff;
  box-shadow:  0 4px 14px rgba(123,110,246,.22);
}

.tab .badge {
  background: var(--z-error);
  box-shadow: 0 0 0 2px var(--z-surface-1);
}

/* ── 6. BOTTOM NAV ─────────────────────────────────────────────── */

/* Floating Pill-Nav (Phase 2.1) — schwebt ueber dem Home-Indicator. */
.bottom-nav {
  width:           calc(100% - 24px);
  max-width:       456px;
  bottom:          calc(env(safe-area-inset-bottom) + 12px);
  height:          66px;
  padding:         7px 8px;
  border:          1px solid var(--z-line-1);
  border-radius:           var(--z-r-xl);
  background:              rgba(255,255,255,.48);
  backdrop-filter:         blur(44px) saturate(2.0) brightness(1.05);
  -webkit-backdrop-filter: blur(44px) saturate(2.0) brightness(1.05);
  border:                  1px solid rgba(255,255,255,.84);
  border-bottom-color:     rgba(255,255,255,.52);
  box-shadow:              0 8px 36px rgba(90,80,170,.15), inset 0 1.5px 0 rgba(255,255,255,.98);
}

[data-theme="dark"] .bottom-nav {
  background:    rgba(255,255,255,.08);
  border-color:  rgba(255,255,255,.14);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow:    0 8px 36px rgba(0,0,0,.45), inset 0 1.5px 0 rgba(255,255,255,.09);
}

.bottom-nav-btn {
  color:         var(--z-ink-3);
  border-radius: var(--z-r-md);
  font-size:     13px;
  font-weight:   700;
  gap:           3px;
  min-height:    48px;
  transition:    all var(--z-t-fast);
  letter-spacing: 0.01em;
}

.bottom-nav-btn.on {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--person-current,var(--z-primary)) 70%, #fff) 0%,
    var(--person-current, var(--z-primary)) 100%);
  color:      #fff;
  border:     1px solid rgba(255,255,255,.40);
  box-shadow: 0 4px 16px color-mix(in srgb,var(--person-current,var(--z-primary)) 45%,transparent),
              inset 0 1.5px 0 rgba(255,255,255,.55);
}

.nav-dot {
  background: var(--z-error);
  box-shadow: 0 0 0 2px var(--z-surface-1);
}

.bottom-more-backdrop { background: rgba(26,25,23,.24); }

.bottom-more-menu {
  max-width:       496px;
  bottom:          96px;
  background:      rgba(244,243,251,.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-color:    var(--z-line-1);
  border-radius:   var(--z-r-lg);
  box-shadow:      var(--z-sh-xl);
}

[data-theme="dark"] .bottom-more-menu {
  background: rgba(30,28,40,.97);
}

.bottom-more-item {
  background:    var(--z-surface-2);
  color:         var(--z-ink-1);
  border-color:  var(--z-line-1);
  border-radius: var(--z-r-md);
  padding:       14px 16px;
  min-height:    52px;
  font-size:     16px;
  font-weight:   600;
}

.bottom-more-item.on {
  background:   var(--z-primary-soft);
  border-color: var(--z-primary);
  color:        var(--z-primary);
}

/* ── 7. BODY / PAGE ────────────────────────────────────────────── */

.body {
  padding: 16px 16px calc(100px + env(safe-area-inset-bottom));
  gap:     14px;
}

/* ── 8. CARDS ──────────────────────────────────────────────────── */

.card {
  background:              rgba(255,255,255,.42);
  backdrop-filter:         blur(40px) saturate(1.8) brightness(1.04);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.04);
  border:                  1px solid rgba(255,255,255,.82);
  border-bottom-color:     rgba(255,255,255,.50);
  border-right-color:      rgba(255,255,255,.50);
  border-radius:           var(--z-r-xl);
  padding:                 16px;
  box-shadow:              0 4px 24px rgba(90,80,170,.12), inset 0 1.5px 0 rgba(255,255,255,.95);
}

[data-theme="dark"] .card {
  background:              rgba(255,255,255,.07);
  border-color:            rgba(255,255,255,.14);
  border-bottom-color:     rgba(255,255,255,.06);
  border-right-color:      rgba(255,255,255,.06);
  box-shadow:              0 4px 24px rgba(0,0,0,.35), inset 0 1.5px 0 rgba(255,255,255,.08);
}

.card-title {
  color:          var(--z-ink-2);
  font-size:      13px;
  font-weight:    800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom:  10px;
}

/* ── 9. BUTTONS ────────────────────────────────────────────────── */

.speak-btn, .add-btn, .save-btn, .dump-analyse, .dump-save {
  background:    linear-gradient(145deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 100%),
                 var(--person-current, var(--z-primary));
  color:         #fff;
  border:        1px solid rgba(255,255,255,.38);
  border-radius: var(--z-r-md);
  box-shadow:    0 4px 14px color-mix(in srgb,var(--person-current,var(--z-primary)) 40%,transparent),
                 inset 0 1.5px 0 rgba(255,255,255,.50);
  min-height:    48px;
  font-size:     16px;
  font-weight:   700;
  letter-spacing: -0.01em;
  transition:    opacity var(--z-t-fast), transform var(--z-t-fast);
}

.speak-btn:active, .add-btn:active, .save-btn:active {
  opacity:   0.85;
  transform: scale(0.97);
}

.sec-btn, .setup-back {
  background:    var(--z-surface-2);
  color:         var(--z-primary);
  border:        1px solid var(--z-line-1);
  border-radius: var(--z-r-md);
  min-height:    44px;
  font-weight:   600;
}

.setup-next {
  background:    var(--z-primary);
  color:         #fff;
  border-radius: var(--z-r-md);
  min-height:    52px;
  font-size:     17px;
  font-weight:   700;
  box-shadow:    0 4px 14px rgba(123,110,246,.20);
}

/* ── 10. LOGIN ─────────────────────────────────────────────────── */

.login, .setup {
  background:
    radial-gradient(ellipse at 12% 5%, rgba(123,110,246,.11) 0%, transparent 40%),
    var(--z-paper);
}

.login h1 {
  color:          var(--z-ink-1);
  font-size:      34px;
  font-weight:    800;
  letter-spacing: -0.04em;
  line-height:    1.08;
}

.login p, .setup-sub, .multi-note { color: var(--z-ink-2); }

.avatar-btn {
  background:    var(--z-surface-1);
  border:        2.5px solid var(--z-line-1);
  border-radius: var(--z-r-xl);
  box-shadow:    var(--z-sh-md);
  min-height:    120px;
  transition:    border-color var(--z-t-fast), transform var(--z-t-fast), box-shadow var(--z-t-fast);
}

.avatar-btn:hover, .avatar-btn:active {
  border-color: var(--person-current, var(--z-primary));
  transform:    translateY(-2px);
  box-shadow:   var(--z-sh-lg);
}

.avatar-emoji { filter: saturate(1.08) drop-shadow(0 2px 4px rgba(0,0,0,.08)); }
.avatar-role  { color: var(--z-ink-2); }

/* ── 11. EVENTS / LISTEN-ELEMENTE ──────────────────────────────── */

.event-item, .task-item, .shop-item, .meal-item {
  background:    var(--z-surface-2);
  border-radius: var(--z-r-md);
  border-color:  var(--z-line-1);
  overflow:      hidden;
  position:      relative;
}

.event-item {
  border-left-width: 4px;
  border-left-style: solid;
}

.event-title  { font-size: 17px; font-weight: 600; }
.event-time, .event-sub, .meal-who { color: var(--z-ink-2); }
.task-text     { font-size: 18px !important; font-weight: 500; }
.task-text.done { text-decoration: line-through; }
.task-meta     { font-size: 14px !important; color: var(--z-ink-2); margin-top: 3px; }

.task-item { padding: 12px 14px; }

.task-check, .shop-check {
  border-color: var(--z-line-2);
  background:   var(--z-surface-1);
  width:        26px;
  height:       26px;
  border-radius: 8px;
  transition:   all 0.2s var(--z-ease);
}

.task-check.done, .shop-check.bought {
  background:   var(--z-success);
  border-color: var(--z-success);
  color:        #fff;
}

.shop-check { border-radius: 50%; }

/* ── 12. CHIPS ─────────────────────────────────────────────────── */

.fav-chip, .preset-btn, .kachel, .opt {
  background:    var(--z-surface-2);
  border-color:  var(--z-line-1);
  color:         var(--z-ink-1);
  border-radius: var(--z-r-md);
  transition:    all var(--z-t-fast);
}

.fav-chip:active, .kachel.sel, .opt.sel {
  background:   var(--z-primary-soft);
  border-color: var(--z-primary);
  color:        var(--z-primary);
}

.kachel { min-height: 64px; }

/* ── 13. QUICK-FAB ─────────────────────────────────────────────── */

.fab {
  background:  linear-gradient(145deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 60%),
               var(--person-current, var(--z-primary));
  border:      1px solid rgba(255,255,255,.46);
  box-shadow:  0 6px 24px color-mix(in srgb,var(--person-current,var(--z-primary)) 45%,transparent),
               inset 0 1.5px 0 rgba(255,255,255,.60);
  transition:  transform 0.18s var(--z-ease), box-shadow 0.18s var(--z-ease);
}

.fab:active {
  transform:  scale(0.92);
  box-shadow: 0 2px 8px rgba(123,110,246,.28);
}

/* Drag-Modus: Button wächst + 4 Richtungspfeile (Long-Press) */
.fab.fab-dragging,
.fab.fab-dragging:active {
  transform:  scale(1.32) !important;
  opacity:    .92;
  box-shadow: 0 12px 40px color-mix(in srgb,var(--person-current,var(--z-primary)) 55%,transparent),
              inset 0 1.5px 0 rgba(255,255,255,.7);
  transition: transform .16s var(--z-ease);
}
.fab-arrows { position:absolute; inset:0; pointer-events:none; }
.fab-arr {
  position:absolute; color:#fff; font-size:11px; line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.55);
  animation: fab-arr-pulse 1.1s ease-in-out infinite;
}
.fab-arr-up    { top:-13px;    left:50%; transform:translateX(-50%); }
.fab-arr-down  { bottom:-13px; left:50%; transform:translateX(-50%); }
.fab-arr-left  { left:-13px;   top:50%;  transform:translateY(-50%); }
.fab-arr-right { right:-13px;  top:50%;  transform:translateY(-50%); }
@keyframes fab-arr-pulse {
  0%,100% { opacity:.5; }
  50%     { opacity:1; }
}

.quick-sheet {
  background:              rgba(255,255,255,.48);
  backdrop-filter:         blur(44px) saturate(1.9);
  -webkit-backdrop-filter: blur(44px) saturate(1.9);
  border-color:            rgba(255,255,255,.76);
  border-top:              1px solid rgba(255,255,255,.82);
  border-radius:           var(--z-r-xl) var(--z-r-xl) 0 0;
  box-shadow:              0 -12px 48px rgba(90,80,170,.16), inset 0 1.5px 0 rgba(255,255,255,.95);
}

[data-theme="dark"] .quick-sheet {
  background:   rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}

.quick-sheet-backdrop { background: rgba(26,25,23,.28); }

.qchip {
  background:              rgba(255,255,255,.40);
  backdrop-filter:         blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border:                  1px solid rgba(255,255,255,.76);
  border-radius:           var(--z-r-md);
  min-height:              64px;
  box-shadow:              inset 0 1.5px 0 rgba(255,255,255,.95), 0 2px 10px rgba(90,80,170,.08);
  transition:              background var(--z-t-fast), border-color var(--z-t-fast), transform 0.1s;
}
[data-theme="dark"] .qchip {
  background:   rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.14);
  box-shadow:   inset 0 1.5px 0 rgba(255,255,255,.08), 0 2px 10px rgba(0,0,0,.25);
}

.qchip:active { transform: scale(0.93); }

/* Runde Buttons im FAB-Sheet (Mic, Schließen, Send, Cancel) */
.z-fab-btn {
  border:    1px solid rgba(255,255,255,.44) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.22), inset 0 1.5px 0 rgba(255,255,255,.55) !important;
  position:  relative !important;
  overflow:  hidden !important;
}
.z-fab-btn::after {
  content:        '';
  position:       absolute;
  inset:          0;
  border-radius:  50%;
  background:     linear-gradient(145deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.04) 68%);
  pointer-events: none;
}

/* ── 14. MODAL ─────────────────────────────────────────────────── */

.modal-bg {
  background:      rgba(26,25,23,.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modal {
  background:    var(--z-paper);
  border-color:  var(--z-line-1);
  border-radius: var(--z-r-xl) var(--z-r-xl) 0 0;
  box-shadow:    0 -18px 56px rgba(90,80,170,.14);
}

[data-theme="dark"] .modal {
  background: var(--z-surface-1);
}

.modal h3 {
  color:          var(--z-ink-1);
  font-size:      19px;
  font-weight:    700;
  letter-spacing: -0.02em;
}

.modal-close     { color: var(--z-ink-2); }
.modal-type-hdr  { background: var(--z-surface-2); border-radius: var(--z-r-sm); }

/* ── 15. BRIEFING ──────────────────────────────────────────────── */

.briefing {
  background:    linear-gradient(148deg, #1a7870 0%, #125f59 100%);
  border:        none;
  border-radius: var(--z-r-xl);
  box-shadow:    0 12px 40px rgba(123,110,246,.26);
}

.briefing-title { color: rgba(255,255,255,.70); font-size: 14px; }
.briefing-text  { color: #f0fffb; font-size: 20px; line-height: 1.75; }

/* ── 16. WETTER ────────────────────────────────────────────────── */

.weather-item          { background: var(--z-surface-2); border-radius: var(--z-r-sm); }
.weather-desc          { color: var(--z-ink-2); }
.weather-item-label    { color: var(--z-ink-2); }

/* ── 17. ALERT ─────────────────────────────────────────────────── */

.alert {
  background:    #fff1ed;
  border:        1px solid #f4c4b4;
  border-radius: var(--z-r-md);
  box-shadow:    var(--z-sh-sm);
}

.alert-txt { color: #8e3e2f; }

[data-theme="dark"] .alert {
  background:   rgba(197,48,48,.13);
  border-color: rgba(197,48,48,.28);
}

[data-theme="dark"] .alert-txt { color: #fca5a5; }

/* ── 18. KALENDER ──────────────────────────────────────────────── */

.cal-nav {
  background:    var(--z-surface-2);
  color:         var(--z-ink-1);
  border:        1px solid var(--z-line-1);
  border-radius: var(--z-r-md);
  min-height:    44px;
  font-weight:   600;
}

.cal-day           { border-radius: var(--z-r-sm); font-size: 16px; font-weight: 500; }
.cal-day:hover     { background: var(--z-surface-2); }
.cal-day.today     { background: var(--z-primary-soft); color: var(--z-primary); font-weight: 700; }
.cal-day.selected  { background: var(--z-primary); color: #fff; outline: none; font-weight: 700; }
.cal-day.other-month { color: var(--z-ink-3); }
.cal-month         { font-size: 18px; font-weight: 700; color: var(--z-ink-1); }

/* ── 19. DUMP / VOICE-INBOX ────────────────────────────────────── */

.dump-wrap {
  background:    var(--z-surface-1);
  border-color:  var(--z-line-1);
  border-radius: var(--z-r-xl);
  box-shadow:    var(--z-sh-md);
}

.dump-textarea             { color: var(--z-ink-1); font-size: 16px; line-height: 1.65; }
.dump-textarea::placeholder { color: var(--z-ink-3); }

.dump-bar {
  background:   var(--z-surface-2);
  border-top-color: var(--z-line-1);
}

.dump-mic, .dump-cancel, .dump-hint {
  background:   var(--z-surface-2);
  border-color: var(--z-line-1);
  color:        var(--z-ink-2);
  min-height:   36px;
}

.dump-result {
  border-radius: var(--z-r-lg);
  background:    var(--z-surface-1) !important;
}

.dump-question, .dump-conf-pct, .dump-detail-lbl { color: var(--z-ink-2); }
.dump-question strong { color: var(--z-ink-1); }

/* ── 20. SCHULE ────────────────────────────────────────────────── */

.schule-subtab {
  background:    var(--z-surface-2);
  border-color:  var(--z-line-1);
  color:         var(--z-ink-2);
  border-radius: var(--z-r-md);
  min-height:    44px;
  font-weight:   700;
  transition:    all var(--z-t-fast);
}

.schule-subtab.on, .schule-pal-open {
  background:   var(--z-primary);
  color:        #fff;
  border-color: var(--z-primary);
  box-shadow:   0 4px 14px rgba(123,110,246,.22);
}

.schule-stunde-row, .schule-grid th, .schule-mat-block { border-color: var(--z-line-1); }

.schule-grid-cell {
  border-color:  var(--z-line-1);
  border-radius: var(--z-r-xs);
}

.schule-grid-cell.filled {
  background:   rgba(123,110,246,.08);
  border-color: rgba(123,110,246,.26);
}

.schule-pal-kachel {
  background:    var(--z-surface-2);
  border-color:  var(--z-line-1);
  border-radius: var(--z-r-md);
  transition:    transform 0.1s;
}

.schule-mat-chip {
  background:  #fef9ec;
  color:       #92570f;
  border-color: #f0d49a;
}

.schule-event-row {
  background:       var(--z-primary-soft);
  border-left-color: var(--z-primary);
  color:            var(--z-ink-1);
  border-radius:    var(--z-r-xs);
}

.schule-info-row  { border-color: var(--z-line-1); }
.schule-hinweis-row.hinweis   { border-left-color: #1e88e5; background: rgba(30,136,229,.07); }
.schule-hinweis-row.abholung  { border-left-color: #43a047; background: rgba(67,160,71,.07); }

/* ── 21. MEINS ─────────────────────────────────────────────────── */

.meins-add-btn {
  border-radius: var(--z-r-full) !important;
  min-height:    38px;
  background:    rgba(123,110,246,.09);
  border:        1px solid rgba(123,110,246,.20);
  color:         var(--z-primary);
  font-weight:   600;
  font-size:     15px;
}

.meins-check {
  width:         22px;
  height:        22px;
  min-width:     22px;
  border-radius: 50%;
  border:        2px solid var(--z-line-2);
  transition:    background 0.15s, border-color 0.15s;
}

.meins-check.checked { background: var(--z-primary); border-color: var(--z-primary); }

.meins-date-badge.today {
  background:   var(--z-primary);
  border-color: var(--z-primary);
  color:        #fff;
}

.meins-date-badge.past { opacity: 0.45; }

.meins-privacy-note {
  background:   rgba(123,110,246,.07);
  border:       1px solid rgba(123,110,246,.16);
  border-radius: var(--z-r-sm);
  color:        var(--z-ink-2);
  font-size:    13px;
}

/* ── 22. FORM ──────────────────────────────────────────────────── */

.form-label {
  color:          var(--z-ink-2);
  font-size:      13px;
  font-weight:    800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── 23. TOGGLE ────────────────────────────────────────────────── */

.tog           { background: var(--z-line-2); transition: background 0.2s; }
.tog.on        { background: var(--person-current, var(--z-primary)); }
.tog::after    { transition: left 0.2s var(--z-ease); }

/* ── 24. EINKAUF ───────────────────────────────────────────────── */

.shop-cat-hdr {
  color:          var(--z-ink-2);
  letter-spacing: 0.06em;
  font-size:      13px;
  font-weight:    800;
  text-transform: uppercase;
}

/* ── 25. SETUP / ONBOARDING ─────────────────────────────────────── */

.setup-title { color: var(--z-ink-1); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.setup-sub   { color: var(--z-ink-2); }
.multi-note  { color: var(--z-ink-3); }

.setup-dot    { background: var(--z-line-1); }
.setup-dot.on { background: var(--z-primary); }

.opt { min-height: 68px; }
.opt.sel { background: var(--z-primary-soft); border-color: var(--z-primary); color: var(--z-primary); }
.opt-ico { font-size: 24px; }

/* ── 26. TERMIN-ART EDITOR ─────────────────────────────────────── */

.et-row {
  background:    var(--z-surface-2);
  border-radius: var(--z-r-sm);
  border:        1px solid var(--z-line-1);
}

.et-btns button {
  background:    var(--z-surface-1);
  color:         var(--z-ink-2);
  border:        1px solid var(--z-line-1);
  border-radius: var(--z-r-xs);
}

/* ── 27. ANIMATIONEN ───────────────────────────────────────────── */

@keyframes z-fadein {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes z-slideup {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes z-checkmark {
  0%   { transform: scale(0) rotate(-8deg); }
  60%  { transform: scale(1.22) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes z-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes z-skeleton {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes mic-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .7; transform: scale(.93); }
}

@keyframes tts-spin {
  to { transform: rotate(360deg); }
}

/* ── 28. EV-DRUM ───────────────────────────────────────────────── */

.ev-drum-scroll {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ev-drum-scroll::-webkit-scrollbar { display: none; }

/* ── 29. EMPTY STATES ──────────────────────────────────────────── */

.empty {
  color:       var(--z-ink-2);
  font-size:   15px;
  line-height: 1.6;
  padding:     2rem;
}

/* ── 30. SCHULE MISC ───────────────────────────────────────────── */

.schule-subtabs { gap: 8px; }
.schule-pal-kachel:active { transform: scale(0.93); }
.fach-emoji-btn { border-radius: var(--z-r-sm); }
.fach-emoji-btn.sel {
  background:   rgba(123,110,246,.16);
  border:       1px solid var(--z-primary);
}

/* ── 31. FONT-SIZE SCALE-UP ────────────────────────────────────────
   app.js verwendet hardcodierte px-Werte in Inline-Styles.
   !important überstimmt Inline-Styles (laut CSS-Kaskade).
   Alle Content-Sizes werden um +2px angehoben für bessere
   Lesbarkeit auf einen Blick (kein Fließtext, nur Schnell-Scan). */

[style*="font-size:10px"] { font-size: 13px !important; }
[style*="font-size:11px"] { font-size: 14px !important; }
[style*="font-size:12px"] { font-size: 16px !important; }
[style*="font-size:13px"] { font-size: 17px !important; }
[style*="font-size:14px"] { font-size: 17px !important; }
[style*="font-size:15px"] { font-size: 18px !important; }

/* Korrekte Zeichengröße für nav-svg erhalten */
.nav-svg { width: 26px !important; height: 26px !important; font-size: inherit !important; }

/* ── 32. ANIMATIONEN — ANWENDUNG ──────────────────────────────── */

/* Tab-Wechsel: Inhalt faded sanft rein */
.body > * {
  animation: z-fadein var(--z-t-mid) var(--z-ease) both;
}

/* Karten treten leicht versetzt ein */
.body > .card:nth-child(1) { animation-delay:  0ms; }
.body > .card:nth-child(2) { animation-delay: 30ms; }
.body > .card:nth-child(3) { animation-delay: 60ms; }
.body > .card:nth-child(4) { animation-delay: 90ms; }

/* Modal slide-up */
.modal {
  animation: z-slideup var(--z-t-mid) var(--z-ease) both;
}

/* Full-Screen-Modal (via _fsWrap) */
[style*="position:fixed"][style*="inset:0"] > [style*="overflow-y:auto"],
[style*="position:fixed"][style*="inset:0"] > div {
  animation: z-slideup var(--z-t-mid) var(--z-ease) both;
}

/* Check-Animation für Aufgaben/Einkauf */
.task-check.done, .shop-check.bought, .meins-check.checked {
  animation: z-checkmark 0.28s var(--z-ease) both;
}

/* FAB: Entrée */
.fab {
  animation: z-fadein 0.35s var(--z-ease) both;
}

/* ── 33. DESKTOP RESPONSIVE (≥ 768px) ────────────────────────── */

@media (min-width: 768px) {
  /* Centered single-column layout */
  body {
    display: flex;
    justify-content: center;
    background:
      radial-gradient(ellipse at 16% -2%, rgba(123,110,246,.11) 0%, transparent 42%),
      radial-gradient(ellipse at 90% 6%,  rgba(236,79,140,.08)  0%, transparent 38%),
      linear-gradient(160deg, #f1f0fa 0%, #e9e7f6 100%);
  }

  [data-theme="dark"] body { background: var(--z-paper); }

  #app {
    max-width: 600px;
    width:     100%;
    min-height: 100dvh;
    box-shadow: 0 0 0 1px var(--z-line-1), var(--z-sh-xl);
    border-radius: 0;
  }

  /* Bottom-Nav wird zur Seitenleiste */
  .bottom-nav {
    position:   fixed;
    left:       50%;
    transform:  translateX(calc(-50% + 320px));
    top:        50%;
    transform:  translateX(calc(-50% + 322px)) translateY(-50%);
    height:     auto;
    width:      72px;
    flex-direction: column;
    border-top:  none;
    border-left: 1px solid var(--z-line-1);
    border-radius: var(--z-r-xl) 0 0 var(--z-r-xl);
    padding:     16px 8px;
    gap:         6px;
    box-shadow:  var(--z-sh-lg);
  }

  .bottom-nav-btn {
    flex-direction: column;
    width:    56px;
    height:   56px;
    padding:  0;
    font-size: 11px;
    border-radius: var(--z-r-md);
  }

  .bottom-nav-btn .nav-svg { margin-bottom: 2px; }

  /* Body bekommt mehr Platz oben statt unten */
  .body {
    padding-bottom: 16px !important;
  }

  /* FAB positioniert sich rechts vom App-Container */
  .fab {
    right: calc(50% - 322px - 96px);
  }
}

/* ── 33. B-KOMPONENTEN (Richtung B · Phase-2-ready) ────────────────
   Jede Zeile/Karte setzt lokal --p auf die Personenfarbe;
   Tints werden per color-mix() daraus abgeleitet (kein extra -soft noetig). */

.z-section-label{
  font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--z-ink-3); display:flex; align-items:center; gap:7px; margin:14px 4px 9px;
}
.z-section-label svg{ width:15px; height:15px; }

/* Agenda-Zeile (Home-Feed, Listen) */
.z-agenda{
  --p:var(--z-primary);
  position:relative; display:flex; align-items:center; gap:12px; overflow:hidden;
  background:rgba(255,255,255,.38); border-radius:var(--z-r-md);
  backdrop-filter:blur(32px) saturate(1.7); -webkit-backdrop-filter:blur(32px) saturate(1.7);
  border:1px solid rgba(255,255,255,.78); border-bottom-color:rgba(255,255,255,.44); border-right-color:rgba(255,255,255,.44);
  padding:12px 14px; margin-bottom:10px;
  box-shadow:0 2px 16px rgba(90,80,170,.10), inset 0 1.5px 0 rgba(255,255,255,.92);
}
[data-theme="dark"] .z-agenda{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12);
  border-bottom-color:rgba(255,255,255,.05); border-right-color:rgba(255,255,255,.05);
  box-shadow:0 2px 16px rgba(0,0,0,.28), inset 0 1.5px 0 rgba(255,255,255,.07);
}
.z-agenda__bar{ position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--p); border-radius:0 4px 4px 0; }
.z-agenda__time{ flex:0 0 auto; font-size:14px; font-weight:800; color:var(--z-ink-2); min-width:44px; padding-left:6px; }
.z-agenda__ico{
  width:40px; height:40px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--p) 18%, rgba(255,255,255,.7)); color:var(--p);
  border:1px solid rgba(255,255,255,.6);
}
.z-agenda__ico svg{ width:20px; height:20px; }
.z-agenda__mid{ flex:1; min-width:0; }
.z-agenda__title{ display:block; font-size:15px; font-weight:700; color:var(--z-ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.z-agenda__sub{ display:block; font-size:12.5px; font-weight:600; color:var(--z-ink-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Person-Chip + allgemeine Icon-Kachel */
.z-chip{
  --p:var(--z-primary); white-space:nowrap;
  font-size:11.5px; font-weight:800; padding:4px 11px; border-radius:var(--z-r-full);
  background:color-mix(in srgb, var(--p) 16%, var(--z-surface-1)); color:var(--p);
}
.z-icotile{
  --p:var(--z-primary);
  width:38px; height:38px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--p) 15%, var(--z-surface-1)); color:var(--p);
}
.z-icotile svg{ width:20px; height:20px; }

/* ── 34. ENERGIE-LAYER (nur Kinder-Kontexte) ──────────────────────
   B bleibt Grund-Layer; hier kraeftiger: Clay-Schatten, Vollfarbe, Pop. */

.z-clay{ border:2px solid var(--z-ink-1); box-shadow:var(--z-clay); }
.z-clay-sm{ border:2px solid var(--z-ink-1); box-shadow:var(--z-clay-sm); }

/* Vollfarbiger Akzent in der (aktuellen) Personenfarbe */
.z-vivid{ background:var(--person-vivid, var(--z-primary)); color:#fff; }

/* Wochensieger-Karte + Streak-Chip (Aufgaben/Gamification) */
.z-winner{
  display:flex; align-items:center; gap:13px;
  background:linear-gradient(125deg, var(--z-primary-soft), color-mix(in srgb, var(--z-mama) 14%, var(--z-surface-1)));
  border-radius:var(--z-r-lg); padding:14px 16px; box-shadow:var(--z-sh-sm); margin-bottom:14px;
}
.z-winner__trophy{ font-size:30px; }
.z-winner__title{ font-size:15px; font-weight:800; color:var(--z-ink-1); }
.z-winner__sub{ font-size:12px; font-weight:600; color:var(--z-ink-2); margin-top:2px; }
.z-streak{
  margin-left:auto; background:var(--z-surface-1); color:var(--z-ben);
  border-radius:var(--z-r-full); padding:6px 11px; font-size:12px; font-weight:800; box-shadow:var(--z-sh-sm);
}

/* Feier-Mikroanimation (Checkmark/Belohnung) — per .z-pop triggern */
@keyframes z-pop{ 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
.z-pop{ animation:z-pop var(--z-t-mid) var(--z-ease) both; }

/* ── 35. QUER-WOCHENANSICHT — B-Feinschliff (Phase 2.4) ───────────── */
.wq-today{ background:color-mix(in srgb, var(--z-primary) 12%, transparent); color:var(--z-primary); }
.wq-evt{ border-radius:5px; }
.wq-overlay{ border-radius:var(--z-r-md); box-shadow:var(--z-sh-lg); }

/* ── 36. MASKOTTCHEN „Zuri" (Phase 4) ─────────────────────────────── */
.zuri-listening svg{ animation:zuri-bob 1.4s var(--z-ease) infinite; }
@keyframes zuri-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.zuri-ring{ position:absolute; inset:-10px; border-radius:50%; border:3px solid var(--z-primary); opacity:.5; z-index:0; animation:zuri-pulse 1.4s ease-out infinite; }
@keyframes zuri-pulse{ 0%{transform:scale(.82);opacity:.55} 100%{transform:scale(1.28);opacity:0} }

/* ── 37. KINDER-ANSICHT (Phase 4.1) — größere, freundlichere Targets ── */
[data-kid="1"] .bottom-nav-btn{ font-size:11.5px; font-weight:800; }
[data-kid="1"] .nav-svg{ width:30px !important; height:30px !important; }
[data-kid="1"] .z-section-label{ font-size:13px; }

/* ── 38. PHASE 6 — POLISH & LAUNCH ─────────────────────────────── */

/* Tab-switch fade-in: JS setzt .tab-enter auf .body nach Tab-Wechsel */
.tab-enter { animation: z-fadein .19s var(--z-ease) both; }

/* Button-Press-Feedback (taktil): leichtes Scale-Down */
.bottom-nav-btn:active        { transform: scale(0.88) !important; opacity:.85; }
.fab:active                   { transform: scale(0.91) !important; }
.card:active                  { transform: scale(0.993); transition: transform .08s; }
button.qchip:active           { transform: scale(0.90) !important; }
/* Task-Check: Bounce-Feedback beim Tippen */
.task-check:active            { transform: scale(1.28); transition: transform .1s; }
[data-act="toggleTask"]:active{ transform: scale(0.80) !important; transition: transform .1s; }

/* Desktop Hover-States (≥768px) */
@media (min-width: 768px) {
  .card {
    cursor: default;
    transition: box-shadow var(--z-t-fast), transform var(--z-t-fast);
  }
  .card:hover {
    box-shadow: var(--z-sh-lg);
    transform: translateY(-1px);
  }
  .z-agenda {
    transition: box-shadow var(--z-t-fast), transform var(--z-t-fast);
  }
  .z-agenda:hover {
    box-shadow: var(--z-sh-md);
    transform: translateY(-1px);
  }
  /* Sidebar Nav: etwas breiter für Labels */
  .bottom-nav { width: 76px; }
  .bottom-nav-btn { font-size: 10.5px; }
}

/* Dark-Mode: Tip-Bubble */
[data-theme="dark"] #tip-bubble > div {
  background: var(--z-surface-2);
  border-color: var(--z-line-2);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}

/* Dark-Mode: Vertrauen-Karte in Settings */
[data-theme="dark"] .card[style*="z-primary-soft"] {
  background: rgba(123,110,246,.12) !important;
  border-color: rgba(123,110,246,.22) !important;
}

/* Dark-Mode: Login-Sprechblase */
[data-theme="dark"] .login [style*="z-surface-1"] {
  background: var(--z-surface-2) !important;
}

/* Dark-Mode: Recovery-Screen Key-Card */
[data-theme="dark"] [style*="renderRecovery"] { /* via JS inline */ }

/* Scroll-Snap für horizontal-scrollende Listen */
.h-snap { scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
.h-snap > * { scroll-snap-align: start; }

/* Mikro-Animation: erledigte Aufgabe (z-pop bereits vorhanden, hier Checkbox) */
@keyframes z-check {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  55%  { transform: scale(1.25) rotate(4deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.task-check-done { animation: z-check .28s var(--z-ease) both; }

/* FAB: Puls-Hint beim ersten Öffnen (via .fab-pulse Klasse) */
@keyframes z-fab-pulse {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--z-primary) 55%, transparent); }
  50%      { box-shadow: 0 0 0 12px color-mix(in srgb, var(--z-primary) 0%, transparent); }
}
.fab-pulse { animation: z-fab-pulse 1.8s ease infinite; }