/* ==========================================================
   Workpilot – Styles
   Farben: Navy / Weiss / Gold (Gold nur auf Navy als Schrift)
   Typo: Newsreader (Display, light) · Inter (UI) · Roboto Mono (Labels)
   ========================================================== */

@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-latin-wght-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url(/assets/fonts/roboto-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --navy:#1A3340;
  --navy-deep:#132731;
  --navy-card:#213D4B;
  --navy-line:rgba(255,255,255,.14);
  --gold:#C9A55C;
  --gold-soft:rgba(201,165,92,.16);
  --white:#FFFFFF;
  --mist:#F3F5F6;
  --ink:#1A3340;
  --ink-2:rgba(26,51,64,.74);
  --ink-3:rgba(26,51,64,.56);
  --line:rgba(26,51,64,.14);
  --on-navy:#FFFFFF;
  --on-navy-2:rgba(255,255,255,.78);
  --on-navy-3:rgba(255,255,255,.58);

  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:100rem;
  --gutter:clamp(1rem,4.5vw,4.5rem);
  --sec:clamp(4.5rem,10vw,8.75rem);
  --r-btn:8px;
  --r-card:16px;
  --r-feature:30px;
  --ease:cubic-bezier(.455,.03,.515,.955);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
/* Schrift wächst stufenlos mit dem Bildschirm: 15.2px auf kleinen Handys, 16px bei 1440px, bis 18px auf grossen Bildschirmen.
   Alle Schriftgrössen sind in rem und ziehen mit. */
html{font-size:clamp(15.2px,max(14.933px + .0741vw,12.4px + .25vw),18px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--navy);color:var(--ink);font:400 1rem/1.6 var(--f-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
em{font-style:italic}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gold);color:var(--navy);padding:.5rem .875rem;border-radius:var(--r-btn)}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.sec--white :focus-visible,.sec--mist :focus-visible{outline-color:var(--navy)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:53.75rem}
.center{text-align:center}

/* ---------- Sections ---------- */
.sec{padding:var(--sec) 0;position:relative}
.sec--navy{background:var(--navy);color:var(--on-navy)}
.sec--deep{background:var(--navy-deep);color:var(--on-navy)}
.sec--white{background:var(--white);color:var(--ink)}
.sec--mist{background:var(--mist);color:var(--ink)}

/* ---------- Type ---------- */
.eyebrow{font:500 .75rem/1.6 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1.375rem}
.eyebrow--dark{color:var(--ink-3)}
.label{font:500 .6875rem/1.6 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.label--dark{color:var(--ink-3)}
.display{font:300 clamp(2.875rem,7.4vw,6rem)/.95 var(--f-display);letter-spacing:-.02em;color:var(--on-navy)}
.display em{color:var(--gold)}
.display--sm{font-size:clamp(2.5rem,6vw,5rem);line-height:1}
.h2{font:300 clamp(2.25rem,5.2vw,4rem)/1 var(--f-display);letter-spacing:-.015em;max-width:18ch;margin-bottom:1.75rem}
.h2--center{text-align:center;margin-left:auto;margin-right:auto}
.eyebrow--center{text-align:center}
.h2--sm{font-size:clamp(2rem,4.4vw,3.25rem);max-width:20ch}
.sec--navy .h2 em,.sec--deep .h2 em{color:var(--gold)}
.sec--white .h2 em,.sec--mist .h2 em{color:var(--ink-2)}
.h3{font:300 clamp(1.75rem,3.4vw,2.375rem)/1.05 var(--f-display);letter-spacing:-.01em}
.lead{font:300 clamp(1.125rem,1.6vw,1.3125rem)/1.55 var(--f-sans);color:var(--on-navy-2);max-width:56ch}
.body{font-size:1.0625rem;line-height:1.65;color:var(--ink-2);max-width:60ch}
.body+.body{margin-top:1.125rem}
.body--strong{color:var(--ink);font-weight:500}
.body--light{color:var(--on-navy-2)}
.hint{color:var(--ink-3);margin:-.5rem 0 1.75rem}
.src{font:500 .6562rem/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-navy-3);margin-top:.875rem}
.footnote{font-size:.8125rem;line-height:1.6;color:var(--on-navy-3);max-width:90ch;margin-top:2.5rem}

/* ---------- Buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.btns--center{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:50px;padding:.8125rem 1.375rem;border-radius:var(--r-btn);font:500 1rem/1.2 var(--f-sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;white-space:nowrap}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.btn svg .fill{fill:currentColor;stroke:none}
.btn--sm{min-height:42px;padding:.5625rem 1rem;font-size:.9375rem}
.btn--gold{background:var(--gold);color:var(--navy)}
.btn--gold:hover{background:#d6b56f}
.btn--gold:active{transform:translateY(1px)}
.btn--ghost{background:rgba(255,255,255,.06);color:var(--on-navy);border-color:rgba(255,255,255,.32)}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:#244556}
.btn--link{background:none;border:0;padding:.8125rem .25rem;color:var(--on-navy-2);text-decoration:underline;text-underline-offset:4px;min-height:44px}
.btn--link:hover{color:var(--white)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(26,51,64,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--navy-line)}
.nav__inner{max-width:var(--max);margin:0 auto;padding:.75rem var(--gutter);display:flex;align-items:center;gap:1.5rem}
.brand{font:400 1.625rem/1 var(--f-display);color:var(--white);text-decoration:none;letter-spacing:-.01em}
.brand em{color:var(--gold)}
.nav__links{display:flex;gap:.25rem;margin-left:auto}
.nav__links a{color:var(--on-navy-2);text-decoration:none;font-size:.9375rem;padding:.5rem .75rem;border-radius:var(--r-btn);transition:background-color .2s ease,color .2s ease}
.nav__links a:hover{background:rgba(255,255,255,.08);color:var(--white)}
.nav__cta{margin-left:.5rem}
@media (max-width:960px){.nav__links{display:none}.nav__cta{margin-left:auto}}
@media (max-width:520px){.nav__cta{display:none}}

/* ---------- 1 Hero ---------- */
.hero{padding-top:clamp(3rem,8vw,6.875rem);padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero .lead{margin-top:1.875rem}
.hero__media{position:relative;border-radius:var(--r-feature);overflow:hidden;aspect-ratio:4/5;background:var(--navy-card)}
.hero__video{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.benefitbar{display:grid;grid-template-columns:repeat(4,1fr);gap:.0625rem;margin-top:clamp(3rem,6vw,5rem);background:var(--navy-line);border:1px solid var(--navy-line);border-radius:var(--r-card);overflow:hidden}
.benefitbar li{display:flex;align-items:center;gap:.875rem;padding:1.375rem 1.375rem;background:var(--navy);font-size:.9375rem;line-height:1.35;color:var(--on-navy)}
.benefitbar svg{flex:0 0 28px;width:28px;height:28px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{aspect-ratio:16/10;order:2}
  .benefitbar{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){.benefitbar li{padding:1rem .875rem;font-size:.875rem;gap:.625rem}.benefitbar svg{flex-basis:24px;width:24px;height:24px}}

/* ---------- 2 Selbstcheck ---------- */
.check{display:grid;gap:.625rem;grid-auto-rows:1fr} /* alle Karten gleich hoch */
.check>li{display:flex}
.check__item{width:100%;display:flex;align-items:center;gap:1rem;text-align:left;padding:1.25rem 1.375rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);font-size:1.0625rem;line-height:1.45;color:var(--ink);cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.check__item:hover{border-color:rgba(26,51,64,.4)}
.check__box{flex:0 0 26px;width:26px;height:26px;border-radius:7px;border:1.5px solid rgba(26,51,64,.4);display:grid;place-items:center;transition:background-color .2s ease,border-color .2s ease}
.check__box::after{content:"";width:11px;height:6px;border-left:2px solid var(--white);border-bottom:2px solid var(--white);transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .2s ease}
.check__item[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.check__item[aria-pressed="true"] .check__box{background:var(--gold);border-color:var(--gold)}
.check__item[aria-pressed="true"] .check__box::after{border-color:var(--navy);transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.check__result{margin-top:1.75rem;padding:1.75rem;border-radius:var(--r-card);background:var(--mist);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;animation:rise .5s var(--ease)}
.check__result p{font-size:1.125rem;line-height:1.5;max-width:46ch}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 3 Teufelskreis ---------- */
.cycle{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:center;margin-top:2.5rem}
.cycle__fig{max-width:35rem;width:100%;margin:0 auto}
.cycle__nodes rect{fill:var(--navy);stroke:var(--gold);stroke-width:1.5}
.cycle__nodes text{fill:var(--white);font:400 19px var(--f-sans);text-anchor:middle}
@media (max-width:520px){.cycle__fig{margin:0 -.5rem;width:calc(100% + 16px)}}
.cycle__center{fill:var(--gold);font:500 .8125rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;opacity:.8}
.cycle__arc{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.6s var(--ease)}
.cycle.is-in .cycle__arc{stroke-dashoffset:0}
.cycle.is-in .cycle__arc:nth-child(2){transition-delay:.35s}
.cycle.is-in .cycle__arc:nth-child(3){transition-delay:.7s}
.cycle.is-in .cycle__arc:nth-child(4){transition-delay:1.05s}
.no-js .cycle__arc{stroke-dashoffset:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:clamp(3.5rem,7vw,6rem)}
.stat{padding:2rem;border:1px solid var(--navy-line);border-radius:var(--r-card)}
.stat__num{font:300 clamp(2.125rem,3.6vw,2.875rem)/1 var(--f-display);color:var(--gold);letter-spacing:-.01em;margin-bottom:1rem}
.stat__text{color:var(--on-navy-2);font-size:1rem;line-height:1.55}
.cta-line{margin-top:clamp(3rem,6vw,4.5rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.25rem 2rem;text-align:center}
.cta-line p{font:300 clamp(1.375rem,2.4vw,1.75rem)/1.3 var(--f-display);color:var(--white)}
.cta-line--left{justify-content:flex-start}
@media (max-width:900px){.cycle{grid-template-columns:1fr}.stats{grid-template-columns:1fr}}

/* ---------- 4 Lösung ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.split--rev>:first-child{order:0}
.photo{border-radius:var(--r-feature);overflow:hidden;background:var(--mist)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--tall{margin-top:2rem;aspect-ratio:4/3}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:clamp(3rem,6vw,5rem)}
.features li{display:flex;flex-direction:column;gap:1.125rem;padding:1.75rem;background:var(--mist);border-radius:var(--r-card)}
.features svg{width:30px;height:30px;fill:none;stroke:var(--navy);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.features strong{display:block;font:400 1.375rem/1.15 var(--f-display);margin-bottom:.375rem;color:var(--ink)}
.features span{color:var(--ink-2);font-size:.9688rem;line-height:1.5}
@media (max-width:900px){.split{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.features{grid-template-columns:1fr}.features li{flex-direction:row;align-items:flex-start;padding:1.375rem}}

/* ---------- 5 Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.25rem;counter-reset:s}
.steps li{padding:2rem;background:var(--white);border-radius:var(--r-card);border:1px solid var(--line)}
.steps__n{display:block;font:500 .75rem var(--f-mono);letter-spacing:.16em;color:var(--ink-3);margin-bottom:2.5rem}
.steps h3{font:300 1.875rem/1.05 var(--f-display);margin-bottom:.75rem}
.steps p{color:var(--ink-2);font-size:1rem;line-height:1.6}
.formats{margin-top:clamp(4rem,8vw,6.875rem);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.formats__head .body{margin-top:.75rem}
.formats__grid{display:grid;grid-template-columns:1fr 1fr;gap:.0625rem;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.formats__grid li{background:var(--white);padding:1.625rem 1.75rem}
.formats__grid h4{font:400 1.375rem/1.15 var(--f-display);margin-bottom:.375rem}
.formats__grid p{color:var(--ink-2);font-size:.9688rem;line-height:1.5}
.statements{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);margin-top:clamp(4rem,8vw,6.875rem);padding-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.statements p{font:300 clamp(1.5rem,2.6vw,2rem)/1.25 var(--f-display);letter-spacing:-.005em;color:var(--ink)}
.statements em{color:var(--ink-2)}
.facts{margin-top:clamp(3.5rem,7vw,6rem);background:var(--navy);color:var(--white);border-radius:var(--r-feature);padding:clamp(1.75rem,4vw,3rem)}
.facts__title{font:500 .75rem/1.6 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem}
.facts ul{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem 2rem}
.facts li{position:relative;padding-left:1.625rem;color:var(--on-navy-2);font-size:1rem;line-height:1.5}
.facts li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.facts strong{color:var(--white);font-weight:500}
@media (max-width:900px){.steps,.formats,.statements{grid-template-columns:1fr}.facts ul{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.formats__grid,.facts ul{grid-template-columns:1fr}.steps__n{margin-bottom:1.125rem}.steps li{padding:1.625rem}}

/* ---------- 6 Vorteile & Vergleich ---------- */
.benefits{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,6vw,5rem);margin-top:1.5rem}
.benefits .label{display:block;padding-bottom:1rem;border-bottom:1px solid var(--navy-line);margin-bottom:.5rem}
.blist{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.blist>div{padding:1.25rem 0;border-bottom:1px solid var(--navy-line)}
.blist dt{font:400 1.375rem/1.2 var(--f-display);color:var(--white);margin-bottom:.375rem}
.blist dd{color:var(--on-navy-2);font-size:.9688rem;line-height:1.55}
.elist li{padding:1.125rem 0 1.125rem 1.875rem;border-bottom:1px solid var(--navy-line);position:relative;font:300 1.25rem/1.35 var(--f-display);color:var(--white)}
.elist li::before{content:"";position:absolute;left:2px;top:1.45em;width:12px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.compare{margin-top:clamp(5rem,10vw,8.75rem);padding-top:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--navy-line)}
.compare .lead{margin-top:.25rem}
.example{margin-top:2.25rem;font:300 clamp(1.375rem,2.4vw,1.875rem)/1.35 var(--f-display);color:var(--white);max-width:40ch}
.example strong{color:var(--gold);font-weight:400}
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:2.75rem}
.ccard{display:flex;flex-direction:column;padding:2rem;border-radius:var(--r-feature);background:var(--navy-card);border:1px solid var(--navy-line)}
.ccard--gold{border:2px solid var(--gold);background:var(--navy-card)}
.ccard__title{font:500 .75rem/1.6 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-2);min-height:3.2em}
.ccard--gold .ccard__title{color:var(--gold)}
.ccard__cost{font:300 clamp(2.5rem,4vw,3.25rem)/1 var(--f-display);color:var(--white);margin-top:1.125rem;letter-spacing:-.01em;white-space:nowrap}
.ccard__cost .ccard__rund{display:block;font:400 .875rem var(--f-sans);color:var(--on-navy-3);letter-spacing:0;margin-bottom:.375rem}
.ccard--gold .ccard__cost{color:var(--gold)}
.ccard__unit{font-size:.875rem;color:var(--on-navy-3);margin-top:.5rem}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);margin:1.375rem 0;overflow:hidden}
.bar span{display:block;height:100%;width:0;border-radius:inherit;background:rgba(255,255,255,.55);transition:width 1.4s var(--ease)}
.ccard--gold .bar span{background:var(--gold)}
.ccards.is-in .bar span,.no-js .bar span{width:var(--w)}
.ccard__calc{color:var(--on-navy-2);font-size:.9062rem;line-height:1.55}
.ccard__effort{margin-top:auto;padding-top:1.375rem;color:var(--white);font-size:.9688rem;line-height:1.45}
.ccard__effort .label{display:block;color:var(--on-navy-3);margin-bottom:.25rem;font-size:.6562rem}
.bigline{margin-top:clamp(3rem,6vw,4.5rem);font:300 clamp(1.75rem,3.6vw,2.75rem)/1.15 var(--f-display);color:var(--white);max-width:28ch;letter-spacing:-.01em}
.bigline em{color:var(--gold)}
.points{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:2.75rem}
.points li{padding:1.625rem;border:1px solid var(--navy-line);border-radius:var(--r-card)}
.points h4{font:400 1.3125rem/1.2 var(--f-display);color:var(--white);margin-bottom:.625rem}
.points p{color:var(--on-navy-2);font-size:.9375rem;line-height:1.55}
@media (max-width:1040px){.points{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.benefits{grid-template-columns:1fr}.ccards{grid-template-columns:1fr}.ccard__title{min-height:0}}
@media (max-width:640px){.blist,.points{grid-template-columns:1fr}}


/* ---------- 8 Stimmen ---------- */
.video{margin-top:1.25rem;border-radius:var(--r-feature);overflow:hidden;background:var(--navy);aspect-ratio:16/9}
.video video{width:100%;height:100%;object-fit:cover}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:.75rem}
.quote{padding:2rem;border-radius:var(--r-card);background:var(--mist);display:flex;flex-direction:column;gap:1.5rem}
.quote blockquote{font:300 1.25rem/1.45 var(--f-display);color:var(--ink)}
.quote figcaption{margin-top:auto;font-size:.9375rem;color:var(--ink-2)}
.quote figcaption strong{display:block;color:var(--ink);font-weight:500}
.clientlogo{display:flex;align-items:center;gap:1.125rem;margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid var(--line)}
.clientlogo__name{font:600 1.375rem var(--f-sans);letter-spacing:-.02em;color:var(--ink)}
.clientlogo img{height:32px;width:auto}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}

/* ---------- 9 Team ---------- */
.ticks{margin-top:1.75rem;display:grid;gap:.75rem}
.ticks li{position:relative;padding-left:1.875rem;font-size:1.0625rem;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:6px;border-left:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(-45deg)}
.team{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:2rem}
.team li{text-align:center;font-size:.9375rem}
.team img{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:.5rem}

/* ---------- 10 Karte ---------- */
.map{position:relative;width:100%}
.map img{width:100%;height:auto}
.map__pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5rem;font:500 .6875rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--white);white-space:nowrap;padding-left:0}
.map__pin::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(201,165,92,.22);order:0}
.map__pin{transform:translate(-5px,-50%)}
.map__pin--r{flex-direction:row}
.map__pin--home::before{width:14px;height:14px;box-shadow:0 0 0 6px rgba(201,165,92,.25)}
.map__pin--home{color:var(--gold);transform:translate(-7px,-50%)}
@media (max-width:520px){.map__pin{font-size:.5938rem;gap:.3125rem;letter-spacing:.08em}}

/* ---------- 11 FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.5rem 3rem 1.5rem 0;position:relative;font:400 clamp(1.1875rem,2vw,1.375rem)/1.35 var(--f-display);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 3rem 1.625rem 0;color:var(--ink-2);font-size:1.0625rem;line-height:1.65;max-width:68ch}

/* ---------- 12 Abschluss ---------- */
.closing .lead{margin:1.75rem auto 0}
.share{margin-top:clamp(3.5rem,7vw,5.5rem);padding:1.75rem;border-radius:var(--r-card);border:1px solid var(--navy-line);color:var(--on-navy-2)}
.share strong{color:var(--white);font-weight:500}
.share .btns{margin-top:1.125rem}

/* ---------- Footer ---------- */
.footer{background:var(--navy-deep);color:var(--on-navy-2);padding:3.5rem 0 calc(2.5rem + env(safe-area-inset-bottom))}
.footer__inner{display:grid;grid-template-columns:1fr auto;gap:1.75rem;align-items:start}
.footer__claim{margin-top:.75rem;font-size:.9375rem}
.footer__links{display:flex;flex-wrap:wrap;gap:.375rem 1.375rem}
.footer__links a{text-decoration:none;font-size:.9375rem}
.footer__links a:hover{color:var(--white)}
.footer__copy{grid-column:1/-1;font:500 .6875rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy-3);padding-top:1.5rem;border-top:1px solid var(--navy-line)}
@media (max-width:640px){.footer__inner{grid-template-columns:1fr}.footer{padding-bottom:calc(6.875rem + env(safe-area-inset-bottom))}}

/* ---------- Mobile CTA ---------- */
.mobilecta{display:none}
@media (max-width:760px){
  .mobilecta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));background:rgba(26,51,64,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--navy-line);transition:transform .3s var(--ease)}
  .mobilecta .btn{width:100%}
  .mobilecta.is-hidden{transform:translateY(110%)}
}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* Hidden-by-config */
[data-link][hidden]{display:none!important}

/* ==========================================================
   MOTION
   Kurze Zustandswechsel 0.2s ease · lange, ruhige Einblendungen
   mit cubic-bezier(.455,.03,.515,.955) · borderTurn-Linie
   Keine Federn, kein Überschwingen, kein Parallax.
   ========================================================== */
:root{--reveal:1.6s;--ease-long:cubic-bezier(.455,.03,.515,.955);--ease-out:cubic-bezier(.22,.61,.36,1)}

/* Scroll-Fortschritt unter der Navigation */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline: scroll()){
  .progress{animation:progress linear both;animation-timeline:scroll(root)}
  @keyframes progress{to{transform:scaleX(1)}}
}
.nav{transition:background-color .2s ease,border-color .2s ease}
.nav.is-scrolled{background:rgba(19,39,49,.88)}

/* Hero-Sequenz */
.js .hero-in{opacity:0;transform:translateY(14px);transition:opacity 2.5s var(--ease-long),transform 2.5s var(--ease-long);transition-delay:var(--d,0s)}
.js .is-loaded .hero-in{opacity:1;transform:none}
.js .benefitbar li{opacity:0;transition:opacity 1.6s var(--ease-long);transition-delay:calc(1.9s + var(--i,0) * 140ms)}
.js .is-loaded .benefitbar li{opacity:1}
.benefitbar li{transition:background-color .2s ease}
.benefitbar li:hover{background:var(--navy-card)}

/* Allgemeine Einblendung beim Scrollen (gestaffelt) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 1.4s var(--ease-out),transform 1.4s var(--ease-out);transition-delay:calc(var(--i,0) * 110ms)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal--fade{transform:none}

/* Ruhige Hover-Zustände (0.2s) */
.stat,.steps li,.features li,.points li,.quote,.formats__grid li,.ccard{transition:background-color .2s ease,border-color .2s ease,opacity 1.4s var(--ease-out),transform 1.4s var(--ease-out)}
@media (hover:hover){
  .stat:hover,.points li:hover{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.24)}
  .steps li:hover,.formats__grid li:hover{background:#FAFBFB}
  .features li:hover,.quote:hover{background:#ECEFF1}
  .ccard:not(.ccard--gold):hover{border-color:rgba(255,255,255,.3)}
}
.btn--gold .btn__arrow,.btn--gold span[aria-hidden]{transition:transform .2s ease}
.btn--gold:hover span[aria-hidden]{transform:translateX(3px)}

/* borderTurn: eine goldene Linie läuft um den Rahmen */
@property --turn{syntax:"<angle>";inherits:false;initial-value:0deg}
.trace{position:relative;isolation:isolate}
.trace::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:.125rem;background:conic-gradient(from var(--turn),transparent 0 62%,rgba(201,165,92,.0) 64%,var(--gold) 82%,#F3DFAE 86%,transparent 88%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:borderTurn 7s linear infinite;pointer-events:none;z-index:2}
@keyframes borderTurn{to{--turn:360deg}}
.trace--soft::before{inset:0;padding:.0625rem;background:conic-gradient(from var(--turn),transparent 0 70%,rgba(255,255,255,.55) 84%,transparent 90%);animation-duration:10s}
.ccard--gold{border-color:rgba(201,165,92,.45)}

/* Zahlen */
[data-count]{font-variant-numeric:tabular-nums}

/* Teufelskreis: Knoten erscheinen nacheinander */
.js .cycle__nodes g{opacity:0;transition:opacity 1.2s var(--ease-long)}
.js .cycle.is-in .cycle__nodes g{opacity:1}
.js .cycle.is-in .cycle__nodes g:nth-child(2){transition-delay:.35s}
.js .cycle.is-in .cycle__nodes g:nth-child(3){transition-delay:.7s}
.js .cycle.is-in .cycle__nodes g:nth-child(4){transition-delay:1.05s}
.js .cycle__dot{opacity:0;transition:opacity 1.5s ease 2s}
.js .cycle.is-in .cycle__dot{opacity:1}
.cycle__arc{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 2s var(--ease-long)}

/* Karte: Puls um Chur */
.map__pin--home::after{content:"";position:absolute;left:7px;top:50%;width:14px;height:14px;margin:-.4375rem 0 0 -.4375rem;border-radius:50%;border:1px solid var(--gold);animation:pulse 2.8s var(--ease-out) infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.6);opacity:0}}
.js .map__pin{opacity:0;transition:opacity 1.2s var(--ease-long)}
.js .map.is-in .map__pin{opacity:1}
.js .map.is-in .map__pin:nth-of-type(2){transition-delay:1.6s}
.js .map.is-in .map__pin:nth-of-type(3){transition-delay:1.8s}
.js .map.is-in .map__pin:nth-of-type(4){transition-delay:2s}
.js .map.is-in .map__pin:nth-of-type(5){transition-delay:2.2s}

/* Selbstcheck: weicher Wechsel */
.check__item{transition:background-color .3s ease,border-color .3s ease,color .3s ease}

/* FAQ: weich auf- und zuklappen (moderne Browser) */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease-long),content-visibility .5s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}


/* Weniger Bewegung gewünscht: alles sofort sichtbar */
@media (prefers-reduced-motion:reduce){
  .js [data-split] .wi,.js .hero-in,.js .reveal,.js .benefitbar li,.js .cycle__nodes g,.js .map__pin{opacity:1!important;filter:none!important;transform:none!important}
  .cycle__arc{stroke-dashoffset:0!important}
  .bar span{width:var(--w)!important}
  .trace::before,.map__pin--home::after,.cycle__dot{display:none}
}


/* ==========================================================
   MOTION 2 – Ladescreen, Bühne, Laufband, Scroll-Effekte
   ========================================================== */

/* ---------- Ladescreen ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--navy);display:grid;place-items:center;transition:transform 1.15s cubic-bezier(.76,0,.24,1);animation:loaderFailsafe .01s 9s forwards}
.no-js .loader{display:none}
@keyframes loaderFailsafe{to{visibility:hidden;opacity:0}}
.loader__inner{display:flex;flex-direction:column;align-items:center;transition:transform 1s cubic-bezier(.76,0,.24,1),opacity .6s ease}
.loader__logo{display:flex;font:300 clamp(3.5rem,11vw,8.25rem)/1 var(--f-display);letter-spacing:-.03em;color:var(--white);overflow:hidden;padding:0 .08em .16em}
.loader__logo em{display:flex;color:var(--gold)}
.loader__logo span{display:inline-block;transform:translateY(115%);animation:letterUp 1.1s cubic-bezier(.19,1,.22,1) forwards;animation-delay:calc(var(--i) * 65ms + .15s)}
@keyframes letterUp{to{transform:none}}
.loader__bar{width:min(440px,72vw);height:1px;background:rgba(255,255,255,.14);margin-top:1.625rem;overflow:hidden}
.loader__bar span{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--lp,0))}
.loader__meta{width:min(440px,72vw);display:flex;justify-content:space-between;margin-top:.875rem;font:500 .6875rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-3)}
.loader__meta b{font-weight:500;color:var(--white);font-variant-numeric:tabular-nums}
.loader.is-done{transform:translateY(-100%)}
.loader.is-done .loader__inner{transform:translateY(-12vh);opacity:0}
html.is-loading,html.is-loading body{overflow:hidden}

/* ---------- Headlines: Wörter gleiten aus einer Maske ---------- */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .07em .17em;margin:0 -.07em -.17em}
.js [data-split] .wi{display:inline-block;transform:translateY(108%) rotate(5deg);transform-origin:0 100%;transition:transform 1.3s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0) * 55ms)}
.js [data-split].is-in .wi{transform:none}
.js .hero [data-split] .wi{transition-duration:1.9s;transition-delay:calc(var(--i,0) * 95ms + .05s)}

/* ---------- Hero ---------- */
.hero{padding-bottom:clamp(2.5rem,6vw,5rem)}
.display--hero{font-size:clamp(3.125rem,8.6vw,8.25rem);line-height:.92;margin-top:.25rem}
.hero__row{display:grid;grid-template-columns:1fr auto;gap:1.5rem 3rem;align-items:end;margin-top:clamp(1.75rem,4vw,3rem)}
.hero__row .lead{margin:0}
.hero__row .btns{margin:0;justify-content:flex-end}
.hero__stage{--sp:0;margin-top:clamp(2.5rem,6vw,5rem);padding:0 calc(var(--gutter) * (1 - var(--sp)))}
.hero__frame{position:relative;overflow:hidden;border-radius:calc(30px * (1 - var(--sp)));aspect-ratio:16/8.4;max-height:92vh;width:100%;background:var(--navy-card);transform:scale(calc(.94 + .06 * var(--sp)));transform-origin:50% 0;will-change:transform}
.hero__img,.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.16 - .16 * var(--sp)));will-change:transform}
.hero__video{opacity:0;transition:opacity 1.2s ease}
.hero__frame.has-video .hero__video{opacity:1}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,51,64,0) 45%,rgba(19,39,49,.55));pointer-events:none}
.js .hero__frame{clip-path:inset(18% 8% 0 8% round 30px);transition:clip-path 2.2s cubic-bezier(.76,0,.24,1) .45s}
.js .is-loaded .hero__frame{clip-path:inset(0 0 0 0 round 0)}
.js .hero__img{filter:saturate(.6) brightness(.8)}
.js .is-loaded .hero__img{filter:none;transition:filter 2.4s ease .6s}
.hero__play{position:absolute;right:clamp(1rem,4vw,3rem);bottom:clamp(1rem,4vw,3rem);width:clamp(96px,11vw,132px);aspect-ratio:1;display:grid;place-items:center;color:var(--white);text-decoration:none}
.hero__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.hero__ring text{font:500 10px var(--f-mono);letter-spacing:.2em;fill:var(--white)}
.hero__playbtn{width:46%;aspect-ratio:1;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;transition:transform .4s cubic-bezier(.19,1,.22,1)}
.hero__playbtn svg{width:36%;fill:currentColor;margin-left:6%}
.hero__play:hover .hero__playbtn{transform:scale(1.12)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__caption{position:absolute;left:clamp(1rem,4vw,3rem);bottom:clamp(1.25rem,4vw,3.25rem);max-width:22ch;font:300 clamp(1.25rem,2.2vw,1.875rem)/1.15 var(--f-display);color:var(--white)}
.hero__caption span{display:block;font:500 .6875rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.js .hero__play,.js .hero__caption{opacity:0;transform:translateY(16px);transition:opacity 1.4s var(--ease-out) 1.9s,transform 1.4s var(--ease-out) 1.9s}
.js .is-loaded .hero__play,.js .is-loaded .hero__caption{opacity:1;transform:none}
.hero .benefitbar{margin-top:clamp(1.75rem,4vw,3rem)}
@media (max-width:900px){.hero__row{grid-template-columns:1fr}.hero__row .btns{justify-content:flex-start}.hero__frame{aspect-ratio:4/5}}
@media (max-width:520px){.hero__caption{display:none}.hero__frame{aspect-ratio:1/1.05}}

/* ---------- Laufband ---------- */
.marquee{overflow:hidden;padding:clamp(1.75rem,4.5vw,3.5rem) 0;color:var(--white);user-select:none}
.marquee--deep{background:var(--navy-deep);border-top:1px solid var(--navy-line)}
.marquee--navy{background:var(--navy)}
.marquee__skew{transform:skewX(var(--skew,0deg));transition:transform .3s ease-out}
.marquee__track{display:flex;align-items:center;width:max-content;animation:marquee 42s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse;animation-duration:50s}
.marquee__item{font:300 clamp(2.875rem,7.4vw,7rem)/1.05 var(--f-display);letter-spacing:-.02em;white-space:nowrap;padding:0 .3em}
.marquee__item em{color:var(--gold)}
.marquee__dot{color:var(--gold);font-size:clamp(1.125rem,2vw,1.75rem)}
.marquee--outline .marquee__item{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45)}
.marquee--outline .marquee__item:nth-of-type(4n+1){color:var(--white);-webkit-text-stroke:0}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee:hover .marquee__track{animation-play-state:paused}

/* ---------- Text leuchtet beim Scrollen auf ---------- */
.js [data-highlight] .hw{opacity:.18;transition:opacity .4s ease}
.js [data-highlight] .hw.on{opacity:1}
.sec--white .js [data-highlight] .hw,.js .sec--white [data-highlight] .hw,.js .sec--mist [data-highlight] .hw{opacity:.16}
.js .sec--white [data-highlight] .hw.on,.js .sec--mist [data-highlight] .hw.on{opacity:1}
.lead--xl{font:300 clamp(1.5rem,2.6vw,2.125rem)/1.35 var(--f-display);color:var(--white);max-width:30ch}

/* ---------- Fotos: Zoom beim Scrollen + Maske ---------- */
.photo{position:relative}
.photo img{transform:scale(calc(1.2 - .2 * var(--p,1)));will-change:transform}
.js .photo.reveal{opacity:1;transform:none;clip-path:inset(14% 6% 14% 6% round 30px);transition:clip-path 1.6s cubic-bezier(.76,0,.24,1)}
.js .photo.reveal.is-in{clip-path:inset(0 0 0 0 round 30px)}

/* ---------- Ablauf: Linie verbindet die Schritte ---------- */
.steps{position:relative;margin-top:4rem}
.steps::before{content:"";position:absolute;left:2rem;right:2rem;top:-1.5rem;height:1px;background:var(--line)}
.steps::after{content:"";position:absolute;left:2rem;right:2rem;top:-1.5rem;height:2px;margin-top:-.0312rem;background:var(--navy);transform-origin:0 50%;transform:scaleX(clamp(0, calc(var(--p,0) * 2.4 - .5), 1))}
.steps li{position:relative}
.steps li::before{content:"";position:absolute;left:2rem;top:-1.875rem;width:13px;height:13px;border-radius:50%;background:var(--mist);border:2px solid var(--navy)}
@media (max-width:900px){
  .steps::before,.steps::after{left:-.875rem;right:auto;top:1.25rem;bottom:1.25rem;width:1px;height:auto}
  .steps::after{width:2px;margin:0 0 0 -.0312rem;transform-origin:50% 0;transform:scaleY(clamp(0, calc(var(--p,0) * 2.2 - .4), 1))}
  .steps li::before{left:-1.25rem;top:2.125rem}
  .steps{margin-left:.875rem}
}

/* ---------- Lichtschein, der der Maus folgt ---------- */
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(201,165,92,.16),transparent 62%);z-index:1}
.sec--white .spot::after,.sec--mist .spot::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(26,51,64,.07),transparent 62%)}
.spot:hover::after{opacity:1}

/* ---------- Magnetische Buttons ---------- */
.btn.is-magnet{transition:transform .5s cubic-bezier(.19,1,.22,1),background-color .2s ease,color .2s ease,border-color .2s ease}

/* ---------- Selbstcheck: Fortschrittsring ---------- */
.ring{position:relative;width:76px;height:76px;flex:0 0 76px;display:grid;place-items:center;color:var(--ink)}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:rgba(26,51,64,.12);stroke-width:4}
.ring__fg{fill:none;stroke:var(--navy);stroke-width:4;stroke-linecap:round;stroke-dasharray:6;stroke-dashoffset:5;transition:stroke-dashoffset .7s cubic-bezier(.19,1,.22,1)}
.ring span{font:300 1.875rem/1 var(--f-display)}
.ring small{position:absolute;right:12px;bottom:16px;font-size:.6875rem;color:var(--ink-3)}
.check__result{flex-wrap:nowrap}
.check__result p{flex:1}
@media (max-width:640px){.check__result{flex-wrap:wrap}}
.check__item{transform-origin:50% 50%}
.check__item.is-pop .check__box{animation:pop .45s cubic-bezier(.19,1,.22,1)}
@keyframes pop{40%{transform:scale(1.25)}}

/* ---------- Zahlen etwas lebendiger ---------- */
.stat__num{transition:color .3s ease}

@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  .js [data-split] .wi{transform:none!important}
  .js .hero__frame{clip-path:none!important}
  .hero__img,.hero__video,.photo img,.hero__frame{transform:none!important}
  .js .hero__play,.js .hero__caption{opacity:1!important;transform:none!important}
  .js [data-highlight] .hw{opacity:1!important}
  .marquee__track,.hero__ring{animation:none!important}
  .js .photo.reveal{clip-path:none!important}
}

/* ---------- Volle Breite auf dem Desktop ---------- */
@media (min-width:1100px){
  .h2{max-width:22ch}
  .wrap--narrow{max-width:68.75rem}
  .check{grid-template-columns:1fr 1fr}
  .compare .lead{max-width:70ch}
  .bigline{max-width:34ch}
  .example{max-width:52ch}
}

/* Karte: Bild erst zeigen, wenn es geladen ist (kein leerer Rahmen) */
.map img{opacity:0;transition:opacity .6s ease}
.map img.is-ready,.no-js .map img{opacity:1}

/* ==========================================================
   3 · Teufelskreis als Scroll-Geschichte
   ========================================================== */
.cyc{padding-bottom:var(--sec)}
.cyc .h2--center{margin-bottom:0}
.cyc-scroll{position:relative;height:calc(100svh + 300svh)}
.cyc-sticky{position:sticky;top:0;height:100svh;max-width:var(--max);margin:0 auto;padding:4.75rem var(--gutter) 1.5rem;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.5rem,5vw,5rem);align-items:center}
.cyc-figure{position:relative;width:100%;max-width:min(47.5rem,calc((100svh - 6.875rem) * 1.125));justify-self:center;margin:0}
.cyc-svg{display:block;width:100%;height:auto;overflow:visible}
.cyc-track{fill:none;stroke:var(--gold);stroke-opacity:.16;stroke-width:1;stroke-dasharray:2 7}
.cyc-core{fill:rgba(255,255,255,.035)}
.cyc-core-ring{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:360px 320px;opacity:0;transition:opacity .4s ease}
.cyc-scroll.is-looping .cyc-core-ring{opacity:1}
.cyc-arc-bg{fill:none;stroke:rgba(255,255,255,.09);stroke-width:2}
.cyc-arc{fill:none;stroke:var(--gold);stroke-width:calc(3px + var(--heat,0) * 2px);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--draw,0) * 100)}
.cyc-head{fill:var(--gold);opacity:0;transition:opacity .25s ease}
.cyc-link.is-drawn .cyc-head{opacity:1}
.cyc-mutual{fill:var(--gold);font:500 11.5px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;opacity:0;transition:opacity .5s ease}
.cyc-svg.show-mutual .cyc-mutual{opacity:.9}
.cyc-node-in{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.cyc-node-bg{fill:var(--navy);stroke:rgba(255,255,255,.2);stroke-width:1.5;transition:fill .45s ease,stroke .45s ease}
.cyc-label{fill:rgba(255,255,255,.42);font:500 19px var(--f-sans);transition:fill .45s ease}
.cyc-icon{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s ease}
.cyc-node.is-on .cyc-node-bg{stroke:var(--gold)}
.cyc-node.is-on .cyc-label{fill:#fff}
.cyc-node.is-on .cyc-icon{stroke:var(--gold)}
.cyc-node.is-current .cyc-node-bg{fill:var(--gold)}
.cyc-node.is-current .cyc-label{fill:var(--navy)}
.cyc-node.is-current .cyc-icon{stroke:var(--navy)}
.cyc-node.is-current .cyc-node-in{transform:scale(1.06)}
.cyc-node.flash .cyc-node-in{animation:cycFlash .7s cubic-bezier(.19,1,.22,1)}
.cyc-node.flash .cyc-node-bg{animation:cycFlashBg .7s ease}
@keyframes cycFlash{30%{transform:scale(1.12)}}
@keyframes cycFlashBg{25%{fill:var(--gold)}}
.cyc-pulse{fill:#F6E3B4;opacity:0;pointer-events:none}
.cyc-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.125rem;text-align:center;opacity:0;transition:opacity .5s ease;pointer-events:none}
.cyc-scroll.is-looping .cyc-center{opacity:1}
.cyc-center__l{font:500 .6875rem var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cyc-center__n{font:300 clamp(2.5rem,4.6vw,4rem)/1 var(--f-display);color:#fff;font-variant-numeric:tabular-nums}
.cyc-copy{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.75rem;align-items:stretch}
.cyc-progress{grid-column:1;grid-row:1;width:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.cyc-progress span{display:block;width:100%;height:100%;background:var(--gold);transform-origin:50% 0;transform:scaleY(0)}
.cyc-steps{grid-column:2;grid-row:1;display:grid;gap:clamp(1.125rem,3.2vh,2.125rem);counter-reset:none}
.cyc-step{opacity:.24;transition:opacity .5s ease,transform .5s ease;transform:translateX(0)}
.cyc-step.is-active{opacity:1;transform:translateX(6px)}
.cyc-step__k{display:block;font:500 .6875rem/1.6 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.cyc-step p{font:300 clamp(1.375rem,2.3vw,2.125rem)/1.2 var(--f-display);color:#fff;letter-spacing:-.005em;max-width:24ch}
@media (max-width:900px){
  .cyc-scroll{height:calc(100svh + 260svh)}
  .cyc-sticky{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:1.125rem;padding:4.25rem var(--gutter) 1.25rem}
  .cyc-figure{max-width:min(100%,calc(56svh * 1.125))}
  .cyc-copy{grid-template-columns:1fr;gap:.75rem}
  .cyc-progress{grid-row:2;width:100%;height:2px}
  .cyc-progress span{transform-origin:0 50%;transform:scaleX(0)}
  .cyc-steps{grid-row:1;grid-template-areas:"s";min-height:7.2em}
  .cyc-step{grid-area:s;opacity:0;transform:translateY(8px)}
  .cyc-step.is-active{opacity:1;transform:none}
  .cyc-step p{font-size:clamp(1.3125rem,5.6vw,1.625rem);max-width:none}
}
/* ohne Animation: alles auf einen Blick */
.cyc--static .cyc-scroll,.no-js .cyc-scroll{height:auto}
.cyc--static .cyc-sticky,.no-js .cyc-sticky{position:relative;height:auto;padding-block:3rem}
.cyc--static .cyc-step,.no-js .cyc-step{opacity:1;transform:none;position:static}
.cyc--static .cyc-steps,.no-js .cyc-steps{grid-template-areas:none}
.cyc--static .cyc-progress,.no-js .cyc-progress{display:none}
.no-js .cyc-arc{stroke-dashoffset:0}.no-js .cyc-head,.no-js .cyc-mutual{opacity:1}
.no-js .cyc-node .cyc-label{fill:#fff}.no-js .cyc-node .cyc-icon{stroke:var(--gold)}.no-js .cyc-node .cyc-node-bg{stroke:var(--gold)}

/* ==========================================================
   4 · Lösung mit 3D-Stuhl
   ========================================================== */
.split--chair{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center}
.chair3d{position:relative;width:100%;max-width:100%;aspect-ratio:1/1.02;touch-action:pan-y}
.chair3d__gl{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.chair3d.is-ready .chair3d__gl{opacity:1}
.chair3d__gl canvas{display:block;width:100%!important;height:100%!important}
@media (hover:hover) and (pointer:fine){.chair3d__gl canvas{cursor:grab}.chair3d__gl canvas:active{cursor:grabbing}}
.chair3d__still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:none}
.no-js .chair3d__still,.chair3d.is-static .chair3d__still{display:block}
.chair3d__hs{position:absolute;left:0;top:0;display:flex;align-items:center;gap:.625rem;pointer-events:none;opacity:0;transition:opacity .35s ease;will-change:transform,opacity}
.chair3d.show-hs .chair3d__hs{opacity:var(--vis,1)}
.chair3d__hs .dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px rgba(201,165,92,.55)}
.chair3d__hs .tip{background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:10px;padding:.5rem .75rem;white-space:nowrap;box-shadow:0 8px 24px rgba(26,51,64,.08)}
.chair3d__hs .tip b{display:block;font:600 .8438rem/1.3 var(--f-sans);color:var(--ink)}
.chair3d__hs .tip span{display:block;font:400 .8125rem/1.35 var(--f-sans);color:var(--ink-2)}
.chair3d__hint{position:absolute;left:0;bottom:4px;margin:0;font:500 .6562rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity .6s ease}
@media (hover:hover) and (pointer:fine){.chair3d.is-ready .chair3d__hint{opacity:1}}
.photo--wide{margin-top:clamp(2.5rem,5vw,4.5rem);aspect-ratio:21/9}
@media (max-width:900px){
  .split--chair{grid-template-columns:1fr}
  .chair3d{aspect-ratio:1/1.08}
  .chair3d__hs .tip{padding:.375rem .5625rem}
  .chair3d__hs .tip b{font-size:.7812rem}.chair3d__hs .tip span{font-size:.75rem}
  .photo--wide{aspect-ratio:4/3}
}

/* ---------- 3a Arbeitstag (3D) ---------- */
.day{padding-bottom:clamp(.5rem,2vw,1.5rem)}
.day .h2--center{margin-bottom:0}
.day + .cyc{padding-top:clamp(3rem,6vw,5.5rem)}
.day-scroll{position:relative;height:calc(100svh + 380svh)}
.day-sticky{position:sticky;top:0;height:100svh;max-width:92.5rem;margin:0 auto;padding:4.75rem var(--gutter) 1.5rem;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(18.75rem,.5fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.day-stage{position:relative;width:100%;height:min(calc(100svh - 112px),820px);background:radial-gradient(ellipse 60% 55% at 46% 62%,rgba(201,165,92,.07),transparent 70%)}
.day-gl{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.day-gl canvas{display:block;width:100%!important;height:100%!important}
.day-stage.is-ready .day-gl{opacity:1}
.day-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.day--static .day-still,.no-js .day-still{display:block}
.day-hud{position:absolute;left:clamp(.625rem,1.6vw,1.5rem);top:clamp(.625rem,1.6vw,1.375rem);display:flex;flex-direction:column;gap:.875rem;pointer-events:none;opacity:0;transition:opacity .6s ease}
.day-stage.is-ready .day-hud{opacity:1}
.day-clock{font:500 .875rem/1 var(--f-mono);letter-spacing:.18em;color:var(--gold)}
.day-load__l{display:block;font:500 .6562rem/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.25rem}
.day-load__n{display:block;font:300 clamp(2.125rem,3.4vw,3.25rem)/1 var(--f-display);color:#fff;font-variant-numeric:tabular-nums;transition:color .4s ease}
.day-copy{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1.625rem;align-items:stretch}
.day-progress{grid-column:1;grid-row:1;width:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.day-progress span{display:block;width:100%;height:100%;background:var(--gold);transform-origin:50% 0;transform:scaleY(0)}
.day-steps{grid-column:2;grid-row:1;display:grid;gap:clamp(.875rem,2.6vh,1.75rem)}
.day-step{opacity:.26;transition:opacity .5s ease,transform .5s ease}
.day-step.is-active{opacity:1;transform:translateX(6px)}
.day-step__k{display:block;font:500 .6875rem/1.6 var(--f-mono);letter-spacing:.16em;color:var(--gold)}
.day-step h3{font:400 clamp(1.25rem,1.8vw,1.6875rem)/1.2 var(--f-display);color:#fff;margin:.25rem 0 .375rem;letter-spacing:-.005em}
.day-step p{font:400 .9375rem/1.5 var(--f-sans);color:rgba(255,255,255,.72);max-width:34ch}
.day-src{grid-column:2;grid-row:2;font:400 .75rem/1.5 var(--f-sans);color:rgba(255,255,255,.42)}
@media (max-width:900px){
  .day-scroll{height:calc(100svh + 320svh)}
  .day-sticky{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:.875rem;padding:3.875rem var(--gutter) 1rem}
  .day-stage{height:54svh}
  .day-copy{grid-template-columns:1fr;gap:.625rem}
  .day-progress{grid-row:2;width:100%;height:2px}
  .day-progress span{transform-origin:0 50%;transform:scaleX(0)}
  .day-steps{grid-column:1;grid-row:1;grid-template-areas:"s";min-height:8.6em}
  .day-step{grid-area:s;opacity:0;transform:translateY(8px)}
  .day-step.is-active{opacity:1;transform:none}
  .day-step h3{font-size:1.375rem}
  .day-step p{max-width:none}
  .day-src{grid-column:1;grid-row:3;font-size:.6875rem}
  .day-load__n{font-size:2rem}
}
/* ohne 3D: Standbild und alle Schritte */
.day--static .day-scroll,.no-js .day-scroll{height:auto}
.day--static .day-sticky,.no-js .day-sticky{position:relative;height:auto;padding-block:2.5rem}
.day--static .day-stage,.no-js .day-stage{height:auto;aspect-ratio:1.4/1}
.day--static .day-step,.no-js .day-step{opacity:1;transform:none;position:static}
.day--static .day-steps,.no-js .day-steps{grid-template-areas:none;min-height:0}
.day--static .day-progress,.no-js .day-progress,.day--static .day-hud,.no-js .day-hud{display:none}
.day-gl{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,#000 0,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,#000 0,#000 86%,transparent 100%);mask-composite:intersect}

/* ==========================================================
   Handy: Scroll-Geschichten füllen den Bildschirm,
   Texte wechseln sauber, Einblendungen etwas zügiger
   ========================================================== */
/* gestaffelt nur, was gleichzeitig ins Bild kommt (Verzögerung setzt main.js) */
.js .reveal{transition-delay:var(--rd,0ms)}
@media (max-width:900px){
  /* Text-Schritte: der alte geht nach oben weg, der neue kommt kurz danach von unten */
  .day-step,.cyc-step{transition:opacity .26s ease,transform .26s ease}
  .day-step.is-past,.cyc-step.is-past{transform:translateY(-8px)}
  .day-step.is-active,.cyc-step.is-active{transition:opacity .5s ease .14s,transform .55s cubic-bezier(.22,.61,.36,1) .14s}

  /* Arbeitstag: die 3D-Bühne nimmt den ganzen freien Platz, der Text steht unten */
  .day-sticky{grid-template-rows:minmax(0,1fr) auto;align-items:stretch;align-content:stretch;gap:.75rem;padding:3.625rem var(--gutter) calc(.875rem + env(safe-area-inset-bottom))}
  .day-stage{height:100%;max-height:min(128vw,640px);min-height:0;align-self:center}
  .day-steps{min-height:0}
  .day-hud{left:0;right:0;top:.375rem;flex-direction:row;align-items:baseline;justify-content:space-between;gap:.75rem}
  .day-load{display:flex;align-items:baseline;gap:.5625rem}
  .day-load__l{margin:0}
  .day-load__n{font-size:1.625rem}

  /* Teufelskreis: Kreis so gross wie möglich, Beschriftung lesbar */
  .cyc-sticky{grid-template-rows:minmax(0,1fr) auto;align-items:stretch;align-content:stretch;gap:.75rem;padding:3.625rem var(--gutter) calc(1.125rem + env(safe-area-inset-bottom))}
  .cyc-figure{max-width:none;width:100%;height:100%;min-height:0}
  .cyc-svg{width:100%;height:100%}
  .cyc-label{font-size:20px}
  .cyc-mutual{font-size:17px;letter-spacing:.1em;transform:translateX(22px)}
}
/* Handy quer: Bild links, Text rechts */
@media (max-width:900px) and (orientation:landscape) and (max-height:540px){
  .day-sticky,.cyc-sticky{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:1.25rem;padding:4.625rem var(--gutter) .625rem}
  .day-stage,.cyc-figure{height:100%}
  .day-copy,.cyc-copy{align-self:center}
}
@media (max-width:760px){
  .js .reveal{transform:translateY(14px);transition-duration:.85s}
  .js [data-split] .wi{transition-duration:1s}
  .js .photo.reveal{transition-duration:1.15s}
  /* Der Button unten blendet während der Scroll-Geschichten aus (main.js) */
  .mobilecta{background:rgba(26,51,64,.96);backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .35s var(--ease-out)}
}
/* Ältere Browser ohne svh: gleiche Abläufe mit vh */
@supports not (height:100svh){
  .day-sticky,.cyc-sticky{height:100vh}
  .day-scroll{height:480vh}
  .cyc-scroll{height:400vh}
  .day-stage{height:min(calc(100vh - 112px),820px)}
  .cyc-figure{max-width:min(47.5rem,calc((100vh - 6.875rem) * 1.125))}
  @media (max-width:900px){.day-scroll{height:420vh}.cyc-scroll{height:360vh}.day-stage{height:100%}.cyc-figure{max-width:none}}
}

/* Karte als Inline-SVG: Umriss zeichnet sich, Kantone blenden ein (flüssig, auch auf dem Handy) */
.map__base,.map__line{display:block;width:100%;height:auto}
.map__line{position:absolute;left:0;top:0;height:100%;overflow:visible;pointer-events:none}
.map__base{opacity:0;transition:opacity 1.4s ease 1.1s;will-change:opacity}
.map.is-drawn .map__base{opacity:1}
.map__line .c{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease-long) .1s}
.map.is-drawn .map__line .c{stroke-dashoffset:0}
@media (max-width:760px){.map__line .c{transition-duration:2.1s}.map__base{transition-delay:.8s}}
@media (prefers-reduced-motion:reduce){.map__base{opacity:1;transition:none}.map__line .c{stroke-dashoffset:0;transition:none}}

/* Schönere Zeilenumbrüche: Titel ausgeglichen, Fliesstext ohne einzelnes Wort auf der letzten Zeile */
h1,h2,h3,h4,.display,.h2,.h3,.stat__num,.cta-line p,.bigline,.statements p,.lead--xl,.cyc-step p,.faq summary,.day-step h3{text-wrap:balance}
p,li,dd,dt,figcaption,blockquote{text-wrap:pretty}

/* Selbstcheck: Ergebnis erst nach dem ersten Antippen zeigen (display:flex überschreibt sonst das Attribut hidden) */
.check__result[hidden]{display:none!important}

/* Ruhige Arbeitstag-Version (Handy, weniger Bewegung): Standbild und alle fünf Schritte untereinander */
.day--static .day-step,.no-js .day-step{grid-area:auto}
.day--static .day-steps,.no-js .day-steps{gap:1.125rem}
@media (max-width:760px){
  /* Standbild auf dem Handy: oben weniger leere Fläche */
  .day--static .day-stage{aspect-ratio:1.75/1}
  .day--static .day-still{object-position:50% 85%}
}

/* Ruhiger Teufelskreis (Handy, weniger Bewegung): alle vier Schritte untereinander, nicht übereinander */
.cyc--static .cyc-step,.no-js .cyc-step{grid-area:auto}
.cyc--static .cyc-steps,.no-js .cyc-steps{min-height:0;gap:1.125rem}

/* =========================================================
   Änderungen Oktober 2026 (PDF «alle Veränderungen»)
   ========================================================= */

/* ---------- Handy: kein Ladebild, Startbereich schneller, weniger Leerraum ---------- */
@media (max-width:760px){
  :root{--sec:3.5rem}
  .loader{display:none!important}
  .js .hero-in{transition-duration:.9s;transition-delay:calc(var(--d,0s) * .4)}
  .compare{margin-top:3.5rem;padding-top:2.75rem}
  .example{margin-top:1.5rem}
  .ccards{gap:.625rem;margin-top:1.75rem}
  .ccard{padding:1.25rem 1.375rem}
  .ccard__cost{font-size:2.5rem}
  .ccard__effort{padding-top:.875rem}
  .bigline{margin-top:2.25rem}
  .points{gap:.625rem;margin-top:1.75rem}
  .points li{padding:1.125rem 1.25rem}
  .blist>div{padding:.875rem 0}
}

/* ---------- 6.2 Übungskarten ---------- */
.vk{max-width:62.5rem;margin:clamp(1.75rem,3vw,2.5rem) 0 0}
.vk__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem}
.vk__row img{width:100%;height:auto;border-radius:12px;background:var(--mist);box-shadow:0 1.125rem 2.5rem -1.375rem rgba(19,39,49,.5),0 2px 6px rgba(19,39,49,.12)}
.vk figcaption{margin-top:.875rem;text-align:center;font-size:.875rem;line-height:1.5;color:var(--ink-3)}
@media (max-width:760px){
  .vk__row{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:.25rem var(--gutter) 1.125rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .vk__row::-webkit-scrollbar{display:none}
  .vk__row img{flex:0 0 86%;min-width:0;scroll-snap-align:center}
  .vk figcaption{margin-top:.25rem}
}

/* ---------- 7.2 / 7.3 Mengenrabatt ---------- */
.formats__rabatt{padding:.875rem 1.125rem;border-radius:var(--r-card);background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);color:var(--ink);line-height:1.5}
.formats__rabatt strong{color:var(--navy)}
@media (min-width:901px){.formats{row-gap:.875rem}.formats__rabatt{grid-column:2}}

/* ---------- 7.4 Firmenanlässe ---------- */
.ev{display:grid;gap:1.375rem;margin-top:clamp(2.5rem,6vw,4.5rem);padding:clamp(1.5rem,4vw,2.75rem);border-radius:var(--r-feature);background:var(--navy);color:var(--on-navy)}
@media (min-width:900px){.ev{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:3rem;align-items:center}}
.ev .eyebrow{margin-bottom:.875rem}
.ev-title{font:300 clamp(1.875rem,3.4vw,2.625rem)/1.1 var(--f-display);color:var(--white);letter-spacing:-.01em}
.ev p:not(.eyebrow){margin-top:.75rem;max-width:56ch;color:var(--on-navy-2);line-height:1.6}
.ev-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.ev-tags li{padding:.5rem .875rem;border-radius:99px;border:1px solid rgba(201,165,92,.6);color:var(--white);font-size:.9375rem;line-height:1.3}
.ev-btn{width:100%;margin-top:1.375rem}
@media (min-width:900px){.ev-btn{width:auto}}

/* ---------- 11.2 Warum Workpilot ---------- */
.pilot{max-width:56ch;margin:1.375rem auto 0;text-align:center;color:var(--on-navy-2);line-height:1.55}
.pilot strong{color:var(--gold);font-weight:600}

/* ---------- 9 Kostenrechner ---------- */
#rechner .h2{max-width:20ch}
.rc{display:grid;gap:.875rem;margin-top:clamp(1.75rem,4vw,3rem)}
@media (min-width:900px){.rc{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.25rem;align-items:start}}
.rc-in{display:grid;gap:1.375rem;padding:1.375rem;border-radius:var(--r-card);background:var(--navy-card);border:1px solid var(--navy-line)}
.rc-field label{display:block;margin-bottom:.625rem;font:500 .75rem/1.6 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.rc-step{display:flex;gap:.5rem}
.rc-btn{flex:0 0 52px;height:56px;padding:0;border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--white);font:300 1.75rem/1 var(--f-sans);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .2s,border-color .2s}
.rc-btn:hover{border-color:var(--gold)}
.rc-btn:active{background:var(--gold-soft)}
.rc-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rc-box{flex:1;min-width:0;display:flex;align-items:center;gap:.375rem;height:56px;padding:0 .875rem;border-radius:var(--r-btn);background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.2);transition:border-color .2s}
.rc-box:focus-within{border-color:var(--gold)}
.rc-box span{color:var(--on-navy-3);font-size:1rem}
.rc-box input{flex:1;min-width:0;width:100%;padding:0;border:0;background:transparent;color:var(--white);font:500 max(16px,1.375rem)/1 var(--f-sans);text-align:center;font-variant-numeric:tabular-nums;outline:0}
.rc-box input[aria-invalid="true"]{color:#F2B38A}
.rc-hint{margin-top:.5rem;font-size:.8125rem;line-height:1.45;color:var(--on-navy-3)}
.rc-hint.is-warn{color:#F2B38A}

.rc-out{position:relative;padding:1.5rem 1.375rem;border-radius:var(--r-card);background:var(--white);color:var(--ink);transition:opacity .2s}
.rc-out.is-stale{opacity:.5}
.rc-kicker{font:500 .75rem/1.6 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rc-total{margin-top:.25rem;font:300 clamp(2.75rem,10vw,4.25rem)/1.05 var(--f-display);letter-spacing:-.01em;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-cur{font:400 .38em var(--f-sans);letter-spacing:0;color:var(--ink-3);vertical-align:.5em}
.rc-pp{margin-top:.375rem;color:var(--ink-2)}
.rc-list{margin:1.25rem 0 0;padding:0;list-style:none;border-top:1px dashed rgba(26,51,64,.28)}
.rc-list li{padding:.875rem 0;border-bottom:1px dashed rgba(26,51,64,.28)}
.rc-list li.rc-sum{border-bottom:0;padding-bottom:.25rem}
.rc-row{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;font-weight:600;color:var(--ink)}
.rc-name{display:flex;align-items:baseline}
.rc-n{flex:0 0 22px;display:inline-grid;place-items:center;width:22px;height:22px;margin-right:.625rem;border-radius:50%;background:var(--navy);color:var(--gold);font:500 .75rem/1 var(--f-mono);align-self:flex-start;margin-top:.0625rem}
.rc-val{white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-how{margin-top:.375rem;padding-left:2rem;font-size:.875rem;line-height:1.6;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rc-sum .rc-row{font-size:1.125rem;color:var(--navy)}
.rc-who-box,.rc-days{margin-top:.75rem;padding:.875rem 1rem;border-radius:12px;line-height:1.5}
.rc-who-box{background:var(--mist)}
.rc-days{border:1px solid var(--gold)}
.rc-who-box strong,.rc-days strong{color:var(--navy)}
.rc-betr[hidden]{display:none}
.rc-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.rc-next{display:grid;gap:1.375rem;margin-top:.875rem;padding:1.5rem 1.375rem;border-radius:var(--r-card);border:1px solid var(--navy-line)}
@media (min-width:900px){.rc-next{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem;padding:2rem;align-items:start}}
.rc-me{display:flex;gap:.875rem;align-items:flex-start}
.rc-avatar{flex:0 0 46px;height:46px;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:var(--navy);font:500 .9375rem/1 var(--f-sans)}
.rc-quote{font:300 1.25rem/1.4 var(--f-display);color:var(--white)}
.rc-who{margin-top:.5rem;font-size:.875rem;color:var(--on-navy-3)}
.rc-call{display:inline-block;margin-top:.75rem;color:var(--gold);font-weight:500;text-decoration:none}
.rc-call[hidden]{display:none}
.rc-form{display:grid;gap:.75rem}
@media (min-width:600px){.rc-form{grid-template-columns:1fr 1fr}}
.rc-form label{display:block;margin-bottom:.375rem;font-size:.875rem;color:var(--on-navy-2)}
.rc-opt{color:var(--on-navy-3)}
.rc-form input{width:100%;height:52px;padding:0 1rem;border-radius:var(--r-btn);background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.2);color:var(--white);font:400 max(16px,1rem)/1.2 var(--f-sans);outline:0;transition:border-color .2s}
.rc-form input:focus{border-color:var(--gold)}
.rc-form input[aria-invalid="true"]{border-color:#F2B38A}
.rc-full{grid-column:1/-1}
.rc-full .btn{width:100%}
.rc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rc-msg{margin-top:.625rem;font-size:.9375rem;line-height:1.5;color:var(--white)}
.rc-msg:empty{display:none}
.rc-msg.is-err{color:#F2B38A}
.rc-msg a{color:var(--gold)}
.rc-small{margin-top:.625rem;font-size:.8125rem;line-height:1.5;color:var(--on-navy-3)}
.rc-done{grid-column:1/-1;padding:1.25rem;border-radius:12px;background:var(--gold-soft);border:1px solid var(--gold);color:var(--white);line-height:1.6;outline:0}
.rc-done strong{display:block;margin-bottom:.25rem;font:300 1.75rem/1.2 var(--f-display);color:var(--gold)}
.rc-note{margin-top:1.25rem;max-width:80ch;font-size:.8125rem;line-height:1.6;color:var(--on-navy-3)}

/* ---------- Handy: 3D-Arbeitstag läuft von selbst ab wie ein Video (day--auto) ---------- */
.day--auto .day-scroll{height:auto}
.day--auto .day-sticky{position:relative;top:auto;height:auto;display:block;padding:1.5rem var(--gutter) 0}
.day--auto .day-stage{height:auto;max-height:none;aspect-ratio:1/1.05;min-height:0}
.day--auto .day-still{display:block;object-position:50% 80%;transition:opacity .6s ease}
.day--auto .day-stage.is-ready .day-still{opacity:0}
.day--auto .day-gl{transition:opacity .38s ease}
.day--auto .day-stage.is-fading .day-gl{opacity:0}
.day--auto .day-copy{display:block;margin-top:.875rem}
.day--auto .day-progress{display:none}
.day--auto .day-steps{margin-top:1rem;min-height:8.2em}
.day-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.375rem}
.day-dot{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:44px;padding:.5rem 0 .25rem;border:0;background:none;color:var(--on-navy-3);font:500 .75rem/1 var(--f-mono);letter-spacing:.06em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .3s ease}
.day-dot i{display:block;width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.day-dot b{display:block;height:100%;width:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.day-dot.is-past{color:var(--on-navy-2)}
.day-dot.is-on{color:var(--gold)}
.day-dot:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.day-play{position:absolute;right:.5rem;bottom:.5rem;z-index:3;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(19,39,49,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);cursor:pointer;-webkit-tap-highlight-color:transparent}
.day-play svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.day-play .i-play{display:none;fill:currentColor;stroke-width:1.6}
.is-paused .day-play .i-pause{display:none}
.is-paused .day-play .i-play{display:block}
.day-play:focus-visible{outline:2px solid var(--gold);outline-offset:2px}