/* ============================================================================
   top1solar Speicher - Liquid Glass CI v1
   Quelle: /Desktop/Claude/DESIGN.md + _glass_lab/glass-theme.css
   Akzent auf top1solar-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("/assets/fonts/Geist-Variable.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/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: top1solar-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: 16px; color: var(--text); /* 16px: verhindert iOS-Auto-Zoom */
  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; }
}

/* ============================================================
   Veredelungs-Schicht: Micro-Interactions + Einstiegs-Animationen
   Nur transform/opacity (GPU), komplett abgeschaltet bei
   prefers-reduced-motion. Zentral, gilt fuer alle Seiten.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sl-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes sl-rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes sl-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
  @keyframes sl-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

  #main-content { animation: sl-page-in .35s var(--ease-out, ease-out) both; }

  /* Karten und Listen steigen gestaffelt auf */
  .card, .dok-item, .faq { animation: sl-rise-in .45s var(--ease-out, ease-out) both; }
  .card:nth-child(1), .dok-item:nth-child(1), .faq:nth-of-type(1) { animation-delay: .03s; }
  .card:nth-child(2), .dok-item:nth-child(2), .faq:nth-of-type(2) { animation-delay: .08s; }
  .card:nth-child(3), .dok-item:nth-child(3), .faq:nth-of-type(3) { animation-delay: .13s; }
  .card:nth-child(4), .dok-item:nth-child(4), .faq:nth-of-type(4) { animation-delay: .18s; }
  .card:nth-child(5), .dok-item:nth-child(5), .faq:nth-of-type(5) { animation-delay: .23s; }
  .card:nth-child(n+6), .dok-item:nth-child(n+6), .faq:nth-of-type(n+6) { animation-delay: .28s; }

  /* Karten-Hover: dezentes Anheben */
  .card { transition: transform .2s var(--ease-out, ease-out), border-color .2s, box-shadow .2s; }
  .kpi-card:hover { transform: translateY(-3px); border-color: var(--border-strong); }

  /* Tabellenzeilen + Links weich */
  tr, .shell-nav-link, .shell-bell-item, .row-click { transition: background .18s ease, color .18s ease; }

  /* Erfolgs-Pop (Haken nach Speichern) */
  .sl-pop { animation: sl-pop .4s var(--ease-out, ease-out) both; }
}

/* Skeleton-Loader (auch ohne Motion sichtbar, nur Schimmer ist Animation) */
.skeleton {
  color: transparent !important; pointer-events: none; user-select: none;
  background: linear-gradient(90deg, oklch(30% 0.02 160 / .35) 25%, oklch(40% 0.02 160 / .5) 50%, oklch(30% 0.02 160 / .35) 75%);
  background-size: 200% 100%; border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: sl-shimmer 1.4s linear infinite; }
}

/* Fokus-Sichtbarkeit global (Tastatur-Nutzer) */
a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ── Zentrierung Portal-Standard (12.06.2026): Überschriften + Kachelinhalte ── */
.page-title { text-align: center; }
.card > h3, .grp > h3, section > h3 { text-align: center; }
.kpi-card, .kpi-value, .kpi-label, .kpi-sub,
.prov-card, .rank-stat-label, .empty-state, .feld { text-align: center; }

/* ⚠️ Netz gegen abgeschnittenen Text auf schmalen Geräten.
   Ein Grid- oder Flex-Kind hat als Mindestbreite die Breite seines Inhalts. Ein
   einziger langer Satz sprengt damit die Spalte, und weil der Rumpf seitliches
   Scrollen unterbindet, verschwindet der Überhang wortlos hinter dem Rand. Genau so
   war am 11.08.2026 auf dem Dashboard die wichtigste Zeile ("Was jetzt zu tun ist")
   um 157 Pixel abgeschnitten. Diese Regel erlaubt das Schrumpfen grundsätzlich. */
.shell-layout [class*="grid"] > *,
.shell-layout .card > *,
.card [class*="grid"] > * { min-width: 0; }


/* ============================================================================
   CI-Schicht top1solar (automatisch von brand/make-brand.py, nicht von Hand ändern)
   Akzent von Grün auf die Hauptfarbe #F6931E, Canvas neutral dunkel. Status-
   farben (Erfolg, Warnung, Fehler) bleiben unverändert.
   ============================================================================ */
:root {
  --canvas:            oklch(14% 0.006 60);
  --canvas-opaque:     oklch(20% 0.006 60);
  --accent:            oklch(73% 0.17 60);
  --accent-hover:      oklch(78% 0.17 62);
  --accent-active:     oklch(66% 0.16 58);
  --accent-soft:       oklch(73% 0.17 60 / 0.18);
  --accent-ring:       oklch(73% 0.17 60 / 0.50);
  --accent-deep:       oklch(48% 0.13 58);
  --gold:              oklch(82% 0.14 75);
  --gold-hover:        oklch(87% 0.14 75);
  --gold-soft:         oklch(82% 0.14 75 / 0.16);
  --text-on-accent:    oklch(18% 0.01 60);
  --text-muted:        oklch(72% 0.01 60);
}