/* FITVYR Coach Werbeseite. Farben und Schrift aus dem CI-Kit (Sand #D8CA9F, Schwarz #1D1D1D, Bebas Kai, Arial).
   Eine Seite in Dunkel wie die App, die Abos als einziger Farbblock in Sand. Abstände mit logischen Eigenschaften,
   damit Hebräisch ohne eigene Regeln von rechts nach links läuft. */
@font-face {
  font-family: "Coach Titel";
  src: url(titel.7c9c08fe14.woff2) format("woff2");
  font-display: swap;
  font-weight: 400;
}

:root {
  --grund: #161614;
  --flaeche: #21211f;
  --linie: #33332f;
  --text: #f4f2ec;
  --text-2: #b7b4a9;
  --sand: #d8ca9f;
  --schwarz: #1d1d1d;
  --titel: "Coach Titel", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text-schrift: Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --rand: clamp(16px, 4.5vw, 64px);
  --abstand: clamp(72px, 11vw, 148px);
  --radius: 24px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block-start: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 17px/1.55 var(--text-schrift); overflow-x: clip; }
img, picture { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
h1, h2 { font-family: var(--titel); font-weight: 400; letter-spacing: .01em; line-height: .98; }
h2 { font-size: clamp(38px, 5.4vw, 72px); max-width: 24ch; }
h3 { font-size: 19px; line-height: 1.25; }
.icon { width: 28px; height: 28px; fill: currentColor; display: block; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 4px; }

.sprung { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; background: var(--sand); color: var(--schwarz); padding: 10px 16px; border-radius: 999px; z-index: 3; }
.sprung:focus { inset-block-start: 12px; }

/* Kopf */
.kopf { position: sticky; inset-block-start: env(safe-area-inset-top, 0px); z-index: 2; display: flex; align-items: center; gap: 32px; height: 68px; padding-inline: var(--rand); background: rgb(22 22 20 / .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.logo { position: relative; display: block; flex: none; }
.logo img { width: 124px; height: auto; }
.logo-r { position: absolute; inset-inline-end: -11px; inset-block-start: 1px; font-size: 10px; line-height: 1; }
.haupt { display: flex; gap: 28px; margin-inline-start: auto; }
.haupt a { color: var(--text-2); text-decoration: none; font-size: 15px; transition: color .2s; }
.haupt a:hover { color: var(--text); }
.sprachen { position: relative; font-size: 14px; }
.kopf > .sprachen:nth-child(2), .kopf > .logo + .sprachen { margin-inline-start: auto; }
.sprachen summary { cursor: pointer; list-style: none; padding: 6px 12px; border: 1px solid var(--linie); border-radius: 999px; }
.sprachen summary::-webkit-details-marker { display: none; }
.sprachen ul { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 8px); min-width: 160px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; padding: 8px; }
.sprachen a { display: block; padding: 8px 12px; border-radius: 10px; text-decoration: none; }
.sprachen a:hover, .sprachen a[aria-current] { background: var(--linie); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); min-height: calc(100dvh - 68px); padding: 24px var(--rand) 40px; }
.hero h1 { font-size: clamp(60px, 8.4vw, 132px); line-height: .94; }
.hero h1 em { font-style: normal; color: var(--sand); display: block; }
.hero-lead { margin-block-start: 26px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; max-width: 34ch; color: var(--text-2); }
.hero-status { margin-block-start: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--text-2); font-size: 15px; }
.status { display: inline-block; padding: 12px 22px; border-radius: 999px; background: var(--sand); color: var(--schwarz); font-family: var(--titel); font-size: 22px; letter-spacing: .04em; line-height: 1; }
.pfeil { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 22px; color: var(--text); font-size: 15px; text-underline-offset: 4px; }
.pfeil .icon { width: 18px; height: 18px; transition: translate .25s cubic-bezier(.16, 1, .3, 1); }
.pfeil:hover .icon { translate: 0 3px; }
.hero-bild { position: relative; display: grid; justify-items: center; }
.szene { position: relative; width: min(100%, max(320px, calc((100dvh - 150px) * .88))); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--linie), 0 34px 70px -24px rgb(0 0 0 / .8); }
.szene img { display: block; width: 100%; height: auto; }
/* Scan: läuft nur über das Kamerabild im Handy. Das Viereck ist der Bildschirm zwischen Kopfzeile und Hinweis, gerechnet in werkzeug/bilder.mjs. */
.scan { position: absolute; inset: 0; clip-path: polygon(9.32% 27.39%, 36.53% 26.72%, 35.14% 59.33%, 7.61% 58.30%); pointer-events: none; }
.scan::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 14%; height: 13%; transform-origin: 22% 100%; transform: translateY(120%) rotate(.4deg); background: linear-gradient(to bottom, rgb(216 202 159 / 0), rgb(216 202 159 / .14) calc(100% - 1.5px), rgb(216 202 159 / .8) calc(100% - 1.5px)); }
.hero-bild figcaption { position: relative; margin-block-start: 12px; color: var(--text-2); font-size: 12px; }

/* Geräte */
.geraete { padding: 22px var(--rand); border-block: 1px solid var(--linie); }
.geraete p { font-size: clamp(16px, 1.4vw, 19px); max-width: 80ch; }
.geraete p + p { margin-block-start: 4px; font-size: 13px; color: var(--text-2); }

/* Ablauf */
.ablauf { padding: var(--abstand) var(--rand) 0; }
.ablauf ol { margin-block-start: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.ablauf li { border-block-start: 2px solid var(--sand); padding-block-start: 18px; }
.ablauf .icon { color: var(--sand); margin-block-end: 16px; }
.ablauf p { margin-block-start: 8px; color: var(--text-2); font-size: 16px; }

/* Funktionen */
.funktionen { padding: var(--abstand) var(--rand) 0; }
.bento { margin-block-start: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.zelle { background: var(--flaeche); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 34px); overflow: hidden; }
.zelle h3 { font-family: var(--titel); font-weight: 400; font-size: clamp(30px, 3vw, 42px); letter-spacing: .01em; line-height: 1; }
.zelle p { margin-block-start: 10px; color: var(--text-2); font-size: 16px; max-width: 46ch; }
.zelle .notiz { font-size: 14px; color: var(--sand); }
.ernaehrung { grid-column: span 5; grid-row: span 2; display: flex; flex-direction: column; }
.ernaehrung .ausschnitt { margin-block-start: auto; padding-block-start: 24px; margin-inline: calc(-1 * clamp(22px, 2.6vw, 34px)); margin-block-end: calc(-1 * clamp(22px, 2.6vw, 34px)); }
.quer { grid-column: span 7; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: center; }
.quer .ausschnitt img { border-radius: 16px; }
.klein { grid-column: span 6; }
.klein .icon { color: var(--sand); margin-block-end: 14px; }
.sandig { background: var(--sand); color: var(--schwarz); }
.sandig p { color: #3b3a33; }
.sandig .icon { color: var(--schwarz); }

/* Programme */
.programme { padding: var(--abstand) 0 0; }
.programme h2, .programme .absatz, .programme .reformer { margin-inline: var(--rand); }
.absatz { margin-block-start: 18px; color: var(--text-2); max-width: 52ch; }
.galerie { margin-block-start: clamp(32px, 4vw, 52px); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-inline: var(--rand); padding-block-end: 12px; scroll-padding-inline: var(--rand); scrollbar-width: thin; scrollbar-color: var(--linie) transparent; }
.galerie li { flex: 0 0 clamp(210px, 21vw, 280px); scroll-snap-align: start; }
.galerie img { border-radius: 20px; aspect-ratio: 4 / 5; object-fit: cover; transition: scale .4s cubic-bezier(.16, 1, .3, 1); }
.galerie figcaption { margin-block-start: 12px; display: grid; gap: 2px; font-size: 14px; color: var(--text-2); }
.galerie strong { font-family: var(--titel); font-weight: 400; font-size: 24px; letter-spacing: .02em; line-height: 1.1; color: var(--text); }
.reformer { margin-block-start: 28px; max-width: 70ch; color: var(--text-2); font-size: 16px; }

/* Daten */
.daten { padding: var(--abstand) var(--rand) 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.daten-kopf p { margin-block-start: 18px; color: var(--text-2); max-width: 44ch; }
.daten dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px clamp(24px, 3vw, 44px); }
.daten dt { font-weight: 700; }
.daten dd { margin-block-start: 6px; color: var(--text-2); font-size: 16px; }

/* Abos */
.abos { margin-block-start: var(--abstand); background: var(--sand); color: var(--schwarz); padding: var(--abstand) var(--rand); }
.abos-innen { max-width: 1240px; margin-inline: auto; }
.abo-gitter { margin-block-start: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; }
.abo-gross { background: var(--schwarz); color: var(--text); border-radius: var(--radius); padding: clamp(26px, 3.4vw, 44px); }
.abo-band { color: var(--sand); font-weight: 700; font-size: 14px; }
.abo-gross h3 { margin-block-start: 8px; font-family: var(--titel); font-weight: 400; font-size: clamp(44px, 5vw, 64px); line-height: 1; letter-spacing: .01em; }
.abo-preis { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.abo-preis strong { font-family: var(--titel); font-weight: 400; font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }
.abo-gross .abo-preis { margin-block-start: 22px; }
.abo-gross .abo-preis strong { font-size: clamp(52px, 6vw, 80px); color: var(--sand); }
.abo-oder { margin-block-start: 6px; color: var(--text-2); }
.abo-oder strong { color: var(--text); }
.abo-gross ul { margin-block-start: 22px; display: grid; gap: 8px; }
.abo-gross li, .abo ul li { position: relative; padding-inline-start: 20px; }
.abo-gross li::before, .abo ul li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; width: 10px; height: 2px; background: currentColor; }
.abo-liste { display: grid; gap: 16px; }
.abo { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: rgb(255 255 255 / .34); border-radius: var(--radius); padding: clamp(20px, 2.4vw, 30px); }
.abo h3 { font-family: var(--titel); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: .01em; }
.abo ul { margin-block-start: 8px; font-size: 16px; }
.abo-hinweis { margin-block-start: 22px; font-size: 14px; max-width: 76ch; color: #3b3a33; }

/* Download */
.download { padding: var(--abstand) var(--rand); text-align: center; display: grid; justify-items: center; }
.download h2 { max-width: none; font-size: clamp(56px, 9vw, 128px); }
.download > p { margin-block-start: 16px; color: var(--text-2); }
.download ul { margin-block-start: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.download li { display: grid; gap: 2px; min-width: 190px; padding: 14px 26px; border: 1px solid var(--linie); border-radius: 18px; text-align: start; }
.download span { font-weight: 700; }
.download small { color: var(--text-2); font-size: 13px; }

/* Fuß */
.fuss { border-block-start: 1px solid var(--linie); padding: 40px var(--rand) 36px; display: grid; gap: 16px; color: var(--text-2); font-size: 14px; }
.wichtig { max-width: 86ch; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--text); }
.fuss-links a { text-underline-offset: 3px; }
.fuss-klein { font-size: 13px; max-width: 86ch; }

/* Rechtstext und einfache Seiten */
.rechtstext { max-width: 760px; margin-inline: auto; padding: 56px var(--rand) 72px; }
.rechtstext h1 { font-size: clamp(44px, 6vw, 72px); }
.rechtstext h2 { font-family: var(--text-schrift); font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: 0; max-width: none; margin-block-start: 34px; }
.rechtstext p { margin-block-start: 10px; color: var(--text-2); }
.rechtstext a { color: var(--text); text-underline-offset: 3px; }
.einfach { display: grid; place-items: center; min-height: 100dvh; padding: 24px; text-align: center; }
.einfach main { display: grid; justify-items: center; gap: 28px; }
.einfach ul { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.einfach ul a { display: block; padding: 10px 22px; border: 1px solid var(--linie); border-radius: 999px; text-decoration: none; }

/* Bewegung: Hero beim Laden, Abschnitte beim Hereinscrollen. Ohne Skript; wo der Browser das nicht kann, steht alles sofort da. */
@media (prefers-reduced-motion: no-preference) {
  .hero-text > * { animation: rein .8s cubic-bezier(.16, 1, .3, 1) both; }
  .hero-text > :nth-child(2) { animation-delay: .08s; }
  .hero-text > :nth-child(3) { animation-delay: .16s; }
  .hero-text > :nth-child(4) { animation-delay: .22s; }
  .szene { animation: rein 1s cubic-bezier(.16, 1, .3, 1) .1s both; }
  .scan::after { animation: scannen 5s cubic-bezier(.45, 0, .55, 1) 1s infinite; }
  @supports (animation-timeline: view()) {
    [data-rein] { animation: rein linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
  }
  .galerie li:hover img { scale: 1.015; }
}
@keyframes scannen {
  0% { opacity: 0; transform: translateY(0) rotate(-1.6deg); }
  8%, 74% { opacity: 1; }
  82%, 100% { opacity: 0; transform: translateY(246%) rotate(2.4deg); }
}
@keyframes rein { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Tablet und Handy: alles einspaltig, Bilder volle Breite. */
@media (max-width: 1000px) {
  .ablauf ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ernaehrung { grid-column: span 12; grid-row: auto; }
  .quer { grid-column: span 12; }
  .daten { grid-template-columns: minmax(0, 1fr); }
  .abo-gitter { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .haupt { display: none; }
  .sprachen { margin-inline-start: auto; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 28px 44px; gap: 36px; }
  .hero h1 { font-size: clamp(50px, 15.4vw, 104px); }
  .szene { width: 100%; }
  .ablauf ol { grid-template-columns: minmax(0, 1fr); }
  .quer { grid-template-columns: minmax(0, 1fr); }
  .klein { grid-column: span 12; }
  .daten dl { grid-template-columns: minmax(0, 1fr); }
  .galerie li { flex-basis: 62vw; }
  .abo { flex-wrap: wrap; }
}