/* App-Styles — ausgelagert aus index.html, damit die ~150 KB CSS einmal
gecacht werden statt mit jeder Navigation im no-store-HTML mitzukommen.
Wird mit ?v=mbNN gebustet (immutable-Caching). */
:root {
/* ── Brand palette ── */
--color-coral: #FF6B6B;
--color-coral-lt: #FFF0F0;
--color-coral-text: #C0392B; /* dunkleres Koralle für Text auf hellem Grund (WCAG-AA ≥4.9:1) */
--color-sky: #4D96FF;
--color-sky-lt: #EBF3FF;
--color-mint: #6BCB77;
--color-mint-lt: #EDFAEF;
--color-purple: #C77DFF;
--color-purple-lt: #F5EEFF;
--color-sun: #FFD93D;
--color-sun-lt: #FFF8D6;
--color-orange: #FF9A3C;
--color-orange-lt: #FFF4EA;
--color-teal: #00C9A7;
--color-teal-lt: #E0FBF6;
/* ── Legacy aliases (keep existing code working) ── */
--primary: #4D96FF;
--primary-dark: #2d7fe0;
--primary-light: #EBF3FF;
--accent: #FF6B6B;
--accent-light: #FFF0F0;
--accent2: #FFD93D;
--accent3: #6BCB77;
--success: #6BCB77;
--danger: #FF6B6B;
--warning: #FFD93D;
/* ── Surfaces ── */
--bg: #FFF9F0;
--card: #FFFFFF;
--surface-1: #FFFFFF;
--surface-2: #F5F0E8;
--surface-3: #EDE8E0;
--border: #F0E4D4;
--border-2: #E0D4C4;
/* ── Text ── */
--text: #2B1D0E;
--muted: #7A6046; /* WCAG-AA auf Creme-Grund 5.6:1 (vorher #8A6F52 grenzwertig 4.48:1) */
--link: #1860D0; /* Link-Blau, AA auf Weiß, Sky-lt und als Chip-Grund (≥5:1) */
--tip-label: #9A5B00; /* Label auf hellem Gelb, AA */
/* ── Navigation ── */
--nav-bg: #2B1D0E;
--nav-text: #B09880;
--nav-active: #FFFFFF;
/* ── Shadows (comic-style in light) ── */
--shadow-sm: 2px 2px 0 rgba(0,0,0,0.07);
--shadow: 3px 4px 0 rgba(0,0,0,0.09);
--shadow-md: 4px 5px 0 rgba(0,0,0,0.10);
--shadow-lg: 5px 7px 0 rgba(0,0,0,0.11);
--shadow-color: 0 4px 16px rgba(100,60,20,0.10);
/* ── Shape ── */
--radius: 18px;
--radius-sm: 12px;
--r-xs: 8px;
--r-sm: 12px;
--r: 18px;
--r-lg: 24px;
--r-xl: 32px;
/* ── Spacing ── */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
/* ── Typo-Skala (erzwingt einheitliche Schriftgrößen) ── */
--text-xs: .75rem;
--text-sm: .85rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--bottom-nav-h: 46px;
}
/* ── DARK MODE ─────────────────────────────────────────────────────── */
/* ══════════════════════ DARK MODE ══════════════════════════════════
Farben: neutral-dunkles Grau mit minimalem Lila-Hauch.
Angelehnt an Discord / Linear / Vercel Dark.
══════════════════════════════════════════════════════════════════ */
:is([data-theme="dark"]) {
--color-coral: #FF6B6B;
--color-coral-lt: #2A1212;
--color-coral-text: #FF9090; /* helleres Koralle für Text auf dunklem Grund */
--color-sky: #56CFFF;
--color-sky-lt: #081C2A;
--color-mint: #4ECCA3;
--color-mint-lt: #0A2219;
--color-purple: #C77DFF;
--color-purple-lt: #1A0D2A;
--color-sun: #FFD93D;
--color-sun-lt: #2A240A;
--color-orange: #FF9A3C;
--color-orange-lt: #231408;
--color-teal: #00E5C0;
--color-teal-lt: #001F1A;
--primary: #56CFFF;
--primary-dark: #38b5e8;
--primary-light: #081C2A;
--accent: #ff7575;
--accent-light: #2A1212;
--accent2: #FFD93D;
--accent3: #4ECCA3;
--success: #4ECCA3;
--danger: #FF6B6B;
--warning: #FFD93D;
--bg: #0F0F14;
--card: #16161E;
--surface-1: #16161E;
--surface-2: #1C1C26;
--surface-3: #22222E;
--border: #2A2A3A;
--border-2: #333348;
--text: #F0EEF8;
--muted: #9B98B8; /* WCAG-AA im Dark Mode (vorher #5E5C78, ~2.9:1) */
--link: #8FB8FF;
--tip-label: #FFCF6A;
--nav-bg: #0A0A0F;
--nav-text: #5E5C78;
--nav-active: #F0EEF8;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
--shadow: 0 4px 16px rgba(0,0,0,0.5);
--shadow-md: 0 6px 24px rgba(0,0,0,0.55);
--shadow-lg: 0 8px 28px rgba(0,0,0,0.6);
--shadow-color: 0 4px 20px rgba(0,0,0,0.4);
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) {
--color-coral: #FF6B6B; --color-coral-lt: #2A1212; --color-coral-text: #FF9090;
--color-sky: #56CFFF; --color-sky-lt: #081C2A;
--color-mint: #4ECCA3; --color-mint-lt: #0A2219;
--color-purple: #C77DFF; --color-purple-lt: #1A0D2A;
--color-sun: #FFD93D; --color-sun-lt: #2A240A;
--color-orange: #FF9A3C; --color-orange-lt: #231408;
--color-teal: #00E5C0; --color-teal-lt: #001F1A;
--primary: #56CFFF; --primary-dark: #38b5e8; --primary-light: #081C2A;
--accent: #ff7575; --accent-light: #2A1212;
--accent2: #FFD93D; --accent3: #4ECCA3;
--success: #4ECCA3; --danger: #FF6B6B; --warning: #FFD93D;
--bg: #0F0F14; --card: #16161E;
--surface-1: #16161E; --surface-2: #1C1C26; --surface-3: #22222E;
--border: #2A2A3A; --border-2: #333348;
--text: #F0EEF8; --muted: #9B98B8; --link: #8FB8FF; --tip-label: #FFCF6A;
--nav-bg: #0A0A0F; --nav-text: #5E5C78; --nav-active: #F0EEF8;
--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
--shadow: 0 4px 16px rgba(0,0,0,0.5);
--shadow-md: 0 6px 24px rgba(0,0,0,0.55);
--shadow-lg: 0 8px 28px rgba(0,0,0,0.6);
color-scheme: dark;
}
}
/* ── Kurzschreibweise: gilt für beide Aktivierungs-Wege ── */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --_dm:1; } }
[data-theme="dark"] { --_dm:1; }
/* Form-Elemente */
:is([data-theme="dark"]) input,
:is([data-theme="dark"]) textarea,
:is([data-theme="dark"]) select,
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) input,
:root:not([data-theme="light"]):not([data-theme="dark"]) textarea,
:root:not([data-theme="light"]):not([data-theme="dark"]) select } {
background: var(--card) !important; color: var(--text) !important;
border-color: var(--border) !important;
}
:is([data-theme="dark"]) input::placeholder,
:is([data-theme="dark"]) textarea::placeholder { color: var(--muted) !important; }
/* Chat */
:is([data-theme="dark"]) .chat-messages { background: var(--bg) !important; }
:is([data-theme="dark"]) .msg-row:not(.own) .msg-bubble {
background: var(--surface-2) !important; color: var(--text) !important;
border-color: var(--border) !important; box-shadow: 0 0 12px rgba(0,0,0,0.3);
}
/* Hardcodierte Hintergründe — neutral */
:is([data-theme="dark"]) [style*="background:#f8faff"],
:is([data-theme="dark"]) [style*="background: #f8faff"],
:is([data-theme="dark"]) [style*="background:#f9f8ff"],
:is([data-theme="dark"]) [style*="background: #f9f8ff"],
:is([data-theme="dark"]) [style*="background:#f5f3ff"],
:is([data-theme="dark"]) [style*="background: #f5f3ff"],
:is([data-theme="dark"]) [style*="background:#f1f5f9"],
:is([data-theme="dark"]) [style*="background:#f3f4f6"],
:is([data-theme="dark"]) [style*="background:#fff;"],
:is([data-theme="dark"]) [style*="background: #fff;"],
:is([data-theme="dark"]) [style*="background:#ffffff"],
:is([data-theme="dark"]) [style*="background: #ffffff"] {
background: var(--card) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}
/* Dark mode inline-style overrides → handled by _applyDarkModeColors() in JS */
/* Kalender & Spezial-Komponenten */
:is([data-theme="dark"]) .cal-cell { background: var(--surface-2) !important; border-color: var(--border) !important; }
/* doc-photo-empty nutzt jetzt var(--bg) → wirkt in explizitem UND System-Dark-Mode */
/* Dark-Mode: farbige Kalender-Hintergründe bleiben unterscheidbar (dunkle Tönung + heller Akzentrand) */
:is([data-theme="dark"]) .cal-cell.bg-my-custody { background: #2e2950 !important; }
:is([data-theme="dark"]) .cal-cell.bg-partner-custody { background: #3d2a17 !important; }
:is([data-theme="dark"]) .cal-cell.bg-my-vacation { background: #16341f !important; }
:is([data-theme="dark"]) .cal-cell.bg-partner-vacation { background: #3a3216 !important; }
:is([data-theme="dark"]) .cal-cell.bg-family-vacation { background: #3a3614 !important; }
:is([data-theme="dark"]) .cal-cell.bg-closure-me { background: #103040 !important; }
:is([data-theme="dark"]) .cal-cell.bg-closure-partner { background: #3a1818 !important; }
:is([data-theme="dark"]) .cal-cell.bg-closure-open { background: #26262e !important; }
:is([data-theme="dark"]) .vacation-countdown { /* gradient bleibt */ }
:is([data-theme="dark"]) .modal { background: var(--card) !important; }
:is([data-theme="dark"]) .modal-overlay { background: rgba(0,0,0,.75) !important; }
:is([data-theme="dark"]) .confirm-sheet { background: var(--card) !important; }
:is([data-theme="dark"]) .mehr-drawer { background: var(--surface-2) !important; }
:is([data-theme="dark"]) .mehr-drawer-content { background: var(--surface-2) !important; }
:is([data-theme="dark"]) .bottom-nav { background: var(--nav-bg) !important; border-top-color: var(--border) !important; }
:is([data-theme="dark"]) .top-bar { background: var(--nav-bg) !important; }
:is([data-theme="dark"]) .proto-tab { background: var(--bg) !important; color: var(--muted) !important; }
:is([data-theme="dark"]) .proto-tab.active { background: rgba(86,207,255,0.14) !important; color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(86,207,255,.45) !important; }
:is([data-theme="dark"]) .countdown-toggle { background: #1e1a38 !important; border-color: #35305a !important; color: #c4b5fd !important; }
:is([data-theme="dark"]) .info-box { background: #0d1a2a !important; border-color: #1a3050 !important; color: #93c5fd !important; }
:is([data-theme="dark"]) .history-filter-chip { background: var(--card) !important; color: var(--muted) !important; border-color: var(--border) !important; }
:is([data-theme="dark"]) .history-filter-chip.active { background: var(--primary) !important; color: #06283d !important; }
:is([data-theme="dark"]) .apt-item { background: var(--card) !important; }
:is([data-theme="dark"]) .apt-tile { background: var(--card) !important; }
:is([data-theme="dark"]) .child-card { background: var(--card) !important; }
:is([data-theme="dark"]) .settings-section { background: var(--card) !important; }
:is([data-theme="dark"]) .theme-opt { background: var(--bg) !important; border-color: var(--border) !important; color: var(--text) !important; }
:is([data-theme="dark"]) .theme-opt.active,
:is([data-theme="dark"]) .theme-opt:hover { background: var(--primary-light) !important; border-color: var(--primary) !important; }
:is([data-theme="dark"]) .btn-ghost { background: transparent !important; color: var(--primary) !important; border-color: var(--border) !important; }
:is([data-theme="dark"]) .nav-tab { color: var(--nav-text) !important; }
:is([data-theme="dark"]) .nav-tab.active { color: var(--nav-active) !important; }
:is([data-theme="dark"]) .mehr-item { background: var(--surface-3) !important; color: var(--text) !important; border: 1px solid var(--border); }
:is([data-theme="dark"]) .vrp-legend-swatch { border-color: var(--border) !important; }
:is([data-theme="dark"]) .custody-total-card { background: var(--card) !important; }
:is([data-theme="dark"]) .custody-month-table tr:hover { background: var(--primary-light) !important; }
/* Kein eigener Hintergrund hinter Überschriften — Header erben die Kartenfläche */
:is([data-theme="dark"]) .section-header { background: transparent !important; }
/* System-Dark dieselben Overrides */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) input,
:root:not([data-theme="light"]):not([data-theme="dark"]) textarea,
:root:not([data-theme="light"]):not([data-theme="dark"]) select {
background: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important;
}
:root:not([data-theme="light"]):not([data-theme="dark"]) .chat-messages { background: #111118 !important; }
:root:not([data-theme="light"]):not([data-theme="dark"]) .modal { background: var(--card) !important; }
:root:not([data-theme="light"]):not([data-theme="dark"]) .bottom-nav { background: var(--nav-bg) !important; }
:root:not([data-theme="light"]):not([data-theme="dark"]) .top-bar { background: var(--nav-bg) !important; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Accessibility: sichtbarer Tastatur-Fokus (vorher 0×) ── */
:focus-visible { outline: 3px solid var(--link, #1F6FE5); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible, .nav-tab:focus-visible, .bn-btn:focus-visible, .top-action:focus-visible,
.fab:focus-visible, .modal-close:focus-visible, .sub-tab-btn:focus-visible, .link-btn:focus-visible,
.tb-next:focus-visible { outline: 3px solid var(--link, #1F6FE5); outline-offset: 2px; }
/* Maus-Klick soll keinen Ring zeigen (nur Tastatur) */
:focus:not(:focus-visible) { outline: none; }
/* ── Accessibility: Bewegung reduzieren, wenn vom System gewünscht ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ── Utilities (ersetzen wiederholte Inline-Styles, vereinheitlichen Typo) ── */
.u-muted { color: var(--muted); }
.u-sm { font-size: var(--text-sm); }
.u-xs { font-size: var(--text-xs); }
.u-hint { color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }
.u-stack { display: flex; flex-direction: column; }
.u-stack-2 { gap: 8px; } .u-stack-3 { gap: 12px; } .u-stack-4 { gap: 16px; }
/* Tabellarische Ziffern: kein Layout-Springen bei wechselnden Zahlen */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* ── Inline-SVG-Icons (Lucide-Stil): erben Farbe/Theme, skalieren als Token ── */
.lic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.18em; flex-shrink: 0;
stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lic-sm { width: 16px; height: 16px; }
.lic-md { width: 20px; height: 20px; }
.lic-lg { width: 24px; height: 24px; }
html {
height: 100%; height: 100dvh;
overflow: hidden;
max-width: 100vw;
}
body {
font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
/* Sanfter Pastell-Verlauf in den Design-Farben — hell, aber deutlich sichtbar (nicht weiß) */
background-image:
radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255,107,107,0.16) 0%, transparent 55%),
radial-gradient(ellipse 80% 60% at 100% 0%, rgba(77,150,255,0.15) 0%, transparent 55%),
radial-gradient(ellipse 80% 60% at 100% 100%, rgba(199,125,255,0.15) 0%, transparent 55%),
radial-gradient(ellipse 80% 60% at 0% 100%, rgba(107,203,119,0.13) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,179,71,0.07) 0%, transparent 60%);
background-attachment: fixed;
color: var(--text);
height: 100%; height: 100dvh;
overflow: hidden;
max-width: 100vw;
-webkit-font-smoothing: antialiased;
}
:is([data-theme="dark"]) body {
background-image:
radial-gradient(ellipse at 10% 10%, rgba(255,107,107,0.06) 0%, transparent 45%),
radial-gradient(ellipse at 90% 15%, rgba(86,207,255,0.05) 0%, transparent 40%);
background-size: auto, auto;
}
/* ── AUTH SCREENS ── */
body.auth-mode { overflow-y: auto !important; height: auto !important; }
:is([data-theme="dark"]) .auth-dsgvo-box { background: #0c2a3a !important; border-color: #1e4a6a !important; }
:is([data-theme="dark"]) .auth-dsgvo-box * { color: #93c5fd !important; }
/* Mobile: wie bisher */
.auth-wrap { display: flex; align-items: flex-start; justify-content: center; height: 100dvh; max-height: 100dvh; padding: 0; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.auth-outer { width: 100%; max-width: 460px; display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
.auth-hero { background: linear-gradient(140deg, var(--color-coral) 0%, var(--color-orange) 35%, var(--color-purple) 75%, var(--color-sky) 100%); padding: 40px 32px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; flex-shrink: 0; }
.auth-hero-emoji { font-size: 3.6rem; margin-bottom: 12px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18)); }
.auth-hero-logo { width: 80px; height: 80px; margin-bottom: 14px; border-radius: 22px; box-shadow: 0 8px 32px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,255,255,0.18); }
.auth-hero h1 { font-size: 1.8rem; font-weight: 800; color: #fff; margin-bottom: 6px; letter-spacing: -.01em; font-family: 'Baloo 2', sans-serif; }
.auth-hero p { font-size: .95rem; color: rgba(255,255,255,.82); font-weight: 600; }
.auth-card { background: var(--surface-1, var(--card)); border-radius: 24px 24px 0 0; padding: 32px 28px 40px; flex: 1; box-shadow: 0 -6px 30px rgba(255,107,107,0.15); margin-top: -20px; position: relative; }
.auth-card h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 4px; color: var(--text); }
.auth-card p.sub { color: var(--muted); font-size: .88rem; margin-bottom: 22px; font-weight: 600; }
/* Dezente Meta-Links (FAQ · Datenschutz) unter „Jetzt registrieren" */
.auth-meta-links { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:18px; padding-top:16px; border-top:1px solid var(--border); }
.auth-meta-link { background:none; border:none; font-family:inherit; font-size:.82rem; font-weight:700; color:var(--muted); text-decoration:none; cursor:pointer; padding:6px 10px; border-radius:8px; transition:background .15s, color .15s; }
.auth-meta-link:hover { background:var(--bg); color:var(--text); }
.auth-meta-dot { color:var(--muted); opacity:.4; font-weight:700; }
/* Desktop: zweispaltig, zentriert */
@media (min-width: 800px) {
.auth-wrap {
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 32px 24px;
background: linear-gradient(140deg, var(--color-coral) 0%, var(--color-orange) 35%, var(--color-purple) 75%, var(--color-sky) 100%);
}
.auth-outer {
width: 100%;
max-width: 980px;
min-height: unset;
flex-direction: row;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 32px 100px rgba(45,43,85,0.4);
}
/* Hero — linke Spalte: feste Breite, zentriert */
.auth-hero {
flex: 0 0 340px;
padding: 56px 40px;
justify-content: center;
border-radius: 0;
min-height: 0;
}
.auth-hero-logo { width: 88px; height: 88px; margin-bottom: 18px; }
.auth-hero h1 { font-size: 2rem; }
.auth-hero p { font-size: .95rem; max-width: 220px; margin: 0 auto; }
/* Formular — rechte Spalte: scrollbar */
.auth-card {
flex: 1;
border-radius: 0;
margin-top: 0;
padding: 40px 44px;
overflow-y: auto;
max-height: 92vh;
}
.auth-card h2 { font-size: 1.4rem; }
}
/* ── Registrierungs-Wizard ── */
.reg-progress { display: flex; align-items: center; gap: 0; margin-bottom: 22px; }
.reg-progress-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
.reg-progress-step:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 50%; width: 100%; height: 2.5px; background: var(--border); z-index: 0; }
.reg-progress-step.done:not(:last-child)::after { background: var(--color-purple, #6C63FF); }
.reg-progress-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--border); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; z-index: 1; transition: all .25s; }
.reg-progress-step.active .reg-progress-dot { background: var(--color-purple, #6C63FF); color: #fff; box-shadow: 0 0 0 4px rgba(108,99,255,.18); }
.reg-progress-step.done .reg-progress-dot { background: var(--color-purple, #6C63FF); color: #fff; }
.reg-progress-label { font-size: .62rem; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.1; }
.reg-progress-step.active .reg-progress-label { color: var(--text); }
.reg-step { animation: regStepIn .3s cubic-bezier(.32,.72,0,1); }
@keyframes regStepIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.reg-step h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 4px; color: var(--text); }
.reg-step .reg-step-sub { font-size: .85rem; color: var(--muted); margin-bottom: 18px; font-weight: 600; }
.reg-nav { display: flex; gap: 10px; margin-top: 20px; }
.reg-nav .btn { flex: 1; }
.reg-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.reg-summary-row:last-child { border-bottom: none; }
.reg-summary-label { color: var(--muted); font-weight: 600; flex-shrink: 0; }
.reg-summary-val { font-weight: 700; text-align: right; word-break: break-word; }
.reg-summary-section { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--color-purple, #6C63FF); margin: 16px 0 4px; }
.ios-guide-step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.ios-guide-num { width: 26px; height: 26px; border-radius: 50%; background: var(--color-purple, #6C63FF); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; flex-shrink: 0; }
.ios-guide-text { font-size: .86rem; line-height: 1.5; color: #0c4a6e; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 5px; color: var(--text); letter-spacing: .01em; }
.form-group input, .form-group select, .form-group textarea {
width: 100%; padding: 11px 14px; border: 2px solid var(--border-2, var(--border)); border-radius: var(--r-sm, var(--radius-sm));
font-size: .9rem; font-family: 'Quicksand', sans-serif; font-weight: 600; transition: border-color .2s, box-shadow .2s;
background: var(--surface-2, var(--bg)); color: var(--text);
box-sizing: border-box;
}
/* Einheitliche Höhe für alle Input-Typen */
.form-group input[type="date"],
.form-group input[type="time"] {
height: 48px;
line-height: 1.2;
-webkit-appearance: none;
appearance: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline: none; border-color: var(--color-coral, var(--primary)); background: var(--surface-1, #fff);
box-shadow: 0 0 0 3px rgba(255,107,107,0.15);
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 22px; border: none; border-radius: var(--r-sm); font-size: .9rem; font-weight: 800; font-family: 'Quicksand', sans-serif; cursor: pointer; transition: all .18s; text-decoration: none; letter-spacing: .01em; }
.btn-primary { background: linear-gradient(135deg, #DE3F4A 0%, #D9760F 100%); color: #fff; box-shadow: 3px 4px 0 rgba(255,107,107,0.35); border: none; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 4px 5px 0 rgba(255,107,107,0.45); }
.btn-primary:active { transform: translateY(0); }
.btn-success { background: linear-gradient(135deg, #3FA85B 0%, #2E8F4D 100%); color: #fff; box-shadow: 0 4px 16px rgba(107,203,119,0.30); }
.btn-success:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-danger { background: linear-gradient(135deg, #D43A45 0%, #B5303A 100%); color: #fff; box-shadow: 0 4px 16px rgba(255,107,107,0.30); }
.btn-danger:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-ghost { background: var(--surface-2, var(--card)); color: var(--text); border: 2px solid var(--border-2, var(--border)); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: var(--surface-3, var(--border)); border-color: var(--border-2, var(--border)); }
.btn-sm { padding: 7px 14px; font-size: .78rem; border-radius: var(--r-xs); }
.btn-full { width: 100%; }
.link-btn { background: none; border: none; color: var(--link, var(--color-sky)); cursor: pointer; font-size: .9rem; font-weight: 700; font-family: 'Quicksand', sans-serif; text-decoration: none; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.error-msg { background: #fff0f0; border: 2px solid #ffcdd2; color: #c62828; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 14px; font-weight: 600; }
.success-msg { background: #f0fdf4; border: 2px solid #bbf7d0; color: #166534; padding: 10px 14px; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 14px; font-weight: 600; }
.info-box { background: var(--color-sky-lt, var(--primary-light)); border: 2px solid rgba(77,150,255,0.30); color: var(--link, var(--primary-dark)); padding: 14px; border-radius: var(--r-sm, var(--radius-sm)); font-size: .88rem; margin-bottom: 14px; line-height: 1.6; font-weight: 600; }
.confirm-url { word-break: break-all; font-family: monospace; font-size: .8rem; background: #f1f5f9; padding: 8px; border-radius: 6px; margin-top: 8px; }
/* ── APP LAYOUT ── */
/* position:fixed+inset:0 is the only fully reliable iOS PWA fullscreen scroll approach */
#app { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; flex-direction: column; overflow: hidden; z-index: 0; }
/* Modals außerhalb #app — Safari-kompatibel über z-index */
.modal-overlay, .confirm-overlay { z-index: 9999 !important; }
.top-bar {
background: linear-gradient(135deg, var(--color-coral) 0%, var(--color-orange) 50%, var(--color-purple) 100%);
color: #fff;
display: flex; align-items: center;
/* Push content below notch / Dynamic Island */
padding: env(safe-area-inset-top) 16px 0;
height: calc(58px + env(safe-area-inset-top));
gap: 12px; flex-shrink: 0;
box-shadow: 0 3px 0 rgba(0,0,0,0.12), 0 4px 20px rgba(255,107,107,0.2);
position: sticky; top: 0; z-index: 100;
}
.top-bar .logo { font-size: 1.05rem; font-weight: 900; color: #fff; margin-right: auto; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; }
.top-bar .logo img { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.top-bar .logo .logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.top-bar .logo .logo-text .logo-main { font-size: .95rem; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.top-bar .logo .logo-text .logo-sub { font-size: .68rem; font-weight: 700; background: linear-gradient(135deg, #a78bfa, #f0abfc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: .02em; }
/* '+' im Logo – nur sichtbar wenn getrennt-zusammen+ aktiv (body.is-plus) */
.top-bar .logo .logo-plus { display: none; margin-left: 1px; font-weight: 900; background: linear-gradient(135deg, #FFB23C, #f0abfc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 12px rgba(255,178,60,.45); }
body.is-plus .top-bar .logo .logo-plus { display: inline; }
/* Registrierung: Plan-Auswahl (kostenlos vs. +) */
.reg-plan-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.reg-plan-choice .rpc-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:13px 13px 12px; border:1.8px solid var(--border); border-radius:15px; background:var(--card); cursor:pointer; font-family:inherit; transition:border-color .15s, box-shadow .2s, transform .12s; }
.reg-plan-choice .rpc-card:hover { transform:translateY(-1px); }
.reg-plan-choice .rpc-card.selected { border-color:var(--color-orange,#FF9A3C); box-shadow:0 0 0 3px rgba(255,154,60,.18); background:linear-gradient(135deg, rgba(255,154,60,.08), rgba(199,125,255,.08)); }
.reg-plan-choice .rpc-ic { font-size:1.35rem; line-height:1; }
.reg-plan-choice .rpc-t { font-size:.92rem; font-weight:800; color:var(--text); }
.reg-plan-choice .rpc-t b { color:var(--color-orange,#FF9A3C); }
.reg-plan-choice .rpc-d { font-size:.74rem; color:var(--muted); line-height:1.35; }
.reg-plan-choice .rpc-badge { position:absolute; top:-9px; right:9px; font-size:.62rem; font-weight:800; color:#fff; background:linear-gradient(135deg,#FF9A3C,#c77dff); padding:2px 8px; border-radius:999px; box-shadow:0 2px 8px rgba(199,125,255,.35); }
@media (max-width:380px){ .reg-plan-choice { grid-template-columns:1fr; } }
.top-bar .user-info { font-size: .82rem; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); }
.top-bar .user-info img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2.5px solid rgba(255,255,255,.4); }
.top-bar .top-action .ta-icon { display: none; }
/* Abmelden-Button: klar erkennbares Logout-Icon + Label, immer sichtbar */
.top-bar .top-action.logout-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.top-bar .top-action.logout-btn .ta-icon { display: inline-flex; align-items: center; }
.top-bar .top-action.logout-btn .ta-text { display: inline; }
.avatar-placeholder { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--color-coral), var(--color-orange)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .82rem; flex-shrink: 0; border: 2px solid rgba(255,255,255,.3); font-family: 'Baloo 2', sans-serif; box-shadow: 2px 2px 0 rgba(255,107,107,0.3); }
/* Desktop nav tabs */
.nav-tabs { display: flex; flex-wrap: wrap; gap: 0; background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 100%); padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; overflow-x: auto; }
.nav-tabs::-webkit-scrollbar { height: 2px; }
.nav-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }
.nav-tab { padding: 10px 14px; color: var(--nav-text); cursor: pointer; font-size: .82rem; font-weight: 700; border-bottom: 3px solid transparent; white-space: nowrap; display: flex; align-items: center; gap: 5px; transition: all .15s; border-radius: 8px 8px 0 0; }
.nav-tab:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-tab.active { color: #fff; border-bottom-color: var(--color-sun, var(--accent2)); background: rgba(255,255,255,.12); font-family: 'Baloo 2', sans-serif; }
.badge { background: var(--color-coral, var(--accent)); color: #fff; border-radius: 999px; padding: 2px 7px; font-size: .70rem; font-weight: 800; font-family: 'Baloo 2', sans-serif; }
.main-content {
flex: 1;
min-height: 0; /* iOS: flex item darf schrumpfen */
overflow-y: scroll; /* scroll statt auto – zuverlässiger auf iOS PWA */
overflow-x: hidden; /* kein horizontales Scrollen */
-webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
overscroll-behavior-y: contain;
overscroll-behavior-x: none;
padding: 20px;
padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 20px);
}
.view { display: none; }
.view.active { display: block; overflow-x: hidden; max-width: 100%; }
#view-chat.active { display: flex !important; flex-direction: column; height: 100%; }
/* ── BOTTOM NAV (mobile only) ── */
/* NOT position:fixed — #app is already fixed;inset:0 so bottom-nav can live in the flex flow */
.bottom-nav {
display: none;
flex-shrink: 0;
height: calc(38px + env(safe-area-inset-bottom));
max-height: calc(38px + env(safe-area-inset-bottom));
padding-top: 2px;
padding-bottom: env(safe-area-inset-bottom);
background: var(--surface-1, #fff);
border-top: 1.5px solid var(--border);
box-shadow: 0 -1px 0 var(--border), 0 -4px 16px rgba(0,0,0,0.07);
z-index: 200;
justify-content: space-around;
align-items: center;
}
.bn-btn {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 1px; padding: 4px 2px 4px; cursor: pointer; border: none; background: none;
color: var(--muted); font-family: inherit; font-size: .68rem; font-weight: 700;
letter-spacing: .01em; text-transform: none; transition: color .18s; position: relative;
min-height: 0; line-height: 1.1;
}
.bn-btn .bn-icon { font-size: 1.35rem; line-height: 1; display: block; transform-origin: center center; }
.bn-btn.active { color: var(--color-coral-text, var(--primary)); font-weight: 800; }
.bn-btn .bn-badge { position: absolute; top: 5px; right: 50%; margin-right: -22px; background: #ef4444; color: #fff; border-radius: 999px; padding: 2px 6px; font-size: .62rem; font-weight: 800; border: 2px solid #fff; min-width: 18px; text-align: center; animation: badgePop .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes badgePop { from{transform:scale(0)} to{transform:scale(1)} }
/* ── MEHR DRAWER ── */
.mehr-overlay { display: none; position: fixed; inset: 0; background: rgba(45,43,85,0.45); z-index: 300; }
.mehr-overlay.open { display: block; }
.mehr-drawer {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 301;
background: var(--surface-1, var(--card)); border-radius: 24px 24px 0 0;
padding: 12px 16px calc(24px + env(safe-area-inset-bottom));
transform: translateY(100%); transition: transform .3s cubic-bezier(.32,.72,0,1);
box-shadow: 0 -4px 0 var(--border), 0 -8px 40px rgba(0,0,0,0.15);
max-height: 85vh; overflow-y: auto;
}
.mehr-drawer.open { transform: translateY(0); }
.mehr-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 16px; }
.mehr-title { font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; padding: 0 4px; }
.mehr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mehr-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px; padding: 14px 8px; background: var(--bg); border-radius: 14px;
cursor: pointer; border: none; font-family: inherit;
color: var(--text); font-size: .74rem; font-weight: 700; text-align: center;
transition: all .15s; letter-spacing: .01em; position: relative;
}
.mehr-item:hover, .mehr-item:active { background: var(--color-coral-lt, var(--primary-light)); color: var(--color-coral-text, var(--primary)); transform: scale(.97); }
.mehr-item.active { background: var(--color-coral-lt, var(--primary-light)); color: var(--color-coral-text, var(--primary)); font-weight: 800; }
.mehr-item .mi-icon { font-size: 1.6rem; line-height: 1; }
.mehr-item .mi-badge { position: absolute; top: 8px; right: 8px; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 5px; font-size: .60rem; font-weight: 800; }
@media (max-width: 767px) {
.nav-tabs { display: none !important; }
.bottom-nav { display: flex !important; }
.main-content { padding: 16px 14px 24px; }
.top-bar { height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 14px 0; }
}
@media (min-width: 768px) {
.bottom-nav, .mehr-overlay, .mehr-drawer { display: none !important; }
}
/* ── CARDS / SECTIONS ── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 10px; }
.section-header h2 { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.section-header h3 { font-size: 1.05rem; font-weight: 800; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* ── CHAT ── */
.chat-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; flex: 1; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f8faff; border-radius: var(--radius); border: 1px solid var(--border); }
.msg-row { display: flex; gap: 10px; }
.msg-row.own { flex-direction: row-reverse; }
.msg-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: .9rem; line-height: 1.5; }
.msg-row .msg-bubble { background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg-row.own .msg-bubble { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg-meta { font-size: .75rem; opacity: .7; margin-top: 4px; }
.msg-attachments { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.attach-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; cursor: pointer; }
.attach-link { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.08); padding: 4px 8px; border-radius: 6px; font-size: .8rem; text-decoration: none; color: inherit; }
.chat-input-area { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.chat-input-area textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 10px 16px; border: none; border-radius: 24px; font-size: .95rem; font-family: inherit; font-weight: 600; background: var(--surface-1, #fff); color: var(--text); box-shadow: 0 2px 12px rgba(77,150,255,0.12); outline: none; border: 1.5px solid var(--border-2, var(--border)); }
.chat-input-area textarea::placeholder { color: var(--muted); }
.chat-input-area textarea:focus { box-shadow: 0 0 0 3px rgba(108,99,255,0.18); border-color: var(--primary); }
.file-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.file-chip { background: #e2e8f0; padding: 4px 10px; border-radius: 999px; font-size: .8rem; display: flex; align-items: center; gap: 4px; }
.file-chip button { background: none; border: none; cursor: pointer; color: var(--danger); font-size: .9rem; padding: 0; line-height: 1; }
/* ── CALENDAR ── */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-header h2 { font-size: 1.2rem; }
.cal-nav { display: flex; gap: 8px; align-items: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day-name { text-align: center; font-size: .78rem; font-weight: 700; color: var(--muted); padding: 6px 0; }
.cal-cell { background: var(--card); border-radius: 8px; min-height: 80px; padding: 4px; border: 1px solid var(--border); position: relative; overflow: hidden; }
.cal-cell.other-month { background: #f8faff; opacity: .6; }
.cal-cell.today { border-color: var(--primary); border-width: 2px; }
.cal-cell.holiday-bg { background: #fff8f0; }
/* Custody/vacation background bands — klar farblich getrennt */
.cal-cell.bg-my-custody { background: #ede9fe; border-top: 4px solid #6d28d9; }
.cal-cell.bg-partner-custody { background: #fff1e6; border-top: 4px solid #ea580c; }
.cal-cell.bg-my-vacation { background: #dcfce7; border-top: 4px solid #16a34a; }
.cal-cell.bg-partner-vacation { background: #fef3c7; border-top: 4px solid #d97706; }
.cal-cell.bg-family-vacation { background: #fef9c3; border-top: 4px solid #ca8a04; }
.cal-cell.today.bg-my-custody { border-color: #6d28d9; border-width: 2px; border-top-width: 4px; }
.cal-cell.today.bg-partner-custody { border-color: #ea580c; border-width: 2px; border-top-width: 4px; }
.cal-cell.today.bg-my-vacation { border-color: #16a34a; border-width: 2px; border-top-width: 4px; }
.cal-cell.today.bg-family-vacation { border-color: #ca8a04; border-width: 2px; border-top-width: 4px; }
.cal-cell.bg-closure-me { background: #ecfeff; border-top: 3px solid #0891b2; }
.cal-cell.bg-closure-partner { background: #fef2f2; border-top: 3px solid #dc2626; }
.cal-cell.bg-closure-open { background: #f9fafb; border-top: 3px solid #9ca3af; }
.cal-cell.today.bg-closure-me { border-color: #0891b2; border-width: 2px; border-top-width: 3px; }
.cal-cell.today.bg-closure-partner { border-color: #dc2626; border-width: 2px; border-top-width: 3px; }
.cal-cell.today.bg-closure-open { border-color: #9ca3af; border-width: 2px; border-top-width: 3px; }
.cal-day-num { font-size: .78rem; font-weight: 600; color: var(--muted); }
.cal-cell.today .cal-day-num { background: var(--primary); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.cal-events { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.cal-event { font-size: .7rem; padding: 2px 5px; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event.appointment { background: #dbeafe; color: #1d4ed8; }
.cal-event.appointment.pending { background: #eff6ff; color: #93c5fd; border: 1px dashed #93c5fd; opacity: .7; }
.cal-event.vacation { background: #dcfce7; color: #16a34a; }
.cal-event.vacation.pending { opacity: .6; border: 1px dashed #86efac; }
.cal-event.family_vacation { background: #fef9c3; color: #854d0e; }
.cal-event.family_vacation.pending { opacity: .6; border: 1px dashed #fde047; }
.cal-event.custody { background: #ede9fe; color: #6d28d9; }
.cal-event.custody.pending { opacity: .6; border: 1px dashed #a78bfa; }
.cal-event.birthday { background: #fce7f3; color: #be185d; }
.cal-event.holiday { background: #fff3cd; color: #92400e; font-size: .65rem; }
.cal-event.school-holiday { background: #e0f2fe; color: #0369a1; font-size: .65rem; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-size: .78rem; }
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }
/* ── APPOINTMENTS / INBOX ── */
.apt-item { border: 2px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; background: var(--card); box-shadow: var(--shadow); transition: box-shadow .15s; }
.apt-item:hover { box-shadow: var(--shadow-md); }
.apt-item.pending { border-left: 5px solid var(--warning); }
.apt-item.confirmed { border-left: 5px solid var(--success); }
.apt-item.rejected { border-left: 5px solid var(--danger); opacity: .72; }
.apt-title { font-weight: 800; font-size: .98rem; }
.apt-meta { color: var(--muted); font-size: .82rem; margin-top: 4px; font-weight: 600; }
.apt-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.apt-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; }
.status-badge.pending { background: #fef9c3; color: #854d0e; }
.status-badge.confirmed { background: #dcfce7; color: #166534; }
.status-badge.rejected { background: #fee2e2; color: #991b1b; }
/* ── DASHBOARD TILES ── */
.dashboard-section { margin-bottom: 28px; }
.dashboard-section h2 { font-size: 1.1rem; margin-bottom: 14px; color: var(--text); }
/* Urlaubs-Countdown */
.vacation-countdown { background: linear-gradient(135deg,#0284c7 0%,#6366f1 60%,#7c3aed 100%); border-radius: 20px; padding: 18px 20px 18px 20px; margin-bottom: 24px; color: #fff; position: relative; overflow: hidden; }
.vacation-countdown h3 { font-size: .8rem; font-weight: 700; opacity: .85; margin: 0 0 8px; letter-spacing: .05em; text-transform: uppercase; }
.vacation-countdown .vc-title { font-size: 1rem; font-weight: 700; margin-bottom: 12px; line-height: 1.3; padding-right: 56px; }
.vacation-countdown .vc-units { display: flex; gap: 8px; flex-wrap: wrap; }
.vacation-countdown .vc-palm { position: absolute; right: 8px; bottom: 0; font-size: 3.4rem; line-height: 1; transform-origin: 50% 100%; animation: palmSway 2.8s ease-in-out infinite; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
@keyframes palmSway { 0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(9deg)} }
.vc-avatars { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.vc-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.85); object-fit: cover; background: rgba(255,255,255,.25); flex-shrink: 0; }
.vc-avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.85); background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.vc-heart { font-size: 1rem; opacity: .9; animation: vcHeartbeat .9s ease-in-out infinite; }
@keyframes vcHeartbeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }
.vc-with-label { font-size: .78rem; font-weight: 600; opacity: .9; margin-left: 6px; }
.vc-unit { background: rgba(255,255,255,.18); border-radius: 10px; padding: 8px 14px; text-align: center; min-width: 58px; }
.vc-unit .vc-num { font-size: 1.6rem; font-weight: 800; line-height: 1; display: block; font-variant-numeric: tabular-nums; }
.vc-unit .vc-label { font-size: .65rem; opacity: .8; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; display: block; }
.vc-past { background: linear-gradient(135deg,#059669,#0891b2); }
/* Checkbox-Toggle im Termindetail */
.countdown-toggle { display:flex; align-items:center; gap:8px; margin-top:10px; padding:10px; background:#f0f9ff; border:1px solid #bae6fd; border-radius:8px; cursor:pointer; font-size:.85rem; color:#0369a1; }
.countdown-toggle input[type=checkbox] { width:16px; height:16px; accent-color:#0369a1; cursor:pointer; }
.apt-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.apt-tile { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; cursor: pointer; transition: transform .18s, box-shadow .18s; border-top: 5px solid var(--primary); }
.apt-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.apt-tile:active { transform: translateY(0); }
.apt-tile.pending { border-top-color: var(--warning); }
.apt-tile.confirmed { border-top-color: var(--success); }
.apt-tile.vacation { border-top-color: var(--success); }
.apt-tile.family_vacation { border-top-color: var(--accent2); }
.apt-tile.custody { border-top-color: var(--primary); }
.apt-tile-icon { font-size: 1.7rem; margin-bottom: 8px; }
.apt-tile-title { font-weight: 800; font-size: .95rem; margin-bottom: 4px; }
.apt-tile-date { font-size: .8rem; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.apt-tile-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.apt-tile-notes { font-size: .78rem; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); white-space: pre-wrap; font-weight: 600; }
.apt-tile-log-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.log-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; }
.log-badge.done { background: #dcfce7; color: #166534; }
.log-badge.todo { background: #fee2e2; color: #991b1b; }
.log-badge.locked { background: #f3f4f6; color: #6b7280; }
/* ── CHILDREN ── */
.child-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.child-card h3 { font-size: 1rem; }
.child-card .child-meta { font-size: .82rem; color: var(--muted); }
/* ── DOCUMENT PHOTOS ── */
.doc-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; margin-top: 8px; }
.doc-photo-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.doc-photo-slot .doc-photo-img { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; transition: opacity .15s; }
.doc-photo-slot .doc-photo-img:hover { opacity: .85; }
.doc-photo-slot .doc-photo-empty { width: 120px; height: 80px; border: 2px dashed var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--muted); background: var(--bg); }
.doc-photo-slot > label { font-size: .72rem; text-align: center; cursor: pointer; color: var(--primary); font-weight: 600; line-height: 1.3; }
.doc-photo-slot > label input[type=file] { display: none; }
/* Custody stats widget */
.custody-totals { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.custody-total-card { background: var(--card); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); border-top: 4px solid #7c3aed; text-align: center; display: flex; flex-direction: column; }
.custody-total-card .ct-name { font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.custody-total-card .ct-days { font-size: 1.9rem; font-weight: 800; color: var(--text); line-height: 1; }
.custody-total-card .ct-pct { font-size: 1rem; font-weight: 600; color: #7c3aed; margin-top: 4px; }
.custody-total-card .ct-bar { height: 6px; border-radius: 99px; background: #ede9fe; margin-top: auto; margin-bottom: 0; overflow: hidden; position: relative; top: 8px; }
.custody-total-card .ct-bar-fill { height: 100%; border-radius: 99px; background: #7c3aed; }
.custody-month-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .85rem; }
.custody-month-table th { background: #7c3aed; color: #fff; padding: 8px 12px; text-align: left; font-weight: 600; }
.custody-month-table th:not(:first-child) { text-align: center; }
.custody-month-table td { padding: 7px 12px; border-bottom: 1px solid var(--border); }
.custody-month-table td:not(:first-child) { text-align: center; }
.custody-month-table tr:hover td { background: #f5f3ff; }
.custody-month-table .cm-export { font-size: .75rem; padding: 3px 8px; }
.custody-year-nav { display: flex; align-items: center; gap: 8px; }
/* Protokoll & Historie */
.history-filter-chip { padding: 5px 13px; min-height: 38px; display: inline-flex; align-items: center; border-radius: 20px; border: 1.5px solid var(--border); background: var(--card); color: var(--muted); font-size: .8rem; cursor: pointer; transition: all .15s; }
.history-filter-chip.active { background: var(--link); color: #fff; border-color: var(--link); }
.history-filter-chip:hover:not(.active) { border-color: var(--primary); color: var(--primary); }
.history-date-group { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.history-event { display: flex; gap: 12px; padding: 11px 14px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 7px; border-left: 3px solid transparent; }
.history-event.cat-gp { border-left-color: #7c3aed; }
.history-event.cat-pickup { border-left-color: #2563eb; }
.history-event.cat-ferien { border-left-color: #059669; }
.history-event.cat-close { border-left-color: #d97706; }
.history-event.cat-apt { border-left-color: #6b7280; }
.history-event.cat-kind { border-left-color: #db2777; }
.history-event.cat-rejected { border-left-color: #dc2626; }
.history-event-icon { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.history-event-body { flex: 1; min-width: 0; }
.history-event-action { font-weight: 700; font-size: .88rem; color: var(--text); }
.history-event-subject { font-size: .84rem; color: var(--text); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-event-meta { font-size: .75rem; color: var(--muted); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.history-cat-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: .7rem; font-weight: 600; color: #fff; }
.badge-gp { background: #7c3aed; }
.badge-pickup { background: #2563eb; }
.badge-ferien { background: #059669; }
.badge-close { background: #d97706; }
.badge-apt { background: #6b7280; }
.badge-kind { background: #db2777; }
.badge-rejected { background: #dc2626; }
/* Fotorückblicke */
.memoir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 18px; }
.memoir-card { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.memoir-card-header { padding: 14px 16px 10px; }
.memoir-card-title { font-weight: 700; font-size: 1rem; color: var(--text); }
.memoir-card-date { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.memoir-card-notes { font-size: .84rem; color: var(--text); margin-top: 6px; line-height: 1.5; }
.memoir-card-actions { display: flex; gap: 6px; justify-content: flex-end; padding: 0 12px 6px; }
/* Collage layouts */
.memoir-collage { display: grid; gap: 2px; cursor: pointer; }
.memoir-collage.c1 { grid-template-columns: 1fr; }
.memoir-collage.c2 { grid-template-columns: 1fr 1fr; }
.memoir-collage.c3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.memoir-collage.c3 .collage-img:first-child { grid-column: 1 / -1; }
.memoir-collage.c4 { grid-template-columns: 1fr 1fr; }
.memoir-collage.cmany { grid-template-columns: 1fr 1fr 1fr; }
.collage-img { position: relative; overflow: hidden; background: #1e1e2e; }
.collage-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.memoir-collage.c1 .collage-img { height: 220px; }
.memoir-collage.c2 .collage-img { height: 160px; }
.memoir-collage.c3 .collage-img { height: 120px; }
.memoir-collage.c3 .collage-img:first-child { height: 180px; }
.memoir-collage.c4 .collage-img { height: 130px; }
.memoir-collage.cmany .collage-img { height: 100px; }
.collage-img:hover img { transform: scale(1.04); }
.collage-comment-dot { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; background: #f59e0b; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #fff; font-weight: 700; }
.collage-more-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; font-weight: 700; }
/* Lightbox */
.memoir-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9000; display: flex; flex-direction: column; }
.memoir-lb-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #fff; flex-shrink: 0; }
.memoir-lb-title { font-weight: 700; font-size: 1rem; }
.memoir-lb-counter { font-size: .8rem; color: rgba(255,255,255,.6); margin-left: 10px; }
.memoir-lb-body { flex: 1; display: flex; overflow: hidden; }
.memoir-lb-img-wrap { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; padding: 8px; }
.memoir-lb-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.memoir-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: none; color: #fff; font-size: 1.8rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.memoir-lb-nav:hover { background: rgba(255,255,255,.3); }
.memoir-lb-nav.prev { left: 10px; }
.memoir-lb-nav.next { right: 10px; }
.memoir-lb-sidebar { width: 280px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.1); flex-shrink: 0; overflow: hidden; }
.memoir-lb-sidebar-title { padding: 12px 14px 8px; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .05em; }
/* Emoji reaction bar */
.memoir-emoji-bar { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.memoir-emoji-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 20px; padding: 3px 10px; font-size: 1rem; cursor: pointer; transition: all .15s; color: #fff; }
.memoir-emoji-btn:hover { background: rgba(255,255,255,.2); }
.memoir-emoji-btn.own { background: rgba(245,158,11,.25); border-color: #f59e0b; }
/* Comments */
.memoir-lb-comments { flex: 1; overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 8px; }
.memoir-comment { display: flex; gap: 8px; }
.memoir-comment-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.memoir-comment-body { flex: 1; }
.memoir-comment-author { font-size: .72rem; color: rgba(255,255,255,.5); margin-bottom: 2px; }
.memoir-comment-text { font-size: .85rem; color: #fff; line-height: 1.4; word-break: break-word; }
.memoir-comment-del { font-size: .7rem; color: rgba(255,255,255,.3); cursor: pointer; margin-left: 4px; }
.memoir-comment-del:hover { color: #f87171; }
/* Comment input */
.memoir-lb-input { padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 8px; flex-shrink: 0; }
.memoir-lb-input input { flex: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 7px 14px; color: #fff; font-size: .85rem; outline: none; }
.memoir-lb-input input::placeholder { color: rgba(255,255,255,.4); }
.memoir-lb-input button { background: var(--primary); border: none; color: #fff; border-radius: 50%; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; flex-shrink: 0; }
/* Upload zone */
.memoir-upload-zone { border: 2px dashed var(--border); border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; color: var(--muted); font-size: .85rem; transition: border-color .15s; }
.memoir-upload-zone:hover { border-color: var(--primary); color: var(--primary); }
/* Kontakte-Widget */
.contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.contact-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; border-left: 4px solid var(--primary); }
.contact-card.jugendamt { border-left-color: #0891b2; }
.contact-card.familiengericht { border-left-color: #7c3aed; }
.contact-card.anwalt { border-left-color: #16a34a; }
.contact-card.schule { border-left-color: #0369a1; }
.contact-card.kindergarten { border-left-color: #c026d3; }
.contact-card.ogs { border-left-color: #0f766e; }
.contact-card.kindertagespflege { border-left-color: #d97706; }
.contact-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.contact-card-title { font-weight: 700; font-size: .9rem; color: var(--text); }
.contact-card-type { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.contact-card-body { font-size: .83rem; color: var(--text); line-height: 1.6; }
.contact-card-body a { color: var(--primary); text-decoration: none; }
.contact-card-body a:hover { text-decoration: underline; }
a[href^="tel"], a[href^="mailto"] { color: var(--primary); text-decoration: none; }
a[href^="tel"]:hover, a[href^="mailto"]:hover { text-decoration: underline; }
.contact-empty { color: var(--muted); font-style: italic; font-size: .85rem; }
/* Kontakt-Edit-Modal */
.contact-type-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.contact-type-tab { padding: 5px 12px; border-radius: 99px; border: 1.5px solid var(--border); background: var(--card); font-size: .8rem; cursor: pointer; font-weight: 600; transition: all .15s; }
.contact-type-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* ── FILES ── */
.file-grid { display: block; }
.file-item { background: var(--card); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .15s; }
.file-item:hover { transform: translateY(-2px); }
.file-item img { width: 100%; height: 100px; object-fit: cover; }
.file-item .file-icon { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: var(--bg); }
.file-item .file-name { padding: 8px; font-size: .78rem; word-break: break-all; }
/* ── SETTINGS ── */
.settings-section { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 16px; }
.settings-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-profile-grid .settings-full { grid-column: 1 / -1; }
/* Datum-Inputs einheitlich wie Text-Inputs stylen */
input[type="date"] { width: 100%; -webkit-appearance: none; appearance: none; text-align: left; }
.settings-section h3 { font-size: 1rem; font-weight: 800; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--border); color: var(--text); }
.theme-opt { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:14px 8px; border-radius:14px; border:2.5px solid var(--border); background:var(--bg); cursor:pointer; transition:all .18s; color:var(--text); font-family:inherit; }
.theme-opt:hover { border-color:var(--primary); background:var(--primary-light); }
.theme-opt.active { border-color:var(--primary); background:var(--primary-light); box-shadow:0 0 0 3px rgba(108,99,255,0.18); }
/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(45,43,85,0.62); display: flex; align-items: flex-end; justify-content: center; z-index: 9999; padding: 0;
padding-top: max(env(safe-area-inset-top, 0px), 52px);
padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
.modal { background: var(--surface-1, var(--card)); border-radius: 24px 24px 0 0; width: 100%; max-width: 640px;
max-height: calc(100dvh - max(env(safe-area-inset-top, 0px), 52px) - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px));
display: flex; flex-direction: column; overflow: hidden;
box-shadow: 0 -8px 48px rgba(45,43,85,0.22);
max-width: min(640px, 100vw); box-sizing: border-box; }
.modal-header { padding: 16px 22px 0; display: flex; justify-content: space-between; align-items: center;
flex-shrink: 0; background: var(--card); z-index: 1; position: relative; }
.modal-header::before { content: ''; display: block; width: 40px; height: 4px; background: var(--border); border-radius: 2px; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); }
.modal-header h3 { font-size: 1.08rem; font-weight: 800; }
.modal-close { background: var(--bg); border: none; font-size: 1rem; cursor: pointer; color: var(--muted); padding: 6px; line-height: 1; border-radius: 50%; width: 40px; height: 40px; min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.modal-close:hover { background: var(--border); color: var(--text); }
.modal-body { padding: 16px 22px 20px; overflow-y: auto; flex: 1 1 auto; }
/* Modals without footer: extra bottom padding so last element isn't flush with edge */
.modal-body:last-child { padding-bottom: 28px; }
.modal-footer { flex-shrink: 0; display: flex; gap: 10px; padding: 12px 22px 16px;
border-top: 1.5px solid var(--border); background: var(--card); }
@media (min-width: 640px) {
.modal-overlay { align-items: center; padding: 20px; }
.modal { border-radius: var(--radius); max-height: min(90vh, 90dvh); }
.modal-header::before { display: none; }
}
.hidden { display: none !important; }
/* ── REISEVOLLMACHT PRINT ── */
@media print {
body > *:not(#print-area) { display: none !important; }
#print-area { display: block !important; }
}
#print-area { display: none; }
.rv-print { max-width: 700px; margin: 40px auto; font-family: Georgia, serif; }
.rv-print h1 { font-size: 1.4rem; text-align: center; margin-bottom: 4px; }
.rv-print .rv-subtitle { text-align: center; color: #555; font-size: .9rem; margin-bottom: 24px; }
.rv-print .rv-section { border: 1px solid #ccc; border-radius: 4px; padding: 14px; margin-bottom: 14px; }
.rv-print .rv-section h3 { font-size: .95rem; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 6px; }
.rv-print .rv-row { display: flex; gap: 20px; margin-bottom: 8px; }
.rv-print .rv-field { flex: 1; }
.rv-print .rv-field label { font-size: .78rem; color: #666; display: block; }
.rv-print .rv-field span { display: block; border-bottom: 1px solid #888; min-height: 22px; font-size: .9rem; padding: 2px 0; }
.rv-print .rv-sig { display: flex; gap: 40px; margin-top: 30px; }
.rv-print .rv-sig-line { flex: 1; border-top: 1px solid #333; padding-top: 4px; text-align: center; font-size: .8rem; color: #666; }
.rv-print .rv-adac { margin-top: 16px; font-size: .78rem; color: #555; text-align: center; }
/* ── LAWYER TAB ── */
.lawyer-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 12px; }
.lawyer-doc-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; border-left: 4px solid var(--primary); position: relative; }
.lawyer-doc-card.correspondence { border-left-color: #4f8ef7; }
.lawyer-doc-card.response { border-left-color: #16a34a; }
.lawyer-doc-card.invoice { border-left-color: #f0a500; }
.lawyer-doc-card.court { border-left-color: #e74c4c; }
.lawyer-doc-card.other { border-left-color: #718096; }
.lawyer-doc-type { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: 4px; }
.lawyer-doc-title { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.lawyer-doc-meta { font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.lawyer-doc-notes { font-size: .82rem; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 8px; margin-top: 8px; white-space: pre-wrap; }
.lawyer-doc-notes-edit { width: 100%; border: 1.5px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: .82rem; resize: vertical; min-height: 60px; font-family: inherit; }
/* ── VACATION RANGE PICKER ── */
.vrp-wrap { margin-top: 12px; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); }
.vrp-nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--card); border-bottom: 1px solid var(--border); }
.vrp-nav-btn { background: none; border: 1.5px solid var(--border); border-radius: 6px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; cursor: pointer; font-size: .9rem; display:flex;align-items:center;justify-content:center;color:var(--text); }
.vrp-nav-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.vrp-months { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.vrp-month { padding: 10px 12px; }
.vrp-month:first-child { border-right: 1px solid var(--border); }
.vrp-month-title { text-align: center; font-size: .82rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.vrp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.vrp-dow { text-align: center; font-size: .68rem; font-weight: 600; color: var(--muted); padding: 2px 0 4px; }
.vrp-day { text-align: center; font-size: .78rem; padding: 4px 2px; border-radius: 4px; cursor: pointer; position: relative; transition: background .1s; line-height: 1.2; min-height: 28px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; }
.vrp-day:hover:not(.vrp-other):not(.vrp-empty) { background: #dbeafe; }
.vrp-day.vrp-other { color: var(--muted); opacity: .4; cursor: default; pointer-events: none; }
.vrp-day.vrp-today .vrp-dn { font-weight: 800; color: var(--primary); }
.vrp-day.vrp-school { background: #fef3c7; }
.vrp-day.vrp-school:hover { background: #fde68a; }
.vrp-day.vrp-custody { background: #ede9fe; }
.vrp-day.vrp-custody.vrp-school { background: linear-gradient(135deg, #fef3c7 50%, #ede9fe 50%); }
.vrp-day.vrp-range { background: #bfdbfe !important; }
.vrp-day.vrp-range-start { background: var(--primary) !important; border-radius: 4px 0 0 4px; }
.vrp-day.vrp-range-start .vrp-dn { color: #fff !important; font-weight: 700; }
.vrp-day.vrp-range-end { background: var(--primary) !important; border-radius: 0 4px 4px 0; }
.vrp-day.vrp-range-end .vrp-dn { color: #fff !important; font-weight: 700; }
.vrp-day.vrp-range-start.vrp-range-end { border-radius: 4px; }
.vrp-dn { font-size: .8rem; line-height: 1; }
.vrp-dot { width: 4px; height: 4px; border-radius: 50%; }
.vrp-dot.vrp-dot-school { background: #d97706; }
.vrp-dot.vrp-dot-custody { background: #7c3aed; }
.vrp-legend { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 12px 8px; font-size: .72rem; color: var(--muted); border-top: 1px solid var(--border); background: var(--card); }
.vrp-legend-item { display: flex; align-items: center; gap: 4px; }
.vrp-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.vrp-hint { text-align: center; font-size: .75rem; color: var(--muted); padding: 4px 0 0; }
@media (max-width: 540px) {
.vrp-months { grid-template-columns: 1fr; }
.vrp-month:first-child { border-right: none; border-bottom: 1px solid var(--border); }
}
/* ── HOLIDAY / FERIENPLANUNG ── */
.vacation-block { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
.vacation-block-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.vacation-block-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.vacation-requests-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.vr-card { border-radius: 10px; padding: 14px; border: 1px solid var(--border); border-left: 4px solid var(--primary); }
.vr-card.confirmed { border-left-color: var(--success); background: #f0fdf4; }
.vr-card.rejected { border-left-color: var(--danger); background: #fef2f2; opacity: .8; }
.vr-card.pending { border-left-color: var(--warning); background: #fffbeb; }
.vr-dates { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.vr-meta { font-size: .8rem; color: var(--muted); line-height: 1.6; margin-bottom: 8px; }
.familiengericht-hint { background: #fef2f2; border: 1.5px solid #fecaca; border-radius: 8px; padding: 12px 14px; font-size: .82rem; color: #b91c1c; line-height: 1.6; margin-top: 10px; }
.closure-day-item { background: var(--card); border-radius: 10px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--border); border-left: 4px solid #0891b2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.closure-day-item.confirmed { border-left-color: var(--success); }
.closure-day-item.rejected { border-left-color: var(--danger); opacity: .75; }
.closure-day-banner { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1.5px solid #93c5fd; border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.closure-banner-title { font-weight: 700; font-size: .95rem; color: #1d4ed8; margin-bottom: 4px; }
.closure-banner-sub { font-size: .85rem; color: #2563eb; margin-bottom: 10px; }
/* ── HEALTH TAB ── */
.vaccination-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; border-left: 4px solid #0891b2; }
.vaccination-card.delete-requested { border-left-color: var(--danger); }
.med-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; border-left: 4px solid #7c3aed; }
.med-card h4 { font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
.med-card .med-meta { font-size: .8rem; color: var(--muted); margin-bottom: 8px; line-height: 1.6; }
.med-tag { background: #ede9fe; color: #6d28d9; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; display: inline-block; margin: 2px; }
.medlog-item { background: var(--card); border-radius: 10px; padding: 14px; margin-bottom: 10px; border-left: 4px solid var(--success); border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.medlog-item.unconfirmed { border-left-color: var(--warning); }
.medlog-left { flex: 1; }
.medlog-name { font-weight: 700; font-size: .95rem; }
.medlog-meta { font-size: .8rem; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.health-child-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.health-child-card h4 { font-size: .95rem; margin-bottom: 8px; }
.allergy-entry { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 12px; border-left: 4px solid #16a34a; }
.allergy-entry.shared { border-left-color: #0891b2; }
.allergy-entry.partner-entry { border-left-color: #9333ea; background: #faf5ff; }
.allergy-photo { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
/* ── Allergie/Unverträglichkeit Chips ── */
.allergy-overview-card { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px; margin-bottom:12px; }
.allergy-overview-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.allergy-overview-card-name { font-weight:700; font-size:.95rem; display:flex; align-items:center; gap:6px; }
.aoc-empty { font-size:.82rem; color:var(--muted); font-style:italic; }
.aoc-section { margin-bottom:10px; }
.aoc-section:last-child { margin-bottom:0; }
.aoc-section-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; }
.aoc-chips { display:flex; flex-wrap:wrap; gap:5px; }
.a-chip { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600; white-space:nowrap; }
.a-chip.leicht { background:#fef9c3; color:#92400e; border:1px solid #fde68a; }
.a-chip.schwer { background:#fed7aa; color:#9a3412; border:1px solid #fdba74; }
.a-chip.anaphylaxie { background:#fee2e2; color:#991b1b; border:1.5px solid #f87171; }
.a-chip .a-chip-remove { cursor:pointer; opacity:.6; font-size:.85rem; line-height:1; margin-left:2px; }
.a-chip .a-chip-remove:hover { opacity:1; }
/* Modal chip input */
.chip-input-wrap { display:flex; flex-wrap:wrap; gap:5px; align-items:center; padding:6px 8px; border:1.5px solid var(--border); border-radius:8px; min-height:42px; cursor:text; background:var(--card); }
.chip-input-wrap:focus-within { border-color:var(--primary); }
.chip-input-wrap input { border:none; outline:none; background:transparent; font-size:.88rem; min-width:80px; flex:1; padding:2px 4px; color:var(--text); }
.chip-sev-select { padding:3px 8px; border:1.5px solid var(--border); border-radius:6px; font-size:.8rem; background:var(--card); color:var(--text); }
.arzt-item { background: var(--card); border-radius: 10px; padding: 14px; margin-bottom: 10px; border-left: 4px solid #e11d48; border: 1px solid var(--border); }
.arzt-item .arzt-notes { background: #f0fdf4; border-radius: 6px; padding: 10px 12px; margin-top: 8px; font-size: .85rem; color: #15803d; white-space: pre-wrap; }
.arzt-item .arzt-no-notes { font-size: .82rem; color: var(--muted); font-style: italic; margin-top: 6px; }
.medlog-item { border-left-color: var(--success); }
/* ── GRANDPARENTS ── */
.gp-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; border-left: 4px solid #f59e0b; }
.gp-auth-item { background: var(--card); border-radius: 10px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--border); }
.gp-auth-item.active { border-left: 4px solid var(--success); }
.gp-auth-item.pending { border-left: 4px solid var(--warning); }
.gp-auth-item.expired { border-left: 4px solid var(--muted); opacity: .8; }
.gp-auth-item.revoked { border-left: 4px solid var(--danger); opacity: .85; }
.gp-auth-status { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.75rem; font-weight:700; }
.gp-auth-status.active { background:#dcfce7; color:#15803d; }
.gp-auth-status.pending { background:#fef3c7; color:#b45309; }
.gp-auth-status.expired { background:#f1f5f9; color:#64748b; }
.gp-auth-status.revoked { background:#fee2e2; color:#b91c1c; }
.gp-approval-dots { display:flex; gap:8px; align-items:center; margin-top:6px; }
.gp-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; }
.gp-dot.approved { background:#dcfce7; color:#15803d; }
.gp-dot.pending { background:#fef3c7; color:#b45309; }
.expiry-banner { background: linear-gradient(135deg,#fffbeb,#fef3c7); border:1.5px solid #fbbf24; border-radius:var(--radius); padding:14px 16px; margin-bottom:12px; }
.expiry-banner-title { font-weight:700; color:#b45309; margin-bottom:4px; }
/* ── PICKUP AUTHORIZATIONS ── */
.pickup-section { margin-top: 28px; }
.pickup-section h3 { font-size: 1rem; margin-bottom: 12px; }
.pickup-auth-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.pickup-auth-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; border-left: 4px solid #0891b2; }
.pickup-auth-card.confirmed { border-left-color: var(--success); }
.pickup-auth-card.rejected { border-left-color: var(--danger); opacity: .75; }
.pickup-auth-card.pending { border-left-color: var(--warning); }
.pickup-auth-name { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.pickup-auth-meta { font-size: .8rem; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.pickup-reminder-banner { background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.pickup-reminder-banner .pr-icon { font-size: 1.5rem; flex-shrink: 0; }
.pickup-reminder-banner .pr-text { flex: 1; font-size: .88rem; color: #92400e; line-height: 1.5; }
.pickup-reminder-banner .pr-text strong { display: block; margin-bottom: 2px; font-size: .92rem; }
/* ── GEMEINSAMES TAGEBUCH ── */
.kdiary-nav { display: flex; align-items: center; gap: 6px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; margin-bottom: 20px; }
.kdiary-nav-center { flex: 1; display: flex; gap: 8px; justify-content: center; align-items: center; }
.kdiary-nav-center select { border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; font-size: .9rem; background: var(--bg); color: var(--text); cursor: pointer; }
.kdiary-nav-arrow { font-size: 1.3rem; font-weight: 700; padding: 4px 12px !important; }
.kdiary-month-header { font-weight: 700; font-size: 1rem; color: var(--muted); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--border); }
/* ── KINDER-TAGEBUCH & ROUTINEN (Kinder-Tab) ── */
.kinder-section { margin-top: 32px; }
.kinder-section-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.kdiary-entry { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; border-left: 4px solid #0891b2; }
.kdiary-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.kdiary-date { font-weight: 700; font-size: .9rem; color: #0891b2; }
.kdiary-author { font-size: .78rem; color: var(--muted); }
.kdiary-title { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.kdiary-content { font-size: .88rem; line-height: 1.6; white-space: pre-wrap; color: var(--text); }
.kdiary-photo-strip { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.kdiary-photo-strip img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: border-color .2s; }
.kdiary-photo-strip img:hover { border-color: #0891b2; }
.kdiary-photo-strip .add-photo-btn { width: 80px; height: 80px; border-radius: 8px; border: 2px dashed #cbd5e1; background: #f8fafc; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; color: var(--muted); transition: border-color .2s; }
.kdiary-photo-strip .add-photo-btn:hover { border-color: #0891b2; color: #0891b2; }
.routine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.routine-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; border-left: 4px solid #6366f1; }
.routine-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.routine-card-title { font-weight: 700; font-size: .98rem; }
.routine-type-badge { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #ede9fe; color: #6d28d9; }
.routine-steps { list-style: none; padding: 0; margin: 0; }
.routine-steps li { font-size: .85rem; color: var(--text); padding: 4px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.routine-steps li:last-child { border-bottom: none; }
.routine-steps li::before { content: '✓'; color: #6366f1; font-weight: 700; flex-shrink: 0; }
.routine-author { font-size: .75rem; color: var(--muted); margin-top: 8px; }
.routine-color-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border-color .15s; }
.routine-color-swatch.selected { border-color: #1e293b; }
.routine-step-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: .87rem; }
.routine-step-item:last-child { border-bottom: none; }
.routine-step-drag { color: var(--muted); cursor: grab; }
.routine-step-del { color: var(--danger); cursor: pointer; font-size: .9rem; margin-left: auto; background: none; border: none; padding: 2px 6px; }
/* ── DIARY TAB ── */
.diary-entry { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 14px; border-left: 4px solid #7c3aed; }
.diary-entry-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.diary-date { font-weight: 700; font-size: 1rem; color: #7c3aed; }
.diary-time { font-size: .8rem; color: var(--muted); margin-left: 8px; }
.diary-author { font-size: .78rem; color: var(--muted); }
.diary-content { font-size: .9rem; line-height: 1.6; white-space: pre-wrap; }
.diary-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.diary-tag { background: #ede9fe; color: #6d28d9; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
/* ── CALENDAR COURT ── */
.cal-event.court { background: #fee2e2; color: #991b1b; }
.cal-event.court.pending { opacity: .7; border: 1px dashed #fca5a5; }
.cal-event.arzttermin { background: #fce7f3; color: #9d174d; }
.cal-event.kindkrank { background: #ffe4e6; color: #be123c; }
.cal-event.kindergeburtstag { background: #fef9c3; color: #a16207; }
.cal-event.kinderverabredung { background: #ffedd5; color: #c2410c; }
.cal-event.schultermin { background: #e0f2fe; color: #075985; }
.cal-event.elternsprechtag { background: #dbeafe; color: #1d4ed8; }
.cal-event.entwicklungsgespraech { background: #dcfce7; color: #166534; }
.cal-event.kindergarteneingewoehnung { background: #ede9fe; color: #6d28d9; }
.cal-event.ogs { background: #ccfbf1; color: #0f766e; }
.cal-event.sonstiges { background: #f1f5f9; color: #475569; }
/* ── CONTACT CARD AUTO ── */
.contact-auto-badge { font-size: .7rem; background: #d1fae5; color: #065f46; padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
/* ── RESPONSIVE ── */
@media (max-width: 600px) {
.cal-cell { min-height: 56px; }
.cal-event { display: none; }
.main-content { padding: 12px; }
.modal { max-width: 100%; }
.top-bar .user-info span { display: none; }
/* ── Top-Bar: Logo IMMER voll lesbar, nichts wird gekürzt oder überlappt ── */
.top-bar { gap: 6px; }
/* Avatar auf dem Handy ausblenden → schafft Platz, damit "getrennt-zusammen" nie gekürzt wird */
.top-bar .user-info { display: none; }
.top-bar .logo { min-width: 0; gap: 7px; flex-shrink: 0; } /* Logo wird nie gestaucht */
.top-bar .logo img { width: 32px; height: 32px; }
.top-bar .logo .logo-text { min-width: 0; }
/* Schrift skaliert mit der Breite → voll lesbar, NIE abgeschnitten (kein ellipsis) */
.top-bar .logo .logo-text .logo-main { font-size: clamp(.72rem, 3.5vw, .95rem); white-space: nowrap; }
.top-bar .logo .logo-text .logo-sub { font-size: clamp(.54rem, 2.7vw, .68rem); white-space: nowrap; }
.top-bar .top-action { padding: 0; width: 34px; height: 34px; min-width: 34px; justify-content: center; flex-shrink: 0; }
.top-bar .top-action .ta-text { display: none; }
.top-bar .top-action .ta-icon { display: inline; font-size: 1.05rem; }
/* Abmelden: Icon bleibt, Text deutlich kleiner – aber noch lesbar */
.top-bar .top-action.logout-btn { width: auto; min-width: 0; padding: 0 8px; gap: 4px; }
.top-bar .top-action.logout-btn .ta-text { display: inline; font-size: .6rem; line-height: 1.05; font-weight: 800; white-space: nowrap; }
}
/* Sehr schmale Geräte (≤360px): Logo bleibt voll lesbar, Rest schrumpft */
@media (max-width: 360px) {
.top-bar { gap: 4px; }
.top-bar .logo .logo-text .logo-main { font-size: clamp(.64rem, 3.4vw, .8rem); }
.top-bar .top-action { width: 32px; min-width: 32px; height: 32px; }
.top-bar .top-action.logout-btn { padding: 0 6px; }
.top-bar .top-action.logout-btn .ta-text { font-size: .55rem; }
}
/* ── MOBILE RESPONSIVE OVERRIDES ── */
@media (max-width: 767px) {
.auth-outer { max-width: 100%; }
.auth-hero { padding: 32px 20px 40px; }
.auth-card { padding: 24px 18px 36px; }
/* Calendar: smaller cells on phones */
.cal-cell { min-height: 56px; padding: 3px; }
.cal-event { font-size: .60rem; padding: 1px 3px; }
.cal-day-num { font-size: .72rem; }
.cal-grid { gap: 1px; }
/* Chat: fill main-content height (top-bar + bottom-nav handled by flex flow) */
.chat-wrap { flex: 1; min-height: 0; height: 100%; }
.chat-input-area textarea { min-height: 42px; font-size: .92rem; }
/* Cards: edge-to-edge on phones */
.apt-tiles { grid-template-columns: 1fr; }
.card-grid { grid-template-columns: 1fr; }
.contacts-grid { grid-template-columns: 1fr; }
.routine-grid { grid-template-columns: 1fr; }
.memoir-grid { grid-template-columns: 1fr; }
.lawyer-doc-grid { grid-template-columns: 1fr; }
/* Forms: larger touch targets */
.form-group input, .form-group select, .form-group textarea { padding: 13px 14px; font-size: 1rem; }
.form-group input[type="date"],
.form-group input[type="time"] { height: 50px; padding: 13px 14px; }
.btn { padding: 12px 18px; font-size: .92rem; }
.btn-sm { padding: 8px 13px; font-size: .80rem; }
/* Vacation range picker: single column on narrow screens */
.vrp-months { grid-template-columns: 1fr; }
.vrp-month:first-child { border-right: none; border-bottom: 1px solid var(--border); }
/* Section headers stack nicely */
.section-header { flex-wrap: wrap; gap: 8px; }
.settings-section { padding: 16px 14px; }
/* Alle inline 2-Spalten-Grids auf 1 Spalte auf Mobil */
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* 3-Spalten auf 1 Spalte */
[style*="grid-template-columns:1fr 1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
/* Dokumentations-Datum+Uhrzeit: immer 2-spaltig */
.doc-date-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px;
margin-bottom: 8px;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
.doc-date-row > * { min-width: 0; overflow: hidden; }
/* Dokumentations-Zusatzfelder: immer 2-spaltig */
.doc-extra-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px;
margin-bottom: 14px;
min-width: 0;
width: 100%;
box-sizing: border-box;
}
.doc-extra-row > * { min-width: 0; overflow: hidden; }
/* Modal-Body: kein Overflow */
.modal-body { overflow-x: hidden !important; }
.modal-overlay { overflow-x: hidden !important; }
/* Straße + Hausnr: Straße breit, Nr. schmal */
[style*="grid-template-columns:3fr 1fr"],
[style*="grid-template-columns: 3fr 1fr"] {
grid-template-columns: 3fr 1fr !important;
}
/* PLZ + Ort: PLZ schmal (80px), Ort füllt Rest */
[style*="grid-template-columns:1fr 3fr"],
[style*="grid-template-columns: 1fr 3fr"] {
grid-template-columns: 80px 1fr !important;
}
/* Profil-Grid auf Mobil: 2 gleichbreite Spalten */
.settings-profile-grid {
display: grid;
grid-template-columns: 1fr 1fr !important;
gap: 10px;
}
.settings-profile-grid .settings-full { grid-column: 1 / -1; }
/* Custody table scrolls horizontally */
/* Custody table: kompakt für Hochformat */
.custody-month-table { min-width: 0; }
.custody-month-table th,
.custody-month-table td { padding: 5px 6px; font-size: .72rem; }
.custody-month-table th:first-child,
.custody-month-table td:first-child { padding-left: 8px; min-width: 72px; font-size: .72rem; }
/* Overflow-Wrapper für scroll */
div[style*="overflow-x:auto"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.custody-totals { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.custody-total-card { padding: 10px 8px; }
.custody-totals { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
/* Memoir lightbox sidebar hidden on mobile */
.memoir-lb-sidebar { display: none; }
/* History filter chips wrap */
.history-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
/* Dashboard vacation countdown */
.vc-units { gap: 6px; }
.vc-unit { min-width: 48px; padding: 6px 10px; }
.vc-unit .vc-num { font-size: 1.3rem; }
}
/* ── CHILD-CARD enhancements ── */
.child-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 8px; border-top: 4px solid var(--primary); transition: box-shadow .15s; }
.child-card:hover { box-shadow: var(--shadow-md); }
.child-card h3 { font-size: 1rem; font-weight: 800; }
.child-card .child-meta { font-size: .83rem; color: var(--muted); font-weight: 600; line-height: 1.6; }
/* ── PROTOKOLL / sub-tabs ── */
.proto-tabs { display: flex; gap: 4px; background: var(--surface-2, var(--bg)); border-radius: var(--r-sm); padding: 4px; margin-bottom: 20px; border: 2px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.proto-tabs::-webkit-scrollbar { display: none; }
.proto-tab { flex: 1; padding: 8px 4px; border: none; background: transparent; border-radius: 10px; font-family: inherit; font-size: .75rem; font-weight: 800; color: var(--muted); cursor: pointer; transition: all .18s; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.2; }
.proto-tab.active { background: var(--card); color: var(--primary); box-shadow: var(--shadow); }
/* ── HISTORY filter chips ── */
.history-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
/* ── DASHBOARD greeting card ── */
/* ── Ampel: offene Bestätigungen (du + Ex-Partner) – gemeinsamer Badge ── */
.ampel-combined { display:flex; align-items:stretch; gap:3px; margin-bottom:14px; padding:6px; border-radius:16px; border:2px solid var(--border); background:var(--card); box-shadow:var(--shadow-sm); }
.ampel-person { flex:1; min-width:0; display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:11px; }
.ampel-person[role="button"] { cursor:pointer; transition:background .15s, transform .12s; }
.ampel-person[role="button"]:hover { background:var(--bg); transform:translateY(-1px); }
.ampel-link { display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.05rem; opacity:.55; padding:0 1px; }
.ampel-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.ampel-txt { min-width:0; }
.ampel-title { font-weight:800; font-size:.84rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ampel-sub { font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ampel-green .ampel-dot { background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18); }
.ampel-orange .ampel-dot { background:#f59e0b; box-shadow:0 0 0 4px rgba(245,158,11,.18); }
.ampel-red .ampel-dot { background:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.20); animation:ampelPulse 1.4s ease-in-out infinite; }
@keyframes ampelPulse { 0%,100%{opacity:1} 50%{opacity:.5} }
/* Mobil: bewusst NEBENEINANDER bleiben (nicht stapeln), nur kompakter */
@media (max-width:600px){
.ampel-combined{ gap:2px; padding:5px; }
.ampel-person{ gap:7px; padding:6px 7px; }
.ampel-dot{ width:12px; height:12px; }
.ampel-title{ font-size:.78rem; }
.ampel-sub{ font-size:.66rem; white-space:normal; line-height:1.2; }
.ampel-link{ font-size:.9rem; padding:0; }
}
.dash-greeting { background: linear-gradient(135deg, #6C63FF 0%, #9C8FFF 60%, #FF9A8B 100%); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px; color: #fff; position: relative; overflow: hidden; }
/* greeting bg-star handled by .dash-greeting-bg-star span */
.dash-greeting h2 { font-size: 1.3rem; font-weight: 900; margin-bottom: 2px; }
.dash-greeting p { font-size: .88rem; opacity: .85; font-weight: 600; }
/* ── DASHBOARD quick-action shortcuts ── */
.dash-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.shortcut-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px 12px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow); cursor: pointer; border: none; font-family: inherit; transition: transform .16s, box-shadow .16s; text-align: center; }
.shortcut-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.shortcut-tile:active { transform: scale(.95); }
.shortcut-tile .st-icon { font-size: 1.6rem; line-height: 1; }
.shortcut-tile .st-label { font-size: .70rem; font-weight: 800; color: var(--text); letter-spacing: .01em; white-space: nowrap; }
@media (max-width: 400px) { .dash-shortcuts { grid-template-columns: repeat(4, 1fr); gap: 7px; } .shortcut-tile { padding: 11px 4px 9px; } .shortcut-tile .st-icon { font-size: 1.4rem; } }
/* ── VIEW TRANSITIONS ── */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.view.active { animation: viewIn .22s ease; }
/* ── FAB (Floating Action Button) ── */
.fab { display: none; position: fixed; right: 18px; bottom: calc(var(--bottom-nav-h) + 14px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; font-size: 1.9rem; border: none; cursor: pointer; box-shadow: 0 6px 24px rgba(108,99,255,0.45); z-index: 150; align-items: center; justify-content: center; transition: transform .18s, box-shadow .18s; font-family: inherit; }
.fab:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(108,99,255,0.55); }
.fab:active { transform: scale(0.92); }
/* FAB komplett deaktiviert */
.fab { display: none !important; }
/* ── EMPTY STATES ── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; }
.empty-state .es-icon { font-size: 3.5rem; margin-bottom: 14px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.08)); }
.empty-state h3 { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.empty-state p { font-size: .88rem; color: var(--muted); font-weight: 600; line-height: 1.5; max-width: 260px; }
.empty-state .es-btn { margin-top: 18px; }
/* ── TOAST NOTIFICATIONS ── */
#toast-container { position: fixed; top: max(env(safe-area-inset-top, 0px) + 12px, 60px); left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast { background: #1e1b4b; color: #fff; padding: 13px 18px; border-radius: 14px; font-size: .9rem; font-weight: 700; font-family: inherit; box-shadow: 0 8px 32px rgba(30,27,75,0.28); display: flex; align-items: center; gap: 10px; pointer-events: all; width: 100%; animation: toastIn .25s cubic-bezier(.32,.72,0,1); max-width: 420px; }
.toast.toast-success { background: linear-gradient(135deg, #166534, #15803d); }
.toast.toast-error { background: linear-gradient(135deg, #991b1b, #b91c1c); }
.toast.toast-info { background: linear-gradient(135deg, #1e40af, #2563eb); }
.toast.toast-warning { background: linear-gradient(135deg, #92400e, #b45309); }
.toast .toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.toast .toast-msg { flex: 1; line-height: 1.4; }
.toast .toast-close { background: none; border: none; color: rgba(255,255,255,.6); font-size: 1rem; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; font-weight: 700; }
.toast.toast-out { animation: toastOut .25s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(.94); } }
/* ── CUSTOM CONFIRM DIALOG ── */
.confirm-overlay { position: fixed; inset: 0; background: rgba(45,43,85,.62); z-index: 8000; display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: fadeIn .18s ease; }
.confirm-sheet { background: var(--card); border-radius: 24px 24px 0 0; width: 100%; max-width: 480px; padding: 24px 22px calc(28px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 40px rgba(45,43,85,.20); }
.confirm-sheet .cs-icon { font-size: 2.4rem; text-align: center; display: block; margin-bottom: 10px; }
.confirm-sheet h3 { font-size: 1.05rem; font-weight: 800; text-align: center; margin-bottom: 8px; }
.confirm-sheet p { font-size: .88rem; color: var(--muted); text-align: center; line-height: 1.5; font-weight: 600; margin-bottom: 20px; }
.confirm-sheet .cs-actions { display: flex; gap: 10px; }
.confirm-sheet .cs-actions button { flex: 1; padding: 13px; border-radius: 14px; border: none; font-family: inherit; font-size: .95rem; font-weight: 800; cursor: pointer; transition: opacity .15s; }
.confirm-sheet .cs-cancel { background: var(--bg); color: var(--muted); }
.confirm-sheet .cs-confirm { background: linear-gradient(135deg, var(--accent), #e05555); color: #fff; }
.confirm-sheet .cs-confirm.safe { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 640px) { .confirm-overlay { align-items: center; } .confirm-sheet { border-radius: 20px; } }
/* ════════════════════════════════════════════════════════════════
CHILD-FRIENDLY ANIMATIONS & SOFTENING
════════════════════════════════════════════════════════════════ */
/* ── Keyframe library ── */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes floatSway { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-6px) rotate(4deg)} }
@keyframes bouncePop { 0%,100%{transform:scale(1) translateY(0)} 40%{transform:scale(1.15) translateY(-6px)} 60%{transform:scale(.96) translateY(-2px)} }
@keyframes wiggle { 0%,100%{transform:rotate(0deg)} 25%{transform:rotate(-14deg)} 75%{transform:rotate(14deg)} }
@keyframes softPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes breathe { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.08)} }
@keyframes springUp { 0%{transform:translateY(110%);opacity:0} 62%{transform:translateY(-10px);opacity:1} 80%{transform:translateY(4px)} 100%{transform:translateY(0)} }
@keyframes popIn { 0%{transform:scale(0.4);opacity:0} 65%{transform:scale(1.14)} 85%{transform:scale(.97)} 100%{transform:scale(1);opacity:1} }
@keyframes twinkle { 0%,100%{opacity:.35;transform:scale(.7) rotate(0deg)} 50%{opacity:1;transform:scale(1.2) rotate(20deg)} }
@keyframes rainbowSlide{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes slideInDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
/* ── Auth hero: floating logo + decorative stars ── */
.auth-hero-logo { animation: float 3.2s ease-in-out infinite; }
.auth-hero { position: relative; overflow: hidden; }
.auth-hero::before {
content: '✦';
position: absolute; top: 14px; left: 18px;
font-size: 1.2rem; color: rgba(255,255,255,.55);
animation: twinkle 2.8s ease-in-out infinite;
pointer-events: none;
}
.auth-hero::after {
content: '✦';
position: absolute; top: 22px; right: 22px;
font-size: .9rem; color: rgba(255,255,255,.45);
animation: twinkle 3.5s ease-in-out infinite .8s;
pointer-events: none;
}
/* ── Dashboard greeting ── */
.dash-greeting { position: relative; overflow: hidden; }
.dash-greeting { padding-right: 110px; }
.dash-greeting-right {
position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
display: flex; flex-direction: column; align-items: center; gap: 8px;
pointer-events: none;
}
.dash-greeting-logo {
width: 56px; height: 56px; border-radius: 16px;
box-shadow: 0 4px 18px rgba(0,0,0,0.24), 0 0 0 2.5px rgba(255,255,255,0.28);
animation: float 4.5s ease-in-out infinite;
display: block;
}
/* Family avatars row — overlapping circles */
.dash-family-avatars { display: flex; flex-direction: row; align-items: center; }
.dfa-av, .dfa-placeholder {
width: 34px; height: 34px; border-radius: 50%;
border: 2px solid rgba(255,255,255,0.65);
box-shadow: 0 2px 8px rgba(0,0,0,0.22);
animation: float 4s ease-in-out infinite;
flex-shrink: 0;
margin-left: -9px;
}
.dfa-av:first-child, .dfa-placeholder:first-child { margin-left: 0; }
.dfa-av { object-fit: cover; }
.dfa-placeholder {
background: rgba(255,255,255,0.28);
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 900; font-size: .72rem; letter-spacing: -.01em;
}
.dash-greeting-bg-star {
position: absolute; font-size: 3.8rem; opacity: .10;
right: 110px; bottom: -8px;
animation: floatSway 5s ease-in-out infinite;
pointer-events: none;
}
/* ── Shortcut tiles: staggered float on icons ── */
.shortcut-tile .st-icon { animation: float 3.8s ease-in-out infinite; }
.shortcut-tile:nth-child(2) .st-icon { animation-delay: .9s; }
.shortcut-tile:nth-child(3) .st-icon { animation-delay: 1.8s; }
.shortcut-tile:nth-child(4) .st-icon { animation-delay: 2.7s; }
.shortcut-tile:hover .st-icon { animation: wiggle .45s ease; }
.shortcut-tile { border-radius: 20px !important; box-shadow: 0 4px 18px rgba(108,99,255,0.10) !important; }
/* ── Bottom nav: pill highlight + bounce on active ── */
.bottom-nav { border-top: none !important; box-shadow: 0 -2px 20px rgba(108,99,255,0.10) !important; }
.bn-btn { border-radius: 12px; transition: color .22s; }
/* Aktives Reiter-Icon: warmes Lampen-Leuchten, pulsiert wie ein Herzschlag (lub-dub) – hell & dunkel */
@keyframes navIconHeartbeat {
0% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255,214,130,.75)); }
11% { transform: scale(1.28); filter: drop-shadow(0 0 10px rgba(255,255,255,.85)) drop-shadow(0 0 18px rgba(255,200,90,1)); }
21% { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(255,214,130,.85)); }
31% { transform: scale(1.19); filter: drop-shadow(0 0 8px rgba(255,255,255,.7)) drop-shadow(0 0 15px rgba(255,200,90,1)); }
44% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255,214,130,.7)); }
100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255,214,130,.7)); }
}
.bn-btn.active .bn-icon { animation: navIconHeartbeat 1.5s ease-in-out infinite; }
.nav-tab .nav-ic { display: inline-block; transform-origin: center center; }
.nav-tab.active .nav-ic { animation: navIconHeartbeat 1.5s ease-in-out infinite; }
/* Sub-Reiter (Tagebuch, Fotorueckblicke, Kalender-, Kinder-Reiter …): aktives Icon leuchtet warm */
.proto-tab > span:first-child { display: inline-block; transform-origin: center center; }
.proto-tab.active > span:first-child { animation: navIconHeartbeat 1.5s ease-in-out infinite; }
/* ── Startseite: Tipp-Banner ── */
/* min-height reserviert Platz fuer den laengsten Tipp -> Box-Groesse bleibt konstant, kein Springen beim Wechsel */
.tips-banner { display:flex; align-items:center; gap:12px; background:var(--color-sun-lt,#FFF8D6); border:1.5px solid rgba(255,193,7,.3); border-radius:16px; padding:12px 14px; margin-bottom:16px; box-shadow:var(--shadow-sm); min-height:78px; }
.tips-banner .tb-icon { font-size:1.55rem; flex-shrink:0; line-height:1; }
.tips-banner .tb-body { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.tips-banner .tb-label { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--tip-label,#9A5B00); }
.tips-banner .tb-text { font-size:.85rem; color:var(--text); line-height:1.4; overflow-wrap:anywhere; }
.tips-banner .tb-next { flex-shrink:0; background:transparent; border:none; color:var(--muted); font-size:1.15rem; cursor:pointer; padding:4px 7px; border-radius:8px; line-height:1; }
.tips-banner .tb-next:hover { background:rgba(0,0,0,.06); }
/* Konstante Hoehe je Bildschirmbreite (laengerer Umbruch auf schmalen Geraeten) */
@media (max-width:600px){ .tips-banner { min-height:128px; } }
@media (max-width:360px){ .tips-banner { min-height:148px; } }
/* ── Startseite: Ex-Partner einladen ── */
.home-invite { border: 2px solid var(--border); }
.home-invite .hi-head { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.home-invite .hi-emoji { font-size:2rem; line-height:1; flex-shrink:0; }
.home-invite .hi-title { margin:0; font-size:1.05rem; }
.home-invite .hi-sub { margin:3px 0 0; color:var(--muted); font-size:.84rem; line-height:1.45; }
.home-invite .hi-solo-note { margin:0 0 14px; padding:10px 12px; border-radius:10px;
background:color-mix(in srgb, var(--primary) 12%, transparent);
border:1px solid color-mix(in srgb, var(--primary) 30%, transparent);
color:var(--text); font-size:.82rem; line-height:1.45; }
.home-invite .hi-solo-note b { color:var(--primary); }
.home-invite .hi-invite-row { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.home-invite .hi-invite-row input { flex:1; min-width:160px; padding:11px 14px; border:1.5px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); font-family:inherit; font-size:.9rem; }
.home-invite details.hi-link { margin-top:2px; }
.home-invite details.hi-link summary { font-size:.76rem; color:var(--muted); cursor:pointer; }
.home-invite .hi-link-box { margin-top:8px; background:var(--bg); border-radius:10px; padding:10px; font-size:.74rem; word-break:break-all; }
.home-invite .hi-link-box .btn { margin-top:6px; width:100%; }
.home-invite .hi-benefits { margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); }
.home-invite .hi-benefits-title { font-weight:800; font-size:.84rem; margin-bottom:8px; color:var(--text); }
.home-invite .hi-benefits ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.home-invite .hi-benefits li { display:flex; gap:9px; align-items:flex-start; font-size:.8rem; color:var(--text); line-height:1.4; overflow-wrap:anywhere; }
.home-invite .hi-benefits li > span:first-child { flex-shrink:0; font-size:.95rem; }
.home-invite .hi-benefits li > span:last-child { flex:1; min-width:0; }
.home-invite .hi-tip { margin-top:11px; background:var(--color-sun-lt,#FFF8D6); color:var(--text); border-radius:12px; padding:10px 12px; font-size:.78rem; line-height:1.5; }
/* ── getrennt-zusammen+ (Schaufenster / Paywall-Optik) ── */
.plus-modal { max-width:460px; width:100%; padding:0; overflow-y:auto; overflow-x:hidden; position:relative; }
.plus-close { position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border-radius:50%; border:none; background:rgba(0,0,0,.20); color:#fff; font-size:1rem; font-weight:800; cursor:pointer; }
.plus-hero { background:linear-gradient(140deg,var(--color-coral,#FF6B6B) 0%,var(--color-orange,#FF9A3C) 45%,var(--color-purple,#C77DFF) 100%); color:#fff; text-align:center; padding:30px 24px 26px; }
.plus-hero .plus-logo { font-size:2.4rem; line-height:1; }
.plus-hero h2 { color:#fff; font-size:1.5rem; margin:8px 0 4px; }
.plus-hero p { color:rgba(255,255,255,.92); font-size:.92rem; }
.plus-trial { background:var(--color-sun-lt,#FFF8D6); color:var(--text); text-align:center; font-size:.86rem; padding:11px 16px; line-height:1.4; }
.plus-prices { display:flex; gap:12px; padding:20px 20px 4px; }
.plus-price-card { flex:1; border:1.5px solid var(--border); border-radius:16px; padding:14px 12px; text-align:center; position:relative; background:var(--card); cursor:pointer; transition:border-color .15s, box-shadow .2s, transform .12s; -webkit-tap-highlight-color:transparent; }
.plus-price-card:active { transform:scale(.98); }
.plus-price-card.best { border-color:rgba(255,154,60,.5); box-shadow:0 6px 18px -8px rgba(255,154,60,.3); }
.plus-price-card.selected { border-color:var(--color-orange,#FF9A3C); box-shadow:0 0 0 2px var(--color-orange,#FF9A3C); }
.plus-price-card.selected::after { content:'✓'; position:absolute; bottom:7px; right:10px; color:var(--color-orange,#FF9A3C); font-weight:800; font-size:.78rem; }
.plus-price-card .pp-badge { position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:var(--color-orange,#FF9A3C); color:#fff; font-size:.66rem; font-weight:800; padding:3px 9px; border-radius:999px; }
.plus-price-card .pp-period { font-size:.72rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.plus-price-card .pp-amount { font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.4rem; color:var(--text); margin-top:2px; }
.plus-price-card .pp-amount span { font-size:.72rem; font-weight:700; color:var(--muted); }
.plus-price-card .pp-note { font-size:.7rem; color:var(--muted); margin-top:3px; }
.plus-compare { padding:16px 20px 4px; }
.plus-compare .pc-title { font-weight:800; font-size:.9rem; margin-bottom:8px; color:var(--text); }
.plus-compare ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.plus-compare li { display:flex; gap:9px; align-items:flex-start; font-size:.84rem; line-height:1.4; color:var(--text); }
.plus-compare li > span:first-child { flex-shrink:0; }
.plus-compare li > span:last-child { flex:1; min-width:0; }
.plus-compare .pc-free { margin-top:11px; font-size:.78rem; color:var(--muted); background:var(--surface-2,var(--bg)); border-radius:10px; padding:9px 11px; line-height:1.45; }
.plus-cta { margin:16px 20px 6px; width:calc(100% - 40px); }
#plus-invite-box { margin:16px 20px 6px; }
#plus-invite-box .plus-invite-label { font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:8px; }
#plus-invite-box .plus-invite-row { display:flex; gap:8px; }
#plus-invite-box .plus-invite-row input { flex:1; min-width:0; padding:12px 14px; border:1.5px solid var(--border); border-radius:12px; background:var(--card); color:var(--text); font-family:inherit; font-size:.92rem; }
#plus-invite-box .plus-invite-connected { background:#dcfce7; color:#166534; border-radius:12px; padding:11px 13px; font-size:.85rem; font-weight:600; text-align:center; }
#plus-invite-box #plus-invite-msg { margin-top:8px; }
.plus-free-link { display:block; margin:4px auto 0; background:none; border:none; color:var(--muted); font-size:.8rem; font-weight:600; text-decoration:underline; cursor:pointer; padding:6px; }
.plus-free-link:hover { color:var(--text); }
.plus-soon { text-align:center; font-size:.72rem; color:var(--muted); padding:6px 20px 18px; }
.plus-status-box { margin:14px 20px -2px; padding:10px 12px; border-radius:12px; font-size:.85rem; text-align:center; font-weight:600; }
.plus-status-box.active { background:#dcfce7; color:#166534; }
.plus-status-box.trial { background:var(--color-sun-lt,#FFF8D6); color:var(--text); }
.plus-lock { display:inline-flex; align-items:center; gap:4px; font-size:.62rem; font-weight:800; background:linear-gradient(135deg,var(--color-orange,#FF9A3C),var(--color-coral,#FF6B6B)); color:#fff; padding:2px 8px; border-radius:999px; vertical-align:middle; cursor:pointer; }
/* Schloss an +Reitern – nur fuer Free-Nutzer (body.is-free) sichtbar */
body.is-free .nav-tab.plus-gated::after { content:'🔒'; font-size:.72em; margin-left:5px; opacity:.7; }
body.is-free .bn-btn.plus-gated::after { content:'🔒'; position:absolute; top:3px; right:8px; font-size:.62rem; opacity:.85; }
/* +Promo-Karte (Einstellungen oben & Startseite) */
.plus-promo { display:flex; align-items:center; gap:12px; cursor:pointer; margin-bottom:16px; background:linear-gradient(135deg, rgba(255,154,60,.14), rgba(199,125,255,.14)); border:1.5px solid rgba(255,154,60,.35); border-radius:16px; padding:13px 15px; transition:transform .15s, box-shadow .2s; }
.plus-promo:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.plus-promo .pp-ic { font-size:1.5rem; flex-shrink:0; line-height:1; }
.plus-promo .pp-bd { display:flex; flex-direction:column; min-width:0; flex:1; }
.plus-promo .pp-bd b { font-size:.95rem; color:var(--text); }
.plus-promo .pp-bd span { font-size:.78rem; color:var(--muted); line-height:1.35; }
.plus-promo .pp-ar { flex-shrink:0; font-size:1.3rem; color:var(--color-orange,#FF9A3C); font-weight:800; }
/* getrennt-zusammen+ verwalten */
.plus-manage-card { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.plus-manage-card .pm-head { display:flex; align-items:center; gap:11px; min-width:0; }
.plus-manage-card .pm-ic { font-size:1.4rem; line-height:1; }
.plus-manage-card .pm-bd { display:flex; flex-direction:column; gap:3px; min-width:0; }
.plus-manage-card .pm-bd b { font-size:.95rem; color:var(--text); }
.pm-status { font-size:.78rem; font-weight:700; border-radius:999px; padding:1px 9px; align-self:flex-start; }
.pm-status.active { background:rgba(34,197,94,.14); color:#15803d; }
.pm-status.trial { background:rgba(245,158,11,.16); color:#b45309; }
.pm-status.warn { background:rgba(239,68,68,.13); color:#b91c1c; }
.pm-status b { font-weight:800; }
.plus-manage-card .pm-actions { flex-shrink:0; }
.btn.pm-cancel { color:var(--muted); }
.pcx-warn { display:flex; gap:12px; align-items:flex-start; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.30); border-radius:14px; padding:13px 14px; }
.pcx-warn .pcx-ic { font-size:1.5rem; line-height:1; flex-shrink:0; }
.pcx-warn p { margin:0 0 7px; font-size:.86rem; line-height:1.45; color:var(--text); }
.pcx-warn p:last-child { margin-bottom:0; }
.pcx-backup { width:100%; margin-top:14px; border:1.5px solid var(--border); font-weight:700; }
.pcx-hint { font-size:.74rem; color:var(--muted); margin:8px 2px 0; text-align:center; }
.bn-btn.active::before {
content: '';
position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
width: 44px; height: 32px;
background: var(--primary-light);
border-radius: 12px; z-index: -1;
animation: popIn .32s cubic-bezier(.34,1.56,.64,1);
}
/* ── Mehr drawer items: staggered wiggle on hover ── */
.mehr-item .mi-icon { transition: transform .2s; display: inline-block; }
.mehr-item:hover .mi-icon { animation: wiggle .4s ease; }
.mehr-drawer.open .mehr-item {
animation: slideInDown .3s ease both;
}
.mehr-drawer.open .mehr-item:nth-child(1) { animation-delay:.04s }
.mehr-drawer.open .mehr-item:nth-child(2) { animation-delay:.08s }
.mehr-drawer.open .mehr-item:nth-child(3) { animation-delay:.12s }
.mehr-drawer.open .mehr-item:nth-child(4) { animation-delay:.16s }
.mehr-drawer.open .mehr-item:nth-child(5) { animation-delay:.20s }
.mehr-drawer.open .mehr-item:nth-child(6) { animation-delay:.24s }
.mehr-drawer.open .mehr-item:nth-child(7) { animation-delay:.28s }
.mehr-drawer.open .mehr-item:nth-child(8) { animation-delay:.32s }
.mehr-drawer.open .mehr-item:nth-child(9) { animation-delay:.36s }
.mehr-drawer.open .mehr-item:nth-child(10) { animation-delay:.40s }
.mehr-drawer.open .mehr-item:nth-child(11) { animation-delay:.44s }
/* ── FAB: breathing pulse ── */
.fab { animation: softPulse 2.8s ease-in-out infinite; }
.fab:hover { animation: none; }
/* ── Modal spring animation ── */
.modal-overlay:not(.hidden) .modal {
animation: springUp .42s cubic-bezier(.34,1.56,.64,1);
}
.confirm-overlay:not(.hidden) .confirm-sheet {
animation: springUp .38s cubic-bezier(.34,1.56,.64,1);
}
/* ── Empty state: floating icon ── */
.empty-state .es-icon { animation: float 3s ease-in-out infinite !important; }
/* ── Toast: bouncier in ── */
@keyframes toastBounce { from{opacity:0;transform:translateY(-20px) scale(.88)} 65%{transform:translateY(4px) scale(1.03)} to{opacity:1;transform:translateY(0) scale(1)} }
.toast { animation: toastBounce .35s cubic-bezier(.34,1.56,.64,1) !important; border-radius: 18px !important; }
/* ── Soften hard borders everywhere ── */
.cal-cell { border: none !important; box-shadow: 0 2px 10px rgba(108,99,255,0.07) !important; border-radius: 14px !important; }
.cal-cell.today { box-shadow: 0 0 0 2.5px var(--primary), 0 2px 14px rgba(108,99,255,0.18) !important; }
.apt-item { border: none !important; box-shadow: 0 3px 16px rgba(108,99,255,0.10) !important; border-radius: 20px !important; }
.apt-item.pending { border-left: 5px solid var(--warning) !important; }
.apt-item.confirmed{ border-left: 5px solid var(--success) !important; }
.apt-item.rejected { border-left: 5px solid var(--danger) !important; }
.chat-messages { border: none !important; box-shadow: 0 2px 16px rgba(108,99,255,0.08) inset !important; border-radius: 20px !important; }
.history-date-group { border-bottom: none !important; }
.custody-month-table td { border-bottom: 1px solid rgba(108,99,255,0.08) !important; }
.apt-tile-notes { border-top: 1px solid rgba(108,99,255,0.09) !important; }
/* ── Softer card radius ── */
.card, .apt-tile, .child-card, .memoir-card,
.history-event, .mehr-item { border-radius: 20px !important; }
.apt-tile { border-top-color: transparent !important; }
.apt-tile.pending { box-shadow: 0 4px 20px rgba(255,211,61,0.18) !important; border-top: 5px solid var(--warning) !important; }
.apt-tile.confirmed { box-shadow: 0 4px 20px rgba(107,203,119,0.18) !important; border-top: 5px solid var(--success) !important; }
.apt-tile.vacation { box-shadow: 0 4px 20px rgba(107,203,119,0.18) !important; border-top: 5px solid var(--success) !important; }
.apt-tile.family_vacation{ box-shadow: 0 4px 20px rgba(255,211,61,0.18) !important; border-top: 5px solid var(--accent2) !important; }
.apt-tile.custody { box-shadow: 0 4px 20px rgba(108,99,255,0.16) !important; border-top: 5px solid var(--primary) !important; }
.apt-tile:not([class*='pending']):not([class*='confirmed']):not([class*='vacation']):not([class*='custody']) {
border-top: 5px solid var(--primary) !important;
box-shadow: 0 4px 20px rgba(108,99,255,0.12) !important;
}
/* ── Softer form inputs ── */
.form-group input, .form-group select, .form-group textarea {
border-radius: 14px !important;
border-color: rgba(108,99,255,0.18) !important;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
box-shadow: 0 0 0 5px rgba(108,99,255,0.12) !important;
}
/* ── Softer btn ── */
.btn { border-radius: 99px !important; }
.btn:active { transform: scale(.93) !important; }
/* ── Logo img animation ── */
.top-bar .logo img { animation: float 4s ease-in-out infinite; }
/* ── Section headers: colorful pill chip ── */
.dashboard-section h2 {
display: inline-flex; align-items: center; gap: 8px;
background: var(--primary-light);
color: var(--primary-dark);
padding: 5px 14px 5px 10px;
border-radius: 99px;
font-size: 1rem !important;
margin-bottom: 16px;
}
/* ── Custody total cards: softer ── */
.custody-total-card { border-top: none !important; border-radius: 22px !important;
background: linear-gradient(135deg, #faf8ff 0%, #f3f0ff 100%) !important;
box-shadow: 0 4px 20px rgba(108,99,255,0.10) !important; }
/* ── Chat bubbles rounder ── */
.msg-bubble { border-radius: 20px !important; }
/* Nur Partner-Nachrichten bekommen den hellen Hintergrund */
.msg-row:not(.own) .msg-bubble { border: none !important; background: var(--bg) !important; box-shadow: 0 2px 8px rgba(108,99,255,0.08) !important; border-bottom-left-radius: 6px !important; }
/* Eigene Nachrichten: Lila Hintergrund + weißer Text IMMER erhalten */
.msg-row.own .msg-bubble { background: var(--primary) !important; color: #fff !important; border: none !important; border-bottom-right-radius: 6px !important; box-shadow: 0 2px 8px rgba(108,99,255,0.25) !important; }
/* ── History filter chips ── */
.history-filter-chip { border-radius: 99px !important; border: none !important;
box-shadow: 0 2px 10px rgba(108,99,255,0.10) !important; }
.history-filter-chip.active { box-shadow: 0 4px 14px rgba(108,99,255,0.30) !important; }
/* ── Pickup direction buttons ── */
.pickup-direction-btn { flex:1; padding:12px 8px; border:2px solid var(--border); border-radius:12px;
background:var(--bg); font-family:inherit; font-size:.88rem; font-weight:700; cursor:pointer;
transition:all .18s; text-align:center; }
.pickup-direction-btn.active { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
/* ── Agreement cards ── */
.ag-card { background:var(--card); border-radius:var(--radius); padding:18px; margin-bottom:14px;
box-shadow:var(--shadow); border-left:4px solid var(--primary); }
.ag-card.active { border-left-color:#22c55e; }
.ag-card.expired { border-left-color:#94a3b8; opacity:.75; }
.ag-card.draft { border-left-color:#f59e0b; }
.ag-status { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:800; }
.ag-status.draft { background:#fef9c3;color:#854d0e; }
.ag-status.pending { background:#e0f2fe;color:#075985; }
.ag-status.active { background:#dcfce7;color:#166534; }
.ag-status.expired { background:#f1f5f9;color:#64748b; }
.ag-content { white-space:pre-wrap; font-size:.88rem; line-height:1.7; background:var(--bg);
border-radius:8px; padding:12px; margin:10px 0; max-height:200px; overflow-y:auto;
border:1px solid var(--border); }
.ag-confirm-row { display:flex; gap:8px; margin-top:8px; align-items:center; flex-wrap:wrap; }
.ag-confirm-chip { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;
font-size:.75rem;font-weight:700;background:var(--bg);border:1px solid var(--border); }
.ag-confirm-chip.done { background:#dcfce7;border-color:#86efac;color:#166534; }
/* ── Pickup km stats ── */
.km-stat-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px; }
.km-stat-card { background:var(--card);border-radius:12px;padding:12px;box-shadow:var(--shadow);text-align:center; }
.km-stat-val { font-size:1.4rem;font-weight:900;color:var(--primary);line-height:1.1; }
.km-stat-lbl { font-size:.72rem;color:var(--muted);font-weight:700;margin-top:4px; }
/* ── Maintenance / Sub-tabs ── */
.sub-tab-bar { display:flex; gap:8px; margin-bottom:18px; border-bottom:2px solid var(--border); padding-bottom:2px; }
.sub-tab-btn { padding:8px 18px; border:none; background:none; font-family:inherit; font-size:.88rem; font-weight:700;
color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px;
border-radius:8px 8px 0 0; transition:all .18s; }
.sub-tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); background:var(--primary-light); }
.sub-tab-btn:hover:not(.active) { color:var(--text); background:var(--bg); }
/* Profil-Unterreiter: immer 4 gleich breite Spalten, kein Scrollen */
#settings-sub-tabs { gap:4px; }
#settings-sub-tabs .sub-tab-btn { flex:1 1 0; min-width:0; padding:8px 6px; text-align:center;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:480px) { #settings-sub-tabs .sub-tab-btn { padding:8px 3px; font-size:.74rem; } }
@media (max-width:360px) { #settings-sub-tabs .sub-tab-btn { font-size:.68rem; } }
/* FAQ-Accordion in den Einstellungen */
.settings-faq-list .sfaq-cat-h { font-weight:800; font-size:.82rem; color:var(--muted);
text-transform:uppercase; letter-spacing:.03em; margin:16px 0 6px; }
.settings-faq-list .sfaq-cat-h:first-child { margin-top:0; }
.settings-faq-list .sfaq-item { border-bottom:1px solid var(--border); }
.settings-faq-list .sfaq-q { width:100%; display:flex; align-items:center; justify-content:space-between;
gap:10px; padding:12px 2px; background:none; border:none; cursor:pointer; text-align:left;
font-family:inherit; font-size:.9rem; font-weight:700; color:var(--text); }
.settings-faq-list .sfaq-chev { transition:transform .2s; color:var(--muted); flex-shrink:0; }
.settings-faq-list .sfaq-q.open .sfaq-chev { transform:rotate(180deg); }
.settings-faq-list .sfaq-a { padding:0 2px 14px; font-size:.86rem; line-height:1.6; color:var(--muted); }
/* Agreement card */
.maint-card { background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:12px;
box-shadow:var(--shadow); border-left:4px solid var(--primary); transition:box-shadow .18s; }
.maint-card.confirmed { border-left-color:#22c55e; }
.maint-card.rejected { border-left-color:#ef4444; opacity:.7; }
.maint-card.titel { border-left-color:#f59e0b; }
.maint-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.maint-card-amount { font-size:1.5rem; font-weight:900; color:var(--primary); font-variant-numeric: tabular-nums; }
.maint-card-freq { font-size:.75rem; color:var(--muted); font-weight:700; }
.maint-status-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:99px; font-size:.72rem; font-weight:800; }
.maint-status-badge.pending { background:#fef9c3; color:#854d0e; }
.maint-status-badge.confirmed { background:#dcfce7; color:#166534; }
.maint-status-badge.rejected { background:#fee2e2; color:#991b1b; }
/* Cost entry card */
.cost-card { background:var(--card); border-radius:var(--radius); padding:16px; margin-bottom:12px;
box-shadow:var(--shadow); }
.cost-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cost-total-badge { background:var(--primary); color:#fff; border-radius:99px; padding:3px 12px;
font-size:.82rem; font-weight:800; }
.cost-item-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.cost-item-row:last-child { border-bottom:none; }
.cost-item-name { flex:1; font-weight:700; font-size:.88rem; }
.cost-item-cat { font-size:.72rem; color:var(--muted); font-weight:600; background:var(--bg);
padding:2px 7px; border-radius:99px; }
.cost-item-amount { font-weight:800; color:var(--primary); min-width:60px; text-align:right; }
.cost-item-thumb { width:36px; height:36px; border-radius:7px; object-fit:cover; cursor:pointer; border:1.5px solid var(--border); }
.cost-item-receipt { font-size:1.2rem; cursor:pointer; }
/* Bestätigungs-Popup */
.confirm-popup {
position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8);
background: var(--card); border-radius: 20px; padding: 28px 32px;
box-shadow: 0 20px 60px rgba(0,0,0,.35); z-index: 99999;
text-align: center; min-width: 260px;
animation: popupIn .3s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes popupIn {
from { opacity:0; transform:translate(-50%,-50%) scale(.7); }
to { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.confirm-popup-icon { font-size: 3rem; margin-bottom: 10px; }
.confirm-popup-text { font-size: 1rem; font-weight: 800; color: var(--text); }
.confirm-popup-sub { font-size: .82rem; color: var(--muted); margin-top: 4px; }
.confirm-popup-overlay { position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99998; }
:is([data-theme="dark"]) .form-group input,
:is([data-theme="dark"]) .form-group select,
:is([data-theme="dark"]) .form-group textarea {
background: var(--surface-2) !important;
color: var(--text) !important;
border-color: var(--border-2) !important;
}
:is([data-theme="dark"]) .form-group input:focus,
:is([data-theme="dark"]) .form-group select:focus,
:is([data-theme="dark"]) .form-group textarea:focus {
background: var(--surface-3) !important;
border-color: var(--color-coral) !important;
color: var(--text) !important;
box-shadow: 0 0 0 3px rgba(255,107,107,0.2), 0 0 12px rgba(255,107,107,0.15) !important;
}
:is([data-theme="dark"]) .form-group input::placeholder,
:is([data-theme="dark"]) .form-group textarea::placeholder {
color: var(--muted) !important;
}
:is([data-theme="dark"]) .modal-body input,
:is([data-theme="dark"]) .modal-body select,
:is([data-theme="dark"]) .modal-body textarea {
background: var(--surface-2) !important;
color: var(--text) !important;
}
.file-filter-chip { padding:6px 12px;border-radius:20px;border:2px solid var(--border-2, var(--border));background:var(--surface-2, var(--card));color:var(--muted);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .18s;font-family:'Quicksand',sans-serif; }
.file-filter-chip.active { background: linear-gradient(135deg, var(--color-sky), var(--color-purple));color:#fff;border-color:var(--color-sky); }
.file-entry { background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:10px; }
.file-entry-icon { font-size:2rem;flex-shrink:0;width:44px;text-align:center; }
.file-entry-body { flex:1;min-width:0; }
.file-entry-name { font-weight:700;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.file-entry-meta { font-size:.75rem;color:var(--muted);margin-top:3px; }
.file-entry-cat { display:inline-block;background:var(--primary-light);color:var(--primary);border-radius:6px;padding:2px 7px;font-size:.72rem;font-weight:800;margin-top:4px; }
/* ── Co-Parenting Tipp-Widget ─────────────────────────────────────────── */
.tip-widget {
position: relative;
background: linear-gradient(135deg, var(--color-sky) 0%, var(--color-purple) 100%);
border-radius: var(--r, 18px);
padding: 14px 16px;
margin-bottom: 18px;
overflow: hidden;
min-height: 72px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 3px 4px 0 rgba(77,150,255,0.28);
}
:is([data-theme="dark"]) .tip-widget {
box-shadow: 0 0 24px rgba(86,207,255,0.18);
}
.tip-widget-icon {
font-size: 1.8rem;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.tip-widget-body { flex: 1; min-width: 0; }
.tip-widget-label {
font-size: .65rem;
font-weight: 800;
color: rgba(255,255,255,0.75);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 3px;
font-family: 'Baloo 2', sans-serif;
}
.tip-widget-text {
font-size: .88rem;
font-weight: 700;
color: #fff;
line-height: 1.4;
font-family: 'Quicksand', sans-serif;
transition: opacity .4s ease, transform .4s ease;
}
.tip-widget-text.fade-out { opacity: 0; transform: translateY(-6px); }
.tip-widget-text.fade-in { opacity: 1; transform: translateY(0); }
.tip-widget-dots {
display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap;
}
.tip-widget-dot {
width: 5px; height: 5px; border-radius: 50%;
background: rgba(255,255,255,0.35);
transition: background .3s;
}
.tip-widget-dot.active { background: #fff; }
.tip-widget-progress {
position: absolute; bottom: 0; left: 0; height: 3px;
background: rgba(255,255,255,0.5);
border-radius: 0 0 0 var(--r,18px);
animation: tipProgress 15s linear infinite;
}
@keyframes tipProgress {
from { width: 0; }
to { width: 100%; }
}
/* ── Tipp-Lampe (Startseite) ──────────────────────────────────────────── */
.tip-lamp{
position:relative;width:78px;height:78px;border-radius:50%;border:none;cursor:pointer;
background:linear-gradient(145deg,#ece6dc,#d8cfc1);
box-shadow:0 7px 20px rgba(120,90,40,.16), inset 0 2px 4px rgba(255,255,255,.7);
display:flex;align-items:center;justify-content:center;
transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease;
-webkit-tap-highlight-color:transparent;
}
:is([data-theme="dark"]) .tip-lamp{ background:linear-gradient(145deg,#2a2a36,#1f1f29); box-shadow:0 7px 20px rgba(0,0,0,.4), inset 0 2px 4px rgba(255,255,255,.06); }
.tip-lamp:active{transform:scale(.92);}
.tip-lamp-bulb{font-size:2.15rem;line-height:1;filter:grayscale(.55) brightness(.82);transition:filter .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);}
.tip-lamp.on{
background:linear-gradient(145deg,var(--color-sun,#FFD93D),var(--color-orange,#FF9A3C));
box-shadow:0 0 0 5px rgba(255,217,61,.25), 0 0 32px 5px rgba(255,193,7,.55), 0 9px 24px rgba(255,154,60,.4);
animation:tipLampPulse 2.2s ease-in-out infinite;
}
.tip-lamp.on .tip-lamp-bulb{filter:none;transform:scale(1.12);}
@keyframes tipLampPulse{
0%,100%{box-shadow:0 0 0 5px rgba(255,217,61,.25),0 0 32px 5px rgba(255,193,7,.55),0 9px 24px rgba(255,154,60,.4);}
50%{box-shadow:0 0 0 9px rgba(255,217,61,.12),0 0 48px 9px rgba(255,193,7,.7),0 9px 24px rgba(255,154,60,.45);}
}
.tip-lamp-rays{position:absolute;inset:-14px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s ease;}
.tip-lamp.on .tip-lamp-rays{opacity:1;}
.tip-lamp-rays span{position:absolute;top:50%;left:50%;width:3px;height:11px;border-radius:3px;background:linear-gradient(var(--color-sun,#FFD93D),transparent);transform-origin:center 46px;}
.tip-lamp-label{margin-top:11px;font-weight:800;font-size:.78rem;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;transition:color .3s;font-family:'Quicksand',sans-serif;}
.tip-lamp.on ~ .tip-lamp-label{color:var(--color-orange,#FF9A3C);}
/* Popup */
.tip-overlay{position:fixed;inset:0;background:rgba(43,29,14,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .35s ease, visibility .35s ease;z-index:9998;}
.tip-overlay.show{opacity:1;visibility:visible;}
.tip-pop{background:var(--surface-1,var(--card,#fff));border-radius:26px;max-width:440px;width:100%;max-height:86vh;display:flex;flex-direction:column;padding:24px 20px 20px;position:relative;box-shadow:0 24px 70px rgba(80,50,20,.4);transform:scale(.62) translateY(40px);opacity:0;transition:transform .42s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;}
.tip-overlay.show .tip-pop{transform:scale(1) translateY(0);opacity:1;}
.tip-pop-head{display:flex;align-items:center;gap:12px;}
.tip-pop-ic{width:50px;height:50px;border-radius:50%;flex-shrink:0;background:linear-gradient(145deg,var(--color-sun,#FFD93D),var(--color-orange,#FF9A3C));display:flex;align-items:center;justify-content:center;font-size:1.55rem;box-shadow:0 0 22px rgba(255,193,7,.5);}
.tip-pop-head h3{font-family:'Baloo 2',sans-serif;font-size:1.2rem;line-height:1.1;color:var(--text);}
.tip-pop-head p{font-size:.78rem;color:var(--muted);font-weight:600;}
.tip-pop-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:none;background:var(--surface-2,var(--bg,#f5f0e8));color:var(--muted);font-size:1.05rem;cursor:pointer;font-weight:800;display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;}
.tip-pop-close:hover{transform:rotate(90deg);}
.tip-pop-text{margin:4px 0 18px;font-size:1.02rem;line-height:1.55;font-weight:700;color:var(--text);min-height:62px;font-family:'Quicksand',sans-serif;}
.tip-pop-text.tip-pop-anim{animation:tipPopText .42s cubic-bezier(.34,1.56,.64,1);}
@keyframes tipPopText{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.tip-pop-next{width:100%;padding:12px;border:none;border-radius:14px;background:linear-gradient(135deg,var(--color-coral,#FF6B6B),var(--color-orange,#FF9A3C));color:#fff;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.92rem;cursor:pointer;box-shadow:3px 4px 0 rgba(255,107,107,.3);transition:transform .15s;}
.tip-pop-next:active{transform:translateY(1px);}
/* ── Top-Bar-Lampe ── */
.tip-lamp-top{
width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;margin:0 2px;
background:rgba(255,255,255,.20);position:relative;
display:flex;align-items:center;justify-content:center;
transition:transform .2s, box-shadow .35s ease, background .35s ease;
-webkit-tap-highlight-color:transparent;
}
.tip-lamp-top:active{transform:scale(.9);}
.tip-lamp-top .tip-lamp-bulb{font-size:1.15rem;line-height:1;filter:grayscale(.25) brightness(.95);transition:filter .35s ease, transform .3s cubic-bezier(.34,1.56,.64,1);}
.tip-lamp-top.on{
background:linear-gradient(145deg,var(--color-sun,#FFD93D),var(--color-orange,#FF9A3C));
box-shadow:0 0 0 4px rgba(255,217,61,.30), 0 0 18px 4px rgba(255,193,7,.65);
animation:tipLampPulse 2.2s ease-in-out infinite;
}
.tip-lamp-top.on .tip-lamp-bulb{filter:none;transform:scale(1.12);}
/* ── „Erste Schritte"-Button (immer sichtbar in der Top-Bar) ── */
.onboard-btn-top{
display:inline-flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;
height:36px;padding:0 12px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);
/* Dunkler Tint statt weißem (weißer Tint wusch die weiße Schrift im Light-Mode
auf dem hellen Top-Bar-Verlauf aus) + Textschatten → in beiden Modi lesbar. */
background:rgba(0,0,0,.22);color:#fff;font-weight:800;font-size:.8rem;
text-shadow:0 1px 2px rgba(0,0,0,.45);
-webkit-tap-highlight-color:transparent;transition:transform .15s, background .25s;
}
.onboard-btn-top:hover{background:rgba(0,0,0,.32);}
.onboard-btn-top:active{transform:scale(.94);}
.onboard-btn-top .onboard-btn-ic{font-size:1.05rem;line-height:1;}
@media(max-width:640px){
.onboard-btn-top{padding:0;width:36px;justify-content:center;}
.onboard-btn-top .onboard-btn-text{display:none;}
}
/* ── Erste-Schritte-Einführung (interaktive Tour) ── */
.ob-overlay{ position:fixed;inset:0;z-index:4000;pointer-events:none; }
.ob-overlay.ob-mode-center{ display:flex;align-items:center;justify-content:center;padding:20px; }
.ob-backdrop{ position:absolute;inset:0;background:rgba(15,18,30,.62);backdrop-filter:blur(3px);
pointer-events:auto;animation:appOverlayIn .25s ease; }
@keyframes appOverlayIn{from{opacity:0;}to{opacity:1;}}
/* Spotlight: transparentes Fenster mit riesigem Schatten dunkelt alles außer dem
hervorgehobenen Element ab; pointer-events:none → echtes Element bleibt klickbar */
.ob-spot{
position:absolute;border-radius:14px;pointer-events:none;
box-shadow:0 0 0 9999px rgba(15,18,30,.62), 0 0 0 3px var(--primary),
0 0 22px 5px color-mix(in srgb,var(--primary) 55%,transparent);
transition:left .3s cubic-bezier(.34,1.4,.64,1),top .3s cubic-bezier(.34,1.4,.64,1),
width .3s cubic-bezier(.34,1.4,.64,1),height .3s cubic-bezier(.34,1.4,.64,1);
}
.ob-tip{
position:absolute;pointer-events:auto;background:var(--card);color:var(--text);
border:1.5px solid var(--border);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.35);
padding:13px 15px 7px;animation:appModalIn .38s cubic-bezier(.34,1.56,.64,1);
/* Auf kleinen/kurzen Handys darf der Tooltip nicht höher als der Viewport
werden — sonst rutscht die Fußzeile (Weiter/Überspringen) unerreichbar
aus dem Bild. Inhalt wird scrollbar, die Steuerung bleibt sichtbar. */
max-height:calc(100dvh - 24px);overflow-y:auto;
}
.ob-tip-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.98rem;color:var(--text);margin:0 0 5px;}
.ob-tip-body{font-size:.85rem;line-height:1.4;color:var(--text);margin:0 0 2px;}
.ob-tip-body b{color:var(--primary);font-weight:800;}
/* Im Tooltip trägt bereits .ob-tip die Seiten-Innenabstände → Fußzeile/Punkte
ohne zusätzliche Seitenränder, sonst brechen die Buttons um. */
.ob-tip .ob-dots{padding:5px 0 2px;}
.ob-tip .ob-foot{padding:9px 0 2px;}
.ob-card{
pointer-events:auto;position:relative;z-index:1;
width:100%;max-width:440px;background:var(--card);color:var(--text);
border:1.5px solid var(--border);border-radius:22px;overflow:hidden;
box-shadow:0 24px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;
max-height:calc(100vh - 40px);animation:appModalIn .42s cubic-bezier(.34,1.56,.64,1);
}
.ob-hero{
padding:26px 24px 20px;text-align:center;
background:linear-gradient(150deg,var(--primary),var(--primary-dark));color:#fff;
}
.ob-hero-emoji{font-size:2.6rem;line-height:1;display:block;margin-bottom:8px;}
.ob-hero h3{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.28rem;margin:0;color:#fff;}
.ob-body{padding:20px 24px 8px;overflow-y:auto;}
.ob-body p{font-size:.95rem;line-height:1.55;color:var(--text);margin:0 0 12px;}
.ob-body ul{margin:6px 0 4px;padding-left:20px;}
.ob-body li{font-size:.9rem;line-height:1.5;color:var(--text);margin-bottom:6px;}
.ob-body b{color:var(--primary);font-weight:800;}
.ob-dots{display:flex;gap:6px;justify-content:center;padding:8px 0 4px;flex-wrap:wrap;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--text) 22%,transparent);transition:all .25s;}
.ob-dot.active{background:var(--primary);width:22px;border-radius:5px;}
.ob-foot{display:flex;align-items:center;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--border);}
.ob-skip{background:none;border:none;color:var(--muted);font-weight:700;font-size:.8rem;cursor:pointer;padding:6px 4px;white-space:nowrap;}
.ob-spacer{flex:1;}
.ob-btn{border:none;border-radius:11px;padding:8px 14px;font-weight:800;font-size:.85rem;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .12s;}
.ob-btn:active{transform:scale(.95);}
.ob-btn-ghost{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);}
.ob-btn-primary{background:var(--primary);color:#fff;}
/* ── App-weite Fenster-Animation (Bounce auf, sanft zu) ── */
.modal-overlay:not(.hidden):not(.modal-closing) > .modal{ animation:appModalIn .42s cubic-bezier(.34,1.56,.64,1); }
.modal-overlay.modal-closing{ animation:appOverlayFade .22s ease forwards; }
.modal-overlay.modal-closing > .modal{ animation:appModalOut .22s ease-in forwards; }
@keyframes appModalIn{ from{opacity:0;transform:scale(.82) translateY(26px);} to{opacity:1;transform:scale(1) translateY(0);} }
@keyframes appModalOut{ to{opacity:0;transform:scale(.86) translateY(18px);} }
@keyframes appOverlayFade{ to{opacity:0;} }
.tip-pop-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.04rem;color:var(--text);margin:16px 0 2px;}
.tip-pop-text b{color:var(--color-coral,#FF6B6B);font-weight:800;}
.tip-lamp-top.hint{ animation:tipLampHint 1.6s ease-in-out 2; }
@keyframes tipLampHint{
0%,100%{ box-shadow:0 0 0 0 rgba(255,193,7,0); background:rgba(255,255,255,.20); }
50%{ box-shadow:0 0 0 4px rgba(255,217,61,.22),0 0 18px 6px rgba(255,193,7,.5); background:rgba(255,206,84,.85); }
}
.tip-pop-list{display:flex;flex-direction:column;gap:2px;margin-top:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0;}
.tip-pop-item{display:flex;gap:11px;align-items:flex-start;padding:12px 2px;border-top:1px solid var(--border);opacity:0;transform:translateY(8px);animation:tipItemIn .4s ease forwards;}
.tip-pop-item:first-child{border-top:none;}
.tip-pop-item:nth-child(1){animation-delay:.05s;} .tip-pop-item:nth-child(2){animation-delay:.10s;}
.tip-pop-item:nth-child(3){animation-delay:.15s;} .tip-pop-item:nth-child(4){animation-delay:.20s;}
.tip-pop-item:nth-child(5){animation-delay:.25s;} .tip-pop-item:nth-child(6){animation-delay:.30s;}
@keyframes tipItemIn{to{opacity:1;transform:translateY(0);}}
.tip-pop-item-ic{font-size:1.3rem;flex-shrink:0;line-height:1.35;}
.tip-pop-item-body{flex:1;min-width:0;}
.tip-pop-item-title{font-weight:800;font-size:.9rem;color:var(--text);margin-bottom:3px;font-family:'Quicksand',sans-serif;}
.tip-pop-item-text{font-size:.84rem;line-height:1.55;color:var(--text);}
.tip-pop-item-text b{color:var(--color-coral,#FF6B6B);font-weight:800;}
.tip-pop-foot{font-size:.72rem;color:var(--muted);margin-top:12px;text-align:center;flex-shrink:0;}