/* ═══════════════════════════════════════════════════════════════════
   MINT BENTO — Theme-Patch für getrennt-zusammen.de
   Einbindung: <link rel="stylesheet" href="/mint-bento.css">
   NACH dem bestehenden <style>-Block in public/index.html laden,
   damit die Overrides greifen.

   Dockt an das bestehende Theming an:
   - Light:  :root
   - Dark:   [data-theme="dark"] bzw. System-Fallback
   Referenz-Designs: "Mint Bento - Alle Screens.dc.html" (Light)
                     "Mint Bento - Dark.dc.html" (Dark)
   ═══════════════════════════════════════════════════════════════════ */

/* Nunito selbst gehostet (DSGVO — kein Google-Fonts-Request) */
@font-face { font-family:'Nunito'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/Nunito-400.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/Nunito-600.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/Nunito-700.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/Nunito-800.woff2') format('woff2'); }
@font-face { font-family:'Nunito'; font-style:normal; font-weight:900; font-display:swap; src:url('/fonts/Nunito-900.woff2') format('woff2'); }

/* ── 1. TOKEN-OVERRIDES ─────────────────────────────────────────── */
:root {
  --mb-font: 'Nunito', system-ui, sans-serif;

  /* Flächen */
  --bg:        #FBF4F7;
  --card:      rgba(255,255,255,0.42);
  --surface-1: rgba(255,255,255,0.42);
  --surface-2: #FFFDF6;
  --surface-3: #F0EAD9;
  --border:    #f0ead9;

  /* Text */
  --text:  #2D2B55;
  --muted: #6b6884;

  /* Primär: Logo-Blau (Herz); Koralle = Partner-Akzent, Grün = Spross/Erfolg */
  --primary:       #3D7EE8;
  --primary-dark:  #2F66C4;
  --primary-light: #EAF1FF;
  --accent:        #FF6B6B;
  --accent-light:  #FFF0F0;

  /* Bestand: Pastell-Palette bleibt (coral/sky/mint/purple/sun/orange/teal) */

  /* Mint-Bento-spezifisch */
  --mb-glass-bg:      rgba(255,255,255,0.42);
  --mb-glass-border:  rgba(255,255,255,0.90);
  --mb-glass-blur:    blur(40px) saturate(2.2);
  --mb-tile-bg:       rgba(255,255,255,0.50);
  --mb-tile-border:   rgba(255,255,255,0.95);
  --mb-radius-card:   26px;
  --mb-radius-tile:   16px;
  --mb-radius-pill:   999px;
  --mb-shadow-card:   inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 40px rgba(45,43,85,0.12);
  --mb-shadow-float:  inset 0 1px 0 rgba(255,255,255,0.9), 0 16px 44px rgba(45,43,85,0.16);
  --mb-custody-me:      rgba(102,161,255,0.50);
  --mb-custody-partner: rgba(255,133,133,0.45);
  --mb-vacation:        rgba(0,201,167,0.35);
  --mb-greeting-grad:   linear-gradient(120deg, rgba(255,158,158,0.60), rgba(128,178,255,0.55));
}

[data-theme="dark"] {
  --bg:        #151119;
  --card:      rgba(255,255,255,0.09);
  --surface-1: rgba(255,255,255,0.09);
  --surface-2: #1B1620;
  --surface-3: #241D2B;
  --border:    rgba(255,255,255,0.10);
  --text:  #EFF7F1;
  --muted: #9aa8a0;
  --primary:       #6FA8FF;
  --primary-dark:  #5B93E8;
  --primary-light: #101C33;

  --mb-glass-bg:      rgba(255,255,255,0.09);
  --mb-glass-border:  rgba(255,255,255,0.18);
  --mb-tile-bg:       rgba(255,255,255,0.05);
  --mb-tile-border:   rgba(255,255,255,0.08);
  --mb-shadow-card:   inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 40px rgba(0,0,0,0.45);
  --mb-shadow-float:  inset 0 1px 0 rgba(255,255,255,0.14), 0 16px 44px rgba(0,0,0,0.5);
  --mb-custody-me:      rgba(86,207,255,0.30);
  --mb-custody-partner: rgba(255,117,117,0.26);
  --mb-vacation:        rgba(0,229,192,0.24);
  --mb-greeting-grad:   linear-gradient(120deg, rgba(255,117,117,0.24), rgba(86,207,255,0.18));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #151119; --card: rgba(255,255,255,0.06); --surface-1: rgba(255,255,255,0.09);
    --surface-2: #1B1620; --surface-3: #241D2B; --border: rgba(255,255,255,0.10);
    --text: #EFF7F1; --muted: #9aa8a0;
    --primary: #4ECCA3; --primary-dark: #3db38d; --primary-light: #101C33;
    --mb-glass-bg: rgba(255,255,255,0.09); --mb-glass-border: rgba(255,255,255,0.18);
    --mb-tile-bg: rgba(255,255,255,0.05); --mb-tile-border: rgba(255,255,255,0.08);
    --mb-shadow-card: inset 0 1px 0 rgba(255,255,255,0.14), 0 12px 40px rgba(0,0,0,0.45); --mb-shadow-float: inset 0 1px 0 rgba(255,255,255,0.14), 0 16px 44px rgba(0,0,0,0.5);
    --mb-custody-me: rgba(86,207,255,0.20); --mb-custody-partner: rgba(255,117,117,0.26);
    --mb-vacation: rgba(0,229,192,0.24);
    --mb-greeting-grad: linear-gradient(120deg, rgba(255,117,117,0.24), rgba(86,207,255,0.18));
  }
}

/* ── 2. GRUNDLAGEN ──────────────────────────────────────────────── */
body {
  font-family: var(--mb-font) !important;
  background:
    radial-gradient(560px 400px at 100% 0%, rgba(61,126,232,0.24), transparent 60%),
    radial-gradient(500px 380px at 0% 100%, rgba(255,90,90,0.20), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed;
}
h1, h2, h3, h4 { font-weight: 900 !important; }

/* ── 3. NAVIGATION: Sidebar mit Icon + Beschriftung (Desktop) ────── */
/* Bestehende .nav-tabs (horizontale Leiste) wird zur linken Glas-Sidebar.
   Icons (.nav-ic) UND Tab-Beschriftungen sind sichtbar. */
@media (min-width: 900px) {
  #app { padding-left: 224px; }
  .nav-tabs {
    position: fixed;
    left: 16px; top: 16px; bottom: 16px;
    width: 200px;
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px 10px;
    background: var(--mb-glass-bg);
    -webkit-backdrop-filter: var(--mb-glass-blur);
    backdrop-filter: var(--mb-glass-blur);
    border: 1px solid var(--mb-glass-border);
    border-radius: 28px;
    box-shadow: var(--mb-shadow-card);
    overflow-y: auto;
    z-index: 50;
  }
  .nav-tab {
    display: flex; align-items: center; gap: 11px;
    font-size: .88rem; font-weight: 800; color: var(--muted);
    padding: 10px 12px; min-height: 44px;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    background: transparent;
    border: none;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-tab .nav-ic { font-size: 20px; flex-shrink: 0; display: inline-flex; }
  .nav-tab:hover { background: var(--surface-3); color: var(--text); }
  .nav-tab.active { background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--primary); }
  .nav-tab .badge {
    position: static; margin-left: auto;
    font-size: 10px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--accent); color: #fff;
    display: grid; place-items: center; font-weight: 900;
  }
  /* Schmalere Desktops: automatisch zurück zur kompakten Icon-Rail */
  @media (max-width: 1099px) {
    #app { padding-left: 96px; }
    .nav-tabs { width: 72px; align-items: center; padding: 14px 0; }
    .nav-tab { font-size: 0; width: 46px; height: 46px; display: grid; place-items: center; gap: 0; padding: 0; border-radius: 16px; }
    .nav-tab .badge { position: absolute; top: 2px; right: 2px; margin-left: 0; }
  }
}

/* Top-Bar entschlacken */
.top-bar {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ── 4. KARTEN & SEKTIONEN: Liquid Glass ────────────────────────── */
.dashboard-section, .settings-section, .card,
.dash-greeting, .apt-tile, .chat-wrap {
  background: var(--mb-glass-bg) !important;
  -webkit-backdrop-filter: var(--mb-glass-blur);
  backdrop-filter: var(--mb-glass-blur);
  border: 1px solid var(--mb-glass-border) !important;
  border-radius: var(--mb-radius-card) !important;
  box-shadow: var(--mb-shadow-card) !important;
}
.dashboard-section, .settings-section { padding: 20px 24px; }

/* Begrüßungskarte: Mint-Gradient */
.dash-greeting {
  background: var(--mb-greeting-grad) !important;
}

/* Innen-Kacheln (Termine, Listenzeilen) */
.apt-tile, .shortcut-tile, .mehr-item {
  background: var(--mb-tile-bg) !important;
  border: 1px solid var(--mb-tile-border) !important;
  border-radius: var(--mb-radius-tile) !important;
}

/* ── 5. TABS & BUTTONS: Pills ───────────────────────────────────── */
.proto-tabs { gap: 8px; }
.proto-tab, .sub-tab-btn {
  border-radius: var(--mb-radius-pill) !important;
  background: var(--mb-glass-bg) !important;
  border: 1px solid var(--mb-glass-border) !important;
  color: var(--muted) !important;
  font-weight: 700 !important;
  padding: 9px 18px !important;
  box-shadow: none !important;
}
.proto-tab.active, .sub-tab-btn.active {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 85%, transparent),
    color-mix(in srgb, var(--primary-dark) 72%, transparent)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45),
              0 8px 20px color-mix(in srgb, var(--primary) 28%, transparent) !important;
  color: #fff !important;
}
[data-theme="dark"] .proto-tab.active,
[data-theme="dark"] .sub-tab-btn.active { color: #0D1B33 !important; }

.btn { border-radius: var(--mb-radius-pill) !important; font-weight: 800 !important; font-family: var(--mb-font) !important; }
.btn-primary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 85%, transparent),
    color-mix(in srgb, var(--primary-dark) 72%, transparent)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45),
              0 8px 20px color-mix(in srgb, var(--primary) 28%, transparent) !important;
}
[data-theme="dark"] .btn-primary { color: #0D1B33 !important; }
.btn-ghost {
  background: var(--mb-glass-bg) !important;
  -webkit-backdrop-filter: var(--mb-glass-blur);
  backdrop-filter: var(--mb-glass-blur);
  border: 1px solid var(--mb-glass-border) !important;
  color: var(--text) !important;
}
.proto-tab, .sub-tab-btn {
  -webkit-backdrop-filter: var(--mb-glass-blur);
  backdrop-filter: var(--mb-glass-blur);
}

/* ── 6. BOTTOM-NAV (Mobile): schwebende Glas-Pill ───────────────── */
.bottom-nav {
  left: 14px !important; right: 14px !important; bottom: 12px !important;
  width: auto !important;
  border-radius: var(--mb-radius-pill) !important;
  background: var(--mb-glass-bg) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--mb-glass-border) !important;
  border-top: 1px solid var(--mb-glass-border) !important;
  box-shadow: var(--mb-shadow-float) !important;
  padding: 6px !important;
}
.bn-btn { border-radius: var(--mb-radius-pill) !important; }
.bn-btn.active {
  background: color-mix(in srgb, var(--primary) 20%, transparent) !important;
  color: var(--primary) !important;
}

/* ── 7. KALENDER ────────────────────────────────────────────────── */
.cal-cell { border-radius: 13px !important; border: none !important; }
.cal-cell.bg-my-custody      { background: var(--mb-custody-me) !important; }
.cal-cell.bg-partner-custody { background: var(--mb-custody-partner) !important; }
.cal-cell.bg-my-vacation,
.cal-cell.bg-family-vacation { background: var(--mb-vacation) !important; }
.cal-cell.today { outline: 2.5px solid var(--primary); outline-offset: -2px; }

/* ── 8. CHAT ────────────────────────────────────────────────────── */
.msg-row:not(.own) .msg-bubble {
  background: var(--mb-tile-bg) !important;
  border: 1px solid var(--mb-tile-border) !important;
  border-radius: 20px 20px 20px 6px !important;
}
.msg-row.own .msg-bubble {
  background: var(--mb-greeting-grad) !important;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent) !important;
  border-radius: 20px 20px 6px 20px !important;
  color: var(--text) !important;
}
.chat-input-area {
  border-radius: var(--mb-radius-pill) !important;
  background: var(--mb-glass-bg) !important;
  border: 1px solid var(--mb-glass-border) !important;
}

/* ── 9. FORMULARE ───────────────────────────────────────────────── */
input, textarea, select {
  border-radius: 14px !important;
  background: var(--mb-tile-bg) !important;
  border: 1.5px solid var(--mb-tile-border) !important;
  color: var(--text) !important;
  font-family: var(--mb-font) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  outline: none !important;
}

/* ── 10. PLUS-PROMO ─────────────────────────────────────────────── */
.plus-promo {
  border-radius: var(--mb-radius-card) !important;
  background: linear-gradient(120deg, rgba(199,125,255,0.16), rgba(77,150,255,0.14)) !important;
  border: 1px solid var(--mb-glass-border) !important;
  -webkit-backdrop-filter: var(--mb-glass-blur);
  backdrop-filter: var(--mb-glass-blur);
}
[data-theme="dark"] .plus-promo {
  background: linear-gradient(120deg, rgba(199,125,255,0.14), rgba(86,207,255,0.10)) !important;
}

/* ── 9. FIXUPS nach Smoke-Test (gegen Bestands-Regeln) ─────────────
   Die App setzte weißen Text auf den früheren Gradient-Flächen —
   auf den neuen hellen Mint-Flächen braucht es dunkle Textfarben. */

/* Top-Bar: Logo/Name dunkel auf hellem Grund; Dark bleibt hell via var(--text) */
.top-bar .logo, .top-bar .logo .logo-main { color: var(--text) !important; }
.top-bar .user-info { color: var(--muted) !important; }
:is([data-theme="dark"]) .top-bar { background: transparent !important; }

/* Begrüßungskarte: dunkelgrüner Text auf Mint-Gradient (Referenz #2b) */
.dash-greeting, .dash-greeting h2 { color: var(--text) !important; }
.dash-greeting p { color: var(--muted) !important; opacity: 1 !important; }
:is([data-theme="dark"]) .dash-greeting, :is([data-theme="dark"]) .dash-greeting h2 { color: var(--text) !important; }
:is([data-theme="dark"]) .dash-greeting p { color: var(--muted) !important; }

/* Bottom-Nav: die App-Nav ist ein Flex-Kind (kein position:fixed) —
   die schwebende Pill entsteht daher über Margins im Flow. */
.bottom-nav {
  margin: 6px 14px calc(10px + env(safe-area-inset-bottom)) !important;
  height: auto !important; max-height: none !important;
  padding: 6px !important;
}
:is([data-theme="dark"]) .bottom-nav {
  background: var(--mb-glass-bg) !important;
  border-color: var(--mb-glass-border) !important;
  border-top-color: var(--mb-glass-border) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .bottom-nav {
    background: var(--mb-glass-bg) !important;
    border-top-color: var(--mb-glass-border) !important;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .top-bar { background: transparent !important; }
}

/* backdrop-filter-Fallback: ohne Blur brauchen Glas-Karten deckendere Flächen */
@supports not (backdrop-filter: blur(1px)) {
  .dashboard-section, .settings-section, .card, .apt-tile, .chat-wrap, .modal, .confirm-sheet {
    background: var(--surface-2) !important;
  }
}

/* Icon-Rail: Profil-Tab sitzt unten (Design-Referenz); order statt Markup-Umbau */
@media (min-width: 900px) {
  .nav-tabs { display: flex; flex-direction: column; }
  .nav-tab[data-view="settings"] { margin-top: auto; }
}

/* ── 10. BENTO-GRID (Dashboard, Referenz #2b) ──────────────────── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.bento > * { margin-bottom: 0 !important; }
.bento > *:empty { display: none; }
.bento-span2 { grid-column: span 2; }
.bento-span3 { grid-column: span 3; }
.bento-stack { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 899px) {
  .bento { grid-template-columns: 1fr; }
  .bento-span2, .bento-span3 { grid-column: span 1; }
}

/* „Diese Woche"-Streifen */
.week-strip { padding: 18px 24px; }
.ws-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ws-head h3 { margin: 0; font-size: 1rem; }
.ws-meta { font-size: .78rem; color: var(--muted); font-weight: 700; }
.ws-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.ws-day { border: none; border-radius: 16px; padding: 10px 4px; text-align: center;
  cursor: pointer; font-family: var(--mb-font); background: var(--mb-tile-bg); }
.ws-me       { background: var(--mb-custody-me); }
.ws-partner  { background: var(--mb-custody-partner); }
.ws-handover { background: linear-gradient(180deg, var(--mb-custody-partner) 50%, var(--mb-custody-me) 50%); }
.ws-today    { outline: 2.5px solid var(--primary); outline-offset: -2px; }
.ws-dow { display: block; font-size: 11px; font-weight: 800; color: var(--muted); }
.ws-num { display: block; font-size: 17px; font-weight: 900; color: var(--text); }

/* Übergabetag im Kalender: vertikal halb/halb (Referenz #2d) */
.cal-cell.handover-day { background: linear-gradient(180deg,
  var(--mb-custody-partner) 50%, var(--mb-custody-me) 50%) !important; }

/* ── 11. Hartkodierte Inline-Hintergründe → Mint-Töne (Schritt 8) ──
   Gleiche Technik wie die Dark-Overrides der App ([style*=…]).
   Hue bleibt erhalten (gelb→Sun, grün→Mint, rot→Coral, lila→Lavendel,
   blau→Sky). Die bestehenden Dark-Regeln der App sind spezifischer
   und gewinnen im Dunkelmodus weiterhin. */
[style*="background:#fef9c3"], [style*="background: #fef9c3"],
[style*="background:#fef3c7"], [style*="background: #fef3c7"],
[style*="background:#fff3cd"], [style*="background: #fff3cd"] {
  background: rgba(255,217,61,0.20) !important;
}
[style*="background:#f0fdf4"], [style*="background: #f0fdf4"],
[style*="background:#dcfce7"], [style*="background: #dcfce7"] {
  background: rgba(107,203,119,0.16) !important;
}
[style*="background:#fee2e2"], [style*="background: #fee2e2"],
[style*="background:#fef2f2"], [style*="background: #fef2f2"] {
  background: rgba(255,107,107,0.10) !important;
}
[style*="background:#f5f3ff"], [style*="background: #f5f3ff"],
[style*="background:#ede9fe"], [style*="background: #ede9fe"] {
  background: linear-gradient(135deg,#F3ECFF,#F9F5FF) !important;
}
[style*="background:#e0f2fe"], [style*="background: #e0f2fe"],
[style*="background:#f0f9ff"], [style*="background: #f0f9ff"],
[style*="background:#eff6ff"], [style*="background: #eff6ff"] {
  background: rgba(141,185,255,0.22) !important;
}
[style*="background:#f8faff"], [style*="background: #f8faff"],
[style*="background:#f9f8ff"], [style*="background: #f9f8ff"] {
  background: var(--mb-tile-bg) !important;
}
:is([data-theme="dark"]) [style*="background:#f5f3ff"],
:is([data-theme="dark"]) [style*="background: #f5f3ff"],
:is([data-theme="dark"]) [style*="background:#ede9fe"],
:is([data-theme="dark"]) [style*="background: #ede9fe"] {
  background: rgba(199,125,255,0.14) !important;
}

/* ── 12. Login-Split (Desktop, Referenz #2a) ───────────────────── */
.auth-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.ah-chip {
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.9);
  border-radius: 999px; padding: 7px 13px; font-size: .78rem; font-weight: 800; color: var(--text);
}
:is([data-theme="dark"]) .ah-chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); color: var(--text); }
@media (min-width: 900px) {
  .auth-wrap .auth-outer {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px;
    max-width: 1100px; margin: 0 auto; align-items: stretch; padding: 24px;
  }
  .auth-wrap .auth-hero {
    background: var(--mb-greeting-grad); border-radius: 32px; padding: 56px 40px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .auth-wrap .auth-hero h1 { color: var(--text); }
  .auth-wrap .auth-hero p { color: var(--muted); }
  :is([data-theme="dark"]) .auth-wrap .auth-hero h1 { color: var(--text); }
  :is([data-theme="dark"]) .auth-wrap .auth-hero p { color: var(--muted); }
  .auth-wrap .auth-hero-chips { justify-content: flex-start; }
  .auth-wrap .auth-card { border-radius: 32px; margin-top: 0; }
}

/* Login-Hintergrund: Mint-Aurora statt Coral-Verlauf (Desktop-Regel der App überschreiben) */
.auth-wrap {
  background: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(77,150,255,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(255,107,107,0.12) 0%, transparent 55%) !important;
}
/* Mobiler Login-Hero (Logo-Kopf) auf Mint statt Coral-Verlauf */
.auth-hero { background: var(--mb-greeting-grad) !important; }
.auth-hero h1 { color: var(--text) !important; }
.auth-hero p { color: var(--muted) !important; }
:is([data-theme="dark"]) .auth-hero h1 { color: var(--text) !important; }
:is([data-theme="dark"]) .auth-hero p { color: var(--muted) !important; }

/* Dark: aktive Pill-Tabs gefüllt Mint mit dunklem Text (übersteuert App-Dark-Regel Z.246f) */
:is([data-theme="dark"]) .proto-tab { background: var(--mb-glass-bg) !important; color: var(--muted) !important; }
:is([data-theme="dark"]) .proto-tab.active,
:is([data-theme="dark"]) .sub-tab-btn.active {
  background: var(--primary) !important;
  color: #0D1B33 !important;
  box-shadow: none !important;
  border-color: var(--primary) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .proto-tab.active,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .sub-tab-btn.active {
    background: var(--primary) !important;
    color: #0D1B33 !important;
    box-shadow: none !important;
  }
}

/* ── Unterhaltsrechner: Schieberegler ── */
.ur-row { margin-bottom: 16px; }
.ur-row > label { display: block; font-size: .85rem; font-weight: 800; margin-bottom: 6px; }
.ur-slider-line { display: flex; align-items: center; gap: 14px; }
.ur-slider-line input[type="range"] {
  flex: 1; height: 32px; accent-color: var(--primary); cursor: pointer;
  touch-action: none;    /* Regler besitzt die Touch-Geste komplett — folgt dem Finger bis zum Abheben */
  margin: 0;
}
.ur-out {
  min-width: 86px; text-align: center; font-weight: 900; font-size: .95rem;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary); border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}

/* ── Urlaubs-Countdown: Logo-Blau-Verlauf statt Alt-Lila (Light/Dark) ── */
.vacation-countdown { background: linear-gradient(135deg, #54A8FF 0%, #2B6EE8 100%) !important; border-radius: var(--mb-radius-card) !important; }
.vacation-countdown .vc-bg-fallback { background: linear-gradient(135deg, #54A8FF 0%, #2B6EE8 100%); }
:is([data-theme="dark"]) .vacation-countdown { background: linear-gradient(135deg, #35619E 0%, #1D3A66 100%) !important; }
:is([data-theme="dark"]) .vacation-countdown .vc-bg-fallback { background: linear-gradient(135deg, #35619E 0%, #1D3A66 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .vacation-countdown { background: linear-gradient(135deg, #35619E 0%, #1D3A66 100%) !important; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .vacation-countdown .vc-bg-fallback { background: linear-gradient(135deg, #35619E 0%, #1D3A66 100%); }
}

/* (Ultrawide-Gesamt-Cap auf Nutzerwunsch entfernt — nur der Begrüßungsbanner
   wird separat angepasst, siehe unten.) */


/* Modals/Sheets: solide Fläche OHNE backdrop-filter — der Blur musste bei jeder
   DOM-Änderung dahinter (z.B. Sekunden-Countdown) neu gerendert werden und
   erzeugte sichtbare weiße Streifen. Optik bleibt über das abdunkelnde Overlay. */
.modal, .confirm-sheet {
  background: var(--surface-1, var(--card)) !important;
  border: 1px solid var(--mb-glass-border) !important;
  border-radius: var(--mb-radius-card) !important;
  box-shadow: var(--mb-shadow-float) !important;
}

/* ── Begrüßungsbanner: volle Reihe, wenn die Plus-Promo daneben fehlt ──
   Bei Plus-Nutzern ist #home-plus-promo ausgeblendet — ohne diesen Fix
   bleibt der Banner auf 2/3 Spalten und rechts klafft eine Lücke. */
@media (min-width: 900px) {
  body.is-plus #dash-greeting.bento-span2 { grid-column: span 3; }
}
/* Mobil sicherheitshalber hart auf 1 Spalte (hohe Spezifität der Plus-Regel) */
@media (max-width: 899px) {
  body.is-plus #dash-greeting.bento-span2 { grid-column: span 1; }
}

/* Urlaubs-Countdown als erstes Dashboard-Element: Innen-Margin im Grid neutralisieren */
#dash-vacation-countdown .vacation-countdown { margin-bottom: 0 !important; }

/* ── Mobile: Pill-Tabs kompakt, damit alle in eine Reihe passen ──
   (v2-Padding 9px/18px machte z.B. „Entwicklung" in der Kinder-Ansicht
   zu breit — der letzte Tab wurde abgeschnitten) */
@media (max-width: 520px) {
  .proto-tabs { gap: 5px; }
  .proto-tab {
    flex: 1 1 0 !important; min-width: 0 !important;
    padding: 8px 6px !important; font-size: .72rem !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sub-tab-btn { padding: 8px 10px !important; font-size: .76rem !important; }
}

/* ── Tab-Leisten: kein Gruppen-Rahmen — die Pillen stehen frei ── */
.proto-tabs {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
:is([data-theme="dark"]) .proto-tabs { background: transparent !important; border: none !important; }
.sub-tab-bar { border-bottom: none !important; padding-bottom: 0 !important; }

/* ── Begrüßungsbanner + Ampel: funktional zusammengeführt ──
   Die Bestätigungs-Ampel sitzt IM Banner als halbtransparente Zeile. */
#dash-greeting #dash-ampel { position: relative; z-index: 1; }
#dash-greeting .ampel-combined {
  margin: 14px 0 0 !important;
  padding: 4px !important;
  background: rgba(255,255,255,0.42) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
#dash-greeting .ampel-person[role="button"]:hover { background: rgba(255,255,255,0.35); }
:is([data-theme="dark"]) #dash-greeting .ampel-combined {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
:is([data-theme="dark"]) #dash-greeting .ampel-person[role="button"]:hover { background: rgba(255,255,255,0.06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) #dash-greeting .ampel-combined {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.10) !important;
  }
}

/* ── Urlaubs-Countdown: an Light/Dark angepasst + kompakter ── */
/* Light: Pastellblau mit dunklem Text (statt sattem Dunkelblau) */
.vacation-countdown {
  background: linear-gradient(135deg, #DDE9FF 0%, #EFF5FF 100%) !important;
  color: var(--text) !important;
}
.vacation-countdown h3 { opacity: .75; }
.vc-unit { background: rgba(61,126,232,0.14) !important; }
.vacation-countdown .vc-bg-fallback { background: linear-gradient(135deg, #DDE9FF 0%, #EFF5FF 100%); }
/* Dark: gedämpftes Tiefblau mit hellem Text (wie gehabt) */
:is([data-theme="dark"]) .vacation-countdown,
:is([data-theme="dark"]) .vacation-countdown .vc-bg-fallback {
  background: linear-gradient(135deg, #2A4A7A 0%, #1A3050 100%) !important;
  color: #EFF7F1 !important;
}
:is([data-theme="dark"]) .vc-unit { background: rgba(255,255,255,0.10) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .vacation-countdown,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .vacation-countdown .vc-bg-fallback {
    background: linear-gradient(135deg, #2A4A7A 0%, #1A3050 100%) !important;
    color: #EFF7F1 !important;
  }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .vc-unit { background: rgba(255,255,255,0.10) !important; }
}
/* Kompakter: kleinere Zahlen-Chips; Emoji-Spalte mobil ausblenden */
.vc-unit { padding: 6px 10px !important; min-width: 48px !important; }
.vc-unit .vc-num { font-size: 1.25rem !important; }
@media (max-width: 520px) {
  .vacation-countdown [style*="flex-direction:column"][style*="align-self:stretch"] { display: none !important; }
}

/* ── Login: Logo aus der iPhone-Notch holen + besser erkennbar ── */
@media (max-width: 899px) {
  .auth-wrap .auth-hero { padding-top: calc(40px + env(safe-area-inset-top, 0px)) !important; }
}
.auth-hero-logo {
  box-shadow: 0 8px 32px rgba(0,0,0,0.30), 0 0 0 4px rgba(255,255,255,0.55) !important;
  background: #fff;
}

/* ── Weniger Transparenz im gesamten Design (Nutzerwunsch) ──
   Die Glas-Flächen waren zu durchsichtig (Dark: 6-9% Weiß) — Inhalte
   dahinter schienen durch, besonders in Modals. Deckkraft global erhöht,
   der Glas-Look bleibt über Blur + Border erhalten. */
:root {
  --card: rgba(255,255,255,0.88);
  --surface-1: rgba(255,255,255,0.92);
  --mb-glass-bg: rgba(255,255,255,0.88);
}
:root[data-theme="dark"], :is([data-theme="dark"]) {
  --card: rgba(38,34,48,0.94);
  --surface-1: rgba(38,34,48,0.96);
  --mb-glass-bg: rgba(38,34,48,0.94);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --card: rgba(38,34,48,0.94);
    --surface-1: rgba(38,34,48,0.96);
    --mb-glass-bg: rgba(38,34,48,0.94);
  }
}
/* Modals: komplett deckend + kräftiger abgedunkeltes Overlay */
.modal, .confirm-sheet { background: var(--surface-1) !important; }
:is([data-theme="dark"]) .modal, :is([data-theme="dark"]) .confirm-sheet { background: #211D2B !important; }
.modal-overlay { background: rgba(12,10,20,0.72) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .modal,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .confirm-sheet { background: #211D2B !important; }
}

/* ── „Nächste Termine": kompakte Zeilen (platzsparend, max. 4 im JS) ── */
#dash-upcoming { grid-template-columns: 1fr !important; gap: 8px !important; }
#dash-upcoming .apt-tile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 11px; row-gap: 1px;
  text-align: left;
  aspect-ratio: auto;
  padding: 9px 13px !important;
  border-radius: 14px !important;
  border-top-width: 0 !important;
  border-left: 4px solid var(--primary);
  overflow: hidden;
}
#dash-upcoming .apt-tile.pending      { border-left-color: var(--warning); }
#dash-upcoming .apt-tile.confirmed,
#dash-upcoming .apt-tile.vacation     { border-left-color: var(--success); }
#dash-upcoming .apt-tile.family_vacation { border-left-color: var(--accent2); }
#dash-upcoming .apt-tile.custody      { border-left-color: var(--primary); }
#dash-upcoming .apt-tile-icon  { grid-column: 1; grid-row: 1 / 3; font-size: 1.45rem; line-height: 1; margin: 0; }
#dash-upcoming .apt-tile-title {
  grid-column: 2; grid-row: 1; margin: 0;
  font-size: .82rem; font-weight: 800; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dash-upcoming .apt-tile-date  { grid-column: 2; grid-row: 2; margin: 0; font-size: .7rem; color: var(--muted); font-weight: 600; }
#dash-upcoming .apt-tile-status{ grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: .62rem; padding: 2px 8px; margin: 0; }
/* Notizen, Zusatz-Badges und Inline-Aktionen bleiben auf der kompakten Startseite aus
   (Details/Bestätigen über Tippen auf die Kachel bzw. den Bestätigungen-Tab). */
#dash-upcoming .apt-tile-notes,
#dash-upcoming .apt-tile-log-badges,
#dash-upcoming .apt-tile .btn { display: none; }

/* ── Abendroutine-Dashboard-Karte (18–23 Uhr) ─────────────────────────────── */
.dar-card {
  background: linear-gradient(135deg, #2B2650, #1B1838 60%, #241E45);
  color: #F2EFFE;
  border-radius: var(--radius, 22px);
  padding: 20px 22px;
  box-shadow: 0 10px 28px rgba(20, 15, 55, 0.35);
  position: relative;
  overflow: hidden;
}
.dar-card::after {
  content: "✦";
  position: absolute;
  top: 14px; right: 20px;
  font-size: 1rem;
  color: rgba(255,255,255,0.35);
  text-shadow: -34px 26px 0 rgba(255,255,255,0.22), -14px 52px 0 rgba(255,255,255,0.14);
  pointer-events: none;
}
.dar-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dar-moon { font-size: 1.9rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(255, 226, 130, 0.45)); }
.dar-title { font-weight: 900; font-size: 1.08rem; }
.dar-sub { font-size: .8rem; color: rgba(242,239,254,0.72); }
.dar-routine { margin-bottom: 10px; }
.dar-routine-title { font-weight: 800; font-size: .92rem; margin-bottom: 4px; }
.dar-child { font-weight: 600; font-size: .8rem; color: rgba(242,239,254,0.72); }
.dar-steps { margin: 0 0 4px; padding-left: 20px; font-size: .86rem; line-height: 1.55; color: rgba(242,239,254,0.9); }
.dar-story-btn {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(135deg, #FFD98A, #FFB86B);
  color: #4A2E10;
  font-weight: 900;
  border: none;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: .92rem;
  box-shadow: 0 6px 16px rgba(255, 185, 105, 0.28);
}
.dar-story-btn:hover { filter: brightness(1.05); }
:root[data-theme="light"] .dar-card { box-shadow: 0 10px 28px rgba(60, 50, 120, 0.22); }

/* ── Fräulein Stinkepups: Grid im Routinen-Tab ────────────────────────────── */
.sp-actions { margin-bottom: 12px; }
.sp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.sp-card {
  display: flex; align-items: flex-start; gap: 10px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit; color: var(--text);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 40, 90, 0.12); }
.sp-card-emoji { font-size: 1.5rem; line-height: 1.2; flex-shrink: 0; }
.sp-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-card-teil { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }
.sp-card-title { font-weight: 800; font-size: .92rem; line-height: 1.25; }
.sp-card-msg { font-size: .78rem; color: var(--muted); line-height: 1.35; }

/* ── Stinkepups: Picker-Modal ─────────────────────────────────────────────── */
.sp-picker-intro { font-size: .88rem; color: var(--muted); margin: 0 0 10px; }
.sp-picker-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; padding-right: 4px; }
.sp-picker-item {
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 12px;
  cursor: pointer;
  font: inherit; color: var(--text); font-size: .9rem;
}
.sp-picker-item:hover { border-color: var(--primary); }
.sp-picker-item .sp-card-emoji { font-size: 1.2rem; }
.sp-picker-item-text { min-width: 0; }

/* ── Stinkepups: Reader (Vorlese-Ansicht) ─────────────────────────────────── */
.sp-modal .modal-body { max-height: 74vh; overflow-y: auto; }
.sp-back { margin-bottom: 10px; }
.sp-story-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sp-story-emoji { font-size: 2.6rem; line-height: 1; }
.sp-story-teil { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sp-story-title { margin: 2px 0 0; font-size: 1.35rem; font-weight: 900; line-height: 1.2; }
.sp-figuren { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sp-figur-chip {
  font-size: .72rem; font-weight: 700;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  border-radius: 999px;
  padding: 3px 10px;
}
.sp-story-text p {
  font-size: 1.12rem;
  line-height: 1.75;
  margin: 0 0 14px;
}
.sp-story-hint {
  font-size: .82rem;
  color: var(--muted);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.sp-botschaft {
  background: linear-gradient(135deg, rgba(255, 217, 138, 0.22), rgba(255, 184, 107, 0.14));
  border: 1px solid rgba(255, 184, 107, 0.35);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: .95rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
.sp-nav { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 520px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-story-text p { font-size: 1.06rem; }
}

/* ── Stinkepups: Kapitel-Ansicht ──────────────────────────────────────────── */
.sp-kapitel { margin-bottom: 18px; }
.sp-kapitel-titel { font-size: 1.05rem; font-weight: 900; margin: 0 0 8px; }
.sp-zauberspruch {
  background: linear-gradient(135deg, rgba(140, 110, 255, 0.14), rgba(90, 140, 255, 0.10));
  border: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.6;
  margin: 4px 0 14px;
}

/* ── Routine-Vorlagen-Verwaltung im Modal ─────────────────────────────────── */
.preset-manage-box {
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  max-height: 200px;
  overflow-y: auto;
}
.preset-manage-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem;
  padding: 5px 2px;
  border-bottom: 1px solid var(--border);
}
.preset-manage-item:last-child { border-bottom: none; }
.rp-start-btn { margin: 10px 0 6px; }
.dar-play-btn {
  margin: 2px 0 10px;
  background: rgba(255,255,255,0.14);
  color: #F2EFFE;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 12px;
  font-weight: 800;
}
.dar-play-btn:hover { background: rgba(255,255,255,0.24); }

/* ── Routine-Player (kindgerecht, ~7 Jahre) ───────────────────────────────── */
.rp-overlay {
  position: fixed; inset: 0;
  z-index: 9000;
  overflow-y: auto;
  padding: max(18px, env(safe-area-inset-top)) 16px 32px;
  animation: rpFadeIn .25s ease;
}
@keyframes rpFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Klar unterschiedliche Farbwelten je nach Geschlecht des Kindes */
.rp-theme-girl {
  background: linear-gradient(160deg, #FF8FC0 0%, #FFB6D9 40%, #FFD9EC 100%);
  --rp-card: #FFF3F9;
  --rp-card-done: #FF5FA8;
  --rp-accent: #D6187C;
  --rp-text: #6B1043;
  --rp-fill: linear-gradient(90deg, #FF5FA8, #FF8FC0);
}
.rp-theme-boy {
  background: linear-gradient(160deg, #2E7CF6 0%, #4FA3FF 40%, #A8D4FF 100%);
  --rp-card: #EFF6FF;
  --rp-card-done: #1D6BE8;
  --rp-accent: #0B4DB8;
  --rp-text: #0A2E66;
  --rp-fill: linear-gradient(90deg, #1D6BE8, #4FA3FF);
}
.rp-theme-neutral {
  background: linear-gradient(160deg, #8B5CF6 0%, #A78BFA 40%, #DDD6FE 100%);
  --rp-card: #F5F3FF;
  --rp-card-done: #7C3AED;
  --rp-accent: #5B21B6;
  --rp-text: #3B1A78;
  --rp-fill: linear-gradient(90deg, #7C3AED, #A78BFA);
}
.rp-inner { max-width: 560px; margin: 0 auto; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.rp-type { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--rp-text); opacity: .75; }
.rp-title { margin: 2px 0 0; font-size: 1.45rem; font-weight: 900; color: var(--rp-text); line-height: 1.2; }
.rp-close {
  background: rgba(255,255,255,0.55);
  border: none; border-radius: 50%;
  width: 42px; height: 42px; flex-shrink: 0;
  font-size: 1.15rem; font-weight: 900;
  color: var(--rp-text);
  cursor: pointer;
}
.rp-progress { margin-bottom: 18px; }
.rp-progress-bar {
  height: 16px;
  background: rgba(255,255,255,0.5);
  border-radius: 999px;
  overflow: hidden;
}
.rp-progress-fill {
  height: 100%;
  background: var(--rp-fill);
  border-radius: 999px;
  transition: width .45s cubic-bezier(.34,1.56,.64,1);
}
.rp-progress-label { font-size: .88rem; font-weight: 800; color: var(--rp-text); margin-top: 6px; text-align: center; }
.rp-steps { display: flex; flex-direction: column; gap: 12px; }
.rp-step {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  background: var(--rp-card);
  border: 3px solid transparent;
  border-radius: 20px;
  padding: 16px 18px;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--rp-text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transition: transform .15s ease;
}
.rp-step:active { transform: scale(0.97); }
.rp-step-emoji { font-size: 1.7rem; flex-shrink: 0; }
.rp-step-text { flex: 1; min-width: 0; }
.rp-step-check {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%;
  border: 3px dashed var(--rp-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 900;
  color: transparent;
  transition: all .2s ease;
}
.rp-step.done {
  background: var(--rp-card-done);
  color: #fff;
  animation: rpBounce .5s cubic-bezier(.34,1.56,.64,1);
}
.rp-step.done .rp-step-text { text-decoration: line-through; text-decoration-thickness: 3px; }
.rp-step.done .rp-step-check {
  border-style: solid;
  border-color: #fff;
  background: rgba(255,255,255,0.25);
  color: #fff;
  transform: scale(1.1) rotate(360deg);
}
@keyframes rpBounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.06) rotate(-1.5deg); }
  65% { transform: scale(0.97) rotate(1deg); }
  100% { transform: scale(1); }
}
.rp-star {
  position: fixed;
  z-index: 9500;
  font-size: 1.3rem;
  pointer-events: none;
  animation: rpStar 1s ease-out forwards;
}
@keyframes rpStar {
  0% { transform: translate(0,0) scale(.6); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(40deg); opacity: 0; }
}
.rp-celebrate { text-align: center; padding: 48px 12px; }
.rp-celebrate-emoji { font-size: 4.5rem; animation: rpBounce .8s cubic-bezier(.34,1.56,.64,1) infinite alternate; }
.rp-celebrate-title { font-size: 1.9rem; font-weight: 900; color: var(--rp-text); margin: 14px 0 6px; }
.rp-celebrate-sub { font-size: 1.05rem; font-weight: 700; color: var(--rp-text); opacity: .8; margin: 0 0 26px; }
.rp-celebrate-btn {
  background: var(--rp-card);
  color: var(--rp-text);
  font-size: 1.1rem;
  font-weight: 900;
  border: none;
  border-radius: 18px;
  padding: 14px 36px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}
.rp-rain {
  position: fixed;
  top: -6vh;
  z-index: 9400;
  pointer-events: none;
  animation: rpRain 2.8s linear forwards;
}
@keyframes rpRain {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(115vh) rotate(320deg); opacity: .7; }
}

/* ── Routine-Karten: Desktop-Skalierung + Header ohne Überlappung ─────────── */
.routine-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 520px) {
  .routine-grid { grid-template-columns: 1fr; }
}
.routine-card-header { align-items: flex-start; gap: 10px; }
.routine-card-title { flex: 1 1 auto; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.routine-card-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.routine-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }

/* ── "Fertig gelesen"-Button im Reader (aus dem Routine-Player) ───────────── */
.sp-done-btn {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  background: linear-gradient(135deg, #FFD98A, #FFB86B);
  color: #4A2E10;
  font: inherit;
  font-size: 1rem;
  font-weight: 900;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 185, 105, 0.28);
}
.sp-done-btn:hover { filter: brightness(1.05); }

/* ── Wochentags-Chips im Routine-Modal ────────────────────────────────────── */
.rt-day-chip {
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  padding: 7px 0;
  width: 40px;
  text-align: center;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
}
.rt-day-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── Morgenroutine-Karte auf der Startseite (Sonnenaufgang) ───────────────── */
.dar-card--morning {
  background: linear-gradient(160deg, #FFE9B8 0%, #FFD98A 45%, #FFC46B 100%);
  color: #5A3A10;
  box-shadow: 0 10px 28px rgba(255, 180, 90, 0.30);
}
.dar-card--morning::after { color: rgba(255,255,255,0.7); text-shadow: -34px 26px 0 rgba(255,255,255,0.5), -14px 52px 0 rgba(255,255,255,0.35); }
.dar-card--morning .dar-sub, .dar-card--morning .dar-child { color: rgba(90,58,16,0.75); }
.dar-card--morning .dar-steps { color: rgba(90,58,16,0.92); }
.dar-card--morning .dar-play-btn {
  background: rgba(255,255,255,0.55);
  color: #5A3A10;
  border-color: rgba(255,255,255,0.8);
}
.dar-card--morning .dar-play-btn:hover { background: rgba(255,255,255,0.75); }
#dash-abendroutine { display: flex; flex-direction: column; gap: 14px; }
#dash-abendroutine:empty { display: none; }

/* Typ-Badge: Gem-Icon sauber ausrichten */
.routine-type-badge { display: inline-flex; align-items: center; gap: 4px; }

/* ── Allergie-Hinweise & Empfehlungen ─────────────────────────────────────── */
.ae-hint-box {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 8px;
  font-size: .82rem;
  line-height: 1.5;
}
.ae-hint-title { font-weight: 800; margin-bottom: 2px; }
.ae-hint-text { color: var(--text); }
.ae-hint-tipp { color: var(--muted); margin-top: 4px; }

/* ── Überschriften ohne eigenen Hintergrund (alle Themes) ─────────────────── */
.section-header { background: transparent !important; }

/* ── Impf-Checkliste (STIKO + Masernschutzgesetz) ─────────────────────────── */
.vacc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.vacc-card-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vacc-card-name { font-weight: 800; font-size: .95rem; }
.vacc-card-age { font-size: .78rem; color: var(--muted); }
.vacc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .15s ease;
}
.vacc-row:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.vacc-row input[type=checkbox] { width: 19px; height: 19px; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.vacc-row-main { flex: 1; min-width: 0; }
.vacc-row-name { display: block; font-size: .86rem; font-weight: 700; line-height: 1.35; }
.vacc-row-meta { display: block; font-size: .74rem; color: var(--muted); margin-top: 1px; }
/* Geimpft: keine Durchstreichung (missverständlich) — stattdessen grüne Hervorhebung */
.vacc-row.checked {
  background: color-mix(in srgb, #22c55e 12%, var(--card));
  border-left: 3px solid #22c55e;
  padding-left: 8px;
}
.vacc-row.checked .vacc-row-name { font-weight: 800; }
.vacc-row.due { background: color-mix(in srgb, #f59e0b 9%, transparent); }
.vacc-badge {
  display: inline-block;
  font-size: .66rem; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}
.vacc-badge.law   { background: rgba(239, 68, 68, .14); color: #dc2626; }
.vacc-badge.stiko { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); }
.vacc-badge.due   { background: rgba(245, 158, 11, .18); color: #b45309; }
.vacc-badge.done  { background: rgba(34, 197, 94, .16); color: #15803d; }
.vacc-badge.muted { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
:is([data-theme="dark"]) .vacc-badge.law  { color: #fca5a5; }
:is([data-theme="dark"]) .vacc-badge.due  { color: #fcd34d; }
:is([data-theme="dark"]) .vacc-badge.done { color: #86efac; }

/* ── Allergien / Unverträglichkeiten getrennt je Block ────────────────────── */
.aoc-block {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 10px;
}
.aoc-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }

/* ── Ferien: Aufteilungs-Vorschlag ────────────────────────────────────────── */
.vac-suggest {
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.vac-suggest-title { font-weight: 800; font-size: .88rem; margin-bottom: 4px; }
.vac-suggest-sub { font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.vac-suggest-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: .85rem;
}
.vac-suggest-taken { font-size: .76rem; font-weight: 700; color: var(--success, #16a34a); }

/* ── Gesundheit: kompakte Unterblöcke in zusammengeführten Sektionen ──────── */
.med-block { padding: 14px 0; border-top: 1.5px solid var(--border); }
.med-block:first-of-type { border-top: none; padding-top: 4px; }
.med-block--last { padding-bottom: 0; }
.med-block-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.med-block-title { margin: 0; font-size: .95rem; font-weight: 800; }

/* ── Medikamenten-Plan: Quittierung & Blöcke ──────────────────────────────── */
.med-plan-child { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.med-plan-child-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 800; font-size: .92rem; }
.med-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.med-card:last-child { margin-bottom: 0; }
.med-card h4 { margin: 0 0 6px; font-size: .95rem; font-weight: 800; }
.med-meta { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.med-doses-label { font-size: .76rem; font-weight: 800; color: var(--muted); margin: 8px 0 4px; text-transform: uppercase; letter-spacing: .03em; }
.med-doses { display: flex; flex-wrap: wrap; gap: 6px; }
.med-dose {
  font: inherit; font-size: .86rem; font-weight: 800;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1.5px dashed var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); color: var(--primary);
}
.med-dose:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.med-dose.done { border-style: solid; border-color: #16a34a; background: rgba(34,197,94,.14); color: #15803d; cursor: default; }
:is([data-theme="dark"]) .med-dose.done { color: #86efac; }
.med-card--expired { opacity: .7; }
.med-expired-badge { font-size: .68rem; font-weight: 800; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }

/* ── Medikament-Modal: Einnahmezeiten-Box theme-fähig (Light + System-Dark) ─ */
.med-schedule {
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--primary) 35%, transparent);
}
.med-schedule-accent { color: var(--primary); }
.med-calc-preview {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════════
   THEME-FÄHIGE CONTAINER-HINTERGRÜNDE
   Ersetzt fest verdrahtete helle Hex-Backgrounds durch color-mix auf var(--card).
   Da --card/--text/--success/… in Light, explizitem Dark UND System-Dark je
   Theme umgeschaltet werden, sind diese Flächen automatisch in allen Modi lesbar.
   ════════════════════════════════════════════════════════════════════════════ */
.arzt-notes {
  background: color-mix(in srgb, var(--success) 13%, var(--card)) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.arzt-no-notes { color: var(--muted) !important; }

.vr-card { color: var(--text); }
.vr-card.confirmed { background: color-mix(in srgb, var(--success) 12%, var(--card)) !important; }
.vr-card.pending   { background: color-mix(in srgb, var(--warning) 14%, var(--card)) !important; }
.vr-card.rejected  { background: color-mix(in srgb, var(--danger) 12%, var(--card)) !important; }
.vr-dates { color: var(--text) !important; }

.familiengericht-hint {
  background: color-mix(in srgb, var(--danger) 10%, var(--card)) !important;
  color: var(--text) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
}

.apt-doc-box {
  background: color-mix(in srgb, var(--primary) 9%, var(--card)) !important;
  border: 1.5px solid color-mix(in srgb, var(--primary) 32%, transparent) !important;
  color: var(--text) !important;
}
.apt-doc-title { color: var(--primary) !important; }

.pickup-reminder-banner {
  background: color-mix(in srgb, var(--warning) 12%, var(--card)) !important;
  color: var(--text) !important;
}
.partner-entry { background: color-mix(in srgb, var(--color-purple, #9333ea) 12%, var(--card)) !important; }
.confirm-url { background: var(--surface-2) !important; color: var(--text) !important; }
.success-msg { background: color-mix(in srgb, var(--success) 14%, var(--card)) !important; color: var(--text) !important; }
.error-msg   { background: color-mix(in srgb, var(--danger) 14%, var(--card)) !important; color: var(--text) !important; }

/* Umgangszeiten-Monatstabelle: aktueller Monat + Hover theme-fähig */
.custody-month-table tr:hover td { background: color-mix(in srgb, var(--primary) 10%, transparent) !important; }
.custody-month-table tr.cm-current { background: color-mix(in srgb, var(--primary) 12%, transparent) !important; font-weight: 600; }

/* Ferien: Fairness-Zähler + Vorschlag-Status */
.vac-counter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 12px; margin-bottom: 12px;
  font-size: .85rem;
  background: color-mix(in srgb, var(--primary) 8%, var(--card));
  border: 1px solid var(--border);
}
.vac-counter-badge { font-weight: 800; font-size: .78rem; padding: 2px 10px; border-radius: 999px; }
.vac-counter.fair   .vac-counter-badge { background: color-mix(in srgb, var(--success) 20%, transparent); color: var(--success); }
.vac-counter.unfair .vac-counter-badge { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); }
.vac-counter-item { color: var(--text); }
.vac-suggest-pending { font-size: .76rem; font-weight: 700; color: var(--warning); }