/* ============================================================
   SVW WEBSITE — FANSHOP-LOOK OVERLAY
   ------------------------------------------------------------
   Basis: css/svw.css (Look "svw-light"). Dieses Overlay verschiebt
   die Website auf den Look des Shopify-Fanshops (Theme-Export v4):

     · Ostsee-Blau #0B2E3F ersetzt Schwarz/Ink als Textfarbe
     · Punkttextur auf dem Paper-Untergrund
     · roter Lauf-Ticker ganz oben (siehe svw-fanshop.js)
     · Ostsee-blauer Footer
     · Buttons mit 4px-Radius (statt scharfkantig)

   Nicht-destruktiv: nur auf den Website-Seiten (public/) eingebunden,
   NACH svw.css. Die geteilte svw.css (Cockpit/Hub) bleibt unberührt.
   Quelle der Regeln: assets/svw-custom.css im Theme-Export.
   ============================================================ */

/* --- 1. Ostsee ersetzt Schwarz als "Ink" -------------------
   Im Fanshop gibt es kein reines Schwarz: Text = #0B2E3F.
   Wir überschreiben das Token nur innerhalb der Website (.web),
   dadurch werden Headlines, Footer, Live-Ticker & Linien maritim. */
.web {
  /* v4-Regel 2: Ostsee ersetzt Ink/Graphite/Steel systemweit.
     #0E0E12 / #1C1C22 / #2A2A33 sind in v4 verboten → auf Ostsee-Familie mappen. */
  --ink: #0B2E3F;
  --sea: #0B2E3F;
  --sea-deep: #072331;
  --graphite: #123241;  /* war #1C1C22 (verboten) → Ostsee-Graphit */
  --steel: #2A4A57;     /* war #2A2A33 (verboten) → Ostsee-Stahl   */
}

/* --- 2. Halftone-Punkttextur auf Paper (exakt v4-Spec) --- */
.web {
  background-color: var(--paper);
  background-image: radial-gradient(rgba(11,46,63,0.045) 1.4px, transparent 1.9px);
  background-size: 20px 20px;
}

/* Restliche schwarzbasierte Muted-Grautöne (rgba(14,14,18,…)) auf die
   v4-Ostsee-Opazitäten heben — die sichtbarsten Stellen (Eyebrows/Meta/Labels). */
.web .web-section .head .r,
.web .home-hero .text .eyebrow,
.web .label,
.web .label-light { color: rgba(11,46,63,0.55) !important; }

/* --- 3. Buttons & CTAs: 4px-Radius (Fanshop buttons_radius) ---- */
.web-nav .cta,
.web-nav .mega .cta-row a,
.home-hero .ctas a,
.next-match .cta,
.schedule-mini .row .cta,
.dual-cta .box .cta,
.web a.cta,
.web .web-btn,
.web .btn,
.web button.cta {
  border-radius: 4px !important;
}

/* --- 4. Footer: Ostsee-Blau statt Ink ------------------------
   .web-footer nutzt bereits var(--ink) → wird durch (1) maritim.
   Punkttextur im Footer leicht anheben, Trennlinien maritim. */
.web-footer .footer-halftone {
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.2px, transparent 1.6px);
}

/* --- 4b. Footer maritim: Ostsee-Blau statt Paper ------------
   Die Website läuft im .light-mode (heller Footer). Der Fanshop-Footer
   ist "inverse" = Ostsee-Blau mit weißer Schrift. Wir holen ihn zurück.
   Das weiße Wappen (svw-logo-white.png) sitzt bereits im Footer-Markup. */
.web-footer,
.light-mode .web-footer {
  background: var(--sea) !important;
  color: rgba(255,255,255,0.72) !important;
}
.light-mode .web-footer .footer-halftone {
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.2px, transparent 1.6px) !important;
}
.light-mode .web-footer .footer-brand .crest .name,
.light-mode .web-footer .footer-brand .brand-claim {
  color: #fff !important;
}
.light-mode .web-footer .footer-brand .brand-claim .r,
.light-mode .web-footer .footer-brand .crest .name span { color: var(--red) !important; }
.light-mode .web-footer .footer-brand .brand-address,
.light-mode .web-footer .footer-brand .brand-address a,
.light-mode .web-footer .footer-cols .col a {
  color: rgba(255,255,255,0.72) !important;
}
.light-mode .web-footer .footer-brand .brand-address strong,
.light-mode .web-footer .footer-cols .col h4 { color: #fff !important; }
.light-mode .web-footer .footer-brand .brand-address a:hover,
.light-mode .web-footer .footer-cols .col a:hover { color: var(--red) !important; }
.light-mode .web-footer .footer-brand .social-row a {
  border-color: rgba(255,255,255,0.30) !important;
  color: #fff !important;
}
.light-mode .web-footer .footer-brand .social-row a:hover {
  background: var(--red) !important; border-color: var(--red) !important;
}
.light-mode .web-footer .footer-bottom {
  /* light-mode.css setzt hier Sand — mit weißer Schrift unlesbar. Im Ostsee-Footer
     bleibt die Bottom-Leiste dunkel (Ostsee-Tiefe) und trennt nur per feiner Linie. */
  background: var(--sea-deep, #072331) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.60) !important;
}
.light-mode .web-footer .footer-bottom .legal-links a { color: rgba(255,255,255,0.60) !important; }
.light-mode .web-footer .footer-bottom .legal-links a:hover { color: var(--red) !important; }
.light-mode .web-footer .footer-bottom .meta { color: rgba(255,255,255,0.45) !important; }

/* --- 4c. Die Welle "Rhythmus der Küste" (v4-Signatur) --------
   4 gestapelte Wellenlagen an der Unterkante der Paper-Fläche. Wird via
   svw-fanshop.js als eigener Block direkt VOR den Footer gesetzt (normaler
   Fluss — kein Overlap, kein Stapelkontext-Konflikt). Transparente Kämme
   zeigen den Paper-Untergrund.
   Reihenfolge hinten→vorn: Ostsee-Silhouette gegen Paper, helle Gischt,
   rotes Kamm-Band, und als Vorderwelle nochmal Ostsee — die trägt exakt die
   Footer-Farbe und füllt bis zur Blockunterkante. So gibt es keine Kante
   zum Footer: die Welle springt aus dem Ostsee-Farbblock heraus. */
.svw-wave {
  display: block; width: 100%; height: 92px;
  line-height: 0; margin: 0 0 -1px; padding: 0;
  /* transparent: hinter den Kämmen läuft das Punkteraster von .web weiter
     (vorher feste Paper-Fläche → 92 px hoher Streifen ohne Raster).
     Hat der Abschnitt davor eine eigene Farbe, setzt svw-fanshop.js sie. */
  background: transparent;
  position: relative; z-index: 1;   /* -1px Überlappung gegen Haarlinie zum Footer */
  pointer-events: none;
}
.svw-wave svg { display: block; width: 100%; height: 100%; }

/* --- 4c1. Hero-Welle ------------------------------------------
   Dieselbe Signatur wie auf der Startseite, jetzt an der Unterkante
   JEDES Seiten-Heros (Markup kommt aus svw-fanshop.js). Die vordere
   Lage bekommt per JS die Hintergrundfarbe des FOLGENDEN Abschnitts —
   sonst entsteht dieselbe Kante wie seinerzeit am Footer. */
.svw-hero { position: relative; }
.svw-hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 72px;
  line-height: 0; z-index: 4; pointer-events: none;
}
.svw-hero-wave svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .svw-hero-wave { height: 44px; } }

/* --- 4c2. Nav über die sticky „Auf dieser Seite"-Leiste heben ---
   svw.css: .web-nav z-index:5, .web-anchor-nav z-index:50 → das Hover-Dropdown
   (im Stapelkontext der Nav) erschien HINTER der Sprungmarken-Leiste. Nav höher. */
.web-nav { z-index: 60; }

/* --- 4d. Fanshop-Absprung als Button neben „Tickets sichern" ---
   Tickets bleibt rot (primär), Fanshop in Ostsee (sekundär). Auf Mobile
   löst sich der Wrapper auf (display:contents), damit beide Buttons das
   bestehende Full-Width-Verhalten des Mobile-Menüs nutzen. */
.web-nav .nav-ctas { display: inline-flex; align-items: center; gap: 12px; }
.web-nav .cta.cta--shop { background: var(--sea); }
.web-nav .cta.cta--shop:hover { background: var(--sea-deep); }
@media (max-width: 1024px) {
  .web-nav .nav-ctas { display: contents; }
}

/* --- 5. Roter Lauf-Ticker (befüllt via svw-fanshop.js) -------- */
.svw-ticker {
  position: relative; z-index: 6;
  background: var(--red); color: #fff;
  font-family: var(--display);
  font-weight: 900; font-style: normal;
  font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden; white-space: nowrap;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.svw-ticker a { color: #fff; text-decoration: none; }
.svw-ticker__track {
  display: inline-block; white-space: nowrap;
  animation: svw-ticker-scroll 34s linear infinite;
}
.svw-ticker:hover .svw-ticker__track { animation-play-state: paused; }
.svw-ticker__item { padding: 0 6px; }
.svw-ticker__dot { opacity: 0.55; margin: 0 20px; }
@keyframes svw-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Reduziert-Bewegung: Ticker steht still */
@media (prefers-reduced-motion: reduce) {
  .svw-ticker__track { animation: none; }
}

/* ============================================================
   Pfeil-Piktogramme — ersetzen die Text-Pfeile (→ / ↗) in CTAs
   und Links durch ein sauberes SVG-Icon (per svw-fanshop.js).
   Erbt Farbe (currentColor) und Größe (em) vom umgebenden Text.
   ============================================================ */
.web .svw-arr {
  display: inline-block;
  width: 0.74em; height: 0.74em;
  vertical-align: -0.03em;
  margin-left: 0.32em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
/* Diagonal-Variante (externe Links) minimal kleiner, optisch gleich gewichtet */
.web .svw-arr.diag { width: 0.7em; height: 0.7em; vertical-align: 0; }

/* ============================================================
   Wärme vor Datenblatt (Florian-Wunsch 07/2026)
   ------------------------------------------------------------
   Kleine gesperrte JetBrains-Mono-Kicker/Meta ("zarte Claim-Lines")
   wirken zu technisch. Auf der Website in die Brand-Schrift heben:
   Barlow Condensed kursiv, größer, ungesperrt. svw.css bleibt unberührt.
   ============================================================ */
.web .label, .web .label-light,
.web .home-hero .text .eyebrow,
.web .endorser .meta {
  font-family: var(--display) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.01em !important;
}
.web .endorser .meta { opacity: 0.9; }
/* Rechte Meta-Notiz der Section-Köpfe: auch enttechnisiert, aber dezent */
.web .web-section .head .r {
  font-family: var(--display) !important;
  font-style: normal;
  font-weight: 700;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
}

/* --- DYN (Livestream-Partner der Liga) ---------------------------------
   Überall, wo auf DYN verlinkt wird, steht das Original-Logo (weißer
   Schriftzug, assets/dyn-wordmark-white.png) statt des Worts „DYN".
   Buttons in DYN-Blau #002F61 aus dem Logo. */
.cta.secondary.dyn { background: #002F61 !important; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
/* Spieltag-Buttons: nur das Logo (kein „Live"-Text) — Logo und Pfeil auf einer Mittelachse */
.cta.secondary.dyn img.dyn-mark { height: 1.3em; display: block; vertical-align: 0; }
.cta.secondary.dyn .dyn-arrow { display: block; line-height: 1; font-size: 0.9em; }
.cta.secondary.dyn:hover { background: #00224A !important; }
img.dyn-mark { height: 1.15em; width: auto; display: inline-block; vertical-align: -0.08em; }
.dyn-inline { display: inline-flex; align-items: center; gap: 6px; }
.dyn-tile .ctas a.primary.dyn { background: #002F61; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.dyn-tile .ctas a.primary.dyn:hover { background: #00224A; }
.dyn-tile .ghost-logo { position: absolute; right: -30px; bottom: -40px; width: 460px; opacity: 0.10; pointer-events: none; }
@media (max-width: 640px) { .dyn-tile .ghost-logo { width: 280px; } }
/* Das „Y" im DYN-Logo hat eine Unterlänge (~23,5 % der Bildhöhe). Damit D und N
   auf der Textgrundlinie stehen und Versalhöhe haben: Höhe = Versalhöhe/0,765,
   um den Unterlängen-Anteil nach unten versetzt. */
.dyn-tile .copy .display img.dyn-mark { height: 0.915em; vertical-align: -0.215em; margin-left: 0.12em; }

/* --- Hero-Typo kursiv (CD v4: Display kursiv) ---------------------------
   890fe97 hatte die Kursive projektweit auf normal gestellt. In den Heroes
   (alle tragen .svw-hero) kommt sie zurück: Headlines, Display-Elemente und
   Ghost-Zahlen. Barlow Condensed 800/900 italic sind in tokens.css eingebunden. */
.svw-hero h1,
.svw-hero h2,
.svw-hero .display,
.svw-hero .giant-number,
.svw-hero .ghost-num,
.svw-hero h1 *,
.svw-hero .display *,
.svw-hero .giant,
.svw-hero .number-bg,
.player-hero .first,
.player-hero .last,
.news-head h1,
.news-head h1 *,
/* wie im ersten Entwurf (Stand vor 890fe97): auch Hero-Buttons, Kennzahlen, Label */
.svw-hero a.primary,
.svw-hero a.outline,
.svw-hero a.cta,
.svw-hero .ctas a,
.svw-hero .quick-meta .v,
.mitglied-hero .label { font-style: italic !important; }

/* --- Startseite: „Komm in die Crew"-Kachel mit Crew-Foto --------------
   Rot bleibt Führungsfarbe: Foto liegt unter einem roten Verlauf, links
   (Text) fast deckend, rechts lässt es das Foto durchscheinen. */
.dual-cta .box.red.with-photo {
  background:
    linear-gradient(100deg, rgba(226,0,26,0.96) 0%, rgba(226,0,26,0.88) 45%, rgba(180,0,21,0.55) 100%),
    url('../assets/crew-aktion-stand-1.jpg') center 35% / cover;
}

/* --- Footer: Wettbewerbe (Liga + Pokal) -------------------------------- */
.web-footer .comp-row { display: flex; align-items: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.web-footer .comp-row .comp-label { font-family: var(--body); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6); width: 100%; margin-bottom: -6px; }
.web-footer .comp-row a { display: block; opacity: 0.92; transition: opacity .15s; }
.web-footer .comp-row a:hover { opacity: 1; }
.web-footer .comp-row img { height: 58px; width: auto; display: block; }