/* =========================================================
   VIDURA | Swiss Sports Nutrition
   Schrift: Switzer (Titel + Text), Fragment Mono (Labels), Schriftzug VIDURA = Archivo Expanded 800 als Pfade (SVG), A als umgekehrtes V. Alles lokal gehostet.
   Farben: Palette "Kalk & Schiefer" (11.11.2026)
   ========================================================= */
@font-face{
  font-family:"Switzer";
  src:url("fonts/Switzer-Variable.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Fragment Mono";
  src:url("fonts/FragmentMono-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --ink:#171816; --ink-2:#22231F; --line-dark:#34352F;
  --paper:#F3F0E8; --white:#FBF9F4; --line:#DCD7CB;
  --text:#171816; --text-2:#4E4B43; --text-3:#625E54;
  --on-dark:#F1EEE6; --on-dark-2:#ABA597;
  --accent:#8E987B; --accent-deep:#4D5740;

  --font:"Switzer","Helvetica Neue",Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,Menlo,monospace;
  --wide:122%;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);

  --pad:clamp(20px,4vw,48px);
  --section:clamp(88px,11vw,152px);
  --radius:14px;
  interpolate-size:allow-keywords;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;scrollbar-color:#A39E92 var(--paper);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;caret-color:var(--accent-deep);accent-color:var(--accent-deep)}
::selection{background:var(--accent);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.hero :focus-visible,.nav :focus-visible,.footer :focus-visible{outline-color:var(--accent)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Typo ---------- */
.display{font-weight:800;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;text-wrap:balance}
h2.display{font-size:clamp(36px,5vw,68px);margin-bottom:clamp(20px,2.4vw,32px)}
.lede{font-size:clamp(18px,1.6vw,21px);color:var(--text-2);max-width:56ch}
.on-dark .lede{color:var(--on-dark-2)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:12px;background:var(--accent);color:var(--ink);font:inherit;font-weight:700;font-size:16px;letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color 200ms ease}
.btn:active{transform:scale(.97)}
.btn:disabled{cursor:progress;background:#BAC1AA}
.btn-sm{min-height:44px;padding:0 18px;font-size:15px;border-radius:10px}
@media (hover:hover) and (pointer:fine){ .btn:hover{background:#9EA78C} }

/* ---------- Navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;color:var(--white);border-bottom:1px solid transparent;transition:background-color 250ms ease,border-color 250ms ease}
.nav.solid{background:rgba(23,24,22,.97);border-bottom-color:var(--line-dark)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.wordmark{display:inline-flex;align-items:center;font-size:20px;color:var(--white);text-decoration:none;padding:10px 0}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px)}
.nav-links a:not(.btn){color:rgba(255,255,255,.8);font-size:15px;font-weight:500;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){ .nav-links a:not(.btn):hover{color:var(--white)} }

/* ---------- Hero: Kraft / Ausdauer Split ---------- */
.hero{position:relative;height:100svh;min-height:700px;max-height:1080px;background:var(--ink);color:var(--white);overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.img-kraft{object-position:42% 55%}
.layer-ausdauer{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.img-ausdauer{object-position:60% 45%}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom,rgba(23,24,22,.7) 0%,rgba(23,24,22,0) 22%),
  linear-gradient(to top,rgba(23,24,22,.94) 0%,rgba(23,24,22,.72) 30%,rgba(23,24,22,.2) 58%,rgba(23,24,22,0) 72%),
  linear-gradient(to right,rgba(23,24,22,.5) 0%,rgba(23,24,22,0) 55%)}

.split{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:2;pointer-events:none}
.split-rule{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(255,255,255,.9)}
.split-handle{position:absolute;top:32%;left:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--white);color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:auto;cursor:ew-resize;touch-action:none;transition:transform 160ms var(--ease-out)}
.split-handle:active{transform:scale(.94)}
.split-handle:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:50%}
.split-tag{position:absolute;top:32%;margin-top:-15px;height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:rgba(23,24,22,.62);font-size:12px;font-weight:700;font-stretch:115%;letter-spacing:.18em;white-space:nowrap}
.split-tag.kraft{right:44px}
.split-tag.ausdauer{left:44px}

.hero-content{position:absolute;inset:auto 0 0 0;z-index:3;padding-bottom:clamp(32px,6vh,72px);pointer-events:none}
.hero-content .wrap > *{pointer-events:auto}
.hero-copy{max-width:760px}
.badge{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 14px 0 12px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font-size:13px;font-weight:600;letter-spacing:.06em;margin-bottom:22px}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(142,152,123,.22)}
.hero h1{font-size:clamp(46px,7.2vw,96px)}
.hero h1 .accent{color:var(--accent)}
.hero h1 .line{display:block}
.hero .sub{font-size:clamp(18px,1.5vw,20px);color:#DAD5CA;max-width:46ch;margin:20px 0 28px}

/* ---------- Formular ---------- */
.signup{max-width:540px}
.field-label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.field-row{display:flex;gap:10px}
.field-row input{flex:1;min-width:0;height:56px;padding:0 18px;border-radius:12px;border:1px solid #8A8478;background:var(--white);color:var(--ink);font:inherit;font-size:17px;transition:border-color 200ms ease,box-shadow 200ms ease}
.field-row input::placeholder{color:#716C61}
.field-row input:focus{outline:none;border-color:var(--accent-deep);box-shadow:0 0 0 4px rgba(142,152,123,.45)}
.field-row input[aria-invalid="true"]{border-color:#C2412D;box-shadow:0 0 0 4px rgba(194,65,45,.18)}
.field-row .btn{height:56px}
.field-error{font-size:14px;font-weight:600;color:#FFB4A6;margin-top:8px}
.field-error:empty{display:none}
.perks{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px}
.perks li{display:flex;align-items:center;gap:8px;font-size:15px;color:#DAD5CA}
.perks svg{flex:none;color:var(--accent)}
.micro{font-size:13px;color:var(--on-dark-2);margin-top:12px}
.micro a{color:inherit}

/* ---------- Hero-Einstieg ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero-media{animation:settle 1800ms var(--ease-out) both}
.enter{animation:rise 800ms var(--ease-out) both}
.enter:nth-child(1){animation-delay:120ms}
.enter:nth-child(2){animation-delay:200ms}
.enter:nth-child(3){animation-delay:280ms}
.enter:nth-child(4){animation-delay:360ms}
.split{animation:fade 700ms var(--ease-out) 500ms both}

/* ---------- Laufband ---------- */
.ticker{background:var(--accent);color:var(--ink);overflow:hidden;border-block:1px solid #7F8A6D}
.ticker-track{display:flex;width:max-content;animation:ticker 42s linear infinite}
.ticker ul{display:flex;list-style:none}
.ticker li{display:flex;align-items:center;gap:28px;padding:18px 0 18px 28px;font-weight:800;font-stretch:125%;font-size:clamp(17px,1.8vw,24px);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.ticker li::after{content:"";width:14px;height:14px;background:linear-gradient(var(--ink),var(--ink)) center/100% 3px no-repeat,linear-gradient(var(--ink),var(--ink)) center/3px 100% no-repeat}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (hover:hover) and (pointer:fine){ .ticker:hover .ticker-track{animation-play-state:paused} }

/* ---------- Statement ---------- */
.statement{padding:var(--section) 0}
.statement p{font-size:clamp(28px,3.9vw,56px);font-weight:700;font-stretch:108%;line-height:1.12;letter-spacing:-.02em;max-width:24ch;text-wrap:pretty}
.js .statement .w{color:#C2BCAE;transition:color 220ms ease}
.js .statement .w.on{color:var(--ink)}
.js .statement .w.hl.on{color:var(--accent-deep)}

/* ---------- Produkte ---------- */
.products{background:var(--white);padding:var(--section) 0}
.products-head{display:flex;justify-content:space-between;align-items:end;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.products-head h2{margin-bottom:0}
.products-head .lede{max-width:42ch}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.product{display:flex;flex-direction:column}
.stage{position:relative;aspect-ratio:4/5;border-radius:var(--radius);background:var(--paper);display:grid;place-items:center;overflow:hidden}
.stage.alt{background:#E4E7DC}
.stage.dark{background:var(--ink-2)}
.stage > svg{width:66%;height:auto;transition:transform 420ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .product:hover .stage > svg{transform:translateY(-8px) rotate(-1.5deg)} }
.product-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:20px}
.product h3{font-size:26px;font-weight:800;font-stretch:var(--wide);text-transform:uppercase;letter-spacing:-.01em}
.status{font-size:13px;font-weight:600;color:var(--text-3);white-space:nowrap}
.product p{font-size:16px;color:var(--text-2);margin-top:6px}
.chip{display:inline-flex;align-self:flex-start;margin-top:14px;height:28px;align-items:center;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--text-2)}
.note{margin-top:28px;font-size:13px;color:var(--text-3)}
.js .product{opacity:0;transform:translateY(24px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.js .product.in{opacity:1;transform:none}
.js .product:nth-child(2){transition-delay:80ms}
.js .product:nth-child(3){transition-delay:160ms}

/* ---------- Prinzipien ---------- */
.principles{padding:var(--section) 0}
.principles .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.principles h2{position:sticky;top:120px}
.plist{list-style:none;border-top:1px solid var(--line)}
.plist li{padding:clamp(24px,3vw,36px) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.plist svg{color:var(--accent-deep);margin-top:2px}
.plist h3{font-size:clamp(22px,2.2vw,28px);font-weight:800;font-stretch:112%;letter-spacing:-.01em;line-height:1.15;margin-bottom:8px}
.plist p{color:var(--text-2);max-width:52ch}

/* ---------- Ablauf (dunkel) ---------- */
.steps-sec{background:var(--ink);color:var(--on-dark);padding:var(--section) 0}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);margin-top:clamp(40px,5vw,72px);position:relative}
.steps::before,.steps::after{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px}
.steps::before{background:var(--line-dark)}
.steps::after{background:var(--accent);transform-origin:left;transition:transform 1400ms var(--ease-in-out)}
.js .steps:not(.in)::after{transform:scaleX(0)}
.steps li{position:relative}
.step-n{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--ink);border:2px solid var(--accent);color:var(--accent);font-weight:800;font-stretch:125%;font-size:20px;margin-bottom:24px;position:relative;z-index:1}
.steps h3{font-size:24px;font-weight:800;font-stretch:var(--wide);text-transform:uppercase;margin-bottom:8px}
.steps p{color:var(--on-dark-2);max-width:34ch}

/* ---------- Name ---------- */
.name{background:var(--accent);color:var(--ink);padding:clamp(80px,10vw,136px) 0;overflow:hidden;text-align:center}
.name .name-line{display:flex;justify-content:center;align-items:baseline;gap:.28em;font-weight:900;font-stretch:125%;font-size:clamp(44px,10vw,96px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.name .name-line .plus{font-weight:400;font-stretch:100%}
.name .name-line span{display:inline-block}
.name p:not(.name-line){font-size:clamp(17px,1.5vw,20px);margin-top:24px;color:#23271C;font-weight:500}

/* ---------- FAQ ---------- */
.faq{background:var(--white);padding:var(--section) 0}
.faq .wrap{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:18px 0;cursor:pointer;font-size:clamp(18px,1.6vw,21px);font-weight:700;font-stretch:105%}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform 220ms var(--ease-out),background-color 200ms ease,border-color 200ms ease}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--accent);border-color:var(--accent)}
@media (hover:hover) and (pointer:fine){ .faq summary:hover .pm{border-color:var(--text-3)} }
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size 280ms var(--ease-out),content-visibility 280ms allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq .answer{padding:0 56px 24px 0;color:var(--text-2);max-width:62ch}
.faq .answer a{color:var(--accent-deep)}

/* ---------- Schluss-CTA ---------- */
.final{background:var(--ink);color:var(--white);padding:var(--section) 0}
.final .wrap{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:end}
.final h2{font-size:clamp(40px,6vw,88px);margin:0}
.final .lede{margin-top:20px}
.final .signup{max-width:none}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--on-dark-2);border-top:1px solid var(--line-dark);padding:40px 0 32px;font-size:14px}
.footer .wrap{display:grid;grid-template-columns:1fr auto;gap:16px 48px;align-items:center}
.footer .wordmark{font-size:18px}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:flex-end}
.footer a:not(.wordmark){text-decoration:none;color:var(--on-dark-2);min-height:44px;display:inline-flex;align-items:center;transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){ .footer a:not(.wordmark):hover{color:var(--white)} }
.footer small{grid-column:1/-1;font-size:13px;color:#8E897D}

/* ---------- Unterseiten ---------- */
.subpage .nav{background:var(--ink);border-bottom-color:var(--line-dark)}
.page{max-width:760px;padding:calc(72px + clamp(48px,8vw,96px)) 0 var(--section)}
.page h1{font-size:clamp(30px,5.4vw,64px);margin-bottom:28px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.page h2{font-size:19px;font-weight:700;margin:32px 0 8px}
.page p,.page li{color:var(--text-2);margin-bottom:10px;max-width:68ch}
.page ul{padding-left:20px}
.page a{color:var(--accent-deep)}
.page .back{display:inline-flex;align-items:center;min-height:44px;margin-top:32px;font-weight:600}
.center{min-height:calc(100svh - 120px);display:grid;place-items:center;text-align:center;padding:calc(72px + 64px) 0 96px}
.center > div{max-width:680px}
.center h1{font-size:clamp(44px,7vw,88px);margin-bottom:24px}
.center h1 .accent{color:var(--accent-deep)}
.center p{color:var(--text-2);font-size:clamp(17px,1.5vw,20px);margin-top:16px}
.center p a{color:var(--accent-deep);font-weight:600}
.center strong{color:var(--ink)}
.check{width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--ink);display:grid;place-items:center;margin:0 auto 28px}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-media,.enter,.split{animation:none}
  .ticker-track{animation:none}
  .js .product{opacity:1;transform:none;transition:none}
  .js .steps:not(.in)::after{transform:none}
  .steps::after{transition:none}
  .stage > svg{transition:none}
  .name .name-line span{transform:none!important}
  .faq details::details-content{transition:none}
}

/* ---------- Tablet ---------- */
@media (max-width:980px){
  .product-grid{grid-template-columns:1fr 1fr}
  .product:last-child{grid-column:1/-1}
  .product:last-child .stage{aspect-ratio:16/9}
  .product:last-child .stage > svg{width:32%}
  .principles .wrap,.faq .wrap,.final .wrap{grid-template-columns:1fr}
  .principles h2{position:static}
}

/* ---------- Handy ---------- */
@media (max-width:720px){
  body{font-size:16px}
  .nav .wrap{height:64px}
  .wordmark{font-size:18px}
  .nav-links a:not(.btn){display:none}
  .hero{min-height:720px}
  .split-handle,.split-tag{top:24%}
  .split-handle{width:52px;height:52px;margin:-26px 0 0 -26px}
  .split-tag{font-size:11px;padding:0 10px}
  .split-tag.kraft{right:36px}
  .split-tag.ausdauer{left:36px}
  .img-kraft{object-position:36% 55%}
  .img-ausdauer{object-position:54% 45%}
  .hero .sub{margin:14px 0 22px}
  .badge{margin-bottom:16px}
  .field-row{flex-direction:column}
  .field-row input{flex:none;width:100%}
  .field-row .btn{width:100%}
  .perks{gap:6px 16px}
  .product-grid{grid-template-columns:1fr}
  .product:last-child .stage{aspect-ratio:4/5}
  .product:last-child .stage > svg{width:66%}
  .name .name-line{font-size:9.6vw;font-stretch:108%;gap:.22em}
  .steps{grid-template-columns:1fr;gap:36px}
  .steps::before,.steps::after{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .steps::after{transform-origin:top}
  .js .steps:not(.in)::after{transform:scaleY(0)}
  .steps li{display:grid;grid-template-columns:56px 1fr;gap:0 20px}
  .step-n{margin:0;grid-row:span 2}
  .faq .answer{padding-right:0}
  .footer .wrap{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start}
}

/* ---------- Mono-Labels (Palette Kalk & Schiefer, 11.11.2026) ---------- */
.status,.chip,.split-tag,.badge{font-family:var(--mono);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-stretch:100%}
.status{font-size:12px}.chip{font-size:12px}.badge{font-size:12px}.split-tag{font-size:11px}

/* ---------- Switzer (11.11.2026): Feinschliff, da Switzer keine Breiten-Achse hat ---------- */
.product h3,.steps h3{letter-spacing:-.025em}
.statement p{letter-spacing:-.03em}
.name .name-line{letter-spacing:-.04em}
.ticker li{letter-spacing:.01em}

/* ---------- Wortmarke als SVG: Archivo Expanded 800, letztes Zeichen = V auf dem Kopf (11.11.2026) ---------- */
.wordmark .wm{height:.69em;width:auto;display:block;fill:currentColor}