/* ==========================================================================
   PADEL VOLLGAS — Design-Tokens, Schrift, Animationen, Bausteine
   Quelle: Bausteine-Set (Claude Design), Stand 09.09.2026 — Paket v1,
   Referenz und Snippets unter docs/vollgas-bausteine/.

   Wird nur auf Seiten geladen, die einen Vollgas-Baustein zeigen, und immer
   NACH style.css. Anton und Archivo sind dort schon deklariert und liegen
   unter assets/fonts/ — hier kommt nur IBM Plex Mono dazu (self-hosted,
   Latin-Subset, reicht für Deutsch inkl. Umlaute).
   ========================================================================== */

/* ---- Schrift (self-hosted) ---- */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-700-latin.woff2") format("woff2");
}

/* ---- Farb-Tokens ---- */
:root {
  --vg-orange:   #ff5500; /* Primär-Akzent */
  --vg-rost:     #D84315; /* dunkler Akzent */
  --vg-hell:     #ffb08a; /* helles Orange */
  --vg-schwarz:  #0d0b09; /* Modul-Hintergrund dunkel */
  --vg-schwarz2: #1a1613; /* Text auf hell / Flächen */
  --vg-sand:     #f4ede1; /* heller Grund */
  --vg-linie:    #191410; /* Trennlinien auf dunkel */
  --vg-text-hell:#a59c90; /* Fließtext auf dunkel */
  --vg-text-dim: #6b6258; /* gedämpfte Labels auf dunkel */
  --vg-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ---- Animationen (Dot-Matrix-Kennzahlen) ---- */
@keyframes vgLedOn {
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes vgLedIdle {
  0%, 100% { opacity: .06; }
  50%      { opacity: .24; }
}
/* Modul außerhalb des Bilds: alle Animationen darin stehen still. Die Klasse
   setzt vollgas.js per IntersectionObserver; !important, weil die Animation
   als Inline-Stil am Punkt hängt und sonst gewinnen würde. */
.vg-paused div { animation-play-state: paused !important; }
/* „Bewegung reduzieren": keine Vollgas-Animation, jeder Punkt steht sofort im
   Endzustand. vollgas.js schreibt den Endzustand ohnehin als Inline-Stil und
   legt bei dieser Einstellung keine Animation an; die Regel greift zusätzlich,
   falls die Einstellung nach dem Laden wechselt. */
@media (prefers-reduced-motion: reduce) {
  [data-vollgas] div { animation: none !important; }
}

/* ==========================================================================
   02 — Halftone-Header (Bereichskopf, z. B. /wissen/)
   Werte ab 900 px entsprechen 1:1 dem Snippet 02; darunter gelten die
   Abstände des bestehenden Titelbands (.band), damit Kopf und Seite auf dem
   Telefon dieselbe Kante halten. Abstände im 8-px-Raster.
   ========================================================================== */
.vg-header {
  position: relative; overflow: hidden; display: flex;
  background: var(--vg-schwarz); min-height: 360px;
}
/* Unter 900 px wird die Kuppel auf 60 % verkleinert und sitzt in der oberen
   rechten Ecke — sonst läge das Raster hinter Überschrift und Text. */
.vg-header__dome {
  position: absolute; top: -120px; right: -120px; width: 600px; height: 420px;
  pointer-events: none; transform: scale(.6); transform-origin: top right;
}
.vg-header__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 0% 100%, rgba(255,85,0,.10) 0%, transparent 70%);
}
.vg-header__inner {
  position: relative; width: 100%; padding: 24px 20px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.vg-header__brand {
  display: flex; align-items: center; gap: 16px; font-family: var(--vg-mono);
}
.vg-header__logo { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .02em; }
.vg-header__logo span { color: var(--vg-orange); }
.vg-header__path {
  font-size: 12px; color: var(--vg-text-dim); letter-spacing: .14em; text-transform: uppercase;
}
.vg-header__tag { font-family: var(--vg-mono); margin-bottom: 16px; }
.vg-header__tag span {
  background: var(--vg-orange); color: var(--vg-schwarz); font-size: 13px; font-weight: 700;
  padding: 3px 9px; letter-spacing: .06em; text-transform: uppercase;
}
.vg-header__title {
  font-family: 'Anton', sans-serif; font-weight: 400; font-size: 44px; line-height: .9;
  color: #fff; margin: 0; text-transform: uppercase; max-width: 560px;
}
.vg-header__title span { color: var(--vg-orange); }
.vg-header__lead {
  font-family: var(--vg-mono); font-size: 14px; line-height: 1.6; color: var(--vg-text-hell);
  margin: 16px 0 0; max-width: 440px;
}
.vg-header__chips {
  display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--vg-mono); font-size: 12px;
}
.vg-chip { border: 1px solid #2c261f; color: #c5bcb0; padding: 7px 13px; text-decoration: none; }
a.vg-chip:hover { border-color: var(--vg-orange); color: #fff; }
.vg-chip--on {
  background: var(--vg-orange); border-color: var(--vg-orange); color: var(--vg-schwarz); font-weight: 700;
}

@media (min-width: 900px) {
  .vg-header { min-height: 460px; }
  .vg-header__dome { top: -90px; transform: none; }
  .vg-header__inner { padding: 44px 40px; }
  .vg-header__title { font-size: 64px; }
  .vg-header__lead { margin-top: 24px; }
}

/* ---- Seitenkopf über einem Vollgas-Modul ----
   Das bestehende Titelband (.band) bekommt den Grund der Module, damit Kopf
   und Modul als ein Element lesen — nicht als zwei Schwarztöne übereinander. */
.band--vg { background: var(--vg-schwarz); }

/* ==========================================================================
   01 — Hero mit Typo (Startseite)
   Ab 900 px 1:1 die Werte des Snippets 01: Foto in voller Breite, Text als
   Block links darüber. Darunter würde das 16:9-Foto zu flach für die
   Überschrift — dort liegt es als Fläche hinter dem Text (object-fit: cover),
   und der Textblock gibt die Höhe vor. Abstände unter 900 px im 8-px-Raster.
   ========================================================================== */
.vg-hero { position: relative; overflow: hidden; background: var(--vg-schwarz); }
.vg-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 68% 50%; opacity: .9;
}
.vg-hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,11,9,.92) 0%, rgba(13,11,9,.72) 48%, rgba(13,11,9,.28) 100%);
}
.vg-hero__inner {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 400px; padding: 40px 20px; max-width: 560px;
}
.vg-hero__tag { font-family: var(--vg-mono); margin-bottom: 16px; }
.vg-hero__tag span {
  background: var(--vg-orange); color: var(--vg-schwarz); font-size: 13px; font-weight: 700;
  padding: 3px 9px; letter-spacing: .06em; text-transform: uppercase;
}
.vg-hero__title {
  font-family: 'Anton', sans-serif; font-weight: 400; font-size: 48px; line-height: .88;
  color: #fff; margin: 0; text-transform: uppercase;
}
.vg-hero__title span { color: var(--vg-orange); }
.vg-hero__lead {
  font-family: var(--vg-mono); font-size: 14px; line-height: 1.6; color: var(--vg-text-hell);
  margin: 16px 0 0; max-width: 440px;
}
.vg-hero__actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px;
  font-family: var(--vg-mono); font-size: 13px;
}
.vg-hero__btn {
  display: inline-block; background: var(--vg-orange); color: var(--vg-schwarz);
  font-weight: 700; padding: 11px 18px; text-decoration: none;
}
.vg-hero__btn--ghost {
  background: transparent; border: 1px solid #38302a; color: #c5bcb0; font-weight: 400;
  padding: 10px 17px;
}
.vg-hero__btn:hover { background: var(--vg-hell); }
.vg-hero__btn--ghost:hover { background: transparent; border-color: var(--vg-orange); color: #fff; }

@media (min-width: 900px) {
  .vg-hero { height: 560px; }
  /* Bilder strecken sich nicht über left/right — Breite und Höhe deshalb
     ausdrücklich: Rahmen 24 px rundum. */
  .vg-hero__img {
    top: 24px; left: 24px; width: calc(100% - 48px); height: calc(100% - 48px);
    object-fit: cover; object-position: 68% 50%;
  }
  .vg-hero__shade {
    background: linear-gradient(90deg, rgba(13,11,9,.92) 0%, rgba(13,11,9,.6) 42%, rgba(13,11,9,0) 72%);
  }
  .vg-hero__inner { position: absolute; left: 0; top: 0; bottom: 0; min-height: 0; padding: 0 44px; }
  .vg-hero__title { font-size: 66px; }
  .vg-hero__lead { margin-top: 20px; }
  .vg-hero__actions { gap: 10px; }
  /* Variante klein (/ueber-mich/): gleicher Aufbau, nur flacher; das Gesicht
     sitzt in der Bildmitte, deshalb mittig statt rechts ausgerichtet. */
  .vg-hero--klein { height: 440px; }
  .vg-hero--klein .vg-hero__img { object-position: 50% 40%; }
}

/* ==========================================================================
   03 — Dot-Matrix-Kennzahlen, animiert (/standorte/)
   Ab 900 px 1:1 die Werte des Snippets 03: drei Spalten mit Trennlinie
   rechts. Darunter stehen die drei Zellen untereinander — die Matrix ist
   253 px breit, drei davon passen erst ab rund 900 px nebeneinander. Die
   Kopfzeile des Snippets entfällt; Datenstand steht in der Fußzeile.
   ========================================================================== */
.vg-kpi { background: var(--vg-schwarz); overflow: hidden; font-family: var(--vg-mono); }
.vg-kpi__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.vg-kpi__cell { padding: 32px 20px 24px; border-bottom: 1px solid var(--vg-linie); }
.vg-kpi__cell:last-child { border-bottom: 0; }
.vg-kpi__label { text-align: center; margin-top: 24px; }
.vg-kpi__tag {
  background: var(--vg-orange); color: var(--vg-schwarz); font-size: 12px; font-weight: 700;
  padding: 3px 9px; letter-spacing: .1em; text-transform: uppercase;
}
.vg-kpi__tag--hell { background: var(--vg-hell); }
.vg-kpi__note { font-size: 12px; color: var(--vg-text-dim); margin-top: 11px; }
@media (min-width: 900px) {
  .vg-kpi__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vg-kpi__cell { padding: 40px 24px 32px; border-bottom: 0; border-right: 1px solid var(--vg-linie); }
  .vg-kpi__cell:last-child { border-right: 0; }
  .vg-kpi__label { margin-top: 26px; }
}

/* ==========================================================================
   01 — Mono-Zeile im Hero (Startseite)
   Die Kennzahlen-Zeile aus dem Snippet 01, zwischen Überschrift und Text.
   ========================================================================== */
.vg-hero__meta {
  font-family: var(--vg-mono); font-size: 14px; line-height: 1.6; color: var(--vg-text-hell);
  margin-top: 16px;
}
@media (min-width: 900px) {
  .vg-hero__meta { margin-top: 20px; }
}

/* ==========================================================================
   05 — Density-Feld, Variante Dots, als Hintergrund des Seitenkopfs (/turniere/)
   Das Raster liegt hinter Kicker, Überschrift und Kennzahlen des Titelbands;
   es füllt die Bandhöhe (data-fill) und blendet animiert ein (data-animated).
   Links deckt ein Verlauf ab, damit der Text lesbar bleibt; rechts, wo das
   Raster am dichtesten ist, bleibt es frei.
   ========================================================================== */
.vg-band-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vg-band-bg > [data-vollgas] { position: absolute; inset: 0; }
.vg-band-bg__shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,11,9,.9) 0%, rgba(13,11,9,.6) 45%, rgba(13,11,9,.05) 100%);
}
/* :where() hält die Spezifität bei null, damit .vg-band-cta und .vg-band-stand
   absolut bleiben. */
.band--vg > :where(:not(.vg-band-bg)) { position: relative; }
.vg-band-stand {
  margin-top: 12px; font-family: var(--vg-mono); font-size: 12px;
  letter-spacing: .06em; color: var(--vg-hell);
}
/* Kennzahlen im Titelband: eine Zahl samt Etikett bleibt zusammen; passt die
   Reihe nicht in die Breite, rückt die ganze Kennzahl in die nächste Zeile. */
.band--vg .band-stats { flex-wrap: wrap; row-gap: 8px; }
.band--vg .band-stats .stat { white-space: nowrap; }
/* Höheres Titelband (/turniere/): mehr Luft um Überschrift und Kennzahlen,
   ab 900 px mittig in einer festen Mindesthöhe wie die Heros. */
.band--hoch { padding-top: 40px; padding-bottom: 32px; }
.band--hoch .band-stats { margin-top: 24px; }
/* Sprung zur Karte oben rechts im Titelband (/standorte/) */
.vg-band-cta {
  position: absolute; top: 24px; right: 20px; font-family: 'Anton', sans-serif; font-size: 16px;
  color: var(--vg-orange); text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
}
.vg-band-cta:hover { color: var(--vg-hell); }
@keyframes vgDotOn {
  from { opacity: 0; transform: scale(.3); }
  to   { opacity: var(--o, 1); transform: scale(1); }
}
@keyframes vgDotPulse {
  from { opacity: var(--o, 1); }
  to   { opacity: calc(var(--o, 1) * .45); }
}

@media (min-width: 900px) {
  .vg-band-cta { top: 44px; right: 40px; }
  .band--hoch {
    min-height: 440px; display: flex; flex-direction: column; justify-content: center;
    padding-top: 48px; padding-bottom: 48px;
  }
  .band--hoch .display { margin-top: 12px; }
  .band--hoch .band-stats { margin-top: 32px; }
  .band--hoch .vg-band-stand { margin-top: 16px; }
}