/* =============================================================================
   Familie-Gesundheit — Liquid Glass Theme
   Cool-Palette OKLCH, Aurora-Backdrop, 4 Glass-Layer.
   ============================================================================= */

:root {
  /* Cool-Palette (Hauptton)           */
  --c-base-light: oklch(98% 0.01 252);
  --c-base-dark:  oklch(16% 0.02 252);
  --c-fg-light:   oklch(20% 0.02 252);
  --c-fg-dark:    oklch(95% 0.01 252);

  /* Akzent — kühl + warm                */
  --c-cool:       oklch(70% 0.16 252);    /* Glow Primary  */
  --c-cool-soft:  oklch(80% 0.08 252);
  --c-warm:       oklch(78% 0.14 60);     /* Glow Sekundär */

  /* Status                              */
  --c-green:      oklch(72% 0.14 142);
  --c-amber:      oklch(78% 0.15 80);
  --c-red:        oklch(64% 0.18 28);

  /* Typo */
  --font-sans: "Geist Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Layout                              */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Glas-Tokens (Light)                 */
  --glass-bg:     color-mix(in oklch, white 70%, transparent);
  --glass-bg-2:   color-mix(in oklch, white 55%, transparent);
  --glass-stroke: color-mix(in oklch, white 80%, transparent);
  --glass-shadow: 0 30px 60px -30px oklch(50% 0.05 252 / 0.35),
                  0 8px 24px -8px oklch(50% 0.05 252 / 0.22);
  --glass-inset:  inset 0 1px 0 0 oklch(100% 0 0 / 0.6),
                  inset 0 -1px 0 0 oklch(100% 0 0 / 0.18);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg:     color-mix(in oklch, oklch(28% 0.04 252) 65%, transparent);
    --glass-bg-2:   color-mix(in oklch, oklch(24% 0.04 252) 55%, transparent);
    --glass-stroke: color-mix(in oklch, white 12%, transparent);
    --glass-shadow: 0 30px 80px -20px oklch(8% 0.05 252 / 0.7),
                    0 8px 24px -8px oklch(8% 0.05 252 / 0.5);
    --glass-inset:  inset 0 1px 0 0 oklch(100% 0 0 / 0.08),
                    inset 0 -1px 0 0 oklch(0% 0 0 / 0.5);
  }
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background: var(--c-base-light);
  color: var(--c-fg-light);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  html, body { background: var(--c-base-dark); color: var(--c-fg-dark); }
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img   { max-width: 100%; }
input, select, textarea {
  font: inherit; color: inherit;
}
.hidden { display: none !important; }

/* ---------------------------------------------------------------------- */
/* Aurora-Backdrop                                                         */
/* ---------------------------------------------------------------------- */
#aurora {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  filter: blur(80px) saturate(120%);
}
#aurora .orb {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  opacity: 0.5; mix-blend-mode: screen; animation: drift 28s linear infinite alternate;
}
#aurora .o1 { left: -20vmax; top: -20vmax;
  background: radial-gradient(closest-side, var(--c-cool), transparent 70%); }
#aurora .o2 { right: -25vmax; top: 30vmax;
  background: radial-gradient(closest-side, var(--c-warm), transparent 70%);
  animation-delay: -8s; }
#aurora .o3 { left: 10vmax; bottom: -30vmax;
  background: radial-gradient(closest-side, var(--c-cool-soft), transparent 70%);
  animation-delay: -16s; }
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(10vmax, -8vmax, 0) scale(1.1); }
}

/* ---------------------------------------------------------------------- */
/* Glass                                                                   */
/* ---------------------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
          backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 80% at 0% 0%,
      color-mix(in oklch, var(--c-cool) 22%, transparent) 0%,
      transparent 60%),
    radial-gradient(120% 80% at 100% 100%,
      color-mix(in oklch, var(--c-warm) 14%, transparent) 0%,
      transparent 55%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn-primary,
.btn-ghost,
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--c-cool), oklch(60% 0.18 252));
  color: white;
  box-shadow: 0 8px 20px -10px var(--c-cool);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px var(--c-cool); }
.btn-ghost {
  background: var(--glass-bg-2);
  border-color: var(--glass-stroke);
  color: inherit;
}
.btn-ghost:hover { background: var(--glass-bg); }
.btn-danger {
  background: color-mix(in oklch, var(--c-red) 18%, transparent);
  color: var(--c-red);
  border-color: color-mix(in oklch, var(--c-red) 35%, transparent);
}

/* ---------------------------------------------------------------------- */
/* Inputs                                                                  */
/* ---------------------------------------------------------------------- */
label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 500;
}
input, select, textarea {
  padding: 12px 14px;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-md);
  outline: none;
  transition: border .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: color-mix(in oklch, var(--c-cool) 60%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--c-cool) 22%, transparent);
}

/* ---------------------------------------------------------------------- */
/* Spinner                                                                 */
/* ---------------------------------------------------------------------- */
.spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid color-mix(in oklch, var(--c-cool) 30%, transparent);
  border-top-color: var(--c-cool);
  animation: spin 0.9s linear infinite;
  margin: 8px auto 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------- */
/* Toasts                                                                  */
/* ---------------------------------------------------------------------- */
.toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 1000;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--glass-bg); border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  max-width: 320px;
  animation: toast-in .2s ease;
}
.toast.is-error { color: var(--c-red); border-color: color-mix(in oklch, var(--c-red) 30%, transparent); }
.toast.is-success { color: var(--c-green); border-color: color-mix(in oklch, var(--c-green) 30%, transparent); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

/* ---------------------------------------------------------------------- */
/* Reduzierte Bewegung                                                     */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition: none !important; }
}