/* HailSignal-Designsystem „Storm Glass" (E134).
   EINE Quelle für Farbtokens, Schrift und Grundstimmung – jede Seite
   bindet /app/stil.css VOR ihrem eigenen <style>-Block ein, damit
   Seitenregeln gezielt übersteuern können. Der Dunkelmodus bleibt in
   Grautönen, nicht Navy (Betreiberwunsch 2026-08-12).
   Rollback: Git-Tag „vor-redesign". */

@import url('/app/fonts/fonts.css');

:root {
  /* Flächen */
  --bg: #eef3f8; --bg2: #e6edf4;
  --panel: #ffffff; --karte: #ffffff;
  --zeile: #eef4f9; --flaeche: #eef4f9; --feld: #f3f7fb;
  --rand: #dfe7ef;
  /* Text */
  --navy: #0c2440; --text: #16324f; --leise: #5b6b7c;
  /* Akzente: Teal (Marke) → Eisblau, als Verlauf für CTAs und Titel */
  --akzent: #0e9fb2; --teal: #0e9fb2; --akzent2: #2f7de0;
  --verlauf: linear-gradient(135deg, #0ea3b5 0%, #2f7de0 100%);
  --teal-t: #d9eef1;
  --cta: #0c2440; --cta-text: #ffffff;
  /* Signale */
  --gruen: #1a7f37; --rot: #cf222e; --orange: #ee8534;
  --chip-gruen: #0f5c26; --chip-orange: #8f3a00; --chip-teal: #0b6d80;
  /* Klassenfarben (Badges) – die Kartenskala, in beiden Themes gleich */
  --k0: #5a8fb8; --k1: #7d8590; --k2: #d9b430; --k3: #e07b28; --k4: #d93b3b;
  /* Tiefe: weiches Umgebungslicht + gerichteter Schatten */
  --schatten: 0 1px 2px rgba(12, 36, 64, .05), 0 12px 32px rgba(12, 36, 64, .10);
  --schatten-schwebe: 0 2px 6px rgba(12, 36, 64, .06), 0 20px 48px rgba(14, 159, 178, .18);
  --schatten-haupt: 0 16px 40px rgba(14, 163, 181, .16);
  --glas: rgba(255, 255, 255, .82);
  --auf-akzent: #ffffff;
  --schwer: 0 8px 28px rgba(16, 43, 74, .2);
  /* Hintergrund-Glühen (Aurora) für Seiten mit .aurora-Körper */
  --glut-a: rgba(14, 163, 181, .12); --glut-b: rgba(47, 125, 224, .10);
}
[data-theme="dark"] {
  --bg: #0f1012; --bg2: #131417;
  --panel: #17191d; --karte: #17191d;
  --zeile: #1f2227; --flaeche: #1f2227; --feld: #101215;
  --rand: #2a2e34;
  --navy: #f2f4f6; --text: #e5e8ec; --leise: #9aa3ad;
  --akzent: #27ccdf; --teal: #27ccdf; --akzent2: #4d9bfa;
  --verlauf: linear-gradient(135deg, #27ccdf 0%, #4d9bfa 100%);
  --teal-t: #143038;
  --cta: #27ccdf; --cta-text: #0f1012;
  --gruen: #3fb950; --rot: #f85149; --orange: #f09a52;
  --chip-gruen: #4ecb62; --chip-orange: #f5a86b; --chip-teal: #3fd2e4;
  --k0: #5a8fb8; --k1: #7d8590; --k2: #d9b430; --k3: #e07b28; --k4: #d93b3b;
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 36px rgba(0, 0, 0, .5);
  --schatten-schwebe: 0 2px 6px rgba(0, 0, 0, .45), 0 20px 48px rgba(39, 204, 223, .14);
  --schatten-haupt: 0 16px 40px rgba(39, 204, 223, .12);
  --glas: rgba(15, 16, 18, .78);
  --auf-akzent: #0f1012;
  --schwer: 0 8px 28px rgba(0, 0, 0, .45);
  --glut-a: rgba(39, 204, 223, .07); --glut-b: rgba(77, 155, 250, .06);
}

/* Schrift: Space Grotesk trägt Titel und Marke, Inter die Fläche.
   Seiten setzen ihre Schriftgröße selbst – die Familie kommt von hier. */
:root {
  --schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-titel: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
h1, h2, h3, .marke, .zahl { font-family: var(--schrift-titel); }

/* Aurora-Grund: zwei weiche Farbnebel statt flacher Fläche. Die Nebel
   liegen auf einem fixierten Pseudo-Element statt auf
   background-attachment: fixed – das unterstützt iOS Safari nicht und
   verzerrte die Verläufe dort über die ganze Dokumenthöhe (E137). */
body.aurora {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
body.aurora::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 480px at 12% -6%, var(--glut-a), transparent 60%),
    radial-gradient(820px 460px at 88% 4%, var(--glut-b), transparent 60%);
}

/* Textauswahl und Fokus in Markenfarbe */
::selection { background: color-mix(in srgb, var(--akzent) 28%, transparent); }
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--akzent) 65%, transparent);
  outline-offset: 2px;
}

/* Dezente Rollbalken (Listen der Karte, lange Seiten) */
* { scrollbar-width: thin; scrollbar-color: var(--rand) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--rand); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--leise); }
*::-webkit-scrollbar-track { background: transparent; }

/* Gemeinsame Bewegungen */
@keyframes hs-auftauchen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hs-puls {
  0%   { transform: scale(.55); opacity: .75; }
  100% { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* E265: source season notice, readable in both themes and narrow layouts. */
.hs-season-note { font-size: 0.875rem; line-height: 1.6; color: var(--text);
  margin: 14px 0; padding: 12px 14px; border-left: 3px solid var(--teal);
  background: var(--glas); border-radius: 0 10px 10px 0;
  overflow-wrap: anywhere; }