/* =====================================================================
   Valtio – Design-Tokens und Basis-Komponenten
   Quelle: Version v3 (C:\Users\nicog\dev\hackathon-ff-v3\static\style.css)
   Einbinden: diese Datei als erstes Stylesheet laden, danach eigene Styles.
   ===================================================================== */

/* ---------- Schrift: Hanken Grotesk, LOKAL (App muss offline laufen) ----------
   woff2-Dateien herunterladen und unter /fonts/ ablegen:
   https://cdn.jsdelivr.net/npm/@fontsource/hanken-grotesk@5.0.8/files/hanken-grotesk-latin-400-normal.woff2
   (gleich für 500, 600, 700) */
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-display: swap; src: url("fonts/hanken-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 500; font-display: swap; src: url("fonts/hanken-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-display: swap; src: url("fonts/hanken-600.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 700; font-display: swap; src: url("fonts/hanken-700.woff2") format("woff2"); }

:root {
  /* Flächen dunkel */
  --night: #050E10;      /* Band oben (Nav, Hero) */
  --abyss: #030808;      /* tiefste Fläche */
  --dash: #0C1618;       /* dunkle Panels (Chat, Selbsttest, Glow-Chart) */
  --dash2: #152326;      /* Elemente in dunklen Panels */
  --dash-line: #2A3A3D;  /* Linien in dunklen Panels */
  /* Petrol-Skala */
  --deep: #0A2F37;
  --teal: #14505A;       /* Hauptakzent auf hell */
  --sea: #5FAFB0;
  --mint: #7FD6CF;       /* Akzent auf dunkel, Leuchten, Fokus */
  --mist: #D5E3E0;
  --foam: #F2FAF7;
  /* Flächen hell */
  --paper: #F4F7F6;      /* Seitenhintergrund */
  --panel: #FFFFFF;      /* Karten, Tabellen */
  --line: #E1EAE8;       /* Linien auf hell */
  /* Text */
  --ink: #082228;        /* Text auf hell */
  --muted: #4A6266;      /* Sekundärtext */
  --faint: #8AA3A3;      /* Achsen, leere Werte */
  /* Bedeutung (nur für Daten, nie Deko) */
  --good: #18967F;
  --mid: #D2A13B;
  --bad: #CE5C40;
  /* Verläufe */
  --card-grad: linear-gradient(180deg, #0A2F37 0%, #14505A 42%, #7FA6A8 76%, #D5E3E0 100%);
  /* Radien: gross für Flächen, klein für Elemente */
  --r-xl: 28px;  /* Bento, Hero-Karten */
  --r-lg: 22px;  /* Karten, Tabellen */
  --r-md: 16px;  /* Hinweise */
  --r-sm: 10px;  /* Kacheln */
  --pill: 999px; /* Buttons, Tabs, Chips, Inputs */
}

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.5 "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* ---------- Typo-Skala ---------- */
.t-hero { font-size: clamp(40px, 6vw, 80px); line-height: 1.02; font-weight: 500; letter-spacing: -0.035em; }
.t-h2   { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.06; font-weight: 500; letter-spacing: -0.03em; }
.t-h3   { font-size: 30px; line-height: 1.14; font-weight: 600; letter-spacing: -0.02em; }
.t-lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.4; }
.t-small { font-size: 14px; color: var(--muted); }
.t-num  { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }

/* ---------- Dunkles Band mit Horizont (siehe horizon.svg im Kit) ---------- */
.band { position: relative; background: var(--night); color: #fff; overflow: hidden; }
.band .horizon { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Glas ---------- */
.glass { border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--ink); }
.glass-panel { padding: 20px; border-radius: 22px; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.66);
  backdrop-filter: blur(16px); color: var(--ink); }

/* ---------- Bento-Karte ---------- */
.b-card { min-height: 500px; padding: 32px; border-radius: var(--r-xl); background: var(--card-grad); color: #fff;
  display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.b-card .glass-panel, .b-card .donut, .b-card .gbars { margin-top: auto; } /* Visual unten andocken */

/* ---------- Buttons, Tabs, Chips ---------- */
.btn-primary { background: var(--ink); color: #fff; border: 0; min-height: 48px; padding: 0 24px; border-radius: var(--pill); font-weight: 600; cursor: pointer; }
.btn-primary:hover { background: var(--teal); }
.btn-light { background: #fff; color: var(--ink); border: 0; min-height: 48px; padding: 0 24px; border-radius: var(--pill); font-weight: 600; }   /* auf dunkel */
.btn-ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--line); min-height: 48px; padding: 0 20px; border-radius: var(--pill); font-weight: 600; }
.tab { border: 0; background: none; color: #fff; min-height: 44px; padding: 0 16px; border-radius: var(--pill); font-weight: 500; opacity: .82; }
.tab.active { background: #fff; color: var(--ink); font-weight: 600; opacity: 1; }
.chip-dark { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; border-radius: var(--pill); padding: 8px 16px; }

/* ---------- Karten und Tabellen auf hell ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.tablewrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: auto; }
th { font-size: 13px; font-weight: 600; color: var(--muted); }
td, th { padding: 12px 14px; border-bottom: 1px solid var(--line); }

/* ---------- Noten A+ bis F ---------- */
.grade { display: inline-grid; place-items: center; min-width: 32px; height: 24px; padding: 0 6px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #fff; }
.grade.g-A { background: var(--good); } .grade.g-B { background: #4DA597; } .grade.g-C { background: var(--mid); }
.grade.g-D { background: #DE7E4E; } .grade.g-F { background: var(--bad); } .grade.g-na { background: #E3ECEA; color: var(--muted); }

/* ---------- Ampel-Punkt ---------- */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot.gruen { background: var(--good); } .dot.gelb { background: var(--mid); } .dot.rot { background: var(--bad); }

/* ---------- Leuchten (aktive Firma, Markt-Map) ---------- */
.glow-mint { outline: 3px solid var(--mint); outline-offset: -1px;
  box-shadow: 0 0 0 4px rgba(127,214,207,.35), 0 0 28px 6px rgba(127,214,207,.75); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }