/* Influvera — Startseite. Nur was ausschliesslich hier vorkommt.

   TAKT DER GRUENDE, von oben nach unten:
     dunkel · tief · tief · dunkel · dunkel · tief · HELL · blau · tief
   Der eine helle Streifen gehoert der Schwestermarke Trevera. Er sagt schon
   durch seine Farbe, dass dort etwas anderes anfaengt — Trevera IST hell.

   VERWANDT MIT trevera-website/assets/home.css, NICHT IDENTISCH. Gleich sind
   Mechanik und Klassennamen (Laufband, Kacheln, Ablaufreihe, Zahlenband);
   anders sind Grund, Akzent, Kachelgroesse, Versatz und Takt. Wer die Mechanik
   aendert, sieht drueben nach; wer die Farbe aendert, nicht. */

/* ---------- Hero ---------- */
.hero { padding-block: clamp(64px, 8vw, 120px) clamp(48px, 5vw, 80px); }
.hero__raster {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56.25rem) {
  .hero__raster { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--s-8); }
}
.hero h1 { margin-bottom: var(--s-4); }
.hero h1 em { font-style: normal; color: var(--blau); }
.hero .lead { margin-bottom: var(--s-6); }
.hero__clip { margin: 0; }
.hero__clip .klip { width: 100%; max-width: 22rem; }
@media (max-width: 56.24rem) { .hero__clip .klip { margin-inline: auto; } }

/* ---------- Clip-Wand ----------
   Dieselbe Mechanik wie bei Trevera: zwei identische Saetze hintereinander,
   verschoben um genau einen Satz, deshalb springt nichts beim Umlauf.

   ZWEI DINGE SIND HIER ANDERS, und beide haben einen Grund.
   1. Die Kacheln sind kleiner. Influvera hat dreizehn verschiedene Clips, nicht
      sechs — bei dieser Groesse stehen fuenf bis sechs im Bild und trotzdem
      keiner zweimal. Genau die Wiederholung war drueben das Problem, nicht die
      Menge an Bewegung.
   2. Die Kacheln stehen versetzt. Eine schnurgerade Reihe auf dunklem Grund
      liest sich als Streifen; die Wellenlinie liest sich als Wand. Der Versatz
      steht in `translate` und nicht in `transform` — sonst loeschte ihn die
      Vergroesserung beim Ueberfahren. */
.wand { padding-block: clamp(40px, 4vw, 64px) var(--takt); }
.wand__band {
  overflow: hidden;
  padding-block: 26px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.wand__zug {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: wand-lauf 88s linear infinite;
}
@keyframes wand-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 7px), 0, 0); }
}
.wand__band:hover .wand__zug,
.wand__band:focus-within .wand__zug { animation-play-state: paused; }

.klip {
  position: relative;
  flex: 0 0 auto;
  width: clamp(190px, 20vw, 290px);
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--linie-dunkel);
  background: var(--karte);
  display: block;
  text-decoration: none;
  color: var(--text-dunkel);
  transition: transform 0.3s var(--schwung), border-color 0.3s var(--schwung);
}
.wand__zug .klip:nth-child(odd)  { translate: 0 -18px; }
.wand__zug .klip:nth-child(even) { translate: 0 18px; }
@media (max-width: 40rem) {
  .klip { width: 58vw; }
  .wand__zug .klip:nth-child(odd)  { translate: 0 -10px; }
  .wand__zug .klip:nth-child(even) { translate: 0 10px; }
}
.klip:hover { transform: scale(1.04); border-color: var(--blau); }
.klip__bild, .klip__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Das Standbild liegt UEBER dem Video. Solange keine Datei vorliegt oder kein
   Skript laeuft, sieht man das Standbild — ohne dass irgendwo im Stylesheet
   etwas auf null stuende und auf JavaScript wartete. Laeuft das Video
   wirklich, nimmt das Skript das Standbild weg. */
.klip__bild { z-index: 1; }
.klip--laeuft .klip__bild { display: none; }

/* KEINE BESCHRIFTUNG AUF DER KACHEL, und das ist eine Sachentscheidung, keine
   Gestaltungslaune: Zu diesen dreizehn Beitraegen liess sich der Creator-Name
   nicht zweifelsfrei aufloesen. Ein Name, der geraten ist, waere schlimmer als
   keiner — der Beitrag selbst nennt ihn, und dorthin fuehrt die Kachel. Der
   Verweis braucht trotzdem einen lesbaren Namen, sonst kuendigt ein
   Screenreader „Link" an und sonst nichts. */

/* Solange keine Videodatei laeuft, wandert das Standbild langsam. Ein reglos
   stehendes Standbild liest sich als kaputt, ein wanderndes nicht. Im
   laufenden Band waere das eine zweite Bewegung ueber der ersten — dort bleibt
   es deshalb ruhig. */
@keyframes klip-zug {
  from { transform: scale(1.08) translate3d(-1.6%, 1.4%, 0); }
  to   { transform: scale(1.08) translate3d(1.6%, -1.4%, 0); }
}
.klip__bild { animation: klip-zug 17s ease-in-out infinite alternate; }
.wand__zug .klip__bild { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .klip__bild { animation: none; }
  .klip:hover { transform: none; }
  .wand__zug { animation: none; }
  .wand__band { overflow-x: auto; }
}

/* ---------- Zahlenband ----------
   ZWEI ZAHLEN, NICHT DREI. Trevera hat drei, weil Trevera drei belegte hat.
   Hier stehen genau die, die belegt sind; eine dritte waere geschaetzt, und
   eine geschaetzte Zahl neben zwei echten macht alle drei wertlos. Kommen die
   Kampagnenzahlen nach, passt eine dritte Spalte ohne weiteres dazu. */
.zahlenband { padding-block: clamp(64px, 7vw, 108px); }
.zahlenband__raster {
  display: grid;
  gap: var(--s-6) var(--s-8);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .zahlenband__raster { grid-template-columns: repeat(2, 1fr); } }
.kennzahl__wert { display: block; font-size: clamp(3.25rem, 1.4rem + 7.2vw, 7rem); }
.kennzahl__wert .zahl__einheit { color: var(--blau); }
.kennzahl__linie { height: 2px; background: var(--linie); margin: var(--s-3) 0 0.85rem; }
.kennzahl__label { font-size: 1.0625rem; color: var(--leise); }

/* ---------- Karten ---------- */
.karten {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .karten { grid-template-columns: repeat(3, 1fr); } }
.karte {
  background: var(--karte);
  border: 1px solid var(--linie-dunkel);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 40px);
}
.karte h3 { margin-bottom: var(--s-2); }
.karte p { color: var(--leise); }

/* ---------- Der belegte Fall ----------
   EIN Markenname steht auf dieser Seite, und er bekommt deshalb keine Kachel
   in einer Reihe, sondern einen eigenen Streifen. Rechts daneben stehen die
   drei Angaben, die wirklich belegt sind — Marke, Region, Plattform.

   Warum ueberhaupt etwas rechts steht: Bei Trevera stand an genau so einer
   Stelle die halbe Breite leer, und der Betreiber hat es gemeldet
   („warum ist rechts auf einmal so viel frei?"). Die Antwort ist nicht
   Dekoration, sondern der Rest der Auskunft: Wer die Ueberschrift liest, will
   als Naechstes wissen, wo und worauf. */
.augenbraue {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: var(--s-2);
}

.fall__innen {
  display: grid;
  gap: var(--s-6);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 56.25rem) {
  .fall__innen { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: var(--s-8); }
}
.fall__innen .lead { margin-top: var(--s-3); }

.beleg {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--linie);
}
.beleg dt {
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leise);
  padding-top: var(--s-3);
}
.beleg dd {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--linie);
  font-weight: 700;
  font-stretch: 86%;
  letter-spacing: -0.01em;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.15;
}
.beleg dd:last-of-type { margin-bottom: 0; }

/* ---------- Die Felder ----------
   Typografisch, nicht mit Logos. Fremde Logos ohne schriftliche Freigabe auf
   die eigene Seite zu legen ist bei Casino-Marken kein Kavaliersdelikt; hier
   stehen ohnehin keine Marken, sondern die Felder, in denen platziert wird —
   Markennamen kommen erst auf die Seite, wenn eine Kampagne wirklich lief.
   Dieselbe Regel wie drueben, nur haerter, weil die Branche empfindlicher ist. */
.marken {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) { .marken { grid-template-columns: repeat(4, 1fr); } }
.marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 8.5rem;
  padding: var(--s-3);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--r-gross);
  background: var(--karte);
  text-align: center;
  transition: border-color 0.25s var(--schwung), transform 0.25s var(--schwung);
}
.marke:hover { border-color: var(--blau); transform: translateY(-4px); }
.marke__name {
  font-weight: 800;
  font-stretch: 86%;
  letter-spacing: -0.02em;
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
  line-height: 1.05;
}
.marke__wo { font-size: var(--t-meta); color: var(--leise); }
@media (prefers-reduced-motion: reduce) { .marke:hover { transform: none; } }

/* ---------- Ablauf ---------- */
.ablauf { display: grid; gap: 0; }
.schritt {
  position: relative;
  display: grid;
  gap: var(--s-1) var(--s-4);
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--linie);
  transition: opacity 0.4s var(--schwung);
}
/* DIE SPALTEN STEHEN AUSDRUECKLICH DA. `.schritt p` waere sonst spezifischer
   als `.schritt__nr` und zoege den Fliesstext in die schmale Zahlenspalte —
   drueben stand deshalb ein Wort je Zeile, bis es jemand gemessen hat. */
.schritt__nr { grid-column: 1; grid-row: 1 / span 2; }
.schritt h3  { grid-column: 2; }
.schritt p:not(.schritt__nr) { grid-column: 2; }
@media (min-width: 56.25rem) {
  .schritt { grid-template-columns: 6.5rem minmax(0, 22rem) minmax(0, 1fr); align-items: center; }
  .schritt__nr { grid-row: 1; }
  .schritt p:not(.schritt__nr) { grid-column: 3; }
}
.js .schritt { opacity: 0.5; }
.js .schritt.ist-aktiv { opacity: 1; }
.schritt::before {
  content: "";
  position: absolute;
  left: calc(var(--rand) * -0.5);
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--akzent);
  transform: translateY(-50%);
  transition: height 0.4s var(--schwung);
}
.schritt.ist-aktiv::before { height: 58%; }
.schritt__nr {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 800;
  font-stretch: 82%;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--leise);
  transition: color 0.4s var(--schwung);
}
.schritt.ist-aktiv .schritt__nr { color: var(--akzent); }
.schritt h3 { transition: transform 0.4s var(--schwung); }
.schritt.ist-aktiv h3 { transform: translateX(6px); }
.schritt p { color: var(--leise); }

@media (prefers-reduced-motion: reduce) {
  .js .schritt { opacity: 1; }
  .schritt.ist-aktiv h3 { transform: none; }
}

/* ---------- Die Schwestermarke ----------
   Der einzige helle Streifen der Seite. Das ist Absicht: Trevera IST hell, und
   der Farbwechsel sagt vor dem ersten Wort, dass hier etwas anderes anfaengt.
   Auf trevera.media steht derselbe Streifen spiegelverkehrt — dort dunkel, mit
   dem Blau von hier. */
.schwester__innen {
  display: grid;
  gap: var(--s-4);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 56.25rem) {
  .schwester__innen { grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: var(--s-8); }
}
.schwester h2 { max-width: 20ch; }
.schwester .lead { margin-top: var(--s-3); }
.schwester__seite { display: grid; gap: var(--s-3); justify-items: start; }
.schwester__marke {
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1;
  color: #2447FF;
  text-decoration: none;
}
.schwester__marke:hover { text-decoration: underline; text-decoration-thickness: 3px; }
/* Am Telefon ist der Schriftzug zwar gross, seine Box aber nur so hoch wie die
   Zeile — gemessen 32 px. Polster plus negativer Aussenabstand geben dem Finger
   Platz, ohne den Streifen auseinanderzuziehen. */
@media (max-width: 47.99rem) {
  .schwester__marke { display: inline-block; padding-block: 8px; margin-block: -8px; }
}

/* ---------- Schlussaufruf ---------- */
.schluss__innen {
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  text-align: center;
}
.schluss h2 { max-width: 20ch; }
.schluss .lead { color: rgba(12, 16, 22, 0.82); max-width: 52ch; }

/* ---------- Am Telefon mittig, was mittig gehoert ----------
   Dieselbe Regel wie bei Trevera, und sie ist eine Regel und kein Gefuehl:
   Mittig steht, was Ansage ist (Ueberschrift, Vorspann, Zahl, Knopfreihe);
   linksbuendig bleibt, was Fliesstext ist — mittiger Fliesstext hat auf jeder
   Zeile einen anderen Anfang und liest sich deshalb schlechter. */
@media (max-width: 47.99rem) {
  .hero { text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero .knopf-reihe { justify-content: center; }
  .kopfzeile { text-align: center; margin-inline: auto; }
  .kopfzeile .lead { margin-inline: auto; }
  .kennzahl { text-align: center; }
  .fall__innen > div:first-child { text-align: center; }
  .fall__innen .lead { margin-inline: auto; }
  .schwester__innen { text-align: center; justify-items: center; }
  .schwester .lead { margin-inline: auto; text-align: left; }
  .schwester__seite { justify-items: center; }
}