/*
 * Zweck: Gestaltung von /so-funktionierts – 1:1 aus dem Claude-Design-Original
 *   (temp/Animate So funktioniert's page). Die Inline-Stile und Layout-Platzhalter des Originals
 *   sind hier als Klassen abgebildet:
 *   - Grundzustand = reduzierter Modus (ohne JavaScript oder bei „Bewegung reduzieren“):
 *     Texte untereinander, jede Station mit Standbild (.sf-slot, von der Choreografie befüllt).
 *   - .sf-seite.sf-anim = animierter Modus (gesetzt von public/js/so-funktionierts.js):
 *     Reise 400vh hoch, Bühne gepinnt, Texte wechseln übereinander.
 *   - Mobil = unter 768px.
 * Markup: lib/seiten/so-funktionierts.js und lib/seiten/so-funktionierts/buehne.js.
 */

.sf-seite {
  --sf-dunkel: #12222B;
  --sf-magenta: #a90055;
  --sf-gruen: #00631d;
  --sf-gruen-hell: #e6f8e6;
  --sf-teal: #006972;
  --sf-teal-hell: #e3f8fa;
  --sf-text: #5a3f46;
  --sf-grau: #f9f9f9;
  --sf-linie: #e2e2e2;
  background: #fff;
  color: var(--sf-dunkel);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.sf-seite *, .sf-seite *::before, .sf-seite *::after { box-sizing: border-box; }
.sf-seite h1, .sf-seite h2, .sf-seite h3, .sf-seite p { margin: 0; }
.sf-seite a { color: var(--sf-magenta); }
.sf-seite a:hover { color: var(--sf-dunkel); }
.sf-seite :focus-visible { outline: 3px solid var(--sf-magenta); outline-offset: 3px; border-radius: 4px; }
.sf-seite summary::-webkit-details-marker { display: none; }
.sf-nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Einstieg ---------- */
.sf-einstieg { background: var(--sf-dunkel); color: #fff; position: relative; }
.sf-einstieg-inhalt {
  max-width: 1280px; margin: 0 auto;
  padding: clamp(40px, 8vh, 96px) 24px 120px;
  min-height: calc(100vh - var(--sf-kopf, 68px));
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: center; gap: 48px;
}
.sf-einstieg-text { display: flex; flex-direction: column; gap: 24px; max-width: 600px; }
.sf-seite .sf-h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(44px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.02em; color: #fff; }
.sf-seite .sf-unterzeile { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; color: #ffecef; }
.sf-seite .sf-einleitung { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); max-width: 480px; text-wrap: pretty; }
.sf-einstieg-bild { display: flex; justify-content: center; }
.sf-einstieg-bild img { width: min(80%, 360px); height: auto; display: block; }
.sf-seite .sf-scroll-hinweis {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 600;
}
.sf-seite .sf-scroll-hinweis:hover { color: #fff; }

/* ---------- Reise: Grundzustand (reduziert) ---------- */
.sf-reise { position: relative; height: auto; padding: 96px 40px; background: #fff; }
.sf-pin {
  position: relative; height: auto; max-width: 1360px; margin: 0 auto;
  display: flex; flex-direction: row; padding: 0; gap: 48px; overflow: hidden;
}
.sf-texte {
  flex: 1 1 auto; height: auto; min-height: 0; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  padding: 0; row-gap: 96px;
}
.sf-panel { grid-area: auto; display: flex; flex-direction: row; gap: 40px; align-items: center; will-change: opacity, transform; }
.sf-panel-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.sf-seite .sf-zeile-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.sf-seite .sf-zeile-kicker--verkaeufer { color: var(--sf-teal); }
.sf-seite .sf-zeile-kicker--spieler { color: var(--sf-gruen); }
.sf-seite .sf-zeile-kicker--recurra { color: var(--sf-magenta); }
.sf-seite .sf-panel-titel { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; color: var(--sf-dunkel); }
.sf-seite .sf-panel-absatz { font-size: 18px; line-height: 1.6; color: var(--sf-text); text-wrap: pretty; }
.sf-wie-genau { border-top: 1px solid var(--sf-linie); padding-top: 12px; }
.sf-wie-genau summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--sf-magenta); }
.sf-wie-genau-plus { font-size: 18px; line-height: 1; }
.sf-seite .sf-wie-genau-text { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--sf-text); text-wrap: pretty; }
.sf-slot { display: none; flex: 1 1 0; width: 100%; aspect-ratio: 4 / 3; position: relative; overflow: hidden; border-radius: 24px; background: var(--sf-grau); }
.sf-seite.sf-js .sf-slot { display: block; }
.sf-fortschritt { display: none; gap: 8px; max-width: 240px; }
.sf-fortschritt > div { flex: 1; height: 3px; border-radius: 3px; background: var(--sf-linie); overflow: hidden; }
.sf-fortschritt > div > div { height: 100%; background: var(--sf-magenta); transform-origin: 0 50%; transform: scaleX(0); }
/* Claim unter den Fortschrittsbalken: Verkäufer-Claim in Schritt 1, Spieler-Claim in Schritt 2 und 3
   (Überblendung durch die Choreografie). Nur im animierten Modus. */
.sf-claim { display: none; position: relative; height: 28px; margin-top: -14px; }
.sf-claim-text { position: absolute; left: 0; top: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; }
.sf-claim-text--verkaeufer { color: var(--sf-teal); }
.sf-claim-text--spieler { color: var(--sf-gruen); opacity: 0; }
.sf-seite.sf-anim .sf-claim { display: block; }
.sf-buehne { display: none; flex: 1 1 auto; order: 0; position: relative; overflow: hidden; min-height: 0; min-width: 0; border-radius: 24px; background: var(--sf-grau); }

/* ---------- Reise: animiert ---------- */
.sf-seite.sf-anim .sf-reise { height: 400vh; padding: 0; }
/* --sf-kopf = Höhe der klebenden Kopfzeile (site.css), gemessen von der Choreografie. */
.sf-seite.sf-anim .sf-pin { position: sticky; top: var(--sf-kopf, 0px); height: calc(100vh - var(--sf-kopf, 0px)); padding: 40px; }
.sf-seite.sf-anim .sf-texte { flex: 0 0 34%; height: 100%; align-content: center; row-gap: 28px; }
.sf-seite.sf-anim .sf-panel { grid-area: 1 / 1; flex-direction: column; }
.sf-seite.sf-anim .sf-slot { display: none; }
.sf-seite.sf-anim .sf-fortschritt { display: flex; }
.sf-seite.sf-anim .sf-buehne { display: block; }

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .sf-reise { padding: 56px 20px; }
  .sf-pin { flex-direction: column; gap: 0; }
  .sf-panel { flex-direction: column; }
  .sf-seite .sf-panel-titel { font-size: 26px; }
  .sf-seite .sf-panel-absatz { font-size: 15px; }
  .sf-buehne { flex: 0 0 55vh; order: -1; border-radius: 0; }
  /* Logo mobil kleiner im freien Streifen oben (Kamera hält 44 px frei, public/js/so-funktionierts.js). */
  .sf-seite .sf-buehne-logo { top: 10px; right: 10px; width: 96px; }
  .sf-seite.sf-anim .sf-pin { padding: 0; height: calc(100vh - var(--sf-kopf, 0px)); }
  .sf-seite.sf-anim .sf-buehne { flex: 0 0 52%; }
  .sf-seite.sf-anim .sf-panel-titel { font-size: 22px; }
  .sf-seite.sf-anim .sf-panel-absatz { font-size: 14px; line-height: 1.5; }
  .sf-claim { margin-top: -6px; height: 24px; }
  .sf-claim-text { font-size: 17px; }
  .sf-seite.sf-anim .sf-texte { flex: 1 1 0; height: auto; align-content: start; padding: 16px 20px 12px; row-gap: 14px; }
}

/* ---------- Bühne: Welt 800×600 ---------- */
.sf-buehne-logo { position: absolute; top: 16px; right: 16px; z-index: 2; width: clamp(112px, 14%, 168px); height: auto; border-radius: 8px; display: block; pointer-events: none; }
.sf-welt { position: absolute; left: 0; top: 0; width: 800px; height: 600px; transform-origin: 0 0; font-family: 'Manrope', sans-serif; color: var(--sf-dunkel); }
.sf-welt img { max-width: none; }
.sf-welt svg { overflow: visible; }
.sf-bahn { position: absolute; left: 0; top: 0; pointer-events: none; }

.sf-preisschild { position: absolute; left: 560px; top: 160px; width: 110px; height: 210px; transform-origin: 55px 0; opacity: 0; }
.sf-preisschild > svg { position: absolute; inset: 0; }
.sf-preisschild-text { position: absolute; left: 20px; top: 62px; width: 70px; text-align: center; color: #fff; }
.sf-preisschild-label { font-size: 8.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.sf-preisschild-wert { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; margin-top: 2px; }

.sf-hand { position: absolute; left: 248px; top: 184px; width: 560px; height: 253px; pointer-events: none; }
.sf-hand img { display: block; width: 100%; height: auto; }

.sf-verkaeuferin { position: absolute; left: 144px; top: 264px; width: 72px; height: 72px; transform-origin: 50% 50%; opacity: 0; }
.sf-verkaeuferin img { position: absolute; inset: 0; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sf-teal); background: var(--sf-teal-hell); }
.sf-verkaeuferin-label { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); display: flex; justify-content: center; }
.sf-verkaeuferin-label > * { background: var(--sf-teal-hell); border: 2px solid var(--sf-teal); color: var(--sf-teal); font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 9999px; white-space: nowrap; }
.sf-preis-erhalten { position: absolute; left: 630px; top: 530px; width: 170px; text-align: center; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--sf-teal); opacity: 0; }

.sf-karte { position: absolute; left: 260px; top: 150px; width: 280px; height: 300px; transform-origin: 50% 50%; }
.sf-karte > svg { position: absolute; inset: 0; }
.sf-karte-kopf { position: absolute; left: 18px; top: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; opacity: 0; }
.sf-karte-logo { position: absolute; right: 10px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; }
.sf-karte-logo img { display: block; width: 18px; height: 18px; }
.sf-konsole { position: absolute; left: 100px; top: 40px; width: 80px; height: 110px; transform-origin: 50% 50%; }
.sf-konsole img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sf-karte-zeile { position: absolute; left: 46px; width: 220px; height: 34px; opacity: 0; }
.sf-karte-zeile--0 { top: 158px; }
.sf-karte-zeile--1 { top: 191px; }
.sf-karte-zeile--2 { top: 224px; }
.sf-karte-zeile--3 { top: 257px; }
.sf-karte-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-text); }
.sf-karte-wert { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-plakette { position: absolute; left: 0; right: 0; bottom: -15px; display: flex; justify-content: center; opacity: 0; }
.sf-plakette > * { background: var(--sf-dunkel); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 9999px; white-space: nowrap; }

.sf-bestenliste { position: absolute; left: 500px; top: 60px; width: 280px; height: 356px; opacity: 0; }
.sf-bestenliste > svg { position: absolute; inset: 0; }
.sf-bestenliste-kopf { position: absolute; left: 20px; right: 16px; top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf-bestenliste-titel { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; }
.sf-bestenliste-beispiel { background: #ffecef; color: var(--sf-magenta); font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 9999px; }
.sf-rang { position: absolute; left: 14px; width: 22px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--sf-text); }
.sf-rang--0 { top: 62px; }
.sf-rang--1 { top: 108px; }
.sf-rang--2 { top: 154px; }
.sf-rang--3 { top: 200px; }
.sf-rang--4 { top: 246px; }
.sf-rang--5 { top: 292px; }
.sf-zeile { position: absolute; left: 40px; top: 62px; width: 226px; height: 46px; transform-origin: 50% 50%; opacity: 0; }
.sf-zeile-grund { position: absolute; inset: 4px 0; border-radius: 12px; background: var(--sf-magenta); opacity: 0; }
.sf-zeile-grund--champion { background: var(--sf-gruen); }
.sf-zeile-inhalt { position: relative; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 6px; color: var(--sf-dunkel); }
.sf-zeile-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; background: var(--sf-gruen-hell); box-shadow: 0 0 0 2px var(--sf-gruen); }
.sf-zeile-name { flex: 1; font-size: 14px; font-weight: 700; }
.sf-zeile-score { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }

.sf-avatar { position: absolute; width: 60px; height: 60px; opacity: 0; }
.sf-avatar img { position: absolute; inset: 0; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sf-gruen); background: var(--sf-gruen-hell); }
.sf-avatar--0 { left: 70px; top: 358px; }
.sf-avatar--1 { left: 75px; top: 231px; }
.sf-avatar--2 { left: 166px; top: 142px; }
.sf-avatar--3 { left: 294px; top: 142px; }
.sf-avatar--4 { left: 385px; top: 231px; }
.sf-avatar--5 { left: 390px; top: 358px; }

.sf-champion { position: absolute; left: 120px; top: 559px; width: 160px; display: flex; justify-content: center; opacity: 0; }
.sf-champion > span { display: flex; align-items: center; gap: 5px; background: var(--sf-gruen-hell); border: 2px solid var(--sf-gruen); color: var(--sf-gruen); font-size: 12px; font-weight: 800; padding: 2px 10px 2px 6px; border-radius: 9999px; white-space: nowrap; }

.sf-paket { position: absolute; left: 0; top: 0; width: 90px; height: 90px; transform-origin: 50% 50%; opacity: 0; }
.sf-paket img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.sf-paket .sf-paket-zu { opacity: 0; }

/* ---------- Finale ---------- */
.sf-finale { background: #fff; padding: clamp(64px, 10vw, 120px) 24px; position: relative; }
.sf-finale-raster { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 4vw, 64px); }
.sf-finale-spalte { display: flex; flex-direction: column; gap: 20px; }
.sf-finale-bild { aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; }
.sf-finale-spalte--spieler .sf-finale-bild { background: var(--sf-gruen-hell); }
.sf-finale-spalte--verkaeufer .sf-finale-bild { background: var(--sf-teal-hell); }
.sf-finale-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-seite .sf-finale-titel { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; color: var(--sf-dunkel); }
.sf-finale-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.sf-seite .sf-finale-button { text-decoration: none; font-weight: 700; font-size: 16px; padding: 16px 28px; border-radius: 12px; }
.sf-seite .sf-finale-mehr { font-weight: 700; font-size: 15px; text-decoration: none; }
.sf-seite .sf-finale-spalte--spieler .sf-finale-button { background: var(--sf-gruen); color: #fff; }
.sf-seite .sf-finale-spalte--spieler .sf-finale-button:hover { background: #007f28; color: #fff; }
.sf-seite .sf-finale-spalte--spieler .sf-finale-mehr { color: var(--sf-gruen); }
.sf-seite .sf-finale-spalte--verkaeufer .sf-finale-button { background: transparent; color: var(--sf-teal); box-shadow: inset 0 0 0 2px var(--sf-teal); }
.sf-seite .sf-finale-spalte--verkaeufer .sf-finale-button:hover { background: var(--sf-teal-hell); color: var(--sf-teal); }
.sf-seite .sf-finale-spalte--verkaeufer .sf-finale-mehr { color: var(--sf-teal); }

/* ---------- Drei kurze Antworten ---------- */
.sf-antworten { background: var(--sf-grau); padding: clamp(64px, 10vw, 112px) 24px; }
.sf-antworten-inhalt, .sf-fairness-inhalt { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.sf-seite .sf-antworten h2, .sf-seite .sf-fairness h2 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(28px, 3vw, 40px); color: var(--sf-dunkel); }
.sf-antworten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.sf-antwort { background: #fff; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 40px rgba(26, 28, 28, 0.04); }
.sf-seite .sf-antwort h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; color: var(--sf-dunkel); }
.sf-seite .sf-antwort p { font-size: 16px; line-height: 1.6; color: var(--sf-text); flex: 1; text-wrap: pretty; }
.sf-seite .sf-antwort a { font-weight: 700; font-size: 15px; text-decoration: none; }

/* ---------- Fair von Anfang an (Ziel von /fairness) ---------- */
.sf-fairness { background: #fff; padding: clamp(64px, 10vw, 112px) 24px; scroll-margin-top: 80px; }
.sf-fairness-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px 40px; }
.sf-fairness-punkt { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--sf-linie); padding-top: 16px; }
.sf-seite .sf-fairness-punkt h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; color: var(--sf-dunkel); }
.sf-seite .sf-fairness-punkt p { font-size: 16px; line-height: 1.6; color: var(--sf-text); text-wrap: pretty; }