/* ============================================================================
   SUNlife Schwarmspeicher - Liquid Glass CI v1
   Quelle: /Desktop/Claude/DESIGN.md + _glass_lab/glass-theme.css
   Akzent auf SUNlife-Gruen statt Cool-Blau. Sonnen-Gelb als Warm-Akzent.
   Gemeinsame Basis fuer Landingpage, Standort-Schnellcheck, Pipeline-Cockpit.
   ============================================================================ */

@font-face {
  font-family: "Geist";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2") format("woff2-variations");
}

:root {
  color-scheme: dark;

  /* === Canvas === */
  --canvas:            oklch(14% 0.02 160);
  --canvas-opaque:     oklch(20% 0.02 160);

  /* === Akzent Primaer: SUNlife-Gruen === */
  --accent:            oklch(70% 0.15 150);
  --accent-hover:      oklch(76% 0.16 150);
  --accent-active:     oklch(63% 0.14 150);
  --accent-soft:       oklch(70% 0.15 150 / 0.18);
  --accent-ring:       oklch(70% 0.15 150 / 0.50);
  --accent-deep:       oklch(45% 0.12 152);

  /* === Akzent Warm: Sonnen-Gelb === */
  --gold:              oklch(82% 0.15 85);
  --gold-hover:        oklch(87% 0.15 85);
  --gold-soft:         oklch(82% 0.15 85 / 0.16);

  /* === Text === */
  --text:              oklch(98% 0 0);
  --text-secondary:    oklch(90% 0 0);
  --text-muted:        oklch(72% 0.01 160);
  --text-on-accent:    oklch(18% 0.02 150);
  --text-shadow-glass: 0 1px 2px oklch(0% 0 0 / 0.55), 0 2px 4px oklch(0% 0 0 / 0.30);
  --text-shadow-strong:0 1px 2px oklch(0% 0 0 / 0.80), 0 2px 6px oklch(0% 0 0 / 0.55);

  /* === Borders === */
  --border-subtle:     oklch(100% 0 0 / 0.08);
  --border-default:    oklch(100% 0 0 / 0.14);
  --border-strong:     oklch(100% 0 0 / 0.26);

  /* === Status === */
  --status-success:    oklch(74% 0.16 148);
  --status-success-soft: oklch(74% 0.16 148 / 0.16);
  --status-warning:    oklch(82% 0.16 95);
  --status-warning-soft: oklch(82% 0.16 95 / 0.16);
  --status-error:      oklch(66% 0.21 25);
  --status-error-soft: oklch(66% 0.21 25 / 0.16);
  --status-info:       oklch(72% 0.13 220);
  --status-info-soft:  oklch(72% 0.13 220 / 0.16);

  /* === Radius === */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 18px; --radius-xl: 22px; --radius-2xl: 30px; --radius-full: 9999px;

  /* === 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; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px;

  /* === Motion === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-instant: 80ms; --dur-snappy: 150ms; --dur-smooth: 250ms; --dur-deliberate: 400ms;

  /* === Fonts === */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* === Type-Scale === */
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px;
  --text-lg:20px; --text-xl:24px; --text-2xl:32px; --text-3xl:44px; --text-4xl:60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-feature-settings: "ss01" on, "cv11" on, "calt" on;
  font-variant-numeric: tabular-nums;
}

body {
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

/* Mesh-Canvas (Pflicht: Glass braucht Untergrund-Variation) */
body::before {
  content: ""; position: fixed; inset: -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 12% -5%, oklch(48% 0.16 150 / 0.55), transparent 60%),
    radial-gradient(ellipse 55% 60% at 88% 8%, oklch(46% 0.12 85 / 0.40), transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 105%, oklch(40% 0.13 160 / 0.55), transparent 62%),
    radial-gradient(ellipse 40% 45% at 30% 90%, oklch(38% 0.10 200 / 0.35), transparent 68%),
    var(--canvas);
  filter: saturate(1.1);
  animation: mesh-drift 34s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  0%   { transform: translate3d(0,0,0) scale(1.00); }
  50%  { transform: translate3d(2%,-1%,0) scale(1.04); }
  100% { transform: translate3d(-1%,2%,0) scale(1.02); }
}

/* === Glass-Surfaces === */
.surface-subtle {
  background: linear-gradient(180deg, oklch(100% 0 0 / 0.05), oklch(100% 0 0 / 0.02)), oklch(20% 0.02 160 / 0.55);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.10), inset 0 -1px 0 oklch(0% 0 0 / 0.30), 0 1px 2px oklch(0% 0 0 / 0.40);
}
.surface, .card {
  position: relative; isolation: isolate;
  background: linear-gradient(155deg, oklch(100% 0 0 / 0.10) 0%, oklch(100% 0 0 / 0.035) 30%, oklch(0% 0 0 / 0.12) 100%), oklch(24% 0.02 160 / 0.60);
  backdrop-filter: blur(40px) saturate(190%) brightness(1.04); -webkit-backdrop-filter: blur(40px) saturate(190%) brightness(1.04);
  border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1.5px 0 oklch(100% 0 0 / 0.22),
    inset 0 -2px 0 oklch(0% 0 0 / 0.38),
    0 4px 16px oklch(0% 0 0 / 0.30),
    0 20px 50px -10px oklch(0% 0 0 / 0.45);
}
.surface-elevated {
  background: linear-gradient(180deg, oklch(100% 0 0 / 0.12), oklch(100% 0 0 / 0.045)), oklch(27% 0.025 160 / 0.74);
  backdrop-filter: blur(48px) saturate(220%); -webkit-backdrop-filter: blur(48px) saturate(220%);
  border: 1px solid var(--border-strong); border-radius: var(--radius-2xl);
  box-shadow: inset 0 1.5px 0 oklch(100% 0 0 / 0.20), 0 24px 64px oklch(0% 0 0 / 0.50), 0 8px 24px oklch(0% 0 0 / 0.40);
}

/* Specular-Highlight oben auf Karten */
.card.specular::after {
  content: ""; position: absolute; top: 3%; left: 8%; right: 8%; height: 26%;
  border-radius: 999px; pointer-events: none; z-index: 0; filter: blur(14px); mix-blend-mode: screen;
  background: radial-gradient(ellipse at 35% 0%, oklch(100% 0 0 / 0.55) 0%, oklch(100% 0 0 / 0.12) 50%, transparent 80%);
}
.card > * { position: relative; z-index: 1; }

/* === Typografie === */
h1,h2,h3,h4 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; color: var(--text); }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
p { color: var(--text-secondary); }
.eyebrow { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--text-muted); }
.lead { font-size: var(--text-md); color: var(--text-secondary); }

/* === Buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: inherit; font-size: var(--text-base); font-weight: 600;
  padding: 13px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-snappy), border-color var(--dur-snappy), transform var(--dur-instant) var(--ease-out);
}
.btn-primary {
  background: var(--accent); color: var(--text-on-accent);
  border-color: oklch(100% 0 0 / 0.25);
  box-shadow: inset 0 1.5px 0 oklch(100% 0 0 / 0.40), 0 6px 18px var(--accent-ring);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:active { background: var(--accent-active); transform: translateY(1px) scale(0.99); }
.btn-gold {
  background: var(--gold); color: oklch(20% 0.04 85);
  box-shadow: inset 0 1.5px 0 oklch(100% 0 0 / 0.45), 0 6px 18px oklch(82% 0.15 85 / 0.45);
}
.btn-gold:hover { background: var(--gold-hover); transform: translateY(-1px); }
.btn-secondary {
  background: oklch(22% 0.02 160 / 0.55); color: var(--text);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: var(--border-default);
}
.btn-secondary:hover { border-color: var(--border-strong); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--accent-soft); color: var(--text); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent-ring); }

/* === Badges === */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--radius-full);
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.badge-success { background: var(--status-success-soft); color: var(--status-success); }
.badge-warning { background: var(--status-warning-soft); color: var(--status-warning); }
.badge-error   { background: var(--status-error-soft); color: var(--status-error); }
.badge-info    { background: var(--status-info-soft); color: var(--status-info); }
.badge-accent  { background: var(--accent-soft); color: var(--accent); }
.badge-gold    { background: var(--gold-soft); color: var(--gold); }

/* === Inputs === */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
input, select, textarea {
  font-family: inherit; font-size: var(--text-base); color: var(--text);
  background: oklch(15% 0.015 160 / 0.55); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 12px 14px; width: 100%;
  transition: border-color var(--dur-snappy), box-shadow var(--dur-snappy);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }

/* === Layout-Helfer === */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.grid { display: grid; gap: var(--space-6); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }

/* === Tabellen === */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
thead th {
  position: sticky; top: 0; text-align: left;
  background: oklch(20% 0.02 160 / 0.65); backdrop-filter: blur(20px);
  color: var(--text-muted); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 14px;
  border-bottom: 1px solid var(--border-default);
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
tbody tr { transition: background var(--dur-snappy); }
tbody tr:hover { background: var(--accent-soft); }

::selection { background: var(--accent-soft); color: var(--text); }

/* === Scrollbar === */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: oklch(100% 0 0 / 0.14); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: oklch(100% 0 0 / 0.22); }

/* === Accessibility-Fallbacks (Pflicht) === */
@media (prefers-reduced-transparency: reduce) {
  .surface, .surface-subtle, .surface-elevated, .card, thead th {
    backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--canvas-opaque);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  body::before { animation: none; }
}