/* ==========================================
   LOCAL FONTS — Manrope (Variable)
   ========================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../../fonts/manrope/manrope-variable.woff2') format('woff2');
}

/* ==========================================
   DESIGN TOKENS
   Every value below is WCAG-AA verified against
   its intended surface (see notes per token).
   ========================================== */

:root {
  /* Surfaces */
  --surface:         #fafafa;
  --surface-raised:  #ffffff;
  --surface-sunken:  #f1f3f6;
  --surface-invert:  #0e2d52;
  --hairline:        #e2e6ec;

  /* Text (on --surface / --surface-raised) */
  --ink:    #0e2d52;  /* 13.3:1 on surface */
  --ink-2:  #4c5b74;  /* 6.6:1  on surface */
  --ink-3:  #5f6d80;  /* 5.1:1 on surface, 4.7:1 on sunken */

  /* Brand */
  --brand:        #009FE3;  /* graphic/accent use, and text on dark */
  --brand-rgb:    0, 159, 227;
  --brand-ink:    #00719E;  /* brand as TEXT on light: 5.2 surface / 5.5 raised / 4.9 sunken */
  --brand-solid:  #0077A8;  /* brand as BUTTON fill: white on it = 5.0:1 */
  --brand-hover:  #00648f;

  /* Bento panel grounds (contrast-verified with white/white-75/#7fd4fb) */
  --panel-deep:   #0a1f3a;  /* head 16.5 / body 9.7 / eyebrow 10.0 */
  --panel-deep-rgb: 10, 31, 58;  /* gleiche Farbe, für rgba()-Stops — Tailwind
                                    kann auf var()-Farben kein /opacity legen */
  --panel-blue:   #00567a;  /* head  8.0 / body 5.3 / eyebrow  4.9 */
  --panel-eyebrow:#7fd4fb;
  --panel-rose:   #7a002f;  /* Rose-Gegenstueck zu panel-blue, gleiche Saettigung/Tiefe.
                               weiss 11.2:1, weiss/75 6.65:1, weiss/70 5.9:1, panel-eyebrow 6.8:1 —
                               alle bestehenden Textklassen der dunklen Panels bleiben gueltig. */

  --accent:       #C2356B;  /* rose as text on light 5.0:1 / button fill 5.2:1 */
  --accent-rgb:   194, 53, 107;
  --accent-hover: #a82c5c;
  /* --accent verdoppelt hier Text- und Button-Rolle (beide Faelle 5.0-5.2:1) —
     im Dark Mode musste das getrennt werden, siehe .dark unten. */
  --accent-solid:       #C2356B;
  --accent-solid-hover: #a82c5c;

  /* On-invert text (over --surface-invert / imagery) */
  --on-invert:    #ffffff;
  --on-invert-2:  rgba(255, 255, 255, 0.72);
  --on-invert-3:  rgba(255, 255, 255, 0.55);

  /* Pre-mixed translucents.
     Tailwind's /opacity modifier cannot be applied to a var()-based colour,
     so every translucent surface needs its own token. */
  --glass:            rgba(255, 255, 255, 0.88);
  --overlay:          rgba(250, 250, 250, 0.97);
  --brand-tint:       rgba(0, 159, 227, 0.10);
  --accent-tint:      rgba(194, 53, 107, 0.10);
  --hairline-strong:  #c4ccd7;
}

.dark {
  --surface:         #0d1828;
  --surface-raised:  #101e30;
  --surface-sunken:  #0a1220;
  --surface-invert:  #0e2d52;
  --hairline:        rgba(255, 255, 255, 0.10);

  /* Text (on dark surfaces) */
  --ink:    #ffffff;                    /* 17.8:1 */
  --ink-2:  rgba(255, 255, 255, 0.72);  /* 9.6:1  */
  --ink-3:  rgba(255, 255, 255, 0.55);  /* 5.8:1  */

  /* Brand: full-saturation reads correctly on dark (6.0:1) */
  --brand:        #009FE3;
  --brand-ink:    #009FE3;
  --brand-solid:  #0077A8;
  --brand-hover:  #0086c0;

  --accent:       #E8629A;  /* lighter rose for dark: 5.6:1 */
  --accent-rgb:   232, 98, 154;
  --accent-hover: #f07dac;
  /* --accent ist im Dark Mode nur fuer TEXT auf dunklem Grund kalibriert
     (5.6:1 gegen --surface). Weiss auf --accent als Buttonflaeche waere nur
     3.16:1 — eigener, dunklerer Ton fuer die Buttonrolle noetig. */
  --accent-solid:       #d41f6b;  /* weiss darauf: 5.0:1 */
  --accent-solid-hover: #b21a5a;  /* weiss darauf: 6.6:1 */

  --glass:            rgba(13, 24, 40, 0.88);
  --overlay:          rgba(13, 24, 40, 0.97);
  --brand-tint:       rgba(0, 159, 227, 0.16);
  --accent-tint:      rgba(232, 98, 154, 0.16);
  --hairline-strong:  rgba(255, 255, 255, 0.24);
}

/* ==========================================
   BASE
   ========================================== */

body {
  font-family: 'Manrope', sans-serif;
  background-color: var(--surface);
  color: var(--ink);
}

::selection {
  background-color: var(--brand-solid);
  color: #ffffff;
}

/* Mobile-Hero: Foto oben, ruhige Fläche unten. Die Alpha-Rampe folgt einer
   Smootherstep-Kurve (Steigung an beiden Enden = 0), damit weder Anfang noch
   Ende des Verlaufs als Kante sichtbar wird. Sie endet bei 0.88, nicht 1 —
   das Foto bleibt hinter der Copy schwach lesbar. Alle Stops nutzen
   --panel-deep mit Alpha, nicht `transparent`, sonst interpoliert der Browser
   über transparentes Schwarz und der Übergang wird grau. */
.hero-scrim-mobile {
  background-image: linear-gradient(
    to bottom,
    rgba(var(--panel-deep-rgb), 0) 20%,
    rgba(var(--panel-deep-rgb), 0.004) 22.3%,
    rgba(var(--panel-deep-rgb), 0.025) 24.6%,
    rgba(var(--panel-deep-rgb), 0.074) 26.9%,
    rgba(var(--panel-deep-rgb), 0.153) 29.2%,
    rgba(var(--panel-deep-rgb), 0.256) 31.5%,
    rgba(var(--panel-deep-rgb), 0.377) 33.9%,
    rgba(var(--panel-deep-rgb), 0.503) 36.2%,
    rgba(var(--panel-deep-rgb), 0.624) 38.5%,
    rgba(var(--panel-deep-rgb), 0.727) 40.8%,
    rgba(var(--panel-deep-rgb), 0.806) 43.1%,
    rgba(var(--panel-deep-rgb), 0.878) 45.4%,
    rgba(var(--panel-deep-rgb), 0.918) 47.7%,
    rgba(var(--panel-deep-rgb), 0.93) 50%,
    rgba(var(--panel-deep-rgb), 0.93) 100%
  );
}

/* ==========================================
   ANIMATIONS
   ========================================== */

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 32s linear infinite;
  display: flex;
  width: max-content;
}

.scroll-hint {
  animation: scroll-hint 1.6s ease-in-out infinite;
}

@keyframes scroll-hint {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(5px); opacity: 1; }
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* ==========================================
   SCROLL REVEAL (GSAP-driven; CSS sets initial state)
   ========================================== */

.reveal {
  opacity: 0;
}

/* Fade-only variant. Used where the element is an ancestor of position:sticky
   children: a transform or filter there would create a containing block and
   stop the stacking from working. */
.reveal-fade {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-fade {
    opacity: 1;
  }
}

/* ==========================================
   SCROLLBAR HIDE
   ========================================== */

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ==========================================
   FOCUS STYLES (WCAG 2.4.7)
   ========================================== */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-solid);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Duotone-Ueberzug auf dekorativer Fotografie (Hero, Bildbaender, Schluss-CTA):
   vereinheitlicht Fotos aus verschiedenen Generierungs-Sessions farblich, ohne den
   Foto-Grade zu ersetzen. mix-blend-mode: color uebernimmt Farbton/Saettigung nur
   vom sichtbaren (durch Alpha gedaempften) Overlay, der Rest bleibt Foto — daher
   rgba() statt voller Deckkraft. Verlauf ist bewusst 70/30 blau/rose gewichtet:
   Blau fuehrt wie ueberall sonst auf der Seite, Rose bleibt Akzent, kein Duotone
   mit gleichberechtigten Farben. Bewusst NICHT auf App-Screenshots, Vereinswappen
   oder die echten SVWW-Screens: deren Farben sind Produkt bzw. gehoeren dem Verein. */

/* Weiches Eckenglühen statt harter Kante: blaues Glühen oben links, rosa unten
   rechts, beides sehr gedaempft (0.12 Alpha) und ueber prozentuale radial-
   gradient-Stops automatisch proportional zur Kartengroesse (kein fixer
   Pixel-Radius, der auf kleinen Plattform-Kacheln zu gross und auf grossen
   Bento-Panels zu klein waere). Kein Rahmen mehr noetig — der Shadow allein
   haelt die Kartenkontur auf der fast gleich hellen Seitenflaeche sichtbar.
   --fill-layer bleibt pro Karte die eigene Grundfarbe als Gradient-Syntax
   (zwei gleiche Farbstopps fuer eine Solidflaeche, oder ein echter mehrfarbiger
   Verlauf wie zuvor bei der Preise-Kachel).
   0.12 Alpha ist bewusst niedriger als der erste Versuch (0.22): das druecke
   den blauen Eyebrow-Text in der oberen linken Ecke unter 4.5:1 AA-Kontrast
   (4.39 statt 4.77 bei 0.12) — geprueft, weil genau dort das Glühen am
   staerksten ist. */
.gradient-frame {
  background-image:
    radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb), 0.12), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(var(--accent-rgb), 0.12), transparent 55%),
    var(--fill-layer);
  background-repeat: no-repeat;
  box-shadow: 0 12px 24px -16px rgba(14, 45, 82, 0.12);
}

.nav-pill {
  max-width: 1200px;
  overflow: hidden;
  transition: max-width 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

#nav-collapsible {
  transition: opacity 0.25s ease, margin 0.25s ease;
}

@media (max-width: 1023px) {
  #site-nav.nav-collapsed .nav-pill {
    max-width: 84px;
  }

  #site-nav.nav-collapsed #nav-collapsible {
    opacity: 0;
    pointer-events: none;
    margin-left: -1.5rem;
  }
}

.scene-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(var(--brand-rgb), 0.7) 0%,
    rgba(var(--accent-rgb), 0.7) 100%
  );
  mix-blend-mode: color;
  pointer-events: none;
}