@charset "UTF-8";
/* Affiliate-Landingpage (/cash/affiliate) — eigenes Stylesheet, nur dort geladen
   (@yield('styles') in cash/app.blade.php). Light-Theme; Dark-Overrides stehen in
   dark.scss, weil dark.css als eigenes File nachgeladen wird und per !important gewinnt.
   Build: sass public/affiliate.scss public/affiliate.css */
/* Seitenbreite dieser Landingpage (Stevie, 2026-07-16: 1068 -> 1280).
   Der Rest der App liegt bei 1068 (Header/Footer aus app.css) — die FAQ zieht
   unten mit, weil sie mitten in dieser Seite sitzt. */
/* Breite der zentrierten Inhaltsbloecke (schmaler als die Seite). */
/* Die FAQ steht bewusst schmaler als die uebrigen Bloecke (Stevie) — nur hier aendern. */
/* Akzent fuer Level 2 — Violett statt des frueheren Orange (Stevie, 2026-07-17).
   Passt zum Umhang des Teddys und haelt Abstand zum Brand-Blau von L1.
   ACHTUNG: das Netzwerk-SVG in affiliate.blade.php traegt den Wert hartkodiert
   (SVG-fill kann keine SCSS-Variable lesen) — dort mitziehen. */
/* Fuellung der dunklen Fakten-Karte. Die Badge darauf nutzt denselben Wert als
   Schriftfarbe (Stevie) — nur hier aendern, dann bleiben beide synchron. */
/* Teddy an der Tier-Karte. Die drei PNGs sind aus EINEM Bild gecuttet:
   Koerper 565x1248, Pfote oben 166x110, Pfote rechts 70x486.
   $teddyH skaliert den Koerper, $teddyScale leitet daraus die Pfotenbreiten ab —
   nur $teddyH anfassen, dann bleiben Arm und Pfoten im selben Massstab.
   $teddyScale = $teddyH / 1248 (Originalhoehe des Koerpers). */
.AffiliatePage {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem 2.5rem;
  box-sizing: border-box;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  /* Kein overflow mehr (Stevie, 2026-07-16) — Teddy und Hero-Glow duerfen ueber
     die Seitenbreite hinausragen. Vorher stand hier overflow-x:clip gegen den
     horizontalen Scroll, den beide ausloesen. */
}

/* Die FAQ ist die globale .PlayToEarnPageQuestions (app.css, fixe 1068px) und
   liegt mitten in dieser Seite. Hier bekommt sie den Auftritt des
   "Real cash, no strings"-Blocks (Stevie): zentrierte Ueberschrift ueber einer
   grauen, zentrierten Box mit internen Trennlinien — statt full-width gestreckt.
   Greift nur hier, weil affiliate.css nur auf dieser Seite und nach app.css laedt.
   Die app.css-Werte sind teils fix (width:1068px auf .__View UND .faq-wrapper),
   deshalb werden beide ueberschrieben — sonst haelt der Wrapper die alte Breite. */
.PlayToEarnPageQuestions {
  /* Der Block liegt AUSSERHALB von .AffiliatePage und erbt deren seitliches
     Padding nicht — ohne das hier klebt die graue Box mobil am Displayrand,
     waehrend alle anderen Bloecke 1rem Luft haben. border-box, weil der Block
     bereits width:100% aus app.css mitbringt. */
  box-sizing: border-box;
  padding: 0 1rem;
  /* Luft zum Footer (Stevie). Die FAQ ist der letzte Block der Seite und lag
     mobil mit 0px direkt auf dem Footer, auf Desktop mit 32px. Der Wert ergibt
     zusammen mit dem 32px-gap von <main> die 112px der uebrigen Blockabstaende
     — Desktop-Wert steht in der 900px-Query. */
  margin-bottom: 4.5rem;
}
.PlayToEarnPageQuestions .__View {
  width: 900px;
  max-width: 100%;
  margin: 0 auto;
}
.PlayToEarnPageQuestions {
  /* Ueberschrift wie die anderen Section-Headlines: zentriert, ausserhalb der Box. */
}
.PlayToEarnPageQuestions .__Title {
  margin-bottom: 1.75rem;
  font-size: 34px;
  text-align: center;
  letter-spacing: -0.02em;
}
.PlayToEarnPageQuestions {
  /* Die graue Box. Muster von .AffiliateBenefits / .__DiscoverBlock.
     Ohne Innenabstand (Stevie) — die Items bringen ihren eigenen mit, dadurch
     laufen die Trennlinien sauber von Kante zu Kante.
     width muss !important sein: cash.scss setzt unter 800px
     ".faq-wrapper { width: 100% !important }" — ohne das hier greift auf
     Desktop weiter die fixe 1068px aus app.css. */
}
.PlayToEarnPageQuestions .faq-wrapper {
  display: flex;
  box-sizing: border-box;
  width: 100% !important;
  padding: 0;
  border-radius: 20px;
  background: #f4f5f7;
}
.PlayToEarnPageQuestions {
  /* Unter 800px setzt cash.scss den Items padding "0 1rem" — hier greift genau
     das, deshalb kein Override mehr. Ueber 800px kommt der Innenabstand aus der
     .faq-question/.faq-answer-Regel unten. */
  /* Die Items sitzen IN der grauen Box -> keine eigene weisse Flaeche mehr,
     nur noch Trennlinien dazwischen.
     Bewusst voll ausgeschrieben (.faq-wrapper .faq-item .faq-question): app.css
     faerbt genau auf dieser Tiefe weiss — eine kuerzere Regel verliert hier per
     Spezifitaet, egal in welcher Reihenfolge die Files laden. */
}
.PlayToEarnPageQuestions .faq-wrapper .faq-item {
  background: transparent;
  border-radius: 0;
  border-bottom-color: #e3e5ea;
  /* Der Innenabstand sitzt auf den Items, nicht auf der Box: so hat der Text
     Luft, waehrend die Trennlinien bis an die Kante laufen. */
}
.PlayToEarnPageQuestions .faq-wrapper .faq-item .faq-question {
  background: transparent;
  padding: 20px 26px;
  font-size: 19px;
  font-weight: 700;
  gap: 1.5rem;
  color: #0f172a;
}
.PlayToEarnPageQuestions .faq-wrapper .faq-item .faq-answer p {
  padding: 0 26px 1rem;
  margin: 0;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.6;
  color: #475569;
}

/* Teddy und Hero-Glow ragen absichtlich ueber die Seitenbreite hinaus — ohne das
   hier laesst sich die Seite seitlich wegschieben (Stevie).
   Drei Feinheiten, die hier Zeit gekostet haben und die man nicht "aufraeumen"
   sollte:
   - Der Wert muss auf <html> stehen. Auf <body> wirkt er nicht: der Browser
     reicht den overflow des Body an den Viewport durch, der Body selbst clippt
     dann nichts mehr.
   - hidden, nicht clip: clip wird auf dem Wurzelelement ebenfalls an den Viewport
     durchgereicht und schneidet dort nichts ab (geprueft in Chrome 150) — die
     Seite bleibt seitlich scrollbar.
   - hidden bricht hier NICHT position:sticky des App-Headers: der Wert wandert
     an den Viewport, der Scroll-Container bleibt also der Viewport. Das ist der
     Unterschied zu overflow:hidden auf einem Container mitten im Baum.
   Greift nur auf dieser Seite, weil affiliate.css ausschliesslich hier laedt. */
html {
  overflow-x: hidden;
}

/* <main> bringt auf Desktop 32px padding-bottom mit — damit saesse das
   Abschluss-Visual nicht auf dem Footer, sondern schwebte darueber. Hier
   entfernt; das Bild ist das letzte Element der Seite, unter ihm soll nichts
   mehr sein. Greift nur auf dieser Seite, weil affiliate.css nur hier laedt. */
main {
  padding-bottom: 0;
}

/* Mitlaufender CTA ab "Real cash, no strings." (Stevie). Sichtbarkeit haengt an
   .is-on, das der IntersectionObserver in der View setzt — ohne JS bleibt er weg.
   pointer-events im Ruhezustand aus, sonst faengt der unsichtbare Streifen Klicks
   auf den Inhalt darunter ab. */
.AffiliateStickyCta {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 90;
  transform: translate(-50%, 16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.AffiliateStickyCta.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.AffiliateStickyCta {
  /* Schatten hier ist Absicht: der Button schwebt ueber dem Inhalt und braucht
     die Abgrenzung — die statischen CTAs im Fluss haben bewusst keinen (Stevie). */
}
.AffiliateStickyCta .AffiliateBtn {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.28);
  white-space: nowrap;
}

/* Abschluss-Visual ueber der Fusszeile (Stevie): auf Seitenbreite begrenzt und
   zentriert, sitzt buendig auf dem Footer. line-height:0 killt den Zeilenabstand,
   den ein inline <img> sonst unter sich erzeugt — sonst bleibt ein heller Spalt. */
.AffiliateFooterTeddy {
  display: block;
  width: 1280px;
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;
  /* Button-Reset: das Bild ist die ganze Flaeche, drumherum darf nichts sein. */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.AffiliateFooterTeddy img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.AffiliateHero {
  text-align: center;
  padding: 2rem 0 0;
}
.AffiliateHero h1 {
  margin: 1.125rem 0 0;
  font-size: 44px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0f172a;
}
.AffiliateHero h1 .__Line {
  display: block;
}
.AffiliateHero h1 {
  /* Zeile 2: Highlight als gefuellter Kasten hinter dem Text (Stevie, nach
     LiveChat-Vorlage) — vorher Brand-Schrift mit Unterstrich-Balken.
     Das negative Margin gleicht das seitliche Padding aus, damit die Zeile
     optisch weiter mittig zu den anderen beiden steht. Die Zeilenhoehe der H1
     (1.02) ist zu eng fuer einen Kasten, deshalb hier etwas Luft. */
}
.AffiliateHero h1 .__Hl {
  display: inline-block;
  margin: 0 -0.08em;
  padding: 0.04em 0.12em 0.1em;
  border-radius: 12px;
  background: #0012FF;
  color: #fff;
}
.AffiliateHero {
  /* Der Kasten braucht Luft nach oben/unten, sonst stossen die Zeilen aneinander. */
}
.AffiliateHero h1 .__Line + .__Line {
  margin-top: 0.06em;
}
.AffiliateHero .__Lead {
  margin: 1.25rem auto 0;
  max-width: 620px;
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
}
.AffiliateHero .__Lead strong {
  color: #0f172a;
  font-weight: 700;
}
.AffiliateHero .__Cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 1.75rem;
}
.AffiliateHero {
  /* Hero-Bild. Der radiale Brand-Glow dahinter ist am 2026-07-17 raus (Stevie):
     das Bild bringt seinen eigenen Hintergrund mit, der Schimmer lag nur als
     Schleier darunter. Er war frueher auch der Grund fuer overflow-x:clip auf
     .AffiliatePage — das haengt jetzt nur noch am Teddy (s. html-Regel oben). */
}
.AffiliateHero .__Visual {
  position: relative;
  margin-top: 2.5rem;
  min-height: 120px;
  /* Volle Seitenbreite wie das Abschluss-Visual am Footer (Stevie) — vorher auf
     900px gedeckelt. */
}
.AffiliateHero .__Visual img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: 0 auto;
}
.AffiliateHero .__Visual .__Placeholder {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16/8;
  border: 2px dashed rgba(0, 18, 255, 0.25);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
}
.AffiliateHero .__Visual .__Placeholder span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(0, 18, 255, 0.5);
}

.AffiliateBtn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 15px 28px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.AffiliateBtn:active {
  transform: translateY(1px);
}
.AffiliateBtn {
  /* Ohne Schlagschatten (Stevie, 2026-07-16) — vorher lag ein blauer Glow
     darunter. */
}
.AffiliateBtn.__Primary {
  background: #0012FF;
  color: #fff;
}
.AffiliateBtn.__Primary:hover {
  background: #000CB8;
}
.AffiliateBtn.__Ghost {
  background: #0f172a;
  color: #fff;
}
.AffiliateBtn.__Ghost:hover {
  background: #1e293b;
}

/* ── Rechner-Karte ────────────────────────────────────────────────── */
/* Rechner-Block: eigener Abschnitt unter dem Hero, zentrierte Überschrift,
   Karte darunter (links Ergebnis, rechts Regler — s. Desktop-Query). */
.AffiliateCalcSection .__SectionTitle {
  text-align: center;
}
.AffiliateCalcSection .__SectionLead {
  margin: 0 auto 1.5rem;
  max-width: 560px;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: #475569;
}
.AffiliateCalcSection {
  /* Mehr Abstand zur Karte (Stevie, 2026-07-17) — die Note ist eine Fussnote,
     keine Bildunterschrift. */
}
.AffiliateCalcSection > .__Note {
  margin: 26px auto 0;
  max-width: 640px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: #94a3b8;
  /* Laeuft im Textfluss mit, damit es bei zentriertem, mehrzeiligem Satz vor
     dem ersten Wort sitzt statt in einer eigenen Spalte. Groesse hier, weil das
     SVG (s. $affInfoIco in der View) keine width/height mitbringt. */
}
.AffiliateCalcSection > .__Note .__InfoIco {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
  margin-right: 4px;
}

.AffiliateCalc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}
.AffiliateCalc .__Result {
  min-width: 0;
}
.AffiliateCalc .__Controls {
  min-width: 0;
}
.AffiliateCalc .__Head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.AffiliateCalc .__HeadLabel {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}
.AffiliateCalc .__Live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}
.AffiliateCalc .__Live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0012FF;
  animation: affPulse 2s ease-in-out infinite;
}
.AffiliateCalc .__Total {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 14px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
  /* Waehrungszeichen in Ink, nicht in Brand (Stevie) — es gehoert zur Zahl. */
}
.AffiliateCalc .__Total .__Cur {
  font-size: 30px;
  color: #0f172a;
  font-weight: 800;
}
.AffiliateCalc .__Total .__Val {
  font-size: 52px;
  line-height: 1;
}
.AffiliateCalc .__Sub {
  margin: 10px 0 0;
  font-size: 14px;
  color: #64748b;
}
.AffiliateCalc .__Sub strong {
  color: #0f172a;
  font-weight: 700;
}
.AffiliateCalc {
  /* Ein Balken statt zweier Karten (Stevie, nach Bildvorlage): die Aufteilung
     L1/L2 wird als Anteil sichtbar. Der L2-Teil ist der Untergrund, der L1-Teil
     liegt als Fuellung darauf — so braucht nur EIN Element eine Breite aus dem JS. */
}
.AffiliateCalc .__Split {
  margin-top: 20px;
}
.AffiliateCalc .__SplitBar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  background: #8b5cf6;
  overflow: hidden;
}
.AffiliateCalc .__SplitFill {
  display: block;
  height: 100%;
  /* Startbreite: das JS ueberschreibt sie beim ersten update(). */
  width: 66%;
  border-radius: 999px 0 0 999px;
  background: #0012FF;
  transition: width 0.18s ease;
}
.AffiliateCalc .__SplitLegend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.AffiliateCalc .__Tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #0012FF;
}
.AffiliateCalc .__Tag b {
  font-size: 15px;
  font-weight: 800;
}
.AffiliateCalc .__Tag.__L2 {
  color: #8b5cf6;
}
.AffiliateCalc .__Field + .__Field {
  margin-top: 22px;
}
.AffiliateCalc .__Field .__FieldHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.AffiliateCalc .__Field .__FieldLabelWrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.AffiliateCalc .__Field .__FieldLabel {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}
.AffiliateCalc .__Field {
  /* Info-Punkt am Regler: traegt den Erfahrungswert als Tooltip. Groesse des
     Icons hier, weil das SVG (s. $affInfoIco in der View) keine width/height
     mitbringt. */
}
.AffiliateCalc .__Field .__Info {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: #94a3b8;
  cursor: help;
}
.AffiliateCalc .__Field .__Info .__InfoIco {
  width: 16px;
  height: 16px;
  display: block;
}
.AffiliateCalc .__Field .__Info:hover, .AffiliateCalc .__Field .__Info:focus-visible {
  color: #0012FF;
}
.AffiliateCalc .__Field .__Info:focus {
  outline: none;
}
.AffiliateCalc .__Field .__Info:hover .__InfoTip, .AffiliateCalc .__Field .__Info:focus-visible .__InfoTip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.AffiliateCalc .__Field {
  /* Dunkler Tooltip: die Rechner-Karte ist weiss, ein heller waere darauf nicht
     zu erkennen (anders als bei den Tier-Balken auf der dunklen Karte). */
}
.AffiliateCalc .__Field .__InfoTip {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 6;
  width: 210px;
  padding: 9px 11px;
  box-sizing: border-box;
  border-radius: 9px;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.AffiliateCalc .__Field .__FieldVal {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

@keyframes affPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
/* Range-Inputs: Browser-Default komplett ersetzen (Track + Thumb je Engine). */
.AffiliateRange {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.AffiliateRange:focus {
  outline: none;
}
.AffiliateRange {
  /* Gefuellter Track bis zum Griff (Stevie). Chrome/Safari kennen kein
     ::-moz-range-progress, deshalb ein Gradient, dessen Breite an der Variable
     --aff-fill haengt; die setzt das Rechner-JS bei jedem Ziehen.
     Fallback 0%: ohne JS bleibt der Track einfach grau. */
}
.AffiliateRange::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(#0012FF, #0012FF) 0/var(--aff-fill, 0%) 100% no-repeat, #e2e8f0;
}
.AffiliateRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #0012FF;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.AffiliateRange::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #e2e8f0;
}
.AffiliateRange {
  /* Firefox kann den Fortschritt nativ — hier braucht es die Variable nicht. */
}
.AffiliateRange::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: #0012FF;
}
.AffiliateRange::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #0012FF;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.AffiliateRange:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(0, 18, 255, 0.2);
}
.AffiliateRange:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(0, 18, 255, 0.2);
}

/* ── Sektionen darunter ───────────────────────────────────────────── */
/* "What you get" — Eyebrow + zentrierte Headline über den Cards. */
.AffiliateWhat {
  text-align: center;
  margin-top: 3.5rem;
}
.AffiliateWhat .__SectionTitle {
  margin: 0;
  font-size: 34px;
}
.AffiliateWhat .__Lead {
  margin: 1rem auto 0;
  max-width: 600px;
  font-size: 16px;
  line-height: 1.6;
  color: #475569;
}

/* Creator-Ansprache: erbt Headline/Lead von .AffiliateWhat, ergänzt zweiten
   Absatz + CTA. */
.AffiliateCreators {
  /* Groesser als in den uebrigen .AffiliateWhat-Bloecken (Stevie, 2026-07-17):
     hier traegt der Fliesstext die Aussage, es ist keine kurze Unterzeile.
     Desktop-Wert steht in der 900px-Query. */
}
.AffiliateCreators .__Lead {
  max-width: 660px;
  font-size: 17.5px;
}
.AffiliateCreators .__Lead + .__Lead {
  margin-top: 0.875rem;
}
.AffiliateCreators .__Cta {
  display: flex;
  justify-content: center;
  margin-top: 1.75rem;
}

/* Zwei Fakten-Karten unter einer gemeinsamen Ueberschrift (Stevie, 2026-07-16,
   nach Bildvorlage): Badge + Fliesstext oben, unten Kennzahl links und Visual
   rechts. Linke Karte hell, rechte dunkel — die dunkle Karte ist bewusst in
   BEIDEN Themes dunkel, dark.scss faerbt nur die helle um. */
.AffiliateFactsSection .__SectionTitle {
  text-align: center;
  font-size: 34px;
}

/* Auf $blockW zentriert statt volle Seitenbreite — das schafft rechts die Luft,
   in der der Teddy neben der Karte stehen kann (bei voller Breite endet die Karte
   am Seitenrand und er wird von overflow-x:clip abgeschnitten). */
.AffiliateFacts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  width: 1080px;
  max-width: 100%;
  margin: 2rem auto 0;
}
.AffiliateFacts .__Card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  box-sizing: border-box;
  min-height: 360px;
  padding: 26px;
  border-radius: 22px;
  background: #f4f5f7;
  overflow: hidden;
}
.AffiliateFacts .__Card.__Dark {
  background: #16181d;
  color: #fff;
}
.AffiliateFacts {
  /* Traegt den Teddy um die Karte herum. Der Koerper liegt HINTER der Karte, die
     Pfoten DAVOR — deshalb sitzen alle drei hier im Slot und nicht in der Karte
     (die schneidet mit overflow:hidden alles ab, was rausragt). */
}
.AffiliateFacts .__Slot {
  position: relative;
  display: flex;
}
.AffiliateFacts .__Slot .__Card {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.AffiliateFacts .__Teddy {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.AffiliateFacts .__TeddyBack {
  z-index: 0;
  height: 300px;
  right: -34px;
  bottom: -18px;
}
.AffiliateFacts .__TeddyTop {
  z-index: 2;
  width: 39.84px;
  right: 26px;
  top: -8px;
}
.AffiliateFacts .__TeddyRight {
  z-index: 2;
  width: 16.8px;
  right: -3px;
  top: 52%;
}
.AffiliateFacts {
  /* Badge links, Text rechts daneben (Vorlage). Die Badge behaelt auf der dunklen
     Karte dieselbe helle Fuellung — auch das kommt aus der Vorlage. */
}
.AffiliateFacts .__Head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.AffiliateFacts {
  /* Gleiche Pille wie die "Step n"-Badge bei "How it works" (Stevie): weiss auf
     der Flaeche, dunkle Schrift, derselbe weiche Schatten. Anders als dort steht
     sie hier im Fluss (kein position:absolute) — sie hat ihre eigene Grid-Spalte. */
}
.AffiliateFacts .__Badge {
  padding: 8px 15px;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.AffiliateFacts {
  /* Auf der dunklen Karte schreibt die Badge in der Kartenfuellung (Stevie) —
     die weisse Pille wirkt dadurch wie ausgestanzt. */
}
.AffiliateFacts .__Card.__Dark .__Badge {
  color: #16181d;
  box-shadow: none;
}
.AffiliateFacts .__Text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #475569;
}
.AffiliateFacts .__Text b {
  color: #0f172a;
  font-weight: 800;
}
.AffiliateFacts .__Card.__Dark .__Text {
  color: rgba(255, 255, 255, 0.72);
}
.AffiliateFacts .__Card.__Dark .__Text b {
  color: #fff;
}
.AffiliateFacts {
  /* Kennzahl links, Visual rechts, beide auf der Grundlinie. Die Kennzahl bekommt
     nur ihre Eigenbreite (auto), damit das Visual den ganzen Rest fuellt — bei
     1fr/1fr bleibt der Baum winzig, waehrend die Karte leer wirkt. */
}
.AffiliateFacts .__Body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: end;
}
.AffiliateFacts .__Figure {
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.AffiliateFacts {
  /* "up to" vor dem Top-Satz: 20% bekommt nur Tier 4 — ohne das Praefix liest
     sich die Zahl wie eine Zusage fuer jeden. */
}
.AffiliateFacts .__Pre {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
}
.AffiliateFacts .__Card.__Dark .__Pre {
  color: rgba(255, 255, 255, 0.5);
}
.AffiliateFacts .__Tree {
  display: block;
  width: 100%;
  height: auto;
}
.AffiliateFacts {
  /* Tier-Balken. Hoehe kommt inline in px aus $tiers (streng proportional zum
     Satz), deshalb hier KEINE Hoehe setzen — nur die Grundlinie ausrichten. */
}
.AffiliateFacts .__Bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
.AffiliateFacts .__Bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  cursor: default;
}
.AffiliateFacts .__Bar:hover .__BarFill, .AffiliateFacts .__Bar:focus-visible .__BarFill {
  filter: brightness(1.35);
}
.AffiliateFacts .__Bar:focus {
  outline: none;
}
.AffiliateFacts .__Bar:hover .__BarTip, .AffiliateFacts .__Bar:focus-visible .__BarTip {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tipX, -50%), 0);
}
.AffiliateFacts {
  /* Erklaert die Schwelle des Balkens. Sitzt ueber dem Balken; --tipX schiebt ihn
     an den Raendern zurueck ins Bild (s. .__First / .__Last), sonst haengt er beim
     ersten und letzten Balken halb ausserhalb der Karte. */
}
.AffiliateFacts .__BarTip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 5;
  width: 190px;
  padding: 10px 12px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--tipX, -50%), 4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.AffiliateFacts .__Bar.__First .__BarTip {
  --tipX: -20%;
}
.AffiliateFacts .__Bar.__Last .__BarTip {
  --tipX: -80%;
}
.AffiliateFacts .__BarFill {
  width: 100%;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.16);
}
.AffiliateFacts .__Bar.__Top .__BarFill {
  background: #8f9bff;
}
.AffiliateFacts .__BarPct {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
}
.AffiliateFacts .__Bar.__Top .__BarPct {
  color: #fff;
}
.AffiliateFacts {
  /* Die Freischalt-Schwellen. Sie standen frueher in der Tier-Tabelle; die ist
     weg, und die FAQ nennt sie nicht — hier sind sie die einzige Stelle auf der
     Seite, an der $10/$25/$100 ueberhaupt auftauchen. */
}
.AffiliateFacts .__BarFrom {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
}

/* "What you get": EINE Box mit internen Trennlinien statt vier Einzelkarten —
   Muster von .__DiscoverBlock auf der Startseite ("Average time to earn your first
   rewards"). Nicht ueber die volle Seitenbreite: zentriert auf $blockW. */
.AffiliateBenefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 1080px;
  max-width: 100%;
  margin: 1.75rem auto 0;
  background: #f4f5f7;
  border-radius: 20px;
  overflow: hidden;
}
.AffiliateBenefits .__Card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 26px;
  /* Trenner: mobil untereinander -> waagerecht; ab 900px senkrecht (s. unten). */
  border-bottom: 1px solid #e3e5ea;
}
.AffiliateBenefits .__Card:last-child {
  border-bottom: 0;
}
.AffiliateBenefits {
  /* Ohne Flaeche dahinter (Stevie, 2026-07-16) — vorher weisse 62px-Kachel mit
     Radius, jetzt nur noch das blanke Icon.
     Farbe: kraeftiges Grau aus der Familie der Kartenflaeche (#f4f5f7), nicht
     Brand-Blau (Stevie, 2026-07-17).
     svg-Groesse hier statt per width/height am Tag — dann greift sie fuer alle
     vier Icons gleich, egal aus welcher Quelle sie stammen. */
}
.AffiliateBenefits .__Icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #98a0ad;
  margin-bottom: 16px;
}
.AffiliateBenefits .__Icon svg {
  width: 48px;
  height: 48px;
  display: block;
}
.AffiliateBenefits .__Title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}
.AffiliateBenefits .__Text {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #475569;
}

/* Abstand ZWISCHEN den Bloecken (Stevie, 2026-07-16: "unbedingt groesser").
   Bewusst deutlich groesser als die Abstaende INNERHALB eines Blocks
   (Headline -> Inhalt: 1.75-2rem) — dieser Kontrast gruppiert die Seite.
   Wer hier dreht, dreht an jedem Blockabstand der Seite. */
.AffiliateSection {
  margin-top: 4.5rem;
}
.AffiliateSection .__SectionTitle {
  margin: 0 0 1rem;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

/* "How it works"-Boxen im Stil von Stevies Referenz (2026-07-16):
   graue Flaeche + "Step n"-Pille + Produkt-Mockup, Text UNTER der Box.
   Die Mockups sind bewusst CSS statt Screenshots — sie skalieren mit und
   brauchen keine Assets. */
.AffiliateSteps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: 1.75rem;
}
.AffiliateSteps .__Step {
  min-width: 0;
}
.AffiliateSteps {
  /* FESTE Hoehe, kein min-height: das Bild in Step 1 richtet sich per
     max-height:100% danach aus. Mit min-height wuerde es in Originalgroesse
     (1080px) rendern und alle drei Boxen aufblaehen.
     Kein Innenabstand (Stevie): das Bild soll die Box bis zur Kante fuellen —
     overflow:hidden beschneidet es sauber am Radius. Die Raender fuer die
     CSS-Mockups sitzen deshalb auf .__Mock, nicht hier. */
  /* 370px mobil, seit Step 3 fuenf Zahlungszeilen zeigt (bei 320px lief die
     letzte aus der Box und wurde von overflow:hidden abgeschnitten — der Mock
     zentriert seinen Inhalt, ueberzaehlige Hoehe faellt also oben UND unten
     raus). Gilt fuer alle drei Boxen, damit die Reihe gleich hoch bleibt. */
}
.AffiliateSteps .__Visual {
  position: relative;
  border-radius: 18px;
  background: #f4f5f7;
  padding: 0;
  height: 370px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.AffiliateSteps {
  /* Absolut, damit die Pille unabhaengig vom Innenabstand des Inhalts immer
     an derselben Stelle sitzt (auch in der Bild-Variante ohne Padding). */
}
.AffiliateSteps .__Badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 8px 15px;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.AffiliateSteps {
  /* Mockup-Flaeche: vertikal zentriert, oben Platz fuer die Pille.
     min-height:0 ist noetig, damit ein Kind mit max-height:100% (das Bild)
     nicht ueber den flex:1-Bereich hinauswaechst. */
}
.AffiliateSteps .__Mock {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 66px 22px 22px;
  font-variant-numeric: tabular-nums;
}
.AffiliateSteps {
  /* Ticker-Variante (Step 2): von oben stapeln statt zentrieren. Der Controller
     liefert mehr Zeilen als die Box zeigt — die ueberzaehligen sollen unten aus
     der Box laufen (overflow:hidden der .__Visual verdeckt sie) und von dort
     nachruecken. Bei justify-content:center wuerden sie oben UND unten
     abgeschnitten und der Ticker liefe halb im Verborgenen. */
}
.AffiliateSteps .__Mock.__IsTicker {
  justify-content: flex-start;
}
.AffiliateSteps {
  /* Bild-Variante: randlos, Bild sitzt buendig auf der Unterkante —
     oben 1rem Luft, damit es nicht an der Boxkante klebt. */
}
.AffiliateSteps .__Mock.__IsImg {
  padding: 1rem 0 0;
  justify-content: flex-end;
}
.AffiliateSteps .__MockImg {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.AffiliateSteps .__Copy {
  margin: 1.125rem 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: #475569;
}
.AffiliateSteps .__Copy b {
  color: #0f172a;
  font-weight: 800;
}
.AffiliateSteps {
  /* --- Step 1: Invite-Link --- */
}
.AffiliateSteps .__LinkRow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 10px 10px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.AffiliateSteps .__Url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}
.AffiliateSteps .__CopyBtn {
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 8px;
  background: #0012FF;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.AffiliateSteps .__Chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.AffiliateSteps .__Chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.AffiliateSteps {
  /* --- Step 2: Tasks --- */
  /* Groesse ist hier nicht frei waehlbar: der Ticker soll GENAU 4 Zeilen zeigen,
     die fuenfte wartet unterhalb der Kante. Zeilenhoehe = Icon + 2x padding,
     dazu die gaps — passt das nicht zur Boxhoehe (.__Visual), ist entweder eine
     halbe Zeile zu sehen oder es bleibt Luft. Rechnung mobil:
     4x62 + 3x10 = 278 <= 282 (370 - 66 padding-top - 22 padding-bottom).
     Desktop steht in der 900px-Query. */
}
.AffiliateSteps .__TaskRow {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.AffiliateSteps .__TaskIco {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  object-fit: cover;
  background: #e8eaee;
}
.AffiliateSteps {
  /* Zeile mit echtem Offer: Name statt Platzhalter-Balken. */
}
.AffiliateSteps .__TaskName {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.AffiliateSteps .__TaskBars {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.AffiliateSteps .__Bar {
  height: 7px;
  border-radius: 999px;
  background: #e8eaee;
}
.AffiliateSteps .__Bar.__Short {
  width: 55%;
}
.AffiliateSteps .__TaskPay {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  color: #10b981;
}
.AffiliateSteps {
  /* --- Step 3: Auszahlung --- */
}
.AffiliateSteps .__PayCard {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.AffiliateSteps .__PayLabel {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}
.AffiliateSteps .__PayAmount {
  display: block;
  margin-top: 5px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.AffiliateSteps {
  /* Gleiche Optik wie die Task-Zeilen in Step 2 (Stevie) — inklusive Icon; die
     Groessen kommen aus derselben .__TaskIco-Regel. */
}
.AffiliateSteps .__PayRow {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.AffiliateSteps {
  /* Task-Name in der Einzahlungs-Zeile — schiebt Badge und Betrag nach rechts. */
}
.AffiliateSteps .__PayTask {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.AffiliateSteps {
  /* Steht jetzt hinter dem Namen statt davor — der Name fuehrt die Zeile an,
     wie in Step 2. */
}
.AffiliateSteps .__Lvl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 26px;
  height: 18px;
  border-radius: 999px;
  background: #0012FF;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.AffiliateSteps .__Lvl.__L2 {
  background: #8b5cf6;
}
.AffiliateSteps .__PayPlus {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  color: #10b981;
}

.AffiliateStepsCta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Steht unter der FAQ in einem eigenen .AffiliatePage-Wrapper. */
/* ── Desktop ──────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .AffiliateHero {
    padding-top: 3rem;
  }
  .AffiliateHero h1 {
    font-size: 62px;
  }
  .AffiliateHero .__Lead {
    font-size: 17.5px;
  }
  /* Section-Headlines (Stevie, 2026-07-16: 40 -> 50). Gilt für alle Blöcke mit
     Eyebrow+Headline sowie den Rechner, damit keine Überschrift aus der Reihe fällt. */
  .AffiliateWhat .__SectionTitle,
  .AffiliateCalcSection .__SectionTitle {
    font-size: 50px;
  }
  /* s. Kommentar an .AffiliateCreators — hier traegt der Lead die Aussage. */
  .AffiliateCreators .__Lead {
    font-size: 19px;
  }
  /* Blockabstaende auf Desktop noch deutlicher (Stevie) — 4.5rem wirken auf
     1280px Breite gedraengt. Gegenstueck bleibt der Innenabstand von ~1.75rem. */
  .AffiliateSection {
    margin-top: 7rem;
  }
  /* Die FAQ ist keine .AffiliateSection, sondern ein Geschwister von
     .AffiliatePage direkt in <main> — Headline-Groesse und Abstand von Hand
     nachziehen, sonst faellt sie aus der Reihe.
     Zum margin: <main> ist ein Flex-Container mit 32px gap, dazu kommen 40px
     padding-bottom von .AffiliatePage. Die 40px hier ergeben zusammen die 112px
     der anderen Bloecke — NICHT auf 7rem setzen, das ergibt 184px.
     (Mobil braucht es gar keinen: 32 + 40 = 72px, exakt der 4.5rem-Abstand dort.) */
  .PlayToEarnPageQuestions {
    margin-top: 2.5rem;
    margin-bottom: 5rem;
  }
  .PlayToEarnPageQuestions .__Title {
    font-size: 50px;
  }
  .PlayToEarnPageQuestions .faq-wrapper .faq-item .faq-question {
    font-size: 21px;
  }
  /* Die zwei Fakten-Karten nebeneinander (Vorlage). Headline zieht auf die
     50px der anderen Section-Ueberschriften. */
  .AffiliateFactsSection .__SectionTitle {
    font-size: 50px;
  }
  .AffiliateFacts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem;
  }
  .AffiliateFacts .__Card {
    min-height: 420px;
    padding: 30px;
  }
  .AffiliateFacts .__Figure {
    font-size: 72px;
  }
  .AffiliateFacts {
    /* Teddy in voller Groesse — Breiten aus $teddyScale, nicht frei gewaehlt,
       sonst passen die Pfoten nicht mehr an den Arm des Koerpers.
       right ist so gewaehlt, dass der Koerper genau in die Luft rechts der Karte
       ragt (Seite 1280 - Bloecke 1080 = 100px je Seite). Mehr geht nicht: darueber
       schneidet overflow-x:clip der .AffiliatePage ab. */
  }
  .AffiliateFacts .__TeddyBack {
    height: 546px;
    right: -215px;
    bottom: -31px;
  }
  .AffiliateFacts {
    /* ACHTUNG: Diese beiden Positionen sind GESCHAETZT. Die Pfoten-Cuts stammen
       nicht aus teddy_back.png (Template-Matching findet keinen Treffer), sondern
       aus dem Original-Mockup — ihre Lage am Arm laesst sich daher nicht
       ausrechnen. Werte hier nach Augenmass justieren. */
  }
  .AffiliateFacts .__TeddyTop {
    width: 72.625px;
    right: 10px;
    top: -26px;
  }
  .AffiliateFacts .__TeddyRight {
    width: 30.625px;
    right: 0;
    top: 44%;
  }
  /* Ergebnis links, Regler rechts — vertikale Trennlinie statt zweiter Karte,
     damit der Block ruhig bleibt. */
  .AffiliateCalc {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 36px;
    padding: 30px;
    /* Seit die Tier-Kacheln weg sind, stehen rechts nur noch zwei Regler —
       vertikal zentrieren, damit die Karte nicht unten auseinanderfällt.
       Trennlinie bleibt über die volle Höhe (Grid-Item stretcht weiterhin). */
  }
  .AffiliateCalc .__Controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 36px;
    border-left: 1px solid #eef0f4;
  }
  /* 4 Spalten in EINER Box, senkrechte Trenner wie auf der Startseite. */
  .AffiliateBenefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .AffiliateBenefits .__Card {
    border-bottom: 0;
    border-right: 1px solid #e3e5ea;
  }
  .AffiliateBenefits .__Card:last-child {
    border-right: 0;
  }
  .AffiliateSteps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  .AffiliateSteps .__Visual {
    height: 400px;
  }
  .AffiliateSteps .__Copy {
    font-size: 20px;
    line-height: 1.45;
  }
  .AffiliateSteps {
    /* 4 Zeilen sichtbar (Stevie), deshalb groessere Icons: 4x70 + 3x10 = 310
       passt in die 312px, die von der 400er Box nach Abzug der .__Mock-Raender
       bleiben. Wer die Boxhoehe aendert, muss hier nachrechnen. */
  }
  .AffiliateSteps .__TaskIco {
    width: 50px;
    height: 50px;
    border-radius: 13px;
  }
  .AffiliateSteps .__TaskName {
    font-size: 15px;
  }
  .AffiliateSteps .__TaskPay {
    font-size: 14.5px;
  }
}