/* HIIT FLOW Landingpage. Eine Familie (Archivo variabel: Gewicht und Breite),
   Farben = die drei Phasen der App. Der Hero füllt sich wie der Timer. */
@font-face{
  font-family:"Archivo";src:url("/fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
}
:root{
  --ink:#121212;--ink-2:#1b1a19;--line:#34302d;--text:#ece7e4;--muted:#bcaea7;
  --prep:#528dff;--work:#ff571a;--rest:#36ffc4;
  --phase:var(--work);
  --w:1160px;--r:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font:400 17px/1.62 "Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%;display:block}
a{color:var(--text)}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Typografie: Überschriften schmal und schwer, Fließtext normal breit */
h1,h2,h3,.display{font-stretch:72%;font-weight:800;line-height:.98;letter-spacing:-.005em;word-spacing:.1em}
h1{font-size:clamp(40px,6.4vw,88px);hyphens:manual;overflow-wrap:break-word}
@media(max-width:600px){h1{hyphens:auto}}
h2{font-size:clamp(40px,6.2vw,84px);margin-bottom:20px}
h3{font-size:clamp(26px,3.4vw,38px);margin-bottom:12px}
h4{font-size:19px;font-weight:700;margin-bottom:4px}
p{max-width:62ch}
.lead{font-size:clamp(18px,2vw,22px);color:var(--muted);max-width:52ch}
.sub{color:var(--muted);max-width:58ch;margin-bottom:40px}
.fine{font-size:14.5px;color:var(--muted);margin-top:14px}

/* Header */
header{position:sticky;top:0;z-index:20;background:rgba(18,18,18,.92);backdrop-filter:blur(10px);border-bottom:1px solid #26231f}
.nav{display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-stretch:75%;font-weight:800;font-size:22px;letter-spacing:.01em}
.logo img{width:30px;height:30px;border-radius:8px}
.nav ul{display:flex;gap:26px;list-style:none;align-items:center}
.nav a{color:var(--text);text-decoration:none;font-size:15px;font-weight:600}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){.nav li.hide-m{display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;font-weight:700;font-size:17px;text-decoration:none;border:2px solid transparent;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--work);color:var(--ink)}
.btn-ink{background:var(--ink);color:var(--text)}
.btn-ghost{border-color:currentColor;color:inherit}
.btn-sm{min-height:42px;padding:0 18px;font-size:15px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}

/* Hero: der Bildschirm füllt sich mit der Phasenfarbe, wie in der App */
.hero{background:var(--phase);color:var(--ink);transition:background-color .5s ease;padding:56px 0 72px;min-height:calc(100svh - 62px)}
.hero[data-phase="prep"]{--phase:var(--prep)}
.hero[data-phase="work"]{--phase:var(--work)}
.hero[data-phase="rest"]{--phase:var(--rest)}
.hero .lead{color:rgba(18,18,18,.82)}
.hero .fine{color:rgba(18,18,18,.78)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.hero h1{margin-bottom:22px}
.hero a{color:var(--ink)}
.hero .btn-ink{color:var(--text)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero{padding-top:40px}}

.stage{position:relative;aspect-ratio:1/1;width:min(100%,540px);margin:0 auto}
.stage canvas,.stage .ring-fallback{position:absolute;inset:0;width:100%;height:100%}
.stage .ring-fallback{padding:8%}
.stage .ring-fallback[hidden]{display:none}
.readout{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;color:var(--ink)}
.readout .phase{font-stretch:72%;font-weight:800;font-size:clamp(20px,2.6vw,30px);letter-spacing:.02em;text-transform:none}
.readout .digits{font-stretch:62%;font-weight:900;font-size:clamp(78px,11.5vw,132px);line-height:.88;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.readout .round{font-weight:700;font-size:clamp(15px,1.8vw,19px)}
.demo-ctl[hidden]{display:none}
.demo-ctl{font:600 14px "Archivo",sans-serif;color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:999px;padding:7px 16px;cursor:pointer;display:block;margin:12px auto 0}
.demo-note{font-size:13.5px;color:rgba(18,18,18,.8);text-align:center;margin:22px auto 0;max-width:36ch}

/* Challenges */
.sec{padding:96px 0}
.sec-tight{padding:56px 0}
.slogan{padding:100px 0 40px}
.slogan .display{font-size:clamp(46px,9vw,128px);line-height:.94}
.slogan .l2{color:var(--rest);display:block}
.slogan p{margin-top:28px}

.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:48px 0 0;position:relative;counter-reset:s}
.steps li{position:relative;padding-top:68px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:48px;height:48px;border-radius:50%;background:var(--work);color:var(--ink);display:grid;place-items:center;font-stretch:72%;font-weight:900;font-size:26px}
.steps li::after{content:"";position:absolute;top:23px;left:60px;right:-12px;height:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps p{color:var(--muted)}
@media(max-width:800px){.steps{grid-template-columns:1fr}.steps li{padding:0 0 0 68px;min-height:52px}.steps li::after{display:none}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev>:first-child{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:32px}.split.rev>:first-child{order:0}}
.list{list-style:none;margin-top:20px}
.list li{padding:12px 0;border-top:1px solid var(--line);max-width:56ch}
.list li:last-child{border-bottom:1px solid var(--line)}
.list b{color:#fff}

/* Bestenliste */
.board{width:100%;max-width:520px}
.board h4{display:flex;justify-content:space-between;color:var(--muted);font-weight:600;font-size:15px;margin-bottom:10px}
.row{display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.row.me{background:linear-gradient(90deg,rgba(255,87,26,.22),transparent);box-shadow:inset 4px 0 0 var(--work);padding-left:14px}
.rank{font-stretch:62%;font-weight:900;font-size:50px;line-height:1;text-align:center;color:var(--muted)}
.row:first-of-type .rank{color:#ffd24d}
.who b{display:block;line-height:1.2;font-size:19px}
.who small{color:var(--muted);font-size:14px}
.track{height:8px;background:var(--line);margin-top:8px;border-radius:2px;overflow:hidden}
.track i{display:block;height:100%;width:0;background:var(--rest);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.in .track i{width:var(--v)}
.pts{font-stretch:75%;font-weight:800;font-size:26px;font-variant-numeric:tabular-nums}
.note{font-size:13px;color:var(--muted);margin-top:10px}

/* Punkte als Rechnung */
.calc{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto auto;gap:22px;align-items:start;margin-top:36px}
.calc .op{font-stretch:62%;font-weight:900;font-size:56px;line-height:1;color:var(--muted);padding-top:2px}
.calc h4{font-stretch:75%;font-size:28px;font-weight:800;margin-bottom:8px}
.calc p{color:var(--muted);font-size:16px}
.calc .sum{font-stretch:62%;font-weight:900;font-size:48px;line-height:1;color:var(--rest)}
@media(max-width:900px){.calc{grid-template-columns:1fr;gap:6px}.calc .op{font-size:34px;padding:4px 0}.calc .sum{margin-top:6px}}

/* Meilensteine Einladung */
.miles{list-style:none;display:flex;justify-content:space-between;margin:34px 0 8px;position:relative;width:100%}
.miles::before{content:"";position:absolute;left:12px;right:12px;top:18px;height:3px;background:var(--line)}
.miles li{position:relative;text-align:center;font-size:14px;color:var(--muted);min-width:54px}
.miles li::before{content:"";display:block;width:38px;height:38px;border-radius:50%;background:var(--ink);border:4px solid var(--work);margin:0 auto 10px;position:relative}
.split>*{min-width:0}
@media(max-width:600px){.miles{flex-wrap:wrap;row-gap:20px}.miles::before{display:none}.miles li{flex:1 1 30%}}
.miles b{display:block;font-stretch:72%;font-weight:800;font-size:40px;color:var(--text);line-height:1}

/* Vorteile als Liste */
.defs{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:20px}
.defs div{border-top:1px solid var(--line);padding:20px 0 22px}
.defs dt{font-stretch:75%;font-weight:800;font-size:26px;line-height:1.1;margin-bottom:6px}
.defs dd{color:var(--muted);max-width:46ch}
@media(max-width:760px){.defs{grid-template-columns:1fr}}

.phone{border-radius:30px;border:3px solid #34292a;overflow:hidden;background:#000;box-shadow:0 30px 70px -24px rgba(0,0,0,.85)}
.phone-wrap{display:flex;justify-content:center}
.phone-wrap .phone{width:min(100%,290px);max-height:560px}
.phone-wrap .phone img{width:100%;height:560px;object-fit:cover;object-position:top}
.video{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#000}
.video video{width:100%}

/* Timer-Phasen */
.phases{display:flex;height:72px;margin:8px 0 12px;border-radius:var(--r);overflow:hidden}
.phases span{display:grid;place-items:center;font-stretch:72%;font-weight:800;color:var(--ink);font-size:17px;white-space:nowrap}
.ph-prep{background:var(--prep);flex:10}.ph-work{background:var(--work);flex:20}.ph-rest{background:var(--rest);flex:10}
.phases-cap{color:var(--muted);font-size:15px;margin-bottom:44px;max-width:60ch}
.cmds{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;list-style:none}
.cmds li{border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-weight:600;font-size:15px}

.gallery{display:flex;gap:20px;overflow-x:auto;padding-bottom:16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.gallery figure{flex:0 0 min(70%,230px);scroll-snap-align:start}
.gallery figcaption{font-size:14px;color:var(--muted);margin-top:10px}

/* FAQ */
details{border-top:1px solid var(--line);padding:20px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;font-size:19px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--work);font-size:28px;line-height:1}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted);margin-top:12px}

/* Schluss: gleicher Boden wie der Hero */
.final{background:var(--work);color:var(--ink);padding:110px 0}
.final .display{font-size:clamp(46px,8vw,112px);line-height:.95;margin-bottom:22px}
.final .lead{color:rgba(18,18,18,.82)}
.final a{color:var(--ink)}
.final .fine{color:rgba(18,18,18,.78)}

footer{border-top:1px solid #26231f;padding:40px 0;color:var(--muted);font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--muted);margin-right:18px}
footer a:hover{color:var(--text)}

/* Rechtliche Seiten */
.legal{padding:60px 0 80px;max-width:760px}
.legal h1{font-size:56px;margin-bottom:24px}
.legal h2{font-size:30px;margin:30px 0 8px}
.legal p,.legal li{color:var(--muted);margin-bottom:10px}
.legal ul{padding-left:22px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.btn{transition:none}.hero{transition:none}.track i{transition:none}
}