/*
 * Ralya-Website, dritte Fassung (Joshua, 17.10.2026): warmes Beige statt Weiß, ein weiches
 * Dunkel statt Tiefschwarz, die Markenfarbe (Entscheidung 0049) auf den Knöpfen und der
 * Pro-Karte. Die Farbe im Bild kommt aus dunklen Mockups der App. Systemschrift, eng gesetzt.
 * Keine Webfonts, keine Bibliothek, kein Build.
 */

:root {
  --bg: #f0eee4;
  --bg-alt: #e8e5d9;
  --bg-deep: #ddd8c7;
  --card: #faf9f5;
  --ink: #26241f;
  --ink-2: #57544a;
  --ink-3: #85816f;
  --line: #d6d2c2;
  --lime: #d5ef46;
  --lime-hover: #e0f566;
  --lime-soft: #f1fbb8;
  --dark: #1d1c18;
  --dark-2: #2a2924;
  --dark-line: rgba(255, 255, 255, 0.1);
  --dark-text: #f3f1ea;
  --dark-muted: #a5a194;
  --sans:
    system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 80rem;
  --narrow: 44rem;
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --shadow: 0 2px 6px rgba(40, 35, 20, 0.08), 0 28px 60px -24px rgba(40, 35, 20, 0.4);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 1.5rem + 4.8vw, 5.25rem);
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem);
}

h3 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

p + p {
  margin-top: 1em;
}

/* Layout */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.narrow {
  max-width: var(--narrow);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.section {
  padding-block: clamp(4rem, 8vw, 7.5rem);
}

.alt {
  background: var(--bg-alt);
}

.center {
  text-align: center;
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--ink);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  z-index: 20;
}

.skip:focus {
  top: 1rem;
}

/* Einblenden beim Scrollen; die Verzögerung kommt je Element über --d. */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* Beim Laden sichtbare Elemente laufen als Animation ab, ohne auf den Observer zu warten. */
.js .reveal.now {
  transition: none;
  animation: rise 0.9s var(--ease) both;
  animation-delay: var(--d, 0s);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Parallaxe: --shift setzt das Skript je nach Abstand zur Bildmitte. */
[data-parallax] {
  translate: 0 var(--shift, 0px);
  will-change: translate;
}

/* Kopfzeile */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-block: 0.875rem;
  background: rgba(240, 238, 228, 0.75);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

.site-header.scrolled {
  border-bottom-color: var(--line);
}

.brand img {
  height: 1.5rem;
  width: auto;
}

.site-nav {
  display: none;
  gap: 1.75rem;
  font-size: 0.9375rem;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.2s;
}

.site-nav a {
  position: relative;
  padding-block: 0.25rem;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--ink);
}

.site-nav a:hover::after,
.site-nav a.active::after {
  transform: scaleX(1);
}

@media (min-width: 60rem) {
  .site-nav {
    display: flex;
  }
}

/* Rechts in der Kopfzeile: neue Besucher zur Demo, wer schon ein Konto hat, meldet sich an. */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.header-login {
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.header-login:hover {
  color: var(--ink);
}

.header-actions .button {
  white-space: nowrap;
}

/* Am Handy nur ein Knopf: „Anmelden“ und „Demo ansehen“ nebeneinander wirkten überladen und
   ähnlich (Joshua, 18.10.2026). Wer ein Konto hat, kommt über die Demo oder app.ralya.de hinein. */
@media (max-width: 40rem) {
  .header-login {
    display: none;
  }
}

/* Knöpfe, Links, kleine Teile */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.button:hover {
  background: var(--lime-hover);
}

.button:active {
  background: #c9e53a;
}

.button-ghost {
  background: transparent;
  border: 1px solid var(--ink);
  font-weight: 500;
}

.button-ghost:hover {
  background: var(--ink);
  color: var(--bg);
}

.button-small {
  min-height: 2.375rem;
  padding: 0 1.125rem;
  font-size: 0.9375rem;
}

.textlink {
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}

.textlink::after {
  content: "→";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 0.25s var(--ease);
}

.textlink:hover::after {
  transform: translateX(3px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

.actions.center {
  justify-content: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.125rem;
}

.center .eyebrow {
  justify-content: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.chip-dark {
  background: rgba(20, 18, 12, 0.62);
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.chip-lime {
  background: var(--lime);
  color: var(--ink);
}

/* Hero: links Text, rechts der Clip; auf schmalen Schirmen untereinander. */

.hero {
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background:
    radial-gradient(50% 55% at 88% 10%, rgba(213, 239, 70, 0.14), transparent 70%),
    radial-gradient(45% 50% at 5% 95%, rgba(255, 255, 255, 0.7), transparent 70%);
}

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 64rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

/* Jeder Satz der Headline steht in genau einer Zeile. Die Schrift richtet sich nach der Breite
   der Textspalte: „Ralya schneidet.“ ist etwa 6,7 em breit, 14cqi lässt also immer etwas Luft.
   Vorher brach die zweite Zeile am Desktop bei 84 px in einer 517 px breiten Spalte um
   (Joshua, 18.10.2026). Ohne Container Queries gilt die Größe aus h1 oben. */
.hero-copy {
  container-type: inline-size;
}

.hero h1 {
  font-size: clamp(2rem, 14cqi, 5.25rem);
}

.hero h1 span {
  display: block;
  white-space: nowrap;
}

.lead {
  margin-top: 1.5rem;
  max-width: 30rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
}

/* Hero: ein Clip als Videokarte. Oben das Standbild mit dem Fortschritt des laufenden Clips am
   unteren Rand, darunter die Player-Leiste mit der Timeline des Satzes: jedes Segment ein
   erkannter Ballwechsel, der laufende in vollem Lime. Dahinter zwei angedeutete Karten. */
.solo {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
  padding-top: 1.5rem;
}

.solo-ghost {
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 60%;
  border-radius: 1rem;
  background: #3a3832;
  opacity: 0.35;
}

.solo-ghost.g1 {
  top: 0.75rem;
  left: 4%;
  right: 4%;
  background: #2e2d28;
  opacity: 0.7;
}

.solo-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--dark);
  color: var(--dark-text);
  box-shadow: var(--shadow);
}

/* Das Seitenverhältnis des Bildes steht fest, damit beim Laden nichts springt. */
.solo-video {
  position: relative;
  aspect-ratio: 1280 / 715;
  background: #0c1114;
}

.solo-video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solo-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
}

.solo-progress span {
  display: block;
  height: 100%;
  background: var(--lime);
  transform: scaleX(0.4);
  transform-origin: left;
  animation: solo-play 21s linear infinite;
}

@keyframes solo-play {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.solo-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 1rem 1.25rem 1.2rem;
}

.solo-meta strong {
  font-weight: 500;
}

.solo-meta .sub {
  color: var(--dark-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.solo-timeline {
  position: relative;
  grid-column: 1 / -1;
  height: 0.5rem;
  margin-top: 0.75rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.06);
}

.solo-timeline span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--s) * 1%);
  width: calc((var(--e) - var(--s)) * 1%);
  border-radius: 2px;
  background: rgba(213, 239, 70, 0.3);
}

.solo-timeline .on {
  top: -3px;
  bottom: -3px;
  background: var(--lime);
}

/* So geht's: Die Szene bleibt stehen, während die Schritte vorbeiziehen. */

.story-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}

@media (min-width: 60rem) {
  .story-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 5rem;
    align-items: start;
  }
}

.story-stage {
  position: sticky;
  top: 5rem;
  height: min(52vh, 27rem);
  display: grid;
  place-items: center;
  z-index: 1;
}

/* Am Handy steht die Szene nicht gepinnt, sondern vor dem jeweiligen Schritt; das Skript kopiert
   sie dorthin. Gepinnt lief der Text unter der Grafik durch (Joshua, 18.10.2026). */
.scene-inline {
  display: none;
}

@media (max-width: 60rem) {
  .story-stage {
    display: none;
  }

  .scene-inline {
    display: block;
    margin-bottom: 1.5rem;
  }

  .scene-inline .scene {
    opacity: 1;
    transform: none;
    width: 100%;
  }

  /* Am Handy sind alle Schritte voll sichtbar. Mit .story-step allein verlor die Regel gegen die
     allgemeine weiter unten (gleiche Spezifität, später in der Datei): Schritt 2 und 3 blieben
     samt Bild bei 40 %, bis ihre Überschrift die Bildmitte erreichte (Joshua, 18.10.2026). */
  .story-steps .story-step {
    opacity: 1;
  }

  /* Nach dem letzten Schritt folgt die Bibliothek mit demselben Hintergrund; ohne diese Abzüge
     lagen gut 200 px Leere zwischen den Texten. */
  .story-steps .story-step:last-child {
    padding-bottom: 0;
  }

  .section.story {
    padding-bottom: 2.5rem;
  }
}

.scene {
  grid-area: 1 / 1;
  width: min(100%, 34rem);
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  pointer-events: none;
}

.scene.active {
  opacity: 1;
  transform: none;
}

.story-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.story-step {
  counter-increment: step;
  padding: clamp(2rem, 7vh, 4rem) 0;
  border-top: 1px solid var(--line);
  opacity: 0.4;
  transition: opacity 0.5s var(--ease);
}

@media (min-width: 60rem) {
  .story-step {
    min-height: 42vh;
    display: grid;
    align-content: center;
  }
}

.story-step.active {
  opacity: 1;
}

.story-step h3 {
  font-size: 1.75rem;
}

.story-step h3::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.story-step p {
  margin-top: 0.75rem;
  max-width: 30rem;
  color: var(--ink-2);
}

/* Szene 1: Handy mit Saugnapf an der Glasscheibe hinter der Grundlinie */
.setup {
  position: relative;
  border-radius: 1.5rem;
  padding: 0.45rem;
  background: var(--dark);
  box-shadow: var(--shadow);
}

.setup picture {
  display: block;
}

/* Am Desktop fehlt oben etwas Hallendecke, damit die gepinnte Szene in die Höhe passt; das
   Smartphone sitzt im Bild unterhalb der Mitte und bleibt ganz sichtbar. */
.setup-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 100%;
  border-radius: 1.1rem;
}

@media (max-width: 60rem) {
  .setup-photo {
    aspect-ratio: 4 / 3;
    object-position: 50% 50%;
  }
}

.setup-hint {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
}

/* Szene 2: Upload und Push-Nachricht, dunkel wie in der App. Die Farben sind die Zinktöne aus
   apps/web/src/app/globals.css (canvas, surface, Linien, Text), damit es wie ein Screenshot
   wirkt; der Kontrast zum Beige der Seite ist gewollt (Joshua, 18.10.2026). */
.scene-upload {
  display: grid;
  gap: 0.9rem;
  width: min(100%, 26rem);
}

.app-upload {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem 1.35rem 1.15rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #18181b;
  color: #f4f4f5;
  box-shadow: var(--shadow);
}

.app-upload-sub {
  color: #71717a;
  font-size: 0.8125rem;
}

.app-upload-title {
  font-size: 1.0625rem;
  font-weight: 500;
}

.app-upload-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.app-upload-percent {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.app-upload-bytes {
  color: #71717a;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.app-upload-bar {
  display: block;
  height: 0.75rem;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.app-upload-bar span {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: var(--lime);
  box-shadow: 0 0 16px rgba(213, 239, 70, 0.45);
}

.app-upload-step {
  margin-top: 0.45rem;
  color: #d4d4d8;
  font-size: 0.8125rem;
}

/* Push-Nachricht wie auf dem Sperrbildschirm, leicht versetzt über der Karte. */
.push {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-left: 2rem;
  padding: 0.8rem 0.95rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(39, 39, 42, 0.94);
  color: #f4f4f5;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.push-icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
}

.push-text {
  min-width: 0;
}

.push-head {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: #a1a1aa;
  font-size: 0.75rem;
}

.push-head strong {
  color: #d4d4d8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.push-title {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.push-body {
  margin-top: 0;
  color: #d4d4d8;
  font-size: 0.8125rem;
}

/* Szene 3: das Raster aus Clips */
.scene-clips {
  position: relative;
}

.mini-clips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.mini-clips span {
  aspect-ratio: 16 / 10;
  border-radius: 0.75rem;
  background: var(--dark) url("assets/court-1.svg") center / cover no-repeat;
  box-shadow: var(--shadow);
}

/* Jeder Clip mit einer anderen Aufstellung, wie in der Bibliothek. */
.mini-clips span:nth-child(2) {
  background-image: url("assets/court-2.svg");
}

.mini-clips span:nth-child(3) {
  background-image: url("assets/court-3.svg");
}

.mini-clips span:nth-child(4) {
  background-image: url("assets/court-4.svg");
}

.mini-clips span:nth-child(5) {
  background-image: url("assets/court-5.svg");
}

.mini-clips span:nth-child(6) {
  background-image: url("assets/court-6.svg");
}

.mini-clips .is-active {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.mini-chip {
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  transform: translateX(-50%);
  box-shadow: var(--shadow);
}

/* Zwei Spalten: Text und Bild */

.split {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 5rem;
  }

  .split-reverse .split-text {
    order: 2;
  }
}

.split-text h2 + p {
  margin-top: 1.25rem;
  color: var(--ink-2);
}

.split-text.center {
  max-width: 40rem;
}

.facts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
  color: var(--ink-2);
}

.facts li {
  position: relative;
  padding-left: 1.5rem;
}

.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 1px rgba(38, 36, 31, 0.15);
}

/* Clip-Raster: drei Spalten, die beim Scrollen leicht gegeneinander wandern */

.clips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.clip-col {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.clip-col:nth-child(2) {
  margin-top: 2.5rem;
}

.clip {
  background: var(--dark);
  border-radius: 0.875rem;
  overflow: hidden;
  color: var(--dark-text);
  box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease);
}

.clip:hover {
  transform: translateY(-3px);
}

.clip-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.clip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  transform-origin: 50% 70%;
}

.clip-thumb span {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  background: rgba(0, 0, 0, 0.6);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.clip p {
  display: grid;
  gap: 0.1rem;
  padding: 0.625rem 0.75rem 0.75rem;
  font-size: 0.8125rem;
}

.clip strong {
  font-weight: 500;
}

.clip span {
  color: var(--dark-muted);
}

@media (max-width: 40rem) {
  .clips {
    gap: 0.6rem;
  }

  .clip-col {
    gap: 0.6rem;
  }

  .clip p {
    font-size: 0.6875rem;
    padding: 0.5rem 0.55rem;
  }
}

/* Handy mit Hochkant-Highlight: dreht sich beim Einblenden in die Ebene */

.phone-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  perspective: 1200px;
}

.phone {
  width: min(100%, 15rem);
  aspect-ratio: 9 / 19.2;
  padding: 0.5rem;
  border-radius: 2.6rem;
  background: var(--dark);
  box-shadow: var(--shadow);
  flex: none;
  transition: transform 1s var(--ease);
}

.js .phone-stage:not(.in) .phone {
  transform: rotateY(-18deg) translateX(30px);
}

.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 2.1rem;
  overflow: hidden;
  background: #0c1114;
}

.phone-screen > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 50%;
  transform: scale(1.3);
  transform-origin: 35% 62%;
}

.phone-chip {
  position: absolute;
  top: 1.1rem;
  left: 1rem;
}

.phone-mark {
  position: absolute;
  right: 0.9rem;
  bottom: 2.25rem;
  width: 3.4rem;
  opacity: 0.85;
}

.phone-progress {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1.1rem;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
}

.phone-progress span {
  display: block;
  height: 100%;
  width: 55%;
  border-radius: inherit;
  background: #fff;
  animation: fill 8s linear infinite alternate;
}

@keyframes fill {
  from {
    width: 18%;
  }
  to {
    width: 92%;
  }
}

/* Zahlen und Coach */

.duo {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 48rem) {
  .duo {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

.card {
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.card-dark {
  background: linear-gradient(160deg, #2a2924, var(--dark));
  color: var(--dark-text);
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--dark-muted);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.stat-row strong {
  display: block;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat-row span {
  font-size: 0.8125rem;
  color: var(--dark-muted);
}

.court-live {
  width: 8.5rem;
  margin: 0.5rem auto 0;
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5;
}

.court-live .floor {
  fill: #15171a;
  stroke: rgba(255, 255, 255, 0.4);
}

.court-live .net {
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 2;
}

.court-live .dot {
  stroke: none;
}

.court-live .d1 {
  fill: var(--lime);
}

.court-live .d2 {
  fill: #f4f4f5;
}

.court-live .d3 {
  fill: #f472b6;
}

.court-live .d4 {
  fill: #60a5fa;
}

.court-live [data-trails] circle {
  stroke: none;
  opacity: 0.25;
}

.chat-stage {
  display: grid;
  place-items: center;
}

.chat-phone {
  width: min(100%, 17rem);
  padding: 0.5rem;
  border-radius: 2.4rem;
  background: var(--dark);
  box-shadow: var(--shadow);
}

.chat {
  display: grid;
  gap: 0.6rem;
  padding: 1.25rem 0.9rem 1.4rem;
  border-radius: 1.9rem;
  background: var(--card);
  min-height: 24rem;
  align-content: start;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.bubble {
  max-width: 90%;
  padding: 0.65rem 0.8rem;
  border-radius: 1rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.bubble-coach {
  background: var(--bg-alt);
  border-bottom-left-radius: 0.3rem;
}

.bubble-me {
  justify-self: end;
  background: var(--ink);
  color: var(--bg);
  border-bottom-right-radius: 0.3rem;
}

.refs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.refs span {
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--lime);
  font-size: 0.6875rem;
  font-weight: 500;
}

/* Gründer: dunkleres Beige, Foto links im Hochformat */

.founder {
  background:
    radial-gradient(50% 70% at 10% 20%, rgba(241, 251, 184, 0.45), transparent 70%), var(--bg-deep);
  padding-block: clamp(4rem, 8vw, 7.5rem);
}

.founder-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 56rem) {
  .founder-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 5rem;
  }
}

.photo {
  position: relative;
  margin: 0;
  width: min(100%, 24rem);
  aspect-ratio: 4 / 5;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--dark);
  box-shadow: var(--shadow);
}

.photo picture {
  display: block;
  height: 100%;
}

.photo-note {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  background: rgba(20, 18, 12, 0.55);
  color: #fff;
  font-size: 0.6875rem;
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.founder-text {
  max-width: 38rem;
}

.founder h2 + p {
  margin-top: 1.25rem;
}

.founder p {
  color: var(--ink-2);
}

.founder-sign {
  margin-top: 1.5rem;
  font-weight: 500;
  color: var(--ink) !important;
}

/* FAQ: Knopf und Bereich; die Höhe geht über grid-template-rows weich auf und zu. */

.faq {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item h3 {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.faq-item button {
  all: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.125rem 0;
  cursor: pointer;
}

.faq-item button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

.faq-icon {
  position: relative;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  transition:
    transform 0.4s var(--ease),
    background 0.3s;
}

.open .faq-icon {
  background: var(--lime);
  border-color: var(--lime);
}

.faq-icon {
  overflow: hidden;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--ink);
  border-radius: 1px;
  transition: all 0.4s var(--ease);
}

.faq-icon::before {
  width: 0.625rem;
  height: 1.5px;
}

.faq-icon::after {
  width: 1.5px;
  height: 0.625rem;
}

/* Geöffnet: Lime, und Plus wird zur Naht eines Padelballs, zwei Bögen links und rechts. */
.open .faq-icon {
  transform: rotate(90deg);
}

.open .faq-icon::before,
.open .faq-icon::after {
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  inset: auto;
}

.open .faq-icon::before {
  left: -1.05rem;
  top: -0.05rem;
}

.open .faq-icon::after {
  right: -1.05rem;
  top: -0.05rem;
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}

.faq-panel > div {
  overflow: hidden;
}

.open .faq-panel {
  grid-template-rows: 1fr;
}

.faq-panel p {
  padding-bottom: 1.25rem;
  color: var(--ink-2);
  max-width: 38rem;
}

/* Abschluss und Fußzeile */

.closing {
  padding-block: clamp(4rem, 8vw, 7.5rem);
}

.closing h2 + p {
  margin-top: 1rem;
  color: var(--ink-2);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 1.75rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.site-footer .row {
  flex-wrap: wrap;
}

.site-footer nav {
  display: flex;
  gap: 1.5rem;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a[aria-current="page"] {
  color: var(--ink);
}

/* Impressum und Datenschutz: schmale Spalte, ruhige Überschriften, Fließtext in normaler Größe. */

.legal h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

.legal-updated {
  margin-top: 0.5rem;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.legal section {
  margin-top: 2.25rem;
}

.legal h2 {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.legal p,
.legal ul {
  margin-top: 0.6rem;
  color: var(--ink-2);
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: 0.5rem;
}

.legal strong {
  color: var(--ink);
  font-weight: 600;
}

.legal a {
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .reveal.now,
  .button,
  .clip,
  .phone,
  .scene,
  .story-step,
  .faq-icon,
  .faq-icon::after,
  .faq-panel {
    transition: none;
  }

  [data-parallax] {
    translate: none;
  }

  .js .phone-stage:not(.in) .phone {
    transform: none;
  }

  .reveal.now,
  .solo-progress span,
  .phone-progress span {
    animation: none;
  }
}