/* Influvera — Grundlagen: Tokens, Reset, Schale, Typografie, Bewegung.

   EIN SYSTEM, ZWEI MARKEN. Diese Datei ist die Schwester von
   trevera-website/assets/base.css: dieselbe Architektur, dieselben
   Klassennamen, dieselbe Schrift, dieselbe Raster- und Abstandsskala. Nur zwei
   Dinge sind anders, und die tragen den Unterschied allein:

     Trevera   heller Grund, Akzent Blau   — YouTube und alles ohne Casino
     Influvera dunkler Grund, Akzent Blau  — Casino und Sportsbook

   Warum nicht eine gemeinsame Datei fuer beide? Weil die beiden Seiten in
   getrennte Repositories ziehen. Eine geteilte Datei waere ein Band zwischen
   zwei Projekten, das beim ersten Umzug reisst — und dann steht die Kopie
   ohnehin doppelt da, nur unbemerkt.

   WER HIER ETWAS AN DER STRUKTUR AENDERT, aendert es drueben mit. Wer die
   Farbe aendert, nicht: Die Farbe IST der Unterschied. */

@font-face {
  font-family: "Archivo";
  src: url(/assets/fonts/archivo-variable.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Zwei Dunkelstufen statt einer: Ein Abschnittswechsel auf einer dunklen
     Seite braucht einen sichtbaren Sprung, sonst laeuft alles ineinander. */
  --tinte:        #0C1016;
  --tief:         #05070B;
  --karte:        #161B24;
  --hell:         #FFFFFF;

  --text-hell:    #0C1016;
  --text-leise:   #5A5F66;
  --text-dunkel:  #FFFFFF;
  --text-dunkel-leise: #99A1AD;

  /* DIE MARKENFARBE, aus dem Logo und den „Welcome to the team"-Grafiken auf
     instagram.com/influvera_official. Bis zum 29.08.2026 stand hier Gold —
     das war eine Erfindung des Bauenden, nicht die Marke. Max hat korrigiert:
     „influvera brand color wie in den instagram bildern anbei. diese hellere
     blau!"

     TREVERA IST AUCH BLAU (#2447FF), und das ist die Spannung, die diese
     Entscheidung mitbringt. Aufgefangen wird sie nicht durch den Akzent,
     sondern durch den GRUND: Trevera weiss, Influvera dunkel. Dazu der
     Abstand im Ton — dort tiefes Ultramarin, hier helles Himmelblau.

     Ein Akzent, zwei Helligkeiten, umgeschaltet vom Grund und nicht vom
     Geschmack: #4A9DF0 auf Tinte ergibt 6,8:1 und traegt Text, auf Weiss nur
     2,6:1 — dort steht die dunklere Stufe (#1B5FA8, 6,5:1 auf Weiss). */
  --blau:         #4A9DF0;
  --blau-tief:    #1B5FA8;

  --linie-hell:   rgba(12, 16, 22, 0.12);
  --linie-dunkel: rgba(255, 255, 255, 0.13);

  --schrift: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --t-h1:    clamp(2.75rem, 0.90rem + 7.6vw, 7.5rem);
  --t-h2:    clamp(2rem, 1.05rem + 3.9vw, 4.5rem);
  --t-h3:    clamp(1.375rem, 1.14rem + 0.95vw, 2rem);
  --t-lead:  clamp(1.125rem, 0.99rem + 0.57vw, 1.5rem);
  --t-body:  clamp(1.0625rem, 1.04rem + 0.10vw, 1.125rem);
  --t-knopf: 0.8125rem;
  --t-nav:   0.9375rem;
  --t-meta:  0.875rem;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;

  --rand: clamp(20px, 5vw, 64px);
  --breite: 84rem;
  --takt: clamp(80px, 8vw, 140px);
  --kopfhoehe: 68px;

  --r-klein: 4px;
  --r-gross: 16px;
  --r-pille: 999px;

  --schwung: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfhoehe) + 12px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--t-body);
  font-stretch: 100%;
  line-height: 1.6;
  color: var(--text-dunkel);
  background: var(--tinte);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, figcaption { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------- Die vier Gruende ----------
   Jede Sektion traegt genau eine dieser Klassen. Alles darin greift auf
   --akzent, --linie und --leise zu. Damit kann kein Bauteil je auf dem
   falschen Grund landen und dort unlesbar werden. */
.grund-dunkel {
  background: var(--tinte);
  color: var(--text-dunkel);
  --akzent: var(--blau);
  --linie: var(--linie-dunkel);
  --leise: var(--text-dunkel-leise);
}
.grund-tief {
  background: var(--tief);
  color: var(--text-dunkel);
  --akzent: var(--blau);
  --linie: var(--linie-dunkel);
  --leise: var(--text-dunkel-leise);
}
.grund-hell {
  background: var(--hell);
  color: var(--text-hell);
  --akzent: var(--blau-tief);
  --linie: var(--linie-hell);
  --leise: var(--text-leise);
}
.grund-blau {
  background: var(--blau);
  color: var(--tief);
  --akzent: var(--tief);
  --linie: rgba(12, 16, 22, 0.28);
  --leise: rgba(12, 16, 22, 0.78);
}

.band { padding-block: var(--takt); }
.band--linie { border-top: 1px solid var(--linie); }

.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-stretch: 86%;
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.04em;  line-height: 0.90; }
h2 { font-size: var(--t-h2); font-weight: 800; letter-spacing: -0.035em; line-height: 0.96; }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em;  line-height: 1.2; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 46ch;
  color: var(--leise, var(--text-dunkel-leise));
}

.zahl {
  font-stretch: 82%;
  font-weight: 800;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
  line-height: 0.84;
}
.zahl__einheit {
  font-size: 0.42em;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.01em;
  margin-left: 0.1em;
}

a { color: inherit; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--akzent, var(--blau));
  outline-offset: 3px;
  border-radius: var(--r-klein);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--rand); top: 0;
  transform: translateY(-120%);
  z-index: 60;
  padding: var(--s-1) var(--s-2);
  background: var(--blau);
  color: var(--tief);
  text-decoration: none;
}
.skip:focus { transform: translateY(0); }

/* ---------- Wortmarke ---------- */
.wortmarke {
  display: inline-block;
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  font-size: 1.375rem;
}

/* ---------- Kopfleiste ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 16, 22, 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--schwung), background-color 0.25s var(--schwung);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .kopf {
    background: rgba(12, 16, 22, 0.7);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
            backdrop-filter: saturate(160%) blur(18px);
  }
}
.kopf.abgesetzt { border-bottom-color: var(--linie-dunkel); }
.kopf__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
  min-height: var(--kopfhoehe);
  padding-block: 10px;
  flex-wrap: wrap;
}
.kopf__nav { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.kopf__link {
  font-size: var(--t-nav);
  font-weight: 500;
  color: var(--text-dunkel-leise);
  text-decoration: none;
}
.kopf__link:hover { color: var(--text-dunkel); }
.kopf__knopf { padding: 14px 20px 12px; }

/* Am Telefon eine Zeile, nicht zwei — dieselbe Rechnung wie bei Trevera:
   Wortmarke und der eine Knopf, der etwas ausloest, passen nebeneinander. */
@media (max-width: 33.75rem) {
  :root { --kopfhoehe: 56px; }
  .kopf__nav { display: none; }
  .kopf__knopf { padding: 12px 18px 10px; }
}

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-block;
  padding: 19px 28px 17px;
  border: 1px solid var(--blau);
  border-radius: var(--r-pille);
  background: var(--blau);
  color: var(--tief);
  font-size: var(--t-knopf);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.22s var(--schwung), background-color 0.22s var(--schwung), border-color 0.22s var(--schwung);
}
.knopf:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--tief); transform: translateY(-2px); }
.knopf:active { transform: translateY(0); }
.grund-blau .knopf { background: var(--tief); border-color: var(--tief); color: #FFFFFF; }
.grund-blau .knopf:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--tief); }

.knopf--leise {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.knopf--leise:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--tief); }
.grund-hell .knopf--leise:hover { background: var(--tief); border-color: var(--tief); color: #FFFFFF; }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* ---------- Sektionskopf ---------- */
.kopfzeile { margin-bottom: clamp(32px, 4vw, 56px); max-width: 54rem; }
.kopfzeile .lead { margin-top: var(--s-3); }

/* ---------- Fusszeile ---------- */
.fuss { padding-block: var(--s-8); }
.fuss__raster {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .fuss__raster { grid-template-columns: 1.6fr 1fr 1fr; } }
.fuss__titel {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dunkel-leise);
  margin-bottom: var(--s-2);
}
.fuss__liste li + li { margin-top: 0.5rem; }
.fuss a { color: var(--text-dunkel-leise); text-decoration: none; }
.fuss a:hover { color: var(--text-dunkel); }
.fuss__recht { margin-top: var(--s-6); font-size: var(--t-meta); color: var(--text-dunkel-leise); max-width: 70ch; }

/* Der Hinweis auf das Mindestalter steht in der Markenfarbe und nicht im Kleingedruckten.
   Wer Casino-Marken bewirbt, sagt das sichtbar — nicht, weil eine Behoerde es
   verlangt, sondern weil es sonst wie ein Versehen aussieht. */
.alterswarnung {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--linie-dunkel);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-meta);
  color: var(--text-dunkel-leise);
  max-width: 70ch;
}
.alterswarnung b {
  color: var(--blau);
  font-weight: 800;
  font-stretch: 86%;
  font-size: 1rem;
  flex: 0 0 auto;
}

/* ---------- Trefflaechen am Telefon ----------
   GEMESSEN, nicht geschaetzt (29.08.2026, Playwright auf 320, 390 und 430 px):
   Die Wortmarke im Kopf war 22 px hoch, die Verweise in der Fusszeile 19 px,
   der Sprunglink 43 px. Ein Finger trifft zuverlaessig ab etwa 44 px — darunter
   tippt man daneben, und zwar genau bei den Verweisen, die jemand am Telefon
   wirklich braucht (Impressum, Kontakt, die andere Marke).

   DER TRICK MIT DEM NEGATIVEN AUSSENABSTAND ist Absicht: Das Polster
   vergroessert die Trefflaeche, der gleich grosse negative Aussenabstand nimmt
   sie aus dem Layout wieder heraus. Die Leiste bleibt also genau so hoch wie
   vorher — nur der Finger hat mehr Platz.

   FLIESSTEXT-VERWEISE bleiben ausgenommen. Ein Verweis mitten im Satz laesst
   sich nicht vergroessern, ohne die Zeile auseinanderzureissen; dafuer gibt es
   in den Richtlinien ausdruecklich die Ausnahme fuer eingebettete Verweise. */
@media (max-width: 47.99rem) {
  .kopf__innen .wortmarke,
  .fuss__liste a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
  /* Ohne das stuenden die Zeilen nach dem Polster doppelt so weit auseinander. */
  .fuss__liste li + li { margin-top: 0.125rem; }

  .skip { padding: 12px var(--s-2); }
}

/* ---------- Auftritt beim Scrollen ----------
   Wo der Browser `animation-timeline: view()` kennt, steuert der Scrollstand
   die Blende ganz ohne Skript. Wo nicht, faellt die Animation auf Dauer 0 mit
   `both` zurueck — das Element steht dann einfach fertig da. Nichts wartet auf
   JavaScript, nichts bleibt unsichtbar liegen. */
@keyframes auftritt { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  .auf {
    animation: auftritt linear both;
    animation-timeline: view();
    animation-range: entry 4% entry 42%;
  }
  .auf--2 { animation-range: entry 10% entry 48%; }
  .auf--3 { animation-range: entry 16% entry 54%; }
  .auf--4 { animation-range: entry 22% entry 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .auf { animation: none; }
  * { scroll-behavior: auto !important; }
}